feat: seamless inline editing of generated prose

app/runs/[id]/page.tsx

@@ -105,6 +105,10 @@ function RunWizard({ id }: { id: string }) {
     toast.success('Launch plan copied')
   }
 
+  function editField(platform: PlatformId, path: (string | number)[], value: string) {
+    dispatch({ type: 'EDIT_FIELD', platform, path, value })
+  }
+
   if (status === 'loading') {
     return <p className="px-6 py-16 text-center text-sm text-muted-foreground">Loading run…</p>
   }
@@ -161,6 +165,7 @@ function RunWizard({ id }: { id: string }) {
           onExportMarkdown={exportMarkdown}
           onCopyPlan={copyPlan}
           onExportPlan={exportPlan}
+          onEditField={editField}
           onStartOver={() => router.push('/runs')}
         />
       )}

components/common/EditableText/EditableText.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { EditableText } from './EditableText'
+
+describe('EditableText', () => {
+  it('commits trimmed text on blur when changed', () => {
+    const onCommit = vi.fn()
+    render(<EditableText value="hello" onCommit={onCommit} ariaLabel="Field" />)
+    const el = screen.getByRole('textbox', { name: 'Field' })
+    el.textContent = '  world  '
+    fireEvent.blur(el)
+    expect(onCommit).toHaveBeenCalledWith('world')
+  })
+
+  it('does not commit when the value is unchanged', () => {
+    const onCommit = vi.fn()
+    render(<EditableText value="hello" onCommit={onCommit} ariaLabel="Field" />)
+    const el = screen.getByRole('textbox', { name: 'Field' })
+    fireEvent.blur(el)
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('reverts to the previous value when cleared to empty', () => {
+    const onCommit = vi.fn()
+    render(<EditableText value="hello" onCommit={onCommit} ariaLabel="Field" />)
+    const el = screen.getByRole('textbox', { name: 'Field' })
+    el.textContent = '   '
+    fireEvent.blur(el)
+    expect(onCommit).not.toHaveBeenCalled()
+    expect(el.textContent).toBe('hello')
+  })
+
+  it('renders read-only text (no textbox) when onCommit is omitted', () => {
+    render(<EditableText value="static" ariaLabel="Field" />)
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(screen.getByText('static')).toBeInTheDocument()
+  })
+})

components/common/EditableText/EditableText.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { useRef, type KeyboardEvent, type ClipboardEvent } from 'react'
+import type { EditableTextProps } from './EditableText.types'
+
+// Seamless inline editing: the text itself is contentEditable — no input box, no
+// edit/save buttons. Edits commit on blur and persist via the run's autosave.
+// React renders `value` as the initial child and never re-renders it mid-edit
+// (commits happen on blur, so the value prop only changes when unfocused), so the
+// caret never jumps.
+export function EditableText({ value, onCommit, multiline = false, ariaLabel, className = '' }: EditableTextProps) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  if (!onCommit) {
+    return (
+      <div className={className} style={multiline ? { whiteSpace: 'pre-wrap' } : undefined}>
+        {value}
+      </div>
+    )
+  }
+
+  function commit() {
+    const el = ref.current
+    if (!el) return
+    // jsdom lacks innerText; fall back to textContent so tests still exercise commit.
+    const raw = (multiline ? el.innerText || el.textContent : el.textContent) || ''
+    const next = raw.replace(/ /g, ' ').replace(/\n+$/, '').trim()
+    if (!next) {
+      el.textContent = value // never persist blank prose — revert
+      return
+    }
+    if (next !== value) onCommit!(next)
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!multiline && e.key === 'Enter') {
+      e.preventDefault()
+      ref.current?.blur()
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    e.preventDefault()
+    const text = e.clipboardData.getData('text/plain')
+    document.execCommand('insertText', false, text)
+  }
+
+  return (
+    <div
+      ref={ref}
+      contentEditable
+      suppressContentEditableWarning
+      role="textbox"
+      aria-label={ariaLabel}
+      aria-multiline={multiline || undefined}
+      tabIndex={0}
+      onBlur={commit}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+      className={`-mx-1 cursor-text rounded-sm px-1 outline-none transition-colors hover:bg-muted/40 focus:bg-muted/30 focus:ring-1 focus:ring-primary/40 ${className}`}
+      style={multiline ? { whiteSpace: 'pre-wrap' } : undefined}
+    >
+      {value}
+    </div>
+  )
+}

components/common/EditableText/EditableText.types.ts

@@ -0,0 +1,9 @@
+export type EditableTextProps = {
+  value: string
+  /** When omitted, the text renders read-only (no contentEditable). */
+  onCommit?: (next: string) => void
+  /** Multiline keeps line breaks and lets Enter insert a newline. */
+  multiline?: boolean
+  ariaLabel: string
+  className?: string
+}

components/common/EditableText/index.ts

@@ -0,0 +1 @@
+export { EditableText } from './EditableText'

components/post-kit/PostKit/PostKit.test.tsx

@@ -39,6 +39,7 @@ function renderKit() {
         onExportMarkdown={vi.fn()}
         onCopyPlan={vi.fn()}
         onExportPlan={vi.fn()}
+        onEditField={vi.fn()}
         onStartOver={vi.fn()}
       />
     </RuntimeConfigProvider>,

components/post-kit/PostKit/PostKit.tsx

@@ -15,7 +15,7 @@ import type { PostKitProps } from './PostKit.types'
 type View = 'edit' | 'launch-ops' | 'preview'
 const VIEW_LABELS: Record<View, string> = { edit: 'Edit', 'launch-ops': 'Launch ops', preview: 'Preview' }
 
-export function PostKit({ generation, productName, onExportMarkdown, onCopyPlan, onExportPlan, onStartOver }: PostKitProps) {
+export function PostKit({ generation, productName, onExportMarkdown, onCopyPlan, onExportPlan, onEditField, onStartOver }: PostKitProps) {
   const { core, platforms, plan } = generation
   const firstReady = PLATFORMS.find((p) => platforms[p.id])?.id ?? 'product-hunt'
   const [platform, setPlatform] = useState<PlatformId>(firstReady)
@@ -117,7 +117,9 @@ export function PostKit({ generation, productName, onExportMarkdown, onCopyPlan,
             This platform didn&apos;t generate. Pick another, or start over to try again.
           </p>
         ) : activeView === 'edit' ? (
-          Sections ? <Sections core={core} content={content} /> : null
+          Sections ? (
+            <Sections core={core} content={content} onEdit={(path, value) => onEditField(platform, path, value)} />
+          ) : null
         ) : activeView === 'launch-ops' ? (
           <LaunchOpsSection kit={content as ProductHuntContent} />
         ) : Preview ? (

components/post-kit/PostKit/PostKit.types.ts

@@ -7,5 +7,6 @@ export type PostKitProps = {
   onExportMarkdown: (platform: PlatformId) => void
   onCopyPlan: () => void
   onExportPlan: () => void
+  onEditField: (platform: PlatformId, path: (string | number)[], value: string) => void
   onStartOver: () => void
 }

components/post-kit/platforms/AppSumoSections/AppSumoSections.tsx

@@ -1,16 +1,22 @@
 import { SectionCard } from '@/components/common/SectionCard'
 import { CopyButton } from '@/components/common/CopyButton'
+import { EditableText } from '@/components/common/EditableText'
 import { Badge } from '@/components/ui/badge'
 import type { AppSumoContent } from '@/lib/types'
 import type { PlatformSectionsProps } from '../platform-sections.types'
 
-export function AppSumoSections({ content, loading = false }: PlatformSectionsProps) {
+export function AppSumoSections({ content, loading = false, onEdit }: PlatformSectionsProps) {
   const deal = content as AppSumoContent
   return (
     <div className="space-y-4">
       <SectionCard title="Deal headline" loading={loading}>
         <div className="flex items-center justify-between gap-2">
-          <p className="font-medium">{deal.dealHeadline}</p>
+          <EditableText
+            value={deal.dealHeadline}
+            onCommit={onEdit && ((v) => onEdit(['dealHeadline'], v))}
+            ariaLabel="Deal headline"
+            className="flex-1 font-medium"
+          />
           <CopyButton value={deal.dealHeadline} />
         </div>
       </SectionCard>
@@ -20,7 +26,12 @@ export function AppSumoSections({ content, loading = false }: PlatformSectionsPr
           <span className="text-xs uppercase text-muted-foreground">Overview</span>
           <CopyButton value={deal.pitch} />
         </div>
-        <p className="whitespace-pre-wrap">{deal.pitch}</p>
+        <EditableText
+          value={deal.pitch}
+          onCommit={onEdit && ((v) => onEdit(['pitch'], v))}
+          multiline
+          ariaLabel="Pitch"
+        />
       </SectionCard>
 
       <SectionCard title="What's included" loading={loading}>

components/post-kit/platforms/HackerNewsSections/HackerNewsSections.tsx

@@ -1,15 +1,21 @@
 import { SectionCard } from '@/components/common/SectionCard'
 import { CopyButton } from '@/components/common/CopyButton'
+import { EditableText } from '@/components/common/EditableText'
 import type { HackerNewsContent } from '@/lib/types'
 import type { PlatformSectionsProps } from '../platform-sections.types'
 
-export function HackerNewsSections({ content, loading = false }: PlatformSectionsProps) {
+export function HackerNewsSections({ content, loading = false, onEdit }: PlatformSectionsProps) {
   const hn = content as HackerNewsContent
   return (
     <div className="space-y-4">
       <SectionCard title="Show HN title" loading={loading}>
         <div className="flex items-center justify-between gap-2">
-          <p className="font-medium">{hn.title}</p>
+          <EditableText
+            value={hn.title}
+            onCommit={onEdit && ((v) => onEdit(['title'], v))}
+            ariaLabel="Show HN title"
+            className="flex-1 font-medium"
+          />
           <CopyButton value={hn.title} />
         </div>
       </SectionCard>
@@ -19,15 +25,25 @@ export function HackerNewsSections({ content, loading = false }: PlatformSection
           <span className="text-xs uppercase text-muted-foreground">Body</span>
           <CopyButton value={hn.postBody} />
         </div>
-        <p className="whitespace-pre-wrap">{hn.postBody}</p>
+        <EditableText
+          value={hn.postBody}
+          onCommit={onEdit && ((v) => onEdit(['postBody'], v))}
+          multiline
+          ariaLabel="Post body"
+        />
       </SectionCard>
 
       <SectionCard title="First comment" loading={loading}>
         <div className="flex items-center justify-between">
           <span className="text-xs uppercase text-muted-foreground">Comment</span>
           <CopyButton value={hn.firstComment} />
         </div>
-        <p className="whitespace-pre-wrap">{hn.firstComment}</p>
+        <EditableText
+          value={hn.firstComment}
+          onCommit={onEdit && ((v) => onEdit(['firstComment'], v))}
+          multiline
+          ariaLabel="First comment"
+        />
       </SectionCard>
 
       <SectionCard title="Posting tips" loading={loading}>

components/post-kit/platforms/ProductHuntSections/ProductHuntSections.tsx

@@ -6,12 +6,12 @@ import type { ProductHuntContent } from '@/lib/types'
 import type { PlatformSectionsProps } from '../platform-sections.types'
 
 // Launch-day ops live in their own "Launch ops" tab in PostKit, not in this edit view.
-export function ProductHuntSections({ content, loading }: PlatformSectionsProps) {
+export function ProductHuntSections({ content, loading, onEdit }: PlatformSectionsProps) {
   const kit = content as ProductHuntContent
   return (
     <div className="space-y-4">
-      <CopySection kit={kit} loading={loading} />
-      <TopicsCommentSection kit={kit} loading={loading} />
+      <CopySection kit={kit} loading={loading} onEdit={onEdit} />
+      <TopicsCommentSection kit={kit} loading={loading} onEdit={onEdit} />
       <GallerySection kit={kit} loading={loading} />
       <VideoSection kit={kit} loading={loading} />
     </div>

components/post-kit/platforms/RedditSections/RedditSections.tsx

@@ -1,9 +1,10 @@
 import { SectionCard } from '@/components/common/SectionCard'
 import { CopyButton } from '@/components/common/CopyButton'
+import { EditableText } from '@/components/common/EditableText'
 import type { RedditContent } from '@/lib/types'
 import type { PlatformSectionsProps } from '../platform-sections.types'
 
-export function RedditSections({ content, loading = false }: PlatformSectionsProps) {
+export function RedditSections({ content, loading = false, onEdit }: PlatformSectionsProps) {
   const reddit = content as RedditContent
   return (
     <div className="space-y-4">
@@ -33,14 +34,24 @@ export function RedditSections({ content, loading = false }: PlatformSectionsPro
             <span className="text-xs uppercase text-muted-foreground">Title</span>
             <CopyButton value={reddit.title} />
           </div>
-          <p className="font-medium">{reddit.title}</p>
+          <EditableText
+            value={reddit.title}
+            onCommit={onEdit && ((v) => onEdit(['title'], v))}
+            ariaLabel="Reddit post title"
+            className="font-medium"
+          />
         </div>
         <div className="space-y-1">
           <div className="flex items-center justify-between">
             <span className="text-xs uppercase text-muted-foreground">Body</span>
             <CopyButton value={reddit.body} />
           </div>
-          <p className="whitespace-pre-wrap">{reddit.body}</p>
+          <EditableText
+            value={reddit.body}
+            onCommit={onEdit && ((v) => onEdit(['body'], v))}
+            multiline
+            ariaLabel="Reddit post body"
+          />
         </div>
       </SectionCard>
 

components/post-kit/platforms/SocialSections/SocialSections.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { SocialSections } from './SocialSections'
 import type { LaunchCore, SocialContent } from '@/lib/types'
 
@@ -25,4 +25,18 @@ describe('SocialSections', () => {
     expect(screen.getByText('Would you share how you use Acme?')).toBeInTheDocument()
     expect(screen.getByText('#buildinpublic')).toBeInTheDocument()
   })
+
+  it('commits a tweet edit with the correct array path', () => {
+    const onEdit = vi.fn()
+    render(<SocialSections core={core} content={content} onEdit={onEdit} />)
+    const tweet = screen.getByRole('textbox', { name: 'Tweet 2' })
+    tweet.textContent = 'Edited second tweet'
+    fireEvent.blur(tweet)
+    expect(onEdit).toHaveBeenCalledWith(['thread', 'tweets', 1], 'Edited second tweet')
+  })
+
+  it('renders tweets read-only when onEdit is omitted', () => {
+    render(<SocialSections core={core} content={content} />)
+    expect(screen.queryByRole('textbox', { name: 'Tweet 1' })).toBeNull()
+  })
 })

components/post-kit/platforms/SocialSections/SocialSections.tsx

@@ -1,9 +1,10 @@
 import { SectionCard } from '@/components/common/SectionCard'
 import { CopyButton } from '@/components/common/CopyButton'
+import { EditableText } from '@/components/common/EditableText'
 import type { SocialContent } from '@/lib/types'
 import type { PlatformSectionsProps } from '../platform-sections.types'
 
-export function SocialSections({ content, loading = false }: PlatformSectionsProps) {
+export function SocialSections({ content, loading = false, onEdit }: PlatformSectionsProps) {
   const social = content as SocialContent
   const fullThread = social.thread.tweets.join('\n\n')
   const channels: { label: string; value: string }[] = [
@@ -21,12 +22,17 @@ export function SocialSections({ content, loading = false }: PlatformSectionsPro
         </div>
         <ol className="space-y-2">
           {social.thread.tweets.map((tweet, i) => (
-            <li key={tweet} className="rounded-xl border border-border px-3 py-2">
+            <li key={i} className="rounded-xl border border-border px-3 py-2">
               <div className="mb-1 flex items-center justify-between">
                 <span className="text-xs text-muted-foreground">{i + 1}/{social.thread.tweets.length}</span>
                 <CopyButton value={tweet} />
               </div>
-              <p className="whitespace-pre-wrap">{tweet}</p>
+              <EditableText
+                value={tweet}
+                onCommit={onEdit && ((v) => onEdit(['thread', 'tweets', i], v))}
+                multiline
+                ariaLabel={`Tweet ${i + 1}`}
+              />
             </li>
           ))}
         </ol>

components/post-kit/platforms/platform-sections.types.ts

@@ -1,5 +1,14 @@
 import type { LaunchCore, PlatformContent } from '@/lib/types'
 
+// Commits an inline edit of one prose field. `path` is relative to the active
+// platform's content object (e.g. ['copy','tagline'], ['thread','tweets',2]).
+export type EditFieldFn = (path: (string | number)[], value: string) => void
+
 // Every platform's edit-view section group takes the shared core plus its own
-// content (narrowed internally) and a loading flag for the regenerate shimmer.
-export type PlatformSectionsProps = { core: LaunchCore; content: PlatformContent; loading?: boolean }
+// content (narrowed internally), a loading flag, and an optional inline-edit hook.
+export type PlatformSectionsProps = {
+  core: LaunchCore
+  content: PlatformContent
+  loading?: boolean
+  onEdit?: EditFieldFn
+}