@visual-z/xeno 0.2.1 → 0.3.0

package/src/apps/ui/extension-host.ts

@@ -0,0 +1,194 @@
+/**
+ * ExtensionUI for the interactive view. Dialog requests are serialized (one
+ * extension question at a time, in arrival order) and all cancel on
+ * shutdown or session switch, resolving as "dismissed". A call arriving from
+ * a disposed generation (an extension of the previous session finishing
+ * late) is ignored rather than mutating the new session's UI.
+ */
+import type { Theme } from "../../core/theme.ts";
+import type { DialogOptions, ExtensionComponent, ExtensionTheme, ExtensionUI } from "../../runtime/extension-ui.ts";
+import type { ExtensionRegistry, ExtensionToolResult } from "../../runtime/extensions.ts";
+import type { DialogSpec } from "../../tui/ui/dialog.ts";
+
+export interface ExtensionHostDeps {
+  dialog(spec: DialogSpec): void;
+  closeDialog(spec: DialogSpec): void;
+  notify(message: string, tone: "info" | "warning" | "error"): void;
+  redraw(): void;
+  theme(): Theme;
+  colored(): boolean;
+  editorText(): string;
+  setEditorText(text: string): void;
+  insertEditorText(text: string): void;
+  toolsExpanded(): boolean;
+  setToolsExpanded(value: boolean): void;
+  setTitle(title: string): void;
+  cwd(): string;
+}
+
+export class ExtensionHost {
+  private readonly deps: ExtensionHostDeps;
+  private generation = 0;
+  private queue: Promise<unknown> = Promise.resolve();
+  private readonly pending = new Set<() => void>();
+  private readonly statuses = new Map<string, string>();
+  private readonly widgets = new Map<string, string[]>();
+  private readonly toolState = new Map<string, Record<string, unknown>>();
+  private readonly partials = new Map<string, ExtensionToolResult>();
+  private registry: ExtensionRegistry | undefined;
+  private unwatch: (() => void) | undefined;
+  workingMessage: string | undefined;
+  hiddenThinkingLabel: string | undefined;
+  private api: ExtensionUI;
+
+  constructor(deps: ExtensionHostDeps) {
+    this.deps = deps;
+    this.api = this.createApi();
+  }
+
+  get context(): ExtensionUI { return this.api; }
+  get status(): string { return [...this.statuses.values()].join(" · "); }
+  get widgetLines(): string[] { return [...this.widgets.values()].flat(); }
+
+  bind(registry: ExtensionRegistry | undefined): void {
+    if (registry === this.registry && this.unwatch) return;
+    if (registry !== this.registry) this.reset();
+    this.registry = registry;
+    this.unwatch = registry?.onToolUpdate((_name, id, _input, result) => { this.partials.set(id, result); this.deps.redraw(); });
+  }
+
+  /** New generation: cancel dialogs, drop widgets and statuses. Late calls from the old one become no-ops. */
+  reset(): void {
+    this.generation++;
+    this.cancelDialogs();
+    this.unwatch?.(); this.unwatch = undefined; this.registry = undefined;
+    this.statuses.clear(); this.widgets.clear(); this.toolState.clear(); this.partials.clear();
+    this.workingMessage = undefined; this.hiddenThinkingLabel = undefined;
+    this.api = this.createApi();
+  }
+
+  cancelDialogs(): void { for (const cancel of [...this.pending]) cancel(); }
+
+  partial(id: string): ExtensionToolResult | undefined { return this.partials.get(id); }
+  clearPartials(): void { this.partials.clear(); }
+
+  theme(): ExtensionTheme {
+    const theme = this.deps.theme();
+    const colored = this.deps.colored();
+    const sgr = (color: string) => colored && theme.colors[color] ? `\x1b[${theme.colors[color]}m` : "";
+    const wrap = (open: string, text: string, close: string) => open ? open + text + close : text;
+    const attr = (on: number, off: number) => (text: string) => wrap(colored ? `\x1b[${on}m` : "", text, `\x1b[${off}m`);
+    return { ...theme, fg: (color, text) => wrap(sgr(color), text, "\x1b[39m"), bg: (color, text) => wrap(sgr(color), text, "\x1b[49m"),
+      bold: attr(1, 22), dim: attr(2, 22), italic: attr(3, 23), underline: attr(4, 24), inverse: attr(7, 27), strikethrough: attr(9, 29) };
+  }
+
+  /** Render an extension component safely: a throwing renderer shows its error, not a crash. */
+  lines(component: ExtensionComponent | undefined, width: number): string[] {
+    if (!component) return [];
+    try { return component.render(width); } catch (error) { this.deps.notify(`Extension renderer: ${String(error)}`, "error"); return [`(extension renderer failed: ${String(error)})`]; }
+  }
+
+  toolRenderer(name: string, input: unknown, result: { text: string; ok: boolean; data?: unknown } | null, id: string): ((width: number) => string[]) | undefined {
+    const tool = this.registry?.tools.get(name);
+    if (!tool?.renderCall && !tool?.renderResult) return undefined;
+    const state = this.toolState.get(id) ?? {};
+    this.toolState.set(id, state);
+    const partial = this.partials.get(id);
+    const expanded = this.deps.toolsExpanded();
+    return width => {
+      const context = { args: input, toolCallId: id, invalidate: () => this.deps.redraw(), lastComponent: undefined, state, cwd: this.deps.cwd(),
+        executionStarted: result !== null || partial !== undefined, argsComplete: true, isPartial: result === null, expanded, showImages: false, isError: result?.ok === false };
+      const call = tool.renderCall ? this.lines(tool.renderCall(input, this.theme(), context), width) : [];
+      const payload: ExtensionToolResult | undefined = result
+        ? resultPayload(result)
+        : partial;
+      const body = payload && tool.renderResult ? this.lines(tool.renderResult(payload, { expanded, isPartial: result === null }, this.theme(), context), width) : [];
+      return [...call, ...body];
+    };
+  }
+
+  /** Extension Markdown transformers, in registration order; a throwing one is skipped. Display only. */
+  transformMarkdown(text: string, context: { streaming: boolean; messageType: "assistant" | "assistant-thinking"; width: number }): string {
+    for (const transform of this.registry?.markdown ?? []) {
+      // Context keys are the ones extensions already read (availableWidth / isStreaming / messageType).
+      try { text = transform(text, { availableWidth: context.width, isStreaming: context.streaming, messageType: context.messageType }) ?? text; } catch (error) { this.deps.notify(`Markdown transformer: ${String(error)}`, "error"); }
+    }
+    return text;
+  }
+
+  messageRenderer(type: string, text: string, data: unknown, entry: boolean): ((width: number) => string[]) | undefined {
+    const renderer = (entry ? this.registry?.entryRenderers.get(type) : undefined) ?? this.registry?.renderers.get(type);
+    if (!renderer) return undefined;
+    return width => {
+      try {
+        const component = renderer({ customType: type, content: text, ...(data === undefined ? {} : { details: data }) }, { expanded: this.deps.toolsExpanded(), outputPad: 1 }, this.theme());
+        return component ? this.lines(component, width) : [text];
+      } catch (error) { return [`(extension renderer failed: ${String(error)})`, text]; }
+    };
+  }
+
+  private createApi(): ExtensionUI {
+    const generation = this.generation;
+    const live = () => generation === this.generation;
+    const api: ExtensionUI = {
+      select: (title, options, opts) => this.ask<string | undefined>(undefined, opts, resolve => ({
+        kind: "list", title, items: options.map(option => ({ value: option, label: option })), onPick: item => resolve(item.value), onCancel: () => resolve(undefined),
+      })),
+      confirm: (title, message, opts) => this.ask<boolean>(false, opts, resolve => ({ kind: "confirm", title, message, onAnswer: yes => resolve(yes) })),
+      input: (title, placeholder, opts) => this.ask<string | undefined>(undefined, opts, resolve => ({
+        kind: "form", title, label: placeholder || "value", onSubmit: value => resolve(value), onCancel: () => resolve(undefined),
+      })),
+      show: (title, component) => this.ask<void>(undefined, undefined, resolve => ({
+        kind: "lines", title, render: width => this.lines(component, width), onCancel: () => { component.dispose?.(); resolve(undefined); },
+      })),
+      notify: (message, type) => { if (live()) this.deps.notify(message, type ?? "info"); },
+      setStatus: (key, text) => { if (!live()) return; if (text === undefined) this.statuses.delete(key); else this.statuses.set(key, text); this.deps.redraw(); },
+      setWidget: (key, lines) => { if (!live()) return; if (lines === undefined) this.widgets.delete(key); else this.widgets.set(key, lines); this.deps.redraw(); },
+      setWorkingMessage: message => { if (!live()) return; this.workingMessage = message; this.deps.redraw(); },
+      setHiddenThinkingLabel: label => { if (!live()) return; this.hiddenThinkingLabel = label; this.deps.redraw(); },
+      setTitle: title => { if (live()) this.deps.setTitle(title); },
+      getEditorText: () => this.deps.editorText(),
+      setEditorText: text => { if (live()) this.deps.setEditorText(text); },
+      pasteToEditor: text => { if (live()) this.deps.insertEditorText(text); },
+      get theme() { return hostTheme(); },
+      getToolsExpanded: () => this.deps.toolsExpanded(),
+      setToolsExpanded: value => { if (live()) this.deps.setToolsExpanded(value); },
+    };
+    const hostTheme = () => this.theme();
+    return api;
+  }
+
+  /** One extension dialog at a time; signal/timeout/shutdown resolve with `dismissed`. */
+  private ask<T>(dismissed: T, opts: DialogOptions | undefined, spec: (resolve: (value: T) => void) => DialogSpec): Promise<T> {
+    const generation = this.generation;
+    const run = () => new Promise<T>(resolve => {
+      if (generation !== this.generation || opts?.signal?.aborted) { resolve(dismissed); return; }
+      let done = false, timer: ReturnType<typeof setTimeout> | undefined, shown: DialogSpec | undefined;
+      const finish = (value: T, close: boolean) => {
+        if (done) return;
+        done = true;
+        clearTimeout(timer);
+        opts?.signal?.removeEventListener("abort", abort);
+        this.pending.delete(cancel);
+        if (close && shown) this.deps.closeDialog(shown);
+        resolve(value);
+      };
+      const cancel = () => finish(dismissed, true);
+      const abort = () => finish(dismissed, true);
+      this.pending.add(cancel);
+      opts?.signal?.addEventListener("abort", abort, { once: true });
+      if (opts?.timeout) timer = setTimeout(abort, opts.timeout);
+      shown = spec(value => finish(value, false));
+      this.deps.dialog(shown);
+    });
+    const next = this.queue.then(run, run);
+    this.queue = next.catch(() => undefined);
+    return next;
+  }
+}
+
+function resultPayload(result: { text: string; ok: boolean; data?: unknown }): ExtensionToolResult {
+  const payload: ExtensionToolResult = { content: [{ type: "text", text: result.text }], isError: !result.ok };
+  if (result.data !== undefined) payload.details = result.data as NonNullable<ExtensionToolResult["details"]>;
+  return payload;
+}

