npm - @kuralle-syrinx/browser-client - Versions diffs - 4.4.0 → 4.5.0 - Mend

@kuralle-syrinx/browser-client 4.4.0 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/agent-state.d.ts +35 -0
package/dist/agent-state.d.ts.map +1 -0
package/dist/agent-state.js +76 -0
package/dist/agent-state.js.map +1 -0
package/dist/audio.d.ts +61 -0
package/dist/audio.d.ts.map +1 -0
package/dist/audio.js +276 -0
package/dist/audio.js.map +1 -0
package/dist/browser-opus.d.ts +41 -0
package/dist/browser-opus.d.ts.map +1 -0
package/dist/browser-opus.js +81 -0
package/dist/browser-opus.js.map +1 -0
package/dist/index.d.ts +270 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +744 -0
package/dist/index.js.map +1 -0
package/dist/session-metrics.d.ts +28 -0
package/dist/session-metrics.d.ts.map +1 -0
package/dist/session-metrics.js +60 -0
package/dist/session-metrics.js.map +1 -0
package/dist/session-record.d.ts +112 -0
package/dist/session-record.d.ts.map +1 -0
package/dist/session-record.js +181 -0
package/dist/session-record.js.map +1 -0
package/dist/transport.d.ts +16 -0
package/dist/transport.d.ts.map +1 -0
package/dist/transport.js +3 -0
package/dist/transport.js.map +1 -0
package/dist/turn-recorder.d.ts +56 -0
package/dist/turn-recorder.d.ts.map +1 -0
package/dist/turn-recorder.js +168 -0
package/dist/turn-recorder.js.map +1 -0
package/dist/turn-timeline.d.ts +51 -0
package/dist/turn-timeline.d.ts.map +1 -0
package/dist/turn-timeline.js +92 -0
package/dist/turn-timeline.js.map +1 -0
package/dist/websocket-transport.d.ts +20 -0
package/dist/websocket-transport.d.ts.map +1 -0
package/dist/websocket-transport.js +92 -0
package/dist/websocket-transport.js.map +1 -0
package/package.json +35 -11
package/src/agent-state.test.ts +143 -0
package/src/audio.test.ts +130 -0
package/src/index.test.ts +842 -0
package/src/jitter-buffer.test.ts +275 -0
package/src/session-metrics.test.ts +102 -0
package/src/session-record.test.ts +219 -0
package/src/studio-page.test.ts +69 -0
package/src/transport.test.ts +233 -0
package/src/turn-recorder.test.ts +138 -0
package/src/turn-timeline.test.ts +151 -0
package/index.html +0 -1073

package/index.html DELETED Viewed

