@danieltmn/openbridge 0.1.0

package/src/web/assets/manifest.webmanifest

@@ -0,0 +1,24 @@
+{
+  "name": "OpenBridge",
+  "short_name": "OpenBridge",
+  "description": "Chat con tu IA en el PC (opencode)",
+  "start_url": "./chat.php",
+  "scope": "./",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone", "browser"],
+  "orientation": "any",
+  "background_color": "#0a0d12",
+  "theme_color": "#0a0d12",
+  "icons": [
+    { "src": "icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" },
+    { "src": "icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" },
+    { "src": "icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" },
+    { "src": "icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" },
+    { "src": "icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" },
+    { "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
+    { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
+    { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

package/src/web/assets/sw.js

@@ -0,0 +1,85 @@
+/*
+ * Service Worker mínimo de "openbridge".
+ * Estrategia: network-first. Nunca cachea api.php (debe devolver datos frescos).
+ * El resto de recursos se cachean para que la PWA funcione rápido, pero si hay
+ * red se prefiere la versión del servidor.
+ */
+'use strict';
+
+const CACHE = 'openbridge-v3';
+
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) =>
+            Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
+        ).then(() => self.clients.claim())
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    const req = event.request;
+    if (req.method !== 'GET') return;
+
+    const url = new URL(req.url);
+    if (url.origin !== location.origin) return;
+    if (url.pathname.endsWith('/api.php')) return;
+
+    // Navegación: siempre a la red y sin mirar el cache HTTP del navegador
+    // (evita mezclar un chat.php viejo con un app.js nuevo).
+    const opts = req.mode === 'navigate' ? { cache: 'reload' } : {};
+
+    event.respondWith(
+        fetch(req, opts).then((res) => {
+            if (res && res.status === 200) {
+                const copy = res.clone();
+                caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => {});
+            }
+            return res;
+        }).catch(() =>
+            caches.match(req).then((hit) => {
+                if (hit) return hit;
+                if (url.pathname.endsWith('/')) return caches.match('./chat.php');
+                return Response.error();
+            })
+        )
+    );
+});
+
+// Aviso push: muestra la notificacion del sistema. El payload viaja cifrado
+// (RFC 8291) y es un JSON { title, body, url }.
+self.addEventListener('push', (event) => {
+    let data = {};
+    try {
+        if (event.data) data = event.data.json();
+    } catch (e) { /* payload ilegible: se muestra un aviso generico */ }
+    const title = data.title || 'openbridge';
+    const options = {
+        body: data.body || '',
+        icon: new URL('./icons/icon-192x192.png', self.registration.scope).href,
+        badge: new URL('./icons/icon-192x192.png', self.registration.scope).href,
+        data: { url: data.url || self.registration.scope },
+        vibrate: [100, 60, 100],
+    };
+    event.waitUntil(self.registration.showNotification(title, options));
+});
+
+// Tocar la notificacion abre (o enfoca) el chat indicado.
+self.addEventListener('notificationclick', (event) => {
+    event.notification.close();
+    const url = (event.notification.data && event.notification.data.url) || self.registration.scope;
+    event.waitUntil(
+        self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((list) => {
+            for (const client of list) {
+                if ('focus' in client) {
+                    client.navigate(url).catch(() => {});
+                    return client.focus();
+                }
+            }
+            return self.clients.openWindow(url);
+        })
+    );
+});
+
+// Si el navegador renueva la suscripcion, la pagina vuelve a reportarla en el
+// proximo arranque (la app re-sincroniza cuando el permiso ya esta concedido).

package/src/web/assets/themes/dark-plus.css

@@ -0,0 +1,19 @@
+/* dark-plus: VSCode Dark+ — azul oscuro neutro con azules clásicos */
+:root {
+    --bg: #1e1e1e;
+    --panel: #252526;
+    --rail: #181818;
+    --theirs: #2d2d30;
+    --mine: #3794ff;
+    --mine-soft: rgba(55, 148, 255, .10);
+    --text: #d4d4d4;
+    --muted: #8a8a8a;
+    --border: #3c3c3c;
+    --danger: #f48771;
+    --accent: #569cd6;
+    --accent-soft: rgba(86, 156, 214, .16);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
+    --code-bg: #1b1b1b;
+    --warn-bg: rgba(244, 135, 113, .12);
+    --warn-border: #6e3b2f;
+}

package/src/web/assets/themes/dark-red.css

