@danieltmn/tamnora 0.21.1 → 0.22.0

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

@@ -0,0 +1,1893 @@
+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();
+}
+