diff --git a/docs/site-map.md b/docs/site-map.md
index ad1cd4c3cc..90f807532e 100644
--- a/docs/site-map.md
+++ b/docs/site-map.md
@@ -13,6 +13,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 - `/forms` - Forms home and search surface. Source: `src/app/forms/page.tsx`.
 - `/medications` - Medication index redirect. Source: `src/app/medications/page.tsx`.
 - `/services` - Services home and search surface. Source: `src/app/services/page.tsx`.
+- `/services-navigator-preview` - Route discovered from app directory Source: `src/app/services-navigator-preview/page.tsx`.
 
 ## Mode/query routes
 
@@ -92,6 +93,8 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 - `/mockups/settings-search-clinical` - Route discovered from app directory Source: `src/app/mockups/settings-search-clinical/page.tsx`.
 - `/mockups/settings-search-general` - Route discovered from app directory Source: `src/app/mockups/settings-search-general/page.tsx`.
 - `/mockups/settings-search-privacy` - Route discovered from app directory Source: `src/app/mockups/settings-search-privacy/page.tsx`.
+- `/mockups/tools-action-workbench` - Route discovered from app directory Source: `src/app/mockups/tools-action-workbench/page.tsx`.
+- `/mockups/tools-clinical-lanes` - Route discovered from app directory Source: `src/app/mockups/tools-clinical-lanes/page.tsx`.
 - `/mockups/tools-command-center` - Route discovered from app directory Source: `src/app/mockups/tools-command-center/page.tsx`.
 - `/mockups/tools-split-pane` - Route discovered from app directory Source: `src/app/mockups/tools-split-pane/page.tsx`.
 - `/mockups/tools-task-directory` - Route discovered from app directory Source: `src/app/mockups/tools-task-directory/page.tsx`.
