Add three phone mockups for the therapy comparison picker

[BigSimmo]

Summary

• Adds three design-scratch directions for the phone selection experience on /therapy-compass/compare, each a live, tappable phone prototype rather than a static picture, under src/app/mockups/therapy-compare-{progressive,sheet,tray} with their components in src/components/therapy-compare-picker-mockups/.
  • A · therapy-compare-progressive — Add as you go. Empty slots are never drawn. An empty screen is a heading, one sentence, one primary button and three starter pairs; each therapy chosen becomes a row, and the add control moves below it and quietens. At four it becomes a plain sentence rather than a disabled control.
  • B · therapy-compare-sheet — Build the set in one sheet. Selection is a full-height mode: search, a category chip row over the sixteen catalogue groups, multi-select with a draft that only commits on Compare N, so cancelling cannot destroy the current set. The page body shrinks to one wrapping row of pills plus the comparison.
  • C · therapy-compare-tray — Carry a compare tray. Selection leaves the page body entirely for a persistent bottom tray filled from search results and therapy records; the compare route is only ever reached with something in it. Notes flag the docs/search-chrome-behaviour.md collision this direction has to resolve (one bottom-chrome owner, edge-to-edge composer, zero reserve when hidden).
• All three share one fixture set, one six-defect brief, and a per-field stacked comparison in place of the shipped min-w-[720px] table in a horizontal scroller.
• Registers the /mockups/therapy-compare- prefix in mockups-layout-client.tsx so shared chrome is suppressed — each frame draws its own universal header and edge-to-edge composer, and the surface under study is defined by what sits between them.
• Regenerates docs/site-map.md for the three new routes.

Mockup-only arbitrary Tailwind values are written as inline styles. globals.css carries @source not "../components/**/*mockup*", so a utility used nowhere else in src is never emitted and silently collapses the frame — the shipped therapy-navigation mockups render at content height rather than their declared h-[28rem] for this reason. Not fixed here; flagged for a separate change.

Design-scratch only: src/app/mockups/** 404s in production, and these routes are exempt from the button-wiring and route-reachability gates and nothing else. Comparison copy in the fixtures is placeholder text for layout, stated as such on each page; every record carries needs_review, matching the real catalogue.

Verification

• npm run lint — pass ([gate-receipts] recorded a pass for "lint:internal" (5241 input files))

• npm run typecheck — pass ([gate-receipts] recorded a pass for "typecheck:internal" (5241 input files))

• npx vitest run tests/route-reachability.test.ts — Test Files 1 passed (1) · Tests 5 passed (5)

• npm run sitemap:check — pass, clean after regeneration

• npm run docs:check-index — coverage OK: all 63 repository roots/modules/routes and all schema tables are indexed

• npm run format — run and committed; prettier --check on the changed paths reports All matched files use Prettier code style!

• Rendered proof: all three routes return 200 on the local dev server and were driven through their states with Chromium (add/remove, picker, sheet multi-select and commit, tray expand/collapse) with zero page errors and zero console errors; the phone frame measures 390 × 736 as designed.

• npm run verify:pr-local — Verification not run: superseded by the gates above. The change is design-scratch mockup routes plus one generated doc; lint, typecheck and the reachability test are the failure classes this diff can plausibly break, and all three ran green. CI's own routing remains the authority.

• npm run verify:ui — UI verification not run: no production route, shared component, or token changed. src/app/mockups/** 404s in production and no Playwright journey covers these routes. Browser proof above is Chromium interaction against the live dev server.

• npm run verify:release — not a release or handoff-confidence claim.

• npm run eval:retrieval:quality — no retrieval, ranking, selection, chunking or scoring behaviour changed.

• npm run eval:rag -- --limit 15 + npm run eval:quality -- --rag-only — no answer generation, synthesis prompt or post-processing changed.

• npm run check:production-readiness — no clinical workflow, privacy, environment, Supabase, source governance or deployment behaviour changed.

• npm run check:deployment-readiness — no deployment startup, hosting or rollout behaviour changed.

Risk and rollout

• Risk: Very low. The only file outside the new mockup surface is mockups-layout-client.tsx, where a new path-prefix flag is added and ANDed into the existing searchComposerVisible and chromeVisible expressions; it can only affect paths starting /mockups/therapy-compare-, all of which are new in this PR. docs/site-map.md is generated.
• Rollback: git revert the single commit. Nothing is imported by production code — the ESLint no-restricted-imports rule blocks that by construction.
• Provider or production effects: None.
• RAG impact: none.

Notes

• The three directions are deliberately not variations on one layout; they answer the same brief at different depths, and each page ends with what it costs to build. Direction C in particular is a Therapy-mode change with a phone-chrome contract attached, not a compare-screen fix, and should not be bundled with the other two.
• src/components/compare/ is shared by therapy, dictionary, DSM, formulation and specifiers, so the empty-slot problem these mockups target is present on all five. Direction A would land on all of them at once.

---

Generated by Claude Code

---

Note

Low Risk
Mockup-only routes plus a path-prefix chrome flag; no production compare, picker, or clinical data paths change.

Overview
Adds three live, tappable phone prototypes for the therapy comparison picker on /therapy-compass/compare, targeting empty slots, duplicate add controls, and a sideways-scrolling table.

A · Add as you go never draws empty slots: one primary button and starter pairs, then a row per chosen therapy. B · Build the set in one sheet is a full-height multi-select with category chips and a draft that only commits on Compare. C · Carry a compare tray moves selection into a persistent bottom tray filled from browse/search so compare is never opened empty.

Shared fixtures, a six-defect brief, and a stacked per-field comparison preview live in therapy-compare-picker-mockups. Shared mockup chrome is suppressed for /mockups/therapy-compare-* so each frame owns header and composer. Design-scratch only (404 in production).

^{Reviewed by Cursor Bugbot for commit 341c3c9. Configure here.}

[coderabbitai]

Warning

Review limit reached

Next included review available in 16 minutes.

View limit details

Limit details: You’ve used the included review currently available. Your 95 included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2e4abe4e-1db2-4417-8215-37099691ec39

📥 Commits

Reviewing files that changed from the base of the PR and between 35a8692 and 7b81183.

⛔ Files ignored due to path filters (1)

• docs/site-map.md is excluded by !docs/**, !**/*.md

