@danieltmn/openbridge 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.3.0] - 2026-09-13
+
+### Cambios
+
+- web: revertir un archivo puntual desde la vista cambios
+- cli: comando tunnel (estado/cambio de proveedor y dominio fijo)
+- web: plantillas de prompts y boton de revertir cambios
+- web: vista de cambios del proyecto (git status/diff) via el puente
+- release: recupera flags que npm se queda (--yes, --tag, --dry-run, --preid)
+
 ## [0.2.0] - 2026-09-13
 
 ### Cambios

package/README.md

@@ -1,144 +1,146 @@
-# OpenBridge
-
-[![npm](https://img.shields.io/npm/v/@danieltmn/openbridge.svg)](https://www.npmjs.com/package/@danieltmn/openbridge)
-[![CI](https://github.com/tamnora/openbridge/actions/workflows/ci.yml/badge.svg)](https://github.com/tamnora/openbridge/actions/workflows/ci.yml)
-[![license](https://img.shields.io/npm/l/@danieltmn/openbridge.svg)](LICENSE)
-
-Tu **opencode** en el celular, **sin hosting**: corre la app, el puente y un
-túnel público desde tu PC. El celular entra por la URL del túnel y vos manejás
-opencode (tus carpetas, modelos y chats) desde donde estés.
-
-> Proyecto nuevo e independiente, portado a **Node** desde OpenConex (PHP).
-> Ya no hace falta subir nada a un hosting ni depender de uno.
-
-## Cómo funciona
-
-```
-[Celular] ──► URL del túnel ──► App Node en tu PC ──► .openbridge/data/ (JSON)
-                                      │
-                                      └──► bridge (Node) ──► opencode run
-```
-
-- **Un solo runtime: Node 18+.** La app web, la API, los datos y el puente viven
-  en el mismo proceso/hogar.
-- **opencode** es el único requisito externo (el motor que responde).
-- **Túnel** con TunnelMole (gratis, sin cuenta), ngrok o Cloudflare para exponer
-  la app a internet.
-
-## Requisitos
-
-- [Node.js](https://nodejs.org) 18 o superior.
-- `opencode` instalado y autenticado: `npm i -g opencode-ai`.
-
-## Instalación
-
-```bash
-# opción 1: sin instalar nada (npx)
-npx @danieltmn/openbridge init      # asistente: workspace, contraseña, túnel, puerto
-npx @danieltmn/openbridge server    # arranca en segundo plano y muestra el estado/URL
-
-# opción 2: instalar global
-npm i -g @danieltmn/openbridge
-openbridge init
-openbridge server
-```
-
-Al arrancar (queda en segundo plano) imprime el **estado con la URL pública**
-(`https://….tunnelmole.net/chat.php`): abríla desde el celular y logueate con el
-usuario (`admin`) y la contraseña que elegiste en `init`. Para correrlo en
-primer plano usá `openbridge server --stream`; para detenerlo, `openbridge stop`.
-
-### Opciones de `init`
-
-```
---workspace <ruta>   carpeta de trabajo (donde están tus proyectos)
---name "PC 1"        nombre visible de esta computadora
---id pc1             identificador corto (default: derivado del nombre)
---port 8799          puerto local
---password <clave>   contraseña de acceso
---tunnel <prov>      tunnelmole | ngrok | cloudflare | none
---yes                sin preguntas (usa defaults)
---force              reconfigura aunque ya exista
---dir <ruta>         casa portable (default: directorio actual)
-```
-
-## Comandos
-
-| Comando | Qué hace |
-|---|---|
-| `openbridge init` | Configura la casa (workspace, contraseña, túnel, puerto) |
-| `openbridge passwd` | Cambia la contraseña de acceso (detiene el server si corre) |
-| `openbridge server` | Arranca app + puente + túnel en **segundo plano** y muestra el estado (`--stream` = primer plano) |
-| `openbridge stop` | Detiene el server y su árbol de procesos |
-| `openbridge status` | Estado, URL, puente en línea y chats |
-| `openbridge qr` | Muestra la URL (pública o local) como QR para escanear desde el celular |
-| `openbridge logs` | Logs (`--follow`, `--server`, `--bridge`) |
-| `openbridge bridge` | Corre **solo** el puente (`--api --token --id --name`) |
-| `openbridge import` | Trae `data/` de OpenConex (`<data-dir> [--force]`) |
-| `openbridge reset` | Borra chats/datos (`--session <id>`, `--yes`) |
-| `openbridge autostart` | Arranque automático (`install`/`remove`) |
-| `openbridge doctor` | Verifica Node, opencode, configuración y puerto |
-
-## Casa portable
-
-Todo vive dentro de **`.openbridge/`** en el directorio donde corrés `init`
-(o `--dir` / `OPENBRIDGE_HOME`):
-
-```
-.openbridge/
-  config.json    config del puente (apiUrl, token, workspace, bridgeId…)
-  app.json       config de la app (usuario, contraseña, VAPID, puerto, túnel)
-  folders.json   lista blanca de carpetas que se ven desde el celular
-  data/          sesiones, mensajes, catálogo, registro de puentes, push
-  logs/          server.log y bridge.log
-```
-
-Movés la carpeta a donde quieras y sigue funcionando (es portable). Si venías
-de una versión anterior con los archivos sueltos, se **migran solos** a
-`.openbridge/` la primera vez que corras un comando.
-
-## Varias computadoras
-
-El hub (la PC con la app) puede atender **varias PCs** a la vez:
-
-- En la PC "hub": `openbridge init` + `openbridge server` (queda la app + túnel).
-- En otra PC: `openbridge init` y luego `openbridge bridge --api <url-del-hub>
-  --token <token> --id pc2 --name "PC 2"` (sin editar `config.json` a mano).
-
-En el sidebar de la web elegís qué PC usar y ves sus proyectos y chats.
-
-## Túnel y URL estable
-
-Proveedores soportados (`--tunnel`): `tunnelmole` (gratis, sin cuenta),
-`ngrok` (cuenta + authtoken; admite dominio fijo con `--domain` en
-`app.json`) y `cloudflare` (quick tunnel de `cloudflared`). Con URL
-**aleatoria**, la suscripción push no persiste entre reinicios (el push está
-atado al origen). Para PWA/push estables conviene ngrok con dominio fijo o
-Cloudflare con dominio propio.
-
-## Avisos push
-
-Las claves VAPID se generan solas en `init`. Con URL de túnel **aleatoria**, la
-suscripción push no persiste entre reinicios (el push está atado al origen). Para
-una URL fija hace falta un proveedor con dominio estable (ngrok/Cloudflare).
-
-## Seguridad
-
-- La app escucha solo en `127.0.0.1`; el túnel la expone.
-- Login con contraseña (scrypt) + CSRF y rate limit (5 intentos); token del
-  puente autogenerado.
-- El túnel es **público mientras corre**: detenelo (`openbridge stop`) cuando no
-  lo uses.
-
-## Estado
-
-Proyecto en desarrollo. Ya funciona: `init`, `server` (segundo plano; `--stream`
-en primer plano), `stop`, `status`, `logs` (`--follow`), `bridge` (con flags),
-`passwd`, `import`, `reset`, `autostart`, `doctor`, login con rate limit, API
-completa, SSE, catálogo por PC, Web Push y túnel (TunnelMole/ngrok/cloudflare).
-Tests en `npm test`. Pendiente: re-suscripción push al cambiar la URL y más
-cobertura end-to-end.
-
-## Licencia
-
-MIT.
+# OpenBridge
+
+[![npm](https://img.shields.io/npm/v/@danieltmn/openbridge.svg)](https://www.npmjs.com/package/@danieltmn/openbridge)
+[![CI](https://github.com/tamnora/openbridge/actions/workflows/ci.yml/badge.svg)](https://github.com/tamnora/openbridge/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/@danieltmn/openbridge.svg)](LICENSE)
+
+Tu **opencode** en el celular, **sin hosting**: corre la app, el puente y un
+túnel público desde tu PC. El celular entra por la URL del túnel y vos manejás
+opencode (tus carpetas, modelos y chats) desde donde estés.
+
+> Proyecto nuevo e independiente, portado a **Node** desde OpenConex (PHP).
+> Ya no hace falta subir nada a un hosting ni depender de uno.
+
+## Cómo funciona
+
+```
+[Celular] ──► URL del túnel ──► App Node en tu PC ──► .openbridge/data/ (JSON)
+                                      │
+                                      └──► bridge (Node) ──► opencode run
+```
+
+- **Un solo runtime: Node 18+.** La app web, la API, los datos y el puente viven
+  en el mismo proceso/hogar.
+- **opencode** es el único requisito externo (el motor que responde).
+- **Túnel** con TunnelMole (gratis, sin cuenta), ngrok o Cloudflare para exponer
+  la app a internet.
+
+## Requisitos
+
+- [Node.js](https://nodejs.org) 18 o superior.
+- `opencode` instalado y autenticado: `npm i -g opencode-ai`.
+
+## Instalación
+
+```bash
+# opción 1: sin instalar nada (npx)
+npx @danieltmn/openbridge init      # asistente: workspace, contraseña, túnel, puerto
+npx @danieltmn/openbridge server    # arranca en segundo plano y muestra el estado/URL
+
+# opción 2: instalar global
+npm i -g @danieltmn/openbridge
+openbridge init
+openbridge server
+```
+
+Al arrancar (queda en segundo plano) imprime el **estado con la URL pública**
+(`https://….tunnelmole.net/chat.php`): abríla desde el celular y logueate con el
+usuario (`admin`) y la contraseña que elegiste en `init`. Para correrlo en
+primer plano usá `openbridge server --stream`; para detenerlo, `openbridge stop`.
+
+### Opciones de `init`
+
+```
+--workspace <ruta>   carpeta de trabajo (donde están tus proyectos)
+--name "PC 1"        nombre visible de esta computadora
+--id pc1             identificador corto (default: derivado del nombre)
+--port 8799          puerto local
+--password <clave>   contraseña de acceso
+--tunnel <prov>      tunnelmole | ngrok | cloudflare | none
+--domain <host>      dominio fijo del túnel (ngrok)
+--yes                sin preguntas (usa defaults)
+--force              reconfigura aunque ya exista
+--dir <ruta>         casa portable (default: directorio actual)
+```
+
+## Comandos
+
+| Comando | Qué hace |
+|---|---|
+| `openbridge init` | Configura la casa (workspace, contraseña, túnel, puerto) |
+| `openbridge passwd` | Cambia la contraseña de acceso (detiene el server si corre) |
+| `openbridge server` | Arranca app + puente + túnel en **segundo plano** y muestra el estado (`--stream` = primer plano) |
+| `openbridge stop` | Detiene el server y su árbol de procesos |
+| `openbridge status` | Estado, URL, puente en línea y chats |
+| `openbridge qr` | Muestra la URL (pública o local) como QR para escanear desde el celular |
+| `openbridge 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 import` | Trae `data/` de OpenConex (`<data-dir> [--force]`) |
+| `openbridge reset` | Borra chats/datos (`--session <id>`, `--yes`) |
+| `openbridge autostart` | Arranque automático (`install`/`remove`) |
+| `openbridge doctor` | Verifica Node, opencode, configuración y puerto |
+
+## Casa portable
+
+Todo vive dentro de **`.openbridge/`** en el directorio donde corrés `init`
+(o `--dir` / `OPENBRIDGE_HOME`):
+
+```
+.openbridge/
+  config.json    config del puente (apiUrl, token, workspace, bridgeId…)
+  app.json       config de la app (usuario, contraseña, VAPID, puerto, túnel)
+  folders.json   lista blanca de carpetas que se ven desde el celular
+  data/          sesiones, mensajes, catálogo, registro de puentes, push
+  logs/          server.log y bridge.log
+```
+
+Movés la carpeta a donde quieras y sigue funcionando (es portable). Si venías
+de una versión anterior con los archivos sueltos, se **migran solos** a
+`.openbridge/` la primera vez que corras un comando.
+
+## Varias computadoras
+
+El hub (la PC con la app) puede atender **varias PCs** a la vez:
+
+- En la PC "hub": `openbridge init` + `openbridge server` (queda la app + túnel).
+- En otra PC: `openbridge init` y luego `openbridge bridge --api <url-del-hub>
+  --token <token> --id pc2 --name "PC 2"` (sin editar `config.json` a mano).
+
+En el sidebar de la web elegís qué PC usar y ves sus proyectos y chats.
+
+## Túnel y URL estable
+
+Proveedores soportados (`--tunnel`): `tunnelmole` (gratis, sin cuenta),
+`ngrok` (cuenta + authtoken; admite dominio fijo con `--domain` en
+`app.json`) y `cloudflare` (quick tunnel de `cloudflared`). Con URL
+**aleatoria**, la suscripción push no persiste entre reinicios (el push está
+atado al origen). Para PWA/push estables conviene ngrok con dominio fijo o
+Cloudflare con dominio propio.
+
+## Avisos push
+
+Las claves VAPID se generan solas en `init`. Con URL de túnel **aleatoria**, la
+suscripción push no persiste entre reinicios (el push está atado al origen). Para
+una URL fija hace falta un proveedor con dominio estable (ngrok/Cloudflare).
+
+## Seguridad
+
+- La app escucha solo en `127.0.0.1`; el túnel la expone.
+- Login con contraseña (scrypt) + CSRF y rate limit (5 intentos); token del
+  puente autogenerado.
+- El túnel es **público mientras corre**: detenelo (`openbridge stop`) cuando no
+  lo uses.
+
+## Estado
+
+Proyecto en desarrollo. Ya funciona: `init`, `server` (segundo plano; `--stream`
+en primer plano), `stop`, `status`, `logs` (`--follow`), `bridge` (con flags),
+`passwd`, `import`, `reset`, `autostart`, `doctor`, login con rate limit, API
+completa, SSE, catálogo por PC, Web Push y túnel (TunnelMole/ngrok/cloudflare).
+Tests en `npm test`. Pendiente: re-suscripción push al cambiar la URL y más
+cobertura end-to-end.
+
+## Licencia
+
+MIT.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/openbridge",
-  "version": "0.2.0",
+  "version": "0.3.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/bridge/bridge.js

@@ -12,7 +12,7 @@
  */
 'use strict';
 
-const { spawn } = require('node:child_process');
+const { spawn, spawnSync } = require('node:child_process');
 const fs = require('node:fs');
 const os = require('node:os');
 const path = require('node:path');
@@ -1549,6 +1549,77 @@ async function handleFsCommand(cmd) {
     }
 }
 
+// ---------------------------------------------------------------------------
+// Cambios del proyecto (git status / git diff) para revisar lo que tocó el
+// agente desde el celular. Corre git en la carpeta de la sesión (validada
+// dentro del workspace, igual que proc_start).
+// ---------------------------------------------------------------------------
+function parseGitStatus(text) {
+    const files = [];
+    let branch = '';
+    for (const line of String(text).split('\n')) {
+        if (line === '') continue;
+        if (line.startsWith('## ')) { branch = line.slice(3).trim(); continue; }
+        const status = line.slice(0, 2).trim() || '?';
+        let p = line.slice(3);
+        const arrow = p.indexOf(' -> ');
+        if (arrow >= 0) p = p.slice(arrow + 4);
+        files.push({ status, path: p });
+    }
+    return { branch, files };
+}
+
+function gitIn(folder, args, timeout = 30000) {
+    const r = spawnSync('git', ['-C', folder].concat(args), {
+        encoding: 'utf8',
+        timeout,
+        windowsHide: true,
+        maxBuffer: 16 * 1024 * 1024,
+    });
+    if (r.error) throw new Error(r.error.message || 'no se pudo ejecutar git');
+    const text = String(r.stdout || '');
+    return { code: r.status, text, err: String(r.stderr || '').trim() };
+}
+
+async function handleGitCommand(cmd) {
+    let folder;
+    try { folder = procResolveFolder(cmd.args && cmd.args[0]); }
+    catch (e) {
+        await api('command_done', { id: cmd.id, ok: false, text: '', error: e.message }, cmd._t);
+        return;
+    }
+    try {
+        if (cmd.name === 'git_status') {
+            const r = gitIn(folder, ['status', '--porcelain=v1', '-b', '--untracked-files=all']);
+            if (r.code !== 0) throw new Error(r.err || 'no es un repositorio git');
+            await api('command_done', { id: cmd.id, ok: true, text: JSON.stringify(parseGitStatus(r.text)), error: '' }, cmd._t);
+        } else if (cmd.name === 'git_checkout') {
+            // Revierte cambios de archivos RASTREADOS dentro de la carpeta de la
+            // sesion. Sin 2do argumento revierte todo (`.`); con argumento,
+            // solo ese archivo relativo (sin `..` ni rutas absolutas).
+            let target = (cmd.args && cmd.args.length > 1) ? String(cmd.args[1]) : '.';
+            if (target !== '.') {
+                if (path.isAbsolute(target) || target.split(/[\\/]/).includes('..')) {
+                    throw new Error('ruta invalida');
+                }
+            }
+            const r = gitIn(folder, ['checkout', '--', target]);
+            if (r.code !== 0) throw new Error(r.err || 'no se pudo revertir');
+            await api('command_done', { id: cmd.id, ok: true, text: JSON.stringify({ reverted: target }), error: '' }, cmd._t);
+        } else {
+            // diff HEAD: cambios preparados + sin preparar. `fs_result` admite
+            // respuestas mas grandes que command_done (8000 car.).
+            const r = gitIn(folder, ['--no-pager', 'diff', 'HEAD', '--no-color', '--no-ext-diff', '--no-renames']);
+            if (r.code !== 0) throw new Error(r.err || 'no es un repositorio git');
+            await api('fs_result', { id: cmd.id, ok: true, text: JSON.stringify({ diff: r.text }), error: '' }, cmd._t);
+        }
+        log('git ' + cmd.name + ' ok en ' + folder);
+    } catch (e) {
+        await api('command_done', { id: cmd.id, ok: false, text: '', error: e.message }, cmd._t);
+        log('git ' + cmd.name + ' error: ' + e.message);
+    }
+}
+
 // ---------------------------------------------------------------------------
 // Procesa comandos read-only encolados por la web.
 // ---------------------------------------------------------------------------
@@ -2044,6 +2115,11 @@ async function handleCommand(cmd) {
         await handleFsCommand(cmd);
         return;
     }
+    // Cambios git del proyecto (status/diff/revertir).
+    if (cmd.name === 'git_status' || cmd.name === 'git_diff' || cmd.name === 'git_checkout') {
+        await handleGitCommand(cmd);
+        return;
+    }
     // Túneles también son del puente (procesos de esta PC).
     if (cmd.name === 'tunnel_start') { await tunnelStart(cmd); return; }
     if (cmd.name === 'tunnel_stop') { await tunnelStop(cmd); return; }

package/src/cli.js

@@ -244,7 +244,7 @@ async function cmdInit(argv) {
         csrfSecret,
         bridgeToken,
         vapid,
-        tunnel: { provider, domain: '' },
+        tunnel: { provider, domain: flags.domain ? String(flags.domain) : '' },
     };
     config.writeBridge(bridgeCfg);
     config.writeApp(appCfg);
@@ -488,6 +488,51 @@ async function cmdQr() {
     return 0;
 }
 
+// Muestra o cambia el proveedor de tunel (y su dominio fijo) sin reconfigurar
+// todo. Cambiar el proveedor requiere reiniciar el server.
+async function cmdTunnel(argv) {
+    const { flags, _ } = parseArgs(argv);
+    if (!paths.exists()) {
+        console.error('No hay configuracion. Corre primero: openbridge init');
+        return 1;
+    }
+    const app = config.readApp();
+    const cur = app.tunnel || { provider: 'tunnelmole', domain: '' };
+    const arg = String(_[0] || '').toLowerCase();
+
+    if (arg === '' || arg === 'status' || arg === 'show') {
+        const rt = readRuntime();
+        const running = rt && pidAlive(rt.pid);
+        console.log('proveedor : ' + (cur.provider || 'tunnelmole'));
+        console.log('dominio   : ' + (cur.domain || '(aleatorio)'));
+        console.log('estado    : ' + (running ? 'corriendo' : 'detenido'));
+        if (running && rt.publicUrl) console.log('publico   : ' + rt.publicUrl);
+        return 0;
+    }
+
+    let provider = arg;
+    if (provider === 'cloudflared') provider = 'cloudflare';
+    if (!['tunnelmole', 'ngrok', 'cloudflare', 'none'].includes(provider)) {
+        console.error('Proveedor desconocido: ' + arg + ' (usar tunnelmole|ngrok|cloudflare|none)');
+        return 1;
+    }
+    const domain = flags.domain !== undefined ? String(flags.domain).trim() : String(cur.domain || '');
+    app.tunnel = { provider, domain };
+    config.writeApp(app);
+    console.log('Tunel configurado: ' + provider + (domain ? '  (dominio ' + domain + ')' : ''));
+    if (provider === 'ngrok' && !domain) {
+        console.log('aviso: ngrok sin dominio fijo da URL aleatoria; pasá --domain <sub.ngrok.app> para una estable.');
+    }
+    if (provider === 'cloudflare' && domain) {
+        console.log('aviso: el quick tunnel de cloudflared ignora el dominio (URL aleatoria).');
+    }
+    const rt = readRuntime();
+    if (rt && pidAlive(rt.pid)) {
+        console.log('Hay un server corriendo: reinicialo para aplicar (openbridge stop && openbridge server).');
+    }
+    return 0;
+}
+
 async function cmdLogs(argv) {
     const { flags } = parseArgs(argv);
     const n = parseInt(flags.n || '40', 10) || 40;
@@ -785,6 +830,7 @@ function usage() {
     console.log('  stop      Detiene el server en segundo plano');
     console.log('  status    Estado del server, puente y chats');
     console.log('  qr        Muestra la URL (publica o local) como QR para el celular');
+    console.log('  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('  import    Trae data/ de OpenConex (<data-dir> [--force])');
@@ -793,7 +839,7 @@ function usage() {
     console.log('  doctor    Verifica Node, opencode, configuracion y puerto');
     console.log('');
     console.log('Opciones comunes: --dir <ruta>  (casa portable; default: directorio actual)');
-    console.log('init: --workspace --name --id --port --password --tunnel --yes --force');
+    console.log('init: --workspace --name --id --port --password --tunnel --domain --yes --force');
     console.log('server: --port --no-tunnel --stream   (sin --stream corre en segundo plano)');
 }
 
@@ -816,6 +862,7 @@ async function main(argv) {
         case 'stop': return cmdStop();
         case 'status': return cmdStatus();
         case 'qr': return cmdQr();
+        case 'tunnel': return cmdTunnel(args.slice(1));
         case 'logs': return cmdLogs(args.slice(1));
         case 'bridge': return cmdBridge(args.slice(1));
         case 'import': return cmdImport(args.slice(1));

package/src/web/assets/app.js

@@ -28,6 +28,8 @@ var els = {
     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'),
@@ -45,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'),
@@ -980,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();
 
@@ -1046,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');
@@ -1098,6 +1108,7 @@ 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) {
@@ -2485,6 +2496,85 @@ if (els.btnMic) {
     }
 }
 
+// ---------------------------------------------------------------------------
+// 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.
@@ -2532,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();
@@ -2564,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;
         }
     }
@@ -2602,6 +2694,7 @@ els.sendForm.addEventListener('submit', async function (ev) {
             els.input.value = '';
             autoGrow();
             closeSlash();
+            tplClose();
             setPendingImage(null);
             await loadHistory(state.currentId, true);
         } else {
@@ -2881,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

@@ -768,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;
@@ -958,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; }
@@ -1159,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">
@@ -1221,11 +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>
 
@@ -1235,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>