Phone Choose mode sheet: review + two large YES mockups

[BigSimmo]

Summary

• Design-scratch study at /mockups/phone-mode-sheet-yes reviewing the shipping phone Choose mode bottom sheet.
• YES 01 perfected (shipping recommendation) — sectioned clinical list with every review finding closed:
  • Current mode folded into the non-scrolling sheet header (Currently · {mode})
  • Single sticky layer (section labels at top-0) — no fragile offset / duplicate “Now in” card
  • min-h-12 rows, 44 px wells, two-line descriptions, readable inactive titles
  • Interactive selection; Rest / Scrolled / Switched proof frames
  • Preview scroll constrained to the sheet body (no document yank)
  • Unique useId() section heading ids across multiple frames
  • Arrow / Home / End roving keyboard focus for inactive modes
  • Live selection lifted into the phone frame so the top-bar mode pill tracks picks
  • Scrolled proof frame no longer re-anchors on mode taps
• YES 02 remains the icon-deck overview alternate.
• Shared mockup chrome suppressed; sitemap + mockups README updated.

Clinical Governance Preflight

• Not a clinical-risk product change — design-scratch mockups only (/mockups/* 404 in production)
• No answer generation, retrieval/ranking, ingestion, source rendering, document access, or privacy behaviour changed
• Rollback: revert this PR; no production surface is affected

Test plan

• npm run sitemap:check / format guard
• npx eslint on changed TSX files
• npm run ensure → /mockups/phone-mode-sheet-yes loads
• Browser proof: Rest / Scrolled / Switched frames; tap Documents updates header + aria-checked
• CI green on head (PR required success)
• Review threads resolved (Devin scroll/id; Codex keyboard; Devin scrolled re-anchor)

RAG impact

RAG impact: no retrieval behaviour change — mockups-only design scratch; no RAG surfaces touched.

Summary by CodeRabbit

• New Features

  • Added a phone mode sheet mockup with three design variants: flat list, sectioned clinical list, and icon deck.
  • Added live mode selection with synchronized headers, keyboard navigation, and accessible radio-menu behavior.
  • Added preview scrolling and sticky clinical sections for improved browsing.

• Documentation

  • Added the new mockup route to the sitemap.
  • Documented the phone mode sheet variants and presentation details.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a dedicated phone mode-sheet mockup route. It includes shipping, sectioned-list, and icon-deck variants with synchronized selection, focus, scrolling, accessibility behavior, review findings, and route-specific layout handling.

Changes

Phone mode sheet mockup

Layer / File(s)	Summary
Mode sheet foundation src/components/phone-mode-sheet-yes-mockups.tsx	Defines mode data, shared phone UI primitives, accessibility structure, and the baseline shipping sheet.
Interactive sheet variants src/components/phone-mode-sheet-yes-mockups.tsx	Adds sectioned-list and icon-deck variants with active selection, synchronized headers, sticky sections, scrolling, focus handling, and accessible controls.
Mockup composition and review panels src/components/phone-mode-sheet-yes-mockups.tsx	Composes phone frames, preview states, variant rendering, review findings, resolution notes, and comparison layouts.
Route integration and documentation src/app/mockups/phone-mode-sheet-yes/page.tsx, src/app/mockups/mockups-layout-client.tsx, docs/site-map.md, mockups/README.md, docs/branch-review-ledger.md	Adds route metadata, disables shared search and chrome for the route, documents the mockup, and appends review ledger records.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
participant Browser
participant PhoneModeSheetYesMockupPage
participant PhoneModeSheetYesMockups
participant SectionedModeSheet
Browser->>PhoneModeSheetYesMockupPage: Open mockup route
PhoneModeSheetYesMockupPage->>PhoneModeSheetYesMockups: Render comparison page
PhoneModeSheetYesMockups->>SectionedModeSheet: Render interactive variant
SectionedModeSheet->>PhoneModeSheetYesMockups: Update selected mode and preview state

Loading

Possibly related PRs

• BigSimmo/Database#670: Modifies mockup route detection and shared composer or chrome suppression.
• BigSimmo/Database#1273: Adds phone mockup routes and route-aware shared chrome handling.
• BigSimmo/Database#1437: Adds mockup route detection with shared composer and chrome suppression.

Suggested labels:codex

Suggested reviewers:cursoragent

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the Choose mode sheet review and the two YES mockup variants.
Description check	✅ Passed	The description covers scope, verification, governance, rollback, and RAG impact; only minor template heading differences remain.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

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

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[github-actions]

CI triage

CI failed on this PR. Automated classification of the 7 failed job(s):

• Static PR checks — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• Production UI critical — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• Build — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• Visual baselines (advisory) — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• Lighthouse budget (advisory) — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• Advisory UI — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #8077 (cancelled).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

[BigSimmo]

@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. The only repository destination is BigSimmo/Database, and the only branch destination is the pull request head branch cursor/phone-mode-sheet-yes-05c0 at starting commit 022beba; never publish fixes to a detached or synthetic work branch and never create a stacked pull request. Use the authenticated GitHub connector to commit each approved fix to BigSimmo/Database:cursor/phone-mode-sheet-yes-05c0, then verify that the pull request head contains the published commit before reporting success. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. For a fixed thread, reply with as the first line and as the second line. For a no-code disposition, use followed by . These result markers authorize the workflow to close that exact thread only after it verifies a fixed commit is the pull request head; a local-only commit is not a fix. If publication or verification fails, do not use either result marker, do not claim success, and leave the thread open with the blocker. If human input or new authorization is required, do the same. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation.

[chatgpt-codex-connector]

Summary

• Fixed the mockup sheet’s internal preview scrolling by passing a bodyRef into the sheet body and setting the body’s scrollTop directly instead of using scrollIntoView, preventing the document viewport from being pulled down by proof frames. src/components/phone-mode-sheet-yes-mockups.tsxL191-L206src/components/phone-mode-sheet-yes-mockups.tsxL252-L254src/components/phone-mode-sheet-yes-mockups.tsxL431-L438src/components/phone-mode-sheet-yes-mockups.tsxL469-L481
• Added roving keyboard navigation for the sectioned mockup rows with ArrowUp, ArrowDown, Home, and End so inactive modes can be reached and selected from the keyboard while preserving a single tab stop. src/components/phone-mode-sheet-yes-mockups.tsxL334-L367src/components/phone-mode-sheet-yes-mockups.tsxL440-L467src/components/phone-mode-sheet-yes-mockups.tsxL523-L533
• Made section heading IDs unique per sheet instance with useId(), avoiding duplicate aria-labelledby targets when multiple “rest” frames render on the same mockup page. src/components/phone-mode-sheet-yes-mockups.tsxL424-L429src/components/phone-mode-sheet-yes-mockups.tsxL501-L512

Publication status

• Created one local commit on cursor/phone-mode-sheet-yes-05c0: 35822306652641a491d1915dd12a257bfa29b5a9.
• ❌ Could not publish the fix to BigSimmo/Database:cursor/phone-mode-sheet-yes-05c0: git push origin HEAD:cursor/phone-mode-sheet-yes-05c0 failed because this shell has no GitHub credentials (fatal: could not read Username for 'https://github.com': No such device or address).
• Because publication and remote-head verification failed, I did not post any thread-resolution markers or claim the PR head contains the fix.
• The make_pr tool requested by the repository/developer instructions is not available in this environment, and this PR task explicitly forbids creating a stacked PR.

Testing

• ✅ npm run format
• ✅ npx eslint src/components/phone-mode-sheet-yes-mockups.tsx
• ✅ npm run typecheck
• ✅ npm run ensure
• ❌ node - <<'NODE' ... require('@playwright/test') ... NODE — failed because @playwright/test is not installed/resolvable in this environment.
• ❌ git push origin HEAD:cursor/phone-mode-sheet-yes-05c0 — failed because GitHub shell authentication is unavailable.

View task →

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/branch-review-ledger.md`:
- Around line 644-645: Correct the branch history using the permitted repair
workflow, removing the prohibited main-based updates without editing or deleting
the existing ledger rows. Preserve the append-only behavior of
docs/branch-review-ledger.md and use its established command or mechanism to
record the correction.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 347b0c4f-2a95-4514-8377-166a702b963b

📥 Commits

Reviewing files that changed from the base of the PR and between b579d68 and e842d6e.

📒 Files selected for processing (2)

• docs/branch-review-ledger.md
• docs/site-map.md

🚧 Files skipped from review as they are similar to previous changes (1)

• docs/site-map.md