@danieltmn/openbridge 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.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

@@ -91,6 +91,7 @@ iniciar sesión** una vez; los chats, carpetas, túnel y push se conservan.
 | `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 pair` | Empareja esta PC con un **hub PHP** por código (`<url> [--id --name]`) |
 | `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,23 @@ 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).
+
 ## 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.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",

package/src/cli.js

@@ -750,6 +750,101 @@ async function cmdJoin(argv) {
     return cmdBridge([]);
 }
 
+// ---------------------------------------------------------------------------
+// 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]');
+        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([]);
+}
+
 // ---------------------------------------------------------------------------
 // import / reset (datos)
 // ---------------------------------------------------------------------------
@@ -1109,6 +1204,7 @@ function usage() {
     console.log('  logs      Ultimas lineas de los logs (--follow --server --bridge)');
     console.log('  bridge    Corre solo el puente (--api --token --id --name)');
     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 +1240,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>