Mockups: isolate calculator and therapy navigation concepts

[BigSimmo]

Summary

• Isolate calculator and therapy-navigation experiments under existing mockup routes.
• Keep production calculators and navigation unchanged.
• Add route coverage and a static import boundary so mockup components cannot leak into production.

Sources reviewed

#1327 and mockup-only calculator work from #1331.

Retained

Reachable calculator and therapy-navigation mockups, mockup Playwright coverage, sitemap entries, and the production import-boundary test.

Rejected

Production calculator replacement/removal and any production navigation coupling.

Verification

• boundary Vitest: 3/3 passed
• npm run check:design-system-contract: passed
• npm run sitemap:check: passed
• repository-owned mockup Playwright: 16/16 passed
• npm run verify:cheap: passed; 413 test files, 4201 tests passed, 3 skipped
• targeted lint passed after marking a decorative Lucide icon aria-hidden

Not run

No hosted CI reruns and no physical-device testing.

Risk

This adds a large amount of design-scratch code, but it remains under mockup-only routes and is statically barred from production imports.

Summary by CodeRabbit

• New Features
  • Added enhanced interactive calculator mockups (scoring, progress, guidance, flags, related actions, and session copy/share summaries).
  • Added new therapy navigation mockup pages (rail, dock, context) with responsive behavior.
  • Added new sitemap entries for the therapy navigation routes.
• Improvements
  • Updated therapy navigation mockup layout/visibility behavior and refreshed calculator mockup pages to use the dedicated mockup experience.
• Tests
  • Added Playwright UI coverage for therapy navigation (a11y checks + horizontal overflow).
  • Added import-boundary checks for calculator mockup isolation and expanded mockup test discovery.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 75d2bfb9-a289-4d84-a8f1-e3d8f5ec11bf

📥 Commits

Reviewing files that changed from the base of the PR and between 7a38212 and f5216f5.

📒 Files selected for processing (3)

• docs/site-map.md
• playwright.config.ts
• src/app/mockups/mockups-layout-client.tsx

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

• src/app/mockups/mockups-layout-client.tsx
• playwright.config.ts
• docs/site-map.md

---

📝 Walkthrough

Walkthrough

Added reusable calculator scoring and mockup experiences, three responsive therapy navigation prototypes, route wiring, shared mockup shells, Playwright discovery updates, import-boundary validation, sitemap entries, and viewport tests.

Changes

Calculator mockups

Layer / File(s)	Summary
Calculator data, scoring, and pathways src/components/calculator-mockups/calculator-fixtures.ts, src/components/calculator-mockups/calculator-ui.tsx, src/components/calculator-mockups/calculator-pathways.ts	Defines calculator fixtures, scoring derivation, interactive answer controls, result formatting, and severity-based actions and related content.
Interactive calculator views src/components/calculator-mockups/{bedside-sheet,clinical-console,directory-grid,guided-flow,popup-sheet}-mockup.tsx	Adds bedside, console, directory, guided-flow, and popup-sheet calculator experiences with session state and responsive layouts.
Calculator search experiences src/components/calculator-mockups/{search-page,search-detail}-mockup.tsx	Adds searchable calculator directories, session continuation, detail panels, related content, score panels, and mobile sheet behavior.
Calculator routes and boundaries src/app/mockups/calculators-*/page.tsx, src/components/calculator-mockups/index.ts, tests/calculator-mockup-boundary.test.ts	Routes calculator pages through the calculator-mockups module and validates import isolation from production modules.

Therapy navigation prototypes

Layer / File(s)	Summary
Shared therapy navigation model and shell src/components/therapy-navigation-mockups/shared.tsx	Adds shared therapy fixtures, destination models, device frames, mockup sections, route metadata, and critique content.
Context-row navigation pattern src/components/therapy-navigation-mockups/context.tsx	Adds weighted stage navigation with desktop, tablet, and phone context-row states.
Working-set dock pattern src/components/therapy-navigation-mockups/dock.tsx	Adds responsive working-set dock states with search, selected therapy, compare slots, and review status.
Grouped navigation rail pattern src/components/therapy-navigation-mockups/rail.tsx	Adds grouped desktop/tablet rails and phone bottom navigation with a “More” sheet.
Therapy routes and UI validation src/app/mockups/therapy-navigation-*/page.tsx, src/app/mockups/mockups-layout-client.tsx, playwright.config.ts, tests/ui-therapy-navigation-mockup.spec.ts, docs/site-map.md	Adds therapy navigation routes, hides shared chrome on those routes, registers mockup UI specs, documents the routes, and tests rendering across three viewport sizes.

Estimated code review effort: 5 (Critical) | ~120 minutes

Possibly related PRs

• BigSimmo/Database#592: Both changes update Playwright mockup spec discovery.
• BigSimmo/Database#646: Both changes modify route-specific mockup chrome handling.
• BigSimmo/Database#670: Both changes modify shared clinical calculator mockup components and route wiring.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 31.90% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: isolating calculator and therapy navigation mockups.
Description check	✅ Passed	The description covers summary, verification, retained/rejected scope, and risk, with only minor template formatting omissions.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/components/calculator-mockups/search-page-mockup.tsx (1)

