@anchrd/intel-ui 0.40.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.40.0",
+  "version": "0.41.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,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-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>
+  );
+}

package/src/board/board-kanban/board-kanban.tsx

@@ -119,7 +119,12 @@ function Card({
             that is 76 px of a 240 px card, given away for nothing. */}
         <span
           className="block"
-          style={{ paddingRight: `${8 + Math.min(family.level, MAX_STRIPES) * 5}px` }}
+          // ⚠️ `STRIPE_WIDTH`, not a number written twice. The reserve followed the OLD grid of
+          // 3px plus a 2px gap; since the stripes sit flush and 4px wide, `* 5` reserved up to 14px
+          // the title never needed, while the comment above claimed the reserve follows them.
+          style={{
+            paddingRight: `${8 + Math.min(family.level, MAX_STRIPES) * STRIPE_WIDTH}px`,
+          }}
         >
           {card.title}
         </span>
@@ -158,7 +163,10 @@ function Stripes({ family, label }: { family: Family; label: string }) {
       // it, and the tooltip would never appear once. The class is not needed either: this span lies
       // inside the button, so a click reaches it anyway.
       title={label}
-      className="absolute inset-y-1 right-1 flex gap-[2px]"
+      // ⚠️ Flush and gapless, top to bottom. Inset from the edge and spaced apart, the stripes read
+      // as decoration somebody added; against the edge and touching, they read as one mark with a
+      // countable number of parts, which is what they are.
+      className="absolute inset-y-0 right-0 flex"
     >
       {levels(family.level).map((level) => (
         <span
@@ -171,8 +179,14 @@ function Stripes({ family, label }: { family: Family; label: string }) {
           // Since the pattern caps at six the lowest raw value is 0.25, so the clamp no longer
           // fires; it stays because it is the guard, not the arithmetic, that must hold if the cap
           // ever moves.
-          className={`w-[3px] rounded-full ${toneClasses[family.tone - 1]}`}
-          style={{ opacity: Math.max(0.3, 1 - (level - 1) * 0.15) }}
+          // ⚠️ No rounding. A rounded stripe at full height leaves a light wedge at each end, and
+          // two of them beside one another look like a gap that is not there.
+          // ⚠️ The width as an inline STYLE, not a class. `w-[${…}px]` is a name Tailwind never
+          // sees — it reads class names statically, so the stripes would have no width in the build
+          // and be perfectly fine in the tests. An inline value is also the only way one number can
+          // rule both the mark and the room reserved for it.
+          className={toneClasses[family.tone - 1]}
+          style={{ width: `${STRIPE_WIDTH}px`, opacity: Math.max(0.3, 1 - (level - 1) * 0.15) }}
         />
       ))}
     </span>
@@ -186,6 +200,15 @@ function Stripes({ family, label }: { family: Family; label: string }) {
  */
 const MAX_STRIPES = 6;
 
+/**
+ * How wide one stripe is, in pixels.
+ *
+ * ⚠️ **One number, read by both the mark and the room reserved for it.** Written twice they drift,
+ * and the drift is silent: the title keeps its distance from stripes that are no longer that wide,
+ * or runs under ones that grew.
+ */
+const STRIPE_WIDTH = 4;
+
 /**
  * `[1, 2, … min(depth, MAX_STRIPES)]` — the level each stripe stands for.
  *
@@ -339,9 +362,11 @@ function Column({
           ))}
         </ul>
       </SortableContext>
-      {entry.cards.length === 0 ? (
-        <p className="px-1 text-xs text-muted-foreground">{i18n.t("board.columnEmpty")}</p>
-      ) : null}
+      {/* ⚠️ **Nothing at all under an empty column.** The sentence said what the emptiness already
+          says, and the surface I first put in its place was an invention with a false reason: the
+          column is a drop target through `setDropRef` on the section above, with or without
+          anything drawn in it — `dragEndToDrop` answers `{ status, index: 0 }` for a column with no
+          cards, and `neighbourDrop` reaches one by index alone. */}
       {addable ? (
         composing ? (
           <input
@@ -533,7 +558,17 @@ export function BoardKanban({
         });
       }}
     >
-      <div className="flex gap-3 overflow-x-auto p-4" aria-busy={board.isWriting}>
+      {/* ⚠️ **`min-h-0 flex-1`, or the scrollbar sits in the middle of the screen.** A box with no
+          height shrinks to its content, and the horizontal bar clings to the bottom of the tallest
+          column: on a board with few cards that looks broken. The panel above already offers the
+          full height; this is where it is taken.
+
+          ⚠️ **And NO `items-start` with it.** A stretched column paints nothing — the section
+          carries neither background nor border — but the rectangle it stretches to is what
+          `useDroppable` measures and `closestCorners` reckons against. Held to its content instead,
+          an empty column shrinks to its heading, and the area a card can be dropped into shrinks
+          with it. */}
+      <div className="flex min-h-0 flex-1 gap-3 overflow-x-auto p-4" aria-busy={board.isWriting}>
         {board.columns.map((column) => (
           <Column
             key={column.column.id}

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

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