@visual-z/xeno 0.8.4 → 0.9.1

package/src/tui/ui/composer.ts

@@ -1,199 +0,0 @@
-/**
- * The one editor (D20). It lives inside the input box at the bottom of the
- * screen and is never recreated: pickers and forms open in the same box
- * above it and give focus back, so the draft, undo history and cursor stay
- * (docs/tasks/refactor-tui-dock-layout.md DoD 1). Typing, undo and paste are
- * OpenTUI's; submission and history are the app's.
- *
- * Completion is state here and drawn by the screen above the box, where it
- * takes layout space instead of covering the transcript.
- */
-import { BoxRenderable, type CliRenderer } from "@opentui/core";
-import { AtomicDraftArea, type DraftAtom } from "./atomic-draft.ts";
-import { Canvas } from "./canvas.ts";
-import type { UiColors } from "./colors.ts";
-import { draftRows, type DraftRows } from "./draft.ts";
-import type { ListItem } from "./list-model.ts";
-import { emptyHistory, historyPosition, projectHistory, rememberPrompt, stepHistory, type PromptHistory } from "./prompt-history.ts";
-
-export interface Completion {
-  readonly kind: "command" | "argument" | "path";
-  /** Replace text[start, end) with an item's value. */
-  readonly start: number;
-  readonly end: number;
-  readonly items: readonly ListItem[];
-}
-
-/**
- * The tallest the draft grows before it scrolls inside the box: a third of
- * the terminal, at least 5 rows. Peers cap by screen fraction rather than a
- * constant (pi 30% min 5, OpenCode ⅓ min 6, Grok ½, Codex ⅔); a third keeps
- * most of the transcript in view while a paragraph still fits.
- */
-export function draftMaxLines(terminalRows: number): number {
-  return Math.max(5, Math.floor(terminalRows / 3));
-}
-const MAX_LINES = 5;
-export const PLACEHOLDER = "What would you like to work on?";
-
-/**
- * The textarea, plus a hook after each of its frames. The editor scrolls to
- * its cursor while it renders, and its own render() skips renderAfter, so
- * this is the one place the visible part of a tall draft is known.
- */
-export class Composer {
-  /** `›` and the editor. Its height is the editor's own measurement of the wrapped draft. */
-  readonly row: BoxRenderable;
-  readonly area: AtomicDraftArea;
-  private draftRevision = 0;
-  private readonly prompt: Canvas;
-  private completion: Completion | undefined;
-  private completionIndex = 0;
-  private history: PromptHistory = emptyHistory;
-  private maxLines = MAX_LINES;
-  private shape: DraftRows = { rows: 1, above: 0, below: 0 };
-  onChange: ((text: string) => void) | undefined;
-  onCursor: (() => void) | undefined;
-  /** The row count changed (the box above must re-layout). */
-  onResize: (() => void) | undefined;
-  /** Rows hidden above or below the visible draft changed (the box edge shows them). */
-  onOverflow: (() => void) | undefined;
-
-  constructor(renderer: CliRenderer, colors: UiColors) {
-    this.row = new BoxRenderable(renderer, { id: "composer", flexDirection: "row", flexShrink: 0 });
-    this.prompt = new Canvas(renderer, { id: "composer-prompt", width: 2, height: 1, flexShrink: 0, colors });
-    this.prompt.setRows([[{ text: "›", role: "accent", bold: true }]]);
-    const area = new AtomicDraftArea(renderer, {
-      id: "composer-area", flexGrow: 1, minHeight: 1, maxHeight: MAX_LINES, wrapMode: "word",
-      textColor: colors.text, focusedTextColor: colors.text, backgroundColor: "transparent", focusedBackgroundColor: "transparent",
-      selectionBg: colors.selectionBg, selectionFg: colors.selectionFg,
-      placeholder: PLACEHOLDER, placeholderColor: colors.muted,
-      // Enter, Shift+Enter, Up/Down are the app's (submit, history); remove them from the textarea.
-      keyBindings: [{ name: "return", action: "move-left" }, { name: "_", ctrl: true, action: "undo" }, { name: "/", ctrl: true, action: "undo" }],
-    });
-    this.area = area;
-    // Height comes from the editor's native measurement of its wrapped text, capped by
-    // maxHeight (the way OpenCode's prompt grows). Nothing here sets a height, so width
-    // changes re-wrap and re-measure on their own (fix-tui-composer-growth).
-    this.area.onContentChange = () => { this.draftRevision++; this.onChange?.(this.text); };
-    this.area.onCursorChange = () => { this.draftRevision++; this.onCursor?.(); };
-    this.area.onSizeChange = () => this.measured();
-    // Which rows scrolled out of a tall draft is known only after the editor drew itself.
-    area.onRendered = () => this.measured();
-    this.row.add(this.prompt); this.row.add(this.area);
-  }
-
-  get text(): string { return this.area.plainText; }
-  get cursor(): number { return this.area.textCursor; }
-  get revision(): number { return this.draftRevision; }
-  setAtoms(spans: (text: string) => readonly DraftAtom[]): void { this.area.atoms = spans; }
-  get completing(): boolean { return this.completion !== undefined && this.completion.items.length > 0; }
-  /** What the completion list shows (screen draws it). */
-  get completionView(): { readonly kind: Completion["kind"]; readonly items: readonly ListItem[]; readonly selected: number } | undefined {
-    return this.completion ? { kind: this.completion.kind, items: this.completion.items, selected: this.completionIndex } : undefined;
-  }
-  get historyEntries(): readonly string[] { return this.history.entries; }
-  /** Which recalled entry is showing, for the box edge; undefined while editing the draft. */
-  get historyPosition(): { readonly index: number; readonly total: number } | undefined { return historyPosition(this.history); }
-  get rows(): number { return Math.max(1, this.area.height); }
-  /** Wrapped rows of the draft hidden above / below the box (0 when it all fits). */
-  get overflow(): { readonly above: number; readonly below: number } { return { above: this.shape.above, below: this.shape.below }; }
-
-  setColors(colors: UiColors): void {
-    this.area.textColor = colors.text;
-    this.area.focusedTextColor = colors.text;
-    this.area.placeholderColor = colors.muted;
-    this.area.selectionBg = colors.selectionBg;
-    this.area.selectionFg = colors.selectionFg;
-    this.prompt.setColors(colors);
-  }
-
-  setText(text: string): void {
-    this.draftRevision++;
-    this.area.setText(text);
-    this.area.gotoBufferEnd();
-  }
-
-  insert(text: string): void { this.draftRevision++; this.area.insertText(text); }
-  removeAtom(label: string): void { this.draftRevision++; this.area.replaceText(this.text.split(label).join("")); }
-  resetDraft(project: (text: string) => string): void {
-    this.history = projectHistory(this.history, project);
-    this.area.clearKilledText(); this.setText("");
-  }
-  focus(): void { this.area.focus(); }
-
-  remember(entry: string): void { this.history = rememberPrompt(this.history, entry); }
-
-  /**
-   * Up/Down recall history only from the first/last *visual* row, so a
-   * wrapped paragraph is navigable like a multi-line one (Claude Code's
-   * documented rule). Cursor offsets here are display cells, not string
-   * indices, so they are only compared with each other.
-   */
-  /** The cursor is on the draft's last visual row: Down has nowhere to move within it. */
-  get onLastRow(): boolean {
-    const view = this.area.editorView;
-    return !this.area.plainText.slice(this.area.textCursor).includes("\n") && view.getVisualEOL().offset === view.getEOL().offset;
-  }
-
-  historyStep(direction: -1 | 1): boolean {
-    const view = this.area.editorView;
-    if (direction < 0 && view.getVisualSOL().offset !== 0) return false;
-    if (direction > 0 && !this.onLastRow) return false;
-    const step = stepHistory(this.history, direction, this.area.plainText);
-    // Up with nothing older is consumed (the cursor is already on the top row); Down from the draft is not.
-    if (!step) return direction < 0;
-    this.history = step.history;
-    this.setText(step.text);
-    return true;
-  }
-
-  setCompletion(completion: Completion | undefined): void {
-    const next = completion && completion.items.length ? completion : undefined;
-    if (!next && !this.completion) return;
-    this.completion = next;
-    this.completionIndex = 0;
-    this.onResize?.();
-  }
-  moveCompletion(delta: number): void {
-    if (!this.completion) return;
-    const n = this.completion.items.length;
-    this.completionIndex = (this.completionIndex + delta + n) % n;
-    this.onResize?.();
-  }
-  /** Apply the selected completion; returns the applied item. */
-  acceptCompletion(): ListItem | undefined {
-    const completion = this.completion;
-    const item = completion?.items[this.completionIndex];
-    if (!completion || !item) return undefined;
-    const text = this.area.plainText;
-    this.area.setText(text.slice(0, completion.start) + item.value + text.slice(completion.end));
-    this.area.cursorOffset = completion.start + item.value.length;
-    this.setCompletion(undefined);
-    return item;
-  }
-
-  /** The tallest the draft may grow, so the box never pushes the transcript off a short screen. */
-  /** The screen's limit for this terminal size (draftMaxLines, then whatever space is left). */
-  setMaxLines(lines: number): void {
-    const next = Math.max(1, Math.floor(lines));
-    if (next === this.maxLines) return;
-    this.maxLines = next;
-    this.area.maxHeight = next;
-  }
-
-  /**
-   * After layout or a frame: report a new height and what scrolled out of
-   * view. `virtualLineCount` is only the viewport's visible rows (always 1 in
-   * a one-row box, which is how the box used to stay one row); the editor
-   * view's total is the whole wrapped draft. Writes only on change, so a
-   * quiet frame costs two native reads.
-   */
-  private measured(): void {
-    const next = draftRows(this.area.editorView.getTotalVirtualLineCount(), this.area.scrollY, Math.max(1, Math.min(this.maxLines, this.area.height || 1)));
-    const previous = this.shape;
-    this.shape = next;
-    if (next.rows !== previous.rows) this.onResize?.();
-    if (next.above !== previous.above || next.below !== previous.below) this.onOverflow?.();
-  }
-}