48-61: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

layout is a required prop that is never read.

It is declared in the props type and passed at Line 262 but never destructured or used, so it only adds friction for future callers.

♻️ Proposed cleanup

   label: string;
-  layout: "scroll";
   className?: string;

           label="Prompts"
-          layout="scroll"
           className="smart-search-prompt-row"

🤖 Prompt for 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.

In `@src/components/calculator-mockups/search-page-mockup.tsx` around lines 48 -
61, Remove the unused required layout prop from the MockupSuggestionChips props
type and update its call site to stop passing layout, while preserving the
component’s existing behavior and other props.

src/components/calculator-mockups/popup-sheet-mockup.tsx (1)

32-57: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider owning Escape + scroll lock inside CalculatorSheet.

Both consumers (CalculatorsPopupSheetMockup Lines 194-205 and search-page-mockup.tsx Lines 591-602) duplicate the identical Escape listener and document.body.style.overflow lock. Co-locating them with the dialog keeps the modal contract in one place and avoids a future consumer shipping a non-dismissible sheet.

🤖 Prompt for 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.

In `@src/components/calculator-mockups/popup-sheet-mockup.tsx` around lines 32 -
57, Move the Escape-key listener and document body scroll-lock lifecycle into
CalculatorSheet, applying them while the sheet is mounted and restoring the
prior overflow value on cleanup. Remove the duplicated Escape and
overflow-handling effects from CalculatorsPopupSheetMockup and the search-page
consumer, while preserving their existing close behavior through onClose.

🤖 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 `@src/components/calculator-mockups/search-page-mockup.tsx`:
- Around line 604-611: Update the comment above useMockupHideOnScroll to remove
the inaccurate claim that the hook polls the ref until the shell element
resolves. Keep the explanation that `#main-content` owns phone scrolling and is
the intended hook target; only describe behavior implemented by
useMockupHideOnScroll.

In `@tests/calculator-mockup-boundary.test.ts`:
- Around line 5-10: Update the calculator mockup boundary test around
searchMockups and forbiddenProductionFeatures to include all seven calculator
mockup files and the exact "`@/components/calculators`" module specifier alongside
the existing directory-path check. Ensure the assertions scan every mockup and
catch both direct and nested production imports.

---

Nitpick comments:
In `@src/components/calculator-mockups/popup-sheet-mockup.tsx`:
- Around line 32-57: Move the Escape-key listener and document body scroll-lock
lifecycle into CalculatorSheet, applying them while the sheet is mounted and
restoring the prior overflow value on cleanup. Remove the duplicated Escape and
overflow-handling effects from CalculatorsPopupSheetMockup and the search-page
consumer, while preserving their existing close behavior through onClose.

In `@src/components/calculator-mockups/search-page-mockup.tsx`:
- Around line 48-61: Remove the unused required layout prop from the
MockupSuggestionChips props type and update its call site to stop passing
layout, while preserving the component’s existing behavior and other props.

🪄 Autofix (Beta)

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: 2ab60e04-5e3c-45ce-8aad-92f8f68a1521

📥 Commits

Reviewing files that changed from the base of the PR and between 18bed6d and d120dbc.

📒 Files selected for processing (30)

• docs/site-map.md
• playwright.config.ts
• src/app/mockups/calculators-bedside-sheet/page.tsx
• src/app/mockups/calculators-clinical-console/page.tsx
• src/app/mockups/calculators-directory-grid/page.tsx
• src/app/mockups/calculators-guided-flow/page.tsx
• src/app/mockups/calculators-popup-sheet/page.tsx
• src/app/mockups/calculators-search-page/page.tsx
• src/app/mockups/calculators-search/page.tsx
• src/app/mockups/mockups-layout-client.tsx
• src/app/mockups/therapy-navigation-context/page.tsx
• src/app/mockups/therapy-navigation-dock/page.tsx
• src/app/mockups/therapy-navigation-rail/page.tsx
• src/components/calculator-mockups/bedside-sheet-mockup.tsx
• src/components/calculator-mockups/calculator-fixtures.ts
• src/components/calculator-mockups/calculator-pathways.ts
• src/components/calculator-mockups/calculator-ui.tsx
• src/components/calculator-mockups/clinical-console-mockup.tsx
• src/components/calculator-mockups/directory-grid-mockup.tsx
• src/components/calculator-mockups/guided-flow-mockup.tsx
• src/components/calculator-mockups/index.ts
• src/components/calculator-mockups/popup-sheet-mockup.tsx
• src/components/calculator-mockups/search-detail-mockup.tsx
• src/components/calculator-mockups/search-page-mockup.tsx
• src/components/therapy-navigation-mockups/context.tsx
• src/components/therapy-navigation-mockups/dock.tsx
• src/components/therapy-navigation-mockups/rail.tsx
• src/components/therapy-navigation-mockups/shared.tsx
• tests/calculator-mockup-boundary.test.ts
• tests/ui-therapy-navigation-mockup.spec.ts

[github-actions]

CI triage

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

• Production 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 #6373 (success).

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