diff --git a/src/app/mockups/tools-action-workbench/page.tsx b/src/app/mockups/tools-action-workbench/page.tsx
new file mode 100644
index 0000000000..1a9a4cc07a
--- /dev/null
+++ b/src/app/mockups/tools-action-workbench/page.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+
+import { ToolsActionWorkbenchMockup } from "@/components/tools-page-mockups/rectangle-direction-mockups";
+
+export const metadata: Metadata = {
+  title: "Tools Action Workbench Mockup - Clinical KB",
+  description: "Rectangle-first action workbench Tools page mockup for Clinical KB.",
+};
+
+export default function ToolsActionWorkbenchMockupRoute() {
+  return <ToolsActionWorkbenchMockup />;
+}
diff --git a/src/app/mockups/tools-clinical-lanes/page.tsx b/src/app/mockups/tools-clinical-lanes/page.tsx
new file mode 100644
index 0000000000..4c5615bc80
--- /dev/null
+++ b/src/app/mockups/tools-clinical-lanes/page.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+
+import { ToolsClinicalLanesMockup } from "@/components/tools-page-mockups/rectangle-direction-mockups";
+
+export const metadata: Metadata = {
+  title: "Tools Clinical Lanes Mockup - Clinical KB",
+  description: "Rectangle-first clinical lane Tools page mockup for Clinical KB.",
+};
+
+export default function ToolsClinicalLanesMockupRoute() {
+  return <ToolsClinicalLanesMockup />;
+}
diff --git a/src/app/services-navigator-preview/page.tsx b/src/app/services-navigator-preview/page.tsx
new file mode 100644
index 0000000000..9c80c10716
--- /dev/null
+++ b/src/app/services-navigator-preview/page.tsx
@@ -0,0 +1,5 @@
+import { ServicesNavigatorPreview } from "@/components/services/services-navigator-preview";
+
+export default function ServicesNavigatorPreviewRoute() {
+  return <ServicesNavigatorPreview />;
+}
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 81704772c2..5fdccee15f 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -14,15 +14,20 @@ import { createPortal } from "react-dom";
 
 import {
   Activity,
+  BadgeCheck,
   BrainCircuit,
   CalendarDays,
   Check,
   CheckCircle2,
   ChevronDown,
+  FileSignature,
   FileText,
   Filter,
+  FolderOpen,
+  GitBranch,
   Globe2,
   Heart,
+  ListChecks,
   Loader2,
   Menu,
   MessageSquarePlus,
@@ -81,7 +86,7 @@ const appModeIcons: Record<AppModeId, typeof Search> = {
   answer: Sparkles,
   documents: FileText,
   services: ShieldCheck,
-  forms: FileText,
+  forms: FileSignature,
   favourites: Heart,
   differentials: BrainCircuit,
   prescribing: Pill,
@@ -893,14 +898,168 @@ export function MasterSearchHeader({
     );
   }
 
+  // A couple of footer chips are mode-local shortcuts rather than shared
+  // ModeActionIds. Keep them explicit so they cannot fall through to document
+  // library behavior on non-document pages.
+  type FooterChipActionId = ModeActionId | "open-evidence" | "forms-library";
+
+  type FooterActionChip = {
+    icon: typeof Search;
+    shortLabel: string;
+    longLabel: string;
+    actionId: FooterChipActionId;
+    ariaLabel: string;
+  };
+
+  // The first ("trust") chip on the universal small-screen footer. Every mode gets
+  // one, mirroring Answer's "Evidence-based" chip in tone, each wired to a real
+  // action from that mode's own action menu rather than being decorative.
+  function footerTrustChipFor(mode: AppModeId): FooterActionChip | null {
+    switch (mode) {
+      case "answer":
+        return {
+          icon: ListChecks,
+          shortLabel: "Evidence",
+          longLabel: "Evidence-based",
+          actionId: "open-evidence",
+          ariaLabel: "Open evidence-backed answer sources",
+        };
+      case "documents":
+        return {
+          icon: BadgeCheck,
+          shortLabel: "Indexed",
+          longLabel: "Fully indexed",
+          actionId: "documents-collections",
+          ariaLabel: "Open the indexed document library",
+        };
+      case "forms":
+        return {
+          icon: BadgeCheck,
+          shortLabel: "Library",
+          longLabel: "Form library",
+          actionId: "forms-library",
+          ariaLabel: "Open the form library",
+        };
+      case "services":
+        return {
+          icon: BadgeCheck,
+          shortLabel: "Verified",
+          longLabel: "Verified directory",
+          actionId: "services-records",
+          ariaLabel: "Browse verified service records",
+        };
+      case "favourites":
+        return {
+          icon: BadgeCheck,
+          shortLabel: "Trusted",
+          longLabel: "Trusted picks",
+          actionId: "favourites-browse",
+          ariaLabel: "Browse trusted favourites",
+        };
+      // Differentials has no differential-specific evidence view yet — the only
+      // handler for "differentials-evidence" is the answer-mode evidence drawer,
+      // which would take the user out of differentials context. Omit the trust
+      // chip here until a differential-specific action exists; "Criteria" (the
+      // secondary chip below) still gives differentials a footer action.
+      case "prescribing":
+        return {
+          icon: ShieldCheck,
+          shortLabel: "Safety",
+          longLabel: "Safety-checked",
+          actionId: "medication-safety",
+          ariaLabel: "Review contraindications and cautions",
+        };
+      case "tools":
+        return {
+          icon: BadgeCheck,
+          shortLabel: "Curated",
+          longLabel: "Curated registry",
+          actionId: "tools-browse",
+          ariaLabel: "Browse the curated tools registry",
+        };
+      default:
+        return null;
+    }
+  }
+
+  // The second footer chip. Answer/Documents use the shared document-scope
+  // trigger instead (see hasScopeFooterChip below) since scope is a real, existing
+  // concept for those two modes. Tools has no genuine second action yet, so it
+  // intentionally ships with a single chip rather than an invented one.
+  function footerSecondaryChipFor(mode: AppModeId): FooterActionChip | null {
+    switch (mode) {
+      case "services":
+        return {
+          icon: ListChecks,
+          shortLabel: "Pathways",
+          longLabel: "Pathways",
+          actionId: "services-pathways",
+          ariaLabel: "Browse referral pathways",
+        };
+      case "favourites":
+        return {
+          icon: FolderOpen,
+          shortLabel: "Sets",
+          longLabel: "Sets",
+          actionId: "favourites-sets",
+          ariaLabel: "Open saved sets",
+        };
+      case "differentials":
+        return {
+          icon: GitBranch,
+          shortLabel: "Criteria",
+          longLabel: "Criteria",
+          actionId: "differentials-criteria",
+          ariaLabel: "Compare distinguishing criteria",
+        };
+      case "prescribing":
+        return {
+          icon: Activity,
+          shortLabel: "Monitor",
+          longLabel: "Monitoring",
+          actionId: "medication-monitoring",
+          ariaLabel: "Review the monitoring schedule",
+        };
+      default:
+        return null;
+    }
+  }
+
+  function runFooterChipAction(actionId: FooterChipActionId) {
+    if (actionId === "open-evidence") {
+      onOpenEvidence?.();
+      return;
+    }
+    if (actionId === "forms-library") {
+      onSearchModeChange("forms");
+      onQueryChange("");
+      return;
+    }
+    runModeAction(actionId);
+  }
+
   function renderSearchComposer(placement: "default" | "desktop-home") {
     const isDesktopHomeComposer = placement === "desktop-home";
     const usesAnswerFooterStyle = isAnswerFooterComposer && !isDesktopHomeComposer;
     const usesMobileBottomStyle = isMobileBottomComposer && !isDesktopHomeComposer;
     const usesUniversalFooterStyle = usesAnswerFooterStyle || (usesMobileBottomStyle && usesPhoneSearchLayout);
-    const showFooterSearchChips = usesUniversalFooterStyle && searchMode === "answer";
-    // Only the Answer chat composer uses the send affordance; every search-mode home uses the magnifier.
+    // Every mode shows the universal footer chip row on its small-screen composer now;
+    // larger screens (sticky-top / hero composers) are untouched for now.
+    const showFooterSearchChips = usesUniversalFooterStyle;
+    // Answer keeps the send affordance everywhere (it's the one conversational compose
+    // mode). Every other mode swaps the magnifier for its own mode-identity glyph, but
+    // only on the small-screen floating composer — larger screens keep the magnifier.
     const usesSendAffordance = usesAnswerFooterStyle;
+    const usesModeIdentityAffordance = usesUniversalFooterStyle && !usesSendAffordance;
+    const ModeIdentityIcon = appModeIcons[searchMode];
+    const hasScopeFooterChip = searchMode === "answer" || searchMode === "documents";
+    const trustFooterChip = footerTrustChipFor(searchMode);
+    const secondaryFooterChip = footerSecondaryChipFor(searchMode);
+    // Fallback icons here are never rendered — both are only used inside a JSX guard
+    // on the corresponding chip being non-null — but keep the icon variables typed as
+    // components (not `| null`) so the JSX below type-checks without a cast.
+    const TrustFooterChipIcon = trustFooterChip?.icon ?? BadgeCheck;
+    const SecondaryFooterChipIcon = secondaryFooterChip?.icon ?? ListChecks;
     const composerPlaceholder =
       usesMobileBottomStyle && searchMode === "differentials" ? "Search a presentation" : queryPlaceholder;
 
@@ -1004,38 +1163,56 @@ export function MasterSearchHeader({
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : usesSendAffordance ? (
               <Send className="h-4 w-4" />
+            ) : usesModeIdentityAffordance ? (
+              <ModeIdentityIcon className="h-4.5 w-4.5" />
             ) : (
               <Search className="h-4.5 w-4.5" />
             )}
             <span className="sr-only">{submitLabel}</span>
           </button>
         </div>
-        {showFooterSearchChips ? (
+        {showFooterSearchChips && (trustFooterChip || hasScopeFooterChip || secondaryFooterChip) ? (
           <div className="flex max-w-full flex-wrap items-center justify-center gap-2 px-2">
-            <button
-              type="button"
-              onClick={() => onOpenEvidence?.()}
-              className="answer-footer-search-chip"
-              aria-label="Open evidence-backed answer sources"
-            >
-              <ShieldCheck className="h-4 w-4" aria-hidden="true" />
-              <span className="sm:hidden">Evidence</span>
-              <span className="hidden sm:inline">Evidence-based</span>
-            </button>
-            <button
-              type="button"
-              ref={scopeSummaryRef}
-              data-testid="scope-trigger"
-              onClick={openScopePicker}
-              className="answer-footer-search-chip"
-              aria-expanded={usesScopeSheet ? scopeSheetOpen : scopeOpen}
-              aria-label="Open source scope"
-            >
-              <Filter className="h-4 w-4" aria-hidden="true" />
-              <span className="sm:hidden">{selectedDocumentIds.length === 0 ? "Sources" : footerScopeLabel}</span>
-              <span className="hidden sm:inline">{footerScopeLabel}</span>
-            </button>
-            {!usesScopeSheet && scopeOpen ? (
+            {trustFooterChip ? (
+              <button
+                type="button"
+                onClick={() => runFooterChipAction(trustFooterChip.actionId)}
+                className="answer-footer-search-chip"
+                aria-label={trustFooterChip.ariaLabel}
+              >
+                <TrustFooterChipIcon className="h-4 w-4" aria-hidden="true" />
+                <span className="sm:hidden">{trustFooterChip.shortLabel}</span>
+                <span className="hidden sm:inline">{trustFooterChip.longLabel}</span>
+              </button>
+            ) : null}
+            {hasScopeFooterChip ? (
+              <button
+                type="button"
+                ref={scopeSummaryRef}
+                data-testid="scope-trigger"
+                onClick={openScopePicker}
+                className="answer-footer-search-chip"
+                aria-expanded={usesScopeSheet ? scopeSheetOpen : scopeOpen}
+                aria-label="Open source scope"
+              >
+                <Filter className="h-4 w-4" aria-hidden="true" />
+                <span className="sm:hidden">{selectedDocumentIds.length === 0 ? "Sources" : footerScopeLabel}</span>
+                <span className="hidden sm:inline">{footerScopeLabel}</span>
+              </button>
+            ) : null}
+            {!hasScopeFooterChip && secondaryFooterChip ? (
+              <button
+                type="button"
+                onClick={() => runFooterChipAction(secondaryFooterChip.actionId)}
+                className="answer-footer-search-chip"
+                aria-label={secondaryFooterChip.ariaLabel}
+              >
+                <SecondaryFooterChipIcon className="h-4 w-4" aria-hidden="true" />
+                <span className="sm:hidden">{secondaryFooterChip.shortLabel}</span>
+                <span className="hidden sm:inline">{secondaryFooterChip.longLabel}</span>
+              </button>
+            ) : null}
+            {hasScopeFooterChip && !usesScopeSheet && scopeOpen ? (
               <div
                 ref={scopePopoverRef}
                 data-testid="scope-command-popover"
diff --git a/src/components/document-search-live-opener.tsx b/src/components/document-search-live-opener.tsx
index 79e2f468b5..b580fad739 100644
--- a/src/components/document-search-live-opener.tsx
+++ b/src/components/document-search-live-opener.tsx
@@ -2,7 +2,21 @@
 
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { AlertCircle, ArrowLeft, ExternalLink, FileText, Loader2, Search } from "lucide-react";
+import {
+  AlertCircle,
+  ArrowLeft,
+  BadgeCheck,
+  BookOpen,
+  ExternalLink,
+  FileImage,
+  FileText,
+  Filter,
+  Loader2,
+  Search,
+  Sparkles,
+  Table2,
+  Target,
+} from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 
 import { cn } from "@/components/ui-primitives";
@@ -37,13 +51,124 @@ type DocumentDetailPayload = {
 };
 
 type ResolverState =
-  { status: "opening"; message: string; liveHref?: string } | { status: "error"; message: string; liveHref?: string };
+  { status: "opening"; message: string; liveHref?: string } | { status: "mock"; message: string; liveHref?: string };
+
+type MockSourceDocument = {
+  slug: string;
+  title: string;
+  fileName: string;
+  kind: string;
+  defaultPage: number;
+  pageCount: number;
+  status: string;
+  review: string;
+  section: string;
+  summary: string;
+  tags: string[];
+  matchedTerms: string[];
+  evidence: Array<{ label: string; value: string; icon: typeof Table2; tone: "success" | "info" | "warning" }>;
+  passage: string[];
+  tableRows: Array<[string, string, string]>;
+};
 
 const focusRing =
   "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
 
 const defaultQuery = "clozapine monitoring table";
 
+const mockSources: MockSourceDocument[] = [
+  {
+    slug: "clozapine-monitoring",
+    title: "Clozapine physical health monitoring protocol",
+    fileName: "clozapine-physical-health-monitoring.pdf",
+    kind: "Protocol",
+    defaultPage: 12,
+    pageCount: 18,
+    status: "Current",
+    review: "Review 2026",
+    section: "Blood test monitoring table",
+    summary:
+      "Mock source preview for the command-centre handoff. It keeps the exact page, table evidence, and actions visible without requiring private document authentication.",
+    tags: ["Medication", "Monitoring", "Shared care"],
+    matchedTerms: ["clozapine", "monitoring", "table"],
+    evidence: [
+      { label: "Table evidence", value: "8 rows", icon: Table2, tone: "success" },
+      { label: "PDF page", value: "p.12", icon: FileText, tone: "info" },
+      { label: "Review note", value: "2026", icon: AlertCircle, tone: "warning" },
+    ],
+    passage: [
+      "Monitoring requirements are grouped by treatment stage and missed-dose interval.",
+      "Restart and escalation decisions should be checked against the local protocol table.",
+      "Shared-care transfer requires the monitoring schedule and review responsibility to be visible.",
+    ],
+    tableRows: [
+      ["Stable treatment", "Continue scheduled FBC/ANC checks", "Routine review"],
+      ["Missed dose 48-72h", "Restart pathway and monitoring check", "Prescriber review"],
+      ["Review due", "Confirm local protocol currency", "Document source status"],
+    ],
+  },
+  {
+    slug: "acute-agitation-pathway",
+    title: "Acute agitation clinical pathway",
+    fileName: "acute-agitation-clinical-pathway.pdf",
+    kind: "Guideline",
+    defaultPage: 4,
+    pageCount: 9,
+    status: "Current",
+    review: "Local pathway",
+    section: "Flowchart and escalation pathway",
+    summary:
+      "Mock source preview showing how image and flowchart evidence can stay attached to the selected search result.",
+    tags: ["Risk", "Escalation", "ED"],
+    matchedTerms: ["agitation", "pathway", "flowchart"],
+    evidence: [
+      { label: "Image evidence", value: "flowchart", icon: FileImage, tone: "info" },
+      { label: "PDF page", value: "p.4", icon: FileText, tone: "success" },
+      { label: "Risk pathway", value: "visible", icon: AlertCircle, tone: "warning" },
+    ],
+    passage: [
+      "The pathway separates immediate safety steps from medication and senior review prompts.",
+      "Flowchart evidence remains visible before opening the full source file.",
+      "Escalation points are grouped so the result can be scoped or used for a follow-up answer.",
+    ],
+    tableRows: [
+      ["Immediate risk", "Use local safety pathway", "Escalate"],
+      ["De-escalation", "Document response and triggers", "Review"],
+      ["Senior input", "Confirm local governance", "Open source"],
+    ],
+  },
+  {
+    slug: "mental-health-act-forms",
+    title: "Mental Health Act forms quick reference",
+    fileName: "mental-health-act-forms-reference.pdf",
+    kind: "Quick reference",
+    defaultPage: 2,
+    pageCount: 6,
+    status: "Indexed",
+    review: "Form checklist",
+    section: "Forms and documentation",
+    summary:
+      "Mock source preview for form-heavy results, keeping the document type and target page obvious from the handoff.",
+    tags: ["Forms", "Workflow", "Legal"],
+    matchedTerms: ["forms", "workflow", "reference"],
+    evidence: [
+      { label: "Checklist", value: "forms", icon: BadgeCheck, tone: "success" },
+      { label: "PDF page", value: "p.2", icon: FileText, tone: "info" },
+      { label: "Workflow", value: "legal", icon: AlertCircle, tone: "warning" },
+    ],
+    passage: [
+      "The quick reference groups forms by use case and required documentation step.",
+      "The handoff preserves the target page so users can inspect the original source quickly.",
+      "Scope and answer actions remain available from the selected source preview.",
+    ],
+    tableRows: [
+      ["Assessment", "Open form checklist", "Confirm status"],
+      ["Transfer", "Check required document", "Open source"],
+      ["Review", "Record local governance", "Scope"],
+    ],
+  },
+];
+
 async function fetchJson<T>(url: string, signal: AbortSignal, authorizationHeader: Record<string, string>): Promise<T> {
   const response = await fetch(url, {
     cache: "no-store",
@@ -74,12 +199,315 @@ function liveDocumentHref(documentId: string, result: ChunkSearchResult | undefi
   return `/documents/${documentId}?${params.toString()}`;
 }
 
+function numberParam(value: string | null, fallback: number) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : fallback;
+}
+
+function mockSourceFor(documentHint: string, query: string) {
+  const normalized = `${documentHint} ${query}`.toLowerCase();
+  return (
+    mockSources.find((source) => normalized.includes(source.slug) || normalized.includes(source.title.toLowerCase())) ??
+    (normalized.includes("agitation")
+      ? mockSources.find((source) => source.slug === "acute-agitation-pathway")
+      : null) ??
+    (normalized.includes("mental health act") || normalized.includes("forms")
+      ? mockSources.find((source) => source.slug === "mental-health-act-forms")
+      : null) ??
+    mockSources[0]
+  );
+}
+
+function TonePill({
+  children,
+  tone = "neutral",
+}: {
+  children: React.ReactNode;
+  tone?: "accent" | "info" | "success" | "warning" | "neutral";
+}) {
+  const toneClass =
+    tone === "accent"
+      ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
+      : tone === "info"
+        ? "border-[color:var(--info-border)] bg-[color:var(--info-soft)] text-[color:var(--info)]"
+        : tone === "success"
+          ? "border-[color:var(--success-border)] bg-[color:var(--success-soft)] text-[color:var(--success)]"
+          : tone === "warning"
+            ? "border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] text-[color:var(--warning)]"
+            : "border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)]";
+  return (
+    <span
+      className={cn(
+        "inline-flex min-h-7 max-w-full items-center rounded-md border px-2.5 text-xs font-bold shadow-[var(--shadow-inset)]",
+        toneClass,
+      )}
+    >
+      <span className="truncate">{children}</span>
+    </span>
+  );
+}
+
+function EvidenceCard({ label, value, icon: Icon, tone }: MockSourceDocument["evidence"][number]) {
+  const toneClass =
+    tone === "success"
+      ? "border-[color:var(--success-border)] bg-[color:var(--success-soft)] text-[color:var(--success)]"
+      : tone === "warning"
+        ? "border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] text-[color:var(--warning)]"
+        : "border-[color:var(--info-border)] bg-[color:var(--info-soft)] text-[color:var(--info)]";
+  return (
+    <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-3 shadow-[var(--shadow-inset)]">
+      <span className={cn("inline-flex h-8 w-8 items-center justify-center rounded-md border", toneClass)}>
+        <Icon className="h-4 w-4" aria-hidden="true" />
+      </span>
+      <p className="mt-3 text-sm font-extrabold text-[color:var(--text-heading)]">{label}</p>
+      <p className="mt-1 text-xs font-bold text-[color:var(--text-muted)]">{value}</p>
+    </div>
+  );
+}
+
+function MockDocumentPagePreview({ source, page, chunk }: { source: MockSourceDocument; page: number; chunk: string }) {
+  return (
+    <section
+      aria-label="Mock highlighted source page"
+      className="overflow-hidden rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[var(--shadow-soft)]"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-4 py-3">
+        <div className="min-w-0">
+          <p className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--clinical-accent)]">
+            Mock source page
+          </p>
+          <h2 className="mt-1 truncate text-base font-extrabold text-[color:var(--text-heading)]">{source.section}</h2>
+        </div>
+        <div className="flex flex-wrap gap-1.5">
+          <TonePill tone="accent">p.{page}</TonePill>
+          <TonePill tone="info">{chunk.replaceAll("-", " ")}</TonePill>
+        </div>
+      </div>
+      <div className="grid gap-4 p-4 lg:grid-cols-[minmax(0,1fr)_11rem]">
+        <div className="min-w-0 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-4 shadow-[var(--shadow-inset)]">
+          <div className="space-y-2">
+            <span className="block h-3 w-44 rounded bg-[color:var(--text-soft)]/45" />
+            <span className="block h-2.5 w-72 max-w-full rounded bg-[color:var(--border-strong)]" />
+            <span className="block h-2.5 w-60 max-w-full rounded bg-[color:var(--border)]" />
+          </div>
+          <div className="mt-5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] p-3">
+            <p className="text-sm font-bold leading-6 text-[color:var(--text-heading)]">{source.passage[0]}</p>
+          </div>
+          <div className="mt-4 space-y-2">
+            {source.passage.slice(1).map((line) => (
+              <p key={line} className="text-sm font-medium leading-6 text-[color:var(--text-muted)]">
+                {line}
+              </p>
+            ))}
+          </div>
+          <div className="mt-5 overflow-hidden rounded-lg border border-[color:var(--border)]">
+            <table className="w-full border-collapse text-left text-xs">
+              <thead className="bg-[color:var(--clinical-chat-table-header)] text-[color:var(--text-muted)]">
+                <tr>
+                  <th className="border-b border-[color:var(--border)] px-3 py-2 font-extrabold">Source row</th>
+                  <th className="border-b border-[color:var(--border)] px-3 py-2 font-extrabold">What to review</th>
+                  <th className="border-b border-[color:var(--border)] px-3 py-2 font-extrabold">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {source.tableRows.map((row, index) => (
+                  <tr key={row.join(":")} className={index === 1 ? "bg-[color:var(--clinical-accent-soft)]" : ""}>
+                    {row.map((cell) => (
+                      <td key={cell} className="border-b border-[color:var(--border)] px-3 py-2 font-semibold">
+                        {cell}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <aside className="grid content-start gap-2">
+          {Array.from({ length: 4 }).map((_, index) => {
+            const pageNumber = Math.max(1, page - 1 + index);
+            const active = pageNumber === page;
+            return (
+              <div
+                key={pageNumber}
+                className={cn(
+                  "rounded-lg border bg-[color:var(--surface)] p-2 shadow-[var(--shadow-inset)]",
+                  active
+                    ? "border-[color:var(--clinical-accent)] ring-1 ring-[color:var(--clinical-accent)]/20"
+                    : "border-[color:var(--border)]",
+                )}
+              >
+                <p className="nums text-xs font-extrabold text-[color:var(--text-heading)]">p.{pageNumber}</p>
+                <div className="mt-2 space-y-1">
+                  <span className="block h-1.5 w-full rounded bg-[color:var(--border-strong)]" />
+                  <span className="block h-1.5 w-4/5 rounded bg-[color:var(--border)]" />
+                  <span
+                    className={cn(
+                      "block h-6 rounded",
+                      active ? "bg-[color:var(--clinical-accent-soft)]" : "bg-[color:var(--surface-subtle)]",
+                    )}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </aside>
+      </div>
+    </section>
+  );
+}
+
+function MockSourceWorkbench({
+  source,
+  page,
+  chunk,
+  query,
+  message,
+  liveHref,
+}: {
+  source: MockSourceDocument;
+  page: number;
+  chunk: string;
+  query: string;
+  message: string;
+  liveHref?: string;
+}) {
+  return (
+    <div className="space-y-4">
+      <section className="rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] p-4 shadow-[var(--shadow-inset)]">
+        <div className="grid gap-3 lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:items-center">
+          <span className="grid h-11 w-11 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
+            <Sparkles className="h-5 w-5" aria-hidden="true" />
+          </span>
+          <div className="min-w-0">
+            <p className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--clinical-accent)]">
+              Mock source preview
+            </p>
+            <h1 className="mt-1 text-2xl font-extrabold leading-tight text-[color:var(--text-heading)]">
+              {source.title}
+            </h1>
+            <p className="mt-1 text-sm font-semibold leading-6 text-[color:var(--text-muted)]">{message}</p>
+          </div>
+          {liveHref ? (
+            <Link
+              href={liveHref}
+              className={cn(
+                "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[color:var(--command)] px-3 text-sm font-bold text-[color:var(--command-contrast)] shadow-[var(--shadow-tight)]",
+                focusRing,
+              )}
+            >
+              <ExternalLink className="h-4 w-4" aria-hidden="true" />
+              Open live document
+            </Link>
+          ) : null}
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
+        <div className="min-w-0 space-y-4">
+          <MockDocumentPagePreview source={source} page={page} chunk={chunk} />
+          <div className="grid gap-3 md:grid-cols-3">
+            {source.evidence.map((item) => (
+              <EvidenceCard key={item.label} {...item} />
+            ))}
+          </div>
+        </div>
+
+        <aside className="space-y-3">
+          <section className="rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-4 shadow-[var(--shadow-soft)]">
+            <div className="flex items-center gap-3">
+              <span className="grid h-10 w-10 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
+                <Target className="h-4 w-4" aria-hidden="true" />
+              </span>
+              <div>
+                <p className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--text-soft)]">
+                  Why this result
+                </p>
+                <h2 className="text-base font-extrabold text-[color:var(--text-heading)]">Direct source support</h2>
+              </div>
+            </div>
+            <dl className="mt-4 grid gap-2 text-sm">
+              <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3">
+                <dt className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--text-soft)]">
+                  Query
+                </dt>
+                <dd className="mt-1 font-bold text-[color:var(--text-heading)]">{query}</dd>
+              </div>
+              <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3">
+                <dt className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--text-soft)]">
+                  Matched terms
+                </dt>
+                <dd className="mt-2 flex flex-wrap gap-1.5">
+                  {source.matchedTerms.map((term) => (
+                    <TonePill key={term} tone="accent">
+                      {term}
+                    </TonePill>
+                  ))}
+                </dd>
+              </div>
+              <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3">
+                <dt className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--text-soft)]">
+                  Source metadata
+                </dt>
+                <dd className="mt-2 flex flex-wrap gap-1.5">
+                  <TonePill tone="success">{source.status}</TonePill>
+                  <TonePill tone="warning">{source.review}</TonePill>
+                  <TonePill tone="info">{source.kind}</TonePill>
+                </dd>
+              </div>
+            </dl>
+          </section>
+
+          <section className="rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-4 shadow-[var(--shadow-soft)]">
+            <h2 className="text-sm font-extrabold text-[color:var(--text-heading)]">Actions</h2>
+            <div className="mt-3 grid gap-2">
+              <button
+                type="button"
+                className={cn(
+                  "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[color:var(--command)] px-3 text-sm font-bold text-[color:var(--command-contrast)] shadow-[var(--shadow-tight)]",
+                  focusRing,
+                )}
+              >
+                <BookOpen className="h-4 w-4" aria-hidden="true" />
+                Open mock page
+              </button>
+              <button
+                type="button"
+                className={cn(
+                  "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] px-3 text-sm font-bold text-[color:var(--text)] shadow-[var(--shadow-inset)]",
+                  focusRing,
+                )}
+              >
+                <Filter className="h-4 w-4" aria-hidden="true" />
+                Scope to source
+              </button>
+              <button
+                type="button"
+                className={cn(
+                  "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-bold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]",
+                  focusRing,
+                )}
+              >
+                <Sparkles className="h-4 w-4" aria-hidden="true" />
+                Answer from this source
+              </button>
+            </div>
+          </section>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
 export function DocumentSearchLiveOpener() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { authorizationHeader } = useAuthSession();
+  const { authorizationHeader, status: authStatus } = useAuthSession();
   const query = searchParams.get("q")?.trim() || defaultQuery;
   const documentHint = searchParams.get("document")?.trim() || "clozapine";
+  const mockSource = useMemo(() => mockSourceFor(documentHint, query), [documentHint, query]);
+  const requestedPage = numberParam(searchParams.get("page"), mockSource.defaultPage);
+  const chunk = searchParams.get("chunk")?.trim() || "best-match";
   const [state, setState] = useState<ResolverState>({
     status: "opening",
     message: "Finding an indexed document and matching source chunk.",
@@ -91,6 +519,11 @@ export function DocumentSearchLiveOpener() {
     const controller = new AbortController();
 
     async function openLiveDocument() {
+      if (authStatus === "loading") {
+        setState({ status: "opening", message: "Checking browser document access." });
+        return;
+      }
+
       try {
         setState({ status: "opening", message: "Finding a real indexed document." });
         const documentParams = new URLSearchParams({
@@ -118,8 +551,9 @@ export function DocumentSearchLiveOpener() {
 
         if (documents.length === 0) {
           setState({
-            status: "error",
-            message: "No indexed documents are available to open in the live viewer.",
+            status: "mock",
+            message:
+              "No indexed live document was available for this lookup. This mock preview shows the intended source handoff.",
           });
           return;
         }
@@ -161,19 +595,22 @@ export function DocumentSearchLiveOpener() {
       } catch (error) {
         if (controller.signal.aborted) return;
         setState({
-          status: "error",
-          message: error instanceof Error ? error.message : "The live document could not be opened.",
+          status: "mock",
+          message:
+            error instanceof Error
+              ? `${error.message} Showing the mock source preview instead.`
+              : "The live document could not be opened. Showing the mock source preview instead.",
         });
       }
     }
 
     void openLiveDocument();
     return () => controller.abort();
-  }, [authorizationHeader, lookupTerm, query, router]);
+  }, [authStatus, authorizationHeader, lookupTerm, query, router]);
 
   return (
     <main className="min-h-screen bg-[color:var(--background)] px-3 py-4 pb-28 text-[color:var(--text)] sm:px-6 sm:py-6 lg:px-8">
-      <div className="mx-auto max-w-3xl space-y-4">
+      <div className="mx-auto max-w-7xl space-y-4">
         <Link
           href="/mockups/document-search-command?mode=documents"
           className={cn(
@@ -185,49 +622,43 @@ export function DocumentSearchLiveOpener() {
           Back to mockup
         </Link>
 
-        <section className="rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-5 shadow-[var(--shadow-soft)]">
-          <div className="flex flex-wrap items-start gap-3">
-            <span className="grid h-11 w-11 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
-              {state.status === "opening" ? (
+        {state.status === "opening" ? (
+          <section className="rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-5 shadow-[var(--shadow-soft)]">
+            <div className="flex flex-wrap items-start gap-3">
+              <span className="grid h-11 w-11 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
                 <Loader2 className="h-5 w-5 animate-spin motion-reduce:animate-none" aria-hidden="true" />
-              ) : (
-                <AlertCircle className="h-5 w-5" aria-hidden="true" />
-              )}
-            </span>
-            <div className="min-w-0 flex-1">
-              <p className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--clinical-accent)]">
-                Live document handoff
-              </p>
-              <h1 className="mt-2 text-2xl font-extrabold leading-tight text-[color:var(--text-heading)]">
-                {state.status === "opening" ? "Opening the actual document" : "Could not open the actual document"}
-              </h1>
-              <p className="mt-2 text-sm font-medium leading-6 text-[color:var(--text-muted)]">{state.message}</p>
-              <div className="mt-4 flex flex-wrap gap-2">
-                <span className="inline-flex min-h-7 items-center gap-1.5 rounded-md border border-[color:var(--info-border)] bg-[color:var(--info-soft)] px-2.5 text-xs font-bold text-[color:var(--info)]">
-                  <Search className="h-3.5 w-3.5" aria-hidden="true" />
-                  {query}
-                </span>
-                <span className="inline-flex min-h-7 items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)]">
-                  <FileText className="h-3.5 w-3.5" aria-hidden="true" />
-                  actual viewer route
-                </span>
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--clinical-accent)]">
+                  Live document handoff
+                </p>
+                <h1 className="mt-2 text-2xl font-extrabold leading-tight text-[color:var(--text-heading)]">
+                  Opening the actual document
+                </h1>
+                <p className="mt-2 text-sm font-medium leading-6 text-[color:var(--text-muted)]">{state.message}</p>
+                <div className="mt-4 flex flex-wrap gap-2">
+                  <span className="inline-flex min-h-7 items-center gap-1.5 rounded-md border border-[color:var(--info-border)] bg-[color:var(--info-soft)] px-2.5 text-xs font-bold text-[color:var(--info)]">
+                    <Search className="h-3.5 w-3.5" aria-hidden="true" />
+                    {query}
+                  </span>
+                  <span className="inline-flex min-h-7 items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)]">
+                    <FileText className="h-3.5 w-3.5" aria-hidden="true" />
+                    actual viewer route
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-
-          {state.liveHref ? (
-            <Link
-              href={state.liveHref}
-              className={cn(
-                "mt-5 inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[color:var(--command)] px-3 text-sm font-bold text-[color:var(--command-contrast)] shadow-[var(--shadow-tight)]",
-                focusRing,
-              )}
-            >
-              <ExternalLink className="h-4 w-4" aria-hidden="true" />
-              Open live document
-            </Link>
-          ) : null}
-        </section>
+          </section>
+        ) : (
+          <MockSourceWorkbench
+            source={mockSource}
+            page={requestedPage}
+            chunk={chunk}
+            query={query}
+            message={state.message}
+            liveHref={state.liveHref}
+          />
+        )}
       </div>
     </main>
   );
diff --git a/src/components/forms/form-detail-page.tsx b/src/components/forms/form-detail-page.tsx
index daad9f0fb5..d12ee6db03 100644
--- a/src/components/forms/form-detail-page.tsx
+++ b/src/components/forms/form-detail-page.tsx
@@ -644,6 +644,10 @@ export function FormDetailPage({ form }: { form: FormRecord }) {
               )}
             </section>
 
+            <div className="lg:hidden">
+              <PathwayContextCard form={form} code={code} criteria={criteria} testId="form-decision-context-mobile" />
+            </div>
+
             <section aria-label="Priority facts" className="space-y-2.5 sm:space-y-3">
               <h2 className="text-base-minus font-semibold leading-5 text-[color:var(--text-heading)] sm:text-base">
                 Priority facts
@@ -655,10 +659,6 @@ export function FormDetailPage({ form }: { form: FormRecord }) {
               </div>
             </section>
 
-            <div className="lg:hidden">
-              <PathwayContextCard form={form} code={code} criteria={criteria} testId="form-decision-context-mobile" />
-            </div>
-
             <section className="rounded-lg border border-[color:var(--warning-border)] bg-[color:var(--warning-soft)]/30 p-4 shadow-[var(--shadow-inset)]">
               <div className="grid gap-3 sm:grid-cols-[2.5rem_minmax(0,1fr)]">
                 <span className="grid h-10 w-10 place-items-center rounded-lg bg-[color:var(--warning-soft)] text-[color:var(--warning)] shadow-[var(--shadow-inset)]">
diff --git a/src/components/services/services-navigator-preview.tsx b/src/components/services/services-navigator-preview.tsx
new file mode 100644
index 0000000000..bb6219ab0d
--- /dev/null
+++ b/src/components/services/services-navigator-preview.tsx
@@ -0,0 +1,771 @@
+"use client";
+
+import Link from "next/link";
+import {
+  ArrowRight,
+  Bookmark,
+  Check,
+  ChevronDown,
+  CircleAlert,
+  CircleCheck,
+  CircleX,
+  DollarSign,
+  ExternalLink,
+  Menu,
+  Mic,
+  Phone,
+  Plus,
+  Search,
+  Send,
+  ShieldCheck,
+  SlidersHorizontal,
+  Users,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { cn } from "@/components/ui-primitives";
+import { searchServiceRecords, serviceRecords, type ServiceRecord, type ServiceStatusChip } from "@/lib/services";
+
+const defaultQuery = "13YARN crisis support aboriginal phone";
+
+function visibleText(value: string | null | undefined, fallback = "Confirm locally") {
+  return value?.trim() ? value.trim() : fallback;
+}
+
+function chipToneClass(tone: ServiceStatusChip["tone"] | undefined | null) {
+  if (tone === "danger") return "border-red-200 bg-red-50 text-red-700";
+  if (tone === "info") return "border-sky-200 bg-sky-50 text-sky-700";
+  if (tone === "warning") return "border-orange-200 bg-orange-50 text-orange-700";
+  if (tone === "success") return "border-emerald-200 bg-emerald-50 text-emerald-700";
+  return "border-slate-200 bg-slate-50 text-slate-600";
+}
+
+function criterionCounts(records: ServiceRecord[]) {
+  return records.reduce(
+    (totals, service) => {
+      for (const criterion of service.criteria ?? []) {
+        if (criterion.tone === "meet") totals.meets += 1;
+        if (criterion.tone === "caution") totals.cautions += 1;
+        if (criterion.tone === "reject") totals.rejects += 1;
+      }
+      return totals;
+    },
+    { meets: 0, cautions: 0, rejects: 0 },
+  );
+}
+
+function confidenceCounts(records: ServiceRecord[]) {
+  return records.reduce(
+    (totals, service) => {
+      const confidence = service.verification?.confidence ?? "Unknown";
+      if (confidence === "High") totals.high += 1;
+      else if (confidence === "Medium") totals.medium += 1;
+      else if (confidence === "Low") totals.low += 1;
+      else totals.unknown += 1;
+      return totals;
+    },
+    { high: 0, medium: 0, low: 0, unknown: 0 },
+  );
+}
+
+function ServiceBadge({ chip }: { chip: ServiceStatusChip }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex min-h-6 items-center gap-1 rounded-full border px-2 text-[11px] font-bold",
+        chipToneClass(chip.tone),
+      )}
+    >
+      <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden />
+      {visibleText(chip.label, "Status")}
+    </span>
+  );
+}
+
+function Metric({
+  icon: Icon,
+  label,
+  value,
+  detail,
+}: {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+  detail: string;
+}) {
+  return (
+    <div className="grid min-h-[74px] min-w-0 grid-cols-[2rem_minmax(0,1fr)] items-center gap-2 overflow-hidden border-t border-slate-200 px-3 py-2 first:border-t-0 md:border-l md:border-t-0 md:first:border-l-0">
+      <span className="grid h-8 w-8 place-items-center rounded-full text-[#00669a]" aria-hidden>
+        <Icon className="h-5 w-5" />
+      </span>
+      <span className="min-w-0">
+        <span className="block text-[11px] font-semibold leading-4 text-slate-500">{label}</span>
+        <span className="block truncate text-sm font-bold leading-5 text-[#061740]">{value}</span>
+        <span className="block truncate text-[11px] font-medium leading-4 text-slate-500">{detail}</span>
+      </span>
+    </div>
+  );
+}
+
+function ServiceCard({
+  service,
+  index,
+  selected,
+  onToggleSelected,
+  compact = false,
+}: {
+  service: ServiceRecord;
+  index: number;
+  selected: boolean;
+  onToggleSelected: (slug: string) => void;
+  compact?: boolean;
+}) {
+  const rank = index + 1;
+  const highlighted = rank <= 2;
+  const contact = visibleText(service.primaryContact?.value);
+  const route = visibleText(service.primaryContact?.detail ?? service.route, "Referral route pending");
+  const eligibility = visibleText(service.eligibility, "Eligibility pending");
+  const cost = visibleText(service.cost, "Cost pending");
+  const tags = [...(service.catchments ?? []), ...(service.tags ?? [])].slice(0, compact ? 3 : 5);
+
+  return (
+    <article
+      className={cn(
+        "rounded-lg border bg-white shadow-[0_10px_24px_rgba(15,23,42,0.045)] transition",
+        highlighted ? "border-[#58a7ff] ring-1 ring-[#58a7ff]/35" : "border-slate-200",
+        compact ? "p-3" : "p-4",
+      )}
+    >
+      <div className="grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-start gap-3">
+        <span className="grid h-8 w-8 place-items-center rounded-full bg-[#007a78] text-sm font-bold text-white">
+          {rank}
+        </span>
+        <div className="min-w-0 overflow-hidden">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className={cn("min-w-0 font-bold leading-tight text-[#071844]", compact ? "text-base" : "text-lg")}>
+              {service.title}
+            </h3>
+            {!compact && highlighted ? (
+              <span className="rounded-full bg-[#007a78] px-2.5 py-1 text-[11px] font-bold text-white">Best fit</span>
+            ) : null}
+          </div>
+          <div className="mt-2 flex min-w-0 flex-wrap gap-1.5 overflow-hidden">
+            {(service.statusChips ?? []).slice(0, compact ? 3 : 4).map((chip) => (
+              <ServiceBadge key={`${service.slug}-${chip.label}`} chip={chip} />
+            ))}
+          </div>
+          <p
+            className={cn(
+              "mt-2 max-w-full font-medium text-slate-600",
+              compact ? "text-xs leading-5" : "text-sm leading-6",
+            )}
+          >
+            {visibleText(service.subtitle ?? service.bestUse, "Open the record for referral details.")}
+          </p>
+        </div>
+        <button
+          type="button"
+          aria-label={selected ? `Remove ${service.title} from selected services` : `Save ${service.title}`}
+          onClick={() => onToggleSelected(service.slug)}
+          className="grid h-9 w-9 place-items-center rounded-lg text-[#061740] hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#007a78]"
+        >
+          <Bookmark className={cn("h-5 w-5", selected && "fill-[#007a78] text-[#007a78]")} />
+        </button>
+      </div>
+
+      <div
+        className={cn(
+          "mt-3 min-w-0 overflow-hidden rounded-lg border border-slate-200 bg-white",
+          compact ? "grid grid-cols-2" : "grid sm:grid-cols-2 md:grid-cols-4",
+        )}
+      >
+        <Metric icon={Phone} label="Route / contact" value={contact} detail={route} />
+        <Metric icon={Users} label="Eligibility" value={eligibility} detail="See details" />
+        <Metric
+          icon={ShieldCheck}
+          label="Confidence"
+          value={visibleText(service.verification?.confidence, "Unknown")}
+          detail={visibleText(service.source?.status, "Source pending")}
+        />
+        <Metric
+          icon={DollarSign}
+          label="Cost"
+          value={cost}
+          detail={cost.toLowerCase().includes("free") ? "No cost" : "Confirm fees"}
+        />
+      </div>
+
+      <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
+        <div className="flex min-w-0 flex-wrap gap-1.5">
+          {tags.map((tag, tagIndex) => (
+            <span
+              key={`${service.slug}-${tag}`}
+              className={cn(
+                "rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-[11px] font-semibold text-slate-600",
+                tagIndex > 2 ? "max-sm:hidden" : "",
+              )}
+            >
+              {tag}
+            </span>
+          ))}
+          {(service.tags?.length ?? 0) + (service.catchments?.length ?? 0) > tags.length ? (
+            <span className="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-[11px] font-semibold text-slate-600">
+              +1
+            </span>
+          ) : null}
+        </div>
+        <div className="flex min-h-9 shrink-0 items-center gap-2">
+          <Link
+            href={`/services/${service.slug}`}
+            className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 text-xs font-bold text-[#061740] hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#007a78]"
+          >
+            <ExternalLink className="h-3.5 w-3.5" />
+            Open
+          </Link>
+          <button
+            type="button"
+            onClick={() => onToggleSelected(service.slug)}
+            className="inline-flex h-9 min-w-[94px] items-center justify-center gap-1.5 rounded-lg bg-[#007a78] px-3 text-xs font-bold text-white shadow-[0_8px_18px_rgba(0,122,120,0.18)] hover:bg-[#006d6b] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#007a78]"
+          >
+            <Check className="h-4 w-4" />
+            {selected ? "Selected" : "Select"}
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+function SearchBar({
+  value,
+  onChange,
+  compact = false,
+  showSubmit = true,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  compact?: boolean;
+  showSubmit?: boolean;
+}) {
+  return (
+    <form
+      className={cn(
+        "grid min-w-0 items-center gap-2 rounded-lg border border-slate-200 bg-white shadow-[0_10px_28px_rgba(15,23,42,0.05)] focus-within:border-[#007a78]",
+        showSubmit ? "grid-cols-[auto_minmax(0,1fr)_auto_auto_auto]" : "grid-cols-[auto_minmax(0,1fr)_auto_auto]",
+        compact ? "min-h-11 px-3" : "min-h-14 px-4",
+      )}
+      onSubmit={(event) => event.preventDefault()}
+    >
+      <Search className="h-5 w-5 text-[#061740]" aria-hidden />
+      <label
+        className="sr-only"
+        htmlFor={compact ? "mobile-services-preview-search" : "desktop-services-preview-search"}
+      >
+        Search services
+      </label>
+      <input
+        id={compact ? "mobile-services-preview-search" : "desktop-services-preview-search"}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="Search services..."
+        className="min-w-0 bg-transparent text-sm font-semibold text-[#061740] outline-none placeholder:text-slate-400"
+      />
+      {value ? (
+        <button
+          type="button"
+          onClick={() => onChange("")}
+          className="grid h-8 w-8 place-items-center rounded-full text-slate-500 hover:bg-slate-50"
+          aria-label="Clear search"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      ) : null}
+      <Mic className="h-5 w-5 text-[#061740]" aria-hidden />
+      {showSubmit ? (
+        <button
+          type="submit"
+          className="grid h-10 w-10 place-items-center rounded-full bg-[#007a78] text-white shadow-[0_8px_18px_rgba(0,122,120,0.24)]"
+          aria-label="Run services search"
+        >
+          <ArrowRight className="h-5 w-5" />
+        </button>
+      ) : null}
+    </form>
+  );
+}
+
+function Header() {
+  return (
+    <header className="grid min-h-20 grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-b border-slate-200 bg-white px-5">
+      <div className="flex min-w-0 items-center gap-4">
+        <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#007a78] text-white shadow-sm">
+          <ShieldCheck className="h-5 w-5" />
+        </span>
+        <div className="min-w-0">
+          <p className="truncate text-lg font-bold leading-6 text-[#071844]">Services Navigator</p>
+          <p className="truncate text-xs font-semibold text-slate-500">Psychiatry referral directory</p>
+        </div>
+        <span className="mx-4 hidden h-9 w-px bg-slate-200 sm:block" aria-hidden />
+        <button
+          className="hidden min-h-11 min-w-44 items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-3 text-left shadow-sm sm:flex"
+          type="button"
+        >
+          <span>
+            <span className="block text-[10px] font-bold uppercase text-slate-500">Mode</span>
+            <span className="block text-sm font-bold text-[#061740]">Services</span>
+          </span>
+          <ChevronDown className="h-4 w-4 text-[#061740]" />
+        </button>
+      </div>
+      <div className="hidden items-center gap-3 md:flex">
+        <button
+          className="inline-flex min-h-10 items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 text-sm font-bold text-[#061740] shadow-sm"
+          type="button"
+        >
+          Local only
+        </button>
+        <button
+          className="inline-flex min-h-10 items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 text-sm font-bold text-[#061740] shadow-sm"
+          type="button"
+        >
+          <Bookmark className="h-4 w-4" />
+          Saved
+          <span>2</span>
+        </button>
+        <span className="grid h-10 w-10 place-items-center rounded-full bg-[#e3f4f5] text-sm font-bold text-[#061740]">
+          AK
+        </span>
+      </div>
+    </header>
+  );
+}
+
+function Stepper() {
+  const steps = [
+    ["1", "Search", "Find services"],
+    ["2", "Shortlist", "Pick best options"],
+    ["3", "Compare", "Review side by side"],
+    ["4", "Refer", "Send with confidence"],
+  ];
+  return (
+    <div className="hidden rounded-lg border border-slate-200 bg-white p-3 shadow-sm lg:grid lg:grid-cols-4 lg:gap-3">
+      {steps.map(([number, title, body], index) => (
+        <div key={number} className="grid grid-cols-[2.25rem_minmax(0,1fr)] items-center gap-2">
+          <span
+            className={cn(
+              "grid h-9 w-9 place-items-center rounded-full border text-sm font-bold",
+              index === 0 ? "border-[#007a78] bg-[#007a78] text-white" : "border-slate-300 bg-white text-slate-500",
+            )}
+          >
+            {number}
+          </span>
+          <span className="min-w-0">
+            <span className={cn("block text-sm font-bold", index === 0 ? "text-[#007a78]" : "text-[#061740]")}>
+              {title}
+            </span>
+            <span className="block truncate text-xs font-semibold text-slate-500">{body}</span>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DesktopRightRail({
+  matches,
+  selected,
+  onToggleSelected,
+}: {
+  matches: ServiceRecord[];
+  selected: ServiceRecord[];
+  onToggleSelected: (slug: string) => void;
+}) {
+  const criteria = criterionCounts(matches);
+  const confidence = confidenceCounts(matches);
+  const localConfirmationCount = matches.filter((service) =>
+    (service.source?.status ?? "").toLowerCase().includes("confirmation"),
+  ).length;
+  const verifiedCount = matches.filter(
+    (service) =>
+      service.verification?.locallyVerified || (service.source?.status ?? "").toLowerCase().includes("source"),
+  ).length;
+  const checklistRows: Array<[string, number, LucideIcon, string]> = [
+    ["Meets", criteria.meets, CircleCheck, "text-emerald-600"],
+    ["Caution", criteria.cautions, CircleAlert, "text-orange-500"],
+    ["Does not meet", criteria.rejects, CircleX, "text-red-600"],
+    ["Source verified", verifiedCount, CircleCheck, "text-emerald-600"],
+    ["Local confirmation", localConfirmationCount, CircleAlert, "text-orange-500"],
+  ];
+
+  return (
+    <aside className="hidden space-y-4 xl:block">
+      <section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-lg font-bold text-[#071844]">Referral decision</h3>
+          <button className="text-xs font-bold text-blue-600" type="button">
+            Clear
+          </button>
+        </div>
+        <p className="mt-3 text-sm font-bold text-[#071844]">Selected services ({selected.length})</p>
+        <div className="mt-3 grid gap-2">
+          {selected.map((service, index) => (
+            <button
+              key={service.slug}
+              type="button"
+              onClick={() => onToggleSelected(service.slug)}
+              className="grid min-h-16 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 text-left"
+            >
+              <span className="grid h-7 w-7 place-items-center rounded-full bg-[#007a78] text-xs font-bold text-white">
+                {index + 1}
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-bold text-[#071844]">{service.title}</span>
+                <span className="block truncate text-[11px] font-semibold text-slate-500">
+                  {visibleText(service.cost, "Cost pending")} · {visibleText(service.source?.status, "Source pending")}
+                </span>
+              </span>
+              <X className="h-4 w-4 text-slate-500" />
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-lg font-bold text-[#071844]">Checklist</h3>
+          <button className="text-xs font-bold text-blue-600" type="button">
+            Edit
+          </button>
+        </div>
+        <div className="mt-4 grid gap-3 text-sm font-semibold text-slate-600">
+          {checklistRows.map(([label, count, Icon, color]) => (
+            <div key={label} className="flex items-center justify-between gap-3">
+              <span className="inline-flex items-center gap-2">
+                <Icon className={cn("h-4 w-4", color)} />
+                {label}
+              </span>
+              <span className="font-bold text-[#071844]">{count}</span>
+            </div>
+          ))}
+        </div>
+        <button className="mt-4 inline-flex min-h-9 items-center gap-2 text-sm font-bold text-blue-600" type="button">
+          Review details
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </section>
+
+      <section className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-bold text-[#071844]">Source confidence</h3>
+          <button className="text-xs font-bold text-blue-600" type="button">
+            View details
+          </button>
+        </div>
+        <div className="mt-4 grid h-3 grid-cols-[3fr_3fr_1fr_1fr] overflow-hidden rounded-full bg-slate-100">
+          <span className="bg-emerald-600" />
+          <span className="bg-orange-500" />
+          <span className="bg-red-600" />
+          <span className="bg-slate-300" />
+        </div>
+        <div className="mt-3 grid grid-cols-4 text-center text-xs font-semibold text-slate-500">
+          <span>
+            High
+            <br />
+            <b className="text-[#071844]">{confidence.high}</b>
+          </span>
+          <span>
+            Medium
+            <br />
+            <b className="text-[#071844]">{confidence.medium}</b>
+          </span>
+          <span>
+            Low
+            <br />
+            <b className="text-[#071844]">{confidence.low}</b>
+          </span>
+          <span>
+            Unknown
+            <br />
+            <b className="text-[#071844]">{confidence.unknown}</b>
+          </span>
+        </div>
+      </section>
+
+      <button
+        className="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg bg-[#007a78] text-sm font-bold text-white shadow-[0_12px_24px_rgba(0,122,120,0.18)]"
+        type="button"
+      >
+        Compare selected ({selected.length})
+      </button>
+      <section className="grid min-h-20 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+        <span>
+          <span className="block text-sm font-bold text-[#007a78]">Next step</span>
+          <span className="block text-sm leading-5 text-slate-600">Compare services side by side before referral.</span>
+        </span>
+        <span className="grid h-9 w-9 place-items-center rounded-full bg-[#007a78] text-white">
+          <ArrowRight className="h-5 w-5" />
+        </span>
+      </section>
+    </aside>
+  );
+}
+
+function PhonePreview({
+  query,
+  onQueryChange,
+  matches,
+  selectedSlugs,
+  onToggleSelected,
+}: {
+  query: string;
+  onQueryChange: (next: string) => void;
+  matches: ServiceRecord[];
+  selectedSlugs: string[];
+  onToggleSelected: (slug: string) => void;
+}) {
+  return (
+    <div className="mx-auto w-full max-w-[430px] rounded-[2.75rem] border-[10px] border-black bg-white shadow-[0_28px_70px_rgba(15,23,42,0.18)]">
+      <div className="relative overflow-hidden rounded-[2rem] bg-white">
+        <div className="absolute left-1/2 top-0 z-10 h-7 w-36 -translate-x-1/2 rounded-b-2xl bg-black" aria-hidden />
+        <div className="flex min-h-16 items-center justify-between border-b border-slate-200 px-4 pt-5">
+          <Menu className="h-5 w-5 text-[#061740]" />
+          <div className="flex items-center gap-2">
+            <span className="grid h-8 w-8 place-items-center rounded-lg bg-[#007a78] text-white">
+              <ShieldCheck className="h-4 w-4" />
+            </span>
+            <span className="min-w-0 truncate text-sm font-bold text-[#071844]">Services Navigator</span>
+          </div>
+          <Bookmark className="h-5 w-5 text-[#061740]" />
+        </div>
+        <div className="max-h-[720px] overflow-hidden px-4 pb-28 pt-4">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h2 className="text-lg font-bold text-[#071844]">{matches.length} referral matches</h2>
+              <p className="mt-1 text-xs font-medium leading-4 text-slate-500">
+                Best fit for crisis, ATSI-specific, phone referral.
+              </p>
+            </div>
+            <button
+              className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-slate-200 px-3 text-xs font-bold text-[#061740]"
+              type="button"
+            >
+              Sort
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <div className="mt-3 flex flex-wrap gap-2">
+            {["Best fit", "Crisis", "ATSI-specific", "+3"].map((chip, index) => (
+              <span
+                key={chip}
+                className={cn(
+                  "rounded-full border px-2.5 py-1 text-[11px] font-bold",
+                  index > 2 ? "max-sm:hidden" : "",
+                  index === 0 ? "border-[#007a78] bg-[#007a78] text-white" : "border-slate-200 bg-white text-slate-600",
+                )}
+              >
+                {chip}
+              </span>
+            ))}
+          </div>
+          <button
+            className="mt-3 inline-flex min-h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-xs font-bold text-[#061740]"
+            type="button"
+          >
+            <SlidersHorizontal className="h-4 w-4" />
+            Filters
+          </button>
+          <div className="mt-3 grid gap-3">
+            {matches.slice(0, 3).map((service, index) => (
+              <ServiceCard
+                key={service.slug}
+                service={service}
+                index={index}
+                selected={selectedSlugs.includes(service.slug)}
+                onToggleSelected={onToggleSelected}
+                compact
+              />
+            ))}
+          </div>
+        </div>
+        <div className="absolute inset-x-0 bottom-[78px] z-20 flex min-h-14 items-center justify-between rounded-t-2xl bg-[#007a78] px-5 text-sm font-bold text-white shadow-[0_-12px_24px_rgba(0,122,120,0.2)]">
+          <span>{selectedSlugs.length} selected</span>
+          <span>Compare</span>
+          <ArrowRight className="h-5 w-5" />
+        </div>
+        <div className="absolute inset-x-0 bottom-0 z-20 border-t border-slate-200 bg-white/95 px-4 pb-4 pt-3 backdrop-blur">
+          <div className="grid grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] items-center gap-2">
+            <button
+              className="grid h-11 w-11 place-items-center rounded-full border border-slate-200 text-[#061740]"
+              type="button"
+              aria-label="Add"
+            >
+              <Plus className="h-5 w-5" />
+            </button>
+            <SearchBar value={query} onChange={onQueryChange} compact showSubmit={false} />
+            <button
+              className="grid h-11 w-11 place-items-center rounded-full bg-[#007a78] text-white"
+              type="button"
+              aria-label="Send"
+            >
+              <Send className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ServicesNavigatorPreview() {
+  const [query, setQuery] = useState(defaultQuery);
+  const matches = useMemo(() => {
+    const ranked = searchServiceRecords(query);
+    return ranked.length ? ranked.map((match) => match.service) : serviceRecords;
+  }, [query]);
+  const [selectedSlugs, setSelectedSlugs] = useState(() => serviceRecords.slice(0, 2).map((service) => service.slug));
+  const selectedServices = serviceRecords.filter((service) => selectedSlugs.includes(service.slug));
+
+  function toggleSelected(slug: string) {
+    setSelectedSlugs((current) => {
+      if (current.includes(slug)) return current.filter((item) => item !== slug);
+      return [slug, ...current].slice(0, 5);
+    });
+  }
+
+  return (
+    <main className="min-h-screen overflow-x-hidden bg-[#f8fbfd] text-[#061740]">
+      <div className="mx-auto w-full max-w-[1800px] overflow-hidden border-x border-slate-200 bg-white shadow-sm">
+        <Header />
+        <div className="grid gap-6 bg-[#fbfdff] p-4 pb-28 lg:p-6 lg:pb-28 2xl:grid-cols-[minmax(0,1fr)_430px] 2xl:items-start">
+          <section className="min-w-0 space-y-4">
+            <div className="hidden grid-cols-[minmax(0,1fr)_auto] gap-4 md:grid">
+              <SearchBar value={query} onChange={setQuery} />
+              <button
+                className="hidden min-h-14 items-center gap-2 rounded-lg border border-slate-200 bg-white px-5 text-sm font-bold text-[#061740] shadow-sm md:inline-flex"
+                type="button"
+              >
+                <SlidersHorizontal className="h-5 w-5" />
+                Filters
+              </button>
+            </div>
+            <Stepper />
+            <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
+              <div className="min-w-0 space-y-4">
+                <div className="flex min-w-0 flex-wrap items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <h1 className="text-2xl font-bold tracking-tight text-[#071844] md:text-3xl">
+                      {matches.length} referral matches
+                    </h1>
+                    <p className="mt-1 text-sm font-medium text-slate-600">
+                      Best fit for crisis, ATSI-specific, phone referral.
+                    </p>
+                  </div>
+                  <button
+                    className="hidden min-h-10 shrink-0 items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 text-sm font-bold text-[#061740] shadow-sm sm:inline-flex sm:min-h-11 sm:px-4"
+                    type="button"
+                  >
+                    Sort
+                    <ChevronDown className="h-4 w-4" />
+                  </button>
+                </div>
+                <div className="flex min-w-0 flex-wrap items-center gap-2 overflow-hidden">
+                  {["Best fit", "Crisis", "ATSI-specific", "Phone referral", "Free", "WA"].map((chip, index) => (
+                    <button
+                      key={chip}
+                      type="button"
+                      onClick={() => setQuery(index === 0 ? defaultQuery : chip)}
+                      className={cn(
+                        "min-h-8 rounded-full border px-3 text-xs font-bold",
+                        index > 2 ? "max-sm:hidden" : "",
+                        index === 0
+                          ? "border-[#007a78] bg-[#007a78] text-white"
+                          : "border-slate-200 bg-white text-slate-600",
+                      )}
+                    >
+                      {chip}
+                    </button>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => setQuery("")}
+                    className="min-h-8 px-2 text-xs font-bold text-blue-600"
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="grid gap-3">
+                  {matches.map((service, index) => (
+                    <ServiceCard
+                      key={service.slug}
+                      service={service}
+                      index={index}
+                      selected={selectedSlugs.includes(service.slug)}
+                      onToggleSelected={toggleSelected}
+                    />
+                  ))}
+                </div>
+              </div>
+              <DesktopRightRail matches={matches} selected={selectedServices} onToggleSelected={toggleSelected} />
+            </div>
+          </section>
+          <aside className="hidden 2xl:block">
+            <PhonePreview
+              query={query}
+              onQueryChange={setQuery}
+              matches={matches}
+              selectedSlugs={selectedSlugs}
+              onToggleSelected={toggleSelected}
+            />
+          </aside>
+        </div>
+      </div>
+      <div className="fixed inset-x-0 bottom-0 z-30 overflow-hidden border-t border-slate-200 bg-white/95 p-3 shadow-[0_-12px_28px_rgba(15,23,42,0.08)] backdrop-blur 2xl:hidden">
+        <div className="relative mx-auto h-11 max-w-3xl">
+          <button
+            className="absolute left-0 top-0 grid h-10 w-10 place-items-center rounded-full border border-slate-200 text-[#061740]"
+            type="button"
+            aria-label="Add service search action"
+          >
+            <Plus className="h-5 w-5" />
+          </button>
+          <form
+            className="mx-12 flex h-11 min-w-0 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 shadow-[0_8px_22px_rgba(15,23,42,0.07)]"
+            onSubmit={(event) => event.preventDefault()}
+          >
+            <Search className="h-5 w-5 shrink-0 text-[#061740]" aria-hidden />
+            <label className="sr-only" htmlFor="services-preview-bottom-search">
+              Search services
+            </label>
+            <input
+              id="services-preview-bottom-search"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search services..."
+              className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-[#061740] outline-none placeholder:text-slate-400"
+            />
+            {query ? (
+              <button
+                type="button"
+                onClick={() => setQuery("")}
+                className="grid h-7 w-7 shrink-0 place-items-center rounded-full text-slate-500 hover:bg-slate-50"
+                aria-label="Clear search"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            ) : null}
+            <Mic className="hidden h-4 w-4 shrink-0 text-[#061740] min-[430px]:block" aria-hidden />
+          </form>
+          <button
+            className="absolute right-0 top-0 grid h-10 w-10 place-items-center rounded-full bg-[#007a78] text-white"
+            type="button"
+            aria-label="Send service search"
+          >
+            <Send className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/tools-page-mockups/rectangle-direction-mockups.tsx b/src/components/tools-page-mockups/rectangle-direction-mockups.tsx
new file mode 100644
index 0000000000..6e5afbdea6
--- /dev/null
+++ b/src/components/tools-page-mockups/rectangle-direction-mockups.tsx
@@ -0,0 +1,527 @@
+"use client";
+
+import Link from "next/link";
+import {
+  ArrowRight,
+  BookOpen,
+  CheckCircle2,
+  ClipboardList,
+  Clock3,
+  FileText,
+  HeartPulse,
+  Pill,
+  Pin,
+  Search,
+  ShieldCheck,
+  Sparkles,
+  Star,
+  Stethoscope,
+  type LucideIcon,
+} from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/components/ui-primitives";
+
+import { areaLabels, pinnedToolIds, toolById, tools, type ToolFixture } from "./tool-fixtures";
+import { useToolFilter, type ToolFilterId } from "./use-tool-filter";
+
+const focusRing =
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
+
+function IconTile({ icon: Icon, active = false }: { icon: LucideIcon; active?: boolean }) {
+  return (
+    <span
+      className={cn(
+        "grid h-10 w-10 shrink-0 place-items-center rounded-md border shadow-[var(--shadow-inset)]",
+        active
+          ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
+          : "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]",
+      )}
+    >
+      <Icon className="h-5 w-5" aria-hidden="true" />
+    </span>
+  );
+}
+
+function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search tools by clinical job, source, or workflow",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <form
+      role="search"
+      onSubmit={(event) => event.preventDefault()}
+      className="grid min-h-[3.25rem] w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-full border border-[color:var(--border-strong)] bg-[color:var(--surface)] px-2 shadow-[var(--shadow-tight)]"
+    >
+      <Search className="ml-2 h-5 w-5 text-[color:var(--text-soft)]" aria-hidden="true" />
+      <input
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        aria-label="Search tools"
+        className="min-w-0 bg-transparent text-sm font-semibold text-[color:var(--text)] placeholder:text-[color:var(--text-soft)] focus:outline-none"
+      />
+      <button
+        type="submit"
+        aria-label="Search tools"
+        className={cn(
+          "grid h-10 w-10 place-items-center rounded-full bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)]",
+          focusRing,
+        )}
+      >
+        <ArrowRight className="h-4 w-4" aria-hidden="true" />
+      </button>
+    </form>
+  );
+}
+
+function CompactHeader({
+  title,
+  body,
+  query,
+  onQueryChange,
+  children,
+}: {
+  title: string;
+  body: string;
+  query: string;
+  onQueryChange: (value: string) => void;
+  children?: ReactNode;
+}) {
+  return (
+    <header className="border-b border-[color:var(--border)] bg-[color:var(--surface)]">
+      <div className="mx-auto grid max-w-7xl gap-4 px-4 py-5 sm:px-6 lg:px-8">
+        <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem] lg:items-end">
+          <div className="min-w-0">
+            <h1 className="text-3xl font-extrabold leading-tight tracking-normal text-[color:var(--text-heading)]">
+              {title}
+            </h1>
+            <p className="mt-2 max-w-2xl text-sm font-medium leading-6 text-[color:var(--text-muted)] sm:text-base">
+              {body}
+            </p>
+          </div>
+          {children}
+        </div>
+        <SearchBar value={query} onChange={onQueryChange} />
+      </div>
+    </header>
+  );
+}
+
+function ActionPill({ label }: { label: string }) {
+  return (
+    <span className="inline-flex min-h-9 shrink-0 items-center justify-center gap-2 rounded-md bg-[color:var(--clinical-accent)] px-3 text-xs font-bold text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)]">
+      {label}
+      <ArrowRight className="h-4 w-4" aria-hidden="true" />
+    </span>
+  );
+}
+
+function RectangleToolCard({
+  tool,
+  featured = false,
+  dense = false,
+}: {
+  tool: ToolFixture;
+  featured?: boolean;
+  dense?: boolean;
+}) {
+  return (
+    <Link
+      href={tool.href}
+      aria-label={`Open ${tool.title}`}
+      className={cn(
+        "group grid min-w-0 gap-3 rounded-md border bg-[color:var(--surface)] p-4 shadow-[var(--shadow-inset)] transition hover:-translate-y-0.5 hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--surface-raised)] hover:shadow-[var(--shadow-soft)]",
+        featured
+          ? "border-[color:var(--clinical-accent-border)] ring-1 ring-[color:var(--clinical-accent)]/25"
+          : "border-[color:var(--border)]",
+        dense ? "min-h-[6.75rem]" : "min-h-[8.25rem]",
+        dense ? "lg:min-h-[8.75rem]" : "lg:min-h-[9.5rem]",
+        focusRing,
+      )}
+    >
+      <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3">
+        <IconTile icon={tool.icon} active={featured} />
+        <div className="min-w-0">
+          <h3 className="line-clamp-2 text-base font-extrabold leading-6 text-[color:var(--text-heading)]">
+            {tool.title}
+          </h3>
+          <p className="mt-1 line-clamp-3 text-sm font-medium leading-5 text-[color:var(--text-muted)]">
+            {tool.description}
+          </p>
+        </div>
+        <ActionPill label={tool.primaryAction} />
+      </div>
+      <div className="grid gap-2 border-t border-[color:var(--border)] pt-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
+        <p className="line-clamp-2 text-xs font-bold leading-4 text-[color:var(--text-soft)]">{tool.secondary}</p>
+        <span className="inline-flex w-fit min-h-6 items-center gap-1 rounded-md bg-[color:var(--surface-subtle)] px-2 text-2xs font-bold text-[color:var(--text-muted)]">
+          {featured ? <Sparkles className="h-3 w-3 text-[color:var(--clinical-accent)]" aria-hidden="true" /> : null}
+          {featured ? "Suggested" : areaLabels[tool.area]}
+        </span>
+      </div>
+    </Link>
+  );
+}
+
+function SavedWorkPanel() {
+  const saved = [
+    { title: "Lithium monitoring plan", tool: "Documents", icon: FileText },
+    { title: "Medication review draft", tool: "Medication", icon: Pill },
+    { title: "13YARN referral pathway", tool: "Services", icon: ClipboardList },
+  ];
+
+  return (
+    <aside className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)] p-4 shadow-[var(--shadow-soft)] xl:sticky xl:top-4">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-base font-extrabold text-[color:var(--text-heading)]">Saved work</h2>
+        <Link href="/favourites" className={cn("text-xs font-bold text-[color:var(--clinical-accent)]", focusRing)}>
+          View all
+        </Link>
+      </div>
+      <div className="mt-3 divide-y divide-[color:var(--border)] rounded-md border border-[color:var(--border)] bg-[color:var(--surface)]">
+        {saved.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.title}
+              href="/favourites"
+              className={cn(
+                "grid min-h-14 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 px-3 py-2 hover:bg-[color:var(--surface-subtle)]",
+                focusRing,
+              )}
+            >
+              <Icon className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-bold text-[color:var(--text-heading)]">{item.title}</span>
+                <span className="block truncate text-xs font-semibold text-[color:var(--text-soft)]">{item.tool}</span>
+              </span>
+              <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+            </Link>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}
+
+function QuickStartPanel() {
+  const quickStarts = [
+    { label: "Ask a question", href: "/?mode=answer", icon: Search },
+    { label: "Compare differentials", href: "/differentials", icon: Stethoscope },
+    { label: "Prepare prescribing", href: "/?mode=prescribing", icon: Pill },
+  ];
+
+  return (
+    <div className="hidden rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3 lg:block">
+      <div className="grid gap-2">
+        {quickStarts.map((item) => {
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={cn(
+                "grid min-h-10 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-md px-2 text-sm font-bold text-[color:var(--text-heading)] hover:bg-[color:var(--surface)]",
+                focusRing,
+              )}
+            >
+              <Icon className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+              <span className="truncate">{item.label}</span>
+              <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function PhonePreview({ toolIds, title }: { toolIds: string[]; title: string }) {
+  const phoneTools = toolIds.map(toolById);
+
+  return (
+    <section className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)] p-4 shadow-[var(--shadow-soft)]">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-xs font-extrabold uppercase tracking-[0.08em] text-[color:var(--text-soft)]">Phone</p>
+          <h2 className="mt-1 text-base font-extrabold text-[color:var(--text-heading)]">{title}</h2>
+        </div>
+        <span className="inline-flex min-h-7 items-center rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2 text-xs font-bold text-[color:var(--clinical-accent)]">
+          390px
+        </span>
+      </div>
+      <div className="mx-auto mt-4 max-w-[19rem] rounded-[2rem] border border-[color:var(--border-strong)] bg-[color:var(--surface-chrome)] p-2 shadow-[var(--shadow-lux)]">
+        <div className="overflow-hidden rounded-[1.45rem] border border-[color:var(--border)] bg-[color:var(--background)]">
+          <div className="flex min-h-11 items-center justify-between border-b border-[color:var(--border)] bg-[color:var(--surface)] px-3">
+            <span className="text-sm font-extrabold text-[color:var(--text-heading)]">Tools</span>
+            <Search className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+          </div>
+          <div className="grid gap-2 p-3">
+            <div className="grid min-h-10 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2">
+              <Search className="h-4 w-4 text-[color:var(--text-soft)]" aria-hidden="true" />
+              <span className="truncate text-xs font-bold text-[color:var(--text-soft)]">Search clinical tools</span>
+              <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+            </div>
+            {phoneTools.map((tool, index) => (
+              <Link
+                key={tool.id}
+                href={tool.href}
+                className={cn(
+                  "grid min-h-16 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-md border bg-[color:var(--surface)] px-2.5 py-2 shadow-[var(--shadow-inset)]",
+                  index === 0 ? "border-[color:var(--clinical-accent-border)]" : "border-[color:var(--border)]",
+                  focusRing,
+                )}
+              >
+                <IconTile icon={tool.icon} active={index === 0} />
+                <span className="min-w-0">
+                  <span className="block truncate text-xs font-extrabold text-[color:var(--text-heading)]">
+                    {tool.title}
+                  </span>
+                  <span className="mt-1 block truncate text-2xs font-semibold text-[color:var(--text-soft)]">
+                    {tool.primaryAction}
+                  </span>
+                </span>
+                <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const workflowGroups = [
+  {
+    id: "assess",
+    title: "Assess",
+    body: "Start or refine a clinical view before acting.",
+    icon: Stethoscope,
+    toolIds: ["differentials", "clinical-kb-search"],
+  },
+  {
+    id: "reference",
+    title: "Reference",
+    body: "Find the source, page, table, or answer.",
+    icon: BookOpen,
+    toolIds: ["documents", "clinical-kb-search"],
+  },
+  {
+    id: "treat",
+    title: "Treat",
+    body: "Move from evidence to prescribing support.",
+    icon: HeartPulse,
+    toolIds: ["medication-prescribing", "documents"],
+  },
+  {
+    id: "coordinate",
+    title: "Coordinate",
+    body: "Connect the next referral, service, or form.",
+    icon: ClipboardList,
+    toolIds: ["services", "forms"],
+  },
+];
+
+function WorkflowLane({ group }: { group: (typeof workflowGroups)[number] }) {
+  const Icon = group.icon;
+
+  return (
+    <section className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)] p-3 shadow-[var(--shadow-inset)] sm:p-4">
+      <div className="grid gap-3 sm:grid-cols-[auto_minmax(0,1fr)]">
+        <IconTile icon={Icon} active />
+        <div className="min-w-0">
+          <h2 className="text-base font-extrabold text-[color:var(--text-heading)]">{group.title}</h2>
+          <p className="mt-1 text-sm font-medium leading-5 text-[color:var(--text-muted)]">{group.body}</p>
+        </div>
+      </div>
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {group.toolIds.map((id, index) => (
+          <RectangleToolCard key={id} tool={toolById(id)} featured={index === 0} dense />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function ToolsClinicalLanesMockup() {
+  const filter = useToolFilter(tools);
+
+  return (
+    <div className="min-h-screen bg-[color:var(--background)]">
+      <CompactHeader
+        title="Tools"
+        body="Choose the tool by the clinical job you are doing."
+        query={filter.query}
+        onQueryChange={filter.setQuery}
+      >
+        <QuickStartPanel />
+      </CompactHeader>
+
+      <main className="mx-auto grid max-w-7xl gap-5 px-4 py-5 pb-28 text-[color:var(--text)] sm:px-6 lg:px-8">
+        <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_21rem]">
+          <div className="grid gap-4">
+            {workflowGroups.map((group) => (
+              <WorkflowLane key={group.id} group={group} />
+            ))}
+          </div>
+          <div className="grid content-start gap-4">
+            <SavedWorkPanel />
+            <PhonePreview
+              title="Lane layout"
+              toolIds={["differentials", "clinical-kb-search", "documents", "services"]}
+            />
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+const workbenchFilters: { id: ToolFilterId; label: string; icon: LucideIcon }[] = [
+  { id: "all", label: "All", icon: CheckCircle2 },
+  { id: "clinical", label: "Clinical", icon: Stethoscope },
+  { id: "admin", label: "Workflow", icon: ClipboardList },
+  { id: "pinned", label: "Pinned", icon: Pin },
+];
+
+function FilterBar({ filterId, onToggle }: { filterId: ToolFilterId; onToggle: (filterId: ToolFilterId) => void }) {
+  return (
+    <div className="flex gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      {workbenchFilters.map((item) => {
+        const Icon = item.icon;
+        const active = filterId === item.id;
+
+        return (
+          <button
+            key={item.id}
+            type="button"
+            aria-pressed={active}
+            onClick={() => onToggle(item.id)}
+            className={cn(
+              "inline-flex min-h-10 shrink-0 items-center gap-2 rounded-md border px-3 text-sm font-bold",
+              active
+                ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
+                : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:text-[color:var(--text)]",
+              focusRing,
+            )}
+          >
+            <Icon className="h-4 w-4" aria-hidden="true" />
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function ContinueStrip() {
+  return (
+    <section className="grid gap-3 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] p-3 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center">
+      <IconTile icon={Clock3} active />
+      <div className="min-w-0">
+        <h2 className="text-sm font-extrabold text-[color:var(--text-heading)]">Continue medication review</h2>
+        <p className="mt-1 truncate text-sm font-medium text-[color:var(--text-muted)]">
+          Medication Prescribing · Monitoring plan review · May 12, 2025
+        </p>
+      </div>
+      <Link
+        href="/?mode=prescribing"
+        className={cn(
+          "inline-flex min-h-10 items-center justify-center gap-2 rounded-md bg-[color:var(--clinical-accent)] px-3 text-sm font-bold text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)]",
+          focusRing,
+        )}
+      >
+        Resume
+        <ArrowRight className="h-4 w-4" aria-hidden="true" />
+      </Link>
+    </section>
+  );
+}
+
+export function ToolsActionWorkbenchMockup() {
+  const filter = useToolFilter(tools);
+  const visibleTools = filter.filtered.length ? filter.filtered : tools;
+
+  return (
+    <div className="min-h-screen bg-[color:var(--background)]">
+      <CompactHeader
+        title="Tools"
+        body="Open the workspace that matches what you need to do now."
+        query={filter.query}
+        onQueryChange={filter.setQuery}
+      >
+        <Link
+          href="/favourites"
+          className={cn(
+            "hidden min-h-11 items-center justify-center gap-2 rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--text)] shadow-[var(--shadow-inset)] hover:border-[color:var(--clinical-accent-border)] lg:inline-flex",
+            focusRing,
+          )}
+        >
+          <Star className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+          Saved work
+        </Link>
+      </CompactHeader>
+
+      <main className="mx-auto grid max-w-7xl gap-5 px-4 py-5 pb-28 text-[color:var(--text)] sm:px-6 lg:px-8">
+        <FilterBar filterId={filter.filterId} onToggle={filter.toggleFilter} />
+        <ContinueStrip />
+
+        <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_21rem]">
+          <div className="grid content-start gap-3">
+            <div>
+              <h2 className="text-lg font-extrabold text-[color:var(--text-heading)]">Tool workbench</h2>
+              <p className="mt-1 text-sm font-medium text-[color:var(--text-muted)]">
+                Start with a focused task, source lookup, referral, form, or prescribing workflow.
+              </p>
+            </div>
+            <div className="grid gap-3 md:grid-cols-2">
+              {visibleTools.map((tool) => (
+                <RectangleToolCard key={tool.id} tool={tool} featured={pinnedToolIds.some((id) => id === tool.id)} />
+              ))}
+            </div>
+          </div>
+
+          <div className="grid content-start gap-4">
+            <section className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)] p-4 shadow-[var(--shadow-soft)]">
+              <div className="flex items-center gap-2">
+                <ShieldCheck className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+                <h2 className="text-base font-extrabold text-[color:var(--text-heading)]">Useful shortcuts</h2>
+              </div>
+              <div className="mt-3 grid gap-2">
+                {[
+                  ["Ask a clinical question", "/?mode=answer"],
+                  ["Find a source document", "/?mode=documents"],
+                  ["Compare differentials", "/differentials"],
+                  ["Prepare a prescription", "/?mode=prescribing"],
+                ].map(([label, href]) => (
+                  <Link
+                    key={label}
+                    href={href}
+                    className={cn(
+                      "grid min-h-11 grid-cols-[minmax(0,1fr)_auto] items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--text-heading)] hover:bg-[color:var(--surface-subtle)]",
+                      focusRing,
+                    )}
+                  >
+                    <span className="truncate">{label}</span>
+                    <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+                  </Link>
+                ))}
+              </div>
+            </section>
+            <PhonePreview
+              title="Workbench layout"
+              toolIds={["clinical-kb-search", "documents", "medication-prescribing", "favourites"]}
+            />
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/tools-page-mockups/tools-page-mockup-page.tsx b/src/components/tools-page-mockups/tools-page-mockup-page.tsx
index d18dd2b941..6842229fe5 100644
--- a/src/components/tools-page-mockups/tools-page-mockup-page.tsx
+++ b/src/components/tools-page-mockups/tools-page-mockup-page.tsx
@@ -23,7 +23,7 @@ import {
   X,
   type LucideIcon,
 } from "lucide-react";
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 
 import { cn } from "@/components/ui-primitives";
 
@@ -311,6 +311,58 @@ function ToolCard({ tool, suggested = false }: { tool: ToolFixture; suggested?:
   );
 }
 
+function SelectableToolCard({
+  tool,
+  selected = false,
+  suggested = false,
+  onSelect,
+}: {
+  tool: ToolFixture;
+  selected?: boolean;
+  suggested?: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onSelect}
+      className={cn(
+        "flex min-w-0 max-w-full flex-col rounded-md border bg-[color:var(--surface)] p-3 text-left shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--surface-raised)]",
+        selected || suggested
+          ? "border-[color:var(--clinical-accent-border)] ring-1 ring-[color:var(--clinical-accent)]/25"
+          : "border-[color:var(--border)]",
+        focusRing,
+      )}
+    >
+      <div className="flex flex-1 items-start gap-3">
+        <ToolIcon tool={tool} />
+        <div className="min-w-0 flex-1">
+          <div className="grid gap-2">
+            <h3 className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{tool.title}</h3>
+            <div className="flex flex-wrap items-center gap-2">
+              {suggested ? <SuggestedBadge /> : null}
+              <StatusPill status={tool.status} />
+              {tool.sourceBacked ? <SourceBackedBadge compact /> : null}
+            </div>
+          </div>
+          <p className="mt-1 line-clamp-2 text-sm font-medium leading-5 text-[color:var(--text-muted)]">
+            {tool.description}
+          </p>
+          <p className="mt-2 truncate text-xs font-bold text-[color:var(--text-soft)]">{tool.secondary}</p>
+        </div>
+      </div>
+      <div className="mt-3 flex items-center justify-between gap-3">
+        <span className="nums truncate text-xs font-semibold text-[color:var(--text-muted)]">{tool.lastUsed}</span>
+        <span className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)]">
+          Preview
+          <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+        </span>
+      </div>
+    </button>
+  );
+}
+
 function StatsStrip() {
   const stats = [
     { label: "Tools", value: String(tools.length), icon: Grid2X2 },
@@ -543,12 +595,19 @@ function PhoneBrowserPreview({
   title,
   toolIds,
   mode = "launch",
+  selectedTool,
+  onSelectTool,
+  onBackToDirectory,
 }: {
   title: string;
   toolIds: string[];
   mode?: "launch" | "workflow" | "directory";
+  selectedTool?: ToolFixture;
+  onSelectTool?: (tool: ToolFixture) => void;
+  onBackToDirectory?: () => void;
 }) {
   const featured = toolIds.map(toolById);
+  const SelectedIcon = selectedTool?.icon;
 
   return (
     <aside className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)] p-3 shadow-[var(--shadow-soft)] xl:sticky xl:top-4">
@@ -574,93 +633,170 @@ function PhoneBrowserPreview({
             </span>
           </div>
           <div className="space-y-3 p-3">
-            <div className="grid min-h-10 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2">
-              <Search className="h-4 w-4 text-[color:var(--text-soft)]" aria-hidden="true" />
-              <span className="truncate text-xs font-bold text-[color:var(--text-soft)]">Search tools</span>
-              <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
-            </div>
-
-            {mode === "workflow" ? (
-              <div className="grid grid-cols-2 gap-2">
-                {["Assess", "Reference", "Treat", "Coordinate"].map((label) => (
-                  <span
-                    key={label}
-                    className="grid min-h-12 place-items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] text-xs font-extrabold text-[color:var(--text-heading)]"
-                  >
-                    {label}
-                  </span>
-                ))}
-              </div>
-            ) : null}
+            {selectedTool && SelectedIcon ? (
+              <div className="grid gap-3">
+                <button
+                  type="button"
+                  onClick={onBackToDirectory}
+                  className={cn(
+                    "inline-flex min-h-9 w-fit items-center gap-1 rounded-md px-1 text-xs font-bold text-[color:var(--clinical-accent)]",
+                    focusRing,
+                  )}
+                >
+                  <ArrowRight className="h-3.5 w-3.5 rotate-180" aria-hidden="true" />
+                  All tools
+                </button>
 
-            <div className={cn("grid gap-2", mode === "directory" && "rounded-md border border-[color:var(--border)]")}>
-              {featured.map((tool, index) => {
-                const Icon = tool.icon;
-                return (
+                <section className="rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] p-3 shadow-[var(--shadow-inset)]">
+                  <AccentIconTile icon={SelectedIcon} className="h-10 w-10" />
+                  <h3 className="mt-3 text-base font-extrabold leading-6 text-[color:var(--text-heading)]">
+                    {selectedTool.title}
+                  </h3>
+                  <p className="mt-2 text-xs font-semibold leading-5 text-[color:var(--text-muted)]">
+                    {selectedTool.description}
+                  </p>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    <StatusPill status={selectedTool.status} />
+                    {selectedTool.sourceBacked ? <SourceBackedBadge compact /> : null}
+                  </div>
+                  <dl className="mt-3 grid gap-2 border-t border-[color:var(--border)] pt-3">
+                    <div>
+                      <dt className="text-3xs font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-soft)]">
+                        Best for
+                      </dt>
+                      <dd className="mt-0.5 text-xs font-bold leading-4 text-[color:var(--text-heading)]">
+                        {selectedTool.secondary}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-3xs font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-soft)]">
+                        Last used
+                      </dt>
+                      <dd className="mt-0.5 text-xs font-bold text-[color:var(--text-heading)]">
+                        {selectedTool.lastUsed}
+                      </dd>
+                    </div>
+                  </dl>
                   <Link
-                    key={tool.id}
-                    href={tool.href}
+                    href={selectedTool.href}
                     className={cn(
-                      "grid min-h-14 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-md bg-[color:var(--surface)] px-2 text-left shadow-[var(--shadow-inset)]",
-                      mode === "directory" && "rounded-none border-t border-[color:var(--border)] first:border-t-0",
-                      index === 0 && mode !== "directory" && "border border-[color:var(--clinical-accent-border)]",
+                      "mt-4 inline-flex min-h-10 w-full items-center justify-center gap-2 rounded-md bg-[color:var(--clinical-accent)] px-3 text-xs font-extrabold text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)]",
                       focusRing,
                     )}
                   >
-                    <AccentIconTile icon={Icon} className="h-8 w-8" />
-                    <span className="min-w-0">
-                      <span className="block truncate text-xs font-extrabold text-[color:var(--text-heading)]">
-                        {tool.title}
-                      </span>
-                      <span className="block truncate text-2xs font-semibold text-[color:var(--text-soft)]">
-                        {areaLabels[tool.area]}
-                      </span>
-                    </span>
-                    <span className="flex items-center gap-1.5">
-                      {tool.sourceBacked ? (
-                        <ShieldCheck className="h-3.5 w-3.5 text-[color:var(--success)]" aria-label="Source-backed" />
-                      ) : null}
-                      <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
-                    </span>
+                    Open {selectedTool.primaryAction.toLowerCase()}
+                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
                   </Link>
-                );
-              })}
-            </div>
+                </section>
 
-            <div className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)]">
-              <div className="flex min-h-8 items-center justify-between border-b border-[color:var(--border)] px-2">
-                <span className="text-2xs font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-soft)]">
-                  Recent work
-                </span>
-                <span className="text-2xs font-bold text-[color:var(--clinical-accent)]">View</span>
+                <RecentWorkList compact title="Related work" />
               </div>
-              <div className="divide-y divide-[color:var(--border)]">
-                {recentWork.slice(0, 2).map((item) => {
-                  const Icon = item.icon;
-                  return (
-                    <Link
-                      key={item.title}
-                      href="/favourites"
-                      className={cn(
-                        "grid min-h-11 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 px-2",
-                        focusRing,
-                      )}
-                    >
-                      <Icon className="h-3.5 w-3.5 text-[color:var(--clinical-accent)]" aria-hidden="true" />
-                      <span className="min-w-0">
-                        <span className="block truncate text-2xs font-extrabold text-[color:var(--text-heading)]">
-                          {item.title}
+            ) : null}
+
+            {!selectedTool ? (
+              <>
+                <div className="grid min-h-10 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2">
+                  <Search className="h-4 w-4 text-[color:var(--text-soft)]" aria-hidden="true" />
+                  <span className="truncate text-xs font-bold text-[color:var(--text-soft)]">Search tools</span>
+                  <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+                </div>
+
+                {mode === "workflow" ? (
+                  <div className="grid grid-cols-2 gap-2">
+                    {["Assess", "Reference", "Treat", "Coordinate"].map((label) => (
+                      <span
+                        key={label}
+                        className="grid min-h-12 place-items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] text-xs font-extrabold text-[color:var(--text-heading)]"
+                      >
+                        {label}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+
+                <div
+                  className={cn("grid gap-2", mode === "directory" && "rounded-md border border-[color:var(--border)]")}
+                >
+                  {featured.map((tool, index) => {
+                    const Icon = tool.icon;
+                    const interactive = typeof onSelectTool === "function";
+                    const rowClassName = cn(
+                      "grid min-h-14 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-md bg-[color:var(--surface)] px-2 text-left shadow-[var(--shadow-inset)]",
+                      mode === "directory" && "rounded-none border-t border-[color:var(--border)] first:border-t-0",
+                      index === 0 && mode !== "directory" && "border border-[color:var(--clinical-accent-border)]",
+                      focusRing,
+                    );
+                    const rowContent = (
+                      <>
+                        <AccentIconTile icon={Icon} className="h-8 w-8" />
+                        <span className="min-w-0">
+                          <span className="block truncate text-xs font-extrabold text-[color:var(--text-heading)]">
+                            {tool.title}
+                          </span>
+                          <span className="block truncate text-2xs font-semibold text-[color:var(--text-soft)]">
+                            {areaLabels[tool.area]}
+                          </span>
                         </span>
-                        <span className="block truncate text-2xs font-semibold text-[color:var(--text-soft)]">
-                          {item.area}
+                        <span className="flex items-center gap-1.5">
+                          {tool.sourceBacked ? (
+                            <ShieldCheck
+                              className="h-3.5 w-3.5 text-[color:var(--success)]"
+                              aria-label="Source-backed"
+                            />
+                          ) : null}
+                          <ArrowRight className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
                         </span>
-                      </span>
-                      <ArrowRight className="h-3.5 w-3.5 text-[color:var(--clinical-accent)]" aria-hidden="true" />
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
+                      </>
+                    );
+
+                    return interactive ? (
+                      <button key={tool.id} type="button" onClick={() => onSelectTool(tool)} className={rowClassName}>
+                        {rowContent}
+                      </button>
+                    ) : (
+                      <Link key={tool.id} href={tool.href} className={rowClassName}>
+                        {rowContent}
+                      </Link>
+                    );
+                  })}
+                </div>
+
+                <div className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-lux)]">
+                  <div className="flex min-h-8 items-center justify-between border-b border-[color:var(--border)] px-2">
+                    <span className="text-2xs font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-soft)]">
+                      Recent work
+                    </span>
+                    <span className="text-2xs font-bold text-[color:var(--clinical-accent)]">View</span>
+                  </div>
+                  <div className="divide-y divide-[color:var(--border)]">
+                    {recentWork.slice(0, 2).map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <Link
+                          key={item.title}
+                          href="/favourites"
+                          className={cn(
+                            "grid min-h-11 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 px-2",
+                            focusRing,
+                          )}
+                        >
+                          <Icon className="h-3.5 w-3.5 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+                          <span className="min-w-0">
+                            <span className="block truncate text-2xs font-extrabold text-[color:var(--text-heading)]">
+                              {item.title}
+                            </span>
+                            <span className="block truncate text-3xs font-semibold text-[color:var(--text-soft)]">
+                              {item.area}
+                            </span>
+                          </span>
+                          <ArrowRight className="h-3.5 w-3.5 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </div>
+              </>
+            ) : null}
           </div>
         </div>
       </div>
@@ -917,6 +1053,9 @@ const splitPaneFilters: { id: ToolFilterId; label: string; icon: LucideIcon }[]
 function SplitPaneMockup() {
   const filter = useToolFilter(tools);
   const suggestedId = "services";
+  const [selectedToolId, setSelectedToolId] = useState(suggestedId);
+  const selectedTool = selectedToolId ? toolById(selectedToolId) : undefined;
+  const overviewToolIds = ["clinical-kb-search", suggestedId, "medication-prescribing", "favourites"];
 
   return (
     <>
@@ -995,13 +1134,21 @@ function SplitPaneMockup() {
                     <h2 className="text-base font-extrabold text-[color:var(--text-heading)]">Launcher overview</h2>
                   </div>
                   <p className="max-w-2xl text-sm font-medium leading-5 text-[color:var(--text-muted)]">
-                    Filters sit beside the overview, while the full-width All tools view below carries the main browsing
-                    weight.
+                    Choose a tool to preview its purpose and recent context in the phone frame before opening it.
                   </p>
                   <div className="grid gap-3 sm:grid-cols-2">
-                    {["clinical-kb-search", suggestedId, "medication-prescribing", "favourites"].map((id) => (
-                      <ToolCard key={id} tool={toolById(id)} suggested={id === suggestedId} />
-                    ))}
+                    {overviewToolIds.map((id) => {
+                      const tool = toolById(id);
+                      return (
+                        <SelectableToolCard
+                          key={id}
+                          tool={tool}
+                          selected={selectedToolId === id}
+                          suggested={id === suggestedId}
+                          onSelect={() => setSelectedToolId(id)}
+                        />
+                      );
+                    })}
                   </div>
                 </>
               )}
@@ -1012,6 +1159,9 @@ function SplitPaneMockup() {
             title="Pocket directory"
             toolIds={["clinical-kb-search", "documents", "differentials", suggestedId, "forms", "favourites"]}
             mode="directory"
+            selectedTool={selectedTool}
+            onSelectTool={(tool) => setSelectedToolId(tool.id)}
+            onBackToDirectory={() => setSelectedToolId("")}
           />
         </section>
 
diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index eeee5c89fa..c9630429df 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -236,6 +236,13 @@ test.describe("Clinical KB applications launcher", () => {
       expect(headingBox).not.toBeNull();
       expect((searchBox?.y ?? 0) + (searchBox?.height ?? 0) / 2).toBeGreaterThan(820 * 0.72);
       expect((headingBox?.y ?? 0) + (headingBox?.height ?? 0)).toBeLessThan(searchBox?.y ?? 0);
+      if (home.path === "/forms") {
+        await expect(page.getByRole("button", { name: "Open source scope" })).toHaveCount(0);
+        await page.getByRole("button", { name: "Open the form library" }).click();
+        await expect(page).toHaveURL(/\/forms$/);
+        await expect(page.getByRole("button", { name: "Mode Forms" })).toBeVisible();
+        await expect(page.getByTestId("form-search-results")).toHaveCount(0);
+      }
       await expectNoPageHorizontalOverflow(page);
     }
   });