@danieltmn/openbridge 0.2.0 → 0.4.0

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) => (
@@ -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',
@@ -171,6 +198,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: [],
@@ -256,8 +286,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);
@@ -336,8 +367,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);
@@ -349,7 +380,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)) {
@@ -649,11 +680,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;
                     }
@@ -674,6 +707,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;
@@ -681,6 +715,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);
                 }
             });
@@ -720,13 +755,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++) {

package/src/web/server.js

@@ -70,6 +70,13 @@ function securityHeaders(res) {
     res.setHeader('X-Content-Type-Options', 'nosniff');
     res.setHeader('Referrer-Policy', 'no-referrer');
     res.setHeader('X-Frame-Options', 'DENY');
+    // La app usa scripts/estilos inline (templates) y data: para imagenes
+    // adjuntas. Igual bloquea origenes externos, frames y objetos.
+    res.setHeader('Content-Security-Policy',
+        "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; "
+        + "script-src 'self' 'unsafe-inline'; connect-src 'self'; worker-src 'self'; "
+        + "manifest-src 'self'; object-src 'none'; base-uri 'none'; "
+        + "frame-ancestors 'none'; form-action 'self'");
 }
 
 async function handle(app, req, res) {

package/src/web/templates/chat.html

@@ -280,6 +280,11 @@
             text-align: center;
             border: 1px solid var(--border);
         }
+        #sidebar .footer .userbadge {
+            flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+            color: var(--muted); font-size: 12px;
+        }
+        #sidebar .footer .userbadge.admin { color: var(--accent); }
         #scrim {
             display: none;
             position: fixed; inset: 0;
@@ -768,6 +773,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 +974,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,13 +1202,17 @@
             <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">
                 <span class="dot" id="bridgeDot"></span>
                 <span id="bridgeStatusText">puente: desconocido</span>
             </div>
-            <a class="logout" href="logout.php">salir</a>
+            <div class="row">
+                <span class="userbadge" id="userBadge" title="sesión actual">{{USER_NAME}}</span>
+                <a class="logout" href="logout.php">salir</a>
+            </div>
         </div>
         <div class="resizer" id="sbResizer" title="Arrastrá para ajustar · doble clic para restablecer"></div>
     </aside>
@@ -1221,11 +1268,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 +1284,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>
@@ -1302,7 +1352,9 @@
             themes: {{THEMES_JSON}},
             sseDisabled: {{SSE_DISABLED}},
             pushEnabled: {{PUSH_ENABLED}},
-            pushKey: "{{PUSH_KEY}}"
+            pushKey: "{{PUSH_KEY}}",
+            userName: "{{USER_NAME}}",
+            userRole: "{{USER_ROLE}}"
         };
     </script>
     <script src="app.js?v={{APPJS_VER}}" defer></script>

package/src/web/templates/login.html

@@ -111,7 +111,11 @@
         <input type="hidden" name="csrf" value="{{CSRF}}">
         <label class="field">
             <span class="prompt">❯</span>
-            <input type="password" id="password" name="password" placeholder="contraseña" required autofocus autocomplete="current-password">
+            <input type="text" id="username" name="username" placeholder="usuario" required autofocus autocomplete="username" value="{{USER_PREFILL}}">
+        </label>
+        <label class="field">
+            <span class="prompt">❯</span>
+            <input type="password" id="password" name="password" placeholder="contraseña" required autocomplete="current-password">
             <button type="button" class="peek" id="btnPeek" aria-label="Mostrar u ocultar contraseña" tabindex="-1">👁</button>
         </label>
         <label class="keep" for="keep">