From 4e2224e9dc02ea88f6cade45258aaebba506f49b Mon Sep 17 00:00:00 2001
From: Pine <wwork.wss@icloud.com>
Date: Tue, 18 Aug 2026 01:37:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(voice):=20=E5=AE=9E=E6=97=B6=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3=E5=AF=B9=E8=AF=9D=E9=A1=B5=EF=BC=88React=20=E5=AE=8C?=
 =?UTF-8?q?=E5=85=A8=E5=A4=8D=E5=88=BB=E5=8E=9F=E7=89=88=20UI=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /voice 页面：中间圆球 + 左右按钮 + 状态图标 + 右下角气泡（进场/淡出/阶梯字号/上限8）+ 噪声门弧线电平，结构类名与原版一致
- s2s WebSocket 客户端 + worklet 音频（mic-capture/audio-playback）+ orb 可视化
- 摄像头实时预览（默认开启）+ 视觉识别状态条（后端 YOLO 推理）
- 底部园区概览条（复用 ParkOverviewStrip），orb-wrap 视窗居中
- 页眉复用 ScreenLayout；左右键导航加入 /voice
- 文档：docs/voice-integration-plan.md
---
 docs/voice-integration-plan.md               |  168 ++
 public/voice-demo/config.js                  |    3 +
 public/voice-demo/index.html                 |  353 +++
 public/voice-demo/main.js                    | 1503 ++++++++++
 public/voice-demo/style.css                  | 2773 ++++++++++++++++++
 public/voice-demo/ui/account.js              |  189 ++
 public/voice-demo/ui/chat.js                 |  422 +++
 public/voice-demo/ui/dom.js                  |   37 +
 public/voice-demo/worklets/audio-playback.js |  211 ++
 public/voice-demo/worklets/mic-capture.js    |  159 +
 public/voice-demo/ws/codec.js                |   57 +
 public/voice-demo/ws/orb-visualizer.js       |   98 +
 public/voice-demo/ws/s2s-ws-client.js        | 1176 ++++++++
 public/voice-worklets/audio-playback.js      |  211 ++
 public/voice-worklets/mic-capture.js         |  159 +
 src/App.jsx                                  |    3 +
 src/config.js                                |    2 +-
 src/pages/VoiceAssistant.jsx                 |  539 ++++
 src/pages/voice-embed.css                    |   12 +
 src/pages/voice-original.css                 | 2773 ++++++++++++++++++
 src/pages/voice-overrides.css                |  135 +
 src/utils/pageNav.js                         |    1 +
 src/voice/codec.js                           |   57 +
 src/voice/orb-visualizer.js                  |   98 +
 src/voice/s2s-ws-client.js                   | 1185 ++++++++
 src/voice/useVisionDetection.js              |  243 ++
 26 files changed, 12566 insertions(+), 1 deletion(-)
 create mode 100644 docs/voice-integration-plan.md
 create mode 100644 public/voice-demo/config.js
 create mode 100644 public/voice-demo/index.html
 create mode 100644 public/voice-demo/main.js
 create mode 100644 public/voice-demo/style.css
 create mode 100644 public/voice-demo/ui/account.js
 create mode 100644 public/voice-demo/ui/chat.js
 create mode 100644 public/voice-demo/ui/dom.js
 create mode 100644 public/voice-demo/worklets/audio-playback.js
 create mode 100644 public/voice-demo/worklets/mic-capture.js
 create mode 100644 public/voice-demo/ws/codec.js
 create mode 100644 public/voice-demo/ws/orb-visualizer.js
 create mode 100644 public/voice-demo/ws/s2s-ws-client.js
 create mode 100644 public/voice-worklets/audio-playback.js
 create mode 100644 public/voice-worklets/mic-capture.js
 create mode 100644 src/pages/VoiceAssistant.jsx
 create mode 100644 src/pages/voice-embed.css
 create mode 100644 src/pages/voice-original.css
 create mode 100644 src/pages/voice-overrides.css
 create mode 100644 src/voice/codec.js
 create mode 100644 src/voice/orb-visualizer.js
 create mode 100644 src/voice/s2s-ws-client.js
 create mode 100644 src/voice/useVisionDetection.js

diff --git a/docs/voice-integration-plan.md b/docs/voice-integration-plan.md
new file mode 100644
index 0000000..7527e4c
--- /dev/null
+++ b/docs/voice-integration-plan.md
@@ -0,0 +1,168 @@
+# DPM 实时语音对话整合方案（复用 live-avatar 云化栈）
+
+> 目标：砍掉数字人/口型/wav2lip 等全部视觉部分，只保留「语音识别 + 对话 + 实时交互」链路；
+> 前端在 DPM React 应用中新增对话页（复用 live-avatar demo 前端的样式与逻辑）；
+> 后端并入 DPM `backend/pyproject.toml`。
+> 基线：live-avatar 云化栈已在 `/Volumes/Pine/mycode/opc/live` 跑通（s2s v0.2.11 + cloud-migration 补丁 + demo 前端）。
+
+---
+
+## 0. 现状对比
+
+| | live-avatar（已跑通） | DPM（现状） |
+|---|---|---|
+| 前端 | 原生 JS demo（index.html / main.js / s2s-ws-client.js / 两个 worklet） | React 19 + Vite + Tailwind；`/ai` 页已有 `AiChatPanel`（文字 + **录音上传式**语音） |
+| 后端 | s2s 独立进程 :8765（VAD 本地 + 云 ASR/LLM/TTS） | FastAPI :8000；已有 `app/asr.py`（dashscope paraformer）、`app/llm.py`（qwen + 工具）、`SSL_CERT_FILE=certifi` 同款处理 |
+| 语音体验 | **实时全双工**：本地 VAD → 流式云 ASR → 流式 LLM → 流式 TTS → 音频回放 | 录音 → 上传 → 转写 → 文字回复（无流式、无 TTS 回音） |
+
+**DPM 缺的正是 live-avatar 栈的实时交互能力**；两边的云凭据/CA 处理已一致（dashscope + certifi），合并成本低。
+
+---
+
+## 1. 两个关键决策点
+
+### 1.1 后端：内嵌进 DPM FastAPI（推荐） vs 独立 s2s 进程
+
+- **推荐：内嵌**。s2s v0.2.11 的 `api/openai_realtime/websocket_router.create_app(pool, stop_event)` 本身就返回一个 FastAPI 应用，
+  可在 DPM `app.main` 里构建管线池后 `app.mount("/v1", s2s_app)`，与现有 `/api/*` 共存、单进程单端口。
+  Tauri 桌面打包只需一个后端进程，无子进程管理。
+- 备选：s2s 独立跑 :8765，DPM 负责拉起/守护。改动最小，但两进程两端口，打包与部署更重。
+
+### 1.2 前端：iframe 内嵌（推荐 v1） vs React 组件移植（v2）
+
+- **推荐 v1：iframe 内嵌**。把 live-avatar `demo/` 目录拷入 DPM `public/voice-demo/`（去掉数字人 iframe/视觉元素），
+  React 新增 `VoiceAssistant.jsx`（路由 `/voice`）里 `<iframe src="/voice-demo/">` 全屏。
+  **100% 复用现有样式与逻辑、零 React 改写、风险最低**；WS 地址由 `voice-demo/config.js` 按 `VITE_API_BASE` 派生。
+- v2：React 组件移植。把 `s2s-ws-client.js` + 两个 worklet 拷入 `src/voice/`，用 hooks 驱动、JSX 重绘圆球/气泡，
+  与 DPM 布局/Tailwind 完全融合；工作量较大，建议先 v1 跑通再决定。
+
+---
+
+## 2. 后端合并清单
+
+### 2.1 `backend/pyproject.toml`
+
+```toml
+dependencies = [
+    # ...现有依赖（fastapi/uvicorn/dashscope/certifi 已覆盖）...
+    # s2s 云化栈（path 依赖，指向补丁后的 s2s-cloud；或 vendored 到 backend/vendor/）
+    "speech-to-speech @ file:///Volumes/Pine/mycode/opc/live/s2s-cloud",
+    # s2s 运行所需（base 依赖里 Darwin 专用的 mlx/transformers 等不要全装）
+    "torch>=2.4",        # VAD(silero) 本地必需；CPU 亦可
+    "numpy>=1.26",
+    "scipy>=1.10",
+    "httpx>=0.28",
+    "websockets>=12",
+    "nltk==3.9.4",
+    "openai==2.28.0",
+    "soundfile>=0.13",
+]
+```
+
+> 安装用 `pip install -e "backend[voice]" --no-deps` + 手动补依赖，避免 s2s base 依赖把 mlx/transformers 等大件拖进来。
+> `torch` 是唯一的大依赖（VAD 本地必需）；若部署机无 GPU，CPU torch 跑 silero 足够。
+
+### 2.2 配置（`app/config.py` + `backend/.env`）
+
+```env
+DASHSCOPE_API_KEY=sk-...          # 已有（与 app/asr.py、app/llm.py 共用）
+S2S_ENABLED=1
+S2S_NUM_PIPELINES=4               # 并发会话数
+S2S_WS_PATH=/v1/realtime
+S2S_STT_MODEL=qwen3-asr-flash-realtime
+S2S_LLM_MODEL=qwen-plus
+S2S_TTS_MODEL=qwen3-tts-flash-realtime
+S2S_TTS_VOICE=Cherry
+```
+
+### 2.3 代码（新 `app/s2s_bridge.py` + 挂载）
+
+1. `s2s_bridge.py`：读取 Settings → 用与 `start_backend.sh` 等价的参数构建管线池
+   （`--stt dashscope-asr --llm_backend chat-completions --tts qwen3-cloud --enable_live_transcription false`），
+   返回 `websocket_router.create_app(pool, stop_event)`。
+2. `app/main.py` lifespan：`ENABLED` 时启动池 → `app.mount(settings.S2S_WS_PATH, s2s_app)`；关闭时 stop。
+3. 现有 `/api/ai/chat`、`/api/ai/asr` 保留（旧 AiChatPanel 流程不破坏）。
+
+---
+
+## 3. 前端合并清单
+
+1. `src/pages/VoiceAssistant.jsx`（新）：
+   - 全屏 `<iframe src="/voice-demo/" />`（v1），或未来 React 移植版。
+   - 加入 `App.jsx` 路由：`<Route path="/voice" element={<VoiceAssistant />} />`（建议放在 ScreenLayout 内或独立全屏）。
+2. `public/voice-demo/`：拷贝 live-avatar `demo/`（index.html / main.js / style.css / ws/ / worklets/ / textchat.html），
+   并删除数字人 iframe（`index.html` 里的 `#avatar-frame` → 背景改纯色/园区图）。
+3. `public/voice-demo/config.js`：暴露 `window.VOICE_WS_URL`（从 `VITE_API_BASE` 派生 `ws://<host>:<port>/v1/realtime`）。
+4. 麦克风权限：
+   - 浏览器开发模式：`localhost` 直接可用。
+   - **Tauri v2 打包**：`src-tauri/tauri.conf.json` 需 `app.macOSPrivateApi: true`（macOS 麦克风）+ 系统隐私授权说明；
+     Windows 需在 manifest/权限描述中声明 microphone。
+
+---
+
+## 4. 实施步骤
+
+| 步骤 | 内容 | 工作量 |
+|---|---|---|
+| P1 | 后端内嵌：pyproject 加依赖 → s2s_bridge.py → mount → 冒烟（WS 连得上、说话→回复→出声） | 0.5–1 天 |
+| P2 | 前端：public/voice-demo 拷贝去视觉化 → VoiceAssistant.jsx + 路由 → WS 指向 DPM 后端 | 0.5 天 |
+| P3 | 联调：DPM 页面语音对话全链路 + 并发验证 | 0.5 天 |
+| P4（可选） | React 原生移植（hooks 驱动 client + worklets，Tailwind 重绘 UI） | 1–2 天 |
+
+---
+
+## 5. 风险与注意
+
+- **torch 体积**：VAD 本地必需（s2s 管线结构固定 VAD 本地），CPU 版可接受；若部署机极简可评估 VAD 上云（不推荐，延迟差）。
+- **单管线槽**：`S2S_NUM_PIPELINES` 默认 1 → 并发对话会拒连；按需调到 4。
+- **WS 鉴权**：内网/桌面场景可无鉴权；如需，在 session.update 里带 token 校验。
+- **iframe 限制**：v1 iframe 内样式隔离、无法用 DPM 主题；v2 移植可解决。
+- **Tauri 麦克风**：打包前务必配置 macOSPrivateApi + 权限描述，否则桌面版无声/无权限。
+
+---
+
+## 附录 A · 视觉触发子系统（USB 摄像头 + 桌面端检测）
+
+> 目标：大屏前 USB 摄像头拍观众；检测有人**正对且停留 ≥10 秒** → 主动问候 + 全屏联动；问候后**静默 60 秒**。
+
+### A.1 架构与数据通路
+
+```
+大屏机（Tauri 应用，fullscreen）
+  └─ USB 摄像头（大屏前，拍观众）
+       └─ webview getUserMedia（一路视频流）
+            ├─ 持续检测：MediaPipe FaceMesh 1~2fps（本机、不出设备）
+            │     ├─ 头姿 yaw/pitch 各 ±15° = 正对
+            │     └─ 连续 10s 正对 → 触发（窗口内 ≥80% 帧正对，防抖）
+            └─ 按需抓帧：LLM 决定时 canvas 取当前帧 → input_image → 云 qwen3-vl（人数/人物）
+触发动作：
+  ① 主动问候：client.sendUserText("检测到有人正对摄像头…请主动问候") + requestResponse()
+     → s2s 走 LLM 生成问候语 → TTS 播报（零后端改动，复用现有 WS 协议）
+  ② 全屏联动：调后端 → event_bus / mqtt.publish → 各屏响应
+静默窗口：问候触发后 60s 冷却，期内检测照跑但不触发
+```
+
+### A.2 Tauri 摄像头权限（必须配置）
+
+- **macOS**：`tauri.conf.json` → `app.macOSPrivateApi: true`；Info.plist 加
+  `NSCameraUsageDescription` / `NSMicrophoneUsageDescription`（麦克风语音对话也需要）。
+- **Windows（NSIS 打包目标）**：WebView2 的 getUserMedia 跟随系统隐私设置
+  （设置 → 隐私和安全性 → 相机/麦克风 → 允许该应用）；安装包建议在应用清单声明设备能力。
+- 大屏机摄像头常开：确认系统隐私里该应用允许相机，否则检测与抓帧同时失效。
+
+### A.3 隐私与合规
+
+- 持续检测帧**仅在本机内存处理、即用即弃**，不上云；只有 LLM 决定抓的那一帧发往百炼 VLM。
+- 大屏前采集观众人脸属个人信息处理 → 大屏旁需公示"影像识别用于互动服务"。
+
+### A.4 落地清单（并入 P2/P3）
+
+| 项 | 说明 |
+|---|---|
+| 前端新增 `useCameraDetect` hook | getUserMedia + MediaPipe FaceMesh + 状态机（IDLE→FACING→TRIGGER→SILENT） |
+| 依赖 | `@mediapipe/tasks-vision`（face_detector + face_landmarker） |
+| 参数化 | 停留 10s / 静默 60s / 角度 ±15° / 频率 1~2fps → 配置文件或设置页 |
+| 触发动作 | 主动问候（sendUserText+create）+ MQTT 联动（后端 API） |
+| 首对话抓帧 | 与检测共用同一路视频流，canvas 取帧 → input_image → qwen3-vl |
+
+> 注：视觉子系统是**可选增强**，不影响主语音对话方案；摄像头/检测不可用时语音链路照常工作。
diff --git a/public/voice-demo/config.js b/public/voice-demo/config.js
new file mode 100644
index 0000000..85a427c
--- /dev/null
+++ b/public/voice-demo/config.js
@@ -0,0 +1,3 @@
+// voice-demo 语音对话页 WS 地址：自动取自当前页面 hostname（与 DPM 后端同机/同网段）
+// 如服务器 IP 是 192.168.1.9 → ws://192.168.1.9:8765/v1/realtime
+window.VOICE_WS_URL = window.VOICE_WS_URL || ("ws://" + location.hostname + ":8765/v1/realtime");
diff --git a/public/voice-demo/index.html b/public/voice-demo/index.html
new file mode 100644
index 0000000..8e6975a
--- /dev/null
+++ b/public/voice-demo/index.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<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 (WebSocket)</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=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css?v=3" />
+  </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 style="background:#0d1117" class="booting">
+    <!-- Digital-human video, fixed as a full-viewport background layer -->
+    <div id="avatar-stage" class="avatar-stage" aria-hidden="true">
+    </div>
+
+    <div id="app">
+      <header class="topbar">
+        <div class="topbar-right">
+          <!-- HF login chip / sign-in pill. Populated by ui/account.js; only
+               shown when the deploy runs behind a load balancer with OAuth. -->
+          <div id="account" class="account" hidden></div>
+          <button id="about-btn-m" class="icon-btn about-btn-mobile" title="About this space" aria-label="About this space">
+            <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="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+          </button>
+          <button id="tools-btn" class="icon-btn" title="Tools" aria-label="Tools">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
+          </button>
+          <button id="chat-btn" class="icon-btn" title="Conversation history" aria-label="Conversation history">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span id="chat-badge" class="chat-badge" aria-hidden="true"></span>
+          </button>
+          <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">
+          <div id="mic-gate" class="mic-gate">
+            <svg id="mic-gate-arc" class="mic-gate-arc" viewBox="0 0 100 100" aria-hidden="true">
+              <path id="mga-track" class="mga-track" fill="none" />
+              <path id="mga-fill" class="mga-fill" fill="none" />
+              <path id="mga-hit" class="mga-hit" fill="none" />
+              <circle id="mga-handle" class="mga-handle" r="3" />
+            </svg>
+            <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>
+          </div>
+
+          <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>
+        <p id="circle-subcaption" class="circle-subcaption" hidden></p>
+
+        <div id="queue-actions" class="queue-actions" hidden>
+          <button id="join-queue-btn" class="join-queue-btn" type="button" hidden>
+            Join now
+          </button>
+          <button id="leave-queue-btn" class="leave-queue-btn" type="button" hidden>
+            Leave queue
+          </button>
+        </div>
+
+        <div id="text-input-bar" class="text-input-bar">
+          <input id="text-input" type="text" class="text-input" placeholder="Type a message..." autocomplete="off" spellcheck="false" />
+          <button id="text-send-btn" class="text-send-btn" type="button" aria-label="Send" title="Send">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+          </button>
+        </div>
+      </main>
+
+      
+    </div>
+
+    <!-- Ephemeral chat bubbles anchored to the top-right -->
+    <div id="bubble-stack" class="bubble-stack" aria-live="polite" aria-atomic="false"></div>
+
+    <!-- Webcam self-view, shown bottom-left while the camera tool is enabled -->
+    <div id="cam-pip" class="cam-pip" aria-hidden="true">
+      <video id="cam-video" class="cam-video" autoplay playsinline muted></video>
+      <span class="cam-flash" aria-hidden="true"></span>
+      <span class="cam-label">camera</span>
+    </div>
+
+    <!-- Conversation history panel (overlay) -->
+    <div id="chat-panel" class="chat-panel">
+      <div id="chat-panel-backdrop" class="chat-panel-backdrop"></div>
+      <div class="chat-panel-inner">
+        <header class="chat-panel-header">
+          <h3>Conversation</h3>
+          <button id="chat-panel-close" class="icon-btn" 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 id="chat-history" class="chat-history"></div>
+      </div>
+    </div>
+
+    <dialog id="about-modal" class="modal about-modal">
+      <div class="modal-content">
+        <header class="modal-header">
+          <h2>About</h2>
+          <button id="about-close" class="icon-btn" 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>
+
+        <!-- General intro to the speech-to-speech project -->
+        <div class="about-intro">
+          <p>Speech-to-speech is Hugging Face's open framework for real-time voice agents. Rather than one end-to-end model, it chains four open models from the Hub (speech detection, transcription, a vision-language model, and synthesis), so any stage can be swapped or run locally. This demo wires that pipeline to hosted inference.</p>
+          <a class="about-repo" href="https://github.com/huggingface/speech-to-speech" target="_blank" rel="noopener">View the project on GitHub<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+        </div>
+
+        <!-- The backend, shown as the path a turn actually travels -->
+        <div class="about-pipeline">
+          <p class="pipeline-title">The pipeline</p>
+          <ol class="pipeline">
+            <li class="pipe-endpoint">You speak</li>
+            <li class="pipe-stage">
+              <span class="pipe-tag">VAD</span>
+              <span class="pipe-job">detects speech</span>
+              <a class="pipe-model" href="https://github.com/snakers4/silero-vad" target="_blank" rel="noopener">silero-vad<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+            </li>
+            <li class="pipe-stage">
+              <span class="pipe-tag">STT</span>
+              <span class="pipe-job">transcribes it</span>
+              <a class="pipe-model" href="https://huggingface.co/nvidia/parakeet-tdt-1.1b" target="_blank" rel="noopener">nvidia/parakeet-tdt-1.1b<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+            </li>
+            <li class="pipe-stage">
+              <span class="pipe-tag">VLM</span>
+              <span class="pipe-job">analyses and composes the reply <span class="pipe-note">· via <a class="cerebras-credit" href="https://cerebras.ai" target="_blank" rel="noopener"><svg class="cerebras-mark" viewBox="0 0 50 50" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.4186 5.62713C24.2806 5.62713 19.353 7.6682 15.7199 11.3013C12.0868 14.9345 10.0457 19.862 10.0457 25C10.0457 30.1381 12.0868 35.0656 15.7199 38.6988C19.353 42.3319 24.2806 44.373 29.4186 44.373V47.2917C17.1061 47.2917 7.12695 37.3105 7.12695 24.998C7.12695 12.6855 17.104 2.7063 29.4165 2.7063V5.62505L29.4186 5.62713ZM39.3186 13.2875C37.7794 11.9809 35.9971 10.9915 34.0741 10.3761C32.1512 9.76067 30.1256 9.53147 28.1137 9.70166C26.1019 9.87185 24.1435 10.4381 22.3513 11.3677C20.559 12.2974 18.9683 13.5722 17.6704 15.1189C16.3726 16.6655 15.3933 18.4534 14.7888 20.3798C14.1844 22.3062 13.9667 24.3332 14.1483 26.344C14.33 28.3548 14.9073 30.3099 15.8472 32.0968C16.787 33.8838 18.0709 35.4673 19.6249 36.7563L17.7478 38.9938C15.9126 37.4545 14.3987 35.5687 13.2924 33.4442C12.1862 31.3197 11.5092 28.9981 11.3003 26.6119C11.0914 24.2258 11.3545 21.8219 12.0747 19.5374C12.7949 17.253 13.9581 15.1328 15.4978 13.298C17.0373 11.4628 18.9233 9.94877 21.0479 8.84247C23.1726 7.73618 25.4944 7.05923 27.8807 6.8503C30.267 6.64136 32.6711 6.90453 34.9557 7.62477C37.2403 8.34501 39.3607 9.50822 41.1957 11.048L39.3186 13.2875ZM34.6207 15.0459C31.9818 13.6829 28.9113 13.4172 26.0776 14.3068C23.2438 15.1964 20.876 17.1691 19.4895 19.7958C18.1029 22.4224 17.8099 25.4903 18.6741 28.332C19.5384 31.1736 21.4899 33.5589 24.104 34.9688L22.7374 37.5521C19.4721 35.7617 17.0418 32.7592 15.9707 29.1927C14.8996 25.6261 15.2737 21.7815 17.0123 18.4883C18.7509 15.1952 21.7146 12.7176 25.2637 11.5903C28.8129 10.463 32.663 10.7763 35.9832 12.4625L34.6207 15.0459ZM29.4165 17.7896C27.5042 17.7896 25.6702 18.5493 24.318 19.9015C22.9658 21.2537 22.2061 23.0877 22.2061 25C22.2061 26.9124 22.9658 28.7464 24.318 30.0986C25.6702 31.4508 27.5042 32.2105 29.4165 32.2105V35.1313C26.7296 35.1313 24.1526 34.0639 22.2527 32.1639C20.3527 30.2639 19.2853 27.687 19.2853 25C19.2853 22.3131 20.3527 19.7362 22.2527 17.8362C24.1526 15.9362 26.7296 14.8688 29.4165 14.8688V17.7896Z" fill="#F15A29"/><path d="M32.0981 22.5749C31.7875 22.2404 31.4295 21.9534 31.0356 21.7228C30.6925 21.519 30.3014 21.4097 29.9023 21.4062C29.371 21.4062 28.896 21.5041 28.4773 21.6978C28.0725 21.8802 27.7089 22.1425 27.4081 22.469C27.1074 22.7955 26.8758 23.1795 26.7273 23.5978C26.5731 24.0207 26.4981 24.4645 26.4981 24.9124C26.4981 25.3666 26.5731 25.8082 26.7273 26.227C26.877 26.6449 27.1091 27.0286 27.4096 27.3553C27.7102 27.682 28.0733 27.9451 28.4773 28.1291C28.8939 28.3228 29.3731 28.4207 29.9023 28.4207C30.3523 28.4207 30.771 28.3249 31.1564 28.1395C31.5481 27.952 31.8856 27.6707 32.146 27.3228L34.0794 29.4187C33.7877 29.7103 33.4544 29.9624 33.0752 30.1749C32.374 30.566 31.6108 30.8338 30.8189 30.9666C30.4648 31.0207 30.1585 31.0499 29.9023 31.0499C29.0617 31.0552 28.2271 30.9069 27.4398 30.6124C26.6954 30.3371 26.0144 29.914 25.4377 29.3687C24.8643 28.8208 24.4078 28.1624 24.096 27.4332C23.7572 26.6366 23.5883 25.778 23.6002 24.9124C23.6002 23.9874 23.7669 23.1478 24.096 22.3916C24.4085 21.6624 24.8627 21.0041 25.4356 20.4562C26.0148 19.9124 26.696 19.4895 27.4398 19.2145C28.2271 18.92 29.0617 18.7717 29.9023 18.777C30.6419 18.777 31.3856 18.9187 32.1356 19.202C32.8877 19.4895 33.5627 19.952 34.1023 20.5541L32.0981 22.5749Z" fill="#fff"/></svg>Cerebras</a></span></span>
+              <a class="pipe-model" href="https://huggingface.co/google/gemma-4-31B-it" target="_blank" rel="noopener">google/gemma-4-31B-it<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+            </li>
+            <li class="pipe-stage">
+              <span class="pipe-tag">TTS</span>
+              <span class="pipe-job">speaks it back</span>
+              <a class="pipe-model" href="https://huggingface.co/Qwen/Qwen3-TTS-12Hz-1.7B-CustomVoice" target="_blank" rel="noopener">Qwen/Qwen3-TTS-12Hz-1.7B-CustomVoice<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+            </li>
+            <li class="pipe-endpoint">The orb replies</li>
+          </ol>
+        </div>
+      </div>
+    </dialog>
+
+    <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" id="conn-field">
+              <span id="conn-label">Speech-to-speech server URL</span>
+              <input id="lb-url" type="text" autocomplete="off" spellcheck="false" placeholder="http://localhost:port" />
+              <small id="conn-hint">
+                URL of your speech-to-speech server, e.g.
+                <code>http://localhost:8080</code> (the app adds <code>/v1/realtime</code>).
+              </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 for="voice-upload" class="btn-upload" role="button" tabindex="0" id="voice-upload-btn">📤 Upload</label>
+                <input type="file" id="voice-upload" accept="audio/*" style="display:none">
+              </label>
+            </div>
+
+            <div class="field">
+              <span class="field-head">
+                Noise gate
+                <span id="gate-value" class="field-value">Off</span>
+              </span>
+              <div class="gate">
+                <div class="gate-track" aria-hidden="true">
+                  <div id="gate-meter-fill" class="gate-meter-fill"></div>
+                  <input
+                    id="noise-gate"
+                    type="range"
+                    min="-66"
+                    max="-3"
+                    step="1"
+                    value="-50"
+                    aria-label="Noise gate threshold"
+                  />
+                </div>
+                <div class="gate-ends">
+                  <span>Off</span>
+                  <span>−3 dB</span>
+                </div>
+              </div>
+              <small>
+                Mutes the mic below the handle so room noise isn't sent. Slide fully
+                left to turn it off; the bar shows your live input while in a call.
+              </small>
+            </div>
+
+            <label class="field">
+              <span>Instructions</span>
+              <textarea id="instructions" rows="5" placeholder="You are a friendly voice assistant..."></textarea>
+            </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>
+
+    <dialog id="tools-modal" class="modal">
+      <div class="modal-content">
+        <header class="modal-header">
+          <h2>Tools</h2>
+          <button id="tools-close" class="icon-btn" 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>
+
+        <p class="tools-intro">Let the assistant act during the conversation. Changes apply live.</p>
+
+        <div class="tool-list">
+          <div class="tool-row" id="tool-web-row">
+            <div class="tool-info">
+              <span class="tool-name">Web search</span>
+              <span class="tool-desc">Look things up on Google, via Serper.</span>
+            </div>
+            <label class="switch">
+              <input id="tool-web" type="checkbox" />
+              <span class="switch-track" aria-hidden="true"></span>
+            </label>
+          </div>
+          <label class="field tools-key">
+            <span>Search API key</span>
+            <input id="search-key" type="password" autocomplete="off" spellcheck="false" />
+            <small id="tool-web-hint"></small>
+          </label>
+
+          <div class="tool-row tool-row-sep" id="tool-cam-row">
+            <div class="tool-info">
+              <span class="tool-name">Camera</span>
+              <span class="tool-desc">Let the assistant see through your webcam.</span>
+            </div>
+            <label class="switch">
+              <input id="tool-cam" type="checkbox" />
+              <span class="switch-track" aria-hidden="true"></span>
+            </label>
+          </div>
+          <small id="tool-cam-hint" class="tool-hint">A live preview shows bottom-left while the camera is on.</small>
+        </div>
+      </div>
+    </dialog>
+
+    <!-- Shown when the per-day conversation budget is spent (mid-call or at
+         start). Title / message / CTA / note are filled per tier by
+         ui/account.js. The hero is the HF mark — a friendly smiling face. -->
+    <dialog id="limit-modal" class="modal limit-modal">
+      <div class="modal-content limit-card">
+        <button id="limit-close" class="icon-btn limit-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>
+        <div class="limit-badge" aria-hidden="true">
+          <svg class="hf-logo" viewBox="0 0 95 88" fill="none" aria-hidden="true"><path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z"/><path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"/><path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd"/><path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"/><path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"/><path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"/><path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"/></svg>
+        </div>
+        <h2 id="limit-title" class="limit-title">That's a wrap for now</h2>
+        <p id="limit-msg" class="limit-msg"></p>
+        <a id="limit-cta" class="btn primary wide limit-cta" href="#"></a>
+        <p id="limit-note" class="limit-note"></p>
+      </div>
+    </dialog>
+
+    <script src="config.js"></script>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
diff --git a/public/voice-demo/main.js b/public/voice-demo/main.js
new file mode 100644
index 0000000..1e6f701
--- /dev/null
+++ b/public/voice-demo/main.js
@@ -0,0 +1,1503 @@
+// @ts-check
+/**
+ * Minimal voice conversation app, talking to a Hugging Face speech-to-speech
+ * backend over **WebSocket** (drop-in alternative to the WebRTC variant).
+ *
+ * Click the orb -> we ask for the mic, POST a session on the LB, open a
+ * WebSocket on the routed compute endpoint, push session.update + mic
+ * audio, play back the TTS audio. The orb visually reflects the live
+ * state (idle, connecting, listening, user-speaking, processing,
+ * ai-speaking).
+ *
+ * The only meaningful difference vs. the WebRTC main.js is that the
+ * client owns its own AudioContext (no `attachOutputTrack`), so we hand
+ * it the MediaStream directly.
+ *
+ * @typedef {"idle" | "connecting" | "queued" | "your-turn" | "listening" | "user-speaking" | "processing" | "ai-speaking" | "error"} AppState
+ */
+
+import { S2sWsRealtimeClient } from "./ws/s2s-ws-client.js";
+import { $, truncateError, DEBUG } from "./ui/dom.js";
+import { ChatView } from "./ui/chat.js";
+import { Account } from "./ui/account.js";
+
+const DEFAULT_VOICE = "Aiden";
+const DEFAULT_INSTRUCTIONS =
+  "你是一个友好的中文语音助手。请用中文简洁地回答用户的问题，语气温暖自然。";
+
+// Appended to the user's instructions whenever at least one tool is enabled.
+// Stops the model from announcing capabilities ("Yes, I can search") and then
+// idling for the next turn — it should act immediately in the same response.
+const TOOL_USE_HINT =
+  " When the user's request calls for one of your tools, do not describe your " +
+  "capabilities or say you can do it and wait for another turn. Instead, say " +
+  'a brief acknowledgement like "Let me search for that..." and call the tool ' +
+  "right away in the same response.";
+
+const STORAGE_KEYS = {
+  // Direct s2s server URL, used only when the deploy has no LOAD_BALANCER_URL
+  // (in LB mode the browser never learns the LB address — it POSTs /api/session).
+  directUrl: "s2s.ws.directUrl",
+  voice: "s2s.ws.voice",
+  instructions: "s2s.ws.instructions",
+  tools: "s2s.ws.tools",
+  searchKey: "s2s.ws.searchKey",
+  noiseGate: "s2s.ws.noiseGate",
+};
+
+// ── Noise gate ──────────────────────────────────────────────────────────────
+// The Settings cursor sets the gate's open threshold in dBFS. Its leftmost
+// position is an OFF detent (gate disabled, pure passthrough); the rest of the
+// travel is the active threshold. The cursor shares the meter's dB axis, so the
+// handle sits on the level bar — raise it until room noise stops lighting it up.
+// The slider range IS the shared axis: the live meter fill and the threshold
+// thumb both map across [GATE_OFF_DB, GATE_MAX_DB], so the thumb sits exactly
+// where the gate cuts on the same scale as the level bar.
+const GATE_OFF_DB = -66; // slider minimum = off / bottom of the meter axis
+const GATE_MAX_DB = -3; // slider maximum = most aggressive / top of the meter axis
+const GATE_DEFAULT_DB = -50; // first-run default: a gentle gate, enabled
+
+/** @param {number} thresholdDb @returns {import("./ws/s2s-ws-client.js").NoiseGate} */
+function gateParams(thresholdDb) {
+  return { enabled: thresholdDb > GATE_OFF_DB, thresholdDb };
+}
+
+// ── Tools ─────────────────────────────────────────────────────────────────
+// Function tools we declare to the backend. The model decides when to call
+// one; the executor below runs it and returns the result (see runTool).
+/** @type {Record<string, import("./ws/s2s-ws-client.js").ToolDef>} */
+const TOOL_DEFS = {
+  web_search: {
+    type: "function",
+    name: "web_search",
+    description:
+      "Search the web for current or factual information you don't already know " +
+      "(news, prices, facts, documentation). Returns the top results with titles, " +
+      "snippets and URLs.",
+    parameters: {
+      type: "object",
+      properties: { query: { type: "string", description: "The search query." } },
+      required: ["query"],
+    },
+  },
+  camera_snapshot: {
+    type: "function",
+    name: "camera_snapshot",
+    description:
+      "Capture the current frame from the user's webcam so you can see what they " +
+      "are showing you. Use it whenever the user refers to something visual or " +
+      "asks you to look.",
+    parameters: { type: "object", properties: {}, required: [] },
+  },
+};
+
+/** Longest edge of the snapshot sent to the VLM, in px (keeps payload sane). */
+const SNAPSHOT_MAX_EDGE = 768;
+const SNAPSHOT_QUALITY = 0.7;
+
+function loadSettings() {
+  return {
+    directUrl: localStorage.getItem(STORAGE_KEYS.directUrl) || "",
+    voice: localStorage.getItem(STORAGE_KEYS.voice) || DEFAULT_VOICE,
+    instructions: localStorage.getItem(STORAGE_KEYS.instructions) || DEFAULT_INSTRUCTIONS,
+    noiseGate: loadGateThreshold(),
+  };
+}
+
+/** Stored gate threshold (dBFS), clamped to the slider range. Defaults to a
+ * gentle enabled gate (GATE_DEFAULT_DB) when the user hasn't set one yet. */
+function loadGateThreshold() {
+  const stored = localStorage.getItem(STORAGE_KEYS.noiseGate);
+  // getItem returns null when unset, and Number(null) === 0 (finite!), so guard
+  // the missing/empty case explicitly before coercing — otherwise the default
+  // never fires and 0 clamps to the slider max.
+  if (stored === null || stored === "") return GATE_DEFAULT_DB;
+  const raw = Number(stored);
+  if (!Number.isFinite(raw)) return GATE_DEFAULT_DB;
+  return Math.min(GATE_MAX_DB, Math.max(GATE_OFF_DB, Math.round(raw)));
+}
+
+/** @param {ReturnType<typeof loadSettings>} s */
+function saveSettings(s) {
+  localStorage.setItem(STORAGE_KEYS.directUrl, s.directUrl);
+  localStorage.setItem(STORAGE_KEYS.voice, s.voice);
+  localStorage.setItem(STORAGE_KEYS.instructions, s.instructions);
+  localStorage.setItem(STORAGE_KEYS.noiseGate, String(s.noiseGate));
+}
+
+/** @returns {{ web_search: boolean, camera_snapshot: boolean }} */
+function loadTools() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEYS.tools) || "{}");
+    // Both tools default ON (web search still only activates when a key exists).
+    // We never call getUserMedia on page load — the camera only actually starts
+    // on a user gesture (conversation start), so a default-on flag doesn't
+    // silently resume the webcam; an explicit saved `false` is respected.
+    return {
+      web_search: raw.web_search ?? true,
+      camera_snapshot: raw.camera_snapshot ?? false,
+    };
+  } catch {
+    return { web_search: true, camera_snapshot: true };
+  }
+}
+
+function saveTools() {
+  localStorage.setItem(STORAGE_KEYS.tools, JSON.stringify(toolsEnabled));
+}
+
+/** @type {Record<AppState, { caption: string; disabled: boolean }>} */
+const STATE_VIEWS = {
+  idle:            { caption: "Tap to start",  disabled: false },
+  connecting:      { caption: "Connecting",    disabled: true  },
+  queued:          { caption: "Finding you a spot…", disabled: true },
+  "your-turn":     { caption: "You're up! 🎉", 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",
+  queued: "state-queued",
+  "your-turn": "state-your-turn",
+  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"]);
+
+/** @type {HTMLButtonElement} */
+const circleBtn = $("#main-circle");
+/** @type {HTMLParagraphElement} */
+const circleCaption = $("#circle-caption");
+/** @type {HTMLParagraphElement} */
+const circleSubcaption = $("#circle-subcaption");
+/** @type {HTMLElement} */
+const orbWrap = $(".orb-wrap");
+/** @type {HTMLButtonElement} */
+const micBtn = $("#mic-btn");
+/** @type {HTMLButtonElement} */
+const stopBtn = $("#stop-btn");
+/** @type {HTMLElement} */
+const queueActions = $("#queue-actions");
+/** @type {HTMLButtonElement} */
+const joinQueueBtn = $("#join-queue-btn");
+/** @type {HTMLButtonElement} */
+const leaveQueueBtn = $("#leave-queue-btn");
+
+/** @type {HTMLButtonElement} */
+const settingsBtn = $("#settings-btn");
+/** @type {HTMLDialogElement} */
+const settingsModal = $("#settings-modal");
+
+/** @type {HTMLDialogElement} */
+const aboutModal = $("#about-modal");
+/** @type {HTMLButtonElement} */
+const aboutClose = $("#about-close");
+
+/** @type {HTMLButtonElement} */
+const toolsBtn = $("#tools-btn");
+/** @type {HTMLDialogElement} */
+const toolsModal = $("#tools-modal");
+/** @type {HTMLButtonElement} */
+const toolsClose = $("#tools-close");
+/** @type {HTMLInputElement} */
+const toolWebSwitch = $("#tool-web");
+/** @type {HTMLInputElement} */
+const toolCamSwitch = $("#tool-cam");
+/** @type {HTMLElement} */
+const toolWebRow = $("#tool-web-row");
+/** @type {HTMLElement} */
+const toolWebHint = $("#tool-web-hint");
+/** @type {HTMLElement} */
+const toolCamHint = $("#tool-cam-hint");
+/** @type {HTMLInputElement} */
+const searchKeyInput = $("#search-key");
+/** @type {HTMLElement} */
+const camPip = $("#cam-pip");
+/** @type {HTMLVideoElement} */
+const camVideo = $("#cam-video");
+
+/** @type {HTMLInputElement} */
+const inputLbUrl = $("#lb-url");
+/** @type {HTMLElement} */
+const connField = $("#conn-field");
+/** @type {HTMLElement} */
+const connHint = $("#conn-hint");
+/** @type {HTMLSelectElement} */
+const inputVoice = $("#voice");
+/** @type {HTMLInputElement} */
+const inputVoiceUpload = $("#voice-upload");
+/** @type {HTMLElement} */
+const voiceUploadBtn = $("#voice-upload-btn");
+/** @type {HTMLTextAreaElement} */
+const inputInstructions = $("#instructions");
+
+// Voice upload: clicking the Upload button opens the file picker
+voiceUploadBtn.addEventListener("click", () => inputVoiceUpload.click());
+voiceUploadBtn.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" || e.key === " ") inputVoiceUpload.click();
+});
+// After selecting a file, upload it and set as current voice
+inputVoiceUpload.addEventListener("change", async () => {
+  const file = inputVoiceUpload.files?.[0];
+  if (!file) return;
+  try {
+    voiceUploadBtn.textContent = "⏳ Uploading...";
+    const form = new FormData();
+    form.append("file", file);
+    const resp = await fetch("/api/upload_voice", { method: "POST", body: form });
+    if (!resp.ok) throw new Error(`Upload failed: ${resp.status}`);
+    const data = await resp.json();
+    // Add uploaded voice as a selectable option
+    const opt = document.createElement("option");
+    opt.value = data.path;
+    opt.textContent = `📁 ${data.filename}`;
+    inputVoice.insertBefore(opt, inputVoice.firstChild);
+    inputVoice.value = data.path;
+    voiceUploadBtn.textContent = "✓ Uploaded";
+    setCaption(`Voice sample "${data.filename}" uploaded — restart to apply`, "muted");
+  } catch (err) {
+    setCaption(`Upload error: ${err.message}`, "error");
+    voiceUploadBtn.textContent = "📤 Upload";
+  }
+  inputVoiceUpload.value = "";
+  setTimeout(() => { voiceUploadBtn.textContent = "📤 Upload"; }, 3000);
+});
+/** @type {HTMLInputElement} */
+const inputNoiseGate = $("#noise-gate");
+/** @type {HTMLElement} */
+const gateValue = $("#gate-value");
+/** @type {HTMLElement} */
+const gateMeterFill = $("#gate-meter-fill");
+/** @type {HTMLElement} */
+const micGate = $("#mic-gate");
+const mgaArc = /** @type {SVGSVGElement} */ (document.querySelector("#mic-gate-arc"));
+const mgaTrack = /** @type {SVGPathElement} */ (document.querySelector("#mga-track"));
+const mgaFill = /** @type {SVGPathElement} */ (document.querySelector("#mga-fill"));
+const mgaHit = /** @type {SVGPathElement} */ (document.querySelector("#mga-hit"));
+const mgaHandle = /** @type {SVGCircleElement} */ (document.querySelector("#mga-handle"));
+
+/** @type {HTMLButtonElement} */
+const restartBtn = $("#restart-conversation");
+/** @type {HTMLElement} */
+const restartHint = $("#restart-hint");
+const settingsForm = /** @type {HTMLFormElement} */ (settingsModal.querySelector("form"));
+
+/** @type {AppState} */
+let currentState = "idle";
+let settings = loadSettings();
+
+// ── Connection target ────────────────────────────────────────────────────────
+// Three modes, decided by the deploy via /api/config:
+//   • SPEECH_TO_SPEECH_URL set -> direct mode pinned by the deploy: the browser
+//     connects straight to that URL, shown read-only in Settings. Overrides the
+//     load balancer entirely.
+//   • LOAD_BALANCER_URL set  -> original flow: POST the same-origin /api/session
+//     proxy (the server forwards to the LB; the LB address is never sent here).
+//   • neither (allowDirect)  -> the user sets a speech-to-speech server URL and
+//     the browser connects to it directly (no load balancer, no /session).
+let lbMode = false;
+// Fail open: direct entry is allowed unless /api/config reports an LB URL. This
+// way a missing/unreachable config (e.g. static hosting) leaves the field
+// usable rather than locked.
+let allowDirect = true;
+// Deploy-pinned s2s URL (SPEECH_TO_SPEECH_URL). Non-empty -> locked direct
+// mode: the field displays it read-only and the saved user URL is untouched.
+let pinnedUrl = "";
+
+// ── Tool state ──────────────────────────────────────────────────────────────
+let toolsEnabled = loadTools();
+// Whether the server holds a Serper key (learned from /api/config on load).
+let serverSearchKey = false;
+// A user-supplied key (fallback when the deploy has none). localStorage only.
+let userSearchKey = localStorage.getItem(STORAGE_KEYS.searchKey) || "";
+/** @type {MediaStream | null} */
+let cameraStream = null;
+
+/** Search is usable if the server has a key or the user supplied one. */
+function searchAvailable() {
+  return serverSearchKey || !!userSearchKey;
+}
+
+/** Tool definitions for the currently-enabled (and usable) tools. */
+function activeToolDefs() {
+  const defs = [];
+  if (toolsEnabled.web_search && searchAvailable()) defs.push(TOOL_DEFS.web_search);
+  if (toolsEnabled.camera_snapshot) defs.push(TOOL_DEFS.camera_snapshot);
+  return defs;
+}
+
+/** Instructions plus the hidden tool-use hint when any tool is active. */
+function effectiveInstructions() {
+  const base = settings.instructions;
+  return activeToolDefs().length ? base + TOOL_USE_HINT : base;
+}
+
+/** Push the active tool set to a live session so toggles apply mid-call. */
+function pushToolsToSession() {
+  if (!client || !LIVE_STATES.has(currentState)) return;
+  client.setTools(activeToolDefs());
+  // The hidden tool-use hint depends on whether any tool is active, so refresh
+  // instructions alongside the tool set.
+  client.updateSession({ instructions: effectiveInstructions() });
+}
+
+// ── Chat view ───────────────────────────────────────────────────────────────
+// Owns the history panel, the ephemeral bubbles, and all transcript/tool
+// streaming state. The client's events are forwarded to its on* methods.
+const chat = new ChatView();
+
+// ── Account / limiter ─────────────────────────────────────────────────────
+// Login chip + daily-limit modal (inert unless the deploy is in LB mode). The
+// server meters conversation time; the client just heartbeats a live session
+// and tears down when the server reports the budget is spent.
+const account = new Account();
+let limiterOn = false;
+let heartbeatTimer = 0;
+let trackedSessionId = "";
+let trackedTier = "";
+// The waiting-queue ticket id while we're in line (else ""). Used to leave the
+// queue on teardown / tab-close so we don't hold a phantom place.
+let queuedTicketId = "";
+
+/** @type {S2sWsRealtimeClient | null} */
+let client = null;
+/** @type {MediaStream | null} */
+let micStream = null;
+let micMuted = false;
+
+/** @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;
+
+  // Queue affordances: "Leave queue" whenever we're in line; "Join now" only once
+  // it's our turn (a slot is held for us). Both live under #queue-actions.
+  const yourTurn = next === "your-turn";
+  const inLine = next === "queued" || yourTurn;
+  queueActions.hidden = !inLine;
+  joinQueueBtn.hidden = !yourTurn;
+  joinQueueBtn.tabIndex = yourTurn ? 0 : -1;
+  leaveQueueBtn.hidden = !inLine;
+  leaveQueueBtn.tabIndex = inLine ? 0 : -1;
+  if (!yourTurn) stopJoinCountdown();
+
+  // Warm reassurance under the terse position, only while waiting in line.
+  if (next === "queued") {
+    circleSubcaption.textContent =
+      "Sorry, we overhugged! 🤗 Every slot is busy, so we saved you a spot. Hang tight, you're moving up.";
+    circleSubcaption.hidden = false;
+  } else {
+    circleSubcaption.hidden = true;
+  }
+
+  updateRestartAvailability();
+}
+
+function updateRestartAvailability() {
+  // Restart works from any settled state — it tears down a live call (if any)
+  // and reconnects with the current settings. Only block while mid-connect or
+  // while waiting in the queue (restarting from there would just re-queue).
+  restartBtn.disabled =
+    currentState === "connecting" || currentState === "queued" || currentState === "your-turn";
+  restartHint.hidden = false;
+  restartHint.textContent = LIVE_STATES.has(currentState)
+    ? "Reconnects now with the settings above."
+    : "Starts a conversation with the settings above.";
+}
+
+/**
+ * @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"}`;
+}
+
+function openSettings() {
+  syncConnectionUi();
+  inputVoice.value = settings.voice;
+  inputInstructions.value = settings.instructions;
+  syncGateUi();
+  updateRestartAvailability();
+  settingsModal.showModal();
+}
+
+/** dB position (clamped to the slider axis) as a 0..1 fraction of the track.
+ * @param {number} db */
+function dbToFraction(db) {
+  const clamped = Math.min(GATE_MAX_DB, Math.max(GATE_OFF_DB, db));
+  return (clamped - GATE_OFF_DB) / (GATE_MAX_DB - GATE_OFF_DB);
+}
+
+/** @param {number} f @returns {number} dB at a 0..1 position on the gate axis. */
+function fractionToDb(f) {
+  const clamped = Math.min(1, Math.max(0, f));
+  return Math.round(GATE_OFF_DB + clamped * (GATE_MAX_DB - GATE_OFF_DB));
+}
+
+// ── Radial gate arc (around the mic button, live during a call) ─────────────
+// A 270° arc with the gap facing the orb (right). Fraction 0 (=Off) sits at the
+// bottom-ish start; 1 (=max) at the top-ish end. The level fill and the
+// threshold handle ride this same axis, mirroring the Settings widget.
+const ARC_R = 40;
+// A ~200° arc centred on the left (180°) so the wide gap faces the orb (right).
+const ARC_SPAN_DEG = 200;
+const ARC_START_DEG = 180 - ARC_SPAN_DEG / 2; // lower-left start; Off end
+
+/** Point at fraction f (0..1) and radius r, in the 0..100 viewBox.
+ * @param {number} f @param {number} [r] */
+function arcPoint(f, r = ARC_R) {
+  const deg = ARC_START_DEG + f * ARC_SPAN_DEG;
+  const rad = (deg * Math.PI) / 180;
+  return { x: 50 + r * Math.cos(rad), y: 50 + r * Math.sin(rad) };
+}
+
+/** SVG path `d` for the full 0..1 arc (clockwise). */
+function fullArcD() {
+  const a = arcPoint(0);
+  const b = arcPoint(1);
+  const largeArc = ARC_SPAN_DEG > 180 ? 1 : 0;
+  return `M ${a.x} ${a.y} A ${ARC_R} ${ARC_R} 0 ${largeArc} 1 ${b.x} ${b.y}`;
+}
+
+/** One-time geometry: track, fill (dash-revealed) and the transparent hit band. */
+function initGateArc() {
+  const d = fullArcD();
+  mgaTrack.setAttribute("d", d);
+  mgaFill.setAttribute("d", d);
+  mgaHit.setAttribute("d", d);
+  // pathLength 100 lets us reveal the fill by fraction via dashoffset.
+  mgaFill.setAttribute("pathLength", "100");
+  mgaFill.style.strokeDasharray = "100 100";
+  mgaFill.style.strokeDashoffset = "100"; // empty until levels arrive
+  renderGateHandle();
+}
+
+/** Place the threshold bead on the arc at the stored threshold; flag off state. */
+function renderGateHandle() {
+  const off = settings.noiseGate <= GATE_OFF_DB;
+  const p = arcPoint(dbToFraction(settings.noiseGate));
+  mgaHandle.setAttribute("cx", String(p.x));
+  mgaHandle.setAttribute("cy", String(p.y));
+  micGate.classList.toggle("gate-off", off);
+}
+
+/** Paint a 0..1 live level onto the arc fill (and the Settings meter if open).
+ * Brightens the tick when the level crosses the threshold — i.e. the gate is
+ * actually open — but only when gating is enabled.
+ * @param {number} rms */
+function paintInputLevel(rms) {
+  const db = rms > 0 ? 20 * Math.log10(rms) : GATE_OFF_DB;
+  const f = dbToFraction(db);
+  mgaFill.style.strokeDashoffset = String(100 * (1 - f));
+  if (settingsModal.open) gateMeterFill.style.width = `${f * 100}%`;
+  const enabled = settings.noiseGate > GATE_OFF_DB;
+  micGate.classList.toggle("gate-open", enabled && f >= dbToFraction(settings.noiseGate));
+}
+
+/** The single place that commits a new gate threshold: updates both controls,
+ * persists, and applies live to the running session.
+ * @param {number} db */
+function setGateThreshold(db) {
+  settings.noiseGate = Math.min(GATE_MAX_DB, Math.max(GATE_OFF_DB, Math.round(db)));
+  const off = settings.noiseGate <= GATE_OFF_DB;
+  inputNoiseGate.value = String(settings.noiseGate);
+  gateValue.textContent = off ? "Off" : `${settings.noiseGate} dB`;
+  renderGateHandle();
+  localStorage.setItem(STORAGE_KEYS.noiseGate, String(settings.noiseGate));
+  if (client && LIVE_STATES.has(currentState)) {
+    client.setNoiseGate(gateParams(settings.noiseGate));
+  }
+}
+
+/** Reflect the stored gate threshold into the slider, label and arc handle. */
+function syncGateUi() {
+  inputNoiseGate.value = String(settings.noiseGate);
+  const off = settings.noiseGate <= GATE_OFF_DB;
+  gateValue.textContent = off ? "Off" : `${settings.noiseGate} dB`;
+  renderGateHandle();
+}
+
+// Drag along the arc band to set the threshold (a tap on the glyph still mutes).
+let gateDragging = false;
+/** @param {PointerEvent} e */
+function gatePointerToDb(e) {
+  const rect = mgaArc.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  let deg = (Math.atan2(e.clientY - cy, e.clientX - cx) * 180) / Math.PI;
+  if (deg < 0) deg += 360;
+  // Map the on-arc angle to a fraction; angles in the right-side gap fall
+  // outside [0,1] and fractionToDb clamps them to the nearest end (just-below
+  // start -> Off, just-past end -> max).
+  const f = (deg - ARC_START_DEG) / ARC_SPAN_DEG;
+  return fractionToDb(f);
+}
+mgaHit.addEventListener("pointerdown", (e) => {
+  gateDragging = true;
+  mgaHit.setPointerCapture(e.pointerId);
+  setGateThreshold(gatePointerToDb(e));
+});
+mgaHit.addEventListener("pointermove", (e) => {
+  if (gateDragging) setGateThreshold(gatePointerToDb(e));
+});
+const endGateDrag = (/** @type {PointerEvent} */ e) => {
+  if (!gateDragging) return;
+  gateDragging = false;
+  try { mgaHit.releasePointerCapture(e.pointerId); } catch {}
+};
+mgaHit.addEventListener("pointerup", endGateDrag);
+mgaHit.addEventListener("pointercancel", endGateDrag);
+
+settingsBtn.addEventListener("click", openSettings);
+
+// About panel: native <dialog>, Esc closes for free; also close on the X and
+// on a click in the backdrop (a click whose target is the dialog itself).
+$("#about-btn-m").addEventListener("click", () => aboutModal.showModal());
+aboutClose.addEventListener("click", () => aboutModal.close());
+aboutModal.addEventListener("click", (e) => {
+  if (e.target === aboutModal) aboutModal.close();
+});
+
+// ── Tools panel ───────────────────────────────────────────────────────────
+
+/** Reflect the current tool state into the panel controls. */
+function syncToolsUi() {
+  const avail = searchAvailable();
+  toolWebSwitch.checked = toolsEnabled.web_search && avail;
+  toolWebSwitch.disabled = !avail;
+  toolWebRow.classList.toggle("disabled", !avail);
+  toolCamSwitch.checked = toolsEnabled.camera_snapshot;
+
+  if (serverSearchKey) {
+    // Key lives server-side: show it as configured, never expose it.
+    searchKeyInput.value = "";
+    searchKeyInput.placeholder = "••••••••  · provided by the server";
+    searchKeyInput.disabled = true;
+    toolWebHint.textContent = "Ready. The search key is held server-side and never sent to your browser.";
+  } else {
+    searchKeyInput.disabled = false;
+    searchKeyInput.value = userSearchKey;
+    searchKeyInput.placeholder = "Paste a Serper key to enable web search";
+    toolWebHint.textContent = userSearchKey
+      ? "Using your key — stored in this browser only."
+      : "No server key configured. Add your own Serper key to enable web search.";
+  }
+}
+
+toolsBtn.addEventListener("click", () => { syncToolsUi(); toolsModal.showModal(); });
+toolsClose.addEventListener("click", () => toolsModal.close());
+toolsModal.addEventListener("click", (e) => {
+  if (e.target === toolsModal) toolsModal.close();
+});
+
+toolWebSwitch.addEventListener("change", () => {
+  if (toolWebSwitch.checked && !searchAvailable()) {
+    toolWebSwitch.checked = false; // guard: can't enable without a key
+    return;
+  }
+  toolsEnabled.web_search = toolWebSwitch.checked;
+  saveTools();
+  pushToolsToSession();
+});
+
+toolCamSwitch.addEventListener("change", async () => {
+  if (toolCamSwitch.checked) {
+    try {
+      // Flipping the switch always re-requests the camera, so a permission that
+      // was only dismissed earlier is asked again here.
+      await enableCamera();
+    } catch (err) {
+      toolCamSwitch.checked = false;
+      const denied = err instanceof Error && (err.name === "NotAllowedError" || err.name === "SecurityError");
+      toolCamHint.textContent = denied
+        ? "Camera blocked. Allow it from the camera icon in your browser's address bar — it switches on automatically."
+        : `Camera unavailable${err instanceof Error ? `: ${err.message}` : ""}`;
+      return;
+    }
+    toolsEnabled.camera_snapshot = true;
+    toolCamHint.textContent = "Camera on. The assistant can take a snapshot when it needs to see.";
+  } else {
+    disableCamera();
+    toolsEnabled.camera_snapshot = false;
+    toolCamHint.textContent = "Let the assistant see through your webcam.";
+  }
+  saveTools();
+  pushToolsToSession();
+});
+
+searchKeyInput.addEventListener("input", () => {
+  if (serverSearchKey) return;
+  userSearchKey = searchKeyInput.value.trim();
+  if (userSearchKey) localStorage.setItem(STORAGE_KEYS.searchKey, userSearchKey);
+  else localStorage.removeItem(STORAGE_KEYS.searchKey);
+
+  const avail = searchAvailable();
+  toolWebSwitch.disabled = !avail;
+  toolWebRow.classList.toggle("disabled", !avail);
+  // Losing the key disables a previously-enabled tool.
+  if (!avail && toolsEnabled.web_search) {
+    toolsEnabled.web_search = false;
+    toolWebSwitch.checked = false;
+    saveTools();
+    pushToolsToSession();
+  }
+  toolWebHint.textContent = userSearchKey
+    ? "Using your key — stored in this browser only."
+    : "No server key configured. Add your own Serper key to enable web search.";
+});
+
+// ── Camera ──────────────────────────────────────────────────────────────────
+
+async function enableCamera() {
+  if (cameraStream) return;
+  cameraStream = await navigator.mediaDevices.getUserMedia({
+    video: { facingMode: "user" },
+    audio: false,
+  });
+  camVideo.srcObject = cameraStream;
+  try { await camVideo.play(); } catch { /* autoplay quirks; muted video is fine */ }
+  camPip.classList.add("visible");
+  camPip.setAttribute("aria-hidden", "false");
+  // Lets the footer reflow to the bottom-right (and hide on mobile) while the
+  // webcam preview occupies the bottom of the stage.
+  document.body.classList.add("cam-on");
+}
+
+function disableCamera() {
+  if (cameraStream) {
+    for (const t of cameraStream.getTracks()) t.stop();
+    cameraStream = null;
+  }
+  camVideo.srcObject = null;
+  camPip.classList.remove("visible");
+  camPip.setAttribute("aria-hidden", "true");
+  document.body.classList.remove("cam-on");
+}
+
+/** Auto-start the webcam on arrival (the camera tool is on by default). If the
+ *  user declines the permission, switch the tool off and reflect it in the UI
+ *  rather than nagging. */
+async function autoStartCamera() {
+  if (!toolsEnabled.camera_snapshot || cameraStream) return;
+  try {
+    await enableCamera();
+  } catch (err) {
+    console.warn("[main] camera auto-start declined/failed:", err);
+    toolsEnabled.camera_snapshot = false;
+    saveTools();
+    syncToolsUi();
+  }
+}
+
+/** Track the browser's camera permission so a later re-grant (e.g. the user
+ *  unblocks it from the address bar after a denial) turns the camera back on
+ *  without another toggle, and a revoke turns it off. Best-effort: the
+ *  Permissions API doesn't support "camera" everywhere (e.g. Safari). */
+async function watchCameraPermission() {
+  try {
+    const status = await navigator.permissions?.query?.({ name: /** @type {any} */ ("camera") });
+    if (!status) return;
+    status.addEventListener("change", () => {
+      if (status.state === "granted") {
+        if (!toolsEnabled.camera_snapshot) { toolsEnabled.camera_snapshot = true; saveTools(); }
+        void autoStartCamera();
+        syncToolsUi();
+      } else if (status.state === "denied") {
+        disableCamera();
+        if (toolsEnabled.camera_snapshot) { toolsEnabled.camera_snapshot = false; saveTools(); }
+        syncToolsUi();
+      }
+    });
+  } catch {
+    // Permissions API unavailable for "camera" — the toggle still re-asks.
+  }
+}
+
+/**
+ * Grab the current webcam frame as a downscaled JPEG data URL. The preview is
+ * mirrored in CSS for a natural self-view, but we draw the raw (un-mirrored)
+ * video here so the model sees the scene in its true orientation.
+ * @returns {string | null}
+ */
+function captureSnapshot() {
+  if (!cameraStream || !camVideo.videoWidth) return null;
+  const vw = camVideo.videoWidth;
+  const vh = camVideo.videoHeight;
+  const scale = Math.min(1, SNAPSHOT_MAX_EDGE / Math.max(vw, vh));
+  const w = Math.max(1, Math.round(vw * scale));
+  const h = Math.max(1, Math.round(vh * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.drawImage(camVideo, 0, 0, w, h);
+  return canvas.toDataURL("image/jpeg", SNAPSHOT_QUALITY);
+}
+
+/** Brief shutter flash on the preview so the user sees a snapshot was taken. */
+function flashPreview() {
+  camPip.classList.remove("flash");
+  void camPip.offsetWidth; // reflow so the animation restarts
+  camPip.classList.add("flash");
+}
+
+// ── Tool executor ─────────────────────────────────────────────────────────
+// Runs the function the model called, returns the result, and asks for a
+// response so the model speaks it. Errors come back as the tool output too, so
+// the model can recover gracefully instead of the turn stalling.
+
+/**
+ * Run the function the model called, return its result to the backend, and ask
+ * for a follow-up response. We also hand the result back to the caller so it
+ * can be shown in the conversation once the tool has actually run.
+ * @param {string} name @param {string} argsJson @param {string} callId
+ * @returns {Promise<{ output: string, image?: string }>}
+ */
+async function runTool(name, argsJson, callId) {
+  if (!client) return { output: "" };
+  let args = /** @type {Record<string, unknown>} */ ({});
+  try { args = JSON.parse(argsJson || "{}"); } catch { /* keep {} */ }
+
+  if (DEBUG) console.debug(`[tool] run name=${name} callId=${JSON.stringify(callId)} args=${argsJson}`);
+  if (!callId) console.warn("[tool] empty call_id — the backend didn't tag the call, can't return a function_call_output");
+
+  /** @type {{ output: string, image?: string }} */
+  let result = { output: "" };
+  try {
+    if (name === "web_search") {
+      const query = typeof args.query === "string" ? args.query : "";
+      result.output = await execWebSearch(query);
+      // Return the result and let the bare response.create (below) trigger the
+      // spoken answer.
+      client.sendToolOutput(callId, result.output);
+    } else if (name === "camera_snapshot") {
+      const dataUrl = captureSnapshot();
+      if (dataUrl) {
+        if (DEBUG) console.debug(`[tool] camera_snapshot captured frame (${dataUrl.length} chars), sending image + output`);
+        result = { output: "Snapshot captured from the webcam and attached as an image.", image: dataUrl };
+        // Return the tool output; the frame itself rides along with the
+        // response.create below (sent right before it), so the model sees the
+        // snapshot in the very response it's about to speak.
+        client.sendToolOutput(callId, result.output);
+        flashPreview();
+      } else {
+        console.warn("[tool] camera_snapshot: no frame — camera off or not ready");
+        result.output = "The camera is not available right now.";
+        client.sendToolOutput(callId, result.output);
+      }
+    } else {
+      result.output = `Unknown tool: ${name}`;
+      client.sendToolOutput(callId, result.output);
+    }
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    result.output = `Tool failed: ${msg}`;
+    client.sendToolOutput(callId, result.output);
+  }
+  if (DEBUG) console.debug(`[tool] requesting model response after ${name}`);
+  // Camera: the captured frame rides with the response.create (sent just before
+  // it) so it's in context for the reply. Other tools: a bare create.
+  client.requestResponse(result.image ? { image: result.image } : undefined);
+  return result;
+}
+
+/** @param {string} query @returns {Promise<string>} */
+async function execWebSearch(query) {
+  if (!query) return "No query provided.";
+  /** @type {Record<string, string>} */
+  const body = { query };
+  // Only send a user key when there's no server key (server prefers its own).
+  if (!serverSearchKey && userSearchKey) body.key = userSearchKey;
+
+  const res = await fetch("api/search", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    let detail = String(res.status);
+    try { const j = await res.json(); if (j.detail) detail = j.detail; } catch {}
+    throw new Error(`search error (${detail})`);
+  }
+  const json = await res.json();
+  // Date-stamp the header so the model treats these as fresh realtime facts
+  // rather than its (older) training knowledge.
+  const today = new Date().toISOString().slice(0, 10);
+  /** @type {string[]} */
+  const lines = [`Google search result from ${today}:`];
+  if (json.answer) lines.push(`Answer: ${json.answer}`);
+  for (const r of json.results || []) {
+    lines.push(`- ${r.title}: ${r.snippet} (${r.url})`);
+  }
+  return lines.length > 1 ? lines.join("\n") : `${lines[0]}\nNo results found.`;
+}
+
+/** Learn server config (search key + connection target), then refresh the UI. */
+async function fetchConfig() {
+  try {
+    const res = await fetch("api/config");
+    if (res.ok) {
+      const json = await res.json();
+      serverSearchKey = !!json.search;
+      lbMode = !!json.lb;
+      // Lock to LB mode only when the deploy reports a load balancer.
+      allowDirect = json.allowDirect ?? !lbMode;
+      // Deploy-pinned direct URL (overrides the LB server-side already).
+      pinnedUrl = (json.s2sUrl || "").trim();
+      // The conversation-time limiter rides on the LB being present.
+      limiterOn = lbMode;
+    }
+    // Non-OK response: leave the fail-open default (allowDirect = true).
+  } catch {
+    // Config endpoint unreachable (e.g. static hosting): keep direct entry.
+  }
+  if (DEBUG) console.debug(`[ui] config: allowDirect=${allowDirect} lbMode=${lbMode}`);
+  // Login chip + remaining-budget (no-op / hidden when the limiter is off).
+  void account.refresh();
+  syncToolsUi();
+  syncConnectionUi();
+}
+
+/**
+ * Resolve where to connect, per the deploy's mode:
+ *   • LB mode  -> `{ sessionUrl }`, the client POSTs the same-origin /api/session
+ *     proxy and the server forwards to the LB (its address stays server-side).
+ *   • direct   -> `{ directUrl }`, connect straight to the s2s WebSocket.
+ * Throws a user-facing error if direct mode is on but no URL was entered.
+ * @returns {{ sessionUrl: string } | { directUrl: string }}
+ */
+function connectionTarget() {
+  if (!allowDirect) {
+    return { sessionUrl: "api/session" };
+  }
+  const directUrl = buildDirectWsUrl(window.VOICE_WS_URL || pinnedUrl || settings.directUrl);
+  if (!directUrl) {
+    throw new Error("Enter a speech-to-speech server URL in Settings.");
+  }
+  return { directUrl };
+}
+
+/**
+ * Normalise a user-typed server address into a realtime WebSocket URL.
+ * Accepts bare hosts (`localhost:8080`), http(s) URLs, or ws(s) URLs, and adds
+ * the `/v1/realtime` path when none is given. A full connect URL (with path
+ * and/or query) is preserved as-is.
+ * @param {string} raw @returns {string}
+ */
+function buildDirectWsUrl(raw) {
+  let s = (raw || "").trim();
+  if (!s) return "";
+  if (!/^wss?:\/\//i.test(s)) {
+    if (/^https?:\/\//i.test(s)) {
+      s = s.replace(/^http/i, "ws"); // http→ws, https→wss
+    } else {
+      const isLocal = /^(localhost|127\.0\.0\.1|\[::1\])(:|\/|$)/i.test(s);
+      s = (isLocal ? "ws://" : "wss://") + s;
+    }
+  }
+  try {
+    const u = new URL(s);
+    if (u.pathname === "" || u.pathname === "/") u.pathname = "/v1/realtime";
+    return u.toString();
+  } catch {
+    return s;
+  }
+}
+
+/** Create + resume an AudioContext synchronously (must run inside the user
+ *  gesture so iOS lets it start). Returns null if construction fails. */
+function createResumedAudioContext() {
+  try {
+    const Ctx = window.AudioContext || /** @type {any} */ (window).webkitAudioContext;
+    const ctx = new Ctx({ latencyHint: "interactive" });
+    if (ctx.state === "suspended") void ctx.resume().catch(() => {});
+    return /** @type {AudioContext} */ (ctx);
+  } catch (err) {
+    console.warn("[main] AudioContext init failed:", err);
+    return null;
+  }
+}
+
+/** Read the editable settings out of the form. The URL field is only honoured
+ *  in free direct mode — in LB mode it's hidden, and when the deploy pins a
+ *  URL it's read-only, so the user's saved URL survives either way. */
+function readSettingsFromForm() {
+  return {
+    directUrl: allowDirect && !pinnedUrl ? inputLbUrl.value.trim() : settings.directUrl,
+    voice: inputVoice.value || DEFAULT_VOICE,
+    instructions: inputInstructions.value.trim() || DEFAULT_INSTRUCTIONS,
+    noiseGate: readGateThreshold(),
+  };
+}
+
+/** Gate threshold (dBFS) currently shown on the slider, clamped to range. */
+function readGateThreshold() {
+  const v = Math.round(Number(inputNoiseGate.value));
+  if (!Number.isFinite(v)) return GATE_OFF_DB;
+  return Math.min(GATE_MAX_DB, Math.max(GATE_OFF_DB, v));
+}
+
+/** Adapt the connection field to the mode learned from /api/config. */
+function syncConnectionUi() {
+  if (pinnedUrl) {
+    // Deploy-pinned URL: show it, but locked — the deployment owns it.
+    connField.hidden = false;
+    inputLbUrl.value = pinnedUrl;
+    inputLbUrl.readOnly = true;
+    connHint.classList.remove("error");
+    connHint.textContent = "Speech-to-speech server URL pinned by this deployment.";
+  } else if (allowDirect) {
+    // Direct mode: the user sets their own s2s server URL.
+    connField.hidden = false;
+    inputLbUrl.value = settings.directUrl;
+    inputLbUrl.readOnly = false;
+    inputLbUrl.placeholder = "http://localhost:port";
+    connHint.classList.remove("error");
+    connHint.textContent =
+      "URL of your speech-to-speech server, e.g. http://localhost:8080 (the app adds /v1/realtime).";
+  } else {
+    // LB mode: the load balancer URL is deployment-owned — hide it entirely so
+    // its address is never exposed in Settings.
+    connField.hidden = true;
+  }
+}
+
+/** True when the user must supply a server URL before connecting (direct mode
+ *  with nothing set). */
+function missingServerUrl() {
+  return allowDirect && !pinnedUrl && !buildDirectWsUrl(settings.directUrl);
+}
+
+/** Open Settings and point the user at the empty server-URL field. */
+function promptServerUrl() {
+  if (settingsModal.open) syncConnectionUi();
+  else openSettings();
+  connHint.textContent = "Set the speech-to-speech server URL to start.";
+  connHint.classList.add("error");
+  inputLbUrl.focus();
+}
+
+settingsForm.addEventListener("submit", (event) => {
+  const submitter = /** @type {HTMLButtonElement | null} */ ((/** @type {SubmitEvent} */ (event)).submitter);
+  if (submitter?.value !== "save") return;
+
+  settings = readSettingsFromForm();
+  saveSettings(settings);
+
+  // Voice + instructions can apply to a live session without reconnecting; a
+  // changed connection URL only takes effect on the next restart.
+  if (client && LIVE_STATES.has(currentState)) {
+    client.updateSession({ voice: settings.voice, instructions: effectiveInstructions() });
+  }
+});
+
+// The noise gate applies live (worklet param), so tune it without a restart:
+// update the label/marker, persist, and push straight to the running client.
+inputNoiseGate.addEventListener("input", () => {
+  setGateThreshold(readGateThreshold());
+});
+
+restartBtn.addEventListener("click", async () => {
+  if (currentState === "connecting") return; // a connect is already underway
+  settings = readSettingsFromForm();
+  saveSettings(settings);
+  if (missingServerUrl()) { promptServerUrl(); return; } // keep settings open
+  settingsModal.close();
+  // Grab the AudioContext NOW, inside the click gesture — teardown() awaits, and
+  // creating it afterwards would fall outside the gesture (silent on iOS).
+  const audioContext = createResumedAudioContext();
+  try {
+    if (client) await teardown();
+    await doStart(audioContext);
+  } catch (err) {
+    await handleStartError(err);
+  }
+});
+
+circleBtn.addEventListener("click", async () => {
+  try {
+    if (currentState === "idle" || currentState === "error") {
+      if (missingServerUrl()) { promptServerUrl(); return; }
+      await doStart();
+    }
+  } catch (err) {
+    await handleStartError(err);
+  }
+});
+
+/** A failed start is either the daily limit (show the modal, return to idle) or
+ *  a real fault (surface it). doStart already closed any orphan AudioContext.
+ *  @param {any} err */
+async function handleStartError(err) {
+  if (err && err.code === "limit") {
+    await teardown();
+    account.showLimit(err.tier);
+    return;
+  }
+  // The user left the queue (close() aborted the wait): teardown already reset
+  // the UI to idle, so there's nothing to report.
+  if (err && err.code === "aborted") return;
+  // The whole waiting line is full: a warm, reassuring modal rather than an error.
+  if (err && err.code === "queue-full") {
+    await teardown();
+    account.showBusy();
+    return;
+  }
+  // Our place lapsed (ticket reaped, or the join window ran out). Recoverable, not
+  // a fault: land on the retry state with a kind, plain-language reason.
+  if (err && (err.code === "queue-expired" || err.code === "join-expired")) {
+    await teardown();
+    setState("error");
+    setCaption(
+      err.code === "join-expired"
+        ? "Your spot expired. Tap to rejoin."
+        : "That took a while. Tap to rejoin.",
+      "error",
+    );
+    return;
+  }
+  onFatalError(err);
+}
+
+micBtn.addEventListener("click", () => {
+  if (!micStream || !client) return;
+  micMuted = !micMuted;
+  for (const track of micStream.getAudioTracks()) {
+    track.enabled = !micMuted;
+  }
+  client.setMuted(micMuted);
+  micBtn.classList.toggle("muted", micMuted);
+  micBtn.setAttribute("aria-label", micMuted ? "Unmute" : "Mute");
+  micBtn.title = micMuted ? "Unmute" : "Mute";
+});
+
+stopBtn.addEventListener("click", async () => {
+  await teardown();
+});
+
+// "Leave queue": tear down the pending connect (aborts the poll wait) and drop
+// our place in line. Same teardown path as stopping a live call.
+leaveQueueBtn.addEventListener("click", async () => {
+  await teardown();
+});
+
+// "Join now": accept the held slot. The click is a user gesture, so the client
+// re-resumes the AudioContext here (iOS) before dialing.
+joinQueueBtn.addEventListener("click", () => {
+  stopJoinCountdown();
+  if (client) client.join();
+});
+
+const MIC_CONSTRAINTS = {
+  audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+};
+
+/** Prompt for mic permission up front, then immediately release the tracks so no
+ *  recording indicator lingers during a queue wait. Throws a friendly error if the
+ *  user denies. */
+async function primeMicPermission() {
+  try {
+    const s = await navigator.mediaDevices.getUserMedia(MIC_CONSTRAINTS);
+    for (const track of s.getTracks()) track.stop();
+  } catch (err) {
+    throw new Error(
+      `Microphone access denied${err instanceof Error ? `: ${err.message}` : ""}`,
+    );
+  }
+}
+
+/** Acquire the live capture stream once a slot is granted. Permission was primed
+ *  in the tap gesture, so this is silent. Stored module-side for mute + teardown. */
+async function acquireMicStream() {
+  micStream = await navigator.mediaDevices.getUserMedia(MIC_CONSTRAINTS);
+  return micStream;
+}
+
+/** @param {number} position Update the queued caption ("You're #N in line"). */
+function onQueuePosition(position) {
+  const n = Number(position) || 0;
+  setCaption(n > 0 ? `You're #${n} in line` : "Finding you a spot…", "muted");
+}
+
+// ── "Your turn" join countdown ──────────────────────────────────────────────
+// While a slot is held for us, show how long is left to accept it. The client's
+// join gate expires just before the load balancer reclaims the slot.
+let joinCountdownTimer = 0;
+
+/** @param {number} sec */
+function startJoinCountdown(sec) {
+  stopJoinCountdown();
+  let left = Math.max(0, Math.floor(sec));
+  const paint = () => {
+    joinQueueBtn.textContent = left > 0 ? `Join now (${left}s)` : "Join now";
+  };
+  paint();
+  joinCountdownTimer = window.setInterval(() => {
+    left -= 1;
+    if (left <= 0) {
+      stopJoinCountdown();
+      joinQueueBtn.textContent = "Join now";
+      return;
+    }
+    paint();
+  }, 1000);
+}
+
+function stopJoinCountdown() {
+  if (joinCountdownTimer) {
+    clearInterval(joinCountdownTimer);
+    joinCountdownTimer = 0;
+  }
+}
+
+/**
+ * Start a conversation. Pass a pre-created AudioContext when the caller already
+ * made one inside the tap/click gesture (required on iOS); otherwise one is
+ * created here, which is still inside the gesture for a direct orb tap.
+ * @param {AudioContext | null} [audioContext]
+ */
+async function doStart(audioContext = null) {
+  // Resolve the target before touching mic/audio so a misconfiguration (e.g.
+  // direct mode with no URL) fails fast with a clear message.
+  const target = connectionTarget();
+
+  chat.clear();
+  chat.reset();
+  setState("connecting");
+  setCaption("Asking for mic…", "muted");
+
+  // Create + resume the AudioContext SYNCHRONOUSLY, still inside the gesture.
+  // iOS Safari only starts an AudioContext from a user gesture; if we waited
+  // until after the getUserMedia / session-creation awaits below, it would stay
+  // suspended and the whole pipeline would be silent.
+  if (!audioContext) audioContext = createResumedAudioContext();
+
+  // Prime the mic permission now (get the prompt out of the way up front), then
+  // release it. The real capture stream is acquired only once a slot is granted
+  // (see acquireMicStream), so the mic 'in use' indicator never lights while we
+  // sit in the queue. Permission persists, so the later acquire is silent.
+  try {
+    await primeMicPermission();
+  } catch (err) {
+    if (audioContext) void audioContext.close().catch(() => {});
+    throw err;
+  }
+
+  // The webcam is started on arrival (autoStartCamera), so nothing to do here;
+  // a still-pending grant just means the snapshot tool isn't ready yet.
+
+  const c = new S2sWsRealtimeClient({
+    ...target,
+    voice: settings.voice,
+    instructions: effectiveInstructions(),
+    acquireMic: acquireMicStream,
+    tools: activeToolDefs(),
+    noiseGate: gateParams(settings.noiseGate),
+    ...(audioContext ? { audioContext } : {}),
+  });
+  client = c;
+
+  c.addEventListener("queue", (e) => {
+    const { position, queueId } = /** @type {CustomEvent<{ position: number; queueId: string }>} */ (e).detail;
+    if (queueId) queuedTicketId = queueId;
+    onQueuePosition(position);
+  });
+
+  c.addEventListener("ready-to-join", (e) => {
+    const { info, expiresSec } = /** @type {CustomEvent<{ info: import("./ws/s2s-ws-client.js").WsSessionInfo; expiresSec: number }>} */ (e).detail;
+    // A slot is held for us. We're out of the queue now, so drop the ticket ref.
+    // Track the granted session id already so that leaving (or letting the timer
+    // lapse) refunds the budget the server reserved at claim, even before we dial.
+    queuedTicketId = "";
+    if (info?.sessionId) {
+      trackedSessionId = info.sessionId;
+      trackedTier = info.tier || "anon";
+    }
+    startJoinCountdown(expiresSec);
+  });
+
+  c.addEventListener("status", (e) => {
+    const detail = /** @type {CustomEvent<{ status: string }>} */ (e).detail;
+    onClientStatus(detail.status);
+  });
+  c.addEventListener("transcript", (e) => {
+    const d = /** @type {CustomEvent<{ role: "user" | "assistant"; text: string; partial: boolean; itemId?: string; responseId?: string }>} */ (e).detail;
+    chat.onTranscript(d);
+  });
+
+  c.addEventListener("response-finished", (e) => {
+    const detail = /** @type {CustomEvent<{ responseId: string; status: string; audible?: boolean; transcript?: string }>} */ (e).detail;
+    chat.onResponseFinished(detail);
+  });
+
+  c.addEventListener("toolcall", (e) => {
+    const { name, arguments: args, callId } = /** @type {CustomEvent<{ name: string; arguments: string; callId: string }>} */ (e).detail;
+    chat.onToolCall(name);
+    // Execute the tool, then push it to the conversation once the result is in,
+    // so the toggle shows both the call input and its output together.
+    void runTool(name, args, callId).then(({ output, image }) => {
+      chat.onToolResult(name, args, output, image);
+    });
+  });
+  c.addEventListener("error", (e) => {
+    const detail = /** @type {CustomEvent<{ error: unknown }>} */ (e).detail;
+    onFatalError(detail.error);
+  });
+  c.addEventListener("server-error", (e) => {
+    // Non-fatal: the backend reported an error mid-session. Log it, keep the
+    // socket and the conversation alive (the model can recover on its own).
+    const detail = /** @type {CustomEvent<{ error: unknown }>} */ (e).detail;
+    const msg = detail.error instanceof Error ? detail.error.message : String(detail.error);
+    console.warn("[main] server error (non-fatal):", msg);
+  });
+  c.addEventListener("session", (e) => {
+    const info = /** @type {CustomEvent<{ info: import("./ws/s2s-ws-client.js").WsSessionInfo }>} */ (e).detail.info;
+    console.log("[ws] session created:", info.sessionId);
+    // A slot was granted — we're out of the queue; drop the ticket reference so
+    // teardown doesn't try to leave a line we already left.
+    queuedTicketId = "";
+    // A metered tier (anon / free): heartbeat so the server can extend the
+    // reservation and tell us when the daily budget runs out. PRO isn't limited.
+    if (info.limited && info.sessionId) {
+      trackedSessionId = info.sessionId;
+      trackedTier = info.tier || "anon";
+      startHeartbeat(info.heartbeatSec || 5);
+    }
+  });
+  c.addEventListener("input-level", (e) => {
+    const { rms } = /** @type {CustomEvent<{ rms: number }>} */ (e).detail;
+    paintInputLevel(rms);
+  });
+
+  try {
+    await c.connect();
+  } catch (err) {
+    // The grant can be refused (402 → limit) or the dial can fail. In LB mode
+    // the AudioContext hasn't been adopted by the client yet (the session POST
+    // runs first), so close the one we created here to avoid leaking it.
+    if (audioContext) void audioContext.close().catch(() => {});
+    throw err;
+  }
+}
+
+// ── Conversation-time heartbeat ─────────────────────────────────────────────
+
+/** Ping the server every `sec` seconds so it can meter the live session; when
+ *  it reports the daily budget is spent, cut the call and show the limit modal.
+ *  @param {number} sec */
+function startHeartbeat(sec) {
+  stopHeartbeat();
+  heartbeatTimer = window.setInterval(async () => {
+    if (!trackedSessionId) return;
+    try {
+      const res = await fetch("api/session/heartbeat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId: trackedSessionId }),
+        keepalive: true,
+      });
+      const json = await res.json().catch(() => ({}));
+      if (json.expired) await onLimitReached();
+    } catch (err) {
+      // A transient network blip shouldn't kill the call; the next tick retries.
+      if (DEBUG) console.debug("[ui] heartbeat failed:", err);
+    }
+  }, Math.max(1, sec) * 1000);
+}
+
+function stopHeartbeat() {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = 0;
+  }
+}
+
+/** The server cut the live session: tear down and explain why. */
+async function onLimitReached() {
+  const tier = trackedTier;
+  stopHeartbeat();
+  await teardown();
+  account.showLimit(tier);
+}
+
+/** Tell the server a session ended so it reconciles + refunds the unused chunk.
+ *  Uses sendBeacon so it still fires when the tab is closing. */
+function endTrackedSession() {
+  if (!trackedSessionId) return;
+  const body = JSON.stringify({ sessionId: trackedSessionId });
+  try {
+    const blob = new Blob([body], { type: "application/json" });
+    if (!navigator.sendBeacon("api/session/end", blob)) {
+      void fetch("api/session/end", {
+        method: "POST", headers: { "Content-Type": "application/json" }, body, keepalive: true,
+      }).catch(() => {});
+    }
+  } catch {
+    // Best-effort; the server sweep reaps the session anyway.
+  }
+  trackedSessionId = "";
+  trackedTier = "";
+}
+
+/** Leave the waiting queue so the LB frees our place. sendBeacon so it still
+ *  fires on tab close; the LB also reaps the ticket on TTL as a backstop. */
+function endQueueTicket() {
+  if (!queuedTicketId) return;
+  const body = JSON.stringify({ queueId: queuedTicketId });
+  try {
+    const blob = new Blob([body], { type: "application/json" });
+    if (!navigator.sendBeacon("api/queue/end", blob)) {
+      void fetch("api/queue/end", {
+        method: "POST", headers: { "Content-Type": "application/json" }, body, keepalive: true,
+      }).catch(() => {});
+    }
+  } catch {
+    // Best-effort; the LB reaps the ticket on TTL anyway.
+  }
+  queuedTicketId = "";
+}
+
+/** @param {string} status */
+function onClientStatus(status) {
+  switch (status) {
+    case "creating-session":
+    case "connecting":
+      setState("connecting");
+      break;
+    case "queued":
+      setState("queued");
+      break;
+    case "your-turn":
+      setState("your-turn");
+      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;
+  }
+}
+
+async function teardown() {
+  stopHeartbeat();
+  stopJoinCountdown();
+  endTrackedSession();
+  endQueueTicket();
+  chat.reset({ dismiss: true });
+  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;
+  }
+  // The webcam is independent of the call lifecycle (it runs while the user is
+  // on the page), so we leave it on here — only the camera toggle stops it.
+  micMuted = false;
+  micBtn.classList.remove("muted");
+  setState("idle");
+  // Refresh the chip's remaining-today after the budget moved.
+  if (limiterOn) void account.refresh();
+}
+
+/** @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");
+  void teardown().catch(() => {
+    setState("error");
+    setCaption(truncateError(message), "error");
+  });
+}
+
+setState("idle");
+chat.renderEmptyState();
+initGateArc();
+void fetchConfig();
+
+// ── Text input (set up early, before camera/permission calls) ───────────────
+try {
+  const textInput = /** @type {HTMLInputElement} */ ($("#text-input"));
+  const sendBtn = /** @type {HTMLButtonElement} */ ($("#text-send-btn"));
+  if (textInput && sendBtn) {
+    const doSendText = (/** @type {string} */ text) => {
+      if (!text) return;
+      if (!client) {
+        setCaption("Start a conversation first", "");
+        return;
+      }
+      client.sendUserText(text);
+      chat.onTranscript({ role: "user", text, partial: false });
+      textInput.value = "";
+    };
+    const onTextSend = () => doSendText(textInput.value.trim());
+    textInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onTextSend();
+      }
+    });
+    sendBtn.addEventListener("click", onTextSend);
+  } else {
+    console.error("[main] text input elements not found");
+  }
+} catch (err) {
+  console.error("[main] text input setup failed:", err);
+}
+
+// Start the webcam as soon as the user lands (camera tool defaults on), and
+// react to later permission changes (re-grant after a denial re-enables it).
+void autoStartCamera();
+void watchCameraPermission();
+
+// Reconcile a live session if the tab is closed/hidden mid-call (no teardown).
+window.addEventListener("pagehide", () => { endTrackedSession(); endQueueTicket(); });
+
+requestAnimationFrame(() => {
+  document.body.classList.remove("booting");
+});
diff --git a/public/voice-demo/style.css b/public/voice-demo/style.css
new file mode 100644
index 0000000..5ecb56c
--- /dev/null
+++ b/public/voice-demo/style.css
@@ -0,0 +1,2773 @@
+: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;
+
+  /* Mono is the "machine voice": reserved for system text the app emits —
+   * the orb's status caption, tool calls, the transport tag. Body/UI stays
+   * Inter. */
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+
+  /* Thesis: color belongs to the voice. The chrome is monochrome; saturated
+   * hue appears only on the orb and on these tiny role echoes, which mirror
+   * the orb's own state colors (you listening = cyan, assistant = violet,
+   * tool = amber) so the transcript reads in the same color language. */
+  --voice-user: var(--accent-2);
+  --voice-assistant: var(--accent);
+  --voice-tool: var(--processing);
+
+  /* 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 {
+  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 {
+  position: relative;
+  z-index: 1;
+  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;
+  /* Top-align so the right control cluster sits up with the title instead of
+   * floating to the vertical middle of the tall identity block. */
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 18px 28px;
+  /* Default stacking (below the conversation panel, z 200) so the panel drawer
+   * covers the controls when it's open. */
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  color: var(--text-dim);
+}
+
+/* Transport tag rides the wordmark as a system label, not prose — mono,
+ * dimmed, the only mono in the topbar. */
+.brand-tag {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  opacity: 0.55;
+}
+
+.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) {
+  /* The full identity stack is too tall for a phone topbar. Show only the
+   * title + (i); the popup carries the blurb, credits and pipeline.
+   * `.brand` prefix raises specificity so this beats the later base
+   * `.ident-meta { display: flex }` rule regardless of source order. */
+  .brand .ident-blurb,
+  .brand .ident-meta {
+    display: none;
+  }
+  .ident-title {
+    font-size: 18px;
+  }
+  .about-btn-mobile {
+    display: inline-flex;
+  }
+  /* Keep phone icons at the current compact size — the desktop bump above
+   * shouldn't leak into the mobile topbar. */
+  .topbar-right .icon-btn {
+    width: 36px;
+    height: 36px;
+  }
+  .topbar-right .icon-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+  /* Keep the account control compact on phones: avatar-only chip, shorter pill. */
+  .account-chip {
+    height: 36px;
+    padding: 0 6px;
+  }
+  .account-handle {
+    display: none;
+  }
+  .signin-pill {
+    height: 36px;
+    padding: 0 12px;
+  }
+}
+
+.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: var(--font-mono);
+  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;
+  touch-action: manipulation;
+  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);
+}
+/* Topbar control cluster reads a touch bigger on desktop. Phones keep the
+ * compact 36px (reset in the mobile media query). */
+.topbar-right .icon-btn {
+  width: 40px;
+  height: 40px;
+}
+.topbar-right .icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ─── Account (HF login chip + sign-in pill + popover) ─────────────────────── */
+.account {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+/* Signed-out: a compact pill that reads as the primary affordance. */
+.signin-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
+}
+.signin-pill svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.signin-pill:hover {
+  background: var(--bg-elev-2);
+  border-color: var(--text);
+}
+/* Narrow viewports: collapse the pill to an icon-only square. */
+@media (max-width: 800px) {
+  .signin-pill {
+    gap: 0;
+    width: 40px;
+    padding: 0;
+    justify-content: center;
+  }
+  .signin-pill span {
+    display: none;
+  }
+}
+/* Signed-in: avatar + handle chip. */
+.account-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 10px 0 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-elev);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.account-chip:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+.account-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex: none;
+}
+.account-avatar-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-elev-2);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 700;
+}
+.account-handle {
+  font-size: 13px;
+  font-weight: 600;
+  max-width: 12ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.account-pro {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: var(--text);
+  color: var(--bg);
+}
+/* Org "Team" badge: same pill as PRO, accent-coloured so it reads as
+ * unlimited without claiming a paid PRO subscription. */
+.account-team {
+  background: var(--accent);
+  color: var(--bg);
+}
+.account-pop {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 200px;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-soft);
+  z-index: 50;
+}
+.account-pop[hidden] {
+  display: none;
+}
+.account-pop-row {
+  padding: 8px 10px;
+}
+.account-pop-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+.account-pop-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding-top: 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.account-tier {
+  font-weight: 600;
+  color: var(--text);
+}
+.account-pop-link {
+  display: block;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 13px;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s;
+}
+.account-pop-link:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+.account-signout {
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+  padding-top: 10px;
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+
+/* ─── Daily-limit modal ────────────────────────────────────────────────────── */
+.limit-modal {
+  width: min(400px, 92vw);
+}
+.limit-card {
+  position: relative;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+  padding: 34px 28px 26px;
+}
+.limit-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+/* HF smiling face (brand yellow) on a neutral badge — friendly, not a stop sign.
+ * The logo is the single pop of colour, so the badge itself stays quiet. */
+.limit-badge {
+  width: 66px;
+  height: 66px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  margin: 2px auto 2px;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 0 0 6px rgba(255, 210, 30, 0.06);
+}
+.limit-badge .hf-logo {
+  width: 46px;
+  height: auto;
+}
+.limit-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+.limit-msg {
+  color: var(--text-dim);
+  font-size: 14px;
+  line-height: 1.55;
+  margin: 0;
+  max-width: 30ch;
+}
+.limit-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+.limit-cta .hf-logo {
+  width: 20px;
+  height: auto;
+  flex: none;
+}
+.limit-note {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+#limit-cta[hidden] {
+  display: none;
+}
+
+/* ─── Stage ───────────────────────────────────────────────────────────── */
+
+.stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 24px 32px;
+  gap: 20px;
+  min-height: 0;
+  background: transparent;
+}
+
+/* ─── 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;
+  /* Cap by height as well as width (min(vw, vh)-style): in a short container
+   * the orb shrinks instead of overflowing, so the page stays scroll-free even
+   * when embedded in a small box. On normal screens the 320px cap still wins,
+   * so the desktop size is unchanged. */
+  width: clamp(140px, min(38vw, 46vh), 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;
+  /* Treat taps as immediate clicks (no 300ms delay / double-tap-zoom). */
+  touch-action: manipulation;
+}
+.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-queued .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-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  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;
+}
+
+/* Warm, human line under the mono caption — sentence case, only while queued.
+ * The caption keeps the terse position; this reassures. */
+.circle-subcaption {
+  margin: 8px 0 0;
+  max-width: 32ch;
+  font-size: 13.5px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  text-align: center;
+  text-wrap: balance;
+  transition: opacity 0.25s ease;
+}
+.circle-subcaption[hidden] { display: none; }
+
+/* Queue actions sit under the caption: "Join now" (primary, only when it's your
+ * turn) stacked above the quiet "Leave queue" escape hatch. */
+.queue-actions {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.queue-actions[hidden] { display: none; }
+
+/* "Join now": the one call to action in the queue flow, so it reads as inviting
+ * (filled accent) while everything around it stays quiet. */
+.join-queue-btn {
+  padding: 10px 26px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #0b0b10;
+  background: var(--accent);
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+  transition: transform 0.12s ease, filter 0.2s ease;
+}
+.join-queue-btn:hover { filter: brightness(1.08); }
+.join-queue-btn:active { transform: scale(0.97); }
+.join-queue-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.join-queue-btn[hidden] { display: none; }
+
+/* "Leave queue": a quiet outlined pill, understated so it reads as an escape
+ * hatch, not a CTA. */
+.leave-queue-btn {
+  padding: 7px 16px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--text-faint) 35%, transparent);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+.leave-queue-btn:hover {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--text-faint) 60%, transparent);
+  background: color-mix(in srgb, var(--text-faint) 8%, transparent);
+}
+.leave-queue-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.leave-queue-btn[hidden] { display: none; }
+
+/* ─── 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(--voice-tool) 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) ──────────────────────────────────────── */
+
+/* Mic button + its radial noise-gate arc. The wrapper centres the button; the
+   arc SVG is an absolute overlay larger than the button, revealed with the
+   live session (it has no layout footprint, so the idle collapse is unaffected). */
+.mic-gate {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.mic-gate-arc {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  transform: translate(-50%, -50%);
+  pointer-events: none; /* only the hit-path below catches drags */
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.orb-wrap.live .mic-gate-arc { opacity: 1; }
+.mga-track {
+  stroke: rgba(255, 255, 255, 0.1); /* hairline; recedes until needed */
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+.mga-fill {
+  stroke: var(--accent-2);
+  stroke-width: 2;
+  stroke-linecap: round;
+  opacity: 0.85;
+  transition: stroke-dashoffset 0.06s linear;
+}
+/* Threshold setpoint: a bead riding the ring. White with a thin dark outline so
+   it stays legible over the moving fill; it recolors to cyan with a soft glow
+   the moment the live level crosses it (the gate opening). */
+.mga-handle {
+  fill: var(--text);
+  stroke: none;
+  transition: fill 0.2s ease, filter 0.2s ease;
+}
+.mic-gate.gate-open .mga-handle {
+  fill: var(--accent-2);
+  filter: drop-shadow(0 0 3px var(--accent-2));
+}
+.mga-hit {
+  stroke: transparent;
+  stroke-width: 16;
+  pointer-events: none; /* enabled only while live (below) */
+  cursor: pointer;
+  touch-action: none;
+}
+/* Only catch drags during a live call; when idle the arc is hidden and must
+   not steal clicks near the collapsed mic button / orb. */
+.orb-wrap.live .mga-hit { pointer-events: stroke; }
+
+.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;
+  touch-action: manipulation;
+  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; }
+/* Queued: a calm slate glow, distinct from connecting's active yellow — this is
+ * waiting, not working. The spinner turns slowly and the ring breathes. */
+.circle.state-queued       { --glow: #94a3b8; }
+.circle.state-queued .ind-spinner { animation-duration: 2.4s; }
+.circle.state-queued .circle-ring { animation: breathe 2.6s ease-in-out infinite; }
+/* Your turn: a slot is held for you — the orb warms to the accent and breathes a
+ * little quicker, an invitation to join. */
+.circle.state-your-turn    { --glow: var(--accent); }
+.circle.state-your-turn .circle-ring { animation: breathe 1.6s ease-in-out infinite; }
+.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(--border-strong);
+  background: var(--bg-elev);
+}
+
+.robot-card .name {
+  font-weight: 600;
+  font-size: 14px;
+}
+.robot-card .id {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.robot-empty {
+  padding: 14px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 13px;
+}
+
+/* ─── Footer ──────────────────────────────────────────────────────────── */
+
+/* ─── Text input bar ─────────────────────────────────────────────────────── */
+
+.text-input-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 560px;
+  margin: 20px auto 0;
+  padding: 0 20px;
+  width: 100%;
+}
+
+.text-input {
+  flex: 1;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 10px 16px;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.text-input::placeholder {
+  color: var(--text-faint);
+}
+
+.text-input:focus {
+  border-color: var(--accent-2);
+}
+
+.text-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.text-send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  transition: opacity 0.2s ease, background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.text-send-btn:hover:not(:disabled) {
+  background: var(--accent-2);
+}
+
+.text-send-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.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);
+}
+/* While the webcam preview sits bottom-left, push the credit to the
+ * bottom-right so the two don't collide. */
+body.cam-on .footer {
+  justify-content: flex-end;
+}
+
+/* ─── 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[hidden] { display: none; }
+.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(--text-dim);
+}
+/* Upload button for custom voice samples */
+.btn-upload {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--bg);
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+  margin-top: 2px;
+}
+.btn-upload:hover {
+  background: var(--accent);
+  color: #fff;
+}
+.btn-upload:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Deploy-pinned server URL: shown for transparency, not editable. */
+.field input[readonly] {
+  color: var(--text-dim);
+  border-style: dashed;
+  cursor: default;
+}
+.field input[readonly]:focus {
+  border-color: var(--border);
+}
+.field small {
+  color: var(--text-faint);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.field small.error { color: var(--error); }
+.field small code {
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
+/* Noise gate: a header with a live value, a level meter, and a range slider
+   that shares the meter's horizontal (dB) axis. */
+.field-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.field-value {
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-dim);
+}
+/* The slider and the level meter are one widget: the range input is overlaid
+   on the meter track (its native track is transparent), so the live-level fill
+   shows through behind the thumb and the thumb itself is the threshold. */
+.gate {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.gate-track {
+  position: relative;
+  height: 14px;
+  display: flex;
+  align-items: center;
+}
+.gate-track::before {
+  /* the visible meter track */
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+}
+.gate-meter-fill {
+  position: absolute;
+  left: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 6px;
+  width: 0;
+  border-radius: 999px;
+  background: var(--accent-2);
+  transition: width 0.06s linear;
+  pointer-events: none;
+}
+.gate-ends {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--text-faint);
+  letter-spacing: 0;
+  text-transform: none;
+}
+/* The range input sits transparently on top of the meter track. */
+.gate-track input[type="range"] {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 0;
+  border: none;
+  background: transparent;
+  height: 14px;
+  cursor: pointer;
+}
+.gate-track input[type="range"]::-webkit-slider-runnable-track {
+  height: 14px;
+  background: transparent;
+}
+.gate-track input[type="range"]::-moz-range-track {
+  height: 14px;
+  background: transparent;
+}
+.gate-track input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 6px;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--text);
+  border: 2px solid var(--bg-elev);
+  box-shadow: 0 0 0 1px var(--border-strong);
+}
+.gate-track input[type="range"]::-moz-range-thumb {
+  width: 6px;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--text);
+  border: 2px solid var(--bg-elev);
+  box-shadow: 0 0 0 1px var(--border-strong);
+}
+.gate-track input[type="range"]:focus { border: none; }
+
+.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(--text);
+  border-color: var(--text);
+  color: var(--bg);
+}
+.btn.primary:hover {
+  background: #fff;
+  border-color: #fff;
+}
+.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;
+}
+
+/* Horizontal layout for Voice + Model. */
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+/* ─── Chat button + badge ────────────────────────────────────────────── */
+
+#chat-btn {
+  position: relative;
+}
+
+.chat-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text);
+  border: 1.5px solid var(--bg-elev);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+.chat-badge.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ─── Lyric-style ephemeral transcript ─────────────────────────────────
+ * A vertical lyrics stack like a music player: newest line is largest and
+ * sits at the bottom, older lines shrink and fade as they move up, and the
+ * oldest fades out at the top as new lines arrive. */
+
+.bubble-stack {
+  position: fixed;
+  right: 40px;
+  bottom: 15%;
+  width: min(440px, calc(100vw - 64px));
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 6px;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.bubble {
+  pointer-events: none;
+  max-width: 100%;
+  padding: 2px 0;
+  text-align: right;
+  line-height: 1.35;
+  word-break: break-word;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 0.25s ease, transform 0.25s ease, font-size 0.25s ease;
+}
+.bubble.in {
+  opacity: 1;
+  transform: translateY(0);
+}
+.bubble.out {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* Progressive lyric sizing — newest line (last child) is biggest, older
+ * lines shrink and dim as they climb the stack. */
+.bubble.in:last-child {
+  font-size: 26px;
+  font-weight: 700;
+}
+.bubble.in:nth-last-child(2) {
+  font-size: 21px;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.bubble.in:nth-last-child(3) {
+  font-size: 17px;
+  font-weight: 500;
+  opacity: 0.7;
+}
+.bubble.in:nth-last-child(4) {
+  font-size: 14px;
+  font-weight: 400;
+  opacity: 0.55;
+}
+.bubble.in:nth-last-child(n+5) {
+  font-size: 12px;
+  font-weight: 400;
+  opacity: 0.35;
+}
+
+.bubble.user,
+.bubble.assistant,
+.bubble.tool {
+  align-self: flex-end;
+}
+.bubble.user {
+  color: rgba(190, 235, 251, 0.82);
+}
+.bubble.assistant {
+  color: rgba(214, 208, 255, 0.82);
+}
+.bubble.tool {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: var(--font-mono);
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  opacity: 0.7;
+}
+.bubble.tool .bubble-tool-icon {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  color: var(--voice-tool);
+}
+
+.bubble-role {
+  display: none;
+}
+
+/* ─── Conversation history panel ─────────────────────────────────────── */
+
+.chat-panel {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+}
+.chat-panel-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 9, 13, 0.45);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.chat-panel.open .chat-panel-backdrop {
+  opacity: 1;
+  pointer-events: auto;
+}
+.chat-panel-inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(360px, 90vw);
+  background: var(--bg-elev);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+  pointer-events: auto;
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
+}
+.chat-panel.open .chat-panel-inner {
+  transform: translateX(0);
+}
+.chat-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+.chat-panel-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  scroll-behavior: smooth;
+}
+.chat-history::-webkit-scrollbar { width: 3px; }
+.chat-history::-webkit-scrollbar-track { background: transparent; }
+.chat-history::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+
+.chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--text-faint);
+  padding: 48px 0;
+  opacity: 0.65;
+}
+.chat-empty svg {
+  margin-bottom: 6px;
+  opacity: 0.8;
+}
+.chat-empty-title {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.chat-empty-hint {
+  font-size: 12px;
+  color: var(--text-faint);
+  opacity: 0.7;
+}
+
+/* ─── History messages ───────────────────────────────────────────────── */
+
+.hist-msg {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-width: 88%;
+}
+.hist-msg.user { align-self: flex-start; }
+.hist-msg.assistant { align-self: flex-end; }
+.hist-msg.tool { align-self: flex-start; max-width: 100%; }
+
+.hist-role {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 0 2px;
+}
+.hist-msg.user .hist-role { color: color-mix(in srgb, var(--voice-user) 75%, var(--text-faint)); }
+.hist-msg.assistant .hist-role { color: color-mix(in srgb, var(--voice-assistant) 75%, var(--text-faint)); }
+.hist-msg.tool .hist-role { color: color-mix(in srgb, var(--voice-tool) 75%, var(--text-faint)); }
+
+.hist-body {
+  padding: 9px 12px;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  line-height: 1.5;
+  border: 1px solid var(--border);
+  background: var(--bg-elev-2);
+  word-break: break-word;
+}
+/* Bodies share one neutral surface; alignment + the mono role label do the
+ * distinguishing, so the panel reads as one quiet column. */
+.hist-msg.user .hist-body.partial { opacity: 0.65; }
+
+/* ─── Tool call history item ─────────────────────────────────────────── */
+
+.hist-tool-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: color-mix(in srgb, var(--processing) 10%, var(--bg-elev-2));
+  border: 1px solid color-mix(in srgb, var(--processing) 22%, var(--border));
+  border-bottom: 1px solid color-mix(in srgb, var(--processing) 15%, var(--border));
+  cursor: pointer;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  width: 100%;
+  text-align: left;
+  transition: background 0.15s;
+}
+.hist-tool-header:only-child {
+  border-radius: var(--radius-md);
+  border-bottom: 1px solid color-mix(in srgb, var(--processing) 22%, var(--border));
+}
+.hist-tool-header:hover {
+  background: color-mix(in srgb, var(--processing) 16%, var(--bg-elev-2));
+}
+.hist-tool-icon {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  color: var(--processing);
+}
+.hist-tool-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--voice-tool);
+  font-weight: 600;
+}
+.hist-tool-chevron {
+  margin-left: auto;
+  width: 13px;
+  height: 13px;
+  color: var(--text-faint);
+  transition: transform 0.2s ease;
+  flex: none;
+}
+.hist-tool-header[aria-expanded="true"] .hist-tool-chevron {
+  transform: rotate(180deg);
+}
+.hist-tool-body {
+  padding: 10px 12px 12px;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  background: var(--bg);
+  border: 1px solid color-mix(in srgb, var(--processing) 22%, var(--border));
+  border-top: none;
+  display: none;
+}
+.hist-tool-body.open { display: block; }
+.hist-tool-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin: 8px 0 4px;
+}
+.hist-tool-label:first-child { margin-top: 0; }
+.hist-tool-block {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.65;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+}
+.hist-tool-output { color: var(--text); }
+
+/* ─── Phone layout ────────────────────────────────────────────────────────
+ * On phones the floating bubble stream overlaps the orb and there isn't room
+ * for it, so we drop it entirely and rely on the conversation panel (opened
+ * from the top-right chat button) as the single place to read the transcript.
+ * The badge still pulses there when new messages arrive while it's closed.
+ * We also stack the mic / stop controls above and below the orb (instead of
+ * left/right) so the wide live row never overflows, and let the panel take
+ * the full width. */
+@media (max-width: 600px) {
+  .bubble-stack {
+    display: none;
+  }
+
+  .topbar {
+    padding: 14px 16px;
+  }
+
+  .stage {
+    padding: 16px 12px 24px;
+  }
+
+  /* Stack vertically: mic above the orb, stop below it (DOM order is
+   * mic → circle → stop). */
+  .orb-wrap {
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .circle {
+    /* Height-capped like the base rule so a narrow AND short box still fits. */
+    width: clamp(130px, min(56vw, 52vh), 240px);
+  }
+
+  /* In the column layout the side controls must collapse by HEIGHT, not
+   * width, so they take no vertical space until the session is live. */
+  .side-btn {
+    width: 44px;
+    height: 0;
+    transition: opacity 0.25s ease, transform 0.25s ease, height 0.25s ease,
+      background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .side-btn svg {
+    width: 19px;
+    height: 19px;
+  }
+  .orb-wrap.live .side-btn {
+    width: 44px;
+    height: 44px;
+  }
+  .mic-gate-arc { width: 70px; height: 70px; }
+
+  /* Full-screen conversation on phones — feels more deliberate than a
+   * narrow slide-over. It already spans top-to-bottom (inset 0); make it
+   * span edge-to-edge too and drop the now-pointless border/shadow. */
+  .chat-panel-inner {
+    width: 100vw;
+    border-left: none;
+    box-shadow: none;
+  }
+}
+
+/* ─── About panel ─────────────────────────────────────────────────────────
+ * Opened from the (i) by the wordmark. Reuses the <dialog> .modal shell.
+ * Strictly monochrome per DESIGN.md — the only "color" is the orb, never
+ * here. Machine identifiers (model IDs, role tags, usernames) ride Geist
+ * Mono; everything human stays Inter. */
+.about-modal {
+  /* Roomier on tablet/desktop; the 92vw cap keeps phones full-width. */
+  width: min(680px, 92vw);
+  max-height: 88vh;
+}
+.about-modal .modal-content {
+  max-height: 88vh;
+  overflow-y: auto;
+  gap: 20px;
+  padding: 26px 30px 24px;
+}
+.about-modal .modal-content::-webkit-scrollbar { width: 3px; }
+.about-modal .modal-content::-webkit-scrollbar-track { background: transparent; }
+.about-modal .modal-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+
+/* Links here are quiet: no permanent underline (the global dotted rule is
+ * too loud for a dense credit block), brighten + underline on hover only. */
+.about-modal a {
+  color: var(--text);
+  border-bottom: none;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+.about-modal a:hover {
+  color: #fff;
+}
+.about-intro a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.about-modal .ext {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  opacity: 0.5;
+}
+
+/* Title row: the demo name and the (i) read as one unit. */
+.ident-head {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+/* (i) trigger sits right after the title. A faint outline keeps it
+ * catchable without turning into a card; it fills in on hover. */
+.about-btn {
+  flex: none;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.about-btn:hover {
+  background: var(--bg-elev);
+  border-color: var(--text-dim);
+  color: var(--text);
+}
+.about-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.about-btn-mobile {
+  display: inline-flex;
+}
+
+/* ── Popup intro: a plain paragraph on the project + a repo link ── */
+.about-intro p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+.about-repo {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 12px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* ── Corner identity (replaces the wordmark) ──
+ * A compact stack in the topbar: title, one-line blurb, two meta rows.
+ * Monochrome; only the role/name identifiers ride the machine typeface. */
+.ident {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+/* Reset the global underlined-anchor styling inside the identity block. */
+.ident a {
+  border-bottom: none;
+  color: inherit;
+  transition: color 0.15s ease;
+}
+.ident a:hover {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ident-title {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  line-height: 1.1;
+  color: var(--text);
+}
+.ident-blurb {
+  margin: 0;
+  max-width: 48ch;
+  font-size: 14.5px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--text-dim);
+}
+.ident-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-dim);
+}
+.ident-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+}
+.ident-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+/* Shared credit bits — now used in the corner identity block. */
+.sep {
+  color: var(--text-faint);
+  opacity: 0.6;
+}
+.hf-credit {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+/* Brand marks keep their own color — a deliberate exception to the
+ * monochrome rule, for the HF and Cerebras logos only. */
+.hf-mark {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: #ffd21e;
+}
+.cerebras-credit {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.cerebras-mark {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+/* Usernames are identifiers, so they ride the machine typeface. */
+.handle {
+  font-family: var(--font-mono);
+  font-size: 13.5px;
+}
+
+/* ── Pipeline (the signal flow) ── */
+.about-pipeline {
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+}
+.pipeline-title {
+  margin: 0 0 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+.pipeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+/* One continuous rail threading every node, dot centers at x=8.5px. */
+.pipeline::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  top: 7px;
+  bottom: 7px;
+  width: 1px;
+  background: var(--border-strong);
+}
+.pipeline > li {
+  position: relative;
+  padding-left: 30px;
+}
+/* Stages: solid node. Endpoints (you / orb): hollow node. */
+.pipe-stage::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 4px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-dim);
+}
+.pipe-endpoint::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 3px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 1px solid var(--text-faint);
+  background: var(--bg-elev);
+}
+.pipe-endpoint {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding-bottom: 12px;
+}
+.pipeline > li.pipe-endpoint:last-child {
+  padding-bottom: 0;
+}
+.pipe-stage {
+  padding-bottom: 16px;
+}
+.pipe-tag {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--text);
+  margin-right: 9px;
+}
+.pipe-job {
+  font-size: 14px;
+  color: var(--text-dim);
+}
+/* Middot between the job and its model link, matching the separators
+ * used elsewhere. */
+.pipe-job::after {
+  content: "·";
+  margin: 0 7px;
+  color: var(--text-faint);
+}
+.pipe-note {
+  color: var(--text-faint);
+}
+/* The Cerebras link stays as quiet as the note; brightens + underlines on hover. */
+.pipe-note a {
+  color: inherit;
+}
+.pipe-note a:hover {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.pipe-model {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  word-break: break-all;
+}
+.pipe-model:hover {
+  color: #fff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.pipe-model .ext {
+  width: 11px;
+  height: 11px;
+}
+
+/* "Interrupted" tag on an assistant reply the user barged in on. */
+.hist-note {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 0 2px;
+}
+.hist-msg.assistant .hist-note {
+  align-self: flex-end;
+}
+.hist-msg.interrupted .hist-body {
+  opacity: 0.7;
+}
+
+/* Captured webcam frame shown in the transcript (camera tool result). */
+.hist-image {
+  display: block;
+  width: 100%;
+  max-width: 240px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  margin-top: 2px;
+}
+
+/* ─── Tools panel ──────────────────────────────────────────────────────────
+ * Reuses the modal/field shell. Switches are monochrome (checked = near-white,
+ * the same high-contrast treatment as the primary button): color belongs to
+ * the voice, not the chrome. */
+.tools-intro {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-dim);
+}
+.tool-list {
+  display: flex;
+  flex-direction: column;
+}
+.tool-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 0;
+}
+.tool-row-sep {
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+.tool-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.tool-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+.tool-desc {
+  font-size: 12.5px;
+  color: var(--text-dim);
+}
+.tool-row.disabled .tool-name,
+.tool-row.disabled .tool-desc {
+  opacity: 0.5;
+}
+.tool-hint {
+  display: block;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-faint);
+}
+.tools-key {
+  margin: 0 0 4px;
+}
+
+/* Toggle switch */
+.switch {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: 40px;
+  height: 24px;
+  cursor: pointer;
+}
+.switch input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.switch-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  transition: background 0.15s, border-color 0.15s;
+}
+.switch-track::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  transition: transform 0.18s ease, background 0.15s;
+}
+.switch input:checked + .switch-track {
+  background: var(--text);
+  border-color: var(--text);
+}
+.switch input:checked + .switch-track::after {
+  transform: translate(16px, -50%);
+  background: var(--bg);
+}
+.switch input:focus-visible + .switch-track {
+  outline: 2px solid var(--text-dim);
+  outline-offset: 2px;
+}
+.switch input:disabled {
+  cursor: not-allowed;
+}
+.switch input:disabled + .switch-track {
+  opacity: 0.5;
+}
+
+/* ─── Webcam preview (camera tool) ──────────────────────────────────────────
+ * Floating self-view, bottom-left. Mirrored for the user; the frame sent to
+ * the model is drawn un-mirrored (see captureSnapshot). */
+.cam-pip {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  width: 280px;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-soft);
+  z-index: 90;
+  opacity: 0;
+  transform: translateY(8px) scale(0.96);
+  pointer-events: none;
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+.cam-pip.visible {
+  opacity: 1;
+  transform: none;
+}
+.cam-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1); /* mirror the self-view only */
+  background: var(--bg);
+}
+.cam-label {
+  position: absolute;
+  left: 8px;
+  bottom: 6px;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text);
+  opacity: 0.8;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+}
+.cam-flash {
+  position: absolute;
+  inset: 0;
+  background: #fff;
+  opacity: 0;
+  pointer-events: none;
+}
+.cam-pip.flash .cam-flash {
+  animation: cam-flash 0.4s ease;
+}
+@keyframes cam-flash {
+  0% { opacity: 0; }
+  12% { opacity: 0.85; }
+  100% { opacity: 0; }
+}
+@media (max-width: 600px) {
+  /* Bottom-centred on phones. Auto margins centre it without touching the
+   * transform, so the slide/scale-in animation still works. */
+  .cam-pip {
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    bottom: 16px;
+    width: min(188px, 52vw);
+  }
+  /* The credit would sit under the centred preview, so drop it while the
+   * camera is on. */
+  body.cam-on .footer {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cam-pip {
+    transition: opacity 0.22s ease;
+    transform: none;
+  }
+  .cam-pip.flash .cam-flash {
+    animation: none;
+  }
+}
+
+/* ─── Desktop type scale ────────────────────────────────────────────────────
+ * A uniform step up (~+1px, title +2) for all UI text on larger screens.
+ * Scoped to min-width: 601px so it can't reach phones — the ≤600px layout
+ * keeps every size exactly as it was. */
+@media (min-width: 601px) {
+  .cam-label { font-size: 10.5px; }
+
+  .bubble-role,
+  .hist-role { font-size: 11px; }
+
+  .circle-caption,
+  .footer,
+  .chat-empty-title,
+  .hist-tool-block,
+  .ident-label,
+  .pipeline-title,
+  .pipe-endpoint { font-size: 12px; }
+
+  .field > span,
+  .field small,
+  .bubble.tool,
+  .chat-empty-hint,
+  .hist-tool-name,
+  .pipe-tag,
+  .pipe-model,
+  .tool-hint { font-size: 13px; }
+
+  .tool-desc { font-size: 13.5px; }
+
+  .btn,
+  .bubble,
+  .field,
+  .hist-body,
+  .hist-tool-header,
+  .tools-intro { font-size: 14px; }
+
+  .handle { font-size: 14.5px; }
+
+  .about-intro p,
+  .about-repo,
+  .brand,
+  .chat-panel-header h3,
+  .field textarea,
+  .ident-meta,
+  .pipe-job,
+  .tool-name { font-size: 15px; }
+
+  .ident-blurb { font-size: 15.5px; }
+
+  .modal-header h2 { font-size: 17px; }
+
+  .ident-title { font-size: 24px; }
+}
+
+/* ─── Short viewports: fit without a vertical scrollbar ─────────────────────
+ * The base media queries only react to WIDTH, so a short container (e.g. the
+ * app embedded in a small box, or a laptop window once the browser chrome eats
+ * into the viewport) used to overflow vertically and get clipped. We KEEP the
+ * identity header, orb, caption and credits — we just undo the desktop type
+ * bump, tighten the vertical rhythm and let the height-capped orb shrink, so
+ * everything fits with comfortable margin. No opt-in needed.
+ *
+ * The single biggest space eater is the identity block (~180px at the desktop
+ * type scale), so this tier compacts it first. */
+@media (max-height: 780px) {
+  .topbar { padding: 14px 24px; }
+  .ident { gap: 5px; }
+  .ident-title { font-size: 20px; }
+  .ident-blurb { font-size: 13.5px; line-height: 1.4; }
+  .ident-meta { gap: 5px; font-size: 13px; }
+  .stage { padding: 12px 20px 16px; gap: 12px; }
+  .footer { padding: 8px 24px 10px; }
+  .circle { width: clamp(140px, min(38vw, 44vh), 300px); }
+}
+
+@media (max-height: 560px) {
+  .topbar { padding: 8px 16px; }
+  .ident-title { font-size: 17px; }
+  /* Below this, room is tight enough that the one-line blurb and the footer
+   * (a verbatim duplicate of the header's "Powered by" credit) are dropped so
+   * the title + credits still read; the rest of the header stays. */
+  .ident-blurb { display: none; }
+  .stage { padding: 8px 14px 10px; gap: 8px; }
+  .footer { display: none; }
+  .circle { width: clamp(120px, min(50vw, 46vh), 240px); }
+}
+
+/* ─── Digital-human avatar as full-viewport background ────────────────── */
+
+.avatar-stage {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  overflow: hidden;
+  background: #111;
+}
+
+.avatar-stage iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  pointer-events: none;
+}
diff --git a/public/voice-demo/ui/account.js b/public/voice-demo/ui/account.js
new file mode 100644
index 0000000..dc2d5b2
--- /dev/null
+++ b/public/voice-demo/ui/account.js
@@ -0,0 +1,189 @@
+// @ts-check
+/**
+ * Account — the HF login chip and the daily-limit modal.
+ *
+ * Reads `/api/me` to learn the current tier (anonymous / signed-in / PRO) and
+ * remaining daily talk-time, renders a sign-in pill or a signed-in chip with a
+ * small popover (tier, remaining, sign out, upgrade), and shows the limit modal
+ * when a conversation is refused or cut. The time metering itself lives in
+ * main.js (heartbeat loop) + the server; this module is just the surface.
+ *
+ * Inert unless the deploy is in LB mode (`/api/me` → `{enabled:true}`).
+ */
+
+import { $, escHtml } from "./dom.js";
+
+const PRO_URL = "https://huggingface.co/subscribe/pro";
+
+// Official multi-color Hugging Face logo, used in the badge + sign-in CTA.
+const HF_MARK = `<svg class="hf-logo" viewBox="0 0 95 88" fill="none" aria-hidden="true"><path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z"/><path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"/><path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd"/><path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"/><path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"/><path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"/><path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"/></svg>`;
+
+/** @param {number} sec @returns {string} "m:ss" */
+function fmt(sec) {
+  const s = Math.max(0, Math.round(sec));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+
+export class Account {
+  constructor() {
+    /** @type {HTMLElement} */
+    this._root = $("#account");
+    /** @type {HTMLDialogElement} */
+    this._modal = $("#limit-modal");
+    this._modalTitle = $("#limit-title");
+    this._modalMsg = $("#limit-msg");
+    this._modalNote = $("#limit-note");
+    /** @type {HTMLAnchorElement} */
+    this._modalCta = /** @type {any} */ ($("#limit-cta"));
+
+    /** @type {{enabled:boolean, auth?:boolean, loggedIn?:boolean, username?:string, avatar?:string, tier?:string, remainingSec?:number|null, limitSec?:number|null, loginUrl?:string|null, logoutUrl?:string|null}} */
+    this._me = { enabled: false };
+    this._popoverOpen = false;
+
+    $("#limit-close").addEventListener("click", () => this._modal.close());
+    this._modal.addEventListener("click", (e) => {
+      if (e.target === this._modal) this._modal.close();
+    });
+    // Close the popover on an outside click.
+    document.addEventListener("click", (e) => {
+      if (this._popoverOpen && !this._root.contains(/** @type {Node} */ (e.target))) {
+        this._closePopover();
+      }
+    });
+  }
+
+  get tier() {
+    return this._me.tier || "anon";
+  }
+
+  /** Fetch `/api/me` and (re)render the chip. Safe to call repeatedly (load,
+   *  after the OAuth redirect, after a conversation ends). */
+  async refresh() {
+    try {
+      const res = await fetch("api/me");
+      this._me = res.ok ? await res.json() : { enabled: false };
+    } catch {
+      this._me = { enabled: false };
+    }
+    this._render();
+  }
+
+  _render() {
+    const me = this._me;
+    if (!me.enabled) {
+      this._root.hidden = true;
+      this._root.innerHTML = "";
+      return;
+    }
+    this._root.hidden = false;
+
+    if (!me.loggedIn) {
+      // Signed-out: a sign-in pill (only when OAuth is actually available).
+      if (me.auth && me.loginUrl) {
+        this._root.innerHTML = `<a class="signin-pill" href="${escHtml(me.loginUrl)}" title="Sign in for more time"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg><span>Sign in</span></a>`;
+      } else {
+        this._root.innerHTML = "";
+        this._root.hidden = true;
+      }
+      return;
+    }
+
+    // Signed-in: avatar + handle chip that toggles a popover.
+    const isPro = me.tier === "pro";
+    // Org members get unlimited usage too, but aren't PRO — don't brand them so.
+    const isUnlimited = isPro || me.tier === "org";
+    const avatar = me.avatar
+      ? `<img class="account-avatar" src="${escHtml(me.avatar)}" alt="" />`
+      : `<span class="account-avatar account-avatar-fallback">${escHtml((me.username || "?")[0].toUpperCase())}</span>`;
+    const remaining =
+      isUnlimited || me.remainingSec == null
+        ? "Unlimited"
+        : `${fmt(me.remainingSec)} left today`;
+    const tierLabel = isPro ? "PRO" : isUnlimited ? "Team" : "Free";
+
+    this._root.innerHTML = `
+      <button id="account-chip" class="account-chip" aria-haspopup="true" aria-expanded="false">
+        ${avatar}
+        <span class="account-handle">${escHtml(me.username || "you")}</span>
+        ${isPro
+          ? '<span class="account-pro">PRO</span>'
+          : me.tier === "org"
+            ? '<span class="account-pro account-team">TEAM</span>'
+            : ""}
+      </button>
+      <div id="account-pop" class="account-pop" hidden>
+        <div class="account-pop-row account-pop-name">${escHtml(me.username || "you")}</div>
+        <div class="account-pop-row account-pop-meta">
+          <span class="account-tier">${tierLabel}</span>
+          <span class="account-remaining">${escHtml(remaining)}</span>
+        </div>
+        ${isUnlimited ? "" : `<a class="account-pop-link" href="${PRO_URL}" target="_blank" rel="noopener">Upgrade to PRO</a>`}
+        <a class="account-pop-link account-signout" href="${escHtml(me.logoutUrl || "#")}">Sign out</a>
+      </div>`;
+
+    const chip = $("#account-chip");
+    chip.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._popoverOpen ? this._closePopover() : this._openPopover();
+    });
+  }
+
+  _openPopover() {
+    const pop = document.getElementById("account-pop");
+    const chip = document.getElementById("account-chip");
+    if (!pop || !chip) return;
+    pop.hidden = false;
+    chip.setAttribute("aria-expanded", "true");
+    this._popoverOpen = true;
+  }
+
+  _closePopover() {
+    const pop = document.getElementById("account-pop");
+    const chip = document.getElementById("account-chip");
+    if (pop) pop.hidden = true;
+    if (chip) chip.setAttribute("aria-expanded", "false");
+    this._popoverOpen = false;
+  }
+
+  /**
+   * Show the limit modal for a tier — used both when a conversation is refused
+   * at start (402) and when a live one is cut (heartbeat `expired`).
+   * @param {string} [tier]
+   */
+  showLimit(tier = this.tier) {
+    const canSignIn = this._me.auth && this._me.loginUrl;
+    this._modalTitle.textContent = "Thanks for chatting!";
+    if (tier === "anon") {
+      this._modalMsg.textContent =
+        "Guest conversations run for 5 minutes. Sign in with Hugging Face to get 10 minutes a day for free, and PRO members chat with no limit at all.";
+      this._modalNote.textContent = "Your free minutes refresh tomorrow.";
+      if (canSignIn) {
+        this._modalCta.innerHTML = `${HF_MARK}<span>Sign in with Hugging Face</span>`;
+        this._modalCta.href = /** @type {string} */ (this._me.loginUrl);
+        this._modalCta.hidden = false;
+      } else {
+        this._modalCta.hidden = true;
+      }
+    } else {
+      // Signed-in, non-PRO.
+      this._modalMsg.textContent =
+        "You've enjoyed your 10 minutes for today. Go PRO for unlimited conversations and to support open source AI.";
+      this._modalNote.textContent = "Or come back tomorrow. Your minutes reset daily.";
+      this._modalCta.innerHTML = "<span>Upgrade to PRO</span>";
+      this._modalCta.href = PRO_URL;
+      this._modalCta.hidden = false;
+    }
+    if (!this._modal.open) this._modal.showModal();
+  }
+
+  /** Show a warm "we're at capacity" message when even the waiting line is full.
+   *  Reuses the limit modal shell; no call-to-action, just reassurance. */
+  showBusy() {
+    this._modalTitle.textContent = "Hugged to the limit 🤗";
+    this._modalMsg.textContent =
+      "Every slot and the whole line are full right now. Too much love! Grab a coffee and pop back in a minute.";
+    this._modalNote.textContent = "A spot usually opens up within a few minutes.";
+    this._modalCta.hidden = true;
+    if (!this._modal.open) this._modal.showModal();
+  }
+}
diff --git a/public/voice-demo/ui/chat.js b/public/voice-demo/ui/chat.js
new file mode 100644
index 0000000..b54a672
--- /dev/null
+++ b/public/voice-demo/ui/chat.js
@@ -0,0 +1,422 @@
+// @ts-check
+/**
+ * ChatView — owns the whole conversation surface: the slide-in history panel,
+ * the ephemeral on-orb bubbles, and all the transcript/tool/streaming
+ * bookkeeping. main.js wires the realtime client's events straight to the
+ * `on*` methods here and otherwise doesn't touch chat state.
+ *
+ * Two parallel surfaces share one shape (see `_buildMessageEl`):
+ *   - ephemeral bubbles  (`.bubble` / `.bubble-*`)  fade on a timer
+ *   - persistent history (`.hist-msg` / `.hist-*`)  the durable panel log
+ *
+ * Keying:
+ *   - user transcripts by the server's `item_id` — a speculative continuation
+ *     REUSES it, so both segments land in one row/bubble; deltas are CUMULATIVE
+ *     (each carries the full sentence so far), so we replace text wholesale.
+ *   - assistant transcripts by `response_id`, so a cancelled speculative reply
+ *     can be marked interrupted without erasing what was already shown.
+ */
+
+import { $, escHtml, DEBUG } from "./dom.js";
+
+const WRENCH_PATH = `<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>`;
+const CHAT_BUBBLE_SVG = `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+const EMPTY_STATE_HTML = `<div id="chat-empty" class="chat-empty">${CHAT_BUBBLE_SVG}<span class="chat-empty-title">No messages yet</span><span class="chat-empty-hint">Tap the orb and start talking</span></div>`;
+
+export class ChatView {
+  constructor() {
+    /** @type {HTMLButtonElement} */
+    this._chatBtn = $("#chat-btn");
+    /** @type {HTMLSpanElement} */
+    this._chatBadge = $("#chat-badge");
+    /** @type {HTMLDivElement} */
+    this._chatPanel = $("#chat-panel");
+    /** @type {HTMLDivElement} */
+    this._chatPanelBackdrop = $("#chat-panel-backdrop");
+    /** @type {HTMLButtonElement} */
+    this._chatPanelClose = $("#chat-panel-close");
+    /** @type {HTMLDivElement} */
+    this._chatHistory = $("#chat-history");
+    /** @type {HTMLDivElement} */
+    this._bubbleStack = $("#bubble-stack");
+
+    this._panelOpen = false;
+    this._scrollQueued = false;
+
+    // ── User transcript state (keyed by item_id) ───────────────────────────
+    /** @type {Map<string, HTMLElement>} */
+    this._userHistByItem = new Map();
+    /** @type {HTMLElement | null} */
+    this._activeUserBubble = null;
+    this._activeUserItemId = "";
+    // Monotonic counter for synthesizing unique keys when the server omits an
+    // item_id / response_id, so id-less messages never collapse onto each other.
+    this._anonSeq = 0;
+
+    // ── Assistant transcript state (keyed by response_id) ──────────────────
+    /** @type {Map<string, { bubble: HTMLElement, hist: HTMLElement }>} */
+    this._asstByResp = new Map();
+
+    // ── Ephemeral bubble auto-dismiss ──────────────────────────────────────
+    // Per-element expiry (epoch ms). A bubble fades once its expiry passes —
+    // but only in stack order (see _reapBubbles). Refreshing the expiry keeps a
+    // bubble alive while it updates (e.g. the live user utterance).
+    /** @type {WeakMap<HTMLElement, number>} */
+    this._bubbleExpiry = new WeakMap();
+    // Single pending reaper handle: one timer for the whole stack (not one per
+    // bubble) so dismissal is strictly oldest-first regardless of per-bubble delays.
+    this._reaperHandle = 0;
+
+    this._chatBtn.addEventListener("click", () => (this._panelOpen ? this._closePanel() : this._openPanel()));
+    this._chatPanelClose.addEventListener("click", () => this._closePanel());
+    this._chatPanelBackdrop.addEventListener("click", () => this._closePanel());
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this._panelOpen) this._closePanel();
+    });
+  }
+
+  // ── Panel ───────────────────────────────────────────────────────────────
+
+  _openPanel() {
+    this._panelOpen = true;
+    this._chatPanel.classList.add("open");
+    this._chatBadge.classList.remove("visible");
+    this._scrollToBottom();
+  }
+
+  _closePanel() {
+    this._panelOpen = false;
+    this._chatPanel.classList.remove("open");
+  }
+
+  // Coalesce scroll-to-bottom: a burst of cumulative transcript deltas would
+  // otherwise queue one rAF per delta, all writing the same scrollTop.
+  _scrollToBottom() {
+    if (!this._panelOpen || this._scrollQueued) return;
+    this._scrollQueued = true;
+    requestAnimationFrame(() => {
+      this._scrollQueued = false;
+      this._chatHistory.scrollTop = this._chatHistory.scrollHeight;
+    });
+  }
+
+  _markUnread() {
+    if (this._panelOpen) {
+      this._scrollToBottom();
+      return;
+    }
+    this._chatBadge.classList.add("visible");
+  }
+
+  // ── Shared rendering ──────────────────────────────────────────────────────
+
+  /**
+   * Build a role-labelled message element. Ephemeral bubbles and persistent
+   * history rows share the same shape and differ only in their class prefix
+   * (`bubble`/`bubble-*` vs `hist-msg`/`hist-*`).
+   * @param {{ container: string, prefix: string, role: "user"|"assistant", text: string, partial?: boolean }} o
+   * @returns {HTMLElement}
+   */
+  _buildMessageEl({ container, prefix, role, text, partial = false }) {
+    const el = document.createElement("div");
+    el.className = `${container} ${role}`;
+    const label = role === "user" ? "You" : "Assistant";
+    el.innerHTML = `<div class="${prefix}-role">${label}</div><div class="${prefix}-body${partial ? " partial" : ""}">${escHtml(text)}</div>`;
+    return el;
+  }
+
+  // ── Ephemeral bubbles ───────────────────────────────────────────────────
+
+  /** @param {"user"|"assistant"|"tool"} role @param {string} text @returns {HTMLElement} */
+  _spawnBubble(role, text) {
+    let el;
+    if (role === "tool") {
+      el = document.createElement("div");
+      el.className = "bubble tool";
+      el.innerHTML = `<svg class="bubble-tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${WRENCH_PATH}</svg><span class="bubble-tool-text">${escHtml(text)}</span>`;
+    } else {
+      el = this._buildMessageEl({ container: "bubble", prefix: "bubble", role, text });
+    }
+    this._bubbleStack.appendChild(el);
+    // Cap the stack at 8, but never evict the bubble the caller is still
+    // actively updating (the live user bubble) — drop the next-oldest instead.
+    const visible = /** @type {HTMLElement[]} */ ([...this._bubbleStack.querySelectorAll(".bubble:not(.out)")]);
+    if (visible.length > 8) {
+      this._dismissBubble(visible.find((b) => b !== this._activeUserBubble) ?? visible[0]);
+    }
+    requestAnimationFrame(() => el.classList.add("in"));
+    return el;
+  }
+
+  /** @param {HTMLElement} el @param {string} text */
+  _updateBubbleText(el, text) {
+    const t = el.querySelector(".bubble-body");
+    if (t) t.textContent = text;
+  }
+
+  /** @param {HTMLElement} el */
+  _dismissBubble(el) {
+    if (!el || el.classList.contains("out")) return; // idempotent
+    this._bubbleExpiry.delete(el);
+    el.classList.remove("in");
+    el.classList.add("out");
+    const remove = () => el.remove();
+    el.addEventListener("transitionend", remove, { once: true });
+    // Fallback: transitionend never fires if the bubble's visual state didn't
+    // change (dismissed pre-paint) or the tab is backgrounded. The transition
+    // is 0.3s, so force removal a little after.
+    setTimeout(remove, 400);
+  }
+
+  /**
+   * Fade bubbles whose expiry has passed — strictly oldest-first. We walk the
+   * stack top (oldest) to bottom (newest) and stop at the first bubble still
+   * alive: nothing newer may leave while an older bubble is still on screen. A
+   * bubble that keeps updating pushes its own expiry forward, so it (and
+   * everything behind it) stays put until it finally goes quiet.
+   */
+  _reapBubbles() {
+    this._reaperHandle = 0;
+    const now = Date.now();
+    const visible = /** @type {HTMLElement[]} */ ([...this._bubbleStack.querySelectorAll(".bubble:not(.out)")]);
+    let nextWake = Infinity;
+    for (const el of visible) {
+      const exp = this._bubbleExpiry.get(el) ?? now; // no expiry recorded → treat as due
+      if (exp <= now) {
+        this._dismissBubble(el);
+      } else {
+        // Oldest survivor isn't due yet; stop so nothing newer leaves before it.
+        nextWake = exp;
+        break;
+      }
+    }
+    if (nextWake !== Infinity) {
+      this._reaperHandle = setTimeout(() => this._reapBubbles(), Math.max(50, nextWake - Date.now()));
+    }
+  }
+
+  /**
+   * (Re)arm a bubble's auto-dismiss by pushing its expiry out by `delay`.
+   * Calling it again resets the countdown — so a bubble that keeps updating
+   * stays on screen and only fades once it goes quiet. Removal is ordered by the
+   * shared reaper, so the oldest bubble always disappears first.
+   * @param {HTMLElement} el @param {number} [delay]
+   */
+  _bumpDismiss(el, delay = 4000) {
+    this._bubbleExpiry.set(el, Date.now() + delay);
+    if (!this._reaperHandle) this._reaperHandle = setTimeout(() => this._reapBubbles(), delay);
+  }
+
+  // ── History ───────────────────────────────────────────────────────────────
+
+  /** Render the empty-state placeholder into the history panel. */
+  renderEmptyState() {
+    this._chatHistory.innerHTML = EMPTY_STATE_HTML;
+  }
+
+  /** Reset the panel to the empty state and clear the unread badge. */
+  clear() {
+    this.renderEmptyState();
+    this._chatBadge.classList.remove("visible");
+  }
+
+  /** @param {"user"|"assistant"} role @param {string} text @param {boolean} partial @returns {HTMLElement} */
+  _appendHistMsg(role, text, partial) {
+    const empty = this._chatHistory.querySelector(".chat-empty");
+    if (empty) empty.remove();
+    const el = this._buildMessageEl({ container: "hist-msg", prefix: "hist", role, text, partial });
+    this._chatHistory.appendChild(el);
+    this._scrollToBottom();
+    return el;
+  }
+
+  /** @param {HTMLElement | null} el @param {string} text @param {boolean} partial */
+  _updateHistMsg(el, text, partial) {
+    if (!el) return;
+    const body = /** @type {HTMLElement | null} */ (el.querySelector(".hist-body"));
+    if (!body) return;
+    body.textContent = text;
+    body.classList.toggle("partial", partial);
+    this._scrollToBottom();
+  }
+
+  /**
+   * Append a tool-call row to the conversation. We only add it once the tool
+   * has run, so the expandable toggle carries BOTH the call input and its result.
+   * @param {string} name @param {string} argsJson @param {string} output
+   */
+  _appendHistTool(name, argsJson, output) {
+    const empty = this._chatHistory.querySelector(".chat-empty");
+    if (empty) empty.remove();
+    let pretty = argsJson;
+    try { pretty = JSON.stringify(JSON.parse(argsJson), null, 2); } catch {}
+    const el = document.createElement("div");
+    el.className = "hist-msg tool";
+    el.innerHTML = `
+      <div class="hist-role">Tool call</div>
+      <button class="hist-tool-header" aria-expanded="false">
+        <svg class="hist-tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${WRENCH_PATH}</svg>
+        <span class="hist-tool-name">${escHtml(name)}</span>
+        <svg class="hist-tool-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+      </button>
+      <div class="hist-tool-body">
+        <div class="hist-tool-label">Input</div>
+        <div class="hist-tool-block">${escHtml(pretty)}</div>
+        <div class="hist-tool-label">Output</div>
+        <div class="hist-tool-block hist-tool-output">${escHtml(output || "(no output)")}</div>
+      </div>
+    `;
+    const header = /** @type {HTMLButtonElement} */ (el.querySelector(".hist-tool-header"));
+    const body = /** @type {HTMLDivElement} */ (el.querySelector(".hist-tool-body"));
+    header.addEventListener("click", () => {
+      const expanded = header.getAttribute("aria-expanded") === "true";
+      header.setAttribute("aria-expanded", String(!expanded));
+      body.classList.toggle("open", !expanded);
+    });
+    this._chatHistory.appendChild(el);
+    this._scrollToBottom();
+  }
+
+  /** Tag an assistant history row as interrupted (user barged in mid-reply).
+   *  @param {HTMLElement | null} hist */
+  _markHistInterrupted(hist) {
+    if (!hist || hist.querySelector(".hist-note")) return;
+    hist.classList.add("interrupted");
+    const note = document.createElement("div");
+    note.className = "hist-note";
+    note.textContent = "Interrupted";
+    hist.appendChild(note);
+  }
+
+  /** Render a captured webcam frame in the transcript (the camera tool result).
+   *  @param {string} dataUrl */
+  _appendHistImage(dataUrl) {
+    const empty = this._chatHistory.querySelector(".chat-empty");
+    if (empty) empty.remove();
+    const el = document.createElement("div");
+    el.className = "hist-msg tool";
+    el.innerHTML = `<div class="hist-role">Snapshot</div><img class="hist-image" alt="Webcam snapshot sent to the model" />`;
+    const img = /** @type {HTMLImageElement} */ (el.querySelector("img"));
+    img.src = dataUrl;
+    this._chatHistory.appendChild(el);
+    this._scrollToBottom();
+  }
+
+  /**
+   * Reset all streaming bookkeeping for session start / teardown. Pass
+   * `dismiss` to also fade any bubbles still on screen.
+   * @param {{ dismiss?: boolean }} [opts]
+   */
+  reset(opts) {
+    if (opts?.dismiss) {
+      if (this._activeUserBubble) this._dismissBubble(this._activeUserBubble);
+      for (const { bubble } of this._asstByResp.values()) this._dismissBubble(bubble);
+    }
+    this._userHistByItem.clear();
+    this._activeUserBubble = null;
+    this._activeUserItemId = "";
+    this._asstByResp.clear();
+  }
+
+  // ── Client event handlers ─────────────────────────────────────────────────
+
+  /**
+   * A streamed transcript delta (user or assistant).
+   * @param {{ role: "user" | "assistant"; text: string; partial: boolean; itemId?: string; responseId?: string }} d
+   */
+  onTranscript(d) {
+    if (DEBUG) console.debug(`[ui] transcript role=${d.role} partial=${d.partial} item=${d.itemId} resp=${d.responseId} text=${JSON.stringify(d.text)}`);
+
+    if (d.role === "user") {
+      // Group by item_id: a speculative continuation reuses the same id, so it
+      // updates the same row/bubble. A missing id falls back to the active item
+      // (same utterance) or a fresh unique key, never a shared sentinel that
+      // would collapse distinct turns into one row.
+      const id = d.itemId || this._activeUserItemId || `_u${++this._anonSeq}`;
+      const text = d.text;
+
+      let hist = this._userHistByItem.get(id);
+      if (!hist) {
+        hist = this._appendHistMsg("user", text, d.partial);
+        this._userHistByItem.set(id, hist);
+      } else {
+        this._updateHistMsg(hist, text, d.partial);
+      }
+
+      // One ephemeral bubble per active item. Purely timer-based: the timer is
+      // refreshed on every delta, so it stays while the user keeps talking and
+      // fades a few seconds after they stop — no dependency on a response ever
+      // arriving, so it can never get stuck.
+      if (this._activeUserItemId !== id || !this._activeUserBubble) {
+        this._activeUserBubble = this._spawnBubble("user", text);
+        this._activeUserItemId = id;
+      } else {
+        this._updateBubbleText(this._activeUserBubble, text);
+      }
+      this._markUnread();
+    } else if (d.role === "assistant") {
+      // Assistant transcript arrives once, as the full text, keyed by
+      // response_id so a cancelled speculative response can be removed later. A
+      // missing id gets a unique key so two id-less replies never collide.
+      const rid = d.responseId || `_a${++this._anonSeq}`;
+      const entry = this._asstByResp.get(rid);
+      if (!entry) {
+        const bubble = this._spawnBubble("assistant", d.text);
+        this._asstByResp.set(rid, { bubble, hist: this._appendHistMsg("assistant", d.text, false) });
+      } else {
+        this._updateBubbleText(entry.bubble, d.text);
+        this._updateHistMsg(entry.hist, d.text, false);
+      }
+      this._markUnread();
+    }
+  }
+
+  /**
+   * A response closed (completed or cancelled).
+   * @param {{ responseId: string; status: string; audible?: boolean; transcript?: string }} detail
+   */
+  onResponseFinished(detail) {
+    const { responseId, status, audible, transcript } = detail;
+    if (DEBUG) console.debug(`[ui] response-finished resp=${responseId} status=${status} audible=${audible} known=${this._asstByResp.has(responseId)}`);
+    // Without an id we can't target a specific response; the bubble will
+    // auto-dismiss on its own timer regardless.
+    if (!responseId) return;
+    const entry = this._asstByResp.get(responseId);
+
+    if (status === "cancelled") {
+      // Keep every transcript that was received — mark it interrupted rather
+      // than erasing it. If the `*.transcript.done` never fired, build the row
+      // from the text carried in response.done.
+      let hist = entry?.hist ?? null;
+      if (!hist && transcript) {
+        hist = this._appendHistMsg("assistant", transcript, false);
+      } else if (hist && transcript) {
+        this._updateHistMsg(hist, transcript, false);
+      }
+      if (hist) this._markHistInterrupted(hist);
+      this._asstByResp.delete(responseId);
+      return;
+    }
+
+    // Any other terminal close (completed / failed / incomplete / …): just
+    // release the map entry. The bubble already auto-dismisses on its timer and
+    // the history row persists as the conversation log. Crucially we do NOT
+    // touch user state here — that lifecycle is fully independent.
+    this._asstByResp.delete(responseId);
+  }
+
+  /** The model called a tool — show an ephemeral "running" bubble.
+   *  @param {string} name */
+  onToolCall(name) {
+    this._bumpDismiss(this._spawnBubble("tool", name));
+    this._markUnread();
+  }
+
+  /** The tool finished — append its call+result row (and any captured image).
+   *  @param {string} name @param {string} argsJson @param {string} output @param {string} [image] */
+  onToolResult(name, argsJson, output, image) {
+    this._appendHistTool(name, argsJson, output);
+    if (image) this._appendHistImage(image); // show the captured frame below the call
+    this._markUnread();
+  }
+}
diff --git a/public/voice-demo/ui/dom.js b/public/voice-demo/ui/dom.js
new file mode 100644
index 0000000..d5a645a
--- /dev/null
+++ b/public/voice-demo/ui/dom.js
@@ -0,0 +1,37 @@
+// @ts-check
+/** Small shared helpers used across the UI modules: a strict query selector,
+ *  HTML escaping for text we drop into innerHTML, error-string trimming, and
+ *  the opt-in debug flag. */
+
+/** Opt-in tracing: `localStorage.setItem("s2s.debug", "1")` then reload. */
+export const DEBUG = (() => {
+  try {
+    return localStorage.getItem("s2s.debug") === "1";
+  } catch {
+    return false;
+  }
+})();
+
+/**
+ * Query a single element, throwing if it's missing (so a broken selector fails
+ * loudly at startup rather than as a later null-deref).
+ * @template {HTMLElement} T
+ * @param {string} selector
+ * @returns {T}
+ */
+export function $(selector) {
+  const el = document.querySelector(selector);
+  if (!el) throw new Error(`Missing element: ${selector}`);
+  return /** @type {T} */ (el);
+}
+
+/** @param {string} s @returns {string} */
+export function escHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/** Trim a long error message to fit the orb caption. @param {string} text */
+export function truncateError(text) {
+  if (text.length <= 90) return text;
+  return text.slice(0, 87) + "…";
+}
diff --git a/public/voice-demo/worklets/audio-playback.js b/public/voice-demo/worklets/audio-playback.js
new file mode 100644
index 0000000..469b904
--- /dev/null
+++ b/public/voice-demo/worklets/audio-playback.js
@@ -0,0 +1,211 @@
+// @ts-check
+/**
+ * AudioWorkletProcessor that plays back Float32 mono samples received from
+ * the main thread, upsampling whatever incoming rate the server uses
+ * (typically 16 kHz PCM16) to the AudioContext rate (typically 48 kHz).
+ *
+ * Lifecycle / messaging:
+ *
+ *   main -> worklet:
+ *     { kind: "config", inputRate: 16000, muted: false }  one-shot at startup
+ *     { kind: "audio", samples: Float32Array }             per chunk
+ *     { kind: "clear" }                                    wipe queue (barge-in)
+ *
+ *   worklet -> main:
+ *     { kind: "stats", queuedMs, played }                  every ~250 ms
+ *     { kind: "underrun" }                                 every time the queue
+ *                                                          runs dry mid-playback
+ *
+ * `muted` (default false): the Live Avatar (LiveTalking WebRTC) carries the
+ * same audio, so the page mutes its own playback to avoid double audio. When
+ * the avatar is NOT running (e.g. dev on macOS), keep muted=false so the page
+ * plays the backend audio itself.
+ *
+ * IMPORTANT: the read position only advances while audio is actually being
+ * played (`_playing`). Advancing during idle would drift `_readIdx` far past
+ * the next chunk's length and turn every read into NaN (silence) once audio
+ * arrives.
+ */
+
+const STATS_INTERVAL_FRAMES = 12000;
+const FADE_FRAMES = 32;
+
+class AudioPlaybackProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this._inputRate = 16000;
+    this._stepRatio = this._inputRate / sampleRate;
+    this._muted = false;
+    this._queue = [];
+    this._readIdx = 0;
+    this._fracPos = 0;
+    this._playing = false;
+    this._lastSample = 0;
+    this._framesSinceStats = 0;
+    this._totalPlayed = 0;
+    this._dbgReceived = 0;
+    this._dbgOutPeak = 0;
+    this._fadeIn = 0;
+    this._fadeOut = 0;
+
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      if (!data || typeof data !== "object") return;
+      switch (data.kind) {
+        case "config":
+          if (typeof data.inputRate === "number" && data.inputRate > 0) {
+            this._inputRate = data.inputRate;
+            this._stepRatio = this._inputRate / sampleRate;
+          }
+          if (typeof data.muted === "boolean") this._muted = data.muted;
+          break;
+        case "audio": {
+          // Accept Float32Array, a transferred ArrayBuffer, or a plain
+          // {buffer, byteOffset, length} descriptor: cross-realm structured
+          // cloning can deliver the samples in any of these shapes.
+          let arr = data.samples;
+          let f32 = null;
+          if (arr instanceof Float32Array) {
+            f32 = arr;
+          } else if (arr instanceof ArrayBuffer) {
+            f32 = new Float32Array(arr);
+          } else if (arr && typeof arr === "object" && arr.buffer instanceof ArrayBuffer) {
+            f32 = new Float32Array(arr.buffer, arr.byteOffset || 0, (arr.byteLength || arr.buffer.byteLength) >> 2);
+          }
+          if (f32 && f32.length > 0) {
+            this._queue.push(f32);
+            this._dbgReceived += 1;
+            if (!this._playing) {
+              this._playing = true;
+              this._fadeIn = FADE_FRAMES;
+              this._fadeOut = 0;
+            }
+          }
+          break;
+        }
+        case "clear":
+          this._queue.length = 0;
+          this._readIdx = 0;
+          this._fracPos = 0;
+          this._playing = false;
+          this._lastSample = 0;
+          this._fadeOut = FADE_FRAMES;
+          break;
+      }
+    };
+  }
+
+  _queuedSamples() {
+    let total = -this._readIdx;
+    for (const buf of this._queue) total += buf.length;
+    return Math.max(0, total);
+  }
+
+  /** Linear-interp read at the current fractional position. */
+  _readInterpolated() {
+    if (this._queue.length === 0) return null;
+    const head = this._queue[0];
+    const idx = this._readIdx;
+    const frac = this._fracPos;
+
+    let a = head[idx];
+    let b;
+    if (idx + 1 < head.length) {
+      b = head[idx + 1];
+    } else if (this._queue.length > 1) {
+      b = this._queue[1][0];
+    } else {
+      b = a;
+    }
+    return a + (b - a) * frac;
+  }
+
+  /** Advance the read position by `stepRatio`; pop consumed buffers. */
+  _advance() {
+    this._fracPos += this._stepRatio;
+    while (this._fracPos >= 1) {
+      this._fracPos -= 1;
+      this._readIdx += 1;
+    }
+    while (this._queue.length > 0 && this._readIdx >= this._queue[0].length) {
+      this._readIdx -= this._queue[0].length;
+      this._queue.shift();
+    }
+  }
+
+  process(_, outputs) {
+    const channels = outputs[0];
+    if (!channels || channels.length === 0) return true;
+    const out = channels[0];
+    const stereo = channels.length > 1 ? channels[1] : null;
+
+    // Muted mode (Live Avatar WebRTC carries the audio): output silence.
+    if (this._muted) {
+      for (let i = 0; i < out.length; i++) {
+        out[i] = 0;
+        if (stereo) stereo[i] = 0;
+      }
+      this._framesSinceStats += out.length;
+      return true;
+    }
+
+    for (let i = 0; i < out.length; i++) {
+      let sample = 0;
+
+      if (this._playing) {
+        const v = this._readInterpolated();
+        if (v === null) {
+          // Underrun: ramp out cleanly to avoid clicks.
+          sample = this._lastSample * Math.max(0, 1 - 1 / FADE_FRAMES);
+          this._lastSample = sample;
+          if (Math.abs(sample) < 1e-4) {
+            this._playing = false;
+            this._lastSample = 0;
+            this.port.postMessage({ kind: "underrun" });
+          }
+        } else {
+          sample = v;
+          this._lastSample = v;
+          this._advance();
+        }
+
+        if (this._fadeIn > 0) {
+          const gain = 1 - this._fadeIn / FADE_FRAMES;
+          sample *= gain;
+          this._fadeIn -= 1;
+        }
+        if (this._fadeOut > 0) {
+          const gain = this._fadeOut / FADE_FRAMES;
+          sample *= gain;
+          this._fadeOut -= 1;
+          if (this._fadeOut === 0) {
+            this._playing = false;
+            this._lastSample = 0;
+          }
+        }
+
+        this._totalPlayed += 1;
+        const abs = sample < 0 ? -sample : sample;
+        if (abs > this._dbgOutPeak) this._dbgOutPeak = abs;
+      }
+
+      out[i] = sample;
+      if (stereo) stereo[i] = sample;
+    }
+
+    this._framesSinceStats += out.length;
+    if (this._framesSinceStats >= STATS_INTERVAL_FRAMES) {
+      this.port.postMessage({
+        kind: "stats",
+        queuedMs: Math.round((this._queuedSamples() / this._inputRate) * 1000),
+        played: this._totalPlayed,
+        received: this._dbgReceived,
+        outPeak: this._dbgOutPeak,
+      });
+      this._framesSinceStats = 0;
+    }
+    return true;
+  }
+}
+
+registerProcessor("audio-playback", AudioPlaybackProcessor);
diff --git a/public/voice-demo/worklets/mic-capture.js b/public/voice-demo/worklets/mic-capture.js
new file mode 100644
index 0000000..a48860b
--- /dev/null
+++ b/public/voice-demo/worklets/mic-capture.js
@@ -0,0 +1,159 @@
+// @ts-check
+/**
+ * AudioWorkletProcessor that resamples the AudioContext rate (typically 48 kHz)
+ * down to 16 kHz, packs the result as little-endian Int16 PCM, and posts it
+ * back to the main thread in fixed-size chunks.
+ *
+ * The Hugging Face speech-to-speech WebSocket route expects the
+ * `input_audio_buffer.append` payload at 16 kHz PCM16 mono.
+ *
+ * Design notes:
+ *   - 48 -> 16 is an exact 3:1 ratio so we use a 3-tap boxcar average as a
+ *     cheap low-pass before decimating. Good enough for voice STT; we lose
+ *     a tiny bit of >8 kHz content which the pipeline discards anyway.
+ *   - Output frames are emitted at the cadence dictated by `chunkMs`
+ *     (default 40 ms = 640 samples = 1280 bytes). The OpenAI Realtime
+ *     server batches incoming audio so the cadence is flexible; 20-100 ms
+ *     is the sweet spot.
+ *   - Float -> Int16 saturates to [-1, 1] before scaling.
+ *   - Optional noise gate: per-chunk RMS decides open/closed against a
+ *     threshold; the gain ramps (fast attack, hold, slow release) so word
+ *     onsets aren't clipped and quiet tails don't click. The gate only
+ *     affects the audio we SEND; the main-thread visualiser taps the raw
+ *     mic separately. We post the chunk RMS up every frame so the Settings
+ *     mic meter can show the live level against the threshold.
+ */
+
+const TARGET_RATE = 16000;
+const DEFAULT_CHUNK_MS = 40;
+// Gate envelope timing (fixed; only the threshold is user-tunable).
+const GATE_ATTACK_MS = 5; // open almost instantly so word onsets survive
+const GATE_HOLD_MS = 250; // stay open this long after the level drops back under
+const GATE_RELEASE_MS = 80; // then fade closed over this long (no click)
+
+class MicCaptureProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    const chunkMs = options?.processorOptions?.chunkMs ?? DEFAULT_CHUNK_MS;
+    this._inputRate = sampleRate;
+    this._ratio = this._inputRate / TARGET_RATE;
+    this._chunkSamples16k = Math.round((TARGET_RATE * chunkMs) / 1000);
+    this._scratch = new Float32Array(0);
+    this._decimated = new Float32Array(this._chunkSamples16k);
+    this._enabled = true;
+
+    // Noise gate state. Disabled by default (pure passthrough).
+    this._gateEnabled = false;
+    this._thresholdLin = 0; // linear amplitude; signal RMS must exceed this to open
+    this._gateGain = 1; // smoothed gain currently applied
+    this._holdRemaining = 0; // samples left before the gate may start closing
+    this._attackCoef = Math.exp(-1 / ((GATE_ATTACK_MS / 1000) * TARGET_RATE));
+    this._releaseCoef = Math.exp(-1 / ((GATE_RELEASE_MS / 1000) * TARGET_RATE));
+    this._holdSamples = Math.round((GATE_HOLD_MS / 1000) * TARGET_RATE);
+
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      if (data?.kind === "enable") this._enabled = !!data.value;
+      else if (data?.kind === "gate") {
+        this._gateEnabled = !!data.enabled;
+        // dB -> linear amplitude. When off, threshold 0 keeps the gate open.
+        this._thresholdLin = data.enabled ? Math.pow(10, data.thresholdDb / 20) : 0;
+      }
+    };
+  }
+
+  /**
+   * Append `incoming` to the internal scratch buffer, then emit as many
+   * full output chunks as we have material for.
+   * @param {Float32Array} incoming
+   */
+  _ingest(incoming) {
+    if (incoming.length === 0) return;
+    const next = new Float32Array(this._scratch.length + incoming.length);
+    next.set(this._scratch, 0);
+    next.set(incoming, this._scratch.length);
+    this._scratch = next;
+    this._maybeEmit();
+  }
+
+  _maybeEmit() {
+    const r = this._ratio;
+    const n = this._chunkSamples16k;
+    const needIn = Math.ceil(n * r);
+    const dec = this._decimated;
+    while (this._scratch.length >= needIn) {
+      // 1. Decimate to 16 kHz floats and accumulate energy for the gate/meter.
+      let sumSq = 0;
+      if (Math.abs(r - 3) < 1e-6) {
+        // 48 kHz -> 16 kHz fast path with boxcar lowpass.
+        for (let i = 0; i < n; i++) {
+          const idx = i * 3;
+          const s = (this._scratch[idx] + this._scratch[idx + 1] + this._scratch[idx + 2]) / 3;
+          dec[i] = s;
+          sumSq += s * s;
+        }
+      } else {
+        // Generic path: linear interpolation. Slower but works at any rate
+        // (e.g. some Windows boxes report sampleRate=44100).
+        for (let i = 0; i < n; i++) {
+          const srcPos = i * r;
+          const idx = Math.floor(srcPos);
+          const frac = srcPos - idx;
+          const a = this._scratch[idx];
+          const b = this._scratch[idx + 1] ?? a;
+          const s = a + (b - a) * frac;
+          dec[i] = s;
+          sumSq += s * s;
+        }
+      }
+      const rms = Math.sqrt(sumSq / n);
+
+      // 2. Decide the gate target for this chunk, then ramp sample-by-sample.
+      let target = 1;
+      if (this._gateEnabled) {
+        if (rms >= this._thresholdLin) {
+          this._holdRemaining = this._holdSamples; // re-arm the hold
+        } else if (this._holdRemaining > 0) {
+          this._holdRemaining -= n; // coasting through the hold window
+        } else {
+          target = 0;
+        }
+      }
+
+      // 3. Apply the (smoothed) gain and pack to Int16.
+      const out = new Int16Array(n);
+      let gain = this._gateGain;
+      for (let i = 0; i < n; i++) {
+        const coef = target > gain ? this._attackCoef : this._releaseCoef;
+        gain = target + (gain - target) * coef;
+        const s = dec[i] * gain;
+        const clamped = s < -1 ? -1 : s > 1 ? 1 : s;
+        out[i] = clamped < 0 ? clamped * 0x8000 : clamped * 0x7fff;
+      }
+      this._gateGain = gain;
+
+      // Shift the scratch buffer to keep only the trailing unused samples.
+      const consumed = Math.floor(n * r);
+      this._scratch = this._scratch.slice(consumed);
+
+      // Live input level for the Settings meter (raw RMS, pre-gate).
+      this.port.postMessage({ kind: "level", rms });
+
+      if (this._enabled) {
+        this.port.postMessage(out.buffer, [out.buffer]);
+      }
+      // When disabled (mic muted) we silently consume input so the worklet
+      // stays alive and the buffer never grows unbounded.
+    }
+  }
+
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || input.length === 0 || !input[0]) return true;
+    const mono = input[0];
+    if (mono.length > 0) this._ingest(mono);
+    return true;
+  }
+}
+
+registerProcessor("mic-capture", MicCaptureProcessor);
diff --git a/public/voice-demo/ws/codec.js b/public/voice-demo/ws/codec.js
new file mode 100644
index 0000000..511ad9e
--- /dev/null
+++ b/public/voice-demo/ws/codec.js
@@ -0,0 +1,57 @@
+// @ts-check
+/**
+ * Pure, stateless helpers for the WebSocket realtime client: base64 <-> PCM
+ * conversion for the audio frames on the wire, transcript extraction from a
+ * `response.done` payload, and a tiny URL helper. Kept separate from the client
+ * so the protocol/state logic stays readable.
+ */
+
+/** @param {string} url */
+export function trimTrailingSlash(url) {
+  return url.endsWith("/") ? url.slice(0, -1) : url;
+}
+
+/**
+ * Pull the assistant transcript out of a `response.done` payload. The text
+ * lives in `response.output[].content[].transcript` (audio) or `.text`. Used as
+ * the source of truth for interrupted replies, where the dedicated
+ * `*.transcript.done` event may never arrive.
+ * @param {any} response
+ * @returns {string}
+ */
+export function extractResponseTranscript(response) {
+  const output = response?.output;
+  if (!Array.isArray(output)) return "";
+  /** @type {string[]} */
+  const parts = [];
+  for (const item of output) {
+    for (const part of item?.content ?? []) {
+      const text = part?.transcript ?? part?.text;
+      if (typeof text === "string" && text.trim()) parts.push(text.trim());
+    }
+  }
+  return parts.join(" ").trim();
+}
+
+/** @param {ArrayBuffer} buf */
+export function base64FromArrayBuffer(buf) {
+  const bytes = new Uint8Array(buf);
+  // Chunked encoding so we don't blow up the call stack on long buffers.
+  let binary = "";
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode.apply(null, /** @type {number[]} */ (
+      /** @type {unknown} */ (bytes.subarray(i, i + chunk))
+    ));
+  }
+  return btoa(binary);
+}
+
+/** @param {string} b64 */
+export function base64ToBytes(b64) {
+  const binary = atob(b64);
+  const len = binary.length;
+  const out = new Uint8Array(len);
+  for (let i = 0; i < len; i++) out[i] = binary.charCodeAt(i);
+  return out;
+}
diff --git a/public/voice-demo/ws/orb-visualizer.js b/public/voice-demo/ws/orb-visualizer.js
new file mode 100644
index 0000000..082f601
--- /dev/null
+++ b/public/voice-demo/ws/orb-visualizer.js
@@ -0,0 +1,98 @@
+// @ts-check
+/**
+ * Orb spectrum visualiser. Each animation frame it reads two AnalyserNodes (the
+ * mic input and the TTS output) and maps the low-frequency speech energy onto
+ * the orb's CSS custom properties:
+ *   - `--bar0`..`--bar4`   the 5-band level meter
+ *   - `--ai-audio-level`   the global "Reachy talks" glow / scale pulse
+ *
+ * The bottom of the FFT is where speech energy lives, so the band edges stay
+ * low — that keeps the bars dancing on voice rather than on noise. While the AI
+ * is speaking we source the bars from the OUTPUT analyser so the orb pulses with
+ * Reachy's voice instead of sitting dead while the user is silent.
+ */
+
+// Exported so the client can size its AnalyserNodes to match our buffer.
+export const VIS_FFT_SIZE = 256;
+const VIS_BAND_COUNT = 5;
+const VIS_BAND_EDGES = [2, 5, 9, 16, 28, 52];
+const VIS_ATTACK = 0.6; // weight for new sample on upswing (snappy)
+const VIS_RELEASE = 0.18; // weight for new sample on decay (gentle fade)
+
+export class OrbVisualiser {
+  /**
+   * @param {AnalyserNode} micAnalyser
+   * @param {AnalyserNode} outAnalyser
+   * @param {() => boolean} isAiSpeaking Source the bars from the AI output when
+   *   true, otherwise from the mic.
+   */
+  constructor(micAnalyser, outAnalyser, isAiSpeaking) {
+    this._mic = micAnalyser;
+    this._out = outAnalyser;
+    this._isAiSpeaking = isAiSpeaking;
+    this._buf = new Uint8Array(micAnalyser.frequencyBinCount);
+    this._bands = new Float32Array(VIS_BAND_COUNT);
+    this._aiLevel = 0;
+    /** @type {number | null} */
+    this._frame = null;
+  }
+
+  /** Begin the rAF loop (idempotent). */
+  start() {
+    if (this._frame !== null) return;
+    const root = document.documentElement;
+    const tick = () => {
+      this._frame = requestAnimationFrame(tick);
+      this._update(root);
+    };
+    this._frame = requestAnimationFrame(tick);
+  }
+
+  /** Stop the loop and clear the CSS vars so the orb returns to rest. */
+  stop() {
+    if (this._frame !== null) {
+      cancelAnimationFrame(this._frame);
+      this._frame = null;
+    }
+    const root = document.documentElement;
+    for (let i = 0; i < VIS_BAND_COUNT; i++) root.style.removeProperty(`--bar${i}`);
+    root.style.removeProperty("--ai-audio-level");
+  }
+
+  /** @param {HTMLElement} root */
+  _update(root) {
+    // Mic bars: split FFT into 5 log-ish bands, smooth, write CSS vars.
+    const source = this._isAiSpeaking() ? this._out : this._mic;
+    source.getByteFrequencyData(this._buf);
+
+    for (let b = 0; b < VIS_BAND_COUNT; b++) {
+      const lo = VIS_BAND_EDGES[b];
+      const hi = VIS_BAND_EDGES[b + 1];
+      let sum = 0;
+      let n = 0;
+      for (let i = lo; i < hi && i < this._buf.length; i++) {
+        sum += this._buf[i];
+        n += 1;
+      }
+      const target = n > 0 ? sum / (n * 255) : 0;
+      const prev = this._bands[b];
+      const k = target > prev ? VIS_ATTACK : VIS_RELEASE;
+      const next = prev + (target - prev) * k;
+      this._bands[b] = next;
+      root.style.setProperty(`--bar${b}`, next.toFixed(3));
+    }
+
+    // Global AI audio level: peak of the output analyser, used by the CSS to
+    // make the orb's glow / scale react to Reachy's voice.
+    this._out.getByteFrequencyData(this._buf);
+    let peak = 0;
+    const limit = Math.min(this._buf.length, VIS_BAND_EDGES[VIS_BAND_COUNT]);
+    for (let i = 0; i < limit; i++) {
+      if (this._buf[i] > peak) peak = this._buf[i];
+    }
+    const aiTarget = peak / 255;
+    const k = aiTarget > this._aiLevel ? VIS_ATTACK : VIS_RELEASE;
+    this._aiLevel = this._aiLevel + (aiTarget - this._aiLevel) * k;
+    root.style.setProperty("--ai-audio-level", this._aiLevel.toFixed(3));
+  }
+}
diff --git a/public/voice-demo/ws/s2s-ws-client.js b/public/voice-demo/ws/s2s-ws-client.js
new file mode 100644
index 0000000..1843c72
--- /dev/null
+++ b/public/voice-demo/ws/s2s-ws-client.js
@@ -0,0 +1,1176 @@
+// @ts-check
+/**
+ * Minimal WebSocket client for the Hugging Face speech-to-speech load balancer.
+ *
+ * Two-step handshake (same /session route as the WebRTC client):
+ *
+ *   1. POST `<lb_url>/session` -> JSON `{ connect_url: wss://<compute>/v1/realtime?session_token=<JWT>, ... }`
+ *   2. Open a WebSocket directly on `connect_url` (no rewrite, unlike the WebRTC client).
+ *
+ * Once the socket is open we follow the OpenAI Realtime GA WebSocket
+ * protocol:
+ *
+ *   - Server pushes `session.created` immediately after upgrade.
+ *   - We send `session.update` (GA schema: `session.audio.{input,output}`,
+ *     `session.output_modalities`, ...).
+ *   - We stream mic audio as PCM16 16 kHz mono base64 chunks via
+ *     `input_audio_buffer.append`.
+ *   - The server pushes `response.output_audio.delta` (PCM16 24 kHz mono
+ *     base64) and transcript deltas.
+ *
+ * Audio is handled internally via two AudioWorklet processors so the
+ * client owns the full mic-in / speaker-out pipeline. The main app only
+ * sees high-level lifecycle events (`status`, `transcript`, `error`,
+ * `session`), the same shape as the WebRTC client.
+ *
+ * @typedef {"idle" | "creating-session" | "queued" | "your-turn" | "connecting" |
+ *           "connected" | "user-speaking" | "processing" | "ai-speaking" |
+ *           "closed" | "error"
+ * } WsStatus
+ *
+ * @typedef {Object} WsSessionInfo
+ * @property {string} sessionId
+ * @property {string} connectUrl
+ * @property {string} websocketUrl
+ * @property {string} sessionToken
+ * @property {number} pendingTimeoutS
+ * @property {string} [tier] Login tier from the session proxy ("anon"|"free"|"pro").
+ * @property {boolean} [limited] Whether this session is metered (heartbeat needed).
+ * @property {number} [heartbeatSec] Suggested heartbeat cadence in seconds.
+ * @property {number} [remainingSec] Daily budget left after this grant (display).
+ *
+ * @typedef {Object} WsClientOptions
+ * @property {string} [sessionUrl] URL to POST for the session handshake (returns
+ *   `{ connect_url, ... }`). Usually a same-origin proxy like `api/session` so the
+ *   load-balancer address stays server-side. Provide this OR `directUrl`.
+ * @property {string} [loadBalancerUrl] Load-balancer base URL. Legacy/direct
+ *   alternative to `sessionUrl`: the client POSTs `<lb>/session` itself. Prefer
+ *   `sessionUrl` so the LB address isn't exposed to the browser.
+ * @property {string} [directUrl] Full WebSocket URL of an s2s realtime endpoint
+ *   (e.g. `ws://localhost:8080/v1/realtime`). When set, the client skips the
+ *   session POST and dials it directly — no load balancer in between.
+ * @property {string} voice
+ * @property {string} instructions
+ * @property {MediaStream} [micStream] Live mic stream. Provide this OR `acquireMic`.
+ * @property {() => Promise<MediaStream>} [acquireMic] Lazily obtain the mic stream,
+ *   called only once a session is actually granted (after any queue wait). Lets the
+ *   caller prime mic permission up front but not hold the mic 'in use' indicator on
+ *   while waiting in line. Ignored if `micStream` is already set.
+ * @property {AudioContext} [audioContext] Pre-created (and resumed) context.
+ *   iOS Safari only lets an AudioContext start from within a user gesture, so
+ *   the caller creates/resumes it synchronously on the orb tap and hands it
+ *   here; otherwise it stays suspended (silent) after the mic/session awaits.
+ * @property {ToolDef[]} [tools] Function tools declared to the backend in the
+ *   initial `session.update`. The model decides when to call them; the caller
+ *   executes and replies via `sendToolOutput` + `requestResponse`.
+ * @property {NoiseGate} [noiseGate] Client-side noise gate applied to the mic
+ *   before it's sent. Tunable live via `setNoiseGate`.
+ *
+ * @typedef {Object} NoiseGate
+ * @property {boolean} enabled
+ * @property {number} thresholdDb Open threshold in dBFS (e.g. -45).
+ *
+ * @typedef {Object} ToolDef
+ * @property {"function"} type
+ * @property {string} name
+ * @property {string} description
+ * @property {object} parameters JSON Schema for the call arguments.
+ *
+ * @typedef {Object} TranscriptEvent
+ * @property {"user" | "assistant"} role
+ * @property {string} text
+ * @property {boolean} partial
+ */
+
+import {
+  base64FromArrayBuffer,
+  base64ToBytes,
+  extractResponseTranscript,
+  trimTrailingSlash,
+} from "./codec.js";
+import { OrbVisualiser, VIS_FFT_SIZE } from "./orb-visualizer.js";
+
+/** Build an Error carrying a `code` (and optional extra fields) so callers can
+ *  branch on the failure kind: "limit" | "queue-full" | "queue-expired" | "aborted".
+ *  @param {string} message @param {string} code @param {object} [extra] */
+function _codedError(message, code, extra) {
+  const err = /** @type {Error & { code?: string }} */ (new Error(message));
+  err.code = code;
+  if (extra) Object.assign(err, extra);
+  return err;
+}
+
+// The s2s pipeline runs internally at 16 kHz mono PCM. The WebRTC transport
+// resamples to 48 kHz for Opus, but the WebSocket transport emits the
+// native pipeline rate. We don't (can't) override it via `audio.output.format`
+// because the server's pydantic validator rejects the whole `session.update`
+// as soon as a sub-field shape it doesn't know about appears.
+const OUTPUT_SAMPLE_RATE = 16000;
+const MIC_CHUNK_MS = 40;
+
+export class S2sWsRealtimeClient extends EventTarget {
+  /** @param {WsClientOptions} options */
+  constructor(options) {
+    super();
+    /** @type {WsClientOptions} */
+    this.options = options;
+    /** Audio debug counters (see getAudioDebug). */
+    this._dbgDeltas = 0;
+    this._dbgBytes = 0;
+    this._dbgPlayed = 0;
+    /** @type {ToolDef[]} Function tools declared to the backend. */
+    this._tools = options.tools ?? [];
+    /** @type {string} Direct realtime WS URL (set => skip the LB session POST). */
+    this._directUrl = options.directUrl ?? "";
+    /** @type {string} Where to POST for the session handshake. Prefer the
+     *  explicit `sessionUrl`; fall back to `<loadBalancerUrl>/session` for callers
+     *  that still pass the LB address directly. */
+    this._sessionUrl = options.sessionUrl
+      ? options.sessionUrl
+      : options.loadBalancerUrl
+        ? `${trimTrailingSlash(options.loadBalancerUrl)}/session`
+        : "";
+    /** @type {(() => Promise<MediaStream>) | null} Lazy mic acquisition (post-grant). */
+    this._acquireMic = options.acquireMic ?? null;
+    /** @type {boolean} Set by close() to abort a queue wait in progress. */
+    this._closed = false;
+    /** @type {string} The active queue ticket id while waiting (else ""). */
+    this._queueId = "";
+    /** @type {(() => void) | null} Wakes the queue poll sleep early on close(). */
+    this._queueWake = null;
+    /** @type {ReturnType<typeof setTimeout> | 0} */
+    this._queueTimer = 0;
+    // Join gate: after waiting in line the caller must explicitly `join()` before
+    // we dial, so a slot isn't spent on someone who walked away. Resolved by
+    // join(), rejected on timeout (the LB reclaims the slot) or close().
+    /** @type {(() => void) | null} */
+    this._joinResolve = null;
+    /** @type {((err: Error) => void) | null} */
+    this._joinReject = null;
+    /** @type {ReturnType<typeof setTimeout> | 0} */
+    this._joinTimer = 0;
+    /** @type {NoiseGate} Mic noise gate; off by default. */
+    this._noiseGate = options.noiseGate ?? { enabled: false, thresholdDb: -45 };
+    /** @type {WebSocket | null} */
+    this._ws = null;
+    /** @type {AudioContext | null} */
+    this._ctx = null;
+    /** @type {MediaStreamAudioSourceNode | null} */
+    this._micSrc = null;
+    /** @type {AudioWorkletNode | null} */
+    this._captureNode = null;
+    /** @type {AudioWorkletNode | null} */
+    this._playbackNode = null;
+    /** @type {GainNode | null} */
+    this._captureSink = null;
+    /** @type {AnalyserNode | null} */
+    this._micAnalyser = null;
+    /** @type {AnalyserNode | null} */
+    this._outAnalyser = null;
+    /** @type {OrbVisualiser | null} */
+    this._visualiser = null;
+    /** @type {WsStatus} */
+    this._status = "idle";
+    this._aiSpeaking = false;
+    /** @type {Set<string>} response_ids that have actually played audio, so the
+     * UI can tell a barge-in cut (keep it) from a never-heard speculative
+     * response (drop it). */
+    this._audibleResponses = new Set();
+    /** @type {Map<string, string>} The CURRENT assistant transcript segment per
+     * response, accumulated from streamed deltas (reset on each segment's done). */
+    this._asstTranscriptByResp = new Map();
+    /** @type {Map<string, string>} Completed assistant transcript segments per
+     * response, space-joined. A single response can emit several
+     * `*.transcript.done` events; we concatenate them until response.done. */
+    this._asstFullByResp = new Map();
+    this._muted = false;
+    // ── Response lock ────────────────────────────────────────────────────
+    // The backend allows only ONE response in flight: creating a second while
+    // one is active fails with `conversation_already_has_active_response`. So
+    // we serialize response.create. `_openResponses` counts responses the
+    // server has confirmed (response.created) but not yet finished
+    // (response.done) — it's cumulative, so every create maps to one done.
+    // `_createInFlight` covers the window after we send a create but before its
+    // response.created echo. Any requestResponse() made while locked is queued
+    // and replayed, one at a time, as each response.done frees the slot.
+    this._openResponses = 0;
+    this._createInFlight = false;
+    /** @type {{ image?: string }[]} Pending response.create payloads, one per
+     * queued requestResponse(). A payload may carry an image to send just
+     * before its create (so the frame travels with the create, not eagerly). */
+    this._createQueue = [];
+    /** @type {Promise<void> | null} */
+    this._readyPromise = null;
+    this._sessionConfigured = false;
+    this._debug = (() => { try { return localStorage.getItem("s2s.debug") === "1"; } catch { return false; } })();
+  }
+
+  get status() {
+    return this._status;
+  }
+
+  /** @param {WsStatus} status */
+  _setStatus(status) {
+    if (this._status === status) return;
+    this._status = status;
+    this.dispatchEvent(new CustomEvent("status", { detail: { status } }));
+  }
+
+  /** Full assistant transcript so far for a response: the completed segments
+   *  plus the in-progress one, all space-joined.
+   *  @param {string} rid @returns {string} */
+  _asstDisplay(rid) {
+    const full = this._asstFullByResp.get(rid) || "";
+    const seg = this._asstTranscriptByResp.get(rid) || "";
+    if (!seg) return full;
+    return full ? `${full} ${seg}` : seg;
+  }
+
+  _markAudible() {
+    if (this._status === "ai-speaking") return;
+    if (this._status === "closed" || this._status === "error") return;
+    this._setStatus("ai-speaking");
+  }
+
+  /**
+   * Full handshake. Resolves once the WS is open AND the audio pipeline is
+   * ready to send/receive samples.
+   * @returns {Promise<void>}
+   */
+  async connect() {
+    if (this._ws) throw new Error("Already connected");
+
+    let connectUrl;
+    if (this._directUrl) {
+      // Direct mode: no load balancer, no /session POST — dial the realtime
+      // endpoint straight away (e.g. a local s2s server).
+      connectUrl = this._directUrl;
+      this._setStatus("connecting");
+    } else {
+      if (!this._sessionUrl) {
+        throw new Error("No session endpoint or direct URL configured");
+      }
+      this._setStatus("creating-session");
+      const { grant, waited } = await this._createSessionOrQueue();
+      if (this._closed) throw _codedError("connect aborted", "aborted");
+      // If we waited in line, don't dial until the user explicitly joins — this
+      // keeps a freed slot from being spent on someone who stepped away, and the
+      // click is a fresh gesture (re-arms the AudioContext on iOS).
+      if (waited) {
+        await this._awaitJoin(grant);
+        if (this._closed) throw _codedError("connect aborted", "aborted");
+      }
+      this.dispatchEvent(new CustomEvent("session", { detail: { info: grant } }));
+      connectUrl = grant.connectUrl;
+      this._setStatus("connecting");
+    }
+
+    // Acquire the mic now — only once a slot is actually ours. The caller primed
+    // permission up front, so this is silent and the 'in use' indicator lights
+    // only for a real, connecting session (never during a queue wait).
+    if (!this.options.micStream && this._acquireMic) {
+      this.options.micStream = await this._acquireMic();
+    }
+
+    // Spin up the AudioContext + worklets in parallel with the WS dial.
+    const audioReady = this._setupAudio();
+    const wsReady = this._openWebSocket(connectUrl);
+    await Promise.all([audioReady, wsReady]);
+  }
+
+  /**
+   * POST the session handshake; if the pool is busy, wait in the queue (polling
+   * position) until a slot is claimed. Resolves to a grant plus whether we had to
+   * wait (which decides if an explicit join is required before dialing).
+   * @returns {Promise<{ grant: WsSessionInfo, waited: boolean }>}
+   */
+  async _createSessionOrQueue() {
+    const first = await this._postSession();
+    if (first.state === "queued") {
+      this._setStatus("queued");
+      const grant = await this._pollQueue(first);
+      return { grant, waited: true };
+    }
+    return { grant: first.grant, waited: false };
+  }
+
+  /**
+   * Hold at the front of the line until the user clicks join (resolves the gate)
+   * or the grant lapses. Announces "your-turn" + a deadline the UI counts down.
+   * @param {WsSessionInfo} grant
+   * @returns {Promise<void>}
+   */
+  _awaitJoin(grant) {
+    // The LB reclaims an unclaimed slot at its pending timeout; expire the gate a
+    // touch earlier so we never dial a session the LB just reaped.
+    const windowS = Math.max(3, (grant.pendingTimeoutS || 60) - 3);
+    this._setStatus("your-turn");
+    this.dispatchEvent(
+      new CustomEvent("ready-to-join", { detail: { info: grant, expiresSec: windowS } }),
+    );
+    return new Promise((resolve, reject) => {
+      this._joinResolve = resolve;
+      this._joinReject = reject;
+      this._joinTimer = setTimeout(() => {
+        this._joinResolve = null;
+        this._joinReject = null;
+        reject(_codedError("Your spot expired", "join-expired"));
+      }, windowS * 1000);
+    });
+  }
+
+  /** Accept the held slot and let connect() proceed to dial. Called from the
+   *  "Join now" click, so it's a user gesture: re-resume the AudioContext, which
+   *  iOS may have suspended while we waited. */
+  join() {
+    if (this._joinTimer) {
+      clearTimeout(this._joinTimer);
+      this._joinTimer = 0;
+    }
+    try {
+      void this.options.audioContext?.resume();
+    } catch {
+      // best-effort; _setupAudio resumes again
+    }
+    const resolve = this._joinResolve;
+    this._joinResolve = null;
+    this._joinReject = null;
+    resolve?.();
+  }
+
+  /**
+   * POST /session once. Returns either a granted session or a queue ticket.
+   * @returns {Promise<{ state: "granted", grant: WsSessionInfo } | { state: "queued", queueId: string, position: number, pollIntervalS: number }>}
+   */
+  async _postSession() {
+    const url = this._sessionUrl;
+    console.log("[ws] POST", url);
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (response.status === 402) {
+      // The session proxy refused: today's per-tier time budget is spent. Surface
+      // it as a typed error so the UI shows the limit modal, not a crash.
+      const body = await response.json().catch(() => ({}));
+      throw _codedError("Daily conversation limit reached", "limit", { tier: body?.tier });
+    }
+    if (response.status === 503) {
+      const body = await response.json().catch(() => ({}));
+      if (body?.state === "at_capacity") {
+        throw _codedError("The queue is full — try again shortly.", "queue-full");
+      }
+      throw new Error("/session failed (503)");
+    }
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`/session failed (${response.status}): ${text}`);
+    }
+    const json = await response.json();
+    if (json.state === "queued") {
+      return {
+        state: "queued",
+        queueId: json.queue_id,
+        position: json.position,
+        pollIntervalS: json.poll_interval_s,
+      };
+    }
+    return { state: "granted", grant: this._parseGrant(json) };
+  }
+
+  /**
+   * Poll the waiting queue until this ticket claims a slot. Emits `queue` events
+   * ({ position }) as the line advances. Throws on limit (402), expiry (404), or
+   * close(). Transient network/5xx blips are ignored and retried next tick.
+   * @param {{ queueId: string, position: number, pollIntervalS: number }} ticket
+   * @returns {Promise<WsSessionInfo>}
+   */
+  async _pollQueue(ticket) {
+    const intervalMs = Math.max(1, ticket.pollIntervalS || 2) * 1000;
+    this._queueId = ticket.queueId;
+    this._emitQueue(ticket.position);
+
+    while (true) {
+      await this._queueSleep(intervalMs);
+      if (this._closed) throw _codedError("queue wait aborted", "aborted");
+
+      let response;
+      try {
+        response = await fetch(`api/queue/${encodeURIComponent(this._queueId)}`, {
+          headers: { "Content-Type": "application/json" },
+        });
+      } catch {
+        continue; // network blip — keep our place, retry next tick
+      }
+
+      if (response.status === 402) {
+        const body = await response.json().catch(() => ({}));
+        throw _codedError("Daily conversation limit reached", "limit", { tier: body?.tier });
+      }
+      if (response.status === 404) {
+        throw _codedError("Queue timed out", "queue-expired");
+      }
+      if (!response.ok) continue; // 502/503 — transient, retry
+
+      const json = await response.json().catch(() => null);
+      if (!json) continue;
+      if (json.state === "queued") {
+        this._emitQueue(json.position);
+        continue;
+      }
+      // Reached the front and claimed a slot.
+      this._queueId = "";
+      return this._parseGrant(json);
+    }
+  }
+
+  /** @param {number} position */
+  _emitQueue(position) {
+    this.dispatchEvent(
+      new CustomEvent("queue", { detail: { position, queueId: this._queueId } }),
+    );
+  }
+
+  /** A sleep that close() can cut short so a queued client tears down promptly.
+   *  @param {number} ms */
+  _queueSleep(ms) {
+    return new Promise((resolve) => {
+      this._queueWake = resolve;
+      this._queueTimer = setTimeout(() => {
+        this._queueWake = null;
+        resolve();
+      }, ms);
+    });
+  }
+
+  /** @param {any} json @returns {WsSessionInfo} */
+  _parseGrant(json) {
+    return {
+      sessionId: json.session_id,
+      connectUrl: json.connect_url,
+      websocketUrl: json.websocket_url,
+      sessionToken: json.session_token,
+      pendingTimeoutS: json.pending_timeout_s,
+      tier: json.tier,
+      limited: json.limited,
+      heartbeatSec: json.heartbeatSec,
+      remainingSec: json.remainingSec,
+    };
+  }
+
+  async _setupAudio() {
+    // Prefer a context the caller already created + resumed inside the tap
+    // gesture (required on iOS). Fall back to creating one here for callers
+    // that don't (desktop is lenient about the gesture timing).
+    // Most desktops give us 48 kHz, mobiles can give 44.1/24/16 kHz; the
+    // capture worklet handles any rate (linear interp fallback).
+    const ctx = this.options.audioContext ?? new AudioContext({ latencyHint: "interactive" });
+    this._ctx = ctx;
+
+    // Resume if still suspended. This is best-effort here — on iOS the resume
+    // that actually counts is the one the caller did synchronously on tap.
+    if (ctx.state === "suspended") {
+      try {
+        await ctx.resume();
+      } catch (err) {
+        console.warn("[ws] AudioContext resume failed:", err);
+      }
+    }
+
+    // The worklets live at the repo root, one level up from this module.
+    // ?v=2 busts the browser cache so the fixed (unmuted) playback worklet
+    // always loads instead of a stale muted copy.
+    const base = new URL("../worklets/", import.meta.url);
+    await ctx.audioWorklet.addModule(new URL("mic-capture.js?v=3", base).href);
+    await ctx.audioWorklet.addModule(new URL("audio-playback.js?v=3", base).href);
+
+    const captureNode = new AudioWorkletNode(ctx, "mic-capture", {
+      numberOfInputs: 1,
+      numberOfOutputs: 0,
+      processorOptions: { chunkMs: MIC_CHUNK_MS },
+    });
+    captureNode.port.onmessage = (e) => {
+      const data = e.data;
+      if (data instanceof ArrayBuffer) {
+        this._onMicChunk(data);
+      } else if (data?.kind === "level") {
+        // Raw pre-gate mic RMS for the Settings meter.
+        this.dispatchEvent(new CustomEvent("input-level", { detail: { rms: data.rms } }));
+      }
+    };
+    // Push the initial gate config now that the worklet exists.
+    captureNode.port.postMessage({ kind: "gate", ...this._noiseGate });
+    this._captureNode = captureNode;
+
+    const micSrc = ctx.createMediaStreamSource(this.options.micStream);
+    micSrc.connect(captureNode);
+    this._micSrc = micSrc;
+
+    // Mic analyser: tap the mic in parallel with the worklet so we get the
+    // raw (un-resampled, un-clipped) signal for the visualiser.
+    const micAnalyser = ctx.createAnalyser();
+    micAnalyser.fftSize = VIS_FFT_SIZE;
+    micAnalyser.smoothingTimeConstant = 0;
+    micSrc.connect(micAnalyser);
+    this._micAnalyser = micAnalyser;
+
+    const playbackNode = new AudioWorkletNode(ctx, "audio-playback", {
+      numberOfInputs: 0,
+      numberOfOutputs: 1,
+      outputChannelCount: [1],
+    });
+    playbackNode.port.postMessage({ kind: "config", inputRate: OUTPUT_SAMPLE_RATE, muted: this._playbackMuted === true });
+    playbackNode.port.onmessage = (e) => this._onPlaybackMessage(e.data);
+
+    // Output analyser sits between the playback worklet and the speakers.
+    const outAnalyser = ctx.createAnalyser();
+    outAnalyser.fftSize = VIS_FFT_SIZE;
+    outAnalyser.smoothingTimeConstant = 0.3;
+    playbackNode.connect(outAnalyser);
+    outAnalyser.connect(ctx.destination);
+    this._outAnalyser = outAnalyser;
+    this._playbackNode = playbackNode;
+
+    this._visualiser = new OrbVisualiser(micAnalyser, outAnalyser, () => this._aiSpeaking);
+    this._visualiser.start();
+  }
+
+  /** @param {string} connectUrl */
+  _openWebSocket(connectUrl) {
+    return new Promise((resolve, reject) => {
+      const ws = new WebSocket(connectUrl);
+      ws.binaryType = "arraybuffer";
+      this._ws = ws;
+
+      const onceOpen = () => {
+        ws.removeEventListener("open", onceOpen);
+        ws.removeEventListener("error", onceErr);
+        resolve();
+      };
+      const onceErr = (e) => {
+        ws.removeEventListener("open", onceOpen);
+        ws.removeEventListener("error", onceErr);
+        reject(new Error(`WebSocket failed to open: ${e?.type ?? "error"}`));
+      };
+      ws.addEventListener("open", onceOpen);
+      ws.addEventListener("error", onceErr);
+
+      ws.addEventListener("message", (e) => this._onWsMessage(e.data));
+      ws.addEventListener("close", (e) => this._onWsClose(e));
+      ws.addEventListener("error", (e) => {
+        console.error("[ws] socket error", e);
+      });
+    });
+  }
+
+  /**
+   * @param {{ kind: string; queuedMs?: number; played?: number }} data
+   */
+  _onPlaybackMessage(data) {
+    if (data?.kind === "underrun") {
+      // Server stopped sending audio mid-response. Most likely the turn
+      // ended cleanly (a response.done usually arrives just before/after
+      // this). We let the state machine fall back to "connected" via the
+      // response.done event handler.
+    } else if (data?.kind === "stats") {
+      if (typeof data.played === "number") this._dbgPlayed = data.played;
+      if (typeof data.received === "number") this._dbgReceived = data.received;
+      if (typeof data.outPeak === "number") this._dbgOutPeak = data.outPeak;
+    }
+  }
+
+  /**
+   * Audio pipeline debug readout for the status overlay.
+   * @returns {{ deltas: number, bytes: number, played: number, ctx: string, ws: number }}
+   */
+  getAudioDebug() {
+    return {
+      deltas: this._dbgDeltas,
+      bytes: this._dbgBytes,
+      received: this._dbgReceived ?? 0,
+      played: this._dbgPlayed,
+      peak: this._dbgPeak ?? 0,
+      outPeak: this._dbgOutPeak ?? 0,
+      ctx: this._ctx ? this._ctx.state : "none",
+      ws: this._ws ? this._ws.readyState : -1,
+    };
+  }
+
+  /**
+   * Mic worklet just sent us a ~40 ms PCM16 16 kHz mono chunk.
+   * Base64-encode and forward via the WS.
+   * @param {ArrayBuffer} pcm16Buffer
+   */
+  _onMicChunk(pcm16Buffer) {
+    if (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;
+    if (!this._sessionConfigured) return; // Server rejects audio before session.update.
+    if (this._muted) return;
+    const b64 = base64FromArrayBuffer(pcm16Buffer);
+    this._send({ type: "input_audio_buffer.append", audio: b64 });
+  }
+
+  /**
+   * @param {string | ArrayBuffer | Blob} raw
+   */
+  async _onWsMessage(raw) {
+    let text;
+    if (typeof raw === "string") {
+      text = raw;
+    } else if (raw instanceof ArrayBuffer) {
+      text = new TextDecoder("utf-8").decode(raw);
+    } else if (raw instanceof Blob) {
+      text = await raw.text();
+    } else {
+      return;
+    }
+
+    let event;
+    try {
+      event = JSON.parse(text);
+    } catch {
+      return;
+    }
+
+    const type = event?.type;
+    if (typeof type !== "string") return;
+    // Opt-in event tracing for diagnosing turn/transcript issues. Enable with
+    // `localStorage.setItem("s2s.debug", "1")` in the browser console.
+    if (this._debug) {
+      const extra = type.startsWith("conversation.item.input_audio_transcription")
+        ? ` item=${event.item_id} ci=${event.content_index} ${event.delta ?? event.transcript ?? ""}`
+        : type.startsWith("response.")
+          ? ` resp=${event.response_id ?? event.response?.id ?? ""} status=${event.response?.status ?? ""} ${event.transcript ?? ""}`
+          : "";
+      console.debug(`[ws] ${type}${extra}`);
+    }
+
+    switch (type) {
+      case "session.created":
+        // Server-side defaults for the s2s pipeline are already what we
+        // want (server_vad, whisper-1 transcription, PCM16 16k in / 24k
+        // out). We only push the user-tunable bits: voice + instructions.
+        this._sendSessionUpdate();
+        this._sessionConfigured = true;
+        if (this._status === "connecting") this._setStatus("connected");
+        break;
+
+      case "session.updated":
+        // Acknowledged by server, nothing to do.
+        break;
+
+      case "input_audio_buffer.speech_started":
+        // User started speaking — stop any audio still playing OR queued, every
+        // time. We clear unconditionally (not just when `_aiSpeaking`): after a
+        // reply or a tool result the worklet's ring buffer can still be draining
+        // even though we already flipped `_aiSpeaking` off, and that tail would
+        // otherwise keep playing over the user's barge-in.
+        this._playbackNode?.port.postMessage({ kind: "clear" });
+        this._aiSpeaking = false;
+        this._setStatus("user-speaking");
+        break;
+
+      case "input_audio_buffer.speech_stopped":
+        if (this._status === "user-speaking") this._setStatus("processing");
+        break;
+
+      case "response.created":
+        // A response now owns the slot — count it and clear our create guard
+        // (this confirms either our create or a server-initiated one).
+        this._openResponses++;
+        this._createInFlight = false;
+        if (this._status === "connected" || this._status === "user-speaking") {
+          this._setStatus("processing");
+        }
+        break;
+
+      case "response.output_item.added":
+        if (this._status === "connected" || this._status === "user-speaking") {
+          this._setStatus("processing");
+        }
+        break;
+
+      case "response.audio.delta":
+      case "response.output_audio.delta": {
+        this._pushAudioDelta(event.delta);
+        const rid = event.response_id ?? event.response?.id;
+        if (rid) this._audibleResponses.add(rid);
+        if (!this._aiSpeaking) {
+          this._aiSpeaking = true;
+          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.done": {
+        this._aiSpeaking = false;
+        // This response freed the slot (completion OR cancellation both arrive
+        // as response.done). Decrement and, if a create was waiting, replay it.
+        this._openResponses = Math.max(0, this._openResponses - 1);
+        if (this._status === "ai-speaking" || this._status === "processing") {
+          this._setStatus("connected");
+        }
+        // A response closes here for BOTH normal completion and cancellation
+        // (the s2s server signals a speculative-turn interrupt as
+        // `response.done` with status "cancelled" — there is no separate
+        // `response.cancelled` event). Surface the id + status so the UI can
+        // drop a cancelled response's transcript and commit a completed one.
+        const status = event.response?.status ?? "completed";
+        const responseId = event.response?.id ?? "";
+        // Did this response ever play audio? Distinguishes a barge-in cut (the
+        // user heard part of it) from a speculative response that never played.
+        const audible = responseId ? this._audibleResponses.has(responseId) : false;
+        this._audibleResponses.delete(responseId);
+        // Pull whatever transcript the response carries, falling back to the
+        // segments we concatenated from the `*.transcript.done` events (plus any
+        // in-progress delta). For an interrupted reply the response payload may
+        // be empty, so this is the last chance to capture the text.
+        const transcript =
+          extractResponseTranscript(event.response) ||
+          this._asstDisplay(responseId) ||
+          "";
+        // Response finished — clear both transcript accumulators for it.
+        this._asstTranscriptByResp.delete(responseId);
+        this._asstFullByResp.delete(responseId);
+        this.dispatchEvent(new CustomEvent("response-finished", {
+          detail: { responseId, status, audible, transcript },
+        }));
+        // The slot is free now — replay a queued create (e.g. a tool follow-up
+        // that arrived while this response was still running).
+        this._flushQueuedCreate();
+        break;
+      }
+
+      case "response.function_call_arguments.done": {
+        const name = typeof event.name === "string" ? event.name : "";
+        const args = typeof event.arguments === "string" ? event.arguments : "{}";
+        const callId = typeof event.call_id === "string" ? event.call_id : "";
+        if (name) {
+          this.dispatchEvent(new CustomEvent("toolcall", {
+            detail: { name, arguments: args, callId },
+          }));
+        } else {
+          // A nameless call can't be executed, so no function_call_output is
+          // ever sent and the model would wait forever for a result. The
+          // backend shouldn't emit these; warn loudly rather than stall silently.
+          console.warn(`[ws] function_call_arguments.done with no name (call_id=${callId}); cannot run tool — turn may stall`);
+        }
+        break;
+      }
+
+      case "conversation.item.input_audio_transcription.delta": {
+        const delta = typeof event.delta === "string" ? event.delta : "";
+        if (delta) {
+          // `itemId` is REUSED across a speculative continuation, so the UI
+          // groups both segments into one message. The delta carries the full
+          // cumulative transcript so far (not an increment).
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: {
+                role: "user",
+                text: delta,
+                partial: true,
+                itemId: typeof event.item_id === "string" ? event.item_id : "",
+              },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "conversation.item.input_audio_transcription.completed": {
+        const transcript = typeof event.transcript === "string" ? event.transcript : "";
+        if (transcript) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: {
+                role: "user",
+                text: transcript,
+                partial: false,
+                itemId: typeof event.item_id === "string" ? event.item_id : "",
+              },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "response.audio_transcript.delta":
+      case "response.output_audio_transcript.delta": {
+        // Stream the assistant transcript live: accumulate the incremental
+        // deltas and push the running text to the UI. Every transcribe event we
+        // receive reaches the conversation, so an interrupted reply already has
+        // its partial text even if the `.done` never fires.
+        this._markAudible();
+        const rid = typeof event.response_id === "string" ? event.response_id : "";
+        const delta = typeof event.delta === "string" ? event.delta : "";
+        if (delta) {
+          this._asstTranscriptByResp.set(rid, (this._asstTranscriptByResp.get(rid) || "") + delta);
+          // Show completed segments + the segment streaming in right now.
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: { role: "assistant", text: this._asstDisplay(rid), partial: true, responseId: rid },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "response.audio_transcript.done":
+      case "response.output_audio_transcript.done": {
+        const rid = typeof event.response_id === "string" ? event.response_id : "";
+        // This is ONE completed segment. A response can emit several; concatenate
+        // them, space-separated, until response.done clears the accumulator.
+        const segment =
+          (typeof event.transcript === "string" && event.transcript) ||
+          this._asstTranscriptByResp.get(rid) ||
+          "";
+        this._asstTranscriptByResp.delete(rid); // segment finished; next one starts fresh
+        if (segment) {
+          const prev = this._asstFullByResp.get(rid) || "";
+          this._asstFullByResp.set(rid, prev ? `${prev} ${segment}` : segment);
+        }
+        const full = this._asstFullByResp.get(rid) || "";
+        if (full) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: { role: "assistant", text: full, partial: false, responseId: rid },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "error": {
+        const err = event.error;
+        console.error("[ws] server error:", err);
+        // The "another response is already active" race: our optimistic create
+        // collided with a still-running response. Don't surface it — clear the
+        // in-flight guard and re-queue, so the create replays on the next
+        // response.done (never retried immediately, which would just collide
+        // again).
+        if (err?.type === "conversation_already_has_active_response" ||
+            err?.code === "conversation_already_has_active_response") {
+          if (this._createInFlight) {
+            this._createInFlight = false;
+            // Re-queue a BARE create: any image on the original payload was
+            // already sent before this (rejected) create, so don't resend it.
+            this._createQueue.push({});
+          }
+          break;
+        }
+        // Every other server error is non-fatal: surface it for logging but
+        // NEVER tear the socket down. Only transport failures (close / failed
+        // open) are fatal, and those come through their own paths.
+        this.dispatchEvent(
+          new CustomEvent("server-error", { detail: { error: new Error(err?.message ?? "Server error") } }),
+        );
+        break;
+      }
+    }
+  }
+
+  /** @param {string} b64 */
+  _pushAudioDelta(b64) {
+    if (!this._playbackNode) return;
+    if (!b64) return;
+    this._dbgDeltas += 1;
+    this._dbgBytes += (b64.length * 3) >> 2; // approx decoded bytes
+    const bytes = base64ToBytes(b64);
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const samples = new Float32Array(bytes.byteLength / 2);
+    let peak = 0;
+    for (let i = 0; i < samples.length; i++) {
+      const s = view.getInt16(i * 2, true);
+      samples[i] = s < 0 ? s / 0x8000 : s / 0x7fff;
+      const a = samples[i] < 0 ? -samples[i] : samples[i];
+      if (a > peak) peak = a;
+    }
+    this._dbgPeak = Math.max(this._dbgPeak || 0, peak);
+    // Clone (no transfer list): structured cloning across the main->worklet
+    // boundary is more robust than transferring the buffer — some browser
+    // versions mis-shape the received object and the worklet would drop it.
+    this._playbackNode.port.postMessage({ kind: "audio", samples });
+  }
+
+  /** @param {CloseEvent} ev */
+  _onWsClose(ev) {
+    console.log("[ws] socket closed:", ev.code, ev.reason);
+    if (this._status === "closed" || this._status === "error") return;
+    if (ev.code === 1000) {
+      this._setStatus("closed");
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("error", {
+          detail: { error: new Error(`WebSocket closed (${ev.code}) ${ev.reason || ""}`.trim()) },
+        }),
+      );
+      this._setStatus("error");
+    }
+  }
+
+  _sendSessionUpdate() {
+    // Minimal payload: only the bits the user is allowed to configure.
+    // The s2s server already defaults to server_vad, whisper-1
+    // transcription, 16 kHz PCM input and 24 kHz PCM output, so we don't
+    // need (and must not send) `audio.input.format`, `audio.input.transcription`,
+    // `audio.input.turn_detection` or `audio.output.format`: the pydantic
+    // validator on the server rejects the whole event if any unknown or
+    // future-shaped sub-field shows up.
+    /** @type {Record<string, any>} */
+    const session = {
+      type: "realtime",
+      instructions: this.options.instructions,
+      audio: {
+        output: { voice: this.options.voice },
+      },
+    };
+    // Tools are declared here; the backend already accepts them in
+    // session.update and emits response.function_call_arguments.done when the
+    // model decides to call one. Only include the keys when we actually have
+    // tools — the server's pydantic validator is strict about shapes.
+    if (this._tools.length) {
+      session.tools = this._tools;
+      session.tool_choice = "auto";
+    }
+    this._send({ type: "session.update", session });
+  }
+
+  /** Update voice/instructions on a live session without tearing down. */
+  /** @param {{ voice?: string; instructions?: string }} patch */
+  updateSession(patch) {
+    /** @type {Record<string, any>} */
+    const session = { type: "realtime" };
+    if (patch.instructions) session.instructions = patch.instructions;
+    if (patch.voice) session.audio = { output: { voice: patch.voice } };
+    if (Object.keys(session).length > 1) {
+      this._send({ type: "session.update", session });
+    }
+  }
+
+  /**
+   * Replace the declared tool set on a live session (e.g. the user flipped a
+   * tool switch mid-conversation). Always sends `tools` — an empty array
+   * clears them — so toggling the last tool off actually removes it.
+   * @param {ToolDef[]} tools
+   */
+  setTools(tools) {
+    this._tools = tools;
+    this._send({
+      type: "session.update",
+      session: { type: "realtime", tools, tool_choice: tools.length ? "auto" : "none" },
+    });
+  }
+
+  /**
+   * Return a tool's result to the model. Pairs with the `toolcall` event's
+   * `callId`. Caller follows this with `requestResponse()` so the model speaks.
+   * @param {string} callId
+   * @param {string} output Plain text / JSON string the model will read.
+   */
+  sendToolOutput(callId, output) {
+    if (!callId) return; // Can't target a result without the call id.
+    this._send({
+      type: "conversation.item.create",
+      item: { type: "function_call_output", call_id: callId, output },
+    });
+  }
+
+  /**
+   * Add an image to the conversation as user content, so the vision-language
+   * model can see it (used by the camera tool). `dataUrl` is a
+   * `data:image/jpeg;base64,...` string.
+   * @param {string} dataUrl
+   */
+  sendUserImage(dataUrl) {
+    this._send({
+      type: "conversation.item.create",
+      item: {
+        type: "message",
+        role: "user",
+        content: [{ type: "input_image", image_url: dataUrl }],
+      },
+    });
+  }
+
+  /**
+   * Add a text message to the conversation as user content, and trigger a
+   * response. Use this to type messages instead of speaking. The text is
+   * sent as a user message and the model generates a reply.
+   * @param {string} text
+   */
+  sendUserText(text) {
+    if (!text) return;
+    this._send({
+      type: "conversation.item.create",
+      item: {
+        type: "message",
+        role: "user",
+        content: [{ type: "input_text", text }],
+      },
+    });
+    this.requestResponse();
+  }
+
+  /**
+   * Ask the model to generate a response now (after feeding tool results).
+   * Serialized: if a response is already in flight we queue this request and
+   * replay it once the active response finishes, so we never trip the
+   * backend's `conversation_already_has_active_response` guard.
+   *
+   * @param {{ image?: string }} [opts] Optional `image` (a data URL) sent as a
+   *   user `input_image` immediately before this response.create — so the frame
+   *   travels with the create (and is deferred together with it if queued),
+   *   rather than being added to the conversation eagerly. Used by the camera
+   *   tool so the model sees the snapshot in the response it's about to speak.
+   */
+  requestResponse(opts = {}) {
+    if (this._responseActive()) {
+      this._createQueue.push(opts);
+      if (this._debug) console.debug(`[ws] response.create queued (a response is active); pending=${this._createQueue.length}`);
+      return;
+    }
+    this._createResponseNow(opts);
+  }
+
+  /** True while a response occupies the single backend slot. */
+  _responseActive() {
+    return this._openResponses > 0 || this._createInFlight;
+  }
+
+  /** Send a response.create immediately and arm the in-flight guard. Any image
+   *  on the payload is added as user content right before the create.
+   *  @param {{ image?: string }} [opts] */
+  _createResponseNow(opts = {}) {
+    if (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;
+    if (opts.image) this.sendUserImage(opts.image);
+    this._createInFlight = true;
+    this._send({ type: "response.create" });
+  }
+
+  /** Replay one queued response.create if the slot is now free. Called on every
+   *  response.done, so queued creates drain one-per-completion. */
+  _flushQueuedCreate() {
+    if (this._createQueue.length > 0 && !this._responseActive()) {
+      const opts = this._createQueue.shift();
+      if (this._debug) console.debug(`[ws] replaying queued response.create; remaining=${this._createQueue.length}`);
+      this._createResponseNow(opts);
+    }
+  }
+
+  /** @param {boolean} muted */
+  setMuted(muted) {
+    this._muted = muted;
+  }
+
+  /**
+   * Mute/unmute the page's own TTS playback. When the Live Avatar's WebRTC
+   * stream carries the same audio (digital human running), mute the page to
+   * avoid double audio; otherwise (no avatar) keep it playing.
+   * @param {boolean} muted
+   */
+  setPlaybackMuted(muted) {
+    this._playbackMuted = muted;
+    if (this._playbackNode) {
+      this._playbackNode.port.postMessage({ kind: "config", inputRate: OUTPUT_SAMPLE_RATE, muted });
+    }
+  }
+
+  /**
+   * Update the mic noise gate live (the user moved the Settings cursor).
+   * @param {NoiseGate} gate
+   */
+  setNoiseGate(gate) {
+    this._noiseGate = gate;
+    this._captureNode?.port.postMessage({ kind: "gate", ...gate });
+  }
+
+  /** @param {Record<string, unknown>} event */
+  _send(event) {
+    if (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;
+    this._ws.send(JSON.stringify(event));
+  }
+
+  async close() {
+    // Abort a queue wait in progress: flag it and wake the poll sleep so
+    // `_pollQueue` throws "aborted" and connect() unwinds cleanly.
+    this._closed = true;
+    if (this._queueWake) {
+      clearTimeout(this._queueTimer);
+      const wake = this._queueWake;
+      this._queueWake = null;
+      wake();
+    }
+    if (this._joinTimer) {
+      clearTimeout(this._joinTimer);
+      this._joinTimer = 0;
+    }
+    if (this._joinReject) {
+      const reject = this._joinReject;
+      this._joinResolve = null;
+      this._joinReject = null;
+      reject(_codedError("join aborted", "aborted"));
+    }
+    this._visualiser?.stop();
+    this._visualiser = null;
+    try {
+      if (this._ws && this._ws.readyState <= WebSocket.OPEN) {
+        this._ws.close(1000, "client closed");
+      }
+    } catch {
+      // ignored
+    }
+    this._ws = null;
+
+    try {
+      this._captureNode?.port.close?.();
+    } catch {
+      // ignored
+    }
+    try {
+      this._micSrc?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._captureNode?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._micAnalyser?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._outAnalyser?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._playbackNode?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      await this._ctx?.close();
+    } catch {
+      // ignored
+    }
+    this._ctx = null;
+    this._captureNode = null;
+    this._playbackNode = null;
+    this._micSrc = null;
+    this._micAnalyser = null;
+    this._outAnalyser = null;
+    this._setStatus("closed");
+  }
+}
diff --git a/public/voice-worklets/audio-playback.js b/public/voice-worklets/audio-playback.js
new file mode 100644
index 0000000..469b904
--- /dev/null
+++ b/public/voice-worklets/audio-playback.js
@@ -0,0 +1,211 @@
+// @ts-check
+/**
+ * AudioWorkletProcessor that plays back Float32 mono samples received from
+ * the main thread, upsampling whatever incoming rate the server uses
+ * (typically 16 kHz PCM16) to the AudioContext rate (typically 48 kHz).
+ *
+ * Lifecycle / messaging:
+ *
+ *   main -> worklet:
+ *     { kind: "config", inputRate: 16000, muted: false }  one-shot at startup
+ *     { kind: "audio", samples: Float32Array }             per chunk
+ *     { kind: "clear" }                                    wipe queue (barge-in)
+ *
+ *   worklet -> main:
+ *     { kind: "stats", queuedMs, played }                  every ~250 ms
+ *     { kind: "underrun" }                                 every time the queue
+ *                                                          runs dry mid-playback
+ *
+ * `muted` (default false): the Live Avatar (LiveTalking WebRTC) carries the
+ * same audio, so the page mutes its own playback to avoid double audio. When
+ * the avatar is NOT running (e.g. dev on macOS), keep muted=false so the page
+ * plays the backend audio itself.
+ *
+ * IMPORTANT: the read position only advances while audio is actually being
+ * played (`_playing`). Advancing during idle would drift `_readIdx` far past
+ * the next chunk's length and turn every read into NaN (silence) once audio
+ * arrives.
+ */
+
+const STATS_INTERVAL_FRAMES = 12000;
+const FADE_FRAMES = 32;
+
+class AudioPlaybackProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this._inputRate = 16000;
+    this._stepRatio = this._inputRate / sampleRate;
+    this._muted = false;
+    this._queue = [];
+    this._readIdx = 0;
+    this._fracPos = 0;
+    this._playing = false;
+    this._lastSample = 0;
+    this._framesSinceStats = 0;
+    this._totalPlayed = 0;
+    this._dbgReceived = 0;
+    this._dbgOutPeak = 0;
+    this._fadeIn = 0;
+    this._fadeOut = 0;
+
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      if (!data || typeof data !== "object") return;
+      switch (data.kind) {
+        case "config":
+          if (typeof data.inputRate === "number" && data.inputRate > 0) {
+            this._inputRate = data.inputRate;
+            this._stepRatio = this._inputRate / sampleRate;
+          }
+          if (typeof data.muted === "boolean") this._muted = data.muted;
+          break;
+        case "audio": {
+          // Accept Float32Array, a transferred ArrayBuffer, or a plain
+          // {buffer, byteOffset, length} descriptor: cross-realm structured
+          // cloning can deliver the samples in any of these shapes.
+          let arr = data.samples;
+          let f32 = null;
+          if (arr instanceof Float32Array) {
+            f32 = arr;
+          } else if (arr instanceof ArrayBuffer) {
+            f32 = new Float32Array(arr);
+          } else if (arr && typeof arr === "object" && arr.buffer instanceof ArrayBuffer) {
+            f32 = new Float32Array(arr.buffer, arr.byteOffset || 0, (arr.byteLength || arr.buffer.byteLength) >> 2);
+          }
+          if (f32 && f32.length > 0) {
+            this._queue.push(f32);
+            this._dbgReceived += 1;
+            if (!this._playing) {
+              this._playing = true;
+              this._fadeIn = FADE_FRAMES;
+              this._fadeOut = 0;
+            }
+          }
+          break;
+        }
+        case "clear":
+          this._queue.length = 0;
+          this._readIdx = 0;
+          this._fracPos = 0;
+          this._playing = false;
+          this._lastSample = 0;
+          this._fadeOut = FADE_FRAMES;
+          break;
+      }
+    };
+  }
+
+  _queuedSamples() {
+    let total = -this._readIdx;
+    for (const buf of this._queue) total += buf.length;
+    return Math.max(0, total);
+  }
+
+  /** Linear-interp read at the current fractional position. */
+  _readInterpolated() {
+    if (this._queue.length === 0) return null;
+    const head = this._queue[0];
+    const idx = this._readIdx;
+    const frac = this._fracPos;
+
+    let a = head[idx];
+    let b;
+    if (idx + 1 < head.length) {
+      b = head[idx + 1];
+    } else if (this._queue.length > 1) {
+      b = this._queue[1][0];
+    } else {
+      b = a;
+    }
+    return a + (b - a) * frac;
+  }
+
+  /** Advance the read position by `stepRatio`; pop consumed buffers. */
+  _advance() {
+    this._fracPos += this._stepRatio;
+    while (this._fracPos >= 1) {
+      this._fracPos -= 1;
+      this._readIdx += 1;
+    }
+    while (this._queue.length > 0 && this._readIdx >= this._queue[0].length) {
+      this._readIdx -= this._queue[0].length;
+      this._queue.shift();
+    }
+  }
+
+  process(_, outputs) {
+    const channels = outputs[0];
+    if (!channels || channels.length === 0) return true;
+    const out = channels[0];
+    const stereo = channels.length > 1 ? channels[1] : null;
+
+    // Muted mode (Live Avatar WebRTC carries the audio): output silence.
+    if (this._muted) {
+      for (let i = 0; i < out.length; i++) {
+        out[i] = 0;
+        if (stereo) stereo[i] = 0;
+      }
+      this._framesSinceStats += out.length;
+      return true;
+    }
+
+    for (let i = 0; i < out.length; i++) {
+      let sample = 0;
+
+      if (this._playing) {
+        const v = this._readInterpolated();
+        if (v === null) {
+          // Underrun: ramp out cleanly to avoid clicks.
+          sample = this._lastSample * Math.max(0, 1 - 1 / FADE_FRAMES);
+          this._lastSample = sample;
+          if (Math.abs(sample) < 1e-4) {
+            this._playing = false;
+            this._lastSample = 0;
+            this.port.postMessage({ kind: "underrun" });
+          }
+        } else {
+          sample = v;
+          this._lastSample = v;
+          this._advance();
+        }
+
+        if (this._fadeIn > 0) {
+          const gain = 1 - this._fadeIn / FADE_FRAMES;
+          sample *= gain;
+          this._fadeIn -= 1;
+        }
+        if (this._fadeOut > 0) {
+          const gain = this._fadeOut / FADE_FRAMES;
+          sample *= gain;
+          this._fadeOut -= 1;
+          if (this._fadeOut === 0) {
+            this._playing = false;
+            this._lastSample = 0;
+          }
+        }
+
+        this._totalPlayed += 1;
+        const abs = sample < 0 ? -sample : sample;
+        if (abs > this._dbgOutPeak) this._dbgOutPeak = abs;
+      }
+
+      out[i] = sample;
+      if (stereo) stereo[i] = sample;
+    }
+
+    this._framesSinceStats += out.length;
+    if (this._framesSinceStats >= STATS_INTERVAL_FRAMES) {
+      this.port.postMessage({
+        kind: "stats",
+        queuedMs: Math.round((this._queuedSamples() / this._inputRate) * 1000),
+        played: this._totalPlayed,
+        received: this._dbgReceived,
+        outPeak: this._dbgOutPeak,
+      });
+      this._framesSinceStats = 0;
+    }
+    return true;
+  }
+}
+
+registerProcessor("audio-playback", AudioPlaybackProcessor);
diff --git a/public/voice-worklets/mic-capture.js b/public/voice-worklets/mic-capture.js
new file mode 100644
index 0000000..a48860b
--- /dev/null
+++ b/public/voice-worklets/mic-capture.js
@@ -0,0 +1,159 @@
+// @ts-check
+/**
+ * AudioWorkletProcessor that resamples the AudioContext rate (typically 48 kHz)
+ * down to 16 kHz, packs the result as little-endian Int16 PCM, and posts it
+ * back to the main thread in fixed-size chunks.
+ *
+ * The Hugging Face speech-to-speech WebSocket route expects the
+ * `input_audio_buffer.append` payload at 16 kHz PCM16 mono.
+ *
+ * Design notes:
+ *   - 48 -> 16 is an exact 3:1 ratio so we use a 3-tap boxcar average as a
+ *     cheap low-pass before decimating. Good enough for voice STT; we lose
+ *     a tiny bit of >8 kHz content which the pipeline discards anyway.
+ *   - Output frames are emitted at the cadence dictated by `chunkMs`
+ *     (default 40 ms = 640 samples = 1280 bytes). The OpenAI Realtime
+ *     server batches incoming audio so the cadence is flexible; 20-100 ms
+ *     is the sweet spot.
+ *   - Float -> Int16 saturates to [-1, 1] before scaling.
+ *   - Optional noise gate: per-chunk RMS decides open/closed against a
+ *     threshold; the gain ramps (fast attack, hold, slow release) so word
+ *     onsets aren't clipped and quiet tails don't click. The gate only
+ *     affects the audio we SEND; the main-thread visualiser taps the raw
+ *     mic separately. We post the chunk RMS up every frame so the Settings
+ *     mic meter can show the live level against the threshold.
+ */
+
+const TARGET_RATE = 16000;
+const DEFAULT_CHUNK_MS = 40;
+// Gate envelope timing (fixed; only the threshold is user-tunable).
+const GATE_ATTACK_MS = 5; // open almost instantly so word onsets survive
+const GATE_HOLD_MS = 250; // stay open this long after the level drops back under
+const GATE_RELEASE_MS = 80; // then fade closed over this long (no click)
+
+class MicCaptureProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    const chunkMs = options?.processorOptions?.chunkMs ?? DEFAULT_CHUNK_MS;
+    this._inputRate = sampleRate;
+    this._ratio = this._inputRate / TARGET_RATE;
+    this._chunkSamples16k = Math.round((TARGET_RATE * chunkMs) / 1000);
+    this._scratch = new Float32Array(0);
+    this._decimated = new Float32Array(this._chunkSamples16k);
+    this._enabled = true;
+
+    // Noise gate state. Disabled by default (pure passthrough).
+    this._gateEnabled = false;
+    this._thresholdLin = 0; // linear amplitude; signal RMS must exceed this to open
+    this._gateGain = 1; // smoothed gain currently applied
+    this._holdRemaining = 0; // samples left before the gate may start closing
+    this._attackCoef = Math.exp(-1 / ((GATE_ATTACK_MS / 1000) * TARGET_RATE));
+    this._releaseCoef = Math.exp(-1 / ((GATE_RELEASE_MS / 1000) * TARGET_RATE));
+    this._holdSamples = Math.round((GATE_HOLD_MS / 1000) * TARGET_RATE);
+
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      if (data?.kind === "enable") this._enabled = !!data.value;
+      else if (data?.kind === "gate") {
+        this._gateEnabled = !!data.enabled;
+        // dB -> linear amplitude. When off, threshold 0 keeps the gate open.
+        this._thresholdLin = data.enabled ? Math.pow(10, data.thresholdDb / 20) : 0;
+      }
+    };
+  }
+
+  /**
+   * Append `incoming` to the internal scratch buffer, then emit as many
+   * full output chunks as we have material for.
+   * @param {Float32Array} incoming
+   */
+  _ingest(incoming) {
+    if (incoming.length === 0) return;
+    const next = new Float32Array(this._scratch.length + incoming.length);
+    next.set(this._scratch, 0);
+    next.set(incoming, this._scratch.length);
+    this._scratch = next;
+    this._maybeEmit();
+  }
+
+  _maybeEmit() {
+    const r = this._ratio;
+    const n = this._chunkSamples16k;
+    const needIn = Math.ceil(n * r);
+    const dec = this._decimated;
+    while (this._scratch.length >= needIn) {
+      // 1. Decimate to 16 kHz floats and accumulate energy for the gate/meter.
+      let sumSq = 0;
+      if (Math.abs(r - 3) < 1e-6) {
+        // 48 kHz -> 16 kHz fast path with boxcar lowpass.
+        for (let i = 0; i < n; i++) {
+          const idx = i * 3;
+          const s = (this._scratch[idx] + this._scratch[idx + 1] + this._scratch[idx + 2]) / 3;
+          dec[i] = s;
+          sumSq += s * s;
+        }
+      } else {
+        // Generic path: linear interpolation. Slower but works at any rate
+        // (e.g. some Windows boxes report sampleRate=44100).
+        for (let i = 0; i < n; i++) {
+          const srcPos = i * r;
+          const idx = Math.floor(srcPos);
+          const frac = srcPos - idx;
+          const a = this._scratch[idx];
+          const b = this._scratch[idx + 1] ?? a;
+          const s = a + (b - a) * frac;
+          dec[i] = s;
+          sumSq += s * s;
+        }
+      }
+      const rms = Math.sqrt(sumSq / n);
+
+      // 2. Decide the gate target for this chunk, then ramp sample-by-sample.
+      let target = 1;
+      if (this._gateEnabled) {
+        if (rms >= this._thresholdLin) {
+          this._holdRemaining = this._holdSamples; // re-arm the hold
+        } else if (this._holdRemaining > 0) {
+          this._holdRemaining -= n; // coasting through the hold window
+        } else {
+          target = 0;
+        }
+      }
+
+      // 3. Apply the (smoothed) gain and pack to Int16.
+      const out = new Int16Array(n);
+      let gain = this._gateGain;
+      for (let i = 0; i < n; i++) {
+        const coef = target > gain ? this._attackCoef : this._releaseCoef;
+        gain = target + (gain - target) * coef;
+        const s = dec[i] * gain;
+        const clamped = s < -1 ? -1 : s > 1 ? 1 : s;
+        out[i] = clamped < 0 ? clamped * 0x8000 : clamped * 0x7fff;
+      }
+      this._gateGain = gain;
+
+      // Shift the scratch buffer to keep only the trailing unused samples.
+      const consumed = Math.floor(n * r);
+      this._scratch = this._scratch.slice(consumed);
+
+      // Live input level for the Settings meter (raw RMS, pre-gate).
+      this.port.postMessage({ kind: "level", rms });
+
+      if (this._enabled) {
+        this.port.postMessage(out.buffer, [out.buffer]);
+      }
+      // When disabled (mic muted) we silently consume input so the worklet
+      // stays alive and the buffer never grows unbounded.
+    }
+  }
+
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || input.length === 0 || !input[0]) return true;
+    const mono = input[0];
+    if (mono.length > 0) this._ingest(mono);
+    return true;
+  }
+}
+
+registerProcessor("mic-capture", MicCaptureProcessor);
diff --git a/src/App.jsx b/src/App.jsx
index 63f5c6b..51d31da 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import MediaScreen from './pages/MediaScreen';
 import DataScreen from './pages/DataScreen';
 import DigitalTwin from './pages/DigitalTwin';
 import AiAssistant from './pages/AiAssistant';
+import VoiceAssistant from './pages/VoiceAssistant';
 import ScreenLayout from './components/ScreenLayout';
 import './styles/tokens.css';
 
@@ -16,6 +17,8 @@ export default function App() {
           <Route path="/twin" element={<DigitalTwin />} />
           <Route path="/ai" element={<AiAssistant />} />
           <Route path="/screen" element={<MediaScreen />} />
+          {/* 实时语音对话页（React 原生，复用页眉） */}
+          <Route path="/voice" element={<VoiceAssistant />} />
         </Route>
         {/* 管理后台已迁移至 FastAPI + Jinja（GET /admin），不由 React 路由接管 */}
         <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/config.js b/src/config.js
index 66e9b4a..62c712a 100644
--- a/src/config.js
+++ b/src/config.js
@@ -10,7 +10,7 @@
 
 const env = import.meta.env || {};
 
-export const API_BASE = window.__DPM_API__ || env.VITE_API_BASE || 'http://localhost:10085';
+export const API_BASE = window.__DPM_API__ || env.VITE_API_BASE || 'http://192.168.1.9:10085';
 export const MQTT_URL = window.__DPM_MQTT__ || env.VITE_MQTT_URL || 'ws://192.168.1.3:8083/mqtt';
 export const MQTT_USERNAME = window.__DPM_MQTT_USER__ || env.VITE_MQTT_USERNAME || '';
 export const MQTT_PASSWORD = window.__DPM_MQTT_PASS__ || env.VITE_MQTT_PASSWORD || '';
diff --git a/src/pages/VoiceAssistant.jsx b/src/pages/VoiceAssistant.jsx
new file mode 100644
index 0000000..cafa32b
--- /dev/null
+++ b/src/pages/VoiceAssistant.jsx
@@ -0,0 +1,539 @@
+/* =========================================================
+   实时语音对话页（/voice）—— React 完全复刻 live-avatar 对话 UI
+   · 无自带 topbar（DPM 页眉由 ScreenLayout 注入）
+   · 中间圆球（状态机 + 指示器 + 噪声门圆环）、右下角气泡渲染、
+     底部文字输入 —— 结构与类名与原版一致，样式引入原版 style.css
+   · 逻辑：本地 VAD + 云 ASR(qwen3-asr-flash-realtime) + 云 LLM(qwen-plus) + 云 TTS(qwen3-tts-flash-realtime)
+   ========================================================= */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { S2sWsRealtimeClient } from '../voice/s2s-ws-client.js';
+import useVisionDetection, { VISION_DWELL_MS } from '../voice/useVisionDetection.js';
+import ParkOverviewStrip from '../components/ParkOverviewStrip';
+import { useParkSim } from '../utils/parkData';
+import { API_BASE } from '../config';
+import '../styles/datascreen.css';
+import './voice-original.css';
+import './voice-overrides.css';
+
+const VOICE_URL = window.__DPM_VOICE_WS__ || `ws://${window.location.hostname}:8765/v1/realtime`;
+const DEFAULT_INSTRUCTIONS = '你是园区智能助手，请用简洁专业的中文回答，不超过三句话。';
+const DEFAULT_VOICE = 'Cherry';
+const DEFAULT_GATE_DB = -50;
+
+const STATE_VIEWS = {
+  idle: '点击开始',
+  connecting: '思考中',
+  listening: '正在聆听',
+  'user-speaking': '',
+  processing: '',
+  'ai-speaking': '',
+  error: '点击重试',
+};
+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',
+};
+const LIVE_STATES = new Set(['listening', 'user-speaking', 'processing', 'ai-speaking']);
+const GATE_OFF_DB = -66;
+const GATE_MAX_DB = -3;
+// ── 噪声门弧线几何（复刻原版 main.js：200° 弧，缺口朝向圆球）──
+const ARC_R = 40;
+const ARC_SPAN_DEG = 200;
+const ARC_START_DEG = 180 - ARC_SPAN_DEG / 2; // 80°：左下起点
+function arcPoint(f, r = ARC_R) {
+  const deg = ARC_START_DEG + f * ARC_SPAN_DEG;
+  const rad = (deg * Math.PI) / 180;
+  return { x: 50 + r * Math.cos(rad), y: 50 + r * Math.sin(rad) };
+}
+function fullArcD() {
+  const a = arcPoint(0);
+  const b = arcPoint(1);
+  return `M ${a.x} ${a.y} A ${ARC_R} ${ARC_R} 0 1 1 ${b.x} ${b.y}`;
+}
+function dbToFraction(db) {
+  const clamped = Math.min(GATE_MAX_DB, Math.max(GATE_OFF_DB, db));
+  return (clamped - GATE_OFF_DB) / (GATE_MAX_DB - GATE_OFF_DB);
+}
+
+const icons = {  micOn: <svg className="mic-on" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="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>,
+  micOff: <svg className="mic-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="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>,
+  indMic: <svg className="ind ind-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="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>,
+  indError: <svg className="ind ind-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="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>,
+  indVoice: <svg className="ind ind-voice" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="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 className="wave wave-1" d="M16 8a5 5 0 0 1 0 8" /><path className="wave wave-2" d="M19 5a9 9 0 0 1 0 14" /></svg>,
+  stop: <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>,
+};
+
+// 单条气泡：挂载后 rAF 加 `.in` 触发淡入（复刻原版 _spawnBubble 的进场动画）
+function Bubble({ m }) {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setShow(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  return (
+    <div className={`bubble ${m.role}${show ? ' in' : ''}${m.leaving ? ' out' : ''}`}>
+      <div className="bubble-role">{m.role === 'user' ? 'You' : 'Assistant'}</div>
+      <div className={`bubble-body${m.partial ? ' partial' : ''}`}>{m.text}</div>
+    </div>
+  );
+}
+
+export default function VoiceAssistant() {
+  const [state, setState] = useState('idle');
+  const [messages, setMessages] = useState([]);
+  const [muted, setMuted] = useState(false);
+  const [errorMsg, setErrorMsg] = useState('');
+  // 园区数据（页脚概览条；后端 /api/dashboard/snapshot，离线本地模拟兜底）
+  const d = useParkSim();
+
+  const clientRef = useRef(null);
+  const audioCtxRef = useRef(null);
+  const streamRef = useRef(null);
+  // 噪声门弧线元素
+  const micGateRef = useRef(null);
+  const mgaTrackRef = useRef(null);
+  const mgaFillRef = useRef(null);
+  const mgaHitRef = useRef(null);
+  const mgaHandleRef = useRef(null);
+  // 气泡定时器：id -> { dismiss?, remove? }
+  const bubbleTimersRef = useRef(new Map());
+  const messagesRef = useRef([]);
+
+  const live = LIVE_STATES.has(state);
+
+  // ── 自动问候生命周期状态（须在 start 之前定义：start 依赖数组引用 sendGreeting）──
+  const GREETING_TEXT = '你好！欢迎来到园区，我是智能语音助手，请问有什么可以帮你的吗？';
+  const GREETING_WAIT_MS = 25000; // 问候播完后等待用户回答的超时
+  const voiceStateRef = useRef(state);
+  voiceStateRef.current = state;
+  const pendingGreetingRef = useRef(false); // 连接成功后待发送的问候
+  const greetingSentRef = useRef(false);    // 问候已发出，等回复完成启动倒计时
+  const greetingTimerRef = useRef(null);    // 等待回答的倒计时句柄
+
+  // 主动发送问候（sendUserText → 后端 LLM 生成 → TTS 语音播放）
+  const sendGreeting = useCallback(() => {
+    const c = clientRef.current;
+    if (!c) return;
+    pendingGreetingRef.current = false;
+    greetingSentRef.current = true;
+    c.sendUserText(GREETING_TEXT);
+    console.warn('[vision] 自动问候已发送:', GREETING_TEXT);
+  }, []);
+
+  // ── 右下角气泡渲染（复刻原版 ui/chat.js）───────────────────────────────
+  // 流程：新气泡插入 → rAF 加 `.in`（淡入）→ 4s 后加 `.out`（淡出）→ 400ms 移除。
+  // 持续更新的气泡（partial 逐字流）续期 4s；栈上限 8 条，最旧优先淡出，
+  // 但永不驱逐正在更新的用户气泡。全部动画定时器集中管理，卸载时清理。
+  const clearBubbleTimers = useCallback((id) => {
+    const t = bubbleTimersRef.current.get(id);
+    if (!t) return;
+    if (t.dismiss) clearTimeout(t.dismiss);
+    if (t.remove) clearTimeout(t.remove);
+    bubbleTimersRef.current.delete(id);
+  }, []);
+
+  /** 立即把气泡标记为 `.out`，delay(默认400ms) 后从数组移除。 */
+  const markLeaving = useCallback((id, delay = 400) => {
+    setMessages((prev) => {
+      const m = prev.find((x) => x.id === id);
+      if (!m || m.leaving) return prev;
+      return prev.map((x) => (x.id === id ? { ...x, leaving: true } : x));
+    });
+    const remove = setTimeout(() => {
+      setMessages((prev) => prev.filter((x) => x.id !== id));
+      bubbleTimersRef.current.delete(id);
+    }, delay);
+    bubbleTimersRef.current.set(id, { remove });
+  }, []);
+
+  /** delay(默认4s) 后自动淡出；再次调用即续期（清掉旧计时重排）。 */
+  const scheduleBubbleDismiss = useCallback((id, delay = 4000) => {
+    clearBubbleTimers(id);
+    const dismiss = setTimeout(() => {
+      setMessages((prev) => {
+        const m = prev.find((x) => x.id === id);
+        if (!m || m.leaving) return prev;
+        return prev.map((x) => (x.id === id ? { ...x, leaving: true } : x));
+      });
+      const remove = setTimeout(() => {
+        setMessages((prev) => prev.filter((x) => x.id !== id));
+        bubbleTimersRef.current.delete(id);
+      }, 400);
+      bubbleTimersRef.current.set(id, { remove });
+    }, delay);
+    bubbleTimersRef.current.set(id, { dismiss });
+  }, [clearBubbleTimers]);
+
+  const pushMessage = useCallback((role, text, partial = false) => {
+    const key = role === 'user' ? 'user' : 'assistant';
+    let next = [...messagesRef.current];
+    const last = next.length ? next[next.length - 1] : null;
+    if (partial && last && last.role === key && !last.leaving) {
+      // 同一条逐字流：更新文本 + 续期 4s（气泡保持显示直到说完）
+      scheduleBubbleDismiss(last.id);
+      next[next.length - 1] = { ...last, text, partial: true };
+    } else {
+      const id = `${Date.now()}-${Math.random()}`;
+      next.push({ id, role: key, text, partial });
+      // 上限 8 条：最旧优先淡出（保留正在更新的用户气泡）
+      const visible = next.filter((m) => !m.leaving);
+      if (visible.length > 8) {
+        const activeUser = [...visible].reverse().find((m) => m.role === 'user' && m.partial);
+        const victim = visible.find((m) => m !== activeUser) ?? visible[0];
+        if (victim) {
+          next = next.map((m) => (m.id === victim.id ? { ...m, leaving: true } : m));
+          const remove = setTimeout(() => {
+            setMessages((prev) => prev.filter((x) => x.id !== victim.id));
+            bubbleTimersRef.current.delete(victim.id);
+          }, 400);
+          bubbleTimersRef.current.set(victim.id, { remove });
+        }
+      }
+      scheduleBubbleDismiss(id);
+    }
+    messagesRef.current = next;
+    setMessages(next);
+  }, [scheduleBubbleDismiss, markLeaving]);
+
+  // 结束会话：淡出全部气泡（原版 teardown 行为）
+  const dismissAllBubbles = useCallback(() => {
+    const ids = messagesRef.current.map((m) => m.id);
+    messagesRef.current = [];
+    ids.forEach((id) => {
+      if (id !== undefined) markLeaving(id);
+    });
+  }, [markLeaving]);
+
+  // 卸载时清理所有气泡定时器
+  useEffect(() => {
+    return () => {
+      for (const t of bubbleTimersRef.current.values()) {
+        if (t.dismiss) clearTimeout(t.dismiss);
+        if (t.remove) clearTimeout(t.remove);
+      }
+      bubbleTimersRef.current.clear();
+    };
+  }, []);
+
+  // 噪声门弧线：一次性几何（track/fill/hit 同一条 200° 弧 + 阈值圆点）
+  useEffect(() => {
+    const d = fullArcD();
+    mgaTrackRef.current?.setAttribute('d', d);
+    mgaFillRef.current?.setAttribute('d', d);
+    mgaHitRef.current?.setAttribute('d', d);
+    const fill = mgaFillRef.current;
+    if (fill) {
+      fill.setAttribute('pathLength', '100');
+      fill.style.strokeDasharray = '100 100';
+      fill.style.strokeDashoffset = '100'; // 无电平时空弧
+    }
+    const p = arcPoint(dbToFraction(DEFAULT_GATE_DB));
+    mgaHandleRef.current?.setAttribute('cx', String(p.x));
+    mgaHandleRef.current?.setAttribute('cy', String(p.y));
+  }, []);
+
+  // 实时麦克风电平 → 弧线填充 + 过门点亮（复刻原版 paintInputLevel）
+  const paintInputLevel = useCallback((rms) => {
+    if (!mgaFillRef.current || !micGateRef.current) return;
+    const db = rms > 0 ? 20 * Math.log10(rms) : GATE_OFF_DB;
+    const f = dbToFraction(db);
+    mgaFillRef.current.style.strokeDashoffset = String(100 * (1 - f));
+    const enabled = DEFAULT_GATE_DB > GATE_OFF_DB;
+    micGateRef.current.classList.toggle('gate-open', enabled && f >= dbToFraction(DEFAULT_GATE_DB));
+  }, []);
+
+  const start = useCallback(async () => {
+    if (clientRef.current) return;
+    setState('connecting');
+    try {
+      if (!window.isSecureContext || !navigator.mediaDevices?.getUserMedia) {
+        throw new Error('非安全上下文：请通过 http://localhost 或 HTTPS 访问，浏览器才允许麦克风');
+      }
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+      });
+      streamRef.current = stream;
+      if (!audioCtxRef.current) audioCtxRef.current = new AudioContext();
+      if (audioCtxRef.current.state === 'suspended') await audioCtxRef.current.resume();
+
+      const client = new S2sWsRealtimeClient({
+        directUrl: VOICE_URL,
+        voice: DEFAULT_VOICE,
+        instructions: DEFAULT_INSTRUCTIONS,
+        tools: [],
+        noiseGate: { enabled: true, thresholdDb: DEFAULT_GATE_DB },
+        audioContext: audioCtxRef.current,
+        micStream: stream,
+      });
+      const statusMap = {
+        connected: 'listening', 'user-speaking': 'user-speaking',
+        processing: 'processing', 'ai-speaking': 'ai-speaking', idle: 'idle',
+      };
+      client.addEventListener('status', (e) => {
+        const s = e.detail?.status;
+        setState(statusMap[s] ?? 'listening');
+      });
+      client.addEventListener('transcript', (e) => {
+        const d = e.detail;
+        pushMessage(d.role === 'user' ? 'user' : 'assistant', d.text, d.partial);
+        // 用户开始说话（回答了问候）→ 取消挂断倒计时
+        if (d.role === 'user' && d.text.trim() && greetingTimerRef.current) {
+          clearTimeout(greetingTimerRef.current);
+          greetingTimerRef.current = null;
+          console.warn('[vision] 用户已回答，取消挂断倒计时');
+        }
+      });
+      client.addEventListener('input-level', (e) => paintInputLevel(e.detail?.rms));
+      client.addEventListener('response-finished', () => {
+        setState('listening');
+        // 自动问候的回复播放完毕 → 启动"等待用户回答"倒计时；无回答则自动挂断
+        if (greetingSentRef.current) {
+          greetingSentRef.current = false;
+          if (greetingTimerRef.current) clearTimeout(greetingTimerRef.current);
+          greetingTimerRef.current = setTimeout(() => {
+            console.warn('[vision] 问候后用户未回答，自动挂断回初始界面');
+            void stop();
+          }, GREETING_WAIT_MS);
+        }
+      });
+      client.addEventListener('error', () => setState('error'));
+
+      clientRef.current = client;
+      await client.connect();
+      setState('listening');
+      // 自动问候：连接成功后发送问候（语音）
+      if (pendingGreetingRef.current) sendGreeting();
+    } catch (err) {
+      setErrorMsg(err?.message || String(err));
+      setState('error');
+    }
+  }, [pushMessage, paintInputLevel, sendGreeting]);
+
+  const stop = useCallback(async () => {
+    // 清理自动问候相关状态/倒计时
+    if (greetingTimerRef.current) {
+      clearTimeout(greetingTimerRef.current);
+      greetingTimerRef.current = null;
+    }
+    pendingGreetingRef.current = false;
+    greetingSentRef.current = false;
+    const c = clientRef.current;
+    clientRef.current = null;
+    if (c) { try { await c.close(); } catch { /* noop */ } }
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    setMuted(false);
+    setErrorMsg('');
+    dismissAllBubbles();
+    setState('idle');
+  }, [dismissAllBubbles]);
+
+  const toggleMute = useCallback(() => {
+    const c = clientRef.current;
+    if (!c) return;
+    setMuted((m) => { c.setMuted(!m); return !m; });
+  }, []);
+
+  // ── 视觉识别触发：主动问候 + 后端记录/广播 ─────────────────────────────
+  // 完整生命周期：
+  //   触发（仅 idle 状态）→ 打开对话(start) → 连接成功发问候(sendUserText→LLM→语音)
+  //   → 回复播放完(response-finished) → 等待用户回答 25s → 无回答则自动挂断回 idle
+  //   → 静默 3 分钟（hook VISION_SILENT_MS）期间不再打扰
+  // 循环依赖：onVisionTrigger 需读取 vision.faces，而它又要作为参数传给 useVisionDetection。
+  // 解法：hook 的 onTrigger/onGesture 从 ref 取最新回调；回调在 vision 声明之后再定义。
+  const visionTriggerRef = useRef(null);
+  const gestureRef = useRef(null);
+
+  const vision = useVisionDetection({
+    onTrigger: () => visionTriggerRef.current?.(),
+    onGesture: (g) => gestureRef.current?.(g),
+  });
+
+  // 手势 → 对话控制：举手 toggle —— 无对话则开始，正在对话则结束
+  const onGesture = useCallback((g) => {
+    if (g !== 'raise') return;
+    if (clientRef.current) {
+      void stop();
+    } else {
+      void start();
+    }
+  }, [start, stop]);
+
+  useEffect(() => {
+    gestureRef.current = onGesture;
+  }, [onGesture]);
+
+  const onVisionTrigger = useCallback(() => {
+    // 仅 idle 允许自动问候：对话中/连接中/其他状态一律不打扰
+    if (voiceStateRef.current !== 'idle') {
+      console.warn('[vision] 自动问候跳过：当前状态', voiceStateRef.current);
+      return;
+    }
+    pendingGreetingRef.current = true;
+    if (clientRef.current) {
+      sendGreeting();
+    } else {
+      void start(); // start 连接成功后检查 pendingGreetingRef 再发问候
+    }
+    fetch(`${API_BASE}/api/vision/event`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ event: 'triggered', faces: vision.faces, dwell_ms: VISION_DWELL_MS }),
+    }).catch(() => { /* 上报失败不影响本地问候 */ });
+  }, [vision.faces, start, sendGreeting]);
+
+  useEffect(() => {
+    visionTriggerRef.current = onVisionTrigger;
+  }, [onVisionTrigger]);
+
+  // 摄像头识别状态变化 → 上报后端（详细日志定位）
+  useEffect(() => {
+    if (!vision.status || vision.status === 'off' || vision.status === 'loading') return;
+    fetch(`${API_BASE}/api/vision/event`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        event: vision.status === 'model-error' ? 'model_error' : vision.status,
+        faces: vision.faces,
+        dwell_ms: vision.dwellMs,
+        detail: vision.errorInfo ? `${vision.errorInfo.name}: ${vision.errorInfo.message}` : '',
+      }),
+    }).catch(() => { /* 静默 */ });
+  }, [vision.status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const visionStatusText = {
+    off: '摄像头关闭',
+    loading: '摄像头启动中…',
+    detecting: `识别中 · ${vision.faces} 人${vision.faces > 0 ? `（后端 ${vision.latency ?? '-'}ms）` : ' · 未检到人脸'} · 链路${vision.modelPhase === 'ok' ? 'OK' : vision.modelPhase === 'failed' ? `失败:${(vision.modelErr || '').slice(0, 40)}` : '连接中'} · 亮度${vision.frameLum ?? '-'}${vision.detectErr ? ` · 异常:${String(vision.detectErr).slice(0, 50)}` : ''}`,
+    facing: `面向大屏 ${(vision.dwellMs / 1000).toFixed(1)}s / ${VISION_DWELL_MS / 1000}s`,
+    triggered: '已触发 · 主动问候',
+    silent: '静默中',
+    error: '摄像头不可用',
+  }[vision.status] ?? '';
+
+  // 摄像头失败的具体原因
+  const visionErrorText = (() => {
+    if (vision.status !== 'error') return null;
+    const name = vision.errorInfo?.name ?? '';
+    const msg = vision.errorInfo?.message ?? '';
+    if (!window.isSecureContext) return '非安全上下文：请用 localhost 或 HTTPS 访问';
+    if (name === 'NotFoundError') return `未检测到摄像头设备：${msg || '请确认 USB 摄像头已接入本机'}`;
+    if (name === 'NotAllowedError') return `摄像头权限被拒：请在浏览器地址栏允许 ${location.host} 使用摄像头`;
+    if (name === 'NotReadableError') return '摄像头被其他应用占用或不可用，请关闭占用程序后刷新';
+    return `摄像头启动失败（${name}）：${msg}`;
+  })();
+
+  const caption = state === 'error' ? (errorMsg || 'Tap to retry') : (STATE_VIEWS[state] ?? '');
+
+  return (
+    <div id="app">
+      {/* 非安全上下文提示（局域网 IP 访问时浏览器禁用麦克风/摄像头） */}
+      {!window.isSecureContext && (
+        <div className="voice-secure-warn">
+          ⚠️ 当前页面不是安全上下文，浏览器禁止麦克风/摄像头。
+          请改用 <b>http://localhost</b> 访问（或为后端配置 HTTPS）。
+        </div>
+      )}
+
+      {/* 主舞台：中间圆球 */}
+      <main className="stage">
+        <div className={`orb-wrap${live ? ' live' : ''}`}>
+          <div id="mic-gate" className="mic-gate" ref={micGateRef}>
+            <svg id="mic-gate-arc" className="mic-gate-arc" viewBox="0 0 100 100" aria-hidden="true">
+              <path id="mga-track" className="mga-track" fill="none" ref={mgaTrackRef} />
+              <path id="mga-fill" className="mga-fill" fill="none" ref={mgaFillRef} />
+              <path id="mga-hit" className="mga-hit" fill="none" ref={mgaHitRef} />
+              <circle id="mga-handle" className="mga-handle" r="3" ref={mgaHandleRef} />
+            </svg>
+            <button
+              id="mic-btn"
+              className={`side-btn${muted ? ' muted' : ''}`}
+              type="button"
+              aria-label={muted ? 'Unmute' : 'Mute'}
+              title={muted ? 'Unmute' : 'Mute'}
+              aria-hidden={!live}
+              tabIndex={live ? 0 : -1}
+              onClick={toggleMute}
+            >
+              {icons.micOn}
+              {icons.micOff}
+            </button>
+          </div>
+
+          <button
+            id="main-circle"
+            className={`circle ${STATE_CLASS[state] ?? 'state-idle'}`}
+            type="button"
+            aria-label="Start voice conversation"
+            disabled={state === 'connecting'}
+            onClick={live ? stop : start}
+          >
+            <span className="circle-glow" aria-hidden="true" />
+            <span className="circle-ring" aria-hidden="true" />
+            <span className="circle-ring-outer" aria-hidden="true" />
+            <span className="circle-core">
+              <span className="circle-indicator" aria-hidden="true">
+                {icons.indMic}
+                {icons.indError}
+                <span className="ind ind-spinner" />
+                <span className="ind ind-thinking"><span className="dot" /><span className="dot" /><span className="dot" /></span>
+                <span className="ind ind-bars"><span className="bar" /><span className="bar" /><span className="bar" /><span className="bar" /><span className="bar" /></span>
+                {icons.indVoice}
+              </span>
+            </span>
+          </button>
+
+          <button
+            id="stop-btn"
+            className="side-btn"
+            type="button"
+            aria-label="End"
+            title="End"
+            aria-hidden={!live}
+            tabIndex={live ? 0 : -1}
+            onClick={stop}
+          >
+            {icons.stop}
+          </button>
+        </div>
+
+        <p id="circle-caption" className={`circle-caption${caption ? '' : ' empty'}${state === 'error' ? ' error' : ''}`} role="status">{caption}</p>
+        <p id="circle-subcaption" className="circle-subcaption" hidden />
+      </main>
+
+      {/* 页脚：园区概览条（与数据大屏 / 媒体播放页一致） */}
+      <ParkOverviewStrip d={d} />
+
+      {/* 右下角气泡（复刻原版：进场 in / 4s 自动淡出 out / 阶梯字号） */}
+      <div id="bubble-stack" className="bubble-stack" aria-live="polite" aria-atomic="false">
+        {messages.map((m) => <Bubble key={m.id} m={m} />)}
+      </div>
+
+      {/* 视觉识别：摄像头默认开启；video 始终渲染（ref 先于启动存在），未开启时隐藏 */}
+      <div className={`voice-cam-pip${vision.cameraOn ? '' : ' hidden'}`}>
+        <video ref={vision.videoRef} autoPlay playsInline muted />
+        <div className="voice-cam-bar">
+          <span className="voice-cam-title">
+            <span className={`voice-cam-dot ${vision.status === 'triggered' ? 'trigger' : vision.status === 'facing' ? 'face' : 'on'}`} />
+            智能识别中
+          </span>
+          <span>
+            {vision.gesture === 'raise' && (
+              <b style={{ color: '#2f6bff' }}>您好呀 · {live ? '开始对话' : '结束对话'}</b>
+            )}
+            {visionStatusText}
+          </span>
+        </div>
+      </div>
+      {vision.status === 'error' && !vision.cameraOn && (
+        <div className="voice-vision-status" style={{ bottom: 62 }}>⚠️ {visionErrorText}</div>
+      )}
+      {vision.status === 'facing' && (
+        <div className="voice-vision-status">
+          检测到 <b>{vision.faces} 人</b>，正对摄像头 <b>{(vision.dwellMs / 1000).toFixed(1)}s</b>，停留 {VISION_DWELL_MS / 1000}s 后自动问候
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/voice-embed.css b/src/pages/voice-embed.css
new file mode 100644
index 0000000..faf0c87
--- /dev/null
+++ b/src/pages/voice-embed.css
@@ -0,0 +1,12 @@
+/* 实时语音对话页：iframe 占满内容区（页眉由 ScreenLayout 注入） */
+.voice-embed {
+  width: 100%;
+  height: 100%;
+}
+.voice-embed iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  background: #0d1117; /* 与原对话页深色背景一致 */
+}
diff --git a/src/pages/voice-original.css b/src/pages/voice-original.css
new file mode 100644
index 0000000..5ecb56c
--- /dev/null
+++ b/src/pages/voice-original.css
@@ -0,0 +1,2773 @@
+: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;
+
+  /* Mono is the "machine voice": reserved for system text the app emits —
+   * the orb's status caption, tool calls, the transport tag. Body/UI stays
+   * Inter. */
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+
+  /* Thesis: color belongs to the voice. The chrome is monochrome; saturated
+   * hue appears only on the orb and on these tiny role echoes, which mirror
+   * the orb's own state colors (you listening = cyan, assistant = violet,
+   * tool = amber) so the transcript reads in the same color language. */
+  --voice-user: var(--accent-2);
+  --voice-assistant: var(--accent);
+  --voice-tool: var(--processing);
+
+  /* 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 {
+  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 {
+  position: relative;
+  z-index: 1;
+  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;
+  /* Top-align so the right control cluster sits up with the title instead of
+   * floating to the vertical middle of the tall identity block. */
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 18px 28px;
+  /* Default stacking (below the conversation panel, z 200) so the panel drawer
+   * covers the controls when it's open. */
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  color: var(--text-dim);
+}
+
+/* Transport tag rides the wordmark as a system label, not prose — mono,
+ * dimmed, the only mono in the topbar. */
+.brand-tag {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  opacity: 0.55;
+}
+
+.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) {
+  /* The full identity stack is too tall for a phone topbar. Show only the
+   * title + (i); the popup carries the blurb, credits and pipeline.
+   * `.brand` prefix raises specificity so this beats the later base
+   * `.ident-meta { display: flex }` rule regardless of source order. */
+  .brand .ident-blurb,
+  .brand .ident-meta {
+    display: none;
+  }
+  .ident-title {
+    font-size: 18px;
+  }
+  .about-btn-mobile {
+    display: inline-flex;
+  }
+  /* Keep phone icons at the current compact size — the desktop bump above
+   * shouldn't leak into the mobile topbar. */
+  .topbar-right .icon-btn {
+    width: 36px;
+    height: 36px;
+  }
+  .topbar-right .icon-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+  /* Keep the account control compact on phones: avatar-only chip, shorter pill. */
+  .account-chip {
+    height: 36px;
+    padding: 0 6px;
+  }
+  .account-handle {
+    display: none;
+  }
+  .signin-pill {
+    height: 36px;
+    padding: 0 12px;
+  }
+}
+
+.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: var(--font-mono);
+  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;
+  touch-action: manipulation;
+  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);
+}
+/* Topbar control cluster reads a touch bigger on desktop. Phones keep the
+ * compact 36px (reset in the mobile media query). */
+.topbar-right .icon-btn {
+  width: 40px;
+  height: 40px;
+}
+.topbar-right .icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ─── Account (HF login chip + sign-in pill + popover) ─────────────────────── */
+.account {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+/* Signed-out: a compact pill that reads as the primary affordance. */
+.signin-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
+}
+.signin-pill svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.signin-pill:hover {
+  background: var(--bg-elev-2);
+  border-color: var(--text);
+}
+/* Narrow viewports: collapse the pill to an icon-only square. */
+@media (max-width: 800px) {
+  .signin-pill {
+    gap: 0;
+    width: 40px;
+    padding: 0;
+    justify-content: center;
+  }
+  .signin-pill span {
+    display: none;
+  }
+}
+/* Signed-in: avatar + handle chip. */
+.account-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 10px 0 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-elev);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.account-chip:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+.account-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex: none;
+}
+.account-avatar-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-elev-2);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 700;
+}
+.account-handle {
+  font-size: 13px;
+  font-weight: 600;
+  max-width: 12ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.account-pro {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: var(--text);
+  color: var(--bg);
+}
+/* Org "Team" badge: same pill as PRO, accent-coloured so it reads as
+ * unlimited without claiming a paid PRO subscription. */
+.account-team {
+  background: var(--accent);
+  color: var(--bg);
+}
+.account-pop {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 200px;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-soft);
+  z-index: 50;
+}
+.account-pop[hidden] {
+  display: none;
+}
+.account-pop-row {
+  padding: 8px 10px;
+}
+.account-pop-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+.account-pop-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding-top: 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.account-tier {
+  font-weight: 600;
+  color: var(--text);
+}
+.account-pop-link {
+  display: block;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 13px;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s;
+}
+.account-pop-link:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+.account-signout {
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+  padding-top: 10px;
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+
+/* ─── Daily-limit modal ────────────────────────────────────────────────────── */
+.limit-modal {
+  width: min(400px, 92vw);
+}
+.limit-card {
+  position: relative;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+  padding: 34px 28px 26px;
+}
+.limit-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+/* HF smiling face (brand yellow) on a neutral badge — friendly, not a stop sign.
+ * The logo is the single pop of colour, so the badge itself stays quiet. */
+.limit-badge {
+  width: 66px;
+  height: 66px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  margin: 2px auto 2px;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 0 0 6px rgba(255, 210, 30, 0.06);
+}
+.limit-badge .hf-logo {
+  width: 46px;
+  height: auto;
+}
+.limit-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+.limit-msg {
+  color: var(--text-dim);
+  font-size: 14px;
+  line-height: 1.55;
+  margin: 0;
+  max-width: 30ch;
+}
+.limit-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+.limit-cta .hf-logo {
+  width: 20px;
+  height: auto;
+  flex: none;
+}
+.limit-note {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+#limit-cta[hidden] {
+  display: none;
+}
+
+/* ─── Stage ───────────────────────────────────────────────────────────── */
+
+.stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 24px 32px;
+  gap: 20px;
+  min-height: 0;
+  background: transparent;
+}
+
+/* ─── 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;
+  /* Cap by height as well as width (min(vw, vh)-style): in a short container
+   * the orb shrinks instead of overflowing, so the page stays scroll-free even
+   * when embedded in a small box. On normal screens the 320px cap still wins,
+   * so the desktop size is unchanged. */
+  width: clamp(140px, min(38vw, 46vh), 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;
+  /* Treat taps as immediate clicks (no 300ms delay / double-tap-zoom). */
+  touch-action: manipulation;
+}
+.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-queued .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-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  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;
+}
+
+/* Warm, human line under the mono caption — sentence case, only while queued.
+ * The caption keeps the terse position; this reassures. */
+.circle-subcaption {
+  margin: 8px 0 0;
+  max-width: 32ch;
+  font-size: 13.5px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  text-align: center;
+  text-wrap: balance;
+  transition: opacity 0.25s ease;
+}
+.circle-subcaption[hidden] { display: none; }
+
+/* Queue actions sit under the caption: "Join now" (primary, only when it's your
+ * turn) stacked above the quiet "Leave queue" escape hatch. */
+.queue-actions {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.queue-actions[hidden] { display: none; }
+
+/* "Join now": the one call to action in the queue flow, so it reads as inviting
+ * (filled accent) while everything around it stays quiet. */
+.join-queue-btn {
+  padding: 10px 26px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #0b0b10;
+  background: var(--accent);
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+  transition: transform 0.12s ease, filter 0.2s ease;
+}
+.join-queue-btn:hover { filter: brightness(1.08); }
+.join-queue-btn:active { transform: scale(0.97); }
+.join-queue-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.join-queue-btn[hidden] { display: none; }
+
+/* "Leave queue": a quiet outlined pill, understated so it reads as an escape
+ * hatch, not a CTA. */
+.leave-queue-btn {
+  padding: 7px 16px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--text-faint) 35%, transparent);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+.leave-queue-btn:hover {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--text-faint) 60%, transparent);
+  background: color-mix(in srgb, var(--text-faint) 8%, transparent);
+}
+.leave-queue-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.leave-queue-btn[hidden] { display: none; }
+
+/* ─── 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(--voice-tool) 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) ──────────────────────────────────────── */
+
+/* Mic button + its radial noise-gate arc. The wrapper centres the button; the
+   arc SVG is an absolute overlay larger than the button, revealed with the
+   live session (it has no layout footprint, so the idle collapse is unaffected). */
+.mic-gate {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.mic-gate-arc {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  transform: translate(-50%, -50%);
+  pointer-events: none; /* only the hit-path below catches drags */
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.orb-wrap.live .mic-gate-arc { opacity: 1; }
+.mga-track {
+  stroke: rgba(255, 255, 255, 0.1); /* hairline; recedes until needed */
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+.mga-fill {
+  stroke: var(--accent-2);
+  stroke-width: 2;
+  stroke-linecap: round;
+  opacity: 0.85;
+  transition: stroke-dashoffset 0.06s linear;
+}
+/* Threshold setpoint: a bead riding the ring. White with a thin dark outline so
+   it stays legible over the moving fill; it recolors to cyan with a soft glow
+   the moment the live level crosses it (the gate opening). */
+.mga-handle {
+  fill: var(--text);
+  stroke: none;
+  transition: fill 0.2s ease, filter 0.2s ease;
+}
+.mic-gate.gate-open .mga-handle {
+  fill: var(--accent-2);
+  filter: drop-shadow(0 0 3px var(--accent-2));
+}
+.mga-hit {
+  stroke: transparent;
+  stroke-width: 16;
+  pointer-events: none; /* enabled only while live (below) */
+  cursor: pointer;
+  touch-action: none;
+}
+/* Only catch drags during a live call; when idle the arc is hidden and must
+   not steal clicks near the collapsed mic button / orb. */
+.orb-wrap.live .mga-hit { pointer-events: stroke; }
+
+.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;
+  touch-action: manipulation;
+  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; }
+/* Queued: a calm slate glow, distinct from connecting's active yellow — this is
+ * waiting, not working. The spinner turns slowly and the ring breathes. */
+.circle.state-queued       { --glow: #94a3b8; }
+.circle.state-queued .ind-spinner { animation-duration: 2.4s; }
+.circle.state-queued .circle-ring { animation: breathe 2.6s ease-in-out infinite; }
+/* Your turn: a slot is held for you — the orb warms to the accent and breathes a
+ * little quicker, an invitation to join. */
+.circle.state-your-turn    { --glow: var(--accent); }
+.circle.state-your-turn .circle-ring { animation: breathe 1.6s ease-in-out infinite; }
+.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(--border-strong);
+  background: var(--bg-elev);
+}
+
+.robot-card .name {
+  font-weight: 600;
+  font-size: 14px;
+}
+.robot-card .id {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.robot-empty {
+  padding: 14px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 13px;
+}
+
+/* ─── Footer ──────────────────────────────────────────────────────────── */
+
+/* ─── Text input bar ─────────────────────────────────────────────────────── */
+
+.text-input-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 560px;
+  margin: 20px auto 0;
+  padding: 0 20px;
+  width: 100%;
+}
+
+.text-input {
+  flex: 1;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 10px 16px;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.text-input::placeholder {
+  color: var(--text-faint);
+}
+
+.text-input:focus {
+  border-color: var(--accent-2);
+}
+
+.text-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.text-send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  transition: opacity 0.2s ease, background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.text-send-btn:hover:not(:disabled) {
+  background: var(--accent-2);
+}
+
+.text-send-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.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);
+}
+/* While the webcam preview sits bottom-left, push the credit to the
+ * bottom-right so the two don't collide. */
+body.cam-on .footer {
+  justify-content: flex-end;
+}
+
+/* ─── 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[hidden] { display: none; }
+.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(--text-dim);
+}
+/* Upload button for custom voice samples */
+.btn-upload {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--bg);
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+  margin-top: 2px;
+}
+.btn-upload:hover {
+  background: var(--accent);
+  color: #fff;
+}
+.btn-upload:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Deploy-pinned server URL: shown for transparency, not editable. */
+.field input[readonly] {
+  color: var(--text-dim);
+  border-style: dashed;
+  cursor: default;
+}
+.field input[readonly]:focus {
+  border-color: var(--border);
+}
+.field small {
+  color: var(--text-faint);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.field small.error { color: var(--error); }
+.field small code {
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
+/* Noise gate: a header with a live value, a level meter, and a range slider
+   that shares the meter's horizontal (dB) axis. */
+.field-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.field-value {
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-dim);
+}
+/* The slider and the level meter are one widget: the range input is overlaid
+   on the meter track (its native track is transparent), so the live-level fill
+   shows through behind the thumb and the thumb itself is the threshold. */
+.gate {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.gate-track {
+  position: relative;
+  height: 14px;
+  display: flex;
+  align-items: center;
+}
+.gate-track::before {
+  /* the visible meter track */
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+}
+.gate-meter-fill {
+  position: absolute;
+  left: 1px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 6px;
+  width: 0;
+  border-radius: 999px;
+  background: var(--accent-2);
+  transition: width 0.06s linear;
+  pointer-events: none;
+}
+.gate-ends {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--text-faint);
+  letter-spacing: 0;
+  text-transform: none;
+}
+/* The range input sits transparently on top of the meter track. */
+.gate-track input[type="range"] {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 0;
+  border: none;
+  background: transparent;
+  height: 14px;
+  cursor: pointer;
+}
+.gate-track input[type="range"]::-webkit-slider-runnable-track {
+  height: 14px;
+  background: transparent;
+}
+.gate-track input[type="range"]::-moz-range-track {
+  height: 14px;
+  background: transparent;
+}
+.gate-track input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 6px;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--text);
+  border: 2px solid var(--bg-elev);
+  box-shadow: 0 0 0 1px var(--border-strong);
+}
+.gate-track input[type="range"]::-moz-range-thumb {
+  width: 6px;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--text);
+  border: 2px solid var(--bg-elev);
+  box-shadow: 0 0 0 1px var(--border-strong);
+}
+.gate-track input[type="range"]:focus { border: none; }
+
+.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(--text);
+  border-color: var(--text);
+  color: var(--bg);
+}
+.btn.primary:hover {
+  background: #fff;
+  border-color: #fff;
+}
+.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;
+}
+
+/* Horizontal layout for Voice + Model. */
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+/* ─── Chat button + badge ────────────────────────────────────────────── */
+
+#chat-btn {
+  position: relative;
+}
+
+.chat-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text);
+  border: 1.5px solid var(--bg-elev);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+.chat-badge.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ─── Lyric-style ephemeral transcript ─────────────────────────────────
+ * A vertical lyrics stack like a music player: newest line is largest and
+ * sits at the bottom, older lines shrink and fade as they move up, and the
+ * oldest fades out at the top as new lines arrive. */
+
+.bubble-stack {
+  position: fixed;
+  right: 40px;
+  bottom: 15%;
+  width: min(440px, calc(100vw - 64px));
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 6px;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.bubble {
+  pointer-events: none;
+  max-width: 100%;
+  padding: 2px 0;
+  text-align: right;
+  line-height: 1.35;
+  word-break: break-word;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 0.25s ease, transform 0.25s ease, font-size 0.25s ease;
+}
+.bubble.in {
+  opacity: 1;
+  transform: translateY(0);
+}
+.bubble.out {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* Progressive lyric sizing — newest line (last child) is biggest, older
+ * lines shrink and dim as they climb the stack. */
+.bubble.in:last-child {
+  font-size: 26px;
+  font-weight: 700;
+}
+.bubble.in:nth-last-child(2) {
+  font-size: 21px;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.bubble.in:nth-last-child(3) {
+  font-size: 17px;
+  font-weight: 500;
+  opacity: 0.7;
+}
+.bubble.in:nth-last-child(4) {
+  font-size: 14px;
+  font-weight: 400;
+  opacity: 0.55;
+}
+.bubble.in:nth-last-child(n+5) {
+  font-size: 12px;
+  font-weight: 400;
+  opacity: 0.35;
+}
+
+.bubble.user,
+.bubble.assistant,
+.bubble.tool {
+  align-self: flex-end;
+}
+.bubble.user {
+  color: rgba(190, 235, 251, 0.82);
+}
+.bubble.assistant {
+  color: rgba(214, 208, 255, 0.82);
+}
+.bubble.tool {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: var(--font-mono);
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  opacity: 0.7;
+}
+.bubble.tool .bubble-tool-icon {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  color: var(--voice-tool);
+}
+
+.bubble-role {
+  display: none;
+}
+
+/* ─── Conversation history panel ─────────────────────────────────────── */
+
+.chat-panel {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+}
+.chat-panel-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 9, 13, 0.45);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.chat-panel.open .chat-panel-backdrop {
+  opacity: 1;
+  pointer-events: auto;
+}
+.chat-panel-inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(360px, 90vw);
+  background: var(--bg-elev);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+  pointer-events: auto;
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
+}
+.chat-panel.open .chat-panel-inner {
+  transform: translateX(0);
+}
+.chat-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+.chat-panel-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  scroll-behavior: smooth;
+}
+.chat-history::-webkit-scrollbar { width: 3px; }
+.chat-history::-webkit-scrollbar-track { background: transparent; }
+.chat-history::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+
+.chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--text-faint);
+  padding: 48px 0;
+  opacity: 0.65;
+}
+.chat-empty svg {
+  margin-bottom: 6px;
+  opacity: 0.8;
+}
+.chat-empty-title {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.chat-empty-hint {
+  font-size: 12px;
+  color: var(--text-faint);
+  opacity: 0.7;
+}
+
+/* ─── History messages ───────────────────────────────────────────────── */
+
+.hist-msg {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-width: 88%;
+}
+.hist-msg.user { align-self: flex-start; }
+.hist-msg.assistant { align-self: flex-end; }
+.hist-msg.tool { align-self: flex-start; max-width: 100%; }
+
+.hist-role {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 0 2px;
+}
+.hist-msg.user .hist-role { color: color-mix(in srgb, var(--voice-user) 75%, var(--text-faint)); }
+.hist-msg.assistant .hist-role { color: color-mix(in srgb, var(--voice-assistant) 75%, var(--text-faint)); }
+.hist-msg.tool .hist-role { color: color-mix(in srgb, var(--voice-tool) 75%, var(--text-faint)); }
+
+.hist-body {
+  padding: 9px 12px;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  line-height: 1.5;
+  border: 1px solid var(--border);
+  background: var(--bg-elev-2);
+  word-break: break-word;
+}
+/* Bodies share one neutral surface; alignment + the mono role label do the
+ * distinguishing, so the panel reads as one quiet column. */
+.hist-msg.user .hist-body.partial { opacity: 0.65; }
+
+/* ─── Tool call history item ─────────────────────────────────────────── */
+
+.hist-tool-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: color-mix(in srgb, var(--processing) 10%, var(--bg-elev-2));
+  border: 1px solid color-mix(in srgb, var(--processing) 22%, var(--border));
+  border-bottom: 1px solid color-mix(in srgb, var(--processing) 15%, var(--border));
+  cursor: pointer;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  width: 100%;
+  text-align: left;
+  transition: background 0.15s;
+}
+.hist-tool-header:only-child {
+  border-radius: var(--radius-md);
+  border-bottom: 1px solid color-mix(in srgb, var(--processing) 22%, var(--border));
+}
+.hist-tool-header:hover {
+  background: color-mix(in srgb, var(--processing) 16%, var(--bg-elev-2));
+}
+.hist-tool-icon {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  color: var(--processing);
+}
+.hist-tool-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--voice-tool);
+  font-weight: 600;
+}
+.hist-tool-chevron {
+  margin-left: auto;
+  width: 13px;
+  height: 13px;
+  color: var(--text-faint);
+  transition: transform 0.2s ease;
+  flex: none;
+}
+.hist-tool-header[aria-expanded="true"] .hist-tool-chevron {
+  transform: rotate(180deg);
+}
+.hist-tool-body {
+  padding: 10px 12px 12px;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  background: var(--bg);
+  border: 1px solid color-mix(in srgb, var(--processing) 22%, var(--border));
+  border-top: none;
+  display: none;
+}
+.hist-tool-body.open { display: block; }
+.hist-tool-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin: 8px 0 4px;
+}
+.hist-tool-label:first-child { margin-top: 0; }
+.hist-tool-block {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.65;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+}
+.hist-tool-output { color: var(--text); }
+
+/* ─── Phone layout ────────────────────────────────────────────────────────
+ * On phones the floating bubble stream overlaps the orb and there isn't room
+ * for it, so we drop it entirely and rely on the conversation panel (opened
+ * from the top-right chat button) as the single place to read the transcript.
+ * The badge still pulses there when new messages arrive while it's closed.
+ * We also stack the mic / stop controls above and below the orb (instead of
+ * left/right) so the wide live row never overflows, and let the panel take
+ * the full width. */
+@media (max-width: 600px) {
+  .bubble-stack {
+    display: none;
+  }
+
+  .topbar {
+    padding: 14px 16px;
+  }
+
+  .stage {
+    padding: 16px 12px 24px;
+  }
+
+  /* Stack vertically: mic above the orb, stop below it (DOM order is
+   * mic → circle → stop). */
+  .orb-wrap {
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .circle {
+    /* Height-capped like the base rule so a narrow AND short box still fits. */
+    width: clamp(130px, min(56vw, 52vh), 240px);
+  }
+
+  /* In the column layout the side controls must collapse by HEIGHT, not
+   * width, so they take no vertical space until the session is live. */
+  .side-btn {
+    width: 44px;
+    height: 0;
+    transition: opacity 0.25s ease, transform 0.25s ease, height 0.25s ease,
+      background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .side-btn svg {
+    width: 19px;
+    height: 19px;
+  }
+  .orb-wrap.live .side-btn {
+    width: 44px;
+    height: 44px;
+  }
+  .mic-gate-arc { width: 70px; height: 70px; }
+
+  /* Full-screen conversation on phones — feels more deliberate than a
+   * narrow slide-over. It already spans top-to-bottom (inset 0); make it
+   * span edge-to-edge too and drop the now-pointless border/shadow. */
+  .chat-panel-inner {
+    width: 100vw;
+    border-left: none;
+    box-shadow: none;
+  }
+}
+
+/* ─── About panel ─────────────────────────────────────────────────────────
+ * Opened from the (i) by the wordmark. Reuses the <dialog> .modal shell.
+ * Strictly monochrome per DESIGN.md — the only "color" is the orb, never
+ * here. Machine identifiers (model IDs, role tags, usernames) ride Geist
+ * Mono; everything human stays Inter. */
+.about-modal {
+  /* Roomier on tablet/desktop; the 92vw cap keeps phones full-width. */
+  width: min(680px, 92vw);
+  max-height: 88vh;
+}
+.about-modal .modal-content {
+  max-height: 88vh;
+  overflow-y: auto;
+  gap: 20px;
+  padding: 26px 30px 24px;
+}
+.about-modal .modal-content::-webkit-scrollbar { width: 3px; }
+.about-modal .modal-content::-webkit-scrollbar-track { background: transparent; }
+.about-modal .modal-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+
+/* Links here are quiet: no permanent underline (the global dotted rule is
+ * too loud for a dense credit block), brighten + underline on hover only. */
+.about-modal a {
+  color: var(--text);
+  border-bottom: none;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+.about-modal a:hover {
+  color: #fff;
+}
+.about-intro a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.about-modal .ext {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  opacity: 0.5;
+}
+
+/* Title row: the demo name and the (i) read as one unit. */
+.ident-head {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+/* (i) trigger sits right after the title. A faint outline keeps it
+ * catchable without turning into a card; it fills in on hover. */
+.about-btn {
+  flex: none;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.about-btn:hover {
+  background: var(--bg-elev);
+  border-color: var(--text-dim);
+  color: var(--text);
+}
+.about-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.about-btn-mobile {
+  display: inline-flex;
+}
+
+/* ── Popup intro: a plain paragraph on the project + a repo link ── */
+.about-intro p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+.about-repo {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 12px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* ── Corner identity (replaces the wordmark) ──
+ * A compact stack in the topbar: title, one-line blurb, two meta rows.
+ * Monochrome; only the role/name identifiers ride the machine typeface. */
+.ident {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+/* Reset the global underlined-anchor styling inside the identity block. */
+.ident a {
+  border-bottom: none;
+  color: inherit;
+  transition: color 0.15s ease;
+}
+.ident a:hover {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ident-title {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  line-height: 1.1;
+  color: var(--text);
+}
+.ident-blurb {
+  margin: 0;
+  max-width: 48ch;
+  font-size: 14.5px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--text-dim);
+}
+.ident-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-dim);
+}
+.ident-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+}
+.ident-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+/* Shared credit bits — now used in the corner identity block. */
+.sep {
+  color: var(--text-faint);
+  opacity: 0.6;
+}
+.hf-credit {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+/* Brand marks keep their own color — a deliberate exception to the
+ * monochrome rule, for the HF and Cerebras logos only. */
+.hf-mark {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: #ffd21e;
+}
+.cerebras-credit {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.cerebras-mark {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+/* Usernames are identifiers, so they ride the machine typeface. */
+.handle {
+  font-family: var(--font-mono);
+  font-size: 13.5px;
+}
+
+/* ── Pipeline (the signal flow) ── */
+.about-pipeline {
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+}
+.pipeline-title {
+  margin: 0 0 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+.pipeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+/* One continuous rail threading every node, dot centers at x=8.5px. */
+.pipeline::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  top: 7px;
+  bottom: 7px;
+  width: 1px;
+  background: var(--border-strong);
+}
+.pipeline > li {
+  position: relative;
+  padding-left: 30px;
+}
+/* Stages: solid node. Endpoints (you / orb): hollow node. */
+.pipe-stage::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 4px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-dim);
+}
+.pipe-endpoint::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 3px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 1px solid var(--text-faint);
+  background: var(--bg-elev);
+}
+.pipe-endpoint {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding-bottom: 12px;
+}
+.pipeline > li.pipe-endpoint:last-child {
+  padding-bottom: 0;
+}
+.pipe-stage {
+  padding-bottom: 16px;
+}
+.pipe-tag {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--text);
+  margin-right: 9px;
+}
+.pipe-job {
+  font-size: 14px;
+  color: var(--text-dim);
+}
+/* Middot between the job and its model link, matching the separators
+ * used elsewhere. */
+.pipe-job::after {
+  content: "·";
+  margin: 0 7px;
+  color: var(--text-faint);
+}
+.pipe-note {
+  color: var(--text-faint);
+}
+/* The Cerebras link stays as quiet as the note; brightens + underlines on hover. */
+.pipe-note a {
+  color: inherit;
+}
+.pipe-note a:hover {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.pipe-model {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  word-break: break-all;
+}
+.pipe-model:hover {
+  color: #fff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.pipe-model .ext {
+  width: 11px;
+  height: 11px;
+}
+
+/* "Interrupted" tag on an assistant reply the user barged in on. */
+.hist-note {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 0 2px;
+}
+.hist-msg.assistant .hist-note {
+  align-self: flex-end;
+}
+.hist-msg.interrupted .hist-body {
+  opacity: 0.7;
+}
+
+/* Captured webcam frame shown in the transcript (camera tool result). */
+.hist-image {
+  display: block;
+  width: 100%;
+  max-width: 240px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  margin-top: 2px;
+}
+
+/* ─── Tools panel ──────────────────────────────────────────────────────────
+ * Reuses the modal/field shell. Switches are monochrome (checked = near-white,
+ * the same high-contrast treatment as the primary button): color belongs to
+ * the voice, not the chrome. */
+.tools-intro {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-dim);
+}
+.tool-list {
+  display: flex;
+  flex-direction: column;
+}
+.tool-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 0;
+}
+.tool-row-sep {
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+.tool-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.tool-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+.tool-desc {
+  font-size: 12.5px;
+  color: var(--text-dim);
+}
+.tool-row.disabled .tool-name,
+.tool-row.disabled .tool-desc {
+  opacity: 0.5;
+}
+.tool-hint {
+  display: block;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-faint);
+}
+.tools-key {
+  margin: 0 0 4px;
+}
+
+/* Toggle switch */
+.switch {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: 40px;
+  height: 24px;
+  cursor: pointer;
+}
+.switch input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.switch-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  transition: background 0.15s, border-color 0.15s;
+}
+.switch-track::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  transition: transform 0.18s ease, background 0.15s;
+}
+.switch input:checked + .switch-track {
+  background: var(--text);
+  border-color: var(--text);
+}
+.switch input:checked + .switch-track::after {
+  transform: translate(16px, -50%);
+  background: var(--bg);
+}
+.switch input:focus-visible + .switch-track {
+  outline: 2px solid var(--text-dim);
+  outline-offset: 2px;
+}
+.switch input:disabled {
+  cursor: not-allowed;
+}
+.switch input:disabled + .switch-track {
+  opacity: 0.5;
+}
+
+/* ─── Webcam preview (camera tool) ──────────────────────────────────────────
+ * Floating self-view, bottom-left. Mirrored for the user; the frame sent to
+ * the model is drawn un-mirrored (see captureSnapshot). */
+.cam-pip {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  width: 280px;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  box-shadow: var(--shadow-soft);
+  z-index: 90;
+  opacity: 0;
+  transform: translateY(8px) scale(0.96);
+  pointer-events: none;
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+.cam-pip.visible {
+  opacity: 1;
+  transform: none;
+}
+.cam-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1); /* mirror the self-view only */
+  background: var(--bg);
+}
+.cam-label {
+  position: absolute;
+  left: 8px;
+  bottom: 6px;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text);
+  opacity: 0.8;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+}
+.cam-flash {
+  position: absolute;
+  inset: 0;
+  background: #fff;
+  opacity: 0;
+  pointer-events: none;
+}
+.cam-pip.flash .cam-flash {
+  animation: cam-flash 0.4s ease;
+}
+@keyframes cam-flash {
+  0% { opacity: 0; }
+  12% { opacity: 0.85; }
+  100% { opacity: 0; }
+}
+@media (max-width: 600px) {
+  /* Bottom-centred on phones. Auto margins centre it without touching the
+   * transform, so the slide/scale-in animation still works. */
+  .cam-pip {
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    bottom: 16px;
+    width: min(188px, 52vw);
+  }
+  /* The credit would sit under the centred preview, so drop it while the
+   * camera is on. */
+  body.cam-on .footer {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cam-pip {
+    transition: opacity 0.22s ease;
+    transform: none;
+  }
+  .cam-pip.flash .cam-flash {
+    animation: none;
+  }
+}
+
+/* ─── Desktop type scale ────────────────────────────────────────────────────
+ * A uniform step up (~+1px, title +2) for all UI text on larger screens.
+ * Scoped to min-width: 601px so it can't reach phones — the ≤600px layout
+ * keeps every size exactly as it was. */
+@media (min-width: 601px) {
+  .cam-label { font-size: 10.5px; }
+
+  .bubble-role,
+  .hist-role { font-size: 11px; }
+
+  .circle-caption,
+  .footer,
+  .chat-empty-title,
+  .hist-tool-block,
+  .ident-label,
+  .pipeline-title,
+  .pipe-endpoint { font-size: 12px; }
+
+  .field > span,
+  .field small,
+  .bubble.tool,
+  .chat-empty-hint,
+  .hist-tool-name,
+  .pipe-tag,
+  .pipe-model,
+  .tool-hint { font-size: 13px; }
+
+  .tool-desc { font-size: 13.5px; }
+
+  .btn,
+  .bubble,
+  .field,
+  .hist-body,
+  .hist-tool-header,
+  .tools-intro { font-size: 14px; }
+
+  .handle { font-size: 14.5px; }
+
+  .about-intro p,
+  .about-repo,
+  .brand,
+  .chat-panel-header h3,
+  .field textarea,
+  .ident-meta,
+  .pipe-job,
+  .tool-name { font-size: 15px; }
+
+  .ident-blurb { font-size: 15.5px; }
+
+  .modal-header h2 { font-size: 17px; }
+
+  .ident-title { font-size: 24px; }
+}
+
+/* ─── Short viewports: fit without a vertical scrollbar ─────────────────────
+ * The base media queries only react to WIDTH, so a short container (e.g. the
+ * app embedded in a small box, or a laptop window once the browser chrome eats
+ * into the viewport) used to overflow vertically and get clipped. We KEEP the
+ * identity header, orb, caption and credits — we just undo the desktop type
+ * bump, tighten the vertical rhythm and let the height-capped orb shrink, so
+ * everything fits with comfortable margin. No opt-in needed.
+ *
+ * The single biggest space eater is the identity block (~180px at the desktop
+ * type scale), so this tier compacts it first. */
+@media (max-height: 780px) {
+  .topbar { padding: 14px 24px; }
+  .ident { gap: 5px; }
+  .ident-title { font-size: 20px; }
+  .ident-blurb { font-size: 13.5px; line-height: 1.4; }
+  .ident-meta { gap: 5px; font-size: 13px; }
+  .stage { padding: 12px 20px 16px; gap: 12px; }
+  .footer { padding: 8px 24px 10px; }
+  .circle { width: clamp(140px, min(38vw, 44vh), 300px); }
+}
+
+@media (max-height: 560px) {
+  .topbar { padding: 8px 16px; }
+  .ident-title { font-size: 17px; }
+  /* Below this, room is tight enough that the one-line blurb and the footer
+   * (a verbatim duplicate of the header's "Powered by" credit) are dropped so
+   * the title + credits still read; the rest of the header stays. */
+  .ident-blurb { display: none; }
+  .stage { padding: 8px 14px 10px; gap: 8px; }
+  .footer { display: none; }
+  .circle { width: clamp(120px, min(50vw, 46vh), 240px); }
+}
+
+/* ─── Digital-human avatar as full-viewport background ────────────────── */
+
+.avatar-stage {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  overflow: hidden;
+  background: #111;
+}
+
+.avatar-stage iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  pointer-events: none;
+}
diff --git a/src/pages/voice-overrides.css b/src/pages/voice-overrides.css
new file mode 100644
index 0000000..272536e
--- /dev/null
+++ b/src/pages/voice-overrides.css
@@ -0,0 +1,135 @@
+/* 实时语音对话页覆盖样式：
+   1) 圆球在内容区垂直+水平居中（原版 #app 是 100vh，在 DPM 页眉下会偏高）
+   2) 视觉识别：摄像头开关 / 预览 / 识别状态
+   3) 底部园区概览条（复用 bd-strip，样式来自 datascreen.css） */
+#app {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* stage 弹性撑满（页眉 + 页脚之外的剩余视窗），内部 flex 居中 orb-wrap */
+.stage {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ---- 圆球下方状态文字 ----
+   原版 --text-faint 是半透明白（为深色背景设计），在 DPM 浅蓝白背景下不可见。
+   改为 DPM 深蓝墨色，与页眉/概览条同源（--bd-ink），对比明显且不接近背景色。 */
+.circle-caption {
+  color: var(--bd-ink, #1d2c44);
+  font-size: 13px;
+  font-weight: 600;
+  opacity: 1;
+}
+.circle-caption.empty {
+  opacity: 0;
+}
+.circle-caption.error {
+  color: #b42318;
+  opacity: 1;
+}
+.circle-caption.muted {
+  color: #4a5b74;
+  opacity: 1;
+}
+
+/* ---- 视觉识别 UI ---- */
+.voice-cam-toggle {
+  position: fixed;
+  right: 18px;
+  top: 76px; /* DPM 页眉下方 */
+  z-index: 50;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border: 1px solid rgba(47, 107, 255, 0.35);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #1d2c44;
+  font-size: 12px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(29, 79, 216, 0.12);
+}
+.voice-cam-toggle:hover { border-color: #2f6bff; }
+.voice-cam-toggle.on { background: #2f6bff; color: #fff; border-color: #2f6bff; }
+
+/* 底部左侧摄像头实时窗口（放大，实时画面） */
+.voice-cam-pip {
+  position: fixed;
+  left: 18px;
+  bottom: 62px; /* 上移避开底部园区概览条（bd-strip 约 44px 高 + 间隙） */
+  z-index: 50;
+  width: 380px;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid rgba(47, 107, 255, 0.45);
+  box-shadow: 0 10px 28px rgba(29, 79, 216, 0.22);
+  background: #0d1117;
+}
+.voice-cam-pip video {
+  width: 100%;
+  height: 216px;
+  object-fit: cover;
+  display: block;
+  transform: scaleX(-1); /* 镜像自拍视角 */
+}
+.voice-cam-pip .voice-cam-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 12px;
+  color: #e6e8eb;
+  background: rgba(0, 0, 0, 0.6);
+}
+.voice-cam-pip .voice-cam-title {
+  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
+}
+.voice-cam-pip .voice-cam-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #7d8fa9;
+}
+.voice-cam-pip .voice-cam-dot.on { background: #17b26a; box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.25); }
+.voice-cam-pip .voice-cam-dot.face { background: #4cc2ff; box-shadow: 0 0 0 3px rgba(76, 194, 255, 0.25); }
+.voice-cam-pip .voice-cam-dot.trigger { background: #f79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.3); }
+
+/* 识别状态横幅（左下角预览上方） */
+.voice-vision-status {
+  position: fixed;
+  left: 18px;
+  bottom: 200px; /* 跟随预览上移 44px，保持相对位置 */
+  z-index: 50;
+  font-size: 12px;
+  color: #1d2c44;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(47, 107, 255, 0.25);
+  border-radius: 8px;
+  padding: 6px 10px;
+  box-shadow: 0 4px 12px rgba(29, 79, 216, 0.12);
+  line-height: 1.5;
+}
+.voice-vision-status b { color: #2f6bff; }
+
+/* 非安全上下文警告条 */
+.voice-secure-warn {
+  position: fixed;
+  top: 76px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  font-size: 12px;
+  color: #b42318;
+  background: #fef3f2;
+  border: 1px solid #fda29b;
+  border-radius: 8px;
+  padding: 6px 12px;
+  box-shadow: 0 4px 12px rgba(180, 35, 24, 0.12);
+}
+.voice-cam-pip.hidden { display: none; }
diff --git a/src/utils/pageNav.js b/src/utils/pageNav.js
index 8cc5f8c..d6594f6 100644
--- a/src/utils/pageNav.js
+++ b/src/utils/pageNav.js
@@ -12,6 +12,7 @@ export const PAGE_ORDER = [
   { path: '/', label: '数据大屏' },
   { path: '/twin', label: '数字孪生' },
   { path: '/ai', label: 'AI 助手' },
+  { path: '/voice', label: '语音对话' },
   { path: '/screen', label: '媒体轮播' },
 ];
 
diff --git a/src/voice/codec.js b/src/voice/codec.js
new file mode 100644
index 0000000..511ad9e
--- /dev/null
+++ b/src/voice/codec.js
@@ -0,0 +1,57 @@
+// @ts-check
+/**
+ * Pure, stateless helpers for the WebSocket realtime client: base64 <-> PCM
+ * conversion for the audio frames on the wire, transcript extraction from a
+ * `response.done` payload, and a tiny URL helper. Kept separate from the client
+ * so the protocol/state logic stays readable.
+ */
+
+/** @param {string} url */
+export function trimTrailingSlash(url) {
+  return url.endsWith("/") ? url.slice(0, -1) : url;
+}
+
+/**
+ * Pull the assistant transcript out of a `response.done` payload. The text
+ * lives in `response.output[].content[].transcript` (audio) or `.text`. Used as
+ * the source of truth for interrupted replies, where the dedicated
+ * `*.transcript.done` event may never arrive.
+ * @param {any} response
+ * @returns {string}
+ */
+export function extractResponseTranscript(response) {
+  const output = response?.output;
+  if (!Array.isArray(output)) return "";
+  /** @type {string[]} */
+  const parts = [];
+  for (const item of output) {
+    for (const part of item?.content ?? []) {
+      const text = part?.transcript ?? part?.text;
+      if (typeof text === "string" && text.trim()) parts.push(text.trim());
+    }
+  }
+  return parts.join(" ").trim();
+}
+
+/** @param {ArrayBuffer} buf */
+export function base64FromArrayBuffer(buf) {
+  const bytes = new Uint8Array(buf);
+  // Chunked encoding so we don't blow up the call stack on long buffers.
+  let binary = "";
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode.apply(null, /** @type {number[]} */ (
+      /** @type {unknown} */ (bytes.subarray(i, i + chunk))
+    ));
+  }
+  return btoa(binary);
+}
+
+/** @param {string} b64 */
+export function base64ToBytes(b64) {
+  const binary = atob(b64);
+  const len = binary.length;
+  const out = new Uint8Array(len);
+  for (let i = 0; i < len; i++) out[i] = binary.charCodeAt(i);
+  return out;
+}
diff --git a/src/voice/orb-visualizer.js b/src/voice/orb-visualizer.js
new file mode 100644
index 0000000..082f601
--- /dev/null
+++ b/src/voice/orb-visualizer.js
@@ -0,0 +1,98 @@
+// @ts-check
+/**
+ * Orb spectrum visualiser. Each animation frame it reads two AnalyserNodes (the
+ * mic input and the TTS output) and maps the low-frequency speech energy onto
+ * the orb's CSS custom properties:
+ *   - `--bar0`..`--bar4`   the 5-band level meter
+ *   - `--ai-audio-level`   the global "Reachy talks" glow / scale pulse
+ *
+ * The bottom of the FFT is where speech energy lives, so the band edges stay
+ * low — that keeps the bars dancing on voice rather than on noise. While the AI
+ * is speaking we source the bars from the OUTPUT analyser so the orb pulses with
+ * Reachy's voice instead of sitting dead while the user is silent.
+ */
+
+// Exported so the client can size its AnalyserNodes to match our buffer.
+export const VIS_FFT_SIZE = 256;
+const VIS_BAND_COUNT = 5;
+const VIS_BAND_EDGES = [2, 5, 9, 16, 28, 52];
+const VIS_ATTACK = 0.6; // weight for new sample on upswing (snappy)
+const VIS_RELEASE = 0.18; // weight for new sample on decay (gentle fade)
+
+export class OrbVisualiser {
+  /**
+   * @param {AnalyserNode} micAnalyser
+   * @param {AnalyserNode} outAnalyser
+   * @param {() => boolean} isAiSpeaking Source the bars from the AI output when
+   *   true, otherwise from the mic.
+   */
+  constructor(micAnalyser, outAnalyser, isAiSpeaking) {
+    this._mic = micAnalyser;
+    this._out = outAnalyser;
+    this._isAiSpeaking = isAiSpeaking;
+    this._buf = new Uint8Array(micAnalyser.frequencyBinCount);
+    this._bands = new Float32Array(VIS_BAND_COUNT);
+    this._aiLevel = 0;
+    /** @type {number | null} */
+    this._frame = null;
+  }
+
+  /** Begin the rAF loop (idempotent). */
+  start() {
+    if (this._frame !== null) return;
+    const root = document.documentElement;
+    const tick = () => {
+      this._frame = requestAnimationFrame(tick);
+      this._update(root);
+    };
+    this._frame = requestAnimationFrame(tick);
+  }
+
+  /** Stop the loop and clear the CSS vars so the orb returns to rest. */
+  stop() {
+    if (this._frame !== null) {
+      cancelAnimationFrame(this._frame);
+      this._frame = null;
+    }
+    const root = document.documentElement;
+    for (let i = 0; i < VIS_BAND_COUNT; i++) root.style.removeProperty(`--bar${i}`);
+    root.style.removeProperty("--ai-audio-level");
+  }
+
+  /** @param {HTMLElement} root */
+  _update(root) {
+    // Mic bars: split FFT into 5 log-ish bands, smooth, write CSS vars.
+    const source = this._isAiSpeaking() ? this._out : this._mic;
+    source.getByteFrequencyData(this._buf);
+
+    for (let b = 0; b < VIS_BAND_COUNT; b++) {
+      const lo = VIS_BAND_EDGES[b];
+      const hi = VIS_BAND_EDGES[b + 1];
+      let sum = 0;
+      let n = 0;
+      for (let i = lo; i < hi && i < this._buf.length; i++) {
+        sum += this._buf[i];
+        n += 1;
+      }
+      const target = n > 0 ? sum / (n * 255) : 0;
+      const prev = this._bands[b];
+      const k = target > prev ? VIS_ATTACK : VIS_RELEASE;
+      const next = prev + (target - prev) * k;
+      this._bands[b] = next;
+      root.style.setProperty(`--bar${b}`, next.toFixed(3));
+    }
+
+    // Global AI audio level: peak of the output analyser, used by the CSS to
+    // make the orb's glow / scale react to Reachy's voice.
+    this._out.getByteFrequencyData(this._buf);
+    let peak = 0;
+    const limit = Math.min(this._buf.length, VIS_BAND_EDGES[VIS_BAND_COUNT]);
+    for (let i = 0; i < limit; i++) {
+      if (this._buf[i] > peak) peak = this._buf[i];
+    }
+    const aiTarget = peak / 255;
+    const k = aiTarget > this._aiLevel ? VIS_ATTACK : VIS_RELEASE;
+    this._aiLevel = this._aiLevel + (aiTarget - this._aiLevel) * k;
+    root.style.setProperty("--ai-audio-level", this._aiLevel.toFixed(3));
+  }
+}
diff --git a/src/voice/s2s-ws-client.js b/src/voice/s2s-ws-client.js
new file mode 100644
index 0000000..a0d938e
--- /dev/null
+++ b/src/voice/s2s-ws-client.js
@@ -0,0 +1,1185 @@
+// @ts-check
+/**
+ * Minimal WebSocket client for the Hugging Face speech-to-speech load balancer.
+ *
+ * Two-step handshake (same /session route as the WebRTC client):
+ *
+ *   1. POST `<lb_url>/session` -> JSON `{ connect_url: wss://<compute>/v1/realtime?session_token=<JWT>, ... }`
+ *   2. Open a WebSocket directly on `connect_url` (no rewrite, unlike the WebRTC client).
+ *
+ * Once the socket is open we follow the OpenAI Realtime GA WebSocket
+ * protocol:
+ *
+ *   - Server pushes `session.created` immediately after upgrade.
+ *   - We send `session.update` (GA schema: `session.audio.{input,output}`,
+ *     `session.output_modalities`, ...).
+ *   - We stream mic audio as PCM16 16 kHz mono base64 chunks via
+ *     `input_audio_buffer.append`.
+ *   - The server pushes `response.output_audio.delta` (PCM16 24 kHz mono
+ *     base64) and transcript deltas.
+ *
+ * Audio is handled internally via two AudioWorklet processors so the
+ * client owns the full mic-in / speaker-out pipeline. The main app only
+ * sees high-level lifecycle events (`status`, `transcript`, `error`,
+ * `session`), the same shape as the WebRTC client.
+ *
+ * @typedef {"idle" | "creating-session" | "queued" | "your-turn" | "connecting" |
+ *           "connected" | "user-speaking" | "processing" | "ai-speaking" |
+ *           "closed" | "error"
+ * } WsStatus
+ *
+ * @typedef {Object} WsSessionInfo
+ * @property {string} sessionId
+ * @property {string} connectUrl
+ * @property {string} websocketUrl
+ * @property {string} sessionToken
+ * @property {number} pendingTimeoutS
+ * @property {string} [tier] Login tier from the session proxy ("anon"|"free"|"pro").
+ * @property {boolean} [limited] Whether this session is metered (heartbeat needed).
+ * @property {number} [heartbeatSec] Suggested heartbeat cadence in seconds.
+ * @property {number} [remainingSec] Daily budget left after this grant (display).
+ *
+ * @typedef {Object} WsClientOptions
+ * @property {string} [sessionUrl] URL to POST for the session handshake (returns
+ *   `{ connect_url, ... }`). Usually a same-origin proxy like `api/session` so the
+ *   load-balancer address stays server-side. Provide this OR `directUrl`.
+ * @property {string} [loadBalancerUrl] Load-balancer base URL. Legacy/direct
+ *   alternative to `sessionUrl`: the client POSTs `<lb>/session` itself. Prefer
+ *   `sessionUrl` so the LB address isn't exposed to the browser.
+ * @property {string} [directUrl] Full WebSocket URL of an s2s realtime endpoint
+ *   (e.g. `ws://localhost:8080/v1/realtime`). When set, the client skips the
+ *   session POST and dials it directly — no load balancer in between.
+ * @property {string} voice
+ * @property {string} instructions
+ * @property {MediaStream} [micStream] Live mic stream. Provide this OR `acquireMic`.
+ * @property {() => Promise<MediaStream>} [acquireMic] Lazily obtain the mic stream,
+ *   called only once a session is actually granted (after any queue wait). Lets the
+ *   caller prime mic permission up front but not hold the mic 'in use' indicator on
+ *   while waiting in line. Ignored if `micStream` is already set.
+ * @property {AudioContext} [audioContext] Pre-created (and resumed) context.
+ *   iOS Safari only lets an AudioContext start from within a user gesture, so
+ *   the caller creates/resumes it synchronously on the orb tap and hands it
+ *   here; otherwise it stays suspended (silent) after the mic/session awaits.
+ * @property {ToolDef[]} [tools] Function tools declared to the backend in the
+ *   initial `session.update`. The model decides when to call them; the caller
+ *   executes and replies via `sendToolOutput` + `requestResponse`.
+ * @property {NoiseGate} [noiseGate] Client-side noise gate applied to the mic
+ *   before it's sent. Tunable live via `setNoiseGate`.
+ *
+ * @typedef {Object} NoiseGate
+ * @property {boolean} enabled
+ * @property {number} thresholdDb Open threshold in dBFS (e.g. -45).
+ *
+ * @typedef {Object} ToolDef
+ * @property {"function"} type
+ * @property {string} name
+ * @property {string} description
+ * @property {object} parameters JSON Schema for the call arguments.
+ *
+ * @typedef {Object} TranscriptEvent
+ * @property {"user" | "assistant"} role
+ * @property {string} text
+ * @property {boolean} partial
+ */
+
+import {
+  base64FromArrayBuffer,
+  base64ToBytes,
+  extractResponseTranscript,
+  trimTrailingSlash,
+} from "./codec.js";
+import { OrbVisualiser, VIS_FFT_SIZE } from "./orb-visualizer.js";
+
+/** Build an Error carrying a `code` (and optional extra fields) so callers can
+ *  branch on the failure kind: "limit" | "queue-full" | "queue-expired" | "aborted".
+ *  @param {string} message @param {string} code @param {object} [extra] */
+function _codedError(message, code, extra) {
+  const err = /** @type {Error & { code?: string }} */ (new Error(message));
+  err.code = code;
+  if (extra) Object.assign(err, extra);
+  return err;
+}
+
+// The s2s pipeline runs internally at 16 kHz mono PCM. The WebRTC transport
+// resamples to 48 kHz for Opus, but the WebSocket transport emits the
+// native pipeline rate. We don't (can't) override it via `audio.output.format`
+// because the server's pydantic validator rejects the whole `session.update`
+// as soon as a sub-field shape it doesn't know about appears.
+const OUTPUT_SAMPLE_RATE = 16000;
+const MIC_CHUNK_MS = 40;
+
+export class S2sWsRealtimeClient extends EventTarget {
+  /** @param {WsClientOptions} options */
+  constructor(options) {
+    super();
+    /** @type {WsClientOptions} */
+    this.options = options;
+    /** Audio debug counters (see getAudioDebug). */
+    this._dbgDeltas = 0;
+    this._dbgBytes = 0;
+    this._dbgPlayed = 0;
+    /** @type {ToolDef[]} Function tools declared to the backend. */
+    this._tools = options.tools ?? [];
+    /** @type {string} Direct realtime WS URL (set => skip the LB session POST). */
+    this._directUrl = options.directUrl ?? "";
+    /** @type {string} Where to POST for the session handshake. Prefer the
+     *  explicit `sessionUrl`; fall back to `<loadBalancerUrl>/session` for callers
+     *  that still pass the LB address directly. */
+    this._sessionUrl = options.sessionUrl
+      ? options.sessionUrl
+      : options.loadBalancerUrl
+        ? `${trimTrailingSlash(options.loadBalancerUrl)}/session`
+        : "";
+    /** @type {(() => Promise<MediaStream>) | null} Lazy mic acquisition (post-grant). */
+    this._acquireMic = options.acquireMic ?? null;
+    /** @type {boolean} Set by close() to abort a queue wait in progress. */
+    this._closed = false;
+    /** @type {string} The active queue ticket id while waiting (else ""). */
+    this._queueId = "";
+    /** @type {(() => void) | null} Wakes the queue poll sleep early on close(). */
+    this._queueWake = null;
+    /** @type {ReturnType<typeof setTimeout> | 0} */
+    this._queueTimer = 0;
+    // Join gate: after waiting in line the caller must explicitly `join()` before
+    // we dial, so a slot isn't spent on someone who walked away. Resolved by
+    // join(), rejected on timeout (the LB reclaims the slot) or close().
+    /** @type {(() => void) | null} */
+    this._joinResolve = null;
+    /** @type {((err: Error) => void) | null} */
+    this._joinReject = null;
+    /** @type {ReturnType<typeof setTimeout> | 0} */
+    this._joinTimer = 0;
+    /** @type {NoiseGate} Mic noise gate; off by default. */
+    this._noiseGate = options.noiseGate ?? { enabled: false, thresholdDb: -45 };
+    /** @type {WebSocket | null} */
+    this._ws = null;
+    /** @type {AudioContext | null} */
+    this._ctx = null;
+    /** @type {MediaStreamAudioSourceNode | null} */
+    this._micSrc = null;
+    /** @type {AudioWorkletNode | null} */
+    this._captureNode = null;
+    /** @type {AudioWorkletNode | null} */
+    this._playbackNode = null;
+    /** @type {GainNode | null} */
+    this._captureSink = null;
+    /** @type {AnalyserNode | null} */
+    this._micAnalyser = null;
+    /** @type {AnalyserNode | null} */
+    this._outAnalyser = null;
+    /** @type {OrbVisualiser | null} */
+    this._visualiser = null;
+    /** @type {WsStatus} */
+    this._status = "idle";
+    this._aiSpeaking = false;
+    /** @type {Set<string>} response_ids that have actually played audio, so the
+     * UI can tell a barge-in cut (keep it) from a never-heard speculative
+     * response (drop it). */
+    this._audibleResponses = new Set();
+    /** @type {Map<string, string>} The CURRENT assistant transcript segment per
+     * response, accumulated from streamed deltas (reset on each segment's done). */
+    this._asstTranscriptByResp = new Map();
+    /** @type {Map<string, string>} Completed assistant transcript segments per
+     * response, space-joined. A single response can emit several
+     * `*.transcript.done` events; we concatenate them until response.done. */
+    this._asstFullByResp = new Map();
+    this._muted = false;
+    // ── Response lock ────────────────────────────────────────────────────
+    // The backend allows only ONE response in flight: creating a second while
+    // one is active fails with `conversation_already_has_active_response`. So
+    // we serialize response.create. `_openResponses` counts responses the
+    // server has confirmed (response.created) but not yet finished
+    // (response.done) — it's cumulative, so every create maps to one done.
+    // `_createInFlight` covers the window after we send a create but before its
+    // response.created echo. Any requestResponse() made while locked is queued
+    // and replayed, one at a time, as each response.done frees the slot.
+    this._openResponses = 0;
+    this._createInFlight = false;
+    /** @type {{ image?: string }[]} Pending response.create payloads, one per
+     * queued requestResponse(). A payload may carry an image to send just
+     * before its create (so the frame travels with the create, not eagerly). */
+    this._createQueue = [];
+    /** @type {Promise<void> | null} */
+    this._readyPromise = null;
+    this._sessionConfigured = false;
+    this._debug = (() => { try { return localStorage.getItem("s2s.debug") === "1"; } catch { return false; } })();
+  }
+
+  get status() {
+    return this._status;
+  }
+
+  /** @param {WsStatus} status */
+  _setStatus(status) {
+    if (this._status === status) return;
+    this._status = status;
+    this.dispatchEvent(new CustomEvent("status", { detail: { status } }));
+  }
+
+  /** Full assistant transcript so far for a response: the completed segments
+   *  plus the in-progress one, all space-joined.
+   *  @param {string} rid @returns {string} */
+  _asstDisplay(rid) {
+    const full = this._asstFullByResp.get(rid) || "";
+    const seg = this._asstTranscriptByResp.get(rid) || "";
+    if (!seg) return full;
+    return full ? `${full} ${seg}` : seg;
+  }
+
+  _markAudible() {
+    if (this._status === "ai-speaking") return;
+    if (this._status === "closed" || this._status === "error") return;
+    this._setStatus("ai-speaking");
+  }
+
+  /**
+   * Full handshake. Resolves once the WS is open AND the audio pipeline is
+   * ready to send/receive samples.
+   * @returns {Promise<void>}
+   */
+  async connect() {
+    if (this._ws) throw new Error("Already connected");
+
+    let connectUrl;
+    if (this._directUrl) {
+      // Direct mode: no load balancer, no /session POST — dial the realtime
+      // endpoint straight away (e.g. a local s2s server).
+      connectUrl = this._directUrl;
+      this._setStatus("connecting");
+    } else {
+      if (!this._sessionUrl) {
+        throw new Error("No session endpoint or direct URL configured");
+      }
+      this._setStatus("creating-session");
+      const { grant, waited } = await this._createSessionOrQueue();
+      if (this._closed) throw _codedError("connect aborted", "aborted");
+      // If we waited in line, don't dial until the user explicitly joins — this
+      // keeps a freed slot from being spent on someone who stepped away, and the
+      // click is a fresh gesture (re-arms the AudioContext on iOS).
+      if (waited) {
+        await this._awaitJoin(grant);
+        if (this._closed) throw _codedError("connect aborted", "aborted");
+      }
+      this.dispatchEvent(new CustomEvent("session", { detail: { info: grant } }));
+      connectUrl = grant.connectUrl;
+      this._setStatus("connecting");
+    }
+
+    // Acquire the mic now — only once a slot is actually ours. The caller primed
+    // permission up front, so this is silent and the 'in use' indicator lights
+    // only for a real, connecting session (never during a queue wait).
+    if (!this.options.micStream && this._acquireMic) {
+      this.options.micStream = await this._acquireMic();
+    }
+
+    // Spin up the AudioContext + worklets in parallel with the WS dial.
+    const audioReady = this._setupAudio();
+    const wsReady = this._openWebSocket(connectUrl);
+    await Promise.all([audioReady, wsReady]);
+  }
+
+  /**
+   * POST the session handshake; if the pool is busy, wait in the queue (polling
+   * position) until a slot is claimed. Resolves to a grant plus whether we had to
+   * wait (which decides if an explicit join is required before dialing).
+   * @returns {Promise<{ grant: WsSessionInfo, waited: boolean }>}
+   */
+  async _createSessionOrQueue() {
+    const first = await this._postSession();
+    if (first.state === "queued") {
+      this._setStatus("queued");
+      const grant = await this._pollQueue(first);
+      return { grant, waited: true };
+    }
+    return { grant: first.grant, waited: false };
+  }
+
+  /**
+   * Hold at the front of the line until the user clicks join (resolves the gate)
+   * or the grant lapses. Announces "your-turn" + a deadline the UI counts down.
+   * @param {WsSessionInfo} grant
+   * @returns {Promise<void>}
+   */
+  _awaitJoin(grant) {
+    // The LB reclaims an unclaimed slot at its pending timeout; expire the gate a
+    // touch earlier so we never dial a session the LB just reaped.
+    const windowS = Math.max(3, (grant.pendingTimeoutS || 60) - 3);
+    this._setStatus("your-turn");
+    this.dispatchEvent(
+      new CustomEvent("ready-to-join", { detail: { info: grant, expiresSec: windowS } }),
+    );
+    return new Promise((resolve, reject) => {
+      this._joinResolve = resolve;
+      this._joinReject = reject;
+      this._joinTimer = setTimeout(() => {
+        this._joinResolve = null;
+        this._joinReject = null;
+        reject(_codedError("Your spot expired", "join-expired"));
+      }, windowS * 1000);
+    });
+  }
+
+  /** Accept the held slot and let connect() proceed to dial. Called from the
+   *  "Join now" click, so it's a user gesture: re-resume the AudioContext, which
+   *  iOS may have suspended while we waited. */
+  join() {
+    if (this._joinTimer) {
+      clearTimeout(this._joinTimer);
+      this._joinTimer = 0;
+    }
+    try {
+      void this.options.audioContext?.resume();
+    } catch {
+      // best-effort; _setupAudio resumes again
+    }
+    const resolve = this._joinResolve;
+    this._joinResolve = null;
+    this._joinReject = null;
+    resolve?.();
+  }
+
+  /**
+   * POST /session once. Returns either a granted session or a queue ticket.
+   * @returns {Promise<{ state: "granted", grant: WsSessionInfo } | { state: "queued", queueId: string, position: number, pollIntervalS: number }>}
+   */
+  async _postSession() {
+    const url = this._sessionUrl;
+    console.log("[ws] POST", url);
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (response.status === 402) {
+      // The session proxy refused: today's per-tier time budget is spent. Surface
+      // it as a typed error so the UI shows the limit modal, not a crash.
+      const body = await response.json().catch(() => ({}));
+      throw _codedError("Daily conversation limit reached", "limit", { tier: body?.tier });
+    }
+    if (response.status === 503) {
+      const body = await response.json().catch(() => ({}));
+      if (body?.state === "at_capacity") {
+        throw _codedError("The queue is full — try again shortly.", "queue-full");
+      }
+      throw new Error("/session failed (503)");
+    }
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`/session failed (${response.status}): ${text}`);
+    }
+    const json = await response.json();
+    if (json.state === "queued") {
+      return {
+        state: "queued",
+        queueId: json.queue_id,
+        position: json.position,
+        pollIntervalS: json.poll_interval_s,
+      };
+    }
+    return { state: "granted", grant: this._parseGrant(json) };
+  }
+
+  /**
+   * Poll the waiting queue until this ticket claims a slot. Emits `queue` events
+   * ({ position }) as the line advances. Throws on limit (402), expiry (404), or
+   * close(). Transient network/5xx blips are ignored and retried next tick.
+   * @param {{ queueId: string, position: number, pollIntervalS: number }} ticket
+   * @returns {Promise<WsSessionInfo>}
+   */
+  async _pollQueue(ticket) {
+    const intervalMs = Math.max(1, ticket.pollIntervalS || 2) * 1000;
+    this._queueId = ticket.queueId;
+    this._emitQueue(ticket.position);
+
+    while (true) {
+      await this._queueSleep(intervalMs);
+      if (this._closed) throw _codedError("queue wait aborted", "aborted");
+
+      let response;
+      try {
+        response = await fetch(`api/queue/${encodeURIComponent(this._queueId)}`, {
+          headers: { "Content-Type": "application/json" },
+        });
+      } catch {
+        continue; // network blip — keep our place, retry next tick
+      }
+
+      if (response.status === 402) {
+        const body = await response.json().catch(() => ({}));
+        throw _codedError("Daily conversation limit reached", "limit", { tier: body?.tier });
+      }
+      if (response.status === 404) {
+        throw _codedError("Queue timed out", "queue-expired");
+      }
+      if (!response.ok) continue; // 502/503 — transient, retry
+
+      const json = await response.json().catch(() => null);
+      if (!json) continue;
+      if (json.state === "queued") {
+        this._emitQueue(json.position);
+        continue;
+      }
+      // Reached the front and claimed a slot.
+      this._queueId = "";
+      return this._parseGrant(json);
+    }
+  }
+
+  /** @param {number} position */
+  _emitQueue(position) {
+    this.dispatchEvent(
+      new CustomEvent("queue", { detail: { position, queueId: this._queueId } }),
+    );
+  }
+
+  /** A sleep that close() can cut short so a queued client tears down promptly.
+   *  @param {number} ms */
+  _queueSleep(ms) {
+    return new Promise((resolve) => {
+      this._queueWake = resolve;
+      this._queueTimer = setTimeout(() => {
+        this._queueWake = null;
+        resolve();
+      }, ms);
+    });
+  }
+
+  /** @param {any} json @returns {WsSessionInfo} */
+  _parseGrant(json) {
+    return {
+      sessionId: json.session_id,
+      connectUrl: json.connect_url,
+      websocketUrl: json.websocket_url,
+      sessionToken: json.session_token,
+      pendingTimeoutS: json.pending_timeout_s,
+      tier: json.tier,
+      limited: json.limited,
+      heartbeatSec: json.heartbeatSec,
+      remainingSec: json.remainingSec,
+    };
+  }
+
+  async _setupAudio() {
+    // Prefer a context the caller already created + resumed inside the tap
+    // gesture (required on iOS). Fall back to creating one here for callers
+    // that don't (desktop is lenient about the gesture timing).
+    // Most desktops give us 48 kHz, mobiles can give 44.1/24/16 kHz; the
+    // capture worklet handles any rate (linear interp fallback).
+    const ctx = this.options.audioContext ?? new AudioContext({ latencyHint: "interactive" });
+    this._ctx = ctx;
+
+    // Resume if still suspended. This is best-effort here — on iOS the resume
+    // that actually counts is the one the caller did synchronously on tap.
+    if (ctx.state === "suspended") {
+      try {
+        await ctx.resume();
+      } catch (err) {
+        console.warn("[ws] AudioContext resume failed:", err);
+      }
+    }
+
+    // The worklets live at the repo root, one level up from this module.
+    // ?v=2 busts the browser cache so the fixed (unmuted) playback worklet
+    // always loads instead of a stale muted copy.
+    const base = window.VOICE_WORKLETS_BASE || "/voice-worklets/";
+    await ctx.audioWorklet.addModule(base + "mic-capture.js?v=3");
+    await ctx.audioWorklet.addModule(base + "audio-playback.js?v=3");
+
+    const captureNode = new AudioWorkletNode(ctx, "mic-capture", {
+      numberOfInputs: 1,
+      numberOfOutputs: 0,
+      processorOptions: { chunkMs: MIC_CHUNK_MS },
+    });
+    captureNode.port.onmessage = (e) => {
+      const data = e.data;
+      if (data instanceof ArrayBuffer) {
+        this._onMicChunk(data);
+      } else if (data?.kind === "level") {
+        // Raw pre-gate mic RMS for the Settings meter.
+        this.dispatchEvent(new CustomEvent("input-level", { detail: { rms: data.rms } }));
+      }
+    };
+    // Push the initial gate config now that the worklet exists.
+    captureNode.port.postMessage({ kind: "gate", ...this._noiseGate });
+    this._captureNode = captureNode;
+
+    const micSrc = ctx.createMediaStreamSource(this.options.micStream);
+    micSrc.connect(captureNode);
+    this._micSrc = micSrc;
+
+    // Mic analyser: tap the mic in parallel with the worklet so we get the
+    // raw (un-resampled, un-clipped) signal for the visualiser.
+    const micAnalyser = ctx.createAnalyser();
+    micAnalyser.fftSize = VIS_FFT_SIZE;
+    micAnalyser.smoothingTimeConstant = 0;
+    micSrc.connect(micAnalyser);
+    this._micAnalyser = micAnalyser;
+
+    const playbackNode = new AudioWorkletNode(ctx, "audio-playback", {
+      numberOfInputs: 0,
+      numberOfOutputs: 1,
+      outputChannelCount: [1],
+    });
+    playbackNode.port.postMessage({ kind: "config", inputRate: OUTPUT_SAMPLE_RATE, muted: this._playbackMuted === true });
+    playbackNode.port.onmessage = (e) => this._onPlaybackMessage(e.data);
+
+    // Output analyser sits between the playback worklet and the speakers.
+    const outAnalyser = ctx.createAnalyser();
+    outAnalyser.fftSize = VIS_FFT_SIZE;
+    outAnalyser.smoothingTimeConstant = 0.3;
+    playbackNode.connect(outAnalyser);
+    outAnalyser.connect(ctx.destination);
+    this._outAnalyser = outAnalyser;
+    this._playbackNode = playbackNode;
+
+    this._visualiser = new OrbVisualiser(micAnalyser, outAnalyser, () => this._aiSpeaking);
+    this._visualiser.start();
+  }
+
+  /** @param {string} connectUrl */
+  _openWebSocket(connectUrl) {
+    return new Promise((resolve, reject) => {
+      const ws = new WebSocket(connectUrl);
+      ws.binaryType = "arraybuffer";
+      this._ws = ws;
+
+      const onceOpen = () => {
+        ws.removeEventListener("open", onceOpen);
+        ws.removeEventListener("error", onceErr);
+        resolve();
+      };
+      const onceErr = (e) => {
+        ws.removeEventListener("open", onceOpen);
+        ws.removeEventListener("error", onceErr);
+        reject(new Error(`WebSocket failed to open: ${e?.type ?? "error"}`));
+      };
+      ws.addEventListener("open", onceOpen);
+      ws.addEventListener("error", onceErr);
+
+      ws.addEventListener("message", (e) => this._onWsMessage(e.data));
+      ws.addEventListener("close", (e) => this._onWsClose(e));
+      ws.addEventListener("error", (e) => {
+        console.error("[ws] socket error", e);
+      });
+    });
+  }
+
+  /**
+   * @param {{ kind: string; queuedMs?: number; played?: number }} data
+   */
+  _onPlaybackMessage(data) {
+    if (data?.kind === "underrun") {
+      // Server stopped sending audio mid-response. Most likely the turn
+      // ended cleanly (a response.done usually arrives just before/after
+      // this). We let the state machine fall back to "connected" via the
+      // response.done event handler.
+    } else if (data?.kind === "stats") {
+      if (typeof data.played === "number") this._dbgPlayed = data.played;
+      if (typeof data.received === "number") this._dbgReceived = data.received;
+      if (typeof data.outPeak === "number") this._dbgOutPeak = data.outPeak;
+    }
+  }
+
+  /**
+   * Audio pipeline debug readout for the status overlay.
+   * @returns {{ deltas: number, bytes: number, played: number, ctx: string, ws: number }}
+   */
+  getAudioDebug() {
+    return {
+      deltas: this._dbgDeltas,
+      bytes: this._dbgBytes,
+      received: this._dbgReceived ?? 0,
+      played: this._dbgPlayed,
+      peak: this._dbgPeak ?? 0,
+      outPeak: this._dbgOutPeak ?? 0,
+      ctx: this._ctx ? this._ctx.state : "none",
+      ws: this._ws ? this._ws.readyState : -1,
+    };
+  }
+
+  /**
+   * Mic worklet just sent us a ~40 ms PCM16 16 kHz mono chunk.
+   * Base64-encode and forward via the WS.
+   * @param {ArrayBuffer} pcm16Buffer
+   */
+  _onMicChunk(pcm16Buffer) {
+    if (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;
+    if (!this._sessionConfigured) return; // Server rejects audio before session.update.
+    if (this._muted) return;
+    const b64 = base64FromArrayBuffer(pcm16Buffer);
+    this._send({ type: "input_audio_buffer.append", audio: b64 });
+  }
+
+  /**
+   * @param {string | ArrayBuffer | Blob} raw
+   */
+  async _onWsMessage(raw) {
+    let text;
+    if (typeof raw === "string") {
+      text = raw;
+    } else if (raw instanceof ArrayBuffer) {
+      text = new TextDecoder("utf-8").decode(raw);
+    } else if (raw instanceof Blob) {
+      text = await raw.text();
+    } else {
+      return;
+    }
+
+    let event;
+    try {
+      event = JSON.parse(text);
+    } catch {
+      return;
+    }
+
+    const type = event?.type;
+    if (typeof type !== "string") return;
+    // Opt-in event tracing for diagnosing turn/transcript issues. Enable with
+    // `localStorage.setItem("s2s.debug", "1")` in the browser console.
+    if (this._debug) {
+      const extra = type.startsWith("conversation.item.input_audio_transcription")
+        ? ` item=${event.item_id} ci=${event.content_index} ${event.delta ?? event.transcript ?? ""}`
+        : type.startsWith("response.")
+          ? ` resp=${event.response_id ?? event.response?.id ?? ""} status=${event.response?.status ?? ""} ${event.transcript ?? ""}`
+          : "";
+      console.debug(`[ws] ${type}${extra}`);
+    }
+
+    switch (type) {
+      case "session.created":
+        // Server-side defaults for the s2s pipeline are already what we
+        // want (server_vad, whisper-1 transcription, PCM16 16k in / 24k
+        // out). We only push the user-tunable bits: voice + instructions.
+        this._sendSessionUpdate();
+        this._sessionConfigured = true;
+        if (this._status === "connecting") this._setStatus("connected");
+        break;
+
+      case "session.updated":
+        // Acknowledged by server, nothing to do.
+        break;
+
+      case "input_audio_buffer.speech_started":
+        // User started speaking — stop any audio still playing OR queued, every
+        // time. We clear unconditionally (not just when `_aiSpeaking`): after a
+        // reply or a tool result the worklet's ring buffer can still be draining
+        // even though we already flipped `_aiSpeaking` off, and that tail would
+        // otherwise keep playing over the user's barge-in.
+        this._playbackNode?.port.postMessage({ kind: "clear" });
+        this._aiSpeaking = false;
+        this._setStatus("user-speaking");
+        break;
+
+      case "input_audio_buffer.speech_stopped":
+        if (this._status === "user-speaking") this._setStatus("processing");
+        break;
+
+      case "response.created":
+        // A response now owns the slot — count it and clear our create guard
+        // (this confirms either our create or a server-initiated one).
+        this._openResponses++;
+        this._createInFlight = false;
+        if (this._status === "connected" || this._status === "user-speaking") {
+          this._setStatus("processing");
+        }
+        break;
+
+      case "response.output_item.added":
+        if (this._status === "connected" || this._status === "user-speaking") {
+          this._setStatus("processing");
+        }
+        break;
+
+      case "response.audio.delta":
+      case "response.output_audio.delta": {
+        this._pushAudioDelta(event.delta);
+        const rid = event.response_id ?? event.response?.id;
+        if (rid) this._audibleResponses.add(rid);
+        if (!this._aiSpeaking) {
+          this._aiSpeaking = true;
+          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.done": {
+        this._aiSpeaking = false;
+        // This response freed the slot (completion OR cancellation both arrive
+        // as response.done). Decrement and, if a create was waiting, replay it.
+        this._openResponses = Math.max(0, this._openResponses - 1);
+        if (this._status === "ai-speaking" || this._status === "processing") {
+          this._setStatus("connected");
+        }
+        // A response closes here for BOTH normal completion and cancellation
+        // (the s2s server signals a speculative-turn interrupt as
+        // `response.done` with status "cancelled" — there is no separate
+        // `response.cancelled` event). Surface the id + status so the UI can
+        // drop a cancelled response's transcript and commit a completed one.
+        const status = event.response?.status ?? "completed";
+        const responseId = event.response?.id ?? "";
+        // Did this response ever play audio? Distinguishes a barge-in cut (the
+        // user heard part of it) from a speculative response that never played.
+        const audible = responseId ? this._audibleResponses.has(responseId) : false;
+        this._audibleResponses.delete(responseId);
+        // Pull whatever transcript the response carries, falling back to the
+        // segments we concatenated from the `*.transcript.done` events (plus any
+        // in-progress delta). For an interrupted reply the response payload may
+        // be empty, so this is the last chance to capture the text.
+        const transcript =
+          extractResponseTranscript(event.response) ||
+          this._asstDisplay(responseId) ||
+          "";
+        // Response finished — clear both transcript accumulators for it.
+        this._asstTranscriptByResp.delete(responseId);
+        this._asstFullByResp.delete(responseId);
+        this.dispatchEvent(new CustomEvent("response-finished", {
+          detail: { responseId, status, audible, transcript },
+        }));
+        // The slot is free now — replay a queued create (e.g. a tool follow-up
+        // that arrived while this response was still running).
+        this._flushQueuedCreate();
+        break;
+      }
+
+      case "response.function_call_arguments.done": {
+        const name = typeof event.name === "string" ? event.name : "";
+        const args = typeof event.arguments === "string" ? event.arguments : "{}";
+        const callId = typeof event.call_id === "string" ? event.call_id : "";
+        if (name) {
+          this.dispatchEvent(new CustomEvent("toolcall", {
+            detail: { name, arguments: args, callId },
+          }));
+        } else {
+          // A nameless call can't be executed, so no function_call_output is
+          // ever sent and the model would wait forever for a result. The
+          // backend shouldn't emit these; warn loudly rather than stall silently.
+          console.warn(`[ws] function_call_arguments.done with no name (call_id=${callId}); cannot run tool — turn may stall`);
+        }
+        break;
+      }
+
+      case "conversation.item.input_audio_transcription.delta": {
+        const delta = typeof event.delta === "string" ? event.delta : "";
+        if (delta) {
+          // `itemId` is REUSED across a speculative continuation, so the UI
+          // groups both segments into one message. The delta carries the full
+          // cumulative transcript so far (not an increment).
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: {
+                role: "user",
+                text: delta,
+                partial: true,
+                itemId: typeof event.item_id === "string" ? event.item_id : "",
+              },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "conversation.item.input_audio_transcription.completed": {
+        const transcript = typeof event.transcript === "string" ? event.transcript : "";
+        if (transcript) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: {
+                role: "user",
+                text: transcript,
+                partial: false,
+                itemId: typeof event.item_id === "string" ? event.item_id : "",
+              },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "response.audio_transcript.delta":
+      case "response.output_audio_transcript.delta": {
+        // Stream the assistant transcript live: accumulate the incremental
+        // deltas and push the running text to the UI. Every transcribe event we
+        // receive reaches the conversation, so an interrupted reply already has
+        // its partial text even if the `.done` never fires.
+        this._markAudible();
+        const rid = typeof event.response_id === "string" ? event.response_id : "";
+        const delta = typeof event.delta === "string" ? event.delta : "";
+        if (delta) {
+          this._asstTranscriptByResp.set(rid, (this._asstTranscriptByResp.get(rid) || "") + delta);
+          // Show completed segments + the segment streaming in right now.
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: { role: "assistant", text: this._asstDisplay(rid), partial: true, responseId: rid },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "response.audio_transcript.done":
+      case "response.output_audio_transcript.done": {
+        const rid = typeof event.response_id === "string" ? event.response_id : "";
+        // This is ONE completed segment. A response can emit several; concatenate
+        // them, space-separated, until response.done clears the accumulator.
+        const segment =
+          (typeof event.transcript === "string" && event.transcript) ||
+          this._asstTranscriptByResp.get(rid) ||
+          "";
+        this._asstTranscriptByResp.delete(rid); // segment finished; next one starts fresh
+        if (segment) {
+          const prev = this._asstFullByResp.get(rid) || "";
+          this._asstFullByResp.set(rid, prev ? `${prev} ${segment}` : segment);
+        }
+        const full = this._asstFullByResp.get(rid) || "";
+        if (full) {
+          this.dispatchEvent(
+            new CustomEvent("transcript", {
+              detail: { role: "assistant", text: full, partial: false, responseId: rid },
+            }),
+          );
+        }
+        break;
+      }
+
+      case "error": {
+        const err = event.error;
+        console.error("[ws] server error:", err);
+        // The "another response is already active" race: our optimistic create
+        // collided with a still-running response. Don't surface it — clear the
+        // in-flight guard and re-queue, so the create replays on the next
+        // response.done (never retried immediately, which would just collide
+        // again).
+        if (err?.type === "conversation_already_has_active_response" ||
+            err?.code === "conversation_already_has_active_response") {
+          if (this._createInFlight) {
+            this._createInFlight = false;
+            // Re-queue a BARE create: any image on the original payload was
+            // already sent before this (rejected) create, so don't resend it.
+            this._createQueue.push({});
+          }
+          break;
+        }
+        // Every other server error is non-fatal: surface it for logging but
+        // NEVER tear the socket down. Only transport failures (close / failed
+        // open) are fatal, and those come through their own paths.
+        this.dispatchEvent(
+          new CustomEvent("server-error", { detail: { error: new Error(err?.message ?? "Server error") } }),
+        );
+        break;
+      }
+    }
+  }
+
+  /** @param {string} b64 */
+  _pushAudioDelta(b64) {
+    if (!this._playbackNode) return;
+    if (!b64) return;
+    this._dbgDeltas += 1;
+    this._dbgBytes += (b64.length * 3) >> 2; // approx decoded bytes
+    const bytes = base64ToBytes(b64);
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const samples = new Float32Array(bytes.byteLength / 2);
+    let peak = 0;
+    for (let i = 0; i < samples.length; i++) {
+      const s = view.getInt16(i * 2, true);
+      samples[i] = s < 0 ? s / 0x8000 : s / 0x7fff;
+      const a = samples[i] < 0 ? -samples[i] : samples[i];
+      if (a > peak) peak = a;
+    }
+    this._dbgPeak = Math.max(this._dbgPeak || 0, peak);
+    // Clone (no transfer list): structured cloning across the main->worklet
+    // boundary is more robust than transferring the buffer — some browser
+    // versions mis-shape the received object and the worklet would drop it.
+    this._playbackNode.port.postMessage({ kind: "audio", samples });
+  }
+
+  /** @param {CloseEvent} ev */
+  _onWsClose(ev) {
+    console.log("[ws] socket closed:", ev.code, ev.reason);
+    if (this._status === "closed" || this._status === "error") return;
+    if (ev.code === 1000) {
+      this._setStatus("closed");
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("error", {
+          detail: { error: new Error(`WebSocket closed (${ev.code}) ${ev.reason || ""}`.trim()) },
+        }),
+      );
+      this._setStatus("error");
+    }
+  }
+
+  _sendSessionUpdate() {
+    // Minimal payload: only the bits the user is allowed to configure.
+    // The s2s server already defaults to server_vad, whisper-1
+    // transcription, 16 kHz PCM input and 24 kHz PCM output, so we don't
+    // need (and must not send) `audio.input.format`, `audio.input.transcription`,
+    // `audio.input.turn_detection` or `audio.output.format`: the pydantic
+    // validator on the server rejects the whole event if any unknown or
+    // future-shaped sub-field shows up.
+    /** @type {Record<string, any>} */
+    const session = {
+      type: "realtime",
+      instructions: this.options.instructions,
+      audio: {
+        output: { voice: this.options.voice },
+      },
+    };
+    // Tools are declared here; the backend already accepts them in
+    // session.update and emits response.function_call_arguments.done when the
+    // model decides to call one. Only include the keys when we actually have
+    // tools — the server's pydantic validator is strict about shapes.
+    if (this._tools.length) {
+      session.tools = this._tools;
+      session.tool_choice = "auto";
+    }
+    this._send({ type: "session.update", session });
+  }
+
+  /** Update voice/instructions on a live session without tearing down. */
+  /** @param {{ voice?: string; instructions?: string }} patch */
+  updateSession(patch) {
+    /** @type {Record<string, any>} */
+    const session = { type: "realtime" };
+    if (patch.instructions) session.instructions = patch.instructions;
+    if (patch.voice) session.audio = { output: { voice: patch.voice } };
+    if (Object.keys(session).length > 1) {
+      this._send({ type: "session.update", session });
+    }
+  }
+
+  /**
+   * Replace the declared tool set on a live session (e.g. the user flipped a
+   * tool switch mid-conversation). Always sends `tools` — an empty array
+   * clears them — so toggling the last tool off actually removes it.
+   * @param {ToolDef[]} tools
+   */
+  setTools(tools) {
+    this._tools = tools;
+    this._send({
+      type: "session.update",
+      session: { type: "realtime", tools, tool_choice: tools.length ? "auto" : "none" },
+    });
+  }
+
+  /**
+   * Return a tool's result to the model. Pairs with the `toolcall` event's
+   * `callId`. Caller follows this with `requestResponse()` so the model speaks.
+   * @param {string} callId
+   * @param {string} output Plain text / JSON string the model will read.
+   */
+  sendToolOutput(callId, output) {
+    if (!callId) return; // Can't target a result without the call id.
+    this._send({
+      type: "conversation.item.create",
+      item: { type: "function_call_output", call_id: callId, output },
+    });
+  }
+
+  /**
+   * Add an image to the conversation as user content, so the vision-language
+   * model can see it (used by the camera tool). `dataUrl` is a
+   * `data:image/jpeg;base64,...` string.
+   * @param {string} dataUrl
+   */
+  sendUserImage(dataUrl) {
+    this._send({
+      type: "conversation.item.create",
+      item: {
+        type: "message",
+        role: "user",
+        content: [{ type: "input_image", image_url: dataUrl }],
+      },
+    });
+  }
+
+  /**
+   * Add a text message to the conversation as user content, and trigger a
+   * response. Use this to type messages instead of speaking. The text is
+   * sent as a user message and the model generates a reply.
+   * @param {string} text
+   */
+  sendUserText(text) {
+    if (!text) return;
+    this._send({
+      type: "conversation.item.create",
+      item: {
+        type: "message",
+        role: "user",
+        content: [{ type: "input_text", text }],
+      },
+    });
+    this.requestResponse();
+  }
+
+  /**
+   * Ask the model to generate a response now (after feeding tool results).
+   * Serialized: if a response is already in flight we queue this request and
+   * replay it once the active response finishes, so we never trip the
+   * backend's `conversation_already_has_active_response` guard.
+   *
+   * @param {{ image?: string }} [opts] Optional `image` (a data URL) sent as a
+   *   user `input_image` immediately before this response.create — so the frame
+   *   travels with the create (and is deferred together with it if queued),
+   *   rather than being added to the conversation eagerly. Used by the camera
+   *   tool so the model sees the snapshot in the response it's about to speak.
+   */
+  requestResponse(opts = {}) {
+    if (this._responseActive()) {
+      this._createQueue.push(opts);
+      if (this._debug) console.debug(`[ws] response.create queued (a response is active); pending=${this._createQueue.length}`);
+      return;
+    }
+    this._createResponseNow(opts);
+  }
+
+  /** True while a response occupies the single backend slot. */
+  _responseActive() {
+    return this._openResponses > 0 || this._createInFlight;
+  }
+
+  /** Send a response.create immediately and arm the in-flight guard. Any image
+   *  on the payload is added as user content right before the create.
+   *  @param {{ image?: string }} [opts] */
+  _createResponseNow(opts = {}) {
+    if (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;
+    if (opts.image) this.sendUserImage(opts.image);
+    this._createInFlight = true;
+    this._send({ type: "response.create" });
+  }
+
+  /** Replay one queued response.create if the slot is now free. Called on every
+   *  response.done, so queued creates drain one-per-completion. */
+  _flushQueuedCreate() {
+    if (this._createQueue.length > 0 && !this._responseActive()) {
+      const opts = this._createQueue.shift();
+      if (this._debug) console.debug(`[ws] replaying queued response.create; remaining=${this._createQueue.length}`);
+      this._createResponseNow(opts);
+    }
+  }
+
+  /**
+   * 实时更新噪声门阈值（settings 滑杆/圆环拖拽）。
+   * @param {number} thresholdDb
+   */
+  setNoiseGate(thresholdDb) {
+    this._noiseGate = { enabled: thresholdDb > -66, thresholdDb };
+    if (this._captureNode) this._captureNode.port.postMessage({ kind: "gate", ...this._noiseGate });
+  }
+
+  /** @param {boolean} muted */
+  setMuted(muted) {
+    this._muted = muted;
+  }
+
+  /**
+   * Mute/unmute the page's own TTS playback. When the Live Avatar's WebRTC
+   * stream carries the same audio (digital human running), mute the page to
+   * avoid double audio; otherwise (no avatar) keep it playing.
+   * @param {boolean} muted
+   */
+  setPlaybackMuted(muted) {
+    this._playbackMuted = muted;
+    if (this._playbackNode) {
+      this._playbackNode.port.postMessage({ kind: "config", inputRate: OUTPUT_SAMPLE_RATE, muted });
+    }
+  }
+
+  /**
+   * Update the mic noise gate live (the user moved the Settings cursor).
+   * @param {NoiseGate} gate
+   */
+  setNoiseGate(gate) {
+    this._noiseGate = gate;
+    this._captureNode?.port.postMessage({ kind: "gate", ...gate });
+  }
+
+  /** @param {Record<string, unknown>} event */
+  _send(event) {
+    if (!this._ws || this._ws.readyState !== WebSocket.OPEN) return;
+    this._ws.send(JSON.stringify(event));
+  }
+
+  async close() {
+    // Abort a queue wait in progress: flag it and wake the poll sleep so
+    // `_pollQueue` throws "aborted" and connect() unwinds cleanly.
+    this._closed = true;
+    if (this._queueWake) {
+      clearTimeout(this._queueTimer);
+      const wake = this._queueWake;
+      this._queueWake = null;
+      wake();
+    }
+    if (this._joinTimer) {
+      clearTimeout(this._joinTimer);
+      this._joinTimer = 0;
+    }
+    if (this._joinReject) {
+      const reject = this._joinReject;
+      this._joinResolve = null;
+      this._joinReject = null;
+      reject(_codedError("join aborted", "aborted"));
+    }
+    this._visualiser?.stop();
+    this._visualiser = null;
+    try {
+      if (this._ws && this._ws.readyState <= WebSocket.OPEN) {
+        this._ws.close(1000, "client closed");
+      }
+    } catch {
+      // ignored
+    }
+    this._ws = null;
+
+    try {
+      this._captureNode?.port.close?.();
+    } catch {
+      // ignored
+    }
+    try {
+      this._micSrc?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._captureNode?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._micAnalyser?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._outAnalyser?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      this._playbackNode?.disconnect();
+    } catch {
+      // ignored
+    }
+    try {
+      await this._ctx?.close();
+    } catch {
+      // ignored
+    }
+    this._ctx = null;
+    this._captureNode = null;
+    this._playbackNode = null;
+    this._micSrc = null;
+    this._micAnalyser = null;
+    this._outAnalyser = null;
+    this._setStatus("closed");
+  }
+}
diff --git a/src/voice/useVisionDetection.js b/src/voice/useVisionDetection.js
new file mode 100644
index 0000000..28d3e52
--- /dev/null
+++ b/src/voice/useVisionDetection.js
@@ -0,0 +1,243 @@
+/* =========================================================
+   摄像头实时识别 Hook —— YOLO 人脸检测（后端推理）
+   链路：前端 getUserMedia 本地预览 → 每 ~700ms canvas 抽帧 → JPEG base64
+        POST {API_BASE}/api/vision/frame → 后端 YOLO(yolov8n-face) 推理
+        → 返回人脸数/框 → 前端驱动状态机
+   - 状态机：检测到人脸（面向大屏）持续 ≥10s → onTrigger；触发后静默 60s
+   - 帧经局域网传到后端（大屏机同机部署则不出设备）；画面预览仍本地
+   ========================================================= */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { API_BASE } from '../config';
+
+export const VISION_DWELL_MS = 10000; // 面向停留阈值
+export const VISION_SILENT_MS = 180000; // 触发（自动问候）后静默 3 分钟，期间不重复触发
+const DETECT_INTERVAL_MS = 700; // ~1.4fps（后端推理 ~100-200ms + 传输）
+const FRAME_W = 480;
+const FRAME_H = 360;
+
+export default function useVisionDetection({ onTrigger, onGesture, enabled = true }) {
+  const [cameraOn, setCameraOn] = useState(false);
+  const [status, setStatus] = useState('off'); // off|loading|detecting|facing|triggered|silent|error
+  const [faces, setFaces] = useState(0);
+  const [dwellMs, setDwellMs] = useState(0);
+  const [gesture, setGesture] = useState(null); // raise(举手，toggle 对话)|null
+  const [errorInfo, setErrorInfo] = useState(null);
+  // 诊断：抽帧画面平均亮度（本地计算，<15 ≈ 黑屏）
+  const [frameLum, setFrameLum] = useState(null);
+  // 诊断：后端推理链路状态 loading|ok|failed
+  const [modelPhase, setModelPhase] = useState('loading');
+  const [modelErr, setModelErr] = useState(null);
+  // 诊断：最近一次推理/请求异常
+  const [detectErr, setDetectErr] = useState(null);
+  // 诊断：后端推理耗时 ms
+  const [latency, setLatency] = useState(null);
+
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const timerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const cancelledRef = useRef(false); // StrictMode/HMR 卸载标记
+  const stateRef = useRef({
+    facingSince: 0, silentUntil: 0, lastDetect: 0, lastDiag: 0, lastPlayRetry: 0, failCount: 0,
+    // 手势状态机：举手持续 1.5s → raise（前端据此 toggle 对话：无对话开、有对话停）
+    raiseActive: false, raiseStart: 0, raiseTriggered: false,
+  });
+  const triggerRef = useRef(onTrigger);
+  triggerRef.current = onTrigger;
+  const gestureRef = useRef(onGesture);
+  gestureRef.current = onGesture;
+
+  const loop = useCallback(async () => {
+    if (cancelledRef.current) return;
+    const video = videoRef.current;
+    const now = Date.now();
+    const st = stateRef.current;
+    if (!video || video.readyState < 2) {
+      // 视频未就绪：兜底重试 play()（Safari 不自动播放 srcObject 流）
+      if (video && video.srcObject && now - st.lastPlayRetry > 2000) {
+        st.lastPlayRetry = now;
+        video.play().catch(() => { /* 继续等待 */ });
+      }
+      timerRef.current = setTimeout(loop, 400);
+      return;
+    }
+    if (now - st.lastDetect < DETECT_INTERVAL_MS) {
+      timerRef.current = setTimeout(loop, 120);
+      return;
+    }
+    st.lastDetect = now;
+
+    try {
+      // 抽帧
+      if (!canvasRef.current) {
+        canvasRef.current = document.createElement('canvas');
+        canvasRef.current.width = FRAME_W;
+        canvasRef.current.height = FRAME_H;
+      }
+      const ctx = canvasRef.current.getContext('2d', { willReadFrequently: true });
+      ctx.drawImage(video, 0, 0, FRAME_W, FRAME_H);
+
+      // 亮度诊断（本地，每 2s）
+      if (now - st.lastDiag > 2000) {
+        st.lastDiag = now;
+        try {
+          const d = ctx.getImageData(0, 0, FRAME_W, FRAME_H).data;
+          let s = 0;
+          for (let i = 0; i < d.length; i += 4) s += d[i] + d[i + 1] + d[i + 2];
+          setFrameLum(Math.round(s / (d.length / 4) / 3));
+        } catch {
+          setFrameLum(-1);
+        }
+      }
+
+      // JPEG base64 → 后端 YOLO
+      const b64 = canvasRef.current.toDataURL('image/jpeg', 0.6).split(',')[1];
+      setModelPhase('ok');
+      const res = await fetch(`${API_BASE}/api/vision/frame`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ image: b64 }),
+      });
+      const data = await res.json();
+      if (!data?.ok) throw new Error(data?.error || `HTTP ${res.status}`);
+      setDetectErr(null);
+      const n = data.faces ?? 0;
+      setFaces(n);
+      setLatency(data.latency_ms);
+      st.failCount = 0;
+
+      // ── 手势状态机：举手持续 1.5s → raise；前端据此 toggle（无对话开 / 有对话停）──
+      const raised = data.raised?.[0]; // 取第一个举手的人/手
+      if (raised) {
+        if (!st.raiseActive) {
+          st.raiseActive = true;
+          st.raiseStart = now;
+          st.raiseTriggered = false;
+        }
+        if (!st.raiseTriggered && now - st.raiseStart >= 1500) {
+          st.raiseTriggered = true;
+          setGesture('raise');
+          console.warn(`[vision] 手势：举手（持续 ${Math.round((now - st.raiseStart) / 1000)}s）→ toggle 对话`);
+          gestureRef.current?.('raise');
+        }
+      } else if (st.raiseActive) {
+        // 举手消失：重置，允许下次举手再次触发
+        st.raiseActive = false;
+        st.raiseStart = 0;
+        st.raiseTriggered = false;
+        setTimeout(() => setGesture(null), 2500);
+      }
+
+      // 状态机：有人脸（面向大屏）持续 10s → 触发问候；触发后静默 60s
+      if (now < st.silentUntil) {
+        st.facingSince = 0;
+        setDwellMs(0);
+        setStatus('silent');
+      } else if (n > 0) {
+        st.facingSince = st.facingSince || now;
+        const d = now - st.facingSince;
+        setDwellMs(d);
+        setStatus('facing');
+        if (d >= VISION_DWELL_MS) {
+          st.silentUntil = now + VISION_SILENT_MS;
+          st.facingSince = 0;
+          setDwellMs(0);
+          setStatus('triggered');
+          triggerRef.current?.();
+          setTimeout(() => setStatus('detecting'), 3000);
+        }
+      } else {
+        st.facingSince = 0;
+        setDwellMs(0);
+        setStatus('detecting');
+      }
+    } catch (e) {
+      // 后端不可达/推理失败：错误显示到页面，连续 5 次标记链路失败
+      setDetectErr(e?.message || String(e));
+      st.failCount += 1;
+      if (st.failCount >= 5) {
+        setModelPhase('failed');
+        setModelErr(e?.message || String(e));
+      }
+    }
+    timerRef.current = setTimeout(loop, 120);
+  }, []);
+
+  const startCamera = useCallback(async () => {
+    if (cameraOn || !enabled) return;
+    cancelledRef.current = false;
+    setStatus('loading');
+    setModelPhase('loading');
+    setModelErr(null);
+    setDetectErr(null);
+    try {
+      if (!window.isSecureContext || !navigator.mediaDevices?.getUserMedia) {
+        throw new Error('非安全上下文：请通过 http://localhost 或 HTTPS 访问（当前地址浏览器禁止摄像头）');
+      }
+      // 设备预检
+      try {
+        const devs = await navigator.mediaDevices.enumerateDevices();
+        if (!devs.some((d) => d.kind === 'videoinput')) {
+          const e = new Error('未检测到摄像头设备（请确认 USB 摄像头已接入本机）');
+          e.name = 'NotFoundError';
+          throw e;
+        }
+      } catch (e) {
+        if (e?.name === 'NotFoundError') throw e;
+      }
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { width: 640, height: 480 },
+        audio: false,
+      });
+      if (cancelledRef.current) {
+        stream.getTracks().forEach((t) => t.stop());
+        return;
+      }
+      streamRef.current = stream;
+      const video = videoRef.current;
+      if (!video) throw new Error('video element not mounted');
+      video.srcObject = stream;
+      try { await video.play(); } catch { /* muted autoplay 兜底 */ }
+      if (cancelledRef.current) return;
+      setCameraOn(true);
+      setStatus('detecting');
+      timerRef.current = setTimeout(loop, 300);
+    } catch (e) {
+      if (cancelledRef.current) return;
+      setErrorInfo({ name: e?.name ?? 'Error', message: e?.message ?? String(e) });
+      setStatus('error');
+      console.warn('[vision] 摄像头启动失败:', e?.name, e?.message);
+    }
+  }, [cameraOn, enabled, loop]);
+
+  const stopCamera = useCallback(() => {
+    cancelledRef.current = true;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    stateRef.current = { facingSince: 0, silentUntil: 0, lastDetect: 0, lastDiag: 0, lastPlayRetry: 0, failCount: 0,
+      raiseActive: false, raiseStart: 0, raiseTriggered: false };
+    setCameraOn(false);
+    setFaces(0);
+    setDwellMs(0);
+    setGesture(null);
+    setFrameLum(null);
+    setModelPhase('loading');
+    setModelErr(null);
+    setDetectErr(null);
+    setLatency(null);
+    setStatus('off');
+  }, []);
+
+  // 默认开启：挂载即启动；卸载时释放
+  useEffect(() => {
+    if (enabled) void startCamera();
+    return () => stopCamera();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled]);
+
+  return {
+    cameraOn, status, faces, dwellMs, gesture, latency, frameLum, modelPhase, modelErr, detectErr,
+    errorInfo, startCamera, stopCamera, videoRef,
+  };
+}