@danieltmn/openbridge 0.5.2 → 0.6.1

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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.6.1] - 2026-09-14
+
+### Agregado
+
+- `openbridge bridge --background` (segundo plano; sobrevive al cierre de la
+  consola), `--stop` y `--status`. `openbridge pair`/`join` aceptan `--background`.
+
+### Corregido
+
+- `autostart` corre solo el puente cuando la PC pertenece a un hub remoto
+  (`join`/`pair`), en vez del server local.
+
+## [0.6.0] - 2026-09-14
+
+### Agregado
+
+- **Hub PHP** para correr la app en un hosting (cPanel) con URL fija, sin tunel
+  (`php/app` + `scripts/build-php-hub.mjs`; comparte el frontend con el hub Node).
+  Auth multiusuario con scrypt compatible con Node (usa `sodium`; si falta, scrypt
+  puro en PHP), roles, cookie de sesion firmada, rate limit y CSP.
+- **Emparejamiento por codigo** (`openbridge pair <url>`): la PC muestra un codigo,
+  el usuario lo ingresa en la web (Dispositivos) y la PC recibe su **token propio**
+  y revocable. Cada usuario ve solo sus PCs; el admin, todas.
+- Comando `openbridge pair` y vista **Dispositivos** en la web (solo en el hub PHP,
+  gateada por `features.pairing`).
+- `docs/DEPLOY-PHP.md`: guia de despliegue del hub PHP.
+
 ## [0.5.2] - 2026-09-14
 
 ### Corregido

package/README.md

@@ -89,8 +89,9 @@ iniciar sesión** una vez; los chats, carpetas, túnel y push se conservan.
 | `openbridge qr` | Muestra la URL (pública o local) como QR para escanear desde el celular |
 | `openbridge tunnel` | Muestra o cambia el proveedor de túnel y su dominio fijo (`--domain`) |
 | `openbridge logs` | Logs (`--follow`, `--server`, `--bridge`) |
-| `openbridge bridge` | Corre **solo** el puente (`--api --token --id --name`) |
-| `openbridge join` | Vincula esta PC como puente de un hub (`<url> --token --id --name`) |
+| `openbridge bridge` | Corre **solo** el puente (`--background` = segundo plano, `--stop`, `--status`) |
+| `openbridge join` | Vincula esta PC como puente de un hub (`<url> --token --id --name [--background]`) |
+| `openbridge pair` | Empareja esta PC con un **hub PHP** por código (`<url> [--id --name] [--background]`) |
 | `openbridge import` | Trae `data/` de OpenConex (`<data-dir> [--force]`) |
 | `openbridge reset` | Borra chats/datos (`--session <id>`, `--yes`) |
 | `openbridge autostart` | Arranque automático (`install`/`remove`) |
@@ -144,6 +145,32 @@ Ejemplo concreto:
 El puente remoto solo necesita salida a internet hacia el hub; no abre puertos ni
 túnel propio. Para que arranque solo en cada PC: `openbridge autostart install`.
 