package/src/tui/ui/control-panel.ts

@@ -1,25 +0,0 @@
-/** View-only data: apps owns the projection and actions, as required by D20. */
-import { wrapPlain } from "../diff.ts";
-
-export type ControlPanelModel = {
-  thread: string; turn: string | null; goal: string; status: string; execution: string; gaps: readonly string[];
-  progress: readonly { label: string; count: number; sources: readonly string[] }[]; checks: readonly string[];
-  context: readonly string[]; omitted: readonly string[]; history: readonly string[];
-};
-export type ControlTab = "goal" | "progress" | "context";
-export type ControlFocus = "messages" | "omitted" | "history";
-
-export function controlPanelLines(model: ControlPanelModel, tab: ControlTab, width: number, focus: ControlFocus = "messages"): string[] {
-  const lines = tab === "goal" ? [model.goal, `Goal: ${model.status}`, `Execution: ${model.execution}`, "", ...model.gaps,
-      ...model.checks, "", `Thread ${model.thread}`, `Turn ${model.turn ?? "none"}`]
-      : tab === "progress" ? ["Evidence for this request", ...model.progress.map(item => `${item.label}: ${item.count}`), "",
-        "Counts describe observations, not a completion percentage.", ...model.checks,
-        ...model.progress.flatMap(item => item.sources.map(source => `${item.label}: ${source}`))]
-      : focus === "messages" ? ["Actual model context · ←/→ change lens", ...model.context]
-        : focus === "omitted" ? ["Not replayed as messages · ←/→ change lens", ...(model.omitted.length ? model.omitted : ["No omitted events in this segment."])]
-          : ["Handoff retention and recovery · ←/→ change lens", ...(model.history.length ? model.history : ["No carried history in this segment."])];
-  // Unlike status chrome, evidence is inspectable content: every character must
-  // remain reachable by scrolling, including long source paths and CJK (Q24).
-  // A one-cell pane cannot show a wide glyph; its owner shows resize feedback.
-  return lines.flatMap(line => wrapPlain(line.replace(/[\x00-\x1f\x7f-\x9f]/g, " "), Math.max(2, width)));
-}

