From 52e4707c5016297259996712cb8e8e4b9fd444d2 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 12 Jul 2026 02:18:36 +0800
Subject: [PATCH 1/2] Compact document-viewer redesign: dedup chrome, honest
 cards, tighter PDF surface
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses a 20-point design review of the document viewer:

- Nav chrome: drop the redundant Answer|Documents toggle and the
  ‹Documents breadcrumb; header is now back-arrow + document <h1> title
  + scope + actions. Mobile back uses ArrowLeft (was a Menu hamburger).
- Overview cards: remove misleading chevrons; replace the fake wireframe
  page thumbnails with real "Page N" jump chips; de-dup the overview into
  a single header teaser; derive the type eyebrow instead of hardcoding
  "Clinical guideline"; fix uneven card heights.
- Actions: rebalance to a clean grid-cols-2 sm:grid-cols-4 row; relabel
  "Scope" to "Add to scope".
- PDF surface: collapse the toolbar to one row; stop the page indicator
  stretching full-width; replace the always-on helper paragraph and
  canvas/browser jargon with a "Sharper zoom"/"Standard view" toggle +
  tooltip; reduce reserved empty min-height.
- Evidence/tables/layout: de-emphasise the empty pinned-evidence state;
  let the extracted table lead with the raw image behind a "Show source
  image" disclosure; let the summary rail flow with the page (drop the
  nested sticky/overflow scroll), which also clears the composer overlap.

Preserves test invariants (h1 title, pinned-source-evidence/pdf-toolbar
testids, viewer-nav anchors, fullscreen/Answer labels, static mobile
toolbar). tsc/eslint/prettier clean; ui-smoke document-viewer suite green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/DocumentViewer.tsx | 464 ++++++++++++++----------------
 1 file changed, 222 insertions(+), 242 deletions(-)

diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 28a40eafd..329570f0c 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -17,7 +17,6 @@ import {
   FileText,
   Loader2,
   Maximize2,
-  Menu,
   Minimize2,
   Minus,
   Plus,
@@ -34,7 +33,8 @@ import {
 } from "lucide-react";
 import { type FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import { AccessibleTable } from "@/components/AccessibleTable";
-import { documentDisplayTitle } from "@/components/DocumentOrganizationBadges";
+import { documentDisplayTitle, documentOrganizationProfile } from "@/components/DocumentOrganizationBadges";
+import { formatDocumentLabelDisplay } from "@/lib/document-tags";
 import {
   DocumentActionAnchor,
   DocumentActionButton,
@@ -447,6 +447,65 @@ function DocumentImage({ image }: { image: ImageRow }) {
       .join(" "),
   );
 
+  const clinicalUseReasonLine =
+    image.clinicalUseClass && image.clinicalUseClass !== "clinical_evidence" && image.clinicalUseReason ? (
+      <p className={cn("text-xs leading-5", textMuted)}>{image.clinicalUseReason}</p>
+    ) : null;
+
+  // The image preview and its extracted table are the same content; when a
+  // structured table is available it leads and the raw image collapses behind a
+  // disclosure so the card is not doubled in height.
+  const imageBlock = (
+    <div className="rounded-lg bg-[color:var(--surface-inset)] p-3">
+      {failed ? (
+        <div className="grid aspect-[4/3] w-full place-items-center rounded-lg border border-[color:var(--warning)]/30 bg-[color:var(--warning-soft)] p-3 text-center text-xs font-semibold text-[color:var(--warning)]">
+          <div>
+            <AlertCircle className="mx-auto mb-2 h-4 w-4" />
+            Image preview failed.
+            <button
+              type="button"
+              onClick={retryImage}
+              className="mt-2 inline-flex min-h-11 items-center rounded-lg border border-[color:var(--warning)]/30 bg-[color:var(--surface)] px-3"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      ) : (
+        // Fixed-aspect frame: placeholder and image share one reserved box so
+        // the loaded image never resizes the layout (no content shift on load).
+        <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg">
+          {url ? (
+            <img
+              src={url}
+              alt={cleanCaption || tableHeading || "Document image"}
+              loading="lazy"
+              decoding="async"
+              onLoad={() => setLoaded(true)}
+              onError={handleImageError}
+              className={cn(
+                "absolute inset-0 h-full w-full rounded-lg object-contain transition-opacity duration-300 motion-reduce:transition-none",
+                loaded ? "opacity-100" : "opacity-0",
+              )}
+            />
+          ) : null}
+          {!url || !loaded ? (
+            <div className="absolute inset-0 grid place-items-center gap-1 rounded-lg text-center text-xs font-semibold text-[color:var(--text-muted)]">
+              {shouldLoad ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Loading image
+                </>
+              ) : (
+                "Image preview will load when visible"
+              )}
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <figure ref={figureRef} className={cn(sourceCard, "overflow-hidden p-3")}>
       <p className={cn("text-xs font-semibold uppercase tracking-[0.08em]", textMuted)}>
@@ -457,73 +516,43 @@ function DocumentImage({ image }: { image: ImageRow }) {
           ? ` · ${image.clinicalUseClass.replaceAll("_", " ")}`
           : ""}
       </p>
-      <div className="mt-2 rounded-lg bg-[color:var(--surface-inset)] p-3">
-        {failed ? (
-          <div className="grid aspect-[4/3] w-full place-items-center rounded-lg border border-[color:var(--warning)]/30 bg-[color:var(--warning-soft)] p-3 text-center text-xs font-semibold text-[color:var(--warning)]">
-            <div>
-              <AlertCircle className="mx-auto mb-2 h-4 w-4" />
-              Image preview failed.
-              <button
-                type="button"
-                onClick={retryImage}
-                className="mt-2 inline-flex min-h-11 items-center rounded-lg border border-[color:var(--warning)]/30 bg-[color:var(--surface)] px-3"
-              >
-                Retry
-              </button>
-            </div>
-          </div>
-        ) : (
-          // Fixed-aspect frame: placeholder and image share one reserved box so
-          // the loaded image never resizes the layout (no content shift on load).
-          <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg">
-            {url ? (
-              <img
-                src={url}
-                alt={cleanCaption || tableHeading || "Document image"}
-                loading="lazy"
-                decoding="async"
-                onLoad={() => setLoaded(true)}
-                onError={handleImageError}
-                className={cn(
-                  "absolute inset-0 h-full w-full rounded-lg object-contain transition-opacity duration-300 motion-reduce:transition-none",
-                  loaded ? "opacity-100" : "opacity-0",
-                )}
-              />
-            ) : null}
-            {!url || !loaded ? (
-              <div className="absolute inset-0 grid place-items-center gap-1 rounded-lg text-center text-xs font-semibold text-[color:var(--text-muted)]">
-                {shouldLoad ? (
-                  <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Loading image
-                  </>
-                ) : (
-                  "Image preview will load when visible"
-                )}
-              </div>
+      {hasStructuredTable ? (
+        <>
+          <figcaption className="mt-2 space-y-2 text-base-minus leading-6 text-[color:var(--text)]">
+            {tableHeading ? <p className="font-semibold">{tableHeading}</p> : null}
+            {showImageCaptionLine ? <p className={textMuted}>{cleanCaption}</p> : null}
+            <AccessibleTable
+              caption={tableCaption}
+              markdown={tableMarkdown}
+              rows={image.tableRows}
+              columns={image.tableColumns}
+              compact={false}
+              expandOnMobile
+              dialogTitle={tableCaption}
+            />
+            {clinicalUseReasonLine}
+          </figcaption>
+          <details className="group mt-3">
+            <summary className="inline-flex cursor-pointer list-none items-center gap-1.5 text-xs font-semibold text-[color:var(--clinical-accent)]">
+              <ChevronDown className="h-3.5 w-3.5 transition group-open:rotate-180" />
+              Show source image
+            </summary>
+            <div className="mt-2">{imageBlock}</div>
+          </details>
+        </>
+      ) : (
+        <>
+          <div className="mt-2">{imageBlock}</div>
+          <figcaption className="mt-3 space-y-2 text-base-minus leading-6 text-[color:var(--text)]">
+            {tableHeading ? <p className="font-semibold">{tableHeading}</p> : null}
+            {showImageCaptionLine ? <p className={textMuted}>{cleanCaption}</p> : null}
+            {image.tableTextSnippet ? (
+              <p className={cn("text-sm leading-6", textMuted)}>{image.tableTextSnippet}</p>
             ) : null}
-          </div>
-        )}
-      </div>
-      <figcaption className="mt-3 space-y-2 text-base-minus leading-6 text-[color:var(--text)]">
-        {tableHeading ? <p className="font-semibold">{tableHeading}</p> : null}
-        {showImageCaptionLine ? <p className={textMuted}>{cleanCaption}</p> : null}
-        <AccessibleTable
-          caption={tableCaption}
-          markdown={tableMarkdown}
-          rows={image.tableRows}
-          columns={image.tableColumns}
-          compact={false}
-          expandOnMobile
-          dialogTitle={tableCaption}
-        />
-        {!hasStructuredTable && image.tableTextSnippet ? (
-          <p className={cn("text-sm leading-6", textMuted)}>{image.tableTextSnippet}</p>
-        ) : null}
-        {image.clinicalUseClass && image.clinicalUseClass !== "clinical_evidence" && image.clinicalUseReason ? (
-          <p className={cn("text-xs leading-5", textMuted)}>{image.clinicalUseReason}</p>
-        ) : null}
-      </figcaption>
+            {clinicalUseReasonLine}
+          </figcaption>
+        </>
+      )}
       {displayLabels.length ? (
         <div className="mt-3 flex flex-wrap gap-1.5">
           {displayLabels.map((label) => (
@@ -670,26 +699,14 @@ function PinnedSourceEvidence({
     : "";
 
   if (!loading && !chunk) {
+    // Direct visits (not arrived via a cited answer passage) have nothing to
+    // pin, so keep this a slim, muted note rather than a prominent empty card.
     return (
-      <section
-        id={sectionId}
-        data-testid="pinned-source-evidence"
-        className={cn(
-          sourceCard,
-          "scroll-mt-24 border-[color:var(--clinical-accent)]/20 bg-[color:var(--surface-raised)] p-3 shadow-[var(--shadow-tight)]",
-        )}
-      >
-        <div className="flex items-start gap-3">
-          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-[color:var(--clinical-accent)]/20 bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
-            <Quote className="h-4 w-4" />
-          </span>
-          <div className="min-w-0">
-            <p className="text-sm font-semibold text-[color:var(--text)]">Source evidence</p>
-            <p className={cn("mt-1 text-xs leading-5", textMuted)}>
-              Open a cited answer passage to pin the exact indexed excerpt here.
-            </p>
-          </div>
-        </div>
+      <section id={sectionId} data-testid="pinned-source-evidence" className={cn(sourceCard, "scroll-mt-24 p-3")}>
+        <p className={cn("flex items-center gap-2 text-xs leading-5", textMuted)}>
+          <Quote className="h-3.5 w-3.5 shrink-0 text-[color:var(--text-soft)]" />
+          Open a cited answer passage to pin its exact indexed excerpt here.
+        </p>
       </section>
     );
   }
@@ -1315,49 +1332,51 @@ function PdfCanvasViewer({ url, title, initialPage }: { url: string; title: stri
     >
       <div
         data-testid="pdf-toolbar"
-        className="z-10 grid grid-cols-[44px_minmax(0,1fr)_44px] items-center gap-2 border-b border-[color:var(--border-lux)] bg-[linear-gradient(180deg,var(--surface-highlight),transparent_78%),var(--surface-glass)] p-2 shadow-[var(--shadow-tight)] backdrop-blur-xl sm:sticky sm:top-[69px] sm:flex sm:flex-wrap sm:p-3"
+        className="z-10 flex flex-wrap items-center gap-2 border-b border-[color:var(--border-lux)] bg-[linear-gradient(180deg,var(--surface-highlight),transparent_78%),var(--surface-glass)] p-2 shadow-[var(--shadow-tight)] backdrop-blur-xl sm:sticky sm:top-[69px] sm:p-3"
       >
-        <button
-          onClick={() => jumpToPage(page - 1)}
-          disabled={!pagesReady || page <= 1}
-          className={iconButton}
-          aria-label="Previous page"
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-        {pagesReady ? (
-          <label className="flex min-h-11 min-w-0 items-center justify-center gap-1.5 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] px-2 text-sm font-medium text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur-md sm:gap-2 sm:px-3">
-            <span className="hidden sm:inline">Page</span>
-            <input
-              aria-label="PDF page number"
-              value={pageInput}
-              disabled={!pagesReady}
-              onChange={(event) => setPageInput(event.target.value)}
-              onBlur={() => jumpToPage(Number(pageInput) || page)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") jumpToPage(Number(pageInput) || page);
-              }}
-              inputMode="numeric"
-              className="nums h-11 w-12 rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] text-center text-sm font-semibold text-[color:var(--text)] outline-none transition focus:border-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-60 sm:w-14"
-            />
-            <span className="nums text-sm-minus font-semibold sm:text-sm">of {totalPages}</span>
-          </label>
-        ) : (
-          <div className="flex min-h-11 min-w-0 items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-glass)] px-2 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur-md sm:px-3">
-            <Loader2 className="h-4 w-4 animate-spin text-[color:var(--clinical-accent)]" />
-            <span className="hidden sm:inline">{error ? "Page unavailable" : "Loading pages"}</span>
-            <span className="sm:hidden">{error ? "Unavailable" : "Loading"}</span>
-          </div>
-        )}
-        <button
-          onClick={() => jumpToPage(page + 1)}
-          disabled={!pagesReady || page >= totalPages}
-          className={iconButton}
-          aria-label="Next page"
-        >
-          <ChevronRight className="h-4 w-4" />
-        </button>
-        <div className="col-span-3 grid grid-cols-3 gap-1.5 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-1 shadow-[var(--shadow-inset)] sm:col-span-1 sm:ml-auto sm:flex sm:items-center">
+        <div className="flex items-center gap-1.5">
+          <button
+            onClick={() => jumpToPage(page - 1)}
+            disabled={!pagesReady || page <= 1}
+            className={iconButton}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          {pagesReady ? (
+            <label className="flex min-h-11 items-center gap-1.5 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] px-2 text-sm font-medium text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur-md sm:gap-2">
+              <span className="hidden sm:inline">Page</span>
+              <input
+                aria-label="PDF page number"
+                value={pageInput}
+                disabled={!pagesReady}
+                onChange={(event) => setPageInput(event.target.value)}
+                onBlur={() => jumpToPage(Number(pageInput) || page)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") jumpToPage(Number(pageInput) || page);
+                }}
+                inputMode="numeric"
+                className="nums h-9 w-11 rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] text-center text-sm font-semibold text-[color:var(--text)] outline-none transition focus:border-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-60 sm:w-12"
+              />
+              <span className="nums text-sm-minus font-semibold sm:text-sm">of {totalPages}</span>
+            </label>
+          ) : (
+            <div className="flex min-h-11 items-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-glass)] px-2 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur-md">
+              <Loader2 className="h-4 w-4 animate-spin text-[color:var(--clinical-accent)]" />
+              <span className="hidden sm:inline">{error ? "Page unavailable" : "Loading pages"}</span>
+              <span className="sm:hidden">{error ? "Unavailable" : "Loading"}</span>
+            </div>
+          )}
+          <button
+            onClick={() => jumpToPage(page + 1)}
+            disabled={!pagesReady || page >= totalPages}
+            className={iconButton}
+            aria-label="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="ml-auto flex items-center gap-1.5 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-1 shadow-[var(--shadow-inset)]">
           <button
             onClick={() => {
               setFitWidth(false);
@@ -1398,7 +1417,7 @@ function PdfCanvasViewer({ url, title, initialPage }: { url: string; title: stri
           {fullscreenActive ? (
             <button
               onClick={exitFullscreenView}
-              className={cn(iconButton, "col-span-3 sm:col-span-1")}
+              className={iconButton}
               aria-label="Exit fullscreen document view"
               type="button"
             >
@@ -1413,7 +1432,7 @@ function PdfCanvasViewer({ url, title, initialPage }: { url: string; title: stri
         data-testid="pdf-canvas-scroll"
         ref={holderRef}
         className={cn(
-          "polished-scroll relative flex min-h-[46vh] w-full min-w-0 max-w-full justify-center overscroll-contain p-2 [-webkit-overflow-scrolling:touch] sm:min-h-[62vh] sm:p-4",
+          "polished-scroll relative flex min-h-[38vh] w-full min-w-0 max-w-full justify-center overscroll-contain p-2 [-webkit-overflow-scrolling:touch] sm:min-h-[52vh] sm:p-4",
           fullscreenActive && "min-h-0 flex-1 sm:min-h-0",
           fitWidth
             ? "overflow-x-hidden overflow-y-auto [touch-action:pan-y]"
@@ -1744,6 +1763,22 @@ function compactDocumentType(document: ClinicalDocument) {
   return documentFileKind(document.file_name, "PDF");
 }
 
+// Derive the header eyebrow from the document's real type instead of asserting
+// every document is a "Clinical guideline". Prefers the organization profile's
+// document_type, then a high-confidence document_type label, then a neutral fallback.
+function documentTypeEyebrow(document: ClinicalDocument) {
+  const profile = documentOrganizationProfile(document);
+  const profileType =
+    typeof profile?.document_type?.label === "string" && profile.document_type.label !== "unknown"
+      ? profile.document_type.label
+      : null;
+  const labelType = document.labels?.find(
+    (label) => label.label_type === "document_type" && (label.confidence ?? 0) >= 0.5,
+  )?.label;
+  const typeLabel = profileType ?? labelType;
+  return typeLabel ? formatDocumentLabelDisplay(typeLabel, "document_type") : "Clinical document";
+}
+
 function documentOverviewText(document: ClinicalDocument) {
   const profile = document.summary?.clinical_specifics?.profile;
   // The stored raw summary opens with PDF-header boilerplate on many live
@@ -1762,30 +1797,6 @@ function documentKeySections(document: ClinicalDocument) {
   return Array.from(new Set(labels)).slice(0, 3);
 }
 
-function DocumentPagePreview({ pageNumber }: { pageNumber: number | null }) {
-  return (
-    <a href="#pdf-preview-section" className="group grid min-w-0 justify-items-center gap-2 text-center">
-      <span className="grid aspect-[0.76] min-h-[86px] w-full max-w-[7.5rem] place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-2 shadow-[var(--shadow-inset)] transition group-hover:border-[color:var(--border-strong)] group-hover:bg-[color:var(--surface-subtle)] sm:max-w-[5.5rem]">
-        <span className="grid w-full gap-1.5">
-          <span className="h-2 rounded bg-[color:var(--clinical-accent-soft)]" />
-          <span className="h-1 rounded bg-[color:var(--border-strong)]/55" />
-          <span className="h-1 rounded bg-[color:var(--border-strong)]/45" />
-          <span className="h-1 rounded bg-[color:var(--border-strong)]/35" />
-          <span className="mt-1 grid grid-cols-2 gap-1">
-            <span className="h-8 rounded bg-[color:var(--clinical-accent-soft)]/75" />
-            <span className="grid gap-1">
-              <span className="h-1 rounded bg-[color:var(--border-strong)]/35" />
-              <span className="h-1 rounded bg-[color:var(--border-strong)]/30" />
-              <span className="h-1 rounded bg-[color:var(--border-strong)]/25" />
-            </span>
-          </span>
-        </span>
-      </span>
-      <span className="nums text-sm font-semibold text-[color:var(--text-muted)]">p.{pageNumber ?? "n/a"}</span>
-    </a>
-  );
-}
-
 function usefulDocumentPages(initialPage: number, pages: PageRow[]) {
   return Array.from(new Set([initialPage, ...pages.map((page) => page.page_number)]))
     .filter((page) => Number.isFinite(page))
@@ -1814,18 +1825,12 @@ function DocumentOverviewLanding({
   const keySections = documentKeySections(document);
   const usefulPages = usefulDocumentPages(initialPage, pages);
   const documentType = compactDocumentType(document);
+  const overviewText = documentOverviewText(document);
+  const resolvedPages = usefulPages.length ? usefulPages : [initialPage];
 
   return (
-    <section className="grid gap-4 lg:grid-cols-3 lg:items-stretch">
-      <Link
-        href="/?mode=documents"
-        className="inline-flex min-h-11 w-fit items-center gap-2 rounded-lg px-1 text-sm font-semibold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)] lg:col-span-3"
-      >
-        <ChevronLeft className="h-4 w-4" />
-        Documents
-      </Link>
-
-      <article className={cn(panel, "p-4 sm:p-5 lg:col-span-3")}>
+    <section className="grid gap-4 lg:grid-cols-2 lg:items-start">
+      <article className={cn(panel, "p-4 sm:p-5 lg:col-span-2")}>
         <div className="grid grid-cols-[auto_minmax(0,1fr)] gap-4">
           <DocumentFileTile
             kind={documentType}
@@ -1834,7 +1839,7 @@ function DocumentOverviewLanding({
           />
           <div className="min-w-0">
             <p className="text-xs font-semibold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
-              Clinical guideline
+              {documentTypeEyebrow(document)}
             </p>
             <h2 className="line-clamp-2 text-xl font-semibold leading-7 text-[color:var(--text-heading)]">
               {documentDisplayTitle(document)}
@@ -1847,10 +1852,13 @@ function DocumentOverviewLanding({
                 `Uploaded ${formatClinicalDate(document.created_at)}`,
               ]}
             />
+            {overviewText ? (
+              <p className={cn("mt-2 line-clamp-2 text-sm leading-6", textMuted)}>{overviewText}</p>
+            ) : null}
             {/* Search relevance badges are rendered in document search results; the viewer has no ranking context. */}
           </div>
         </div>
-        <div className="mt-4 grid gap-2 sm:grid-cols-[minmax(0,1.2fr)_minmax(0,0.75fr)_minmax(0,1fr)]">
+        <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
           {signedUrl ? (
             <DocumentActionAnchor
               href={signedUrl}
@@ -1877,42 +1885,27 @@ function DocumentOverviewLanding({
               Download PDF
             </DocumentActionAnchor>
           ) : null}
-          <div className="grid grid-cols-2 gap-2 sm:contents">
-            <DocumentActionButton
-              onClick={onAddToScope}
-              icon={Target}
-              className={cn(secondaryButton, "min-h-12 px-2 text-xs sm:text-sm")}
-            >
-              Scope
-            </DocumentActionButton>
-            <DocumentActionButton
-              onClick={onAskFromDocument}
-              disabled={!canSummarizeDocument}
-              icon={Sparkles}
-              className={cn(secondaryButton, "min-h-12 whitespace-nowrap px-2 text-xs sm:text-sm")}
-            >
-              Answer from this
-            </DocumentActionButton>
-          </div>
+          <DocumentActionButton
+            onClick={onAddToScope}
+            icon={Target}
+            className={cn(secondaryButton, "w-full min-h-12 px-2 text-xs sm:text-sm")}
+          >
+            Add to scope
+          </DocumentActionButton>
+          <DocumentActionButton
+            onClick={onAskFromDocument}
+            disabled={!canSummarizeDocument}
+            icon={Sparkles}
+            className={cn(secondaryButton, "w-full min-h-12 whitespace-nowrap px-2 text-xs sm:text-sm")}
+          >
+            Answer from this
+          </DocumentActionButton>
         </div>
       </article>
 
-      <section id="document-overview" className={cn(sourceCard, "scroll-mt-24 p-4")}>
-        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-4">
-          <span className="grid h-14 w-14 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
-            <FileText className="h-6 w-6" />
-          </span>
-          <div className="min-w-0">
-            <h3 className="text-lg font-semibold text-[color:var(--text-heading)]">Overview</h3>
-            <p className={cn("mt-1 line-clamp-3 text-sm leading-6", textMuted)}>{documentOverviewText(document)}</p>
-          </div>
-          <ChevronDown className="h-6 w-6 -rotate-90 text-[color:var(--text-soft)]" />
-        </div>
-      </section>
-
       <section className={cn(sourceCard, "p-4")}>
-        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-4">
-          <span className="grid h-14 w-14 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
+        <div className="flex items-start gap-4">
+          <span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
             <Tag className="h-5 w-5" />
           </span>
           <div className="min-w-0">
@@ -1928,25 +1921,30 @@ function DocumentOverviewLanding({
               ))}
             </div>
           </div>
-          <ChevronDown className="h-6 w-6 -rotate-90 text-[color:var(--text-soft)]" />
         </div>
       </section>
 
       <section className={cn(sourceCard, "p-4")}>
-        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-4">
-          <span className="grid h-14 w-14 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
-            <FileText className="h-6 w-6" />
+        <div className="flex items-start gap-4">
+          <span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
+            <FileText className="h-5 w-5" />
           </span>
           <div className="min-w-0">
             <h3 className="text-lg font-semibold text-[color:var(--text-heading)]">Useful pages</h3>
-            <p className={cn("mt-1 text-sm leading-6", textMuted)}>Most relevant pages for this document.</p>
-            <div className="mt-4 grid max-w-md grid-cols-3 gap-3">
-              {(usefulPages.length ? usefulPages : [initialPage]).map((page) => (
-                <DocumentPagePreview key={page} pageNumber={page} />
+            <p className={cn("mt-1 text-sm leading-6", textMuted)}>Jump straight to the most relevant pages.</p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {resolvedPages.map((page) => (
+                <Link
+                  key={page}
+                  href={`/documents/${document.id}?page=${page}#pdf-preview-section`}
+                  className="inline-flex min-h-9 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent)]/20 bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-medium text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--surface-subtle)]"
+                >
+                  <FileText className="h-3.5 w-3.5" />
+                  Page {page}
+                </Link>
               ))}
             </div>
           </div>
-          <ChevronDown className="h-6 w-6 -rotate-90 text-[color:var(--text-soft)]" />
         </div>
       </section>
     </section>
@@ -2495,34 +2493,18 @@ export function DocumentViewer({
             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"
           >
-            <Menu className="h-5 w-5 sm:hidden" />
-            <ArrowLeft className="hidden h-5 w-5 sm:block" />
+            <ArrowLeft 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]"
-          >
-            <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(--clinical-accent-contrast)] shadow-[var(--shadow-tight)] sm:text-sm"
-            >
-              Documents
-            </Link>
-          </div>
+          <h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-[color:var(--text)] sm:text-base">
+            {headerTitle}
+          </h1>
 
           <div className="ml-auto flex shrink-0 items-center gap-1.5">
             <Link
               href={scopedDocumentHref}
               className="hidden 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)] min-[380px]:grid"
-              aria-label="Scope this document"
+              aria-label="Add this document to scope"
               title={headerSubtitle}
             >
               <Target className="h-5 w-5" />
@@ -2537,7 +2519,6 @@ export function DocumentViewer({
             </button>
           </div>
         </div>
-        <h1 className="sr-only">{headerTitle}</h1>
       </header>
 
       {readyDocument ? (
@@ -2626,7 +2607,7 @@ export function DocumentViewer({
                 className={cn(secondaryButton, "min-h-12 justify-start text-xs")}
               >
                 <Target className="h-4 w-4" />
-                Scope
+                Add to scope
               </button>
             </div>
             <details className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3">
@@ -2767,23 +2748,22 @@ export function DocumentViewer({
                 </div>
               ) : signedUrl && document?.file_type === "application/pdf" ? (
                 <>
-                  <div className="mb-2 flex flex-wrap items-center justify-between gap-2 px-2 pt-2 sm:px-3">
-                    <p className={cn("hidden min-w-0 flex-1 text-2xs sm:block", textMuted)}>
-                      Browser PDF mode keeps heavy-zoom pages crisp and is recommended when zoom quality looks soft.
-                    </p>
+                  <div className="mb-2 flex items-center justify-end px-2 pt-2 sm:px-3">
                     <button
                       type="button"
                       onClick={() => {
                         setHasExplicitPdfViewerMode(true);
                         setUseNativePdfViewer((current) => !current);
                       }}
-                      aria-label={useNativePdfViewer ? "Switch to canvas zoom mode" : "Switch to browser PDF mode"}
-                      className={cn(secondaryButton, "min-h-11 w-full justify-center px-3 text-xs sm:w-auto")}
+                      title={
+                        useNativePdfViewer
+                          ? "Switch back to the standard fit-to-width reader."
+                          : "Render pages with your browser's PDF engine for crisper detail at heavy zoom."
+                      }
+                      aria-label={useNativePdfViewer ? "Switch to standard fit view" : "Switch to sharper zoom mode"}
+                      className={cn(secondaryButton, "min-h-9 px-3 text-xs")}
                     >
-                      <span className="sm:hidden">{useNativePdfViewer ? "Canvas mode" : "Browser mode"}</span>
-                      <span className="hidden sm:inline">
-                        {useNativePdfViewer ? "Use canvas zoom mode" : "Use browser PDF mode"}
-                      </span>
+                      {useNativePdfViewer ? "Standard view" : "Sharper zoom"}
                     </button>
                   </div>
                   {useNativePdfViewer ? (
@@ -2866,7 +2846,7 @@ export function DocumentViewer({
           </div>
         </div>
 
-        <aside className="polished-scroll min-w-0 grid content-start gap-4 sm:gap-5 md:grid-cols-2 md:items-start lg:sticky lg:top-[81px] lg:max-h-[calc(100dvh-97px)] lg:grid-cols-1 lg:self-start lg:overflow-y-auto lg:overscroll-contain lg:pr-1">
+        <aside className="min-w-0 grid content-start gap-4 sm:gap-5 md:grid-cols-2 md:items-start lg:grid-cols-1">
           {indexWarnings.length ? (
             <InlineNotice tone="warning" className="text-xs md:col-span-2 lg:col-span-1">
               <span className="font-bold">Extraction warnings</span>

From a82f7c3974f870a661d1f1249b29dc79d449ab15 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 12 Jul 2026 02:38:17 +0800
Subject: [PATCH 2/2] Keep source image visible when the extracted table won't
 render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses CodeRabbit/Codex review on #509: the table-leads branch collapsed
the source image behind a disclosure whenever any table metadata was present,
but AccessibleTable renders nothing for columns-only input or unparseable
markdown — leaving an empty caption above a hidden image.

- Add exported hasRenderableAccessibleTable() mirroring AccessibleTable's own
  parse+normalize so the layout decision can't diverge from what it renders;
  columns-only / unparseable-markdown tables now route to the image-first branch.
- Pass the source image as lowConfidenceFallback so a table that normalizes but
  can't be confidently reconstructed shows the image inline instead of a
  misleading grid.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/AccessibleTable.tsx | 23 +++++++++++++++++++++++
 src/components/DocumentViewer.tsx  | 13 +++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/AccessibleTable.tsx b/src/components/AccessibleTable.tsx
index b9e1a44fe..3afe28f49 100644
--- a/src/components/AccessibleTable.tsx
+++ b/src/components/AccessibleTable.tsx
@@ -288,6 +288,29 @@ function useMobileTableExpansion(enabledByDefault: boolean) {
   return enabledByDefault && isMobile;
 }
 
+// Mirrors the component's `normalized` computation so callers can decide layout
+// (e.g. whether to collapse a source image) using the exact same parse/normalize
+// rules AccessibleTable renders with. Returns false when the table would render
+// nothing — columns-only input, unparseable markdown, or an all-metadata grid.
+export function hasRenderableAccessibleTable({
+  markdown,
+  rows,
+  columns,
+  clinicalOnly = false,
+}: {
+  markdown?: string | null;
+  rows?: string[][] | null;
+  columns?: string[] | null;
+  clinicalOnly?: boolean;
+}): boolean {
+  const hasExplicitRows = Boolean(rows?.length);
+  const parsed = hasExplicitRows ? rows : parseMarkdownTable(markdown);
+  if (!parsed?.length) return false;
+  const table = normalizeAccessibleTable(parsed, hasExplicitRows ? columns : null);
+  if (!table) return false;
+  return Boolean(clinicalOnly ? clinicalOnlyTable(table) : table);
+}
+
 export function AccessibleTable({
   caption,
   markdown,
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 329570f0c..7c46aa2ad 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -32,7 +32,7 @@ import {
   X,
 } from "lucide-react";
 import { type FormEvent, useEffect, useMemo, useRef, useState } from "react";
-import { AccessibleTable } from "@/components/AccessibleTable";
+import { AccessibleTable, hasRenderableAccessibleTable } from "@/components/AccessibleTable";
 import { documentDisplayTitle, documentOrganizationProfile } from "@/components/DocumentOrganizationBadges";
 import { formatDocumentLabelDisplay } from "@/lib/document-tags";
 import {
@@ -437,7 +437,15 @@ function DocumentImage({ image }: { image: ImageRow }) {
     : looksLikeTableText(image.tableTextSnippet)
       ? image.tableTextSnippet
       : null;
-  const hasStructuredTable = Boolean(tableMarkdown || image.tableRows?.length || image.tableColumns?.length);
+  // Only let the table "lead" (collapsing the source image) when AccessibleTable
+  // will actually render a table. Columns-only input or unparseable markdown
+  // render nothing, so those route to the image-first branch instead of leaving
+  // an empty caption above a hidden source image.
+  const hasStructuredTable = hasRenderableAccessibleTable({
+    markdown: tableMarkdown,
+    rows: image.tableRows,
+    columns: image.tableColumns,
+  });
   const tableCaption = tableHeading || cleanCaption || "Document table";
   const showImageCaptionLine = cleanCaption && cleanCaption !== tableCaption;
   const displayLabels = smartEvidenceTags(
@@ -529,6 +537,7 @@ function DocumentImage({ image }: { image: ImageRow }) {
               compact={false}
               expandOnMobile
               dialogTitle={tableCaption}
+              lowConfidenceFallback={imageBlock}
             />
             {clinicalUseReasonLine}
           </figcaption>