@visual-z/xeno 0.8.4 → 0.9.0

package/src/tui/ui/dialog.ts

@@ -1,398 +0,0 @@
-/**
- * Dialogs open inside the input box, stacked (docs/tasks/refactor-tui-dock-layout.md).
- * Escape pops one level (back); popping the last returns focus to the editor.
- *
- * The box keeps its place at the bottom and grows upward; the dialog's
- * title and any non-obvious keys go into the box's top edge (`title`,
- * `edgeHint`), so there is no separate frame or hint row. Every picker and
- * form in the app is one of these kinds:
- *   list     grouped rows (+ checkboxes), search on the input row, action keys
- *   form     one text field; `secret` keeps the value out of every renderable
- *   confirm  yes / no
- *   message  read-only lines (ANSI allowed)
- *   busy     the activity glyph while the app awaits IO
- *   lines    an app- or extension-rendered block with its own key handler
- */
-import { BoxRenderable, InputRenderable, TextRenderable, type CliRenderer, type Renderable } from "@opentui/core";
-import { Canvas } from "./canvas.ts";
-import type { UiColors } from "./colors.ts";
-import { bound, type Bindings, type KeyPress } from "./keys.ts";
-import type { ListItem } from "./list-model.ts";
-import { ListView } from "./list-view.ts";
-import { ansiText, parts } from "./styled.ts";
-
-export interface ListAction { readonly key: string; readonly label: string; run(item: ListItem | undefined, dialog: ListHandle): void | Promise<void> }
-export interface ListHandle { setItems(items: readonly ListItem[], selected?: string): void; readonly current: ListItem | undefined; readonly checked: ReadonlySet<string>; readonly query: string }
-
-export type DialogSpec =
-  | { kind: "list"; title: string; items: readonly ListItem[]; selected?: string; multi?: boolean; checked?: readonly string[]; search?: boolean; placeholder?: string; empty?: string; rows?: number;
-      /** Lines above the list (approval command, context). ANSI allowed. */
-      intro?: readonly string[];
-      /** Stay on the stack after a pick, so a drill-down's Esc returns here. */
-      keep?: boolean;
-      /** The box border colour: "warning" for decisions that run something (approval). */
-      tone?: "warning";
-      hint?: string; actions?: readonly ListAction[]; onPick?(item: ListItem, dialog: ListHandle): void | Promise<void>;
-      onSubmitChecked?(values: string[]): void | Promise<void>; onMove?(item: ListItem | undefined): void; onCancel?(): void }
-  | { kind: "form"; title: string; label: string; value?: string; secret?: boolean; hint?: string; intro?: readonly string[]; keep?: boolean; validate?(value: string): string | undefined; onSubmit(value: string): void | Promise<void>; onCancel?(): void }
-  | { kind: "confirm"; title: string; message: string; yes?: string; no?: string; onAnswer(yes: boolean): void | Promise<void> }
-  | { kind: "message"; title: string; lines: readonly string[]; onDone?(): void | Promise<void> }
-  | { kind: "busy"; title: string; message: string; onCancel?(): void }
-  | { kind: "lines"; title: string; render(width: number): string[]; handleKey?(key: KeyPress): boolean | Promise<boolean>; hint?: string; onCancel?(): void };
-
-/**
- * One stacked dialog. `list` and `row` (a plain form's label + Input) are
- * persistent: built once, they carry typed text and cursor across repaints,
- * and `show()` only detaches them. Everything else a repaint builds is
- * ephemeral and destroyed recursively on the next one, so a persistent node
- * must never sit inside an ephemeral parent -- that destroyed the form's
- * Input on the first validation error and every later key threw
- * (docs/tasks/fix-dialog-form-and-grok-version.md).
- */
-interface Open {
-  spec: DialogSpec;
-  list?: ListView;
-  row?: BoxRenderable;
-  label?: TextRenderable;
-  input?: InputRenderable;
-  secret?: string;
-  error?: string | undefined;
-  yes?: boolean;
-}
-
-/**
- * Hint clauses everyone already knows (Enter confirms, Esc goes back, arrows
- * move). Only the rest earns a place on the edge (refactor-tui-chrome-cleanup).
- */
-const OBVIOUS = /^(enter|esc|↑↓|←→|↑|↓)\b/;
-export function edgeHint(hint: string | undefined): string {
-  return (hint ?? "").split(" · ").map(clause => clause.trim()).filter(clause => clause && !OBVIOUS.test(clause)).join(" · ");
-}
-
-let serial = 0;
-
-export class DialogHost {
-  private readonly renderer: CliRenderer;
-  private colors: UiColors;
-  private readonly bindings: () => Bindings;
-  private readonly slot: BoxRenderable;
-  private readonly availableRows: () => number;
-  private readonly glyph: () => string;
-  private stack: Open[] = [];
-  private readonly work = new Set<Promise<unknown>>();
-  /** Nodes built for the current view; persistent ones (lists, inputs) live on their Open. */
-  private ephemeral: Renderable[] = [];
-  private shownTitle = "";
-  private shownHint = "";
-  onOpened: (() => void) | undefined;
-  /** Called when the stack becomes empty (focus returns to the editor). */
-  onClosed: (() => void) | undefined;
-  /** Title, hint or tone changed: the box edge repaints. */
-  onChrome: (() => void) | undefined;
-  /** Errors thrown by dialog callbacks, surfaced by the app as notices. */
-  onError: ((error: unknown) => void) | undefined;
-
-  constructor(renderer: CliRenderer, colors: UiColors, bindings: () => Bindings, slot: BoxRenderable, availableRows: () => number, glyph: () => string = () => "●") {
-    this.renderer = renderer;
-    this.colors = colors;
-    this.bindings = bindings;
-    this.slot = slot;
-    this.availableRows = availableRows;
-    this.glyph = glyph;
-  }
-
-  get open(): boolean { return this.stack.length > 0; }
-  get busy(): boolean { return this.work.size > 0; }
-  /** Resolves when every callback started by a key has finished (tests, shutdown). */
-  async idle(): Promise<void> { while (this.work.size) await Promise.all([...this.work]); }
-  get depth(): number { return this.stack.length; }
-  get top(): DialogSpec | undefined { return this.stack.at(-1)?.spec; }
-  /** The list of the top dialog, for callers that update it after async loads. */
-  get list(): ListHandle | undefined { return this.stack.at(-1)?.list; }
-  /** The top list's view (tests read its drawn rows). */
-  get listView(): ListView | undefined { return this.stack.at(-1)?.list; }
-  /** What the box's top edge shows while a dialog is open. */
-  get title(): string { return this.shownTitle; }
-  get edgeHint(): string { return this.shownHint; }
-  get tone(): "warning" | undefined { const spec = this.top; return spec?.kind === "list" ? spec.tone : undefined; }
-  /** A busy dialog shows the activity glyph, which needs the clock running. */
-  get animated(): boolean { return this.top?.kind === "busy"; }
-
-  setColors(colors: UiColors): void {
-    this.colors = colors;
-    for (const open of this.stack) {
-      open.list?.setColors(colors);
-      if (open.input) { open.input.textColor = colors.text; open.input.focusedTextColor = colors.text; open.input.placeholderColor = colors.muted; }
-      if (open.label && open.spec.kind === "form") open.label.content = this.formLabel(open.spec.label);
-    }
-    if (this.open) this.show();
-  }
-
-  dispose(): void { this.clearView(); }
-
-  push(spec: DialogSpec, replace = false): void {
-    if (replace) this.stack.pop();
-    this.stack.push(this.build(spec));
-    this.onOpened?.();
-    this.show();
-  }
-
-  /** Replace the whole stack (e.g. after a save there is nothing to go back to). */
-  reset(spec: DialogSpec): void { this.stack = []; this.push(spec); }
-
-  pop(): void {
-    const top = this.stack.pop();
-    if (top) {
-      const spec = top.spec;
-      if ((spec.kind === "list" || spec.kind === "form" || spec.kind === "busy" || spec.kind === "lines") && spec.onCancel) this.guard(() => spec.onCancel!());
-      if (spec.kind === "confirm") this.guard(() => spec.onAnswer(false));
-    }
-    this.show();
-  }
-
-  /** Remove one dialog by its spec without running its callbacks (an extension request that timed out). */
-  remove(spec: DialogSpec): void {
-    const at = this.stack.findIndex(open => open.spec === spec);
-    if (at < 0) return;
-    this.stack.splice(at, 1);
-    this.show();
-  }
-
-  /**
-   * Close everything (session switch, shutdown). Cancel callbacks run, top
-   * first, so anything awaiting an answer resolves as "cancelled" instead of
-   * hanging forever.
-   */
-  clear(): void {
-    const open = this.stack.reverse();
-    this.stack = [];
-    for (const entry of open) {
-      const spec = entry.spec;
-      if ((spec.kind === "list" || spec.kind === "form" || spec.kind === "busy" || spec.kind === "lines") && spec.onCancel) void this.guard(() => spec.onCancel!());
-      if (spec.kind === "confirm") void this.guard(() => spec.onAnswer(false));
-    }
-    this.show();
-  }
-
-  /** Rebuild the top dialog's view (after its spec's data changed). */
-  refresh(): void { if (this.open) this.show(); }
-
-  private build(spec: DialogSpec): Open {
-    const open: Open = { spec };
-    if (spec.kind === "list") {
-      const list = new ListView(this.renderer, { colors: this.colors, ...(spec.rows ? { rows: spec.rows } : {}), search: spec.search !== false, multi: spec.multi ?? false,
-        ...(spec.placeholder ? { placeholder: spec.placeholder } : {}), ...(spec.empty ? { empty: spec.empty } : {}) });
-      for (const value of spec.checked ?? []) list.checked.add(value);
-      list.setItems(spec.items, spec.selected);
-      list.onChange = () => { spec.onMove?.(list.current); this.paintChrome(); };
-      open.list = list;
-    }
-    if (spec.kind === "form" && !spec.secret) {
-      open.input = new InputRenderable(this.renderer, { id: `dialog-input-${serial++}`, value: spec.value ?? "", textColor: this.colors.text,
-        focusedTextColor: this.colors.text, backgroundColor: "transparent", focusedBackgroundColor: "transparent", flexGrow: 1 });
-      // Prefilled values are edited from their end (a URL gets a path appended).
-      open.input.gotoBufferEnd();
-      open.row = new BoxRenderable(this.renderer, { id: `form-row-${serial++}`, flexDirection: "row", height: 1 });
-      open.label = new TextRenderable(this.renderer, { id: `form-label-${serial++}`, content: this.formLabel(spec.label), flexShrink: 0 });
-      open.row.add(open.label);
-      open.row.add(open.input);
-    }
-    if (spec.kind === "form" && spec.secret) open.secret = "";
-    if (spec.kind === "confirm") open.yes = true;
-    return open;
-  }
-
-  /** Re-fit the top list to the rows the screen can spare. */
-  layout(): void {
-    const top = this.stack.at(-1);
-    if (top?.spec.kind !== "list") return;
-    const overhead = (top.spec.search === false ? 0 : 2) + (top.spec.intro?.length ? introRows(top.spec.intro) + 1 : 0);
-    top.list?.setRowLimit(Math.min(top.spec.rows ?? 10, Math.max(1, this.availableRows() - overhead)));
-  }
-
-  private clearView(): void {
-    for (const child of this.slot.getChildren()) this.slot.remove(child);
-    for (const node of this.ephemeral) node.destroyRecursively();
-    this.ephemeral = [];
-  }
-
-  private add(node: Renderable): void { this.ephemeral.push(node); this.slot.add(node); }
-
-  private show(): void {
-    this.clearView();
-    const top = this.stack.at(-1);
-    if (!top) {
-      this.slot.visible = false;
-      this.shownTitle = ""; this.shownHint = "";
-      this.onClosed?.();
-      this.onChrome?.();
-      this.renderer.requestRender();
-      return;
-    }
-    this.slot.visible = true;
-    const c = this.colors, spec = top.spec;
-    const text = (content: ReturnType<typeof parts>, extra: Record<string, unknown> = {}) => new TextRenderable(this.renderer, { id: `dialog-text-${serial++}`, content, wrapMode: "word", ...extra });
-    const canvas = (rows: Parameters<Canvas["setRows"]>[0]) => { const node = new Canvas(this.renderer, { id: `dialog-canvas-${serial++}`, height: rows.length, colors: c, glyph: this.glyph }); node.setRows(rows); return node; };
-    switch (spec.kind) {
-      case "list": {
-        if (spec.intro?.length) this.add(text(ansiText(spec.intro), { marginBottom: 1 }));
-        this.slot.add(top.list!);
-        this.layout();
-        top.list!.searchInput?.focus();
-        if (!top.list!.searchInput) this.renderer.currentFocusedRenderable?.blur();
-        break;
-      }
-      case "form": {
-        if (spec.intro?.length) this.add(text(ansiText(spec.intro), { marginBottom: 1 }));
-        if (top.row) { this.slot.add(top.row); top.input!.focus(); }
-        else {
-          // The secret never reaches a renderable: only its length does. The
-          // whole row is rebuilt per repaint, so it holds nothing persistent.
-          const row = new BoxRenderable(this.renderer, { id: `form-row-${serial++}`, flexDirection: "row", height: 1 });
-          row.add(new TextRenderable(this.renderer, { id: `form-label-${serial++}`, content: this.formLabel(spec.label), flexShrink: 0 }));
-          const mask = canvas([[{ text: "•".repeat(Math.min(top.secret!.length, 48)), role: "text" }, { text: "▏", role: "accent" }]]);
-          mask.flexGrow = 1;
-          row.add(mask);
-          this.add(row);
-          this.renderer.currentFocusedRenderable?.blur();
-        }
-        if (top.error) this.add(text(parts({ text: top.error, fg: c.error })));
-        break;
-      }
-      case "confirm":
-        this.add(text(parts({ text: spec.message, fg: c.text })));
-        // The choice is marked by shape and weight; nothing is painted behind it.
-        this.add(canvas([[
-          { text: top.yes ? "▸ " : "  ", role: "accent", bold: true }, { text: spec.yes ?? "Yes", role: top.yes ? "accent" : "text", bold: top.yes === true },
-          { text: "    ", role: "text" },
-          { text: !top.yes ? "▸ " : "  ", role: "accent", bold: true }, { text: spec.no ?? "No", role: !top.yes ? "accent" : "text", bold: top.yes !== true },
-        ]]));
-        this.renderer.currentFocusedRenderable?.blur();
-        break;
-      case "message":
-        this.add(text(ansiText(spec.lines)));
-        this.renderer.currentFocusedRenderable?.blur();
-        break;
-      case "busy":
-        this.add(canvas([[{ text: "●", role: "accent", spin: true }, { text: ` ${spec.message.split("\n")[0] ?? ""}`, role: "text" }]]));
-        if (spec.message.includes("\n")) this.add(text(parts({ text: spec.message.split("\n").slice(1).join("\n"), fg: c.muted })));
-        this.renderer.currentFocusedRenderable?.blur();
-        break;
-      case "lines": {
-        const width = Math.max(10, this.renderer.width - 8);
-        this.add(text(ansiText(this.guardRender(() => spec.render(width))), { wrapMode: "none" }));
-        this.renderer.currentFocusedRenderable?.blur();
-        break;
-      }
-    }
-    this.paintChrome();
-    this.renderer.requestRender();
-  }
-
-  private formLabel(label: string): ReturnType<typeof parts> { return parts({ text: `${label} › `, fg: this.colors.muted }); }
-
-  private paintChrome(): void {
-    const top = this.stack.at(-1);
-    const spec = top?.spec;
-    let hint = "";
-    if (spec?.kind === "list") {
-      const keys = (spec.actions ?? []).map(action => `${action.key} ${action.label}`);
-      hint = [edgeHint(spec.hint), ...(spec.hint ? [] : [...(spec.multi ? ["space toggle"] : []), ...keys]), top!.list!.scrollPosition].filter(Boolean).join(" · ");
-    } else if (spec?.kind === "form" || spec?.kind === "lines") hint = edgeHint(spec.hint);
-    const title = spec?.title ?? "";
-    if (title === this.shownTitle && hint === this.shownHint) return;
-    this.shownTitle = title; this.shownHint = hint;
-    this.onChrome?.();
-  }
-
-  /** Paste goes to the focused Input natively; a secret form takes it here. */
-  paste(text: string): boolean {
-    const top = this.stack.at(-1);
-    if (!top) return false;
-    if (top.secret !== undefined) { top.secret += text.replace(/[\r\n]+/g, ""); top.error = undefined; this.show(); return true; }
-    return top.input !== undefined || top.list?.searchInput !== undefined;
-  }
-
-  /** Returns true when the key was consumed (the caller then stops propagation). Synchronous so
-   * the caller can preventDefault inside the key event; callbacks run as tracked work. */
-  key(key: KeyPress): boolean {
-    const top = this.stack.at(-1);
-    if (!top) return false;
-    const b = this.bindings();
-    const spec = top.spec;
-    const run = (action: () => unknown) => { const job = this.guard(action).finally(() => { this.work.delete(job); this.refreshIfTop(top); }); this.work.add(job); };
-    const leave = () => { const at = this.stack.indexOf(top); if (at >= 0) this.stack.splice(at, 1); this.show(); };
-    if (bound(b, "list.cancel", key) || key.chord === "escape") { this.pop(); return true; }
-    switch (spec.kind) {
-      case "list": {
-        const list = top.list!;
-        if (bound(b, "list.up", key)) { list.move(-1); return true; }
-        if (bound(b, "list.down", key)) { list.move(1); return true; }
-        if (bound(b, "list.pageUp", key)) { list.page(-1); return true; }
-        if (bound(b, "list.pageDown", key)) { list.page(1); return true; }
-        if (spec.multi && bound(b, "list.toggle", key)) { list.toggle(); return true; }
-        if (spec.multi && key.chord === "ctrl+a") { list.toggleAllVisible(); return true; }
-        const action = spec.actions?.find(entry => entry.key === key.chord);
-        if (action) { run(() => action.run(list.current, list)); return true; }
-        if (bound(b, "list.confirm", key)) {
-          if (spec.multi) { const values = [...list.checked]; if (!spec.keep) leave(); run(() => spec.onSubmitChecked?.(values)); return true; }
-          const item = list.current;
-          // The dialog leaves the stack before its callback runs, so a callback
-          // that opens another dialog (or closes everything) wins.
-          if (item && !item.disabled) { if (!spec.keep) leave(); run(() => spec.onPick?.(item, list)); }
-          return true;
-        }
-        return false; // printable keys reach the focused search Input
-      }
-      case "form": {
-        if (key.chord === "enter") {
-          const value = (top.input ? top.input.value : top.secret!).trim();
-          const error = spec.validate?.(value);
-          if (error) { top.error = error; this.show(); return true; }
-          if (!spec.keep) leave();
-          run(() => spec.onSubmit(value));
-          return true;
-        }
-        if (top.secret !== undefined) {
-          if (key.chord === "backspace") top.secret = top.secret.slice(0, -1);
-          else if (key.chord === "ctrl+u") top.secret = "";
-          else if (key.text) top.secret += key.text;
-          else return true;
-          top.error = undefined;
-          this.show();
-          return true;
-        }
-        if (top.error) { top.error = undefined; this.show(); }
-        return false;
-      }
-      case "confirm":
-        if (["left", "right", "tab", "h", "l"].includes(key.chord)) { top.yes = !top.yes; this.show(); return true; }
-        if (key.chord === "y" || key.chord === "n" || key.chord === "enter") {
-          const yes = key.chord === "enter" ? top.yes! : key.chord === "y";
-          leave();
-          run(() => spec.onAnswer(yes));
-        }
-        return true;
-      case "message":
-        if (key.chord === "enter") { leave(); run(() => spec.onDone?.()); }
-        return true;
-      case "busy":
-        return true;
-      case "lines":
-        if (spec.handleKey) run(() => spec.handleKey!(key));
-        return true;
-    }
-  }
-
-  private refreshIfTop(open: Open): void { if (this.stack.at(-1) === open) this.show(); }
-
-  private async guard<T>(run: () => T | Promise<T>): Promise<T | undefined> {
-    try { return await run(); } catch (error) { this.onError?.(error); return undefined; }
-  }
-  private guardRender(run: () => string[]): string[] {
-    try { return run(); } catch (error) { this.onError?.(error); return ["(this block failed to render)"]; }
-  }
-}
-
-/** Rows an intro block takes before wrapping (wrapping only adds rows; the list shrinks to fit). */
-function introRows(intro: readonly string[]): number { return intro.length; }

