fix(app): keep question options and submit controls reachable on mobile (#60335)

Author: neriousy

packages/app/component-tests/session-question-dock.spec.ts

@@ -80,6 +80,90 @@ story("keeps classic long answer lists inside the panel and scrolls them", async
   await expect(question.getByRole("radio", { name: "One pull request", exact: true })).toBeFocused()
 })
 
+story.describe("on a 393x852 mobile viewport", () => {
+  story.use({ hasTouch: true, isMobile: true, viewport: { width: 393, height: 852 } })
+
+  for (const experimental of [false, true]) {
+    story(
+      `keeps navigation visible and scrolls long prompts and 12 options (${experimental ? "experimental" : "classic"})`,
+      async ({ mount, page }) => {
+        if (experimental) {
+          await page.addInitScript(() =>
+            localStorage.setItem("settings.v3", JSON.stringify({ general: { newQuestionUI: true } })),
+          )
+        }
+
+        const component = await mount("session-question-switch--long-prompt")
+        expect(await page.evaluate(() => matchMedia("(hover: none)").matches)).toBe(true)
+        await page.evaluate(() => document.fonts.ready.then(() => undefined))
+
+        const question = component.locator('[data-component="dock-prompt"][data-kind="question"]')
+        const dismiss = question.getByRole("button", { name: "Dismiss", exact: true })
+        const next = question.getByRole("button", { name: "Next", exact: true })
+        await expect(dismiss).toBeInViewport({ ratio: 1 })
+        await expect(next).toBeInViewport({ ratio: 1 })
+
+        const twelfth = question.getByRole("radio", { name: /12\. Clean slate rebuild/ })
+        await twelfth.scrollIntoViewIfNeeded()
+        await expect(twelfth).toBeInViewport({ ratio: 1 })
+        await twelfth.tap()
+        await expect(twelfth).toBeChecked()
+        await expect(next).toBeInViewport({ ratio: 1 })
+
+        await next.tap()
+
+        const back = question.getByRole("button", { name: "Back", exact: true })
+        const submit = question.getByRole("button", { name: "Submit", exact: true })
+        await expect(back).toBeInViewport({ ratio: 1 })
+        await expect(submit).toBeInViewport({ ratio: 1 })
+
+        const detailsSlot = experimental ? '[data-slot="question-details-frame"]' : '[data-slot="question-details"]'
+
+        const layout = await question.evaluate((root, selector) => {
+          const details = root.querySelector<HTMLElement>(selector)!
+          const options = root.querySelector<HTMLElement>('[data-slot="question-options"]')!
+          const footer = root.querySelector<HTMLElement>('[data-slot="question-footer"]')!
+          const detailsRect = details.getBoundingClientRect()
+          const optionsRect = options.getBoundingClientRect()
+          const footerRect = footer.getBoundingClientRect()
+
+          details.scrollTop = details.scrollHeight
+          const scrolledPrompt = details.scrollTop > 0
+
+          return {
+            promptScrollHeight: details.scrollHeight,
+            promptClientHeight: details.clientHeight,
+            scrolledPrompt,
+            optionsHeight: optionsRect.height,
+            optionsBelowPrompt: optionsRect.top >= detailsRect.bottom - 0.5,
+            footerBelowOptions: footerRect.top >= optionsRect.bottom - 9.5,
+            dockFitsViewport: root.getBoundingClientRect().bottom <= innerHeight + 0.5,
+          }
+        }, detailsSlot)
+
+        expect(layout.promptScrollHeight).toBeGreaterThan(852)
+        expect(layout.promptClientHeight).toBeGreaterThan(48)
+        expect(layout.promptScrollHeight).toBeGreaterThan(layout.promptClientHeight)
+        expect(layout.scrolledPrompt).toBe(true)
+        expect(layout.optionsHeight).toBeGreaterThan(80)
+        expect(layout.optionsBelowPrompt).toBe(true)
+        expect(layout.footerBelowOptions).toBe(true)
+        expect(layout.dockFitsViewport).toBe(true)
+
+        const lastOption = question.getByRole("radio", { name: /Export a diagnostic bundle/ })
+        await lastOption.scrollIntoViewIfNeeded()
+        await expect(lastOption).toBeInViewport({ ratio: 1 })
+        await lastOption.tap()
+        await expect(lastOption).toBeChecked()
+        await expect(submit).toBeInViewport({ ratio: 1 })
+
+        await submit.tap()
+        await expect(question).toBeHidden()
+      },
+    )
+  }
+})
+
 story(
   "minimizes and restores classic questions immediately for reduced motion and keyboard actions",
   async ({ mount, page }) => {

packages/app/src/session/question-switch.stories.tsx

@@ -167,3 +167,161 @@ export const LongList = {
     />
   ),
 }
+
+const longMobileOptions = [
+  {
+    value: "opt-1",
+    label: "1. Incremental schema migration with dual-read verification (Recommended)",
+    description:
+      "Backfill every existing session row in bounded batches while reading from both tables and logging any mismatch before cutover.",
+  },
+  {
+    value: "opt-2",
+    label: "2. Blue-green SQLite snapshot swap on daemon restart",
+    description:
+      "Build a fresh projected database beside the live file during idle windows and atomically swap file descriptors once parity holds.",
+  },
+  {
+    value: "opt-3",
+    label: "3. Lazy per-session hydration on first transcript open",
+    description:
+      "Leave historical sessions untouched at startup and upgrade each transcript inside a single write transaction when opened.",
+  },
+  {
+    value: "opt-4",
+    label: "4. Shadow journal replay from durable event log",
+    description:
+      "Replay ordered session aggregate events into a new read-model table in the background without blocking active prompt drains.",
+  },
+  {
+    value: "opt-5",
+    label: "5. Read-only archive boundary for legacy schema versions",
+    description:
+      "Keep older transcripts viewable through a frozen decoder while writing all newly admitted prompts exclusively to the v4 tables.",
+  },
+  {
+    value: "opt-6",
+    label: "6. Checkpoint compaction before running structural DDL",
+    description:
+      "Truncate the write-ahead log, vacuum dead pages, and verify foreign-key integrity prior to adding the new composite indexes.",
+  },
+  {
+    value: "opt-7",
+    label: "7. Partitioned attachment metadata with external blob refs",
+    description:
+      "Move inline base64 tool outputs into content-addressed files on disk so mobile queries never scan oversized row payloads.",
+  },
+  {
+    value: "opt-8",
+    label: "8. Staged rollout gated by workspace recovery marker",
+    description:
+      "Enable the new projection only after all claimed top-level sessions finish draining cleanly without pending inbox items.",
+  },
+  {
+    value: "opt-9",
+    label: "9. Deterministic fixture verification before live migration",
+    description:
+      "Clone the workspace header and sample fifty recent conversations into a temporary file to benchmark query plans first.",
+  },
+  {
+    value: "opt-10",
+    label: "10. Reversible trigger mirror between v3 and v4 columns",
+    description:
+      "Install temporary SQLite triggers that keep old and new columns synchronized so an older binary can still open the workspace.",
+  },
+  {
+    value: "opt-11",
+    label: "11. Offline CLI migration subcommand with progress bar",
+    description:
+      "Require explicit operator confirmation via opencode db migrate and refuse automatic background writes on startup.",
+  },
+  {
+    value: "opt-12",
+    label: "12. Clean slate rebuild of derived read projections only",
+    description:
+      "Drop disposable summary caches and rebuild every read projection directly from the canonical event history on boot.",
+  },
+]
+
+const tallMobilePrompt = [
+  "Before I run the workspace storage migration on this repository, please review the full rollout plan and confirm how failure recovery should behave if the connection drops mid-run.",
+  "Step 1 inspects the active SQLite write-ahead log, verifies that no other local coordinator currently holds a busy execution claim, and records the starting event sequence number in a durable checkpoint row.",
+  "Step 2 scans session_inbox for any unconsumed user or synthetic items so steered prompts admitted right before shutdown remain preserved in exact enqueue order without duplicate delivery.",
+  "Step 3 creates the new normalized message part tables beside the existing transcript projection, keeping every original row intact until row counts, byte checksums, and foreign-key constraints match across all sessions.",
+  "Step 4 streams large diff and terminal output blobs out of inline JSON columns into content-addressed storage files, preventing multi-megabyte rows from stalling mobile timeline queries over remote tunnels.",
+  "Step 5 rebuilds the full-text search index and session summary projections in slices of twenty-five conversations per transaction, yielding between slices so interactive HTTP requests and live SSE updates stay responsive.",
+  "Step 6 validates cursor pagination from both ends of the longest session timeline, checking that sticky tool headers, collapsed reasoning blocks, and pending permission or question docks restore to identical state.",
+  "Step 7 writes a reversible compatibility view so older CLI processes inspecting the same directory fail gracefully with a clear upgrade message rather than corrupting partially migrated state.",
+  "Step 8 runs PRAGMA integrity_check and compares aggregate token, cost, and tool-call totals before and after the projection swap to catch any silent truncation in historical metadata.",
+  "Step 9 retains the pre-migration backup snapshot in the cache directory for seven days so you can roll back with a single command if any downstream script or plugin depends on the legacy layout.",
+  "Step 10 revalidates workspace permissions, active MCP server tool bindings, and pending form or elicitation state so an in-flight agent session resumes cleanly without re-prompting for completed answers.",
+  "Step 11 checks disk free space on both the database volume and temporary directory before committing the final rename, ensuring low-storage mobile hosts and containers never wedge mid-checkpoint.",
+  "Step 12 emits a structured migration summary event with elapsed wall time, migrated row counts, reclaimed page bytes, and fallback instructions for operators monitoring remote headless servers.",
+  "If a power loss, SIGKILL, or mobile network timeout interrupts any of these steps before the final checkpoint commits, how should the server handle the unfinished migration when it starts back up?",
+].join(" ")
+
+// Twelve verbose options followed by a question prompt taller than a phone viewport.
+export const LongPrompt = {
+  render: () => (
+    <SessionPreview
+      title="Plan the storage migration"
+      description="opencode · storage-rollout"
+      document={questionPendingDocument}
+      request={{
+        type: "question",
+        value: {
+          ...activeQuestionRequest,
+          fields: [
+            {
+              key: "strategy",
+              type: "string",
+              title: "Strategy",
+              description: "Which migration strategy should I use for existing workspace sessions?",
+              options: longMobileOptions,
+              custom: true,
+            },
+            {
+              key: "recovery",
+              type: "string",
+              title: "Recovery",
+              description: tallMobilePrompt,
+              options: [
+                {
+                  value: "resume",
+                  label: "Resume from the last committed slice (Recommended)",
+                  description: "Continue from the recorded checkpoint sequence without repeating verified batches.",
+                },
+                {
+                  value: "rollback",
+                  label: "Roll back to the pre-migration snapshot automatically",
+                  description: "Restore the original file immediately and surface a diagnostic toast in the session.",
+                },
+                {
+                  value: "pause",
+                  label: "Pause startup recovery and ask before retrying",
+                  description: "Keep the workspace read-only until an explicit retry or rollback choice is confirmed.",
+                },
+                {
+                  value: "rebuild",
+                  label: "Discard partial projections and replay from scratch",
+                  description: "Drop the incomplete target tables and restart a fresh pass from event sequence zero.",
+                },
+                {
+                  value: "readonly",
+                  label: "Serve existing sessions read-only while retrying in background",
+                  description: "Allow browsing transcripts immediately and unlock new prompts once parity finishes.",
+                },
+                {
+                  value: "export",
+                  label: "Export a diagnostic bundle and halt migration",
+                  description: "Write schema stats and mismatch logs to disk without touching the live workspace.",
+                },
+              ],
+              custom: true,
+            },
+          ],
+        },
+      }}
+    />
+  ),
+}

packages/app/src/session/requests/session-question-dock-classic.tsx

@@ -122,6 +122,7 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
   onCleanup(observeReducedMotion(() => setStore("reducedMotion", prefersReducedMotion())))
 
   let root: HTMLDivElement | undefined
+  let detailsRef: HTMLDivElement | undefined
   let optionsRef: HTMLDivElement | undefined
   let customRef: HTMLButtonElement | undefined
   let customInput: HTMLInputElement | undefined
@@ -197,7 +198,10 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
     const dock = root.closest('[data-component="session-composer-dock"]')
     // In the app this row can have zero height and overflow upward; the containing panel bounds the question.
     const column = bounds(dock?.parentElement)
-    const bottom = Math.min(window.innerHeight, column?.bottom ?? window.innerHeight)
+    const parent = dock?.parentElement?.getBoundingClientRect()
+    const edge = parent && parent.width > 0 ? parent.bottom : Infinity
+    const view = window.visualViewport ? window.visualViewport.offsetTop + window.visualViewport.height : Infinity
+    const bottom = Math.min(window.innerHeight, view, column?.bottom ?? Infinity, edge)
 
     const around =
       dock instanceof HTMLElement
@@ -232,7 +236,14 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
     focusFrame = requestAnimationFrame(() => {
       focusFrame = undefined
       const el = next === options().length ? customRef : optsRef[next]
-      el?.focus()
+      el?.focus({ preventScroll: true })
+      const row = el?.closest<HTMLElement>('[data-slot="question-option"]')
+
+      if (!row || !optionsRef) return
+      optionsRef.scrollTop = Math.min(
+        row.offsetTop,
+        Math.max(optionsRef.scrollTop, row.offsetTop + row.offsetHeight - optionsRef.clientHeight),
+      )
     })
   }
 
