[chriswritescode-dev]

Summary

Stacked on #442. On phones the agent question form (FormPrompt) now fills the space between the session header and the prompt input as a native-style sheet, and in-progress answers survive minimizing, switching sessions and reloads. Desktop is unchanged.

Full-height mobile sheet (FormPrompt.tsx, SessionDetail.tsx)

• While a form is open and not minimized, the prompt overlay becomes a flex column pinned below the header (isFormSheetOpen). The sheet takes the remaining height and the prompt keeps its natural height, so nothing is measured; the keyboard still shrinks the sheet.
• Rounded top corners, a primary-tinted gradient and a grab handle. The body scrolls on its own (overscroll-contain) and the footer is one full-width 52px Submit under a gradient fade.
• Dismiss is a header text button on mobile; the footer keeps today's two-button row at md+.
• Tapping the handle, the chevron, Escape, or dragging the header down (existing useSwipeDismiss, no new dependency) all minimize the sheet.
• The floating TTS / Clear / Stop buttons are hidden while the sheet is open, and the prompt input stays usable so /btw questions can be asked without closing the form.

Mobile typography and spacing

• Questions 20px bold, field descriptions 15px, option labels 16px with 14px descriptions.
• Option tiles are at least 56px tall with 14px radius, a 24px selection mark and a visible selected state (tinted fill, inset ring, left accent bar).
• Number and text inputs use 16px text so iOS does not zoom, and the submit button is 52px.

Draft answers (frontend/src/lib/formDrafts.ts)

• Answers, custom values and custom drafts are persisted per form id in sessionStorage and restored when the form remounts, so minimizing, navigating to another session or reloading no longer discards them.
• Drafts are cleared after a successful submit or dismiss, including dismiss from the minimized indicator. Unavailable storage and corrupt payloads fall back to field defaults.
• Escape while focus is inside another dialog (for example the side-question dialog) no longer minimizes the form behind it.

Tests

• New FormPrompt coverage for remount restore, clearing after submit and dismiss, corrupt storage, the mobile header controls, and Escape inside a dialog.
• New SessionDetail coverage for the full-height overlay classes.

Known gaps

• No sheet enter or minimize animation: tailwindcss-animate is not installed, so the motion classes would be no-ops.
• Stop / Clear / TTS are hidden while the sheet is open; minimize to reach them.

Summary by CodeRabbit

• New Features

  • Form responses now save as drafts during a session and can be restored when returning to the form.
  • Drafts are cleared after successful submission or cancellation.
  • Mobile forms now support minimize and dismiss controls, swipe-to-minimize behavior, responsive layouts, and larger touch targets.
  • Escape dismissal no longer affects dialogs opened within the form.

• Bug Fixes

  • Improved handling of invalid or unavailable saved draft data.

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Essentials
• Run ID: 0e855ecb-7a27-49cc-ba18-eeb3bf7a7a40

📥 Commits

Reviewing files that changed from the base of the PR and between b01e870 and 050f0a2.

📒 Files selected for processing: 3

• frontend/src/components/session/FormPrompt.test.tsx
• frontend/src/components/session/FormPrompt.tsx
• frontend/src/pages/SessionDetail.tsx

+----------------------------------------------------------------------------------------------------------------------+
| You can't write perfect software. Software can't be perfect. Protect your code and users from the inevitable errors. |
+----------------------------------------------------------------------------------------------------------------------+
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Essentials
• Run ID: 0dc52cdd-8df8-4269-bda6-df2f7e9bb253

📥 Commits

Reviewing files that changed from the base of the PR and between 1659664 and b01e870.

📒 Files selected for processing: 5

• frontend/src/components/session/FormPrompt.test.tsx
• frontend/src/components/session/FormPrompt.tsx
• frontend/src/lib/formDrafts.ts
• frontend/src/pages/SessionDetail.tsx
• frontend/src/pages/__tests__/SessionDetail.form-prompt.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 5 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Form prompts now save and restore drafts by form ID, support mobile minimize and dismiss interactions, and use responsive layouts. Session detail adjusts the prompt overlay while a mobile form sheet is open. Tests cover draft handling, mobile controls, Escape behavior, and overlay positioning.

Changes: Form Prompt Experience

Layer / File(s)	Summary
Draft persistence and form lifecycle frontend/src/lib/formDrafts.ts, frontend/src/components/session/FormPrompt.tsx, frontend/src/components/session/FormPrompt.test.tsx	Drafts are validated and stored in sessionStorage by form ID. FormPrompt restores drafts and clears them after successful submission or cancellation. Tests cover restoration, cleanup, and invalid stored data.
Mobile form controls and responsive layout frontend/src/components/session/FormPrompt.tsx, frontend/src/components/session/FormPrompt.test.tsx	FormPrompt adds mobile minimize and dismiss controls, swipe dismissal, and Escape handling that ignores events inside dialogs. The form layout uses responsive spacing, sizing, and option styling. Tests cover the mobile controls and Escape behavior.
Session detail sheet integration frontend/src/pages/SessionDetail.tsx, frontend/src/pages/__tests__/SessionDetail.form-prompt.test.tsx	Session detail positions the prompt overlay as a mobile form sheet when a form is open. Dismissing a minimized form clears its saved draft after successful cancellation. Tests cover overlay positioning and form dismissal flows.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant FormPrompt
  participant formDrafts
  participant sessionStorage
  FormPrompt->>formDrafts: loadFormDraft(formId)
  formDrafts->>sessionStorage: Read form draft
  sessionStorage-->>formDrafts: Stored JSON
  formDrafts-->>FormPrompt: Validated draft or undefined
  FormPrompt->>formDrafts: saveFormDraft(formId, state)
  formDrafts->>sessionStorage: Serialize and store draft
  FormPrompt->>formDrafts: clearFormDraft(formId) after success
  formDrafts->>sessionStorage: Remove form draft

Loading

Merge Risk: ⚪ Minimal · up to b01e8

The form sheet and draft persistence are mergeable after normal checks; no supported issue remains to resolve before merge.

Pre-merge checks: 3 · 2

Failed checks: 2 warnings

Check name	Status	Explanation	Resolution
Description check		The description provides a detailed, relevant summary of the mobile sheet, draft persistence, tests, and known gaps. It omits the required Type of Change and Checklist sections from the repository tem…	Add the Type of Change section and select New feature. Add the Checklist section and report the status of style, TypeScript, test coverage, lint, and typecheck requirements.
Docstring Coverage		Docstring coverage is 15.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 20 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 3 passed

Check name	Status	Explanation
Title check		The title clearly summarizes the primary changes: a full-screen mobile question sheet and persisted draft answers.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description provides a detailed, relevant summary of the mobile sheet, draft persistence, tests, and known gaps. It omits the required Type of Change and Checklist sections from the repository template.

Resolution

Add the Type of Change section and select New feature. Add the Checklist section and report the status of style, TypeScript, test coverage, lint, and typecheck requirements.

• Fix all pre-merge checks with AI

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}