feat: minimal voice conversation app on top of HF speech-to-speech (WebRTC)

Single-page static app that opens a WebRTC voice session against a
self-hosted speech-to-speech load balancer. POSTs `<lb>/session`,
rewrites the returned `connect_url` from `wss://` to `https://`, and
POSTs an SDP offer with `Content-Type: application/sdp`. Audio
streams over the media tracks; events on the `oai-events` data channel
using the OpenAI Realtime JSON protocol.

- vanilla JS + JSDoc, no build step, no node_modules, no proxy
- 9 Qwen3-TTS voices (Aiden, Ryan, Dylan, Eric, Ono_Anna, Serena, Sohee, Uncle_Fu, Vivian)
- forked from `reachy_mini_minimal_conversation`, stripped of all
robot-specific bits (SDK, head wobbler, antennas, move player,
robot picker, OAuth HF, transport pill)

Backend requirement: the compute serving `<lb>` must run the
`feat/webrtc-transport` branch of huggingface/speech-to-speech, which
defines `POST /v1/realtime` with `application/sdp` (lines 360-452 of
`websocket_router.py`). On `main` the same path is WS-only and replies
404 to the SDP POST.

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+*.log
+.env
+.env.local
+.env.*.local
+.idea
+.vscode/*
+!.vscode/extensions.json
+node_modules

README.md

@@ -1,10 +1,95 @@
 ---
-title: Minimal Conversation App S2s Backend
-emoji: 🔥
-colorFrom: blue
-colorTo: yellow
+title: Minimal Conversation (S2S backend)
+emoji: 🎙️
+colorFrom: indigo
+colorTo: purple
 sdk: static
 pinned: false
+short_description: Voice chat over WebRTC against a HF speech-to-speech
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Minimal Conversation App (S2S backend)
+
+Tiny browser app that opens a **WebRTC** voice session with a self-hosted Hugging Face
+[speech-to-speech](https://github.com/huggingface/speech-to-speech) backend. No OpenAI key,
+no robot, no OAuth, no proxy. The browser talks **directly** to the backend.
+
+## How it works
+
+1. App POSTs `<lb_url>/session` (empty JSON body).
+2. The load balancer picks a ready compute (round-robin) and returns:
+   ```json
+   {
+     "session_id": "...",
+     "websocket_url": "wss://<compute>/v1/realtime",
+     "connect_url": "wss://<compute>/v1/realtime?session_token=<JWT>",
+     "session_token": "<JWT>",
+     "pending_timeout_s": 60
+   }
+   ```
+3. App rewrites `connect_url` from `wss://` to `https://` and POSTs an SDP offer
+   to it (`Content-Type: application/sdp`). The compute, running aiortc, answers
+   `201 application/sdp` with the SDP answer.
+4. WebRTC peer connection opens. Audio streams over the media tracks (the browser
+   sends Opus 48 kHz, the backend resamples to 16 kHz for STT and back for TTS).
+   Events flow over a data channel labelled **`oai-events`** using the OpenAI
+   Realtime JSON protocol (`session.update`, `response.audio_transcript.delta`,
+   `conversation.item.input_audio_transcription.delta`, ...).
+
+The backend exposes one concurrent session per compute; the LB pins a session to
+a specific compute via a signed `session_token`.
+
+## Backend requirement
+
+This app talks to the WebRTC route `POST /v1/realtime` defined in
+[`websocket_router.py`](https://github.com/huggingface/speech-to-speech/blob/feat/webrtc-transport/src/speech_to_speech/api/openai_realtime/websocket_router.py).
+That route lives on the **`feat/webrtc-transport`** branch. If the compute is
+deployed from `main` it will reply 404 on the SDP POST. Verify with:
+
+```bash
+LB="https://<your-lb>.endpoints.huggingface.cloud"
+curl -X POST "$LB/session" -H "Content-Type: application/json" -d '{}'
+# -> { "connect_url": "wss://<compute>/v1/realtime?session_token=..." }
+
+# Rewrite wss -> https, POST a SDP offer:
+curl -X POST "https://<compute>/v1/realtime?session_token=..." \
+  -H "Content-Type: application/sdp" --data-binary @offer.sdp
+# expect 201 application/sdp; if 404, the compute is on the wrong branch.
+```
+
+## Run locally
+
+This is a pure static app. No build step, no node_modules. Any HTTP server works:
+
+```bash
+cd minimal-conversation-app-s2s-backend
+python3 -m http.server 5173
+# or: npx --yes http-server -p 5173 -c-1
+```
+
+Then open http://localhost:5173/, click the orb, allow the mic, talk.
+
+> Browsers require **HTTPS or `localhost`** for `getUserMedia()`. `127.0.0.1` works,
+> as does `localhost`. Plain `http://192.168.x.y:5173` does NOT (mic blocked).
+
+## Settings (stored in `localStorage`)
+
+| Key | What |
+|-----|------|
+| Load balancer URL | Base URL of your S2S deployment. App POSTs `<lb>/session`. |
+| Voice | Qwen3-TTS speaker name (Aiden, Ryan, Dylan, Eric, Ono_Anna, Serena, Sohee, Uncle_Fu, Vivian) |
+| Instructions | System prompt sent in `session.update` once the data channel opens |
+
+## Files
+
+| File | Role |
+|------|------|
+| `index.html` | Single page, orb + settings modal |
+| `main.js` | State machine, settings, mic capture, output audio piping |
+| `s2s-client.js` | WebRTC handshake against the LB + compute |
+| `style.css` | Orb animations, layout, dark theme |
+
+## Credits
+
+- Backend: [huggingface/speech-to-speech](https://github.com/huggingface/speech-to-speech) on `feat/webrtc-transport`
+- UI forked from `reachy_mini_minimal_conversation` (Pollen Robotics × Hugging Face), stripped of all robot-specific bits

index.html

@@ -1,19 +1,159 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <title>Minimal Conversation · S2S backend</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <!--
+    `booting` disables transitions/animations until the first paint commits.
+    Without this the orb visibly fades/scales in on the very first frame
+    because `state-idle` and the generic `.ind` defaults differ. The
+    bootstrap script at the end of main.js strips the class after one rAF.
+  -->
+  <body class="booting">
+    <div id="app">
+      <header class="topbar">
+        <div class="brand">
+          <span>Minimal Conversation · S2S backend</span>
+        </div>
+        <div class="topbar-right">
+          <button id="settings-btn" class="icon-btn" title="Settings" aria-label="Settings">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .66.39 1.25 1 1.51H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+          </button>
+        </div>
+      </header>
+
+      <main class="stage">
+        <div class="orb-wrap">
+          <button id="mic-btn" class="side-btn" type="button" aria-label="Mute" title="Mute" aria-hidden="true">
+            <svg class="mic-on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
+            <svg class="mic-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="2" x2="22" y2="22"/><path d="M9 5a3 3 0 0 1 6 0v4"/><path d="M9 10v1a3 3 0 0 0 5.1 2.1"/><path d="M19 10a7 7 0 0 1-1.24 3.97"/><path d="M5 10a7 7 0 0 0 11 5.67"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
+          </button>
+
+          <button
+            id="main-circle"
+            class="circle state-idle"
+            type="button"
+            aria-label="Start voice conversation"
+          >
+            <span class="circle-glow" aria-hidden="true"></span>
+            <span class="circle-ring" aria-hidden="true"></span>
+            <span class="circle-ring-outer" aria-hidden="true"></span>
+            <span class="circle-core">
+              <span class="circle-indicator" aria-hidden="true">
+                <svg class="ind ind-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <rect x="9" y="2" width="6" height="12" rx="3" fill="currentColor" stroke="none"/>
+                  <path d="M5 10a7 7 0 0 0 14 0"/>
+                  <line x1="12" y1="19" x2="12" y2="22"/>
+                  <line x1="8" y1="22" x2="16" y2="22"/>
+                </svg>
+                <svg class="ind ind-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12" y2="16"/></svg>
+                <span class="ind ind-spinner"></span>
+                <span class="ind ind-thinking">
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                </span>
+                <span class="ind ind-bars">
+                  <span class="bar"></span>
+                  <span class="bar"></span>
+                  <span class="bar"></span>
+                  <span class="bar"></span>
+                  <span class="bar"></span>
+                </span>
+                <svg class="ind ind-voice" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M3 10v4a1 1 0 0 0 1 1h3l5 4V5L7 9H4a1 1 0 0 0-1 1z" fill="currentColor" stroke="none"/>
+                  <path class="wave wave-1" d="M16 8a5 5 0 0 1 0 8"/>
+                  <path class="wave wave-2" d="M19 5a9 9 0 0 1 0 14"/>
+                </svg>
+              </span>
+            </span>
+          </button>
+
+          <button id="stop-btn" class="side-btn" type="button" aria-label="End" title="End" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+          </button>
+        </div>
+
+        <p id="circle-caption" class="circle-caption" role="status">Tap to start</p>
+      </main>
+
+      <footer class="footer">
+        <span>
+          Powered by
+          <a href="https://github.com/huggingface/speech-to-speech" target="_blank" rel="noopener">huggingface/speech-to-speech</a>
+          (WebRTC transport)
+        </span>
+      </footer>
+    </div>
+
+    <dialog id="settings-modal" class="modal">
+      <form method="dialog" class="modal-content">
+        <header class="modal-header">
+          <h2>Settings</h2>
+          <button class="icon-btn" value="close" aria-label="Close">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </header>
+
+        <div class="tab-panels">
+          <section class="tab-panel active" role="tabpanel">
+            <label class="field">
+              <span>Load balancer URL</span>
+              <input id="lb-url" type="url" autocomplete="off" spellcheck="false" placeholder="https://...endpoints.huggingface.cloud" />
+              <small>
+                Base URL of the Hugging Face speech-to-speech load balancer.
+                The app POSTs <code>&lt;lb&gt;/session</code>, then a WebRTC SDP offer
+                to the <code>connect_url</code> the LB returns.
+              </small>
+            </label>
+
+            <div class="field-row">
+              <label class="field">
+                <span>Voice</span>
+                <select id="voice">
+                  <option value="Aiden" selected>Aiden</option>
+                  <option value="Ryan">Ryan</option>
+                  <option value="Dylan">Dylan</option>
+                  <option value="Eric">Eric</option>
+                  <option value="Ono_Anna">Ono_Anna</option>
+                  <option value="Serena">Serena</option>
+                  <option value="Sohee">Sohee</option>
+                  <option value="Uncle_Fu">Uncle_Fu</option>
+                  <option value="Vivian">Vivian</option>
+                </select>
+              </label>
+            </div>
+
+            <label class="field">
+              <span>Instructions</span>
+              <textarea id="instructions" rows="5" placeholder="You are a friendly voice assistant..."></textarea>
+              <small>System prompt sent in <code>session.update</code> when the data channel opens.</small>
+            </label>
+
+            <div class="field">
+              <button id="restart-conversation" type="button" class="btn primary wide" disabled>
+                Restart conversation with these settings
+              </button>
+              <small id="restart-hint">Connect first, then come back here to apply live changes.</small>
+            </div>
+          </section>
+        </div>
+
+        <footer class="modal-footer">
+          <button id="settings-save" type="submit" class="btn primary" value="save">Save</button>
+        </footer>
+      </form>
+    </dialog>
+
+    <script type="module" src="main.js"></script>
+  </body>
 </html>

main.js

@@ -0,0 +1,399 @@
+// @ts-check
+/**
+ * Minimal voice conversation app, talking to a Hugging Face speech-to-speech
+ * backend over WebRTC.
+ *
+ * Click the orb -> we ask for the mic, POST a session on the LB, post our
+ * SDP offer to the routed compute, set up the data channel and the audio
+ * tracks. The orb visually reflects the live state (idle, connecting,
+ * listening, user-speaking, processing, ai-speaking).
+ *
+ * @typedef {"idle" | "connecting" | "listening" | "user-speaking" | "processing" | "ai-speaking" | "error"} AppState
+ */
+
+import { S2sRealtimeClient } from "./s2s-client.js";
+
+const DEFAULT_LB_URL = "https://mewklqcmavs5gkid.us-east-1.aws.endpoints.huggingface.cloud";
+const DEFAULT_VOICE = "Aiden";
+const DEFAULT_INSTRUCTIONS =
+  "You are a friendly voice assistant. " +
+  "Keep replies short, warm, and spoken. Avoid long monologues.";
+
+const STORAGE_KEYS = {
+  lbUrl: "s2s.lbUrl",
+  voice: "s2s.voice",
+  instructions: "s2s.instructions",
+};
+
+// ─── Settings (localStorage) ────────────────────────────────────────────
+
+/**
+ * @typedef {Object} Settings
+ * @property {string} lbUrl
+ * @property {string} voice
+ * @property {string} instructions
+ *
+ * @returns {Settings}
+ */
+function loadSettings() {
+  return {
+    lbUrl: localStorage.getItem(STORAGE_KEYS.lbUrl) || DEFAULT_LB_URL,
+    voice: localStorage.getItem(STORAGE_KEYS.voice) || DEFAULT_VOICE,
+    instructions: localStorage.getItem(STORAGE_KEYS.instructions) || DEFAULT_INSTRUCTIONS,
+  };
+}
+
+/** @param {Settings} s */
+function saveSettings(s) {
+  localStorage.setItem(STORAGE_KEYS.lbUrl, s.lbUrl);
+  localStorage.setItem(STORAGE_KEYS.voice, s.voice);
+  localStorage.setItem(STORAGE_KEYS.instructions, s.instructions);
+}
+
+// ─── State views ────────────────────────────────────────────────────────
+
+/**
+ * @typedef {Object} StateView
+ * @property {string} caption
+ * @property {boolean} disabled
+ *
+ * @type {Record<AppState, StateView>}
+ */
+const STATE_VIEWS = {
+  idle:            { caption: "Tap to start",  disabled: false },
+  connecting:      { caption: "Connecting",    disabled: true  },
+  listening:       { caption: "",              disabled: false },
+  "user-speaking": { caption: "",              disabled: false },
+  processing:      { caption: "",              disabled: false },
+  "ai-speaking":   { caption: "",              disabled: false },
+  error:           { caption: "Tap to retry",  disabled: false },
+};
+
+/** @type {Record<AppState, string>} */
+const STATE_CLASS = {
+  idle: "state-idle",
+  connecting: "state-connecting",
+  listening: "state-listening",
+  "user-speaking": "state-user-speaking",
+  processing: "state-processing",
+  "ai-speaking": "state-ai-speaking",
+  error: "state-error",
+};
+
+/** @type {ReadonlySet<AppState>} */
+const LIVE_STATES = new Set(["listening", "user-speaking", "processing", "ai-speaking"]);
+
+// ─── DOM refs ───────────────────────────────────────────────────────────
+
+/**
+ * @template {HTMLElement} T
+ * @param {string} selector
+ * @returns {T}
+ */
+function $(selector) {
+  const el = document.querySelector(selector);
+  if (!el) throw new Error(`Missing element: ${selector}`);
+  return /** @type {T} */ (el);
+}
+
+/** @type {HTMLButtonElement} */
+const circleBtn = $("#main-circle");
+/** @type {HTMLParagraphElement} */
+const circleCaption = $("#circle-caption");
+/** @type {HTMLElement} */
+const orbWrap = $(".orb-wrap");
+/** @type {HTMLButtonElement} */
+const micBtn = $("#mic-btn");
+/** @type {HTMLButtonElement} */
+const stopBtn = $("#stop-btn");
+
+/** @type {HTMLButtonElement} */
+const settingsBtn = $("#settings-btn");
+/** @type {HTMLDialogElement} */
+const settingsModal = $("#settings-modal");
+/** @type {HTMLInputElement} */
+const inputLbUrl = $("#lb-url");
+/** @type {HTMLSelectElement} */
+const inputVoice = $("#voice");
+/** @type {HTMLTextAreaElement} */
+const inputInstructions = $("#instructions");
+/** @type {HTMLButtonElement} */
+const restartBtn = $("#restart-conversation");
+/** @type {HTMLElement} */
+const restartHint = $("#restart-hint");
+const settingsForm = /** @type {HTMLFormElement} */ (settingsModal.querySelector("form"));
+
+// ─── Runtime state ──────────────────────────────────────────────────────
+
+/** @type {AppState} */
+let currentState = "idle";
+let settings = loadSettings();
+
+/** @type {S2sRealtimeClient | null} */
+let client = null;
+/** @type {MediaStream | null} */
+let micStream = null;
+/** @type {HTMLAudioElement | null} */
+let outputSink = null;
+let micMuted = false;
+
+// ─── UI plumbing ─────────────────���──────────────────────────────────────
+
+/** @param {AppState} next */
+function setState(next) {
+  currentState = next;
+  const view = STATE_VIEWS[next];
+  circleBtn.disabled = view.disabled;
+  circleBtn.className = `circle ${STATE_CLASS[next]}`;
+  if (next !== "error") setCaption(view.caption);
+
+  const live = LIVE_STATES.has(next);
+  orbWrap.classList.toggle("live", live);
+  micBtn.setAttribute("aria-hidden", live ? "false" : "true");
+  stopBtn.setAttribute("aria-hidden", live ? "false" : "true");
+  micBtn.tabIndex = live ? 0 : -1;
+  stopBtn.tabIndex = live ? 0 : -1;
+
+  updateRestartAvailability();
+}
+
+function updateRestartAvailability() {
+  const live = LIVE_STATES.has(currentState);
+  restartBtn.disabled = !live;
+  restartHint.hidden = live;
+}
+
+/**
+ * @param {string} text
+ * @param {"" | "error" | "muted"} [kind]
+ */
+function setCaption(text, kind = "") {
+  const trimmed = text.trim();
+  circleCaption.textContent = trimmed;
+  circleCaption.className = `circle-caption${kind ? ` ${kind}` : ""}${trimmed ? "" : " empty"}`;
+}
+
+// ─── Settings modal ─────────────────────────────────────────────────────
+
+function openSettings() {
+  inputLbUrl.value = settings.lbUrl;
+  inputVoice.value = settings.voice;
+  inputInstructions.value = settings.instructions;
+  updateRestartAvailability();
+  settingsModal.showModal();
+}
+
+settingsBtn.addEventListener("click", openSettings);
+
+settingsForm.addEventListener("submit", (event) => {
+  const submitter = /** @type {HTMLButtonElement | null} */ ((/** @type {SubmitEvent} */ (event)).submitter);
+  if (submitter?.value !== "save") return;
+
+  settings = {
+    lbUrl: inputLbUrl.value.trim() || DEFAULT_LB_URL,
+    voice: inputVoice.value || DEFAULT_VOICE,
+    instructions: inputInstructions.value.trim() || DEFAULT_INSTRUCTIONS,
+  };
+  saveSettings(settings);
+
+  // If we have a live session, push the new voice/instructions on the wire
+  // without tearing the peer connection down.
+  if (client && LIVE_STATES.has(currentState)) {
+    client.updateSession({ voice: settings.voice, instructions: settings.instructions });
+  }
+});
+
+restartBtn.addEventListener("click", async () => {
+  if (!LIVE_STATES.has(currentState)) return;
+  settings = {
+    lbUrl: inputLbUrl.value.trim() || DEFAULT_LB_URL,
+    voice: inputVoice.value || DEFAULT_VOICE,
+    instructions: inputInstructions.value.trim() || DEFAULT_INSTRUCTIONS,
+  };
+  saveSettings(settings);
+  settingsModal.close();
+  try {
+    await teardown();
+    await doStart();
+  } catch (err) {
+    onFatalError(err);
+  }
+});
+
+// ─── Click the orb ──────────────────────────────────────────────────────
+
+circleBtn.addEventListener("click", async () => {
+  try {
+    if (currentState === "idle" || currentState === "error") {
+      await doStart();
+    }
+  } catch (err) {
+    onFatalError(err);
+  }
+});
+
+micBtn.addEventListener("click", () => {
+  if (!micStream) return;
+  micMuted = !micMuted;
+  for (const track of micStream.getAudioTracks()) {
+    track.enabled = !micMuted;
+  }
+  micBtn.classList.toggle("muted", micMuted);
+  micBtn.setAttribute("aria-label", micMuted ? "Unmute" : "Mute");
+  micBtn.title = micMuted ? "Unmute" : "Mute";
+});
+
+stopBtn.addEventListener("click", async () => {
+  await teardown();
+});
+
+// ─── High-level flow ────────────────────────────────────────────────────
+
+async function doStart() {
+  setState("connecting");
+  setCaption("Asking for mic…", "muted");
+  try {
+    micStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+      },
+    });
+  } catch (err) {
+    throw new Error(
+      `Microphone access denied${err instanceof Error ? `: ${err.message}` : ""}`,
+    );
+  }
+
+  const inputTrack = micStream.getAudioTracks()[0];
+  if (!inputTrack) throw new Error("No microphone track available");
+
+  const c = new S2sRealtimeClient({
+    loadBalancerUrl: settings.lbUrl,
+    voice: settings.voice,
+    instructions: settings.instructions,
+    inputTrack,
+  });
+  client = c;
+
+  c.addEventListener("status", (e) => {
+    const detail = /** @type {CustomEvent<{ status: string }>} */ (e).detail;
+    onClientStatus(detail.status);
+  });
+  c.addEventListener("outputTrack", (e) => {
+    const detail = /** @type {CustomEvent<{ track: MediaStreamTrack }>} */ (e).detail;
+    attachOutputTrack(detail.track);
+  });
+  c.addEventListener("transcript", (e) => {
+    const detail = /** @type {CustomEvent<{ role: "user" | "assistant"; text: string; partial: boolean }>} */ (
+      e
+    ).detail;
+    console.log(`[transcript:${detail.role}${detail.partial ? "·delta" : ""}] ${detail.text}`);
+  });
+  c.addEventListener("error", (e) => {
+    const detail = /** @type {CustomEvent<{ error: unknown }>} */ (e).detail;
+    onFatalError(detail.error);
+  });
+  c.addEventListener("session", (e) => {
+    const detail = /** @type {CustomEvent<{ info: { sessionId: string } }>} */ (e).detail;
+    console.log("[s2s] session created:", detail.info.sessionId);
+  });
+
+  await c.connect();
+}
+
+/** @param {string} status */
+function onClientStatus(status) {
+  switch (status) {
+    case "creating-session":
+    case "connecting":
+      setState("connecting");
+      break;
+    case "connected":
+      setState("listening");
+      break;
+    case "user-speaking":
+      setState("user-speaking");
+      break;
+    case "processing":
+      setState("processing");
+      break;
+    case "ai-speaking":
+      setState("ai-speaking");
+      break;
+    case "closed":
+      // teardown() will move us to idle
+      break;
+    case "error":
+      setState("error");
+      break;
+  }
+}
+
+/** @param {MediaStreamTrack} track */
+function attachOutputTrack(track) {
+  if (!outputSink) {
+    outputSink = document.createElement("audio");
+    outputSink.autoplay = true;
+    outputSink.setAttribute("playsinline", "true");
+    document.body.appendChild(outputSink);
+  }
+  const stream = new MediaStream([track]);
+  outputSink.srcObject = stream;
+  outputSink.play().catch((err) => {
+    console.warn("[main] audio playback blocked:", err);
+  });
+}
+
+async function teardown() {
+  if (client) {
+    try {
+      await client.close();
+    } catch (err) {
+      console.warn("[main] error closing client:", err);
+    }
+    client = null;
+  }
+  if (micStream) {
+    for (const track of micStream.getTracks()) track.stop();
+    micStream = null;
+  }
+  if (outputSink) {
+    outputSink.srcObject = null;
+    outputSink.remove();
+    outputSink = null;
+  }
+  micMuted = false;
+  micBtn.classList.remove("muted");
+  setState("idle");
+}
+
+/** @param {unknown} err */
+function onFatalError(err) {
+  console.error("[main] fatal:", err);
+  setState("error");
+  const message = err instanceof Error ? err.message : String(err);
+  setCaption(truncateError(message), "error");
+  // Best-effort cleanup; ignore errors thrown during cleanup itself.
+  void teardown().catch(() => {
+    setState("error");
+    setCaption(truncateError(message), "error");
+  });
+}
+
+/** @param {string} text */
+function truncateError(text) {
+  if (text.length <= 90) return text;
+  return text.slice(0, 87) + "…";
+}
+
+// ─── Bootstrap ──────────────────────────────────────────────────────────
+
+setState("idle");
+
+// Strip the .booting class after one rAF so the orb's first paint is
+// committed without a fade/scale flash.
+requestAnimationFrame(() => {
+  document.body.classList.remove("booting");
+});

