pi-weave 0.1.5 → 0.1.7

package/src/pi/viewer/tui/surface/detail.ts

@@ -0,0 +1,315 @@
+/**
+ * surface/detail.ts — the Detail surface as a Component (weave-view-tui-v2 §6).
+ *
+ * Shows a node's meta, its (real Markdown) body, and links/backlinks. Each
+ * Detail pane owns its own bound node + selection/scroll. Enter on a link
+ * rebinds the pane in place (decision: a Detail pane re-navigates within
+ * itself); the body is rendered through the pi-tui `Markdown` component with
+ * a MarkdownTheme mapped from the weave theme (decision 7).
+ */
+
+import { Markdown, matchesKey, type MarkdownTheme, truncateToWidth } from "@earendil-works/pi-tui";
+import { detailModel, sanitizeTerminalText, type DetailModel } from "../model";
+import { kindStyle, provenanceStyle, type ThemeSlot } from "../theme";
+import { type Surface, type SurfaceEvent, type SurfaceInit } from "./base";
+import type { GraphModel } from "../../../../core/graph/model";
+import type { NoteSource } from "../../../../core/types";
+
+/** A flattened Detail render line. `id` marks a selectable row (meta/links/
+ *  backlinks); `target` is the node id an Enter on that row rebinds to. Both
+ *  are optional and may be explicitly `undefined` (body/header lines have
+ *  neither) — declared `| undefined` so the object literals below type-check
+ *  under `exactOptionalPropertyTypes`. */
+type DetailLine = { text: string; id?: string | undefined; target?: string | undefined };
+
+export interface DetailSurfaceState {
+  nodeId: string | null;
+  selectedId: string | null;
+  scrollOffset: number;
+  /** Goto-line buffer: `null`/undefined = not in goto mode; a string (possibly
+   *  empty) = the user is typing a line number to jump to. `/` enters goto,
+   *  digits append, Enter jumps, Backspace deletes, Esc cancels. The workspace
+   *  root treats a non-null `gotoBuf` as a sub-mode so Esc cancels instead of
+   *  quitting (mirrors Explore's `searching`). */
+  gotoBuf?: string | null;
+}
+
+export function bindDetail(init: SurfaceInit, nodeId: string): DetailSurface {
+  const s = new DetailSurface(init);
+  s.state = { nodeId, selectedId: nodeId, scrollOffset: 0 };
+  return s;
+}
+
+export class DetailSurface implements Surface {
+  readonly kind = "detail" as const;
+  private readonly ctx;
+  private readonly onEvent: ((e: SurfaceEvent) => void) | undefined;
+  state: DetailSurfaceState;
+  paneRows = 24;
+  /** Cached flattened render lines (with ids/targets) from the last render, so
+   *  handleInput can compute the viewport center / active row + max scroll
+   *  offset without re-rendering. Bust on invalidate / rebind. */
+  private _lines: DetailLine[] | undefined;
+
+  constructor(init: SurfaceInit) {
+    this.ctx = init.context;
+    this.onEvent = init.onEvent;
+    this.state = { nodeId: init.context.model.nodes[0]?.id ?? null, selectedId: null, scrollOffset: 0 };
+  }
+
+  title(): string {
+    return "Detail";
+  }
+
+  setFocused(_focused: boolean): void {
+    // detail has no focus-only state
+  }
+
+  invalidate(): void {
+    // Drop the cached line layout so the next render rebuilds it from the
+    // current body (BodyStore loads fire onChange at the root → invalidate).
+    this._lines = undefined;
+  }
+
+  rebind(model: GraphModel): void {
+    // After a refresh, a detail pane may be bound to a node that was removed.
+    // Rebind to the first surviving node so the pane never shows a stale
+    // "(node not found)" after the model is rebuilt.
+    if (this.state.nodeId && !model.nodes.some((n) => n.id === this.state.nodeId)) {
+      const first = model.nodes[0]?.id ?? null;
+      this.state = { nodeId: first, selectedId: first, scrollOffset: 0, gotoBuf: null };
+      this._lines = undefined;
+    }
+  }
+
+  handleInput(data: string): void {
+    const paneRows = Math.max(5, this.paneRows);
+    if (!this._lines) this._lines = this.buildLines(80);
+    const maxOffset = Math.max(0, this._lines.length - paneRows);
+    const clamp = (n: number): number => Math.max(0, Math.min(maxOffset, n));
+
+    // Goto-line sub-mode: digits build a line number, Enter jumps, Esc/bs exit.
+    if (this.state.gotoBuf != null) {
+      if (matchesKey(data, "escape")) {
+        this.state = { ...this.state, gotoBuf: null };
+        return;
+      }
+      if (matchesKey(data, "enter")) {
+        const n = parseInt(this.state.gotoBuf, 10);
+        this.state = { ...this.state, scrollOffset: clamp(Number.isNaN(n) || n < 1 ? 0 : n - 1), gotoBuf: null };
+        return;
+      }
+      if (matchesKey(data, "backspace")) {
+        const b = this.state.gotoBuf.slice(0, -1);
+        this.state = { ...this.state, gotoBuf: b.length ? b : null };
+        return;
+      }
+      if (data.length === 1 && data >= "0" && data <= "9" && this.state.gotoBuf.length < 5) {
+        this.state = { ...this.state, gotoBuf: this.state.gotoBuf + data };
+        return;
+      }
+      return; // ignore unmapped keys while typing a line number
+    }
+
+    if (data === "o") {
+      if (this.state.nodeId) this.onEvent?.({ type: "openEditor", id: this.state.nodeId });
+      return;
+    }
+    // Scroll-primary: arrows/page/home/end move the viewport; the selectable
+    // row nearest the viewport center is the active (›) row — Enter opens it.
+    if (matchesKey(data, "up")) {
+      this.state = { ...this.state, scrollOffset: clamp(this.state.scrollOffset - 1) };
+      return;
+    }
+    if (matchesKey(data, "down")) {
+      this.state = { ...this.state, scrollOffset: clamp(this.state.scrollOffset + 1) };
+      return;
+    }
+    if (matchesKey(data, "pageUp")) {
+      this.state = { ...this.state, scrollOffset: clamp(this.state.scrollOffset - paneRows) };
+      return;
+    }
+    if (matchesKey(data, "pageDown")) {
+      this.state = { ...this.state, scrollOffset: clamp(this.state.scrollOffset + paneRows) };
+      return;
+    }
+    if (matchesKey(data, "home")) {
+      this.state = { ...this.state, scrollOffset: 0 };
+      return;
+    }
+    if (matchesKey(data, "end")) {
+      this.state = { ...this.state, scrollOffset: maxOffset };
+      return;
+    }
+    if (data === "/") {
+      this.state = { ...this.state, gotoBuf: "" };
+      return;
+    }
+    if (matchesKey(data, "enter")) {
+      const row = this.activeRow();
+      if (row?.target) {
+        // rebind this detail pane to the target (Obsidian "open in main" in place)
+        this.state = { nodeId: row.target, selectedId: row.target, scrollOffset: 0, gotoBuf: null };
+        this._lines = undefined;
+        this.requestBody(row.target);
+      }
+      return;
+    }
+  }
+
+  /** The selectable row (meta/links/backlinks) nearest the viewport center. */
+  private activeRow(): { id: string; target?: string | undefined } | undefined {
+    const lines = this._lines;
+    if (!lines) return undefined;
+    const paneRows = Math.max(5, this.paneRows);
+    const center = this.state.scrollOffset + Math.floor(paneRows / 2);
+    let bestI = -1;
+    let best = Infinity;
+    for (let i = 0; i < lines.length; i++) {
+      const ln = lines[i]!;
+      if (!ln.id) continue;
+      const d = Math.abs(i - center);
+      if (d < best) {
+        best = d;
+        bestI = i;
+      }
+    }
+    return bestI >= 0 ? { id: lines[bestI]!.id!, target: lines[bestI]!.target } : undefined;
+  }
+
+  /** Flatten the detail (title + meta + body + links + backlinks) into lines. */
+  private buildLines(width: number): DetailLine[] {
+    const t = this.ctx.theme;
+    const id = this.state.nodeId;
+    if (!id) return [];
+    const d = detailModel(this.ctx.model, id);
+    if (!d) return [];
+    const lines: DetailLine[] = [];
+    const marker = this.rowMarker(d.kind, d.provenance);
+    const provBadge = d.provenance ? ` ${provenanceStyle(d.provenance).glyph} ${provenanceStyle(d.provenance).word}` : "";
+    lines.push({ text: t.bold(`${marker}${sanitizeTerminalText(d.label)}`) + t.fg("muted", ` (${d.kind}${provBadge})`) });
+    for (const m of d.meta) {
+      lines.push({ text: `${t.fg("muted", sanitizeTerminalText(m.label))}: ${sanitizeTerminalText(m.value)}`, id: m.id });
+    }
+    const body = this.bodyLinesFor(id, width);
+    for (const b of body) lines.push({ text: b });
+    if (d.links.length > 0) {
+      lines.push({ text: t.fg("accent", "Links") });
+      for (const lk of d.links) {
+        lines.push({ text: `  ${this.rowMarker(lk.kind, lk.provenance)}${sanitizeTerminalText(lk.label)}`, id: lk.id, target: lk.target });
+      }
+    }
+    if (d.backlinks.length > 0) {
+      lines.push({ text: t.fg("accent", "Backlinks") });
+      for (const lk of d.backlinks) {
+        lines.push({ text: `  ${this.rowMarker(lk.kind, lk.provenance)}${sanitizeTerminalText(lk.label)}`, id: lk.id, target: lk.target });
+      }
+    }
+    return lines;
+  }
+
+  render(width: number): string[] {
+    const t = this.ctx.theme;
+    const id = this.state.nodeId;
+    if (!id) return [t.fg("dim", "(no selection)")];
+    const d = detailModel(this.ctx.model, id);
+    if (!d) return [t.fg("dim", "(node not found)")];
+
+    const lines = this.buildLines(width);
+    this._lines = lines;
+    const paneRows = Math.max(5, this.paneRows);
+    const maxOffset = Math.max(0, lines.length - paneRows);
+    const scrollOffset = Math.max(0, Math.min(this.state.scrollOffset, maxOffset));
+    if (scrollOffset !== this.state.scrollOffset) {
+      this.state = { ...this.state, scrollOffset };
+    }
+
+    // Active row = selectable row nearest the viewport center.
+    const center = scrollOffset + Math.floor(paneRows / 2);
+    let activeI = -1;
+    let best = Infinity;
+    for (let i = 0; i < lines.length; i++) {
+      if (!lines[i]!.id) continue;
+      const dist = Math.abs(i - center);
+      if (dist < best) {
+        best = dist;
+        activeI = i;
+      }
+    }
+    const activeId = activeI >= 0 ? (lines[activeI]!.id ?? null) : null;
+    if (this.state.selectedId !== activeId) {
+      this.state = { ...this.state, selectedId: activeId };
+    }
+
+    const inGoto = this.state.gotoBuf != null;
+    // Reserve the last viewport line for the goto prompt when active.
+    const contentRows = inGoto ? Math.max(1, paneRows - 1) : paneRows;
+    const start = scrollOffset;
+    const end = Math.min(lines.length, start + contentRows);
+    const marker2 = (text: string) => `› ${this.ctx.theme.bg("selectedBg", text)}`;
+    const out: string[] = [];
+    for (let i = start; i < end; i++) {
+      out.push(i === activeI ? marker2(lines[i]!.text) : `  ${lines[i]!.text}`);
+    }
+    if (inGoto) {
+      out.push(`${t.fg("accent", "/")}${this.state.gotoBuf}`);
+    }
+    return out.map((l) => truncateToWidth(l, width));
+  }
+
+  private rowMarker(kind: string, prov: NoteSource | null): string {
+    const ks = kindStyle(kind as never);
+    if (kind === "note") {
+      const ps = provenanceStyle(prov);
+      return ps.glyph ? `${ps.glyph} ` : "";
+    }
+    return `${this.ctx.theme.fg(ks.slot as ThemeSlot, `${ks.glyph} `)}`;
+  }
+
+  private requestBody(id: string): void {
+    const node = this.ctx.model.nodes.find((n) => n.id === id);
+    if (!node) return;
+    if (node.kind === "note") this.ctx.bodies.load(id, "note", node.detail.slug);
+    else if (node.kind === "file") this.ctx.bodies.load(id, "file", node.detail.path);
+  }
+
+  /** The node body, rendered through the real Markdown component (decision 7). */
+  private bodyLinesFor(id: string, width: number): string[] {
+    const node = this.ctx.model.nodes.find((n) => n.id === id);
+    if (!node || (node.kind !== "note" && node.kind !== "file")) return [];
+    if (this.ctx.bodies.isLoading(id)) return [this.ctx.theme.fg("dim", "(loading…)")];
+    const body = this.ctx.bodies.get(id);
+    if (body === undefined) {
+      queueMicrotask(() => this.requestBody(id));
+      return [this.ctx.theme.fg("dim", "(loading…)")];
+    }
+    if (body === null || body === "") return [];
+    const md = new Markdown(sanitizeTerminalText(body), 0, 0, markdownTheme(this.ctx.theme), { color: (t) => this.ctx.theme.fg("text", t) }, { renderLatex: false });
+    return md.render(Math.max(10, width - 2)).map((l) => `  ${l}`);
+  }
+}
+
+/** Map the weave theme slots onto a pi-tui MarkdownTheme. */
+export function markdownTheme(theme: {
+  fg: (slot: ThemeSlot, text: string) => string;
+  bold: (text: string) => string;
+}): MarkdownTheme {
+  return {
+    heading: (t) => theme.bold(t),
+    link: (t) => theme.fg("accent", t),
+    linkUrl: (t) => theme.fg("muted", t),
+    code: (t) => theme.fg("warning", t),
+    codeBlock: (t) => theme.fg("text", t),
+    codeBlockBorder: (t) => theme.fg("dim", t),
+    quote: (t) => theme.fg("dim", t),
+    quoteBorder: (t) => theme.fg("dim", t),
+    hr: (t) => theme.fg("dim", t),
+    listBullet: (t) => theme.fg("accent", t),
+    bold: (t) => theme.bold(t),
+    italic: (t) => t,
+    strikethrough: (t) => t,
+    underline: (t) => t,
+  };
+}
+
+export type { DetailModel, GraphModel };