package/src/apps/ui/image-cache.ts

@@ -0,0 +1,78 @@
+/**
+ * Decoded pictures, shared and bounded (docs/tasks/feat-tui-inline-images.md DoD 4).
+ *
+ * The log stores each image once as a content-addressed blob; this keeps one
+ * decoded NativeImage per blob for every node that shows it. Each picture
+ * node retains its own reference (OpenTUI counts them), so evicting an entry
+ * here only drops the cache's reference: a picture still on screen keeps
+ * its pixels, and memory is returned once the last node goes.
+ *
+ * Bytes come from the blob store, which checks the hash; a missing or
+ * corrupt blob, or one that will not decode, resolves to null and the view
+ * names the picture instead of drawing it.
+ */
+import { NativeImage } from "@opentui/core";
+import { getBlobBytes } from "../../store/blobs.ts";
+
+/** Decoded RGBA kept for reuse. 64 MiB is in line with Grok's and pi's image budgets; assumed, not measured here. */
+export const IMAGE_CACHE_BYTES = 64 * 1024 * 1024;
+
+interface Entry { readonly image: Promise<NativeImage | null>; bytes: number }
+
+export class ImageCache {
+  private readonly entries = new Map<string, Entry>();
+  private used = 0;
+  private readonly blobDir: () => string;
+  private readonly budget: number;
+
+  constructor(blobDir: () => string, budget = IMAGE_CACHE_BYTES) {
+    this.blobDir = blobDir;
+    this.budget = budget;
+  }
+
+  /** Bytes of decoded pixels held now (tests). */
+  get size(): number { return this.used; }
+  get count(): number { return this.entries.size; }
+
+  load(sha256: string): Promise<NativeImage | null> {
+    const hit = this.entries.get(sha256);
+    if (hit) {
+      // Most recently used goes last; eviction starts from the front.
+      this.entries.delete(sha256); this.entries.set(sha256, hit);
+      return hit.image;
+    }
+    const entry: Entry = { image: this.decode(sha256), bytes: 0 };
+    this.entries.set(sha256, entry);
+    void entry.image.then(native => {
+      if (this.entries.get(sha256) !== entry) return;
+      entry.bytes = native ? native.width * native.height * 4 : 0;
+      this.used += entry.bytes;
+      this.evict(sha256);
+    });
+    return entry.image;
+  }
+
+  private async decode(sha256: string): Promise<NativeImage | null> {
+    try {
+      const bytes = await getBlobBytes(this.blobDir(), sha256);
+      return bytes ? await NativeImage.load(bytes) : null;
+    } catch { return null; }
+  }
+
+  /** Drop least recently used entries until the budget holds, never the one just loaded. */
+  private evict(keep: string): void {
+    for (const [sha, entry] of this.entries) {
+      if (this.used <= this.budget) break;
+      if (sha === keep) continue;
+      this.entries.delete(sha);
+      this.used -= entry.bytes;
+      void entry.image.then(native => native?.dispose());
+    }
+  }
+
+  dispose(): void {
+    for (const entry of this.entries.values()) void entry.image.then(native => native?.dispose());
+    this.entries.clear();
+    this.used = 0;
+  }
+}

