@danieltmn/tamnora 0.25.0 → 0.26.0

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

@@ -1,495 +1,356 @@
-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, 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';
-
-/* --- eval ---------------------------------------------------------------- */
-
-export const evalTasks = $('#eval-tasks');
-export const evalResults = $('#eval-results');
-export const evalSummary = $('#eval-summary');
-export const evalRunBtn = $('#eval-run');
-
-export function parseTasks(text) {
-  const trimmed = text.trim();
-  if (!trimmed) return [];
-  try {
-    const parsed = JSON.parse(trimmed);
-    return Array.isArray(parsed) ? parsed : [parsed];
-  } catch {
-    // fall through to JSONL
-  }
-  return trimmed
-    .split('\n')
-    .map((l) => l.trim())
-    .filter(Boolean)
-    .map((l) => JSON.parse(l));
-}
-
-export function setEvalSummary(text, cls = '') {
-  setSummaryText(evalSummary, text, cls);
-}
-
-export function detailOf(entry) {
-  if (entry.error) return entry.error;
-  return (entry.trace?.scorers ?? []).map((s) => `${s.scorer}:${s.passed ? 'ok' : 'no'}`).join(' ');
-}
-
-export function addResultRow(tbody, entry) {
-  const tr = el('tr');
-  const pass = entry.passed;
-  tr.append(
-    el('td', pass ? 'pass' : 'fail', pass ? '✓' : '·'),
-    el('td', '', entry.taskId ?? '—'),
-    el('td', '', entry.model ?? '—'),
-    el('td', '', entry.score === undefined || entry.score === null ? '' : String(entry.score)),
-    el('td', '', entry.durationMs === undefined ? '' : String(entry.durationMs)),
-    el('td', 'detail', detailOf(entry))
-  );
-  tbody.appendChild(tr);
-}
-
-export async function runEval() {
-  let tasks;
-  try {
-    tasks = parseTasks(evalTasks.value);
-  } catch (error) {
-    return setEvalSummary(`Dataset inválido: ${error.message}`, 'err');
-  }
-  const models = $('#eval-models')
-    .value.split(',')
-    .map((s) => s.trim())
-    .filter(Boolean);
-  if (!tasks.length) return setEvalSummary('Ingresá al menos una tarea.', 'err');
-  if (!models.length) return setEvalSummary('Ingresá al menos un modelo.', 'err');
-
-  clear(evalResults);
-  evalRunBtn.disabled = true;
-  setEvalSummary('corriendo…');
-  try {
-    await streamPost(
-      '/api/eval',
-      {
-        tasks,
-        models,
-        provider: providerSelect.value || undefined,
-        trials: Number($('#eval-trials').value) || 1,
-        concurrency: Number($('#eval-concurrency').value) || 1,
-        judgeModel: $('#eval-judge').value.trim() || undefined,
-        yes: yesInput.checked ? true : undefined,
-      },
-      (event, data) => {
-        if (event === 'run') setEvalSummary(`Run ${data.runId} · ${data.total} ejecuciones`);
-        else if (event === 'result') addResultRow(evalResults, data);
-        else if (event === 'summary') {
-          const s = data.summary;
-          setEvalSummary(`total ${s.total} · ${s.passed} ok · ${s.errors} errores · ${(s.durationMs / 1000).toFixed(1)}s`);
-        } else if (event === 'error') setEvalSummary(`Error: ${data.message}`, 'err');
-      }
-    );
-  } catch (error) {
-    setEvalSummary(`Error: ${error.message}`, 'err');
-  } finally {
-    evalRunBtn.disabled = false;
-  }
-}
-
-/* --- runs ---------------------------------------------------------------- */
-
-export const runsList = $('#runs-list');
-export const runDetail = $('#run-detail');
-
-export async function refreshRuns() {
-  const data = await api('/api/runs').catch(() => ({ runs: [] }));
-  clear(runsList);
-  clear(runDetail);
-  for (const run of data.runs) {
-    const li = el('li');
-    li.append(el('span', '', run.dataset || '(inline)'), el('span', 'muted', `${run.status} · ${new Date(run.created_at).toLocaleString()}`));
-    li.addEventListener('click', () => {
-      runsList.querySelectorAll('li').forEach((n) => n.classList.remove('active'));
-      li.classList.add('active');
-      openRun(run.id);
-    });
-    runsList.appendChild(li);
-  }
-  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) {
-  const data = await api(`/api/runs/${id}`);
-  clear(runDetail);
-  const summary = data.run.summary ?? {};
-  runDetail.appendChild(el('p', 'muted', `total ${summary.total ?? 0} · ${summary.passed ?? 0} ok · ${summary.errors ?? 0} errores`));
-  const table = el('table', 'results');
-  const thead = el('thead');
-  const head = el('tr');
-  for (const label of ['ok', 'tarea', 'modelo', 'score', 'ms', 'detalle']) head.appendChild(el('th', '', label));
-  thead.appendChild(head);
-  const tbody = el('tbody');
-  table.append(thead, tbody);
-  runDetail.appendChild(table);
-  for (const row of data.results) {
-    addResultRow(tbody, {
-      taskId: row.task_id,
-      model: row.model,
-      passed: Boolean(row.passed),
-      score: row.score,
-      durationMs: row.duration_ms,
-      trace: row.trace,
-    });
-  }
-}
-
-/* --- reconciliacion: la verdad no depende del canal ------------------------ */
-
-// El canal global lleva el heartbeat de 15 s del server, asi que 30 s son tres
-// pings: menos espera cuando lo que se pierde tiempo es que aparezca un permiso
-// que te esta esperando.
-export const CHANNEL_SILENCE_MS = 30000;
-
-export let lastState = null;
-export let reconciling = false;
-export let reconcileTimer = null;
-export let syncStale = false;
-
-/**
- * Un solo lugar decide que hacer con el estado remoto.
- *
- * Antes esto estaba repartido entre el canal global y un sweep: dos caminos que
- * se contradijian, lo que hacia que un SSE caido se tradujera en "no me entero
- * de nada". La logica de diff vive en `reconcile.js`, que es puro y testeado.
- *
- * La verdad es `/api/state`: un request corto. Los SSE son atajos de latencia.
- */
-export async function reconcile({ immediate = false } = {}) {
-  if (reconciling) {
-    // Si hay una en curso, encadenamos otra: si no, una mutacion que cae justo
-    // en medio se pierde.
-    if (immediate) state.reconcileAgain = true;
-    return;
-  }
-  reconciling = true;
-  try {
-    const remote = await api('/api/state');
-    syncStale = false;
-    renderSyncState();
-    applyState(diffState(localState({ panes: state.panes, asks: state.pendingAsks.keys() }), remote));
-    lastState = remote;
-    scheduleReconcile();
-  } catch (error) {
-    // Esto antes era un `.catch(() => null)` silencioso: un fallo de red se via
-    // exactamente igual que "no hay nada pendiente", y por eso no se podia
-    // diagnosticar nada.
-    syncStale = true;
-    renderSyncState(error);
-    scheduleReconcile();
-  } finally {
-    reconciling = false;
-    if (state.reconcileAgain) {
-      state.reconcileAgain = false;
-      reconcile();
-    }
-  }
-}
-
-export function scheduleReconcile() {
-  if (reconcileTimer) clearTimeout(reconcileTimer);
-  // Con un permiso pendiente hay algo esperandonos: la latencia se nota.
-  reconcileTimer = setTimeout(() => reconcile(), pollDelayMs(lastState));
-}
-
-export function applyState(diff) {
-  for (const id of diff.gone) closeTab(id);
-  for (const id of diff.toDetach) reloadPane(id);
-  for (const id of diff.toAttach) reloadPane(id);
-  for (const askId of diff.resolvedAsks) {
-    state.pendingAsks.delete(askId);
-    // `null` = alguien lo resolvio en otro lado: la tarjeta ya se cerro alla y
-    // solo hay que apagarla.
-    resolvePermissionCard(state.permissionCards.get(askId), null);
-  }
-  for (const ask of diff.newAsks) {
-    if (state.pendingAsks.has(ask.askId)) continue;
-    state.pendingAsks.set(ask.askId, ask);
-    toast(`Permiso pendiente: ${ask.name || 'una tool'}${state.panes.has(ask.sessionId) ? '' : ' en otra sesión'}.`);
-  }
-  // Los permisos pendientes se pintan siempre, sin importar por donde llegaron:
-  // asi tambien se ven cuando el canal estaba caido y llego por el snapshot.
-  for (const [askId, ask] of state.pendingAsks) {
-    const record = state.panes.get(ask.sessionId);
-    if (record && !livePermission(askId)) showStandalonePermission(record, ask);
-  }
-  state.remoteActive = new Set(diff.remoteActive);
-  renderSessions(diff.sessions);
-  renderTabs();
-  renderAlertSignals();
-}
-
-/* --- señales de alerta: que se note aun mirando otra cosa ----------------- */
-
-export const FAVICON_IDLE = '/favicon.ico';
-export const FAVICON_SOURCE = '/icons/icon-192x192.png';
-export let faviconAlert = '';
-export let faviconAlertPending = null;
-
-/**
- * El favicon de alerta se dibuja sobre una copia del logo (mismo origen), para
- * que el punto rojo combine con el icono real y no con un SVG desincronizado.
- */
-export function alertFavicon() {
-  if (faviconAlert) return Promise.resolve(faviconAlert);
-  if (faviconAlertPending) return faviconAlertPending;
-  faviconAlertPending = new Promise((resolve) => {
-    const img = new Image();
-    img.onload = () => {
-      try {
-        const canvas = document.createElement('canvas');
-        canvas.width = 64;
-        canvas.height = 64;
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(img, 0, 0, 64, 64);
-        ctx.beginPath();
-        ctx.arc(64 - 16, 16, 13, 0, Math.PI * 2);
-        ctx.fillStyle = '#d9704a';
-        ctx.fill();
-        ctx.lineWidth = 3;
-        ctx.strokeStyle = 'rgba(35,26,23,0.9)';
-        ctx.stroke();
-        faviconAlert = canvas.toDataURL('image/png');
-        resolve(faviconAlert);
-      } catch {
-        resolve(FAVICON_IDLE);
-      }
-    };
-    img.onerror = () => resolve(FAVICON_IDLE);
-    img.src = FAVICON_SOURCE;
-  });
-  return faviconAlertPending;
-}
-
-export let baseTitle = '';
-
-/**
- * Cuando iOS manda la pestana a background mata los timers y los SSE. El
- * titulo y el favicon son las **unicas** señales que quedan, asi que los dos
- * tienen que marcar que hay un permiso esperando.
- */
-export function renderAlertSignals() {
-  const pending = state.pendingAsks.size + state.pendingQuestions.size;
-  if (!baseTitle) baseTitle = document.title;
-  const clean = baseTitle.replace(/^\(⚠ \d+\) /, '');
-  document.title = pending > 0 ? `(⚠ ${pending}) ${clean}` : clean;
-  const link = document.querySelector('link[rel="icon"]');
-  if (link) {
-    if (pending > 0) alertFavicon().then((href) => { link.href = href; });
-    else link.href = FAVICON_IDLE;
-  }
-}
-
-/* --- canal global: solo latencia ------------------------------------------ */
-
-/**
- * Un SSE por pestana para enterarse al instante. **No decide nada**: dispara
- * `reconcile()`. Si se cae -que es lo normal en un tunel, y lo que hace iOS al
- * mandar la pestana a background- solo perdemos inmediatez, no correctitud.
- */
-export function handleGlobalEvent(event) {
-  // No decide nada: solo pide el estado fresco. El diff es el unico que sabe
-  // que hay que hacer.
-  if (event === 'run_start' || event === 'run_end' || event === 'permission' || event === 'permission_resolved' || event === 'snapshot') {
-    reconcile({ immediate: true });
-  }
-}
-
-export let eventsController = null;
-export let channelState = 'off';
-export let channelReason = '';
-
-export function renderChannelState() {
-  const node = $('#sb-channel');
-  if (!node) return;
-  if (channelState === 'live') {
-    node.hidden = true;
-    return;
-  }
-  node.hidden = false;
-  node.className = `sb-channel ${channelState}`;
-  node.textContent = channelState === 'off' ? 'sin canal' : 'reconectando…';
-  node.title = channelReason
-    ? `Canal de eventos caido (${channelReason}). Los cambios llegan igual por sondeo cada ${Math.round(pollDelayMs(lastState) / 1000)} s, pero con retardo.`
-    : 'Canal de eventos: sin novedades instantaneas.';
-}
-
-/** El sondeo de /api/state tambien puede caerse; eso si hay que verlo. */
-export function renderSyncState(error) {
-  const node = $('#sb-sync');
-  if (!node) return;
-  node.hidden = !syncStale;
-  node.className = 'sb-channel retrying';
-  node.textContent = 'sin sincronía';
-  node.title = error
-    ? `No pude leer el estado del server: ${error.message}. Reintentando cada ${Math.round(pollDelayMs(lastState) / 1000)} s.`
-    : 'No pude leer el estado del server. Reintentando.';
-}
-
-export async function followEvents() {
-  if (eventsController && !eventsController.signal.aborted) return;
-  const controller = new AbortController();
-  eventsController = controller;
-  channelState = 'waiting';
-  channelReason = '';
-  renderChannelState();
-  await followRun({
-    signal: controller.signal,
-    attempts: Infinity,
-    backoff: [1000, 2000, 5000, 10000, 15000],
-    onRetry: ({ attempt, error }) => {
-      channelState = 'retrying';
-      channelReason = error?.message ? `${error.message} (intento ${attempt})` : `sin datos (intento ${attempt})`;
-      renderChannelState();
-    },
-    open: (cursor, signal) =>
-      openStream('/api/events', { signal, silenceMs: CHANNEL_SILENCE_MS }, (event, data) => {
-        channelState = 'live';
-        channelReason = '';
-        renderChannelState();
-        handleGlobalEvent(event, data);
-      }),
-  })
-    .catch((error) => {
-      // Un AbortError es que estamos cerrando. Cualquier otra cosa es un bug de
-      // la consola: se avisa en vez de dejar un "reconectando" que no dice nada.
-      if (error?.name === 'AbortError') return;
-      channelState = 'off';
-      channelReason = error?.message ?? String(error);
-      renderChannelState();
-      toast(`Canal de eventos roto: ${error?.message ?? error}`);
-    })
-    .finally(() => {
-      if (eventsController === controller) {
-        channelState = 'off';
-        renderChannelState();
-      }
-    });
-}
-
-/* --- ciclo de vida --------------------------------------------------------- */
-
-export function watchLifecycle() {
-  // Volver a `visible` es el momento de reconciliar: iOS congela los timers en
-  // background, asi que esperar al proximo tick puede ser Mucho tiempo.
-  const wake = () => {
-    reconcile({ immediate: true });
-    sendPresence();
-    if (!eventsController || eventsController.signal.aborted) followEvents();
-  };
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') wake();
-  });
-  window.addEventListener('pageshow', wake);
-  window.addEventListener('online', wake);
-  window.addEventListener('focus', wake);
-  // La cache del server dura 10 min: revisar al volver a la pestaña es barato.
-  refreshUpdate();
-}
-
-/* --- actualizacion de version --------------------------------------------- */
-
-export const UPDATE_DISMISS_KEY = 'tamnora-update-dismissed';
-export const updateBanner = $('#update-banner');
-export const updateBannerText = $('#update-banner-text');
-export let updateInfo = null;
-
-export function showUpdateBanner(info, { force = false } = {}) {
-  if (!updateBanner || !info?.updateAvailable) return;
-  if (!force && storage.get(UPDATE_DISMISS_KEY) === String(info.latest)) return;
-  updateInfo = info;
-  updateBannerText.textContent = `Hay una versión nueva (v${info.latest}); tenés la v${info.current}.`;
-  updateBanner.hidden = false;
-  const ver = document.querySelector('.brand .ver');
-  if (ver) {
-    ver.classList.add('has-update');
-    ver.title = `Actualización disponible: v${info.latest}`;
-  }
-}
-
-export async function refreshUpdate() {
-  if (!updateBanner) return;
-  const info = await api('/api/update').catch(() => null);
-  if (info?.updateAvailable) showUpdateBanner(info);
-}
-
-export function dismissUpdate() {
-  if (updateInfo?.latest) storage.set(UPDATE_DISMISS_KEY, String(updateInfo.latest));
-  if (updateBanner) updateBanner.hidden = true;
-}
-
-/** Chequeo manual (click en la version): fuerza la consulta y avisa el resultado. */
-export async function forceUpdateCheck() {
-  const ver = document.querySelector('.brand .ver');
-  const original = ver?.textContent;
-  if (ver) ver.textContent = '…';
-  const info = await api('/api/update?force=1').catch(() => null);
-  if (ver) ver.textContent = info?.current ? `v${info.current}` : original;
-  if (!info) return toast('No pude consultar la versión.');
-  if (info.updateAvailable) {
-    showUpdateBanner(info, { force: true });
-    toast(`Hay una versión nueva: v${info.latest}`);
-  } else if (info.error) {
-    toast(`No pude consultar npm: ${info.error}`);
-  } else {
-    toast(`Estás al día (v${info.current}).`);
-  }
-}
-
-/** Espera a que el server reiniciado vuelva a responder `/api/health`. */
-export async function waitServerVersion(tries = 45) {
-  for (let i = 0; i < tries; i++) {
-    await new Promise((r) => setTimeout(r, 2000));
-    const health = await fetch('/api/health', { cache: 'no-store' })
-      .then((r) => (r.ok ? r.json() : null))
-      .catch(() => null);
-    if (health?.version) return health.version;
-  }
-  return '';
-}
-
-export async function runUpdate() {
-  if (!updateInfo) return;
-  if (
-    !(await showConfirm(`¿Actualizar a la v${updateInfo.latest}? La consola se reinicia sola.`, {
-      title: 'Actualizar Tamnora',
-      confirmLabel: 'actualizar',
-    }))
-  ) {
-    return;
-  }
-  const runBtn = $('#update-run');
-  const laterBtn = $('#update-later');
-  if (runBtn) runBtn.disabled = true;
-  if (laterBtn) laterBtn.disabled = true;
-  updateBannerText.textContent = `Actualizando a v${updateInfo.latest}…`;
-  const res = await api('/api/update', { method: 'POST' }).catch((error) => ({ error: error.message }));
-  if (res?.error) {
-    updateBannerText.textContent = `No se pudo actualizar: ${res.error}`;
-    if (runBtn) runBtn.disabled = false;
-    if (laterBtn) laterBtn.disabled = false;
-    return;
-  }
-  updateBannerText.textContent = 'Instalando la versión nueva… la consola se va a reconectar.';
-  const version = await waitServerVersion();
-  if (version) {
-    updateBannerText.textContent = `Actualizado a v${version}. Recargando…`;
-    setTimeout(() => location.reload(), 900);
-  } else {
-    updateBannerText.textContent = 'No pude confirmar el reinicio. Recargá la página en unos segundos.';
-    if (runBtn) runBtn.disabled = false;
-    if (laterBtn) laterBtn.disabled = false;
-  }
-}
-
-export const brandVerEl = document.querySelector('.brand .ver');
+import { livePermission, reloadPane, renderSessions, resolvePermissionCard, sendPresence } from './chat.js';
+import { toast } from './commands.js';
+import { $, api, openStream, showConfirm, state, storage } from './core.js';
+import { diffState, localState, pollDelayMs } from './reconcile.js';
+import { followRun } from './runStream.js';
+import { closeTab, renderTabs, showStandalonePermission } from './sessions.js';
+
+/* --- reconciliacion: la verdad no depende del canal ------------------------ */
+
+// El canal global lleva el heartbeat de 15 s del server, asi que 30 s son tres
+// pings: menos espera cuando lo que se pierde tiempo es que aparezca un permiso
+// que te esta esperando.
+export const CHANNEL_SILENCE_MS = 30000;
+
+export let lastState = null;
+export let reconciling = false;
+export let reconcileTimer = null;
+export let syncStale = false;
+
+/**
+ * Un solo lugar decide que hacer con el estado remoto.
+ *
+ * Antes esto estaba repartido entre el canal global y un sweep: dos caminos que
+ * se contradijian, lo que hacia que un SSE caido se tradujera en "no me entero
+ * de nada". La logica de diff vive en `reconcile.js`, que es puro y testeado.
+ *
+ * La verdad es `/api/state`: un request corto. Los SSE son atajos de latencia.
+ */
+export async function reconcile({ immediate = false } = {}) {
+  if (reconciling) {
+    // Si hay una en curso, encadenamos otra: si no, una mutacion que cae justo
+    // en medio se pierde.
+    if (immediate) state.reconcileAgain = true;
+    return;
+  }
+  reconciling = true;
+  try {
+    const remote = await api('/api/state');
+    syncStale = false;
+    renderSyncState();
+    applyState(diffState(localState({ panes: state.panes, asks: state.pendingAsks.keys() }), remote));
+    lastState = remote;
+    scheduleReconcile();
+  } catch (error) {
+    // Esto antes era un `.catch(() => null)` silencioso: un fallo de red se via
+    // exactamente igual que "no hay nada pendiente", y por eso no se podia
+    // diagnosticar nada.
+    syncStale = true;
+    renderSyncState(error);
+    scheduleReconcile();
+  } finally {
+    reconciling = false;
+    if (state.reconcileAgain) {
+      state.reconcileAgain = false;
+      reconcile();
+    }
+  }
+}
+
+export function scheduleReconcile() {
+  if (reconcileTimer) clearTimeout(reconcileTimer);
+  // Con un permiso pendiente hay algo esperandonos: la latencia se nota.
+  reconcileTimer = setTimeout(() => reconcile(), pollDelayMs(lastState));
+}
+
+export function applyState(diff) {
+  for (const id of diff.gone) closeTab(id);
+  for (const id of diff.toDetach) reloadPane(id);
+  for (const id of diff.toAttach) reloadPane(id);
+  for (const askId of diff.resolvedAsks) {
+    state.pendingAsks.delete(askId);
+    // `null` = alguien lo resolvio en otro lado: la tarjeta ya se cerro alla y
+    // solo hay que apagarla.
+    resolvePermissionCard(state.permissionCards.get(askId), null);
+  }
+  for (const ask of diff.newAsks) {
+    if (state.pendingAsks.has(ask.askId)) continue;
+    state.pendingAsks.set(ask.askId, ask);
+    toast(`Permiso pendiente: ${ask.name || 'una tool'}${state.panes.has(ask.sessionId) ? '' : ' en otra sesión'}.`);
+  }
+  // Los permisos pendientes se pintan siempre, sin importar por donde llegaron:
+  // asi tambien se ven cuando el canal estaba caido y llego por el snapshot.
+  for (const [askId, ask] of state.pendingAsks) {
+    const record = state.panes.get(ask.sessionId);
+    if (record && !livePermission(askId)) showStandalonePermission(record, ask);
+  }
+  state.remoteActive = new Set(diff.remoteActive);
+  renderSessions(diff.sessions);
+  renderTabs();
+  renderAlertSignals();
+}
+
+/* --- señales de alerta: que se note aun mirando otra cosa ----------------- */
+
+export const FAVICON_IDLE = '/favicon.ico';
+export const FAVICON_SOURCE = '/icons/icon-192x192.png';
+export let faviconAlert = '';
+export let faviconAlertPending = null;
+
+/**
+ * El favicon de alerta se dibuja sobre una copia del logo (mismo origen), para
+ * que el punto rojo combine con el icono real y no con un SVG desincronizado.
+ */
+export function alertFavicon() {
+  if (faviconAlert) return Promise.resolve(faviconAlert);
+  if (faviconAlertPending) return faviconAlertPending;
+  faviconAlertPending = new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = 64;
+        canvas.height = 64;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, 64, 64);
+        ctx.beginPath();
+        ctx.arc(64 - 16, 16, 13, 0, Math.PI * 2);
+        ctx.fillStyle = '#d9704a';
+        ctx.fill();
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = 'rgba(35,26,23,0.9)';
+        ctx.stroke();
+        faviconAlert = canvas.toDataURL('image/png');
+        resolve(faviconAlert);
+      } catch {
+        resolve(FAVICON_IDLE);
+      }
+    };
+    img.onerror = () => resolve(FAVICON_IDLE);
+    img.src = FAVICON_SOURCE;
+  });
+  return faviconAlertPending;
+}
+
+export let baseTitle = '';
+
+/**
+ * Cuando iOS manda la pestana a background mata los timers y los SSE. El
+ * titulo y el favicon son las **unicas** señales que quedan, asi que los dos
+ * tienen que marcar que hay un permiso esperando.
+ */
+export function renderAlertSignals() {
+  const pending = state.pendingAsks.size + state.pendingQuestions.size;
+  if (!baseTitle) baseTitle = document.title;
+  const clean = baseTitle.replace(/^\(⚠ \d+\) /, '');
+  document.title = pending > 0 ? `(⚠ ${pending}) ${clean}` : clean;
+  const link = document.querySelector('link[rel="icon"]');
+  if (link) {
+    if (pending > 0) alertFavicon().then((href) => { link.href = href; });
+    else link.href = FAVICON_IDLE;
+  }
+}
+
+/* --- canal global: solo latencia ------------------------------------------ */
+
+/**
+ * Un SSE por pestana para enterarse al instante. **No decide nada**: dispara
+ * `reconcile()`. Si se cae -que es lo normal en un tunel, y lo que hace iOS al
+ * mandar la pestana a background- solo perdemos inmediatez, no correctitud.
+ */
+export function handleGlobalEvent(event) {
+  // No decide nada: solo pide el estado fresco. El diff es el unico que sabe
+  // que hay que hacer.
+  if (event === 'run_start' || event === 'run_end' || event === 'permission' || event === 'permission_resolved' || event === 'snapshot') {
+    reconcile({ immediate: true });
+  }
+}
+
+export let eventsController = null;
+export let channelState = 'off';
+export let channelReason = '';
+
+export function renderChannelState() {
+  const node = $('#sb-channel');
+  if (!node) return;
+  if (channelState === 'live') {
+    node.hidden = true;
+    return;
+  }
+  node.hidden = false;
+  node.className = `sb-channel ${channelState}`;
+  node.textContent = channelState === 'off' ? 'sin canal' : 'reconectando…';
+  node.title = channelReason
+    ? `Canal de eventos caido (${channelReason}). Los cambios llegan igual por sondeo cada ${Math.round(pollDelayMs(lastState) / 1000)} s, pero con retardo.`
+    : 'Canal de eventos: sin novedades instantaneas.';
+}
+
+/** El sondeo de /api/state tambien puede caerse; eso si hay que verlo. */
+export function renderSyncState(error) {
+  const node = $('#sb-sync');
+  if (!node) return;
+  node.hidden = !syncStale;
+  node.className = 'sb-channel retrying';
+  node.textContent = 'sin sincronía';
+  node.title = error
+    ? `No pude leer el estado del server: ${error.message}. Reintentando cada ${Math.round(pollDelayMs(lastState) / 1000)} s.`
+    : 'No pude leer el estado del server. Reintentando.';
+}
+
+export async function followEvents() {
+  if (eventsController && !eventsController.signal.aborted) return;
+  const controller = new AbortController();
+  eventsController = controller;
+  channelState = 'waiting';
+  channelReason = '';
+  renderChannelState();
+  await followRun({
+    signal: controller.signal,
+    attempts: Infinity,
+    backoff: [1000, 2000, 5000, 10000, 15000],
+    onRetry: ({ attempt, error }) => {
+      channelState = 'retrying';
+      channelReason = error?.message ? `${error.message} (intento ${attempt})` : `sin datos (intento ${attempt})`;
+      renderChannelState();
+    },
+    open: (cursor, signal) =>
+      openStream('/api/events', { signal, silenceMs: CHANNEL_SILENCE_MS }, (event, data) => {
+        channelState = 'live';
+        channelReason = '';
+        renderChannelState();
+        handleGlobalEvent(event, data);
+      }),
+  })
+    .catch((error) => {
+      // Un AbortError es que estamos cerrando. Cualquier otra cosa es un bug de
+      // la consola: se avisa en vez de dejar un "reconectando" que no dice nada.
+      if (error?.name === 'AbortError') return;
+      channelState = 'off';
+      channelReason = error?.message ?? String(error);
+      renderChannelState();
+      toast(`Canal de eventos roto: ${error?.message ?? error}`);
+    })
+    .finally(() => {
+      if (eventsController === controller) {
+        channelState = 'off';
+        renderChannelState();
+      }
+    });
+}
+
+/* --- ciclo de vida --------------------------------------------------------- */
+
+export function watchLifecycle() {
+  // Volver a `visible` es el momento de reconciliar: iOS congela los timers en
+  // background, asi que esperar al proximo tick puede ser Mucho tiempo.
+  const wake = () => {
+    reconcile({ immediate: true });
+    sendPresence();
+    if (!eventsController || eventsController.signal.aborted) followEvents();
+  };
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') wake();
+  });
+  window.addEventListener('pageshow', wake);
+  window.addEventListener('online', wake);
+  window.addEventListener('focus', wake);
+  // La cache del server dura 10 min: revisar al volver a la pestaña es barato.
+  refreshUpdate();
+}
+
+/* --- actualizacion de version --------------------------------------------- */
+
+export const UPDATE_DISMISS_KEY = 'tamnora-update-dismissed';
+export const updateBanner = $('#update-banner');
+export const updateBannerText = $('#update-banner-text');
+export let updateInfo = null;
+
+export function showUpdateBanner(info, { force = false } = {}) {
+  if (!updateBanner || !info?.updateAvailable) return;
+  if (!force && storage.get(UPDATE_DISMISS_KEY) === String(info.latest)) return;
+  updateInfo = info;
+  updateBannerText.textContent = `Hay una versión nueva (v${info.latest}); tenés la v${info.current}.`;
+  updateBanner.hidden = false;
+  const ver = document.querySelector('.brand .ver');
+  if (ver) {
+    ver.classList.add('has-update');
+    ver.title = `Actualización disponible: v${info.latest}`;
+  }
+}
+
+export async function refreshUpdate() {
+  if (!updateBanner) return;
+  const info = await api('/api/update').catch(() => null);
+  if (info?.updateAvailable) showUpdateBanner(info);
+}
+
+export function dismissUpdate() {
+  if (updateInfo?.latest) storage.set(UPDATE_DISMISS_KEY, String(updateInfo.latest));
+  if (updateBanner) updateBanner.hidden = true;
+}
+
+/** Chequeo manual (click en la version): fuerza la consulta y avisa el resultado. */
+export async function forceUpdateCheck() {
+  const ver = document.querySelector('.brand .ver');
+  const original = ver?.textContent;
+  if (ver) ver.textContent = '…';
+  const info = await api('/api/update?force=1').catch(() => null);
+  if (ver) ver.textContent = info?.current ? `v${info.current}` : original;
+  if (!info) return toast('No pude consultar la versión.');
+  if (info.updateAvailable) {
+    showUpdateBanner(info, { force: true });
+    toast(`Hay una versión nueva: v${info.latest}`);
+  } else if (info.error) {
+    toast(`No pude consultar npm: ${info.error}`);
+  } else {
+    toast(`Estás al día (v${info.current}).`);
+  }
+}
+
+/** Espera a que el server reiniciado vuelva a responder `/api/health`. */
+export async function waitServerVersion(tries = 45) {
+  for (let i = 0; i < tries; i++) {
+    await new Promise((r) => setTimeout(r, 2000));
+    const health = await fetch('/api/health', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .catch(() => null);
+    if (health?.version) return health.version;
+  }
+  return '';
+}
+
+export async function runUpdate() {
+  if (!updateInfo) return;
+  if (
+    !(await showConfirm(`¿Actualizar a la v${updateInfo.latest}? La consola se reinicia sola.`, {
+      title: 'Actualizar Tamnora',
+      confirmLabel: 'actualizar',
+    }))
+  ) {
+    return;
+  }
+  const runBtn = $('#update-run');
+  const laterBtn = $('#update-later');
+  if (runBtn) runBtn.disabled = true;
+  if (laterBtn) laterBtn.disabled = true;
+  updateBannerText.textContent = `Actualizando a v${updateInfo.latest}…`;
+  const res = await api('/api/update', { method: 'POST' }).catch((error) => ({ error: error.message }));
+  if (res?.error) {
+    updateBannerText.textContent = `No se pudo actualizar: ${res.error}`;
+    if (runBtn) runBtn.disabled = false;
+    if (laterBtn) laterBtn.disabled = false;
+    return;
+  }
+  updateBannerText.textContent = 'Instalando la versión nueva… la consola se va a reconectar.';
+  const version = await waitServerVersion();
+  if (version) {
+    updateBannerText.textContent = `Actualizado a v${version}. Recargando…`;
+    setTimeout(() => location.reload(), 900);
+  } else {
+    updateBannerText.textContent = 'No pude confirmar el reinicio. Recargá la página en unos segundos.';
+    if (runBtn) runBtn.disabled = false;
+    if (laterBtn) laterBtn.disabled = false;
+  }
+}
+
+export const brandVerEl = document.querySelector('.brand .ver');