pi-weave 0.1.11 → 0.1.13

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

@@ -1,45 +1,7 @@
-/**
- * Live force dynamics for the graph's current shape — the Obsidian-style
- * "the graph is alive" feel while the user drags.
- *
- * ## One physics, two drivers
- *
- * The static layout (`shared/layout.ts`) and this module now share ONE force
- * configuration: {@link createForceSimulation}. They used to be two
- * independent physics — the static path ring-sized its link distances per
- * fan-out and anchored every node to its seed; this one pulled at a flat 90
- * units toward its own equilibrium. Every graph therefore *visibly re-laid
- * itself* after mount (a 215-node repo graph migrated from a ~1200-unit ring
- * to the bespoke sim's ~300-unit cloud over about thirty seconds), and the
- * constant-alpha loop ticked at 60 fps forever, because a bespoke integrator
- * has no alpha to decay. Sharing the factory fixes both by construction: the
- * warm start is already at the shared equilibrium, so there is nothing to
- * migrate to, and d3's alpha decay is what says "settled".
- *
- * ## The lifecycle
- *
- * A new engine starts at {@link SETTLE_ALPHA} (an expand/collapse lands new
- * nodes already laid out; the brief settle is the "alive" response, not a
- * re-layout) and decays to d3's alpha floor, at which point {@link awake}
- * turns false and the component's clock puts itself to sleep — no frames are
- * spent on a graph that is holding still. `pin` re-heats to
- * {@link DRAG_ALPHA_TARGET} (d3's own drag pattern), so neighbours make room
- * while the user drags; `release` clears the pin AND retargets the node's
- * anchor to its drop point, so a dragged node stays where it was dropped
- * instead of springing back to its seed.
- *
- * ## The §7.2 vertical-line freeze
- *
- * Inherited from d3 itself: `manyBody`, `collide` and `link` all inject a
- * seeded `jiggle` into a zero axis component, so coincident or collinear
- * nodes always acquire a direction. The seeded LCG (`seed: 1`) keeps the
- * whole thing deterministic — the same graph, the same gestures, byte-identical
- * positions — which is what the test gate asserts.
- */
+/** Live d3-force dynamics used while a node is dragged. */
 
 import type { Point } from "../../shared/layout";
