diff --git a/mockups/README.md b/mockups/README.md index f2d3cc7ea..726846d13 100644 --- a/mockups/README.md +++ b/mockups/README.md @@ -2,6 +2,13 @@ This folder collects the current mockup files for the Clinical KB Database project in one place. +All remaining mockups use the Clinical White / Aegean Graphite role tokens (`--command`, `--clinical-accent`, `--success`) +from `docs/redesign/02-design-direction.md`. The design-exploration mockups that led to that theme served their purpose and +were removed in July 2026 so stale palettes do not mislead future design review (`answer-best-layout`, +`clinical-command-popup`, `compact-answer-entry-points`, `crisp-white-colour-system`, `evidence-option`, +`evidence-redesign`, `extended-menu-refined`, `final-rag-structure`, `premium-colour-system`, `rag-answer-responsive`, +`rag-answer-structure`, `safety-critical-redesign`, `safety-notes-triage-redesign`). + ## Included mockups - Medication prescribing now lives in the app at `/?mode=prescribing` and `/medications/acamprosate`. @@ -21,6 +28,9 @@ The runnable versions remain in the Next.js app route tree: - `/mockups/answer-evidence-popups` - `/mockups/mode-dropdown` - `/mockups/recent-searches-bottom` +- `/mockups/settings-search-general` +- `/mockups/settings-search-clinical` +- `/mockups/settings-search-privacy` Favourites now lives in the live dashboard flow at `/?mode=favourites`; `/mockups/favourites-hub` redirects there for old links. @@ -33,6 +43,3 @@ New runnable mockups under `src/app/mockups/*` inherit the shared Clinical KB he - Use `?mode=answer`, `?mode=documents`, `?mode=prescribing`, `?mode=evidence`, or `?mode=favourites` to preview the active search mode. - The bottom composer routes live searches to the dashboard with `mode`, `q`, and `run=1`; New chat routes to `/?mode=answer&focus=1`. - If a future mockup must be standalone, move it outside the `/mockups` route shell or add an explicit opt-out route group before implementing it. -- `/mockups/settings-search-general` -- `/mockups/settings-search-clinical` -- `/mockups/settings-search-privacy` diff --git a/mockups/answer-evidence-popups/page.tsx b/mockups/answer-evidence-popups/page.tsx index cacda1185..8fce521c1 100644 --- a/mockups/answer-evidence-popups/page.tsx +++ b/mockups/answer-evidence-popups/page.tsx @@ -46,7 +46,7 @@ const tableRows = [ ] as const; const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; + "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-accent)]"; function Shell({ children }: { children: ReactNode }) { return ( @@ -129,7 +129,7 @@ function Action({ children, primary = false }: { children: ReactNode; primary?: className={ primary ? `${baseClass} bg-[color:var(--primary)] text-[color:var(--primary-contrast)] shadow-[var(--shadow-tight)]` - : `${baseClass} border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text)] shadow-[var(--shadow-inset)] hover:border-[color:var(--clinical-chat-teal)]/35` + : `${baseClass} border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text)] shadow-[var(--shadow-inset)] hover:border-[color:var(--clinical-accent)]/35` } > {children} @@ -142,7 +142,7 @@ function CloseButton({ label = "Close popup" }: { label?: string }) { @@ -155,10 +155,10 @@ function SourceCapsule() { type="button" aria-haspopup="dialog" aria-expanded="true" - className={`mt-2 inline-flex min-h-10 max-w-full items-center gap-2 rounded-full border border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] px-3 py-1 text-xs font-semibold text-[color:var(--clinical-chat-teal)] shadow-[var(--shadow-inset)] transition hover:-translate-y-px hover:border-[color:var(--clinical-chat-teal)]/45 hover:shadow-[var(--shadow-tight)] ${focusRing}`} + className={`mt-2 inline-flex min-h-10 max-w-full items-center gap-2 rounded-full border border-[color:var(--clinical-accent)]/25 bg-[color:var(--clinical-accent-soft)] px-3 py-1 text-xs font-semibold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] transition hover:-translate-y-px hover:border-[color:var(--clinical-accent)]/45 hover:shadow-[var(--shadow-tight)] ${focusRing}`} > Source-backed - + 3 @@ -173,7 +173,7 @@ function SourceRows() {
-
+
“Monitor FBC/ANC, myocarditis symptoms, metabolic risk, constipation, and shared-care communication during clozapine initiation.”
@@ -279,8 +279,8 @@ function EvidenceTabs({ selected }: { selected: string }) { aria-selected={active} className={`inline-flex min-h-10 max-w-[8rem] items-center gap-1.5 rounded-full border px-2.5 text-xs font-semibold leading-none transition hover:-translate-y-px hover:shadow-[var(--shadow-tight)] ${focusRing} sm:min-h-11 sm:max-w-none sm:px-3 ${ active - ? "border-[color:var(--clinical-chat-teal)] bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)] shadow-[var(--shadow-inset)]" - : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:border-[color:var(--clinical-chat-teal)]/35 hover:bg-[color:var(--surface-raised)]" + ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]" + : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:border-[color:var(--clinical-accent)]/35 hover:bg-[color:var(--surface-raised)]" }`} > @@ -350,7 +350,7 @@ function TablePreview({ expanded = false }: { expanded?: boolean }) { @@ -442,7 +442,7 @@ function QuoteCards() {

Exact quote

{item === 1 ? "p.12" : "p.14"} -
+
“FBC/ANC monitoring, myocarditis symptoms, metabolic review and constipation prevention should be checked during initiation and ongoing care.”
@@ -477,7 +477,7 @@ function ImageEvidence() { >
- + p.14
@@ -498,7 +498,7 @@ function PdfLinks() { - ); -} - -function ActionRow() { - return ( -
- - -
- ); -} - -function PanelCard({ - icon, - title, - meta, - children, - accent = "teal", -}: { - icon: ReactNode; - title: string; - meta: string; - children?: ReactNode; - accent?: "teal" | "amber" | "red" | "slate"; -}) { - return ( - - ); -} - -function ClinicalTriageSummary() { - return ( -
- - 1 urgent - - - 2 caution - - - 3 monitor - -
- ); -} - -function SafetyInlineNotice() { - return ( -
-
- - - -
-

- Safety check needed before applying this. -

-

- Dose and frequency should be checked against renal function, serum level timing, and local protocol. -

-
-
-
- ); -} - -function AnswerContent({ compact = false }: { compact?: boolean }) { - return ( -
-
-

lithium dose in adults

-

9:14 AM

-
- -
-
- - - -
-

- For lithium, twice daily dosing is usually spaced by 12 hours. In acute mania, guidance commonly targets - 0.8-1.2 mmol/L; dose and frequency should be adjusted to response, serum level timing, renal function, and - local protocol. -

-
- -
-
-
- -
- -
- -
- -
- -
- } - title="Clinical notes" - meta="6 notes - source-backed" - > - - - } - title="Evidence" - meta="4 sources - quotes - source map - gaps" - /> -
-
-
- ); -} - -function PhoneMockup() { - return ( -
-
-
-
- -
-

Mode

-

Answer

-
- -
-
-
- -
-
-
- + - lithium dose in adults - -
-
-
- ); -} - -function DesktopMockup() { - return ( -
-
-
- - - -
-

Clinical KB

-

Answer mode

-
-
-
- - -
-
-
- -
-
- ); -} - -function RecommendationStrip() { - return ( -
-
-

Answer

-

- Direct clinical text, source pill, and actions only. -

-
-
-

Clinical notes

-

- Monitoring plus safety triage: urgent, caution, monitor. -

-
-
-

Evidence

-

- Detailed source audit, quotes, gaps, and governance checks. -

-
-
- ); -} - -export default function AnswerBestLayoutPage() { - return ( -
- -
-
-
-
-
- - - -

- Recommended answer layout -

-
-

- Clean chat, clinical triage, evidence audit -

-

- This replaces the long inline safety-critical source block with a compact safety review inside Clinical - notes and keeps detailed source material in Evidence. -

-
- -
-
- -
-
-

Mockup

-

Recommended final structure

-

- Phone shows the chat flow only. Desktop shows the same answer layout with more breathing room and the same - compact cards. -

-
-
-
-

Phone

- -
-
-

- Desktop -

- -
-
-
-
-
- ); -} diff --git a/src/app/mockups/answer-evidence-popups/page.tsx b/src/app/mockups/answer-evidence-popups/page.tsx index cacda1185..8fce521c1 100644 --- a/src/app/mockups/answer-evidence-popups/page.tsx +++ b/src/app/mockups/answer-evidence-popups/page.tsx @@ -46,7 +46,7 @@ const tableRows = [ ] as const; const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; + "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-accent)]"; function Shell({ children }: { children: ReactNode }) { return ( @@ -129,7 +129,7 @@ function Action({ children, primary = false }: { children: ReactNode; primary?: className={ primary ? `${baseClass} bg-[color:var(--primary)] text-[color:var(--primary-contrast)] shadow-[var(--shadow-tight)]` - : `${baseClass} border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text)] shadow-[var(--shadow-inset)] hover:border-[color:var(--clinical-chat-teal)]/35` + : `${baseClass} border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text)] shadow-[var(--shadow-inset)] hover:border-[color:var(--clinical-accent)]/35` } > {children} @@ -142,7 +142,7 @@ function CloseButton({ label = "Close popup" }: { label?: string }) { @@ -155,10 +155,10 @@ function SourceCapsule() { type="button" aria-haspopup="dialog" aria-expanded="true" - className={`mt-2 inline-flex min-h-10 max-w-full items-center gap-2 rounded-full border border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] px-3 py-1 text-xs font-semibold text-[color:var(--clinical-chat-teal)] shadow-[var(--shadow-inset)] transition hover:-translate-y-px hover:border-[color:var(--clinical-chat-teal)]/45 hover:shadow-[var(--shadow-tight)] ${focusRing}`} + className={`mt-2 inline-flex min-h-10 max-w-full items-center gap-2 rounded-full border border-[color:var(--clinical-accent)]/25 bg-[color:var(--clinical-accent-soft)] px-3 py-1 text-xs font-semibold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] transition hover:-translate-y-px hover:border-[color:var(--clinical-accent)]/45 hover:shadow-[var(--shadow-tight)] ${focusRing}`} > Source-backed - + 3 @@ -173,7 +173,7 @@ function SourceRows() {
-
+
“Monitor FBC/ANC, myocarditis symptoms, metabolic risk, constipation, and shared-care communication during clozapine initiation.”
@@ -279,8 +279,8 @@ function EvidenceTabs({ selected }: { selected: string }) { aria-selected={active} className={`inline-flex min-h-10 max-w-[8rem] items-center gap-1.5 rounded-full border px-2.5 text-xs font-semibold leading-none transition hover:-translate-y-px hover:shadow-[var(--shadow-tight)] ${focusRing} sm:min-h-11 sm:max-w-none sm:px-3 ${ active - ? "border-[color:var(--clinical-chat-teal)] bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)] shadow-[var(--shadow-inset)]" - : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:border-[color:var(--clinical-chat-teal)]/35 hover:bg-[color:var(--surface-raised)]" + ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]" + : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:border-[color:var(--clinical-accent)]/35 hover:bg-[color:var(--surface-raised)]" }`} > @@ -350,7 +350,7 @@ function TablePreview({ expanded = false }: { expanded?: boolean }) { @@ -442,7 +442,7 @@ function QuoteCards() {

Exact quote

{item === 1 ? "p.12" : "p.14"}
-
+
“FBC/ANC monitoring, myocarditis symptoms, metabolic review and constipation prevention should be checked during initiation and ongoing care.”
@@ -477,7 +477,7 @@ function ImageEvidence() { >
- + p.14
@@ -498,7 +498,7 @@ function PdfLinks() { - ); -} - -function AppChrome() { - return ( -
-
- -
- - - - - - Mode - - Answer - - -
-
- Clinical KB - -
-
- -
- - -
-
-
-

lithium

-

9:14 AM

-
-
- - - -
-

- Lithium Carbonate 250 mg Tablet - Lithicarb.{" "} - Lithium Carbonate 450 mg Modified Release Tablet - Quilonum SR. Lithium monitoring - baseline tests should be reviewed before prescribing. -

- -
-
- -
- - -
-
-
- -
-
-
- ); -} - -function TabButton({ tab, active, onClick }: { tab: (typeof tabs)[number]; active: boolean; onClick: () => void }) { - const Icon = tab.icon; - return ( - - ); -} - -function FindingRow({ - finding, - expanded, - onClick, -}: { - finding: (typeof findings)[number]; - expanded: boolean; - onClick: () => void; -}) { - const Icon = finding.icon; - return ( -
- - {expanded ? ( -
-
-

{finding.detail}

-
- {finding.facts.map(([label, value]) => ( -
-
{label}
-
{value}
-
- ))} -
-
- - - - - - - - - {tableRows.map(([phase, action]) => ( - - - - - ))} - -
- Phase - Action
{phase}{action}
-
-
-
- ) : null} -
- ); -} - -function Checklist({ checked, onToggle }: { checked: Set; onToggle: (index: number) => void }) { - return ( -
-
-

Checklist

-

{checked.size} of 4 selected

-
-
- {checklistItems.map(([title, detail], index) => { - const selected = checked.has(index); - return ( - - ); - })} -
-
- ); -} - -function CommandPopup() { - const [tab, setTab] = useState("safety"); - const [expanded, setExpanded] = useState("fbc"); - const [checked, setChecked] = useState>(new Set([0])); - const activeFinding = useMemo(() => findings.find((finding) => finding.id === expanded) ?? findings[0], [expanded]); - - function toggleCheck(index: number) { - setChecked((current) => { - const next = new Set(current); - if (next.has(index)) next.delete(index); - else next.add(index); - return next; - }); - } - - return ( -
-
-
-
- - - -
-
-

- Clinical notes -

- - 5 - -
-

- Source-backed - one item expanded -

-
- - - Source-backed - - - - -
- -
- -
-
-
-
-

- High-yield safety actions -

- -
- -
- {findings.map((finding) => ( - setExpanded(finding.id)} - /> - ))} -
- - {(tab === "checklist" || tab === "safety") && } -
- - -
-
- -
- - - -
-
- ); -} - -export default function ClinicalCommandPopupMockupPage() { - return ( -
- -
- -
- ); -} diff --git a/src/app/mockups/compact-answer-entry-points/page.tsx b/src/app/mockups/compact-answer-entry-points/page.tsx deleted file mode 100644 index d20539dda..000000000 --- a/src/app/mockups/compact-answer-entry-points/page.tsx +++ /dev/null @@ -1,401 +0,0 @@ -import { - AlertTriangle, - BookOpen, - ChevronDown, - ClipboardCheck, - Copy, - ExternalLink, - Layers, - ShieldCheck, - Stethoscope, - X, -} from "lucide-react"; -import type { ReactNode } from "react"; - -const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -function IconTile({ children, tone = "teal" }: { children: ReactNode; tone?: "teal" | "amber" | "red" | "slate" }) { - const toneClass = - tone === "red" - ? "border-red-200 bg-red-50 text-red-600" - : tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-700" - : tone === "slate" - ? "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]" - : "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]"; - - return ( - - {children} - - ); -} - -function Pill({ children, tone = "neutral" }: { children: ReactNode; tone?: "neutral" | "teal" | "amber" | "red" }) { - const toneClass = - tone === "red" - ? "border-red-200 bg-red-50 text-red-700" - : tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-700" - : tone === "teal" - ? "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]" - : "border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)]"; - - return ( - - {children} - - ); -} - -function SourceBadge() { - return ( - - ); -} - -function ActionButton({ children, primary = false }: { children: ReactNode; primary?: boolean }) { - return ( - - ); -} - -function EntryCard({ - icon, - title, - meta, - children, -}: { - icon: ReactNode; - title: string; - meta: string; - children?: ReactNode; -}) { - return ( - - ); -} - -function AnswerContent({ compact = false }: { compact?: boolean }) { - return ( -
-
-

lithium dose in adults

-

9:14 AM

-
- -
- - - -
-

- For lithium, twice daily dosing is usually spaced by 12 hours. Dose and target level should be adjusted to - indication, serum-level timing, renal function, interacting medicines, and local protocol. -

- -
- -
-
-
- - - -
-

Urgent safety check

-

- Escalate if toxicity symptoms, dehydration, or AKI are present. -

-
-
-
-
- } - title="Clinical notes" - meta="6 notes ยท 1 escalate ยท 2 caution ยท 3 monitor" - > -
- Escalate - Caution - Monitor -
- - } title="Evidence" meta="Partial support ยท 2 quotes ยท 1 gap"> -
- Partial - Claim map - Quotes -
- -
-
-
-
- ); -} - -function SourcesPopover() { - return ( -
-
-
-

Sources behind this answer

-

Fast provenance only. Open PDFs here.

-
- 4 sources -
-
- {[ - ["Lithium Clinical Guideline", "p.3 ยท current ยท 92%"], - ["Lithium Therapy Guideline", "p.5 ยท direct ยท 84%"], - ["Bipolar disorder in adults", "p.87 ยท related ยท 76%"], - ].map(([title, meta]) => ( -
- - - {title} - {meta} - - -
- ))} -
-
- ); -} - -function ClinicalNotesSheet() { - return ( -
-
-
-
- - - -
-

Clinical notes

-

Safety is triaged here

-
-
- -
-
- Escalate 1 - Caution 2 - Monitor 3 -
-
-
-

Escalate

-

- Possible lithium toxicity or AKI -

-
-
-

Caution

-

- Renal impairment, dehydration, interacting medicines -

-
-
-

- Monitor -

-

- Level timing, renal function, thyroid function -

-
-
-
- ); -} - -function DesktopMockup() { - return ( -
-
-
- - - -
-

Clinical KB

-

Answer mode

-
-
- New chat -
-
-
- -
- -
-
- ); -} - -function PhoneMockup() { - return ( -
-
-
- -
-

Mode

-

Answer

-
- -
-
- - -
-
- ); -} - -function PageHeader() { - return ( -
-
-
-
- - - -

- Proposed answer layout -

-
-

- Compact sources, focused panels -

-

- Sources stays as the compact badge under the answer. Clinical notes and Evidence remain inline entry cards; - detailed content opens in sheets or drawers. -

-
-
-

- Safety-critical decision -

-
- Urgent banner - Escalate in notes - No standalone section -
-
-
-
- ); -} - -export default function CompactAnswerEntryPointsPage() { - return ( -
- -
- -
-
-
-

Recommended interaction model

- No top-level mobile tabs -
-

- The chat stream stays linear and compact. Tabs/segmented controls only appear inside opened sheets, such - as Clinical notes triage or Evidence audit. -

-
-
-
-

PC

- -
-
-

- Small phone -

- -
-
-
-
-
- ); -} diff --git a/src/app/mockups/crisp-white-colour-system/page.tsx b/src/app/mockups/crisp-white-colour-system/page.tsx deleted file mode 100644 index 0ce73271a..000000000 --- a/src/app/mockups/crisp-white-colour-system/page.tsx +++ /dev/null @@ -1,1345 +0,0 @@ -import { - BookOpen, - CheckCircle2, - ChevronDown, - FileText, - MessageSquare, - MessageSquarePlus, - Mic, - MoreHorizontal, - Search, - Send, - ShieldCheck, - Sparkles, - Stethoscope, - UploadCloud, -} from "lucide-react"; -import type { CSSProperties, ReactNode } from "react"; - -type TokenName = - | "canvas" - | "rail" - | "paper" - | "raised" - | "inset" - | "line" - | "lineStrong" - | "ink" - | "graphite" - | "muted" - | "soft" - | "teal" - | "tealSoft" - | "blue" - | "amber" - | "red"; - -const tokens: Record = { - canvas: "#FFFFFF", - rail: "#F7F8FA", - paper: "#FFFFFF", - raised: "#FCFCFD", - inset: "#F1F3F5", - line: "#E5E7EB", - lineStrong: "#D0D5DD", - ink: "#101418", - graphite: "#111827", - muted: "#475467", - soft: "#667085", - teal: "#0B7A75", - tealSoft: "#E6F7F5", - blue: "#2563EB", - amber: "#A15C07", - red: "#B42318", -}; - -const darkTokens = { - canvas: "#070808", - rail: "#0D0F10", - paper: "#111315", - raised: "#171A1D", - line: "rgba(255,255,255,0.09)", - ink: "#F5F7F7", - muted: "#A7B0AD", - teal: "#4CCFD0", - tealSoft: "#12383B", -}; - -const swatches: Array<[string, TokenName]> = [ - ["Canvas", "canvas"], - ["Rail", "rail"], - ["Graphite", "graphite"], - ["Ink", "ink"], - ["Teal", "teal"], - ["Amber", "amber"], - ["Red", "red"], - ["Line", "line"], -]; - -function CssVars({ children }: { children: ReactNode }) { - return ( -
- {children} -
- ); -} - -function Swatch({ label, token }: { label: string; token: TokenName }) { - return ( -
- - - {label} - {tokens[token]} - -
- ); -} - -function Sidebar() { - const tools = [ - { label: "Answer", icon: Sparkles, active: true }, - { label: "Documents", icon: FileText }, - { label: "Medication", icon: Stethoscope }, - { label: "Upload", icon: UploadCloud }, - ]; - - return ( - - ); -} - -function Header() { - return ( -
- - -
- - -
-
- ); -} - -function Workspace() { - return ( -
-
-
-
- - - -

Clinical White

-

How can I help?

-

Ask a clinical question, search documents, or start from a verified source.

-
- -
- - - -
- -
-
- - - Evidence-backed answer - - 3 verified sources -
-

- The answer area stays white and readable. The teal focus rail marks clinical confidence without tinting the - whole interface. -

-
- Guideline - Local PDF - Review due -
-
-
- -
- - Ask Clinical Guide - - -
-
- ); -} - -function DesktopMockup() { - return ( - -
-
-
-

Desktop mockup

-

Crisp white workspace

-
- Recommended -
-
- - -
-
- - ); -} - -function MobileMockup() { - return ( - -
-
-
-

Mobile mockup

-

White canvas, compact controls

-
- 390px check -
-
-
-
-
-
- - - -

How can I help?

-

Ask or search verified sources.

-
-
- - Ask a question - Clean white card with a teal focus rail. -
-
- - Search documents - Cool grey field, no cream wash. -
-
-
- - - Sources ready - -
-

White answer surface. Teal appears only where the user needs evidence state.

-
-
-
- - Ask Clinical Guide - -
-
-
-
- - ); -} - -function DarkPairing() { - return ( -
-
-
-

Dark pairing check

-

Obsidian stays polished

-
- No white glare -
-
-
-
- ); -} - -export default function CrispWhiteColourSystemPage() { - return ( -
- - -
-

Clean colour-system mockups

-

Clinical White: crisp white canvas, graphite command, precise teal signals.

-

- This direction removes the cream background entirely. The UI becomes a true white workspace with cool nickel - borders, low graphite elevation, and a clinical focus rail so teal communicates evidence instead of tinting - the whole product. -

-
-
- White first - Canvas and answer surfaces stay pure white for a cleaner premium read. -
-
- Graphite commands - Primary actions use graphite so teal can keep clinical meaning. -
-
- Nickel hierarchy - Depth comes from borders, shadow discipline, and rail separation. -
-
- Teal rail - Selected and evidence states use a precise 2px clinical focus rail. -
-
-
- - -
- {swatches.map(([label, token]) => ( - - ))} -
- - -
- - - -
-
- ); -} diff --git a/src/app/mockups/evidence-option/page.tsx b/src/app/mockups/evidence-option/page.tsx deleted file mode 100644 index 5b459ab0c..000000000 --- a/src/app/mockups/evidence-option/page.tsx +++ /dev/null @@ -1,792 +0,0 @@ -import Image from "next/image"; -import type { Metadata } from "next"; -import { - Activity, - BadgeCheck, - BookOpen, - Check, - ChevronDown, - ChevronRight, - ClipboardCheck, - Copy, - ExternalLink, - FileImage, - FileSearch, - FileText, - Filter, - Image as ImageIcon, - Layers3, - Link2, - Menu, - Mic, - Plus, - Quote, - Search, - Send, - ShieldCheck, - Table2, - X, - type LucideIcon, -} from "lucide-react"; -import type { ReactNode } from "react"; - -export const metadata: Metadata = { - title: "Evidence Option Mockups - Clinical KB", - description: "Premium Clinical KB evidence mockups for desktop and mobile.", -}; - -type EvidenceObject = { - title: string; - type: "Table" | "Quote" | "Image" | "PDF region"; - source: string; - page: string; - support: string; - detail: string; - icon: LucideIcon; -}; - -const objects: EvidenceObject[] = [ - { - title: "ANC monitoring frequency table", - type: "Table", - source: "Clozapine physical health protocol", - page: "p.12", - support: "97% direct", - detail: "Baseline checks, weekly cadence, and escalation thresholds.", - icon: Table2, - }, - { - title: "Constipation escalation passage", - type: "Quote", - source: "Clozapine safety bulletin", - page: "p.4", - support: "Exact quote", - detail: "Same-day review wording for severe constipation symptoms.", - icon: Quote, - }, - { - title: "Observation pathway crop", - type: "Image", - source: "Acute behavioural disturbance pathway", - page: "p.8", - support: "Visual evidence", - detail: "Flow diagram, labels, and adjacent explanatory text.", - icon: FileImage, - }, -]; - -const objectCounts = [ - ["Tables", "621", Table2], - ["Quotes", "8,904", Quote], - ["Images", "2,840", ImageIcon], - ["PDF regions", "4,221", FileSearch], - ["Documents", "1,834", FileText], -] as const; - -const tableRows = [ - ["Baseline", "FBC, LFT, U&E, lipids, glucose", "Before initiation"], - ["Weekly", "FBC/ANC", "Initial titration"], - ["Escalate", "Chest pain, fever, constipation", "Urgent review"], -] as const; - -const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"; - -function cn(...classes: Array) { - return classes.filter(Boolean).join(" "); -} - -function IconTile({ icon: Icon, strong = false }: { icon: LucideIcon; strong?: boolean }) { - return ( - - - - ); -} - -function Pill({ - children, - active = false, - tone = "neutral", -}: { - children: ReactNode; - active?: boolean; - tone?: "neutral" | "success" | "warning"; -}) { - return ( - - {children} - - ); -} - -function ActionButton({ - children, - icon: Icon, - primary = false, -}: { - children: ReactNode; - icon: LucideIcon; - primary?: boolean; -}) { - return ( - - ); -} - -function Composer({ placeholder = "Ask a clinical question..." }: { placeholder?: string }) { - return ( -
- - - {placeholder} - - - -
- ); -} - -function DesktopChrome({ children, mode = "Evidence" }: { children: ReactNode; mode?: string }) { - return ( -
-
- -
- - - - - - Mode - - {mode} - - -
-
- - - - AK - -
-
-
- -
- {children} -
- -
-
-
-
- ); -} - -function PhoneChrome({ children, sheet = false }: { children: ReactNode; sheet?: boolean }) { - return ( -
-
- -
- - - - - - Mode - - Evidence - - -
- -
-
- {children} -
-
- -
-
- ); -} - -function MockupPair({ - id, - title, - description, - desktop, - phone, -}: { - id: string; - title: string; - description: string; - desktop: ReactNode; - phone: ReactNode; -}) { - return ( -
-
-
-

Evidence option

-

{title}

-

{description}

-
- PC + phone -
-
- {desktop} -
{phone}
-
-
- ); -} - -function EvidenceObjectRow({ item, selected = false }: { item: EvidenceObject; selected?: boolean }) { - const Icon = item.icon; - return ( -
- -
-
-

{item.title}

- {item.type} -
-

- {item.source} - {item.page} - {item.support} -

-

{item.detail}

-
- -
- ); -} - -function EvidenceHomeDesktop() { - return ( - -
- -

Evidence

-

- Find, inspect, and reuse exact tables, images, quotes, PDF regions, and document spans. -

-
- {[ - ["Search evidence objects", "Search every extracted table, quote, figure, and page region", Search], - ["Review recent evidence", "Continue checking the objects used in recent answers", ClipboardCheck], - ["Open source map", "Follow an evidence object back through document, section, and page", Link2], - ].map(([title, body, Icon]) => ( -
- -
-

{title as string}

-

{body as string}

-
- -
- ))} -
-
- {objectCounts.slice(0, 3).map(([label, count, Icon]) => ( -
-
- - {count} -
-

{label}

-
- ))} -
-
- - ); -} - -function EvidenceHomePhone() { - return ( - -
- -

Evidence

-

Open the exact object behind an answer.

-
- {[ - ["Search evidence", Search], - ["Recent objects", ClipboardCheck], - ["Source map", Link2], - ].map(([label, Icon]) => ( -
- -

{label as string}

- -
- ))} -
-
-

Recent

-

ANC monitoring frequency table

-

p.12 - 97% direct

-
-
- - ); -} - -function EvidenceSearchDesktop() { - return ( - -
-
-
- - - clozapine constipation monitoring table - - -
-
- All objects - Tables - Quotes - Images - Reviewed only -
-
- {objects.map((item, index) => ( - - ))} -
-
-

Source trail

-
- Clozapine protocol - - Monitoring - - Table 2 -
-
-
- -
- - ); -} - -function EvidenceSearchPhone() { - return ( - -
-
- - clozapine table -
-
- {objects.slice(0, 2).map((item) => ( - - ))} -
-
-
- -
- -
-

ANC monitoring table

-

p.12 - 97% direct

-
- -
-
- {tableRows.map(([stage, evidence]) => ( -
- - {stage} - - {evidence} -
- ))} -
-
- Open - - Copy - -
-
- - ); -} - -function EvidenceDetailDesktop() { - return ( - -
-
-
-
-
- -
-

- Constipation escalation passage -

-

- Clozapine safety bulletin - p.4 - exact extracted quote -

-
-
- - Reviewed - -
-
- Quote - Table - Image - PDF region - Document context -
-
-
-
-
-
- "Patients reporting severe constipation, abdominal pain, vomiting, or reduced bowel motions - require same-day clinical review." -
-
- Direct wording used in answer support. -
-
-
-

- Citation packet -

-
- {["Document", "Page", "Section", "Quote span", "Reviewed"].map((item) => ( -
- {item} - -
- ))} -
-
-
-
-
- Clozapine monitoring table evidence crop -

Linked table

-
-
- Risk flow evidence image crop -

Linked image

-
-
-

Document context

-

- Previous and next paragraphs retained with page coordinates. -

-
-
-
-
-
- - ); -} - -function EvidenceDetailPhone() { - return ( - -
-

Clozapine evidence

-
- {objects.map((item) => ( - - ))} -
-
-
-
- -
- -
-

- Constipation escalation passage -

-

Exact quote - p.4

-
- -
-
- Quote - Image - Context -
-
-
-
-
- "Patients reporting severe constipation, abdominal pain, vomiting, or reduced bowel motions require - same-day clinical review." -
-
-
- Risk flow evidence image crop -
-
-
- Open - - Copy quote - -
-
- - ); -} - -export default function EvidenceOptionMockupsPage() { - return ( -
-
-
-
-
-
- -

- Clinical KB evidence option -

-
-

- Premium evidence mockups -

-

- Three product-native mockups for evidence home, evidence search, and individual evidence review. Each - pairs the PC layout with the phone bottom-sheet treatment. -

-
-
- Source-backed - Tables - Images - Quotes -
-
-
- - } - phone={} - /> - - } - phone={} - /> - - } - phone={} - /> -
-
- ); -} diff --git a/src/app/mockups/evidence-redesign/page.tsx b/src/app/mockups/evidence-redesign/page.tsx deleted file mode 100644 index 32d381f33..000000000 --- a/src/app/mockups/evidence-redesign/page.tsx +++ /dev/null @@ -1,700 +0,0 @@ -import { - AlertTriangle, - BookOpen, - CheckCircle2, - ClipboardCheck, - Copy, - ExternalLink, - FileText, - Filter, - Layers, - Link2, - ListChecks, - Quote, - Search, - Target, - X, -} from "lucide-react"; -import type { ReactNode } from "react"; - -const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -const sources = [ - { - title: "Synthetic lithium monitoring protocol", - meta: "p.1 - moderate support", - excerpt: - "Escalate review when vomiting, diarrhoea, dehydration, acute kidney injury, interacting medicines, tremor, confusion, or ataxia are present.", - status: "Direct", - tone: "good", - }, - { - title: "Lithium toxicity safety-net", - meta: "p.1 - direct quote", - excerpt: "Lithium levels are checked 5 to 7 days after initiation or dose change, then repeated until stable.", - status: "Direct", - tone: "good", - }, - { - title: "Local source status", - meta: "governance check", - excerpt: "Source status is unknown and the document has not been locally validated.", - status: "Caution", - tone: "warn", - }, -] as const; - -const evidenceStats = [ - ["Support", "Partial"], - ["Sources", "2"], - ["Quotes", "2"], - ["Gaps", "1"], -] as const; - -function IconTile({ children, tone = "teal" }: { children: ReactNode; tone?: "teal" | "amber" | "green" | "slate" }) { - const toneClass = - tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-700" - : tone === "green" - ? "border-emerald-200 bg-emerald-50 text-emerald-700" - : tone === "slate" - ? "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]" - : "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]"; - - return ( - - {children} - - ); -} - -function Pill({ children, tone = "neutral" }: { children: ReactNode; tone?: "neutral" | "teal" | "amber" | "green" }) { - const toneClass = - tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-700" - : tone === "green" - ? "border-emerald-200 bg-emerald-50 text-emerald-700" - : tone === "teal" - ? "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]" - : "border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)]"; - - return ( - - {children} - - ); -} - -function ActionButton({ children, primary = false }: { children: ReactNode; primary?: boolean }) { - const baseClass = `inline-flex min-h-10 items-center justify-center gap-2 rounded-md px-3 text-xs font-semibold transition hover:-translate-y-px hover:shadow-[var(--shadow-tight)] active:translate-y-0 ${focusRing} [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0`; - return ( - - ); -} - -function PageHeader() { - return ( -
-
-
-
- - - -

- Evidence redesign -

-
-

- Evidence without the clutter -

-

- Three refined directions for the Evidence surface: source-first, support-first, and map-first. Each keeps - the important audit information visible without turning the answer into a dense dashboard. -

-
-
-

Design rule

-
- Sources first - Support visible - Gaps separated -
-
-
-
- ); -} - -function MockupPair({ - title, - body, - recommended = false, - children, -}: { - title: string; - body: string; - recommended?: boolean; - children: ReactNode; -}) { - return ( -
-
-
-

{title}

- {recommended ? Recommended : null} -
-

{body}

-
-
{children}
-
- ); -} - -function MockupFrame({ label, children }: { label: string; children: ReactNode }) { - const frameClass = label === "Desktop" ? "hidden min-w-0 overflow-hidden md:block" : "min-w-0 overflow-hidden"; - return ( -
-

{label}

-
{children}
-
- ); -} - -function PhoneShell({ children }: { children: ReactNode }) { - return ( -
-
- {children} -
- ); -} - -function DesktopShell({ children }: { children: ReactNode }) { - return ( -
- {children} -
- ); -} - -function EvidenceHeader({ compact = false }: { compact?: boolean }) { - return ( -
-
-
-
- - - -
-

Evidence

-

2 sources - 2 quotes - 1 gap

-
-
- {compact ? null : ( -

- Check source support, exact passages, and gaps before relying on the answer. -

- )} -
- -
-
- ); -} - -function StatStrip({ compact = false }: { compact?: boolean }) { - return ( -
- {evidenceStats.map(([label, value]) => ( -
-

{label}

-

{value}

-
- ))} -
- ); -} - -function SourceCard({ source, dense = false }: { source: (typeof sources)[number]; dense?: boolean }) { - const tone = source.tone === "warn" ? "amber" : "green"; - return ( -
-
- -
-

{source.title}

-

{source.meta}

-
- {source.status} -
-

- {source.excerpt} -

-
- - -
-
- ); -} - -function ReviewPanel() { - return ( -
-
-
-

Answer review

-

- Mark what needs attention without changing the answer. -

-
- - - Reviewed - -
-
- - - Verified - - - - Needs correction - - - - Missing source - -
-
- ); -} - -function TabRow({ compact = false }: { compact?: boolean }) { - const tabs = [ - ["Sources", "2", Layers], - ["Map", "2", BookOpen], - ["Quotes", "2", Quote], - ["Gaps", "1", AlertTriangle], - ] as const; - return ( -
-
- {tabs.map(([label, count, Icon], index) => ( - - ))} -
-
- ); -} - -function VariantOnePhone() { - return ( - - -
- - -
- {sources.slice(0, 2).map((source) => ( - - ))} -
- -
- - ); -} - -function VariantOneDesktop() { - return ( - -
- -
-
-
-
-

Source-first audit

-

Review the passages that support the answer.

-
- - - Copy evidence - -
-
-
- {sources.map((source) => ( - - ))} - -
-
- - - Open PDF - - - - Scope document - -
-
-
- - ); -} - -function SupportScale() { - return ( -
-
-
-

Support

-

Partial

-
- - - -
-
- - - -
-

- Direct sources support the safety-netting answer, but local validation status is unknown. -

-
- ); -} - -function CompactEvidenceRow({ icon, title, body }: { icon: ReactNode; title: string; body: string }) { - return ( -
- {icon} -
-

{title}

-

{body}

-
-
- ); -} - -function VariantTwoPhone() { - return ( - - -
- - } - title="Sources" - body="2 relevant passages from the lithium protocol." - /> - } - title="Quotes" - body="2 short source excerpts available for checking wording." - /> - } - title="Gap" - body="Local validation status is unknown; verify before clinical reliance." - /> - - - Open source review - -
- - ); -} - -function VariantTwoDesktop() { - return ( - -
- -
- -
- } - title="Source support" - body="2 source passages directly support the answer's monitoring and toxicity safety-netting statements." - /> - } - title="Exact quotes" - body="Short excerpts are shown only when needed; the default view avoids a wall of text." - /> - } - title="Governance gap" - body="The source is not locally validated. Show the warning clearly, but keep it separate from the evidence itself." - /> - } - title="Clinician action" - body="Open the source PDF, scope to the document, or mark the evidence as verified/corrected." - /> -
-
-
- - - Sources - - - - Mark reviewed - -
-
- - ); -} - -function MapNode({ title, body, tone = "teal" }: { title: string; body: string; tone?: "teal" | "amber" | "green" }) { - return ( -
-
- -

{title}

-
-

{body}

-
- ); -} - -function VariantThreePhone() { - return ( - - -
-
-
- - - -
-

- Evidence map -

-

Answer to source

-
-
-
- -
- -
- -
- - ); -} - -function VariantThreeDesktop() { - return ( - -
- -
-
-
-
-

Evidence map

-

- Trace each important answer claim back to its support. -

-
- - 2 mapped claims - -
-
- - - - - - -
-
- -
-
- - ); -} - -export default function EvidenceRedesignPage() { - return ( -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- ); -} diff --git a/src/app/mockups/extended-menu-refined/page.tsx b/src/app/mockups/extended-menu-refined/page.tsx deleted file mode 100644 index aa80cf21e..000000000 --- a/src/app/mockups/extended-menu-refined/page.tsx +++ /dev/null @@ -1,322 +0,0 @@ -import { - Check, - FileText, - Filter, - GitBranch, - Globe2, - ListChecks, - Menu, - Mic, - Plus, - Quote, - Search, - Send, - ShieldCheck, - Sparkles, - Table2, - Wrench, -} from "lucide-react"; -import type { ReactNode } from "react"; - -const navy = "#070f4d"; -const teal = "#007f78"; -const softTeal = "#e2f5f2"; -const line = "#dce5ea"; -const muted = "#607283"; - -function PhoneIconButton({ children, label }: { children: ReactNode; label: string }) { - return ( - - ); -} - -function EvidenceChip({ children }: { children: ReactNode }) { - return ( - - {children} - - ); -} - -function MenuTile({ icon, label }: { icon: ReactNode; label: ReactNode }) { - return ( - - ); -} - -function MonitoringTable() { - const rows = [ - ["Full blood count (FBC)", true, true, true, true], - ["Absolute neutrophil count (ANC)", true, true, true, true], - ["C-reactive protein (CRP)", false, false, true, true], - ] as const; - - return ( -
-
-

Clozapine monitoring schedule

- -
- - - - - - - - - - - - {rows.map(([label, baseline, weekly, fortnightly, fourWeekly]) => ( - - - {[baseline, weekly, fortnightly, fourWeekly].map((enabled, index) => ( - - ))} - - ))} - -
Monitoring itemBaselineWeeklyFortnightly4-weekly
{label} - {enabled ? : null} -
-
- ); -} - -function CommandSheet() { - return ( -
-
- -
- - - - - Mode - Answer - - Source-backed mode - - - - - -
- -
- } - label={ - <> - Add -
- document - - } - /> - } - label={ - <> - Search -
- library - - } - /> - } - label={ - <> - Scope -
- sources - - } - /> - } label="Tables" /> - } label="PDFs" /> - } label="Quotes" /> - } - label={ - <> - Evidence -
- map - - } - /> - } - label={ - <> - Clinical -
- tools - - } - /> -
-
- ); -} - -function Composer() { - return ( -
- - Ask a clinical question... - - -
- ); -} - -function PhoneMockup() { - return ( -
-
-
-
-
-
- -
-
-
9:41
-
- - - - - - - - -
- -
- - - -
- - -
- - - - - - -
-
- -
-
-

- What clozapine monitoring items are shown in the table? -

-
- 9:14 AM - -
-
- -
- - - -
-

- The table lists key monitoring items for patients taking clozapine, including FBC, ANC, CRP, myocarditis - review, and metabolic monitoring. -

-
- FBC p.2 - ANC quote - Table - PDF - Guideline -
-
-
- -
- -
- - - -
- -
-
-
- ); -} - -export default function RefinedExtendedMenuMockupPage() { - return ( -
- - -
- ); -} diff --git a/src/app/mockups/final-rag-structure/page.tsx b/src/app/mockups/final-rag-structure/page.tsx deleted file mode 100644 index 364e35750..000000000 --- a/src/app/mockups/final-rag-structure/page.tsx +++ /dev/null @@ -1,531 +0,0 @@ -import { - AlertTriangle, - BookOpen, - ClipboardCheck, - Copy, - ExternalLink, - Layers, - ListChecks, - ShieldCheck, - Stethoscope, -} from "lucide-react"; -import type { ReactNode } from "react"; - -const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -function IconTile({ children, tone = "teal" }: { children: ReactNode; tone?: "teal" | "amber" | "red" | "slate" }) { - const toneClass = - tone === "red" - ? "border-red-200 bg-red-50 text-red-600" - : tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-700" - : tone === "slate" - ? "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]" - : "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]"; - - return ( - - {children} - - ); -} - -function Pill({ children, tone = "neutral" }: { children: ReactNode; tone?: "neutral" | "teal" | "amber" | "red" }) { - const toneClass = - tone === "red" - ? "border-red-200 bg-red-50 text-red-700" - : tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-700" - : tone === "teal" - ? "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]" - : "border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)]"; - - return ( - - {children} - - ); -} - -function ActionButton({ children, primary = false }: { children: ReactNode; primary?: boolean }) { - const baseClass = `inline-flex min-h-10 items-center justify-center gap-2 rounded-md px-3 text-xs font-semibold transition ${focusRing} [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0`; - return ( - - ); -} - -function PageHeader() { - return ( -
-
-
-
- - - -

- Final RAG answer structure -

-
-

- Answer, sources, clinical notes, evidence -

-

- Two polished end-to-end mockups using the final hierarchy: direct answer first, compact provenance, clinical - action triage, and a separate evidence audit. -

-
-
-

Decision rule

-
- Documents {">"} Sources - Actions {">"} Clinical notes - Trust {">"} Evidence -
-
-
-
- ); -} - -function MockupSection({ - title, - body, - recommended, - children, -}: { - title: string; - body: string; - recommended?: boolean; - children: ReactNode; -}) { - return ( -
-
-
-

{title}

- {recommended ? Recommended : null} -
-

{body}

-
-
{children}
-
- ); -} - -function UserBubble() { - return ( -
-

lithium dose in adults

-

9:14 AM

-
- ); -} - -function SafetyBanner({ compact = false }: { compact?: boolean }) { - return ( -
-
- - - -
-

Check toxicity risk before applying.

-

- Escalate if vomiting, diarrhoea, tremor, confusion, ataxia, dehydration, or AKI is present. -

-
-
-
- ); -} - -function AnswerBlock({ compact = false }: { compact?: boolean }) { - return ( -
- - - -
-

- For lithium, twice daily dosing is usually spaced by 12 hours. Target level and dose adjustment depend on - indication, sample timing, renal function, interacting medicines, and local protocol. -

- -
-
- ); -} - -function SourceRow({ title, page, score }: { title: string; page: string; score: string }) { - return ( -
- -
-

{title}

-

{page} - direct support

-
- - {score} - -
- ); -} - -function SourcesPanel({ compact = false }: { compact?: boolean }) { - return ( -
-
-
- - - -
-

Sources

-

Top documents and passages

-
-
- 4 sources -
-
- - - {compact ? null : } -
-
- - - Open source - -
-
- ); -} - -function ClinicalNotesPanel({ compact = false }: { compact?: boolean }) { - const rows = [ - ["Escalate", "Toxicity symptoms or AKI: urgent review.", "red"], - ["Caution", "Renal impairment, dehydration, or interacting medicines.", "amber"], - ["Monitor", "Lithium level timing, renal and thyroid function.", "teal"], - ] as const; - - return ( -
-
-
- - - -
-

Clinical notes

-

6 notes - source-backed

-
-
- Safety triage -
-
- {rows.map(([label, body, tone]) => ( -
-
- {label} - - {label === "Monitor" ? "planned" : "review"} - -
-

- {body} -

-
- ))} -
-
- ); -} - -function EvidencePanel({ compact = false }: { compact?: boolean }) { - return ( -
-
-
- - - -
-

Evidence

-

Trust and audit check

-
-
- Partial support -
-
-
-

Claim map

-

- Twice-daily timing and toxicity safety-net map to Sources 1-2. -

-
-
-
-

Quotes

-

2

-
-
-

Gaps

-

1

-
-
- {compact ? null : ( -
-

Governance

-

- Source status unknown; verify local validation before clinical reliance. -

-
- )} -
-
- ); -} - -function DesktopChrome({ children, split = false }: { children: ReactNode; split?: boolean }) { - return ( -
-
-
- - - -
-

Clinical KB

-

Answer mode

-
-
-
- Scope - New chat -
-
-
- {children} -
-
- ); -} - -function PhoneChrome({ children }: { children: ReactNode }) { - return ( -
-
-
- -
-

Mode

-

Answer

-
- -
- {children} -
- ); -} - -function MockupOneDesktop() { - return ( - -
- - -
- - - -
-
- - ); -} - -function MockupOnePhone() { - return ( - -
- - - - - -
- - ); -} - -function RightAuditRail() { - return ( - - ); -} - -function MockupTwoDesktop() { - return ( - -
- - -
- - -
-
- - - ); -} - -function MockupTwoPhone() { - return ( - -
- - -
-
-
- - - -
-

Sources

-

4 sources - direct PDFs

-
-
- -
-
- -
-
-
- - - -
-

Evidence

-

Partial support - 2 quotes - 1 gap

-
-
-
-
-

Claim map

-

- Timing and toxicity claims map to Sources 1-2. -

-
-
-

Gap

-

Source validation unknown.

-
-
-
-
- - ); -} - -export default function FinalRagStructureMockupsPage() { - return ( -
- -
- - - -
-

PC

- -
-
-

- Small phone -

- -
- - - -
-

PC

- -
-
-

- Small phone -

- -
- -
-
- ); -} diff --git a/src/app/mockups/mode-dropdown/page.tsx b/src/app/mockups/mode-dropdown/page.tsx index a40a8965c..884b3e86d 100644 --- a/src/app/mockups/mode-dropdown/page.tsx +++ b/src/app/mockups/mode-dropdown/page.tsx @@ -73,7 +73,7 @@ function HeaderMockup({ expanded = false, compact = false }: { expanded?: boolea aria-haspopup="true" aria-expanded={expanded} > - + @@ -102,7 +102,7 @@ function HeaderMockup({ expanded = false, compact = false }: { expanded?: boolea className={[ "grid min-h-[3.25rem] w-full grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-2 rounded-md px-2.5 py-2 text-left transition", mode.active - ? "bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]" + ? "bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]" : "text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]", ].join(" ")} > @@ -110,7 +110,7 @@ function HeaderMockup({ expanded = false, compact = false }: { expanded?: boolea className={[ "grid h-8 w-8 place-items-center rounded-lg border shadow-[var(--shadow-inset)]", mode.active - ? "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--surface)]" + ? "border-[color:var(--clinical-accent)]/25 bg-[color:var(--surface)]" : "border-[color:var(--border)] bg-[color:var(--surface-raised)]", ].join(" ")} > @@ -159,7 +159,7 @@ function HeaderMockup({ expanded = false, compact = false }: { expanded?: boolea @@ -205,8 +205,8 @@ export default function ModeDropdownMockupPage() { semantics so only one mode is active at a time.

- New modes can be added as rows without changing the header width. The active row keeps the current teal - treatment from the old Answer tab. + New modes can be added as rows without changing the header width. The active row keeps the current + Aegean accent treatment from the old Answer tab.

diff --git a/src/app/mockups/premium-colour-system/page.tsx b/src/app/mockups/premium-colour-system/page.tsx deleted file mode 100644 index dacdbeeb2..000000000 --- a/src/app/mockups/premium-colour-system/page.tsx +++ /dev/null @@ -1,936 +0,0 @@ -import { - BookOpen, - ChevronDown, - FileText, - MessageSquare, - MessageSquarePlus, - Mic, - MoreHorizontal, - Search, - Send, - ShieldCheck, - Sparkles, - Stethoscope, - UploadCloud, -} from "lucide-react"; -import type { CSSProperties, ReactNode } from "react"; - -type ThemeMode = "light" | "dark"; - -const palette = { - light: { - label: "Light mode", - name: "Clinical Porcelain", - canvas: "#F7F7F4", - paper: "#FFFFFF", - raised: "#FCFCFA", - inset: "#E8EAE4", - border: "#DFDFD8", - borderStrong: "#C3C8BF", - ink: "#111714", - muted: "#53605A", - soft: "#7C8780", - teal: "#0F766E", - tealSoft: "#E6F2EF", - amber: "#8F5408", - amberSoft: "#FFF1D6", - red: "#B23A48", - redSoft: "#FDEBED", - shadow: "25 28 24", - }, - dark: { - label: "Dark mode", - name: "Obsidian Glass", - canvas: "#070808", - paper: "#101214", - raised: "#171A1D", - inset: "#050606", - border: "rgba(255,255,255,0.08)", - borderStrong: "rgba(255,255,255,0.14)", - ink: "#F4F7F6", - muted: "#A7B0AD", - soft: "#78827F", - teal: "#4CCFD0", - tealSoft: "#12383B", - amber: "#F0C15A", - amberSoft: "#3B2D12", - red: "#FF8D96", - redSoft: "#3E1B22", - shadow: "0 0 0", - }, -} as const; - -const swatches = [ - ["Canvas", "canvas"], - ["Paper", "paper"], - ["Ink", "ink"], - ["Teal", "teal"], - ["Amber", "amber"], - ["Red", "red"], -] as const; - -function ThemeVars({ mode, children }: { mode: ThemeMode; children: ReactNode }) { - const p = palette[mode]; - return ( -
- {children} -
- ); -} - -function Swatch({ mode, label, token }: { mode: ThemeMode; label: string; token: keyof (typeof palette)["light"] }) { - const value = palette[mode][token]; - return ( -
- - - {label} - {value} - -
- ); -} - -function Sidebar({ mode }: { mode: ThemeMode }) { - return ( - - ); -} - -function AppFrame({ mode }: { mode: ThemeMode }) { - return ( - -
- -
-
- -
- - -
-
- -
-
- -
-

How can I help?

-

Ask a clinical question or search your documents.

- -
- - - -
- -
-
- - Evidence-backed -
-

- The answer area should read as calm paper, with teal reserved for source confidence and amber reserved - for setup or safety states. -

-
-
- -
- - Ask Clinical Guide - - -
-
-
- - ); -} - -function ThemeCard({ mode }: { mode: ThemeMode }) { - const p = palette[mode]; - return ( -
-
-
-

{p.label}

-

{p.name}

-
- {mode === "light" ? "Primary target" : "Paired system"} -
-
- {swatches.map(([label, token]) => ( - - ))} -
- -
- ); -} - -export default function PremiumColourSystemMockupPage() { - return ( -
- - -
-

Premium colour-system mockups

-

Clinical porcelain in light mode, obsidian glass in dark mode.

-

- This direction makes light mode feel polished and modern by removing the broad mint cast, using graphite for - command weight, and reserving teal for clinical evidence, source confidence, and send actions. Dark mode keeps - the black-polish language with the same semantic accents. -

-
-
- Neutral first - Canvas and cards are porcelain/graphite, not green-tinted. -
-
- Teal has meaning - Teal marks answer mode, sources, evidence, and send intent. -
-
- One material signature - The composer and mode control use a frosted clinical tray treatment. -
-
-
- -
- - -
-
- ); -} diff --git a/src/app/mockups/rag-answer-responsive/page.tsx b/src/app/mockups/rag-answer-responsive/page.tsx deleted file mode 100644 index 6a0041d59..000000000 --- a/src/app/mockups/rag-answer-responsive/page.tsx +++ /dev/null @@ -1,738 +0,0 @@ -import { - Activity, - AlertTriangle, - BookOpen, - ClipboardCheck, - Copy, - ExternalLink, - FileSearch, - Layers3, - ListChecks, - Plus, - ShieldAlert, - ShieldCheck, - Stethoscope, - Table2, -} from "lucide-react"; -import type { ReactNode } from "react"; - -type Tone = "neutral" | "teal" | "amber" | "red" | "blue"; -type NoteTone = "monitor" | "caution" | "escalate"; - -const answerText = - "Lithium dosing should be guided by serum levels, tolerability, renal function, interacting medicines, and documented clinical response. Use lower or slower dosing when renal risk or toxicity risk is present."; - -const sources = [ - { - title: "Lithium Therapy - Initiation and Continuation Guideline", - meta: "p. 4 - Current - Local", - score: "100%", - tag: "Primary", - }, - { - title: "Lithium monitoring and renal function guidance", - meta: "p. 2 - Current - Local", - score: "92%", - tag: "Monitoring", - }, - { - title: "Medication review and toxicity safety-net", - meta: "p. 8 - Review due", - score: "84%", - tag: "Safety", - }, -] as const; - -const notes: Array<{ tone: NoteTone; title: string; detail: string; source: string; action: string }> = [ - { - tone: "monitor", - title: "Lithium level timing", - detail: "Check serum levels after dose changes and once stable.", - source: "Source 1", - action: "Time level", - }, - { - tone: "caution", - title: "Renal function", - detail: "Reduce dose or increase review frequency when renal impairment or dehydration risk is present.", - source: "Source 2", - action: "Review dose", - }, - { - tone: "escalate", - title: "Toxicity triggers", - detail: "Vomiting, diarrhoea, tremor, confusion, ataxia, or acute kidney injury should prompt urgent review.", - source: "Source 3", - action: "Escalate", - }, -] as const; - -const evidenceRows = [ - ["Dose adjustment", "Direct", "2 citations", "Lithium guideline"], - ["Level timing", "Direct", "3 citations", "Monitoring guidance"], - ["Renal caution", "Moderate", "1 citation", "Renal function section"], -] as const; - -const toneClass: Record = { - neutral: "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)]", - teal: "border-teal-200 bg-teal-50 text-teal-800", - amber: "border-amber-200 bg-amber-50 text-amber-800", - red: "border-red-200 bg-red-50 text-red-700", - blue: "border-sky-200 bg-sky-50 text-sky-800", -}; - -const noteTone: Record = - { - monitor: { - label: "Monitor", - icon: Activity, - tone: "teal", - dot: "bg-teal-600", - panel: "border-teal-200 bg-teal-50/55", - }, - caution: { - label: "Caution", - icon: AlertTriangle, - tone: "amber", - dot: "bg-amber-500", - panel: "border-amber-200 bg-amber-50/60", - }, - escalate: { - label: "Escalate", - icon: ShieldAlert, - tone: "red", - dot: "bg-red-600", - panel: "border-red-200 bg-red-50/65", - }, - }; - -const focus = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -function Pill({ - icon: Icon, - tone = "neutral", - children, -}: { - icon?: typeof ShieldCheck; - tone?: Tone; - children: ReactNode; -}) { - return ( - - {Icon ? : null} - {children} - - ); -} - -function ActionButton({ - icon: Icon, - children, - primary = false, -}: { - icon: typeof ShieldCheck; - children: ReactNode; - primary?: boolean; -}) { - return ( - - ); -} - -function PageIntro() { - return ( -
-

- Responsive RAG answer system -

-

- Best design for answer, sources, notes, safety, and evidence -

-

- Each surface has two completed mockups: a mobile treatment and a desktop or larger-screen treatment. The system - keeps the answer readable while making provenance, clinical action, and audit detail available without - competing. -

-
- ); -} - -function PairSection({ - id, - title, - rationale, - mobile, - desktop, -}: { - id: string; - title: string; - rationale: string; - mobile: ReactNode; - desktop: ReactNode; -}) { - return ( -
-
-

{title}

-

{rationale}

-
-
- {mobile} - {desktop} -
-
- ); -} - -function MockupFrame({ label, children }: { label: string; children: ReactNode }) { - return ( -
-

{label}

-
- {children} -
-
- ); -} - -function PhoneShell({ children }: { children: ReactNode }) { - return ( -
-
- - - - - Answer - - - - -
-
{children}
-
-
- - - Ask a clinical question... - - - - -
-
-
- ); -} - -function DesktopShell({ children, side }: { children: ReactNode; side?: ReactNode }) { - return ( -
-
{children}
- -
- ); -} - -function AnswerBubble({ dense = false }: { dense?: boolean }) { - return ( -
-
- - - -
-

- {answerText} -

-
- - 3 sources - - - 3 clinical notes - - - Evidence direct - -
-
-
-
- ); -} - -function SourceRow({ source, compact = false }: { source: (typeof sources)[number]; compact?: boolean }) { - return ( -
- -
-

- {source.title} -

-

{source.meta}

-
- - {source.score} - -
- ); -} - -function NoteRow({ note, compact = false }: { note: (typeof notes)[number]; compact?: boolean }) { - const tone = noteTone[note.tone]; - const Icon = tone.icon; - return ( -
-
- - - -
-

{note.title}

-

- {note.detail} -

-
- - {note.source} - -
-
- ); -} - -function EvidenceMap({ compact = false }: { compact?: boolean }) { - return ( -
- {evidenceRows.map(([section, support, citations, source]) => ( -
- {compact ? ( - <> -
-

{section}

- {support} -
-

- {citations} - {source} -

- - ) : ( - <> -

{section}

-

{support}

-

{citations}

-

{source}

- - )} -
- ))} -
- ); -} - -function AnswerMobile() { - return ( - -
- lithium dosing -
- -
- Sources - Notes - Evidence -
- - ); -} - -function AnswerDesktop() { - return ( - -

Answer controls

- - Source-backed - - - Direct evidence - - Copy with sources -
- } - > -
-
- lithium dosing -
- -
-

- Why this answer is structured this way -

-

- The answer stays readable and avoids source inventory language. Provenance, clinical actions, and audit - detail are exposed as separate controls immediately below it. -

-
-
- - ); -} - -function SourcesMobile() { - return ( - -
-
-
-
-
-

Sources

-

- Open the source document before relying on details. -

-
- 3 -
-
-
- {sources.map((source) => ( - - ))} -
-
- - ); -} - -function SourcesDesktop() { - return ( - -

Source actions

- - Open primary source - - Compare sources -
- } - > -
-
-
-

Sources behind this answer

-

Ranked by answer use and ready to open.

-
- - 3 sources - -
-
- {sources.map((source) => ( - - ))} -
-
- - ); -} - -function NotesMobile() { - return ( - -
-
-
- - - -
-

Clinical notes

-

Monitor - Caution - Escalate

-
-
-
-
- - Monitor 1 - - - Caution 1 - - - Escalate 1 - -
-
- {notes.map((note) => ( - - ))} -
-
- - ); -} - -function NotesDesktop() { - return ( - -

Use notes for

-

- Practical actions extracted from answer sections. Each item keeps its source label visible. -

- - Add all notes - -
- } - > -
-
-
-

Clinical notes

-

Actionable checklist derived from the answer.

-
- Copy notes -
-
- {notes.map((note) => ( - - ))} -
-
- - ); -} - -function SafetyMobile() { - return ( - - -
-
- - - -
-

Escalate from clinical notes

-

- Toxicity symptoms or acute kidney injury should prompt urgent review. -

-
-
-
- -
-
- - ); -} - -function SafetyDesktop() { - return ( - - - Interrupt only when urgent - -

- Normal safety content belongs inside Clinical notes as Caution or Escalate. -

-
- } - > -
- -
-
-
- - - -
-

Safety-critical source finding

-

- Use a red banner only when the source-backed finding materially changes immediate handling. -

-
-
- Source -
-
-
- - ); -} - -function EvidenceMobile() { - return ( - -
-
-
-
-

Evidence

-

Audit support, tables, quotes, and gaps.

-
- - Direct - -
-
-
- {[ - ["3", "Sources"], - ["2", "Quotes"], - ["1", "Table"], - ].map(([count, label]) => ( -
-

{count}

-

{label}

-
- ))} -
-
- -
-
- - ); -} - -function EvidenceDesktop() { - return ( - -

Evidence sections

- - Sources - - - Tables - - - Gaps - -
- } - > -
-
-
-

Evidence audit

-

- Detailed support map for review after reading the answer and checking sources. -

-
- - Direct support - -
-
- Answer section - Support - Citations - Top source -
- -
- - ); -} - -export default function RagAnswerResponsiveMockupsPage() { - return ( -
-
- -
- } - desktop={} - /> - } - desktop={} - /> - } - desktop={} - /> - } - desktop={} - /> - } - desktop={} - /> -
-
-
- ); -} diff --git a/src/app/mockups/rag-answer-structure/page.tsx b/src/app/mockups/rag-answer-structure/page.tsx deleted file mode 100644 index daf4b4f80..000000000 --- a/src/app/mockups/rag-answer-structure/page.tsx +++ /dev/null @@ -1,562 +0,0 @@ -import { - Activity, - AlertTriangle, - BookOpen, - CheckCircle2, - ChevronDown, - ClipboardCheck, - Copy, - ExternalLink, - Layers3, - Plus, - ShieldAlert, - ShieldCheck, - Stethoscope, -} from "lucide-react"; -import type { ReactNode } from "react"; - -type NoteTone = "monitor" | "caution" | "escalate"; - -const sources = [ - { - title: "Lithium Therapy - Initiation and Continuation Guideline", - meta: "p. 4 - Current - Local", - score: "100%", - }, - { - title: "Lithium monitoring and renal function guidance", - meta: "p. 2 - Current - Local", - score: "92%", - }, - { - title: "Medication review and toxicity safety-net", - meta: "p. 8 - Review due", - score: "84%", - }, -]; - -const notes: Array<{ tone: NoteTone; title: string; detail: string; source: string }> = [ - { - tone: "monitor", - title: "Lithium level timing", - detail: "Check serum levels after dose changes and once stable. Verify timing against the linked source.", - source: "Source 1", - }, - { - tone: "caution", - title: "Renal function", - detail: "Reduce dose or increase review frequency when renal impairment or dehydration risk is present.", - source: "Source 2", - }, - { - tone: "escalate", - title: "Toxicity triggers", - detail: "Vomiting, diarrhoea, tremor, confusion, ataxia, or acute kidney injury should prompt urgent review.", - source: "Source 3", - }, -]; - -const evidenceRows = [ - ["Dose adjustment", "Direct", "2 citations", "Lithium guideline"], - ["Level timing", "Direct", "3 citations", "Monitoring guidance"], - ["Renal caution", "Moderate", "1 citation", "Renal function section"], -] as const; - -const planRows = [ - { - surface: "Answer", - job: "Give the direct clinical response first, with no source inventory wording.", - action: "Keep it readable, short, and structured by the question type.", - }, - { - surface: "Sources", - job: "Show where the answer came from.", - action: "Top documents/passages only: title, page, status, score, open source.", - }, - { - surface: "Clinical notes", - job: "Turn answer content into practical monitoring, caution, and escalation items.", - action: "Checklist or compact note rail. Include source labels on each item.", - }, - { - surface: "Safety-critical", - job: "Escalate source-backed red flags only when they materially change clinical handling.", - action: "Fold into Clinical notes as Escalate/Caution unless urgent enough for a banner.", - }, - { - surface: "Evidence", - job: "Audit the answer quality.", - action: "Support level, evidence map, quotes, tables/images, gaps, and governance warnings.", - }, -] as const; - -const focus = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -const toneStyles: Record = { - monitor: { - label: "Monitor", - icon: Activity, - chip: "border-teal-200 bg-teal-50 text-teal-800", - dot: "bg-teal-600", - }, - caution: { - label: "Caution", - icon: AlertTriangle, - chip: "border-amber-200 bg-amber-50 text-amber-800", - dot: "bg-amber-500", - }, - escalate: { - label: "Escalate", - icon: ShieldAlert, - chip: "border-red-200 bg-red-50 text-red-700", - dot: "bg-red-600", - }, -}; - -function IconPill({ - icon: Icon, - children, - tone = "neutral", -}: { - icon: typeof ShieldCheck; - children: ReactNode; - tone?: "neutral" | "teal" | "amber" | "red" | "blue"; -}) { - const toneClass = - tone === "teal" - ? "border-teal-200 bg-teal-50 text-teal-800" - : tone === "amber" - ? "border-amber-200 bg-amber-50 text-amber-800" - : tone === "red" - ? "border-red-200 bg-red-50 text-red-700" - : tone === "blue" - ? "border-sky-200 bg-sky-50 text-sky-800" - : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)]"; - return ( - - - {children} - - ); -} - -function SurfaceFrame({ - title, - subtitle, - recommended, - children, -}: { - title: string; - subtitle: string; - recommended?: boolean; - children: ReactNode; -}) { - return ( -
-
-
-
-