+## Hub en hosting PHP (URL fija, sin túnel)
+
+Además del hub Node, OpenBridge puede correr su hub en un **hosting PHP** (cPanel),
+igual que OpenConex, y dejar que cada PC corra solo el puente:
+
+```
+[Celular] --HTTPS--> openbridge.tamnora.com (hub PHP)  -->  [PC] openbridge pair
+```
+
+- Web siempre arriba, **URL fija** y PWA/Web Push estables; sin túneles ni puertos.
+- Cada PC se vincula con un **código**: en la PC `openbridge pair <url>` muestra un
+  código y en la web lo ingresás en **Dispositivos -> Agregar PC**. Cada PC queda
+  con su **token propio** (revocable); cada usuario ve solo sus PCs (el admin, todas).
+- El frontend es el mismo del hub Node (se copia, no se duplica).
+
+Guía completa (requisitos, build, subida y emparejamiento): [`docs/DEPLOY-PHP.md`](docs/DEPLOY-PHP.md).
+
+La PC corre el puente; para que siga tras cerrar la consola:
+
+```bash
+openbridge bridge --background     # arranca en segundo plano
+openbridge bridge --status         # ¿corre?
+openbridge bridge --stop           # detener
+openbridge autostart install       # arranca solo al iniciar sesión
+```
+
 ## Túnel y URL estable
 
 Proveedores (`--tunnel` o `openbridge tunnel <prov>`): `tunnelmole` (gratis, sin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/openbridge",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "Tu opencode en el celular, sin hosting: corre la app, el puente y un tunel publico desde tu PC.",
   "type": "commonjs",
   "author": "tamnora",

package/src/cli.js

@@ -682,12 +682,46 @@ async function cmdLogs(argv) {
 // ---------------------------------------------------------------------------
 // bridge (solo el puente, para modo hub remoto)
 // ---------------------------------------------------------------------------
+function bridgePid() {
+    try {
+        return parseInt(fs.readFileSync(paths.bridgeLockPath(), 'utf8'), 10) || 0;
+    } catch (e) {
+        return 0;
+    }
+}
+
 async function cmdBridge(argv) {
     const { flags } = parseArgs(argv);
     if (!fs.existsSync(paths.configPath())) {
-        console.error('No hay configuracion de puente en ' + paths.home() + '. Corre primero: openbridge join <url> o openbridge init');
+        console.error('No hay configuracion de puente en ' + paths.home() + '. Corre primero: openbridge join <url> o openbridge pair <url>');
         return 1;
     }
+
+    if (flags.stop) {
+        const pid = bridgePid();
+        if (!pid || !pidAlive(pid)) {
+            try { fs.unlinkSync(paths.bridgeLockPath()); } catch (e) { /* nada */ }
+            console.log('El puente no esta corriendo.');
+            return 0;
+        }
+        killPid(pid);
+        try { fs.unlinkSync(paths.bridgeLockPath()); } catch (e) { /* nada */ }
+        console.log('Puente detenido (pid ' + pid + ').');
+        return 0;
+    }
+
+    const cfg = config.readBridge();
+    if (flags.status) {
+        const pid = bridgePid();
+        const live = pid && pidAlive(pid);
+        console.log('Puente: ' + (live ? 'corriendo (pid ' + pid + ')' : 'detenido'));
+        console.log('  hub    : ' + (cfg.apiUrl || '(sin configurar)'));
+        console.log('  id     : ' + (cfg.bridgeId || '(sin id)'));
+        console.log('  nombre : ' + (cfg.bridgeName || ''));
+        console.log('  log    : ' + paths.bridgeLogPath());
+        return 0;
+    }
+
     // Permite apuntar a otro hub sin editar config.json a mano.
     const env = { ...process.env, OPENBRIDGE_HOME: paths.baseDir() };
     if (flags.api) env.OPENBRIDGE_API_URL = String(flags.api);
@@ -695,6 +729,33 @@ async function cmdBridge(argv) {
     if (flags.id) env.OPENBRIDGE_BRIDGE_ID = String(flags.id);
     if (flags.name) env.OPENBRIDGE_BRIDGE_NAME = String(flags.name);
     const bridgePath = path.join(__dirname, 'bridge', 'bridge.js');
+
+    // Segundo plano: detached + stdio ignorado; sobrevive al cierre de la consola.
+    if (flags.background || flags.bg || flags.detach || flags.d) {
+        const existing = bridgePid();
+        if (existing && pidAlive(existing)) {
+            console.log('El puente ya corre en segundo plano (pid ' + existing + ').');
+            console.log('  estado: openbridge bridge --status   ·   detener: openbridge bridge --stop');
+            return 0;
+        }
+        const child = spawn(process.execPath, [bridgePath], {
+            cwd: paths.home(),
+            env,
+            stdio: 'ignore',
+            windowsHide: true,
+            detached: true,
+        });
+        child.unref();
+        await new Promise((r) => setTimeout(r, 900));
+        const pid = bridgePid() || child.pid;
+        console.log('Puente en segundo plano (pid ' + pid + ').');
+        console.log('  hub    : ' + (cfg.apiUrl || '(sin configurar)'));
+        console.log('  log    : ' + paths.bridgeLogPath());
+        console.log('  estado : openbridge bridge --status');
+        console.log('  detener: openbridge bridge --stop');
+        return 0;
+    }
+
     const child = spawn(process.execPath, [bridgePath], {
         cwd: paths.home(),
         env,
@@ -718,11 +779,16 @@ function hubApiUrl(raw) {
     return u;
 }
 
+// Reenvia `--background` a `openbridge bridge` cuando join/pair lo piden.
+function bridgeStartArgs(flags) {
+    return (flags.background || flags.bg || flags.detach || flags.d) ? ['--background'] : [];
+}
+
 async function cmdJoin(argv) {
     const { flags, _ } = parseArgs(argv);
     const url = String(_[0] || flags.api || '').trim();
     if (!url || !/^https?:\/\//i.test(url)) {
-        console.error('Uso: openbridge join <url-del-hub> [--token <t>] [--id <pc>] [--name "<nombre>"] [--no-start]');
+        console.error('Uso: openbridge join <url-del-hub> [--token <t>] [--id <pc>] [--name "<nombre>"] [--no-start] [--background]');
         console.error('Ej.:  openbridge join https://mi-pc.trycloudflare.com --token <t> --id pc2 --name "PC oficina"');
         console.error('(acepta la base, /chat.php o /api.php; se normaliza a /api.php)');
         return 1;
@@ -747,7 +813,102 @@ async function cmdJoin(argv) {
     }
     console.log('');
     console.log('Arrancando el puente (Ctrl+C para salir)...');
-    return cmdBridge([]);
+    return cmdBridge(bridgeStartArgs(flags));
+}
+
+// ---------------------------------------------------------------------------
+// pair: empareja esta PC con un hub PHP por codigo (device code). La PC pide
+// un codigo, el usuario lo tipea en la web (Dispositivos -> Agregar PC) y la PC
+// recibe su token propio. Necesita un hub PHP (openbridge.tamnora.com).
+// ---------------------------------------------------------------------------
+async function pairApi(apiUrl, action, body) {
+    const res = await fetch(apiUrl + '?action=' + action, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body || {}),
+    });
+    let json = null;
+    try { json = await res.json(); } catch (e) { json = null; }
+    if (!json) throw new Error('respuesta invalida del hub (HTTP ' + res.status + ')');
+    return json;
+}
+
+async function cmdPair(argv) {
+    const { flags, _ } = parseArgs(argv);
+    const url = String(_[0] || flags.hub || flags.api || '').trim();
+    if (!/^https?:\/\//i.test(url)) {
+        console.error('Uso: openbridge pair <url-del-hub> [--id <pc>] [--name "<nombre>"] [--no-start] [--background]');
+        console.error('Ej.:  openbridge pair https://openbridge.tamnora.com --name "PC 1"');
+        return 1;
+    }
+    paths.ensureDirs();
+    const cfg = config.readBridge();
+    const apiUrl = hubApiUrl(url);
+    const bridgeId = sanitizeId(flags.id || cfg.bridgeId || os.hostname());
+    const bridgeName = (typeof flags.name === 'string' && flags.name.trim())
+        ? flags.name.trim().slice(0, 40)
+        : (cfg.bridgeName || bridgeId);
+
+    let start;
+    try {
+        start = await pairApi(apiUrl, 'bridge_pair_start', { bridge_id: bridgeId, bridge_name: bridgeName });
+    } catch (e) {
+        console.error('No pude iniciar el emparejamiento: ' + e.message);
+        return 1;
+    }
+    if (!start.ok) {
+        console.error('El hub rechazo el emparejamiento: ' + (start.error || 'error'));
+        return 1;
+    }
+
+    const verify = start.verify_url || url;
+    console.log('Para vincular esta PC a tu cuenta:');
+    console.log('  1. Abri ' + verify + ' y logueate.');
+    console.log('  2. Anda a Dispositivos -> Agregar PC.');
+    console.log('  3. Ingresa el codigo:  ' + start.user_code);
+    console.log('');
+    console.log('Esperando aprobacion (vence en ' + Math.round((parseInt(start.expires_in, 10) || 600) / 60) + ' min)...');
+
+    const deadline = Date.now() + (parseInt(start.expires_in, 10) || 600) * 1000;
+    let token = '';
+    let finalId = bridgeId;
+    while (Date.now() < deadline) {
+        await new Promise((r) => setTimeout(r, 2500));
+        let p;
+        try {
+            p = await pairApi(apiUrl, 'bridge_pair_poll', { device_code: start.device_code });
+        } catch (e) {
+            process.stdout.write('.');
+            continue;
+        }
+        if (p.status === 'approved' && p.bridge_token) {
+            token = p.bridge_token;
+            finalId = p.bridge_id || bridgeId;
+            break;
+        }
+        if (p.status === 'expired' || p.status === 'unknown') {
+            console.error('\nEl codigo vencio. Volve a correr: openbridge pair ' + url);
+            return 1;
+        }
+        process.stdout.write('.');
+    }
+    if (!token) {
+        console.error('\nSe agoto el tiempo. Volve a correr: openbridge pair ' + url);
+        return 1;
+    }
+
+    cfg.apiUrl = apiUrl;
+    cfg.apiToken = token;
+    cfg.bridgeId = finalId;
+    cfg.bridgeName = bridgeName;
+    config.writeBridge(cfg);
+    console.log('\nPC emparejada: ' + finalId + ' (' + bridgeName + ')');
+    if (flags['no-start']) {
+        console.log('Arrancala con: openbridge bridge');
+        return 0;
+    }
+    console.log('Arrancando el puente (Ctrl+C para salir)...');
+    return cmdBridge(bridgeStartArgs(flags));
 }
 
 // ---------------------------------------------------------------------------
@@ -967,12 +1128,18 @@ async function cmdAutostart(argv) {
     }
     try { fs.mkdirSync(path.dirname(target), { recursive: true }); } catch (e) { /* nada */ }
     const home = paths.baseDir();
+    // Si esta PC es un puente de un hub remoto (join/pair), el autostart corre
+    // solo el puente; si es el hub local, corre el server.
+    let acfg = { apiUrl: '' };
+    try { acfg = config.readBridge(); } catch (e) { /* nada */ }
+    const remote = /^https?:\/\//i.test(acfg.apiUrl || '') && !/127\.0\.0\.1|localhost/i.test(acfg.apiUrl);
+    const runArgs = remote ? 'bridge' : 'server --stream --no-tunnel';
     if (process.platform === 'win32') {
         const ps = [
             '$ws = New-Object -ComObject WScript.Shell;',
             '$sc = $ws.CreateShortcut(' + JSON.stringify(target) + ');',
             '$sc.TargetPath = ' + JSON.stringify(node) + ';',
-            '$sc.Arguments = ' + JSON.stringify('"' + bin + '" server --stream --no-tunnel') + ';',
+            '$sc.Arguments = ' + JSON.stringify('"' + bin + '" ' + runArgs) + ';',
             '$sc.WorkingDirectory = ' + JSON.stringify(home) + ';',
             '$sc.WindowStyle = 7;',
             '$sc.Save();',
@@ -985,7 +1152,8 @@ async function cmdAutostart(argv) {
             + '<plist version="1.0"><dict>'
             + '<key>Label</key><string>net.openbridge.server</string>'
             + '<key>ProgramArguments</key><array>'
-            + '<string>' + node + '</string><string>' + bin + '</string><string>server</string><string>--stream</string><string>--no-tunnel</string>'
+            + '<string>' + node + '</string><string>' + bin + '</string>'
+            + runArgs.split(' ').map((a) => '<string>' + a + '</string>').join('')
             + '</array>'
             + '<key>WorkingDirectory</key><string>' + home + '</string>'
             + '<key>RunAtLoad</key><true/><key>KeepAlive</key><true/>'
@@ -994,7 +1162,7 @@ async function cmdAutostart(argv) {
     } else {
         const unit = '[Unit]\nDescription=OpenBridge\nAfter=network-online.target\n\n'
             + '[Service]\nType=simple\n'
-            + 'ExecStart=' + node + ' ' + bin + ' server --stream --no-tunnel\n'
+            + 'ExecStart=' + node + ' ' + bin + ' ' + runArgs + '\n'
             + 'WorkingDirectory=' + home + '\nRestart=on-failure\n\n'
             + '[Install]\nWantedBy=default.target\n';
         fs.writeFileSync(target, unit);
@@ -1002,7 +1170,7 @@ async function cmdAutostart(argv) {
         spawnSync('systemctl', ['--user', 'enable', '--now', 'openbridge.service'], { windowsHide: true });
     }
     console.log('autostart instalado: ' + target);
-    console.log('  (arranca `openbridge server --stream --no-tunnel` en ' + home + ')');
+    console.log('  (arranca `openbridge ' + runArgs + '` en ' + home + ')');
     return 0;
 }
 
@@ -1107,8 +1275,9 @@ function usage() {
     console.log('  qr        Muestra la URL (publica o local) como QR para el celular');
     console.log('  tunnel    Muestra o cambia el proveedor de tunel (tunnelmole|ngrok|cloudflare|none) [--domain]');
     console.log('  logs      Ultimas lineas de los logs (--follow --server --bridge)');
-    console.log('  bridge    Corre solo el puente (--api --token --id --name)');
+    console.log('  bridge    Corre solo el puente (--background | --stop | --status)');
     console.log('  join      Vincula esta PC como puente de un hub (<url> --token --id --name)');
+    console.log('  pair      Empareja esta PC con un hub PHP por codigo (<url> [--id --name])');
     console.log('  import    Trae data/ de OpenConex (<data-dir> [--force])');
     console.log('  reset     Borra todos los chats/datos (--session <id> --yes)');
     console.log('  autostart Instala/quita el arranque automatico (install|remove)');
@@ -1144,6 +1313,7 @@ async function main(argv) {
         case 'logs': return cmdLogs(args.slice(1));
         case 'bridge': return cmdBridge(args.slice(1));
         case 'join': return cmdJoin(args.slice(1));
+        case 'pair': return cmdPair(args.slice(1));
         case 'import': return cmdImport(args.slice(1));
         case 'reset': return cmdReset(args.slice(1));
         case 'autostart': return cmdAutostart(args.slice(1));

package/src/web/assets/app.js

@@ -67,6 +67,7 @@ var els = {
     viewProcs: document.getElementById('viewProcs'),
     viewChanges: document.getElementById('viewChanges'),
     viewMcp: document.getElementById('viewMcp'),
+    viewDevices: document.getElementById('viewDevices'),
     themeColor: document.getElementById('themeColor'),
     themeLink: document.getElementById('themeStylesheet'),
     statusbar: document.getElementById('statusbar'),
@@ -146,6 +147,7 @@ var state = {
     catVer: '',
     bridges: [],          // resumen de puentes registrados [{id,name,online,busy_session}]
     activeBridge: '',     // puente seleccionado en el sidebar (id)
+    features: {},         // capacidades del hub (p. ej. {pairing:true} en el hub PHP)
     isSending: false,
     pendingImage: null,
     messages: [],
@@ -431,6 +433,11 @@ async function refreshBridgeData() {
 // Aplica la respuesta de bootstrap (o de un refresh tras cambio de puente).
 function applyBootPayload(data) {
     if (!data || !data.ok) return;
+    if (data.features) {
+        state.features = data.features;
+        var devBtn = document.querySelector('#sidebar .utilities button[data-view="devices"]');
+        if (devBtn) devBtn.style.display = state.features.pairing ? '' : 'none';
+    }
     var newB = Array.isArray(data.bridges) ? data.bridges : null;
     if (newB && newB.length) {
         // El puente activo guardado puede no existir (o ser el legacy '' tras
@@ -1011,6 +1018,7 @@ function showView(name) {
     els.viewProcs.style.display = 'none';
     els.viewChanges.style.display = 'none';
     els.viewMcp.style.display = 'none';
+    if (els.viewDevices) els.viewDevices.style.display = 'none';
 
     if (name !== 'procs') stopProcView();
 
@@ -1089,6 +1097,12 @@ function showView(name) {
         els.sendForm.style.display = 'none';
         els.btnCmds.style.display = 'none';
         renderMcpView();
+    } else if (name === 'devices') {
+        els.viewDevices.style.display = '';
+        els.btnBack.style.display = 'none';
+        els.sendForm.style.display = 'none';
+        els.btnCmds.style.display = 'none';
+        renderDevicesView();
     }
 
     if (els.fabNew) els.fabNew.classList.toggle('show', name === 'home');
@@ -3062,6 +3076,79 @@ async function loadMcp() {
         + esc(output || 'No hay servidores MCP configurados.') + '</pre>';
 }
 
+// ---------------------------------------------------------------------------
+// Vista Dispositivos: PCs emparejadas a la cuenta (solo hub PHP). El usuario
+// corre `openbridge pair <url>` en su PC, ve un codigo y lo ingresa aca.
+// ---------------------------------------------------------------------------
+function renderDevicesView() {
+    els.hTitle.textContent = 'dispositivos';
+    els.hSub.textContent = 'tus PCs emparejadas';
+    loadDevices();
+}
+
+async function loadDevices() {
+    if (!els.viewDevices) return;
+    var head = '<div class="view-head"><h2>mis PCs</h2>'
+        + '<div class="view-sub">emparejadas a tu cuenta</div></div>';
+    var res = await api('api.php?action=bridges');
+    if (!res.ok) {
+        els.viewDevices.innerHTML = head + '<div class="placeholder">' + esc(res.error || 'no se pudo consultar') + '</div>';
+        return;
+    }
+    els.viewDevices.innerHTML = head
+        + '<div class="dev-add">'
+        + '<input type="text" id="devCode" placeholder="codigo (ej: ABCD-EFGH)" autocomplete="off" spellcheck="false">'
+        + '<button type="button" class="linkbtn" id="devAdd">agregar PC</button>'
+        + '</div>'
+        + '<div class="view-sub">En tu PC: <code>openbridge pair ' + esc(location.origin) + '</code> y te muestra un codigo. Ingresalo aca.</div>'
+        + '<div id="devList"></div>';
+    var input = document.getElementById('devCode');
+    var btn = document.getElementById('devAdd');
+    if (btn) btn.addEventListener('click', function () { addDevice(input.value); });
+    if (input) input.addEventListener('keydown', function (e) { if (e.key === 'Enter') addDevice(input.value); });
+    renderDeviceList(res.bridges || []);
+}
+
+function renderDeviceList(list) {
+    var box = document.getElementById('devList');
+    if (!box) return;
+    if (!list.length) {
+        box.innerHTML = '<div class="placeholder">Todavia no emparejaste ninguna PC.</div>';
+        return;
+    }
+    var html = '';
+    for (var i = 0; i < list.length; i++) {
+        var b = list[i];
+        html += '<div class="device"><span class="dot"' + (b.online ? '' : ' style="background:var(--muted)"') + '></span>'
+            + '<b>' + esc(b.name) + '</b><span class="dnote">' + esc(b.id) + '</span>'
+            + '<button type="button" class="linkbtn" data-revoke="' + esc(b.id) + '">desvincular</button></div>';
+    }
+    box.innerHTML = html;
+    var btns = box.querySelectorAll('[data-revoke]');
+    for (var j = 0; j < btns.length; j++) {
+        btns[j].addEventListener('click', function () { revokeDevice(this.getAttribute('data-revoke')); });
+    }
+}
+
+async function addDevice(code) {
+    code = (code || '').trim();
+    if (!code) return;
+    var res = await fetch('api.php?action=bridge_pair_approve', apiCsrf('POST', { user_code: code }))
+        .then(function (r) { return r.json(); })
+        .catch(function () { return { ok: false, error: 'network' }; });
+    if (!res.ok) { alert(res.error || 'no se pudo emparejar'); return; }
+    loadDevices();
+}
+
+async function revokeDevice(id) {
+    if (!window.confirm('Desvincular la PC "' + id + '"?')) return;
+    var res = await fetch('api.php?action=bridge_revoke', apiCsrf('POST', { id: id }))
+        .then(function (r) { return r.json(); })
+        .catch(function () { return { ok: false, error: 'network' }; });
+    if (!res.ok) { alert(res.error || 'no se pudo desvincular'); return; }
+    loadDevices();
+}
+
 function chgStatusClass(st) {
     if (st === '??' || st === 'A') return 'add';
     if (st.indexOf('D') >= 0) return 'del';

package/src/web/templates/chat.html

@@ -378,6 +378,14 @@
         }
 
         /* ----- Tab de procesos (dev servers de la sesión activa) ----- */
+        #viewDevices .dev-add { display: flex; gap: 8px; margin: 10px 0; }
+        #viewDevices .dev-add input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; }
+        #viewDevices .dev-add input:focus { border-color: var(--accent); outline: none; }
+        #viewDevices .device { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--panel); }
+        #viewDevices .device .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #22c55e); flex-shrink: 0; }
+        #viewDevices .device .dnote { color: var(--muted); font-size: 11.5px; }
+        #viewDevices .device .linkbtn { margin-left: auto; }
+        #viewDevices code { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 11.5px; }
         #viewProcs .pp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
         #viewProcs .pp-head b { font-size: 16px; font-weight: 600; }
         #viewProcs .pp-head b::before { content: "❯ "; color: var(--mine); }
@@ -1204,6 +1212,7 @@
             <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>
             <button data-view="mcp" type="button" title="Servidores MCP de opencode">mcp</button>
+        <button data-view="devices" type="button" title="PCs emparejadas a tu cuenta" style="display:none">dispositivos</button>
         </div>
         <div class="footer">
             <div class="row" id="bridgeStatusRow">
@@ -1287,6 +1296,7 @@
         <div id="viewProcs" class="view" style="display:none"></div>
         <div id="viewChanges" class="view" style="display:none"></div>
         <div id="viewMcp" class="view" style="display:none"></div>
+        <div id="viewDevices" class="view" style="display:none"></div>
 
         <footer id="statusbar">
             <span class="dot" id="sbDot"></span>