kaizen-agent 1.32.0 → 1.33.0

package/web/notebook.ts

@@ -1,52 +1,104 @@
 // The notebook page. Bundled into web/notebook.js by `bun run build:web`; the page
 // never sees the filesystem, only /vault. See design.md, "Notebook", for the look.
-import { EditorView, Decoration, ViewPlugin, WidgetType, keymap, type DecorationSet, type ViewUpdate } from "@codemirror/view";
+import {
+  EditorView,
+  Decoration,
+  ViewPlugin,
+  WidgetType,
+  keymap,
+  type DecorationSet,
+  type ViewUpdate,
+} from "@codemirror/view";
 import { EditorState, StateEffect, StateField, type Range } from "@codemirror/state";
 import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { syntaxTree, syntaxHighlighting, HighlightStyle } from "@codemirror/language";
 import { markdown, markdownLanguage, markdownKeymap } from "@codemirror/lang-markdown";
 import { tags as t } from "@lezer/highlight";
 import { autocompletion, startCompletion, type CompletionContext, type Completion } from "@codemirror/autocomplete";
-import { wikilinks, tags, resolve, safeUrl, tree, freshName, parseTable, boardLink, resolveRun, anchorWords, TABS, type Tree, type BoardLink } from "./notes-lib.ts";
+import {
+  wikilinks,
+  tags,
+  resolve,
+  safeUrl,
+  tree,
+  freshName,
+  parseTable,
+  boardLink,
+  resolveRun,
+  anchorWords,
+  TABS,
+  type Tree,
+  type BoardLink,
+} from "./notes-lib.ts";
 
 type Note = { name: string; mtime: number; text: string };
 
 const $ = <T extends HTMLElement = HTMLElement>(id: string) => document.getElementById(id) as T;
-const esc = (s: string) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
+const esc = (s: string) =>
+  String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
 const ico = (n: string) => `<svg><use href="#i-${n}"/></svg>`;
 const last = (name: string) => name.split("/").pop()!;
-const folderOf = (name: string) => name.includes("/") ? name.slice(0, name.lastIndexOf("/")) : "";
+const folderOf = (name: string) => (name.includes("/") ? name.slice(0, name.lastIndexOf("/")) : "");
 
 type Board = {
-  runs: { id: string; short: string; title: string; status: string; findings: { n: number; text: string; done: boolean }[]; backlog: { n: number; status: string; text: string }[] }[];
+  runs: {
+    id: string;
+    short: string;
+    title: string;
+    status: string;
+    findings: { n: number; text: string; done: boolean }[];
+    backlog: { n: number; status: string; text: string }[];
+  }[];
   ideas: { text: string; status: string }[];
 };
-let board: Board = { runs: [], ideas: [] };   // what [[run:…]] and [[idea:…]] can name, from /links
-let dir = "";                         // the state dir whose notes/ is shown
+let board: Board = { runs: [], ideas: [] }; // what [[run:…]] and [[idea:…]] can name, from /links
+let dir = ""; // the state dir whose notes/ is shown
 let notes: Note[] = [];
-let open: string | null = null;       // the note in the editor
-let base = 0;                         // the mtime it was loaded or last saved at
-let dirty = false, saving: Promise<void> | null = null, timer: ReturnType<typeof setTimeout> | undefined;
+let open: string | null = null; // the note in the editor
+let base = 0; // the mtime it was loaded or last saved at
+let dirty = false,
+  saving: Promise<void> | null = null,
+  timer: ReturnType<typeof setTimeout> | undefined;
 let conflict: { text: string; mtime: number } | null = null;
 let confirmDelete = false;
-const shut = new Set<string>();       // folders folded in the tree, for this page load
+const shut = new Set<string>(); // folders folded in the tree, for this page load
 
-function toast(msg: string) { const el = $("toast"); el.textContent = msg; el.classList.add("on"); setTimeout(() => el.classList.remove("on"), 2600); }
+function toast(msg: string) {
+  const el = $("toast");
+  el.textContent = msg;
+  el.classList.add("on");
+  setTimeout(() => el.classList.remove("on"), 2600);
+}
 async function post(body: Record<string, unknown>) {
   try {
-    const r = await fetch("/vault", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ dir, ...body }) });
+    const r = await fetch("/vault", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ dir, ...body }),
+    });
     return { status: r.status, ...(await r.json().catch(() => ({}))) };
-  } catch { return { status: 0, error: "The board is not running" }; }
+  } catch {
+    return { status: 0, error: "The board is not running" };
+  }
 }
 
 // ---- live preview: markdown hidden and typeset on every line the cursor is not on
 
 class Check extends WidgetType {
-  constructor(readonly on: boolean, readonly at: number) { super(); }
-  eq(o: Check) { return o.on === this.on && o.at === this.at; }
+  constructor(
+    readonly on: boolean,
+    readonly at: number,
+  ) {
+    super();
+  }
+  eq(o: Check) {
+    return o.on === this.on && o.at === this.at;
+  }
   toDOM(view: EditorView) {
     const b = document.createElement("input");
-    b.type = "checkbox"; b.checked = this.on; b.className = "cm-task";
+    b.type = "checkbox";
+    b.checked = this.on;
+    b.className = "cm-task";
     b.setAttribute("aria-label", this.on ? "done" : "to do");
     b.addEventListener("mousedown", (e) => {
       e.preventDefault();
@@ -54,58 +106,114 @@ class Check extends WidgetType {
     });
     return b;
   }
-  ignoreEvent() { return true; }
+  ignoreEvent() {
+    return true;
+  }
 }
 class Bullet extends WidgetType {
-  eq() { return true; }
-  toDOM() { const s = document.createElement("span"); s.className = "cm-bullet"; s.textContent = "•"; return s; }
+  eq() {
+    return true;
+  }
+  toDOM() {
+    const s = document.createElement("span");
+    s.className = "cm-bullet";
+    s.textContent = "•";
+    return s;
+  }
 }
 class Rule extends WidgetType {
-  eq() { return true; }
-  toDOM() { const s = document.createElement("span"); s.className = "cm-rule"; return s; }
+  eq() {
+    return true;
+  }
+  toDOM() {
+    const s = document.createElement("span");
+    s.className = "cm-rule";
+    return s;
+  }
 }
 class Img extends WidgetType {
-  constructor(readonly src: string, readonly alt: string) { super(); }
-  eq(o: Img) { return o.src === this.src && o.alt === this.alt; }
-  toDOM() { const i = document.createElement("img"); i.src = this.src; i.alt = this.alt; i.className = "cm-img"; return i; }
+  constructor(
+    readonly src: string,
+    readonly alt: string,
+  ) {
+    super();
+  }
+  eq(o: Img) {
+    return o.src === this.src && o.alt === this.alt;
+  }
+  toDOM() {
+    const i = document.createElement("img");
+    i.src = this.src;
+    i.alt = this.alt;
+    i.className = "cm-img";
+    return i;
+  }
 }
 
 // A table the cursor is not in is drawn as one; clicking it puts the cursor in its
 // source. Cells are text nodes: nothing in a note becomes markup.
 class TableView extends WidgetType {
-  constructor(readonly src: string, readonly at: number) { super(); }
-  eq(o: TableView) { return o.src === this.src && o.at === this.at; }
+  constructor(
+    readonly src: string,
+    readonly at: number,
+  ) {
+    super();
+  }
+  eq(o: TableView) {
+    return o.src === this.src && o.at === this.at;
+  }
   toDOM(view: EditorView) {
-    const t = parseTable(this.src), wrap = document.createElement("div"), table = document.createElement("table");
+    const t = parseTable(this.src),
+      wrap = document.createElement("div"),
+      table = document.createElement("table");
     wrap.className = "cm-table";
     const row = (cells: string[], tag: "th" | "td") => {
       const tr = document.createElement("tr");
-      cells.forEach((c, i) => { const el = document.createElement(tag); el.textContent = c; if (t.align[i]) el.style.textAlign = t.align[i]!; tr.append(el); });
+      cells.forEach((c, i) => {
+        const el = document.createElement(tag);
+        el.textContent = c;
+        if (t.align[i]) el.style.textAlign = t.align[i]!;
+        tr.append(el);
+      });
       return tr;
     };
-    const head = document.createElement("thead"), body = document.createElement("tbody");
-    head.append(row(t.head, "th")); t.rows.forEach((r) => body.append(row(r, "td")));
-    table.append(head, body); wrap.append(table);
-    wrap.addEventListener("mousedown", (e) => { e.preventDefault(); view.dispatch({ selection: { anchor: this.at } }); view.focus(); });
+    const head = document.createElement("thead"),
+      body = document.createElement("tbody");
+    head.append(row(t.head, "th"));
+    t.rows.forEach((r) => body.append(row(r, "td")));
+    table.append(head, body);
+    wrap.append(table);
+    wrap.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      view.dispatch({ selection: { anchor: this.at } });
+      view.focus();
+    });
     return wrap;
   }
