From b01e8707ee26635ea7b9aa922a33bc5015d248e2 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Mon, 19 Oct 2026 19:07:54 -0400
Subject: [PATCH 1/2] feat(sessions): full-screen mobile question sheet with
 persisted draft answers

---
 .../components/session/FormPrompt.test.tsx    | 136 ++++++++++++++-
 .../src/components/session/FormPrompt.tsx     | 160 ++++++++++++------
 frontend/src/lib/formDrafts.ts                |  91 ++++++++++
 frontend/src/pages/SessionDetail.tsx          | 134 ++++++++-------
 .../SessionDetail.form-prompt.test.tsx        |  43 ++++-
 5 files changed, 443 insertions(+), 121 deletions(-)
 create mode 100644 frontend/src/lib/formDrafts.ts

diff --git a/frontend/src/components/session/FormPrompt.test.tsx b/frontend/src/components/session/FormPrompt.test.tsx
index 45c42320b..b47b89e0c 100644
--- a/frontend/src/components/session/FormPrompt.test.tsx
+++ b/frontend/src/components/session/FormPrompt.test.tsx
@@ -1,6 +1,6 @@
-import { render as renderRaw, screen, waitFor, within } from '@testing-library/react'
+import { fireEvent, render as renderRaw, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { ReactElement } from 'react'
 import type { FormInfo } from '@opencode-manager/shared/opencode'
 import { KeyboardShortcutsProvider, useShortcutActions } from '@/contexts/KeyboardShortcutsContext'
@@ -19,6 +19,10 @@ function AbortLayer({ onAbort }: { onAbort: () => void }) {
   return null
 }
 
+function getHeaderDismissButton() {
+  return screen.getAllByRole('button', { name: 'Dismiss' })[0]
+}
+
 const selectForm: FormInfo = {
   id: 'form-1',
   sessionID: 'session-1',
@@ -37,6 +41,14 @@ const selectForm: FormInfo = {
 }
 
 describe('FormPrompt', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    sessionStorage.clear()
+  })
+
   it('submits the selected option keyed by field key', async () => {
     const onReply = vi.fn().mockResolvedValue(undefined)
     render(<FormPrompt form={selectForm} onReply={onReply} onCancel={vi.fn()} />)
@@ -84,7 +96,7 @@ describe('FormPrompt', () => {
     const onCancel = vi.fn().mockResolvedValue(undefined)
     render(<FormPrompt form={selectForm} onReply={vi.fn()} onCancel={onCancel} />)
 
-    await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+    await userEvent.click(getHeaderDismissButton())
 
     await waitFor(() => expect(onCancel).toHaveBeenCalledWith('form-1'))
   })
@@ -519,7 +531,36 @@ describe('FormPrompt', () => {
       expect(featuresAlpha).toHaveAttribute('aria-pressed', 'true')
 
       expect(screen.getByRole('button', { name: 'Dismiss form' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument()
+      expect(screen.getAllByRole('button', { name: 'Dismiss' })).toHaveLength(2)
+    })
+  })
+
+  describe('mobile sheet controls', () => {
+    it('minimizes from the grab handle', async () => {
+      const onMinimize = vi.fn()
+      render(<FormPrompt form={selectForm} onReply={vi.fn()} onCancel={vi.fn()} onMinimize={onMinimize} />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Drag to minimize' }))
+
+      expect(onMinimize).toHaveBeenCalledTimes(1)
+    })
+
+    it('minimizes from the mobile header control', async () => {
+      const onMinimize = vi.fn()
+      render(<FormPrompt form={selectForm} onReply={vi.fn()} onCancel={vi.fn()} onMinimize={onMinimize} />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Minimize form' }))
+
+      expect(onMinimize).toHaveBeenCalledTimes(1)
+    })
+
+    it('dismisses from the mobile header link', async () => {
+      const onCancel = vi.fn().mockResolvedValue(undefined)
+      render(<FormPrompt form={selectForm} onReply={vi.fn()} onCancel={onCancel} />)
+
+      await userEvent.click(getHeaderDismissButton())
+
+      await waitFor(() => expect(onCancel).toHaveBeenCalledWith('form-1'))
     })
   })
 
@@ -628,6 +669,75 @@ describe('FormPrompt', () => {
     })
   })
 
+  describe('draft persistence', () => {
+    const draftKey = 'opencode-manager:form-draft:form-1'
+
+    it('restores answers after unmount and remount', async () => {
+      const onReply = vi.fn().mockResolvedValue(undefined)
+      const first = render(<FormPrompt form={selectForm} onReply={onReply} onCancel={vi.fn()} />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Production' }))
+      first.unmount()
+
+      render(<FormPrompt form={selectForm} onReply={onReply} onCancel={vi.fn()} />)
+
+      expect(screen.getByRole('button', { name: 'Production' })).toHaveAttribute('aria-pressed', 'true')
+      await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+      await waitFor(() => expect(onReply).toHaveBeenCalledWith('form-1', { q0: 'production' }))
+    })
+
+    it('clears the draft after a successful submit', async () => {
+      const onReply = vi.fn().mockResolvedValue(undefined)
+      const first = render(<FormPrompt form={selectForm} onReply={onReply} onCancel={vi.fn()} />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Production' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+      await waitFor(() => expect(sessionStorage.getItem(draftKey)).toBeNull())
+      first.unmount()
+
+      render(<FormPrompt form={selectForm} onReply={onReply} onCancel={vi.fn()} />)
+
+      expect(screen.getByRole('button', { name: 'Production' })).toHaveAttribute('aria-pressed', 'false')
+    })
+
+    it('clears the draft after a successful dismiss', async () => {
+      const onCancel = vi.fn().mockResolvedValue(undefined)
+      render(<FormPrompt form={selectForm} onReply={vi.fn()} onCancel={onCancel} />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Production' }))
+      await userEvent.click(getHeaderDismissButton())
+
+      await waitFor(() => expect(onCancel).toHaveBeenCalledWith('form-1'))
+      await waitFor(() => expect(sessionStorage.getItem(draftKey)).toBeNull())
+    })
+
+    it('falls back to defaults when the stored draft is corrupt', () => {
+      const form: FormInfo = {
+        id: 'form-corrupt',
+        sessionID: 'session-1',
+        title: 'Choose',
+        fields: [
+          {
+            key: 'q0',
+            title: 'Environment',
+            type: 'string',
+            options: [
+              { value: 'staging', label: 'Staging' },
+              { value: 'production', label: 'Production' },
+            ],
+            default: 'staging',
+          },
+        ],
+      }
+      sessionStorage.setItem('opencode-manager:form-draft:form-corrupt', '{not json')
+
+      render(<FormPrompt form={form} onReply={vi.fn()} onCancel={vi.fn()} />)
+
+      expect(screen.getByRole('button', { name: 'Staging' })).toHaveAttribute('aria-pressed', 'true')
+      expect(screen.getByRole('button', { name: 'Production' })).toHaveAttribute('aria-pressed', 'false')
+    })
+  })
+
   describe('keyboard shortcuts', () => {
     it('minimizes once on Escape while expanded without triggering a registered session abort', async () => {
       const sessionAbort = vi.fn()
@@ -644,5 +754,23 @@ describe('FormPrompt', () => {
       expect(onMinimize).toHaveBeenCalledTimes(1)
       expect(sessionAbort).not.toHaveBeenCalled()
     })
+
+    it('ignores Escape from inside a dialog but minimizes from the document body', () => {
+      const onMinimize = vi.fn()
+      render(
+        <>
+          <div role="dialog" data-state="open">
+            <button type="button">Dialog action</button>
+          </div>
+          <FormPrompt form={selectForm} onReply={vi.fn()} onCancel={vi.fn()} onMinimize={onMinimize} />
+        </>
+      )
+
+      fireEvent.keyDown(screen.getByRole('button', { name: 'Dialog action' }), { key: 'Escape' })
+      expect(onMinimize).not.toHaveBeenCalled()
+
+      fireEvent.keyDown(document.body, { key: 'Escape' })
+      expect(onMinimize).toHaveBeenCalledTimes(1)
+    })
   })
 })
diff --git a/frontend/src/components/session/FormPrompt.tsx b/frontend/src/components/session/FormPrompt.tsx
index cde00e1ff..6e7d01027 100644
--- a/frontend/src/components/session/FormPrompt.tsx
+++ b/frontend/src/components/session/FormPrompt.tsx
@@ -1,13 +1,15 @@
-import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from 'react'
 import { X, ChevronDown, ChevronUp, Check, Loader2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { ExternalFieldCard } from '@/components/ui/external-field-card'
 import type { FormAnswer, FormField, FormInfo } from '@opencode-manager/shared/opencode'
 import { buildAnswer, hasMissingAnswers, visibleFields } from '@/lib/formFields'
+import { clearFormDraft, loadFormDraft, saveFormDraft, type FormDraft } from '@/lib/formDrafts'
 import { cn } from '@/lib/utils'
 import { showToast } from '@/lib/toast'
 import { useShortcutActions } from '@/contexts/KeyboardShortcutsContext'
+import { useMobile, useSwipeDismiss } from '@/hooks/useMobile'
 
 type AnswerableFormField = Exclude<FormField, { type: 'external' }>
 
@@ -31,13 +33,7 @@ function usesCustomInput(field: AnswerableFormField): boolean {
   return field.type === 'string' && field.custom === true && (field.options?.length ?? 0) > 0
 }
 
-interface FormPromptState {
-  answer: FormAnswer
-  customValues: Record<string, string[]>
-  customDrafts: Record<string, string>
-}
-
-function buildInitialState(fields: AnswerableFormField[]): FormPromptState {
+function buildInitialState(fields: AnswerableFormField[]): FormDraft {
   const answer: FormAnswer = {}
   const customValues: Record<string, string[]> = {}
   const customDrafts: Record<string, string> = {}
@@ -70,12 +66,33 @@ interface FormPromptProps {
 
 export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptProps) {
   const candidateFields = form.fields.filter(isAnswerableField)
-  const [state, setState] = useState<FormPromptState>(() => buildInitialState(candidateFields))
+  const [state, setState] = useState<FormDraft>(() => loadFormDraft(form.id) ?? buildInitialState(candidateFields))
   const { answer, customValues, customDrafts } = state
   const [expandedCustom, setExpandedCustom] = useState<string | null>(null)
   const [isMinimized, setIsMinimized] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const draftClearedRef = useRef(false)
+  const mobileHeaderRef = useRef<HTMLDivElement>(null)
   const formControlId = useId()
+  const isMobile = useMobile()
+
+  const handleMinimize = useCallback(() => {
+    setIsMinimized(true)
+    onMinimize?.()
+  }, [onMinimize])
+
+  const { bind, swipeStyles } = useSwipeDismiss(handleMinimize, {
+    enabled: !isMinimized,
+    threshold: 96,
+    suspendsRouteSwipe: false,
+  })
+
+  useEffect(() => bind(mobileHeaderRef.current), [bind])
+
+  useEffect(() => {
+    if (draftClearedRef.current) return
+    saveFormDraft(form.id, state)
+  }, [form.id, state])
 
   const controlId = (key: string) => `${formControlId}-${key}`
 
@@ -132,11 +149,6 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
   const canSubmit = !hasMissingAnswers(form.fields, effectiveAnswers)
   const buildSubmission = (): FormAnswer => buildAnswer(form.fields, effectiveAnswers)
 
-  const handleMinimize = () => {
-    setIsMinimized(true)
-    onMinimize?.()
-  }
-
   useShortcutActions({
     abort: !isMinimized && !expandedCustom ? handleMinimize : undefined,
   })
@@ -146,6 +158,8 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
     setIsSubmitting(true)
     try {
       await onReply(form.id, buildSubmission())
+      draftClearedRef.current = true
+      clearFormDraft(form.id)
     } catch {
       showToast.error('Failed to submit form')
     } finally {
@@ -157,6 +171,8 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
     setIsSubmitting(true)
     try {
       await onCancel(form.id)
+      draftClearedRef.current = true
+      clearFormDraft(form.id)
     } catch {
       showToast.error('Failed to dismiss form')
     } finally {
@@ -168,6 +184,7 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.defaultPrevented) return
       if (e.key === 'Escape' && !isMinimized && !expandedCustom) {
+        if (e.target instanceof Element && e.target.closest('[role="dialog"], [role="alertdialog"]')) return
         setIsMinimized(true)
         onMinimize?.()
       }
@@ -187,7 +204,7 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
       const selected = typeof value === 'boolean' ? value : undefined
       return (
         <FieldGroup key={field.key} label={label} description={field.description} required={required}>
-          <div className="flex gap-1.5 sm:gap-2">
+          <div className="flex gap-3 md:gap-2">
             <OptionButton selected={selected === true} label="Yes" onClick={() => setFieldAnswer(field.key, true)} />
             <OptionButton selected={selected === false} label="No" onClick={() => setFieldAnswer(field.key, false)} />
           </div>
@@ -209,7 +226,7 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
             max={typeof field.maximum === 'number' ? field.maximum : undefined}
             step={field.type === 'integer' ? 1 : 'any'}
             onChange={(e) => setFieldAnswer(field.key, e.target.value === '' ? '' : Number(e.target.value))}
-            className="w-full rounded-lg border border-border bg-muted/60 dark:bg-muted/5 px-3 py-2 text-sm focus:border-primary focus:outline-none"
+            className="w-full rounded-lg border border-border bg-muted/60 dark:bg-muted/5 px-3.5 py-3 text-base focus:border-primary focus:outline-none md:px-3 md:py-2 md:text-sm"
           />
         </div>
       )
@@ -221,7 +238,7 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
       const customValue = customDrafts[field.key] ?? ''
       return (
         <FieldGroup key={field.key} label={label} description={field.description} required={required}>
-          <div className="space-y-1.5 sm:space-y-2">
+          <div className="space-y-3 md:space-y-2">
             {field.options.map((option) => (
               <OptionButton
                 key={option.value}
@@ -260,7 +277,7 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
       const customValue = customDrafts[field.key] ?? ''
       return (
         <FieldGroup key={field.key} label={label} description={field.description} required={required}>
-          <div className="space-y-1.5 sm:space-y-2">
+          <div className="space-y-3 md:space-y-2">
             {field.options.map((option) => (
               <OptionButton
                 key={option.value}
@@ -302,19 +319,54 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
           value={typeof value === 'string' ? value : ''}
           onChange={(e) => setFieldAnswer(field.key, e.target.value)}
           placeholder={field.placeholder ?? 'Type your answer...'}
-          className="min-h-[60px] sm:min-h-[80px] text-[16px] sm:text-xs md:text-sm resize-none border-primary/30 focus:border-primary"
+          className="min-h-[60px] md:min-h-[80px] text-[16px] md:text-sm resize-none border-primary/30 focus:border-primary"
         />
       </div>
     )
   }
 
   return (
-    <div className="w-full bg-background bg-gradient-to-br from-primary/10 to-primary/20 border-2 border-primary/40 rounded-xl shadow-lg shadow-primary/20 mb-1 overflow-hidden">
-      <div className="flex items-center px-3 py-2 sm:px-4 sm:py-2.5 border-b border-primary/20 bg-primary/5">
+    <div
+      className="flex flex-1 min-h-0 flex-col overflow-hidden rounded-t-[22px] border-t border-primary/40 bg-background bg-gradient-to-b from-primary/15 to-card mb-1 md:flex-none md:rounded-xl md:border-2 md:border-primary/40 md:bg-gradient-to-br md:from-primary/10 md:to-primary/20 md:shadow-lg md:shadow-primary/20"
+      style={isMobile ? swipeStyles : undefined}
+    >
+      <div ref={mobileHeaderRef} className="shrink-0 md:hidden">
+        <button
+          type="button"
+          onClick={handleMinimize}
+          aria-label="Drag to minimize"
+          className="flex h-[22px] w-full items-center justify-center"
+        >
+          <span aria-hidden="true" className="h-[5px] w-10 rounded-full bg-muted-foreground/40" />
+        </button>
+        <div className="flex h-11 items-center gap-1 px-1.5">
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+            className="min-h-11 min-w-11 px-2 text-left text-base text-primary disabled:opacity-50"
+          >
+            Dismiss
+          </button>
+          <span className="min-w-0 flex-1 truncate text-center text-[13px] font-semibold uppercase tracking-wide text-muted-foreground">
+            {form.title || 'Form'}
+          </span>
+          <button
+            type="button"
+            onClick={() => (isMinimized ? setIsMinimized(false) : handleMinimize())}
+            aria-label="Minimize form"
+            className="flex h-11 w-11 shrink-0 items-center justify-center text-muted-foreground"
+          >
+            <ChevronDown className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="hidden md:flex items-center px-3 py-2 md:px-4 md:py-2.5 border-b border-primary/20 bg-primary/5">
         <button
           onClick={() => (isMinimized ? setIsMinimized(false) : handleMinimize())}
           aria-expanded={!isMinimized}
-          className="flex items-center gap-1.5 flex-1 text-left text-xs sm:text-sm font-semibold text-primary"
+          className="flex items-center gap-1.5 flex-1 text-left text-xs md:text-sm font-semibold text-primary"
         >
           {isMinimized ? (
             <ChevronUp className="w-3 h-3 opacity-60 flex-shrink-0" />
@@ -327,14 +379,14 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
           onClick={handleCancel}
           disabled={isSubmitting}
           aria-label="Dismiss form"
-          className="p-1.5 sm:p-2 hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
+          className="p-1.5 md:p-2 hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
         >
-          <X className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+          <X className="w-3.5 h-3.5 md:w-4 md:h-4" />
         </button>
       </div>
 
       {!isMinimized && (
-        <div className="p-2 sm:p-3 max-h-[50vh] sm:max-h-[70vh] overflow-y-auto overflow-x-hidden bg-background/60 dark:bg-background/30 space-y-3">
+        <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pt-2 pb-6 space-y-7 md:flex-none md:p-3 md:max-h-[70vh] md:space-y-3 md:bg-background/60 dark:md:bg-background/30">
           {renderFields.map((field) =>
             field.type === 'external' ? (
               <ExternalFieldCard key={field.key} field={field} />
@@ -345,12 +397,12 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
         </div>
       )}
 
-      <div className="flex gap-1.5 sm:gap-2 px-2 py-2 sm:px-3 sm:py-3 border-t border-primary/20">
+      <div className="relative flex shrink-0 gap-2 px-4 pt-3 pb-3 before:pointer-events-none before:absolute before:-top-8 before:inset-x-0 before:h-8 before:bg-gradient-to-b before:from-transparent before:to-card md:border-t md:border-primary/20 md:px-3 md:py-3 md:before:hidden">
         <Button
           size="sm"
           onClick={handleCancel}
           disabled={isSubmitting}
-          className="flex-1 h-8 sm:h-10 text-xs sm:text-sm bg-muted hover:bg-muted/80 text-foreground"
+          className="hidden md:inline-flex flex-1 h-10 text-sm bg-muted hover:bg-muted/80 text-foreground"
         >
           Dismiss
         </Button>
@@ -358,9 +410,9 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
           size="sm"
           onClick={handleSubmit}
           disabled={isSubmitting || !canSubmit}
-          className="flex-1 h-8 sm:h-10 text-xs sm:text-sm bg-success hover:bg-success/90 text-success-foreground"
+          className="flex-1 h-[52px] rounded-[14px] text-[17px] font-bold bg-success hover:bg-success/90 text-success-foreground md:h-10 md:rounded-md md:text-sm md:font-medium"
         >
-          {isSubmitting ? <Loader2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 animate-spin" /> : 'Submit'}
+          {isSubmitting ? <Loader2 className="w-3.5 h-3.5 md:w-4 md:h-4 animate-spin" /> : 'Submit'}
         </Button>
       </div>
     </div>
@@ -379,13 +431,13 @@ function FieldLabel({
   required: boolean
 }) {
   return (
-    <div className="space-y-0.5">
-      <label htmlFor={id} className="block text-xs sm:text-sm font-semibold text-foreground">
+    <div className="space-y-1 md:space-y-0.5">
+      <label htmlFor={id} className="block text-xl font-bold leading-tight text-foreground md:text-sm md:font-semibold">
         {label}
         {required && <span className="text-destructive ml-0.5">*</span>}
       </label>
       {description && (
-        <p id={`${id}-description`} className="text-[10px] sm:text-xs text-foreground/70">
+        <p id={`${id}-description`} className="text-[15px] text-foreground/70 md:text-xs">
           {description}
         </p>
       )}
@@ -405,12 +457,12 @@ function FieldGroup({
   children: ReactNode
 }) {
   return (
-    <fieldset className="space-y-2">
-      <legend className="text-xs sm:text-sm font-semibold text-foreground">
+    <fieldset className="space-y-3 md:space-y-2">
+      <legend className="text-xl font-bold leading-tight text-foreground md:text-sm md:font-semibold">
         {label}
         {required && <span className="text-destructive ml-0.5">*</span>}
       </legend>
-      {description && <p className="text-[10px] sm:text-xs text-foreground/70">{description}</p>}
+      {description && <p className="text-[15px] text-foreground/70 md:text-xs">{description}</p>}
       {children}
     </fieldset>
   )
@@ -433,32 +485,35 @@ function OptionButton({
       aria-pressed={selected}
       onClick={onClick}
       className={cn(
-        'w-full text-left p-2 sm:p-3 rounded-lg transition-all duration-200 active:scale-[0.98]',
+        'relative w-full min-h-14 text-left p-4 pl-[18px] rounded-[14px] transition-all duration-200 active:scale-[0.98] md:min-h-0 md:p-3 md:pl-3 md:rounded-lg',
         selected
-          ? 'bg-primary/20'
+          ? 'bg-primary/20 ring-1 ring-inset ring-primary/60 md:ring-0'
           : 'bg-muted/40 dark:bg-muted/5 hover:bg-muted/60 dark:hover:bg-muted/10',
       )}
     >
-      <div className="flex items-start gap-1.5 sm:gap-2">
+      {selected && (
+        <span aria-hidden="true" className="absolute inset-y-0 left-0 w-1 rounded-l-[14px] bg-primary md:hidden" />
+      )}
+      <div className="flex items-start gap-3 md:gap-2">
         <div
           className={cn(
-            'w-4 h-4 sm:w-5 sm:h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors',
+            'w-6 h-6 md:w-5 md:h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors',
             selected ? 'border-primary bg-primary' : 'border-muted-foreground',
           )}
         >
-          {selected && <Check className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-foreground" />}
+          {selected && <Check className="w-3.5 h-3.5 md:w-3 md:h-3 text-primary-foreground" />}
         </div>
         <div className="min-w-0">
           <span
             className={cn(
-              'text-xs sm:text-sm font-semibold',
+              'text-base font-semibold md:text-sm',
               selected ? 'text-primary' : 'text-foreground',
             )}
           >
             {label}
           </span>
           {description && (
-            <p className="text-[10px] sm:text-xs text-foreground/70 mt-0.5">{description}</p>
+            <p className="text-sm leading-snug text-foreground/70 mt-0.5 md:text-xs">{description}</p>
           )}
         </div>
       </div>
@@ -499,24 +554,27 @@ function CustomOption({
         aria-pressed={selected}
         onClick={() => (expanded ? onCollapse() : onExpand())}
         className={cn(
-          'w-full text-left p-2 sm:p-3 rounded-lg transition-all duration-200',
+          'relative w-full min-h-14 text-left p-4 pl-[18px] rounded-[14px] transition-all duration-200 md:min-h-0 md:p-3 md:pl-3 md:rounded-lg',
           expanded || selected
-            ? 'bg-primary/20'
+            ? 'bg-primary/20 ring-1 ring-inset ring-primary/60 md:ring-0'
             : 'bg-muted/40 dark:bg-muted/5 hover:bg-muted/60 dark:hover:bg-muted/10',
         )}
       >
-        <div className="flex items-center gap-1.5 sm:gap-2">
+        {(expanded || selected) && (
+          <span aria-hidden="true" className="absolute inset-y-0 left-0 w-1 rounded-l-[14px] bg-primary md:hidden" />
+        )}
+        <div className="flex items-center gap-3 md:gap-2">
           <div
             className={cn(
-              'w-4 h-4 sm:w-5 sm:h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors',
+              'w-6 h-6 md:w-5 md:h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors',
               selected ? 'border-primary bg-primary' : 'border-muted-foreground',
             )}
           >
-            {selected && <Check className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-primary-foreground" />}
+            {selected && <Check className="w-3.5 h-3.5 md:w-3 md:h-3 text-primary-foreground" />}
           </div>
           <span
             className={cn(
-              'text-xs sm:text-sm font-semibold',
+              'text-base font-semibold md:text-sm',
               expanded || selected ? 'text-primary' : 'text-foreground',
             )}
           >
@@ -526,14 +584,14 @@ function CustomOption({
       </button>
 
       {expanded && (
-        <div className="ml-5 sm:ml-7 space-y-1.5 sm:space-y-2 animate-in slide-in-from-top-2 duration-200">
+        <div className="ml-0 md:ml-7 space-y-3 md:space-y-2 animate-in slide-in-from-top-2 duration-200">
           <Textarea
             ref={textareaRef}
             aria-label={`Other answer for ${fieldLabel}`}
             value={value}
             onChange={(e) => onChange(e.target.value)}
             placeholder="Type your own answer..."
-            className="min-h-[60px] sm:min-h-[80px] text-[16px] sm:text-xs md:text-sm resize-none border-primary/30 focus:border-primary"
+            className="min-h-[60px] md:min-h-[80px] text-[16px] md:text-sm resize-none border-primary/30 focus:border-primary"
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault()
@@ -548,7 +606,7 @@ function CustomOption({
       )}
 
       {!expanded && selected && (
-        <div className="ml-5 sm:ml-7 text-[10px] sm:text-xs text-muted-foreground">
+        <div className="ml-0 md:ml-7 text-xs text-muted-foreground">
           {value}
         </div>
       )}
diff --git a/frontend/src/lib/formDrafts.ts b/frontend/src/lib/formDrafts.ts
new file mode 100644
index 000000000..780b035ac
--- /dev/null
+++ b/frontend/src/lib/formDrafts.ts
@@ -0,0 +1,91 @@
+import type { FormAnswer } from '@opencode-manager/shared/opencode'
+
+export interface FormDraft {
+  answer: FormAnswer
+  customValues: Record<string, string[]>
+  customDrafts: Record<string, string>
+}
+
+const DRAFT_KEY_PREFIX = 'opencode-manager:form-draft:'
+
+function draftKey(formId: string): string {
+  return `${DRAFT_KEY_PREFIX}${formId}`
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function isStringArray(value: unknown): value is string[] {
+  return Array.isArray(value) && value.every((entry) => typeof entry === 'string')
+}
+
+function isFormValue(value: unknown): boolean {
+  return (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    isStringArray(value)
+  )
+}
+
+function isStringRecord(value: unknown): value is Record<string, string> {
+  return isRecord(value) && Object.values(value).every((entry) => typeof entry === 'string')
+}
+
+function isStringArrayRecord(value: unknown): value is Record<string, string[]> {
+  return isRecord(value) && Object.values(value).every(isStringArray)
+}
+
+function parseDraft(raw: string): FormDraft | undefined {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch {
+    return undefined
+  }
+  if (!isRecord(parsed)) return undefined
+  const { answer, customValues, customDrafts } = parsed
+  if (!isRecord(answer) || !Object.values(answer).every(isFormValue)) return undefined
+  if (!isStringArrayRecord(customValues)) return undefined
+  if (!isStringRecord(customDrafts)) return undefined
+  return {
+    answer: answer as FormAnswer,
+    customValues,
+    customDrafts,
+  }
+}
+
+/**
+ * Returns the persisted draft for a form, or `undefined` when none exists or the stored value is invalid.
+ */
+export function loadFormDraft(formId: string): FormDraft | undefined {
+  try {
+    const raw = sessionStorage.getItem(draftKey(formId))
+    return raw === null ? undefined : parseDraft(raw)
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Persists a form draft, ignoring storage failures such as disabled storage or an exceeded quota.
+ */
+export function saveFormDraft(formId: string, draft: FormDraft): void {
+  try {
+    sessionStorage.setItem(draftKey(formId), JSON.stringify(draft))
+  } catch {
+    return
+  }
+}
+
+/**
+ * Removes the persisted draft for a form, ignoring storage failures.
+ */
+export function clearFormDraft(formId: string): void {
+  try {
+    sessionStorage.removeItem(draftKey(formId))
+  } catch {
+    return
+  }
+}
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index f23e0d4ed..35a718ef4 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -40,7 +40,7 @@ import { getMessagesContentVersion } from "./sessionContentVersion";
 import { useSpeakVisibleMessages } from "@/hooks/useSpeakVisibleMessages";
 import { showToast } from "@/lib/toast";
 import { getWorkspaceFilePath } from "@/lib/markdownLinks";
-import { getRepoDisplayName, getDirectoryName } from "@/lib/utils";
+import { getRepoDisplayName, getDirectoryName, cn } from "@/lib/utils";
 import { resolveSessionBranch } from "@/lib/activeWork";
 import { RepoMcpDialog } from "@/components/repo/RepoMcpDialog";
 import { ProjectActionsMenu } from "@/components/repo/ProjectActionsMenu";
@@ -59,6 +59,7 @@ import type { FormInfo, SessionMessageInfo } from "@opencode-manager/shared/open
 import type { SkillFileInfo } from "@opencode-manager/shared";
 import { formatOpenCodeModelRef } from "@opencode-manager/shared/opencode";
 import { FormPrompt } from "@/components/session/FormPrompt";
+import { clearFormDraft } from "@/lib/formDrafts";
 import { MinimizedFormIndicator } from "@/components/session/MinimizedFormIndicator";
 import { PendingActionsGroup } from "@/components/notifications/PendingActionsGroup";
 import { SourceControlPanel } from "@/components/source-control";
@@ -317,6 +318,7 @@ export function SessionDetail() {
   const { getForSession: getFormForSession, reply: replyToForm, cancel: cancelForm, syncForSession: syncFormsForSession } = useForms();
   const currentForm = sessionId ? getFormForSession(sessionId) : null;
   const minimizedForm = currentForm && currentForm.id === minimizedFormId ? currentForm : null;
+  const isFormSheetOpen = isMobile && !!currentForm && !minimizedForm;
 
   const lastAssistantMessage = messages.filter(m => m.type === 'assistant').at(-1);
   const lastAssistantText = getAssistantText(lastAssistantMessage);
@@ -376,6 +378,7 @@ export function SessionDetail() {
     if (!minimizedFormId) return
     try {
       await cancelForm(minimizedFormId)
+      clearFormDraft(minimizedFormId)
       setMinimizedFormId(null)
     } catch {
       showToast.error('Failed to dismiss form')
@@ -854,46 +857,57 @@ export function SessionDetail() {
         {sessionDirectory && !isEditingMessage && (
           <div
             ref={promptOverlayRef}
-            className="absolute left-0 right-0 flex justify-center"
+            data-testid="prompt-overlay"
+            className={cn(
+              "absolute left-0 right-0 flex justify-center",
+              isFormSheetOpen && "top-0 flex-col items-center justify-start",
+            )}
             style={{ bottom: inputBottomOffset }}
           >
-            <div className="relative w-[94%] md:max-w-4xl">
-              <div className="absolute bottom-full right-0 mb-2 z-50 flex flex-col items-end gap-2">
-                {ttsEnabled && !hasPromptContent && !isSessionActive && latestPlayableAssistant && (
-                  <FloatingTTSButton
-                    messageId={latestPlayableAssistant.messageId}
-                    content={latestPlayableAssistant.text}
-                    isScrolledUp={showScrollButton}
-                    onSpeakVisible={handleSpeakVisibleMessages}
-                  />
-                )}
-                {hasPromptContent && !isSessionActive && (
-                  <button
-                    onMouseDown={(e) => e.preventDefault()}
-                    onTouchEnd={(e) => {
-                      e.preventDefault()
-                      handleClearPrompt()
-                    }}
-                    onClick={handleClearPrompt}
-                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-destructive hover:bg-destructive/90 text-destructive-foreground border border-destructive/60 hover:border-destructive shadow-md shadow-destructive/30 hover:shadow-destructive/50 backdrop-blur-md transition-all duration-200 active:scale-95 hover:scale-105 ring-1 ring-destructive/20 hover:ring-destructive/40"
-                    aria-label="Clear"
-                  >
-                    <X className="w-5 h-5" />
-                    <span className="text-sm font-medium hidden sm:inline">Clear</span>
-                  </button>
-                )}
-                {isSessionActive && (
-                  <button
-                    type="button"
-                    onClick={handleInterruptSession}
-                    title="Stop"
-                    aria-label="Stop"
-                    className="md:hidden p-3 rounded-xl transition-all duration-200 active:scale-95 hover:scale-105 bg-destructive hover:bg-destructive/90 text-destructive-foreground border border-destructive/60 shadow-lg shadow-destructive/30"
-                  >
-                    <SquareFill className="w-5 h-5" />
-                  </button>
-                )}
-              </div>
+            <div
+              className={cn(
+                "relative",
+                isFormSheetOpen ? "flex w-full flex-1 min-h-0 flex-col" : "w-[94%] md:max-w-4xl",
+              )}
+            >
+              {!isFormSheetOpen && (
+                <div className="absolute bottom-full right-0 mb-2 z-50 flex flex-col items-end gap-2">
+                  {ttsEnabled && !hasPromptContent && !isSessionActive && latestPlayableAssistant && (
+                    <FloatingTTSButton
+                      messageId={latestPlayableAssistant.messageId}
+                      content={latestPlayableAssistant.text}
+                      isScrolledUp={showScrollButton}
+                      onSpeakVisible={handleSpeakVisibleMessages}
+                    />
+                  )}
+                  {hasPromptContent && !isSessionActive && (
+                    <button
+                      onMouseDown={(e) => e.preventDefault()}
+                      onTouchEnd={(e) => {
+                        e.preventDefault()
+                        handleClearPrompt()
+                      }}
+                      onClick={handleClearPrompt}
+                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-destructive hover:bg-destructive/90 text-destructive-foreground border border-destructive/60 hover:border-destructive shadow-md shadow-destructive/30 hover:shadow-destructive/50 backdrop-blur-md transition-all duration-200 active:scale-95 hover:scale-105 ring-1 ring-destructive/20 hover:ring-destructive/40"
+                      aria-label="Clear"
+                    >
+                      <X className="w-5 h-5" />
+                      <span className="text-sm font-medium hidden sm:inline">Clear</span>
+                    </button>
+                  )}
+                  {isSessionActive && (
+                    <button
+                      type="button"
+                      onClick={handleInterruptSession}
+                      title="Stop"
+                      aria-label="Stop"
+                      className="md:hidden p-3 rounded-xl transition-all duration-200 active:scale-95 hover:scale-105 bg-destructive hover:bg-destructive/90 text-destructive-foreground border border-destructive/60 shadow-lg shadow-destructive/30"
+                    >
+                      <SquareFill className="w-5 h-5" />
+                    </button>
+                  )}
+                </div>
+              )}
               {minimizedForm && (
                 <MinimizedFormIndicator
                   form={minimizedForm}
@@ -910,26 +924,28 @@ export function SessionDetail() {
                   onMinimize={() => handleMinimizeForm(currentForm)}
                 />
               )}
-              <SessionSendErrorBanner sessionId={sessionId} isConnected={streamConnected} isReconnecting={streamReconnecting} />
-              {!isRemoteServer && <SessionGoalBar sessionID={sessionId} />}
-              <BackgroundWorkBar
-                sessionID={sessionId}
-                directory={sessionDirectory}
-                messages={messages}
-                isSessionActive={isSessionActive}
-                onChildSessionClick={handleChildSessionClick}
-              />
-              <PromptInput
-                ref={promptInputRef}
-                directory={sessionDirectory}
-                sessionID={sessionId}
-                showScrollButton={showScrollButton && !hasPromptContent}
-                isSessionActive={isSessionActive}
-                isStreamingResponse={isStreamingResponse}
-                onScrollToBottom={scrollToBottom}
-                commandActions={commandActions}
-                onPromptChange={setHasPromptContent}
-              />
+              <div className={cn(isFormSheetOpen && "shrink-0 px-[3%]")}>
+                <SessionSendErrorBanner sessionId={sessionId} isConnected={streamConnected} isReconnecting={streamReconnecting} />
+                {!isRemoteServer && <SessionGoalBar sessionID={sessionId} />}
+                <BackgroundWorkBar
+                  sessionID={sessionId}
+                  directory={sessionDirectory}
+                  messages={messages}
+                  isSessionActive={isSessionActive}
+                  onChildSessionClick={handleChildSessionClick}
+                />
+                <PromptInput
+                  ref={promptInputRef}
+                  directory={sessionDirectory}
+                  sessionID={sessionId}
+                  showScrollButton={showScrollButton && !hasPromptContent}
+                  isSessionActive={isSessionActive}
+                  isStreamingResponse={isStreamingResponse}
+                  onScrollToBottom={scrollToBottom}
+                  commandActions={commandActions}
+                  onPromptChange={setHasPromptContent}
+                />
+              </div>
             </div>
           </div>
         )}
diff --git a/frontend/src/pages/__tests__/SessionDetail.form-prompt.test.tsx b/frontend/src/pages/__tests__/SessionDetail.form-prompt.test.tsx
index b42fbaff7..6501f30b5 100644
--- a/frontend/src/pages/__tests__/SessionDetail.form-prompt.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.form-prompt.test.tsx
@@ -84,6 +84,7 @@ vi.mock('@/hooks/useSettingsDialog', () => ({
 vi.mock('@/hooks/useMobile', () => ({
   useMobile: mocks.useMobile,
   useSwipeBack: vi.fn(() => ({ ref: vi.fn() })),
+  useSwipeDismiss: vi.fn(() => ({ bind: vi.fn(), swipeProgress: 0, swipeStyles: {} })),
 }))
 
 vi.mock('@/hooks/useVisualViewport', () => ({
@@ -275,7 +276,7 @@ describe('SessionDetail form prompt session scoping', () => {
     render(renderTree())
 
     await waitFor(() => {
-      expect(screen.getByText('Continue A')).toBeInTheDocument()
+      expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument()
     })
   })
 
@@ -294,7 +295,7 @@ describe('SessionDetail form prompt session scoping', () => {
 
     render(renderTree())
 
-    await waitFor(() => expect(screen.getByText('Continue A')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument())
     await userEvent.click(screen.getByRole('button', { name: 'Yes' }))
     await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
 
@@ -307,7 +308,7 @@ describe('SessionDetail form prompt session scoping', () => {
     formsState.bySession[VIEWED_SESSION_ID] = viewedSessionForm
     const { rerender } = render(renderTree())
 
-    await waitFor(() => expect(screen.getByText('Continue A')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument())
     await userEvent.click(screen.getByRole('button', { name: 'Continue A' }))
     await waitFor(() => expect(screen.getByRole('button', { name: 'Dismiss form' })).toBeInTheDocument())
 
@@ -319,7 +320,7 @@ describe('SessionDetail form prompt session scoping', () => {
 
     formsState.bySession[VIEWED_SESSION_ID] = otherSessionForm
     rerender(renderTree())
-    await waitFor(() => expect(screen.getByText('Continue B')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getAllByText('Continue B')[0]).toBeInTheDocument())
   })
 
   it('dismisses a minimized form locally and then opens the next form', async () => {
@@ -329,7 +330,7 @@ describe('SessionDetail form prompt session scoping', () => {
     })
     const { rerender } = render(renderTree())
 
-    await waitFor(() => expect(screen.getByText('Continue A')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument())
     await userEvent.click(screen.getByRole('button', { name: 'Continue A' }))
     await userEvent.click(screen.getByRole('button', { name: 'Dismiss form' }))
 
@@ -340,7 +341,7 @@ describe('SessionDetail form prompt session scoping', () => {
 
     formsState.bySession[VIEWED_SESSION_ID] = otherSessionForm
     rerender(renderTree())
-    await waitFor(() => expect(screen.getByText('Continue B')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getAllByText('Continue B')[0]).toBeInTheDocument())
   })
 
   it('retains a minimized form and reports an error when dismissal fails', async () => {
@@ -348,7 +349,7 @@ describe('SessionDetail form prompt session scoping', () => {
     formsState.cancel.mockRejectedValue(new Error('boom'))
     render(renderTree())
 
-    await waitFor(() => expect(screen.getByText('Continue A')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument())
     await userEvent.click(screen.getByRole('button', { name: 'Continue A' }))
     await userEvent.click(screen.getByRole('button', { name: 'Dismiss form' }))
 
@@ -357,4 +358,32 @@ describe('SessionDetail form prompt session scoping', () => {
     )
     expect(screen.getByRole('button', { name: 'Dismiss form' })).toBeInTheDocument()
   })
+
+  it('fills the prompt overlay from the header to the prompt while a form is open on mobile', async () => {
+    mocks.useMobile.mockReturnValue(true)
+    formsState.bySession[VIEWED_SESSION_ID] = viewedSessionForm
+
+    render(renderTree())
+
+    await waitFor(() => expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument())
+    expect(screen.getByTestId('prompt-overlay')).toHaveClass('top-0')
+  })
+
+  it('keeps the prompt overlay anchored without an open form or once the form is minimized', async () => {
+    mocks.useMobile.mockReturnValue(true)
+
+    const { rerender } = render(renderTree())
+    await waitFor(() => expect(screen.getByText('MockedPromptInput')).toBeInTheDocument())
+    expect(screen.getByTestId('prompt-overlay')).not.toHaveClass('top-0')
+
+    formsState.bySession[VIEWED_SESSION_ID] = viewedSessionForm
+    rerender(renderTree())
+
+    await waitFor(() => expect(screen.getAllByText('Continue A')[0]).toBeInTheDocument())
+    expect(screen.getByTestId('prompt-overlay')).toHaveClass('top-0')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Continue A' }))
+
+    await waitFor(() => expect(screen.getByTestId('prompt-overlay')).not.toHaveClass('top-0'))
+  })
 })

From a525314c38f1a3c5051be68788855b6185d2b6fe Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Mon, 19 Oct 2026 22:43:58 -0400
Subject: [PATCH 2/2] feat(sessions): add a side-question button to the mobile
 question sheet

---
 .../components/session/FormPrompt.test.tsx    | 24 +++++++++++++++++++
 .../src/components/session/FormPrompt.tsx     | 21 ++++++++++++----
 frontend/src/pages/SessionDetail.tsx          |  1 +
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/session/FormPrompt.test.tsx b/frontend/src/components/session/FormPrompt.test.tsx
index b47b89e0c..dbb41451a 100644
--- a/frontend/src/components/session/FormPrompt.test.tsx
+++ b/frontend/src/components/session/FormPrompt.test.tsx
@@ -564,6 +564,30 @@ describe('FormPrompt', () => {
     })
   })
 
+  describe('side question button', () => {
+    it('opens the side question from the footer button', async () => {
+      const onAskSideQuestion = vi.fn()
+      render(
+        <FormPrompt
+          form={selectForm}
+          onReply={vi.fn()}
+          onCancel={vi.fn()}
+          onAskSideQuestion={onAskSideQuestion}
+        />
+      )
+
+      await userEvent.click(screen.getByRole('button', { name: 'Ask a side question' }))
+
+      expect(onAskSideQuestion).toHaveBeenCalledTimes(1)
+    })
+
+    it('omits the side question button when no handler is provided', () => {
+      render(<FormPrompt form={selectForm} onReply={vi.fn()} onCancel={vi.fn()} />)
+
+      expect(screen.queryByRole('button', { name: 'Ask a side question' })).not.toBeInTheDocument()
+    })
+  })
+
   describe('conditional and external fields', () => {
     const conditionalForm: FormInfo = {
       id: 'form-conditional',
diff --git a/frontend/src/components/session/FormPrompt.tsx b/frontend/src/components/session/FormPrompt.tsx
index 6e7d01027..0cb9af6c1 100644
--- a/frontend/src/components/session/FormPrompt.tsx
+++ b/frontend/src/components/session/FormPrompt.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from 'react'
-import { X, ChevronDown, ChevronUp, Check, Loader2 } from 'lucide-react'
+import { X, ChevronDown, ChevronUp, Check, Loader2, MessageCircleQuestion } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { ExternalFieldCard } from '@/components/ui/external-field-card'
@@ -62,9 +62,10 @@ interface FormPromptProps {
   onReply: (formID: string, answer: FormAnswer) => Promise<void>
   onCancel: (formID: string) => Promise<void>
   onMinimize?: () => void
+  onAskSideQuestion?: () => void
 }
 
-export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptProps) {
+export function FormPrompt({ form, onReply, onCancel, onMinimize, onAskSideQuestion }: FormPromptProps) {
   const candidateFields = form.fields.filter(isAnswerableField)
   const [state, setState] = useState<FormDraft>(() => loadFormDraft(form.id) ?? buildInitialState(candidateFields))
   const { answer, customValues, customDrafts } = state
@@ -397,7 +398,7 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
         </div>
       )}
 
-      <div className="relative flex shrink-0 gap-2 px-4 pt-3 pb-3 before:pointer-events-none before:absolute before:-top-8 before:inset-x-0 before:h-8 before:bg-gradient-to-b before:from-transparent before:to-card md:border-t md:border-primary/20 md:px-3 md:py-3 md:before:hidden">
+      <div className="relative flex shrink-0 items-center gap-2 px-4 pt-3 pb-3 before:pointer-events-none before:absolute before:-top-8 before:inset-x-0 before:h-8 before:bg-gradient-to-b before:from-transparent before:to-card md:border-t md:border-primary/20 md:px-3 md:py-3 md:before:hidden">
         <Button
           size="sm"
           onClick={handleCancel}
@@ -406,11 +407,23 @@ export function FormPrompt({ form, onReply, onCancel, onMinimize }: FormPromptPr
         >
           Dismiss
         </Button>
+        {onAskSideQuestion && (
+          <button
+            type="button"
+            onClick={onAskSideQuestion}
+            disabled={isSubmitting}
+            aria-label="Ask a side question"
+            className="h-11 shrink-0 px-4 rounded-[14px] flex items-center gap-2 text-sm font-semibold bg-muted/60 hover:bg-muted text-foreground border border-border/60 md:hidden"
+          >
+            <MessageCircleQuestion className="w-4 h-4" />
+            BTW
+          </button>
+        )}
         <Button
           size="sm"
           onClick={handleSubmit}
           disabled={isSubmitting || !canSubmit}
-          className="flex-1 h-[52px] rounded-[14px] text-[17px] font-bold bg-success hover:bg-success/90 text-success-foreground md:h-10 md:rounded-md md:text-sm md:font-medium"
+          className="flex-1 h-11 rounded-[14px] text-base font-bold bg-success hover:bg-success/90 text-success-foreground md:h-10 md:rounded-md md:text-sm md:font-medium"
         >
           {isSubmitting ? <Loader2 className="w-3.5 h-3.5 md:w-4 md:h-4 animate-spin" /> : 'Submit'}
         </Button>
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index 35a718ef4..375736822 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -922,6 +922,7 @@ export function SessionDetail() {
                   onReply={replyToForm}
                   onCancel={cancelForm}
                   onMinimize={() => handleMinimizeForm(currentForm)}
+                  onAskSideQuestion={() => handleAskSideQuestion('')}
                 />
               )}
               <div className={cn(isFormSheetOpen && "shrink-0 px-[3%]")}>