@anchrd/intel-ui 0.40.0 → 0.41.0

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

@@ -1,20 +1,19 @@
 import type { BoardTaskFilter } from "@anchrd/intel-contract/board";
 import type { Node } from "@anchrd/intel-contract/node";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
 import type { ColumnVisibilityState } from "@tanstack/react-table";
 import { KanbanSquare, Settings, Table2 } from "lucide-react";
-import { Suspense, useCallback, useState } from "react";
+import { Suspense, useState } from "react";
 import { ActionSlot } from "@/app/action-slot/action-slot.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 { useIntelRouterContext } from "@/router/router-context.ts";
-import { openTaskFrom } from "@/router/selection-search.ts";
 
 type View = "kanban" | "table";
 
@@ -47,31 +46,7 @@ export function BoardPanel({ node }: { node: Node }) {
    */
   const [filter, setFilter] = useState<Partial<BoardTaskFilter>>({});
   const board = useBoard(node.id);
-  const search = useSearch({ strict: false });
-  const navigate = useNavigate();
-  const openId = openTaskFrom(search);
-
-  /**
-   * ⚠️ **The address, not a piece of state.** A task opened into component state would have no link
-   * and no back button — the browser's back would leave the board entirely, which is the one thing
-   * somebody pressing it after opening a card does not want.
-   */
-  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 —
-        // exactly the behaviour the address was chosen to avoid.
-        replace: taskId === null,
-        search: (previous: Record<string, unknown>) =>
-          taskId === null ? { ...previous, task: undefined } : { ...previous, task: taskId },
-      }),
-    // ⚠️ Stable, or the table's `useMemo` over its columns rebuilds on every render and the memo
-    // is decoration.
-    [navigate],
-  );
+  const { openId, open } = useOpenTask();
 
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
@@ -91,14 +66,20 @@ export function BoardPanel({ node }: { node: Node }) {
             <Icon aria-hidden="true" className="size-4" />
           </button>
         ))}
