From 9cf6960392e3279996be7544aef78ccc2345a4b8 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Fri, 3 Jul 2026 01:10:50 +0800
Subject: [PATCH 1/2] feat(ui): fold the document viewer into the global shell

Render /documents/* inside GlobalSearchShell (documents mode) so the
viewer gets the shared sidebar + global header like every other page.
The shell's search composer stays hidden here - the viewer is a reading
surface with its own search-within-document field.

The viewer's local sticky header becomes a compact in-page toolbar:
back link, scope-this-document, and document-actions buttons are kept;
the redundant Answer/Documents segmented toggle (now covered by the
global mode pill) is removed, along with the duplicate #main-content id
and page-level backdrop the shell now provides.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/documents/layout.tsx      | 11 +++++
 src/components/DocumentViewer.tsx | 75 +++++++++++--------------------
 2 files changed, 36 insertions(+), 50 deletions(-)
 create mode 100644 src/app/documents/layout.tsx

diff --git a/src/app/documents/layout.tsx b/src/app/documents/layout.tsx
new file mode 100644
index 0000000000..faaa8decbd
--- /dev/null
+++ b/src/app/documents/layout.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import { GlobalSearchShell } from "@/components/clinical-dashboard/global-search-shell";
+
+export default function DocumentsLayout({ children }: { children: ReactNode }) {
+  return (
+    <GlobalSearchShell initialMode="documents" searchComposerVisible={false}>
+      {children}
+    </GlobalSearchShell>
+  );
+}
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index e2a28984b5..0a80e48203 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -17,7 +17,6 @@ import {
   FileText,
   Loader2,
   Maximize2,
-  Menu,
   Minimize2,
   Minus,
   Plus,
@@ -46,7 +45,6 @@ import {
 import { DocumentTagCloud } from "@/components/DocumentTagCloud";
 import type { PDFDocumentLoadingTask, PDFDocumentProxy, RenderTask } from "pdfjs-dist";
 import {
-  appBackdrop,
   clinicalDivider,
   cn,
   evidenceSurface,
@@ -2355,61 +2353,38 @@ export function DocumentViewer({
 
   return (
     <main
-      id="main-content"
       tabIndex={-1}
-      className={cn(appBackdrop, "min-h-[100dvh] overflow-x-clip text-[color:var(--text)] focus:outline-none")}
+      className="min-h-[calc(100dvh-4rem)] overflow-x-clip text-[color:var(--text)] focus:outline-none"
     >
-      <header className="edge-glass-header sticky top-0 z-30 border-b border-[color:var(--border)] py-2 pt-[max(0.5rem,env(safe-area-inset-top))] backdrop-blur-xl">
-        <div className="mx-auto flex h-12 max-w-7xl items-center gap-2">
+      <div className="mx-auto flex h-12 max-w-7xl items-center gap-2 px-3 pt-2 sm:px-4 lg:px-8">
+        <Link
+          href={documentHomeHref}
+          className="grid h-11 w-11 shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
+          aria-label="Back to documents"
+        >
+          <ArrowLeft className="h-5 w-5" />
+        </Link>
+
+        <div className="ml-auto flex shrink-0 items-center gap-1.5">
           <Link
-            href={documentHomeHref}
-            className="grid h-11 w-11 shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
-            aria-label="Back to documents"
+            href={scopedDocumentHref}
+            className="grid h-11 w-11 place-items-center rounded-full text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
+            aria-label="Scope this document"
+            title={headerSubtitle}
           >
-            <Menu className="h-5 w-5 sm:hidden" />
-            <ArrowLeft className="hidden h-5 w-5 sm:block" />
+            <Target className="h-5 w-5" />
           </Link>
-
-          <div
-            role="group"
-            aria-label="Search mode"
-            className="mx-auto grid w-[min(13.25rem,52vw)] grid-cols-2 gap-1 rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] p-1 shadow-[var(--shadow-inset)] sm:mx-0 sm:w-auto sm:min-w-[14rem]"
+          <button
+            type="button"
+            onClick={() => setMobileActionsOpen(true)}
+            className="grid h-11 w-11 place-items-center rounded-full text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
+            aria-label="Open document actions"
           >
-            <Link
-              href="/"
-              className="inline-flex min-h-9 items-center justify-center rounded-full px-3 text-xs font-semibold text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)] sm:text-sm"
-            >
-              Answer
-            </Link>
-            <Link
-              href="/?mode=documents"
-              className="inline-flex min-h-9 items-center justify-center rounded-full bg-[color:var(--clinical-accent)] px-3 text-xs font-semibold text-[color:var(--primary-contrast)] shadow-[var(--shadow-tight)] sm:text-sm"
-            >
-              Documents
-            </Link>
-          </div>
-
-          <div className="ml-auto flex shrink-0 items-center gap-1.5">
-            <Link
-              href={scopedDocumentHref}
-              className="grid h-11 w-11 place-items-center rounded-full text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
-              aria-label="Scope this document"
-              title={headerSubtitle}
-            >
-              <Target className="h-5 w-5" />
-            </Link>
-            <button
-              type="button"
-              onClick={() => setMobileActionsOpen(true)}
-              className="grid h-11 w-11 place-items-center rounded-full text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
-              aria-label="Open document actions"
-            >
-              <Plus className="h-5 w-5" />
-            </button>
-          </div>
+            <Plus className="h-5 w-5" />
+          </button>
         </div>
-        <h1 className="sr-only">{headerTitle}</h1>
-      </header>
+      </div>
+      <h1 className="sr-only">{headerTitle}</h1>
 
       {readyDocument ? (
         <Sheet

From 7b5c0e1ed1865b82b6a3686242ed9f8c88c60eca Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Fri, 3 Jul 2026 01:33:33 +0800
Subject: [PATCH 2/2] fix(ui): address PR review - sidebar-aware composer
 offset + focusable skip target

- Add dashboard-composer-edge to the viewer's fixed bottom composer so
  it centres against the content area (not the full viewport) now that
  the route renders inside the shell with the desktop sidebar
- Make the shell's #main-content wrapper focusable (tabIndex -1,
  outline suppressed) so the root skip link still moves focus into the
  page content after the viewer's main lost the id

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/DocumentViewer.tsx                              | 2 +-
 .../clinical-dashboard/global-mockup-search-shell.tsx          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 0a80e48203..3e0189281b 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -2924,7 +2924,7 @@ export function DocumentViewer({
             event.preventDefault();
             if (canSummarizeDocument) void summarize();
           }}
-          className="floating-composer-edge fixed z-40 mx-auto flex min-h-[56px] max-w-3xl items-center gap-2 rounded-full border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] px-2 shadow-[var(--shadow-lux)] ring-1 ring-white/35 backdrop-blur-xl"
+          className="floating-composer-edge dashboard-composer-edge fixed z-40 mx-auto flex min-h-[56px] max-w-3xl items-center gap-2 rounded-full border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] px-2 shadow-[var(--shadow-lux)] ring-1 ring-white/35 backdrop-blur-xl"
         >
           <button
             type="button"
diff --git a/src/components/clinical-dashboard/global-mockup-search-shell.tsx b/src/components/clinical-dashboard/global-mockup-search-shell.tsx
index 0ccb26c9cc..1cb5cc2baf 100644
--- a/src/components/clinical-dashboard/global-mockup-search-shell.tsx
+++ b/src/components/clinical-dashboard/global-mockup-search-shell.tsx
@@ -325,8 +325,9 @@ function GlobalMockupSearchShellClient({
 
         <div
           id="main-content"
+          tabIndex={-1}
           className={cn(
-            "min-h-[calc(100dvh-4rem)] min-w-0 overflow-x-hidden",
+            "min-h-[calc(100dvh-4rem)] min-w-0 overflow-x-hidden focus:outline-none",
             !searchComposerVisible
               ? "pb-8"
               : searchMode === "answer"