@anchrd/intel-ui 0.16.0 → 0.17.0

package/src/board/board-statuses/board-statuses.tsx

@@ -0,0 +1,228 @@
+import { ArchivedBoardStatusId } from "@anchrd/intel-contract";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { useState } from "react";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { configurableStatuses, statusIdFrom } from "./board-statuses.ts";
+
+/**
+ * The status list, edited (anchrd/intel#286, `board_configure`).
+ *
+ * ⚠️ The whole list is written at once and never patched — adding, renaming and reordering are one
+ * call, because the order IS the list's order (#285). So the dialog holds a draft and sends it on
+ * save; a control that wrote per keystroke would write a version per letter.
+ *
+ * ⚠️ `archived` can be renamed and cannot be removed or moved. The contract refuses a list without
+ * it, and a shelf that could be dragged into the middle of the working columns would be a shelf
+ * pretending to be a stage.
+ */
+export function BoardStatuses({ board, onClose }: { board: BoardHandle; onClose(): void }) {
+  const i18n = useI18n();
+  // ⚠️ Seeded once per OPENING, which is why the caller mounts this only while it is open
+  // (`board.tsx`) instead of handing it an `open` flag. Radix never reports `onOpenChange(true)`
+  // for a dialog whose openness is decided outside it, so a re-seed hung off that callback would be
+  // dead code — and the draft would then be whatever the list looked like the first time anybody
+  // opened this board. Saving it would write that stale list WHOLE and revert a column somebody
+  // else had added in between.
+  const [draft, setDraft] = useState(() => configurableStatuses(board.statuses));
+  const [added, setAdded] = useState("");
+  // ⚠️ `board.configure` lives in `useBoard` and outlives this dialog, so its `isError` is still set
+  // the next time the dialog is opened — a refusal from ten minutes ago greeting a list nobody has
+  // tried to save yet. A local flag rather than `configure.reset()`, because resetting shared state
+  // from a mount is a side effect on something this dialog does not own.
+  const [attempted, setAttempted] = useState(false);
+
+  const working = draft.filter((status) => status.id !== ArchivedBoardStatusId);
+  const shelf = draft.find((status) => status.id === ArchivedBoardStatusId);
+
+  const move = (index: number, delta: number) => {
+    const target = index + delta;
+    if (target < 0 || target >= working.length) return;
+    const next = [...working];
+    const [item] = next.splice(index, 1);
+    if (item) next.splice(target, 0, item);
+    setDraft([...next, ...(shelf ? [shelf] : [])]);
+  };
+
+  return (
+    <Dialog open onOpenChange={(next) => !next && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{i18n.t("board.statuses")}</DialogTitle>
+        </DialogHeader>
+        <ul className="flex flex-col gap-2">
+          {working.map((status, index) => (
+            <li key={status.id} className="flex items-center gap-2">
+              <input
+                value={status.label}
+                aria-label={i18n.t("board.statusLabel")}
+                onChange={(event) => {
+                  const label = event.currentTarget.value;
+                  setDraft((current) =>
+                    current.map((entry) => (entry.id === status.id ? { ...entry, label } : entry)),
+                  );
+                }}
+                className="h-8 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              {/* ⚠️ Which columns mean finished is a property of the column, not its position
+                  (anchrd/intel#311) — so it is set here, per column, and several may carry it. It is
+                  what decides whether a task waiting on this one is still blocked. */}
+              <label className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+                <input
+                  type="checkbox"
+                  checked={status.terminal}
+                  onChange={(event) => {
+                    const terminal = event.currentTarget.checked;
+                    setDraft((current) =>
+                      current.map((entry) =>
+                        entry.id === status.id ? { ...entry, terminal } : entry,
+                      ),
+                    );
+                  }}
+                  className="size-4 rounded border outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                {i18n.t("board.statusTerminal")}
+              </label>
+              <button
+                type="button"
+                aria-label={i18n.t("board.statusUp")}
+                disabled={index === 0}
+                onClick={() => move(index, -1)}
+                className="grid size-8 place-items-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+              >
+                <ChevronUp aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("board.statusDown")}
+                disabled={index === working.length - 1}
+                onClick={() => move(index, 1)}
+                className="grid size-8 place-items-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+              >
+                <ChevronDown aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("board.statusRemove", { label: status.label })}
+                // A column with tasks still in it cannot be taken away: the server refuses a task
+                // in a status the board does not have, so removing it would make the board
+                // unwritable rather than tidy.
+                disabled={board.tasks.some((task) => task.status === status.id)}
+                onClick={() =>
+                  setDraft((current) => current.filter((entry) => entry.id !== status.id))
+                }
+                className="grid size-8 place-items-center rounded-md border text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+              >
+                <X aria-hidden="true" className="size-4" />
+              </button>
+            </li>
+          ))}
+          {shelf ? (
+            <li className="flex items-center gap-2">
+              <input
+                value={shelf.label}
+                aria-label={i18n.t("board.statusLabel")}
+                onChange={(event) => {
+                  const label = event.currentTarget.value;
+                  setDraft((current) =>
+                    current.map((entry) =>
+                      entry.id === ArchivedBoardStatusId ? { ...entry, label } : entry,
+                    ),
+                  );
+                }}
+                className="h-8 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <span className="text-xs text-muted-foreground">{i18n.t("board.shelfFixed")}</span>
+              {/* The shelf's flag is shown and cannot be turned off: the contract refuses an explicit
+                  `false` for it, and a shelf that did not mean finished would hold every archived
+                  task open as a blocker (anchrd/intel#311). */}
+              <label className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+                <input
+                  type="checkbox"
+                  checked
+                  disabled
+                  aria-label={i18n.t("board.statusTerminal")}
+                  className="size-4 rounded border"
+                />
+                {i18n.t("board.statusTerminal")}
+              </label>
+            </li>
+          ) : null}
+        </ul>
+        <form
+          className="flex gap-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const label = added.trim();
+            if (label === "") return;
+            setDraft((current) => {
+              const taken = new Set(current.map((entry) => entry.id));
+              const shelfEntry = current.find((entry) => entry.id === ArchivedBoardStatusId);
+              return [
+                ...current.filter((entry) => entry.id !== ArchivedBoardStatusId),
+                // A new column is work, not the end of it. Meaning "finished" is something somebody
+                // says on purpose, with the checkbox beside it.
+                { id: statusIdFrom(label, taken), label, terminal: false },
+                ...(shelfEntry ? [shelfEntry] : []),
+              ];
+            });
+            setAdded("");
+          }}
+        >
+          <input
+            value={added}
+            onChange={(event) => setAdded(event.currentTarget.value)}
+            placeholder={i18n.t("board.addStatus")}
+            aria-label={i18n.t("board.addStatus")}
+            className="h-8 min-w-0 flex-1 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <button
+            type="submit"
+            className="h-8 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.create")}
+          </button>
+        </form>
+        {attempted && board.configure.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("node.operationFailed")}
+          </p>
+        ) : null}
+        <DialogFooter>
+          <button
+            type="button"
+            onClick={onClose}
+            className="h-9 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.close")}
+          </button>
+          <button
+            type="button"
+            disabled={board.configure.isPending || draft.some((entry) => entry.label.trim() === "")}
+            onClick={() => {
+              setAttempted(true);
+              board.configure.mutate(
+                draft.map((entry) => ({
+                  id: entry.id,
+                  label: entry.label.trim(),
+                  terminal: entry.terminal,
+                })),
+                { onSuccess: onClose },
+              );
+            }}
+            className="h-9 rounded-md bg-primary px-3 text-sm text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {board.configure.isPending ? i18n.t("common.saving") : i18n.t("common.save")}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/board/board-table/board-table.ts