-import { branchAnchors, collideRadius, createForceSimulation, isContainment } from "../../shared/layout";
-import type { WireEdgeKind } from "../../shared/graph";
+import { collideRadius, createForceSimulation } from "../../shared/layout";
 import type { RenderGraph } from "./graph.model";
 
 interface SimNode {
@@ -55,12 +17,6 @@ interface SimNode {
   r?: number;
 }
 
-interface SimLink {
-  source: string | SimNode;
-  target: string | SimNode;
-  kind: WireEdgeKind;
-}
-
 export interface GraphSimulation {
   tick(): void;
   positions(): Map<string, Point>;
@@ -118,7 +74,7 @@ export function createGraphSimulation(graph: RenderGraph, initial?: ReadonlyMap<
   // would throw on them, so they are dropped here and the layout's own
   // `pathologicalGraph` fixture remains the gate for degenerate *outputs*.
   const seen = new Set<string>();
-  const links: SimLink[] = [];
+  const links: { source: string; target: string; kind: RenderGraph["edges"][number]["kind"] }[] = [];
   for (const edge of graph.edges) {
     if (edge.source === edge.target) continue;
     if (!byId.has(edge.source) || !byId.has(edge.target)) continue;
@@ -128,18 +84,7 @@ export function createGraphSimulation(graph: RenderGraph, initial?: ReadonlyMap<
     links.push({ source: edge.source, target: edge.target, kind: edge.kind });
   }
 
-  // No invented seeding; centre gravity lives in the factory (`forceX()`/
-  // `forceY()`). The anchors start as the **branch ring** (`branchAnchors`),
-  // so a released graph holds the separated equilibrium the static layout
-  // settled into instead of gliding back toward one centre — the live and
-  // static paths share one physics, and that includes its gravity targets.
-  // `release` then overrides a dropped node's entry with its drop point, so a
-  // placement sticks (the anchor is five times stronger than the leaf
-  // spring, so the node rests where the user left it).
-  const settled = new Map<string, Point>();
-  for (const node of graph.nodes) settled.set(node.id, { x: node.x, y: node.y });
-  const anchors = new Map<string, Point>(branchAnchors(graph, settled));
-  const sim = createForceSimulation({ nodes, links, anchors, seed: 1 })
+  const sim = createForceSimulation({ nodes, links, seed: 1 })
     .alpha(SETTLE_ALPHA)
     .alphaMin(ALPHA_MIN);
 
@@ -174,14 +119,9 @@ export function createGraphSimulation(graph: RenderGraph, initial?: ReadonlyMap<
     release(id) {
       const node = byId.get(id);
       if (!node) return;
-      // Unfix, like d3's `dragended` — and retarget the node's centre-gravity
-      // anchor to the drop point, so the graph reads the drop as a placement:
-      // the node rests where the user left it instead of gliding back into
-      // the tree.
-      anchors.set(id, { x: node.x ?? 0, y: node.y ?? 0 });
       node.fx = null;
       node.fy = null;
       sim.alphaTarget(0);
     },
   };
-}
+}

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

@@ -13,7 +13,7 @@
  * whole renderer: `sigmaRenderer` holds the lifecycle, the reducers and the
  * delegation, and is unit-tested against `SigmaLike` with a recording fake.
  * Identical shape and identical reasoning to `api.dom.ts` for `fetch` and
- * `domEventSource` in `live.ts` for `EventSource`.
+ * the injected renderer port in the testable half of this module.
  *
  * This module is only reachable from a `.tsx` entry point, so it is compiled
  * exclusively by `tsconfig.web.json` (which has `DOM`) and never pulled into
@@ -29,24 +29,23 @@
 
 import Sigma from "sigma";
 import type { ColorScheme } from "./graph.model";
-import type { GraphRenderer, RendererFactory, SigmaFactory, SigmaLike } from "./renderer";
+import type { GraphRenderer, RendererFactory, SigmaLike } from "./renderer";
 import { sigmaRenderer } from "./renderer";
 
 /** Sigma's own container parameter type, recovered without naming the DOM. */
 type SigmaContainer = ConstructorParameters<typeof Sigma>[1];
 
 /**
- * `new Sigma(graph, container, settings)`, as a {@link SigmaFactory}.
- *
  * The real `Sigma` satisfies `SigmaLike` structurally — `on`, `setSetting`,
  * `setGraph`, `refresh`, `getCamera` and `kill` are all present with
  * compatible shapes — so the only work here is the container cast, which is
  * checked against sigma's own declared parameter type rather than against an
  * `HTMLElement` asserted from memory.
  */
-const createSigma: SigmaFactory = (graph, container, settings) =>
-  new Sigma(graph, container as unknown as SigmaContainer, settings) as unknown as SigmaLike;
-
 /** The browser's renderer factory. Passed to the graph column by the shell. */
 export const createSigmaRenderer: RendererFactory = (scheme: ColorScheme): GraphRenderer =>
-  sigmaRenderer(createSigma, scheme);
+  sigmaRenderer(
+    (graph, container, settings) =>
+      new Sigma(graph, container as unknown as SigmaContainer, settings) as unknown as SigmaLike,
+    scheme,
+  );

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

@@ -23,20 +23,20 @@
  * line of ours runs.
  *
  * That is a worse outcome than it looks. This repository's rule (§10, and
- * `docs/testing.md` §L5.2) is that *untestable lines* are kept to a handful,
+ * the browser coverage policy) is that *untestable lines* are kept to a handful,
  * not that untestable *files* are excluded — the one coverage exclusion that
  * exists is a type-only module, and a blanket `src/web/client/**` exclude is
  * explicitly "not acceptable". A whole renderer sitting outside the gate would
  * be exactly the erosion that rule prevents.
  *
