@danieltmn/openbridge 0.1.0 → 0.3.0

package/src/web/assets/app.js

@@ -27,6 +27,9 @@ var els = {
     input: document.getElementById('input'),
     sendBtn: document.getElementById('sendBtn'),
     btnImg: document.getElementById('btnImg'),
+    btnMic: document.getElementById('btnMic'),
+    btnTpl: document.getElementById('btnTpl'),
+    tplPanel: document.getElementById('tplPanel'),
     imgInput: document.getElementById('imgInput'),
     imgPreview: document.getElementById('imgPreview'),
     imgThumb: document.getElementById('imgThumb'),
@@ -44,6 +47,7 @@ var els = {
     btnSkin: document.getElementById('btnSkin'),
     skinPanel: document.getElementById('skinPanel'),
     viewProcs: document.getElementById('viewProcs'),
+    viewChanges: document.getElementById('viewChanges'),
     themeColor: document.getElementById('themeColor'),
     themeLink: document.getElementById('themeStylesheet'),
     statusbar: document.getElementById('statusbar'),
@@ -220,8 +224,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 +774,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 +800,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 +819,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 +860,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>';
 }
@@ -940,6 +983,7 @@ function showView(name) {
     els.viewHistory.style.display = 'none';
     els.viewPreview.style.display = 'none';
     els.viewProcs.style.display = 'none';
+    els.viewChanges.style.display = 'none';
 
     if (name !== 'procs') stopProcView();
 
@@ -1006,6 +1050,12 @@ function showView(name) {
         var pf = sessionProcFolder();
         els.hSub.textContent = pf ? projectLabel(pf) : 'de la sesión abierta';
         enterProcsView();
+    } else if (name === 'changes') {
+        els.viewChanges.style.display = '';
+        els.btnBack.style.display = 'none';
+        els.sendForm.style.display = 'none';
+        els.btnCmds.style.display = 'none';
+        renderChangesView();
     }
 
     if (els.fabNew) els.fabNew.classList.toggle('show', name === 'home');
@@ -1057,6 +1107,8 @@ function composeOpenSheet() {
 }
 function composeCloseSheet() {
     if (!els.sendForm) return;
+    voiceStop();
+    tplClose();
     els.sendForm.classList.remove('open');
     document.body.classList.remove('compose-open');
     if (els.imgPreview && els.imgPreview.parentNode === els.sendForm && els.composeOpen) {
@@ -1216,9 +1268,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 +1649,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 +1911,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 +2433,148 @@ 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();
+        });
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Plantillas de prompts (atajos guardados en el navegador).
+// ---------------------------------------------------------------------------
+var TPL_KEY = 'ob_tpl';
+
+function tplLoad() {
+    try {
+        var a = JSON.parse(localStorage.getItem(TPL_KEY) || '[]');
+        if (!Array.isArray(a)) return [];
+        return a.filter(function (x) { return typeof x === 'string' && x.trim() !== ''; }).slice(0, 30);
+    } catch (e) { return []; }
+}
+function tplStore(list) {
+    try { localStorage.setItem(TPL_KEY, JSON.stringify(list)); } catch (e) {}
+}
+function tplClose() {
+    if (els.tplPanel) els.tplPanel.style.display = 'none';
+}
+function tplRender() {
+    var list = tplLoad();
+    var html = '';
+    for (var i = 0; i < list.length; i++) {
+        html += '<div class="tpl-row" data-tpl="' + i + '"><span class="tpl-text">' + esc(list[i]) + '</span>'
+            + '<button type="button" class="tpl-del" data-del="' + i + '" title="Borrar plantilla" aria-label="Borrar plantilla">✕</button></div>';
+    }
+    if (!list.length) html += '<div class="tpl-empty">No hay plantillas. Escribí un prompt y tocá “guardar lo escrito”.</div>';
+    html += '<button type="button" class="tpl-save" id="tplSave">＋ guardar lo escrito</button>';
+    els.tplPanel.innerHTML = html;
+}
+function tplOpen() {
+    closeSlash();
+    tplRender();
+    els.tplPanel.style.display = 'block';
+}
+function tplInsert(text) {
+    var cur = els.input.value;
+    els.input.value = cur && cur.trim() !== '' ? (cur.replace(/\s+$/, '') + ' ' + text) : text;
+    tplClose();
+    autoGrow();
+    els.input.focus();
+    try { els.input.setSelectionRange(els.input.value.length, els.input.value.length); } catch (e) {}
+}
+function tplSaveCurrent() {
+    var text = els.input.value.trim();
+    if (!text) { toast('escribí un prompt primero', 'error'); return; }
+    var list = tplLoad();
+    if (list.indexOf(text) >= 0) { toast('esa plantilla ya existe', 'ok'); return; }
+    list.unshift(text);
+    tplStore(list.slice(0, 30));
+    toast('plantilla guardada', 'ok');
+    tplRender();
+}
+
+if (els.btnTpl && els.tplPanel) {
+    els.btnTpl.addEventListener('click', function () {
+        if (state.currentId === null) return;
+        if (els.tplPanel.style.display === 'block') tplClose();
+        else tplOpen();
+    });
+    els.tplPanel.addEventListener('click', function (e) {
+        var del = e.target.closest('.tpl-del');
+        if (del) {
+            e.stopPropagation();
+            var list = tplLoad();
+            list.splice(parseInt(del.getAttribute('data-del'), 10), 1);
+            tplStore(list);
+            tplRender();
+            return;
+        }
+        if (e.target.closest('.tpl-save')) { tplSaveCurrent(); return; }
+        var row = e.target.closest('.tpl-row');
+        if (row) {
+            var list2 = tplLoad();
+            var t = list2[parseInt(row.getAttribute('data-tpl'), 10)];
+            if (typeof t === 'string') tplInsert(t);
+        }
+    });
+}
+
 // ---------------------------------------------------------------------------
 // Composer: textarea multilínea (Enter envía, Shift+Enter salta de línea)
 // y menú de comandos "/" con filtro, flechas y Enter.
@@ -2411,6 +2622,7 @@ els.input.addEventListener('input', function () {
     autoGrow();
     var v = els.input.value;
     if (state.view === 'chat' && v.charAt(0) === '/') {
+        tplClose();
         slash.items = slashFilter(v);
         slash.sel = 0;
         renderSlash();
@@ -2443,7 +2655,8 @@ els.input.addEventListener('keydown', function (e) {
         }
         if (e.key === 'Escape') {
             e.stopPropagation();
-            closeSlash();
+            if (els.tplPanel && els.tplPanel.style.display === 'block') tplClose();
+            else closeSlash();
             return;
         }
     }
@@ -2472,6 +2685,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;
@@ -2480,6 +2694,7 @@ els.sendForm.addEventListener('submit', async function (ev) {
             els.input.value = '';
             autoGrow();
             closeSlash();
+            tplClose();
             setPendingImage(null);
             await loadHistory(state.currentId, true);
         } else {
@@ -2644,9 +2859,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');
     }
 });
 
@@ -2751,6 +2974,132 @@ function filesJoin(name) {
     return state.filesPath ? state.filesPath + '/' + name : name;
 }
 
+// ---------------------------------------------------------------------------
+// Cambios del proyecto (git status/diff) vía la cola del puente.
+// ---------------------------------------------------------------------------
+function changesFolder() {
+    return (state.currentSession && state.currentSession.folder) || '';
+}
+
+function renderChangesView() {
+    els.hTitle.textContent = 'cambios';
+    var folder = changesFolder();
+    els.hSub.textContent = folder ? projectLabel(folder) : 'de la sesión abierta';
+    if (!folder) {
+        els.viewChanges.innerHTML = '<div class="placeholder">Abrí un chat para ver los cambios de su proyecto.</div>';
+        return;
+    }
+    if (!state.online) {
+        els.viewChanges.innerHTML = '<div class="placeholder">El puente está apagado. Iniciá “OpenBridge” en tu PC.</div>';
+        return;
+    }
+    els.viewChanges.innerHTML = '<div class="view-head"><h2>cambios sin commitear</h2>'
+        + '<div class="view-sub">' + esc(projectLabel(folder)) + '</div></div>'
+        + '<div class="placeholder">consultando git…</div>';
+    loadChanges(folder);
+}
+
+function chgStatusClass(st) {
+    if (st === '??' || st === 'A') return 'add';
+    if (st.indexOf('D') >= 0) return 'del';
+    if (st.indexOf('M') >= 0 || st.indexOf('R') >= 0) return 'mod';
+    return '';
+}
+
+function renderDiff(text) {
+    var max = 200000;
+    var trunc = false;
+    if (text.length > max) { text = text.slice(0, max); trunc = true; }
+    var lines = text.split('\n');
+    var html = '';
+    for (var i = 0; i < lines.length; i++) {
+        var l = lines[i];
+        var cls = 'diff-line';
+        if (l.charAt(0) === '+') cls += ' add';
+        else if (l.charAt(0) === '-') cls += ' del';
+        else if (l.indexOf('@@') === 0) cls += ' hunk';
+        else if (l.indexOf('diff --git') === 0 || l.indexOf('index ') === 0 || l.indexOf('--- ') === 0 || l.indexOf('+++ ') === 0) cls += ' head';
+        html += '<div class="' + cls + '">' + esc(l || ' ') + '</div>';
+    }
+    if (trunc) html += '<div class="diff-line head">… (diff recortado)</div>';
+    return '<div class="diff">' + html + '</div>';
+}
+
+function changesHead(folder, branch) {
+    return '<div class="view-head"><h2>cambios sin commitear</h2><div class="view-sub">'
+        + esc(projectLabel(folder)) + (branch ? ' · ' + esc(branch) : '') + '</div></div>';
+}
+
+async function loadChanges(folder) {
+    var st = await ocCommand('git_status', [folder], 15, 500);
+    if (!st.ok) {
+        els.viewChanges.innerHTML = changesHead(folder, '')
+            + '<div class="placeholder">' + esc(st.error || 'no se pudo consultar git') + '</div>';
+        return;
+    }
+    var status = st.data || {};
+    var files = status.files || [];
+    if (!files.length) {
+        els.viewChanges.innerHTML = changesHead(folder, status.branch)
+            + '<div class="placeholder">Sin cambios: el árbol está limpio.</div>';
+        return;
+    }
+    var list = '<div class="chg-files">';
+    for (var i = 0; i < files.length; i++) {
+        var rev = files[i].status !== '??'
+            ? '<button type="button" class="chg-rev" data-path="' + esc(files[i].path) + '" title="Revertir este archivo" aria-label="Revertir este archivo">↩</button>'
+            : '';
+        list += '<div class="chg-row"><span class="chg-st ' + chgStatusClass(files[i].status) + '">' + esc(files[i].status) + '</span>'
+            + '<span class="chg-path">' + esc(files[i].path) + '</span>' + rev + '</div>';
+    }
+    list += '</div>';
+    var tracked = files.some(function (f) { return f.status !== '??'; });
+    var toolbar = tracked
+        ? '<div class="files-toolbar"><button type="button" class="linkbtn" id="chgRevert">↩ revertir cambios rastreados</button></div>'
+        : '';
+    els.viewChanges.innerHTML = changesHead(folder, status.branch) + toolbar + list + '<div class="placeholder">cargando diff…</div>';
+
+    var diff = await ocCommand('git_diff', [folder], 20, 700);
+    var diffHtml;
+    if (diff.ok) {
+        var text = (diff.data && diff.data.diff) || '';
+        diffHtml = text ? renderDiff(text) : '<div class="placeholder">Hay archivos nuevos o renombrados sin diff de contenido.</div>';
+    } else {
+        diffHtml = '<div class="placeholder">' + esc(diff.error || 'no se pudo obtener el diff') + '</div>';
+    }
+    els.viewChanges.innerHTML = changesHead(folder, status.branch) + toolbar + list + diffHtml;
+}
+
+// Revertir cambios rastreados (con confirmacion): borra las modificaciones que
+// el agente u otros hicieron en archivos ya versionados. No toca los nuevos.
+// Sirve para un archivo puntual (boton de la fila) o para todos.
+if (els.viewChanges) {
+    els.viewChanges.addEventListener('click', function (e) {
+        var folder = changesFolder();
+        if (!folder) return;
+        var one = e.target.closest('.chg-rev');
+        if (one) {
+            var rel = one.getAttribute('data-path');
+            if (!window.confirm('¿Revertir “' + rel + '”?\n\nNo se puede deshacer.')) return;
+            one.disabled = true;
+            ocCommand('git_checkout', [folder, rel], 15, 500).then(function (r) {
+                toast(r.ok ? 'revertido: ' + rel : (r.error || 'no se pudo revertir'), r.ok ? 'ok' : 'error');
+                renderChangesView();
+            });
+            return;
+        }
+        var all = e.target.closest('#chgRevert');
+        if (!all) return;
+        if (!window.confirm('¿Revertir TODOS los cambios de archivos rastreados en “' + projectLabel(folder) + '”?\n\nNo se puede deshacer. Los archivos nuevos sin seguimiento no se tocan.')) return;
+        all.disabled = true;
+        all.textContent = 'revirtiendo…';
+        ocCommand('git_checkout', [folder], 15, 500).then(function (r) {
+            toast(r.ok ? 'cambios revertidos' : (r.error || 'no se pudo revertir'), r.ok ? 'ok' : 'error');
+            renderChangesView();
+        });
+    });
+}
+
 function renderFilesView() {
     state.fileView = null;
     var ws = (state.catalog && state.catalog.workspace) || (state.filesWorkspace || '');

package/src/web/routes.js

@@ -171,6 +171,9 @@ const OC_ALLOWED = {
     opencode_version: [],
     fs_list: ['path'],
     fs_read: ['path'],
+    git_status: ['path'],
+    git_diff: ['path'],
+    git_checkout: ['path', 'path'],
     tunnel_start: ['arg'],
     tunnel_stop: ['arg'],
     tunnel_list: [],

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,
@@ -763,6 +768,17 @@
         .slash-panel .item.sel, .slash-panel .item:hover { background: var(--accent-soft); }
         .slash-panel .item b { color: var(--mine); font-weight: 600; }
         .slash-panel .item span { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
+        .tpl-panel .tpl-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
+        .tpl-panel .tpl-row:hover { background: var(--accent-soft); }
+        .tpl-panel .tpl-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .tpl-panel .tpl-del { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
+        .tpl-panel .tpl-del:hover { color: var(--danger); }
+        .tpl-panel .tpl-empty { color: var(--muted); font-size: 12px; padding: 8px 10px; line-height: 1.4; }
+        .tpl-panel .tpl-save {
+            display: block; width: 100%; margin-top: 6px; padding: 8px; border: 1px dashed var(--border);
+            border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer;
+        }
+        .tpl-panel .tpl-save:hover { color: var(--accent); border-color: var(--accent); }
         form.sendbar button {
             padding: 9px 16px; border: 1px solid var(--mine); border-radius: 8px; background: transparent; color: var(--mine);
             font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
@@ -778,6 +794,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%;
@@ -945,6 +969,33 @@
             color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center;
         }
 
+        /* ----- Cambios (git) ----- */
+        .chg-files { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 0 0 14px; }
+        .chg-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; align-items: center; }
+        .chg-row:last-child { border-bottom: 0; }
+        .chg-rev {
+            background: transparent; border: 1px solid var(--border); color: var(--muted);
+            border-radius: 6px; width: 26px; height: 24px; line-height: 1; cursor: pointer; font: inherit; font-size: 12px;
+        }
+        .chg-rev:hover { color: var(--danger); border-color: var(--danger); }
+        .chg-rev:disabled { opacity: .4; cursor: not-allowed; }
+        .chg-st { font-weight: 700; text-align: center; font-size: 11px; color: var(--muted); }
+        .chg-st.mod { color: var(--warn-text, #d29922); }
+        .chg-st.add { color: var(--accent); }
+        .chg-st.del { color: var(--danger); }
+        .chg-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .diff {
+            background: var(--code-bg, var(--bg)); border: 1px solid var(--border);
+            border-radius: 8px; overflow: auto; padding: 10px 0; margin: 0 0 20px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+            font-size: 12px; line-height: 1.5;
+        }
+        .diff-line { white-space: pre; padding: 0 12px; }
+        .diff-line.add { background: rgba(63, 185, 80, .12); color: #3fb950; }
+        .diff-line.del { background: rgba(248, 81, 73, .12); color: #f85149; }
+        .diff-line.hunk { color: var(--accent); }
+        .diff-line.head { color: var(--muted); }
+
         .view-head { margin-bottom: 12px; }
         .view-head h2 { margin: 0 0 4px; font-size: 16px; }
         .view-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -1146,6 +1197,7 @@
             <button data-view="search" type="button" title="Buscar">buscar</button>
             <button data-view="preview" type="button" title="Vista previa del proyecto (túnel)">preview</button>
             <button data-view="procs" type="button" title="Procesos de la sesión">procs</button>
+            <button data-view="changes" type="button" title="Cambios del proyecto (git)">cambios</button>
         </div>
         <div class="footer">
             <div class="row" id="bridgeStatusRow">
@@ -1208,10 +1260,13 @@
                 </div>
                 <span class="prompt">❯</span>
                 <textarea id="input" rows="1" placeholder="escribí un mensaje…" autocomplete="off"></textarea>
+                <button type="button" class="imgbtn" id="btnTpl" title="Plantillas de prompts" aria-label="Plantillas de prompts"><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="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/></svg></button>
                 <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>
+                <div id="tplPanel" class="slash-panel tpl-panel"></div>
             </form>
         </div>
 
@@ -1221,6 +1276,7 @@
         <div id="viewHistory" class="view" style="display:none"></div>
         <div id="viewPreview" class="view" style="display:none"></div>
         <div id="viewProcs" class="view" style="display:none"></div>
+        <div id="viewChanges" class="view" style="display:none"></div>
 
         <footer id="statusbar">
             <span class="dot" id="sbDot"></span>