chocolatito-code 1.6.12 → 1.6.14

package/dist/servidor/pagina.js

@@ -47,6 +47,31 @@ const PAGINA = [
     'header b { color:var(--zorro); font-weight:600; }',
     '#estado { margin-left:auto; font-size:12px; color:var(--suave); display:flex; align-items:center; gap:6px; }',
     '#punto { width:8px; height:8px; border-radius:50%; background:#d14; transition:background .2s; }',
+    '/* Lo que produce el agente, mirable. max-width en porcentaje y no en pixeles:',
+    '   en un movil en vertical caben 300px justos y una pieza de 1080 rompe el ancho. */',
+    '.mini { margin:6px 0; }',
+    '/* El enlace de guardar, pegado bajo la miniatura y con sitio para el dedo. */',
+    '.guardar { display:inline-flex; align-items:center; gap:6px; margin-top:4px; padding:6px 12px;',
+    '  background:var(--caja); border:1px solid var(--borde); border-radius:999px;',
+    '  color:var(--texto); font-size:12px; text-decoration:none; }',
+    '.guardar:active { border-color:var(--zorro); }',
+    '.mini img, .mini video { max-width:min(100%, 420px); max-height:320px; border-radius:8px;',
+    '  border:1px solid var(--borde); background:#000; display:block; }',
+    '/* Lo que esta a punto de subir, en fila sobre la caja de escribir. */',
+    '#adjuntos { display:flex; gap:6px; overflow-x:auto; padding:6px 12px 0; }',
+    '#adjuntos:empty { display:none; }',
+    '.chip { display:flex; align-items:center; gap:6px; flex:0 0 auto; max-width:60%;',
+    '  background:var(--caja); border:1px solid var(--borde); border-radius:999px; padding:4px 10px; font-size:12px; }',
+    '.chip img { width:22px; height:22px; object-fit:cover; border-radius:4px; }',
+    '.chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }',
+    '.chip b { color:var(--suave); cursor:pointer; font-weight:400; padding:0 2px; }',
+    '#clip { background:none; border:1px solid var(--borde); color:var(--suave); border-radius:10px;',
+    '  font-size:18px; line-height:1; padding:0 12px; cursor:pointer; }',
+    '/* El velo de arrastrar. pointer-events:none evita el parpadeo: si el velo',
+    '   recibe los eventos, al aparecer dispara dragleave y se va solo. */',
+    '#suelta { position:fixed; inset:0; display:none; place-items:center; z-index:20;',
+    '  background:rgba(11,11,13,.88); color:var(--zorro); font-size:16px; pointer-events:none; }',
+    '#suelta.visible { display:grid; }',
     '#punto.ok { background:#2ea043; }',
     '#salida { flex:1; overflow-y:auto; overflow-x:auto; padding:12px; white-space:pre; -webkit-overflow-scrolling:touch; }',
     '#salida .fila { min-height:1.5em; }',
@@ -84,10 +109,14 @@ const PAGINA = [
     '<header><b>Chocolatito</b><span class="d" style="font-size:12px">Code</span>',
     '<span id="estado"><span id="punto"></span><span id="estadoTexto">conectando</span></span></header>',
     '<div id="salida"></div>',
+    '<div id="adjuntos"></div>',
     '<form id="envio">',
+    '<input id="fichero" type="file" multiple style="display:none">',
+    '<button id="clip" type="button" title="Adjuntar archivos">+</button>',
     '<textarea id="texto" rows="1" placeholder="Escribele lo que quieres que haga" autocapitalize="sentences" autocomplete="off"></textarea>',
     '<button id="enviar" type="submit">Ir</button>',
     '</form>',
+    '<div id="suelta">Suelta aqui los archivos</div>',
     '<div id="velo"><div id="permiso">',
     '<h2 id="permisoTitulo">Pide permiso</h2>',
     '<p id="permisoDetalle"></p>',
@@ -144,6 +173,102 @@ const PAGINA = [
     '    }',
     '    return html || "&nbsp;";',
     '  }',
+    '  // MIRAR, NO SOLO LEER LA RUTA',
+    '  //',
+    '  // Sin esto, cuando el agente exporta una imagen contesta con la ruta. Delante',
+    '  // del PC se abre la carpeta; en un movil no puedes mirarlo, asi que no puedes',
+    '  // opinar, asi que no puedes trabajar. La ruta se detecta aqui y el permiso lo',
+    '  // da el servidor: /archivo solo sirve lo que este dentro de la carpeta.',
+    '  var EXT_VISIBLE = /^(png|jpe?g|webp|gif|bmp|avif|svg|mp4|webm|mov)$/i;',
+    '  // Todo lo que en una linea tiene pinta de ruta: con separador y con punto.',
+    '  function rutasDelTexto(crudo) {',
+    '    var limpio = String(crudo).replace(/\\x1b\\[[0-9;?]*[A-Za-z]/g, "");',
+    '    var encontradas = [];',
+    '    var trozos = limpio.split(/[\\s"\\u0027`<>|()\\[\\]]+/);',
+    '    for (var i = 0; i < trozos.length; i++) {',
+    '      var t = trozos[i].replace(/[.,;:]+$/, "");',
+    '      if (t.indexOf("/") < 0 && t.indexOf("\\\\") < 0) continue;',
+    '      if (t.lastIndexOf(".") < 0) continue;',
+    '      if (encontradas.indexOf(t) < 0) encontradas.push(t);',
+    '      if (encontradas.length >= 6) break;',
+    '    }',
+    '    return encontradas;',
+    '  }',
+    '  function extensionDe(ruta) {',
+    '    var punto = String(ruta).lastIndexOf(".");',
+    '    return punto < 0 ? "" : ruta.slice(punto + 1);',
+    '  }',
+    '  function rutasVisibles(crudo) {',
+    '    return rutasDelTexto(crudo).filter(function (r) { return EXT_VISIBLE.test(extensionDe(r)); }).slice(0, 4);',
+    '  }',
+    '  // Las que no se pueden ensenar pero si llevarse: el ZIP, el PDF, el CSV.',
+    '  function rutasGuardables(crudo, yaVistas) {',
+    '    return rutasDelTexto(crudo)',
+    '      .filter(function (r) { return yaVistas.indexOf(r) < 0 && EXT_GUARDABLE.test(extensionDe(r)); })',
+    '      .slice(0, 3);',
+    '  }',
+    '  // GUARDARLO, QUE ES LA ULTIMA MILLA',
+    '  //',
+    '  // Ver la pieza en el movil no termina el trabajo: el diseno sale del PC para',
+    '  // ir a un cliente, y ese cliente esta en el WhatsApp del telefono. Sin esto,',
+    '  // el circuito se queda a un paso: recibes por WhatsApp, procesas en el PC,',
+    '  // ves el resultado... y tienes que ir al ordenador a por el archivo.',
+    '  //',
+    '  // Y no solo imagenes: el ZIP del entregable, el PDF, el CSV y los subtitulos',
+    '  // no tienen miniatura que ensenar, asi que sin un enlace no existen para el',
+    '  // movil. Para esos se pregunta antes con HEAD si el archivo esta de verdad,',
+    '  // para no ofrecer un enlace roto sobre cualquier palabra con un punto.',
+    '  var EXT_GUARDABLE = /^(pdf|zip|rar|7z|csv|txt|md|srt|vtt|json|docx|xlsx|pptx|psd|ai|svg|mp3|wav|ogg|mp4|webm|mov|png|jpe?g|webp|gif)$/i;',
+    '  function urlDe(ruta, descargar) {',
+    '    return "/archivo?t=" + encodeURIComponent(token) + "&ruta=" + encodeURIComponent(ruta) +',
+    '      (descargar ? "&descargar=1" : "");',
+    '  }',
+    '  function nombreDe(ruta) {',
+    '    var trozos = String(ruta).split(/[\\\\/]/);',
+    '    return trozos[trozos.length - 1] || ruta;',
+    '  }',
+    '  function enlaceDeGuardar(ruta) {',
+    '    var a = document.createElement("a");',
+    '    a.className = "guardar";',
+    '    a.href = urlDe(ruta, true);',
+    '    a.setAttribute("download", nombreDe(ruta));',
+    '    a.textContent = "\u2913 Guardar " + nombreDe(ruta);',
+    '    return a;',
+    '  }',
+    '  // Un archivo sin miniatura: se ofrece solo si existe de verdad.',
+    '  function quizaDescargable(ruta, donde) {',
+    '    var punto = String(ruta).lastIndexOf(".");',
+    '    if (punto < 0 || !EXT_GUARDABLE.test(ruta.slice(punto + 1))) return;',
+    '    fetch(urlDe(ruta, false), { method: "HEAD" }).then(function (r) {',
+    '      if (!r.ok) return;',
+    '      donde.appendChild(enlaceDeGuardar(ruta));',
+    '    }).catch(function () {});',
+    '  }',
+    '  function rutasGuardables(crudo, yaVistas) {',
+    '    var todas = rutasDelTexto(crudo);',
+    '    var fuera = [];',
+    '    for (var i = 0; i < todas.length; i++) {',
+    '      if (yaVistas.indexOf(todas[i]) < 0) fuera.push(todas[i]);',
+    '    }',
+    '    return fuera.slice(0, 3);',
+    '  }',
+    '  function miniatura(ruta) {',
+    '    var url = "/archivo?t=" + encodeURIComponent(token) + "&ruta=" + encodeURIComponent(ruta);',
+    '    var caja = document.createElement("div");',
+    '    caja.className = "mini";',
+    '    var esVideo = /(mp4|webm|mov)$/i.test(ruta);',
+    '    var vista = document.createElement(esVideo ? "video" : "img");',
+    '    vista.src = url;',
+    '    if (esVideo) { vista.controls = true; vista.preload = "metadata"; }',
+    '    // Si no se puede servir -fuera de la carpeta, borrado, o es una ruta que',
+    '    // solo lo parecia- no se deja el icono de imagen rota: se quita la caja.',
+    '    vista.onerror = function () { try { caja.parentNode.removeChild(caja); } catch (e) {} };',
+    '    // El enlace solo aparece cuando la imagen ha cargado: si el archivo no se',
+    '    // puede servir, la caja entera se va y no queda un boton que no guarda nada.',
+    '    vista.onload = function () { caja.appendChild(enlaceDeGuardar(ruta)); };',
+    '    caja.appendChild(vista);',
+    '    return caja;',
+    '  }',
     '  function pintar(lineas) {',
     '    if (!lineas || !lineas.length) return;',
     '    var pegado = alFinal();',
@@ -153,12 +278,67 @@ const PAGINA = [
     '      div.className = "fila";',
     '      div.innerHTML = ansi(lineas[i].texto);',
     '      frag.appendChild(div);',
+    '      var vistas = rutasVisibles(lineas[i].texto);',
+    '      for (var v = 0; v < vistas.length; v++) frag.appendChild(miniatura(vistas[v]));',
+    '      var otras = rutasGuardables(lineas[i].texto, vistas);',
+    '      if (otras.length) {',
+    '        var fila = document.createElement("div");',
+    '        fila.className = "mini";',
+    '        frag.appendChild(fila);',
+    '        for (var g = 0; g < otras.length; g++) quizaDescargable(otras[g], fila);',
+    '      }',
     '      if (lineas[i].id > ultimoId) ultimoId = lineas[i].id;',
     '    }',
     '    salida.appendChild(frag);',
     '    while (salida.childNodes.length > 3000) salida.removeChild(salida.firstChild);',
     '    if (pegado) salida.scrollTop = salida.scrollHeight;',
     '  }',
+    '  // AVISAR AL MOVIL, SIN SER PESADO',
+    '  //',
+    '  // Sin esto, la sesion web solo sirve si estas mirandola. Dejas una tarea de',
+    '  // cinco minutos, te vas, y acabas sacando el telefono cada treinta segundos',
+    '  // por si acaso. Que es exactamente lo que hace inutil trabajar desde el movil.',
+    '  //',
+    '  // TRES DECISIONES:',
+    '  //',
+    '  //  1. SOLO SI NO ESTAS MIRANDO. Con la pagina delante, una notificacion de',
+    '  //     algo que ya ves en pantalla es ruido, y el ruido se acaba silenciando',
+    '  //     entero, tambien el aviso que si importaba.',
+    '  //  2. EL PERMISO SE PIDE AL ENVIAR, NO AL CARGAR. Chrome ignora -y Safari',
+    '  //     rechaza- una peticion de notificaciones que no venga de un gesto del',
+    '  //     usuario. Pedirlo al abrir la pagina es gastar la unica oportunidad.',
+    '  //  3. EL TITULO TAMBIEN AVISA. Si las notificaciones estan denegadas, el',
+    '  //     punto en la pestana es lo unico que queda, y se ve igual de bien.',
+    '  var tituloNormal = document.title;',
+    '  var avisoPuesto = false;',
+    '  function puedeAvisar() {',
+    '    return typeof Notification !== "undefined" && Notification.permission === "granted";',
+    '  }',
+    '  function pedirPermisoDeAviso() {',
+    '    if (typeof Notification === "undefined" || Notification.permission !== "default") return;',
+    '    try { Notification.requestPermission(); } catch (e) {}',
+    '  }',
+    '  function marcarTitulo(si) {',
+    '    avisoPuesto = si;',
+    '    document.title = si ? "\u25cf " + tituloNormal : tituloNormal;',
+    '  }',
+    '  function avisar(titulo, cuerpo, urgente) {',
+    '    // Mirando la pagina no se avisa de nada: ya lo estas viendo.',
+    '    if (!document.hidden) return;',
+    '    marcarTitulo(true);',
+    '    if (navigator.vibrate) {',
+    '      // Dos pulsos para un permiso -que te esta esperando- y uno para el final.',
+    '      try { navigator.vibrate(urgente ? [120, 80, 120] : [90]); } catch (e) {}',
+    '    }',
+    '    if (!puedeAvisar()) return;',
+    '    try {',
+    '      var n = new Notification(titulo, { body: cuerpo, tag: "chocolatito", renotify: true });',
+    '      n.onclick = function () { try { window.focus(); } catch (e) {} try { n.close(); } catch (e) {} };',
+    '    } catch (e) {}',
+    '  }',
+    '  document.addEventListener("visibilitychange", function () {',
+    '    if (!document.hidden && avisoPuesto) marcarTitulo(false);',
+    '  });',
     '  function conectado(si, etiqueta) {',
     '    punto.className = si ? "ok" : "";',
     '    estadoTexto.textContent = etiqueta;',
@@ -171,6 +351,7 @@ const PAGINA = [
     '    peticionActual = null;',
     '  }',
     '  function abrirPermiso(p) {',
+    '    avisar("Chocolatito te pide permiso", (p.detalle && p.detalle[0]) || p.herramienta, true);',
     '    peticionActual = p;',
     '    document.getElementById("permisoTitulo").textContent = "Permiso: " + p.herramienta;',
     '    document.getElementById("permisoDetalle").textContent = (p.detalle || []).join("\\n");',
@@ -220,6 +401,7 @@ const PAGINA = [
     '        pintar(m.lineas);',
     '      }',
     '      else if (m.t === "permiso") abrirPermiso(m);',
+    '      else if (m.t === "turno") avisar("Chocolatito ha terminado", "Te toca a ti.", false);',
     '      else if (m.t === "cierre") { velo.className = ""; peticionActual = null; }',
     '      else if (m.t === "fin") { terminada = true; conectado(false, "sesion terminada"); try { ws.close(); } catch (e) {} }',
     '    };',
@@ -233,11 +415,93 @@ const PAGINA = [
     '    };',
     '    ws.onerror = function () { try { ws.close(); } catch (e) {} };',
     '  }',
+    '  // LOS ARCHIVOS QUE ENTRAN',
+    '  //',
+    '  // Tres gestos, porque son tres sitios distintos: el boton y arrastrar (PC), y',
+    '  // PEGAR, que es el mas usado de los tres y el que casi nadie pone: una captura',
+    '  // de pantalla se pega, no se guarda antes en una carpeta para luego buscarla.',
+    '  var adjuntos = [];',
+    '  var tiraAdjuntos = document.getElementById("adjuntos");',
+    '  var fichero = document.getElementById("fichero");',
+    '  var suelta = document.getElementById("suelta");',
+    '  function pintarAdjuntos() {',
+    '    tiraAdjuntos.innerHTML = "";',
+    '    for (var i = 0; i < adjuntos.length; i++) {',
+    '      (function (a) {',
+    '        var chip = document.createElement("div");',
+    '        chip.className = "chip";',
+    '        if (a.vista) { var im = document.createElement("img"); im.src = a.vista; chip.appendChild(im); }',
+    '        var nom = document.createElement("span");',
+    '        nom.textContent = a.subiendo ? a.nombre + "\u2026" : a.nombre;',
+    '        chip.appendChild(nom);',
+    '        var x = document.createElement("b");',
+    '        x.textContent = "\u00d7";',
+    '        x.onclick = function () { adjuntos.splice(adjuntos.indexOf(a), 1); pintarAdjuntos(); };',
+    '        chip.appendChild(x);',
+    '        tiraAdjuntos.appendChild(chip);',
+    '      })(adjuntos[i]);',
+    '    }',
+    '  }',
+    '  function adjuntar(archivos) {',
+    '    for (var i = 0; i < archivos.length; i++) {',
+    '      (function (archivo) {',
+    '        var entrada = {',
+    '          nombre: archivo.name || "pegado.png",',
+    '          subiendo: true,',
+    '          ruta: "",',
+    '          vista: /^image\\//.test(archivo.type) ? URL.createObjectURL(archivo) : ""',
+    '        };',
+    '        adjuntos.push(entrada);',
+    '        pintarAdjuntos();',
+    '        fetch("/subir?t=" + encodeURIComponent(token) + "&nombre=" + encodeURIComponent(entrada.nombre), {',
+    '          method: "POST",',
+    '          body: archivo',
+    '        }).then(function (r) { return r.json(); }).then(function (j) {',
+    '          if (j && j.ok) { entrada.ruta = j.ruta; entrada.subiendo = false; }',
+    '          else {',
+    '            adjuntos.splice(adjuntos.indexOf(entrada), 1);',
+    '            pintar([{ id: 0, texto: "\u001b[33m  No se pudo subir " + entrada.nombre + ": " + ((j && j.error) || "error") + "\u001b[39m" }]);',
+    '          }',
+    '          pintarAdjuntos();',
+    '        }).catch(function () {',
+    '          adjuntos.splice(adjuntos.indexOf(entrada), 1);',
+    '          pintarAdjuntos();',
+    '        });',
+    '      })(archivos[i]);',
+    '    }',
+    '  }',
+    '  document.getElementById("clip").onclick = function () { fichero.click(); };',
+    '  fichero.onchange = function () { adjuntar(fichero.files); fichero.value = ""; };',
+    '  document.addEventListener("paste", function (ev) {',
+    '    var datos = ev.clipboardData;',
+    '    if (!datos || !datos.files || !datos.files.length) return;',
+    '    ev.preventDefault();',
+    '    adjuntar(datos.files);',
+    '  });',
+    '  var arrastres = 0;',
+    '  document.addEventListener("dragenter", function (ev) { ev.preventDefault(); arrastres++; suelta.className = "visible"; });',
+    '  document.addEventListener("dragover", function (ev) { ev.preventDefault(); });',
+    '  document.addEventListener("dragleave", function () { if (--arrastres <= 0) { arrastres = 0; suelta.className = ""; } });',
+    '  document.addEventListener("drop", function (ev) {',
+    '    ev.preventDefault();',
+    '    arrastres = 0;',
+    '    suelta.className = "";',
+    '    if (ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files.length) adjuntar(ev.dataTransfer.files);',
+    '  });',
     '  document.getElementById("envio").onsubmit = function (ev) {',
     '    ev.preventDefault();',
     '    var valor = texto.value.trim();',
-    '    if (!valor || !ws || ws.readyState !== 1) return;',
-    '    ws.send(JSON.stringify({ t: "entrada", texto: valor }));',
+    '    var listos = [];',
+    '    for (var i = 0; i < adjuntos.length; i++) if (adjuntos[i].ruta) listos.push(adjuntos[i].ruta);',
+    '    // Se puede mandar SOLO archivos: subir cinco fotos y no escribir nada es una',
+    '    // orden perfectamente clara para el que la recibe.',
+    '    if ((!valor && !listos.length) || !ws || ws.readyState !== 1) return;',
+    '    // Aqui, y no al cargar: Chrome ignora una peticion de notificaciones que no',
+    '    // venga de un gesto del usuario, y pedirla al abrir gasta la unica que hay.',
+    '    pedirPermisoDeAviso();',
+    '    ws.send(JSON.stringify({ t: "entrada", texto: valor, archivos: listos }));',
+    '    adjuntos = [];',
+    '    pintarAdjuntos();',
     '    texto.value = "";',
     '    texto.style.height = "auto";',
     '    salida.scrollTop = salida.scrollHeight;',

package/dist/servidor/puente.d.ts

@@ -3,6 +3,19 @@ export declare function servirActivo(): boolean;
 export declare function marcarServirActivo(valor: boolean): void;
 /** Llega algo del navegador. */
 export declare function entregarEntrada(texto: string): void;
+/**
+ * QUIEN AVISA AL MOVIL DE QUE YA PUEDE MIRAR
+ *
+ * El navegador sabia cuando le preguntaban algo -el permiso llega por su
+ * canal- pero no sabia cuando el agente TERMINABA. Y ese es justo el momento
+ * que importa cuando no estas delante: dejas una tarea de cinco minutos, te vas,
+ * y vuelves a mirar el telefono cada treinta segundos por si acaso.
+ *
+ * El momento no hay que inventarlo ni medirlo: es exactamente cuando el agente
+ * se pone a esperar lo que escribas. Ni un evento nuevo ni un temporizador.
+ */
+type AvisoDeTurno = () => void;
+export declare function fijarAvisoDeTurno(fn: AvisoDeTurno | null): void;
 export declare function esperarEntradaWeb(): Promise<string>;
 export declare function hayEntradaEnCola(): boolean;
 export interface PeticionDePermiso {

package/dist/servidor/puente.js

@@ -48,10 +48,20 @@ export function entregarEntrada(texto) {
     // vez de perderse. Es lo que ya hace el type-ahead del terminal.
     cola.push(texto);
 }
+let avisarDelTurno = null;
+export function fijarAvisoDeTurno(fn) {
+    avisarDelTurno = fn;
+}
 export function esperarEntradaWeb() {
     const pendiente = cola.shift();
+    // Con algo en la cola NO se avisa: el usuario ya habia escrito mientras el
+    // agente trabajaba, asi que no ha terminado nada para el, sigue la faena.
     if (pendiente !== undefined)
         return Promise.resolve(pendiente);
+    try {
+        avisarDelTurno?.();
+    }
+    catch { }
     return new Promise((resolve) => {
         esperando = resolve;
     });
@@ -106,6 +116,7 @@ export function permisosAbiertos() {
 }
 /** Solo para pruebas. */
 export function vaciarPuente() {
+    avisarDelTurno = null;
     cola.length = 0;
     esperando = null;
     emisor = null;

package/dist/servidor/servidor.d.ts

@@ -36,6 +36,12 @@ export interface OpcionesServidor {
     enRed?: boolean;
     /** Para pruebas: token fijo en vez de uno aleatorio. */
     token?: string;
+    /**
+     * La carpeta de trabajo, leida en cada peticion y no copiada al arrancar.
+     * Con /cd el agente se cambia de carpeta a mitad de sesion, y lo que se sube
+     * tiene que caer donde se esta trabajando AHORA, no donde se empezo.
+     */
+    carpeta?: () => string;
 }
 export interface ServidorWeb {
     puerto: number;

package/dist/servidor/servidor.js

@@ -1,11 +1,14 @@
 import http from "node:http";
+import fs from "node:fs";
+import path from "node:path";
 import os from "node:os";
 import crypto from "node:crypto";
 import chalk from "chalk";
 import { WebSocketServer, WebSocket } from "ws";
 import { paginaHtml } from "./pagina.js";
+import { LIMITE_DE_SUBIDA, avisoDeSubida, guardarSubida, rutaServible, tipoDelArchivo, } from "./archivos.js";
 import { alEscribirWeb, anotarWeb, historialWeb } from "./captura.js";
-import { cancelarPermisosAbiertos, entregarEntrada, fijarEmisorDePermiso, responderPermiso, } from "./puente.js";
+import { cancelarPermisosAbiertos, entregarEntrada, fijarAvisoDeTurno, fijarEmisorDePermiso, responderPermiso, } from "./puente.js";
 const PUERTO_POR_DEFECTO = 4700;
 /**
  * Identifica ESTA sesion, y existe por un caso concreto.
@@ -89,16 +92,30 @@ export async function iniciarServidorWeb(opciones = {}) {
     const autorizada = (req) => anfitrionAceptable(req.headers.host) &&
         origenAceptable(req.headers.origin, req.headers.host) &&
         mismoToken(tokenDeLaPeticion(req.url), token);
+    const carpetaDeTrabajo = opciones.carpeta || (() => process.cwd());
     const servidor = http.createServer((req, res) => {
         const ruta = (req.url || "/").split("?")[0];
-        if (req.method !== "GET") {
-            res.writeHead(405).end();
+        const rutasConocidas = ["/", "/subir", "/archivo"];
+        if (!rutasConocidas.includes(ruta)) {
+            res.writeHead(404).end();
             return;
         }
-        if (ruta !== "/") {
-            res.writeHead(404).end();
+        const metodoValido = ruta === "/subir"
+            ? req.method === "POST"
+            : // HEAD solo en /archivo: la pagina pregunta "existe esto?" antes de
+                // ofrecer el enlace de guardar, y pedir el archivo entero para
+                // averiguarlo seria mandar un video de 40 MB para no ensenarlo.
+                req.method === "GET" || (ruta === "/archivo" && req.method === "HEAD");
+        if (!metodoValido) {
+            res.writeHead(405).end();
             return;
         }
+        // LA PUERTA ES UNA SOLA PARA LAS TRES RUTAS.
+        //
+        // Antes habia una ruta y por eso la comprobacion vivia pegada a ella. Con
+        // tres, lo que no puede pasar es que cada una traiga su copia: la cuarta se
+        // escribe un martes con prisa y se olvida, y detras de esta puerta hay
+        // ejecucion de comandos en la maquina de alguien.
         if (!autorizada(req)) {
             // Se dice en el terminal: si a alguien le tocan la puerta, tiene derecho a
             // enterarse en el momento y no al revisar registros que nadie revisa.
@@ -106,16 +123,105 @@ export async function iniciarServidorWeb(opciones = {}) {
             res.writeHead(401, { "content-type": "text/plain; charset=utf-8" }).end("No.");
             return;
         }
+        if (ruta === "/subir") {
+            recibirSubida(req, res);
+            return;
+        }
+        if (ruta === "/archivo") {
+            servirArchivo(req, res);
+            return;
+        }
         res.writeHead(200, {
             "content-type": "text/html; charset=utf-8",
             "cache-control": "no-store",
             // La pagina no tiene que salir de aqui ni meterse en ningun marco ajeno.
             "x-frame-options": "DENY",
             "referrer-policy": "no-referrer",
-            "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; connect-src 'self' ws: wss:",
+            "content-security-policy": 
+            // img/media 'self': las miniaturas y los videos salen de /archivo, que es
+            // esta misma casa. blob: para la vista previa de lo que aun no se ha
+            // subido. Nada de terceros: la pagina sigue sin pedirle nada a nadie.
+            "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; " +
+                "img-src 'self' blob: data:; media-src 'self' blob:; connect-src 'self' ws: wss:",
         });
         res.end(paginaHtml());
     });
+    /** Un archivo que llega del navegador: cuerpo crudo, nombre en la consulta. */
+    function recibirSubida(req, res) {
+        const consulta = new URL(req.url || "/", "http://x").searchParams;
+        const nombre = consulta.get("nombre") || "archivo";
+        // Se corta por tamano MIENTRAS llega, no despues: esperar a tener 500 MB en
+        // memoria para entonces decir que no es justo lo que no hay que hacer.
+        const trozos = [];
+        let total = 0;
+        let cortado = false;
+        req.on("data", (trozo) => {
+            if (cortado)
+                return;
+            total += trozo.length;
+            if (total > LIMITE_DE_SUBIDA) {
+                cortado = true;
+                res.writeHead(413, { "content-type": "application/json" }).end(JSON.stringify({ ok: false, error: "El archivo es demasiado grande." }));
+                req.destroy();
+                return;
+            }
+            trozos.push(trozo);
+        });
+        req.on("end", () => {
+            if (cortado)
+                return;
+            const guardado = guardarSubida(carpetaDeTrabajo(), nombre, Buffer.concat(trozos));
+            if (!guardado.ok) {
+                res.writeHead(400, { "content-type": "application/json" }).end(JSON.stringify(guardado));
+                return;
+            }
+            anotarWeb(chalk.gray(`  ⇩ Llego del navegador: ${guardado.ruta}`));
+            res.writeHead(200, { "content-type": "application/json" }).end(JSON.stringify(guardado));
+        });
+        req.on("error", () => {
+            if (!cortado)
+                res.writeHead(400).end();
+        });
+    }
+    /** Un archivo de la carpeta de trabajo, para verlo en el navegador. */
+    function servirArchivo(req, res) {
+        const consulta = new URL(req.url || "/", "http://x").searchParams;
+        const real = rutaServible(carpetaDeTrabajo(), consulta.get("ruta") || "");
+        // Fuera de la carpeta es un 404, no un 403: decir "existe pero no te lo doy"
+        // ya cuenta algo del disco de alguien que no ha preguntado.
+        if (!real) {
+            res.writeHead(404).end();
+            return;
+        }
+        // "descargar" cambia una palabra de la cabecera y con eso el navegador deja
+        // de ensenar el archivo y lo guarda. Es la ultima milla del movil: el agente
+        // exporta la pieza, la ves, y te la llevas para mandarsela al cliente sin
+        // pasar por el ordenador.
+        const guardar = consulta.get("descargar") === "1";
+        const nombre = path.basename(real).replace(/"/g, "");
+        try {
+            const tam = fs.statSync(real).size;
+            res.writeHead(200, {
+                "content-type": tipoDelArchivo(real),
+                "content-length": String(tam),
+                "cache-control": "no-store",
+                // Que el navegador no se ponga a adivinar el tipo: un .txt con HTML
+                // dentro no se ejecuta como pagina.
+                "x-content-type-options": "nosniff",
+                "content-disposition": `${guardar ? "attachment" : "inline"}; filename="${nombre}"`,
+            });
+            // HEAD es la pregunta sin la respuesta: las cabeceras dicen que existe,
+            // que tamano tiene y de que tipo es, y no se mueve un solo byte del disco.
+            if (req.method === "HEAD") {
+                res.end();
+                return;
+            }
+            res.end(fs.readFileSync(real));
+        }
+        catch {
+            res.writeHead(404).end();
+        }
+    }
     servidor.on("upgrade", (req, socket, head) => {
         const ruta = (req.url || "/").split("?")[0];
         if (ruta !== "/ws" || !autorizada(req)) {
@@ -180,6 +286,19 @@ export async function iniciarServidorWeb(opciones = {}) {
             catch {
                 return;
             }
+            if (m?.t === "entrada" && typeof m.texto === "string") {
+                // Los archivos que se acaban de subir van DELANTE de lo que escribio el
+                // usuario, y con la ruta entera. El aviso se compone aqui y no en la
+                // pagina para que la forma de decirlo viva en un solo sitio.
+                const subidos = Array.isArray(m.archivos)
+                    ? m.archivos.filter((r) => typeof r === "string" && r.length > 0)
+                    : [];
+                if (subidos.length > 0) {
+                    const aviso = avisoDeSubida(subidos);
+                    m.texto = m.texto.trim() ? `${aviso}
+${m.texto}` : aviso;
+                }
+            }
             if (m?.t === "entrada" && typeof m.texto === "string") {
                 const texto = m.texto.slice(0, 20_000).trim();
                 if (texto)
@@ -204,6 +323,10 @@ export async function iniciarServidorWeb(opciones = {}) {
         });
     });
     fijarEmisorDePermiso((peticion) => aTodos({ t: "permiso", ...peticion }) > 0);
+    // El agente se puso a esperar: para el movil, eso es "ya esta".
+    fijarAvisoDeTurno(() => {
+        aTodos({ t: "turno" });
+    });
     const puerto = await new Promise((resolve, reject) => {
         servidor.once("error", reject);
         servidor.listen(puertoPedido, anfitrion, () => {

package/dist/tools/computerUse.d.ts

@@ -23,7 +23,7 @@
  *     "background": se actua sobre una ventana concreta sin traerla al frente y
  *     sin mover el raton del usuario.
  */
-export type ComputerAction = "screenshot" | "ui_snapshot" | "ui_click" | "ui_type" | "ui_focus" | "find_element" | "left_click" | "click" | "double_click" | "triple_click" | "right_click" | "middle_click" | "mouse_move" | "move" | "left_click_drag" | "scroll" | "type" | "key" | "hotkey" | "wait" | "wait_change" | "sleep" | "cursor_position" | "list_windows" | "focus_window" | "get_active_window" | "open_app";
+export type ComputerAction = "screenshot" | "ui_snapshot" | "ui_click" | "ui_type" | "ui_focus" | "find_element" | "left_click" | "click" | "mouse_click" | "double_click" | "triple_click" | "right_click" | "middle_click" | "mouse_move" | "move" | "left_click_drag" | "drag" | "scroll" | "type" | "key" | "hotkey" | "press" | "key_press" | "wait" | "wait_change" | "wait_visual_change" | "sequence" | "scroll_into_view" | "scroll_to" | "read_text" | "get_text" | "sleep" | "cursor_position" | "list_windows" | "focus_window" | "get_active_window" | "open_app";
 export interface ComputerUseParams {
     action: ComputerAction;
     /** Ventana objetivo por titulo o proceso (ej. "chrome", "Flow"). */
@@ -42,6 +42,8 @@ export interface ComputerUseParams {
     key?: string;
     query?: string;
     filter?: string;
+    target?: string | number;
+    maxAttempts?: number;
     direction?: "up" | "down" | "left" | "right";
     amount?: number;
     repeat?: number;
@@ -54,5 +56,13 @@ export interface ComputerUseParams {
     question?: string;
     /** Solo para screenshot: pone false para saltarse la vision y ahorrar tokens. */
     analyze?: boolean;
+    /** Solo para screenshot/find_element: dibuja una cuadrícula de coordenadas sobre la captura. */
+    grid?: boolean;
+    /** Región de interés [x1, y1, x2, y2] para capturar o esperar cambios en alta resolución. */
+    region?: [number, number, number, number];
+    /** Sub-acciones a ejecutar en ráfaga para action="sequence". */
+    steps?: ComputerUseParams[];
+    /** true si las coordenadas están en escala 0..1000 estilo OpenAI Operator / Astra. */
+    normalized?: boolean;
 }
 export declare function computerUse(params: ComputerUseParams, cwd?: string, apiKey?: string): Promise<string>;