@@ -1,1073 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Syrinx University Review Studio</title>
-    <style>
-      :root {
-        color-scheme: light;
-        --paper: #f7f5ef;
-        --panel: #fffdf8;
-        --ink: #171714;
-        --muted: #6c695f;
-        --line: #d9d4c7;
-        --line-strong: #aaa291;
-        --green: #1f7a4d;
-        --green-soft: #e6f1ea;
-        --blue: #1e5b8f;
-        --blue-soft: #e6eef6;
-        --amber: #a05f00;
-        --amber-soft: #f6ecd8;
-        --red: #b13a2e;
-        --red-soft: #f7e4e1;
-        --shadow: 0 18px 50px rgba(31, 29, 24, 0.12);
-      }
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        min-height: 100vh;
-        background: var(--paper);
-        color: var(--ink);
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      }
-      button,
-      input,
-      select {
-        font: inherit;
-      }
-      button {
-        border: 1px solid var(--ink);
-        background: var(--ink);
-        color: #fffdf8;
-        border-radius: 7px;
-        padding: 10px 13px;
-        cursor: pointer;
-        font-weight: 700;
-      }
-      button:hover:not(:disabled) {
-        transform: translateY(-1px);
-      }
-      button:disabled {
-        border-color: var(--line-strong);
-        background: var(--line);
-        color: var(--muted);
-        cursor: not-allowed;
-      }
-      button.secondary {
-        background: transparent;
-        color: var(--ink);
-      }
-      button.recording {
-        border-color: var(--red);
-        background: var(--red);
-      }
-      input,
-      select {
-        width: 100%;
-        border: 1px solid var(--line-strong);
-        background: #fffefa;
-        color: var(--ink);
-        border-radius: 7px;
-        padding: 9px 10px;
-      }
-      label {
-        display: block;
-        margin-bottom: 6px;
-        color: var(--muted);
-        font-size: 12px;
-        font-weight: 800;
-        letter-spacing: 0.05em;
-        text-transform: uppercase;
-      }
-      .shell {
-        display: grid;
-        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
-        min-height: 100vh;
-      }
-      .rail {
-        border-right: 1px solid var(--line);
-        background: #ebe6d9;
-        padding: 22px;
-        overflow: auto;
-      }
-      .brand {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-        margin-bottom: 22px;
-      }
-      .brand h1 {
-        margin: 0;
-        font-size: 19px;
-        line-height: 1.05;
-        letter-spacing: 0;
-      }
-      .status {
-        display: inline-flex;
-        align-items: center;
-        gap: 7px;
-        border: 1px solid var(--line-strong);
-        border-radius: 999px;
-        padding: 6px 9px;
-        background: var(--panel);
-        color: var(--muted);
-        font-size: 12px;
-        font-weight: 800;
-      }
-      .dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 99px;
-        background: var(--line-strong);
-      }
-      .status.connected .dot {
-        background: var(--green);
-      }
-      .status.connecting .dot {
-        background: var(--amber);
-      }
-      .section {
-        border-top: 1px solid var(--line);
-        padding: 18px 0;
-      }
-      .section:first-of-type {
-        border-top: 0;
-        padding-top: 0;
-      }
-      .stack {
-        display: grid;
-        gap: 10px;
-      }
-      .inline {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        gap: 8px;
-        align-items: end;
-      }
-      .button-row {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 8px;
-      }
-      .meter {
-        height: 58px;
-        border: 1px solid var(--line-strong);
-        border-radius: 7px;
-        background: #fffefa;
-        overflow: hidden;
-      }
-      .meter canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-      .kv {
-        display: grid;
-        gap: 6px;
-      }
-      .kv div {
-        display: flex;
-        justify-content: space-between;
-        gap: 16px;
-        border-bottom: 1px solid rgba(170, 162, 145, 0.45);
-        padding-bottom: 6px;
-        color: var(--muted);
-        font-size: 13px;
-      }
-      .kv strong {
-        color: var(--ink);
-        font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
-        font-size: 12px;
-      }
-      .main {
-        display: grid;
-        grid-template-rows: auto minmax(0, 1fr);
-        min-width: 0;
-      }
-      .topbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 18px;
-        border-bottom: 1px solid var(--line);
-        padding: 18px 24px;
-        background: var(--panel);
-      }
-      .topbar h2 {
-        margin: 0;
-        font-size: 17px;
-      }
-      .topbar p {
-        margin: 4px 0 0;
-        color: var(--muted);
-        font-size: 13px;
-      }
-      .content {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
-        gap: 18px;
-        padding: 18px;
-        overflow: hidden;
-      }
-      .timeline,
-      .sidefeed {
-        min-height: 0;
-        overflow: auto;
-      }
-      .timeline {
-        display: grid;
-        align-content: start;
-        gap: 12px;
-      }
-      .turn {
-        border: 1px solid var(--line);
-        border-radius: 8px;
-        background: var(--panel);
-        box-shadow: var(--shadow);
-        overflow: hidden;
-      }
-      .turn-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 10px;
-        border-bottom: 1px solid var(--line);
-        padding: 10px 12px;
-        color: var(--muted);
-        font-size: 12px;
-        font-weight: 800;
-      }
-      .turn-body {
-        display: grid;
-        gap: 10px;
-        padding: 12px;
-      }
-      .bubble {
-        border-left: 4px solid var(--line-strong);
-        border-radius: 5px;
-        padding: 9px 10px;
-        background: #fffefa;
-        line-height: 1.45;
-      }
-      .bubble.user {
-        border-color: var(--blue);
-        background: var(--blue-soft);
-      }
-      .bubble.agent {
-        border-color: var(--green);
-        background: var(--green-soft);
-      }
-      .bubble.tool {
-        border-color: var(--amber);
-        background: var(--amber-soft);
-        font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
-        font-size: 12px;
-        white-space: pre-wrap;
-      }
-      .event {
-        border-bottom: 1px solid var(--line);
-        padding: 10px 0;
-        color: var(--muted);
-        font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
-        font-size: 12px;
-        line-height: 1.45;
-      }
-      .event.error {
-        color: var(--red);
-      }
-      .empty {
-        border: 1px dashed var(--line-strong);
-        border-radius: 8px;
-        padding: 32px;
-        color: var(--muted);
-        background: rgba(255, 253, 248, 0.65);
-        text-align: center;
-      }
-      @media (max-width: 920px) {
-        .shell,
-        .content {
-          grid-template-columns: 1fr;
-        }
-        .rail {
-          border-right: 0;
-          border-bottom: 1px solid var(--line);
-        }
-        .content {
-          overflow: visible;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="shell">
-      <aside class="rail">
-        <div class="brand">
-          <h1>Syrinx University Review</h1>
-          <div id="status" class="status"><span class="dot"></span><span id="statusText">Offline</span></div>
-        </div>
-        <section class="section stack">
-          <div>
-            <label for="wsUrl">WebSocket</label>
-            <input id="wsUrl" autocomplete="off" />
-          </div>
-          <div class="button-row">
-            <button id="connectBtn">Connect</button>
-            <button id="clearBtn" class="secondary">Clear</button>
-          </div>
-        </section>
-        <section class="section stack">
-          <div>
-            <label for="micSelect">Microphone</label>
-            <select id="micSelect"><option value="">Default input</option></select>
-          </div>
-          <button id="talkBtn" disabled>Start Listening</button>
-          <div class="meter"><canvas id="meter"></canvas></div>
-        </section>
-        <section class="section stack">
-          <div class="inline">
-            <div>
-              <label for="inputRate">Input PCM Hz</label>
-              <input id="inputRate" value="16000" inputmode="numeric" />
-            </div>
-            <div>
-              <label for="outputRate">Output PCM Hz</label>
-              <input id="outputRate" value="16000" inputmode="numeric" />
-            </div>
-          </div>
-          <div class="kv">
-            <div><span>Profile</span><strong>interactive</strong></div>
-            <div><span>STT</span><strong>Deepgram</strong></div>
-            <div><span>LLM</span><strong>Gemini via AI SDK</strong></div>
-            <div><span>TTS</span><strong>Cartesia or Gemini</strong></div>
-          </div>
-        </section>
-        <section class="section">
-          <div class="kv">
-            <div><span>STT final</span><strong id="latStt">--</strong></div>
-            <div><span>LLM first text</span><strong id="latLlm">--</strong></div>
-            <div><span>TTS first audio</span><strong id="latTts">--</strong></div>
-            <div><span>Speech to audio</span><strong id="latE2e">--</strong></div>
-          </div>
-        </section>
-      </aside>
-      <main class="main">
-        <header class="topbar">
-          <div>
-            <h2>Live Student Relations Agent</h2>
-            <p>Always-on listening streams PCM16 frames; VAD and endpointing decide turn boundaries.</p>
-          </div>
-          <button id="resumeAudioBtn" class="secondary">Enable Audio</button>
-        </header>
-        <div class="content">
-          <section id="timeline" class="timeline">
-            <div class="empty">Connect, start listening, then speak naturally.</div>
-          </section>
-          <aside id="events" class="sidefeed"></aside>
-        </div>
-      </main>
-    </div>
-    <script type="module">
-      const wsUrl = document.getElementById("wsUrl");
-      const status = document.getElementById("status");
-      const statusText = document.getElementById("statusText");
-      const connectBtn = document.getElementById("connectBtn");
-      const clearBtn = document.getElementById("clearBtn");
-      const talkBtn = document.getElementById("talkBtn");
-      const resumeAudioBtn = document.getElementById("resumeAudioBtn");
-      const micSelect = document.getElementById("micSelect");
-      const inputRate = document.getElementById("inputRate");
-      const outputRate = document.getElementById("outputRate");
-      const timeline = document.getElementById("timeline");
-      const events = document.getElementById("events");
-      const meter = document.getElementById("meter");
-      const meterCtx = meter.getContext("2d");
-      const defaultWsProtocol = location.protocol === "https:" ? "wss:" : "ws:";
-      wsUrl.value = location.host ? `${defaultWsProtocol}//${location.host}/ws` : "ws://127.0.0.1:4173/ws";
-      const requestedWsUrl = new URLSearchParams(location.search).get("ws");
-      if (requestedWsUrl) wsUrl.value = requestedWsUrl;
-      let socket = null;
-      let mediaStream = null;
-      let audioContext = null;
-      let sourceNode = null;
-      let processorNode = null;
-      let outputContext = null;
-      let playbackAt = 0;
-      const outputSources = new Set();
-      const pendingAudioChunks = [];
-      let recording = false;
-      let activeTurn = null;
-      let currentAssistantTurnId = null;
-      let audioSequence = 0;
-      let pcmQueue = new Int16Array(0);
-      let preSpeechQueue = new Int16Array(0);
-      let localSpeechActive = false;
-      let meterPeak = 0;
-      const turns = new Map();
-      const startRmsThreshold = 0.012;
-      const preSpeechMs = 400;
-      window.__syrinxReviewState = {
-        sentFrames: 0,
-        sentEnvelopeFrames: 0,
-        sentBytes: 0,
-        contextIds: [],
-        startedTurns: 0,
-        audioContextSampleRateHz: 0,
-        targetSampleRateHz: 0,
-        receivedAssistantAudioFrames: 0,
-        receivedAssistantEnvelopeFrames: 0,
-        receivedAssistantBytes: 0,
-        assistantSampleRateHz: 0,
-        audioClearEvents: 0,
-        localSpeechStartEvents: 0,
-        clientInterruptsSent: 0,
-        localSpeechStartFlushAtMs: 0,
-        serverAudioClearAtMs: 0,
-        audioPlaybackErrors: 0,
-        metricsEvents: 0,
-        lastMetrics: null,
-        minPlaybackLeadMs: null,
-      };
-      function setStatus(kind, text) {
-        status.className = `status ${kind}`;
-        statusText.textContent = text;
-      }
-      function addEvent(text, kind = "") {
-        const row = document.createElement("div");
-        row.className = `event ${kind}`;
-        row.textContent = `${new Date().toLocaleTimeString()} ${text}`;
-        events.prepend(row);
-      }
-      function ensureTimelineReady() {
-        const empty = timeline.querySelector(".empty");
-        if (empty) empty.remove();
-      }
-      function ensureTurn(turnId) {
-        if (turns.has(turnId)) return turns.get(turnId);
-        ensureTimelineReady();
-        const root = document.createElement("article");
-        root.className = "turn";
-        root.innerHTML = `
-          <div class="turn-head"><span>${turnId}</span><span data-role="state">listening</span></div>
-          <div class="turn-body">
-            <div class="bubble user" data-role="user">Waiting for transcript...</div>
-            <div class="bubble tool" data-role="tools">No tool calls yet.</div>
-            <div class="bubble agent" data-role="agent">Waiting for assistant...</div>
-          </div>
-        `;
-        timeline.prepend(root);
-        const turn = {
-          id: turnId,
-          root,
-          user: root.querySelector('[data-role="user"]'),
-          tools: root.querySelector('[data-role="tools"]'),
-          agent: root.querySelector('[data-role="agent"]'),
-          state: root.querySelector('[data-role="state"]'),
-          agentText: "",
-          toolText: "",
-          audioEndedAt: 0,
-          sttFinalAt: 0,
-          firstAgentAt: 0,
-          firstAudioAt: 0,
-        };
-        turns.set(turnId, turn);
-        return turn;
-      }
-      function updateLatency(turn) {
-        if (turn.audioEndedAt && turn.sttFinalAt) {
-          document.getElementById("latStt").textContent = `${turn.sttFinalAt - turn.audioEndedAt}ms`;
-        }
-        if (turn.sttFinalAt && turn.firstAgentAt) {
-          document.getElementById("latLlm").textContent = `${turn.firstAgentAt - turn.sttFinalAt}ms`;
-        }
-        if (turn.firstAgentAt && turn.firstAudioAt) {
-          document.getElementById("latTts").textContent = `${turn.firstAudioAt - turn.firstAgentAt}ms`;
-        }
-        if (turn.audioEndedAt && turn.firstAudioAt) {
-          document.getElementById("latE2e").textContent = `${turn.firstAudioAt - turn.audioEndedAt}ms`;
-        }
-      }
-      connectBtn.addEventListener("click", () => {
-        if (socket && socket.readyState === WebSocket.OPEN) {
-          socket.close();
-          return;
-        }
-        connect();
-      });
-      clearBtn.addEventListener("click", () => {
-        turns.clear();
-        timeline.innerHTML = '<div class="empty">Connect, start listening, then speak naturally.</div>';
-        events.innerHTML = "";
-      });
-      talkBtn.addEventListener("click", async () => {
-        if (recording) {
-          await stopRecording();
-          return;
-        }
-        await startRecording();
-      });
-      talkBtn.addEventListener("keydown", async (event) => {
-        if (event.code === "Space" || event.code === "Enter") {
-          event.preventDefault();
-          if (recording) {
-            await stopRecording();
-            return;
-          }
-          await startRecording();
-        }
-      });
-      resumeAudioBtn.addEventListener("click", async () => {
-        await ensureOutputContext();
-        addEvent("audio output enabled");
-      });
-      function connect() {
-        setStatus("connecting", "Connecting");
-        connectBtn.disabled = true;
-        socket = new WebSocket(wsUrl.value);
-        socket.binaryType = "arraybuffer";
-        socket.addEventListener("open", () => {
-          setStatus("connected", "Online");
-          connectBtn.disabled = false;
-          connectBtn.textContent = "Disconnect";
-          talkBtn.disabled = false;
-          // This page decodes PCM16 downlink only (no Opus decoder), so declare it —
-          // otherwise the server streams Opus envelopes this decoder rejects.
-          socket.send(JSON.stringify({ type: "codec_capability", downlinkEncoding: "pcm_s16le" }));
-          addEvent(`connected ${wsUrl.value}`);
-        });
-        socket.addEventListener("close", () => {
-          setStatus("", "Offline");
-          connectBtn.disabled = false;
-          connectBtn.textContent = "Connect";
-          talkBtn.disabled = true;
-          addEvent("socket closed");
-        });
-        socket.addEventListener("error", () => {
-          addEvent("websocket error", "error");
-        });
-        socket.addEventListener("message", (event) => {
-          if (typeof event.data === "string") {
-            handleJson(JSON.parse(event.data));
-            return;
-          }
-          void handleAudio(event.data);
-        });
-      }
-      function handleJson(message) {
-        if (message.type === "ready") {
-          addEvent(`session ready ${message.sessionId || ""}`.trim());
-          if (message.audio?.inputSampleRateHz) inputRate.value = String(message.audio.inputSampleRateHz);
-          if (message.audio?.outputSampleRateHz) outputRate.value = String(message.audio.outputSampleRateHz);
-          return;
-        }
-        if (message.type === "error") {
-          addEvent(`${message.component || "error"}: ${message.message}`, "error");
-          return;
-        }
-        const turnId = message.turnId || activeTurn?.id || "unknown-turn";
-        const turn = ensureTurn(turnId);
-        if (message.type === "speech_started") {
-          turn.audioEndedAt = 0;
-          turn.state.textContent = "listening";
-        } else if (message.type === "speech_ended") {
-          if (activeTurn?.id === turn.id) {
-            drainPcmQueue(turn.id);
-          }
-          if (!turn.audioEndedAt) turn.audioEndedAt = Date.now();
-          turn.state.textContent = "finalizing";
-          updateLatency(turn);
-        } else if (message.type === "audio_clear") {
-          window.__syrinxReviewState.audioClearEvents += 1;
-          if (!window.__syrinxReviewState.serverAudioClearAtMs) {
-            window.__syrinxReviewState.serverAudioClearAtMs = performance.now();
-          }
-          flushOutputAudio();
-          turn.state.textContent = "interrupted";
-          addEvent(`cleared assistant audio for ${turnId}`);
-        } else if (message.type === "agent_interrupted") {
-          turn.state.textContent = "interrupted";
-        } else if (message.type === "stt_chunk") {
-          turn.user.textContent = message.transcript || "";
-          turn.state.textContent = "transcribing";
-        } else if (message.type === "stt_output") {
-          turn.sttFinalAt = Date.now();
-          turn.user.textContent = message.transcript || "";
-          turn.state.textContent = "agent";
-          updateLatency(turn);
-        } else if (message.type === "turn_complete") {
-          if (activeTurn?.id === turn.id) activeTurn = null;
-          if (message.transcript) turn.user.textContent = message.transcript;
-          turn.state.textContent = "agent";
-        } else if (message.type === "agent_tool_call") {
-          turn.toolText += `${message.name || "tool"} ${JSON.stringify(message.args || {})}\n`;
-          turn.tools.textContent = turn.toolText.trim();
-        } else if (message.type === "agent_tool_result") {
-          turn.toolText += `result ${message.id || ""}\n`;
-          turn.tools.textContent = turn.toolText.trim();
-        } else if (message.type === "agent_chunk") {
-          currentAssistantTurnId = turnId;
-          if (!turn.firstAgentAt) turn.firstAgentAt = Date.now();
-          turn.agentText += message.text || "";
-          turn.agent.textContent = turn.agentText;
-          turn.state.textContent = "speaking";
-          updateLatency(turn);
-        } else if (message.type === "agent_end") {
-          turn.state.textContent = "tts";
-        } else if (message.type === "tts_chunk") {
-          currentAssistantTurnId = turnId;
-          pendingAudioChunks.push(message);
-        } else if (message.type === "tts_end") {
-          turn.state.textContent = "done";
-          updateLatency(turn);
-          if (recording && activeTurn?.id === turn.id) activeTurn = null;
-        } else if (message.type === "metrics") {
-          window.__syrinxReviewState.metricsEvents += 1;
-          window.__syrinxReviewState.lastMetrics = message;
-        }
-      }
-      async function startRecording() {
-        if (recording || !socket || socket.readyState !== WebSocket.OPEN) return;
-        await ensureOutputContext();
-        flushOutputAudio();
-        const targetRate = readSampleRate(inputRate.value, 16000);
-        activeTurn = null;
-        pcmQueue = new Int16Array(0);
-        preSpeechQueue = new Int16Array(0);
-        localSpeechActive = false;
-        mediaStream = await navigator.mediaDevices.getUserMedia({
-          audio: {
-            deviceId: micSelect.value ? { exact: micSelect.value } : undefined,
-            channelCount: 1,
-            echoCancellation: true,
-            noiseSuppression: true,
-            autoGainControl: true,
-          },
-        });
-        audioContext = new AudioContext();
-        window.__syrinxReviewState.audioContextSampleRateHz = audioContext.sampleRate;
-        window.__syrinxReviewState.targetSampleRateHz = targetRate;
-        sourceNode = audioContext.createMediaStreamSource(mediaStream);
-        processorNode = audioContext.createScriptProcessor(2048, 1, 1);
-        processorNode.onaudioprocess = (audioEvent) => {
-          const input = audioEvent.inputBuffer.getChannelData(0);
-          const inputRms = rms(input);
-          meterPeak = Math.max(meterPeak * 0.82, inputRms);
-          const resampled = resampleFloat32(input, audioContext.sampleRate, targetRate);
-          const pcm = floatToPcm16(resampled);
-          const speechNow = inputRms >= startRmsThreshold;
-          if (speechNow && !localSpeechActive) {
-            localSpeechActive = true;
-            handleLocalSpeechStart("local_vad_speech_start");
-          } else if (!speechNow) {
-            localSpeechActive = false;
-          }
-          if (!activeTurn) {
-            appendPreSpeech(pcm, targetRate);
-            if (!speechNow) return;
-            activeTurn = createCaptureTurn();
-            activeTurn.state.textContent = "listening";
-            queuePcm(preSpeechQueue, targetRate, activeTurn.id);
-            preSpeechQueue = new Int16Array(0);
-            return;
-          }
-          queuePcm(pcm, targetRate, activeTurn.id);
-        };
-        sourceNode.connect(processorNode);
-        processorNode.connect(audioContext.destination);
-        recording = true;
-        talkBtn.classList.add("recording");
-        talkBtn.textContent = "Stop Listening";
-        addEvent("microphone listening");
-      }
-      async function stopRecording() {
-        if (!recording) return;
-        recording = false;
-        processorNode?.disconnect();
-        sourceNode?.disconnect();
-        mediaStream?.getTracks().forEach((track) => track.stop());
-        await audioContext?.close();
-        processorNode = null;
-        sourceNode = null;
-        mediaStream = null;
-        audioContext = null;
-        preSpeechQueue = new Int16Array(0);
-        localSpeechActive = false;
-        if (activeTurn) {
-          drainPcmQueue(activeTurn.id);
-          activeTurn.audioEndedAt = Date.now();
-          sendSilence(activeTurn.id, readSampleRate(inputRate.value, 16000), 1200);
-          activeTurn.state.textContent = "finalizing";
-          updateLatency(activeTurn);
-        }
-        talkBtn.classList.remove("recording");
-        talkBtn.textContent = "Start Listening";
-      }
-      function handleLocalSpeechStart(reason = "local_vad_speech_start") {
-        if (!isAssistantPlayoutActive()) return;
-        window.__syrinxReviewState.localSpeechStartEvents += 1;
-        flushOutputAudio();
-        if (!window.__syrinxReviewState.localSpeechStartFlushAtMs) {
-          window.__syrinxReviewState.localSpeechStartFlushAtMs = performance.now();
-        }
-        sendClientInterrupt(reason);
-      }
-      function isAssistantPlayoutActive() {
-        return outputSources.size > 0 || pendingAudioChunks.length > 0;
-      }
-      function sendClientInterrupt(reason) {
-        if (!socket || socket.readyState !== WebSocket.OPEN) return;
-        window.__syrinxReviewState.clientInterruptsSent += 1;
-        socket.send(JSON.stringify({
-          type: "client_interrupt",
-          assistantContextId: currentAssistantTurnId || undefined,
-          reason,
-        }));
-      }
-      function createCaptureTurn() {
-        window.__syrinxReviewState.startedTurns += 1;
-        return ensureTurn(`review-${Date.now().toString(36)}`);
-      }
-      function appendPreSpeech(samples, sampleRate) {
-        const next = new Int16Array(preSpeechQueue.length + samples.length);
-        next.set(preSpeechQueue);
-        next.set(samples, preSpeechQueue.length);
-        const maxSamples = Math.round(sampleRate * preSpeechMs / 1000);
-        preSpeechQueue = next.length > maxSamples ? next.slice(next.length - maxSamples) : next;
-      }
-      function queuePcm(samples, sampleRate, turnId) {
-        const next = new Int16Array(pcmQueue.length + samples.length);
-        next.set(pcmQueue);
-        next.set(samples, pcmQueue.length);
-        pcmQueue = next;
-        const frameSamples = Math.round(sampleRate * 0.02);
-        while (pcmQueue.length >= frameSamples) {
-          sendAudioFrame(turnId, pcmQueue.subarray(0, frameSamples));
-          pcmQueue = pcmQueue.slice(frameSamples);
-        }
-      }
-      function drainPcmQueue(turnId) {
-        if (pcmQueue.length === 0) return;
-        sendAudioFrame(turnId, pcmQueue);
-        pcmQueue = new Int16Array(0);
-      }
-      function sendSilence(turnId, sampleRate, durationMs) {
-        const frameSamples = Math.round(sampleRate * 0.02);
-        const frames = Math.ceil(durationMs / 20);
-        const silence = new Int16Array(frameSamples);
-        for (let i = 0; i < frames; i += 1) sendAudioFrame(turnId, silence);
-      }
-      function sendAudioFrame(turnId, frame) {
-        if (!socket || socket.readyState !== WebSocket.OPEN) return;
-        const byteLength = frame.byteLength;
-        window.__syrinxReviewState.sentFrames += 1;
-        window.__syrinxReviewState.sentEnvelopeFrames += 1;
-        window.__syrinxReviewState.sentBytes += byteLength;
-        if (!window.__syrinxReviewState.contextIds.includes(turnId)) {
-          window.__syrinxReviewState.contextIds.push(turnId);
-        }
-        socket.send(encodeAudioEnvelope({
-          type: "audio",
-          contextId: turnId,
-          sampleRateHz: readSampleRate(inputRate.value, 16000),
-          sequence: ++audioSequence,
-          encoding: "pcm_s16le",
-          channels: 1,
-          byteLength,
-          durationMs: Math.round((frame.length / readSampleRate(inputRate.value, 16000)) * 1000),
-        }, new Uint8Array(frame.buffer, frame.byteOffset, frame.byteLength)));
-      }
-      function encodeAudioEnvelope(metadata, audioBytes) {
-        const magic = new Uint8Array([83, 89, 82, 88, 65, 49, 10]);
-        const header = new TextEncoder().encode(JSON.stringify(metadata));
-        const output = new Uint8Array(magic.byteLength + 4 + header.byteLength + audioBytes.byteLength);
-        output.set(magic, 0);
-        new DataView(output.buffer).setUint32(magic.byteLength, header.byteLength, true);
-        output.set(header, magic.byteLength + 4);
-        output.set(audioBytes, magic.byteLength + 4 + header.byteLength);
-        return output;
-      }
-      async function handleAudio(data) {
-        try {
-          const arrayBuffer = data instanceof Blob ? await data.arrayBuffer() : data;
-          const decoded = decodeAssistantAudio(arrayBuffer);
-          const chunk = pendingAudioChunks.shift();
-          const sampleRate = decoded.metadata?.sampleRateHz || chunk?.sampleRateHz || readSampleRate(outputRate.value, 16000);
-          const turnId = decoded.metadata?.contextId || chunk?.turnId;
-          if (turnId) currentAssistantTurnId = turnId;
-          const turn = turnId ? ensureTurn(turnId) : activeTurn;
-          window.__syrinxReviewState.receivedAssistantAudioFrames += 1;
-          window.__syrinxReviewState.receivedAssistantBytes += decoded.audio.byteLength;
-          window.__syrinxReviewState.assistantSampleRateHz = sampleRate;
-          if (decoded.metadata) window.__syrinxReviewState.receivedAssistantEnvelopeFrames += 1;
-          if (turn && !turn.firstAudioAt) {
-            turn.firstAudioAt = Date.now();
-            updateLatency(turn);
-          }
-          await playPcm16(decoded.audio, sampleRate);
-        } catch (err) {
-          window.__syrinxReviewState.audioPlaybackErrors += 1;
-          addEvent(`assistant audio failed: ${err instanceof Error ? err.message : String(err)}`, "error");
-        }
-      }
-      function decodeAssistantAudio(arrayBuffer) {
-        const bytes = new Uint8Array(arrayBuffer);
-        const magic = [83, 89, 82, 88, 65, 49, 10];
-        if (!hasPrefix(bytes, magic)) return { audio: arrayBuffer, metadata: null };
-        if (bytes.byteLength < magic.length + 4) throw new Error("truncated Syrinx audio envelope");
-        const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-        const headerLength = view.getUint32(magic.length, true);
-        const headerStart = magic.length + 4;
-        const headerEnd = headerStart + headerLength;
-        if (headerLength <= 0 || headerEnd > bytes.byteLength) throw new Error("invalid Syrinx audio envelope");
-        const metadata = JSON.parse(new TextDecoder().decode(bytes.subarray(headerStart, headerEnd)));
-        const audioBytes = bytes.subarray(headerEnd);
-        if (metadata.type !== "audio") throw new Error("Syrinx audio envelope type must be audio");
-        if (!Number.isInteger(metadata.sampleRateHz) || metadata.sampleRateHz <= 0) {
-          throw new Error("Syrinx audio envelope sampleRateHz must be a positive integer");
-        }
-        // This page decodes pcm_s16le only (no Opus decoder). Reject other encodings with a
-        // clear message instead of letting the PCM16 invariants below fail cryptically — the
-        // pcm_s16le codec_capability we send on connect should prevent this from happening.
-        if (metadata.encoding && metadata.encoding !== "pcm_s16le") {
-          throw new Error(`Syrinx studio decodes pcm_s16le only; server sent ${metadata.encoding} downlink (codec negotiation failed)`);
-        }
-        if (audioBytes.byteLength % 2 !== 0) {
-          throw new Error("Syrinx audio envelope PCM16 payload must contain an even number of bytes");
-        }
-        if (typeof metadata.byteLength === "number" && metadata.byteLength !== audioBytes.byteLength) {
-          throw new Error("Syrinx audio envelope byteLength mismatch");
-        }
-        if (typeof metadata.durationMs === "number") {
-          const expectedDurationMs = Math.round((audioBytes.byteLength / 2 / metadata.sampleRateHz) * 1000);
-          if (Math.abs(metadata.durationMs - expectedDurationMs) > 1) {
-            throw new Error("Syrinx audio envelope durationMs mismatch");
-          }
-        }
-        return {
-          audio: audioBytes.buffer.slice(audioBytes.byteOffset, audioBytes.byteOffset + audioBytes.byteLength),
-          metadata,
-        };
-      }
-      function hasPrefix(bytes, prefix) {
-        if (bytes.byteLength < prefix.length) return false;
-        for (let i = 0; i < prefix.length; i += 1) {
-          if (bytes[i] !== prefix[i]) return false;
-        }
-        return true;
-      }
-      async function ensureOutputContext() {
-        if (!outputContext || outputContext.state === "closed") {
-          outputContext = new AudioContext();
-          playbackAt = outputContext.currentTime;
-        }
-        if (outputContext.state === "suspended") await outputContext.resume();
-      }
-      async function playPcm16(arrayBuffer, sampleRate) {
-        await ensureOutputContext();
-        const bytes = new Uint8Array(arrayBuffer);
-        const samples = new Int16Array(bytes.buffer, bytes.byteOffset, Math.floor(bytes.byteLength / 2));
-        const buffer = outputContext.createBuffer(1, samples.length, sampleRate);
-        const channel = buffer.getChannelData(0);
-        for (let i = 0; i < samples.length; i += 1) channel[i] = samples[i] / 32768;
-        const source = outputContext.createBufferSource();
-        source.buffer = buffer;
-        source.connect(outputContext.destination);
-        source.addEventListener("ended", () => {
-          outputSources.delete(source);
-        });
-        outputSources.add(source);
-        playbackAt = Math.max(playbackAt, outputContext.currentTime + 0.02);
-        const leadMs = (playbackAt - outputContext.currentTime) * 1000;
-        window.__syrinxReviewState.minPlaybackLeadMs = Math.min(
-          window.__syrinxReviewState.minPlaybackLeadMs ?? leadMs,
-          leadMs,
-        );
-        source.start(playbackAt);
-        playbackAt += buffer.duration;
-      }
-      function flushOutputAudio() {
-        for (const source of outputSources) {
-          try {
-            source.stop();
-          } catch {
-            // Already stopped.
-          }
-        }
-        outputSources.clear();
-        pendingAudioChunks.length = 0;
-        if (outputContext) playbackAt = outputContext.currentTime;
-      }
-      window.__syrinxReviewTriggerLocalSpeechStart = () => {
-        handleLocalSpeechStart("local_vad_speech_start");
-      };
-      window.__syrinxReviewInjectPcmFrame = () => {
-        if (!activeTurn) {
-          activeTurn = createCaptureTurn();
-          activeTurn.state.textContent = "listening";
-        }
-        const frame = new Int16Array(Math.round(readSampleRate(inputRate.value, 16000) * 0.02));
-        frame.fill(1200);
-        sendAudioFrame(activeTurn.id, frame);
-      };
-      function floatToPcm16(samples) {
-        const pcm = new Int16Array(samples.length);
-        for (let i = 0; i < samples.length; i += 1) {
-          const clamped = Math.max(-1, Math.min(1, samples[i]));
-          pcm[i] = clamped < 0 ? clamped * 32768 : clamped * 32767;
-        }
-        return pcm;
-      }
-      function resampleFloat32(input, fromRate, toRate) {
-        if (fromRate === toRate) return input;
-        const outLength = Math.max(1, Math.round((input.length * toRate) / fromRate));
-        const output = new Float32Array(outLength);
-        const ratio = fromRate / toRate;
-        for (let i = 0; i < outLength; i += 1) {
-          const src = i * ratio;
-          const lo = Math.floor(src);
-          const hi = Math.min(input.length - 1, lo + 1);
-          const frac = src - lo;
-          output[i] = input[lo] * (1 - frac) + input[hi] * frac;
-        }
-        return output;
-      }
-      function readSampleRate(value, fallback) {
-        const parsed = Number.parseInt(value, 10);
-        return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
-      }
-      function rms(samples) {
-        let sum = 0;
-        for (let i = 0; i < samples.length; i += 1) sum += samples[i] * samples[i];
-        return Math.sqrt(sum / Math.max(1, samples.length));
-      }
-      function drawMeter() {
-        const width = meter.clientWidth * window.devicePixelRatio;
-        const height = meter.clientHeight * window.devicePixelRatio;
-        if (meter.width !== width || meter.height !== height) {
-          meter.width = width;
-          meter.height = height;
-        }
-        meterCtx.clearRect(0, 0, width, height);
-        meterCtx.fillStyle = "#fffefa";
-        meterCtx.fillRect(0, 0, width, height);
-        meterCtx.fillStyle = recording ? "#b13a2e" : "#1f7a4d";
-        meterCtx.fillRect(0, 0, Math.min(width, width * meterPeak * 5), height);
-        meterCtx.strokeStyle = "#aaa291";
-        meterCtx.strokeRect(0.5, 0.5, width - 1, height - 1);
-        meterPeak *= 0.94;
-        requestAnimationFrame(drawMeter);
-      }
-      async function populateMics() {
-        if (!navigator.mediaDevices?.enumerateDevices) return;
-        const devices = await navigator.mediaDevices.enumerateDevices();
-        const inputs = devices.filter((device) => device.kind === "audioinput");
-        micSelect.innerHTML = '<option value="">Default input</option>';
-        for (const device of inputs) {
-          const option = document.createElement("option");
-          option.value = device.deviceId;
-          option.textContent = device.label || `Input ${micSelect.length}`;
-          micSelect.append(option);
-        }
-      }
-      void populateMics();
-      requestAnimationFrame(drawMeter);
-    </script>
-  </body>
-</html>