From 414fa3b2c12fc539e089cf67215925dc34db5233 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 14 Jul 2026 07:57:20 +0000 Subject: [PATCH 1/2] feat(mockups): add Therapy Compass decision-support mockup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K --- docs/site-map.md | 1 + src/app/mockups/mockups-layout-client.tsx | 10 +- src/app/mockups/therapy-compass/page.tsx | 13 + src/components/therapy-compass/bindings.tsx | 266 ++++++ src/components/therapy-compass/index.ts | 1 + src/components/therapy-compass/nav.tsx | 143 ++++ .../therapy-compass/screens/brief-screen.tsx | 693 +++++++++++++++ .../screens/compare-screen.tsx | 523 ++++++++++++ .../therapy-compass/screens/detail-screen.tsx | 546 ++++++++++++ .../therapy-compass/screens/home-screen.tsx | 465 ++++++++++ .../therapy-compass/screens/other-screen.tsx | 49 ++ .../screens/pathways-screen.tsx | 561 ++++++++++++ .../screens/recommend-screen.tsx | 575 +++++++++++++ .../therapy-compass/screens/search-screen.tsx | 800 ++++++++++++++++++ .../therapy-compass/screens/sheets-screen.tsx | 399 +++++++++ src/components/therapy-compass/style-utils.ts | 29 + src/components/therapy-compass/styles.tsx | 45 + .../therapy-compass/therapy-compass-page.tsx | 76 ++ 18 files changed, 5194 insertions(+), 1 deletion(-) create mode 100644 src/app/mockups/therapy-compass/page.tsx create mode 100644 src/components/therapy-compass/bindings.tsx create mode 100644 src/components/therapy-compass/index.ts create mode 100644 src/components/therapy-compass/nav.tsx create mode 100644 src/components/therapy-compass/screens/brief-screen.tsx create mode 100644 src/components/therapy-compass/screens/compare-screen.tsx create mode 100644 src/components/therapy-compass/screens/detail-screen.tsx create mode 100644 src/components/therapy-compass/screens/home-screen.tsx create mode 100644 src/components/therapy-compass/screens/other-screen.tsx create mode 100644 src/components/therapy-compass/screens/pathways-screen.tsx create mode 100644 src/components/therapy-compass/screens/recommend-screen.tsx create mode 100644 src/components/therapy-compass/screens/search-screen.tsx create mode 100644 src/components/therapy-compass/screens/sheets-screen.tsx create mode 100644 src/components/therapy-compass/style-utils.ts create mode 100644 src/components/therapy-compass/styles.tsx create mode 100644 src/components/therapy-compass/therapy-compass-page.tsx diff --git a/docs/site-map.md b/docs/site-map.md index 90a90483f..dfe1d7a2c 100644 --- a/docs/site-map.md +++ b/docs/site-map.md @@ -553,6 +553,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check` - `/mockups/settings-search-clinical` - Route discovered from app directory Source: `src/app/mockups/settings-search-clinical/page.tsx`. - `/mockups/settings-search-general` - Route discovered from app directory Source: `src/app/mockups/settings-search-general/page.tsx`. - `/mockups/settings-search-privacy` - Route discovered from app directory Source: `src/app/mockups/settings-search-privacy/page.tsx`. +- `/mockups/therapy-compass` - Route discovered from app directory Source: `src/app/mockups/therapy-compass/page.tsx`. - `/mockups/tools-action-workbench` - Route discovered from app directory Source: `src/app/mockups/tools-action-workbench/page.tsx`. - `/mockups/tools-clinical-lanes` - Route discovered from app directory Source: `src/app/mockups/tools-clinical-lanes/page.tsx`. - `/mockups/tools-command-center` - Route discovered from app directory Source: `src/app/mockups/tools-command-center/page.tsx`. diff --git a/src/app/mockups/mockups-layout-client.tsx b/src/app/mockups/mockups-layout-client.tsx index 7ae81f3bf..f498a929e 100644 --- a/src/app/mockups/mockups-layout-client.tsx +++ b/src/app/mockups/mockups-layout-client.tsx @@ -13,6 +13,10 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) { const isSourceOverlayRedesignMockup = pathname === "/mockups/document-search/source-overlays"; const isStandaloneDocumentFlow = pathname === "/mockups/document-search"; const isUniversalSearchRedesignMockup = pathname === "/mockups/universal-search-redesign"; + // Therapy Compass keeps the universal header + rail but provides its own + // primary search surface, so the shared bottom composer is hidden (as with + // the tools/favourites mockups). + const isTherapyCompassMockup = pathname.startsWith("/mockups/therapy-compass"); return ( diff --git a/src/app/mockups/therapy-compass/page.tsx b/src/app/mockups/therapy-compass/page.tsx new file mode 100644 index 000000000..95bf7d331 --- /dev/null +++ b/src/app/mockups/therapy-compass/page.tsx @@ -0,0 +1,13 @@ +import type { Metadata } from "next"; + +import { TherapyCompassPage } from "@/components/therapy-compass"; + +export const metadata: Metadata = { + title: "Therapy Compass Mockup - Clinical KB", + description: + "Source-grounded therapy decision-support mockup: search, compare, recommend, pathways, brief interventions and patient sheets.", +}; + +export default function TherapyCompassMockupRoute() { + return ; +} diff --git a/src/components/therapy-compass/bindings.tsx b/src/components/therapy-compass/bindings.tsx new file mode 100644 index 000000000..84a25f4ca --- /dev/null +++ b/src/components/therapy-compass/bindings.tsx @@ -0,0 +1,266 @@ +"use client"; + +import { createContext, useContext, useMemo, useState, type CSSProperties, type ReactNode } from "react"; + +import { s } from "./style-utils"; + +// The eight first-class Therapy Compass screens. Anything else (e.g. the +// Review Queue) falls through to the shared "Other" placeholder, mirroring the +// design's `isOther` branch. +const KNOWN_SCREENS = ["search", "detail", "compare", "recommend", "pathways", "brief", "home", "sheets"] as const; + +type SheetSectionKey = "about" | "steps" | "practice" | "coping" | "contacts"; + +/** + * Every value the ported screen JSX references as `b.`. The names and + * semantics are a 1:1 mirror of the design export's `renderVals()` so the + * converted markup binds without edits — screen navigation, comparison tabs, + * density, brief tabs, patient-sheet tone/sections and the clinician toggle. + */ +export type TcBindings = { + // navigation + goHome: () => void; + goSearch: () => void; + goRecommend: () => void; + goCompare: () => void; + goPathways: () => void; + goBrief: () => void; + goSheets: () => void; + goDetail: () => void; + goReview: () => void; + // active-screen flags + isSearch: boolean; + isDetail: boolean; + isCompare: boolean; + isRecommend: boolean; + isPathways: boolean; + isBrief: boolean; + isHome: boolean; + isSheets: boolean; + isOther: boolean; + otherLabel: string; + // sidebar nav styling + navHome: CSSProperties; + navSearch: CSSProperties; + navRecommend: CSSProperties; + navCompare: CSSProperties; + navPathways: CSSProperties; + navBrief: CSSProperties; + navSheets: CSSProperties; + navReview: CSSProperties; + // comparison tabs + density + cmpTab: string; + tabPriorities: CSSProperties; + tabDifferences: CSSProperties; + tabAll: CSSProperties; + setTabPriorities: () => void; + setTabDifferences: () => void; + setTabAll: () => void; + density: string; + segComfortable: CSSProperties; + segDense: CSSProperties; + setComfortable: () => void; + setDense: () => void; + // brief-intervention tabs + briefTab: string; + brief5: CSSProperties; + brief15: CSSProperties; + briefGround: CSSProperties; + set5: () => void; + set15: () => void; + setGround: () => void; + // patient-sheet tone + tonePlain: CSSProperties; + toneWarm: CSSProperties; + toneClinical: CSSProperties; + setTonePlain: () => void; + setToneWarm: () => void; + setToneClinical: () => void; + // patient-sheet section toggles + secAbout: boolean; + secSteps: boolean; + secPractice: boolean; + secCoping: boolean; + secContacts: boolean; + chipAbout: CSSProperties; + chipSteps: CSSProperties; + chipPractice: CSSProperties; + chipCoping: CSSProperties; + chipContacts: CSSProperties; + toggleAbout: () => void; + toggleSteps: () => void; + togglePractice: () => void; + toggleCoping: () => void; + toggleContacts: () => void; + // clinician footer toggle + sheetClinician: boolean; + toggleClinician: () => void; + clinicianTrack: CSSProperties; + clinicianKnob: CSSProperties; + // patient-sheet print + printSheet: () => void; + // raw screen id (for callers that need it) + screen: string; +}; + +const TcContext = createContext(null); + +function navStyle(active: boolean): CSSProperties { + // Base includes button resets (border/background/font/width) so the nav items + // render identically whether the design used or we use an accessible + // + + + + +
+ TOOLS +
+ + + + +
+ GOVERNANCE +
+ + +
+ +
+ + ); +} diff --git a/src/components/therapy-compass/screens/brief-screen.tsx b/src/components/therapy-compass/screens/brief-screen.tsx new file mode 100644 index 000000000..a0ce2d038 --- /dev/null +++ b/src/components/therapy-compass/screens/brief-screen.tsx @@ -0,0 +1,693 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function BriefScreen() { + const b = useTcBindings(); + return ( +
+
+
+

+ Brief Intervention +

+

+ Fast scripts and steps from uploaded delivery fields. +

+
+
+ + +
+
+
+ + + + + +
+
+ + + + + + +
+
+
+
+ Available records +
+
+ + + + +
+
+ Showing 4 of 4 records +
+
+
+
+
+
+

+ Behavioural Activation +

+ + 5-minute mode + + + Source-derived + + + Clinician review required + +
+ +
+
+
+
+ GOAL +
+

+ Depression and low motivation in outpatient care. +

+
+
+
+ SCRIPT / STEPS +
+

+ Choose one small activity. +

+
+
+
+ CAUTIONS +
+

+ Review source cautions, acuity and patient factors before use. +

+
+
+
+ SOURCE STATUS +
+

+ Uploaded delivery fields ·{" "} + review required. +

+
+
+
+
+
+
+ 5-minute delivery +
+
+
+ + 1 + +
+
+
Orient
+
+ Confirm the immediate goal and available time. +
+
+
+ Uploaded delivery fields + +
+
+
+
+ + 2 + +
+
+
+ Choose one small activity +
+
+ Use the source-derived brief step. +
+
+
+ Uploaded delivery fields + +
+
+
+
+ + 3 + +
+
+
+ Plan the next action +
+
+ Record what will happen, when and where. +
+
+
+ Uploaded delivery fields + +
+
+
+
+ + 4 + +
+
+
Review
+
+ Check understanding, cautions and follow-up. +
+
+
+ Uploaded delivery fields + +
+
+
+
+
+
+
+ Before use +
+
+
+ + Confirm the primary problem +
+
+ + Check risk and acuity +
+
+ + Review contraindications +
+
+ + Confirm patient-facing language +
+
+
+ + + + + + Clinical review is required before saving or sharing. + +
+
+
+
+ + + + +
+
+
+
+ ); +} diff --git a/src/components/therapy-compass/screens/compare-screen.tsx b/src/components/therapy-compass/screens/compare-screen.tsx new file mode 100644 index 000000000..725933fc4 --- /dev/null +++ b/src/components/therapy-compass/screens/compare-screen.tsx @@ -0,0 +1,523 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function CompareScreen() { + const b = useTcBindings(); + return ( +
+
+
+
+

+ Therapy Comparison +

+ + 3 of 4 selected + +
+

+ Compare fit, cautions, delivery and evidence without losing source context. +

+
+
+
+ + +
+ + + +
+
+
+
+ + + + + +
+
+ + + + ACT + + + +
+
+ + + + + Applied Relaxation + + + +
+
+ + + + + Brief low-intensity CBT + + + +
+
+
+
+
Decision summary
+
+
+
+ CLINICAL PRIORITY +
+
Check cautions before fit
+
+
+
+ SHORTEST DELIVERY +
+
Brief low-intensity CBT
+
+
+
+ SOURCE STATUS +
+
2 records need review
+
+
+
+ + + +
+
+
+
Field
+
+
+ + + + ACT +
+
+ Needs review +
+
+
+
+ + + + + Applied Relaxation +
+
+ Source review required +
+
+
+
+ + + + + + Brief low-intensity CBT + +
+
+ Clinician review required +
+
+
+
+
+ + + + + When not to use +
+
+ Check for a more specific first-line therapy. +
+
+ Confirm anxiety-arousal regulation is the main problem. +
+
+ Check acuity, risk and suitability for a brief format. +
+
+
+
+ + + + + Best fit +
+
+ Depression, anxiety-spectrum distress, broader transdiagnostic presentations. +
+
+ Anxiety-arousal regulation. +
+
+ Brief structured skills and psychoeducation. +
+
+
+
+ + + + + What to do first +
+
+ Define values and committed action. +
+
+ Teach and practise core relaxation. +
+
+ Engage and set a brief agenda. +
+
+
+
+ + + + + Time required +
+
+ Brief / full session +
+
+ 5-minute or structured session +
+
+ 5–15 minutes +
+
+
+
+ + + + + Patient acceptability +
+
+ Generally good +
+
+ High +
+
+ Generally good +
+
+
+
+ + + + + Clinician skill +
+
+ Moderate +
+
+ Low +
+
+ Low–moderate +
+
+
+
+ + + + Evidence level +
+
+ Moderate · needs review +
+
+ Source review required +
+
+ Clinician review required +
+
+
+
+ + + + + Comparisons are source-grounded. Review status reflects the latest source checks. +
+
+ ); +} diff --git a/src/components/therapy-compass/screens/detail-screen.tsx b/src/components/therapy-compass/screens/detail-screen.tsx new file mode 100644 index 000000000..6c8ac4b75 --- /dev/null +++ b/src/components/therapy-compass/screens/detail-screen.tsx @@ -0,0 +1,546 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function DetailScreen() { + const b = useTcBindings(); + return ( +
+ +
+
+
+
+ + + + + + Needs source review + + + Moderate complexity + +
+

+ Acceptance & Commitment Therapy (ACT) +

+
Also known as ACT
+

+ A structured behavioural therapy in the broader CBT family, focused on psychological flexibility rather + than symptom control alone. +

+
+ + CBT + + + Crisis / risk + + + 5-minute + + + Handout + + + Brief + +
+
+
+
+
+ + + + USE WHEN +
+

+ Depression, anxiety-spectrum distress and broader transdiagnostic emotional disorders. +

+
+
+
+ + + + + AVOID / MODIFY +
+

+ Clarify the core problem is not better matched to a more specific first-line therapy. +

+
+
+
+ + + + + FAST DELIVERY +
+

+ Available as a brief session or a full-session protocol. +

+
+
+
+ + + + + EVIDENCE / SOURCE +
+

+ Moderate confidence · needs review. +

+
+
+
+
+ + + + + +
+
+ Clinical snapshot +
+

+ Acceptance & Commitment Therapy (ACT) is a structured behavioural therapy in the broader CBT + family — commonly described as a “third-wave” approach — focused on psychological flexibility rather + than symptom control alone. +

+
+
+
+ + + + + + +
+
+ When to use +
+

+ Best-supported for depression, anxiety-spectrum distress and transdiagnostic emotional distress when + avoidance and fusion are prominent. Also carries a formal NICE recommendation for chronic primary + pain. In Australian psychiatry it is best understood as an accepted structured psychotherapy, though + with a narrower first-line guideline footprint than standard CBT. +

+
+
+
+ + + + + + +
+
+ How to deliver it +
+

+ Build a shared formulation of how struggling with thoughts and feelings is narrowing life. Teach + defusion and acceptance so thoughts are noticed rather than automatically obeyed, strengthen + present-moment attention, clarify values, and translate them into small committed actions. Review what + re-entered avoidance and consolidate a more flexible, values-guided pattern. +

+
+
+
+ + + + + + +
+
+ Safety & cautions +
+

+ Confirm the core problem is not better matched to a more specific first-line therapy (ERP, + trauma-focused therapy, CBTp, or structured personality treatment). Check suicidality, psychosis, + mania, dissociation, cognitive ability, language and willingness to do experiential exercises. Not + sufficient where the case clearly needs a specific active treatment first; weak if delivered as vague + mindfulness without real behavioural change. +

+
+
+
+
+ + + + +
+
+
+
+
+ At a glance +
+
+
+ + + + + +
+
+ Best used for +
+

+ Depression, anxiety-spectrum distress and broader transdiagnostic emotional disorders. +

+
+
+
+ + + + + +
+
+ Target symptoms +
+

+ Experiential avoidance, cognitive fusion, rigid self-stories and reduced psychological flexibility. +

+
+
+
+ + + + + + +
+
+ Time & setting +
+

+ Individual, group, digital or blended. Usually structured and manual-informed. +

+
+
+
+ + + + + + + +
+
+ Complexity / population +
+

+ High — patients who can engage with a values-based, acceptance-focused model. +

+
+
+
+
+
+
+ Related therapies +
+
+ + + +
+
+
+
+ + + + Source provenance +
+
+
+ Source: Single therapy record +
+
+ Review: Not yet provided +
+
+
+
+
+
+ ); +} diff --git a/src/components/therapy-compass/screens/home-screen.tsx b/src/components/therapy-compass/screens/home-screen.tsx new file mode 100644 index 000000000..c33e57948 --- /dev/null +++ b/src/components/therapy-compass/screens/home-screen.tsx @@ -0,0 +1,465 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function HomeScreen() { + const b = useTcBindings(); + return ( +
+
+ + + + + + + +

+ What therapy are you looking for? +

+

+ Search source-grounded therapy records by problem, symptom, skill or population — or jump into a clinical + pathway. +

+
+
+ + + + + + +
+
+ + + + +
+
+ + + +
+
+

Key clinical pathways

+ +
+
+ + + +
+
+

+ Frequently used therapies +

+ +
+
+ + + + +
+
+ ); +} diff --git a/src/components/therapy-compass/screens/other-screen.tsx b/src/components/therapy-compass/screens/other-screen.tsx new file mode 100644 index 000000000..527e36018 --- /dev/null +++ b/src/components/therapy-compass/screens/other-screen.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function OtherScreen() { + const b = useTcBindings(); + return ( +
+ + + + + + +

{b.otherLabel}

+

+ This surface uses the same Therapy Compass shell. Pick a tool from the sidebar to keep exploring the clinical + workspace. +

+
+ + +
+
+ ); +} diff --git a/src/components/therapy-compass/screens/pathways-screen.tsx b/src/components/therapy-compass/screens/pathways-screen.tsx new file mode 100644 index 000000000..3bfb5fda5 --- /dev/null +++ b/src/components/therapy-compass/screens/pathways-screen.tsx @@ -0,0 +1,561 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function PathwaysScreen() { + const b = useTcBindings(); + return ( +
+
+
+

+ Clinical Pathways +

+

+ Problem-based workflows generated from imported records. +

+
+
+ + +
+
+
+
+ + + + + +
+ + +
+
+
+
Pathways
+
+ + + +
+

+ Pathways are generated from imported therapy records. +

+
+
+
+ + + + + + +
+
+

+ Mood and anxiety +

+ + + + + + Needs review + +
+

+ A source-linked workflow for reviewing therapy options, delivery constraints and cautions before + choosing a next step. +

+
+ + + + 4 linked therapy steps +
+
+
+
+
+
+ + 1 + +
+ + + + + + +
+
+ Clarify the primary problem +
+
+ Confirm target symptoms, setting, acuity and exclusions. +
+
+ + ASSESSMENT + + + + +
+
+
+ + 2 + +
+ + + + + + +
+
+ Acceptance & Commitment Therapy (ACT) +
+
+ Review fit, contraindications and source status. +
+
+ + THERAPY RECORD + + +
+
+
+ + 3 + +
+ + + + + + +
+
+ Applied Relaxation +
+
+ Consider when anxiety-arousal regulation is the main problem. +
+
+ + THERAPY RECORD + + +
+
+
+ + 4 + +
+ + + + + + +
+
+ Brief low-intensity CBT +
+
+ Check suitability for a 5–15 minute structured format. +
+
+ + BRIEF OPTION + + +
+
+
+ + 5 + +
+ + + + + + +
+
+ Review and next step +
+
+ Document source checks, clinician judgement and follow-up. +
+
+ + REVIEW + + + + +
+
+
+
+
+
+
+ + + + +
+
+ Clinical caution — decision support generated from imported records. +
+
+ Review source status, missing fields and patient-specific factors before clinical use. +
+
+
+ + +
+
+
+ ); +} diff --git a/src/components/therapy-compass/screens/recommend-screen.tsx b/src/components/therapy-compass/screens/recommend-screen.tsx new file mode 100644 index 000000000..5a8de556f --- /dev/null +++ b/src/components/therapy-compass/screens/recommend-screen.tsx @@ -0,0 +1,575 @@ +"use client"; + +import { useTcBindings } from "../bindings"; +import { s } from "../style-utils"; + +export function RecommendScreen() { + const b = useTcBindings(); + return ( +
+

+ Recommend Tool +

+

+ Refine a clinical question with setting, time and caution constraints. +

+
+
+ What do you need help choosing? +
+