@visual-z/xeno 0.2.1 → 0.3.0

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

@@ -0,0 +1,86 @@
+/**
+ * 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

@@ -0,0 +1,172 @@
+/**
+ * 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);
+  }
+}

package/src/tui/ui/mascot.ts

@@ -0,0 +1,67 @@
+/**
+ * The empty-session greeting (docs/tasks/refactor-tui-dock-layout.md). Pure.
+ *
+ *     ▝▖   ▗▘  xeno 0.2.1
+ *     ▐█▙█▟█▌  DeepSeek V4 Pro · high
+ *      ▀▘ ▝▀   ~/Projects/workspace/xeno-tui ⎇ main
+ *
+ * An original 7×3 glyph (xeno: the stranger) drawn with ordinary quadrant
+ * blocks, so no Nerd Font is needed. Its entrance plays once: antennae rise,
+ * wiggle, one blink, then rest. Every frame keeps the same cells, so the
+ * terminal never reflows and a selection is never disturbed. Claude Code's
+ * fullscreen welcome plays a 0.4–1.3 s entrance the same way; Codex and
+ * OpenCode both dropped animations that kept running.
+ */
+import type { Line } from "./status.ts";
+
+export const MASCOT_WIDTH = 7;
+
+const ANTENNAE_UP = "▝▖   ▗▘";
+const ANTENNAE_IN = "▗▘   ▝▖";
+const ANTENNAE_DOWN = " ▖   ▗ ";
+const EYES_OPEN = "▐█▙█▟█▌";
+const EYES_SHUT = "▐█████▌";
+const FEET = " ▀▘ ▝▀ ";
+
+/** The resting pose: what a still terminal and every frame after the entrance show. */
+export const MASCOT: readonly string[] = [ANTENNAE_UP, EYES_OPEN, FEET];
+
+/** 60 ms per frame: about 16 fps, smooth for blocky glyphs without a frame per paint. Assumed. */
+export const MASCOT_FRAME_MS = 60;
+
+/** Asleep, antennae rise, eyes open, wiggle, wiggle, blink, rest. 14 frames = 840 ms, under the 1 s the card allows. */
+const ENTRANCE: readonly (readonly [string, string])[] = [
+  [ANTENNAE_DOWN, EYES_SHUT], [ANTENNAE_DOWN, EYES_SHUT], [ANTENNAE_UP, EYES_SHUT], [ANTENNAE_UP, EYES_OPEN],
+  [ANTENNAE_IN, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_IN, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN],
+  [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_UP, EYES_SHUT], [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN],
+  [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN],
+];
+export const MASCOT_FRAMES = ENTRANCE.length;
+
+/** Frame `n` of the entrance; anything past the end is the resting pose. */
+export function mascotFrame(n: number): readonly string[] {
+  const pose = ENTRANCE[Math.max(0, Math.floor(n))];
+  return pose ? [pose[0], pose[1], FEET] : MASCOT;
+}
+
+export interface Greeting {
+  readonly version: string;
+  /** Model display name and thinking level, or null when no provider can authenticate. */
+  readonly model: string | null;
+  readonly thinking: string;
+  readonly workspace: string;
+  readonly branch: string | null;
+}
+
+/** Three rows: mascot frame, a two-cell gap, then version / model / location. */
+export function greetingLines(greeting: Greeting, frame: readonly string[] = MASCOT): Line[] {
+  const art = (row: number) => ({ text: frame[row] ?? "", role: "accent" as const });
+  const gap = { text: "  ", role: "text" as const };
+  return [
+    [art(0), gap, { text: "xeno", role: "text", bold: true }, { text: ` ${greeting.version}`, role: "muted" }],
+    [art(1), gap, ...(greeting.model
+      ? [{ text: greeting.model, role: "text" as const }, { text: ` · ${greeting.thinking}`, role: "muted" as const }]
+      : [{ text: "No provider connected yet · /login", role: "warning" as const }])],
+    [art(2), gap, { text: greeting.workspace, role: "muted" }, ...(greeting.branch ? [{ text: ` ⎇ ${greeting.branch}`, role: "muted" as const }] : [])],
+  ];
+}