@danieltmn/tamnora 0.21.1 → 0.22.0

package/harness/packages/server/public/styles.css

@@ -509,7 +509,14 @@ html, body {
   font: 13.5px/1.5 var(--font);
 }
 
-body { display: flex; flex-direction: column; background: var(--page-bg); }
+body {
+  display: flex;
+  flex-direction: column;
+  background: var(--page-bg);
+  /* Safe-area (notch / barra home en movil): reserva el inset para que no tape
+     el composer ni el final del chat. En desktop `env()` es 0. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
 pre, code, kbd, samp { font-family: var(--mono); }
 .muted { color: var(--muted); }
 
@@ -636,6 +643,12 @@ select, input, textarea {
 }
 select:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
 
+/* Foco de teclado visible (los inputs tienen su estilo propio arriba). */
+button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 /* layout ------------------------------------------------------------------ */
 main { flex: 1; min-height: 0; min-width: 0; display: flex; }
 .view { display: none; flex: 1; min-height: 0; min-width: 0; position: relative; }
@@ -2073,12 +2086,14 @@ dialog.file-modal.preview-maximized {
   width: 100vw;
   max-width: 100vw;
   height: 100vh;
+  height: 100dvh;
   max-height: 100vh;
+  max-height: 100dvh;
   margin: 0;
   border: 0;
   border-radius: 0;
 }
-.file-modal.preview-maximized .modal-card { height: 100vh; }
+.file-modal.preview-maximized .modal-card { height: 100vh; height: 100dvh; }
 .file-modal.preview-maximized .file-stage,
 .file-modal.preview-maximized .file-render,
 .file-modal.preview-maximized .code-view,
@@ -2350,6 +2365,10 @@ dialog.file-modal.preview-maximized {
   .messages {
     padding: 12px 11px 18px;
   }
+  .confirm-actions .btn {
+    flex: 1 1 auto;
+    min-height: 40px;
+  }
 }
 
 /* settings modal ---------------------------------------------------------- */
@@ -2424,6 +2443,7 @@ dialog.file-modal.preview-maximized {
 dialog.modal {
   width: min(760px, calc(100vw - 40px));
   max-height: calc(100vh - 60px);
+  max-height: calc(100dvh - 60px);
   padding: 0;
   border: 1px solid var(--border);
   border-radius: 18px;
@@ -2436,6 +2456,9 @@ dialog.modal {
 dialog.modal::backdrop { background: rgba(24, 22, 16, 0.55); backdrop-filter: blur(3px); }
 .modal-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
 .modal-card h3 { margin: 0; font: 700 17px var(--serif); letter-spacing: -0.02em; }
+.confirm-modal .modal-card { max-width: min(420px, 92vw); }
+.confirm-text { margin: 0; color: var(--muted, inherit); line-height: 1.5; }
+.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .row .spacer { flex: 1; }
 
 /* update banner ----------------------------------------------------------- */
@@ -2505,6 +2528,10 @@ dialog.modal::backdrop { background: rgba(24, 22, 16, 0.55); backdrop-filter: bl
 }
 .compact-rule::before,
 .compact-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+.compact-card.running .compact-rule { color: var(--accent); }
+.compact-card.running .compact-rule::before,
+.compact-card.running .compact-rule::after { background: var(--accent-soft); }
+.compact-rule .loader-thinking { width: 22px; height: 6px; }
 .compact-text {
   margin-top: 10px;
   padding-left: 12px;

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

@@ -0,0 +1,495 @@
+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 { 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(el('li', 'muted', 'Sin runs.'));
+}
+
+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');