package/src/pi/viewer/tui/surface/explore.ts

@@ -0,0 +1,204 @@
+/**
+ * surface/explore.ts — the Explore surface as a Component (weave-view-tui-v2 §6).
+ *
+ * Wraps the v1 tree view-model (`treeRows` + `reduce`/`ExplorerState`) so each
+ * Explore pane owns its own selection, expansion, filter, provenance cycle,
+ * and search sub-mode — independent of other panes. Cross-pane navigation
+ * (enter → open detail, f → open focus) is emitted as a `SurfaceEvent` that
+ * the workspace root resolves (e.g. into the nearest Detail pane).
+ */
+
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { decodeAction } from "../explorer";
+import {
+  graphRoots,
+  initialState,
+  reduce,
+  treeEmptyHint,
+  treeRows,
+  type Action,
+  type ExplorerState,
+} from "../model";
+import { chevron, kindStyle, provenanceStyle, SELECTION_MARKER, type ThemeSlot } from "../theme";
+import type { GraphModel } from "../../../../core/graph/model";
+import type { NoteSource } from "../../../../core/types";
+import { windowLines, type Surface, type SurfaceEvent, type SurfaceInit, type SurfaceRender } from "./base";
+
+/** The Explore surface's own state (wraps the v1 ExplorerState for the tree). */
+export interface ExploreSurfaceState {
+  selectedId: string | null;
+  expanded: Set<string>;
+  showInternals: boolean;
+  provFilter: NoteSource | null;
+  query: string;
+  searching: boolean;
+  scrollOffset: number;
+}
+
+export function initialExploreState(model: GraphModel): ExploreSurfaceState {
+  const s = initialState(graphRoots(model));
+  return {
+    selectedId: s.selectedId,
+    expanded: s.expanded,
+    showInternals: s.showInternals,
+    provFilter: s.provFilter,
+    query: s.query,
+    searching: s.searching,
+    scrollOffset: 0,
+  };
+}
+
+export class ExploreSurface implements Surface {
+  readonly kind = "explore" as const;
+  private readonly ctx;
+  private readonly onEvent: ((e: SurfaceEvent) => void) | undefined;
+  state: ExploreSurfaceState;
+  private focused = false;
+  /** Pane viewport height (rows); set by the workspace root. */
+  paneRows = 24;
+  private renderCache = new Map<string, string[]>();
+
+  constructor(init: SurfaceInit) {
+    this.ctx = init.context;
+    this.onEvent = init.onEvent;
+    this.state = initialExploreState(this.ctx.model);
+  }
+
+  title(): string {
+    return "Explore";
+  }
+
+  setFocused(focused: boolean): void {
+    this.focused = focused;
+  }
+
+  invalidate(): void {
+    this.renderCache.clear();
+  }
+
+  /** Navigate the tree with a key sequence (delegates to v1 decodeAction + reduce). */
+  handleInput(data: string): void {
+    // o opens the selected node in the external editor (parity with v1's
+    // WeaveExplorer and the Detail surface; the workspace root resolves the
+    // event into loaders.openNote/openFile).
+    if (data === "o" && !this.state.searching) {
+      if (this.state.selectedId) this.onEvent?.({ type: "openEditor", id: this.state.selectedId });
+      return;
+    }
+    const action = decodeAction(data, toExplorerState(this.state));
+    if (!action) return;
+    this.applyAction(action);
+  }
+
+  private applyAction(action: Action): void {
+    // Cross-pane navigation: enter → open detail; f → open focus.
+    if (action.type === "enter" && !this.state.searching) {
+      if (this.state.selectedId) this.onEvent?.({ type: "openDetail", id: this.state.selectedId });
+      return;
+    }
+    if (action.type === "focus" && !this.state.searching) {
+      if (this.state.selectedId) this.onEvent?.({ type: "focusNode", id: this.state.selectedId });
+      return;
+    }
+    const rows = this.renderRows(80);
+    const prev = toExplorerState(this.state);
+    const next = reduce(prev, action, { rows, window: Math.max(5, this.paneRows) });
+    this.state = fromExplorerState(next);
+  }
+
+  private renderRows(width: number): { id: string; target?: string }[] {
+    return this.renderSurface(width).rows;
+  }
+
+  render(width: number): string[] {
+    const key = `${width}:${this.state.scrollOffset}:${this.state.selectedId}:${this.state.query}:${this.state.provFilter ?? ""}:${this.state.showInternals}:${this.state.searching}`;
+    const cached = this.renderCache.get(key);
+    if (cached) return cached;
+    const out = this.renderSurface(width).lines.map((l) => truncateToWidth(l, width));
+    this.renderCache.set(key, out);
+    return out;
+  }
+
+  private renderSurface(width: number): SurfaceRender {
+    const t = this.ctx.theme;
+    const rows = treeRows(this.ctx.model, {
+      expanded: this.state.expanded,
+      showInternals: this.state.showInternals,
+      provFilter: this.state.provFilter,
+      query: this.state.query,
+      now: this.ctx.now(),
+    });
+    const hint = treeEmptyHint(this.ctx.model);
+    if (rows.length === 0 && hint) {
+      return { lines: [t.fg("dim", hint)], rows: [] };
+    }
+    const lines: { text: string; id: string }[] = rows.map((r) => {
+      const chev = chevron(r.expanded, r.hasKids);
+      const marker = this.rowMarker(r.kind, r.provenance);
+      const label = sanitize(r.label);
+      const meta = r.meta ? t.fg("dim", `  ${sanitize(r.meta)}`) : "";
+      const indent = "  ".repeat(r.depth);
+      const body = `${indent}${chev} ${marker}${label}`;
+      return { text: meta ? `${body}${meta}` : body, id: r.id };
+    });
+    const selId = this.state.selectedId;
+    const selLine = selId ? lines.findIndex((l) => l.id === selId) : -1;
+    const marker = (text: string) => `${SELECTION_MARKER} ${this.ctx.theme.bg("selectedBg", text)}`;
+    const out: string[] = windowLines(
+      lines.map((l) => l.text),
+      selLine,
+      this.state.scrollOffset,
+      Math.max(5, this.paneRows),
+      marker,
+    );
+    if (this.state.searching) {
+      const prompt = t.fg("accent", "/");
+      out.push(`${prompt}${sanitize(this.state.query)}`);
+    }
+    return { lines: out, rows: rows.map((r) => ({ id: r.id })) };
+  }
+
+  private rowMarker(kind: string, prov: NoteSource | null): string {
+    const ks = kindStyle(kind as never);
+    if (kind === "note") {
+      const ps = provenanceStyle(prov);
+      return ps.glyph ? `${ps.glyph} ` : "";
+    }
+    return `${this.ctx.theme.fg(ks.slot as ThemeSlot, `${ks.glyph} `)}`;
+  }
+}
+
+function sanitize(s: string): string {
+  // eslint-disable-next-line no-control-regex
+  return s.replace(/\x1b/g, "").replace(/\x9b/g, "").replace(/\x07/g, "").replace(/[\x00-\x08\x0b-\x1f\x7f]/g, "");
+}
+
+function toExplorerState(s: ExploreSurfaceState): ExplorerState {
+  return {
+    surface: "tree",
+    searching: s.searching,
+    selectedId: s.selectedId,
+    focusId: null,
+    detailId: null,
+    expanded: s.expanded,
+    showInternals: s.showInternals,
+    provFilter: s.provFilter,
+    query: s.query,
+    helpOpen: false,
+    refreshing: false,
+    version: 0,
+    scrollOffset: s.scrollOffset,
+  };
+}
+
+function fromExplorerState(s: ExplorerState): ExploreSurfaceState {
+  return {
+    selectedId: s.selectedId,
+    expanded: s.expanded,
+    showInternals: s.showInternals,
+    provFilter: s.provFilter,
+    query: s.query,
+    searching: s.searching,
+    scrollOffset: s.scrollOffset,
+  };
+}

