@anchrd/intel 0.59.0

package/ui/src/node-import/node-import.tsx

@@ -0,0 +1,418 @@
+import { MaxAttachmentBytes, MaxIndexedAttachmentBytes } from "@contract/node.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { zipSync } from "fflate";
+import { FileArchive, FolderUp, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
+import { IntelRequestError } from "@/data/intel-data-provider/intel-data-provider.ts";
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * Everything that brings something in from the machine, as one seam both menus share (#822).
+ *
+ * ⚠️ It used to be two of the three: the zip and the folder lived here, while a single file was
+ * uploaded by the tree alone. That was the whole of the gap #822 closes — at a folder one could
+ * bring in a zip and a directory but not a file, because the entry for it existed only in the
+ * tree's plus. One question, one door, and the door is here rather than in either menu.
+ *
+ * ⚠️ Import is offered in two places and they are not alternatives: the three-dot menu of a folder
+ * files into that folder, and the tree's root button is the ONLY way to reach the top level — a
+ * three-dot menu always has a resource, and the root is not one (#346).
+ */
+export type ImportSource = "files" | "folder" | "zip";
+
+// The server refuses anything larger anyway (#137); refusing here saves uploading it first.
+const MaxImportBytes = 64 * 1024 * 1024;
+
+// A picked directory as the zip the import endpoint reads. `webkitRelativePath` carries the folder
+// structure, with the picked folder itself as the first segment — kept, so the folder lands as a
+// folder rather than spilling its contents into the target.
+async function zipOfDirectory(files: readonly File[]): Promise<Blob> {
+  const entries: Record<string, Uint8Array> = {};
+  let total = 0;
+  for (const file of files) {
+    const path = file.webkitRelativePath || file.name;
+    total += file.size;
+    if (total > MaxImportBytes) throw new Error("Import exceeds the 64 MB limit");
+    entries[path] = new Uint8Array(await file.arrayBuffer());
+  }
+  return new Blob([zipSync(entries).slice().buffer], { type: "application/zip" });
+}
+
+/**
+ * Which files become a node of their own kind rather than an attachment: markdown is a document,
+ * CSV is a table. They travel as a one-file bundle, because the importer is what knows how to read
+ * them — the attachment door would file the same bytes as a file nobody can edit.
+ */
+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 byte count as the sentence beside it says it (#821).
+ *
+ * ⚠️ Megabytes of a million, because that is what the limit IS: the constants are round decimal
+ * numbers, and dividing them by 1024 would put "47.7 MB" in front of somebody whose file manager
+ * says the same file is 48 MB. The number in the message and the number in the check have to be
+ * the same number.
+ */
+function megabytes(bytes: number): string {
+  return `${Math.round(bytes / 1_000_000)} MB`;
+}
+
+// The refusal's own code, which is what tells "too big" from every other reason an upload fails.
+// The prose cannot: it is a server sentence in one language.
+function codeOf(error: unknown): string | null {
+  return error instanceof IntelRequestError ? error.code : null;
+}
+
+/** One file, filed under `parentId`, as the node its name says it should be (#821). */
+async function uploadOne(
+  data: IntelDataProvider,
+  parentId: string | null,
+  file: File,
+): Promise<string> {
+  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;
+  }
+  // ⚠️ Behind the native branch, never in front of it. A markdown or CSV file becomes a document
+  // through the bundle import, which has a limit of its own — refusing it here would turn away a
+  // file this limit says nothing about, with a sentence about a door it never takes.
+  //
+  // ⚠️ Refused here rather than on the way back: 50 MB the server will not keep is 50 MB nobody
+  // has to send. The server refuses it too; this is the cheaper half of one rule, never its only
+  // half.
+  if (file.size > MaxAttachmentBytes) {
+    throw new IntelRequestError(
+      413,
+      "attachment_too_large",
+      `Attachment exceeds ${MaxAttachmentBytes} bytes`,
+    );
+  }
+  const node = await data.createNodes({
+    parentId,
+    kind: "attachment",
+    title: file.name,
+    description: null,
+    idempotencyKey: crypto.randomUUID(),
+  });
+  try {
+    await data.saveNodeAttachmentBytes({
+      nodeId: node.id,
+      baseVersionId: null,
+      file,
+      idempotencyKey: crypto.randomUUID(),
+    });
+  } catch (error) {
+    // An attachment node without bytes is a row nobody can open. Take it back rather than leaving
+    // it in the tree, but never let the cleanup hide the real failure.
+    const current = await data.getNode(node.id).catch(() => null);
+    if (current?.version === null && current.node.updatedAt === node.updatedAt) {
+      await data
+        .archiveNode({
+          nodeId: node.id,
+          baseUpdatedAt: current.node.updatedAt,
+          archived: true,
+          idempotencyKey: crypto.randomUUID(),
+        })
+        .catch(() => undefined);
+    }
+    throw error;
+  }
+  return node.id;
+}
+
+/** What a run of n files left behind: what it made, and what it could not. */
+export interface UploadOutcome {
+  parentId: string | null;
+  created: string[];
+  failed: { name: string; error: unknown }[];
+  /** Whether any of the uploaded files is too big for its contents to be indexed (#821). */
+  someUnsearchable: boolean;
+}
+
+export interface NodeImport {
+  /** Opens the one window that offers all three ways in, filing into `parentId`. */
+  open(parentId: string | null): void;
+  /**
+   * The window, the three hidden pickers and what the run has to say. Render once inside the
+   * component that called the hook.
+   *
+   * ⚠️ The pickers portal to `document.body` rather than landing where they are written. A file
+   * input is invisible but still an element, and the three-dot menu sits at the end of a title
+   * line whose rule is that the menu is the LAST thing in it (#53).
+   *
+   * ⚠️ `tabIndex={-1}`, and that is not a detail. The folder table renders one `ResourceMenu` PER
+   * ROW, so a folder holding twenty folders holds sixty of these — and `sr-only` hides an element
+   * from the eye, never from the tab order. The control that opens a picker is the button in the
+   * window; the input is the mechanism behind it and is clicked by code, never by a person.
+   */
+  inputs: React.ReactNode;
+  isError: boolean;
+}
+
+export function useNodeImport(options: {
+  /**
+   * Where this set of pickers files, in words — a folder title, or the name of the top level.
+   *
+   * ⚠️ Not decoration. Both callers render their inputs into `document.body`, so on a folder screen
+   * there are two of each in the document at once: the tree's (which files at the top level) and
+   * this menu's. `sr-only` keeps them out of sight but not out of the accessibility tree or the tab
+   * order, and two controls called "Import zip bundle" are two controls a reader cannot tell apart
+   * — nor, as the first browser run of #388 showed, can anything else looking one up by name.
+   */
+  where: string;
+  onImported?(parentId: string | null): void | Promise<void>;
+  /**
+   * What the caller does with the nodes an upload made. The tree navigates to a single one and
+   * reveals it; a menu on a folder only refreshes. The hook does neither by itself: where the
+   * reader lands is a decision of the screen they were on.
+   */
+  onUploaded?(outcome: UploadOutcome): void | Promise<void>;
+}): NodeImport {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+  const [importTo, setImportTo] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const [progress, setProgress] = useState<{ done: number; total: number } | null>(null);
+  const [outcome, setOutcome] = useState<UploadOutcome | null>(null);
+  const zipInput = useRef<HTMLInputElement>(null);
+  const folderInput = useRef<HTMLInputElement>(null);
+  const filesInput = useRef<HTMLInputElement>(null);
+
+  async function refresh(parentId: string | null): Promise<void> {
+    await options.onImported?.(parentId);
+    await Promise.all([
+      // ⚠️ Every level, not the one imported into: the target folder's own row carries whether it
+      // can be opened, and it stands one level higher (#519). An import into an empty folder was
+      // otherwise unreachable in the tree until the page was reloaded.
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
+      queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
+      // The graph view of that same level draws exactly this list (#19).
+      queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
+      // A bundle can carry flows, so the flow collections go stale alongside the node ones.
+      queryClient.invalidateQueries({ queryKey: ["flows"] }),
+    ]);
+  }
+
+  // One import, one request, one answer (#137): the server creates the whole subtree or nothing, so
+  // this mutation never has a partial state to clean up after — unlike the upload beside it, whose
+  // two steps can strand a node.
+  const importBundle = useMutation({
+    mutationFn: async ({ parentId, zip }: { parentId: string | null; zip: Blob }) => {
+      if (zip.size > MaxImportBytes) throw new Error("Import exceeds the 64 MB limit");
+      const result = await data.importNodeBundle({
+        nodeId: parentId,
+        zip,
+        idempotencyKey: crypto.randomUUID(),
+      });
+      return { parentId, result };
+    },
+    onSuccess: async (imported) => {
+      setOpen(false);
+      await refresh(imported.parentId);
+    },
+  });
+
+  /**
+   * n files, one after another (#822).
+   *
+   * ⚠️ **Sequential, and that is a decision rather than the simpler code.** Each file may be 50 MB
+   * (#821); ten of them at once is half a gigabyte in flight from one browser, and a progress that
+   * says "3 of 10" while all ten are half-done says nothing. One at a time is also what makes the
+   * failure of one file a fact about that file.
+   *
+   * ⚠️ **A file that fails does not take the others with it, and nothing is rolled back.** Ten
+   * files are ten nodes, not one transaction — undoing the six that worked would delete what the
+   * reader asked for because the seventh did not. What the run owes them instead is the NAMES of
+   * the ones that did not make it, which is what the window shows when it is over.
+   */
+  const upload = useMutation({
+    mutationFn: async ({ parentId, files }: { parentId: string | null; files: File[] }) => {
+      const created: string[] = [];
+      const failed: { name: string; error: unknown }[] = [];
+      let someUnsearchable = false;
+      for (const [index, file] of files.entries()) {
+        setProgress({ done: index + 1, total: files.length });
+        try {
+          created.push(await uploadOne(data, parentId, file));
+          if (!nativeUpload(file) && file.size > MaxIndexedAttachmentBytes) {
+            someUnsearchable = true;
+          }
+        } catch (error) {
+          failed.push({ name: file.name, error });
+        }
+      }
+      return { parentId, created, failed, someUnsearchable };
+    },
+    onSettled: () => setProgress(null),
+    onSuccess: async (result) => {
+      setOutcome(result);
+      // ⚠️ The window closes only when there is nothing left to say. A run that lost a file has to
+      // stay on screen with the name of it — a toast that disappears is the same as silence for
+      // somebody who looked away while ten files uploaded.
+      if (result.failed.length === 0 && !result.someUnsearchable) setOpen(false);
+      if (result.created.length > 0) await refresh(result.parentId);
+      await options.onUploaded?.(result);
+    },
+  });
+
+  function pick(source: ImportSource): void {
+    setOutcome(null);
+    const input = source === "zip" ? zipInput : source === "folder" ? folderInput : filesInput;
+    input.current?.click();
+  }
+
+  const busy = upload.isPending || importBundle.isPending;
+
+  return {
+    open(parentId) {
+      setImportTo(parentId);
+      setOutcome(null);
+      setOpen(true);
+    },
+    isError: importBundle.isError || upload.isError,
+    inputs: createPortal(
+      <>
+        {open ? (
+          <Modal
+            title={i18n.t("import.title", { where: options.where })}
+            close={() => setOpen(false)}
+          >
+            <div className="flex flex-col gap-2">
+              {(
+                [
+                  ["files", Upload, "import.files", "import.files.long"],
+                  ["folder", FolderUp, "import.folder", "import.folder.long"],
+                  ["zip", FileArchive, "import.zip", "import.zip.long"],
+                ] as const
+              ).map(([source, Icon, labelKey, descriptionKey]) => (
+                <button
+                  key={source}
+                  type="button"
+                  disabled={busy}
+                  onClick={() => pick(source)}
+                  className="flex items-start gap-3 rounded-md border p-3 text-left outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+                >
+                  <Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+                  <span className="flex flex-col">
+                    <span className="text-sm font-medium">{i18n.t(labelKey)}</span>
+                    <span className="text-sm text-muted-foreground">{i18n.t(descriptionKey)}</span>
+                  </span>
+                </button>
+              ))}
+              {/* ⚠️ `role="status"`, not `alert`: it is the same sentence over and over while the
+                  run walks through the files, and an alert would interrupt a screen reader once per
+                  file. */}
+              {progress ? (
+                <p role="status" className="text-sm text-muted-foreground">
+                  {i18n.t("import.progress", {
+                    done: progress.done,
+                    total: progress.total,
+                  })}
+                </p>
+              ) : null}
+              {outcome && outcome.failed.length > 0 ? (
+                <p role="alert" className="text-sm text-destructive">
+                  {/* ⚠️ Two sentences, and which one is chosen is not a nicety: "everything else
+                      was" is FALSE when nothing else existed. A run in which every file failed has
+                      no rest to reassure anybody about, and telling somebody their other files
+                      landed when none did is worse than saying nothing. */}
+                  {i18n.t(outcome.created.length === 0 ? "import.failed.all" : "import.failed", {
+                    names: outcome.failed.map((failure) => failure.name).join(", "),
+                  })}
+                  {/* The limit belongs beside the names only when the limit is the reason — every
+                      one of them. A run that lost one file to its size and another to the network
+                      would otherwise blame the size for both. */}
+                  {outcome.failed.every(
+                    (failure) => codeOf(failure.error) === "attachment_too_large",
+                  )
+                    ? ` ${i18n.t("import.failed.limit", { limit: megabytes(MaxAttachmentBytes) })}`
+                    : ""}
+                </p>
+              ) : null}
+              {outcome?.someUnsearchable ? (
+                <p role="status" className="text-sm text-muted-foreground">
+                  {i18n.t("import.notSearched", {
+                    limit: megabytes(MaxIndexedAttachmentBytes),
+                  })}
+                </p>
+              ) : null}
+              {importBundle.isError ? (
+                <p role="alert" className="text-sm text-destructive">
+                  {i18n.t("tree.importFailed")}
+                </p>
+              ) : null}
+            </div>
+          </Modal>
+        ) : null}
+        <input
+          ref={filesInput}
+          type="file"
+          tabIndex={-1}
+          multiple
+          className="sr-only"
+          aria-label={i18n.t("tree.uploadInto", { where: options.where })}
+          onChange={(event) => {
+            const files = Array.from(event.target.files ?? []);
+            if (files.length > 0) upload.mutate({ parentId: importTo, files });
+            event.currentTarget.value = "";
+          }}
+        />
+        <input
+          ref={zipInput}
+          type="file"
+          tabIndex={-1}
+          accept=".zip,application/zip"
+          className="sr-only"
+          aria-label={i18n.t("tree.importZipInto", { where: options.where })}
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            if (file) importBundle.mutate({ parentId: importTo, zip: file });
+            event.currentTarget.value = "";
+          }}
+        />
+        {/* `webkitdirectory` is the one way a browser hands over a folder; React does not know the
+            attribute, so it is spread past the type checker rather than invented as a prop. */}
+        <input
+          ref={folderInput}
+          type="file"
+          tabIndex={-1}
+          multiple
+          {...({ webkitdirectory: "" } as object)}
+          className="sr-only"
+          aria-label={i18n.t("tree.importFolderInto", { where: options.where })}
+          onChange={(event) => {
+            const files = Array.from(event.target.files ?? []);
+            const parentId = importTo;
+            if (files.length > 0) {
+              void zipOfDirectory(files)
+                .then((zip) => importBundle.mutate({ parentId, zip }))
+                .catch(() => importBundle.mutate({ parentId, zip: new Blob([]) }));
+            }
+            event.currentTarget.value = "";
+          }}
+        />
+      </>,
+      document.body,
+    ),
+  };
+}

package/ui/src/node-save-error.ts

@@ -0,0 +1,46 @@
+import { IntelRequestError } from "@/data/intel-data-provider/intel-data-provider.ts";
+
+/**
+ * Which of the three sentences a failed save is told with.
+ *
+ * ⚠️ The refusal's `code`, never the server's prose: `POST /nodes/{id}/versions` words the conflict
+ * as `A newer version already exists`, and an English sentence from the API is not a translation
+ * source. The code is the contract (`ProblemDetails.code`), and `IntelRequestError` is what carries
+ * it this far.
+ *
+ * ⚠️ They are not a vaguer and a sharper wording of one event. `node.saveError` says "reload and
+ * try again", which is right for a network failure and dangerous for a conflict: reloading without
+ * knowing that a foreign version now stands loses either the reader's own work or, on the second
+ * attempt, the other one. That is why this distinction is worth a branch at all (#451).
+ *
+ * ⚠️ **And the third for the same reason, one step further** (#785): `document_content_required`
+ * says this node will NEVER take an editor body. "Reload and try again" then asks for a repetition
+ * that cannot succeed — the reader reloads, loses what they typed, retypes it and is refused again.
+ * The sentence has to say that the text belongs somewhere else.
+ *
+ * ⚠️ **No kind this UI renders the editor for can produce it — and it is still reachable.** The
+ * screen next door sends `folder`, `attachment`, `table` and `board` to their own panels before the
+ * editor is ever reached, and the board panel opens it for a card alone, so every kind that gets
+ * here is one the API accepts. What makes the branch live is that this package and the server ship
+ * separately, on separate version numbers (ADR-0002): a UI carrying this file, served against a
+ * server older than #785, answers exactly this code for a card — the one case where "reload and try
+ * again" is worst, because that deployment will never stop refusing.
+ *
+ * ⚠️ The server package is deliberately not named here. `check:boundaries` reads this file as text
+ * and cannot tell a comment from an import, so writing the name would fail the build over a
+ * sentence.
+ *
+ * ⚠️ Not `resourceErrorKey`: that one answers for the resource menu and the column dialog, and its
+ * sentences are the `resource.*` ones. Writing a document has its own three.
+ *
+ * ⚠️ Flat and on its own since #820, for the same reason `resource-error.ts` is: the editor and the
+ * code view save the same document through the same door, and both have to say the same sentence
+ * about a refusal. Importing it from the editor would pull that whole chunk into the code view,
+ * which is the one surface that exists to be cheap.
+ */
+export function saveErrorKey(error: unknown): string {
+  if (!(error instanceof IntelRequestError)) return "node.saveError";
+  if (error.code === "version_conflict") return "node.saveConflict";
+  if (error.code === "document_content_required") return "node.saveUnsupported";
+  return "node.saveError";
+}

package/ui/src/node-source/node-source.tsx

@@ -0,0 +1,128 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteDocument, BlockNoteMediaType, type NodeDocument } from "@contract/node.ts";
+import { useMutation } from "@tanstack/react-query";
+import { useId, useMemo, useState } from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { documentMarkdown, markdownToBlocks } from "@/document-markdown/document-markdown.ts";
+import { type IntelEditor, intelEditorSchema } from "@/editor-schema/editor-schema.ts";
+import type { I18n } from "@/i18n/i18n.types.ts";
+import { saveErrorKey } from "@/node-save-error.ts";
+import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
+
+/**
+ * The document as it really stands: its markdown, readable and writable (#820).
+ *
+ * ⚠️ **The markdown is the truth, the editor is a nicer view onto it** (Jack, 2026-08-30). That is
+ * why this view may write at all, and it is also why it could not be built before #826: until then
+ * the editor rewrote everything it did not understand on the way back out, so somebody who wrote
+ * here and then switched over lost it silently. Since #826 what the editor cannot show is parked
+ * and written back byte for byte, and the switch costs nothing.
+ *
+ * ⚠️ **It stores the same payload the editor stores, with `markdown` set to exactly what stands in
+ * the box.** Not `text/markdown`: a document that flips its media type between two saves would make
+ * `blocks` and `markdown` disagree about which of them is current, and `payload.markdown` is the
+ * field the search reads (`indexing.ts`). The blocks are derived from that same text, so both
+ * halves say the same thing, and the text is the half that was written by hand.
+ */
+export function NodeSource({
+  data,
+  document,
+  i18n,
+  onSaved,
+}: {
+  data: IntelDataProvider;
+  document: NodeDocument;
+  i18n: I18n;
+  onSaved(document: NodeDocument): void;
+}) {
+  const fieldId = useId();
+  const stored = useMemo(() => documentMarkdown(document.content), [document.content]);
+  const [text, setText] = useState(stored);
+  /**
+   * What stands on the server. Saving moves it forward, and every question of "is there anything to
+   * save" is answered against it — the same line `node-editor.tsx` draws.
+   *
+   * ⚠️ State, not a ref, and the difference is visible: `dirty` is derived from it, so moving it
+   * has to draw the screen again. The editor next door keeps its own in a ref because it is read
+   * inside `onChange` on every keystroke and must be the current value there; here nothing reads it
+   * outside a render. A ref would leave the save button standing after a successful save until some
+   * other reason to render came along, which is a control that lies about the state of the
+   * document. Found in review on #833.
+   */
+  const [savedText, setSavedText] = useState(stored);
+  /**
+   * ⚠️ An editor with no screen, only to read the text into blocks.
+   *
+   * The blocks are not what this view shows, but they are half of what a document stores, and the
+   * one place that knows how to make them out of markdown is `markdownToBlocks`. Building them here
+   * from the text that was just written is what keeps the two halves of the payload in step; the
+   * alternative — writing the text and leaving the old blocks beside it — is a document that says
+   * two different things depending on which surface reads it.
+   */
+  const headless = useMemo(
+    () => BlockNoteEditor.create({ schema: intelEditorSchema } as never) as unknown as IntelEditor,
+    [],
+  );
+
+  const save = useMutation({
+    mutationFn: async () => {
+      const sent = text;
+      const payload = BlockNoteDocument.parse({
+        format: "blocknote",
+        schemaVersion: 1,
+        blocks: markdownToBlocks(headless, sent),
+        markdown: sent,
+      });
+      const node = await data.saveNode({
+        nodeId: document.node.id,
+        // ⚠️ The same conflict route as everywhere else: the version this text was written against.
+        // Without it two people writing at once end with one of them silently overwritten.
+        baseVersionId: document.version?.id ?? null,
+        content: JSON.stringify(payload),
+        mediaType: BlockNoteMediaType,
+        idempotencyKey: crypto.randomUUID(),
+      });
+      // ⚠️ An answer that carries no version did not save anything (#432). Letting it through would
+      // move the saved text forward, drop the unsaved warning and leave the reader free to close
+      // the tab over a document the server still reports as empty.
+      if (!node.version) throw new Error("save_without_version");
+      // ⚠️ What was SENT, not what stands in the box when the answer comes back. Saving crosses the
+      // network, and typing during it is normal.
+      return { node, sent };
+    },
+    onSuccess: ({ node, sent }) => {
+      setSavedText(sent);
+      onSaved(node);
+    },
+  });
+
+  const dirty = text !== savedText;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* Up into the title line, like the editor's own button: this is where `dirty` lives. */}
+      <ActionSlot name="title-actions">
+        <SaveButton dirty={dirty} saving={save.isPending} onSave={() => save.mutate()} />
+      </ActionSlot>
+      <UnsavedChangesGuard dirty={dirty} />
+      {save.isError && (
+        <p role="alert" className="mx-6 mt-4 text-sm text-destructive">
+          {i18n.t(saveErrorKey(save.error))}
+        </p>
+      )}
+      <label htmlFor={fieldId} className="sr-only">
+        {i18n.t("node.source.label")}
+      </label>
+      <textarea
+        id={fieldId}
+        value={text}
+        spellCheck={false}
+        onChange={(event) => setText(event.target.value)}
+        // ⚠️ `whitespace-pre` and no wrapping off: a source view that reflows long lines shows a
+        // shape the file does not have, and the head is exactly where that matters.
+        className="min-h-0 flex-1 resize-none bg-transparent px-6 py-6 font-mono text-sm leading-relaxed outline-none focus-visible:ring-0"
+      />
+    </div>
+  );
+}