package/src/tui/ui/draft.ts

@@ -1,23 +0,0 @@
-/**
- * How tall the draft is and what scrolled out of it (docs/tasks/fix-tui-composer-growth.md). Pure.
- *
- * `total` is the draft's wrapped row count, `offset` the editor's first
- * visible row, `max` the tallest the box may grow. The box shows
- * min(total, max) rows; whatever does not fit is reported on the box's top
- * edge as "↑ N more" / "↓ N more", the way pi marks a scrolled editor.
- */
-export interface DraftRows {
-  /** Rows the editor occupies. */
-  readonly rows: number;
-  /** Wrapped rows hidden above the visible part. */
-  readonly above: number;
-  /** Wrapped rows hidden below it. */
-  readonly below: number;
-}
-
-export function draftRows(total: number, offset: number, max: number): DraftRows {
-  const t = Math.max(1, Math.floor(total) || 1), m = Math.max(1, Math.floor(max) || 1);
-  const rows = Math.min(t, m);
-  const above = Math.max(0, Math.min(Math.floor(offset) || 0, t - rows));
-  return { rows, above, below: t - rows - above };
-}

package/src/tui/ui/duration.ts

@@ -1,16 +0,0 @@
-/**
- * Elapsed time as people read it (feat-sidebar-goal-and-speed): `59s`, then
- * `1m 00s`, then `1h 01m 01s`. The steps are Codex's fmt_elapsed_compact; a
- * running turn used to read `3725s`.
- *
- * Every field after the first is two digits, so a running clock keeps its
- * width within a unit instead of jittering the labels beside it. Parts of a
- * second never round up: the clock shows seconds that have fully passed.
- */
-export function formatElapsed(ms: number): string {
-  const total = Number.isFinite(ms) && ms > 0 ? Math.floor(ms / 1000) : 0;
-  if (total < 60) return `${total}s`;
-  const seconds = String(total % 60).padStart(2, "0");
-  if (total < 3600) return `${Math.floor(total / 60)}m ${seconds}s`;
-  return `${Math.floor(total / 3600)}h ${String(Math.floor(total % 3600 / 60)).padStart(2, "0")}m ${seconds}s`;
-}

