@milpa/comal 0.0.0-stage → 0.1.1

package/src/tui/screen.mjs

@@ -0,0 +1,677 @@
+import { t, formatNumber } from '../i18n/index.mjs';
+import { workProjection } from '../work-plan.mjs';
+import { Composer } from './composer.mjs';
+import { MarkdownRenderer, DataTableParser } from './markdown.mjs';
+import { TerminalInput } from './input.mjs';
+import { copyText } from './clipboard.mjs';
+import { tone, safeText, wrap, width, clip, pad, progressBar, stripANSI, terminalSurface } from './text.mjs';
+import { brandingWelcome, brandingStatus, brandMotionEnabled, BRAND_FRAME_INTERVAL_MS, BRAND_WELCOME_FRAMES } from './brand.mjs';
+import { commandCatalog, commandSuggestions, applySuggestion, contextualTip } from './discovery.mjs';
+
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const MOUSE_ON = '\x1b[?1000h\x1b[?1006h';
+const MOUSE_OFF = '\x1b[?1000l\x1b[?1006l';
+const HELP = "# Comal · keyboard\n\n| Action | Key |\n| --- | --- |\n| Discover commands and tools | F6 |\n| Complete command or argument | / and Tab; ↑/↓ chooses; Esc closes |\n| Send / enqueue | Enter (suggestions only complete) |\n| New line | Alt+Enter or Ctrl+J |\n| Switch mode | Shift+Tab |\n| Edit with $VISUAL/$EDITOR | Ctrl+G |\n| Work board | F3 or /board |\n| Continue from checkpoint | /work resume |\n| Sessions / resume | F2 or Ctrl+S |\n| Message queue | F4 or Ctrl+Q |\n| Expand tool results | Ctrl+O |\n| Scroll history | Mouse wheel / PgUp / PgDn |\n| Select text with mouse | F5 or /select; F5 or Esc returns |\n| Copy last full response | Alt+C or /copy |\n| Go to end | Ctrl+End |\n| Composer history | ↑/↓ on first/last line |\n| Start / end of line | Home / End or Ctrl+A / Ctrl+E |\n| Delete word / start / end | Ctrl+W / Ctrl+U / Ctrl+K |\n| Cancel turn / pause goal | Ctrl+C or Esc while working |\n| Exit | Ctrl+D with empty composer or /exit |\n\nYou can keep typing during streaming. Sent messages run in order when the current turn ends. F4 lets you pause, edit, remove, and reorder the queue.\n\n/context shows the context budget. /compact derives state without LLM and waits its turn if there is active work. /state shows request and state; /audit verifies the ledger. The original history is preserved.\n/house shows execution receipts and interrupted operations; /operations shows contracts and declared effects. Execution success does not certify the human goal.\n/plugins shows plugins, dependencies, and operations; enable/disable/reload wait their turn and only the user can change their lifecycle.\n/model ID and /effort LEVEL change the next call; during work they stay queued. /models lists models and /capabilities shows support, provenance, and levels. E indicates effort; Ctx shows the effective window (k/M tokens); ~ indicates a configured limit, ? unknown/fallback capability. /context shows exact values, reserve, and source. /login PROVIDER authenticates; /logout PROVIDER removes credentials from Comal.\n\n**Help keeps the composer active.** You can type while viewing it; PgUp/PgDn scrolls it and Esc/F1 closes it. Sending returns to the conversation. The wheel scrolls the conversation; the arrows edit the draft. F5 releases the mouse and freezes the view: drag to select and use your terminal's copy action (usually Ctrl+Shift+C). Work continues and the view updates when you return. /copy preserves Markdown and code blocks, without the screen line wrapping. Multi-line paste is not sent automatically.";
+
+export class TerminalScreen {
+  constructor({ input = process.stdin, output = process.stdout, metadata = {}, clipboard = copyText, env = process.env } = {}) {
+    Object.assign(this, { input, output, metadata, env }); this.composer = new Composer(); this.markdown = new MarkdownRenderer(); this.tables = new DataTableParser();
+    this.clipboard = clipboard; this.selecting = false;
+    this.blocks = []; this.toolBlocks = new Map(); this.subagentBlocks = new Map(); this.countedChildResults=new Set(); this.queue = { items: [], paused: false, interrupted: [] }; this.busy = false; this.ready = false;
+    this.mode = metadata.mode || 'default'; this.phase = t("Connecting to the model"); this.frame = 0; this.scroll = 0; this.lastContentLength = 0; this.expandedTools = false;
+    this.discovery = {}; this.completionIndex = 0; this.brandStarted = Date.now();
+    this.callbacks = {}; this.closed = false; this.suspended = false; this.previous = []; this.goal = null; this.usage = 0; this.turn = 0; this.maxTurns = 12;
+    this.finished = new Promise(resolve => this.resolveFinished = resolve);
+  }
+  start() {
+    if (this.started || this.closed) return this;
+    this.started = true;
+    this.originalRaw = this.input.isRaw || false;
+    this.input.setRawMode?.(true); this.input.resume();
+    this.decoder = new TerminalInput({ onKey: (text, key) => { Promise.resolve(this.handleKey(text, key)).catch(error => this.notice(error.message, true)); }, onMouse: event => this.handleMouse(event), onPaste: text => this.paste(text), onError: error => this.notice(error.message, true) });
+    this.onData = chunk => { if (!this.suspended) this.decoder.feed(chunk); };
+    this.onResize = () => { if (this.selecting) this.setSelection(false); this.previous = []; this.schedule(); };
+    this.input.on('data', this.onData); this.output.on('resize', this.onResize);
+    this.output.write('\x1b[?1049h\x1b[?2004h\x1b[?25l' + MOUSE_ON);
+    this.timer = setInterval(() => {
+      const welcome = !this.blocks.length && this.motionEnabled() && this.brandFrame() < BRAND_WELCOME_FRAMES;
+      if ((this.busy || !this.ready || welcome || this.setup?.kind === 'status' || this.setup?.validating) && !this.suspended && !this.selecting) { this.frame++; this.render(); }
+    }, 120);
+    this.render(); return this;
+  }
+  configure(callbacks) { this.clearSetup(); this.callbacks = callbacks; this.ready = true; this.phase = t("Ready"); this.schedule(); }
+  // Setup owns the existing terminal surface before a provider/session exists.
+  // Its editor is isolated from conversation drafts, history and callbacks.
+  beginSetup(state, signal, resolve = () => {}) {
+    this.clearSetup();
+    if (this.closed || signal?.aborted) { resolve(null); return null; }
+    let settled = false;
+    state.finish = value => {
+      if (settled) return; settled = true;
+      signal?.removeEventListener('abort', abort);
+      state.editor?.clear(); state.editor = null;
+      if (this.setup === state) this.setup = null;
+      resolve(value); this.schedule();
+    };
+    const abort = () => state.finish(null);
+    signal?.addEventListener('abort', abort, { once: true });
+    this.setup = state; this.schedule(); return state;
+  }
+  clearSetup() { this.setup?.finish(null); }
+  setupChoice({ title, description = '', items, signal } = {}) {
+    if (!Array.isArray(items) || !items.length || items.length > 100 || items.some(item => typeof item?.id !== 'string' || !item.id || typeof item.label !== 'string') || new Set(items.map(item => item.id)).size !== items.length) throw new Error(t('Setup requires between 1 and 100 distinct choices.'));
+    return new Promise(resolve => this.beginSetup({ kind: 'choice', title: safeText(title || t('Choose a connection')), description: safeText(description), items: items.map(item => ({ id: item.id, label: safeText(item.label), description: safeText(item.description || '') })), index: 0 }, signal, resolve));
+  }
+  setupInput({ title, description = '', value = '', secret = false, signal, validate } = {}) {
+    const clean = safeText(value).replace(/[\r\n\t]+/g, ' ');
+    if (Buffer.byteLength(clean) > 4096) throw new Error(t('Setup values support up to 4096 bytes.'));
+    return new Promise(resolve => this.beginSetup({ kind: 'input', title: safeText(title || t('Connection settings')), description: safeText(description), editor: new Composer(clean), secret: Boolean(secret), validate }, signal, resolve));
+  }
+  setupStatus({ title, description = '', signal } = {}) {
+    this.beginSetup({ kind: 'status', title: safeText(title || t('Connecting')), description: safeText(description) }, signal);
+  }
+  insertSetupText(text) {
+    const state = this.setup; if (state?.kind !== 'input' || state.validating) return;
+    const clean = safeText(text, { preserveTabs: true }).replace(/[\r\n\t]+/g, ' ');
+    if (Buffer.byteLength(state.editor.text + clean) > 4096) state.error = t('Use at most 4096 bytes.');
+    else { state.editor.insert(clean); state.error = null; }
+    this.schedule();
+  }
+  async handleSetupKey(text, key) {
+    const state = this.setup, name = key.name;
+    if (name === 'escape' || key.ctrl && name === 'c') {
+      state.finish(null);
+      if (state.kind === 'status') await this.callbacks.onSetupCancel?.();
+      if (key.ctrl && name === 'c') { if (this.callbacks.onInterrupt) await this.callbacks.onInterrupt(); else await this.callbacks.onAction?.('interrupt'); }
+      return;
+    }
+    if (state.kind === 'status' || state.validating) return;
+    if (state.kind === 'choice') {
+      if (name === 'up') state.index = Math.max(0, state.index - 1);
+      else if (name === 'down') state.index = Math.min(state.items.length - 1, state.index + 1);
+      else if (name === 'home') state.index = 0;
+      else if (name === 'end') state.index = state.items.length - 1;
+      else if (name === 'return' && !key.meta && !key.shift) state.finish(state.items[state.index].id);
+      this.schedule(); return;
+    }
+    if (name === 'return' && !key.meta && !key.shift) {
+      const value = state.editor.text; state.validating = true; state.error = null; this.schedule();
+      try {
+        const result = await state.validate?.(value);
+        if (this.setup !== state) return;
+        if (result === false || typeof result === 'string' && result.length) state.error = state.secret ? t('Check the value and try again.') : safeText(typeof result === 'string' ? result : t('Check the value and try again.'));
+        else state.finish(value);
+      } catch (error) { if (this.setup === state) state.error = state.secret ? t('Check the value and try again.') : safeText(error?.message || t('Check the value and try again.')); }
+      finally { state.validating = false; this.schedule(); }
+      return;
+    }
+    if (name === 'return' || name === 'linefeed' || key.ctrl && name === 'j') return;
+    if (!key.ctrl && !key.meta && text && !text.startsWith('\x1b')) this.insertSetupText(text);
+    else { state.editor.key('', key); state.error = null; this.schedule(); }
+  }
+  renderSetup(columns, rows) {
+    const state = this.setup, inner = Math.max(1, columns - 4);
+    const header = [tone.bold(' COMAL') + tone.accent(t(' · setup')), tone.muted('─'.repeat(columns))];
+    const title = wrap(state.title, inner).map(line => '  ' + tone.accent(line));
+    const description = wrap(state.description, inner).map(line => '  ' + tone.muted(line));
+    const prefix = [...header, '', ...title, '', ...description, ''];
+    const cancellation = this.ready ? t('Ctrl+C cancels') : t('Ctrl+C exits');
+    const hint = (state.kind === 'choice' ? t('↑/↓ choose · Enter continues · Esc back') : state.kind === 'input' ? t('Enter continues · Esc back') : t('Esc back')) + ' · ' + cancellation;
+    let body = [], cursor = null;
+    const budget = Math.max(1, rows - Math.min(prefix.length, rows - 4) - 2);
+    if (state.kind === 'choice') {
+      const start = Math.max(0, state.index - Math.max(1, Math.floor(budget / 2)) + 1);
+      for (let index = start; index < state.items.length && body.length < budget; index++) {
+        const item = state.items[index], selected = index === state.index;
+        body.push((selected ? tone.accent : tone.muted)(`  ${selected ? '❯' : ' '} ${clip(item.label, Math.max(1, columns - 5))}`));
+        if (item.description && body.length < budget) body.push('    ' + tone.muted(clip(item.description, Math.max(1, columns - 5))));
+      }
+    } else if (state.kind === 'input') {
+      const editor = state.editor, display = state.secret ? new Composer('•'.repeat(editor.buffer.length)) : editor;
+      if (state.secret) display.cursor = editor.cursor;
+      const layout = display.layout(Math.max(2, columns - 6)), height = Math.max(1, budget - (state.error ? 1 : 0)), offset = Math.max(0, layout.cursorRow - height + 1);
+      body = layout.lines.slice(offset, offset + height).map((line, index) => tone.muted(index === 0 ? '  ❯ ' : '  │ ') + line);
+      cursor = { row: layout.cursorRow - offset + 1, col: layout.cursorColumn + 5 };
+      if (state.error) body.push('  ' + tone.warning(clip(state.error, inner)));
+    } else body.push('  ' + tone.accent(this.spinner() + ' ' + t('Working…')));
+    if (state.validating) body.push('  ' + tone.muted(this.spinner() + ' ' + t('Checking…')));
+    const visiblePrefix = prefix.slice(0, Math.max(0, rows - Math.min(body.length, budget) - 2));
+    const lines = [...visiblePrefix, ...body.slice(0, budget)];
+    if (cursor) cursor.row += visiblePrefix.length;
+    while (lines.length < rows - 1) lines.push(''); lines.push(' ' + tone.muted(clip(hint, columns - 1)));
+    if (state.validating) cursor = null;
+    this.draw(lines, cursor, columns, rows);
+  }
+  schedule() {
+    if (this.closed || this.suspended || this.selecting || this.renderTimer) return;
+    this.renderTimer = setTimeout(() => { this.renderTimer = null; this.render(); }, 24);
+  }
+  motionEnabled() { return brandMotionEnabled({ env: this.env, stream: this.output }); }
+  brandFrame() { return Math.floor((Date.now() - this.brandStarted) / BRAND_FRAME_INTERVAL_MS); }
+  spinner() { return SPINNER[(this.motionEnabled() ? this.frame : 0) % SPINNER.length]; }
+  setDiscovery(context = {}) { this.discovery = structuredClone(context); this.schedule(); }
+  discoveryContext() { return { ...this.discovery, effortLevels: this.metadata.modelCapabilities?.effort?.levels || this.discovery.effortLevels, busy: this.busy, queue: this.queue, mode: this.mode, selecting: this.selecting, editingQueue: this.editingQueue }; }
+  refreshDiscovery() { this.callbacks.onDiscover?.(); }
+  hasModalOverlay() { return Boolean(this.setup || this.overlay && this.overlay.kind !== 'help'); }
+  completion() {
+    const signature = JSON.stringify([this.composer.text, this.composer.cursor]);
+    if (signature !== this.completionSignature) { this.completionSignature = signature; this.completionIndex = 0; }
+    const result = commandSuggestions(this.composer.text, this.composer.cursor, this.discoveryContext());
+    const current = this.composer.buffer.slice(result.start, result.end).join('');
+    result.exact = result.items.find(item => item.value.trimEnd() === current);
+    if (result.exact) result.items = [];
+    if (signature === this.dismissedCompletion || this.permission || this.hasModalOverlay() || this.selecting) result.items = [];
+    this.completionIndex = Math.min(this.completionIndex, Math.max(0, result.items.length - 1));
+    return result;
+  }
+  acceptCompletion() {
+    const result = this.completion();
+    const item = result.items[this.completionIndex] || (result.exact?.value !== this.composer.buffer.slice(result.start, result.end).join('') ? result.exact : null);
+    if (!item) return false;
+    if (result.exact === item) result.items = [item];
+    const next = applySuggestion(this.composer.text, result, item);
+    this.composer.setText(next.text, next.cursor, this.composer.attachments.map(({start,end,...item})=>item)); this.draftChanged(); return true;
+  }
+  showPalette() { this.refreshDiscovery(); this.overlay = { kind: 'palette', filter: '', index: 0, tab: 'command', detail: null, scroll: 0 }; this.schedule(); }
+  paletteItems() {
+    const normalize = text => safeText(text).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase('es');
+    const terms = normalize(this.overlay?.filter || '').split(/\s+/).filter(Boolean);
+    return commandCatalog(this.discoveryContext()).filter(item => (this.overlay?.tab === 'tool' ? item.kind === 'tool' : item.kind !== 'tool') && terms.every(term => normalize(`${item.label} ${item.description} ${item.keywords || ''}`).includes(term)));
+  }
+  paletteTool() { return this.discovery.tools?.find(tool => tool.name === this.overlay?.detail); }
+  preparePaletteItem(item) {
+    if (item.inspectOnly) { this.overlay.detail = item.label; this.overlay.scroll = 0; this.schedule(); return; }
+    if (!this.preparedDraft) this.preparedDraft = { ...this.composer.snapshot(), sessionId: this.metadata.sessionId };
+    this.composer.setText(item.value);
+    this.closeOverlay(); this.draftChanged();
+  }
+  updateMetadata(metadata) { const changed=['model','provider','profile','effort'].some(key=>metadata[key]!==undefined && metadata[key]!==this.metadata[key]); if(changed)this.cacheReadTokens=null; Object.assign(this.metadata, metadata); if (metadata.mode) this.mode = metadata.mode; if(changed)this.callbacks.onCapabilitiesChanged?.(); this.schedule(); }
+  setMode(mode) { this.mode = mode; this.schedule(); }
+  setQueue(snapshot) { this.queue = snapshot; this.schedule(); }
+  setBusy(value) { this.busy = value; if (value) { this.startedAt = Date.now(); this.turn = 0; this.phase = t("Preparing turn"); } else this.phase = t("Ready"); this.schedule(); }
+  notice(text, error = false) { this.blocks.push({ role: 'notice', text: safeText(text), error }); if (error && this.overlay) this.overlay.error = safeText(text); this.schedule(); }
+  setDraft(text, attachments = []) { this.composer.setText(text, undefined, attachments); this.schedule(); }
+  setAttachmentStatus(status) { this.attachmentStatus = status; this.schedule(); }
+  draftChanged() { if (!this.composer.attachments.length) this.attachmentStatus = null; this.callbacks.onDraft?.(this.composer.text, this.composer.attachments); this.schedule(); }
+  addTable(text, format, title) { const data = this.tables.parse(text, format); this.blocks.push({ role: 'table', data, text: title }); this.schedule(); }
+  loadSession(session) {
+    this.cacheReadTokens=null;
+    this.preparedDraft = null; this.dismissedCompletion = null; this.blocks = []; this.toolBlocks.clear(); this.subagentBlocks.clear(); this.streaming = null; this.scroll = 0; this.lastContentLength = 0; this.goal = session.goal;
+    const rows = session.rows.filter(row => row.type === 'message').slice(-200);
+    for (const [responseId, row] of rows.entries()) {
+      const message = row.message;
+      if (message.role === 'user' && typeof message.content === 'string' && row.source !== 'goal') this.blocks.push({ role: 'user', text: message.content });
+      if (message.role === 'user' && row.source === 'human_composer' && Array.isArray(message.content)) this.blocks.push({role:'user',text:message.content.filter(block=>block.type==='text').map(block=>block.text).join('\n')});
+      for (const block of Array.isArray(message.content) ? message.content : []) {
+        if (message.role === 'assistant' && block.type === 'text') this.blocks.push({ role: 'assistant', text: block.text, responseId });
+        if (message.role === 'assistant' && block.type === 'tool_use') { const item = { role: 'tool', id: block.id, name: block.name, input: block.input, state: 'interrupted' }; this.blocks.push(item); this.toolBlocks.set(block.id, item); }
+        if (message.role === 'user' && block.type === 'tool_result') { const item = this.toolBlocks.get(block.tool_use_id); if (item) { item.state = block.is_error ? 'error' : 'done'; item.output = block.content; } }
+      }
+    }
+    const history = rows.filter(row => row.message.role === 'user' && row.source !== 'goal' && (typeof row.message.content === 'string' || row.source === 'human_composer')).slice(-100);
+    this.composer.history = history.map(row => typeof row.message.content === 'string' ? row.message.content : row.message.content.filter(block=>block.type==='text').map(block=>block.text).join('\n'));
+    this.composer.historyAttachments = history.map(row=>row.attachments || []);
+    this.composer.setText(session.draft || '', undefined, session.draftAttachments || []); this.attachmentStatus = null; this.metadata.sessionId = session.id; this.metadata.model = session.model; this.metadata.name = session.name;
+    this.context = null; this.work = workProjection(session);
+    if (session.compaction) this.notice(t("Context resumed from the ledger: ~{v0} tokens. Original history preserved.", {v0: session.compaction.after_tokens}));
+    this.countedChildResults.clear();let childUsage=0;
+    for (const row of session.rows.filter(row => row.type === 'subagent')) {
+      if(this.countChildResult(row))childUsage+=(row.usage?.input_tokens || 0)+(row.usage?.output_tokens || 0);
+      let child = this.subagentBlocks.get(row.session_id);
+      if (!child) { child = { role: 'subagent', id: row.session_id }; this.subagentBlocks.set(row.session_id, child); this.blocks.push(child); }
+      Object.assign(child, row, { role: 'subagent', state: row.status === 'running' ? 'interrupted' : row.status });
+    }
+    this.usage = session.rows.filter(row => row.type === 'result' && !row.usage_includes_subagents).reduce((n, row) => n + (row.usage?.input_tokens || 0) + (row.usage?.output_tokens || 0), 0)
+      + childUsage;
+    this.schedule();
+  }
+  countChildResult(row){
+    if(row.runner_state!=='exited' && row.status!=='completed')return false;
+    const key=`${row.session_id}:${row.result_ref?.digest || row.result_ref?.row || row.turn_id || 'legacy'}`;
+    if(this.countedChildResults.has(key))return false;this.countedChildResults.add(key);return true;
+  }
+  handleEvent(event) {
+    if(event.type==='usage_accounting')this.cacheReadTokens=Number.isSafeInteger(event.accounting?.cache_read_tokens)?event.accounting.cache_read_tokens:null;
+    if (event.type === 'model_stream_progress') {
+      if (event.tool_argument_chars) this.phase = t("Preparing tools · {v0} characters", {v0: formatNumber(event.tool_argument_chars)});
+      else if (event.reasoning_chars && !event.text_chars) this.phase = t("Model reasoning · {v0} characters", {v0: formatNumber(event.reasoning_chars)});
+    }
+    if (event.type === 'context_usage') this.context = event;
+    if (event.type === 'vision_status') {
+      const stamp = JSON.stringify([event.supported, event.source, event.images, event.references?.map(ref => ref.sha256)]);
+      if (stamp !== this.lastVisionStamp) { this.lastVisionStamp = stamp; this.notice(event.images ? t("Vision · {v0} images in the request · reserve ~{v1} tokens.", {v0: event.images, v1: event.token_reserve}) : t("Screenshot saved as a reference · {v0}.", {v0: event.supported ? t("no space for pixels in the context") : t("the provider does not advertise vision")})); }
+    }
+    if (event.type === 'context_projection_start') this.phase = t("Deriving state from the ledger");
+    if (event.type === 'context_projection') this.notice(t("State derived \u00b7 ~{v0} tokens \u00b7 0 LLM summary calls \u00b7 evidence saved.", {v0: event.after_tokens}));
+    if (['model_retry', 'response_discarded'].includes(event.type)) {
+      if (this.streaming) { this.streaming.text += t("\n\n[Incomplete response discarded; its tools were not executed.]"); this.streaming = null; }
+      if (event.type === 'model_retry') this.notice(t("Response discarded ({v0}) · bounded retry · maximum output {v1} tokens.", {v0: event.reason, v1: event.max_tokens}));
+    }
+    if (['mcp_reload', 'plugin_status'].includes(event.type)) this.refreshDiscovery();
+    if (event.type === 'mcp_reload') this.notice(t("MCP updated · {v0} servers connected · {v1} tools available in packs.", {v0: event.servers.filter(server => server.status === 'connected').length, v1: event.tools.length}));
+    if (event.type === 'plugin_status') {
+      if (event.state === 'loading') this.phase = t("Enabling plugin {v0}", {v0: event.id});
+      if (['active', 'disabled'].includes(event.state)) this.notice(t("Plugin {v0} · {v1}{v2}", {v0: event.id, v1: event.state, v2: event.operations ? t(" · {v0} operations", {v0: event.operations.length}) : ''}));
+      if (['failed', 'cleanup_failed', 'observer_failed'].includes(event.state)) this.notice(`Plugin ${event.id}: ${event.error}`, true);
+    }
+    if (event.type === 'mcp_reload_error') this.notice(t("MCP reload not applied: {v0}", {v0: event.error}), true);
+    if (event.type === 'mcp_progress') {
+      const tool = [...this.toolBlocks.values()].findLast(block => block.name === event.name && block.state === 'running');
+      if (tool) { tool.progress = event; tool.cacheKey = null; }
+      this.phase = safeText(event.message || `MCP ${event.server}`);
+    }
+    if (event.type === 'subagent_status') {
+      let child = this.subagentBlocks.get(event.session_id);
+      if (!child) { child = { role: 'subagent', id: event.session_id, text: '' }; this.subagentBlocks.set(event.session_id, child); this.blocks.push(child); }
+      Object.assign(child, event, { role: 'subagent', state: event.status });
+      if (this.countChildResult(event)) this.usage += (event.usage?.input_tokens || 0) + (event.usage?.output_tokens || 0);
+    }
+    if (event.type === 'subagent_event') {
+      const child = this.subagentBlocks.get(event.session_id), detail = event.event;
+      if (child) {
+        if (detail.type === 'model_progress') { child.turns = detail.turn; child.max_turns = detail.maxTurns; }
+        if (detail.type === 'tool_use') child.lastTool = detail.name;
+        if (detail.type === 'text_delta') child.text = ((child.text || '') + detail.text).slice(-4000);
+        child.cacheKey = null;
+      }
+      this.schedule(); return;
+    }
+    if (event.type === 'user' && event.source !== 'goal') this.blocks.push({ role: 'user', text: event.userIntent || event.text });
+    if (event.type === 'text_delta') {
+      if (!this.streaming) { this.streaming = { role: 'assistant', text: '' }; this.blocks.push(this.streaming); }
+      this.streaming.text += event.text; this.phase = t("Receiving response");
+    }
+    if (event.type === 'assistant') {
+      if (!this.streaming) { const text = event.message.content.filter(b => b.type === 'text').map(b => b.text).join(''); if (text) this.blocks.push({ role: 'assistant', text }); }
+      this.streaming = null;
+    }
+    if (event.type === 'tool_use') { const item = { role: 'tool', id: event.id, name: event.name, input: event.input, state: 'running' }; this.blocks.push(item); this.toolBlocks.set(event.id, item); this.phase = t("Executing {v0}", {v0: event.name}); }
+    if (event.type === 'tool_result') { const item = this.toolBlocks.get(event.tool_use_id); if (item) { item.state = event.is_error ? 'error' : 'done'; item.output = event.content; } }
+    if (event.type === 'auto_decision') this.blocks.push({ role: 'notice', text: `Auto · ${event.decision}: ${event.reason}`, error: event.decision === 'deny' });
+    if (event.type === 'model_progress') { this.turn = event.turn; this.maxTurns = event.maxTurns; }
+    if (event.type === 'phase') {
+      if (event.state === 'start') this.phase = { worker: t("Waiting for the model"), classifier: t("Checking auto permission"), 'goal-evaluation': t("Checking /goal") }[event.phase] || event.phase;
+      else if (this.busy) this.phase = t("Processing turn");
+    }
+    if (event.type === 'goal_status') {
+      const key = `${event.goal.id}:${event.goal.status}:${event.goal.lastReason}`;
+      if (event.goal.status !== 'active' && key !== this.lastGoalNotice) { this.lastGoalNotice = key; this.notice(`◎ /goal ${event.goal.status}: ${event.goal.lastReason}`, ['failed', 'budget'].includes(event.goal.status)); }
+      this.goal = event.goal;
+    }
+    if (event.type === 'result' && !event.usage_includes_subagents) this.usage += (event.usage?.input_tokens || 0) + (event.usage?.output_tokens || 0);
+    if (event.type === 'work_continuation') this.notice(t("Continues {v0} · {v1}/{v2} calls · checkpoint preserved.", {v0: event.task_id, v1: event.calls, v2: event.limit}));
+    if(event.type==='peer_reply')this.notice(event.status==='failed'?t("The house could not send the report: {v0}", {v0: event.error}):t("The house returned the report to mailbox {v0} · {v1}.", {v0: event.to.slice(0,8), v1: event.status}),event.status==='failed');
+    if (event.type === 'result' && event.work_stop_reason) this.notice(t("Work: {v0}.", {v0: event.work_stop_reason}));
+    if (event.type === 'work_open') this.notice(t("{v0} open tasks remain · /work resume continues from the checkpoint.", {v0: event.remaining.length}));
+    if (event.type === 'work_board' && (!event.session_id || event.session_id === this.metadata.sessionId)) this.work = event.board;
+    if (event.type === 'result' && event.work) this.work = event.work;
+    if (event.type === 'init') this.metadata.model = event.model;
+    if (this.blocks.length > 250) this.blocks.splice(0, this.blocks.length - 250);
+    this.schedule();
+  }
+  async confirm(name, input, signal) {
+    if (signal?.aborted || this.closed) return false;
+    if (this.selecting) this.setSelection(false);
+    return new Promise(resolve => {
+      let settled=false;
+      const finish = allowed => { if(settled)return;settled=true;signal?.removeEventListener('abort', abort);if(this.permission===question)this.permission = null;this.schedule();resolve(allowed); };
+      const abort = () => finish(false);
+      const question = { name, input, allowed: false, scroll: 0, finish };
+      this.permission = question;signal?.addEventListener('abort', abort, { once: true });if(signal?.aborted)abort();else this.schedule();
+    });
+  }
+  showSessions(items) { this.overlay = { kind: 'sessions', items, filter: '', index: Math.max(0, items.findIndex(item => item.id !== this.metadata.sessionId)) }; this.schedule(); }
+  showQueue() { this.overlay = { kind: 'queue', index: 0 }; this.schedule(); }
+  showHelp() { this.overlay = { kind: 'help', scroll: 0 }; this.schedule(); }
+  closeOverlay() { this.overlay = null; this.callbacks.onAction?.('queueKick'); this.schedule(); }
+  filteredSessions() { const query = this.overlay?.filter?.toLowerCase() || ''; return (this.overlay?.items || []).filter(item => `${item.name || ''} ${item.prompt} ${item.id} ${item.model}`.toLowerCase().includes(query)); }
+  paste(text) {
+    if (this.setup) { this.insertSetupText(text); return; }
+    if (this.selecting) return;
+    if (this.permission) return;
+    if (this.overlay?.kind === 'palette' && !this.overlay.detail) { this.overlay.filter += safeText(text).replace(/\n/g, ' ').slice(0, 150); this.overlay.index = 0; this.schedule(); return; }
+    if (this.overlay?.kind === 'sessions') { this.overlay.filter += safeText(text).replace(/\n/g, ' ').slice(0, 150); this.overlay.index = 0; this.schedule(); return; }
+    if (this.hasModalOverlay()) return;
+    try { this.composer.insert(text); this.draftChanged(); } catch (e) { this.notice(e.message, true); }
+  }
+  showBoard(board = this.work) { this.work = board; this.overlay = { kind: 'board', scroll: 0 }; this.schedule(); }
+  setSelection(value = !this.selecting) {
+    if (this.closed || this.suspended || this.permission) return;
+    this.selecting = value; clearTimeout(this.renderTimer); this.renderTimer = null;
+    if (value) { this.render(true); this.output.write(MOUSE_OFF + '\x1b[?25l'); }
+    else { this.output.write(MOUSE_ON); this.render(); this.callbacks.onAction?.('queueKick'); }
+  }
+  async copyResponse() {
+    const block = this.blocks.findLast(block => block.role === 'assistant' && block.text?.trim());
+    if (!block) throw new Error(t("There is no response to copy yet."));
+    const partial = block === this.streaming;
+    const text = block.responseId === undefined ? block.text : this.blocks.filter(item => item.role === 'assistant' && item.responseId === block.responseId).map(item => item.text).join('');
+    await this.clipboard(text);
+    this.notice(partial ? t("Text received so far copied to clipboard; the response is still arriving.") : t("Full response copied to clipboard (original Markdown)."));
+  }
+  handleMouse(event) {
+    if (this.closed || this.suspended || this.selecting || event.type !== 'wheel') return;
+    if (this.setup) { if (this.setup.kind === 'choice') this.setup.index = Math.max(0, Math.min(this.setup.items.length - 1, this.setup.index + event.delta)); this.schedule(); return; }
+    const lines = event.delta * 3;
+    if (this.permission) this.permission.scroll = Math.max(0, this.permission.scroll + lines);
+    else if (['help', 'board'].includes(this.overlay?.kind)) this.overlay.scroll = Math.max(0, this.overlay.scroll + lines);
+    else if (this.overlay?.kind === 'sessions' || this.overlay?.kind === 'queue') {
+      const length = this.overlay.kind === 'sessions' ? this.filteredSessions().length : this.queue.items.length;
+      this.overlay.index = Math.max(0, Math.min(Math.max(0, length - 1), this.overlay.index + event.delta));
+    } else if (this.overlay?.kind === 'palette') {
+      if (this.overlay.detail) this.overlay.scroll = Math.max(0, this.overlay.scroll + lines);
+      else this.overlay.index = Math.max(0, Math.min(this.paletteItems().length - 1, this.overlay.index + event.delta));
+    } else this.scroll = Math.max(0, this.scroll - lines);
+    this.schedule();
+  }
+  async handleKey(text, key = {}) {
+    if (this.closed || this.suspended) return;
+    if (this.setup) { await this.handleSetupKey(text, key); return; }
+    const name = key.name;
+    if (this.selecting) {
+      if (name === 'f5' || name === 'escape' || (key.ctrl && name === 'c')) this.setSelection(false);
+      return;
+    }
+    if (key.ctrl && name === 'c' && this.overlay?.kind === 'palette' && !this.permission) { this.closeOverlay(); return; }
+    if (key.ctrl && name === 'c') { if (this.permission) this.permission.finish(false); if (this.busy) await this.callbacks.onAction?.('interrupt'); else if (this.composer.text) { this.composer.clear(); this.draftChanged(); } else await this.callbacks.onAction?.('exit'); return; }
+    if (this.permission) {
+      if (name === 'escape' || name === 'n') this.permission.finish(false);
+      else if (name === 'y') this.permission.finish(true);
+      else if (name === 'left' || name === 'right' || name === 'tab') this.permission.allowed = !this.permission.allowed;
+      else if (name === 'return') this.permission.finish(this.permission.allowed);
+      else if (name === 'pageup') this.permission.scroll = Math.max(0, this.permission.scroll - 10);
+      else if (name === 'pagedown') this.permission.scroll += 10;
+      this.schedule(); return;
+    }
+    if (name === 'f5') { this.setSelection(); return; }
+    if (key.meta && name === 'c') { await this.copyResponse(); return; }
+    if (this.overlay?.kind === 'palette') {
+      if (name === 'f6') { this.closeOverlay(); return; }
+      if (name === 'escape') { if (this.overlay.detail) { this.overlay.detail = null; this.overlay.scroll = 0; this.schedule(); } else this.closeOverlay(); return; }
+      if (this.overlay.detail) {
+        if (name === 'pageup' || name === 'up') this.overlay.scroll = Math.max(0, this.overlay.scroll - 3);
+        else if (name === 'pagedown' || name === 'down') this.overlay.scroll += 3;
+        else if (name === 'tab' && !key.shift) {
+          const tool = this.paletteTool();
+          if (!tool) { this.notice(t("That operation is no longer published. Return to the catalog."), true); return; }
+          if (tool.audience === 'human') { this.notice(t("Human control: use the corresponding command or /plugins run; the model is not asked."), true); return; }
+          if (!this.preparedDraft) this.preparedDraft = { ...this.composer.snapshot(), sessionId: this.metadata.sessionId };
+          this.composer.setText(t("Use the tool {v0} to {v1}", {v0: safeText(tool.name), v1: this.composer.text}), undefined, this.composer.attachments.map(({start,end,...item})=>item));
+          this.closeOverlay(); this.draftChanged(); return;
+        }
+      } else if (name === 'tab') { this.overlay.tab = this.overlay.tab === 'tool' ? 'command' : 'tool'; this.overlay.index = 0; }
+      else if (name === 'up') this.overlay.index = Math.max(0, this.overlay.index - 1);
+      else if (name === 'down') this.overlay.index = Math.min(Math.max(0, this.paletteItems().length - 1), this.overlay.index + 1);
+      else if (name === 'return') { const item = this.paletteItems()[this.overlay.index]; if (item) this.preparePaletteItem(item); return; }
+      else if (name === 'backspace') { this.overlay.filter = [...this.overlay.filter].slice(0, -1).join(''); this.overlay.index = 0; }
+      else if (!key.ctrl && !key.meta && text && !text.startsWith('\x1b')) { this.overlay.filter += safeText(text).slice(0, 150); this.overlay.index = 0; }
+      this.schedule(); return;
+    }
+    if (this.overlay?.kind === 'help') {
+      if (name === 'escape' || name === 'f1') { this.closeOverlay(); return; }
+      if (name === 'pageup' || name === 'pagedown') { this.overlay.scroll = Math.max(0, this.overlay.scroll + (name === 'pageup' ? -5 : 5)); this.schedule(); return; }
+    }
+    if (this.hasModalOverlay()) {
+      if (name === 'escape') { this.closeOverlay(); return; }
+      if (['help', 'board'].includes(this.overlay.kind)) { if (name === 'pageup' || name === 'up') this.overlay.scroll = Math.max(0, this.overlay.scroll - 5); if (name === 'pagedown' || name === 'down') this.overlay.scroll += 5; this.schedule(); return; }
+      if (this.overlay.kind === 'sessions') {
+        const filtered = this.filteredSessions();
+        if (name === 'up') this.overlay.index = Math.max(0, this.overlay.index - 1);
+        else if (name === 'down') this.overlay.index = Math.min(Math.max(0, filtered.length - 1), this.overlay.index + 1);
+        else if (name === 'return' && filtered[this.overlay.index]) await this.callbacks.onAction?.('resume', filtered[this.overlay.index].id);
+        else if (name === 'backspace') { this.overlay.filter = this.overlay.filter.slice(0, -1); this.overlay.index = 0; }
+        else if (!key.ctrl && !key.meta && text && !text.startsWith('\x1b')) { this.overlay.filter += safeText(text).slice(0, 150); this.overlay.index = 0; }
+      } else if (this.overlay.kind === 'queue') {
+        const items = this.queue.items, item = items[this.overlay.index];
+        if (name === 'up' && !key.ctrl) this.overlay.index = Math.max(0, this.overlay.index - 1);
+        else if (name === 'down' && !key.ctrl) this.overlay.index = Math.min(Math.max(0, items.length - 1), this.overlay.index + 1);
+        else if (name === 'e' && item) await this.callbacks.onAction?.('queueEdit', item.id);
+        else if ((name === 'd' || name === 'delete') && item) await this.callbacks.onAction?.('queueRemove', item.id);
+        else if (name === 'space') await this.callbacks.onAction?.('queueToggle');
+        else if (key.ctrl && name === 'up' && item) await this.callbacks.onAction?.('queueMove', { id: item.id, delta: -1 });
+        else if (key.ctrl && name === 'down' && item) await this.callbacks.onAction?.('queueMove', { id: item.id, delta: 1 });
+        else if (name === 'r' && this.queue.interrupted?.length) await this.callbacks.onAction?.('queueRetry', this.queue.interrupted[0].id);
+      }
+      this.schedule(); return;
+    }
+    if (name === 'tab' && key.shift) { await this.callbacks.onAction?.('cycleMode'); return; }
+    if (name === 'f6') { this.showPalette(); return; }
+    if (name === 'f1') { this.showHelp(); return; }
+    if (name === 'f2' || (key.ctrl && name === 's')) { await this.callbacks.onAction?.('sessions'); return; }
+    if (name === 'f3') { await this.callbacks.onAction?.('board'); return; }
+    if (name === 'f4' || (key.ctrl && name === 'q')) { this.showQueue(); return; }
+    if (key.ctrl && name === 'o') { this.expandedTools = !this.expandedTools; this.schedule(); return; }
+    if (key.ctrl && name === 'g') { await this.callbacks.onAction?.('editor'); return; }
+    if (key.ctrl && name === 'd' && !this.composer.text) { await this.callbacks.onAction?.('exit'); return; }
+    if (name === 'escape' && this.completion().items.length) { this.dismissedCompletion = this.completionSignature; this.schedule(); return; }
+    if (name === 'escape' && this.preparedDraft) { const draft = this.preparedDraft; this.preparedDraft = null; this.composer.setText(draft.text, draft.cursor, draft.attachments); this.draftChanged(); return; }
+    if (name === 'escape') { if (this.editingQueue) await this.callbacks.onAction?.('queueEditCancel'); else if (this.busy) await this.callbacks.onAction?.('interrupt'); return; }
+    if (name === 'pageup') { this.scroll += Math.max(5, (this.output.rows || 24) - 10); this.schedule(); return; }
+    if (name === 'pagedown') { this.scroll = Math.max(0, this.scroll - Math.max(5, (this.output.rows || 24) - 10)); this.schedule(); return; }
+    if (name === 'end' && key.ctrl) { this.scroll = 0; this.schedule(); return; }
+    const completion = this.completion();
+    if (!key.ctrl && !key.meta && completion.items.length && ['up', 'down'].includes(name)) {
+      this.completionIndex = (this.completionIndex + (name === 'down' ? 1 : -1) + completion.items.length) % completion.items.length; this.schedule(); return;
+    }
+    if (name === 'tab' && !key.shift) {
+      this.refreshDiscovery();
+      if (!this.acceptCompletion() && !this.composer.text.trimStart().startsWith('/')) { this.composer.insert('    '); this.draftChanged(); }
+      return;
+    }
+    if (name === 'return' && !key.shift && !key.meta && completion.items.length) { this.acceptCompletion(); return; }
+    if (name === 'return' && !key.shift && !key.meta) {
+      if (this.submitting) return;
+      const value = this.composer.text; if (!value.trim()) return;
+      if (!this.ready) { this.notice(t("Still connecting; the draft is preserved.")); return; }
+      if (this.overlay?.kind === 'help') this.closeOverlay();
+      const draft = this.preparedDraft;
+      let prepared = this.composer.snapshot(), submitted = false;
+      this.submitting = true;
+      try {
+        const original = JSON.stringify(prepared), sessionId = this.metadata.sessionId;
+        if (this.callbacks.onPrepareSubmit) prepared = await this.callbacks.onPrepareSubmit(prepared) || prepared;
+        const current = JSON.stringify(this.composer.snapshot());
+        if (sessionId !== this.metadata.sessionId || (current !== original && current !== JSON.stringify(prepared))) throw new Error(t('The draft changed while preparing the image. Press Enter again to send the current draft.'));
+        this.composer.remember(prepared.text, prepared.attachments); this.composer.clear(); this.draftChanged(); submitted = true;
+        await this.callbacks.onSubmit?.(prepared.text, prepared.attachments);
+        if (draft && draft.sessionId === this.metadata.sessionId && !this.composer.text) { this.preparedDraft = null; this.composer.setText(draft.text, draft.cursor, draft.attachments); this.draftChanged(); }
+      } catch (e) { if (submitted && !this.composer.text) this.composer.setText(prepared.text, prepared.cursor, prepared.attachments); this.preparedDraft = draft; this.notice(e.message, true); this.draftChanged(); }
+      finally { this.submitting = false; }
+      return;
+    }
+    this.composer.key(text, key, Math.max(2, (this.output.columns || 80) - 7)); this.draftChanged();
+  }
+  contentLines(columns) {
+    const output = [];
+    if (!this.blocks.length) {
+      const mark = brandingWelcome({ columns: Math.max(0, columns - 4), frame: this.brandFrame(), active: this.busy, env: this.env, stream: this.output });
+      const intro = [tone.bold(t("  What are we building today?")), '', ...wrap(t("  Type a task; / or F6 show you what you can do."), columns), '', tone.muted(t("  F6 discover · F2 sessions · Shift+Tab mode"))];
+      const branded = ['', ...mark.map(line => '  ' + line), '', ...intro];
+      if (branded.length <= this.bodyHeight) output.push(...branded);
+      else output.push('', tone.accent(t("  COMAL · on the comal one cooks")), '', ...intro);
+    }
+    for (const block of this.blocks) {
+      const cacheKey = `${columns}:${this.expandedTools}:${block.text || ''}:${block.state || ''}:${block.output || ''}`;
+      if (block.cacheKey === cacheKey) { output.push(...block.cached); continue; }
+      let lines;
+      if (block.role === 'user') lines = [tone.accent(t("  You")), ...wrap(safeText(block.text), columns - 4).map(line => '  ' + line), ''];
+      else if (block.role === 'assistant') lines = [tone.bold('  Comal'), ...this.markdown.render(block.text, columns - 4).map(line => '  ' + line), ''];
+      else if (block.role === 'notice') lines = wrap((block.error ? tone.bad : tone.muted)(safeText(`  ${block.error ? '✗' : '·'} ${block.text}`)), columns);
+      else if (block.role === 'table') lines = [tone.accent('  ' + block.text), ...this.tables.render(block.data, columns - 4).map(line => '  ' + line), ''];
+      else if (block.role === 'subagent') {
+        const icon = ['running','queued','waiting'].includes(block.runner_state || block.state) ? this.spinner() : block.work_state==='checks_verified' ? '✓' : block.state==='paused' ? '◇' : block.state==='completed' ? '·' : '✗';
+        lines = ['  ' + tone.accent(clip(safeText(t("{v0} Subagent {v1} · {v2} · {v3}", {v0: icon, v1: block.id.slice(0, 8), v2: block.subagent_type, v3: block.description})), columns - 4)), '    ' + tone.muted(clip(safeText(`${block.runner_state || block.state} · ${block.turn_state || block.status || block.state} · ${block.work_state || 'unjudged'} · calls ${block.turns || 0}/${block.max_turns || 6}${block.lastTool ? ' · ' + block.lastTool : ''}`), columns - 6))];
+        if (this.expandedTools || ['failed', 'cancelled', 'interrupted','paused'].includes(block.state)) lines.push(...wrap(safeText(block.error || block.result || block.text || ''), columns - 6).slice(0, 15).map(line => '    ' + line));
+      }
+      else {
+        const icon = block.state === 'running' ? this.spinner() : block.state === 'done' ? '✓' : '✗';
+        const label = safeText(`${icon} ${block.name}  ${block.input?.file_path || block.input?.command || block.input?.pattern || ''}`);
+        lines = ['  ' + (block.state === 'error' || block.state === 'interrupted' ? tone.bad : tone.muted)(clip(label, columns - 4))];
+        if (block.state === 'running' && block.progress) {
+          const p = block.progress, bar = p.total > 0 ? ` ${progressBar(p.progress, p.total, 14)} ${p.progress}/${p.total}` : ` ${p.progress}`;
+          lines.push('    ' + tone.accent(clip(safeText(bar + ' ' + p.message), columns - 6)));
+        }
+        if (this.expandedTools || block.state === 'error') lines.push(...wrap(safeText(String(block.output || JSON.stringify(block.input))).slice(0, 6000), columns - 6).map(line => '    ' + tone.muted(line)));
+      }
+      block.cacheKey = block.state === 'running' ? null : cacheKey; block.cached = lines; output.push(...lines);
+    }
+    return output;
+  }
+  overlayLines(columns, height) {
+    if (this.overlay?.kind === 'palette' && !this.permission) {
+      if (this.overlay.detail) {
+        const tool = this.paletteTool();
+        if (!tool) return [tone.warning(t("  Operation removed from the catalog")), tone.muted(t("  Esc returns; nothing was executed."))];
+        const lines = [tone.accent('  ' + safeText(tool.name)), ...wrap(safeText(tool.description), columns - 4).map(line => '  ' + line), '', tone.muted(t("  Audience: {v0} · source: {v1}", {v0: safeText(tool.audience || 'any'), v1: safeText(tool.origin?.plugin || tool.origin?.kind || t("core/MCP"))})), tone.muted(t("  Consulting does not authorize. Execution preserves the house's judgment.")), ...wrap(safeText(t("Declared effects: ") + Object.entries(tool.effects || {}).map(([key,value]) => `${key}=${value}`).join(' · ')), columns - 4).map(line => '  ' + tone.muted(line)), '', tone.bold(t("  Arguments · * required"))];
+        for (const [name, schema] of Object.entries(tool.input_schema?.properties || {})) lines.push(...wrap(safeText(`${tool.input_schema?.required?.includes(name) ? '* ' : '  '}${name} · ${schema.type || t("value")}${schema.enum ? ' · ' + schema.enum.join(' | ') : ''}${schema.description ? ' · ' + schema.description : ''}`), columns - 6).map(line => '    ' + line));
+        if (!Object.keys(tool.input_schema?.properties || {}).length) lines.push(tone.muted(t("    No fields declared.")));
+        lines.push('', tone.muted(tool.audience === 'human' ? t("  Human control · Esc returns to catalog") : t("  Tab prepares a request · does not send · Esc returns")));
+        this.overlay.scroll = Math.min(this.overlay.scroll, Math.max(0, lines.length - height)); return lines.slice(this.overlay.scroll, this.overlay.scroll + height);
+      }
+      const items = this.paletteItems(); this.overlay.index = Math.max(0, Math.min(this.overlay.index, items.length - 1));
+      const visible = Math.max(1, height - 5), start = Math.max(0, this.overlay.index - visible + 1);
+      return [tone.accent(t("  Discover · {v0} · {v1}", {v0: this.overlay.tab === 'tool' ? t("TOOLS") : t("COMMANDS"), v1: items.length})), tone.muted(t("  Tab changes section · ↑/↓ chooses · Enter prepares/inspects · Esc returns")), t("  Search: {v0}", {v0: safeText(this.overlay.filter) || tone.muted(t("type to filter"))}), '', ...items.slice(start, start + visible).map((item, i) => {
+        const selected = start + i === this.overlay.index, labelWidth = Math.max(10, Math.floor(columns * .36));
+        const label = `  ${selected ? '❯' : ' '} ${safeText(item.label)}`;
+        const line = columns >= 55 ? pad(clip(label, labelWidth), labelWidth) + ' ' + safeText(item.description) : label;
+        return (selected ? tone.accent : String)(clip(line, columns));
+      }), ...(!items.length ? [tone.muted(t("  No matches. Change section with Tab."))] : [])];
+    }
+    if (this.overlay?.kind === 'board' && !this.permission) {
+      const board = this.work, lines = [tone.accent(t("  Work · plan v{v0}", {v0: board?.plan?.version || 0})), ...wrap(safeText(board?.plan?.objective || t("No plan. Ask for a task with steps and checks.")), columns - 4).map(line => '  ' + line), tone.muted(t("  /work resume continues · wheel/PgUp/PgDn scrolls · Esc returns")), ''];
+      const labels = { pending: t("PENDING"), in_progress: t("IN PROGRESS"), blocked: t("BLOCKED"), done: t("DONE · checks recorded"), needs_verification: t("TO VERIFY") };
+      for (const [status, label] of Object.entries(labels)) { const cards = board?.cards.filter(card => card.status === status) || []; if (!cards.length) continue; lines.push(tone.accent(`  ${label} (${cards.length})`)); for (const card of cards) { lines.push(...wrap(safeText(`${card.id} · ${card.title}`), columns - 6).map(line => '    ' + line)); if (card.held_by?.length || card.reason) lines.push(...wrap(safeText(card.reason || t("Waiting: {v0}", {v0: card.held_by.join(', ')})), columns - 8).map(line => '      ' + tone.muted(line))); } lines.push(''); }
+      if (board?.next_action) lines.push(...wrap(safeText(t("Next: ") + board.next_action), columns - 4).map(line => '  ' + line));
+      this.overlay.scroll = Math.min(this.overlay.scroll, Math.max(0, lines.length - height)); return lines.slice(this.overlay.scroll, this.overlay.scroll + height);
+    }
+    if (this.permission) {
+      const permission = this.permission, details = wrap(safeText(JSON.stringify(permission.input, null, 2)), columns - 6);
+      permission.scroll = Math.min(permission.scroll, Math.max(0, details.length - height + 5));
+      return [tone.warning(t("  Allow {v0}", {v0: permission.name})), tone.muted(t("  Detail {v0}/{v1} · PgUp/PgDn to review", {v0: permission.scroll + 1, v1: details.length})), '', ...details.slice(permission.scroll, permission.scroll + height - 5).map(line => '  ' + line), '', t("  {v0}        {v1}   · Enter confirms · y/n · Esc denies", {v0: permission.allowed ? tone.good(t("❯ Yes")) : t("  Yes"), v1: !permission.allowed ? tone.warning('❯ No') : '  No'})];
+    }
+    if (this.overlay.kind === 'help') {
+      const lines = [tone.muted(t("  Help · composer active · type below · PgUp/PgDn scrolls · Esc/F1 closes")), '', ...this.markdown.render(t(HELP), columns - 4).map(line => '  ' + line)];
+      this.overlay.scroll = Math.min(this.overlay.scroll, Math.max(0, lines.length - height));
+      return lines.slice(this.overlay.scroll, this.overlay.scroll + height);
+    }
+    if (this.overlay.kind === 'sessions') {
+      const items = this.filteredSessions(); const visible = Math.max(1, height - 5), start = Math.max(0, this.overlay.index - visible + 1);
+      return [tone.accent(t("  Sessions · ") + this.overlay.items.length), t("  Search: {v0}", {v0: this.overlay.filter || tone.muted(t("type to filter"))}), this.overlay.error ? tone.bad('  ' + this.overlay.error) : tone.muted(t("  ↑/↓ choose · Enter resumes with history · Esc returns")), '', ...items.slice(start, start + visible).map((item, i) => {
+        const selected = start + i === this.overlay.index, title = `${item.invalid ? '✗ ' : ''}${item.name || item.prompt || t("(empty)")}`;
+        const left = pad(safeText(`${selected ? '❯' : ' '} ${title}`), Math.max(8, columns - 40));
+        const right = safeText(`${item.id.slice(0, 8)}  ${item.messages} msgs  ${item.model}`);
+        return '  ' + (selected ? tone.accent : String)(clip(left + right, columns - 4));
+      }), ...(!items.length ? [tone.muted(t("  No matches."))] : [])];
+    }
+    const status = this.queue.paused ? t("paused") : t("active");
+    const lines = [tone.accent(t("  Message queue · {v0}", {v0: status})), tone.muted(t("  e edit · d remove · Ctrl+↑/↓ reorder · Space pause/resume · Esc return")), ''];
+    if (this.queue.running) lines.push(tone.muted(t("  Running: ") + clip(safeText(this.queue.running.text), columns - 20)), '');
+    this.queue.items.forEach((item, index) => { lines.push((index === this.overlay.index ? tone.accent : String)(`  ${index === this.overlay.index ? '❯' : ' '} ${index + 1}. ${clip(safeText(item.text).replace(/\n/g, ' ↵ '), columns - 9)}`)); });
+    if (!this.queue.items.length) lines.push(tone.muted(t("  Empty queue. Send a message while the agent works.")));
+    if (this.queue.interrupted?.length) lines.push('', tone.warning(t("  {v0} interrupted message(s); not resent. R requeues the first.", {v0: this.queue.interrupted.length})));
+    return lines.slice(0, height);
+  }
+  render(selectionEntry = false) {
+    if (this.closed || this.suspended || (this.selecting && !selectionEntry)) return;
+    const columns = Math.max(1, (this.output.columns || 80) - 1), rows = this.output.rows || 24;
+    if (columns < 23 || rows < 10) { this.draw([clip(t("Enlarge the terminal to 24×10"), columns)], null, columns, rows); return; }
+    if (this.setup) { this.renderSetup(columns, rows); return; }
+    const composer = this.composer.layout(columns - 6), composerHeight = Math.min(6, rows - 8, Math.max(2, composer.lines.length));
+    const location = ` ${clip(safeText(this.metadata.cwd || ''), Math.max(4, columns - 27))}  ·  ${safeText(this.metadata.sessionId?.slice(0, 8) || t("connecting"))}`;
+    const report = this.metadata.modelCapabilities;
+    const budget = this.metadata.contextBudget;
+    const capacity = budget?.contextWindow;
+    const amount = Number.isSafeInteger(capacity) && capacity > 0 ? capacity >= 1000000 ? `${Number((capacity/1000000).toFixed(2))}M` : capacity >= 1000 ? `${Number((capacity/1000).toFixed(1))}k` : String(capacity) : '?';
+    const capacityLabel = `Ctx:${amount}${amount === '?' ? '' : budget.kind === 'fallback' ? '?' : budget.kind === 'configured' || budget.source === 'comal_limit' ? '~' : ''}`;
+    const indicators = [`E:${safeText(this.metadata.effort || 'auto')}`, capacityLabel];
+    if (this.metadata.workflow) indicators.push(safeText(this.metadata.workflow));
+    for (const [key, label] of [['thinking', 'think'], ['vision', t("vision")], ['video', 'video'], ['web_search', 'web']]) {
+      if (report?.capabilities?.[key] === true) indicators.push(label + (report.provenance?.[key]?.kind === 'configured' ? '~' : ''));
+    }
+    if (report && Object.values(report.capabilities).some(value => value === null)) indicators.push('caps?');
+    const modelLabel = clip(' ' + indicators.join(' · '), Math.max(8, Math.floor(columns / 2)));
+    const locationLine = columns >= 50 ? pad(clip(location, columns - width(modelLabel) - 1), columns - width(modelLabel)) + modelLabel : location;
+    const header = [tone.bold(' COMAL') + (this.metadata.name ? tone.accent(safeText(` @${this.metadata.name}`)) : '') + tone.muted(safeText(`  ${this.metadata.model || t("local model")}  ·  ${this.metadata.authProvider || this.metadata.provider || 'openai'}  ·  `)) + tone.accent(this.mode), tone.muted(locationLine), tone.muted('─'.repeat(columns))];
+    const completions = this.completion();
+    const availableBody = Math.max(1, rows - header.length - composerHeight - 4);
+    const completionHeight = completions.items.length ? Math.min(5, Math.max(0, availableBody - 1)) : 0;
+    const bodyHeight = Math.max(1, availableBody - completionHeight); this.bodyHeight = bodyHeight;
+    const sideWidth = columns >= 110 && !this.overlay && !this.permission ? 28 : 0;
+    const bodyWidth = columns - (sideWidth ? sideWidth + 2 : 0);
+    let content, body;
+    if (this.overlay || this.permission) body = this.overlayLines(columns, bodyHeight);
+    else {
+      content = this.contentLines(bodyWidth);
+      if (this.scroll > 0 && content.length > this.lastContentLength) this.scroll += content.length - this.lastContentLength;
+      this.lastContentLength = content.length; this.scroll = Math.min(this.scroll, Math.max(0, content.length - bodyHeight));
+      const end = content.length - this.scroll; body = content.slice(Math.max(0, end - bodyHeight), end);
+    }
+    while (body.length < bodyHeight) body.push(''); body = body.slice(0, bodyHeight);
+    if (sideWidth) {
+      const side = [tone.accent(t(" Queue · {v0}{v1}", {v0: this.queue.items.length, v1: this.queue.paused ? t(" paused") : ''})), tone.muted(t(" F4 manage")), ''];
+      if (this.queue.running) side.push(tone.muted(t(" Running")), ...wrap(safeText(this.queue.running.text), sideWidth - 2).slice(0, 2).map(line => ' ' + line), '');
+      this.queue.items.slice(0, 6).forEach((item, i) => side.push(tone.accent(` ${i + 1}. `) + clip(safeText(item.text).replace(/\n/g, ' ↵ '), sideWidth - 5), ''));
+      body = body.map((line, i) => pad(line, bodyWidth) + tone.muted(' │') + clip(side[i] || '', sideWidth));
+    }
+    const elapsed = this.startedAt ? ((Date.now() - this.startedAt) / 1000).toFixed(1) : '0.0';
+    const active = this.busy || !this.ready;
+    const contextLabel = this.context ? ` · ctx ${this.context.estimated===false?'':'~'}${this.context.percent}%${this.context.accounting_method==='measured_prefix_estimated_tail'?t(" · measured baseline"):''}${Number.isSafeInteger(this.cacheReadTokens)?t(" · cache ")+formatNumber(this.cacheReadTokens):''}` : '';
+    const status = (active ? `${brandingStatus({frame:this.brandFrame(),active:true,env:this.env,stream:this.output})} ${this.spinner()} ${this.phase} · ${elapsed}s` : t("● Ready · {v0} tokens", {v0: formatNumber(this.usage)})) + contextLabel;
+    const measure = this.goal?.status === 'active' ? `goal calls ${this.goal.calls}/${this.goal.limits.maxCalls} ${progressBar(this.goal.calls, this.goal.limits.maxCalls, 12)}` : this.busy ? `calls ${this.turn}/${this.maxTurns} ${progressBar(this.turn, this.maxTurns, 12)}` : t("{v0} in queue{v1}", {v0: this.queue.items.length, v1: this.queue.paused ? t(" · paused") : ''});
+    const workLabel = this.work?.plan ? t(" · work {v0}/{v1}{v2}", {v0: this.work.counts.done, v1: this.work.cards.length, v2: this.work.current ? ' · ' + this.work.current.id : ''}) : '';
+    const bar = tone.accent(' ' + status + workLabel) + '  ' + tone.muted(measure) + (this.scroll ? tone.warning(t(" · history ↑")) : '');
+    let composerHeading = this.editingQueue ? tone.warning(t(" Editing queued message · Enter saves · Esc cancels")) : tone.muted(t(" Composer · {v0} · Alt+Enter multiline · Ctrl+G editor", {v0: this.busy ? t("Enter queues") : t("Enter sends")}));
+    const sessionName = safeText(this.metadata.name || '').replace(/[\r\n]+/g, ' ').trim();
+    if (sessionName) {
+      const labelWidth = Math.min(Math.floor(columns / 2), columns - 12);
+      const label = tone.accent(tone.bold(`[ @${clip(sessionName, labelWidth - 5, '…')} ]`));
+      const headingWidth = columns - width(label) - 1;
+      composerHeading = pad(clip(composerHeading, headingWidth, '…'), headingWidth) + ' ' + label;
+    }
+    const footer = [clip(bar, columns), tone.muted('─'.repeat(columns)), composerHeading];
+    const offset = Math.max(0, composer.cursorRow - composerHeight + 1);
+    const inputLines = Array.from({ length: composerHeight }, (_, i) => tone.muted(i === 0 ? ' ❯ ' : ' │ ') + (composer.lines[offset + i] || ''));
+    const hints = this.selecting ? tone.warning(t(" SELECTION · Drag and copy from your terminal · F5/Esc returns")) : this.attachmentStatus ? (['unsupported','invalid'].includes(this.attachmentStatus.state) ? tone.warning : tone.muted)(' ' + safeText(this.attachmentStatus.message)) : tone.muted(' ' + (completions.items.length ? t("Tab or Enter completes · ↑/↓ chooses · Esc closes · does not send") : (this.overlay?.kind === 'help' ? t("Help open · composer active · PgUp/PgDn scrolls · Esc/F1 closes") : this.preparedDraft ? t("Action prepared · Esc recovers your draft · Enter sends and restores it") : contextualTip(this.composer.text, this.discoveryContext()))));
+    const suggestionLines = [];
+    if (completionHeight) {
+      suggestionLines.push(tone.muted(t("  Suggestions · {v0} · Tab completes", {v0: completions.items.length})));
+      const visible = completionHeight - 1, start = Math.max(0, this.completionIndex - visible + 1);
+      for (const [i,item] of completions.items.slice(start, start + visible).entries()) {
+        const selected = start + i === this.completionIndex;
+        const label = `  ${selected ? '❯' : ' '} ${safeText(item.label)}`;
+        const labelWidth = Math.max(10, Math.floor(columns * .35));
+        const line = columns >= 55 ? pad(clip(label,labelWidth),labelWidth) + ' ' + safeText(item.description) : label;
+        suggestionLines.push((selected ? tone.accent : tone.muted)(clip(line,columns)));
+      }
+      while (suggestionLines.length < completionHeight) suggestionLines.push('');
+    }
+    const all = [...header, ...body, ...suggestionLines, ...footer, ...inputLines, clip(hints, columns)];
+    const cursor = this.selecting || this.hasModalOverlay() || this.permission ? null : { row: header.length + bodyHeight + completionHeight + footer.length + composer.cursorRow - offset + 1, col: composer.cursorColumn + 4 };
+    this.draw(all, cursor, columns, rows);
+  }
+  draw(lines, cursor, columns, rows) {
+    const normalized = Array.from({ length: rows }, (_, index) => clip((lines[index] || '').replace(/\n/g, ' ↵ '), columns));
+    let output = '\x1b[?25l';
+    const surface = terminalSurface({env:this.env,stream:this.output});
+    normalized.forEach((line, index) => { if (line !== this.previous[index]) {
+      const styled = surface ? line.replaceAll('\x1b[0m','\x1b[0m'+surface) : stripANSI(line);
+      output += `\x1b[${index + 1};1H${surface}\x1b[2K${styled}\x1b[0m`;
+    } });
+    this.previous = normalized;
+    if (cursor) output += `\x1b[${Math.min(rows, cursor.row)};${Math.min(columns, cursor.col)}H\x1b[?25h`;
+    this.output.write(output);
+  }
+  suspend() {
+    this.suspended = true; clearTimeout(this.renderTimer); this.renderTimer = null;
+    this.input.setRawMode?.(this.originalRaw); this.input.pause(); this.output.write(MOUSE_OFF + '\x1b[?2004l\x1b[?25h\x1b[?1049l');
+  }
+  resume() { this.input.setRawMode?.(true); this.input.resume(); this.suspended = false; this.previous = []; this.output.write('\x1b[?1049h\x1b[?2004h' + MOUSE_ON); this.render(); }
+  close() {
+    if (this.closed) return; this.closed = true;
+    this.clearSetup();
+    this.permission?.finish(false); clearInterval(this.timer); clearTimeout(this.renderTimer); this.decoder?.close();
+    if (this.onData) this.input.off('data', this.onData); if (this.onResize) this.output.off('resize', this.onResize);
+    if (this.started) { this.input.setRawMode?.(this.originalRaw); this.input.pause(); if (!this.suspended) this.output.write('\x1b[0m' + MOUSE_OFF + '\x1b[?2004l\x1b[?25h\x1b[?1049l'); }
+    this.resolveFinished();
+  }
+}