@anchrd/intel-ui 0.16.0 → 0.17.0

package/src/board/board-gantt/board-gantt.tsx

@@ -0,0 +1,286 @@
+import type { BoardStatus, BoardTask } from "@anchrd/intel-contract";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useMemo, useState } from "react";
+import { shownTasks } from "@/board/board-data/board-data.ts";
+import { type BoardItem, boardSchedule } from "@/board/board-items/board-items.ts";
+import { labelOf, toneOf } from "@/board/board-status/board-status.ts";
+import type { BoardViewProps } from "@/board/board-views/board-views.types.ts";
+import { ItemGantt } from "@/components/ui/item-gantt.tsx";
+import type { I18n } from "@/i18n/i18n.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import {
+  barDays,
+  dayWidth,
+  type GanttNode,
+  GanttRowHeight,
+  type GanttRow as GanttRowModel,
+  type GanttScale,
+  GanttScales,
+  ganttAxis,
+  ganttLinks,
+  ganttRows,
+  ganttTree,
+  ganttWrite,
+  linkGeometry,
+} from "./board-gantt.ts";
+
+/**
+ * The board as a timeline, with its dependencies drawn (anchrd/intel#293).
+ *
+ * ⚠️ It draws `boardSchedule` and nothing else, the same adapter the calendar reads. That is the ONE
+ * reading of a task as a dated thing (#286), and a Gantt that read `dueDate` for itself would be the
+ * second — the two would then disagree about the case that is actually subtle, a task with a start
+ * date and no due date, and they would disagree in a picture.
+ *
+ * ⚠️ A dependency is an arrow, and it means what the "Blocked" chip and the graph's thick edge mean:
+ * `board.blockedBy`, which is the status list's own `terminal` flag (anchrd/intel#311). Three
+ * surfaces, one definition. This screen would be the easiest place to invent a fourth, because an
+ * arrow is drawn from geometry and nothing about geometry knows what finished means.
+ */
+export function BoardGantt({ board, select, showArchived }: BoardViewProps) {
+  const i18n = useI18n();
+  const [scale, setScale] = useState<GanttScale>("weeks");
+  // ⚠️ Component state, not a module-level store. The Gantt from the registry kept its scroll and
+  // drag state in atoms declared at module scope, which two boards open at once would have shared —
+  // see the header of `item-gantt.tsx` for why that is worse here than it was in the calendar.
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
+
+  const tasks = useMemo(() => shownTasks(board.tasks, showArchived), [board.tasks, showArchived]);
+  const tree = useMemo(() => {
+    const schedule = boardSchedule(tasks, board.statuses, board.blockedBy);
+    const items = new Map<string, BoardItem>(schedule.items.map((item) => [item.id, item]));
+    return ganttTree(tasks, items);
+  }, [tasks, board.statuses, board.blockedBy]);
+
+  const rows = useMemo(() => ganttRows(tree.roots, collapsed), [tree.roots, collapsed]);
+  const links = useMemo(() => ganttLinks(rows, board.blockedBy), [rows, board.blockedBy]);
+
+  const width = dayWidth(scale);
+  const axis = useMemo(
+    () =>
+      ganttAxis(
+        rows.flatMap((row) => (row.bar === null ? [] : [row.bar])),
+        new Date(),
+        scale,
+        i18n.locale,
+      ),
+    [rows, scale, i18n.locale],
+  );
+
+  const chartRows = rows.map((row) => ({
+    id: row.task.id,
+    sidebar: (
+      <SidebarRow
+        row={row}
+        i18n={i18n}
+        statuses={board.statuses}
+        blockedBy={board.blockedBy}
+        onToggle={() =>
+          setCollapsed((current) => {
+            const next = new Set(current);
+            if (next.has(row.task.id)) next.delete(row.task.id);
+            else next.add(row.task.id);
+            return next;
+          })
+        }
+        onOpen={() => select(row.task.id)}
+      />
+    ),
+    bar:
+      row.bar === null
+        ? null
+        : {
+            ...barDays(row.bar, axis.start),
+            className: toneOf(row.task.status, board.statuses).dot,
+            derived: row.bar.derived,
+          },
+  }));
+
+  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="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">{i18n.t("board.gantt.scale")}</span>
+          <select
+            value={scale}
+            onChange={(event) => setScale(event.currentTarget.value as GanttScale)}
+            className="h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {GanttScales.map((option) => (
+              <option key={option} value={option}>
+                {i18n.t(`board.gantt.scale.${option}`)}
+              </option>
+            ))}
+          </select>
+        </label>
+        {links.hidden > 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {i18n.t("board.gantt.hiddenLinks", { count: links.hidden })}
+          </p>
+        ) : null}
+      </div>
+
+      {rows.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{i18n.t("board.gantt.nothingDated")}</p>
+      ) : (
+        <ItemGantt
+          rows={chartRows}
+          links={linkGeometry(links.links, rows, axis.start, width, GanttRowHeight)}
+          groups={axis.groups}
+          ticks={axis.ticks}
+          days={axis.days}
+          dayWidth={width}
+          rowHeight={GanttRowHeight}
+          today={axis.today}
+          labels={{
+            today: i18n.t("board.gantt.today"),
+            move: (id) => i18n.t("board.gantt.move", { task: titleOf(id, rows) }),
+            start: (id) => i18n.t("board.gantt.resizeStart", { task: titleOf(id, rows) }),
+            end: (id) => i18n.t("board.gantt.resizeEnd", { task: titleOf(id, rows) }),
+          }}
+          /**
+           * ⚠️ ONE `board_task_update` for a whole gesture, and none at all for a gesture that
+           * changed no date. `ganttWrite` answers `null` for a bar put back where it was picked up;
+           * sent anyway it would mint a version and stand in the audit as work that did not happen.
+           */
+          onEdit={(taskId, edit, deltaDays) => {
+            const row = rows.find((entry) => entry.task.id === taskId);
+            // A derived bar has no `item`, which is the same reason it has no grips: one gesture
+            // cannot write the five tasks it covers.
+            if (row === undefined || row.item === null) return;
+            const write = ganttWrite(row.task, row.item, edit, deltaDays);
+            if (write) board.update.mutate(write);
+          }}
+        />
+      )}
+
+      {/* ⚠️ The leftover column, and the DoD asks for it by name: a task with no date must not
+          vanish because a timeline has nowhere to put it. Whole subtrees, indented as they stand on
+          the board — a dateless epic with two dateless children is three tasks, and listing only the
+          epic would lose the other two just as quietly.
+
+          ⚠️ Nothing here is a drop target. The kanban learned that a lane which accepts a drop the
+          server refuses is worse than one that cannot be dropped on at all; the reason here is a
+          different one and it is the reason there is no drag between the two lists in either
+          direction. Dragging a bar into this list would mean CLEARING both dates, and a gesture that
+          deletes what somebody typed is not a gesture — it is the delete button, which is in the
+          panel and asks first. Dates are given in the panel too. */}
+      {tree.undated.length === 0 ? null : (
+        <section
+          aria-label={i18n.t("board.gantt.undated")}
+          className="max-h-48 shrink-0 overflow-y-auto rounded-lg border border-dashed bg-muted/30 p-3"
+        >
+          <h3 className="pb-1 text-xs font-medium text-muted-foreground">
+            {i18n.t("board.gantt.undatedCount", { count: countTasks(tree.undated) })}
+          </h3>
+          <ul className="flex flex-col">
+            {ganttRows(tree.undated, new Set()).map((row) => (
+              <li key={row.task.id} style={{ paddingInlineStart: `${row.depth * 1}rem` }}>
+                <button
+                  type="button"
+                  onClick={() => select(row.task.id)}
+                  className="inline-flex items-center gap-1.5 rounded py-0.5 text-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <span
+                    aria-hidden="true"
+                    className={`size-2 shrink-0 rounded-full ${toneOf(row.task.status, board.statuses).dot}`}
+                  />
+                  <span className="min-w-0 truncate">{row.task.title}</span>
+                  <span className="sr-only">{labelOf(row.task.status, board.statuses)}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function titleOf(taskId: string, rows: GanttRowModel[]): string {
+  return rows.find((row) => row.task.id === taskId)?.task.title ?? taskId;
+}
+
+function countTasks(nodes: GanttNode[]): number {
+  return nodes.reduce((total, node) => total + 1 + countTasks(node.children), 0);
+}
+
+/**
+ * One row's left column.
+ *
+ * ⚠️ Everything the bar and the arrows show is here in words as well. The chart is a picture, and a
+ * picture is the one thing a reader who cannot see it gets nothing from: the status, the dates and
+ * what the task waits for are read out here, so the arrows are a second way of saying something
+ * rather than the only way.
+ */
+function SidebarRow({
+  row,
+  i18n,
+  statuses,
+  blockedBy,
+  onToggle,
+  onOpen,
+}: {
+  row: GanttRowModel;
+  i18n: I18n;
+  statuses: BoardStatus[];
+  blockedBy(task: BoardTask): BoardTask[];
+  onToggle(): void;
+  onOpen(): void;
+}) {
+  const open = blockedBy(row.task);
+  const span = row.bar;
+  const date = (value: Date) => value.toLocaleDateString(i18n.locale);
+  return (
+    <>
+      <span style={{ width: `${row.depth * 0.75}rem` }} aria-hidden="true" className="shrink-0" />
+      {row.hasChildren ? (
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-expanded={!row.collapsed}
+          aria-label={i18n.t("board.toggleSubtasks", { task: row.task.title })}
+          className="shrink-0 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {row.collapsed ? (
+            <ChevronRight aria-hidden="true" className="size-4" />
+          ) : (
+            <ChevronDown aria-hidden="true" className="size-4" />
+          )}
+        </button>
+      ) : (
+        <span aria-hidden="true" className="size-4 shrink-0" />
+      )}
+      <span
+        aria-hidden="true"
+        className={`size-2 shrink-0 rounded-full ${toneOf(row.task.status, statuses).dot}`}
+      />
+      <button
+        type="button"
+        onClick={onOpen}
+        className="min-w-0 flex-1 truncate rounded text-left text-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {row.task.title}
+        <span className="sr-only">
+          {` — ${labelOf(row.task.status, statuses)}`}
+          {span === null
+            ? ""
+            : ` — ${i18n.t("board.gantt.spanLabel", {
+                start: date(span.startAt),
+                end: date(span.endAt),
+              })}`}
+          {open.length === 0
+            ? ""
+            : ` — ${i18n.t("board.gantt.waitsFor", {
+                tasks: open.map((task) => task.title).join(", "),
+              })}`}
+        </span>
+      </button>
+      {open.length > 0 ? (
+        <span className="shrink-0 rounded-md border border-destructive px-1 text-xs text-destructive">
+          {i18n.t("board.blocked")}
+        </span>
+      ) : null}
+    </>
+  );
+}

package/src/board/board-graph/board-graph.ts

@@ -0,0 +1,174 @@
+import type { BoardStatus, BoardTask } from "@anchrd/intel-contract";
+import { MultiDirectedGraph } from "graphology";
+import { toneOf } from "@/board/board-status/board-status.ts";
+import { resolveGraphColor } from "@/node-graph/node-graph.ts";
+
+/**
+ * The two things a board edge can be, and they must never look the same.
+ *
+ * ⚠️ `parentId` and `dependsOn` are different relations with different rules — one is the
+ * hierarchy and is checked for cycles on its own, the other is an order of work and is checked
+ * separately, and a subtask waiting on its own epic is legal precisely because they are not one
+ * graph (#285). Drawn identically, the picture would claim they are, and the one question a board
+ * graph exists to answer — what is waiting on what — would be unreadable.
+ */
+export type BoardEdgeKind = "parent" | "depends";
+
+// The task and everything under it. `null` is the whole board.
+export function subtreeOf(tasks: BoardTask[], rootId: string | null): BoardTask[] {
+  if (rootId === null) return tasks;
+  const kept = new Set([rootId]);
+  // Bounded by the contract's maximum depth of five, so a sweep per level is cheap and needs no
+  // ordering assumptions about the list.
+  for (let grew = true; grew; ) {
+    grew = false;
+    for (const task of tasks) {
+      if (task.parentId !== null && kept.has(task.parentId) && !kept.has(task.id)) {
+        kept.add(task.id);
+        grew = true;
+      }
+    }
+  }
+  return tasks.filter((task) => kept.has(task.id));
+}
+
+// How deep a task sits, for the layout. Counted against the tasks actually drawn, so a subtree
+// filter puts its own root on the top row instead of indenting it by where it came from.
+function depthsOf(tasks: BoardTask[]): Map<string, number> {
+  const byId = new Map(tasks.map((task) => [task.id, task]));
+  const depths = new Map<string, number>();
+  const depthOf = (task: BoardTask, seen: Set<string>): number => {
+    const known = depths.get(task.id);
+    if (known !== undefined) return known;
+    const parent = task.parentId === null ? undefined : byId.get(task.parentId);
+    // A cycle cannot be written (#285); if one ever were, this stops rather than recursing.
+    const depth = parent === undefined || seen.has(parent.id) ? 0 : depthOf(parent, seen) + 1;
+    seen.add(task.id);
+    depths.set(task.id, depth);
+    return depth;
+  };
+  for (const task of tasks) depthOf(task, new Set([task.id]));
+  return depths;
+}
+
+export interface BoardGraphLabels {
+  parent: string;
+  depends: string;
+}
+
+/**
+ * The board as Sigma draws it (anchrd/intel#286).
+ *
+ * ⚠️ Laid out by depth rather than on a spiral like the relation graph. A board's edges are mostly
+ * `parentId`, and a spiral scatters a parent and its children across the circle — the hierarchy is
+ * then present in the data and invisible in the picture. Rows by depth put it back, and the
+ * dependency edges become what they are: the lines that cut across.
+ *
+ * ⚠️ An edge is dropped when either end is not drawn, never drawn to an invented node. Under a
+ * subtree filter a dependency regularly points outside the subtree, and a placeholder for it would
+ * put a task on screen that the filter was asked to leave off.
+ */
+export function createBoardGraph(
+  tasks: BoardTask[],
+  statuses: BoardStatus[],
+  blockedIds: ReadonlySet<string>,
+  labels: BoardGraphLabels,
+): MultiDirectedGraph {
+  const graph = new MultiDirectedGraph();
+  const structure = resolveGraphColor("--border", "--muted-foreground");
+  const dependency = resolveGraphColor("--destructive", "--foreground");
+
+  /**
+   * ⚠️ One node per id, however often the list names it (anchrd/intel#321).
+   *
+   * `graph.addNode` refuses a repeated key the way `addDirectedEdgeWithKey` does — and it runs
+   * first, so a board carrying two tasks with one id threw `UsageGraphError` before a single edge
+   * was reached and took this view off the screen for everybody looking at that board.
+   *
+   * ⚠️ Through the app nothing arrives here twice any more: the bundle import refuses such a
+   * document, and `orderedTasks` folds a stored one before any view sees it. It stays because this
+   * function is EXPORTED and takes whatever list it is handed — a view may not be the thing that
+   * turns odd data into a blank screen, the same reason the repeated dependency below is folded
+   * rather than trusted (anchrd/intel#318). The FIRST mention wins, which is the entry
+   * `orderedTasks` keeps, so the graph and the lanes cannot disagree about which of the pair is on
+   * the board.
+   *
+   * ⚠️ Folded here rather than skipped at `addNode`, because the row widths below are counted from
+   * this list too. A repeat that was merely not drawn would leave its level one card wider than it
+   * is, and every node on that level would sit off the axis the layout centres on.
+   */
+  const drawn = new Set<string>();
+  const nodes = tasks.filter((task) => {
+    if (drawn.has(task.id)) return false;
+    drawn.add(task.id);
+    return true;
+  });
+  const depths = depthsOf(nodes);
+
+  // ⚠️ Counted first, placed second, so every row can be CENTRED. Laid out left to right from zero,
+  // a level of six and a level of one form a wedge that reads as a hierarchy which is not there —
+  // and Sigma rescales to the bounding box, so one wide level squashes every other one flat.
+  const widths = new Map<number, number>();
+  for (const task of nodes) {
+    const depth = depths.get(task.id) ?? 0;
+    widths.set(depth, (widths.get(depth) ?? 0) + 1);
+  }
+  const placed = new Map<number, number>();
+
+  for (const task of nodes) {
+    const depth = depths.get(task.id) ?? 0;
+    const column = placed.get(depth) ?? 0;
+    placed.set(depth, column + 1);
+    graph.addNode(task.id, {
+      label: task.title,
+      x: (column - ((widths.get(depth) ?? 1) - 1) / 2) * 2.2,
+      // Down the screen as depth grows, which is the direction a hierarchy is read in.
+      y: -depth * 2.4,
+      // A blocked task is bigger as well as ringed by its edges, so it is findable in a graph one
+      // is looking at from far enough away that the incoming arrows are a tangle.
+      size: blockedIds.has(task.id) ? 9 : 7,
+      // ⚠️ The status, resolved from the SAME ramp the lanes and the calendar use. Sigma paints to
+      // a canvas and cannot read a class, so the token is turned into sRGB here — and where a
+      // theme has no such token, `undefined` leaves Sigma its own default rather than putting an
+      // Anchrd colour into a customer's board.
+      color: resolveGraphColor(toneOf(task.status, statuses).token, "--foreground"),
+    });
+  }
+
+  for (const task of nodes) {
+    if (task.parentId !== null && drawn.has(task.parentId)) {
+      graph.addDirectedEdgeWithKey(`parent:${task.id}`, task.parentId, task.id, {
+        label: labels.parent,
+        // Thin, unlabelled by an arrowhead, in the border colour: structure is the paper the work
+        // is drawn on, not a step in it.
+        type: "line",
+        size: 1,
+        ...(structure ? { color: structure } : {}),
+      });
+    }
+    /**
+     * ⚠️ One arrow per pair, however often the list names it (anchrd/intel#318).
+     *
+     * The key is minted from the pair and graphology REFUSES a second one, so a task naming the
+     * same dependency twice threw `UsageGraphError` out of this loop and took the graph view of
+     * that board off the screen — for everybody looking at it, not only for whoever wrote it. The
+     * write path refuses a repeat now and a stored one is folded away on read, so nothing arriving
+     * through Intel carries one; this stays because a view may not be the thing that turns odd data
+     * into a blank screen, and because the same reading is already in `ganttLinks` (#293): waiting
+     * twice for a task is waiting for it once, and the second arrow would draw nothing extra.
+     */
+    const drawnDependencies = new Set<string>();
+    for (const dependency_ of task.dependsOn) {
+      if (!drawn.has(dependency_) || drawnDependencies.has(dependency_)) continue;
+      drawnDependencies.add(dependency_);
+      // From what is waited FOR to what waits, so the arrows run the way the work does.
+      graph.addDirectedEdgeWithKey(`depends:${task.id}:${dependency_}`, dependency_, task.id, {
+        label: labels.depends,
+        type: "arrow",
+        size: 2.5,
+        ...(dependency ? { color: dependency } : {}),
+      });
+    }
+  }
+  return graph;
+}

package/src/board/board-graph/board-graph.tsx

@@ -0,0 +1,168 @@
+import { ControlsContainer, SigmaContainer, useCamera, useRegisterEvents } from "@react-sigma/core";
+import { LocateFixed, Minus, Plus } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { EdgeArrowProgram, EdgeRectangleProgram } from "sigma/rendering";
+import { shownTasks } from "@/board/board-data/board-data.ts";
+import { toneOf } from "@/board/board-status/board-status.ts";
+import type { BoardViewProps } from "@/board/board-views/board-views.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { resolveGraphColor } from "@/node-graph/node-graph.ts";
+import { createBoardGraph, subtreeOf } from "./board-graph.ts";
+
+function GraphEvents({ select }: { select(taskId: string): void }) {
+  const registerEvents = useRegisterEvents();
+  useEffect(() => {
+    registerEvents({ clickNode: ({ node }) => select(node) });
+  }, [registerEvents, select]);
+  return null;
+}
+
+function GraphControls({ labels }: { labels: { in: string; out: string; fit: string } }) {
+  const camera = useCamera({ duration: 180, factor: 1.5 });
+  const controls = [
+    { label: labels.in, action: camera.zoomIn, icon: Plus },
+    { label: labels.out, action: camera.zoomOut, icon: Minus },
+    { label: labels.fit, action: camera.reset, icon: LocateFixed },
+  ];
+  return (
+    <ControlsContainer className="!m-4 flex overflow-hidden rounded-lg border bg-card shadow-lg">
+      {controls.map(({ label, action, icon: Icon }) => (
+        <button
+          key={label}
+          type="button"
+          aria-label={label}
+          onClick={() => action()}
+          className="grid size-9 place-items-center border-r text-card-foreground outline-none last:border-r-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Icon aria-hidden="true" className="size-4" />
+        </button>
+      ))}
+    </ControlsContainer>
+  );
+}
+
+/**
+ * The board as a graph (anchrd/intel#286).
+ *
+ * ⚠️ On the Sigma stack the relation graph already stands on — same container, same controls, same
+ * token-resolving colour helper. A second renderer for a second kind of graph would be two things
+ * to keep looking like Intel, and the first customer theme would separate them.
+ */
+export function BoardGraph({ board, select, showArchived }: BoardViewProps) {
+  const i18n = useI18n();
+  const [root, setRoot] = useState<string>("");
+
+  const tasks = useMemo(() => shownTasks(board.tasks, showArchived), [board.tasks, showArchived]);
+  // Only tasks that have something under them are worth offering: filtering to a leaf draws one
+  // node, which is a picture of nothing.
+  const roots = useMemo(
+    () => tasks.filter((task) => (board.childrenOf.get(task.id) ?? []).length > 0),
+    [tasks, board.childrenOf],
+  );
+  const drawn = useMemo(
+    () => subtreeOf(tasks, root === "" || !tasks.some((task) => task.id === root) ? null : root),
+    [tasks, root],
+  );
+  const blockedIds = useMemo(
+    () => new Set(drawn.filter((task) => board.blockedBy(task).length > 0).map((task) => task.id)),
+    [drawn, board.blockedBy],
+  );
+  const graph = useMemo(
+    () =>
+      createBoardGraph(drawn, board.statuses, blockedIds, {
+        parent: i18n.t("board.graph.parentEdge"),
+        depends: i18n.t("board.graph.dependsEdge"),
+      }),
+    [drawn, board.statuses, blockedIds, i18n],
+  );
+
+  const label = resolveGraphColor("--foreground");
+  const edgeLabel = resolveGraphColor("--muted-foreground", "--foreground");
+
+  return (
+    <section aria-label={i18n.t("board.view.graph")} className="flex min-h-0 flex-1 flex-col">
+      <div className="flex flex-wrap items-center gap-4 border-b px-6 py-3">
+        <label className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">{i18n.t("board.graph.subtree")}</span>
+          <select
+            value={root}
+            onChange={(event) => setRoot(event.currentTarget.value)}
+            className="h-8 max-w-56 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <option value="">{i18n.t("board.graph.wholeBoard")}</option>
+            {roots.map((task) => (
+              <option key={task.id} value={task.id}>
+                {task.title}
+              </option>
+            ))}
+          </select>
+        </label>
+        {/* ⚠️ The legend is not decoration: it is what turns a colour into a status and a line into
+            a relation for a reader who has not been told. Both edge kinds are in it, because
+            telling them apart is the whole reason there are two. */}
+        <ul className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+          {board.statuses.map((status) => (
+            <li key={status.id} className="flex items-center gap-1.5">
+              <span
+                aria-hidden="true"
+                className={`size-2 rounded-full ${toneOf(status.id, board.statuses).dot}`}
+              />
+              {status.label}
+            </li>
+          ))}
+          <li className="flex items-center gap-1.5">
+            <span aria-hidden="true" className="h-px w-5 bg-border" />
+            {i18n.t("board.graph.parentEdge")}
+          </li>
+          <li className="flex items-center gap-1.5">
+            <span aria-hidden="true" className="h-0.5 w-5 bg-destructive" />
+            {i18n.t("board.graph.dependsEdge")}
+          </li>
+        </ul>
+      </div>
+      <div className="min-h-0 flex-1 bg-muted/20">
+        {drawn.length === 0 ? (
+          <div className="grid h-full place-items-center p-8 text-sm text-muted-foreground">
+            {i18n.t("board.noTasks")}
+          </div>
+        ) : (
+          <SigmaContainer
+            // ⚠️ No `key`, deliberately. `SigmaContainer` rebuilds its instance whenever the `graph`
+            // prop changes and carries the previous camera state across while doing it, so a new
+            // graph is all a changed subtree filter needs — the same way the relation graph passes
+            // it (`node-graph.tsx`). A key would remount the component instead, which skips that
+            // restore and throws away the reader's zoom and pan on every added or deleted task.
+            graph={graph}
+            className="h-full w-full"
+            settings={{
+              labelRenderedSizeThreshold: 4,
+              renderEdgeLabels: true,
+              edgeLabelSize: 10,
+              // ⚠️ Sigma fits the NODES to the canvas and knows nothing about how wide their labels
+              // are, so the outermost task of a level always has its name half outside the frame.
+              // The padding is what the labels stand in.
+              stagePadding: 90,
+              // ⚠️ Registered by name rather than left to the defaults: the two edge kinds are told
+              // apart by whether they carry an arrowhead, and an unregistered `type` silently falls
+              // back to the default program — which would draw both of them the same and undo the
+              // one thing this graph has to get right.
+              edgeProgramClasses: { line: EdgeRectangleProgram, arrow: EdgeArrowProgram },
+              defaultEdgeType: "line",
+              ...(label ? { labelColor: { color: label } } : {}),
+              ...(edgeLabel ? { edgeLabelColor: { color: edgeLabel } } : {}),
+            }}
+          >
+            <GraphEvents select={select} />
+            <GraphControls
+              labels={{
+                in: i18n.t("node.graphZoomIn"),
+                out: i18n.t("node.graphZoomOut"),
+                fit: i18n.t("node.graphReset"),
+              }}
+            />
+          </SigmaContainer>
+        )}
+      </div>
+    </section>
+  );
+}