@danieltmn/tamnora 0.24.1 → 0.25.0

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

@@ -1,216 +1,229 @@
-import { streamSse } from './runStream.js';
-
-let csrfToken = '';
-
-/** El token CSRF lo fija `boot()` tras leer `/api/auth/me`. */
-export function setCsrfToken(token) {
-  csrfToken = token || '';
-}
-
-export const $ = (sel) => document.querySelector(sel);
-
-export const state = {
-  sessionId: null,
-  streaming: false,
-  providers: [],
-  active: { provider: '', model: '' },
-  // Catalogo de modelos del proveedor y su seleccion. Se cachea porque el
-  // catalogo son cientos de modelos (~591 KB) y `loadModels` corre en cada
-  // cambio de pestana: refetchearlo hacia parpadear la consola.
-  modelCatalog: [],
-  modelCatalogProvider: null,
-  modelSignature: null,
-  visibleModels: [],
-  pendingInput: null,
-  permissionCards: new Map(),
-  questionCards: new Map(),
-  attachments: [],
-  home: null,
-  cwd: '',
-  explorerOpen: false,
-  sidebarOpen: true,
-  panes: new Map(),
-  tabOrder: [],
-  activeTab: null,
-  queues: new Map(),
-  // Grupos de sesiones abiertos a mano. Arranca vacio y NO se persiste: el
-  // sidebar siempre empieza con todas las carpetas sin expandir.
-  expandedGroups: new Set(),
-  // Sesiones con un run vivo segun el canal global de eventos. El sidebar lo
-  // usa para el punto de actividad antes de abrir la sesion.
-  remoteActive: new Set(),
-  // Permisos esperando decision: askId -> { sessionId, name, args }. Vive fuera
-  // del stream a proposito: un cliente sin stream abierto igual tiene que poder
-  // ver que la IA esta esperando una autorizacion suya.
-  pendingAsks: new Map(),
-  // Formularios interactivos (`ask_user`) esperando respuesta: askId -> { sessionId }.
-  pendingQuestions: new Map(),
-  // Ponerlo en cola para reconciliar apenas termine la que esta en curso.
-  reconcileAgain: false,
-};
-
-/* --- DOM helpers --------------------------------------------------------- */
-
-export function el(tag, className = '', text = '') {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text) node.textContent = text;
-  return node;
-}
-
-export function button(label, onClick, className = 'btn') {
-  const node = el('button', className, label);
-  node.type = 'button';
-  node.addEventListener('click', onClick);
-  return node;
-}
-
-export function clear(node) {
-  node.replaceChildren();
-}
-
-export const ICON_PATHS = {
-  x: ['M18 6 6 18', 'm6 6 12 12'],
-  'chevron-right': ['m9 18 6-6-6-6'],
-  'chevron-down': ['m6 9 6 6 6-6'],
-  folder: ['M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'],
-  'folder-open': ['m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'],
-  file: ['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z', 'M14 2v4a2 2 0 0 0 2 2h4'],
-  'refresh-cw': ['M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8', 'M21 3v5h-5', 'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16', 'M8 16H3v5'],
-  undo: ['M3 7v6h6', 'M3 13a9 9 0 1 1 2.64 6.36'],
-  trash: ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M10 11v6', 'M14 11v6'],
-  'dots-vertical': ['M12 5h.01', 'M12 12h.01', 'M12 19h.01'],
-  'dots-horizontal': ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'],
-  play: ['m6 4 14 8-14 8z'],
-  pause: ['M8 5v14', 'M16 5v14'],
-  square: ['M6 6h12v12H6z'],
-  copy: ['M8 8V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3', 'M5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z'],
-  pencil: ['M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z', 'm15 5 4 4'],
-};
-
-export function icon(name, size = 16, className = '') {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  if (className) svg.setAttribute('class', className);
-  for (const [key, value] of Object.entries({ viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.8', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', width: String(size), height: String(size), 'aria-hidden': 'true' })) {
-    svg.setAttribute(key, value);
-  }
-  for (const d of ICON_PATHS[name] ?? []) {
-    const node = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    node.setAttribute('d', d);
-    svg.appendChild(node);
-  }
-  return svg;
-}
-
-/**
- * Confirmacion accesible (reemplaza `window.confirm`): `<dialog>` modal con
- * Escape, foco inicial en cancelar y respuesta booleana.
- */
-export function showConfirm(
-  message,
-  { title = 'Confirmar', confirmLabel = 'aceptar', cancelLabel = 'cancelar', danger = false } = {}
-) {
-  return new Promise((resolve) => {
-    const dialog = document.createElement('dialog');
-    dialog.className = 'modal confirm-modal';
-    dialog.setAttribute('aria-label', title);
-    const card = el('div', 'modal-card');
-    card.append(el('h3', '', title), el('p', 'confirm-text', message));
-    const actions = el('div', 'confirm-actions');
-    const cancel = button(cancelLabel, () => dialog.close('cancel'), 'btn');
-    const ok = button(confirmLabel, () => dialog.close('confirm'), danger ? 'btn danger' : 'btn primary');
-    actions.append(cancel, ok);
-    card.append(actions);
-    dialog.append(card);
-    dialog.addEventListener('close', () => {
-      resolve(dialog.returnValue === 'confirm');
-      dialog.remove();
-    });
-    document.body.append(dialog);
-    dialog.showModal();
-    cancel.focus();
-  });
-}
-
-/* --- HTTP / SSE ---------------------------------------------------------- */
-
-// La cookie de sesion puede vencer con la pestana abierta: sin este interceptor
-// la UI mostraba tostadas genericas en cada accion. Un 401 = a la pantalla de
-// acceso, una sola vez.
-let sessionExpired = false;
-
-export async function api(path, { method = 'GET', body, headers = {} } = {}) {
-  const init = {};
-  if (body) init['Content-Type'] = 'application/json';
-  if (method !== 'GET' && csrfToken) init['x-csrf'] = csrfToken;
-  const res = await fetch(path, {
-    method,
-    headers: { ...init, ...headers },
-    body: body ? JSON.stringify(body) : undefined,
-  });
-  if (!res.ok) {
-    let message = res.statusText;
-    try {
-      message = (await res.json()).error ?? message;
-    } catch {
-      // keep statusText
-    }
-    const error = new Error(message);
-    // El status importa: un 409 significa que otro cliente tiene el turno.
-    error.status = res.status;
-    if (res.status === 401 && !sessionExpired) {
-      sessionExpired = true;
-      location.assign('/landing');
-    }
-    throw error;
-  }
-  return res.json();
-}
-
-export const streamPost = (url, body, onEvent, signal) =>
-  streamSse(url, { method: 'POST', body, csrf: csrfToken, signal }, onEvent);
-
-/** SSE GET de la consola (/api/sessions/:id/stream, /api/events). */
-export const openStream = (url, opts, onEvent) => streamSse(url, opts, onEvent);
-
-/* --- localStorage (todas las lecturas/escrituras pasan por aca) ------------ */
-
-export const storage = {
-  get(key, fallback = null) {
-    try {
-      const raw = localStorage.getItem(key);
-      return raw === null ? fallback : raw;
-    } catch {
-      return fallback;
-    }
-  },
-  getJson(key, fallback) {
-    try {
-      const raw = localStorage.getItem(key);
-      return raw === null ? fallback : JSON.parse(raw);
-    } catch {
-      return fallback;
-    }
-  },
-  set(key, value) {
-    try {
-      localStorage.setItem(key, value);
-    } catch {
-      // storage unavailable
-    }
-  },
-  setJson(key, value) {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch {
-      // storage unavailable
-    }
-  },
-  remove(key) {
-    try {
-      localStorage.removeItem(key);
-    } catch {
-      // storage unavailable
-    }
-  },
-};
+import { streamSse } from './runStream.js';
+
+let csrfToken = '';
+
+/** El token CSRF lo fija `boot()` tras leer `/api/auth/me`. */
+export function setCsrfToken(token) {
+  csrfToken = token || '';
+}
+
+export const $ = (sel) => document.querySelector(sel);
+
+/** `smooth` salvo que el sistema pida movimiento reducido. */
+export function scrollBehavior() {
+  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
+}
+
+export const state = {
+  sessionId: null,
+  streaming: false,
+  providers: [],
+  active: { provider: '', model: '' },
+  // Catalogo de modelos del proveedor y su seleccion. Se cachea porque el
+  // catalogo son cientos de modelos (~591 KB) y `loadModels` corre en cada
+  // cambio de pestana: refetchearlo hacia parpadear la consola.
+  modelCatalog: [],
+  modelCatalogProvider: null,
+  modelSignature: null,
+  visibleModels: [],
+  pendingInput: null,
+  permissionCards: new Map(),
+  questionCards: new Map(),
+  attachments: [],
+  home: null,
+  cwd: '',
+  explorerOpen: false,
+  sidebarOpen: true,
+  panes: new Map(),
+  tabOrder: [],
+  activeTab: null,
+  queues: new Map(),
+  // Grupos de sesiones abiertos a mano. Arranca vacio y NO se persiste: el
+  // sidebar siempre empieza con todas las carpetas sin expandir.
+  expandedGroups: new Set(),
+  // Sesiones con un run vivo segun el canal global de eventos. El sidebar lo
+  // usa para el punto de actividad antes de abrir la sesion.
+  remoteActive: new Set(),
+  // Permisos esperando decision: askId -> { sessionId, name, args }. Vive fuera
+  // del stream a proposito: un cliente sin stream abierto igual tiene que poder
+  // ver que la IA esta esperando una autorizacion suya.
+  pendingAsks: new Map(),
+  // Formularios interactivos (`ask_user`) esperando respuesta: askId -> { sessionId }.
+  pendingQuestions: new Map(),
+  // Ponerlo en cola para reconciliar apenas termine la que esta en curso.
+  reconcileAgain: false,
+};
+
+/* --- DOM helpers --------------------------------------------------------- */
+
+export function el(tag, className = '', text = '') {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text) node.textContent = text;
+  return node;
+}
+
+/** Item de lista vacia que dice que paso y que hacer, en vez de una linea gris suelta. */
+export function emptyState(title, hint = '') {
+  const node = el('li', 'empty-state');
+  node.appendChild(el('strong', '', title));
+  if (hint) node.appendChild(el('span', 'muted', hint));
+  return node;
+}
+
+export function button(label, onClick, className = 'btn') {
+  const node = el('button', className, label);
+  node.type = 'button';
+  node.addEventListener('click', onClick);
+  return node;
+}
+
+export function clear(node) {
+  node.replaceChildren();
+}
+
+export const ICON_PATHS = {
+  x: ['M18 6 6 18', 'm6 6 12 12'],
+  'chevron-right': ['m9 18 6-6-6-6'],
+  'chevron-down': ['m6 9 6 6 6-6'],
+  folder: ['M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'],
+  'folder-open': ['m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'],
+  file: ['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z', 'M14 2v4a2 2 0 0 0 2 2h4'],
+  'refresh-cw': ['M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8', 'M21 3v5h-5', 'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16', 'M8 16H3v5'],
+  undo: ['M3 7v6h6', 'M3 13a9 9 0 1 1 2.64 6.36'],
+  trash: ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M10 11v6', 'M14 11v6'],
+  'dots-vertical': ['M12 5h.01', 'M12 12h.01', 'M12 19h.01'],
+  'dots-horizontal': ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'],
+  play: ['m6 4 14 8-14 8z'],
+  pause: ['M8 5v14', 'M16 5v14'],
+  square: ['M6 6h12v12H6z'],
+  copy: ['M8 8V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3', 'M5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z'],
+  pencil: ['M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z', 'm15 5 4 4'],
+};
+
+export function icon(name, size = 16, className = '') {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  if (className) svg.setAttribute('class', className);
+  for (const [key, value] of Object.entries({ viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.8', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', width: String(size), height: String(size), 'aria-hidden': 'true' })) {
+    svg.setAttribute(key, value);
+  }
+  for (const d of ICON_PATHS[name] ?? []) {
+    const node = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    node.setAttribute('d', d);
+    svg.appendChild(node);
+  }
+  return svg;
+}
+
+/**
+ * Confirmacion accesible (reemplaza `window.confirm`): `<dialog>` modal con
+ * Escape, foco inicial en cancelar y respuesta booleana.
+ */
+export function showConfirm(
+  message,
+  { title = 'Confirmar', confirmLabel = 'aceptar', cancelLabel = 'cancelar', danger = false } = {}
+) {
+  return new Promise((resolve) => {
+    const dialog = document.createElement('dialog');
+    dialog.className = 'modal confirm-modal';
+    dialog.setAttribute('aria-label', title);
+    const card = el('div', 'modal-card');
+    card.append(el('h3', '', title), el('p', 'confirm-text', message));
+    const actions = el('div', 'confirm-actions');
+    const cancel = button(cancelLabel, () => dialog.close('cancel'), 'btn');
+    const ok = button(confirmLabel, () => dialog.close('confirm'), danger ? 'btn danger' : 'btn primary');
+    actions.append(cancel, ok);
+    card.append(actions);
+    dialog.append(card);
+    dialog.addEventListener('close', () => {
+      resolve(dialog.returnValue === 'confirm');
+      dialog.remove();
+    });
+    document.body.append(dialog);
+    dialog.showModal();
+    cancel.focus();
+  });
+}
+
+/* --- HTTP / SSE ---------------------------------------------------------- */
+
+// La cookie de sesion puede vencer con la pestana abierta: sin este interceptor
+// la UI mostraba tostadas genericas en cada accion. Un 401 = a la pantalla de
+// acceso, una sola vez.
+let sessionExpired = false;
+
+export async function api(path, { method = 'GET', body, headers = {} } = {}) {
+  const init = {};
+  if (body) init['Content-Type'] = 'application/json';
+  if (method !== 'GET' && csrfToken) init['x-csrf'] = csrfToken;
+  const res = await fetch(path, {
+    method,
+    headers: { ...init, ...headers },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    let message = res.statusText;
+    try {
+      message = (await res.json()).error ?? message;
+    } catch {
+      // keep statusText
+    }
+    const error = new Error(message);
+    // El status importa: un 409 significa que otro cliente tiene el turno.
+    error.status = res.status;
+    if (res.status === 401 && !sessionExpired) {
+      sessionExpired = true;
+      location.assign('/landing');
+    }
+    throw error;
+  }
+  return res.json();
+}
+
+export const streamPost = (url, body, onEvent, signal) =>
+  streamSse(url, { method: 'POST', body, csrf: csrfToken, signal }, onEvent);
+
+/** SSE GET de la consola (/api/sessions/:id/stream, /api/events). */
+export const openStream = (url, opts, onEvent) => streamSse(url, opts, onEvent);
+
+/* --- localStorage (todas las lecturas/escrituras pasan por aca) ------------ */
+
+export const storage = {
+  get(key, fallback = null) {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw === null ? fallback : raw;
+    } catch {
+      return fallback;
+    }
+  },
+  getJson(key, fallback) {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw === null ? fallback : JSON.parse(raw);
+    } catch {
+      return fallback;
+    }
+  },
+  set(key, value) {
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+      // storage unavailable
+    }
+  },
+  setJson(key, value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      // storage unavailable
+    }
+  },
+  remove(key) {
+    try {
+      localStorage.removeItem(key);
+    } catch {
+      // storage unavailable
+    }
+  },
+};