@app-vitals/agent-admin 0.8.0 → 0.9.1

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
@@ -3163,8 +3059,15 @@ export function renderChatThreadPage(
   }
 
   function poll() {
-    fetch(messagesJsonUrl)
-      .then(function(r) { return r.json(); })
+    fetch(messagesJsonUrl, { headers: { 'Accept': 'application/json' } })
+      .then(function(r) {
+        if (r.status === 401) {
+          stopPolling();
+          window.location.href = '/admin/login?returnTo=' + encodeURIComponent(location.pathname + location.search);
+          return { messages: [] };
+        }
+        return r.json();
+      })
       .then(function(data) {
         var msgs = data.messages || [];
 
@@ -3177,13 +3080,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 +3175,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;
@@ -3354,8 +3253,14 @@ export function renderChatThreadPage(
     // POST multipart to the upload endpoint
     fetch(uploadUrl, {
       method: 'POST',
+      headers: { 'Accept': 'application/json' },
       body: fd
     }).then(function(r) {
+      if (r.status === 401) {
+        stopAll();
+        window.location.href = '/admin/login?returnTo=' + encodeURIComponent(location.pathname + location.search);
+        return;
+      }
       if (!r.ok) {
         return r.json().then(function(data) {
           stopAll();
@@ -3385,7 +3290,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 +3339,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 +3567,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 +3583,6 @@ export function renderChatThreadPage(
       </div>
     </div>
   </div>`,
-    bodyEnd: `${inlineScript}\n${drawerScript}`,
+    bodyEnd: `${inlineScript}\n${voiceScript}\n${drawerScript}`,
   });
 }