@@ -0,0 +1,18 @@
+/* dark-red: carmesí/carbón */
+:root {
+    --bg: #14080a;
+    --panel: #1f1115;
+    --mine: #ef4444;
+    --theirs: #2d141a;
+    --text: #f3e8e8;
+    --muted: #b08888;
+    --border: #3a1d22;
+    --danger: #fb7185;
+    --accent: #f87171;
+    --accent-soft: rgba(248, 113, 113, .16);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .55);
+    --code-bg: #0d0406;
+    --warn-bg: rgba(127, 29, 29, .35);
+    --warn-border: #b91c1c;
+    --rail: #1a0a0e;
+}

package/src/web/assets/themes/default.css

@@ -0,0 +1,18 @@
+/* default: azul/gris oscuro (paleta original) */
+:root {
+    --bg: #0f172a;
+    --panel: #1e293b;
+    --mine: #0ea5e9;
+    --theirs: #334155;
+    --text: #e2e8f0;
+    --muted: #94a3b8;
+    --border: #334155;
+    --danger: #f87171;
+    --accent: #38bdf8;
+    --accent-soft: rgba(56, 189, 248, .14);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .4);
+    --code-bg: #0b1220;
+    --warn-bg: rgba(127, 29, 29, .28);
+    --warn-border: #7f1d1d;
+    --rail: #111c30;
+}

package/src/web/assets/themes/github-light.css

@@ -0,0 +1,19 @@
+/* github-light: GitHub Light — blanco con verde y azul GitHub */
+:root {
+    --bg: #ffffff;
+    --panel: #f6f8fa;
+    --rail: #eaeef2;
+    --theirs: #eff2f5;
+    --mine: #1a7f37;
+    --mine-soft: rgba(26, 127, 55, .08);
+    --text: #1f2328;
+    --muted: #656d76;
+    --border: #d0d7de;
+    --danger: #cf222e;
+    --accent: #0969da;
+    --accent-soft: rgba(9, 105, 218, .10);
+    --shadow: 0 4px 20px rgba(31, 35, 40, .08);
+    --code-bg: #f6f8fa;
+    --warn-bg: rgba(207, 34, 46, .08);
+    --warn-border: #f0b3b5;
+}

package/src/web/assets/themes/high-contrast.css

@@ -0,0 +1,18 @@
+/* high-contrast: blanco/negro, alto contraste */
+:root {
+    --bg: #000000;
+    --panel: #0a0a0a;
+    --mine: #ffffff;
+    --theirs: #1a1a1a;
+    --text: #ffffff;
+    --muted: #cfcfcf;
+    --border: #ffffff;
+    --danger: #ffd400;
+    --accent: #ffd400;
+    --accent-soft: rgba(255, 212, 0, .22);
+    --shadow: 0 0 0 2px #ffffff;
+    --code-bg: #111111;
+    --warn-bg: rgba(255, 212, 0, .18);
+    --warn-border: #ffd400;
+    --rail: #050505;
+}

package/src/web/assets/themes/index.json

@@ -0,0 +1,15 @@
+{
+  "themes": [
+    { "slug": "terminal", "label": "Terminal", "sw": ["#0a0d12", "#3fb950"] },
+    { "slug": "default", "label": "Oscuro", "sw": ["#0f172a", "#0ea5e9"] },
+    { "slug": "dark-plus", "label": "Dark+", "sw": ["#1e1e1e", "#3794ff"] },
+    { "slug": "monokai", "label": "Monokai", "sw": ["#272822", "#a6e22e"] },
+    { "slug": "one-dark", "label": "One Dark", "sw": ["#282c34", "#61afef"] },
+    { "slug": "dark-red", "label": "Carmesí", "sw": ["#14080a", "#ef4444"] },
+    { "slug": "light", "label": "Claro", "sw": ["#f1f5f9", "#4f46e5"] },
+    { "slug": "light-plus", "label": "Light+", "sw": ["#ffffff", "#007acc"] },
+    { "slug": "github-light", "label": "GitHub Claro", "sw": ["#ffffff", "#1a7f37"] },
+    { "slug": "solarized", "label": "Solarized", "sw": ["#fdf6e3", "#268bd2"] },
+    { "slug": "high-contrast", "label": "Alto contraste", "sw": ["#000000", "#ffffff"] }
+  ]
+}

package/src/web/assets/themes/light-plus.css

@@ -0,0 +1,19 @@
+/* light-plus: VSCode Light+ — blanco con azul clásico */
+:root {
+    --bg: #ffffff;
+    --panel: #f3f3f3;
+    --rail: #e9e9e9;
+    --theirs: #ececec;
+    --mine: #007acc;
+    --mine-soft: rgba(0, 122, 204, .08);
+    --text: #333333;
+    --muted: #6f6f6f;
+    --border: #dcdcdc;
+    --danger: #cd3131;
+    --accent: #005cc5;
+    --accent-soft: rgba(0, 92, 197, .12);
+    --shadow: 0 4px 20px rgba(0, 0, 0, .10);
+    --code-bg: #f7f7f7;
+    --warn-bg: rgba(205, 49, 49, .08);
+    --warn-border: #f0b1af;
+}