package/src/tui/ui/edge.ts

@@ -1,186 +0,0 @@
-/**
- * Labels set into a one-row rule (docs/tasks/refactor-tui-dock-layout.md). Pure.
- *
- *     ╭─ left · left ───────────────── right ─╮     the input box edges
- *     ── node 3 · model switch ───────────────      transcript dividers
- *     xeno  title                 right   right     the top bar (splitLine)
- *
- * A row never wraps and never squeezes what is next to it, so when labels do
- * not fit, the least important go first: each label has a priority (0 is
- * never dropped), and a label with `min` shrinks to that many cells with an
- * ellipsis before it is dropped. The output is always exactly `width` cells,
- * measured with the same display width the renderer uses (CJK counts 2).
- */
-import { displayWidth } from "../width.ts";
-
-/** Colour roles; the view maps them to the current palette. */
-export type Role = "text" | "muted" | "edge" | "line" | "accent" | "success" | "error" | "warning" | "reasoning" | "code";
-
-export interface Seg {
-  readonly text: string;
-  readonly role: Role;
-  readonly bold?: boolean;
-  readonly italic?: boolean;
-  /** Drawn with the activity clock's current glyph instead of `text` (one cell). */
-  readonly spin?: boolean;
-}
-
-export interface Label {
-  readonly segs: readonly Seg[];
-  /** 0 is never dropped; among the rest, higher numbers drop first. */
-  readonly priority: number;
-  /** Shrink the `shrink` seg (default 0) to this many cells before dropping. */
-  readonly min?: number;
-  readonly shrink?: number;
-  /**
-   * When to shrink, on the same scale as `priority` (default: the label's own
-   * priority). A never-dropped title can still give up width early.
-   */
-  readonly shrinkPriority?: number;
-}
-
-export const SEPARATOR: readonly Seg[] = [{ text: " · ", role: "muted" }];
-
-function segWidth(seg: Seg): number { return seg.spin ? 1 : displayWidth(seg.text); }
-
-export function segsWidth(segs: readonly Seg[]): number {
-  let width = 0;
-  for (const seg of segs) width += segWidth(seg);
-  return width;
-}
-
-/** Cut `text` to at most `width` cells, ending in "…" when anything was cut. */
-export function clipText(text: string, width: number): string {
-  if (width <= 0) return "";
-  if (displayWidth(text) <= width) return text;
-  let out = "", used = 0;
-  for (const ch of text) {
-    const w = displayWidth(ch);
-    if (used + w > width - 1) break;
-    out += ch; used += w;
-  }
-  return `${out}…`;
-}
-
-/** Cut a run of segs to at most `width` cells; the cut seg ends in "…". */
-export function clipSegs(segs: readonly Seg[], width: number): Seg[] {
-  if (segsWidth(segs) <= width) return [...segs];
-  const out: Seg[] = [];
-  let left = width;
-  for (let i = 0; i < segs.length; i++) {
-    const seg = segs[i]!, w = segWidth(seg);
-    if (w < left) { out.push(seg); left -= w; continue; }
-    if (left <= 0) break;
-    if (!seg.spin) {
-      // Something after this seg is being cut away, so this seg carries the ellipsis.
-      const body = clipText(seg.text, left - 1).replace(/…$/, "");
-      out.push({ ...seg, text: `${body}…` });
-    }
-    break;
-  }
-  return out;
-}
-
-interface Fitted { label: Label; segs: Seg[]; index: number; side: "left" | "right" }
-
-/**
- * Which labels survive in `avail` cells. Returns the joined segs per side
- * and the indices kept, so callers and tests can see exactly what dropped.
- * `gap` is the minimum space between the two sides when both survive.
- */
-export function fitLabels(avail: number, left: readonly Label[], right: readonly Label[], separator: readonly Seg[] = SEPARATOR, gap = 0):
-  { left: Seg[]; right: Seg[]; keptLeft: number[]; keptRight: number[] } {
-  let items: Fitted[] = [
-    ...left.map((label, index) => ({ label, segs: [...label.segs], index, side: "left" as const })),
-    ...right.map((label, index) => ({ label, segs: [...label.segs], index, side: "right" as const })),
-  ];
-  const sepWidth = segsWidth(separator);
-  const width = () => {
-    let l = 0, r = 0, nl = 0, nr = 0;
-    for (const item of items) { const w = segsWidth(item.segs); if (item.side === "left") { l += w; nl++; } else { r += w; nr++; } }
-    return l + r + Math.max(0, nl - 1) * sepWidth + Math.max(0, nr - 1) * sepWidth + (nl && nr ? gap : 0);
-  };
-  const shrinkable = (item: Fitted) => item.label.min !== undefined && segsWidth(item.segs) > item.label.min;
-  // The step a label takes next and how unimportant that step is: shrinking happens at
-  // `shrinkPriority`, dropping at `priority`. Least important step first; on a tie a
-  // shrink comes before a drop, and the right side (the less central one) before the left.
-  const level = (item: Fitted) => shrinkable(item) ? item.label.shrinkPriority ?? item.label.priority : item.label.priority;
-  const before = (a: Fitted, b: Fitted) => level(a) !== level(b) ? level(a) > level(b)
-    : shrinkable(a) !== shrinkable(b) ? shrinkable(a) : a.side === "right" && b.side === "left";
-  for (let guard = 0; width() > avail && guard < 500; guard++) {
-    const candidates = items.filter(item => item.label.priority > 0 || shrinkable(item));
-    if (!candidates.length) break;
-    const victim = candidates.reduce((a, b) => before(b, a) ? b : a);
-    if (shrinkable(victim)) shrink(victim, Math.max(victim.label.min!, segsWidth(victim.segs) - (width() - avail)));
-    else items = items.filter(item => item !== victim);
-  }
-  // Still too wide: only never-dropped labels at their minimum remain. Cut them, right side first.
-  for (const item of [...items].reverse()) {
-    const over = width() - avail;
-    if (over <= 0) break;
-    shrink(item, Math.max(0, segsWidth(item.segs) - over));
-  }
-  items = items.filter(item => segsWidth(item.segs) > 0);
-  const join = (side: "left" | "right") => {
-    const list = items.filter(item => item.side === side);
-    return { segs: list.flatMap((item, i) => i ? [...separator, ...item.segs] : item.segs), kept: list.map(item => item.index) };
-  };
-  const l = join("left"), r = join("right");
-  return { left: l.segs, right: r.segs, keptLeft: l.kept, keptRight: r.kept };
-}
-
-function shrink(item: Fitted, target: number): void {
-  if (!item.segs.length) return;
-  const at = Math.min(item.label.shrink ?? 0, item.segs.length - 1);
-  const room = target - (segsWidth(item.segs) - segWidth(item.segs[at]!));
-  if (room <= 0 || item.segs[at]!.spin) { item.segs = clipSegs(item.segs, target); return; }
-  item.segs[at] = { ...item.segs[at]!, text: clipText(item.segs[at]!.text, room) };
-  item.segs = item.segs.filter(seg => seg.spin || seg.text.length > 0);
-}
-
-export interface EdgeOptions {
-  readonly width: number;
-  readonly left?: readonly Label[];
-  readonly right?: readonly Label[];
-  /** Corner glyphs; omit for a rule with open ends (transcript dividers). */
-  readonly corners?: readonly [string, string];
-  readonly fill?: string;
-  readonly role?: Role;
-  /** Fill cells before the left labels and after the right ones. Default 1. */
-  readonly lead?: number;
-  readonly trail?: number;
-}
-
-/** One complete row, exactly `width` cells (a wide character cut at the end is filled). */
-export function edgeLine(options: EdgeOptions): Seg[] {
-  const width = Math.max(0, Math.floor(options.width));
-  const role = options.role ?? "edge", fill = options.fill ?? "─", corners = options.corners;
-  if (width === 0) return [];
-  if (corners && width < 2) return [{ text: corners[0], role }];
-  const left = options.left ?? [], right = options.right ?? [];
-  const lead = options.lead ?? 1, trail = options.trail ?? 1;
-  const inner = width - (corners ? 2 : 0);
-  const pads = (left.length ? 2 : 0) + (right.length ? 2 : 0);
-  const fitted = fitLabels(Math.max(0, inner - lead - trail - pads), left, right, SEPARATOR, 1);
-  const out: Seg[] = [];
-  let used = 0;
-  const push = (seg: Seg) => { if (seg.spin || seg.text) { out.push(seg); used += segWidth(seg); } };
-  if (corners) out.push({ text: corners[0], role });
-  push({ text: fill.repeat(Math.min(lead, inner)), role });
-  if (fitted.left.length) { push({ text: " ", role }); fitted.left.forEach(push); push({ text: " ", role }); }
-  const rightBlock = fitted.right.length ? segsWidth(fitted.right) + 2 : 0;
-  const gap = inner - used - rightBlock - trail;
-  if (gap > 0) push({ text: fill.repeat(gap), role });
-  if (fitted.right.length) { push({ text: " ", role }); fitted.right.forEach(push); push({ text: " ", role }); }
-  if (inner - used > 0) push({ text: fill.repeat(inner - used), role });
-  if (corners) out.push({ text: corners[1], role });
-  return out;
-}
-
-/** A row with labels at both ends and blank space between (the top bar). Exactly `width` cells. */
-export function splitLine(width: number, left: readonly Label[], right: readonly Label[], gap = 3, separator: readonly Seg[] = [{ text: "   ", role: "muted" }]): Seg[] {
-  const w = Math.max(0, Math.floor(width));
-  const fitted = fitLabels(w, left, right, separator, gap);
-  const space = w - segsWidth(fitted.left) - segsWidth(fitted.right);
-  return [...fitted.left, ...(space > 0 ? [{ text: " ".repeat(space), role: "text" as const }] : []), ...fitted.right];
-}

