@danieltmn/tamnora 0.24.2 → 0.25.0

package/harness/packages/server/public/system.js

@@ -1,7 +1,7 @@
 import { livePermission, reloadPane, renderSessions, resolvePermissionCard, sendPresence } from './chat.js';
 import { providerSelect, setSummaryText, yesInput } from './chrome.js';
 import { toast } from './commands.js';
-import { $, api, clear, el, openStream, showConfirm, state, storage, streamPost } from './core.js';
+import { $, api, clear, el, emptyState, openStream, showConfirm, state, storage, streamPost } from './core.js';
 import { diffState, localState, pollDelayMs } from './reconcile.js';
 import { followRun } from './runStream.js';
 import { closeTab, renderTabs, showStandalonePermission } from './sessions.js';
@@ -116,7 +116,7 @@ export async function refreshRuns() {
     });
     runsList.appendChild(li);
   }
-  if (!data.runs.length) runsList.appendChild(el('li', 'muted', 'Sin runs.'));
+  if (!data.runs.length) runsList.appendChild(emptyState('Sin runs todavía', 'Las evaluaciones que corras desde la pestaña eval quedan guardadas acá.'));
 }
 
 export async function openRun(id) {

package/harness/packages/server/src/lib/appearance.js

@@ -11,10 +11,14 @@ export const THEME_IDS = [
   'solarized-dark',
   'bosque',
   'vino',
+  'arena',
+  'hielo',
   'vercel',
   'dark-plus',
   'github',
   'github-dark',
+  'mocha',
+  'ebano',
 ];
 
 export const FONT_IDS = ['clasico', 'sistema', 'plex', 'inter', 'jetbrains', 'fira', 'source'];

package/harness/packages/server/src/lib/restart.js

@@ -0,0 +1,20 @@
+// Lanza el script detached que espera la muerte de este server y lo relanza con
+// el mismo comando con que arranco. Devolver rapido es el punto: el server tiene
+// que soltar el puerto antes de que el nuevo intente entrar.
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+import { packageRoot, homeDir } from './core.js';
+
+export function spawnRestart({ pid = process.pid, argv = process.argv.slice(1), home } = {}) {
+  const root = packageRoot();
+  if (!root) return { ok: false, error: 'no encontre el paquete del harness' };
+  const script = path.join(root, 'harness', 'scripts', 'restart.mjs');
+  const args = [script, '--pid', String(pid), '--argv', JSON.stringify(argv), '--home', home || homeDir()];
+  try {
+    const child = spawn(process.execPath, args, { detached: true, stdio: 'ignore', windowsHide: true });
+    child.unref();
+    return { ok: true, pid: child.pid };
+  } catch (error) {
+    return { ok: false, error: String(error?.message ?? error) };
+  }
+}

package/harness/packages/server/src/lib/securityHeaders.js

@@ -0,0 +1,53 @@
+// Cabeceras de seguridad de la consola. La consola es una SPA sin build: sus
+// scripts son modulos propios, asi que `script-src 'self'` alcanza y un XSS por
+// un hueco del renderer de markdown no puede cargar ni ejecutar codigo ajeno.
+
+const FONTS_CSS = 'https://fonts.googleapis.com';
+const FONTS_FILES = 'https://fonts.gstatic.com';
+
+export const CSP_DIRECTIVES = {
+  'default-src': ["'self'"],
+  'script-src': ["'self'"],
+  'style-src': ["'self'", "'unsafe-inline'", FONTS_CSS],
+  'font-src': ["'self'", FONTS_FILES, 'data:'],
+  'img-src': ["'self'", 'data:', 'blob:'],
+  'media-src': ["'self'", 'blob:', 'data:'],
+  'connect-src': ["'self'"],
+  // La pestaña preview embebe el dev server del usuario (local o por tunel).
+  'frame-src': ['http:', 'https:'],
+  'frame-ancestors': ["'self'"],
+  'manifest-src': ["'self'"],
+  'worker-src': ["'self'", 'blob:'],
+  'object-src': ["'none'"],
+  'base-uri': ["'self'"],
+  'form-action': ["'self'"],
+};
+
+export function buildCsp(directives = CSP_DIRECTIVES) {
+  return Object.entries(directives)
+    .map(([name, sources]) => `${name} ${sources.join(' ')}`)
+    .join('; ');
+}
+
+const CSP_VALUE = buildCsp();
+
+export const CSP_MODES = ['enforce', 'report-only', 'off'];
+
+export function cspMode(config) {
+  const mode = config?.server?.csp;
+  return CSP_MODES.includes(mode) ? mode : 'enforce';
+}
+
+/**
+ * Setea las cabeceras en `res` antes de `writeHead` (que las mezcla). La CSP solo
+ * va en lo que no es API: en un JSON o un SSE no protege nada.
+ */
+export function applySecurityHeaders(res, { api = false, csp = 'enforce' } = {}) {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('Referrer-Policy', 'same-origin');
+  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+  res.setHeader('Permissions-Policy', 'camera=(), geolocation=(), payment=(), usb=()');
+  if (api || csp === 'off') return;
+  const name = csp === 'report-only' ? 'Content-Security-Policy-Report-Only' : 'Content-Security-Policy';
+  res.setHeader(name, CSP_VALUE);
+}

package/harness/packages/server/src/routes/reload.js

@@ -0,0 +1,46 @@
+// Recargas operativas desde la consola: reiniciar el server y (re)abrir el
+// puente remoto (tailscale). Son privilegiadas, igual que update/shell/git:
+// solo conexion local. En ambos casos la respuesta vuelve rapido y la accion
+// corre aparte (script detached / `tailscale serve --bg`).
+import { sendJson, sendError } from '../lib/http.js';
+import { requireLocal } from '../lib/workspace.js';
+import { spawnRestart } from '../lib/restart.js';
+import { startTailscaleServe, stopTailscaleServe } from '../lib/core.js';
+
+export function registerReload(route, ctx) {
+  route('POST', '/api/server/restart', ({ req, res }) => {
+    if (!requireLocal(req, res, 'Reiniciar el servidor solo esta permitido en la conexion local.')) return;
+
+    const spawnRestarter = ctx.spawnRestarter ?? spawnRestart;
+    const started = spawnRestarter({
+      pid: process.pid,
+      argv: process.argv.slice(1),
+    });
+    if (!started.ok) return sendError(res, 500, started.error);
+
+    sendJson(res, 202, { ok: true, restarting: true });
+    // Soltar el puerto antes de que el server nuevo intente entrar.
+    setTimeout(() => {
+      Promise.resolve(ctx.shutdown?.()).catch(() => process.exit(0));
+    }, 800);
+  });
+
+  route('POST', '/api/bridge/reload', async ({ req, res }) => {
+    if (!requireLocal(req, res, 'Abrir el puente solo esta permitido en la conexion local.')) return;
+
+    const port = ctx.serverInfo?.port;
+    if (!port) return sendError(res, 500, 'No se en que puerto corre el server.');
+
+    // Reinicio puntual: apagar el handler de la consola (443) y volver a
+    // publicarlo. Un `serve reset` borraria tambien el preview en 8443.
+    const stop = ctx.tunnelStop ?? stopTailscaleServe;
+    const start = ctx.tunnelStart ?? startTailscaleServe;
+    try {
+      await stop().catch(() => {});
+      const tun = await start(port);
+      sendJson(res, 200, { ok: true, url: tun.url, provider: tun.provider ?? 'tailscale' });
+    } catch (error) {
+      sendError(res, 502, String(error?.message ?? error));
+    }
+  });
+}

package/harness/packages/server/src/server.js

@@ -20,6 +20,7 @@ import {
 } from './lib/core.js';
 import { sendJson, sendError } from './lib/http.js';
 import { requireTrustedHost, requireSameOrigin } from './lib/workspace.js';
+import { applySecurityHeaders, cspMode } from './lib/securityHeaders.js';
 import { createPromptBuilder, DEFAULT_SYSTEM_PROMPT } from './lib/prompt.js';
 import { profilePrompt, resolveProfile } from './lib/profile.js';
 import { skillsBlock } from './lib/skills.js';
@@ -47,6 +48,7 @@ import { registerProfile } from './routes/profile.js';
 import { registerTts } from './routes/tts.js';
 import { registerTranscribe } from './routes/transcribe.js';
 import { registerUpdate } from './routes/update.js';
+import { registerReload } from './routes/reload.js';
 import { registerAdvisor } from './routes/advisor.js';
 import { registerProcs } from './routes/procs.js';
 import { registerShell } from './routes/shell.js';
@@ -331,6 +333,7 @@ export async function createTamnoraServer({
   registerTranscribe(route, ctx);
   registerAdvisor(route, ctx);
   registerUpdate(route, ctx);
+  registerReload(route, ctx);
   registerProcs(route, ctx);
   registerShell(route, ctx);
   const preview = registerPreview(route, ctx);
@@ -376,8 +379,10 @@ export async function createTamnoraServer({
   const sockets = new Set();
   const server = http.createServer(async (req, res) => {
     const url = new URL(req.url, `http://${req.headers.host ?? 'localhost'}`);
+    const isApi = url.pathname.startsWith('/api/');
+    applySecurityHeaders(res, { api: isApi, csp: cspMode(config) });
 
-    if (url.pathname.startsWith('/api/')) {
+    if (isApi) {
       const matched = matchRoute(req.method, url.pathname);
       if (!matched) return sendError(res, 404, `Ruta no encontrada: ${req.method} ${url.pathname}`);
       // Guardas de request SIEMPRE activas (con o sin auth): DNS-rebinding y

package/harness/packages/server/test/accessibility.test.js

@@ -0,0 +1,72 @@
+// Accesibilidad de la consola que se verifica sobre el texto de los archivos.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readdirSync, readFileSync } from 'node:fs';
+import { readStyles } from './themeCss.js';
+
+const PUBLIC = new URL('../public/', import.meta.url);
+const css = readStyles();
+
+/** Contenido del bloque `@media (...)` que empieza en `inicio`. */
+function bloqueMedia(inicio) {
+  const abre = css.indexOf('{', inicio);
+  let prof = 0;
+  for (let i = abre; i < css.length; i += 1) {
+    if (css[i] === '{') prof += 1;
+    else if (css[i] === '}') {
+      prof -= 1;
+      if (prof === 0) return css.slice(abre + 1, i);
+    }
+  }
+  throw new Error('bloque sin cerrar');
+}
+
+test('prefers-reduced-motion apaga transiciones y los pulsos decorativos', () => {
+  const inicio = css.indexOf('@media (prefers-reduced-motion: reduce)');
+  assert.ok(inicio >= 0, 'falta el bloque de movimiento reducido');
+  const bloque = bloqueMedia(inicio);
+  assert.match(bloque, /transition-duration:\s*0\.01ms/);
+  assert.match(bloque, /scroll-behavior:\s*auto/);
+  assert.match(bloque, /animation:\s*none/);
+});
+
+test('toda animacion infinita que no es un indicador de progreso se apaga con movimiento reducido', () => {
+  // Quedan fuera los loaders y el spinner: indican que el agente esta trabajando.
+  const PROGRESO = new Set(['loader-thinking', 'loader-working', 'spin']);
+  const bloque = bloqueMedia(css.indexOf('@media (prefers-reduced-motion: reduce)'));
+
+  const reglas = [...css.matchAll(/([^{}]+)\{([^{}]*animation:\s*([a-z-]+)[^;}]*infinite[^;}]*;?[^{}]*)\}/g)];
+  assert.ok(reglas.length >= 5, 'no se leyeron las animaciones');
+  for (const [, selectores, , nombre] of reglas) {
+    if (PROGRESO.has(nombre)) continue;
+    for (const selector of selectores.split(',').map((s) => s.trim()).filter(Boolean)) {
+      const limpio = selector.split('\n').pop().trim();
+      assert.ok(bloque.includes(limpio), `"${limpio}" anima (${nombre}) y no se apaga con movimiento reducido`);
+    }
+  }
+});
+
+test('el scroll animado de JS respeta el movimiento reducido', () => {
+  for (const archivo of readdirSync(PUBLIC).filter((f) => f.endsWith('.js'))) {
+    const src = readFileSync(new URL(archivo, PUBLIC), 'utf8');
+    assert.ok(!/behavior:\s*['"]smooth['"]/.test(src), `${archivo} fuerza scroll animado: usar scrollBehavior()`);
+  }
+});
+
+test('en pantallas tactiles los campos van a 16px (iOS hace zoom con menos)', () => {
+  const inicio = css.indexOf('@media (pointer: coarse), (max-width: 480px)');
+  assert.ok(inicio >= 0, 'falta el bloque tactil');
+  const bloque = bloqueMedia(inicio);
+  assert.match(bloque, /select,[\s\S]*font-size:\s*16px/);
+  assert.match(bloque, /min-height:\s*40px/);
+});
+
+test('el foco de teclado es visible en botones, enlaces y elementos enfocables', () => {
+  assert.match(css, /button:focus-visible, a:focus-visible, summary:focus-visible, \[tabindex\]:focus-visible \{\s*outline: 2px solid var\(--accent\)/);
+});
+
+test('las regiones que cambian solas se anuncian a lectores de pantalla', () => {
+  const html = readFileSync(new URL('index.html', PUBLIC), 'utf8');
+  assert.ok(/id="toasts"[^>]*aria-live="polite"/.test(html), 'los avisos (toasts) deberian ser aria-live');
+  assert.ok(/id="sb-activity"[^>]*(role="status"|aria-live)/.test(html), 'la actividad del agente deberia ser un status');
+});

package/harness/packages/server/test/appearance.test.js

@@ -79,10 +79,14 @@ test('la validacion del server coincide con el registro del cliente', () => {
       'solarized-dark',
       'bosque',
       'vino',
+      'arena',
+      'hielo',
       'vercel',
       'dark-plus',
       'github',
       'github-dark',
+      'mocha',
+      'ebano',
     ].sort()
   );
   assert.equal(resolveThemeId('solarized-dark'), 'solarized-dark');

package/harness/packages/server/test/consoleModules.test.js

@@ -53,34 +53,147 @@ function importsDe(archivo) {
 const exportsPorModulo = new Map(modulos.map((m) => [m, exportsDe(m)]));
 const importsPorModulo = new Map(modulos.map((m) => [m, importsDe(m)]));
 
+/**
+ * Copia del source con cadenas, comentarios y literales regex **vaciados**
+ * (mismos largos y saltos de linea). Contar llaves/parentesis o buscar llamadas
+ * sobre esta copia no se confunde con un `}` de un string, un `(` de un
+ * comentario ni con los grupos de un regex. Los templates se vacian enteros
+ * salvo sus interpolaciones (`${...}`, que es codigo real): un barrido naive
+ * cierra en el backtick del template anidado (`${x.map((v) => `${v}`)}`) y
+ * desbalancea todo lo que viene despues.
+ */
+function sinCadenas(src) {
+  const out = [...src];
+  const vaciar = (i) => {
+    if (out[i] !== '\n') out[i] = ' ';
+    return i + 1;
+  };
+  // Un `/` abre regex salvo que venga de un valor (division): `a / b` vs
+  // `return /re/`, `if (/re/)`, `x = /re/`.
+  const TRAS_REGEX = new Set(['return', 'typeof', 'instanceof', 'in', 'of', 'delete', 'void', 'new', 'do', 'else', 'yield', 'await', 'case']);
+  const PUNCT_REGEX = new Set(['(', '[', '{', '=', ':', ',', ';', '!', '?', '&', '|', '+', '-', '*', '%', '^', '~', '<', '>', '']);
+  let ultimaPalabra = '';
+  let ultimoChar = '';
+
+  function plantilla(i) {
+    while (i < src.length) {
+      const c = src[i];
+      if (c === '\\') i = vaciar(vaciar(i));
+      else if (c === '`') return vaciar(i);
+      else if (c === '$' && src[i + 1] === '{') {
+        i = vaciar(vaciar(i));
+        i = codigo(i, true);
+        if (i < src.length) i = vaciar(i);
+      } else i = vaciar(i);
+    }
+    return i;
+  }
+
+  function literarRegex(i) {
+    let enClase = false;
+    i = vaciar(i);
+    while (i < src.length && src[i] !== '\n') {
+      const c = src[i];
+      if (c === '\\') {
+        i = vaciar(vaciar(i));
+        continue;
+      }
+      if (c === '[') enClase = true;
+      else if (c === ']') enClase = false;
+      else if (c === '/' && !enClase) return vaciar(i) + saltarFlags(i + 1);
+      i = vaciar(i);
+    }
+    return i + saltarFlags(i);
+  }
+
+  function saltarFlags(i) {
+    let j = i;
+    while (j < src.length && /[a-z]/i.test(src[j])) j = vaciar(j);
+    return j - i;
+  }
+
+  function codigo(i, cierraInterp) {
+    let prof = 0;
+    while (i < src.length) {
+      const c = src[i];
+      const dos = src[i + 1];
+      if (c === '/' && dos === '/') {
+        while (i < src.length && src[i] !== '\n') i = vaciar(i);
+        continue;
+      }
+      if (c === '/' && dos === '*') {
+        i = vaciar(vaciar(i));
+        while (i < src.length && !(src[i] === '*' && src[i + 1] === '/')) i = vaciar(i);
+        if (i < src.length) i = vaciar(vaciar(i));
+        continue;
+      }
+      if (c === '"' || c === "'") {
+        i = vaciar(i);
+        while (i < src.length && src[i] !== c) i = src[i] === '\\' ? vaciar(vaciar(i)) : vaciar(i);
+        if (i < src.length) i = vaciar(i);
+        ultimaPalabra = '';
+        ultimoChar = ')';
+        continue;
+      }
+      if (c === '`') {
+        i = plantilla(vaciar(i));
+        ultimaPalabra = '';
+        ultimoChar = ')';
+        continue;
+      }
+      const trasPalabra = ultimaPalabra && ultimoChar === ultimaPalabra[ultimaPalabra.length - 1];
+      const abreRegex = trasPalabra ? TRAS_REGEX.has(ultimaPalabra) : PUNCT_REGEX.has(ultimoChar);
+      if (c === '/' && abreRegex) {
+        i = literarRegex(i);
+        ultimaPalabra = '';
+        ultimoChar = ')';
+        continue;
+      }
+      if (cierraInterp) {
+        if (c === '{') prof += 1;
+        else if (c === '}') {
+          if (prof === 0) return i; // el `}` de cierre lo vacia el llamador
+          prof -= 1;
+        }
+      }
+      if (/[A-Za-z0-9_$]/.test(c)) {
+        ultimaPalabra += c;
+        ultimoChar = c;
+      } else if (!/\s/.test(c)) {
+        ultimaPalabra = '';
+        ultimoChar = c;
+      }
+      i += 1;
+    }
+    return i;
+  }
+
+  codigo(0, false);
+  return out.join('');
+}
+
 /**
  * Statements de nivel superior de un modulo, agrupando por balance de llaves y
  * parentesis. Asi `const x = f();` sale como un statement, y un
- * `addEventListener(...)` con un callback multilinea tambien.
+ * `addEventListener(...)` con un callback multilinea tambien. El texto se
+ * devuelve crudo (para los mensajes de error) pero el balance se cuenta sobre
+ * `sinCadenas`, que preserva largos y offsets.
  */
 function statementsTopLevel(src) {
+  const limpio = sinCadenas(src);
   const stmts = [];
   let actual = '';
   let inicio = 0;
   let llaves = 0;
   let corchetes = 0;
   let parentesis = 0;
-  let enCadena = '';
   let pos = 0;
-  for (const linea of src.split(/\r?\n/)) {
+  for (const linea of src.matchAll(/[^\n]*(?:\r?\n|$)/g)) {
+    if (!linea[0]) continue; // match vacio al final
+    const texto = linea[0].replace(/\r?\n$/, '');
     if (!actual) inicio = pos;
-    actual += `${actual ? '\n' : ''}${linea}`;
-    for (let i = 0; i < linea.length; i += 1) {
-      const c = linea[i];
-      const previo = linea[i - 1];
-      if (enCadena) {
-        if (c === enCadena && previo !== '\\') enCadena = '';
-        continue;
-      }
-      if (c === '"' || c === "'" || c === '`') {
-        enCadena = c;
-        continue;
-      }
+    actual += `${actual ? '\n' : ''}${texto}`;
+    for (const c of limpio.slice(pos, pos + texto.length)) {
       if (c === '{') llaves += 1;
       else if (c === '}') llaves -= 1;
       else if (c === '[') corchetes += 1;
@@ -88,7 +201,7 @@ function statementsTopLevel(src) {
       else if (c === '(') parentesis += 1;
       else if (c === ')') parentesis -= 1;
     }
-    pos += linea.length + 1;
+    pos += linea[0].length;
     if (llaves <= 0 && corchetes <= 0 && parentesis <= 0) {
       if (actual.trim()) stmts.push({ texto: actual, inicio });
       actual = '';
@@ -106,54 +219,28 @@ function statementsTopLevel(src) {
  * callbacks (`=> {...}`, `=> expr`, `function () {...}`) y literales de datos
  * (`= [...]`, `= {...}`), que a lo sumo guardan referencias. Lo que queda es lo
  * que se evalua al cargar el modulo.
- *
- * Recorre con estado de cadenas: un `=>` dentro de un template no es un arrow.
  */
 function sinDiferidos(stmt) {
-  const s = stmt.replace(/\r?\n/g, ' ');
+  const s = sinCadenas(stmt).replace(/\r?\n/g, ' ');
   let out = '';
   let i = 0;
-  let cadena = '';
   const cortarBloque = (desde) => {
     // Corta hasta el cierre balanceado de `{`/`[` abierto en `desde - 1`.
     let prof = 1;
     let j = desde;
-    let cad = '';
-    for (; j < s.length; j += 1) {
+    while (j < s.length) {
       const c = s[j];
-      const previo = s[j - 1];
-      if (cad) {
-        if (c === cad && previo !== '\\') cad = '';
-        continue;
-      }
-      if (c === '"' || c === "'" || c === '`') {
-        cad = c;
-        continue;
-      }
       if (c === '{' || c === '[') prof += 1;
       else if (c === '}' || c === ']') {
         prof -= 1;
         if (prof === 0) return j + 1;
       }
+      j += 1;
     }
     return j;
   };
-
   while (i < s.length) {
     const c = s[i];
-    const previo = s[i - 1];
-    if (cadena) {
-      out += c;
-      if (c === cadena && previo !== '\\') cadena = '';
-      i += 1;
-      continue;
-    }
-    if (c === '"' || c === "'" || c === '`') {
-      cadena = c;
-      out += c;
-      i += 1;
-      continue;
-    }
     const resto = s.slice(i);
     if (c === '=' && s[i + 1] === '>') {
       const despues = s.slice(i + 2).match(/^\s*([[{])/);
@@ -186,18 +273,7 @@ function sinDiferidos(stmt) {
 /** Profundidad de llaves antes del caracter `hasta` (para saber si es nivel 0). */
 function profundidadEn(src, hasta) {
   let prof = 0;
-  let cadena = '';
-  for (let i = 0; i < hasta; i += 1) {
-    const c = src[i];
-    const previo = src[i - 1];
-    if (cadena) {
-      if (c === cadena && previo !== '\\') cadena = '';
-      continue;
-    }
-    if (c === '"' || c === "'" || c === '`') {
-      cadena = c;
-      continue;
-    }
+  for (const c of sinCadenas(src).slice(0, hasta)) {
     if (c === '{') prof += 1;
     else if (c === '}') prof -= 1;
   }