feat(mockups): add Therapy Compass decision-support mockup#646
Merged
Conversation
Port the "Therapy Compass" design (claude.ai/design "Therapy page mockups") into a runnable, dev-only mockup route with eight screens — Home, Search, Detail, Compare, Recommend, Pathways, Brief Intervention and Patient Sheet — plus a Review-Queue placeholder. Client-side wiring covers screen navigation, comparison tabs/density, brief tabs, patient-sheet tone/section toggles, the clinician-footer toggle and print. The screens are a faithful port of the design export's token-based inline styles: every var(--…) already exists in globals.css and flips in dark mode, and a small s() helper parses the CSS strings at render so the markup stays 1:1 with the design (this also keeps it off the Tailwind type/icon-scale gates, which only flag arbitrary utilities). It renders inside the app's universal chrome — global header + rail via the mockups layout — and closes with the shared clinical verification footer (ModeHomeVerificationFooter); the tool's own navigation sits between them as a secondary rail. The shared bottom search composer is hidden (as with the tools/favourites mockups) since the tool provides its own search surface. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (18)
📝 WalkthroughWalkthroughChangesThe PR adds a Therapy Compass mockup route with shared state bindings, navigation, multiple clinical workflow screens, responsive styling, and a printable patient-sheet builder. The route is integrated into the sitemap and hides the shared mockup composer. Therapy Compass mockup
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Route
participant TherapyCompassPage
participant TcProvider
participant Shell
participant Screen
Route->>TherapyCompassPage: render Therapy Compass route
TherapyCompassPage->>TcProvider: initialize screen and UI state
TcProvider->>Shell: provide TcBindings
Shell->>Screen: render active screen
Screen->>TcProvider: invoke navigation or control handler
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: one or more packages not found in the registry. Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
BigSimmo
marked this pull request as ready for review
July 14, 2026 08:02
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
BigSimmo
enabled auto-merge (squash)
July 14, 2026 08:02
…nt nav The design shipped a bespoke left rail, but inside this app that role is already filled by the universal sidebar. Remove the tool's own vertical rail and keep its eight destinations reachable through a horizontal, repo-idiomatic pill nav that sits at the top of the content (sticky under the global header) and scrolls horizontally on narrow viewports. This fits the tool into the app's chrome rather than porting the design's chrome verbatim. Also switch the nav pill's active border to the `border` shorthand in both states so React no longer warns about mixing `border`/`borderColor` across rerenders. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K
2 tasks
This was referenced Jul 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds Therapy Compass — a source-grounded therapy decision-support mockup — as a dev-only route at
/mockups/therapy-compass, adapted from the claude.ai/design "Therapy page mockups" project (Therapy Compass.dc.html).Eight screens with full client-side wiring:
isOtherfallback)Fitted to the app's chrome, not ported verbatim. The content renders inside the app's universal chrome — global header + sidebar (via the mockups layout) and the shared clinical verification footer (
ModeHomeVerificationFooter). The design's own left sidebar was intentionally dropped (that role is already filled by the universal rail); its eight destinations are reached through a horizontal, repo-idiomatic pill nav that sits under the global header and scrolls on narrow viewports. The shared bottom search composer is hidden (as with the tools/favourites mockups) since the tool provides its own search surface.Implementation note: the screens keep the design export's token-based inline styles. Every
var(--…)token already exists inglobals.cssand flips in dark mode; a smalls()helper parses the CSS strings at render so the markup stays close to the design (and off the Tailwind type/icon-scale gates, which only flag arbitrary utilities). Two hardcoded body-text colours were mapped to--warning-text/--info-textfor dark-mode correctness; the patient-sheet "paper" keeps its intentional print colours. Design-nav anchors were promoted to accessible<button>s and layout-only<label>s to<div>s witharia-labeled inputs.Verification
Dev-only mockup (production returns 404,
robotsdisallows indexing). Ran:✅
npm run lint(clean,--max-warnings 0), Prettier--check(clean),sitemap:check(route registered)✅
typecheck— clean for every new file (the onlytscerrors in this sandbox are pre-existing and come from optional deps not installed here:@sentry/node,@testing-library/*,@axe-core/playwright)✅ Browser QA via Chromium/Playwright — all 8 screens + placeholder, light and dark, verified rendering inside the universal chrome; screen navigation, comparison tabs, density, brief tabs, sheet section/tone toggles and the clinician toggle all confirmed working, no React console warnings
npm run verify:pr-local— not run to completion in this sandbox (its typecheck step trips on the missing optional deps above, unrelated to this change); the individual gates above were run directly. CIBuild/Static PR checkscover these with a full install.npm run verify:ui— full Chromium e2e suite not run locally; equivalent manual browser QA performed instead (CICritical UI smoke/UI regressioncover it).Clinical Governance Preflight
N/A — this is a static, dev-only design mockup. It does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, Supabase, or clinical output. All copy is placeholder design content; no real or patient-identifiable data, no service-role/provider access, and no schema changes.
Notes
Two commits: (1) the initial port of the eight screens; (2) a refactor that drops the design's own sidebar for the horizontal in-content nav so the tool fits the app's universal chrome. Screens were converted from the design export's
x-dctemplate (inline-styled HTML + a small state script) into React with a context (TcProvider/useTcBindings) that mirrors the export'srenderVals()state — screen routing, comparison tabs, density, brief tabs, patient-sheet tone/sections, clinician toggle and print.🤖 Generated with Claude Code
https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K
Summary by CodeRabbit
New Features
Documentation