pi-weave 0.3.8 → 0.3.10

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

@@ -0,0 +1,139 @@
+/**
+ * The history slider's controls, and the one DOM step the replay needs.
+ *
+ * Everything that can be decided without a DOM is in `replay.model.ts`.
+ */
+
+import { useLayoutEffect, useRef } from "preact/hooks";
+import type { HistoryRevision } from "../../shared/wire";
+import { HISTORY_EMPTY, HISTORY_OFF_HINT, HISTORY_TRIMMED, MARK_CLOSE, MARK_OPEN, changeBars, dayMarks, replayStep, splitMarked } from "./replay.model";
+
+/** What the column holds while replaying. `null` revisions means still loading. */
+export interface ReplayState {
+  revisions: HistoryRevision[] | null;
+  enabled: boolean;
+  /** Older revisions were dropped to keep the history file small. */
+  trimmed: boolean;
+  index: number;
+  playing: boolean;
+  error: string | null;
+}
+
+/**
+ * Turn the marker characters in rendered note HTML into `<mark>` elements.
+ * Text nodes are created with `createTextNode`, so nothing here parses HTML.
+ */
+export function wrapMarks(root: HTMLElement): HTMLElement | null {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const nodes: Text[] = [];
+  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) nodes.push(node as Text);
+  let inside = false;
+  let first: HTMLElement | null = null;
+  for (const node of nodes) {
+    const text = node.data;
+    if (!inside && !text.includes(MARK_OPEN) && !text.includes(MARK_CLOSE)) continue;
+    const split = splitMarked(text, inside);
+    inside = split.inside;
+    const fragment = root.ownerDocument.createDocumentFragment();
+    for (const part of split.parts) {
+      const textNode = root.ownerDocument.createTextNode(part.text);
+      if (!part.marked) {
+        fragment.append(textNode);
+        continue;
+      }
+      const mark = root.ownerDocument.createElement("mark");
+      mark.className = "weave-replay-mark";
+      mark.append(textNode);
+      fragment.append(mark);
+      first ??= mark;
+    }
+    node.replaceWith(fragment);
+  }
+  return first;
+}
+
+/** Past this many versions the band shows no per-version bars: they would be hairlines. */
+const MAX_BARS = 160;
+
+const Icon = (props: { d: string; fill?: boolean }) => (
+  <svg width="14" height="14" viewBox="0 0 18 18" aria-hidden="true"
+    fill={props.fill ? "currentColor" : "none"} stroke={props.fill ? "none" : "currentColor"}
+    stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <path d={props.d} />
+  </svg>
+);
+
+export function ReplayBar(props: {
+  state: ReplayState;
+  /** Epoch ms, for the "Today" / "Yesterday" day labels. */
+  now: number;
+  onIndex: (index: number) => void;
+  onPlay: () => void;
+}) {
+  const { revisions, index, playing, enabled, trimmed, error } = props.state;
+  const track = useRef<HTMLDivElement>(null);
+  const last = revisions === null ? 0 : revisions.length - 1;
+  // CSSOM, not a style attribute (the CSP forbids those): how far along the
+  // track the filled part reaches.
+  useLayoutEffect(() => {
+    track.current?.style.setProperty("--weave-replay-at", `${last === 0 ? 100 : (index / last) * 100}%`);
+  }, [index, last]);
+  if (error !== null) return <div class="weave-replay weave-replay-note" role="status">{error}</div>;
+  if (revisions === null) return <div class="weave-replay weave-replay-note" role="status">Loading history…</div>;
+  const step = replayStep(revisions, index);
+  if (step === null) return <div class="weave-replay weave-replay-note" role="status">{enabled ? HISTORY_EMPTY : HISTORY_OFF_HINT}</div>;
+  return (
+    <div class="weave-replay" role="group" aria-label="Note history">
+      <p class="weave-replay-caption" aria-live="polite">
+        <span class="weave-replay-clock"><Icon d="M9 3a6 6 0 1 0 0 12A6 6 0 0 0 9 3zM9 5.5V9l2.5 1.5" /></span>
+        <span class="weave-replay-position">Version {step.position}</span>
+        <span class={`weave-replay-who weave-replay-${step.by}`}>{step.action}</span>
+        <span class="weave-replay-time" title={step.atIso}>{step.at}</span>
+        {step.change === "" ? null : <span class="weave-replay-change">{step.change}</span>}
+        {trimmed && index === 0 ? <span class="weave-replay-time">{HISTORY_TRIMMED}</span> : null}
+      </p>
+      <div class="weave-replay-controls">
+        <button type="button" aria-label="Previous version" disabled={index <= 0} onClick={() => props.onIndex(index - 1)}>
+          <Icon d="m11 4-5 5 5 5" />
+        </button>
+        <button type="button" class="weave-replay-play" aria-label={playing ? "Pause replay" : "Play replay"} disabled={last === 0} onClick={props.onPlay}>
+          {playing ? <Icon d="M5 4h3v10H5zM10 4h3v10h-3z" fill /> : <Icon d="M6 4v10l8-5z" fill />}
+        </button>
+        <button type="button" aria-label="Next version" disabled={index >= last} onClick={() => props.onIndex(index + 1)}>
+          <Icon d="m7 4 5 5-5 5" />
+        </button>
+        <div class="weave-replay-track" ref={track}>
+          {revisions.length > MAX_BARS || last === 0 ? null : (
+            <span class="weave-replay-bars" aria-hidden="true" style={{ "--weave-bars": `${revisions.length}` }}>
+              {changeBars(revisions).map((bar, at) => (
+                // Placed where the slider's thumb sits for this version, so a bar and its stop line up.
+                <span key={at} style={{ "--weave-bar": `${Math.round(bar.height * 100)}%`, "--weave-bar-at": `${(at / last) * 100}%` }}
+                  class={`weave-replay-bar weave-replay-${bar.by}${at > index ? " weave-replay-ahead" : ""}${at === index ? " weave-replay-current" : ""}`} />
+              ))}
+            </span>
+          )}
+          {last === 0 ? null : (
+            <span class="weave-replay-days" aria-hidden="true">
+              {dayMarks(revisions, props.now).map((mark) => (
+                <span key={mark.at} class="weave-replay-day" style={{ "--weave-day-at": `${mark.at * 100}%` }}>{mark.label}</span>
+              ))}
+            </span>
+          )}
+          <input
+            class="weave-replay-slider"
+            type="range"
+            aria-label="Version"
+            aria-valuetext={`${step.position}: ${step.action}`}
+            min={0}
+            max={last}
+            step={1}
+            value={index}
+            disabled={last === 0}
+            onInput={(event) => props.onIndex(Number(event.currentTarget.value))}
+          />
+        </div>
+      </div>
+      {enabled ? null : <p class="weave-replay-hint">{HISTORY_OFF_HINT}</p>}
+    </div>
+  );
+}

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

