@anchrd/intel 0.59.0

package/ui/src/archive/archive.tsx

@@ -0,0 +1,417 @@
+import type { Flow } from "@contract/flow.ts";
+import type { Node } from "@contract/node.ts";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ArchiveRestore, LoaderCircle, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { IntelRequestError } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { kindIcons } from "@/kind-icon.ts";
+import { cn } from "@/lib/utils.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { RelativeTime } from "@/time/relative-time.tsx";
+
+// One archived thing, whichever side of the tree it came from. The two records stay apart
+// everywhere else (ADR-0004); here they are one list because "what did I throw away" is one
+// question, and an archive split in two would make somebody ask it twice.
+interface ArchivedEntry {
+  id: string;
+  title: string;
+  kind: Node["kind"] | "flow";
+  archivedAt: string;
+  updatedAt: string;
+  restore(): Promise<unknown>;
+  // Both sides of the tree can be purged (#457) — each through its own door, because node and flow
+  // stay separate everywhere else (ADR-0004).
+  purge(): Promise<{ purged: true; title: string }>;
+  previewPurge?(): Promise<{
+    inboundLinks: number;
+    totalItems: number;
+    items: Array<{ id: string; title: string }>;
+  }>;
+}
+
+/**
+ * The refusal of a permanent deletion — and the one place the reader can actually reach it.
+ *
+ * ⚠️ #601. It used to stand on the page only, and the confirmation dialog that produces it **stays
+ * open** on a refusal while marking everything outside itself `aria-hidden` (`Modal` → react-aria's
+ * `ModalOverlay`). Behind that the sentence was not merely awkward to get at: for a screen reader it
+ * was not there at all, and it announced nothing. Since #593 this is the sentence carrying the NAMES
+ * of the flows that still call the flow — the one thing that makes the refusal actionable, and the
+ * reason the ticket was built.
+ *
+ * ⚠️ It is rendered in exactly ONE of two places, never both: inside the dialog while that is open,
+ * on the page once it is closed. The second half is not a leftover — the reader closes the dialog to
+ * go and change the callers, and the sentence has to still be there when they come back. Two copies
+ * would be two announcements of one answer, which is the `#445` mistake in a new costume.
+ *
+ * ⚠️ This is NOT the `#430` class and does not go through `RefusalNotice`. That one answers a
+ * refused QUERY — a `403`/`404` that leaves a whole pane with nothing to show, told as a centered
+ * sentence without a retry. This is a refused mutation that carries data (`409` with `callers`),
+ * belongs beside the button that caused it, and its problem was never the wording.
+ */
+function PurgeRefusal({ error, className }: { error: unknown; className?: string }) {
+  const i18n = useI18n();
+  /**
+   * ⚠️ Deleting a flow for good is refused with `409 flow_in_use_by_flow` while published flows
+   * still call it (`flows.ts`, `purge`), and the CALLERS are what makes that refusal actionable —
+   * "reload and try again" is advice for a flow nobody calls, and this one is called.
+   *
+   * ⚠️ Since #593 they arrive as data — the flows this reader may see by name, the rest as a count
+   * — so the sentence is written here, in the reader's language, exactly as the share dialog writes
+   * the folder's half of the same rule (#448). The server still decides WHICH may be named; that is
+   * an authorization answer and nothing on this side recomputes it.
+   */
+  const requestError = error instanceof IntelRequestError ? error : null;
+  const inUse = requestError?.code === "flow_in_use_by_flow" ? requestError : null;
+  return (
+    <div role="alert" className={cn("space-y-1 text-sm text-destructive", className)}>
+      {inUse ? (
+        <>
+          <p>{i18n.t("archive.purgeInUse")}</p>
+          {/* An API older than #593 sends no `callers`, and then its own sentence is the only place
+              the titles exist at all. Showing it beats showing nothing. */}
+          {inUse.callers === null ? (
+            <p className="text-xs">{inUse.message}</p>
+          ) : (
+            <p className="text-xs">
+              {inUse.callers.titles.length > 0
+                ? i18n.t("archive.purgeInUseCallers", {
+                    titles: inUse.callers.titles.join(", "),
+                  })
+                : i18n.t("archive.purgeInUseCallersHidden", { count: inUse.callers.hidden })}
+              {inUse.callers.titles.length > 0 && inUse.callers.hidden > 0
+                ? ` ${i18n.t("archive.purgeInUseCallersMore", { count: inUse.callers.hidden })}`
+                : ""}
+              {` ${i18n.t("archive.purgeInUseHint")}`}
+            </p>
+          )}
+        </>
+      ) : (
+        <p>{i18n.t("archive.purgeFailed")}</p>
+      )}
+    </div>
+  );
+}
+
+export function Archive() {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+
+  const archived = useQuery({
+    queryKey: ["archive"],
+    queryFn: async (): Promise<ArchivedEntry[]> => {
+      const [nodes, flows] = await Promise.all([
+        data.listNodes({ archivedOnly: true }),
+        data.listFlows({ archivedOnly: true }),
+      ]);
+      const entries: ArchivedEntry[] = [
+        ...nodes.items.flatMap((node) => {
+          // Stable across reloads: after D1 commits, only this key can reach an R2 cleanup receipt.
+          const purgeKey = `purge-${node.id}`;
+          return node.archivedAt
+            ? [
+                {
+                  id: node.id,
+                  title: node.title,
+                  kind: node.kind,
+                  archivedAt: node.archivedAt,
+                  updatedAt: node.updatedAt,
+                  restore: () =>
+                    data.archiveNode({
+                      nodeId: node.id,
+                      baseUpdatedAt: node.updatedAt,
+                      archived: false,
+                      idempotencyKey: crypto.randomUUID(),
+                    }),
+                  purge: () => data.purgeNode({ nodeId: node.id, idempotencyKey: purgeKey }),
+                  previewPurge: () => data.previewNodePurge({ nodeId: node.id }),
+                } satisfies ArchivedEntry,
+              ]
+            : [];
+        }),
+        ...flows.items.flatMap((flow: Flow) =>
+          flow.archivedAt
+            ? [
+                {
+                  id: flow.id,
+                  title: flow.title,
+                  kind: "flow" as const,
+                  archivedAt: flow.archivedAt,
+                  updatedAt: flow.updatedAt,
+                  restore: () =>
+                    data.archiveFlow({
+                      flowId: flow.id,
+                      baseUpdatedAt: flow.updatedAt,
+                      archived: false,
+                      idempotencyKey: crypto.randomUUID(),
+                    }),
+                  purge: () => data.purgeFlow({ flowId: flow.id }),
+                } satisfies ArchivedEntry,
+              ]
+            : [],
+        ),
+      ];
+      // Newest first, across both kinds: the thing somebody is looking for is almost always the
+      // thing they just archived.
+      return entries.sort((a, b) => b.archivedAt.localeCompare(a.archivedAt));
+    },
+  });
+
+  // ⚠️ `baseUpdatedAt` from the row that is on screen, exactly as archiving used it. Restoring is
+  // a change like any other and takes the same conflict route — without it, two people tidying up
+  // at once would silently overwrite each other.
+  const restore = useMutation({
+    mutationFn: async (entry: ArchivedEntry) => await entry.restore(),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["archive"] }),
+        // The tree gets it back, so every level has to be asked again — the entry may sit
+        // anywhere, and the archive does not know where.
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
+        queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+      ]);
+    },
+  });
+
+  // ⚠️ The confirmation is a real dialog, not a `window.confirm` — it has to name the thing and say
+  // that it does not come back. The state lives here because the row underneath disappears the
+  // moment the purge goes through.
+  const [confirming, setConfirming] = useState<ArchivedEntry | null>(null);
+  // Whether anything has scrolled away under the header. See the header markup for why.
+  const [scrolled, setScrolled] = useState(false);
+  const preview = useQuery({
+    queryKey: ["purge-preview", confirming?.id],
+    queryFn: async () => await confirming?.previewPurge?.(),
+    enabled: Boolean(confirming?.previewPurge),
+    retry: false,
+  });
+  const purge = useMutation({
+    mutationFn: async (entry: ArchivedEntry) => await entry.purge(),
+    onSuccess: async () => {
+      setConfirming(null);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["archive"] }),
+        // The tree and the graph did not show the node, but its DISAPPEARANCE can be visible
+        // elsewhere: a reference to it no longer resolves afterwards.
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
+        queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+      ]);
+    },
+  });
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* ⚠️ The rule below the header belongs to the SCROLL STATE, not to the header. While nothing
+          has scrolled away, it separates a heading from the content that heading is about, which is
+          a line drawn for no reason. It earns its place the moment content slides underneath.
+
+          The width is set from the start and only the COLOUR changes. Adding the border on scroll
+          would grow the header by one pixel at that moment and shove the whole list down — visible,
+          and exactly at the point where the eye is already following movement (#741).
+
+          ⚠️ `motion-reduce:transition-none` is not decoration. Nothing in this repository disarms a
+          colour transition for a reader who asked for less movement — there is no global
+          `prefers-reduced-motion` rule in the stylesheets — so a fade added here would run for them
+          too unless it says otherwise. The line still appears either way; only the fade is dropped. */}
+      <div
+        data-slot="pane-header"
+        className={cn(
+          "border-b border-transparent px-6 py-4 transition-colors motion-reduce:transition-none",
+          scrolled && "border-border",
+        )}
+      >
+        <h1 className="text-lg font-medium text-foreground">{i18n.t("archive.title")}</h1>
+        <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+          {i18n.t("archive.description")}
+        </p>
+      </div>
+      <div
+        data-slot="pane-body"
+        // Reading the position off the event rather than holding a ref: React skips the re-render
+        // when the boolean has not changed, so a scroll of 400 pixels still costs one render.
+        onScroll={(event) => setScrolled(event.currentTarget.scrollTop > 0)}
+        className="min-h-0 flex-1 overflow-y-auto px-6 py-4"
+      >
+        {archived.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("archive.failed")}
+          </p>
+        ) : null}
+        {restore.isError ? (
+          <p role="alert" className="mb-4 text-sm text-destructive">
+            {i18n.t("archive.restoreFailed")}
+          </p>
+        ) : null}
+        {/* ⚠️ On the page only while no dialog is open (#601). The refusal carries the reason — a
+            flow still calls this one — and it has to survive the dialog it came from; but as long as
+            that dialog stands, the page is `aria-hidden` and this is the copy nobody can reach. */}
+        {purge.isError && !confirming ? (
+          <PurgeRefusal error={purge.error} className="mb-4" />
+        ) : null}
+        {archived.data?.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{i18n.t("archive.empty")}</p>
+        ) : null}
+        <ul className="grid gap-1">
+          {(archived.data ?? []).map((entry) => (
+            <li
+              key={`${entry.kind}-${entry.id}`}
+              className="flex items-center gap-3 rounded-md border px-3 py-2"
+            >
+              {(() => {
+                // The same map the tree and the folder table draw from — a second one here would
+                // drift the first time a kind is added.
+                // ⚠️ The plain kind icon, deliberately. An archived document is in nobody's
+                // `prompts/list` — the catalogue skips it — so drawing it as an offered command
+                // here would be the one screen claiming something the surface does not do (#775).
+                const Icon = kindIcons[entry.kind];
+                return (
+                  <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+                );
+              })()}
+              <span className="sr-only">{i18n.t(`node.kind.${entry.kind}`)}</span>
+              <span className="grid min-w-0 flex-1 leading-tight">
+                <span className="truncate text-sm font-medium">{entry.title}</span>
+                <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">
+                  {i18n.t("archive.archived")}
+                  <RelativeTime value={entry.archivedAt} />
+                </span>
+              </span>
+              {/* Both actions stay permanently visible: the archive is the one place where getting
+                  an item back must never depend on discovering a hover-only control. */}
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  {/* The wrapper keeps the tooltip available while the button is disabled. */}
+                  <TooltipTrigger asChild>
+                    <span className="inline-flex shrink-0">
+                      <button
+                        type="button"
+                        disabled={restore.isPending}
+                        onClick={() => restore.mutate(entry)}
+                        aria-label={i18n.t(
+                          restore.isPending && restore.variables?.id === entry.id
+                            ? "archive.restoring"
+                            : "archive.restore",
+                          { title: entry.title },
+                        )}
+                        aria-busy={restore.isPending && restore.variables?.id === entry.id}
+                        className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+                      >
+                        {restore.isPending && restore.variables?.id === entry.id ? (
+                          <LoaderCircle aria-hidden="true" className="size-4 animate-spin" />
+                        ) : (
+                          <ArchiveRestore aria-hidden="true" className="size-4" />
+                        )}
+                      </button>
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {i18n.t(
+                      restore.isPending && restore.variables?.id === entry.id
+                        ? "archive.restoringAction"
+                        : "archive.restoreAction",
+                    )}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <button
+                type="button"
+                disabled={purge.isPending}
+                onClick={() => {
+                  // ⚠️ The last refusal is cleared as the NEXT dialog opens, not when one closes:
+                  // the sentence has to outlive the dialog it came from (#601), and it must not be
+                  // standing in a dialog about a different entry — that would answer a question
+                  // nobody asked, about the wrong thing.
+                  purge.reset();
+                  setConfirming(entry);
+                }}
+                aria-label={i18n.t("archive.purge", { title: entry.title })}
+                className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-destructive outline-none hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+              >
+                <Trash2 aria-hidden="true" className="size-4" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+      {confirming ? (
+        <Modal title={i18n.t("archive.purge.title")} close={() => setConfirming(null)}>
+          <p className="text-sm text-muted-foreground">
+            {i18n.t("archive.purge.body", { title: confirming.title })}
+          </p>
+          {confirming.previewPurge && preview.data ? (
+            <div className="mt-2 space-y-2 text-sm text-muted-foreground">
+              <p>{i18n.t("archive.purge.items", { count: preview.data.totalItems })}</p>
+              {/* ⚠️ The names, not only the number (D71, #733): what is confirmed here cannot be
+                  undone, and "82 items" is not something a person can decide about. The list the
+                  API sends is capped, so whatever it does not carry is counted out loud. */}
+              {preview.data.items.length > 0 ? (
+                <ul className="max-h-40 list-disc overflow-y-auto pl-5">
+                  {preview.data.items.map((entry) => (
+                    <li key={entry.id}>{entry.title}</li>
+                  ))}
+                </ul>
+              ) : null}
+              {preview.data.totalItems > preview.data.items.length ? (
+                <p>
+                  {i18n.t("archive.purge.items.more", {
+                    count: preview.data.totalItems - preview.data.items.length,
+                  })}
+                </p>
+              ) : null}
+              <p>
+                {preview.data.inboundLinks === 0
+                  ? i18n.t("archive.purge.links.none")
+                  : preview.data.inboundLinks === 1
+                    ? i18n.t("archive.purge.links.one")
+                    : i18n.t("archive.purge.links.many", { count: preview.data.inboundLinks })}
+              </p>
+            </div>
+          ) : null}
+          {confirming.previewPurge && preview.isPending ? (
+            <p className="mt-2 text-sm text-muted-foreground">
+              {i18n.t("archive.purge.previewLoading")}
+            </p>
+          ) : null}
+          {confirming.previewPurge && preview.isError ? (
+            <p role="alert" className="mt-2 text-sm text-destructive">
+              {i18n.t("archive.purge.previewFailed")}
+            </p>
+          ) : null}
+          <p className="mt-2 text-sm text-muted-foreground">{i18n.t("archive.purge.grants")}</p>
+          {/* ⚠️ Inside the dialog, because the dialog stays open on a refusal and hides the page
+              behind it from the accessibility tree entirely (#601). Above the buttons rather than
+              below them: the answer belongs between the reason and the button that asks again. */}
+          {purge.isError ? <PurgeRefusal error={purge.error} className="mt-4" /> : null}
+          <div className="mt-6 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setConfirming(null)}
+              className="inline-flex h-8 items-center rounded-md border px-3 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("archive.purge.cancel")}
+            </button>
+            <button
+              type="button"
+              disabled={
+                purge.isPending ||
+                (Boolean(confirming.previewPurge) && (preview.isPending || preview.isError))
+              }
+              onClick={() => purge.mutate(confirming)}
+              className="inline-flex h-8 items-center gap-2 rounded-md bg-destructive px-3 text-sm font-medium text-destructive-foreground outline-none hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+            >
+              <Trash2 aria-hidden="true" className="size-4" />
+              {i18n.t("archive.purge.confirm")}
+            </button>
+          </div>
+        </Modal>
+      ) : null}
+    </div>
+  );
+}

package/ui/src/attachment-detail/attachment-detail.ts

@@ -0,0 +1,52 @@
+/**
+ * What a file IS, and how big it is, without opening it.
+ *
+ * ⚠️ **Here rather than beside the viewer, and the reason is the bundle** (#819). Since the details
+ * field of every kind is drawn from the title line, these two are on the main path — while
+ * `attachmentFormatDetail`, which unpacks the file itself, stays with the viewer and keeps `fflate`
+ * in the viewer's lazy chunk. Two modules, drawn along the line between "cheap and always needed"
+ * and "expensive and only for a file that is open".
+ */
+// ⚠️ `audio` and `video` carry no preview (nothing under `file-preview/` renders either), but they
+// are still their OWN kind here rather than folding into `unsupported` (#815, Jack's decision of
+// 2026-08-29). What decides membership in this type is what a reader should be able to TELL APART,
+// not what this package can render — an audio file and a spreadsheet are just as unrelated as a PDF
+// and a spreadsheet, and drawing both of the first two as the same generic file would hide exactly
+// the distinction a reader came here for.
+export type AttachmentPreviewKind =
+  | "image"
+  | "pdf"
+  | "word"
+  | "spreadsheet"
+  | "presentation"
+  | "audio"
+  | "video"
+  | "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"],
+  audio: ["aac", "flac", "m4a", "mp3", "ogg", "wav"],
+  video: ["avi", "mkv", "mov", "mp4", "webm"],
+};
+
+export function attachmentPreviewKind(title: string, mediaType: string): AttachmentPreviewKind {
+  if (mediaType.startsWith("image/")) return "image";
+  if (mediaType === "application/pdf") return "pdf";
+  if (mediaType.startsWith("audio/")) return "audio";
+  if (mediaType.startsWith("video/")) return "video";
+  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`;
+}

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

@@ -0,0 +1,166 @@
+import type { NodeDocument } from "@contract/node.ts";
+import { useQuery } from "@tanstack/react-query";
+import { unzipSync } from "fflate";
+import { FileQuestion } from "lucide-react";
+import { Component, lazy, type ReactNode, Suspense, useEffect, useMemo, useState } from "react";
+import {
+  type AttachmentPreviewKind,
+  attachmentPreviewKind,
+} from "@/attachment-detail/attachment-detail.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const FilePreview = lazy(async () => ({
+  default: (await import("@/file-preview/file-preview.tsx")).FilePreview,
+}));
+
+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;
+  }
+  // Neither carries a zip archive to look inside, and neither has anything else this function
+  // could read out of the bytes (#815) — same as `unsupported`.
+  if (kind === "unsupported" || kind === "audio" || kind === "video") 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 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 (
+    // ⚠️ **No details button of its own since #819.** What stood behind it is the details field
+    // every kind now has, in the title line — a file was the one kind that had one, and a second
+    // one here would be the exception the ticket exists to end.
+    <div className="flex min-h-0 flex-1 flex-col px-6 pb-6">
+      <div
+        data-preview-kind={kind}
+        className={cn(
+          "relative flex min-h-0 flex-1 overflow-hidden rounded-xl",
+          kind === "image" ? "bg-muted/40" : "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" || kind === "audio" || kind === "video" ? (
+            // ⚠️ Audio and video are told apart by their OWN icon everywhere else in the
+            // application (#815), but nothing under `file-preview/` renders either — the message
+            // here is the same one an unrecognised file gets, not a claim of a player this screen
+            // does not have.
+            <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>
+      </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">
+      <img src={url} alt={title} className="h-auto w-auto max-h-full max-w-full object-contain" />
+    </div>
+  ) : null;
+}

package/ui/src/blocknote-view/blocknote-view.tsx

@@ -0,0 +1,30 @@
+import { type DefaultReactSuggestionItem, getDefaultReactSlashMenuItems } from "@blocknote/react";
+import { BlockNoteView as LibraryBlockNoteView } from "@blocknote/shadcn";
+import type { ComponentType, ReactNode } from "react";
+
+// BlockNote 0.52's generic view declaration conflicts with exactOptionalPropertyTypes even though
+// useCreateBlockNote returns its matching default editor. Keep that upstream type seam in one place.
+const CompatibleBlockNoteView = LibraryBlockNoteView as unknown as ComponentType<{
+  editor: unknown;
+  onChange(): void;
+  children?: ReactNode;
+}>;
+
+// `children` is how BlockNote mounts its own controllers — the slash menu among them — inside the
+// editor's context. It travels through this seam rather than around it, so there is still one place
+// that knows about the library's types.
+export function BlockNoteView(props: { editor: unknown; onChange(): void; children?: ReactNode }) {
+  return <CompatibleBlockNoteView {...props} />;
+}
+
+// The same seam once more: the parameter type of BlockNote's own slash-menu helper does not accept
+// an editor built from a schema of ours, because `heading`'s optional `isToggleable` prop fails the
+// library's own `PropSchema` constraint under `exactOptionalPropertyTypes`. The editor is exactly
+// what the helper wants at run time — it is the declaration that cannot say so.
+const compatibleDefaultSlashMenuItems = getDefaultReactSlashMenuItems as unknown as (
+  editor: unknown,
+) => DefaultReactSuggestionItem[];
+
+export function defaultSlashMenuItems(editor: unknown): DefaultReactSuggestionItem[] {
+  return compatibleDefaultSlashMenuItems(editor);
+}