@@ -0,0 +1,33 @@
+import type { BoardTask } from "@anchrd/intel-contract";
+import { rootedParents } from "@/board/board-items/board-items.ts";
+
+// A task with the tasks under it, which is the shape `getSubRows` reads. `subRows` is absent rather
+// than empty for a leaf: TanStack treats an empty array as "expandable, with nothing in it" and
+// would draw a chevron that opens onto nothing.
+export interface BoardRow extends BoardTask {
+  subRows?: BoardRow[];
+}
+
+/**
+ * The board as the tree the table draws (anchrd/intel#286).
+ *
+ * ⚠️ Which task a row hangs under is `rootedParents`, shared with Gantt (anchrd/intel#293) rather
+ * than kept here. That walk carries two subtleties — an orphan becomes a root instead of vanishing
+ * with its hidden parent, and a cycle is broken at the task that closes it — and two copies of those
+ * are two copies that drift, which would show as a task that is a root in one view and a child in
+ * the other.
+ */
+export function boardRows(tasks: BoardTask[]): BoardRow[] {
+  const parents = rootedParents(tasks);
+  const rows = new Map<string, BoardRow>(tasks.map((task) => [task.id, { ...task }]));
+  const roots: BoardRow[] = [];
+  for (const task of tasks) {
+    const row = rows.get(task.id);
+    if (!row) continue;
+    const parent = parents.get(task.id) ?? null;
+    const target = parent === null ? undefined : rows.get(parent);
+    if (target === undefined) roots.push(row);
+    else target.subRows = [...(target.subRows ?? []), row];
+  }
+  return roots;
+}

