@anchrd/intel 0.59.0

package/ui/src/board/board-open-task/board-open-task.ts

@@ -0,0 +1,32 @@
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useCallback } from "react";
+import { openTaskFrom } from "@/router/selection-search.ts";
+
+/**
+ * Which card is open, and the one way to change that.
+ *
+ * ⚠️ **One truth for two places.** The title row and the panel both open cards, and they are
+ * rendered in different subtrees: the row above the content, the panel inside it. Written twice,
+ * one of them would eventually push where the other replaces, and the back button would behave
+ * differently depending on which control was used.
+ */
+export function useOpenTask(): { openId: string | null; open(taskId: string | null): void } {
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+
+  const open = useCallback(
+    (taskId: string | null) =>
+      void navigate({
+        to: ".",
+        // ⚠️ **Closing REPLACES, opening pushes.** Opening a card is a step somebody took and the
+        // back button must undo it; closing is the undo itself. Pushed as well, the history holds
+        // board → card → board, and one press of Back re-opens the card that was just closed.
+        replace: taskId === null,
+        search: (previous: Record<string, unknown>) =>
+          taskId === null ? { ...previous, task: undefined } : { ...previous, task: taskId },
+      }),
+    [navigate],
+  );
+
+  return { openId: openTaskFrom(search), open };
+}

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

