@anchrd/intel-ui 0.39.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -33,14 +33,24 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.23.0",
+    "@anchrd/intel-contract": "^0.24.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@file-viewer/react": "2.3.0",
+    "@file-viewer/renderer-pdf": "2.3.0",
+    "@file-viewer/renderer-presentation": "2.3.0",
+    "@file-viewer/renderer-spreadsheet": "2.3.2",
+    "@file-viewer/renderer-word": "2.3.1",
+    "@file-viewer/vite-plugin": "2.3.1",
     "@react-sigma/core": "^5.0.6",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-router": "^1.170.18",
+    "@tanstack/react-table": "^9.1.2",
     "@vitejs/plugin-react": "^6.0.4",
     "@xyflow/react": "^12.11.2",
     "class-variance-authority": "^0.7.1",
@@ -54,6 +64,7 @@
     "react": "^19.2.0",
     "react-aria-components": "^1.19.0",
     "react-dom": "^19.2.0",
+    "readable-stream": "2.3.8",
     "sigma": "^3.0.3",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",

package/src/access-summary/access-summary.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/tooltip.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { useUserName } from "@/user-name/user-name.ts";
+import { initials, useUserName } from "@/user-name/user-name.ts";
 
 type Principal = ResourceGrant["principal"];
 
@@ -47,16 +47,6 @@ function groupGrants(grants: ResourceGrant[], ownerIds: string[] = []): GrantGro
   return [...grouped.values()];
 }
 
-function initials(value: string): string {
-  const parts = value
-    .replace(/@.*$/, "")
-    .split(/[\s._+-]+/)
-    .filter(Boolean);
-  if (parts.length === 0) return "?";
-  if (parts.length === 1) return (parts[0]?.slice(0, 2) ?? "?").toUpperCase();
-  return `${parts[0]?.[0] ?? ""}${parts.at(-1)?.[0] ?? ""}`.toUpperCase();
-}
-
 function usePrincipalLabel(principal: Principal): string {
   const i18n = useI18n();
   const userName = useUserName(principal.type === "user" ? principal.id : null);

package/src/app/app-tree/app-tree.tsx

@@ -1,6 +1,7 @@
 import type { NodeKind } from "@anchrd/intel-contract/node";
 import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { zipSync } from "fflate";
 import {
   ChevronRight,
   CornerLeftUp,
@@ -80,6 +81,16 @@ async function fileBase64(file: File): Promise<string> {
   });
 }
 
+function nativeUpload(file: File): boolean {
+  const name = file.name.toLowerCase();
+  return name.endsWith(".md") || name.endsWith(".csv");
+}
+
+async function singleFileBundle(file: File): Promise<Blob> {
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  return new Blob([zipSync({ [file.name]: bytes }).slice().buffer], { type: "application/zip" });
+}
+
 // A level is either a folder of the shared tree or the flows one flow calls. The second kind is
 // derived from that flow's graph, not from `parent_id` (ADR-0004 §3), which is why it is its own
 // level rather than another folder.
@@ -288,6 +299,43 @@ export function AppTree() {
           idempotencyKey: crypto.randomUUID(),
         });
       }
