@app-vitals/agent-admin 0.8.0 → 0.9.0

package/src/admin-ui-pages.ts

@@ -2266,16 +2266,6 @@ const chatPageStyles = `
          squeezed to ~160px next to the Attach/Send buttons at narrow widths. */
       .chat-composer-row { flex-wrap:wrap }
       .chat-message-input { flex-basis:100%; }
-      /* Voice-first composer on phones: the mic and the auto-play toggle
-         become 56px round thumb targets (desktop keeps the 44px text-button
-         row), and an active recording pulses a red ring so the state is
-         obvious at arm's length. */
-      .chat-composer-btn--mic, .chat-composer-btn--autoplay { width:56px;height:56px;padding:0;border-radius:50%;font-size:24px;line-height:1 }
-      .chat-composer-btn--mic.chat-mic-recording { animation:chat-mic-pulse 1.2s ease-in-out infinite }
-      @keyframes chat-mic-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(185,28,28,0.45) } 50% { box-shadow:0 0 0 10px rgba(185,28,28,0) } }
-      @media (prefers-reduced-motion: reduce) {
-        .chat-composer-btn--mic.chat-mic-recording { animation:none;box-shadow:0 0 0 4px rgba(185,28,28,0.3) }
-      }
       /* .chat-thread-page combines with .vos-page (specificity 0,2,0), which
          otherwise beats .vos-page's own mobile padding rule (0,1,0) — pin the
          effective mobile padding here. The bottom padding is intentionally
@@ -2365,21 +2355,6 @@ export const STALL_WARN_AFTER_MS = 120_000;
 // import the lib file, so the value is hardcoded here with this reference.
 export const ABSOLUTE_MAX_MS = 3_900_000;
 
-/**
- * localStorage key prefix for the per-thread "auto-play voice replies" switch
- * (`<prefix><threadId>` = "1" when on). Browser-local by design: a phone and a
- * laptop remember the switch separately and no server round-trip or schema
- * field is involved. Exported so tests can assert the inline script carries it.
- */
-export const AUTOPLAY_STORAGE_KEY_PREFIX = "shipwright.chat.autoplay.";
-/**
- * A 10ms silent WAV. iOS Safari only lets `play()` run on a media element that
- * was first started inside a user gesture, so the inline script plays this on
- * a shared Audio element during the mic/toggle/send taps and later reuses that
- * unlocked element for a reply when the bubble's own control refuses.
- */
-const AUTOPLAY_UNLOCK_WAV = "data:audio/wav;base64,UklGRnQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YVAAAACAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgA==";
-
 /**
  * Module-level pure bubble renderer (hoisted out of renderChatThreadPage in
  * CFB-2.3). Returns the exact HTML the server emits on a full page load; the
@@ -2471,9 +2446,25 @@ export function renderChatMessageBubble(
   // filename extension (see attachment-validation.ts's isAudioFilename); the
   // src hits the admin attachment-proxy route, which streams the message's
   // bytes from the chat service with a real audio/* Content-Type.
+  const attachmentUrl = m.attachmentFilename
+    ? `/admin/chat/${encodeURIComponent(agentId)}/threads/${encodeURIComponent(m.threadId)}/messages/${encodeURIComponent(m.id)}/attachment`
+    : "";
+  // Assistant voice replies get a large tap-to-play control (COS-63.1) driven
+  // by a hidden <audio>; user-uploaded clips keep the native controls.
+  const voiceControl = `<div class="chat-voice" data-voice>
+          <button type="button" class="chat-voice-play" aria-label="Play">&#9654;</button>
+          <div class="chat-voice-meta">
+            <div class="chat-voice-progress"><div class="chat-voice-bar"></div></div>
+            <span class="chat-voice-time">0:00 / 0:00</span>
+          </div>
+          <audio hidden preload="metadata" src="${escapeHtml(attachmentUrl)}"></audio>
+          <div class="chat-voice-error" hidden>Could not play this reply <a download href="${escapeHtml(attachmentUrl)}">Download</a></div>
+        </div>`;
   const attachmentMedia = m.attachmentFilename
     ? isAudioFilename(m.attachmentFilename)
-      ? `<audio controls style="display:block;margin-top:8px;max-width:100%" src="${escapeHtml(`/admin/chat/${encodeURIComponent(agentId)}/threads/${encodeURIComponent(m.threadId)}/messages/${encodeURIComponent(m.id)}/attachment`)}"></audio>`
+      ? isAssistant
+        ? voiceControl
+        : `<audio controls style="display:block;margin-top:8px;max-width:100%" src="${escapeHtml(attachmentUrl)}"></audio>`
       : `<div style="display:inline-block;margin-top:8px;padding:3px 8px;background:#e5e7eb;color:#374151;border-radius:6px;font-size:12px">📎 ${escapeHtml(m.attachmentFilename)}</div>`
     : "";
 
@@ -2570,12 +2561,16 @@ const chatThreadStyles = `
     .chat-composer-btn--attach { padding:0 16px }
     .chat-composer-btn--mic { padding:0 16px }
     .chat-composer-btn--mic.chat-mic-recording { background:#fee2e2;color:#b91c1c;border-color:#b91c1c }
-    /* Auto-play voice replies toggle: aria-pressed button next to the mic;
-       the on-state reads green so the phone shows at a glance that replies
-       will speak on their own. */
-    .chat-composer-btn--autoplay { padding:0 16px }
-    .chat-composer-btn--autoplay.chat-autoplay-on { background:#dcfce7;color:#15803d;border-color:#15803d }
-    .chat-autoplay-hint { display:inline-block;margin-top:4px;font-size:12px;color:#6b7280 }
+    /* Voice reply control (COS-63.1): 56px round tap target + progress. */
+    .chat-voice { display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap }
+    .chat-voice-play { width:56px;height:56px;min-width:56px;border-radius:50%;border:0;background:#2563eb;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 }
+    .chat-voice-play:focus-visible { outline:3px solid #93c5fd;outline-offset:2px }
+    .chat-voice-meta { flex:1;min-width:120px }
+    .chat-voice-progress { height:4px;border-radius:2px;background:#d1d5db;overflow:hidden }
+    .chat-voice-bar { height:100%;width:0;background:#2563eb }
+    .chat-voice-time { display:block;margin-top:4px;font-size:12px;color:#6b7280;font-variant-numeric:tabular-nums }
+    .chat-voice-error { flex-basis:100%;font-size:13px;color:#b91c1c }
+    .chat-voice-error[hidden] { display:none }
     .chat-composer-btn--send { padding:0 20px }
     /* Live-progress stall state (CFB-2.3): when progressSeq hasn't advanced for
        STALL_WARN_AFTER_MS the status bubble gains .${STALL_INDICATOR_CLASS},
@@ -2853,7 +2848,6 @@ export function renderChatThreadPage(
   var fileInput = document.getElementById('file-input');
   var fileName = document.getElementById('file-name');
   var micBtn = document.getElementById('mic-btn');
-  var autoplayBtn = document.getElementById('autoplay-btn');
   var container = document.getElementById('messages-container');
   var agentId = ${JSON.stringify(agentId)};
   var threadId = ${JSON.stringify(thread.id)};
@@ -2883,102 +2877,6 @@ export function renderChatThreadPage(
   var STALL_INDICATOR_CLASS = ${JSON.stringify(STALL_INDICATOR_CLASS)};
   var ASSISTANT_ROLE_CLASS = '${CHAT_BUBBLE_CLASS} ${chatBubbleRoleClass("assistant")}';
 
-  // ─── Auto-play voice replies ─────────────────────────────────────────────
-  // Per-thread switch remembered in localStorage (no server state). When on,
-  // the newest assistant audio bubble inserted by a poll is played as soon as
-  // it lands, so a voice-note round trip needs no tap to hear the answer.
-  // Bubbles already in the DOM at load are seeded into renderedIds and can
-  // never qualify, so reopening a thread never replays its backlog.
-  var AUTOPLAY_STORAGE_KEY = ${JSON.stringify(AUTOPLAY_STORAGE_KEY_PREFIX)} + threadId;
-  var AUTOPLAY_UNLOCK_SRC = ${JSON.stringify(AUTOPLAY_UNLOCK_WAV)};
-  var autoplayEnabled = false;
-  try {
-    autoplayEnabled = !!window.localStorage && window.localStorage.getItem(AUTOPLAY_STORAGE_KEY) === '1';
-  } catch (e) {
-    autoplayEnabled = false; // private mode / storage blocked
-  }
-  var unlockAudio = null;
-
-  function setAutoplayUI() {
-    if (!autoplayBtn) return;
-    autoplayBtn.setAttribute('aria-pressed', autoplayEnabled ? 'true' : 'false');
-    autoplayBtn.classList.toggle('chat-autoplay-on', autoplayEnabled);
-    autoplayBtn.textContent = autoplayEnabled ? '🔊' : '🔇';
-    autoplayBtn.setAttribute('title', autoplayEnabled ? 'Auto-play voice replies: on' : 'Auto-play voice replies: off');
-  }
-
-  // Call from inside a user gesture (tap on mic / toggle / send). Plays the
-  // silent clip on one shared Audio element so iOS treats that element as
-  // user-started; playReply() falls back to it when a bubble's own control
-  // is refused. Resets the src every time so a previous reply never replays.
-  function unlockAutoplay() {
-    if (!autoplayEnabled || typeof Audio === 'undefined') return;
-    try {
-      if (!unlockAudio) unlockAudio = new Audio();
-      unlockAudio.src = AUTOPLAY_UNLOCK_SRC;
-      var p = unlockAudio.play();
-      if (p && p.then) p.then(function() { unlockAudio.pause(); }).catch(function() {});
-    } catch (e) {
-      // No audio support — the visible control is still there.
-    }
-  }
-
-  function showAutoplayHint(bubble) {
-    if (!bubble || !bubble.querySelector || bubble.querySelector('.chat-autoplay-hint')) return;
-    var hint = document.createElement('span');
-    hint.className = 'chat-autoplay-hint';
-    hint.textContent = 'Tap ▶ to listen';
-    var audio = bubble.querySelector('audio');
-    if (audio && audio.parentNode) audio.parentNode.insertBefore(hint, audio.nextSibling);
-    else bubble.appendChild(hint);
-  }
-
-  function playReply(audio, bubble) {
-    var attempt;
-    try { attempt = audio.play(); } catch (e) { attempt = Promise.reject(e); }
-    Promise.resolve(attempt).catch(function() {
-      // The bubble's control was refused (iOS: this element never saw a
-      // gesture). Reuse the unlocked element; pause it if the user takes
-      // over with the visible control.
-      if (!unlockAudio) { showAutoplayHint(bubble); return; }
-      try {
-        unlockAudio.src = audio.currentSrc || audio.getAttribute('src');
-        audio.addEventListener('play', function() { unlockAudio.pause(); });
-        Promise.resolve(unlockAudio.play()).catch(function() { showAutoplayHint(bubble); });
-      } catch (e) {
-        showAutoplayHint(bubble);
-      }
-    });
-  }
-
-  // nodes: assistant bubbles first inserted by this poll, in order. Only the
-  // newest one with an <audio> plays, so a burst never stacks overlapping
-  // replies.
-  function maybeAutoplay(nodes) {
-    if (!autoplayEnabled) return;
-    for (var i = nodes.length - 1; i >= 0; i--) {
-      var audio = nodes[i] && nodes[i].querySelector ? nodes[i].querySelector('audio') : null;
-      if (!audio) continue;
-      playReply(audio, nodes[i]);
-      return;
-    }
-  }
-
-  if (autoplayBtn) {
-    setAutoplayUI();
-    autoplayBtn.addEventListener('click', function() {
-      autoplayEnabled = !autoplayEnabled;
-      try {
-        if (autoplayEnabled) window.localStorage.setItem(AUTOPLAY_STORAGE_KEY, '1');
-        else window.localStorage.removeItem(AUTOPLAY_STORAGE_KEY);
-      } catch (e) {
-        // Storage blocked: the switch still works for this page view.
-      }
-      setAutoplayUI();
-      unlockAutoplay();
-    });
-  }
-
   // Poll cadence.
   var POLL_PENDING_MS = 2000; // adaptive fast poll while a reply is pending
   var POLL_IDLE_MS = 10000;   // slow idle poll for agent-initiated messages
@@ -3044,18 +2942,16 @@ export function renderChatThreadPage(
     else container.appendChild(node);
   }
 
-  // Insert a server-rendered bubbleHtml string, deduped by id. Returns the
-  // inserted node on a first insertion, null otherwise (dupe / no html).
+  // Insert a server-rendered bubbleHtml string, deduped by id.
   function renderServerBubble(m) {
-    if (!m || !m.id || renderedIds[m.id]) return null;
+    if (!m || !m.id || renderedIds[m.id]) return false;
     renderedIds[m.id] = true;
-    if (!m.bubbleHtml) return null;
+    if (!m.bubbleHtml) return false;
     var tpl = document.createElement('template');
     tpl.innerHTML = m.bubbleHtml.trim();
     var node = tpl.content.firstChild;
-    if (!node) return null;
-    insertBeforeLiveStatus(node);
-    return node;
+    if (node) insertBeforeLiveStatus(node);
+    return true;
   }
 
   // True when the user is within ~80px of the bottom, i.e. hasn't scrolled up
@@ -3177,13 +3073,10 @@ export function renderChatThreadPage(
         // bubbleHtml, which already includes any Retry button (CFB-2.4) since
         // the server computes retryBody per-message; wire up any new buttons
         // after insertion (see wireRetryButtons below).
-        var newAssistantNodes = [];
         for (var i = 0; i < msgs.length; i++) {
-          var inserted = renderServerBubble(msgs[i]);
-          if (inserted && msgs[i].role === 'assistant') newAssistantNodes.push(inserted);
+          renderServerBubble(msgs[i]);
         }
         wireRetryButtons();
-        maybeAutoplay(newAssistantNodes);
 
         // Determine whether a reply is still pending (last message is an
         // unreplied user message).
@@ -3275,7 +3168,6 @@ export function renderChatThreadPage(
       micBtn.style.display = 'none';
     } else {
       micBtn.addEventListener('click', function() {
-        unlockAutoplay(); // the tap is the gesture iOS needs for later playback
         if (mediaRecorder && mediaRecorder.state === 'recording') {
           mediaRecorder.stop();
           return;
@@ -3385,7 +3277,6 @@ export function renderChatThreadPage(
   }
 
   form.addEventListener('submit', function(e) {
-    unlockAutoplay();
     e.preventDefault();
     var text = input.value.trim();
     var file = fileInput && fileInput.files && fileInput.files[0];
@@ -3435,6 +3326,66 @@ export function renderChatThreadPage(
   // Scroll to bottom on load
   container.scrollTop = container.scrollHeight;
 })();
+</script>`;
+
+  // Voice reply control (COS-63.1). Standalone block: media events don't
+  // bubble, so listen in the capture phase on document — that also covers
+  // bubbles inserted later by polling with no per-node wiring.
+  const voiceScript = `
+<script>
+(function() {
+  function fmt(t) {
+    if (!isFinite(t) || t < 0) t = 0;
+    var m = Math.floor(t / 60), s = Math.floor(t % 60);
+    return m + ':' + (s < 10 ? '0' : '') + s;
+  }
+  function root(el) { return el && el.closest ? el.closest('[data-voice]') : null; }
+  function paint(audio) {
+    var box = root(audio);
+    if (!box) return;
+    var dur = audio.duration, cur = audio.currentTime || 0;
+    box.querySelector('.chat-voice-time').textContent = fmt(cur) + ' / ' + fmt(dur);
+    box.querySelector('.chat-voice-bar').style.width = (isFinite(dur) && dur > 0 ? Math.min(100, cur / dur * 100) : 0) + '%';
+  }
+  function setPlaying(audio, playing) {
+    var box = root(audio);
+    if (!box) return;
+    var btn = box.querySelector('.chat-voice-play');
+    btn.innerHTML = playing ? '&#10074;&#10074;' : '&#9654;';
+    btn.setAttribute('aria-label', playing ? 'Pause' : 'Play');
+  }
+  function showError(audio) {
+    var box = root(audio);
+    if (!box) return;
+    box.querySelector('.chat-voice-play').hidden = true;
+    box.querySelector('.chat-voice-meta').hidden = true;
+    box.querySelector('.chat-voice-error').hidden = false;
+  }
+  ['timeupdate', 'loadedmetadata', 'durationchange'].forEach(function(ev) {
+    document.addEventListener(ev, function(e) { if (e.target.tagName === 'AUDIO') paint(e.target); }, true);
+  });
+  document.addEventListener('play', function(e) { if (e.target.tagName === 'AUDIO') setPlaying(e.target, true); }, true);
+  document.addEventListener('pause', function(e) { if (e.target.tagName === 'AUDIO') setPlaying(e.target, false); }, true);
+  document.addEventListener('ended', function(e) {
+    if (e.target.tagName !== 'AUDIO') return;
+    setPlaying(e.target, false);
+    paint(e.target);
+  }, true);
+  document.addEventListener('error', function(e) { if (e.target.tagName === 'AUDIO' && root(e.target)) showError(e.target); }, true);
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest ? e.target.closest('.chat-voice-play') : null;
+    var box = root(btn);
+    if (!box) return;
+    var audio = box.querySelector('audio');
+    if (!audio) return;
+    if (!audio.paused) { audio.pause(); return; }
+    var others = document.querySelectorAll('[data-voice] audio');
+    for (var i = 0; i < others.length; i++) if (others[i] !== audio) others[i].pause();
+    var p;
+    try { p = audio.play(); } catch (err) { showError(audio); return; }
+    if (p && p.catch) p.catch(function() { if (audio.error) showError(audio); });
+  });
+})();
 </script>`;
 
   // Standalone drawer + keyboard-inset script (CFB-3.2). Deliberately emitted
@@ -3603,14 +3554,6 @@ export function renderChatThreadPage(
               aria-label="Record a voice message"
               title="Record a voice message"
             >🎤</button>
-            <button
-              type="button"
-              id="autoplay-btn"
-              class="btn btn-secondary chat-composer-btn chat-composer-btn--autoplay"
-              aria-label="Auto-play voice replies"
-              aria-pressed="false"
-              title="Auto-play voice replies: off"
-            >🔇</button>
             <button
               type="button"
               id="attach-btn"
@@ -3627,6 +3570,6 @@ export function renderChatThreadPage(
       </div>
     </div>
   </div>`,
-    bodyEnd: `${inlineScript}\n${drawerScript}`,
+    bodyEnd: `${inlineScript}\n${voiceScript}\n${drawerScript}`,
   });
 }

package/src/admin-ui-pages.unit.test.ts

@@ -16,7 +16,6 @@ import {
   type MemberItem,
   type PluginItem,
   renderAddAnotherOrgAction,
-  AUTOPLAY_STORAGE_KEY_PREFIX,
   renderAgentDetailPage,
   renderAgentsPage,
   renderChatMessageBubble,
@@ -3497,6 +3496,88 @@ describe("renderChatMessageBubble — audio attachment vs. filename badge (VM-3.
   });
 });
 
+describe("renderChatMessageBubble — voice reply play control (COS-63.1)", () => {
+  const MSG: ChatMessage = {
+    id: "msg-63",
+    threadId: "thread-63",
+    role: "assistant",
+    body: "hello there",
+    createdAt: "2024-01-01T00:00:00.000Z",
+    claimedBy: null,
+    repliedAt: null,
+    tokens: null,
+    costUsd: null,
+    errorKind: null,
+    attachmentFilename: "1700000000000-response.wav",
+    attachmentSize: 10,
+  };
+  const URL63 =
+    "/admin/chat/agent-1/threads/thread-63/messages/msg-63/attachment";
+
+  test("assistant audio renders a 56px labelled play button, time, progress and a hidden audio", () => {
+    const html = renderChatMessageBubble(MSG, null, "agent-1");
+    expect(html).toContain("chat-voice-play");
+    expect(html).toContain('aria-label="Play"');
+    expect(html).toContain("chat-voice-time");
+    expect(html).toContain("chat-voice-progress");
+    expect(html).toMatch(/<audio[^>]*hidden[^>]*>/);
+    expect(html).not.toMatch(/<audio[^>]*controls/);
+    expect(html).toContain(URL63);
+  });
+
+  test("assistant transcript body is still rendered above the control", () => {
+    const html = renderChatMessageBubble(MSG, null, "agent-1");
+    expect(html.indexOf("hello there")).toBeLessThan(
+      html.indexOf("chat-voice-play"),
+    );
+  });
+
+  test("includes an error fallback with a download link and message", () => {
+    const html = renderChatMessageBubble(MSG, null, "agent-1");
+    expect(html).toContain("Could not play this reply");
+    expect(html).toMatch(
+      new RegExp(
+        `<a[^>]*download[^>]*href="${URL63}"|<a[^>]*href="${URL63}"[^>]*download`,
+      ),
+    );
+  });
+
+  test("user audio keeps native controls and no custom control", () => {
+    const html = renderChatMessageBubble(
+      { ...MSG, role: "user" },
+      null,
+      "agent-1",
+    );
+    expect(html).toMatch(/<audio[^>]*controls/);
+    expect(html).not.toContain("chat-voice-play");
+  });
+
+  test("thread page ships the 56px CSS and delegated click handler", () => {
+    const html = renderChatThreadPage(
+      "agent-1",
+      { id: "thread-63", title: "t" } as never,
+      [MSG],
+      "alice",
+    );
+    expect(html).toMatch(/\.chat-voice-play\s*\{[^}]*width:56px/);
+    expect(html).toContain("chat-voice-play");
+  });
+
+  test("chat stylesheet has no orphaned comment text before .chat-voice", () => {
+    const html = renderChatThreadPage(
+      "agent-1",
+      { id: "thread-63", title: "t" } as never,
+      [MSG],
+      "alice",
+    );
+    // A stray comment tail would swallow the next rule's selector.
+    expect(html).not.toContain("will speak on their own");
+    expect(html).toMatch(
+      /\}\s*\/\*[^*]*\*\/\s*\.chat-voice\s*\{[^}]*display:flex/,
+    );
+  });
+});
+
 describe("renderChatThreadPage — CFB-3.2 mobile drawer", () => {
   const THREAD: ChatThread = {
     id: "thread-abc",
@@ -4321,18 +4402,9 @@ describe("queue-activity links (AEP-3.6)", () => {
 
 describe("renderAgentDetailPage — signed commits toggle", () => {
   const render = (envVars: Record<string, string>) =>
-    renderAgentDetailPage(
-      AGENT,
-      envVars,
-      [],
-      [],
-      [],
-      [],
-      [],
-      USER_NAME,
-      true,
-      { timezone: "UTC" },
-    );
+    renderAgentDetailPage(AGENT, envVars, [], [], [], [], [], USER_NAME, true, {
+      timezone: "UTC",
+    });
 
   test("hidden when the agent has no GH_APP_ID", () => {
     expect(render({ SHIPWRIGHT_SIGNED_COMMITS: "1" })).not.toContain(
@@ -4354,211 +4426,3 @@ describe("renderAgentDetailPage — signed commits toggle", () => {
     expect(checkbox).toContain("checked");
   });
 });
-
-// ─── Auto-play voice replies toggle + phone mic sizing ───────────────────────
-
-describe("renderChatThreadPage — auto-play voice replies toggle", () => {
-  const THREAD: ChatThread = {
-    id: "thread-ap",
-    agentId: "agent-ap",
-    title: "Voice Thread",
-    memberId: null,
-    createdAt: "2024-01-01T00:00:00.000Z",
-    updatedAt: "2024-01-01T00:00:00.000Z",
-  };
-
-  test("renders an aria-pressed auto-play toggle right after the mic button", () => {
-    const html = renderChatThreadPage("agent-ap", THREAD, [], "alice");
-    const micIdx = html.indexOf('id="mic-btn"');
-    const toggleIdx = html.indexOf('id="autoplay-btn"');
-    const attachIdx = html.indexOf('id="attach-btn"');
-    expect(micIdx).toBeGreaterThan(-1);
-    expect(toggleIdx).toBeGreaterThan(micIdx);
-    expect(attachIdx).toBeGreaterThan(toggleIdx);
-    expect(html).toContain('aria-pressed="false"');
-    expect(html).toContain('aria-label="Auto-play voice replies"');
-  });
-
-  test("inline script carries the per-thread localStorage key prefix", () => {
-    const html = renderChatThreadPage("agent-ap", THREAD, [], "alice");
-    expect(html).toContain(JSON.stringify(AUTOPLAY_STORAGE_KEY_PREFIX));
-    expect(html).toContain("maybeAutoplay(newAssistantNodes)");
-    expect(html).toContain("data:audio/wav;base64,");
-  });
-
-  test("phone breakpoint grows the mic and toggle to 56px round buttons", () => {
-    const html = renderChatThreadPage("agent-ap", THREAD, [], "alice");
-    expect(html).toContain(
-      ".chat-composer-btn--mic, .chat-composer-btn--autoplay { width:56px;height:56px;padding:0;border-radius:50%",
-    );
-    expect(html).toContain("@keyframes chat-mic-pulse");
-    // Desktop rule stays the plain 44px text button.
-    expect(html).toContain(".chat-composer-btn--mic { padding:0 16px }");
-  });
-
-  // Runs the inline script against stub DOM/fetch/storage (no globals touched)
-  // and fires the first poll with one new message; returns the audio stub's
-  // play() call count.
-  async function bootAndPoll(opts: {
-    stored: string | null;
-    role: "assistant" | "user";
-    withAudio: boolean;
-    seededInDom?: boolean;
-  }): Promise<{ plays: number; storedKeys: string[] }> {
-    const html = renderChatThreadPage("agent-ap", THREAD, [], "alice");
-    const script = html.match(
-      /<script>\n\(function\(\) \{[\s\S]*?\n<\/script>/,
-    );
-    if (!script) throw new Error("inline chat script not found");
-    const code = script[0].replace(/^<script>/, "").replace(/<\/script>$/, "");
-
-    let plays = 0;
-    const audioStub = {
-      play() {
-        plays++;
-        return Promise.resolve();
-      },
-      addEventListener() {},
-      getAttribute: () => "/attachment",
-      currentSrc: "",
-      parentNode: null,
-    };
-    const makeEl = (): Record<string, unknown> => ({
-      style: {},
-      classList: { add() {}, remove() {}, toggle() {} },
-      addEventListener() {},
-      setAttribute() {},
-      getAttribute: () => null,
-      appendChild() {},
-      insertBefore() {},
-      querySelectorAll: () => [],
-      querySelector: () => null,
-    });
-    const bubbleNode = {
-      ...makeEl(),
-      querySelector: (sel: string) =>
-        sel === "audio" && opts.withAudio ? audioStub : null,
-    };
-    const seeded = opts.seededInDom
-      ? [{ getAttribute: () => "msg-new" }]
-      : [];
-    const container = {
-      ...makeEl(),
-      scrollTop: 0,
-      scrollHeight: 1000,
-      clientHeight: 400,
-      querySelectorAll: () => seeded,
-    };
-    const document = {
-      getElementById: (id: string) =>
-        id === "messages-container"
-          ? container
-          : id === "live-status-bubble"
-            ? null
-            : makeEl(),
-      createElement: (tag: string) =>
-        tag === "template"
-          ? { innerHTML: "", content: { firstChild: bubbleNode } }
-          : makeEl(),
-      querySelectorAll: () => [],
-    };
-    const storage = new Map<string, string>();
-    if (opts.stored !== null)
-      storage.set(`${AUTOPLAY_STORAGE_KEY_PREFIX}thread-ap`, opts.stored);
-    const window = {
-      addEventListener() {},
-      localStorage: {
-        getItem: (k: string) => storage.get(k) ?? null,
-        setItem: (k: string, v: string) => storage.set(k, v),
-        removeItem: (k: string) => storage.delete(k),
-      },
-    };
-    const fetchStub = () =>
-      Promise.resolve({
-        json: () =>
-          Promise.resolve({
-            messages: [
-              {
-                id: "msg-new",
-                role: opts.role,
-                body: "",
-                repliedAt: "2024-01-01T00:00:01.000Z",
-                bubbleHtml: "<div><audio></audio></div>",
-              },
-            ],
-          }),
-      });
-    const timers: Array<() => void> = [];
-    new Function(
-      "document",
-      "fetch",
-      "setTimeout",
-      "clearTimeout",
-      "setInterval",
-      "clearInterval",
-      "window",
-      code,
-    )(
-      document,
-      fetchStub,
-      (fn: () => void) => {
-        timers.push(fn);
-        return timers.length;
-      },
-      () => {},
-      () => 0,
-      () => {},
-      window,
-    );
-    timers[timers.length - 1]();
-    await new Promise((r) => setTimeout(r, 0));
-    await new Promise((r) => setTimeout(r, 0));
-    return { plays, storedKeys: [...storage.keys()] };
-  }
-
-  test("switch on + new assistant audio bubble -> plays it once", async () => {
-    const { plays } = await bootAndPoll({
-      stored: "1",
-      role: "assistant",
-      withAudio: true,
-    });
-    expect(plays).toBe(1);
-  });
-
-  test("switch off -> a new assistant audio bubble is not played", async () => {
-    const { plays } = await bootAndPoll({
-      stored: null,
-      role: "assistant",
-      withAudio: true,
-    });
-    expect(plays).toBe(0);
-  });
-
-  test("switch on but the new bubble is the user's own recording -> not played", async () => {
-    const { plays } = await bootAndPoll({
-      stored: "1",
-      role: "user",
-      withAudio: true,
-    });
-    expect(plays).toBe(0);
-  });
-
-  test("switch on but the message was already in the DOM at load -> never replayed", async () => {
-    const { plays } = await bootAndPoll({
-      stored: "1",
-      role: "assistant",
-      withAudio: true,
-      seededInDom: true,
-    });
-    expect(plays).toBe(0);
-  });
-
-  test("switch on but the assistant bubble has no audio -> no-op", async () => {
-    const { plays } = await bootAndPoll({
-      stored: "1",
-      role: "assistant",
-      withAudio: false,
-    });
-    expect(plays).toBe(0);
-  });
-});