-  ignoreEvent() { return true; }
+  ignoreEvent() {
+    return true;
+  }
 }
 // Whether the editor has focus, as state: an unfocused editor shows every table drawn.
 const focusSet = StateEffect.define<boolean>();
 const focused = StateField.define<boolean>({
   create: () => false,
-  update: (v, tr) => tr.effects.reduce((f, e) => e.is(focusSet) ? e.value : f, v),
+  update: (v, tr) => tr.effects.reduce((f, e) => (e.is(focusSet) ? e.value : f), v),
 });
 // Block widgets may span lines, which a view plugin may not do: tables live in a field.
 function tables(state: EditorState) {
-  const out: Range<Decoration>[] = [], sel = state.selection.main, live = state.field(focused, false);
+  const out: Range<Decoration>[] = [],
+    sel = state.selection.main,
+    live = state.field(focused, false);
   syntaxTree(state).iterate({
     enter(n) {
       if (n.name !== "Table") return;
-      const from = state.doc.lineAt(n.from).from, to = state.doc.lineAt(n.to).to;
+      const from = state.doc.lineAt(n.from).from,
+        to = state.doc.lineAt(n.to).to;
       if (live && sel.to >= from && sel.from <= to) return false;
-      out.push(Decoration.replace({ widget: new TableView(state.sliceDoc(from, to), from), block: true }).range(from, to));
+      out.push(
+        Decoration.replace({ widget: new TableView(state.sliceDoc(from, to), from), block: true }).range(from, to),
+      );
       return false;
     },
   });
@@ -113,36 +221,77 @@ function tables(state: EditorState) {
 }
 const tableField = StateField.define<DecorationSet>({
   create: tables,
-  update: (v, tr) => tr.docChanged || tr.selection || tr.effects.some((e) => e.is(focusSet)) || syntaxTree(tr.startState) !== syntaxTree(tr.state) ? tables(tr.state) : v,
+  update: (v, tr) =>
+    tr.docChanged ||
+    tr.selection ||
+    tr.effects.some((e) => e.is(focusSet)) ||
+    syntaxTree(tr.startState) !== syntaxTree(tr.state)
+      ? tables(tr.state)
+      : v,
   provide: (f) => EditorView.decorations.from(f),
 });
 
 // A link to the board: where it goes, what the chip says, and whether it is there.
-const ICON: Record<string, string> = { idea: "idea", starting: "idea", running: "run", stalled: "stall", waiting: "wait", done: "done", abandoned: "aband" };
+const ICON: Record<string, string> = {
+  idea: "idea",
+  starting: "idea",
+  running: "run",
+  stalled: "stall",
+  waiting: "wait",
+  done: "done",
+  abandoned: "aband",
+};
 function boardTarget(l: BoardLink) {
   const q = (o: Record<string, string>) => "/?" + new URLSearchParams({ all: "1", dir, ...o }).toString();
   if (l.kind === "idea") {
     const t = l.text.toLowerCase();
-    const idea = board.ideas.find((i) => i.text.toLowerCase() === t) ?? board.ideas.find((i) => i.text.toLowerCase().startsWith(t));
-    return { name: idea?.text ?? l.text, sub: "idea", status: idea?.status ?? "", href: idea ? q({ idea: idea.text }) : null };
+    const idea =
+      board.ideas.find((i) => i.text.toLowerCase() === t) ??
+      board.ideas.find((i) => i.text.toLowerCase().startsWith(t));
+    return {
+      name: idea?.text ?? l.text,
+      sub: "idea",
+      status: idea?.status ?? "",
+      href: idea ? q({ idea: idea.text }) : null,
+    };
   }
-  const id = resolveRun(l.id, board.runs.map((r) => r.id)), run = board.runs.find((r) => r.id === id);
+  const id = resolveRun(
+      l.id,
+      board.runs.map((r) => r.id),
+    ),
+    run = board.runs.find((r) => r.id === id);
   const item = l.item && run && (l.item.type === "finding" ? run.findings : run.backlog).some((x) => x.n === l.item!.n);
   const ok = !!run && (!l.item || item);
   return {
-    name: run?.short ?? l.id, sub: anchorWords(l), status: run?.status ?? "",
-    href: ok ? q({ run: run!.id, ...(l.tab ? { tab: l.tab } : {}), ...(l.item ? { item: `${l.item.type}-${l.item.n}` } : {}) }) : null,
+    name: run?.short ?? l.id,
+    sub: anchorWords(l),
+    status: run?.status ?? "",
+    href: ok
+      ? q({ run: run!.id, ...(l.tab ? { tab: l.tab } : {}), ...(l.item ? { item: `${l.item.type}-${l.item.n}` } : {}) })
+      : null,
   };
 }
 // Leave for the board only once the note is on disk.
 async function go(href: string) {
   await flush();
-  if (dirty) { toast("This note is not saved yet"); return; }
+  if (dirty) {
+    toast("This note is not saved yet");
+    return;
+  }
   location.href = href;
 }
 class BoardChip extends WidgetType {
-  constructor(readonly name: string, readonly sub: string, readonly status: string, readonly href: string | null) { super(); }
-  eq(o: BoardChip) { return o.name === this.name && o.sub === this.sub && o.status === this.status && o.href === this.href; }
+  constructor(
+    readonly name: string,
+    readonly sub: string,
+    readonly status: string,
+    readonly href: string | null,
+  ) {
+    super();
+  }
+  eq(o: BoardChip) {
+    return o.name === this.name && o.sub === this.sub && o.status === this.status && o.href === this.href;
+  }
   toDOM() {
     const c = document.createElement("span");
     c.className = "cm-board" + (this.href ? "" : " cm-board-missing");
@@ -154,125 +303,234 @@ class BoardChip extends WidgetType {
       c.append(ic);
     }
     c.append(this.name);
-    if (this.sub) { const s = document.createElement("span"); s.className = "sub"; s.textContent = "› " + this.sub; c.append(s); }
-    c.addEventListener("mousedown", (e) => { e.preventDefault(); if (this.href) void go(this.href); else toast("That is not on the board"); });
+    if (this.sub) {
+      const s = document.createElement("span");
+      s.className = "sub";
+      s.textContent = "› " + this.sub;
+      c.append(s);
+    }
+    c.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      if (this.href) void go(this.href);
+      else toast("That is not on the board");
+    });
     return c;
   }
-  ignoreEvent() { return true; }
+  ignoreEvent() {
+    return true;
+  }
 }
 
 const hide = Decoration.replace({});
