merge: History tab on Upload page into main

backend/src/cyclone/api.py

@@ -1628,12 +1628,39 @@ def _batch_summary_claim_count(rec: BatchRecord) -> int:
     return 0
 
 
+def _batch_summary_claim_ids(rec: BatchRecord) -> list[str]:
+    """Return per-claim ids for an 837P batch, or ``[]`` otherwise.
+
+    The Upload page's History tab renders a one-click Re-export ZIP
+    button per row; that button calls
+    ``POST /api/batches/{id}/export-837`` with the row's claim ids.
+    Carrying them in the list response avoids an extra round-trip
+    to ``/api/batches/{id}`` for every row. 835 has no re-export
+    endpoint, so the list is empty for those — the UI uses the
+    empty list as the signal to hide the button.
+    """
+    if rec.kind != "837p":
+        return []
+    return [
+        c.claim_id
+        for c in rec.result.claims  # type: ignore[attr-defined]
+        if getattr(c, "claim_id", None)
+    ]
+
+
 @app.get("/api/batches", dependencies=[Depends(matrix_gate)])
 def list_batches(
     request: Request,
     limit: int = Query(100, ge=1, le=1000),
 ) -> Any:
-    """Summary of all parsed batches, newest first."""
+    """Summary of all parsed batches, newest first.
+
+    Each item includes ``claimIds`` (837P only) so the History tab
+    on the Upload page can render a one-click re-export button per
+    row without an extra round-trip to ``/api/batches/{id}``. The
+    list is still capped at ``limit`` claims; see the full result
+    via the by-id endpoint when more is needed.
+    """
     records = store.list(limit=limit)
     items = [
         {
@@ -1642,6 +1669,7 @@ def list_batches(
             "inputFilename": r.input_filename,
             "parsedAt": r.parsed_at.isoformat().replace("+00:00", "Z"),
             "claimCount": _batch_summary_claim_count(r),
+            "claimIds": _batch_summary_claim_ids(r),
         }
         for r in records
     ]

backend/tests/test_api_gets.py

@@ -65,6 +65,42 @@ def test_batches_returns_summary_after_parse(seeded_store):
     assert body["items"][0]["inputFilename"] == "x.txt"
 
 
+def test_batches_includes_claim_ids_for_837p(seeded_store):
+    """The Upload page's History tab renders a Re-export ZIP button per
+    row that fires ``POST /api/batches/{id}/export-837`` with the row's
+    claim ids. Carry those ids in the list response so the UI doesn't
+    need an extra round-trip per row to fetch them."""
+    batches = seeded_store.get("/api/batches", headers=JSON).json()["items"]
+    assert len(batches) == 1
+    item = batches[0]
+    assert item["kind"] == "837p"
+    # claimIds is a non-empty list of the same claim ids that live
+    # inside the parsed result — see `seeded_store` in conftest.py.
+    assert isinstance(item["claimIds"], list)
+    assert len(item["claimIds"]) == 2
+    full = seeded_store.get(f"/api/batches/{item['id']}").json()
+    assert sorted(item["claimIds"]) == sorted(c["claim_id"] for c in full["claims"])
+
+
+def test_batches_claim_ids_empty_for_835(client: TestClient, tmp_path):
+    """835 has no re-export endpoint — the field is always ``[]`` so the
+    History tab can use it as the signal to hide the Re-export button."""
+    src = Path(__file__).parent / "fixtures" / "minimal_835.txt"
+    files = {"file": ("minimal_835.txt", src.read_bytes(), "text/plain")}
+    r = client.post(
+        "/api/parse-835",
+        params={"payer": "co_medicaid_835"},
+        files=files,
+        headers=JSON,
+    )
+    assert r.status_code == 200, r.text
+    body = client.get("/api/batches", headers=JSON).json()
+    assert body["total"] == 1
+    item = body["items"][0]
+    assert item["kind"] == "835"
+    assert item["claimIds"] == []
+
+
 # --------------------------------------------------------------------------- #
 # /api/batches/{id}
 # --------------------------------------------------------------------------- #

src/lib/api.ts

@@ -171,6 +171,14 @@ export interface BatchSummary {
   inputFilename: string;
   parsedAt: string;
   claimCount: number;
+  /**
+   * Per-claim ids for 837P batches. Empty for 835 (no re-export
+   * endpoint) — the UI hides the one-click Re-export button when
+   * this is empty. Lets the History tab call
+   * `POST /api/batches/{id}/export-837` directly with the row's ids
+   * instead of an extra round-trip to `/api/batches/{id}`.
+   */
+  claimIds: string[];
 }
 
 // ---------------------------------------------------------------------------

src/pages/Upload.history.test.tsx

@@ -0,0 +1,531 @@
+// @vitest-environment happy-dom
+// Tell React this is an `act`-aware test environment so react-query's
+// internal state updates flush through without noisy console warnings.
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
+  true;
+
+import React, { act } from "react";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { MemoryRouter, useLocation } from "react-router-dom";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Upload } from "./Upload";
+import { useAppStore } from "@/store";
+import type { ParsedBatch } from "@/types";
+import type { BatchSummary } from "@/lib/api";
+
+// Mock the api surface so the History tab never touches the network.
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      isConfigured: true,
+      listBatches: vi.fn(),
+      exportBatch837: vi.fn(),
+    },
+  };
+});
+
+import { api } from "@/lib/api";
+
+// The Re-export ZIP button ultimately calls `downloadBlob(filename, blob)`
+// from `@/lib/download`; that helper mutates the DOM (creates a link and
+// clicks it). Stub the whole module so we never touch the real DOM and
+// the test can assert the filename we asked to be downloaded.
+vi.mock("@/lib/download", () => ({
+  downloadBlob: vi.fn(),
+  downloadTextFile: vi.fn(),
+}));
+
+import { downloadBlob } from "@/lib/download";
+
+// The Re-export path toasts via sonner. Mock it to keep the test output
+// quiet and let assertions about success/error fire without spam.
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    message: vi.fn(),
+  },
+}));
+
+import { toast } from "sonner";
+
+// The Upload page also relies on useAuth (via RoleGate). Mock it to an
+// authenticated admin so the parse affordances render — we don't test
+// RoleGate behavior here, only the History tab.
+vi.mock("@/auth/useAuth", () => ({
+  useAuth: () => ({
+    user: { id: 1, username: "test", role: "admin" },
+    status: "authenticated",
+  }),
+}));
+
+// ---------------------------------------------------------------------------
+// Test harness — Upload page lives behind a router (for useSearchParams)
+// AND a QueryClient (for useBatches). Wrap both.
+// ---------------------------------------------------------------------------
+
+interface MountOpts {
+  initialEntries?: string[];
+  /** Pre-populated query data for `api.listBatches`. */
+  batches?: BatchSummary[];
+  /** Whether listBatches should resolve or reject. */
+  batchesStatus?: "success" | "error" | "pending";
+}
+
+interface Harness {
+  container: HTMLDivElement;
+  unmount: () => void;
+  tracker: { pathname: string; search: string };
+}
+
+function mountUpload(opts: MountOpts = {}): Harness {
+  const {
+    initialEntries = ["/upload"],
+    batches = [],
+    batchesStatus = "success",
+  } = opts;
+
+  // Wire the listBatches mock based on the requested status.
+  const listBatchesMock = api.listBatches as unknown as ReturnType<
+    typeof vi.fn
+  >;
+  listBatchesMock.mockReset();
+  if (batchesStatus === "success") {
+    listBatchesMock.mockResolvedValue(batches);
+  } else if (batchesStatus === "error") {
+    listBatchesMock.mockRejectedValue(new Error("network down"));
+  } else {
+    // pending — never resolve
+    listBatchesMock.mockReturnValue(new Promise(() => {}));
+  }
+
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const tracker = { pathname: "/upload", search: "" };
+  const Tracker = () => {
+    const loc = useLocation();
+    React.useEffect(() => {
+      tracker.pathname = loc.pathname;
+      tracker.search = loc.search;
+    }, [loc.pathname, loc.search]);
+    return null;
+  };
+  const qc = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+  const root: Root = createRoot(container);
+  act(() => {
+    root.render(
+      React.createElement(
+        MemoryRouter,
+        { initialEntries },
+        React.createElement(
+          QueryClientProvider,
+          { client: qc },
+          React.createElement(Tracker),
+          React.createElement(Upload),
+        ),
+      ),
+    );
+  });
+  return {
+    container,
+    unmount: () => {
+      act(() => root.unmount());
+      container.remove();
+    },
+    tracker,
+  };
+}
+
+async function flush(): Promise<void> {
+  // React Query schedules its settled state through a microtask +
+  // setTimeout chain. Two ticks is the minimum to settle a mocked
+  // promise end-to-end; three to be safe across happy-dom
+  // implementations.
+  for (let i = 0; i < 3; i++) {
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+  }
+}
+
+/**
+ * Poll a predicate until it holds or we time out. Used for assertions
+ * that have to wait for the query to settle (which takes more than a
+ * single `flush()` in some happy-dom runs).
+ */
+async function settle(
+  predicate: () => boolean,
+  timeoutMs = 2000,
+): Promise<void> {
+  const start = Date.now();
+  while (!predicate()) {
+    if (Date.now() - start > timeoutMs) {
+      throw new Error("settle: predicate did not hold within timeout");
+    }
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+  }
+}
+
+/**
+ * Click a Radix Tabs.Trigger in happy-dom. Radix listens for
+ * `pointerdown` (not just `click`) to fire its onValueChange handler,
+ * so the synthetic event sequence matters.
+ */
+async function clickTab(trigger: HTMLElement): Promise<void> {
+  await act(async () => {
+    trigger.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        bubbles: true,
+        cancelable: true,
+        pointerType: "mouse",
+      }),
+    );
+    trigger.dispatchEvent(
+      new MouseEvent("mousedown", { bubbles: true, cancelable: true }),
+    );
+    trigger.dispatchEvent(
+      new MouseEvent("mouseup", { bubbles: true, cancelable: true }),
+    );
+    trigger.click();
+    await flush();
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const BATCH_837_A: BatchSummary = {
+  id: "BATCH-A",
+  kind: "837p",
+  inputFilename: "tp-001-837P.txt",
+  parsedAt: "2026-06-23T12:00:00Z",
+  claimCount: 12,
+  claimIds: ["CLM-001", "CLM-002", "CLM-003"],
+};
+
+const BATCH_837_B: BatchSummary = {
+  id: "BATCH-B",
+  kind: "837p",
+  inputFilename: "tp-002-837P.txt",
+  parsedAt: "2026-06-22T12:00:00Z",
+  claimCount: 7,
+  claimIds: ["CLM-101", "CLM-102"],
+};
+
+const BATCH_835: BatchSummary = {
+  id: "BATCH-C",
+  kind: "835",
+  inputFilename: "tp-003-835.txt",
+  parsedAt: "2026-06-21T12:00:00Z",
+  claimCount: 4,
+  claimIds: [], // 835 has no re-export endpoint
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("Upload page — History tab", () => {
+  beforeEach(() => {
+    useAppStore.setState({ parsedBatches: [] });
+    vi.mocked(downloadBlob).mockReset();
+    vi.mocked(toast.success).mockReset();
+    vi.mocked(toast.error).mockReset();
+  });
+
+  afterEach(() => {
+    useAppStore.setState({ parsedBatches: [] });
+  });
+
+  it("renders the Upload tab by default and shows the History trigger with a count badge", async () => {
+    const { container, unmount } = mountUpload({
+      batches: [BATCH_837_A, BATCH_837_B],
+    });
+    await settle(() => container.textContent?.includes("· 2") === true);
+
+    // Both triggers are present.
+    const triggers = container.querySelectorAll('[role="tab"]');
+    expect(triggers.length).toBeGreaterThanOrEqual(2);
+    expect(container.textContent).toContain("Upload");
+    expect(container.textContent).toContain("History");
+
+    // Count badge shows the persisted-batch count.
+    expect(container.textContent).toContain("· 2");
+
+    unmount();
+  });
+
+  it("clicking the History trigger shows the batch table and hides the dropzone", async () => {
+    const { container, unmount } = mountUpload({
+      batches: [BATCH_837_A, BATCH_837_B],
+    });
+    await flush();
+
+    // Before click: the dropzone is rendered.
+    expect(
+      container.querySelector('[aria-label="File upload"]'),
+    ).not.toBeNull();
+
+    // Click the History trigger.
+    const historyTrigger = Array.from(
+      container.querySelectorAll('[role="tab"]'),
+    ).find((el) => el.textContent?.startsWith("History")) as HTMLElement;
+    expect(historyTrigger).toBeDefined();
+    await clickTab(historyTrigger);
+
+    // Now the dropzone is hidden and the history table is visible.
+    expect(container.querySelector('[aria-label="File upload"]')).toBeNull();
+    expect(container.textContent).toContain("Batch history");
+    expect(container.textContent).toContain("tp-001-837P.txt");
+    expect(container.textContent).toContain("tp-002-837P.txt");
+    unmount();
+  });
+
+  it("clicking the History trigger mirrors ?tab=history in the URL", async () => {
+    const { container, unmount, tracker } = mountUpload({
+      batches: [BATCH_837_A],
+    });
+    await flush();
+
+    const historyTrigger = Array.from(
+      container.querySelectorAll('[role="tab"]'),
+    ).find((el) => el.textContent?.startsWith("History")) as HTMLElement;
+    await clickTab(historyTrigger);
+
+    expect(tracker.search).toContain("tab=history");
+    unmount();
+  });
+
+  it("?tab=history in the initial URL deep-links directly to the History tab", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [BATCH_837_A, BATCH_837_B],
+    });
+    await flush();
+
+    // Dropzone is hidden — we landed on the History tab.
+    expect(container.querySelector('[aria-label="File upload"]')).toBeNull();
+    expect(container.textContent).toContain("Batch history");
+    expect(container.textContent).toContain("tp-001-837P.txt");
+    unmount();
+  });
+
+  it("renders one row per batch with sequential # column", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [BATCH_837_A, BATCH_837_B, BATCH_835],
+    });
+    await settle(() =>
+      container.querySelectorAll("tbody tr").length === 3,
+    );
+
+    const rows = container.querySelectorAll("tbody tr");
+    expect(rows.length).toBe(3);
+    // Newest first → #03 (BATCH-A), #02 (BATCH-B), #01 (BATCH-C).
+    // The # column counts down from the total so the newest row reads
+    // as the highest ordinal.
+    expect(rows[0]?.textContent).toContain("#03");
+    expect(rows[0]?.textContent).toContain("tp-001-837P.txt");
+    expect(rows[1]?.textContent).toContain("#02");
+    expect(rows[1]?.textContent).toContain("tp-002-837P.txt");
+    expect(rows[2]?.textContent).toContain("#01");
+    expect(rows[2]?.textContent).toContain("tp-003-835.txt");
+    unmount();
+  });
+
+  it("renders a Re-export ZIP button for each 837P row", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [BATCH_837_A, BATCH_837_B, BATCH_835],
+    });
+    await settle(
+      () =>
+        container.querySelectorAll('[data-testid="history-row-reexport"]')
+          .length === 2,
+    );
+
+    const buttons = container.querySelectorAll(
+      '[data-testid="history-row-reexport"]',
+    );
+    // Two 837P rows get a button; the 835 row does not.
+    expect(buttons.length).toBe(2);
+    unmount();
+  });
+
+  it("hides the Re-export button on 835 rows (no claimIds)", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [BATCH_835],
+    });
+    await settle(() =>
+      container.textContent?.includes("No re-export") === true,
+    );
+
+    expect(
+      container.querySelector('[data-testid="history-row-reexport"]'),
+    ).toBeNull();
+    // A muted "No re-export" placeholder is shown instead.
+    expect(container.textContent).toContain("No re-export");
+    unmount();
+  });
+
+  it("clicking Re-export ZIP calls api.exportBatch837 with the row's claimIds and downloads the blob", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [BATCH_837_A],
+    });
+    await settle(
+      () =>
+        container.querySelector('[data-testid="history-row-reexport"]') !==
+        null,
+    );
+
+    const exportMock = api.exportBatch837 as unknown as ReturnType<
+      typeof vi.fn
+    >;
+    exportMock.mockResolvedValue({
+      blob: new Blob(["zip-bytes"]),
+      filename: "BATCH-A-claims.zip",
+      serializeErrors: [],
+    });
+
+    const button = container.querySelector(
+      '[data-testid="history-row-reexport"]',
+    ) as HTMLButtonElement;
+    expect(button).not.toBeNull();
+
+    await act(async () => {
+      button.click();
+      await flush();
+    });
+
+    expect(exportMock).toHaveBeenCalledTimes(1);
+    expect(exportMock).toHaveBeenCalledWith("BATCH-A", [
+      "CLM-001",
+      "CLM-002",
+      "CLM-003",
+    ]);
+    expect(downloadBlob).toHaveBeenCalledTimes(1);
+    expect(downloadBlob).toHaveBeenCalledWith(
+      "BATCH-A-claims.zip",
+      expect.any(Blob),
+    );
+    expect(toast.success).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  it("surfaces a toast.error when re-export fails", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [BATCH_837_A],
+    });
+    await settle(
+      () =>
+        container.querySelector('[data-testid="history-row-reexport"]') !==
+        null,
+    );
+
+    const exportMock = api.exportBatch837 as unknown as ReturnType<
+      typeof vi.fn
+    >;
+    exportMock.mockRejectedValue(new Error("server gone"));
+
+    const button = container.querySelector(
+      '[data-testid="history-row-reexport"]',
+    ) as HTMLButtonElement;
+    await act(async () => {
+      button.click();
+      await flush();
+    });
+
+    expect(toast.error).toHaveBeenCalledTimes(1);
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(downloadBlob).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  it("shows a loading state on first paint while the query is pending", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batchesStatus: "pending",
+    });
+    await flush();
+
+    expect(container.textContent).toContain("Loading archive");
+    // No rows yet.
+    expect(
+      container.querySelector('[data-testid="history-row-reexport"]'),
+    ).toBeNull();
+    unmount();
+  });
+
+  it("shows an error state when the query rejects", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batchesStatus: "error",
+    });
+    await settle(() => container.textContent?.includes("Couldn't load") === true);
+
+    expect(container.textContent).toContain("Couldn't load the archive");
+    unmount();
+  });
+
+  it("shows an empty state when there are no batches", async () => {
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      batches: [],
+    });
+    await flush();
+
+    expect(container.textContent).toContain("No batches in the archive");
+    unmount();
+  });
+
+  it("falls back to in-memory parsedBatches when the backend returns no rows (sample-data mode)", async () => {
+    const sample: ParsedBatch = {
+      id: "MEM-1",
+      kind: "837p",
+      inputFilename: "mem-batch.txt",
+      parsedAt: "2026-06-24T12:00:00Z",
+      claimCount: 2,
+      passed: 2,
+      failed: 0,
+      claimIds: ["SAMPLE-1", "SAMPLE-2"],
+      summary: {
+        input_file: "mem-batch.txt",
+        total_claims: 2,
+        passed: 2,
+        failed: 0,
+        failed_claim_ids: [],
+        issues_by_rule: {},
+      },
+    };
+    useAppStore.setState({ parsedBatches: [sample] });
+
+    const { container, unmount } = mountUpload({
+      initialEntries: ["/upload?tab=history"],
+      // Server returned nothing — fallback path activates.
+      batches: [],
+    });
+    await settle(() =>
+      container.textContent?.includes("mem-batch.txt") === true,
+    );
+
+    expect(container.textContent).toContain("mem-batch.txt");
+    expect(
+      container.querySelector('[data-testid="history-row-reexport"]'),
+    ).not.toBeNull();
+    unmount();
+  });
+});

