chocolatito-code 1.0.0

package/dist/tools/browserExtension.js

@@ -0,0 +1,479 @@
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { WebSocketServer, WebSocket } from "ws";
+import { describeScreen } from "./visionBridge.js";
+/**
+ * PUENTE CON LA EXTENSION DE CHROME
+ *
+ * Es la unica forma de trabajar de verdad en segundo plano dentro del Chrome del
+ * usuario, con sus sesiones ya iniciadas.
+ *
+ * Por que no valen las otras vias:
+ *  - CDP por puerto de depuracion: desde Chrome 136 Google lo bloquea en el
+ *    perfil por defecto, asi que solo sirve con un perfil vacio y sin sesiones.
+ *  - Automatizacion del sistema (UI Automation + raton y teclado reales): para
+ *    escribir hay que traer la ventana al primer plano, lo que interrumpe al
+ *    usuario. Si esta jugando, directamente le saca del juego.
+ *
+ * La extension corre dentro de Chrome: usa la sesion real, ejecuta en pestanas
+ * que no estan visibles y no toca el foco ni el raton. El usuario puede seguir
+ * jugando mientras el agente trabaja.
+ */
+// La extension se conecta a todo este rango, asi que varias sesiones de
+// Chocolatito pueden convivir: cada una se queda con el primer puerto libre.
+const PORT_RANGE = [8787, 8788, 8789, 8790];
+const FORCED_PORT = process.env.CHOCOLATITO_EXT_PORT ? Number(process.env.CHOCOLATITO_EXT_PORT) : null;
+const PORTS = FORCED_PORT ? [FORCED_PORT] : PORT_RANGE;
+const CONNECT_HINT = "La extension de Chrome no esta conectada. Cargala una vez en chrome://extensions " +
+    '(activa "Modo de desarrollador" y pulsa "Cargar descomprimida" apuntando a la carpeta ' +
+    "'extension' del proyecto). Si ya la cargaste, abre Chrome y espera unos segundos.";
+class ExtensionBridge {
+    wss = null;
+    client = null;
+    nextId = 1;
+    pending = new Map();
+    starting = null;
+    portTaken = false;
+    /** Origen de la extension con la que se emparejo esta sesion. */
+    pairedOrigin = null;
+    /** Ultima extension distinta que intento conectarse; se le avisa al usuario. */
+    rejectedOrigin = null;
+    port = 0;
+    start() {
+        if (this.starting)
+            return this.starting;
+        this.starting = (async () => {
+            for (const port of PORTS) {
+                const ok = await this.listenOn(port);
+                if (ok) {
+                    this.port = port;
+                    this.portTaken = false;
+                    return;
+                }
+            }
+            // Todos ocupados: hay tantas sesiones como puertos.
+            this.portTaken = true;
+        })();
+        return this.starting;
+    }
+    listenOn(port) {
+        return new Promise((resolve) => {
+            let server;
+            try {
+                // Solo en la interfaz local: nada de exponer esto a la red.
+                server = new WebSocketServer({ host: "127.0.0.1", port });
+            }
+            catch {
+                resolve(false);
+                return;
+            }
+            server.on("listening", () => {
+                this.wss = server;
+                resolve(true);
+            });
+            server.on("error", () => {
+                // Puerto ocupado por otra sesion: se prueba el siguiente.
+                try {
+                    server.close();
+                }
+                catch { }
+                resolve(false);
+            });
+            server.on("connection", (ws, req) => {
+                // Una pagina web cualquiera tambien puede abrir un WebSocket a
+                // localhost. Solo se acepta a la extension, que se identifica con un
+                // origen chrome-extension://
+                const origin = String(req.headers.origin || "");
+                if (!origin.startsWith("chrome-extension://")) {
+                    ws.close(1008, "origen no permitido");
+                    return;
+                }
+                // El puente conduce el Chrome del usuario con sus sesiones iniciadas, y
+                // CUALQUIER extension instalada puede abrir este socket. La primera que
+                // se empareja se queda con el puente durante toda la sesion: asi otra
+                // extension no puede colarse despues y recibir ordenes pensadas para
+                // esta (que incluyen leer el contenido de sus pestanas).
+                if (this.pairedOrigin && origin !== this.pairedOrigin) {
+                    this.rejectedOrigin = origin;
+                    ws.close(1008, "el puente ya esta emparejado con otra extension");
+                    return;
+                }
+                this.pairedOrigin = origin;
+                this.client = ws;
+                ws.on("message", (raw) => {
+                    let msg;
+                    try {
+                        msg = JSON.parse(raw.toString());
+                    }
+                    catch {
+                        return;
+                    }
+                    if (msg.type !== "result" || typeof msg.id !== "number")
+                        return;
+                    const waiter = this.pending.get(msg.id);
+                    if (!waiter)
+                        return;
+                    clearTimeout(waiter.timer);
+                    this.pending.delete(msg.id);
+                    waiter.resolve(msg);
+                });
+                ws.on("close", () => {
+                    if (this.client === ws)
+                        this.client = null;
+                });
+                ws.on("error", () => {
+                    if (this.client === ws)
+                        this.client = null;
+                });
+            });
+        });
+    }
+    get activePort() {
+        return this.port;
+    }
+    async connected() {
+        try {
+            await this.start();
+        }
+        catch {
+            return false;
+        }
+        return !!(this.client && this.client.readyState === WebSocket.OPEN);
+    }
+    everConnected = false;
+    /**
+     * Espera a que la extension aparezca.
+     *
+     * El service worker de MV3 se duerme cuando Chrome lleva un rato sin usarlo, y
+     * tarda unos segundos en despertar y reconectar. Si se pregunta con prisa, se
+     * concluye que "no esta instalada" cuando en realidad solo estaba dormida. Por
+     * eso la primera espera es generosa y las siguientes, cortas.
+     */
+    async waitForClient(ms) {
+        const budget = ms ?? (this.everConnected ? 4000 : 12_000);
+        return this.waitUpTo(budget);
+    }
+    async waitUpTo(ms) {
+        const deadline = Date.now() + ms;
+        while (Date.now() < deadline) {
+            if (await this.connected()) {
+                this.everConnected = true;
+                return true;
+            }
+            await new Promise((r) => setTimeout(r, 250));
+        }
+        const last = await this.connected();
+        if (last)
+            this.everConnected = true;
+        return last;
+    }
+    get heldByAnotherProcess() {
+        return this.portTaken;
+    }
+    get pairing() {
+        return { origin: this.pairedOrigin, rejected: this.rejectedOrigin };
+    }
+    async send(cmd, args = {}, timeoutMs = 45_000) {
+        if (!(await this.waitForClient())) {
+            if (this.portTaken) {
+                return {
+                    ok: false,
+                    error: `Otra instancia de Chocolatito Code ya tiene el puente con la extension (puertos ${PORTS.join(", ")}). ` +
+                        `La extension solo puede hablar con una a la vez: usa esa sesion, cierrala, ` +
+                        `o arranca esta con otro puerto (CHOCOLATITO_EXT_PORT).`,
+                };
+            }
+            return { ok: false, error: CONNECT_HINT };
+        }
+        const id = this.nextId++;
+        const payload = JSON.stringify({ id, cmd, ...args });
+        return new Promise((resolve) => {
+            const timer = setTimeout(() => {
+                this.pending.delete(id);
+                resolve({ ok: false, error: `La accion "${cmd}" supero el limite de ${timeoutMs}ms.` });
+            }, timeoutMs);
+            this.pending.set(id, { resolve, timer });
+            try {
+                this.client.send(payload);
+            }
+            catch (err) {
+                clearTimeout(timer);
+                this.pending.delete(id);
+                resolve({ ok: false, error: `No se pudo hablar con la extension: ${err?.message || err}` });
+            }
+        });
+    }
+    shutdown() {
+        try {
+            this.client?.close();
+            this.wss?.close();
+        }
+        catch { }
+    }
+}
+export const extensionBridge = new ExtensionBridge();
+process.on("exit", () => extensionBridge.shutdown());
+/**
+ * Ejecuta una accion sobre un ref y, si el ref se ha quedado obsoleto porque la
+ * pagina se re-renderizo, rehace el snapshot y lo intenta una vez mas.
+ *
+ * Las aplicaciones vivas (Flow re-renderiza su composer cada pocos segundos)
+ * invalidan los refs constantemente. Devolver "ref no encontrado" y quedarse
+ * ahi obliga al modelo a repetir el snapshot a mano en cada paso; hacerlo aqui
+ * es lo que convierte la herramienta en algo usable.
+ */
+async function withRefRetry(cmd, args, snapshotFilter) {
+    let res = await extensionBridge.send(cmd, args);
+    const obsoleto = !res.ok && /ref .*no (existe|encontrado)|vuelve a hacer snapshot/i.test(String(res.error || ""));
+    if (!obsoleto)
+        return res;
+    const fresh = await extensionBridge.send("snapshot", { filter: snapshotFilter || "", max: 120 });
+    if (!fresh.ok)
+        return res;
+    return await extensionBridge.send(cmd, args);
+}
+function fail(action, msg) {
+    return `Error en chrome (${action}): ${msg}`;
+}
+export async function chromeExtension(params, cwd = process.cwd(), apiKey) {
+    const { action } = params;
+    try {
+        switch (action) {
+            case "status": {
+                const on = await extensionBridge.waitForClient();
+                if (!on) {
+                    if (extensionBridge.heldByAnotherProcess) {
+                        return (`El puente esta ocupado por otra instancia de Chocolatito Code (puertos ${PORT_RANGE.join(", ")}).\n` +
+                            `La extension solo habla con una sesion a la vez. Cierra la otra o cambia CHOCOLATITO_EXT_PORT.`);
+                    }
+                    return `Extension NO conectada.\n${CONNECT_HINT}`;
+                }
+                const res = await extensionBridge.send("ping");
+                if (!res.ok)
+                    return fail(action, res.error);
+                const { origin, rejected } = extensionBridge.pairing;
+                const aviso = rejected
+                    ? `\nAviso de seguridad: otra extension (${rejected}) intento conectarse al puente y fue rechazada. ` +
+                        `Si no la reconoces, revisala en chrome://extensions.`
+                    : "";
+                return (`Extension conectada (v${res.data.version}), emparejada con ${origin}. ` +
+                    `Puedo trabajar en tus pestanas en segundo plano, sin robarte el foco.${aviso}`);
+            }
+            case "tabs": {
+                const res = await extensionBridge.send("tabs");
+                if (!res.ok)
+                    return fail(action, res.error);
+                const rows = res.data.tabs
+                    .map((t) => {
+                    const mark = t.id === res.data.working ? "*" : " ";
+                    return `${mark} [${t.id}] "${t.title}" -> ${String(t.url).slice(0, 110)}`;
+                })
+                    .join("\n");
+                return `PESTANAS DE TU CHROME (* = donde estoy trabajando):\n${rows}\n\nUsa select_tab con "match", u "open" para una nueva.`;
+            }
+            case "open": {
+                if (!params.url)
+                    return fail(action, 'falta "url".');
+                const res = await extensionBridge.send("open", { url: params.url, note: params.note }, 60_000);
+                if (!res.ok)
+                    return fail(action, res.error);
+                return (`Pestana abierta EN SEGUNDO PLANO (no te cambio de pantalla): "${res.data.title}"\n` +
+                    `URL: ${res.data.url}  ·  tabId ${res.data.tabId}\n` +
+                    `Esta agrupada en el grupo naranja "Chocolatito Code" y muestra un aviso en la pagina.`);
+            }
+            case "select_tab": {
+                const res = await extensionBridge.send("select", { match: params.match || params.url || "" });
+                if (!res.ok)
+                    return fail(action, res.error);
+                return `Trabajando ahora en "${res.data.title}" (tabId ${res.data.tabId}). Agrupada y marcada con el aviso.`;
+            }
+            case "navigate": {
+                if (!params.url)
+                    return fail(action, 'falta "url".');
+                const res = await extensionBridge.send("navigate", { url: params.url, tabId: params.tabId }, 60_000);
+                if (!res.ok)
+                    return fail(action, res.error);
+                return `Navegado a ${res.data.url} — "${res.data.title}" (tabId ${res.data.tabId}).`;
+            }
+            case "snapshot": {
+                const res = await extensionBridge.send("snapshot", {
+                    tabId: params.tabId,
+                    filter: params.filter || "",
+                    max: params.max ?? 60,
+                });
+                if (!res.ok)
+                    return fail(action, res.error);
+                const els = res.data.elements || [];
+                if (els.length === 0) {
+                    return (`Pagina "${res.data.title}": sin elementos accionables` +
+                        `${params.filter ? ` que contengan "${params.filter}"` : ""}. ` +
+                        `Prueba wait_for, quita el filtro, o mira la pagina con screenshot.`);
+                }
+                const rows = els
+                    .map((e) => {
+                    const val = e.value ? ` = "${e.value}"` : "";
+                    const dis = e.disabled ? " [deshabilitado]" : "";
+                    const off = e.inView ? "" : " [fuera de vista]";
+                    return `  [${e.ref}] ${e.role} "${e.name}"${val}${dis}${off}`;
+                })
+                    .join("\n");
+                return (`PAGINA: "${res.data.title}"\nURL: ${res.data.url}  ·  tabId ${res.data.tabId}\n` +
+                    `${els.length} elementos${res.data.truncated ? " (truncado; usa filter)" : ""}\n\n${rows}\n\n` +
+                    `Actua con click / type usando el numero entre corchetes.`);
+            }
+            case "click": {
+                if (params.ref === undefined)
+                    return fail(action, 'indica el "ref" del snapshot.');
+                const res = await withRefRetry("click", { ref: params.ref }, params.filter);
+                if (!res.ok)
+                    return fail(action, res.error);
+                return `Pulsado [${params.ref}] "${res.data.label || ""}". Pagina ahora: "${res.data.title}" (${res.data.url})`;
+            }
+            case "type": {
+                if (params.ref === undefined)
+                    return fail(action, 'indica el "ref" del snapshot.');
+                if (params.text === undefined)
+                    return fail(action, 'falta "text".');
+                // Se intenta dos veces. Un editor rico recien montado (Lexical, el que
+                // usa Flow) descarta la entrada durante su hidratacion: el campo queda
+                // vacio y la aplicacion responde "se debe proporcionar una instruccion".
+                // Verificar y reintentar una vez es lo que convierte un fallo
+                // intermitente en una accion fiable.
+                let res = null;
+                let got = "";
+                const want = params.text;
+                const quiere = want.slice(0, Math.min(30, want.length));
+                for (let intento = 1; intento <= 2; intento++) {
+                    res = await withRefRetry("type", {
+                        ref: params.ref,
+                        text: params.text,
+                        submit: params.submit === true,
+                        replace: params.replace !== false,
+                    }, params.filter);
+                    if (!res.ok)
+                        return fail(action, res.error);
+                    got = String(res.data.value || "");
+                    if (got.includes(quiere))
+                        break;
+                    if (intento === 1) {
+                        // Se le da tiempo al editor a terminar de montarse y se reintenta.
+                        await new Promise((r) => setTimeout(r, 1200));
+                    }
+                }
+                // Escribir sin verificar es como se acaba pulsando "enviar" sobre un
+                // campo vacio.
+                const landed = got.includes(quiere);
+                const corto = want.length > 60 ? want.slice(0, 57) + "..." : want;
+                const via = res.data.via === "cdp"
+                    ? " (teclado real por CDP)"
+                    : res.data.via === "dom"
+                        ? " (por DOM: el depurador no estaba disponible)"
+                        : "";
+                if (!landed) {
+                    // Se dice POR QUE via se intento y que fallo: sin eso, depurar esto es
+                    // adivinar. Fue exactamente lo que costo encontrar el problema.
+                    const detalle = res.data.warning ? ` Motivo: ${res.data.warning}` : "";
+                    return (`Aviso: se escribio en [${params.ref}]${via} pero el campo contiene "${got.slice(0, 60)}".${detalle} ` +
+                        `Vuelve a hacer snapshot y comprueba antes de enviar.`);
+                }
+                // Que el texto este en el campo NO garantiza que la aplicacion lo haya
+                // registrado: en un editor rico el boton de enviar puede seguir apagado.
+                // Se mira el estado real del boton antes de dar el paso por bueno.
+                const check = await extensionBridge.send("snapshot", { max: 80 });
+                let botones = "";
+                if (check.ok) {
+                    const enviar = (check.data.elements || []).filter((e) => /crear|enviar|generar|submit|send/i.test(e.name || ""));
+                    const apagados = enviar.filter((e) => e.disabled);
+                    if (enviar.length > 0 && apagados.length === enviar.length) {
+                        return (`Escrito en [${params.ref}]${via}: "${corto}"\n` +
+                            `PERO el boton de enviar sigue deshabilitado (${apagados
+                                .map((e) => `"${e.name}"`)
+                                .join(", ")}). La aplicacion no ha registrado el texto. ` +
+                            `Haz snapshot y revisa si falta seleccionar algo (modo, modelo) antes de enviar.`);
+                    }
+                    if (enviar.length > 0) {
+                        botones = ` El boton de enviar esta activo: ${enviar.map((e) => `[${e.ref}] "${e.name}"`).join(", ")}.`;
+                    }
+                }
+                return (`Escrito en [${params.ref}]${via} y verificado en el campo: "${corto}"` +
+                    `${params.submit ? " (enviado con Enter)" : ""}.${botones}`);
+            }
+            case "press": {
+                const res = await extensionBridge.send("press", { ref: params.ref, keys: params.keys || "Enter" });
+                if (!res.ok)
+                    return fail(action, res.error);
+                return `Tecla "${params.keys || "Enter"}" enviada a la pagina.`;
+            }
+            case "get_text": {
+                const res = await extensionBridge.send("getText", { tabId: params.tabId });
+                if (!res.ok)
+                    return fail(action, res.error);
+                return `TEXTO DE "${res.data.title}" (${res.data.url}):\n\n${res.data.text}`;
+            }
+            case "eval": {
+                if (!params.script)
+                    return fail(action, 'falta "script".');
+                const res = await extensionBridge.send("eval", { tabId: params.tabId, script: params.script });
+                if (!res.ok)
+                    return fail(action, res.error);
+                return `Resultado:\n${res.data.result}`;
+            }
+            case "wait_for": {
+                const res = await extensionBridge.send("waitFor", { tabId: params.tabId, text: params.text, ms: params.ms, timeout: params.timeout || 20_000 }, (params.timeout || 20_000) + 5_000);
+                if (!res.ok)
+                    return fail(action, res.error);
+                if (params.text) {
+                    return res.data.found
+                        ? `Aparecio el texto "${params.text}".`
+                        : `No aparecio "${params.text}" en el tiempo dado. Haz snapshot para ver como esta la pagina.`;
+                }
+                return `Espera de ${res.data.waited}ms completada.`;
+            }
+            case "screenshot": {
+                const res = await extensionBridge.send("screenshot", { tabId: params.tabId }, 60_000);
+                if (!res.ok)
+                    return fail(action, res.error);
+                const dir = path.join(os.homedir(), ".chocolatito", "cache");
+                if (!fs.existsSync(dir))
+                    fs.mkdirSync(dir, { recursive: true });
+                const out = params.outputPath
+                    ? path.isAbsolute(params.outputPath)
+                        ? params.outputPath
+                        : path.resolve(cwd, params.outputPath)
+                    : path.join(dir, "chrome_tab.png");
+                const outDir = path.dirname(out);
+                if (!fs.existsSync(outDir))
+                    fs.mkdirSync(outDir, { recursive: true });
+                fs.writeFileSync(out, Buffer.from(res.data.data, "base64"));
+                const kb = (fs.statSync(out).size / 1024).toFixed(1);
+                const meta = `Captura de la pestana (en segundo plano) guardada en ${out} (${kb} KB).`;
+                if (params.analyze === false || !apiKey)
+                    return meta;
+                const desc = await describeScreen(apiKey, out, params.question);
+                if (!desc.ok)
+                    return `${meta}\nNo se pudo analizar: ${desc.error}`;
+                return `${meta}\n\nLO QUE SE VE:\n${desc.text}`;
+            }
+            case "close_tab": {
+                const res = await extensionBridge.send("close_tab", { tabId: params.tabId });
+                return res.ok ? `Cerrada${res.data.closed > 1 ? "s" : ""} ${res.data.closed} pestaña(s).` : fail(action, res.error);
+            }
+            case "notice": {
+                const res = await extensionBridge.send("banner", { tabId: params.tabId, text: params.text || "" });
+                return res.ok ? `Aviso actualizado en la pagina: "${params.text}"` : fail(action, res.error);
+            }
+            case "done": {
+                const res = await extensionBridge.send("ungroup", {});
+                return res.ok
+                    ? "Trabajo cerrado: pestana desagrupada y aviso retirado."
+                    : fail(action, res.error);
+            }
+            default:
+                return fail(String(action), "accion no reconocida.");
+        }
+    }
+    catch (err) {
+        return fail(String(action), err?.message || String(err));
+    }
+}

package/dist/tools/browserLive.d.ts

@@ -0,0 +1,12 @@
+export interface BrowserLiveParams {
+    action: "launch" | "navigate" | "click" | "type" | "screenshot" | "evaluate" | "get_console_logs" | "get_content" | "get_interactive_elements" | "open_system" | "close";
+    url?: string;
+    selector?: string;
+    text?: string;
+    script?: string;
+    outputPath?: string;
+    headless?: boolean;
+    profileDirectory?: string;
+    userDataDir?: string;
+}
+export declare function browserLive(params: BrowserLiveParams, cwd?: string): Promise<string>;