package/src/pi/viewer/tui/surface/focus.ts

@@ -0,0 +1,139 @@
+/**
+ * surface/focus.ts — the Focus surface as a Component (weave-view-tui-v2 §6).
+ *
+ * The 1-hop graph neighborhood (`focusModel`). Enter re-centers the focus on
+ * the selected neighbor, walking the graph. Each Focus pane owns its own
+ * center node + selection/scroll.
+ */
+
+import { matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import { focusModel, sanitizeTerminalText } from "../model";
+import { kindStyle, provenanceStyle, type ThemeSlot } from "../theme";
+import { windowLines, type Surface, type SurfaceEvent, type SurfaceInit } from "./base";
+import type { NoteSource } from "../../../../core/types";
+import type { GraphModel } from "../../../../core/graph/model";
+
+export interface FocusSurfaceState {
+  focusId: string | null;
+  selectedId: string | null;
+  scrollOffset: number;
+}
+
+export class FocusSurface implements Surface {
+  readonly kind = "focus" as const;
+  private readonly ctx;
+  private readonly onEvent: ((e: SurfaceEvent) => void) | undefined;
+  state: FocusSurfaceState;
+  paneRows = 24;
+
+  constructor(init: SurfaceInit) {
+    this.ctx = init.context;
+    this.onEvent = init.onEvent;
+    this.state = { focusId: null, selectedId: null, scrollOffset: 0 };
+  }
+
+  /** Bind the focus center node (called when opening/`f`). */
+  setFocus(nodeId: string): void {
+    this.state = { focusId: nodeId, selectedId: nodeId, scrollOffset: 0 };
+  }
+
+  setFocused(_focused: boolean): void {}
+
+  title(): string {
+    return "Focus";
+  }
+
+  invalidate(): void {}
+
+  rebind(model: GraphModel): void {
+    // After a refresh, drop a focus node that no longer exists rather than
+    // rendering an empty "(no focus node)" pane.
+    if (this.state.focusId && !model.nodes.some((n) => n.id === this.state.focusId)) {
+      this.state = { focusId: null, selectedId: null, scrollOffset: 0 };
+    }
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, "up")) return this.move(-1);
+    if (matchesKey(data, "down")) return this.move(1);
+    if (matchesKey(data, "pageUp")) return this.movePage(-1);
+    if (matchesKey(data, "pageDown")) return this.movePage(1);
+    if (matchesKey(data, "home")) {
+      this.state = { ...this.state, selectedId: this.rows()[0]?.id ?? null, scrollOffset: 0 };
+      return;
+    }
+    if (matchesKey(data, "end")) {
+      const r = this.rows();
+      const last = r[r.length - 1];
+      this.state = { ...this.state, selectedId: last?.id ?? null, scrollOffset: Math.max(0, r.length - this.paneRows) };
+      return;
+    }
+    if (matchesKey(data, "enter")) {
+      const rows = this.rows();
+      const idx = rows.findIndex((r) => r.id === this.state.selectedId);
+      const row = idx >= 0 ? rows[idx] : undefined;
+      if (row && row.target && row.target !== this.state.focusId) {
+        this.state = { focusId: row.target, selectedId: row.target, scrollOffset: 0 };
+      }
+      return;
+    }
+    if (data === "g") {
+      this.onEvent?.({ type: "focusNode", id: this.state.focusId ?? "" });
+      return;
+    }
+  }
+
+  private move(delta: 1 | -1): void {
+    const rows = this.rows();
+    if (rows.length === 0) return;
+    const idx = rows.findIndex((r) => r.id === this.state.selectedId);
+    const nextIdx = Math.max(0, Math.min(rows.length - 1, (idx < 0 ? -1 : idx) + delta));
+    const row = rows[nextIdx]!;
+    this.state = { ...this.state, selectedId: row.id };
+  }
+
+  private movePage(dir: 1 | -1): void {
+    const rows = this.rows();
+    const idx = rows.findIndex((r) => r.id === this.state.selectedId);
+    const target = idx < 0 ? 0 : Math.max(0, Math.min(rows.length - 1, idx + dir * this.paneRows));
+    const row = rows[target];
+    if (row) this.state = { ...this.state, selectedId: row.id };
+  }
+
+  private rows(): { id: string; target?: string }[] {
+    if (!this.state.focusId) return [];
+    const f = focusModel(this.ctx.model, this.state.focusId);
+    const center: { id: string; target?: string } = f.center.target ? { id: f.center.id, target: f.center.target } : { id: f.center.id };
+    return [center, ...f.groups.flatMap((g) => g.rows.map((r): { id: string; target?: string } => ({ id: r.id, target: r.target! })))];
+  }
+
+  render(width: number): string[] {
+    const t = this.ctx.theme;
+    const id = this.state.focusId;
+    if (!id) return [t.fg("dim", "(no focus node)")];
+    const f = focusModel(this.ctx.model, id);
+    const lines: { text: string; id?: string }[] = [];
+    const cm = this.rowMarker(f.center.kind, f.center.provenance);
+    lines.push({ text: t.bold(`${cm}${sanitizeTerminalText(f.center.label)}`) + t.fg("dim", "  (focus — g/esc to exit)"), id: f.center.id });
+    for (const g of f.groups) {
+      lines.push({ text: t.fg("accent", g.heading) });
+      for (const r of g.rows) {
+        lines.push({ text: `  ${this.rowMarker(r.kind, r.provenance)}${sanitizeTerminalText(r.label)}`, id: r.id });
+      }
+    }
+    const selId = this.state.selectedId;
+    const selLine = selId ? lines.findIndex((l) => l.id === selId) : -1;
+    const marker = (text: string) => `› ${this.ctx.theme.bg("selectedBg", text)}`;
+    const windowed = windowLines(lines.map((l) => l.text), selLine, this.state.scrollOffset, Math.max(5, this.paneRows), marker);
+    return windowed.map((l) => truncateToWidth(l, width));
+  }
+
+  private rowMarker(kind: string, prov: NoteSource | null): string {
+    const ks = kindStyle(kind as never);
+    if (kind === "note") {
+      const ps = provenanceStyle(prov);
+      return ps.glyph ? `${ps.glyph} ` : "";
+    }
+    return `${this.ctx.theme.fg(ks.slot as ThemeSlot, `${ks.glyph} `)}`;
+  }
+}