feat(mockups): wire Therapy Compass to the imported content library#650
Merged
Conversation
Replace the placeholder screens with a fully data-driven implementation backed by the Therapy Compass content export — 211 therapies, 12 pathways, plus categories, tags and measures — trimmed to the UI fields and shipped as static JSON under public/mockups/therapy-compass/, fetched client-side (dev-only route, so no production bundle impact). Every screen now renders and cross-links real records: - Home: featured therapies + real pathways + working search - Search: live full-text + tag/brief/reviewed filters over all 211 records - Detail: full record (summary, mechanism, numbered delivery steps, cautions, at-a-glance, category-derived related therapies, source provenance) - Compare: 2-4 real therapies side by side with an inline add picker, a computed decision summary, and Priorities/Differences/All tabs - Recommend: constraint-driven ranking with a top match + ranked list - Pathways: 12 real pathways whose steps open the linked therapy record - Brief Intervention: real 5-min / 15-min / grounding steps + clinician scripts - Patient Sheet: per-therapy explanation, plan steps and homework on the sheet - Review Queue: records needing review with source/index/review meters A shared data layer (data/types, the fetch+cache loader, and pure selectors for search/rank/related/compare) plus icon/ui/control primitives keep the screens lean, and a live "N to review" indicator sits in the top nav. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (12)
🚧 Files skipped from review as they are similar to previous changes (11)
📝 WalkthroughWalkthroughTherapy Compass is converted from static mockup content to a data-driven experience with cached JSON loading, typed therapy and pathway models, search and recommendation utilities, shared UI primitives, centralized bindings, and interactive screens. ChangesTherapy Compass
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant TherapyCompass
participant TcProvider
participant TherapyData
participant TherapyScreen
User->>TherapyCompass: open Therapy Compass
TherapyCompass->>TcProvider: initialize bindings
TcProvider->>TherapyData: load therapy dataset
TherapyData-->>TcProvider: return therapies and pathways
TcProvider-->>TherapyScreen: provide derived state
User->>TherapyScreen: search or select therapy
TherapyScreen->>TcProvider: invoke binding action
TcProvider-->>TherapyScreen: update results and screen
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ 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. For unrecoverable errors, disable the tool in CodeRabbit configuration. Comment |
BigSimmo
marked this pull request as ready for review
July 14, 2026 10:27
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (4)
src/components/therapy-compass/styles.tsx (1)
22-27: 🧹 Nitpick | 🔵 TrivialReduced-motion change — confirm UI verification gate was run.
This is a reduced-motion CSS change; per repo guidelines this class of change should be run through
npm run ensureandnpm run verify:ui(Chromium UI gate) before merge. The PR notes full UI verification wasn't completed locally due to missing optional deps — please confirm CI covers this specific path.As per coding guidelines: "For UI, frontend, browser, routing, styling, reduced-motion, or forced-colors changes, run
npm run ensurebefore browser work and usenpm run verify:uias the Chromium UI gate."🤖 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/therapy-compass/styles.tsx` around lines 22 - 27, Confirm that the reduced-motion styling in the .tc-root .tc-spin and `@keyframes` tc-spin rules is covered by CI or run npm run ensure followed by npm run verify:ui, and report the verification status before merge.Source: Coding guidelines
src/components/therapy-compass/ui.tsx (1)
107-123: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win
LoadingStateisn't announced to assistive tech.The container has no
role="status"/aria-liveregion, so screen-reader users get no cue when a screen begins/finishes loading (used across search, review queue, detail, etc.).♿ Proposed fix
export function LoadingState({ label = "Loading therapy library…" }: { label?: string }) { return ( <div + role="status" + aria-live="polite" style={s( `display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:280px;color:var(--text-soft);`, )} >🤖 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/therapy-compass/ui.tsx` around lines 107 - 123, Update the LoadingState component to make its loading message available to assistive technology by adding an appropriate status role and live-region behavior to its outer container. Keep the existing visual structure and label rendering unchanged.src/components/therapy-compass/icons.tsx (1)
57-63: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
CompassIconandTargetIconare pixel-identical.Both render the exact same three-circle SVG. Consider aliasing one to the other to avoid drift if either is tweaked later.
♻️ Optional dedupe
-export const TargetIcon = makeIcon( - <> - <circle cx="12" cy="12" r="9" /> - <circle cx="12" cy="12" r="5.2" /> - <circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none" /> - </>, -); +export const TargetIcon = CompassIcon;Also applies to: 84-90
🤖 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/therapy-compass/icons.tsx` around lines 57 - 63, Deduplicate the identical CompassIcon and TargetIcon definitions by aliasing one exported symbol to the other. Update CompassIcon or TargetIcon while preserving both public exports and their existing rendering behavior, so future changes cannot cause them to drift.src/components/therapy-compass/bindings.tsx (1)
1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win"Needs review" filter is reimplemented in three places.
t.reviewStatus !== "reviewed"is duplicated independently across the nav badge count, the review-queue memo, and the review-queue header count; centralizing it onTcBindingsremoves the drift risk.
src/components/therapy-compass/bindings.tsx#L200-269: add a memoizedreviewCount/unreviewedTherapiesderived fromtherapiesand expose it on the returnedvalue(andTcBindingstype).src/components/therapy-compass/nav.tsx#L18-18: replace the localreviewCountcomputation withb.reviewCount(or equivalent) from bindings.src/components/therapy-compass/screens/other-screen.tsx#L15-22: base thequeuememo on the sharedunreviewedTherapieslist instead of re-filteringb.therapies.src/components/therapy-compass/screens/other-screen.tsx#L76-76: use the sharedreviewCountbinding instead of recomputing.filter(...).lengthinline on every render.🤖 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/therapy-compass/bindings.tsx` at line 1, Centralize the unreviewed-therapy derivation in the TcBindings value: add memoized unreviewedTherapies and reviewCount fields based on therapies, and include them in the TcBindings type and returned value. Update nav.tsx to use b.reviewCount, and update other-screen.tsx to derive queue and header counts from b.unreviewedTherapies and b.reviewCount instead of independently filtering b.therapies.
🤖 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 `@public/mockups/therapy-compass/pathways.json`:
- Line 1: Remove the markdown NICE link text and URLs from the step.description
values for behavioural-parent-training and group-relapse-prevention-programmes
in the sleep pathway, leaving the surrounding clinical descriptions as plain
text.
- Line 1: Clean the generated copy in the pathways JSON: complete the truncated
description for therapySlug
eating-disorder-focused-cognitive-behavioural-therapy-cbt-ed-cbt-e within
neurodevelopmental-pathway, and remove raw Markdown links plus
utm_source=chatgpt.com query text from descriptions in sleep-pathway while
preserving their readable content.
In `@src/components/therapy-compass/data/select.ts`:
- Around line 201-211: Update shortestDelivery so it ranks therapies using a
dedicated sortable duration value or robustly normalized duration parsing,
rather than the first number extracted from free-form timeRequired prose.
Preserve the null result for empty input and the briefInterventionAvailable
adjustment, while ensuring the SHORTEST DELIVERY summary selects the therapy
with the truly shortest duration.
In `@src/components/therapy-compass/data/use-therapy-data.ts`:
- Around line 14-21: Update loadDataset to validate each fetch response’s ok
status before parsing JSON, and throw a clear error identifying the failed
dataset asset (therapies, pathways, or reference). Preserve the existing
TherapyDataset assembly and concurrent Promise.all loading behavior.
In `@src/components/therapy-compass/screens/detail-screen.tsx`:
- Around line 129-131: Update the rendering around the “Clinical snapshot”
BodyRow so it is shown only when clinicalSummary or mechanism is available, and
do not fall back to mechanism when clinicalSummary is empty. Keep the separate
“How it works” row controlled by mechanism, preventing duplicate text while
preserving both sections when clinicalSummary exists.
In `@src/components/therapy-compass/screens/pathways-screen.tsx`:
- Around line 3-20: Update the footer actions in PathwaysScreen so Copy pathway
has an onClick handler that performs the intended copy action, and make Patient
sheet search pathway.steps for the first step with a therapySlug rather than
checking only steps[0]. Preserve the existing behavior when no linked therapy
exists.
In `@src/components/therapy-compass/therapy-card.tsx`:
- Around line 130-141: Update the type imports in therapy-card.tsx to import
ReactNode from react, then replace React.ReactNode with ReactNode in both
CardCell.icon and TherapyListItem.trailing props. Keep the existing prop types
and component behavior unchanged.
---
Nitpick comments:
In `@src/components/therapy-compass/bindings.tsx`:
- Line 1: Centralize the unreviewed-therapy derivation in the TcBindings value:
add memoized unreviewedTherapies and reviewCount fields based on therapies, and
include them in the TcBindings type and returned value. Update nav.tsx to use
b.reviewCount, and update other-screen.tsx to derive queue and header counts
from b.unreviewedTherapies and b.reviewCount instead of independently filtering
b.therapies.
In `@src/components/therapy-compass/icons.tsx`:
- Around line 57-63: Deduplicate the identical CompassIcon and TargetIcon
definitions by aliasing one exported symbol to the other. Update CompassIcon or
TargetIcon while preserving both public exports and their existing rendering
behavior, so future changes cannot cause them to drift.
In `@src/components/therapy-compass/styles.tsx`:
- Around line 22-27: Confirm that the reduced-motion styling in the .tc-root
.tc-spin and `@keyframes` tc-spin rules is covered by CI or run npm run ensure
followed by npm run verify:ui, and report the verification status before merge.
In `@src/components/therapy-compass/ui.tsx`:
- Around line 107-123: Update the LoadingState component to make its loading
message available to assistive technology by adding an appropriate status role
and live-region behavior to its outer container. Keep the existing visual
structure and label rendering unchanged.
🪄 Autofix (Beta)
❌ Autofix failed (check again to retry)
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 Plus
Run ID: 3d53876b-86e6-4f76-a103-20ca8772b227
📒 Files selected for processing (23)
.prettierignorepublic/mockups/therapy-compass/pathways.jsonpublic/mockups/therapy-compass/reference.jsonpublic/mockups/therapy-compass/therapies.jsonsrc/components/therapy-compass/bindings.tsxsrc/components/therapy-compass/controls.tssrc/components/therapy-compass/data/select.tssrc/components/therapy-compass/data/types.tssrc/components/therapy-compass/data/use-therapy-data.tssrc/components/therapy-compass/icons.tsxsrc/components/therapy-compass/nav.tsxsrc/components/therapy-compass/screens/brief-screen.tsxsrc/components/therapy-compass/screens/compare-screen.tsxsrc/components/therapy-compass/screens/detail-screen.tsxsrc/components/therapy-compass/screens/home-screen.tsxsrc/components/therapy-compass/screens/other-screen.tsxsrc/components/therapy-compass/screens/pathways-screen.tsxsrc/components/therapy-compass/screens/recommend-screen.tsxsrc/components/therapy-compass/screens/search-screen.tsxsrc/components/therapy-compass/screens/sheets-screen.tsxsrc/components/therapy-compass/styles.tsxsrc/components/therapy-compass/therapy-card.tsxsrc/components/therapy-compass/ui.tsx
BigSimmo
enabled auto-merge (squash)
July 14, 2026 10:56
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. The branch was updated while autofix was in progress. Please try again. |
- Data: strip markdown links, tracking params and bare URLs from the generated content, and trim source truncations to a sentence boundary, so nothing renders as raw markdown/URL in the plain-text UI. - Loader: check response.ok and throw a clear per-asset error before parsing. - Detail: don't fall back to `mechanism` for the Clinical snapshot, so it no longer duplicates the "How it works" row when a summary is absent. - Compare: rank "shortest delivery" with a normalised duration weight (minutes vs sessions, smallest value) instead of the first number in free-form prose. - Pathways: wire the "Copy pathway" button to the clipboard, and target the first linked step for "Patient sheet" (disabled when none is linked). - LoadingState: add role="status" / aria-live so screen readers are notified. - Dedupe identical TargetIcon/CompassIcon; centralise the "needs review" derivation (reviewCount/unreviewedTherapies) on bindings and reuse it in the nav and review queue; import ReactNode instead of React.ReactNode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. The agent ran but didn't make any changes. The issues may already be fixed or require manual intervention. |
Owner
Author
|
@codex review and fix issues and enable merge successfully |
Summary
Testing
No commit or PR was created because there were no new changes to commit; the worktree is clean. |
2 tasks
This was referenced Jul 17, 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
Follow-up to #646 (merged). Turns the Therapy Compass mockup at
/mockups/therapy-compassinto a fully data-driven tool backed by the uploaded Therapy Compass content export, and wires every screen together.Data (populated from the export). The export's
data/therapies.json/pathways.json/ reference files were trimmed to the fields the UI renders and shipped as static JSON underpublic/mockups/therapy-compass/, fetched once client-side and cached:It's a dev-only route (production 404,
robotsdisallow), so these assets never enter the production JS bundle.Every screen now renders real records and cross-links:
Cross-navigation is wired throughout (open record → Detail; Compare adds to the set; Brief / Patient sheet open the selected therapy; pathway steps and recommendations open records), and a live "N to review" chip sits in the top nav. A shared data layer (
data/types, the fetch+cache loader, and pure selectors for search/rank/related/compare) plus icon/ui/control primitives keep the screens lean.Verification
Dev-only mockup. Ran:
✅
npm run lint(clean,--max-warnings 0),typecheck(clean for every new/changed file), Prettier--check,sitemap:check✅ Browser QA via Chromium/Playwright across all screens (light + dark): search filters 211 records; Detail/Brief/Sheet render the selected record's real fields; Compare shows real side-by-side data with the add-picker; Recommend ranks live; Pathways steps open records; Review Queue lists needs-review records. No console warnings.
Data assets are added to
.prettierignore(generated/minified, likepublic/demo-documents/).npm run verify:pr-local— not run to completion in this sandbox (its typecheck step trips on optional deps not installed here, e.g.@testing-library/*,@axe-core/playwright); the individual gates above were run directly. CIBuild/Static PR checkscover these with a full install.npm run verify:ui— CICritical UI smoke/UI regressioncover the Chromium suite.Clinical Governance Preflight
N/A for production surfaces — this is a static, dev-only mockup. It does not touch ingestion, answer generation, search/ranking of live documents, document access, privacy, production env, Supabase, or clinical output. The bundled content is the export's own de-identified reference data (the export deliberately excludes patient sheets, favourites, usage logs and credentials), and its
reviewStatus,confidenceLevel, warnings, sources and review checklists are preserved and surfaced (needs-review badges, "N to review", source provenance) rather than presented as validated. No schema, RLS, or service-role changes.Notes
Data was trimmed with a one-off transform (kept out of the repo); the committed assets are the trimmed JSON only.
relations/measureLinksare empty in the export, so "related therapies" is derived by shared category/tags.🤖 Generated with Claude Code
https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K
Generated by Claude Code
Summary by CodeRabbit