@anchrd/intel 0.59.0

package/ui/src/board/board-assignee/board-assignee-picker.tsx

@@ -0,0 +1,132 @@
+import { useQuery } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * Who to give this card to (#700, D70).
+ *
+ * ⚠️ **The list is the board's, not the installation's.** Only people who can actually open this
+ * board are offered, so handing somebody a card never also hands them a reason to ask why they
+ * cannot see it.
+ *
+ * ⚠️ **Under two characters the answer is empty on purpose**, and the wording says so rather than
+ * showing "nothing found": a picker that says "no matches" for one typed letter teaches the reader
+ * that the person is not there, which is the opposite of the truth.
+ */
+export function AssigneePicker({
+  boardId,
+  current,
+  onPick,
+  children,
+}: {
+  boardId: string;
+  current: string | null;
+  onPick(assigneeId: string | null): void;
+  // ⚠️ THE ANCHOR, and it is not optional decoration (#723). Radix positions a menu against its
+  // trigger; the first version of this component had none, and the menu never appeared. Every test
+  // stayed green, because jsdom has no layout and Testing Library finds a portal wherever it sits.
+  children: ReactNode;
+}) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  const [query, setQuery] = useState("");
+  /**
+   * ⚠️ **The query is gated on being OPEN, and that is not an optimisation** (#757). Since the empty
+   * query became a real question, an ungated `useQuery` fires the moment the component mounts — and
+   * this component wraps every assignee circle on the screen. A board with forty cards would open
+   * forty requests for a menu nobody has touched.
+   *
+   * ⚠️ **Uncontrolled, since #750.** This used to accept an `open` prop for the plus menu, which
+   * opened the picker without a trigger of its own. That entry is gone — the circle is always on the
+   * row and opens the same menu — and the prop went with it rather than staying as a second way in
+   * that nothing drives and nothing keeps in step.
+   */
+  const [shown, setShown] = useState(false);
+  const trimmed = query.trim();
+  /**
+   * ⚠️ **Enabled for an EMPTY query too, since #757.** Nothing typed asks a different question than
+   * one letter: it names the people who reach this board, a short set this installation already
+   * knows. One letter stays refused, because that IS a search and a bad one.
+   */
+  const search = useQuery({
+    queryKey: ["board-assignee-search", boardId, trimmed],
+    enabled: shown && (trimmed.length === 0 || trimmed.length >= 2),
+    queryFn: async () => await data.searchBoardAssignees(boardId, trimmed),
+  });
+  const found = search.data?.items ?? [];
+  const more = search.data?.more ?? 0;
+
+  return (
+    <DropdownMenu onOpenChange={setShown}>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        <div className="p-1">
+          <input
+            // biome-ignore lint/a11y/noAutofocus: the menu opens on a deliberate click, never on load
+            autoFocus
+            value={query}
+            aria-label={i18n.t("board.assignee.search")}
+            placeholder={i18n.t("board.assignee.search")}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => event.key === "Escape" && setShown(false)}
+            className="w-full rounded-md border bg-background px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        </div>
+        {current === null ? null : (
+          <>
+            <DropdownMenuItem
+              onSelect={() => {
+                onPick(null);
+              }}
+            >
+              {i18n.t("board.assignee.clear")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {/* ⚠️ Only for the ONE-character case. An empty query now answers with suggestions, and
+            telling somebody to keep typing while showing them names would be a hint that contradicts
+            the list under it. */}
+        {trimmed.length === 1 ? (
+          <p className="px-2 py-1.5 text-muted-foreground text-xs">
+            {i18n.t("board.assignee.keepTyping")}
+          </p>
+        ) : null}
+        {trimmed.length !== 1 && !search.isPending && found.length === 0 ? (
+          <p className="px-2 py-1.5 text-muted-foreground text-xs">
+            {i18n.t("board.assignee.nobody")}
+          </p>
+        ) : null}
+        {found.map((person) => (
+          <DropdownMenuItem
+            key={person.id}
+            onSelect={() => {
+              onPick(person.id);
+            }}
+          >
+            <span className="truncate">{person.name}</span>
+            {/* ⚠️ The address disambiguates two colleagues who share a first name. It is the
+                second line, not the first: a picker reads by NAME, and an address in the same
+                weight would make every row look like a form field. */}
+            <span className="ml-auto truncate text-muted-foreground text-xs">{person.email}</span>
+          </DropdownMenuItem>
+        ))}
+        {/* ⚠️ The cap says so rather than hiding. Three names that look like the whole list teach
+            the reader that nobody else exists, which is the one thing this list must not say. */}
+        {more === 0 ? null : (
+          <p className="px-2 py-1.5 text-muted-foreground text-xs">
+            {i18n.t("board.assignee.more", { count: more })}
+          </p>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/ui/src/board/board-assignee/board-assignee.ts

@@ -0,0 +1,48 @@
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useResolvedName } from "@/resolved-names/resolved-names.tsx";
+import { useUserName } from "@/user-name/user-name.ts";
+
+/**
+ * What to call whoever a card is for.
+ *
+ * ⚠️ **One rule, two surfaces.** The table draws the name in a cell, the open card draws it in a
+ * circle, and both must answer the same way — `useUserName` resolves only the reader themselves, so
+ * for anybody else the honest answer is "a user account" and never the principal id the row carries
+ * (`user-name.ts`, #258). Written twice, the two would drift, and the drift would put an id on one
+ * of the two screens.
+ */
+export function useAssigneeLabel(id: string | null): string {
+  const i18n = useI18n();
+  // ⚠️ TWO sources, and the order matters. `useUserName` answers for the reader themselves out of
+  // the session the shell already holds, without a request; the board's resolved map answers for
+  // everybody else. Asking the map first would make the reader's own name depend on a round trip
+  // that has no reason to exist, and it would leave them nameless on any screen without a provider.
+  const own = useUserName(id);
+  const resolved = useResolvedName(id);
+  if (id === null) return i18n.t("board.unassigned");
+  // ⚠️ The fallback stays what it was: a person we cannot name is "a user account", never the
+  // principal id the row carries (#258). Names arriving is an improvement on this line, not a
+  // replacement for the rule underneath it.
+  return own ?? resolved ?? i18n.t("node.someUser");
+}
+
+/**
+ * The three tones the access summary already uses for its circles, so an assignee looks like the
+ * same kind of thing as a person on the share screen (#724).
+ *
+ * ⚠️ **Chosen by the ID, not by a position.** The access summary can count places in a row; a card
+ * stands alone, and there is no row to count in. Hashing the id means the same person keeps the same
+ * colour on every card and every board, which is the only property that makes a colour worth having
+ * here — a colour that moves is noise.
+ */
+const PERSON_TONES = [
+  "bg-muted text-muted-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-secondary text-secondary-foreground",
+] as const;
+
+export function personTone(id: string): string {
+  let sum = 0;
+  for (const character of id) sum = (sum + character.charCodeAt(0)) % 4096;
+  return PERSON_TONES[sum % PERSON_TONES.length] ?? PERSON_TONES[0];
+}

package/ui/src/board/board-assignee/board-assignee.tsx

@@ -0,0 +1,75 @@
+import { UserRound } from "lucide-react";
+import { AssigneePicker } from "@/board/board-assignee/board-assignee-picker.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
+import { initials } from "@/user-name/user-name.ts";
+import { personTone, useAssigneeLabel } from "./board-assignee.ts";
+
+/**
+ * The circle for whoever a card is for, and the way to give it to somebody else.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both draw it; written twice they
+ * would drift, and the drift would be an accessibility bug on exactly one of them.
+ *
+ * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed from the access
+ * summary, the field stays `assigneeId`. A row of circles would imply a second data model.
+ *
+ * ⚠️ **Drawn even for nobody, since #724** — and that reverses #692 on purpose rather than by
+ * accident. A text chip saying "nobody yet" was a placeholder for an absence and earned no room. An
+ * empty circle is not that: it is the one control on the row that says the card COULD be given to
+ * somebody, and the card nobody owns is exactly the one that needs it.
+ *
+ * ⚠️ **The circle OPENS the picker; it no longer clears on click** (#723). A control that
+ * removes an assignment on the same click somebody uses to change one is a control that
+ * destroys work on a misclick. Removing lives inside the menu, where it says what it does.
+ *
+ * ⚠️ **The NAME lives on the button, and the circle is hidden.** Children of a `<button>` are
+ * presentational in ARIA, so a label inside one is never announced and the button's own name wins.
+ * Wrapping the circle in a control therefore takes the person out of the accessibility tree unless
+ * the control says it too. That is the trap in `packages/intel/ui/CLAUDE.md`.
+ */
+export function AssigneeChip({
+  id,
+  boardId,
+  onPick,
+}: {
+  /**
+   * ⚠️ `null` DRAWS, it does not skip (#724). An empty circle with a person in it is the one place
+   * on the row that says "this could be given to somebody" — and without it there is nothing to
+   * press on a card nobody owns, which is exactly the card that needs an owner.
+   */
+  id: string | null;
+  boardId: string;
+  onPick(assigneeId: string | null): void;
+}) {
+  const i18n = useI18n();
+  const label = useAssigneeLabel(id);
+  return (
+    <AssigneePicker boardId={boardId} current={id} onPick={onPick}>
+      <button
+        type="button"
+        aria-label={
+          id === null
+            ? i18n.t("board.assignSomebody")
+            : i18n.t("board.changeAssignee", { name: label })
+        }
+        title={label}
+        className="shrink-0 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <span
+          // ⚠️ **Hidden, and it must stay hidden.** This span used to carry `role="img"` with the
+          // person's name, and that reached nobody: it sits inside a button. Giving it a role and a
+          // label back would not add a second announcement, it would add none, while making the code
+          // look as though the name were covered here rather than on the button.
+          aria-hidden="true"
+          className={cn(
+            "flex size-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-background",
+            id === null ? "border border-dashed text-muted-foreground" : personTone(id),
+          )}
+        >
+          {id === null ? <UserRound aria-hidden="true" className="size-4" /> : initials(label)}
+        </span>
+      </button>
+    </AssigneePicker>
+  );
+}

package/ui/src/board/board-chip/board-chip.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/lib/utils";
+/**
+ * A value on a card, and the way to take it off again.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both draw these; written twice
+ * they drift in size, in shape and — the expensive one — in what they are called.
+ *
+ * ⚠️ **The name says the value AND what pressing it does.** A button called `Zebra` that quietly
+ * clears a dependency is one nobody can predict; a name that drops the value is the other half of
+ * the mistake, because somebody speaking the visible words has to be able to reach the control by
+ * them (WCAG 2.5.3). Value first, then the consequence.
+ */
+export function BoardChip({
+  label,
+  action,
+  onClick,
+  tone = "outline",
+}: {
+  label: string;
+  action: string;
+  onClick(): void;
+  /**
+   * ⚠️ **`inverted` is for labels and nothing else** (#724). Status, dates and the assignee say what
+   * a card IS; a label is what somebody chose to call it, and the row needs to tell the two apart at
+   * a glance. Filling every chip would take that difference away again.
+   */
+  tone?: "outline" | "inverted";
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={`${label}, ${action}`}
+      onClick={onClick}
+      className={cn(
+        "flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        tone === "outline" && "border hover:bg-muted",
+        // ⚠️ `foreground`/`background`, not literal black and white. The two swap with the theme on
+        // their own, so the label stays inverted in dark mode instead of turning into a black chip
+        // on a black ground.
+        tone === "inverted" && "bg-foreground text-background hover:bg-foreground/85",
+      )}
+    >
+      {label}
+    </button>
+  );
+}

package/ui/src/board/board-crumbs/board-crumbs.ts

@@ -0,0 +1,56 @@
+import type { BoardTask } from "@contract/board.ts";
+
+/** One step of the path above an open card. The board is a step like any other. */
+export interface Crumb {
+  /** The node id to open, or `null` for the board itself. */
+  taskId: string | null;
+  title: string;
+}
+
+/**
+ * The path from the board down to the open card, board first.
+ *
+ * ⚠️ **An unknown parent ENDS the walk rather than losing the card.** Under a filter a subtask can
+ * be in the answer while its parent is not (`board.ts` says so on `parentTaskId`). The path is then
+ * shorter than the tree, which is honest: it shows what this answer knows.
+ */
+export function crumbsOf(taskId: string, boardTitle: string, tasks: BoardTask[]): Crumb[] {
+  const byId = new Map(tasks.map((task) => [task.id, task]));
+  const trail: Crumb[] = [];
+  const seen = new Set<string>();
+
+  /**
+   * ⚠️ **`seen` is the whole guard, and a second counter beside it would be decoration.** A loop in
+   * the parent chain ends the walk here because every id is visited once; a step limit could only
+   * fire where this already has, and a guard that cannot fire is one nobody can test.
+   */
+  let current = byId.get(taskId);
+  while (current !== undefined) {
+    if (seen.has(current.id)) break;
+    seen.add(current.id);
+    trail.unshift({ taskId: current.id, title: current.title });
+    const parentId = current.parentTaskId;
+    current = parentId === null ? undefined : byId.get(parentId);
+  }
+
+  return [{ taskId: null, title: boardTitle }, ...trail];
+}
+
+/**
+ * The path as it is drawn: board, then an ellipsis standing for what was left out, then the last
+ * `keep` steps.
+ *
+ * ⚠️ **The board and the open card are never hidden.** They are the two ends somebody navigates by:
+ * where they came from and where they are. Everything between them is what the ellipsis holds.
+ *
+ * ⚠️ **`hidden` is the LIST, not a count.** The three dots open it, so the view needs the entries
+ * themselves; handing over a number would force it to recompute what was dropped.
+ */
+export function foldCrumbs(crumbs: Crumb[], keep = 1): { shown: Crumb[]; hidden: Crumb[] } {
+  // Board + the kept tail + at least one in between is what makes folding worth anything.
+  if (crumbs.length <= keep + 2) return { shown: crumbs, hidden: [] };
+  return {
+    shown: [...crumbs.slice(0, 1), ...crumbs.slice(crumbs.length - keep)],
+    hidden: crumbs.slice(1, crumbs.length - keep),
+  };
+}

package/ui/src/board/board-crumbs/board-crumbs.tsx

@@ -0,0 +1,111 @@
+import { ChevronLeft } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { type Crumb, foldCrumbs } from "./board-crumbs.ts";
+
+/**
+ * The path above an open card: back to the board, then every level down to this one.
+ *
+ * ⚠️ **The arrow belongs to the BOARD, the path to the cards.** Jack's decision 2026-08-21: one
+ * control that always means the same thing, and a path whose steps are each their own way back. An
+ * arrow that went one level up would mean something different on every card.
+ *
+ * ⚠️ **This replaces the heading rather than standing beside it.** The last step IS the card's name;
+ * drawn next to a heading it would be the same sentence twice.
+ */
+export function BoardCrumbs({
+  crumbs,
+  onOpen,
+}: {
+  crumbs: Crumb[];
+  onOpen(taskId: string | null): void;
+}) {
+  const i18n = useI18n();
+  const { shown, hidden } = foldCrumbs(crumbs);
+  const board = shown[0];
+  const rest = shown.slice(1);
+
+  return (
+    <nav
+      aria-label={i18n.t("board.crumbs")}
+      className="flex min-w-0 items-center gap-1.5 text-lg font-semibold"
+    >
+      <button
+        type="button"
+        aria-label={i18n.t("board.backTo", { board: board?.title ?? "" })}
+        onClick={() => onOpen(null)}
+        className="-ml-1 rounded-md p-0.5 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <ChevronLeft aria-hidden="true" className="size-5" />
+      </button>
+
+      <Step crumb={board} onOpen={onOpen} />
+
+      {hidden.length === 0 ? null : (
+        <>
+          <Separator />
+          <DropdownMenu>
+            {/* ⚠️ A menu, not a tooltip. On a touch screen there is no hover, and the levels behind
+                the dots are the only way to reach them — a hint that needs a pointer would put them
+                out of reach on the device where the path folds soonest. */}
+            <DropdownMenuTrigger
+              aria-label={i18n.t("board.crumbsFolded")}
+              className="rounded-md border px-1.5 leading-none text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              …
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {hidden.map((crumb) => (
+                <DropdownMenuItem key={crumb.taskId} onSelect={() => onOpen(crumb.taskId)}>
+                  {crumb.title}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      )}
+
+      {rest.map((crumb, step) => (
+        <span key={crumb.taskId} className="flex min-w-0 items-center gap-1.5">
+          <Separator />
+          {/* The last step is where the reader IS: named, not offered as somewhere to go. */}
+          {step === rest.length - 1 ? (
+            <span className="truncate font-medium">{crumb.title}</span>
+          ) : (
+            <Step crumb={crumb} onOpen={onOpen} />
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+const Separator = () => (
+  <span aria-hidden="true" className="text-muted-foreground">
+    /
+  </span>
+);
+
+function Step({
+  crumb,
+  onOpen,
+}: {
+  crumb: Crumb | undefined;
+  onOpen(taskId: string | null): void;
+}) {
+  if (crumb === undefined) return null;
+  return (
+    <button
+      type="button"
+      onClick={() => onOpen(crumb.taskId)}
+      className="truncate rounded-sm text-muted-foreground outline-none hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {crumb.title}
+    </button>
+  );
+}

package/ui/src/board/board-data/board-data.ts

@@ -0,0 +1,195 @@
+import type {
+  BoardColumn,
+  BoardTask,
+  BoardTaskCreateInput,
+  BoardTaskFilter,
+  BoardTaskUpdateInput,
+  BoardView,
+} from "@contract/board.ts";
+import { ARCHIVE_COLUMN_ID } from "@contract/board.ts";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { threaded } from "@/board/board-stripes/board-stripes.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import type { BoardHandle, ColumnWithCards } from "./board-data.types.ts";
+
+export const boardKey = (boardId: string) => ["board", boardId] as const;
+
+/**
+ * Whether this filter narrows anything at all.
+ *
+ * ⚠️ **`Object.keys(...).length` is the wrong question**, because clearing a control writes the key
+ * back with `undefined` rather than removing it — `{ status: undefined }` has one key and filters
+ * nothing. Read that as "filtering" and the table says "nothing matches this filter" about a board
+ * nobody is filtering, and a write pays a refetch it does not owe.
+ */
+export function isFiltering(filter: Partial<BoardTaskFilter>): boolean {
+  return Object.values(filter).some((value) => value !== undefined);
+}
+
+/**
+ * Where a card lands when it is dropped between two neighbours.
+ *
+ * ⚠️ **The midpoint, and that is the whole reason `position` is a float.** With integers a drop
+ * would renumber every row below it, two people dropping at once would fight over rows neither
+ * touched, and a retry would move the card again. Here one card is written and nothing else is.
+ *
+ * The two edges are the cases a midpoint cannot express: dropped at the top there is nothing above,
+ * dropped at the bottom nothing below. `1` away from the neighbour keeps room for the next drop on
+ * that side without ever needing to renumber.
+ */
+export function positionBetween(above: number | undefined, below: number | undefined): number {
+  if (above === undefined && below === undefined) return 1;
+  if (above === undefined) return (below ?? 1) - 1;
+  if (below === undefined) return above + 1;
+  return (above + below) / 2;
+}
+
+/**
+ * The board as the views draw it: columns in their configured order, each carrying its own cards
+ * sorted by position.
+ *
+ * ⚠️ **A card whose status names no column is kept, in a column of its own at the end.** Dropping
+ * it would be the quiet failure: somebody renames a column, every card in it stops being drawn, and
+ * the screen looks like the cards were deleted. A visible stray column is ugly and true.
+ */
+export function columnsWithCards(view: BoardView): ColumnWithCards[] {
+  const byStatus = new Map<string, BoardTask[]>();
+  for (const task of view.tasks) {
+    const cards = byStatus.get(task.status);
+    if (cards === undefined) byStatus.set(task.status, [task]);
+    else cards.push(task);
+  }
+  // ⚠️ Threaded, not merely sorted: a subtask that sits in the SAME column as its parent follows
+  // it directly, and its own children follow that. One that sits elsewhere takes its ordinary place
+  // by position — there is no thread here for it to join (`board-stripes.ts`).
+  const sorted = (cards: BoardTask[]) => threaded(cards);
+  const known: ColumnWithCards[] = view.columns.map((column) => ({
+    column,
+    cards: sorted(byStatus.get(column.id) ?? []),
+  }));
+  const orphaned = [...byStatus.keys()].filter(
+    (status) => !view.columns.some((column) => column.id === status),
+  );
+  const strays: ColumnWithCards[] = orphaned.map((status) => ({
+    column: { id: status, title: status, terminal: false } satisfies BoardColumn,
+    cards: sorted(byStatus.get(status) ?? []),
+    unknown: true,
+  }));
+  return [...known, ...strays];
+}
+
+/**
+ * Everything a board view needs, from one query and three mutations.
+ *
+ * ⚠️ **Every write answers with the whole board, and the answer is written straight into the
+ * cache.** The alternative — patch the cached board from the row that changed — is a second place
+ * that decides what a column contains, and the two drift the first time the server does something
+ * the client did not predict. A move, for instance, also gives the card a new position when none
+ * was sent.
+ */
+export function useBoard(boardId: string, filter: Partial<BoardTaskFilter> = {}): BoardHandle {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const client = useQueryClient();
+  const key = boardKey(boardId);
+
+  /**
+   * ⚠️ **The filter belongs in the key, and `includeArchived` is only its most obvious member.**
+   * Without it every filtered view of a board shares one cache entry: switching a filter shows the
+   * previous selection's cards until the fetch returns, which reads as cards appearing and
+   * vanishing on their own.
+   *
+   * ⚠️ **The filter travels; it is not applied here.** A view that fetched everything and hid rows
+   * in the browser looks identical and is a different thing — `board-table.unit.tsx` therefore
+   * asserts the ARGUMENT of the second request, not just that a request happened.
+   */
+  const scoped = [...key, filter] as const;
+  const unfiltered = [...key, {}] as const;
+  const query = useQuery({
+    queryKey: scoped,
+    // `includeArchived` is spelled out because the provider takes the contract's OUTPUT type,
+    // where the default has already been applied and the field is therefore required.
+    queryFn: async () => await data.getBoard({ includeArchived: false, boardId, ...filter }),
+  });
+
+  /**
+   * Where a write's answer goes.
+   *
+   * ⚠️ **A write always answers with the board UNFILTERED, whatever this handle is filtered by.**
+   * All three write paths ask for the view with a fixed `{ boardId, includeArchived: false }`
+   * (`packages/intel/src/boards/boards.ts`), and none of the three inputs even carries a filter field.
+   * So the answer belongs in the unfiltered entry — and settling it into the filtered one would put
+   * every card into a view that asked for some of them, with no error, because the write succeeded.
+   *
+   * ⚠️ **The filtered entry is therefore invalidated rather than patched.** This answer cannot say
+   * what the filter now matches: a card that was moved out of it has to disappear, one moved into it
+   * has to appear, and only the server knows which. One extra request per write under a filter, and
+   * an unfiltered board — the ordinary case — still pays none.
+   */
+  const settle = (view: BoardView) => {
+    client.setQueryData(unfiltered, view);
+    if (isFiltering(filter)) void client.invalidateQueries({ queryKey: scoped });
+  };
+
+  const createTask = useMutation({
+    mutationFn: async (input: Omit<BoardTaskCreateInput, "boardId">) =>
+      await data.createBoardTask({ ...input, boardId }),
+    onSuccess: settle,
+  });
+  const updateTask = useMutation({
+    mutationFn: async (input: BoardTaskUpdateInput) => await data.updateBoardTask(boardId, input),
+    onSuccess: settle,
+  });
+  const setColumns = useMutation({
+    mutationFn: async (input: {
+      columns: BoardColumn[];
+      archiveVisible?: boolean;
+      idempotencyKey: string;
+    }) => await data.updateBoard({ boardId, ...input }),
+    onSuccess: settle,
+  });
+
+  /**
+   * ⚠️ **The archive column is said in the reader's own words, here and nowhere else.** It is
+   * derived and identical on every board, so unlike a configured column — shared data, written
+   * once in the creator's language (#675) — it is presentation. The server sends English for
+   * everything without a catalog; this is the one place a browser has one.
+   */
+  const columns = useMemo(
+    () =>
+      query.data === undefined
+        ? []
+        : columnsWithCards(query.data).map((entry) =>
+            entry.column.id === ARCHIVE_COLUMN_ID
+              ? { ...entry, column: { ...entry.column, title: i18n.t("board.column.archive") } }
+              : entry,
+          ),
+    [query.data, i18n],
+  );
+
+  return {
+    boardId,
+    title: query.data?.title ?? "",
+    // Until the board has answered there is nothing to hide, and `true` is what a board without a
+    // stored setting answers with anyway.
+    archiveVisible: query.data?.archiveVisible ?? true,
+    columns,
+    isPending: query.isPending,
+    isError: query.isError,
+    // ⚠️ One flag for all three writes. A screen that disabled only the button it just pressed
+    // would let a second drag start while the first is in flight, and the second answer would
+    // overwrite the first — with no error, because both succeeded.
+    isWriting: createTask.isPending || updateTask.isPending || setColumns.isPending,
+    createTask: async (input) => {
+      await createTask.mutateAsync(input);
+    },
+    updateTask: async (input) => {
+      await updateTask.mutateAsync(input);
+    },
+    setColumns: async (input) => {
+      await setColumns.mutateAsync(input);
+    },
+  };
+}