{title}

- {recommended ? ( - - Recommended - - ) : null} -
-

{subtitle}

-
-
-
- {children} -
-
- ); -} - -function ActionButton({ - icon: Icon, - children, - primary = false, -}: { - icon: typeof ShieldCheck; - children: ReactNode; - primary?: boolean; -}) { - return ( - - ); -} - -function SourceList({ compact = false }: { compact?: boolean }) { - return ( -
- {sources.map((source, index) => ( -
- -
-

- {source.title} -

-

{source.meta}

-
- - {index === 0 ? source.score : `#${index + 1}`} - -
- ))} -
- ); -} - -function ClinicalNoteRows({ dense = false }: { dense?: boolean }) { - return ( -
- {notes.map((note) => { - const tone = toneStyles[note.tone]; - const Icon = tone.icon; - return ( -
-
- - - -
-

{note.title}

-

- {note.detail} -

-
- - {note.source} - -
-
- ); - })} -
- ); -} - -function AnswerCard({ safetyBanner = false }: { safetyBanner?: boolean }) { - return ( -
- {safetyBanner ? ( -
- Urgent source-backed caution: toxicity symptoms or acute kidney injury should prompt immediate review. -
- ) : null} -
- - - -
-

- Lithium dosing should be guided by serum levels, tolerability, renal function, interacting medicines, and - documented clinical response. Use lower or slower dosing when renal risk or toxicity risk is present. -

-
- - 3 sources - - - 3 clinical notes - - - Evidence: direct - -
-
-
-
- ); -} - -function EvidenceMini() { - return ( -
-
-
-

Evidence audit

-

Support map, quotes, tables, gaps

-
- - Good support - -
-
- {evidenceRows.map(([section, support, citations, source]) => ( -
- - {section} - {source} - - - {support} - {citations} - -
- ))} -
-
- ); -} - -function RecommendedStack() { - return ( - -
-
- lithium dosing -
- - -
-
-
-

Sources

-

Open source documents first

-
- Open all -
-
- -
-
- -
-
-
-

Clinical notes

-

Monitor, caution, escalation

-
-
- - Monitor - - - Caution - -
-
- -
- -
- -
-
- Copy answer - - Add notes - -
-
- - ); -} - -function SourceReviewDesk() { - return ( - -
-
-
-
-

Sources

-

Ranked by answer use

-
- -
- -
-
- - Source-backed - - - Moderate-high support - -
-
- -
-
-

Clinical notes

- -
- -
-
- -
-
-
- - ); -} - -function SafetyFirstLayout() { - return ( - -
- -
-
- - - -
-

Safety-critical findings

-

- Show this only for urgent source-backed findings. Otherwise, keep safety items inside Clinical notes. -

-
-
-
- {notes - .filter((note) => note.tone !== "monitor") - .map((note) => ( -
-
-

{note.title}

- -
-

{note.detail}

-
- ))} -
-
-
-
-

Sources to verify

- -
- -
-
- -
-
- - ); -} - -function SourceButtonLabel({ label }: { label: string }) { - return ( - - - {label} - - ); -} - -function PlanTable() { - return ( -
-
- - - -
-

Recommended RAG answer structure

-

- Order the UI by user intent, not by internal model output. -

-
-
-
- {planRows.map((row, index) => ( -
-

- {index + 1} - {row.surface} -

-

{row.job}

-

{row.action}

-
- ))} -
-
- ); -} - -export default function RagAnswerStructureMockupsPage() { - return ( -
-
-
-

- RAG answer structure -

-

- One hierarchy for answer, sources, evidence, notes, and safety -

-

- The best fit for the current RAG is not another drawer. It is a clear answer stack: direct answer first, - source provenance second, clinical action notes third, and detailed evidence audit on demand. -

-
- - - -
- - - -
-
-
- ); -} diff --git a/src/app/mockups/recent-searches-bottom/page.tsx b/src/app/mockups/recent-searches-bottom/page.tsx index 1025c3f2a..252250c3e 100644 --- a/src/app/mockups/recent-searches-bottom/page.tsx +++ b/src/app/mockups/recent-searches-bottom/page.tsx @@ -28,7 +28,7 @@ function RecentSearchRail() { type="button" className="inline-flex min-h-9 max-w-[15rem] shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--border)] bg-[color:var(--surface-raised)]/78 px-3 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface)] hover:text-[color:var(--text)]" > - + {search} ))} @@ -99,7 +99,7 @@ export default function RecentSearchesBottomMockupPage() {
- +

Scope and mode stay primary

Recent is secondary diff --git a/src/app/mockups/safety-critical-redesign/page.tsx b/src/app/mockups/safety-critical-redesign/page.tsx deleted file mode 100644 index b487e7780..000000000 --- a/src/app/mockups/safety-critical-redesign/page.tsx +++ /dev/null @@ -1,511 +0,0 @@ -import { - Activity, - AlertTriangle, - BookOpen, - CheckCircle2, - ClipboardCheck, - Copy, - ExternalLink, - FileSearch, - Flame, - Layers3, - Plus, - ShieldAlert, - ShieldCheck, - Stethoscope, -} from "lucide-react"; -import type { ReactNode } from "react"; - -type Tone = "teal" | "amber" | "red" | "blue" | "neutral"; - -const answerText = - "Lithium dosing should be guided by serum levels, tolerability, renal function, interacting medicines, and documented clinical response."; - -const safetyFindings = [ - { - label: "Escalate", - title: "Toxicity symptoms", - detail: "Vomiting, diarrhoea, tremor, confusion, ataxia, or acute kidney injury should prompt urgent review.", - source: "Source 3", - }, - { - label: "Caution", - title: "Renal impairment", - detail: "Reduce dose or increase monitoring frequency when renal function changes or dehydration risk is present.", - source: "Source 2", - }, - { - label: "Monitor", - title: "Level timing", - detail: "Check serum lithium level after dose changes and when clinically stable.", - source: "Source 1", - }, -] as const; - -const toneClass: Record = { - teal: "border-teal-200 bg-teal-50 text-teal-800", - amber: "border-amber-200 bg-amber-50 text-amber-800", - red: "border-red-200 bg-red-50 text-red-700", - blue: "border-sky-200 bg-sky-50 text-sky-800", - neutral: "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)]", -}; - -const focus = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -function Pill({ - icon: Icon, - tone = "neutral", - children, -}: { - icon?: typeof ShieldAlert; - tone?: Tone; - children: ReactNode; -}) { - return ( - - {Icon ? : null} - {children} - - ); -} - -function ActionButton({ - icon: Icon, - children, - primary = false, -}: { - icon: typeof ShieldAlert; - children: ReactNode; - primary?: boolean; -}) { - return ( - - ); -} - -function PageHeader() { - return ( -
-

- Safety-critical redesign -

-

- Three polished treatments for urgent source-backed safety findings -

-

- Safety-critical should interrupt only when a source-backed finding materially changes immediate handling. These - mockups keep the warning clear without turning every caution into an alarm. -

-
- ); -} - -function MockupPair({ - title, - summary, - mobile, - desktop, -}: { - title: string; - summary: string; - mobile: ReactNode; - desktop: ReactNode; -}) { - return ( -
-
-

{title}

-

{summary}

-
-
- {mobile} - {desktop} -
-
- ); -} - -function MockupFrame({ label, children }: { label: string; children: ReactNode }) { - return ( -
-

{label}

-
- {children} -
-
- ); -} - -function PhoneShell({ children }: { children: ReactNode }) { - return ( -
-
- - - - - Answer - - - - -
-
{children}
-
-
- - - Ask a clinical question... - - - - -
-
-
- ); -} - -function DesktopShell({ children, side }: { children: ReactNode; side?: ReactNode }) { - return ( -
-
{children}
- -
- ); -} - -function AnswerCard() { - return ( -
-
- - - -
-

{answerText}

-
- - 3 sources - - - 3 clinical notes - - - Evidence direct - -
-
-
-
- ); -} - -function FindingCard({ finding, compact = false }: { finding: (typeof safetyFindings)[number]; compact?: boolean }) { - const tone = finding.label === "Escalate" ? "red" : finding.label === "Caution" ? "amber" : "teal"; - const Icon = finding.label === "Escalate" ? ShieldAlert : finding.label === "Caution" ? AlertTriangle : Activity; - return ( -
-
- - - -
-

{finding.title}

-

- {finding.detail} -

-
- - {finding.source} - -
-
- ); -} - -function AnswerInterruptPhone() { - return ( - -
- lithium toxicity -
-
-
- - - -
-

Safety-critical finding

-

- Toxicity symptoms or acute kidney injury should prompt urgent review. -

-
-
-
- Open source - - Add note - -
-
- - - ); -} - -function AnswerInterruptDesktop() { - return ( - - - Interrupt only when urgent - -

- This treatment belongs above the answer only when the finding changes immediate clinical handling. -

- - Open primary source - -
- } - > -
-
-
- - - -
-

Safety-critical source finding

-

- Vomiting, diarrhoea, tremor, confusion, ataxia, or acute kidney injury should prompt urgent review. -

-
- - Source 3 - -
-
- -
- - ); -} - -function NotesTriagePhone() { - return ( - -
-
-
- - - -
-

Safety notes

-

Escalate - Caution - Monitor

-
-
-
-
- {safetyFindings.map((finding) => ( - - ))} -
-
- - ); -} - -function NotesTriageDesktop() { - return ( - -

How to use this

-

- Most safety findings should live here, not as a separate alarming page. -

- Copy safety notes -
- } - > -
-
-
-

Safety notes

-

Triage source-backed findings by action type.

-
-
- - Escalate 1 - - - Caution 1 - - - Monitor 1 - -
-
-
- {safetyFindings.map((finding) => ( - - ))} -
-
- - ); -} - -function SourceReviewPhone() { - return ( - -
-
-
-
-

Verify safety finding

-

Source-backed escalation review.

-
- - Urgent - -
-
-
- -
-

- Source passage -

-

- Review for tremor, confusion, ataxia, gastrointestinal symptoms, dehydration, and renal deterioration. -

-
- - Open source document - -
-
- - ); -} - -function SourceReviewDesktop() { - return ( - - - Source 3 - - - Direct support - - - Open source document - - Mark verified -
- } - > -
-
- - - -
-

Safety verification panel

-

- Use this when the user needs to inspect the cited passage before acting. -

-
-
-
- -
-

- Source passage -

-

- Review for tremor, confusion, ataxia, gastrointestinal symptoms, dehydration, and renal deterioration. If - present, seek urgent clinical review and check renal function and serum lithium level. -

-
- - p. 8 - - - Direct match - -
-
-
-
- - ); -} - -export default function SafetyCriticalRedesignMockupsPage() { - return ( -
- -
- -
- } - desktop={} - /> - } - desktop={} - /> - } - desktop={} - /> -
-
-
- ); -} diff --git a/src/app/mockups/safety-notes-triage-redesign/page.tsx b/src/app/mockups/safety-notes-triage-redesign/page.tsx deleted file mode 100644 index f68359564..000000000 --- a/src/app/mockups/safety-notes-triage-redesign/page.tsx +++ /dev/null @@ -1,698 +0,0 @@ -import { - Activity, - AlertTriangle, - BookOpen, - CheckCircle2, - ClipboardCheck, - Copy, - ExternalLink, - ListChecks, - Plus, - ShieldAlert, - ShieldCheck, - Stethoscope, -} from "lucide-react"; -import type { ReactNode } from "react"; - -type FindingTone = "escalate" | "caution" | "monitor"; - -const findings: Array<{ - id: string; - tone: FindingTone; - label: string; - title: string; - body: string; - action: string; - source: string; - timing: string; -}> = [ - { - id: "toxicity", - tone: "escalate", - label: "Escalate", - title: "Possible lithium toxicity", - body: "Vomiting, diarrhoea, tremor, confusion, ataxia, or acute kidney injury should prompt urgent clinical review.", - action: "Escalate now", - source: "Source 3", - timing: "Immediate", - }, - { - id: "renal", - tone: "caution", - label: "Caution", - title: "Renal function or dehydration risk", - body: "Review dose and monitoring frequency when renal function changes, dehydration occurs, or interacting medicines are added.", - action: "Review dose", - source: "Source 2", - timing: "Before next dose", - }, - { - id: "level", - tone: "monitor", - label: "Monitor", - title: "Lithium level timing", - body: "Check serum lithium after dose changes and once clinically stable; interpret levels against timing and renal status.", - action: "Time level", - source: "Source 1", - timing: "Scheduled", - }, -]; - -const toneStyles: Record< - FindingTone, - { - accent: string; - soft: string; - border: string; - text: string; - icon: typeof ShieldAlert; - dot: string; - } -> = { - escalate: { - accent: "bg-red-600 text-white", - soft: "bg-red-50", - border: "border-red-200", - text: "text-red-700", - icon: ShieldAlert, - dot: "bg-red-500", - }, - caution: { - accent: "bg-amber-500 text-amber-950", - soft: "bg-amber-50", - border: "border-amber-200", - text: "text-amber-700", - icon: AlertTriangle, - dot: "bg-amber-500", - }, - monitor: { - accent: "bg-teal-600 text-white", - soft: "bg-teal-50", - border: "border-teal-200", - text: "text-teal-700", - icon: Activity, - dot: "bg-teal-500", - }, -}; - -const focusRing = - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--clinical-chat-teal)]"; - -function Pill({ children, tone = "neutral" }: { children: ReactNode; tone?: FindingTone | "neutral" }) { - const toneClass = - tone === "neutral" - ? "border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)]" - : `${toneStyles[tone].border} ${toneStyles[tone].soft} ${toneStyles[tone].text}`; - - return ( - svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0`} - > - {children} - - ); -} - -function ActionButton({ children, primary = false }: { children: ReactNode; primary?: boolean }) { - const baseClass = `inline-flex min-h-10 min-w-0 items-center justify-center gap-2 rounded-md px-3 text-xs font-semibold leading-tight transition hover:-translate-y-px hover:shadow-[var(--shadow-tight)] active:translate-y-0 ${focusRing} [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0`; - - return ( - - ); -} - -function PageHeader() { - return ( -
-
-
-
- - - -

