vipcode 0.0.0-stage → 0.2.1

package/dist/tui/app.js

@@ -0,0 +1,1019 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { Box, Static, Text, render, useAnimation, useApp, useInput, usePaste, useWindowSize } from "ink";
+import pc from "picocolors";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { configNotices } from "../config.js";
+import { discoveryIsStale } from "../discovery.js";
+import { isImagePath, readClipboardImage, toDataUrl } from "../images.js";
+import { renderMarkdown } from "../markdown.js";
+import { VERSION } from "../meta.js";
+import { NoSlotError } from "../router.js";
+import { showControl, stripControl, stripUnsafe } from "../sanitize.js";
+import { appendHistory, loadHistory } from "../session.js";
+import { suggestFiles } from "../tools.js";
+import { colorPreview } from "../ui.js";
+import { checkForUpdate } from "../update.js";
+import { PermissionDialog, PromptDialog, SelectDialog } from "./dialogs.js";
+import * as E from "./editor.js";
+// Comandos que se pueden usar mientras el agente trabaja (solo consultan)
+const SAFE_WHILE_BUSY = ["/help", "/usage", "/todos", "/mcp", "/lsp", "/providers", "/skills"];
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+// Cómo se cuenta cada herramienta en pantalla
+const TOOL_LABEL = {
+    read_file: "Lee",
+    write_file: "Escribe",
+    edit_file: "Edita",
+    list_dir: "Lista",
+    glob: "Busca ficheros",
+    grep: "Busca",
+    bash: "Ejecuta",
+    webfetch: "Abre",
+    websearch: "Busca en internet",
+    todowrite: "Tareas",
+    todoread: "Tareas",
+    diagnostics: "Diagnósticos",
+    task: "Subagente",
+    skill: "Skill",
+};
+function Spinner(props) {
+    const { frame } = useAnimation({ interval: 80 });
+    return _jsx(Text, { color: props.color || "cyan", children: SPINNER[frame % SPINNER.length] });
+}
+function formatDuration(ms) {
+    if (ms < 1000) {
+        return "<1 s";
+    }
+    const seconds = ms / 1000;
+    if (seconds < 10) {
+        return `${seconds.toFixed(1).replace(".", ",")} s`;
+    }
+    if (seconds < 60) {
+        return `${Math.round(seconds)} s`;
+    }
+    return `${Math.floor(seconds / 60)} min ${Math.round(seconds % 60)} s`;
+}
+function Elapsed(props) {
+    useAnimation({ interval: 1000 });
+    const ms = Date.now() - props.since;
+    if (props.hideUnderMs && ms < props.hideUnderMs) {
+        return null;
+    }
+    return _jsx(Text, { dimColor: true, children: formatDuration(ms) });
+}
+function shortTokens(tokens) {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${Math.round(tokens / 1000)}k`;
+    }
+    return String(tokens);
+}
+function lastLines(text, count) {
+    const lines = text.replace(/\s+$/, "").split("\n");
+    return lines.slice(-count).join("\n");
+}
+function firstLine(text, max = 200) {
+    return (text.split("\n")[0] || "").slice(0, max);
+}
+function tildify(file) {
+    const home = os.homedir();
+    if (file === home || file.startsWith(home + path.sep)) {
+        return `~${file.slice(home.length)}`;
+    }
+    return file;
+}
+// Líneas añadidas y quitadas de un diff
+function diffStats(display) {
+    if (!display) {
+        return null;
+    }
+    let added = 0;
+    let removed = 0;
+    for (const line of display.split("\n")) {
+        if (line.startsWith("+") && !line.startsWith("+++")) {
+            added++;
+        }
+        else if (line.startsWith("-") && !line.startsWith("---")) {
+            removed++;
+        }
+    }
+    if (added === 0 && removed === 0) {
+        return null;
+    }
+    return { added, removed };
+}
+// Debajo de cada herramienta, un resumen corto de lo que pasó
+function toolDetail(event) {
+    // La salida viene de ficheros y comandos: sin secuencias de la terminal
+    const output = stripControl(event.output || "");
+    if (event.isError) {
+        return [pc.red(firstLine(output))];
+    }
+    if (event.display) {
+        const lines = colorPreview(event.display).split("\n");
+        if (lines.length > 14) {
+            return [...lines.slice(0, 14), pc.dim(`… ${lines.length - 14} líneas más del diff`)];
+        }
+        return lines;
+    }
+    const count = output.split("\n").filter((line) => line.trim() !== "").length;
+    switch (event.name) {
+        case "read_file":
+            if (output.startsWith("Imagen")) {
+                return [pc.dim(firstLine(output))];
+            }
+            return [pc.dim(`Leídas ${output.split("\n").length} líneas`)];
+        case "glob":
+        case "grep":
+            if (/^Sin (resultados|coincidencias)/.test(output)) {
+                return [pc.dim(firstLine(output))];
+            }
+            return [pc.dim(`${count} resultados`)];
+        case "list_dir":
+            return [pc.dim(`${count} entradas`)];
+        case "bash": {
+            const lines = output.split("\n");
+            const header = lines[0] || "";
+            const body = lines.slice(1).filter((line) => line.trim() !== "");
+            const tail = body.slice(-4).map((line) => pc.dim(line.slice(0, 200)));
+            const ok = header === "Código de salida: 0";
+            return [ok ? pc.dim(header) : pc.yellow(header), ...tail];
+        }
+        case "webfetch":
+            return [pc.dim(`${output.length} caracteres`)];
+        case "websearch":
+            return [pc.dim(`${(output.match(/^\d+\. /gm) || []).length} resultados`)];
+        case "todowrite":
+            return output
+                .split("\n")
+                .slice(1)
+                .map((line) => pc.dim(line));
+        case "task":
+            return output
+                .split("\n")
+                .filter((line) => line.trim() !== "")
+                .slice(0, 3)
+                .map((line) => pc.dim(line.slice(0, 200)));
+        case "skill":
+            return [pc.dim(event.summary.includes("·") ? "fichero leído" : "instrucciones cargadas")];
+        default:
+            return [pc.dim(firstLine(output))];
+    }
+}
+// El resumen sale de lo que pidió el modelo (comandos, rutas): los caracteres de control se ven, no actúan
+function ToolHeader(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: TOOL_LABEL[props.name] || showControl(props.name) }), props.summary ? _jsxs(Text, { children: [" ", showControl(props.summary)] }) : null] }));
+}
+function ToolView(props) {
+    const { event } = props;
+    const detail = toolDetail(event);
+    const stats = event.isError ? null : diffStats(event.display);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: event.depth > 0 ? 4 : 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: event.isError ? "red" : "green", children: "\u25CF " }), _jsx(ToolHeader, { name: event.name, summary: event.summary }), stats ? (_jsxs(Text, { children: ["  ", _jsxs(Text, { color: "green", children: ["+", stats.added] }), " ", _jsxs(Text, { color: "red", children: ["\u2212", stats.removed] })] })) : null, props.ms >= 1000 ? _jsxs(Text, { dimColor: true, children: [" (", formatDuration(props.ms), ")"] }) : null] }), detail.map((line, index) => (_jsxs(Text, { children: ["  ", index === 0 ? pc.dim("⎿ ") : "  ", line] }, index)))] }));
+}
+// Pantalla de bienvenida
+function Banner(props) {
+    const { app } = props;
+    const slots = app.router.slots;
+    const providers = new Set(slots.map((slot) => slot.provider.name)).size;
+    const first = slots[0];
+    const extras = [];
+    if (app.skills.length > 0) {
+        extras.push(`${app.skills.length} skill${app.skills.length > 1 ? "s" : ""}`);
+    }
+    const mcp = Object.keys(app.config.mcp || {}).length;
+    if (mcp > 0) {
+        extras.push(`${mcp} MCP`);
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingX: 2, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: "magenta", children: "\u25C6 vipcode" }), _jsxs(Text, { dimColor: true, children: [" v", VERSION, " \u00B7 programa con IAs gratuitas"] })] }), _jsx(Text, { dimColor: true, children: tildify(app.root) }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: slots.length > 0 ? "green" : "red", children: "\u25CF" }), " ", slots.length, " modelo", slots.length === 1 ? "" : "s", " de ", providers, " proveedor", providers === 1 ? "" : "es", extras.length > 0 ? _jsxs(Text, { dimColor: true, children: [" \u00B7 ", extras.join(" · ")] }) : null] }), first ? (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "yellow", children: "\u2605" }), " Empieza con ", _jsx(Text, { bold: true, children: first.key }), first.score !== null ? _jsxs(Text, { dimColor: true, children: [" (nota ", first.score, " en LLM Stats)"] }) : null] })) : null, _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Ctrl+P comandos \u00B7 @ adjunta \u00B7 ! terminal \u00B7 Tab cambia de agente \u00B7 /help ayuda" })] }));
+}
+function ItemView(props) {
+    const { item, width } = props;
+    switch (item.kind) {
+        case "banner":
+            return _jsx(Banner, { app: props.app });
+        case "user": {
+            const lines = stripControl(item.text).split("\n");
+            let text = lines.join("\n");
+            if (lines.length > 20) {
+                text = `${lines.slice(0, 20).join("\n")}\n… (${lines.length - 20} líneas más)`;
+            }
+            return (_jsx(Box, { marginTop: 1, borderStyle: "bold", borderTop: false, borderRight: false, borderBottom: false, borderColor: item.color, paddingLeft: 1, children: _jsxs(Text, { children: [text, item.images > 0 ? pc.dim(` [${item.images} imagen${item.images > 1 ? "es" : ""}]`) : "", item.queued ? pc.dim(" (en cola: se le entrega al acabar el paso)") : ""] }) }));
+        }
+        case "assistant":
+            return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: item.color, children: "\u25CF " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Text, { children: renderMarkdown(item.text, Math.max(20, width - 4)) }) })] }));
+        case "tool":
+            return _jsx(ToolView, { event: item.event, ms: item.ms });
+        case "answer":
+            return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["\u25C6 ", item.slot, item.score !== null ? ` · nota ${item.score}` : "", " \u00B7 ", formatDuration(item.ms), item.tokens > 0 ? ` · ${shortTokens(item.tokens)} tokens` : ""] }) }));
+        case "shell": {
+            const lines = item.output ? stripControl(item.output).split("\n") : [];
+            const shown = lines.slice(-30);
+            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { color: "yellow", bold: true, children: ["$", " "] }), _jsx(Text, { bold: true, children: showControl(item.command) })] }), lines.length > shown.length ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", lines.length - shown.length, " l\u00EDneas antes"] }) : null, shown.length > 0 ? _jsx(Text, { children: shown.map((line) => `  ${line}`).join("\n") }) : null, _jsxs(Text, { dimColor: true, children: ["  ", item.code === 0 ? "✓" : "✗", " c\u00F3digo ", item.code ?? "?", " \u00B7 el agente ver\u00E1 la salida con tu siguiente mensaje"] })] }));
+        }
+        // Avisos y bloques pueden llevar mensajes de los proveedores o datos de fuera: solo se dejan los colores
+        case "info":
+            return _jsx(Text, { dimColor: true, children: stripUnsafe(item.text) });
+        case "notice":
+            return _jsxs(Text, { color: "yellow", children: ["\u26A0 ", stripUnsafe(item.text)] });
+        case "error":
+            return _jsxs(Text, { color: "red", children: ["\u2716 ", stripUnsafe(item.text)] });
+        case "block":
+            return (_jsx(Box, { marginY: 1, children: _jsx(Text, { children: stripUnsafe(item.text) }) }));
+    }
+}
+function TodoPanel(props) {
+    const open = props.todos.some((todo) => todo.status === "pending" || todo.status === "in_progress");
+    if (!open) {
+        return null;
+    }
+    const done = props.todos.filter((todo) => todo.status === "completed").length;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, children: [_jsxs(Text, { dimColor: true, children: ["Tareas (", done, "/", props.todos.length, ")"] }), props.todos.slice(0, 10).map((todo, index) => {
+                if (todo.status === "completed") {
+                    return (_jsxs(Text, { color: "green", strikethrough: true, children: ["\u2611 ", stripControl(todo.content)] }, index));
+                }
+                if (todo.status === "in_progress") {
+                    return (_jsxs(Text, { color: "yellow", children: ["\u25D0 ", stripControl(todo.content)] }, index));
+                }
+                if (todo.status === "cancelled") {
+                    return (_jsxs(Text, { dimColor: true, strikethrough: true, children: ["\u2612 ", stripControl(todo.content)] }, index));
+                }
+                return _jsxs(Text, { children: ["\u2610 ", stripControl(todo.content)] }, index);
+            }), props.todos.length > 10 ? _jsxs(Text, { dimColor: true, children: ["\u2026 y ", props.todos.length - 10, " m\u00E1s"] }) : null] }));
+}
+function InputBox(props) {
+    const { editor } = props;
+    // Con ! delante es un comando para la terminal
+    const shell = editor.value.startsWith("!");
+    const color = shell ? "yellow" : props.color;
+    const lines = editor.value.split("\n");
+    const { line, column } = E.cursorPosition(editor);
+    // Con textos pegados muy largos solo se ve una ventana alrededor del cursor (el cuadro no puede pasar de la pantalla)
+    const start = Math.max(0, Math.min(line - Math.floor(props.maxLines / 2), lines.length - props.maxLines));
+    const end = Math.min(lines.length, start + props.maxLines);
+    const maxChars = Math.max(200, props.width * 3);
+    const clip = (text, from) => text.slice(from, from + maxChars);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: color, paddingX: 1, marginTop: 1, children: [props.attachments > 0 ? (_jsxs(Text, { color: "cyan", children: [Array.from({ length: props.attachments }, (_, i) => `[Imagen ${i + 1}]`).join(" "), _jsx(Text, { dimColor: true, children: " (se env\u00EDan con el pr\u00F3ximo mensaje)" })] })) : null, start > 0 ? _jsxs(Text, { dimColor: true, children: ["  \u2191 ", start, " l\u00EDneas m\u00E1s"] }) : null, lines.slice(start, end).map((text, offset) => {
+                const index = start + offset;
+                // En líneas larguísimas se enseña el trozo donde está el cursor
+                const from = index === line ? Math.max(0, column - Math.floor(maxChars / 2)) : 0;
+                return (_jsxs(Text, { children: [_jsx(Text, { color: color, children: index === 0 ? (shell ? "$ " : "❯ ") : "  " }), editor.value === "" ? (_jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { dimColor: true, children: props.placeholder })] })) : index === line ? (_jsxs(_Fragment, { children: [from > 0 ? "…" : "", text.slice(from, column), _jsx(Text, { inverse: true, children: text[column] || " " }), clip(text, column + 1).slice(0, maxChars - (column - from))] })) : (clip(text, 0) + (text.length > maxChars ? "…" : ""))] }, index));
+            }), end < lines.length ? _jsxs(Text, { dimColor: true, children: ["  \u2193 ", lines.length - end, " l\u00EDneas m\u00E1s"] }) : null, shell ? _jsxs(Text, { dimColor: true, children: ["Enter lo ejecuta en ", tildify(process.cwd()), " \u00B7 el agente ver\u00E1 la salida"] }) : null] }));
+}
+// Medidor de contexto: ▰▰▰▱▱▱▱▱ 34 %
+function ContextGauge(props) {
+    if (props.used <= 0 || props.total <= 0) {
+        return null;
+    }
+    const ratio = Math.min(1, props.used / props.total);
+    const filled = Math.min(8, Math.ceil(ratio * 8));
+    let color = "green";
+    if (ratio >= 0.85) {
+        color = "red";
+    }
+    else if (ratio >= 0.6) {
+        color = "yellow";
+    }
+    return (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: " \u00B7 " }), _jsx(Text, { color: color, children: "▰".repeat(filled) }), _jsxs(Text, { dimColor: true, children: ["▱".repeat(8 - filled), " ", Math.round(ratio * 100), "% de ", shortTokens(props.total)] })] }));
+}
+function StatusBar(props) {
+    const { app } = props;
+    const agent = app.agents.find((item) => item.name === props.agentName);
+    const current = props.model || app.router.pinned || app.agent.lastSlot;
+    const slot = app.router.slotFor(current);
+    const context = app.router.slotFor(app.agent.lastSlot)?.model.context || 0;
+    const available = app.router.availableCount();
+    const usage = app.agent.session.usage;
+    const spent = usage.prompt + usage.completion;
+    const queued = app.agent.queue.length;
+    let hint = "ctrl+p comandos · /help";
+    if (props.busy) {
+        hint = "esc interrumpe · escribe para añadir instrucciones";
+    }
+    return (_jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: agent?.color || "magenta", children: props.agentName }), _jsxs(Text, { dimColor: true, children: [" ", "\u00B7 ", current || "rotación automática", slot && slot.score !== null ? ` ★${slot.score}` : "", app.router.pinned ? " (fijado)" : ""] }), _jsx(ContextGauge, { used: app.agent.lastTokens, total: context }), _jsxs(Text, { dimColor: true, children: [" ", "\u00B7 ", available, "/", app.router.slots.length, " modelos", spent > 0 ? ` · ${shortTokens(spent)} tokens` : "", queued > 0 ? ` · ${queued} en cola` : ""] }), app.yolo ? _jsx(Text, { color: "red", children: " \u00B7 yolo" }) : null] }), _jsx(Text, { dimColor: true, wrap: "truncate-start", children: hint })] }));
+}
+function Main(props) {
+    const { app } = props;
+    const { exit } = useApp();
+    const { columns, rows } = useWindowSize();
+    const [items, setItems] = useState([{ id: 0, kind: "banner" }]);
+    const nextId = useRef(1);
+    const [editor, setEditor] = useState(E.EMPTY);
+    const [busy, setBusy] = useState(false);
+    const [dialog, setDialog] = useState(null);
+    const [todos, setTodos] = useState(app.agent.session.todos);
+    const [attachments, setAttachments] = useState([]);
+    const [selectedSuggestion, setSelectedSuggestion] = useState(0);
+    const [suggestionsClosed, setSuggestionsClosed] = useState(false);
+    const [agentName, setAgentName] = useState(app.agent.agent.name);
+    const [, setVersion] = useState(0);
+    const live = useRef({ text: "", reasoning: "", running: new Map(), model: "", shell: null });
+    const dirty = useRef(false);
+    const controller = useRef(null);
+    const startedAt = useRef(Date.now());
+    // Para el pie de cada respuesta: modelo que contestó y tokens al empezar
+    const answered = useRef("");
+    const tokensAtStart = useRef(0);
+    const history = useRef(loadHistory());
+    const historyIndex = useRef(null);
+    const draft = useRef("");
+    const lastCtrlC = useRef(0);
+    const dialogRef = useRef(null);
+    dialogRef.current = dialog;
+    const refresh = () => setVersion((v) => v + 1);
+    const push = (item) => {
+        const id = nextId.current++;
+        setItems((previous) => [...previous, { ...item, id }]);
+    };
+    const agentColor = () => app.agents.find((item) => item.name === app.agent.agent.name)?.color || "magenta";
+    // Pasa el texto en directo al historial fijo de arriba
+    const flushText = () => {
+        const text = live.current.text;
+        if (text.trim() !== "") {
+            push({ kind: "assistant", text, color: agentColor() });
+        }
+        live.current.text = "";
+        live.current.reasoning = "";
+        dirty.current = true;
+    };
+    const adapter = useMemo(() => ({
+        info: (text) => push({ kind: "info", text }),
+        notice: (text) => push({ kind: "notice", text }),
+        error: (text) => push({ kind: "error", text }),
+        block: (text) => push({ kind: "block", text }),
+        select: (title, list) => new Promise((resolve) => {
+            setDialog({
+                kind: "select",
+                title,
+                items: list,
+                resolve: (value) => {
+                    setDialog(null);
+                    resolve(value);
+                },
+            });
+        }),
+        prompt: (title, options) => new Promise((resolve) => {
+            setDialog({
+                kind: "prompt",
+                title,
+                mask: options?.mask,
+                placeholder: options?.placeholder,
+                resolve: (value) => {
+                    setDialog(null);
+                    resolve(value);
+                },
+            });
+        }),
+        setInput: (text) => setEditor({ value: text, cursor: text.length }),
+    }), []);
+    // Si se interrumpe con un permiso pendiente, se contesta que no para que el agente no se quede esperando
+    const cancelDialog = () => {
+        const current = dialogRef.current;
+        if (!current) {
+            return;
+        }
+        if (current.kind === "permission") {
+            current.resolve({ reply: { allow: false } });
+        }
+        else if (current.kind === "select") {
+            current.resolve(null);
+        }
+        else {
+            current.resolve(null);
+        }
+        setDialog(null);
+    };
+    const quit = async () => {
+        controller.current?.abort();
+        cancelDialog();
+        await app.shutdown();
+        exit();
+        setTimeout(() => process.exit(0), 100);
+    };
+    const sessionTokens = () => app.agent.session.usage.prompt + app.agent.session.usage.completion;
+    const runAgent = async (input, options) => {
+        setBusy(true);
+        startedAt.current = Date.now();
+        answered.current = "";
+        tokensAtStart.current = sessionTokens();
+        live.current.model = "";
+        const abort = new AbortController();
+        controller.current = abort;
+        try {
+            await app.runPrompt(input, options, abort.signal);
+        }
+        catch (err) {
+            if (abort.signal.aborted) {
+                push({ kind: "info", text: "(interrumpido)" });
+            }
+            else if (err instanceof NoSlotError) {
+                push({ kind: "error", text: err.message });
+            }
+            else {
+                push({ kind: "error", text: err.message || String(err) });
+            }
+        }
+        finally {
+            flushText();
+            if (answered.current) {
+                push({
+                    kind: "answer",
+                    slot: answered.current,
+                    score: app.router.slotFor(answered.current)?.score ?? null,
+                    ms: Date.now() - startedAt.current,
+                    tokens: sessionTokens() - tokensAtStart.current,
+                });
+            }
+            live.current.running.clear();
+            live.current.model = "";
+            controller.current = null;
+            setBusy(false);
+            setAgentName(app.agent.agent.name);
+            setTodos([...app.agent.session.todos]);
+            refresh();
+            // Lo que se escribió al final y no llegó a entregarse se lanza ahora
+            const next = app.agent.queue.shift();
+            if (next) {
+                void runAgent(next, {});
+            }
+        }
+    };
+    // !comando: se ejecuta en la carpeta del proyecto y la salida le llega al agente con el siguiente mensaje
+    const runShell = async (command) => {
+        setBusy(true);
+        startedAt.current = Date.now();
+        const abort = new AbortController();
+        controller.current = abort;
+        live.current.shell = { command, output: "" };
+        try {
+            const result = await app.runShell(command, (text) => {
+                if (live.current.shell) {
+                    live.current.shell.output = (live.current.shell.output + text).slice(-4000);
+                    dirty.current = true;
+                }
+            }, abort.signal);
+            push({ kind: "shell", command, output: result.output, code: result.code });
+        }
+        finally {
+            live.current.shell = null;
+            controller.current = null;
+            setBusy(false);
+            refresh();
+        }
+    };
+    const submit = async (raw) => {
+        const text = raw.trim();
+        if (text === "" && attachments.length === 0) {
+            return;
+        }
+        setEditor(E.EMPTY);
+        historyIndex.current = null;
+        if (text !== "") {
+            appendHistory(text);
+            history.current.push(text);
+        }
+        if (text.startsWith("!")) {
+            const command = text.slice(1).trim();
+            if (!command) {
+                return;
+            }
+            if (busy) {
+                push({ kind: "error", text: "Espera a que termine (o pulsa Esc) para ejecutar un comando." });
+                return;
+            }
+            void runShell(command);
+            return;
+        }
+        const images = attachments;
+        setAttachments([]);
+        if (text.startsWith("/")) {
+            const command = text.split(/\s+/)[0];
+            if (busy && !SAFE_WHILE_BUSY.includes(command)) {
+                push({ kind: "error", text: "Espera a que termine (o pulsa Esc) para usar ese comando." });
+                return;
+            }
+            push({ kind: "info", text: `❯ ${text}` });
+            try {
+                const result = await app.handleCommand(text, adapter);
+                setAgentName(app.agent.agent.name);
+                setTodos([...app.agent.session.todos]);
+                refresh();
+                if (result.exit) {
+                    await quit();
+                    return;
+                }
+                if (result.run) {
+                    void runAgent({ ...result.run.input, images }, result.run.options);
+                }
+            }
+            catch (err) {
+                push({ kind: "error", text: err.message });
+            }
+            return;
+        }
+        if (busy) {
+            app.agent.queue.push({ text, images });
+            push({ kind: "user", text, images: images.length, queued: true, color: agentColor() });
+            return;
+        }
+        push({ kind: "user", text, images: images.length, color: agentColor() });
+        void runAgent({ text, images }, {});
+    };
+    // La primera vez que se van a usar proveedores sin clave, explicamos qué pasa con lo que envías
+    const askPrivacy = async () => {
+        const choice = await adapter.select(`Antes de empezar: ${app.privacyNotice()}`, [
+            { label: "Entendido, empezar", value: "ok" },
+            { label: "Añadir antes un proveedor con clave", description: "como /connect", value: "connect" },
+            { label: "No usar nunca los que no piden clave", description: 'guarda "keyless": false en tu configuración', value: "off" },
+        ]);
+        if (!choice) {
+            // Con Esc se vuelve a preguntar la próxima vez
+            return;
+        }
+        app.acceptPrivacyNotice();
+        if (choice === "connect") {
+            await app.connect(adapter, "");
+        }
+        else if (choice === "off") {
+            app.disableKeyless();
+            push({ kind: "info", text: "No usaré los proveedores sin clave (lo puedes cambiar con \"keyless\" en la configuración)." });
+            if (app.router.slots.length === 0) {
+                await app.connect(adapter, "");
+            }
+        }
+        refresh();
+    };
+    // Paleta de comandos (Ctrl+P): todos los comandos, skills y agentes con su descripción
+    const openPalette = async () => {
+        const commands = app.commandSuggestions();
+        const choice = await adapter.select("Comandos y skills", commands.map((command) => ({ label: `/${command.name}`, description: command.description, value: command })));
+        if (!choice) {
+            return;
+        }
+        if (choice.needsArgs) {
+            const value = `/${choice.name} `;
+            setEditor({ value, cursor: value.length });
+            return;
+        }
+        void submit(`/${choice.name}`);
+    };
+    // Conectamos el agente con la pantalla
+    useEffect(() => {
+        app.agent.events = {
+            onText: (chunk, depth) => {
+                if (depth > 0) {
+                    return;
+                }
+                live.current.text += chunk;
+                live.current.reasoning = "";
+                dirty.current = true;
+            },
+            onReasoning: (chunk, depth) => {
+                if (depth > 0 || !app.config.showReasoning) {
+                    return;
+                }
+                live.current.reasoning = (live.current.reasoning + chunk).slice(-600);
+                dirty.current = true;
+            },
+            onTextEnd: (depth) => {
+                if (depth === 0) {
+                    flushText();
+                }
+            },
+            onToolStart: (event) => {
+                flushText();
+                live.current.running.set(`${event.depth}:${event.id}`, { event, progress: "", since: Date.now() });
+                dirty.current = true;
+            },
+            onToolProgress: (event, text) => {
+                const entry = live.current.running.get(`${event.depth}:${event.id}`);
+                if (entry) {
+                    entry.progress = (entry.progress + text).slice(-2000);
+                    dirty.current = true;
+                }
+            },
+            onToolEnd: (event) => {
+                const key = `${event.depth}:${event.id}`;
+                const since = live.current.running.get(key)?.since || Date.now();
+                live.current.running.delete(key);
+                push({ kind: "tool", event, ms: Date.now() - since });
+                dirty.current = true;
+            },
+            onModel: (slot, depth) => {
+                if (depth === 0) {
+                    live.current.model = slot;
+                    dirty.current = true;
+                }
+            },
+            onAnswer: (slot) => {
+                answered.current = slot;
+                dirty.current = true;
+            },
+            onNotice: (message) => {
+                flushText();
+                const text = message.trim();
+                // El router avisa cuando cambia de modelo: no es un problema, solo información
+                if (text.startsWith("usando ")) {
+                    push({ kind: "info", text: `↻ sigue con ${text.slice("usando ".length)}` });
+                    return;
+                }
+                push({ kind: "notice", text });
+            },
+            onInfo: (message) => {
+                if (message.trim().startsWith("↳")) {
+                    return;
+                }
+                push({ kind: "info", text: message });
+            },
+            onTodos: (list) => setTodos([...list]),
+            onStep: () => refresh(),
+        };
+        app.promptPermission = (request, agent) => new Promise((resolve) => {
+            setDialog({
+                kind: "permission",
+                request,
+                agent: agent.name,
+                resolve: (choice) => {
+                    if (choice.grant === "kind") {
+                        app.grants.allowKind(request.kind);
+                    }
+                    else if (choice.grant === "pattern" && choice.pattern) {
+                        app.grants.allowPattern("bash", choice.pattern);
+                    }
+                    setDialog(null);
+                    resolve(choice.reply);
+                },
+            });
+        });
+        const timer = setInterval(() => {
+            if (dirty.current) {
+                dirty.current = false;
+                refresh();
+            }
+        }, 60);
+        // Tareas de arranque en segundo plano
+        let starting = Promise.resolve();
+        for (const notice of configNotices) {
+            push({ kind: "notice", text: notice });
+        }
+        const session = app.agent.session;
+        if (session.messages.length > 0) {
+            push({ kind: "info", text: `Continúas «${session.title}» (${session.turns.length} mensajes tuyos). /new empieza otra.` });
+        }
+        if (app.router.slots.length === 0) {
+            push({
+                kind: "notice",
+                text: "Todavía no tienes ningún modelo. Elige un proveedor gratuito y pega su clave (puedes repetirlo con /connect).",
+            });
+            void app.connect(adapter, "").then(refresh);
+        }
+        else if (app.needsPrivacyNotice()) {
+            starting = askPrivacy();
+        }
+        else if (app.onlyAnonymous()) {
+            push({ kind: "info", text: app.anonymousNotice() });
+        }
+        void app.startMcp(refresh).then(() => {
+            for (const server of app.mcp?.status() || []) {
+                if (server.state === "error") {
+                    push({ kind: "notice", text: `MCP ${server.name}: ${server.error}` });
+                }
+            }
+            refresh();
+        });
+        // Una vez al día mira en GitHub si hay una versión nueva de vipcode
+        if (app.config.checkUpdates !== false) {
+            void checkForUpdate().then((version) => {
+                if (version) {
+                    push({ kind: "notice", text: `Hay una versión nueva de vipcode (${version}, tienes la ${VERSION}). Escribe /update para instalarla.` });
+                }
+            });
+        }
+        if (app.config.autoUpdateModels && discoveryIsStale()) {
+            void app
+                .refreshModels()
+                .then((summary) => {
+                const added = summary.updated.reduce((total, entry) => total + entry.added.length, 0);
+                if (added > 0) {
+                    push({ kind: "info", text: `He encontrado ${added} modelos gratis nuevos (/models para verlos).` });
+                }
+                refresh();
+            })
+                .catch(() => { });
+        }
+        void app.snapshots.cleanup().catch(() => { });
+        // El mensaje con el que se abrió (vipcode "tarea") espera a que contestes el aviso de privacidad
+        void starting.then(() => {
+            if (props.initial.trim() !== "") {
+                void submit(props.initial);
+            }
+        });
+        return () => clearInterval(timer);
+    }, []);
+    const suggestions = useMemo(() => {
+        if (dialog || suggestionsClosed) {
+            return [];
+        }
+        const before = editor.value.slice(0, editor.cursor);
+        if (editor.value.startsWith("/") && !before.includes(" ") && !editor.value.includes("\n")) {
+            const typed = before.slice(1).toLowerCase();
+            return app
+                .commandSuggestions()
+                .filter((command) => command.name.startsWith(typed))
+                .slice(0, 8)
+                .map((command) => ({
+                label: `/${command.name}`,
+                description: command.description,
+                apply: () => {
+                    const value = `/${command.name} `;
+                    return { value, cursor: value.length };
+                },
+                submit: !command.needsArgs,
+            }));
+        }
+        const mention = E.mentionAtCursor(editor);
+        if (mention) {
+            return suggestFiles(app.root, mention.text).map((file) => ({
+                label: `@${file}`,
+                apply: (state) => E.replaceRange(state, mention.start, state.cursor, `@${file}${file.endsWith("/") ? "" : " "}`),
+                submit: false,
+            }));
+        }
+        return [];
+    }, [editor, dialog, suggestionsClosed]);
+    const suggestionsVisible = suggestions.length > 0;
+    const selected = Math.min(selectedSuggestion, Math.max(0, suggestions.length - 1));
+    const update = (state) => {
+        setEditor(state);
+        setSuggestionsClosed(false);
+        setSelectedSuggestion(0);
+    };
+    const accept = (andSubmit) => {
+        const suggestion = suggestions[selected];
+        if (!suggestion) {
+            return;
+        }
+        const next = suggestion.apply(editor);
+        if (andSubmit && suggestion.submit) {
+            void submit(next.value);
+            return;
+        }
+        update(next);
+        if (!suggestion.label.endsWith("/")) {
+            setSuggestionsClosed(true);
+        }
+    };
+    const attachImage = (dataUrl, label) => {
+        setAttachments((previous) => [...previous, dataUrl]);
+        push({ kind: "info", text: `Imagen adjuntada: ${label}` });
+    };
+    useInput((input, key) => {
+        // Ctrl+C funciona siempre: interrumpe, cierra el diálogo, borra lo escrito o sale
+        if (key.ctrl && input === "c") {
+            if (busy && controller.current) {
+                controller.current.abort();
+                cancelDialog();
+                return;
+            }
+            if (dialogRef.current) {
+                cancelDialog();
+                return;
+            }
+            if (editor.value !== "") {
+                update(E.EMPTY);
+                return;
+            }
+            if (Date.now() - lastCtrlC.current < 1500) {
+                void quit();
+                return;
+            }
+            lastCtrlC.current = Date.now();
+            push({ kind: "info", text: "(pulsa Ctrl+C otra vez para salir)" });
+            return;
+        }
+        if (dialogRef.current) {
+            // Los diálogos tienen su propio teclado; Esc en el de permisos ya contesta que no
+            return;
+        }
+        if (key.escape) {
+            if (suggestionsVisible) {
+                setSuggestionsClosed(true);
+            }
+            else if (busy && controller.current) {
+                controller.current.abort();
+            }
+            return;
+        }
+        // Algunas terminales mandan \n en vez de \r al pulsar Enter
+        if (key.return || input === "\n") {
+            if (key.meta || key.shift) {
+                update(E.insert(editor, "\n"));
+                return;
+            }
+            if (suggestionsVisible) {
+                accept(true);
+                return;
+            }
+            if (editor.value.endsWith("\\") && editor.cursor === editor.value.length) {
+                update({ value: `${editor.value.slice(0, -1)}\n`, cursor: editor.value.length });
+                return;
+            }
+            void submit(editor.value);
+            return;
+        }
+        if (key.tab) {
+            if (suggestionsVisible) {
+                accept(false);
+                return;
+            }
+            if (!busy) {
+                const next = app.cycleAgent(key.shift ? -1 : 1);
+                setAgentName(next.name);
+            }
+            return;
+        }
+        if (key.upArrow) {
+            if (suggestionsVisible) {
+                setSelectedSuggestion(Math.max(0, selected - 1));
+                return;
+            }
+            const moved = E.moveVertical(editor, -1);
+            if (moved) {
+                setEditor(moved);
+                return;
+            }
+            const list = history.current;
+            if (list.length === 0) {
+                return;
+            }
+            if (historyIndex.current === null) {
+                draft.current = editor.value;
+                historyIndex.current = list.length;
+            }
+            if (historyIndex.current > 0) {
+                historyIndex.current--;
+                const value = list[historyIndex.current];
+                setEditor({ value, cursor: value.length });
+                setSuggestionsClosed(true);
+            }
+            return;
+        }
+        if (key.downArrow) {
+            if (suggestionsVisible) {
+                setSelectedSuggestion(Math.min(suggestions.length - 1, selected + 1));
+                return;
+            }
+            const moved = E.moveVertical(editor, 1);
+            if (moved) {
+                setEditor(moved);
+                return;
+            }
+            if (historyIndex.current === null) {
+                return;
+            }
+            historyIndex.current++;
+            if (historyIndex.current >= history.current.length) {
+                historyIndex.current = null;
+                setEditor({ value: draft.current, cursor: draft.current.length });
+            }
+            else {
+                const value = history.current[historyIndex.current];
+                setEditor({ value, cursor: value.length });
+            }
+            setSuggestionsClosed(true);
+            return;
+        }
+        if (key.leftArrow) {
+            setEditor(E.moveLeft(editor, key.meta || key.ctrl));
+            return;
+        }
+        if (key.rightArrow) {
+            setEditor(E.moveRight(editor, key.meta || key.ctrl));
+            return;
+        }
+        if (key.home || (key.ctrl && input === "a")) {
+            setEditor(E.lineStart(editor));
+            return;
+        }
+        if (key.end || (key.ctrl && input === "e")) {
+            setEditor(E.lineEnd(editor));
+            return;
+        }
+        if (key.backspace) {
+            update(key.meta ? E.deleteWordBack(editor) : E.backspace(editor));
+            return;
+        }
+        if (key.delete) {
+            update(E.deleteForward(editor));
+            return;
+        }
+        if (key.ctrl) {
+            if (input === "u") {
+                update(E.deleteToLineStart(editor));
+            }
+            else if (input === "k") {
+                update(E.deleteToLineEnd(editor));
+            }
+            else if (input === "w") {
+                update(E.deleteWordBack(editor));
+            }
+            else if (input === "j") {
+                update(E.insert(editor, "\n"));
+            }
+            else if (input === "p") {
+                void openPalette();
+            }
+            else if (input === "d") {
+                if (editor.value === "") {
+                    void quit();
+                }
+                else {
+                    update(E.deleteForward(editor));
+                }
+            }
+            else if (input === "v") {
+                void readClipboardImage().then((image) => {
+                    if (image) {
+                        attachImage(image, "portapapeles");
+                    }
+                    else {
+                        push({ kind: "info", text: "No hay ninguna imagen en el portapapeles (para texto usa Cmd+V)." });
+                    }
+                });
+            }
+            return;
+        }
+        if (key.meta) {
+            if (input === "b") {
+                setEditor(E.moveLeft(editor, true));
+            }
+            else if (input === "f") {
+                setEditor(E.moveRight(editor, true));
+            }
+            return;
+        }
+        if (input) {
+            // Algunas terminales mandan "texto + Enter" de golpe: el Enter final envía, no es un salto de línea
+            if (input.length > 1 && /[\r\n]$/.test(input) && !/[\r\n]/.test(input.slice(0, -1))) {
+                void submit(E.insert(editor, input.slice(0, -1)).value);
+                return;
+            }
+            update(E.insert(editor, input.replace(/\r\n?/g, "\n")));
+        }
+    });
+    usePaste((text) => {
+        // Arrastrar una imagen a la terminal pega su ruta: la adjuntamos como imagen
+        const candidate = text.trim().replace(/^['"]|['"]$/g, "").replace(/\\ /g, " ");
+        if (isImagePath(candidate)) {
+            const file = path.resolve(app.root, candidate);
+            if (fs.existsSync(file)) {
+                try {
+                    attachImage(toDataUrl(file), path.basename(file));
+                }
+                catch (err) {
+                    push({ kind: "error", text: err.message });
+                }
+                return;
+            }
+        }
+        update(E.insert(editor, text.replace(/\r\n?/g, "\n")));
+    }, { isActive: !dialog });
+    const agent = app.agents.find((item) => item.name === agentName);
+    const color = agent?.color || "magenta";
+    // La zona en directo no puede pasar del alto de la pantalla (Ink no sabe borrar lo que se ha ido hacia arriba)
+    const liveRoom = Math.max(4, rows - 14);
+    const liveText = live.current.text ? lastLines(renderMarkdown(live.current.text, Math.max(20, columns - 4)), liveRoom) : "";
+    const running = [...live.current.running.values()];
+    const shell = live.current.shell;
+    let dialogView = null;
+    if (dialog?.kind === "permission") {
+        const lines = dialog.request.preview.split("\n");
+        const room = Math.max(6, rows - 16);
+        let request = dialog.request;
+        if (lines.length > room) {
+            request = { ...request, preview: `${lines.slice(0, room).join("\n")}\n… ${lines.length - room} líneas más` };
+        }
+        dialogView = _jsx(PermissionDialog, { request: request, agent: dialog.agent, onDone: dialog.resolve }, "permission");
+    }
+    else if (dialog?.kind === "select") {
+        dialogView = _jsx(SelectDialog, { title: dialog.title, items: dialog.items, onDone: dialog.resolve }, "select");
+    }
+    else if (dialog?.kind === "prompt") {
+        dialogView = _jsx(PromptDialog, { title: dialog.title, mask: dialog.mask, placeholder: dialog.placeholder, onDone: dialog.resolve }, "prompt");
+    }
+    let placeholder = "Escribe tu mensaje… (@ ficheros · / comandos · ! terminal · Ctrl+P paleta)";
+    if (busy) {
+        placeholder = "Escribe para añadir instrucciones mientras trabaja…";
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: items, children: (item) => _jsx(ItemView, { item: item, app: app, width: columns }, item.id) }), _jsxs(Box, { flexDirection: "column", children: [live.current.reasoning ? (_jsxs(Text, { dimColor: true, italic: true, wrap: "truncate-end", children: ["\uD83D\uDCAD ", lastLines(stripControl(live.current.reasoning).replace(/\s+/g, " "), 1).slice(-Math.max(20, columns - 6))] })) : null, liveText ? (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: color, children: "\u25CF " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Text, { children: [liveText, _jsx(Text, { color: color, children: "\u258D" })] }) })] })) : null, running.map(({ event, progress, since }) => (_jsxs(Box, { flexDirection: "column", marginLeft: event.depth > 0 ? 4 : 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Spinner, {}), " ", _jsx(ToolHeader, { name: event.name, summary: event.summary }), " ", _jsx(Elapsed, { since: since, hideUnderMs: 2000 })] }), progress ? (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["    ", lastLines(stripControl(progress), 1).slice(0, Math.max(20, columns - 8))] })) : null] }, `${event.depth}:${event.id}`))), shell ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Spinner, { color: "yellow" }), " ", _jsx(Text, { bold: true, children: showControl(shell.command) }), " ", _jsx(Elapsed, { since: startedAt.current, hideUnderMs: 1000 })] }), shell.output ? _jsx(Text, { dimColor: true, children: lastLines(stripControl(shell.output), Math.min(8, liveRoom)).replace(/^/gm, "  ") }) : null] })) : null, _jsx(TodoPanel, { todos: todos }), busy && !shell && running.length === 0 && !liveText && !answered.current ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Spinner, {}), " ", _jsxs(Text, { dimColor: true, children: ["Pensando", live.current.model ? ` con ${live.current.model}` : "", "\u2026 "] }), _jsx(Elapsed, { since: startedAt.current, hideUnderMs: 1000 })] }) })) : null, dialogView || (_jsx(InputBox, { editor: editor, color: color, placeholder: placeholder, attachments: attachments.length, maxLines: Math.max(3, Math.floor(rows / 2) - 4), width: columns })), suggestionsVisible && !dialog ? (_jsx(Box, { flexDirection: "column", paddingX: 2, children: suggestions.map((suggestion, index) => (_jsxs(Text, { color: index === selected ? "cyan" : undefined, wrap: "truncate-end", children: [index === selected ? "❯ " : "  ", suggestion.label, suggestion.description ? _jsxs(Text, { dimColor: true, children: [" ", suggestion.description] }) : null] }, `${index}-${suggestion.label}`))) })) : null, _jsx(StatusBar, { app: app, agentName: agentName, busy: busy, model: busy ? live.current.model : "" })] })] }));
+}
+export async function startTui(app, options = {}) {
+    const instance = render(_jsx(Main, { app: app, initial: options.initial || "" }), {
+        exitOnCtrlC: false,
+        kittyKeyboard: { mode: "auto" },
+    });
+    await instance.waitUntilExit();
+}