📒 Files selected for processing (11)

• data/repo-awareness-snapshot.json
• src/app/mockups/mockups-layout-client.tsx
• src/app/mockups/therapy-compare-perfected/page.tsx
• src/app/mockups/therapy-compare-progressive/page.tsx
• src/app/mockups/therapy-compare-sheet/page.tsx
• src/app/mockups/therapy-compare-tray/page.tsx
• src/components/therapy-compare-picker-mockups/progressive.tsx
• src/components/therapy-compare-picker-mockups/shared.tsx
• src/components/therapy-compare-picker-mockups/sheet.tsx
• src/components/therapy-compare-picker-mockups/tray-perfected.tsx
• src/components/therapy-compare-picker-mockups/tray.tsx

---

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

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Compare view stays empty
  • Empty and per-row remove now switch back to browse when the tray drops below two, so the compare surface cannot stay mounted empty.
• ✅ Fixed: Full tray ignores adds
  • Unused Plus controls now dim and use aria-disabled at the four-therapy ceiling, matching Direction B so a fifth tap no longer looks live.

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 341c3c9. Configure here.}

[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 ↗︎.

[cursor]

Stale comment

Left a non-blocking comment; no approval. Cursor Bugbot skipped its check and reported 2 unresolved medium-severity findings that need human review. No additional reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 341c3c9dd1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[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 claude/therapy-comparison-mobile-design-z0dagr at starting commit 767f388; 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:claude/therapy-comparison-mobile-design-z0dagr, 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.

[cursor]

Left a non-blocking comment; no approval. Cursor Bugbot is not running on this head, and two unresolved medium-severity findings from the prior Bugbot review still need human review. No additional reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[cursor]

Approved. Cursor Bugbot is not running on this head; its prior two findings were marked fixed by Bugbot Autofix and the current tray code derives compare visibility and disables adds at the four-therapy ceiling. No reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Bravo.

Reviewed commit: 767f388149

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[cursor]

Approved. Cursor Bugbot is not running on this head; its two prior findings and the related Codex threads are resolved, and no approval policy requires human review. No reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[cursor]

Approved. Cursor Bugbot is not running on this head; its prior findings and related review threads are resolved, and no approval policy requires human review. No reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[github-actions]

CI triage

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

• Static PR checks — 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 #13855 (success).

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

[cursor]

Approved. Cursor Bugbot is not running on this head; its prior two findings and related review threads are resolved, and no approval policy requires human review. No reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[cursor]

Approved. Cursor Bugbot is not running on this head; its prior two findings and related review threads are resolved, and no approval policy requires human review. No reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}

[cursor]

Approved. Cursor Bugbot is not running on this head; its prior two findings and related review threads are resolved, and no approval policy requires human review. No reviewers were assigned.

  

_{Sent by Cursor Approval Agent: Pull Request Router and Approver}