@danieltmn/openbridge 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -4,6 +4,17 @@ Todos los cambios relevantes de OpenBridge. Formato basado en
 [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/) y
 [Versionado Semantico](https://semver.org/lang/es/).
 
+## [0.2.0] - 2026-09-13
+
+### Cambios
+
+- web: muestra el costo acumulado por sesion y total
+- cli: QR de la URL (init/status/server y comando qr)
+- web: dictado por voz en el compositor (Web Speech API)
+- release: exporta logica de version/changelog y agrega tests
+- release: proceso privado con guard de dueno, semver y dist-tags
+- UI: porcentaje de contexto, boton ver archivos y badge plan; refresco de tokens al responder
+
 ## [0.1.0] - 2026-09-11
 
 Primera version publicada. Paquete npm **`@danieltmn/openbridge`** y repo

package/README.md

@@ -71,6 +71,7 @@ primer plano usá `openbridge server --stream`; para detenerlo, `openbridge stop
 | `openbridge server` | Arranca app + puente + túnel en **segundo plano** y muestra el estado (`--stream` = primer plano) |
 | `openbridge stop` | Detiene el server y su árbol de procesos |
 | `openbridge status` | Estado, URL, puente en línea y chats |
+| `openbridge qr` | Muestra la URL (pública o local) como QR para escanear desde el celular |
 | `openbridge logs` | Logs (`--follow`, `--server`, `--bridge`) |
 | `openbridge bridge` | Corre **solo** el puente (`--api --token --id --name`) |
 | `openbridge import` | Trae `data/` de OpenConex (`<data-dir> [--force]`) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/openbridge",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Tu opencode en el celular, sin hosting: corre la app, el puente y un tunel publico desde tu PC.",
   "type": "commonjs",
   "author": "tamnora",
@@ -43,8 +43,16 @@
   "scripts": {
     "start": "node bin/openbridge.js server",
     "test": "node --test",
+    "release": "node scripts/release.mjs",
+    "release:dry": "node scripts/release.mjs --dry-run",
     "prepublishOnly": "npm test"
   },
+  "release": {
+    "npmOwner": "danieltmn",
+    "gitRemote": "tamnora/openbridge",
+    "gitOwner": "tamnora",
+    "branch": "master"
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/bridge/bridge.js

@@ -2194,6 +2194,14 @@ async function tick(opts) {
             } catch (e) {
                 log('error al publicar la respuesta #' + m.id + ': ' + e.message);
             }
+            // Refresca tokens/costo enseguida: el barrido solo corre cada 15 min.
+            if (r.opencodeSession && m._t) {
+                try {
+                    await refreshTokens(path.resolve(m.session.folder || ''), { id: r.opencodeSession }, m._t);
+                } catch (e) {
+                    log('aviso: no pude refrescar tokens de ' + r.opencodeSession + ': ' + e.message);
+                }
+            }
         }
         for (const f of folders) {
             await handleFolderRequest(f);

package/src/cli.js

@@ -10,6 +10,7 @@ const config = require('./config');
 const store = require('./store');
 const auth = require('./auth');
 const push = require('./push');
+const qr = require('./qr');
 const web = require('./web/server');
 const tunnel = require('./tunnel');
 const log = require('./log');
@@ -117,6 +118,15 @@ function clearRuntime() {
     }
 }
 
+// Muestra la URL como QR en la consola (para abrirla en el celular).
+// Devuelve false si la URL es demasiado larga para el QR.
+function printQr(url) {
+    const art = qr.qrTerminal(url, 2);
+    if (!art) return false;
+    console.log(art);
+    return true;
+}
+
 // Detiene el server en ejecucion (si lo hay) matando server + hijos. Devuelve
 // true si habia uno. Se usa antes de reconfigurar para no dejar un proceso con
 // la config vieja en memoria (p.ej. la contrasena).
@@ -255,6 +265,9 @@ async function cmdInit(argv) {
     console.log('  carpetas  : ' + folders.length + ' en folders.json');
     if (generated) console.log('  -> guarda esta contrasena: no se vuelve a mostrar.');
     console.log('');
+    console.log('  QR local (misma PC):');
+    printQr('http://127.0.0.1:' + port + '/chat.php');
+    console.log('');
     console.log('Siguiente paso:  openbridge server');
     return 0;
 }
@@ -439,6 +452,12 @@ async function printStatus() {
         const sessions = await store.sessionsListFull();
         console.log('  chats  : ' + sessions.length);
     } catch (e) { /* sin datos todavia */ }
+    const target = rt.publicUrl || rt.localUrl;
+    if (target) {
+        console.log('');
+        console.log(rt.publicUrl ? '  escanea para abrir en el celular:' : '  QR local (misma PC):');
+        if (!printQr(target)) console.log('  (URL demasiado larga para el QR; usa el link de arriba)');
+    }
     return true;
 }
 
@@ -447,6 +466,28 @@ async function cmdStatus() {
     return 0;
 }
 
+// Muestra la URL como QR para escanear desde el celular.
+async function cmdQr() {
+    const rt = readRuntime();
+    if (rt && pidAlive(rt.pid) && (rt.publicUrl || rt.localUrl)) {
+        const target = rt.publicUrl || rt.localUrl;
+        console.log((rt.publicUrl ? 'URL publica' : 'URL local') + ': ' + target);
+        console.log('');
+        if (!printQr(target)) { console.log('URL demasiado larga para el QR.'); return 1; }
+        return 0;
+    }
+    if (!paths.exists()) {
+        console.error('No hay configuracion. Corre primero: openbridge init');
+        return 1;
+    }
+    const app = config.readApp();
+    const url = 'http://' + (app.host || '127.0.0.1') + ':' + (app.port || 8799) + '/chat.php';
+    console.log('URL local (el server no esta corriendo): ' + url);
+    console.log('');
+    if (!printQr(url)) { console.log('URL demasiado larga para el QR.'); return 1; }
+    return 0;
+}
+
 async function cmdLogs(argv) {
     const { flags } = parseArgs(argv);
     const n = parseInt(flags.n || '40', 10) || 40;
@@ -743,6 +784,7 @@ function usage() {
     console.log('  passwd    Cambia la contrasena de acceso (--password <clave>)');
     console.log('  stop      Detiene el server en segundo plano');
     console.log('  status    Estado del server, puente y chats');
+    console.log('  qr        Muestra la URL (publica o local) como QR para el celular');
     console.log('  logs      Ultimas lineas de los logs (--follow --server --bridge)');
     console.log('  bridge    Corre solo el puente (--api --token --id --name)');
     console.log('  import    Trae data/ de OpenConex (<data-dir> [--force])');
@@ -773,6 +815,7 @@ async function main(argv) {
         case 'server': case 'start': return cmdServer(args.slice(1));
         case 'stop': return cmdStop();
         case 'status': return cmdStatus();
+        case 'qr': return cmdQr();
         case 'logs': return cmdLogs(args.slice(1));
         case 'bridge': return cmdBridge(args.slice(1));
         case 'import': return cmdImport(args.slice(1));

package/src/qr.js

@@ -0,0 +1,224 @@
+'use strict';
+
+/**
+ * Generador de QR minimo (ISO/IEC 18004, Model 2) sin dependencias.
+ *
+ * Soporta modo byte (UTF-8) con correccion de errores nivel L, versiones 1 a 5
+ * (hasta 106 bytes, de sobra para una URL de tunel) y un solo bloque RS. La
+ * mascara es fija (0): cualquier mascara es valida y la info de formato la
+ * declara, asi que el resultado es escaneable.
+ */
+
+// dataCodewords, eccCodewords y centros de patrones de alineacion por version.
+const VERSIONS = {
+    1: { data: 19, ecc: 7, align: [] },
+    2: { data: 34, ecc: 10, align: [6, 18] },
+    3: { data: 55, ecc: 15, align: [6, 22] },
+    4: { data: 80, ecc: 20, align: [6, 26] },
+    5: { data: 108, ecc: 26, align: [6, 30] },
+};
+
+const MASK = 0;
+const ECC_FORMAT_BITS = 1; // nivel L -> 01
+
+function gfMul(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z & 0xff;
+}
+
+function rsDivisor(degree) {
+    const result = new Array(degree).fill(0);
+    result[degree - 1] = 1;
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < result.length; j++) {
+            result[j] = gfMul(result[j], root);
+            if (j + 1 < result.length) result[j] ^= result[j + 1];
+        }
+        root = gfMul(root, 0x02);
+    }
+    return result;
+}
+
+function rsRemainder(data, divisor) {
+    const result = divisor.map(() => 0);
+    for (const b of data) {
+        const factor = b ^ result.shift();
+        result.push(0);
+        for (let i = 0; i < divisor.length; i++) result[i] ^= gfMul(divisor[i], factor);
+    }
+    return result;
+}
+
+function getBit(x, i) {
+    return ((x >>> i) & 1) !== 0;
+}
+
+function chooseVersion(byteLen) {
+    for (let v = 1; v <= 5; v++) {
+        if (byteLen <= VERSIONS[v].data - 2) return v;
+    }
+    return 0;
+}
+
+function dataCodewords(bytes, version) {
+    const cap = VERSIONS[version].data;
+    const bits = [];
+    const push = (val, len) => { for (let i = len - 1; i >= 0; i--) bits.push((val >>> i) & 1); };
+    push(0b0100, 4);            // modo byte
+    push(bytes.length, 8);      // conteo (v1-9: 8 bits)
+    for (const b of bytes) push(b, 8);
+    for (let i = 0; i < 4 && bits.length < cap * 8; i++) bits.push(0);
+    while (bits.length % 8 !== 0) bits.push(0);
+    const out = [];
+    for (let i = 0; i < bits.length; i += 8) {
+        let b = 0;
+        for (let j = 0; j < 8; j++) b = (b << 1) | bits[i + j];
+        out.push(b);
+    }
+    const pad = [0xec, 0x11];
+    let k = 0;
+    while (out.length < cap) out.push(pad[k++ % 2]);
+    return out;
+}
+
+function buildMatrix(version, codewords) {
+    const size = version * 4 + 17;
+    const modules = Array.from({ length: size }, () => new Array(size).fill(false));
+    const isFn = Array.from({ length: size }, () => new Array(size).fill(false));
+    const set = (x, y, dark) => { modules[y][x] = dark; isFn[y][x] = true; };
+
+    // Patrones de sincronizacion.
+    for (let i = 0; i < size; i++) {
+        set(6, i, i % 2 === 0);
+        set(i, 6, i % 2 === 0);
+    }
+
+    // Localizadores (finder) + separadores.
+    const drawFinder = (cx, cy) => {
+        for (let dy = -4; dy <= 4; dy++) {
+            for (let dx = -4; dx <= 4; dx++) {
+                const x = cx + dx, y = cy + dy;
+                if (x < 0 || x >= size || y < 0 || y >= size) continue;
+                const dist = Math.max(Math.abs(dx), Math.abs(dy));
+                set(x, y, dist !== 2 && dist !== 4);
+            }
+        }
+    };
+    drawFinder(3, 3);
+    drawFinder(size - 4, 3);
+    drawFinder(3, size - 4);
+
+    // Patrones de alineacion.
+    const pos = VERSIONS[version].align;
+    for (const cy of pos) {
+        for (const cx of pos) {
+            if ((cx === 6 && cy === 6) || (cx === 6 && cy === size - 7) || (cx === size - 7 && cy === 6)) continue;
+            for (let dy = -2; dy <= 2; dy++) {
+                for (let dx = -2; dx <= 2; dx++) {
+                    set(cx + dx, cy + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+                }
+            }
+        }
+    }
+
+    // Reserva la info de formato (se reescribe abajo) y el modulo oscuro.
+    drawFormatBits(size, modules, isFn, 0);
+
+    // Colocacion de datos en zigzag.
+    let i = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6) right = 5;
+        for (let vert = 0; vert < size; vert++) {
+            for (let j = 0; j < 2; j++) {
+                const x = right - j;
+                const upward = ((right + 1) & 2) === 0;
+                const y = upward ? size - 1 - vert : vert;
+                if (isFn[y][x] || i >= codewords.length * 8) continue;
+                modules[y][x] = getBit(codewords[i >>> 3], 7 - (i & 7));
+                i++;
+            }
+        }
+    }
+
+    // Mascara fija.
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            if (!isFn[y][x] && (x + y) % 2 === 0) modules[y][x] = !modules[y][x];
+        }
+    }
+
+    drawFormatBits(size, modules, isFn, MASK);
+    return { size, modules };
+}
+
+function drawFormatBits(size, modules, isFn, mask) {
+    const data = (ECC_FORMAT_BITS << 3) | mask;
+    let rem = data;
+    for (let i = 0; i < 10; i++) rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+    const bits = ((data << 10) | rem) ^ 0x5412;
+    const put = (x, y, dark) => { modules[y][x] = dark; isFn[y][x] = true; };
+
+    for (let i = 0; i <= 5; i++) put(8, i, getBit(bits, i));
+    put(8, 7, getBit(bits, 6));
+    put(8, 8, getBit(bits, 7));
+    put(7, 8, getBit(bits, 8));
+    for (let i = 9; i < 15; i++) put(14 - i, 8, getBit(bits, i));
+
+    for (let i = 0; i < 8; i++) put(size - 1 - i, 8, getBit(bits, i));
+    for (let i = 8; i < 15; i++) put(8, size - 15 + i, getBit(bits, i));
+    put(8, size - 8, true);
+}
+
+// Devuelve { size, modules } o null si el texto no entra (URL muy larga).
+function qrMatrix(text) {
+    const bytes = Buffer.from(String(text), 'utf8');
+    const version = chooseVersion(bytes.length);
+    if (!version) return null;
+    const data = dataCodewords(bytes, version);
+    const ecc = rsRemainder(data, rsDivisor(VERSIONS[version].ecc));
+    return buildMatrix(version, data.concat(ecc));
+}
+
+// QR para terminal con medios bloques (cuadrado en consolas 1:2).
+function qrTerminal(text, quiet) {
+    const qr = qrMatrix(text);
+    if (!qr) return '';
+    const q = quiet === undefined ? 2 : quiet;
+    const size = qr.size;
+    const at = (x, y) => (x >= 0 && x < size && y >= 0 && y < size) && qr.modules[y][x];
+    const lines = [];
+    for (let y = -q; y < size + q; y += 2) {
+        let line = '';
+        for (let x = -q; x < size + q; x++) {
+            const top = at(x, y), bot = at(x, y + 1);
+            line += top && bot ? '\u2588' : top ? '\u2580' : bot ? '\u2584' : ' ';
+        }
+        lines.push(line);
+    }
+    return lines.join('\n');
+}
+
+// QR como SVG (para la web o para guardar).
+function qrSvg(text, quiet) {
+    const qr = qrMatrix(text);
+    if (!qr) return '';
+    const q = quiet === undefined ? 4 : quiet;
+    const size = qr.size;
+    let path = '';
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            if (qr.modules[y][x]) path += 'M' + (x + q) + ' ' + (y + q) + 'h1v1h-1z';
+        }
+    }
+    const total = size + q * 2;
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + total + ' ' + total
+        + '" shape-rendering="crispEdges"><rect width="' + total + '" height="' + total
+        + '" fill="#fff"/><path d="' + path + '" fill="#000"/></svg>';
+}
+
+module.exports = { qrMatrix, qrTerminal, qrSvg };

package/src/web/assets/app.js

@@ -27,6 +27,7 @@ var els = {
     input: document.getElementById('input'),
     sendBtn: document.getElementById('sendBtn'),
     btnImg: document.getElementById('btnImg'),
+    btnMic: document.getElementById('btnMic'),
     imgInput: document.getElementById('imgInput'),
     imgPreview: document.getElementById('imgPreview'),
     imgThumb: document.getElementById('imgThumb'),
@@ -220,8 +221,17 @@ function updateStatusbar() {
     if (state.currentId !== null && state.currentSession) {
         extra = '· ' + extra;
         var tokTxt = sessionTokensLabel(state.currentSession);
-        if (tokTxt) extra += ' · ' + tokTxt + ' tok';
+        if (tokTxt) {
+            var pct = sessionTokensPct(state.currentSession);
+            extra += ' · ' + tokTxt + ' tokens' + (pct ? ' (' + pct + ')' : '');
+        }
+        var cost = fmtCost(state.currentSession.cost);
+        if (cost) extra += ' · ' + cost;
     }
+    var totalCost = 0;
+    for (var ci = 0; ci < state.sessions.length; ci++) totalCost += Number(state.sessions[ci].cost) || 0;
+    var totalTxt = fmtCost(totalCost);
+    if (totalTxt) extra += ' · ' + totalTxt + ' total';
     els.sbExtra.textContent = extra;
 }
 
@@ -761,6 +771,14 @@ function fmtTokens(n) {
     return String(n);
 }
 
+// Costo acumulado (USD) con precision segun magnitud ('' si no hay dato).
+function fmtCost(n) {
+    var v = Number(n) || 0;
+    if (v <= 0) return '';
+    var s = v >= 1 ? v.toFixed(2) : (v >= 0.01 ? v.toFixed(3) : v.toFixed(4));
+    return '$' + s.replace('.', ',');
+}
+
 // Ventana de contexto del modelo segun el catalogo (0 si no se conoce).
 function modelContext(model) {
     var c = state.catalog || {};
@@ -779,7 +797,16 @@ function sessionTokensLabel(s) {
 function sessionTokensTitle(s) {
     var tok = Math.round(Number(s.tokens) || 0);
     var ctx = modelContext(s.model);
-    return tok + ' tokens' + (ctx ? ' de ' + ctx + ' de contexto' : '');
+    var cost = fmtCost(s.cost);
+    return tok + ' tokens' + (ctx ? ' de ' + ctx + ' de contexto' : '') + (cost ? ' · ' + cost + ' acumulado' : '');
+}
+
+// Porcentaje de contexto consumido ('' si no hay datos).
+function sessionTokensPct(s) {
+    var tok = Math.round(Number(s.tokens) || 0);
+    var ctx = modelContext(s.model);
+    if (!tok || !ctx) return '';
+    return Math.min(100, Math.round((tok / ctx) * 100)) + '%';
 }
 
 // Etiqueta "consumidos / capacidad" de la sesion.
@@ -789,11 +816,23 @@ function sessionTokensHtml(s) {
     return '<span class="stok" title="' + sessionTokensTitle(s) + '">' + label + '</span>';
 }
 
-// Subtitulo del encabezado: proyecto · modelo · agente · tokens/contexto.
+// Costo acumulado de la sesion ('' si no hay dato).
+function sessionCostHtml(s) {
+    var cost = fmtCost(s.cost);
+    if (!cost) return '';
+    return '<span class="scost" title="' + sessionTokensTitle(s) + '">' + cost + '</span>';
+}
+
+// Subtitulo del encabezado: proyecto · modelo · agente · tokens/contexto · costo.
 function sessionSubtitle(s) {
     var txt = projectLabel(s.folder) + ' · ' + (s.model || 'sin modelo') + ' · ' + (s.agent || 'build');
     var label = sessionTokensLabel(s);
-    if (label) txt += ' · ' + label + ' tok';
+    if (label) {
+        var pct = sessionTokensPct(s);
+        txt += ' · ' + label + ' tokens' + (pct ? ' (' + pct + ')' : '');
+    }
+    var cost = fmtCost(s.cost);
+    if (cost) txt += ' · ' + cost;
     return txt;
 }
 
@@ -818,6 +857,7 @@ function sessionItemHtml(s, withFolder) {
         + (withFolder ? '<span class="sfolder">' + esc(projectLabel(s.folder)) + '</span>' : '')
         + pen
         + sessionTokensHtml(s)
+        + sessionCostHtml(s)
         + '<span class="stime">' + esc(timeShort(s.last_ts)) + '</span>'
         + '</button>';
 }
@@ -1057,6 +1097,7 @@ function composeOpenSheet() {
 }
 function composeCloseSheet() {
     if (!els.sendForm) return;
+    voiceStop();
     els.sendForm.classList.remove('open');
     document.body.classList.remove('compose-open');
     if (els.imgPreview && els.imgPreview.parentNode === els.sendForm && els.composeOpen) {
@@ -1216,9 +1257,12 @@ function renderHome(sessions) {
                     + '</div>';
             }
             html += '</div>';
-            html += '<button type="button" class="histbtn" data-folder="' + esc(key) + '">'
+            html += '<div class="histrow">'
+                + '<button type="button" class="histbtn" data-folder="' + esc(key) + '">'
                 + (hidden > 0 ? 'ver historial · ' + hidden + ' más' : 'ver historial')
-                + '</button>';
+                + '</button>'
+                + '<button type="button" class="histbtn filesbtn" data-folder="' + esc(key) + '" title="Archivos del proyecto">ver archivos</button>'
+                + '</div>';
             html += '</div></div>';
         }
     }
@@ -1594,7 +1638,8 @@ function msgSig(m) {
 function msgNodeHtml(m, chatQuery) {
     var cls = m.role === 'user' ? 'mine' : 'theirs';
     if (m.status === 'canceled') cls += ' canceled';
-    var who = m.role === 'user' ? '❯ vos' : '● agent';
+    var who = m.role === 'user' ? '❯ vos' : '● Agente';
+    if (m.agent === 'plan') cls += ' plan';
     var agentBadge = m.agent ? ' <span class="abadge ' + esc(m.agent) + '">' + esc(m.agent) + '</span>' : '';
     var stopBadge = m.canceled ? ' <span class="stopbadge">⏹ detenido</span>' : '';
     var streaming = m.role === 'assistant' && m.status === 'streaming';
@@ -1855,6 +1900,19 @@ function focusProject(folder) {
     }
 }
 
+// Convierte la carpeta absoluta de un proyecto en ruta relativa al workspace
+// (para la vista de archivos). '' si no se puede derivar (usa la raiz).
+function folderToFilesPath(folder) {
+    var ws = state.catalog && state.catalog.workspace ? state.catalog.workspace : '';
+    if (!folder || !ws) return '';
+    var norm = function (p) { return String(p).replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase(); };
+    var nws = norm(ws), nf = norm(folder);
+    if (nf === nws || nf.indexOf(nws + '/') !== 0) return '';
+    var raw = String(folder).replace(/\\/g, '/').replace(/\/+$/, '');
+    var rawWs = String(ws).replace(/\\/g, '/').replace(/\/+$/, '');
+    return raw.slice(rawWs.length + 1);
+}
+
 // Historial de un proyecto: vista aparte con buscador dentro del proyecto.
 function openHistory(folder) {
     state.histFolder = folder;
@@ -2364,6 +2422,69 @@ if (els.btnImg) {
     els.imgRemove.addEventListener('click', function () { setPendingImage(null); });
 }
 
+// ---------------------------------------------------------------------------
+// Dictado por voz (Web Speech API nativa del navegador; sin dependencias).
+// ---------------------------------------------------------------------------
+var SpeechRec = window.SpeechRecognition || window.webkitSpeechRecognition;
+var voice = { rec: null, listening: false, base: '' };
+
+function voiceSetListening(on) {
+    voice.listening = on;
+    if (!els.btnMic) return;
+    els.btnMic.classList.toggle('listening', on);
+    els.btnMic.title = on ? 'Detener dictado' : 'Dictar por voz';
+    els.btnMic.setAttribute('aria-label', on ? 'Detener dictado' : 'Dictar por voz');
+}
+
+function voiceStop() {
+    if (voice.rec && voice.listening) {
+        try { voice.rec.stop(); } catch (e) {}
+    }
+    voiceSetListening(false);
+}
+
+function voiceStart() {
+    if (!voice.rec || state.currentId === null) return;
+    voice.base = els.input.value ? els.input.value.replace(/\s+$/, ' ') : '';
+    try { voice.rec.start(); } catch (e) { /* ya estaba iniciado */ }
+    voiceSetListening(true);
+    toast('dictado activo · hablá ahora', 'ok');
+}
+
+if (els.btnMic) {
+    if (!SpeechRec) {
+        els.btnMic.style.display = 'none';
+    } else {
+        voice.rec = new SpeechRec();
+        voice.rec.lang = navigator.language || 'es-AR';
+        voice.rec.continuous = true;
+        voice.rec.interimResults = true;
+        voice.rec.onresult = function (ev) {
+            var fin = '', interim = '';
+            for (var i = ev.resultIndex; i < ev.results.length; i++) {
+                var r = ev.results[i];
+                if (r.isFinal) fin += r[0].transcript;
+                else interim += r[0].transcript;
+            }
+            if (fin) voice.base = (voice.base + fin).replace(/\s+/g, ' ');
+            var tail = interim ? (voice.base ? ' ' : '') + interim : '';
+            els.input.value = (voice.base + tail).replace(/^\s+/, '');
+            autoGrow();
+        };
+        voice.rec.onerror = function (ev) {
+            voiceSetListening(false);
+            var m = (ev && ev.error) || '';
+            if (m === 'not-allowed' || m === 'service-not-allowed') toast('permiso de micrófono denegado', 'error');
+            else if (m !== 'aborted' && m !== 'no-speech') toast('dictado: ' + m, 'error');
+        };
+        voice.rec.onend = function () { voiceSetListening(false); };
+        els.btnMic.addEventListener('click', function () {
+            if (voice.listening) voiceStop();
+            else voiceStart();
+        });
+    }
+}
+
 // ---------------------------------------------------------------------------
 // Composer: textarea multilínea (Enter envía, Shift+Enter salta de línea)
 // y menú de comandos "/" con filtro, flechas y Enter.
@@ -2472,6 +2593,7 @@ els.sendForm.addEventListener('submit', async function (ev) {
     var text = els.input.value.trim();
     if ((!text && !state.pendingImage) || state.isSending) return;
     state.isSending = true;
+    voiceStop();
     try {
         var body = { session: state.currentId, text: text };
         if (state.pendingImage) body.image = state.pendingImage;
@@ -2644,9 +2766,17 @@ els.home.addEventListener('click', function (e) {
         return;
     }
     var hist = e.target.closest('.histbtn');
-    if (hist) {
+    if (hist && !e.target.closest('.filesbtn')) {
         e.stopPropagation();
         openHistory(hist.getAttribute('data-folder'));
+        return;
+    }
+    var fbtn = e.target.closest('.filesbtn');
+    if (fbtn) {
+        e.stopPropagation();
+        state.filesPath = folderToFilesPath(fbtn.getAttribute('data-folder'));
+        delete state.filesCache[state.filesPath];
+        showView('files');
     }
 });
 

package/src/web/templates/chat.html

@@ -69,6 +69,7 @@
             z-index: 30;
         }
         #sidebar .brand {
+            min-height: 54px;
             padding: 12px 14px 10px;
             display: flex;
             align-items: center;
@@ -233,6 +234,7 @@
         .sitem .sname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .78; }
         .sitem.active .sname { opacity: 1; }
         .sitem .stok { font-size: 10.5px; color: var(--muted); flex-shrink: 0; }
+        .sitem .scost { font-size: 10.5px; color: var(--warn-text, #d29922); flex-shrink: 0; }
         .sitem .stime { font-size: 11px; color: var(--muted); flex-shrink: 0; }
         .sitem .spen { width: 6px; height: 6px; border-radius: 50%; background: var(--mine); flex-shrink: 0; }
         .sdot {
@@ -495,8 +497,9 @@
         .projsec .pshead .pscount { font-size: 11px; color: var(--muted); flex-shrink: 0; }
         .projsec .pbody { display: none; }
         .projsec.open .pbody { display: block; }
+        .histrow { display: flex; gap: 6px; margin-top: 6px; }
         .histbtn {
-            width: 100%; margin-top: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px;
+            flex: 1; min-width: 0; padding: 8px; border: 1px dashed var(--border); border-radius: 8px;
             background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
         }
         .histbtn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@@ -598,6 +601,8 @@
         .msg.mine .who { color: var(--mine); }
         .msg.theirs { border-left-color: var(--accent); }
         .msg.theirs .who { color: var(--accent); }
+        .msg.theirs.plan { border-left-color: var(--warn-text, #d29922); }
+        .msg.theirs.plan .who { color: var(--warn-text, #d29922); }
         .msg.error { border-left-color: var(--danger); }
         /* Aire extra en el cambio de turno: lo tuyo ↔ lo que responde el agente */
         .msg.mine + .msg.theirs,
@@ -778,6 +783,14 @@
         }
         form.sendbar .imgbtn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
         form.sendbar .imgbtn svg { flex-shrink: 0; display: block; }
+        form.sendbar .imgbtn.listening {
+            color: var(--danger); border-color: var(--danger); background: transparent;
+            animation: micpulse 1.1s ease-in-out infinite;
+        }
+        @keyframes micpulse {
+            0%, 100% { box-shadow: 0 0 0 0 transparent; }
+            50% { box-shadow: 0 0 0 4px var(--accent-soft); }
+        }
         /* ----- Botón que abre la hoja de escritura (móvil) ----- */
         .composeopen {
             display: none; align-items: center; gap: 10px; width: 100%;
@@ -1209,6 +1222,7 @@
                 <span class="prompt">❯</span>
                 <textarea id="input" rows="1" placeholder="escribí un mensaje…" autocomplete="off"></textarea>
                 <button type="button" class="imgbtn" id="btnImg" title="Adjuntar imagen (modelos con visión)" aria-label="Adjuntar imagen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg></button>
+                <button type="button" class="imgbtn" id="btnMic" title="Dictar por voz" aria-label="Dictar por voz"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"/></svg></button>
                 <input type="file" id="imgInput" accept="image/png,image/jpeg,image/webp,image/gif" style="display:none">
                 <button type="submit" id="sendBtn">enviar</button>
                 <div id="slashPanel" class="slash-panel"></div>