@app-vitals/agent-admin 0.6.1 → 0.7.0

package/e2e/chat-thread-page.e2e.ts

@@ -441,4 +441,83 @@ test.describe("GET /admin/chat/:agentId/threads/:threadId — CFB-3.2 mobile dra
     // A 1px rounding tolerance guards against sub-pixel layout.
     expect(composerBottom).toBeLessThanOrEqual(viewportHeight + 1);
   });
+
+  // ─── Voice-first composer: phone mic size + auto-play toggle persistence ──
+
+  test("at 375px the mic and auto-play buttons are >= 56px round thumb targets", async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 812 });
+    await loadChatThreadPage(page, context);
+
+    const sizes = await page.evaluate(() =>
+      ["mic-btn", "autoplay-btn"].map((id) => {
+        const el = document.getElementById(id) as HTMLElement;
+        const rect = el.getBoundingClientRect();
+        return {
+          id,
+          width: rect.width,
+          height: rect.height,
+          radius: getComputedStyle(el).borderRadius,
+        };
+      }),
+    );
+    for (const { id, width, height, radius } of sizes) {
+      expect(width, id).toBeGreaterThanOrEqual(56);
+      expect(height, id).toBeGreaterThanOrEqual(56);
+      expect(radius, id).toBe("50%");
+    }
+  });
+
+  test("at 1280px the mic keeps the 44px desktop row height", async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 1280, height: 900 });
+    await loadChatThreadPage(page, context);
+    const height = await page.evaluate(
+      () =>
+        (document.getElementById("mic-btn") as HTMLElement).getBoundingClientRect()
+          .height,
+    );
+    expect(height).toBe(44);
+  });
+
+  test("the auto-play toggle persists per thread across a reload", async ({
+    page,
+    context,
+  }) => {
+    await loadChatThreadPage(page, context);
+    const toggle = page.locator("#autoplay-btn");
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await expect(toggle).toHaveClass(/chat-autoplay-on/);
+    const stored = await page.evaluate(
+      (threadId) =>
+        window.localStorage.getItem(`shipwright.chat.autoplay.${threadId}`),
+      THREAD_ID,
+    );
+    expect(stored).toBe("1");
+
+    await page.reload();
+    await expect(page.locator("#autoplay-btn")).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await page.locator("#autoplay-btn").click();
+    await expect(page.locator("#autoplay-btn")).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+    const cleared = await page.evaluate(
+      (threadId) =>
+        window.localStorage.getItem(`shipwright.chat.autoplay.${threadId}`),
+      THREAD_ID,
+    );
+    expect(cleared).toBeNull();
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-vitals/agent-admin",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/app-vitals/agent.git",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "0.135.0",
-    "@app-vitals/agent-lib": "0.6.1",
+    "@app-vitals/agent-lib": "0.7.0",
     "@hono/zod-openapi": "^1.0.0",
     "@prisma/adapter-pg": "^7.10.0",
     "@prisma/client": "^7.10.0",

package/src/admin-ui-pages.ts

@@ -2266,6 +2266,16 @@ 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
@@ -2355,6 +2365,21 @@ 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
@@ -2545,6 +2570,12 @@ 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 }
     .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},
@@ -2822,6 +2853,7 @@ 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)};
@@ -2851,6 +2883,102 @@ 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
@@ -2916,16 +3044,18 @@ export function renderChatThreadPage(
     else container.appendChild(node);
   }
 
-  // Insert a server-rendered bubbleHtml string, deduped by id.
+  // Insert a server-rendered bubbleHtml string, deduped by id. Returns the
+  // inserted node on a first insertion, null otherwise (dupe / no html).
   function renderServerBubble(m) {
-    if (!m || !m.id || renderedIds[m.id]) return false;
+    if (!m || !m.id || renderedIds[m.id]) return null;
     renderedIds[m.id] = true;
-    if (!m.bubbleHtml) return false;
+    if (!m.bubbleHtml) return null;
     var tpl = document.createElement('template');
     tpl.innerHTML = m.bubbleHtml.trim();
     var node = tpl.content.firstChild;
-    if (node) insertBeforeLiveStatus(node);
-    return true;
+    if (!node) return null;
+    insertBeforeLiveStatus(node);
+    return node;
   }
 
   // True when the user is within ~80px of the bottom, i.e. hasn't scrolled up
@@ -3047,10 +3177,13 @@ 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++) {
-          renderServerBubble(msgs[i]);
+          var inserted = renderServerBubble(msgs[i]);
+          if (inserted && msgs[i].role === 'assistant') newAssistantNodes.push(inserted);
         }
         wireRetryButtons();
+        maybeAutoplay(newAssistantNodes);
 
         // Determine whether a reply is still pending (last message is an
         // unreplied user message).
@@ -3142,6 +3275,7 @@ 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;
@@ -3251,6 +3385,7 @@ export function renderChatThreadPage(
   }
 
   form.addEventListener('submit', function(e) {
+    unlockAutoplay();
     e.preventDefault();
     var text = input.value.trim();
     var file = fileInput && fileInput.files && fileInput.files[0];
@@ -3468,6 +3603,14 @@ 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"

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

@@ -16,6 +16,7 @@ import {
   type MemberItem,
   type PluginItem,
   renderAddAnotherOrgAction,
+  AUTOPLAY_STORAGE_KEY_PREFIX,
   renderAgentDetailPage,
   renderAgentsPage,
   renderChatMessageBubble,
@@ -4353,3 +4354,211 @@ 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);
+  });
+});