@kuralle-syrinx/browser-client 2.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Kuralle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/dist/assets/index-Dz6IE6vJ.js

@@ -0,0 +1,10 @@
+(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))o(i);new MutationObserver(i=>{for(const r of i)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&o(s)}).observe(document,{childList:!0,subtree:!0});function e(i){const r={};return i.integrity&&(r.integrity=i.integrity),i.referrerPolicy&&(r.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?r.credentials="include":i.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function o(i){if(i.ep)return;i.ep=!0;const r=e(i);fetch(i.href,r)}})();const B=document.getElementById("wsUrl"),V=document.getElementById("status"),X=document.getElementById("statusText"),A=document.getElementById("connectBtn"),Y=document.getElementById("clearBtn"),m=document.getElementById("talkBtn"),Z=document.getElementById("resumeAudioBtn"),C=document.getElementById("micSelect"),_=document.getElementById("inputRate"),W=document.getElementById("outputRate"),O=document.getElementById("timeline"),U=document.getElementById("events"),x=document.getElementById("meter"),w=x.getContext("2d"),tt=location.protocol==="https:"?"wss:":"ws:";B.value=location.host?`${tt}//${location.host}/ws`:"ws://127.0.0.1:4173/ws";const N=new URLSearchParams(location.search).get("ws");N&&(B.value=N);let c=null,v=null,u=null,S=null,f=null,d=null,b=0;const R=new Set,P=[];let g=!1,a=null,et=0,l=new Int16Array(0),p=new Int16Array(0),L=0;const I=new Map,nt=.012,ot=400;window.__syrinxReviewState={sentFrames:0,sentBytes:0,contextIds:[],startedTurns:0,audioContextSampleRateHz:0,targetSampleRateHz:0};function $(t,n){V.className=`status ${t}`,X.textContent=n}function y(t,n=""){const e=document.createElement("div");e.className=`event ${n}`,e.textContent=`${new Date().toLocaleTimeString()} ${t}`,U.prepend(e)}function it(){const t=O.querySelector(".empty");t&&t.remove()}function D(t){if(I.has(t))return I.get(t);it();const n=document.createElement("article");n.className="turn",n.innerHTML=`
+          <div class="turn-head"><span>${t}</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>
+        `,O.prepend(n);const e={id:t,root:n,user:n.querySelector('[data-role="user"]'),tools:n.querySelector('[data-role="tools"]'),agent:n.querySelector('[data-role="agent"]'),state:n.querySelector('[data-role="state"]'),agentText:"",toolText:"",audioEndedAt:0,sttFinalAt:0,firstAgentAt:0,firstAudioAt:0};return I.set(t,e),e}function E(t){t.audioEndedAt&&t.sttFinalAt&&(document.getElementById("latStt").textContent=`${t.sttFinalAt-t.audioEndedAt}ms`),t.sttFinalAt&&t.firstAgentAt&&(document.getElementById("latLlm").textContent=`${t.firstAgentAt-t.sttFinalAt}ms`),t.firstAgentAt&&t.firstAudioAt&&(document.getElementById("latTts").textContent=`${t.firstAudioAt-t.firstAgentAt}ms`),t.audioEndedAt&&t.firstAudioAt&&(document.getElementById("latE2e").textContent=`${t.firstAudioAt-t.audioEndedAt}ms`)}A.addEventListener("click",()=>{if(c&&c.readyState===WebSocket.OPEN){c.close();return}at()});Y.addEventListener("click",()=>{I.clear(),O.innerHTML='<div class="empty">Connect, start listening, then speak naturally.</div>',U.innerHTML=""});m.addEventListener("click",async()=>{if(g){await Q();return}await J()});m.addEventListener("keydown",async t=>{if(t.code==="Space"||t.code==="Enter"){if(t.preventDefault(),g){await Q();return}await J()}});Z.addEventListener("click",async()=>{await H(),y("audio output enabled")});function at(){$("connecting","Connecting"),A.disabled=!0,c=new WebSocket(B.value),c.binaryType="arraybuffer",c.addEventListener("open",()=>{$("connected","Online"),A.disabled=!1,A.textContent="Disconnect",m.disabled=!1,y(`connected ${B.value}`)}),c.addEventListener("close",()=>{$("","Offline"),A.disabled=!1,A.textContent="Connect",m.disabled=!0,y("socket closed")}),c.addEventListener("error",()=>{y("websocket error","error")}),c.addEventListener("message",t=>{if(typeof t.data=="string"){rt(JSON.parse(t.data));return}dt(t.data)})}function rt(t){var o,i;if(t.type==="ready"){y(`session ready ${t.sessionId||""}`.trim()),(o=t.audio)!=null&&o.inputSampleRateHz&&(_.value=String(t.audio.inputSampleRateHz)),(i=t.audio)!=null&&i.outputSampleRateHz&&(W.value=String(t.audio.outputSampleRateHz));return}if(t.type==="error"){y(`${t.component||"error"}: ${t.message}`,"error");return}const n=t.turnId||(a==null?void 0:a.id)||"unknown-turn",e=D(n);t.type==="speech_started"?(e.audioEndedAt=0,e.state.textContent="listening"):t.type==="speech_ended"?((a==null?void 0:a.id)===e.id&&(G(e.id),a=null),e.audioEndedAt||(e.audioEndedAt=Date.now()),e.state.textContent="finalizing",E(e)):t.type==="audio_clear"?(k(),e.state.textContent="interrupted",y(`cleared assistant audio for ${n}`)):t.type==="agent_interrupted"?e.state.textContent="interrupted":t.type==="stt_chunk"?(e.user.textContent=t.transcript||"",e.state.textContent="transcribing"):t.type==="stt_output"?(e.sttFinalAt=Date.now(),e.user.textContent=t.transcript||"",e.state.textContent="agent",E(e)):t.type==="agent_tool_call"?(e.toolText+=`${t.name||"tool"} ${JSON.stringify(t.args||{})}
+`,e.tools.textContent=e.toolText.trim()):t.type==="agent_tool_result"?(e.toolText+=`result ${t.id||""}
+`,e.tools.textContent=e.toolText.trim()):t.type==="agent_chunk"?(e.firstAgentAt||(e.firstAgentAt=Date.now()),e.agentText+=t.text||"",e.agent.textContent=e.agentText,e.state.textContent="speaking",E(e)):t.type==="agent_end"?e.state.textContent="tts":t.type==="tts_chunk"?P.push(t):t.type==="tts_end"&&(e.state.textContent="done",E(e),g&&(a==null?void 0:a.id)===e.id&&(a=null))}async function J(){if(g||!c||c.readyState!==WebSocket.OPEN)return;await H(),k();const t=M(_.value,16e3);a=null,l=new Int16Array(0),p=new Int16Array(0),v=await navigator.mediaDevices.getUserMedia({audio:{deviceId:C.value?{exact:C.value}:void 0,channelCount:1,echoCancellation:!0,noiseSuppression:!0,autoGainControl:!0}}),u=new AudioContext,window.__syrinxReviewState.audioContextSampleRateHz=u.sampleRate,window.__syrinxReviewState.targetSampleRateHz=t,S=u.createMediaStreamSource(v),f=u.createScriptProcessor(2048,1,1),f.onaudioprocess=n=>{const e=n.inputBuffer.getChannelData(0),o=mt(e);L=Math.max(L*.82,o);const i=pt(e,u.sampleRate,t),r=ft(i);if(!a){if(ct(r,t),o<nt)return;k(),a=st(),a.state.textContent="listening",z(p,t,a.id),p=new Int16Array(0);return}z(r,t,a.id)},S.connect(f),f.connect(u.destination),g=!0,m.classList.add("recording"),m.textContent="Stop Listening",y("microphone listening")}async function Q(){g&&(g=!1,f==null||f.disconnect(),S==null||S.disconnect(),v==null||v.getTracks().forEach(t=>t.stop()),await(u==null?void 0:u.close()),f=null,S=null,v=null,u=null,p=new Int16Array(0),a&&(G(a.id),a.audioEndedAt=Date.now(),lt(a.id,M(_.value,16e3),1200),a.state.textContent="finalizing",E(a)),m.classList.remove("recording"),m.textContent="Start Listening")}function st(){return window.__syrinxReviewState.startedTurns+=1,D(`review-${Date.now().toString(36)}`)}function ct(t,n){const e=new Int16Array(p.length+t.length);e.set(p),e.set(t,p.length);const o=Math.round(n*ot/1e3);p=e.length>o?e.slice(e.length-o):e}function z(t,n,e){const o=new Int16Array(l.length+t.length);o.set(l),o.set(t,l.length),l=o;const i=Math.round(n*.02);for(;l.length>=i;)F(e,l.subarray(0,i)),l=l.slice(i)}function G(t){l.length!==0&&(F(t,l),l=new Int16Array(0))}function lt(t,n,e){const o=Math.round(n*.02),i=Math.ceil(e/20),r=new Int16Array(o);for(let s=0;s<i;s+=1)F(t,r)}function F(t,n){if(!c||c.readyState!==WebSocket.OPEN)return;const e=n.byteLength;window.__syrinxReviewState.sentFrames+=1,window.__syrinxReviewState.sentBytes+=e,window.__syrinxReviewState.contextIds.includes(t)||window.__syrinxReviewState.contextIds.push(t),c.send(JSON.stringify({type:"audio",contextId:t,sampleRateHz:M(_.value,16e3),sequence:++et,audio:yt(new Uint8Array(n.buffer,n.byteOffset,n.byteLength))}))}async function dt(t){const n=t instanceof Blob?await t.arrayBuffer():t,e=P.shift(),o=e!=null&&e.turnId?D(e.turnId):a;o&&!o.firstAudioAt&&(o.firstAudioAt=Date.now(),E(o)),await ut(n,(e==null?void 0:e.sampleRateHz)||M(W.value,16e3))}async function H(){(!d||d.state==="closed")&&(d=new AudioContext,b=d.currentTime),d.state==="suspended"&&await d.resume()}async function ut(t,n){await H();const e=new Uint8Array(t),o=new Int16Array(e.buffer,e.byteOffset,Math.floor(e.byteLength/2)),i=d.createBuffer(1,o.length,n),r=i.getChannelData(0);for(let h=0;h<o.length;h+=1)r[h]=o[h]/32768;const s=d.createBufferSource();s.buffer=i,s.connect(d.destination),s.addEventListener("ended",()=>{R.delete(s)}),R.add(s),b=Math.max(b,d.currentTime+.02),s.start(b),b+=i.duration}function k(){for(const t of R)try{t.stop()}catch{}R.clear(),P.length=0,d&&(b=d.currentTime)}function ft(t){const n=new Int16Array(t.length);for(let e=0;e<t.length;e+=1){const o=Math.max(-1,Math.min(1,t[e]));n[e]=o<0?o*32768:o*32767}return n}function pt(t,n,e){if(n===e)return t;const o=Math.max(1,Math.round(t.length*e/n)),i=new Float32Array(o),r=n/e;for(let s=0;s<o;s+=1){const h=s*r,T=Math.floor(h),j=Math.min(t.length-1,T+1),q=h-T;i[s]=t[T]*(1-q)+t[j]*q}return i}function yt(t){let n="";for(let e=0;e<t.length;e+=32768)n+=String.fromCharCode(...t.subarray(e,e+32768));return btoa(n)}function M(t,n){const e=Number.parseInt(t,10);return Number.isFinite(e)&&e>0?e:n}function mt(t){let n=0;for(let e=0;e<t.length;e+=1)n+=t[e]*t[e];return Math.sqrt(n/Math.max(1,t.length))}function K(){const t=x.clientWidth*window.devicePixelRatio,n=x.clientHeight*window.devicePixelRatio;(x.width!==t||x.height!==n)&&(x.width=t,x.height=n),w.clearRect(0,0,t,n),w.fillStyle="#fffefa",w.fillRect(0,0,t,n),w.fillStyle=g?"#b13a2e":"#1f7a4d",w.fillRect(0,0,Math.min(t,t*L*5),n),w.strokeStyle="#aaa291",w.strokeRect(.5,.5,t-1,n-1),L*=.94,requestAnimationFrame(K)}async function gt(){var e;if(!((e=navigator.mediaDevices)!=null&&e.enumerateDevices))return;const n=(await navigator.mediaDevices.enumerateDevices()).filter(o=>o.kind==="audioinput");C.innerHTML='<option value="">Default input</option>';for(const o of n){const i=document.createElement("option");i.value=o.deviceId,i.textContent=o.label||`Input ${C.length}`,C.append(i)}}gt();requestAnimationFrame(K);

package/dist/index.html

@@ -0,0 +1,429 @@
+<!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>
+    <script type="module" crossorigin src="/assets/index-Dz6IE6vJ.js"></script>
+  </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>
+
+  </body>
+</html>