package/src/web/assets/themes/light.css

@@ -0,0 +1,18 @@
+/* light: gris claro/índigo */
+:root {
+    --bg: #f1f5f9;
+    --panel: #ffffff;
+    --mine: #4f46e5;
+    --theirs: #e2e8f0;
+    --text: #0f172a;
+    --muted: #64748b;
+    --border: #cbd5e1;
+    --danger: #dc2626;
+    --accent: #4f46e5;
+    --accent-soft: rgba(79, 70, 229, .12);
+    --shadow: 0 4px 20px rgba(15, 23, 42, .08);
+    --code-bg: #f8fafc;
+    --warn-bg: rgba(220, 38, 38, .10);
+    --warn-border: #fca5a5;
+    --rail: #e2e8f0;
+}

package/src/web/assets/themes/monokai.css

@@ -0,0 +1,19 @@
+/* monokai: Monokai clásico — fondo carbón con verde lima y cian */
+:root {
+    --bg: #272822;
+    --panel: #2d2e27;
+    --rail: #1e1f1c;
+    --theirs: #34352f;
+    --mine: #a6e22e;
+    --mine-soft: rgba(166, 226, 46, .10);
+    --text: #f8f8f2;
+    --muted: #90908a;
+    --border: #3e3d32;
+    --danger: #f92672;
+    --accent: #66d9ef;
+    --accent-soft: rgba(102, 217, 239, .14);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
+    --code-bg: #1f201b;
+    --warn-bg: rgba(249, 38, 114, .14);
+    --warn-border: #7c1338;
+}

package/src/web/assets/themes/one-dark.css

@@ -0,0 +1,19 @@
+/* one-dark: One Dark Pro — gris azulado con azul y cian */
+:root {
+    --bg: #282c34;
+    --panel: #21252b;
+    --rail: #1b1f27;
+    --theirs: #2f343e;
+    --mine: #61afef;
+    --mine-soft: rgba(97, 175, 239, .12);
+    --text: #abb2bf;
+    --muted: #7f848e;
+    --border: #3e4451;
+    --danger: #e06c75;
+    --accent: #56b6c2;
+    --accent-soft: rgba(86, 182, 194, .14);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
+    --code-bg: #1d2027;
+    --warn-bg: rgba(224, 108, 117, .12);
+    --warn-border: #7c3d41;
+}

package/src/web/assets/themes/solarized.css

@@ -0,0 +1,18 @@
+/* solarized: crema/índigo apagado (tonos cálidos) */
+:root {
+    --bg: #fdf6e3;
+    --panel: #eee8d5;
+    --mine: #268bd2;
+    --theirs: #e3dcc4;
+    --text: #073642;
+    --muted: #657b83;
+    --border: #d6cfb6;
+    --danger: #dc322f;
+    --accent: #2aa198;
+    --accent-soft: rgba(42, 161, 152, .18);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .15);
+    --code-bg: #f5efdc;
+    --warn-bg: rgba(220, 50, 47, .12);
+    --warn-border: #cb4b16;
+    --rail: #ece4ce;
+}

package/src/web/assets/themes/terminal.css

@@ -0,0 +1,28 @@
+/* terminal: opencode/codex-like — casi negro, mono, verde para el usuario */
+:root {
+    --bg: #0a0d12;
+    --panel: #0f131a;
+    --rail: #0c1016;
+    --theirs: #141a23;
+    --mine: #3fb950;
+    --mine-soft: rgba(63, 185, 80, .08);
+    --text: #c9d1d9;
+    --muted: #7d8590;
+    --border: #21262d;
+    --danger: #f85149;
+    --accent: #79c0ff;
+    --accent-soft: rgba(121, 192, 255, .12);
+    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
+    --code-bg: #0d1117;
+    --warn-bg: rgba(187, 128, 9, .16);
+    --warn-border: #9e6a03;
+    --warn-text: #d29922;
+    --info-bg: rgba(2, 55, 76, .16);
+    --info-border: #02374c;
+    --info-text: #7dbddb;
+    --success-bg: rgba(0, 128, 0, .16);
+    --success-border: #008000;
+    --success-text: #3fb950;
+    --ok: #3fb950;
+    --font: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", "Fira Code", Consolas, "Roboto Mono", monospace;
+}

package/src/web/assets/themes/themes.css

@@ -0,0 +1,2 @@
+/* themes.css: aplica el default (terminal) como fallback; JS carga el activo. */
+@import url("terminal.css");