package/src/apps/ui/palette.ts

@@ -0,0 +1,88 @@
+/**
+ * Ctrl+P: every command and action in one searchable list.
+ *
+ * Sources: the slash-command catalog (COMMANDS, prompt templates, skills,
+ * extension commands) plus actions that have no slash spelling (toggle tools,
+ * scroll, sidebar) and the ready models. The `/` completion menu reads the
+ * same command entries, so a command is discoverable exactly one way
+ * (OpenCode's command registry). Pure: the controller supplies state.
+ */
+import type { ListItem } from "../../tui/ui/list-model.ts";
+import { COMMANDS } from "../commands.ts";
+
+export interface PaletteAction { readonly id: string; readonly label: string; readonly description: string; readonly section: string; readonly chord?: string; readonly when?: boolean }
+
+export interface PaletteInput {
+  readonly bindings: Readonly<Record<string, readonly string[]>>;
+  readonly busy: boolean;
+  readonly extraCommands: readonly { name: string; description: string; section: string }[];
+  readonly models: readonly { key: string; label: string; description: string; current: boolean }[];
+  readonly toolsExpanded: boolean;
+  readonly thinkingExpanded: boolean;
+  readonly sidebar: boolean;
+}
+
+/** Which section a built-in command belongs to; unlisted ones go under "Commands". */
+const SECTION: Readonly<Record<string, string>> = {
+  model: "Model", "scoped-models": "Model", thinking: "Model", login: "Model", logout: "Model",
+  new: "Session", resume: "Session", tree: "Session", fork: "Session", clone: "Session", back: "Session", name: "Session", session: "Session",
+  export: "Session", import: "Session", copy: "Session",
+  usage: "Inspect", state: "Inspect", context: "Inspect", acceptance: "Inspect", tasks: "Inspect", branches: "Inspect", processes: "Inspect", debug: "Inspect",
+  settings: "Configure", reload: "Configure", config: "Configure", trust: "Configure", hotkeys: "Configure", models: "Configure",
+};
+
+function chord(bindings: PaletteInput["bindings"], action: string): string | undefined {
+  return bindings[action]?.[0];
+}
+
+export function paletteActions(input: PaletteInput): PaletteAction[] {
+  const b = input.bindings;
+  const actions: PaletteAction[] = [
+    { id: "action:toggleTools", label: input.toolsExpanded ? "Collapse tool output" : "Expand tool output", description: "all tool cards", section: "View", ...opt(chord(b, "app.toggleTools")) },
+    { id: "action:toggleThinking", label: input.thinkingExpanded ? "Hide thinking" : "Show thinking", description: "reasoning blocks", section: "View", ...opt(chord(b, "app.toggleThinking")) },
+    { id: "action:toggleSidebar", label: input.sidebar ? "Hide sidebar" : "Show sidebar", description: "segment state (≥120 columns)", section: "View", ...opt(chord(b, "app.toggleSidebar")) },
+    { id: "action:appearance", label: "Appearance", description: "dark, light or follow terminal", section: "View" },
+    { id: "action:animations", label: "Animations", description: "enable or reduce motion", section: "View" },
+    { id: "action:bottom", label: "Jump to latest", description: "resume following new output", section: "View", ...opt(chord(b, "app.scroll.bottom")) },
+    { id: "action:top", label: "Jump to start", description: "first message of this session", section: "View", ...opt(chord(b, "app.scroll.top")) },
+    { id: "action:editor", label: "Open draft in $EDITOR", description: "edit the prompt externally", section: "Compose", ...opt(chord(b, "app.externalEditor")) },
+    { id: "action:pasteImage", label: "Paste image from clipboard", description: "attach to the draft", section: "Compose", ...opt(chord(b, "app.clipboard.pasteImage")) },
+    { id: "action:cycleThinking", label: "Cycle thinking level", description: "next supported level", section: "Model", ...opt(chord(b, "app.cycleThinking")) },
+    { id: "action:interrupt", label: "Interrupt", description: "stop the running turn", section: "Run", when: input.busy, ...opt(chord(b, "app.interrupt")) },
+    { id: "action:quit", label: "Quit", description: "exit xeno", section: "Run", ...opt(chord(b, "app.exit")) },
+  ];
+  return actions.filter(action => action.when !== false);
+}
+
+function opt(value: string | undefined): { chord?: string } { return value ? { chord: value } : {}; }
+
+export function paletteItems(input: PaletteInput): ListItem[] {
+  const items: ListItem[] = [];
+  const model = input.models.find(entry => entry.current);
+  for (const action of paletteActions(input)) items.push({ value: action.id, label: action.label, description: action.description, section: action.section, ...(action.chord ? { hint: action.chord } : {}) });
+  for (const command of COMMANDS) {
+    if (command.name === "exit" || command.name === "quit") continue;
+    const blocked = input.busy && command.busy === "idle";
+    items.push({ value: `command:${command.name}`, label: `/${command.name}`, description: blocked ? `${command.description} · needs an idle session` : command.description,
+      section: SECTION[command.name] ?? "Commands", disabled: blocked,
+      ...(command.name === "model" && model ? { hint: model.label } : command.name === "model" && input.bindings["app.model"]?.[0] ? { hint: input.bindings["app.model"][0] } : {}) });
+  }
+  for (const command of input.extraCommands) items.push({ value: `command:${command.name}`, label: `/${command.name}`, description: command.description, section: command.section });
+  for (const entry of input.models) items.push({ value: `model:${entry.key}`, label: entry.label, description: entry.description, section: "Switch model", keywords: entry.key, disabled: input.busy,
+    ...(input.busy ? { hint: "after this turn" } : entry.current ? { hint: "current" } : {}) });
+  return sortSections(items);
+}
+
+const ORDER = ["View", "Model", "Session", "Compose", "Inspect", "Configure", "Commands", "Prompts", "Skills", "Extensions", "Run", "Switch model"];
+function sortSections(items: ListItem[]): ListItem[] {
+  const rank = (section: string | undefined) => { const at = ORDER.indexOf(section ?? ""); return at < 0 ? ORDER.length : at; };
+  return items.map((item, index) => ({ item, index })).sort((a, b) => rank(a.item.section) - rank(b.item.section) || a.index - b.index).map(entry => entry.item);
+}
+
+/** `/` completion: the same command entries, filtered by prefix, ranked by the list model's fuzzy order. */
+export function slashItems(input: PaletteInput, prefix: string): ListItem[] {
+  const all = paletteItems(input).filter(item => item.value.startsWith("command:"));
+  const q = prefix.toLowerCase();
+  return all.filter(item => item.label.slice(1).toLowerCase().startsWith(q)).concat(all.filter(item => !item.label.slice(1).toLowerCase().startsWith(q) && item.label.toLowerCase().includes(q)))
+    .map(item => ({ ...item, value: `${item.label} ` }));
+}

