pi-weave 0.3.7 → 0.3.9

package/src/pi/viewer/tui/branding.ts

@@ -1,14 +0,0 @@
-import { visibleWidth } from "@earendil-works/pi-tui";
-import type { ThemeSlot } from "./theme";
-
-/** The TUI uses one terminal-safe mark. */
-export const MARK_GLYPH = "◈";
-export const WORDMARK = "weave view";
-
-export function renderMark(
-  theme: { fg: (slot: ThemeSlot, text: string) => string },
-  width: number,
-): string {
-  const mark = theme.fg("accent", MARK_GLYPH);
-  return visibleWidth(mark) <= width ? mark : "";
-}

package/src/pi/viewer/tui/model.ts

@@ -1,390 +0,0 @@
-/**
- * TUI-specific view-model for the weave-view explorer (weave-view-tui-design
- * §5, §10.1).
- *
- * The portable projections (`treeRows`, `detailModel`, `focusModel`,
- * `healthModel`, …) now live in `src/core/view` so the browser workspace can
- * share them (weave-workspace §3). What stays here is what is genuinely about
- * a terminal: the explorer's `ExplorerState`/`Action`/`reduce` state machine,
- * terminal-escape sanitising, and the theme glue.
- *
- * Everything moved is re-exported below, so TUI files keep importing from
- * `./model`.
- */
-
-import type { NoteSource } from "../../../core/types";
-import type { SelectableRow, TreeRow } from "../../../core/view";
-import { MAX_FILTER_LEN, PROVENANCE_CYCLE, provenanceStyle, type ProvenanceStyle } from "./theme";
-
-// ---------------------------------------------------------------------------
-// sanitizeTerminalText — the TUI's XSS analog (design §9.3)
-// ---------------------------------------------------------------------------
-
-/** Strip terminal-escape/control sequences from disk/user content before
- *  styling or handing to Markdown: ESC (0x1b), CSI (0x9b), BEL (0x07), and
- *  other C0 controls except newline (0x0a) and tab (0x09). */
-export function sanitizeTerminalText(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, "");
-}
-
-// ---------------------------------------------------------------------------
-// ExplorerState + reduce — key→state transitions (design §6, §10.1)
-// ---------------------------------------------------------------------------
-
-export type Surface = "tree" | "detail" | "focus" | "health";
-
-export interface ExplorerState {
-  surface: Surface;
-  /** Inline search sub-mode (only meaningful on the tree surface). */
-  searching: boolean;
-  /** Selected node id (source of truth; the cursor index is derived). */
-  selectedId: string | null;
-  /** Node pinned for focus mode. */
-  focusId: string | null;
-  /** Node open in detail. */
-  detailId: string | null;
-  /** Tree expansion (when no filter is active). */
-  expanded: Set<string>;
-  showInternals: boolean;
-  provFilter: NoteSource | null;
-  query: string;
-  helpOpen: boolean;
-  refreshing: boolean;
-  /** Bumped on every mutation so the render cache can key off it. */
-  version: number;
-  /** Scroll offset (top visible row index) for the current surface. */
-  scrollOffset: number;
-}
-
-export function initialState(roots: readonly string[]): ExplorerState {
-  const expanded = new Set<string>();
-  for (const r of roots) expanded.add(r);
-  const selectedId = roots[0] ?? null;
-  return {
-    surface: "tree",
-    searching: false,
-    selectedId,
-    focusId: null,
-    detailId: null,
-    expanded,
-    showInternals: false,
-    provFilter: null,
-    query: "",
-    helpOpen: false,
-    refreshing: false,
-    version: 0,
-    scrollOffset: 0,
-  };
-}
-
-export type Action =
-  | { type: "up" }
-  | { type: "down" }
-  | { type: "pageUp" }
-  | { type: "pageDown" }
-  | { type: "home" }
-  | { type: "end" }
-  | { type: "left" }
-  | { type: "right" }
-  | { type: "enter" }
-  | { type: "searchStart" }
-  | { type: "searchChar"; ch: string }
-  | { type: "searchBackspace" }
-  | { type: "searchCommit" }
-  | { type: "cycleProvenance" }
-  | { type: "toggleInternals" }
-  | { type: "focus" }
-  | { type: "focusExit" }
-  | { type: "surfaceTree" }
-  | { type: "surfaceHealth" }
-  | { type: "refresh" }
-  | { type: "refreshDone" }
-  | { type: "toggleHelp" }
-  | { type: "quit" }
-  | { type: "esc" };
-
-/** Context reduce needs for movement: the selectable rows of the current
- *  surface (in display order) and the viewport window size. */
-export interface ReduceCtx {
-  rows: readonly SelectableRow[];
-  window: number;
-}
-
-function bump(s: ExplorerState): ExplorerState {
-  return { ...s, version: s.version + 1 };
-}
-
-function clampIndex(idx: number, len: number): number {
-  if (len === 0) return -1;
-  if (idx >= len) return len - 1;
-  return idx;
-}
-
-function scrollForSelection(idx: number, window: number, prev: number): number {
-  if (window <= 0) return 0;
-  // keep selection visible: offset <= idx < offset + window
-  if (idx < prev) return idx;
-  if (idx >= prev + window) return idx - window + 1;
-  return prev;
-}
-
-function provenanceCycleNext(current: NoteSource | null): NoteSource | null {
-  const i = PROVENANCE_CYCLE.indexOf(current);
-  const next = PROVENANCE_CYCLE[(i + 1) % PROVENANCE_CYCLE.length];
-  return next ?? null;
-}
-
-/**
- * Apply an action to the explorer state. Pure: returns a new state.
- *
- * Movement uses `ctx.rows` (the current surface's selectable rows) and
- * `ctx.window` (viewport height) to clamp the cursor and adjust scroll.
- * The component builds `ctx.rows` from the surface's model function.
- */
-export function reduce(state: ExplorerState, action: Action, ctx: ReduceCtx = { rows: [], window: 24 }): ExplorerState {
-  const rows = ctx.rows;
-  const len = rows.length;
-  const currentIdx = state.selectedId ? rows.findIndex((r) => r.id === state.selectedId || r.target === state.selectedId) : -1;
-
-  switch (action.type) {
-    case "up":
-    case "down":
-    case "pageUp":
-    case "pageDown":
-    case "home":
-    case "end": {
-      if (len === 0) return state;
-      let nextIdx: number;
-      if (action.type === "up") nextIdx = currentIdx <= 0 ? 0 : currentIdx - 1;
-      else if (action.type === "down") nextIdx = currentIdx < 0 ? 0 : Math.min(currentIdx + 1, len - 1);
-      else if (action.type === "pageUp") nextIdx = currentIdx < 0 ? 0 : Math.max(0, currentIdx - ctx.window);
-      else if (action.type === "pageDown") nextIdx = currentIdx < 0 ? 0 : Math.min(len - 1, currentIdx + ctx.window);
-      else if (action.type === "home") nextIdx = 0;
-      else nextIdx = len - 1; // end
-      nextIdx = clampIndex(nextIdx, len);
-      const row = rows[nextIdx];
-      if (!row) return state;
-      const selectedId = row.target ?? row.id;
-      const scrollOffset = scrollForSelection(nextIdx, ctx.window, state.scrollOffset);
-      return bump({ ...state, selectedId, scrollOffset });
-    }
-
-    case "left":
-    case "right": {
-      if (state.surface !== "tree") return state;
-      if (!state.selectedId) return state;
-      // operate on the tree: find the row for selectedId
-      const treeRowIdx = rows.findIndex((r) => r.id === state.selectedId);
-      const treeRow = treeRowIdx >= 0 ? (rows[treeRowIdx] as TreeRow | undefined) : undefined;
-      const isExpanded = state.expanded.has(state.selectedId);
-      if (action.type === "right") {
-        if (treeRow && treeRow.hasKids && !isExpanded) {
-          const expanded = new Set(state.expanded).add(state.selectedId);
-          return bump({ ...state, expanded });
-        }
-        if (treeRow && isExpanded) {
-          // move to first child
-          const child = rows[treeRowIdx + 1];
-          if (child) return bump({ ...state, selectedId: child.id, scrollOffset: scrollForSelection(treeRowIdx + 1, ctx.window, state.scrollOffset) });
-        }
-        return state;
-      }
-      // left: collapse, or jump to parent
-      if (treeRow && isExpanded) {
-        const expanded = new Set(state.expanded);
-        expanded.delete(state.selectedId);
-        return bump({ ...state, expanded });
-      }
-      // jump to parent: the nearest preceding row with smaller depth
-      for (let i = treeRowIdx - 1; i >= 0; i--) {
-        const r = rows[i] as TreeRow | undefined;
-        if (r && r.depth < (treeRow?.depth ?? 0)) {
-          return bump({ ...state, selectedId: r.id, scrollOffset: scrollForSelection(i, ctx.window, state.scrollOffset) });
-        }
-      }
-      return state;
-    }
-
-    case "enter": {
-      if (state.searching) {
-        // commit search: keep filter, exit search mode
-        return bump({ ...state, searching: false, scrollOffset: 0 });
-      }
-      if (!state.selectedId) return state;
-      const row = currentIdx >= 0 ? rows[currentIdx] : undefined;
-      if (state.surface === "tree") {
-        return bump({ ...state, surface: "detail", detailId: state.selectedId, scrollOffset: 0 });
-      }
-      if (state.surface === "detail") {
-        // jump to the selected link/backlink target
-        if (row && row.target) {
-          return bump({ ...state, surface: "detail", detailId: row.target, selectedId: row.target, scrollOffset: 0 });
-        }
-        return state;
-      }
-      if (state.surface === "focus") {
-        // re-center on the selected neighbor
-        if (row && row.target) {
-          return bump({ ...state, focusId: row.target, selectedId: row.target, scrollOffset: 0 });
-        }
-        return state;
-      }
-      if (state.surface === "health") {
-        if (row && row.target) {
-          return bump({ ...state, surface: "detail", detailId: row.target, selectedId: row.target, scrollOffset: 0 });
-        }
-        return state;
-      }
-      return state;
-    }
-
-    case "searchStart": {
-      if (state.searching) return state;
-      if (state.surface === "detail") return state;
-      return bump({ ...state, searching: true });
-    }
-
-    case "searchChar": {
-      if (!state.searching) return state;
-      const q = (state.query + action.ch).slice(0, MAX_FILTER_LEN);
-      return bump({ ...state, query: q, scrollOffset: 0 });
-    }
-
-    case "searchBackspace": {
-      if (!state.searching) return state;
-      return bump({ ...state, query: state.query.slice(0, -1), scrollOffset: 0 });
-    }
-
-    case "searchCommit": {
-      if (!state.searching) return state;
-      return bump({ ...state, searching: false, scrollOffset: 0 });
-    }
-
-    case "esc": {
-      // precedence: search > surface-exit > quit
-      if (state.searching) {
-        return bump({ ...state, searching: false, query: "", scrollOffset: 0 });
-      }
-      if (state.surface === "detail") {
-        return bump({ ...state, surface: "tree", scrollOffset: 0 });
-      }
-      if (state.surface === "focus") {
-        return bump({ ...state, surface: "tree", focusId: null, scrollOffset: 0 });
-      }
-      if (state.surface === "health") {
-        return bump({ ...state, surface: "tree", scrollOffset: 0 });
-      }
-      // tree → quit (component resolves done(null))
-      return bump({ ...state });
-    }
-
-    case "quit": {
-      return bump({ ...state });
-    }
-
-    case "cycleProvenance": {
-      if (state.searching) return state;
-      return bump({ ...state, provFilter: provenanceCycleNext(state.provFilter), scrollOffset: 0 });
-    }
-
-    case "toggleInternals": {
-      if (state.searching) return state;
-      return bump({ ...state, showInternals: !state.showInternals, scrollOffset: 0 });
-    }
-
-    case "focus": {
-      if (state.searching) return state;
-      if (!state.selectedId) return state;
-      return bump({ ...state, surface: "focus", focusId: state.selectedId, scrollOffset: 0 });
-    }
-
-    case "focusExit": {
-      return bump({ ...state, surface: "tree", focusId: null, scrollOffset: 0 });
-    }
-
-    case "surfaceTree": {
-      if (state.searching) return state;
-      return bump({ ...state, surface: "tree", scrollOffset: 0 });
-    }
-
-    case "surfaceHealth": {
-      if (state.searching) return state;
-      return bump({ ...state, surface: "health", scrollOffset: 0 });
-    }
-
-    case "refresh": {
-      return bump({ ...state, refreshing: true });
-    }
-
-    case "refreshDone": {
-      return bump({ ...state, refreshing: false });
-    }
-
-    case "toggleHelp": {
-      if (state.searching) return state;
-      return bump({ ...state, helpOpen: !state.helpOpen });
-    }
-  }
-  // Exhaustive over Action; unreachable for valid inputs.
-  return state;
-}
-
-/**
- * Merge explorer state across a refresh (design §6): keep the expanded set,
- * filter, surface, and selected node id. A selected/expanded id that no
- * longer exists drops out; selection falls back to the first root.
- */
-export function mergeAfterRefresh(prev: ExplorerState, nextRoots: readonly string[]): ExplorerState {
-  let selectedId = prev.selectedId;
-  if (selectedId !== null && !nextRoots.includes(selectedId)) {
-    // selectedId may be a non-root; the component re-resolves it against the
-    // new tree rows. Roots fallback only when it is null.
-  }
-  if (selectedId === null) selectedId = nextRoots[0] ?? null;
-  return {
-    ...prev,
-    refreshing: false,
-    selectedId,
-    version: prev.version + 1,
-    scrollOffset: 0,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Re-exports — the portable view-models, kept importable from `./model` so no
-// TUI file needs to know they moved to src/core/view.
-// ---------------------------------------------------------------------------
-
-export {
-  countProvenance,
-  degreeOf,
-  deriveBacklinks,
-  detailModel,
-  focusModel,
-  focusNeighborhood,
-  formatTreeMeta,
-  graphRoots,
-  healthModel,
-  listLabel,
-  relTime,
-  treeEmptyHint,
-  treeRows,
-  type DetailLinkRow,
-  type DetailMetaRow,
-  type DetailModel,
-  type FocusGroup,
-  type FocusModel,
-  type FocusRow,
-  type HealthModel,
-  type HealthRow,
-  type HealthSection,
-  type ProvenanceCounts,
-  type SelectableRow,
-  type TreeMeta,
-  type TreeRow,
-  type TreeState,
-} from "../../../core/view";
-
-// Re-export theme helpers some tests reach for.
-export { provenanceStyle, type ProvenanceStyle };

package/src/pi/viewer/tui/openNote.ts

@@ -1,11 +0,0 @@
-/**
- * Compatibility re-export.
- *
- * The implementation moved to `src/core/openInEditor.ts` (weave-workspace
- * §5.3): the browser workspace's `POST /api/open` needs it and
- * `src/web/server/**` may not import `src/pi`. Keeping this module as a
- * one-line re-export means `run.ts` and every TUI test kept working without
- * an edit; there is nothing TUI-specific left to live here.
- */
-
-export { openNoteCommand, openNoteInEditor } from "../../../core/openInEditor";

package/src/pi/viewer/tui/run.ts

@@ -1,71 +0,0 @@
-/**
- * runWeaveViewTui — wires the workspace explorer into a pi session
- * (weave-view-tui-design §2, §4.1, §3.2).
- *
- * Guards (interactive terminal only), builds the graph from disk in the
- * handler, then hands a ready workspace explorer to `ctx.ui.custom` so the
- * explorer owns input for its whole lifetime. After `done(null)` resolves,
- * the workspace status line is refreshed. Dependencies are injected so the
- * component never touches a real terminal directly.
- */
-
-import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-import {
-  buildCurrentGraph,
-  readNoteForView,
-  readOkfFileForView,
-  resolveVaultRoot,
-} from "../../../core";
-import { openNoteInEditor } from "./openNote";
-import { WeaveWorkspace } from "./workspaceRoot";
-import type { WeaveLoaders, WeaveTheme, WeaveTui } from "./surface/base";
-import { getWorkspaceStatus, formatStatusLine } from "../../../core";
-
-/** Open the in-terminal knowledge explorer. Returns when the explorer closes. */
-export async function runWeaveViewTui(ctx: ExtensionCommandContext): Promise<void> {
-  // Guard: the TUI needs an interactive terminal (design §2).
-  if (!ctx.hasUI || ctx.mode !== "tui") {
-    ctx.ui.notify(
-      "pi-weave: '/weave-view' needs an interactive terminal to open the in-terminal explorer.",
-      "warning",
-    );
-    return;
-  }
-
-  const cwd = ctx.cwd;
-  const vaultRoot = resolveVaultRoot();
-  const model = await buildCurrentGraph(cwd, vaultRoot);
-
-  const loaders: WeaveLoaders = {
-    loadNote: (slug) => readNoteForView(vaultRoot, slug),
-    loadOkf: (rel) => readOkfFileForView(cwd, rel),
-    openNote: (slug) => openNoteInEditor(vaultRoot, slug),
-    rebuild: () => buildCurrentGraph(cwd, vaultRoot),
-  };
-
-  await ctx.ui.custom(
-    (tui, theme, _keybindings, done) => {
-      const explorer = new WeaveWorkspace({
-        model,
-        theme: theme as unknown as WeaveTheme,
-        tui: tui as unknown as WeaveTui,
-        loaders,
-        done,
-        rows: tui.terminal.rows,
-      });
-      return explorer;
-    },
-    // Full-screen, not an overlay (design §4.1).
-  );
-
-  // Refresh the status line after close (a /weave-scan may have landed meanwhile).
-  const status = await getWorkspaceStatus(ctx.cwd);
-  let theme: { fg?: (slot: string, text: string) => string } | undefined;
-  try {
-    theme = (ctx.ui as unknown as { theme?: { fg?: (slot: string, text: string) => string } })?.theme;
-  } catch {
-    // ignore
-  }
-  const indicator = theme?.fg ? theme.fg("dim", "○") : "○";
-  ctx.ui.setStatus("weave", `${indicator} ${formatStatusLine(status)}`);
-}

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

@@ -1,203 +0,0 @@
-/**
- * surface/base.ts — the shared Pane<Surface> wrapper (weave-view-tui-v2 §6).
- *
- * A **Surface** is a harness-free, self-owned component: it holds its own
- * selection/scroll/filter/expansion state, renders its lines, and handles its
- * own keys. Surfaces share the GraphModel, BodyStore, and loaders via a
- * `SurfaceContext`. A **Pane** is a `Component` that hosts a Surface inside a
- * bordered Box with a title and a focus ring (accent when active, dim `line`
- * when inactive — conveyed by border + a leading `◆`, not color alone, per
- * §10).
- *
- * The pane owns scrolling via the injected scroll/offset on the surface; the
- * workspace root routes input to the single active pane's surface.
- */
-
-import { truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
-import type { GraphModel } from "../../../../core/graph/model";
-import { BodyStore } from "../bodyStore";
-import type { ViewNote } from "../../../../core/graph/current";
-import type { SurfaceKind } from "../workspace";
-import type { ThemeSlot } from "../theme";
-
-/** Minimal theme surface shared by the workspace root and its surfaces. */
-export interface WeaveTheme {
-  fg(slot: ThemeSlot, text: string): string;
-  bg(slot: "selectedBg", text: string): string;
-  bold(text: string): string;
-}
-
-/** Minimal TUI surface shared by the workspace root and its adapter. */
-export interface WeaveTui {
-  requestRender(force?: boolean): void;
-  terminal: { rows: number; columns: number };
-}
-
-/** Injected readers/actions bound to the vault and repository by run.ts. */
-export interface WeaveLoaders {
-  loadNote: (slug: string) => Promise<ViewNote | null>;
-  loadOkf: (rel: string) => Promise<{ path: string; body: string } | null>;
-  openNote: (slug: string) => Promise<boolean>;
-  rebuild: () => Promise<GraphModel>;
-}
-
-/** A cross-pane navigation request a surface emits (resolved by the root). */
-export type SurfaceEvent =
-  | { type: "openDetail"; id: string }
-  | { type: "focusNode"; id: string }
-  | { type: "openEditor"; id: string };
-
-/** A surface emits events (e.g. "open detail") that the workspace root resolves. */
-export type SurfaceEventHandler = (event: SurfaceEvent) => void;
-
-/** Shared, session-level deps every surface reads. */
-export interface SurfaceContext {
-  model: GraphModel;
-  theme: WeaveTheme;
-  loaders: WeaveLoaders;
-  bodies: BodyStore;
-  /** Reference clock (epoch ms); defaults to Date.now at the root. */
-  now: () => number;
-}
-
-/** A surface can also be constructed with a render callback (test seam). */
-export interface SurfaceInit {
-  context: SurfaceContext;
-  /** Emit a cross-pane navigation event. */
-  onEvent?: SurfaceEventHandler;
-}
-
-/** What a surface component must expose on top of the pi-tui Component contract. */
-export interface Surface extends Component {
-  /** The surface kind this hosts. */
-  readonly kind: SurfaceKind;
-  /** Called by the workspace root when focus moves to/from this surface. */
-  setFocused(focused: boolean): void;
-  /** The pane title (surface name), shown in the border. */
-  title(): string;
-  /**
-   * Called after a refresh rebuilds the model, so a surface bound to a node
-   * that no longer exists can rebind to a survivor instead of showing
-   * "(not found)". Optional — surfaces with no node binding omit it.
-   */
-  rebind?(model: GraphModel): void;
-}
-
-/** Minimal theme surface the pane chrome needs. */
-export interface PaneTheme {
-  fg(slot: ThemeSlot, text: string): string;
-  bold(text: string): string;
-}
-
-/** A selectable row within a rendered surface (mirrors model.SelectableRow). */
-export interface PaneRow {
-  id: string;
-  /** Node id a row jumps to on enter (links/backlinks/neighbors). */
-  target?: string;
-}
-
-/** The render result of a surface: lines plus the selectable rows. */
-export interface SurfaceRender {
-  lines: string[];
-  rows: PaneRow[];
-}
-
-/** A generic selectable, windowed body builder used by the surfaces. */
-export function windowLines(
-  lines: string[],
-  selLine: number,
-  scrollOffset: number,
-  window: number,
-  marker: (text: string) => string,
-): string[] {
-  const win = Math.max(1, window);
-  let offset = scrollOffset;
-  if (selLine >= 0) {
-    if (selLine < offset) offset = selLine;
-    else if (selLine >= offset + win) offset = selLine - win + 1;
-  }
-  offset = Math.max(0, Math.min(offset, Math.max(0, lines.length - win)));
-  const out: string[] = [];
-  const end = Math.min(lines.length, offset + win);
-  for (let i = offset; i < end; i++) {
-    const ln = lines[i]!;
-    out.push(i === selLine ? marker(ln) : `  ${ln}`);
-  }
-  return out;
-}
-
-/**
- * Pane — a bordered Box hosting a Surface. Renders a title + focus ring on
- * the first line, then the surface's (windowed) lines. This is the v1 single
- * pane chrome lifted into a reusable wrapper; the workspace root instantiates
- * one Pane per pane node.
- */
-export class Pane implements Component {
-  private readonly surface: Surface;
-  private readonly theme: PaneTheme;
-  private readonly borderFn: (slot: ThemeSlot, text: string) => string;
-  /** Current viewport height in rows (for windowing). */
-  rows = 24;
-  focused = false;
-  private cacheKey = "";
-
-  constructor(
-    surface: Surface,
-    theme: PaneTheme,
-    // Bind through the theme object: a bare `theme.fg` default would detach
-    // `this`, so the real pi theme's `fg` (which reads `this.fgColors.get(...)`)
-    // would crash with "Cannot read properties of undefined (reading 'get')".
-    borderFn: (slot: ThemeSlot, text: string) => string = (slot, text) => theme.fg(slot, text),
-  ) {
-    this.surface = surface;
-    this.theme = theme;
-    this.borderFn = borderFn;
-  }
-
-  get surfaceComponent(): Surface {
-    return this.surface;
-  }
-
-  setFocused(focused: boolean): void {
-    this.focused = focused;
-    this.surface.setFocused(focused);
-  }
-
-  invalidate(): void {
-    this.cacheKey = "";
-    this.surface.invalidate();
-  }
-
-  render(width: number): string[] {
-    const inner = Math.max(2, width - 2);
-    // The surface already windows + selection-marks its own lines (each
-    // surface owns its scroll/selection state). The pane only wraps them in a
-    // border and PADS to fill its allocated height so the multi-pane view looks clean —
-    // it must NOT re-window (that double-applies the indent/marker and corrupts
-    // the layout). Each body line is sliced/padded to `inner` so borders align.
-    const surfaceLines = this.surface.render(inner);
-    const title = this.surface.title();
-    const active = this.focused;
-    const borderSlot = active ? "accent" : "dim";
-    const marker = active ? "◆ " : "  ";
-    const titleText = `${marker}${title}  `;
-    const top = `${this.borderFn(borderSlot, "┌")}${this.borderFn("dim", "─".repeat(inner))}${this.borderFn(borderSlot, "┐")}`;
-    const titleVis = visibleWidth(titleText);
-    const titleLine = `${this.borderFn(borderSlot, "│")}${this.theme.bold(titleText)}${" ".repeat(Math.max(0, inner - titleVis))}${this.borderFn(borderSlot, "│")}`;
-    // top + title + bottom = 3 fixed lines; body fills the rest so both panes
-    // in a multi-pane render the same height.
-    const bodyRows = Math.max(0, this.rows - 3);
-    const out = [top, titleLine];
-    for (let i = 0; i < bodyRows; i++) {
-      const ln = surfaceLines[i] ?? "";
-      const slice = visibleWidth(ln) > inner ? truncateToWidth(ln, inner) : ln;
-      const pad = Math.max(0, inner - visibleWidth(slice));
-      out.push(`${this.borderFn(borderSlot, "│")}${slice}${" ".repeat(pad)}${this.borderFn(borderSlot, "│")}`);
-    }
-    const bottom = `${this.borderFn(borderSlot, "└")}${this.borderFn("dim", "─".repeat(inner))}${this.borderFn(borderSlot, "┘")}`;
-    out.push(bottom);
-    return out;
-  }
-}
-
-export type { Component, SurfaceKind };