chocolatito-code 1.6.13 → 1.6.15

package/dist/servidor/pagina.js

@@ -24,6 +24,7 @@
  * aqui a `<span>` en vez de quitarlos: el diff en verde y rojo ES el producto, y
  * un diff en gris no vende nada.
  */
+import { MASCOTA_PNG_BASE64, FUENTE_MARCA_BASE64 } from "./marca.js";
 export function paginaHtml() {
     return PAGINA;
 }
@@ -44,12 +45,72 @@ const PAGINA = [
     '  font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }',
     'header { display:flex; align-items:center; gap:8px; background:var(--caja);',
     '  padding:calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom:1px solid var(--borde); }',
-    '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; }',
+    `@font-face {`,
+    `  font-family: 'Chocolatito Marca';`,
+    `  src: url('data:font/ttf;base64,${FUENTE_MARCA_BASE64}') format('truetype');`,
+    `  font-display: swap;`,
+    `}`,
+    '/* EL ZORRITO Y EL TITULO DE LA MARCA',
+    '   La mascota oficial con su alto fijado por CSS para que no salte al cargar,',
+    '   y la tipografia Chocolatito Marca declarada con @font-face en base64 (sin',
+    '   dependencias de red ni CDN). SOLO para el titulo: la conversacion se queda',
+    '   en monospace porque es salida de terminal y ahi las columnas tienen que',
+    '   cuadrar exactas. Todo cabe en 390px sin empujar nada. */',
+    'header { font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; white-space:nowrap; }',
+    'header .mascota { height:26px; width:auto; flex-shrink:0; display:block; }',
+    "header b { font-family:'Chocolatito Marca', sans-serif; color:var(--zorro); font-weight:700; font-size:16px; letter-spacing:-0.01em; flex-shrink:0; }",
+    "header .sub { font-family:'Chocolatito Marca', sans-serif; color:var(--suave); font-size:13px; font-weight:500; letter-spacing:0.02em; flex-shrink:0; }",
+    '#estado { margin-left:auto; font-size:12px; color:var(--suave); display:flex; align-items:center; gap:6px; flex-shrink:0; }',
     '#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; }',
+    '/* EN UNA PANTALLA ESTRECHA, LAS LINEAS SE PARTEN.',
+    '   Con white-space:pre cada linea del terminal conserva su largo entero, asi',
+    '   que en un movil hay que arrastrar de lado para leer cada renglon: la',
+    '   conversacion se vuelve ilegible. Se parten solo por debajo de 700px para',
+    '   que en el PC las columnas -tablas, diffs, el zorro del arranque- sigan',
+    '   cuadrando exactas. */',
+    '@media (max-width: 700px) {',
+    '  #salida { white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:hidden; }',
+    '  .mini img, .mini video { max-width:100%; }',
+    '  /* EL CARTEL DEL ARRANQUE NO CABE, Y PARTIDO ES PEOR QUE NADA.',
+    '     El zorro y las letras de bloque miden 95 columnas. En un movil se parten',
+    '     por la mitad y quedan doce renglones de simbolos rotos ocupando la',
+    '     pantalla entera antes de la primera palabra util. Se esconden y arriba',
+    '     queda el zorro de la cabecera, que ya dice lo mismo. */',
+    '  .fila.arte { display:none; }',
+    '}',
     '#salida .fila { min-height:1.5em; }',
+    '/* LO QUE MANDAS TU, SEPARADO DE LO QUE CONTESTA EL.',
+    '   En un movil la conversacion es una columna estrecha de texto igual, y sin',
+    '   esto no se ve donde empieza cada turno: hay que leer para encontrarse. */',
+    '#salida .fila.mio { background:#22222a; border-left:3px solid var(--zorro);',
+    '  border-radius:6px; padding:6px 10px; margin:8px 0 4px; color:#fff; font-weight:600; }',
     'form { display:flex; gap:8px; background:var(--caja); border-top:1px solid var(--borde);',
     '  padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }',
     'textarea { flex:1; resize:none; min-height:44px; max-height:40dvh; padding:10px; border-radius:10px;',
@@ -81,13 +142,17 @@ const PAGINA = [
     '</style>',
     '</head>',
     '<body>',
-    '<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>',
+    `<header><img class="mascota" src="data:image/png;base64,${MASCOTA_PNG_BASE64}" alt="" width="28" height="26"><b>Chocolatito</b><span class="sub">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>',
@@ -96,10 +161,30 @@ const PAGINA = [
     '</div></div>',
     '<script>',
     '(function () {',
-    '  var token = new URLSearchParams(location.search).get("t") || "";',
-    '  // Se quita de la barra de direcciones en cuanto se lee: el token no tiene',
-    '  // por que quedarse en el historial del navegador ni salir en una captura.',
-    '  if (token && history.replaceState) history.replaceState(null, "", location.pathname);',
+    '  // EL TOKEN TIENE QUE SOBREVIVIR A UNA RECARGA',
+    '  //',
+    '  // Se quitaba de la barra de direcciones en cuanto se leia -no tiene por que',
+    '  // quedarse en el historial ni salir en una captura- y ahi estaba el fallo:',
+    '  // al recargar, la URL ya no lo traia y la sesion se quedaba muda. En un PC',
+    '  // casi no pasa; en un MOVIL pasa todo el rato, porque recargar es el gesto',
+    '  // de tirar hacia abajo y porque Android descarta la pestana en cuanto te',
+    '  // vas a otra aplicacion... que es justo lo que hay que hacer para probar',
+    '  // las notificaciones. En la primera prueba con un telefono de verdad salio',
+    '  // trece veces seguidas el aviso de conexion rechazada.',
+    '  //',
+    '  // sessionStorage es el sitio exacto: vive lo que vive la pestana -sobrevive',
+    '  // a recargas y a que el sistema la descarte- y se va al cerrarla. No queda',
+    '  // en el historial ni lo hereda otra pestana.',
+    '  var CLAVE = "chocolatito.token";',
+    '  var enLaUrl = new URLSearchParams(location.search).get("t") || "";',
+    '  var token = enLaUrl;',
+    '  try {',
+    '    if (enLaUrl) sessionStorage.setItem(CLAVE, enLaUrl);',
+    '    else token = sessionStorage.getItem(CLAVE) || "";',
+    '  } catch (e) {',
+    '    // Navegador con el almacenamiento capado: se sigue con lo que traiga la URL.',
+    '  }',
+    '  if (enLaUrl && history.replaceState) history.replaceState(null, "", location.pathname);',
     '  var salida = document.getElementById("salida");',
     '  var punto = document.getElementById("punto");',
     '  var estadoTexto = document.getElementById("estadoTexto");',
@@ -144,6 +229,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();',
@@ -151,14 +332,76 @@ const PAGINA = [
     '    for (var i = 0; i < lineas.length; i++) {',
     '      var div = document.createElement("div");',
     '      div.className = "fila";',
+    '      // Sin los codigos de color no queda mas que el texto, que es lo que hay',
+    '      // que mirar para saber de quien es la linea.',
+    'var pelado = String(lineas[i].texto).replace(/\\x1b\\[[0-9;?]*[A-Za-z]/g, "");',
+    '      // Lo que mandaste tu: el eco que escribe el agente empieza por >.',
+    '      if (/^\\s*>\\s/.test(pelado)) div.className += " mio";',
+    '      // Y el cartel del arranque: solo el usa caracteres de bloque.',
+    '      else if (/[\\u2580-\\u259f]/.test(pelado)) div.className += " arte";',
     '      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 +414,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 +464,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 +478,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,17 @@ export interface OpcionesServidor {
     enRed?: boolean;
     /** Para pruebas: token fijo en vez de uno aleatorio. */
     token?: string;
+    /**
+     * Un nombre de dominio mas que se acepta como Host, para entrar por un tunel
+     * (cloudflared, ngrok). Uno concreto, no cualquiera.
+     */
+    anfitrionAutorizado?: 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;
@@ -52,9 +63,72 @@ export interface ServidorWeb {
  * Host valido: localhost o una IP literal. Ver el punto 2 de la cabecera.
  * Se le quita el puerto y los corchetes de IPv6 antes de mirarlo.
  */
-export declare function anfitrionAceptable(host: string | undefined): boolean;
+/**
+ * Host valido: localhost, una IP literal, o EL NOMBRE QUE SE HAYA AUTORIZADO.
+ *
+ * Lo tercero existe por un caso real: el README dice desde el primer dia que
+ * para entrar desde fuera de casa se use Tailscale o cloudflared... y con
+ * cloudflared esto devolvia 401. Tailscale funciona porque reparte IPs, que
+ * pasan la comprobacion; un tunel llega siempre con un nombre de dominio.
+ * O sea que el programa prometia algo que el mismo rechazaba.
+ *
+ * Se arregla SIN quitar la cerradura. No es "acepta cualquier dominio": es
+ * "acepta exactamente este, el que me acabas de decir". Contra el DNS rebinding
+ * -una web cualquiera que apunta su dominio a tu 127.0.0.1 y usa el navegador de
+ * la victima de puente- la defensa sigue entera, porque ese ataque llega con el
+ * dominio del atacante y no con el que tu autorizaste.
+ */
+export declare function anfitrionAceptable(host: string | undefined, autorizado?: string): boolean;
+/**
+ * De lo que pegue el usuario, saca el nombre.
+ *
+ * Nadie copia "abc-def.trycloudflare.com": se copia el enlace entero con su
+ * https:// delante, y a veces con la barra final. Exigir el nombre pelado seria
+ * un 401 que nadie sabria explicar.
+ */
+export declare function nombreDeAnfitrion(entrada: string | undefined): string;
 /** Origin, si viene, tiene que ser el mismo sitio. Ver el punto 3. */
-export declare function origenAceptable(origin: string | undefined, host: string | undefined): boolean;
+/**
+ * Origin, si viene, tiene que ser el mismo sitio. Ver el punto 3.
+ *
+ * CON UN TUNEL DELANTE, "EL MISMO SITIO" NO ES EL MISMO TEXTO
+ *
+ * Se vio en la primera prueba de verdad desde un movil con datos: la pagina
+ * cargaba y el WebSocket rebotaba con 401. El motivo es que cloudflared
+ * REESCRIBE la cabecera Host con la del destino -127.0.0.1:4700-, mientras que
+ * el navegador manda el Origin que el ve, que es el del tunel. Comparados a
+ * pelo no coinciden nunca, asi que la sesion se quedaba muda: el usuario
+ * escribia y no pasaba nada.
+ *
+ * Por eso el dominio autorizado vale tambien como Origin. Y sigue siendo una
+ * cerradura: se acepta EXACTAMENTE ese, el que se escribio en --tunel.
+ */
+export declare function origenAceptable(origin: string | undefined, host: string | undefined, autorizado?: string): boolean;
+/**
+ * EL TOKEN TIENE QUE SOBREVIVIR A UNA RECARGA, Y LA URL NO LO HACE
+ *
+ * DE DONDE SALE: primera prueba con un movil de verdad. El enlace se abre bien,
+ * la pagina quita el token de la barra de direcciones -para que no se quede en
+ * el historial ni salga en una captura- y a la primera recarga se acabo la
+ * sesion: la peticion de la propia pagina ya no lleva token, el servidor
+ * contesta 401 "No." y ahi no hay javascript que valga, porque la pagina ni
+ * llega a cargarse. En el terminal salieron trece rechazos seguidos.
+ *
+ * Y en un movil recargar no es raro: es tirar hacia abajo sin querer, y sobre
+ * todo es lo que hace Android solo cuando la pestana se queda de fondo. O sea,
+ * exactamente lo que hay que hacer para probar las notificaciones.
+ *
+ * Se arregla como se arregla en cualquier sitio: al entrar con el token bueno se
+ * deja una cookie, y a partir de ahi el navegador la manda sola en todo -la
+ * pagina, el socket, las imagenes-.
+ *
+ *  - SameSite=Strict: una web ajena no puede hacer que tu navegador la mande.
+ *    Es la misma defensa que el Origin, por otro camino.
+ *  - HttpOnly: no la lee ningun javascript, ni el nuestro.
+ *  - Sin Max-Age: se muere al cerrar el navegador, como la sesion.
+ */
+export declare const COOKIE_DE_SESION = "chocolatito_web";
+export declare function tokenDeLaCookie(cabecera: string | undefined): string;
 export declare function tokenDeLaPeticion(url: string | undefined): string;
 export declare function iniciarServidorWeb(opciones?: OpcionesServidor): Promise<ServidorWeb>;
 /** Las IP de la maquina en la red local, para abrirla desde el movil. */