@danieltmn/tamnora 0.5.1 → 0.6.1

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

@@ -102,13 +102,14 @@ async function api(path, { method = 'GET', body } = {}) {
   return res.json();
 }
 
-async function streamPost(url, body, onEvent, signal) {
-  const headers = { 'Content-Type': 'application/json' };
-  if (csrfToken) headers['x-csrf'] = csrfToken;
+async function streamSse(url, { method = 'GET', body, signal } = {}, onEvent) {
+  const headers = {};
+  if (body) headers['Content-Type'] = 'application/json';
+  if (method !== 'GET' && csrfToken) headers['x-csrf'] = csrfToken;
   const res = await fetch(url, {
-    method: 'POST',
+    method,
     headers,
-    body: JSON.stringify(body),
+    body: body ? JSON.stringify(body) : undefined,
     signal,
   });
   if (!res.ok) {
@@ -133,9 +134,11 @@ async function streamPost(url, body, onEvent, signal) {
       buffer = buffer.slice(index + 2);
       let event = 'message';
       let data = '';
+      let id = null;
       for (const line of frame.split('\n')) {
         if (line.startsWith('event:')) event = line.slice(6).trim();
         else if (line.startsWith('data:')) data += line.slice(5).trim();
+        else if (line.startsWith('id:')) id = line.slice(3).trim();
       }
       let parsed = {};
       if (data) {
@@ -145,11 +148,13 @@ async function streamPost(url, body, onEvent, signal) {
           parsed = { raw: data };
         }
       }
-      onEvent(event, parsed);
+      onEvent(event, parsed, id);
     }
   }
 }
 
+const streamPost = (url, body, onEvent, signal) => streamSse(url, { method: 'POST', body, signal }, onEvent);
+
 /* --- tabs ---------------------------------------------------------------- */
 
 const moreTab = $('#more-tab');
@@ -173,7 +178,7 @@ function activateTab(name) {
   hideMoreMenu();
   if (name === 'runs') refreshRuns();
   if (name === 'providers') refreshProviders();
-  if (name === 'ajustes') { refreshMcp(); refreshSkills(); }
+  if (name === 'ajustes') { refreshMcp(); refreshSkills(); refreshChannels(); }
 }
 
 document.querySelectorAll('.tab[data-tab]').forEach((t) =>
@@ -760,14 +765,21 @@ function copyMessage(message) {
   if (write?.catch) write.catch(() => {});
 }
 
-async function reloadPane(id) {
+async function renderPane(id) {
   const record = state.panes.get(id);
-  if (!record) return;
+  if (!record) return null;
   const detail = await api(`/api/sessions/${id}`).catch(() => null);
-  if (!detail) return;
+  if (!detail) return null;
   record.el.replaceChildren();
-  for (const stored of detail.messages) renderStored(stored, record.el);
+  renderStoredMessages(detail.messages, record.el);
   if (!detail.messages.length) record.el.appendChild(el('div', 'empty', 'Sesión vacía.'));
+  return detail;
+}
+
+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);
 }
 
 async function regenerate(message) {
@@ -887,19 +899,165 @@ function renderToolOut(node, text) {
   }
 }
 
-function addToolCard(message, name, args) {
-  const card = el('div', 'tool-card running');
-  const head = el('div', 'tool-head');
-  head.append(
-    el('span', 'tool-glyph', '⏺'),
-    el('span', 'tool-name', name),
-    el('span', 'tool-args', truncate(args, 200))
-  );
+const READ_ONLY_TOOLS = new Set([
+  'read',
+  'list',
+  'glob',
+  'grep',
+  'fetch_url',
+  'git_status',
+  'git_diff',
+  'git_log',
+  'task',
+  'spawn_agent',
+]);
+const toolCardIndex = new Map();
+
+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);
+}
+
+function shortText(value, max = 80) {
+  const raw = String(value ?? '').replace(/\s+/g, ' ').trim();
+  return raw.length > max ? `${raw.slice(0, max - 1)}…` : raw;
+}
+
+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 '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 '';
+  }
+}
+
+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 {};
+  }
+}
+
+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 };
+}
+
+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`;
+}
+
+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';
+  }
+}
+
+function addToolCard(message, name, args, { callId = null, open = null, round = 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', toolSummary(name, args));
+  head.append(glyph, el('span', 'tool-name', name), argsEl);
   const out = el('div', 'tool-out');
-  card.append(head, out);
+  const more = button('ver completo', () => loadFullToolResult(entry, message), 'tool-more');
+  more.hidden = true;
+  card.append(head, out, more);
   message.tools.appendChild(card);
+  ensureToolsToggle(message);
   scrollMessages(paneOf(message));
-  return { card, out };
+
+  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;
 }
 
 function addPermissionCard(message, data) {
@@ -957,6 +1115,7 @@ function userImages(content) {
 }
 
 function renderStored(message, pane) {
+  if (message.agent_id) return;
   if (message.role === 'user') {
     const bubble = addMessage('user', userText(message.content), pane);
     if (message.id) {
@@ -972,16 +1131,31 @@ function renderStored(message, pane) {
       bubble.wrap.dataset.messageId = message.id;
     }
     for (const call of message.tool_calls ?? []) {
-      const tool = addToolCard(
-        bubble,
-        call.function?.name ?? call.name,
-        call.function?.arguments ?? call.arguments ?? ''
-      );
+      const name = call.function?.name ?? call.name;
+      const tool = addToolCard(bubble, name, parseToolArgs(call), { callId: call.id, open: false });
       tool.card.classList.remove('running');
       tool.card.classList.add('done');
-      tool.card.querySelector('.tool-glyph').textContent = '✓';
+      tool.glyph.textContent = '✓';
+      if (call.id) toolCardIndex.set(call.id, tool);
     }
-  }
+  } else if (message.role === 'tool') {
+    const tool = toolCardIndex.get(message.tool_call_id);
+    if (!tool) return;
+    const failed = /^Error|^Permiso denegado/i.test(String(message.content));
+    const { preview, truncated } = previewText(message.content);
+    renderToolOut(tool.out, preview);
+    tool.card.classList.remove('running');
+    tool.card.classList.toggle('failed', failed);
+    if (!failed) tool.card.classList.add('done');
+    tool.glyph.textContent = failed ? '✗' : '✓';
+    tool.truncated = truncated;
+    if (truncated) tool.more.hidden = false;
+  }
+}
+
+function renderStoredMessages(messages, pane) {
+  toolCardIndex.clear();
+  for (const message of messages) renderStored(message, pane);
 }
 
 function basename(p) {
@@ -1097,7 +1271,7 @@ async function removeProject(cwd, count) {
 
 /* --- session tabs --------------------------------------------------------- */
 
-function registerSession(session, messages = [], tokens = { in: 0, out: 0 }) {
+function registerSession(session, messages = [], tokens = { in: 0, out: 0 }, running = false) {
   const id = session.id;
   if (state.panes.has(id)) return state.panes.get(id);
   const pane = document.createElement('div');
@@ -1115,10 +1289,11 @@ function registerSession(session, messages = [], tokens = { in: 0, out: 0 }) {
   };
   state.panes.set(id, record);
   state.tabOrder.push(id);
-  for (const message of messages) renderStored(message, pane);
+  renderStoredMessages(messages, pane);
   if (!messages.length) {
     pane.appendChild(el('div', 'empty', `Sesión vacía${session.cwd ? ` en ${basename(session.cwd)}` : ''}.`));
   }
+  if (running) attachRun(id, pane);
   return record;
 }
 
@@ -1163,7 +1338,7 @@ async function openTab(id) {
     return null;
   });
   if (!data) return;
-  registerSession(data.session, data.messages, data.tokens);
+  registerSession(data.session, data.messages, data.tokens, data.running);
   activateSession(id);
 }
 
@@ -1244,7 +1419,7 @@ async function restoreTabs() {
   for (const id of ids) {
     if (state.panes.has(id)) continue;
     const data = await api(`/api/sessions/${id}`).catch(() => null);
-    if (data) registerSession(data.session, data.messages, data.tokens);
+    if (data) registerSession(data.session, data.messages, data.tokens, data.running);
   }
   const active = saved?.active && state.panes.has(saved.active) ? saved.active : state.tabOrder[state.tabOrder.length - 1];
   if (active) activateSession(active);
@@ -1259,6 +1434,248 @@ $('#new-session').addEventListener('click', () => {
 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.';
 
+function createChatTurn(pane, sessionKey) {
+  const turn = {
+    pane,
+    sessionKey,
+    active: null,
+    sawText: 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;
+}
+
+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,
+  };
+}
+
+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 });
+  } else if (event === 'tool_result') {
+    if (agent.lastTool) {
+      const failed = data.failed ?? /^Error|^Permiso denegado/i.test(String(data.preview ?? data.result));
+      renderToolOut(agent.lastTool.out, data.preview ?? data.result);
+      agent.lastTool.card.classList.remove('running');
+      agent.lastTool.card.classList.toggle('failed', failed);
+      if (!failed) agent.lastTool.card.classList.add('done');
+      agent.lastTool.glyph.textContent = failed ? '✗' : '✓';
+      if (data.truncated) {
+        agent.lastTool.truncated = true;
+        agent.lastTool.more.hidden = false;
+      }
+    }
+  } else {
+    return false;
+  }
+  return true;
+}
+
+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). */
+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 maxed = data.stopReason === 'max_rounds';
+  message.tools.appendChild(el('div', maxed ? 'chip warn' : 'chip ok', `${maxed ? '⚠ máximo de rondas' : '✓ terminado'} · ${parts.join(' · ')}`));
+  scrollMessages(paneOf(message));
+}
+
+function handleChatEvent(event, data, turn) {
+  if (handleAgentEvent(event, data, turn)) 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 === '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 });
+  } else if (event === 'tool_result') {
+    setActivity(turn.assistant(), 'thinking');
+    if (turn.lastTool) {
+      const failed = data.failed ?? /^Error|^Permiso denegado/i.test(String(data.preview ?? data.result));
+      renderToolOut(turn.lastTool.out, data.preview ?? data.result);
+      turn.lastTool.card.classList.remove('running');
+      turn.lastTool.card.classList.toggle('failed', failed);
+      if (!failed) turn.lastTool.card.classList.add('done');
+      turn.lastTool.glyph.textContent = failed ? '✗' : '✓';
+      if (data.truncated) {
+        turn.lastTool.truncated = true;
+        turn.lastTool.more.hidden = false;
+      }
+    }
+  } else if (event === 'permission') {
+    setActivity(turn.assistant(), 'waiting');
+    addPermissionCard(turn.assistant(), data);
+  } else if (event === 'permission_resolved') {
+    setActivity(turn.assistant(), 'thinking');
+    const entry = state.permissionCards.get(data.askId);
+    if (entry && entry.verdict.textContent === 'requiere aprobación') {
+      entry.card.classList.add('collapsed', data.allow ? 'approved' : 'denied');
+      entry.card.classList.remove('pending');
+      entry.card.querySelector('.perm-icon').textContent = data.allow ? '✓' : '✗';
+      entry.verdict.textContent = data.allow ? 'aprobado' : 'denegado (sin respuesta)';
+      for (const btn of Object.values(entry.buttons)) btn.disabled = true;
+    }
+  } else if (event === 'stall') {
+    if (!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 === '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 === '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.` : ''
+          } Pedile que continúe o subí \`maxRounds\`.`
+        );
+      } 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);
+    updateStatus({ rounds: data.rounds, stopReason: data.stopReason });
+    addTokens(data.tokens);
+  } else if (event === 'aborted') {
+    setActivity(turn.active, null);
+    setText(turn.assistant(), '⏹ cancelado.');
+  }
+}
+
+/**
+ * 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).
+ */
+async function attachRun(sessionKey, pane) {
+  const record = state.panes.get(sessionKey);
+  if (record?.working) return;
+  await renderPane(sessionKey);
+  const controller = new AbortController();
+  controllers.set(sessionKey, controller);
+  if (record) setWorking(sessionKey, true);
+  const turn = createChatTurn(pane, sessionKey);
+  try {
+    await streamSse(
+      `/api/sessions/${sessionKey}/stream?from=0`,
+      { signal: controller.signal },
+      (event, data) => handleChatEvent(event, data, turn)
+    );
+  } catch {
+    // si falla la reconexion, el historial persistido queda visible
+  } finally {
+    controllers.delete(sessionKey);
+    if (state.panes.get(sessionKey) === record) setWorking(sessionKey, false);
+    setActivity(turn.active, null);
+    refreshSessions();
+  }
+}
+
 async function sendMessage() {
   const current = state.panes.get(state.sessionId);
   if (current?.working) return;
@@ -1297,24 +1714,13 @@ async function sendMessage() {
   chatInput.value = '';
   state.attachments = [];
   renderAttachments();
-  let active = addMessage('assistant', '', pane);
+
+  const turn = createChatTurn(pane, sessionKey);
+  turn.active = addMessage('assistant', '', pane);
+  setMessageMode(turn.active, turn.turnMode);
   const controller = new AbortController();
   controllers.set(sessionKey, controller);
   setWorking(sessionKey, true);
-  let sawText = false;
-  let lastTool = null;
-  let startNewOnText = false;
-  let turnMode = modeSelect.value || 'agent';
-
-  const flowTarget = () => {
-    if (startNewOnText) {
-      active = addMessage('assistant', '', pane);
-      setMessageMode(active, turnMode);
-      startNewOnText = false;
-      setActivity(active, 'thinking');
-    }
-    return active;
-  };
 
   try {
     await streamPost(
@@ -1332,74 +1738,27 @@ async function sendMessage() {
           return context ? Math.floor(context * 0.8) : undefined;
         })(),
       },
-      (event, data) => {
-        if (event === 'start') {
-          if (data.cwd) setCwd(data.cwd);
-          if (data.mode) turnMode = data.mode;
-          setMessageMode(active, turnMode);
-        } else if (event === 'text') {
-          sawText = true;
-          const target = flowTarget();
-          setText(target, data.full);
-          setActivity(target, 'thinking');
-        } else if (event === 'reasoning') {
-          const target = flowTarget();
-          if (!sawText) ensureReasoning(target).textContent = data.full;
-          setActivity(target, 'thinking');
-        } else if (event === 'tools') {
-          startNewOnText = true;
-        } else if (event === 'tool_call') {
-          setActivity(active, 'working');
-          lastTool = addToolCard(active, data.name, JSON.stringify(data.args));
-        } else if (event === 'tool_result') {
-          setActivity(active, 'thinking');
-          if (lastTool) {
-            const failed = /^Error|^Permiso denegado/i.test(String(data.result));
-            renderToolOut(lastTool.out, truncate(data.result));
-            lastTool.card.classList.remove('running');
-            lastTool.card.classList.add(failed ? 'failed' : 'done');
-            lastTool.card.querySelector('.tool-glyph').textContent = failed ? '✗' : '✓';
-          }
-        } else if (event === 'permission') {
-          setActivity(active, 'waiting');
-          addPermissionCard(active, data);
-        } else if (event === 'permission_resolved') {
-          setActivity(active, 'thinking');
-          const entry = state.permissionCards.get(data.askId);
-          if (entry && entry.verdict.textContent === 'requiere aprobación') {
-            entry.card.classList.add('collapsed', data.allow ? 'approved' : 'denied');
-            entry.card.classList.remove('pending');
-            entry.card.querySelector('.perm-icon').textContent = data.allow ? '✓' : '✗';
-            entry.verdict.textContent = data.allow ? 'aprobado' : 'denegado (sin respuesta)';
-            for (const btn of Object.values(entry.buttons)) btn.disabled = true;
-          }
-        } else if (event === 'stall') {
-          if (!sawText) setText(active, `⚠ ${data.seconds} s sin respuesta del modelo (proveedor caído o muy lento). Sigo esperando...`);
-        } else if (event === 'retry') {
-          if (!sawText) setText(active, `↻ reintentando (${data.attempt}) en ${Math.round((data.delayMs || 0) / 1000)} s...`);
-        } else if (event === 'trim') {
-          active.tools.appendChild(el('div', 'chip', `✂ contexto recortado (${data.trimmed} resultados, ${data.dropped} mensajes)`));
-        } else if (event === 'warning') {
-          active.tools.appendChild(el('div', 'chip', `⚠ ${data.message}`));
-        } else if (event === 'error') {
-          setActivity(active, null);
-          active.tools.appendChild(el('div', 'chip err', `✗ ${data.message}`));
-        } else if (event === 'done') {
-          setActivity(active, null);
-          if (!data.content && !sawText) setText(active, '(sin texto)');
-          updateStatus({ rounds: data.rounds, stopReason: data.stopReason });
-          addTokens(data.tokens);
-        }
-      },
+      (event, data) => handleChatEvent(event, data, turn),
       controller.signal
     );
   } catch (error) {
-    setActivity(active, null);
-    if (error.name === 'AbortError') setText(active, '⏹ cancelado.');
-    else setText(active, `Error: ${error.message}`);
+    if (error.name === 'AbortError') {
+      setActivity(turn.active, null);
+      setText(turn.assistant(), '⏹ cancelado.');
+    } else {
+      const detail = await api(`/api/sessions/${sessionKey}`).catch(() => null);
+      if (detail?.running) {
+        controllers.delete(sessionKey);
+        setWorking(sessionKey, false);
+        await attachRun(sessionKey, pane);
+      } else {
+        setActivity(turn.active, null);
+        setText(turn.assistant(), `Error: ${error.message}`);
+      }
+    }
   } finally {
     controllers.delete(sessionKey);
-    setActivity(active, null);
+    setActivity(turn.active, null);
     setWorking(sessionKey, false);
     refreshSessions();
   }