-        <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>
+        {/* ⚠️ 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
@@ -183,7 +164,6 @@ function OpenTask({
       task={task}
       board={board}
       onOpen={onOpen}
-      onClose={() => onOpen(null)}
       body={<TaskBody nodeId={task.id} />}
     />
   );

package/src/board/board-task/board-task.tsx

@@ -1,6 +1,6 @@
 import type { BoardTask } from "@anchrd/intel-contract/board";
 import { ARCHIVE_COLUMN_ID } from "@anchrd/intel-contract/board";
-import { ChevronLeft, Lock, Plus, Square, SquareCheck } from "lucide-react";
+import { Lock, Plus, Square, SquareCheck } from "lucide-react";
 import { useState } from "react";
 import { useAssigneeLabel } from "@/board/board-assignee/board-assignee.ts";
 import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
@@ -23,25 +23,46 @@ const linkIcons: Record<LinkKind, typeof Lock> = {
 };
 
 /**
- * Who the task is for, as the circle the access summary uses.
+ * The circle for whoever a card is for, and the way to take the assignment off.
  *
- * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed, the field stays
- * `assigneeId`. A row of circles here would imply a second data model that does not exist.
+ * ⚠️ **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 here would imply a second data model that
+ * does not exist.
+ *
+ * ⚠️ **Only ever drawn for somebody.** "Nobody yet" as a chip is a placeholder for an absence, and
+ * an absence needs no place on screen (#692).
+ *
+ * ⚠️ **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/ui/CLAUDE.md`, walked into by the very
+ * change that documented it.
  */
-function Assignee({ id }: { id: string | null }) {
+function AssigneeChip({ id, clear }: { id: string; clear(): void }) {
   const i18n = useI18n();
   const label = useAssigneeLabel(id);
-  if (id === null) {
-    return <span className="text-xs text-muted-foreground">{label}</span>;
-  }
   return (
-    <span
-      // ⚠️ `role="img"` and not a bare span: two initials are a picture of a name, and a plain
-      // `span` carries no `aria-label` at all — the attribute is dropped, and the circle is then
-      // read out as the two letters it happens to contain.
-      role="img"
-      aria-label={label}
+    <button
+      type="button"
+      aria-label={i18n.t("board.clearAssignee", { name: label })}
       title={label}
+      onClick={clear}
+      className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <AssigneeCircle label={label} />
+    </button>
+  );
+}
+
+function AssigneeCircle({ label }: { label: string }) {
+  return (
+    <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>`, whose children are
+      // presentational in ARIA. 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. See `AssigneeChip` above and `packages/ui/CLAUDE.md`.
+      aria-hidden="true"
       className="flex size-7 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground ring-2 ring-background"
     >
       {initials(label)}
@@ -83,19 +104,15 @@ export function BoardTaskDocument({
   task,
   board,
   onOpen,
-  onClose,
   body,
 }: {
   task: BoardTask;
   board: BoardHandle;
   onOpen(taskId: string): void;
-  onClose(): void;
   /** The markdown surface, handed in so this component stays free of the editor's own loading. */
   body: React.ReactNode;
 }) {
   const i18n = useI18n();
-  const [label, setLabel] = useState("");
-  const [adding, setAdding] = useState(false);
 
   const links = linksOf(task, board.columns);
   const progress = progressOf(links);
@@ -117,33 +134,14 @@ export function BoardTaskDocument({
     });
   };
 
-  // ⚠️ A single date has to say WHICH one it is. Drawn bare, a start date and a due date look
-  // identical — and reading a start date as a deadline is the expensive direction of that mistake.
-  const dates =
-    task.startDate !== null && task.dueDate !== null
-      ? `${task.startDate.slice(0, 10)} – ${task.dueDate.slice(0, 10)}`
-      : task.startDate !== null
-        ? i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })
-        : task.dueDate !== null
-          ? i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })
-          : null;
-
   return (
     <div
       className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6"
       aria-busy={board.isWriting}
     >
-      <button
-        type="button"
-        onClick={onClose}
-        className="flex w-fit items-center gap-1 rounded-md text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <ChevronLeft aria-hidden="true" className="size-4" />
-        {board.title}
-      </button>
-
-      <h1 className="text-2xl font-semibold tracking-tight">{task.title}</h1>
-
+      {/* ⚠️ No heading and no way back HERE. Both live in the title row above since #692: the path
+          there ends in this card's name, so a heading would print it a second time, and an arrow
+          here would be a second control meaning what the one up there already means. */}
       {/* ⚠️ ONE line of chips, and no field labels. "Status:" in front of a chip that says "Backlog"
           says nothing the chip does not — and it turns a quiet head into a form. */}
       <div className="flex flex-wrap items-center gap-2">
@@ -173,10 +171,19 @@ export function BoardTaskDocument({
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <Assignee id={task.assigneeId} />
-
-        {dates === null ? null : (
-          <span className="rounded-full border px-3 py-1 text-xs tabular-nums">{dates}</span>
+        {/* ⚠️ Two chips when both dates are set, not a range. A range reads as one fact; these
+            are two, and each is removed on its own. */}
+        {task.startDate === null ? null : (
+          <DateChip
+            label={i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })}
+            remove={() => write({ startDate: null })}
+          />
+        )}
+        {task.dueDate === null ? null : (
+          <DateChip
+            label={i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })}
+            remove={() => write({ dueDate: null })}
+          />
         )}
 
         {task.labels.map((entry) => (
@@ -185,69 +192,41 @@ export function BoardTaskDocument({
             type="button"
             aria-label={i18n.t("board.removeLabel", { label: entry })}
             onClick={() => write({ labels: task.labels.filter((keep) => keep !== entry) })}
-            className="rounded-full bg-muted px-3 py-1 text-xs outline-none hover:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring"
+            className="rounded-full border px-3 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
           >
             {entry}
           </button>
         ))}
 
-        {adding ? (
-          <input
-            // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
-            autoFocus
-            value={label}
-            aria-label={i18n.t("board.addLabel")}
-            onChange={(event) => setLabel(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Escape") {
-                setAdding(false);
-                setLabel("");
-              }
-              if (event.key !== "Enter") return;
-              event.preventDefault();
-              const next = label.trim();
-              // ⚠️ Tags are REPLACED, not merged, so the whole list travels — and a duplicate would
-              // be written as one more entry rather than refused.
-              if (next.length > 0 && !task.labels.includes(next)) {
-                write({ labels: [...task.labels, next] });
-              }
-              setAdding(false);
-              setLabel("");
-            }}
-            className="w-28 rounded-full border bg-background px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-        ) : (
-          <button
-            type="button"
-            aria-label={i18n.t("board.addLabel")}
-            onClick={() => setAdding(true)}
-            className="rounded-full border px-2 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Plus aria-hidden="true" className="size-3" />
-          </button>
+        {/* ⚠️ **Last, always.** It is the only round element in the row; standing between the chips
+            it breaks the line, and a row without one simply ends earlier. */}
+        {task.assigneeId === null ? null : (
+          <AssigneeChip id={task.assigneeId} clear={() => write({ assigneeId: null })} />
         )}
+
+        <Adder task={task} board={board} write={write} />
       </div>
 
-      {/* ⚠️ ONE list, not three blocks. The icon carries the kind — box, lock, chain — and the order
-          is the decision documented on `linksOf`. */}
-      <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
-        <h2 className="flex items-center gap-2 text-sm font-medium">
-          {i18n.t("board.links")}
-          {progress === null ? null : (
-            <span className="text-xs text-muted-foreground tabular-nums">
-              {i18n.t("board.progress", { done: progress.done, total: progress.total })}
-            </span>
-          )}
-        </h2>
-        {links.length === 0 ? null : (
+      {/* ⚠️ ONE list, not three blocks: the icon carries the kind. And it exists only when there is
+          something in it. An empty section with a heading and a hint tells the reader that something
+          is missing; nothing at all tells them there is nothing, which is the truth (#692). */}
+      {links.length === 0 ? null : (
+        <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
+          <h2 className="flex items-center gap-2 text-sm font-medium">
+            {i18n.t("board.links")}
+            {progress === null ? null : (
+              <span className="text-xs text-muted-foreground tabular-nums">
+                {i18n.t("board.progress", { done: progress.done, total: progress.total })}
+              </span>
+            )}
+          </h2>
           <ul className="flex flex-col">
             {links.map((link) => (
               <LinkRow key={`${link.kind}:${link.id}`} link={link} onOpen={onOpen} />
             ))}
           </ul>
-        )}
-        <LinkAdder task={task} board={board} />
-      </section>
+        </section>
+      )}
 
       {/* The markdown text is the largest element of the page — everything above is the quiet part.
           ⚠️ The slot is not decoration: a test that asks whether the BODY drew something has to be
@@ -265,77 +244,135 @@ export function BoardTaskDocument({
  * and "waits for". That is `#371`: the reader decides WHAT they are linking once they know which
  * card they mean, not before.
  */
-function LinkAdder({ task, board }: { task: BoardTask; board: BoardHandle }) {
+
+/** A date, and the way to take it off again. */
+function DateChip({ label, remove }: { label: string; remove(): void }) {
+  return (
+    <button
+      type="button"
+      onClick={remove}
+      className="rounded-full border px-3 py-1 text-xs tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {label}
+    </button>
+  );
+}
+
+/**
+ * What the card can still be given. The order matches the chips it produces.
+ *
+ * ⚠️ **No `assignee` here, and that is a gap rather than a decision.** Setting one needs a person to
+ * pick from, and this application can only ever DISPLAY principals it already sees in a grant: there
+ * is no list to choose from anywhere in the data provider. An entry that opens nothing is worse than
+ * a missing one, because it looks like the feature is there (`#700`).
+ */
+const addable = ["label", "start", "due"] as const;
+const linkable = ["subtask", "blocker"] as const;
+type Addable = (typeof addable)[number] | (typeof linkable)[number];
+
+/**
+ * ⚠️ **ONE plus for everything the card can carry**, and the kind is chosen afterwards. Two
+ * controls, one for fields and one for links, asked the reader to know which of the two a thing was
+ * before they could add it, and that is a question about our data model, not about their work.
+ */
+function Adder({
+  task,
+  board,
+  write,
+}: {
+  task: BoardTask;
+  board: BoardHandle;
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
   const i18n = useI18n();
-  const [kind, setKind] = useState<"subtask" | "blocker" | null>(null);
-  const [title, setTitle] = useState("");
+  const [kind, setKind] = useState<Addable | null>(null);
+  const [draft, setDraft] = useState("");
+  const close = () => {
+    setKind(null);
+    setDraft("");
+  };
 
   const candidates = board.columns
     .flatMap((entry) => entry.cards)
     .filter((card) => card.id !== task.id && card.parentTaskId !== task.id);
 
-  const close = () => {
-    setKind(null);
-    setTitle("");
+  const commit = () => {
+    const value = draft.trim();
+    if (value.length === 0 || board.isWriting) return close();
+    if (kind === "label") {
+      // ⚠️ Tags are REPLACED, not merged, so the whole list travels, and a duplicate would be
+      // written as one more entry rather than refused.
+      if (!task.labels.includes(value)) write({ labels: [...task.labels, value] });
+    }
+    if (kind === "start") write({ startDate: `${value}T00:00:00.000Z` });
+    if (kind === "due") write({ dueDate: `${value}T00:00:00.000Z` });
+    if (kind === "subtask") {
+      void board
+        .createTask({
+          title: value,
+          // A subtask starts in the same column as the task it belongs to: the first column would
+          // claim work was reset that never started.
+          status: task.status,
+          parentTaskId: task.id,
+          assigneeId: null,
+          labels: [],
+          startDate: null,
+          dueDate: null,
+          dependsOn: null,
+          idempotencyKey: crypto.randomUUID(),
+        })
+        .then(close);
+      return;
+    }
+    close();
   };
 
   return (
-    <div className="flex items-center gap-2 pt-1">
+    <>
       <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring">
+        <DropdownMenuTrigger
+          aria-label={i18n.t("board.add")}
+          className="rounded-full border px-2 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
           <Plus aria-hidden="true" className="size-3" />
-          {i18n.t("board.addLink")}
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
-          <DropdownMenuItem onSelect={() => setKind("subtask")}>
-            {i18n.t("board.link.subtask")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => setKind("blocker")}>
-            {i18n.t("board.link.blocker")}
-          </DropdownMenuItem>
+          {addable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.add.${entry}`)}
+            </DropdownMenuItem>
+          ))}
+          {linkable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.link.${entry}`)}
+            </DropdownMenuItem>
+          ))}
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* ⚠️ **The two kinds are two different writes, and that is why the kind is asked FIRST.** A
-          subtask is CREATED — where a task sits is the node tree, and moving an existing card under
-          another needs `node_update` with the version it was last read at, which this answer does
-          not carry. A blocker is a field on this card and only needs the card that is meant. */}
-      {kind === "subtask" ? (
+      {kind === null || kind === "blocker" ? null : (
         <input
           // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
           autoFocus
-          value={title}
-          aria-label={i18n.t("board.link.subtask")}
-          onChange={(event) => setTitle(event.target.value)}
+          type={kind === "start" || kind === "due" ? "date" : "text"}
+          value={draft}
+          aria-label={i18n.t(kind === "subtask" ? "board.link.subtask" : `board.add.${kind}`)}
+          onChange={(event) => setDraft(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Escape") close();
             if (event.key !== "Enter") return;
             event.preventDefault();
-            const next = title.trim();
-            if (next.length === 0 || board.isWriting) return;
-            void board
-              .createTask({
-                title: next,
-                // A subtask starts in the same column as the task it belongs to — the alternative
-                // is the first column, which claims work was reset that never started.
-                status: task.status,
-                parentTaskId: task.id,
-                assigneeId: null,
-                labels: [],
-                startDate: null,
-                dueDate: null,
-                dependsOn: null,
-                idempotencyKey: crypto.randomUUID(),
-              })
-              .then(close);
+            commit();
           }}
-          className="w-48 rounded-md border bg-background px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="w-36 rounded-full border bg-background px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
         />
-      ) : kind === "blocker" ? (
+      )}
+
+      {kind !== "blocker" ? null : (
         <DropdownMenu open onOpenChange={(next) => !next && close()}>
           <DropdownMenuTrigger
             aria-label={i18n.t("board.link.blocker")}
-            className="rounded-md border px-2 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             {i18n.t("board.link.blocker")}
           </DropdownMenuTrigger>
@@ -345,12 +382,7 @@ function LinkAdder({ task, board }: { task: BoardTask; board: BoardHandle }) {
                 key={card.id}
                 onSelect={() => {
                   close();
-                  if (board.isWriting) return;
-                  void board.updateTask({
-                    taskId: task.id,
-                    dependsOn: card.id,
-                    idempotencyKey: crypto.randomUUID(),
-                  });
+                  write({ dependsOn: card.id });
                 }}
               >
                 {card.title}
@@ -358,7 +390,7 @@ function LinkAdder({ task, board }: { task: BoardTask; board: BoardHandle }) {
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-      ) : null}
-    </div>
+      )}
+    </>
   );
 }

package/src/board/board-title-row/board-title-row.tsx

@@ -0,0 +1,68 @@
+import type { Node } from "@anchrd/intel-contract/node";
+import { useQuery } from "@tanstack/react-query";
+import { crumbsOf } from "@/board/board-crumbs/board-crumbs.ts";
+import { BoardCrumbs } from "@/board/board-crumbs/board-crumbs.tsx";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { useOpenTask } from "@/board/board-open-task/board-open-task.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
+
+/**
+ * The one line above a board, and above a card opened on it.
+ *
+ * ⚠️ **The SAME `TitleRow`, with the path in place of the name.** A second header component for the
+ * open card would look identical today and drift tomorrow: the order of the right-hand group, the
+ * shadow on scroll and the slots are decided in exactly one place, and this keeps it that way (#53).
+ *
+ * ⚠️ **The menu then belongs to the CARD, not to the board.** Rename, move and archive act on what
+ * the reader is looking at. That is also where renaming a card happens, since the path carries its
+ * name and there is no heading to edit (#692).
+ */
+export function BoardTitleRow({ node }: { node: Node }) {
+  const { openId, open } = useOpenTask();
+  const board = useBoard(node.id);
+  const { data } = useIntelRouterContext();
+
+  // ⚠️ The same key the open card's body already uses, so this costs no second request.
+  const task = useQuery({
+    queryKey: ["node", openId],
+    queryFn: () => data.getNode(openId ?? ""),
+    enabled: openId !== null,
+  });
+
+  const tasks = board.columns.flatMap((entry) => entry.cards);
+  const openTask = tasks.find((card) => card.id === openId);
+
+  // ⚠️ Until the card is in the ANSWER, the board's own row stands. Drawing a path around a name
+  // nobody knows yet would flicker a wrong one into place for a moment.
+  //
+  // ⚠️ The card's NODE is a different wait, and it must not gate the path: it is only needed for the
+  // menu, and holding the whole row for it would show the board's name first and swap it a moment
+  // later — two different headers in sequence for one navigation.
+  if (openId === null || openTask === undefined) {
+    return (
+      <TitleRow title={node.title} description={node.description} target={{ type: "node", node }} />
+    );
+  }
+
+  const crumbs = <BoardCrumbs crumbs={crumbsOf(openId, board.title, tasks)} onOpen={open} />;
+
+  /**
+   * ⚠️ **No menu at all while the card's node is missing**, rather than the board's. Rename, move
+   * and archive would otherwise act on the BOARD, and `archive` fires without asking: a control
+   * that is not there yet costs a moment, one that acts on the wrong thing costs the thing.
+   *
+   * ⚠️ **Missing covers two states, and deliberately treats them the same**: the read is still on
+   * its way, or it was refused. Neither gives this row a card to act on, and telling them apart
+   * here would only decide WHICH wrong menu to draw.
+   */
+  if (task.data === undefined) return <TitleRow title={openTask.title} crumbs={crumbs} />;
+
+  return (
+    <TitleRow
+      title={openTask.title}
+      crumbs={crumbs}
+      target={{ type: "node", node: task.data.node }}
+    />
+  );
+}

package/src/file-preview/file-preview-view.tsx

@@ -0,0 +1,28 @@
+import FileViewer, { type ViewerOptions } from "@file-viewer/react";
+import { useMemo } from "react";
+import { useResolvedTheme } from "@/theme/theme-context.tsx";
+
+export function FilePreviewView({ file, renderer }: { file: File; renderer: unknown }) {
+  const theme = useResolvedTheme();
+  const options = useMemo<ViewerOptions>(
+    () => ({
+      renderers: [renderer] as unknown as NonNullable<ViewerOptions["renderers"]>,
+      rendererMode: "replace",
+      builtinRenderers: "none",
+      autoRenderers: false,
+      styleIsolation: "shadow",
+      theme,
+      locale: "auto",
+      toolbar: {
+        download: false,
+        print: false,
+        exportHtml: false,
+        theme: false,
+        permissions: { download: false, print: false, exportHtml: false },
+      },
+      ui: { density: "compact", surfaceBackground: "transparent" },
+    }),
+    [renderer, theme],
+  );
+  return <FileViewer file={file} className="h-full min-h-64" options={options} />;
+}

package/src/file-preview/file-preview.tsx

@@ -0,0 +1,28 @@
+import { lazy, Suspense } from "react";
+import type { AttachmentPreviewKind } from "@/attachment-viewer/attachment-viewer.tsx";
+
+const previews = {
+  pdf: lazy(async () => ({ default: (await import("./pdf-file-preview.tsx")).PdfFilePreview })),
+  presentation: lazy(async () => ({
+    default: (await import("./presentation-file-preview.tsx")).PresentationFilePreview,
+  })),
+  spreadsheet: lazy(async () => ({
+    default: (await import("./spreadsheet-file-preview.tsx")).SpreadsheetFilePreview,
+  })),
+  word: lazy(async () => ({ default: (await import("./word-file-preview.tsx")).WordFilePreview })),
+};
+
+export function FilePreview({
+  file,
+  kind,
+}: {
+  file: File;
+  kind: Exclude<AttachmentPreviewKind, "image" | "unsupported">;
+}) {
+  const Preview = previews[kind];
+  return (
+    <Suspense fallback={null}>
+      <Preview file={file} />
+    </Suspense>
+  );
+}