@danieltmn/tamnora 0.1.0

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

@@ -0,0 +1,2188 @@
+// Tamnora console — dependency-free client for the harness server (terminal theme).
+
+import { renderMarkdown } from './markdown.js';
+
+const $ = (sel) => document.querySelector(sel);
+let csrfToken = '';
+const state = {
+  sessionId: null,
+  streaming: false,
+  providers: [],
+  active: { provider: '', model: '' },
+  pendingInput: null,
+  permissionCards: new Map(),
+  attachments: [],
+  home: null,
+  cwd: '',
+  explorerOpen: false,
+  sidebarOpen: true,
+  panes: new Map(),
+  tabOrder: [],
+  activeTab: null,
+  collapsedGroups: new Set(),
+};
+
+function setCwd(value) {
+  if (!value) return;
+  state.cwd = value;
+  $('#rail-cwd').textContent = value;
+  if (state.explorerOpen) refreshExplorer();
+}
+
+/* --- DOM helpers --------------------------------------------------------- */
+
+function el(tag, className = '', text = '') {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text) node.textContent = text;
+  return node;
+}
+
+function button(label, onClick, className = 'btn') {
+  const node = el('button', className, label);
+  node.type = 'button';
+  node.addEventListener('click', onClick);
+  return node;
+}
+
+function clear(node) {
+  node.replaceChildren();
+}
+
+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'],
+};
+
+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;
+}
+
+function truncate(value, max = 400) {
+  const text = String(value ?? '');
+  return text.length > max ? `${text.slice(0, max)}…` : text;
+}
+
+/* --- HTTP / SSE ---------------------------------------------------------- */
+
+async function api(path, { method = 'GET', body } = {}) {
+  const headers = {};
+  if (body) headers['Content-Type'] = 'application/json';
+  if (method !== 'GET' && csrfToken) headers['x-csrf'] = csrfToken;
+  const res = await fetch(path, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    let message = res.statusText;
+    try {
+      message = (await res.json()).error ?? message;
+    } catch {
+      // keep statusText
+    }
+    throw new Error(message);
+  }
+  return res.json();
+}
+
+async function streamPost(url, body, onEvent, signal) {
+  const headers = { 'Content-Type': 'application/json' };
+  if (csrfToken) headers['x-csrf'] = csrfToken;
+  const res = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(body),
+    signal,
+  });
+  if (!res.ok) {
+    let message = res.statusText;
+    try {
+      message = (await res.json()).error ?? message;
+    } catch {
+      // keep statusText
+    }
+    throw new Error(message);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    let index;
+    while ((index = buffer.indexOf('\n\n')) !== -1) {
+      const frame = buffer.slice(0, index);
+      buffer = buffer.slice(index + 2);
+      let event = 'message';
+      let data = '';
+      for (const line of frame.split('\n')) {
+        if (line.startsWith('event:')) event = line.slice(6).trim();
+        else if (line.startsWith('data:')) data += line.slice(5).trim();
+      }
+      let parsed = {};
+      if (data) {
+        try {
+          parsed = JSON.parse(data);
+        } catch {
+          parsed = { raw: data };
+        }
+      }
+      onEvent(event, parsed);
+    }
+  }
+}
+
+/* --- tabs ---------------------------------------------------------------- */
+
+const moreTab = $('#more-tab');
+const moreMenu = $('#more-menu');
+
+function hideMoreMenu() {
+  moreMenu.hidden = true;
+  moreTab.setAttribute('aria-expanded', 'false');
+}
+
+function activateTab(name) {
+  document.querySelectorAll('.tab[data-tab]').forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
+  moreTab.classList.toggle('active', name === 'eval' || name === 'runs');
+  document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${name}`));
+  hideMoreMenu();
+  if (name === 'runs') refreshRuns();
+  if (name === 'proveedores') refreshProviders();
+}
+
+document.querySelectorAll('.tab[data-tab]').forEach((t) =>
+  t.addEventListener('click', () => activateTab(t.dataset.tab))
+);
+moreTab.addEventListener('click', (event) => {
+  event.stopPropagation();
+  const open = moreMenu.hidden;
+  moreMenu.hidden = !open;
+  moreTab.setAttribute('aria-expanded', String(open));
+});
+document.querySelectorAll('#more-menu button').forEach((item) =>
+  item.addEventListener('click', () => activateTab(item.dataset.tab))
+);
+document.addEventListener('click', (event) => {
+  if (!moreMenu.hidden && !event.target.closest('.menu')) hideMoreMenu();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && !moreMenu.hidden) hideMoreMenu();
+});
+
+/* --- settings modal (modo / proveedor / modelo / auto) -------------------- */
+
+const settingsModal = $('#settings-modal');
+if (settingsModal) {
+  $('#settings-toggle')?.addEventListener('click', () => settingsModal.showModal());
+  $('#settings-close')?.addEventListener('click', () => settingsModal.close());
+  $('#settings-done')?.addEventListener('click', () => settingsModal.close());
+  $('#settings-providers')?.addEventListener('click', () => {
+    settingsModal.close();
+    activateTab('proveedores');
+  });
+  settingsModal.addEventListener('click', (event) => {
+    if (event.target === settingsModal) settingsModal.close();
+  });
+}
+
+/* --- command palette (Ctrl/Cmd+K) ----------------------------------------- */
+
+const PALETTE_COMMANDS = [
+  { id: 'new', label: 'Nueva sesión en otra carpeta', hint: '/new', run: () => openFolderPicker() },
+  { id: 'init', label: 'Analizar el proyecto y crear AGENTS.md', hint: '/init', run: () => runSlash('init') },
+  { id: 'compact', label: 'Compactar la conversación', hint: '/compact', run: () => runSlash('compact') },
+  { id: 'clear', label: 'Limpiar la conversación', hint: '/clear', run: () => runSlash('clear') },
+  { id: 'settings', label: 'Ajustes del agente (modelo, modo, auto)', run: () => settingsModal?.showModal() },
+  { id: 'providers', label: 'Gestionar proveedores', run: () => activateTab('proveedores') },
+  { id: 'explorer', label: 'Mostrar u ocultar archivos', run: () => setExplorerOpen(!state.explorerOpen) },
+  { id: 'sidebar', label: 'Mostrar u ocultar sesiones', run: () => setSidebarOpen(!state.sidebarOpen) },
+  { id: 'theme', label: 'Cambiar tema', run: () => applyTheme(document.documentElement.dataset.theme === 'paper' ? 'dark' : 'paper') },
+];
+
+const palette = {
+  modal: $('#palette-modal'),
+  input: $('#palette-input'),
+  list: $('#palette-list'),
+  items: [],
+  index: 0,
+  timer: null,
+  results: { sessions: [], messages: [] },
+};
+
+function runSlash(name) {
+  chatInput.value = `/${name}`;
+  sendMessage();
+}
+
+function paletteItems(query) {
+  const q = query.trim().toLowerCase();
+  const items = PALETTE_COMMANDS.filter(
+    (c) => !q || c.label.toLowerCase().includes(q) || c.id.includes(q)
+  ).map((c) => ({ label: c.label, hint: c.hint || 'comando', run: c.run }));
+
+  for (const session of palette.results.sessions) {
+    items.push({
+      label: session.title || '(sin título)',
+      hint: session.cwd ? basename(session.cwd) : 'sesión',
+      run: () => openTab(session.id),
+    });
+  }
+  for (const message of palette.results.messages) {
+    items.push({
+      label: message.snippet || '(mensaje)',
+      hint: `${message.role} · ${message.title || ''}`,
+      run: () => {
+        openTab(message.sessionId);
+        setTimeout(() => document.getElementById(message.id)?.scrollIntoView({ block: 'center' }), 450);
+      },
+    });
+  }
+  return items;
+}
+
+function setPaletteIndex(index) {
+  const count = palette.items.length;
+  if (!count) {
+    palette.index = 0;
+    return;
+  }
+  palette.index = ((index % count) + count) % count;
+  [...palette.list.children].forEach((child, i) => child.classList.toggle('active', i === palette.index));
+  palette.list.children[palette.index]?.scrollIntoView({ block: 'nearest' });
+}
+
+function renderPalette(query) {
+  palette.items = paletteItems(query);
+  palette.list.replaceChildren();
+  if (!palette.items.length) {
+    palette.list.appendChild(el('li', 'palette-empty', 'sin resultados'));
+    return;
+  }
+  palette.items.forEach((item, i) => {
+    const li = el('li', 'palette-item');
+    const main = el('div', 'palette-item-main');
+    main.appendChild(el('span', 'palette-item-label', item.label));
+    if (item.hint) main.appendChild(el('span', 'palette-item-hint', item.hint));
+    li.appendChild(main);
+    li.addEventListener('mousemove', () => setPaletteIndex(i));
+    li.addEventListener('click', () => runPaletteItem(item));
+    palette.list.appendChild(li);
+  });
+  setPaletteIndex(0);
+}
+
+function runPaletteItem(item) {
+  palette.modal?.close();
+  setTimeout(() => item.run(), 0);
+}
+
+function openPalette() {
+  if (!palette.modal) return;
+  palette.input.value = '';
+  palette.results = { sessions: [], messages: [] };
+  renderPalette('');
+  palette.modal.showModal();
+  palette.input.focus();
+}
+
+if (palette.modal) {
+  palette.input.addEventListener('input', () => {
+    const q = palette.input.value;
+    renderPalette(q);
+    clearTimeout(palette.timer);
+    palette.timer = setTimeout(async () => {
+      if (q.trim().length < 2) {
+        palette.results = { sessions: [], messages: [] };
+        renderPalette(q);
+        return;
+      }
+      const data = await api(`/api/search?q=${encodeURIComponent(q)}&limit=15`).catch(() => null);
+      if (data) {
+        palette.results = { sessions: data.sessions || [], messages: data.messages || [] };
+        renderPalette(q);
+      }
+    }, 180);
+  });
+  palette.input.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setPaletteIndex(palette.index + 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setPaletteIndex(palette.index - 1);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const item = palette.items[palette.index];
+      if (item) runPaletteItem(item);
+    }
+  });
+  palette.modal.addEventListener('click', (event) => {
+    if (event.target === palette.modal) palette.modal.close();
+  });
+  $('#search-toggle')?.addEventListener('click', openPalette);
+  document.addEventListener('keydown', (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      openPalette();
+    }
+  });
+}
+
+/* --- topbar: provider + model + status ----------------------------------- */
+
+const providerSelect = $('#provider');
+const modelSelect = $('#model');
+const modeSelect = $('#mode');
+const yesInput = $('#yes');
+
+async function loadModes() {
+  const data = await api('/api/modes').catch(() => ({ modes: [] }));
+  clear(modeSelect);
+  for (const mode of data.modes) {
+    const option = document.createElement('option');
+    option.value = mode.id;
+    option.textContent = mode.label;
+    option.title = mode.description ?? '';
+    modeSelect.appendChild(option);
+  }
+  const settings = await api('/api/settings').catch(() => null);
+  const active = settings?.settings?.mode || 'agent';
+  if ([...modeSelect.options].some((o) => o.value === active)) modeSelect.value = active;
+  updateStatus();
+}
+
+modeSelect.addEventListener('change', async () => {
+  await api('/api/settings', { method: 'PUT', body: { mode: modeSelect.value } }).catch(() => null);
+  updateStatus();
+});
+
+function updateStatus(extra = {}) {
+  const p = state.providers.find((x) => x.id === state.active.provider);
+  $('#sb-mode').textContent = modeSelect.value || 'agent';
+  $('#sb-provider').textContent = p ? `${p.id}` : state.active.provider || '—';
+  $('#sb-model').textContent = state.active.model || '—';
+  if (extra.rounds !== undefined) $('#sb-rounds').textContent = `${extra.rounds} rondas`;
+  if (extra.stopReason) $('#sb-rounds').textContent = extra.stopReason;
+  if (extra.running) $('#sb-rounds').textContent = 'pensando…';
+}
+
+const themeToggle = $('#theme-toggle');
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  themeToggle.title = theme === 'paper' ? 'cambiar a oscuro' : 'cambiar a papel';
+  try {
+    localStorage.setItem('tamnora-console-theme', theme);
+  } catch {
+    // storage unavailable
+  }
+}
+themeToggle.addEventListener('click', () =>
+  applyTheme(document.documentElement.dataset.theme === 'paper' ? 'dark' : 'paper')
+);
+applyTheme(document.documentElement.dataset.theme || 'paper');
+
+const logout = $('#logout');
+if (logout) {
+  logout.addEventListener('click', async (event) => {
+    event.preventDefault();
+    try {
+      await api('/api/auth/logout', { method: 'POST' });
+    } catch {
+      // igual salimos
+    }
+    location.href = '/landing';
+  });
+}
+
+/* --- layout: resizable + collapsible panels ------------------------------- */
+
+const panels = {
+  sidebar: { el: $('#sidebar'), resizer: $('#resizer-sidebar'), min: 180, max: 460, width: 260, side: 'left' },
+  explorer: { el: $('#explorer'), resizer: $('#resizer-explorer'), min: 200, max: 560, width: 300, side: 'right' },
+};
+const sidebarBackdrop = $('#sidebar-backdrop');
+const mobileQuery = window.matchMedia('(max-width: 820px)');
+
+function isMobile() {
+  return mobileQuery.matches;
+}
+
+function readSidebarPref() {
+  try {
+    return localStorage.getItem('tamnora-sidebar-open') !== '0';
+  } catch {
+    return true;
+  }
+}
+
+function persistLayout() {
+  try {
+    localStorage.setItem(
+      'tamnora-panel-widths',
+      JSON.stringify({ sidebar: panels.sidebar.width, explorer: panels.explorer.width })
+    );
+  } catch {
+    // storage unavailable
+  }
+}
+
+function applyPanelWidths() {
+  panels.sidebar.el.style.width = `${panels.sidebar.width}px`;
+  panels.explorer.el.style.width = `${panels.explorer.width}px`;
+}
+
+function attachResizer(panel) {
+  panel.resizer.addEventListener('pointerdown', (event) => {
+    if (panel.resizer.hidden) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = panel.width;
+    panel.resizer.classList.add('dragging');
+    document.body.classList.add('resizing');
+    panel.resizer.setPointerCapture(event.pointerId);
+    const move = (moveEvent) => {
+      const delta = panel.side === 'left' ? moveEvent.clientX - startX : startX - moveEvent.clientX;
+      panel.width = Math.min(panel.max, Math.max(panel.min, startWidth + delta));
+      panel.el.style.width = `${panel.width}px`;
+    };
+    const up = () => {
+      panel.resizer.classList.remove('dragging');
+      document.body.classList.remove('resizing');
+      panel.resizer.removeEventListener('pointermove', move);
+      panel.resizer.removeEventListener('pointerup', up);
+      persistLayout();
+    };
+    panel.resizer.addEventListener('pointermove', move);
+    panel.resizer.addEventListener('pointerup', up);
+  });
+}
+
+function setSidebarOpen(open) {
+  state.sidebarOpen = open;
+  if (isMobile()) {
+    // Drawer: siempre en el DOM; la visibilidad la maneja la clase + backdrop.
+    panels.sidebar.el.hidden = false;
+    panels.sidebar.el.classList.toggle('open', open);
+    panels.sidebar.resizer.hidden = true;
+    if (sidebarBackdrop) sidebarBackdrop.hidden = !open;
+  } else {
+    panels.sidebar.el.classList.remove('open');
+    panels.sidebar.el.hidden = !open;
+    panels.sidebar.resizer.hidden = !open;
+    if (sidebarBackdrop) sidebarBackdrop.hidden = true;
+  }
+  $('#sidebar-toggle').setAttribute('aria-pressed', String(open));
+  if (!isMobile()) {
+    try {
+      localStorage.setItem('tamnora-sidebar-open', open ? '1' : '0');
+    } catch {
+      // storage unavailable
+    }
+  }
+}
+
+function initLayout() {
+  let widths = {};
+  try {
+    widths = JSON.parse(localStorage.getItem('tamnora-panel-widths') || '{}');
+  } catch {
+    widths = {};
+  }
+  if (Number(widths.sidebar)) panels.sidebar.width = Math.min(panels.sidebar.max, Math.max(panels.sidebar.min, widths.sidebar));
+  if (Number(widths.explorer)) panels.explorer.width = Math.min(panels.explorer.max, Math.max(panels.explorer.min, widths.explorer));
+  try {
+    state.collapsedGroups = new Set(JSON.parse(localStorage.getItem('tamnora-collapsed-groups') || '[]'));
+  } catch {
+    state.collapsedGroups = new Set();
+  }
+  // En movil el panel arranca cerrado (drawer); en desktop, la preferencia guardada.
+  applyPanelWidths();
+  attachResizer(panels.sidebar);
+  attachResizer(panels.explorer);
+  setSidebarOpen(isMobile() ? false : readSidebarPref());
+  $('#sidebar-toggle').addEventListener('click', () => setSidebarOpen(!state.sidebarOpen));
+  if (sidebarBackdrop) sidebarBackdrop.addEventListener('click', () => setSidebarOpen(false));
+  mobileQuery.addEventListener('change', () => setSidebarOpen(isMobile() ? false : readSidebarPref()));
+}
+
+initLayout();
+
+function formatK(n) {
+  const value = Number(n) || 0;
+  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
+  return String(value);
+}
+
+function renderTokens() {
+  const node = $('#sb-tokens');
+  const record = state.panes.get(state.sessionId);
+  const tokens = record?.tokens ?? { in: 0, out: 0 };
+  const lastTurn = record?.lastTurn ?? { prompt: 0, completion: 0 };
+  const total = tokens.in + tokens.out;
+  if (!total) {
+    node.textContent = 'tokens 0';
+    node.className = 'muted';
+    node.title = '';
+    return;
+  }
+  node.textContent = `tokens ${formatK(total)}`;
+  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
+  const used = lastTurn.prompt + lastTurn.completion || total;
+  node.title =
+    `entrada ${formatK(tokens.in)} · salida ${formatK(tokens.out)}` +
+    (context ? ` · contexto ${formatK(used)}/${formatK(context)}` : '');
+  if (!context) {
+    node.className = 'muted';
+    return;
+  }
+  const pct = (used / context) * 100;
+  node.className = pct >= 75 ? 'ctx-danger' : pct >= 50 ? 'ctx-warn' : pct >= 25 ? 'ctx-mid' : 'ctx-ok';
+}
+
+function addTokens(tokens) {
+  const record = state.panes.get(state.sessionId);
+  if (record && tokens) {
+    record.tokens.in += tokens.prompt_tokens ?? 0;
+    record.tokens.out += tokens.completion_tokens ?? 0;
+    record.lastTurn = {
+      prompt: tokens.last_prompt_tokens ?? 0,
+      completion: tokens.last_completion_tokens ?? 0,
+    };
+  }
+  renderTokens();
+}
+
+async function saveSettings(patch) {
+  const out = await api('/api/settings', { method: 'PUT', body: patch }).catch(() => null);
+  if (out?.settings) {
+    state.active.provider = out.settings.provider;
+    state.active.model = out.settings.model;
+  }
+  if (patch.provider) providerSelect.value = patch.provider;
+  updateStatus();
+}
+
+async function loadModels({ save = false } = {}) {
+  const provider = providerSelect.value;
+  modelSelect.disabled = true;
+  const data = await api(`/api/models?provider=${encodeURIComponent(provider)}`).catch((error) => ({
+    models: [],
+    error: error.message,
+  }));
+  const models = data?.models ?? [];
+  clear(modelSelect);
+
+  if (!models.length) {
+    const option = document.createElement('option');
+    option.value = '';
+    option.textContent = data?.error ? `sin modelos — ${data.error}` : 'sin modelos (configurá el proveedor)';
+    modelSelect.appendChild(option);
+    updateStatus();
+    renderTokens();
+    return;
+  }
+
+  for (const model of models) {
+    const option = document.createElement('option');
+    option.value = model.id;
+    option.textContent = model.label && model.label !== model.id ? model.label : model.id;
+    if (model.vision) option.textContent += ' · visión';
+    if (model.context) option.dataset.context = String(model.context);
+    modelSelect.appendChild(option);
+  }
+  if (state.active.model && models.some((m) => m.id === state.active.model)) {
+    modelSelect.value = state.active.model;
+  } else {
+    modelSelect.value = models[0].id;
+    if (save) await saveSettings({ model: modelSelect.value });
+  }
+  modelSelect.disabled = false;
+  updateStatus();
+  renderTokens();
+}
+
+providerSelect.addEventListener('change', async () => {
+  await saveSettings({ provider: providerSelect.value });
+  await loadModels({ save: true });
+});
+modelSelect.addEventListener('change', () => saveSettings({ model: modelSelect.value }));
+
+/* --- chat ---------------------------------------------------------------- */
+
+const blankPane = $('#messages');
+const panesEl = $('#panes');
+const tabbarEl = $('#tabbar');
+const chatForm = $('#chat-form');
+const chatInput = $('#chat-input');
+const submitBtn = chatForm.querySelector('button[type="submit"]');
+const stopBtn = $('#stop-btn');
+const controllers = new Map();
+const sessionsEl = $('#sessions');
+
+let activePane = blankPane;
+const paneOf = (message) => message?.bubble?.closest('.messages') ?? activePane;
+
+const scrollMessages = (pane = activePane) => {
+  if (pane) pane.scrollTop = pane.scrollHeight;
+};
+
+function addMessage(role, text = '', pane = activePane) {
+  pane.querySelector('.empty')?.remove();
+  const wrap = el('div', `msg ${role}`);
+  const bubble = el('div', 'bubble');
+  const textEl = el('div', 'text');
+  const tools = el('div', 'tools');
+  const activity = el('div', 'activity');
+  activity.hidden = true;
+  bubble.append(textEl, tools, activity);
+  wrap.appendChild(bubble);
+  pane.appendChild(wrap);
+  const message = { role, wrap, bubble, textEl, tools, activity, reasoningEl: null, id: null };
+  addMessageActions(message);
+  if (text) setText(message, text);
+  scrollMessages(pane);
+  return message;
+}
+
+function addMessageActions(message) {
+  const actions = el('div', 'msg-actions');
+  actions.appendChild(button('copiar', () => copyMessage(message), 'msg-act'));
+  if (message.role === 'assistant') {
+    actions.appendChild(button('regenerar', () => regenerate(message), 'msg-act'));
+  }
+  if (message.role === 'user') {
+    actions.appendChild(button('editar', () => editMessage(message), 'msg-act'));
+  }
+  actions.appendChild(button('borrar desde acá', () => deleteFrom(message), 'msg-act danger'));
+  message.bubble.appendChild(actions);
+  message.actions = actions;
+}
+
+function messageId(message) {
+  return message.wrap?.dataset.messageId || message.id || null;
+}
+
+function copyMessage(message) {
+  const text = message.role === 'assistant' ? message.textEl.innerText : message.textEl.textContent;
+  const write = navigator.clipboard?.writeText(text);
+  if (write?.catch) write.catch(() => {});
+}
+
+async function reloadPane(id) {
+  const record = state.panes.get(id);
+  if (!record) return;
+  const detail = await api(`/api/sessions/${id}`).catch(() => null);
+  if (!detail) return;
+  record.el.replaceChildren();
+  for (const stored of detail.messages) renderStored(stored, record.el);
+  if (!detail.messages.length) record.el.appendChild(el('div', 'empty', 'Sesión vacía.'));
+}
+
+async function regenerate(message) {
+  const id = message?.wrap?.closest('.messages')?.dataset.session || state.sessionId;
+  if (!id || state.panes.get(id)?.working) return;
+  const detail = await api(`/api/sessions/${id}`).catch(() => null);
+  if (!detail) return;
+  const messages = detail.messages || [];
+  let lastUser = null;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i].role === 'user') {
+      lastUser = messages[i];
+      break;
+    }
+  }
+  if (!lastUser) return;
+  await api(`/api/sessions/${id}/truncate`, { method: 'POST', body: { fromId: lastUser.id } }).catch(() => {});
+  await reloadPane(id);
+  chatInput.value = userText(lastUser.content);
+  await sendMessage();
+}
+
+function editMessage(message) {
+  const id = messageId(message);
+  chatInput.value = message.textEl.textContent;
+  chatInput.focus();
+  state.pendingEdit = id ? { fromId: id } : null;
+}
+
+async function deleteFrom(message) {
+  const id = messageId(message);
+  if (!id || !window.confirm('¿Borrar este mensaje y todo lo posterior?')) return;
+  const sessionKey = state.sessionId;
+  await api(`/api/sessions/${sessionKey}/truncate`, { method: 'POST', body: { fromId: id } }).catch(() => {});
+  await reloadPane(sessionKey);
+}
+
+const ACTIVITY = {
+  thinking: { cls: 'loader-thinking', label: 'pensando…' },
+  working: { cls: 'loader-working', label: 'trabajando…' },
+  waiting: { cls: 'loader-thinking', label: 'esperando aprobación…' },
+};
+
+function setActivity(message, kind) {
+  if (!message.activity) return;
+  if (!kind) {
+    message.activity.hidden = true;
+    message.activity.replaceChildren();
+    return;
+  }
+  const def = ACTIVITY[kind];
+  message.activity.hidden = false;
+  message.activity.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
+  scrollMessages(paneOf(message));
+}
+
+function setText(message, text) {
+  const value = String(text ?? '');
+  if (message.role === 'assistant') message.textEl.innerHTML = renderMarkdown(value);
+  else message.textEl.textContent = value;
+  scrollMessages(paneOf(message));
+}
+
+function appendImages(message, urls) {
+  if (!urls.length) return;
+  const wrap = el('div', 'msg-images');
+  for (const url of urls) {
+    const img = el('img', 'msg-image');
+    img.src = url;
+    img.alt = 'imagen adjunta';
+    wrap.appendChild(img);
+  }
+  message.bubble.insertBefore(wrap, message.tools);
+}
+
+panesEl.addEventListener('click', (event) => {
+  const button = event.target.closest('.code-copy');
+  if (!button) return;
+  const pre = button.closest('.code-block')?.querySelector('pre');
+  if (!pre || !navigator.clipboard) return;
+  navigator.clipboard.writeText(pre.textContent).then(() => {
+    button.textContent = 'copiado';
+    setTimeout(() => (button.textContent = 'copiar'), 1200);
+  });
+});
+
+function ensureReasoning(message) {
+  if (message.reasoningEl) return message.reasoningEl;
+  const details = el('details', 'reasoning');
+  details.appendChild(el('summary', '', 'razonamiento'));
+  const body = el('div', 'body');
+  details.appendChild(body);
+  message.bubble.insertBefore(details, message.tools);
+  message.reasoningEl = body;
+  return body;
+}
+
+function renderToolOut(node, text) {
+  const content = String(text ?? '');
+  const lines = content.split('\n');
+  const adds = lines.filter((line) => line.startsWith('+ ')).length;
+  const dels = lines.filter((line) => line.startsWith('- ')).length;
+  if (adds === 0 || dels === 0) {
+    node.textContent = content;
+    return;
+  }
+  node.textContent = '';
+  for (const line of lines) {
+    const cls = line.startsWith('+ ')
+      ? 'diff-add'
+      : line.startsWith('- ')
+        ? 'diff-del'
+        : /^ {2}…/.test(line)
+          ? 'diff-sep'
+          : 'diff-eq';
+    node.appendChild(el('span', `diff-line ${cls}`, line));
+  }
+}
+
+function addToolCard(message, name, args) {
+  const card = el('div', 'tool-card running');
+  const head = el('div', 'tool-head');
+  head.append(
+    el('span', 'tool-glyph', '⏺'),
+    el('span', 'tool-name', name),
+    el('span', 'tool-args', truncate(args, 200))
+  );
+  const out = el('div', 'tool-out');
+  card.append(head, out);
+  message.tools.appendChild(card);
+  scrollMessages(paneOf(message));
+  return { card, out };
+}
+
+function addPermissionCard(message, data) {
+  const card = el('div', 'perm-card');
+  const head = el('div', 'perm-head');
+  head.append(el('span', 'perm-icon', '⚠'), el('span', 'perm-title', `permiso para ${data.name}`));
+  const args = el('div', 'perm-args', truncate(JSON.stringify(data.args ?? {}), 400));
+  const actions = el('div', 'perm-actions');
+  const verdict = el('span', 'muted', 'requiere aprobación');
+  const buttons = {
+    deny: button('denegar', () => decide(false, 'once'), 'btn'),
+    once: button('permitir una vez', () => decide(true, 'once'), 'btn primary'),
+    always: button('autorizar todo', () => decide(true, 'session'), 'btn'),
+  };
+  actions.append(verdict, el('span', 'spacer'), buttons.deny, buttons.once, buttons.always);
+  card.append(head, args, actions);
+  message.tools.appendChild(card);
+  scrollMessages(paneOf(message));
+  state.permissionCards.set(data.askId, { card, verdict, buttons });
+
+  async function decide(allow, scope) {
+    for (const btn of Object.values(buttons)) btn.disabled = true;
+    card.classList.remove('pending');
+    card.classList.add('collapsed', allow ? 'approved' : 'denied');
+    card.querySelector('.perm-icon').textContent = allow ? '✓' : '✗';
+    verdict.textContent =
+      allow && scope === 'session' ? 'autorizado para toda la sesión' : allow ? 'aprobado' : 'denegado';
+    if (allow && scope === 'session') yesInput.checked = true;
+    await api(`/api/permissions/${encodeURIComponent(data.askId)}`, {
+      method: 'POST',
+      body: { allow, scope },
+    }).catch(() => {});
+  }
+  card.classList.add('pending');
+  return card;
+}
+
+function userText(content) {
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return content
+      .filter((part) => part?.type === 'text')
+      .map((part) => part.text)
+      .join('\n');
+  }
+  return content == null ? '' : JSON.stringify(content);
+}
+
+function userImages(content) {
+  if (!Array.isArray(content)) return [];
+  return content
+    .filter((part) => part?.type === 'image_url')
+    .map((part) => part.image_url?.url)
+    .filter(Boolean);
+}
+
+function renderStored(message, pane) {
+  if (message.role === 'user') {
+    const bubble = addMessage('user', userText(message.content), pane);
+    if (message.id) {
+      bubble.id = message.id;
+      bubble.wrap.dataset.messageId = message.id;
+    }
+    appendImages(bubble, userImages(message.content));
+  } else if (message.role === 'assistant') {
+    const bubble = addMessage('assistant', typeof message.content === 'string' ? message.content : '', pane);
+    if (message.id) {
+      bubble.id = message.id;
+      bubble.wrap.dataset.messageId = message.id;
+    }
+    for (const call of message.tool_calls ?? []) {
+      const tool = addToolCard(
+        bubble,
+        call.function?.name ?? call.name,
+        call.function?.arguments ?? call.arguments ?? ''
+      );
+      tool.card.classList.remove('running');
+      tool.card.classList.add('done');
+      tool.card.querySelector('.tool-glyph').textContent = '✓';
+    }
+  }
+}
+
+function basename(p) {
+  const text = String(p ?? '').replace(/[\\/]+$/, '');
+  return text.split(/[\\/]/).pop() || text;
+}
+
+function persistCollapsedGroups() {
+  try {
+    localStorage.setItem('tamnora-collapsed-groups', JSON.stringify([...state.collapsedGroups]));
+  } catch {
+    // storage unavailable
+  }
+}
+
+function persistTabs() {
+  try {
+    localStorage.setItem('tamnora-open-tabs', JSON.stringify({ ids: state.tabOrder, active: state.activeTab }));
+  } catch {
+    // storage unavailable
+  }
+}
+
+async function refreshSessions() {
+  const data = await api('/api/sessions').catch(() => ({ sessions: [] }));
+  clear(sessionsEl);
+  const groups = new Map();
+  for (const session of data.sessions) {
+    const key = session.cwd || '';
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(session);
+  }
+  for (const [key, items] of groups) {
+    const groupLi = el('li', 'session-group');
+    const head = el('div', 'group-head');
+    const collapsed = state.collapsedGroups.has(key);
+    const twisty = el('span', 'tw');
+    twisty.appendChild(icon(collapsed ? 'chevron-right' : 'chevron-down', 14));
+    head.append(twisty, icon('folder', 15, 'fi'), el('span', 'gname', key ? basename(key) : 'sin carpeta'), el('span', 'gcount', String(items.length)));
+    head.title = key || 'sesiones sin carpeta';
+    const list = el('ul', 'group-sessions');
+    list.hidden = collapsed;
+    head.addEventListener('click', () => {
+      const nowCollapsed = !state.collapsedGroups.has(key);
+      if (nowCollapsed) state.collapsedGroups.add(key);
+      else state.collapsedGroups.delete(key);
+      persistCollapsedGroups();
+      list.hidden = nowCollapsed;
+      clear(twisty);
+      twisty.appendChild(icon(nowCollapsed ? 'chevron-right' : 'chevron-down', 14));
+    });
+    for (const session of items) {
+      const li = el('li', `session-item${session.id === state.sessionId ? ' active' : ''}`);
+      li.appendChild(el('div', '', session.title || '(sin título)'));
+      li.title = `${session.provider ?? ''}/${session.model ?? ''}${session.cwd ? ` · ${session.cwd}` : ''}`;
+      li.addEventListener('click', () => {
+  if (isMobile()) setSidebarOpen(false);
+  openTab(session.id);
+});
+      list.appendChild(li);
+    }
+    groupLi.append(head, list);
+    sessionsEl.appendChild(groupLi);
+  }
+  if (!data.sessions.length) sessionsEl.appendChild(el('li', 'muted', 'sin sesiones'));
+}
+
+/* --- session tabs --------------------------------------------------------- */
+
+function registerSession(session, messages = [], tokens = { in: 0, out: 0 }) {
+  const id = session.id;
+  if (state.panes.has(id)) return state.panes.get(id);
+  const pane = document.createElement('div');
+  pane.className = 'messages';
+  pane.dataset.session = id;
+  panesEl.appendChild(pane);
+  const record = {
+    id,
+    el: pane,
+    title: session.title || '(sin título)',
+    cwd: session.cwd || '',
+    working: false,
+    tokens,
+    lastTurn: { prompt: 0, completion: 0 },
+  };
+  state.panes.set(id, record);
+  state.tabOrder.push(id);
+  for (const message of messages) renderStored(message, pane);
+  if (!messages.length) {
+    pane.appendChild(el('div', 'empty', `Sesión vacía${session.cwd ? ` en ${basename(session.cwd)}` : ''}.`));
+  }
+  return record;
+}
+
+function showPane(id) {
+  const record = id ? state.panes.get(id) : null;
+  for (const item of state.panes.values()) item.el.hidden = item.id !== id;
+  blankPane.hidden = Boolean(record);
+  activePane = record ? record.el : blankPane;
+}
+
+function renderTabs() {
+  clear(tabbarEl);
+  tabbarEl.hidden = !state.tabOrder.length;
+  for (const id of state.tabOrder) {
+    const record = state.panes.get(id);
+    if (!record) continue;
+    const tab = el('button', `session-tab${id === state.activeTab ? ' active' : ''}`);
+    tab.type = 'button';
+    tab.title = `${record.title}${record.cwd ? ` · ${record.cwd}` : ''}`;
+    if (record.working) tab.appendChild(el('span', 'tab-spinner'));
+    tab.appendChild(el('span', 'tab-title', record.title || '(sin título)'));
+    const close = el('span', 'tab-close');
+    close.title = 'cerrar';
+    close.appendChild(icon('x', 12));
+    close.addEventListener('click', (event) => {
+      event.stopPropagation();
+      closeTab(id);
+    });
+    tab.appendChild(close);
+    tab.addEventListener('click', () => openTab(id));
+    tabbarEl.appendChild(tab);
+  }
+}
+
+async function openTab(id) {
+  if (state.panes.has(id)) {
+    activateSession(id);
+    return;
+  }
+  const data = await api(`/api/sessions/${id}`).catch((error) => {
+    notify(`No se pudo abrir la sesión: ${error.message}`, 'notice err');
+    return null;
+  });
+  if (!data) return;
+  registerSession(data.session, data.messages, data.tokens);
+  activateSession(id);
+}
+
+function activateSession(id) {
+  const record = state.panes.get(id);
+  if (!record) return;
+  state.sessionId = id;
+  state.activeTab = id;
+  showPane(id);
+  if (record.cwd) setCwd(record.cwd);
+  if (stopBtn) stopBtn.hidden = !record.working;
+  auditStatus(record);
+  updateStatus();
+  renderTokens();
+  renderTabs();
+  refreshSessions();
+  persistTabs();
+  chatInput.focus();
+}
+
+function auditStatus(record) {
+  submitBtn.disabled = record.working;
+  $('#sb-rounds').textContent = record.working ? 'pensando…' : 'listo';
+  $('#sb-rounds').classList.toggle('running', record.working);
+}
+
+function closeTab(id) {
+  const record = state.panes.get(id);
+  if (!record) return;
+  record.el.remove();
+  state.panes.delete(id);
+  state.tabOrder = state.tabOrder.filter((item) => item !== id);
+  if (state.activeTab === id) {
+    const next = state.tabOrder[state.tabOrder.length - 1] ?? null;
+    if (next) {
+      activateSession(next);
+    } else {
+      state.sessionId = null;
+      state.activeTab = null;
+      showPane(null);
+      renderTabs();
+      renderTokens();
+      refreshTokensDefaults();
+      refreshSessions();
+    }
+  } else {
+    renderTabs();
+  }
+  persistTabs();
+}
+
+function refreshTokensDefaults() {
+  $('#sb-rounds').textContent = 'listo';
+  $('#sb-rounds').classList.remove('running');
+  submitBtn.disabled = false;
+}
+
+function setWorking(id, working) {
+  const record = state.panes.get(id);
+  if (record) record.working = working;
+  renderTabs();
+  if (id === state.sessionId) {
+    submitBtn.disabled = working;
+    if (stopBtn) stopBtn.hidden = !working;
+    $('#sb-rounds').textContent = working ? 'pensando.' : 'listo';
+    $('#sb-rounds').classList.toggle('running', working);
+  }
+}
+
+async function restoreTabs() {
+  let saved = null;
+  try {
+    saved = JSON.parse(localStorage.getItem('tamnora-open-tabs') || 'null');
+  } catch {
+    saved = null;
+  }
+  const ids = Array.isArray(saved?.ids) ? saved.ids : [];
+  for (const id of ids) {
+    if (state.panes.has(id)) continue;
+    const data = await api(`/api/sessions/${id}`).catch(() => null);
+    if (data) registerSession(data.session, data.messages, data.tokens);
+  }
+  const active = saved?.active && state.panes.has(saved.active) ? saved.active : state.tabOrder[state.tabOrder.length - 1];
+  if (active) activateSession(active);
+  else renderTabs();
+}
+
+$('#new-session').addEventListener('click', () => {
+  if (isMobile()) setSidebarOpen(false);
+  openFolderPicker();
+});
+
+const INIT_PROMPT =
+  'Analizá este proyecto (estructura, stack, convenciones, comandos de build/test) y creá o actualizá un archivo AGENTS.md en la raíz con instrucciones claras para futuros agentes. Inspeccioná archivos reales antes de escribir.';
+
+async function sendMessage() {
+  const current = state.panes.get(state.sessionId);
+  if (current?.working) return;
+  let input = chatInput.value.trim();
+  const images = state.attachments.slice();
+  if (input.startsWith('/') && !images.length) {
+    const name = input.slice(1).split(/\s+/)[0].toLowerCase();
+    const arg = input.slice(1 + name.length).trim();
+    const outcome = await runCommand(name, arg);
+    if (!outcome || outcome.handled) {
+      chatInput.value = '';
+      return;
+    }
+    input = outcome.input ?? input;
+  }
+  if (!input && !images.length) return;
+  if (!state.sessionId) {
+    state.pendingInput = input;
+    openFolderPicker();
+    return;
+  }
+
+  if (state.pendingEdit) {
+    await api(`/api/sessions/${state.sessionId}/truncate`, {
+      method: 'POST',
+      body: { fromId: state.pendingEdit.fromId },
+    }).catch(() => {});
+    await reloadPane(state.sessionId);
+    state.pendingEdit = null;
+  }
+
+  const pane = activePane;
+  const sessionKey = state.sessionId;
+  const user = addMessage('user', input || `(${images.length} imagen${images.length > 1 ? 'es' : ''})`, pane);
+  appendImages(user, images);
+  chatInput.value = '';
+  state.attachments = [];
+  renderAttachments();
+  let active = addMessage('assistant', '', pane);
+  const controller = new AbortController();
+  controllers.set(sessionKey, controller);
+  setWorking(sessionKey, true);
+  let sawText = false;
+  let lastTool = null;
+  let startNewOnText = false;
+
+  const flowTarget = () => {
+    if (startNewOnText) {
+      active = addMessage('assistant', '', pane);
+      startNewOnText = false;
+      setActivity(active, 'thinking');
+    }
+    return active;
+  };
+
+  try {
+    await streamPost(
+      '/api/chat',
+      {
+        input: input || '(imagen adjunta)',
+        images: images.length ? images : undefined,
+        sessionId: state.sessionId || undefined,
+        provider: providerSelect.value || undefined,
+        model: modelSelect.value || undefined,
+        mode: modeSelect.value || undefined,
+        yes: yesInput.checked ? true : undefined,
+        contextTokens: (() => {
+          const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
+          return context ? Math.floor(context * 0.8) : undefined;
+        })(),
+      },
+      (event, data) => {
+        if (event === 'start') {
+          if (data.cwd) setCwd(data.cwd);
+        } else if (event === 'text') {
+          sawText = true;
+          const target = flowTarget();
+          setText(target, data.full);
+          setActivity(target, 'thinking');
+        } else if (event === 'reasoning') {
+          const target = flowTarget();
+          if (!sawText) ensureReasoning(target).textContent = data.full;
+          setActivity(target, 'thinking');
+        } else if (event === 'tools') {
+          startNewOnText = true;
+        } else if (event === 'tool_call') {
+          setActivity(active, 'working');
+          lastTool = addToolCard(active, data.name, JSON.stringify(data.args));
+        } else if (event === 'tool_result') {
+          setActivity(active, 'thinking');
+          if (lastTool) {
+            const failed = /^Error|^Permiso denegado/i.test(String(data.result));
+            renderToolOut(lastTool.out, truncate(data.result));
+            lastTool.card.classList.remove('running');
+            lastTool.card.classList.add(failed ? 'failed' : 'done');
+            lastTool.card.querySelector('.tool-glyph').textContent = failed ? '✗' : '✓';
+          }
+        } else if (event === 'permission') {
+          setActivity(active, 'waiting');
+          addPermissionCard(active, data);
+        } else if (event === 'permission_resolved') {
+          setActivity(active, 'thinking');
+          const entry = state.permissionCards.get(data.askId);
+          if (entry && entry.verdict.textContent === 'requiere aprobación') {
+            entry.card.classList.add('collapsed', data.allow ? 'approved' : 'denied');
+            entry.card.classList.remove('pending');
+            entry.card.querySelector('.perm-icon').textContent = data.allow ? '✓' : '✗';
+            entry.verdict.textContent = data.allow ? 'aprobado' : 'denegado (sin respuesta)';
+            for (const btn of Object.values(entry.buttons)) btn.disabled = true;
+          }
+        } else if (event === 'stall') {
+          if (!sawText) setText(active, `⚠ ${data.seconds} s sin respuesta del modelo (proveedor caído o muy lento). Sigo esperando...`);
+        } else if (event === 'retry') {
+          if (!sawText) setText(active, `↻ reintentando (${data.attempt}) en ${Math.round((data.delayMs || 0) / 1000)} s...`);
+        } else if (event === 'trim') {
+          active.tools.appendChild(el('div', 'chip', `✂ contexto recortado (${data.trimmed} resultados, ${data.dropped} mensajes)`));
+        } else if (event === 'warning') {
+          active.tools.appendChild(el('div', 'chip', `⚠ ${data.message}`));
+        } else if (event === 'error') {
+          setActivity(active, null);
+          active.tools.appendChild(el('div', 'chip err', `✗ ${data.message}`));
+        } else if (event === 'done') {
+          setActivity(active, null);
+          if (!data.content && !sawText) setText(active, '(sin texto)');
+          updateStatus({ rounds: data.rounds, stopReason: data.stopReason });
+          addTokens(data.tokens);
+        }
+      },
+      controller.signal
+    );
+  } catch (error) {
+    setActivity(active, null);
+    if (error.name === 'AbortError') setText(active, '⏹ cancelado.');
+    else setText(active, `Error: ${error.message}`);
+  } finally {
+    controllers.delete(sessionKey);
+    setActivity(active, null);
+    setWorking(sessionKey, false);
+    refreshSessions();
+  }
+}
+
+if (stopBtn) {
+  stopBtn.addEventListener('click', () => {
+    const controller = controllers.get(state.sessionId);
+    if (controller) controller.abort();
+  });
+}
+
+chatForm.addEventListener('submit', (event) => {
+  event.preventDefault();
+  sendMessage();
+});
+chatInput.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    sendMessage();
+  }
+});
+
+/* --- image attachments ---------------------------------------------------- */
+
+const attachInput = $('#image-input');
+const attachPreview = $('#attach-preview');
+
+function renderAttachments() {
+  clear(attachPreview);
+  attachPreview.hidden = !state.attachments.length;
+  state.attachments.forEach((url, index) => {
+    const thumb = el('div', 'attach-thumb');
+    const img = el('img');
+    img.src = url;
+    img.alt = `adjunto ${index + 1}`;
+    const remove = button('', () => {
+      state.attachments.splice(index, 1);
+      renderAttachments();
+    }, 'attach-remove');
+    remove.appendChild(icon('x', 12));
+    thumb.append(img, remove);
+    attachPreview.appendChild(thumb);
+  });
+}
+
+function readAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('No se pudo leer la imagen'));
+    reader.onload = () => resolve(reader.result);
+    reader.readAsDataURL(file);
+  });
+}
+
+async function fileToDataUrl(file) {
+  if (file.type === 'image/gif' || file.size <= 256 * 1024) return readAsDataUrl(file);
+  const url = await readAsDataUrl(file);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onerror = () => resolve(url);
+    img.onload = () => {
+      const scale = Math.min(1, 1600 / Math.max(img.width, img.height));
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.max(1, Math.round(img.width * scale));
+      canvas.height = Math.max(1, Math.round(img.height * scale));
+      canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+      resolve(canvas.toDataURL('image/jpeg', 0.85));
+    };
+    img.src = url;
+  });
+}
+
+async function addImageFiles(files) {
+  for (const file of files) {
+    if (!file?.type?.startsWith('image/')) continue;
+    try {
+      state.attachments.push(await fileToDataUrl(file));
+    } catch {
+      // skip unreadable files
+    }
+  }
+  renderAttachments();
+}
+
+$('#attach-image').addEventListener('click', () => attachInput.click());
+attachInput.addEventListener('change', () => {
+  addImageFiles([...attachInput.files]);
+  attachInput.value = '';
+});
+chatInput.addEventListener('paste', (event) => {
+  const files = [...(event.clipboardData?.files ?? [])].filter((f) => f.type.startsWith('image/'));
+  if (!files.length) return;
+  event.preventDefault();
+  addImageFiles(files);
+});
+chatForm.addEventListener('dragover', (event) => {
+  event.preventDefault();
+  chatForm.classList.add('dragging');
+});
+chatForm.addEventListener('dragleave', () => chatForm.classList.remove('dragging'));
+chatForm.addEventListener('drop', (event) => {
+  const files = [...(event.dataTransfer?.files ?? [])].filter((f) => f.type.startsWith('image/'));
+  if (!files.length) return;
+  event.preventDefault();
+  chatForm.classList.remove('dragging');
+  addImageFiles(files);
+});
+
+/* --- slash commands ------------------------------------------------------- */
+
+const COMMANDS = [
+  ['/new', 'nueva sesión (elegís carpeta)'],
+  ['/init', 'analizar el proyecto y crear/actualizar AGENTS.md'],
+  ['/goal <texto>', 'fijar el objetivo de la sesión'],
+  ['/compact', 'resumir la conversación y liberar contexto'],
+  ['/clear', 'borrar los mensajes de esta sesión'],
+  ['/cwd', 'mostrar la carpeta de trabajo'],
+  ['/help', 'mostrar esta ayuda'],
+];
+
+function notify(markdown, kind = 'notice') {
+  const message = addMessage('assistant', '');
+  message.textEl.classList.add(kind);
+  message.textEl.innerHTML = renderMarkdown(markdown);
+  scrollMessages();
+  return message;
+}
+
+function needSession() {
+  notify('Abrí o creá una sesión primero (`/new`).', 'notice err');
+  return { handled: true };
+}
+
+async function runCommand(name, arg) {
+  switch (name) {
+    case 'help':
+    case 'ayuda':
+      notify(`### Comandos\n${COMMANDS.map(([cmd, desc]) => `- \`${cmd}\` — ${desc}`).join('\n')}`);
+      return { handled: true };
+    case 'new':
+    case 'nueva':
+      openFolderPicker();
+      return { handled: true };
+    case 'init':
+      return { handled: false, input: INIT_PROMPT };
+    case 'cwd': {
+      const cwd = $('#rail-cwd').textContent;
+      notify(`Carpeta de trabajo: \`${cwd}\``);
+      return { handled: true };
+    }
+    case 'clear':
+    case 'limpiar': {
+      if (!state.sessionId) return needSession();
+      await api(`/api/sessions/${state.sessionId}/messages`, { method: 'DELETE' }).catch(() => null);
+      clear(activePane);
+      activePane.appendChild(el('div', 'empty', 'Sesión vacía.'));
+      return { handled: true };
+    }
+    case 'goal': {
+      if (!state.sessionId) return needSession();
+      if (!arg) {
+        const data = await api(`/api/sessions/${state.sessionId}`).catch(() => null);
+        notify(data?.session?.goal ? `Objetivo actual: **${data.session.goal}**` : 'No hay objetivo fijado.');
+        return { handled: true };
+      }
+      await api(`/api/sessions/${state.sessionId}`, { method: 'PUT', body: { goal: arg } }).catch(() => null);
+      notify(`Objetivo de la sesión: **${arg}**`);
+      return { handled: true };
+    }
+    case 'compact': {
+      if (!state.sessionId) return needSession();
+      notify('Compactando la conversación…');
+      const out = await api(`/api/sessions/${state.sessionId}/compact`, { method: 'POST' }).catch((error) => ({
+        error: error.message,
+      }));
+      clear(activePane);
+      if (out.error) notify(`No se pudo compactar: ${out.error}`, 'notice err');
+      else notify(`Contexto compactado. Resumen guardado:\n\n${out.summary}`);
+      refreshSessions();
+      return { handled: true };
+    }
+    default:
+      notify(`Comando desconocido: \`/${name}\`. Probá \`/help\`.`, 'notice err');
+      return { handled: true };
+  }
+}
+
+/* --- folder picker -------------------------------------------------------- */
+
+const folderModal = $('#folder-modal');
+const folderList = $('#folder-list');
+const folderCrumbs = $('#folder-crumbs');
+const folderStatusEl = $('#folder-status');
+const folderGoto = $('#folder-goto');
+const folderCreate = $('#folder-create');
+const folderNewName = $('#folder-new-name');
+const folderUseBtn = $('#folder-use');
+let folderListPath = null;
+let folderParent = null;
+let folderDirs = [];
+
+const FOLDER_PATH = 'M3.5 6.3A1.3 1.3 0 0 1 4.8 5h3.1l1.5 1.7h7.8a1.3 1.3 0 0 1 1.3 1.3v7.7a1.3 1.3 0 0 1-1.3 1.3H4.8a1.3 1.3 0 0 1-1.3-1.3z';
+
+function folderIcon() {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 22 22');
+  svg.setAttribute('class', 'folder-ico');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', FOLDER_PATH);
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke', 'currentColor');
+  path.setAttribute('stroke-width', '1.4');
+  path.setAttribute('stroke-linejoin', 'round');
+  svg.appendChild(path);
+  return svg;
+}
+
+function setFolderStatus(text, cls = '') {
+  folderStatusEl.className = `summary ${cls}`.trim();
+  folderStatusEl.textContent = text;
+}
+
+function closeFolderPicker() {
+  if (folderModal.open) folderModal.close();
+}
+
+function openFolderPicker() {
+  folderGoto.value = '';
+  setFolderStatus('');
+  folderModal.showModal();
+  loadFolders(state.home || '');
+}
+
+function renderCrumbs(pathStr) {
+  clear(folderCrumbs);
+  if (!pathStr) {
+    folderCrumbs.appendChild(el('span', 'crumb current', 'unidades'));
+    return;
+  }
+  const win = pathStr.includes('\\');
+  const parts = pathStr.split(/[\\/]+/).filter(Boolean);
+  const segments = parts.map((part, index) =>
+    win
+      ? { label: part, path: index === 0 ? `${part}\\` : parts.slice(0, index + 1).join('\\') }
+      : { label: part, path: `/${parts.slice(0, index + 1).join('/')}` }
+  );
+  segments.forEach((segment, index) => {
+    if (index) folderCrumbs.appendChild(el('span', 'crumb-sep', '/'));
+    const last = index === segments.length - 1;
+    const node = el('span', `crumb${last ? ' current' : ''}`, segment.label);
+    if (!last) node.addEventListener('click', () => loadFolders(segment.path));
+    folderCrumbs.appendChild(node);
+  });
+}
+
+function renderFolderList(dirs) {
+  clear(folderList);
+  if (!dirs.length) {
+    folderList.appendChild(
+      el('li', 'folders-empty', folderListPath ? 'sin subcarpetas (podés usar esta carpeta igual)' : 'sin unidades')
+    );
+    return;
+  }
+  for (const dir of dirs) {
+    const li = el('li', 'folder-item');
+    li.title = dir.path;
+    li.tabIndex = 0;
+    li.append(folderIcon(), el('span', 'folder-name', dir.name), el('span', 'folder-enter', '↵'));
+    const enter = () => loadFolders(dir.path);
+    li.addEventListener('click', enter);
+    li.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        enter();
+      }
+    });
+    folderList.appendChild(li);
+  }
+}
+
+async function loadFolders(target = '') {
+  folderGoto.value = '';
+  closeCreateFolder();
+  setFolderStatus('cargando…');
+  const data = await api(`/api/folders?path=${encodeURIComponent(target)}`).catch((error) => {
+    setFolderStatus(error.message, 'err');
+    return null;
+  });
+  if (!data) return;
+  folderListPath = data.path;
+  folderParent = data.parent;
+  folderDirs = [...data.dirs].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+  renderCrumbs(data.path);
+  $('#folder-up').disabled = !data.path;
+  $('#folder-new').disabled = !data.path;
+  folderUseBtn.disabled = !data.path;
+  folderUseBtn.textContent = data.path ? `usar «${basename(data.path)}»` : 'usar esta carpeta';
+  renderFolderList(folderDirs);
+  const count = data.path ? `${folderDirs.length} subcarpetas` : `${folderDirs.length} unidades`;
+  setFolderStatus(data.path ? `${count} · clic para entrar` : 'elegí una unidad');
+}
+
+async function useFolder() {
+  const cwd = folderListPath;
+  if (!cwd) return setFolderStatus('Entrá a una carpeta primero (clic para navegar).', 'err');
+  const created = await api('/api/sessions', { method: 'POST', body: { title: 'Nueva sesión', cwd } }).catch((error) => {
+    setFolderStatus(error.message, 'err');
+    return null;
+  });
+  if (!created) return;
+  closeFolderPicker();
+  registerSession(created.session, []);
+  activateSession(created.session.id);
+  const pending = state.pendingInput;
+  if (pending !== null && pending !== undefined) {
+    state.pendingInput = null;
+    chatInput.value = pending;
+    sendMessage();
+  }
+}
+
+function filterFolders() {
+  const query = folderGoto.value.trim().toLowerCase();
+  if (!query) return renderFolderList(folderDirs);
+  renderFolderList(folderDirs.filter((dir) => dir.name.toLowerCase().includes(query)));
+}
+
+function gotoFolder() {
+  const value = folderGoto.value.trim();
+  if (!value) return;
+  if (/[\\/]/.test(value) || /^[a-z]:$/i.test(value)) return loadFolders(value);
+  const matches = folderDirs.filter((dir) => dir.name.toLowerCase().includes(value.toLowerCase()));
+  if (matches.length === 1) loadFolders(matches[0].path);
+  else if (!matches.length) setFolderStatus('sin coincidencias', 'err');
+  else setFolderStatus(`${matches.length} coincidencias`, '');
+}
+
+function openCreateFolder() {
+  if (!folderListPath) return;
+  folderCreate.hidden = false;
+  folderNewName.value = '';
+  folderNewName.focus();
+}
+
+function closeCreateFolder() {
+  folderCreate.hidden = true;
+  folderNewName.value = '';
+}
+
+async function createFolder() {
+  const name = folderNewName.value.trim();
+  if (!name || !folderListPath) return;
+  const created = await api('/api/folders', {
+    method: 'POST',
+    body: { parent: folderListPath, name },
+  }).catch((error) => {
+    setFolderStatus(error.message, 'err');
+    return null;
+  });
+  if (!created) return;
+  await loadFolders(created.path);
+  setFolderStatus(`carpeta «${name}» creada · usala para el nuevo proyecto`, 'ok');
+}
+
+$('#folder-new').addEventListener('click', openCreateFolder);
+$('#folder-new-cancel').addEventListener('click', closeCreateFolder);
+$('#folder-new-create').addEventListener('click', createFolder);
+folderNewName.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    createFolder();
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    closeCreateFolder();
+  }
+});
+$('#folder-roots').addEventListener('click', () => loadFolders(''));
+$('#folder-home').addEventListener('click', () => loadFolders(state.home || ''));
+$('#folder-close').addEventListener('click', closeFolderPicker);
+$('#folder-cancel').addEventListener('click', () => {
+  state.pendingInput = null;
+  closeFolderPicker();
+});
+$('#folder-up').addEventListener('click', () => loadFolders(folderParent ?? ''));
+$('#folder-use').addEventListener('click', useFolder);
+$('#folder-go').addEventListener('click', gotoFolder);
+folderGoto.addEventListener('input', filterFolders);
+folderGoto.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    gotoFolder();
+  }
+});
+folderList.addEventListener('keydown', (event) => {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+  const items = [...folderList.querySelectorAll('.folder-item')];
+  if (!items.length) return;
+  event.preventDefault();
+  const current = items.indexOf(document.activeElement);
+  const next = event.key === 'ArrowDown' ? Math.min(items.length - 1, current + 1) : Math.max(0, current - 1);
+  items[current === -1 ? 0 : next].focus();
+});
+folderModal.addEventListener('click', (event) => {
+  if (event.target === folderModal) {
+    state.pendingInput = null;
+    closeFolderPicker();
+  }
+});
+
+/* --- providers ----------------------------------------------------------- */
+
+const providerListEl = $('#provider-list');
+const providerForm = $('#provider-form');
+const providerModal = $('#provider-modal');
+
+async function refreshProviders() {
+  const data = await api('/api/providers').catch(() => null);
+  if (!data) return;
+  state.providers = data.providers;
+  state.active = data.active;
+  syncTopbar();
+  renderProviderList();
+}
+
+function isConfigured(p) {
+  return Boolean(p.hasKey) || !p.requiresKey;
+}
+
+function syncTopbar() {
+  clear(providerSelect);
+  const configured = state.providers.filter(isConfigured);
+  for (const p of configured) {
+    const option = document.createElement('option');
+    option.value = p.id;
+    option.textContent = p.label && p.label !== p.id ? `${p.label} (${p.id})` : p.id;
+    providerSelect.appendChild(option);
+  }
+  const active = state.active.provider;
+  if (active && !configured.some((p) => p.id === active)) {
+    const current = state.providers.find((p) => p.id === active);
+    const option = document.createElement('option');
+    option.value = active;
+    option.textContent = `${current?.label ?? active} (sin configurar)`;
+    providerSelect.appendChild(option);
+  }
+  if (!providerSelect.options.length) {
+    const option = document.createElement('option');
+    option.value = '';
+    option.textContent = 'sin proveedores configurados';
+    providerSelect.appendChild(option);
+    providerSelect.disabled = true;
+  } else {
+    providerSelect.disabled = false;
+    if (active) providerSelect.value = active;
+  }
+  updateStatus();
+}
+
+function renderProviderList() {
+  clear(providerListEl);
+  for (const p of state.providers) {
+    const li = el('li', p.id === state.active.provider ? 'active' : '');
+    li.appendChild(el('span', `pdot${p.hasKey || !p.requiresKey ? ' on' : ''}`));
+    const main = el('div', 'grow');
+    const title = el('div');
+    title.append(el('span', 'pid', p.id), document.createTextNode(' '), el('span', 'pmeta', p.label));
+    main.append(
+      title,
+      el(
+        'div',
+        'pmeta',
+        `${p.baseUrl || p.defaultBaseUrl || 'sin base URL'} · ${p.models.length} modelos · ${p.apiKeyHint || (p.requiresKey ? 'sin key' : 'sin key requerida')}`
+      )
+    );
+    li.appendChild(main);
+    li.appendChild(button('usar', (event) => { event.stopPropagation(); useProvider(p.id); }));
+    li.appendChild(button('editar', (event) => { event.stopPropagation(); openProviderForm(p); }));
+    if (p.stored) li.appendChild(button('borrar', (event) => { event.stopPropagation(); removeProvider(p.id); }, 'btn danger'));
+    li.addEventListener('click', () => openProviderForm(p));
+    providerListEl.appendChild(li);
+  }
+}
+
+async function useProvider(id) {
+  await saveSettings({ provider: id });
+  await loadModels({ save: true });
+  await refreshProviders();
+}
+
+function openProviderForm(provider = null) {
+  $('#provider-title').textContent = provider ? `editar ${provider.id}` : 'nuevo proveedor';
+  $('#pf-id').value = provider?.id ?? '';
+  $('#pf-id').readOnly = Boolean(provider);
+  $('#pf-label').value = provider?.label ?? '';
+  $('#pf-baseurl').value = provider?.baseUrl ?? '';
+  $('#pf-key').value = '';
+  $('#pf-key').placeholder = provider?.apiKeyHint ? `guardada (${provider.apiKeyHint})` : 'dejar vacío para no cambiar';
+  $('#pf-models').value = (provider?.models ?? []).join(', ');
+  setProviderStatus('');
+  providerModal.showModal();
+  if (!provider) $('#pf-id').focus();
+}
+
+function closeProviderForm() {
+  if (providerModal.open) providerModal.close();
+}
+
+function setProviderStatus(text, cls = '') {
+  const node = $('#pf-status');
+  node.className = `summary ${cls}`.trim();
+  node.textContent = text;
+}
+
+async function submitProvider(event) {
+  event.preventDefault();
+  const id = $('#pf-id').value.trim();
+  if (!id) return setProviderStatus('Falta el id.', 'err');
+  const body = {
+    label: $('#pf-label').value.trim() || id,
+    baseUrl: $('#pf-baseurl').value.trim(),
+    models: $('#pf-models').value.split(',').map((s) => s.trim()).filter(Boolean),
+  };
+  const key = $('#pf-key').value;
+  if (key) body.apiKey = key;
+  try {
+    await api(`/api/providers/${encodeURIComponent(id)}`, { method: 'PUT', body });
+    closeProviderForm();
+    await refreshProviders();
+    await loadModels();
+  } catch (error) {
+    setProviderStatus(error.message, 'err');
+  }
+}
+
+async function removeProvider(id) {
+  if (!confirm(`¿Borrar la configuración de "${id}"?`)) return;
+  await api(`/api/providers/${encodeURIComponent(id)}`, { method: 'DELETE' }).catch(() => null);
+  await refreshProviders();
+  await loadModels();
+}
+
+async function testProvider() {
+  const id = $('#pf-id').value.trim();
+  if (!id) return setProviderStatus('Guardá primero el proveedor para probarlo.', 'err');
+  setProviderStatus('probando…');
+  const out = await api(`/api/providers/${encodeURIComponent(id)}/test`, { method: 'POST' }).catch((error) => ({
+    ok: false,
+    error: error.message,
+  }));
+  if (!out.ok) return setProviderStatus(`error: ${out.error}`, 'err');
+
+  const ids = (out.models ?? []).map((m) => m.id ?? m).filter(Boolean);
+  let note = '';
+  if (out.source === 'api' && ids.length) {
+    $('#pf-models').value = ids.join(', ');
+    note = ' · modelos autocompletados';
+  }
+  if (id === state.active.provider) await loadModels();
+  setProviderStatus(`ok · ${out.count} modelos (${out.source})${note}`, 'ok');
+}
+
+$('#provider-new').addEventListener('click', () => openProviderForm());
+$('#pf-cancel').addEventListener('click', closeProviderForm);
+$('#pf-close').addEventListener('click', closeProviderForm);
+$('#pf-test').addEventListener('click', testProvider);
+providerForm.addEventListener('submit', submitProvider);
+providerModal.addEventListener('click', (event) => {
+  if (event.target === providerModal) closeProviderForm();
+});
+
+/* --- eval ---------------------------------------------------------------- */
+
+const evalTasks = $('#eval-tasks');
+const evalResults = $('#eval-results');
+const evalSummary = $('#eval-summary');
+const evalRunBtn = $('#eval-run');
+
+evalTasks.value = [
+  '{"id":"math","input":"¿Cuánto es 17 * 23? Respondé solo el número.","expect":{"equals":"391"}}',
+  '{"id":"regex","input":"Escribí una oración que contenga un número.","expect":{"regex":"\\\\d"}}',
+].join('\n');
+
+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));
+}
+
+function setEvalSummary(text, cls = '') {
+  evalSummary.className = `summary ${cls}`.trim();
+  evalSummary.textContent = text;
+}
+
+function detailOf(entry) {
+  if (entry.error) return entry.error;
+  return (entry.trace?.scorers ?? []).map((s) => `${s.scorer}:${s.passed ? 'ok' : 'no'}`).join(' ');
+}
+
+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);
+}
+
+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;
+  }
+}
+evalRunBtn.addEventListener('click', runEval);
+
+/* --- runs ---------------------------------------------------------------- */
+
+const runsList = $('#runs-list');
+const runDetail = $('#run-detail');
+
+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.'));
+}
+
+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,
+    });
+  }
+}
+$('#runs-refresh').addEventListener('click', refreshRuns);
+
+/* --- explorer (right panel) ----------------------------------------------- */
+
+const explorer = $('#explorer');
+const explorerTree = $('#explorer-tree');
+const explorerRoot = $('#explorer-root');
+const explorerFilter = $('#explorer-filter');
+const explorerStatus = $('#explorer-status');
+const explorerToggle = $('#explorer-toggle');
+
+function setExplorerStatus(text, isError = false) {
+  explorerStatus.textContent = text;
+  explorerStatus.classList.toggle('err', isError);
+}
+
+function setExplorerOpen(open) {
+  state.explorerOpen = open;
+  explorer.hidden = !open;
+  panels.explorer.resizer.hidden = !open;
+  explorerToggle.setAttribute('aria-pressed', String(open));
+  explorerToggle.classList.toggle('active', open);
+  try {
+    localStorage.setItem('tamnora-explorer-open', open ? '1' : '0');
+  } catch {
+    // storage unavailable
+  }
+  if (open) refreshExplorer();
+}
+
+function fileListUrl(relPath) {
+  const params = new URLSearchParams({ root: state.cwd, path: relPath });
+  return `/api/files?${params}`;
+}
+
+async function loadTreeDir(relPath, container) {
+  clear(container);
+  const placeholder = el('li', 'tree-empty muted', 'cargando…');
+  container.appendChild(placeholder);
+  const data = await api(fileListUrl(relPath)).catch((error) => {
+    placeholder.textContent = error.message;
+    return null;
+  });
+  if (!data) return;
+  clear(container);
+  if (!data.entries.length) {
+    container.appendChild(el('li', 'tree-empty muted', '(vacío)'));
+    return;
+  }
+  for (const entry of data.entries) container.appendChild(treeRow(entry, relPath));
+  applyTreeFilter();
+}
+
+function joinPath(base, name) {
+  return base ? `${base}/${name}` : name;
+}
+
+function treeRow(entry, parentPath) {
+  const full = joinPath(parentPath, entry.name);
+  const li = el('li');
+  const row = el('div', `tree-row ${entry.type}`);
+  const twisty = el('span', 'tw');
+  const iconName = entry.type === 'dir' ? 'folder' : 'file';
+  row.append(twisty, icon(iconName, 15, 'fi'), el('span', 'tree-name', entry.name));
+  li.appendChild(row);
+
+  if (entry.type === 'dir') {
+    twisty.appendChild(icon('chevron-right', 14));
+    let children = null;
+    row.addEventListener('click', async () => {
+      const open = !li.classList.contains('open');
+      li.classList.toggle('open', open);
+      clear(twisty);
+      twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 14));
+      if (open && !children) {
+        children = el('ul', 'tree');
+        li.appendChild(children);
+        await loadTreeDir(full, children);
+      }
+    });
+  } else {
+    row.addEventListener('click', () => openFilePreview(full, entry.name));
+  }
+  return li;
+}
+
+async function refreshExplorer() {
+  if (!state.explorerOpen) return;
+  explorerRoot.textContent = state.cwd || '—';
+  explorerRoot.title = state.cwd || '';
+  explorerFilter.value = '';
+  if (!state.cwd) {
+    clear(explorerTree);
+    setExplorerStatus('sin carpeta de trabajo', true);
+    return;
+  }
+  setExplorerStatus('cargando…');
+  const data = await api(fileListUrl('')).catch((error) => {
+    setExplorerStatus(error.message, true);
+    return null;
+  });
+  if (!data) return;
+  clear(explorerTree);
+  if (!data.entries.length) explorerTree.appendChild(el('li', 'tree-empty muted', '(vacío)'));
+  for (const entry of data.entries) explorerTree.appendChild(treeRow(entry, ''));
+  const dirs = data.entries.filter((e) => e.type === 'dir').length;
+  const files = data.entries.length - dirs;
+  setExplorerStatus(`${files} archivos · ${dirs} carpetas`);
+}
+
+function matchesFilter(name, query) {
+  return name.toLowerCase().includes(query);
+}
+
+function applyTreeFilter() {
+  const query = explorerFilter.value.trim().toLowerCase();
+  const walk = (ul) => {
+    let visible = false;
+    for (const li of ul.children) {
+      if (!li.querySelector(':scope > .tree-row')) continue;
+      const name = li.querySelector(':scope > .tree-row .tree-name')?.textContent ?? '';
+      const childUl = li.querySelector(':scope > .tree');
+      const childVisible = childUl ? walk(childUl) : false;
+      const show = !query || matchesFilter(name, query) || childVisible;
+      li.hidden = !show;
+      if (show && query && childUl && childVisible && !li.classList.contains('open')) {
+        li.classList.add('open');
+        refreshTwisty(li, true);
+      }
+      visible = visible || show;
+    }
+    return visible;
+  };
+  walk(explorerTree);
+}
+
+function refreshTwisty(li, open) {
+  const twisty = li.querySelector(':scope > .tree-row .tw');
+  if (!twisty) return;
+  clear(twisty);
+  twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 14));
+}
+
+async function openFilePreview(relPath, name) {
+  const params = new URLSearchParams({ root: state.cwd, path: relPath });
+  const data = await api(`/api/files/content?${params}`).catch((error) => {
+    setExplorerStatus(error.message, true);
+    return null;
+  });
+  if (!data) return;
+  $('#file-title').textContent = name;
+  $('#file-meta').textContent = `${data.size} bytes`;
+  $('#file-content').textContent = data.content;
+  $('#file-modal').showModal();
+}
+
+explorerToggle.addEventListener('click', () => setExplorerOpen(!state.explorerOpen));
+$('#explorer-close').addEventListener('click', () => setExplorerOpen(false));
+$('#explorer-refresh').addEventListener('click', refreshExplorer);
+explorerFilter.addEventListener('input', applyTreeFilter);
+$('#file-close').addEventListener('click', () => $('#file-modal').close());
+$('#file-modal').addEventListener('click', (event) => {
+  if (event.target === $('#file-modal')) $('#file-modal').close();
+});
+
+try {
+  setExplorerOpen(localStorage.getItem('tamnora-explorer-open') === '1');
+} catch {
+  setExplorerOpen(false);
+}
+
+/* --- boot ---------------------------------------------------------------- */
+
+async function boot() {
+  const auth = await api('/api/auth/me').catch(() => null);
+  if (auth?.enabled && !auth.authenticated) {
+    location.replace('/landing');
+    return;
+  }
+  csrfToken = auth?.csrf || '';
+  document.documentElement.dataset.auth = 'ok';
+
+  const health = await api('/api/health').catch(() => null);
+  if (health?.cwd) {
+    document.title = `Tamnora Console · ${health.cwd}`;
+    setCwd(health.cwd);
+  }
+  if (health?.home) state.home = health.home;
+  await refreshProviders();
+  await loadModes();
+  await loadModels();
+  await refreshSessions();
+  await restoreTabs();
+}
+boot();