@visual-z/xeno 0.8.4 → 0.9.0

package/src/tui/ui/ink.ts

@@ -1,210 +0,0 @@
-/**
- * Terminal-owned colour (docs/tasks/refactor-tui-terminal-colors.md). Pure.
- *
- * The terminal already has a palette the user chose, often with transparency
- * and blur behind it. Painting our own background defeats both, and fixed RGB
- * accents clash with whatever palette is underneath. So the view asks the
- * terminal (OSC 4/10/11 via OpenTUI) and derives every role from the answer:
- *
- *   text        the terminal's own foreground (SGR 39), never a guess
- *   background  the terminal's own background (SGR 49): nothing is painted
- *   accents     one of the 16 slots, picked for contrast and hue
- *   greys       the foreground blended toward the background, as faint as a
- *               contrast target allows (Codex styles.md does the same)
- *
- * When the terminal does not answer, a dark/light hint picks the slots and
- * fixed greys. Semantic colour still only marks glyphs and rules; it never
- * colours body text (D11 keeps green/red for logged outcomes).
- */
-
-/** How a colour is emitted. Indexed and default colours follow the terminal if its palette changes. */
-export type InkSpec =
-  | { readonly kind: "default" }
-  | { readonly kind: "index"; readonly index: number }
-  | { readonly kind: "rgb"; readonly hex: string };
-
-export interface TerminalPalette {
-  readonly foreground: string;
-  readonly background: string;
-  /** The 16 ANSI slots as #rrggbb. */
-  readonly slots: readonly string[];
-  /** The terminal's own selection colours (OSC 17 / 19), when it reports them. */
-  readonly highlight?: { readonly background: string; readonly foreground: string };
-}
-
-export const INK_ROLES = ["text", "muted", "edge", "line", "accent", "success", "error", "warning", "reasoning", "code"] as const;
-export type InkRole = (typeof INK_ROLES)[number];
-export type InkSet = { readonly [K in InkRole]: InkSpec } & {
-  readonly background: InkSpec;
-  /** Selected text: the terminal's selection colours, else an inverse of its own ground (feat-tui-copy-selection DoD 5). */
-  readonly selectionBg: InkSpec;
-  readonly selectionFg: InkSpec;
-}
-
-/**
- * Contrast targets. 4.5:1 is WCAG AA for text and 3:1 for UI components;
- * 1.8:1 for decorative rules is an assumption (visible, never louder than text).
- * A terminal whose own foreground is weaker than these gets proportionally
- * lower targets, so muted text never becomes louder than body text.
- */
-const MUTED = { target: 4.5, share: 0.62 };
-const EDGE = { target: 3, share: 0.42 };
-const LINE = { target: 1.8, share: 0.3 };
-/** Minimum contrast for an accent glyph against the background (WCAG non-text). */
-const ACCENT_CONTRAST = 3;
-/** Below this saturation a slot is a grey, not a hue (Solarized's bright slots). Assumed. */
-const CHROMATIC = 0.15;
-/** A bright slot stands in for its normal slot only within this hue distance. Assumed. */
-const SAME_HUE_DEGREES = 40;
-
-/** [normal, bright] slot pairs per role, in preference order. */
-const SLOTS: Readonly<Record<Exclude<InkRole, "text" | "muted" | "edge" | "line">, readonly (readonly [number, number])[]>> = {
-  accent: [[4, 12], [6, 14]],
-  success: [[2, 10]],
-  error: [[1, 9]],
-  warning: [[3, 11]],
-  reasoning: [[5, 13]],
-  code: [[6, 14]],
-};
-
-/** Greys used when the terminal does not report its palette. Chosen for ≥ 4.5 / 3 / 1.6 on typical dark (#1e1e1e) and light (#ffffff) grounds. */
-const FALLBACK_GREYS = {
-  dark: { muted: "#9a9a9a", edge: "#6e6e6e", line: "#4a4a4a" },
-  light: { muted: "#6a6a6a", edge: "#949494", line: "#c8c8c8" },
-} as const;
-
-export function terminalInks(palette: TerminalPalette | null, hint: "dark" | "light"): InkSet {
-  const valid = palette !== null && isHex(palette.foreground) && isHex(palette.background) && palette.slots.length >= 16 && palette.slots.slice(0, 16).every(isHex);
-  if (!valid) return fallbackInks(hint);
-  const { foreground: fg, background: bg } = palette;
-  const dark = luminance(bg) < luminance(fg);
-  const c = contrast(fg, bg);
-  const pick = (pairs: readonly (readonly [number, number])[]): InkSpec => pickSlot(palette.slots, pairs, dark, bg);
-  const highlight = palette.highlight && isHex(palette.highlight.background) && isHex(palette.highlight.foreground) ? palette.highlight : undefined;
-  return {
-    background: { kind: "default" },
-    text: { kind: "default" },
-    selectionBg: { kind: "rgb", hex: highlight?.background ?? fg },
-    selectionFg: { kind: "rgb", hex: highlight?.foreground ?? bg },
-    muted: { kind: "rgb", hex: faintest(fg, bg, Math.min(MUTED.target, MUTED.share * c)) },
-    edge: { kind: "rgb", hex: faintest(fg, bg, Math.min(EDGE.target, EDGE.share * c)) },
-    line: { kind: "rgb", hex: faintest(fg, bg, Math.min(LINE.target, LINE.share * c)) },
-    accent: pick(SLOTS.accent), success: pick(SLOTS.success), error: pick(SLOTS.error),
-    warning: pick(SLOTS.warning), reasoning: pick(SLOTS.reasoning), code: pick(SLOTS.code),
-  };
-}
-
-function fallbackInks(hint: "dark" | "light"): InkSet {
-  const greys = FALLBACK_GREYS[hint];
-  // Without a palette, a bright slot is the safer guess on dark grounds and the normal slot on light ones.
-  const slot = (pair: readonly [number, number]): InkSpec => ({ kind: "index", index: hint === "dark" ? pair[1] : pair[0] });
-  return {
-    background: { kind: "default" }, text: { kind: "default" },
-    // Inverse through the terminal's own black and white slots: its ground colours are unknown here.
-    selectionBg: { kind: "index", index: hint === "dark" ? 15 : 0 }, selectionFg: { kind: "index", index: hint === "dark" ? 0 : 15 },
-    muted: { kind: "rgb", hex: greys.muted }, edge: { kind: "rgb", hex: greys.edge }, line: { kind: "rgb", hex: greys.line },
-    accent: slot(SLOTS.accent[0]!), success: slot(SLOTS.success[0]!), error: slot(SLOTS.error[0]!),
-    warning: slot(SLOTS.warning[0]!), reasoning: slot(SLOTS.reasoning[0]!), code: slot(SLOTS.code[0]!),
-  };
-}
-
-function pickSlot(slots: readonly string[], pairs: readonly (readonly [number, number])[], dark: boolean, bg: string): InkSpec {
-  const candidates: number[] = [];
-  for (const [normal, bright] of pairs) {
-    const normalOk = saturation(slots[normal]!) > CHROMATIC;
-    const brightOk = saturation(slots[bright]!) > CHROMATIC && sameHue(slots[bright]!, slots[normal]!);
-    for (const index of dark ? [bright, normal] : [normal, bright]) if (index === bright ? brightOk : normalOk) candidates.push(index);
-  }
-  const readable = candidates.find(index => contrast(slots[index]!, bg) >= ACCENT_CONTRAST);
-  if (readable !== undefined) return { kind: "index", index: readable };
-  // Every candidate is too faint on this ground: keep the first hue, pushed away from the background.
-  if (candidates.length) return { kind: "rgb", hex: deepen(slots[candidates[0]!]!, bg, ACCENT_CONTRAST) };
-  // No chromatic slot at all (a monochrome palette): the terminal's own slot is still the honest choice.
-  return { kind: "index", index: pairs[0]![0] };
-}
-
-// ----------------------------------------------------------------- colour math
-
-export function isHex(value: string): boolean { return /^#[0-9a-fA-F]{6}$/.test(value); }
-
-function channels(hex: string): [number, number, number] {
-  const n = Number.parseInt(hex.slice(1), 16);
-  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
-}
-
-function toHex(values: readonly number[]): string {
-  return `#${values.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("")}`;
-}
-
-/** WCAG relative luminance. */
-export function luminance(hex: string): number {
-  const linear = (v: number) => { const s = v / 255; return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; };
-  const [r, g, b] = channels(hex);
-  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
-}
-
-/** WCAG contrast ratio, 1–21. */
-export function contrast(a: string, b: string): number {
-  const x = luminance(a), y = luminance(b);
-  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
-}
-
-/** `share` of `from` over `to` (1 = from, 0 = to). */
-export function mix(from: string, to: string, share: number): string {
-  const a = channels(from), b = channels(to);
-  return toHex(a.map((v, i) => b[i]! + (v - b[i]!) * share));
-}
-
-export function saturation(hex: string): number {
-  const values = channels(hex).map(v => v / 255);
-  const max = Math.max(...values), min = Math.min(...values);
-  return max === 0 ? 0 : (max - min) / max;
-}
-
-export function hue(hex: string): number {
-  const [r, g, b] = channels(hex).map(v => v / 255) as [number, number, number];
-  const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
-  if (d === 0) return 0;
-  const sector = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
-  return (sector * 60 + 360) % 360;
-}
-
-export function sameHue(a: string, b: string): boolean {
-  const d = Math.abs(hue(a) - hue(b));
-  return Math.min(d, 360 - d) <= SAME_HUE_DEGREES;
-}
-
-/**
- * The blend of fg into bg closest to bg that still reaches `target` against
- * bg, in 1% steps. Never louder than fg itself: a channel-wise blend is not
- * monotone in luminance when fg and bg differ in hue, so an intermediate mix
- * can out-contrast fg, and a grey must not compete with body text.
- */
-export function faintest(fg: string, bg: string, target: number): string {
-  const ceiling = contrast(fg, bg);
-  if (ceiling <= target) return fg;
-  for (let step = 1; step <= 100; step++) {
-    const color = mix(fg, bg, step / 100);
-    const c = contrast(color, bg);
-    if (c >= target) return c <= ceiling ? color : fg;
-  }
-  return fg;
-}
-
-/**
- * Push a colour toward white (dark ground) or black (light ground) until it
- * reaches `target` against bg, in 5% steps. Mixing with white or black
- * preserves hue exactly, and luminance moves monotonically away from bg, so
- * a too-faint yellow becomes a darker yellow rather than some other colour.
- * Either extreme reaches at least 4.58:1 against any ground, so any target up
- * to that is always met.
- */
-export function deepen(color: string, bg: string, target: number): string {
-  if (contrast(color, bg) >= target) return color;
-  const extreme = contrast("#ffffff", bg) >= contrast("#000000", bg) ? "#ffffff" : "#000000";
-  for (let step = 1; step <= 20; step++) {
-    const next = mix(extreme, color, step / 20);
-    if (contrast(next, bg) >= target) return next;
-  }
-  return extreme;
-}

package/src/tui/ui/items.ts

@@ -1,42 +0,0 @@
-/**
- * What the message stream shows, as plain data. The app projects its log
- * into these (apps/ui/project.ts); the view never sees log events.
- *
- * `rev` changes whenever an item's content changes; equal id + rev means the
- * renderable can be reused untouched, which keeps long sessions cheap.
- */
-export type ToolStatus = "pending" | "ok" | "error";
-
-/** A picture the view may draw: its blob address, name and pixel size (from the log's ImageRef). */
-export interface ImageView { readonly sha256: string; readonly name: string; readonly width: number; readonly height: number;
-  /** The blob a click opens when it differs from `sha256`: what was attached, before any reduction for the model. */
-  readonly full?: string }
-
-export type ViewItem =
-  | { readonly kind: "user"; readonly id: string; readonly rev: string; readonly text: string; readonly images?: readonly ImageView[]; readonly interrupted?: boolean }
-  | { readonly kind: "assistant"; readonly id: string; readonly rev: string; readonly text: string; readonly streaming?: boolean }
-  | { readonly kind: "thinking"; readonly id: string; readonly rev: string; readonly text: string; readonly streaming?: boolean; readonly label?: string }
-  | { readonly kind: "tool"; readonly id: string; readonly rev: string; readonly name: string; readonly summary: string; readonly status: ToolStatus;
-      /** Evidence shown right-aligned: "exit 0", "+3 −1", "12 lines". Never the model's own claim (D11). */
-      readonly evidence?: string; readonly preview?: readonly string[]; readonly images?: readonly ImageView[]; readonly detail: (width: number) => string[] }
-  | { readonly kind: "notice"; readonly id: string; readonly rev: string; readonly text: string; readonly tone?: "info" | "success" | "warning" | "error" }
-  | { readonly kind: "segment"; readonly id: string; readonly rev: string; readonly label: string; readonly detail?: string }
-  | { readonly kind: "lines"; readonly id: string; readonly rev: string; readonly render: (width: number) => string[] };
-
-/**
- * Pure: what the reader missed between two projections. `added` counts
- * items that did not exist before (a streaming reply growing is one
- * message, not one per delta); `changed` says whether anything already
- * shown changed. The session-start rule is chrome and never counts.
- */
-export function unseen(previous: readonly ViewItem[], next: readonly ViewItem[]): { added: number; changed: boolean } {
-  const before = new Map(previous.map(item => [item.id, item.rev]));
-  let added = 0, changed = false;
-  for (const item of next) {
-    if (item.id === "session-start") continue;
-    const rev = before.get(item.id);
-    if (rev === undefined) added++;
-    else if (rev !== item.rev) changed = true;
-  }
-  return { added, changed };
-}

package/src/tui/ui/keys.ts

@@ -1,40 +0,0 @@
-/**
- * One key shape for the whole view. OpenTUI's KeyEvent is normalised into a
- * chord string in core/keymap's canonical order (ctrl+alt+shift+super+key)
- * so bindings parsed from settings compare by string equality.
- */
-import type { KeyEvent } from "@opentui/core";
-
-export interface KeyPress {
-  readonly chord: string;
-  readonly name: string;
-  readonly ctrl: boolean;
-  readonly alt: boolean;
-  readonly shift: boolean;
-  /** Printable text this key inserts, or "" for a control key. */
-  readonly text: string;
-}
-
-const RENAME: Readonly<Record<string, string>> = { return: "enter", esc: "escape", " ": "space" };
-
-export function keyPress(event: Pick<KeyEvent, "name" | "ctrl" | "meta" | "shift" | "sequence"> & { option?: boolean; super?: boolean }): KeyPress {
-  const raw = (event.name || "").toLowerCase();
-  const name = RENAME[raw] ?? raw;
-  const alt = Boolean(event.meta || event.option);
-  const sup = Boolean(event.super);
-  const printable = !event.ctrl && !alt && !sup && typeof event.sequence === "string" && event.sequence.length > 0 && !/[\x00-\x1f\x7f]/.test(event.sequence) && !event.sequence.startsWith("\x1b");
-  const parts: string[] = [];
-  if (event.ctrl) parts.push("ctrl");
-  if (alt) parts.push("alt");
-  // Shift on a printable character is already in the character itself.
-  if (event.shift && !(printable && name.length === 1)) parts.push("shift");
-  if (sup) parts.push("super");
-  parts.push(name);
-  return { chord: parts.join("+"), name, ctrl: Boolean(event.ctrl), alt, shift: Boolean(event.shift), text: printable ? event.sequence : "" };
-}
-
-export type Bindings = Readonly<Record<string, readonly string[]>>;
-
-export function bound(bindings: Bindings, action: string, key: KeyPress): boolean {
-  return (bindings[action] ?? []).includes(key.chord);
-}

package/src/tui/ui/layout.ts

@@ -1,74 +0,0 @@
-/**
- * Where status lives at a given terminal size (docs/tasks/refactor-tui-dock-layout.md). Pure.
- *
- *   sidebar  ≥ 110 cols and ≥ 20 rows   right column plus compact provider header
- *   topbar   80–109 cols, or a wide but short terminal (≥ 18 rows)   one row on top
- *   bare     everything else            the input box's bottom edge only;
- *                                       session and branch go to the terminal title
- *
- * The input box's bottom edge carries model and thinking in every tier, and
- * the context share wherever there is no sidebar to hold it. Every status
- * field has exactly one place per tier, so nothing is shown twice.
- *
- * The 110-column threshold is the author's choice (2026-10-06), set so the
- * main column keeps the 75 columns OpenCode keeps beside its 42-column sidebar
- * at its 121-column threshold (packages/tui routes/session/index.tsx).
- */
-import { assertNever } from "../exhaustive.ts";
-
-export type Tier = "sidebar" | "topbar" | "bare";
-
-export interface ScreenLayout {
-  readonly tier: Tier;
-  /** Columns of the sidebar including its separator; 0 when hidden. */
-  readonly sidebarWidth: number;
-  readonly mainWidth: number;
-  readonly topbar: boolean;
-}
-
-export const SIDEBAR_MIN_COLUMNS = 110;
-export const SIDEBAR_MIN_ROWS = 20;
-export const TOPBAR_MIN_COLUMNS = 80;
-export const TOPBAR_MIN_ROWS = 18;
-/** The main column never gets narrower than this beside the sidebar. */
-export const MAIN_MIN_COLUMNS = 75;
-
-/** Sidebar content width (without the separator column). Wider terminals give it more room; assumed steps. */
-export function sidebarContentWidth(cols: number): number {
-  return cols >= 150 ? 42 : cols >= 130 ? 38 : 34;
-}
-
-export function screenLayout(cols: number, rows: number, sidebarWanted = true): ScreenLayout {
-  const c = Math.max(0, Math.floor(cols)), r = Math.max(0, Math.floor(rows));
-  if (sidebarWanted && c >= SIDEBAR_MIN_COLUMNS && r >= SIDEBAR_MIN_ROWS) {
-    const sidebarWidth = sidebarContentWidth(c) + 1;
-    return { tier: "sidebar", sidebarWidth, mainWidth: c - sidebarWidth, topbar: true };
-  }
-  if (c >= TOPBAR_MIN_COLUMNS && r >= TOPBAR_MIN_ROWS) return { tier: "topbar", sidebarWidth: 0, mainWidth: c, topbar: true };
-  return { tier: "bare", sidebarWidth: 0, mainWidth: c, topbar: false };
-}
-
-export const STATUS_FIELDS = ["mode", "provider", "activity", "git", "model", "thinking", "context", "goal", "title", "workspace", "branch", "usage", "cost", "handoff", "tasks", "files", "background", "resources", "extension"] as const;
-export type StatusField = (typeof STATUS_FIELDS)[number];
-/** Screen surfaces only; the terminal title is outside the frame and listed separately. */
-export type Place = "sidebar" | "topbar" | "topEdge" | "bottomEdge" | "hidden";
-
-/**
- * The one place each field takes in a tier. Hidden fields stay one command
- * away (/usage, /state, /tasks, /session); the terminal title also carries
- * session and branch in every tier, outside the frame.
- */
-export function placement(tier: Tier): Readonly<Record<StatusField, Place>> {
-  switch (tier) {
-    case "sidebar":
-      return { mode: "bottomEdge", provider: "topbar", activity: "topEdge", git: "sidebar", model: "bottomEdge", thinking: "bottomEdge", context: "sidebar", goal: "sidebar", title: "sidebar", workspace: "sidebar", branch: "sidebar",
-        usage: "sidebar", cost: "sidebar", handoff: "sidebar", tasks: "sidebar", files: "sidebar", background: "sidebar", resources: "sidebar", extension: "sidebar" };
-    case "topbar":
-      return { mode: "bottomEdge", provider: "topbar", activity: "topEdge", git: "hidden", model: "bottomEdge", thinking: "bottomEdge", context: "bottomEdge", goal: "bottomEdge", title: "topbar", workspace: "topbar", branch: "topbar",
-        usage: "hidden", cost: "topbar", handoff: "topbar", tasks: "hidden", files: "hidden", background: "topbar", resources: "hidden", extension: "topbar" };
-    case "bare":
-      return { mode: "bottomEdge", provider: "hidden", activity: "topEdge", git: "hidden", model: "bottomEdge", thinking: "bottomEdge", context: "bottomEdge", goal: "bottomEdge", title: "hidden", workspace: "hidden", branch: "hidden",
-        usage: "hidden", cost: "hidden", handoff: "hidden", tasks: "hidden", files: "hidden", background: "hidden", resources: "hidden", extension: "hidden" };
-    default: return assertNever(tier, "placement");
-  }
-}

package/src/tui/ui/list-model.ts

@@ -1,86 +0,0 @@
-/**
- * What a list dialog shows for a query. Pure.
- *
- * Every picker in the UI (palette, model, login, resume, tree, settings, …)
- * is the same shape: items grouped into sections, a fuzzy query, one
- * selected row, optional checkboxes. One model means one set of keys and
- * one place where "Enter confirms the row under the cursor" is proven.
- *
- * With an empty query, items keep their given order and each new section
- * gets a header row (OpenCode's dialog-model). With a query, sections
- * flatten into one ranked list: grouping a three-hit search only adds noise.
- */
-import { fuzzyMatch } from "../fuzzy.ts";
-
-export interface ListItem {
-  readonly value: string;
-  readonly label: string;
-  readonly description?: string;
-  readonly section?: string;
-  /** Right-aligned hint: a key chord, "current", a count. */
-  readonly hint?: string;
-  /** Extra text matched by the query but not shown. */
-  readonly keywords?: string;
-  readonly disabled?: boolean;
-  /** Indentation (tree rows). */
-  readonly depth?: number;
-}
-
-export type ListRow =
-  | { readonly kind: "header"; readonly text: string }
-  | { readonly kind: "item"; readonly item: ListItem; readonly index: number };
-
-export function filterItems(items: readonly ListItem[], query: string): ListItem[] {
-  const q = query.trim();
-  if (!q) return [...items];
-  const ranked: { item: ListItem; score: number; index: number }[] = [];
-  items.forEach((item, index) => {
-    const label = fuzzyMatch(item.label, q);
-    const rest = fuzzyMatch(`${item.label} ${item.description ?? ""} ${item.section ?? ""} ${item.keywords ?? ""}`, q);
-    // A hit in the label outranks a hit that needed the description.
-    const score = label !== null ? label : rest !== null ? rest + 1000 : null;
-    if (score !== null) ranked.push({ item, score, index });
-  });
-  ranked.sort((a, b) => a.score - b.score || a.index - b.index);
-  return ranked.map(entry => entry.item);
-}
-
-export function listRows(items: readonly ListItem[], query: string): ListRow[] {
-  const filtered = filterItems(items, query);
-  const rows: ListRow[] = [];
-  let section: string | undefined;
-  const grouped = !query.trim();
-  filtered.forEach((item, index) => {
-    if (grouped && item.section && item.section !== section) rows.push({ kind: "header", text: item.section });
-    section = item.section;
-    rows.push({ kind: "item", item, index });
-  });
-  return rows;
-}
-
-/** Next selectable index (wrapping), skipping disabled items. -1 when none. */
-export function step(items: readonly ListItem[], from: number, delta: number): number {
-  const n = items.length;
-  if (n === 0) return -1;
-  for (let k = 1; k <= n; k++) {
-    const candidate = (((from + delta * k) % n) + n) % n;
-    if (!items[candidate]!.disabled) return candidate;
-  }
-  return -1;
-}
-
-/** First enabled index at or after `from`, used when a query changes the list. */
-export function firstEnabled(items: readonly ListItem[], from = 0): number {
-  for (let i = Math.max(0, from); i < items.length; i++) if (!items[i]!.disabled) return i;
-  for (let i = 0; i < Math.min(from, items.length); i++) if (!items[i]!.disabled) return i;
-  return -1;
-}
-
-/** Rows to draw so the selected item stays visible, keeping its header when it fits. */
-export function windowRows(rows: readonly ListRow[], selected: number, height: number): { start: number; end: number } {
-  if (rows.length <= height) return { start: 0, end: rows.length };
-  const at = Math.max(0, rows.findIndex(row => row.kind === "item" && row.index === selected));
-  let start = Math.max(0, Math.min(at - Math.floor(height / 2), rows.length - height));
-  if (height > 1 && start > 0 && rows[at - 1]?.kind === "header" && at - 1 < start) start = at - 1;
-  return { start, end: Math.min(rows.length, start + height) };
-}

package/src/tui/ui/list-view.ts

@@ -1,172 +0,0 @@
-/**
- * The one list component: grouped rows, selection, optional checkboxes,
- * right-aligned hints, and a search field on the bottom row — the row the
- * draft occupies when no picker is open, so the input box keeps its shape
- * (docs/tasks/refactor-tui-dock-layout.md). State lives in list-model.ts
- * (pure); this class draws it and exposes the moves the dialog host routes.
- *
- * Rows are a Canvas: moving the selection repaints cells, not nodes. The
- * search text is a focused Input so cursor, paste and word deletion stay
- * OpenTUI's.
- */
-import { BoxRenderable, InputRenderable, InputRenderableEvents, type RenderContext } from "@opentui/core";
-import { Canvas } from "./canvas.ts";
-import type { UiColors } from "./colors.ts";
-import { clipText, segsWidth, splitLine, type Seg } from "./edge.ts";
-import { filterItems, firstEnabled, listRows, step, windowRows, type ListItem, type ListRow } from "./list-model.ts";
-import type { Line } from "./status.ts";
-
-export interface ListViewOptions {
-  readonly colors: UiColors;
-  readonly rows?: number;
-  readonly search?: boolean;
-  readonly multi?: boolean;
-  readonly placeholder?: string;
-  readonly empty?: string;
-}
-
-/** Visible rows. Ten keeps a picker under half of a 30-row terminal. Assumed. */
-const DEFAULT_ROWS = 10;
-let serial = 0;
-
-export class ListView extends BoxRenderable {
-  private colors: UiColors;
-  private maxRows: number;
-  private readonly multi: boolean;
-  private readonly emptyText: string;
-  readonly searchInput: InputRenderable | undefined;
-  private readonly searchRow: BoxRenderable | undefined;
-  private readonly searchGlyph: Canvas | undefined;
-  private readonly body: Canvas;
-  private items: ListItem[] = [];
-  private filtered: ListItem[] = [];
-  private rowsModel: ListRow[] = [];
-  private selected = -1;
-  readonly checked = new Set<string>();
-  onChange: (() => void) | undefined;
-
-  constructor(ctx: RenderContext, options: ListViewOptions) {
-    const id = `list-${serial++}`;
-    super(ctx, { id, flexDirection: "column", flexShrink: 0 });
-    this.colors = options.colors;
-    this.maxRows = options.rows ?? DEFAULT_ROWS;
-    this.multi = options.multi ?? false;
-    this.emptyText = options.empty ?? "No matches";
-    this.body = new Canvas(ctx, { id: `${id}-rows`, height: 1, flexShrink: 0, colors: this.colors });
-    this.add(this.body);
-    if (options.search !== false) {
-      this.searchRow = new BoxRenderable(ctx, { id: `${id}-search`, flexDirection: "row", height: 1, marginTop: 1, flexShrink: 0 });
-      this.searchGlyph = new Canvas(ctx, { id: `${id}-glyph`, width: 2, height: 1, flexShrink: 0, colors: this.colors });
-      this.searchGlyph.setRows([[{ text: "›", role: "accent", bold: true }]]);
-      this.searchInput = new InputRenderable(ctx, { id: `${id}-input`, flexGrow: 1, placeholder: options.placeholder ?? "Search",
-        textColor: this.colors.text, focusedTextColor: this.colors.text, placeholderColor: this.colors.muted, backgroundColor: "transparent", focusedBackgroundColor: "transparent" });
-      this.searchInput.on(InputRenderableEvents.INPUT, () => this.refilter());
-      this.searchRow.add(this.searchGlyph); this.searchRow.add(this.searchInput);
-      this.add(this.searchRow);
-    }
-    this.onSizeChange = () => this.paint();
-  }
-
-  get query(): string { return this.searchInput?.value ?? ""; }
-  get current(): ListItem | undefined { return this.selected >= 0 ? this.filtered[this.selected] : undefined; }
-  get visibleItems(): readonly ListItem[] { return this.filtered; }
-  /** "3/40" when the list scrolls, for the box's top edge; "" when everything is visible. */
-  get scrollPosition(): string { return this.rowsModel.length > this.maxRows && this.selected >= 0 ? `${this.selected + 1}/${this.filtered.length}` : ""; }
-  /** Plain text of the drawn rows (tests). */
-  get text(): string { return this.body.text; }
-
-  setColors(colors: UiColors): void {
-    this.colors = colors;
-    this.body.setColors(colors);
-    this.searchGlyph?.setColors(colors);
-    if (this.searchInput) {
-      this.searchInput.textColor = colors.text;
-      this.searchInput.focusedTextColor = colors.text;
-      this.searchInput.placeholderColor = colors.muted;
-    }
-  }
-
-  setRowLimit(rows: number): void {
-    const limit = Math.max(1, rows);
-    if (limit === this.maxRows) return;
-    this.maxRows = limit; this.paint();
-  }
-
-  setItems(items: readonly ListItem[], selectedValue?: string): void {
-    const keep = selectedValue ?? this.current?.value;
-    this.items = [...items];
-    this.refilter(keep);
-  }
-
-  setQuery(query: string): void {
-    if (this.searchInput) this.searchInput.value = query;
-    this.refilter();
-  }
-
-  move(delta: number): void {
-    const next = step(this.filtered, this.selected, delta);
-    if (next >= 0) this.selected = next;
-    this.paint();
-  }
-
-  page(delta: number): void {
-    const target = Math.max(0, Math.min(this.filtered.length - 1, this.selected + delta * this.maxRows));
-    this.selected = firstEnabled(this.filtered, target);
-    this.paint();
-  }
-
-  toggle(): void {
-    const item = this.current;
-    if (!this.multi || !item || item.disabled) return;
-    if (this.checked.has(item.value)) this.checked.delete(item.value); else this.checked.add(item.value);
-    this.paint();
-  }
-
-  toggleAllVisible(): void {
-    if (!this.multi) return;
-    const enabled = this.filtered.filter(item => !item.disabled);
-    const all = enabled.every(item => this.checked.has(item.value));
-    for (const item of enabled) { if (all) this.checked.delete(item.value); else this.checked.add(item.value); }
-    this.paint();
-  }
-
-  private refilter(keep?: string): void {
-    this.filtered = filterItems(this.items, this.query);
-    this.rowsModel = listRows(this.items, this.query);
-    const at = keep === undefined ? -1 : this.filtered.findIndex(item => item.value === keep);
-    this.selected = at >= 0 && !this.filtered[at]!.disabled ? at : firstEnabled(this.filtered);
-    this.paint();
-  }
-
-  private paint(): void {
-    const width = Math.max(10, this.width || 60);
-    const lines: Line[] = [];
-    if (this.rowsModel.length === 0) lines.push([{ text: this.emptyText, role: "muted" }]);
-    else {
-      const { start, end } = windowRows(this.rowsModel, this.selected, this.maxRows);
-      for (let r = start; r < end; r++) lines.push(this.line(this.rowsModel[r]!, width));
-    }
-    this.body.height = lines.length;
-    this.body.setRows(lines);
-    this.onChange?.();
-  }
-
-  private line(row: ListRow, width: number): Line {
-    if (row.kind === "header") return [{ text: row.text.toUpperCase(), role: "muted", bold: true }];
-    const item = row.item, selected = row.index === this.selected;
-    const lead: Seg[] = [
-      { text: selected ? "▸ " : "  ", role: "accent", bold: true },
-      ...(this.multi ? [{ text: this.checked.has(item.value) ? "◉ " : "○ ", role: this.checked.has(item.value) ? "success" as const : "muted" as const }] : []),
-      ...(item.depth ? [{ text: "  ".repeat(item.depth), role: "text" as const }] : []),
-    ];
-    const label: Seg = { text: item.label, role: item.disabled ? "muted" : "text", bold: selected };
-    // Keep the actionable identity before optional detail on narrow boxes.
-    const detail: Seg[] = item.description && width >= 60 ? [{ text: `  ${item.description}`, role: "muted" }] : [];
-    const hint: Seg[] = item.hint ? [{ text: item.hint, role: "muted" }] : [];
-    if (!hint.length) return [...lead, label, ...detail];
-    const room = Math.max(4, width - segsWidth(hint) - 1);
-    const left = [...lead, label, ...detail];
-    const fitted = segsWidth(left) <= room ? left : [...lead, { ...label, text: clipText(label.text, Math.max(1, room - segsWidth(lead))) }];
-    return splitLine(width, [{ segs: fitted, priority: 0 }], [{ segs: hint, priority: 1 }], 1);
-  }
-}