@@ -0,0 +1,259 @@
+import type { BoardTaskFilter } from "@contract/board.ts";
+import type { Node } from "@contract/node.ts";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouterState } from "@tanstack/react-router";
+import type { ColumnVisibilityState } from "@tanstack/react-table";
+import { Settings } from "lucide-react";
+import { Suspense, useState } from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { ViewMenu } from "@/app/view-menu/view-menu.tsx";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { BoardKanban } from "@/board/board-kanban/board-kanban.tsx";
+import { useOpenTask } from "@/board/board-open-task/board-open-task.ts";
+import { BoardSettings } from "@/board/board-settings/board-settings.tsx";
+import { BoardTable } from "@/board/board-table/board-table.tsx";
+import { BoardTaskDocument } from "@/board/board-task/board-task.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { NodeEditor } from "@/node-editor/node-editor.tsx";
+import { ResolvedNamesProvider } from "@/resolved-names/resolved-names.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { type IntelView, viewOf } from "@/router/selection-search.ts";
+
+// ⚠️ The kanban stands first because the first view is the DEFAULT, and the default is what the
+// absence of the `view` parameter means (`selection-search.ts`). A board opened from a plain link
+// is a kanban, exactly as it was before its state moved into the address (#818).
+const BoardViews: readonly IntelView[] = ["kanban", "table"];
+
+/**
+ * A board on the node screen, beside the folder, the table and the editor (D66, #376).
+ *
+ * ⚠️ The whole board is ONE answer. `board_get` returns the columns and every card in them, and the
+ * views below read that one object — no view fetches per card, per column, or on scroll.
+ *
+ * ⚠️ **The controls live in the title line, not in a row of their own** (#363). `title-actions` puts
+ * them before the three-dot menu, which is where everything that acts on THIS thing already sits —
+ * a third bar above the board would be a permanent row for something nobody uses twice a minute.
+ */
+export function BoardPanel({ node }: { node: Node }) {
+  const i18n = useI18n();
+  /**
+   * ⚠️ **In the address, not in this component** (#818). It used to be `useState` here, and that was
+   * the second of the two switches the ticket abolishes: it looked like the editor/graph switch and
+   * behaved differently — a table somebody was reading could not be linked to, and a reload put
+   * them back on the kanban. The two now answer to one mechanism, and this is the half that had to
+   * move for that sentence to be true.
+   */
+  const view = useRouterState({
+    select: (current) => viewOf(current.location.search, BoardViews),
+  });
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  // Which columns the table shows outlives the trip through the kanban — see `BoardTable`.
+  const [hidden, setHidden] = useState<ColumnVisibilityState>({});
+  /**
+   * ⚠️ **The filter lives HERE and not in the table, since #671.** Opening a card unmounts the
+   * table, so a filter kept down there was silently thrown away by the one control that is the only
+   * way back out. It does NOT reach the kanban: that view reads this component's own unfiltered
+   * board answer, a different query — which is what kept the filter out of it before, and still is.
+   */
+  const [filter, setFilter] = useState<Partial<BoardTaskFilter>>({});
+  const board = useBoard(node.id);
+  const { openId, open } = useOpenTask();
+
+  /**
+   * ⚠️ Collected HERE and nowhere lower (#700). This component holds the one unfiltered board
+   * answer that both views and the open card read, so the ids are already all in one place. A hook
+   * per card would open one request per row for a handful of distinct people, and a hook per view
+   * would ask twice for the same names when somebody switches between them.
+   */
+  const assigneeIds = (board.columns ?? []).flatMap((column) =>
+    column.cards.map((card) => card.assigneeId),
+  );
+
+  return (
+    <ResolvedNamesProvider ids={assigneeIds}>
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <ActionSlot name="title-actions">
+          {/* ⚠️ **Gone while a card is open.** The switch chooses between two views OF THE BOARD, and
+            an open card is neither — left standing it would name a view nobody is looking at and
+            navigate away from the card when used, which is a control that lies twice. */}
+          {openId === null ? <ViewMenu views={BoardViews} /> : null}
+          {/* ⚠️ Gone while a card is open, like the view switch above it. It configures the BOARD,
+            and the line it sits in belongs to the card then — a control that acts on something the
+            reader is not looking at is worse than a missing one, because it looks like it acts on
+            what they see. */}
+          {openId === null ? (
+            <button
+              type="button"
+              aria-label={i18n.t("board.settings.open")}
+              onClick={() => setSettingsOpen(true)}
+              className="inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <Settings aria-hidden="true" className="size-4" />
+            </button>
+          ) : null}
+        </ActionSlot>
+        {/* ⚠️ Mounted only while open, so its draft is seeded once per opening. Handed an `open` flag
+          instead, a draft re-seeded from the board would lose what somebody typed the moment a
+          write from elsewhere answers. */}
+        {settingsOpen ? (
+          <BoardSettings board={board} onClose={() => setSettingsOpen(false)} />
+        ) : null}
+        {openId === null ? (
+          view === "kanban" ? (
+            <KanbanView board={board} onOpen={open} />
+          ) : (
+            <TableView
+              nodeId={node.id}
+              hidden={hidden}
+              onHidden={setHidden}
+              onOpen={open}
+              filter={filter}
+              onFilter={setFilter}
+            />
+          )
+        ) : (
+          // ⚠️ Drawn from the panel's own UNFILTERED board answer, which is also what the kanban
+          // reads — the open task is not a second read of the card. ⚠️ It is NOT the table's answer:
+          // the table keeps its own filtered query, so a card filtered out of the table still opens
+          // from a link. What this cannot find is a card that is gone, or one on another board.
+          <OpenTask board={board} taskId={openId} onOpen={open} />
+        )}
+      </div>
+    </ResolvedNamesProvider>
+  );
+}
+
+function KanbanView({
+  board,
+  onOpen,
+}: {
+  board: ReturnType<typeof useBoard>;
+  onOpen(taskId: string): void;
+}) {
+  return <BoardKanban board={board} onOpen={onOpen} />;
+}
+
+/**
+ * One card, opened.
+ *
+ * ⚠️ **The body is the node's own document and is the ONE thing this screen reads separately.** The
+ * head and the link list come out of `board_get`; the markdown text does not live in that answer at
+ * all — a card's text is a node version, and `board_get` returns cards, not documents.
+ */
+function OpenTask({
+  board,
+  taskId,
+  onOpen,
+}: {
+  board: ReturnType<typeof useBoard>;
+  taskId: string;
+  onOpen(taskId: string | null): void;
+}) {
+  const i18n = useI18n();
+  const task = board.columns.flatMap((entry) => entry.cards).find((card) => card.id === taskId);
+
+  if (board.isPending) {
+    return <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
+  }
+  // ⚠️ Back to the board rather than an empty screen. The board answer here is unfiltered, so a
+  // card missing from it is a card that is gone, archived out of view, or on a different board —
+  // a stale link and a deleted card look exactly the same from here, and both want the same way out.
+  if (task === undefined) {
+    return (
+      <div className="flex flex-col items-start gap-3 p-6">
+        <p className="text-sm text-muted-foreground">{i18n.t("board.taskGone")}</p>
+        <button
+          type="button"
+          onClick={() => onOpen(null)}
+          className="rounded-md border px-3 py-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {board.title}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <BoardTaskDocument
+      task={task}
+      board={board}
+      onOpen={onOpen}
+      body={<TaskBody nodeId={task.id} />}
+    />
+  );
+}
+
+/**
+ * ⚠️ **The filter is handed DOWN since #671, and that is safe for a different reason than it looks.**
+ * It used to live here so that unmounting the table took it along — until opening a card, which
+ * also unmounts the table, threw the filter away through the one control that is the way back out.
+ * It sits in the panel now, and the kanban still shows everything: that view reads the panel's own
+ * unfiltered query, a different key, so no filtered answer ever reaches it. Measured, not argued —
+ * after a switch there is no new request at all, and `leaves the kanban unfiltered after a filter
+ * was set in the table` renders the whole panel, so it exercises exactly this arrangement.
+ */
+function TableView({
+  nodeId,
+  hidden,
+  onHidden,
+  onOpen,
+  filter,
+  onFilter,
+}: {
+  nodeId: string;
+  hidden: ColumnVisibilityState;
+  onHidden(next: ColumnVisibilityState): void;
+  onOpen(taskId: string): void;
+  filter: Partial<BoardTaskFilter>;
+  onFilter(next: Partial<BoardTaskFilter>): void;
+}) {
+  const board = useBoard(nodeId, filter);
+  // ⚠️ Sorting and grouping live INSIDE the table since #670 — they are the table's own state and
+  // never travel. The column choice and the filter are handed DOWN from the panel because both have
+  // to outlive this component; the kanban stays unfiltered because it reads a different query.
+  return (
+    <BoardTable
+      board={board}
+      filter={filter}
+      onFilter={onFilter}
+      hidden={hidden}
+      onHidden={onHidden}
+      onOpen={onOpen}
+    />
+  );
+}
+
+/**
+ * The card's markdown text — the node's own document, in the editor every other document uses.
+ *
+ * ⚠️ **A second read, and the only one on this screen.** `board_get` answers with cards, not with
+ * documents: a card's text is a node version and is not in that answer at all. Building a second
+ * editor here instead would be the more expensive mistake — one text surface that saves, links and
+ * renders differently from the one next door.
+ */
+function TaskBody({ nodeId }: { nodeId: string }) {
+  const i18n = useI18n();
+  const { data } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const document = useQuery({
+    queryKey: ["node", nodeId],
+    queryFn: () => data.getNode(nodeId),
+  });
+
+  if (document.data === undefined) {
+    return <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
+  }
+  return (
+    <Suspense
+      fallback={<p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>}
+    >
+      <NodeEditor
+        key={nodeId}
+        data={data}
+        document={document.data}
+        i18n={i18n}
+        onSaved={(saved) => queryClient.setQueryData(["node", nodeId], saved)}
+      />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,226 @@
+import { ARCHIVE_COLUMN_ID, type BoardColumn, DEFAULT_COLUMN_COLOR } from "@contract/board.ts";
+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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * A board's basic settings: its columns, and whether the archive is drawn.
+ *
+ * ⚠️ **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 — there is nothing to patch a position with. So
+ * the dialog holds a draft and sends it on save; a control that wrote per keystroke would write a
+ * version per letter.
+ *
+ * ⚠️ **The archive column is not in this list and cannot be.** It is derived from `archived_at`
+ * (D68) and the server refuses a configured column that claims its id. What the switch below
+ * changes is only whether it is drawn.
+ */
+export function BoardSettings({ 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 rather
+  // than handing it an `open` flag: a draft re-seeded from a prop would lose what somebody typed
+  // the moment the board answers a write from somewhere else.
+  const [columns, setColumns] = useState<BoardColumn[]>(() =>
+    board.columns
+      .filter((entry) => entry.unknown !== true && entry.column.id !== ARCHIVE_COLUMN_ID)
+      .map((entry) => entry.column),
+  );
+  const [archiveVisible, setArchiveVisible] = useState(board.archiveVisible);
+  const [failed, setFailed] = useState(false);
+
+  /**
+   * How many cards each column carries, taken once from the board.
+   *
+   * ⚠️ **A column with cards is not removable here** — `destructive.md`: *verweigern schlägt
+   * kaskadieren*. Removed, its cards do not vanish from the database, but their `status` names a
+   * column nobody configured any more: they fall into the stray column, and nobody was asked where
+   * they should go. That is the same cascade one level delayed.
+   */
+  const cardsIn = new Map(board.columns.map((entry) => [entry.column.id, entry.cards.length]));
+
+  const move = (index: number, by: -1 | 1) => {
+    const next = [...columns];
+    const target = index + by;
+    const a = next[index];
+    const b = next[target];
+    if (a === undefined || b === undefined) return;
+    next[index] = b;
+    next[target] = a;
+    setColumns(next);
+  };
+
+  const save = () => {
+    setFailed(false);
+    void board
+      .setColumns({
+        columns: columns.map((column) => ({ ...column, title: column.title.trim() })),
+        archiveVisible,
+        idempotencyKey: crypto.randomUUID(),
+      })
+      .then(onClose)
+      .catch(() => setFailed(true));
+  };
+
+  // ⚠️ An empty title would be refused by the contract, and a list with none at all by the server.
+  // Saying so before the call is the difference between a form and a guessing game.
+  const titles = columns.map((column) => column.title.trim());
+  /**
+   * ⚠️ **Two columns with the same NAME are refused too**, although the server only refuses
+   * duplicate ids. An id nobody sees may repeat without confusing anybody; a name is what a person
+   * reads, and two columns called the same thing are two columns nobody can tell apart — on the
+   * board, in the filter, and in this very dialog.
+   */
+  const duplicate = titles.find((title, index) => titles.indexOf(title) !== index);
+  const incomplete =
+    columns.length === 0 || titles.some((title) => title.length === 0) || duplicate !== undefined;
+
+  return (
+    <Dialog open onOpenChange={(next) => (next ? undefined : onClose())}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{i18n.t("board.settings.title")}</DialogTitle>
+          <DialogDescription>{i18n.t("board.settings.description")}</DialogDescription>
+        </DialogHeader>
+
+        <ul className="space-y-2">
+          {columns.map((column, index) => (
+            <li key={column.id} className="flex items-center gap-2">
+              {/* ⚠️ A free colour, not a palette (Jack's decision 2026-08-22) — see the contract
+                  for why that is affordable here: the value only ever fills a dot.
+                  ⚠️ The native `input type="color"`, not a built one. It is the platform's own
+                  picker, it works with a keyboard and a screen reader without anybody writing that
+                  part, and "kaufen statt bauen" is the rule this repository states for exactly this
+                  case. */}
+              <input
+                type="color"
+                value={column.color ?? DEFAULT_COLUMN_COLOR}
+                aria-label={i18n.t("board.settings.columnColor", { column: column.title })}
+                onChange={(event) => {
+                  const next = [...columns];
+                  next[index] = { ...column, color: event.target.value };
+                  setColumns(next);
+                }}
+                className="size-7 shrink-0 cursor-pointer rounded-md border bg-background outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <input
+                value={column.title}
+                aria-label={i18n.t("board.settings.columnName", { column: column.title })}
+                onChange={(event) => {
+                  const next = [...columns];
+                  next[index] = { ...column, title: event.target.value };
+                  setColumns(next);
+                }}
+                className="min-w-0 flex-1 rounded-md border bg-background px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <button
+                type="button"
+                aria-label={i18n.t("board.settings.moveUp", { column: column.title })}
+                disabled={index === 0}
+                onClick={() => move(index, -1)}
+                className="rounded-md p-1 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30"
+              >
+                <ChevronUp aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("board.settings.moveDown", { column: column.title })}
+                disabled={index === columns.length - 1}
+                onClick={() => move(index, 1)}
+                className="rounded-md p-1 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30"
+              >
+                <ChevronDown aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={
+                  (cardsIn.get(column.id) ?? 0) > 0
+                    ? // ⚠️ No count in this sentence. `packages/intel/ui/CLAUDE.md`: a sentence that
+                      // carries a number has to read correctly at ONE, and "1 card(s)" is a written
+                      // admission that it does not. The number is on the board anyway; here what
+                      // matters is that the column is not empty.
+                      i18n.t("board.settings.removeBlocked", { column: column.title })
+                    : i18n.t("board.settings.remove", { column: column.title })
+                }
+                disabled={(cardsIn.get(column.id) ?? 0) > 0}
+                onClick={() => setColumns(columns.filter((entry) => entry.id !== column.id))}
+                className="rounded-md p-1 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30"
+              >
+                <X aria-hidden="true" className="size-4" />
+              </button>
+            </li>
+          ))}
+        </ul>
+
+        <button
+          type="button"
+          onClick={() =>
+            setColumns([
+              ...columns,
+              {
+                id: crypto.randomUUID(),
+                title: i18n.t("board.settings.newColumn"),
+                terminal: false,
+              },
+            ])
+          }
+          className="self-start rounded-md px-2 py-1 text-sm text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {i18n.t("board.settings.addColumn")}
+        </button>
+
+        <label className="flex items-start gap-3 border-t pt-3 text-sm">
+          <input
+            type="checkbox"
+            checked={archiveVisible}
+            onChange={(event) => setArchiveVisible(event.target.checked)}
+            className="mt-1"
+          />
+          <span>
+            {i18n.t("board.settings.showArchive")}
+            <span className="block text-xs text-muted-foreground">
+              {i18n.t("board.settings.showArchiveHint")}
+            </span>
+          </span>
+        </label>
+
+        {duplicate === undefined ? null : (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("board.settings.duplicateName", { column: duplicate })}
+          </p>
+        )}
+        {failed ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("board.settings.failed")}
+          </p>
+        ) : null}
+
+        <DialogFooter>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.cancel")}
+          </button>
+          <button
+            type="button"
+            disabled={incomplete || board.isWriting}
+            onClick={save}
+            className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {i18n.t("common.save")}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { BoardColumn } from "@contract/board.ts";
+import { ARCHIVE_COLUMN_ID } from "@contract/board.ts";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * The column a card sits in, and the way to move it.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both offer this, and the archive
+ * is an entry in it: written twice, one of them would eventually keep an entry the other dropped,
+ * and a reader would find a card archivable from one screen and not from the other. Exactly the
+ * reason `AssigneeChip` was pulled out beside it.
+ */
+export function StatusChip({
+  status,
+  title,
+  columns,
+  write,
+}: {
+  status: string;
+  title: string;
+  columns: BoardColumn[];
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
+  const i18n = useI18n();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        // ⚠️ The VALUE first, then what pressing it does. A label that says only "move to a column"
+        // replaces the one thing the pill is there to show, and that fact then exists on screen and
+        // nowhere else.
+        aria-label={`${title}, ${i18n.t("board.moveTo")}`}
+        className="shrink-0 rounded-full border px-2.5 py-0.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {title}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {/* ⚠️ Where a card SITS is a move, not a field edit: the server computes a position and
+            checks the cycles for it. Everything else on these screens is a plain change. */}
+        <DropdownMenuRadioGroup value={status} onValueChange={(next) => write({ status: next })}>
+          {columns.map((entry) => (
+            <DropdownMenuRadioItem key={entry.id} value={entry.id}>
+              {entry.title}
+            </DropdownMenuRadioItem>
+          ))}
+          <DropdownMenuRadioItem value={ARCHIVE_COLUMN_ID}>
+            {i18n.t("board.column.archive")}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}