fix(products-ui): review pass — show-more race, keyboard history access, a11y glyphs/aria-live, label consistency

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/productsApi.ts

@@ -42,6 +42,11 @@ export interface ProductsSummary {
 
 export type Result<T> = { ok: true; value: T } | { ok: false; error: ApiError; status: number };
 
+// One label rule for CSV dialects, shared by Products history / preview / run detail.
+export function dialectLabel(d: string): string {
+  return d === "canonical" ? "Canonical format" : d;
+}
+
 async function request<T>(path: string, init?: RequestInit): Promise<Result<T>> {
   const resp = await fetch(path, { credentials: "include", ...init });
   if (!resp.ok) return { ok: false, error: await errorOf(resp), status: resp.status };

frontend/src/screens/products/ImportPreview.tsx

@@ -1,10 +1,11 @@
 // Import preview (SD-0002 §5.4) — the consent gate. Summary tiles filter a
 // drill-in diff list; the sticky footer carries confirm (PUC-3) / cancel (PUC-3a).
 // Diff glyphs pair with color, never color alone (§6.6).
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   cancelDraft,
   confirmDraft,
+  dialectLabel,
   getDraft,
   getDraftRecords,
   type Draft,
@@ -40,8 +41,8 @@ function SetLine({ field, value }: { field: string; value: unknown }) {
 function ChangeRow({ change }: { change: FieldChange }) {
   return (
     <div className="diffchange">
-      {change.field}: <span className="diffchange__glyph--del">{fmt(change.before)}</span> →{" "}
+      {change.field}: <span className="diffchange__glyph--del">− {fmt(change.before)}</span> →{" "}
-      <span className="diffchange__glyph--add">{fmt(change.after)}</span>
+      <span className="diffchange__glyph--add">+ {fmt(change.after)}</span>
     </div>
   );
 }
@@ -137,6 +138,7 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
   const [loadFail, setLoadFail] = useState<"gone" | "expired" | "failed" | null>(null);
   const [filter, setFilter] = useState<RecordKind | null>(null);
   const [records, setRecords] = useState<DraftRecord[] | null>(null);
+  const [recordsError, setRecordsError] = useState<"load" | "more" | null>(null);
   const [hasMore, setHasMore] = useState(false);
   const [moreBusy, setMoreBusy] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -144,6 +146,10 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
   const [stale, setStale] = useState(false);
   const [nothingNote, setNothingNote] = useState(false);
   const [confirmError, setConfirmError] = useState<string | null>(null);
+  // Generation counter for the records list: bumped on every page-0 (re)load, so a
+  // page-0 or show-more response that resolves after a tile/filter (or draft) switch
+  // is recognized as stale and dropped instead of clobbering/appending to the new list.
+  const recordsGen = useRef(0);
 
   async function loadDraft() {
     setLoadFail(null);
@@ -155,32 +161,54 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
     setDraft(resp.value);
   }
   useEffect(() => {
+    // A new draft means a fresh consent gate — reset everything the old one set.
+    setFilter(null);
+    setStale(false);
+    setConfirmError(null);
+    setNothingNote(false);
+    setRecords(null);
+    setRecordsError(null);
+    setHasMore(false);
     void loadDraft();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [draftId]);
 
-  useEffect(() => {
+  function loadRecords(kind: RecordKind | null) {
-    if (!draft) return;
+    recordsGen.current += 1;
-    let gone = false;
+    const gen = recordsGen.current;
     setRecords(null);
+    setRecordsError(null);
     setHasMore(false);
-    void getDraftRecords(draftId, filter ?? undefined, PAGE, 0).then((resp) => {
+    void getDraftRecords(draftId, kind ?? undefined, PAGE, 0).then((resp) => {
-      if (gone || !resp.ok) return;
+      if (gen !== recordsGen.current) return;
+      if (!resp.ok) {
+        setRecordsError("load");
+        return;
+      }
       setRecords(resp.value);
       setHasMore(resp.value.length === PAGE);
     });
-    return () => {
+  }
-      gone = true;
+  useEffect(() => {
-    };
+    if (!draft) return;
+    loadRecords(filter);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [draft, draftId, filter]);
 
   async function showMore() {
     if (!records) return;
+    const gen = recordsGen.current;
     setMoreBusy(true);
+    setRecordsError(null);
     const resp = await getDraftRecords(draftId, filter ?? undefined, PAGE, records.length);
     setMoreBusy(false);
-    if (!resp.ok) return;
+    // Filter/draft switched while this page was in flight — drop the stale page.
-    setRecords([...records, ...resp.value]);
+    if (gen !== recordsGen.current) return;
+    if (!resp.ok) {
+      setRecordsError("more");
+      return;
+    }
+    setRecords((prev) => [...(prev ?? []), ...resp.value]);
     setHasMore(resp.value.length === PAGE);
   }
 
@@ -233,7 +261,13 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
       </Banner>
     );
   }
-  if (!draft) return <p className="note">Loading…</p>;
+  if (!draft) {
+    return (
+      <p className="note" role="status">
+        Loading…
+      </p>
+    );
+  }
 
   const { summary } = draft;
   const tiles: { kind: RecordKind; num: number; label: string }[] = [
@@ -250,10 +284,17 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
         <a href="#/products">← Products</a>
       </p>
       <h1>Import preview — {draft.file_name}</h1>
-      <p className="note">{draft.dialect === "canonical" ? "Canonical format" : draft.dialect}</p>
+      <p className="note">{dialectLabel(draft.dialect)}</p>
       {draft.unknown_columns.length > 0 && (
         <Banner tone="info" title="Columns not imported">
+          {draft.unknown_columns.length > 8 ? (
+            <details>
+              <summary>{draft.unknown_columns.length} columns not imported</summary>
               {draft.unknown_columns.join(", ")}
+            </details>
+          ) : (
+            draft.unknown_columns.join(", ")
+          )}
         </Banner>
       )}
       <div className="tiles">
@@ -271,8 +312,17 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
         ))}
       </div>
       {filter === "error" && records && <ErrorTable records={records} />}
-      {records === null ? (
+      {recordsError === "load" ? (
-        <p className="note">Loading…</p>
+        <p className="note note--attn" role="alert">
+          Couldn't load these records.{" "}
+          <button type="button" className="linklike" onClick={() => loadRecords(filter)}>
+            Retry
+          </button>
+        </p>
+      ) : records === null ? (
+        <p className="note" role="status">
+          Loading…
+        </p>
       ) : records.length === 0 ? (
         <p className="note">Nothing to show here.</p>
       ) : (
@@ -294,9 +344,17 @@ export default function ImportPreview({ draftId }: { draftId: number }) {
           <button type="button" className="btn-secondary" disabled={moreBusy} onClick={() => void showMore()}>
             {moreBusy ? "Loading…" : "Show more"}
           </button>
+          {recordsError === "more" && (
+            <span className="note note--attn" role="alert">
+              Couldn't load more records.{" "}
+              <button type="button" className="linklike" onClick={() => void showMore()}>
+                Retry
+              </button>
+            </span>
+          )}
         </p>
       )}
-      <div className="sticky-footer">
+      <div className="sticky-footer" aria-live="polite">
         {stale ? (
           <Banner tone="attn" title="Your catalog changed since this preview — upload the file again">
             <a href="#/products/import">Upload the file again</a>

frontend/src/screens/products/ImportUpload.tsx

@@ -44,7 +44,9 @@ export default function ImportUpload() {
           disabled={busy}
           onChange={(e) => void onPick(e.target.files)}
         />
-        <span className="dropzone__title">{busy ? "Validating…" : "Choose a CSV file"}</span>
+        <span className="dropzone__title" aria-live="polite">
+          {busy ? "Validating…" : "Choose a CSV file"}
+        </span>
         <span className="note">CSV, up to 5,000 rows</span>
       </label>
       <p className="note">

frontend/src/screens/products/ProductsPage.tsx

@@ -1,7 +1,13 @@
 // Products page (SD-0002 §5.2) — the catalog's home: where imports start and history
 // lives. SLICE-5: export is disabled (SLICE-6 ships it); the browsable list is #14's.
 import { useEffect, useState } from "react";
-import { getProductsSummary, listRuns, type ProductsSummary, type RunSummary } from "../../productsApi";
+import {
+  dialectLabel,
+  getProductsSummary,
+  listRuns,
+  type ProductsSummary,
+  type RunSummary,
+} from "../../productsApi";
 import { Banner } from "../../ui/kit";
 
 const STATUS_LABELS: Record<string, string> = {
@@ -40,7 +46,13 @@ export default function ProductsPage() {
       </Banner>
     );
   }
-  if (!summary || !runs) return <p className="note">Loading…</p>;
+  if (!summary || !runs) {
+    return (
+      <p className="note" role="status">
+        Loading…
+      </p>
+    );
+  }
 
   const empty = summary.product_count === 0;
   return (
@@ -51,9 +63,12 @@ export default function ProductsPage() {
           {!empty && <span className="products__count"> · {summary.product_count.toLocaleString()}</span>}
         </h1>
         <div className="products__actions">
+          <div className="products__export">
             <button type="button" className="btn-secondary" disabled title="Export arrives in a coming release">
               Export
             </button>
+            <span className="note">Export arrives in a coming release</span>
+          </div>
           <a className="btn-primary" href="#/products/import">
             Import products
           </a>
@@ -95,8 +110,13 @@ export default function ProductsPage() {
                   }}
                 >
                   <td>{new Date(r.created_at).toLocaleString()}</td>
-                  <td>{r.file_name}</td>
+                  <td>
-                  <td>{r.dialect}</td>
+                    {/* Anchor = the keyboard/SR path (§6.6); the row onClick stays as a
+                        mouse convenience. Both set the same hash, so the double fire on
+                        an anchor click is idempotent. */}
+                    <a href={`#/products/imports/runs/${r.id}`}>{r.file_name}</a>
+                  </td>
+                  <td>{dialectLabel(r.dialect)}</td>
                   <td>{r.products_added}</td>
                   <td>{r.products_updated}</td>
                   <td>{r.rows_errored}</td>

frontend/src/screens/products/RunDetail.tsx

@@ -1,7 +1,7 @@
 // Run detail (SD-0002 §5.5) — report card for a completed or in-progress import run.
 // NO images section this slice (SLICE-7). PUC-4/5/8.
 import { useEffect, useState } from "react";
-import { getRun, type RunDetail as RunDetailType } from "../../productsApi";
+import { dialectLabel, getRun, type RunDetail as RunDetailType } from "../../productsApi";
 import { Banner } from "../../ui/kit";
 
 const STATUS_LABELS: Record<string, string> = {
@@ -46,9 +46,13 @@ export default function RunDetail({ runId }: { runId: number }) {
       </Banner>
     );
   }
-  if (!run) return <p className="note">Loading…</p>;
+  if (!run) {
-
+    return (
-  const dialectLabel = run.dialect === "canonical" ? "Canonical format" : run.dialect;
+      <p className="note" role="status">
+        Loading…
+      </p>
+    );
+  }
 
   return (
     <div className="products">
@@ -57,7 +61,7 @@ export default function RunDetail({ runId }: { runId: number }) {
       </p>
       <h1>{run.file_name}</h1>
       <p className="note">
-        Imported {new Date(run.created_at).toLocaleString()} by {run.by} · {dialectLabel}
+        Imported {new Date(run.created_at).toLocaleString()} by {run.by} · {dialectLabel(run.dialect)}
       </p>
       <p className="note">
         {run.products_added} added · {run.products_updated} updated · {run.rows_errored} rows in
@@ -77,7 +81,7 @@ export default function RunDetail({ runId }: { runId: number }) {
             {run.errors.map((e, i) => (
               <tr key={i}>
                 <td>{e.line}</td>
-                <td>{e.column ?? ""}</td>
+                <td>{e.column ?? "—"}</td>
                 <td>{e.message}</td>
               </tr>
             ))}

frontend/src/styles/products.css

@@ -53,6 +53,9 @@
 }
 .products__count { color: var(--text-on-dark-mute); font-weight: var(--weight-medium); }
 .products__actions { display: flex; gap: 12px; align-items: center; }
+/* Disabled Export + its visible "coming release" caption, stacked. */
+.products__export { display: flex; flex-direction: column; gap: 4px; align-items: center; }
+.products__export .note { font-size: 11.5px; }
 .products .btn-primary { width: auto; text-decoration: none; }
 .products .empty { margin: 24px auto 0; }
 
@@ -160,7 +163,6 @@
 
 /* ── diff list (preview records, Task 13) ───────────────────────────────────── */
 .difflist { list-style: none; margin: 0; padding: 0; }
-.difflist > li { padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
 .difflist__item { padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
 .difflist__item > summary {
   cursor: pointer;