@@ -1,11 +1,47 @@
+import { joinRawOpening, joinRawTail, splitRawOpening, splitRawTail } from "../../shared/view";
 import { tabSelection, type WorkspaceLayout } from "../../shared/workspace";
 
+/**
+ * An open editor. `body` is only the part above the `## Raw` tail, and the
+ * tail's entries get their own box (`raw`): one textarea holding both used
+ * to drop anything typed below the heading on save, without a word.
+ */
 export interface NoteDraft {
   body: string;
   baseline: string;
+  /** The verbatim `## Raw` tail as it was when the editor opened; "" when none. */
+  tail: string;
+  /** The tail's entries, below its heading and notice, as edited. */
+  raw: string;
+  rawBaseline: string;
   saving: boolean;
+  /** The body and Raw entries as they were when the editor opened: what Discard returns to. */
+  original: string;
+  originalRaw: string;
+  /** When an autosave last landed (epoch ms); null until one has. */
+  savedAt: number | null;
+  /** The last save attempt failed; cleared by the next one that lands. */
+  failed: boolean;
 }
 
+/** How a save should treat the `## Raw` tail; `raw` means the person edited it. */
+export interface SaveOptions {
+  raw?: boolean;
+  /** An autosave: the shell reports a failure in the edit bar, not with an alert. */
+  quiet?: boolean;
+}
+
+/** How a draft save behaves. */
+export interface DraftSaveOptions {
+  /**
+   * Keep the editor open after the write lands (autosave). Without it a save
+   * that catches up with the editor closes it, which is what Done does.
+   */
+  keepOpen?: boolean;
+}
+
+export type SaveNote = (slug: string, body: string, options?: SaveOptions) => Promise<boolean>;
+
 interface TaskSource {
   body: string;
   version: number;
@@ -16,26 +52,44 @@ interface TaskSource {
 export interface DraftStore {
   get(slug: string): Readonly<NoteDraft> | null;
   subscribe(listener: () => void): () => void;
+  /** Open an editor on a full note body; the `## Raw` tail is split off. */
   open(slug: string, body: string): void;
   edit(slug: string, body: string): void;
+  /** Edit the `## Raw` entries. */
+  editRaw(slug: string, raw: string): void;
+  /**
+   * Catch an open editor's Raw box up with the note on disk. Entries an
+   * agent appended while the editor was open (and survived an autosave,
+   * which keeps the server's tail) would otherwise be missing from it, and
+   * the next save of an edited Raw would write them away.
+   */
+  syncTail(slug: string, serverBody: string): void;
   discard(slug: string): void;
   isDirty(slug: string): boolean;
   dirtySlugs(): string[];
-  save(slug: string, onSave: (slug: string, body: string) => Promise<boolean>): Promise<void>;
+  save(slug: string, onSave: SaveNote, options?: DraftSaveOptions): Promise<void>;
+  /**
+   * Put the body and Raw entries back to how they were when the editor
+   * opened. Returns whether that differs from what is on disk now (an
+   * autosave already wrote the edits), in which case the caller saves.
+   */
+  revert(slug: string): boolean;
   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>;
+  saveTask(slug: string, body: string, onSave: SaveNote): Promise<boolean>;
   clearTaskSources(slugs: readonly string[]): void;
 }
 
-export function createDraftStore(): DraftStore {
+/** `now` is the clock behind "Saved 12:04"; tests pass a fixed one. */
+export function createDraftStore(now: () => number = Date.now): 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());
+  const dirty = (draft: NoteDraft): boolean => draft.body !== draft.baseline || draft.raw !== draft.rawBaseline;
 
   return {
     get: (slug) => drafts.get(slug) ?? null,
@@ -45,13 +99,41 @@ export function createDraftStore(): DraftStore {
     },
     open(slug, body) {
       if (drafts.has(slug)) return;
-      drafts.set(slug, { body, baseline: body, saving: false });
+      const { head, tail } = splitRawTail(body);
+      const { entries } = splitRawOpening(tail);
+      drafts.set(slug, { body: head, baseline: head, tail, raw: entries, rawBaseline: entries, saving: false, original: head, originalRaw: entries, savedAt: null, failed: false });
       notify();
     },
     edit(slug, body) {
       const draft = drafts.get(slug);
       if (draft === undefined || draft.body === body) return;
       draft.body = body;
+      // New words get a fresh autosave attempt; a failure says so until then.
+      draft.failed = false;
+      notify();
+    },
+    editRaw(slug, raw) {
+      const draft = drafts.get(slug);
+      if (draft === undefined || draft.raw === raw) return;
+      draft.raw = raw;
+      draft.failed = false;
+      notify();
+    },
+    syncTail(slug, serverBody) {
+      const draft = drafts.get(slug);
+      // A write in flight answers for itself, and Raw edits not yet saved are
+      // the person's to keep: only an untouched box follows the disk.
+      if (draft === undefined || draft.saving || draft.raw !== draft.rawBaseline) return;
+      const { tail } = splitRawTail(serverBody);
+      if (tail === draft.tail) return;
+      const { entries } = splitRawOpening(tail);
+      // Discard returns to how the note was when the editor opened, plus what
+      // was appended since: an agent's entry is not the person's edit to undo.
+      if (draft.originalRaw === draft.rawBaseline) draft.originalRaw = entries;
+      else if (entries.startsWith(draft.rawBaseline)) draft.originalRaw += entries.slice(draft.rawBaseline.length);
+      draft.tail = tail;
+      draft.raw = entries;
+      draft.rawBaseline = entries;
       notify();
     },
     discard(slug) {
@@ -59,32 +141,54 @@ export function createDraftStore(): DraftStore {
     },
     isDirty(slug) {
       const draft = drafts.get(slug);
-      return draft !== undefined && draft.body !== draft.baseline;
+      return draft !== undefined && dirty(draft);
     },
     dirtySlugs() {
-      return [...drafts].filter(([, draft]) => draft.body !== draft.baseline).map(([slug]) => slug);
+      return [...drafts].filter(([, draft]) => dirty(draft)).map(([slug]) => slug);
+    },
+    revert(slug) {
+      const draft = drafts.get(slug);
+      if (draft === undefined) return false;
+      draft.body = draft.original;
+      draft.raw = draft.originalRaw;
+      notify();
+      return dirty(draft);
     },
-    async save(slug, onSave) {
+    async save(slug, onSave, options) {
       const draft = drafts.get(slug);
       if (draft === undefined || draft.saving || taskSources.get(slug)?.saving) return;
       const sent = draft.body;
+      const sentRaw = draft.raw;
+      // An untouched Raw is sent as it was and kept by the server, so an
+      // entry dictated while this editor was open survives the save. An
+      // edited one is sent as the person left it, and replaces the tail.
+      const rawEdited = sentRaw !== draft.rawBaseline;
+      const tail = rawEdited ? joinRawOpening(splitRawOpening(draft.tail).opening, sentRaw) : draft.tail;
+      const full = joinRawTail(sent, tail);
       draft.saving = true;
       notify();
       let ok = false;
       try {
-        ok = await onSave(slug, sent);
+        const saveOptions: SaveOptions = { ...(rawEdited ? { raw: true } : {}), ...(options?.keepOpen ? { quiet: true } : {}) };
+        ok = await onSave(slug, full, Object.keys(saveOptions).length === 0 ? undefined : saveOptions);
       } 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.body = full;
             source.version = ++loadVersion;
             delete source.pending;
           }
-          if (ok && draft.body === sent) drafts.delete(slug);
+          if (ok && !options?.keepOpen && draft.body === sent && draft.raw === sentRaw) drafts.delete(slug);
           else {
-            if (ok) draft.baseline = sent;
+            if (ok) {
+              draft.baseline = sent;
+              draft.rawBaseline = sentRaw;
+              draft.tail = tail;
+              draft.savedAt = now();
+            }
+            draft.failed = !ok;
             draft.saving = false;
           }
           notify();

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

@@ -0,0 +1,153 @@
+/**
+ * The edit bar: the pure half (the refresh's E1).
+ *
+ * While a note is being edited, one bar under the title says so, carries the
+ * formatting buttons, shows whether the edits are on disk yet, and offers
+ * Discard and Done. Saving is automatic: a short pause in typing writes the
+ * draft (see `drafts.ts`, `keepOpen`), so Done only has to catch up and close.
+ *
+ * Everything that can be decided without a DOM is here: what the status says,
+ * and how a formatting button rewrites the text around the selection.
+ */
+
+import type { IconName } from "../shell/icons.model";
+
+/** How long typing has to pause before the draft is written. */
+export const AUTOSAVE_MS = 2500;
+
+export const EDITING_LABEL = "Editing";
+export const DISCARD_EDITS_LABEL = "Discard changes";
+export const RETRY_LABEL = "Retry";
+/** Asked before Discard writes the opening version back over autosaved edits. */
+export const REVERT_PROMPT = "Put this note back the way it was when you started editing?";
+
+/** What the status slot shows. */
+export type EditStatusKind = "saving" | "failed" | "pending" | "saved" | "clean";
+
+export interface EditStatus {
+  kind: EditStatusKind;
+  label: string;
+}
+
+/** The parts of a draft the status depends on. */
+export interface EditStatusInput {
+  saving: boolean;
+  failed: boolean;
+  /** Edits not yet on disk. */
+  dirty: boolean;
+  savedAt: number | null;
+}
+
+function clock(at: number): string {
+  return new Date(at).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+}
+
+/** The status slot, in priority order: a write in flight, a failed one, waiting edits, the last save. */
+export function editStatus(input: EditStatusInput): EditStatus {
+  if (input.saving) return { kind: "saving", label: "Saving…" };
+  if (input.failed) return { kind: "failed", label: "Not saved" };
+  if (input.dirty) return { kind: "pending", label: "Unsaved changes" };
+  if (input.savedAt !== null) return { kind: "saved", label: `Saved ${clock(input.savedAt)}` };
+  return { kind: "clean", label: "No changes yet" };
+}
+
+/** The formatting buttons, in bar order. */
+export type FormatKind = "heading" | "bold" | "italic" | "link" | "wikilink" | "task";
+
+export interface FormatTool {
+  kind: FormatKind;
+  icon: IconName;
+  label: string;
+  /** The key that applies it with ⌘/Ctrl, if any. */
+  key: string | null;
+}
+
+export const FORMAT_TOOLS: readonly FormatTool[] = [
+  { kind: "heading", icon: "heading", label: "Heading", key: null },
+  { kind: "bold", icon: "bold", label: "Bold", key: "b" },
+  { kind: "italic", icon: "italic", label: "Italic", key: "i" },
+  // No ⌘K: that is search, everywhere in the workspace, the editor included.
+  { kind: "link", icon: "link", label: "Link", key: null },
+  { kind: "wikilink", icon: "wikilink", label: "Link to a note", key: null },
+  { kind: "task", icon: "task", label: "Task", key: null },
+];
+
+/** The tool bound to a ⌘/Ctrl key, if any. */
+export function formatForKey(key: string): FormatKind | null {
+  return FORMAT_TOOLS.find((tool) => tool.key === key.toLowerCase())?.kind ?? null;
+}
+
+/** A textarea's value and selection. */
+export interface TextEdit {
+  value: string;
+  start: number;
+  end: number;
+}
+
+/** Wrap the selection, or insert a placeholder and select it so typing replaces it. */
+function wrap(edit: TextEdit, before: string, after: string, placeholder: string): TextEdit {
+  const selected = edit.value.slice(edit.start, edit.end);
+  const inner = selected === "" ? placeholder : selected;
+  const value = edit.value.slice(0, edit.start) + before + inner + after + edit.value.slice(edit.end);
+  return { value, start: edit.start + before.length, end: edit.start + before.length + inner.length };
+}
+
+/**
+ * Rewrite every line the selection touches. A selection that ends just after
+ * a line break (a triple-clicked line) does not touch the line below it.
+ */
+function eachLine(edit: TextEdit, rewrite: (line: string) => string): TextEdit {
+  const from = edit.value.lastIndexOf("\n", edit.start - 1) + 1;
+  const last = edit.end > edit.start && edit.value[edit.end - 1] === "\n" ? edit.end - 1 : edit.end;
+  const newline = edit.value.indexOf("\n", last);
+  const to = newline === -1 ? edit.value.length : newline;
+  const lines = edit.value.slice(from, to).split("\n").map(rewrite).join("\n");
+  const value = edit.value.slice(0, from) + lines + edit.value.slice(to);
+  return { value, start: from, end: from + lines.length };
+}
+
+const HEADING_RE = /^#{1,6}[ \t]+/;
+const TASK_RE = /^([ \t]*)[-*+][ \t]+\[[ xX]\][ \t]+/;
+const BULLET_RE = /^([ \t]*)[-*+][ \t]+/;
+
+/** Apply one formatting button to the text around the selection. */
+export function applyFormat(edit: TextEdit, kind: FormatKind): TextEdit {
+  switch (kind) {
+    case "bold":
+      return wrap(edit, "**", "**", "bold text");
+    case "italic":
+      return wrap(edit, "_", "_", "italic text");
+    case "wikilink":
+      return wrap(edit, "[[", "]]", "note title");
+    case "link": {
+      const selected = edit.value.slice(edit.start, edit.end);
+      if (selected === "") return wrap(edit, "[", "](https://)", "link text");
+      // With text selected, the URL is what is left to type, so select that.
+      const value = `${edit.value.slice(0, edit.start)}[${selected}](https://)${edit.value.slice(edit.end)}`;
+      const url = edit.start + selected.length + 3;
+      return { value, start: url, end: url + "https://".length };
+    }
+    case "heading":
+      return eachLine(edit, (line) => (HEADING_RE.test(line) ? line.replace(HEADING_RE, "") : `## ${line}`));
+    case "task":
+      return eachLine(edit, (line) => {
+        if (TASK_RE.test(line)) return line.replace(TASK_RE, "$1");
+        if (BULLET_RE.test(line)) return line.replace(BULLET_RE, "$1- [ ] ");
+        return `- [ ] ${line}`;
+      });
+  }
+}
+
+/**
+ * The one span a formatting change replaced: `before[start, end)` became
+ * `text`. The editor inserts just that span through the browser, so ⌘Z
+ * undoes the formatting; assigning the whole value would wipe the undo stack.
+ */
+export function replacedSpan(before: string, after: string): { start: number; end: number; text: string } {
+  const max = Math.min(before.length, after.length);
+  let head = 0;
+  while (head < max && before.charCodeAt(head) === after.charCodeAt(head)) head++;
+  let tail = 0;
+  while (tail < max - head && before.charCodeAt(before.length - 1 - tail) === after.charCodeAt(after.length - 1 - tail)) tail++;
+  return { start: head, end: before.length - tail, text: after.slice(head, after.length - tail) };
+}

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

@@ -678,7 +678,51 @@ export const SANITIZE_CONFIG: SanitizeConfig = frozen({
  * what gets handed over, with {@link SANITIZE_CONFIG}.
  */
 export function renderNote(purify: Purifier, body: string, index: WikiIndex): string {
-  return purify.sanitize(renderMarkdown(body, index), SANITIZE_CONFIG);
+  return tldrCard(purify.sanitize(renderMarkdown(body, index), SANITIZE_CONFIG));
+}
+
+// `TLDR`, `TL;DR`, either with the colon inside or after the bold, as search and the graph sheet read it.
+const TLDR_OPEN_RE = /^(\s*<h1>[\s\S]*?<\/h1>)?\s*<p><strong>TL;?DR[ \t]*:?<\/strong>[ \t]*:?[ \t\n]*/i;
+const LIST_TAG_RE = /<(\/?)(?:ul|ol)\b[^>]*>/g;
+
+/**
+ * Lift a note's opening TLDR into a card.
+ *
+ * Finalized notes open with a `**TLDR:**` paragraph, often followed by a list
+ * of `- [ ]` tasks (the notepad skill's format). The reading view sets that
+ * block apart so the summary is the first thing the eye lands on. Only the
+ * opening TLDR counts (optionally under a repeated `# Title`); a TLDR further
+ * down is ordinary prose.
+ *
+ * It runs on the *sanitised* HTML and only moves markup that is already
+ * there, adding one `div` and one label `span` of its own, so it opens no
+ * hole in the three layers above. The task checkboxes keep their order, and
+ * with it their `data-weave-task` indices.
+ */
+export function tldrCard(html: string): string {
+  const open = TLDR_OPEN_RE.exec(html);
+  if (open === null) return html;
+  const close = html.indexOf("</p>", open[0].length);
+  if (close === -1) return html;
+  const lead = open[1] ?? "";
+  const summary = html.slice(open[0].length, close);
+  let end = close + "</p>".length;
+  const list = /^\s*<(?:ul|ol)\b/.exec(html.slice(end));
+  if (list !== null) {
+    // Balanced, so a nested list stays inside the card with its parent.
+    LIST_TAG_RE.lastIndex = end;
+    let depth = 0;
+    for (let tag = LIST_TAG_RE.exec(html); tag !== null; tag = LIST_TAG_RE.exec(html)) {
+      depth += tag[1] === "/" ? -1 : 1;
+      if (depth === 0) {
+        end = tag.index + tag[0].length;
+        break;
+      }
+    }
+    if (depth !== 0) return html;
+  }
+  const items = html.slice(close + "</p>".length, end);
+  return `${lead}\n<div class="weave-tldr"><p><span class="weave-tldr-label">TLDR</span>${summary}</p>${items}\n</div>${html.slice(end)}`;
 }
 
 // --- reading a click back out of the DOM --------------------------------------------------
@@ -845,6 +889,23 @@ export const DONE_LABEL = "Done";
 export const SAVE_LABEL = "Save";
 export const SAVING_LABEL = "Saving…";
 export const EDITOR_ARIA_LABEL = "Note body";
+export const EDITOR_PLACEHOLDER = "Start writing…";
+/** Names the `## Raw` section beneath the editor, and its own text box. */
+export const RAW_TAIL_ARIA_LABEL = "Raw notes";
+export const RAW_EDITOR_ARIA_LABEL = "Raw notes text";
+export const RAW_TITLE = "Raw";
+
+/**
+ * The quiet line beside the Raw toggle. Closed, it says how much is folded
+ * away; open, it says what saving does with the words.
+ */
+export function rawSummary(entries: string, open: boolean): string {
+  if (open) return "Your words as captured. Edits here are saved with the note.";
+  const count = entries.match(/^<!-- appended\b/gm)?.length ?? 0;
+  if (count > 0) return `${count} ${count === 1 ? "entry" : "entries"} captured`;
+  const lines = entries === "" ? 0 : entries.split("\n").length;
+  return `${lines} ${lines === 1 ? "line" : "lines"}`;
+}
 export const DISCARD_PROMPT = "Discard unsaved changes to this note?";
 
 /** The note header: title, provenance badge, relative time, tags. */
@@ -860,6 +921,24 @@ export interface NoteHeaderView {
   readonly created: string;
   readonly createdIso: string;
   readonly tags: readonly string[];
+  /** Who wrote it, as a sentence: "You wrote this". */
+  readonly byline: string;
+  /** Where it lives: "Vault / projects", or "Vault" at the root. */
+  readonly folder: string;
+}
+
+/** The byline under the title, in plain words rather than a provenance code. */
+export function noteByline(source: WireNoteSource): string {
+  if (source === "human") return "You wrote this";
+  if (source === "agent") return "Agent wrote this";
+  return "Generated by pi-weave";
+}
+
+export const VAULT_LABEL = "Vault";
+
+/** The folder crumb above the title: the slug's directories under the vault. */
+export function noteFolder(slug: string): string {
+  return [VAULT_LABEL, ...slug.split("/").slice(0, -1)].join(" / ");
 }
 
 /**
@@ -885,6 +964,8 @@ export function noteHeader(note: ViewNote, now: number): NoteHeaderView {
     created: relTime(note.created, now),
     createdIso: note.created,
     tags: note.tags,
+    byline: noteByline(note.source),
+    folder: noteFolder(note.slug),
   };
 }