+      /**
+       * ⚠️ **A board's columns are written at creation, in the language of whoever made it** (#675).
+       * The server has a fallback for a board nobody configured, but it cannot know the reader's
+       * language — and columns are SHARED data: two people on one board must read the same names,
+       * and the settings dialog edits one list. Translating per reader would give them different
+       * boards. Written once, they are data anybody can rename.
+       *
+       * ⚠️ It is a second call and it may fail on its own. That is survivable and deliberately not
+       * repaired here: the board then answers with the server's fallback and is usable, which is
+       * the same state a board made over MCP is in. A failure that made the whole creation fail
+       * would trade a usable board for none.
+       */
+      if (kind === "board") {
+        try {
+          await data.updateBoard({
+            boardId: node.id,
+            columns: [
+              { id: "backlog", title: i18n.t("board.column.default.backlog"), terminal: false },
+              { id: "todo", title: i18n.t("board.column.default.todo"), terminal: false },
+              { id: "doing", title: i18n.t("board.column.default.doing"), terminal: false },
+              { id: "done", title: i18n.t("board.column.default.done"), terminal: true },
+            ],
+            idempotencyKey: crypto.randomUUID(),
+          });
+        } catch {
+          /**
+           * ⚠️ **Swallowed on purpose, and the `catch` is what makes that true.** Without it the
+           * failure travels out of the mutation: the node exists, but `onSuccess` never runs, the
+           * screen says "creating failed", and the obvious response — try again — makes a SECOND
+           * board, because nothing tells the reader the first one is already there.
+           *
+           * What is lost by swallowing is one thing and it is repairable: the board answers with
+           * the server's fallback columns instead of the ones in this reader's language. That is
+           * exactly the state a board made over MCP is in, and the settings dialog renames them.
+           */
+        }
+      }
       return {
         area: "/nodes" as const,
         id: node.id,
@@ -315,6 +363,16 @@ export function AppTree() {
 
   const upload = useMutation({
     mutationFn: async ({ parentId, file }: { parentId: string | null; file: File }) => {
+      if (nativeUpload(file)) {
+        const result = await data.importNodeBundle({
+          nodeId: parentId,
+          zip: await singleFileBundle(file),
+          idempotencyKey: crypto.randomUUID(),
+        });
+        const id = result.rootNodeIds[0];
+        if (!id) throw new Error("Native upload created no root node");
+        return { id, parentId };
+      }
       const contentBase64 = await fileBase64(file);
       const node = await data.createNodes({
         parentId,

package/src/attachment-viewer/attachment-viewer.tsx

@@ -0,0 +1,304 @@
+import type { NodeDocument } from "@anchrd/intel-contract/node";
+import { useQuery } from "@tanstack/react-query";
+import { unzipSync } from "fflate";
+import { FileQuestion, Info, X } from "lucide-react";
+import { Component, lazy, type ReactNode, Suspense, useEffect, useMemo, useState } from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useDateTime } from "@/time/time-context.tsx";
+
+const FilePreview = lazy(async () => ({
+  default: (await import("@/file-preview/file-preview.tsx")).FilePreview,
+}));
+
+export type AttachmentPreviewKind =
+  | "image"
+  | "pdf"
+  | "word"
+  | "spreadsheet"
+  | "presentation"
+  | "unsupported";
+
+const extensions: Record<Exclude<AttachmentPreviewKind, "unsupported">, readonly string[]> = {
+  image: ["avif", "bmp", "gif", "jpeg", "jpg", "png", "svg", "webp"],
+  pdf: ["pdf"],
+  word: ["docx"],
+  spreadsheet: ["xlsx"],
+  presentation: ["pptx"],
+};
+
+export function attachmentPreviewKind(title: string, mediaType: string): AttachmentPreviewKind {
+  if (mediaType.startsWith("image/")) return "image";
+  if (mediaType === "application/pdf") return "pdf";
+  const extension = title.toLowerCase().split(".").at(-1) ?? "";
+  for (const [kind, supported] of Object.entries(extensions)) {
+    if (supported.includes(extension)) return kind as AttachmentPreviewKind;
+  }
+  return "unsupported";
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1_000) return `${bytes} B`;
+  if (bytes < 1_000_000) return `${(bytes / 1_000).toFixed(bytes < 10_000 ? 1 : 0)} KB`;
+  return `${(bytes / 1_000_000).toFixed(bytes < 10_000_000 ? 1 : 0)} MB`;
+}
+
+type FormatDetail = {
+  label: "dimensions" | "pages" | "sections" | "slides" | "worksheets";
+  value: string;
+};
+
+export async function attachmentFormatDetail(
+  file: File,
+  kind: AttachmentPreviewKind,
+): Promise<FormatDetail | null> {
+  if (kind === "image") {
+    const bitmap = await createImageBitmap(file);
+    const value = `${bitmap.width} × ${bitmap.height} px`;
+    bitmap.close();
+    return { label: "dimensions", value };
+  }
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  if (kind === "pdf") {
+    const source = new TextDecoder("latin1").decode(bytes);
+    const pages = source.match(/\/Type\s*\/Page\b/g)?.length ?? 0;
+    return pages > 0 ? { label: "pages", value: String(pages) } : null;
+  }
+  if (kind === "unsupported") return null;
+  const archive = unzipSync(bytes);
+  if (kind === "presentation") {
+    const slides = Object.keys(archive).filter((name) => /^ppt\/slides\/slide\d+\.xml$/.test(name));
+    return { label: "slides", value: String(slides.length) };
+  }
+  const decoder = new TextDecoder();
+  if (kind === "spreadsheet") {
+    const workbook = archive["xl/workbook.xml"];
+    if (!workbook) return null;
+    const worksheets = decoder.decode(workbook).match(/<sheet\b/g)?.length ?? 0;
+    return { label: "worksheets", value: String(worksheets) };
+  }
+  const document = archive["word/document.xml"];
+  if (!document) return null;
+  const sections = Math.max(1, decoder.decode(document).match(/<w:sectPr\b/g)?.length ?? 0);
+  return { label: "sections", value: String(sections) };
+}
+
+export function AttachmentViewer({ document }: { document: NodeDocument }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const attachment = useQuery({
+    queryKey: ["attachment", document.node.id, document.version?.id],
+    queryFn: () => data.getNodeAttachment(document.node.id),
+    enabled: document.version !== null,
+    retry: false,
+  });
+  const file = useMemo(
+    () =>
+      attachment.data && document.version
+        ? new File([attachment.data], document.node.title, { type: document.version.mediaType })
+        : null,
+    [attachment.data, document.node.title, document.version],
+  );
+  const kind = document.version
+    ? attachmentPreviewKind(document.node.title, document.version.mediaType)
+    : "unsupported";
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col px-6 pb-6">
+      <ActionSlot name="title-actions">
+        <button
+          type="button"
+          aria-label={i18n.t(detailsOpen ? "attachment.detailsHide" : "attachment.detailsShow")}
+          aria-expanded={detailsOpen}
+          onClick={() => setDetailsOpen((current) => !current)}
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-muted outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Info aria-hidden="true" className="size-4" />
+        </button>
+      </ActionSlot>
+      <div className="relative flex min-h-0 flex-1 overflow-hidden rounded-xl border bg-background">
+        <div className="relative min-h-0 min-w-0 flex-1 bg-muted/40">
+          {document.version === null ? (
+            <PreviewMessage message={i18n.t("attachment.empty")} />
+          ) : attachment.isPending ? (
+            <PreviewMessage message={i18n.t("common.loading")} />
+          ) : attachment.isError || !file ? (
+            <PreviewMessage error message={i18n.t("attachment.loadFailed")} />
+          ) : kind === "unsupported" ? (
+            <PreviewMessage message={i18n.t("attachment.unsupported")} />
+          ) : kind === "image" ? (
+            <ImagePreview file={file} title={document.node.title} />
+          ) : (
+            <ViewerErrorBoundary
+              key={`${document.node.id}:${document.version.id}`}
+              fallback={<PreviewMessage error message={i18n.t("attachment.loadFailed")} />}
+            >
+              <Suspense fallback={<PreviewMessage message={i18n.t("common.loading")} />}>
+                <FilePreview file={file} kind={kind} />
+              </Suspense>
+            </ViewerErrorBoundary>
+          )}
+        </div>
+        {detailsOpen ? (
+          <AttachmentDetails
+            document={document}
+            file={file}
+            footerInset={kind === "pdf"}
+            kind={kind}
+            close={() => setDetailsOpen(false)}
+          />
+        ) : null}
+        {detailsOpen && kind === "pdf" ? (
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-x-0 bottom-12 z-10 hidden border-t md:block"
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+class ViewerErrorBoundary extends Component<
+  { children: ReactNode; fallback: ReactNode },
+  { failed: boolean }
+> {
+  override state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  override render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+
+function PreviewMessage({ message, error = false }: { message: string; error?: boolean }) {
+  return (
+    <div
+      role={error ? "alert" : undefined}
+      className={cn(
+        "grid h-full min-h-64 place-items-center p-8 text-center text-sm text-muted-foreground",
+        error && "text-destructive",
+      )}
+    >
+      <div className="max-w-sm space-y-3">
+        <FileQuestion aria-hidden="true" className="mx-auto size-9" />
+        <p>{message}</p>
+      </div>
+    </div>
+  );
+}
+
+function ImagePreview({ file, title }: { file: File; title: string }) {
+  const [url, setUrl] = useState("");
+  useEffect(() => {
+    const next = URL.createObjectURL(file);
+    setUrl(next);
+    return () => URL.revokeObjectURL(next);
+  }, [file]);
+  return url ? (
+    <div className="grid h-full min-h-64 place-items-center overflow-auto p-4">
+      <img src={url} alt={title} className="max-h-full max-w-full object-contain" />
+    </div>
+  ) : null;
+}
+
+function AttachmentDetails({
+  document,
+  file,
+  footerInset,
+  kind,
+  close,
+}: {
+  document: NodeDocument;
+  file: File | null;
+  footerInset: boolean;
+  kind: AttachmentPreviewKind;
+  close(): void;
+}) {
+  const i18n = useI18n();
+  const dateTime = useDateTime();
+  const version = document.version;
+  const formatDetail = useQuery({
+    queryKey: ["attachment-format-detail", document.node.id, version?.id],
+    queryFn: async () => (file ? await attachmentFormatDetail(file, kind) : null),
+    enabled: file !== null && kind !== "unsupported",
+    retry: false,
+  });
+  const rows = version
+    ? [
+        [i18n.t("attachment.details.name"), document.node.title],
+        [
+          i18n.t("attachment.details.type"),
+          i18n.t(
+            `attachment.kind.${attachmentPreviewKind(document.node.title, version.mediaType)}`,
+          ),
+        ],
+        [i18n.t("attachment.details.mimeType"), version.mediaType],
+        [
+          i18n.t("attachment.details.format"),
+          document.node.title.split(".").at(-1)?.toUpperCase() ?? "—",
+        ],
+        [i18n.t("attachment.details.size"), formatFileSize(version.size)],
+        [i18n.t("attachment.details.uploaded"), dateTime.at(version.createdAt)],
+        [i18n.t("attachment.details.uploadedBy"), version.createdBy],
+        [i18n.t("attachment.details.version"), String(version.sequence)],
+      ]
+    : [[i18n.t("attachment.details.name"), document.node.title]];
+  if (formatDetail.data) {
+    rows.push([i18n.t(`attachment.details.${formatDetail.data.label}`), formatDetail.data.value]);
+  }
+  return (
+    <aside
+      aria-label={i18n.t("attachment.details.title")}
+      className={cn(
+        "absolute inset-x-0 bottom-0 z-10 max-h-[80%] overflow-auto border-t bg-background shadow-lg md:static md:z-auto md:w-80 md:max-h-none md:shrink-0 md:border-l md:border-t-0 md:shadow-none",
+        // The PDF renderer alone owns a bottom toolbar; keep the desktop panel beside its content.
+        footerInset && "md:mb-12",
+      )}
+    >
+      <div className="flex items-center justify-between border-b px-5 py-4">
+        <h3 className="font-semibold">{i18n.t("attachment.details.title")}</h3>
+        <button
+          type="button"
+          aria-label={i18n.t("common.close")}
+          onClick={close}
+          className="inline-flex size-8 items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <X aria-hidden="true" className="size-4" />
+        </button>
+      </div>
+      <dl className="divide-y px-5">
+        {rows.map(([label, value]) => (
+          <div
+            key={label}
+            className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-4 py-3 text-sm"
+          >
+            <dt className="text-muted-foreground">{label}</dt>
+            <dd className="break-words">{value}</dd>
+          </div>
+        ))}
+      </dl>
+      {version ? (
+        <div className="border-t px-5 py-4">
+          <h4 className="mb-2 font-medium">{i18n.t("attachment.details.technical")}</h4>
+          <dl className="divide-y">
+            <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-4 py-3 text-sm">
+              <dt className="text-muted-foreground">{i18n.t("attachment.details.storage")}</dt>
+              <dd>{i18n.t("attachment.details.private")}</dd>
+            </div>
+            <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-4 py-3 text-sm">
+              <dt className="text-muted-foreground">{i18n.t("attachment.details.checksum")}</dt>
+              <dd className="font-mono text-xs">{`${version.contentHash.slice(0, 8)}…${version.contentHash.slice(-4)}`}</dd>
+            </div>
+          </dl>
+        </div>
+      ) : null}
+    </aside>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { useI18n } from "@/i18n/i18n-context.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();
+  const name = useUserName(id);
+  if (id === null) return i18n.t("board.unassigned");
+  return name ?? i18n.t("node.someUser");
+}

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

@@ -0,0 +1,56 @@
+import type { BoardTask } from "@anchrd/intel-contract/board";
+
+/** 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/src/board/board-crumbs/board-crumbs.tsx

@@ -0,0 +1,108 @@
+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-sm">
+      <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-4" />
+      </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>
+  );
+}