@danieltmn/tamnora 0.22.0 → 0.23.1

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

@@ -1,1893 +1,1343 @@
-import {
-  addTokens,
-  isMobile,
-  modeSelect,
-  modelSelect,
-  openFolderPicker,
-  providerSelect,
-  setContextUsage,
-  setCwd,
-  setSidebarOpen,
-  updateStatus,
-  yesInput,
-} from './chrome.js';
-import { hideSlashMenu, notify, onChatInputChanged, runCommand, toast } from './commands.js';
-import { $, api, button, clear, el, icon, openStream, showConfirm, state, storage, streamPost } from './core.js';
-import { isLocalHost, loadPreview, localPortOf, openRemoteTunnel, setExplorerMode } from './explorer.js';
-import { renderMarkdown } from './markdown.js';
-import { summarizeArgs } from './reconcile.js';
-import { followRun } from './runStream.js';
-import {
-  closeTab,
-  openTab,
-  setWorking,
-  showStandalonePermission,
-  syncInterruptBtn,
-  whenIdle,
-} from './sessions.js';
-import { setStatus } from './settings.js';
-import { reconcile, renderAlertSignals } from './system.js';
-import { narrar, reproducirVoz } from './voice.js';
-
-// `scrollNavFrame` debe existir antes de `initLayout()`: `applyPanelWidths`
-// llama a `scheduleScrollNav()` durante el arranque (evita el TDZ).
-export let scrollNavFrame = 0;
-
-/* --- chat ---------------------------------------------------------------- */
-
-export const blankPane = $('#messages');
-export const panesEl = $('#panes');
-export const tabbarEl = $('#tabbar');
-export const chatForm = $('#chat-form');
-export const chatInput = $('#chat-input');
-export const submitBtn = chatForm.querySelector('button[type="submit"]');
-export const stopBtn = $('#stop-btn');
-export const interruptBtn = $('#interrupt-btn');
-export const controllers = new Map();
-// `whenIdle` espera a que el turno de una sesion termine (lo usa "interrumpir").
-export const idleWaiters = new Map();
-// Sesiones donde el turno actual se esta cortando a proposito: `drainQueue` no
-// debe arrancar un mensaje al final de ese turno (lo arranca el interruptor).
-export const interrupting = new Set();
-export const sessionsEl = $('#sessions');
-
-export let activePane = blankPane;
-
-export const paneOf = (message) => message?.bubble?.closest('.messages') ?? activePane;
-
-export const scrollMessages = (pane = activePane) => {
-  if (pane) pane.scrollTop = pane.scrollHeight;
-};
-
-export const scrollNav = $('#scroll-nav');
-export const scrollTopBtn = $('#scroll-top');
-export const scrollDownBtn = $('#scroll-down');
-
-/** Muestra/oculta los saltos de scroll según el pane activo. */
-export function updateScrollNav() {
-  const pane = activePane;
-  if (!pane) return;
-  const max = pane.scrollHeight - pane.clientHeight;
-  const visible = max > 40;
-  scrollNav.hidden = !visible;
-  if (!visible) return;
-  scrollTopBtn.disabled = pane.scrollTop < 40;
-  scrollDownBtn.disabled = max - pane.scrollTop < 40;
-}
-
-export function scheduleScrollNav() {
-  if (scrollNavFrame) return;
-  scrollNavFrame = requestAnimationFrame(() => {
-    scrollNavFrame = 0;
-    updateScrollNav();
-  });
-}
-
-export function addMessage(role, text = '', pane = activePane) {
-  pane.querySelector('.empty')?.remove();
-  const wrap = el('div', `msg ${role}`);
-  const label = el('div', 'msg-label');
-  let modeEl = null;
-  if (role === 'user') {
-    label.textContent = '❯ vos';
-  } else {
-    label.appendChild(el('span', 'msg-name', 'tamnora'));
-    modeEl = el('span', 'msg-mode');
-    modeEl.hidden = true;
-    label.appendChild(modeEl);
-  }
-  const bubble = el('div', 'bubble');
-  const textEl = el('div', 'text');
-  const tools = el('div', 'tools');
-  bubble.append(textEl, tools);
-  wrap.append(label, bubble);
-  pane.appendChild(wrap);
-  const message = { role, wrap, bubble, label, modeEl, textEl, tools, reasoningEl: null, id: null };
-  addMessageActions(message);
-  if (text) setText(message, text);
-  scrollMessages(pane);
-  return message;
-}
-
-export function setMessageMode(message, modeId) {
-  if (!message?.modeEl) return;
-  const mode = modeId === 'plan' ? 'plan' : 'build';
-  message.modeEl.textContent = mode === 'plan' ? 'Plan' : 'Build';
-  message.modeEl.dataset.mode = mode;
-  message.modeEl.hidden = false;
-}
-
-export let openMessageMenu = null;
-
-/** El menu flota (position: fixed) para no quedar recortado por el scroll. */
-export function positionMessageMenu() {
-  if (!openMessageMenu) return;
-  const { menu, trigger } = openMessageMenu;
-  const rect = trigger.getBoundingClientRect();
-  const size = menu.getBoundingClientRect();
-  let top = rect.bottom + 4;
-  if (top + size.height > window.innerHeight - 8) top = Math.max(8, rect.top - size.height - 4);
-  let left = rect.left;
-  if (left + size.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - size.width - 8);
-  menu.style.top = `${top}px`;
-  menu.style.left = `${left}px`;
-}
-
-export function closeMessageMenus() {
-  if (!openMessageMenu) return;
-  const current = openMessageMenu;
-  openMessageMenu = null;
-  current.menu.hidden = true;
-  current.trigger.setAttribute('aria-expanded', 'false');
-  current.actions?.appendChild(current.menu);
-}
-
-export function toggleMessageMenu(message) {
-  const wasOpen = openMessageMenu === message;
-  closeMessageMenus();
-  if (wasOpen) return;
-  document.body.appendChild(message.menu);
-  message.menu.hidden = false;
-  message.trigger.setAttribute('aria-expanded', 'true');
-  openMessageMenu = message;
-  positionMessageMenu();
-}
-
-export function addMessageActions(message) {
-  const actions = el('div', 'msg-actions');
-  const trigger = el('button', 'msg-menu-btn');
-  trigger.type = 'button';
-  trigger.appendChild(icon(window.matchMedia('(min-width: 821px)').matches ? 'dots-horizontal' : 'dots-vertical', 16));
-  trigger.title = 'opciones del mensaje';
-  trigger.setAttribute('aria-haspopup', 'menu');
-  trigger.setAttribute('aria-expanded', 'false');
-  trigger.setAttribute('aria-label', 'opciones del mensaje');
-  trigger.addEventListener('click', () => toggleMessageMenu(message));
-
-  const menu = el('div', 'msg-menu');
-  menu.hidden = true;
-  menu.setAttribute('role', 'menu');
-  const addItem = (label, run, iconName, cls = 'msg-act') => {
-    const item = el('button', cls);
-    item.type = 'button';
-    item.setAttribute('role', 'menuitem');
-    if (iconName) item.appendChild(icon(iconName, 15, 'mi'));
-    item.appendChild(el('span', 'mlabel', label));
-    item.addEventListener('click', () => {
-      closeMessageMenus();
-      run();
-    });
-    menu.appendChild(item);
-  };
-  addItem('copiar', () => copyMessage(message), 'copy');
-  if (message.role === 'assistant') addItem('regenerar', () => regenerate(message), 'refresh-cw');
-  if (message.role === 'assistant') addItem('deshacer cambios', () => undoTurn(message), 'undo');
-  if (message.role === 'user') addItem('editar', () => editMessage(message), 'pencil');
-  menu.appendChild(el('div', 'msg-menu-sep'));
-  addItem('borrar desde acá', () => deleteFrom(message), 'trash', 'msg-act danger');
-
-  actions.append(trigger, menu);
-  message.bubble.appendChild(actions);
-  message.actions = actions;
-  message.menu = menu;
-  message.trigger = trigger;
-}
-
-export function messageId(message) {
-  return message.wrap?.dataset.messageId || message.id || null;
-}
-
-export 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(() => {});
-}
-
-export async function renderPane(id) {
-  const record = state.panes.get(id);
-  if (!record) return null;
-  const detail = await api(`/api/sessions/${id}`).catch(() => null);
-  if (!detail) return null;
-  record.el.replaceChildren();
-  renderStoredMessages(detail.messages, record.el);
-  if (!detail.messages.length) record.el.appendChild(el('div', 'empty', 'Sesión vacía.'));
-  // Los permisos pendientes no son mensajes, asi que `replaceChildren` los
-  // borra. Hay que repintarlos aca: sin esto una tarjeta de permiso se ve y
-  // al primer re-render (run_start, sweep, reconexion) desaparece para siempre.
-  for (const ask of detail.permissions ?? []) showStandalonePermission(record, ask);
-  for (const ask of detail.questions ?? []) showStandaloneQuestion(record, ask);
-  return detail;
-}
-
-export async function reloadPane(id) {
-  const detail = await renderPane(id);
-  const record = state.panes.get(id);
-  if (detail?.running && record && !record.working) await attachRun(id, record.el);
-}
-
-export 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();
-}
-
-export async function undoTurn(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 || [];
-  const at = messages.findIndex((m) => m.id === messageId(message));
-  let turn = null;
-  for (let i = at >= 0 ? at : messages.length - 1; i >= 0; i--) {
-    if (messages[i].role === 'user') {
-      turn = messages[i];
-      break;
-    }
-  }
-  if (!turn) return;
-  if (
-    !(await showConfirm('¿Deshacer este turno? Se restauran los archivos a como estaban y se borra el turno del historial.', {
-      title: 'Deshacer cambios',
-      confirmLabel: 'deshacer',
-      danger: true,
-    }))
-  ) {
-    return;
-  }
-  await api(`/api/sessions/${id}/rewind`, { method: 'POST', body: { turn: turn.id } }).catch(() => {});
-  await reloadPane(id);
-}
-
-export function editMessage(message) {  const id = messageId(message);
-  chatInput.value = message.textEl.textContent;
-  chatInput.focus();
-  state.pendingEdit = id ? { fromId: id } : null;
-}
-
-export async function deleteFrom(message) {
-  const id = messageId(message);
-  if (!id || !(await showConfirm('¿Borrar este mensaje y todo lo posterior?', { title: 'Borrar mensajes', confirmLabel: 'borrar', danger: true }))) return;
-  const sessionKey = state.sessionId;
-  await api(`/api/sessions/${sessionKey}/truncate`, { method: 'POST', body: { fromId: id } }).catch(() => {});
-  await reloadPane(sessionKey);
-}
-
-export const ACTIVITY = {
-  thinking: { cls: 'loader-thinking', label: 'pensando…' },
-  working: { cls: 'loader-working', label: 'trabajando…' },
-  listening: { cls: 'loader-working', label: 'escuchando…' },
-  reconnecting: { cls: 'loader-working', label: 'reconectando…' },
-  stopping: { cls: 'loader-working', label: 'deteniendo…' },
-};
-
-export const footerActivityEl = $('#sb-activity');
-
-/** El indicador de "pensando/trabajando" vive en el footer (una sola vez). */
-export function renderFooterActivity(kind) {
-  if (!footerActivityEl) return;
-  if (!kind) {
-    footerActivityEl.hidden = true;
-    footerActivityEl.replaceChildren();
-    return;
-  }
-  const def = ACTIVITY[kind] ?? ACTIVITY.thinking;
-  footerActivityEl.hidden = false;
-  footerActivityEl.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
-}
-
-export function setActivity(message, kind) {
-  // Solo el turno de la sesion activa refleja su actividad en el footer.
-  if (paneOf(message) !== activePane) return;
-  renderFooterActivity(kind);
-}
-
-export 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));
-}
-
-export 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);
-}
-
-export 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;
-}
-
-export 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));
-  }
-}
-
-export const READ_ONLY_TOOLS = new Set([
-  'read',
-  'list',
-  'glob',
-  'grep',
-  'fetch_url',
-  'git_status',
-  'git_diff',
-  'git_log',
-  'task',
-  'spawn_agent',
-]);
-export const toolCardIndex = new Map();
-
-export function isReadOnlyTool(name) {
-  const value = String(name ?? '');
-  if (READ_ONLY_TOOLS.has(value)) return true;
-  return /^mcp__.+__(read|list|search|get|fetch|query)/i.test(value);
-}
-
-export function shortText(value, max = 80) {
-  const raw = String(value ?? '').replace(/\s+/g, ' ').trim();
-  return raw.length > max ? `${raw.slice(0, max - 1)}…` : raw;
-}
-
-export function toolSummary(name, args) {
-  const a = args && typeof args === 'object' ? args : {};
-  switch (name) {
-    case 'read': {
-      const base = a.path ? shortText(a.path, 60) : '.';
-      const offset = Number(a.offset) || 0;
-      const limit = Number(a.limit) || 0;
-      if (offset && limit) return `${base}:${offset}-${offset + limit - 1}`;
-      if (offset) return `${base}:${offset}+`;
-      return base;
-    }
-    case 'write':
-    case 'edit':
-      return a.path ? shortText(a.path, 60) : 'archivo';
-    case 'list':
-      return a.path ? shortText(a.path, 60) : '.';
-    case 'glob':
-      return [a.pattern ? `"${shortText(a.pattern, 50)}"` : '', a.path ? `en ${shortText(a.path, 40)}` : '']
-        .filter(Boolean)
-        .join(' ');
-    case 'grep':
-      return [
-        a.pattern ? `"${shortText(a.pattern, 50)}"` : '',
-        a.include ? shortText(a.include, 30) : '',
-        a.path ? `en ${shortText(a.path, 40)}` : '',
-      ]
-        .filter(Boolean)
-        .join(' ');
-    case 'bash':
-      return shortText(String(a.command ?? '').split('\n')[0], 90);
-    case 'fetch_url':
-      return shortText(a.url, 90);
-    case 'speak':
-      return shortText(a.texto, 90);
-    case 'screenshot':
-    case 'console_errors':
-    case 'preview_url':
-      return shortText(a.url, 90);
-    case 'git_diff':
-      return [a.ref ? `vs ${shortText(a.ref, 30)}` : a.staged ? 'staged' : 'unstaged', a.path ? shortText(a.path, 40) : '']
-        .filter(Boolean)
-        .join(' ');
-    case 'git_log':
-      return a.limit ? `${a.limit} commits` : '';
-    case 'git_commit':
-      return shortText(a.message, 70);
-    case 'task':
-    case 'spawn_agent':
-      return shortText(a.description || a.prompt, 80);
-    default:
-      return '';
-  }
-}
-
-export function parseToolArgs(call) {
-  const raw = call?.function?.arguments ?? call?.arguments;
-  if (raw && typeof raw === 'object') return raw;
-  if (typeof raw !== 'string') return {};
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return {};
-  }
-}
-
-export function isFailedToolText(text) {
-  return /^Error|^Permiso denegado/i.test(String(text ?? ''));
-}
-
-/** Nombre de archivo de una captura, del meta o del texto del resultado. */
-export function screenshotName(data, text) {
-  const fromMeta = data?.meta?.screenshot?.name;
-  if (fromMeta) return String(fromMeta);
-  const match = /capturas\/([a-z0-9][a-z0-9-]*\.png)/i.exec(String(text ?? ''));
-  return match ? match[1] : null;
-}
-
-/** Muestra la captura del tool `screenshot` en su tarjeta (clic para ampliar). */
-export function showScreenshot(entry, name) {
-  if (!entry || !name || entry.shot) return;
-  entry.shot = true;
-  const img = el('img', 'tool-shot');
-  img.loading = 'lazy';
-  img.alt = 'captura de pantalla';
-  img.src = `/api/screenshots/${encodeURIComponent(name)}`;
-  img.addEventListener('click', () => window.open(img.src, '_blank'));
-  entry.card.appendChild(img);
-}
-
-/** Cierra la tarjeta de un tool-call (evento tool_result o mensaje persistido). */
-export function finishToolCard(entry, data) {
-  if (!entry) return;
-  const preview = data?.preview ?? data?.result ?? '';
-  const failed = data?.failed ?? isFailedToolText(preview);
-  renderToolOut(entry.out, preview);
-  entry.card.classList.remove('running');
-  entry.card.classList.toggle('failed', failed);
-  if (!failed) entry.card.classList.add('done');
-  entry.glyph.textContent = failed ? '✗' : '✓';
-  if (data?.truncated) {
-    entry.truncated = true;
-    entry.more.hidden = false;
-  }
-  if (!failed) showScreenshot(entry, screenshotName(data, preview));
-}
-
-export function previewText(value, maxLines = 24, maxChars = 4000) {
-  const content = typeof value === 'string' ? value : JSON.stringify(value ?? '', null, 2) ?? '';
-  const lines = content.split('\n');
-  let preview = lines.slice(0, maxLines).join('\n');
-  let truncated = lines.length > maxLines;
-  if (preview.length > maxChars) {
-    preview = preview.slice(0, maxChars);
-    truncated = true;
-  }
-  return { preview, truncated };
-}
-
-export function ensureToolsToggle(message) {
-  if (!message.toolsToggle) {
-    const bar = el('div', 'tools-actions');
-    const label = el('span', 'tools-count');
-    const toggle = button('colapsar todo', () => {
-      const details = [...message.tools.querySelectorAll('details.tool-card')];
-      const anyOpen = details.some((node) => node.open);
-      for (const node of details) node.open = !anyOpen;
-      toggle.textContent = anyOpen ? 'expandir todo' : 'colapsar todo';
-    }, 'tools-toggle');
-    bar.append(label, toggle);
-    message.tools.prepend(bar);
-    message.toolsToggle = bar;
-    message.toolsCount = label;
-    message.toolsToggleBtn = toggle;
-  }
-  const total = message.tools.querySelectorAll('details.tool-card').length;
-  const groups = new Set([...message.tools.querySelectorAll('details.tool-card')].map((n) => n.dataset.round ?? ''));
-  message.toolsToggle.hidden = total < 2;
-  message.toolsCount.textContent = groups.size > 1 ? `${total} pasos` : `${total} herramientas`;
-}
-
-export async function loadFullToolResult(entry, message) {
-  if (entry.full || !entry.callId) return;
-  const sessionId = paneOf(message)?.dataset.session;
-  if (!sessionId) return;
-  entry.more.disabled = true;
-  entry.more.textContent = 'cargando…';
-  const data = await api(
-    `/api/sessions/${sessionId}/tool-result?callId=${encodeURIComponent(entry.callId)}`
-  ).catch(() => null);
-  entry.more.disabled = false;
-  if (data?.content != null) {
-    renderToolOut(entry.out, data.content);
-    entry.full = true;
-    entry.more.hidden = true;
-  } else {
-    entry.more.textContent = 'ver completo';
-  }
-}
-
-/** Botón del tool `speak`: encola el audio pedido en el reproductor global. */
-export function speakControl(args) {
-  const texto = String(args?.texto ?? '').trim();
-  if (!texto) return null;
-  const btn = button('', () => reproducirVoz(texto, { voice: args?.voice, rate: args?.rate, pitch: args?.pitch, label: 'voz' }).catch(() => {}), 'tool-audio-btn');
-  btn.append(icon('play', 13), el('span', '', 'escuchar'));
-  return btn;
-}
-
-/** Texto de la tarjeta: el server ya manda `summary` calculado; esto es el fallback. */
-export function addToolCard(message, name, args, { callId = null, open = null, round = null, summary = null } = {}) {
-  const collapsed = open === null ? isReadOnlyTool(name) : !open;
-  const card = el('details', 'tool-card running');
-  card.open = !collapsed;
-  if (round != null) card.dataset.round = String(round);
-  const head = el('summary', 'tool-head');
-  const glyph = el('span', 'tool-glyph', '⏺');
-  const argsEl = el('span', 'tool-args', summary ?? toolSummary(name, args));
-  head.append(glyph, el('span', 'tool-name', name), argsEl);
-  const out = el('div', 'tool-out');
-  const speak = name === 'speak' ? speakControl(args) : null;
-  const more = button('ver completo', () => loadFullToolResult(entry, message), 'tool-more');
-  more.hidden = true;
-  card.append(head, out);
-  if (speak) card.appendChild(speak);
-  card.appendChild(more);
-  message.tools.appendChild(card);
-  ensureToolsToggle(message);
-  scrollMessages(paneOf(message));
-
-  const entry = { card, out, glyph, argsEl, more, callId, full: false, truncated: false };
-  card.addEventListener('toggle', () => {
-    if (card.open && entry.truncated && !entry.full) loadFullToolResult(entry, message);
-  });
-  return entry;
-}
-
-/**
- * La tarjeta de un permiso que sigue en el DOM, o null si ya no esta (la
- * borraron, p. ej. un re-render del pane). Evita dibujar dos tarjetas por el
- * mismo permiso sin dejar entradas huerfanas.
- */
-export function livePermission(askId) {
-  const entry = state.permissionCards.get(askId);
-  return entry && entry.card.isConnected ? entry : null;
-}
-
-export function addPermissionCard(message, data) {
-  // Llega por el stream de la sesion y por el canal global: sin esta guarda se
-  // dibujan dos tarjetas por el mismo permiso. Pero `renderPane` borra el pane,
-  // asi que si la tarjeta vieja quedo desconectada hay que rehacerla en vez de
-  // dejar el mapa apuntando a algo que ya no esta en el DOM.
-  const previous = state.permissionCards.get(data.askId);
-  if (previous && previous.card.isConnected) return previous.card;
-  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}${repeatedToolNotice(data.name)}`)
-  );
-  const args = el('div', 'perm-args', summarizeArgs(data.name, data.args, 300));
-  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);
-  // Una vez resuelta queda minima, pero se puede reabrir para leer que se pidio.
-  // Sin esto la tarjeta es info muerta: nunca se puede volver a desplegar.
-  head.addEventListener('click', () => {
-    if (!card.classList.contains('approved') && !card.classList.contains('denied')) return;
-    card.classList.toggle('collapsed');
-  });
-  message.tools.appendChild(card);
-  scrollMessages(paneOf(message));
-  state.permissionCards.set(data.askId, { card, verdict, buttons, message });
-
-  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;
-    try {
-      await api(`/api/permissions/${encodeURIComponent(data.askId)}`, {
-        method: 'POST',
-        body: { allow, scope },
-      });
-    } catch (error) {
-      // Esto se tragaba el error. La UI se cerraba igual, se borraba el permiso
-      // local y el siguiente reconcile lo volvia a traer porque el server
-      // seguia tenerlo pendiente: el permiso reaparecia una y otra vez sin
-      // decir por que.
-      if (error?.status === 404) {
-        // El server ya no tiene ese permiso (expiro o lo resolvio otra
-        // ventana): la tarjeta era vieja, no hay nada que decidir.
-        card.classList.remove('pending');
-        card.classList.add('collapsed', 'denied');
-        verdict.textContent = 'ya no aplica';
-        state.pendingAsks.delete(data.askId);
-        toast('Ese permiso ya no estaba esperando decisión.');
-        reconcile({ immediate: true });
-        return;
-      }
-      for (const btn of Object.values(buttons)) btn.disabled = false;
-      card.classList.remove('approved', 'denied');
-      card.classList.add('pending');
-      card.querySelector('.perm-icon').textContent = '⚠';
-      verdict.textContent = 'requiere aprobación';
-      toast(`No se pudo resolver el permiso: ${error.message}`);
-      reconcile({ immediate: true });
-      return;
-    }
-    rememberDecision(data.name);
-    // El permiso dejo de existir en el server: que el proximo snapshot no lo
-    // vuelva a marcar como pendiente ni lo vuelva a pintar.
-    state.pendingAsks.delete(data.askId);
-    reconcile({ immediate: true });
-  }
-  card.classList.add('pending');
-  return card;
-}
-
-export function rememberDecision(name) {
-  state.recentDecisions.set(name, Date.now());
-  // No crecer sin limite: solo interesa "lo acabo de aprobar".
-  for (const [tool, at] of state.recentDecisions) {
-    if (Date.now() - at > 120000) state.recentDecisions.delete(tool);
-  }
-}
-
-/**
- * Si la misma tool vuelve a pedir permiso segundos despues de que la
- * aprobaste, es una peticion **nueva** (otro `askId`), no la misma que vuelve:
- * la tarjeta lo dice, asi que el agente reintentando no parece un bug.
- */
-export function repeatedToolNotice(name) {
-  const at = state.recentDecisions.get(name);
-  if (!at) return '';
-  const seconds = Math.round((Date.now() - at) / 1000);
-  return seconds < 120 ? ` · lo pidió de nuevo (aprobaste hace ${seconds} s)` : '';
-}
-
-/** Resuelve una tarjeta desde aca (banner o `permission_resolved` de otro). */
-export function resolvePermissionCard(entry, allow) {
-  if (!entry) return;
-  for (const btn of Object.values(entry.buttons)) btn.disabled = true;
-  entry.card.classList.remove('pending');
-  if (allow === null) return;
-  entry.card.classList.add('collapsed', allow ? 'approved' : 'denied');
-  entry.card.querySelector('.perm-icon').textContent = allow ? '✓' : '✗';
-  entry.verdict.textContent = allow ? 'aprobado desde otra ventana' : 'denegado desde otra ventana';
-}
-
-/* --- formularios interactivos (ask_user) ---------------------------------- */
-
-export function liveQuestion(askId) {
-  const entry = state.questionCards.get(askId);
-  return entry && entry.card.isConnected ? entry : null;
-}
-
-/**
- * Formulario que el modelo pide con `ask_user`: en vez de preguntas numeradas en
- * el texto, la consola renderiza los campos y el usuario los contesta de una.
- */
-export function addQuestionCard(container, data) {
-  const previous = state.questionCards.get(data.askId);
-  if (previous && previous.card.isConnected) return previous.card;
-  const card = el('div', 'question-card');
-  if (data.title) card.appendChild(el('div', 'question-title', data.title));
-  const form = el('form', 'question-form');
-  const fields = [];
-  for (const q of data.questions ?? []) {
-    const field = el('label', 'question-field');
-    field.appendChild(el('span', 'question-label', q.label));
-    let input;
-    if (q.type === 'textarea') {
-      input = document.createElement('textarea');
-      input.rows = 3;
-    } else if (q.type === 'select' || q.type === 'confirm') {
-      input = document.createElement('select');
-      const options = q.type === 'confirm' ? ['sí', 'no'] : q.options ?? [];
-      for (const opt of options) {
-        const option = document.createElement('option');
-        option.value = opt;
-        option.textContent = opt;
-        input.appendChild(option);
-      }
-    } else {
-      input = document.createElement('input');
-      input.type = 'text';
-    }
-    if (q.placeholder && 'placeholder' in input) input.placeholder = q.placeholder;
-    input.name = q.id;
-    input.className = 'question-input';
-    field.appendChild(input);
-    form.appendChild(field);
-    fields.push({ q, input });
-  }
-  const actions = el('div', 'question-actions');
-  const status = el('span', 'muted', '');
-  const submit = button('enviar', () => {});
-  submit.type = 'submit';
-  submit.classList.add('btn', 'primary');
-  actions.append(status, el('span', 'spacer'), submit);
-  form.appendChild(actions);
-  card.appendChild(form);
-  (container.tools ?? container).appendChild(card);
-  scrollMessages(paneOf(container));
-  state.questionCards.set(data.askId, { card, fields, status });
-
-  const settle = (text, klass) => {
-    card.classList.add(klass);
-    status.textContent = text;
-    submit.disabled = true;
-    for (const { input } of fields) input.disabled = true;
-    state.pendingQuestions.delete(data.askId);
-    renderAlertSignals();
-  };
-
-  form.addEventListener('submit', async (event) => {
-    event.preventDefault();
-    const answers = {};
-    for (const { q, input } of fields) {
-      answers[q.id] = q.type === 'confirm' ? input.value === 'sí' : input.value;
-    }
-    submit.disabled = true;
-    try {
-      await api(`/api/questions/${encodeURIComponent(data.askId)}`, { method: 'POST', body: { answers } });
-      settle('enviado', 'answered');
-    } catch (error) {
-      if (error?.status === 404) {
-        settle('ya no aplica', 'answered');
-        reconcile({ immediate: true });
-        return;
-      }
-      submit.disabled = false;
-      status.textContent = `no se pudo enviar: ${error.message}`;
-    }
-  });
-  return card;
-}
-
-/** Formulario pendiente recreado tras un reload (no se reconstruye de mensajes). */
-export function showStandaloneQuestion(record, ask) {
-  if (liveQuestion(ask.askId)) return;
-  record.el.querySelector('.empty')?.remove();
-  const holder = addMessage('assistant', '', record.el);
-  holder.textEl.remove();
-  addQuestionCard(holder, { askId: ask.askId, title: ask.title, questions: ask.questions });
-  state.pendingQuestions.set(ask.askId, { sessionId: record.id });
-  renderAlertSignals();
-}
-
-/* --- botones de opcion (offer_choices) ------------------------------------ */
-
-export function sendChoice(label) {
-  chatInput.value = label;
-  sendMessage();
-}
-
-/** Botones tappables: al tocar uno se manda como mensaje del usuario. */
-export function addChoiceCard(container, { question, options } = {}) {
-  const items = Array.isArray(options) ? options.map((o) => String(o).trim()).filter(Boolean).slice(0, 6) : [];
-  if (!items.length || !container) return null;
-  const card = el('div', 'choice-card');
-  if (question) card.appendChild(el('div', 'choice-question', question));
-  const row = el('div', 'choice-options');
-  for (const label of items) row.appendChild(button(label, () => sendChoice(label), 'btn choice-btn'));
-  card.appendChild(row);
-  (container.tools ?? container).appendChild(card);
-  scrollMessages(paneOf(container));
-  return card;
-}
-
-/* --- plan/checklist (show_plan) ------------------------------------------- */
-
-export const PLAN_MARKS = { done: '✓', active: '◐', pending: '○' };
-
-/** Checklist interactivo: el modelo lo reemite para actualizar el estado. */
-export function addPlanCard(container, { title, steps } = {}) {
-  const items = Array.isArray(steps)
-    ? steps.filter((s) => s && String(s.text ?? '').trim()).slice(0, 20)
-    : [];
-  if (!items.length || !container) return null;
-  const card = el('div', 'plan-card');
-  if (title) card.appendChild(el('div', 'plan-title', String(title)));
-  const list = el('ul', 'plan-steps');
-  for (const step of items) {
-    const status = ['done', 'active', 'pending'].includes(step.status) ? step.status : 'pending';
-    const li = el('li', `plan-step ${status}`);
-    li.append(el('span', 'plan-mark', PLAN_MARKS[status]), el('span', 'plan-text', String(step.text)));
-    list.appendChild(li);
-  }
-  card.appendChild(list);
-  (container.tools ?? container).appendChild(card);
-  scrollMessages(paneOf(container));
-  return card;
-}
-
-export 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);
-}
-
-export function userImages(content) {
-  if (!Array.isArray(content)) return [];
-  return content
-    .filter((part) => part?.type === 'image_url')
-    .map((part) => part.image_url?.url)
-    .filter(Boolean);
-}
-
-export const ADVISOR_KINDS = {
-  code: { label: 'Cuidado!', glyph: '⚠' },
-  explain: { label: 'Importante!', glyph: 'ℹ' },
-  advice: { label: 'Consejo', glyph: '✦' },
-  summary: { label: 'Resumen', glyph: '✎' },
-};
-
-export function advisorMeta(kind) {
-  return ADVISOR_KINDS[kind] || { label: 'Asesor', glyph: '✦' };
-}
-
-/** Tarjeta del asesor: una capa de comentario, no un mensaje del agente. */
-export function addAdvisorCard(container, { text, kind } = {}) {
-  const clean = String(text ?? '').trim();
-  if (!clean || !container) return null;
-  const exists = [...container.querySelectorAll('.advisor-text')].some((node) => node.textContent === clean);
-  if (exists) return null;
-  const meta = advisorMeta(kind);
-  const klass = ADVISOR_KINDS[kind] ? ` advisor-${kind}` : '';
-  const card = el('div', `advisor-card${klass}`);
-  const head = el('div', 'advisor-head');
-  head.append(
-    el('span', 'advisor-glyph', meta.glyph),
-    el('span', 'advisor-title', 'asesor'),
-    el('span', `advisor-badge advisor-badge-${kind || 'advice'}`, meta.label)
-  );
-  card.append(head, el('div', 'advisor-text', clean));
-  container.appendChild(card);
-  return card;
-}
-
-/**
- * Marca del punto de compactación: una línea que corta el historial y, debajo,
- * el resumen que pasa a ser el contexto del modelo. Lo de arriba sigue visible
- * como histórico; al modelo solo le llega lo de abajo (más los mensajes nuevos).
- */
-export function addCompactCard(container, { text, label, running = false } = {}) {
-  if (!container) return null;
-  const card = el('div', `compact-card${running ? ' running' : ''}`);
-  const rule = el('div', 'compact-rule', label ?? (running ? 'compactando…' : 'contexto compactado'));
-  card.append(rule);
-  if (running) {
-    // La compactación puede tardar (el modelo resume el historial): mostramos el
-    // corte con un loader animado hasta que el resumen llegue.
-    rule.append(el('span', 'loader loader-thinking'));
-  } else {
-    const clean = String(text ?? '').trim();
-    if (clean) {
-      const body = el('div', 'compact-text text');
-      body.innerHTML = renderMarkdown(clean);
-      card.append(body);
-    }
-  }
-  container.appendChild(card);
-  return card;
-}
-
-/** Completa la tarjeta de compactación en curso con el resumen del modelo. */
-export function finishCompactCard(card, text) {
-  if (!card) return;
-  card.classList.remove('running');
-  const rule = card.querySelector('.compact-rule');
-  if (rule) rule.textContent = 'contexto compactado';
-  const clean = String(text ?? '').trim();
-  if (clean && !card.querySelector('.compact-text')) {
-    const body = el('div', 'compact-text text');
-    body.innerHTML = renderMarkdown(clean);
-    card.append(body);
-  }
-}
-
-export function renderStored(message, pane) {
-  if (message.agent_id) return;
-  if (message.name === 'compact') {
-    addCompactCard(pane, { text: typeof message.content === 'string' ? message.content : '' });
-    return;
-  }
-  if (message.role === 'assistant' && message.name === 'advisor') {
-    addAdvisorCard(pane, {
-      text: typeof message.content === 'string' ? message.content : '',
-      kind: message.mode,
-    });
-    return;
-  }
-  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.mode) setMessageMode(bubble, message.mode);
-    if (message.id) {
-      bubble.id = message.id;
-      bubble.wrap.dataset.messageId = message.id;
-    }
-    for (const call of message.tool_calls ?? []) {
-      const name = call.function?.name ?? call.name;
-      const args = parseToolArgs(call);
-      const tool = addToolCard(bubble, name, args, { callId: call.id, open: false });
-      tool.card.classList.remove('running');
-      tool.card.classList.add('done');
-      tool.glyph.textContent = '✓';
-      if (call.id) toolCardIndex.set(call.id, tool);
-      if (name === 'offer_choices') addChoiceCard(bubble, { question: args.question, options: args.options });
-      if (name === 'show_plan') addPlanCard(bubble, { title: args.title, steps: args.steps });
-    }
-  } else if (message.role === 'tool') {
-    const tool = toolCardIndex.get(message.tool_call_id);
-    if (!tool) return;
-    const { preview, truncated } = previewText(message.content);
-    finishToolCard(tool, { preview, truncated, failed: isFailedToolText(message.content) });
-  }
-}
-
-export function renderStoredMessages(messages, pane) {
-  toolCardIndex.clear();
-  for (const message of messages) renderStored(message, pane);
-}
-
-export function basename(p) {
-  const text = String(p ?? '').replace(/[\\/]+$/, '');
-  return text.split(/[\\/]/).pop() || text;
-}
-
-// Pestañas cerradas desde el último reporte: para que el server las olvide ya,
-// sin esperar el TTL de presencia.
-export const presenceClosed = new Set();
-
-/** Reporta al server qué pestañas están abiertas (proyectos "habilitados"). */
-export function sendPresence() {
-  const closed = [...presenceClosed];
-  presenceClosed.clear();
-  return api('/api/presence', { method: 'POST', body: { sessions: state.tabOrder, closed } }).catch(() => {});
-}
-
-export function persistTabs() {
-  storage.setJson('tamnora-open-tabs', { ids: state.tabOrder, active: state.activeTab });
-  sendPresence();
-}
-
-/**
- * Dibuja el sidebar desde el ultimo snapshot.
- *
- * Antes hacia su propio `GET /api/sessions`: dos caminos de datos que se
- * contradician. Ahora el unico que habla con el server es `reconcile`.
- */
-export function renderSessions(sessions) {
-  const list = sessions ?? [];
-  clear(sessionsEl);
-  const groups = new Map();
-  for (const session of list) {
-    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 open = state.expandedGroups.has(key);
-    head.classList.toggle('open', open);
-    const twisty = el('span', 'tw');
-    twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 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 delGroup = el('button', 'group-del');
-    delGroup.type = 'button';
-    delGroup.title = 'eliminar proyecto (borra sus sesiones, no los archivos)';
-    delGroup.setAttribute('aria-label', 'eliminar proyecto');
-    delGroup.appendChild(icon('trash', 13));
-    delGroup.addEventListener('click', (event) => {
-      event.stopPropagation();
-      removeProject(key, items.length);
-    });
-    head.appendChild(delGroup);
-    const list = el('ul', 'group-sessions');
-    list.hidden = !open;
-    head.addEventListener('click', () => {
-      const nowOpen = !state.expandedGroups.has(key);
-      if (nowOpen) state.expandedGroups.add(key);
-      else state.expandedGroups.delete(key);
-      head.classList.toggle('open', nowOpen);
-      list.hidden = !nowOpen;
-      clear(twisty);
-      twisty.appendChild(icon(nowOpen ? 'chevron-down' : 'chevron-right', 14));
-    });
-    for (const session of items) {
-      const li = el('li', `session-item${session.id === state.sessionId ? ' active' : ''}`);
-      const main = el('div', 'session-main');
-      main.appendChild(el('span', 'session-title', session.title || '(sin título)'));
-      const meta = [session.provider, session.model].filter(Boolean).join(' / ');
-      if (meta) main.appendChild(el('span', 'session-sub', meta));
-      li.appendChild(main);
-      // Punto de actividad: el server lo dice en el listado, y el reconciliador
-      // lo mantiene al dia si el run arranca despues de este render. El estado
-      // "esperandote a vos" tiene su propio color: un run trabajando en otra
-      // pestana no necesita tu atencion, un permiso si.
-      const awaiting = session.awaiting || [...state.pendingAsks.values()].filter((ask) => ask.sessionId === session.id).length;
-      if (awaiting) {
-        const dot = el('span', 'session-await');
-        dot.title = `${awaiting} permiso(s) esperando tu decision`;
-        li.appendChild(dot);
-      }
-      if (session.running || state.remoteActive.has(session.id)) {
-        const dot = el('span', 'session-live');
-        dot.title = 'el agente está trabajando en esta sesión';
-        li.appendChild(dot);
-      }
-      li.title = `${session.provider ?? ''}/${session.model ?? ''}${session.cwd ? ` · ${session.cwd}` : ''}`;
-      const del = el('button', 'session-del');
-      del.type = 'button';
-      del.title = 'eliminar sesión';
-      del.setAttribute('aria-label', `eliminar sesión ${session.title || ''}`);
-      del.appendChild(icon('trash', 13));
-      del.addEventListener('click', (event) => {
-        event.stopPropagation();
-        removeSession(session);
-      });
-      li.appendChild(del);
-      li.addEventListener('click', () => {
-  if (isMobile()) setSidebarOpen(false);
-  openTab(session.id);
-});
-      list.appendChild(li);
-    }
-    groupLi.append(head, list);
-    sessionsEl.appendChild(groupLi);
-  }
-  if (!list.length) sessionsEl.appendChild(el('li', 'muted', 'sin sesiones'));
-}
-
-/**
- * Pedir el estado fresco. Es un alias de `reconcile` que queda para los ~20
- * call sites que ya existian (despues de mandar un mensaje, borrar, etc.).
- */
-export function refreshSessions() {
-  reconcile({ immediate: true });
-}
-
-export function closeSessionsOf(cwd) {
-  for (const [id, record] of [...state.panes]) {
-    if ((record.cwd || '') === (cwd || '')) closeTab(id);
-  }
-}
-
-/** confirm + DELETE + notify + refresh: patron repetido en todo el panel. */
-export async function deleteEntity(url, { confirmText, label = 'eliminar', after = null, refresh = null }) {
-  if (!(await showConfirm(confirmText, { title: 'Confirmar', confirmLabel: label, danger: true }))) return;
-  const error = await api(url, { method: 'DELETE' }).then(() => null).catch((e) => e);
-  if (error) return notify(`No se pudo ${label}: ${error.message}`, 'notice err');
-  await after?.();
-  await refresh?.();
-}
-
-/** Import en un input de texto + status + refresh (MCP y skills). */
-export async function importEntity({ url, body, input, statusSel, refresh, okMessage }) {
-  setStatus(statusSel, 'importando…');
-  const data = await api(url, { method: 'POST', body }).catch((e) => ({ error: e.message }));
-  if (data?.error) return setStatus(statusSel, data.error, 'err');
-  input.value = '';
-  setStatus(statusSel, okMessage(data), 'ok');
-  await refresh?.();
-}
-
-/** Cambia el estado enabled de una entidad (PUT de cuerpo completo o POST toggle). */
-export async function toggleEntity(url, { method = 'PUT', body = undefined, errorLabel, refresh }) {
-  await api(url, { method, body }).catch((error) =>
-    notify(`No se pudo ${errorLabel}: ${error.message}`, 'notice err')
-  );
-  await refresh?.();
-}
-
-export async function removeSession(session) {
-  const name = session.title || '(sin título)';
-  await deleteEntity(`/api/sessions/${session.id}`, {
-    confirmText: `¿Eliminar la sesión "${name}"? No se puede deshacer.`,
-    after: () => {
-      if (state.panes.has(session.id)) closeTab(session.id);
-    },
-    refresh: refreshSessions,
-  });
-}
-
-export async function removeProject(cwd, count) {
-  const label = cwd ? basename(cwd) : 'sin carpeta';
-  await deleteEntity(`/api/projects?cwd=${encodeURIComponent(cwd ?? '')}`, {
-    confirmText: `¿Eliminar ${count} sesión(es) del proyecto "${label}"? No se tocan los archivos del disco.`,
-    label: 'eliminar el proyecto',
-    after: () => closeSessionsOf(cwd),
-    refresh: refreshSessions,
-  });
-}
-
-export 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;
-  renderFooterActivity(record?.working ? 'thinking' : null);
-  scheduleScrollNav();
-}
-
-export 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.';
-
-export function createChatTurn(pane, sessionKey) {
-  const turn = {
-    pane,
-    sessionKey,
-    // Turno iniciado desde esta consola: solo los turnos propios hablan (el
-    // replay de una reconexion o de otra pestaña no narran el pasado).
-    live: false,
-    active: null,
-    sawText: false,
-    // Cursor del log del run (`id:` del ultimo frame): reanuda desde aca.
-    cursor: 0,
-    // Si esta consola ya dibujo el mensaje del usuario de este turno.
-    sawUser: false,
-    lastTool: null,
-    startNewOnText: false,
-    agents: new Map(),
-    turnMode: modeSelect.value || 'agent',
-    assistant() {
-      if (!turn.active) {
-        turn.active = addMessage('assistant', '', turn.pane);
-        setMessageMode(turn.active, turn.turnMode);
-      }
-      return turn.active;
-    },
-    flowTarget() {
-      if (turn.startNewOnText) {
-        turn.active = addMessage('assistant', '', turn.pane);
-        setMessageMode(turn.active, turn.turnMode);
-        turn.startNewOnText = false;
-        setActivity(turn.active, 'thinking');
-      }
-      return turn.assistant();
-    },
-  };
-  return turn;
-}
-
-export function addAgentCard(message, data) {
-  const card = el('details', 'agent-card running');
-  const head = el('summary', 'agent-head');
-  const glyph = el('span', 'agent-glyph', '⏺');
-  const title = el('span', 'agent-title', `subagente · ${data.description ?? 'tarea'}`);
-  const status = el('span', 'agent-status', data.mode === 'plan' ? 'solo lectura' : 'agente');
-  head.append(glyph, title, status);
-  const body = el('div', 'agent-body');
-  const reasoning = el('details', 'reasoning');
-  reasoning.appendChild(el('summary', '', 'razonamiento'));
-  const reasoningEl = el('div', 'body');
-  reasoning.appendChild(reasoningEl);
-  reasoning.hidden = true;
-  const textEl = el('div', 'agent-text');
-  const toolsEl = el('div', 'agent-tools');
-  body.append(reasoning, textEl, toolsEl);
-  card.append(head, body);
-  message.tools.appendChild(card);
-  ensureToolsToggle(message);
-  scrollMessages(paneOf(message));
-  const pseudo = { tools: toolsEl, bubble: card, toolsToggle: null };
-  return {
-    card,
-    glyph,
-    statusEl: status,
-    textEl,
-    reasoning,
-    reasoningEl,
-    toolsEl,
-    message: pseudo,
-    lastTool: null,
-    sawText: false,
-  };
-}
-
-export function handleAgentEvent(event, data, turn) {
-  if (!data?.agentId) return false;
-  const agent = turn.agents.get(data.agentId);
-  if (!agent) return false;
-  if (event === 'text') {
-    agent.sawText = true;
-    agent.textEl.innerHTML = renderMarkdown(data.full);
-    scrollMessages(paneOf(agent.message));
-  } else if (event === 'reasoning') {
-    agent.reasoning.hidden = false;
-    if (!agent.sawText) agent.reasoningEl.textContent = data.full;
-  } else if (event === 'tool_call') {
-    agent.lastTool = addToolCard(agent.message, data.name, data.args, { callId: data.id, summary: data.summary });
-  } else if (event === 'tool_result') {
-    finishToolCard(agent.lastTool, data);
-  } else {
-    return false;
-  }
-  return true;
-}
-
-export function formatDuration(ms) {
-  const value = Number(ms) || 0;
-  if (value <= 0) return '';
-  return value >= 1000 ? `${(value / 1000).toFixed(1)}s` : `${value}ms`;
-}
-
-/** Cierre del turno: siempre deja un resumen visible (rondas, tools, tiempo). */
-export function renderCompletion(message, data) {
-  const tools = Number(data.toolCalls) || 0;
-  const parts = [`${data.rounds ?? '?'} ronda${data.rounds === 1 ? '' : 's'}`];
-  if (tools) parts.push(`${tools} herramienta${tools === 1 ? '' : 's'}`);
-  const duration = formatDuration(data.durationMs);
-  if (duration) parts.push(duration);
-  if (data.tokens?.total_tokens) parts.push(`${Number(data.tokens.total_tokens).toLocaleString('es')} tokens`);
-  const cut = ['max_rounds', 'no_progress', 'budget'].includes(data.stopReason);
-  const label = cut ? (data.wrappedUp ? '⚠ corte de seguridad · resumen' : '⚠ corte de seguridad') : '✓ terminado';
-  message.tools.appendChild(el('div', cut ? 'chip warn' : 'chip ok', `${label} · ${parts.join(' · ')}`));
-  scrollMessages(paneOf(message));
-}
-
-/** Retoma un turno cortado por límite/bucle sin tener que escribir "continúa". */
-export function addContinueButton(turn, data) {
-  const btn = el('button', 'continue-btn', data.wrappedUp ? '↻ Continuar el trabajo' : '↻ Continuar');
-  btn.type = 'button';
-  btn.addEventListener('click', () => {
-    if (state.panes.get(turn.sessionKey)?.working) return;
-    chatInput.value = 'Continuá donde quedaste.';
-    sendMessage();
-  });
-  turn.assistant().tools.appendChild(btn);
-  scrollMessages(paneOf(turn.assistant()));
-}
-
-export function handleChatEvent(event, data, turn) {
-  if (handleAgentEvent(event, data, turn)) return;
-  narrar(event, data, turn);
-  if (event === 'advice') {
-    addAdvisorCard(turn.pane, { text: data?.text, kind: data?.kind });
-    scrollMessages(turn.pane);
-    return;
-  }
-  if (event === 'agent_start') {
-    turn.agents.set(data.agentId, addAgentCard(turn.assistant(), data));
-  } else if (event === 'agent_end') {
-    const agent = turn.agents.get(data.agentId);
-    if (agent) {
-      agent.card.classList.remove('running');
-      agent.card.classList.add(data.status === 'error' ? 'failed' : 'done');
-      agent.glyph.textContent = data.status === 'error' ? '✗' : '✓';
-      agent.statusEl.textContent = data.status;
-      if (data.content && !agent.sawText) agent.textEl.textContent = data.content;
-    }
-  } else if (event === 'start') {
-    if (data.cwd) setCwd(data.cwd);
-    if (data.mode) turn.turnMode = data.mode;
-    if (turn.active) setMessageMode(turn.active, turn.turnMode);
-  } else if (event === 'user') {
-    // Otro cliente (el celular, Telegram) mando esto: hay que dibujarlo, pero
-    // sin duplicar lo que esta consola ya renderizo o lo que vino de SQLite.
-    const content = String(data?.content ?? '');
-    if (turn.sawUser || !content) return;
-    if (lastMessageMatches(turn.pane, 'user', content)) {
-      turn.sawUser = true;
-      return;
-    }
-    addMessage('user', content, turn.pane);
-    turn.sawUser = true;
-  } else if (event === 'text') {
-    turn.sawText = true;
-    const target = turn.flowTarget();
-    setText(target, data.full);
-    setActivity(target, 'thinking');
-  } else if (event === 'reasoning') {
-    const target = turn.flowTarget();
-    if (!turn.sawText) ensureReasoning(target).textContent = data.full;
-    setActivity(target, 'thinking');
-  } else if (event === 'tools') {
-    turn.startNewOnText = true;
-  } else if (event === 'tool_call') {
-    const target = turn.assistant();
-    setActivity(target, 'working');
-    turn.lastTool = addToolCard(target, data.name, data.args, { callId: data.id, summary: data.summary });
-    if (turn.live && data.name === 'speak') {
-      const texto = String(data.args?.texto ?? '').trim();
-      if (texto) reproducirVoz(texto, { voice: data.args?.voice, rate: data.args?.rate, pitch: data.args?.pitch, label: 'voz' }).catch(() => {});
-    }
-    if (turn.live && data.name === 'preview_url' && data.args?.url) {
-      setExplorerMode('preview');
-      // Desde otro dispositivo, 127.0.0.1 apunta al dispositivo: si el agente
-      // pidio una URL local, la publicamos por tailscale/tunel.
-      const port = isLocalHost() ? 0 : localPortOf(data.args.url);
-      if (port) openRemoteTunnel(port);
-      else loadPreview(data.args.url);
-    }
-    if (turn.live && data.name === 'offer_choices') {
-      addChoiceCard(target, { question: data.args?.question, options: data.args?.options });
-    }
-    if (turn.live && data.name === 'show_plan') {
-      addPlanCard(target, { title: data.args?.title, steps: data.args?.steps });
-    }
-  } else if (event === 'tool_result') {
-    setActivity(turn.assistant(), 'thinking');
-    finishToolCard(turn.lastTool, data);
-  } else if (event === 'question') {
-    if (!liveQuestion(data.askId)) addQuestionCard(turn.assistant(), data);
-    state.pendingQuestions.set(data.askId, { sessionId: data.sessionId ?? turn.sessionKey });
-    renderAlertSignals();
-    if (paneOf(turn.active) !== activePane) toast('Formulario pendiente en otra pestaña.');
-  } else if (event === 'question_answered') {
-    state.pendingQuestions.delete(data?.askId);
-    renderAlertSignals();
-    const entry = state.questionCards.get(data.askId);
-    if (entry && !entry.card.classList.contains('answered')) {
-      entry.card.classList.add('answered');
-      entry.status.textContent = data?.cancelled ? 'cancelado' : 'respondido en otra ventana';
-      for (const { input } of entry.fields) input.disabled = true;
-    }
-  } else if (event === 'permission') {
-    // Si la tarjeta ya esta en el DOM (la creo `renderPane` antes del replay, o
-    // llego por el canal global) no hay que crear OTRO mensaje del asistente
-    // vacio para colgarla.
-    const existing = livePermission(data.askId);
-    const target = existing ? existing.message : turn.assistant();
-    if (!existing) addPermissionCard(target, data);
-    state.pendingAsks.set(data.askId, {
-      sessionId: data.sessionId ?? turn.sessionKey,
-      name: data.name ?? '',
-      args: data.args ?? {},
-    });
-    renderAlertSignals();
-    // La tarjeta vive solo en el chat de esta sesion. Si el permiso cae en otra
-    // pestaña, sin este aviso la tarjeta queda enterrada y el run bloqueado
-    // esperando una decision que nadie ve.
-    if (paneOf(turn.active) !== activePane) {
-      toast(`Permiso pendiente: ${data.name} en otra pestaña.`);
-    }
-  } else if (event === 'permission_resolved') {
-    setActivity(turn.assistant(), 'thinking');
-    state.pendingAsks.delete(data?.askId);
-    renderAlertSignals();
-    const entry = state.permissionCards.get(data.askId);
-    // Solo entra aca si el veredicto sigue pendiente, o sea que **otra** ventana
-    // (la PC, otro celular, Telegram) lo resolvio: decirlo evita que el celular
-    // muestre "aprobado" como si hubiera sido su decision.
-    if (entry && entry.verdict.textContent === 'requiere aprobación') {
-      resolvePermissionCard(entry, data.allow);
-      if (paneOf(turn.assistant()) === activePane) {
-        toast(`Permiso ${data.allow ? 'aprobado' : 'denegado'} desde otra ventana.`);
-      }
-    }
-  } else if (event === 'stall') {
-    if (!turn.sawText) setText(turn.assistant(), `⚠ ${data.seconds} s sin respuesta del modelo (proveedor caído o muy lento). Sigo esperando...`);
-  } else if (event === 'retry') {
-    if (!turn.sawText) setText(turn.assistant(), `↻ reintentando (${data.attempt}) en ${Math.round((data.delayMs || 0) / 1000)} s...`);
-  } else if (event === 'trim') {
-    turn.assistant().tools.appendChild(el('div', 'chip', `✂ contexto recortado (${data.trimmed} resultados, ${data.dropped} mensajes)`));
-  } else if (event === 'repeat') {
-    turn.assistant().tools.appendChild(el('div', 'chip warn', `↻ ${data.name} repetida sin cambios`));
-  } else if (event === 'usage') {
-    setContextUsage(data.tokens);
-  } else if (event === 'warning') {
-    turn.assistant().tools.appendChild(el('div', 'chip', `⚠ ${data.message}`));
-  } else if (event === 'error') {
-    setActivity(turn.active, null);
-    turn.assistant().tools.appendChild(el('div', 'chip err', `✗ ${data.message}`));
-  } else if (event === 'done') {
-    setActivity(turn.active, null);
-    const finalText = (turn.active?.textEl?.textContent ?? '').trim();
-    const tools = Number(data.toolCalls) || 0;
-    if (!finalText) {
-      if (data.stopReason === 'no_progress') {
-        setText(turn.assistant(), '⚠ El agente se quedó repitiendo las mismas herramientas sin avanzar.');
-      } else if (data.stopReason === 'budget') {
-        setText(turn.assistant(), '⚠ El agente alcanzó el presupuesto de tokens/tiempo sin respuesta final.');
-      } else if (data.stopReason === 'max_rounds') {
-        setText(
-          turn.assistant(),
-          `⚠ El agente alcanzó el máximo de rondas (${data.rounds ?? '?'}) sin dejar una respuesta final.${
-            tools ? ` Hizo ${tools} llamadas a herramientas.` : ''
-          }`
-        );
-      } else if (tools) {
-        setText(turn.assistant(), '✓ El agente terminó sus herramientas, pero no devolvió un mensaje final.');
-      } else {
-        setText(turn.assistant(), '(sin texto)');
-      }
-    }
-    renderCompletion(turn.active, data);
-    if (data.continuable) addContinueButton(turn, data);
-    updateStatus({ rounds: data.rounds, stopReason: data.stopReason });
-    addTokens(data.tokens);
-  } else if (event === 'aborted') {
-    setActivity(turn.active, null);
-    setText(turn.assistant(), '⏹ cancelado.');
-  } else if (event === 'resumed') {
-    // Reconexion al stream de la sesion: el server dice hasta donde replayo.
-    turn.cursor = Number(data.cursor) || turn.cursor;
-    if (data.active === false) closeTurn(turn, 'El turno ya había terminado.');
-  } else if (event === 'idle') {
-    // El server cerro el stream porque no hay nada corriendo.
-    closeTurn(turn, '');
-  }
-}
-
-/**
- * Cierra un turno cuyo stream se agoto sin `done`: deja el mensaje en un estado
- * coherente en vez de colgado en "pensando...".
- */
-export function closeTurn(turn, text) {
-  setActivity(turn.active, null);
-  const message = turn.assistant();
-  if (!text) return;
-  if ((message.textEl?.textContent ?? '').trim()) return;
-  setText(message, text);
-}
-
-/**
- * El mensaje del usuario se emite antes de persistirse (routes/chat.js), asi que
- * un cliente que se engancha a mitad de run no lo tiene todavia. Y al reconectar
- * el mismo evento se vuelve a reproducir, cuando `renderPane` ya lo dibujo desde
- * SQLite: por eso la doble guarda.
- */
-export function lastMessageMatches(pane, role, text) {
-  const nodes = pane.querySelectorAll(':scope > .msg');
-  const last = nodes[nodes.length - 1];
-  if (!last || !last.classList.contains(role)) return false;
-  return last.textContent.trim() === String(text ?? '').trim();
-}
-
-/**
- * Dueña de un run: mantiene el stream vivo hasta que el turno termina.
- *
- * Un corte del tunel (4G, pantalla bloqueada, proxy) deja el `fetch` colgado
- * sin error, asi que reconectamos con backoff desde el ultimo cursor en vez de
- * dejar la UI en "pensando..." para siempre. El server honra `?from=`, asi que
- * reanudar no duplica eventos.
- *
- * `rerender` solo aplica al primer intento: al reconectar NO hay que volver a
- * pintar el pane, porque borraria el mensaje del asistente en vuelo y sus
- * tarjetas de tools.
- */
-export async function followRunSession(sessionKey, turn, { from = 0, rerender = false, attempts = 6 } = {}) {
-  const record = state.panes.get(sessionKey);
-  const controller = new AbortController();
-  controllers.set(sessionKey, controller);
-  if (record) setWorking(sessionKey, true);
-  let needsRerender = rerender;
-  let chip = null;
-
-  try {
-    await followRun({
-      attempts,
-      from,
-      signal: controller.signal,
-      open: async (cursor) => {
-        if (needsRerender) {
-          needsRerender = false;
-          await renderPane(sessionKey);
-        }
-        await openStream(
-          `/api/sessions/${sessionKey}/stream?from=${cursor}`,
-          { signal: controller.signal },
-          (event, data, id) => {
-            if (id !== null) turn.cursor = Number(id) || turn.cursor;
-            handleChatEvent(event, data, turn);
-          }
-        );
-        return { finished: true, cursor: turn.cursor };
-      },
-      onRetry: ({ attempt, delay }) => {
-        setActivity(turn.active, 'reconnecting');
-        if (!chip) {
-          chip = el('div', 'chip warn', '⟳ reconectando…');
-          turn.assistant().tools.appendChild(chip);
-        }
-        chip.textContent = `⟳ reconectando (intento ${attempt}, en ${Math.round(delay / 1000)} s)…`;
-      },
-    });
-  } catch (error) {
-    // Un error del handler (no del transporte) no reintenta: es un bug de la
-    // consola y dejarlo pasar deja un "reconectando" que no dice nada.
-    if (error?.eventHandler) {
-      setActivity(turn.active, null);
-      toast(`Error de la consola al procesar el stream: ${error.message}`);
-    }
-    throw error;
-  } finally {
-    controllers.delete(sessionKey);
-    if (chip) chip.remove();
-    if (state.panes.get(sessionKey) === record) setWorking(sessionKey, false);
-    setActivity(turn.active, null);
-    renderAlertSignals();
-    reconcile({ immediate: true });
-  }
-}
-
-/**
- * Se engancha a un run en curso: re-renderiza el historial persistido y
- * reproduce los eventos del turno actual (asi el progreso no se pierde si el
- * telefono bloqueo la pantalla o se corto la red).
- */
-export async function attachRun(sessionKey, pane) {
-  const record = state.panes.get(sessionKey);
-  if (record?.working) return;
-  // `reconcile` puede pedirlo dos veces seguidas (sweep + canal global).
-  if (controllers.has(sessionKey)) return;
-  const turn = createChatTurn(pane, sessionKey);
-  await followRunSession(sessionKey, turn, { from: 0, rerender: true });
-}
-
-export function contextTokensForRequest() {
-  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
-  return context ? Math.floor(context * 0.8) : undefined;
-}
-
-export async function startTurn(sessionKey, pane, input, images, opts = {}) {
-  const user = addMessage('user', input || `(${images.length} imagen${images.length > 1 ? 'es' : ''})`, pane);
-  appendImages(user, images);
-  const turn = createChatTurn(pane, sessionKey);
-  // Lo dibujamos nosotros, asi que el evento `user` del server no lo repite.
-  turn.sawUser = true;
-  turn.live = true;
-  turn.active = addMessage('assistant', '', pane);
-  setMessageMode(turn.active, turn.turnMode);
-  const controller = new AbortController();
-  controllers.set(sessionKey, controller);
-  setWorking(sessionKey, true);
-
-  // El tipo de agente lo manda la sesion (no los controles globales): asi dos
-  // pestañas con modelos distintos no se pisan.
-  const owner = state.panes.get(sessionKey);
-  try {
-    await streamPost(
-      '/api/chat',
-      {
-        input: input || '(imagen adjunta)',
-        images: images.length ? images : undefined,
-        sessionId: sessionKey,
-        provider: owner?.provider || providerSelect.value || undefined,
-        model: owner?.model || modelSelect.value || undefined,
-        mode: owner?.mode || modeSelect.value || undefined,
-        yes: yesInput.checked ? true : undefined,
-        contextTokens: contextTokensForRequest(),
-        interrupt: opts.interrupt ? true : undefined,
-      },
-      (event, data, id) => {
-        if (id !== null) turn.cursor = Number(id) || turn.cursor;
-        handleChatEvent(event, data, turn);
-      },
-      controller.signal
-    );
-  } catch (error) {
-    if (error.name === 'AbortError') {
-      setActivity(turn.active, null);
-      setText(turn.assistant(), '⏹ cancelado.');
-    } else if (error.status === 409) {
-      // Otro cliente (celular, Telegram) tiene el turno: este mensaje no se
-      // guardo, asi que sacamos lo que se dibujo y va a la cola visible.
-      const bubble = turn.active;
-      turn.active = null;
-      user.wrap.remove();
-      bubble?.wrap.remove();
-      enqueueMessage(sessionKey, input, images);
-      toast('La sesión ya tiene una respuesta en curso; tu mensaje quedó en la cola.');
-    } else {
-      // El POST se cayo pero el run puede seguir vivo: seguimos el turno con el
-      // mismo `turn` para no perder las tools ya dibujadas.
-      setActivity(turn.active, 'reconnecting');
-      await followRunSession(sessionKey, turn, { from: turn.cursor, rerender: false });
-    }
-  } finally {
-    if (controllers.get(sessionKey) === controller) controllers.delete(sessionKey);
-    setActivity(turn.active, null);
-    setWorking(sessionKey, false);
-    renderAlertSignals();
-    drainQueue(sessionKey);
-  }
-}
-
-/* --- cola de mensajes (enviar mientras el agente trabaja) ----------------- */
-
-export function queueFor(sessionKey, create = false) {
-  if (!state.queues.has(sessionKey)) {
-    if (!create) return [];
-    state.queues.set(sessionKey, []);
-  }
-  return state.queues.get(sessionKey);
-}
-
-export function enqueueMessage(sessionKey, input, images) {
-  queueFor(sessionKey, true).push({ id: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, input, images });
-  renderQueue(sessionKey);
-}
-
-export function renderQueue(sessionKey = state.sessionId) {
-  const queueEl = $('#chat-queue');
-  if (!queueEl || sessionKey !== state.sessionId) return;
-  clear(queueEl);
-  const items = queueFor(sessionKey);
-  queueEl.hidden = !items.length;
-  if (!items.length) return;
-  queueEl.appendChild(el('div', 'queue-label', `en cola (${items.length})`));
-  for (const item of items) {
-    const row = el('div', 'queue-item');
-    const text = item.input || `(${item.images.length} imagen${item.images.length > 1 ? 'es' : ''})`;
-    row.append(el('span', 'queue-text', text));
-    row.appendChild(
-      button('✕', () => {
-        const list = queueFor(sessionKey);
-        const index = list.findIndex((entry) => entry.id === item.id);
-        if (index >= 0) list.splice(index, 1);
-        renderQueue(sessionKey);
-      }, 'queue-remove')
-    );
-    queueEl.appendChild(row);
-  }
-}
-
-export function drainQueue(sessionKey) {
-  const record = state.panes.get(sessionKey);
-  if (!record || record.working) return;
-  // Mientras se interrumpe, el mensaje que manda el usuario lo arranca
-  // `interruptAndSend`, no la cola.
-  if (interrupting.has(sessionKey)) return;
-  const list = queueFor(sessionKey);
-  if (!list.length) return;
-  const next = list.shift();
-  renderQueue(sessionKey);
-  startTurn(sessionKey, record.el, next.input, next.images);
-}
-
-/* --- shell directo con "!" ------------------------------------------------ */
-
-export async function runShell(command) {
-  const record = state.panes.get(state.sessionId);
-  const pane = activePane ?? record?.el;
-  if (!pane) return;
-  addMessage('user', `! ${command}`, pane);
-  const message = addMessage('assistant', '', pane);
-  message.textEl.appendChild(el('pre', 'shell-out', 'ejecutando…'));
-  const data = await api('/api/shell', {
-    method: 'POST',
-    body: { command, cwd: record?.cwd || state.cwd || undefined },
-  }).catch((error) => ({ error: error.message }));
-  if (data?.error) {
-    message.textEl.textContent = '';
-    message.textEl.classList.add('notice', 'err');
-    message.textEl.textContent = data.error;
-    return;
-  }
-  message.textEl.textContent = '';
-  const pre = el('pre', 'shell-out');
-  pre.textContent = (data.output || '').trim() || '(sin salida)';
-  message.textEl.appendChild(pre);
-  scheduleScrollNav();
-}
-
-export async function sendMessage() {
-  const current = state.panes.get(state.sessionId);
-  hideSlashMenu();
-  let input = chatInput.value.trim();
-  const images = state.attachments.slice();
-
-  // "!" ejecuta un comando de shell directo, sin pasar por el modelo.
-  if (input.startsWith('!')) {
-    const command = input.slice(1).trim();
-    chatInput.value = '';
-    state.attachments = [];
-    renderAttachments();
-    if (command) runShell(command);
-    return;
-  }
-
-  if (input.startsWith('/') && !images.length) {
-    const name = input.slice(1).split(/\s+/)[0].toLowerCase();
-    const arg = input.slice(1 + name.length).trim();
-    // Limpiamos el input de una: hay comandos lentos (compactar, resumir) y no
-    // queremos dejar el comando escrito mientras corren.
-    chatInput.value = '';
-    onChatInputChanged();
-    const outcome = await runCommand(name, arg);
-    if (!outcome || outcome.handled) return;
-    input = outcome.input ?? input;
-  }
-  if (!input && !images.length) return;
-  if (!state.sessionId) {
-    state.pendingInput = input;
-    openFolderPicker();
-    return;
-  }
-
-  // Si el agente está trabajando, el mensaje queda en cola y se envía solo.
-  // Para cortarlo y mandar el mensaje ya, está el botón/atajo de interrumpir.
-  if (current?.working) {
-    enqueueMessage(state.sessionId, input, images);
-    chatInput.value = '';
-    state.attachments = [];
-    renderAttachments();
-    syncInterruptBtn();
-    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;
-  }
-
-  chatInput.value = '';
-  state.attachments = [];
-  renderAttachments();
-  await startTurn(state.sessionId, activePane, input, images);
-}
-
-/**
- * Interrumpe el turno en curso y manda `input`/`images` ya mismo.
- *
- * Marcamos la sesion en `interrupting` para que el `finally` del turno viejo no
- * dispare la cola (lo arrancamos nosotros). Esperamos a que el turno anterior se
- * desenrolle antes de empezar el nuevo; el server, por su lado, cancela el run y
- * espera a que termine antes de aceptar el POST con `interrupt: true`.
- */
-export async function interruptAndSend(sessionKey, input, images) {
-  const record = state.panes.get(sessionKey);
-  if (!record) return;
-  interrupting.add(sessionKey);
-  controllers.get(sessionKey)?.abort();
-  await whenIdle(sessionKey);
-  const promise = startTurn(sessionKey, record.el, input, images, { interrupt: true });
-  // startTurn ya arranco (working=true y controller nuevo); soltamos el guardia
-  // para que SU finally pueda drenar la cola.
-  interrupting.delete(sessionKey);
-  await promise;
-}
-
-export function sendInterrupt() {
-  const record = state.panes.get(state.sessionId);
-  if (!record?.working) return;
-  const input = chatInput.value.trim();
-  // Los comandos (`/…`, `!…`) se resuelven por su camino normal, no interrumpen.
-  if (input.startsWith('/') || input.startsWith('!')) return sendMessage();
-  const images = state.attachments.slice();
-  if (!input && !images.length) return;
-  chatInput.value = '';
-  state.attachments = [];
-  renderAttachments();
-  syncInterruptBtn();
-  interruptAndSend(state.sessionId, input, images);
-}
-
-/* --- image attachments ---------------------------------------------------- */
-
-export const attachInput = $('#image-input');
-export const attachPreview = $('#attach-preview');
-
-export 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);
-  });
-}
-
-export 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);
-  });
-}
-
-export 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;
-  });
-}
-
-export 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();
-}
-
+import {
+  addTokens,
+  isMobile,
+  modeSelect,
+  modelSelect,
+  openFolderPicker,
+  providerSelect,
+  setContextUsage,
+  setCwd,
+  setSidebarOpen,
+  updateStatus,
+  yesInput,
+} from './chrome.js';
+import { hideSlashMenu, notify, onChatInputChanged, runCommand, toast } from './commands.js';
+export {
+  ADVISOR_KINDS,
+  READ_ONLY_TOOLS,
+  advisorMeta,
+  basename,
+  formatDuration,
+  isFailedToolText,
+  isReadOnlyTool,
+  parseToolArgs,
+  previewText,
+  screenshotName,
+  toolSummary,
+  userImages,
+  userText,
+} from './chatFormat.js';
+import {
+  basename,
+  formatDuration,
+  isFailedToolText,
+  parseToolArgs,
+  previewText,
+  userImages,
+  userText,
+} from './chatFormat.js';
+
+import { $, api, button, clear, el, icon, openStream, showConfirm, state, storage, streamPost } from './core.js';
+import { isLocalHost, loadPreview, localPortOf, openRemoteTunnel, setExplorerMode } from './explorer.js';
+import { renderMarkdown } from './markdown.js';
+import { followRun } from './runStream.js';
+import {
+  closeTab,
+  openTab,
+  setWorking,
+  showStandalonePermission,
+  syncInterruptBtn,
+  whenIdle,
+} from './sessions.js';
+import { setStatus } from './settings.js';
+import { reconcile, renderAlertSignals } from './system.js';
+import { narrar, reproducirVoz } from './voice.js';
+import {
+  addAdvisorCard,
+  addChoiceCard,
+  addCompactCard,
+  addPermissionCard,
+  addPlanCard,
+  addQuestionCard,
+  addToolCard,
+  ensureToolsToggle,
+  finishToolCard,
+  livePermission,
+  liveQuestion,
+  resolvePermissionCard,
+  showStandaloneQuestion,
+  toolCardIndex,} from './cards.js';
+export {
+  PLAN_MARKS,
+  addAdvisorCard,
+  addChoiceCard,
+  addCompactCard,
+  addPermissionCard,
+  addPlanCard,
+  addQuestionCard,
+  addToolCard,
+  ensureToolsToggle,
+  finishCompactCard,
+  finishToolCard,
+  livePermission,
+  liveQuestion,
+  loadFullToolResult,
+  rememberDecision,
+  renderToolOut,
+  repeatedToolNotice,
+  resolvePermissionCard,
+  sendChoice,
+  showScreenshot,
+  showStandaloneQuestion,
+  speakControl,
+  toolCardIndex,} from './cards.js';
+
+// `scrollNavFrame` debe existir antes de `initLayout()`: `applyPanelWidths`
+// llama a `scheduleScrollNav()` durante el arranque (evita el TDZ).
+export let scrollNavFrame = 0;
+
+/* --- chat ---------------------------------------------------------------- */
+
+export const blankPane = $('#messages');
+export const panesEl = $('#panes');
+export const tabbarEl = $('#tabbar');
+export const chatForm = $('#chat-form');
+export const chatInput = $('#chat-input');
+export const submitBtn = chatForm.querySelector('button[type="submit"]');
+export const stopBtn = $('#stop-btn');
+export const interruptBtn = $('#interrupt-btn');
+export const controllers = new Map();
+// `whenIdle` espera a que el turno de una sesion termine (lo usa "interrumpir").
+export const idleWaiters = new Map();
+// Sesiones donde el turno actual se esta cortando a proposito: `drainQueue` no
+// debe arrancar un mensaje al final de ese turno (lo arranca el interruptor).
+export const interrupting = new Set();
+export const sessionsEl = $('#sessions');
+
+export let activePane = blankPane;
+
+export const paneOf = (message) => message?.bubble?.closest('.messages') ?? activePane;
+
+export const scrollMessages = (pane = activePane) => {
+  if (pane) pane.scrollTop = pane.scrollHeight;
+};
+
+export const scrollNav = $('#scroll-nav');
+export const scrollTopBtn = $('#scroll-top');
+export const scrollDownBtn = $('#scroll-down');
+
+/** Muestra/oculta los saltos de scroll según el pane activo. */
+export function updateScrollNav() {
+  const pane = activePane;
+  if (!pane) return;
+  const max = pane.scrollHeight - pane.clientHeight;
+  const visible = max > 40;
+  scrollNav.hidden = !visible;
+  if (!visible) return;
+  scrollTopBtn.disabled = pane.scrollTop < 40;
+  scrollDownBtn.disabled = max - pane.scrollTop < 40;
+}
+
+export function scheduleScrollNav() {
+  if (scrollNavFrame) return;
+  scrollNavFrame = requestAnimationFrame(() => {
+    scrollNavFrame = 0;
+    updateScrollNav();
+  });
+}
+
+export function addMessage(role, text = '', pane = activePane) {
+  pane.querySelector('.empty')?.remove();
+  const wrap = el('div', `msg ${role}`);
+  const label = el('div', 'msg-label');
+  let modeEl = null;
+  if (role === 'user') {
+    label.textContent = '❯ vos';
+  } else {
+    label.appendChild(el('span', 'msg-name', 'tamnora'));
+    modeEl = el('span', 'msg-mode');
+    modeEl.hidden = true;
+    label.appendChild(modeEl);
+  }
+  const bubble = el('div', 'bubble');
+  const textEl = el('div', 'text');
+  const tools = el('div', 'tools');
+  bubble.append(textEl, tools);
+  wrap.append(label, bubble);
+  pane.appendChild(wrap);
+  const message = { role, wrap, bubble, label, modeEl, textEl, tools, reasoningEl: null, id: null };
+  addMessageActions(message);
+  if (text) setText(message, text);
+  scrollMessages(pane);
+  return message;
+}
+
+export function setMessageMode(message, modeId) {
+  if (!message?.modeEl) return;
+  const mode = modeId === 'plan' ? 'plan' : 'build';
+  message.modeEl.textContent = mode === 'plan' ? 'Plan' : 'Build';
+  message.modeEl.dataset.mode = mode;
+  message.modeEl.hidden = false;
+}
+
+export let openMessageMenu = null;
+
+/** El menu flota (position: fixed) para no quedar recortado por el scroll. */
+export function positionMessageMenu() {
+  if (!openMessageMenu) return;
+  const { menu, trigger } = openMessageMenu;
+  const rect = trigger.getBoundingClientRect();
+  const size = menu.getBoundingClientRect();
+  let top = rect.bottom + 4;
+  if (top + size.height > window.innerHeight - 8) top = Math.max(8, rect.top - size.height - 4);
+  let left = rect.left;
+  if (left + size.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - size.width - 8);
+  menu.style.top = `${top}px`;
+  menu.style.left = `${left}px`;
+}
+
+export function closeMessageMenus() {
+  if (!openMessageMenu) return;
+  const current = openMessageMenu;
+  openMessageMenu = null;
+  current.menu.hidden = true;
+  current.trigger.setAttribute('aria-expanded', 'false');
+  current.actions?.appendChild(current.menu);
+}
+
+export function toggleMessageMenu(message) {
+  const wasOpen = openMessageMenu === message;
+  closeMessageMenus();
+  if (wasOpen) return;
+  document.body.appendChild(message.menu);
+  message.menu.hidden = false;
+  message.trigger.setAttribute('aria-expanded', 'true');
+  openMessageMenu = message;
+  positionMessageMenu();
+}
+
+export function addMessageActions(message) {
+  const actions = el('div', 'msg-actions');
+  const trigger = el('button', 'msg-menu-btn');
+  trigger.type = 'button';
+  trigger.appendChild(icon(window.matchMedia('(min-width: 821px)').matches ? 'dots-horizontal' : 'dots-vertical', 16));
+  trigger.title = 'opciones del mensaje';
+  trigger.setAttribute('aria-haspopup', 'menu');
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('aria-label', 'opciones del mensaje');
+  trigger.addEventListener('click', () => toggleMessageMenu(message));
+
+  const menu = el('div', 'msg-menu');
+  menu.hidden = true;
+  menu.setAttribute('role', 'menu');
+  const addItem = (label, run, iconName, cls = 'msg-act') => {
+    const item = el('button', cls);
+    item.type = 'button';
+    item.setAttribute('role', 'menuitem');
+    if (iconName) item.appendChild(icon(iconName, 15, 'mi'));
+    item.appendChild(el('span', 'mlabel', label));
+    item.addEventListener('click', () => {
+      closeMessageMenus();
+      run();
+    });
+    menu.appendChild(item);
+  };
+  addItem('copiar', () => copyMessage(message), 'copy');
+  if (message.role === 'assistant') addItem('regenerar', () => regenerate(message), 'refresh-cw');
+  if (message.role === 'assistant') addItem('deshacer cambios', () => undoTurn(message), 'undo');
+  if (message.role === 'user') addItem('editar', () => editMessage(message), 'pencil');
+  menu.appendChild(el('div', 'msg-menu-sep'));
+  addItem('borrar desde acá', () => deleteFrom(message), 'trash', 'msg-act danger');
+
+  actions.append(trigger, menu);
+  message.bubble.appendChild(actions);
+  message.actions = actions;
+  message.menu = menu;
+  message.trigger = trigger;
+}
+
+export function messageId(message) {
+  return message.wrap?.dataset.messageId || message.id || null;
+}
+
+export 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(() => {});
+}
+
+export async function renderPane(id) {
+  const record = state.panes.get(id);
+  if (!record) return null;
+  const detail = await api(`/api/sessions/${id}`).catch(() => null);
+  if (!detail) return null;
+  record.el.replaceChildren();
+  renderStoredMessages(detail.messages, record.el);
+  if (!detail.messages.length) record.el.appendChild(el('div', 'empty', 'Sesión vacía.'));
+  // Los permisos pendientes no son mensajes, asi que `replaceChildren` los
+  // borra. Hay que repintarlos aca: sin esto una tarjeta de permiso se ve y
+  // al primer re-render (run_start, sweep, reconexion) desaparece para siempre.
+  for (const ask of detail.permissions ?? []) showStandalonePermission(record, ask);
+  for (const ask of detail.questions ?? []) showStandaloneQuestion(record, ask);
+  return detail;
+}
+
+export async function reloadPane(id) {
+  const detail = await renderPane(id);
+  const record = state.panes.get(id);
+  if (detail?.running && record && !record.working) await attachRun(id, record.el);
+}
+
+export 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();
+}
+
+export async function undoTurn(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 || [];
+  const at = messages.findIndex((m) => m.id === messageId(message));
+  let turn = null;
+  for (let i = at >= 0 ? at : messages.length - 1; i >= 0; i--) {
+    if (messages[i].role === 'user') {
+      turn = messages[i];
+      break;
+    }
+  }
+  if (!turn) return;
+  if (
+    !(await showConfirm('¿Deshacer este turno? Se restauran los archivos a como estaban y se borra el turno del historial.', {
+      title: 'Deshacer cambios',
+      confirmLabel: 'deshacer',
+      danger: true,
+    }))
+  ) {
+    return;
+  }
+  await api(`/api/sessions/${id}/rewind`, { method: 'POST', body: { turn: turn.id } }).catch(() => {});
+  await reloadPane(id);
+}
+
+export function editMessage(message) {  const id = messageId(message);
+  chatInput.value = message.textEl.textContent;
+  chatInput.focus();
+  state.pendingEdit = id ? { fromId: id } : null;
+}
+
+export async function deleteFrom(message) {
+  const id = messageId(message);
+  if (!id || !(await showConfirm('¿Borrar este mensaje y todo lo posterior?', { title: 'Borrar mensajes', confirmLabel: 'borrar', danger: true }))) return;
+  const sessionKey = state.sessionId;
+  await api(`/api/sessions/${sessionKey}/truncate`, { method: 'POST', body: { fromId: id } }).catch(() => {});
+  await reloadPane(sessionKey);
+}
+
+export const ACTIVITY = {
+  thinking: { cls: 'loader-thinking', label: 'pensando…' },
+  working: { cls: 'loader-working', label: 'trabajando…' },
+  listening: { cls: 'loader-working', label: 'escuchando…' },
+  reconnecting: { cls: 'loader-working', label: 'reconectando…' },
+  stopping: { cls: 'loader-working', label: 'deteniendo…' },
+};
+
+export const footerActivityEl = $('#sb-activity');
+
+/** El indicador de "pensando/trabajando" vive en el footer (una sola vez). */
+export function renderFooterActivity(kind) {
+  if (!footerActivityEl) return;
+  if (!kind) {
+    footerActivityEl.hidden = true;
+    footerActivityEl.replaceChildren();
+    return;
+  }
+  const def = ACTIVITY[kind] ?? ACTIVITY.thinking;
+  footerActivityEl.hidden = false;
+  footerActivityEl.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
+}
+
+export function setActivity(message, kind) {
+  // Solo el turno de la sesion activa refleja su actividad en el footer.
+  if (paneOf(message) !== activePane) return;
+  renderFooterActivity(kind);
+}
+
+export 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));
+}
+
+export 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);
+}
+
+export 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;
+}
+
+export function renderStored(message, pane) {
+  if (message.agent_id) return;
+  if (message.name === 'compact') {
+    addCompactCard(pane, { text: typeof message.content === 'string' ? message.content : '' });
+    return;
+  }
+  if (message.role === 'assistant' && message.name === 'advisor') {
+    addAdvisorCard(pane, {
+      text: typeof message.content === 'string' ? message.content : '',
+      kind: message.mode,
+    });
+    return;
+  }
+  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.mode) setMessageMode(bubble, message.mode);
+    if (message.id) {
+      bubble.id = message.id;
+      bubble.wrap.dataset.messageId = message.id;
+    }
+    for (const call of message.tool_calls ?? []) {
+      const name = call.function?.name ?? call.name;
+      const args = parseToolArgs(call);
+      const tool = addToolCard(bubble, name, args, { callId: call.id, open: false });
+      tool.card.classList.remove('running');
+      tool.card.classList.add('done');
+      tool.glyph.textContent = '✓';
+      if (call.id) toolCardIndex.set(call.id, tool);
+      if (name === 'offer_choices') addChoiceCard(bubble, { question: args.question, options: args.options });
+      if (name === 'show_plan') addPlanCard(bubble, { title: args.title, steps: args.steps });
+    }
+  } else if (message.role === 'tool') {
+    const tool = toolCardIndex.get(message.tool_call_id);
+    if (!tool) return;
+    const { preview, truncated } = previewText(message.content);
+    finishToolCard(tool, { preview, truncated, failed: isFailedToolText(message.content) });
+  }
+}
+
+export function renderStoredMessages(messages, pane) {
+  toolCardIndex.clear();
+  for (const message of messages) renderStored(message, pane);
+}
+
+export const presenceClosed = new Set();
+
+/** Reporta al server qué pestañas están abiertas (proyectos "habilitados"). */
+export function sendPresence() {
+  const closed = [...presenceClosed];
+  presenceClosed.clear();
+  return api('/api/presence', { method: 'POST', body: { sessions: state.tabOrder, closed } }).catch(() => {});
+}
+
+export function persistTabs() {
+  storage.setJson('tamnora-open-tabs', { ids: state.tabOrder, active: state.activeTab });
+  sendPresence();
+}
+
+/**
+ * Dibuja el sidebar desde el ultimo snapshot.
+ *
+ * Antes hacia su propio `GET /api/sessions`: dos caminos de datos que se
+ * contradician. Ahora el unico que habla con el server es `reconcile`.
+ */
+export function renderSessions(sessions) {
+  const list = sessions ?? [];
+  clear(sessionsEl);
+  const groups = new Map();
+  for (const session of list) {
+    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 open = state.expandedGroups.has(key);
+    head.classList.toggle('open', open);
+    const twisty = el('span', 'tw');
+    twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 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 delGroup = el('button', 'group-del');
+    delGroup.type = 'button';
+    delGroup.title = 'eliminar proyecto (borra sus sesiones, no los archivos)';
+    delGroup.setAttribute('aria-label', 'eliminar proyecto');
+    delGroup.appendChild(icon('trash', 13));
+    delGroup.addEventListener('click', (event) => {
+      event.stopPropagation();
+      removeProject(key, items.length);
+    });
+    head.appendChild(delGroup);
+    const list = el('ul', 'group-sessions');
+    list.hidden = !open;
+    head.addEventListener('click', () => {
+      const nowOpen = !state.expandedGroups.has(key);
+      if (nowOpen) state.expandedGroups.add(key);
+      else state.expandedGroups.delete(key);
+      head.classList.toggle('open', nowOpen);
+      list.hidden = !nowOpen;
+      clear(twisty);
+      twisty.appendChild(icon(nowOpen ? 'chevron-down' : 'chevron-right', 14));
+    });
+    for (const session of items) {
+      const li = el('li', `session-item${session.id === state.sessionId ? ' active' : ''}`);
+      const main = el('div', 'session-main');
+      main.appendChild(el('span', 'session-title', session.title || '(sin título)'));
+      const meta = [session.provider, session.model].filter(Boolean).join(' / ');
+      if (meta) main.appendChild(el('span', 'session-sub', meta));
+      li.appendChild(main);
+      // Punto de actividad: el server lo dice en el listado, y el reconciliador
+      // lo mantiene al dia si el run arranca despues de este render. El estado
+      // "esperandote a vos" tiene su propio color: un run trabajando en otra
+      // pestana no necesita tu atencion, un permiso si.
+      const awaiting = session.awaiting || [...state.pendingAsks.values()].filter((ask) => ask.sessionId === session.id).length;
+      if (awaiting) {
+        const dot = el('span', 'session-await');
+        dot.title = `${awaiting} permiso(s) esperando tu decision`;
+        li.appendChild(dot);
+      }
+      if (session.running || state.remoteActive.has(session.id)) {
+        const dot = el('span', 'session-live');
+        dot.title = 'el agente está trabajando en esta sesión';
+        li.appendChild(dot);
+      }
+      li.title = `${session.provider ?? ''}/${session.model ?? ''}${session.cwd ? ` · ${session.cwd}` : ''}`;
+      const del = el('button', 'session-del');
+      del.type = 'button';
+      del.title = 'eliminar sesión';
+      del.setAttribute('aria-label', `eliminar sesión ${session.title || ''}`);
+      del.appendChild(icon('trash', 13));
+      del.addEventListener('click', (event) => {
+        event.stopPropagation();
+        removeSession(session);
+      });
+      li.appendChild(del);
+      li.addEventListener('click', () => {
+  if (isMobile()) setSidebarOpen(false);
+  openTab(session.id);
+});
+      list.appendChild(li);
+    }
+    groupLi.append(head, list);
+    sessionsEl.appendChild(groupLi);
+  }
+  if (!list.length) sessionsEl.appendChild(el('li', 'muted', 'sin sesiones'));
+}
+
+/**
+ * Pedir el estado fresco. Es un alias de `reconcile` que queda para los ~20
+ * call sites que ya existian (despues de mandar un mensaje, borrar, etc.).
+ */
+export function refreshSessions() {
+  reconcile({ immediate: true });
+}
+
+export function closeSessionsOf(cwd) {
+  for (const [id, record] of [...state.panes]) {
+    if ((record.cwd || '') === (cwd || '')) closeTab(id);
+  }
+}
+
+/** confirm + DELETE + notify + refresh: patron repetido en todo el panel. */
+export async function deleteEntity(url, { confirmText, label = 'eliminar', after = null, refresh = null }) {
+  if (!(await showConfirm(confirmText, { title: 'Confirmar', confirmLabel: label, danger: true }))) return;
+  const error = await api(url, { method: 'DELETE' }).then(() => null).catch((e) => e);
+  if (error) return notify(`No se pudo ${label}: ${error.message}`, 'notice err');
+  await after?.();
+  await refresh?.();
+}
+
+/** Import en un input de texto + status + refresh (MCP y skills). */
+export async function importEntity({ url, body, input, statusSel, refresh, okMessage }) {
+  setStatus(statusSel, 'importando…');
+  const data = await api(url, { method: 'POST', body }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus(statusSel, data.error, 'err');
+  input.value = '';
+  setStatus(statusSel, okMessage(data), 'ok');
+  await refresh?.();
+}
+
+/** Cambia el estado enabled de una entidad (PUT de cuerpo completo o POST toggle). */
+export async function toggleEntity(url, { method = 'PUT', body = undefined, errorLabel, refresh }) {
+  await api(url, { method, body }).catch((error) =>
+    notify(`No se pudo ${errorLabel}: ${error.message}`, 'notice err')
+  );
+  await refresh?.();
+}
+
+export async function removeSession(session) {
+  const name = session.title || '(sin título)';
+  await deleteEntity(`/api/sessions/${session.id}`, {
+    confirmText: `¿Eliminar la sesión "${name}"? No se puede deshacer.`,
+    after: () => {
+      if (state.panes.has(session.id)) closeTab(session.id);
+    },
+    refresh: refreshSessions,
+  });
+}
+
+export async function removeProject(cwd, count) {
+  const label = cwd ? basename(cwd) : 'sin carpeta';
+  await deleteEntity(`/api/projects?cwd=${encodeURIComponent(cwd ?? '')}`, {
+    confirmText: `¿Eliminar ${count} sesión(es) del proyecto "${label}"? No se tocan los archivos del disco.`,
+    label: 'eliminar el proyecto',
+    after: () => closeSessionsOf(cwd),
+    refresh: refreshSessions,
+  });
+}
+
+export 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;
+  renderFooterActivity(record?.working ? 'thinking' : null);
+  scheduleScrollNav();
+}
+
+export 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.';
+
+export function createChatTurn(pane, sessionKey) {
+  const turn = {
+    pane,
+    sessionKey,
+    // Turno iniciado desde esta consola: solo los turnos propios hablan (el
+    // replay de una reconexion o de otra pestaña no narran el pasado).
+    live: false,
+    active: null,
+    sawText: false,
+    // Cursor del log del run (`id:` del ultimo frame): reanuda desde aca.
+    cursor: 0,
+    // Si esta consola ya dibujo el mensaje del usuario de este turno.
+    sawUser: false,
+    lastTool: null,
+    startNewOnText: false,
+    agents: new Map(),
+    turnMode: modeSelect.value || 'agent',
+    assistant() {
+      if (!turn.active) {
+        turn.active = addMessage('assistant', '', turn.pane);
+        setMessageMode(turn.active, turn.turnMode);
+      }
+      return turn.active;
+    },
+    flowTarget() {
+      if (turn.startNewOnText) {
+        turn.active = addMessage('assistant', '', turn.pane);
+        setMessageMode(turn.active, turn.turnMode);
+        turn.startNewOnText = false;
+        setActivity(turn.active, 'thinking');
+      }
+      return turn.assistant();
+    },
+  };
+  return turn;
+}
+
+export function addAgentCard(message, data) {
+  const card = el('details', 'agent-card running');
+  const head = el('summary', 'agent-head');
+  const glyph = el('span', 'agent-glyph', '⏺');
+  const title = el('span', 'agent-title', `subagente · ${data.description ?? 'tarea'}`);
+  const status = el('span', 'agent-status', data.mode === 'plan' ? 'solo lectura' : 'agente');
+  head.append(glyph, title, status);
+  const body = el('div', 'agent-body');
+  const reasoning = el('details', 'reasoning');
+  reasoning.appendChild(el('summary', '', 'razonamiento'));
+  const reasoningEl = el('div', 'body');
+  reasoning.appendChild(reasoningEl);
+  reasoning.hidden = true;
+  const textEl = el('div', 'agent-text');
+  const toolsEl = el('div', 'agent-tools');
+  body.append(reasoning, textEl, toolsEl);
+  card.append(head, body);
+  message.tools.appendChild(card);
+  ensureToolsToggle(message);
+  scrollMessages(paneOf(message));
+  const pseudo = { tools: toolsEl, bubble: card, toolsToggle: null };
+  return {
+    card,
+    glyph,
+    statusEl: status,
+    textEl,
+    reasoning,
+    reasoningEl,
+    toolsEl,
+    message: pseudo,
+    lastTool: null,
+    sawText: false,
+  };
+}
+
+export function handleAgentEvent(event, data, turn) {
+  if (!data?.agentId) return false;
+  const agent = turn.agents.get(data.agentId);
+  if (!agent) return false;
+  if (event === 'text') {
+    agent.sawText = true;
+    agent.textEl.innerHTML = renderMarkdown(data.full);
+    scrollMessages(paneOf(agent.message));
+  } else if (event === 'reasoning') {
+    agent.reasoning.hidden = false;
+    if (!agent.sawText) agent.reasoningEl.textContent = data.full;
+  } else if (event === 'tool_call') {
+    agent.lastTool = addToolCard(agent.message, data.name, data.args, { callId: data.id, summary: data.summary });
+  } else if (event === 'tool_result') {
+    finishToolCard(agent.lastTool, data);
+  } else {
+    return false;
+  }
+  return true;
+}
+
+
+/** Cierre del turno: siempre deja un resumen visible (rondas, tools, tiempo). */
+export function renderCompletion(message, data) {
+  const tools = Number(data.toolCalls) || 0;
+  const parts = [`${data.rounds ?? '?'} ronda${data.rounds === 1 ? '' : 's'}`];
+  if (tools) parts.push(`${tools} herramienta${tools === 1 ? '' : 's'}`);
+  const duration = formatDuration(data.durationMs);
+  if (duration) parts.push(duration);
+  if (data.tokens?.total_tokens) parts.push(`${Number(data.tokens.total_tokens).toLocaleString('es')} tokens`);
+  const cut = ['max_rounds', 'no_progress', 'budget'].includes(data.stopReason);
+  const label = cut ? (data.wrappedUp ? '⚠ corte de seguridad · resumen' : '⚠ corte de seguridad') : '✓ terminado';
+  message.tools.appendChild(el('div', cut ? 'chip warn' : 'chip ok', `${label} · ${parts.join(' · ')}`));
+  scrollMessages(paneOf(message));
+}
+
+/** Retoma un turno cortado por límite/bucle sin tener que escribir "continúa". */
+export function addContinueButton(turn, data) {
+  const btn = el('button', 'continue-btn', data.wrappedUp ? '↻ Continuar el trabajo' : '↻ Continuar');
+  btn.type = 'button';
+  btn.addEventListener('click', () => {
+    if (state.panes.get(turn.sessionKey)?.working) return;
+    chatInput.value = 'Continuá donde quedaste.';
+    sendMessage();
+  });
+  turn.assistant().tools.appendChild(btn);
+  scrollMessages(paneOf(turn.assistant()));
+}
+
+export function handleChatEvent(event, data, turn) {
+  if (handleAgentEvent(event, data, turn)) return;
+  narrar(event, data, turn);
+  if (event === 'advice') {
+    addAdvisorCard(turn.pane, { text: data?.text, kind: data?.kind });
+    scrollMessages(turn.pane);
+    return;
+  }
+  if (event === 'agent_start') {
+    turn.agents.set(data.agentId, addAgentCard(turn.assistant(), data));
+  } else if (event === 'agent_end') {
+    const agent = turn.agents.get(data.agentId);
+    if (agent) {
+      agent.card.classList.remove('running');
+      agent.card.classList.add(data.status === 'error' ? 'failed' : 'done');
+      agent.glyph.textContent = data.status === 'error' ? '✗' : '✓';
+      agent.statusEl.textContent = data.status;
+      if (data.content && !agent.sawText) agent.textEl.textContent = data.content;
+    }
+  } else if (event === 'start') {
+    if (data.cwd) setCwd(data.cwd);
+    if (data.mode) turn.turnMode = data.mode;
+    if (turn.active) setMessageMode(turn.active, turn.turnMode);
+  } else if (event === 'user') {
+    // Otro cliente (el celular, Telegram) mando esto: hay que dibujarlo, pero
+    // sin duplicar lo que esta consola ya renderizo o lo que vino de SQLite.
+    const content = String(data?.content ?? '');
+    if (turn.sawUser || !content) return;
+    if (lastMessageMatches(turn.pane, 'user', content)) {
+      turn.sawUser = true;
+      return;
+    }
+    addMessage('user', content, turn.pane);
+    turn.sawUser = true;
+  } else if (event === 'text') {
+    turn.sawText = true;
+    const target = turn.flowTarget();
+    setText(target, data.full);
+    setActivity(target, 'thinking');
+  } else if (event === 'reasoning') {
+    const target = turn.flowTarget();
+    if (!turn.sawText) ensureReasoning(target).textContent = data.full;
+    setActivity(target, 'thinking');
+  } else if (event === 'tools') {
+    turn.startNewOnText = true;
+  } else if (event === 'tool_call') {
+    const target = turn.assistant();
+    setActivity(target, 'working');
+    turn.lastTool = addToolCard(target, data.name, data.args, { callId: data.id, summary: data.summary });
+    if (turn.live && data.name === 'speak') {
+      const texto = String(data.args?.texto ?? '').trim();
+      if (texto) reproducirVoz(texto, { voice: data.args?.voice, rate: data.args?.rate, pitch: data.args?.pitch, label: 'voz' }).catch(() => {});
+    }
+    if (turn.live && data.name === 'preview_url' && data.args?.url) {
+      setExplorerMode('preview');
+      // Desde otro dispositivo, 127.0.0.1 apunta al dispositivo: si el agente
+      // pidio una URL local, la publicamos por tailscale/tunel.
+      const port = isLocalHost() ? 0 : localPortOf(data.args.url);
+      if (port) openRemoteTunnel(port);
+      else loadPreview(data.args.url);
+    }
+    if (turn.live && data.name === 'offer_choices') {
+      addChoiceCard(target, { question: data.args?.question, options: data.args?.options });
+    }
+    if (turn.live && data.name === 'show_plan') {
+      addPlanCard(target, { title: data.args?.title, steps: data.args?.steps });
+    }
+  } else if (event === 'tool_result') {
+    setActivity(turn.assistant(), 'thinking');
+    finishToolCard(turn.lastTool, data);
+  } else if (event === 'question') {
+    if (!liveQuestion(data.askId)) addQuestionCard(turn.assistant(), data);
+    state.pendingQuestions.set(data.askId, { sessionId: data.sessionId ?? turn.sessionKey });
+    renderAlertSignals();
+    if (paneOf(turn.active) !== activePane) toast('Formulario pendiente en otra pestaña.');
+  } else if (event === 'question_answered') {
+    state.pendingQuestions.delete(data?.askId);
+    renderAlertSignals();
+    const entry = state.questionCards.get(data.askId);
+    if (entry && !entry.card.classList.contains('answered')) {
+      entry.card.classList.add('answered');
+      entry.status.textContent = data?.cancelled ? 'cancelado' : 'respondido en otra ventana';
+      for (const { input } of entry.fields) input.disabled = true;
+    }
+  } else if (event === 'permission') {
+    // Si la tarjeta ya esta en el DOM (la creo `renderPane` antes del replay, o
+    // llego por el canal global) no hay que crear OTRO mensaje del asistente
+    // vacio para colgarla.
+    const existing = livePermission(data.askId);
+    const target = existing ? existing.message : turn.assistant();
+    if (!existing) addPermissionCard(target, data);
+    state.pendingAsks.set(data.askId, {
+      sessionId: data.sessionId ?? turn.sessionKey,
+      name: data.name ?? '',
+      args: data.args ?? {},
+    });
+    renderAlertSignals();
+    // La tarjeta vive solo en el chat de esta sesion. Si el permiso cae en otra
+    // pestaña, sin este aviso la tarjeta queda enterrada y el run bloqueado
+    // esperando una decision que nadie ve.
+    if (paneOf(turn.active) !== activePane) {
+      toast(`Permiso pendiente: ${data.name} en otra pestaña.`);
+    }
+  } else if (event === 'permission_resolved') {
+    setActivity(turn.assistant(), 'thinking');
+    state.pendingAsks.delete(data?.askId);
+    renderAlertSignals();
+    const entry = state.permissionCards.get(data.askId);
+    // Solo entra aca si el veredicto sigue pendiente, o sea que **otra** ventana
+    // (la PC, otro celular, Telegram) lo resolvio: decirlo evita que el celular
+    // muestre "aprobado" como si hubiera sido su decision.
+    if (entry && entry.verdict.textContent === 'requiere aprobación') {
+      resolvePermissionCard(entry, data.allow);
+      if (paneOf(turn.assistant()) === activePane) {
+        toast(`Permiso ${data.allow ? 'aprobado' : 'denegado'} desde otra ventana.`);
+      }
+    }
+  } else if (event === 'stall') {
+    if (!turn.sawText) setText(turn.assistant(), `⚠ ${data.seconds} s sin respuesta del modelo (proveedor caído o muy lento). Sigo esperando...`);
+  } else if (event === 'retry') {
+    if (!turn.sawText) setText(turn.assistant(), `↻ reintentando (${data.attempt}) en ${Math.round((data.delayMs || 0) / 1000)} s...`);
+  } else if (event === 'trim') {
+    turn.assistant().tools.appendChild(el('div', 'chip', `✂ contexto recortado (${data.trimmed} resultados, ${data.dropped} mensajes)`));
+  } else if (event === 'repeat') {
+    turn.assistant().tools.appendChild(el('div', 'chip warn', `↻ ${data.name} repetida sin cambios`));
+  } else if (event === 'usage') {
+    setContextUsage(data.tokens);
+  } else if (event === 'warning') {
+    turn.assistant().tools.appendChild(el('div', 'chip', `⚠ ${data.message}`));
+  } else if (event === 'error') {
+    setActivity(turn.active, null);
+    turn.assistant().tools.appendChild(el('div', 'chip err', `✗ ${data.message}`));
+  } else if (event === 'done') {
+    setActivity(turn.active, null);
+    const finalText = (turn.active?.textEl?.textContent ?? '').trim();
+    const tools = Number(data.toolCalls) || 0;
+    if (!finalText) {
+      if (data.stopReason === 'no_progress') {
+        setText(turn.assistant(), '⚠ El agente se quedó repitiendo las mismas herramientas sin avanzar.');
+      } else if (data.stopReason === 'budget') {
+        setText(turn.assistant(), '⚠ El agente alcanzó el presupuesto de tokens/tiempo sin respuesta final.');
+      } else if (data.stopReason === 'max_rounds') {
+        setText(
+          turn.assistant(),
+          `⚠ El agente alcanzó el máximo de rondas (${data.rounds ?? '?'}) sin dejar una respuesta final.${
+            tools ? ` Hizo ${tools} llamadas a herramientas.` : ''
+          }`
+        );
+      } else if (tools) {
+        setText(turn.assistant(), '✓ El agente terminó sus herramientas, pero no devolvió un mensaje final.');
+      } else {
+        setText(turn.assistant(), '(sin texto)');
+      }
+    }
+    renderCompletion(turn.active, data);
+    if (data.continuable) addContinueButton(turn, data);
+    updateStatus({ rounds: data.rounds, stopReason: data.stopReason });
+    addTokens(data.tokens);
+  } else if (event === 'aborted') {
+    setActivity(turn.active, null);
+    setText(turn.assistant(), '⏹ cancelado.');
+  } else if (event === 'resumed') {
+    // Reconexion al stream de la sesion: el server dice hasta donde replayo.
+    turn.cursor = Number(data.cursor) || turn.cursor;
+    if (data.active === false) closeTurn(turn, 'El turno ya había terminado.');
+  } else if (event === 'idle') {
+    // El server cerro el stream porque no hay nada corriendo.
+    closeTurn(turn, '');
+  }
+}
+
+/**
+ * Cierra un turno cuyo stream se agoto sin `done`: deja el mensaje en un estado
+ * coherente en vez de colgado en "pensando...".
+ */
+export function closeTurn(turn, text) {
+  setActivity(turn.active, null);
+  const message = turn.assistant();
+  if (!text) return;
+  if ((message.textEl?.textContent ?? '').trim()) return;
+  setText(message, text);
+}
+
+/**
+ * El mensaje del usuario se emite antes de persistirse (routes/chat.js), asi que
+ * un cliente que se engancha a mitad de run no lo tiene todavia. Y al reconectar
+ * el mismo evento se vuelve a reproducir, cuando `renderPane` ya lo dibujo desde
+ * SQLite: por eso la doble guarda.
+ */
+export function lastMessageMatches(pane, role, text) {
+  const nodes = pane.querySelectorAll(':scope > .msg');
+  const last = nodes[nodes.length - 1];
+  if (!last || !last.classList.contains(role)) return false;
+  return last.textContent.trim() === String(text ?? '').trim();
+}
+
+/**
+ * Dueña de un run: mantiene el stream vivo hasta que el turno termina.
+ *
+ * Un corte del tunel (4G, pantalla bloqueada, proxy) deja el `fetch` colgado
+ * sin error, asi que reconectamos con backoff desde el ultimo cursor en vez de
+ * dejar la UI en "pensando..." para siempre. El server honra `?from=`, asi que
+ * reanudar no duplica eventos.
+ *
+ * `rerender` solo aplica al primer intento: al reconectar NO hay que volver a
+ * pintar el pane, porque borraria el mensaje del asistente en vuelo y sus
+ * tarjetas de tools.
+ */
+export async function followRunSession(sessionKey, turn, { from = 0, rerender = false, attempts = 6 } = {}) {
+  const record = state.panes.get(sessionKey);
+  const controller = new AbortController();
+  controllers.set(sessionKey, controller);
+  if (record) setWorking(sessionKey, true);
+  let needsRerender = rerender;
+  let chip = null;
+
+  try {
+    await followRun({
+      attempts,
+      from,
+      signal: controller.signal,
+      open: async (cursor) => {
+        if (needsRerender) {
+          needsRerender = false;
+          await renderPane(sessionKey);
+        }
+        await openStream(
+          `/api/sessions/${sessionKey}/stream?from=${cursor}`,
+          { signal: controller.signal },
+          (event, data, id) => {
+            if (id !== null) turn.cursor = Number(id) || turn.cursor;
+            handleChatEvent(event, data, turn);
+          }
+        );
+        return { finished: true, cursor: turn.cursor };
+      },
+      onRetry: ({ attempt, delay }) => {
+        setActivity(turn.active, 'reconnecting');
+        if (!chip) {
+          chip = el('div', 'chip warn', '⟳ reconectando…');
+          turn.assistant().tools.appendChild(chip);
+        }
+        chip.textContent = `⟳ reconectando (intento ${attempt}, en ${Math.round(delay / 1000)} s)…`;
+      },
+    });
+  } catch (error) {
+    // Un error del handler (no del transporte) no reintenta: es un bug de la
+    // consola y dejarlo pasar deja un "reconectando" que no dice nada.
+    if (error?.eventHandler) {
+      setActivity(turn.active, null);
+      toast(`Error de la consola al procesar el stream: ${error.message}`);
+    }
+    throw error;
+  } finally {
+    controllers.delete(sessionKey);
+    if (chip) chip.remove();
+    if (state.panes.get(sessionKey) === record) setWorking(sessionKey, false);
+    setActivity(turn.active, null);
+    renderAlertSignals();
+    reconcile({ immediate: true });
+  }
+}
+
+/**
+ * Se engancha a un run en curso: re-renderiza el historial persistido y
+ * reproduce los eventos del turno actual (asi el progreso no se pierde si el
+ * telefono bloqueo la pantalla o se corto la red).
+ */
+export async function attachRun(sessionKey, pane) {
+  const record = state.panes.get(sessionKey);
+  if (record?.working) return;
+  // `reconcile` puede pedirlo dos veces seguidas (sweep + canal global).
+  if (controllers.has(sessionKey)) return;
+  const turn = createChatTurn(pane, sessionKey);
+  await followRunSession(sessionKey, turn, { from: 0, rerender: true });
+}
+
+export function contextTokensForRequest() {
+  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
+  return context ? Math.floor(context * 0.8) : undefined;
+}
+
+export async function startTurn(sessionKey, pane, input, images, opts = {}) {
+  const user = addMessage('user', input || `(${images.length} imagen${images.length > 1 ? 'es' : ''})`, pane);
+  appendImages(user, images);
+  const turn = createChatTurn(pane, sessionKey);
+  // Lo dibujamos nosotros, asi que el evento `user` del server no lo repite.
+  turn.sawUser = true;
+  turn.live = true;
+  turn.active = addMessage('assistant', '', pane);
+  setMessageMode(turn.active, turn.turnMode);
+  const controller = new AbortController();
+  controllers.set(sessionKey, controller);
+  setWorking(sessionKey, true);
+
+  // El tipo de agente lo manda la sesion (no los controles globales): asi dos
+  // pestañas con modelos distintos no se pisan.
+  const owner = state.panes.get(sessionKey);
+  try {
+    await streamPost(
+      '/api/chat',
+      {
+        input: input || '(imagen adjunta)',
+        images: images.length ? images : undefined,
+        sessionId: sessionKey,
+        provider: owner?.provider || providerSelect.value || undefined,
+        model: owner?.model || modelSelect.value || undefined,
+        mode: owner?.mode || modeSelect.value || undefined,
+        yes: yesInput.checked ? true : undefined,
+        contextTokens: contextTokensForRequest(),
+        interrupt: opts.interrupt ? true : undefined,
+      },
+      (event, data, id) => {
+        if (id !== null) turn.cursor = Number(id) || turn.cursor;
+        handleChatEvent(event, data, turn);
+      },
+      controller.signal
+    );
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      setActivity(turn.active, null);
+      setText(turn.assistant(), '⏹ cancelado.');
+    } else if (error.status === 409) {
+      // Otro cliente (celular, Telegram) tiene el turno: este mensaje no se
+      // guardo, asi que sacamos lo que se dibujo y va a la cola visible.
+      const bubble = turn.active;
+      turn.active = null;
+      user.wrap.remove();
+      bubble?.wrap.remove();
+      enqueueMessage(sessionKey, input, images);
+      toast('La sesión ya tiene una respuesta en curso; tu mensaje quedó en la cola.');
+    } else {
+      // El POST se cayo pero el run puede seguir vivo: seguimos el turno con el
+      // mismo `turn` para no perder las tools ya dibujadas.
+      setActivity(turn.active, 'reconnecting');
+      await followRunSession(sessionKey, turn, { from: turn.cursor, rerender: false });
+    }
+  } finally {
+    if (controllers.get(sessionKey) === controller) controllers.delete(sessionKey);
+    setActivity(turn.active, null);
+    setWorking(sessionKey, false);
+    renderAlertSignals();
+    drainQueue(sessionKey);
+  }
+}
+
+/* --- cola de mensajes (enviar mientras el agente trabaja) ----------------- */
+
+export function queueFor(sessionKey, create = false) {
+  if (!state.queues.has(sessionKey)) {
+    if (!create) return [];
+    state.queues.set(sessionKey, []);
+  }
+  return state.queues.get(sessionKey);
+}
+
+export function enqueueMessage(sessionKey, input, images) {
+  queueFor(sessionKey, true).push({ id: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, input, images });
+  renderQueue(sessionKey);
+}
+
+export function renderQueue(sessionKey = state.sessionId) {
+  const queueEl = $('#chat-queue');
+  if (!queueEl || sessionKey !== state.sessionId) return;
+  clear(queueEl);
+  const items = queueFor(sessionKey);
+  queueEl.hidden = !items.length;
+  if (!items.length) return;
+  queueEl.appendChild(el('div', 'queue-label', `en cola (${items.length})`));
+  for (const item of items) {
+    const row = el('div', 'queue-item');
+    const text = item.input || `(${item.images.length} imagen${item.images.length > 1 ? 'es' : ''})`;
+    row.append(el('span', 'queue-text', text));
+    row.appendChild(
+      button('✕', () => {
+        const list = queueFor(sessionKey);
+        const index = list.findIndex((entry) => entry.id === item.id);
+        if (index >= 0) list.splice(index, 1);
+        renderQueue(sessionKey);
+      }, 'queue-remove')
+    );
+    queueEl.appendChild(row);
+  }
+}
+
+export function drainQueue(sessionKey) {
+  const record = state.panes.get(sessionKey);
+  if (!record || record.working) return;
+  // Mientras se interrumpe, el mensaje que manda el usuario lo arranca
+  // `interruptAndSend`, no la cola.
+  if (interrupting.has(sessionKey)) return;
+  const list = queueFor(sessionKey);
+  if (!list.length) return;
+  const next = list.shift();
+  renderQueue(sessionKey);
+  startTurn(sessionKey, record.el, next.input, next.images);
+}
+
+/* --- shell directo con "!" ------------------------------------------------ */
+
+export async function runShell(command) {
+  const record = state.panes.get(state.sessionId);
+  const pane = activePane ?? record?.el;
+  if (!pane) return;
+  addMessage('user', `! ${command}`, pane);
+  const message = addMessage('assistant', '', pane);
+  message.textEl.appendChild(el('pre', 'shell-out', 'ejecutando…'));
+  const data = await api('/api/shell', {
+    method: 'POST',
+    body: { command, cwd: record?.cwd || state.cwd || undefined },
+  }).catch((error) => ({ error: error.message }));
+  if (data?.error) {
+    message.textEl.textContent = '';
+    message.textEl.classList.add('notice', 'err');
+    message.textEl.textContent = data.error;
+    return;
+  }
+  message.textEl.textContent = '';
+  const pre = el('pre', 'shell-out');
+  pre.textContent = (data.output || '').trim() || '(sin salida)';
+  message.textEl.appendChild(pre);
+  scheduleScrollNav();
+}
+
+export async function sendMessage() {
+  const current = state.panes.get(state.sessionId);
+  hideSlashMenu();
+  let input = chatInput.value.trim();
+  const images = state.attachments.slice();
+
+  // "!" ejecuta un comando de shell directo, sin pasar por el modelo.
+  if (input.startsWith('!')) {
+    const command = input.slice(1).trim();
+    chatInput.value = '';
+    state.attachments = [];
+    renderAttachments();
+    if (command) runShell(command);
+    return;
+  }
+
+  if (input.startsWith('/') && !images.length) {
+    const name = input.slice(1).split(/\s+/)[0].toLowerCase();
+    const arg = input.slice(1 + name.length).trim();
+    // Limpiamos el input de una: hay comandos lentos (compactar, resumir) y no
+    // queremos dejar el comando escrito mientras corren.
+    chatInput.value = '';
+    onChatInputChanged();
+    const outcome = await runCommand(name, arg);
+    if (!outcome || outcome.handled) return;
+    input = outcome.input ?? input;
+  }
+  if (!input && !images.length) return;
+  if (!state.sessionId) {
+    state.pendingInput = input;
+    openFolderPicker();
+    return;
+  }
+
+  // Si el agente está trabajando, el mensaje queda en cola y se envía solo.
+  // Para cortarlo y mandar el mensaje ya, está el botón/atajo de interrumpir.
+  if (current?.working) {
+    enqueueMessage(state.sessionId, input, images);
+    chatInput.value = '';
+    state.attachments = [];
+    renderAttachments();
+    syncInterruptBtn();
+    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;
+  }
+
+  chatInput.value = '';
+  state.attachments = [];
+  renderAttachments();
+  await startTurn(state.sessionId, activePane, input, images);
+}
+
+/**
+ * Interrumpe el turno en curso y manda `input`/`images` ya mismo.
+ *
+ * Marcamos la sesion en `interrupting` para que el `finally` del turno viejo no
+ * dispare la cola (lo arrancamos nosotros). Esperamos a que el turno anterior se
+ * desenrolle antes de empezar el nuevo; el server, por su lado, cancela el run y
+ * espera a que termine antes de aceptar el POST con `interrupt: true`.
+ */
+export async function interruptAndSend(sessionKey, input, images) {
+  const record = state.panes.get(sessionKey);
+  if (!record) return;
+  interrupting.add(sessionKey);
+  controllers.get(sessionKey)?.abort();
+  await whenIdle(sessionKey);
+  const promise = startTurn(sessionKey, record.el, input, images, { interrupt: true });
+  // startTurn ya arranco (working=true y controller nuevo); soltamos el guardia
+  // para que SU finally pueda drenar la cola.
+  interrupting.delete(sessionKey);
+  await promise;
+}
+
+export function sendInterrupt() {
+  const record = state.panes.get(state.sessionId);
+  if (!record?.working) return;
+  const input = chatInput.value.trim();
+  // Los comandos (`/…`, `!…`) se resuelven por su camino normal, no interrumpen.
+  if (input.startsWith('/') || input.startsWith('!')) return sendMessage();
+  const images = state.attachments.slice();
+  if (!input && !images.length) return;
+  chatInput.value = '';
+  state.attachments = [];
+  renderAttachments();
+  syncInterruptBtn();
+  interruptAndSend(state.sessionId, input, images);
+}
+
+/* --- image attachments ---------------------------------------------------- */
+
+export const attachInput = $('#image-input');
+export const attachPreview = $('#attach-preview');
+
+export 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);
+  });
+}
+
+export 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);
+  });
+}
+
+export 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;
+  });
+}
+
+export 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();
+}
+