({
+ label,
+ value,
+ onChange,
+ options,
+}: {
+ label: string;
+ value: T;
+ onChange: (next: T) => void;
+ options: Array<{ id: T; label: string }>;
+}) {
+ return (
+
+
+ {label}
+
+ {options.map((option) => {
+ const active = option.id === value;
+ return (
+ onChange(option.id)}
+ className={cn(
+ "min-h-12 rounded-lg px-3 text-xs font-semibold transition",
+ focusRing,
+ active
+ ? "bg-[color:var(--command)] text-[color:var(--clinical-accent-contrast)]"
+ : "bg-[color:var(--surface-subtle)] text-[color:var(--text)] hover:bg-[color:var(--surface-inset)]",
+ )}
+ >
+ {option.label}
+
+ );
+ })}
+
+ );
+}
+
+function AtlasDevice({
+ device,
+ layer,
+ topicId,
+ onOpenGuide,
+ onCloseGuide,
+ onOpenTopic,
+ onCloseTopic,
+}: {
+ device: "desktop" | "phone";
+ layer: AtlasLayer;
+ topicId: TopicId;
+ onOpenGuide: () => void;
+ onCloseGuide: () => void;
+ onOpenTopic: (id: TopicId) => void;
+ onCloseTopic: () => void;
+}) {
+ const topic = topics.find((item) => item.id === topicId) ?? topics[0];
+ const showOverlay = layer === "guide" || layer === "topic" || layer === "entry";
+
+ return (
+
+
+
+
+
Answer canvas (dimmed)
+
+ Guide overlays sit above the composer — no second search bar.
+
+
+
+
+ {showOverlay ?
: null}
+
+ {layer === "entry" ? (
+
+ {device === "phone" ? (
+
+
+ ) : null}
+
+
+
+ Help & About
+
+
+
Clinical Knowledge Base
+
+ Source-linked clinical reference. Verify primary guidance before acting.
+
+
+
+
+
+
+ ) : null}
+
+ {layer === "guide" || layer === "topic" ? (
+
+ {device === "phone" ? (
+
+
+ ) : null}
+
+
+
+ {topics.map((item) => (
+
onOpenTopic(item.id)}
+ className={cn(
+ "rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-lux)] p-3 text-left shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)]",
+ focusRing,
+ topicId === item.id && layer === "topic" ? "border-[color:var(--clinical-accent-border)]" : null,
+ )}
+ >
+
+
+
+
+
{item.title}
+
+
{item.body}
+
+
+ ))}
+
+
+
+ ) : null}
+
+ {layer === "topic" ? (
+
+ {device === "phone" ? (
+
+
+ ) : null}
+
+
+
+
+
+ In the product
+
+
{topic.productCue}
+
+
+
+ ) : null}
+
+
Top source
+
+
+
+
+ [1]
+
+
+ [2]
+
+
+
+
Document scope
+
+
+ 3 selected
+
+
+ All documents
+
+
+
+
+ {["Quotes", "Images", "Sources"].map((label) => (
+
+ {label}
+
+ ))}
+
+
+
Draft answer text…
+
+ Provenance: sources [1][2] · verify primary PDF before clinical use
+
+
+
+
+
("ask");
+ const [phoneSection, setPhoneSection] = useState("ask");
+ const [desktopDemoOpen, setDesktopDemoOpen] = useState(false);
+ const [phoneDemoOpen, setPhoneDemoOpen] = useState(false);
+
+ return (
+
+ setDesktopDemoOpen(true)}
+ onDemoClose={() => setDesktopDemoOpen(false)}
+ />
+ }
+ phone={
+ setPhoneDemoOpen(true)}
+ onDemoClose={() => setPhoneDemoOpen(false)}
+ />
+ }
+ />
+
+
+ );
+}
+
+function HelpHubDevice({
+ device,
+ section,
+ onSection,
+ demoOpen,
+ onDemoOpen,
+ onDemoClose,
+}: {
+ device: "desktop" | "phone";
+ section: HubSection;
+ onSection: (id: HubSection) => void;
+ demoOpen: boolean;
+ onDemoOpen: () => void;
+ onDemoClose: () => void;
+}) {
+ return (
+
+
+
+
+
undefined}
+ closeLabel="Close help"
+ leading={
+ device === "phone" ? (
+
+
+ ) : null
+ }
+ />
+
+ {device === "desktop" ? (
+
+ {hubNav.map((item) => {
+ const active = item.id === section;
+ const Icon = item.icon;
+ return (
+ onSection(item.id)}
+ className={cn(
+ "mb-1 flex min-h-12 w-full items-center gap-2 rounded-lg px-2 text-left text-xs font-semibold",
+ focusRing,
+ active
+ ? "bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
+ : "text-[color:var(--text)] hover:bg-[color:var(--surface)]",
+ )}
+ >
+
+ );
+ })}
+
+ ) : (
+
+
+ {hubNav.map((item) => {
+ const active = item.id === section;
+ return (
+ onSection(item.id)}
+ className={cn(
+ "min-h-12 rounded-lg px-3 text-xs font-semibold",
+ focusRing,
+ active
+ ? "bg-[color:var(--command)] text-[color:var(--clinical-accent-contrast)]"
+ : "bg-[color:var(--surface-subtle)] text-[color:var(--text)]",
+ )}
+ >
+ {item.label}
+
+ );
+ })}
+
+
+ )}
+
+
+
+
+
+ {demoOpen ? (
+ <>
+
+
+ {device === "phone" ? (
+
+
+ ) : null}
+
+
+
+ Open the Top source chip, skim the passage, then confirm the claim before using the answer.
+
+
+
+ Tap Top source to open the PDF page.
+ Match the cited sentence to the passage.
+ Only then copy or act on the answer.
+
+
+ Got it
+
+
+
+
+ ) : null}
+
+ Safety posture
+
+ This is a clinical reference prototype, not validated decision support. Answers must remain verifiable against
+ linked sources. When generation fails quality gates, the product degrades to source-only citations — that is
+ expected, not an error.
+
+
+ Never treat a fluent answer as a substitute for the primary guideline PDF.
+
+
+ );
+ }
+ if (section === "demo") {
+ return (
+
+ Demo vs live
+
+ Demo mode uses a synthetic corpus. Live mode needs Supabase, OpenAI, the schema, and the ingestion worker.
+ Uploads in demo never reach your private library.
+
+
+ );
+ }
+ const topic = topics.find((item) => item.id === section);
+ if (!topic) return null;
+ return (
+
+
+
+
+
{topic.title}
+
{topic.detail}
+
+
+ Try this: verify a citation
+
+ ) : null}
+
+ );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Option C — Walkthrough */
+/* -------------------------------------------------------------------------- */
+
+type WalkLayer = "tour" | "skip" | "done";
+
+export function GuideWalkthroughMockup() {
+ const [desktopStep, setDesktopStep] = useState(0);
+ const [phoneStep, setPhoneStep] = useState(0);
+ const [desktopLayer, setDesktopLayer] = useState("tour");
+ const [phoneLayer, setPhoneLayer] = useState("tour");
+ const labelId = useId();
+
+ return (
+
+
+ );
+}
+
+function WalkDevice({
+ device,
+ step,
+ layer,
+ labelId,
+ onStep,
+ onLayer,
+}: {
+ device: "desktop" | "phone";
+ step: number;
+ layer: WalkLayer;
+ labelId: string;
+ onStep: (step: number) => void;
+ onLayer: (layer: WalkLayer) => void;
+}) {
+ const current = walkthroughSteps[Math.min(step, walkthroughSteps.length - 1)];
+ const progress = ((step + 1) / walkthroughSteps.length) * 100;
+ const isLast = step >= walkthroughSteps.length - 1;
+
+ return (
+
+
+
+
+ First-run Answer home behind the tour
+
+
+
+
+
+ {device === "phone" ? (
+
+
+ ) : null}
+
+ {layer === "done" ? (
+ <>
+
onLayer("tour")}
+ />
+
+
+
+
+ Ask focused questions, open Top source, and keep provenance on copies. Re-open the guide anytime from
+ Settings → Guide & help.
+
+
+ Browse Tip Atlas
+
+
+ Open Help Hub
+
+
{
+ onStep(0);
+ onLayer("tour");
+ }}
+ className={cn(
+ "inline-flex min-h-12 items-center justify-center text-sm font-semibold text-[color:var(--clinical-accent)]",
+ focusRing,
+ )}
+ >
+ Restart walkthrough
+
+
+
+
+
+ Step {step + 1} of {walkthroughSteps.length}
+
+
+ {current.title}
+
+
+
onLayer("skip")}
+ className={cn(
+ "min-h-12 shrink-0 rounded-lg px-3 text-xs font-semibold text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
+ focusRing,
+ )}
+ >
+ Skip
+
+
+
+
+
{current.body}
+
+
+ Look for
+
+
{current.cue}
+
+
+
+
onStep(Math.max(0, step - 1))}
+ className={cn(
+ "inline-flex min-h-12 flex-1 items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface)] text-sm font-semibold disabled:opacity-40",
+ focusRing,
+ )}
+ >
+
+
{
+ if (isLast) onLayer("done");
+ else onStep(step + 1);
+ }}
+ className={cn(
+ "inline-flex min-h-12 flex-[1.4] items-center justify-center gap-2 rounded-lg bg-[color:var(--command)] text-sm font-semibold text-[color:var(--clinical-accent-contrast)]",
+ focusRing,
+ )}
+ >
+ {isLast ? "Finish" : "Next"}
+ {!isLast ? (
+
+
+
+ {layer === "skip" ? (
+ <>
+
onLayer("tour")}
+ className="absolute inset-0 z-30 bg-[color:var(--overlay-backdrop)]"
+ />
+
+
onLayer("tour")} />
+
+
+ You can reopen Guide & help from Settings anytime. Skipping hides these first-run steps.
+
+
+ onLayer("tour")}
+ className={cn(
+ "inline-flex min-h-12 flex-1 items-center justify-center rounded-lg border border-[color:var(--border-lux)] text-sm font-semibold",
+ focusRing,
+ )}
+ >
+ Keep going
+
+ onLayer("done")}
+ className={cn(
+ "inline-flex min-h-12 flex-1 items-center justify-center rounded-lg bg-[color:var(--command)] text-sm font-semibold text-[color:var(--clinical-accent-contrast)]",
+ focusRing,
+ )}
+ >
+ Skip
+
+
+