src/pages/Upload.tsx

@@ -1,11 +1,13 @@
 import { useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   AlertTriangle,
   ArrowRight,
   ChevronRight,
   CloudUpload,
+  Download,
   FileText,
+  History as HistoryIcon,
   Inbox,
   Loader2,
   Upload as UploadIcon,
@@ -16,6 +18,7 @@ import { toast } from "sonner";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Tabs } from "@/components/ui/tabs";
 import {
   Select,
   SelectContent,
@@ -27,11 +30,13 @@ import { PageHeader } from "@/components/PageHeader";
 import { ClaimCard837 } from "@/components/ClaimCard837";
 import { ExportBar } from "@/components/ExportBar";
 import { StatPill, ValidationDot } from "@/components/ClaimCard/shared";
-import { api, type ParseProgress } from "@/lib/api";
+import { api, ApiError, type BatchSummary, type ParseProgress } from "@/lib/api";
+import { downloadBlob } from "@/lib/download";
 import { fmt, toNum } from "@/lib/format";
 import { useAppStore } from "@/store";
 import { useParse } from "@/hooks/useParse";
 import { useBatchExport } from "@/hooks/useBatchExport";
+import { useBatches } from "@/hooks/useBatches";
 import type {
   ClaimOutput,
   ClaimPayment,
@@ -348,6 +353,21 @@ function HeroStat({
 
 export function Upload() {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+  // Tab URL state — `?tab=history` deep-links the History tab;
+  // `?tab=upload` (or missing) is the default. Stored in the URL so
+  // the back button round-trips between the two surfaces.
+  const tab = searchParams.get("tab") === "history" ? "history" : "upload";
+  const setTab = (next: "upload" | "history") => {
+    setSearchParams(
+      (prev) => {
+        if (next === "upload") prev.delete("tab");
+        else prev.set("tab", next);
+        return prev;
+      },
+      { replace: true },
+    );
+  };
   const [file, setFile] = useState<File | null>(null);
   const [kind, setKind] = useState<ParsedBatchKind>("837p");
   const [payer, setPayer] = useState<string>(PAYERS_837[0]!.value);
@@ -362,6 +382,14 @@ export function Upload() {
   const parsedBatches = useAppStore((s) => s.parsedBatches);
   const parseMutation = useParse(kind);
 
+  // Persisted batch count for the History tab badge. Disabled when
+  // there's no backend configured (sample-data mode); in that case we
+  // fall back to the in-memory parsedBatches so the badge still reads.
+  const batchesQuery = useBatches();
+  const persistedBatchCount = batchesQuery.data?.length ?? 0;
+  const historyCount =
+    persistedBatchCount > 0 ? persistedBatchCount : parsedBatches.length;
+
   // Batch-export wiring (SP9 — Upload → ZIP flow). The hook owns the
   // selection set, the exporting flag, the export handler, and the
   // captured server-side batch id. See `src/hooks/useBatchExport.ts`.
@@ -607,6 +635,34 @@ export function Upload() {
         </div>
       </section>
 
+      {/* =================================================================
+          TABS — the page's content switcher. Two surfaces:
+            · Upload   — drop zone + stream + recent batches (the
+                        "in-flight" instrument)
+            · History  — persisted batch archive with one-click
+                        Re-export ZIP per row
+          Tab is mirrored to `?tab=` so deep-links round-trip.
+          ================================================================= */}
+      <Tabs.Root
+        value={tab}
+        onValueChange={(v) => setTab(v as "upload" | "history")}
+      >
+        <Tabs.List aria-label="Upload page sections">
+          <Tabs.Trigger value="upload">Upload</Tabs.Trigger>
+          <Tabs.Trigger value="history">
+            History
+            {historyCount > 0 ? (
+              <span
+                aria-hidden
+                className="mono text-[10.5px] uppercase tracking-[0.14em] text-muted-foreground/60 ml-1.5"
+              >
+                · {historyCount}
+              </span>
+            ) : null}
+          </Tabs.Trigger>
+        </Tabs.List>
+
+      <Tabs.Content value="upload">
       {/* =================================================================
           DROP ZONE — the page's centerpiece. Single large surface-2
           card with an inline payer-config header bar, a centered drop
@@ -1113,6 +1169,278 @@ export function Upload() {
           </Card>
         </section>
       ) : null}
+      </Tabs.Content>
+
+      <Tabs.Content value="history">
+        <UploadHistory />
+      </Tabs.Content>
+      </Tabs.Root>
     </div>
   );
+}
+
+// ---------------------------------------------------------------------------
+// UploadHistory — persisted batch archive rendered inside the History tab.
+//
+// Source: `useBatches()` (the backend's `/api/batches` list). Independent of
+// the in-memory `parsedBatches` store so it survives a page reload — the
+// store is purely session-local. When the backend isn't configured (sample-
+// data mode) we fall back to the in-memory list so the tab still renders.
+// ---------------------------------------------------------------------------
+
+function UploadHistory() {
+  const parsedBatches = useAppStore((s) => s.parsedBatches);
+  const batchesQuery = useBatches();
+  const liveBatches: BatchSummary[] = useMemo(() => {
+    if (batchesQuery.data && batchesQuery.data.length > 0) {
+      return batchesQuery.data;
+    }
+    // Sample-data fallback — synthesize BatchSummary rows from the
+    // in-memory parsedBatches so the History tab is never empty in
+    // a demo. Newest first.
+    return [...parsedBatches]
+      .reverse()
+      .map<BatchSummary>((b) => ({
+        id: b.id,
+        kind: b.kind,
+        inputFilename: b.inputFilename,
+        parsedAt: b.parsedAt,
+        claimCount: b.claimCount,
+        claimIds: b.claimIds,
+      }));
+  }, [batchesQuery.data, parsedBatches]);
+
+  if (batchesQuery.isLoading && batchesQuery.data === undefined) {
+    return (
+      <Card>
+        <CardContent className="p-10 lg:p-14 flex flex-col items-center justify-center text-center">
+          <Loader2
+            className="h-4 w-4 animate-spin text-muted-foreground"
+            aria-hidden
+          />
+          <div className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70 mt-3">
+            Loading archive…
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (batchesQuery.isError) {
+    return (
+      <Card>
+        <CardContent className="p-10 lg:p-14 flex flex-col items-center justify-center text-center">
+          <XCircle
+            className="h-5 w-5 text-[hsl(var(--destructive))]"
+            strokeWidth={1.5}
+            aria-hidden
+          />
+          <div className="display text-[18px] tracking-tight mt-3">
+            Couldn't load the archive.
+          </div>
+          <div className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70 mt-2">
+            {batchesQuery.error instanceof Error
+              ? batchesQuery.error.message
+              : "Network error"}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (liveBatches.length === 0) {
+    return (
+      <Card>
+        <CardContent className="p-10 lg:p-14 flex flex-col items-center justify-center text-center">
+          <div className="h-10 w-10 rounded-md bg-muted/50 ring-1 ring-inset ring-border/60 flex items-center justify-center text-muted-foreground mb-3">
+            <HistoryIcon className="h-4 w-4" strokeWidth={1.5} />
+          </div>
+          <div className="display text-[20px] tracking-tight">
+            No batches in the archive yet.
+          </div>
+          <div className="mono text-[10.5px] uppercase tracking-[0.18em] text-muted-foreground/70 mt-2">
+            Switch to Upload and drop a file to ingest your first batch.
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return <HistoryTable batches={liveBatches} />;
+}
+
+function HistoryTable({ batches }: { batches: BatchSummary[] }) {
+  const totalClaims = batches.reduce((s, b) => s + b.claimCount, 0);
+  const lastAt = batches[0] ? fmt.dateShort(batches[0].parsedAt) : "—";
+
+  return (
+    <Card>
+      <CardContent className="p-6 lg:p-7">
+        <div className="flex items-end justify-between gap-6 flex-wrap mb-5">
+          <div>
+            <div className="eyebrow flex items-center gap-2 mb-2">
+              <span className="inline-block h-px w-6 bg-foreground/20" />
+              Batch history
+            </div>
+            <h2 className="display text-[26px] leading-[1.05] tracking-[-0.02em]">
+              Archive{" "}
+              <span className="italic text-muted-foreground/85">
+                · {batches.length}
+              </span>
+            </h2>
+          </div>
+          <div className="text-right">
+            <div className="mono text-[10px] uppercase tracking-[0.18em] font-semibold text-muted-foreground/70">
+              Last ingest
+            </div>
+            <div className="display mono text-[22px] leading-[1.05] mt-1.5 tracking-tight">
+              {lastAt}
+            </div>
+            <div className="mono text-[10.5px] uppercase tracking-[0.14em] text-muted-foreground/60 mt-1">
+              {fmt.num(totalClaims)} claims
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="rounded-md border overflow-hidden"
+          style={{ borderColor: "hsl(30 14% 14% / 0.10)" }}
+        >
+          <table className="w-full text-[12.5px]">
+            <thead style={{ backgroundColor: "hsl(36 22% 90%)" }}>
+              <tr
+                className="text-left"
+                style={{ color: "hsl(var(--surface-ink-2))" }}
+              >
+                <th className="px-3 py-2 font-medium mono uppercase tracking-[0.14em] text-[10.5px] w-12">
+                  #
+                </th>
+                <th className="px-3 py-2 font-medium mono uppercase tracking-[0.14em] text-[10.5px] w-20">
+                  Kind
+                </th>
+                <th className="px-3 py-2 font-medium mono uppercase tracking-[0.14em] text-[10.5px]">
+                  File
+                </th>
+                <th className="px-3 py-2 font-medium mono uppercase tracking-[0.14em] text-[10.5px] w-20 text-right">
+                  Claims
+                </th>
+                <th className="px-3 py-2 font-medium mono uppercase tracking-[0.14em] text-[10.5px] w-28">
+                  Parsed
+                </th>
+                <th className="px-3 py-2 font-medium mono uppercase tracking-[0.14em] text-[10.5px] w-44 text-right">
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {batches.map((b, i) => (
+                <HistoryRow
+                  key={b.id}
+                  batch={b}
+                  index={batches.length - i}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function HistoryRow({
+  batch,
+  index,
+}: {
+  batch: BatchSummary;
+  index: number;
+}) {
+  const [exporting, setExporting] = useState(false);
+  const canReexport = batch.kind === "837p" && batch.claimIds.length > 0;
+
+  async function onReexport() {
+    if (!canReexport || exporting) return;
+    setExporting(true);
+    try {
+      const result = await api.exportBatch837(batch.id, batch.claimIds);
+      downloadBlob(result.filename, result.blob);
+      const warn =
+        result.serializeErrors.length > 0
+          ? ` · ${result.serializeErrors.length} skipped`
+          : "";
+      toast.success(`Re-exported ${batch.claimIds.length} claims${warn}`, {
+        description: result.filename,
+      });
+    } catch (err) {
+      toast.error(
+        err instanceof ApiError
+          ? `Re-export failed (${err.status})`
+          : err instanceof Error
+            ? err.message
+            : "Re-export failed",
+      );
+    } finally {
+      setExporting(false);
+    }
+  }
+
+  return (
+    <tr
+      className="border-t align-middle"
+      style={{ borderColor: "hsl(30 14% 14% / 0.08)" }}
+    >
+      <td
+        className="px-3 py-2.5 mono text-[11px] text-muted-foreground/60"
+      >
+        #{String(index).padStart(2, "0")}
+      </td>
+      <td className="px-3 py-2.5">
+        <Badge variant={batch.kind === "837p" ? "default" : "muted"}>
+          {batch.kind === "837p" ? "837P" : "835"}
+        </Badge>
+      </td>
+      <td className="px-3 py-2.5">
+        <div className="font-medium truncate max-w-[42ch]">
+          {batch.inputFilename}
+        </div>
+      </td>
+      <td className="px-3 py-2.5 text-right display mono">
+        {fmt.num(batch.claimCount)}
+      </td>
+      <td
+        className="px-3 py-2.5 mono text-[11px]"
+        style={{ color: "hsl(var(--surface-ink-3))" }}
+      >
+        {fmt.dateShort(batch.parsedAt)}
+      </td>
+      <td className="px-3 py-2.5 text-right">
+        {canReexport ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onReexport}
+            disabled={exporting}
+            data-testid="history-row-reexport"
+            data-batch-id={batch.id}
+          >
+            {exporting ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Exporting…
+              </>
+            ) : (
+              <>
+                <Download className="h-3.5 w-3.5" />
+                Re-export ZIP
+              </>
+            )}
+          </Button>
+        ) : (
+          <span className="mono text-[10.5px] uppercase tracking-[0.14em] text-muted-foreground/50">
+            No re-export
+          </span>
+        )}
+      </td>
+    </tr>
+  );
 }