pi-weave 0.3.0 → 0.3.1

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

@@ -42,6 +42,7 @@ import {
   graphClick,
   graphColumnModel,
   graphCountLabel,
+  graphPreview,
   hoverHighlight,
 } from "./column.model";
 import type { PositionStorage } from "./positions";
@@ -54,11 +55,14 @@ import type { GraphSimulation } from "./dynamics";
 import { ForceTuner } from "./ForceTuner";
 import { POSITIONS_STORAGE_KEY } from "./positions";
 import { loadGroupColors, saveGroupColors } from "./tuner.model";
+import { Icon } from "../tree/Tree";
 
 export interface GraphProps {
   graph: GraphPayload | null;
   selectedId: string | null;
   onSelect: (id: string | null) => void;
+  previewId: string | null;
+  onOpen: (id: string) => void;
   /** Injected: `createSigmaRenderer` in the browser, a fake in a test. */
   renderer: RendererFactory;
   /** Injected: `localStorage`. See `positions.ts` for why it is a port. */
@@ -170,6 +174,7 @@ export function Graph(props: GraphProps) {
     () => graphColumnModel(props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, groupColors),
     [props.graph, props.selectedId, view, props.storage, scheme, props.bootFailed, forceRev, groupColors],
   );
+  const preview = graphPreview(props.graph, props.previewId);
 
   // Read by the mount-time `onSelect`, which outlives this render.
   const live = useRef({ view, model, onSelect: props.onSelect, selectedId: props.selectedId });
@@ -276,6 +281,19 @@ export function Graph(props: GraphProps) {
       {/* `tabIndex={-1}` is the `⌘3` focus target — see `Note.tsx`'s matching
           comment. The tree's target is the rows `<ul>`, which has its own. */}
       <div class="weave-graph-canvas" ref={canvas} role="img" aria-label="Knowledge graph" tabIndex={-1} />
+      {preview === null ? null : (
+        <aside class="weave-graph-preview" aria-label="Selected graph node">
+          <div class="weave-graph-preview-info">
+            <span class="weave-kind" aria-hidden="true"><Icon name={preview.icon} class="weave-icon" /></span>
+            <div class="weave-graph-preview-copy">
+              <span class="weave-graph-preview-kind">{preview.kind}</span>
+              <strong class="weave-graph-preview-title" title={preview.title}>{preview.title}</strong>
+            </div>
+          </div>
+          <button type="button" class="weave-graph-preview-close" aria-label="Clear graph selection" onClick={() => props.onSelect(null)}>×</button>
+          <button type="button" class="weave-chip" onClick={() => props.onOpen(preview.id)}>Open in new tab</button>
+        </aside>
+      )}
       {tunerOpen ? (
         <ForceTuner
           groupColors={groupColors}

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

@@ -43,7 +43,8 @@ import type { Point } from "../../shared/layout";
 import type { ClusterAggregate, ClusterInfo, ViewGraphModel } from "../../shared/view";
 import { clusterAggregate, focusNeighborhood } from "../../shared/view";
 import type { GraphPayload, WireGraphEdge } from "../../shared/wire";
-import { viewModel } from "../tree/tree.model";
+import { kindIcon, viewModel } from "../tree/tree.model";
+import type { IconName } from "../shell/icons.model";
 import type { ColorScheme, RenderGraph } from "./graph.model";
 import { EMPTY_RENDER_GRAPH, renderGraph } from "./graph.model";
 import { groupNodeColors } from "./groups";
@@ -82,6 +83,22 @@ export interface GraphViewState {
   readonly expanded: ReadonlySet<string>;
 }
 
+export interface GraphPreview {
+  readonly id: string;
+  readonly title: string;
+  readonly kind: string;
+  readonly icon: IconName;
+}
+
+/** The original graph node selected for preview, including collapsed folders. */
+export function graphPreview(payload: GraphPayload | null, id: string | null): GraphPreview | null {
+  if (payload === null || id === null) return null;
+  const node = payload.model.nodes.find((candidate) => candidate.id === id);
+  if (node === undefined) return null;
+  const kind = id.startsWith("artifact:") ? "HTML artifact" : id.startsWith("vfolder:") ? "Folder" : node.kind;
+  return { id, title: node.label, kind, icon: kindIcon(node.kind) };
+}
+
 /**
  * The state a freshly loaded graph opens in: **fully expanded**.
  *
@@ -169,7 +186,7 @@ export function highlightFor(edges: readonly WireGraphEdge[], selectedId: string
  * The highlight while the pointer is over a node — **hover wins, selection is
  * what it falls back to**.
  *
- * Obsidian's gesture, and the reason it is the same function as
+ * The reference interaction, and the reason it is the same function as
  * {@link highlightFor} rather than a second visual language: hovering asks
  * exactly the question clicking asks ("what is one hop from here?"), so the
  * two must produce the same set and reach the same reducers. Anything else

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

@@ -443,7 +443,7 @@ export const HOVER_LABEL_SHADOW = 6;
 /**
  * Sigma's `defaultDrawNodeHover`, as a scheme-bound pure function (§7.4).
  *
- * Obsidian's gesture, which is the reference: the hovered node's name floats
+ * The reference gesture: the hovered node's name floats
  * **centred underneath it**, in the theme's own text colour, with no
  * container. The alternative shipped by sigma is a white rounded box with the
  * text to the node's *right* — wrong colour in both schemes, and wrong place

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

@@ -175,7 +175,7 @@ export function graphShapeKey(nodes: readonly WireGraphNode[], edges: readonly W
  * watcher fires, the graph refetches, and a picture the user was reading
  * rearranges itself for no visible reason. Never re-running leaves new nodes
  * unplaced and therefore undrawn (`renderGraph` drops a node with no
- * position), so a note created in Obsidian would never appear.
+ * position), so a note created outside this application would never appear.
  *
  * The shape key is exactly the line between those: it changes iff a node or an
  * edge was added or removed, which is precisely when the existing positions

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

@@ -44,6 +44,7 @@ export type RendererFactory = (scheme: ColorScheme) => GraphRenderer;
  */
 export interface SigmaLike {
   on(event: "clickNode", handler: (payload: { node: string }) => void): unknown;
+  on(event: "doubleClickNode", handler: (payload: { node: string; preventSigmaDefault(): void }) => void): unknown;
   on(event: "clickStage", handler: () => void): unknown;
   on(event: "downNode", handler: (payload: { node: string }) => void): unknown;
   on(event: "enterNode", handler: (payload: { node: string }) => void): unknown;
@@ -146,6 +147,7 @@ export function sigmaRenderer(
   let dragMove: (id: string, at: Point) => void = () => {};
   let dragEnd: (id: string) => void = () => {};
   let dragging: string | null = null;
+  let nodeMoved = false;
 
   const endDrag = (id: string | null): void => {
     if (dragging === null) return;
@@ -208,16 +210,22 @@ export function sigmaRenderer(
       const instance = create(graph, container, graphSettings(scheme));
       // §1.3's context bus: a click writes `selectedId`, and the note column,
       // the tree and the context rail all recompute from it.
-      instance.on("clickNode", ({ node }) => select(node));
+      instance.on("clickNode", ({ node }) => { if (!nodeMoved) select(node); });
+      instance.on("doubleClickNode", ({ node, preventSigmaDefault }) => {
+        preventSigmaDefault();
+        if (!nodeMoved) select(node);
+      });
       instance.on("clickStage", () => select(null));
       instance.on("downNode", ({ node }) => {
         dragging = node;
+        nodeMoved = false;
         // Hold the view still while the node follows the cursor (see endDrag).
         sigma?.setSetting("enableCameraPanning", false);
         dragStart(node);
       });
       instance.on("moveBody", (payload) => {
         if (dragging !== null) {
+          nodeMoved = true;
           // Sigma's captor pans the camera on every mouse move while the
           // button is down; during a node drag that is the pan the gesture
           // must not be. `preventSigmaDefault` is the captor's own gate — it

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

@@ -11,8 +11,8 @@
  * The explicit Edit control swaps the body for a `<textarea>`; `draft` is
  * `null` in read mode, so text and mode cannot disagree. No reducer — the 686-line one that
  * stood here resolved conflicts against a revision the server no longer
- * issues. Being component state, the draft is out of the 2 s poll's reach;
- * the shell guards it through the `editor` slot below.
+ * issues. Drafts are keyed by note identity in the shared in-memory store, out of the
+ * 2 s poll's reach; the shell guards removal of their final visible tab.
  *
  * `dangerouslySetInnerHTML` is used deliberately for sanitized note HTML. The
  * alternative is parsing marked's output into a Preact tree, which means a
@@ -39,7 +39,7 @@
  */
 
 import DOMPurify from "dompurify";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import type { GraphPayload, NotePayload } from "../../shared/wire";
 import {
   CREATED_WORD,
@@ -50,15 +50,11 @@ import {
   EDITED_WORD,
   EDITOR_ARIA_LABEL,
   EMPTY_PREVIEW,
-  PREVIEW_ID,
   SAVE_LABEL,
   SAVING_LABEL,
   TASK_CHECKBOX_ATTR,
   WIKILINK_ATTR,
-  draftDirty,
-  draftMoved,
   hasTextSelection,
-  saveLanded,
   noteEmptyMessage,
   noteHeader,
   previewAnchorOf,
@@ -75,6 +71,8 @@ import {
   wikilinkTargetOf,
 } from "./note.model";
 import type { NoteHeaderView, PreviewElement, PreviewEvent } from "./note.model";
+import { createDraftStore } from "./drafts";
+import type { DraftStore } from "./drafts";
 
 /**
  * The custom properties the preview card is placed with, written by the
@@ -90,7 +88,7 @@ export interface NoteProps {
   loadFailed: boolean;
   graph: GraphPayload | null;
   selectedId: string | null;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, newTab?: boolean) => void;
   onOpen: (slug: string) => void;
   /**
    * Save the note's body. Resolves `true` when the write landed; a `false`
@@ -98,12 +96,12 @@ export interface NoteProps {
    * error-reporting gesture the client has.
    */
   onSave: (slug: string, body: string) => Promise<boolean>;
-  /**
-   * The shell's handle on the open editor — the `fit` pattern again. Guards
-   * both *ask* (navigate, unload) and *close* (a tree rename of this note).
-   * Functions, not values, or a mount-time guard answers "clean" forever.
-   */
-  editor: { current: { dirty(): boolean; discard(): void } | null };
+  /** 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. */
+  idPrefix?: string;
+  /** Monotonic identity of the document load that produced `note`. */
+  loadVersion: number;
   /** Epoch ms for relative times. Injected so the render is deterministic. */
   now: number;
 }
@@ -121,6 +119,7 @@ function Header({
   open,
   editing,
   saving,
+  taskSaving,
   onToggle,
   onSave,
 }: {
@@ -128,6 +127,7 @@ function Header({
   open: () => void;
   editing: boolean;
   saving: boolean;
+  taskSaving: boolean;
   onToggle: () => void;
   onSave: () => void;
 }) {
@@ -137,12 +137,12 @@ function Header({
       <p class="weave-note-meta">
         {editing ? (
           <>
-            <button type="button" class="weave-note-save" disabled={saving} onClick={onSave}>
+            <button type="button" class="weave-note-save" disabled={saving || taskSaving} onClick={onSave}>
               {saving ? SAVING_LABEL : SAVE_LABEL}
             </button>
-            <button type="button" class="weave-note-edit" onClick={onToggle}>{DONE_LABEL}</button>
+            <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{DONE_LABEL}</button>
           </>
-        ) : <button type="button" class="weave-note-edit" onClick={onToggle}>{EDIT_LABEL}</button>}
+        ) : <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{EDIT_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>
@@ -168,7 +168,14 @@ function Header({
 }
 
 export function Note(props: NoteProps) {
+  const localDrafts = useRef(createDraftStore());
+  const drafts = props.drafts ?? localDrafts.current;
+  const generatedId = useId();
+  const previewId = `${props.idPrefix ?? generatedId}-weave-preview`;
+  const [storeVersion, setDraftVersion] = useState(0);
+  useEffect(() => drafts.subscribe(() => setDraftVersion((version) => version + 1)), [drafts]);
   const note = props.note?.note ?? null;
+  const body = note === null ? "" : drafts.getTaskBody(note.slug, note.body);
   const artifactPath = selectedArtifactPath(props.graph, props.selectedId);
   const empty = noteEmptyMessage(props.selectedId, note, props.loadFailed);
 
@@ -180,8 +187,8 @@ export function Note(props: NoteProps) {
   // only the *result* is memoized.
   const index = useMemo(() => (note === null ? null : wikiIndex(props.graph, note.slug)), [note, props.graph]);
   const html = useMemo(
-    () => (note === null || index === null ? "" : renderNote(DOMPurify, note.body, index)),
-    [note, index],
+    () => (note === null || index === null ? "" : renderNote(DOMPurify, body, index)),
+    [note, body, index],
   );
 
   // The hover card. The reducer lives in `note.model.ts`; this is its
@@ -192,90 +199,51 @@ 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 taskSaving = useRef(false);
-  const taskSource = useRef<{ slug: string; serverBody: string; body: string } | null>(null);
-  if (note === null) taskSource.current = null;
-  else if (taskSource.current === null || taskSource.current.slug !== note.slug || taskSource.current.serverBody !== note.body) {
-    taskSource.current = { slug: note.slug, serverBody: note.body, body: note.body };
-  }
-
-  const [draft, setDraft] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const dirty = note !== null && draft !== null && draftDirty(draft, note.body);
-  // Bumped on open and close, so a late reply knows it is late (`saveLanded`).
-  const session = useRef(0);
-  // The draft *now*: `save` outlives the render that captured its own copy.
-  const draftRef = useRef(draft);
-  draftRef.current = draft;
-
-  // During render, not in an effect: an effect runs after paint, leaving a
-  // window where the slot is still clean and a click slips the guard.
-  props.editor.current = { dirty: () => dirty, discard: () => close() };
-  useEffect(() => () => {
-    props.editor.current = null;
-  }, [props.editor]);
-
-  const close = (): void => {
-    session.current += 1;
-    setDraft(null);
-    setSaving(false);
-  };
-
-  const open = (body: string): void => {
-    session.current += 1;
-    setDraft(body);
-  };
-
+  const draft = note === null ? null : drafts.get(note.slug);
+  const taskSaving = note !== null && drafts.isTaskSaving(note.slug);
   const save = async (): Promise<void> => {
-    if (note === null || draft === null || saving) return;
-    const issued = session.current;
-    // The textarea stays enabled through the request, so the draft can move
-    // underneath it; the reply is only ever about these bytes.
-    const sent = draft;
-    setSaving(true);
-    const ok = await props.onSave(note.slug, sent);
-    // A reply for an editor that is gone must not close the one now open.
-    if (!saveLanded(issued, session.current)) return;
-    // Stay open on failure, and on success the user typed through: both hold
-    // text the server does not have, and closing would discard it.
-    if (!ok || draftMoved(sent, draftRef.current)) setSaving(false);
-    else close();
+    if (note !== null && !drafts.isTaskSaving(note.slug)) await drafts.save(note.slug, props.onSave);
   };
 
   const saveTask = async (checkbox: HTMLInputElement, taskIndex: number): Promise<void> => {
-    const source = taskSource.current;
     const restore = (): void => {
       checkbox.checked = !checkbox.checked;
       checkbox.setAttribute("aria-label", taskCheckboxLabel(checkbox.checked));
     };
-    if (source === null || taskSaving.current) {
+    if (note === null || drafts.isTaskSaving(note.slug)) {
       restore();
       return;
     }
-    const body = toggleTaskCheckbox(source.body, taskIndex);
-    if (body === null) {
+    const nextBody = toggleTaskCheckbox(drafts.getTaskBody(note.slug, note.body), taskIndex);
+    if (nextBody === null) {
       restore();
       return;
     }
 
     const inputs = [...(bodyRef.current?.querySelectorAll<HTMLInputElement>(`input[${TASK_CHECKBOX_ATTR}]`) ?? [])];
-    taskSaving.current = true;
     checkbox.setAttribute("aria-label", taskCheckboxLabel(checkbox.checked));
     for (const input of inputs) input.disabled = true;
-    const ok = await props.onSave(source.slug, body);
-    if (ok) source.body = body;
-    else restore();
-    for (const input of inputs) input.disabled = false;
-    taskSaving.current = false;
+    try {
+      if (!await drafts.saveTask(note.slug, nextBody, props.onSave)) restore();
+    } catch (error) {
+      restore();
+      throw error;
+    } finally {
+      for (const input of inputs) input.disabled = drafts.isTaskSaving(note.slug);
+    }
   };
 
   const toggleEdit = (): void => {
-    if (note === null) return;
-    if (draft === null) open(note.body);
-    else if (!dirty || window.confirm(DISCARD_PROMPT)) close();
+    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);
   };
   const card = preview.anchor === null ? null : previewCard(props.graph, preview.anchor);
 
+  useLayoutEffect(() => {
+    if (note !== null) drafts.taskBody(note.slug, note.body, props.loadVersion);
+  }, [drafts, note === null ? null : note.slug, note?.body, props.loadVersion]);
+
   // A card whose target note left the screen is a claim about a document that
   // is gone. Navigating (or an SSE swap of the open note, which is what
   // `note.slug` changing underneath the pointer looks like) closes it rather
@@ -284,12 +252,18 @@ export function Note(props: NoteProps) {
   // slug changes as rarely as navigation happens.
   useLayoutEffect(() => {
     dispatch({ type: "hide" });
-    // A different note is a different document: an open editor holding the
-    // previous one's text would save it over this one. The shell's guard is
-    // what asks before a dirty draft gets here.
-    close();
+    // Drafts belong to note identity and survive this Note instance changing
+    // documents or unmounting.
   }, [note === null ? null : note.slug]);
 
+  useLayoutEffect(() => {
+    if (note === null) return;
+    const saving = drafts.isTaskSaving(note.slug);
+    for (const input of bodyRef.current?.querySelectorAll<HTMLInputElement>(`input[${TASK_CHECKBOX_ATTR}]`) ?? []) {
+      input.disabled = saving;
+    }
+  }, [note === null ? null : note.slug, storeVersion, html]);
+
   // Wired after the card mounts, because both jobs depend on the live DOM:
   // the card's size (the placement decision needs measured dimensions, which
   // no render can know), and `aria-describedby`, which the link has to carry
@@ -302,7 +276,7 @@ export function Note(props: NoteProps) {
     if (body !== null) {
       const slug = preview.anchor?.slug ?? null;
       for (const link of body.querySelectorAll(`a[${WIKILINK_ATTR}]`)) {
-        if (slug !== null && link.getAttribute(WIKILINK_ATTR) === slug) link.setAttribute("aria-describedby", PREVIEW_ID);
+        if (slug !== null && link.getAttribute(WIKILINK_ATTR) === slug) link.setAttribute("aria-describedby", previewId);
         else link.removeAttribute("aria-describedby");
       }
     }
@@ -322,7 +296,7 @@ export function Note(props: NoteProps) {
     // `setProperty` is the path it has no hook on.
     element.style.setProperty(`--${PREVIEW_X}`, `${spot.x}px`);
     element.style.setProperty(`--${PREVIEW_Y}`, `${spot.y}px`);
-  }, [preview, card]);
+  }, [preview, card, previewId]);
 
   if (artifactPath !== null) {
     const artifact = props.graph?.model.nodes.find((node) => node.id === props.selectedId);
@@ -360,7 +334,8 @@ export function Note(props: NoteProps) {
         view={header}
         open={() => props.onOpen(note.slug)}
         editing={draft !== null}
-        saving={saving}
+        saving={draft?.saving ?? false}
+        taskSaving={taskSaving}
         onToggle={toggleEdit}
         onSave={() => void save()}
       />
@@ -369,8 +344,8 @@ export function Note(props: NoteProps) {
           class="weave-note-editor"
           aria-label={EDITOR_ARIA_LABEL}
           spellcheck
-          value={draft}
-          onInput={(event) => setDraft((event.target as HTMLTextAreaElement).value)}
+          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.
@@ -429,7 +404,7 @@ export function Note(props: NoteProps) {
             if (hasTextSelection(selection)) return;
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
             // A wikilink carries no href, so route it onto the context bus.
-            if (target !== null) props.onSelect(target);
+            if (target !== null) props.onSelect(target, event.metaKey || event.ctrlKey || event.shiftKey);
           }}
           onKeyDown={(event) => {
             // Escape is first so the card closes on the gesture a keyboard
@@ -446,7 +421,7 @@ export function Note(props: NoteProps) {
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
             if (target === null) return;
             event.preventDefault();
-            props.onSelect(target);
+            props.onSelect(target, event.metaKey || event.ctrlKey || event.shiftKey);
           }}
           // Sanitised by `renderNote`'s three layers — see note.model.ts.
           dangerouslySetInnerHTML={{ __html: html }}
@@ -455,7 +430,7 @@ export function Note(props: NoteProps) {
       {card === null ? null : (
         <div
           ref={cardRef}
-          id={PREVIEW_ID}
+          id={previewId}
           role="tooltip"
           class={`weave-preview${card.ghost ? " weave-preview-ghost" : ""}`}
         >

package/src/web/client/note/drafts.ts

@@ -0,0 +1,172 @@
+import { tabSelection, type WorkspaceLayout } from "../../shared/workspace";
+
+export interface NoteDraft {
+  body: string;
+  baseline: string;
+  saving: boolean;
+}
+
+interface TaskSource {
+  body: string;
+  version: number;
+  pending?: { body: string; version: number };
+  saving: boolean;
+}
+
+export interface DraftStore {
+  get(slug: string): Readonly<NoteDraft> | null;
+  subscribe(listener: () => void): () => void;
+  open(slug: string, body: string): void;
+  edit(slug: string, body: string): void;
+  discard(slug: string): void;
+  isDirty(slug: string): boolean;
+  dirtySlugs(): string[];
+  save(slug: string, onSave: (slug: string, body: string) => Promise<boolean>): Promise<void>;
+  nextLoadVersion(): number;
+  getTaskBody(slug: string, fallback: string): string;
+  taskBody(slug: string, serverBody: string, loadVersion: number): string;
+  isTaskSaving(slug: string): boolean;
+  saveTask(slug: string, body: string, onSave: (slug: string, body: string) => Promise<boolean>): Promise<boolean>;
+  clearTaskSources(slugs: readonly string[]): void;
+}
+
+export function createDraftStore(): DraftStore {
+  const drafts = new Map<string, NoteDraft>();
+  const taskSources = new Map<string, TaskSource>();
+  const listeners = new Set<() => void>();
+  let loadVersion = 0;
+  const notify = (): void => listeners.forEach((listener) => listener());
+
+  return {
+    get: (slug) => drafts.get(slug) ?? null,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    open(slug, body) {
+      if (drafts.has(slug)) return;
+      drafts.set(slug, { body, baseline: body, saving: false });
+      notify();
+    },
+    edit(slug, body) {
+      const draft = drafts.get(slug);
+      if (draft === undefined || draft.body === body) return;
+      draft.body = body;
+      notify();
+    },
+    discard(slug) {
+      if (drafts.delete(slug)) notify();
+    },
+    isDirty(slug) {
+      const draft = drafts.get(slug);
+      return draft !== undefined && draft.body !== draft.baseline;
+    },
+    dirtySlugs() {
+      return [...drafts].filter(([, draft]) => draft.body !== draft.baseline).map(([slug]) => slug);
+    },
+    async save(slug, onSave) {
+      const draft = drafts.get(slug);
+      if (draft === undefined || draft.saving || taskSources.get(slug)?.saving) return;
+      const sent = draft.body;
+      draft.saving = true;
+      notify();
+      let ok = false;
+      try {
+        ok = await onSave(slug, sent);
+      } finally {
+        // Discard/reopen during an in-flight request gives the new draft a new identity.
+        if (drafts.get(slug) === draft) {
+          const source = taskSources.get(slug);
+          if (ok && source !== undefined) {
+            source.body = sent;
+            source.version = ++loadVersion;
+            delete source.pending;
+          }
+          if (ok && draft.body === sent) drafts.delete(slug);
+          else {
+            if (ok) draft.baseline = sent;
+            draft.saving = false;
+          }
+          notify();
+        }
+      }
+    },
+    nextLoadVersion() {
+      return ++loadVersion;
+    },
+    getTaskBody(slug, fallback) {
+      return taskSources.get(slug)?.body ?? fallback;
+    },
+    taskBody(slug, serverBody, version) {
+      let source = taskSources.get(slug);
+      let changed = false;
+      if (source === undefined) {
+        source = { body: serverBody, version, saving: false };
+        taskSources.set(slug, source);
+      } else if (version > source.version) {
+        if (source.saving) {
+          if (source.pending === undefined || version > source.pending.version) source.pending = { body: serverBody, version };
+        } else {
+          changed = source.body !== serverBody;
+          source.body = serverBody;
+          source.version = version;
+        }
+      }
+      if (changed) notify();
+      return source.body;
+    },
+    isTaskSaving: (slug) => taskSources.get(slug)?.saving ?? false,
+    async saveTask(slug, body, onSave) {
+      const source = taskSources.get(slug);
+      if (source === undefined || source.saving || drafts.get(slug)?.saving) return false;
+      source.saving = true;
+      notify();
+      let ok = false;
+      try {
+        ok = await onSave(slug, body);
+        return ok;
+      } finally {
+        if (taskSources.get(slug) === source) {
+          if (ok) {
+            source.body = body;
+            // Invalidate note loads that began before this save completed.
+            source.version = ++loadVersion;
+          } else if (source.pending !== undefined && source.pending.version > source.version) {
+            source.body = source.pending.body;
+            source.version = source.pending.version;
+          }
+          delete source.pending;
+          source.saving = false;
+          notify();
+        }
+      }
+    },
+    clearTaskSources(slugs) {
+      let changed = false;
+      for (const slug of slugs) changed = taskSources.delete(slug) || changed;
+      if (changed) notify();
+    },
+  };
+}
+
+/** Removing the last selected view of a dirty note requires deliberate discard. */
+export function mayRemoveDrafts(drafts: DraftStore, current: WorkspaceLayout, next: WorkspaceLayout, confirm: () => boolean): boolean {
+  const before = new Set(current.panes.flatMap((pane) => pane.tabs.map(tabSelection)));
+  const after = new Set(next.panes.flatMap((pane) => pane.tabs.map(tabSelection)));
+  const removed = [...before].filter((id): id is string => id !== null && id.startsWith("note:") && !after.has(id))
+    .map((id) => id.slice(5));
+  if (removed.some((slug) => drafts.isDirty(slug)) && !confirm()) return false;
+  removed.forEach((slug) => drafts.discard(slug));
+  drafts.clearTaskSources(removed);
+  return true;
+}
+
+/** Confirm only dirty drafts affected by a tree mutation, then clear affected state. */
+export function mayMutateDrafts(drafts: DraftStore, affectedSlugs: readonly string[], confirm: () => boolean): boolean {
+  const affected = new Set(affectedSlugs);
+  const dirty = drafts.dirtySlugs().filter((slug) => affected.has(slug));
+  if (dirty.length > 0 && !confirm()) return false;
+  affected.forEach((slug) => drafts.discard(slug));
+  drafts.clearTaskSources([...affected]);
+  return true;
+}