package/src/tui/ui/image-size.ts

@@ -1,44 +0,0 @@
-/**
- * How many terminal cells a picture takes (docs/tasks/feat-tui-inline-images.md). Pure.
- *
- * A cell is taller than it is wide, so keeping a picture's shape means
- * columns / rows = (width / height) × (cell height / cell width). The result
- * fits the given box, is at least one cell, and never asks for more cells
- * than the picture has pixels for: a 16-pixel icon stays small instead of
- * being blown up into a blurry tile.
- */
-
-export interface CellSize { readonly cols: number; readonly rows: number }
-
-/** Pixels per cell when the terminal does not report them: 9×18, the common default. Assumed. */
-export const DEFAULT_CELL = { width: 9, height: 18 } as const;
-
-export function imageCells(pixels: { readonly width: number; readonly height: number }, maxCols: number, maxRows: number,
-  cell: { readonly width: number; readonly height: number } = DEFAULT_CELL): CellSize {
-  const w = Math.max(1, pixels.width), h = Math.max(1, pixels.height);
-  const cw = cell.width > 0 ? cell.width : DEFAULT_CELL.width, ch = cell.height > 0 ? cell.height : DEFAULT_CELL.height;
-  // The picture's own size in cells caps the box: no upscaling.
-  const capCols = Math.max(1, Math.min(Math.floor(maxCols), Math.ceil(w / cw)));
-  const capRows = Math.max(1, Math.min(Math.floor(maxRows), Math.ceil(h / ch)));
-  const shape = (w / h) * (ch / cw); // columns per row that keep the picture's proportions
-  let rows = capRows, cols = Math.round(rows * shape);
-  if (cols > capCols) { cols = capCols; rows = Math.round(cols / shape); }
-  return { cols: Math.max(1, Math.min(capCols, cols)), rows: Math.max(1, Math.min(capRows, rows)) };
-}
-
-/**
- * Rows for pictures in the transcript: half the terminal, 4–20 (feat-tui-image-full-size).
- * A quarter left a screenshot's text unreadable; 20 is Grok's ceiling, past which one picture
- * pushes the conversation off screen. Assumed, not measured. Full size is a click away.
- */
-export function transcriptImageRows(terminalRows: number): number {
-  return Math.max(4, Math.min(20, Math.floor(terminalRows / 2)));
-}
-
-/** Rows for the attachment strip above the input box: a sixth of the terminal, 3–6. Assumed. */
-export function stripImageRows(terminalRows: number): number {
-  return Math.max(3, Math.min(6, Math.floor(terminalRows / 6)));
-}
-
-/** Pictures shown per message before "+N more" (OpenCode shows 3). */
-export const IMAGES_PER_ITEM = 3;