From d0826adc425128ee9a4567e4465ef46b6678f266 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 14 Jul 2026 13:51:09 +0000 Subject: [PATCH] fix(mockups): perfect Therapy Compass detail dedup + wire placeholder controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up polish to the merged Therapy Compass tool (#650), from a targeted bug-hunt over the module. Detail screen - Stop rendering `clinicalSummary` twice: it appeared in both the hero and a "Clinical snapshot" body row (every record has one, so it duplicated on 100% of pages). Dropped the redundant body row. - Make the quick tiles glance-sized (first sentence) so they no longer repeat the full body sections; the full text stays in the body. - Remove the rail's "Best used for" row — it was a verbatim copy of the "USE WHEN" tile. - Dedupe "Safety & cautions": `limitations` often repeats the tail of `contraindicationsOrCautions`, so only append it when it adds something new. - "When to use" shows `indications` rather than mirroring the tile fallback. Controls - Wire the Brief "Copy step" / "Copy intervention" buttons to the clipboard with transient feedback (shared `useClipboard` hook + `CheckIcon`). - Relabel the dead "Save set" (Compare) and "Save workflow" (Recommend) to working "Copy set" / "Copy shortlist" exports. - Remove non-functional placeholders that can't act in a client-only mockup: "Save draft" (Sheets), "Save brief" (Brief), "Filters" (Search, redundant with the always-visible chips). - Compare add-picker now disables and explains at the 4-therapy limit instead of silently no-op'ing. Consistency - Normalize `React.ReactNode` (UMD global) to `import type { ReactNode }` in the home/recommend/sheets screens, matching the rest of the module. Verified: typecheck, lint, prettier, and verify:cheap (2313 unit tests) green; Chromium walkthrough of Detail/Compare/Brief/Search with no console errors. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01TJaXJntdH7Q98ejoSZF46K --- src/components/therapy-compass/bindings.tsx | 2 +- src/components/therapy-compass/icons.tsx | 1 + .../therapy-compass/screens/brief-screen.tsx | 38 ++++++++++++----- .../screens/compare-screen.tsx | 41 +++++++++++++++---- .../therapy-compass/screens/detail-screen.tsx | 15 +++---- .../therapy-compass/screens/home-screen.tsx | 4 +- .../screens/recommend-screen.tsx | 38 ++++++++++++++--- .../therapy-compass/screens/search-screen.tsx | 6 +-- .../therapy-compass/screens/sheets-screen.tsx | 11 ++--- .../therapy-compass/use-clipboard.ts | 39 ++++++++++++++++++ 10 files changed, 148 insertions(+), 47 deletions(-) create mode 100644 src/components/therapy-compass/use-clipboard.ts diff --git a/src/components/therapy-compass/bindings.tsx b/src/components/therapy-compass/bindings.tsx index 9e95fc6db..31dc2dac4 100644 --- a/src/components/therapy-compass/bindings.tsx +++ b/src/components/therapy-compass/bindings.tsx @@ -16,7 +16,7 @@ import { import type { Pathway, ReferenceData, Therapy } from "./data/types"; const KNOWN_SCREENS = ["search", "detail", "compare", "recommend", "pathways", "brief", "home", "sheets"] as const; -const MAX_COMPARE = 4; +export const MAX_COMPARE = 4; type SheetSectionKey = "about" | "steps" | "practice" | "coping" | "contacts"; diff --git a/src/components/therapy-compass/icons.tsx b/src/components/therapy-compass/icons.tsx index 0b2606e7f..400fb504e 100644 --- a/src/components/therapy-compass/icons.tsx +++ b/src/components/therapy-compass/icons.tsx @@ -135,6 +135,7 @@ export const CopyIcon = makeIcon( , ); +export const CheckIcon = makeIcon(, 2); export const PrinterIcon = makeIcon( , ); diff --git a/src/components/therapy-compass/screens/brief-screen.tsx b/src/components/therapy-compass/screens/brief-screen.tsx index a624f6128..738a500a1 100644 --- a/src/components/therapy-compass/screens/brief-screen.tsx +++ b/src/components/therapy-compass/screens/brief-screen.tsx @@ -5,9 +5,10 @@ import { useMemo, useState } from "react"; import { useTcBindings } from "../bindings"; import { commandControl, outlineControl } from "../controls"; import { parseSteps, summarise } from "../data/select"; -import { AlertIcon, CopyIcon, ExternalLinkIcon, FileTextIcon, SaveIcon, SearchIcon } from "../icons"; +import { AlertIcon, CheckIcon, CopyIcon, ExternalLinkIcon, FileTextIcon, SearchIcon } from "../icons"; import { s } from "../style-utils"; import { LoadingState } from "../ui"; +import { useClipboard } from "../use-clipboard"; const CHECKLIST = [ "Confirm the primary problem", @@ -20,6 +21,7 @@ export function BriefScreen() { const b = useTcBindings(); const t = b.selectedTherapy; const [filter, setFilter] = useState(""); + const { copied, copy } = useClipboard(); const briefTherapies = useMemo( () => @@ -41,6 +43,20 @@ export function BriefScreen() { t.briefVersion : t.briefVersion; const steps = parseSteps(durationText, 6); + const interventionText = [ + `${t.name} — ${durationLabel} intervention`, + "", + ...steps.map((st, i) => `${i + 1}. ${st}`), + ...(t.clinicianScripts.length + ? [ + "", + "Clinician script:", + ...t.clinicianScripts + .slice(0, 2) + .map((c) => (c.scriptType ? `${c.scriptType}: ${c.body ?? ""}` : (c.body ?? ""))), + ] + : []), + ].join("\n"); return (
@@ -231,12 +247,13 @@ export function BriefScreen() { @@ -315,13 +332,14 @@ export function BriefScreen() {
- -
-
diff --git a/src/components/therapy-compass/screens/sheets-screen.tsx b/src/components/therapy-compass/screens/sheets-screen.tsx index 07a6d7593..7e9aad567 100644 --- a/src/components/therapy-compass/screens/sheets-screen.tsx +++ b/src/components/therapy-compass/screens/sheets-screen.tsx @@ -1,11 +1,10 @@ "use client"; -import { useMemo, useState } from "react"; +import { useMemo, useState, type ReactNode } from "react"; import { useTcBindings } from "../bindings"; -import { outlineControl } from "../controls"; import { parseSteps, searchTherapies } from "../data/select"; -import { ChevronDownIcon, PrinterIcon, SaveIcon, ScaleIcon, SearchIcon } from "../icons"; +import { ChevronDownIcon, PrinterIcon, ScaleIcon, SearchIcon } from "../icons"; import { s } from "../style-utils"; import { LoadingState } from "../ui"; @@ -44,10 +43,6 @@ export function SheetsScreen() {

-