@milpa/comal 0.0.0-stage → 0.1.0

package/src/tui/screen.mjs

@@ -0,0 +1,586 @@
+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 · teclado
+
+| Acción | Tecla |
+| --- | --- |
+| Descubrir comandos y herramientas | F6 |
+| Completar comando o argumento | / y Tab; ↑/↓ elige; Esc cierra |
+| Enviar / encolar | Enter (las sugerencias sólo completan) |
+| Nueva línea | Alt+Enter o Ctrl+J |
+| Cambiar modo | Shift+Tab |
+| Editar con $VISUAL/$EDITOR | Ctrl+G |
+| Tablero de trabajo | F3 o /board |
+| Continuar desde checkpoint | /work resume |
+| Sesiones / reanudar | F2 o Ctrl+S |
+| Cola de mensajes | F4 o Ctrl+Q |
+| Desplegar resultados de herramientas | Ctrl+O |
+| Scroll del historial | Rueda del mouse / PgUp / PgDn |
+| Seleccionar texto con el mouse | F5 o /select; F5 o Esc vuelve |
+| Copiar última respuesta completa | Alt+C o /copy |
+| Ir al final | Ctrl+End |
+| Historial del composer | ↑/↓ en primera/última línea |
+| Inicio / final de línea | Home / End o Ctrl+A / Ctrl+E |
+| Borrar palabra / inicio / final | Ctrl+W / Ctrl+U / Ctrl+K |
+| Cancelar turno / pausar goal | Ctrl+C o Esc mientras trabaja |
+| Salir | Ctrl+D con composer vacío o /exit |
+
+Puedes seguir escribiendo durante el streaming. Los mensajes enviados se ejecutan en orden al terminar el turno actual. F4 permite pausar, editar, quitar y reordenar la cola.
+
+/context muestra el presupuesto de contexto. /compact deriva el estado sin LLM y espera su turno si hay trabajo activo. /state muestra petición y estado; /audit verifica el libro. El historial original se conserva.
+/house muestra recibos de ejecución y operaciones interrumpidas; /operations muestra contratos y efectos declarados. El éxito de ejecución no certifica el objetivo humano.
+/plugins muestra plugins, dependencias y operaciones; enable/disable/reload esperan su turno y sólo el usuario puede cambiar su ciclo de vida.
+/model ID y /effort NIVEL cambian la siguiente llamada; durante trabajo quedan en cola. /models lista modelos y /capabilities muestra soporte, procedencia y niveles. E indica esfuerzo; Ctx muestra la ventana efectiva (k/M tokens); ~ indica un límite configurado, ? capacidad desconocida/fallback. /context muestra valores exactos, reserva y fuente. /login PROVEEDOR autentica; /logout PROVEEDOR retira credenciales de Comal.
+
+**La ayuda mantiene activo el composer.** Puedes escribir mientras la consultas; PgUp/PgDn la desplaza y Esc/F1 la cierra. Al enviar vuelve la conversación. La rueda desplaza la conversación; las flechas editan el borrador. F5 libera el mouse y congela la vista: arrastra para seleccionar y usa la acción de copiar de tu terminal (normalmente Ctrl+Shift+C). El trabajo continúa y la vista se actualiza al volver. /copy conserva Markdown y bloques de código, sin el ajuste de líneas de la pantalla. El pegado multilínea no se envía automáticamente.`;
+
+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 = 'Conectando con el modelo'; 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() {
+    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.suspended && !this.selecting) { this.frame++; this.render(); }
+    }, 120);
+    this.render(); return this;
+  }
+  configure(callbacks) { this.callbacks = callbacks; this.ready = true; this.phase = 'Listo'; this.schedule(); }
+  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.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.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 = { text: this.composer.text, cursor: this.composer.cursor, sessionId: this.metadata.sessionId };
+    this.composer.setText(item.value);
+    this.closeOverlay(); this.draftChanged();
+  }
+  updateMetadata(metadata) { if(['model','provider','profile','effort'].some(key=>metadata[key]!==undefined && metadata[key]!==this.metadata[key]))this.cacheReadTokens=null; Object.assign(this.metadata, metadata); if (metadata.mode) this.mode = metadata.mode; 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 = 'Preparando turno'; } else this.phase = 'Listo'; 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) { this.composer.setText(text); this.schedule(); }
+  draftChanged() { this.callbacks.onDraft?.(this.composer.text); 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 });
+      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; } }
+      }
+    }
+    this.composer.history = rows.filter(row => row.message.role === 'user' && typeof row.message.content === 'string' && row.source !== 'goal').map(row => row.message.content).slice(-100);
+    this.composer.setText(session.draft || ''); 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(`Contexto reanudado desde el libro: ~${session.compaction.after_tokens} tokens. Historial original conservado.`);
+    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 = `Preparando herramientas · ${event.tool_argument_chars.toLocaleString()} caracteres`;
+      else if (event.reasoning_chars && !event.text_chars) this.phase = `Modelo razonando · ${event.reasoning_chars.toLocaleString()} caracteres`;
+    }
+    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 ? `Visión · ${event.images} imágenes en la petición · reserva ~${event.token_reserve} tokens.` : `Captura guardada como referencia · ${event.supported ? 'sin espacio para píxeles en el contexto' : 'el proveedor no anuncia visión'}.`); }
+    }
+    if (event.type === 'context_projection_start') this.phase = 'Derivando estado del libro';
+    if (event.type === 'context_projection') this.notice(`Estado derivado · ~${event.after_tokens} tokens · 0 llamadas de resumen al LLM · evidencia guardada.`);
+    if (['model_retry', 'response_discarded'].includes(event.type)) {
+      if (this.streaming) { this.streaming.text += '\n\n[Respuesta incompleta descartada; no se ejecutaron sus herramientas.]'; this.streaming = null; }
+      if (event.type === 'model_retry') this.notice(`Respuesta descartada (${event.reason}) · reintento acotado · salida máxima ${event.max_tokens} tokens.`);
+    }
+    if (['mcp_reload', 'plugin_status'].includes(event.type)) this.refreshDiscovery();
+    if (event.type === 'mcp_reload') this.notice(`MCP actualizado · ${event.servers.filter(server => server.status === 'connected').length} servidores conectados · ${event.tools.length} herramientas disponibles en packs.`);
+    if (event.type === 'plugin_status') {
+      if (event.state === 'loading') this.phase = `Activando plugin ${event.id}`;
+      if (['active', 'disabled'].includes(event.state)) this.notice(`Plugin ${event.id} · ${event.state}${event.operations ? ` · ${event.operations.length} operaciones` : ''}`);
+      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(`No se aplicó la recarga MCP: ${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 = 'Recibiendo respuesta';
+    }
+    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 = `Ejecutando ${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: 'Esperando al modelo', classifier: 'Revisando permiso auto', 'goal-evaluation': 'Verificando /goal' }[event.phase] || event.phase;
+      else if (this.busy) this.phase = 'Procesando turno';
+    }
+    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(`Continúa ${event.task_id} · ${event.calls}/${event.limit} llamadas · checkpoint conservado.`);
+    if(event.type==='peer_reply')this.notice(event.status==='failed'?`La casa no pudo enviar el informe: ${event.error}`:`La casa devolvió el informe al buzón ${event.to.slice(0,8)} · ${event.status}.`,event.status==='failed');
+    if (event.type === 'result' && event.work_stop_reason) this.notice(`Trabajo: ${event.work_stop_reason}.`);
+    if (event.type === 'work_open') this.notice(`Quedan ${event.remaining.length} tareas abiertas · /work resume continúa desde el checkpoint.`);
+    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 => {
+      const finish = allowed => { signal?.removeEventListener('abort', abort); this.permission = null; this.schedule(); resolve(allowed); };
+      const abort = () => finish(false);
+      this.permission = { name, input, allowed: false, scroll: 0, finish }; signal?.addEventListener('abort', abort, { once: true }); 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.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('Todavía no hay una respuesta para copiar.');
+    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 ? 'Texto recibido hasta ahora copiado al portapapeles; la respuesta sigue llegando.' : 'Respuesta completa copiada al portapapeles (Markdown original).');
+  }
+  handleMouse(event) {
+    if (this.closed || this.suspended || this.selecting || event.type !== 'wheel') 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;
+    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('Esa operación ya no está publicada. Vuelve al catálogo.', true); return; }
+          if (tool.audience === 'human') { this.notice('Control humano: usa el comando correspondiente o /plugins run; no se pide al modelo.', true); return; }
+          if (!this.preparedDraft) this.preparedDraft = { text: this.composer.text, cursor: this.composer.cursor, sessionId: this.metadata.sessionId };
+          this.composer.setText(`Usa la herramienta ${safeText(tool.name)} para ${this.composer.text}`);
+          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); 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) {
+      const value = this.composer.text; if (!value.trim()) return;
+      if (!this.ready) { this.notice('Todavía conectando; el borrador se conserva.'); return; }
+      if (this.overlay?.kind === 'help') this.closeOverlay();
+      const draft = this.preparedDraft;
+      this.composer.remember(value); this.composer.clear(); this.draftChanged();
+      try {
+        await this.callbacks.onSubmit?.(value);
+        if (draft && draft.sessionId === this.metadata.sessionId && !this.composer.text) { this.preparedDraft = null; this.composer.setText(draft.text, draft.cursor); this.draftChanged(); }
+      } catch (e) { if (!this.composer.text) this.composer.setText(value); this.preparedDraft = draft; this.notice(e.message, true); this.draftChanged(); }
+      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('  ¿Qué construimos hoy?'), '', ...wrap('  Escribe una tarea; / o F6 te muestran qué puedes hacer.', columns), '', tone.muted('  F6 descubrir · F2 sesiones · Shift+Tab modo')];
+      const branded = ['', ...mark.map(line => '  ' + line), '', ...intro];
+      if (branded.length <= this.bodyHeight) output.push(...branded);
+      else output.push('', tone.accent('  COMAL · sobre el comal se cocina'), '', ...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ú'), ...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(`${icon} Subagente ${block.id.slice(0, 8)} · ${block.subagent_type} · ${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('  Operación retirada del catálogo'), tone.muted('  Esc vuelve; no se ejecutó nada.')];
+        const lines = [tone.accent('  ' + safeText(tool.name)), ...wrap(safeText(tool.description), columns - 4).map(line => '  ' + line), '', tone.muted(`  Audiencia: ${safeText(tool.audience || 'any')} · origen: ${safeText(tool.origin?.plugin || tool.origin?.kind || 'núcleo/MCP')}`), tone.muted('  Consultar no autoriza. La ejecución conserva el juicio de la casa.'), ...wrap(safeText('Efectos declarados: ' + Object.entries(tool.effects || {}).map(([key,value]) => `${key}=${value}`).join(' · ')), columns - 4).map(line => '  ' + tone.muted(line)), '', tone.bold('  Argumentos · * obligatorio')];
+        for (const [name, schema] of Object.entries(tool.input_schema?.properties || {})) lines.push(...wrap(safeText(`${tool.input_schema?.required?.includes(name) ? '* ' : '  '}${name} · ${schema.type || 'valor'}${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('    Sin campos declarados.'));
+        lines.push('', tone.muted(tool.audience === 'human' ? '  Control humano · Esc vuelve al catálogo' : '  Tab prepara una petición · no envía · Esc vuelve'));
+        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(`  Descubrir · ${this.overlay.tab === 'tool' ? 'HERRAMIENTAS' : 'COMANDOS'} · ${items.length}`), tone.muted('  Tab cambia sección · ↑/↓ elige · Enter prepara/inspecciona · Esc vuelve'), `  Buscar: ${safeText(this.overlay.filter) || tone.muted('escribe para filtrar')}`, '', ...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('  Sin coincidencias. Cambia de sección con Tab.')] : [])];
+    }
+    if (this.overlay?.kind === 'board' && !this.permission) {
+      const board = this.work, lines = [tone.accent(`  Trabajo · plan v${board?.plan?.version || 0}`), ...wrap(safeText(board?.plan?.objective || 'Sin plan. Pide una tarea con pasos y comprobaciones.'), columns - 4).map(line => '  ' + line), tone.muted('  /work resume continúa · rueda/PgUp/PgDn desplaza · Esc vuelve'), ''];
+      const labels = { pending: 'PENDIENTE', in_progress: 'EN CURSO', blocked: 'BLOQUEADO', done: 'HECHO · checks registrados', needs_verification: 'POR VERIFICAR' };
+      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 || `Espera: ${card.held_by.join(', ')}`), columns - 8).map(line => '      ' + tone.muted(line))); } lines.push(''); }
+      if (board?.next_action) lines.push(...wrap(safeText('Siguiente: ' + 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(`  Autorizar ${permission.name}`), tone.muted(`  Detalle ${permission.scroll + 1}/${details.length} · PgUp/PgDn para revisar`), '', ...details.slice(permission.scroll, permission.scroll + height - 5).map(line => '  ' + line), '', `  ${permission.allowed ? tone.good('❯ Sí') : '  Sí'}        ${!permission.allowed ? tone.warning('❯ No') : '  No'}   · Enter confirma · y/n · Esc deniega`];
+    }
+    if (this.overlay.kind === 'help') {
+      const lines = [tone.muted('  Ayuda · composer activo · escribe abajo · PgUp/PgDn desplaza · Esc/F1 cierra'), '', ...this.markdown.render(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('  Sesiones · ' + this.overlay.items.length), `  Buscar: ${this.overlay.filter || tone.muted('escribe para filtrar')}`, this.overlay.error ? tone.bad('  ' + this.overlay.error) : tone.muted('  ↑/↓ elegir · Enter reanuda con historial · Esc vuelve'), '', ...items.slice(start, start + visible).map((item, i) => {
+        const selected = start + i === this.overlay.index, title = `${item.invalid ? '✗ ' : ''}${item.name || item.prompt || '(vacía)'}`;
+        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('  No hay coincidencias.')] : [])];
+    }
+    const status = this.queue.paused ? 'pausada' : 'activa';
+    const lines = [tone.accent(`  Cola de mensajes · ${status}`), tone.muted('  e editar · d quitar · Ctrl+↑/↓ ordenar · Espacio pausar/reanudar · Esc volver'), ''];
+    if (this.queue.running) lines.push(tone.muted('  En ejecución: ' + 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('  Cola vacía. Envía un mensaje mientras el agente trabaja.'));
+    if (this.queue.interrupted?.length) lines.push('', tone.warning(`  ${this.queue.interrupted.length} mensaje(s) interrumpidos; no se reenviaron. R reencola el primero.`));
+    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('Amplía el terminal a 24×10', columns)], null, 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) || 'conectando')}`;
+    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', 'visión'], ['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 || 'modelo local'}  ·  ${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(` Cola · ${this.queue.items.length}${this.queue.paused ? ' pausada' : ''}`), tone.muted(' F4 gestionar'), ''];
+      if (this.queue.running) side.push(tone.muted(' En ejecución'), ...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'?' · base medida':''}${Number.isSafeInteger(this.cacheReadTokens)?' · caché '+this.cacheReadTokens.toLocaleString():''}` : '';
+    const status = (active ? `${brandingStatus({frame:this.brandFrame(),active:true,env:this.env,stream:this.output})} ${this.spinner()} ${this.phase} · ${elapsed}s` : `● Listo · ${this.usage.toLocaleString()} tokens`) + 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)}` : `${this.queue.items.length} en cola${this.queue.paused ? ' · pausada' : ''}`;
+    const workLabel = this.work?.plan ? ` · trabajo ${this.work.counts.done}/${this.work.cards.length}${this.work.current ? ' · ' + this.work.current.id : ''}` : '';
+    const bar = tone.accent(' ' + status + workLabel) + '  ' + tone.muted(measure) + (this.scroll ? tone.warning(' · historial ↑') : '');
+    let composerHeading = this.editingQueue ? tone.warning(' Editando mensaje en cola · Enter guarda · Esc cancela') : tone.muted(` Composer · ${this.busy ? 'Enter encola' : 'Enter envía'} · Alt+Enter multilínea · Ctrl+G editor`);
+    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(' SELECCIÓN · Arrastra y copia desde tu terminal · F5/Esc vuelve') : tone.muted(' ' + (completions.items.length ? 'Tab o Enter completa · ↑/↓ elige · Esc cierra · no envía' : (this.overlay?.kind === 'help' ? 'Ayuda abierta · composer activo · PgUp/PgDn desplaza · Esc/F1 cierra' : this.preparedDraft ? 'Acción preparada · Esc recupera tu borrador · Enter envía y lo restaura' : contextualTip(this.composer.text, this.discoveryContext()))));
+    const suggestionLines = [];
+    if (completionHeight) {
+      suggestionLines.push(tone.muted(`  Sugerencias · ${completions.items.length} · Tab completa`));
+      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.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();
+  }
+}