- * So the dependency is inverted. {@link SigmaLike} and {@link SigmaFactory}
+ * So the dependency is inverted. {@link SigmaLike}
  * are the two-and-a-half-method port sigma satisfies structurally;
  * {@link sigmaRenderer} is the entire renderer written against the port, and
  * it is covered by ordinary unit tests with a recording fake. The only thing
  * that genuinely cannot be tested is the four-line adapter in
  * `renderer.dom.ts` that says `new Sigma(graph, container, settings)` — the
  * same shape, and the same reasoning, as `api.dom.ts` for `fetch` and
- * `domEventSource` for `EventSource`.
+ * the DOM renderer seam for the browser canvas.
  *
  * §7.5's promise is unaffected. "One file changes" is still true, and it is
  * now true of a file with no branches in it.
@@ -111,7 +111,7 @@ export interface GraphRenderer {
  * importing it drags the module into the **root** `tsconfig.json` project
  * (`exclude` filters the initial glob, not what an included file imports), and
  * that project has no `DOM` lib. The structural stand-in is the same trick
- * `cssvars.ts`, `api.ts` and `live.ts` use; the one cast lives in
+ * `cssvars.ts` and `api.ts` use; the one cast lives in
  * `renderer.dom.ts`, which is compiled only by `tsconfig.web.json`.
  */
 export interface RenderContainer {
@@ -119,33 +119,6 @@ export interface RenderContainer {
   readonly clientHeight: number;
 }
 
-/**
- * A renderer that draws nothing.
- *
- * Not a test double — a production path. The graph column renders before its
- * container exists (the first pass), may never mount at all (the `medium`
- * breakpoint collapses the column), and must keep working when it does not. A
- * null object removes the `renderer === null` check from every call site,
- * which is the check that is always missing from exactly one of them.
- */
-export function nullRenderer(): GraphRenderer {
-  return {
-    mount() {},
-    setGraph() {},
-    setPositions() {},
-    setHighlight() {},
-    onSelect() {},
-    fit() {},
-    onDragStart() {},
-    onDragMove() {},
-    onDragEnd() {},
-    positions() {
-      return new Map();
-    },
-    destroy() {},
-  };
-}
-
 /**
  * How a {@link GraphRenderer} is obtained.
  *
@@ -171,7 +144,7 @@ export interface CameraLike {
  * The slice of `Sigma` this renderer drives.
  *
  * Structural, so the real class satisfies it without a cast and a fake is an
- * object literal — the same reasoning `EventSourceLike` in `live.ts` records.
+ * object literal — the same reasoning the injected renderer port records.
  * Six methods, and every one of them is called below, so the port cannot grow
  * a member nothing uses.
  *
@@ -212,8 +185,6 @@ export interface SigmaLike {
  * everything *around* it can be. `renderer.dom.ts` is the four-line adapter
  * that supplies the real constructor.
  */
-export type SigmaFactory = (graph: ProjectedGraph, container: RenderContainer, settings: GraphSettings) => SigmaLike;
-
 // --- the implementation --------------------------------------------------------------
 
 /**
@@ -230,7 +201,10 @@ export type SigmaFactory = (graph: ProjectedGraph, container: RenderContainer, s
  * every node colour and re-projecting — a second code path for a case nobody
  * hits.
  */
-export function sigmaRenderer(create: SigmaFactory, scheme: ColorScheme): GraphRenderer {
+export function sigmaRenderer(
+  create: (graph: ProjectedGraph, container: RenderContainer, settings: GraphSettings) => SigmaLike,
+  scheme: ColorScheme,
+): GraphRenderer {
   let sigma: SigmaLike | null = null;
   let graph: ProjectedGraph = project({ nodes: [], edges: [] });
   let highlight: ReadonlySet<string> | null = null;

package/src/web/client/main.tsx

@@ -28,7 +28,7 @@ if (host !== null) {
   // writes nothing — the media query already answered.
   applyPrePaintTheme();
   const boot = readBootstrap(document.getElementById(BOOTSTRAP_ELEMENT_ID)?.textContent ?? null);
-  render(<Shell cwd={boot.cwd} initialWidth={window.innerWidth} platform={navigator.platform} />, host);
+  render(<Shell cwd={boot.cwd} platform={navigator.platform} />, host);
 }
 
 /** Apply the stored theme choice to `<html>` synchronously, pre-render. */

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

@@ -1,28 +1,16 @@
 /**
- * The note column (weave-workspace §1.2, P2.4, P5, P6.3).
+ * The read-only note column (weave-workspace §1.2, P2.4, P6.3).
  *
- * Props in, JSX out. The markdown pipeline, the sanitiser config, the
- * wikilink resolution and every string are `note.model.ts`; the editor's
- * dirty tracking, save lifecycle and conflict resolution are
- * `editor.model.ts`. This file wires a click handler, sets `innerHTML` with
- * content that has already been through all three of that module's layers,
- * and swaps the rendered body for a `<textarea>` when the editor is open.
+ * Props in, JSX out. The markdown pipeline, sanitiser config, wikilink
+ * resolution and every string are in `note.model.ts`. This file wires the
+ * rendered body, selection-safe wikilink navigation, and the Open in
+ * `$EDITOR` action.
  *
- * `dangerouslySetInnerHTML` is used deliberately and exactly twice. The
+ * `dangerouslySetInnerHTML` is used deliberately for sanitized note HTML. The
  * alternative is parsing marked's output into a Preact tree, which means a
  * second HTML parser in the bundle and a second place for a sanitisation
  * mistake to hide. One clearly-marked line whose input is
- * `renderNote(DOMPurify, …)` is easier to audit than a hundred lines that
- * avoid the word "dangerously". The second is the ⌘E control's icon — a
- * constant from `editor.model.ts`, not note content, and small enough that
- * a second site is cheaper than an icon component.
- *
- * The read view is rendered from the **note**, not from the draft: what the
- * `<textarea>` holds is unsaved and un-sanitised, and piping it through
- * `renderNote` on every keystroke would be a live preview paid for with a
- * markdown parse and a DOMPurify pass per character. §11 P5.4 mentions a live
- * preview; the honest version of it is `⌘E`, which is instant and shows the
- * text that actually exists.
+ * `renderNote(DOMPurify, …)` is easier to audit than a second HTML parser.
  *
  * ## Wikilink preview (P6.3)
  *
@@ -45,15 +33,13 @@
 import DOMPurify from "dompurify";
 import { useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import type { GraphPayload, NotePayload } from "../../shared/wire";
-import { Editor, EditorBar } from "./Editor";
-import type { EditorEvent, EditorPrompt, EditorToolbar } from "./editor.model";
-import { OPEN_HINT, OPEN_ICON, OPEN_LABEL } from "./editor.model";
 import {
   CREATED_WORD,
   EDITED_WORD,
   EMPTY_PREVIEW,
   PREVIEW_ID,
   WIKILINK_ATTR,
+  hasTextSelection,
   noteEmptyMessage,
   noteHeader,
   previewAnchorOf,
@@ -81,14 +67,9 @@ export interface NoteProps {
   graph: GraphPayload | null;
   selectedId: string | null;
   onSelect: (id: string) => void;
+  onOpen: (slug: string) => void;
   /** Epoch ms for relative times. Injected so the render is deterministic. */
   now: number;
-  /** The editor's view model, or `null` when the shell wired no editor. */
-  toolbar: EditorToolbar | null;
-  prompt: EditorPrompt | null;
-  /** The `<textarea>`'s content. Rendered only while `toolbar.editing`. */
-  draft: string;
-  send: (event: EditorEvent) => void;
 }
 
 /**
@@ -96,16 +77,23 @@ export interface NoteProps {
  *
  * The hierarchy is the point: the title is the page's largest voice and the
  * meta line is its footnote — provenance glyph and word, edited, created.
- * `⌘E` sits at the end of that line as an icon, where a control about
- * *workflow* belongs in a column whose job is *reading*; its explanation
- * rides the `title` attribute so the icon never has to explain itself on
- * screen.
+ * The Open in `$EDITOR` action sits at the end of that line as an icon, where
+ * a workflow control belongs in a column whose job is reading.
  */
-function Header({ view, open }: { view: NoteHeaderView; open: (() => void) | null }) {
+function Header({
+  view,
+  open,
+}: {
+  view: NoteHeaderView;
+  open: () => void;
+}) {
   return (
     <header class="weave-note-head">
       <h3 class="weave-note-title">{view.title}</h3>
       <p class="weave-note-meta">
+        <button type="button" class="weave-note-open" title="Open in $EDITOR" aria-label="Open in $EDITOR" onClick={open}>
+          <span class="weave-note-open-mark" aria-hidden="true">↗</span>
+        </button>
         <span class={`weave-prov weave-prov-${view.provenance}`} title={view.provenanceTitle}>
           {view.provenanceGlyph} {view.provenance}
         </span>
@@ -115,11 +103,6 @@ function Header({ view, open }: { view: NoteHeaderView; open: (() => void) | nul
         <span class="weave-note-time" title={view.createdIso}>
           {CREATED_WORD} {view.created}
         </span>
-        {open === null ? null : (
-          <button type="button" class="weave-note-open" title={OPEN_HINT} aria-label={OPEN_LABEL} onClick={open}>
-            <span class="weave-note-open-mark" aria-hidden="true" dangerouslySetInnerHTML={{ __html: OPEN_ICON }} />
-          </button>
-        )}
       </p>
       <p class="weave-note-tags">
         {view.tags.map((tag) => (
@@ -138,9 +121,8 @@ export function Note(props: NoteProps) {
 
   // Both hook calls sit before the empty-return so the hook order cannot
   // depend on whether a note is loaded. The memoization is cheap insurance:
-  // one marked parse + DOMPurify pass + O(nodes) index per *body or vault*
-  // instead of per shell render (every editor keystroke and divider pixel
-  // re-renders the shell). The instance the render builds —
+  // one marked parse + DOMPurify pass + O(nodes) index per body or vault
+  // instead of per shell render. The instance the render builds —
   // `markdownRenderer(index)` inside `renderNote` — stays per-call by design;
   // only the *result* is memoized.
   const index = useMemo(() => (note === null ? null : wikiIndex(props.graph, note.slug)), [note, props.graph]);
@@ -205,11 +187,6 @@ export function Note(props: NoteProps) {
 
   if (note === null || index === null) return <p class="weave-note-empty">{empty}</p>;
 
-  // Bound once so TypeScript narrows it for both uses below: `toolbar.editing`
-  // is what decides whether the textarea renders, and reading it twice off
-  // `props` would need a non-null assertion at the second read.
-  const toolbar = props.toolbar;
-  const shell = { draft: props.draft, prompt: props.prompt, send: props.send };
   // Keyed on the slug, not the body digest: the article is the scroll
   // container, so an in-place swap would open every note at the previous
   // note's scroll offset. A key change remounts it, and a fresh container
@@ -219,12 +196,11 @@ export function Note(props: NoteProps) {
   const header = noteHeader(note, props.now);
   return (
     <article key={note.slug} class={`weave-note weave-note-${header.provenance}`}>
-      <Header view={header} open={toolbar === null ? null : () => props.send({ type: "open" })} />
-      {toolbar === null ? null : <EditorBar toolbar={toolbar} {...shell} />}
-      {toolbar !== null && toolbar.editing ? (
-        <Editor toolbar={toolbar} {...shell} />
-      ) : (
-        <div
+      <Header
+        view={header}
+        open={() => props.onOpen(note.slug)}
+      />
+      <div
           ref={bodyRef}
           class="weave-note-body"
           // Programmatic focus target for `⌘2`: without a `tabindex`,
@@ -255,17 +231,19 @@ export function Note(props: NoteProps) {
           }}
           onBlur={() => dispatch({ type: "hide" })}
           onClick={(event) => {
-            // A wikilink carries no href, so nothing is navigating; this only
-            // has to route the click onto the §1.3 context bus. Anywhere else
-            // on the page *is* the edit affordance: a click on the prose opens
-            // the editor. The two never fight, because the link check reads
-            // the exact element the click landed on.
+            // Selecting text to copy must not trigger wikilink navigation.
+            const selection =
+              typeof window !== "undefined" && typeof window.getSelection === "function"
+                ? window.getSelection()
+                : null;
+            if (hasTextSelection(selection)) return;
+
+            // A wikilink carries no href, so route it onto the context bus.
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
             if (target !== null) {
               props.onSelect(target);
               return;
             }
-            if (props.toolbar !== null) props.send({ type: "toggle" });
           }}
           onKeyDown={(event) => {
             // Escape is first so the card closes on the gesture a keyboard
@@ -287,7 +265,6 @@ export function Note(props: NoteProps) {
           // Sanitised by `renderNote`'s three layers — see note.model.ts.
           dangerouslySetInnerHTML={{ __html: html }}
         />
-      )}
       {card === null ? null : (
         <div
           ref={cardRef}
@@ -302,4 +279,4 @@ export function Note(props: NoteProps) {
       )}
     </article>
   );
-}
+}

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

@@ -670,6 +670,29 @@ export function wikilinkTargetOf(from: ClosestElement | null): string | null {
   return null;
 }
 
+/**
+ * A minimal selection interface for detecting active text selection.
+ * Abstracted so callers pass `window.getSelection()` and tests stay pure.
+ */
+export interface SelectionLike {
+  readonly isCollapsed?: boolean | undefined;
+  toString?(): string;
+}
+
+/**
+ * Whether the user has an active, non-empty text selection.
+ *
+ * Selecting text to copy (mouse drag, keyboard range) must neither flip the
+ * note into edit mode nor navigate a wikilink the selection happens to cross.
+ */
+export function hasTextSelection(selection: SelectionLike | null | undefined): boolean {
+  if (!selection) return false;
+  if (selection.isCollapsed === true) return false;
+  const toString = selection.toString;
+  const text = typeof toString === "function" && toString !== Object.prototype.toString ? toString.call(selection) : "";
+  return text.length > 0;
+}
+
 // --- the front-matter header --------------------------------------------------------------
 
 /**

package/src/web/client/search/SearchPalette.tsx

@@ -1,27 +1,17 @@
-/**
- * The ⌘K palette (weave-workspace §1.2, P4).
- *
- * Props in, JSX out. Ranking, merging, debouncing, stale-response rejection,
- * cursor movement and every string are `search.model.ts` and `search.ts`; the
- * focus trap is `focus.model.ts` behind `useFocusTrap`. What is left is a
- * `useState`, one memo and three handlers. §10's rule.
- */
-
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import type { GraphPayload } from "../../shared/wire";
 import { useFocusTrap } from "../shell/FocusTrap";
+import { fetchSearch } from "../api";
+import type { FetchLike } from "../api";
 import type { SearchRowView } from "./search.model";
-import { PALETTE_HINT, PALETTE_PLACEHOLDER, PALETTE_TITLE, initialSearchState, paletteModel, resultIdAt, searchKey } from "./search.model";
-import type { SearchOptions } from "./search";
-import { createSearch } from "./search";
+import { DEBOUNCE_MS, PALETTE_HINT, PALETTE_PLACEHOLDER, PALETTE_TITLE, initialSearchState, paletteModel, resultIdAt, searchKey } from "./search.model";
+import type { SearchState } from "./search.model";
 
 export interface SearchPaletteProps {
   graph: GraphPayload | null;
-  /** The §1.3 context bus. */
   onSelect: (id: string) => void;
   onClose: () => void;
-  /** The controller's ports (§10). Supplied by the shell. */
-  ports: Omit<SearchOptions, "onChange">;
+  ports: { fetch: FetchLike };
 }
 
 function Row({ row, onPick, onHover }: { row: SearchRowView; onPick: () => void; onHover: () => void }) {
@@ -42,24 +32,47 @@ function Row({ row, onPick, onHover }: { row: SearchRowView; onPick: () => void;
 }
 
 export function SearchPalette(props: SearchPaletteProps) {
-  const [state, setState] = useState(initialSearchState);
-  const search = useMemo(() => createSearch({ ...props.ports, onChange: setState }), []);
+  const [state, setState] = useState<SearchState>(initialSearchState);
+  const requestId = useRef(0);
+  const abort = useRef<AbortController | null>(null);
   const trap = useFocusTrap();
   const input = useRef<HTMLInputElement | null>(null);
-  // Focus the input, not the container the trap starts on: the palette's
-  // whole surface is its query, and opening it to a container that only
-  // swallows (and does not forward) keystrokes makes the user click before
-  // they can type. Runs after the trap's own effect — hooks run in order,
-  // and the trap is created first — so this is the final word. The input
-  // carries the dialog's `aria-label`, so the announcement the
-  // container-focus exists for still happens.
+
   useEffect(() => void input.current?.focus(), []);
-  const model = paletteModel(state, props.graph);
 
+  useEffect(() => {
+    const query = state.query.trim();
+    let active = true;
+    if (!query) {
+      abort.current?.abort();
+      setState((current) => ({ ...current, hits: [], answered: "", loading: false, failed: false }));
+      return () => { active = false; };
+    }
+
+    const timer = window.setTimeout(async () => {
+      const id = ++requestId.current;
+      abort.current?.abort();
+      const controller = new AbortController();
+      abort.current = controller;
+      setState((current) => ({ ...current, loading: true, failed: false }));
+      const result = await fetchSearch(props.ports.fetch, query, controller.signal);
+      if (!active || controller.signal.aborted || id !== requestId.current) return;
+      setState((current) => result.ok
+        ? { ...current, hits: result.data.hits, answered: query, loading: false, failed: false, cursor: 0 }
+        : { ...current, loading: false, failed: true });
+    }, DEBOUNCE_MS);
+
+    return () => {
+      active = false;
+      window.clearTimeout(timer);
+      abort.current?.abort();
+    };
+  }, [state.query, props.ports.fetch]);
+
+  const model = paletteModel(state, props.graph);
   const pick = (index: number | null): void => {
     const id = resultIdAt(model.rows, index);
     if (id !== null) props.onSelect(id);
-    search.dismiss();
     props.onClose();
   };
 
@@ -75,10 +88,10 @@ export function SearchPalette(props: SearchPaletteProps) {
         onClick={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
           if (trap.onKeyDown(event as unknown as KeyboardEvent)) return;
-          const next = searchKey(state, event.key, model.count);
+          const next = searchKey(state.cursor, event.key, model.count);
           if (!next.handled) return;
           event.preventDefault();
-          search.setCursor(next.state.cursor);
+          setState((current) => ({ ...current, cursor: next.cursor }));
           if (next.dismiss) pick(next.activate);
         }}
       >
@@ -91,18 +104,14 @@ export function SearchPalette(props: SearchPaletteProps) {
           aria-label={PALETTE_TITLE}
           aria-controls="weave-search-results"
           aria-activedescendant={model.activeDomId ?? undefined}
-          onInput={(event) => search.setQuery(event.currentTarget.value)}
+          onInput={(event) => setState((current) => ({ ...current, query: event.currentTarget.value, cursor: 0 }))}
         />
         {model.status === null ? (
           <ul id="weave-search-results" class="weave-hits" role="listbox" aria-label={PALETTE_TITLE}>
-            {model.rows.map((row, index) => (
-              <Row key={row.id} row={row} onPick={() => pick(index)} onHover={() => search.setCursor(index)} />
-            ))}
+            {model.rows.map((row, index) => <Row key={row.id} row={row} onPick={() => pick(index)} onHover={() => setState((current) => ({ ...current, cursor: index }))} />)}
           </ul>
         ) : (
-          <p class="weave-palette-status" role="status">
-            {model.status}
-          </p>
+          <p class="weave-palette-status" role="status">{model.status}</p>
         )}
         <p class="weave-palette-foot">
           <span>{model.countLabel}</span>