pi-weave 0.3.8 → 0.3.9

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

@@ -0,0 +1,128 @@
+/**
+ * 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, 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 track shows no per-version dots: they would touch. */
+const MAX_TICKS = 80;
+
+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;
+  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_TICKS || last === 0 ? null : (
+            <span class="weave-replay-ticks" aria-hidden="true">
+              {revisions.map((revision, at) => (
+                <span key={at} class={`weave-replay-tick weave-replay-${revision.by}${at > index ? " weave-replay-ahead" : ""}`} />
+              ))}
+            </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,29 @@
+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;
 }
 
+/** How a save should treat the `## Raw` tail; `raw` means the person edited it. */
+export interface SaveOptions {
+  raw?: boolean;
+}
+
+export type SaveNote = (slug: string, body: string, options?: SaveOptions) => Promise<boolean>;
+
 interface TaskSource {
   body: string;
   version: number;
@@ -16,17 +34,20 @@ 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;
   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): 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>;
+  saveTask(slug: string, body: string, onSave: SaveNote): Promise<boolean>;
   clearTaskSources(slugs: readonly string[]): void;
 }
 
@@ -36,6 +57,7 @@ export function createDraftStore(): DraftStore {
   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,7 +67,9 @@ 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 });
       notify();
     },
     edit(slug, body) {
@@ -54,37 +78,54 @@ export function createDraftStore(): DraftStore {
       draft.body = body;
       notify();
     },
+    editRaw(slug, raw) {
+      const draft = drafts.get(slug);
+      if (draft === undefined || draft.raw === raw) return;
+      draft.raw = raw;
+      notify();
+    },
     discard(slug) {
       if (drafts.delete(slug)) notify();
     },
     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);
     },
     async save(slug, onSave) {
       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);
+        ok = await onSave(slug, full, rawEdited ? { raw: true } : undefined);
       } 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 && 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.saving = false;
           }
           notify();

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

@@ -845,6 +845,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. */

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