-const refresh = StateEffect.define<null>();   // the list of notes changed: redraw missing links
+const refresh = StateEffect.define<null>(); // the list of notes changed: redraw missing links
 
 function build(view: EditorView): DecorationSet {
-  const { state } = view, doc = state.doc, out: Range<Decoration>[] = [];
+  const { state } = view,
+    doc = state.doc,
+    out: Range<Decoration>[] = [];
   const live = new Set<number>();
   // Only a focused editor has a cursor line: a note just opened reads fully typeset.
-  if (view.hasFocus) for (const r of state.selection.ranges) for (let l = doc.lineAt(r.from).number; l <= doc.lineAt(r.to).number; l++) live.add(l);
+  if (view.hasFocus)
+    for (const r of state.selection.ranges)
+      for (let l = doc.lineAt(r.from).number; l <= doc.lineAt(r.to).number; l++) live.add(l);
   const on = (pos: number) => live.has(doc.lineAt(pos).number);
   // A plugin may not replace a line break: anything that would is left as written.
-  const put = (d: Decoration, from: number, to: number) => { if (doc.lineAt(from).number === doc.lineAt(to).number) out.push(d.range(from, to)); };
+  const put = (d: Decoration, from: number, to: number) => {
+    if (doc.lineAt(from).number === doc.lineAt(to).number) out.push(d.range(from, to));
+  };
   const lines = (from: number, to: number, cls: string) => {
-    for (let l = doc.lineAt(from).number; l <= doc.lineAt(to).number; l++) out.push(Decoration.line({ class: cls }).range(doc.line(l).from));
+    for (let l = doc.lineAt(from).number; l <= doc.lineAt(to).number; l++)
+      out.push(Decoration.line({ class: cls }).range(doc.line(l).from));
   };
   for (const { from, to } of view.visibleRanges) {
     syntaxTree(state).iterate({
-      from, to,
+      from,
+      to,
       enter(n) {
         const name = n.name;
         const h = /^ATXHeading(\d)$/.exec(name);
-        if (h) { lines(n.from, n.from, `cm-h cm-h${Math.min(+h[1]!, 4)}`); return; }
+        if (h) {
+          lines(n.from, n.from, `cm-h cm-h${Math.min(+h[1]!, 4)}`);
+          return;
+        }
         if (name === "HeaderMark" && n.node.parent?.name.startsWith("ATX")) {
-          if (!on(n.from)) put(hide, n.from, Math.min(n.to + (doc.sliceString(n.to, n.to + 1) === " " ? 1 : 0), doc.lineAt(n.from).to));
+          if (!on(n.from))
+            put(
+              hide,
+              n.from,
+              Math.min(n.to + (doc.sliceString(n.to, n.to + 1) === " " ? 1 : 0), doc.lineAt(n.from).to),
+            );
           return;
         }
-        if (name === "EmphasisMark" || name === "StrikethroughMark" || (name === "CodeMark" && n.node.parent?.name === "InlineCode")) {
+        if (
+          name === "EmphasisMark" ||
+          name === "StrikethroughMark" ||
+          (name === "CodeMark" && n.node.parent?.name === "InlineCode")
+        ) {
           if (!on(n.from)) put(hide, n.from, n.to);
           return;
         }
-        if (name === "Blockquote") { lines(n.from, n.to, "cm-quote"); return; }
+        if (name === "Blockquote") {
+          lines(n.from, n.to, "cm-quote");
+          return;
+        }
         if (name === "QuoteMark") {
-          if (!on(n.from)) put(hide, n.from, Math.min(n.to + (doc.sliceString(n.to, n.to + 1) === " " ? 1 : 0), doc.lineAt(n.from).to));
+          if (!on(n.from))
+            put(
+              hide,
+              n.from,
+              Math.min(n.to + (doc.sliceString(n.to, n.to + 1) === " " ? 1 : 0), doc.lineAt(n.from).to),
+            );
           return;
         }
         if (name === "FencedCode") {
           lines(n.from, n.to, "cm-fence");
-          out.push(Decoration.line({ class: "cm-fence-a" }).range(doc.lineAt(n.from).from), Decoration.line({ class: "cm-fence-z" }).range(doc.lineAt(n.to).from));
+          out.push(
+            Decoration.line({ class: "cm-fence-a" }).range(doc.lineAt(n.from).from),
+            Decoration.line({ class: "cm-fence-z" }).range(doc.lineAt(n.to).from),
+          );
           return false;
         }
-        if (name === "HorizontalRule") { if (!on(n.from)) put(Decoration.replace({ widget: new Rule() }), n.from, n.to); return; }
+        if (name === "HorizontalRule") {
+          if (!on(n.from)) put(Decoration.replace({ widget: new Rule() }), n.from, n.to);
+          return;
+        }
         if (name === "ListMark" && n.node.parent?.parent?.name === "BulletList") {
           if (on(n.from)) return;
           const task = n.node.nextSibling?.name === "Task";
-          put(task ? hide : Decoration.replace({ widget: new Bullet() }), n.from, task ? Math.min(n.to + 1, doc.lineAt(n.from).to) : n.to);
+          put(
+            task ? hide : Decoration.replace({ widget: new Bullet() }),
+            n.from,
+            task ? Math.min(n.to + 1, doc.lineAt(n.from).to) : n.to,
+          );
           return;
         }
         if (name === "TaskMarker") {
-          if (!on(n.from)) put(Decoration.replace({ widget: new Check(/x/i.test(doc.sliceString(n.from, n.to)), n.from) }), n.from, n.to);
+          if (!on(n.from))
+            put(
+              Decoration.replace({ widget: new Check(/x/i.test(doc.sliceString(n.from, n.to)), n.from) }),
+              n.from,
+              n.to,
+            );
           return;
         }
         if (name === "Image") {
-          const url = n.node.getChild("URL"), marks = n.node.getChildren("LinkMark");
+          const url = n.node.getChild("URL"),
+            marks = n.node.getChildren("LinkMark");
           if (on(n.from) || !url || marks.length < 2) return false;
           const src = safeUrl(doc.sliceString(url.from, url.to));
-          if (src && /^https?:/i.test(src)) put(Decoration.replace({ widget: new Img(src, doc.sliceString(marks[0]!.to, marks[1]!.from)) }), n.from, n.to);
+          if (src && /^https?:/i.test(src))
+            put(
+              Decoration.replace({ widget: new Img(src, doc.sliceString(marks[0]!.to, marks[1]!.from)) }),
+              n.from,
+              n.to,
+            );
           return false;
         }
         if (name === "Link") {
-          const url = n.node.getChild("URL"), marks = n.node.getChildren("LinkMark");
+          const url = n.node.getChild("URL"),
+            marks = n.node.getChildren("LinkMark");
           // Only the inline form `[text](url)`; a reference link stays as written.
           if (!url || marks.length < 4) return;
           const href = safeUrl(doc.sliceString(url.from, url.to));
           const text = { from: marks[0]!.to, to: marks[1]!.from };
           // A link to somewhere safeUrl refuses stays as written, so what it points at is visible.
-          if (on(n.from) || !href) { out.push(Decoration.mark({ class: "cm-link-src" }).range(n.from, n.to)); return; }
-          if (text.to > text.from) out.push(Decoration.mark({ class: "cm-link", attributes: { "data-href": href } }).range(text.from, text.to));
-          put(hide, marks[0]!.from, marks[0]!.to); put(hide, marks[1]!.from, n.to);
+          if (on(n.from) || !href) {
+            out.push(Decoration.mark({ class: "cm-link-src" }).range(n.from, n.to));
+            return;
+          }
+          if (text.to > text.from)
+            out.push(
+              Decoration.mark({ class: "cm-link", attributes: { "data-href": href } }).range(text.from, text.to),
+            );
+          put(hide, marks[0]!.from, marks[0]!.to);
+          put(hide, marks[1]!.from, n.to);
           return;
         }
         if (name === "URL" && n.node.parent?.name !== "Link" && n.node.parent?.name !== "Image") {
           const href = safeUrl(doc.sliceString(n.from, n.to));
-          out.push(Decoration.mark({ class: "cm-link", attributes: href && !on(n.from) ? { "data-href": href } : {} }).range(n.from, n.to));
+          out.push(
+            Decoration.mark({ class: "cm-link", attributes: href && !on(n.from) ? { "data-href": href } : {} }).range(
+              n.from,
+              n.to,
+            ),
+          );
         }
       },
     });
   }
   // Wikilinks and tags are not markdown: found by notes-lib over the text.
   // ponytail: the whole note is scanned on each redraw; limit to visible ranges if notes reach megabytes.
-  const text = doc.toString(), names = notes.map((x) => x.name);
+  const text = doc.toString(),
+    names = notes.map((x) => x.name);
   for (const w of wikilinks(text)) {
     const bl = boardLink(w);
     if (bl) {
-      if (on(w.from)) { out.push(Decoration.mark({ class: "cm-wiki" }).range(w.from, w.to)); continue; }
+      if (on(w.from)) {
+        out.push(Decoration.mark({ class: "cm-wiki" }).range(w.from, w.to));
+        continue;
+      }
       const t = boardTarget(bl);
-      put(Decoration.replace({ widget: new BoardChip(w.label !== w.target ? w.label : t.name, t.sub, t.status, t.href) }), w.from, w.to);
+      put(
+        Decoration.replace({ widget: new BoardChip(w.label !== w.target ? w.label : t.name, t.sub, t.status, t.href) }),
+        w.from,
+        w.to,
+      );
       continue;
     }
     const target = resolve(w.name, names);
     const cls = "cm-wiki" + (target ? "" : " cm-wiki-missing");
-    if (on(w.from)) { out.push(Decoration.mark({ class: cls }).range(w.from, w.to)); continue; }
+    if (on(w.from)) {
+      out.push(Decoration.mark({ class: cls }).range(w.from, w.to));
+      continue;
+    }
     const labelAt = text.lastIndexOf(w.label, w.to - 2);
-    const lf = labelAt > w.from ? labelAt : w.from + 2, lt = lf + w.label.length;
-    put(hide, w.from, lf); out.push(Decoration.mark({ class: cls, attributes: { "data-note": target ?? w.name } }).range(lf, lt)); put(hide, lt, w.to);
+    const lf = labelAt > w.from ? labelAt : w.from + 2,
+      lt = lf + w.label.length;
+    put(hide, w.from, lf);
+    out.push(Decoration.mark({ class: cls, attributes: { "data-note": target ?? w.name } }).range(lf, lt));
+    put(hide, lt, w.to);
   }
-  for (const g of tags(text)) out.push(Decoration.mark({ class: "cm-tag", attributes: on(g.from) ? {} : { "data-tag": g.tag } }).range(g.from, g.to));
+  for (const g of tags(text))
+    out.push(
+      Decoration.mark({ class: "cm-tag", attributes: on(g.from) ? {} : { "data-tag": g.tag } }).range(g.from, g.to),
+    );
   return Decoration.set(out, true);
 }
 
-const preview = ViewPlugin.fromClass(class {
-  decorations: DecorationSet;
-  constructor(view: EditorView) { this.decorations = build(view); }
-  update(u: ViewUpdate) {
-    if (u.docChanged || u.viewportChanged || u.selectionSet || u.focusChanged || syntaxTree(u.startState) !== syntaxTree(u.state)
-      || u.transactions.some((tr) => tr.effects.some((e) => e.is(refresh)))) this.decorations = build(u.view);
-  }
-}, { decorations: (v) => v.decorations });
+const preview = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = build(view);
+    }
+    update(u: ViewUpdate) {
+      if (
+        u.docChanged ||
+        u.viewportChanged ||
+        u.selectionSet ||
+        u.focusChanged ||
+        syntaxTree(u.startState) !== syntaxTree(u.state) ||
+        u.transactions.some((tr) => tr.effects.some((e) => e.is(refresh)))
+      )
+        this.decorations = build(u.view);
+    }
+  },
+  { decorations: (v) => v.decorations },
+);
 
 const look = HighlightStyle.define([
   { tag: t.emphasis, fontStyle: "italic" },
   { tag: t.strong, fontWeight: "600" },
   { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.monospace, fontFamily: "var(--mono)", fontSize: "0.86em", background: "var(--bg)", borderRadius: "var(--r-s)", padding: "1px 4px" },
+  {
+    tag: t.monospace,
+    fontFamily: "var(--mono)",
+    fontSize: "0.86em",
+    background: "var(--bg)",
+    borderRadius: "var(--r-s)",
+    padding: "1px 4px",
+  },
   { tag: [t.processingInstruction, t.meta, t.url, t.labelName, t.contentSeparator], color: "var(--dim)" },
   { tag: t.link, color: "var(--accent)" },
   { tag: t.quote, color: "var(--dim)" },
@@ -287,12 +545,23 @@ const clicks = EditorView.domEventHandlers({
     const href = el.dataset.href;
     // A relative link is a note (`[x](Other%20note.md)`), as in Obsidian; the rest open in a tab.
     if (href && !/^[a-z][a-z0-9+.-]*:/i.test(href)) {
-      let name = href; try { name = decodeURIComponent(href); } catch { /* as written */ }
-      const hit = resolve(name.split("#")[0]!, notes.map((x) => x.name));
+      let name = href;
+      try {
+        name = decodeURIComponent(href);
+      } catch {
+        /* as written */
+      }
+      const hit = resolve(
+        name.split("#")[0]!,
+        notes.map((x) => x.name),
+      );
       hit ? void openNote(hit) : toast(`No note named ${name}`);
     } else if (href) window.open(href, "_blank", "noopener");
     else if (el.dataset.note) openOrCreate(el.dataset.note);
-    else if (el.dataset.tag) { $<HTMLInputElement>("q").value = "#" + el.dataset.tag; drawSide(); }
+    else if (el.dataset.tag) {
+      $<HTMLInputElement>("q").value = "#" + el.dataset.tag;
+      drawSide();
+    }
     return true;
   },
 });
@@ -325,14 +594,27 @@ function slash(cx: CompletionContext) {
     validFor: /^\/[\w ]*$/,
     // Boosted in list order, so an unfiltered menu reads as written above.
     options: BLOCKS.map(([label, src, detail], i): Completion => ({
-      label: "/" + label.toLowerCase(), displayLabel: label, detail, boost: 50 - i,
+      label: "/" + label.toLowerCase(),
+      displayLabel: label,
+      detail,
+      boost: 50 - i,
       apply: (view, _c, from, to) => {
         // Straight under a line of text, `---` would underline it into a heading and a
         // table would join its paragraph: both need a blank line above.
         const line = view.state.doc.lineAt(from);
-        const gap = (label === "Divider" || label === "Table") && line.number > 1 && view.state.doc.line(line.number - 1).text.trim() ? "\n" : "";
-        const text = gap + src.replace("|", ""), caret = from + gap.length + src.indexOf("|");
-        view.dispatch({ changes: { from, to, insert: text }, selection: { anchor: caret }, userEvent: "input.complete" });
+        const gap =
+          (label === "Divider" || label === "Table") &&
+          line.number > 1 &&
+          view.state.doc.line(line.number - 1).text.trim()
+            ? "\n"
+            : "";
+        const text = gap + src.replace("|", ""),
+          caret = from + gap.length + src.indexOf("|");
+        view.dispatch({
+          changes: { from, to, insert: text },
+          selection: { anchor: caret },
+          userEvent: "input.complete",
+        });
         // A link is only begun: the next list offers what it can point at.
         if (label.startsWith("Link to")) setTimeout(() => startCompletion(view));
       },
@@ -346,33 +628,62 @@ function slash(cx: CompletionContext) {
 function links(cx: CompletionContext) {
   const m = cx.matchBefore(/\[\[[^\]\n|]*$/);
   if (!m) return null;
-  const q = m.text.slice(2), close = cx.state.sliceDoc(cx.pos, cx.pos + 2) === "]]";
+  const q = m.text.slice(2),
+    close = cx.state.sliceDoc(cx.pos, cx.pos + 2) === "]]";
   const put = (text: string, stay: boolean) => (view: EditorView, _c: Completion, from: number, to: number) => {
-    view.dispatch({ changes: { from, to, insert: text + (close ? "" : "]]") }, selection: { anchor: from + text.length + (stay ? 0 : 2) }, userEvent: "input.complete" });
+    view.dispatch({
+      changes: { from, to, insert: text + (close ? "" : "]]") },
+      selection: { anchor: from + text.length + (stay ? 0 : 2) },
+      userEvent: "input.complete",
+    });
   };
   const anchor = /^run:\s*([\w.-]+)#([\w-]*)$/i.exec(q);
   if (anchor) {
-    const id = resolveRun(anchor[1]!, board.runs.map((r) => r.id)), run = board.runs.find((r) => r.id === id);
+    const id = resolveRun(
+        anchor[1]!,
+        board.runs.map((r) => r.id),
+      ),
+      run = board.runs.find((r) => r.id === id);
     if (!run) return null;
-    const cut = (t: string) => t.length > 60 ? t.slice(0, 59) + "…" : t;
+    const cut = (t: string) => (t.length > 60 ? t.slice(0, 59) + "…" : t);
     return {
-      from: cx.pos - anchor[2]!.length, validFor: /^[\w-]*$/,
+      from: cx.pos - anchor[2]!.length,
+      validFor: /^[\w-]*$/,
       options: [
         ...TABS.map((t, i): Completion => ({ label: t, detail: "tab", boost: 20 - i, apply: put(t, false) })),
-        ...run.findings.map((f): Completion => ({ label: `finding-${f.n}`, detail: cut(f.text) + (f.done ? " (closed)" : ""), apply: put(`finding-${f.n}`, false) })),
-        ...run.backlog.map((b): Completion => ({ label: `backlog-${b.n}`, detail: `${b.status}: ${cut(b.text)}`, apply: put(`backlog-${b.n}`, false) })),
+        ...run.findings.map((f): Completion => ({
+          label: `finding-${f.n}`,
+          detail: cut(f.text) + (f.done ? " (closed)" : ""),
+          apply: put(`finding-${f.n}`, false),
+        })),
+        ...run.backlog.map((b): Completion => ({
+          label: `backlog-${b.n}`,
+          detail: `${b.status}: ${cut(b.text)}`,
+          apply: put(`backlog-${b.n}`, false),
+        })),
       ],
     };
   }
   return {
-    from: m.from + 2, validFor: /^[^\]\n|#]*$/,
+    from: m.from + 2,
+    validFor: /^[^\]\n|#]*$/,
     options: [
       ...notes.map((n): Completion => ({ label: n.name, detail: "note", apply: put(n.name, false) })),
       // Newest first, by the name the board shows; the full id is what gets written.
-      ...[...board.runs].sort((a, b) => b.id.localeCompare(a.id)).map((r, i): Completion => ({
-        label: "run:" + r.id, displayLabel: r.short, detail: r.id.slice(0, 10) + " · " + r.title, boost: Math.max(-99, 60 - i), apply: put("run:" + r.id, true),
+      ...[...board.runs]
+        .sort((a, b) => b.id.localeCompare(a.id))
+        .map((r, i): Completion => ({
+          label: "run:" + r.id,
+          displayLabel: r.short,
+          detail: r.id.slice(0, 10) + " · " + r.title,
+          boost: Math.max(-99, 60 - i),
+          apply: put("run:" + r.id, true),
+        })),
+      ...board.ideas.map((i): Completion => ({
+        label: "idea:" + i.text,
+        detail: "idea",
+        apply: put("idea:" + i.text, false),
       })),
-      ...board.ideas.map((i): Completion => ({ label: "idea:" + i.text, detail: "idea", apply: put("idea:" + i.text, false) })),
     ],
   };
 }
@@ -380,14 +691,37 @@ function links(cx: CompletionContext) {
 const exts = (crlf: boolean) => [
   autocompletion({ override: [slash, links], icons: false }),
   history(),
-  keymap.of([...markdownKeymap, ...defaultKeymap, ...historyKeymap, indentWithTab, { key: "Mod-s", run: () => { void flush(); return true; } }]),
+  keymap.of([
+    ...markdownKeymap,
+    ...defaultKeymap,
+    ...historyKeymap,
+    indentWithTab,
+    {
+      key: "Mod-s",
+      run: () => {
+        void flush();
+        return true;
+      },
+    },
+  ]),
   markdown({ base: markdownLanguage }),
   syntaxHighlighting(look),
   EditorView.lineWrapping,
   EditorView.contentAttributes.of({ "aria-label": "Note", spellcheck: "true" }),
-  focused, EditorView.focusChangeEffect.of((_s, on) => focusSet.of(on)), tableField,
-  preview, clicks,
-  EditorView.updateListener.of((u) => { if (u.docChanged && !loading) { dirty = true; conflict = null; drawMeta(); clearTimeout(timer); timer = setTimeout(() => void flush(), 600); } }),
+  focused,
+  EditorView.focusChangeEffect.of((_s, on) => focusSet.of(on)),
+  tableField,
+  preview,
+  clicks,
+  EditorView.updateListener.of((u) => {
+    if (u.docChanged && !loading) {
+      dirty = true;
+      conflict = null;
+      drawMeta();
+      clearTimeout(timer);
+      timer = setTimeout(() => void flush(), 600);
+    }
+  }),
   crlf ? EditorState.lineSeparator.of("\r\n") : [],
 ];
 
@@ -397,7 +731,11 @@ const view = new EditorView({ parent: $("editor"), state: EditorState.create({ d
 function setText(text: string, fresh: boolean) {
   loading = true;
   if (fresh) view.setState(EditorState.create({ doc: text, extensions: exts(text.includes("\r\n")) }));
-  else view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text }, selection: { anchor: Math.min(view.state.selection.main.head, text.length) } });
+  else
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: text },
+      selection: { anchor: Math.min(view.state.selection.main.head, text.length) },
+    });
   loading = false;
 }
 
@@ -408,37 +746,68 @@ async function flush(): Promise<void> {
   clearTimeout(timer);
   if (saving) await saving;
   if (!open || !dirty || conflict) return;
-  const name = open, text = view.state.sliceDoc();
+  const name = open,
+    text = view.state.sliceDoc();
   let saved = false;
   saving = (async () => {
     drawMeta("Saving…");
     const r = await post({ op: "save", name, text, base });
     if (open !== name) return;
-    if (r.ok) { saved = true; base = r.mtime; if (view.state.sliceDoc() === text) dirty = false; upsert({ name, mtime: r.mtime, text }); }
-    else if (r.status === 409) conflict = { text: r.text ?? "", mtime: r.mtime ?? 0 };
+    if (r.ok) {
+      saved = true;
+      base = r.mtime;
+      if (view.state.sliceDoc() === text) dirty = false;
+      upsert({ name, mtime: r.mtime, text });
+    } else if (r.status === 409) conflict = { text: r.text ?? "", mtime: r.mtime ?? 0 };
     else toast(r.error || "Not saved");
   })();
-  await saving; saving = null;
+  await saving;
+  saving = null;
   drawMeta();
   // Typed on while that save was out: save again. A failed save waits for the next keystroke.
-  if (saved && dirty && !conflict && open === name) { clearTimeout(timer); timer = setTimeout(() => void flush(), 600); }
+  if (saved && dirty && !conflict && open === name) {
+    clearTimeout(timer);
+    timer = setTimeout(() => void flush(), 600);
+  }
+}
+function upsert(n: Note) {
+  notes = [n, ...notes.filter((x) => x.name !== n.name)];
+  drawSide();
+  drawLinks();
 }
-function upsert(n: Note) { notes = [n, ...notes.filter((x) => x.name !== n.name)]; drawSide(); drawLinks(); }
 
 // ---- the vault
 
 async function load() {
   let r: { notes?: Note[]; error?: string };
-  try { r = await (await fetch("/vault?dir=" + encodeURIComponent(dir))).json(); } catch { toast("The board is not running"); return; }
-  if (!r.notes) { toast(r.error || "Could not read notes"); return; }
+  try {
+    r = await (await fetch("/vault?dir=" + encodeURIComponent(dir))).json();
+  } catch {
+    toast("The board is not running");
+    return;
+  }
+  if (!r.notes) {
+    toast(r.error || "Could not read notes");
+    return;
+  }
   notes = r.notes;
   // The board's items, for chips and completion; a failure keeps the last ones.
-  try { const b = await (await fetch("/links?dir=" + encodeURIComponent(dir))).json(); if (Array.isArray(b.runs)) board = b; } catch { /* keep */ }
+  try {
+    const b = await (await fetch("/links?dir=" + encodeURIComponent(dir))).json();
+    if (Array.isArray(b.runs)) board = b;
+  } catch {
+    /* keep */
+  }
   const mine = open && notes.find((n) => n.name === open);
   // Someone else changed the open note: take it only when nothing typed here is unsaved.
-  if (mine && mine.mtime !== base && !dirty && !saving) { base = mine.mtime; setText(mine.text, false); }
+  if (mine && mine.mtime !== base && !dirty && !saving) {
+    base = mine.mtime;
+    setText(mine.text, false);
+  }
   view.dispatch({ effects: refresh.of(null) });
-  drawSide(); drawLinks(); drawPane();
+  drawSide();
+  drawLinks();
+  drawPane();
 }
 
 // Laying down a page: the note being left is copied onto a sheet under the paper
@@ -451,12 +820,18 @@ const DEAL = { duration: 260, easing: "cubic-bezier(.22,.61,.36,1)" };
 function lift(): HTMLElement | null {
   const main = document.querySelector<HTMLElement>(".main")!;
   if (matchMedia("(prefers-reduced-motion: reduce)").matches) return null;
-  const r = main.getBoundingClientRect(), top = main.scrollTop;
+  const r = main.getBoundingClientRect(),
+    top = main.scrollTop;
   const sheet = main.cloneNode(true) as HTMLElement;
   sheet.classList.add("sheet");
   sheet.setAttribute("aria-hidden", "true");
   sheet.inert = true;
-  Object.assign(sheet.style, { left: r.left + "px", top: r.top + "px", width: r.width + "px", height: r.height + "px" });
+  Object.assign(sheet.style, {
+    left: r.left + "px",
+    top: r.top + "px",
+    width: r.width + "px",
+    height: r.height + "px",
+  });
   sheet.append(Object.assign(document.createElement("i"), { className: "shade" }));
   // After the real page in document order, so every id still finds the real one first.
   document.body.append(sheet);
@@ -467,10 +842,28 @@ function turn(sheet: HTMLElement | null) {
   if (!sheet) return;
   const main = document.querySelector<HTMLElement>(".main")!;
   main.classList.add("dealt");
-  const done = () => { main.classList.remove("dealt"); sheet.remove(); };
-  main.animate([{ transform: "translateX(56px)", opacity: 0 }, { transform: "none", opacity: 1 }], DEAL).finished.then(done, done);
+  const done = () => {
+    main.classList.remove("dealt");
+    sheet.remove();
+  };
+  main
+    .animate(
+      [
+        { transform: "translateX(56px)", opacity: 0 },
+        { transform: "none", opacity: 1 },
+      ],
+      DEAL,
+    )
+    .finished.then(done, done);
   // The old page is gone before the new one is fully up, so the two never read as one.
-  sheet.animate([{ transform: "none", opacity: 1 }, { transform: "translateX(-24px)", opacity: 0, offset: 0.6 }, { transform: "translateX(-24px)", opacity: 0 }], { ...DEAL, fill: "forwards" });
+  sheet.animate(
+    [
+      { transform: "none", opacity: 1 },
+      { transform: "translateX(-24px)", opacity: 0, offset: 0.6 },
+      { transform: "translateX(-24px)", opacity: 0 },
+    ],
+    { ...DEAL, fill: "forwards" },
+  );
   sheet.querySelector<HTMLElement>(".shade")!.animate([{ opacity: 0 }, { opacity: 1 }], { ...DEAL, fill: "forwards" });
 }
 
@@ -478,43 +871,87 @@ function turn(sheet: HTMLElement | null) {
 async function openNote(name: string | null): Promise<boolean> {
   if (name === open) return true;
   await flush();
-  if (dirty) { toast(conflict ? "Choose Keep mine or Load theirs first" : "This note is not saved yet"); return false; }
+  if (dirty) {
+    toast(conflict ? "Choose Keep mine or Load theirs first" : "This note is not saved yet");
+    return false;
+  }
   const sheet = lift();
-  open = name; conflict = null; confirmDelete = false; dirty = false;
+  open = name;
+  conflict = null;
+  confirmDelete = false;
+  dirty = false;
   const n = name ? notes.find((x) => x.name === name) : null;
   base = n?.mtime ?? 0;
   setText(n?.text ?? "", true);
-  try { name ? sessionStorage.setItem("kz-note:" + dir, name) : sessionStorage.removeItem("kz-note:" + dir); } catch { /* private window */ }
+  try {
+    name ? sessionStorage.setItem("kz-note:" + dir, name) : sessionStorage.removeItem("kz-note:" + dir);
+  } catch {
+    /* private window */
+  }
   document.body.classList.remove("side-open");
-  drawSide(); drawPane(); drawLinks();
+  drawSide();
+  drawPane();
+  drawLinks();
   turn(sheet);
   return true;
 }
 
 async function create(name: string) {
   const r = await post({ op: "save", name, text: "", base: 0 });
-  if (!r.ok) { toast(r.status === 409 ? "A note with that name exists" : r.error || "Could not create the note"); return false; }
+  if (!r.ok) {
+    toast(r.status === 409 ? "A note with that name exists" : r.error || "Could not create the note");
+    return false;
+  }
   upsert({ name: r.name, mtime: r.mtime, text: "" });
   return openNote(r.name);
 }
 async function openOrCreate(name: string) {
-  const hit = resolve(name, notes.map((n) => n.name));
+  const hit = resolve(
+    name,
+    notes.map((n) => n.name),
+  );
   if (hit) return void openNote(hit);
   if (await create(name)) view.focus();
 }
 async function newNote() {
-  if (await create(freshName(notes.map((n) => n.name), open ? folderOf(open) : ""))) { const t = $<HTMLInputElement>("title"); t.focus(); t.select(); }
+  if (
+    await create(
+      freshName(
+        notes.map((n) => n.name),
+        open ? folderOf(open) : "",
+      ),
+    )
+  ) {
+    const t = $<HTMLInputElement>("title");
+    t.focus();
+    t.select();
+  }
 }
 
 async function rename(to: string) {
-  if (!open || !to.trim() || to.trim() === open) { drawPane(); return; }
+  if (!open || !to.trim() || to.trim() === open) {
+    drawPane();
+    return;
+  }
   const from = open;
   await flush();
   const r = await post({ op: "rename", name: from, to });
-  if (!r.ok) { toast(r.error || "Could not rename"); drawPane(); return; }
+  if (!r.ok) {
+    toast(r.error || "Could not rename");
+    drawPane();
+    return;
+  }
   // Another note was opened meanwhile: the rename stands, the editor stays where it is.
-  if (open !== from) { await load(); return; }
-  open = to.trim().replace(/\.md$/i, "").split("/").map((p) => p.trim()).join("/");
+  if (open !== from) {
+    await load();
+    return;
+  }
+  open = to
+    .trim()
+    .replace(/\.md$/i, "")
+    .split("/")
+    .map((p) => p.trim())
+    .join("/");
   await load();
   base = notes.find((n) => n.name === open)?.mtime ?? base;
   toast(folderOf(from) === folderOf(open) ? "Renamed" : `Moved to ${folderOf(open) || "the top"}`);
@@ -524,9 +961,13 @@ async function remove() {
   if (!open) return;
   clearTimeout(timer);
   const r = await post({ op: "delete", name: open });
-  if (!r.ok) { toast(r.error || "Could not delete"); return; }
+  if (!r.ok) {
+    toast(r.error || "Could not delete");
+    return;
+  }
   toast("Moved to notes/.trash");
-  dirty = false; notes = notes.filter((n) => n.name !== open);
+  dirty = false;
+  notes = notes.filter((n) => n.name !== open);
   await openNote(null);
 }
 
@@ -538,24 +979,36 @@ function drawSide() {
   const count = new Map<string, number>();
   for (const n of notes) for (const g of new Set(tags(n.text).map((x) => x.tag))) count.set(g, (count.get(g) ?? 0) + 1);
   const tg = q.startsWith("#") ? q.slice(1) : null;
-  $("tags").innerHTML = [...count].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
-    .map(([g, c]) => `<button class="chip${g === tg ? " on" : ""}" data-tag="${esc(g)}" aria-pressed="${g === tg}">#${esc(g)} <span>${c}</span></button>`).join("");
+  $("tags").innerHTML = [...count]
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+    .map(
+      ([g, c]) =>
+        `<button class="chip${g === tg ? " on" : ""}" data-tag="${esc(g)}" aria-pressed="${g === tg}">#${esc(g)} <span>${c}</span></button>`,
+    )
+    .join("");
   $("tagsh").hidden = !count.size;
   const row = (n: string, withFolder = false) => {
     const note = notes.find((x) => x.name === n);
     return `<li><button class="nt${n === open ? " cur" : ""}" data-open="${esc(n)}"${n === open ? ' aria-current="true"' : ""}><span class="nm">${esc(last(n))}</span>${withFolder && folderOf(n) ? `<span class="fd">${esc(folderOf(n))}</span>` : ""}<span class="age">${note ? age(note.mtime) : ""}</span></button></li>`;
   };
   if (q) {
-    const hits = notes.filter((n) => tg !== null
-      ? tags(n.text).some((x) => x.tag === tg || x.tag.startsWith(tg + "/"))
-      : n.name.toLowerCase().includes(q) || n.text.toLowerCase().includes(q));
-    $("tree").innerHTML = hits.length ? `<ul>${hits.map((n) => row(n.name, true)).join("")}</ul>` : `<p class="none">No note matches.</p>`;
+    const hits = notes.filter((n) =>
+      tg !== null
+        ? tags(n.text).some((x) => x.tag === tg || x.tag.startsWith(tg + "/"))
+        : n.name.toLowerCase().includes(q) || n.text.toLowerCase().includes(q),
+    );
+    $("tree").innerHTML = hits.length
+      ? `<ul>${hits.map((n) => row(n.name, true)).join("")}</ul>`
+      : `<p class="none">No note matches.</p>`;
     return;
   }
-  const draw = (tr: Tree, path: string): string => `<ul>${[...tr.folders].map(([f, sub]) => {
-    const p = path + f;
-    return `<li><details data-folder="${esc(p)}"${shut.has(p) ? "" : " open"}><summary><i class="chev">${ico("chev")}</i>${ico("folder")}<span>${esc(f)}</span></summary>${draw(sub, p + "/")}</details></li>`;
-  }).join("")}${tr.notes.map((n) => row(n)).join("")}</ul>`;
+  const draw = (tr: Tree, path: string): string =>
+    `<ul>${[...tr.folders]
+      .map(([f, sub]) => {
+        const p = path + f;
+        return `<li><details data-folder="${esc(p)}"${shut.has(p) ? "" : " open"}><summary><i class="chev">${ico("chev")}</i>${ico("folder")}<span>${esc(f)}</span></summary>${draw(sub, p + "/")}</details></li>`;
+      })
+      .join("")}${tr.notes.map((n) => row(n)).join("")}</ul>`;
   $("tree").innerHTML = notes.length ? draw(tree(notes.map((n) => n.name)), "") : "";
 }
 
@@ -563,13 +1016,24 @@ function drawSide() {
 // on; it then holds from note to note until the icon or Esc turns it off. With no note
 // open the page is never full screen: picking one needs the sidebar.
 let full = false;
-function setFull(on: boolean) { full = on; drawPane(); }
+function setFull(on: boolean) {
+  full = on;
+  drawPane();
+}
 // Width: the reading column (boxed, 68ch) or the whole paper side. Kept per browser.
 let wide = false;
-try { wide = localStorage.getItem("kz-note-wide") === "1"; } catch { /* no storage */ }
+try {
+  wide = localStorage.getItem("kz-note-wide") === "1";
+} catch {
+  /* no storage */
+}
 function setWide(on: boolean) {
   wide = on;
-  try { localStorage.setItem("kz-note-wide", on ? "1" : "0"); } catch { /* no storage */ }
+  try {
+    localStorage.setItem("kz-note-wide", on ? "1" : "0");
+  } catch {
+    /* no storage */
+  }
   drawPane();
 }
 
@@ -591,26 +1055,49 @@ function drawMeta(state?: string) {
   if (!open) return;
   if (conflict) {
     m.innerHTML = `<span class="warnw">This note changed somewhere else since you opened it.</span><span class="acts"><button class="btn ghost" id="theirs">Load theirs</button><button class="btn pri" id="mine">Keep mine</button></span>`;
-    $("theirs").onclick = () => { const c = conflict!; conflict = null; dirty = false; base = c.mtime; setText(c.text, false); drawMeta(); };
-    $("mine").onclick = () => { base = conflict!.mtime; conflict = null; void flush(); };
+    $("theirs").onclick = () => {
+      const c = conflict!;
+      conflict = null;
+      dirty = false;
+      base = c.mtime;
+      setText(c.text, false);
+      drawMeta();
+    };
+    $("mine").onclick = () => {
+      base = conflict!.mtime;
+      conflict = null;
+      void flush();
+    };
     return;
   }
   if (confirmDelete) {
     m.innerHTML = `<span>Move this note to <code>notes/.trash</code>?</span><span class="acts"><button class="btn ghost" id="cancel">Cancel</button><button class="btn danger" id="del">Delete</button></span>`;
-    $("cancel").onclick = () => { confirmDelete = false; drawMeta(); };
-    $("del").onclick = () => { confirmDelete = false; void remove(); };
+    $("cancel").onclick = () => {
+      confirmDelete = false;
+      drawMeta();
+    };
+    $("del").onclick = () => {
+      confirmDelete = false;
+      void remove();
+    };
     return;
   }
   const where = folderOf(open);
   m.innerHTML = `<span>${where ? esc(where) : "Notes"}</span><span>·</span><span id="saved">${state ?? (dirty ? "Not saved yet" : "Saved")}</span><span class="sp"></span><button class="ib" id="wide" title="${wide ? "Boxed width" : "Full width"}" aria-label="${wide ? "Boxed width" : "Full width"}" aria-pressed="${wide}">${ico(wide ? "box" : "wide")}</button><button class="ib" id="full" title="${full ? "Exit full screen (Esc)" : "Full screen"}" aria-label="${full ? "Exit full screen" : "Full screen"}">${ico(full ? "min" : "max")}</button><button class="ib" id="trash" title="Delete note" aria-label="Delete note">${ico("trash")}</button>`;
-  $("trash").onclick = () => { confirmDelete = true; drawMeta(); };
+  $("trash").onclick = () => {
+    confirmDelete = true;
+    drawMeta();
+  };
   $("full").onclick = () => setFull(!full);
   $("wide").onclick = () => setWide(!wide);
 }
 
 function drawLinks() {
   const box = $("links");
-  if (!open) { box.hidden = true; return; }
+  if (!open) {
+    box.hidden = true;
+    return;
+  }
   const names = notes.map((n) => n.name);
   const from = notes.filter((n) => n.name !== open && wikilinks(n.text).some((l) => resolve(l.name, names) === open));
   box.hidden = !from.length;
@@ -619,7 +1106,13 @@ function drawLinks() {
 
 function age(ms: number) {
   const s = (Date.now() - ms) / 1000;
-  return s < 60 ? "now" : s < 3600 ? `${Math.floor(s / 60)}m` : s < 86400 ? `${Math.floor(s / 3600)}h` : `${Math.floor(s / 86400)}d`;
+  return s < 60
+    ? "now"
+    : s < 3600
+      ? `${Math.floor(s / 60)}m`
+      : s < 86400
+        ? `${Math.floor(s / 3600)}h`
+        : `${Math.floor(s / 86400)}d`;
 }
 
 // ---- wiring
@@ -627,24 +1120,39 @@ function age(ms: number) {
 document.addEventListener("click", (e) => {
   // The narrow layout's drawer closes on any click outside it.
   const tg = e.target as HTMLElement;
-  if (document.body.classList.contains("side-open") && !tg.closest?.(".side,#side")) document.body.classList.remove("side-open");
+  if (document.body.classList.contains("side-open") && !tg.closest?.(".side,#side"))
+    document.body.classList.remove("side-open");
   const el = (e.target as HTMLElement).closest?.("[data-open],[data-tag]") as HTMLElement | null;
   if (!el || el.closest(".cm-editor")) return;
   if (el.dataset.open) void openNote(el.dataset.open);
-  else if (el.dataset.tag) { const q = $<HTMLInputElement>("q"); q.value = q.value === "#" + el.dataset.tag ? "" : "#" + el.dataset.tag; drawSide(); }
+  else if (el.dataset.tag) {
+    const q = $<HTMLInputElement>("q");
+    q.value = q.value === "#" + el.dataset.tag ? "" : "#" + el.dataset.tag;
+    drawSide();
+  }
 });
-$("tree").addEventListener("toggle", (e) => {
-  const d = e.target as HTMLDetailsElement;
-  if (d.dataset.folder) d.open ? shut.delete(d.dataset.folder) : shut.add(d.dataset.folder);
-}, true);
+$("tree").addEventListener(
+  "toggle",
+  (e) => {
+    const d = e.target as HTMLDetailsElement;
+    if (d.dataset.folder) d.open ? shut.delete(d.dataset.folder) : shut.add(d.dataset.folder);
+  },
+  true,
+);
 $("q").addEventListener("input", drawSide);
 $("new").onclick = () => void newNote();
 $("new2").onclick = () => void newNote();
 $("side").onclick = () => document.body.classList.toggle("side-open");
 const title = $<HTMLInputElement>("title");
 title.addEventListener("keydown", (e) => {
-  if (e.key === "Enter") { e.preventDefault(); title.blur(); }
-  if (e.key === "Escape") { title.value = open ?? ""; title.blur(); }
+  if (e.key === "Enter") {
+    e.preventDefault();
+    title.blur();
+  }
+  if (e.key === "Escape") {
+    title.value = open ?? "";
+    title.blur();
+  }
 });
 title.addEventListener("blur", () => void rename(title.value));
 document.addEventListener("keydown", (e) => {
@@ -654,34 +1162,67 @@ document.addEventListener("keydown", (e) => {
   if (document.body.classList.contains("full")) setFull(false);
 });
 // Closing with text not on disk: the browser asks first.
-addEventListener("beforeunload", (e) => { if (dirty) e.preventDefault(); });
+addEventListener("beforeunload", (e) => {
+  if (dirty) e.preventDefault();
+});
 // Leaving with unsaved text: a keepalive request outlives the page.
 addEventListener("pagehide", () => {
-  if (open && dirty && !conflict) fetch("/vault", { method: "POST", keepalive: true, headers: { "content-type": "application/json" }, body: JSON.stringify({ dir, op: "save", name: open, text: view.state.sliceDoc(), base }) });
+  if (open && dirty && !conflict)
+    fetch("/vault", {
+      method: "POST",
+      keepalive: true,
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ dir, op: "save", name: open, text: view.state.sliceDoc(), base }),
+    });
 });
 
 // The project: ?dir= in the URL, else the one the board picked last, else where it started.
 (async () => {
-  try { const th = localStorage.getItem("kz-theme"); if (th) document.documentElement.dataset.theme = th; } catch { /* no storage */ }
+  try {
+    const th = localStorage.getItem("kz-theme");
+    if (th) document.documentElement.dataset.theme = th;
+  } catch {
+    /* no storage */
+  }
   let S: { dir: string | null; projects: { dir: string; label: string }[] };
-  try { S = await (await fetch("/state")).json(); } catch { toast("The board is not running"); return; }
+  try {
+    S = await (await fetch("/state")).json();
+  } catch {
+    toast("The board is not running");
+    return;
+  }
   let kept: string | null = null;
-  try { kept = localStorage.getItem("kz-proj"); } catch { /* no storage */ }
+  try {
+    kept = localStorage.getItem("kz-proj");
+  } catch {
+    /* no storage */
+  }
   const want = new URLSearchParams(location.search).get("dir");
   const known = (d: string | null) => !!d && S.projects.some((p) => p.dir === d);
   dir = [want, kept, S.dir].find(known) ?? S.projects[0]?.dir ?? "";
   const sel = $<HTMLSelectElement>("proj");
-  sel.innerHTML = S.projects.map((p) => `<option value="${esc(p.dir)}"${p.dir === dir ? " selected" : ""}>${esc(p.label)}</option>`).join("");
+  sel.innerHTML = S.projects
+    .map((p) => `<option value="${esc(p.dir)}"${p.dir === dir ? " selected" : ""}>${esc(p.label)}</option>`)
+    .join("");
   sel.onchange = async () => {
-    if (!(await openNote(null))) { sel.value = dir; return; }
+    if (!(await openNote(null))) {
+      sel.value = dir;
+      return;
+    }
     dir = sel.value;
     // window.: `history` here is CodeMirror's undo extension.
-    const u = new URL(location.href); u.searchParams.set("dir", dir); window.history.replaceState(null, "", u);
+    const u = new URL(location.href);
+    u.searchParams.set("dir", dir);
+    window.history.replaceState(null, "", u);
     await load();
   };
   await load();
   let again: string | null = null;
-  try { again = sessionStorage.getItem("kz-note:" + dir); } catch { /* no storage */ }
+  try {
+    again = sessionStorage.getItem("kz-note:" + dir);
+  } catch {
+    /* no storage */
+  }
   // ?note= is the board's "Linked from notes"; otherwise the note open last in this tab.
   const asked = new URLSearchParams(location.search).get("note");
   if (asked && notes.some((n) => n.name === asked)) again = asked;
@@ -689,8 +1230,13 @@ addEventListener("pagehide", () => {
   // Every write under a state dir arrives as `changed`, this page's own saves included.
   const listen = () => {
     const es = new EventSource("/events");
-    es.onmessage = (ev) => { if (ev.data === "changed") void load(); };
-    es.onerror = () => { es.close(); setTimeout(listen, 3000); };
+    es.onmessage = (ev) => {
+      if (ev.data === "changed") void load();
+    };
+    es.onerror = () => {
+      es.close();
+      setTimeout(listen, 3000);
+    };
   };
   listen();
 })();