- Clinical KB mockup -

-
-

- Safety notes triage redesign -

-

- Three refinements of the second safety mockup: compact triage first, source-backed actions second, and - detailed evidence only when the clinician opens a note. -

-
-
-

- Improvements made -

-
- Urgent items first - Caution is separate - Mobile bottom sheet -
-
-
-
- ); -} - -function MockupPair({ - eyebrow, - title, - body, - recommended, - children, -}: { - eyebrow: string; - title: string; - body: string; - recommended?: boolean; - children: ReactNode; -}) { - return ( -
-
-
-
-

{eyebrow}

- {recommended ? Recommended direction : null} -
-

{title}

-

{body}

-
-
-
{children}
-
- ); -} - -function MockupFrame({ label, children }: { label: string; children: ReactNode }) { - const frameClass = label === "Desktop" ? "hidden min-w-0 overflow-hidden md:block" : "min-w-0 overflow-hidden"; - - return ( -
-
-

{label}

-
-
{children}
-
- ); -} - -function PhoneShell({ children }: { children: ReactNode }) { - return ( -
-
-
{children}
-
- ); -} - -function DesktopShell({ children }: { children: ReactNode }) { - return ( -
- {children} -
- ); -} - -function SheetHeader({ compact = false }: { compact?: boolean }) { - return ( -
-
-
-
- - - -
-

Safety notes

-

Source-backed

-
-
- {compact ? null : ( -

- Prioritised clinical cautions from the answer. Open a note for source detail and exact evidence. -

- )} -
-
- - -
-
-
- ); -} - -function TriageChips() { - return ( -
- - 1 urgent - - - 1 caution - - - 1 monitor - -
- ); -} - -function FindingCard({ finding, dense = false }: { finding: (typeof findings)[number]; dense?: boolean }) { - const style = toneStyles[finding.tone]; - const Icon = style.icon; - - return ( -
-
- - - -
-
- {finding.label} - {finding.timing} -
-

{finding.title}

-
- - {finding.source} - -
-

- {finding.body} -

-
- {finding.action} - -
-
- ); -} - -function VariantOnePhone() { - return ( - - -
- -
-
- - - -
-

Escalate first

-

- Possible toxicity overrides routine monitoring. -

-
-
-
-
-
- {findings.map((finding) => ( - - ))} -
-
- - - -
- - ); -} - -function VariantOneDesktop() { - return ( - -
- -
-
-
-
-

Safety notes from answer

-

- 3 prioritised findings, each linked to a source. -

-
- - - Add to note - -
-
-
- {findings.map((finding) => ( - - ))} -
-
- - - Sources - - - - Copy - -
-
-
- - ); -} - -function VariantTwoPhone() { - return ( - - -
- {findings.map((finding, index) => { - const style = toneStyles[finding.tone]; - const Icon = style.icon; - return ( -
-
- - - - {index < findings.length - 1 ? ( - - ) : null} -
-
-
- {finding.label} - {finding.source} -
-

{finding.title}

-

{finding.body}

-
- {finding.action} -
-
-
- ); - })} -
- - ); -} - -function VariantTwoDesktop() { - return ( - -
- -
-
-
-
-

Escalation ladder

-

- Read from top to bottom: urgent, caution, monitor. -

-
- Urgent path visible -
-
- {findings.map((finding, index) => { - const style = toneStyles[finding.tone]; - const Icon = style.icon; - return ( -
- - - -
-
- - Step {index + 1} - {finding.label} - - {finding.timing} -
-

{finding.title}

-

{finding.body}

-
-
- - {finding.source} - - {finding.action} -
-
- ); - })} -
-
- -
-
- - ); -} - -function MatrixCell({ finding }: { finding: (typeof findings)[number] }) { - const style = toneStyles[finding.tone]; - const Icon = style.icon; - - return ( -
-
- - - - - {finding.label} - -
-

{finding.title}

-

{finding.body}

-
-
- Action - {finding.action} -
-
- Evidence - {finding.source} -
-
-
- ); -} - -function VariantThreePhone() { - return ( - - -
-
-
-

Highest priority

-

Toxicity symptoms

-
-
-

Total

-

3 notes

-
-
- {findings.map((finding) => ( - - ))} -
- - ); -} - -function VariantThreeDesktop() { - return ( - -
- -
-
-
-

Escalate

-

1

-

urgent item

-
-
-

Caution

-

1

-

dose or renal review

-
-
-

Monitor

-

1

-

scheduled check

-
-
-
- {findings.map((finding) => ( - - ))} -
-
-
-
-

Evidence remains secondary

-

- Safety notes expose source links, but detailed audit stays in Evidence. -

-
- - - Open audit - -
-
-
-
- - - Add all safe notes - - - - Apply triage - -
-
- - ); -} - -export default function SafetyNotesTriageRedesignPage() { - return ( -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- ); -} diff --git a/src/components/settings-search-mockups/settings-search-mockup-page.tsx b/src/components/settings-search-mockups/settings-search-mockup-page.tsx index 7f21d5bdd..5dad76771 100644 --- a/src/components/settings-search-mockups/settings-search-mockup-page.tsx +++ b/src/components/settings-search-mockups/settings-search-mockup-page.tsx @@ -68,7 +68,7 @@ const concepts: Record = { eyebrow: "Concept 01", title: "Refined account & app hub", subtitle: - "A softer ChatGPT-style settings surface with balanced spacing, quiet cards, and one precise teal emphasis.", + "A softer ChatGPT-style settings surface with balanced spacing, quiet cards, and one precise Aegean accent emphasis.", activeNav: "Account", modalTitle: "Account & app", tone: "balanced", @@ -278,7 +278,7 @@ function IconFrame({ icon: Icon, active = false }: { icon: LucideIcon; active?: className={cn( "grid h-8 w-8 shrink-0 place-items-center rounded-lg border transition shadow-[var(--shadow-inset)]", active - ? "border-[color:var(--clinical-chat-teal)]/30 bg-[color:var(--app-shell)] text-white shadow-[0_8px_20px_rgba(0,108,103,0.18)]" + ? "border-[color:var(--clinical-accent)]/30 bg-[color:var(--app-shell)] text-white shadow-[0_8px_20px_rgba(0,108,103,0.18)]" : "border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text-muted)]", )} > @@ -307,11 +307,11 @@ function DesktopNav({ active }: { active: string }) { className={cn( "relative grid min-h-10 w-full grid-cols-[auto_minmax(0,1fr)] items-center gap-3 rounded-lg border border-transparent px-3 text-left text-sm font-medium transition", selected - ? "border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text-heading)] shadow-[var(--shadow-inset)] before:absolute before:bottom-2 before:left-0 before:top-2 before:w-0.5 before:rounded-full before:bg-[color:var(--clinical-chat-teal)]" + ? "border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text-heading)] shadow-[var(--shadow-inset)] before:absolute before:bottom-2 before:left-0 before:top-2 before:w-0.5 before:rounded-full before:bg-[color:var(--clinical-accent)]" : "text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-heading)]", )} > - + {label} ); @@ -333,7 +333,7 @@ function SummaryTile({ row, index, tone }: { row: SettingsRow; index: number; to tone === "compact" ? "min-h-[70px]" : "", tone === "premium" ? "min-h-[82px]" : "shadow-[var(--shadow-tight)]", accent - ? "border-[color:var(--clinical-chat-teal)]/24 bg-[color:var(--clinical-chat-teal-soft)]/42 shadow-[0_12px_26px_rgba(0,108,103,0.09)] before:absolute before:bottom-3 before:left-0 before:top-3 before:w-0.5 before:rounded-full before:bg-[color:var(--clinical-chat-teal)]" + ? "border-[color:var(--clinical-accent)]/24 bg-[color:var(--clinical-accent-soft)]/42 shadow-[0_12px_26px_rgba(15,31,38,0.09)] before:absolute before:bottom-3 before:left-0 before:top-3 before:w-0.5 before:rounded-full before:bg-[color:var(--clinical-accent)]" : "border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[var(--shadow-inset)] hover:bg-[color:var(--surface-raised)]", )} > @@ -362,15 +362,15 @@ function DesktopProfileStrip({ tone }: { tone: Concept["tone"] }) { "mt-4 grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-lg border px-4 text-left", tone === "compact" ? "min-h-[76px]" : tone === "premium" ? "min-h-[88px]" : "min-h-[78px]", tone === "compact" - ? "border-[color:var(--clinical-chat-teal)]/16 bg-[color:var(--surface-inset)] shadow-[var(--shadow-tight)]" + ? "border-[color:var(--clinical-accent)]/16 bg-[color:var(--surface-inset)] shadow-[var(--shadow-tight)]" : tone === "premium" - ? "border-[color:var(--clinical-chat-teal)]/18 bg-[color:var(--surface-lux)] shadow-[0_12px_30px_rgba(15,31,38,0.08)]" + ? "border-[color:var(--clinical-accent)]/18 bg-[color:var(--surface-lux)] shadow-[0_12px_30px_rgba(15,31,38,0.08)]" : "border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[var(--shadow-lux)] ring-1 ring-white/45", )} > @@ -427,7 +427,7 @@ function DesktopModal({ concept }: { concept: Concept }) {
@@ -437,7 +437,7 @@ function DesktopModal({ concept }: { concept: Concept }) {
-

+

{concept.eyebrow}

@@ -461,7 +461,7 @@ function DesktopModal({ concept }: { concept: Concept }) { className={cn( "mt-4 h-[524px] overflow-hidden rounded-lg border bg-[color:var(--surface-lux)] px-5 shadow-[var(--shadow-lux)] ring-1 ring-white/35", concept.tone === "premium" - ? "border-[color:var(--clinical-chat-teal)]/15" + ? "border-[color:var(--clinical-accent)]/15" : "border-[color:var(--border-lux)]", )} > @@ -537,11 +537,11 @@ function PhoneProfileRow({ tone }: { tone: Concept["tone"] }) { className={cn( "grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-xl border px-3 text-left", tone === "premium" - ? "min-h-[82px] border-[color:var(--clinical-chat-teal)]/18 bg-[color:var(--surface-lux)] shadow-[0_10px_24px_rgba(15,31,38,0.08)]" + ? "min-h-[82px] border-[color:var(--clinical-accent)]/18 bg-[color:var(--surface-lux)] shadow-[0_10px_24px_rgba(15,31,38,0.08)]" : "min-h-[74px] border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[var(--shadow-lux)] ring-1 ring-white/40", )} > - + DS @@ -565,7 +565,7 @@ function PhoneClinicalStatus() { className={cn( "inline-flex min-h-8 items-center justify-center rounded-lg border px-2 text-[11px] font-semibold shadow-[var(--shadow-inset)]", index === 0 - ? "border-[color:var(--clinical-chat-teal)]/25 bg-[color:var(--clinical-chat-teal-soft)] text-[color:var(--clinical-chat-teal)]" + ? "border-[color:var(--clinical-accent)]/25 bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]" : "border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text-muted)]", )} > @@ -653,7 +653,7 @@ function BoardShell({ children, concept }: { children: ReactNode; concept: Conce
-

+

{concept.eyebrow}

{concept.title}