@@ -1407,7 +1766,9 @@ async function sendMessage() {
 
 if (stopBtn) {
   stopBtn.addEventListener('click', () => {
-    const controller = controllers.get(state.sessionId);
+    const id = state.sessionId;
+    if (id) api(`/api/sessions/${id}/stop`, { method: 'POST' }).catch(() => {});
+    const controller = controllers.get(id);
     if (controller) controller.abort();
   });
 }
@@ -2035,6 +2396,10 @@ const mcpForm = $('#mcp-form');
 const skillListEl = $('#skill-list');
 const skillModal = $('#skill-modal');
 const skillForm = $('#skill-form');
+const tgTokenEl = $('#tg-token');
+const tgChatsEl = $('#tg-chats');
+const tgTranscribeEl = $('#tg-transcribe');
+const tgStatusEl = $('#tg-status');
 
 function setStatus(node, text, cls = '') {
   const elNode = $(node);
@@ -2249,6 +2614,55 @@ async function submitSkill(event) {
   refreshSkills();
 }
 
+async function refreshChannels() {
+  if (!tgStatusEl) return;
+  const data = await api('/api/channels').catch(() => null);
+  if (!data?.telegram) return;
+  const tg = data.telegram;
+  tgStatusEl.className = `summary${tg.running ? ' ok' : ''}`;
+  tgStatusEl.textContent = tg.running
+    ? `activo${tg.tokenHint ? ` · ${tg.tokenHint}` : ''}`
+    : tg.tokenSet
+      ? 'token guardado (bot detenido)'
+      : 'sin configurar';
+  if (tgChatsEl && document.activeElement !== tgChatsEl) {
+    tgChatsEl.value = (tg.allowedChatIds ?? []).join(', ');
+  }
+  if (tgTranscribeEl && document.activeElement !== tgTranscribeEl) {
+    tgTranscribeEl.value = tg.transcribeModel ?? 'whisper-1';
+  }
+  if (tgTokenEl && document.activeElement !== tgTokenEl) {
+    tgTokenEl.value = '';
+    tgTokenEl.placeholder = tg.tokenHint ? `${tg.tokenHint} (dejar vacío para no cambiar)` : '123456:ABC…';
+  }
+}
+
+async function submitChannel() {
+  if (!tgTokenEl) return;
+  setStatus('#tg-msg', 'guardando…');
+  const body = {
+    allowedChatIds: tgChatsEl?.value ?? '',
+    transcribeModel: tgTranscribeEl?.value.trim() || 'whisper-1',
+  };
+  const token = tgTokenEl.value.trim();
+  if (token) body.token = token;
+  const data = await api('/api/channels/telegram', { method: 'PUT', body }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#tg-msg', data.error, 'err');
+  setStatus('#tg-msg', data.telegram?.running ? 'guardado · bot activo' : 'guardado', 'ok');
+  refreshChannels();
+}
+
+async function testChannel() {
+  if (!tgTokenEl) return;
+  setStatus('#tg-msg', 'probando…');
+  const data = await api('/api/channels/telegram/test', {
+    method: 'POST',
+    body: { token: tgTokenEl.value.trim() },
+  }).catch((e) => ({ ok: false, error: e.message }));
+  if (data?.ok) setStatus('#tg-msg', `token OK${data.username ? ` · @${data.username}` : ''}`, 'ok');
+  else setStatus('#tg-msg', data?.error || 'token inválido', 'err');
+}
+
 async function importMcp() {
   const input = $('#mcp-import');
   const value = input.value.trim();
@@ -2296,6 +2710,8 @@ if (mcpListEl) {
     }
   });
   $('#mcp-reload').addEventListener('click', () => refreshMcp({ connect: true }));
+  $('#tg-save')?.addEventListener('click', submitChannel);
+  $('#tg-test')?.addEventListener('click', testChannel);
   $('#mcp-close').addEventListener('click', closeMcpForm);
   $('#mf-cancel').addEventListener('click', closeMcpForm);
   $('#mf-transport').addEventListener('change', syncMcpFormFields);