pi-weave 0.2.0 → 0.2.2

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

@@ -1,10 +1,18 @@
 /**
- * The read-only note column (weave-workspace §1.2, P2.4, P6.3).
+ * The note column — reading, and editing (weave-workspace §1.2, P2.4, P5, P6.3).
  *
  * Props in, JSX out. The markdown pipeline, sanitiser config, wikilink
  * resolution and every string are in `note.model.ts`. This file wires the
- * rendered body, selection-safe wikilink navigation, and the Open in
- * `$EDITOR` action.
+ * rendered body, selection-safe wikilink navigation, the Open in `$EDITOR`
+ * action, and the body editor.
+ *
+ * ## The editor
+ *
+ * Clicking the prose swaps it 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.
  *
  * `dangerouslySetInnerHTML` is used deliberately for sanitized note HTML. The
  * alternative is parsing marked's output into a Preact tree, which means a
@@ -31,16 +39,25 @@
  */
 
 import DOMPurify from "dompurify";
-import { useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import type { GraphPayload, NotePayload } from "../../shared/wire";
 import {
   CREATED_WORD,
   artifactKeyOfNode,
+  DISCARD_PROMPT,
+  DONE_LABEL,
   EDITED_WORD,
+  EDITOR_ARIA_LABEL,
   EMPTY_PREVIEW,
   PREVIEW_ID,
+  SAVE_LABEL,
+  SAVING_LABEL,
   WIKILINK_ATTR,
+  draftDirty,
+  draftMoved,
   hasTextSelection,
+  noteClickAction,
+  saveLanded,
   noteEmptyMessage,
   noteHeader,
   previewAnchorOf,
@@ -66,10 +83,23 @@ const PREVIEW_Y = "weave-preview-y";
 
 export interface NoteProps {
   note: NotePayload | null;
+  loadFailed: boolean;
   graph: GraphPayload | null;
   selectedId: string | null;
   onSelect: (id: string) => void;
   onOpen: (slug: string) => void;
+  /**
+   * Save the note's body. Resolves `true` when the write landed; a `false`
+   * 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>;
+  /**
+   * 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 };
   /** Epoch ms for relative times. Injected so the render is deterministic. */
   now: number;
 }
@@ -85,14 +115,32 @@ export interface NoteProps {
 function Header({
   view,
   open,
+  editing,
+  saving,
+  onDone,
+  onSave,
 }: {
   view: NoteHeaderView;
   open: () => void;
+  editing: boolean;
+  saving: boolean;
+  onDone: () => void;
+  onSave: () => void;
 }) {
   return (
     <header class="weave-note-head">
       <h3 class="weave-note-title">{view.title}</h3>
       <p class="weave-note-meta">
+        {/* Nothing in read mode: the prose is the way in. The way out needs a
+            control, because "click the text" cannot also mean "stop". */}
+        {editing ? (
+          <>
+            <button type="button" class="weave-note-save" disabled={saving} onClick={onSave}>
+              {saving ? SAVING_LABEL : SAVE_LABEL}
+            </button>
+            <button type="button" class="weave-note-edit" onClick={onDone}>{DONE_LABEL}</button>
+          </>
+        ) : null}
         <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>
@@ -120,7 +168,7 @@ function Header({
 export function Note(props: NoteProps) {
   const note = props.note?.note ?? null;
   const artifactPath = selectedArtifactPath(props.graph, props.selectedId);
-  const empty = noteEmptyMessage(props.selectedId, note);
+  const empty = noteEmptyMessage(props.selectedId, note, props.loadFailed);
 
   // Both hook calls sit before the empty-return so the hook order cannot
   // depend on whether a note is loaded. The memoization is cheap insurance:
@@ -142,6 +190,55 @@ 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 [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 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();
+  };
+
+  const toggleEdit = (): void => {
+    if (note === null) return;
+    if (draft === null) open(note.body);
+    else if (!dirty || window.confirm(DISCARD_PROMPT)) close();
+  };
   const card = preview.anchor === null ? null : previewCard(props.graph, preview.anchor);
 
   // A card whose target note left the screen is a claim about a document that
@@ -152,6 +249,10 @@ 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();
   }, [note === null ? null : note.slug]);
 
   // Wired after the card mounts, because both jobs depend on the live DOM:
@@ -223,7 +324,32 @@ export function Note(props: NoteProps) {
       <Header
         view={header}
         open={() => props.onOpen(note.slug)}
+        editing={draft !== null}
+        saving={saving}
+        onDone={toggleEdit}
+        onSave={() => void save()}
       />
+      {draft !== null ? (
+        <textarea
+          class="weave-note-editor"
+          aria-label={EDITOR_ARIA_LABEL}
+          spellcheck
+          value={draft}
+          onInput={(event) => setDraft((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();
+          }}
+        />
+      ) : (
       <div
           ref={bodyRef}
           class="weave-note-body"
@@ -255,19 +381,16 @@ export function Note(props: NoteProps) {
           }}
           onBlur={() => dispatch({ type: "hide" })}
           onClick={(event) => {
-            // Selecting text to copy must not trigger wikilink navigation.
+            // Three gestures, one element; `noteClickAction` owns the order.
             const selection =
               typeof window !== "undefined" && typeof window.getSelection === "function"
                 ? window.getSelection()
                 : null;
-            if (hasTextSelection(selection)) return;
-
-            // A wikilink carries no href, so route it onto the context bus.
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
-            if (target !== null) {
-              props.onSelect(target);
-              return;
-            }
+            const action = noteClickAction(hasTextSelection(selection), target);
+            // A wikilink carries no href, so route it onto the context bus.
+            if (action === "navigate" && target !== null) props.onSelect(target);
+            else if (action === "edit") open(note.body);
           }}
           onKeyDown={(event) => {
             // Escape is first so the card closes on the gesture a keyboard
@@ -282,13 +405,16 @@ export function Note(props: NoteProps) {
             }
             if (event.key !== "Enter" && event.key !== " ") return;
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
-            if (target === null) return;
             event.preventDefault();
-            props.onSelect(target);
+            // The keyboard's half of the click: without it, editing would be
+            // mouse-only now that the Edit button is gone.
+            if (target !== null) props.onSelect(target);
+            else open(note.body);
           }}
           // Sanitised by `renderNote`'s three layers — see note.model.ts.
           dangerouslySetInnerHTML={{ __html: html }}
         />
+      )}
       {card === null ? null : (
         <div
           ref={cardRef}

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

@@ -745,6 +745,57 @@ export function hasTextSelection(selection: SelectionLike | null | undefined): b
 export const EDITED_WORD = "edited";
 export const CREATED_WORD = "created";
 
+// --- the editor -------------------------------------------------------------------------
+
+/**
+ * The editor's strings. No "Edit" label — clicking the prose opens it (see
+ * {@link noteClickAction}); "Done", because leaving a clean editor cancels
+ * nothing.
+ */
+export const DONE_LABEL = "Done";
+export const SAVE_LABEL = "Save";
+export const SAVING_LABEL = "Saving…";
+export const EDITOR_ARIA_LABEL = "Note body";
+export const DISCARD_PROMPT = "Discard unsaved changes to this note?";
+
+/**
+ * Whether the draft differs from the note as last loaded. Trailing whitespace
+ * counts: the save trims, so calling such a draft clean would skip the prompt
+ * on the one edit that gets silently reverted.
+ */
+export function draftDirty(draft: string, body: string): boolean {
+  return draft !== body;
+}
+
+/** What a click on the rendered body means. */
+export type NoteClickAction = "ignore" | "navigate" | "edit";
+
+/**
+ * Resolve a click on the prose. Selection wins (a drag to copy ends in a
+ * click, and 865da37 is that bug), then wikilinks, then editing.
+ */
+export function noteClickAction(hasSelection: boolean, wikilinkTarget: string | null): NoteClickAction {
+  if (hasSelection) return "ignore";
+  return wikilinkTarget === null ? "edit" : "navigate";
+}
+
+/**
+ * Whether a save's reply still belongs to the editor that issued it. A
+ * counter, not the slug: reopening the same note is a new session too.
+ */
+export function saveLanded(issued: number, current: number): boolean {
+  return issued === current;
+}
+
+/**
+ * Whether the draft moved since the bytes a save sent — keystrokes made
+ * during the request were never in it, so a success must not close over them.
+ * Unlike {@link saveLanded}, this is about the *text*, not the session.
+ */
+export function draftMoved(sent: string, current: string | null): boolean {
+  return current !== null && current !== sent;
+}
+
 /** The note header: title, provenance badge, relative time, tags. */
 export interface NoteHeaderView {
   readonly title: string;
@@ -1100,9 +1151,10 @@ export function reducePreview(state: PreviewState, event: PreviewEvent): Preview
  * message for all of them is how a user concludes the app is broken when they
  * click a module and the reading pane does not change.
  */
-export function noteEmptyMessage(selectedId: string | null, note: ViewNote | null): string | null {
+export function noteEmptyMessage(selectedId: string | null, note: ViewNote | null, failed = false): string | null {
   if (note !== null) return null;
   if (selectedId === null) return "Nothing open — search with ⌘K, or walk the tree with j and k.";
+  if (failed) return "Couldn’t load this note — retrying…";
   if (selectedId.startsWith(NOTE_PREFIX)) return "Loading…";
   // A module, a file, a package, the git state: real nodes with no prose
   // behind them. The context rail beside this column is where their

package/src/web/client/shell/Columns.tsx

@@ -26,6 +26,7 @@ export interface ColumnsProps {
   /** The §1.3 context bus, as the columns see it. */
   graph: GraphPayload | null;
   note: NotePayload | null;
+  noteFailed: boolean;
   selectedId: string | null;
   recentIds: ReadonlySet<string>;
   /**
@@ -40,6 +41,15 @@ export interface ColumnsProps {
   onSelect: (id: string | null) => void;
   onRefresh: () => void;
   onOpen: (slug: string) => void;
+  /** Save a note's body. Resolves `true` when the write landed. */
+  onSave: (slug: string, body: string) => Promise<boolean>;
+  /**
+   * Ask before a mutation that would invalidate an open draft, closing it if
+   * the user agrees. `false` means keep editing: do not proceed.
+   */
+  onMutate: () => boolean;
+  /** Slot the note column fills with its editor handle, for the shell's guards. */
+  editor: { current: { dirty(): boolean; discard(): void } | null };
   /** Epoch ms for relative times, read once per render by the shell. */
   now: number;
   /**
@@ -75,15 +85,18 @@ function Column({ id, props }: { id: ColumnId; props: ColumnsProps }) {
   return (
     <section class={`weave-col weave-col-${id}`} aria-label={copy.title}>
       <h2 class="weave-col-title">{copy.title}</h2>
-      {id === "tree" ? <Tree graph={props.graph} selectedId={props.selectedId} recentIds={props.recentIds} onSelect={props.onSelect} onRefresh={props.onRefresh} now={props.now} /> : null}
+      {id === "tree" ? <Tree graph={props.graph} selectedId={props.selectedId} recentIds={props.recentIds} onSelect={props.onSelect} onMutate={props.onMutate} onRefresh={props.onRefresh} now={props.now} /> : null}
       {id === "note" ? (
         <Note
           note={props.note}
+          loadFailed={props.noteFailed}
           graph={props.graph}
           selectedId={props.selectedId}
           onSelect={props.onSelect}
           now={props.now}
           onOpen={props.onOpen}
+          onSave={props.onSave}
+          editor={props.editor}
         />
       ) : null}
       {id === "graph" ? (

package/src/web/client/shell/Shell.tsx

@@ -19,7 +19,8 @@
 
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { fetchJson } from "../api.dom";
-import { openNote } from "../api";
+import { openNote, saveNote } from "../api";
+import { DISCARD_PROMPT } from "../note/note.model";
 import type { ColorScheme } from "../graph/graph.model";
 import { schemeOf, watchScheme } from "../graph/scheme";
 import { createSigmaRenderer } from "../graph/renderer.dom";
@@ -83,6 +84,26 @@ export function Shell(props: ShellProps) {
   // Filled by the graph column at mount, cleared on unmount. The global `g`
   // key's only route to the renderer — see `Graph.tsx`'s `fit` prop.
   const fit = useRef<(() => void) | null>(null);
+  // Filled by the note column while an editor is open: the exits that destroy
+  // a draft are the shell's events, not the column's.
+  const editor = useRef<{ dirty(): boolean; discard(): void } | null>(null);
+  /**
+   * Confirm abandoning an open draft, closing it if the user agrees. `false`
+   * means keep editing. Closing here is what stops a tree mutation asking
+   * twice — the draft is gone before the selection that follows it.
+   */
+  const mayDiscard = (): boolean => {
+    const open = editor.current;
+    if (open === null || !open.dirty()) return true;
+    if (!window.confirm(DISCARD_PROMPT)) return false;
+    open.discard();
+    return true;
+  };
+  /** Every selection change routes through here, so no exit skips the guard. */
+  const select = (id: string | null): void => {
+    if (!mayDiscard()) return;
+    void workspace.current?.select(id);
+  };
   // The global key listener reads through this so a handler registered at
   // mount still sees the current overlay.
   const live = useRef({ overlay, selectedId: workspaceState.selectedId, layout, width });
@@ -155,6 +176,18 @@ export function Shell(props: ShellProps) {
   // choice) keep up while the choice is "system".
   useEffect(() => watchScheme(window, setSystemScheme), []);
 
+  // The other exit. No custom message (browsers ignore it), but `returnValue`
+  // as well as `preventDefault` — the only spelling all of them honour.
+  useEffect(() => {
+    const guard = (event: BeforeUnloadEvent): void => {
+      if (editor.current?.dirty() !== true) return;
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", guard);
+    return () => window.removeEventListener("beforeunload", guard);
+  }, []);
+
   useEffect(
     () =>
       watchKeys(document, {
@@ -164,7 +197,7 @@ export function Shell(props: ShellProps) {
             setOverlay,
             focusSelector: (selector) => focusSelector(document, selector),
             fitGraph: () => fit.current?.(),
-            clearSelection: () => { void workspace.current?.select(null); },
+            clearSelection: () => select(null),
             cycleTheme: () => setTheme((current) => cycleTheme(current)),
           }),
       }),
@@ -199,11 +232,30 @@ export function Shell(props: ShellProps) {
         bootFailed={workspaceState.graphFailed}
         graph={workspaceState.graph}
         note={workspaceState.note}
+        noteFailed={workspaceState.noteFailed}
         selectedId={workspaceState.selectedId}
         recentIds={workspaceState.recentIds}
-        onSelect={(id) => void workspace.current?.select(id)}
+        onSelect={select}
+        onMutate={mayDiscard}
         onRefresh={() => workspace.current?.refresh()}
-        onOpen={(slug) => void openNote(fetchJson, slug)}
+        onOpen={(slug) => void (async () => {
+          // Reported, not discarded: a 403 and an editor that opened nothing
+          // used to look identical. `alert` is what the tree already uses.
+          const result = await openNote(fetchJson, slug);
+          if (!result.ok) window.alert(result.message);
+          else if (!result.data.opened) window.alert("could not open the note in an editor");
+        })()}
+        onSave={async (slug, body) => {
+          const result = await saveNote(fetchJson, slug, body);
+          if (!result.ok) {
+            window.alert(result.message);
+            return false;
+          }
+          // The poll would get there in two seconds; this agrees immediately.
+          workspace.current?.refresh();
+          return true;
+        }}
+        editor={editor}
         now={now}
         // The graph column's three ports (§7.5, §10). Supplied here, at the
         // one place that is already allowed to name browser globals, so
@@ -227,7 +279,7 @@ export function Shell(props: ShellProps) {
       {overlay === "search" ? (
         <SearchPalette
           graph={workspaceState.graph}
-          onSelect={(id) => void workspace.current?.select(id)}
+          onSelect={select}
           onClose={() => setOverlay(null)}
           ports={{ fetch: fetchJson }}
         />

package/src/web/client/shell/theme.ts

@@ -411,6 +411,25 @@ body{font-size:var(--weave-px-base)}
 }
 .weave-note-open:hover{color:var(--weave-fg);background:var(--weave-line)}
 .weave-note-open-mark{display:inline-flex;line-height:0}
+/* Save / Done, chip-shaped: the same quiet row, and a control in a reading
+   column should not outweigh the title. */
+.weave-note-edit,.weave-note-save{
+  font:inherit;font-size:var(--weave-px-caption);line-height:1;white-space:nowrap;cursor:pointer;
+  color:var(--weave-dim);background:var(--weave-panel);padding:4px 7px;
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-note-edit:hover,.weave-note-save:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
+/* Save is the row's only affirmative action, so the only one with the accent. */
+.weave-note-save{color:var(--weave-accent);border-color:var(--weave-accent)}
+.weave-note-save:disabled{color:var(--weave-faint);border-color:var(--weave-line-strong);cursor:default}
+/* Mono and a tighter line than the prose: this is Markdown source, where
+   alignment carries meaning proportional text throws away. */
+.weave-note-editor{
+  display:block;width:100%;flex:1;min-height:0;resize:none;
+  padding:12px var(--weave-note-gutter) 28px;box-sizing:border-box;
+  font-family:var(--weave-mono);font-size:var(--weave-px-row);line-height:1.6;
+  color:var(--weave-fg);background:var(--weave-bg);border:0;outline:0;
+}
 .weave-note-tags{margin:6px 0 0;display:flex;gap:5px;flex-wrap:wrap}
 .weave-tag{
   font-size:var(--weave-px-caption);color:var(--weave-accent);background:var(--weave-panel);
@@ -422,6 +441,11 @@ body{font-size:var(--weave-px-base)}
    chrome's 1.6: the extra leading is what a page of running text needs that a
    status bar does not. Code stays mono deliberately. */
 .weave-note-body{padding:12px var(--weave-note-gutter) 28px;font-size:var(--weave-px-body);line-height:1.7;color:var(--weave-fg)}
+/* The prose is the edit affordance: a caret and a faint wash, not a border.
+   This column is read far more often than edited. */
+.weave-note-body{cursor:text}
+.weave-note-body:hover{background:var(--weave-panel)}
+@media (prefers-reduced-motion: no-preference){.weave-note-body{transition:background 120ms ease}}
 .weave-note-body>*:first-child{margin-top:0}
 .weave-note-body h1,.weave-note-body h2,.weave-note-body h3,
 .weave-note-body h4,.weave-note-body h5,.weave-note-body h6{

package/src/web/client/state.ts

@@ -11,10 +11,11 @@ export interface WorkspaceState {
   graph: GraphPayload | null;
   graphFailed: boolean;
   note: NotePayload | null;
+  noteFailed: boolean;
   recentIds: ReadonlySet<string>;
   selectedId: string | null;
 }
 
 export function initialWorkspaceState(): WorkspaceState {
-  return { graph: null, graphFailed: false, note: null, recentIds: new Set(), selectedId: null };
+  return { graph: null, graphFailed: false, note: null, noteFailed: false, recentIds: new Set(), selectedId: null };
 }

package/src/web/client/tree/Tree.tsx

@@ -45,6 +45,11 @@ export interface TreeProps {
   selectedId: string | null;
   recentIds: ReadonlySet<string>;
   onSelect: (id: string) => void;
+  /**
+   * Ask before a mutation that would invalidate an open draft. `false` means
+   * keep editing: the mutation must not run.
+   */
+  onMutate: () => boolean;
   onRefresh: () => void;
   now: number;
 }
@@ -191,6 +196,9 @@ export function Tree(props: TreeProps) {
     } else if (action === "rename") {
       setEditing({ id: menu.id, label: menu.label, value: menu.label });
     } else if (target.type !== "vault") {
+      // Before the request: asking after a delete is asking about a file that
+      // is already gone, and "keep editing" would strand the draft on a 404.
+      if (deletesSelection(props.selectedId, target) && !props.onMutate()) return;
       await run(target.type === "note" ? deleteNote(fetchJson, target.path) : deleteFolder(fetchJson, target.path), deletesSelection(props.selectedId, target) ? "vault" : undefined);
     }
   };
@@ -237,7 +245,9 @@ export function Tree(props: TreeProps) {
     // unactionable — it named no link and offered no way to see them — and it
     // fired on the *commit* of an edit the user had already typed out, which
     // is the least useful moment to ask. Renaming back is one more rename.
+    // An open draft is a different question; `onMutate` asks that one.
     if (target !== null && name && name !== current.label) {
+      if (deletesSelection(props.selectedId, target) && !props.onMutate()) return;
       void run(target.type === "note" ? renameNote(fetchJson, target.path, name) : renameFolder(fetchJson, target.path, name));
     }
   };
@@ -268,7 +278,7 @@ export function Tree(props: TreeProps) {
             setMenu({ id: "vault", label: "Vault", x: event.clientX, y: event.clientY });
           }}
         >
-          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} edit={editing?.id === view.id ? editing.value : null} onEdit={(value) => setEditing((current) => current === null ? null : { ...current, value })} onRename={commitEdit} onSelect={() => { props.onSelect(view.id); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} onMenu={(x, y) => setMenu({ id: view.id, label: view.label, x, y })} onDrop={(dragged) => { const folder = dropFolder(view.id); if (dragged.startsWith("note:") && folder !== undefined) void run(moveNote(fetchJson, dragged.slice("note:".length), folder)); }} />)}
+          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} edit={editing?.id === view.id ? editing.value : null} onEdit={(value) => setEditing((current) => current === null ? null : { ...current, value })} onRename={commitEdit} onSelect={() => { props.onSelect(view.id); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} onMenu={(x, y) => setMenu({ id: view.id, label: view.label, x, y })} onDrop={(dragged) => { const folder = dropFolder(view.id); if (dragged.startsWith("note:") && folder !== undefined) { if (dragged === props.selectedId && !props.onMutate()) return; void run(moveNote(fetchJson, dragged.slice("note:".length), folder)); } }} />)}
         </ul>
       ) : <p class="weave-tree-empty">{empty}</p>}
       <p class="weave-tree-count">{rowCountLabel(rows)}</p>

package/src/web/client/workspace.ts

@@ -54,11 +54,12 @@ export function startWorkspace(opts: WorkspaceOptions): WorkspaceHandle {
   const loadNote = async (): Promise<void> => {
     const slug = noteSlug(state.selectedId);
     if (slug === null) {
-      update({ note: null });
+      update({ note: null, noteFailed: false });
       return;
     }
     const result = await fetchNote(opts.fetch, slug);
-    if (result.ok) update({ note: result.data });
+    if (result.ok) update({ note: result.data, noteFailed: false });
+    else update({ note: null, noteFailed: true });
   };
   const loadGraph = async (): Promise<ApiResult<unknown>> => {
     const previous = state.graph;
@@ -86,7 +87,7 @@ export function startWorkspace(opts: WorkspaceOptions): WorkspaceHandle {
     polling = true;
     try {
       const result = await loadGraph();
-      if (result.ok && !result.cached && noteSlug(state.selectedId) !== null) await loadNote();
+      if (noteSlug(state.selectedId) !== null && (state.note === null || (result.ok && !result.cached))) await loadNote();
     } finally {
       polling = false;
     }

package/src/web/server/routes.ts

@@ -7,6 +7,7 @@
  * | GET    | `/app.js`                | the committed bundle, `Cache-Control: no-store` |
  * | GET    | `/api/graph`             | {@link GraphPayload}, ETag'd on `stamp`      |
  * | GET    | `/api/note/:slug`        | {@link NotePayload}                          |
+ * | POST   | `/api/note/:slug`        | save a note's Markdown body                  |
  * | POST   | `/api/note/:slug/rename` | rename a vault note                          |
  * | POST   | `/api/note/:slug/move`   | move a vault note                            |
  * | DELETE | `/api/note/:slug`        | delete a vault note                          |
@@ -52,7 +53,7 @@ import type { GraphModel as CoreGraphModel } from "../../core/graph/model";
 import { openNoteInEditor } from "../../core/openInEditor";
 import type { Note } from "../../core/types";
 import type { VaultMutationResult } from "../../core/vault";
-import { createFolder, deleteFolder, deleteNote, getNote, moveNote, renameFolder, renameNote, resolveHtmlPath, searchNotes } from "../../core/vault";
+import { createFolder, deleteFolder, deleteNote, getNote, moveNote, renameFolder, renameNote, resolveHtmlPath, searchNotes, setNoteBody } from "../../core/vault";
 import { deriveTagIndex, type TaggedNote } from "../../core/view/links";
 import type {
   GraphPayload,
@@ -555,18 +556,29 @@ async function routeNote(
   }
   const action = target.endsWith("/rename") ? "rename" : target.endsWith("/move") ? "move" : null;
   const slug = action === null ? target : target.slice(0, -(action.length + 1));
-  if (method === "POST" && action !== null) {
+  if (method === "POST") {
     const body = await readJsonBody(req);
     if (typeof body !== "object" || body === null) {
       sendJson(res, 400, { error: "expected JSON object" });
       return true;
     }
+    const fields = body as { body?: unknown; name?: unknown; folder?: unknown };
+    // The payload decides, not the suffix: slugs nest, so `archive/rename` is
+    // a real note and only `{name}`/`{folder}` mean the action.
+    if (typeof fields.body === "string") {
+      sendMutation(res, await setNoteBody(deps.vaultRoot, target, fields.body));
+      return true;
+    }
+    if (action === null) {
+      sendJson(res, 400, { error: "expected { body: string }" });
+      return true;
+    }
     const result = action === "rename"
-      ? typeof (body as { name?: unknown }).name === "string"
-        ? await renameNote(deps.vaultRoot, slug, (body as { name: string }).name)
+      ? typeof fields.name === "string"
+        ? await renameNote(deps.vaultRoot, slug, fields.name)
         : null
-      : (body as { folder?: unknown }).folder === null || typeof (body as { folder?: unknown }).folder === "string"
-        ? await moveNote(deps.vaultRoot, slug, (body as { folder: string | null }).folder)
+      : fields.folder === null || typeof fields.folder === "string"
+        ? await moveNote(deps.vaultRoot, slug, fields.folder)
         : null;
     if (result === null) sendJson(res, 400, { error: action === "rename" ? "expected { name: string }" : "expected { folder: string | null }" });
     else sendMutation(res, result);