@anchrd/intel-ui 0.40.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -40,6 +40,12 @@
     "@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",
@@ -58,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/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.
@@ -352,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,305 @@
+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";
+  const hasViewerControls = kind !== "image" && kind !== "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={hasViewerControls}
+            kind={kind}
+            close={() => setDetailsOpen(false)}
+          />
+        ) : null}
+        {detailsOpen && hasViewerControls ? (
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-x-0 bottom-14 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",
+        // File renderers keep their controls in a shared footer; the panel ends beside that footer.
+        footerInset && "md:mb-14",
+      )}
+    >
+      <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.tsx

@@ -0,0 +1,45 @@
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { initials } from "@/user-name/user-name.ts";
+import { useAssigneeLabel } from "./board-assignee.ts";
+
+/**
+ * The circle for whoever a card is for, and the way to take the assignment off.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both draw it; written twice they
+ * would drift, and the drift would be an accessibility bug on exactly one of them.
+ *
+ * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed from the access
+ * summary, the field stays `assigneeId`. A row of circles would imply a second data model.
+ *
+ * ⚠️ **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`.
+ */
+export function AssigneeChip({ id, clear }: { id: string; clear(): void }) {
+  const i18n = useI18n();
+  const label = useAssigneeLabel(id);
+  return (
+    <button
+      type="button"
+      aria-label={i18n.t("board.clearAssignee", { name: label })}
+      title={label}
+      onClick={clear}
+      className="shrink-0 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span
+        // ⚠️ **Hidden, and it must stay hidden.** This span used to carry `role="img"` with the
+        // person's name, and that reached nobody: it sits inside a button. Giving it a role and a
+        // label back would not add a second announcement, it would add none, while making the code
+        // look as though the name were covered here rather than on the button.
+        aria-hidden="true"
+        className="flex size-7 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground ring-2 ring-background"
+      >
+        {initials(label)}
+      </span>
+    </button>
+  );
+}

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

@@ -0,0 +1,31 @@
+/**
+ * A value on a card, and the way to take it off again.
+ *
+ * ⚠️ **One truth for two surfaces.** The opened card and the table both draw these; written twice
+ * they drift in size, in shape and — the expensive one — in what they are called.
+ *
+ * ⚠️ **The name says the value AND what pressing it does.** A button called `Zebra` that quietly
+ * clears a dependency is one nobody can predict; a name that drops the value is the other half of
+ * the mistake, because somebody speaking the visible words has to be able to reach the control by
+ * them (WCAG 2.5.3). Value first, then the consequence.
+ */
+export function BoardChip({
+  label,
+  action,
+  onClick,
+}: {
+  label: string;
+  action: string;
+  onClick(): void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={`${label}, ${action}`}
+      onClick={onClick}
+      className="shrink-0 rounded-full border px-2.5 py-0.5 text-xs tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {label}
+    </button>
+  );
+}

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>
+  );
+}