s2s-client.js

@@ -0,0 +1,516 @@
+// @ts-check
+/**
+ * Minimal WebRTC client for the Hugging Face speech-to-speech load balancer.
+ *
+ * Two-step handshake:
+ *
+ *   1. POST `<lb_url>/session` -> JSON `{ connect_url: wss://<compute>/v1/realtime?session_token=<JWT>, ... }`
+ *   2. POST that connect_url (after rewriting `wss://` -> `https://`) with
+ *      `Content-Type: application/sdp` and the SDP offer body. The backend
+ *      (aiortc) answers `201 application/sdp` with the SDP answer.
+ *
+ * Once the peer connection is up:
+ *
+ *   - Audio is bidirectional on the media tracks (the browser captures the
+ *     user's mic and sends Opus 48 kHz; the backend resamples both ways
+ *     internally to feed the 16 kHz STT pipeline and the 16 kHz TTS output).
+ *   - JSON events flow on a data channel labelled `oai-events`, using the
+ *     OpenAI Realtime protocol (session.update, response.audio_transcript.delta,
+ *     conversation.item.input_audio_transcription.delta, ...).
+ *
+ * References:
+ *   https://github.com/huggingface/speech-to-speech (feat/webrtc-transport branch)
+ *   https://platform.openai.com/docs/guides/realtime-webrtc
+ *
+ * @typedef {"idle" | "creating-session" | "connecting" | "connected" |
+ *           "user-speaking" | "processing" | "ai-speaking" | "closed" | "error"
+ * } S2sStatus
+ *
+ * @typedef {Object} S2sSessionInfo
+ * @property {string} sessionId
+ * @property {string} connectUrl
+ * @property {string} websocketUrl
+ * @property {string} sessionToken
+ * @property {number} pendingTimeoutS
+ *
+ * @typedef {Object} S2sOptions
+ * @property {string} loadBalancerUrl  Base URL of the LB (e.g. `https://...endpoints.huggingface.cloud`)
+ * @property {string} voice            Qwen3-TTS speaker name (Aiden, Ryan, Dylan, Eric, Ono_Anna, Serena, Sohee, Uncle_Fu, Vivian)
+ * @property {string} instructions     System prompt sent in `session.update`
+ * @property {MediaStreamTrack} inputTrack
+ *
+ * @typedef {Object} TranscriptEvent
+ * @property {"user" | "assistant"} role
+ * @property {string} text
+ * @property {boolean} partial
+ */
+
+const DEFAULT_PLAYOUT_DELAY_S = 0.15;
+
+// Opus fmtp knobs forced via SDP munging. Inline FEC trades a few bytes for
+// loss resilience; DTX off keeps comfort-noise frames flowing so the server's
+// VAD never thinks we silently dropped.
+const OPUS_FMTP_OVERRIDES = {
+  minptime: "10",
+  useinbandfec: "1",
+  usedtx: "0",
+  stereo: "0",
+  "sprop-stereo": "0",
+};
+
+const ICE_DISCONNECT_GRACE_MS = 5_000;
+
+export class S2sRealtimeClient extends EventTarget {
+  /** @param {S2sOptions} options */
+  constructor(options) {
+    super();
+    /** @type {S2sOptions} */
+    this.options = options;
+    /** @type {RTCPeerConnection | null} */
+    this._pc = null;
+    /** @type {RTCDataChannel | null} */
+    this._dc = null;
+    /** @type {S2sStatus} */
+    this._status = "idle";
+    /** @type {number | null} */
+    this._iceGraceTimer = null;
+    /** @type {(() => void) | null} */
+    this._pendingVisibilityHandler = null;
+  }
+
+  get status() {
+    return this._status;
+  }
+
+  /** @param {S2sStatus} status */
+  _setStatus(status) {
+    if (this._status === status) return;
+    this._status = status;
+    this.dispatchEvent(new CustomEvent("status", { detail: { status } }));
+  }
+
+  _markAudible() {
+    if (this._status === "ai-speaking") return;
+    if (this._status === "closed" || this._status === "error") return;
+    this._setStatus("ai-speaking");
+  }
+
+  /**
+   * Full handshake:
+   *   1. Create a session on the load balancer
+   *   2. Open the WebRTC peer connection against the routed compute endpoint
+   *   3. Wait for the SDP answer + setRemoteDescription
+   *
+   * Resolves once the SDP exchange completes; the data channel and the
+   * `session.update` payload are sent asynchronously when the channel opens.
+   *
+   * @returns {Promise<void>}
+   */
+  async connect() {
+    if (this._pc) throw new Error("Already connected");
+    this._setStatus("creating-session");
+
+    const session = await this._createSession();
+    this.dispatchEvent(new CustomEvent("session", { detail: { info: session } }));
+
+    this._setStatus("connecting");
+
+    const pc = new RTCPeerConnection({
+      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+    });
+    this._pc = pc;
+
+    pc.addTransceiver(this.options.inputTrack, {
+      direction: "sendrecv",
+      streams: [new MediaStream([this.options.inputTrack])],
+    });
+
+    pc.ontrack = (event) => {
+      const [stream] = event.streams;
+      const track = event.track.kind === "audio" ? event.track : stream?.getAudioTracks()[0];
+      if (!track) return;
+      try {
+        // Non-standard but widely shipped: ask the browser to buffer a bit
+        // of playout to absorb jitter spikes on flaky links.
+        /** @type {any} */ (event.receiver).playoutDelayHint = DEFAULT_PLAYOUT_DELAY_S;
+      } catch {
+        // older browsers ignore the hint
+      }
+      this.dispatchEvent(new CustomEvent("outputTrack", { detail: { track } }));
+    };
+
+    pc.oniceconnectionstatechange = () => {
+      const s = pc.iceConnectionState;
+      if (s === "connected" || s === "completed") {
+        this._clearIceGrace();
+        return;
+      }
+      if (s === "failed") {
+        this._clearIceGrace();
+        this.dispatchEvent(new CustomEvent("error", { detail: { error: new Error("ICE failed") } }));
+        this._setStatus("error");
+        return;
+      }
+      if (s === "disconnected") {
+        if (this._iceGraceTimer !== null) return;
+        if (typeof document !== "undefined" && document.hidden) {
+          this._armIceGraceOnVisibility();
+          return;
+        }
+        this._scheduleIceGrace();
+      }
+    };
+
+    const dc = pc.createDataChannel("oai-events");
+    this._dc = dc;
+
+    dc.addEventListener("open", () => {
+      this._setStatus("connected");
+      this._sendEvent({
+        type: "session.update",
+        session: {
+          modalities: ["audio", "text"],
+          voice: this.options.voice,
+          instructions: this.options.instructions,
+          input_audio_transcription: { model: "whisper-1" },
+          turn_detection: {
+            type: "server_vad",
+            threshold: 0.5,
+            prefix_padding_ms: 300,
+            silence_duration_ms: 500,
+            create_response: true,
+            interrupt_response: true,
+          },
+        },
+      });
+    });
+
+    dc.addEventListener("message", (event) => this._handleEvent(event.data));
+    dc.addEventListener("error", (event) => {
+      console.error("[s2s] data channel error:", event);
+    });
+
+    console.log("[s2s] createOffer…");
+    const rawOffer = await pc.createOffer();
+    const offerSdp = patchOpusFmtp(rawOffer.sdp ?? "");
+    console.log("[s2s] setLocalDescription (offer, %d chars)", offerSdp.length);
+    await pc.setLocalDescription({ type: "offer", sdp: offerSdp });
+
+    const httpUrl = wssToHttps(session.connectUrl);
+    console.log("[s2s] POST SDP offer ->", httpUrl);
+
+    let response;
+    try {
+      response = await fetch(httpUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/sdp" },
+        body: offerSdp,
+      });
+    } catch (err) {
+      const detail = err instanceof Error ? `${err.name}: ${err.message}` : String(err);
+      throw new Error(`SDP exchange fetch failed (${detail})`);
+    }
+    console.log("[s2s] SDP exchange status=%d", response.status);
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`SDP handshake failed (${response.status}): ${text}`);
+    }
+
+    const answerSdp = patchOpusFmtp(await response.text());
+    await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
+    console.log("[s2s] SDP exchange complete");
+  }
+
+  /**
+   * @returns {Promise<S2sSessionInfo>}
+   */
+  async _createSession() {
+    const url = `${trimTrailingSlash(this.options.loadBalancerUrl)}/session`;
+    console.log("[s2s] POST", url);
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`/session failed (${response.status}): ${text}`);
+    }
+    const json = await response.json();
+    return {
+      sessionId: json.session_id,
+      connectUrl: json.connect_url,
+      websocketUrl: json.websocket_url,
+      sessionToken: json.session_token,
+      pendingTimeoutS: json.pending_timeout_s,
+    };
+  }
+
+  _clearIceGrace() {
+    if (this._iceGraceTimer !== null) {
+      clearTimeout(this._iceGraceTimer);
+      this._iceGraceTimer = null;
+    }
+    if (this._pendingVisibilityHandler) {
+      document.removeEventListener("visibilitychange", this._pendingVisibilityHandler);
+      this._pendingVisibilityHandler = null;
+    }
+  }
+
+  _scheduleIceGrace() {
+    if (this._iceGraceTimer !== null) return;
+    console.warn("[s2s] ICE disconnected, grace=%dms", ICE_DISCONNECT_GRACE_MS);
+    this._iceGraceTimer = window.setTimeout(() => {
+      this._iceGraceTimer = null;
+      if (!this._pc) return;
+      const still = this._pc.iceConnectionState;
+      if (still === "disconnected" || still === "failed") {
+        this.dispatchEvent(
+          new CustomEvent("error", {
+            detail: { error: new Error(`ICE stuck in '${still}' for > ${ICE_DISCONNECT_GRACE_MS}ms`) },
+          }),
+        );
+        this._setStatus("error");
+      }
+    }, ICE_DISCONNECT_GRACE_MS);
+  }
+
+  _armIceGraceOnVisibility() {
+    if (this._pendingVisibilityHandler) return;
+    const handler = () => {
+      if (document.hidden) return;
+      document.removeEventListener("visibilitychange", handler);
+      this._pendingVisibilityHandler = null;
+      if (!this._pc) return;
+      const s = this._pc.iceConnectionState;
+      if (s === "connected" || s === "completed") return;
+      if (s === "failed") {
+        this.dispatchEvent(new CustomEvent("error", { detail: { error: new Error("ICE failed") } }));
+        this._setStatus("error");
+        return;
+      }
+      this._scheduleIceGrace();
+    };
+    document.addEventListener("visibilitychange", handler);
+    this._pendingVisibilityHandler = handler;
+  }
+
+  /** @param {string} raw */
+  _handleEvent(raw) {
+    /** @type {{ type?: string; [k: string]: any }} */
+    let event;
+    try {
+      event = JSON.parse(raw);
+    } catch {
+      return;
+    }
+
+    if (typeof event.type === "string") {
+      console.debug("[s2s] event:", event.type);
+    }
+
+    switch (event.type) {
+      case "input_audio_buffer.speech_started":
+        this._setStatus("user-speaking");
+        break;
+
+      case "input_audio_buffer.speech_stopped":
+        if (this._status === "user-speaking") {
+          this._setStatus("processing");
+        }
+        break;
+
+      case "response.audio.delta":
+      case "response.output_audio.delta":
+        this._markAudible();
+        break;
+
+      case "response.content_part.added": {
+        const part = event.part;
+        if (part?.type === "audio" || part?.type === "output_audio") {
+          this._markAudible();
+        }
+        break;
+      }
+
+      case "response.created":
+      case "response.output_item.added":
+        if (this._status === "connected" || this._status === "user-speaking") {
+          this._setStatus("processing");
+        }
+        break;
+
+      case "response.done":
+      case "response.cancelled":
+        if (this._status === "ai-speaking" || this._status === "processing") {
+          this._setStatus("connected");
+        }
+        break;
+
+      case "conversation.item.input_audio_transcription.delta": {
+        const delta = typeof event.delta === "string" ? event.delta : "";
+        if (delta) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: /** @type {TranscriptEvent} */ ({ role: "user", text: delta, partial: true }),
+            }),
+          );
+        }
+        break;
+      }
+
+      case "conversation.item.input_audio_transcription.completed": {
+        const transcript = typeof event.transcript === "string" ? event.transcript : "";
+        if (transcript) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: /** @type {TranscriptEvent} */ ({ role: "user", text: transcript, partial: false }),
+            }),
+          );
+        }
+        break;
+      }
+
+      case "response.audio_transcript.delta":
+      case "response.output_audio_transcript.delta": {
+        this._markAudible();
+        const delta = typeof event.delta === "string" ? event.delta : "";
+        if (delta) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: /** @type {TranscriptEvent} */ ({ role: "assistant", text: delta, partial: true }),
+            }),
+          );
+        }
+        break;
+      }
+
+      case "response.audio_transcript.done":
+      case "response.output_audio_transcript.done": {
+        const transcript = typeof event.transcript === "string" ? event.transcript : "";
+        if (transcript) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: /** @type {TranscriptEvent} */ ({ role: "assistant", text: transcript, partial: false }),
+            }),
+          );
+        }
+        break;
+      }
+
+      case "error": {
+        const err = event.error;
+        this.dispatchEvent(
+          new CustomEvent("error", { detail: { error: new Error(err?.message ?? "Server error") } }),
+        );
+        break;
+      }
+    }
+  }
+
+  /** @param {Record<string, unknown>} event */
+  _sendEvent(event) {
+    if (!this._dc || this._dc.readyState !== "open") return;
+    this._dc.send(JSON.stringify(event));
+  }
+
+  /** Update the live session (voice / instructions / etc.) without reconnecting. */
+  /** @param {{ voice?: string; instructions?: string }} patch */
+  updateSession(patch) {
+    /** @type {Record<string, unknown>} */
+    const session = { modalities: ["audio", "text"] };
+    if (patch.voice) session.voice = patch.voice;
+    if (patch.instructions) session.instructions = patch.instructions;
+    this._sendEvent({ type: "session.update", session });
+  }
+
+  /** @returns {Promise<void>} */
+  async close() {
+    this._clearIceGrace();
+    try {
+      this._dc?.close();
+    } catch {
+      // ignored
+    }
+    this._dc = null;
+    try {
+      this._pc?.close();
+    } catch {
+      // ignored
+    }
+    this._pc = null;
+    this._setStatus("closed");
+  }
+}
+
+/** @param {string} url */
+function trimTrailingSlash(url) {
+  return url.endsWith("/") ? url.slice(0, -1) : url;
+}
+
+/** @param {string} url */
+function wssToHttps(url) {
+  if (url.startsWith("wss://")) return "https://" + url.slice("wss://".length);
+  if (url.startsWith("ws://")) return "http://" + url.slice("ws://".length);
+  return url;
+}
+
+/**
+ * Rewrite each `a=fmtp:<pt> ...` line for Opus payload types so it carries
+ * our preferred parameters (FEC on, DTX off). Missing fmtp lines are
+ * synthesized next to the matching `a=rtpmap`.
+ *
+ * @param {string} sdp
+ * @returns {string}
+ */
+function patchOpusFmtp(sdp) {
+  if (!sdp) return sdp;
+
+  const rtpmapRe = /^a=rtpmap:(\d+)\s+opus\/48000/gim;
+  /** @type {string[]} */
+  const payloadTypes = [];
+  let m;
+  while ((m = rtpmapRe.exec(sdp)) !== null) {
+    payloadTypes.push(m[1]);
+  }
+  if (payloadTypes.length === 0) return sdp;
+
+  let patched = sdp;
+  for (const pt of payloadTypes) {
+    const fmtpLineRe = new RegExp(`^a=fmtp:${pt}\\s+([^\\r\\n]*)`, "m");
+    const existing = fmtpLineRe.exec(patched);
+    if (existing) {
+      const merged = mergeFmtpParams(existing[1], OPUS_FMTP_OVERRIDES);
+      patched = patched.replace(fmtpLineRe, `a=fmtp:${pt} ${merged}`);
+    } else {
+      const merged = mergeFmtpParams("", OPUS_FMTP_OVERRIDES);
+      const rtpmapLineRe = new RegExp(`(^a=rtpmap:${pt}\\s+opus/48000[^\\r\\n]*)`, "m");
+      patched = patched.replace(rtpmapLineRe, `$1\r\na=fmtp:${pt} ${merged}`);
+    }
+  }
+  return patched;
+}
+
+/**
+ * @param {string} existing
+ * @param {Record<string, string>} overrides
+ * @returns {string}
+ */
+function mergeFmtpParams(existing, overrides) {
+  /** @type {Map<string, string>} */
+  const params = new Map();
+  for (const chunk of existing.split(";")) {
+    const kv = chunk.trim();
+    if (!kv) continue;
+    const eq = kv.indexOf("=");
+    if (eq < 0) params.set(kv, "");
+    else params.set(kv.slice(0, eq).trim(), kv.slice(eq + 1).trim());
+  }
+  for (const [k, v] of Object.entries(overrides)) {
+    params.set(k, v);
+  }
+  return Array.from(params.entries())
+    .map(([k, v]) => (v ? `${k}=${v}` : k))
+    .join(";");
+}

