chocolatito-code 1.2.0 → 1.3.0

package/dist/ui/spinner.js

@@ -2,6 +2,22 @@ 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";
+/**
+ * LA LINEA QUE DICE QUE ESTO SIGUE VIVO
+ *
+ * Antes se pintaba con `\r\x1b[2K` sobre la fila donde estuviera el cursor. Eso
+ * la deja clavada a esa fila, y en cuanto la respuesta empieza a salir el
+ * terminal desplaza el contenido y se lleva el spinner hacia arriba con el.
+ * Palabras del usuario: "la nubecita y el rayito suben con lo que me respondes".
+ *
+ * Ahora se entrega a `pieFijo`, que la vuelve a pintar abajo despues de cada
+ * escritura. La linea deja de moverse aunque salgan cien lineas de respuesta.
+ *
+ * Y por eso mismo ya no hace falta pararlo al llegar el primer trozo: el
+ * contador de segundos y de tokens sigue a la vista MIENTRAS el modelo habla,
+ * que es justo cuando interesa saber cuanto lleva.
+ */
 const GLYPHS = ["✢", "✳", "∗", "✻", "✽"];
 const VERBS = [
     "Analizando",
@@ -15,6 +31,18 @@ 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;
@@ -23,8 +51,6 @@ export class DynamicSpinner {
     isRunning = false;
     prefix = "";
     tokenCount = 0;
-    /** Lineas extra pintadas debajo del spinner en el ultimo tick. */
-    extraRows = 0;
     constructor(prefix = "") {
         this.prefix = prefix;
     }
@@ -37,7 +63,7 @@ export class DynamicSpinner {
         this.startTime = Date.now();
         this.glyphIdx = 0;
         this.verbIdx = 0;
-        this.extraRows = 0;
+        this.tick();
         this.timer = setInterval(() => {
             this.tick();
         }, 120);
@@ -47,55 +73,63 @@ export class DynamicSpinner {
             return;
         this.glyphIdx = (this.glyphIdx + 1) % GLYPHS.length;
         const elapsedSec = Math.floor((Date.now() - this.startTime) / 1000);
-        // Rotate verbs every 2.5 seconds
         this.verbIdx = Math.floor(elapsedSec / 2.5) % VERBS.length;
+        // Las dos juntas: por separado se repinta el bloque dos veces por tick.
+        fijarSecciones([
+            ["spinner", [this.lineaDelSpinner(elapsedSec)]],
+            ["entrada", this.lineasDeEntrada()],
+        ]);
+    }
+    /**
+     * `✳ Compactando historial… (3s · ↓ 1.2k tokens · esc para pausar)   ⇥ modo`
+     *
+     * El prefijo se pasaba en `start("Compactando historial")` y no se pintaba en
+     * ningun sitio: `tick()` usaba siempre los verbos rotatorios. Asi que las
+     * cuatro esperas con nombre propio -compactar, optimizar memoria, verificar-
+     * salian todas como "Rumiando…", indistinguibles de una peticion normal.
+     */
+    lineaDelSpinner(elapsedSec) {
+        const cols = Math.max(20, process.stdout.columns || 80);
         const glyph = chalk.hex("#D97757")(GLYPHS[this.glyphIdx]);
-        const verb = chalk.italic.hex("#D97757")(`${VERBS[this.verbIdx]}…`);
-        const timeStr = chalk.gray(`(${elapsedSec}s`);
-        const tokenStr = this.tokenCount > 0 ? chalk.gray(` · ↑ ${(this.tokenCount / 1000).toFixed(1)}k tokens`) : "";
-        const escStr = chalk.gray(` · esc para pausar)`);
+        const verbo = this.prefix || VERBS[this.verbIdx];
+        const verb = chalk.italic.hex("#D97757")(`${verbo}…`);
+        // El contador va hacia abajo: son los tokens que ESTAN LLEGANDO del modelo.
+        const tokenStr = this.tokenCount > 0 ? ` · ↓ ${(this.tokenCount / 1000).toFixed(1)}k tokens` : "";
+        const cola = chalk.gray(`(${elapsedSec}s${tokenStr} · esc para pausar)`);
+        const izquierda = `${glyph} ${verb} ${cola}`;
+        const anchoIzq = 1 + 1 + verbo.length + 1 + 1 + `(${elapsedSec}s${tokenStr} · esc para pausar)`.length;
+        // La chapa del modo se pega a la derecha, y solo si sobra sitio: antes se
+        // concatenaba siempre y en una consola estrecha empujaba la linea a una
+        // segunda fila, que es justo lo que descuadra el repintado.
         const badge = modeBadge();
-        const modeStr = badge ? `  ${badge}` : "";
-        this.clearExtraRows();
-        process.stdout.write(`\r\x1b[2K${glyph} ${verb} ${timeStr}${tokenStr}${escStr}${modeStr}`);
-        this.drawTypeAhead();
+        if (!badge)
+            return izquierda;
+        const anchoBadge = sinColores(badge).length;
+        const hueco = cols - anchoIzq - anchoBadge;
+        return hueco >= 2 ? `${izquierda}${" ".repeat(hueco)}${badge}` : izquierda;
     }
     /**
-     * Segunda linea con lo que el usuario esta escribiendo mientras se genera.
+     * La barra de escribir, debajo del spinner.
      *
-     * Antes el teclado se tragaba todo sin pintar nada y parecia que el terminal
-     * se habia colgado. Se dibuja debajo y el cursor vuelve arriba, para que el
-     * siguiente tick sobrescriba las dos lineas sin dejar rastro.
+     * 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.
      */
-    drawTypeAhead() {
+    lineasDeEntrada() {
+        const cols = Math.max(20, process.stdout.columns || 80);
         const typing = typedText();
         const pendientes = queuedCount();
-        const rows = [];
-        if (typing.length > 0) {
-            rows.push(`${chalk.hex("#D97757")("❯")} ${chalk.white(typing)}${chalk.gray("  (enter para encolarlo)")}`);
-        }
+        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";
-            rows.push(chalk.gray(`  ${pendientes} ${plural}; se enviará al terminar este turno`));
-        }
-        if (rows.length === 0) {
-            this.extraRows = 0;
-            return;
-        }
-        for (const row of rows) {
-            process.stdout.write(`\n\r\x1b[2K${row}`);
-        }
-        process.stdout.write(`\x1b[${rows.length}A\r`);
-        this.extraRows = rows.length;
-    }
-    clearExtraRows() {
-        if (this.extraRows === 0)
-            return;
-        for (let i = 0; i < this.extraRows; i++) {
-            process.stdout.write("\x1b[1B\r\x1b[2K");
+            filas.push(chalk.gray(`  ${pendientes} ${plural}; se enviará al terminar este turno`));
         }
-        process.stdout.write(`\x1b[${this.extraRows}A\r`);
-        this.extraRows = 0;
+        return filas;
     }
     stop() {
         if (!this.isRunning)
@@ -105,7 +139,11 @@ export class DynamicSpinner {
             clearInterval(this.timer);
             this.timer = null;
         }
-        this.clearExtraRows();
-        process.stdout.write("\r\x1b[2K");
+        // Las dos de golpe: quitarlas por separado deja un fotograma con la barra
+        // de escribir suelta y sin spinner encima.
+        fijarSecciones([
+            ["spinner", []],
+            ["entrada", []],
+        ]);
     }
 }

package/extension/background.js

@@ -747,7 +747,13 @@ async function typeTrusted(tabId, frameId, ref, text, submit, replace) {
 async function capturar(tabId) {
   try {
     return await withTrustedTab(tabId, async (target) => {
-      const res = await cdp(target, "Page.captureScreenshot", { format: "png", captureBeyondViewport: false });
+      // JPEG y no PNG, y no es cosmetico. Una captura en PNG de un monitor
+      // normal son 1,3 MB, que en base64 se convierten en 1,75 MB dentro de la
+      // peticion al modelo de vision. Eso no llega: la peticion se muere por el
+      // camino, no vuelve nada, y se lleva por delante uno de los cuatro huecos
+      // de la licencia durante minutos. En JPEG al 70 la misma captura ocupa
+      // unos 120 KB y se lee igual de bien.
+      const res = await cdp(target, "Page.captureScreenshot", { format: "jpeg", quality: 70, captureBeyondViewport: false });
       return { data: res.data, via: "cdp" };
     });
   } catch (err) {
@@ -762,9 +768,9 @@ async function capturar(tabId) {
         if (activa && activa.id !== tabId) previaId = activa.id;
         if (!tab.active) await chrome.tabs.update(tabId, { active: true });
         await sleep(250);
-        const dataUrl = await chrome.tabs.captureVisibleTab(windowId, { format: "png" });
+        const dataUrl = await chrome.tabs.captureVisibleTab(windowId, { format: "jpeg", quality: 70 });
         return {
-          data: String(dataUrl).replace(/^data:image\/png;base64,/, ""),
+          data: String(dataUrl).replace(/^data:image\/\w+;base64,/, ""),
           via: "tabs",
           warning: "el depurador no estaba disponible (¿DevTools abierto?): captura por la via normal",
         };

package/extension/iconos/ORIGEN.md

@@ -0,0 +1,48 @@
+# De dónde salen estos iconos
+
+**Fuente:** `assets/logos/mascota-chocolatito-code.png` — el zorrito **pixelado**, el mismo
+que aparece en la cabecera del CLI y en la ficha del producto.
+
+## Cuidado con cuál se coge
+
+En `assets/logos/` hay dos zorros y **no son la misma marca**:
+
+| Archivo | Qué es | ¿Sirve para la extensión? |
+| --- | --- | --- |
+| `mascota-chocolatito-code.png` | El zorrito pixelado. **Chocolatito Code** | ✅ Este |
+| `logo-chocolatito.png` | El zorro vectorial. **Chocolatito**, la marca madre | ❌ Este no |
+
+Ya se coló el equivocado una vez: la extensión salió con el zorro de la marca madre y lo
+detectó el dueño de un vistazo. No hay prueba automática que lo cace — se distinguirían por el
+número de colores (674 contra 1707), pero ese umbral se rompe con cualquier retoque legítimo, y
+una prueba frágil es peor que ninguna. Por eso está escrito aquí.
+
+## Cómo se regeneran
+
+Con Python y Pillow, desde la raíz del repositorio:
+
+```python
+from PIL import Image
+img = Image.open("assets/logos/mascota-chocolatito-code.png").convert("RGBA")
+img = img.crop(img.split()[3].getbbox())          # fuera el aire de alrededor
+
+lado = max(img.size)
+margen = max(1, int(lado * 0.08))                  # sin margen, Chrome recorta el borde
+lienzo = Image.new("RGBA", (lado + margen * 2,) * 2, (0, 0, 0, 0))
+lienzo.paste(img, ((lienzo.width - img.width) // 2, (lienzo.height - img.height) // 2), img)
+
+for tam in (16, 32, 48, 128):
+    # NEAREST hasta 48: es pixel art, y suavizarlo lo convierte en un borron.
+    # A 16 px la diferencia es entre verse y no verse.
+    filtro = Image.NEAREST if tam <= 48 else Image.LANCZOS
+    lienzo.resize((tam, tam), filtro).save(f"extension/iconos/{tam}.png")
+```
+
+**Míralos a 16 px antes de darlos por buenos.** A 128 todo parece correcto; el tamaño real es
+donde se cae. Es lo que fallo con el primer intento, que recortaba una "C" del logotipo y salían
+las dos "C" de las dos filas apiladas.
+
+## El otro archivo
+
+`logotipo.png` es el logotipo completo de dos filas a 320 px, y va en la cabecera de
+`popup.html` — ahí sí hay sitio para que se lea entero.

package/extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "minimum_chrome_version": "102",
   "name": "Chocolatito Code",
-  "version": "1.2.0",
+  "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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocolatito-code",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Agente autónomo de programación para la terminal, con control real del ordenador y del navegador. Desarrollado por Chocolatito.",
   "type": "module",
   "bin": {