@anchrd/intel-ui 0.32.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/data/intel-data-provider/intel-data-provider.ts

@@ -66,6 +66,7 @@ import {
   AppendTableRowsInput,
   AppendTableRowsResult,
   DefineTableInput,
+  RedefineTableInput,
 } from "@anchrd/intel-contract/table";
 import { ToolCatalog, ToolServerCatalog } from "@anchrd/intel-contract/tool";
 import type { z } from "zod";
@@ -319,6 +320,16 @@ export function createIntelDataProvider(
         { method: "POST", body: JSON.stringify(parsed) },
       );
     },
+    // ⚠️ `PATCH`, where the two writes above are `POST`. The route is the same address as the
+    // header itself, and this changes it — `POST /nodes/:id/table` is the one that WRITES a header
+    // and refuses on a table that already has one.
+    async redefineTable(input) {
+      const parsed = RedefineTableInput.parse(input);
+      return await request(`/nodes/${encodeURIComponent(parsed.nodeId)}/table`, NodeTable, {
+        method: "PATCH",
+        body: JSON.stringify(parsed),
+      });
+    },
     async listNodeVersions(nodeId) {
       return await request(`/nodes/${encodeURIComponent(nodeId)}/versions`, NodeVersionList);
     },

package/src/data/intel-data-provider/intel-data-provider.types.ts

@@ -65,6 +65,7 @@ import type {
   AppendTableRowsInput,
   AppendTableRowsResult,
   DefineTableInput,
+  RedefineTableInput,
 } from "@anchrd/intel-contract/table";
 import type { ToolCatalog, ToolServerCatalog } from "@anchrd/intel-contract/tool";
 
