chocolatito-code 1.0.0 → 1.1.0

package/dist/ui/reasoningStream.js

@@ -1,38 +1,130 @@
 import chalk from "chalk";
 import process from "node:process";
+/**
+ * Lo que se ve mientras el modelo piensa.
+ *
+ * Antes se volcaba el razonamiento entero, letra a letra:
+ *
+ *     for (let i = 0; i < chunk.length; i++)
+ *       process.stdout.write(chalk.gray(char));
+ *
+ * Dos problemas, y el segundo es el grave.
+ *
+ * **Es ilegible.** Un razonamiento de una tarea mediana son quince mil
+ * caracteres de deliberacion en voz alta —"mejor 12x16... no, mejor por
+ * partes... cuento: 2+2+6+2=12"— que llenan la pantalla y entierran lo unico
+ * que importa: que esta haciendo y si va bien.
+ *
+ * **Y bloquea el terminal.** Quince mil escrituras sincronas, cada una
+ * envuelta por chalk en codigos de color (once bytes para pintar una letra),
+ * son quince mil llamadas al sistema. En Windows eso deja el bucle de eventos
+ * parado el rato que dura, y las teclas que el usuario pulsa mientras tanto se
+ * quedan en la cola del sistema operativo. De ahi el "escribo y no sale nada",
+ * que aparecia justo en las tareas largas -las que mas razonan- y nunca al
+ * saludar.
+ *
+ * Ahora se resume: una sola linea que se reescribe sobre si misma diciendo
+ * cuanto lleva pensando y en que anda. Cero avance de scroll, una escritura por
+ * trozo recibido en vez de una por letra.
+ *
+ * Quien quiera verlo entero: CHOCOLATITO_RAZONAMIENTO=completo.
+ */
+const COMPLETO = process.env.CHOCOLATITO_RAZONAMIENTO === "completo";
+/** Cada cuanto se refresca la linea. Mas a menudo es parpadeo, no informacion. */
+const MS_ENTRE_REFRESCOS = 400;
+/** Se recorta para que quepa siempre en una linea, sin envolver. */
+function unaLinea(texto, ancho) {
+    const limpio = texto.replace(/\s+/g, " ").trim();
+    if (limpio.length <= ancho)
+        return limpio;
+    return limpio.slice(0, Math.max(0, ancho - 1)) + "…";
+}
 export class ReasoningStream {
     hasStarted = false;
     atLineStart = true;
+    inicio = 0;
+    caracteres = 0;
+    ultimoRefresco = 0;
+    cola = "";
+    lineaPintada = false;
     push(chunk) {
         if (!chunk)
             return;
         if (!this.hasStarted) {
             this.hasStarted = true;
-            process.stdout.write(`\n  ${chalk.bold.hex("#8B5CF6")("💭 Razonando:")}\n`);
+            this.inicio = Date.now();
+            this.caracteres = 0;
+            this.cola = "";
+            if (COMPLETO) {
+                process.stdout.write(`\n  ${chalk.bold.hex("#8B5CF6")("💭 Razonando:")}\n`);
+            }
+        }
+        if (COMPLETO) {
+            this.volcar(chunk);
+            return;
         }
-        for (let i = 0; i < chunk.length; i++) {
-            const char = chunk[i];
+        this.caracteres += chunk.length;
+        // Solo se guarda la cola: es de donde sale el "en que anda ahora".
+        this.cola = (this.cola + chunk).slice(-300);
+        this.refrescar(false);
+    }
+    /** El volcado literal, para quien lo pida. Una escritura por trozo, no por letra. */
+    volcar(chunk) {
+        const prefijo = `  ${chalk.hex("#8B5CF6")("│")} `;
+        let salida = "";
+        for (const char of chunk) {
             if (this.atLineStart) {
-                process.stdout.write(`  ${chalk.hex("#8B5CF6")("│")} `);
+                salida += prefijo;
                 this.atLineStart = false;
             }
             if (char === "\n") {
-                process.stdout.write("\n");
+                salida += "\n";
                 this.atLineStart = true;
             }
             else {
-                process.stdout.write(chalk.gray(char));
+                salida += char;
             }
         }
+        // Un solo write, y el color se aplica una vez al bloque entero en vez de a
+        // cada letra: mismo resultado en pantalla, una fraccion de los bytes.
+        process.stdout.write(chalk.gray(salida));
+    }
+    refrescar(forzar) {
+        const ahora = Date.now();
+        if (!forzar && ahora - this.ultimoRefresco < MS_ENTRE_REFRESCOS)
+            return;
+        this.ultimoRefresco = ahora;
+        if (!process.stdout.isTTY)
+            return;
+        const segundos = Math.round((ahora - this.inicio) / 1000);
+        const ancho = Math.max(20, (process.stdout.columns || 80) - 4);
+        const cabeza = `  ${chalk.hex("#8B5CF6")("💭")} ${chalk.gray(`pensando… ${segundos}s`)}`;
+        // La ultima frase a medias da una pista de por donde va sin contarlo todo.
+        const pista = unaLinea(this.cola, Math.max(0, ancho - 24));
+        const linea = pista ? `${cabeza} ${chalk.dim("·")} ${chalk.dim(pista)}` : cabeza;
+        process.stdout.write(`\r\x1b[2K${unaLinea(linea, ancho + 40)}`);
+        this.lineaPintada = true;
     }
     flush() {
-        if (this.hasStarted) {
+        if (!this.hasStarted)
+            return;
+        if (COMPLETO) {
             if (!this.atLineStart) {
                 process.stdout.write("\n");
                 this.atLineStart = true;
             }
             process.stdout.write("\n");
             this.hasStarted = false;
+            return;
+        }
+        const segundos = Math.max(1, Math.round((Date.now() - this.inicio) / 1000));
+        if (this.lineaPintada) {
+            // Se deja una sola linea de resumen donde estaba la que iba cambiando.
+            process.stdout.write(`\r\x1b[2K  ${chalk.hex("#8B5CF6")("💭")} ${chalk.gray(`pensó ${segundos}s`)}\n`);
         }
+        this.lineaPintada = false;
+        this.hasStarted = false;
+        this.cola = "";
+        this.caracteres = 0;
     }
 }

package/extension/README.md

@@ -1,74 +1,95 @@
-# Extensión de Chocolatito Code para Chrome
-
-Es lo que permite que el agente trabaje **dentro de tu Chrome**, con tus cuentas ya
-iniciadas y **sin quitarte la pantalla**. Puedes seguir jugando o trabajando mientras
-opera en una pestaña que ni siquiera está visible.
-
-## Instalación (una sola vez)
-
-1. Abre `chrome://extensions`
-2. Activa **Modo de desarrollador** (interruptor arriba a la derecha)
-3. Pulsa **Cargar descomprimida**
-4. Selecciona esta carpeta:
-   `C:\Users\Ryzen\Documents\tomas\chocolatito-code\extension`
-
-Listo. El icono mostrará el distintivo `on` cuando la CLI esté abierta.
-
-> **No uses el flag `--load-extension`.** Chrome 137 lo eliminó por abuso de malware;
-> hoy no hace nada. Y si añades `--disable-extensions-except`, Chrome desactiva todas
-> las extensiones, incluida esta.
-
-## Cómo saber que está funcionando
-
-- El icono de la extensión muestra `on` cuando hay conexión con la CLI.
-- La pestaña en la que trabaja entra en un **grupo naranja "Chocolatito Code"**.
-- En esa página aparece un **aviso flotante** abajo a la derecha con lo que está
-  haciendo en cada momento ("leyendo la pagina", "escribiendo", …).
-- Al terminar, `chrome(done)` deshace el grupo y retira el aviso.
-
-## Por qué hace falta una extensión
-
-| Vía | ¿Tus sesiones? | ¿Segundo plano real? |
-|---|---|---|
-| CDP con puerto de depuración (`browser`) | No — Chrome 136+ lo bloquea en el perfil por defecto | Sí, pero en un perfil vacío |
-| UI Automation + ratón y teclado (`computer_use`) | Sí | No — para escribir hay que traer la ventana al frente |
-| **Extensión (`chrome`)** | **Sí** | **Sí** |
-
-Las dos primeras fallan justo en la casilla que importa. La extensión corre dentro del
-navegador, así que no necesita foco ni ratón, y hereda tu sesión porque *es* tu Chrome.
-
-## Arquitectura
-
-```
-CLI (chocolatito)                    Chrome
-┌──────────────────┐                ┌─────────────────────────────┐
-│ browserExtension │  WebSocket     │ background.js               │
-│  servidor local  │◄──────────────►│  service worker             │
-│  127.0.0.1:8787  │                │   · pestañas y grupos       │
-└──────────────────┘                │   · captura por CDP         │
-                                    └───────────┬─────────────────┘
-                                                │ chrome.tabs.sendMessage
-                                    ┌───────────▼─────────────────┐
-                                    │ content.js (en la página)   │
-                                    │  · snapshot con refs        │
-                                    │  · clic y escritura         │
-                                    │  · aviso flotante           │
-                                    └─────────────────────────────┘
-```
-
-El servidor escucha **solo en 127.0.0.1** y rechaza cualquier conexión cuyo origen no
-sea `chrome-extension://`, para que una página web no pueda hablar con él.
-
-## Detalles que costó descubrir
-
-- **Escribir con `el.value = ...` no funciona en React.** El texto se ve pero el estado
-  interno del framework sigue vacío, así que el botón de enviar queda deshabilitado.
-  Hay que llamar al *setter nativo* del prototipo y emitir `input`. En campos
-  `contenteditable`, `document.execCommand("insertText")`.
-- **El snapshot atraviesa shadow DOM.** Sin eso, en las apps de Google se ve media
-  interfaz.
-- **Las capturas van por `chrome.debugger`**, no por `chrome.tabs.captureVisibleTab`:
-  esta última exige que la pestaña esté activa y la ventana enfocada, justo lo que
-  queremos evitar.
-- **El service worker se duerme.** Un ping cada 20 s mantiene viva la conexión y con
-  ella el índice de referencias del último snapshot.
+# Extensión de Chocolatito Code para Chrome
+
+Es lo que permite que el agente trabaje **dentro de tu Chrome**, con tus cuentas ya
+iniciadas y **sin quitarte la pantalla**. Puedes seguir jugando o trabajando mientras
+opera en una pestaña que ni siquiera está visible.
+
+## Instalación (una sola vez)
+
+1. Abre `chrome://extensions`
+2. Activa **Modo de desarrollador** (interruptor arriba a la derecha)
+3. Pulsa **Cargar descomprimida**
+4. Selecciona esta carpeta:
+   `C:\Users\Ryzen\Documents\tomas\chocolatito-code\extension`
+
+Listo. El icono mostrará el distintivo `on` cuando la CLI esté abierta.
+
+> **No uses el flag `--load-extension`.** Chrome 137 lo eliminó por abuso de malware;
+> hoy no hace nada. Y si añades `--disable-extensions-except`, Chrome desactiva todas
+> las extensiones, incluida esta.
+
+## Cómo saber que está funcionando
+
+- El icono de la extensión muestra el **número de sesiones** conectadas a la CLI, y al
+  pulsarlo el panel lo dice con palabras.
+- La pestaña en la que trabaja entra en un **grupo naranja "Chocolatito Code"**.
+- En esa página aparece un **aviso flotante** abajo a la derecha con lo que está
+  haciendo en cada momento ("leyendo la pagina", "escribiendo", …).
+- Al terminar, `chrome(done)` deshace el grupo y retira el aviso.
+
+## Por qué hace falta una extensión
+
+| Vía | ¿Tus sesiones? | ¿Segundo plano real? |
+|---|---|---|
+| CDP con puerto de depuración (`browser`) | No — Chrome 136+ lo bloquea en el perfil por defecto | Sí, pero en un perfil vacío |
+| UI Automation + ratón y teclado (`computer_use`) | Sí | No — para escribir hay que traer la ventana al frente |
+| **Extensión (`chrome`)** | **Sí** | **Sí** |
+
+Las dos primeras fallan justo en la casilla que importa. La extensión corre dentro del
+navegador, así que no necesita foco ni ratón, y hereda tu sesión porque *es* tu Chrome.
+
+## Arquitectura
+
+```
+CLI (chocolatito)                    Chrome
+┌──────────────────┐                ┌─────────────────────────────┐
+│ browserExtension │  WebSocket     │ background.js               │
+│  servidor local  │◄──────────────►│  service worker             │
+│  127.0.0.1:8787  │                │   · pestañas y grupos       │
+└──────────────────┘                │   · captura por CDP         │
+                                    └───────────┬─────────────────┘
+                                                │ chrome.tabs.sendMessage
+                                    ┌───────────▼─────────────────┐
+                                    │ content.js (en la página)   │
+                                    │  · snapshot con refs        │
+                                    │  · clic y escritura         │
+                                    │  · aviso flotante           │
+                                    └─────────────────────────────┘
+```
+
+El servidor escucha **solo en 127.0.0.1** y rechaza cualquier conexión cuyo origen no
+sea `chrome-extension://`, para que una página web no pueda hablar con él.
+
+## Detalles que costó descubrir
+
+- **Escribir con `el.value = ...` no funciona en React.** El texto se ve pero el estado
+  interno del framework sigue vacío, así que el botón de enviar queda deshabilitado.
+  Hay que llamar al *setter nativo* del prototipo y emitir `input`. En campos
+  `contenteditable`, `document.execCommand("insertText")`.
+- **El snapshot atraviesa shadow DOM.** Sin eso, en las apps de Google se ve media
+  interfaz.
+- **Las capturas van por `chrome.debugger`**, no por `chrome.tabs.captureVisibleTab`:
+  esta última exige que la pestaña esté activa y la ventana enfocada, justo lo que
+  queremos evitar.
+- **El service worker se duerme.** Un ping cada 20 s mantiene viva la conexión, pero
+  Chrome puede apagarlo igual. Cuando eso pasa desaparecen la pestaña de trabajo, el
+  grupo y el índice de referencias, y todo empieza a fallar con "el ref 3 no existe"
+  aunque en pantalla siga igual. Por eso el estado se apunta en `storage.session` y la
+  CLI se identifica con un `sessionId` al conectar: mismo id, se recupera lo suyo; id
+  distinto, se empieza limpio (heredar la pestaña de otra sesión es como se acaba
+  actuando sobre una pestaña ajena).
+- **Esperar `status === "complete"` no basta.** Justo después de pedir una navegación, la
+  pestaña todavía informa del estado de la página *anterior*: hay que ver primero la
+  transición (estado `loading` o cambio de URL). Sin eso, `navigate` volvía al instante y
+  el snapshot siguiente leía la página que se acababa de abandonar, sin dar ningún error.
+- **`chrome.debugger.attach` es exclusivo por pestaña.** Con varias sesiones hablando por
+  el mismo service worker, dos escrituras a la vez se pisaban. Los adjuntos van en cola
+  por pestaña, y las coordenadas del elemento se miden **dentro** del turno: medirlas
+  antes significa medirlas antes de que la acción anterior mueva la página.
+- **Hay páginas donde ninguna extensión puede entrar** (`chrome://`, la Web Store,
+  `view-source:`). Se dice con esas palabras en vez de devolver el "Cannot access
+  contents of the page" de Chrome, que no explica ni que es culpa de la URL ni que no
+  hay que reintentarlo.
+- **Solo se cierra lo que se abrió.** Cada sesión lleva la lista de las pestañas que
+  abrió con `open` o eligió con `select`; mirar una pestaña (`snapshot`, `getText`) nunca
+  da derecho a cerrarla.