@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/desktop/renderer.js

@@ -59,6 +59,7 @@
   let pausePreviewed = false;   // a preview decode fired for the current pause
   let reuseLiveOnStop = false;  // commit should reuse pendingUserText, not re-decode
   let livePromise = null;       // in-flight preview decode (awaited on reuse)
+  let previewFlushTs = 0;       // audio cut-off the pending preview actually saw
 
   // Web Audio analyser — drives the live capsule wave from real mic amplitude
   let audioCtx = null;
@@ -67,7 +68,7 @@
   let timeData = null;
   let waveRaf = null;
 
-  let streamingAgentEntry = null; // legacy single-bubble streaming (kept dormant)
+  let streamingAgentEntry = null; // the pending "thinking" bubble; also renders turn errors
   let toolPillsByName = {};       // active tool pills, by tool name, for the live turn
   let ttsAudio = null;            // <audio> currently playing
 
@@ -92,6 +93,7 @@
   // requestTts / second finalize on the same in-flight bubble.
   let doneHandled = false;
   let ttsTimer = null;
+  let prewarmedTurn = false;      // this turn already kicked a speak-ahead
 
   // ── Inline SVG icons (mirrors the design's I.* set) ──────────────────────
   const SVG = (path, attrs = {}) => {
@@ -108,6 +110,7 @@
     person: () => SVG('<circle cx="12" cy="8" r="3.6"/><path d="M5.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/>', { width: 12, height: 12, viewBox: "0 0 24 24" }),
     refresh:() => SVG('<path d="M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.2L3 16M3 21v-5h5"/>', { width: 13, height: 13, viewBox: "0 0 24 24", "stroke-width": "1.9" }),
     copy:   () => SVG('<rect x="9" y="9" width="11" height="11" rx="2.5"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/>', { width: 13, height: 13, viewBox: "0 0 24 24" }),
+    muted:  () => SVG('<path d="M11 5 6.5 9H3v6h3.5L11 19V5z"/><path d="M16 9.5l4 5M20 9.5l-4 5"/>', { width: 12, height: 12, viewBox: "0 0 24 24" }),
     check:  () => SVG('<path d="M5 12l4.5 4.5L19 7"/>', { width: 13, height: 13, viewBox: "0 0 24 24", "stroke-width": "2" }),
     play:   () => `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.2v13.6c0 .8.9 1.3 1.6.9l10.5-6.8c.6-.4.6-1.3 0-1.7L9.6 4.3C8.9 3.9 8 4.4 8 5.2z"/></svg>`,
     pause:  () => `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><rect x="6.5" y="5" width="4" height="14" rx="1.3"/><rect x="13.5" y="5" width="4" height="14" rx="1.3"/></svg>`,
@@ -448,7 +451,11 @@
           <button class="chip btn-regen">${ICON.refresh()} Regenerar</button>
         </div>
       `;
-      if (m.audio && m.dur) {
+      if (m.audio) {
+        // A missing duration is no reason to withhold the player — the <audio>
+        // element reports its own once metadata loads. Requiring m.dur here is
+        // what limited playback to the engines that happen to measure their
+        // output, which in practice meant the silent mock and nothing else.
         // Insert scrubber before turn-actions
         const scrubberHtml = buildScrubberHtml(m);
         const actions = t.querySelector(".turn-actions");
@@ -536,6 +543,8 @@
     $convScroll?.querySelector("[data-pending='user']")?.remove();
   }
 
+  // The placeholder bubble shown while the turn is in flight. Segments replace
+  // it with real bubbles; a failed turn overwrites it with the error text.
   function ensureStreamingAgentBubble() {
     if (!$convScroll) return;
     if (streamingAgentEntry?.el && document.body.contains(streamingAgentEntry.el)) return;
@@ -561,16 +570,14 @@
     scrollConvToBottom();
   }
 
-  function appendStreamingToken(chunk) {
-    ensureStreamingAgentBubble();
-    if (!streamingAgentEntry.started) {
-      streamingAgentEntry.started = true;
-      streamingAgentEntry.msgEl.innerHTML = ""; // clear the dots placeholder
-    }
-    streamingAgentEntry.text += chunk;
-    // Re-render with the word-in animation: split into spans on word boundaries.
-    streamingAgentEntry.msgEl.innerHTML = formatWordsHtml(streamingAgentEntry.text) + `<span class="caret"></span>`;
-    scrollConvToBottom();
+  // Drop the provisional bubble without recording anything. Streamed deltas are
+  // a preview of a segment that is still coming; the `segment` event is what
+  // becomes a message, gets spoken, and enters history. Finalizing here instead
+  // would file the same reply twice.
+  function discardStreamingAgent() {
+    if (!streamingAgentEntry) return;
+    streamingAgentEntry.el.remove();
+    streamingAgentEntry = null;
   }
 
   function finalizeStreamingAgent({ audio, dur } = {}) {
@@ -613,11 +620,52 @@
   }
 
   // ── Audio scrubber ───────────────────────────────────────────────────────
+  // m:ss. The old formatter hardcoded the "0:" minute, so anything past a
+  // minute read as 0:73.
+  function fmtDur(s) {
+    const total = Math.max(0, Math.round(s || 0));
+    return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+  }
+  // A bubble's text lands as soon as the turn resolves, but its voice is still
+  // being generated — so the reply sat there looking finished and mute, and
+  // then a player appeared out of nowhere seconds later. This placeholder fills
+  // that gap. Same bar geometry and padding as the real scrubber, so swapping
+  // one for the other doesn't move anything on screen.
+  function buildPendingAudioHtml() {
+    const N = 38;
+    const bars = waveShape(N, 13);
+    return `
+      <div class="audio pending" role="status" aria-label="Generando audio…">
+        <span class="play"></span>
+        <div class="wavebar">
+          ${bars.map((h, i) => `<i style="height:${Math.round(h * 24)}px;--i:${i}"></i>`).join("")}
+        </div>
+        <span class="dur">···</span>
+      </div>
+    `;
+  }
+
+  // Only ever called for a turn that is live and has asked for speech: a past
+  // bubble that was never voiced must not grow a spinner when it is rebuilt.
+  function showPendingAudio(turnId) {
+    const turnEl = $convScroll?.querySelector(`[data-id="${turnId}"]`);
+    if (!turnEl || turnEl.querySelector(".audio")) return;
+    turnEl.querySelector(".turn-actions")?.insertAdjacentHTML("beforebegin", buildPendingAudioHtml());
+  }
+
+  // The placeholder promises audio is coming, so every path that ends that
+  // promise — audio arrived, TTS failed, the watchdog gave up — has to take it
+  // down. One left spinning forever is worse than never having shown it.
+  function clearPendingAudio(turnId) {
+    const turnEl = $convScroll?.querySelector(`[data-id="${turnId}"]`);
+    turnEl?.querySelector(".audio.pending")?.remove();
+  }
+
   function buildScrubberHtml(m) {
     const N = 38;
     const bars = waveShape(N, 13);
     const dur = m.dur || 0;
-    const fmt = (s) => `0:${String(Math.round(s)).padStart(2, "0")}`;
+    const fmt = fmtDur;
     return `
       <div class="audio" data-bars="${N}">
         <button class="play" aria-label="Reproducir respuesta">${ICON.play()}</button>
@@ -628,19 +676,37 @@
       </div>
     `;
   }
+  // One player per bubble, fed by a playlist that is still being written.
+  //
+  // The reply is synthesized a sentence at a time, so parts arrive while
+  // earlier ones are already playing. The element plays them back to back and
+  // reports one continuous position across the whole list, which is what the
+  // listener perceives — they hear one answer, not three clips.
   function wireScrubber(turnEl, m) {
     const N = 38;
     const audioEl = turnEl.querySelector(".audio");
-    if (!audioEl || !m.audio) return;
+    // A bubble rebuilt from state carries only the finished url; treat it as a
+    // one-item playlist so replay works the same on both paths.
+    if (!m._parts?.length && m.audio) m._parts = [{ url: m.audio, dur: m.dur || 0 }];
+    if (!audioEl || !m._parts?.length) return;
     const $play = audioEl.querySelector(".play");
     const $bar  = audioEl.querySelector(".wavebar");
     const bars  = $bar.querySelectorAll("i");
     const $dur  = audioEl.querySelector(".dur");
-    const dur   = m.dur || 1;
-    const fmt   = (s) => `0:${String(Math.round(s)).padStart(2, "0")}`;
-    const audio = new Audio(m.audio);
-    m._audioEl = audio;          // the audio queue drives sequential playback
+    const fmt   = fmtDur;
+    const audio = new Audio(m._parts[0].url);
+    m._audioEl  = audio;         // the audio queue drives sequential playback
+    m._partIdx  = 0;
     let raf = null;
+    let waiting = false;         // played everything that has arrived so far
+
+    const partDur = (i) => {
+      if (i === m._partIdx && audio.duration > 0 && isFinite(audio.duration)) return audio.duration;
+      return m._parts[i]?.dur || 0;
+    };
+    const total   = () => m._parts.reduce((a, _, i) => a + partDur(i), 0);
+    const before  = () => m._parts.slice(0, m._partIdx).reduce((a, _, i) => a + partDur(i), 0);
+    const elapsed = () => before() + (audio.currentTime || 0);
 
     const setProgress = (p) => {
       p = Math.max(0, Math.min(1, p));
@@ -649,15 +715,40 @@
         b.classList.toggle("on", i <= cur);
         b.classList.toggle("cur", i === cur && !audio.paused);
       });
-      $dur.textContent = p > 0 || !audio.paused ? fmt(p * dur) : fmt(dur);
+      const t = total();
+      $dur.textContent = p > 0 || !audio.paused ? fmt(p * t) : fmt(t);
     };
-    const tick = () => {
-      if (audio.duration > 0) setProgress(audio.currentTime / audio.duration);
-      raf = requestAnimationFrame(tick);
+    const paint = () => { const t = total(); setProgress(t > 0 ? elapsed() / t : 0); };
+    const tick  = () => { paint(); raf = requestAnimationFrame(tick); };
+
+    // Load a part and keep playing. Used both when one ends and when a part
+    // the player was waiting for finally shows up.
+    const playPart = (i) => {
+      m._partIdx = i;
+      waiting = false;
+      audio.src = m._parts[i].url;
+      audio.play().catch(() => onSegmentEnded(m));
     };
+    // Called from attachAudioPart when the list grows.
+    m._onPartArrived = () => {
+      const t = total();
+      if (waiting && m._parts[m._partIdx + 1]) playPart(m._partIdx + 1);
+      else if (audio.paused && audio.currentTime === 0) $dur.textContent = fmt(t);
+    };
+    // Called from the tts-end event: nothing more is coming.
+    m._onPartsDone = () => { if (waiting) { waiting = false; onSegmentEnded(m); } };
+
+    audio.addEventListener("loadedmetadata", paint);
     audio.addEventListener("play",  () => { $play.innerHTML = ICON.pause(); raf = requestAnimationFrame(tick); if (mode !== "speaking") { mode = "speaking"; render(); } });
     audio.addEventListener("pause", () => { $play.innerHTML = ICON.play();  if (raf) cancelAnimationFrame(raf); });
-    audio.addEventListener("ended", () => { $play.innerHTML = ICON.play(); if (raf) cancelAnimationFrame(raf); setProgress(1); onSegmentEnded(m); });
+    audio.addEventListener("ended", () => {
+      if (m._parts[m._partIdx + 1]) return playPart(m._partIdx + 1);
+      if (!m._partsDone) { waiting = true; return; }   // the next sentence is still being made
+      $play.innerHTML = ICON.play();
+      if (raf) cancelAnimationFrame(raf);
+      setProgress(1);
+      onSegmentEnded(m);
+    });
     // 404 / decode error / autoplay block: don't hang — advance the queue.
     audio.addEventListener("error", () => onSegmentEnded(m));
 
@@ -676,19 +767,40 @@
     $bar.addEventListener("click", (e) => {
       const r = $bar.getBoundingClientRect();
       const p = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
-      if (audio.duration > 0) audio.currentTime = p * audio.duration;
+      // Map one position on the bar onto (part, offset) — the bar spans the
+      // whole reply, not the sentence that happens to be playing.
+      let target = p * total();
+      for (let i = 0; i < m._parts.length; i++) {
+        const d = partDur(i);
+        if (target <= d || i === m._parts.length - 1) {
+          if (i !== m._partIdx) {
+            const wasPlaying = !audio.paused;
+            m._partIdx = i;
+            audio.src = m._parts[i].url;
+            if (wasPlaying) audio.play().catch(() => {});
+          }
+          audio.currentTime = Math.max(0, Math.min(target, Math.max(0, d - 0.05)));
+          break;
+        }
+        target -= d;
+      }
       setProgress(p);
     });
   }
 
-  // Post-finalize hook: add a scrubber to an already-rendered agent turn
-  // when its TTS audio arrives. Called from the `tts-ready` daemon event.
-  function attachAudioToTurn(turnId, { url, dur }) {
+  // Post-finalize hook: a sentence of this turn's speech just arrived. The
+  // first one mounts the player; later ones extend the playlist under it.
+  function attachAudioPart(turnId, { url, dur }) {
     const m = messages.find((x) => x.id === turnId);
     if (!m) return;
-    m.audio = url;
-    m.dur   = dur || 0;
+    (m._parts = m._parts || []).push({ url, dur: dur || 0 });
+    m.audio = m._parts[0].url;                       // kept for rebuilds
+    m.dur   = m._parts.reduce((a, p) => a + (p.dur || 0), 0);
+
+    if (m._parts.length > 1) { m._onPartArrived?.(); return; }
+
     const turnEl = $convScroll?.querySelector(`[data-id="${turnId}"]`);
+    turnEl?.querySelector(".audio.pending")?.remove();
     if (turnEl && !turnEl.querySelector(".audio")) {
       // Insert the scrubber HTML just before turn-actions (matches appendTurn).
       const actions = turnEl.querySelector(".turn-actions");
@@ -697,12 +809,34 @@
       else turnEl.insertAdjacentHTML("beforeend", html);
       wireScrubber(turnEl, m); // sets m._audioEl
     }
-    // Audio is ready → let the sequential queue play it when it's this
-    // segment's turn (gapless auto-play across the turn's bubbles).
+    // The first sentence is enough to start: let the queue play it while the
+    // rest of the reply is still being spoken into existence.
     queueMarkReady(m);
     scrollConvToBottom();
   }
 
+  // No more sentences are coming for this bubble.
+  function markAudioComplete(turnId) {
+    const m = messages.find((x) => x.id === turnId);
+    if (!m) return;
+    m._partsDone = true;
+    m._onPartsDone?.();
+  }
+
+  // The other half of attachAudioPart: this segment produced no audio. Say so
+  // on the bubble instead of leaving the reply mutely text-only — "no voice
+  // this time" and "the voice is broken" look identical otherwise, and the
+  // second one is worth knowing about.
+  function markTurnUnvoiced(turnId, reason) {
+    const turnEl = $convScroll?.querySelector(`[data-id="${turnId}"]`);
+    if (!turnEl || turnEl.querySelector(".unvoiced")) return;
+    const el = document.createElement("span");
+    el.className = "chip unvoiced";
+    el.title = reason ? `Sin voz: ${reason}` : "Sin voz";
+    el.innerHTML = `${ICON.muted()} Sin voz`;
+    turnEl.querySelector(".turn-actions")?.prepend(el);
+  }
+
   function waveShape(n, seed = 7) {
     const out = []; let s = seed;
     for (let i = 0; i < n; i++) {
@@ -723,6 +857,7 @@
     currentTurn++;
     resetTurnAudio();
     doneHandled = false;
+    prewarmedTurn = false;
     if (ttsTimer) { clearTimeout(ttsTimer); ttsTimer = null; }
   }
   function resetTurnAudio() {
@@ -777,14 +912,23 @@
   // Called from a segment audio's `ended` (or `error`). Advances the queue.
   function onSegmentEnded(m) {
     const e = turnAudios.find((x) => x.m === m);
-    if (e) { if (e.played) return; e.played = true; }
-    if (queuePlaying && ttsAudio === m._audioEl) {
+    const counted = !!e?.played;   // the queue already moved past this one
+    if (e) e.played = true;
+    if (!counted && queuePlaying && ttsAudio === m._audioEl) {
       queuePlaying = false;
       audioCursor++;
       pumpAudioQueue();
-    } else if (mode === "speaking") {
-      mode = "idle"; render();
+      return;
     }
+    // Nothing is playing any more, so the capsule must not still say so.
+    //
+    // This used to hang on "Roby está hablando…" forever. When a segment's TTS
+    // outran the turn watchdog, the watchdog wrote the entry off as played;
+    // the audio then arrived anyway, the user pressed play by hand, and on
+    // `ended` the already-played guard returned early — before the line that
+    // puts the capsule back to idle. The guard is about not advancing the
+    // queue twice, so that is all it guards now.
+    if (!queuePlaying && mode === "speaking") { mode = "idle"; render(); }
   }
 
   // ── Recording flow ───────────────────────────────────────────────────────
@@ -799,10 +943,14 @@
     pausePreviewed = false;
     reuseLiveOnStop = false;
     livePromise = null;
+    previewFlushTs = 0;
     pendingUserText = "";
-    // Warm the whisper model now (overlaps the mic warm-up), so the decode at
-    // the end of this utterance doesn't pay a cold start.
+    // Warm both models now, while the user is about to speak. Whisper is needed
+    // in a few seconds, the voice engine a few seconds after that — and both
+    // cost far more when cold than the whole rest of the turn. Overlapping them
+    // with the utterance is free time that would otherwise be dead waiting.
     window.apx?.warmupStt?.();
+    window.apx?.warmupTts?.();
     mode = "listening";
     render();
     startMic();
@@ -889,12 +1037,18 @@
         // in-flight preview if it hasn't settled yet.
         if (reuseLiveOnStop) {
           if (livePromise) { try { await livePromise; } catch {} }
-          text = (pendingUserText || "").trim();
+          // Only if the preview's audio actually covers everything said. If the
+          // user resumed speaking after that cut-off (and the new pause couldn't
+          // fire its own preview because one was still in flight), the stashed
+          // text is a truncated utterance — decode again rather than send half
+          // a sentence.
+          if (previewFlushTs && lastVoiceTs <= previewFlushTs) text = (pendingUserText || "").trim();
         }
         // Manual send (Enviar / ⌘G release) or no preview yet → one fresh decode.
         if (!text) text = (await transcribeBuffered()).trim();
         recordedChunks = [];
         reuseLiveOnStop = false;
+        previewFlushTs = 0;
         // Guard with .trim() — whisper occasionally returns a single space or
         // newline for very short clips, which used to commit an empty bubble.
         if (!text || isCancelled) {
@@ -1070,6 +1224,29 @@
     } catch {}
     return "";
   }
+  // MediaRecorder only hands over a blob once per timeslice, so at any instant
+  // the last second of speech is still inside the recorder. A preview decode
+  // that skipped this would transcribe an utterance with its tail missing —
+  // which is exactly what made the reuse below unsafe, and why every turn used
+  // to pay a second full decode. requestData() forces the pending audio out now.
+  function flushRecorder() {
+    return new Promise((resolve) => {
+      if (!mediaRecorder || mediaRecorder.state !== "recording") return resolve();
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        mediaRecorder.removeEventListener("dataavailable", finish);
+        resolve();
+      };
+      mediaRecorder.addEventListener("dataavailable", finish);
+      try { mediaRecorder.requestData(); } catch { finish(); return; }
+      // The event is the normal path; the timer only exists so a recorder that
+      // never answers can't wedge the preview (and with it the auto-send).
+      setTimeout(finish, 250);
+    });
+  }
+
   // Decode what's been recorded so far (fired once per speech pause). The
   // result is stashed in pendingUserText and reused by the auto-send on stop,
   // so the same audio is never decoded twice. livePromise lets onstop await an
@@ -1079,8 +1256,17 @@
     liveBusy = true;
     livePromise = (async () => {
       try {
+        await flushRecorder();
+        // Stamp the cut-off BEFORE decoding: onstop reuses this text only if no
+        // further speech arrived after this instant.
+        previewFlushTs = Date.now();
         const text = await transcribeBuffered();
-        if (text && mode === "listening") pendingUserText = text;
+        // Deliberately not gated on `mode === "listening"`: the auto-send flips
+        // the mode to "transcribing" at SILENCE_MS, which lands *before* this
+        // decode settles. Gating here threw the result away every single time
+        // and made the reuse below dead code — one wasted decode per turn, plus
+        // a second one on the critical path.
+        if (text && !isCancelled) pendingUserText = text;
       } finally { liveBusy = false; }
     })();
     return livePromise;
@@ -1110,6 +1296,59 @@
   // mount the placeholder bubble, and ask main to grow the window now (not
   // one ResizeObserver tick later). Shared by commitUserMessage + regen so
   // both paths set up the daemon-event pipeline identically.
+  // Emoji and reasoning are stripped daemon-side before a segment is spoken, so
+  // a sentence carrying either would be pre-made under a key the real request
+  // never uses. Cheaper to skip than to synthesize and throw away.
+  const HAS_EMOJI = /\p{Extended_Pictographic}|\p{Regional_Indicator}/u;
+  const HAS_REASONING = /[<[]\s*\/?\s*(think|thinking|reason|reasoning|scratchpad|analysis)/i;
+  // The daemon can only hand the renderer a segment once the whole turn has
+  // resolved, so the voice engine sits idle for the model's entire generation
+  // and only then starts on sentence one. The tokens are already arriving,
+  // though — as soon as they contain a finished sentence, that sentence is
+  // almost certainly the first thing that will be spoken, so start making it
+  // now. main.js keys the result by exact text: if the reply turns out
+  // different, the pre-made audio is simply never claimed.
+  function maybePrewarmTts() {
+    if (prewarmedTurn || !streamingAgentEntry) return;
+    const buf = streamingAgentEntry.text || "";
+    // A long preamble with no sentence end is a model that isn't writing prose
+    // (reasoning, a list, code) — stop watching rather than guess.
+    if (buf.length > 400) { prewarmedTurn = true; return; }
+    if (HAS_REASONING.test(buf)) { prewarmedTurn = true; return; }
+    // Only look at whole sentences: a half-streamed one is not yet the chunk.
+    const complete = buf.match(/^[\s\S]*[.!?…](?=\s)/);
+    if (!complete) return;
+    const first = firstSpeechChunk(complete[0].trim());
+    if (!first) return;      // no chunk has closed yet — keep watching
+    prewarmedTurn = true;
+    if (HAS_EMOJI.test(first)) return;
+    window.apx?.prewarmTts?.(first);
+  }
+
+  // Mirror of main.js splitForSpeech, for its first chunk only. It has to agree
+  // exactly: a chunk built here that the real request never asks for is not just
+  // wasted, it holds the voice engine's lock while the chunk that *is* wanted
+  // waits behind it. Returns null while no chunk has closed yet — the splitter
+  // packs short sentences together, so "Hola." on its own is not a chunk.
+  function firstSpeechChunk(text, { min = 12, limit = 80 } = {}) {
+    const pieces = [];
+    for (const sentence of String(text).trim().split(/(?<=[.!?…])\s+/)) {
+      if (sentence.length <= limit) { pieces.push(sentence); continue; }
+      for (const clause of sentence.split(/(?<=[,;:—–])\s+/)) {
+        if (clause.length <= limit) { pieces.push(clause); continue; }
+        for (const word of clause.split(" ")) pieces.push(word);
+      }
+    }
+    let cur = "";
+    for (const piece of pieces) {
+      if (!piece) continue;
+      if (cur && cur.length + 1 + piece.length > limit) return cur;
+      cur = cur ? `${cur} ${piece}` : piece;
+      if (cur.length >= min) return cur;
+    }
+    return null;
+  }
+
   function startAgentTurn() {
     beginAgentTurn();      // bump currentTurn + reset the audio queue/guards
     mode = "thinking";
@@ -1164,16 +1403,25 @@
         }
         ensureConv();
         break;
-      case "token":
-        // Legacy path (backend no longer streams tokens for desktop). Kept so a
-        // mixed-version daemon doesn't break — accumulate into a single bubble.
-        appendStreamingToken(msg.text || "");
-        break;
       case "tool_start":  addToolPill(msg.name); break;
       case "tool_done":   updateToolPill(msg.name); break;
+      case "delta": {
+        // Tokens as they land. Purely visual: this bubble is thrown away the
+        // moment the real segment arrives, so nothing here is spoken or kept.
+        if (!msg.text) break;
+        ensureConv();
+        ensureStreamingAgentBubble();
+        streamingAgentEntry.text += msg.text;
+        streamingAgentEntry.msgEl.innerHTML = formatWordsHtml(streamingAgentEntry.text);
+        maybePrewarmTts();
+        requestWindowResize();
+        scrollConvToBottom();
+        break;
+      }
       case "segment": {
         // Each segment is its own agent message bubble + its own audio.
         ensureConv();
+        discardStreamingAgent();   // the streamed preview is now redundant
         const text = (msg.text || "").trim();
         if (!text) break;
         const id = nextId++;
@@ -1185,6 +1433,7 @@
         // it for gapless sequential playback. `speak` carries the inline emotion
         // tags (the bubble `text` has them stripped) so a tag-aware engine like
         // QVox can act on them; falls back to the visible text.
+        showPendingAudio(id);
         window.apx?.requestTts?.(msg.speak || text, id);
         requestWindowResize();
         scrollConvToBottom();
@@ -1194,6 +1443,7 @@
         if (doneHandled) break;
         doneHandled = true;
         turnDone = true;
+        discardStreamingAgent();   // nothing should outlive the turn as a preview
         // Record the whole turn as one assistant entry for conversation context.
         const full = (msg.text || "").trim();
         if (full) history.push({ role: "assistant", content: full });
@@ -1201,7 +1451,12 @@
         // the capsule can't get stuck in "Pensando…".
         if (turnWatchdog) clearTimeout(turnWatchdog);
         turnWatchdog = setTimeout(() => {
-          turnAudios.forEach((e) => { if (!e.ready) { e.ready = true; e.failed = true; e.played = true; } });
+          turnAudios.forEach((e) => {
+            if (e.ready) return;
+            e.ready = true; e.failed = true; e.played = true;
+            clearPendingAudio(e.m.id);
+            markTurnUnvoiced(e.m.id, "la voz no respondió");
+          });
           pumpAudioQueue();
         }, 12000);
         // Play whatever audio is already ready; flip to idle if there's nothing
@@ -1212,13 +1467,18 @@
         }
         break;
       }
-      case "tts-ready":
-        if (msg.seg != null) attachAudioToTurn(msg.seg, { url: msg.url, dur: msg.duration });
+      case "tts-part":
+        // One sentence of this bubble's speech. The first starts playback; the
+        // rest queue up behind it while they are still being generated.
+        if (msg.seg != null) attachAudioPart(msg.seg, { url: msg.url, dur: msg.duration });
+        break;
+      case "tts-end":
+        if (msg.seg != null) markAudioComplete(msg.seg);
         break;
       case "tts-failed": {
         // No audio for this segment — skip it in the queue so playback advances.
         const m = (msg.seg != null) ? messages.find((x) => x.id === msg.seg) : null;
-        if (m) queueMarkFailed(m);
+        if (m) { clearPendingAudio(m.id); queueMarkFailed(m); markTurnUnvoiced(m.id, msg.error); }
         break;
       }
       case "error": {

package/src/interfaces/desktop/style.css

@@ -358,6 +358,35 @@ button { font-family: inherit; }
 .wavebar i.cur { transform: scaleY(1.25); }
 .audio .dur { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
 
+/* Waiting for the voice. Same box as the real player so the swap is invisible:
+   the bars keep their shape and only their opacity moves, in a wave that runs
+   left to right — the reply is being spoken into existence, in order. */
+.audio.pending { pointer-events: none; }
+.audio.pending .play {
+  background: none; box-shadow: none;
+  border: 2px solid color-mix(in oklch, var(--ink-3) 30%, transparent);
+  border-top-color: var(--accent);
+  animation: audio-spin .7s linear infinite;
+}
+.audio.pending .wavebar { cursor: default; }
+.audio.pending .wavebar i {
+  animation: audio-wait 1.15s ease-in-out infinite;
+  animation-delay: calc(var(--i) * 28ms);
+}
+.audio.pending .dur { letter-spacing: 1.5px; opacity: .7; }
+@keyframes audio-spin { to { transform: rotate(360deg); } }
+@keyframes audio-wait {
+  0%, 100% { opacity: .28; }
+  45%      { opacity: .9; }
+}
+/* Motion is the whole signal here, so without it say so in the bars instead of
+   leaving a placeholder indistinguishable from a finished, silent player. */
+@media (prefers-reduced-motion: reduce) {
+  .audio.pending .play,
+  .audio.pending .wavebar i { animation: none; }
+  .audio.pending .wavebar i { opacity: .4; }
+}
+
 /* Continued agent messages (no repeated "Roby" header) hug the previous one. */
 .turn.cont { padding-top: 0; }
 .turn.cont .msg-agent { margin-top: 1px; }
@@ -390,6 +419,11 @@ button { font-family: inherit; }
 }
 .chip:hover { background: var(--glass-hairline); color: var(--ink); border-color: transparent; }
 .chip.done  { color: oklch(0.6 0.15 150); }
+/* "Sin voz": a passive marker, not a button — and it stays visible on older
+   turns too, which .turn-actions otherwise hides. */
+.chip.unvoiced { cursor: default; opacity: .75; }
+.chip.unvoiced:hover { background: transparent; color: var(--ink-2); border-color: var(--glass-hairline); }
+.turn-actions:has(.unvoiced) { display: flex; opacity: 1; }
 
 /* system notice (e.g. no mic permission / dead mic) — not a chat message */
 .sys-notice {