package/src/apps/ui/project.ts

@@ -0,0 +1,127 @@
+/**
+ * Log projection → view items. Pure apart from the renderer callbacks it
+ * hands to tool cards, which are themselves pure functions of the log.
+ *
+ * Inputs are the durable transcript (core/transcript.ts), the UI-only
+ * notices anchored to it, and the live (uncommitted) stream. The stream is
+ * never history: once the log has the assistant event, the stream is gone
+ * and the projected item takes its place (same id scheme, no flash).
+ */
+import type { TranscriptItem } from "../../core/transcript.ts";
+import type { ImageView, ViewItem } from "../../tui/ui/items.ts";
+import type { ImageRef } from "../../core/images.ts";
+import { toolCard, toolDetail, toolPreview, toolSummary } from "../../tui/ui/tool-card.ts";
+import type { Style } from "../../tui/style.ts";
+
+export interface Notice { readonly id: string; readonly after: number; readonly item: ViewItem }
+
+export interface LiveStream {
+  readonly thinking: string;
+  readonly text: string;
+  readonly tools: readonly { id: string; name: string; arguments: string }[];
+  readonly output: string;
+  readonly bash: string | null;
+  readonly retry?: string;
+}
+
+export interface ProjectOptions {
+  readonly notices: readonly Notice[];
+  readonly live?: LiveStream;
+  /** Extension renderers; return lines to replace the default card, undefined to keep it. */
+  readonly customTool?: (item: Extract<TranscriptItem, { kind: "tool" }>) => ((width: number) => string[]) | undefined;
+  readonly customMessage?: (item: Extract<TranscriptItem, { kind: "custom" }>) => ((width: number) => string[]) | undefined;
+  readonly hiddenThinkingLabel?: string;
+  readonly style?: () => Style | undefined;
+  /**
+   * Views of durable items from earlier paints, by item id. A log item never
+   * changes without a new revision, so an equal key means an equal view, and
+   * a long session re-projects only what changed (refactor-tui-chrome-cleanup
+   * DoD 5). The caller clears it when renderers or labels change.
+   */
+  readonly cache?: Map<string, { readonly key: string; readonly view: ViewItem | undefined }>;
+}
+
+/** CutReason → words. Unknown reasons (future log versions) print verbatim. */
+const SEGMENT_REASONS: Readonly<Record<string, string>> = {
+  trigger: "context boundary", hard_limit: "context limit", model_checkpoint: "model switch",
+};
+
+export function projectItems(items: readonly TranscriptItem[], options: ProjectOptions): ViewItem[] {
+  const out: ViewItem[] = [];
+  let notice = 0;
+  const flush = (upTo: number) => { while (notice < options.notices.length && options.notices[notice]!.after <= upTo) out.push(options.notices[notice++]!.item); };
+  flush(0);
+  let segment = 1;
+  items.forEach((item, index) => {
+    // A segment's label depends on how many came before it, so that count is part of its key.
+    const key = item.kind === "segment" ? `${item.revision}|${segment}` : item.revision;
+    const hit = options.cache?.get(item.id);
+    let view: ViewItem | undefined;
+    if (hit && hit.key === key) { view = hit.view; if (item.kind === "segment" && item.nextNode === undefined) segment++; }
+    else { view = projectOne(item, options, () => ++segment); options.cache?.set(item.id, { key, view }); }
+    if (view) out.push(view);
+    flush(index + 1);
+  });
+  while (notice < options.notices.length) out.push(options.notices[notice++]!.item);
+  const live = options.live;
+  if (live) {
+    if (live.bash !== null) out.push({ kind: "tool", id: "live:bash", rev: `${live.bash.length}`, name: "shell", summary: "running", status: "pending", detail: () => live.bash!.split("\n").slice(-40) });
+    const logged = new Set(items.flatMap(item => item.kind === "tool" ? [item.callId] : []));
+    for (const tool of live.tools) {
+      if (logged.has(tool.id)) continue;
+      let input: unknown;
+      try { input = JSON.parse(tool.arguments) as unknown; } catch { input = {}; }
+      out.push({ kind: "tool", id: `live:tool:${tool.id}`, rev: `${tool.arguments.length}`, name: tool.name, summary: toolSummary(tool.name, input) || "preparing…", status: "pending",
+        detail: width => toolDetail({ name: tool.name, input, result: null }, width, options.style?.()) });
+    }
+    if (live.output) out.push({ kind: "lines", id: "live:output", rev: `${live.output.length}`, render: () => live.output.split("\n").slice(-12) });
+    if (live.retry) out.push({ kind: "notice", id: "live:retry", rev: live.retry, text: live.retry, tone: "warning" });
+    if (live.thinking) out.push({ kind: "thinking", id: "live:thinking", rev: `${live.thinking.length}`, text: live.thinking, streaming: true, ...(options.hiddenThinkingLabel !== undefined ? { label: options.hiddenThinkingLabel } : {}) });
+    if (live.text) out.push({ kind: "assistant", id: "live:text", rev: `${live.text.length}`, text: live.text, streaming: true });
+  }
+  return out;
+}
+
+function projectOne(item: TranscriptItem, options: ProjectOptions, nextSegment: () => number): ViewItem | undefined {
+  const base = { id: item.id, rev: item.revision };
+  switch (item.kind) {
+    case "user":
+      return { ...base, kind: "user", text: item.text, ...(item.images?.length ? { images: item.images.map(imageView) } : {}), ...(item.interrupted ? { interrupted: true } : {}) };
+    case "assistant": return item.text.trim() ? { ...base, kind: "assistant", text: item.text } : undefined;
+    case "thinking": return item.text.trim() ? { ...base, kind: "thinking", text: item.text, ...(options.hiddenThinkingLabel !== undefined ? { label: options.hiddenThinkingLabel } : {}) } : undefined;
+    case "notice": return { ...base, kind: "notice", text: item.text };
+    case "custom": {
+      const render = options.customMessage?.(item);
+      return render ? { ...base, kind: "lines", render } : { ...base, kind: "notice", text: `[${item.customType}] ${item.text}` };
+    }
+    case "tool": {
+      const custom = options.customTool?.(item);
+      const card = toolCard(item);
+      return { ...base, kind: "tool", name: item.name, summary: card.summary, status: card.status, ...(card.evidence ? { evidence: card.evidence } : {}),
+        ...(custom ? {} : { preview: toolPreview(item) }), ...(item.result?.images?.length ? { images: item.result.images.map(imageView) } : {}),
+        detail: custom ?? (width => toolDetail(item, width, options.style?.())) };
+    }
+    case "shell": {
+      const code = item.exit; // the logged exit code is the evidence (D11)
+      // The log appends `exit N · status · reason` as the content's last line; the card's evidence already says it.
+      const output = item.output.replace(/^exit -?\d+[^\n]*\n?/, "").replace(/\n?exit -?\d+ · [^\n]*$/, "").replace(/\s+$/, "");
+      return { ...base, kind: "tool", name: item.excluded ? "!!" : "!", summary: item.command, status: code === 0 ? "ok" : "error", evidence: `exit ${code}`,
+        // Shell output keeps its last two lines in view while folded (refactor-tui-chrome-cleanup DoD 2).
+        preview: output.split("\n").filter(line => line.trim()).slice(-2),
+        // The exit code is already the card's evidence; the body is the output itself.
+        detail: () => (output || "(no output)").split("\n").slice(0, 200) };
+    }
+    case "segment": {
+      const node = item.nextNode ?? nextSegment();
+      return { ...base, kind: "segment", label: `node ${node} · ${SEGMENT_REASONS[item.reason] ?? item.reason}`,
+        detail: `handoff ${shortRef(item.handoff)}${item.nextModel ? ` → ${item.nextModel}` : ""} · history before this line is carried as structured state, not replayed` };
+    }
+  }
+}
+
+function shortRef(ref: string): string { return ref.split("/").pop() ?? ref; }
+
+/** What the view needs of a logged image: its address, name and pixel size. Never the bytes (D8). */
+export function imageView(image: ImageRef): ImageView {
+  return { sha256: image.sha256, name: image.name, width: image.width, height: image.height };
+}

