@ai-matrx/records-ui 0.77.0 → 0.78.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.78.0
+
+**The button that could not get rid of a table now can, and says what it does.** (lane
+FIX-11A, VERIFIER-11 finding F3.)
+
+`TableSettings` called `useRecordMutation().remove` with the TABLE's id — one unbounded
+statement — so on a 1,430-record table it died twelve seconds in on `57014` and told the
+person nothing had changed and to "try a smaller page". There is no page.
+
+* The panel now drives `useTableArchive` from `@ai-matrx/records` 0.53.0: it previews
+  first (`chunk: 0`) so the confirm names the real number of records, then archives in
+  passes and shows "N of M records put away so far" while it works.
+* **It never claims nothing happened.** A refused pass or a stopped run says what went
+  wrong, how many records are already archived and how many are left, and offers **Carry on
+  archiving**, which picks up exactly where it stopped. There is a **Stop** while it runs.
+* When the store is busy the loop takes smaller passes, and the screen SAYS so rather than
+  going quietly four times slower.
+* **The control's word matches what it does.** It said "Delete this table" over a sentence
+  explaining the store keeps everything for a year; the store's own verb is archive
+  (`table_archive`, `record_restore`, `read_records_archived`), so that is the word on the
+  button and the sentence says plainly it can be brought back.
+
+Consumer action: none — the panel's props are unchanged; `onDeleted` still fires, now when
+the Table itself has been archived.
+
 ## 0.77.0
 
 **A publish button that would hand out a dead link is not drawn.** (lane STORE-OFF, from

package/dist/index.cjs

@@ -4476,6 +4476,16 @@ var import_design_system13 = require("@ai-matrx/design-system");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var BATCH = 250;
 var SAMPLES = 40;
+var MAPPING_COLUMNS = "minmax(9rem, 11rem) minmax(14rem, 17rem) minmax(13rem, 1fr) minmax(8rem, 10rem)";
+var ABSENT = "__absent__";
+function obviousTitleColumn(columns) {
+  const says = /^(title|name|record|customer|client|company|job|item|subject|label|description)\b|(\bname|\btitle|\bnumber|\bid)$/i;
+  const named = columns.find((c) => says.test(c.header.trim()));
+  if (named) return named.header;
+  const text = columns.find((c) => c.type === "text");
+  if (text) return text.header;
+  return columns[0]?.header ?? null;
+}
 async function sha256(bytes) {
   const subtle = globalThis.crypto?.subtle;
   if (!subtle) return null;
@@ -4510,6 +4520,7 @@ function ImportWizard({ tableId, onDone, className }) {
   const [alreadyRan, setAlreadyRan] = (0, import_react26.useState)(null);
   const [columnsAdded, setColumnsAdded] = (0, import_react26.useState)(null);
   const [show, setShow] = (0, import_react26.useState)("all");
+  const [ledger, setLedger] = (0, import_react26.useState)(null);
   const declared = fields.data ?? [];
   const take = (0, import_react26.useCallback)(
     async (file) => {
@@ -4520,6 +4531,7 @@ function ImportWizard({ tableId, onDone, className }) {
       setProposals([]);
       setAlreadyRan(null);
       setProgress(0);
+      setLedger(null);
       try {
         const xlsx = file.name.toLowerCase().endsWith(".xlsx");
         const bytes = await file.arrayBuffer();
@@ -4546,6 +4558,11 @@ function ImportWizard({ tableId, onDone, className }) {
         for (const column of answered.data.columns) {
           if (column.matched) next[column.header] = column.field_key;
         }
+        const titleKey2 = table.data?.title_field ?? null;
+        if (titleKey2 && !Object.values(next).includes(titleKey2)) {
+          const guess = obviousTitleColumn(answered.data.columns);
+          if (guess) next[guess] = titleKey2;
+        }
         setMapping(next);
         setPhase("ready");
       } catch (thrown) {
@@ -4553,7 +4570,7 @@ function ImportWizard({ tableId, onDone, className }) {
         setPhase("waiting");
       }
     },
-    [client, declared, tableId]
+    [client, declared, tableId, table.data?.title_field]
   );
   const run = (0, import_react26.useCallback)(async () => {
     if (!plan) return;
@@ -4561,6 +4578,7 @@ function ImportWizard({ tableId, onDone, className }) {
     setOutcomes([]);
     setColumnsAdded(null);
     setProgress(0);
+    setLedger(null);
     if (unmapped === "create" && rights.admin) {
       setPhase("declaring");
       const made = await client.importDeclareColumns({ table_id: tableId, rows, mapping });
@@ -4596,6 +4614,7 @@ function ImportWizard({ tableId, onDone, className }) {
     }
     const importId = opened.data.import_id;
     const collected = [];
+    const told = { seen: 0, written: 0, duplicate: 0, refused: 0 };
     let take2 = opened.data.rows_per_call ?? BATCH;
     let at = 0;
     while (at < rows.length) {
@@ -4604,11 +4623,17 @@ function ImportWizard({ tableId, onDone, className }) {
       if (!answered.ok) {
         setProblem(answered.error.message);
         setOutcomes([...collected]);
+        setLedger({ ...told, final: false });
         setPhase("ready");
         return;
       }
       collected.push(...answered.data.outcomes);
       setOutcomes([...collected]);
+      told.seen += answered.data.rows_seen;
+      told.written += answered.data.rows_written;
+      told.duplicate += answered.data.rows_duplicate;
+      told.refused += answered.data.rows_refused;
+      setLedger({ ...told, final: false });
       at += batch.length;
       setProgress(Math.min(at, rows.length));
       if (answered.data.rows_per_call) take2 = answered.data.rows_per_call;
@@ -4621,6 +4646,13 @@ function ImportWizard({ tableId, onDone, className }) {
     }
     setSummary(finished.data.message);
     setProposals(finished.data.proposals);
+    setLedger({
+      seen: finished.data.rows_seen,
+      written: finished.data.rows_written,
+      duplicate: finished.data.rows_duplicate,
+      refused: finished.data.rows_refused,
+      final: true
+    });
     setPhase("done");
     onDone?.(finished.data.rows_written);
   }, [client, dedupeKey, fileBytes, fileHash, fileName, format, mapping, onDuplicate, onDone, plan, rows, tableId, unmapped]);
@@ -4640,6 +4672,10 @@ function ImportWizard({ tableId, onDone, className }) {
     [outcomes, show]
   );
   const mappedCount = Object.keys(mapping).length;
+  const titleKey = table.data?.title_field ?? null;
+  const titleMappedTo = titleKey ? Object.entries(mapping).find(([, key]) => key === titleKey)?.[0] ?? null : null;
+  const titleMissing = Boolean(titleKey) && titleMappedTo === null;
+  const titleFieldLabel = (titleKey ? plan?.fields.find((f) => f.key === titleKey)?.label : null) || (titleKey ? declared.find((f) => f.key === titleKey)?.label : null) || "the name column";
   const busy = phase === "reading" || phase === "planning" || phase === "declaring" || phase === "writing";
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_design_system13.cn)("flex min-w-0 flex-col gap-2 text-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -4672,55 +4708,107 @@ function ImportWizard({ tableId, onDone, className }) {
     phase === "reading" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: "Reading the file\u2026" }) : null,
     phase === "planning" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: "Working out what each column is\u2026" }) : null,
     plan && parsed ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full overflow-x-auto rounded border", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "w-full min-w-[50rem] table-fixed", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[10rem]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[17rem]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[14rem]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[9rem]" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Column in the file" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Goes to" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Kind" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "First values" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { children: plan.columns.map((column) => {
+      titleKey ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded border bg-muted/40 px-2 py-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium", children: "What each record is called" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          import_design_system13.Select,
+          {
+            value: titleMappedTo ?? "",
+            disabled: busy,
+            onValueChange: (chosen) => {
+              setMapping((m) => {
+                const next = { ...m };
+                for (const [header, key] of Object.entries(next)) {
+                  if (key === titleKey) delete next[header];
+                }
+                if (chosen) next[chosen] = titleKey;
+                return next;
+              });
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                import_design_system13.SelectTrigger,
+                {
+                  size: "sm",
+                  "aria-label": "Which column each record is named by",
+                  className: "min-w-[14rem]",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectValue, { placeholder: "\u2014 choose the column \u2014" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectContent, { children: plan.columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectItem, { value: c.header, children: c.header }, c.header)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-muted-foreground", children: titleMappedTo ? `goes into ${titleFieldLabel}, so every record this file makes has a name you can read in the grid and on a chip.` : `Nothing goes into ${titleFieldLabel} yet, so every record this file makes would land with no name at all. Pick the column that says what each row IS.` })
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full overflow-x-auto rounded border", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-[52rem]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "div",
+          {
+            className: "grid items-center gap-x-3 border-b bg-muted px-2 py-1 font-medium",
+            style: { gridTemplateColumns: MAPPING_COLUMNS },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Column in the file" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Goes to" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Kind" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "First values" })
+            ]
+          }
+        ),
+        plan.columns.map((column) => {
           const to = mapping[column.header] ?? "";
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: "border-t align-top", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: "truncate px-2 py-1 font-medium", title: column.header, children: column.header }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: "px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-              "select",
-              {
-                "aria-label": `Where ${column.header} goes`,
-                className: "w-full min-w-0 rounded border bg-background px-1 py-0.5",
-                value: to,
-                disabled: busy,
-                onChange: (e) => {
-                  const chosen = e.target.value;
-                  setMapping((m) => {
-                    const next = { ...m };
-                    if (chosen === "") delete next[column.header];
-                    else next[column.header] = chosen;
-                    return next;
-                  });
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: unmapped === "ignore" ? "\u2014 leave it out \u2014" : "\u2014 offer it as a new column \u2014" }),
-                  plan.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: f.key, children: f.label || f.key }, f.field_id))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("td", { className: "px-2 py-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Badge, { variant: column.matched ? "secondary" : "outline", className: "text-[11px] font-normal", children: typeWord(column.type) }),
-              column.unit ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-1 opacity-60", children: column.unit }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-0.5 text-muted-foreground", children: column.why }),
-              column.ambiguous ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Check a date you know before you run this." }) : null,
-              column.collides_with ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Two columns in this file would make the same column." }) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: "truncate px-2 py-1 text-muted-foreground", children: (column.samples ?? []).slice(0, 3).map(String).join(" \xB7 ") })
-          ] }, column.header);
-        }) })
+          const absent = unmapped === "ignore" ? "\u2014 leave it out \u2014" : "\u2014 offer it as a new column \u2014";
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "div",
+            {
+              className: "grid items-start gap-x-3 border-t px-2 py-1",
+              style: { gridTemplateColumns: MAPPING_COLUMNS },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate pt-1.5 font-medium", title: column.header, children: column.header }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                  import_design_system13.Select,
+                  {
+                    value: to || ABSENT,
+                    disabled: busy,
+                    onValueChange: (chosen) => {
+                      setMapping((m) => {
+                        const next = { ...m };
+                        if (chosen === ABSENT) delete next[column.header];
+                        else next[column.header] = chosen;
+                        return next;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        import_design_system13.SelectTrigger,
+                        {
+                          size: "sm",
+                          "aria-label": `Where ${column.header} goes`,
+                          "data-goes-to": column.header,
+                          className: "w-full min-w-[14rem]",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectValue, {})
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system13.SelectContent, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectItem, { value: ABSENT, children: absent }),
+                        plan.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectItem, { value: f.key, children: f.label || f.key }, f.field_id))
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Badge, { variant: column.matched ? "secondary" : "outline", className: "text-[11px] font-normal", children: typeWord(column.type) }),
+                  column.unit ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-1 opacity-60", children: column.unit }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-0.5 text-muted-foreground", children: column.why }),
+                  column.ambiguous ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Check a date you know before you run this." }) : null,
+                  column.collides_with ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Two columns in this file would make the same column." }) : null
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate pt-1.5 text-muted-foreground", children: (column.samples ?? []).slice(0, 3).map(String).join(" \xB7 ") })
+              ]
+            },
+            column.header
+          );
+        })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -4778,13 +4866,18 @@ function ImportWizard({ tableId, onDone, className }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Button, { size: "sm", disabled: busy || !rights.write || rows.length === 0, onClick: () => void run(), children: phase === "declaring" ? "Adding the columns\u2026" : phase === "writing" ? `Writing\u2026 ${progress} of ${rows.length}` : `Import ${rows.length} row${rows.length === 1 ? "" : "s"}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-muted-foreground", children: [
-          mappedCount,
-          " of ",
-          plan.columns.length,
-          " columns go into this table",
-          fileHash ? "" : " \xB7 this browser cannot recognise the file again, so importing it twice would write it twice"
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_design_system13.Button,
+          {
+            size: "sm",
+            disabled: busy || !rights.write || rows.length === 0 || titleMissing,
+            onClick: () => void run(),
+            children: phase === "declaring" ? "Adding the columns\u2026" : phase === "writing" ? `Writing\u2026 ${progress} of ${rows.length}` : `Import ${rows.length} row${rows.length === 1 ? "" : "s"}`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: (0, import_design_system13.cn)("text-muted-foreground", titleMissing && "text-destructive"), children: [
+          titleMissing ? `Nothing goes into ${titleFieldLabel} yet, so these records would have no name. Choose the column above, then this will run.` : `${mappedCount} of ${plan.columns.length} columns go into this table`,
+          fileHash || titleMissing ? "" : " \xB7 this browser cannot recognise the file again, so importing it twice would write it twice"
         ] })
       ] })
     ] }) : null,
@@ -4802,27 +4895,31 @@ function ImportWizard({ tableId, onDone, className }) {
       ] }) : null
     ] }) : null,
     alreadyRan ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: alreadyRan }) : null,
-    outcomes.length > 0 || summary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    outcomes.length > 0 || summary || ledger ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
-          counts.landed,
-          " landed \xB7 ",
-          counts.duplicate,
-          " already here \xB7 ",
-          counts.refused,
-          " refused"
-        ] }),
-        counts.refused + counts.duplicate > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: ledger ? `${ledger.written} landed \xB7 ${ledger.duplicate} already here \xB7 ${ledger.refused} refused, of ${ledger.seen} row${ledger.seen === 1 ? "" : "s"} offered` : `${counts.landed} landed \xB7 ${counts.duplicate} already here \xB7 ${counts.refused} refused` }),
+        ledger && !ledger.final && phase !== "writing" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-destructive", children: "The run stopped here, so the rest of the file was never offered \u2014 these are the rows that were dealt with before it stopped, not the whole file." }) : null,
+        (ledger ? ledger.refused + ledger.duplicate : counts.refused + counts.duplicate) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: (0, import_design_system13.cn)("underline underline-offset-2", show === "all" && "font-medium"), onClick: () => setShow("all"), children: "everything that did not land" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: (0, import_design_system13.cn)("underline underline-offset-2", show === "refused" && "font-medium"), onClick: () => setShow("refused"), children: "refused" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: (0, import_design_system13.cn)("underline underline-offset-2", show === "duplicate" && "font-medium"), onClick: () => setShow("duplicate"), children: "already here" })
         ] }) : null
       ] }),
       summary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: summary }) : null,
+      ledger && show === "all" && ledger.refused + ledger.duplicate > interesting.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-muted-foreground", children: [
+        interesting.length,
+        " of the ",
+        ledger.refused + ledger.duplicate,
+        " row",
+        ledger.refused + ledger.duplicate === 1 ? " that" : "s that",
+        " did not land",
+        interesting.length === 1 ? " is" : " are",
+        " listed below by their line in your file \u2014 the store keeps the rest with this run and does not hand every one of them back at once."
+      ] }) : null,
       interesting.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "max-h-64 overflow-auto rounded border", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Row" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Line in your file" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "What happened" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "The row in your file" })
         ] }) }),
@@ -6201,8 +6298,8 @@ function TableSettings({
   const table = (0, import_react36.useTable)(tableId);
   const fields = (0, import_react36.useFields)(tableId);
   const rights = useTableRights(table.data);
-  const mutation = (0, import_react36.useRecordMutation)();
   const shape = (0, import_react36.useFieldMutation)();
+  const archive = (0, import_react36.useTableArchive)(tableId);
   const [editing, setEditing] = (0, import_react35.useState)(null);
   const [askingToDelete, setAskingToDelete] = (0, import_react35.useState)(false);
   const [askingToRemove, setAskingToRemove] = (0, import_react35.useState)(null);
@@ -6227,10 +6324,16 @@ function TableSettings({
       table.reload();
     }
   };
-  const deleteTable = async () => {
-    const gone = await mutation.remove({ record_id: tableId });
-    setAskingToDelete(false);
-    if (gone !== null) onDeleted?.();
+  const startArchive = async () => {
+    const finished = await archive.start();
+    if (finished?.done && finished.table_archived) {
+      setAskingToDelete(false);
+      onDeleted?.();
+    }
+  };
+  const askToArchive = async () => {
+    setAskingToDelete(true);
+    await archive.preview();
   };
   if (enriching) {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className, children: [
@@ -6266,7 +6369,6 @@ function TableSettings({
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: rows.length }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "outline", className: "ml-auto", onClick: () => setEditing("new"), children: "Add a field" })
     ] }),
-    mutation.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: mutation.error }) : null,
     shape.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: shape.error }) : null,
     askingToRemove ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded border border-destructive/40 px-2 py-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-destructive", children: [
@@ -6357,21 +6459,32 @@ function TableSettings({
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-medium", children: "This table" }),
       askingToDelete ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-muted-foreground", children: [
-          "Deleting ",
+          "Archiving ",
           table.data ? tableName(table.data) : "this table",
           " takes it out of everyone's list, with its ",
           rows.length,
           " field",
           rows.length === 1 ? "" : "s",
-          " and every record in it.",
-          table.data?.retention_days ? ` The store keeps them for ${table.data.retention_days} days, so it can still be restored.` : " The store keeps them, so it can still be restored."
+          " and",
+          " ",
+          archive.progress ? `its ${archive.progress.remaining.toLocaleString()} record${archive.progress.remaining === 1 ? "" : "s"}` : "every record in it",
+          ".",
+          table.data?.retention_days ? ` The store keeps them for ${table.data.retention_days} days, so it can still be brought back.` : " The store keeps them, so it can still be brought back."
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "destructive", disabled: mutation.saving, onClick: () => void deleteTable(), children: mutation.saving ? "Deleting\u2026" : "Delete this table" }),
+        archive.progress && (archive.running || archive.passes > 0) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: archive.error ? "text-destructive" : "text-muted-foreground", children: [
+          archive.progress.total - archive.progress.remaining === archive.progress.total ? `All ${archive.progress.total.toLocaleString()} record${archive.progress.total === 1 ? "" : "s"} are put away.` : `${(archive.progress.total - archive.progress.remaining).toLocaleString()} of ${archive.progress.total.toLocaleString()} record${archive.progress.total === 1 ? "" : "s"} put away so far.`,
+          archive.slowedDown ? " The store is busy, so it is taking smaller passes \u2014 it will still finish." : ""
+        ] }) : null,
+        archive.interrupted && archive.progress ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-muted-foreground", children: archive.error ? `That pass did not finish, so the rest is still here. ${archive.progress.archived_total.toLocaleString()} record${archive.progress.archived_total === 1 ? " is" : "s are"} already archived and ${archive.progress.remaining.toLocaleString()} ${archive.progress.remaining === 1 ? "is" : "are"} left. Nothing was lost \u2014 carry on and it picks up where it stopped.` : `Stopped. ${archive.progress.archived_total.toLocaleString()} record${archive.progress.archived_total === 1 ? " is" : "s are"} archived and ${archive.progress.remaining.toLocaleString()} ${archive.progress.remaining === 1 ? "is" : "are"} left. Carry on whenever you like \u2014 it picks up where it stopped.` }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex gap-1", children: archive.running ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "destructive", disabled: true, children: "Archiving\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "ghost", onClick: () => archive.stop(), children: "Stop" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "destructive", onClick: () => void startArchive(), children: archive.interrupted ? "Carry on archiving" : "Archive this table" }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "ghost", onClick: () => setAskingToDelete(false), children: "Keep it" })
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "outline", onClick: () => setAskingToDelete(true), children: "Delete this table" }) }),
-      mutation.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: mutation.error }) : null
+        ] }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "outline", onClick: () => void askToArchive(), children: "Archive this table" }) }),
+      archive.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: archive.error }) : null
     ] })
   ] });
 }
@@ -7671,6 +7784,7 @@ function ViewSwitcher({
     )
   ] });
 }
+var UNUSUAL_FIELD_NOTE = "an unusual column to use here";
 function offerableFields(all, want) {
   return all.filter((field) => {
     const kind = editorKindFor(field);
@@ -7806,10 +7920,7 @@ function FieldPicker({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "", children: "Choose a field" }),
           offerable.map((field) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: field.key, children: fieldName(field) }, field.key)),
-          unusual ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("option", { value: unusual.key, children: [
-            fieldName(unusual),
-            " \u2014 an unusual column to use here"
-          ] }, unusual.key) : null
+          unusual ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: unusual.key, children: `${fieldName(unusual)} \u2014 ${UNUSUAL_FIELD_NOTE}` }, unusual.key) : null
         ]
       }
     ),
@@ -13568,8 +13679,8 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
     [client, tableId, load, filter]
   );
   async function create() {
-    const groupable = (fields.data ?? []).filter((f) => f.type === "text" || f.type === "list");
-    const byField = groupable[0];
+    const all = fields.data ?? [];
+    const byField = offerableFields(all, "choice")[0] ?? all.find((f) => f.type === "text" || f.type === "list");
     const by = byField?.key;
     await declare2(
       {
@@ -13740,6 +13851,32 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
               children: CHART_KINDS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("option", { value: kind, children: CHART_KIND_LABEL[kind] }, kind))
             }
           ),
+          (board.blocks[index].groupBy ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            GroupingPicker,
+            {
+              block: board.blocks[index],
+              fields: fields.data ?? [],
+              onPick: (key) => void declare2(
+                board,
+                board.blocks.map((b, i) => {
+                  if (i !== index) return b;
+                  const picked = (fields.data ?? []).find((f) => f.key === key);
+                  const wasNamedAfterItsColumn = (fields.data ?? []).some(
+                    (f) => b.title === `By ${fieldName(f)}`
+                  );
+                  return {
+                    ...b,
+                    groupBy: [key],
+                    // A block titled after the column it grouped by
+                    // must not keep saying "By Job Number" once it
+                    // groups by Status. A title somebody wrote
+                    // themselves is left alone.
+                    ...wasNamedAfterItsColumn && picked ? { title: `By ${fieldName(picked)}` } : {}
+                  };
+                })
+              )
+            }
+          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             import_design_system47.Button,
             {
@@ -13758,6 +13895,45 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
     ] })
   ] });
 }
+function groupingChoices(all) {
+  const once = [];
+  for (const field of all) if (!once.some((f) => f.key === field.key)) once.push(field);
+  const sensible = offerableFields(once, "choice");
+  const isSensible = (field) => sensible.some((s) => s.key === field.key);
+  return [
+    ...sensible.map((field) => ({ field, unusual: false })),
+    ...once.filter((field) => !isSensible(field)).map((field) => ({ field, unusual: true }))
+  ];
+}
+function GroupingPicker({
+  block,
+  fields,
+  onPick
+}) {
+  const choices = groupingChoices(fields);
+  const current = block.groupBy?.[0] ?? "";
+  if (choices.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-muted-foreground", children: "This table has no columns yet, so there is nothing to group this block by." });
+  }
+  const known = choices.some((c) => c.field.key === current);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { className: "text-muted-foreground", htmlFor: `block-group-${block.title}`, children: "Group by" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system47.Select, { value: known ? current : "", onValueChange: onPick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_design_system47.SelectTrigger,
+        {
+          size: "sm",
+          id: `block-group-${block.title}`,
+          "aria-label": `Which column ${block.title} is grouped by`,
+          className: "h-7 min-w-[10rem] text-xs",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system47.SelectValue, { placeholder: "Choose a column" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system47.SelectContent, { children: choices.map(({ field, unusual }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system47.SelectItem, { value: field.key, children: unusual ? `${fieldName(field)} \u2014 ${UNUSUAL_FIELD_NOTE}` : fieldName(field) }, field.key)) })
+    ] }),
+    known ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-muted-foreground", children: "The column this block was grouped by is no longer on this table \u2014 choose another." })
+  ] });
+}
 
 // src/FormsPanel.tsx
 var import_react98 = require("react");