pi-weave 0.3.8 → 0.3.9

package/src/web/client/graph/Graph.tsx

@@ -45,6 +45,7 @@ import {
 } from "./column.model";
 import type { PositionStorage } from "./positions";
 import type { GraphRenderer, RendererFactory } from "./renderer";
+import type { TrailGlow } from "./graph.model";
 import { schemeOf } from "./scheme";
 import type { SchemeHost } from "./scheme";
 import type { GraphTheme } from "../../shared/themes";
@@ -92,14 +93,21 @@ export interface GraphProps {
    * keeps the ownership where it is and costs one line at each end.
    */
   fit: { current: (() => void) | null };
-
+  /** Recall-trail glows by node id (`trail/trail.model.ts`). Omitted means none. */
+  trail?: ReadonlyMap<string, TrailGlow>;
 }
 
+const NO_GLOWS: ReadonlyMap<string, TrailGlow> = new Map();
+
 export function Graph(props: GraphProps) {
   const canvas = useRef<HTMLDivElement | null>(null);
   const renderer = useRef<GraphRenderer | null>(null);
   const dynamics = useRef<GraphSimulation | null>(null);
   const clock = useRef<number | null>(null);
+  // Whether the camera has been fitted to the first settled layout. The
+  // mount frames the *starting* positions, which a settling simulation then
+  // pushes past the edges — a two-note vault opened with clipped circles.
+  const fitted = useRef(false);
   /**
    * Arm the simulation clock — idempotent.
    *
@@ -116,7 +124,13 @@ export function Graph(props: GraphProps) {
       if (engine === null) return;
       engine.tick();
       // Asleep: let the clock die. The next pin re-arms it.
-      if (!engine.awake()) return;
+      if (!engine.awake()) {
+        if (!fitted.current) {
+          fitted.current = true;
+          renderer.current?.fit();
+        }
+        return;
+      }
       renderer.current?.setPositions(engine.positions());
       clock.current = requestAnimationFrame(step);
     };
@@ -146,6 +160,8 @@ export function Graph(props: GraphProps) {
   const preview = graphPreview(props.graph, props.previewId);
 
   // Read by the mount-time `onSelect`, which outlives this render.
+  const trailRef = useRef<ReadonlyMap<string, TrailGlow>>(NO_GLOWS);
+  trailRef.current = props.trail ?? NO_GLOWS;
   const live = useRef({ view, model, onSelect: props.onSelect, selectedId: props.selectedId });
   live.current = { view, model, onSelect: props.onSelect, selectedId: props.selectedId };
 
@@ -195,6 +211,7 @@ export function Graph(props: GraphProps) {
     // the column is already showing.
     instance.setGraph(live.current.model.graph);
     instance.setHighlight(live.current.model.highlight, live.current.selectedId);
+    instance.setTrail(trailRef.current);
     props.fit.current = () => instance.fit();
     return () => {
       instance.destroy();
@@ -242,6 +259,10 @@ export function Graph(props: GraphProps) {
     renderer.current?.setHighlight(model.highlight, props.selectedId);
   }, [model.highlight, props.selectedId]);
 
+  useEffect(() => {
+    renderer.current?.setTrail(trailRef.current);
+  }, [props.trail]);
+
   return (
     <div class="weave-graph">
       {/* Same shape as `ContextRail`'s: the *decision* is `graphEmptyMessage`,

package/src/web/client/graph/column.model.ts

@@ -235,7 +235,7 @@ export function graphCountLabel(visible: number, total: number): string {
 /** What the column says instead of a canvas. `null` means "there is a graph". */
 export function graphEmptyMessage(payload: GraphPayload | null, visible: number): string | null {
   if (payload === null) return "Loading…";
-  if (payload.model.nodes.length === 0) return "Nothing indexed yet — add a note or run /weave-scan.";
+  if (payload.model.nodes.length === 0) return "Nothing here yet — add a note to get started.";
   // A payload with nodes but nothing visible cannot happen through the UI
   // (`clusterAggregate` always keeps the roots), but a truncated response
   // could produce it, and a blank canvas with no explanation reads as a crash.

package/src/web/client/graph/graph.model.ts

@@ -83,11 +83,8 @@ export function graphPalette(theme: GraphTheme): Readonly<Record<ColorSlot, stri
  * - `note` keeps `text` — notes are the product (§1.1), and their identity
  *   is carried by the provenance badge, not by a hue.
  * - Generated code — modules, packages, entry points, git, externals, files
- *   — takes `dim`, the same grey a `generated` row takes in the tree. The
- *   TUI's `kindStyle` (src/pi/viewer/tui/theme.ts) still maps these kinds to
- *   success/warning; the two media disagree on purpose, because a pi theme
- *   has no dark/light stylesheet to violate and a terminal can restyle
- *   everything. Here the sheet decides, and the sheet says calm.
+ *   — takes `dim`, the same grey a `generated` row takes in the tree. Here
+ *   the sheet decides, and the sheet says calm.
  */
 export const KIND_SLOT: Readonly<Record<WireNodeKind, ColorSlot>> = {
   vault: "accent",
@@ -513,7 +510,8 @@ export interface ViewBox {
  * session: the node stays under the cursor, the canvas bounds the drag, and
  * `[fit]` re-frames onto whatever the current positions are.
  *
- * Use the position extent, with a minimum span of four collision radii.
+ * Use the position extent padded by the largest node size, so no circle
+ * at the edge is cut off, with a minimum span of four collision radii.
  * A single node (or coincident nodes) has no extent; Sigma scales layout-unit
  * node sizes by that span, so a near-zero box magnifies one node across the
  * canvas. Pixel-based `stagePadding` cannot prevent that.
@@ -536,7 +534,9 @@ export function frameBox(points: readonly Point[]): ViewBox | null {
     if (p.y > maxY) maxY = p.y;
   }
   if (seen === 0) return null;
-  const padding = Math.max(0, (COLLIDE_RADIUS * 4 - Math.max(maxX - minX, maxY - minY)) / 2);
+  // The extent is of node *centres*; the circles reach past it by up to a
+  // full node size, which clipped the outermost nodes on a small graph.
+  const padding = Math.max(MAX_NODE_SIZE, (COLLIDE_RADIUS * 4 - Math.max(maxX - minX, maxY - minY)) / 2);
   return { x: [minX - padding, maxX + padding], y: [minY - padding, maxY + padding] };
 }
 
@@ -882,6 +882,54 @@ export function edgeReducer(
   };
 }
 
+// --- the recall trail (issue #78) -----------------------------------------------------
+
+/** The slice of `trail.model.ts`'s `TrailMark` this layer reads, restated to keep this file import-free of it. */
+export interface TrailGlow {
+  readonly kind: "searched" | "read" | "wrote";
+  readonly strength: number;
+}
+
+/**
+ * How each kind of touch is painted: which slot it blends toward, how far, and
+ * how much the node grows. A search hit is a soft amber hint, a read is a
+ * filled glow, and a write is the accent at full presence — the one place
+ * this canvas spends the accent on a note, because a write is the event.
+ */
+export const TRAIL_STYLE: Readonly<Record<TrailGlow["kind"], { slot: ColorSlot; blend: number; growth: number }>> = {
+  searched: { slot: "warning", blend: 0.35, growth: 1.08 },
+  read: { slot: "success", blend: 0.85, growth: 1.3 },
+  wrote: { slot: "accent", blend: 1, growth: 1.5 },
+};
+
+/**
+ * The recall-trail layer, applied **over** the selection reducer's answer.
+ *
+ * Over, because the trail is the live event: a note the agent just wrote must
+ * read as such even when it sits in the receded cloud of an unrelated
+ * selection. It is handed the *reduced* node, and colour and size scale with
+ * the glow's strength, so the fade is a smooth return to whatever the
+ * selection layer said; the label is kept so a glowing node always names itself.
+ */
+export function trailOverride(
+  glow: TrailGlow | undefined,
+  /** The node as the selection layer left it, so the glow composes over recession and growth. */
+  data: Pick<RenderNode, "color" | "size" | "zIndex">,
+  scheme: GraphTheme,
+  /** The node's own label — the selection layer may have dropped it, and a glowing node always names itself. */
+  label: string,
+): NodeDisplayOverride {
+  if (glow === undefined || !(glow.strength > 0)) return {};
+  const style = TRAIL_STYLE[glow.kind];
+  const strength = Math.min(1, glow.strength);
+  return {
+    color: blendHex(data.color, graphPalette(scheme)[style.slot], style.blend * strength),
+    size: data.size * growth(style.growth, strength),
+    zIndex: data.zIndex + HIGHLIGHT_Z_LIFT * 3,
+    label,
+  };
+}
+
 // --- sigma settings (§7.4) -------------------------------------------------------------
 
 /**
@@ -929,6 +977,20 @@ export interface GraphSettings {
  */
 export const LABEL_SIZE_THRESHOLD = (MIN_NODE_SIZE + MAX_NODE_SIZE) / 2;
 
+/**
+ * Below this many nodes every node carries its name.
+ *
+ * The size threshold exists to keep a dense graph legible; on a vault of
+ * two or three notes it left all but one circle unnamed, and a small graph
+ * has no density to protect.
+ */
+export const SMALL_GRAPH_NODES = 30;
+
+/** `labelRenderedSizeThreshold` for a graph of `nodeCount` nodes. */
+export function labelThreshold(nodeCount: number): number {
+  return nodeCount < SMALL_GRAPH_NODES ? 0 : LABEL_SIZE_THRESHOLD;
+}
+
 /**
  * Label collision grid, in screen pixels.
  *

package/src/web/client/graph/renderer.ts

@@ -1,7 +1,7 @@
 import type { GraphTheme } from "../../shared/themes";
 import type { Point } from "../../shared/layout";
-import type { EdgeDisplayOverride, GraphSettings, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, ViewBox } from "./graph.model";
-import { edgeReducer, fadeStep, frameBox, graphSettings, nodeReducer } from "./graph.model";
+import type { EdgeDisplayOverride, GraphSettings, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, TrailGlow, ViewBox } from "./graph.model";
+import { edgeReducer, fadeStep, frameBox, graphSettings, labelThreshold, nodeReducer, trailOverride } from "./graph.model";
 import type { ProjectedGraph } from "./project";
 import { positionsOf, project, syncPositions } from "./project";
 
@@ -56,6 +56,7 @@ export interface SigmaLike {
   setSetting(key: "nodeReducer", value: (id: string, data: RenderNode) => NodeDisplayOverride): unknown;
   setSetting(key: "edgeReducer", value: (key: string, data: RenderEdge, scheme: GraphTheme) => EdgeDisplayOverride): unknown;
   setSetting(key: "enableCameraPanning", value: boolean): unknown;
+  setSetting(key: "labelRenderedSizeThreshold", value: number): unknown;
   setGraph(graph: ProjectedGraph): unknown;
   /**
    * Freeze the graph→viewport normalization onto a fixed box.
@@ -129,6 +130,8 @@ export function sigmaRenderer(
   let highlight: ReadonlySet<string> | null = null;
   /** The selection inside that neighbourhood — see `nodeReducer`. */
   let selected: string | null = null;
+  /** Recall-trail glows, layered over the selection — see `trailOverride`. */
+  let trail: ReadonlyMap<string, TrailGlow> = new Map();
   /**
    * How present the highlight currently *looks*, and where it is heading.
    *
@@ -175,7 +178,11 @@ export function sigmaRenderer(
   const applyReducers = (instance: SigmaLike): void => {
     const nodes = nodeReducer(highlight, selected, fade);
     const edges = edgeReducer(highlight, selected, fade);
-    instance.setSetting("nodeReducer", (id, data) => ({ ...data, ...nodes(id, data, scheme) }));
+    const glows = trail;
+    instance.setSetting("nodeReducer", (id, data) => {
+      const reduced = { ...data, ...nodes(id, data, scheme) };
+      return { ...reduced, ...trailOverride(glows.get(id), reduced, scheme, data.label) };
+    });
     instance.setSetting("edgeReducer", (key, data) => ({ ...data, ...edges(key, data, scheme) }));
   };
 
@@ -246,6 +253,7 @@ export function sigmaRenderer(
       instance.on("upNode", () => endDrag(dragging));
       instance.on("upStage", () => endDrag(null));
       applyReducers(instance);
+      instance.setSetting("labelRenderedSizeThreshold", labelThreshold(graph.order));
       // Freeze the view box for whatever graph arrived before mount, so the
       // first frame is already framed and stable — see `SigmaLike.setCustomBBox`.
       instance.setCustomBBox(boxOf());
@@ -255,6 +263,8 @@ export function sigmaRenderer(
     setGraph(next: RenderGraph) {
       graph = project(next);
       sigma?.setGraph(graph);
+      // A graph that crossed the small-graph line gains or loses its labels.
+      sigma?.setSetting("labelRenderedSizeThreshold", labelThreshold(graph.order));
       // Re-frame on a shape change: new nodes legitimately change the extent,
       // and the box is what keeps the *drag* frames from also changing it.
       // Deliberately not touched by `setPositions` — a settling simulation
@@ -296,6 +306,12 @@ export function sigmaRenderer(
       if (fade !== fadeTo) armFade();
     },
 
+    /** Replace the recall-trail glows. The caller re-sends as the fade ticks. */
+    setTrail(next: ReadonlyMap<string, TrailGlow>) {
+      trail = next;
+      if (sigma !== null) applyReducers(sigma);
+    },
+
     onSelect(handler: (id: string | null) => void) {
       select = handler;
     },

package/src/web/client/note/Note.tsx

@@ -40,7 +40,7 @@
 
 import DOMPurify from "dompurify";
 import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
-import type { GraphPayload, NotePayload } from "../../shared/wire";
+import type { GraphPayload, HistoryPayload, NotePayload } from "../../shared/wire";
 import {
   CREATED_WORD,
   artifactKeyOfNode,
@@ -49,6 +49,7 @@ import {
   EDIT_LABEL,
   EDITED_WORD,
   EDITOR_ARIA_LABEL,
+  EDITOR_PLACEHOLDER,
   EMPTY_PREVIEW,
   SAVE_LABEL,
   SAVING_LABEL,
@@ -60,6 +61,10 @@ import {
   previewAnchorOf,
   previewCard,
   previewPlacement,
+  RAW_EDITOR_ARIA_LABEL,
+  RAW_TAIL_ARIA_LABEL,
+  RAW_TITLE,
+  rawSummary,
   reducePreview,
   renderNote,
   selectedArtifactPath,
@@ -72,7 +77,10 @@ import {
 } from "./note.model";
 import type { NoteHeaderView, PreviewElement, PreviewEvent } from "./note.model";
 import { createDraftStore } from "./drafts";
-import type { DraftStore } from "./drafts";
+import type { DraftStore, SaveNote } from "./drafts";
+import { ReplayBar, wrapMarks } from "./Replay";
+import type { ReplayState } from "./Replay";
+import { HISTORY_CLOSE_LABEL, HISTORY_LABEL, PLAY_INTERVAL_MS, nextStep, replayStep } from "./replay.model";
 
 /**
  * The custom properties the preview card is placed with, written by the
@@ -97,7 +105,12 @@ export interface NoteProps {
    * has already been reported to the user by the shell, which owns the one
    * error-reporting gesture the client has.
    */
-  onSave: (slug: string, body: string) => Promise<boolean>;
+  onSave: SaveNote;
+  /**
+   * Load the note's saved revisions for the history slider. The History
+   * control is shown only when this is provided.
+   */
+  onHistory?: (slug: string) => Promise<{ ok: true; data: HistoryPayload } | { ok: false; message: string }>;
   /** Shared across Note instances so duplicate tabs edit one in-memory body. */
   drafts?: DraftStore;
   /** Stable per view; distinct when the same note is mounted more than once. */
@@ -124,6 +137,8 @@ function Header({
   taskSaving,
   onToggle,
   onSave,
+  replaying,
+  onHistory,
 }: {
   view: NoteHeaderView;
   open: () => void;
@@ -132,6 +147,8 @@ function Header({
   taskSaving: boolean;
   onToggle: () => void;
   onSave: () => void;
+  replaying: boolean;
+  onHistory: (() => void) | null;
 }) {
   return (
     <header class="weave-note-head">
@@ -144,7 +161,12 @@ function Header({
             </button>
             <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{DONE_LABEL}</button>
           </>
-        ) : <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{EDIT_LABEL}</button>}
+        ) : replaying ? null : <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{EDIT_LABEL}</button>}
+        {editing || onHistory === null ? null : (
+          <button type="button" class="weave-note-edit weave-note-history" aria-pressed={replaying} onClick={onHistory}>
+            {replaying ? HISTORY_CLOSE_LABEL : HISTORY_LABEL}
+          </button>
+        )}
         <button type="button" class="weave-note-open" title="Open in $EDITOR" aria-label="Open in $EDITOR" onClick={open}>
           <span class="weave-note-open-mark" aria-hidden="true">↗</span>
         </button>
@@ -201,7 +223,16 @@ export function Note(props: NoteProps) {
   const dispatch = (event: PreviewEvent): void => void sendPreview((state) => reducePreview(state, event));
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const cardRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<HTMLTextAreaElement | null>(null);
+  // Set by the gesture that opened the editor *in this column*, consumed by
+  // the layout effect below once the textarea exists. A flag rather than
+  // "focus whenever a draft appears": the same note open in a second pane
+  // shares the draft, and must not take the cursor away from this one.
+  const focusEditor = useRef(false);
   const draft = note === null ? null : drafts.get(note.slug);
+  // The `## Raw` box under the editor starts folded: a long dictation would
+  // otherwise outgrow the note it belongs to.
+  const [rawOpen, setRawOpen] = useState(false);
   const taskSaving = note !== null && drafts.isTaskSaving(note.slug);
   const save = async (): Promise<void> => {
     if (note !== null && !drafts.isTaskSaving(note.slug)) await drafts.save(note.slug, props.onSave);
@@ -239,17 +270,92 @@ export function Note(props: NoteProps) {
   useEffect(() => {
     if (note !== null && defaultOpened.current !== note.slug) {
       defaultOpened.current = note.slug;
-      if (props.defaultEdit && drafts.get(note.slug) === null) drafts.open(note.slug, body);
+      if (props.defaultEdit && drafts.get(note.slug) === null) {
+        focusEditor.current = true;
+        drafts.open(note.slug, body);
+      }
     }
   }, [note?.slug, props.defaultEdit]);
 
   const toggleEdit = (): void => {
     if (note === null || drafts.isTaskSaving(note.slug)) return;
-    if (drafts.get(note.slug) === null) drafts.open(note.slug, body);
-    else if (!drafts.isDirty(note.slug) || window.confirm(DISCARD_PROMPT)) drafts.discard(note.slug);
+    if (drafts.get(note.slug) === null) {
+      focusEditor.current = true;
+      drafts.open(note.slug, body);
+    } else if (!drafts.isDirty(note.slug) || window.confirm(DISCARD_PROMPT)) drafts.discard(note.slug);
+  };
+  // Both editor boxes: bound here, not in `keys.model.ts`, because a global
+  // binding is a workspace-wide claim and Escape must not reach the shell.
+  const editorKeys = (event: KeyboardEvent): void => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      toggleEdit();
+      return;
+    }
+    if (event.key.toLowerCase() !== "s" || !(event.metaKey || event.ctrlKey)) return;
+    event.preventDefault();
+    void save();
   };
   const card = preview.anchor === null ? null : previewCard(props.graph, preview.anchor);
 
+  // Cursor in the textarea, after the last word, the moment it appears.
+  useLayoutEffect(() => {
+    const editor = editorRef.current;
+    if (editor === null || !focusEditor.current) return;
+    focusEditor.current = false;
+    editor.focus();
+    editor.setSelectionRange(editor.value.length, editor.value.length);
+  }, [draft !== null]);
+
+  // The history slider. Held per column, like the preview card: it is a view
+  // of the note on screen, and closes when the note changes.
+  const [replay, setReplay] = useState<ReplayState | null>(null);
+  const replaySlug = useRef<string | null>(null);
+  const loadHistory = props.onHistory;
+  const toggleHistory = (): void => {
+    if (note === null || loadHistory === undefined) return;
+    if (replay !== null) {
+      replaySlug.current = null;
+      setReplay(null);
+      return;
+    }
+    const slug = note.slug;
+    replaySlug.current = slug;
+    setReplay({ revisions: null, enabled: true, trimmed: false, index: 0, playing: false, error: null });
+    void loadHistory(slug).then((result) => {
+      if (replaySlug.current !== slug) return;
+      setReplay(result.ok
+        ? { revisions: result.data.revisions, enabled: result.data.enabled, trimmed: result.data.trimmed, index: Math.max(0, result.data.revisions.length - 1), playing: false, error: null }
+        : { revisions: null, enabled: true, trimmed: false, index: 0, playing: false, error: `Could not load history: ${result.message}` });
+    });
+  };
+  const step = replay?.revisions == null ? null : replayStep(replay.revisions, replay.index);
+  const replayHtml = useMemo(
+    () => (step === null || index === null ? null : renderNote(DOMPurify, step.marked, index)),
+    [step?.marked, index],
+  );
+  useLayoutEffect(() => {
+    replaySlug.current = null;
+    setReplay(null);
+    setRawOpen(false);
+  }, [note === null ? null : note.slug]);
+  useLayoutEffect(() => {
+    if (replayHtml === null || bodyRef.current === null) return;
+    wrapMarks(bodyRef.current)?.scrollIntoView?.({ block: "nearest" });
+  }, [replayHtml]);
+  useEffect(() => {
+    if (replay === null || !replay.playing || replay.revisions === null) return;
+    const count = replay.revisions.length;
+    const timer = window.setTimeout(() => {
+      setReplay((state) => {
+        if (state === null) return state;
+        const next = nextStep(state.index, count);
+        return next === null ? { ...state, playing: false } : { ...state, index: next };
+      });
+    }, PLAY_INTERVAL_MS);
+    return () => window.clearTimeout(timer);
+  }, [replay]);
+
   useLayoutEffect(() => {
     if (note !== null) drafts.taskBody(note.slug, note.body, props.loadVersion);
   }, [drafts, note === null ? null : note.slug, note?.body, props.loadVersion]);
@@ -348,27 +454,67 @@ export function Note(props: NoteProps) {
         taskSaving={taskSaving}
         onToggle={toggleEdit}
         onSave={() => void save()}
+        replaying={replay !== null}
+        onHistory={loadHistory === undefined ? null : toggleHistory}
       />
+      {replay === null ? null : (
+        <ReplayBar
+          state={replay}
+          onIndex={(value) => setReplay((state) => state === null ? state : { ...state, index: value, playing: false })}
+          onPlay={() => setReplay((state) => {
+            if (state === null || state.revisions === null) return state;
+            if (state.playing) return { ...state, playing: false };
+            // Playing from the end starts over: that is what "watch it being written" means.
+            const restart = state.index >= state.revisions.length - 1;
+            return { ...state, index: restart ? 0 : state.index, playing: true };
+          })}
+        />
+      )}
       {draft !== null ? (
+        <>
         <textarea
+          ref={editorRef}
           class="weave-note-editor"
           aria-label={EDITOR_ARIA_LABEL}
+          placeholder={EDITOR_PLACEHOLDER}
           spellcheck={props.spellcheck ?? true}
           value={draft.body}
           onInput={(event) => drafts.edit(note.slug, (event.target as HTMLTextAreaElement).value)}
-          onKeyDown={(event) => {
-            // Bound here, not in `keys.model.ts`: a global binding is a
-            // workspace-wide claim, and Escape must not reach the shell.
-            if (event.key === "Escape") {
-              event.stopPropagation();
-              toggleEdit();
-              return;
-            }
-            if (event.key.toLowerCase() !== "s" || !(event.metaKey || event.ctrlKey)) return;
-            event.preventDefault();
-            void save();
-          }}
+          onKeyDown={editorKeys}
         />
+        {/* A box of its own, never the body's textarea: text typed below
+            the heading there used to be dropped on save without a word. */}
+        {draft.tail === "" ? null : (
+          <section class="weave-raw" aria-label={RAW_TAIL_ARIA_LABEL} data-open={rawOpen ? "" : undefined}>
+            <div class="weave-raw-head">
+              <button
+                type="button"
+                class="weave-raw-toggle"
+                aria-expanded={rawOpen}
+                aria-controls={`${props.idPrefix ?? generatedId}-weave-raw`}
+                onClick={() => setRawOpen((open) => !open)}
+              >
+                <svg class="weave-raw-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+                  <path d="M4.5 2.5 8 6l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                {RAW_TITLE}
+              </button>
+              <span class="weave-raw-hint">{rawSummary(draft.raw, rawOpen)}</span>
+            </div>
+            {rawOpen ? (
+              <textarea
+                id={`${props.idPrefix ?? generatedId}-weave-raw`}
+                class="weave-raw-editor"
+                aria-label={RAW_EDITOR_ARIA_LABEL}
+                spellcheck={props.spellcheck ?? true}
+                value={draft.raw}
+                onInput={(event) => drafts.editRaw(note.slug, (event.target as HTMLTextAreaElement).value)}
+                onKeyDown={editorKeys}
+              />
+            ) : null}
+          </section>
+        )}
+        </>
       ) : (
       <div
           ref={bodyRef}
@@ -403,6 +549,11 @@ export function Note(props: NoteProps) {
           onClick={(event) => {
             const checkbox = event.target as HTMLInputElement;
             const taskIndex = taskCheckboxIndexOf(checkbox);
+            // A past version is read-only: its checkboxes must not write to the note.
+            if (taskIndex !== null && replayHtml !== null) {
+              event.preventDefault();
+              return;
+            }
             if (taskIndex !== null) {
               void saveTask(checkbox, taskIndex);
               return;
@@ -434,7 +585,7 @@ export function Note(props: NoteProps) {
             props.onSelect(target, event.metaKey || event.ctrlKey || event.shiftKey);
           }}
           // Sanitised by `renderNote`'s three layers — see note.model.ts.
-          dangerouslySetInnerHTML={{ __html: html }}
+          dangerouslySetInnerHTML={{ __html: replayHtml ?? html }}
         />
       )}
       {card === null ? null : (