@@ -0,0 +1,173 @@
+/**
+ * Replay: the pure half of the note history slider.
+ *
+ * The server sends every saved revision of a note, oldest first (see
+ * `src/core/history.ts`). This module decides what one step of the slider
+ * says ("Agent rewrote the summary · 10:05 · +120 −40") and which text that
+ * step added, so the column can highlight it.
+ *
+ * ## Highlighting through Markdown
+ *
+ * The added text is found in the Markdown source, but it has to be shown in
+ * the rendered HTML. So the source is marked with two private-use characters,
+ * {@link MARK_OPEN} and {@link MARK_CLOSE}, before it is rendered, and the
+ * column turns the marked text nodes into `<mark>` elements afterwards
+ * ({@link splitMarked}). The markers are characters, not tags, so they pass
+ * through the renderer and the sanitiser as plain text and cannot introduce
+ * markup of their own.
+ *
+ * A marker must not change what the Markdown means, so {@link markChange}
+ * puts one pair on each changed line, after any block syntax (`## `, `- `,
+ * `> `), skips fence and rule lines, and widens a range to cover a whole link
+ * rather than splitting `[[target]]` or `(url)`.
+ */
+
+import type { HistoryRevision } from "../../shared/wire";
+
+export const MARK_OPEN = "";
+export const MARK_CLOSE = "";
+
+/** Milliseconds between steps while playing. */
+export const PLAY_INTERVAL_MS = 900;
+
+/** The smallest prefix/suffix-preserving edit from `from` to `to` (same rule as core's log). */
+export function changedRange(from: string, to: string): { start: number; end: number; removed: number } {
+  const max = Math.min(from.length, to.length);
+  let head = 0;
+  while (head < max && from.charCodeAt(head) === to.charCodeAt(head)) head++;
+  let tail = 0;
+  while (tail < max - head && from.charCodeAt(from.length - 1 - tail) === to.charCodeAt(to.length - 1 - tail)) tail++;
+  return { start: head, end: to.length - tail, removed: from.length - tail - head };
+}
+
+const BLOCK_PREFIX_RE = /^[ \t]*(?:#{1,6}[ \t]+|>[ \t]?|(?:[*+-]|\d{1,9}[.)])[ \t]+(?:\[[ xX]\][ \t]+)?)*/;
+const SKIP_LINE_RE = /^[ \t]*(?:`{3,}|~{3,}|<!--|(?:[-*_][ \t]*){3,}$)/;
+const LINK_RE = /!?\[\[[^\]\n]*\]\]|!?\[[^\]\n]*\]\([^)\n]*\)|<[a-z][a-z0-9+.-]*:[^>\s]*>/gi;
+
+/** Mark the text `body` gained over `previous` (the whole body for the first revision). */
+export function markChange(previous: string | null, body: string): string {
+  const { start, end } = changedRange(previous ?? "", body);
+  if (start >= end) return body;
+  const ranges: Array<[number, number]> = [];
+  let lineStart = body.lastIndexOf("\n", start - 1) + 1;
+  while (lineStart < end) {
+    const newline = body.indexOf("\n", lineStart);
+    const lineEnd = newline === -1 ? body.length : newline;
+    const line = body.slice(lineStart, lineEnd);
+    if (!SKIP_LINE_RE.test(line)) {
+      const prefix = (BLOCK_PREFIX_RE.exec(line) as RegExpExecArray)[0].length;
+      let from = Math.max(start - lineStart, prefix);
+      let to = Math.min(end, lineEnd) - lineStart;
+      for (const link of line.matchAll(LINK_RE)) {
+        const linkEnd = (link.index as number) + link[0].length;
+        if (from > (link.index as number) && from < linkEnd) from = link.index as number;
+        if (to > (link.index as number) && to < linkEnd) to = linkEnd;
+      }
+      if (line.slice(from, to).trim() !== "") ranges.push([lineStart + from, lineStart + to]);
+    }
+    lineStart = lineEnd + 1;
+  }
+  let marked = body;
+  for (const [from, to] of ranges.reverse()) {
+    marked = marked.slice(0, from) + MARK_OPEN + marked.slice(from, to) + MARK_CLOSE + marked.slice(to);
+  }
+  return marked;
+}
+
+/**
+ * Split one text node's text at the markers. `inside` carries over from the
+ * previous text node, because a marked range can span elements
+ * (`plain **bold** plain`).
+ */
+export function splitMarked(text: string, inside: boolean): { parts: Array<{ text: string; marked: boolean }>; inside: boolean } {
+  const parts: Array<{ text: string; marked: boolean }> = [];
+  let current = "";
+  let state = inside;
+  for (const char of text) {
+    if (char === MARK_OPEN || char === MARK_CLOSE) {
+      if (current !== "") parts.push({ text: current, marked: state });
+      current = "";
+      state = char === MARK_OPEN;
+    } else {
+      current += char;
+    }
+  }
+  if (current !== "") parts.push({ text: current, marked: state });
+  return { parts, inside: state };
+}
+
+const WHO: Record<HistoryRevision["by"], string> = {
+  human: "You",
+  agent: "Agent",
+  outside: "Outside edit",
+  system: "pi-weave",
+};
+
+const WHAT: Record<string, string> = {
+  create: "created the note",
+  edit: "edited",
+  append: "added to the note",
+  raw: "added words to Raw",
+  finalize: "rewrote the summary",
+  generate: "generated the note",
+  repair: "fixed links",
+  outside: "changed outside pi-weave",
+  baseline: "earliest saved version",
+};
+
+/** One step of the slider, as the column shows it. */
+export interface ReplayStep {
+  /** "3 of 12". */
+  position: string;
+  /** "Agent rewrote the summary". */
+  action: string;
+  /** Short local time; the full ISO string goes in `atIso`. */
+  at: string;
+  atIso: string;
+  /** "+120 −40", or "" when nothing changed in the text. */
+  change: string;
+  /** The body to render, with the added text marked. */
+  marked: string;
+  by: HistoryRevision["by"];
+}
+
+function shortTime(iso: string, previous: string | null): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  const time = date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+  const sameDay = previous !== null && new Date(previous).toDateString() === date.toDateString();
+  return sameDay ? time : `${date.toLocaleDateString(undefined, { month: "short", day: "numeric" })}, ${time}`;
+}
+
+/** Describe revision `index`. Clamped, so a stale index after a refetch still shows something. */
+export function replayStep(revisions: readonly HistoryRevision[], index: number): ReplayStep | null {
+  if (revisions.length === 0) return null;
+  const i = Math.max(0, Math.min(revisions.length - 1, index));
+  const revision = revisions[i] as HistoryRevision;
+  const previous = i === 0 ? null : (revisions[i - 1] as HistoryRevision);
+  const range = changedRange(previous?.body ?? "", revision.body);
+  const added = range.end - range.start;
+  const change = [added > 0 ? `+${added}` : "", range.removed > 0 ? `−${range.removed}` : ""].filter(Boolean).join(" ");
+  const what = WHAT[revision.op] ?? revision.op;
+  return {
+    position: `${i + 1} of ${revisions.length}`,
+    action: revision.op === "baseline" ? what[0]!.toUpperCase() + what.slice(1) : `${WHO[revision.by]} ${what}`,
+    at: shortTime(revision.at, previous?.at ?? null),
+    atIso: revision.at,
+    change,
+    marked: markChange(previous?.body ?? null, revision.body),
+    by: revision.by,
+  };
+}
+
+/** The next index while playing, or null at the end. */
+export function nextStep(index: number, count: number): number | null {
+  return index + 1 < count ? index + 1 : null;
+}
+
+export const HISTORY_LABEL = "History";
+export const HISTORY_CLOSE_LABEL = "Close history";
+export const HISTORY_OFF_HINT = "History is off, so new changes are not being saved. Turn it on in Settings → Editor.";
+/** Shown on the oldest version kept, once older ones were dropped (the file holds at most 500). */
+export const HISTORY_TRIMMED = "Older versions were trimmed";
+export const HISTORY_EMPTY = "No saved versions yet. Changes are saved from now on.";

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

@@ -19,6 +19,8 @@ import type { GraphPayload } from "../../shared/wire";
 import { CONTEXT_EMPTY } from "./shell.model";
 import { Icon } from "../tree/Tree";
 import { ResizeHandle } from "./ResizeHandle";
+import { TrailStrip } from "../trail/TrailStrip";
+import type { TrailTurnView } from "../trail/trail.model";
 
 export interface ContextRailProps {
   graph: GraphPayload | null;
@@ -26,6 +28,10 @@ export interface ContextRailProps {
   onSelect: (id: string, newTab?: boolean) => void;
   tagHeight: number;
   onTagResize: (height: number) => void;
+  /** The recall trail's turns, newest first. Omitted means no strip. */
+  trail?: readonly TrailTurnView[];
+  trailTurn?: number | null;
+  onReplay?: (turn: number) => void;
 }
 
 function Row({ row, onSelect }: { row: ContextRow; onSelect: (newTab: boolean) => void }) {
@@ -106,6 +112,7 @@ export function ContextRail(props: ContextRailProps) {
   const tags = railTagsView(model.tags, toggles);
   return (
     <div class="weave-rail" aria-label={CONTEXT_EMPTY.title}>
+      {props.trail === undefined ? null : <TrailStrip turns={props.trail} shownTurn={props.trailTurn ?? null} onSelect={props.onSelect} onReplay={(turn) => props.onReplay?.(turn)} />}
       {model.empty === null ? null : <p class="weave-ctx-empty">{model.empty}</p>}
       {model.groups.map((group) => {
         const view = railSectionView(group, toggles);

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

@@ -1,9 +1,11 @@
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import type { ComponentChildren } from "preact";
 import type { WorkspaceLayout } from "../../shared/workspace";
 import type { Preferences } from "../../shared/preferences";
 import { ACCENTS, THEMES } from "../../shared/themes";
 import type { AccentChoice, PaletteChoice } from "../../shared/themes";
+import { historySettings } from "../api";
+import { fetchJson } from "../api.dom";
 import { ForceTuner } from "../graph/ForceTuner";
 import { useFocusTrap } from "./FocusTrap";
 import { keyHelp } from "./keys.model";
@@ -20,6 +22,23 @@ export function Settings(props: {
   const [category, setCategory] = useState<typeof CATEGORIES[number]>("General");
   const [refreshCount, setRefreshCount] = useState(0);
   const trap = useFocusTrap();
+  // Note history lives in the vault, not in workspace preferences, so the
+  // agent's writes respect it too. `null` until the server has answered.
+  const [history, setHistory] = useState<boolean | null>(null);
+  // One change at a time: the control is disabled until the server answers,
+  // so a late response can never overwrite a newer choice.
+  const [historySaving, setHistorySaving] = useState(false);
+  useEffect(() => {
+    void historySettings(fetchJson).then((result) => { if (result.ok) setHistory(result.data.enabled); });
+  }, []);
+  const toggleHistory = (enabled: boolean): void => {
+    setHistory(enabled);
+    setHistorySaving(true);
+    void historySettings(fetchJson, enabled).then((result) => {
+      setHistory(result.ok ? result.data.enabled : !enabled);
+      setHistorySaving(false);
+    });
+  };
   const p = props.layout.preferences;
   const update = (values: Partial<Preferences>): void => props.onChange({ ...props.layout, preferences: { ...p, ...values } });
   return <div class="weave-scrim weave-settings-scrim" onClick={props.onClose}>
@@ -55,6 +74,7 @@ export function Settings(props: {
           <Row name="Spellcheck" hint="Use your browser or device’s spellchecker while editing."><input type="checkbox" checked={p.spellcheck} onChange={(event) => update({ spellcheck: event.currentTarget.checked })} /></Row>
           <Row name="Readable line length" hint="Keep note text in a comfortable reading column."><input type="checkbox" checked={p.readable} onChange={(event) => update({ readable: event.currentTarget.checked })} /></Row>
           <Row name="Open notes in editing mode" hint="Newly opened notes start in the editor. Existing drafts are preserved."><input type="checkbox" checked={p.defaultEdit} onChange={(event) => update({ defaultEdit: event.currentTarget.checked })} /></Row>
+          <Row name="Note history" hint="Save a copy of a note after every change, by you or your agent, so History can replay how it was written. Turning it off keeps what is already saved."><input type="checkbox" disabled={history === null || historySaving} checked={history ?? false} onChange={(event) => toggleHistory(event.currentTarget.checked)} /></Row>
         </> : null}
         {category === "Files" ? <>
           <Row name="On startup" hint="Choose which tabs appear when you reopen this workspace."><select aria-label="On startup" value={p.startup} onChange={(event) => update({ startup: event.currentTarget.value as Preferences["startup"] })}><option value="restore">Restore open tabs</option><option value="empty">Start with an empty tab</option></select></Row>