@@ -247,9 +258,14 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
       })
     }
 
-    update()
+    measure()
     makeEventListener(window, "resize", update)
 
+    if (window.visualViewport) {
+      makeEventListener(window.visualViewport, "resize", update)
+      makeEventListener(window.visualViewport, "scroll", update)
+    }
+
     const dock = root?.closest('[data-component="session-composer-dock"]')
     const scroller = document.querySelector('[data-slot="session-timeline-scroll"] > .scroll-view__viewport')
     createResizeObserver([dock, scroller], update)
@@ -527,7 +543,12 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
     setStore("tab", tab)
     setStore("editing", false)
 
-    if (optionsRef) setStore("optionsHeight", optionsRef.scrollHeight)
+    if (detailsRef) detailsRef.scrollTop = 0
+
+    if (optionsRef) {
+      optionsRef.scrollTop = 0
+      setStore("optionsHeight", optionsRef.scrollHeight)
+    }
 
     if (!store.minimized) focus(pickFocus(tab))
   }
@@ -547,6 +568,8 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
 
   const minimize = () => {
     if (sending()) return
+
+    if (optionsRef) setStore("optionsHeight", optionsRef.offsetHeight)
     setStore("editing", false)
     setStore("minimized", true)
   }
@@ -606,7 +629,11 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
                 />
               </div>
             </div>
-            <div data-slot="question-details">
+            <div
+              data-slot="question-details"
+              data-scrollable={!store.minimized || undefined}
+              ref={(el) => (detailsRef = el)}
+            >
               <div
                 data-slot="question-text"
                 style={{
@@ -694,7 +721,7 @@ export const SessionQuestionDockClassic: Component<{ request: FormInfo; onSubmit
           aria-hidden={store.minimized || optionsOff() ? "true" : undefined}
           classList={{ "pointer-events-none": hidden() > 0.1 }}
           style={{
-            "max-height": `${Math.max(0, store.optionsHeight * (1 - hidden()))}px`,
+            "max-height": hidden() > 0 ? `${Math.max(0, store.optionsHeight * (1 - hidden()))}px` : undefined,
             opacity: `${Math.max(0, Math.min(1, 1 - hidden()))}`,
             visibility: optionsOff() ? "hidden" : "visible",
           }}