chocolatito-code 1.3.0 → 1.3.1

package/dist/ui/prompt.js

@@ -4,12 +4,21 @@ import fs from "node:fs";
 import path from "node:path";
 import os from "node:os";
 import chalk from "chalk";
-import { cycleMode, describeMode, getMode } from "./modes.js";
+import { cycleMode } from "./modes.js";
 import { releaseKeyboard, tomarTecladoParaPrompt, devolverTecladoDelPrompt } from "./interrupt.js";
 import { repararTeclado, reafirmarModoCrudo, MS_ENTRE_COMPROBACIONES } from "./keyboardGuard.js";
 import { clearTyped } from "./typeAhead.js";
 import { dibujar } from "./salida.js";
-import { escribirEncimaDelPie, reiniciarPie } from "./pieFijo.js";
+// La lista vive en su propio modulo porque tambien la necesita el prompt de
+// sistema, y este archivo arrastra readline, el historial y el escaneo del
+// proyecto. Se re-exporta para no romper a quien ya la importaba de aqui.
+import { SLASH_COMMANDS } from "./comandos.js";
+// El marco lo comparten el prompt y el spinner: son la MISMA barra, no dos
+// que se parecen. Ver la nota de marco.ts.
+import { buildPromptFrame } from "./marco.js";
+export { buildPromptFrame } from "./marco.js";
+export { SLASH_COMMANDS } from "./comandos.js";
+import { escribirEncimaDelPie, soltarPie } from "./pieFijo.js";
 import { esGrande, guardarPegado, expandirPegados, marcaQueTerminaEn, limpiarPegados } from "./pegados.js";
 /**
  * Escribir algo mientras el prompt esta dibujado.
@@ -45,26 +54,6 @@ export function imprimirSobreElPrompt(texto) {
     // viven ahi. Un aviso que llegue tarde tiene que pasar por encima igual.
     escribirEncimaDelPie(texto.endsWith("\n") ? texto : `${texto}\n`);
 }
-export const SLASH_COMMANDS = [
-    { name: "/mcp", description: "Ver servidores MCP conectados y sus herramientas" },
-    { name: "/undo", description: "Deshacer las últimas modificaciones de archivos de la sesión" },
-    { name: "/export", description: "Exportar bitácora de la sesión a archivo Markdown", args: "[nombre.md]" },
-    { name: "/plan", description: "Alternar Modo Plan (solo lectura e investigación previa)" },
-    { name: "/resume", description: "Reanudar una sesión anterior guardada", args: "[id]" },
-    { name: "/skills", description: "Ver skills disponibles y cómo usarlos" },
-    { name: "/memory", description: "Consultar la memoria persistente transversal (~/.chocolatito/memory/)" },
-    { name: "/effort", description: "Regular potencia del motor (1.0, 1.5, 2.0, 2.5)", args: "[nivel]" },
-    { name: "/goal", description: "Ejecutar meta compleja autónoma con auto-corrección", args: "<meta>" },
-    { name: "/compact", description: "Comprimir contexto y optimizar memoria de la sesión" },
-    { name: "/diff", description: "Ver diferencias de código (Git diff) del proyecto" },
-    { name: "/commit", description: "Crear un commit en Git con mensaje semántico", args: "<mensaje>" },
-    { name: "/cd", description: "Cambiar el directorio de trabajo activo", args: "<ruta>" },
-    { name: "/cost", description: "Ver consumo detallado de tokens e inversión en USD" },
-    { name: "/clear", description: "Limpiar historial y reiniciar contexto" },
-    { name: "/init", description: "Crear archivo de directivas CHOCOLATITO.md" },
-    { name: "/help", description: "Mostrar guía completa de comandos y ayuda" },
-    { name: "/exit", description: "Cerrar sesión de Chocolatito Code" },
-];
 let isKeypressInitialized = false;
 /**
  * PEGADO DE VARIAS LINEAS
@@ -151,148 +140,18 @@ function scanProjectFiles(dir, maxResults = 40) {
     walk(dir);
     return results;
 }
-const PLACEHOLDER = "Escribe una instrucción, '@' para archivos o '/' para comandos...";
-/**
- * Filas FISICAS que ocupa una linea del marco.
- *
- * Aqui estaba el fallo de verdad: el repintado contaba elementos del array del
- * marco mientras el terminal cuenta filas de pantalla. Cualquier linea que no
- * cupiera en el ancho se partia en dos filas, el cursor subia una fila de menos
- * y el marco entero se iba bajando, dejando una barra huerfana por pulsacion.
- * La entrada ademas puede llevar saltos de linea dentro (continuacion con "\").
- */
-function physicalRows(line, cols) {
-    return stripAnsi(line)
-        .split("\n")
-        .reduce((n, seg) => n + Math.max(1, Math.ceil(seg.length / cols)), 0);
-}
-/** Recorta a `width` columnas visibles. Texto sin pintar: aqui no hay que cerrar colores. */
-function truncatePlain(text, width) {
-    if (width <= 0)
-        return "";
-    if (text.length <= width)
-        return text;
-    return width <= 1 ? text.slice(0, width) : `${text.slice(0, width - 1)}…`;
-}
-/**
- * Arma el marco del prompt y dice exactamente donde queda el cursor.
- *
- * Va aparte de render() por dos razones: se puede probar sin terminal, y la
- * aritmetica de filas se hace UNA vez sobre las mismas lineas que se pintan, en
- * lugar de estimarse por otro lado y descuadrarse.
- */
-export function buildPromptFrame(opts) {
-    const cols = Math.max(20, opts.cols || 80);
-    const viewportRows = Math.max(6, opts.rows || 24);
-    const promptSymbol = opts.promptSymbol ?? "❯";
-    const input = opts.input ?? "";
-    const cursorIndex = Math.max(0, Math.min(opts.cursorIndex ?? input.length, input.length));
-    const items = opts.items ?? [];
-    const selectedIndex = items.length > 0 ? (((opts.selectedIndex ?? 0) % items.length) + items.length) % items.length : 0;
-    const isPlan = promptSymbol.includes("plan");
-    const symbolStr = isPlan
-        ? `${chalk.cyan.bold("plan ❯")} `
-        : `${chalk.bold.hex("#D97757")("❯")} `;
-    const symbolWidth = isPlan ? 7 : 2;
-    const bar = chalk.gray("─".repeat(cols));
-    // 1. Linea de entrada. Lo que el usuario escribe NO se recorta nunca: se deja
-    // que el terminal la parta y despues se cuentan las filas que ocupa.
-    let formattedInput;
-    if (input.length === 0) {
-        // La pista si se recorta: en una ventana estrecha ocupaba una segunda fila
-        // para no decir nada que el usuario no sepa ya.
-        formattedInput = chalk.gray(truncatePlain(PLACEHOLDER, cols - symbolWidth));
-    }
-    else if (input.startsWith("/")) {
-        const parts = input.split(" ");
-        const cmdPart = chalk.bold.hex("#A855F7")(parts[0]);
-        const restPart = parts.slice(1).join(" ");
-        formattedInput = restPart ? `${cmdPart} ${chalk.white(restPart)}` : cmdPart;
-    }
-    else {
-        formattedInput = input.replace(/(@[^\s]+)/g, (m) => chalk.bold.hex("#D97757")(m));
-    }
-    const inputLine = symbolStr + formattedInput;
-    const inputRows = physicalRows(inputLine, cols);
-    // 2. Desplegable. Un marco mas alto que la ventana obliga al terminal a
-    // desplazar el contenido, y a partir de ahi el repintado ya no sabe donde
-    // esta su primera fila: se muestra solo una ventana alrededor del elegido.
-    const room = Math.max(1, viewportRows - 1 - (1 + inputRows + 1 + 1));
-    const shown = Math.min(items.length, room);
-    const dropdownOffset = shown > 0 && items.length > shown
-        ? Math.min(Math.max(0, selectedIndex - Math.floor(shown / 2)), items.length - shown)
-        : 0;
-    const dropdownLines = [];
-    for (let i = dropdownOffset; i < dropdownOffset + shown; i++) {
-        const item = items[i];
-        const isSelected = i === selectedIndex;
-        const colorHex = item.type === "file" ? "#D97757" : "#A855F7";
-        const pointer = isSelected ? chalk.bold.hex(colorHex)(" ❯ ") : chalk.gray("   ");
-        // El puntero se lleva 3 columnas fijas. De lo que queda manda la etiqueta:
-        // la descripcion es lo primero que se cae, porque una ruta a medias no se
-        // puede ni leer ni elegir.
-        const free = cols - 3;
-        const label = truncatePlain(item.label, free);
-        const roomForDesc = free - label.length - 2;
-        const secondary = item.secondary && roomForDesc >= 8 ? truncatePlain(item.secondary, roomForDesc) : "";
-        const paintedLabel = isSelected ? chalk.bold.white(label) : chalk.hex(colorHex)(label);
-        const paintedDesc = secondary
-            ? isSelected
-                ? chalk.whiteBright(`  ${secondary}`)
-                : chalk.gray(`  ${secondary}`)
-            : "";
-        dropdownLines.push(`${pointer}${paintedLabel}${paintedDesc}`);
-    }
-    // 3. Pie de estado. El relleno se calculaba con Math.max(1, ...): cuando no
-    // cabia, en vez de recortarse se quedaba con un espacio y la linea salia MAS
-    // ancha que el terminal. En una consola de 80 columnas el pie media 87 y se
-    // partia en dos filas desde el primer dibujado.
-    const modeLook = describeMode(getMode());
-    const hintPlain = "? /help para atajos · shift+tab modo · esc cancelar";
-    const modePlain = `⇥ modo ${modeLook.label}`;
-    const enginePlain = "· Espectro 1.0 (Ágil)";
-    const hint = chalk.gray(hintPlain);
-    const modeTag = chalk.hex(modeLook.color)(modePlain);
-    const engine = chalk.gray(enginePlain);
-    let footerLine;
-    if (hintPlain.length + 1 + modePlain.length + 1 + enginePlain.length <= cols) {
-        const padLen = cols - hintPlain.length - modePlain.length - 1 - enginePlain.length;
-        footerLine = `${hint}${" ".repeat(padLen)}${modeTag} ${engine}`;
-    }
-    else if (modePlain.length + 1 + enginePlain.length <= cols) {
-        // Los atajos son opcionales; el modo activo no, que es lo que decide si te
-        // van a preguntar antes de tocar tus archivos.
-        footerLine = `${" ".repeat(cols - modePlain.length - 1 - enginePlain.length)}${modeTag} ${engine}`;
-    }
-    else if (modePlain.length <= cols) {
-        footerLine = `${" ".repeat(cols - modePlain.length)}${modeTag}`;
-    }
-    else {
-        footerLine = chalk.hex(modeLook.color)(truncatePlain(modePlain, cols));
-    }
-    const lines = [bar, inputLine, ...dropdownLines, bar, footerLine];
-    // 4. Donde queda el cursor, en filas fisicas. Antes se hacia cursorCol =
-    // total % cols: aplicaba el modulo pero nunca sumaba la fila, asi que en
-    // cuanto la entrada se partia el acento se iba a escribir a otra linea.
-    const typed = input.length === 0 ? "" : input.slice(0, cursorIndex);
-    const segments = typed.split("\n");
-    let cursorRow = physicalRows(bar, cols);
-    for (let i = 0; i < segments.length - 1; i++) {
-        cursorRow += Math.max(1, Math.ceil(((i === 0 ? symbolWidth : 0) + segments[i].length) / cols));
-    }
-    const lastSegWidth = (segments.length === 1 ? symbolWidth : 0) + segments[segments.length - 1].length;
-    cursorRow += Math.floor(lastSegWidth / cols);
-    const cursorCol = lastSegWidth % cols;
-    const totalRows = lines.reduce((n, l) => n + physicalRows(l, cols), 0);
-    return { lines, totalRows, cursorRow, cursorCol, dropdownOffset };
-}
 export async function askInteractivePrompt(promptSymbol = "❯", cwd = process.cwd()) {
     return new Promise((resolve) => {
-        // A partir de aqui el terminal es del prompt, que lleva su propia cuenta de
-        // filas. El pie fijo tiene que olvidar la suya SIN borrar nada: lo que dejo
-        // en pantalla es respuesta del agente, no adorno. Y devuelve el cursor, que
-        // lo escondia mientras se repintaba.
-        reiniciarPie();
+        // El relevo de la barra.
+        //
+        // Mientras el agente trabajaba, el pie tenia pintado ESTE MISMO marco. Se
+        // borra -dejando el cursor justo donde empezaba- y acto seguido se dibuja
+        // aqui, en el mismo sitio y con el mismo contenido. Desde fuera la barra no
+        // se ha movido: no hay parpadeo ni salto, que era la queja.
+        //
+        // `soltarPie` y no `reiniciarPie`: hay que BORRAR lo que el pie tenia
+        // pintado. Olvidarlo sin borrar dejaria dos marcos, uno encima del otro.
+        soltarPie();
         let inputBuffer = "";
         let cursorIndex = 0;
         let selectedIndex = 0;

package/dist/ui/renderer.d.ts

@@ -5,6 +5,19 @@ export declare function renderToolError(name: string, errorSummary: string): voi
 export declare function renderDiff(filePath: string, diffText: string): void;
 export declare function renderReasoning(reasoningText: string): void;
 export declare function renderAssistantResponse(markdownText: string): void;
+/**
+ * La linea de cada turno.
+ *
+ * `⚡ 3.0s · 64 tokens salida (10.8k en caché) · Espectro 1.0 (Ágil) · 99%
+ *  contexto libre · 28% de la cuota semanal`
+ *
+ * Con cuenta gestionada NO lleva importe. Se quito primero de /cost y esta se
+ * quedo atras; el usuario lo vio enseguida -"aun sigue saliendo el precio que se
+ * gasta"- y con razon: /cost se mira cuando uno se acuerda, esta linea sale en
+ * TODOS los turnos. De los dos sitios, era el que mas importaba.
+ *
+ * Con clave propia si sale: ahi el dinero es del usuario y es su factura.
+ */
 export declare function renderFooter(costStr: string, outTokens: number, cachedTokens: number, modelName: string, durationMs?: number, contextPercent?: number, quotaStr?: string): void;
 export declare function renderError(message: string): void;
 export declare function formatToolName(name: string): string;

package/dist/ui/renderer.js

@@ -1,6 +1,21 @@
+/**
+ * POR QUE ESTO NO USA `console.log`
+ *
+ * Mientras el agente trabaja hay un bloque pintado abajo del todo -el spinner y
+ * la barra de escribir- que se borra y se repinta alrededor de cada escritura.
+ * Un `console.log` no pasa por ahi: escribe donde este el cursor, encima del
+ * bloque, y el repintado siguiente ya no sabe donde empieza el suyo. En pantalla
+ * eso se ve como un spinner que se queda atras y filas huerfanas por todos lados.
+ *
+ * Ademas era el ultimo sitio que ataba el agente a una terminal. `salida` existe
+ * justamente para que el bucle no sepa donde acaba lo que dice, y el
+ * renderizador -que es quien mas imprime- seguia escribiendo directo.
+ */
 import chalk from "chalk";
 import { Marked } from "marked";
 import { markedTerminal } from "marked-terminal";
+import { salida } from "../agent/salidaDelAgente.js";
+import { isManagedMode } from "../config/quota.js";
 const marked = new Marked(markedTerminal({
     heading: chalk.bold.hex("#D97757"),
     firstHeading: chalk.bold.hex("#D97757").underline,
@@ -22,14 +37,14 @@ const marked = new Marked(markedTerminal({
 export function renderUserPrompt(text) {
     const symbol = chalk.bold.hex("#D97757")("❯");
     const shaded = chalk.bgHex("#242730").hex("#F4F4F5").bold(`  ${text.trim()}  `);
-    console.log(`\n${symbol} ${shaded}\n`);
+    salida.linea(`\n${symbol} ${shaded}\n`);
 }
 // Tool call rendering as specified in §B5
 export function renderToolStart(name, summary) {
     const bullet = chalk.hex("#FFA500")("●"); // Amber while starting
     const toolName = chalk.bold.white(formatToolName(name));
     const argPart = summary ? chalk.gray(`(${summary.length > 60 ? summary.slice(0, 57) + '...' : summary})`) : "";
-    console.log(`\n${bullet} ${toolName}${argPart}`);
+    salida.linea(`\n${bullet} ${toolName}${argPart}`);
 }
 export function renderToolSuccess(name, resultSummary) {
     const rawLines = resultSummary.trim().split("\n");
@@ -40,23 +55,23 @@ export function renderToolSuccess(name, resultSummary) {
         const prefix = idx === 0 ? `  ${chalk.gray("⎿")}  ` : "     ";
         return `${prefix}${colorizeText(line)}`;
     }).join("\n");
-    console.log(indented);
+    salida.linea(indented);
     if (remainingCount > 0) {
-        console.log(chalk.gray(`     … +${remainingCount} líneas más`));
+        salida.linea(chalk.gray(`     … +${remainingCount} líneas más`));
     }
 }
 export function renderToolError(name, errorSummary) {
-    console.log(`  ${chalk.red("⎿")}  ${chalk.red(errorSummary)}`);
+    salida.linea(`  ${chalk.red("⎿")}  ${chalk.red(errorSummary)}`);
 }
 export function renderDiff(filePath, diffText) {
-    console.log(`\n${diffText}\n`);
+    salida.linea(`\n${diffText}\n`);
 }
 export function renderReasoning(reasoningText) {
     if (!reasoningText.trim())
         return;
     const lines = reasoningText.trim().split("\n");
     const formatted = lines.map((l) => `  ${chalk.hex("#8B5CF6")("│")} ${chalk.gray(l)}`).join("\n");
-    console.log(`\n  ${chalk.bold.hex("#8B5CF6")("💭 Razonamiento:")}\n${formatted}\n`);
+    salida.linea(`\n  ${chalk.bold.hex("#8B5CF6")("💭 Razonamiento:")}\n${formatted}\n`);
 }
 export function renderAssistantResponse(markdownText) {
     try {
@@ -68,23 +83,37 @@ export function renderAssistantResponse(markdownText) {
         let parsed = String(marked.parse(cleaned));
         // Convert raw asterisks bullets to terracotta bullets
         parsed = parsed.replace(/^(\s*)\*\s+/gm, `$1${chalk.hex("#D97757")("•")} `);
-        console.log(`\n${parsed}`);
+        salida.linea(`\n${parsed}`);
     }
     catch {
-        console.log(`\n${markdownText.trim()}\n`);
+        salida.linea(`\n${markdownText.trim()}\n`);
     }
 }
+/**
+ * La linea de cada turno.
+ *
+ * `⚡ 3.0s · 64 tokens salida (10.8k en caché) · Espectro 1.0 (Ágil) · 99%
+ *  contexto libre · 28% de la cuota semanal`
+ *
+ * Con cuenta gestionada NO lleva importe. Se quito primero de /cost y esta se
+ * quedo atras; el usuario lo vio enseguida -"aun sigue saliendo el precio que se
+ * gasta"- y con razon: /cost se mira cuando uno se acuerda, esta linea sale en
+ * TODOS los turnos. De los dos sitios, era el que mas importaba.
+ *
+ * Con clave propia si sale: ahi el dinero es del usuario y es su factura.
+ */
 export function renderFooter(costStr, outTokens, cachedTokens, modelName, durationMs, contextPercent, quotaStr) {
     const durationPart = durationMs ? `${(durationMs / 1000).toFixed(1)}s · ` : "";
     const outPart = `${outTokens.toLocaleString()} tokens salida`;
     const cachePart = cachedTokens > 0 ? ` (${(cachedTokens / 1000).toFixed(1)}k en caché)` : "";
     const contextPart = contextPercent !== undefined ? ` · ${contextPercent}% contexto libre` : "";
     const quotaPart = quotaStr ? ` · ${quotaStr}` : "";
-    const line = chalk.gray(`  ${chalk.hex("#D97757")("⚡")} ${durationPart}${outPart}${cachePart} · ${chalk.green(costStr)} · ${modelName}${contextPart}${quotaPart}`);
-    console.log(`${line}\n`);
+    const costPart = isManagedMode() ? "" : ` · ${chalk.green(costStr)}`;
+    const line = chalk.gray(`  ${chalk.hex("#D97757")("⚡")} ${durationPart}${outPart}${cachePart}${costPart} · ${modelName}${contextPart}${quotaPart}`);
+    salida.linea(`${line}\n`);
 }
 export function renderError(message) {
-    console.log(`\n  ${chalk.bgRed.white.bold(" ERROR ")} ${chalk.red(message)}\n`);
+    salida.linea(`\n  ${chalk.bgRed.white.bold(" ERROR ")} ${chalk.red(message)}\n`);
 }
 function colorizeText(text) {
     // Highlight file paths (C:\..., /path/...) in cyan

package/dist/ui/spinner.d.ts

@@ -19,13 +19,41 @@ export declare class DynamicSpinner {
      */
     private lineaDelSpinner;
     /**
-     * La barra de escribir, debajo del spinner.
+     * LA BARRA. La MISMA que se ve al escribir una orden, no una parecida.
      *
-     * Antes solo aparecia si ya habias escrito algo, asi que mientras el agente
-     * trabajaba no habia ninguna senal de que se pudiera escribir: el teclado es
-     * del vigilante y lo tecleado se acumulaba a ciegas. Ahora la barra esta
-     * siempre, y es la misma que se ve al escribir el prompt.
+     * Antes habia dos: al esperar salia el marco entero -barra, entrada, barra,
+     * linea de ayuda-; al trabajar, una version recortada con otro texto. Se
+     * parecian lo justo para que el cambio de una a otra se viera como un salto.
+     * Palabras del usuario: "aun no es fija... debe ser fija y por debajo deben
+     * pasar los otros mensajes".
+     *
+     * Ahora las dos salen de `buildPromptFrame`, asi que no pueden divergir: quien
+     * toque el marco lo toca en los dos estados a la vez.
+     *
+     * Sin desplegable: el autocompletado de "@" y "/" es del prompt de verdad, que
+     * es quien tiene el teclado. Aqui lo tecleado solo se encola.
      */
     private lineasDeEntrada;
     stop(): void;
 }
+/**
+ * DEJA EL PIE PUESTO MIENTRAS CORRE ALGO
+ *
+ * El spinner solo vivia mientras hablaba el modelo. En cuanto empezaba una
+ * herramienta se paraba, y ahi se acababa lo unico fijo de la pantalla: durante
+ * un `run_command` de veinte segundos, o una lectura de un archivo enorme, no
+ * habia ni cronometro ni forma de saber que seguia vivo. Justo el rato en que
+ * uno se pregunta si se ha colgado.
+ *
+ * EL RETRASO NO ES UN CAPRICHO
+ *
+ * La mayoria de las herramientas tardan milisegundos. Pintar el pie y borrarlo
+ * en el mismo suspiro es un parpadeo en cada llamada, y encima el pie mueve
+ * lineas: veinte herramientas seguidas serian veinte sacudidas. Con 150 ms de
+ * espera, lo rapido no pinta nada y lo lento sale igual.
+ *
+ * El `finally` es obligatorio. Un spinner que se queda corriendo repinta el pie
+ * ocho veces por segundo encima de lo que venga despues -incluido el prompt-, y
+ * de ahi no se sale sin cerrar el programa.
+ */
+export declare function conSpinner<T>(etiqueta: string, tarea: () => Promise<T>, retrasoMs?: number): Promise<T>;

package/dist/ui/spinner.js

@@ -2,7 +2,8 @@ import chalk from "chalk";
 import process from "node:process";
 import { typedText, queuedCount } from "./typeAhead.js";
 import { modeBadge } from "./modes.js";
-import { fijarSecciones } from "./pieFijo.js";
+import { fijarSecciones, quitarSeccion } from "./pieFijo.js";
+import { buildPromptFrame } from "./marco.js";
 /**
  * LA LINEA QUE DICE QUE ESTO SIGUE VIVO
  *
@@ -31,18 +32,9 @@ const VERBS = [
     "Tejiendo",
     "Cocinando",
 ];
-const PISTA_VACIA = "escribe para encolar un mensaje…";
 function sinColores(texto) {
     return texto.replace(/\x1b\[[0-9;]*m/g, "");
 }
-/** Deja las ULTIMAS `ancho` columnas: al escribir, lo que importa es el final. */
-function colaVisible(texto, ancho) {
-    if (ancho <= 0)
-        return "";
-    if (texto.length <= ancho)
-        return texto;
-    return `…${texto.slice(-(ancho - 1))}`;
-}
 export class DynamicSpinner {
     timer = null;
     glyphIdx = 0;
@@ -109,22 +101,30 @@ export class DynamicSpinner {
         return hueco >= 2 ? `${izquierda}${" ".repeat(hueco)}${badge}` : izquierda;
     }
     /**
-     * La barra de escribir, debajo del spinner.
+     * LA BARRA. La MISMA que se ve al escribir una orden, no una parecida.
+     *
+     * Antes habia dos: al esperar salia el marco entero -barra, entrada, barra,
+     * linea de ayuda-; al trabajar, una version recortada con otro texto. Se
+     * parecian lo justo para que el cambio de una a otra se viera como un salto.
+     * Palabras del usuario: "aun no es fija... debe ser fija y por debajo deben
+     * pasar los otros mensajes".
      *
-     * Antes solo aparecia si ya habias escrito algo, asi que mientras el agente
-     * trabajaba no habia ninguna senal de que se pudiera escribir: el teclado es
-     * del vigilante y lo tecleado se acumulaba a ciegas. Ahora la barra esta
-     * siempre, y es la misma que se ve al escribir el prompt.
+     * Ahora las dos salen de `buildPromptFrame`, asi que no pueden divergir: quien
+     * toque el marco lo toca en los dos estados a la vez.
+     *
+     * Sin desplegable: el autocompletado de "@" y "/" es del prompt de verdad, que
+     * es quien tiene el teclado. Aqui lo tecleado solo se encola.
      */
     lineasDeEntrada() {
-        const cols = Math.max(20, process.stdout.columns || 80);
-        const typing = typedText();
+        const marco = buildPromptFrame({
+            cols: Math.max(20, process.stdout.columns || 80),
+            rows: process.stdout.rows || 24,
+            input: typedText(),
+            cursorIndex: typedText().length,
+            items: [],
+        });
+        const filas = [...marco.lines];
         const pendientes = queuedCount();
-        const simbolo = chalk.bold.hex("#D97757")("❯");
-        const cuerpo = typing.length > 0
-            ? `${chalk.white(colaVisible(typing, cols - 3))}${chalk.hex("#D97757")("▌")}`
-            : chalk.gray(colaVisible(PISTA_VACIA, cols - 2));
-        const filas = [chalk.gray("─".repeat(cols)), `${simbolo} ${cuerpo}`];
         if (pendientes > 0) {
             const plural = pendientes === 1 ? "mensaje en cola" : "mensajes en cola";
             filas.push(chalk.gray(`  ${pendientes} ${plural}; se enviará al terminar este turno`));
@@ -139,11 +139,48 @@ export class DynamicSpinner {
             clearInterval(this.timer);
             this.timer = null;
         }
-        // Las dos de golpe: quitarlas por separado deja un fotograma con la barra
-        // de escribir suelta y sin spinner encima.
-        fijarSecciones([
-            ["spinner", []],
-            ["entrada", []],
-        ]);
+        // Solo se va la linea del spinner. La BARRA se queda.
+        //
+        // Es lo que la hace fija de verdad: entre una herramienta y la siguiente el
+        // spinner se para y vuelve a arrancar, y si la barra se fuera con el, se
+        // veria desaparecer y reaparecer en cada llamada. Quien la retira es el
+        // prompt al abrirse (soltarPie), y ahi el relevo no se nota porque lo que
+        // dibuja justo despues es exactamente el mismo marco.
+        quitarSeccion("spinner");
+    }
+}
+/**
+ * DEJA EL PIE PUESTO MIENTRAS CORRE ALGO
+ *
+ * El spinner solo vivia mientras hablaba el modelo. En cuanto empezaba una
+ * herramienta se paraba, y ahi se acababa lo unico fijo de la pantalla: durante
+ * un `run_command` de veinte segundos, o una lectura de un archivo enorme, no
+ * habia ni cronometro ni forma de saber que seguia vivo. Justo el rato en que
+ * uno se pregunta si se ha colgado.
+ *
+ * EL RETRASO NO ES UN CAPRICHO
+ *
+ * La mayoria de las herramientas tardan milisegundos. Pintar el pie y borrarlo
+ * en el mismo suspiro es un parpadeo en cada llamada, y encima el pie mueve
+ * lineas: veinte herramientas seguidas serian veinte sacudidas. Con 150 ms de
+ * espera, lo rapido no pinta nada y lo lento sale igual.
+ *
+ * El `finally` es obligatorio. Un spinner que se queda corriendo repinta el pie
+ * ocho veces por segundo encima de lo que venga despues -incluido el prompt-, y
+ * de ahi no se sale sin cerrar el programa.
+ */
+export async function conSpinner(etiqueta, tarea, retrasoMs = 150) {
+    let girando = null;
+    const aviso = setTimeout(() => {
+        girando = new DynamicSpinner(etiqueta);
+        girando.start();
+    }, retrasoMs);
+    try {
+        return await tarea();
+    }
+    finally {
+        clearTimeout(aviso);
+        if (girando)
+            girando.stop();
     }
 }

package/extension/manifest.json

@@ -1,60 +1,60 @@
-{
-  "manifest_version": 3,
-  "minimum_chrome_version": "102",
-  "name": "Chocolatito Code",
-  "version": "1.3.0",
-  "description": "Deja que Chocolatito Code trabaje dentro de tu Chrome, en segundo plano y con tus sesiones ya iniciadas.",
-  "permissions": [
-    "tabs",
-    "tabGroups",
-    "scripting",
-    "debugger",
-    "webNavigation",
-    "storage",
-    "downloads"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-  "icons": {
-    "16": "iconos/16.png",
-    "32": "iconos/32.png",
-    "48": "iconos/48.png",
-    "128": "iconos/128.png"
-  },
-  "background": {
-    "service_worker": "background.js"
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "<all_urls>"
-      ],
-      "js": [
-        "content.js"
-      ],
-      "run_at": "document_idle",
-      "all_frames": true
-    }
-  ],
-  "action": {
-    "default_title": "Chocolatito Code",
-    "default_popup": "popup.html",
-    "default_icon": {
-      "16": "iconos/16.png",
-      "32": "iconos/32.png",
-      "48": "iconos/48.png"
-    }
-  },
-  "web_accessible_resources": [
-    {
-      "resources": [
-        "iconos/*",
-        "fuentes/*"
-      ],
-      "matches": [
-        "<all_urls>"
-      ]
-    }
-  ]
-}
+{
+  "manifest_version": 3,
+  "minimum_chrome_version": "102",
+  "name": "Chocolatito Code",
+  "version": "1.3.1",
+  "description": "Deja que Chocolatito Code trabaje dentro de tu Chrome, en segundo plano y con tus sesiones ya iniciadas.",
+  "permissions": [
+    "tabs",
+    "tabGroups",
+    "scripting",
+    "debugger",
+    "webNavigation",
+    "storage",
+    "downloads"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "icons": {
+    "16": "iconos/16.png",
+    "32": "iconos/32.png",
+    "48": "iconos/48.png",
+    "128": "iconos/128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "run_at": "document_idle",
+      "all_frames": true
+    }
+  ],
+  "action": {
+    "default_title": "Chocolatito Code",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "iconos/16.png",
+      "32": "iconos/32.png",
+      "48": "iconos/48.png"
+    }
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "iconos/*",
+        "fuentes/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ]
+}