@danieltmn/openbridge 0.3.0 → 0.5.0

package/src/web/assets/app.js

@@ -1,8 +1,26 @@
 "use strict";
 
+// Migracion de claves viejas `ocx_*` a `ob_*` (una sola vez, antes de leer nada).
+(function () {
+    try {
+        var keys = [];
+        for (var i = 0; i < localStorage.length; i++) {
+            var k = localStorage.key(i);
+            if (k && k.indexOf('ocx_') === 0) keys.push(k);
+        }
+        for (var j = 0; j < keys.length; j++) {
+            var nk = 'ob_' + keys[j].slice(4);
+            if (localStorage.getItem(nk) === null) localStorage.setItem(nk, localStorage.getItem(keys[j]));
+            localStorage.removeItem(keys[j]);
+        }
+    } catch (e) { /* almacenamiento no disponible */ }
+})();
+
 var CFG = window.APP_CONFIG || {};
 var CSRF = CFG.csrf || '';
 var INITIAL_SESSION = typeof CFG.initialSession === 'number' ? CFG.initialSession : null;
+var IS_ADMIN = String(CFG.userRole || 'user') === 'admin';
+function isAdmin() { return IS_ADMIN; }
 
 var els = {
     body: document.body,
@@ -48,6 +66,7 @@ var els = {
     skinPanel: document.getElementById('skinPanel'),
     viewProcs: document.getElementById('viewProcs'),
     viewChanges: document.getElementById('viewChanges'),
+    viewMcp: document.getElementById('viewMcp'),
     themeColor: document.getElementById('themeColor'),
     themeLink: document.getElementById('themeStylesheet'),
     statusbar: document.getElementById('statusbar'),
@@ -87,6 +106,12 @@ var els = {
     btnCancel: document.getElementById('btnCancel'),
 };
 
+// Marca visual del usuario actual (admin en color de acento).
+(function () {
+    var ub = document.getElementById('userBadge');
+    if (ub) ub.classList.toggle('admin', IS_ADMIN);
+})();
+
 var ONLINE_MAX_AGE_MS = 60000;
 var PROC_TIMEOUT_MS = 45000;
 var POLL_BASE_MS = 4000;   // refresco pasivo (sin nada pendiente)
@@ -96,6 +121,7 @@ var CMDS = [
     { cmd: '/compact', desc: 'Liberar contexto' },
     { cmd: '/models', desc: 'Proveedores y búsqueda de modelos' },
     { cmd: '/agents', desc: 'Listar agentes disponibles' },
+    { cmd: '/mcp', desc: 'Servidores MCP de opencode' },
     { cmd: '/folders', desc: 'Carpetas del workspace' },
     { cmd: '/workspace', desc: 'Mostrar el espacio de trabajo' },
     { cmd: '/status', desc: 'Estado del puente' },
@@ -159,7 +185,7 @@ var state = {
 
 // Puente activo y lista conocida se restauran antes de pintar (caché local).
 state.activeBridge = loadStoredBridge();
-var _cachedBridges = lsGet('ocx_bridges');
+var _cachedBridges = lsGet('ob_bridges');
 if (Array.isArray(_cachedBridges) && _cachedBridges.length) state.bridges = _cachedBridges;
 
 // Estado del panel "procesos" de la sesión activa (dev servers en la PC).
@@ -263,8 +289,8 @@ function applyTheme(slug, opts) {
     } catch (e) {}
     if (!opts || opts.persist !== false) {
         try {
-            document.cookie = 'ocx_theme=' + encodeURIComponent(s) + ';path=/;max-age=' + (60 * 60 * 24 * 365) + ';SameSite=Lax';
-            localStorage.setItem('ocx_theme', s);
+            document.cookie = 'ob_theme=' + encodeURIComponent(s) + ';path=/;max-age=' + (60 * 60 * 24 * 365) + ';SameSite=Lax';
+            localStorage.setItem('ob_theme', s);
         } catch (e) {}
     }
     renderSkinPanel();
@@ -321,16 +347,16 @@ function activeBridgeInfo() { return bridgeInfo(activeBridgeId()); }
 // El catálogo/estado se guardan por puente activo (cada PC tiene el suyo).
 function catalogKey() {
     var id = activeBridgeId();
-    return id ? 'ocx_catalog_' + id : 'ocx_catalog';
+    return id ? 'ob_catalog_' + id : 'ob_catalog';
 }
 function catalogVerKey() {
     return catalogKey() + '_ver';
 }
 function loadStoredBridge() {
-    try { return localStorage.getItem('ocx_bridge') || ''; } catch (e) { return ''; }
+    try { return localStorage.getItem('ob_bridge') || ''; } catch (e) { return ''; }
 }
 function storeBridge(id) {
-    try { localStorage.setItem('ocx_bridge', id || ''); } catch (e) {}
+    try { localStorage.setItem('ob_bridge', id || ''); } catch (e) {}
 }
 
 // Sesiones visibles: solo las del puente activo cuando hay varios puentes.
@@ -377,7 +403,7 @@ function renderBridgeBar() {
 // applyBootPayload / switchActiveBridge para no mezclar catálogos).
 function applyBridges(list) {
     state.bridges = Array.isArray(list) ? list : [];
-    try { localStorage.setItem('ocx_bridges', JSON.stringify(state.bridges)); } catch (e) {}
+    try { localStorage.setItem('ob_bridges', JSON.stringify(state.bridges)); } catch (e) {}
     renderBridgeBar();
 }
 
@@ -438,7 +464,7 @@ function applyBootPayload(data) {
         state.catalog.last_online_ts = data.online_ts;
     }
     var sessions = data.sessions || [];
-    lsSet('ocx_sessions', sessions);
+    lsSet('ob_sessions', sessions);
     renderHome(sessions);
     applyOnlineUI();
 }
@@ -710,13 +736,13 @@ function projectLabel(folderPath) {
 function loadOpenProjects() {
     if (state.openProjects) return state.openProjects;
     var stored = null;
-    try { stored = JSON.parse(localStorage.getItem('ocx_openProjects') || 'null'); } catch (e) {}
+    try { stored = JSON.parse(localStorage.getItem('ob_openProjects') || 'null'); } catch (e) {}
     state.openProjects = (stored && typeof stored === 'object') ? stored : null;
     return state.openProjects;
 }
 
 function saveOpenProjects() {
-    try { localStorage.setItem('ocx_openProjects', JSON.stringify(state.openProjects || {})); } catch (e) {}
+    try { localStorage.setItem('ob_openProjects', JSON.stringify(state.openProjects || {})); } catch (e) {}
 }
 
 function isProjectOpen(folderPath, sessions) {
@@ -984,6 +1010,7 @@ function showView(name) {
     els.viewPreview.style.display = 'none';
     els.viewProcs.style.display = 'none';
     els.viewChanges.style.display = 'none';
+    els.viewMcp.style.display = 'none';
 
     if (name !== 'procs') stopProcView();
 
@@ -1056,6 +1083,12 @@ function showView(name) {
         els.sendForm.style.display = 'none';
         els.btnCmds.style.display = 'none';
         renderChangesView();
+    } else if (name === 'mcp') {
+        els.viewMcp.style.display = '';
+        els.btnBack.style.display = 'none';
+        els.sendForm.style.display = 'none';
+        els.btnCmds.style.display = 'none';
+        renderMcpView();
     }
 
     if (els.fabNew) els.fabNew.classList.toggle('show', name === 'home');
@@ -1123,21 +1156,21 @@ if (composeCloseEl) composeCloseEl.addEventListener('click', composeCloseSheet);
 // Sidebar: logo → inicio, ajuste de ancho y ocultar (desktop) / cerrar drawer (móvil)
 // ---------------------------------------------------------------------------
 function sbHidden() {
-    try { return localStorage.getItem('ocx_sbHidden') === '1'; } catch (e) { return false; }
+    try { return localStorage.getItem('ob_sbHidden') === '1'; } catch (e) { return false; }
 }
 function setSbHidden(hidden) {
-    try { localStorage.setItem('ocx_sbHidden', hidden ? '1' : '0'); } catch (e) {}
+    try { localStorage.setItem('ob_sbHidden', hidden ? '1' : '0'); } catch (e) {}
     document.body.classList.toggle('sb-hide', hidden);
 }
 function sbWidth() {
     try {
-        var w = parseInt(localStorage.getItem('ocx_sbW'), 10);
+        var w = parseInt(localStorage.getItem('ob_sbW'), 10);
         if (w >= 200 && w <= 480) return w;
     } catch (e) {}
     return 264;
 }
 function setSbWidth(w) {
-    try { localStorage.setItem('ocx_sbW', String(w)); } catch (e) {}
+    try { localStorage.setItem('ob_sbW', String(w)); } catch (e) {}
     document.documentElement.style.setProperty('--sb-w', w + 'px');
 }
 
@@ -1264,7 +1297,7 @@ function renderHome(sessions) {
                     + '<div class="cmeta">' + busy + esc(s.model || 'sin modelo') + ' · ' + esc(s.agent || 'build') + '</div>'
                     + (s.preview ? '<div class="cpreview">' + prev + '</div>' : '')
                     + '</div>'
-                    + '<button type="button" class="kebab" aria-label="Opciones" title="Opciones">⋮</button>'
+                    + (isAdmin() ? '<button type="button" class="kebab" aria-label="Opciones" title="Opciones">⋮</button>' : '')
                     + '</div>';
             }
             html += '</div>';
@@ -1313,7 +1346,7 @@ function renderHome(sessions) {
 async function loadSessions() {
     var data = await api('api.php?action=sessions');
     if (data.ok) {
-        lsSet('ocx_sessions', data.sessions || []);
+        lsSet('ob_sessions', data.sessions || []);
         renderHome(data.sessions || []);
     } else if (!state.sessions.length) {
         els.home.innerHTML = '<div class="empty">Sin conexión</div>';
@@ -1643,13 +1676,13 @@ function onMsgScroll() {
 // reemplaza solo ese nodo; lo demás no se toca.
 function msgSig(m) {
     return (m.status || '') + '|' + (m.text || '').length + '|' + (m.reasoning || '').length
-        + '|' + (m.canceled ? 1 : 0) + '|' + (m.agent || '') + '|' + (m.img ? m.img.length : 0);
+        + '|' + (m.canceled ? 1 : 0) + '|' + (m.agent || '') + '|' + (m.author || '') + '|' + (m.img ? m.img.length : 0);
 }
 
 function msgNodeHtml(m, chatQuery) {
     var cls = m.role === 'user' ? 'mine' : 'theirs';
     if (m.status === 'canceled') cls += ' canceled';
-    var who = m.role === 'user' ? '❯ vos' : '● Agente';
+    var who = m.role === 'user' ? '❯ ' + esc(m.author || '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>' : '';
@@ -2999,6 +3032,36 @@ function renderChangesView() {
     loadChanges(folder);
 }
 
+// ---------------------------------------------------------------------------
+// Vista MCP: estado de los servidores MCP de opencode (opencode mcp list).
+// ---------------------------------------------------------------------------
+function renderMcpView() {
+    els.hTitle.textContent = 'mcp';
+    els.hSub.textContent = 'servidores MCP de opencode';
+    if (!state.online) {
+        els.viewMcp.innerHTML = '<div class="placeholder">El puente está apagado. Iniciá “OpenBridge” en tu PC.</div>';
+        return;
+    }
+    els.viewMcp.innerHTML = '<div class="view-head"><h2>servidores MCP</h2>'
+        + '<div class="view-sub">opencode mcp list</div></div>'
+        + '<div class="placeholder">consultando opencode…</div>';
+    loadMcp();
+}
+
+async function loadMcp() {
+    var res = await ocCommand('mcp_list', [], 15, 700);
+    if (!els.viewMcp) return;
+    var head = '<div class="view-head"><h2>servidores MCP</h2>'
+        + '<div class="view-sub">opencode mcp list</div></div>';
+    if (!res.ok) {
+        els.viewMcp.innerHTML = head + '<div class="placeholder">' + esc(res.error || 'no se pudo consultar') + '</div>';
+        return;
+    }
+    var output = (res.data && res.data.output) || '';
+    els.viewMcp.innerHTML = head + '<pre class="codeblock">'
+        + esc(output || 'No hay servidores MCP configurados.') + '</pre>';
+}
+
 function chgStatusClass(st) {
     if (st === '??' || st === 'A') return 'add';
     if (st.indexOf('D') >= 0) return 'del';
@@ -3046,7 +3109,7 @@ async function loadChanges(folder) {
     }
     var list = '<div class="chg-files">';
     for (var i = 0; i < files.length; i++) {
-        var rev = files[i].status !== '??'
+        var rev = (isAdmin() && 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>'
@@ -3054,7 +3117,7 @@ async function loadChanges(folder) {
     }
     list += '</div>';
     var tracked = files.some(function (f) { return f.status !== '??'; });
-    var toolbar = tracked
+    var toolbar = (isAdmin() && 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>';
@@ -3075,6 +3138,7 @@ async function loadChanges(folder) {
 // Sirve para un archivo puntual (boton de la fila) o para todos.
 if (els.viewChanges) {
     els.viewChanges.addEventListener('click', function (e) {
+        if (!isAdmin()) return;
         var folder = changesFolder();
         if (!folder) return;
         var one = e.target.closest('.chg-rev');
@@ -3393,25 +3457,30 @@ function validPort(p) {
 
 function renderPreviewView() {
     if (!state.previewPort) {
-        try { state.previewPort = localStorage.getItem('ocx_lastPort') || ''; } catch (e) {}
+        try { state.previewPort = localStorage.getItem('ob_lastPort') || ''; } catch (e) {}
     }
     els.viewPreview.innerHTML = '<div class="view-head"><h2>vista previa</h2>'
         + '<div class="view-sub">túneles del proyecto (TunnelMole, corren en tu PC)</div></div>'
-        + '<div class="tunnel-form">'
-        + '<input type="text" id="tunnelPort" inputmode="numeric" placeholder="puerto (ej: 8080)" value="' + esc(state.previewPort) + '" autocomplete="off">'
-        + '<button type="button" class="linkbtn" id="tunnelStart">abrir túnel</button>'
-        + '</div>'
+        + (isAdmin()
+            ? '<div class="tunnel-form">'
+                + '<input type="text" id="tunnelPort" inputmode="numeric" placeholder="puerto (ej: 8080)" value="' + esc(state.previewPort) + '" autocomplete="off">'
+                + '<button type="button" class="linkbtn" id="tunnelStart">abrir túnel</button>'
+                + '</div>'
+            : '')
         + '<div class="tnote-sec" style="margin:0 0 12px">los túneles son públicos en internet y viven mientras el puente esté corriendo · cerrálos al terminar</div>'
         + '<div id="tunnelList"></div>';
     var portInput = document.getElementById('tunnelPort');
-    portInput.addEventListener('input', function () {
-        state.previewPort = portInput.value.replace(/[^0-9]/g, '');
-        portInput.value = state.previewPort;
-    });
-    portInput.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter') { e.preventDefault(); startTunnel(); }
-    });
-    document.getElementById('tunnelStart').addEventListener('click', startTunnel);
+    if (portInput) {
+        portInput.addEventListener('input', function () {
+            state.previewPort = portInput.value.replace(/[^0-9]/g, '');
+            portInput.value = state.previewPort;
+        });
+        portInput.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') { e.preventDefault(); startTunnel(); }
+        });
+        var tunStartBtn = document.getElementById('tunnelStart');
+        if (tunStartBtn) tunStartBtn.addEventListener('click', startTunnel);
+    }
     renderTunnels();
     refreshTunnels();
 }
@@ -3428,7 +3497,8 @@ function renderTunnels(busyMsg) {
             + '<div class="thead"><span class="dot"' + (ready ? '' : ' style="background:var(--muted)"') + '></span>'
             + '<b>puerto ' + esc(t.port) + '</b>'
             + '<span class="tnote">' + (ready ? 'activo' : 'levantando…') + '</span>'
-            + '<button type="button" class="linkbtn" data-tstop="' + esc(t.port) + '">cerrar túnel</button></div>'
+            + (isAdmin() ? '<button type="button" class="linkbtn" data-tstop="' + esc(t.port) + '">cerrar túnel</button>' : '')
+            + '</div>'
             + (t.https ? '<div class="turl"><a href="' + esc(t.https) + '" target="_blank" rel="noopener noreferrer">' + esc(t.https) + '</a>'
                 + '<button type="button" class="copybtn" data-tcopy="' + esc(t.https) + '" title="Copiar URL">⧉</button></div>' : '')
             + (t.http && t.http !== t.https ? '<div class="turl"><a href="' + esc(t.http) + '" target="_blank" rel="noopener noreferrer">' + esc(t.http) + '</a>'
@@ -3459,7 +3529,7 @@ function renderTunnels(busyMsg) {
 async function startTunnel() {
     var port = validPort(state.previewPort);
     if (!port) { toast('escribí un puerto válido (1–65535)', 'error'); return; }
-    try { localStorage.setItem('ocx_lastPort', String(port)); } catch (e) {}
+    try { localStorage.setItem('ob_lastPort', String(port)); } catch (e) {}
     var already = (state.tunnels || []).some(function (t) { return parseInt(t.port, 10) === port && (t.https || t.http); });
     if (already) { toast('ya hay un túnel para el puerto ' + port, 'ok'); return; }
     renderTunnels('levantando túnel para el puerto ' + port + '… (la primera vez puede tardar si descarga tunnelmole)');
@@ -3588,6 +3658,7 @@ function enterProcsView() {
 }
 
 function renderProcView(folder) {
+    var admin = isAdmin();
     els.viewProcs.innerHTML =
         '<div class="pp-head"><b>procesos</b><span class="pp-sub">' + esc(sessionProcLabel(folder)) + '</span>'
         + (state.currentId !== null ? '<button type="button" class="linkbtn pp-back" id="ppBack">← volver al chat</button>' : '')
@@ -3595,35 +3666,42 @@ function renderProcView(folder) {
         + '<div class="pp-status" id="procStatus"></div>'
         + '<div id="ppPortWarn"></div>'
         + '<pre id="procLog"><span class="pl-empty">sin salida todavía</span></pre>'
-        + '<div class="pp-tunnel">'
-        + '<div class="pp-tunhead">compartir por túnel (tunnelmole, corre en tu PC)</div>'
-        + '<div class="pp-tunform"><input type="text" id="ppTunPort" inputmode="numeric" placeholder="puerto (ej: 3000)" autocomplete="off">'
-        + '<button type="button" class="linkbtn" id="ppTunStart">abrir túnel</button></div>'
-        + '<div id="ppTunList"></div>'
-        + '</div>'
-        + '<div class="pp-chips" id="procChips"></div>'
-        + '<div class="pp-form"><input type="text" id="procCmdInput" placeholder="npm run dev · node server.js …" autocomplete="off">'
-        + '<button type="button" class="linkbtn" id="procStartBtn">iniciar</button></div>';
+        + (admin ? '<div class="pp-tunnel">'
+            + '<div class="pp-tunhead">compartir por túnel (tunnelmole, corre en tu PC)</div>'
+            + '<div class="pp-tunform"><input type="text" id="ppTunPort" inputmode="numeric" placeholder="puerto (ej: 3000)" autocomplete="off">'
+            + '<button type="button" class="linkbtn" id="ppTunStart">abrir túnel</button></div>'
+            + '<div id="ppTunList"></div>'
+            + '</div>' : '')
+        + (admin ? '<div class="pp-chips" id="procChips"></div>' : '')
+        + (admin ? '<div class="pp-form"><input type="text" id="procCmdInput" placeholder="npm run dev · node server.js …" autocomplete="off">'
+            + '<button type="button" class="linkbtn" id="procStartBtn">iniciar</button></div>' : '')
+        + (!admin ? '<div class="placeholder">solo un admin puede iniciar procesos o túneles.</div>' : '');
     var back = document.getElementById('ppBack');
     if (back) back.addEventListener('click', function () { showView('chat'); });
     var inp = document.getElementById('procCmdInput');
-    inp.value = procState.input || '';
-    inp.addEventListener('input', function () { procState.input = inp.value; });
-    inp.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter') { e.preventDefault(); startSessionProc(); }
-    });
-    document.getElementById('procStartBtn').addEventListener('click', startSessionProc);
+    if (inp) {
+        inp.value = procState.input || '';
+        inp.addEventListener('input', function () { procState.input = inp.value; });
+        inp.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') { e.preventDefault(); startSessionProc(); }
+        });
+    }
+    var startBtn = document.getElementById('procStartBtn');
+    if (startBtn) startBtn.addEventListener('click', startSessionProc);
     var tunPort = document.getElementById('ppTunPort');
-    tunPort.value = procState.detectedPort || '';
-    tunPort.addEventListener('input', function () {
-        tunPort.value = tunPort.value.replace(/[^0-9]/g, '');
-        if (tunPort.value) state.previewPort = tunPort.value;
-    });
-    tunPort.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter') { e.preventDefault(); panelStartTunnel(); }
-    });
-    document.getElementById('ppTunStart').addEventListener('click', panelStartTunnel);
-    buildProcChips();
+    if (tunPort) {
+        tunPort.value = procState.detectedPort || '';
+        tunPort.addEventListener('input', function () {
+            tunPort.value = tunPort.value.replace(/[^0-9]/g, '');
+            if (tunPort.value) state.previewPort = tunPort.value;
+        });
+        tunPort.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') { e.preventDefault(); panelStartTunnel(); }
+        });
+    }
+    var tunStart = document.getElementById('ppTunStart');
+    if (tunStart) tunStart.addEventListener('click', panelStartTunnel);
+    if (admin) buildProcChips();
     procLogBox = document.getElementById('procLog');
     renderProcStatus();
     renderPortWarn();
@@ -3908,7 +3986,8 @@ function renderProcTunnels(busyMsg) {
         var ready = !!(t.https || t.http);
         html += '<div class="tunnel"><div class="thead"><span class="dot"' + (ready ? '' : ' style="background:var(--muted)"') + '></span>'
             + '<b>puerto ' + esc(t.port) + '</b><span class="tnote">' + (ready ? 'activo' : 'levantando…') + '</span>'
-            + '<button type="button" class="linkbtn" data-ptstop="' + esc(t.port) + '">cerrar</button></div>'
+            + (isAdmin() ? '<button type="button" class="linkbtn" data-ptstop="' + esc(t.port) + '">cerrar</button>' : '')
+            + '</div>'
             + (t.https ? '<div class="turl"><a href="' + esc(t.https) + '" target="_blank" rel="noopener noreferrer">' + esc(t.https) + '</a>'
                 + '<button type="button" class="copybtn" data-ptcopy="' + esc(t.https) + '" title="Copiar URL">⧉</button></div>' : '')
             + (t.http && t.http !== t.https ? '<div class="turl"><a href="' + esc(t.http) + '" target="_blank" rel="noopener noreferrer">' + esc(t.http) + '</a>'
@@ -3941,7 +4020,7 @@ async function panelStartTunnel() {
     var inp = document.getElementById('ppTunPort');
     var port = validPort(inp ? inp.value : '');
     if (!port) { toast('escribí un puerto válido (1–65535)', 'error'); return; }
-    try { localStorage.setItem('ocx_lastPort', String(port)); } catch (e) {}
+    try { localStorage.setItem('ob_lastPort', String(port)); } catch (e) {}
     var already = (state.tunnels || []).some(function (t) { return parseInt(t.port, 10) === port; });
     if (already) { toast('ya hay un túnel para el puerto ' + port, 'ok'); return; }
     renderProcTunnels('levantando túnel para el puerto ' + port + '… (la primera vez descarga tunnelmole)');
@@ -4115,7 +4194,7 @@ function refreshActiveView(reason) {
 async function boot() {
     var cachedCat = lsGet(catalogKey());
     var cachedVer = lsGet(catalogVerKey());
-    var cachedSessions = lsGet('ocx_sessions');
+    var cachedSessions = lsGet('ob_sessions');
     var painted = false;
     if (cachedCat && typeof cachedCat === 'object') {
         state.catalog = cachedCat;

package/src/web/assets/manifest.webmanifest

@@ -1,6 +1,8 @@
 {
   "name": "OpenBridge",
   "short_name": "OpenBridge",
+  "id": "/",
+  "lang": "es",
   "description": "Chat con tu IA en el PC (opencode)",
   "start_url": "./chat.php",
   "scope": "./",

package/src/web/assets/sw.js

@@ -6,7 +6,7 @@
  */
 'use strict';
 
-const CACHE = 'openbridge-v3';
+const CACHE = 'openbridge-v4';
 
 self.addEventListener('install', () => self.skipWaiting());
 self.addEventListener('activate', (event) => {

package/src/web/routes.js

@@ -18,6 +18,15 @@ const jsonfile = require('../store/jsonfile');
 
 const TEMPLATES = path.join(__dirname, 'templates');
 
+// Hash dummy para igualar el costo de scrypt cuando el usuario no existe (evita
+// filtrar si un nombre esta registrado por diferencias de tiempo).
+const DUMMY_HASH = { algo: 'scrypt', salt: '00000000000000000000000000000000', hash: '00'.repeat(64), keylen: 64 };
+
+// Acciones que solo puede hacer un admin.
+const ADMIN_ONLY_ACTIONS = new Set(['session_delete']);
+// Comandos del puente que mutan algo (procesos, tuneles, revertir).
+const OC_MUTATING = new Set(['proc_start', 'proc_stop', 'tunnel_start', 'tunnel_stop', 'git_checkout']);
+
 async function renderTpl(name, vars) {
     const tpl = await fsp.readFile(path.join(TEMPLATES, name), 'utf8');
     return tpl.replace(/\{\{([A-Z_]+)\}\}/g, (m, k) => (
@@ -28,7 +37,7 @@ async function renderTpl(name, vars) {
 function pickTheme(req, query, known) {
     const cookies = auth.parseCookies(req.headers.cookie);
     const fromUrl = String(query.get('theme') || '').replace(/[^a-z-]/g, '').toLowerCase();
-    const fromCookie = String(cookies['ocx_theme'] || '').replace(/[^a-z-]/g, '').toLowerCase();
+    const fromCookie = String(cookies['ob_theme'] || cookies['ocx_theme'] || '').replace(/[^a-z-]/g, '').toLowerCase();
     if (fromUrl && known.includes(fromUrl)) return fromUrl;
     if (fromCookie && known.includes(fromCookie)) return fromCookie;
     return 'terminal';
@@ -59,6 +68,12 @@ async function loginCsrf(req, res) {
     return csrf;
 }
 
+// Ultimo usuario logueado (para prellenar el campo en el login).
+function lastUser(req) {
+    const cookies = auth.parseCookies(req.headers.cookie);
+    return String(cookies['ob_lastuser'] || '').replace(/[^A-Za-z0-9._-]/g, '').slice(0, 32);
+}
+
 async function handleLoginPage({ app, req, res, query }) {
     if (auth.readSession(app, req)) {
         res.writeHead(302, { Location: 'chat.php' });
@@ -71,6 +86,7 @@ async function handleLoginPage({ app, req, res, query }) {
         THEMES_JSON: JSON.stringify(store.themesIndex()),
         ERROR_BLOCK: '',
         CSRF: csrf,
+        USER_PREFILL: lastUser(req),
     });
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-cache' });
     res.end(html);
@@ -87,25 +103,34 @@ async function handleLogin({ app, req, res, query, form }) {
             THEMES_JSON: JSON.stringify(store.themesIndex()),
             ERROR_BLOCK: '<div class="error">\u26a0 ' + msg.replace(/[<>&]/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' }[c])) + '</div>',
             CSRF: csrf,
+            USER_PREFILL: lastUser(req) || String(form.username || '').replace(/[^A-Za-z0-9._-]/g, '').slice(0, 32),
         });
         res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-cache' });
         res.end(html);
     };
     if (!csrfOk) return renderError('Sesion expirada, recarga la pagina.');
-    const locked = auth.loginLockRemaining(req);
+    const username = String(form.username || '').trim();
+    const locked = auth.loginLockRemaining(req, username);
     if (locked > 0) {
         const mins = Math.max(1, Math.ceil(locked / 60));
         return renderError('Demasiados intentos fallidos. Proba de nuevo en ' + mins + ' min.');
     }
     const password = String(form.password || '');
-    if (config.verifyPassword(password, app.password)) {
-        auth.loginClear(req);
-        auth.startSession(app, req, res, app.username);
+    const user = config.findUser(app, username);
+    const passOk = config.verifyUserPassword(user, password);
+    if (!user) config.verifyPassword(password, DUMMY_HASH); // mismo costo si no existe
+    if (user && !user.disabled && passOk) {
+        auth.loginClear(req, username);
+        auth.startSession(app, req, res, user);
+        const prev = res.getHeader('Set-Cookie');
+        const jar = Array.isArray(prev) ? prev.slice() : (prev ? [prev] : []);
+        jar.push(auth.serializeCookie('ob_lastuser', user.name, req, 60 * 60 * 24 * 365));
+        res.setHeader('Set-Cookie', jar);
         res.writeHead(302, { Location: 'chat.php' });
         return res.end();
     }
-    auth.loginRecordFailure(req);
-    return renderError('Contrasena incorrecta.');
+    auth.loginRecordFailure(req, username);
+    return renderError('Usuario o contrasena incorrectos.');
 }
 
 async function handleChat({ app, req, res, query }) {
@@ -122,6 +147,8 @@ async function handleChat({ app, req, res, query }) {
     const html = await renderTpl('chat.html', {
         THEME: pickTheme(req, query, known),
         CSRF: session.c,
+        USER_NAME: session.name,
+        USER_ROLE: session.role,
         INITIAL_SESSION: initial > 0 ? String(initial) : 'null',
         THEMES_JSON: JSON.stringify(store.themesIndex()),
         SSE_DISABLED: 'false',
@@ -169,6 +196,7 @@ const OC_ALLOWED = {
     session_list: [],
     session_info: ['arg'],
     opencode_version: [],
+    mcp_list: [],
     fs_list: ['path'],
     fs_read: ['path'],
     git_status: ['path'],
@@ -259,8 +287,9 @@ async function handleApi(ctx) {
             return ok({ ok: true, session: await store.getSession(id) });
         }
         case 'session_delete': {
-            if (!auth.requireLogin(app, req, res)) return;
-            if (!auth.requireCsrf(app, req, res)) return;
+            const s = auth.requireCsrf(app, req, res);
+            if (!s) return;
+            if (s.role !== 'admin') return ok({ ok: false, error: 'Permiso insuficiente' }, 403);
             const id = parseInt(body.id, 10) || 0;
             if (id <= 0) return ok({ ok: false, error: 'id invalido' }, 400);
             await store.deleteSession(id);
@@ -339,8 +368,8 @@ async function handleApi(ctx) {
             return ok({ ok: true, cancel: false });
         }
         case 'send': {
-            if (!auth.requireLogin(app, req, res)) return;
-            if (!auth.requireCsrf(app, req, res)) return;
+            const s = auth.requireCsrf(app, req, res);
+            if (!s) return;
             const sid = parseInt(body.session, 10) || 0;
             const sess = sid > 0 ? await store.getSession(sid) : null;
             if (!sess) return ok({ ok: false, error: 'Sesion no encontrada' }, 404);
@@ -352,7 +381,7 @@ async function handleApi(ctx) {
             }
             if (text === '' && img === '') return ok({ ok: false, error: 'Mensaje vacio' }, 400);
             if (Array.from(text).length > 10000) return ok({ ok: false, error: 'Mensaje demasiado largo' }, 400);
-            const extra = { agent: String(sess.agent || 'build') };
+            const extra = { agent: String(sess.agent || 'build'), author: s.name };
             if (img !== '') extra.img = img;
             const id = await store.addMessage(sid, 'user', text, 'pending', extra);
             if (store.sessionHasDefaultName(sess)) {
@@ -652,11 +681,13 @@ async function handleApi(ctx) {
             let aid = null;
             const found = await store.messagesUpdate(sid, (data) => {
                 let msgFound = false;
+                let author = '';
                 for (const msg of data.messages) {
                     if (parseInt(msg.id, 10) === userId) {
                         msg.status = 'done';
                         msg.answered_ts = store.nowIso();
                         delete msg.cancel_requested;
+                        if (typeof msg.author === 'string') author = msg.author;
                         msgFound = true;
                         break;
                     }
@@ -677,6 +708,7 @@ async function handleApi(ctx) {
                     if (reasoning !== '') m.reasoning = reasoning; else delete m.reasoning;
                     if (canceled) m.canceled = true; else delete m.canceled;
                     if (!m.agent) m.agent = store.messageAgentOf(data, userId, (sess && sess.agent) || '');
+                    if (author && !m.author) m.author = author;
                     delete m.draft_for;
                 } else {
                     aid = data.nextId;
@@ -684,6 +716,7 @@ async function handleApi(ctx) {
                     const nm = { id: aid, role: 'assistant', text, ts: store.nowIso(), status: 'done', agent: store.messageAgentOf(data, userId, (sess && sess.agent) || '') };
                     if (reasoning !== '') nm.reasoning = reasoning;
                     if (canceled) nm.canceled = true;
+                    if (author) nm.author = author;
                     data.messages.push(nm);
                 }
             });
@@ -723,13 +756,14 @@ async function handleApi(ctx) {
             return ok({ ok: true, path: rel, size, mtime: Math.floor(st.mtimeMs / 1000), kind: 'text', content });
         }
         case 'run_oc': {
-            if (!auth.requireLogin(app, req, res)) return;
-            if (!auth.requireCsrf(app, req, res)) return;
+            const s = auth.requireCsrf(app, req, res);
+            if (!s) return;
             const bridge = bodyBridge(req, query, body) || await webBridge(req, query);
             const file = paths.bridgeCatalogFile(bridge);
             const cmd = String(body.cmd || '').toLowerCase().replace(/[^a-z_]/g, '');
             const args = Array.isArray(body.args) ? body.args : [];
             if (!Object.prototype.hasOwnProperty.call(OC_ALLOWED, cmd)) return ok({ ok: false, error: 'Comando no permitido' }, 400);
+            if (OC_MUTATING.has(cmd) && s.role !== 'admin') return ok({ ok: false, error: 'Permiso insuficiente' }, 403);
             const spec = OC_ALLOWED[cmd];
             const cleanArgs = [];
             for (let i = 0; i < args.length; i++) {