package/src/tui/ui/control-sidebar.ts

@@ -1,49 +0,0 @@
-/** Persistent view state only; the controller supplies evidence and owns actions (D20/Q24). */
-import { controlPanelLines, type ControlFocus, type ControlPanelModel, type ControlTab } from "./control-panel.ts";
-import { clipText } from "./edge.ts";
-import type { Line } from "./status.ts";
-
-const TABS: readonly ControlTab[] = ["goal", "progress", "context"];
-const LENSES: readonly ControlFocus[] = ["messages", "omitted", "history"];
-/** Below these assumed view-only limits, show reversible size feedback instead of unreadable controls. */
-const MIN_CONTENT_COLUMNS = 16, MIN_CONTENT_ROWS = 8;
-
-export class ControlSidebar {
-  model: ControlPanelModel | undefined;
-  tab: ControlTab = "goal";
-  lens: ControlFocus = "messages";
-  private readonly offsets = new Map<string, number>();
-  private shownOffset = 0;
-  private pageRows = 1;
-  private maxOffset = 0;
-
-  private get page(): string { return this.tab === "context" ? `${this.tab}:${this.lens}` : this.tab; }
-
-  changeTab(delta: number): void { this.tab = TABS[(TABS.indexOf(this.tab) + delta + TABS.length) % TABS.length]!; }
-  changeLens(delta: number): void { this.lens = LENSES[(LENSES.indexOf(this.lens) + delta + LENSES.length) % LENSES.length]!; }
-  scroll(delta: number, page = false): void {
-    this.offsets.set(this.page, Math.max(0, Math.min(this.maxOffset, this.shownOffset + delta * (page ? this.pageRows : 1))));
-  }
-  edge(end: boolean): void { this.offsets.set(this.page, end ? this.maxOffset : 0); }
-
-  rows(width: number, height: number, focused: boolean): readonly Line[] {
-    const w = Math.max(0, Math.floor(width)), h = Math.max(0, Math.floor(height));
-    if (w === 0 || h === 0) return [];
-    const row = (text: string, role: "text" | "muted" | "accent" = "text", bold = false): Line => [{ text: clipText(text, w), role, bold }];
-    if (w < MIN_CONTENT_COLUMNS || h < MIN_CONTENT_ROWS) {
-      // Do not reset the model, tab or desired scroll position: resize is reversible.
-      return [row(w < 6 ? "↔" : "Resize for control", "accent"), row("Esc editor · q close", "muted")].slice(0, h);
-    }
-    const tabs = TABS.map(tab => `${tab === this.tab ? "●" : "○"} ${tab === "context" ? "Context Lens" : tab === "goal" ? "Goal" : "Progress"}`);
-    const heading = [row(`Control panel · ${focused ? "focused" : "F6 focus"}`, "accent", true), row(`${tabs[0]}  ${tabs[1]}`), row(tabs[2]!)];
-    const hints = ["Tab sections · ←→ lenses", "r refresh · i stop · a accept", "Esc editor · q close · F6"];
-    this.pageRows = Math.max(1, h - heading.length - hints.length - 1);
-    const body = this.model ? controlPanelLines(this.model, this.tab, w, this.lens) : ["Evidence unavailable.", "Press r to refresh."];
-    this.maxOffset = Math.max(0, body.length - this.pageRows);
-    this.shownOffset = Math.min(this.maxOffset, this.offsets.get(this.page) ?? 0);
-    const shown = body.slice(this.shownOffset, this.shownOffset + this.pageRows).map(text => row(text));
-    while (shown.length < this.pageRows) shown.push(row(""));
-    const range = `${this.shownOffset + 1}–${Math.min(body.length, this.shownOffset + this.pageRows)}/${body.length}`;
-    return [...heading, ...shown, row(`↑↓ PgUp/PgDn · ${range}`, "muted"), ...hints.map(text => row(text, "muted"))];
-  }
-}