package/src/apps/ui/standalone.ts

@@ -0,0 +1,146 @@
+/**
+ * Pickers that run before a session exists (startup session choice, project
+ * trust, `xeno config`). Each borrows the terminal for one dialog on its own
+ * renderer and gives it back; none of them creates a durable session.
+ * Same dialog component as the session UI, so keys and look match.
+ */
+import { BoxRenderable, createCliRenderer, type CliRenderer } from "@opentui/core";
+import { defaultKeymap, type Keymap } from "../../core/keymap.ts";
+import { nextResourceOverride } from "../../core/resource-selection.ts";
+import { selectSessions } from "../../core/session-browser.ts";
+import { builtinTheme, type Theme } from "../../core/theme.ts";
+import { projectTrust } from "../../store/trust.ts";
+import { discoverResources, setResourceOverride, type ResourceOptions } from "../../store/resource-index.ts";
+import { loadUiResources } from "../../store/resources.ts";
+import { registerSessionRoot, scanSessionRoots, sessionRoots } from "../../store/session-browser.ts";
+import { sessionsDir, type ListedSession } from "../../store/sessions.ts";
+import { fuzzyMatch } from "../../tui/fuzzy.ts";
+import { DialogHost, type DialogSpec } from "../../tui/ui/dialog.ts";
+import { keyPress } from "../../tui/ui/keys.ts";
+import type { ListItem } from "../../tui/ui/list-model.ts";
+import { Canvas } from "../../tui/ui/canvas.ts";
+import { edgeLine } from "../../tui/ui/edge.ts";
+import { applyTrustChoice, type TrustChoice } from "../project-trust.ts";
+import { uiColors } from "./theme.ts";
+import { trustItems } from "./app.ts";
+
+interface Standalone { renderer: CliRenderer; dialogs: DialogHost; close(): void }
+
+/**
+ * A one-dialog screen: a heading row on top and the same input box the
+ * session uses, pinned to the bottom, with the dialog's title and keys on its
+ * top edge (refactor-tui-dock-layout). Nothing is painted behind it.
+ */
+async function open(theme: Theme, keymap: Keymap, heading: string, handoff?: () => void, renderer?: CliRenderer): Promise<Standalone> {
+  handoff?.();
+  const r = renderer ?? await createCliRenderer({ screenMode: "alternate-screen", exitOnCtrlC: false, exitSignals: [], consoleMode: "disabled", openConsoleOnError: false,
+    enableMouseMovement: false, gatherStats: false, memorySnapshotInterval: 0, maxFps: 60 });
+  // The terminal's palette is not known yet on this short-lived renderer; the
+  // theme's hint picks safe slots. The background is still never painted.
+  const colors = uiColors(theme);
+  r.setBackgroundColor(colors.background);
+  const root = new BoxRenderable(r, { id: "standalone", flexDirection: "column", width: "100%", height: "100%" });
+  const top = new Canvas(r, { id: "standalone-heading", height: 1, flexShrink: 0, marginLeft: 1, marginRight: 1, colors });
+  top.setRows([[{ text: "xeno", role: "text", bold: true }, { text: `  ${heading}`, role: "muted" }]]);
+  const spacer = new BoxRenderable(r, { id: "standalone-space", flexGrow: 1 });
+  const box = new BoxRenderable(r, { id: "standalone-box", flexDirection: "column", flexShrink: 0, marginLeft: 1, marginRight: 1 });
+  const topEdge = new Canvas(r, { id: "standalone-top", height: 1, flexShrink: 0, colors });
+  const body = new BoxRenderable(r, { id: "standalone-body", flexDirection: "column", flexShrink: 0, border: ["left", "right"], borderStyle: "rounded", borderColor: colors.edge, paddingLeft: 1, paddingRight: 1 });
+  const slot = new BoxRenderable(r, { id: "dialog", flexDirection: "column", flexShrink: 0, visible: false });
+  const bottomEdge = new Canvas(r, { id: "standalone-bottom", height: 1, flexShrink: 0, colors });
+  body.add(slot); box.add(topEdge); box.add(body); box.add(bottomEdge);
+  root.add(top); root.add(spacer); root.add(box);
+  r.root.add(root);
+  const dialogs = new DialogHost(r, colors, () => keymap.byAction, slot, () => Math.max(1, r.height - 4));
+  const paint = () => {
+    const width = Math.max(2, r.width - 2);
+    topEdge.setRows([edgeLine({ width, corners: ["╭", "╮"], left: dialogs.title ? [{ segs: [{ text: dialogs.title, role: "text", bold: true }], priority: 0, min: 8 }] : [],
+      right: dialogs.edgeHint ? [{ segs: [{ text: dialogs.edgeHint, role: "muted" }], priority: 3, min: 10 }] : [] })]);
+    bottomEdge.setRows([edgeLine({ width, corners: ["╰", "╯"] })]);
+  };
+  dialogs.onChrome = paint;
+  r.on("resize", () => { dialogs.layout(); paint(); });
+  paint();
+  r.keyInput.on("keypress", event => { if (dialogs.key(keyPress(event))) event.preventDefault(); });
+  r.keyInput.on("paste", event => { if (dialogs.paste(new TextDecoder().decode(event.bytes)) === false) event.preventDefault(); });
+  return { renderer: r, dialogs, close: () => { dialogs.dispose(); if (!renderer) r.destroy(); } };
+}
+
+/** Show one dialog; resolves with the picked value, or null when it is closed without a choice. */
+function ask(host: Standalone, spec: (resolve: (value: string | null) => void) => DialogSpec): Promise<string | null> {
+  return new Promise(resolve => {
+    let settled = false;
+    const done = (value: string | null) => { if (!settled) { settled = true; resolve(value); } };
+    // A pick empties the stack before its callback runs; let the callback answer first.
+    host.dialogs.onClosed = () => queueMicrotask(() => done(null));
+    host.dialogs.push(spec(done));
+  });
+}
+
+export async function pickProjectTrust(workspace: string, handoff?: () => void, renderer?: CliRenderer): Promise<boolean> {
+  const decision = await projectTrust(workspace);
+  const ui = await loadUiResources({ workspace, trusted: false });
+  const host = await open(ui.theme, ui.keymap, "project trust", handoff, renderer);
+  try {
+    const choice = await ask(host, resolve => ({ kind: "list", title: "Trust this project?", search: false, items: trustItems(workspace),
+      intro: [workspace, "This project has its own .xeno configuration (settings, skills, extensions). Tool permissions are separate."],
+      ...(decision.saved ? { selected: decision.saved.trusted ? decision.saved.path === workspace ? "here" : "parent" : "never" } : {}),
+      onPick: item => resolve(item.value) }));
+    return choice === null ? false : applyTrustChoice(workspace, choice as TrustChoice);
+  } finally { host.close(); }
+}
+
+type Session = Extract<ListedSession, { ok: true }>;
+
+export async function pickStartupSession(opts: { workspace: string; sessionDir?: string; say: (line: string) => void; keymap?: Keymap; theme?: Theme },
+  handoff?: () => void, renderer?: CliRenderer): Promise<string | null> {
+  const root = { path: sessionsDir(opts.workspace, opts.sessionDir), workspace: opts.workspace };
+  await registerSessionRoot(root).catch(error => opts.say(String(error)));
+  const host = await open(opts.theme ?? builtinTheme("dark"), opts.keymap ?? defaultKeymap(), "resume a session", handoff, renderer);
+  const scan = new AbortController();
+  let rows: Session[] = [];
+  let scope: "current" | "all" = "current";
+  const items = (query = ""): ListItem[] => selectSessions(rows, query, "threaded", false, (q, text) => { const score = fuzzyMatch(text, q); return { matches: score !== null, score: score ?? Infinity }; })
+    .map(row => ({ value: row.path, label: "  ".repeat(Math.min(8, row.depth)) + (row.depth ? "↳ " : "") + (row.name?.trim() || row.text?.split("\n").find(Boolean)?.slice(0, 90) || row.id),
+      description: [row.updated_at?.slice(0, 16).replace("T", " ") ?? "", row.model ?? "", scope === "all" ? row.workspace ?? "" : ""].filter(Boolean).join(" · ") }));
+  try {
+    let spec: DialogSpec & { kind: "list" } | undefined;
+    const load = async () => {
+      rows = [];
+      for await (const batch of scanSessionRoots(scope === "current" ? [root] : await sessionRoots(root), scan.signal)) {
+        rows.push(...batch.sessions.filter((row): row is Session => row.ok));
+        if (spec && host.dialogs.top === spec) host.dialogs.list?.setItems(items(host.dialogs.list.query));
+      }
+    };
+    const picked = ask(host, resolve => (spec = { kind: "list", title: "Resume · this folder", items: [], rows: 16, empty: "Loading sessions…", placeholder: "search sessions",
+      actions: [{ key: "tab", label: "all workspaces", run: async () => { scope = scope === "current" ? "all" : "current"; spec!.title = `Resume · ${scope === "current" ? "this folder" : "all workspaces"}`; await load(); } }],
+      onPick: item => resolve(item.value) }));
+    await load();
+    if (!rows.length && scope === "current" && (await sessionRoots(root)).length === 1) { opts.say("No sessions to resume"); host.dialogs.clear(); return null; }
+    return await picked;
+  } finally { scan.abort(); host.close(); }
+}
+
+export async function runResourceConfig(options: ResourceOptions, handoff?: () => void, renderer?: CliRenderer): Promise<void> {
+  let index = await discoverResources(options);
+  const ui = await loadUiResources(options, index);
+  const host = await open(ui.theme, ui.keymap, "resources", handoff, renderer);
+  let scope: "user" | "project" = options.local ? "project" : "user";
+  const items = (): ListItem[] => index.entries.map(entry => ({ value: `${entry.kind}:${entry.path}`, label: `${entry.enabled ? "◉" : "○"} ${entry.name}`, section: entry.kind,
+    description: `${entry.scope}${entry.trusted ? "" : " · untrusted"}${scope === "project" ? ` · ${entry.override}` : ""}`, keywords: entry.path }));
+  try {
+    let spec: DialogSpec & { kind: "list" } | undefined;
+    await ask(host, () => (spec = { kind: "list", title: `Resources · ${scope === "user" ? "global" : "project"}`, items: items(), rows: 16, empty: "No resources found",
+      hint: "space toggle · tab scope · esc close",
+      actions: [
+        { key: "tab", label: "scope", run: () => { scope = scope === "user" ? "project" : "user"; spec!.title = `Resources · ${scope === "user" ? "global" : "project"}`; host.dialogs.list?.setItems(items()); } },
+        { key: "space", label: "toggle", run: async item => {
+          const entry = index.entries.find(row => `${row.kind}:${row.path}` === item?.value);
+          if (!entry) return;
+          await setResourceOverride(index, entry, scope, scope === "project" ? nextResourceOverride(entry.override) : entry.inherited ? "skip" : "load");
+          index = await discoverResources(options);
+          host.dialogs.list?.setItems(items(), item?.value);
+        } },
+      ] }));
+  } finally { host.close(); }
+}