package/src/board/board-table/board-table.tsx

@@ -0,0 +1,413 @@
+import {
+  type ColumnFiltersState,
+  type ColumnVisibilityState,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnVisibilityFeature,
+  createColumnHelper,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createSortedRowModel,
+  type ExpandedState,
+  filterFn_includesString,
+  type GroupingState,
+  rowExpandingFeature,
+  rowSortingFeature,
+  type SortingState,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  tableFeatures,
+  useTable,
+} from "@tanstack/react-table";
+import { ChevronDown, ChevronRight, Columns3, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { BoardAssigneeLabel } from "@/board/board-card/board-card.tsx";
+import { shownTasks } from "@/board/board-data/board-data.ts";
+import { labelOf, toneOf } from "@/board/board-status/board-status.ts";
+import type { BoardViewProps } from "@/board/board-views/board-views.types.ts";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { type BoardRow, boardRows } from "./board-table.ts";
+
+// ⚠️ Registered one by one rather than through `stockFeatures`. Every feature the board's table does
+// not use — pagination, selection, pinning, resizing, faceting — would otherwise be in the bundle
+// of a screen that never calls it, and the list below is also the honest answer to "what can this
+// table do".
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnVisibilityFeature,
+  rowExpandingFeature,
+  rowSortingFeature,
+  // ⚠️ A row-model slot has to stand AFTER the feature it needs. Filtering before grouping and
+  // expanding last is the order the rows actually pass through.
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
+});
+
+const helper = createColumnHelper<typeof features, BoardRow>();
+
+// The one place a grouping is offered. Not free-form: a board has fixed fields (#285) and there is
+// no UI to add one, so grouping by anything else would be grouping by something nobody can create.
+const groupBy = ["none", "status", "assignee"] as const;
+type GroupBy = (typeof groupBy)[number];
+
+/**
+ * The board as a table (anchrd/intel#286).
+ *
+ * ⚠️ The hierarchy is `getSubRows` and nothing else. Epic, task and subtask are a DEPTH in this
+ * schema and not three types (#285), so the table has one row shape and indents it by
+ * `row.depth` — there is no second column saying which of the three a row is, because the schema
+ * has no such fact to show.
+ *
+ * ⚠️ The columns are fixed and there is no UI to add one. A board is not a table node (`kind:
+ * "table"`), and a custom-field editor here would be a second, weaker version of the thing Intel
+ * already has for exactly that.
+ */
+export function BoardTable({ board, select, showArchived }: BoardViewProps) {
+  const i18n = useI18n();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibilityState>({});
+  const [expanded, setExpanded] = useState<ExpandedState>(true);
+  const [grouping, setGrouping] = useState<GroupingState>([]);
+
+  const data = useMemo(
+    () => boardRows(shownTasks(board.tasks, showArchived)),
+    [board.tasks, showArchived],
+  );
+
+  const columns = useMemo(
+    () =>
+      helper.columns([
+        helper.accessor("title", {
+          id: "title",
+          header: i18n.t("common.title"),
+          filterFn: "includesString",
+          sortFn: "alphanumeric",
+          // Grouping by the title would make one group per row, which is the table again with an
+          // extra click in front of it.
+          enableGrouping: false,
+        }),
+        helper.accessor((task) => labelOf(task.status, board.statuses), {
+          id: "status",
+          header: i18n.t("board.column.status"),
+          sortFn: "alphanumeric",
+        }),
+        helper.accessor(
+          // ⚠️ Grouped by a STABLE key, never by the rendered name. Most person ids cannot be
+          // resolved to a name in this browser (`useUserName`), so grouping by what is drawn would
+          // put every unnamed person into one group called "assigned".
+          (task) =>
+            task.assignee === null
+              ? ""
+              : task.assignee.type === "agent"
+                ? `agent:${task.assignee.nodeId}`
+                : `user:${task.assignee.id}`,
+          {
+            id: "assignee",
+            header: i18n.t("board.column.assignee"),
+            sortFn: "alphanumeric",
+            cell: ({ row }) =>
+              row.original.assignee === null ? (
+                <span className="text-muted-foreground">{i18n.t("board.unassigned")}</span>
+              ) : (
+                <BoardAssigneeLabel assignee={row.original.assignee} />
+              ),
+          },
+        ),
+        /**
+         * ⚠️ `undefined` for a task with no due date, and never `null`.
+         *
+         * `sortUndefined` only fires on `undefined` (`createSortedRowModel`), so with `null` the
+         * dateless rows fall through to the sort function — where `null < "2026-08-19"` and
+         * `null > "2026-08-19"` are both false. That makes the comparator report "equal" for pairs
+         * that are not, which is not a comparator at all: the sort then produces an order that
+         * depends on where the dateless rows happened to sit. Observed as a "sorted" column reading
+         * 8/6, 8/19, —, 8/14.
+         *
+         * An ISO date sorts correctly as a string, so `basic` is the whole of the comparison.
+         */
+        helper.accessor((task) => task.dueDate ?? undefined, {
+          id: "dueDate",
+          header: i18n.t("board.column.dueDate"),
+          sortFn: "basic",
+          sortUndefined: "last",
+          enableGrouping: false,
+          cell: ({ row }) => {
+            const value = row.original.dueDate;
+            return value === null ? (
+              <span className="text-muted-foreground">—</span>
+            ) : (
+              <time dateTime={value} className="tabular-nums">
+                {new Date(`${value}T00:00:00`).toLocaleDateString(i18n.locale)}
+              </time>
+            );
+          },
+        }),
+        helper.accessor((task) => task.labels.join(", "), {
+          id: "labels",
+          header: i18n.t("board.column.labels"),
+          filterFn: "includesString",
+          enableGrouping: false,
+          enableSorting: false,
+        }),
+      ]),
+    [i18n, board.statuses],
+  );
+
+  const table = useTable({
+    features,
+    columns,
+    data,
+    // The hierarchy the DoD asks for, in one option. Everything else about depth — the indent, the
+    // chevron, which rows exist at all — follows from it.
+    getSubRows: (row: BoardRow) => row.subRows,
+    getRowId: (row: BoardRow) => row.id,
+    state: { sorting, columnFilters, columnVisibility, expanded, grouping },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onExpandedChange: setExpanded,
+    onGroupingChange: setGrouping,
+    /**
+     * ⚠️ Off, and it has to be off.
+     *
+     * TanStack resets the expanded state whenever the row structure changes, and on a board the row
+     * structure changes constantly: every card edit, every drag and every archived-switch flip
+     * hands `data` a new array. With the reset on, opening an epic and then renaming anything on the
+     * board closes it again — and turning grouping on collapsed every group the moment it appeared,
+     * which is how this was found (the groups in the first screenshot were shut).
+     */
+    autoResetExpanded: false,
+  });
+
+  const currentGrouping: GroupBy = (grouping[0] as GroupBy) ?? "none";
+  const titleFilter = String(table.getColumn("title")?.getFilterValue() ?? "");
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 p-6">
+      <div className="flex flex-wrap items-center gap-2">
+        <label className="relative">
+          <span className="sr-only">{i18n.t("board.filterTitle")}</span>
+          <Search
+            aria-hidden="true"
+            className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
+          />
+          <input
+            type="search"
+            value={titleFilter}
+            placeholder={i18n.t("board.filterTitle")}
+            onChange={(event) =>
+              table.getColumn("title")?.setFilterValue(event.currentTarget.value || undefined)
+            }
+            className="h-8 w-56 rounded-md border bg-background pr-3 pl-8 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        </label>
+        <label className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">{i18n.t("board.groupBy")}</span>
+          <select
+            value={currentGrouping}
+            onChange={(event) => {
+              const next = event.currentTarget.value as GroupBy;
+              setGrouping(next === "none" ? [] : [next]);
+              // A group that opens closed is a screen with nothing on it. Regrouping therefore
+              // expands again, which is also the state the table starts in.
+              setExpanded(true);
+            }}
+            className="h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {groupBy.map((option) => (
+              <option key={option} value={option}>
+                {i18n.t(`board.groupBy.${option}`)}
+              </option>
+            ))}
+          </select>
+        </label>
+        <DropdownMenu>
+          <DropdownMenuTrigger className="ml-auto inline-flex h-8 items-center gap-2 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring">
+            <Columns3 aria-hidden="true" className="size-4" />
+            {i18n.t("board.columns")}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table.getAllLeafColumns().map((column) => (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
+                // The last visible column cannot be hidden: an empty table is a screen that has
+                // lost its data as far as anybody looking at it can tell.
+                disabled={column.getIsVisible() && table.getVisibleLeafColumns().length === 1}
+              >
+                {i18n.t(`board.column.${column.id === "title" ? "title" : column.id}`)}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto rounded-lg border">
+        <table className="w-full border-collapse text-sm">
+          <thead className="sticky top-0 z-10 bg-card">
+            {table.getHeaderGroups().map((group) => (
+              <tr key={group.id}>
+                {group.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    scope="col"
+                    aria-sort={
+                      header.column.getIsSorted() === "asc"
+                        ? "ascending"
+                        : header.column.getIsSorted() === "desc"
+                          ? "descending"
+                          : "none"
+                    }
+                    className="border-b px-3 py-2 text-left font-medium whitespace-nowrap"
+                  >
+                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <button
+                        type="button"
+                        onClick={header.column.getToggleSortingHandler()}
+                        className="inline-flex items-center gap-1 rounded outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+                      >
+                        <table.FlexRender header={header} />
+                        <span aria-hidden="true" className="text-muted-foreground">
+                          {header.column.getIsSorted() === "asc"
+                            ? "↑"
+                            : header.column.getIsSorted() === "desc"
+                              ? "↓"
+                              : ""}
+                        </span>
+                      </button>
+                    ) : (
+                      <table.FlexRender header={header} />
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className="border-b last:border-b-0 hover:bg-muted/60">
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="px-3 py-2 align-top">
+                    {/* ⚠️ A group row carries the grouped value and NOTHING else. Left to render
+                        itself, every other cell of a group row falls back to the first task in the
+                        group — so the heading "Backlog 3" came with one arbitrary member's title
+                        and its date beside it, which reads as a row of its own and is a lie about
+                        the two below it. */}
+                    {row.getIsGrouped() && !cell.getIsGrouped() ? null : cell.getIsGrouped() ? (
+                      <button
+                        type="button"
+                        onClick={row.getToggleExpandedHandler()}
+                        aria-expanded={row.getIsExpanded()}
+                        className="inline-flex items-center gap-2 rounded font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      >
+                        {row.getIsExpanded() ? (
+                          <ChevronDown aria-hidden="true" className="size-4" />
+                        ) : (
+                          <ChevronRight aria-hidden="true" className="size-4" />
+                        )}
+                        <GroupLabel row={row} columnId={cell.column.id} value={cell.getValue()} />
+                        <span className="text-xs text-muted-foreground tabular-nums">
+                          {row.subRows.length}
+                        </span>
+                      </button>
+                    ) : cell.getIsPlaceholder() ? null : cell.column.id === "title" ? (
+                      <div
+                        className="flex min-w-0 items-start gap-1.5"
+                        // ⚠️ The indent is a style and not a nested table. A row nested in markup
+                        // could not be sorted or grouped with its siblings, and a screen reader
+                        // would read four tables where there is one.
+                        style={{ paddingInlineStart: `${row.depth * 1.25}rem` }}
+                      >
+                        {row.getCanExpand() ? (
+                          <button
+                            type="button"
+                            onClick={row.getToggleExpandedHandler()}
+                            aria-expanded={row.getIsExpanded()}
+                            aria-label={i18n.t("board.toggleSubtasks", {
+                              task: row.original.title,
+                            })}
+                            className="mt-0.5 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                          >
+                            {row.getIsExpanded() ? (
+                              <ChevronDown aria-hidden="true" className="size-4" />
+                            ) : (
+                              <ChevronRight aria-hidden="true" className="size-4" />
+                            )}
+                          </button>
+                        ) : (
+                          <span aria-hidden="true" className="size-4 shrink-0" />
+                        )}
+                        <button
+                          type="button"
+                          onClick={() => select(row.original.id)}
+                          className="min-w-0 rounded text-left outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+                        >
+                          {row.original.title}
+                        </button>
+                        {board.blockedBy(row.original).length > 0 ? (
+                          <span className="shrink-0 rounded-md border border-destructive px-1 text-xs text-destructive">
+                            {i18n.t("board.blocked")}
+                          </span>
+                        ) : null}
+                      </div>
+                    ) : cell.column.id === "status" ? (
+                      <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+                        <span
+                          aria-hidden="true"
+                          className={`size-2 rounded-full ${toneOf(row.original.status, board.statuses).dot}`}
+                        />
+                        <table.FlexRender cell={cell} />
+                      </span>
+                    ) : (
+                      <table.FlexRender cell={cell} />
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {table.getRowModel().rows.length === 0 ? (
+          <p className="p-6 text-sm text-muted-foreground">{i18n.t("board.noTasks")}</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The value a group was formed on, said in words.
+ *
+ * ⚠️ The assignee column groups on a STABLE key (`user:…`, `agent:…`) and that key is not a name.
+ * The heading is therefore read off the first row of the group rather than off the key — that is
+ * the only place an agent's title can be resolved, and the only place a person who cannot be named
+ * is named honestly rather than by their id.
+ */
+function GroupLabel({
+  row,
+  columnId,
+  value,
+}: {
+  row: { subRows: { original: BoardRow }[] };
+  columnId: string;
+  value: unknown;
+}) {
+  const i18n = useI18n();
+  if (columnId !== "assignee") return <span>{String(value ?? "")}</span>;
+  const assignee = row.subRows[0]?.original.assignee ?? null;
+  if (assignee === null) return <span>{i18n.t("board.unassigned")}</span>;
+  return <BoardAssigneeLabel assignee={assignee} />;
+}