Polish the PDF preview: full-size, framed, no bogus scroll

- Preview shows the document larger (max-w 680) so the important top of the
  invoice reads clearly, framed with a real border (the canvas no longer paints
  over an inset ring) and no inner padding gap.
- Auto-scroll and the "more ↓" affordance only apply during a run, so selecting
  an invoice shows the top of the document instead of jumping to the bottom.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DylanMerigaud

components/dashboard.tsx

@@ -88,6 +88,14 @@ export function Dashboard({ queue }: { queue: QueueItem[] }) {
   useEffect(() => {
     const el = traceScrollRef.current;
     if (!el) return;
+    // In the idle PDF preview there's no trace to follow — leave the scroll at the
+    // top (show the top of the document), and don't flag "more".
+    if (state.status === "idle") {
+      el.scrollTop = 0;
+      setTraceMore(false);
+      autoFollowRef.current = true; // re-arm for the next run
+      return;
+    }
     // A fresh run (trace just reset) re-arms auto-follow, even if the user had
     // scrolled up during the previous run.
     if (state.trace.length <= 1) autoFollowRef.current = true;
@@ -355,7 +363,9 @@ export function Dashboard({ queue }: { queue: QueueItem[] }) {
               />
             )}
           </div>
-          {traceMore && (
+          {/* "more ↓" is a trace affordance — only meaningful once a run is
+              underway, never on the static PDF preview. */}
+          {traceMore && state.status !== "idle" && (
             <>
               <div
                 aria-hidden

components/extraction-reveal.tsx

@@ -71,18 +71,33 @@ export function ExtractionReveal({
   // with the Extracted panel. (A small reflow at Run is fine; a preview that looks
   // like it's mid-extraction is not.)
   const running = mode === "running";
+
+  // Preview: the document alone, centered and a comfortable size (wider than the
+  // run split's column so it isn't lost in whitespace). Width-driven so it never
+  // overflows the pane; the card border/shadow stay visible around it.
+  if (mode === "preview") {
+    return (
+      <div
+        data-testid="extraction-reveal"
+        data-status="preview"
+        // `border` (not an inset ring) so the frame sits OUTSIDE the canvas and
+        // isn't painted over by it. No padding — the page meets the frame cleanly.
+        className="mx-auto w-full max-w-[680px] overflow-hidden rounded-lg border border-line bg-white shadow-card"
+      >
+        <PdfDocument src={pdfSrc} dim={false} />
+      </div>
+    );
+  }
+
   return (
     <div
       data-testid="extraction-reveal"
       data-status={mode}
-      className={
-        mode === "preview"
-          ? "mx-auto max-w-[440px]"
-          : "grid grid-cols-1 gap-3 sm:grid-cols-[1.1fr_1fr]"
-      }
+      className="grid grid-cols-1 gap-3 sm:grid-cols-[1.1fr_1fr]"
     >
-      {/* The real PDF the model reads */}
-      <div className="relative overflow-hidden rounded-lg bg-white shadow-card ring-1 ring-inset ring-line">
+      {/* The real PDF the model reads. `border` (not inset ring) so the canvas
+          doesn't paint over the frame. */}
+      <div className="relative overflow-hidden rounded-lg border border-line bg-white shadow-card">
         {/* scan sweep only while the model is actually reading */}
         {running && (
           <div
@@ -93,40 +108,37 @@ export function ExtractionReveal({
         <PdfDocument src={pdfSrc} dim={running} />
       </div>
 
-      {/* Extracted structure — only once a run is underway (absent in preview, so
-          the preview is just the document, not a mid-extraction-looking state). */}
-      {mode !== "preview" && (
-        <div className="rounded-lg bg-surface p-3 shadow-card ring-1 ring-inset ring-line">
-          <div className="mb-2 flex items-center justify-between">
-            <span className="text-[11px] font-medium uppercase tracking-wide text-muted">
-              Extracted
+      {/* Extracted structure (the run share-the-row panel). */}
+      <div className="rounded-lg bg-surface p-3 shadow-card ring-1 ring-inset ring-line">
+        <div className="mb-2 flex items-center justify-between">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-muted">
+            Extracted
+          </span>
+          {done && state?.matches != null && (
+            <span
+              className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                state.matches
+                  ? "bg-ok-soft text-ok ring-1 ring-inset ring-ok-line"
+                  : "bg-warn-soft text-warn ring-1 ring-inset ring-warn-line"
+              }`}
+            >
+              {state.matches
+                ? "reconciled with PO record"
+                : "differs from record"}
             </span>
-            {done && state?.matches != null && (
-              <span
-                className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${
-                  state.matches
-                    ? "bg-ok-soft text-ok ring-1 ring-inset ring-ok-line"
-                    : "bg-warn-soft text-warn ring-1 ring-inset ring-warn-line"
-                }`}
-              >
-                {state.matches
-                  ? "reconciled with PO record"
-                  : "differs from record"}
-              </span>
-            )}
-          </div>
-          <dl className="space-y-1.5">
-            {rows.map((label, i) => (
-              <FieldRow
-                key={label}
-                label={label}
-                value={fields[i]?.value ?? ""}
-                state={!done ? "reading" : i < revealed ? "shown" : "pending"}
-              />
-            ))}
-          </dl>
+          )}
         </div>
-      )}
+        <dl className="space-y-1.5">
+          {rows.map((label, i) => (
+            <FieldRow
+              key={label}
+              label={label}
+              value={fields[i]?.value ?? ""}
+              state={!done ? "reading" : i < revealed ? "shown" : "pending"}
+            />
+          ))}
+        </dl>
+      </div>
     </div>
   );
 }

components/pdf-document.tsx

@@ -8,14 +8,15 @@ import type { PDFPageProxy } from "pdfjs-dist";
  * canvas with pdf.js — the document shown in the right pane's extraction reveal.
  * An actual PDF, not an HTML mock.
  *
- * pdf.js is loaded dynamically (client-only) and its worker is resolved through
- * the bundler via `new URL(..., import.meta.url)`, so there's no CDN dependency.
- * Until the page paints we show an A4-ratio skeleton (not a text spinner) so the
- * layout doesn't jump. Any failure falls back to a short message.
+ * The canvas fills its parent's width and keeps A4 ratio; size the document by
+ * constraining the parent's width. pdf.js is loaded dynamically (client-only) and
+ * its worker is resolved through the bundler via `new URL(..., import.meta.url)`,
+ * so there's no CDN dependency. Until the page paints we show an A4-ratio skeleton
+ * (not a text spinner) so the layout doesn't jump. Failure falls back to a note.
  */
 
-// A4 portrait aspect ratio (height / width) — used to size the skeleton so it
-// matches the rendered page and the layout never shifts.
+// A4 portrait aspect ratio (height / width) — sizes the skeleton to match the
+// rendered page so the layout never shifts.
 const A4_RATIO = 841.89 / 595.28;
 
 export function PdfDocument({ src, dim }: { src: string; dim: boolean }) {
@@ -110,7 +111,7 @@ export function PdfDocument({ src, dim }: { src: string; dim: boolean }) {
       )}
       <canvas
         ref={canvasRef}
-        className={`absolute inset-0 block h-full w-full rounded ring-1 ring-inset ring-line transition-opacity duration-300 ${
+        className={`absolute inset-0 block h-full w-full transition-opacity duration-300 ${
           ready ? (dim ? "opacity-80" : "opacity-100") : "opacity-0"
         }`}
       />