@danieltmn/tamnora 0.9.2 → 0.9.4

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

@@ -72,6 +72,10 @@ const ICON_PATHS = {
   'refresh-cw': ['M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8', 'M21 3v5h-5', 'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16', 'M8 16H3v5'],
   trash: ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M10 11v6', 'M14 11v6'],
   'dots-vertical': ['M12 5h.01', 'M12 12h.01', 'M12 19h.01'],
+  'dots-horizontal': ['M5 12h.01', 'M12 12h.01', 'M19 12h.01'],
+  play: ['m6 4 14 8-14 8z'],
+  pause: ['M8 5v14', 'M16 5v14'],
+  square: ['M6 6h12v12H6z'],
   copy: ['M8 8V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3', 'M5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z'],
   pencil: ['M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z', 'm15 5 4 4'],
 };
@@ -301,6 +305,8 @@ if (statusbarEl) {
 const PALETTE_COMMANDS = [
   { id: 'new', label: 'Nueva sesión en otra carpeta', hint: '/new', run: () => openFolderPicker() },
   { id: 'init', label: 'Analizar el proyecto y crear AGENTS.md', hint: '/init', run: () => runSlash('init') },
+  { id: 'resumen', label: 'Resumir la conversación', hint: '/resumen', run: () => runSlash('resumen') },
+  { id: 'audioresumen', label: 'Resumen como audio', hint: '/audioresumen', run: () => runSlash('audioresumen') },
   { id: 'compact', label: 'Compactar la conversación', hint: '/compact', run: () => runSlash('compact') },
   { id: 'clear', label: 'Limpiar la conversación', hint: '/clear', run: () => runSlash('clear') },
   { id: 'mode', label: 'Cambiar Plan / Build', hint: 'Ctrl+.', run: () => toggleMode() },
@@ -330,7 +336,7 @@ function runSlash(name) {
 function paletteItems(query) {
   const q = query.trim().toLowerCase();
   const items = PALETTE_COMMANDS.filter(
-    (c) => !q || c.label.toLowerCase().includes(q) || c.id.includes(q)
+    (c) => !q || c.label.toLowerCase().includes(q) || c.id.includes(q) || (c.hint ?? '').toLowerCase().includes(q)
   ).map((c) => ({ label: c.label, hint: c.hint || 'comando', run: c.run }));
 
   for (const session of palette.results.sessions) {
@@ -902,7 +908,7 @@ function addMessageActions(message) {
   const actions = el('div', 'msg-actions');
   const trigger = el('button', 'msg-menu-btn');
   trigger.type = 'button';
-  trigger.appendChild(icon('dots-vertical', 16));
+  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');
@@ -1152,6 +1158,10 @@ function toolSummary(name, args) {
       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)
@@ -1183,6 +1193,26 @@ function isFailedToolText(text) {
   return /^Error|^Permiso denegado/i.test(String(text ?? ''));
 }
 
+/** Nombre de archivo de una captura, del meta o del texto del resultado. */
+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). */
+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). */
 function finishToolCard(entry, data) {
   if (!entry) return;
@@ -1197,6 +1227,7 @@ function finishToolCard(entry, data) {
     entry.truncated = true;
     entry.more.hidden = false;
   }
+  if (!failed) showScreenshot(entry, screenshotName(data, preview));
 }
 
 function previewText(value, maxLines = 24, maxChars = 4000) {
@@ -1252,18 +1283,13 @@ async function loadFullToolResult(entry, message) {
   }
 }
 
-/** Reproductor del tool `speak`: sintetiza el texto pedido contra /api/tts. */
-function speakAudio(args) {
+/** Botón del tool `speak`: encola el audio pedido en el reproductor global. */
+function speakControl(args) {
   const texto = String(args?.texto ?? '').trim();
   if (!texto) return null;
-  const params = new URLSearchParams({ texto });
-  if (args?.voice) params.set('voice', args.voice);
-  if (args?.rate) params.set('rate', args.rate);
-  const audio = el('audio', 'tool-audio');
-  audio.controls = true;
-  audio.preload = 'none';
-  audio.src = `/api/tts?${params.toString()}`;
-  return audio;
+  const btn = button('', () => reproducirVoz(texto, { voice: args?.voice, rate: args?.rate, 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. */
@@ -1277,17 +1303,17 @@ function addToolCard(message, name, args, { callId = null, open = null, round =
   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 audio = name === 'speak' ? speakAudio(args) : null;
+  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 (audio) card.appendChild(audio);
+  if (speak) card.appendChild(speak);
   card.appendChild(more);
   message.tools.appendChild(card);
   ensureToolsToggle(message);
   scrollMessages(paneOf(message));
 
-  const entry = { card, out, glyph, argsEl, more, audio, callId, full: false, truncated: false };
+  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);
   });
@@ -2022,8 +2048,12 @@ function handleChatEvent(event, data, turn) {
     setActivity(target, 'working');
     turn.lastTool = addToolCard(target, data.name, data.args, { callId: data.id, summary: data.summary });
     if (turn.live && data.name === 'speak') {
-      const player = turn.lastTool?.audio;
-      if (player) player.play?.().catch?.(() => {});
+      const texto = String(data.args?.texto ?? '').trim();
+      if (texto) reproducirVoz(texto, { voice: data.args?.voice, rate: data.args?.rate, label: 'voz' }).catch(() => {});
+    }
+    if (turn.live && data.name === 'preview_url' && data.args?.url) {
+      setExplorerMode('preview');
+      loadPreview(data.args.url);
     }
   } else if (event === 'tool_result') {
     setActivity(turn.assistant(), 'thinking');
@@ -2446,8 +2476,8 @@ const micBtn = $('#mic-btn');
 
 // La cuenta 3-2-1 le da tiempo al micro a arrancar (si hablás apenas tocás se
 // pierden las primeras palabras); la cola al cortar evita perder el final.
-const REC_COUNT = [3, 2, 1];
-const REC_COUNT_STEP_MS = 900;
+const REC_COUNT = [3, 2, 1, 0];
+const REC_COUNT_STEP_MS = 500;
 const REC_TAIL_MS = 500;
 
 /** Estado visual del botón de dictado: cuenta regresiva, grabando (verde) o transcribiendo. */
@@ -2891,6 +2921,8 @@ const COMMANDS = [
   ['/new', 'nueva sesión (elegís carpeta)'],
   ['/init', 'analizar el proyecto y crear/actualizar AGENTS.md'],
   ['/goal <texto>', 'fijar el objetivo de la sesión'],
+  ['/resumen', 'resumir la conversación (sin borrarla)'],
+  ['/audioresumen', 'el resumen como audio'],
   ['/compact', 'resumir la conversación y liberar contexto'],
   ['/clear', 'borrar los mensajes de esta sesión'],
   ['/cwd', 'mostrar la carpeta de trabajo'],
@@ -2991,6 +3023,32 @@ async function runCommand(name, arg) {
       notify(`Objetivo de la sesión: **${arg}**`);
       return { handled: true };
     }
+    case 'resumen':
+    case 'resume': {
+      if (!state.sessionId) return needSession();
+      notify('Resumiendo la conversación…');
+      const out = await api(`/api/sessions/${state.sessionId}/summary`, { method: 'POST' }).catch((error) => ({
+        error: error.message,
+      }));
+      if (out.error) notify(`No se pudo resumir: ${out.error}`, 'notice err');
+      else notify(`**Resumen**\n\n${out.summary}`);
+      return { handled: true };
+    }
+    case 'audioresumen':
+    case 'audio-resumen': {
+      if (!state.sessionId) return needSession();
+      notify('Preparando el resumen…');
+      const out = await api(`/api/sessions/${state.sessionId}/summary`, { method: 'POST' }).catch((error) => ({
+        error: error.message,
+      }));
+      if (out.error) {
+        notify(`No se pudo resumir: ${out.error}`, 'notice err');
+        return { handled: true };
+      }
+      notify(`**Resumen**\n\n${out.summary}`);
+      reproducirVoz(out.summary, { label: 'resumen' }).catch((error) => notify(`No se pudo reproducir el audio: ${error.message}`, 'notice err'));
+      return { handled: true };
+    }
     case 'compact': {
       if (!state.sessionId) return needSession();
       notify('Compactando la conversación…');
@@ -3053,7 +3111,10 @@ function updateSlashMenu() {
   const value = chatInput.value;
   if (!value.startsWith('/') || /\s/.test(value)) return hideSlashMenu();
   const query = value.slice(1).toLowerCase();
-  slashMatches = slashCommandEntries().filter((entry) => entry.name.slice(1).toLowerCase().startsWith(query));
+  slashMatches = slashCommandEntries().filter(
+    (entry) =>
+      entry.name.slice(1).toLowerCase().startsWith(query) || entry.desc.toLowerCase().includes(query)
+  );
   if (!slashMatches.length) return hideSlashMenu();
   if (slashIndex >= slashMatches.length) slashIndex = 0;
   renderSlashMenu();
@@ -3896,35 +3957,139 @@ const voz = {
     rate: '+0%',
     announce: { start: true, tools: true, end: true },
   },
-  cola: Promise.resolve(),
 };
 
-/** Reproduce una frase contra el endpoint de sintesis del server. */
-function reproducirVoz(frase, { voice, rate } = {}) {
+/**
+ * Un único reproductor para TODO el audio (narración, tool `speak`,
+ * `/audioresumen`, prueba de voz): encola y reproduce de a uno, en orden, con
+ * controles visibles para pausar o detener. Antes cada audio creaba su propio
+ * `<audio>` y, si el modelo pedía dos, sonaban encimados y sin forma de pararlos.
+ */
+const ap = { el: $('#audio-player'), audio: new Audio(), queue: [], current: null, ready: false };
+
+function ensurePlayer() {
+  if (!ap.el || ap.ready) return;
+  ap.ready = true;
+  ap.toggle = button('', () => toggleAudio(), 'ap-btn');
+  ap.iconEl = el('span', 'ap-icon');
+  ap.toggle.appendChild(ap.iconEl);
+  ap.labelEl = el('span', 'ap-label');
+  ap.barEl = el('div', 'ap-bar');
+  const progress = el('div', 'ap-progress');
+  progress.appendChild(ap.barEl);
+  const info = el('div', 'ap-info');
+  info.append(ap.labelEl, progress);
+  ap.queueEl = el('span', 'ap-queue');
+  ap.stopBtn = button('', () => stopAudio(), 'ap-btn ap-stop');
+  ap.stopBtn.title = 'detener';
+  ap.stopBtn.setAttribute('aria-label', 'detener audio');
+  ap.stopBtn.appendChild(icon('square', 14));
+  ap.el.append(ap.toggle, info, ap.queueEl, ap.stopBtn);
+
+  ap.audio.addEventListener('ended', () => advanceAudio(ap.current));
+  ap.audio.addEventListener('error', () => {
+    if (ap.current && ap.audio.getAttribute('src')) advanceAudio(ap.current, new Error('No se pudo reproducir el audio.'));
+  });
+  ap.audio.addEventListener('play', renderAudio);
+  ap.audio.addEventListener('pause', renderAudio);
+  ap.audio.addEventListener('timeupdate', () => {
+    const { duration, currentTime } = ap.audio;
+    if (!Number.isFinite(duration) || duration <= 0) return;
+    ap.barEl.style.width = `${Math.min(100, (currentTime / duration) * 100)}%`;
+  });
+}
+
+/** Encola un audio. La promesa se resuelve al terminar (o al detenerlo). */
+function enqueueSpeech({ texto, voice, rate, label = 'audio', maxAgeMs = 0 } = {}) {
+  const frase = String(texto ?? '').trim();
+  if (!frase) return Promise.resolve();
+  ensurePlayer();
   return new Promise((resolve, reject) => {
-    const params = new URLSearchParams({
-      texto: frase,
-      voice: voice ?? voz.settings.voice,
-      rate: rate ?? voz.settings.rate,
-    });
-    const audio = new Audio(`/api/tts?${params}`);
-    audio.onended = () => resolve();
-    audio.onerror = () => reject(new Error('no se pudo reproducir (¿sin conexión?)'));
-    audio.play().catch(() => reject(new Error('el navegador bloqueó el audio: tocá la página y probá de nuevo')));
+    ap.queue.push({ texto: frase, voice, rate, label, createdAt: Date.now(), maxAgeMs, resolve, reject });
+    if (ap.current) renderAudio();
+    else playNextAudio();
   });
 }
 
+function playNextAudio() {
+  const item = ap.queue.shift();
+  if (!item) {
+    ap.current = null;
+    renderAudio();
+    return;
+  }
+  if (item.maxAgeMs && Date.now() - item.createdAt > item.maxAgeMs) {
+    item.resolve?.();
+    return playNextAudio();
+  }
+  ap.current = item;
+  const params = new URLSearchParams({
+    texto: item.texto,
+    voice: item.voice ?? voz.settings.voice,
+    rate: item.rate ?? voz.settings.rate,
+  });
+  ap.audio.src = `/api/tts?${params}`;
+  ap.audio.play().catch(() => {
+    advanceAudio(item, new Error('el navegador bloqueó el audio: tocá la página y probá de nuevo'));
+  });
+  renderAudio();
+}
+
+function advanceAudio(item, error) {
+  if (!item || ap.current !== item) return;
+  ap.current = null;
+  if (error) item.reject?.(error);
+  else item.resolve?.();
+  playNextAudio();
+}
+
+function toggleAudio() {
+  if (!ap.current) return;
+  if (ap.audio.paused) ap.audio.play().catch(() => {});
+  else ap.audio.pause();
+}
+
+/** Detiene lo que suena y vacía lo que espera. */
+function stopAudio() {
+  for (const item of ap.queue) item.resolve?.();
+  ap.queue = [];
+  const current = ap.current;
+  ap.current = null;
+  current?.resolve?.();
+  ap.audio.pause();
+  ap.audio.removeAttribute('src');
+  ap.audio.load();
+  if (ap.barEl) ap.barEl.style.width = '0%';
+  renderAudio();
+}
+
+function renderAudio() {
+  if (!ap.el || !ap.ready) return;
+  const active = Boolean(ap.current) || ap.queue.length > 0;
+  ap.el.hidden = !active;
+  if (!active) return;
+  ap.labelEl.textContent = ap.current?.label ?? 'audio';
+  ap.queueEl.hidden = ap.queue.length === 0;
+  ap.queueEl.textContent = ap.queue.length ? `+${ap.queue.length}` : '';
+  const playing = Boolean(ap.current) && !ap.audio.paused;
+  ap.iconEl.replaceChildren(icon(playing ? 'pause' : 'play', 14));
+  ap.toggle.title = playing ? 'pausar' : 'reproducir';
+  ap.toggle.setAttribute('aria-label', ap.toggle.title);
+}
+
+/** Reproduce una frase contra el endpoint de sintesis del server. */
+function reproducirVoz(frase, { voice, rate, label, maxAgeMs } = {}) {
+  return enqueueSpeech({ texto: frase, voice, rate, label, maxAgeMs });
+}
+
 /**
- * Encola una frase para hablar (secuencial: una a la vez). Si el turno tarda y
- * la frase quedó vieja en la cola, se descarta: narrar el pasado no informa.
+ * Narra una frase del turno. Si el turno tarda y la frase quedó vieja en la
+ * cola, se descarta al llegar su turno (`maxAgeMs`): narrar el pasado no informa.
  */
 function hablar(texto) {
   const frase = String(texto ?? '').trim();
   if (!frase || !voz.settings.enabled) return;
-  const creado = Date.now();
-  voz.cola = voz.cola
-    .then(() => (Date.now() - creado > 45000 ? null : reproducirVoz(frase)))
-    .catch(() => {});
+  reproducirVoz(frase, { label: 'narrando', maxAgeMs: 45000 }).catch(() => {});
 }
 
 /** Habla el progreso de un turno EN VIVO: el replay de una reconexion no habla. */

package/harness/packages/server/public/index.html

@@ -34,7 +34,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo"><span class="logo-t">T</span><span class="logo-h">H</span></span> <span class="ver">v0.9.2</span></div>
+      <div class="brand"><span class="logo"><span class="logo-t">T</span><span class="logo-h">H</span></span> <span class="ver">v0.9.4</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -141,6 +141,7 @@
         <div id="toasts" class="toasts" aria-live="polite"></div>
         <div id="attach-preview" class="attach-preview" hidden></div>
             <div id="chat-queue" class="chat-queue" hidden></div>
+            <div id="audio-player" class="audio-player" hidden></div>
             <div class="composer-row">
               <span class="prompt-mark">❯</span>
               <button type="button" id="attach-image" class="btn icon" title="Adjuntar imagen (o pegala / arrastrala)" aria-label="adjuntar imagen">

package/harness/packages/server/public/landing/index.html

@@ -451,7 +451,8 @@
 
           <p class="hero-copy">
             Un harness local para orquestar agentes de IA, ejecutar tools en tu workspace y mantener el
-            control desde tu máquina o el celular (túnel + QR o Telegram).
+            control desde tu máquina o el celular (túnel + QR o Telegram). Renderiza páginas con un
+            navegador headless, narra su progreso y hace trazable cada corrida.
           </p>
 
           <div class="actions">
@@ -472,6 +473,18 @@
               <div class="feature-icon">✓</div>
               <div><b>Control</b><span>Permisos allow/ask/deny y runs trazables.</span></div>
             </div>
+            <div class="feature">
+              <div class="feature-icon">◎</div>
+              <div><b>Navegador</b><span>Screenshot y errores de consola de una página.</span></div>
+            </div>
+            <div class="feature">
+              <div class="feature-icon">♪</div>
+              <div><b>Voz</b><span>Narra el progreso y manda audio bajo pedido.</span></div>
+            </div>
+            <div class="feature">
+              <div class="feature-icon">⌘</div>
+              <div><b>Multi-modelo</b><span>OpenRouter, OpenAI, Claude, Gemini y Ollama.</span></div>
+            </div>
           </div>
         </section>
 

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

@@ -110,7 +110,9 @@ export function summarizeArgs(name, args, max = 240) {
   if ((name === 'write' || name === 'edit' || name === 'read') && a.path) {
     return a.content ? `${a.path} · ${humanSize(a.content)}` : String(a.path);
   }
-  if ((name === 'fetch_url' || name === 'preview_url') && a.url) return cut(a.url);
+  if ((name === 'fetch_url' || name === 'preview_url' || name === 'screenshot' || name === 'console_errors') && a.url) {
+    return cut(a.url);
+  }
   if (name === 'task' && (a.description || a.prompt)) return cut(a.description || a.prompt);
   const keys = Object.keys(a);
   if (keys.length === 1 && typeof a[keys[0]] === 'string') return cut(a[keys[0]]);

package/harness/packages/server/public/styles.css

@@ -521,7 +521,7 @@ body.resizing * { cursor: col-resize !important; }
 }
 .msg-menu[hidden] { display: none; }
 .msg-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
-.msg-actions button.msg-act {
+.msg-menu .msg-act {
   width: 100%;
   display: flex;
   align-items: center;
@@ -537,11 +537,24 @@ body.resizing * { cursor: col-resize !important; }
 }
 .msg-act .mi { flex: 0 0 auto; color: var(--muted); }
 .msg-act .mlabel { min-width: 0; }
-.msg-actions button.msg-act:hover { background: var(--theirs); }
-.msg-actions button.msg-act:hover .mi { color: var(--accent); }
-.msg-actions button.msg-act.danger { color: var(--danger); }
-.msg-actions button.msg-act.danger:hover { background: var(--theirs); }
-.msg-actions button.msg-act.danger:hover .mi { color: var(--danger); }
+.msg-menu .msg-act:hover { background: var(--theirs); }
+.msg-menu .msg-act:hover .mi { color: var(--accent); }
+.msg-menu .msg-act.danger { color: var(--danger); }
+.msg-menu .msg-act.danger:hover { background: var(--theirs); }
+.msg-menu .msg-act.danger:hover .mi { color: var(--danger); }
+
+/* En PC el menú del mensaje va en linea (una fila), con el mismo lenguaje
+   visual de la consola. En pantallas chicas queda como lista desplegable. */
+@media (min-width: 821px) {
+  .msg-menu {
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+    gap: 2px;
+  }
+  .msg-menu .msg-act { width: auto; white-space: nowrap; }
+  .msg-menu-sep { width: 1px; height: auto; align-self: stretch; margin: 6px 3px; }
+}
 .bubble .tools { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
 
 .tools-actions { display: flex; align-items: center; gap: 8px; }
@@ -600,12 +613,84 @@ body.resizing * { cursor: col-resize !important; }
   overflow: auto;
 }
 .tool-card > .tool-out:empty { display: none; }
-.tool-card > .tool-audio {
-  display: block;
-  width: calc(100% - 28px);
-  height: 32px;
+.tool-card > .tool-audio-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   margin: 4px 0 2px 18px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font: 600 12px var(--sans);
+}
+.tool-card > .tool-audio-btn:hover { background: var(--theirs); }
+.tool-card > .tool-shot {
+  display: block;
+  max-width: calc(100% - 28px);
+  max-height: 420px;
+  width: auto;
+  margin: 6px 0 4px 18px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: zoom-in;
+  background: #fff;
+}
+
+/* Reproductor único de audio (narración, speak, resumen): visible y detenible. */
+.audio-player {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px;
+  margin-bottom: 6px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--solid, var(--panel));
+  box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
 }
+.audio-player[hidden] { display: none; }
+.audio-player .ap-btn {
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+}
+.audio-player .ap-btn:hover { background: var(--theirs); }
+.audio-player .ap-stop { color: var(--danger); }
+.audio-player .ap-info { flex: 1 1 auto; min-width: 0; }
+.audio-player .ap-label {
+  display: block;
+  color: var(--muted);
+  font: 600 11px var(--sans);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+.audio-player .ap-progress {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--border);
+  overflow: hidden;
+}
+.audio-player .ap-bar {
+  width: 0%;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width 0.15s linear;
+}
+.audio-player .ap-queue { flex: 0 0 auto; color: var(--muted); font: 600 11px var(--sans); }
+.audio-player .ap-queue[hidden] { display: none; }
 .tool-more {
   display: inline-block;
   margin: 2px 0 2px 18px;
@@ -946,7 +1031,7 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
   left: 14px;
   right: 14px;
   bottom: calc(100% - 6px);
-  max-height: 260px;
+  max-height: min(60vh, 420px);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -954,8 +1039,9 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
   padding: 6px;
   border: 1px solid var(--border);
   border-radius: 12px;
-  background: var(--panel);
+  background: var(--solid, var(--panel));
   box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
+  backdrop-filter: blur(18px);
   z-index: 30;
 }
 .slash-menu[hidden] { display: none; }

package/harness/packages/server/src/lib/agentRun.js

@@ -6,10 +6,10 @@ import { summarizeToolCall, previewToolResult } from './core.js';
 
 const FAILED_RE = /^Error|^Permiso denegado/i;
 
-/** Payload estandar de un tool_result para eventos SSE: preview + failed. */
+/** Payload estandar de un tool_result para eventos SSE: preview + failed (+ meta). */
 export function toolResultPayload(event) {
   const { preview, truncated } = previewToolResult(event.name, event.result);
-  return { preview, truncated, failed: FAILED_RE.test(String(event.result)) };
+  return { preview, truncated, failed: FAILED_RE.test(String(event.result)), meta: event.meta };
 }
 
 export function toolCallPayload(event) {