style.css

@@ -1,28 +1,1074 @@
+:root {
+  --bg: #0a0b10;
+  --bg-elev: #13151c;
+  --bg-elev-2: #1b1e29;
+  --border: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --text: #f5f6fa;
+  --text-dim: rgba(245, 246, 250, 0.65);
+  --text-faint: rgba(245, 246, 250, 0.42);
+
+  --accent: #8b7dff;
+  --accent-2: #22d3ee;
+  --listening: #22d3ee;
+  --speaking: #8b7dff;
+  --processing: #f59e0b;
+  --error: #ff6a75;
+  --success: #34d399;
+
+  /* Smoothed mic RMS in [0..1], updated every frame from JS while a session
+   * is active. Used by audio-reactive circle states. */
+  --audio-level: 0;
+  /* Five log-spaced frequency bands extracted from the mic analyser;
+   * drive each bar's height independently for a real "spectrum" feel. */
+  --bar0: 0;
+  --bar1: 0;
+  --bar2: 0;
+  --bar3: 0;
+  --bar4: 0;
+
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 22px;
+
+  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
+
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: radial-gradient(ellipse at 50% 20%, #1a1c28 0%, var(--bg) 60%);
+  color: var(--text);
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+button {
+  font-family: inherit;
+}
+
+a {
+  color: var(--text);
+  text-decoration: none;
+  border-bottom: 1px solid var(--border-strong);
+}
+a:hover {
+  border-bottom-color: var(--text);
+}
+
+#app {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* ─── Topbar ──────────────────────────────────────────────────────────── */
+
+/* Topbar is just a floating row of controls over the stage - no
+ * separator line, no background. Same story for the footer. Keeps the
+ * app feeling like one continuous canvas. */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 28px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  color: var(--text-dim);
+}
+
+.brand .brand-logo {
+  width: 26px;
+  height: 26px;
+  object-fit: contain;
+  flex: none;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
+  transition: transform 0.2s ease;
+}
+.brand .brand-logo:hover {
+  transform: translateY(-1px) rotate(-2deg);
+}
+
+/* Narrow viewports (typically the mobile shell iframe and phone-sized
+   browser windows): the full product name pushes the topbar's right
+   cluster off-screen. Keep the logo as the brand cue and drop the
+   wordmark - the orb already gives enough context. */
+@media (max-width: 600px) {
+  .brand > span {
+    display: none;
+  }
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* The HF user pill: compact avatar + handle. Rendered as a flex row so
+ * the avatar stays aligned with the text baseline even when the text
+ * wraps on narrow viewports. */
+.hf-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-dim);
+  padding: 4px 10px 4px 4px;
+  border-radius: 999px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  line-height: 1;
+}
+
+.hf-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: color-mix(in srgb, var(--accent) 25%, var(--bg-elev-2));
+  /* Hidden until an actual URL loads (see `setHfAvatar` in main.ts).
+   * Keeps the initial login flash from showing a broken image icon. */
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  flex: none;
+}
+.hf-avatar.loaded {
+  opacity: 1;
+}
+
+.hf-user-name {
+  white-space: nowrap;
+}
+
+/* ─── Transport pill ──────────────────────────────────────────────
+ * Surface the actual network path WebRTC picked for the robot peer
+ * connection (LAN, direct-through-NAT, or TURN-relayed). Lets the
+ * user spot at a glance when audio is going through the internet
+ * instead of staying on-prem.
+ */
+.transport-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  user-select: none;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.transport-pill .transport-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
+  flex: none;
+}
+
+/* Bitrate readout sits after the kind label. Dimmer + monospace so the
+ * kind (LAN / Direct / Relayed) stays the primary info and the numbers
+ * don't wiggle the layout as digits change. */
+.transport-pill .transport-bitrate {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  color: color-mix(in srgb, currentColor 75%, var(--text-dim));
+  opacity: 0.85;
+  padding-left: 6px;
+  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+}
+.transport-pill .transport-bitrate:empty {
+  display: none;
+}
+
+.transport-pill.transport-checking {
+  color: var(--text-dim);
+}
+.transport-pill.transport-checking .transport-dot {
+  animation: transport-blink 1.2s ease-in-out infinite;
+}
+
+.transport-pill.transport-lan {
+  color: #4ade80;
+  border-color: color-mix(in srgb, #4ade80 35%, var(--border));
+  background: color-mix(in srgb, #4ade80 10%, var(--bg-elev));
+}
+
+.transport-pill.transport-direct {
+  color: #60a5fa;
+  border-color: color-mix(in srgb, #60a5fa 35%, var(--border));
+  background: color-mix(in srgb, #60a5fa 10%, var(--bg-elev));
+}
+
+.transport-pill.transport-relay {
+  color: #fbbf24;
+  border-color: color-mix(in srgb, #fbbf24 35%, var(--border));
+  background: color-mix(in srgb, #fbbf24 10%, var(--bg-elev));
+}
+
+@keyframes transport-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+.icon-btn {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.icon-btn:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+/* ─── Stage ───────────────────────────────────────────────────────────── */
+
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 24px 32px;
+  gap: 20px;
+}
+
+/* ─── Central circle ──────────────────────────────────────────────────── */
+
+/* Wraps the orb and its two side controls so they stay aligned on one row. */
+.orb-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(18px, 3vw, 32px);
+}
+
+.circle {
+  position: relative;
+  width: clamp(220px, 38vw, 320px);
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  display: grid;
+  place-items: center;
+  color: var(--glow, var(--accent));
+  transition: transform 0.18s ease, filter 0.18s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.circle:hover {
+  filter: brightness(1.08);
+}
+.circle:active {
+  transform: scale(0.97);
+  filter: brightness(0.92);
+}
+.circle:focus-visible .circle-core {
+  outline: 2px solid var(--glow, var(--accent));
+  outline-offset: 6px;
+}
+.circle[disabled] {
+  cursor: default;
+  opacity: 0.75;
+}
+
+.circle-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: radial-gradient(circle at center, var(--glow, var(--accent)) 0%, transparent 65%);
+  filter: blur(28px);
+  opacity: 0.5;
+  transform: scale(1);
+  transition: opacity 0.25s, background 0.25s, transform 1.4s ease-in-out;
+  pointer-events: none;
+}
+
+/* Two nested circular rings: the inner tracks the core edge, the outer
+ * expands / fades to convey "audio radiating out" during speaking. */
+.circle-ring,
+.circle-ring-outer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition: opacity 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
+}
+.circle-ring {
+  width: 82%;
+  height: 82%;
+  border: 1.5px solid color-mix(in srgb, var(--glow, var(--accent)) 35%, transparent);
+  opacity: 0.35;
+}
+.circle-ring-outer {
+  width: 94%;
+  height: 94%;
+  border: 1px solid color-mix(in srgb, var(--glow, var(--accent)) 22%, transparent);
+  opacity: 0;
+}
+
+.circle-core {
+  position: relative;
+  width: 72%;
+  height: 72%;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 35% 28%,
+    color-mix(in srgb, var(--glow, var(--accent)) 28%, transparent),
+    color-mix(in srgb, var(--glow, var(--accent)) 10%, transparent) 55%,
+    color-mix(in srgb, var(--glow, var(--accent)) 5%, transparent)
+  );
+  border: 2px solid color-mix(in srgb, var(--glow, var(--accent)) 40%, transparent);
+  display: grid;
+  place-items: center;
+  box-shadow:
+    0 0 32px color-mix(in srgb, var(--glow, var(--accent)) 22%, transparent),
+    inset 0 0 28px color-mix(in srgb, var(--glow, var(--accent)) 18%, transparent);
+  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
+}
+
+/* Indicator slot: a single SVG / spinner / bar group is visible at a time,
+ * driven by the state class on `.circle`. */
+.circle-indicator {
+  position: relative;
+  width: 44%;
+  height: 44%;
+  display: grid;
+  place-items: center;
+  color: var(--glow, var(--accent));
+}
+.circle-indicator > .ind {
+  grid-area: 1 / 1;
+  opacity: 0;
+  transform: scale(0.85);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  pointer-events: none;
+}
+.circle-indicator > svg.ind {
+  width: 60%;
+  height: 60%;
+}
+
+/* Spinner: a rotating ring gap, CSS-only.
+ *
+ * Note: the base `.circle-indicator > .ind` rule forces `transform:
+ * scale(.85)` / `scale(1)` on every indicator to drive the show/hide
+ * transition. If we only rotate here, the browser has to interpolate
+ * between `scale(1)` and `rotate(360deg)` (two different transform
+ * functions), which produces a broken, barely-moving animation. So we
+ * include the scale explicitly in the keyframes and bump specificity
+ * with `!important` so the spinner always wins over the state rule. */
+.ind-spinner {
+  width: 48%;
+  height: 48%;
+  border: 3px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0;
+  animation: ind-spin 0.9s linear infinite;
+}
+
+/* Thinking dots: 3 soft pulsing dots while the model is composing a
+ * response. Apple-style cadence: each dot scales up and brightens in
+ * turn, staggered by ~160 ms. Per-dot animation is on the child, so
+ * the parent's scale(.85 → 1) show/hide transform composes cleanly. */
+.ind-thinking {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 60%;
+  height: 60%;
+}
+.ind-thinking .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+  animation: thinking-dot 1.25s ease-in-out infinite;
+}
+.ind-thinking .dot:nth-child(1) { animation-delay: 0s; }
+.ind-thinking .dot:nth-child(2) { animation-delay: 0.16s; }
+.ind-thinking .dot:nth-child(3) { animation-delay: 0.32s; }
+
+/* Bars: 5 vertical pills driven by --bar0..--bar4 CSS vars. */
+.ind-bars {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 42%;
+}
+.ind-bars .bar {
+  width: 4px;
+  min-height: 4px;
+  border-radius: 3px;
+  background: currentColor;
+  opacity: 0.7;
+  --h: var(--bar0, 0);
+  height: calc(4px + var(--h) * 36px);
+  transition: height 0.08s ease-out, opacity 0.08s ease-out;
+}
+.ind-bars .bar:nth-child(1) { --h: var(--bar0); }
+.ind-bars .bar:nth-child(2) { --h: var(--bar1); }
+.ind-bars .bar:nth-child(3) { --h: var(--bar2); }
+.ind-bars .bar:nth-child(4) { --h: var(--bar3); }
+.ind-bars .bar:nth-child(5) { --h: var(--bar4); }
+.ind-bars .bar {
+  opacity: calc(0.55 + 0.45 * var(--h));
+}
+
+/* Active indicator per state.
+ *
+ * Note: `ai-speaking` deliberately has NO indicator here. The orb
+ * itself becomes the indicator by pulsing on Reachy's voice (see the
+ * `--ai-audio-level` rules further down), which is a lot clearer and
+ * less confusing than reusing the mic-bars (which viewers would read
+ * as "you are speaking"). */
+.state-signed-out .ind-connect,
+.state-authenticated .ind-mic,
+.state-ready .ind-mic,
+.state-connecting .ind-spinner,
+.state-connected .ind-spinner,
+.state-auto-selecting .ind-spinner,
+.state-starting .ind-spinner,
+.state-processing .ind-thinking,
+.state-listening .ind-bars,
+.state-user-speaking .ind-bars,
+.state-ai-speaking .ind-voice,
+.state-error .ind-error {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* AI speaking indicator: speaker + two sound waves.
+ *
+ * Each wave pulses outward (opacity + stroke grow) with a quarter-
+ * beat offset so it reads as sound radiating out. Kept as a pure
+ * CSS animation so the icon is always visually alive even between
+ * syllables when --ai-audio-level momentarily dips. */
+.ind-voice .wave {
+  transform-origin: 50% 50%;
+  animation: voice-wave 1.35s ease-out infinite;
+}
+.ind-voice .wave-1 { animation-delay: 0s; }
+.ind-voice .wave-2 { animation-delay: 0.35s; }
+
+/* Idle indicators: a chain-link "connect" glyph for the signed-out
+ * step (invites the user to authenticate with HF) and a microphone
+ * once a session is ready. Both picked up by the generic
+ * `.circle-indicator > svg.ind` sizing rule (60% × 60% of the slot)
+ * and rely on per-state opacity transitions for show / hide. */
+.ind-connect,
+.ind-mic {
+  color: color-mix(in srgb, var(--glow, var(--accent)) 85%, white);
+}
+
+/* ─── Caption below the circle ────────────────────────────────────────── */
+
+/* The caption under the orb is meant to whisper, not shout: micro-label
+ * vibe, uppercase, letter-spaced, muted. Only appears for actionable /
+ * transitional states (see STATE_VIEWS). During a live conversation the
+ * orb alone carries the state so we collapse this row entirely. */
+.circle-caption {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  min-height: 1.2em;
+  text-align: center;
+  opacity: 0.75;
+  transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease,
+    min-height 0.25s ease;
+}
+.circle-caption.empty {
+  opacity: 0;
+  min-height: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+}
+.circle-caption.muted {
+  color: var(--text-faint);
+  opacity: 0.65;
+}
+.circle-caption.error {
+  color: var(--error);
+  opacity: 1;
+  letter-spacing: 0.08em;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* ─── Tool-call toaster ───────────────────────────────────────────────── */
+
+/* A small, non-interactive pill that appears below the circle when the
+ * model invokes a tool (move_head, play_move). Sits just under the
+ * state caption, collapses to zero height when no toast is active. */
+.tool-toast {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: color-mix(in srgb, var(--bg-elev-2) 78%, transparent);
+  color: var(--text-dim);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  white-space: nowrap;
+  max-width: 80vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  opacity: 0;
+  transform: translateY(-4px) scale(0.96);
+  pointer-events: none;
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+.tool-toast.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.tool-toast-icon {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: color-mix(in srgb, var(--accent) 80%, white);
+  animation: tool-toast-spin 3.2s linear infinite;
+  animation-play-state: paused;
+}
+.tool-toast.visible .tool-toast-icon {
+  animation-play-state: running;
+}
+.tool-toast-text {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@keyframes tool-toast-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* ─── Side controls (mic / stop) ──────────────────────────────────────── */
+
+.side-btn {
+  flex: none;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: 1px solid var(--border-strong);
+  /* Brighter background so the buttons actually stand out against the
+   * deep-blue stage gradient; previous var(--bg-elev) was too close to
+   * the page bg to be readable. */
+  background: color-mix(in srgb, var(--bg-elev-2) 80%, #2a2e3c);
+  color: var(--text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  /* Hidden by default: take up no space until the session is live. The
+   * `width: 0` collapse keeps the orb centered on the idle screen. */
+  opacity: 0;
+  transform: scale(0.55);
+  width: 0;
+  padding: 0;
+  pointer-events: none;
+  overflow: hidden;
+  transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease,
+    background 0.15s, color 0.15s, border-color 0.15s;
+}
+.side-btn:hover {
+  background: color-mix(in srgb, var(--bg-elev-2) 60%, #323746);
+  border-color: var(--text-dim);
+}
+.side-btn svg {
+  width: 22px;
+  height: 22px;
+  flex: none;
+}
+.side-btn .mic-off { display: none; }
+.side-btn.muted {
+  color: #fff;
+  border-color: var(--error);
+  background: color-mix(in srgb, var(--error) 70%, #1a0e13);
+}
+.side-btn.muted .mic-on { display: none; }
+.side-btn.muted .mic-off { display: block; }
+
+/* Stop button: subtle warm tint so "end" reads as destructive. */
+#stop-btn:hover {
+  color: #fff;
+  border-color: color-mix(in srgb, var(--error) 60%, var(--border-strong));
+  background: color-mix(in srgb, var(--error) 25%, var(--bg-elev-2));
+}
+
+/* Reveal when the session is live: buttons flank the orb on a flex row. */
+.orb-wrap.live .side-btn {
+  opacity: 1;
+  transform: scale(1);
+  width: 52px;
+  pointer-events: auto;
+}
+
+/* Disable every transition / animation during the first paint so the
+ * orb doesn't fade-and-scale in when the page loads. `main.ts` removes
+ * the class after one animation frame. */
+body.booting,
+body.booting *,
+body.booting *::before,
+body.booting *::after {
+  transition: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+}
+
+/* ─── Circle animation keyframes ──────────────────────────────────────── */
+
+/* Slow, subtle breathing for "warm idle" states. */
+@keyframes breathe {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
+  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 0.15; }
+}
+
+/* Outer ring expanding and fading - conveys "I am producing audio". */
+@keyframes ring-out {
+  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.35; }
+  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
+}
+
+/* Soft inner scale for the core while talking. */
+@keyframes core-breathe {
+  0%, 100% { transform: scale(1); }
+  50%      { transform: scale(1.04); }
+}
+
+/* Subtle glow throb used for "thinking" — dimmer than speaking. */
+@keyframes thinking {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50%      { transform: scale(0.96); opacity: 0.45; }
+}
+
+/* Individual dot pulse for the 3-dot processing indicator. */
+@keyframes thinking-dot {
+  0%, 60%, 100% { transform: scale(0.7); opacity: 0.3; }
+  30%           { transform: scale(1.15); opacity: 1; }
+}
+
+/* Sound-wave pulse: arc fades in, scales up slightly, fades out.
+ * The transform-origin is the speaker's center (roughly x=12), so
+ * the waves feel like they're emanating from the cone. */
+@keyframes voice-wave {
+  0%   { opacity: 0; transform: scale(0.7); }
+  30%  { opacity: 1; transform: scale(1); }
+  70%  { opacity: 0.2; transform: scale(1.12); }
+  100% { opacity: 0; transform: scale(0.7); }
+}
+
+@keyframes ind-spin {
+  /* Scale kept at 1 so we don't fight with the indicator's base
+   * show/hide transform (see `.ind-spinner` for the rationale). */
+  from { transform: scale(1) rotate(0deg); }
+  to   { transform: scale(1) rotate(360deg); }
+}
+
+/* ─── State-specific colors ──────────────────────────────────────────── */
+
+.circle.state-signed-out   { --glow: #8b7dff; }
+.circle.state-authenticated,
+.circle.state-ready        { --glow: #34d399; }
+.circle.state-connecting,
+.circle.state-connected,
+.circle.state-auto-selecting,
+.circle.state-starting     { --glow: #facc15; }
+.circle.state-listening,
+.circle.state-user-speaking { --glow: var(--listening); }
+.circle.state-processing   { --glow: var(--processing); }
+.circle.state-ai-speaking  { --glow: var(--speaking); }
+.circle.state-error        { --glow: var(--error); }
+
+/* Idle / ready: gentle breathing of the inner ring. Kept out of the
+ * `signed-out` state so the very first paint on page load stays quiet
+ * (the orb now shows the Reachy head silhouette, no need to also pulse). */
+.circle.state-authenticated .circle-ring,
+.circle.state-ready .circle-ring {
+  animation: breathe 2.4s ease-in-out infinite;
+}
+
+/* Connecting flows: subtle glow throb so the orb feels thoughtful
+ * while the session is being negotiated. Kept off `processing` on
+ * purpose - the 3 thinking dots already pulse, and layering another
+ * throb on top competes with them for attention. */
+.circle.state-connecting .circle-core,
+.circle.state-connected .circle-core,
+.circle.state-auto-selecting .circle-core,
+.circle.state-starting .circle-core {
+  animation: thinking 1.4s ease-in-out infinite;
+}
+
+/* User is speaking: the mic RMS drives scale + opacity via --audio-level. */
+.circle.state-user-speaking .circle-ring {
+  animation: none;
+  opacity: calc(0.25 + 0.55 * var(--audio-level));
+  transform: translate(-50%, -50%) scale(calc(1 + 0.08 * var(--audio-level)));
+  transition: transform 0.08s linear, opacity 0.08s linear;
+}
+.circle.state-user-speaking .circle-ring-outer {
+  opacity: calc(0.1 + 0.35 * var(--audio-level));
+  transform: translate(-50%, -50%) scale(calc(1 + 0.12 * var(--audio-level)));
+  transition: transform 0.08s linear, opacity 0.08s linear;
+}
+.circle.state-listening .circle-ring {
+  animation: breathe 2s ease-in-out infinite;
+}
+
+/* Assistant is speaking: the whole orb breathes in sync with Reachy's
+ * voice instead of running a fixed timer. `--ai-audio-level` (0-1) is
+ * updated at display rate by AiLevelMonitor from the OpenAI output
+ * track, so every syllable visibly moves the core + outer ring. This
+ * reads instantly as "the orb is the voice" and completely avoids the
+ * ambiguity of bars-vs-mic the user flagged. */
+.circle.state-ai-speaking .circle-core {
+  animation: none;
+  transform: scale(calc(1 + 0.09 * var(--ai-audio-level, 0)));
+  transition: transform 0.08s linear;
+}
+.circle.state-ai-speaking .circle-ring {
+  animation: none;
+  opacity: calc(0.3 + 0.5 * var(--ai-audio-level, 0));
+  transform: translate(-50%, -50%) scale(calc(1 + 0.05 * var(--ai-audio-level, 0)));
+  transition: transform 0.08s linear, opacity 0.08s linear;
+}
+.circle.state-ai-speaking .circle-ring-outer {
+  animation: none;
+  opacity: calc(0.15 + 0.55 * var(--ai-audio-level, 0));
+  transform: translate(-50%, -50%) scale(calc(1 + 0.18 * var(--ai-audio-level, 0)));
+  transition: transform 0.08s linear, opacity 0.08s linear;
+}
+.circle.state-ai-speaking .circle-glow {
+  opacity: calc(0.35 + 0.45 * var(--ai-audio-level, 0));
+  transition: opacity 0.08s linear;
+}
+
+/* ─── Robot picker ────────────────────────────────────────────────────── */
+
+.robot-picker {
+  width: min(420px, 92vw);
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 14px 16px;
+  box-shadow: var(--shadow-soft);
+}
+
+.picker-title {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+.robot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.robot-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elev-2);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.robot-card:hover {
+  border-color: var(--border-strong);
+}
+.robot-card.selected {
+  border-color: var(--accent);
+  background: rgba(139, 125, 255, 0.12);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.robot-card .name {
+  font-weight: 600;
+  font-size: 14px;
 }
+.robot-card .id {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.robot-empty {
+  padding: 14px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 13px;
+}
+
+/* ─── Footer ──────────────────────────────────────────────────────────── */
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.footer {
+  padding: 12px 28px 18px;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: var(--text-faint);
+  display: flex;
+  justify-content: center;
+  opacity: 0.55;
+  transition: opacity 0.25s ease;
+}
+.footer:hover {
+  opacity: 0.9;
+}
+.footer a {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 1px dotted currentColor;
+}
+.footer a:hover {
+  color: var(--text-dim);
+}
+
+/* ─── Modal ───────────────────────────────────────────────────────────── */
+
+.modal {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0;
+  background: var(--bg-elev);
+  color: var(--text);
+  width: min(440px, 92vw);
+  box-shadow: var(--shadow-soft);
+}
+.modal::backdrop {
+  background: rgba(8, 9, 13, 0.65);
+  backdrop-filter: blur(4px);
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 22px 24px 20px;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.modal-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-dim);
+}
+.field > span {
+  color: var(--text);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.field input,
+.field select,
+.field textarea {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  outline: none;
+  transition: border-color 0.15s;
+  resize: vertical;
+}
+.field textarea {
+  min-height: 84px;
+}
+.field input:focus,
+.field select:focus,
+.field textarea:focus {
+  border-color: var(--accent);
+}
+.field small {
+  color: var(--text-faint);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.field small code {
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 6px;
+}
+
+.btn {
+  padding: 10px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev-2);
+  color: var(--text);
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, transform 0.05s;
+}
+.btn:hover {
+  border-color: var(--text);
+}
+.btn:active {
+  transform: translateY(1px);
+}
+.btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #0a0b10;
+}
+.btn.primary:hover {
+  background: #9d92ff;
+}
+.btn.ghost {
+  background: transparent;
+  border-color: var(--border);
+  color: var(--text-dim);
+}
+.btn.wide {
+  width: 100%;
+  padding: 12px 16px;
+}
+.btn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.btn[disabled]:hover {
+  border-color: var(--border-strong);
+}
+
+/* ─── Settings tabs ───────────────────────────────────────────────────── */
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.tab {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border-radius: calc(var(--radius-sm) - 3px);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.tab:hover {
+  color: var(--text);
+}
+.tab.active {
+  background: var(--bg-elev-2);
+  color: var(--text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.tab-panels {
+  display: flex;
+  flex-direction: column;
+}
+.tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.tab-panel[hidden] {
+  display: none;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Horizontal layout for Voice + Model. */
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
 }