@@ -125,6 +126,14 @@ export interface IntelDataProvider {
   getNodeTable(nodeId: string): Promise<NodeTable>;
   defineTable(input: DefineTableInput): Promise<NodeTable>;
   appendTableRows(input: AppendTableRowsInput): Promise<AppendTableRowsResult>;
+  // Changing the header of a table that already has one (#135). The mapping is explicit — every new
+  // column names the current one whose cells fill it, or `null` for an empty one — because a new
+  // header without it would reinterpret every stored row under names nobody matched to the old ones.
+  //
+  // ⚠️ `baseVersionId` is the `versionId` the mapping was written against, and the server refuses
+  // with `version_conflict` when the table has moved on. Not optional: a mapping onto a header
+  // somebody else has since changed would move the wrong cells, silently.
+  redefineTable(input: RedefineTableInput): Promise<NodeTable>;
 
   // Walks the browser through the portal's OAuth flow without asking anybody anything: Gate is the
   // identity provider Cloudflare Access consumes, so a signed-in person is already known there

package/src/i18n/de.json

@@ -74,6 +74,7 @@
   "resource.move": "Verschieben",
   "resource.renameTitle": "{title} umbenennen",
   "resource.archive": "Archivieren",
+  "resource.columns": "Spalten",
   "resource.export": "Export",
   "resource.import": "Import",
   "resource.validate": "Prüfen",
@@ -117,6 +118,23 @@
   "node.table.summary": "{rows} Zeilen, {columns} Spalten",
   "node.table.empty": "Noch keine Zeilen. Zeilen werden von Flows angehängt.",
   "node.table.undefined": "Diese Tabelle hat noch keine Spalten.",
+  "node.table.columnsTitle": "Spalten von {title}",
+  "node.table.columnName": "Name der Spalte „{column}“",
+  "node.table.columnNewName": "Name der neuen Spalte",
+  "node.table.columnAdd": "Spalte hinzufügen",
+  "node.table.columnDrop": "Die Spalte „{column}“ entfernen",
+  "node.table.columnDropNew": "Die neue Spalte entfernen",
+  "node.table.columnsDistinct": "Zwei Spalten können nicht denselben Namen tragen.",
+  "node.table.columnsNamed": "Jede Spalte braucht einen Namen.",
+  "node.table.columnsAtLeastOne": "Eine Tabelle braucht mindestens eine Spalte.",
+  "node.table.columnsTooLong": "Ein Spaltenname darf höchstens 120 Zeichen lang sein.",
+  "node.table.columnsTooMany": "Eine Tabelle kann höchstens 64 Spalten haben.",
+  "node.table.columnsDropWarning.one": "Diese Spalte wird mitsamt allen Zellen darin entfernt: {columns}",
+  "node.table.columnsDropWarning.many": "Diese Spalten werden mitsamt allen Zellen darin entfernt: {columns}",
+  "node.table.columnsDropRows.none": "Keine Zeile trägt dort Inhalt, es geht also nichts mit ihnen verloren.",
+  "node.table.columnsDropRows.one": "Eine Zeile trägt dort Inhalt. Er bleibt im Versionsverlauf lesbar und sonst nirgends.",
+  "node.table.columnsDropRows.many": "{count} Zeilen tragen dort Inhalt. Er bleibt im Versionsverlauf lesbar und sonst nirgends.",
+  "node.table.columnsDropConfirm": "Entfernen und speichern",
   "node.select": "Wähle ein Dokument oder einen Ordner, um damit zu arbeiten.",
   "node.folderEmpty": "In diesem Ordner ist noch nichts. Lege etwas über das Plus in der Seitenleiste an.",
   "node.folderFailed": "Dieser Ordner konnte nicht gelesen werden.",
@@ -344,6 +362,7 @@
   "common.loading": "Wird geladen …",
   "common.retry": "Erneut versuchen",
   "common.close": "Schließen",
+  "common.cancel": "Abbrechen",
   "common.unavailable": "Intel ist derzeit nicht verfügbar.",
   "common.noAccess": "Das ist für dich nicht verfügbar. Es existiert nicht, oder es ist nicht mehr für dich freigegeben.",
   "common.noPermission": "Dir fehlt die Berechtigung, das zu sehen.",

package/src/i18n/en.json

@@ -74,6 +74,7 @@
   "resource.move": "Move",
   "resource.renameTitle": "Rename {title}",
   "resource.archive": "Archive",
+  "resource.columns": "Columns",
   "resource.export": "Export",
   "resource.import": "Import",
   "resource.validate": "Check",
@@ -117,6 +118,23 @@
   "node.table.summary": "{rows} rows, {columns} columns",
   "node.table.empty": "No rows yet. Rows are appended by flows.",
   "node.table.undefined": "This table has no columns yet.",
+  "node.table.columnsTitle": "Columns of {title}",
+  "node.table.columnName": "Name of the column “{column}”",
+  "node.table.columnNewName": "Name of the new column",
+  "node.table.columnAdd": "Add column",
+  "node.table.columnDrop": "Remove the column “{column}”",
+  "node.table.columnDropNew": "Remove the new column",
+  "node.table.columnsDistinct": "Two columns cannot carry the same name.",
+  "node.table.columnsNamed": "Every column needs a name.",
+  "node.table.columnsAtLeastOne": "A table needs at least one column.",
+  "node.table.columnsTooLong": "A column name can be at most 120 characters long.",
+  "node.table.columnsTooMany": "A table can have at most 64 columns.",
+  "node.table.columnsDropWarning.one": "This column is removed with every cell in it: {columns}",
+  "node.table.columnsDropWarning.many": "These columns are removed with every cell in them: {columns}",
+  "node.table.columnsDropRows.none": "No row carries content there, so nothing is lost with them.",
+  "node.table.columnsDropRows.one": "One row carries content there. It stays readable in the version history and nowhere else.",
+  "node.table.columnsDropRows.many": "{count} rows carry content there. It stays readable in the version history and nowhere else.",
+  "node.table.columnsDropConfirm": "Remove and save",
   "node.select": "Select a document or folder to work with it.",
   "node.folderEmpty": "Nothing in this folder yet. Create something with the plus in the sidebar.",
   "node.folderFailed": "This folder could not be read.",
@@ -344,6 +362,7 @@
   "common.loading": "Loading…",
   "common.retry": "Try again",
   "common.close": "Close",
+  "common.cancel": "Cancel",
   "common.unavailable": "Intel is currently unavailable.",
   "common.noAccess": "This is not available to you. It may not exist, or it may no longer be shared with you.",
   "common.noPermission": "You do not have permission to see this.",

package/src/i18n/es.json

@@ -74,6 +74,7 @@
   "resource.move": "Mover",
   "resource.renameTitle": "Cambiar el nombre de {title}",
   "resource.archive": "Archivar",
+  "resource.columns": "Columnas",
   "resource.export": "Exportar",
   "resource.import": "Importar",
   "resource.validate": "Comprobar",
@@ -117,6 +118,23 @@
   "node.table.summary": "{rows} filas, {columns} columnas",
   "node.table.empty": "Todavía no hay filas. Las filas las añaden los flujos.",
   "node.table.undefined": "Esta tabla todavía no tiene columnas.",
+  "node.table.columnsTitle": "Columnas de {title}",
+  "node.table.columnName": "Nombre de la columna «{column}»",
+  "node.table.columnNewName": "Nombre de la nueva columna",
+  "node.table.columnAdd": "Añadir columna",
+  "node.table.columnDrop": "Eliminar la columna «{column}»",
+  "node.table.columnDropNew": "Eliminar la nueva columna",
+  "node.table.columnsDistinct": "Dos columnas no pueden llevar el mismo nombre.",
+  "node.table.columnsNamed": "Cada columna necesita un nombre.",
+  "node.table.columnsAtLeastOne": "Una tabla necesita al menos una columna.",
+  "node.table.columnsTooLong": "Un nombre de columna puede tener como máximo 120 caracteres.",
+  "node.table.columnsTooMany": "Una tabla puede tener como máximo 64 columnas.",
+  "node.table.columnsDropWarning.one": "Esta columna se elimina con todas sus celdas: {columns}",
+  "node.table.columnsDropWarning.many": "Estas columnas se eliminan con todas sus celdas: {columns}",
+  "node.table.columnsDropRows.none": "Ninguna fila tiene contenido ahí, así que no se pierde nada con ellas.",
+  "node.table.columnsDropRows.one": "Una fila tiene contenido ahí. Seguirá siendo legible en el historial de versiones y en ningún otro sitio.",
+  "node.table.columnsDropRows.many": "{count} filas tienen contenido ahí. Seguirá siendo legible en el historial de versiones y en ningún otro sitio.",
+  "node.table.columnsDropConfirm": "Eliminar y guardar",
   "node.select": "Elige un documento o una carpeta para trabajar con ello.",
   "node.folderEmpty": "En esta carpeta todavía no hay nada. Crea algo con el más de la barra lateral.",
   "node.folderFailed": "Esta carpeta no se ha podido leer.",
@@ -344,6 +362,7 @@
   "common.loading": "Cargando…",
   "common.retry": "Intentarlo de nuevo",
   "common.close": "Cerrar",
+  "common.cancel": "Cancelar",
   "common.unavailable": "Intel no está disponible en este momento.",
   "common.noAccess": "Esto no está disponible para ti. Puede que no exista o que ya no esté compartido contigo.",
   "common.noPermission": "No tienes permiso para ver esto.",

package/src/resource-error.ts

@@ -0,0 +1,33 @@
+/**
+ * Which sentence a refused change to a resource is told with.
+ *
+ * ⚠️ A conflict is the one that must not be swallowed: every write in the product names the state it
+ * was made against — `baseUpdatedAt` for a record, `baseVersionId` for a table — and turns a parallel
+ * edit into a refusal. A refusal nobody words is indistinguishable from a change that went through.
+ *
+ * ⚠️ Flat and on its own since #531, where the table's column dialog became the second reader. It
+ * used to live in `resource-menu.tsx`; importing it from there would have made the menu and the
+ * dialog import each other, and a cycle is a thing that works until the bundler splits differently.
+ */
+export function resourceErrorKey(error: unknown): string {
+  const code =
+    typeof error === "object" && error !== null && "code" in error
+      ? String((error as { code: unknown }).code)
+      : null;
+  switch (code) {
+    // ⚠️ `version_conflict` is the table's word for the same event (`nodes.ts`, `tableStateFor`):
+    // the positions or the mapping were read from a version that is no longer the newest. It is the
+    // conflict sentence and not the general one — "reload it and try again" is exactly the way out,
+    // and letting it fall through to `resource.failed` would tell somebody to reload in the same
+    // breath as claiming nobody knows what happened.
+    case "version_conflict":
+    case "update_conflict":
+    case "flow_update_conflict":
+      return "resource.conflict";
+    case "node_forbidden":
+    case "flow_edit_forbidden":
+      return "resource.forbidden";
+    default:
+      return "resource.failed";
+  }
+}

package/src/resource-menu/resource-menu.tsx

@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   Archive,
+  Columns3,
   CornerLeftUp,
   Ellipsis,
   FileArchive,
@@ -34,8 +35,10 @@ import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.t
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
+import { resourceErrorKey } from "@/resource-error.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
+import { TableColumnsDialog } from "@/table-columns/table-columns.tsx";
 import { RelativeTime } from "@/time/relative-time.tsx";
 import { useDateTime } from "@/time/time-context.tsx";
 
@@ -92,26 +95,6 @@ export function verbHintKey(verb: ResourceVerb, subject: ResourceTarget["type"]
   return `${subject}.verbHint.${verb}`;
 }
 
-// ⚠️ The same reading `moveErrorKey` does for a move, for the changes this menu makes. A conflict is
-// the one that must not be swallowed: `baseUpdatedAt` turns a parallel edit into a refusal, and a
-// refusal nobody words is indistinguishable from a change that went through.
-export function resourceErrorKey(error: unknown): string {
-  const code =
-    typeof error === "object" && error !== null && "code" in error
-      ? String((error as { code: unknown }).code)
-      : null;
-  switch (code) {
-    case "update_conflict":
-    case "flow_update_conflict":
-      return "resource.conflict";
-    case "node_forbidden":
-    case "flow_edit_forbidden":
-      return "resource.forbidden";
-    default:
-      return "resource.failed";
-  }
-}
-
 /**
  * The three-dot menu.
  *
@@ -140,6 +123,7 @@ export function ResourceMenu({
   const [sharing, setSharing] = useState(false);
   const [linksOpen, setLinksOpen] = useState(false);
   const [versionsOpen, setVersionsOpen] = useState(false);
+  const [columnsOpen, setColumnsOpen] = useState(false);
   const selected = useRouterState({ select: (state) => selectedFrom(state.location.search) });
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   // ⚠️ Dragging is a pointer gesture and nothing else: no keyboard, no screen reader, no touch worth
@@ -165,6 +149,10 @@ export function ResourceMenu({
   // ⚠️ Absent, not disabled — the rule at the top of this file. An import needs a folder to file
   // into; a document has nowhere to put a subtree, and a greyed-out entry would promise it does.
   const importable = node !== null && node.kind === "folder";
+  // ⚠️ Only a table has a header to change, so only a table carries the entry — absent, not
+  // disabled, the rule at the top of this file. Until #531 the header could be changed over MCP and
+  // nowhere else: a person had strictly less reach on their own table than a model did.
+  const isTable = node !== null && node.kind === "table";
   const bundleImport = useBundleImport({ where: title });
 
   // Everything a change here can make stale. The row sits in one level of the tree, the open screen
@@ -296,6 +284,15 @@ export function ResourceMenu({
             <Pencil aria-hidden="true" />
             {i18n.t("resource.rename")}
           </DropdownMenuItem>
+          {/* Directly under the rename, because they are the same gesture at two levels: one names
+              the table, the other names its columns. A reader looking for "change what this is
+              called" finds both without reading the rest of the menu (#531). */}
+          {isTable ? (
+            <DropdownMenuItem onSelect={() => setColumnsOpen(true)}>
+              <Columns3 aria-hidden="true" />
+              {i18n.t("resource.columns")}
+            </DropdownMenuItem>
+          ) : null}
           {/* The dialog stays the complete keyboard and touch path. Dragging is only a mouse
               shortcut; it does not need a second label beside this action. */}
           {/* ⚠️ `undefined`, and that is the honest answer rather than a missing one: this menu hangs
@@ -457,6 +454,9 @@ export function ResourceMenu({
       ) : null}
       {sharing ? <SharePanel target={target} close={() => setSharing(false)} /> : null}
       {linksOpen && node ? <NodeLinksPanel node={node} close={() => setLinksOpen(false)} /> : null}
+      {columnsOpen && node ? (
+        <TableColumnsDialog node={node} close={() => setColumnsOpen(false)} />
+      ) : null}
       {versionsOpen ? (
         <VersionHistory target={target} close={() => setVersionsOpen(false)} />
       ) : null}

package/src/table-columns/table-columns.tsx

@@ -0,0 +1,379 @@
+import type { Node } from "@anchrd/intel-contract/node";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { Modal } from "@/modal/modal.tsx";
+import { resourceErrorKey } from "@/resource-error.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * Changing a table's header from the UI (#531).
+ *
+ * ⚠️ Adding and renaming are free; removing is confirmed. That asymmetry is the whole point of the
+ * dialog and not a courtesy: a rename keeps every cell, an added column starts empty and takes
+ * nothing away, and a removal is the one gesture whose cost is invisible in this dialog — the cells
+ * stand in the grid behind it, and after the write they are only in the version history.
+ *
+ * ⚠️ The confirmation is a SECOND STEP of this dialog, not `window.confirm` and not a modal over a
+ * modal. It has to name which columns go and how much content goes with them, and a browser prompt
+ * carries neither markup nor the reader's language.
+ */
+type Draft = { key: string; name: string; source: string | null };
+
+/**
+ * The mapping together with the state it was written against (#531, review finding).
+ *
+ * ⚠️ `versionId` is pinned HERE and not read from the query at save time, and that is the whole
+ * optimistic lock. The query behind it shares its key with the grid and refetches on window focus,
+ * so a mapping written against `version-3` would otherwise be sent with whatever version the table
+ * had grown to in the meantime — the server would accept it, and a column somebody else added in
+ * between falls with its cells, because no entry in this mapping names it. Measured in the review:
+ * a refetch between renaming and saving turned `version-3` into `version-9` and the guard never
+ * fired. `columns` and `rows` are pinned with it, so the warning counts the state the reader saw.
+ */
+type Snapshot = {
+  versionId: string | null;
+  columns: string[];
+  rows: string[][];
+  entries: Draft[];
+};
+
+// One entry per column the table will have afterwards, in order — the shape `RedefineTableInput`
+// takes. `source` is the CURRENT name of the column whose cells fill it, so renaming is keeping the
+// source and changing the name, and a current column no entry names is the one that falls.
+//
+// ⚠️ The key of an existing column is its source, not a fresh id. This runs on every render for as
+// long as nothing has been edited, and `crypto.randomUUID()` would hand React a new key each time —
+// every field remounts, and a refetch behind the open dialog takes the caret out of the one being
+// typed in. Sources are distinct on every path that writes a table, so they are already keys.
+function draftOf(columns: string[]): Draft[] {
+  return columns.map((column) => ({ key: `source:${column}`, name: column, source: column }));
+}
+
+// Which current columns no draft entry claims. Reading it off the draft rather than tracking a
+// second "removed" list is what makes taking a removal back the same gesture as adding: there is one
+// list, and it is the answer.
+function droppedFrom(columns: string[], draft: Draft[]): string[] {
+  const kept = new Set(draft.map((entry) => entry.source).filter((source) => source !== null));
+  return columns.filter((column) => !kept.has(column));
+}
+
+/**
+ * How many rows actually lose something.
+ *
+ * ⚠️ Not `rows.length`. Dropping a column nobody ever filled costs nothing, and telling the reader
+ * "42 rows lose cells" when none of them carried content there is a wrong sentence about the one
+ * thing they are being asked to confirm. Counted per row, because a row is what a person sees.
+ */
+function rowsWithContentIn(columns: string[], rows: string[][], dropped: string[]): number {
+  const indexes = dropped.map((column) => columns.indexOf(column)).filter((index) => index >= 0);
+  return rows.filter((row) => indexes.some((index) => (row[index] ?? "") !== "")).length;
+}
+
+export function TableColumnsDialog({ node, close }: { node: Node; close(): void }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+  // The same key the grid reads under, so the dialog and the table behind it are one loaded state
+  // and never two that disagree about how many columns there are.
+  const table = useQuery({
+    queryKey: ["node-table", node.id],
+    queryFn: () => data.getNodeTable(node.id),
+  });
+  const [draft, setDraft] = useState<Snapshot | null>(null);
+  const [confirming, setConfirming] = useState(false);
+  // The focus on the way back out of the confirmation. A ref alone cannot do it: the button does
+  // not exist yet at the moment the step is left, so the wish is recorded and spent on the render
+  // that brings the form back.
+  const [refocusSave, setRefocusSave] = useState(false);
+  const saveButton = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!refocusSave) return;
+    saveButton.current?.focus();
+    setRefocusSave(false);
+  }, [refocusSave]);
+
+  // ⚠️ Derived rather than seeded through an effect: the query answers after the first render, and
+  // an effect would leave one frame in which the dialog is a form over no rows. The FIRST edit
+  // freezes this into state, and from then on the pinned snapshot is what is read — including its
+  // `versionId`, which is what makes the server's refusal reachable at all.
+  const current: Snapshot = draft ?? {
+    versionId: table.data?.versionId ?? null,
+    columns: table.data?.columns ?? [],
+    rows: table.data?.rows ?? [],
+    entries: draftOf(table.data?.columns ?? []),
+  };
+  const entries = current.entries;
+  const dropped = droppedFrom(current.columns, entries);
+  const losing = rowsWithContentIn(current.columns, current.rows, dropped);
+
+  const names = entries.map((entry) => entry.name.trim());
+  const blank = names.some((name) => name === "");
+  const duplicate = new Set(names.map((name) => name.toLowerCase())).size !== names.length;
+  // ⚠️ The bounds of `TableColumn` and `RedefineTableInput`, mirrored rather than left to the
+  // provider's `parse`. A `ZodError` never reaches `resourceErrorKey` with a code, so it arrives as
+  // "reload the latest version and try again" — advice that cannot help somebody whose column name
+  // is simply too long.
+  //
+  // ⚠️ And it is not `maxLength`'s job: that attribute bounds what is TYPED or pasted, and it does
+  // not touch a value that is already in the field. The header this dialog starts from comes from
+  // the server, and `bundle.ts` checks an imported CSV header against neither bound — so a table
+  // that is already over one of them is where this check earns its place.
+  const tooLong = names.some((name) => name.length > 120);
+  const tooMany = entries.length > 64;
+  const empty = entries.length === 0;
+  const incomplete = empty || blank || duplicate || tooLong || tooMany;
+
+  const save = useMutation({
+    mutationFn: async () => {
+      const idempotencyKey = crypto.randomUUID();
+      // ⚠️ Two calls, because the server has two: `defineTable` refuses on a table that already has
+      // a header, and `redefineTable` refuses on one that has none (`table_undefined`). A table
+      // without a header is reachable through MCP and through the bundle import, so this dialog is
+      // the only place in the UI where such a table can be given one at all.
+      //
+      // ⚠️ `current.versionId`, never `table.data.versionId`: the mapping below was written against
+      // the pinned snapshot, and sending it under a version it was not written against is exactly
+      // the silent wrong-cells move `Snapshot` exists to prevent.
+      const base = current.versionId;
+      if (base === null) {
+        await data.defineTable({ nodeId: node.id, columns: names, idempotencyKey });
+        return;
+      }
+      await data.redefineTable({
+        nodeId: node.id,
+        baseVersionId: base,
+        columns: entries.map((entry, index) => ({
+          name: names[index] ?? "",
+          source: entry.source,
+        })),
+        idempotencyKey,
+      });
+    },
+    onSuccess: async () => {
+      // The grid, the count beside the title and the record itself: the header is drawn from the
+      // first, the summary from the first, and `updatedAt` — which every other change in the menu
+      // sends as `baseUpdatedAt` — from the last.
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["node-table", node.id] }),
+        queryClient.invalidateQueries({ queryKey: ["node", node.id] }),
+      ]);
+      close();
+    },
+  });
+
+  // Every edit writes the WHOLE snapshot back, which is what pins the version: the first CHANGE —
+  // a keystroke, a ✕, an added column — is the moment the reader started working against a
+  // particular state of the table.
+  //
+  // ⚠️ Between opening and that first change there is deliberately no guard. Nothing has been
+  // composed yet that points at a particular header, so a version arriving in between is simply the
+  // one the reader is now looking at. Saying otherwise would promise more than is here.
+  function edit(key: string, name: string): void {
+    setDraft({
+      ...current,
+      entries: entries.map((entry) => (entry.key === key ? { ...entry, name } : entry)),
+    });
+  }
+
+  function drop(key: string): void {
+    setDraft({ ...current, entries: entries.filter((entry) => entry.key !== key) });
+  }
+
+  function add(): void {
+    setDraft({
+      ...current,
+      // A fresh id, because an added column has no source to be named after — and no `source:`
+      // prefix, so it can never collide with the key of a column that has one.
+      entries: [...entries, { key: crypto.randomUUID(), name: "", source: null }],
+    });
+  }
+
+  function submit(): void {
+    // Removing is the only branch that asks. Everything else — a rename, an added column, both at
+    // once — goes straight through, because nothing stored is lost by either.
+    if (dropped.length > 0 && !confirming) {
+      setConfirming(true);
+      return;
+    }
+    save.mutate();
+  }
+
+  return (
+    <Modal title={i18n.t("node.table.columnsTitle", { title: node.title })} close={close}>
+      {table.isPending ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : table.isError ? (
+        <p role="alert" className="text-sm text-destructive">
+          {i18n.t("node.loadFailed")}
+        </p>
+      ) : confirming ? (
+        <div className="space-y-4">
+          {/* ⚠️ `alert`, not `status`: this is the one screen in the dialog that must be read before
+              the button under it is pressed, and it is the only place the cost is named at all. */}
+          <div role="alert" className="space-y-2 rounded-md border border-destructive/30 p-3">
+            {/* ⚠️ One sentence per number, the `.none`/`.one`/`.many` shape `archive.purge.links`
+                already uses for the same job. A single plural template reads as broken German the
+                moment the count is one — "Diese Spalten … : note", "1 Zeilen tragen dort Inhalt" —
+                and this is the screen a reader is asked to trust before losing cells. Found in the
+                browser, not in jsdom: the tests were written around the two-row case. */}
+            <p className="text-sm font-medium text-destructive">
+              {i18n.t(
+                dropped.length === 1
+                  ? "node.table.columnsDropWarning.one"
+                  : "node.table.columnsDropWarning.many",
+                { columns: dropped.join(", ") },
+              )}
+            </p>
+            {/* The honest number, and the honest sentence when it is zero. A column nobody ever
+                filled costs nothing, and saying "42 rows" about it would be the wrong sentence. */}
+            <p className="text-xs text-muted-foreground">
+              {losing === 0
+                ? i18n.t("node.table.columnsDropRows.none")
+                : losing === 1
+                  ? i18n.t("node.table.columnsDropRows.one")
+                  : i18n.t("node.table.columnsDropRows.many", { count: losing })}
+            </p>
+          </div>
+          {save.isError ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t(resourceErrorKey(save.error))}
+            </p>
+          ) : null}
+          <div className="flex gap-2">
+            {/* The way back is first and it is a real button: somebody who reads the warning and
+                changes their mind must not have to find the × in the corner.
+
+                ⚠️ And it takes the focus, because this step REPLACES the form the focus was in —
+                without it the focus falls to `<body>` and a keyboard reader stands outside the
+                dialog at the one step that destroys something (review finding to #531). The safe
+                button, not the destructive one: focus is where Enter lands. */}
+            <button
+              type="button"
+              // biome-ignore lint/a11y/noAutofocus: the step replaces the focused form; see above
+              autoFocus
+              // ⚠️ And the way BACK carries the focus too. `autoFocus` only fires on the way in;
+              // returning to the form dropped it on `<body>` again — half a keyboard path is the
+              // same defect as none, one step further on (second review round of #531).
+              onClick={() => {
+                setConfirming(false);
+                setRefocusSave(true);
+              }}
+              className="flex-1 rounded-md border px-4 py-2 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("common.cancel")}
+            </button>
+            <button
+              type="button"
+              onClick={() => save.mutate()}
+              disabled={save.isPending}
+              className="flex-1 rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground outline-none hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              {save.isPending ? i18n.t("common.saving") : i18n.t("node.table.columnsDropConfirm")}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <form
+          className="space-y-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (!save.isPending && !incomplete) submit();
+          }}
+        >
+          {save.isError ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t(resourceErrorKey(save.error))}
+            </p>
+          ) : null}
+          <ul className="max-h-72 space-y-2 overflow-y-auto">
+            {entries.map((entry) => (
+              <li key={entry.key} className="flex items-center gap-2">
+                <label className="min-w-0 flex-1 text-sm">
+                  {/* ⚠️ The name is the accessible name of the field, and it is the CURRENT column's
+                      name rather than a bare "Column": with five fields on screen, five labels
+                      reading the same word leave a screen reader with no way to say which one is
+                      being edited. An added column has no current name and says so. */}
+                  <span className="sr-only">
+                    {entry.source === null
+                      ? i18n.t("node.table.columnNewName")
+                      : i18n.t("node.table.columnName", { column: entry.source })}
+                  </span>
+                  <input
+                    value={entry.name}
+                    // The bound `TableColumn` carries, for what is typed or pasted here. What
+                    // arrives from the server already over it is caught by `tooLong` above.
+                    maxLength={120}
+                    onChange={(event) => edit(entry.key, event.target.value)}
+                    className="w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                </label>
+                <button
+                  type="button"
+                  onClick={() => drop(entry.key)}
+                  // ⚠️ A column with no name yet has its own label. The fallback used to fill the
+                  // template with an empty string, and the button then announced itself as
+                  // `Die Spalte „" entfernen` — seen in the browser right after adding one.
+                  aria-label={
+                    entry.name.trim() === "" && entry.source === null
+                      ? i18n.t("node.table.columnDropNew")
+                      : i18n.t("node.table.columnDrop", {
+                          column: entry.name.trim() === "" ? (entry.source ?? "") : entry.name,
+                        })
+                  }
+                  className="shrink-0 rounded-md p-2 text-muted-foreground outline-none hover:bg-muted hover:text-destructive focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <X aria-hidden="true" className="size-4" />
+                </button>
+              </li>
+            ))}
+          </ul>
+          <button
+            type="button"
+            onClick={add}
+            disabled={entries.length >= 64}
+            className="flex w-full items-center justify-center gap-2 rounded-md border border-dashed px-4 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            <Plus aria-hidden="true" className="size-4" />
+            {i18n.t("node.table.columnAdd")}
+          </button>
+          {/* ⚠️ EVERY reason the button is grey is named while it holds, and there are five. The
+              first version of this listed two and left the empty header — the state a reader
+              reaches by removing the last column — with a dead button and no sentence at all
+              (review finding to #531). A submit that is grey for a reason nobody states is a dialog
+              that has stopped answering. Ordered so the one the reader just caused comes first. */}
+          {duplicate ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t("node.table.columnsDistinct")}
+            </p>
+          ) : blank ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t("node.table.columnsNamed")}
+            </p>
+          ) : tooLong ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t("node.table.columnsTooLong")}
+            </p>
+          ) : tooMany ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t("node.table.columnsTooMany")}
+            </p>
+          ) : empty ? (
+            <p role="alert" className="text-sm text-destructive">
+              {i18n.t("node.table.columnsAtLeastOne")}
+            </p>
+          ) : null}
+          <button
+            ref={saveButton}
+            type="submit"
+            disabled={save.isPending || incomplete}
+            className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {save.isPending ? i18n.t("common.saving") : i18n.t("common.save")}
+          </button>
+        </form>
+      )}
+    </Modal>
+  );
+}