Initial release — Reachy Mini Hello World DevKit

Authored by Panny Malialis in partnership with various LLMs

.gitattributes

@@ -0,0 +1,13 @@
+*.wasm filter=lfs diff=lfs merge=lfs -text
+hello_world/static/lib/mujoco/mujoco_wasm.js filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.ogg filter=lfs diff=lfs merge=lfs -text
+*.flac filter=lfs diff=lfs merge=lfs -text
+*.m4a filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.glb filter=lfs diff=lfs merge=lfs -text
+*.stl filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,24 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.egg-info/
+dist/
+build/
+
+# Runtime settings (contains API keys)
+settings.json
+hello_world/settings.json
+
+# Media files (large, user-generated)
+media/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,137 @@
+---
+title: Hello World
+emoji: "\U0001F916"
+colorFrom: blue
+colorTo: purple
+sdk: static
+pinned: false
+short_description: Dashboard with AI conversation, telemetry, and music
+tags:
+  - reachy_mini
+  - reachy_mini_python_app
+---
+
+# Hello World — Reachy Mini DevKit
+
+A community dashboard app for [Reachy Mini](https://www.pollen-robotics.com/reachy-mini/) with system telemetry, AI conversation, music playback, and robot control.
+
+Built on the `reachy-mini` SDK as a `ReachyMiniApp`. Serves a single-page web UI on port 8042.
+
+## Features
+
+| Tab | What it does |
+|-----|-------------|
+| **Status** | CPU, RAM, disk, network, WiFi, thermal — live system charts |
+| **Telemetry** | Head pose (x/y/z/roll/pitch/yaw), body yaw, antenna positions |
+| **Conversation** | Voice listener with STT, LLM chat, TTS output, VLM vision |
+| **Media** | Recordings, snapshots, sound recordings, music library |
+
+### AI Pipeline
+
+- **STT**: OpenAI Whisper, Groq (via LiteLLM)
+- **LLM**: OpenAI, Anthropic, Groq, Gemini, DeepSeek (via LiteLLM)
+- **TTS**: OpenAI, ElevenLabs, Groq Orpheus, Gemini (via LiteLLM)
+- **VLM**: Vision-capable models auto-detected per provider
+- **Tools**: 13 tools the LLM can invoke (see below)
+
+### Audio
+
+- Robot mic input or browser mic (selectable)
+- Robot speaker or browser speaker output (selectable)
+- Music playback via GStreamer on the robot speaker
+- TTS output is queued (no overlapping speech)
+
+### What You Can Ask Reachy
+
+The AI assistant has 13 tools it can call autonomously during conversation:
+
+| Tool | What it does | Example prompt |
+|------|-------------|----------------|
+| **play_emotion** | Play one of 71 emotion animations | "Show me you're happy" / "Are you scared?" |
+| **play_dance** | Play one of 19 dance moves | "Dance for me" / "Do the chicken peck" |
+| **set_head_pose** | Move head (yaw/pitch/roll) | "Look left" / "Nod your head" |
+| **take_snapshot** | Capture camera image + VLM description | "Take a photo" / "What do you see?" |
+| **start_recording** | Record video from the camera | "Record a 10 second video" |
+| **stop_recording** | Stop video recording | "Stop recording" |
+| **start_sound_recording** | Record audio from the mic | "Record what you hear" |
+| **stop_sound_recording** | Stop audio recording | "Stop the audio recording" |
+| **play_music** | Play a track on the robot speaker | "Play some music" |
+| **stop_music** | Stop music playback | "Stop the music" |
+| **list_music** | List available tracks | "What music do you have?" |
+| **get_system_status** | Get CPU, RAM, uptime, etc. | "How are your systems?" |
+| **get_date_time** | Get current date and time | "What time is it?" |
+
+**71 emotions** including: amazed, cheerful, curious, laughing, loving, proud, scared, shy, surprised, thoughtful, welcoming, and many more.
+
+**19 dances** including: chicken_peck, dizzy_spin, groovy_sway_and_roll, jackson_square, pendulum_swing, side_to_side_sway, stumble_and_recover, yeah_nod, and more.
+
+## Installation
+
+Requires Python 3.10+ and a Reachy Mini robot.
+
+```bash
+# In the apps virtual environment on Reachy
+pip install -e .
+
+# The daemon discovers the app via the entry point
+# Restart daemon to pick it up
+reachy-restart
+```
+
+## Dependencies
+
+- `reachy-mini` — Robot SDK
+- `litellm` — Unified LLM/TTS/STT provider interface
+- `webrtcvad` — Voice activity detection
+- `soundfile` — Audio file I/O
+- `mutagen` — Music metadata (ID3, FLAC, M4A)
+
+## Configuration
+
+All settings are managed through the web UI and persisted to `settings.json` (created at runtime). API keys are entered in the UI under AI Provider Settings — no environment variables needed.
+
+Default URLs point to `localhost` so the app works out of the box on any Reachy Mini.
+
+## Architecture
+
+```
+hello_world/
+├── app.py              # ReachyMiniApp entry point
+├── config.py           # Centralized config with env var overrides
+├── settings.py         # Settings persistence (load/save JSON)
+├── websocket.py        # WebSocket endpoints (/ws/live, /ws/intercom, /ws/terminal, /ws/transcribe)
+├── api/
+│   ├── conversation.py # LLM chat, STT, TTS, VLM, tool execution
+│   ├── listener.py     # Headless voice listener (robot mic → STT → LLM → TTS)
+│   ├── music.py        # Music library (upload, play via GStreamer, metadata)
+│   ├── recordings.py   # Video recording
+│   ├── snapshots.py    # Camera snapshots
+│   ├── sounds.py       # Audio recording
+│   ├── system.py       # System telemetry (CPU, RAM, disk, network, etc.)
+│   └── ...
+└── static/
+    ├── index.html      # Single-page app
+    ├── css/styles.css   # Theme-aware styles (light/dark)
+    └── js/
+        ├── core/       # App init, API client, settings, tabs
+        ├── features/   # Assistant, transcribe, LLM settings, floating panels
+        ├── controls/   # Joystick
+        └── simulation.js  # MuJoCo 3D viewer
+```
+
+## WebSocket Endpoints
+
+| Endpoint | Purpose |
+|----------|---------|
+| `/ws/live` | Robot state + system stats (configurable Hz) |
+| `/ws/intercom` | Browser mic audio to robot speaker |
+| `/ws/terminal` | PTY terminal via tmux |
+| `/ws/transcribe` | Transcription results + TTS audio broadcast |
+
+## API Endpoints
+
+Settings, recordings, snapshots, sounds, music, conversation, system stats — all under `/api/`. Full OpenAPI spec available at `/openapi.json` when running.
+
+## License
+
+Community project for Reachy Mini developers.

hello_world/__init__.py

@@ -0,0 +1,3 @@
+from .main import HelloWorld
+
+__all__ = ["HelloWorld"]

hello_world/api/__init__.py

@@ -0,0 +1,35 @@
+"""
+API modules for Hello World.
+
+Each module provides a `register_routes(app)` function.
+"""
+
+from .settings_api import register_routes as register_settings_api_routes
+from .health import register_routes as register_health_routes
+from .system import register_routes as register_system_routes
+from .model import register_routes as register_model_routes
+from .snapshots import register_routes as register_snapshots_routes
+from .recordings import register_routes as register_recordings_routes
+from .sounds import register_routes as register_sounds_routes
+from .conversation import register_routes as register_conversation_routes
+from .music import register_routes as register_music_routes
+from .listener import register_routes as register_listener_routes
+from .transcript import register_routes as register_transcript_routes
+
+
+def register_all_routes(app) -> None:
+    """Register all API routes on the app."""
+    register_settings_api_routes(app)
+    register_health_routes(app)
+    register_system_routes(app)
+    register_model_routes(app)
+    register_snapshots_routes(app)
+    register_recordings_routes(app)
+    register_sounds_routes(app)
+    register_music_routes(app)
+    register_conversation_routes(app)
+    register_listener_routes(app)
+    register_transcript_routes(app)
+
+
+__all__ = ['register_all_routes']

hello_world/api/conversation.py

@@ -0,0 +1,1364 @@
+"""
+Conversation API - LiteLLM-powered voice pipeline.
+
+Provider/model discovery via live provider APIs (cached 10 min).
+LLM chat with tool calling, and TTS playback.
+All AI calls go through LiteLLM with API keys from settings.
+
+Endpoints:
+    GET  /api/conversation/providers - Available providers by capability
+    GET  /api/conversation/models - Models for a provider/capability
+    GET  /api/conversation/voices - Voices for a TTS provider
+    GET  /api/conversation/known-providers - All known providers
+    POST /api/conversation/chat - Send message to LLM
+    POST /api/conversation/speak - TTS-only (no LLM)
+"""
+
+__all__ = ['register_routes']
+
+import asyncio
+import io
+import json
+import logging
+import math
+import re
+import time
+import urllib.request
+import urllib.error
+
+import numpy as np
+
+from ..config import config
+
+logger = logging.getLogger("reachy_mini.app.hello_world.conversation")
+
+# ── Live provider/model discovery via provider APIs ───────────
+#
+# Instead of scanning LiteLLM's static model_cost dict (stale, inaccurate),
+# we call each provider's /v1/models endpoint directly.
+# Results are cached in-memory with a 10-minute TTL.
+# LiteLLM is still used for actual AI calls (acompletion, atranscription, aspeech).
+
+_PROVIDER_APIS = {
+    "openai":      {"base": "https://api.openai.com/v1",                          "auth": "bearer"},
+    "anthropic":   {"base": "https://api.anthropic.com/v1",                        "auth": "anthropic"},
+    "groq":        {"base": "https://api.groq.com/openai/v1",                     "auth": "bearer"},
+    "deepseek":    {"base": "https://api.deepseek.com/v1",                        "auth": "bearer"},
+    "gemini":      {"base": "https://generativelanguage.googleapis.com/v1beta",    "auth": "gemini"},
+    "elevenlabs":  {"base": "https://api.elevenlabs.io/v1",                       "auth": "elevenlabs"},
+}
+
+# Static capability map for the API key entry UI — shows all *possible*
+# capabilities per provider even without a key. Actual model lists come
+# from live discovery via _discover_models().
+_KNOWN_CAPS = {
+    "openai":      {"llm": True, "stt": True, "tts": True, "vlm": True},
+    "anthropic":   {"llm": True, "stt": False, "tts": False, "vlm": True},
+    "groq":        {"llm": True, "stt": True, "tts": True, "vlm": True},
+    "deepseek":    {"llm": True, "stt": False, "tts": False, "vlm": True},
+    "gemini":      {"llm": True, "stt": False, "tts": True, "vlm": True},
+    "elevenlabs":  {"llm": False, "stt": False, "tts": True, "vlm": False},
+}
+
+
+def _fetch_models(provider: str, api_key: str) -> list[str]:
+    """Call a provider's models endpoint and return raw model ID strings."""
+    api = _PROVIDER_APIS.get(provider)
+    if not api or not api_key:
+        return []
+
+    base = api["base"]
+    auth = api["auth"]
+
+    # Build request URL and headers
+    # User-Agent is required — Python-urllib default gets blocked by Cloudflare
+    if auth == "gemini":
+        url = f"{base}/models?key={api_key}"
+        headers = {"User-Agent": "hello-world/1.0"}
+    else:
+        url = f"{base}/models"
+        headers = {"Accept": "application/json", "User-Agent": "hello-world/1.0"}
+        if auth == "bearer":
+            headers["Authorization"] = f"Bearer {api_key}"
+        elif auth == "anthropic":
+            headers["x-api-key"] = api_key
+            headers["anthropic-version"] = "2023-06-01"
+        elif auth == "elevenlabs":
+            headers["xi-api-key"] = api_key
+
+    try:
+        req = urllib.request.Request(url, headers=headers)
+        with urllib.request.urlopen(req, timeout=8) as resp:
+            data = json.loads(resp.read())
+    except Exception as e:
+        logger.warning(f"Model discovery failed for {provider}: {e}")
+        return []
+
+    # Parse response — different providers use different shapes
+    if auth == "gemini":
+        # Gemini: {"models": [{"name": "models/gemini-2.0-flash", ...}]}
+        return [m["name"].removeprefix("models/")
+                for m in data.get("models", []) if "name" in m]
+    elif auth == "elevenlabs":
+        # ElevenLabs: [{"model_id": "eleven_turbo_v2_5", ...}]
+        if isinstance(data, list):
+            return [m["model_id"] for m in data if "model_id" in m]
+        return []
+    else:
+        # OpenAI-compatible: {"data": [{"id": "gpt-4o", ...}]}
+        return [m["id"] for m in data.get("data", []) if "id" in m]
+
+
+def _classify_model(provider: str, model_id: str) -> str | None:
+    """Classify a model ID into a capability ("llm", "stt", "tts") or None to skip."""
+    mid = model_id.lower()
+
+    if provider == "openai":
+        # STT models
+        if mid.startswith("whisper-") or "transcribe" in mid:
+            return "stt"
+        # TTS models (dedicated tts-* and gpt-*-tts variants)
+        if mid.startswith("tts-") or mid.endswith("-tts") or "-tts-" in mid:
+            return "tts"
+        # Skip non-chat models before LLM check
+        if any(x in mid for x in ("image", "realtime", "audio-preview", "audio-",
+                                   "dall-e", "moderation", "codex")):
+            return None
+        if mid.startswith(("gpt-", "o1-", "o3-", "o4-", "chatgpt-")):
+            return "llm"
+        # Skip: embeddings, babbage, davinci
+        return None
+
+    elif provider == "anthropic":
+        if mid.startswith("claude-"):
+            return "llm"
+        return None
+
+    elif provider == "groq":
+        if mid.startswith(("whisper-", "distil-whisper-")):
+            return "stt"
+        if "orpheus" in mid:
+            return "tts"
+        # Everything else on Groq is an LLM
+        return "llm"
+
+    elif provider == "deepseek":
+        return "llm"
+
+    elif provider == "gemini":
+        if "embedding" in mid or "aqa" in mid:
+            return None
+        if "tts" in mid or "native-audio" in mid:
+            return "tts"
+        # Skip image/video generation, robotics, and non-chat models
+        if any(x in mid for x in ("imagen", "veo", "robotics", "computer-use")):
+            return None
+        return "llm"
+
+    elif provider == "elevenlabs":
+        return "tts"
+
+    return None
+
+
+# ── Model cache with 10-minute TTL ───────────────────────────
+
+_model_cache: dict[tuple, dict] = {}
+_CACHE_TTL = 600  # 10 minutes
+
+
+def _discover_models(provider: str, api_key: str) -> dict:
+    """Discover models for a provider, using cache when fresh.
+
+    Returns: {"caps": {"llm": bool, "stt": bool, "tts": bool},
+              "models": {"llm": [...], "stt": [...], "tts": [...]}}
+    """
+    cache_key = (provider, api_key[:8] if api_key else "")
+    now = time.time()
+
+    cached = _model_cache.get(cache_key)
+    if cached and (now - cached["ts"]) < _CACHE_TTL:
+        return cached["data"]
+
+    raw_ids = _fetch_models(provider, api_key)
+
+    caps = {"llm": False, "stt": False, "tts": False}
+    models = {"llm": [], "stt": [], "tts": []}
+
+    for model_id in raw_ids:
+        cap = _classify_model(provider, model_id)
+        if cap:
+            caps[cap] = True
+            models[cap].append(model_id)
+
+    result = {"caps": caps, "models": models}
+    _model_cache[cache_key] = {"ts": now, "data": result}
+
+    cap_summary = [c for c, v in caps.items() if v]
+    total = sum(len(v) for v in models.values())
+    logger.info(f"Discovered {total} models for {provider} (caps: {cap_summary})")
+
+    return result
+
+# ── Web search detection (rules-based, not LiteLLM metadata) ──
+#
+# Provider APIs don't expose web search capability in /v1/models.
+# Instead, it's a per-provider policy with model-level exceptions.
+# This replaces scanning LiteLLM's often-stale supports_web_search flags.
+
+# Providers where ALL models support web search
+_WEB_SEARCH_PROVIDERS = {
+    "anthropic",   # All Claude 3.5+ — pass web_search_options tool
+    "gemini",      # All current — google_search_retrieval tool
+}
+
+
+def _model_supports_web_search(provider: str, model: str) -> bool:
+    """Check if a provider/model combo supports web search.
+
+    Rules:
+      - anthropic, gemini: all models
+      - openai: only *-search-* models (e.g. gpt-4o-search-preview)
+      - groq: only compound-* models (built-in browser search)
+      - everyone else: no web search
+    """
+    if provider in _WEB_SEARCH_PROVIDERS:
+        return True
+    if provider == "openai":
+        return "search" in model.lower()
+    if provider == "groq":
+        return "compound" in model.lower()
+    return False
+
+
+def _model_supports_vision(provider: str, model_id: str) -> bool:
+    """Check if a model supports image input (vision)."""
+    mid = model_id.lower()
+    if provider == "anthropic":
+        return True  # All Claude 3+ models support vision
+    elif provider == "openai":
+        # gpt-4o, gpt-4-turbo, o1, o3, o4 support vision; gpt-3.5 does not
+        return any(x in mid for x in ("gpt-4o", "gpt-4-turbo", "o1-", "o3-", "o4-", "chatgpt-4o"))
+    elif provider == "gemini":
+        return True  # All Gemini chat models support vision
+    elif provider == "groq":
+        return any(x in mid for x in ("llama-4", "llava", "vision"))
+    elif provider == "deepseek":
+        return "chat" in mid
+    return False
+
+
+# ── Voice discovery ───────────────────────────────────────────
+#
+# Strategy per provider:
+#   1. ElevenLabs: dedicated /v1/voices API (rich metadata)
+#   2. OpenAI-compatible (openai, groq): probe with invalid voice,
+#      parse valid options from the error message (runtime discovery)
+#   3. Deepgram: voices are encoded in model names, no list API
+#   4. Unknown providers: return empty
+
+# Providers with OpenAI-compatible /audio/speech endpoints (for voice probing)
+_TTS_PROBE_PROVIDERS = {"openai"}
+
+
+def _probe_openai_compatible_voices(base_url: str, api_key: str, model: str) -> list:
+    """Discover voices by sending an invalid voice and parsing the error.
+
+    OpenAI-compatible APIs return an enum validation error listing all
+    valid voice IDs when given an invalid one. This is runtime discovery —
+    the list is always authoritative and current.
+    """
+    try:
+        data = json.dumps({
+            "model": model,
+            "input": "test",
+            "voice": "__INVALID_PROBE__",
+        }).encode("utf-8")
+        req = urllib.request.Request(
+            f"{base_url}/audio/speech",
+            data=data,
+            headers={
+                "Authorization": f"Bearer {api_key}",
+                "Content-Type": "application/json",
+            },
+        )
+        try:
+            urllib.request.urlopen(req, timeout=5)
+        except urllib.error.HTTPError as e:
+            body = e.read().decode("utf-8", errors="replace")
+            try:
+                error_data = json.loads(body)
+            except (json.JSONDecodeError, ValueError):
+                logger.debug(f"Voice probe: non-JSON error from {base_url}")
+                return []
+            msg = error_data.get("error", {}).get("message", "")
+
+            # Parse from the "expected" portion of the error which is clean:
+            # e.g. "'nova', 'shimmer', 'echo', ... or 'coral'"
+            # First try to extract just the expected clause
+            expected = re.search(r"expected['\"]?:\s*['\"]?(.*?)['\"]?\s*[}\]]", msg)
+            if expected:
+                voices = re.findall(r"'([a-zA-Z0-9_-]+)'", expected.group(1))
+            else:
+                # Fallback: extract from "should be 'X', 'Y', ..."
+                should_be = re.search(r"should be (.+)", msg)
+                if should_be:
+                    voices = re.findall(r"'([a-zA-Z0-9_-]+)'", should_be.group(1))
+                else:
+                    voices = []
+            if voices:
+                # Deduplicate while preserving order
+                seen = set()
+                unique = []
+                for v in voices:
+                    if v not in seen:
+                        seen.add(v)
+                        unique.append(v)
+                return [{"id": v, "name": v} for v in unique]
+
+            # Check for specific error codes (terms required, model gone, etc.)
+            code = error_data.get("error", {}).get("code", "")
+            if code:
+                logger.warning(f"TTS probe error ({code}): {msg[:120]}")
+    except Exception as e:
+        logger.warning(f"Voice probe failed for {base_url}: {e}")
+    return []
+
+
+def _get_voices_for_provider(provider: str, api_key: str = "",
+                              model: str = "") -> list:
+    """Get voice list for a TTS provider.
+
+    Returns list of dicts: [{"id": "voice_id", "name": "Display Name"}, ...]
+    Uses dynamic discovery — no hardcoded voice lists.
+    """
+    if not api_key:
+        return []
+
+    # ElevenLabs: dedicated voice discovery API (rich metadata)
+    if provider == "elevenlabs":
+        try:
+            base = _PROVIDER_APIS["elevenlabs"]["base"]
+            req = urllib.request.Request(
+                f"{base}/voices",
+                headers={"xi-api-key": api_key, "Accept": "application/json"},
+            )
+            with urllib.request.urlopen(req, timeout=5) as resp:
+                data = json.loads(resp.read())
+                return [
+                    {"id": v["voice_id"], "name": v.get("name", v["voice_id"])}
+                    for v in data.get("voices", [])
+                ]
+        except Exception as e:
+            logger.warning(f"Failed to fetch ElevenLabs voices: {e}")
+            return []
+
+    # Gemini: static voice list (no discovery API available)
+    if provider == "gemini":
+        _GEMINI_VOICES = [
+            "Zephyr", "Puck", "Charon", "Kore", "Fenrir", "Leda", "Orus",
+            "Aoede", "Callirrhoe", "Autonoe", "Enceladus", "Iapetus",
+            "Umbriel", "Algieba", "Despina", "Erinome", "Algenib",
+            "Rasalgethi", "Laomedeia", "Achernar", "Alnilam", "Schedar",
+            "Gacrux", "Pulcherrima", "Achird", "Zubenelgenubi",
+            "Vindemiatrix", "Sadachbia", "Sadaltager", "Sulafat",
+        ]
+        return [{"id": v, "name": v} for v in _GEMINI_VOICES]
+
+    # Groq: static voice lists per model (probe fails due to terms gate)
+    if provider == "groq":
+        mid = model.lower() if model else ""
+        if "arabic" in mid or "saudi" in mid:
+            voices = ["fahad", "sultan", "lulwa", "noura"]
+        else:
+            voices = ["autumn", "diana", "hannah", "austin", "daniel", "troy"]
+        return [{"id": v, "name": v.title()} for v in voices]
+
+    # OpenAI-compatible providers: probe with invalid voice
+    if provider in _TTS_PROBE_PROVIDERS:
+        base_url = _PROVIDER_APIS[provider]["base"]
+        # Need a model to probe — use provided or discover first available
+        if not model:
+            discovered = _discover_models(provider, api_key)
+            tts_models = discovered["models"].get("tts", [])
+            model = tts_models[0] if tts_models else ""
+        if not model:
+            return []
+        # Strip provider prefix if present (e.g. "groq/playai-tts" -> "playai-tts")
+        bare_model = model.split("/", 1)[-1] if "/" in model else model
+        return _probe_openai_compatible_voices(base_url, api_key, bare_model)
+
+    return []
+
+# ── Emotion / dance datasets (HuggingFace, cached on Reachy) ──
+
+EMOTION_DATASET = "pollen-robotics/reachy-mini-emotions-library"
+DANCE_DATASET = "pollen-robotics/reachy-mini-dances-library"
+
+AVAILABLE_EMOTIONS = [
+    "amazed1", "anxiety1", "attentive1", "attentive2", "boredom1", "boredom2",
+    "calming1", "cheerful1", "come1", "confused1", "contempt1", "curious1",
+    "dance1", "dance2", "dance3", "disgusted1", "displeased1", "displeased2",
+    "downcast1", "dying1", "electric1", "enthusiastic1", "enthusiastic2",
+    "exhausted1", "fear1", "frustrated1", "furious1", "go_away1", "grateful1",
+    "helpful1", "helpful2", "impatient1", "impatient2", "incomprehensible2",
+    "indifferent1", "inquiring1", "inquiring2", "inquiring3", "irritated1",
+    "irritated2", "laughing1", "laughing2", "lonely1", "lost1", "loving1",
+    "no1", "no_excited1", "no_sad1", "oops1", "oops2", "proud1", "proud2",
+    "proud3", "rage1", "relief1", "relief2", "reprimand1", "reprimand2",
+    "reprimand3", "resigned1", "sad1", "sad2", "scared1", "serenity1",
+    "shy1", "sleep1", "success1", "success2", "surprised1", "surprised2",
+    "thoughtful1", "thoughtful2", "tired1", "uncertain1", "uncomfortable1",
+    "understanding1", "understanding2", "welcoming1", "welcoming2",
+    "yes1", "yes_sad1",
+]
+
+AVAILABLE_DANCES = [
+    "chicken_peck", "chin_lead", "dizzy_spin", "grid_snap",
+    "groovy_sway_and_roll", "head_tilt_roll", "interwoven_spirals",
+    "jackson_square", "neck_recoil", "pendulum_swing", "polyrhythm_combo",
+    "sharp_side_tilt", "side_glance_flick", "side_peekaboo",
+    "side_to_side_sway", "simple_nod", "stumble_and_recover",
+    "uh_huh_tilt", "yeah_nod",
+]
+
+# ── Tool definitions ───────────────────────────────────────────
+
+TOOLS = [
+    {
+        "type": "function",
+        "function": {
+            "name": "ignore",
+            "description": "Call this when the speech is background noise, not directed at you, or not worth responding to. Use liberally — ignore approximately 95% of ambient conversation.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "reason": {"type": "string", "description": "Brief reason for ignoring"}
+                },
+                "required": ["reason"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "play_emotion",
+            "description": "Play an emotion animation on the robot head.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "emotion": {
+                        "type": "string",
+                        "description": "Emotion name from the available set",
+                        "enum": AVAILABLE_EMOTIONS,
+                    }
+                },
+                "required": ["emotion"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "play_dance",
+            "description": "Play a dance move on the robot head.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "dance": {
+                        "type": "string",
+                        "description": "Dance name from the available set",
+                        "enum": AVAILABLE_DANCES,
+                    }
+                },
+                "required": ["dance"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "set_head_pose",
+            "description": "Move robot head to a position",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "yaw": {"type": "number", "description": "Left/right in degrees (-50 to 50)"},
+                    "pitch": {"type": "number", "description": "Up/down in degrees (-25 to 25)"},
+                    "roll": {"type": "number", "description": "Tilt in degrees (-30 to 35)"}
+                }
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "take_snapshot",
+            "description": "Capture an image from the robot camera. If a VLM is configured, automatically describes what is seen.",
+            "parameters": {"type": "object", "properties": {}}
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "get_system_status",
+            "description": "Get robot system info (CPU, RAM, uptime, etc.)",
+            "parameters": {"type": "object", "properties": {}}
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "get_date_time",
+            "description": "Get the current date, time, day of week, and timezone from the robot's system clock. Use this whenever someone asks what time or date it is.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "format": {
+                        "type": "string",
+                        "description": "Optional date format string for /bin/date (e.g. '+%Y-%m-%d %H:%M'). Defaults to full human-readable output."
+                    }
+                }
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "start_recording",
+            "description": "Start recording video from the robot camera",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "duration": {"type": "integer", "description": "Max duration in seconds (optional, default unlimited)"}
+                }
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "stop_recording",
+            "description": "Stop the current video recording",
+            "parameters": {"type": "object", "properties": {}}
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "start_sound_recording",
+            "description": "Start recording audio from the robot microphone",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "duration": {"type": "integer", "description": "Max duration in seconds (optional, default unlimited)"}
+                }
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "stop_sound_recording",
+            "description": "Stop the current audio recording",
+            "parameters": {"type": "object", "properties": {}}
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "play_music",
+            "description": "Play a music track on the robot speaker",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "filename": {"type": "string", "description": "Filename of the track to play"}
+                },
+                "required": ["filename"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "stop_music",
+            "description": "Stop music playback",
+            "parameters": {"type": "object", "properties": {}}
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "list_music",
+            "description": "List available music tracks in the library",
+            "parameters": {"type": "object", "properties": {}}
+        }
+    },
+]
+
+# ── System prompt ──────────────────────────────────────────────
+
+SYSTEM_PROMPT = """You are Reachy, a friendly robot assistant with a physical robot head. When the listener is active, you hear through a microphone and your responses are spoken aloud through a text-to-speech system — you DO have a voice. People can also type messages to you. Keep responses concise and natural for spoken output.
+
+SPEECH OUTPUT RULES:
+- Your text is sent directly to a TTS engine. Write ONLY plain spoken words.
+- NEVER use asterisks, markdown, bullet points, numbered lists, headers, or any formatting.
+- NEVER use emoji, special characters, or symbols.
+- Say numbers as words (e.g. "twenty three" not "23", "six forty five" not "6:45").
+- Don't use abbreviations — say "for example" not "e.g.", "that is" not "i.e.".
+- Keep responses to 1-3 sentences unless asked for detail.
+
+IGNORE RULES:
+- Use the `ignore` tool ONLY when speech is clearly NOT directed at you.
+- If someone says your name ("Reachy", "hey Reachy", etc.) or addresses you directly, you MUST respond. Never ignore these.
+- The `ignore` tool must be the ONLY tool call in a response. Never combine `ignore` with other tools.
+
+EXPRESSIVENESS:
+- You are an expressive robot. Use emotions and dances frequently to bring your personality to life.
+- React to what people say with appropriate emotions — laugh when something is funny, show curiosity when asked questions, be cheerful when greeting people.
+- When someone asks you to dance or move, pick a dance and perform it. You can also dance spontaneously when the mood is right.
+- Combine emotions with your spoken responses. For example, say something welcoming AND play a welcoming emotion at the same time.
+- You have 71 emotions and 19 dances available. Use them liberally — you are a robot with personality.
+
+TOOLS:
+You can play emotions, dances, move your head, take snapshots, record video, record audio, and play music using tools.
+
+Audio context: confidence={conf}%, volume={vol}%"""
+
+# ── Message history ────────────────────────────────────────────
+
+_conversation_histories: dict[str, list] = {}
+MAX_HISTORY = 50
+
+
+def _get_history(session_id: str) -> list:
+    if session_id not in _conversation_histories:
+        _conversation_histories[session_id] = []
+    return _conversation_histories[session_id]
+
+
+def _trim_history(history: list):
+    while len(history) > MAX_HISTORY:
+        history.pop(0)
+
+
+# ── Tool execution ─────────────────────────────────────────────
+
+async def _execute_tool(name: str, args: dict) -> dict:
+    """Execute a tool call and return the result."""
+    loop = asyncio.get_event_loop()
+
+    if name == "ignore":
+        return {"ignored": True, "reason": args.get("reason", "")}
+
+    elif name == "play_emotion":
+        emotion = args.get("emotion", "cheerful1")
+
+        def do_play():
+            url = config.get_daemon_endpoint(
+                f"move/play/recorded-move-dataset/{EMOTION_DATASET}/{emotion}")
+            req = urllib.request.Request(url, method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=config.TIMEOUTS['daemon_move']) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+
+        return await loop.run_in_executor(None, do_play)
+
+    elif name == "play_dance":
+        dance = args.get("dance", "simple_nod")
+
+        def do_dance():
+            url = config.get_daemon_endpoint(
+                f"move/play/recorded-move-dataset/{DANCE_DATASET}/{dance}")
+            req = urllib.request.Request(url, method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=config.TIMEOUTS['daemon_move']) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+
+        return await loop.run_in_executor(None, do_dance)
+
+    elif name == "set_head_pose":
+        yaw = args.get("yaw", 0)
+        pitch = args.get("pitch", 0)
+        roll = args.get("roll", 0)
+
+        def do_move():
+            url = config.get_daemon_endpoint("move/set_target")
+            data = json.dumps({
+                "target_head_pose": {
+                    "x": 0, "y": 0, "z": 0,
+                    "roll": math.radians(roll),
+                    "pitch": math.radians(pitch),
+                    "yaw": math.radians(yaw),
+                }
+            }).encode('utf-8')
+            req = urllib.request.Request(url, data=data, method="POST")
+            req.add_header('Content-Type', 'application/json')
+            try:
+                with urllib.request.urlopen(req, timeout=config.TIMEOUTS['daemon_move']) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+
+        return await loop.run_in_executor(None, do_move)
+
+    elif name == "take_snapshot":
+        def do_snap():
+            url = "http://localhost:8042/api/snapshots/capture"
+            req = urllib.request.Request(url, method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+
+        snap_result = await loop.run_in_executor(None, do_snap)
+
+        # Auto-describe via VLM if configured
+        if snap_result.get("filename") and not snap_result.get("error"):
+            try:
+                from ..settings import load_settings
+                settings = load_settings()
+                vlm_provider = settings.get("vlm_provider", "")
+                vlm_model = settings.get("vlm_model", "")
+                api_key = settings.get("api_keys", {}).get(vlm_provider, "")
+
+                if vlm_provider and vlm_model and api_key:
+                    import base64
+                    # Read the snapshot file
+                    snap_path = config.SNAPSHOTS_DIR / snap_result["filename"]
+                    if snap_path.exists():
+                        img_bytes = snap_path.read_bytes()
+                        b64 = base64.b64encode(img_bytes).decode()
+
+                        import litellm
+                        vlm_response = await litellm.acompletion(
+                            model=f"{vlm_provider}/{vlm_model}" if "/" not in vlm_model else vlm_model,
+                            messages=[{
+                                "role": "user",
+                                "content": [
+                                    {"type": "text", "text": "Briefly describe what you see in this image in 1-2 sentences."},
+                                    {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{b64}"}}
+                                ]
+                            }],
+                            api_key=api_key,
+                            timeout=15,
+                        )
+                        description = vlm_response.choices[0].message.content
+                        snap_result["description"] = description
+                        logger.info(f"VLM auto-describe: {description[:100]}")
+            except Exception as e:
+                logger.warning(f"VLM auto-describe failed: {e}")
+                # Graceful fallback — return snapshot without description
+
+        return snap_result
+
+    elif name == "get_system_status":
+        def do_status():
+            url = "http://localhost:8042/api/system/stats"
+            try:
+                with urllib.request.urlopen(url, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+
+        return await loop.run_in_executor(None, do_status)
+
+    elif name == "get_date_time":
+        import subprocess
+        fmt = args.get("format", "")
+        cmd = ["/bin/date"] + ([fmt] if fmt else [])
+        try:
+            result = subprocess.run(cmd, capture_output=True, text=True, timeout=5)
+            return {"date_time": result.stdout.strip()}
+        except Exception as e:
+            return {"error": str(e)}
+
+    elif name == "start_recording":
+        def do_fn():
+            url = "http://localhost:8042/api/recordings/start"
+            data = json.dumps({"duration": args.get("duration")}).encode() if args.get("duration") else None
+            req = urllib.request.Request(url, data=data, method="POST")
+            if data:
+                req.add_header("Content-Type", "application/json")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    elif name == "stop_recording":
+        def do_fn():
+            req = urllib.request.Request("http://localhost:8042/api/recordings/stop", method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    elif name == "start_sound_recording":
+        def do_fn():
+            url = "http://localhost:8042/api/sounds/start"
+            data = json.dumps({"duration": args.get("duration")}).encode() if args.get("duration") else None
+            req = urllib.request.Request(url, data=data, method="POST")
+            if data:
+                req.add_header("Content-Type", "application/json")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    elif name == "stop_sound_recording":
+        def do_fn():
+            req = urllib.request.Request("http://localhost:8042/api/sounds/stop", method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    elif name == "play_music":
+        filename = args.get("filename", "")
+        def do_fn():
+            url = f"http://localhost:8042/api/music/play/{urllib.request.quote(filename, safe='')}"
+            req = urllib.request.Request(url, method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    elif name == "stop_music":
+        def do_fn():
+            req = urllib.request.Request("http://localhost:8042/api/music/stop", method="POST")
+            try:
+                with urllib.request.urlopen(req, timeout=5) as resp:
+                    return json.loads(resp.read().decode())
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    elif name == "list_music":
+        def do_fn():
+            try:
+                with urllib.request.urlopen("http://localhost:8042/api/music/list", timeout=5) as resp:
+                    data = json.loads(resp.read().decode())
+                    tracks = data.get("tracks", [])
+                    return {"tracks": [{"filename": t["filename"], "title": t["title"], "artist": t["artist"]} for t in tracks]}
+            except Exception as e:
+                return {"error": str(e)}
+        return await loop.run_in_executor(None, do_fn)
+
+    return {"error": f"Unknown tool: {name}"}
+
+
+# ── TTS playback ───────────────────────────────────────────────
+
+async def speak_via_robot(app, audio_bytes_wav: bytes):
+    """Play TTS audio on robot speaker via GStreamer + ALSA dmix.
+
+    Uses the stock Reachy Mini audio pipeline: alsasink with the
+    reachymini_audio_sink dmix device (defined in ~/.asoundrc).
+    dmix allows shared access so both daemon and app can play audio.
+    """
+    import os
+    import subprocess
+    import tempfile
+
+    wav_path = None
+    try:
+        with tempfile.NamedTemporaryFile(suffix=".wav", delete=False, dir="/tmp") as f:
+            f.write(audio_bytes_wav)
+            wav_path = f.name
+
+        logger.warning(f"TTS robot: playing {len(audio_bytes_wav)} bytes via ALSA dmix")
+
+        cmd = [
+            "gst-launch-1.0", "-q",
+            "filesrc", f"location={wav_path}", "!",
+            "decodebin", "!",
+            "audioconvert", "!",
+            "audioresample", "!",
+            "audio/x-raw,format=S16LE,rate=16000,channels=2", "!",
+            "volume", "volume=2.0", "!",
+            "alsasink", "device=reachymini_audio_sink", "buffer-time=50000",
+        ]
+
+        proc = await asyncio.create_subprocess_exec(
+            *cmd, stdout=subprocess.DEVNULL, stderr=subprocess.PIPE)
+        _, stderr = await asyncio.wait_for(proc.communicate(), timeout=30)
+
+        if proc.returncode != 0:
+            logger.error(f"TTS GStreamer error (rc={proc.returncode}): {stderr.decode()[:200]}")
+        else:
+            logger.warning("TTS robot: playback complete")
+
+    except asyncio.TimeoutError:
+        logger.error("TTS GStreamer playback timed out")
+    except Exception as e:
+        logger.error(f"Robot speaker error: {e}")
+    finally:
+        if wav_path:
+            try:
+                os.unlink(wav_path)
+            except OSError:
+                pass
+
+
+async def speak_via_browser(app, audio_bytes):
+    """Send TTS audio to browser clients via /ws/transcribe WebSocket."""
+    import base64
+    msg = json.dumps({
+        "type": "tts_audio",
+        "audio": base64.b64encode(audio_bytes).decode(),
+        "format": "wav"
+    })
+    dead = []
+    for ws in app._transcribe_websockets:
+        try:
+            await ws.send_text(msg)
+        except Exception:
+            dead.append(ws)
+    for ws in dead:
+        app._transcribe_websockets.discard(ws)
+
+
+def _sanitize_for_tts(text: str) -> str:
+    """Strip markdown, symbols, and formatting that TTS engines choke on."""
+    # Remove markdown bold/italic markers
+    text = re.sub(r'\*+', '', text)
+    # Remove markdown headers
+    text = re.sub(r'^#{1,6}\s+', '', text, flags=re.MULTILINE)
+    # Remove markdown links [text](url) -> text
+    text = re.sub(r'\[([^\]]+)\]\([^)]+\)', r'\1', text)
+    # Remove markdown code blocks and inline code
+    text = re.sub(r'```[^`]*```', '', text, flags=re.DOTALL)
+    text = re.sub(r'`([^`]+)`', r'\1', text)
+    # Remove bullet points and numbered list markers
+    text = re.sub(r'^[\s]*[-•*]\s+', '', text, flags=re.MULTILINE)
+    text = re.sub(r'^[\s]*\d+\.\s+', '', text, flags=re.MULTILINE)
+    # Remove emoji (Unicode emoji ranges)
+    text = re.sub(r'[\U0001F600-\U0001F64F\U0001F300-\U0001F5FF\U0001F680-\U0001F6FF'
+                  r'\U0001F1E0-\U0001F1FF\U00002702-\U000027B0\U0001F900-\U0001F9FF'
+                  r'\U0001FA00-\U0001FA6F\U0001FA70-\U0001FAFF\U00002600-\U000026FF]+', '', text)
+    # Collapse multiple whitespace/newlines
+    text = re.sub(r'\s+', ' ', text).strip()
+    return text
+
+
+# TTS serialisation lock — prevents overlapping speech
+_tts_lock = asyncio.Lock()
+
+
+async def speak_text(app, text: str, settings: dict):
+    """Convert text to speech and route to configured output.
+
+    Acquires _tts_lock so only one TTS request plays at a time.
+    Concurrent callers queue behind the lock (FIFO via asyncio).
+    """
+    text = _sanitize_for_tts(text)
+    if not text:
+        return
+
+    async with _tts_lock:
+        await _speak_text_inner(app, text, settings)
+
+
+async def _speak_text_inner(app, text: str, settings: dict):
+    """Inner TTS logic — called under _tts_lock."""
+    provider = settings.get("tts_provider", "")
+    model = settings.get("tts_model", "")
+    voice = settings.get("tts_voice", "alloy")
+    logger.warning(f"TTS speak_text: provider={provider!r} model={model!r} voice={voice!r}")
+
+    if not provider or not model:
+        logger.warning("TTS not configured — no provider/model set")
+        return
+
+    api_keys = settings.get("api_keys", {})
+    api_key = api_keys.get(provider, "")
+    if not api_key:
+        logger.warning(f"No API key for TTS provider: {provider}")
+        return
+
+    logger.warning(f"TTS: calling litellm.aspeech for {provider}/{model} voice={voice}")
+
+    try:
+        import litellm
+
+        # Broadcast speaking status
+        await _broadcast(app, {"type": "speaking_status", "speaking": True, "source": "tts"})
+
+        # Always request WAV for robot output (GStreamer decodes it)
+        # ElevenLabs needs specific format codes
+        if provider == "elevenlabs":
+            response_format = "wav_16000"
+        else:
+            response_format = "wav"
+
+        response = await litellm.aspeech(
+            model=f"{provider}/{model}" if "/" not in model else model,
+            voice=voice,
+            input=text,
+            response_format=response_format,
+            api_key=api_key,
+        )
+        audio_bytes = response.content
+
+        if settings.get("audio_output") == "browser":
+            await speak_via_browser(app, audio_bytes)
+        else:
+            # Pass raw WAV bytes to GStreamer (it handles decoding/resampling)
+            await speak_via_robot(app, audio_bytes)
+
+    except Exception as e:
+        logger.error(f"TTS error: {e}")
+    finally:
+        await _broadcast(app, {"type": "speaking_status", "speaking": False, "source": "tts"})
+
+
+# ── Broadcasting helper ────────────────────────────────────────
+
+async def _broadcast(app, message: dict):
+    """Broadcast to all transcript WebSocket clients."""
+    if not hasattr(app, '_transcribe_websockets'):
+        return
+    msg = json.dumps(message)
+    dead = []
+    for ws in app._transcribe_websockets:
+        try:
+            await ws.send_text(msg)
+        except Exception:
+            dead.append(ws)
+    for ws in dead:
+        app._transcribe_websockets.discard(ws)
+
+
+# ── Provider helpers ───────────────────────────────────────────
+
+def get_available_providers(settings: dict) -> dict:
+    """Return providers that have API keys configured, grouped by capability.
+
+    Uses live model discovery (cached) to determine actual capabilities.
+    """
+    api_keys = settings.get("api_keys", {})
+    result = {"llm": [], "stt": [], "tts": [], "vlm": []}
+
+    for provider, key in api_keys.items():
+        if not key or provider not in _PROVIDER_APIS:
+            continue
+        discovered = _discover_models(provider, key)
+        caps = discovered["caps"]
+        for cap in ("llm", "stt", "tts"):
+            if caps.get(cap):
+                result[cap].append(provider)
+        # VLM: provider has LLM models AND at least one supports vision
+        if caps.get("llm"):
+            llm_models = discovered["models"].get("llm", [])
+            if any(_model_supports_vision(provider, m) for m in llm_models):
+                result["vlm"].append(provider)
+
+    return result
+
+
+# ── Route registration ─────────────────────────────────────────
+
+def register_routes(app) -> None:
+    """Register conversation routes on the app."""
+    from ..settings import load_settings
+
+    @app.settings_app.get("/api/conversation/known-providers")
+    def known_providers():
+        """Return all known providers and their capabilities (for API key entry UI).
+
+        Returns static capability map — shows what each provider *can* offer,
+        even without an API key. Actual model lists come from live discovery.
+        """
+        return _KNOWN_CAPS
+
+    @app.settings_app.get("/api/conversation/providers")
+    def available_providers():
+        """Return providers filtered by configured API keys."""
+        settings = load_settings()
+        return get_available_providers(settings)
+
+    @app.settings_app.get("/api/conversation/models")
+    def get_models(provider: str, capability: str = "llm", web_search: bool = False):
+        """Return models for a provider and capability (discovered from live API).
+
+        Requires an API key for the provider (from settings).
+        If web_search=true, only return models that support web search.
+        """
+        settings = load_settings()
+        api_key = settings.get("api_keys", {}).get(provider, "")
+        if not api_key:
+            return {"provider": provider, "capability": capability, "models": [],
+                    "web_search_filter": web_search, "error": "no_api_key"}
+        discovered = _discover_models(provider, api_key)
+        if capability == "vlm":
+            # VLM = LLM models filtered to vision-capable ones
+            models = [m for m in discovered["models"].get("llm", [])
+                      if _model_supports_vision(provider, m)]
+        else:
+            models = discovered["models"].get(capability, [])
+        if web_search:
+            models = [m for m in models if _model_supports_web_search(provider, m)]
+        return {"provider": provider, "capability": capability, "models": models,
+                "web_search_filter": web_search}
+
+    @app.settings_app.get("/api/conversation/voices")
+    def get_voices(provider: str, model: str = ""):
+        """Return voices for a TTS provider (discovered dynamically).
+
+        Returns: {"provider": str, "voices": [{"id": str, "name": str}, ...]}
+        The `id` is what gets saved to settings and sent to LiteLLM.
+        The `name` is the display label for the UI.
+        """
+        settings = load_settings()
+        api_key = settings.get("api_keys", {}).get(provider, "")
+        if not model:
+            model = settings.get("tts_model", "")
+        voices = _get_voices_for_provider(provider, api_key, model)
+        return {"provider": provider, "voices": voices}
+
+    @app.settings_app.get("/api/conversation/default-prompt")
+    def default_prompt():
+        """Return the built-in default system prompt template."""
+        return {"prompt": SYSTEM_PROMPT}
+
+    @app.settings_app.get("/api/conversation/web-search-support")
+    def web_search_support(provider: str = "", model: str = ""):
+        """Check if a provider/model combo supports web search."""
+        if not provider or not model:
+            settings = load_settings()
+            provider = provider or settings.get("llm_provider", "")
+            model = model or settings.get("llm_model", "")
+        if not provider or not model:
+            return {"supported": False, "model": ""}
+        supported = _model_supports_web_search(provider, model)
+        return {"supported": supported, "model": f"{provider}/{model}"}
+
+    @app.settings_app.post("/api/conversation/chat")
+    async def chat(body: dict):
+        """Send a message to the LLM with tool calling support.
+
+        Body:
+            text: str - The message text
+            session_id: str - Session identifier (default "default")
+            speak: bool - Whether to TTS the response (default False)
+            confidence: int - Audio confidence percentage (default 100)
+            volume: int - Audio volume percentage (default 50)
+        """
+        text = body.get("text", "").strip()
+        if not text:
+            return {"error": "Empty message"}
+
+        session_id = body.get("session_id", "default")
+        should_speak = body.get("speak", False)
+        confidence = body.get("confidence", 100)
+        volume = body.get("volume", 50)
+
+        settings = load_settings()
+        provider = settings.get("llm_provider", "")
+        model = settings.get("llm_model", "")
+
+        if not provider or not model:
+            return {"error": "LLM provider/model not configured"}
+
+        api_keys = settings.get("api_keys", {})
+        api_key = api_keys.get(provider, "")
+        if not api_key:
+            return {"error": f"No API key for provider: {provider}"}
+
+        import litellm
+
+        # Build messages
+        history = _get_history(session_id)
+        custom_prompt = settings.get("system_prompt", "").strip()
+        prompt_template = custom_prompt if custom_prompt else SYSTEM_PROMPT
+        system_msg = prompt_template.format(conf=confidence, vol=volume)
+        history.append({"role": "user", "content": text})
+        _trim_history(history)
+
+        messages = [{"role": "system", "content": system_msg}] + list(history)
+
+        # LLM model string
+        llm_model = f"{provider}/{model}" if "/" not in model else model
+
+        # Common kwargs for all acompletion calls
+        completion_kwargs = dict(
+            model=llm_model,
+            tools=TOOLS,
+            tool_choice="auto",
+            api_key=api_key,
+            timeout=config.TIMEOUTS['litellm_chat'],
+        )
+
+        # Auto-enable web search if the selected model supports it
+        if _model_supports_web_search(provider, model):
+            completion_kwargs["web_search_options"] = {
+                "search_context_size": "medium",
+            }
+            logger.info(f"Web search enabled for {llm_model}")
+
+        # Our tool names — anything else is provider-managed (e.g. web_search)
+        _OUR_TOOLS = {t["function"]["name"] for t in TOOLS}
+
+        all_tool_calls = []
+        ignored = False
+        response_text = ""
+
+        try:
+            # Initial completion
+            response = await litellm.acompletion(
+                messages=messages,
+                **completion_kwargs,
+            )
+
+            msg = response.choices[0].message
+
+            # Tool call loop
+            while msg.tool_calls:
+                # Capture any text returned alongside tool calls
+                # (Anthropic often returns text + tools in a single response)
+                if msg.content and not response_text:
+                    response_text = msg.content
+
+                # Separate our tools from provider-managed ones (e.g. web_search)
+                our_calls = [tc for tc in msg.tool_calls if tc.function.name in _OUR_TOOLS]
+                provider_calls = [tc for tc in msg.tool_calls if tc.function.name not in _OUR_TOOLS]
+
+                if provider_calls:
+                    logger.info(f"Provider-managed tools (skipping): {[tc.function.name for tc in provider_calls]}")
+
+                # If only provider tools, no need to execute or loop — text is the answer
+                if not our_calls:
+                    break
+
+                # Build assistant message with ONLY our tool calls (strip provider ones)
+                assistant_msg = msg.model_dump()
+                assistant_msg["tool_calls"] = [tc.model_dump() for tc in our_calls]
+                history.append(assistant_msg)
+
+                # Execute our tools
+                for tc in our_calls:
+                    fn_name = tc.function.name
+                    fn_args = json.loads(tc.function.arguments) if tc.function.arguments else {}
+
+                    # Broadcast tool start
+                    await _broadcast(app, {
+                        "type": "tool",
+                        "tool": fn_name,
+                        "args": fn_args,
+                        "status": "started"
+                    })
+
+                    result = await _execute_tool(fn_name, fn_args)
+
+                    all_tool_calls.append({
+                        "name": fn_name,
+                        "args": fn_args,
+                        "result": result
+                    })
+
+                    # Broadcast tool result
+                    await _broadcast(app, {
+                        "type": "tool",
+                        "tool": fn_name,
+                        "args": fn_args,
+                        "result": result,
+                        "status": "completed"
+                    })
+
+                    # Add tool result to history
+                    history.append({
+                        "role": "tool",
+                        "tool_call_id": tc.id,
+                        "content": json.dumps(result)
+                    })
+
+                # If the only tool call is ignore, treat as ignored
+                if len(our_calls) == 1 and our_calls[0].function.name == "ignore":
+                    ignored = True
+                    break
+
+                # Only call LLM again if we don't have a text response yet
+                if not response_text:
+                    messages = [{"role": "system", "content": system_msg}] + list(history)
+                    response = await litellm.acompletion(
+                        messages=messages,
+                        **completion_kwargs,
+                    )
+                    msg = response.choices[0].message
+                else:
+                    break
+
+            # Extract final response text
+            if not ignored and not response_text and msg.content:
+                response_text = msg.content
+
+            if response_text and not ignored:
+                history.append({"role": "assistant", "content": response_text})
+
+            _trim_history(history)
+
+            # TTS if requested and not ignored
+            if should_speak and response_text and not ignored:
+                asyncio.create_task(speak_text(app, response_text, settings))
+
+            result = {
+                "response": response_text,
+                "tool_calls": all_tool_calls,
+                "ignored": ignored,
+                "provider": provider,
+                "model": model,
+                "session_id": session_id,
+            }
+
+            # Broadcast response
+            if response_text or all_tool_calls:
+                await _broadcast(app, {
+                    "type": "assistant_response",
+                    "text": response_text,
+                    "source": model or provider,
+                    "tool_calls": all_tool_calls,
+                    "ignored": ignored,
+                })
+
+            return result
+
+        except Exception as e:
+            logger.error(f"Chat error: {e}", exc_info=True)
+            error_msg = str(e)
+            await _broadcast(app, {"type": "error", "error": error_msg, "source": "conversation"})
+            return {"error": error_msg}
+
+    @app.settings_app.post("/api/conversation/reset")
+    async def reset_session(body: dict = {}):
+        """Clear conversation history for a session."""
+        session_id = body.get("session_id", "browser")
+        if session_id in _conversation_histories:
+            _conversation_histories[session_id].clear()
+            logger.info(f"Session '{session_id}' reset")
+        return {"status": "ok", "session_id": session_id}
+
+    @app.settings_app.post("/api/conversation/speak")
+    async def speak_only(body: dict):
+        """TTS-only endpoint — no LLM, just speak text."""
+        text = body.get("text", "").strip()
+        if not text:
+            return {"error": "Empty text"}
+
+        settings = load_settings()
+        await speak_text(app, text, settings)
+        return {"status": "ok", "text": text}

hello_world/api/health.py

@@ -0,0 +1,80 @@
+"""
+Health Check API - Service health monitoring endpoints.
+
+Endpoints:
+    GET /api/health - Overall system health
+    GET /api/health/daemon - Reachy daemon status
+    GET /api/health/config - Current configuration (for debugging)
+"""
+
+__all__ = ['register_routes']
+
+import asyncio
+import logging
+import urllib.error
+import urllib.request
+
+from ..config import config
+
+logger = logging.getLogger("reachy_mini.app.hello_world.health")
+
+
+def _check_http_service(url: str, timeout: float = 2.0) -> dict:
+    """Check if an HTTP service is reachable."""
+    try:
+        req = urllib.request.Request(url, method="GET")
+        with urllib.request.urlopen(req, timeout=timeout) as resp:
+            return {"status": "healthy", "code": resp.getcode(), "url": url}
+    except urllib.error.HTTPError as e:
+        return {"status": "unhealthy", "code": e.code, "error": str(e.reason), "url": url}
+    except urllib.error.URLError as e:
+        return {"status": "unreachable", "error": str(e.reason), "url": url}
+    except TimeoutError:
+        return {"status": "timeout", "error": f"Request timed out after {timeout}s", "url": url}
+    except Exception as e:
+        return {"status": "error", "error": str(e), "url": url}
+
+
+def register_routes(app) -> None:
+    """Register health check routes on the app."""
+
+    timeout = config.TIMEOUTS['health_check']
+
+    @app.settings_app.get("/api/health")
+    async def get_overall_health():
+        loop = asyncio.get_event_loop()
+
+        daemon_result = await loop.run_in_executor(
+            None, _check_http_service, f"{config.DAEMON_URL}/api/health", timeout)
+
+        services = {"daemon": daemon_result}
+        healthy_count = sum(1 for s in services.values() if s["status"] == "healthy")
+
+        # Check LiteLLM provider availability
+        from ..settings import load_settings
+        settings = load_settings()
+        api_keys = settings.get("api_keys", {})
+        configured_providers = [k for k, v in api_keys.items() if v]
+
+        return {
+            "status": "healthy" if healthy_count > 0 else "degraded",
+            "healthy_services": healthy_count,
+            "total_services": len(services),
+            "services": services,
+            "configured_providers": configured_providers,
+        }
+
+    @app.settings_app.get("/api/health/daemon")
+    async def get_daemon_health():
+        loop = asyncio.get_event_loop()
+        result = await loop.run_in_executor(
+            None, _check_http_service, f"{config.DAEMON_URL}/api/health", timeout)
+        return {"service": "daemon", **result}
+
+    @app.settings_app.get("/api/health/config")
+    async def get_config_info():
+        return {
+            "daemon_url": config.DAEMON_URL,
+            "media_dir": str(config.MEDIA_BASE_DIR),
+            "timeouts": config.TIMEOUTS,
+        }

hello_world/api/listener.py

@@ -0,0 +1,648 @@
+"""
+Listener API - Headless voice listener with local VAD and cloud STT.
+
+Captures audio from robot mic (arecord) or browser mic (via /ws/intercom),
+runs webrtcvad locally for speech detection, then sends accumulated speech
+to LiteLLM STT for transcription.
+
+Endpoints:
+    GET  /api/listener/status - Get listener status
+    POST /api/listener/start - Start the listener
+    POST /api/listener/stop - Stop the listener
+    POST /api/listener/mute - Mute with optional auto-unmute duration
+"""
+
+__all__ = ['register_routes', 'feed_audio_chunk', 'is_listener_running']
+
+import asyncio
+import io
+import json
+import logging
+import math
+import subprocess
+import threading
+import time
+import wave
+from dataclasses import dataclass
+from typing import Optional
+
+import numpy as np
+
+from ..config import config
+
+logger = logging.getLogger("reachy_mini.app.hello_world.listener")
+
+# ── Module state ───────────────────────────────────────────────
+
+_listener_task: Optional[asyncio.Task] = None
+_listener_running = False
+_listener_lock = threading.Lock()
+_stop_event: Optional[asyncio.Event] = None
+_app_ref = None
+
+_muted = False
+_mute_lock = threading.Lock()
+
+# Antenna wiggle state
+_wiggle_pattern_index = 0
+
+# Browser mic audio queue (fed from /ws/intercom handler)
+_browser_audio_queue: Optional[asyncio.Queue] = None
+
+
+def is_listener_running() -> bool:
+    return _listener_running
+
+
+def feed_audio_chunk(pcm_bytes: bytes):
+    """Feed PCM audio from browser mic into the listener pipeline.
+
+    Called from /ws/intercom handler when audio_input is "browser".
+    Thread-safe — puts data on an asyncio queue.
+    """
+    if _browser_audio_queue is not None and _listener_running:
+        try:
+            _browser_audio_queue.put_nowait(pcm_bytes)
+        except asyncio.QueueFull:
+            pass  # Drop frames if queue backs up
+
+
+# ── VAD state machine ──────────────────────────────────────────
+
+@dataclass
+class QueuedTranscription:
+    text: str
+    confidence: int
+    audio_level: int
+    timestamp: float
+
+
+class VADStateMachine:
+    """webrtcvad-based speech detection state machine."""
+
+    FRAME_DURATION_MS = 30
+    FRAME_BYTES = int(16000 * 2 * FRAME_DURATION_MS / 1000)  # 960 bytes
+    MIN_SPEECH_FRAMES = int(300 / FRAME_DURATION_MS)  # 10 frames = 300ms
+    SILENCE_FRAMES = int(1000 / FRAME_DURATION_MS)     # ~33 frames = 1s
+    PRE_BUFFER_FRAMES = 20  # Keep last 600ms of audio before speech detection
+
+    def __init__(self):
+        from collections import deque
+        import webrtcvad
+        self.vad = webrtcvad.Vad(2)  # Aggressiveness 0-3 (2 = balanced)
+        self.state = "silence"  # silence | speech
+        self.speech_count = 0
+        self.silence_count = 0
+        self.audio_buffer = bytearray()
+        self._frame_buffer = bytearray()
+        self._pre_buffer = deque(maxlen=self.PRE_BUFFER_FRAMES)
+
+    def process_audio(self, pcm_bytes: bytes) -> Optional[bytes]:
+        """Feed raw PCM and return accumulated speech audio when silence detected.
+
+        Returns None if still in speech, or bytes of complete utterance.
+        """
+        self._frame_buffer.extend(pcm_bytes)
+
+        result = None
+
+        while len(self._frame_buffer) >= self.FRAME_BYTES:
+            frame = bytes(self._frame_buffer[:self.FRAME_BYTES])
+            del self._frame_buffer[:self.FRAME_BYTES]
+
+            is_speech = self.vad.is_speech(frame, 16000)
+
+            if self.state == "silence":
+                self._pre_buffer.append(frame)
+                if is_speech:
+                    self.speech_count += 1
+                    if self.speech_count >= self.MIN_SPEECH_FRAMES:
+                        self.state = "speech"
+                        # Seed audio buffer with pre-buffered frames (captures lead-in)
+                        self.audio_buffer = bytearray()
+                        for f in self._pre_buffer:
+                            self.audio_buffer.extend(f)
+                        self._pre_buffer.clear()
+                        self.silence_count = 0
+                        logger.debug("VAD: Speech started (with %d pre-buffer frames)", len(self.audio_buffer) // self.FRAME_BYTES)
+                else:
+                    self.speech_count = 0
+
+            elif self.state == "speech":
+                self.audio_buffer.extend(frame)
+                if not is_speech:
+                    self.silence_count += 1
+                    if self.silence_count >= self.SILENCE_FRAMES:
+                        # Speech ended — return accumulated audio
+                        result = bytes(self.audio_buffer)
+                        self.audio_buffer = bytearray()
+                        self.state = "silence"
+                        self.speech_count = 0
+                        self.silence_count = 0
+                        logger.debug(f"VAD: Speech ended ({len(result)} bytes)")
+                else:
+                    self.silence_count = 0
+
+                # Always buffer in speech state
+                if self.state == "speech":
+                    pass  # Already extending above
+
+        return result
+
+
+# ── STT via LiteLLM ───────────────────────────────────────────
+
+async def transcribe_audio(audio_buffer: bytes, settings: dict) -> dict:
+    """Send accumulated speech audio to LiteLLM STT."""
+    provider = settings.get("stt_provider", "openai")
+    model = settings.get("stt_model", "whisper-1")
+    api_keys = settings.get("api_keys", {})
+    api_key = api_keys.get(provider, "")
+
+    if not api_key:
+        return {"error": f"No API key for STT provider: {provider}"}
+
+    # Create WAV in memory
+    wav_buffer = io.BytesIO()
+    with wave.open(wav_buffer, 'wb') as wf:
+        wf.setnchannels(1)
+        wf.setsampwidth(2)
+        wf.setframerate(16000)
+        wf.writeframes(audio_buffer)
+    wav_buffer.seek(0)
+
+    try:
+        import litellm
+
+        stt_model = f"{provider}/{model}" if "/" not in model else model
+        response = await litellm.atranscription(
+            model=stt_model,
+            file=("audio.wav", wav_buffer),
+            api_key=api_key,
+        )
+        return {"text": response.text}
+    except Exception as e:
+        logger.error(f"STT error: {e}")
+        return {"error": str(e)}
+
+
+# ── Broadcasting ───────────────────────────────────────────────
+
+async def _broadcast(app, message: dict):
+    """Broadcast to transcript WebSocket clients."""
+    if not hasattr(app, '_transcribe_websockets'):
+        return
+    msg = json.dumps(message)
+    dead = []
+    for ws in app._transcribe_websockets:
+        try:
+            await ws.send_text(msg)
+        except Exception:
+            dead.append(ws)
+    for ws in dead:
+        app._transcribe_websockets.discard(ws)
+
+
+# ── Antenna wiggle ─────────────────────────────────────────────
+
+async def _wiggle_antennas():
+    """Quick antenna wiggle to acknowledge input."""
+    global _wiggle_pattern_index
+
+    try:
+        loop = asyncio.get_event_loop()
+        _wiggle_pattern_index = (_wiggle_pattern_index + 1) % 3
+        patterns = [(-30, -30), (-30, 10), (10, -30)]
+        left_deg, right_deg = patterns[_wiggle_pattern_index]
+
+        def do_wiggle():
+            url = config.get_daemon_endpoint("move/set_target")
+            data = json.dumps({
+                "target_antennas": [math.radians(left_deg), math.radians(right_deg)]
+            }).encode('utf-8')
+            req = urllib.request.Request(url, data=data, method="POST")
+            req.add_header('Content-Type', 'application/json')
+            try:
+                urllib.request.urlopen(req, timeout=config.TIMEOUTS['daemon_move'])
+            except Exception:
+                pass
+
+        import urllib.request
+        await loop.run_in_executor(None, do_wiggle)
+    except Exception as e:
+        logger.debug(f"Antenna wiggle failed: {e}")
+
+
+# ── Main listener ──────────────────────────────────────────────
+
+async def _run_listener(app, settings: dict):
+    """Main listener coroutine."""
+    global _listener_running, _stop_event, _browser_audio_queue
+
+    _stop_event = asyncio.Event()
+    _listener_running = True
+    _browser_audio_queue = asyncio.Queue(maxsize=200)
+    audio_process = None
+
+    try:
+        audio_input = settings.get("audio_input", "robot")
+        mic_gain = settings.get("mic_gain", 5.0)
+
+        logger.warning("Listener: starting (audio_input=%s, gain=%.1f)", audio_input, mic_gain)
+
+        vad = VADStateMachine()
+        logger.warning("Listener: VAD initialized (webrtcvad loaded)")
+
+        # Transcription queue
+        transcription_queue: list[QueuedTranscription] = []
+        processing_response = False
+        queue_lock = asyncio.Lock()
+
+        await _broadcast(app, {"type": "listener_status", "running": True})
+
+        async def process_queued_transcriptions():
+            """Process queued transcriptions as a batch."""
+            nonlocal processing_response, transcription_queue
+
+            async with queue_lock:
+                if not transcription_queue:
+                    return
+
+                if len(transcription_queue) == 1:
+                    item = transcription_queue[0]
+                    combined_text = item.text
+                    avg_conf = item.confidence
+                    avg_vol = item.audio_level
+                else:
+                    texts = []
+                    total_conf = 0
+                    total_vol = 0
+                    first_ts = transcription_queue[0].timestamp
+                    for item in transcription_queue:
+                        elapsed = item.timestamp - first_ts
+                        texts.append(f"[+{elapsed:.1f}s, conf:{item.confidence}%, vol:{item.audio_level}%] {item.text}")
+                        total_conf += item.confidence
+                        total_vol += item.audio_level
+                    combined_text = "\n".join(texts)
+                    avg_conf = total_conf // len(transcription_queue)
+                    avg_vol = total_vol // len(transcription_queue)
+
+                transcription_queue = []
+                processing_response = True
+
+            try:
+                await _wiggle_antennas()
+
+                # Send to conversation chat
+                import urllib.request
+                import urllib.error
+                loop = asyncio.get_event_loop()
+
+                def do_chat():
+                    url = "http://localhost:8042/api/conversation/chat"
+                    data = json.dumps({
+                        "text": combined_text,
+                        "session_id": "headless",
+                        "speak": True,
+                        "confidence": avg_conf,
+                        "volume": avg_vol,
+                    }).encode('utf-8')
+                    req = urllib.request.Request(url, data=data, method="POST")
+                    req.add_header('Content-Type', 'application/json')
+                    with urllib.request.urlopen(req, timeout=120) as resp:
+                        return json.loads(resp.read().decode())
+
+                result = await loop.run_in_executor(None, do_chat)
+                logger.info(f"Chat result: ignored={result.get('ignored')}, response={str(result.get('response', ''))[:50]}")
+
+            except Exception as e:
+                logger.error(f"Chat request failed: {e}")
+            finally:
+                async with queue_lock:
+                    processing_response = False
+                if transcription_queue:
+                    asyncio.create_task(process_queued_transcriptions())
+
+        async def audio_source_robot():
+            """Read audio from robot mic (arecord)."""
+            nonlocal audio_process
+
+            # Safety: check if arecord already running
+            try:
+                result = subprocess.run(
+                    ['pgrep', '-f', 'arecord.*reachymini'],
+                    capture_output=True, timeout=2
+                )
+                if result.returncode == 0:
+                    logger.warning("arecord already running, killing it first")
+                    subprocess.run(['pkill', '-f', 'arecord.*reachymini'], timeout=2)
+                    await asyncio.sleep(0.5)
+            except Exception:
+                pass
+
+            audio_process = subprocess.Popen(
+                ['arecord', '-D', 'reachymini_audio_src', '-f', 'S16_LE', '-r', '16000', '-c', '2', '-t', 'raw'],
+                stdout=subprocess.PIPE,
+                stderr=subprocess.DEVNULL
+            )
+            logger.info("Listener: Started arecord")
+
+            loop = asyncio.get_event_loop()
+            waveform_counter = 0
+
+            while not _stop_event.is_set():
+                try:
+                    data = await asyncio.wait_for(
+                        loop.run_in_executor(None, lambda: audio_process.stdout.read(3200)),
+                        timeout=1.0
+                    )
+                    if not data:
+                        break
+
+                    if _muted:
+                        waveform_counter += 1
+                        if waveform_counter >= 3:
+                            waveform_counter = 0
+                            await _broadcast(app, {
+                                "type": "waveform", "samples": [0.0] * 32,
+                                "level": 0, "muted": True
+                            })
+                        continue
+
+                    # Stereo to mono
+                    stereo = np.frombuffer(data, dtype=np.int16)
+                    mono = stereo[::2]
+
+                    # Apply gain
+                    if mic_gain != 1.0:
+                        mono = np.clip(mono.astype(np.float32) * mic_gain, -32768, 32767).astype(np.int16)
+
+                    # Waveform broadcast every 3rd chunk (~10fps)
+                    waveform_counter += 1
+                    if waveform_counter >= 3:
+                        waveform_counter = 0
+                        rms = np.sqrt(np.mean(mono.astype(np.float32) ** 2))
+                        level = min(100, int(rms / 100))
+                        downsampled = mono[::16][:64]
+                        samples = (np.abs(downsampled) / 5000.0).clip(0, 1).tolist()
+                        await _broadcast(app, {
+                            "type": "waveform", "samples": samples, "level": level
+                        })
+
+                    # Feed to VAD (fire-and-forget so audio loop isn't blocked)
+                    speech_audio = vad.process_audio(mono.tobytes())
+                    if speech_audio:
+                        asyncio.create_task(handle_speech(speech_audio))
+
+                except asyncio.TimeoutError:
+                    continue
+                except Exception as e:
+                    logger.error(f"Audio source error: {e}")
+                    break
+
+        async def audio_source_browser():
+            """Read audio from browser mic via queue (fed from /ws/intercom)."""
+            waveform_counter = 0
+
+            while not _stop_event.is_set():
+                try:
+                    pcm_bytes = await asyncio.wait_for(
+                        _browser_audio_queue.get(), timeout=1.0
+                    )
+
+                    if _muted:
+                        continue
+
+                    mono = np.frombuffer(pcm_bytes, dtype=np.int16)
+
+                    # Apply gain
+                    if mic_gain != 1.0:
+                        mono = np.clip(mono.astype(np.float32) * mic_gain, -32768, 32767).astype(np.int16)
+
+                    # Waveform broadcast
+                    waveform_counter += 1
+                    if waveform_counter >= 3:
+                        waveform_counter = 0
+                        rms = np.sqrt(np.mean(mono.astype(np.float32) ** 2))
+                        level = min(100, int(rms / 100))
+                        downsampled = mono[::16][:64]
+                        samples = (np.abs(downsampled) / 5000.0).clip(0, 1).tolist()
+                        await _broadcast(app, {
+                            "type": "waveform", "samples": samples, "level": level
+                        })
+
+                    speech_audio = vad.process_audio(mono.tobytes())
+                    if speech_audio:
+                        asyncio.create_task(handle_speech(speech_audio))
+
+                except asyncio.TimeoutError:
+                    continue
+                except Exception as e:
+                    logger.error(f"Browser audio error: {e}")
+
+        async def handle_speech(audio_bytes: bytes):
+            """Handle completed speech segment — transcribe and queue."""
+            nonlocal processing_response, transcription_queue
+
+            # Calculate RMS-based confidence estimate
+            audio_np = np.frombuffer(audio_bytes, dtype=np.int16).astype(np.float32)
+            rms = np.sqrt(np.mean(audio_np ** 2))
+            audio_level = min(100, int(rms / 100))
+            # Rough confidence based on signal quality
+            confidence = min(100, int(rms / 50))
+
+            # Re-read settings for dynamic threshold changes
+            from ..settings import load_settings
+            current_settings = load_settings()
+
+            result = await transcribe_audio(audio_bytes, current_settings)
+            text = result.get("text", "").strip()
+
+            if not text:
+                return
+
+            logger.info(f"Transcription: '{text}' conf={confidence} vol={audio_level}")
+
+            # Check thresholds
+            conf_threshold = current_settings.get("conf_threshold", 0)
+            vol_threshold = current_settings.get("vol_threshold", 0)
+            below_threshold = confidence < conf_threshold or audio_level < vol_threshold
+
+            # Broadcast to browsers (include threshold result so UI can grey out)
+            await _broadcast(app, {
+                "type": "transcription",
+                "text": text,
+                "confidence": confidence,
+                "audio_level": audio_level,
+                "source": "listener",
+                "below_threshold": below_threshold,
+            })
+
+            if below_threshold:
+                logger.debug(f"Filtered: conf={confidence}<{conf_threshold} or vol={audio_level}<{vol_threshold}")
+                return
+
+            # Queue transcription
+            async with queue_lock:
+                transcription_queue.append(QueuedTranscription(
+                    text=text,
+                    confidence=confidence,
+                    audio_level=audio_level,
+                    timestamp=time.time()
+                ))
+                if not processing_response:
+                    asyncio.create_task(process_queued_transcriptions())
+
+        # Start the appropriate audio source
+        if audio_input == "browser":
+            logger.info("Listener: Using browser mic input")
+            await audio_source_browser()
+        else:
+            logger.info("Listener: Using robot mic input")
+            await audio_source_robot()
+
+    except Exception as e:
+        logger.exception(f"Listener error: {e}")
+
+    finally:
+        _listener_running = False
+        _browser_audio_queue = None
+
+        if audio_process:
+            audio_process.terminate()
+            try:
+                audio_process.wait(timeout=2)
+            except subprocess.TimeoutExpired:
+                audio_process.kill()
+
+        try:
+            await _broadcast(app, {"type": "listener_status", "running": False})
+        except Exception:
+            pass
+
+        logger.info("Listener stopped")
+
+
+# ── Listener control ───────────────────────────────────────────
+
+def get_listener_status() -> dict:
+    global _listener_running
+
+    # Check if the asyncio task is actually alive
+    task_alive = _listener_task is not None and not _listener_task.done()
+
+    # Auto-recover stale state: flag says running but task is dead
+    if _listener_running and not task_alive:
+        logger.warning("Listener: stale running state detected, resetting")
+        _listener_running = False
+
+    arecord_running = False
+    try:
+        result = subprocess.run(
+            ['pgrep', '-f', 'arecord.*reachymini'],
+            capture_output=True, timeout=2
+        )
+        arecord_running = result.returncode == 0
+    except Exception:
+        pass
+
+    return {
+        "running": task_alive or arecord_running,
+        "task_active": task_alive,
+        "arecord_active": arecord_running,
+        "muted": _muted
+    }
+
+
+def set_listener_muted(muted: bool) -> bool:
+    global _muted
+    with _mute_lock:
+        old = _muted
+        _muted = muted
+        if old != muted:
+            logger.info(f"Listener mute: {muted}")
+    return _muted
+
+
+def stop_listener() -> bool:
+    global _stop_event, _listener_running
+    with _listener_lock:
+        task_alive = _listener_task is not None and not _listener_task.done()
+
+        if not task_alive:
+            # Task is dead — just reset flag and clean up
+            _listener_running = False
+            return True
+
+        if _stop_event:
+            _stop_event.set()
+        return True
+
+
+# ── Route registration ─────────────────────────────────────────
+
+def register_routes(app) -> None:
+    """Register listener routes on the app."""
+    from ..settings import load_settings
+
+    @app.settings_app.get("/api/listener/status")
+    def listener_status():
+        return get_listener_status()
+
+    @app.settings_app.post("/api/listener/start")
+    async def listener_start():
+        global _listener_task, _listener_running
+
+        # Auto-recover stale state
+        task_alive = _listener_task is not None and not _listener_task.done()
+        if _listener_running and not task_alive:
+            logger.warning("Listener: recovering stale state on start")
+            _listener_running = False
+
+        if _listener_running:
+            return {"status": "already_running"}
+
+        # Check for stale arecord
+        try:
+            result = subprocess.run(
+                ['pgrep', '-f', 'arecord.*reachymini'],
+                capture_output=True, timeout=2
+            )
+            if result.returncode == 0:
+                return {"status": "already_running", "note": "arecord process exists"}
+        except Exception:
+            pass
+
+        settings = load_settings()
+        loop = asyncio.get_running_loop()
+        _listener_task = loop.create_task(_run_listener(app, settings))
+
+        # Log unhandled task exceptions (asyncio swallows them otherwise)
+        def _on_listener_done(task):
+            global _listener_running
+            _listener_running = False
+            if task.cancelled():
+                logger.warning("Listener: task cancelled")
+            elif task.exception():
+                logger.error("Listener: task crashed: %s", task.exception())
+        _listener_task.add_done_callback(_on_listener_done)
+
+        return {"status": "started"}
+
+    @app.settings_app.post("/api/listener/stop")
+    async def listener_stop():
+        if not _listener_running:
+            return {"status": "not_running"}
+        stop_listener()
+        await asyncio.sleep(0.5)
+        return {"status": "stopped"}
+
+    @app.settings_app.post("/api/listener/mute")
+    async def listener_mute(muted: bool = True, duration: float = 0):
+        set_listener_muted(muted)
+        if muted and duration > 0:
+            async def auto_unmute():
+                await asyncio.sleep(duration)
+                set_listener_muted(False)
+            asyncio.create_task(auto_unmute())
+        return {"muted": _muted, "duration": duration}

hello_world/api/model.py

@@ -0,0 +1,119 @@
+"""
+Model API - Serves robot model files from the reachy_mini package.
+
+Supports both MJCF (MuJoCo) and URDF model formats with their mesh assets.
+
+Endpoints:
+    GET /api/model/mjcf         - Robot MJCF XML model
+    GET /api/model/meshes       - List of mesh file paths (relative to assets/)
+    GET /api/model/mesh/{path}  - Individual mesh file (binary STL)
+    GET /api/model/urdf/{path}  - URDF files and meshes (robot.urdf, assets/*.stl)
+"""
+
+__all__ = ['register_routes']
+
+import logging
+from pathlib import Path
+
+from fastapi.responses import Response
+
+logger = logging.getLogger("reachy_mini.app.hello_world.model")
+
+# Resolve model directories from the reachy_mini package
+MODEL_DIR = None  # MJCF directory
+URDF_DIR = None   # URDF directory
+
+try:
+    import reachy_mini
+    pkg_dir = Path(reachy_mini.__file__).parent
+    desc_dir = pkg_dir / "descriptions" / "reachy_mini"
+
+    mjcf = desc_dir / "mjcf"
+    if mjcf.exists():
+        MODEL_DIR = mjcf
+        logger.info(f"MJCF directory: {MODEL_DIR}")
+
+    urdf = desc_dir / "urdf"
+    if urdf.exists():
+        URDF_DIR = urdf
+        logger.info(f"URDF directory: {URDF_DIR}")
+except ImportError:
+    logger.warning("reachy_mini package not found - model endpoints will return 503")
+
+# Fallback paths for source installs
+if MODEL_DIR is None:
+    fallback = Path("/venvs/src/reachy_mini/src/reachy_mini/descriptions/reachy_mini/mjcf")
+    if fallback.exists():
+        MODEL_DIR = fallback
+        logger.info(f"MJCF directory (fallback): {MODEL_DIR}")
+
+if URDF_DIR is None:
+    fallback = Path("/venvs/src/reachy_mini/src/reachy_mini/descriptions/reachy_mini/urdf")
+    if fallback.exists():
+        URDF_DIR = fallback
+        logger.info(f"URDF directory (fallback): {URDF_DIR}")
+
+# MIME types for model files
+MIME_TYPES = {
+    '.urdf': 'application/xml',
+    '.xml': 'application/xml',
+    '.stl': 'application/octet-stream',
+    '.glb': 'model/gltf-binary',
+    '.wasm': 'application/wasm',
+}
+
+
+def register_routes(app) -> None:
+    """Register model file-serving routes on the app."""
+
+    @app.settings_app.get("/api/model/mjcf")
+    def get_mjcf():
+        """Serve MJCF model XML from reachy_mini package."""
+        if MODEL_DIR is None:
+            return Response(content="Model directory not found", status_code=503)
+        mjcf_path = MODEL_DIR / "reachy_mini.xml"
+        if not mjcf_path.exists():
+            return Response(content="MJCF file not found", status_code=404)
+        return Response(content=mjcf_path.read_bytes(), media_type="application/xml")
+
+    @app.settings_app.get("/api/model/meshes")
+    def get_meshes():
+        """List all mesh files available in the assets directory."""
+        if MODEL_DIR is None:
+            return {"meshes": [], "error": "Model directory not found"}
+        assets_dir = MODEL_DIR / "assets"
+        if not assets_dir.exists():
+            return {"meshes": [], "error": "Assets directory not found"}
+        mesh_files = []
+        for stl in sorted(assets_dir.rglob("*.stl")):
+            mesh_files.append(str(stl.relative_to(assets_dir)))
+        return {"meshes": mesh_files}
+
+    @app.settings_app.get("/api/model/mesh/{path:path}")
+    def get_mesh(path: str):
+        """Serve an individual mesh file from the assets directory."""
+        if MODEL_DIR is None:
+            return Response(content="Model directory not found", status_code=503)
+        assets_dir = MODEL_DIR / "assets"
+        mesh_path = (assets_dir / path).resolve()
+        # Security: ensure resolved path stays within assets directory
+        if not str(mesh_path).startswith(str(assets_dir.resolve())):
+            return Response(content="Invalid path", status_code=403)
+        if not mesh_path.exists():
+            return Response(content=f"Mesh not found: {path}", status_code=404)
+        return Response(content=mesh_path.read_bytes(), media_type="application/octet-stream")
+
+    @app.settings_app.get("/api/model/urdf/{path:path}")
+    def get_urdf_file(path: str):
+        """Serve files from the URDF directory (robot.urdf, assets/*.stl)."""
+        if URDF_DIR is None:
+            return Response(content="URDF directory not found", status_code=503)
+        file_path = (URDF_DIR / path).resolve()
+        # Security: ensure resolved path stays within URDF directory
+        if not str(file_path).startswith(str(URDF_DIR.resolve())):
+            return Response(content="Invalid path", status_code=403)
+        if not file_path.exists():
+            return Response(content=f"File not found: {path}", status_code=404)
+        suffix = file_path.suffix.lower()
+        media_type = MIME_TYPES.get(suffix, 'application/octet-stream')
+        return Response(content=file_path.read_bytes(), media_type=media_type)

hello_world/api/music.py

@@ -0,0 +1,316 @@
+"""
+Music API - Music library management and playback.
+
+Endpoints:
+    GET    /api/music/list - List music with metadata (title, artist, duration, size)
+    GET    /api/music/file/{filename} - Serve audio file
+    GET    /api/music/cover/{filename} - Extract & serve album cover art
+    POST   /api/music/upload - Upload music file
+    DELETE /api/music/{filename} - Delete music file
+    POST   /api/music/play/{filename} - Play via GStreamer on robot speaker
+    POST   /api/music/stop - Stop playback
+"""
+
+__all__ = ['register_routes']
+
+import asyncio
+import json
+import logging
+import subprocess
+from pathlib import Path
+
+from ..config import config, validate_path_in_directory
+
+logger = logging.getLogger("reachy_mini.app.hello_world.music")
+
+MUSIC_DIR: Path = config.MUSIC_DIR
+ALLOWED_EXTENSIONS = {'.mp3', '.wav', '.ogg', '.flac', '.m4a', '.aac'}
+CACHE_FILE = ".metadata_cache.json"
+
+
+def _load_metadata_cache() -> dict:
+    cache_path = MUSIC_DIR / CACHE_FILE
+    if cache_path.exists():
+        try:
+            return json.loads(cache_path.read_text())
+        except Exception:
+            pass
+    return {}
+
+
+def _save_metadata_cache(cache: dict):
+    try:
+        (MUSIC_DIR / CACHE_FILE).write_text(json.dumps(cache))
+    except Exception as e:
+        logger.warning(f"Failed to save metadata cache: {e}")
+
+
+def _extract_metadata(filepath: Path) -> dict:
+    """Extract title, artist, duration, and cover art presence from a music file."""
+    meta = {"title": filepath.stem, "artist": "", "duration": None, "has_cover": False}
+    try:
+        import mutagen
+        tag = mutagen.File(filepath)
+        if tag is None:
+            return meta
+        if tag.info and hasattr(tag.info, 'length'):
+            meta["duration"] = round(tag.info.length, 1)
+
+        # ID3 tags (MP3)
+        if hasattr(tag, 'tags') and tag.tags:
+            tags = tag.tags
+            # MP3 ID3
+            if hasattr(tags, 'getall'):
+                tit = tags.getall('TIT2')
+                if tit:
+                    meta["title"] = str(tit[0])
+                art = tags.getall('TPE1')
+                if art:
+                    meta["artist"] = str(art[0])
+                meta["has_cover"] = bool(tags.getall('APIC'))
+            # FLAC/OGG Vorbis comments
+            elif isinstance(tags, dict) or hasattr(tags, 'get'):
+                meta["title"] = str((tags.get('title') or [filepath.stem])[0])
+                meta["artist"] = str((tags.get('artist') or [''])[0])
+
+        # FLAC pictures
+        if hasattr(tag, 'pictures'):
+            meta["has_cover"] = len(tag.pictures) > 0
+        # M4A/MP4 cover
+        if hasattr(tag, 'tags') and tag.tags and hasattr(tag.tags, 'get'):
+            if tag.tags.get('covr'):
+                meta["has_cover"] = True
+
+    except Exception as e:
+        logger.debug(f"Metadata extraction failed for {filepath.name}: {e}")
+    return meta
+
+
+def _get_music_metadata(filepath: Path, cache: dict) -> dict:
+    """Get metadata with caching based on filename + mtime."""
+    key = filepath.name
+    mtime = filepath.stat().st_mtime
+    cached = cache.get(key)
+    if cached and cached.get("mtime") == mtime:
+        return cached
+
+    meta = _extract_metadata(filepath)
+    meta["mtime"] = mtime
+    cache[key] = meta
+    return meta
+
+
+def register_routes(app) -> None:
+    """Register music routes on the app."""
+
+    if not hasattr(app, '_music_process'):
+        app._music_process = None
+        app._music_playing = None
+
+    @app.settings_app.get("/api/music/list")
+    async def list_music():
+        """List all music files with metadata."""
+        MUSIC_DIR.mkdir(parents=True, exist_ok=True)
+        cache = _load_metadata_cache()
+        tracks = []
+        changed = False
+
+        for f in sorted(MUSIC_DIR.iterdir()):
+            if f.suffix.lower() in ALLOWED_EXTENSIONS and not f.name.startswith('.'):
+                old_cached = cache.get(f.name)
+                meta = _get_music_metadata(f, cache)
+                if meta != old_cached:
+                    changed = True
+                tracks.append({
+                    "filename": f.name,
+                    "title": meta.get("title", f.stem),
+                    "artist": meta.get("artist", ""),
+                    "duration": meta.get("duration"),
+                    "size": f.stat().st_size,
+                    "has_cover": meta.get("has_cover", False),
+                })
+
+        if changed:
+            _save_metadata_cache(cache)
+
+        return {
+            "tracks": tracks,
+            "playing": app._music_playing,
+        }
+
+    @app.settings_app.get("/api/music/file/{filename}")
+    async def get_music_file(filename: str):
+        """Serve a music file."""
+        from fastapi.responses import FileResponse
+        from fastapi import HTTPException
+        try:
+            filepath = validate_path_in_directory(MUSIC_DIR, filename)
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+        if not filepath.exists() or filepath.suffix.lower() not in ALLOWED_EXTENSIONS:
+            raise HTTPException(status_code=404, detail="File not found")
+        media_types = {
+            '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.ogg': 'audio/ogg',
+            '.flac': 'audio/flac', '.m4a': 'audio/mp4', '.aac': 'audio/aac',
+        }
+        return FileResponse(filepath, media_type=media_types.get(filepath.suffix.lower(), 'application/octet-stream'))
+
+    @app.settings_app.get("/api/music/cover/{filename}")
+    async def get_music_cover(filename: str):
+        """Extract and serve album cover art."""
+        from fastapi.responses import Response
+        from fastapi import HTTPException
+        try:
+            filepath = validate_path_in_directory(MUSIC_DIR, filename)
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+        if not filepath.exists() or filepath.suffix.lower() not in ALLOWED_EXTENSIONS:
+            raise HTTPException(status_code=404, detail="File not found")
+
+        try:
+            import mutagen
+            tag = mutagen.File(filepath)
+            if tag is None:
+                raise HTTPException(status_code=404, detail="No metadata")
+
+            # MP3 APIC
+            if hasattr(tag, 'tags') and tag.tags and hasattr(tag.tags, 'getall'):
+                apic = tag.tags.getall('APIC')
+                if apic:
+                    return Response(content=apic[0].data, media_type=apic[0].mime)
+            # FLAC pictures
+            if hasattr(tag, 'pictures') and tag.pictures:
+                pic = tag.pictures[0]
+                return Response(content=pic.data, media_type=pic.mime)
+            # M4A covr
+            if hasattr(tag, 'tags') and tag.tags and hasattr(tag.tags, 'get'):
+                covr = tag.tags.get('covr')
+                if covr:
+                    return Response(content=bytes(covr[0]), media_type="image/jpeg")
+        except HTTPException:
+            raise
+        except Exception as e:
+            logger.debug(f"Cover extraction failed for {filename}: {e}")
+
+        raise HTTPException(status_code=404, detail="No cover art")
+
+    from starlette.requests import Request as _Request
+
+    @app.settings_app.post("/api/music/upload")
+    async def upload_music(request: _Request):
+        """Upload a music file via multipart form."""
+        MUSIC_DIR.mkdir(parents=True, exist_ok=True)
+
+        form = await request.form()
+        file = form.get('file')
+        if not file or not file.filename:
+            return {"error": "No file provided", "status": "failed"}
+
+        ext = Path(file.filename).suffix.lower()
+        if ext not in ALLOWED_EXTENSIONS:
+            return {"error": f"Unsupported format: {ext}", "status": "failed"}
+
+        try:
+            filepath = validate_path_in_directory(MUSIC_DIR, file.filename)
+        except ValueError:
+            return {"error": "Invalid filename", "status": "failed"}
+
+        MAX_UPLOAD_SIZE = 50 * 1024 * 1024  # 50MB
+        content = await file.read()
+        if len(content) > MAX_UPLOAD_SIZE:
+            return {"error": f"File too large (max {MAX_UPLOAD_SIZE // 1024 // 1024}MB)", "status": "failed"}
+
+        filepath.write_bytes(content)
+        logger.info(f"Uploaded music: {file.filename} ({len(content)} bytes)")
+        return {"status": "ok", "filename": file.filename, "size": len(content)}
+
+    @app.settings_app.delete("/api/music/{filename}")
+    async def delete_music(filename: str):
+        """Delete a music file."""
+        try:
+            filepath = validate_path_in_directory(MUSIC_DIR, filename)
+        except ValueError:
+            return {"error": "Invalid filename", "status": "failed"}
+        if not filepath.exists() or filepath.suffix.lower() not in ALLOWED_EXTENSIONS:
+            return {"error": "File not found", "status": "failed"}
+        try:
+            filepath.unlink()
+            # Remove from cache
+            cache = _load_metadata_cache()
+            cache.pop(filename, None)
+            _save_metadata_cache(cache)
+            return {"status": "ok", "deleted": filename}
+        except Exception as e:
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.post("/api/music/play/{filename}")
+    async def play_music(filename: str):
+        """Play a music file via GStreamer on the robot speaker."""
+        try:
+            filepath = validate_path_in_directory(MUSIC_DIR, filename)
+        except ValueError:
+            return {"error": "Invalid filename", "status": "failed"}
+        if not filepath.exists() or filepath.suffix.lower() not in ALLOWED_EXTENSIONS:
+            return {"error": "File not found", "status": "failed"}
+
+        # Stop any current playback
+        if app._music_process and app._music_process.poll() is None:
+            app._music_process.terminate()
+            try:
+                app._music_process.wait(timeout=2)
+            except subprocess.TimeoutExpired:
+                app._music_process.kill()
+
+        # Calculate volume: (master/100) * (music/100) * 3.0 gain boost
+        from ..settings import load_settings
+        settings = load_settings()
+        master = settings.get("master_volume", 70) / 100.0
+        music = settings.get("music_volume", 80) / 100.0
+        volume = master * music * 3.0
+
+        cmd = [
+            "gst-launch-1.0", "-q",
+            "filesrc", f"location={filepath}", "!",
+            "decodebin", "!",
+            "audioconvert", "!",
+            "audioresample", "!",
+            "audio/x-raw,rate=16000,channels=2", "!",
+            "volume", f"volume={volume:.2f}", "!",
+            "alsasink", "device=reachymini_audio_sink", "buffer-time=100000",
+        ]
+
+        try:
+            app._music_process = subprocess.Popen(
+                cmd, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+            app._music_playing = filename
+            logger.info(f"Playing music: {filename} (volume={volume:.2f})")
+
+            # Background task to clear state when playback ends
+            async def _watch():
+                while app._music_process and app._music_process.poll() is None:
+                    await asyncio.sleep(1)
+                if app._music_playing == filename:
+                    app._music_playing = None
+            asyncio.create_task(_watch())
+
+            return {"status": "ok", "playing": filename, "volume": round(volume, 2)}
+        except Exception as e:
+            logger.error(f"Music playback error: {e}")
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.post("/api/music/stop")
+    async def stop_music():
+        """Stop music playback."""
+        if app._music_process and app._music_process.poll() is None:
+            app._music_process.terminate()
+            try:
+                app._music_process.wait(timeout=2)
+            except subprocess.TimeoutExpired:
+                app._music_process.kill()
+            app._music_process = None
+            playing = app._music_playing
+            app._music_playing = None
+            logger.info(f"Stopped music: {playing}")
+            return {"status": "ok", "stopped": playing}
+        app._music_playing = None
+        return {"status": "ok", "message": "Nothing was playing"}

hello_world/api/recordings.py

@@ -0,0 +1,327 @@
+"""
+Recordings API - Video recording capture and management.
+
+Endpoints:
+    POST   /api/recordings/start - Start video recording
+    POST   /api/recordings/stop - Stop video recording
+    POST   /api/recordings/upload - Upload a recording file
+    GET    /api/recordings/list - List all recordings
+    DELETE /api/recordings/{filename} - Delete a recording
+    GET    /api/recordings/{filename}/thumbnail - Get recording thumbnail
+"""
+
+__all__ = ['register_routes']
+
+import logging
+import subprocess
+import threading
+import time
+from pathlib import Path
+
+from ..config import config, validate_path_in_directory
+
+logger = logging.getLogger("reachy_mini.app.hello_world.recordings")
+
+RECORDINGS_DIR: Path = config.RECORDINGS_DIR
+
+
+def register_routes(app) -> None:
+    """Register recording routes on the app."""
+
+    # Initialize recording state on app if not present
+    if not hasattr(app, '_recording_active'):
+        app._recording_active = False
+        app._recording_thread = None
+        app._recording_writer = None
+        app._recording_filename = None
+        app._recording_start_time = None
+        app._recording_first_frame = None
+
+    def _recording_loop():
+        """Background thread that captures frames and writes to video file."""
+        import cv2
+        while app._recording_active and app._recording_writer:
+            try:
+                frame = app._reachy_mini.media.get_frame()
+                if frame is not None:
+                    h, w = frame.shape[:2]
+                    if w > 640:
+                        scale = 640 / w
+                        frame = cv2.resize(frame, (640, int(h * scale)))
+                    app._recording_writer.write(frame)
+                    if app._recording_first_frame is None:
+                        app._recording_first_frame = frame.copy()
+                time.sleep(0.066)  # ~15 fps
+            except Exception as e:
+                logger.error(f"Recording loop error: {e}")
+                break
+
+    @app.settings_app.post("/api/recordings/start")
+    async def start_recording(duration: int = 0):
+        """Start video recording using SDK media frames.
+
+        Args:
+            duration: Recording duration in seconds. 0 = indefinite.
+        """
+        from datetime import datetime
+        import cv2
+        if app._recording_active:
+            return {"error": "Recording already in progress", "status": "failed"}
+
+        if app._reachy_mini is None:
+            return {"error": "Robot not connected", "status": "failed"}
+
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"recording_{timestamp}.mp4"
+        filepath = RECORDINGS_DIR / filename
+
+        try:
+            RECORDINGS_DIR.mkdir(parents=True, exist_ok=True)
+
+            test_frame = app._reachy_mini.media.get_frame()
+            if test_frame is None:
+                return {"error": "Camera not available", "status": "failed"}
+
+            h, w = test_frame.shape[:2]
+            if w > 640:
+                scale = 640 / w
+                w, h = 640, int(h * scale)
+
+            # Initialize video writer - try H.264 first for browser compatibility
+            for codec in ['avc1', 'mp4v', 'XVID']:
+                fourcc = cv2.VideoWriter_fourcc(*codec)
+                app._recording_writer = cv2.VideoWriter(str(filepath), fourcc, 15.0, (w, h))
+                if app._recording_writer.isOpened():
+                    break
+                app._recording_writer = None
+
+            if app._recording_writer is None or not app._recording_writer.isOpened():
+                app._recording_writer = None
+                return {"error": "Failed to initialize video writer", "status": "failed"}
+
+            app._recording_active = True
+            app._recording_filename = filename
+            app._recording_start_time = time.time()
+            app._recording_first_frame = None
+
+            app._recording_thread = threading.Thread(target=_recording_loop, daemon=True)
+            app._recording_thread.start()
+
+            # Schedule auto-stop if duration specified
+            if duration > 0:
+                import asyncio
+                async def auto_stop():
+                    await asyncio.sleep(duration)
+                    if app._recording_active:
+                        logger.info(f"Auto-stopping recording after {duration}s")
+                        await stop_recording()
+                asyncio.create_task(auto_stop())
+
+            return {"status": "ok", "filename": filename, "duration": duration, "message": "Recording started"}
+        except Exception as e:
+            logger.exception(f"Recording start error: {e}")
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.post("/api/recordings/stop")
+    async def stop_recording():
+        """Stop video recording and generate thumbnail."""
+        import cv2
+        if not app._recording_active:
+            return {"error": "No recording in progress", "status": "failed"}
+
+        try:
+            app._recording_active = False
+            if app._recording_thread:
+                app._recording_thread.join(timeout=2)
+                app._recording_thread = None
+
+            if app._recording_writer:
+                app._recording_writer.release()
+                app._recording_writer = None
+
+            duration = time.time() - app._recording_start_time if app._recording_start_time else 0
+            filename = app._recording_filename
+
+            # Generate thumbnail from first captured frame
+            if app._recording_first_frame is not None:
+                try:
+                    thumb_path = RECORDINGS_DIR / filename.replace('.mp4', '_thumb.jpg')
+                    frame = app._recording_first_frame
+                    h, w = frame.shape[:2]
+                    thumb_w = 320
+                    frame = cv2.resize(frame, (thumb_w, int(h * thumb_w / w)))
+                    cv2.imwrite(str(thumb_path), frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+                except Exception as e:
+                    logger.warning(f"Thumbnail generation failed: {e}")
+
+            app._recording_filename = None
+            app._recording_start_time = None
+            app._recording_first_frame = None
+
+            return {"status": "ok", "filename": filename, "duration": round(duration, 1), "message": "Recording stopped"}
+        except Exception as e:
+            logger.exception(f"Recording stop error: {e}")
+            app._recording_active = False
+            app._recording_thread = None
+            app._recording_writer = None
+            app._recording_filename = None
+            app._recording_start_time = None
+            app._recording_first_frame = None
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.post("/api/recordings/upload")
+    async def upload_recording(request):
+        """Upload client-side recorded video."""
+        from datetime import datetime
+        import cv2
+        from fastapi import Request
+
+        try:
+            form = await request.form()
+            file = form.get('file')
+            duration = float(form.get('duration', 0))
+
+            if not file:
+                return {"error": "No file provided", "status": "failed"}
+
+            MAX_UPLOAD_SIZE = 100 * 1024 * 1024
+            content = await file.read()
+            if len(content) > MAX_UPLOAD_SIZE:
+                return {"error": f"File too large (max {MAX_UPLOAD_SIZE // 1024 // 1024}MB)", "status": "failed"}
+
+            RECORDINGS_DIR.mkdir(parents=True, exist_ok=True)
+
+            timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+            webm_filename = f"recording_{timestamp}_client.webm"
+            mp4_filename = f"recording_{timestamp}.mp4"
+            webm_path = RECORDINGS_DIR / webm_filename
+            mp4_path = RECORDINGS_DIR / mp4_filename
+
+            webm_path.write_bytes(content)
+            logger.info(f"Uploaded client recording: {webm_filename} ({len(content)} bytes)")
+
+            # Convert webm to mp4 using ffmpeg
+            try:
+                result = subprocess.run([
+                    "ffmpeg", "-y",
+                    "-i", str(webm_path),
+                    "-c:v", "libx264", "-preset", "fast", "-crf", "23",
+                    "-c:a", "aac", "-b:a", "128k",
+                    str(mp4_path)
+                ], capture_output=True, timeout=60)
+
+                if result.returncode == 0 and mp4_path.exists():
+                    webm_path.unlink()
+                    final_filename = mp4_filename
+                    logger.info(f"Converted to mp4: {mp4_filename}")
+
+                    # Generate thumbnail from first frame
+                    try:
+                        cap = cv2.VideoCapture(str(mp4_path))
+                        ret, frame = cap.read()
+                        cap.release()
+                        if ret:
+                            thumb_path = RECORDINGS_DIR / mp4_filename.replace('.mp4', '_thumb.jpg')
+                            h, w = frame.shape[:2]
+                            thumb_w = 320
+                            frame = cv2.resize(frame, (thumb_w, int(h * thumb_w / w)))
+                            cv2.imwrite(str(thumb_path), frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+                    except Exception as e:
+                        logger.warning(f"Thumbnail generation failed: {e}")
+                else:
+                    final_filename = webm_filename
+                    logger.warning("ffmpeg conversion failed, keeping webm")
+            except Exception as e:
+                final_filename = webm_filename
+                logger.warning(f"Conversion failed: {e}")
+
+            return {"status": "ok", "filename": final_filename, "duration": round(duration, 1)}
+        except Exception as e:
+            logger.exception(f"Upload error: {e}")
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.get("/api/recordings/list")
+    async def list_recordings():
+        """List all recordings with duration."""
+        import cv2
+        try:
+            if not RECORDINGS_DIR.exists():
+                return {"recordings": []}
+            recordings = []
+            for f in sorted(RECORDINGS_DIR.glob("*.mp4"), key=lambda x: x.stat().st_mtime, reverse=True):
+                duration = 0
+                try:
+                    cap = cv2.VideoCapture(str(f))
+                    fps = cap.get(cv2.CAP_PROP_FPS)
+                    frames = cap.get(cv2.CAP_PROP_FRAME_COUNT)
+                    cap.release()
+                    if fps > 0:
+                        duration = round(frames / fps, 1)
+                except Exception:
+                    pass
+                recordings.append({
+                    "filename": f.name,
+                    "size": f.stat().st_size,
+                    "modified": f.stat().st_mtime,
+                    "duration": duration
+                })
+            return {"recordings": recordings, "recording_active": app._recording_active}
+        except Exception as e:
+            return {"error": str(e), "recordings": []}
+
+    @app.settings_app.delete("/api/recordings/{filename}")
+    async def delete_recording(filename: str):
+        """Delete a recording."""
+        try:
+            filepath = validate_path_in_directory(RECORDINGS_DIR, filename)
+        except ValueError:
+            return {"error": "Invalid filename", "status": "failed"}
+        if not filepath.exists():
+            return {"error": "File not found", "status": "failed"}
+        if not filepath.suffix.lower() == ".mp4":
+            return {"error": "Invalid file type", "status": "failed"}
+        try:
+            filepath.unlink()
+            thumb_path = RECORDINGS_DIR / filename.replace('.mp4', '_thumb.jpg')
+            if thumb_path.exists():
+                thumb_path.unlink()
+            return {"status": "ok", "deleted": filename}
+        except Exception as e:
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.get("/api/recordings/{filename}/thumbnail")
+    async def get_recording_thumbnail(filename: str):
+        """Get thumbnail - serve cached file or generate for old recordings."""
+        from fastapi.responses import FileResponse
+        from fastapi import HTTPException
+        import cv2
+
+        try:
+            filepath = validate_path_in_directory(RECORDINGS_DIR, filename)
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+        if not filepath.exists() or not filepath.suffix.lower() == ".mp4":
+            raise HTTPException(status_code=404, detail="File not found")
+
+        thumb_path = RECORDINGS_DIR / filename.replace('.mp4', '_thumb.jpg')
+        if thumb_path.exists():
+            return FileResponse(thumb_path, media_type="image/jpeg")
+
+        # Generate for old recordings without thumbnails
+        try:
+            cap = cv2.VideoCapture(str(filepath))
+            ret, frame = cap.read()
+            cap.release()
+
+            if not ret or frame is None:
+                raise HTTPException(status_code=500, detail="Could not read video frame")
+
+            h, w = frame.shape[:2]
+            thumb_w = 320
+            frame = cv2.resize(frame, (thumb_w, int(h * thumb_w / w)))
+            cv2.imwrite(str(thumb_path), frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+
+            return FileResponse(thumb_path, media_type="image/jpeg")
+        except Exception as e:
+            logger.exception(f"Thumbnail error: {e}")
+            raise HTTPException(status_code=500, detail=str(e))

hello_world/api/settings_api.py

@@ -0,0 +1,76 @@
+"""
+Settings API - Settings management endpoints.
+
+Endpoints:
+    GET  /api/settings - Get all settings
+    PUT  /api/settings - Update settings (broadcasts changes via /ws/transcribe)
+"""
+
+__all__ = ['register_routes']
+
+import json
+import logging
+
+logger = logging.getLogger("reachy_mini.app.hello_world.settings_api")
+
+# Allowed settings keys (security: prevent injection of arbitrary keys)
+ALLOWED_SETTINGS_KEYS = {
+    "motor_mode",
+    "robot_update_hz", "stats_update_hz",
+    "video_view",
+    "last_active_tab", "system_stats_order",
+    "oscillation_amplitude", "oscillation_speed",
+    # Conversation (LiteLLM)
+    "api_keys",
+    "audio_input", "audio_output",
+    "stt_provider", "stt_model",
+    "llm_provider", "llm_model",
+    "tts_provider", "tts_model", "tts_voice",
+    "conf_threshold", "vol_threshold", "mic_gain",
+    "system_prompt", "web_search",
+    "music_volume", "master_volume",
+    "vlm_provider", "vlm_model",
+}
+
+# Keys that are purely UI state — don't broadcast or toast these
+_SILENT_KEYS = {"last_active_tab", "system_stats_order"}
+
+
+def register_routes(app) -> None:
+    """Register settings routes on the app."""
+    from ..settings import save_settings
+
+    @app.settings_app.get("/api/settings")
+    def get_settings():
+        return app._settings
+
+    @app.settings_app.put("/api/settings")
+    async def update_settings(updates: dict):
+        filtered_updates = {k: v for k, v in updates.items() if k in ALLOWED_SETTINGS_KEYS}
+        rejected_keys = list(set(updates.keys()) - ALLOWED_SETTINGS_KEYS)
+        if rejected_keys:
+            logger.warning(f"Rejected unknown settings keys: {rejected_keys}")
+
+        app._settings.update(filtered_updates)
+        save_settings(app._settings)
+
+        # Broadcast meaningful changes to all transcribe WS clients
+        broadcast_keys = {k for k in filtered_updates if k not in _SILENT_KEYS}
+        if broadcast_keys and hasattr(app, '_transcribe_websockets'):
+            msg = json.dumps({
+                "type": "settings_changed",
+                "keys": list(broadcast_keys),
+            })
+            dead = []
+            for ws in app._transcribe_websockets:
+                try:
+                    await ws.send_text(msg)
+                except Exception:
+                    dead.append(ws)
+            for ws in dead:
+                app._transcribe_websockets.discard(ws)
+
+        response = dict(app._settings)
+        if rejected_keys:
+            response["_rejected_keys"] = rejected_keys
+        return response

hello_world/api/snapshots.py

@@ -0,0 +1,196 @@
+"""
+Snapshots API - Camera snapshot capture and management.
+
+Endpoints:
+    POST   /api/snapshots/capture - Capture a snapshot from camera
+    POST   /api/snapshots/upload - Upload a snapshot (base64 encoded)
+    GET    /api/snapshots/list - List all snapshots
+    DELETE /api/snapshots/{filename} - Delete a snapshot
+    GET    /api/media/{path} - Serve any media file (unified endpoint)
+"""
+
+__all__ = ['register_routes']
+
+import base64
+import logging
+import subprocess
+from pathlib import Path
+
+from ..config import config, validate_path_in_directory
+
+logger = logging.getLogger("reachy_mini.app.hello_world.snapshots")
+
+SNAPSHOTS_DIR: Path = config.SNAPSHOTS_DIR
+RECORDINGS_DIR: Path = config.RECORDINGS_DIR
+SOUNDS_DIR: Path = Path(__file__).parent.parent / "sounds"
+CAMERA_SOUND: Path = SOUNDS_DIR / "camera.wav"
+
+
+def register_routes(app) -> None:
+    """Register snapshot routes on the app."""
+
+    @app.settings_app.post("/api/snapshots/capture")
+    async def capture_snapshot(description: str = ""):
+        """Capture a snapshot from the camera using SDK media."""
+        from datetime import datetime
+        import cv2
+        import asyncio
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"snapshot_{timestamp}.jpg"
+        filepath = SNAPSHOTS_DIR / filename
+
+        try:
+            SNAPSHOTS_DIR.mkdir(parents=True, exist_ok=True)
+
+            if app._reachy_mini is None:
+                return {"error": "Robot not connected", "status": "failed"}
+
+            # Play camera shutter sound via aplay (non-blocking)
+            if CAMERA_SOUND.exists():
+                subprocess.Popen(
+                    ['aplay', '-q', str(CAMERA_SOUND)],
+                    stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL
+                )
+
+            # Animate antennas to indicate photo capture
+            try:
+                reachy = app._reachy_mini
+                left_pos = reachy.head.l_antenna.present_position if hasattr(reachy.head, 'l_antenna') else 0
+                right_pos = reachy.head.r_antenna.present_position if hasattr(reachy.head, 'r_antenna') else 0
+
+                if hasattr(reachy.head, 'l_antenna'):
+                    reachy.head.l_antenna.goal_position = left_pos + 30
+                if hasattr(reachy.head, 'r_antenna'):
+                    reachy.head.r_antenna.goal_position = right_pos - 30
+            except Exception as e:
+                logger.debug(f"Antenna animation start failed: {e}")
+
+            frame = app._reachy_mini.media.get_frame()
+            if frame is None:
+                return {"error": "No frame available from camera", "status": "failed"}
+
+            cv2.imwrite(str(filepath), frame, [cv2.IMWRITE_JPEG_QUALITY, 90])
+
+            # Return antennas to original position after short delay
+            async def restore_antennas():
+                await asyncio.sleep(0.3)
+                try:
+                    if hasattr(reachy.head, 'l_antenna'):
+                        reachy.head.l_antenna.goal_position = left_pos
+                    if hasattr(reachy.head, 'r_antenna'):
+                        reachy.head.r_antenna.goal_position = right_pos
+                except Exception as e:
+                    logger.debug(f"Antenna restore failed: {e}")
+
+            asyncio.create_task(restore_antennas())
+
+            return {
+                "status": "ok",
+                "filename": filename,
+                "path": str(filepath),
+                "size": filepath.stat().st_size if filepath.exists() else 0
+            }
+        except Exception as e:
+            logger.exception(f"Snapshot capture error: {e}")
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.post("/api/snapshots/upload")
+    async def upload_snapshot(data: dict):
+        """Upload a client-side captured snapshot (base64 encoded)."""
+        from datetime import datetime
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+
+        capture_type = data.get("type", "cam")
+        image_data = data.get("image", "")
+
+        if not image_data:
+            return {"error": "No image data provided", "status": "failed"}
+
+        MAX_BASE64_SIZE = 10 * 1024 * 1024
+        if len(image_data) > MAX_BASE64_SIZE:
+            return {"error": f"Image too large (max {MAX_BASE64_SIZE // 1024 // 1024}MB)", "status": "failed"}
+
+        try:
+            SNAPSHOTS_DIR.mkdir(parents=True, exist_ok=True)
+
+            if "," in image_data:
+                image_data = image_data.split(",", 1)[1]
+
+            image_bytes = base64.b64decode(image_data)
+
+            filename = f"snapshot_{capture_type}_{timestamp}.jpg"
+            filepath = SNAPSHOTS_DIR / filename
+
+            with open(filepath, "wb") as f:
+                f.write(image_bytes)
+
+            return {
+                "status": "ok",
+                "filename": filename,
+                "path": str(filepath),
+                "size": filepath.stat().st_size if filepath.exists() else 0
+            }
+        except Exception as e:
+            logger.exception(f"Snapshot upload error: {e}")
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.get("/api/snapshots/list")
+    async def list_snapshots():
+        """List all snapshots."""
+        try:
+            if not SNAPSHOTS_DIR.exists():
+                return {"snapshots": []}
+            snapshots = []
+            for f in sorted(SNAPSHOTS_DIR.glob("*.jpg"), key=lambda x: x.stat().st_mtime, reverse=True):
+                snapshots.append({
+                    "filename": f.name,
+                    "size": f.stat().st_size,
+                    "modified": f.stat().st_mtime
+                })
+            return {"snapshots": snapshots}
+        except Exception as e:
+            return {"error": str(e), "snapshots": []}
+
+    @app.settings_app.delete("/api/snapshots/{filename}")
+    async def delete_snapshot(filename: str):
+        """Delete a snapshot."""
+        try:
+            filepath = validate_path_in_directory(SNAPSHOTS_DIR, filename)
+        except ValueError:
+            return {"error": "Invalid filename", "status": "failed"}
+        if not filepath.exists():
+            return {"error": "File not found", "status": "failed"}
+        if not filepath.suffix.lower() == ".jpg":
+            return {"error": "Invalid file type", "status": "failed"}
+        try:
+            filepath.unlink()
+            return {"status": "ok", "deleted": filename}
+        except Exception as e:
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.get("/api/media/{filepath:path}")
+    async def get_media_file(filepath: str):
+        """Get any media file from the media directory."""
+        from fastapi.responses import FileResponse
+        from fastapi import HTTPException
+
+        ext = Path(filepath).suffix.lower()
+        media_types = {
+            ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
+            ".png": "image/png", ".gif": "image/gif",
+            ".webp": "image/webp", ".mp4": "video/mp4",
+            ".webm": "video/webm", ".mov": "video/quicktime",
+        }
+        media_type = media_types.get(ext, "application/octet-stream")
+
+        base_dirs = [SNAPSHOTS_DIR, RECORDINGS_DIR, config.MEDIA_BASE_DIR]
+
+        for base_dir in base_dirs:
+            try:
+                full_path = validate_path_in_directory(base_dir, filepath)
+                if full_path.exists():
+                    return FileResponse(full_path, media_type=media_type)
+            except ValueError:
+                continue
+
+        raise HTTPException(status_code=404, detail=f"File not found: {filepath}")

hello_world/api/sounds.py

@@ -0,0 +1,278 @@
+"""
+Sound Recordings API - Audio-only recording from robot microphone.
+
+Endpoints:
+    POST   /api/sounds/start - Start audio recording
+    POST   /api/sounds/stop - Stop audio recording
+    GET    /api/sounds/list - List all sound recordings
+    DELETE /api/sounds/{filename} - Delete a sound recording
+    GET    /api/sounds/file/{filename} - Serve a sound file
+    GET    /api/sounds/{filename}/thumbnail - Get waveform thumbnail
+"""
+
+__all__ = ['register_routes']
+
+import logging
+import subprocess
+import time
+from pathlib import Path
+
+from ..config import config, validate_path_in_directory
+
+logger = logging.getLogger("reachy_mini.app.hello_world.sounds")
+
+SOUNDS_DIR: Path = config.SOUNDS_DIR
+
+
+def _generate_waveform_thumbnail(wav_path: Path, thumb_path: Path, width: int = 320, height: int = 240) -> bool:
+    """Generate a waveform thumbnail image from a WAV file using cv2.
+
+    Uses log-scale amplitude so quiet parts remain visible at small sizes.
+    Draws symmetric mirrored bars from center line with color gradient.
+    """
+    import wave
+    import numpy as np
+    import cv2
+
+    try:
+        with wave.open(str(wav_path), 'rb') as wf:
+            n_channels = wf.getnchannels()
+            sample_width = wf.getsampwidth()
+            n_frames = wf.getnframes()
+
+            if n_frames == 0:
+                return False
+
+            raw = wf.readframes(n_frames)
+
+        # Convert to numpy array
+        if sample_width == 2:
+            samples = np.frombuffer(raw, dtype=np.int16).astype(np.float64)
+        elif sample_width == 1:
+            samples = np.frombuffer(raw, dtype=np.uint8).astype(np.float64) - 128
+        else:
+            return False
+
+        # Mix to mono if stereo
+        if n_channels > 1:
+            samples = samples.reshape(-1, n_channels).mean(axis=1)
+
+        # Compute RMS amplitude per bar (one bar per pixel column)
+        n_bars = width
+        bucket_size = max(1, len(samples) // n_bars)
+        n_bars = min(n_bars, len(samples) // bucket_size)
+
+        rms = np.zeros(n_bars)
+        for i in range(n_bars):
+            bucket = samples[i * bucket_size:(i + 1) * bucket_size]
+            rms[i] = np.sqrt(np.mean(bucket ** 2))
+
+        # Log-scale normalization: amplifies quiet parts, compresses loud parts
+        # Add 1 to avoid log(0), then normalize to 0-1
+        log_rms = np.log1p(rms)
+        max_log = log_rms.max()
+        if max_log > 0:
+            norm = log_rms / max_log
+        else:
+            norm = log_rms
+
+        # Dark background
+        img = np.zeros((height, width, 3), dtype=np.uint8)
+        img[:] = (18, 18, 22)
+
+        mid_y = height // 2
+        usable = (height - 8) // 2  # Minimal padding
+
+        # Color palette (BGR)
+        color_loud = (230, 160, 40)    # Bright teal for loud
+        color_mid = (160, 100, 25)     # Medium teal
+        color_quiet = (80, 55, 18)     # Dim teal for quiet
+
+        for i in range(n_bars):
+            bar_h = max(1, int(norm[i] * usable))
+
+            # Color based on amplitude - louder = brighter
+            if norm[i] > 0.6:
+                color = color_loud
+            elif norm[i] > 0.25:
+                color = color_mid
+            else:
+                color = color_quiet
+
+            # Draw symmetric bar from center
+            cv2.line(img, (i, mid_y - bar_h), (i, mid_y + bar_h), color, 1)
+
+        # Thin center line
+        cv2.line(img, (0, mid_y), (width - 1, mid_y), (40, 40, 50), 1)
+
+        cv2.imwrite(str(thumb_path), img, [cv2.IMWRITE_JPEG_QUALITY, 90])
+        return True
+    except Exception as e:
+        logger.warning(f"Waveform thumbnail generation failed: {e}")
+        return False
+
+
+def register_routes(app) -> None:
+    """Register sound recording routes on the app."""
+
+    if not hasattr(app, '_sound_recording_active'):
+        app._sound_recording_active = False
+        app._sound_recording_process = None
+        app._sound_recording_filename = None
+        app._sound_recording_start_time = None
+
+    @app.settings_app.post("/api/sounds/start")
+    async def start_sound_recording():
+        """Start audio-only recording from robot microphone."""
+        from datetime import datetime
+        if app._sound_recording_active:
+            return {"error": "Sound recording already in progress", "status": "failed"}
+
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"sound_{timestamp}.wav"
+        filepath = SOUNDS_DIR / filename
+
+        try:
+            SOUNDS_DIR.mkdir(parents=True, exist_ok=True)
+
+            app._sound_recording_process = subprocess.Popen([
+                "arecord", "-D", "reachymini_audio_src",
+                "-f", "S16_LE", "-r", "16000", "-c", "2",
+                str(filepath)
+            ], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+
+            app._sound_recording_active = True
+            app._sound_recording_filename = filename
+            app._sound_recording_start_time = time.time()
+
+            logger.info(f"Started sound recording: {filename}")
+            return {"status": "ok", "filename": filename, "message": "Sound recording started"}
+        except Exception as e:
+            logger.exception(f"Sound recording start error: {e}")
+            app._sound_recording_active = False
+            app._sound_recording_process = None
+            app._sound_recording_filename = None
+            app._sound_recording_start_time = None
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.post("/api/sounds/stop")
+    async def stop_sound_recording():
+        """Stop audio recording."""
+        if not app._sound_recording_active:
+            return {"error": "No sound recording in progress", "status": "failed"}
+
+        try:
+            if app._sound_recording_process:
+                app._sound_recording_process.terminate()
+                try:
+                    app._sound_recording_process.wait(timeout=2)
+                except subprocess.TimeoutExpired:
+                    app._sound_recording_process.kill()
+                app._sound_recording_process = None
+
+            duration = time.time() - app._sound_recording_start_time if app._sound_recording_start_time else 0
+            filename = app._sound_recording_filename
+
+            app._sound_recording_active = False
+            app._sound_recording_filename = None
+            app._sound_recording_start_time = None
+
+            # Generate waveform thumbnail
+            filepath = SOUNDS_DIR / filename
+            if filepath.exists():
+                thumb_path = SOUNDS_DIR / filename.replace('.wav', '_thumb.jpg')
+                _generate_waveform_thumbnail(filepath, thumb_path)
+
+            logger.info(f"Stopped sound recording: {filename}, duration: {duration:.1f}s")
+            return {"status": "ok", "filename": filename, "duration": round(duration, 1), "message": "Sound recording stopped"}
+        except Exception as e:
+            logger.exception(f"Sound recording stop error: {e}")
+            app._sound_recording_active = False
+            app._sound_recording_process = None
+            app._sound_recording_filename = None
+            app._sound_recording_start_time = None
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.get("/api/sounds/list")
+    async def list_sounds():
+        """List all sound recordings."""
+        try:
+            if not SOUNDS_DIR.exists():
+                return {"sounds": [], "recording_active": app._sound_recording_active}
+            sounds = []
+            for f in sorted(SOUNDS_DIR.glob("*.wav"), key=lambda x: x.stat().st_mtime, reverse=True):
+                duration = None
+                try:
+                    result = subprocess.run(
+                        ["ffprobe", "-v", "quiet", "-show_entries", "format=duration", "-of", "csv=p=0", str(f)],
+                        capture_output=True, text=True, timeout=5
+                    )
+                    if result.returncode == 0 and result.stdout.strip():
+                        duration = round(float(result.stdout.strip()), 1)
+                except Exception:
+                    pass
+                sounds.append({
+                    "filename": f.name,
+                    "size": f.stat().st_size,
+                    "modified": f.stat().st_mtime,
+                    "duration": duration
+                })
+            return {"sounds": sounds, "recording_active": app._sound_recording_active}
+        except Exception as e:
+            return {"error": str(e), "sounds": [], "recording_active": app._sound_recording_active}
+
+    @app.settings_app.delete("/api/sounds/{filename}")
+    async def delete_sound(filename: str):
+        """Delete a sound recording."""
+        try:
+            filepath = validate_path_in_directory(SOUNDS_DIR, filename)
+        except ValueError:
+            return {"error": "Invalid filename", "status": "failed"}
+        if not filepath.exists():
+            return {"error": "File not found", "status": "failed"}
+        if not filepath.suffix.lower() == ".wav":
+            return {"error": "Invalid file type", "status": "failed"}
+        try:
+            filepath.unlink()
+            thumb_path = SOUNDS_DIR / filename.replace('.wav', '_thumb.jpg')
+            if thumb_path.exists():
+                thumb_path.unlink()
+            return {"status": "ok", "deleted": filename}
+        except Exception as e:
+            return {"error": str(e), "status": "failed"}
+
+    @app.settings_app.get("/api/sounds/{filename}/thumbnail")
+    async def get_sound_thumbnail(filename: str):
+        """Get waveform thumbnail - serve cached or generate on demand."""
+        from fastapi.responses import FileResponse
+        from fastapi import HTTPException
+
+        try:
+            filepath = validate_path_in_directory(SOUNDS_DIR, filename)
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+        if not filepath.exists() or not filepath.suffix.lower() == ".wav":
+            raise HTTPException(status_code=404, detail="File not found")
+
+        thumb_path = SOUNDS_DIR / filename.replace('.wav', '_thumb.jpg')
+        if thumb_path.exists():
+            return FileResponse(thumb_path, media_type="image/jpeg")
+
+        # Generate on demand for older recordings
+        if _generate_waveform_thumbnail(filepath, thumb_path):
+            return FileResponse(thumb_path, media_type="image/jpeg")
+
+        raise HTTPException(status_code=500, detail="Could not generate thumbnail")
+
+    @app.settings_app.get("/api/sounds/file/{filename}")
+    async def get_sound_file(filename: str):
+        """Get a sound recording file."""
+        from fastapi.responses import FileResponse
+        from fastapi import HTTPException
+        try:
+            filepath = validate_path_in_directory(SOUNDS_DIR, filename)
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+        if not filepath.exists() or not filepath.suffix.lower() == ".wav":
+            raise HTTPException(status_code=404, detail="File not found")
+        return FileResponse(filepath, media_type="audio/wav")

hello_world/api/system.py

@@ -0,0 +1,97 @@
+"""
+System Stats REST API - Individual endpoints for telemetry data.
+
+Endpoints:
+    GET /api/system/stats      - All telemetry (calls all 12 stats functions)
+    GET /api/system/cpu        - CPU cores + temperature
+    GET /api/system/memory     - RAM breakdown
+    GET /api/system/disk       - Local + remote + swap
+    GET /api/system/network    - TX/RX speeds + WiFi
+    GET /api/system/processes  - Top processes
+    GET /api/system/hardware   - Static hardware inventory
+    GET /api/system/health     - Service dependency health
+"""
+
+__all__ = ['register_routes']
+
+import asyncio
+import logging
+
+from ..config import config
+
+logger = logging.getLogger("reachy_mini.app.hello_world.system")
+
+
+def register_routes(app) -> None:
+    """Register system stats routes on the app."""
+
+    @app.settings_app.get("/api/system/stats")
+    def get_all_stats():
+        """Get all telemetry in a single call."""
+        return app._get_stats()
+
+    @app.settings_app.get("/api/system/cpu")
+    def get_cpu():
+        """Get CPU cores + temperature."""
+        from ..stats import get_cpu_stats
+        return get_cpu_stats()
+
+    @app.settings_app.get("/api/system/memory")
+    def get_memory():
+        """Get RAM breakdown."""
+        from ..stats import get_memory_stats
+        return get_memory_stats()
+
+    @app.settings_app.get("/api/system/disk")
+    def get_disk():
+        """Get local + remote + swap disk usage."""
+        from ..stats import get_disk_stats
+        return get_disk_stats(app._disk_cache, app._disk_cache_ttl)
+
+    @app.settings_app.get("/api/system/network")
+    def get_network():
+        """Get TX/RX speeds + WiFi."""
+        from ..stats import get_network_stats, get_wifi_stats
+        result = get_network_stats(app._last_net)
+        result.update(get_wifi_stats())
+        return result
+
+    @app.settings_app.get("/api/system/processes")
+    def get_processes():
+        """Get top processes by CPU usage."""
+        from ..stats import get_top_processes
+        return get_top_processes(app._process_cache)
+
+    @app.settings_app.get("/api/system/hardware")
+    def get_hardware():
+        """Get static hardware inventory."""
+        from ..stats import get_hardware_info
+        return get_hardware_info(app._hardware_cache)
+
+    @app.settings_app.get("/api/system/health")
+    async def get_system_health():
+        """Get service dependency health (daemon, whisper, kokoro, assistant)."""
+        from .health import _check_http_service, _check_websocket_service
+
+        loop = asyncio.get_event_loop()
+        timeout = config.TIMEOUTS['health_check']
+
+        daemon_check = loop.run_in_executor(
+            None, _check_http_service, f"{config.DAEMON_URL}/api/health", timeout)
+        kokoro_check = loop.run_in_executor(
+            None, _check_http_service, f"{config.KOKORO_URL}/health", timeout)
+        assistant_check = loop.run_in_executor(
+            None, _check_http_service, f"{config.ASSISTANT_URL}/health", timeout)
+
+        daemon_result, kokoro_result, assistant_result = await asyncio.gather(
+            daemon_check, kokoro_check, assistant_check
+        )
+
+        whisper_result = await _check_websocket_service(config.WHISPER_URL, timeout)
+
+        return {
+            "daemon": daemon_result,
+            "whisper": whisper_result,
+            "kokoro": kokoro_result,
+            "assistant": assistant_result
+        }

hello_world/api/transcript.py

@@ -0,0 +1,103 @@
+"""
+Transcript API - Response and tool activity broadcasting.
+
+Endpoints:
+    POST /api/transcript/claude - Broadcast LLM response text
+    POST /api/transcript/tool - Broadcast tool call activity
+    POST /api/transcript/error - Broadcast errors
+    POST /api/transcript/speaking - Broadcast speaking status
+"""
+
+__all__ = ['register_routes']
+
+import json
+import logging
+from pydantic import BaseModel
+from typing import Any
+
+logger = logging.getLogger("reachy_mini.app.hello_world.transcript")
+
+
+def register_routes(app) -> None:
+    """Register transcript routes on the app."""
+
+    class ToolActivity(BaseModel):
+        tool: str
+        args: dict[str, Any] = {}
+        result: Any = None
+        status: str = "started"
+
+    async def _broadcast(message: str) -> int:
+        """Broadcast to all transcript WebSocket clients."""
+        dead = set()
+        for ws in app._transcribe_websockets:
+            try:
+                await ws.send_text(message)
+            except Exception:
+                dead.add(ws)
+        app._transcribe_websockets.difference_update(dead)
+        return len(app._transcribe_websockets)
+
+    @app.settings_app.post("/api/transcript/claude")
+    async def add_claude_response(text: str, duration: float = 0, source: str = "LLM"):
+        """Broadcast LLM response to transcript clients."""
+        message = json.dumps({
+            "text": text,
+            "confidence": 100,
+            "audio_level": 0,
+            "speaker": source,
+            "is_claude": True
+        })
+        count = await _broadcast(message)
+        return {"status": "ok", "broadcast_to": count}
+
+    @app.settings_app.post("/api/transcript/tool")
+    async def add_tool_activity(activity: ToolActivity):
+        """Broadcast tool call activity."""
+        message = json.dumps({
+            "type": "tool",
+            "tool": activity.tool,
+            "args": activity.args,
+            "result": activity.result,
+            "status": activity.status,
+            "is_tool": True
+        })
+        count = await _broadcast(message)
+        return {"status": "ok", "broadcast_to": count}
+
+    @app.settings_app.post("/api/transcript/error")
+    async def add_error(error: str, source: str = "assistant"):
+        """Broadcast error."""
+        message = json.dumps({
+            "type": "error",
+            "error": error,
+            "source": source
+        })
+        count = await _broadcast(message)
+        return {"status": "ok", "broadcast_to": count}
+
+    @app.settings_app.post("/api/transcript/speaking")
+    async def set_speaking_status(speaking: bool, duration: float = 0, source: str = "tts"):
+        """Broadcast speaking status."""
+        from . import listener
+
+        # Mute listener while speaking (echo prevention)
+        if speaking:
+            listener.set_listener_muted(True)
+            if duration > 0:
+                import asyncio
+                async def auto_unmute():
+                    await asyncio.sleep(duration + 0.5)
+                    listener.set_listener_muted(False)
+                asyncio.create_task(auto_unmute())
+        else:
+            listener.set_listener_muted(False)
+
+        message = json.dumps({
+            "type": "speaking_status",
+            "speaking": speaking,
+            "duration": duration,
+            "source": source
+        })
+        count = await _broadcast(message)
+        return {"status": "ok", "broadcast_to": count, "speaking": speaking}

hello_world/app.py

@@ -0,0 +1,94 @@
+"""
+HelloWorld Application Class.
+
+The main application class that inherits from ReachyMiniApp.
+Provides a Status dashboard with system telemetry and robot state.
+"""
+
+__all__ = ['HelloWorld']
+
+import logging
+import threading
+import time
+import urllib.request
+
+from reachy_mini import ReachyMini, ReachyMiniApp
+
+from .api import register_all_routes
+from .config import config
+from .settings import load_settings
+from .stats import (
+    get_cpu_stats, get_memory_stats, get_disk_stats, get_network_stats,
+    get_wifi_stats, get_uptime_stats, get_load_stats, get_fan_stats,
+    get_throttle_stats, get_disk_io_stats, get_top_processes, get_hardware_info
+)
+from .websocket import register_websockets
+
+logger = logging.getLogger("reachy_mini.app.hello_world")
+
+
+class HelloWorld(ReachyMiniApp):
+    """A developer dashboard app for Reachy Mini with system telemetry."""
+
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+
+    def __init__(self):
+        super().__init__()
+        self._reachy_mini = None
+        self._start_time = time.time()
+        # Tracking dicts for stats that need delta calculations
+        self._last_net = {"rx": 0, "tx": 0, "time": time.time()}
+        self._disk_cache = {"local": None, "remote": None, "swap": None, "time": 0}
+        self._disk_cache_ttl = 60
+        self._last_disk_io = {"read": 0, "write": 0, "time": time.time()}
+        self._process_cache = {"processes": [], "time": 0}
+        self._hardware_cache = {}
+        # Load persistent settings
+        self._settings = load_settings()
+        # Transcript WebSocket clients for conversation broadcast
+        self._transcribe_websockets = set()
+
+        # Register WebSocket endpoints
+        if self.settings_app is not None:
+            register_websockets(self)
+
+    def _get_stats(self):
+        """Get all system stats using focused stat functions."""
+        result = {}
+        result.update(get_cpu_stats())
+        result.update(get_memory_stats())
+        result.update(get_disk_stats(self._disk_cache, self._disk_cache_ttl))
+        result.update(get_network_stats(self._last_net))
+        result.update(get_wifi_stats())
+        result.update(get_uptime_stats())
+        result.update(get_load_stats())
+        result.update(get_fan_stats())
+        result.update(get_throttle_stats())
+        result.update(get_disk_io_stats(self._last_disk_io))
+        result.update(get_top_processes(self._process_cache))
+        result.update(get_hardware_info(self._hardware_cache))
+        return result
+
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        """Main app loop."""
+        self._reachy_mini = reachy_mini
+
+        # Register all API routes
+        register_all_routes(self)
+
+        # Apply saved motor mode on startup
+        saved_mode = self._settings.get("motor_mode", "enabled")
+        if saved_mode != "enabled":
+            try:
+                req = urllib.request.Request(
+                    config.get_daemon_endpoint(f"motors/set_mode/{saved_mode}"),
+                    method="POST"
+                )
+                with urllib.request.urlopen(req, timeout=config.TIMEOUTS['daemon_move']) as resp:
+                    logger.info(f"Applied saved motor mode: {saved_mode}")
+            except Exception as e:
+                logger.warning(f"Failed to apply saved motor mode: {e}")
+
+        # Main loop
+        while not stop_event.is_set():
+            time.sleep(0.02)

hello_world/config.py

@@ -0,0 +1,120 @@
+"""
+Centralized Configuration - Environment variables, service URLs, and timeouts.
+
+All service URLs default to localhost. Override via environment variables
+for your specific network setup.
+
+Usage:
+    from .config import config
+
+    url = config.DAEMON_URL
+    timeout = config.TIMEOUTS['health_check']
+"""
+
+__all__ = ['config', 'Config', 'validate_path_in_directory']
+
+import os
+import logging
+from dataclasses import dataclass, field
+from pathlib import Path
+
+logger = logging.getLogger("reachy_mini.app.hello_world.config")
+
+
+def _get_env(key: str, default: str) -> str:
+    return os.environ.get(key, default)
+
+
+def _get_env_int(key: str, default: int) -> int:
+    try:
+        return int(os.environ.get(key, default))
+    except (ValueError, TypeError):
+        return default
+
+
+def _get_env_float(key: str, default: float) -> float:
+    try:
+        return float(os.environ.get(key, default))
+    except (ValueError, TypeError):
+        return default
+
+
+@dataclass
+class Config:
+    """Centralized configuration with environment variable support.
+
+    Environment Variables:
+        REACHY_DAEMON_URL - Reachy daemon API URL (default: http://localhost:8000)
+        REACHY_MEDIA_DIR - Base directory for media files
+        REACHY_LOG_LEVEL - Logging level (DEBUG, INFO, WARNING, ERROR)
+    """
+
+    # Service URLs - all default to localhost for community use
+    DAEMON_URL: str = field(default_factory=lambda: _get_env(
+        'REACHY_DAEMON_URL', 'http://localhost:8000'))
+
+    # Media directories
+    MEDIA_BASE_DIR: Path = field(default_factory=lambda: Path(
+        _get_env('REACHY_MEDIA_DIR', str(Path.home() / 'hello_world' / 'media'))))
+
+    @property
+    def RECORDINGS_DIR(self) -> Path:
+        return self.MEDIA_BASE_DIR / "recordings"
+
+    @property
+    def SNAPSHOTS_DIR(self) -> Path:
+        return self.MEDIA_BASE_DIR / "snapshots"
+
+    @property
+    def SOUNDS_DIR(self) -> Path:
+        return self.MEDIA_BASE_DIR / "sounds"
+
+    @property
+    def MUSIC_DIR(self) -> Path:
+        return self.MEDIA_BASE_DIR / "music"
+
+    # Timeouts (in seconds)
+    TIMEOUTS: dict = field(default_factory=lambda: {
+        'litellm_chat': _get_env_float('REACHY_TIMEOUT_LITELLM', 120.0),
+        'litellm_stt': _get_env_float('REACHY_TIMEOUT_STT', 30.0),
+        'litellm_tts': _get_env_float('REACHY_TIMEOUT_TTS', 30.0),
+        'daemon_move': _get_env_float('REACHY_TIMEOUT_DAEMON_MOVE', 10.0),
+        'daemon_quick': _get_env_float('REACHY_TIMEOUT_DAEMON_QUICK', 0.5),
+        'health_check': _get_env_float('REACHY_TIMEOUT_HEALTH', 2.0),
+    })
+
+    # Logging
+    LOG_LEVEL: str = field(default_factory=lambda: _get_env('REACHY_LOG_LEVEL', 'INFO'))
+
+    def get_daemon_endpoint(self, path: str) -> str:
+        return f"{self.DAEMON_URL}/api/{path.lstrip('/')}"
+
+    def validate(self) -> list[str]:
+        warnings = []
+        if not self.DAEMON_URL.startswith(('http://', 'https://')):
+            warnings.append(f"DAEMON_URL should start with http:// or https://: {self.DAEMON_URL}")
+        return warnings
+
+    def log_config(self) -> None:
+        logger.info(f"Config: DAEMON_URL={self.DAEMON_URL}")
+        logger.info(f"Config: MEDIA_BASE_DIR={self.MEDIA_BASE_DIR}")
+        for warning in self.validate():
+            logger.warning(f"Config warning: {warning}")
+
+
+def validate_path_in_directory(base_dir: Path, filename: str) -> Path:
+    """Validate that a filename resolves to a path within base_dir.
+
+    Prevents path traversal attacks.
+    """
+    base_resolved = base_dir.resolve()
+    file_path = (base_dir / filename).resolve()
+    try:
+        file_path.relative_to(base_resolved)
+    except ValueError:
+        raise ValueError(f"Invalid path: {filename}")
+    return file_path
+
+
+# Global config instance
+config = Config()

hello_world/main.py

@@ -0,0 +1,16 @@
+"""
+Hello World - Main entry point.
+
+A developer-friendly dashboard app for the Reachy Mini robot.
+"""
+
+from .app import HelloWorld
+
+__all__ = ['HelloWorld']
+
+if __name__ == "__main__":
+    app = HelloWorld()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

hello_world/settings.py

@@ -0,0 +1,95 @@
+"""
+Settings - Persistent settings management.
+
+Provides load/save for persistent settings with sensible defaults.
+All URLs default to localhost for community use.
+"""
+
+__all__ = ['DEFAULT_SETTINGS', 'SETTINGS_FILE', 'load_settings', 'save_settings']
+
+import json
+import logging
+from pathlib import Path
+
+logger = logging.getLogger("reachy_mini.app.hello_world.settings")
+
+# Settings file location - override with REACHY_SETTINGS_FILE env var
+import os
+SETTINGS_FILE = Path(os.environ.get(
+    'REACHY_SETTINGS_FILE',
+    str(Path.home() / 'hello_world' / 'settings.json')
+))
+
+DEFAULT_SETTINGS = {
+    # Motor control
+    "motor_mode": "enabled",  # enabled, disabled, gravity_compensation
+
+    # === UPDATE RATES ===
+    "robot_update_hz": 15,
+    "stats_update_hz": 1,
+
+    # === VIDEO VIEW ===
+    "video_view": "simulation",  # off, camera, simulation, both
+
+    # === UI STATE ===
+    "last_active_tab": "status",
+    "system_stats_order": None,
+
+    # === OSCILLATION ===
+    "oscillation_amplitude": 0.5,
+    "oscillation_speed": 1.0,
+
+    # === CONVERSATION (LiteLLM) ===
+    # API keys — stored here, passed via api_key param to LiteLLM calls
+    # No env vars needed — keys are editable from the UI
+    "api_keys": {},  # {"openai": "sk-...", "anthropic": "sk-ant-...", ...}
+
+    # Audio routing (independently selectable)
+    "audio_input": "robot",    # "robot" (arecord) or "browser" (getUserMedia -> WebSocket)
+    "audio_output": "robot",   # "robot" (push_audio_sample) or "browser" (WebSocket -> Web Audio)
+
+    # Provider/model selection
+    "stt_provider": "",        # e.g. "openai"
+    "stt_model": "",           # e.g. "whisper-1"
+    "llm_provider": "",        # e.g. "anthropic"
+    "llm_model": "",           # e.g. "claude-haiku-4-5-20251001"
+    "tts_provider": "",        # e.g. "openai"
+    "tts_model": "",           # e.g. "tts-1"
+    "tts_voice": "",           # e.g. "alloy"
+
+    # Thresholds
+    "conf_threshold": 50,      # min confidence to process (0-100)
+    "vol_threshold": 50,       # min volume to process (0-100)
+    "mic_gain": 5.0,           # mic amplification factor
+
+    # LLM behaviour
+    "system_prompt": "",       # custom system prompt (empty = use default)
+    "web_search": False,       # enable web search via LiteLLM web_search_options
+}
+
+
+def load_settings() -> dict:
+    """Load settings from file, return defaults if not found."""
+    try:
+        if SETTINGS_FILE.exists():
+            logger.info(f"Loading settings from: {SETTINGS_FILE}")
+            with open(SETTINGS_FILE) as f:
+                saved = json.load(f)
+                return {**DEFAULT_SETTINGS, **saved}
+        else:
+            logger.info(f"Settings file not found at {SETTINGS_FILE}, using defaults")
+    except Exception as e:
+        logger.warning(f"Failed to load settings from {SETTINGS_FILE}: {e}")
+    return DEFAULT_SETTINGS.copy()
+
+
+def save_settings(settings: dict) -> bool:
+    """Save settings to file."""
+    try:
+        SETTINGS_FILE.parent.mkdir(parents=True, exist_ok=True)
+        with open(SETTINGS_FILE, "w") as f:
+            json.dump(settings, f, indent=2)
+        return True
+    except Exception as e:
+        logger.error(f"Failed to save settings: {e}")
+        return False

hello_world/sounds/camera.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:729f3e7a76274075ff546fd8128c4155795dc85f4f4635931ed372b68098287d
+size 3244

hello_world/static/css/styles.css

@@ -0,0 +1,1240 @@
+:root {
+    /* ===== DARK THEME (Default) ===== */
+    --white: #ffffff;
+    --black: #000000;
+
+    --bg-primary: #0f0f0f;
+    --bg-secondary: #1a1a1a;
+    --bg-tertiary: #252525;
+    --bg-elevated: #1a1a2e;
+
+    --text-primary: #f5f5f5;
+    --text-secondary: #a0a0a0;
+    --text-muted: #666;
+    --text-50: rgba(245, 245, 245, 0.5);
+
+    --accent: #6366f1;
+    --accent-hover: #818cf8;
+    --accent-50: rgba(99, 102, 241, 0.5);
+    --accent-20: rgba(99, 102, 241, 0.2);
+
+    --success: #22c55e;
+    --success-50: rgba(34, 197, 94, 0.5);
+    --warning: #f59e0b;
+    --warning-50: rgba(245, 158, 11, 0.5);
+    --error: #ef4444;
+    --error-50: rgba(239, 68, 68, 0.5);
+
+    --border: #333;
+    --border-subtle: #2a2a2a;
+
+    --white-5: rgba(255, 255, 255, 0.05);
+    --white-10: rgba(255, 255, 255, 0.1);
+    --white-15: rgba(255, 255, 255, 0.15);
+    --white-50: rgba(255, 255, 255, 0.5);
+
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+}
+
+/* ===== LIGHT THEME ===== */
+:root.light {
+    --bg-primary: #f8f9fa;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #e9ecef;
+    --bg-elevated: #ffffff;
+
+    --text-primary: #1a1a1a;
+    --text-secondary: #6c757d;
+    --text-muted: #adb5bd;
+    --text-50: rgba(26, 26, 26, 0.5);
+
+    --accent: #4f46e5;
+    --accent-hover: #6366f1;
+    --accent-50: rgba(79, 70, 229, 0.5);
+    --accent-20: rgba(79, 70, 229, 0.2);
+
+    --success: #16a34a;
+    --success-50: rgba(22, 163, 74, 0.5);
+    --warning: #d97706;
+    --warning-50: rgba(217, 119, 6, 0.5);
+    --error: #dc2626;
+    --error-50: rgba(220, 38, 38, 0.5);
+
+    --border: #dee2e6;
+    --border-subtle: #e9ecef;
+
+    --white-5: rgba(0, 0, 0, 0.03);
+    --white-10: rgba(0, 0, 0, 0.06);
+    --white-15: rgba(0, 0, 0, 0.08);
+    --white-50: rgba(0, 0, 0, 0.3);
+
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    padding-top: 48px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* ===== Header ===== */
+.header-bar {
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    z-index: 1000;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem 0 0;
+}
+
+/* Header volume control */
+.header-volume {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-right: 0.25rem;
+}
+.header-volume-icon { font-size: 0.85rem; cursor: default; }
+.header-volume-slider {
+    width: 70px;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--bg-tertiary);
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+}
+.header-volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--accent);
+    cursor: pointer;
+}
+.header-volume-value {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    font-family: 'SF Mono', Monaco, monospace;
+    min-width: 1.5rem;
+    text-align: right;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-tertiary);
+    border-radius: 1rem;
+    font-size: 0.7rem;
+    flex-shrink: 0;
+}
+
+.stat-num {
+    font-family: monospace;
+    font-size: 0.625rem;
+    color: var(--accent);
+    min-width: 1.8em;
+    text-align: right;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: var(--white-10);
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--white-50);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.status-indicator.info {
+    background: var(--accent-20);
+    color: var(--accent);
+}
+
+/* ===== Tabs ===== */
+.tabs {
+    display: flex;
+    background: transparent;
+    padding: 0;
+    overflow-x: auto;
+    flex: 1;
+}
+
+.tab {
+    padding: 0.875rem 1rem;
+    cursor: pointer;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+    white-space: nowrap;
+    font-size: 0.875rem;
+}
+
+.tab:hover {
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+}
+
+.tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.tab-content {
+    display: none;
+    padding: 1.5rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.tab-content.active { display: block; }
+
+/* ===== Cards ===== */
+.card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.card-title { font-size: 1rem; font-weight: 600; }
+.copy-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.25rem 0.35rem; cursor: pointer; color: var(--text-muted); transition: all 0.15s; display: inline-flex; align-items: center; }
+.copy-btn:hover { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--text-secondary); }
+.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
+
+/* ===== Charts ===== */
+.charts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.75rem;
+}
+
+.charts-grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.chart-container {
+    background: var(--bg-tertiary);
+    border-radius: 8px;
+    padding: 0.75rem;
+    border: 1px solid var(--border-subtle);
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.chart-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-secondary);
+    font-weight: 600;
+}
+
+.chart-value {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.8rem;
+    color: var(--text-primary);
+}
+
+.net-value {
+    display: inline-block;
+    min-width: 5.5em;
+    text-align: right;
+}
+
+.net-stats {
+    display: flex;
+    gap: 0.5rem;
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.75rem;
+}
+
+.chart-container canvas {
+    width: 100%;
+    height: 70px;
+    border-radius: 4px;
+}
+
+.chart-legend {
+    font-size: 0.65rem;
+    margin-top: 0.25rem;
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+
+/* ===== Disk Charts ===== */
+.disk-charts {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0.5rem 0;
+}
+
+.disk-chart-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+
+.disk-label {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    letter-spacing: 0.5px;
+}
+
+.disk-info {
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    text-align: center;
+    line-height: 1.3;
+}
+
+/* ===== Status Pills ===== */
+.status-pills-container {
+    display: flex;
+    gap: 24px;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 16px;
+    margin-bottom: 16px;
+}
+
+.status-pills-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.status-pills-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.status-pills {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.2s ease;
+}
+
+.status-pill .pill-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    transition: all 0.2s ease;
+}
+
+.status-pill.active {
+    background: rgba(34, 197, 94, 0.15);
+    border-color: rgba(34, 197, 94, 0.3);
+    color: #22c55e;
+}
+.status-pill.active .pill-dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
+
+.status-pill.error {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.3);
+    color: #ef4444;
+}
+.status-pill.error .pill-dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
+
+.status-pill.connecting {
+    background: rgba(234, 179, 8, 0.15);
+    border-color: rgba(234, 179, 8, 0.3);
+    color: #eab308;
+}
+.status-pill.connecting .pill-dot { background: #eab308; box-shadow: 0 0 8px #eab308; animation: pulse 1s infinite; }
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* ===== Issues Badge ===== */
+.issues-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: rgba(239, 68, 68, 0.2);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #ef4444;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.issues-badge:hover { background: rgba(239, 68, 68, 0.3); transform: scale(1.05); }
+.issues-badge .issues-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: pulse 1s infinite; }
+.issues-badge.hidden { display: none; }
+
+/* ===== Grid Layout ===== */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.25rem;
+}
+
+/* ===== Info Rows ===== */
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border-subtle);
+}
+.info-row:last-child { border-bottom: none; }
+
+.info-label {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.info-value {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.8rem;
+    color: var(--text-primary);
+}
+
+.info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+}
+
+.info-grid .info-row { padding: 0.35rem 0.5rem; }
+.info-grid .span-2 { grid-column: span 2; }
+
+.section-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 0.5rem 0;
+}
+
+/* ===== Bottom Info Row ===== */
+.bottom-info-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.processes-header, .hardware-header {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.5rem;
+}
+
+/* Process Table */
+.process-table {
+    width: 100%;
+    font-size: 0.7rem;
+    border-collapse: collapse;
+}
+.process-table th {
+    text-align: left;
+    padding: 4px 8px;
+    color: var(--text-muted);
+    font-weight: 500;
+    border-bottom: 1px solid var(--border-subtle);
+}
+.process-table td {
+    padding: 3px 8px;
+    color: var(--text-secondary);
+    font-family: 'SF Mono', Monaco, monospace;
+}
+.process-table tr:hover td { color: var(--text-primary); }
+
+/* Hardware Grid */
+.hardware-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2px;
+}
+.hw-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 0;
+    font-size: 0.7rem;
+}
+.hw-label { color: var(--text-muted); }
+.hw-value { color: var(--text-secondary); text-align: right; }
+.hw-mono { font-family: 'SF Mono', Monaco, monospace; font-size: 0.65rem; }
+
+/* ===== Text Color Helpers ===== */
+.text-success { color: var(--success); }
+.text-error { color: var(--error); }
+
+/* ===== Buttons ===== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.15s;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+.btn:hover { background: var(--bg-elevated); }
+.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.7rem; }
+.btn-secondary { background: transparent; border-color: var(--border); color: var(--text-secondary); }
+.btn-secondary:hover { background: var(--white-5); }
+
+/* ===== Toggle Switch ===== */
+.switch-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+}
+.switch-text {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+.switch-label input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+.switch-slider {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    transition: background 0.2s, border-color 0.2s;
+    flex-shrink: 0;
+}
+.switch-slider::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    background: var(--text-secondary);
+    border-radius: 50%;
+    transition: transform 0.2s, background 0.2s;
+}
+.switch-label input:checked + .switch-slider {
+    background: var(--accent-20);
+    border-color: var(--accent);
+}
+.switch-label input:checked + .switch-slider::after {
+    transform: translateX(16px);
+    background: var(--accent);
+}
+
+/* ===== Toast System ===== */
+.toast-container {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+}
+
+.toast {
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-lg);
+    font-size: 0.8rem;
+    color: var(--text-primary);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+    animation: toast-in 0.3s ease;
+    max-width: 350px;
+}
+.toast-success { border-left: 3px solid var(--success); }
+.toast-error { border-left: 3px solid var(--error); }
+.toast-info { border-left: 3px solid var(--accent); }
+
+@keyframes toast-in {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===== Floating Panel ===== */
+.floating-panel {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+}
+
+.floating-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    user-select: none;
+}
+
+.floating-panel-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.floating-close-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    cursor: pointer;
+    padding: 0 0.25rem;
+    line-height: 1;
+}
+.floating-close-btn:hover { color: var(--text-primary); }
+
+.floating-minimize-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0 0.25rem;
+    line-height: 1;
+}
+.floating-minimize-btn:hover { color: var(--text-primary); }
+
+.floating-panel.minimized .floating-panel-content {
+    display: none;
+}
+.floating-panel.minimized {
+    position: fixed;
+    bottom: 8px;
+    width: auto;
+    right: auto;
+    top: auto;
+}
+
+/* ===== Joystick Styles ===== */
+.joystick-area {
+    background: var(--bg-tertiary);
+    border: 2px solid var(--border);
+}
+
+.joystick-knob {
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+}
+
+.joystick-head .joystick-area {
+    border-color: var(--accent-50);
+}
+.joystick-head .joystick-knob {
+    background: var(--accent);
+}
+
+.joystick-values {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.7rem;
+    font-family: 'SF Mono', Monaco, monospace;
+    color: var(--text-secondary);
+}
+
+/* ===== Camera Panel ===== */
+.camera-container { position: relative; width: 320px; height: 240px; background: #000; overflow: hidden; }
+.camera-container video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; }
+.video-placeholder.hidden { display: none; }
+.placeholder-icon { font-size: 2rem; margin-bottom: 0.5rem; }
+.cam-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: transparent; }
+#cameraToggle.active { background: var(--accent-20); border-color: var(--accent); color: var(--accent); }
+.camera-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--bg-tertiary); }
+.cam-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.25rem 0.5rem; cursor: pointer; font-size: 1.1rem; color: var(--text-primary); }
+.cam-btn:hover { background: var(--bg-secondary); }
+.cam-btn.recording { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); animation: pulse-red 1s infinite; }
+.record-timer { font-family: 'SF Mono', Monaco, monospace; font-size: 0.75rem; color: var(--text-secondary); }
+@keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.cam-btn.listening { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.5); color: var(--accent); }
+.cam-btn.speaking { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.5); animation: pulse-green 1s infinite; }
+@keyframes pulse-green { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+
+/* ===== Media Gallery ===== */
+.media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
+.media-count { font-size: 0.75rem; color: var(--text-muted); }
+.media-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 2rem; font-size: 0.85rem; }
+.media-item { position: relative; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: border-color 0.2s; }
+.media-item:hover { border-color: var(--accent-50); }
+.media-item img, .media-item video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #000; }
+.media-duration { position: absolute; bottom: 40px; right: 6px; background: rgba(0,0,0,0.8); color: #fff; font-size: 0.65rem; font-family: 'SF Mono', Monaco, monospace; padding: 1px 5px; border-radius: 3px; }
+.media-item-info { padding: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
+.media-item-name { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
+.media-item-size { font-size: 0.65rem; color: var(--text-muted); font-family: 'SF Mono', Monaco, monospace; margin-left: 0.5rem; }
+.media-item-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; }
+.media-item:hover .media-item-actions { opacity: 1; }
+.media-action-btn { background: none; border: none; cursor: pointer; font-size: 0.85rem; padding: 2px 4px; border-radius: var(--radius-sm); color: var(--text-secondary); }
+.media-action-btn:hover { background: var(--white-10); color: var(--text-primary); }
+.media-action-btn.delete:hover { color: var(--error); }
+.media-lightbox { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.media-lightbox img, .media-lightbox video { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-lg); }
+.media-lightbox-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; }
+
+/* Music */
+.music-now-playing { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--accent-10); border-bottom: 1px solid var(--border-subtle); font-size: 0.75rem; color: var(--accent); }
+.music-now-playing span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.music-now-playing .btn-xs { font-size: 0.65rem; padding: 0.15rem 0.5rem; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; }
+.music-cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--bg-tertiary); }
+.music-cover-placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--text-muted); }
+.music-artist { display: block; font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.music-active { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent-50); }
+.upload-btn { font-size: 0.7rem; color: var(--accent); cursor: pointer; padding: 0.15rem 0.5rem; border: 1px solid var(--accent-50); border-radius: var(--radius-sm); background: transparent; transition: background 0.2s; }
+.upload-btn:hover { background: var(--accent-10); }
+.upload-btn input[type="file"] { display: none; }
+
+/* Sound recordings list */
+.sound-gallery { display: flex; flex-direction: column; gap: 0.25rem; }
+.sound-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: var(--bg-secondary); }
+.sound-item:hover { background: var(--bg-tertiary); }
+.sound-icon { font-size: 1.2rem; flex-shrink: 0; }
+.sound-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
+.sound-name { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sound-meta { font-size: 0.65rem; color: var(--text-muted); font-family: 'SF Mono', Monaco, monospace; white-space: nowrap; }
+.sound-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; }
+.sound-item:hover .sound-actions { opacity: 1; }
+.sound-player { width: 100%; max-width: 240px; height: 28px; }
+
+#joystickToggle.active {
+    background: var(--accent-20);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+/* ===== Conversation Tab ===== */
+
+/* Listener hero area with large mic button */
+.listener-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.25rem 1rem 1rem;
+    gap: 0.6rem;
+}
+
+/* Large circular mic button */
+.mic-btn {
+    position: relative;
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    border: 2px solid var(--border);
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.25s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.mic-btn:hover {
+    background: var(--bg-elevated);
+    border-color: var(--text-secondary);
+    color: var(--text-primary);
+    transform: scale(1.05);
+}
+.mic-btn .mic-icon { width: 32px; height: 32px; z-index: 1; }
+.mic-btn .mic-rings {
+    position: absolute;
+    inset: -4px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    transition: all 0.3s;
+}
+
+/* Active (listening) state */
+.mic-btn.active {
+    background: rgba(34, 197, 94, 0.15);
+    border-color: rgba(34, 197, 94, 0.6);
+    color: var(--success);
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.25), 0 0 40px rgba(34, 197, 94, 0.1);
+}
+.mic-btn.active .mic-rings {
+    border-color: rgba(34, 197, 94, 0.3);
+    animation: mic-pulse 2s ease-in-out infinite;
+}
+@keyframes mic-pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.15); opacity: 0.4; }
+}
+
+.mic-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Keep old class name for Save Prompt button etc */
+.listener-btn {
+    padding: 0.4rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+}
+.listener-btn:hover { background: var(--bg-elevated); }
+
+.status-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+.status-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
+.status-dot.offline { background: var(--text-muted); }
+
+.listener-label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.speaking-indicator {
+    font-size: 0.7rem;
+    color: var(--accent);
+    animation: pulse 1s infinite;
+}
+
+.listener-selects {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: auto;
+}
+.listener-selects select {
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-size: 0.7rem;
+}
+
+/* Provider Settings */
+.provider-card { padding: 0; }
+.provider-summary {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+.provider-summary:hover { color: var(--text-primary); }
+
+.provider-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding: 0 1rem 1rem;
+}
+
+.provider-section {
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    padding: 0.75rem;
+}
+.provider-section-title {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.provider-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.35rem;
+    font-size: 0.75rem;
+}
+.provider-row label:not(.toggle-switch) {
+    min-width: 70px;
+    color: var(--text-secondary);
+    font-size: 0.7rem;
+}
+.provider-row select, .provider-row input[type="range"] {
+    flex: 1;
+    padding: 0.25rem 0.4rem;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 0.7rem;
+}
+.slider-value {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    min-width: 3em;
+    text-align: right;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 28px;
+    min-width: 28px;
+    height: 16px;
+    flex-shrink: 0;
+}
+.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    transition: 0.2s;
+}
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 10px;
+    width: 10px;
+    left: 2px;
+    bottom: 2px;
+    background: var(--text-muted);
+    border-radius: 50%;
+    transition: 0.2s;
+}
+.toggle-switch input:checked + .toggle-slider {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+.toggle-switch input:checked + .toggle-slider:before {
+    transform: translateX(12px);
+    background: white;
+}
+
+/* API Key Rows */
+.api-key-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.3rem 0;
+    border-bottom: 1px solid var(--border-subtle);
+}
+.api-key-row:last-child { border-bottom: none; }
+.api-key-label { display: flex; flex-direction: column; }
+.api-key-name {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    text-transform: capitalize;
+}
+.api-key-caps {
+    font-size: 0.6rem;
+    color: var(--text-muted);
+}
+.api-key-input-group {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+.api-key-input {
+    width: 160px;
+    padding: 0.2rem 0.4rem;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 0.7rem;
+    font-family: monospace;
+}
+.api-key-save-btn {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--success);
+    cursor: pointer;
+    padding: 0.15rem 0.4rem;
+    font-size: 0.75rem;
+}
+.api-key-save-btn:hover { background: var(--white-5); }
+
+/* Waveform */
+.waveform-card { padding: 0.5rem; }
+#waveformCanvas {
+    width: 100%;
+    display: block;
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 6px;
+}
+
+/* Transcript */
+.transcript-card { padding: 0; }
+.transcript-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+}
+.transcript-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.6;
+}
+.transcript-actions { display: flex; gap: 0.4rem; }
+.btn-xs {
+    font-size: 0.65rem;
+    padding: 0.15rem 0.5rem;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.btn-xs:hover { background: var(--white-10); color: var(--text-primary); }
+.btn-warning { border-color: rgba(245,158,11,0.3); color: var(--warning); }
+.btn-warning:hover { background: rgba(245,158,11,0.1); }
+.transcript-container {
+    max-height: 400px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+
+.transcript-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.75rem;
+}
+.transcript-table thead th {
+    position: sticky;
+    top: 0;
+    background: var(--bg-tertiary);
+    padding: 0.4rem 0.5rem;
+    text-align: left;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    letter-spacing: 0.3px;
+    border-bottom: 1px solid var(--border);
+}
+.ts-th-time { width: 65px; }
+.ts-th-conf { width: 45px; }
+.ts-th-vol { width: 40px; }
+
+.transcript-row td {
+    padding: 0.35rem 0.5rem;
+    border-bottom: 1px solid var(--border-subtle);
+    vertical-align: top;
+}
+.ts-time {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+.ts-conf, .ts-vol {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.65rem;
+    text-align: center;
+}
+.ts-msg {
+    word-break: break-word;
+    color: var(--text-primary);
+}
+.ts-speaker {
+    font-weight: 600;
+    color: var(--accent);
+}
+.ts-source {
+    font-size: 0.65rem;
+    padding: 1px 6px;
+    border-radius: 3px;
+    background: var(--accent-20);
+    color: var(--accent);
+}
+.ts-tool {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.7rem;
+    color: var(--warning);
+}
+.tool-icon { font-size: 0.85rem; margin-right: 0.3rem; }
+.tool-label {
+    font-weight: 600;
+    font-size: 0.72rem;
+    color: var(--text-primary);
+}
+.tool-arg {
+    font-size: 0.68rem;
+    margin-left: 0.4rem;
+    padding: 1px 7px;
+    border-radius: 10px;
+    background: var(--accent-20);
+    color: var(--accent);
+}
+.tool-summary { display: flex; align-items: center; gap: 0; }
+.tool-chevron {
+    font-size: 0.5rem;
+    margin-left: auto;
+    padding-left: 0.5rem;
+    opacity: 0;
+    transition: transform 0.2s, opacity 0.15s;
+    color: var(--text-secondary);
+}
+.tool-expandable { cursor: pointer; }
+.tool-expandable:hover .tool-chevron { opacity: 0.6; }
+.tool-expanded .tool-chevron { transform: rotate(90deg); opacity: 0.6; }
+.tool-detail {
+    display: none;
+    margin: 0.4rem 0 0;
+    padding: 0.5rem 0.6rem;
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.65rem;
+    line-height: 1.5;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+}
+.tool-expanded .tool-detail { display: block; }
+.ts-error { color: var(--error); }
+
+/* Row types */
+.user-row { background: transparent; }
+.response-row { background: var(--white-5); }
+.response-row .ts-msg { color: var(--text-primary); }
+.tool-row { background: var(--white-5); font-size: 0.7rem; opacity: 0.8; }
+.error-row { background: rgba(239, 68, 68, 0.05); }
+.ignored-row { opacity: 0.4; }
+.below-threshold { opacity: 0.35; }
+.below-threshold .ts-msg { text-decoration: line-through; }
+.ts-filtered { font-size: 0.65rem; opacity: 0.6; font-style: italic; text-decoration: none; display: inline; }
+
+/* Text Input */
+.input-card { padding: 0.5rem 0.75rem; }
+.input-bar {
+    display: flex;
+    gap: 0.5rem;
+}
+.conversation-input {
+    flex: 1;
+    padding: 0.4rem 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-size: 0.8rem;
+}
+.conversation-input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+    .charts-grid-3 { grid-template-columns: 1fr 1fr; }
+    .bottom-info-row { grid-template-columns: 1fr; }
+    .info-grid { grid-template-columns: 1fr; }
+    .header-right .status-badge { display: none; }
+    .provider-grid { grid-template-columns: 1fr; }
+    .listener-selects { margin-left: 0; }
+    .listener-bar { flex-wrap: wrap; }
+}
+
+@media (max-width: 480px) {
+    .charts-grid-3 { grid-template-columns: 1fr; }
+    .tab { padding: 0.75rem 0.5rem; font-size: 0.75rem; }
+}

hello_world/static/index.html

@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello World</title>
+    <link rel="icon" type="image/svg+xml" href="https://pollen-robotics-reachy-mini.hf.space/assets/reachy-icon.svg">
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
+            "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
+            "urdf-loader": "https://cdn.jsdelivr.net/npm/urdf-loader@0.12.3/src/URDFLoader.js"
+        }
+    }
+    </script>
+</head>
+<body>
+    <header class="header-bar">
+        <nav class="tabs">
+            <div class="tab active" data-tab="status">Status</div>
+            <div class="tab" data-tab="telemetry">Telemetry</div>
+            <div class="tab" data-tab="conversation">Conversation</div>
+            <div class="tab" data-tab="media">Media</div>
+        </nav>
+        <div class="header-right">
+            <span id="issuesBadge" class="issues-badge hidden" title="Click to view status">
+                <span class="issues-dot"></span>
+                <span class="issues-count">0</span>
+            </span>
+            <div class="status-badge">
+                <span class="status-indicator info" title="CPU usage">
+                    <span id="headerCpu" class="stat-num">--%</span>
+                    <span>CPU</span>
+                </span>
+                <span class="status-indicator info" title="RAM usage">
+                    <span id="headerRam" class="stat-num">--%</span>
+                    <span>RAM</span>
+                </span>
+                <span class="status-indicator info" title="Network speed">
+                    <span id="headerNet" class="stat-num">--</span>
+                    <span>Net</span>
+                </span>
+            </div>
+            <div class="header-volume" title="Robot volume">
+                <span class="header-volume-icon">&#x1F50A;</span>
+                <input type="range" id="headerVolumeSlider" min="0" max="100" value="100" class="header-volume-slider">
+                <span id="headerVolumeValue" class="header-volume-value">100</span>
+            </div>
+            <button id="cameraToggle" class="btn btn-secondary btn-sm" title="Toggle camera">&#x1F4F7;</button>
+            <button id="joystickToggle" class="btn btn-secondary btn-sm" title="Toggle joystick">&#x1F579;</button>
+            <button id="themeToggle" class="btn btn-secondary btn-sm" title="Toggle theme">&#x2600;</button>
+        </div>
+    </header>
+
+    <!-- Status Tab -->
+    <div id="status" class="tab-content active">
+        <!-- Service Status Pills -->
+        <div class="status-pills-container">
+            <div class="status-pills-group">
+                <span class="status-pills-label">Robot</span>
+                <div class="status-pills">
+                    <span id="pillApp" class="status-pill connecting" title="WebSocket to app">
+                        <span class="pill-dot"></span>App
+                    </span>
+                    <span id="pillAPI" class="status-pill connecting" title="Daemon API on port 8000">
+                        <span class="pill-dot"></span>API
+                    </span>
+                    <span id="pillSerial" class="status-pill connecting" title="Serial connection to motors">
+                        <span class="pill-dot"></span>Serial
+                    </span>
+                    <span id="pillZenoh" class="status-pill connecting" title="Zenoh pub/sub - pose/joint updates">
+                        <span class="pill-dot"></span>Zenoh
+                    </span>
+                    <span id="pillThrottle" class="status-pill" title="Thermal throttling status">
+                        <span class="pill-dot"></span>Throt
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- System Stats Charts -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">System Stats</span>
+            </div>
+            <div id="systemStatsGrid" class="charts-grid charts-grid-3">
+                <div class="chart-container" id="chart-temp">
+                    <div class="chart-header">
+                        <span class="chart-label">Temp</span>
+                        <span class="chart-value" id="tempValue">--</span>
+                    </div>
+                    <canvas id="tempChart"></canvas>
+                </div>
+                <div class="chart-container" id="chart-cpu">
+                    <div class="chart-header">
+                        <span class="chart-label">CPU</span>
+                        <span class="chart-value" id="cpuValue">--</span>
+                    </div>
+                    <canvas id="cpuChart"></canvas>
+                    <div class="chart-legend" id="cpuLegend"></div>
+                </div>
+                <div class="chart-container" id="chart-ram">
+                    <div class="chart-header">
+                        <span class="chart-label">RAM</span>
+                        <span class="chart-value" id="ramValue">--</span>
+                    </div>
+                    <canvas id="ramChart"></canvas>
+                    <div class="chart-legend" id="ramLegend"></div>
+                </div>
+                <div class="chart-container" id="chart-disk">
+                    <div class="chart-header">
+                        <span class="chart-label">Disk</span>
+                    </div>
+                    <div class="disk-charts">
+                        <div class="disk-chart-item">
+                            <canvas id="diskLocalChart" width="60" height="60"></canvas>
+                            <div class="disk-label">Disk</div>
+                            <div id="diskLocalInfo" class="disk-info">--</div>
+                        </div>
+                        <div class="disk-chart-item">
+                            <canvas id="swapChart" width="60" height="60"></canvas>
+                            <div class="disk-label">Swap</div>
+                            <div id="swapInfo" class="disk-info">--</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="chart-container" id="chart-network">
+                    <div class="chart-header">
+                        <span class="chart-label">Network</span>
+                        <span class="net-stats">
+                            <span><span class="text-success">&#x2193;</span><span id="netDownValue" class="net-value">--</span></span>
+                            <span><span class="text-error">&#x2191;</span><span id="netUpValue" class="net-value">--</span></span>
+                        </span>
+                    </div>
+                    <canvas id="netChart"></canvas>
+                </div>
+                <div class="chart-container" id="chart-wifi">
+                    <div class="chart-header">
+                        <span class="chart-label">WiFi</span>
+                        <span class="chart-value" id="wifiStrength">--</span>
+                    </div>
+                    <canvas id="wifiChart"></canvas>
+                    <div class="chart-legend" id="wifiSsid">--</div>
+                </div>
+                <div class="chart-container" id="chart-load">
+                    <div class="chart-header">
+                        <span class="chart-label">Load</span>
+                        <span class="chart-value" id="loadValue">--</span>
+                    </div>
+                    <canvas id="loadChart"></canvas>
+                    <div class="chart-legend" id="loadAvg">-- / -- / --</div>
+                </div>
+                <div class="chart-container" id="chart-fan">
+                    <div class="chart-header">
+                        <span class="chart-label">Fan</span>
+                        <span class="chart-value" id="fanValue">--</span>
+                    </div>
+                    <canvas id="fanChart"></canvas>
+                </div>
+                <div class="chart-container" id="chart-diskio">
+                    <div class="chart-header">
+                        <span class="chart-label">Disk I/O</span>
+                        <span class="net-stats">
+                            <span><span class="text-success">R:</span><span id="diskReadSpeed" class="net-value">--</span></span>
+                            <span><span class="text-error">W:</span><span id="diskWriteSpeed" class="net-value">--</span></span>
+                        </span>
+                    </div>
+                    <canvas id="diskIoChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Bottom Row: Processes + Hardware -->
+            <div class="bottom-info-row">
+                <div class="processes-section">
+                    <div class="processes-header">Top Processes</div>
+                    <div id="topProcesses" class="processes-list">--</div>
+                </div>
+                <div class="hardware-section">
+                    <div class="hardware-header">Hardware Inventory</div>
+                    <div id="hardwareInfo" class="hardware-grid">
+                        <div class="hw-item"><span class="hw-label">Board</span><span class="hw-value" id="hwBoard">--</span></div>
+                        <div class="hw-item"><span class="hw-label">Serial</span><span class="hw-value hw-mono" id="hwSerial">--</span></div>
+                        <div class="hw-item"><span class="hw-label">CPU</span><span class="hw-value" id="hwCpu">--</span></div>
+                        <div class="hw-item"><span class="hw-label">Memory</span><span class="hw-value" id="hwMemory">--</span></div>
+                        <div class="hw-item"><span class="hw-label">Storage</span><span class="hw-value" id="hwStorage">--</span></div>
+                        <div class="hw-item"><span class="hw-label">Kernel</span><span class="hw-value hw-mono" id="hwKernel">--</span></div>
+                        <div class="hw-item"><span class="hw-label">Firmware</span><span class="hw-value" id="hwFirmware">--</span></div>
+                        <div class="hw-item"><span class="hw-label">Network</span><span class="hw-value" id="hwNetwork">--</span></div>
+                        <div class="hw-item"><span class="hw-label">USB Devices</span><span class="hw-value" id="hwUsb">--</span></div>
+                        <div class="hw-item"><span class="hw-label">I2C Buses</span><span class="hw-value" id="hwI2c">--</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- App Info -->
+        <div class="card">
+            <div class="card-header"><span class="card-title">App Info</span></div>
+            <div class="info-row"><span class="info-label">App Name</span><span class="info-value">hello_world</span></div>
+            <div class="info-row"><span class="info-label">Control Loop</span><span class="info-value">50Hz</span></div>
+            <div class="section-divider"></div>
+            <div class="info-row"><span class="info-label">Robot Uptime</span><span class="info-value" id="uptimeRobot">--</span></div>
+            <div class="info-row"><span class="info-label">Daemon Uptime</span><span class="info-value" id="uptimeDaemon">--</span></div>
+            <div class="info-row"><span class="info-label">App Uptime</span><span class="info-value" id="uptimeApp">--</span></div>
+        </div>
+    </div>
+
+    <!-- Telemetry Tab -->
+    <div id="telemetry" class="tab-content">
+        <!-- 3D Simulation -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">3D View</span>
+                <span class="chart-value" id="simStatus" style="font-size: 0.75rem; opacity: 0.6;">Loading...</span>
+            </div>
+            <div id="simContainer" style="width: 100%; height: 400px; border-radius: 0 0 8px 8px; overflow: hidden;"></div>
+        </div>
+
+        <!-- Head Telemetry Charts -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Head Telemetry</span>
+                <label class="switch-label" title="Return to center on release">
+                    <span class="switch-text">Return to center</span>
+                    <input type="checkbox" id="returnToCenter" checked>
+                    <span class="switch-slider"></span>
+                </label>
+            </div>
+            <div class="charts-grid charts-grid-3">
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Roll</span><span class="chart-value" id="rollValue">--</span></div>
+                    <canvas id="rollChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Pitch</span><span class="chart-value" id="pitchValue">--</span></div>
+                    <canvas id="pitchChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Yaw</span><span class="chart-value" id="yawValue">--</span></div>
+                    <canvas id="yawChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">X</span><span class="chart-value" id="posXValue">--</span></div>
+                    <canvas id="posXChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Y</span><span class="chart-value" id="posYValue">--</span></div>
+                    <canvas id="posYChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Z</span><span class="chart-value" id="posZValue">--</span></div>
+                    <canvas id="posZChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Ant R</span><span class="chart-value" id="antennaRightValue">--</span></div>
+                    <canvas id="antennaRightChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Ant L</span><span class="chart-value" id="antennaLeftValue">--</span></div>
+                    <canvas id="antennaLeftChart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-header"><span class="chart-label">Stewart Platform</span></div>
+                    <canvas id="jointsChart"></canvas>
+                    <div class="chart-legend" id="jointsLegend"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Head Pose -->
+        <div class="card">
+            <div class="card-header"><span class="card-title">Head Pose</span><button id="copyHeadPose" class="copy-btn" title="Copy as JSON"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div>
+            <div class="info-grid">
+                <div class="info-row"><span class="info-label">X</span><span class="info-value" id="headPosX">--</span></div>
+                <div class="info-row"><span class="info-label">Roll</span><span class="info-value" id="headRoll">--</span></div>
+                <div class="info-row"><span class="info-label">Y</span><span class="info-value" id="headPosY">--</span></div>
+                <div class="info-row"><span class="info-label">Pitch</span><span class="info-value" id="headPitch">--</span></div>
+                <div class="info-row"><span class="info-label">Z</span><span class="info-value" id="headPosZ">--</span></div>
+                <div class="info-row"><span class="info-label">Yaw</span><span class="info-value" id="headYaw">--</span></div>
+                <div class="info-row"><span class="info-label">Ant L</span><span class="info-value" id="headAntL">--</span></div>
+                <div class="info-row"><span class="info-label">Ant R</span><span class="info-value" id="headAntR">--</span></div>
+                <div class="info-row span-2"><span class="info-label">Body Yaw</span><span class="info-value" id="headBodyYaw">--</span></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Conversation Tab -->
+    <div id="conversation" class="tab-content">
+        <!-- Listener Controls -->
+        <div class="listener-hero">
+            <button id="listenerToggle" class="mic-btn" title="Toggle listener">
+                <svg class="mic-icon" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
+                    <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+                </svg>
+                <div class="mic-rings"></div>
+            </button>
+            <div class="mic-status">
+                <span id="listenerDot" class="status-dot offline"></span>
+                <span id="listenerLabel" class="listener-label">Offline</span>
+                <span id="speakingIndicator" class="speaking-indicator" style="display:none;">Speaking...</span>
+            </div>
+            <div class="listener-selects">
+                <select id="audioInputSelect" title="Microphone source">
+                    <option value="robot">Robot Mic</option>
+                    <option value="browser">Browser Mic</option>
+                </select>
+                <select id="audioOutputSelect" title="Speaker output">
+                    <option value="robot">Robot Speaker</option>
+                    <option value="browser">Browser Speaker</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Provider Settings (collapsible) -->
+        <details id="providerSettings" class="card provider-card">
+            <summary class="provider-summary">AI Provider Settings</summary>
+            <div class="provider-grid">
+                <!-- API Keys -->
+                <div class="provider-section">
+                    <h4 class="provider-section-title">API Keys</h4>
+                    <div id="apiKeysContainer"></div>
+                </div>
+
+                <!-- STT Config -->
+                <div class="provider-section">
+                    <h4 class="provider-section-title">Speech-to-Text</h4>
+                    <div class="provider-row">
+                        <label>Provider</label>
+                        <select id="sttProviderSelect"><option value="">--</option></select>
+                    </div>
+                    <div class="provider-row">
+                        <label>Model</label>
+                        <select id="sttModelSelect"><option value="">--</option></select>
+                    </div>
+                </div>
+
+                <!-- LLM Config -->
+                <div class="provider-section">
+                    <h4 class="provider-section-title">Language Model</h4>
+                    <div class="provider-row">
+                        <label>Provider</label>
+                        <select id="llmProviderSelect"><option value="">--</option></select>
+                    </div>
+                    <div class="provider-row">
+                        <label>Model</label>
+                        <select id="llmModelSelect"><option value="">--</option></select>
+                    </div>
+                    <div class="provider-row">
+                        <label style="min-width:auto;">Web Search</label>
+                        <label class="toggle-switch" style="margin:0 0.4rem;">
+                            <input type="checkbox" id="llmWebSearchFilter">
+                            <span class="toggle-slider"></span>
+                        </label>
+                        <span id="llmWebSearchLabel" class="slider-value" style="text-align:left;">Show all</span>
+                    </div>
+                </div>
+
+                <!-- VLM Config -->
+                <div class="provider-section">
+                    <h4 class="provider-section-title">Vision Model</h4>
+                    <div class="provider-row">
+                        <label>Provider</label>
+                        <select id="vlmProviderSelect"><option value="">--</option></select>
+                    </div>
+                    <div class="provider-row">
+                        <label>Model</label>
+                        <select id="vlmModelSelect"><option value="">--</option></select>
+                    </div>
+                </div>
+
+                <!-- TTS Config -->
+                <div class="provider-section">
+                    <h4 class="provider-section-title">Text-to-Speech</h4>
+                    <div class="provider-row">
+                        <label>Provider</label>
+                        <select id="ttsProviderSelect"><option value="">--</option></select>
+                    </div>
+                    <div class="provider-row">
+                        <label>Model</label>
+                        <select id="ttsModelSelect"><option value="">--</option></select>
+                    </div>
+                    <div class="provider-row">
+                        <label>Voice</label>
+                        <select id="ttsVoiceSelect"><option value="">Default</option></select>
+                    </div>
+                </div>
+
+                <!-- Thresholds -->
+                <div class="provider-section">
+                    <h4 class="provider-section-title">Thresholds</h4>
+                    <div class="provider-row">
+                        <label>Confidence</label>
+                        <input type="range" id="confSlider" min="0" max="100" value="0">
+                        <span id="confSliderValue" class="slider-value">0%</span>
+                    </div>
+                    <div class="provider-row">
+                        <label>Volume</label>
+                        <input type="range" id="volSlider" min="0" max="100" value="0">
+                        <span id="volSliderValue" class="slider-value">0%</span>
+                    </div>
+                    <div class="provider-row">
+                        <label>Mic Gain</label>
+                        <input type="range" id="micGainSlider" min="1" max="20" step="0.5" value="5">
+                        <span id="micGainValue" class="slider-value">5.0x</span>
+                    </div>
+                </div>
+
+                <!-- LLM Behaviour -->
+                <div class="provider-section" style="grid-column: 1 / -1;">
+                    <h4 class="provider-section-title">LLM Behaviour</h4>
+                    <div style="margin-top:0.25rem;">
+                        <label style="display:block;font-size:0.7rem;color:var(--text-secondary);margin-bottom:0.3rem;">
+                            System Prompt <button id="resetPromptBtn" class="api-key-save-btn" title="Reset to default" style="font-size:0.6rem;padding:0.1rem 0.4rem;margin-left:0.5rem;">Reset</button>
+                        </label>
+                        <textarea id="systemPromptEditor" rows="8"
+                            style="width:100%;font-size:0.72rem;font-family:monospace;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.5rem;resize:vertical;"
+                            placeholder="Loading..."></textarea>
+                        <button id="savePromptBtn" class="listener-btn" style="margin-top:0.4rem;font-size:0.7rem;padding:0.3rem 0.8rem;">Save Prompt</button>
+                    </div>
+                </div>
+            </div>
+        </details>
+
+        <!-- Waveform -->
+        <div class="card waveform-card">
+            <canvas id="waveformCanvas" height="48"></canvas>
+        </div>
+
+        <!-- Transcript -->
+        <div class="card transcript-card">
+            <div class="transcript-toolbar">
+                <span class="transcript-title">Transcript</span>
+                <div class="transcript-actions">
+                    <button id="clearTranscriptBtn" class="btn btn-xs" title="Clear transcript">Clear</button>
+                    <button id="exportTranscriptBtn" class="btn btn-xs" title="Export as text">Export</button>
+                    <button id="resetSessionBtn" class="btn btn-xs btn-warning" title="Reset AI conversation history">Reset Session</button>
+                </div>
+            </div>
+            <div id="transcriptContainer" class="transcript-container">
+                <table id="transcriptTable" class="transcript-table">
+                    <thead>
+                        <tr>
+                            <th class="ts-th-time">Time</th>
+                            <th class="ts-th-conf">Conf</th>
+                            <th class="ts-th-vol">Vol</th>
+                            <th class="ts-th-msg">Message</th>
+                        </tr>
+                    </thead>
+                    <tbody id="transcriptBody"></tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Text Input -->
+        <div class="card input-card">
+            <div class="input-bar">
+                <input id="conversationInput" type="text" placeholder="Type a message..." class="conversation-input">
+                <button id="conversationSend" class="btn btn-sm">Send</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Media Tab -->
+    <div id="media" class="tab-content">
+        <!-- Snapshots -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Snapshots</span>
+                <span class="media-count" id="snapshotCount">--</span>
+            </div>
+            <div id="snapshotGallery" class="media-gallery">
+                <div class="media-empty">No snapshots yet. Use the camera panel to capture.</div>
+            </div>
+        </div>
+
+        <!-- Recordings -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Recordings</span>
+                <span class="media-count" id="recordingCount">--</span>
+            </div>
+            <div id="recordingGallery" class="media-gallery">
+                <div class="media-empty">No recordings yet. Use the camera panel to record.</div>
+            </div>
+        </div>
+
+        <!-- Sound Recordings -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Sound Recordings</span>
+                <span class="media-count" id="soundCount">--</span>
+            </div>
+            <div id="soundGallery" class="media-gallery">
+                <div class="media-empty">No sound recordings yet. Use the mic button to record.</div>
+            </div>
+        </div>
+
+        <!-- Music -->
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Music</span>
+                <span class="media-count" id="musicCount">--</span>
+                <label class="upload-btn" title="Upload music">
+                    + Upload <input type="file" id="musicUploadInput" accept=".mp3,.wav,.ogg,.flac,.m4a,.aac" hidden>
+                </label>
+            </div>
+            <div class="music-now-playing" id="musicNowPlaying" style="display:none;">
+                <span id="musicNowPlayingText"></span>
+                <button id="musicStopBtn" class="btn btn-xs">Stop</button>
+            </div>
+            <div id="musicGallery" class="media-gallery">
+                <div class="media-empty">No music files. Upload mp3, wav, ogg, flac, m4a, or aac.</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Floating Joysticks Panel (at body level, visible on all tabs) -->
+    <div id="floatingJoysticks" class="floating-panel" style="display: none; position: fixed; top: 150px; right: 20px; z-index: 9999;">
+        <div class="floating-panel-header">
+            <span>Joystick</span>
+            <div class="floating-panel-controls">
+                <button class="floating-minimize-btn" data-panel="floatingJoysticks" title="Minimize">_</button>
+                <button class="floating-close-btn" data-panel="joysticks" title="Close">&times;</button>
+            </div>
+        </div>
+        <div class="floating-panel-content" style="padding: 12px; background: rgba(30,30,30,0.7); backdrop-filter: blur(8px);">
+        <!-- Joysticks -->
+        <div style="display: flex; flex-direction: column; gap: 8px; align-items: center;">
+            <div style="display: flex; gap: 8px; align-items: flex-end;">
+                <!-- Left Antenna -->
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div id="antennaJoystickL-cam" style="width: 50px; height: 50px; cursor: pointer;">
+                        <div id="antennaBaseL-cam" style="width: 100%; height: 100%; background: rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; position: relative;">
+                            <div id="antennaKnobL-cam" style="width: 20px; height: 20px; background: rgba(255,255,255,0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.4); cursor: grab;"></div>
+                        </div>
+                    </div>
+                    <div style="color: rgba(255,255,255,0.7); font-size: 16px; margin-top: 4px; font-weight: 500;">L</div>
+                </div>
+                <!-- XY Joystick -->
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div id="xyJoystickContainer" style="width: 50px; height: 50px; cursor: pointer;">
+                        <div id="xyJoystickBase" style="width: 100%; height: 100%; background: rgba(0,0,0,0.5); border: 2px solid rgba(6,182,212,0.5); border-radius: 50%; position: relative;">
+                            <div id="xyJoystickKnob" style="width: 20px; height: 20px; background: rgba(6,182,212,0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.4); cursor: grab;"></div>
+                        </div>
+                    </div>
+                    <div style="color: rgba(6,182,212,0.9); font-size: 16px; margin-top: 4px; font-weight: 500;">XY</div>
+                </div>
+                <!-- Right Antenna -->
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div id="antennaJoystickR-cam" style="width: 50px; height: 50px; cursor: pointer;">
+                        <div id="antennaBaseR-cam" style="width: 100%; height: 100%; background: rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; position: relative;">
+                            <div id="antennaKnobR-cam" style="width: 20px; height: 20px; background: rgba(255,255,255,0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.4); cursor: grab;"></div>
+                        </div>
+                    </div>
+                    <div style="color: rgba(255,255,255,0.7); font-size: 16px; margin-top: 4px; font-weight: 500;">R</div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 8px; align-items: flex-end;">
+                <!-- Look Joystick -->
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div id="headJoystickContainer" style="width: 50px; height: 50px; cursor: pointer;">
+                        <div id="headJoystickBase" style="width: 100%; height: 100%; background: rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; position: relative;">
+                            <div id="headJoystickKnob" style="width: 20px; height: 20px; background: rgba(255,255,255,0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.4); cursor: grab;"></div>
+                        </div>
+                    </div>
+                    <div style="color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 4px; font-weight: 500;">LOOK</div>
+                </div>
+                <!-- Z/Roll -->
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div id="zRollJoystickContainer" style="width: 50px; height: 50px; cursor: pointer;">
+                        <div id="zRollJoystickBase" style="width: 100%; height: 100%; background: rgba(0,0,0,0.5); border: 2px solid rgba(168,85,247,0.5); border-radius: 50%; position: relative;">
+                            <div id="zRollJoystickKnob" style="width: 20px; height: 20px; background: rgba(168,85,247,0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.4); cursor: grab;"></div>
+                            <div style="position: absolute; top: 2px; left: 50%; transform: translateX(-50%); color: rgba(168,85,247,0.6); font-size: 10px;">Z+</div>
+                            <div style="position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); color: rgba(168,85,247,0.6); font-size: 10px;">Z-</div>
+                        </div>
+                    </div>
+                    <div style="color: rgba(168,85,247,0.9); font-size: 14px; margin-top: 4px; font-weight: 500;">Z/ROLL</div>
+                </div>
+                <!-- Reset -->
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <button id="resetControlsBtn" style="width: 50px; height: 50px; font-size: 20px; background: rgba(0,0,0,0.5); border: 2px solid rgba(239,68,68,0.5); color: rgba(239,68,68,0.8); border-radius: 50%; cursor: pointer;" title="Reset all positions">&#x21BA;</button>
+                    <div style="color: rgba(239,68,68,0.9); font-size: 14px; margin-top: 4px; font-weight: 500;">RESET</div>
+                </div>
+            </div>
+            <!-- Body Rotation Slider -->
+            <div style="display: flex; align-items: center; gap: 8px; margin-top: 8px; width: 100%;">
+                <span style="color: rgba(34,197,94,0.7); font-size: 12px; font-weight: 500;">BODY</span>
+                <div id="bodySliderContainer" style="flex: 1; height: 20px; position: relative; cursor: pointer;">
+                    <div id="bodySliderTrack" style="position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: rgba(34,197,94,0.3); border-radius: 2px; transform: translateY(-50%);"></div>
+                    <div id="bodySliderKnob" style="position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; background: rgba(34,197,94,0.9); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(34,197,94,0.6); cursor: grab;"></div>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+
+    <!-- Floating Camera Panel -->
+    <div id="floatingCamera" class="floating-panel" style="display: none; position: fixed; top: 80px; right: 20px; z-index: 9998;">
+        <div class="floating-panel-header">
+            <span>Camera</span>
+            <div class="floating-panel-controls">
+                <span id="camStatusDot" class="cam-status-dot"></span>
+                <button class="floating-minimize-btn" data-panel="floatingCamera" title="Minimize">_</button>
+                <button class="floating-close-btn" data-panel="camera" title="Close">&times;</button>
+            </div>
+        </div>
+        <div class="floating-panel-content" style="padding: 0;">
+            <div id="cameraContainer" class="camera-container">
+                <video id="videoFeed" autoplay playsinline muted></video>
+                <div id="videoPlaceholder" class="video-placeholder">
+                    <div class="placeholder-icon">&#x1F4F9;</div>
+                    <div class="placeholder-text">Camera Feed</div>
+                    <div class="placeholder-subtext">Connecting...</div>
+                </div>
+            </div>
+            <div class="camera-controls">
+                <button id="snapshotBtn" class="cam-btn" title="Take snapshot">&#x1F4F8;</button>
+                <button id="recordBtn" class="cam-btn" title="Record video">&#x23FA;</button>
+                <button id="micRecordBtn" class="cam-btn" title="Record mic">&#x1F3A4;</button>
+                <button id="listenBtn" class="cam-btn" title="Listen to robot mic">&#x1F50A;</button>
+                <button id="speakBtn" class="cam-btn" title="Speak through robot">&#x1F399;</button>
+                <span id="recordTimer" class="record-timer" style="display: none;">00:00</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toastContainer" class="toast-container"></div>
+
+    <!-- Scripts: load order matters -->
+    <script src="/static/js/core/constants.js"></script>
+    <script src="/static/js/core/settings-manager.js"></script>
+    <script src="/static/js/core/api-client.js"></script>
+    <script src="/static/js/core/drag-utils.js?v=1"></script>
+    <script src="/static/js/core/tabs.js"></script>
+    <script src="/static/js/features/status-manager.js"></script>
+    <script src="/static/js/controls/Joystick.js?v=1"></script>
+    <script src="/static/js/media/webrtc.js?v=1"></script>
+    <script src="/static/js/controls.js"></script>
+    <script src="/static/js/websocket.js?v=6"></script>
+    <script src="/static/js/simulation.js?v=3"></script>
+    <script src="/static/js/features/FloatingPanel.js?v=1"></script>
+    <script src="/static/js/features/transcribe.js?v=2"></script>
+    <script src="/static/js/features/assistant.js?v=2"></script>
+    <script src="/static/js/features/llm-settings.js?v=2"></script>
+    <script src="/static/js/core/init.js?v=6"></script>
+</body>
+</html>

hello_world/static/js/controls.js

@@ -0,0 +1,1089 @@
+// controls.js - Head, body, and antenna controls
+
+(function() {
+    const { DAEMON_API } = window.ReachyApp;
+
+    // ===== Control Limits (from constants.js) =====
+    const {
+        HEAD_YAW_MAX,
+        HEAD_PITCH_MAX,
+        HEAD_Z_MAX,
+        HEAD_X_MAX,
+        HEAD_Y_MAX,
+        HEAD_ROLL_LEFT_MAX,
+        HEAD_ROLL_RIGHT_MAX,
+        HEAD_ROLL_OFFSET,
+        BODY_YAW_MAX,
+        ANTENNA_MAX,
+        ANTENNA_THROTTLE
+    } = window.ReachyConstants;
+
+    // ===== Joystick Return-to-Center Settings =====
+    // Default: stay where positioned (no auto-return)
+    const returnSettings = {
+        yawPitch: 'stay',  // 'stay' or 'center'
+        zRoll: 'stay',
+        xy: 'stay',
+        body: 'stay'
+    };
+
+    // Load settings on init
+    function loadReturnSettings() {
+        const settings = window.ReachySettings?.getAll?.() || {};
+        returnSettings.yawPitch = settings.joy_return_yawPitch || 'stay';
+        returnSettings.zRoll = settings.joy_return_zRoll || 'stay';
+        returnSettings.xy = settings.joy_return_xy || 'stay';
+        returnSettings.body = settings.joy_return_body || 'stay';
+    }
+
+    // ===== Control State =====
+    let controlsEnabled = true;
+    let smoothingLoopRunning = false;
+    let lastHeadCommandTime = 0;
+    let lastBodyCommandTime = 0;
+    let lastAntennaCommandTime = 0;
+    const HEAD_COMMAND_THROTTLE = 30;
+
+    // Target values
+    let targetHeadYaw = 0, targetHeadPitch = 0, targetHeadZ = 0, targetHeadRoll = 0;
+    let targetHeadX = 0, targetHeadY = 0;
+    let targetBodyYaw = 0;
+    let targetAntennaL = 0, targetAntennaR = 0;
+
+    // Current (smoothed) values
+    let currentHeadYaw = 0, currentHeadPitch = 0, currentHeadZ = 0, currentHeadRoll = 0;
+    let currentHeadX = 0, currentHeadY = 0;
+    let currentBodyYaw = 0;
+    let currentAntennaL = 0, currentAntennaR = 0;
+
+    // State tracking
+    let anyControlActive = false;
+    let antennaControlActive = false;
+    let bodyLockMode = false;
+    let antennasLinked = false;
+
+    // Updater functions and knob references
+    let bodyArcKnobUpdater = null;
+    let rollArcKnobUpdater = null;
+    const antennaKnobUpdaters = {};
+
+    // Knob reset functions (set during joystick setup)
+    const knobResetters = {
+        headYawPitch: null,    // Yaw/Pitch joystick reset
+        zRoll: null,           // Z/Roll joystick reset
+        xy: null,              // X/Y joystick reset
+        body: null             // Body arc reset
+    };
+
+    // Helper to set control active state and update PiP visibility for Joy mode
+    function setControlActive(active) {
+        if (!controlsEnabled) return;
+        anyControlActive = active;
+        window.ReachyPip?.setJoystickActive(active);
+
+    }
+
+    // Enable/disable controls (called from control mode buttons)
+    function setEnabled(enabled) {
+        controlsEnabled = enabled;
+        // Update joystick opacity to show enabled/disabled state
+        const containers = document.querySelectorAll('#xyJoystickContainer, #headJoystickContainer, #zRollJoystickContainer, #antennaJoystickL-cam, #antennaJoystickR-cam');
+        containers.forEach(c => {
+            if (c) c.style.opacity = enabled ? '1' : '0.4';
+        });
+    }
+
+    // ===== Command Functions =====
+    function sendHeadControlCommand(yaw, pitch, z, roll, x, y) {
+        const now = Date.now();
+        if (now - lastHeadCommandTime < HEAD_COMMAND_THROTTLE) return;
+        lastHeadCommandTime = now;
+
+        fetch(`${DAEMON_API}/api/move/set_target`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                target_head_pose: {
+                    x: x || 0, y: y || 0, z: z || 0,
+                    roll: (roll || 0) + HEAD_ROLL_OFFSET,
+                    pitch: pitch,
+                    yaw: yaw
+                }
+            })
+        }).catch(() => {});
+    }
+
+    function sendBodyControlCommand(yaw) {
+        const now = Date.now();
+        if (now - lastBodyCommandTime < HEAD_COMMAND_THROTTLE) return;
+        lastBodyCommandTime = now;
+
+        fetch(`${DAEMON_API}/api/move/set_target`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ target_body_yaw: yaw })
+        }).catch(() => {});
+    }
+
+    function sendAntennaCommand() {
+        const now = Date.now();
+        if (now - lastAntennaCommandTime < ANTENNA_THROTTLE) return;
+        lastAntennaCommandTime = now;
+
+        fetch(`${DAEMON_API}/api/move/set_target`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                target_antennas: [
+                    -currentAntennaR * Math.PI / 180,
+                    -currentAntennaL * Math.PI / 180
+                ]
+            })
+        }).catch(() => {});
+    }
+
+    // ===== Smoothing Loop =====
+    function startSmoothingLoop() {
+        if (smoothingLoopRunning) return;
+        smoothingLoopRunning = true;
+
+        function animate() {
+            if (!anyControlActive) {
+                smoothingLoopRunning = false;
+                return;
+            }
+
+            const prevHeadX = currentHeadX;
+            const prevHeadY = currentHeadY;
+            const prevHeadYaw = currentHeadYaw;
+            const prevHeadPitch = currentHeadPitch;
+            const prevHeadZ = currentHeadZ;
+            const prevHeadRoll = currentHeadRoll;
+            const prevBodyYaw = currentBodyYaw;
+
+            currentHeadX = targetHeadX;
+            currentHeadY = targetHeadY;
+            currentHeadYaw = targetHeadYaw;
+            currentHeadPitch = targetHeadPitch;
+            currentHeadZ = targetHeadZ;
+            currentHeadRoll = targetHeadRoll;
+            currentBodyYaw = targetBodyYaw;
+
+            const headChanged = Math.abs(currentHeadX - prevHeadX) > 0.0001 ||
+                               Math.abs(currentHeadY - prevHeadY) > 0.0001 ||
+                               Math.abs(currentHeadYaw - prevHeadYaw) > 0.001 ||
+                               Math.abs(currentHeadPitch - prevHeadPitch) > 0.001 ||
+                               Math.abs(currentHeadZ - prevHeadZ) > 0.0001 ||
+                               Math.abs(currentHeadRoll - prevHeadRoll) > 0.001;
+            const bodyChanged = Math.abs(currentBodyYaw - prevBodyYaw) > 0.001;
+
+            if (headChanged) sendHeadControlCommand(currentHeadYaw, currentHeadPitch, currentHeadZ, currentHeadRoll, currentHeadX, currentHeadY);
+            if (bodyChanged) sendBodyControlCommand(currentBodyYaw);
+
+            requestAnimationFrame(animate);
+        }
+        animate();
+    }
+
+    // Called when control is released - apply return-to-center per axis based on settings
+    async function smoothFinish(controlType = 'all') {
+        // returnSettings is updated directly by button click handlers
+        // Apply return-to-center based on which control was released
+        let resetYawPitch = false, resetZRoll = false, resetXY = false, resetBody = false;
+
+        if (controlType === 'yawPitch' || controlType === 'all') {
+            if (returnSettings.yawPitch === 'center') {
+                targetHeadYaw = 0;
+                targetHeadPitch = 0;
+                resetYawPitch = true;
+            }
+        }
+        if (controlType === 'zRoll' || controlType === 'all') {
+            if (returnSettings.zRoll === 'center') {
+                targetHeadZ = 0;
+                targetHeadRoll = 0;
+                resetZRoll = true;
+            }
+        }
+        if (controlType === 'xy' || controlType === 'all') {
+            if (returnSettings.xy === 'center') {
+                targetHeadX = 0;
+                targetHeadY = 0;
+                resetXY = true;
+            }
+        }
+        if (controlType === 'body' || controlType === 'all') {
+            if (returnSettings.body === 'center') {
+                targetBodyYaw = 0;
+                resetBody = true;
+            }
+        }
+
+        // Update current values
+        currentHeadX = targetHeadX;
+        currentHeadY = targetHeadY;
+        currentHeadYaw = targetHeadYaw;
+        currentHeadPitch = targetHeadPitch;
+        currentHeadZ = targetHeadZ;
+        currentHeadRoll = targetHeadRoll;
+        currentBodyYaw = targetBodyYaw;
+
+        // Reset knob positions to match target values
+        if (resetYawPitch && knobResetters.headYawPitch) knobResetters.headYawPitch();
+        if (resetZRoll && knobResetters.zRoll) knobResetters.zRoll();
+        if (resetXY && knobResetters.xy) knobResetters.xy();
+        if (resetBody && knobResetters.body) knobResetters.body();
+
+        try {
+            await fetch(`${DAEMON_API}/api/move/goto`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    head_pose: {
+                        x: currentHeadX, y: currentHeadY, z: currentHeadZ,
+                        roll: currentHeadRoll + HEAD_ROLL_OFFSET,
+                        pitch: currentHeadPitch,
+                        yaw: currentHeadYaw
+                    },
+                    body_yaw: currentBodyYaw,
+                    duration: 0.3,
+                    interpolation: 'minjerk'
+                })
+            });
+        } catch (e) {}
+    }
+
+    // ===== Antenna Smoothing Loop =====
+    function updateAntennaSmoothingLoop() {
+        if (!antennaControlActive) return;
+
+        const prevL = currentAntennaL;
+        const prevR = currentAntennaR;
+
+        currentAntennaL = targetAntennaL;
+        currentAntennaR = targetAntennaR;
+
+        if (Math.abs(currentAntennaL - prevL) > 0.1 || Math.abs(currentAntennaR - prevR) > 0.1) {
+            sendAntennaCommand();
+        }
+    }
+
+    setInterval(updateAntennaSmoothingLoop, 50);
+
+    // ===== Head Joystick (Yaw/Pitch) =====
+    function setupHeadJoystick(containerId, baseId, knobId) {
+        const container = document.getElementById(containerId);
+        const base = document.getElementById(baseId);
+        const knob = document.getElementById(knobId);
+        if (!container || !base || !knob) return;
+
+        let isActive = false;
+
+        // Reset knob to center
+        function resetKnob() {
+            knob.style.left = '50%';
+            knob.style.top = '50%';
+        }
+
+        // Store reset function (only for first joystick - the camera tab one)
+        if (!knobResetters.headYawPitch) {
+            knobResetters.headYawPitch = resetKnob;
+        }
+
+        function updateKnobPosition(clientX, clientY) {
+            const rect = base.getBoundingClientRect();
+            const maxDistance = rect.width / 2 - 10;
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+
+            let dx = clientX - centerX;
+            let dy = clientY - centerY;
+
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance > maxDistance) {
+                dx = (dx / distance) * maxDistance;
+                dy = (dy / distance) * maxDistance;
+            }
+
+            knob.style.left = `calc(50% + ${dx}px)`;
+            knob.style.top = `calc(50% + ${dy}px)`;
+
+            const normalizedX = dx / maxDistance;
+            const normalizedY = dy / maxDistance;
+
+            targetHeadYaw = -normalizedX * HEAD_YAW_MAX;
+            targetHeadPitch = normalizedY * HEAD_PITCH_MAX;
+
+            if (bodyLockMode) {
+                targetBodyYaw = -normalizedX * BODY_YAW_MAX;
+                if (bodyArcKnobUpdater) bodyArcKnobUpdater(targetBodyYaw);
+            }
+        }
+
+        knob.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            knob.style.cursor = 'grabbing';
+            container.parentElement.style.opacity = '1';
+            startSmoothingLoop();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isActive) updateKnobPosition(e.clientX, e.clientY);
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                knob.style.cursor = 'grab';
+                container.parentElement.style.opacity = '0.7';
+                smoothFinish('yawPitch');
+            }
+        });
+
+        knob.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            startSmoothingLoop();
+        });
+
+        document.addEventListener('touchmove', (e) => {
+            if (isActive && e.touches.length > 0) {
+                updateKnobPosition(e.touches[0].clientX, e.touches[0].clientY);
+            }
+        });
+
+        document.addEventListener('touchend', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                smoothFinish('yawPitch');
+            }
+        });
+    }
+
+    // ===== Body Slider Control =====
+    function setupBodySlider(containerId, knobId) {
+        const container = document.getElementById(containerId);
+        const knob = document.getElementById(knobId);
+        if (!container || !knob) return null;
+
+        let isActive = false;
+
+        function updateKnobPosition(normalizedValue) {
+            // normalizedValue: -1 (left) to 1 (right)
+            const percent = (normalizedValue + 1) / 2 * 100;
+            knob.style.left = `${percent}%`;
+        }
+
+        function setKnobFromValue(value) {
+            const normalized = Math.max(-1, Math.min(1, value / BODY_YAW_MAX));
+            updateKnobPosition(normalized);
+        }
+
+        // Reset knob to center
+        function resetKnob() {
+            updateKnobPosition(0);
+        }
+
+        // Store reset function
+        if (!knobResetters.body) {
+            knobResetters.body = resetKnob;
+        }
+
+        function updateFromPosition(clientX) {
+            const rect = container.getBoundingClientRect();
+            let normalized = (clientX - rect.left) / rect.width;
+            normalized = Math.max(0, Math.min(1, normalized));
+            // Convert 0-1 to -1 to 1
+            normalized = normalized * 2 - 1;
+
+            updateKnobPosition(normalized);
+            targetBodyYaw = normalized * BODY_YAW_MAX;
+        }
+
+        container.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            isActive = true;
+            setControlActive(true);
+            knob.style.cursor = 'grabbing';
+            updateFromPosition(e.clientX);
+            startSmoothingLoop();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isActive) {
+                e.stopPropagation();
+                updateFromPosition(e.clientX);
+            }
+        });
+
+        document.addEventListener('mouseup', (e) => {
+            if (isActive) {
+                e.stopPropagation();
+                isActive = false;
+                setControlActive(false);
+                knob.style.cursor = 'grab';
+                smoothFinish('body');
+            }
+        });
+
+        container.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            isActive = true;
+            setControlActive(true);
+            updateFromPosition(e.touches[0].clientX);
+            startSmoothingLoop();
+        }, { passive: false });
+
+        container.addEventListener('touchmove', (e) => {
+            if (isActive) {
+                updateFromPosition(e.touches[0].clientX);
+                e.preventDefault();
+            }
+        }, { passive: false });
+
+        container.addEventListener('touchend', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                smoothFinish('body');
+            }
+        });
+
+        return setKnobFromValue;
+    }
+
+    // ===== Roll Arc Control =====
+    function setupRollArc(containerId, knobId) {
+        const container = document.getElementById(containerId);
+        const knob = document.getElementById(knobId);
+        if (!container || !knob) return null;
+
+        let isActive = false;
+        const arcCenterX = 35;
+        const arcCenterY = 33;
+        const arcRadius = 30;
+
+        function updateKnobFromAngle(angle) {
+            const clampedAngle = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+            const x = arcCenterX + Math.sin(clampedAngle) * arcRadius;
+            const y = arcCenterY - Math.cos(clampedAngle) * arcRadius;
+            knob.style.left = `${x}px`;
+            knob.style.top = `${y}px`;
+        }
+
+        function setKnobFromValue(value) {
+            let normalizedAngle;
+            if (value <= 0) {
+                normalizedAngle = value / HEAD_ROLL_LEFT_MAX;
+            } else {
+                normalizedAngle = value / HEAD_ROLL_RIGHT_MAX;
+            }
+            normalizedAngle = Math.max(-1, Math.min(1, normalizedAngle));
+            const angle = normalizedAngle * (Math.PI / 2);
+            updateKnobFromAngle(angle);
+        }
+
+        function updateFromPosition(clientX, clientY) {
+            const rect = container.getBoundingClientRect();
+            const dx = clientX - rect.left - arcCenterX;
+            const dy = clientY - rect.top - arcCenterY;
+
+            let angle = Math.atan2(dx, -dy);
+            angle = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+
+            updateKnobFromAngle(angle);
+
+            const normalizedAngle = angle / (Math.PI / 2);
+            if (normalizedAngle <= 0) {
+                targetHeadRoll = normalizedAngle * HEAD_ROLL_LEFT_MAX;
+            } else {
+                targetHeadRoll = normalizedAngle * HEAD_ROLL_RIGHT_MAX;
+            }
+        }
+
+        container.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            knob.style.cursor = 'grabbing';
+            container.parentElement.style.opacity = '1';
+            updateFromPosition(e.clientX, e.clientY);
+            startSmoothingLoop();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isActive) updateFromPosition(e.clientX, e.clientY);
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                knob.style.cursor = 'grab';
+                container.parentElement.style.opacity = '0.7';
+                smoothFinish();
+            }
+        });
+
+        container.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            updateFromPosition(e.touches[0].clientX, e.touches[0].clientY);
+            startSmoothingLoop();
+        }, { passive: false });
+
+        container.addEventListener('touchmove', (e) => {
+            if (isActive) {
+                updateFromPosition(e.touches[0].clientX, e.touches[0].clientY);
+                e.preventDefault();
+            }
+        }, { passive: false });
+
+        container.addEventListener('touchend', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                smoothFinish();
+            }
+        });
+
+        return setKnobFromValue;
+    }
+
+    // ===== Z/Roll Joystick =====
+    function setupZRollJoystick(containerId, baseId, knobId) {
+        const container = document.getElementById(containerId);
+        const base = document.getElementById(baseId);
+        const knob = document.getElementById(knobId);
+        if (!container || !base || !knob) return;
+
+        let isActive = false;
+
+        // Reset knob to center
+        function resetKnob() {
+            knob.style.left = '50%';
+            knob.style.top = '50%';
+        }
+
+        // Store reset function (only for first joystick)
+        if (!knobResetters.zRoll) {
+            knobResetters.zRoll = resetKnob;
+        }
+
+        function updateKnobPosition(clientX, clientY) {
+            const rect = base.getBoundingClientRect();
+            const maxDistance = rect.width / 2 - 8;
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+
+            let dx = clientX - centerX;
+            let dy = clientY - centerY;
+
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance > maxDistance) {
+                dx = (dx / distance) * maxDistance;
+                dy = (dy / distance) * maxDistance;
+            }
+
+            knob.style.left = `calc(50% + ${dx}px)`;
+            knob.style.top = `calc(50% + ${dy}px)`;
+
+            const normalizedX = dx / maxDistance;
+            const normalizedY = dy / maxDistance;
+
+            targetHeadZ = -normalizedY * HEAD_Z_MAX;
+
+            if (normalizedX <= 0) {
+                targetHeadRoll = normalizedX * HEAD_ROLL_LEFT_MAX;
+            } else {
+                targetHeadRoll = normalizedX * HEAD_ROLL_RIGHT_MAX;
+            }
+        }
+
+        knob.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            knob.style.cursor = 'grabbing';
+            container.parentElement.style.opacity = '1';
+            startSmoothingLoop();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isActive) updateKnobPosition(e.clientX, e.clientY);
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                knob.style.cursor = 'grab';
+                container.parentElement.style.opacity = '0.7';
+                smoothFinish('zRoll');
+            }
+        });
+
+        knob.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            startSmoothingLoop();
+        }, { passive: false });
+
+        document.addEventListener('touchmove', (e) => {
+            if (isActive && e.touches.length > 0) {
+                updateKnobPosition(e.touches[0].clientX, e.touches[0].clientY);
+            }
+        });
+
+        document.addEventListener('touchend', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                smoothFinish('zRoll');
+            }
+        });
+    }
+
+    // ===== XY Joystick (Head Translation) =====
+    function setupXYJoystick(containerId, baseId, knobId) {
+        const container = document.getElementById(containerId);
+        const base = document.getElementById(baseId);
+        const knob = document.getElementById(knobId);
+        if (!container || !base || !knob) return;
+
+        let isActive = false;
+
+        // Reset knob to center
+        function resetKnob() {
+            knob.style.left = '50%';
+            knob.style.top = '50%';
+        }
+
+        // Store reset function (only for first joystick)
+        if (!knobResetters.xy) {
+            knobResetters.xy = resetKnob;
+        }
+
+        function updateKnobPosition(clientX, clientY) {
+            const rect = base.getBoundingClientRect();
+            const maxDistance = rect.width / 2 - 8;
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+
+            let dx = clientX - centerX;
+            let dy = clientY - centerY;
+
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance > maxDistance) {
+                dx = (dx / distance) * maxDistance;
+                dy = (dy / distance) * maxDistance;
+            }
+
+            knob.style.left = `calc(50% + ${dx}px)`;
+            knob.style.top = `calc(50% + ${dy}px)`;
+
+            const normalizedX = dx / maxDistance;
+            const normalizedY = dy / maxDistance;
+
+            targetHeadX = -normalizedY * HEAD_X_MAX;
+            targetHeadY = -normalizedX * HEAD_Y_MAX;
+        }
+
+        knob.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            knob.style.cursor = 'grabbing';
+            container.parentElement.style.opacity = '1';
+            startSmoothingLoop();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isActive) updateKnobPosition(e.clientX, e.clientY);
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                knob.style.cursor = 'grab';
+                container.parentElement.style.opacity = '0.7';
+                smoothFinish('xy');
+            }
+        });
+
+        knob.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isActive = true;
+            setControlActive(true);
+            startSmoothingLoop();
+        }, { passive: false });
+
+        document.addEventListener('touchmove', (e) => {
+            if (isActive && e.touches.length > 0) {
+                updateKnobPosition(e.touches[0].clientX, e.touches[0].clientY);
+            }
+        });
+
+        document.addEventListener('touchend', () => {
+            if (isActive) {
+                isActive = false;
+                setControlActive(false);
+                smoothFinish('xy');
+            }
+        });
+    }
+
+    // ===== Antenna Joystick =====
+    function setAntennaTarget(side, angleDeg) {
+        antennaControlActive = true;
+        angleDeg = Math.max(-ANTENNA_MAX, Math.min(ANTENNA_MAX, angleDeg));
+        if (side === 'L') targetAntennaL = angleDeg;
+        else targetAntennaR = angleDeg;
+    }
+
+    function setupAntennaJoystick(containerId, baseId, knobId, side) {
+        const container = document.getElementById(containerId);
+        const base = document.getElementById(baseId);
+        const knob = document.getElementById(knobId);
+        if (!container || !base || !knob) return null;
+
+        let isDragging = false;
+
+        function updateKnob(clientX, clientY) {
+            const rect = base.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            const radius = rect.width / 2 - 4;
+
+            const dx = clientX - centerX;
+            const dy = clientY - centerY;
+            let angleRad = Math.atan2(dx, -dy);
+
+            const knobX = Math.sin(angleRad) * radius;
+            const knobY = -Math.cos(angleRad) * radius;
+            knob.style.left = `calc(50% + ${knobX}px)`;
+            knob.style.top = `calc(50% + ${knobY}px)`;
+
+            let angleDeg = angleRad * 180 / Math.PI;
+            setAntennaTarget(side, angleDeg);
+
+            if (antennasLinked) {
+                const otherSide = side === 'L' ? 'R' : 'L';
+                setAntennaTarget(otherSide, angleDeg);
+                const otherKey = otherSide + '-cam';
+                if (antennaKnobUpdaters[otherKey]) {
+                    antennaKnobUpdaters[otherKey](angleDeg);
+                }
+            }
+        }
+
+        function setKnobFromAngle(angleDeg) {
+            const rect = base.getBoundingClientRect();
+            if (rect.width === 0) return;
+            const radius = rect.width / 2 - 4;
+            const angleRad = angleDeg * Math.PI / 180;
+            const knobX = Math.sin(angleRad) * radius;
+            const knobY = -Math.cos(angleRad) * radius;
+            knob.style.left = `calc(50% + ${knobX}px)`;
+            knob.style.top = `calc(50% + ${knobY}px)`;
+        }
+
+        container.addEventListener('dblclick', (e) => {
+            antennasLinked = !antennasLinked;
+            ['antennaKnobL-cam', 'antennaKnobR-cam'].forEach(id => {
+                const k = document.getElementById(id);
+                if (k) {
+                    k.style.background = antennasLinked ? 'linear-gradient(145deg, #ff6b6b, #ee5a5a)' : 'rgba(255,255,255,0.8)';
+                    k.style.boxShadow = antennasLinked ? '0 0 8px rgba(255, 107, 107, 0.6)' : '0 2px 4px rgba(0,0,0,0.4)';
+                }
+            });
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+        let resetTimer = null;
+
+        function resetKnobVisual() {
+            knob.style.left = '50%';
+            knob.style.top = '50%';
+            knob.style.transform = 'translate(-50%, -50%)';
+        }
+
+        function scheduleVisualReset() {
+            if (resetTimer) clearTimeout(resetTimer);
+            resetTimer = setTimeout(resetKnobVisual, 2000);
+        }
+
+        container.addEventListener('mousedown', (e) => {
+            if (resetTimer) clearTimeout(resetTimer);
+            isDragging = true;
+            updateKnob(e.clientX, e.clientY);
+            e.preventDefault();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isDragging) updateKnob(e.clientX, e.clientY);
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isDragging) {
+                isDragging = false;
+                scheduleVisualReset();
+            }
+        });
+
+        container.addEventListener('touchstart', (e) => {
+            if (resetTimer) clearTimeout(resetTimer);
+            isDragging = true;
+            updateKnob(e.touches[0].clientX, e.touches[0].clientY);
+            e.preventDefault();
+        }, { passive: false });
+
+        container.addEventListener('touchmove', (e) => {
+            if (isDragging) {
+                updateKnob(e.touches[0].clientX, e.touches[0].clientY);
+                e.preventDefault();
+            }
+        }, { passive: false });
+
+        container.addEventListener('touchend', () => {
+            if (isDragging) {
+                isDragging = false;
+                scheduleVisualReset();
+            }
+        });
+
+        return setKnobFromAngle;
+    }
+
+    // ===== Reset All Positions =====
+    async function resetAllPositions() {
+        targetAntennaL = 0; targetAntennaR = 0;
+        currentAntennaL = 0; currentAntennaR = 0;
+        antennasLinked = false;
+        // Reset antenna knob styling (both tabs)
+        ['antennaKnobL-cam', 'antennaKnobR-cam', 'antennaKnobL-sim', 'antennaKnobR-sim'].forEach(id => {
+            const k = document.getElementById(id);
+            if (k) {
+                k.style.background = 'rgba(255,255,255,0.8)';
+                k.style.boxShadow = '0 2px 4px rgba(0,0,0,0.4)';
+            }
+        });
+        targetHeadX = 0; targetHeadY = 0;
+        currentHeadX = 0; currentHeadY = 0;
+        targetHeadYaw = 0; targetHeadPitch = 0; targetHeadZ = 0; targetHeadRoll = 0; targetBodyYaw = 0;
+        currentHeadYaw = 0; currentHeadPitch = 0; currentHeadZ = 0; currentHeadRoll = 0; currentBodyYaw = 0;
+
+        const resetPayload = JSON.stringify({
+            target_head_pose: { x: 0, y: 0, z: 0, roll: 0, pitch: 0, yaw: 0 },
+            target_body_yaw: 0,
+            target_antennas: [0, 0]
+        });
+
+        for (let i = 0; i < 20; i++) {
+            setTimeout(() => {
+                fetch(`${DAEMON_API}/api/move/set_target`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: resetPayload
+                }).catch(() => {});
+            }, i * 25);
+        }
+
+        // Reset all antenna knob positions (both tabs) - center them in their containers
+        ['antennaKnobL-cam', 'antennaKnobR-cam', 'antennaKnobL-sim', 'antennaKnobR-sim'].forEach(id => {
+            const k = document.getElementById(id);
+            if (k) {
+                k.style.left = '50%';
+                k.style.top = '50%';
+                k.style.transform = 'translate(-50%, -50%)';
+            }
+        });
+    }
+
+    // ===== Initialize Controls =====
+    function initControls() {
+        // Load joystick return-to-center settings
+        loadReturnSettings();
+
+        // Remote tab controls
+        setupHeadJoystick('headJoystickContainer', 'headJoystickBase', 'headJoystickKnob');
+        bodyArcKnobUpdater = setupBodySlider('bodySliderContainer', 'bodySliderKnob');
+        rollArcKnobUpdater = setupRollArc('rollArcContainer', 'rollArcKnob');
+        setupZRollJoystick('zRollJoystickContainer', 'zRollJoystickBase', 'zRollJoystickKnob');
+        setupXYJoystick('xyJoystickContainer', 'xyJoystickBase', 'xyJoystickKnob');
+        antennaKnobUpdaters['L-cam'] = setupAntennaJoystick('antennaJoystickL-cam', 'antennaBaseL-cam', 'antennaKnobL-cam', 'L');
+        antennaKnobUpdaters['R-cam'] = setupAntennaJoystick('antennaJoystickR-cam', 'antennaBaseR-cam', 'antennaKnobR-cam', 'R');
+
+        // Sim tab controls (same functionality, different IDs)
+        setupHeadJoystick('headJoystickContainer-sim', 'headJoystickBase-sim', 'headJoystickKnob-sim');
+        setupZRollJoystick('zRollJoystickContainer-sim', 'zRollJoystickBase-sim', 'zRollJoystickKnob-sim');
+        setupXYJoystick('xyJoystickContainer-sim', 'xyJoystickBase-sim', 'xyJoystickKnob-sim');
+        antennaKnobUpdaters['L-sim'] = setupAntennaJoystick('antennaJoystickL-sim', 'antennaBaseL-sim', 'antennaKnobL-sim', 'L');
+        antennaKnobUpdaters['R-sim'] = setupAntennaJoystick('antennaJoystickR-sim', 'antennaBaseR-sim', 'antennaKnobR-sim', 'R');
+
+        // Reset buttons (both tabs)
+        const resetBtn = document.getElementById('resetControlsBtn');
+        if (resetBtn) {
+            resetBtn.addEventListener('click', resetAllPositions);
+        }
+        const resetBtnSim = document.getElementById('resetControlsBtn-sim');
+        if (resetBtnSim) {
+            resetBtnSim.addEventListener('click', resetAllPositions);
+        }
+
+        // Joystick return-to-center settings buttons
+        setupJoystickReturnButtons();
+
+        // Body lock settings buttons
+        setupBodyLockButtons();
+    }
+
+    // ===== Body Lock Settings =====
+    function setupBodyLockButtons() {
+        const offBtn = document.getElementById('bodyLockOffBtn');
+        const onBtn = document.getElementById('bodyLockOnBtn');
+
+        // Load initial state from settings
+        const settings = window.ReachySettings?.getAll?.() || {};
+        bodyLockMode = settings.body_lock_enabled === true;
+
+        // Update button states
+        function updateButtonStates() {
+            if (offBtn) offBtn.classList.toggle('active', !bodyLockMode);
+            if (onBtn) onBtn.classList.toggle('active', bodyLockMode);
+        }
+        updateButtonStates();
+
+        if (offBtn) {
+            offBtn.addEventListener('click', () => {
+                bodyLockMode = false;
+                updateButtonStates();
+                if (window.ReachySettings) {
+                    ReachySettings.save('body_lock_enabled', false);
+                }
+            });
+        }
+
+        if (onBtn) {
+            onBtn.addEventListener('click', () => {
+                bodyLockMode = true;
+                updateButtonStates();
+                if (window.ReachySettings) {
+                    ReachySettings.save('body_lock_enabled', true);
+                }
+            });
+        }
+    }
+
+    // ===== Joystick Return-to-Center Settings =====
+    function setupJoystickReturnButtons() {
+        const buttons = document.querySelectorAll('.joy-return-btn');
+        buttons.forEach(btn => {
+            const axis = btn.dataset.joyAxis;
+            const returnValue = btn.dataset.return;
+
+            // Set initial state from settings
+            if (returnSettings[axis] === returnValue) {
+                btn.classList.add('active');
+            }
+
+            btn.addEventListener('click', () => {
+                // Update setting
+                returnSettings[axis] = returnValue;
+
+                // Update UI - remove active from siblings, add to this
+                const siblings = document.querySelectorAll(`.joy-return-btn[data-joy-axis="${axis}"]`);
+                siblings.forEach(s => s.classList.remove('active'));
+                btn.classList.add('active');
+
+                // Save setting
+                const settingKey = `joy_return_${axis}`;
+                if (window.ReachySettings) {
+                    ReachySettings.save(settingKey, returnValue);
+                }
+            });
+        });
+    }
+
+    // ===== Chart Control Integration =====
+    // Allow external code (telemetry charts) to control via the same system
+    function setHeadTargets(values) {
+        if (!controlsEnabled) return;
+        if (values.yaw !== undefined) targetHeadYaw = values.yaw;
+        if (values.pitch !== undefined) targetHeadPitch = values.pitch;
+        if (values.roll !== undefined) targetHeadRoll = values.roll;
+        if (values.x !== undefined) targetHeadX = values.x;
+        if (values.y !== undefined) targetHeadY = values.y;
+        if (values.z !== undefined) targetHeadZ = values.z;
+    }
+
+    function setAntennaTargets(left, right) {
+        if (!controlsEnabled) return;
+        antennaControlActive = true;  // Same as joystick setAntennaTarget
+        if (left !== undefined) {
+            left = Math.max(-ANTENNA_MAX, Math.min(ANTENNA_MAX, left));
+            targetAntennaL = left;
+        }
+        if (right !== undefined) {
+            right = Math.max(-ANTENNA_MAX, Math.min(ANTENNA_MAX, right));
+            targetAntennaR = right;
+        }
+    }
+
+    function getTargets() {
+        return {
+            yaw: targetHeadYaw,
+            pitch: targetHeadPitch,
+            roll: targetHeadRoll,
+            x: targetHeadX,
+            y: targetHeadY,
+            z: targetHeadZ,
+            antennaL: targetAntennaL,
+            antennaR: targetAntennaR
+        };
+    }
+
+    function startChartControl() {
+        if (!controlsEnabled) return;
+        setControlActive(true);
+        startSmoothingLoop();
+    }
+
+    function endChartControl() {
+        setControlActive(false);
+        smoothFinish();
+    }
+
+    // Refresh antenna knob positions (call after resize)
+    function refreshAntennaKnobs() {
+        if (antennaKnobUpdaters['L-cam']) antennaKnobUpdaters['L-cam'](targetAntennaL);
+        if (antennaKnobUpdaters['R-cam']) antennaKnobUpdaters['R-cam'](targetAntennaR);
+    }
+
+    // Export
+    window.ReachyControls = {
+        init: initControls,
+        resetAllPositions,
+        setEnabled,
+        refreshAntennaKnobs,
+        // Chart control integration
+        setHeadTargets,
+        setAntennaTargets,
+        getTargets,
+        startChartControl,
+        endChartControl,
+        // Constants for limits (from centralized constants.js)
+        limits: window.ReachyConstants.limits
+    };
+})();

hello_world/static/js/controls/Joystick.js

@@ -0,0 +1,339 @@
+// Joystick.js - Reusable joystick control class
+
+/**
+ * A reusable joystick control class that handles mouse and touch events,
+ * clamps knob position to a circular area, and calculates normalized values.
+ *
+ * @example
+ * const headJoystick = new Joystick({
+ *     containerId: 'headJoystickContainer',
+ *     baseId: 'headJoystickBase',
+ *     knobId: 'headJoystickKnob',
+ *     xLimit: HEAD_YAW_MAX,
+ *     yLimit: HEAD_PITCH_MAX,
+ *     onUpdate: (x, y) => {
+ *         targetHeadYaw = -x;
+ *         targetHeadPitch = y;
+ *     }
+ * });
+ */
+class Joystick {
+    /**
+     * Create a new Joystick instance.
+     * @param {Object} config - Configuration object
+     * @param {string} config.containerId - ID of the container element
+     * @param {string} config.baseId - ID of the base element (defines movement bounds)
+     * @param {string} config.knobId - ID of the knob element (draggable)
+     * @param {number} [config.xLimit=1] - Maximum value for X axis (output scaled to -xLimit to +xLimit)
+     * @param {number} [config.yLimit=1] - Maximum value for Y axis (output scaled to -yLimit to +yLimit)
+     * @param {number} [config.edgePadding=10] - Padding from edge of base for max knob position
+     * @param {Function} [config.onUpdate] - Callback function called with (x, y) values when joystick moves
+     * @param {Function} [config.onStart] - Callback function called when dragging starts
+     * @param {Function} [config.onEnd] - Callback function called when dragging ends
+     */
+    constructor(config) {
+        this.containerId = config.containerId;
+        this.baseId = config.baseId;
+        this.knobId = config.knobId;
+        this.xLimit = config.xLimit ?? 1;
+        this.yLimit = config.yLimit ?? 1;
+        this.edgePadding = config.edgePadding ?? 10;
+        this.onUpdate = config.onUpdate || null;
+        this.onStart = config.onStart || null;
+        this.onEnd = config.onEnd || null;
+
+        // Get DOM elements
+        this.container = document.getElementById(this.containerId);
+        this.base = document.getElementById(this.baseId);
+        this.knob = document.getElementById(this.knobId);
+
+        // State
+        this._isActive = false;
+        this._enabled = true;
+        this._currentX = 0;  // Normalized -1 to 1
+        this._currentY = 0;  // Normalized -1 to 1
+
+        // Bound event handlers (for removal)
+        this._onMouseMove = this._handleMouseMove.bind(this);
+        this._onMouseUp = this._handleMouseUp.bind(this);
+        this._onTouchMove = this._handleTouchMove.bind(this);
+        this._onTouchEnd = this._handleTouchEnd.bind(this);
+
+        // Initialize if elements exist
+        if (this.container && this.base && this.knob) {
+            this._init();
+        }
+    }
+
+    /**
+     * Initialize event listeners
+     * @private
+     */
+    _init() {
+        // Mouse events on knob
+        this.knob.addEventListener('mousedown', (e) => this._handleMouseDown(e));
+
+        // Touch events on knob
+        this.knob.addEventListener('touchstart', (e) => this._handleTouchStart(e), { passive: false });
+
+        // Document-level events for drag tracking
+        document.addEventListener('mousemove', this._onMouseMove);
+        document.addEventListener('mouseup', this._onMouseUp);
+        document.addEventListener('touchmove', this._onTouchMove, { passive: false });
+        document.addEventListener('touchend', this._onTouchEnd);
+    }
+
+    /**
+     * Handle mouse down on knob
+     * @private
+     */
+    _handleMouseDown(e) {
+        if (!this._enabled) return;
+        e.preventDefault();
+        this._isActive = true;
+        this.knob.style.cursor = 'grabbing';
+
+        // Visual feedback
+        if (this.container.parentElement) {
+            this.container.parentElement.style.opacity = '1';
+        }
+
+        if (this.onStart) {
+            this.onStart();
+        }
+    }
+
+    /**
+     * Handle mouse move (document level)
+     * @private
+     */
+    _handleMouseMove(e) {
+        if (this._isActive) {
+            this._updateKnobPosition(e.clientX, e.clientY);
+        }
+    }
+
+    /**
+     * Handle mouse up (document level)
+     * @private
+     */
+    _handleMouseUp() {
+        if (this._isActive) {
+            this._isActive = false;
+            this.knob.style.cursor = 'grab';
+
+            // Visual feedback
+            if (this.container.parentElement) {
+                this.container.parentElement.style.opacity = '0.7';
+            }
+
+            if (this.onEnd) {
+                this.onEnd();
+            }
+        }
+    }
+
+    /**
+     * Handle touch start on knob
+     * @private
+     */
+    _handleTouchStart(e) {
+        if (!this._enabled) return;
+        e.preventDefault();
+        this._isActive = true;
+
+        if (this.onStart) {
+            this.onStart();
+        }
+    }
+
+    /**
+     * Handle touch move (document level)
+     * @private
+     */
+    _handleTouchMove(e) {
+        if (this._isActive && e.touches.length > 0) {
+            this._updateKnobPosition(e.touches[0].clientX, e.touches[0].clientY);
+        }
+    }
+
+    /**
+     * Handle touch end (document level)
+     * @private
+     */
+    _handleTouchEnd() {
+        if (this._isActive) {
+            this._isActive = false;
+
+            if (this.onEnd) {
+                this.onEnd();
+            }
+        }
+    }
+
+    /**
+     * Update knob position based on pointer coordinates
+     * @param {number} clientX - X coordinate from event
+     * @param {number} clientY - Y coordinate from event
+     * @private
+     */
+    _updateKnobPosition(clientX, clientY) {
+        const rect = this.base.getBoundingClientRect();
+        const maxDistance = rect.width / 2 - this.edgePadding;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        let dx = clientX - centerX;
+        let dy = clientY - centerY;
+
+        // Clamp to circular area
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance > maxDistance) {
+            dx = (dx / distance) * maxDistance;
+            dy = (dy / distance) * maxDistance;
+        }
+
+        // Update knob visual position
+        this.knob.style.left = `calc(50% + ${dx}px)`;
+        this.knob.style.top = `calc(50% + ${dy}px)`;
+
+        // Calculate normalized values (-1 to 1)
+        this._currentX = dx / maxDistance;
+        this._currentY = dy / maxDistance;
+
+        // Call update callback with scaled values
+        if (this.onUpdate) {
+            const scaledX = this._currentX * this.xLimit;
+            const scaledY = this._currentY * this.yLimit;
+            this.onUpdate(scaledX, scaledY);
+        }
+    }
+
+    /**
+     * Reset knob to center position
+     */
+    reset() {
+        this._currentX = 0;
+        this._currentY = 0;
+
+        if (this.knob) {
+            this.knob.style.left = '50%';
+            this.knob.style.top = '50%';
+        }
+
+        if (this.onUpdate) {
+            this.onUpdate(0, 0);
+        }
+    }
+
+    /**
+     * Set knob position programmatically (using normalized values -1 to 1)
+     * @param {number} x - Normalized X value (-1 to 1)
+     * @param {number} y - Normalized Y value (-1 to 1)
+     */
+    setPosition(x, y) {
+        // Clamp to -1 to 1
+        x = Math.max(-1, Math.min(1, x));
+        y = Math.max(-1, Math.min(1, y));
+
+        this._currentX = x;
+        this._currentY = y;
+
+        if (this.knob && this.base) {
+            const rect = this.base.getBoundingClientRect();
+            const maxDistance = rect.width / 2 - this.edgePadding;
+            const dx = x * maxDistance;
+            const dy = y * maxDistance;
+
+            this.knob.style.left = `calc(50% + ${dx}px)`;
+            this.knob.style.top = `calc(50% + ${dy}px)`;
+        }
+    }
+
+    /**
+     * Enable or disable the joystick
+     * @param {boolean} enabled - Whether the joystick should be enabled
+     */
+    setEnabled(enabled) {
+        this._enabled = enabled;
+
+        if (this.container) {
+            this.container.style.opacity = enabled ? '1' : '0.4';
+            this.container.style.pointerEvents = enabled ? 'auto' : 'none';
+        }
+
+        // If disabled while active, end the interaction
+        if (!enabled && this._isActive) {
+            this._isActive = false;
+            if (this.onEnd) {
+                this.onEnd();
+            }
+        }
+    }
+
+    /**
+     * Check if joystick is currently enabled
+     * @returns {boolean}
+     */
+    isEnabled() {
+        return this._enabled;
+    }
+
+    /**
+     * Check if joystick is currently being dragged
+     * @returns {boolean}
+     */
+    isActive() {
+        return this._isActive;
+    }
+
+    /**
+     * Get current normalized X value (-1 to 1)
+     * @returns {number}
+     */
+    getX() {
+        return this._currentX;
+    }
+
+    /**
+     * Get current normalized Y value (-1 to 1)
+     * @returns {number}
+     */
+    getY() {
+        return this._currentY;
+    }
+
+    /**
+     * Get current scaled X value (using xLimit)
+     * @returns {number}
+     */
+    getScaledX() {
+        return this._currentX * this.xLimit;
+    }
+
+    /**
+     * Get current scaled Y value (using yLimit)
+     * @returns {number}
+     */
+    getScaledY() {
+        return this._currentY * this.yLimit;
+    }
+
+    /**
+     * Clean up event listeners (call when destroying the joystick)
+     */
+    destroy() {
+        document.removeEventListener('mousemove', this._onMouseMove);
+        document.removeEventListener('mouseup', this._onMouseUp);
+        document.removeEventListener('touchmove', this._onTouchMove);
+        document.removeEventListener('touchend', this._onTouchEnd);
+    }
+}
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = Joystick;
+}
+
+// Also make available globally
+window.Joystick = Joystick;

hello_world/static/js/core/api-client.js

@@ -0,0 +1,86 @@
+// api-client.js - Centralized API client for daemon communication
+
+(function() {
+    'use strict';
+
+    const { DAEMON_API } = window.ReachyConstants;
+
+    let consecutiveFailures = 0;
+    const MAX_FAILURES_BEFORE_WARN = 3;
+
+    async function postJSON(endpoint, data, options = {}) {
+        const { silent = false, toast = false } = options;
+        try {
+            const response = await fetch(`${DAEMON_API}${endpoint}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data)
+            });
+            if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            consecutiveFailures = 0;
+            const text = await response.text();
+            return text ? JSON.parse(text) : null;
+        } catch (error) {
+            consecutiveFailures++;
+            if (!silent && consecutiveFailures >= MAX_FAILURES_BEFORE_WARN) {
+                console.error(`API error (${endpoint}):`, error.message);
+            }
+            if (toast && window.ReachyToast) {
+                window.ReachyToast.show(`API error: ${error.message}`, 'error');
+            }
+            return null;
+        }
+    }
+
+    async function getJSON(endpoint, options = {}) {
+        const { silent = false, toast = false } = options;
+        try {
+            const response = await fetch(`${DAEMON_API}${endpoint}`);
+            if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            consecutiveFailures = 0;
+            return await response.json();
+        } catch (error) {
+            consecutiveFailures++;
+            if (!silent && consecutiveFailures >= MAX_FAILURES_BEFORE_WARN) {
+                console.error(`API error (${endpoint}):`, error.message);
+            }
+            if (toast && window.ReachyToast) {
+                window.ReachyToast.show(`API error: ${error.message}`, 'error');
+            }
+            return null;
+        }
+    }
+
+    function setHeadTarget(pose) {
+        return postJSON('/api/move/set_target', { target_head_pose: pose }, { silent: true });
+    }
+
+    function setBodyTarget(yaw) {
+        return postJSON('/api/move/set_target', { target_body_yaw: yaw }, { silent: true });
+    }
+
+    function setAntennaTarget(right, left) {
+        return postJSON('/api/move/set_target', { target_antennas: [right, left] }, { silent: true });
+    }
+
+    function playMove(moveName) {
+        return postJSON(`/api/move/play/${moveName}`, {}, { toast: true });
+    }
+
+    function getDaemonStatus() {
+        return getJSON('/api/daemon/status', { silent: true });
+    }
+
+    function getAppStatus() {
+        return getJSON('/api/apps/current-app-status', { silent: true });
+    }
+
+    window.ReachyAPI = Object.freeze({
+        postJSON, getJSON,
+        setHeadTarget, setBodyTarget, setAntennaTarget, playMove,
+        getDaemonStatus, getAppStatus,
+        DAEMON_API
+    });
+
+    console.log('ReachyAPI loaded');
+})();

hello_world/static/js/core/constants.js

@@ -0,0 +1,95 @@
+// constants.js - Centralized robot constants and limits
+// Single source of truth for all robot parameters
+
+(function() {
+    'use strict';
+
+    // ===== API Configuration =====
+    const DAEMON_API = `http://${window.location.hostname}:8000`;
+    const SIGNALING_URL = `ws://${window.location.hostname}:8443`;
+
+    // ===== Head Control Limits =====
+    const HEAD_X_MAX = 0.03;
+    const HEAD_Y_MAX = 0.03;
+    const HEAD_Z_MAX = 0.04;
+
+    const HEAD_YAW_MAX = 0.87;
+    const HEAD_PITCH_MAX = 0.44;
+    const HEAD_ROLL_LEFT_MAX = 0.35;
+    const HEAD_ROLL_RIGHT_MAX = 0.30;
+    const HEAD_ROLL_OFFSET = 0.0;
+
+    // ===== Body Control Limits =====
+    const BODY_YAW_MAX = 2.8;
+
+    // ===== Antenna Limits =====
+    const ANTENNA_MAX = 179;
+
+    // ===== Throttle Settings (milliseconds) =====
+    const HEAD_COMMAND_THROTTLE = 30;
+    const BODY_COMMAND_THROTTLE = 30;
+    const ANTENNA_THROTTLE = 50;
+
+    // ===== WebSocket Settings =====
+    const DEFAULT_ROBOT_HZ = 10;
+    const DEFAULT_STATS_HZ = 1;
+
+    // ===== Smoothing Settings =====
+    const SMOOTHING_FACTOR = 0.15;
+    const SMOOTHING_THRESHOLD = 0.001;
+
+    // ===== Utility Functions =====
+    function formatBytes(bytes) {
+        if (bytes === null || bytes === undefined) return '--';
+        if (bytes < 1024) return bytes.toFixed(0) + ' B';
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
+    }
+
+    function formatBytesShort(bytes) {
+        if (bytes === null || bytes === undefined) return '--';
+        if (bytes < 1024) return bytes.toFixed(0) + 'B';
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + 'K';
+        if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(0) + 'M';
+        return (bytes / (1024 * 1024 * 1024)).toFixed(1) + 'G';
+    }
+
+    function formatUptime(seconds) {
+        if (seconds === null || seconds === undefined || isNaN(seconds)) return '--';
+        const days = Math.floor(seconds / 86400);
+        const hours = Math.floor((seconds % 86400) / 3600);
+        const mins = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+        if (days > 0) return `${days}d ${hours}h ${mins}m`;
+        if (hours > 0) return `${hours}h ${mins}m ${secs}s`;
+        return `${mins}m ${secs}s`;
+    }
+
+    // Export utilities early so websocket.js can use them
+    window.ReachyApp = {
+        DAEMON_API,
+        formatBytes,
+        formatBytesShort,
+        formatUptime
+    };
+
+    window.ReachyConstants = Object.freeze({
+        DAEMON_API, SIGNALING_URL,
+        HEAD_X_MAX, HEAD_Y_MAX, HEAD_Z_MAX,
+        HEAD_YAW_MAX, HEAD_PITCH_MAX,
+        HEAD_ROLL_LEFT_MAX, HEAD_ROLL_RIGHT_MAX, HEAD_ROLL_OFFSET,
+        BODY_YAW_MAX, ANTENNA_MAX,
+        HEAD_COMMAND_THROTTLE, BODY_COMMAND_THROTTLE, ANTENNA_THROTTLE,
+        DEFAULT_ROBOT_HZ, DEFAULT_STATS_HZ,
+        SMOOTHING_FACTOR, SMOOTHING_THRESHOLD,
+        limits: Object.freeze({
+            HEAD_X_MAX, HEAD_Y_MAX, HEAD_Z_MAX,
+            HEAD_YAW_MAX, HEAD_PITCH_MAX,
+            HEAD_ROLL_LEFT_MAX, HEAD_ROLL_RIGHT_MAX,
+            BODY_YAW_MAX, ANTENNA_MAX
+        })
+    });
+
+    console.log('ReachyConstants loaded');
+})();

hello_world/static/js/core/drag-utils.js

@@ -0,0 +1,529 @@
+// drag-utils.js - Unified drag, resize, and reorder utilities
+// Consolidates 7+ duplicate drag implementations into one reusable module
+
+(function() {
+    'use strict';
+
+    // Track z-index for floating panels
+    let topZIndex = 10000;
+
+    /**
+     * Make an element draggable by mouse/touch
+     * @param {HTMLElement} element - Element to make draggable
+     * @param {Object} options - Configuration options
+     * @param {string} options.handle - CSS selector for drag handle (defaults to element itself)
+     * @param {string[]} options.excludeSelectors - Selectors that should NOT trigger drag
+     * @param {boolean} options.constrainToViewport - Keep element within viewport bounds (default: true)
+     * @param {Function} options.onDragStart - Callback when drag starts (element, x, y)
+     * @param {Function} options.onDragEnd - Callback when drag ends (x, y)
+     * @param {boolean} options.bringToFront - Increase z-index on drag (default: true)
+     */
+    function makeDraggable(element, options = {}) {
+        if (!element) return;
+
+        const {
+            handle = null,
+            excludeSelectors = [],
+            constrainToViewport = true,
+            onDragStart = null,
+            onDragEnd = null,
+            bringToFront = true
+        } = options;
+
+        let isDragging = false;
+        let startX, startY, startLeft, startTop;
+
+        const handleEl = handle ? element.querySelector(handle) : element;
+        if (!handleEl) return;
+
+        function shouldDrag(target) {
+            // Check if target matches any exclude selector
+            for (const sel of excludeSelectors) {
+                if (target.closest(sel)) return false;
+            }
+            return true;
+        }
+
+        function getPosition(e) {
+            if (e.touches && e.touches.length > 0) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+            return { x: e.clientX, y: e.clientY };
+        }
+
+        function startDrag(e) {
+            if (!shouldDrag(e.target)) return;
+
+            isDragging = true;
+            const pos = getPosition(e);
+            startX = pos.x;
+            startY = pos.y;
+
+            const rect = element.getBoundingClientRect();
+            startLeft = rect.left;
+            startTop = rect.top;
+
+            // Convert from any positioning to fixed left/top
+            element.style.right = 'auto';
+            element.style.bottom = 'auto';
+            element.style.left = startLeft + 'px';
+            element.style.top = startTop + 'px';
+
+            if (bringToFront) {
+                topZIndex++;
+                element.style.zIndex = topZIndex;
+            }
+
+            element.style.cursor = 'grabbing';
+            document.body.style.userSelect = 'none';
+
+            if (onDragStart) onDragStart(element, startLeft, startTop);
+
+            e.preventDefault();
+        }
+
+        function moveDrag(e) {
+            if (!isDragging) return;
+
+            const pos = getPosition(e);
+            const dx = pos.x - startX;
+            const dy = pos.y - startY;
+
+            let newLeft = startLeft + dx;
+            let newTop = startTop + dy;
+
+            if (constrainToViewport) {
+                const rect = element.getBoundingClientRect();
+                newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - rect.width));
+                newTop = Math.max(0, Math.min(newTop, window.innerHeight - rect.height));
+            }
+
+            element.style.left = newLeft + 'px';
+            element.style.top = newTop + 'px';
+        }
+
+        function endDrag() {
+            if (!isDragging) return;
+            isDragging = false;
+
+            element.style.cursor = '';
+            document.body.style.userSelect = '';
+
+            if (onDragEnd) {
+                const rect = element.getBoundingClientRect();
+                onDragEnd(Math.round(rect.left), Math.round(rect.top));
+            }
+        }
+
+        // Mouse events
+        handleEl.addEventListener('mousedown', startDrag);
+        document.addEventListener('mousemove', moveDrag);
+        document.addEventListener('mouseup', endDrag);
+
+        // Touch events
+        handleEl.addEventListener('touchstart', startDrag, { passive: false });
+        document.addEventListener('touchmove', moveDrag, { passive: false });
+        document.addEventListener('touchend', endDrag);
+
+        // Set cursor style
+        handleEl.style.cursor = 'grab';
+
+        // Return cleanup function
+        return function cleanup() {
+            handleEl.removeEventListener('mousedown', startDrag);
+            document.removeEventListener('mousemove', moveDrag);
+            document.removeEventListener('mouseup', endDrag);
+            handleEl.removeEventListener('touchstart', startDrag);
+            document.removeEventListener('touchmove', moveDrag);
+            document.removeEventListener('touchend', endDrag);
+        };
+    }
+
+    /**
+     * Make an element resizable via a handle
+     * @param {HTMLElement} element - Element to resize
+     * @param {Object} options - Configuration options
+     * @param {string|HTMLElement} options.handle - Resize handle selector or element
+     * @param {number} options.minWidth - Minimum width
+     * @param {number} options.maxWidth - Maximum width
+     * @param {number} options.minHeight - Minimum height
+     * @param {number} options.maxHeight - Maximum height
+     * @param {number} options.aspectRatio - Maintain aspect ratio (width/height)
+     * @param {Function} options.onResize - Callback during resize (width, height)
+     * @param {Function} options.onResizeEnd - Callback when resize ends (width, height)
+     */
+    function makeResizable(element, options = {}) {
+        if (!element) return;
+
+        const {
+            handle,
+            minWidth = 100,
+            maxWidth = 2000,
+            minHeight = 100,
+            maxHeight = 2000,
+            aspectRatio = null,
+            onResize = null,
+            onResizeEnd = null
+        } = options;
+
+        const handleEl = typeof handle === 'string' ? element.querySelector(handle) : handle;
+        if (!handleEl) return;
+
+        let isResizing = false;
+        let startX, startY, startWidth, startHeight;
+
+        function getPosition(e) {
+            if (e.touches && e.touches.length > 0) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+            return { x: e.clientX, y: e.clientY };
+        }
+
+        function startResize(e) {
+            isResizing = true;
+            const pos = getPosition(e);
+            startX = pos.x;
+            startY = pos.y;
+            startWidth = element.offsetWidth;
+            startHeight = element.offsetHeight;
+
+            document.body.style.cursor = 'nwse-resize';
+            document.body.style.userSelect = 'none';
+
+            e.preventDefault();
+        }
+
+        function doResize(e) {
+            if (!isResizing) return;
+
+            const pos = getPosition(e);
+            const dx = pos.x - startX;
+            const dy = pos.y - startY;
+
+            let newWidth, newHeight;
+
+            if (aspectRatio) {
+                // Use diagonal movement for aspect-ratio constrained resize
+                const delta = (dx + dy) / 2;
+                newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + delta));
+                newHeight = newWidth / aspectRatio;
+            } else {
+                newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + dx));
+                newHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + dy));
+            }
+
+            element.style.width = newWidth + 'px';
+            element.style.height = newHeight + 'px';
+
+            if (onResize) onResize(newWidth, newHeight);
+        }
+
+        function endResize() {
+            if (!isResizing) return;
+            isResizing = false;
+
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+
+            if (onResizeEnd) {
+                onResizeEnd(element.offsetWidth, element.offsetHeight);
+            }
+        }
+
+        // Mouse events
+        handleEl.addEventListener('mousedown', startResize);
+        document.addEventListener('mousemove', doResize);
+        document.addEventListener('mouseup', endResize);
+
+        // Touch events
+        handleEl.addEventListener('touchstart', startResize, { passive: false });
+        document.addEventListener('touchmove', doResize, { passive: false });
+        document.addEventListener('touchend', endResize);
+
+        // Set cursor
+        handleEl.style.cursor = 'nwse-resize';
+
+        return function cleanup() {
+            handleEl.removeEventListener('mousedown', startResize);
+            document.removeEventListener('mousemove', doResize);
+            document.removeEventListener('mouseup', endResize);
+            handleEl.removeEventListener('touchstart', startResize);
+            document.removeEventListener('touchmove', doResize);
+            document.removeEventListener('touchend', endResize);
+        };
+    }
+
+    /**
+     * Make container children reorderable via drag
+     * @param {HTMLElement} container - Container element
+     * @param {Object} options - Configuration options
+     * @param {string} options.itemSelector - CSS selector for draggable items
+     * @param {string} options.handleSelector - Optional handle selector within items
+     * @param {string[]} options.excludeSelectors - Selectors that should NOT trigger drag (default: buttons, inputs, etc.)
+     * @param {Function} options.onReorder - Callback with new order array of IDs
+     * @param {number} options.animationMs - Animation duration in ms (default: 150)
+     */
+    function makeReorderable(container, options = {}) {
+        if (!container) return;
+
+        const {
+            itemSelector,
+            handleSelector = null,
+            excludeSelectors = ['button', 'input', 'select', 'a', 'canvas'],
+            onReorder = null,
+            animationMs = 150
+        } = options;
+
+        const excludeSelector = excludeSelectors.join(', ');
+
+        let draggedItem = null;
+        let originalIndex = -1;   // Track original position by index
+        let swapTarget = null;    // Current item we'd swap with
+        let itemRects = [];       // Store original positions before drag
+
+        function getItems() {
+            return Array.from(container.querySelectorAll(itemSelector));
+        }
+
+        function getPosition(e) {
+            if (e.touches && e.touches.length > 0) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+            return { x: e.clientX, y: e.clientY };
+        }
+
+        function findDropTarget(x, y) {
+            // Use stored rects from before drag started (not current positions)
+            for (let i = 0; i < itemRects.length; i++) {
+                if (i === originalIndex) continue;  // Skip dragged item's original position
+                const rect = itemRects[i];
+
+                // Check if cursor is in this item's original area
+                if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                    return getItems()[i];
+                }
+            }
+            return null;
+        }
+
+        function startDrag(e, item) {
+            draggedItem = item;
+
+            // Store all item positions BEFORE any changes
+            const items = getItems();
+            originalIndex = items.indexOf(item);
+            itemRects = items.map(el => {
+                const rect = el.getBoundingClientRect();
+                return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
+            });
+
+            const rect = itemRects[originalIndex];
+            const width = rect.right - rect.left;
+            const height = rect.bottom - rect.top;
+            const pos = getPosition(e);
+
+            // Calculate offset from cursor to element's top-left corner
+            item._dragOffsetX = pos.x - rect.left;
+            item._dragOffsetY = pos.y - rect.top;
+
+            // Style the dragged item (no placeholder needed for swap)
+            item.classList.add('dragging');
+            item.style.position = 'fixed';
+            item.style.width = width + 'px';
+            item.style.zIndex = '1000';
+            item.style.left = rect.left + 'px';
+            item.style.top = rect.top + 'px';
+
+            document.body.style.userSelect = 'none';
+            e.preventDefault();
+        }
+
+        function moveDrag(e) {
+            if (!draggedItem) return;
+
+            const pos = getPosition(e);
+            draggedItem.style.left = (pos.x - draggedItem._dragOffsetX) + 'px';
+            draggedItem.style.top = (pos.y - draggedItem._dragOffsetY) + 'px';
+
+            // Find potential swap target using original positions
+            const target = findDropTarget(pos.x, pos.y);
+
+            // Remove highlight from previous target
+            if (swapTarget && swapTarget !== target) {
+                swapTarget.classList.remove('swap-target');
+            }
+
+            // Highlight new target
+            if (target && target !== swapTarget) {
+                target.classList.add('swap-target');
+            }
+
+            swapTarget = target;
+        }
+
+        function endDrag() {
+            if (!draggedItem) return;
+
+            // Remove swap target highlight
+            if (swapTarget) {
+                swapTarget.classList.remove('swap-target');
+            }
+
+            // Reset dragged item styles first
+            draggedItem.classList.remove('dragging');
+            draggedItem.style.position = '';
+            draggedItem.style.width = '';
+            draggedItem.style.left = '';
+            draggedItem.style.top = '';
+            draggedItem.style.zIndex = '';
+
+            // Perform swap if we have a target
+            if (swapTarget) {
+                const items = getItems();
+                const targetIndex = items.indexOf(swapTarget);
+
+                // Get references to adjacent elements for insertion
+                const draggedNext = draggedItem.nextElementSibling;
+                const targetNext = swapTarget.nextElementSibling;
+
+                // Swap positions in DOM
+                if (draggedNext === swapTarget) {
+                    // Adjacent: dragged is right before target
+                    container.insertBefore(swapTarget, draggedItem);
+                } else if (targetNext === draggedItem) {
+                    // Adjacent: target is right before dragged
+                    container.insertBefore(draggedItem, swapTarget);
+                } else {
+                    // Not adjacent: need placeholder for swap
+                    const placeholder = document.createElement('div');
+                    container.insertBefore(placeholder, draggedItem);
+                    container.insertBefore(draggedItem, targetNext);
+                    container.insertBefore(swapTarget, placeholder);
+                    placeholder.remove();
+                }
+            }
+
+            document.body.style.userSelect = '';
+
+            // Get new order (only if swap happened)
+            if (swapTarget && onReorder) {
+                const newOrder = getItems().map(item => item.id).filter(Boolean);
+                onReorder(newOrder);
+            }
+
+            draggedItem = null;
+            originalIndex = -1;
+            swapTarget = null;
+            itemRects = [];
+        }
+
+        // Attach handlers to items
+        function attachHandlers() {
+            getItems().forEach(item => {
+                const handle = handleSelector ? item.querySelector(handleSelector) : item;
+                if (!handle) return;
+
+                handle.addEventListener('mousedown', (e) => {
+                    // Don't drag if clicking on excluded elements
+                    if (excludeSelector && e.target.closest(excludeSelector)) return;
+                    startDrag(e, item);
+                });
+
+                handle.addEventListener('touchstart', (e) => {
+                    if (excludeSelector && e.target.closest(excludeSelector)) return;
+                    startDrag(e, item);
+                }, { passive: false });
+            });
+        }
+
+        attachHandlers();
+
+        document.addEventListener('mousemove', moveDrag);
+        document.addEventListener('mouseup', endDrag);
+        document.addEventListener('touchmove', moveDrag, { passive: false });
+        document.addEventListener('touchend', endDrag);
+
+        return {
+            refresh: attachHandlers,
+            cleanup: function() {
+                document.removeEventListener('mousemove', moveDrag);
+                document.removeEventListener('mouseup', endDrag);
+                document.removeEventListener('touchmove', moveDrag);
+                document.removeEventListener('touchend', endDrag);
+            }
+        };
+    }
+
+    /**
+     * Apply saved order to container children
+     * @param {HTMLElement} container - Container element
+     * @param {string[]} orderArray - Array of item IDs in desired order
+     */
+    function applyOrder(container, orderArray) {
+        if (!container || !orderArray || !Array.isArray(orderArray)) return;
+
+        const fragment = document.createDocumentFragment();
+        const itemsById = {};
+
+        // Index all children by ID
+        Array.from(container.children).forEach(child => {
+            if (child.id) {
+                itemsById[child.id] = child;
+            }
+        });
+
+        // Add items in saved order
+        orderArray.forEach(id => {
+            if (itemsById[id]) {
+                fragment.appendChild(itemsById[id]);
+                delete itemsById[id];
+            }
+        });
+
+        // Add any remaining items (new ones not in saved order)
+        Object.values(itemsById).forEach(item => {
+            fragment.appendChild(item);
+        });
+
+        // Replace children
+        container.innerHTML = '';
+        container.appendChild(fragment);
+    }
+
+    /**
+     * Helper to save settings
+     * @param {Object} settings - Settings to save
+     */
+    function saveSettings(settings) {
+        return fetch('/api/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(settings)
+        }).catch(err => console.warn('Failed to save settings:', err));
+    }
+
+    /**
+     * Helper to load settings
+     * @returns {Promise<Object>}
+     */
+    function loadSettings() {
+        return fetch('/api/settings')
+            .then(r => r.json())
+            .catch(() => ({}));
+    }
+
+    // Export
+    window.ReachyDragUtils = {
+        makeDraggable,
+        makeResizable,
+        makeReorderable,
+        applyOrder,
+        saveSettings,
+        loadSettings,
+        bringToFront: function(element) {
+            topZIndex++;
+            element.style.zIndex = topZIndex;
+        }
+    };
+
+})();

hello_world/static/js/core/init.js

@@ -0,0 +1,928 @@
+// init.js - App bootstrap for Hello World
+// Initializes core modules and Status tab
+
+(function() {
+    'use strict';
+
+    // ===== Theme Management =====
+    function initTheme() {
+        const saved = localStorage.getItem('theme');
+        if (saved === 'light') document.documentElement.classList.add('light');
+
+        const toggle = document.getElementById('themeToggle');
+        if (toggle) {
+            toggle.addEventListener('click', () => {
+                document.documentElement.classList.toggle('light');
+                const isLight = document.documentElement.classList.contains('light');
+                localStorage.setItem('theme', isLight ? 'light' : 'dark');
+                toggle.textContent = isLight ? '\u263E' : '\u2600';
+            });
+            toggle.textContent = document.documentElement.classList.contains('light') ? '\u263E' : '\u2600';
+        }
+    }
+
+    // ===== Toast System =====
+    function initToast() {
+        // Create toast container if it doesn't exist
+        if (!document.getElementById('toastContainer')) {
+            const container = document.createElement('div');
+            container.id = 'toastContainer';
+            container.className = 'toast-container';
+            document.body.appendChild(container);
+        }
+
+        window.ReachyToast = {
+            show(opts) {
+                const container = document.getElementById('toastContainer');
+                if (!container) return;
+
+                const toast = document.createElement('div');
+                toast.className = `toast toast-${opts.type || 'info'}`;
+                toast.innerHTML = `<strong>${opts.title || ''}</strong>${opts.message ? '<br>' + opts.message : ''}`;
+                container.appendChild(toast);
+
+                const duration = opts.duration !== undefined ? opts.duration : 3000;
+                if (duration > 0) {
+                    setTimeout(() => toast.remove(), duration);
+                }
+                return toast;
+            },
+            success(title, message, opts = {}) {
+                return this.show({ type: 'success', title, message, ...opts });
+            },
+            error(title, message, opts = {}) {
+                return this.show({ type: 'error', title, message, ...opts });
+            },
+            dismiss(toast) {
+                if (toast && toast.remove) toast.remove();
+            }
+        };
+    }
+
+    // ===== Floating Joystick Panel Toggle =====
+    function initFloatingJoystickPanel() {
+        const toggle = document.getElementById('joystickToggle');
+        const panel = document.getElementById('floatingJoysticks');
+        if (!toggle || !panel) return;
+
+        // Make the panel draggable via FloatingPanel class
+        if (window.FloatingPanel) {
+            new FloatingPanel('floatingJoysticks', {
+                draggable: true,
+                resizable: false,
+                minimizable: true,
+                excludeSelectors: ['.floating-close-btn', '.floating-minimize-btn', '[id*="Knob"]', '[id*="Slider"]', '#resetControlsBtn']
+            });
+        }
+
+        function showPanel() {
+            panel.style.display = '';
+            toggle.classList.add('active');
+        }
+
+        function hidePanel() {
+            panel.style.display = 'none';
+            toggle.classList.remove('active');
+        }
+
+        toggle.addEventListener('click', () => {
+            if (panel.style.display === 'none') showPanel(); else hidePanel();
+        });
+
+        const closeBtn = panel.querySelector('.floating-close-btn');
+        if (closeBtn) closeBtn.addEventListener('click', hidePanel);
+    }
+
+    // ===== Floating Camera Panel Toggle =====
+    function initFloatingCameraPanel() {
+        const toggle = document.getElementById('cameraToggle');
+        const panel = document.getElementById('floatingCamera');
+        if (!toggle || !panel) return;
+
+        // Initialize WebRTC module (loads API script, doesn't start stream)
+        if (window.ReachyWebRTC) ReachyWebRTC.init();
+
+        // Make the panel draggable via FloatingPanel class
+        if (window.FloatingPanel) {
+            new FloatingPanel('floatingCamera', {
+                draggable: true,
+                resizable: false,
+                minimizable: true,
+                excludeSelectors: ['.floating-close-btn', '.floating-minimize-btn', '.cam-btn', '#recordTimer']
+            });
+        }
+
+        let recordingActive = false;
+        let recordTimerInterval = null;
+        let recordStartTime = 0;
+        let micRecordingActive = false;
+        let micTimerInterval = null;
+        let micStartTime = 0;
+
+        // Listen state (unmute WebRTC audio)
+        let listening = false;
+
+        // Speak state (intercom pipeline)
+        let speakingActive = false;
+        let intercomWs = null;
+        let intercomAudioCtx = null;
+        let intercomStream = null;
+
+        async function stopSpeaking() {
+            speakingActive = false;
+            const speakBtn = document.getElementById('speakBtn');
+            if (speakBtn) {
+                speakBtn.classList.remove('speaking');
+                speakBtn.innerHTML = '&#x1F399;';
+            }
+            if (intercomWs) {
+                try { intercomWs.close(); } catch (e) {}
+                intercomWs = null;
+            }
+            if (intercomAudioCtx) {
+                try { await intercomAudioCtx.close(); } catch (e) {}
+                intercomAudioCtx = null;
+            }
+            if (intercomStream) {
+                intercomStream.getTracks().forEach(t => t.stop());
+                intercomStream = null;
+            }
+        }
+
+        function showPanel() {
+            panel.style.display = '';
+            toggle.classList.add('active');
+            if (window.ReachyWebRTC) ReachyWebRTC.enableStream();
+        }
+
+        function hidePanel() {
+            panel.style.display = 'none';
+            toggle.classList.remove('active');
+            if (window.ReachyWebRTC) ReachyWebRTC.disableStream();
+
+            // Reset listen state
+            if (listening) {
+                listening = false;
+                const videoFeed = document.getElementById('videoFeed');
+                if (videoFeed) videoFeed.muted = true;
+                const listenBtn = document.getElementById('listenBtn');
+                if (listenBtn) {
+                    listenBtn.classList.remove('listening');
+                    listenBtn.innerHTML = '&#x1F50A;';
+                }
+            }
+
+            // Stop speak if active
+            if (speakingActive) stopSpeaking();
+        }
+
+        toggle.addEventListener('click', () => {
+            if (panel.style.display === 'none') showPanel(); else hidePanel();
+        });
+
+        const closeBtn = panel.querySelector('.floating-close-btn');
+        if (closeBtn) closeBtn.addEventListener('click', hidePanel);
+
+        // Snapshot button
+        const snapshotBtn = document.getElementById('snapshotBtn');
+        if (snapshotBtn) {
+            snapshotBtn.addEventListener('click', async () => {
+                try {
+                    const resp = await fetch('/api/snapshots/capture', { method: 'POST' });
+                    const data = await resp.json();
+                    if (data.status === 'ok') {
+                        if (window.ReachyToast) ReachyToast.success('Snapshot', data.filename);
+                    } else {
+                        if (window.ReachyToast) ReachyToast.error('Snapshot', data.error || 'Failed');
+                    }
+                } catch (e) {
+                    if (window.ReachyToast) ReachyToast.error('Snapshot', e.message);
+                }
+            });
+        }
+
+        // Record button
+        const recordBtn = document.getElementById('recordBtn');
+        const recordTimer = document.getElementById('recordTimer');
+
+        function updateTimer() {
+            if (!recordTimer) return;
+            const elapsed = Math.floor((Date.now() - recordStartTime) / 1000);
+            const mins = String(Math.floor(elapsed / 60)).padStart(2, '0');
+            const secs = String(elapsed % 60).padStart(2, '0');
+            recordTimer.textContent = `${mins}:${secs}`;
+        }
+
+        if (recordBtn) {
+            recordBtn.addEventListener('click', async () => {
+                if (!recordingActive) {
+                    // Start recording
+                    try {
+                        const resp = await fetch('/api/recordings/start', { method: 'POST' });
+                        const data = await resp.json();
+                        if (data.status === 'ok') {
+                            recordingActive = true;
+                            recordBtn.classList.add('recording');
+                            recordStartTime = Date.now();
+                            if (recordTimer) {
+                                recordTimer.style.display = '';
+                                recordTimer.textContent = '00:00';
+                            }
+                            recordTimerInterval = setInterval(updateTimer, 1000);
+                            if (window.ReachyToast) ReachyToast.success('Recording', 'Started');
+                        } else {
+                            if (window.ReachyToast) ReachyToast.error('Recording', data.error || 'Failed');
+                        }
+                    } catch (e) {
+                        if (window.ReachyToast) ReachyToast.error('Recording', e.message);
+                    }
+                } else {
+                    // Stop recording
+                    try {
+                        const resp = await fetch('/api/recordings/stop', { method: 'POST' });
+                        const data = await resp.json();
+                        recordingActive = false;
+                        recordBtn.classList.remove('recording');
+                        if (recordTimerInterval) {
+                            clearInterval(recordTimerInterval);
+                            recordTimerInterval = null;
+                        }
+                        if (recordTimer) recordTimer.style.display = 'none';
+                        if (data.status === 'ok') {
+                            if (window.ReachyToast) ReachyToast.success('Recording', `Saved: ${data.filename} (${data.duration}s)`);
+                        } else {
+                            if (window.ReachyToast) ReachyToast.error('Recording', data.error || 'Failed');
+                        }
+                    } catch (e) {
+                        if (window.ReachyToast) ReachyToast.error('Recording', e.message);
+                    }
+                }
+            });
+        }
+
+        // Mic record button
+        const micRecordBtn = document.getElementById('micRecordBtn');
+        if (micRecordBtn) {
+            function updateMicTimer() {
+                if (!recordTimer) return;
+                const elapsed = Math.floor((Date.now() - micStartTime) / 1000);
+                const mins = String(Math.floor(elapsed / 60)).padStart(2, '0');
+                const secs = String(elapsed % 60).padStart(2, '0');
+                recordTimer.textContent = `${mins}:${secs}`;
+            }
+
+            micRecordBtn.addEventListener('click', async () => {
+                if (!micRecordingActive) {
+                    try {
+                        const resp = await fetch('/api/sounds/start', { method: 'POST' });
+                        const data = await resp.json();
+                        if (data.status === 'ok') {
+                            micRecordingActive = true;
+                            micRecordBtn.classList.add('recording');
+                            micStartTime = Date.now();
+                            if (recordTimer) {
+                                recordTimer.style.display = '';
+                                recordTimer.textContent = '00:00';
+                            }
+                            micTimerInterval = setInterval(updateMicTimer, 1000);
+                            if (window.ReachyToast) ReachyToast.success('Mic Recording', 'Started');
+                        } else {
+                            if (window.ReachyToast) ReachyToast.error('Mic Recording', data.error || 'Failed');
+                        }
+                    } catch (e) {
+                        if (window.ReachyToast) ReachyToast.error('Mic Recording', e.message);
+                    }
+                } else {
+                    try {
+                        const resp = await fetch('/api/sounds/stop', { method: 'POST' });
+                        const data = await resp.json();
+                        micRecordingActive = false;
+                        micRecordBtn.classList.remove('recording');
+                        if (micTimerInterval) {
+                            clearInterval(micTimerInterval);
+                            micTimerInterval = null;
+                        }
+                        if (recordTimer) recordTimer.style.display = 'none';
+                        if (data.status === 'ok') {
+                            if (window.ReachyToast) ReachyToast.success('Mic Recording', `Saved: ${data.filename} (${data.duration}s)`);
+                        } else {
+                            if (window.ReachyToast) ReachyToast.error('Mic Recording', data.error || 'Failed');
+                        }
+                    } catch (e) {
+                        if (window.ReachyToast) ReachyToast.error('Mic Recording', e.message);
+                    }
+                }
+            });
+        }
+
+        // Listen button - unmute WebRTC video to hear robot mic
+        const listenBtn = document.getElementById('listenBtn');
+        if (listenBtn) {
+            listenBtn.addEventListener('click', () => {
+                const videoFeed = document.getElementById('videoFeed');
+                if (!videoFeed) return;
+
+                listening = !listening;
+                if (listening) {
+                    videoFeed.muted = false;
+                    videoFeed.volume = 1.0;
+                    listenBtn.classList.add('listening');
+                    listenBtn.innerHTML = '&#x1F507;'; // mute icon
+                } else {
+                    videoFeed.muted = true;
+                    listenBtn.classList.remove('listening');
+                    listenBtn.innerHTML = '&#x1F50A;'; // speaker icon
+                }
+            });
+        }
+
+        // Speak button - open mic and stream to robot via WebSocket
+        const speakBtn = document.getElementById('speakBtn');
+        if (speakBtn) {
+            speakBtn.addEventListener('click', async () => {
+                if (speakingActive) {
+                    await stopSpeaking();
+                    return;
+                }
+
+                try {
+                    // Get browser mic
+                    intercomStream = await navigator.mediaDevices.getUserMedia({
+                        audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true }
+                    });
+
+                    // Create AudioContext and load worklet
+                    intercomAudioCtx = new AudioContext();
+                    await intercomAudioCtx.audioWorklet.addModule('/static/js/intercom-processor.js');
+
+                    const source = intercomAudioCtx.createMediaStreamSource(intercomStream);
+                    const workletNode = new AudioWorkletNode(intercomAudioCtx, 'intercom-processor', {
+                        processorOptions: {
+                            sampleRate: intercomAudioCtx.sampleRate,
+                            gain: 5.0
+                        }
+                    });
+
+                    // Open WebSocket to intercom endpoint
+                    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+                    intercomWs = new WebSocket(`${wsProtocol}//${location.host}/ws/intercom`);
+                    intercomWs.binaryType = 'arraybuffer';
+
+                    intercomWs.onopen = () => {
+                        speakingActive = true;
+                        speakBtn.classList.add('speaking');
+                        speakBtn.innerHTML = '&#x1F507;'; // mute icon while active
+
+                        // Wire up: worklet posts PCM buffers -> send over WebSocket
+                        workletNode.port.onmessage = (e) => {
+                            if (e.data.type === 'audio' && intercomWs && intercomWs.readyState === WebSocket.OPEN) {
+                                intercomWs.send(e.data.data);
+                            }
+                        };
+
+                        source.connect(workletNode);
+                        workletNode.connect(intercomAudioCtx.destination); // needed to keep worklet alive
+                    };
+
+                    intercomWs.onerror = () => {
+                        if (window.ReachyToast) ReachyToast.error('Intercom', 'WebSocket connection failed');
+                        stopSpeaking();
+                    };
+
+                    intercomWs.onclose = () => {
+                        if (speakingActive) stopSpeaking();
+                    };
+                } catch (e) {
+                    if (window.ReachyToast) ReachyToast.error('Intercom', e.message || 'Mic access denied');
+                    await stopSpeaking();
+                }
+            });
+        }
+    }
+
+    // ===== Media Tab =====
+    function initMediaTab() {
+        let mediaLoaded = false;
+
+        function formatSize(bytes) {
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        }
+
+        function formatDate(timestamp) {
+            const d = new Date(timestamp * 1000);
+            const month = String(d.getMonth() + 1).padStart(2, '0');
+            const day = String(d.getDate()).padStart(2, '0');
+            const hours = String(d.getHours()).padStart(2, '0');
+            const mins = String(d.getMinutes()).padStart(2, '0');
+            return `${month}/${day} ${hours}:${mins}`;
+        }
+
+        function showLightbox(src, isVideo) {
+            const lb = document.createElement('div');
+            lb.className = 'media-lightbox';
+            if (isVideo) {
+                lb.innerHTML = `<video src="${src}" controls autoplay style="max-width:90vw;max-height:90vh;border-radius:8px;"></video><button class="media-lightbox-close">&times;</button>`;
+            } else {
+                lb.innerHTML = `<img src="${src}" alt=""><button class="media-lightbox-close">&times;</button>`;
+            }
+            lb.addEventListener('click', (e) => {
+                if (e.target === lb || e.target.classList.contains('media-lightbox-close')) lb.remove();
+            });
+            document.body.appendChild(lb);
+        }
+
+        function renderSnapshots(snapshots) {
+            const gallery = document.getElementById('snapshotGallery');
+            const count = document.getElementById('snapshotCount');
+            if (!gallery) return;
+            count.textContent = snapshots.length > 0 ? snapshots.length : '';
+
+            if (snapshots.length === 0) {
+                gallery.innerHTML = '<div class="media-empty">No snapshots yet. Use the camera panel to capture.</div>';
+                return;
+            }
+            gallery.innerHTML = snapshots.map(s => `
+                <div class="media-item" data-filename="${s.filename}" data-type="snapshot">
+                    <img src="/api/media/snapshots/${s.filename}" alt="${s.filename}" loading="lazy">
+                    <div class="media-item-info">
+                        <span class="media-item-name" title="${s.filename}">${formatDate(s.modified)}</span>
+                        <span class="media-item-size">${formatSize(s.size)}</span>
+                        <div class="media-item-actions">
+                            <button class="media-action-btn download" title="Download">&#x2B07;</button>
+                            <button class="media-action-btn delete" title="Delete">&#x1F5D1;</button>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+
+            gallery.querySelectorAll('.media-item').forEach(item => {
+                const filename = item.dataset.filename;
+                item.querySelector('img').addEventListener('click', () => {
+                    showLightbox(`/api/media/snapshots/${filename}`, false);
+                });
+                item.querySelector('.download').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const a = document.createElement('a');
+                    a.href = `/api/media/snapshots/${filename}`;
+                    a.download = filename;
+                    a.click();
+                });
+                item.querySelector('.delete').addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const resp = await fetch(`/api/snapshots/${filename}`, { method: 'DELETE' });
+                    const data = await resp.json();
+                    if (data.status === 'ok') {
+                        item.remove();
+                        if (window.ReachyToast) ReachyToast.success('Deleted', filename);
+                        const remaining = gallery.querySelectorAll('.media-item').length;
+                        count.textContent = remaining > 0 ? remaining : '';
+                        if (remaining === 0) gallery.innerHTML = '<div class="media-empty">No snapshots.</div>';
+                    }
+                });
+            });
+        }
+
+        function renderRecordings(recordings) {
+            const gallery = document.getElementById('recordingGallery');
+            const count = document.getElementById('recordingCount');
+            if (!gallery) return;
+            count.textContent = recordings.length > 0 ? recordings.length : '';
+
+            if (recordings.length === 0) {
+                gallery.innerHTML = '<div class="media-empty">No recordings yet. Use the camera panel to record.</div>';
+                return;
+            }
+            gallery.innerHTML = recordings.map(r => {
+                let durLabel = '';
+                if (r.duration > 0) {
+                    const mins = Math.floor(r.duration / 60);
+                    const secs = Math.floor(r.duration % 60);
+                    durLabel = mins > 0 ? `${mins}:${String(secs).padStart(2, '0')}` : `0:${String(secs).padStart(2, '0')}`;
+                }
+                return `
+                <div class="media-item" data-filename="${r.filename}" data-type="recording">
+                    <img src="/api/recordings/${r.filename}/thumbnail" alt="${r.filename}" loading="lazy">
+                    ${durLabel ? `<span class="media-duration">${durLabel}</span>` : ''}
+                    <div class="media-item-info">
+                        <span class="media-item-name" title="${r.filename}">${formatDate(r.modified)}</span>
+                        <span class="media-item-size">${formatSize(r.size)}</span>
+                        <div class="media-item-actions">
+                            <button class="media-action-btn download" title="Download">&#x2B07;</button>
+                            <button class="media-action-btn delete" title="Delete">&#x1F5D1;</button>
+                        </div>
+                    </div>
+                </div>
+            `}).join('');
+
+            gallery.querySelectorAll('.media-item').forEach(item => {
+                const filename = item.dataset.filename;
+                item.querySelector('img').addEventListener('click', () => {
+                    showLightbox(`/api/media/recordings/${filename}`, true);
+                });
+                item.querySelector('.download').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const a = document.createElement('a');
+                    a.href = `/api/media/recordings/${filename}`;
+                    a.download = filename;
+                    a.click();
+                });
+                item.querySelector('.delete').addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const resp = await fetch(`/api/recordings/${filename}`, { method: 'DELETE' });
+                    const data = await resp.json();
+                    if (data.status === 'ok') {
+                        item.remove();
+                        if (window.ReachyToast) ReachyToast.success('Deleted', filename);
+                        const remaining = gallery.querySelectorAll('.media-item').length;
+                        count.textContent = remaining > 0 ? remaining : '';
+                        if (remaining === 0) gallery.innerHTML = '<div class="media-empty">No recordings.</div>';
+                    }
+                });
+            });
+        }
+
+        function renderSounds(sounds) {
+            const gallery = document.getElementById('soundGallery');
+            const count = document.getElementById('soundCount');
+            if (!gallery) return;
+            count.textContent = sounds.length > 0 ? sounds.length : '';
+
+            if (sounds.length === 0) {
+                gallery.innerHTML = '<div class="media-empty">No sound recordings yet. Use the mic button to record.</div>';
+                return;
+            }
+            gallery.innerHTML = sounds.map(s => {
+                let durLabel = '';
+                if (s.duration) {
+                    const mins = Math.floor(s.duration / 60);
+                    const secs = Math.floor(s.duration % 60);
+                    durLabel = mins > 0 ? `${mins}:${String(secs).padStart(2, '0')}` : `0:${String(secs).padStart(2, '0')}`;
+                }
+                return `
+                <div class="media-item" data-filename="${s.filename}" data-type="sound">
+                    <img src="/api/sounds/${s.filename}/thumbnail?t=${Math.floor(s.modified)}" alt="${s.filename}" loading="lazy">
+                    ${durLabel ? `<span class="media-duration">${durLabel}</span>` : ''}
+                    <div class="media-item-info">
+                        <span class="media-item-name" title="${s.filename}">${formatDate(s.modified)}</span>
+                        <span class="media-item-size">${formatSize(s.size)}</span>
+                        <div class="media-item-actions">
+                            <button class="media-action-btn play" title="Play">&#x25B6;</button>
+                            <button class="media-action-btn download" title="Download">&#x2B07;</button>
+                            <button class="media-action-btn delete" title="Delete">&#x1F5D1;</button>
+                        </div>
+                    </div>
+                    <audio preload="none" src="/api/sounds/file/${s.filename}"></audio>
+                </div>
+            `}).join('');
+
+            gallery.querySelectorAll('.media-item').forEach(item => {
+                const filename = item.dataset.filename;
+                const audio = item.querySelector('audio');
+
+                // Click thumbnail to play/pause
+                item.querySelector('img').addEventListener('click', () => {
+                    if (audio.paused) { audio.play(); } else { audio.pause(); }
+                });
+                // Play button
+                const playBtn = item.querySelector('.play');
+                if (playBtn) {
+                    playBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        if (audio.paused) { audio.play(); } else { audio.pause(); }
+                    });
+                    audio.addEventListener('play', () => { playBtn.textContent = '\u23F8'; });
+                    audio.addEventListener('pause', () => { playBtn.textContent = '\u25B6'; });
+                    audio.addEventListener('ended', () => { playBtn.textContent = '\u25B6'; });
+                }
+                item.querySelector('.download').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const a = document.createElement('a');
+                    a.href = `/api/sounds/file/${filename}`;
+                    a.download = filename;
+                    a.click();
+                });
+                item.querySelector('.delete').addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const resp = await fetch(`/api/sounds/${filename}`, { method: 'DELETE' });
+                    const data = await resp.json();
+                    if (data.status === 'ok') {
+                        item.remove();
+                        if (window.ReachyToast) ReachyToast.success('Deleted', filename);
+                        const remaining = gallery.querySelectorAll('.media-item').length;
+                        count.textContent = remaining > 0 ? remaining : '';
+                        if (remaining === 0) gallery.innerHTML = '<div class="media-empty">No sound recordings.</div>';
+                    }
+                });
+            });
+        }
+
+        function renderMusic(data) {
+            const gallery = document.getElementById('musicGallery');
+            const count = document.getElementById('musicCount');
+            const nowPlaying = document.getElementById('musicNowPlaying');
+            const nowPlayingText = document.getElementById('musicNowPlayingText');
+            const stopBtn = document.getElementById('musicStopBtn');
+            if (!gallery) return;
+
+            const tracks = data.tracks || [];
+            const playing = data.playing || null;
+            count.textContent = tracks.length > 0 ? tracks.length : '';
+
+            // Now playing bar
+            if (playing && nowPlaying) {
+                const t = tracks.find(tr => tr.filename === playing);
+                nowPlayingText.textContent = t ? (t.title || t.filename) : playing;
+                nowPlaying.style.display = 'flex';
+            } else if (nowPlaying) {
+                nowPlaying.style.display = 'none';
+            }
+
+            if (tracks.length === 0) {
+                gallery.innerHTML = '<div class="media-empty">No music files. Upload mp3, wav, ogg, flac, m4a, or aac.</div>';
+                return;
+            }
+
+            gallery.innerHTML = tracks.map(t => {
+                let durLabel = '';
+                if (t.duration) {
+                    const mins = Math.floor(t.duration / 60);
+                    const secs = Math.floor(t.duration % 60);
+                    durLabel = `${mins}:${String(secs).padStart(2, '0')}`;
+                }
+                const coverSrc = t.has_cover ? `/api/music/cover/${encodeURIComponent(t.filename)}` : '';
+                const isPlaying = t.filename === playing;
+                return `
+                <div class="media-item${isPlaying ? ' music-active' : ''}" data-filename="${t.filename}" data-type="music">
+                    ${coverSrc
+                        ? `<img class="music-cover" src="${coverSrc}" alt="${t.title}" loading="lazy">`
+                        : `<div class="music-cover music-cover-placeholder">\uD83C\uDFB5</div>`}
+                    ${durLabel ? `<span class="media-duration">${durLabel}</span>` : ''}
+                    <div class="media-item-info">
+                        <div style="flex:1;min-width:0;">
+                            <span class="media-item-name" title="${t.filename}">${t.title || t.filename}</span>
+                            ${t.artist ? `<span class="music-artist">${t.artist}</span>` : ''}
+                        </div>
+                        <span class="media-item-size">${formatSize(t.size)}</span>
+                        <div class="media-item-actions">
+                            <button class="media-action-btn play" title="${isPlaying ? 'Playing' : 'Play'}">${isPlaying ? '\u23F8' : '\u25B6'}</button>
+                            <button class="media-action-btn download" title="Download">\u2B07</button>
+                            <button class="media-action-btn delete" title="Delete">\uD83D\uDDD1</button>
+                        </div>
+                    </div>
+                </div>
+            `}).join('');
+
+            gallery.querySelectorAll('.media-item').forEach(item => {
+                const filename = item.dataset.filename;
+                // Play on robot speaker
+                item.querySelector('.play').addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const resp = await fetch(`/api/music/play/${encodeURIComponent(filename)}`, { method: 'POST' });
+                    const result = await resp.json();
+                    if (result.status === 'ok') {
+                        if (window.ReachyToast) ReachyToast.success('Music', `Playing: ${filename}`);
+                        loadMedia();
+                    }
+                });
+                item.querySelector('.download').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const a = document.createElement('a');
+                    a.href = `/api/music/file/${encodeURIComponent(filename)}`;
+                    a.download = filename;
+                    a.click();
+                });
+                item.querySelector('.delete').addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const resp = await fetch(`/api/music/${encodeURIComponent(filename)}`, { method: 'DELETE' });
+                    const result = await resp.json();
+                    if (result.status === 'ok') {
+                        item.remove();
+                        if (window.ReachyToast) ReachyToast.success('Deleted', filename);
+                        const remaining = gallery.querySelectorAll('.media-item').length;
+                        count.textContent = remaining > 0 ? remaining : '';
+                        if (remaining === 0) gallery.innerHTML = '<div class="media-empty">No music files.</div>';
+                    }
+                });
+            });
+
+            // Stop button
+            if (stopBtn) {
+                stopBtn.onclick = async () => {
+                    await fetch('/api/music/stop', { method: 'POST' });
+                    loadMedia();
+                };
+            }
+
+            // Upload handler
+            const uploadInput = document.getElementById('musicUploadInput');
+            if (uploadInput && !uploadInput._wired) {
+                uploadInput._wired = true;
+                uploadInput.addEventListener('change', async (e) => {
+                    const file = e.target.files[0];
+                    if (!file) return;
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    try {
+                        const resp = await fetch('/api/music/upload', { method: 'POST', body: formData });
+                        const result = await resp.json();
+                        if (result.status === 'ok') {
+                            if (window.ReachyToast) ReachyToast.success('Upload', `${file.name} uploaded`);
+                            loadMedia();
+                        } else {
+                            if (window.ReachyToast) ReachyToast.error('Upload', result.error || 'Failed');
+                        }
+                    } catch (err) {
+                        if (window.ReachyToast) ReachyToast.error('Upload', 'Upload failed');
+                    }
+                    uploadInput.value = '';
+                });
+            }
+        }
+
+        async function loadMedia() {
+            try {
+                const [snapResp, recResp, sndResp, musicResp] = await Promise.all([
+                    fetch('/api/snapshots/list'),
+                    fetch('/api/recordings/list'),
+                    fetch('/api/sounds/list'),
+                    fetch('/api/music/list')
+                ]);
+                const snapData = await snapResp.json();
+                const recData = await recResp.json();
+                const sndData = await sndResp.json();
+                const musicData = await musicResp.json();
+                renderSnapshots(snapData.snapshots || []);
+                renderRecordings(recData.recordings || []);
+                renderSounds(sndData.sounds || []);
+                renderMusic(musicData);
+                mediaLoaded = true;
+            } catch (e) {
+                console.error('Failed to load media:', e);
+            }
+        }
+
+        // Return a tab change handler that loads media on first visit
+        return function onTabChange(tab) {
+            if (tab === 'media') {
+                loadMedia(); // Always refresh when switching to media tab
+            }
+        };
+    }
+
+    // ===== Header Volume Control =====
+    function initHeaderVolume() {
+        const slider = document.getElementById('headerVolumeSlider');
+        const label = document.getElementById('headerVolumeValue');
+        if (!slider || !label) return;
+
+        const daemonAPI = window.ReachyConstants ? ReachyConstants.DAEMON_API : `http://${location.hostname}:8000`;
+
+        // Fetch current volume
+        fetch(`${daemonAPI}/api/volume/current`)
+            .then(r => r.json())
+            .then(data => {
+                slider.value = data.volume;
+                label.textContent = data.volume;
+            })
+            .catch(() => {});
+
+        // Live update label while dragging
+        slider.addEventListener('input', () => {
+            label.textContent = slider.value;
+        });
+
+        // Set volume on release
+        let debounceTimer;
+        slider.addEventListener('change', () => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                fetch(`${daemonAPI}/api/volume/set`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ volume: parseInt(slider.value) })
+                }).then(r => r.json()).then(() => {
+                    if (window.ReachyToast) ReachyToast.success('Volume', slider.value + '%');
+                }).catch(e => {
+                    if (window.ReachyToast) ReachyToast.error('Volume', 'Failed to set');
+                });
+            }, 100);
+        });
+    }
+
+    // ===== App Initialization =====
+    async function initApp() {
+        console.log('Hello World initializing...');
+
+        initTheme();
+        initToast();
+
+        // Initialize core modules
+        if (window.ReachyTabs) ReachyTabs.init();
+        if (window.ReachySettings) await ReachySettings.load();
+
+        // Initialize WebSocket and charts (daemon status pushed via /ws/live, no polling)
+        if (window.ReachyWebSocket) {
+            ReachyWebSocket.init();
+        }
+
+        // Initialize joystick controls (wires all 5 joysticks + body slider + reset button)
+        if (window.ReachyControls) {
+            ReachyControls.init();
+        }
+
+        // Initialize floating panels (drag + toggle + close)
+        initFloatingJoystickPanel();
+        initFloatingCameraPanel();
+
+        // Head Pose copy button
+        const copyBtn = document.getElementById('copyHeadPose');
+        if (copyBtn) {
+            const copyIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+            const checkIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+            const showCopied = () => {
+                copyBtn.classList.add('copied');
+                copyBtn.innerHTML = checkIcon;
+                setTimeout(() => { copyBtn.classList.remove('copied'); copyBtn.innerHTML = copyIcon; }, 1500);
+            };
+            copyBtn.addEventListener('click', () => {
+                const val = id => {
+                    const el = document.getElementById(id);
+                    return el ? parseFloat(el.textContent) || 0 : 0;
+                };
+                const pose = {
+                    x: val('headPosX'), y: val('headPosY'), z: val('headPosZ'),
+                    roll: val('headRoll'), pitch: val('headPitch'), yaw: val('headYaw'),
+                    antenna_left: val('headAntL'), antenna_right: val('headAntR'),
+                    body_yaw: val('headBodyYaw')
+                };
+                const json = JSON.stringify(pose, null, 2);
+                navigator.clipboard.writeText(json).then(showCopied).catch(() => {
+                    const ta = document.createElement('textarea');
+                    ta.value = json; ta.style.position = 'fixed'; ta.style.opacity = '0';
+                    document.body.appendChild(ta); ta.select(); document.execCommand('copy');
+                    document.body.removeChild(ta);
+                    showCopied();
+                });
+            });
+        }
+
+        // Initialize media tab handler
+        const mediaTabHandler = initMediaTab();
+
+        // Initialize conversation tab (lazy)
+        let conversationInitStarted = false;
+
+        // Register tab change callbacks BEFORE restoring tab (so restored tab triggers them)
+        let simInitStarted = false;
+        if (window.ReachyTabs && window.ReachyWebSocket) {
+            ReachyTabs.onTabChange((tab) => {
+                setTimeout(() => ReachyWebSocket.resizeCharts(), 50);
+                mediaTabHandler(tab);
+
+                // Lazy-init conversation when tab first shown
+                if (tab === 'conversation' && !conversationInitStarted) {
+                    conversationInitStarted = true;
+                    if (window.ReachyTranscribe) ReachyTranscribe.init();
+                    if (window.ReachyAssistant) ReachyAssistant.init();
+                    if (window.ReachyLLMSettings) ReachyLLMSettings.init();
+                }
+
+                // Lazy-init simulation when telemetry tab is first shown
+                if (tab === 'telemetry' && !simInitStarted && window.ReachySimulation) {
+                    simInitStarted = true;
+                    ReachySimulation.init('simContainer').then(() => {
+                        const statusEl = document.getElementById('simStatus');
+                        if (statusEl) statusEl.textContent = '';
+                    }).catch(() => {
+                        const statusEl = document.getElementById('simStatus');
+                        if (statusEl) statusEl.textContent = 'Failed to load';
+                    });
+                }
+
+                // Resize sim when switching to telemetry
+                if (tab === 'telemetry' && window.ReachySimulation && ReachySimulation.isInitialized()) {
+                    setTimeout(() => ReachySimulation.resize(), 100);
+                }
+            });
+        }
+
+        // Restore last active tab (triggers callbacks registered above)
+        if (window.ReachyTabs) await ReachyTabs.restoreLastActiveTab();
+
+        if (window.ReachySettings) ReachySettings.finishInit();
+
+        // Header volume slider — controls daemon ALSA volume
+        initHeaderVolume();
+
+        console.log('Hello World initialized');
+    }
+
+    // Start when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initApp);
+    } else {
+        initApp();
+    }
+})();

hello_world/static/js/core/settings-manager.js

@@ -0,0 +1,85 @@
+/**
+ * SettingsManager - Centralized settings API
+ * Handles all /api/settings read/write operations
+ */
+
+window.ReachySettings = (function() {
+    'use strict';
+
+    let settingsCache = null;
+    let cacheTimestamp = 0;
+    const CACHE_TTL = 5000;
+
+    let _initializing = true;
+    setTimeout(() => { _initializing = false; }, 3000);
+
+    async function load(forceRefresh = false) {
+        const now = Date.now();
+        if (!forceRefresh && settingsCache && (now - cacheTimestamp) < CACHE_TTL) {
+            return settingsCache;
+        }
+        try {
+            const response = await fetch('/api/settings');
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            settingsCache = await response.json();
+            cacheTimestamp = now;
+            return settingsCache;
+        } catch (e) {
+            console.debug('[Settings] Failed to load:', e.message);
+            return settingsCache || {};
+        }
+    }
+
+    async function save(key, value, options = {}) {
+        return saveMultiple({ [key]: value }, options);
+    }
+
+    async function saveMultiple(settings, options = {}) {
+        const silent = options.silent || _initializing;
+        try {
+            const response = await fetch('/api/settings', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(settings)
+            });
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const data = await response.json();
+
+            if (data._rejected_keys && data._rejected_keys.length > 0) {
+                console.error('[Settings] Rejected keys:', data._rejected_keys.join(', '));
+            }
+
+            if (settingsCache) {
+                const { _rejected_keys, ...cleanData } = data;
+                Object.assign(settingsCache, cleanData);
+            }
+            return true;
+        } catch (e) {
+            console.debug('[Settings] Failed to save:', e.message);
+            return false;
+        }
+    }
+
+    async function get(key, defaultValue = null) {
+        const settings = await load();
+        return settings[key] !== undefined ? settings[key] : defaultValue;
+    }
+
+    function clearCache() {
+        settingsCache = null;
+        cacheTimestamp = 0;
+    }
+
+    function getCached() {
+        return settingsCache;
+    }
+
+    function finishInit() {
+        _initializing = false;
+    }
+
+    return {
+        load, save, saveMultiple, get,
+        clearCache, getCached, getAll: getCached, finishInit
+    };
+})();

hello_world/static/js/core/tabs.js

@@ -0,0 +1,88 @@
+// tabs.js - Tab navigation management
+
+(function() {
+    'use strict';
+
+    let currentTab = 'status';
+    const tabChangeCallbacks = [];
+
+    function getCurrentTab() {
+        return currentTab;
+    }
+
+    function switchTo(tabName, options = {}) {
+        const { saveToSettings = true, triggerCallbacks = true } = options;
+
+        const tabEl = document.querySelector(`.tab[data-tab="${tabName}"]`);
+        const contentEl = document.getElementById(tabName);
+
+        if (!tabEl || !contentEl) {
+            console.warn(`[Tabs] Tab "${tabName}" not found`);
+            return false;
+        }
+
+        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+        tabEl.classList.add('active');
+        contentEl.classList.add('active');
+
+        const previousTab = currentTab;
+        currentTab = tabName;
+
+        const event = new CustomEvent('tabchange', {
+            detail: { tab: tabName, previousTab }
+        });
+        document.dispatchEvent(event);
+
+        if (triggerCallbacks) {
+            tabChangeCallbacks.forEach(cb => {
+                try { cb(tabName, previousTab); } catch (e) { console.error('[Tabs] Callback error:', e); }
+            });
+        }
+
+        if (saveToSettings && window.ReachySettings) {
+            ReachySettings.save('last_active_tab', tabName, { silent: true });
+        }
+
+        return true;
+    }
+
+    function onTabChange(callback) {
+        if (typeof callback === 'function') {
+            tabChangeCallbacks.push(callback);
+            return () => {
+                const index = tabChangeCallbacks.indexOf(callback);
+                if (index > -1) tabChangeCallbacks.splice(index, 1);
+            };
+        }
+        return () => {};
+    }
+
+    async function restoreLastActiveTab() {
+        try {
+            const lastTab = window.ReachySettings ? await ReachySettings.get('last_active_tab') : null;
+            if (lastTab && lastTab !== 'status') {
+                switchTo(lastTab, { saveToSettings: false });
+                return lastTab;
+            }
+        } catch (e) {}
+        return null;
+    }
+
+    function init() {
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabName = tab.dataset.tab;
+                if (tabName && tabName !== currentTab) switchTo(tabName);
+            });
+        });
+
+        const activeTab = document.querySelector('.tab.active');
+        if (activeTab && activeTab.dataset.tab) currentTab = activeTab.dataset.tab;
+
+        console.log('[Tabs] Initialized with current tab:', currentTab);
+    }
+
+    window.ReachyTabs = { init, switchTo, getCurrentTab, onTabChange, restoreLastActiveTab };
+})();

hello_world/static/js/features/FloatingPanel.js

@@ -0,0 +1,375 @@
+// FloatingPanel.js - Encapsulates draggable, resizable, minimizable panel behavior
+// Now delegates to drag-utils.js for core drag/resize functionality
+
+class FloatingPanel {
+    // Static array to track all panels for z-index ordering
+    static allPanels = [];
+
+    /**
+     * Create a FloatingPanel instance
+     * @param {string} elementId - The ID of the panel element
+     * @param {Object} options - Configuration options
+     * @param {boolean} options.draggable - Enable drag behavior (default: true)
+     * @param {boolean} options.resizable - Enable resize behavior (default: false)
+     * @param {boolean} options.minimizable - Enable minimize behavior (default: true)
+     * @param {string} options.handleSelector - CSS selector for drag handle (default: '.floating-panel-header')
+     * @param {string} options.resizeHandleSelector - CSS selector for resize handle (default: '.floating-scale')
+     * @param {string} options.resizeTargetSelector - CSS selector for resize target (default: null, uses panel)
+     * @param {string[]} options.excludeSelectors - Selectors that should NOT trigger drag
+     * @param {boolean} options.constrainToViewport - Keep panel within viewport (default: true)
+     * @param {number} options.minWidth - Minimum width for resize (default: 200)
+     * @param {number} options.maxWidth - Maximum width for resize (default: 800)
+     * @param {boolean} options.maintainAspectRatio - Maintain aspect ratio during resize (default: true)
+     * @param {Function} options.onDragEnd - Callback when drag ends
+     * @param {Function} options.onResizeEnd - Callback when resize ends
+     * @param {Function} options.onMinimize - Callback when panel is minimized
+     * @param {Function} options.onRestore - Callback when panel is restored
+     * @param {string} options.storageKey - localStorage key for position persistence
+     */
+    constructor(elementId, options = {}) {
+        this.elementId = elementId;
+        this.element = document.getElementById(elementId);
+
+        if (!this.element) {
+            console.warn(`FloatingPanel: Element with id "${elementId}" not found`);
+            return;
+        }
+
+        // Default options
+        this.options = {
+            draggable: true,
+            resizable: false,
+            minimizable: true,
+            handleSelector: '.floating-panel-header',
+            resizeHandleSelector: '.floating-scale',
+            resizeTargetSelector: null,
+            excludeSelectors: ['.floating-close-btn', '.floating-minimize-btn'],
+            constrainToViewport: true,
+            minWidth: 200,
+            maxWidth: 800,
+            maintainAspectRatio: true,
+            onDragEnd: null,
+            onResizeEnd: null,
+            onMinimize: null,
+            onRestore: null,
+            storageKey: null,
+            ...options
+        };
+
+        // State
+        this.isMinimized = false;
+        this.savedPosition = null;
+        this._cleanupDrag = null;
+        this._cleanupResize = null;
+
+        // Initialize
+        this._init();
+
+        // Add to static panel list
+        FloatingPanel.allPanels.push(this);
+    }
+
+    /**
+     * Initialize the panel with configured behaviors
+     */
+    _init() {
+        if (this.options.draggable) {
+            this._makeDraggable();
+        }
+
+        if (this.options.resizable) {
+            this._makeResizable();
+        }
+
+        if (this.options.minimizable) {
+            this._setupMinimize();
+        }
+
+        // Bring to front on any click within the panel
+        this.element.addEventListener('mousedown', () => this.bringToFront());
+
+        // Restore saved position if storage key provided
+        if (this.options.storageKey) {
+            this.restorePosition();
+        }
+    }
+
+    /**
+     * Make the panel draggable by its header
+     * Delegates to ReachyDragUtils.makeDraggable
+     * @private
+     */
+    _makeDraggable() {
+        if (!window.ReachyDragUtils) {
+            console.warn('FloatingPanel: ReachyDragUtils not available');
+            return;
+        }
+
+        this._cleanupDrag = ReachyDragUtils.makeDraggable(this.element, {
+            handle: this.options.handleSelector,
+            excludeSelectors: this.options.excludeSelectors,
+            constrainToViewport: this.options.constrainToViewport,
+            bringToFront: true,
+            onDragEnd: this.options.onDragEnd
+        });
+    }
+
+    /**
+     * Make the panel resizable
+     * Delegates to ReachyDragUtils.makeResizable
+     * @private
+     */
+    _makeResizable() {
+        if (!window.ReachyDragUtils) {
+            console.warn('FloatingPanel: ReachyDragUtils not available');
+            return;
+        }
+
+        const resizeTarget = this.options.resizeTargetSelector
+            ? this.element.querySelector(this.options.resizeTargetSelector)
+            : this.element;
+
+        if (!resizeTarget) return;
+
+        const handle = this.element.querySelector(this.options.resizeHandleSelector);
+        if (!handle) return;
+
+        const initialWidth = resizeTarget.offsetWidth || 320;
+        const initialHeight = resizeTarget.offsetHeight || 240;
+
+        this._cleanupResize = ReachyDragUtils.makeResizable(resizeTarget, {
+            handle: handle,
+            minWidth: this.options.minWidth,
+            maxWidth: this.options.maxWidth,
+            aspectRatio: this.options.maintainAspectRatio ? (initialWidth / initialHeight) : null,
+            onResizeEnd: this.options.onResizeEnd
+        });
+    }
+
+    /**
+     * Setup minimize button handler
+     * @private
+     */
+    _setupMinimize() {
+        const minimizeBtn = this.element.querySelector('.floating-minimize-btn');
+        if (minimizeBtn) {
+            minimizeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.toggleMinimize();
+            });
+        }
+
+        // Clicking minimized panel header restores it
+        const header = this.element.querySelector(this.options.handleSelector);
+        if (header) {
+            header.addEventListener('click', () => {
+                if (this.isMinimized) {
+                    this.toggleMinimize();
+                }
+            });
+        }
+    }
+
+    /**
+     * Bring panel to top z-index
+     */
+    bringToFront() {
+        if (!this.element) return;
+        if (window.ReachyDragUtils) {
+            ReachyDragUtils.bringToFront(this.element);
+        }
+    }
+
+    /**
+     * Toggle minimize/restore state
+     */
+    toggleMinimize() {
+        if (!this.element) return;
+
+        if (!this.isMinimized) {
+            // Save current position before minimizing
+            this.savedPosition = {
+                top: this.element.style.top,
+                left: this.element.style.left,
+                right: this.element.style.right,
+                bottom: this.element.style.bottom
+            };
+            // Clear inline positioning so CSS .minimized { bottom: 8px } takes effect
+            this.element.style.top = '';
+            this.element.style.right = '';
+            this.element.style.bottom = '';
+            this.element.classList.add('minimized');
+            this.isMinimized = true;
+
+            if (this.options.onMinimize) {
+                this.options.onMinimize();
+            }
+        } else {
+            // Restore original position
+            this.element.classList.remove('minimized');
+            if (this.savedPosition) {
+                this.element.style.top = this.savedPosition.top;
+                this.element.style.left = this.savedPosition.left;
+                this.element.style.right = this.savedPosition.right;
+                this.element.style.bottom = this.savedPosition.bottom || '';
+            }
+            this.isMinimized = false;
+
+            if (this.options.onRestore) {
+                this.options.onRestore();
+            }
+        }
+
+        // Rearrange all minimized panels
+        FloatingPanel.arrangeMinimizedPanels();
+    }
+
+    /**
+     * Save position to localStorage
+     */
+    savePosition() {
+        if (!this.options.storageKey || !this.element) return;
+
+        const rect = this.element.getBoundingClientRect();
+        const data = {
+            x: Math.round(rect.left),
+            y: Math.round(rect.top)
+        };
+
+        // If resizable, also save dimensions
+        if (this.options.resizable) {
+            const target = this.options.resizeTargetSelector
+                ? this.element.querySelector(this.options.resizeTargetSelector)
+                : this.element;
+            if (target) {
+                data.width = target.offsetWidth;
+                data.height = target.offsetHeight;
+            }
+        }
+
+        try {
+            localStorage.setItem(this.options.storageKey, JSON.stringify(data));
+        } catch (e) {
+            console.warn('FloatingPanel: Failed to save position to localStorage', e);
+        }
+    }
+
+    /**
+     * Restore position from localStorage
+     */
+    restorePosition() {
+        if (!this.options.storageKey || !this.element) return;
+
+        try {
+            const stored = localStorage.getItem(this.options.storageKey);
+            if (!stored) return;
+
+            const data = JSON.parse(stored);
+
+            if (data.x !== undefined && data.y !== undefined) {
+                this.element.style.left = data.x + 'px';
+                this.element.style.top = data.y + 'px';
+                this.element.style.right = 'auto';
+                this.element.style.bottom = 'auto';
+            }
+
+            // Restore dimensions if resizable
+            if (this.options.resizable && data.width && data.height) {
+                const target = this.options.resizeTargetSelector
+                    ? this.element.querySelector(this.options.resizeTargetSelector)
+                    : this.element;
+                if (target) {
+                    target.style.width = data.width + 'px';
+                    target.style.height = data.height + 'px';
+                }
+            }
+        } catch (e) {
+            console.warn('FloatingPanel: Failed to restore position from localStorage', e);
+        }
+    }
+
+    /**
+     * Get current position
+     * @returns {Object} Position with x, y, width, height
+     */
+    getPosition() {
+        if (!this.element) return null;
+
+        const rect = this.element.getBoundingClientRect();
+        return {
+            x: Math.round(rect.left),
+            y: Math.round(rect.top),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height)
+        };
+    }
+
+    /**
+     * Set position programmatically
+     * @param {number} x - Left position
+     * @param {number} y - Top position
+     */
+    setPosition(x, y) {
+        if (!this.element) return;
+
+        this.element.style.left = x + 'px';
+        this.element.style.top = y + 'px';
+        this.element.style.right = 'auto';
+        this.element.style.bottom = 'auto';
+    }
+
+    /**
+     * Destroy the panel instance and remove event listeners
+     */
+    destroy() {
+        // Cleanup drag/resize handlers via drag-utils cleanup functions
+        if (this._cleanupDrag) {
+            this._cleanupDrag();
+            this._cleanupDrag = null;
+        }
+        if (this._cleanupResize) {
+            this._cleanupResize();
+            this._cleanupResize = null;
+        }
+
+        // Remove from static panel list
+        const index = FloatingPanel.allPanels.indexOf(this);
+        if (index > -1) {
+            FloatingPanel.allPanels.splice(index, 1);
+        }
+    }
+
+    /**
+     * Arrange all minimized panels left-to-right at bottom of screen
+     * @static
+     */
+    static arrangeMinimizedPanels() {
+        requestAnimationFrame(() => {
+            const minimized = document.querySelectorAll('.floating-panel.minimized');
+            let leftOffset = 8;
+            const gap = 8;
+
+            minimized.forEach(panel => {
+                panel.style.left = leftOffset + 'px';
+                leftOffset += panel.offsetWidth + gap;
+            });
+        });
+    }
+
+    /**
+     * Get a panel instance by element ID
+     * @static
+     * @param {string} elementId - The panel element ID
+     * @returns {FloatingPanel|null}
+     */
+    static getById(elementId) {
+        return FloatingPanel.allPanels.find(p => p.elementId === elementId) || null;
+    }
+}
+
+// Export for use as module or global
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = FloatingPanel;
+} else {
+    window.FloatingPanel = FloatingPanel;
+}

hello_world/static/js/features/assistant.js

@@ -0,0 +1,105 @@
+// assistant.js - Listener management (start/stop/status)
+// Controls the headless audio listener via /api/listener endpoints
+// Status updates come via /ws/transcribe (no polling)
+
+(function() {
+    'use strict';
+
+    let isRunning = false;
+
+    function init() {
+        const toggleBtn = document.getElementById('listenerToggle');
+        if (!toggleBtn) return;
+
+        toggleBtn.addEventListener('click', async () => {
+            if (isRunning) {
+                await stopListener();
+            } else {
+                await startListener();
+            }
+        });
+
+        // Audio routing selects
+        const audioInputSel = document.getElementById('audioInputSelect');
+        const audioOutputSel = document.getElementById('audioOutputSelect');
+
+        if (audioInputSel) {
+            audioInputSel.addEventListener('change', async () => {
+                await ReachySettings.save('audio_input', audioInputSel.value);
+                if (window.ReachyToast) ReachyToast.success('Audio Input', audioInputSel.value);
+            });
+        }
+        if (audioOutputSel) {
+            audioOutputSel.addEventListener('change', async () => {
+                await ReachySettings.save('audio_output', audioOutputSel.value);
+                if (window.ReachyToast) ReachyToast.success('Audio Output', audioOutputSel.value);
+            });
+        }
+
+        // Load current settings (one-time, no polling)
+        loadSettings();
+    }
+
+    async function loadSettings() {
+        try {
+            const settings = await ReachySettings.load();
+
+            const audioInputSel = document.getElementById('audioInputSelect');
+            const audioOutputSel = document.getElementById('audioOutputSelect');
+            if (audioInputSel) audioInputSel.value = settings.audio_input || 'robot';
+            if (audioOutputSel) audioOutputSel.value = settings.audio_output || 'robot';
+        } catch (e) {
+            console.error('Failed to load settings:', e);
+        }
+    }
+
+    async function startListener() {
+        try {
+            const resp = await fetch('/api/listener/start', { method: 'POST' });
+            const data = await resp.json();
+            if (data.status === 'started' || data.status === 'already_running') {
+                updateUI(true);
+                if (window.ReachyToast) ReachyToast.success('Listener', 'Started');
+            } else {
+                if (window.ReachyToast) ReachyToast.error('Listener', data.error || 'Failed to start');
+            }
+        } catch (e) {
+            if (window.ReachyToast) ReachyToast.error('Listener', e.message);
+        }
+    }
+
+    async function stopListener() {
+        try {
+            const resp = await fetch('/api/listener/stop', { method: 'POST' });
+            const data = await resp.json();
+            updateUI(false);
+            if (window.ReachyToast) ReachyToast.success('Listener', 'Stopped');
+        } catch (e) {
+            if (window.ReachyToast) ReachyToast.error('Listener', e.message);
+        }
+    }
+
+    function updateUI(running) {
+        isRunning = running;
+        const btn = document.getElementById('listenerToggle');
+        const dot = document.getElementById('listenerDot');
+        const label = document.getElementById('listenerLabel');
+
+        if (btn) {
+            btn.className = running ? 'mic-btn active' : 'mic-btn';
+            btn.title = running ? 'Stop listening' : 'Start listening';
+        }
+        if (dot) {
+            dot.className = running ? 'status-dot online' : 'status-dot offline';
+        }
+        if (label) {
+            label.textContent = running ? 'Listening' : 'Offline';
+        }
+    }
+
+    window.ReachyAssistant = {
+        init,
+        updateUI,
+        isRunning() { return isRunning; }
+    };
+})();

hello_world/static/js/features/llm-settings.js

@@ -0,0 +1,380 @@
+// llm-settings.js - API key entry + provider/model configuration UI
+// Manages the provider settings panel in the Conversation tab
+
+(function() {
+    'use strict';
+
+    let knownProviders = {};
+    let currentSettings = {};
+
+    async function init() {
+        await loadKnownProviders();
+        await loadCurrentSettings();
+        renderAPIKeys();
+        await refreshProviderDropdowns();
+        wireEvents();
+    }
+
+    async function loadKnownProviders() {
+        try {
+            const resp = await fetch('/api/conversation/known-providers');
+            knownProviders = await resp.json();
+        } catch (e) {
+            console.error('Failed to load providers:', e);
+        }
+    }
+
+    async function loadCurrentSettings() {
+        try {
+            currentSettings = await ReachySettings.load();
+        } catch (e) {
+            console.error('Failed to load settings:', e);
+        }
+    }
+
+    function renderAPIKeys() {
+        const container = document.getElementById('apiKeysContainer');
+        if (!container) return;
+
+        const apiKeys = currentSettings.api_keys || {};
+        const providers = Object.keys(knownProviders).sort();
+
+        container.innerHTML = providers.map(p => {
+            const hasKey = apiKeys[p] && apiKeys[p].length > 0;
+            const masked = hasKey ? '\u2022\u2022\u2022\u2022' + apiKeys[p].slice(-4) : '';
+            const caps = [];
+            if (knownProviders[p].llm) caps.push('LLM');
+            if (knownProviders[p].stt) caps.push('STT');
+            if (knownProviders[p].tts) caps.push('TTS');
+
+            return `
+                <div class="api-key-row">
+                    <div class="api-key-label">
+                        <span class="api-key-name">${p}</span>
+                        <span class="api-key-caps">${caps.join(' ')}</span>
+                    </div>
+                    <div class="api-key-input-group">
+                        <input type="password" id="apiKey_${p}"
+                            class="api-key-input"
+                            placeholder="${hasKey ? masked : 'Not configured'}"
+                            autocomplete="off">
+                        <button class="api-key-save-btn" data-provider="${p}"
+                            title="Save key">\u2714</button>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        // Wire save buttons
+        container.querySelectorAll('.api-key-save-btn').forEach(btn => {
+            btn.addEventListener('click', async () => {
+                const provider = btn.dataset.provider;
+                const input = document.getElementById(`apiKey_${provider}`);
+                if (!input) return;
+
+                const key = input.value.trim();
+                if (!key) return;
+
+                // Update api_keys in settings
+                const keys = { ...(currentSettings.api_keys || {}), [provider]: key };
+                await saveSetting('api_keys', keys);
+                currentSettings.api_keys = keys;
+                input.value = '';
+                input.placeholder = '\u2022\u2022\u2022\u2022' + key.slice(-4);
+
+                // Refresh dropdowns
+                await refreshProviderDropdowns();
+
+                if (window.ReachyToast) ReachyToast.success('API Key', `${provider} key saved`);
+            });
+        });
+    }
+
+    async function refreshProviderDropdowns() {
+        try {
+            const resp = await fetch('/api/conversation/providers');
+            const available = await resp.json();
+
+            populateSelect('sttProviderSelect', available.stt, currentSettings.stt_provider);
+            populateSelect('llmProviderSelect', available.llm, currentSettings.llm_provider);
+            populateSelect('vlmProviderSelect', available.vlm, currentSettings.vlm_provider);
+            populateSelect('ttsProviderSelect', available.tts, currentSettings.tts_provider);
+
+            // Load models for selected providers
+            if (currentSettings.stt_provider) await loadModels('stt');
+            if (currentSettings.llm_provider) await loadModels('llm');
+            if (currentSettings.vlm_provider) await loadModels('vlm');
+            if (currentSettings.tts_provider) {
+                await loadModels('tts');
+                await loadVoices();
+            }
+        } catch (e) {
+            console.error('Failed to refresh providers:', e);
+        }
+    }
+
+    function populateSelect(id, options, selected) {
+        const sel = document.getElementById(id);
+        if (!sel) return;
+
+        const current = sel.value || selected || '';
+        sel.innerHTML = '<option value="">-- Select --</option>' +
+            (options || []).map(p => `<option value="${p}"${p === current ? ' selected' : ''}>${p}</option>`).join('');
+
+        if (current && sel.value !== current) {
+            sel.value = current;
+        }
+    }
+
+    async function loadModels(capability) {
+        const providerSelId = `${capability}ProviderSelect`;
+        const modelSelId = `${capability}ModelSelect`;
+        const sel = document.getElementById(providerSelId);
+        const modelSel = document.getElementById(modelSelId);
+        if (!sel || !modelSel) return;
+
+        const provider = sel.value;
+        if (!provider) {
+            modelSel.innerHTML = '<option value="">--</option>';
+            return;
+        }
+
+        try {
+            // For LLM models, apply web search filter if enabled
+            let url = `/api/conversation/models?provider=${provider}&capability=${capability}`;
+            if (capability === 'llm') {
+                const wsFilter = document.getElementById('llmWebSearchFilter');
+                if (wsFilter && wsFilter.checked) {
+                    url += '&web_search=true';
+                }
+            }
+
+            const resp = await fetch(url);
+            const data = await resp.json();
+
+            const settingKey = `${capability}_model`;
+            const currentModel = currentSettings[settingKey] || '';
+
+            modelSel.innerHTML = (data.models || []).map(m =>
+                `<option value="${m}"${m === currentModel ? ' selected' : ''}>${m}</option>`
+            ).join('') || '<option value="">No models</option>';
+
+        } catch (e) {
+            console.error(`Failed to load ${capability} models:`, e);
+        }
+    }
+
+    async function loadVoices() {
+        const provider = document.getElementById('ttsProviderSelect')?.value;
+        const voiceSel = document.getElementById('ttsVoiceSelect');
+        if (!provider || !voiceSel) return;
+
+        try {
+            const model = document.getElementById('ttsModelSelect')?.value || '';
+            const resp = await fetch(`/api/conversation/voices?provider=${provider}&model=${model}`);
+            const data = await resp.json();
+            const voices = data.voices || [];
+            const currentVoice = currentSettings.tts_voice || '';
+
+            if (voices.length === 0) {
+                voiceSel.innerHTML = '<option value="">Default</option>';
+            } else {
+                // Voices are {id, name} objects — save id, display name
+                voiceSel.innerHTML = voices.map(v => {
+                    const id = v.id || v;
+                    const name = v.name || v;
+                    return `<option value="${id}"${id === currentVoice ? ' selected' : ''}>${name}</option>`;
+                }).join('');
+                // If current voice not in list, select first
+                const ids = voices.map(v => v.id || v);
+                if (!ids.includes(currentVoice)) {
+                    voiceSel.selectedIndex = 0;
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load voices:', e);
+        }
+    }
+
+    async function wireEvents() {
+        // Provider changes -> load models, auto-select first, save
+        ['stt', 'llm', 'vlm', 'tts'].forEach(cap => {
+            const sel = document.getElementById(`${cap}ProviderSelect`);
+            if (sel) {
+                sel.addEventListener('change', async () => {
+                    const provider = sel.value;
+                    await saveSetting(`${cap}_provider`, provider);
+                    currentSettings[`${cap}_provider`] = provider;
+
+                    // Clear stale model setting before loading new models
+                    currentSettings[`${cap}_model`] = '';
+
+                    await loadModels(cap);
+
+                    // Auto-select first model and save
+                    const modelSel = document.getElementById(`${cap}ModelSelect`);
+                    if (modelSel && modelSel.options.length > 0) {
+                        modelSel.selectedIndex = 0;
+                        const firstModel = modelSel.value;
+                        await saveSetting(`${cap}_model`, firstModel);
+                        currentSettings[`${cap}_model`] = firstModel;
+                    }
+
+                    // Cascade to voices for TTS
+                    if (cap === 'tts') {
+                        currentSettings.tts_voice = '';
+                        await loadVoices();
+                        const voiceSel = document.getElementById('ttsVoiceSelect');
+                        if (voiceSel && voiceSel.options.length > 0) {
+                            voiceSel.selectedIndex = 0;
+                            await saveSetting('tts_voice', voiceSel.value);
+                            currentSettings.tts_voice = voiceSel.value;
+                        }
+                    }
+
+                    if (window.ReachyToast) {
+                        const label = cap.toUpperCase();
+                        ReachyToast.success(label, provider ? `Provider: ${provider}` : 'Cleared');
+                    }
+                });
+            }
+
+            const modelSel = document.getElementById(`${cap}ModelSelect`);
+            if (modelSel) {
+                modelSel.addEventListener('change', async () => {
+                    await saveSetting(`${cap}_model`, modelSel.value);
+                    currentSettings[`${cap}_model`] = modelSel.value;
+                    // Reload voices when TTS model changes
+                    if (cap === 'tts') {
+                        currentSettings.tts_voice = '';
+                        await loadVoices();
+                        const voiceSel = document.getElementById('ttsVoiceSelect');
+                        if (voiceSel && voiceSel.options.length > 0) {
+                            voiceSel.selectedIndex = 0;
+                            await saveSetting('tts_voice', voiceSel.value);
+                            currentSettings.tts_voice = voiceSel.value;
+                        }
+                    }
+                    if (window.ReachyToast) ReachyToast.success(cap.toUpperCase(), `Model: ${modelSel.value}`);
+                });
+            }
+        });
+
+        // Voice select
+        const voiceSel = document.getElementById('ttsVoiceSelect');
+        if (voiceSel) {
+            voiceSel.addEventListener('change', async () => {
+                await saveSetting('tts_voice', voiceSel.value);
+                currentSettings.tts_voice = voiceSel.value;
+                if (window.ReachyToast) ReachyToast.success('TTS', `Voice: ${voiceSel.options[voiceSel.selectedIndex]?.text || voiceSel.value}`);
+            });
+        }
+
+        // Threshold sliders
+        ['conf', 'vol'].forEach(type => {
+            const slider = document.getElementById(`${type}Slider`);
+            const label = document.getElementById(`${type}SliderValue`);
+            if (slider && label) {
+                slider.value = currentSettings[`${type}_threshold`] || 0;
+                label.textContent = slider.value + '%';
+                slider.addEventListener('input', () => {
+                    label.textContent = slider.value + '%';
+                });
+                slider.addEventListener('change', async () => {
+                    await saveSetting(`${type}_threshold`, parseInt(slider.value));
+                    const name = type === 'conf' ? 'Confidence' : 'Volume';
+                    if (window.ReachyToast) ReachyToast.success('Threshold', `${name}: ${slider.value}%`);
+                });
+            }
+        });
+
+        // Mic gain
+        const gainSlider = document.getElementById('micGainSlider');
+        const gainLabel = document.getElementById('micGainValue');
+        if (gainSlider && gainLabel) {
+            gainSlider.value = currentSettings.mic_gain || 5.0;
+            gainLabel.textContent = parseFloat(gainSlider.value).toFixed(1) + 'x';
+            gainSlider.addEventListener('input', () => {
+                gainLabel.textContent = parseFloat(gainSlider.value).toFixed(1) + 'x';
+            });
+            gainSlider.addEventListener('change', async () => {
+                await saveSetting('mic_gain', parseFloat(gainSlider.value));
+                if (window.ReachyToast) ReachyToast.success('Mic Gain', `${parseFloat(gainSlider.value).toFixed(1)}x`);
+            });
+        }
+
+        // Web search model filter
+        const wsFilter = document.getElementById('llmWebSearchFilter');
+        const wsLabel = document.getElementById('llmWebSearchLabel');
+        if (wsFilter && wsLabel) {
+            wsFilter.addEventListener('change', async () => {
+                wsLabel.textContent = wsFilter.checked ? 'Web search models' : 'Show all';
+                // Reload LLM models with filter applied
+                await loadModels('llm');
+                // Auto-select first model
+                const modelSel = document.getElementById('llmModelSelect');
+                if (modelSel && modelSel.options.length > 0) {
+                    modelSel.selectedIndex = 0;
+                    await saveSetting('llm_model', modelSel.value);
+                    currentSettings.llm_model = modelSel.value;
+                }
+                if (window.ReachyToast) {
+                    ReachyToast.success('LLM', wsFilter.checked ? 'Web search models only' : 'All models');
+                }
+            });
+        }
+
+        // System prompt editor
+        const promptEditor = document.getElementById('systemPromptEditor');
+        const savePromptBtn = document.getElementById('savePromptBtn');
+        const resetPromptBtn = document.getElementById('resetPromptBtn');
+
+        if (promptEditor) {
+            // Load current: custom prompt if set, otherwise fetch default
+            const customPrompt = currentSettings.system_prompt || '';
+            if (customPrompt) {
+                promptEditor.value = customPrompt;
+            } else {
+                // Fetch the built-in default from the server
+                try {
+                    const resp = await fetch('/api/conversation/default-prompt');
+                    const data = await resp.json();
+                    promptEditor.value = data.prompt || '';
+                    promptEditor.placeholder = 'Edit the system prompt...';
+                } catch (e) {
+                    promptEditor.placeholder = 'Could not load default prompt';
+                }
+            }
+        }
+
+        if (savePromptBtn && promptEditor) {
+            savePromptBtn.addEventListener('click', async () => {
+                await saveSetting('system_prompt', promptEditor.value);
+                if (window.ReachyToast) ReachyToast.success('Prompt', 'System prompt saved');
+            });
+        }
+
+        if (resetPromptBtn && promptEditor) {
+            resetPromptBtn.addEventListener('click', async () => {
+                try {
+                    const resp = await fetch('/api/conversation/default-prompt');
+                    const data = await resp.json();
+                    promptEditor.value = data.prompt || '';
+                    await saveSetting('system_prompt', '');
+                    if (window.ReachyToast) ReachyToast.success('Prompt', 'Reset to default');
+                } catch (e) {
+                    if (window.ReachyToast) ReachyToast.error('Prompt', 'Failed to reset');
+                }
+            });
+        }
+    }
+
+    async function saveSetting(key, value) {
+        const ok = await ReachySettings.save(key, value);
+        if (!ok && window.ReachyToast) {
+            ReachyToast.error('Settings', `Failed to save ${key}`);
+        }
+    }
+
+    window.ReachyLLMSettings = { init };
+})();

hello_world/static/js/features/status-manager.js

@@ -0,0 +1,106 @@
+// status-manager.js - Centralized status tracking for pills, badges, and toasts
+
+(function() {
+    'use strict';
+
+    const INDICATOR_TO_PILL = {
+        'connectionIndicator': 'pillApp',
+        'daemonIndicator': 'pillAPI',
+        'serialIndicator': 'pillSerial',
+        'zenohIndicator': 'pillZenoh',
+        'throttleIndicator': 'pillThrottle',
+    };
+
+    const SERVICE_NAMES = {
+        'pillApp': 'App WebSocket',
+        'pillAPI': 'Daemon API',
+        'pillSerial': 'Serial Connection',
+        'pillZenoh': 'Zenoh',
+        'pillThrottle': 'Thermal Throttle',
+    };
+
+    const currentStates = {};
+    let initialized = false;
+
+    let _suppressToasts = true;
+    setTimeout(() => { _suppressToasts = false; }, 5000);
+
+    function init() {
+        if (initialized) return;
+        initialized = true;
+
+        const badge = document.getElementById('issuesBadge');
+        if (badge) {
+            badge.addEventListener('click', () => {
+                const statusTab = document.querySelector('[data-tab="status"]');
+                if (statusTab) statusTab.click();
+            });
+        }
+
+        Object.values(INDICATOR_TO_PILL).forEach(pillId => {
+            currentStates[pillId] = 'connecting';
+        });
+
+        window.ReachyStatus = {
+            updatePill,
+            updateFromIndicator,
+            getIssueCount,
+            refresh: updateIssueBadge,
+            enableToasts: () => { _suppressToasts = false; }
+        };
+    }
+
+    function updatePill(pillId, status, silent = false) {
+        const pill = document.getElementById(pillId);
+        if (!pill) return;
+
+        const prevStatus = currentStates[pillId];
+        currentStates[pillId] = status;
+
+        pill.classList.remove('connecting', 'active', 'error');
+        if (status === 'connecting' || status === 'active' || status === 'error') {
+            pill.classList.add(status);
+        }
+
+        if (!silent && !_suppressToasts && prevStatus !== status) {
+            const name = SERVICE_NAMES[pillId] || pillId;
+            if (status === 'error' && prevStatus !== 'error' && prevStatus !== 'connecting') {
+                if (window.ReachyToast) ReachyToast.error(`${name} disconnected`, 'Click badge to view status');
+            } else if (status === 'active' && prevStatus === 'error') {
+                if (window.ReachyToast) ReachyToast.success(`${name} connected`);
+            }
+        }
+
+        updateIssueBadge();
+    }
+
+    function updateFromIndicator(indicatorId, status) {
+        const pillId = INDICATOR_TO_PILL[indicatorId];
+        if (pillId) updatePill(pillId, status);
+    }
+
+    function getIssueCount() {
+        return Object.values(currentStates).filter(s => s === 'error').length;
+    }
+
+    function updateIssueBadge() {
+        const badge = document.getElementById('issuesBadge');
+        if (!badge) return;
+
+        const count = getIssueCount();
+        const countEl = badge.querySelector('.issues-count');
+
+        if (count > 0) {
+            badge.classList.remove('hidden');
+            if (countEl) countEl.textContent = count === 1 ? '1 issue' : `${count} issues`;
+        } else {
+            badge.classList.add('hidden');
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

hello_world/static/js/features/transcribe.js

@@ -0,0 +1,554 @@
+// transcribe.js - Conversation transcript UI + WebSocket
+// Connects to /ws/transcribe and renders live transcript table
+
+(function() {
+    'use strict';
+
+    let ws = null;
+    let connected = false;
+    let autoScroll = true;
+
+    function init() {
+        const container = document.getElementById('transcriptContainer');
+        if (!container) return;
+
+        // Auto-scroll detection
+        container.addEventListener('scroll', () => {
+            const atBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+            autoScroll = atBottom;
+        });
+
+        connect();
+    }
+
+    function connect() {
+        if (ws && ws.readyState <= 1) return; // Already connecting/open
+
+        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${proto}//${location.host}/ws/transcribe`);
+
+        ws.onopen = () => {
+            connected = true;
+            console.log('Transcribe WS connected');
+        };
+
+        ws.onmessage = (e) => {
+            try {
+                const data = JSON.parse(e.data);
+                handleMessage(data);
+            } catch (err) {
+                console.error('Transcribe parse error:', err);
+            }
+        };
+
+        ws.onclose = () => {
+            connected = false;
+            // Reconnect after 3s
+            setTimeout(connect, 3000);
+        };
+
+        ws.onerror = () => {
+            connected = false;
+        };
+    }
+
+    function handleMessage(data) {
+        const type = data.type;
+
+        if (type === 'transcription') {
+            addTranscriptionRow(data);
+        } else if (type === 'assistant_response') {
+            addResponseRow(data);
+        } else if (type === 'tool') {
+            addToolRow(data);
+        } else if (type === 'error') {
+            addErrorRow(data);
+        } else if (type === 'waveform') {
+            drawWaveform(data);
+        } else if (type === 'speaking_status') {
+            updateSpeakingStatus(data);
+        } else if (type === 'listener_status') {
+            // Route through ReachyAssistant (single source of truth for listener UI)
+            if (window.ReachyAssistant) ReachyAssistant.updateUI(data.running);
+        } else if (type === 'settings_changed') {
+            // Invalidate settings cache when another client changes settings
+            if (window.ReachySettings) ReachySettings.clearCache();
+        } else if (type === 'tts_audio') {
+            playTTSAudio(data);
+        } else if (data.is_claude || data.speaker) {
+            // Legacy format from transcript API
+            addResponseRow({
+                text: data.text,
+                source: data.speaker || 'LLM',
+                ignored: false
+            });
+        }
+    }
+
+    // ── Transcript rows ──────────────────────────────────────
+
+    function timeStr() {
+        const d = new Date();
+        return d.toLocaleTimeString('en-GB', { hour12: false });
+    }
+
+    function confColor(c) {
+        if (c >= 70) return 'var(--success)';
+        if (c >= 40) return 'var(--warning)';
+        return 'var(--error)';
+    }
+
+    function volColor(v) {
+        if (v >= 50) return 'var(--success)';
+        if (v >= 20) return 'var(--warning)';
+        return 'var(--error)';
+    }
+
+    function addTranscriptionRow(data) {
+        const tbody = document.getElementById('transcriptBody');
+        if (!tbody) return;
+
+        const filtered = data.below_threshold;
+        const tr = document.createElement('tr');
+        tr.className = `transcript-row user-row${filtered ? ' below-threshold' : ''}`;
+        tr.innerHTML = `
+            <td class="ts-time">${timeStr()}</td>
+            <td class="ts-conf" style="color:${confColor(data.confidence)}">${data.confidence}%</td>
+            <td class="ts-vol" style="color:${volColor(data.audio_level)}">${data.audio_level}%</td>
+            <td class="ts-msg"><span class="ts-speaker">You:</span> ${escapeHtml(data.text)}${filtered ? ' <span class="ts-filtered">(filtered)</span>' : ''}</td>
+        `;
+        tbody.appendChild(tr);
+
+        // Auto-remove filtered rows after 5s
+        if (filtered) {
+            setTimeout(() => {
+                tr.style.transition = 'opacity 0.5s';
+                tr.style.opacity = '0';
+                setTimeout(() => tr.remove(), 500);
+            }, 5000);
+        }
+
+        scrollToBottom();
+    }
+
+    function addResponseRow(data) {
+        const tbody = document.getElementById('transcriptBody');
+        if (!tbody) return;
+
+        const tr = document.createElement('tr');
+        const isIgnored = data.ignored;
+        tr.className = `transcript-row response-row${isIgnored ? ' ignored-row' : ''}`;
+
+        const source = data.source || 'LLM';
+        const text = data.text || (isIgnored ? '(ignored)' : '');
+
+        tr.innerHTML = `
+            <td class="ts-time">${timeStr()}</td>
+            <td class="ts-conf" colspan="2"><span class="ts-source">${escapeHtml(source)}</span></td>
+            <td class="ts-msg">${escapeHtml(text)}</td>
+        `;
+        tbody.appendChild(tr);
+
+        // Auto-remove ignored rows after 5s
+        if (isIgnored) {
+            setTimeout(() => {
+                tr.style.transition = 'opacity 0.5s';
+                tr.style.opacity = '0';
+                setTimeout(() => tr.remove(), 500);
+            }, 5000);
+        }
+
+        scrollToBottom();
+    }
+
+    // ── Friendly tool display ─────────────────────────────
+
+    const TOOL_DISPLAY = {
+        ignore:               { icon: '\uD83D\uDE36', label: 'Ignoring' },
+        play_emotion:         { icon: '\uD83C\uDFAD', label: 'Emotion' },
+        play_dance:           { icon: '\uD83D\uDC83', label: 'Dance' },
+        set_head_pose:        { icon: '\uD83D\uDDE3', label: 'Head move' },
+        take_snapshot:        { icon: '\uD83D\uDCF8', label: 'Snapshot' },
+        get_system_status:    { icon: '\uD83D\uDCCA', label: 'System check' },
+        get_date_time:        { icon: '\uD83D\uDD70', label: 'Clock' },
+        start_recording:      { icon: '\uD83C\uDFAC', label: 'Record video' },
+        stop_recording:       { icon: '\u23F9', label: 'Stop video' },
+        start_sound_recording:{ icon: '\uD83C\uDF99', label: 'Record audio' },
+        stop_sound_recording: { icon: '\u23F9', label: 'Stop audio' },
+        play_music:           { icon: '\uD83C\uDFB5', label: 'Play music' },
+        stop_music:           { icon: '\u23F9', label: 'Stop music' },
+        list_music:           { icon: '\uD83C\uDFB6', label: 'Music library' },
+    };
+
+    function formatToolArgs(tool, args) {
+        if (!args || Object.keys(args).length === 0) return '';
+        // Show the most meaningful value for known tools
+        if (tool === 'play_emotion' && args.emotion) return args.emotion;
+        if (tool === 'play_dance' && args.dance) return args.dance;
+        if (tool === 'ignore' && args.reason) return args.reason;
+        if (tool === 'set_head_pose') {
+            const parts = [];
+            if (args.yaw != null) parts.push(`yaw ${args.yaw}\u00B0`);
+            if (args.pitch != null) parts.push(`pitch ${args.pitch}\u00B0`);
+            if (args.roll != null) parts.push(`roll ${args.roll}\u00B0`);
+            return parts.join(', ');
+        }
+        if (tool === 'get_date_time' && args.format) return args.format;
+        // Fallback: show key=value pairs
+        return Object.entries(args).map(([k, v]) => `${k}: ${v}`).join(', ');
+    }
+
+    function formatToolResult(tool, result) {
+        if (!result) return '';
+        if (result.error) return `Error: ${result.error}`;
+
+        if (tool === 'get_system_status') {
+            const lines = [];
+            if (result.cpu_temp != null) lines.push(`CPU: ${result.cpu_temp}\u00B0C`);
+            if (result.cpu_cores) lines.push(`Cores: ${result.cpu_cores.map(c => c.toFixed(0) + '%').join(', ')}`);
+            if (result.memory_percent != null) lines.push(`RAM: ${result.memory_percent}% (${result.memory_used_mb || '?'}/${result.memory_total_mb || '?'} MB)`);
+            if (result.disk_local) lines.push(`Disk: ${result.disk_local.percent}%`);
+            if (result.wifi_ssid) lines.push(`WiFi: ${result.wifi_ssid} (${result.wifi_signal || '?'}%)`);
+            if (result.load_1m != null) lines.push(`Load: ${result.load_1m} / ${result.load_5m} / ${result.load_15m}`);
+            if (result.fan_rpm != null) lines.push(`Fan: ${result.fan_rpm} RPM`);
+            if (result.robot_uptime != null) {
+                const h = Math.floor(result.robot_uptime / 3600);
+                const m = Math.floor((result.robot_uptime % 3600) / 60);
+                lines.push(`Uptime: ${h}h ${m}m`);
+            }
+            return lines.join('\n');
+        }
+        if (tool === 'get_date_time' && result.date_time) return result.date_time;
+        if (tool === 'take_snapshot' && result.filename) return `Saved: ${result.filename}`;
+        if (tool === 'play_emotion' || tool === 'play_dance') {
+            if (result.success !== undefined) return result.success ? 'Playing' : 'Failed';
+            return JSON.stringify(result, null, 2);
+        }
+        if (tool === 'set_head_pose') return result.error ? result.error : 'Moved';
+        if (tool === 'ignore') return result.reason || 'Ignored';
+
+        return JSON.stringify(result, null, 2);
+    }
+
+    function addToolRow(data) {
+        const tbody = document.getElementById('transcriptBody');
+        if (!tbody) return;
+
+        const statusIcon = data.status === 'completed' ? '\u2705' :
+                          data.status === 'error' ? '\u274C' : '\u23F3';
+
+        // Update existing row in-place if this is a status update
+        const toolId = `tool-${data.tool}-${JSON.stringify(data.args || {})}`;
+        const existing = tbody.querySelector(`tr[data-tool-id="${CSS.escape(toolId)}"]`);
+        if (existing) {
+            existing.querySelector('.tool-status').textContent = statusIcon;
+            // Store result when completed
+            if (data.result) {
+                const detail = existing.querySelector('.tool-detail');
+                if (detail) {
+                    detail.textContent = formatToolResult(data.tool, data.result);
+                    existing.classList.add('tool-expandable');
+                }
+            }
+            return;
+        }
+
+        const display = TOOL_DISPLAY[data.tool] || { icon: '\u2699', label: data.tool };
+        const argStr = formatToolArgs(data.tool, data.args);
+        const hasResult = !!data.result;
+        const resultStr = hasResult ? formatToolResult(data.tool, data.result) : '';
+
+        const tr = document.createElement('tr');
+        tr.className = `transcript-row tool-row${hasResult ? ' tool-expandable' : ''}`;
+        tr.dataset.toolId = toolId;
+        tr.innerHTML = `
+            <td class="ts-time">${timeStr()}</td>
+            <td class="ts-conf tool-status" colspan="2">${statusIcon}</td>
+            <td class="ts-msg">
+                <div class="tool-summary">
+                    <span class="tool-icon">${display.icon}</span>
+                    <span class="tool-label">${escapeHtml(display.label)}</span>${argStr ? `<span class="tool-arg">${escapeHtml(argStr)}</span>` : ''}
+                    <span class="tool-chevron">\u25B6</span>
+                </div>
+                <pre class="tool-detail">${escapeHtml(resultStr)}</pre>
+            </td>
+        `;
+
+        // Toggle expand/collapse on click
+        tr.addEventListener('click', () => {
+            if (!tr.classList.contains('tool-expandable')) return;
+            tr.classList.toggle('tool-expanded');
+        });
+
+        tbody.appendChild(tr);
+        scrollToBottom();
+    }
+
+    function addErrorRow(data) {
+        const tbody = document.getElementById('transcriptBody');
+        if (!tbody) return;
+
+        const tr = document.createElement('tr');
+        tr.className = 'transcript-row error-row';
+        tr.innerHTML = `
+            <td class="ts-time">${timeStr()}</td>
+            <td class="ts-conf" colspan="2">\u26A0</td>
+            <td class="ts-msg ts-error">${escapeHtml(data.error || data.message || 'Unknown error')}</td>
+        `;
+        tbody.appendChild(tr);
+        scrollToBottom();
+    }
+
+    // ── Waveform visualization ───────────────────────────────
+
+    // Smooth previous samples for interpolation
+    let _prevSamples = null;
+
+    function drawWaveform(data) {
+        const canvas = document.getElementById('waveformCanvas');
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        const w = canvas.width = canvas.offsetWidth;
+        const h = canvas.height;
+        const samples = data.samples || [];
+        const isMuted = data.muted;
+
+        ctx.clearRect(0, 0, w, h);
+
+        if (samples.length === 0) { _prevSamples = null; return; }
+
+        // Lerp towards new samples for smooth animation
+        if (!_prevSamples || _prevSamples.length !== samples.length) {
+            _prevSamples = samples.slice();
+        } else {
+            for (let i = 0; i < samples.length; i++) {
+                _prevSamples[i] += (samples[i] - _prevSamples[i]) * 0.4;
+            }
+        }
+
+        const gap = 2;
+        const barW = Math.max(2, (w / _prevSamples.length) - gap);
+        const mid = h / 2;
+        const radius = Math.min(barW / 2, 3);
+
+        if (isMuted) {
+            // Muted: dim grey bars, no effects
+            ctx.fillStyle = 'rgba(128, 128, 128, 0.3)';
+            for (let i = 0; i < _prevSamples.length; i++) {
+                const x = i * (barW + gap);
+                ctx.beginPath();
+                ctx.roundRect(x, mid - 1, barW, 2, radius);
+                ctx.fill();
+            }
+            return;
+        }
+
+        // Compute overall energy for glow intensity
+        const energy = _prevSamples.reduce((a, b) => a + b, 0) / _prevSamples.length;
+
+        // Glow layer (blurred underpainting)
+        if (energy > 0.05) {
+            ctx.save();
+            ctx.filter = `blur(${4 + energy * 8}px)`;
+            ctx.globalAlpha = 0.4 + energy * 0.3;
+            for (let i = 0; i < _prevSamples.length; i++) {
+                const val = Math.min(1, _prevSamples[i]);
+                const barH = Math.max(1, val * mid);
+                const x = i * (barW + gap);
+                const hue = 180 + (val * 140); // cyan(180) -> magenta(320)
+                ctx.fillStyle = `hsl(${hue}, 100%, 60%)`;
+                ctx.fillRect(x, mid - barH, barW, barH * 2);
+            }
+            ctx.restore();
+        }
+
+        // Main bars with per-bar gradient
+        for (let i = 0; i < _prevSamples.length; i++) {
+            const val = Math.min(1, _prevSamples[i]);
+            const barH = Math.max(1, val * mid);
+            const x = i * (barW + gap);
+            const y = mid - barH;
+
+            // Hue shifts from cyan (low amplitude) through blue to magenta/pink (high)
+            const hue = 180 + (val * 140);
+            const sat = 85 + val * 15;
+            const light = 55 + val * 15;
+
+            const grad = ctx.createLinearGradient(x, y, x, mid + barH);
+            grad.addColorStop(0, `hsl(${hue + 20}, ${sat}%, ${light + 10}%)`);
+            grad.addColorStop(0.5, `hsl(${hue}, ${sat}%, ${light}%)`);
+            grad.addColorStop(1, `hsl(${hue + 20}, ${sat}%, ${light + 10}%)`);
+
+            ctx.fillStyle = grad;
+            ctx.beginPath();
+            ctx.roundRect(x, y, barW, barH * 2, radius);
+            ctx.fill();
+        }
+    }
+
+    // ── Speaking status ──────────────────────────────────────
+
+    function updateSpeakingStatus(data) {
+        const indicator = document.getElementById('speakingIndicator');
+        if (indicator) {
+            indicator.style.display = data.speaking ? '' : 'none';
+        }
+    }
+
+    // Listener status UI is handled by ReachyAssistant.updateUI() — no duplicate here
+
+    // ── TTS audio playback (browser speaker output) ──────────
+
+    let audioCtx = null;
+
+    function playTTSAudio(data) {
+        if (!data.audio) return;
+
+        if (!audioCtx) {
+            audioCtx = new AudioContext();
+        }
+
+        // Decode base64 WAV
+        const binaryStr = atob(data.audio);
+        const bytes = new Uint8Array(binaryStr.length);
+        for (let i = 0; i < binaryStr.length; i++) {
+            bytes[i] = binaryStr.charCodeAt(i);
+        }
+
+        audioCtx.decodeAudioData(bytes.buffer, (buffer) => {
+            const source = audioCtx.createBufferSource();
+            source.buffer = buffer;
+            source.connect(audioCtx.destination);
+            source.start(0);
+        }).catch(err => console.error('TTS decode error:', err));
+    }
+
+    // ── Text input ───────────────────────────────────────────
+
+    function initTextInput() {
+        const input = document.getElementById('conversationInput');
+        const btn = document.getElementById('conversationSend');
+        if (!input || !btn) return;
+
+        async function send() {
+            const text = input.value.trim();
+            if (!text) return;
+            input.value = '';
+
+            // Add to transcript immediately
+            addTranscriptionRow({
+                text: text,
+                confidence: 100,
+                audio_level: 0,
+                source: 'typed'
+            });
+
+            try {
+                const resp = await fetch('/api/conversation/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        text: text,
+                        session_id: 'browser',
+                        speak: true,
+                        confidence: 100,
+                        volume: 100
+                    })
+                });
+                // Response will come via WebSocket broadcast
+            } catch (e) {
+                addErrorRow({ error: e.message });
+            }
+        }
+
+        btn.addEventListener('click', send);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') send();
+        });
+    }
+
+    // ── Transcript toolbar actions ─────────────────────────
+
+    function initToolbar() {
+        const clearBtn = document.getElementById('clearTranscriptBtn');
+        const exportBtn = document.getElementById('exportTranscriptBtn');
+        const resetBtn = document.getElementById('resetSessionBtn');
+
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                const tbody = document.getElementById('transcriptBody');
+                if (tbody) tbody.innerHTML = '';
+            });
+        }
+
+        if (exportBtn) {
+            exportBtn.addEventListener('click', () => {
+                const tbody = document.getElementById('transcriptBody');
+                if (!tbody) return;
+                const rows = tbody.querySelectorAll('tr');
+                const lines = [];
+                rows.forEach(tr => {
+                    const time = tr.querySelector('.ts-time')?.textContent || '';
+                    const msg = tr.querySelector('.ts-msg')?.textContent || '';
+                    lines.push(`[${time}] ${msg.trim()}`);
+                });
+                const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
+                const a = document.createElement('a');
+                a.href = URL.createObjectURL(blob);
+                a.download = `transcript-${new Date().toISOString().slice(0,10)}.txt`;
+                a.click();
+                URL.revokeObjectURL(a.href);
+            });
+        }
+
+        if (resetBtn) {
+            resetBtn.addEventListener('click', async () => {
+                try {
+                    await fetch('/api/conversation/reset', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ session_id: 'browser' })
+                    });
+                    // Also clear the transcript display
+                    const tbody = document.getElementById('transcriptBody');
+                    if (tbody) tbody.innerHTML = '';
+                    if (window.ReachyToast) ReachyToast.success('Session', 'Conversation reset');
+                } catch (e) {
+                    if (window.ReachyToast) ReachyToast.error('Session', 'Reset failed');
+                }
+            });
+        }
+    }
+
+    // ── Helpers ──────────────────────────────────────────────
+
+    function scrollToBottom() {
+        if (!autoScroll) return;
+        const container = document.getElementById('transcriptContainer');
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+        }
+    }
+
+    function escapeHtml(str) {
+        if (!str) return '';
+        return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+
+    // ── Public API ──────────────────────────────────────────
+
+    window.ReachyTranscribe = {
+        init() {
+            init();
+            initTextInput();
+            initToolbar();
+        },
+        connect,
+        isConnected() { return connected; }
+    };
+})();

hello_world/static/js/intercom-processor.js

@@ -0,0 +1,41 @@
+// AudioWorklet processor for intercom - resamples audio to 16kHz and sends via port
+class IntercomProcessor extends AudioWorkletProcessor {
+    constructor(options) {
+        super();
+        this.targetSampleRate = 16000;
+        this.nativeSampleRate = options.processorOptions?.sampleRate || 48000;
+        this.resampleRatio = this.nativeSampleRate / this.targetSampleRate;
+        this.gain = options.processorOptions?.gain || 5.0;
+        this.buffer = [];
+        this.bufferSize = 4096; // Send chunks of this size
+    }
+
+    process(inputs, outputs, parameters) {
+        const input = inputs[0];
+        if (!input || !input[0]) return true;
+
+        const inputData = input[0];
+
+        // Downsample and convert to int16
+        for (let i = 0; i < inputData.length; i += this.resampleRatio) {
+            const srcIdx = Math.floor(i);
+            const adjusted = inputData[srcIdx] * this.gain;
+            const sample = Math.max(-32768, Math.min(32767, Math.round(adjusted * 32768)));
+            this.buffer.push(sample);
+        }
+
+        // Send buffer when full
+        if (this.buffer.length >= this.bufferSize) {
+            const chunk = this.buffer.splice(0, this.bufferSize);
+            const int16Array = new Int16Array(chunk);
+            this.port.postMessage({
+                type: 'audio',
+                data: int16Array.buffer
+            }, [int16Array.buffer]);
+        }
+
+        return true;
+    }
+}
+
+registerProcessor('intercom-processor', IntercomProcessor);

hello_world/static/js/kinematics-wasm/reachy_mini_kinematics_wasm.js

@@ -0,0 +1,166 @@
+let wasm;
+
+function getArrayF64FromWasm0(ptr, len) {
+  ptr = ptr >>> 0;
+  return getFloat64ArrayMemory0().subarray(ptr / 8, ptr / 8 + len);
+}
+
+let cachedFloat64ArrayMemory0 = null;
+function getFloat64ArrayMemory0() {
+  if (cachedFloat64ArrayMemory0 === null || cachedFloat64ArrayMemory0.byteLength === 0) {
+    cachedFloat64ArrayMemory0 = new Float64Array(wasm.memory.buffer);
+  }
+  return cachedFloat64ArrayMemory0;
+}
+
+function passArrayF64ToWasm0(arg, malloc) {
+  const ptr = malloc(arg.length * 8, 8) >>> 0;
+  getFloat64ArrayMemory0().set(arg, ptr / 8);
+  WASM_VECTOR_LEN = arg.length;
+  return ptr;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+/**
+ * Calculate passive joint angles from head joints and head pose
+ *
+ * # Arguments
+ * * `head_joints` - Array of 7 floats: [yaw_body, stewart_1, ..., stewart_6]
+ * * `head_pose` - 4x4 transformation matrix as 16 floats (row-major)
+ *
+ * # Returns
+ * Array of 21 floats: passive joint angles [p1_x, p1_y, p1_z, ..., p7_x, p7_y, p7_z]
+ * @param {Float64Array} head_joints
+ * @param {Float64Array} head_pose
+ * @returns {Float64Array}
+ */
+export function calculate_passive_joints(head_joints, head_pose) {
+  const ptr0 = passArrayF64ToWasm0(head_joints, wasm.__wbindgen_malloc);
+  const len0 = WASM_VECTOR_LEN;
+  const ptr1 = passArrayF64ToWasm0(head_pose, wasm.__wbindgen_malloc);
+  const len1 = WASM_VECTOR_LEN;
+  const ret = wasm.calculate_passive_joints(ptr0, len0, ptr1, len1);
+  const v3 = getArrayF64FromWasm0(ret[0], ret[1]).slice();
+  wasm.__wbindgen_free(ret[0], ret[1] * 8, 8);
+  return v3;
+}
+
+/**
+ * Initialize the WASM module
+ */
+export function init() {
+  wasm.init();
+}
+
+const EXPECTED_RESPONSE_TYPES = new Set(['basic', 'cors', 'default']);
+
+async function __wbg_load(module, imports) {
+  if (typeof Response === 'function' && module instanceof Response) {
+    if (typeof WebAssembly.instantiateStreaming === 'function') {
+      try {
+        return await WebAssembly.instantiateStreaming(module, imports);
+      } catch (e) {
+        const validResponse = module.ok && EXPECTED_RESPONSE_TYPES.has(module.type);
+
+        if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+          console.warn(
+            '`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n',
+            e
+          );
+        } else {
+          throw e;
+        }
+      }
+    }
+
+    const bytes = await module.arrayBuffer();
+    return await WebAssembly.instantiate(bytes, imports);
+  } else {
+    const instance = await WebAssembly.instantiate(module, imports);
+
+    if (instance instanceof WebAssembly.Instance) {
+      return { instance, module };
+    } else {
+      return instance;
+    }
+  }
+}
+
+function __wbg_get_imports() {
+  const imports = {};
+  imports.wbg = {};
+  imports.wbg.__wbindgen_init_externref_table = function () {
+    const table = wasm.__wbindgen_externrefs;
+    const offset = table.grow(4);
+    table.set(0, undefined);
+    table.set(offset + 0, undefined);
+    table.set(offset + 1, null);
+    table.set(offset + 2, true);
+    table.set(offset + 3, false);
+  };
+
+  return imports;
+}
+
+function __wbg_finalize_init(instance, module) {
+  wasm = instance.exports;
+  __wbg_init.__wbindgen_wasm_module = module;
+  cachedFloat64ArrayMemory0 = null;
+
+  wasm.__wbindgen_start();
+  return wasm;
+}
+
+function initSync(module) {
+  if (wasm !== undefined) return wasm;
+
+  if (typeof module !== 'undefined') {
+    if (Object.getPrototypeOf(module) === Object.prototype) {
+      ({ module } = module);
+    } else {
+      console.warn('using deprecated parameters for `initSync()`; pass a single object instead');
+    }
+  }
+
+  const imports = __wbg_get_imports();
+  if (!(module instanceof WebAssembly.Module)) {
+    module = new WebAssembly.Module(module);
+  }
+  const instance = new WebAssembly.Instance(module, imports);
+  return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+  if (wasm !== undefined) return wasm;
+
+  if (typeof module_or_path !== 'undefined') {
+    if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+      ({ module_or_path } = module_or_path);
+    } else {
+      console.warn(
+        'using deprecated parameters for the initialization function; pass a single object instead'
+      );
+    }
+  }
+
+  if (typeof module_or_path === 'undefined') {
+    module_or_path = new URL('reachy_mini_kinematics_wasm_bg.wasm', import.meta.url);
+  }
+  const imports = __wbg_get_imports();
+
+  if (
+    typeof module_or_path === 'string' ||
+    (typeof Request === 'function' && module_or_path instanceof Request) ||
+    (typeof URL === 'function' && module_or_path instanceof URL)
+  ) {
+    module_or_path = fetch(module_or_path);
+  }
+
+  const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+  return __wbg_finalize_init(instance, module);
+}
+
+export { initSync };
+export default __wbg_init;

hello_world/static/js/kinematics-wasm/reachy_mini_kinematics_wasm_bg.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b59884521f9a0bee4da460e17463ea0e0ea46d413db9ad77b8fd79bd52e7b15f
+size 30292

hello_world/static/js/media/webrtc.js

@@ -0,0 +1,282 @@
+// webrtc.js - Camera streaming via WebRTC with auto-reconnection
+// Simplified for floating camera panel (no audio controls, no settings UI)
+
+(function() {
+    const DAEMON_API = window.ReachyApp?.DAEMON_API || `http://${window.location.hostname}:8000`;
+
+    let webrtcApi = null;
+    let webrtcSession = null;
+    let webrtcProducerId = null;
+    let videoEnabled = false;
+    let videoPausedByVisibility = false;
+
+    // Reconnection state
+    let reconnectAttempts = 0;
+    let reconnectTimer = null;
+    let isReconnecting = false;
+    const MAX_RECONNECT_DELAY = 30000;
+    const BASE_RECONNECT_DELAY = 1000;
+
+    // Page Visibility API - pause video when tab is hidden
+    function initVisibilityHandler() {
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden && videoEnabled && webrtcSession) {
+                console.log('WebRTC: Tab hidden, pausing stream');
+                videoPausedByVisibility = true;
+                stopWebRTCStream();
+            } else if (!document.hidden && videoPausedByVisibility) {
+                console.log('WebRTC: Tab visible, resuming stream');
+                videoPausedByVisibility = false;
+                videoEnabled = true;
+                startWebRTCStream();
+            }
+        });
+    }
+
+    function getReconnectDelay() {
+        return Math.min(BASE_RECONNECT_DELAY * Math.pow(2, reconnectAttempts), MAX_RECONNECT_DELAY);
+    }
+
+    function resetReconnection() {
+        reconnectAttempts = 0;
+        isReconnecting = false;
+        if (reconnectTimer) {
+            clearTimeout(reconnectTimer);
+            reconnectTimer = null;
+        }
+    }
+
+    function scheduleReconnect(reason) {
+        if (!videoEnabled || isReconnecting) return;
+
+        isReconnecting = true;
+        const delay = getReconnectDelay();
+        reconnectAttempts++;
+
+        console.log(`WebRTC: ${reason}. Reconnecting in ${delay/1000}s (attempt ${reconnectAttempts})`);
+
+        const statusDot = document.getElementById('camStatusDot');
+        if (statusDot) statusDot.style.background = '#eab308';
+
+        reconnectTimer = setTimeout(() => {
+            isReconnecting = false;
+            if (videoEnabled) {
+                if (webrtcApi) {
+                    try { webrtcApi.close?.(); } catch (e) {}
+                    webrtcApi = null;
+                }
+                webrtcProducerId = null;
+                startWebRTCStream();
+            }
+        }, delay);
+    }
+
+    // Load GstWebRTC API script from daemon
+    function loadWebRTCApi() {
+        if (document.getElementById('gstwebrtc-script')) return;
+        const script = document.createElement('script');
+        script.id = 'gstwebrtc-script';
+        script.src = `${DAEMON_API}/static/js/3rdparty/gstwebrtc-api-2.0.0.min.js`;
+        script.onload = () => console.log('GstWebRTC API loaded');
+        script.onerror = () => console.error('Failed to load GstWebRTC API');
+        document.head.appendChild(script);
+    }
+
+    function enableStream() {
+        if (videoEnabled) return;
+        videoEnabled = true;
+        resetReconnection();
+        startWebRTCStream();
+    }
+
+    function disableStream() {
+        if (!videoEnabled) return;
+        videoEnabled = false;
+        resetReconnection();
+        stopWebRTCStream();
+        const statusDot = document.getElementById('camStatusDot');
+        if (statusDot) statusDot.style.background = 'transparent';
+    }
+
+    function startWebRTCStream() {
+        const videoFeed = document.getElementById('videoFeed');
+        const placeholder = document.getElementById('videoPlaceholder');
+        const statusDot = document.getElementById('camStatusDot');
+
+        if (typeof GstWebRTCAPI === 'undefined') {
+            if (statusDot) statusDot.style.background = '#ef4444';
+            console.warn('GstWebRTCAPI not loaded');
+            scheduleReconnect('API not loaded');
+            return;
+        }
+
+        if (statusDot) statusDot.style.background = '#eab308';
+
+        if (!webrtcApi) {
+            const signalingUrl = `ws://${window.location.hostname}:8443`;
+            console.log('Connecting to WebRTC signaling:', signalingUrl);
+
+            try {
+                webrtcApi = new GstWebRTCAPI({
+                    meta: { name: `hello-world-${Date.now()}` },
+                    signalingServerUrl: signalingUrl
+                });
+            } catch (e) {
+                console.error('Failed to create GstWebRTCAPI:', e);
+                if (statusDot) statusDot.style.background = '#ef4444';
+                scheduleReconnect('API creation failed');
+                return;
+            }
+
+            let attempts = 0;
+            const pollForProducers = () => {
+                if (!videoEnabled) return;
+
+                attempts++;
+                try {
+                    const producers = webrtcApi.getAvailableProducers();
+                    console.log(`WebRTC poll #${attempts}: ${producers.length} producers`);
+
+                    for (const producer of producers) {
+                        if (producer.meta?.name === 'reachymini') {
+                            webrtcProducerId = producer.id;
+                            resetReconnection();
+                            connectToProducer(producer.id);
+                            return;
+                        }
+                    }
+
+                    if (attempts < 30) {
+                        setTimeout(pollForProducers, 500);
+                    } else {
+                        console.warn('WebRTC: No stream found after 30 attempts');
+                        if (statusDot) statusDot.style.background = '#ef4444';
+                        scheduleReconnect('No stream found');
+                    }
+                } catch (e) {
+                    if (attempts < 30) {
+                        setTimeout(pollForProducers, 500);
+                    } else {
+                        console.warn('WebRTC: Failed after 30 attempts');
+                        if (statusDot) statusDot.style.background = '#ef4444';
+                        scheduleReconnect('Polling failed');
+                    }
+                }
+            };
+            setTimeout(pollForProducers, 500);
+        } else if (webrtcProducerId && !webrtcSession) {
+            connectToProducer(webrtcProducerId);
+        } else if (!webrtcProducerId) {
+            const producers = webrtcApi.getAvailableProducers();
+            for (const producer of producers) {
+                if (producer.meta?.name === 'reachymini') {
+                    webrtcProducerId = producer.id;
+                    connectToProducer(producer.id);
+                    return;
+                }
+            }
+            scheduleReconnect('No producer available');
+        }
+    }
+
+    function connectToProducer(producerId) {
+        const videoFeed = document.getElementById('videoFeed');
+        const placeholder = document.getElementById('videoPlaceholder');
+        const statusDot = document.getElementById('camStatusDot');
+
+        console.log('Connecting to producer:', producerId);
+
+        try {
+            webrtcSession = webrtcApi.createConsumerSession(producerId);
+        } catch (e) {
+            console.error('Failed to create consumer session:', e);
+            if (statusDot) statusDot.style.background = '#ef4444';
+            scheduleReconnect('Session creation failed');
+            return;
+        }
+
+        webrtcSession.addEventListener('error', (e) => {
+            console.error('WebRTC session error:', e);
+            if (statusDot) statusDot.style.background = '#ef4444';
+            webrtcSession = null;
+            scheduleReconnect('Session error');
+        });
+
+        webrtcSession.addEventListener('closed', () => {
+            console.log('WebRTC session closed');
+            webrtcSession = null;
+            if (videoEnabled) {
+                scheduleReconnect('Session closed');
+            }
+        });
+
+        webrtcSession.addEventListener('streamsChanged', () => {
+            const streams = webrtcSession.streams;
+            console.log('Streams received:', streams?.length);
+            if (streams && streams.length > 0) {
+                if (videoFeed) {
+                    videoFeed.srcObject = streams[0];
+                    videoFeed.classList.add('active');
+                }
+                if (placeholder) placeholder.classList.add('hidden');
+                if (statusDot) statusDot.style.background = '#22c55e';
+                resetReconnection();
+            }
+        });
+
+        webrtcSession.connect();
+    }
+
+    function stopWebRTCStream() {
+        const videoFeed = document.getElementById('videoFeed');
+        const placeholder = document.getElementById('videoPlaceholder');
+
+        resetReconnection();
+
+        if (webrtcSession) {
+            webrtcSession.close();
+            webrtcSession = null;
+        }
+
+        if (webrtcApi) {
+            try { webrtcApi.close(); } catch (e) {}
+            webrtcApi = null;
+            webrtcProducerId = null;
+        }
+
+        if (videoFeed) {
+            videoFeed.srcObject = null;
+            videoFeed.classList.remove('active');
+        }
+        if (placeholder) {
+            placeholder.classList.remove('hidden');
+        }
+
+        console.log('WebRTC: Stream fully stopped');
+    }
+
+    // Client-side snapshot from video element (quick local save)
+    function takeSnapshot() {
+        const videoFeed = document.getElementById('videoFeed');
+        if (!videoFeed || !videoFeed.srcObject) return null;
+
+        const canvas = document.createElement('canvas');
+        canvas.width = videoFeed.videoWidth;
+        canvas.height = videoFeed.videoHeight;
+        canvas.getContext('2d').drawImage(videoFeed, 0, 0);
+        return canvas.toDataURL('image/jpeg', 0.9);
+    }
+
+    function init() {
+        loadWebRTCApi();
+        initVisibilityHandler();
+    }
+
+    window.ReachyWebRTC = {
+        init,
+        enableStream,
+        disableStream,
+        isEnabled: () => videoEnabled,
+        takeSnapshot
+    };
+})();

hello_world/static/js/simulation.js

@@ -0,0 +1,456 @@
+// simulation.js - URDF + Three.js robot simulation with PBR rendering
+// Replaces MuJoCo WASM approach with URDF loader + kinematics-wasm for passive joints
+
+(function() {
+    'use strict';
+
+    // === Module State ===
+    let THREE;
+    let scene, camera, renderer, controls, composer;
+    let robot = null;
+    let kinematicsWasm = null;
+    let isInitialized = false;
+    let initPromise = null;
+    let animationId = null;
+
+    // Target state from WebSocket (all in radians internally)
+    const state = {
+        headJoints: new Float64Array(7),      // [bodyYaw, s1..s6]
+        headPoseMatrix: new Float64Array(16),  // 4x4 row-major
+        antennas: [0, 0],                      // [right, left]
+        passiveJoints: null,                   // Float64Array(21) from WASM
+    };
+
+    const DEG2RAD = Math.PI / 180;
+
+    // Passive joint names matching WASM output order (7 joints x 3 axes)
+    const PASSIVE_NAMES = [];
+    for (let i = 1; i <= 7; i++) {
+        PASSIVE_NAMES.push(`passive_${i}_x`, `passive_${i}_y`, `passive_${i}_z`);
+    }
+
+    // === Head Pose Matrix Builder ===
+    // Builds 4x4 row-major matrix from position + euler angles (intrinsic XYZ)
+    // Matches scipy R.from_euler('xyz', [roll, pitch, yaw])
+    function buildPoseMatrix(x, y, z, roll, pitch, yaw) {
+        const cr = Math.cos(roll), sr = Math.sin(roll);
+        const cp = Math.cos(pitch), sp = Math.sin(pitch);
+        const cy = Math.cos(yaw), sy = Math.sin(yaw);
+        // R = Rz(yaw) * Ry(pitch) * Rx(roll)
+        return new Float64Array([
+            cp * cy, cy * sr * sp - cr * sy, cr * cy * sp + sr * sy, x,
+            cp * sy, cr * cy + sr * sp * sy, cr * sp * sy - cy * sr, y,
+            -sp,     cp * sr,                cr * cp,                z,
+            0,       0,                      0,                      1,
+        ]);
+    }
+
+    // === Initialization ===
+    async function init(containerId) {
+        if (isInitialized) return;
+        if (initPromise) return initPromise;
+
+        const container = document.getElementById(containerId);
+        if (!container) return;
+
+        initPromise = (async () => {
+            try {
+                console.log('Simulation: Loading modules...');
+
+                // Import Three.js + addons
+                THREE = await import('three');
+                const { OrbitControls } = await import('three/addons/controls/OrbitControls.js');
+                const { STLLoader } = await import('three/addons/loaders/STLLoader.js');
+                const { mergeVertices } = await import('three/addons/utils/BufferGeometryUtils.js');
+                const { EffectComposer } = await import('three/addons/postprocessing/EffectComposer.js');
+                const { RenderPass } = await import('three/addons/postprocessing/RenderPass.js');
+                const { UnrealBloomPass } = await import('three/addons/postprocessing/UnrealBloomPass.js');
+                const { SMAAPass } = await import('three/addons/postprocessing/SMAAPass.js');
+                const URDFLoaderModule = await import('urdf-loader');
+                const URDFLoader = URDFLoaderModule.default;
+
+                // Load kinematics WASM (official Pollen Robotics build)
+                try {
+                    const kinModule = await import('/static/js/kinematics-wasm/reachy_mini_kinematics_wasm.js');
+                    await kinModule.default();
+                    kinModule.init();
+                    kinematicsWasm = kinModule;
+                    console.log('Simulation: Kinematics WASM loaded');
+                } catch (e) {
+                    console.warn('Simulation: Kinematics WASM unavailable, passive joints disabled:', e);
+                }
+
+                // Scene
+                setupScene(container);
+                setupLighting();
+                setupGround();
+
+                // Controls
+                controls = new OrbitControls(camera, renderer.domElement);
+                controls.target.set(0, 0.22, 0);
+                controls.enableDamping = true;
+                controls.dampingFactor = 0.05;
+                controls.zoomSpeed = 2.0;
+                controls.minDistance = 0.15;
+                controls.maxDistance = 2.0;
+                controls.maxPolarAngle = Math.PI * 0.85;
+                controls.update();
+
+                // Post-processing
+                setupPostProcessing(EffectComposer, RenderPass, UnrealBloomPass, SMAAPass, container);
+
+                // Load robot URDF
+                await loadRobot(URDFLoader, STLLoader, mergeVertices);
+
+                window.addEventListener('resize', onWindowResize);
+                isInitialized = true;
+                animate();
+                console.log('Simulation: Ready');
+
+            } catch (error) {
+                console.error('Simulation: Init failed:', error);
+            }
+        })();
+
+        return initPromise;
+    }
+
+    // === Scene Setup ===
+    function createGradientTexture() {
+        const canvas = document.createElement('canvas');
+        canvas.width = 2;
+        canvas.height = 512;
+        const ctx = canvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, 0, 512);
+        gradient.addColorStop(0.0, '#1a3a5c');   // deep blue (top)
+        gradient.addColorStop(0.4, '#2a5a8c');   // mid blue
+        gradient.addColorStop(0.7, '#1e3454');   // darker blue
+        gradient.addColorStop(1.0, '#0e1a2e');   // near-black (bottom/horizon)
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 2, 512);
+        const tex = new THREE.CanvasTexture(canvas);
+        tex.mapping = THREE.EquirectangularReflectionMapping;
+        return tex;
+    }
+
+    function setupScene(container) {
+        scene = new THREE.Scene();
+        scene.background = createGradientTexture();
+
+        const w = container.clientWidth || 800;
+        const h = container.clientHeight || 400;
+        camera = new THREE.PerspectiveCamera(50, w / h, 0.01, 100);
+        camera.position.set(0.18, 0.30, 0.38);
+
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(w, h);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 1.6;
+        renderer.outputColorSpace = THREE.SRGBColorSpace;
+        container.appendChild(renderer.domElement);
+    }
+
+    function setupLighting() {
+        // Ambient fill
+        scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+
+        // Key light (warm, with shadows)
+        const key = new THREE.DirectionalLight(0xfff5e6, 2.0);
+        key.position.set(2, 4, 3);
+        key.castShadow = true;
+        key.shadow.mapSize.set(2048, 2048);
+        key.shadow.camera.near = 0.1;
+        key.shadow.camera.far = 10;
+        key.shadow.camera.left = -1;
+        key.shadow.camera.right = 1;
+        key.shadow.camera.top = 1;
+        key.shadow.camera.bottom = -1;
+        key.shadow.bias = -0.0001;
+        scene.add(key);
+
+        // Fill light (cool blue)
+        const fill = new THREE.DirectionalLight(0xb0c4ff, 0.9);
+        fill.position.set(-3, 2, -1);
+        scene.add(fill);
+
+        // Rim light (back highlight)
+        const rim = new THREE.DirectionalLight(0xffffff, 0.7);
+        rim.position.set(0, 1, -3);
+        scene.add(rim);
+
+        // Hemisphere (sky/ground ambient)
+        scene.add(new THREE.HemisphereLight(0x87ceeb, 0x362d28, 0.5));
+    }
+
+    function setupGround() {
+        // Subtle shadow-catching ground plane
+        const geo = new THREE.CircleGeometry(0.5, 64);
+        const mat = new THREE.MeshPhysicalMaterial({
+            color: 0x2a3a5c,
+            roughness: 0.6,
+            metalness: 0.2,
+            transparent: true,
+            opacity: 0.4,
+        });
+        const ground = new THREE.Mesh(geo, mat);
+        ground.rotation.x = -Math.PI / 2;
+        ground.position.y = -0.002;
+        ground.receiveShadow = true;
+        scene.add(ground);
+
+        // Subtle grid
+        const grid = new THREE.GridHelper(1.0, 20, 0x4466aa, 0x335588);
+        grid.material.opacity = 0.1;
+        grid.material.transparent = true;
+        scene.add(grid);
+    }
+
+    function setupPostProcessing(EffectComposer, RenderPass, UnrealBloomPass, SMAAPass, container) {
+        const w = container.clientWidth || 800;
+        const h = container.clientHeight || 400;
+
+        composer = new EffectComposer(renderer);
+        composer.addPass(new RenderPass(scene, camera));
+
+        // Subtle bloom for specular highlights
+        const bloom = new UnrealBloomPass(
+            new THREE.Vector2(w, h),
+            0.08,   // strength (subtle)
+            0.3,    // radius
+            0.95,   // threshold (high = only brightest spots)
+        );
+        composer.addPass(bloom);
+
+        // Anti-aliasing
+        const smaa = new SMAAPass(w, h);
+        composer.addPass(smaa);
+    }
+
+    // === Robot Loading ===
+    async function loadRobot(URDFLoader, STLLoader, mergeVertices) {
+        return new Promise((resolve, reject) => {
+            const loader = new URDFLoader();
+            const stlLoader = new STLLoader();
+
+            // Resolve package://assets/foo.stl → /api/model/urdf/assets/foo.stl
+            loader.packages = {
+                'assets': '/api/model/urdf/assets',
+            };
+
+            // Custom mesh loading with STLLoader + vertex merging for smooth shading
+            loader.loadMeshCb = (path, manager, onComplete) => {
+                stlLoader.load(path, (geometry) => {
+                    // STL has duplicate vertices per-triangle — merge them so
+                    // computeVertexNormals averages across shared faces (smooth shading)
+                    geometry = mergeVertices(geometry, 0.0001);
+                    geometry.computeVertexNormals();
+                    const material = new THREE.MeshStandardMaterial({
+                        color: 0x888888,
+                        roughness: 0.5,
+                        metalness: 0.1,
+                    });
+                    const mesh = new THREE.Mesh(geometry, material);
+                    onComplete(mesh);
+                }, undefined, (err) => {
+                    console.warn('Simulation: Mesh load failed:', path);
+                    onComplete(new THREE.Group());
+                });
+            };
+
+            loader.load('/api/model/urdf/robot_no_collision.urdf', (result) => {
+                robot = result;
+
+                // URDF is Z-up, Three.js is Y-up
+                robot.rotation.x = -Math.PI / 2;
+
+                // Upgrade materials to PBR
+                enhanceMaterials();
+
+                scene.add(robot);
+                console.log('Simulation: Robot loaded,', Object.keys(robot.joints).length, 'joints');
+                resolve();
+            }, undefined, (err) => {
+                console.error('Simulation: URDF load failed:', err);
+                reject(err);
+            });
+        });
+    }
+
+    function enhanceMaterials() {
+        robot.traverse((child) => {
+            if (!child.isMesh) return;
+
+            // Get color assigned by urdf-loader from URDF <material><color>
+            const origColor = child.material?.color?.clone() || new THREE.Color(0x888888);
+            const name = (child.name || child.parent?.name || '').toLowerCase();
+
+            let props = { color: origColor, roughness: 0.6, metalness: 0.1 };
+
+            // Metal parts: stewart rods, arms, bearings, screws
+            if (name.includes('rod') || name.includes('stewart_arm') ||
+                name.includes('bearing') || name.includes('bts2') ||
+                name.includes('phs_')) {
+                props = { color: origColor, roughness: 0.25, metalness: 0.85 };
+            }
+            // Antenna stalk: glossy black
+            else if (name === 'antenna' || (name.includes('antenna') &&
+                     !name.includes('interface') && !name.includes('holder') &&
+                     !name.includes('body'))) {
+                props = {
+                    color: origColor, roughness: 0.05, metalness: 0.0,
+                    clearcoat: 1.0, clearcoatRoughness: 0.05,
+                };
+            }
+            // Lenses: glass-like
+            else if (name.includes('lens')) {
+                props = {
+                    color: origColor, roughness: 0.0, metalness: 0.0,
+                    clearcoat: 1.0, clearcoatRoughness: 0.0,
+                };
+            }
+            // Glasses frame
+            else if (name.includes('glasses')) {
+                props = {
+                    color: origColor, roughness: 0.2, metalness: 0.0,
+                    clearcoat: 0.8, clearcoatRoughness: 0.1,
+                };
+            }
+            // Servos: dark plastic with slight sheen
+            else if (name.includes('dc15') || name.includes('xl_330') || name.includes('horn')) {
+                props = { color: origColor, roughness: 0.35, metalness: 0.2 };
+            }
+            // 3D printed shell: slightly glossy plastic
+            else if (name.includes('3dprint') || name.includes('shell') || name.includes('head_')) {
+                props = {
+                    color: origColor, roughness: 0.4, metalness: 0.05,
+                    clearcoat: 0.3, clearcoatRoughness: 0.3,
+                };
+            }
+
+            child.material = new THREE.MeshPhysicalMaterial(props);
+            child.castShadow = true;
+            child.receiveShadow = true;
+        });
+    }
+
+    // === WebSocket Updates ===
+    function updateFromWebSocket(wsData) {
+        if (!wsData?.robot) return;
+        const r = wsData.robot;
+
+        // Active joints (degrees → radians)
+        if (r.head_joints?.length >= 7) {
+            for (let i = 0; i < 7; i++) {
+                state.headJoints[i] = r.head_joints[i] * DEG2RAD;
+            }
+        }
+
+        if (r.antenna_joints?.length >= 2) {
+            state.antennas[0] = r.antenna_joints[0] * DEG2RAD;
+            state.antennas[1] = r.antenna_joints[1] * DEG2RAD;
+        }
+
+        // Build head pose matrix for kinematics (degrees → radians)
+        if (r.head_pose) {
+            const p = r.head_pose;
+            state.headPoseMatrix = buildPoseMatrix(
+                p.x, p.y, p.z,
+                p.roll * DEG2RAD, p.pitch * DEG2RAD, p.yaw * DEG2RAD,
+            );
+        }
+
+        // Compute passive joints via WASM
+        if (kinematicsWasm) {
+            try {
+                state.passiveJoints = kinematicsWasm.calculate_passive_joints(
+                    state.headJoints,
+                    state.headPoseMatrix,
+                );
+            } catch (e) {
+                // Kinematics errors during rapid updates are expected
+            }
+        }
+    }
+
+    function applyJoints() {
+        if (!robot) return;
+
+        // Body yaw
+        robot.setJointValue('yaw_body', state.headJoints[0]);
+
+        // Stewart platform actuators
+        for (let i = 1; i <= 6; i++) {
+            robot.setJointValue('stewart_' + i, state.headJoints[i]);
+        }
+
+        // Antennas
+        robot.setJointValue('right_antenna', state.antennas[0]);
+        robot.setJointValue('left_antenna', state.antennas[1]);
+
+        // Passive joints (from kinematics WASM)
+        if (state.passiveJoints) {
+            for (let i = 0; i < 21; i++) {
+                robot.setJointValue(PASSIVE_NAMES[i], state.passiveJoints[i]);
+            }
+        }
+    }
+
+    // === Animation Loop ===
+    function animate() {
+        animationId = requestAnimationFrame(animate);
+
+        // Skip if hidden
+        if (renderer?.domElement?.parentElement) {
+            const c = renderer.domElement.parentElement;
+            if (c.offsetWidth === 0 || c.offsetHeight === 0) return;
+        }
+
+        applyJoints();
+        if (controls) controls.update();
+
+        if (composer) {
+            composer.render();
+        } else if (renderer && scene && camera) {
+            renderer.render(scene, camera);
+        }
+    }
+
+    function onWindowResize() {
+        if (!renderer) return;
+        const container = renderer.domElement.parentElement;
+        if (!container) return;
+        const w = container.clientWidth;
+        const h = container.clientHeight;
+        if (w === 0 || h === 0) return;
+
+        camera.aspect = w / h;
+        camera.updateProjectionMatrix();
+        renderer.setSize(w, h);
+        if (composer) composer.setSize(w, h);
+    }
+
+    function dispose() {
+        if (animationId) cancelAnimationFrame(animationId);
+        window.removeEventListener('resize', onWindowResize);
+        if (renderer) {
+            renderer.dispose();
+            renderer.domElement.remove();
+        }
+        if (composer) composer.dispose();
+        robot = null;
+        isInitialized = false;
+        initPromise = null;
+    }
+
+    // === Export ===
+    window.ReachySimulation = {
+        init,
+        updateFromWebSocket,
+        resize: onWindowResize,
+        dispose,
+        isInitialized: () => isInitialized,
+    };
+})();

hello_world/static/js/websocket.js

@@ -0,0 +1,923 @@
+// websocket.js - Live WebSocket connection for robot state and system stats
+
+(function() {
+    const { formatBytes, formatBytesShort, formatUptime } = window.ReachyApp;
+
+    let liveSocket = null;
+
+    // Subscription state
+    let currentSubscriptions = new Set(["robot", "stats"]);
+
+    // Zenoh health tracking
+    let lastPoseUpdateTime = 0;
+    let zenohCheckInterval = null;
+    const ZENOH_STALE_THRESHOLD = 3000;
+
+    function updateZenohStatus(hasData) {
+        if (hasData) {
+            lastPoseUpdateTime = Date.now();
+            setIndicatorStatus('zenohIndicator', 'active');
+        } else {
+            setIndicatorStatus('zenohIndicator', 'error');
+        }
+    }
+
+    function checkZenohHealth() {
+        if (!liveSocket || liveSocket.readyState !== WebSocket.OPEN) {
+            setIndicatorStatus('zenohIndicator', 'connecting');
+            return;
+        }
+        const timeSinceLastPose = Date.now() - lastPoseUpdateTime;
+        if (lastPoseUpdateTime > 0 && timeSinceLastPose > ZENOH_STALE_THRESHOLD) {
+            setIndicatorStatus('zenohIndicator', 'error');
+        }
+    }
+
+    // Reconnection with exponential backoff
+    let wsReconnectAttempts = 0;
+    let wsReconnectTimer = null;
+    const WS_MAX_RECONNECT_DELAY = 30000;
+    const WS_BASE_RECONNECT_DELAY = 1000;
+
+    function getWsReconnectDelay() {
+        return Math.min(WS_BASE_RECONNECT_DELAY * Math.pow(2, wsReconnectAttempts), WS_MAX_RECONNECT_DELAY);
+    }
+
+    function resetWsReconnection() {
+        wsReconnectAttempts = 0;
+        if (wsReconnectTimer) { clearTimeout(wsReconnectTimer); wsReconnectTimer = null; }
+    }
+
+    function scheduleWsReconnect() {
+        const delay = getWsReconnectDelay();
+        wsReconnectAttempts++;
+        console.log(`Live WebSocket: Reconnecting in ${delay/1000}s (attempt ${wsReconnectAttempts})`);
+        wsReconnectTimer = setTimeout(connectLiveWebSocket, delay);
+    }
+
+    function sendSubscriptions() {
+        if (liveSocket && liveSocket.readyState === WebSocket.OPEN) {
+            const msg = { subscribe: Array.from(currentSubscriptions) };
+            liveSocket.send(JSON.stringify(msg));
+        }
+    }
+
+    function setSubscriptions(subs) {
+        const newSubs = new Set(subs);
+        if (newSubs.size !== currentSubscriptions.size ||
+            ![...newSubs].every(s => currentSubscriptions.has(s))) {
+            currentSubscriptions = newSubs;
+            sendSubscriptions();
+        }
+    }
+
+    function updateSubscriptionsFromVisibility() {
+        const subs = ["robot", "stats"];
+        setSubscriptions(subs);
+    }
+
+    // ===== Indicator Status =====
+    function setIndicatorStatus(indicator, status) {
+        let indicatorId = null;
+        if (typeof indicator === 'string') {
+            indicatorId = indicator;
+            indicator = document.getElementById(indicator);
+        } else if (indicator) {
+            indicatorId = indicator.id;
+        }
+
+        if (indicator) {
+            indicator.classList.remove('connecting', 'active', 'error');
+            if (status === 'connecting' || status === 'active' || status === 'error') {
+                indicator.classList.add(status);
+            }
+        }
+
+        if (window.ReachyStatus && indicatorId) {
+            ReachyStatus.updateFromIndicator(indicatorId, status);
+        }
+    }
+
+    // ===== Chart Classes =====
+    class LineChart {
+        constructor(canvasId, color, maxValue = 100, secondaryColor = null, minValue = 0, autoScale = false) {
+            this.canvas = document.getElementById(canvasId);
+            if (!this.canvas) return;
+            this.ctx = this.canvas.getContext('2d');
+            this.color = color;
+            this.secondaryColor = secondaryColor;
+            this.fixedMaxValue = maxValue;
+            this.fixedMinValue = minValue;
+            this.autoScale = autoScale;
+            this.data = [];
+            this.secondaryData = [];
+            this.maxPoints = 60;
+            this.padding = 0.1;
+            this.resize();
+            window.addEventListener('resize', () => this.resize());
+        }
+
+        resize() {
+            if (!this.canvas) return;
+            const rect = this.canvas.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return;
+            this.canvas.width = rect.width * window.devicePixelRatio;
+            this.canvas.height = rect.height * window.devicePixelRatio;
+            this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+            this.width = rect.width;
+            this.height = rect.height;
+            this.draw();
+        }
+
+        getRange() {
+            if (!this.autoScale || this.data.length === 0) {
+                return { min: this.fixedMinValue, max: this.fixedMaxValue };
+            }
+            const allData = [...this.data, ...this.secondaryData];
+            let min = Math.min(...allData);
+            let max = Math.max(...allData);
+            const range = max - min || 1;
+            min -= range * this.padding;
+            max += range * this.padding;
+            return { min, max };
+        }
+
+        push(value, secondaryValue = null, color = null) {
+            if (!this.canvas) return;
+            if (color) this.color = color;
+            this.data.push(value);
+            if (this.data.length > this.maxPoints) this.data.shift();
+            if (secondaryValue !== null) {
+                this.secondaryData.push(secondaryValue);
+                if (this.secondaryData.length > this.maxPoints) this.secondaryData.shift();
+            }
+            this.draw();
+        }
+
+        draw() {
+            if (!this.canvas || !this.width || !this.height) return;
+            const ctx = this.ctx;
+            const w = this.width;
+            const h = this.height;
+            const { min, max } = this.getRange();
+            const range = max - min || 1;
+
+            ctx.clearRect(0, 0, w, h);
+
+            ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+            ctx.lineWidth = 1;
+            for (let i = 0; i <= 4; i++) {
+                const y = (h / 4) * i;
+                ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+            }
+
+            if (min < 0 && max > 0) {
+                const zeroY = h - ((0 - min) / range) * h;
+                ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+                ctx.setLineDash([4, 4]);
+                ctx.beginPath(); ctx.moveTo(0, zeroY); ctx.lineTo(w, zeroY); ctx.stroke();
+                ctx.setLineDash([]);
+            }
+
+            if (this.secondaryColor && this.secondaryData.length > 1) {
+                this.drawLine(this.secondaryData, this.secondaryColor, min, range);
+            }
+            if (this.data.length > 1) {
+                this.drawLine(this.data, this.color, min, range);
+            }
+        }
+
+        drawLine(data, color, min, range) {
+            const ctx = this.ctx;
+            const w = this.width;
+            const h = this.height;
+            const step = w / (this.maxPoints - 1);
+            const offset = this.maxPoints - data.length;
+
+            const getY = (val) => {
+                const clamped = Math.max(min, Math.min(min + range, val));
+                return h - ((clamped - min) / range) * h;
+            };
+            const baseY = min < 0 && min + range > 0 ? getY(0) : h;
+
+            ctx.beginPath();
+            ctx.moveTo((0 + offset) * step, baseY);
+            data.forEach((val, i) => { ctx.lineTo((i + offset) * step, getY(val)); });
+            ctx.lineTo((data.length - 1 + offset) * step, baseY);
+            ctx.closePath();
+            ctx.fillStyle = color.replace('1)', '0.15)');
+            ctx.fill();
+
+            ctx.beginPath();
+            data.forEach((val, i) => {
+                const x = (i + offset) * step;
+                const y = getY(val);
+                if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+            });
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 2;
+            ctx.lineJoin = 'round';
+            ctx.stroke();
+        }
+
+        setMaxValue(max) { this.fixedMaxValue = max; }
+    }
+
+    class MultiLineChart {
+        constructor(canvasId, colors, maxValue = 100, minValue = 0, autoScale = false) {
+            this.canvas = document.getElementById(canvasId);
+            if (!this.canvas) return;
+            this.ctx = this.canvas.getContext('2d');
+            this.colors = colors;
+            this.fixedMaxValue = maxValue;
+            this.fixedMinValue = minValue;
+            this.autoScale = autoScale;
+            this.dataLines = colors.map(() => []);
+            this.maxPoints = 60;
+            this.padding = 0.1;
+            this.resize();
+            window.addEventListener('resize', () => this.resize());
+        }
+
+        resize() {
+            if (!this.canvas) return;
+            const rect = this.canvas.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return;
+            this.canvas.width = rect.width * window.devicePixelRatio;
+            this.canvas.height = rect.height * window.devicePixelRatio;
+            this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+            this.width = rect.width;
+            this.height = rect.height;
+            this.draw();
+        }
+
+        getRange() {
+            if (!this.autoScale) return { min: this.fixedMinValue, max: this.fixedMaxValue };
+            const allData = this.dataLines.flat();
+            if (allData.length === 0) return { min: this.fixedMinValue, max: this.fixedMaxValue };
+            let min = Math.min(...allData);
+            let max = Math.max(...allData);
+            const range = max - min || 1;
+            min -= range * this.padding;
+            max += range * this.padding;
+            return { min, max };
+        }
+
+        push(values) {
+            if (!this.canvas) return;
+            values.forEach((val, i) => {
+                if (this.dataLines[i]) {
+                    this.dataLines[i].push(val);
+                    if (this.dataLines[i].length > this.maxPoints) this.dataLines[i].shift();
+                }
+            });
+            this.draw();
+        }
+
+        draw() {
+            if (!this.canvas || !this.width || !this.height) return;
+            const ctx = this.ctx;
+            const w = this.width;
+            const h = this.height;
+            const { min, max } = this.getRange();
+            const range = max - min || 1;
+
+            ctx.clearRect(0, 0, w, h);
+            ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+            ctx.lineWidth = 1;
+            for (let i = 0; i <= 4; i++) {
+                const y = (h / 4) * i;
+                ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+            }
+
+            if (min < 0 && max > 0) {
+                const zeroY = h - ((0 - min) / range) * h;
+                ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+                ctx.setLineDash([4, 4]);
+                ctx.beginPath(); ctx.moveTo(0, zeroY); ctx.lineTo(w, zeroY); ctx.stroke();
+                ctx.setLineDash([]);
+            }
+
+            this.dataLines.forEach((data, i) => {
+                if (data.length > 1) this.drawLine(data, this.colors[i], min, range);
+            });
+        }
+
+        drawLine(data, color, min, range) {
+            const ctx = this.ctx;
+            const w = this.width;
+            const h = this.height;
+            const step = w / (this.maxPoints - 1);
+            const offset = this.maxPoints - data.length;
+            const getY = (val) => {
+                const clamped = Math.max(min, Math.min(min + range, val));
+                return h - ((clamped - min) / range) * h;
+            };
+
+            ctx.beginPath();
+            data.forEach((val, i) => {
+                const x = (i + offset) * step;
+                const y = getY(val);
+                if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+            });
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.5;
+            ctx.lineJoin = 'round';
+            ctx.stroke();
+        }
+    }
+
+    // ===== Pie Chart =====
+    function drawPieChart(canvasId, percent, color) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        const size = canvas.width;
+        const center = size / 2;
+        const radius = (size / 2) - 6;
+        const lineWidth = 8;
+
+        ctx.clearRect(0, 0, size, size);
+
+        ctx.beginPath();
+        ctx.arc(center, center, radius, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+
+        if (percent > 0) {
+            ctx.beginPath();
+            ctx.arc(center, center, radius, -Math.PI / 2, -Math.PI / 2 + (Math.PI * 2 * percent / 100));
+            ctx.strokeStyle = color;
+            ctx.lineWidth = lineWidth;
+            ctx.lineCap = 'round';
+            ctx.stroke();
+        }
+
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+        ctx.shadowBlur = 2;
+        ctx.fillText(`${percent.toFixed(0)}%`, center, center);
+        ctx.shadowBlur = 0;
+    }
+
+    // ===== Chart Instances =====
+    const cpuColors = ['rgba(239, 68, 68, 1)', 'rgba(34, 197, 94, 1)', 'rgba(59, 130, 246, 1)', 'rgba(234, 179, 8, 1)'];
+    const ramColors = ['rgba(168, 85, 247, 1)', 'rgba(59, 130, 246, 1)', 'rgba(34, 197, 94, 1)'];
+    const ramLabels = ['Used', 'Buf', 'Cache'];
+    const jointColors = [
+        'rgba(239, 68, 68, 1)', 'rgba(249, 115, 22, 1)', 'rgba(234, 179, 8, 1)',
+        'rgba(34, 197, 94, 1)', 'rgba(6, 182, 212, 1)', 'rgba(99, 102, 241, 1)', 'rgba(168, 85, 247, 1)'
+    ];
+
+    let tempChart, cpuChart, ramChart, netChart, wifiChart;
+    let loadChart, fanChart, diskIoChart;
+    let rollChart, pitchChart, yawChart;
+    let posXChart, posYChart, posZChart;
+    let antennaRightChart, antennaLeftChart, jointsChart;
+    let netMaxSpeed = 1024 * 1024;
+    let diskIoMaxSpeed = 1024 * 1024;
+
+    function initCharts() {
+        tempChart = new LineChart('tempChart', 'rgba(239, 68, 68, 1)', 85);
+        cpuChart = new MultiLineChart('cpuChart', cpuColors);
+        ramChart = new MultiLineChart('ramChart', ramColors);
+        netChart = new LineChart('netChart', 'rgba(34, 197, 94, 1)', netMaxSpeed, 'rgba(239, 68, 68, 1)');
+        wifiChart = new LineChart('wifiChart', 'rgba(99, 102, 241, 1)');
+        loadChart = new LineChart('loadChart', 'rgba(234, 179, 8, 1)', 8, null, 0, false);
+        fanChart = new LineChart('fanChart', 'rgba(6, 182, 212, 1)', 15000, null, 0, false);
+        diskIoChart = new LineChart('diskIoChart', 'rgba(34, 197, 94, 1)', diskIoMaxSpeed, 'rgba(239, 68, 68, 1)');
+
+        rollChart = new LineChart('rollChart', getLimitRgba(0, LIMIT_MAP.rollValue), 20, null, -20, false);
+        pitchChart = new LineChart('pitchChart', getLimitRgba(0, LIMIT_MAP.pitchValue), 25, null, -25, false);
+        yawChart = new LineChart('yawChart', getLimitRgba(0, LIMIT_MAP.yawValue), 50, null, -50, false);
+
+        posXChart = new LineChart('posXChart', getLimitRgba(0, LIMIT_MAP.posXValue), 3, null, -3, false);
+        posYChart = new LineChart('posYChart', getLimitRgba(0, LIMIT_MAP.posYValue), 3, null, -3, false);
+        posZChart = new LineChart('posZChart', getLimitRgba(0, LIMIT_MAP.posZValue), 4, null, -4, false);
+
+        antennaRightChart = new LineChart('antennaRightChart', getLimitRgba(0, LIMIT_MAP.antennaRightValue), 179, null, -179, false);
+        antennaLeftChart = new LineChart('antennaLeftChart', getLimitRgba(0, LIMIT_MAP.antennaLeftValue), 179, null, -179, false);
+        jointsChart = new MultiLineChart('jointsChart', jointColors, 60, -60, false);
+    }
+
+    function connectLiveWebSocket() {
+        if (liveSocket && liveSocket.readyState === WebSocket.OPEN) return;
+
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${wsProtocol}//${window.location.host}/ws/live`;
+
+        liveSocket = new WebSocket(wsUrl);
+
+        liveSocket.onopen = () => {
+            console.log('Live WebSocket connected');
+            resetWsReconnection();
+            setIndicatorStatus('connectionIndicator', 'active');
+            sendSubscriptions();
+        };
+
+        liveSocket.onclose = () => {
+            console.log('Live WebSocket closed');
+            setIndicatorStatus('connectionIndicator', 'error');
+            scheduleWsReconnect();
+        };
+
+        liveSocket.onerror = (e) => { console.error('Live WebSocket error:', e); };
+
+        liveSocket.onmessage = (event) => {
+            try {
+                handleLiveData(JSON.parse(event.data));
+            } catch (e) {
+                console.error('Failed to parse live data:', e);
+            }
+        };
+    }
+
+    // ===== Data-Driven Stats Configuration =====
+    const SIMPLE_STATS = [
+        { key: 'cpu_temp', el: 'tempValue', fmt: v => `${v.toFixed(1)}\u00B0C`, chart: () => tempChart },
+        { key: 'memory_percent', el: 'ramValue', fmt: v => `${v.toFixed(0)}%`, headerEl: 'headerRam' },
+        { key: 'wifi_signal', el: 'wifiStrength', fmt: v => `${v}%`, chart: () => wifiChart },
+        { key: 'wifi_ssid', el: 'wifiSsid', fmt: v => v },
+        { key: 'fan_rpm', el: 'fanValue', fmt: v => v !== null ? `${v} RPM` : '--', chart: () => fanChart },
+        { key: 'net_rx_speed', el: 'netDownValue', fmt: v => formatBytes(v) + '/s' },
+        { key: 'net_tx_speed', el: 'netUpValue', fmt: v => formatBytes(v) + '/s' },
+        { key: 'disk_read_speed', el: 'diskReadSpeed', fmt: v => formatBytes(v) + '/s' },
+        { key: 'disk_write_speed', el: 'diskWriteSpeed', fmt: v => formatBytes(v) + '/s' },
+    ];
+
+    const DISK_CHARTS = [
+        { key: 'disk_local', chartId: 'diskLocalChart', infoId: 'diskLocalInfo', color: 'rgba(234, 179, 8, 1)' },
+        { key: 'swap', chartId: 'swapChart', infoId: 'swapInfo', color: 'rgba(239, 68, 68, 1)', fallbackFlag: '_swapChecked' },
+    ];
+
+    function updateSimpleStats(sys) {
+        SIMPLE_STATS.forEach(({ key, el, fmt, chart, headerEl }) => {
+            const value = sys[key];
+            if (value === undefined) return;
+            const element = document.getElementById(el);
+            if (element) element.textContent = fmt(value);
+            if (chart) { const c = chart(); if (c) c.push(value); }
+            if (headerEl) { const h = document.getElementById(headerEl); if (h) h.textContent = fmt(value); }
+        });
+    }
+
+    function updateDiskCharts(sys) {
+        DISK_CHARTS.forEach(({ key, chartId, infoId, color, fallbackFlag }) => {
+            const data = sys[key];
+            if (data) {
+                drawPieChart(chartId, data.percent, color);
+                const infoEl = document.getElementById(infoId);
+                if (infoEl) infoEl.innerHTML = `${formatBytes(data.used)} used<br>${formatBytes(data.free)} free`;
+            } else if (fallbackFlag && !window[fallbackFlag]) {
+                window[fallbackFlag] = true;
+                const infoEl = document.getElementById(infoId);
+                if (infoEl) infoEl.textContent = 'N/A';
+                drawPieChart(chartId, 0, 'rgba(100, 100, 100, 0.3)');
+            }
+        });
+    }
+
+    function updateCpuCores(sys) {
+        if (!sys.cpu_cores || sys.cpu_cores.length === 0) return;
+        const avgCpu = sys.cpu_cores.reduce((a, b) => a + b, 0) / sys.cpu_cores.length;
+        const el = document.getElementById('cpuValue');
+        if (el) el.textContent = `${avgCpu.toFixed(0)}%`;
+        const headerCpu = document.getElementById('headerCpu');
+        if (headerCpu) headerCpu.textContent = `${avgCpu.toFixed(0)}%`;
+        const legendEl = document.getElementById('cpuLegend');
+        if (legendEl) {
+            legendEl.innerHTML = sys.cpu_cores.map((v, i) =>
+                `<span style="color: ${cpuColors[i]};">\u25CF</span><span style="display:inline-block;width:2.5em;text-align:right;">${v.toFixed(0)}%</span>`
+            ).join(' ');
+        }
+        if (cpuChart) cpuChart.push(sys.cpu_cores);
+    }
+
+    function updateRamChart(sys) {
+        const usedPct = sys.memory_used_pct;
+        if (usedPct === undefined) return;
+        const pcts = [usedPct, sys.memory_buffers_pct || 0, sys.memory_cached_pct || 0];
+        const legendEl = document.getElementById('ramLegend');
+        if (legendEl) {
+            legendEl.innerHTML = pcts.map((v, i) =>
+                `<span style="color: ${ramColors[i]};">\u25CF</span>${ramLabels[i]} <span style="display:inline-block;width:2.5em;text-align:right;">${v.toFixed(0)}%</span>`
+            ).join(' ');
+        }
+        if (ramChart) ramChart.push(pcts);
+    }
+
+    function updateNetworkChart(sys) {
+        if (sys.net_rx_speed === undefined || sys.net_tx_speed === undefined) return;
+        const maxNet = Math.max(sys.net_rx_speed, sys.net_tx_speed);
+        if (maxNet > netMaxSpeed * 0.8) { netMaxSpeed = maxNet * 1.5; if (netChart) netChart.setMaxValue(netMaxSpeed); }
+        if (netChart) netChart.push(sys.net_rx_speed, sys.net_tx_speed);
+        const headerNet = document.getElementById('headerNet');
+        if (headerNet) headerNet.textContent = formatBytesShort(maxNet);
+    }
+
+    function updateDiskIoChart(sys) {
+        if (sys.disk_read_speed === undefined || sys.disk_write_speed === undefined) return;
+        const maxIo = Math.max(sys.disk_read_speed, sys.disk_write_speed);
+        if (maxIo > diskIoMaxSpeed * 0.8) { diskIoMaxSpeed = maxIo * 1.5; if (diskIoChart) diskIoChart.setMaxValue(diskIoMaxSpeed); }
+        if (diskIoChart) diskIoChart.push(sys.disk_read_speed, sys.disk_write_speed);
+    }
+
+    function updateLoadAverage(sys) {
+        if (sys.load_1m === undefined) return;
+        const cores = 4;
+        const load = sys.load_1m;
+        const color = load > cores ? 'var(--error)' : load > cores * 0.75 ? 'var(--warning)' : 'var(--success)';
+        const loadValEl = document.getElementById('loadValue');
+        if (loadValEl) loadValEl.innerHTML = `<span style="color:${color}">${load.toFixed(2)}</span>`;
+        const loadAvgEl = document.getElementById('loadAvg');
+        if (loadAvgEl) loadAvgEl.textContent = `${load.toFixed(2)} / ${sys.load_5m?.toFixed(2) || '--'} / ${sys.load_15m?.toFixed(2) || '--'}`;
+        if (loadChart) loadChart.push(load);
+    }
+
+    function updateThrottleStatus(sys) {
+        if (sys.throttled === undefined) return;
+        // Lower 4 bits = currently active, upper bits = historical (since boot)
+        const currentlyThrottled = sys.throttled & 0xF;
+        if (currentlyThrottled === 0) {
+            setIndicatorStatus('throttleIndicator', 'active');
+        } else {
+            setIndicatorStatus('throttleIndicator', 'error');
+        }
+    }
+
+    function updateTopProcesses(sys) {
+        if (!sys.top_processes || sys.top_processes.length === 0) return;
+        const el = document.getElementById('topProcesses');
+        if (!el) return;
+        const rows = sys.top_processes.map(p =>
+            `<tr><td>${p.pid}</td><td>${p.name}</td><td>${p.cpu}%</td><td>${p.mem}%</td></tr>`
+        ).join('');
+        el.innerHTML = `<table class="process-table"><thead><tr><th>PID</th><th>Name</th><th>CPU</th><th>Mem</th></tr></thead><tbody>${rows}</tbody></table>`;
+    }
+
+    let hardwareInfoUpdated = false;
+    function updateHardwareInfo(sys) {
+        if (hardwareInfoUpdated || !sys.hardware_info) return;
+        hardwareInfoUpdated = true;
+        const hw = sys.hardware_info;
+
+        const updates = {
+            'hwBoard': hw.board_model,
+            'hwSerial': hw.board_serial,
+            'hwCpu': `${hw.cpu_arch || ''} ${hw.cpu_cores || '?'}x ${hw.cpu_freq_max ? hw.cpu_freq_max + 'MHz' : ''}`.trim(),
+            'hwMemory': (() => {
+                const total = hw.mem_total_gb ? `${hw.mem_total_gb}GB` : '?';
+                const split = (hw.mem_arm && hw.mem_gpu) ? ` (ARM: ${hw.mem_arm}, GPU: ${hw.mem_gpu})` : '';
+                return `${total}${split}`;
+            })(),
+            'hwStorage': hw.storage ? hw.storage.map(s => `${s.name}: ${s.size}`).join(', ') : null,
+            'hwKernel': hw.kernel,
+            'hwFirmware': hw.firmware_date,
+            'hwNetwork': hw.network_interfaces ? hw.network_interfaces.map(n => `${n.name} (${n.state})`).join(', ') : null,
+            'hwUsb': hw.usb_devices ? hw.usb_devices.map(u => u.name).join(', ') || 'None' : null,
+            'hwI2c': hw.i2c_buses !== undefined ? `${hw.i2c_buses} buses` : null,
+        };
+
+        Object.entries(updates).forEach(([id, value]) => {
+            if (value) {
+                const el = document.getElementById(id);
+                if (el) el.textContent = value;
+            }
+        });
+    }
+
+    // Limit proximity color: green → amber → red
+    const _limitConsts = window.ReachyConstants;
+    const LIMIT_MAP = {
+        rollValue:  { neg: -(_limitConsts?.HEAD_ROLL_RIGHT_MAX || 0.30), pos: _limitConsts?.HEAD_ROLL_LEFT_MAX || 0.35, unit: 'deg' },
+        pitchValue: { neg: -(_limitConsts?.HEAD_PITCH_MAX || 0.44), pos: _limitConsts?.HEAD_PITCH_MAX || 0.44, unit: 'deg' },
+        yawValue:   { neg: -(_limitConsts?.HEAD_YAW_MAX || 0.87), pos: _limitConsts?.HEAD_YAW_MAX || 0.87, unit: 'deg' },
+        posXValue:  { neg: -(_limitConsts?.HEAD_X_MAX || 0.03), pos: _limitConsts?.HEAD_X_MAX || 0.03, unit: 'cm' },
+        posYValue:  { neg: -(_limitConsts?.HEAD_Y_MAX || 0.03), pos: _limitConsts?.HEAD_Y_MAX || 0.03, unit: 'cm' },
+        posZValue:  { neg: -(_limitConsts?.HEAD_Z_MAX || 0.04), pos: _limitConsts?.HEAD_Z_MAX || 0.04, unit: 'cm' },
+        antennaRightValue: { neg: -179, pos: 179, unit: 'antDeg' },
+        antennaLeftValue:  { neg: -179, pos: 179, unit: 'antDeg' },
+    };
+
+    function getLimitColor(value, limitInfo) {
+        if (!limitInfo) return '';
+        // Convert degrees to radians for comparison (head pose comes in degrees)
+        let raw = value;
+        if (limitInfo.unit === 'deg') raw = value * Math.PI / 180;
+        else if (limitInfo.unit === 'cm') raw = value / 100;
+        // ratio: 0 = center, 1 = at limit
+        const limit = raw >= 0 ? limitInfo.pos : Math.abs(limitInfo.neg);
+        const ratio = limit > 0 ? Math.abs(raw) / limit : 0;
+        if (ratio < 0.50) return 'var(--success, #4ade80)';
+        if (ratio < 0.85) return 'var(--warning, #fbbf24)';
+        return 'var(--error, #f87171)';
+    }
+
+    function getLimitRgba(value, limitInfo) {
+        if (!limitInfo) return null;
+        let raw = value;
+        if (limitInfo.unit === 'deg') raw = value * Math.PI / 180;
+        else if (limitInfo.unit === 'cm') raw = value / 100;
+        const limit = raw >= 0 ? limitInfo.pos : Math.abs(limitInfo.neg);
+        const ratio = limit > 0 ? Math.abs(raw) / limit : 0;
+        if (ratio < 0.50) return 'rgba(74, 222, 128, 1)';   // green
+        if (ratio < 0.85) return 'rgba(251, 191, 36, 1)';   // amber
+        return 'rgba(248, 113, 113, 1)';                      // red
+    }
+
+    function setValueWithColor(elId, text, rawValue) {
+        const el = document.getElementById(elId);
+        if (!el) return;
+        el.textContent = text;
+        const info = LIMIT_MAP[elId];
+        if (info) el.style.color = getLimitColor(rawValue, info);
+    }
+
+    function handleLiveData(data) {
+        if (data.stats) {
+            const sys = data.stats;
+            updateSimpleStats(sys);
+            updateCpuCores(sys);
+            updateRamChart(sys);
+            updateDiskCharts(sys);
+            updateNetworkChart(sys);
+            updateDiskIoChart(sys);
+            updateLoadAverage(sys);
+            updateThrottleStatus(sys);
+            updateTopProcesses(sys);
+            updateHardwareInfo(sys);
+        }
+
+        if (data.status) {
+            const el = document.getElementById('uptimeApp');
+            if (el) el.textContent = formatUptime(Math.floor(data.status.uptime || 0));
+        }
+
+        if (data.stats) {
+            if (data.stats.robot_uptime != null) {
+                const el = document.getElementById('uptimeRobot');
+                if (el) el.textContent = formatUptime(Math.floor(data.stats.robot_uptime));
+            }
+            if (data.stats.daemon_uptime != null) {
+                const el = document.getElementById('uptimeDaemon');
+                if (el) el.textContent = formatUptime(Math.floor(data.stats.daemon_uptime));
+            }
+        }
+
+        if (data.robot && !data.robot.error) {
+            const robot = data.robot;
+            updateZenohStatus(true);
+
+            if (robot.head_pose) {
+                const pose = robot.head_pose;
+
+                // Status tab values
+                const ids = { headYaw: pose.yaw, headPitch: pose.pitch, headRoll: pose.roll };
+                Object.entries(ids).forEach(([id, val]) => {
+                    const el = document.getElementById(id);
+                    if (el) el.textContent = val.toFixed(1) + '\u00B0';
+                });
+                const posIds = { headPosX: pose.x, headPosY: pose.y, headPosZ: pose.z };
+                Object.entries(posIds).forEach(([id, val]) => {
+                    const el = document.getElementById(id);
+                    if (el) el.textContent = (val * 100).toFixed(1) + 'cm';
+                });
+
+                // Chart values + data (with limit proximity coloring)
+                setValueWithColor('rollValue', pose.roll.toFixed(1) + '\u00B0', pose.roll);
+                setValueWithColor('pitchValue', pose.pitch.toFixed(1) + '\u00B0', pose.pitch);
+                setValueWithColor('yawValue', pose.yaw.toFixed(1) + '\u00B0', pose.yaw);
+                setValueWithColor('posXValue', (pose.x * 100).toFixed(1) + 'cm', pose.x * 100);
+                setValueWithColor('posYValue', (pose.y * 100).toFixed(1) + 'cm', pose.y * 100);
+                setValueWithColor('posZValue', (pose.z * 100).toFixed(1) + 'cm', pose.z * 100);
+                if (rollChart) rollChart.push(pose.roll, null, getLimitRgba(pose.roll, LIMIT_MAP.rollValue));
+                if (pitchChart) pitchChart.push(pose.pitch, null, getLimitRgba(pose.pitch, LIMIT_MAP.pitchValue));
+                if (yawChart) yawChart.push(pose.yaw, null, getLimitRgba(pose.yaw, LIMIT_MAP.yawValue));
+                if (posXChart) posXChart.push(pose.x * 100, null, getLimitRgba(pose.x * 100, LIMIT_MAP.posXValue));
+                if (posYChart) posYChart.push(pose.y * 100, null, getLimitRgba(pose.y * 100, LIMIT_MAP.posYValue));
+                if (posZChart) posZChart.push(pose.z * 100, null, getLimitRgba(pose.z * 100, LIMIT_MAP.posZValue));
+            }
+
+            if (robot.antenna_joints && robot.antenna_joints.length >= 2) {
+                const [rightDeg, leftDeg] = robot.antenna_joints;
+                const headAntLEl = document.getElementById('headAntL');
+                const headAntREl = document.getElementById('headAntR');
+                if (headAntLEl) headAntLEl.textContent = leftDeg.toFixed(1) + '\u00B0';
+                if (headAntREl) headAntREl.textContent = rightDeg.toFixed(1) + '\u00B0';
+                setValueWithColor('antennaRightValue', rightDeg.toFixed(1) + '\u00B0', rightDeg);
+                setValueWithColor('antennaLeftValue', leftDeg.toFixed(1) + '\u00B0', leftDeg);
+                if (antennaRightChart) antennaRightChart.push(rightDeg, null, getLimitRgba(rightDeg, LIMIT_MAP.antennaRightValue));
+                if (antennaLeftChart) antennaLeftChart.push(leftDeg, null, getLimitRgba(leftDeg, LIMIT_MAP.antennaLeftValue));
+            }
+
+            if (robot.head_joints && robot.head_joints.length > 0) {
+                const bodyYaw = robot.head_joints[0];
+                const headBodyYawEl = document.getElementById('headBodyYaw');
+                if (headBodyYawEl) headBodyYawEl.textContent = bodyYaw.toFixed(1) + '\u00B0';
+            }
+
+            if (robot.head_joints && robot.head_joints.length >= 7 && jointsChart) {
+                jointsChart.push(robot.head_joints);
+                const legendEl = document.getElementById('jointsLegend');
+                if (legendEl) {
+                    legendEl.innerHTML = robot.head_joints.map((v, i) =>
+                        `<span style="color: ${jointColors[i]}">${i === 0 ? 'B' : i}: ${v.toFixed(0)}\u00B0</span>`
+                    ).join(' ');
+                }
+            }
+        } else if (data.robot && data.robot.error) {
+            updateZenohStatus(false);
+        }
+
+        // Daemon health (pushed via /ws/live stats, no polling)
+        if (data.daemon) {
+            setIndicatorStatus('daemonIndicator', data.daemon.api === 'ok' ? 'active' : 'error');
+            if (data.daemon.serial === 'ok') setIndicatorStatus('serialIndicator', 'active');
+            else if (data.daemon.serial === 'error') setIndicatorStatus('serialIndicator', 'error');
+            else setIndicatorStatus('serialIndicator', 'connecting');
+        }
+
+        // Feed data to 3D simulation
+        if (window.ReachySimulation && ReachySimulation.isInitialized()) {
+            ReachySimulation.updateFromWebSocket(data);
+        }
+    }
+
+    function initWebSocket() {
+        initCharts();
+        connectLiveWebSocket();
+
+        // Initialize interactive chart controls after charts are created
+        setTimeout(initInteractiveCharts, 100);
+
+        if (zenohCheckInterval) clearInterval(zenohCheckInterval);
+        zenohCheckInterval = setInterval(checkZenohHealth, 1000);
+
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                setSubscriptions([]);
+            } else {
+                updateSubscriptionsFromVisibility();
+            }
+        });
+    }
+
+    function resizeAllCharts() {
+        [tempChart, cpuChart, ramChart, netChart, wifiChart,
+         loadChart, fanChart, diskIoChart,
+         rollChart, pitchChart, yawChart,
+         posXChart, posYChart, posZChart,
+         antennaRightChart, antennaLeftChart, jointsChart
+        ].forEach(chart => { if (chart && chart.resize) chart.resize(); });
+    }
+
+    // Daemon status is now pushed via /ws/live stats payload (no polling)
+
+    // ===== Interactive Chart Controls =====
+    let chartControlActive = false;
+    let wheelEndTimeout = null;
+
+    function clamp(val, min, max) {
+        return Math.max(min, Math.min(max, val));
+    }
+
+    function makeChartInteractive(canvasId, property, isAntenna, sensitivity) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas || !window.ReachyControls) return;
+
+        const limits = window.ReachyControls.limits;
+        let isDragging = false;
+        let lastY = 0;
+
+        canvas.style.cursor = 'ns-resize';
+        canvas.title = 'Drag up/down or scroll to control';
+
+        function startControl() {
+            if (!chartControlActive) {
+                chartControlActive = true;
+                window.ReachyControls.startChartControl();
+            }
+        }
+
+        function endControl() {
+            if (chartControlActive) {
+                chartControlActive = false;
+                const rtc = document.getElementById('returnToCenter');
+                if (!rtc || rtc.checked) {
+                    window.ReachyControls.resetAllPositions();
+                }
+            }
+        }
+
+        function applyElasticResistance(currentVal, maxNeg, maxPos, baseDelta) {
+            // Determine which limit we're approaching based on direction
+            const limit = baseDelta > 0 ? maxPos : maxNeg;
+            const ratio = Math.abs(currentVal) / Math.abs(limit);
+            // Quadratic falloff: full speed at center, ~25% speed at 85%, near-zero at limit
+            const resistance = Math.max(0.05, 1 - ratio * ratio);
+            return baseDelta * resistance;
+        }
+
+        function updateTarget(delta) {
+            const targets = window.ReachyControls.getTargets();
+
+            if (isAntenna) {
+                const maxAnt = limits.ANTENNA_MAX;
+                const current = property === 'left' ? targets.antennaL : targets.antennaR;
+                const baseDelta = delta * sensitivity * 2;
+                const elasticDelta = applyElasticResistance(current, -maxAnt, maxAnt, baseDelta);
+                if (property === 'left') {
+                    window.ReachyControls.setAntennaTargets(clamp(targets.antennaL + elasticDelta, -maxAnt, maxAnt), undefined);
+                } else {
+                    window.ReachyControls.setAntennaTargets(undefined, clamp(targets.antennaR + elasticDelta, -maxAnt, maxAnt));
+                }
+            } else {
+                // Asymmetric limits for roll, symmetric for others
+                let maxPos, maxNeg;
+                switch(property) {
+                    case 'yaw': maxPos = limits.HEAD_YAW_MAX; maxNeg = -maxPos; break;
+                    case 'pitch': maxPos = limits.HEAD_PITCH_MAX; maxNeg = -maxPos; break;
+                    case 'roll': maxPos = limits.HEAD_ROLL_LEFT_MAX; maxNeg = -limits.HEAD_ROLL_RIGHT_MAX; break;
+                    case 'x': maxPos = limits.HEAD_X_MAX; maxNeg = -maxPos; break;
+                    case 'y': maxPos = limits.HEAD_Y_MAX; maxNeg = -maxPos; break;
+                    case 'z': maxPos = limits.HEAD_Z_MAX; maxNeg = -maxPos; break;
+                    default: maxPos = 1; maxNeg = -1;
+                }
+                const range = maxPos - maxNeg;
+                const baseDelta = delta * sensitivity * (range / 100);
+                const elasticDelta = applyElasticResistance(targets[property], maxNeg, maxPos, baseDelta);
+                window.ReachyControls.setHeadTargets({ [property]: clamp(targets[property] + elasticDelta, maxNeg, maxPos) });
+            }
+        }
+
+        canvas.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            lastY = e.clientY;
+            canvas.style.opacity = '0.8';
+            startControl();
+            e.preventDefault();
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            const deltaY = lastY - e.clientY;
+            lastY = e.clientY;
+            updateTarget(deltaY);
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isDragging) {
+                isDragging = false;
+                canvas.style.opacity = '1';
+                endControl();
+            }
+        });
+
+        canvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            startControl();
+            if (wheelEndTimeout) clearTimeout(wheelEndTimeout);
+            updateTarget(-e.deltaY * 0.05 * sensitivity);
+            wheelEndTimeout = setTimeout(endControl, 300);
+        }, { passive: false });
+    }
+
+    function initInteractiveCharts() {
+        if (!window.ReachyControls) {
+            setTimeout(initInteractiveCharts, 100);
+            return;
+        }
+
+        makeChartInteractive('rollChart', 'roll', false, 1);
+        makeChartInteractive('pitchChart', 'pitch', false, 1);
+        makeChartInteractive('yawChart', 'yaw', false, 1);
+        makeChartInteractive('posXChart', 'x', false, 0.5);
+        makeChartInteractive('posYChart', 'y', false, 0.5);
+        makeChartInteractive('posZChart', 'z', false, 0.5);
+        makeChartInteractive('antennaRightChart', 'right', true, 1);
+        makeChartInteractive('antennaLeftChart', 'left', true, 1);
+
+        // When return-to-center is toggled ON, immediately center
+        const rtc = document.getElementById('returnToCenter');
+        if (rtc) {
+            rtc.addEventListener('change', () => {
+                if (rtc.checked) {
+                    window.ReachyControls.resetAllPositions();
+                }
+            });
+        }
+
+        console.log('Interactive chart controls initialized');
+    }
+
+    window.ReachyWebSocket = {
+        init: initWebSocket,
+        resizeCharts: resizeAllCharts,
+        setSubscriptions,
+        updateSubscriptionsFromVisibility
+    };
+})();

hello_world/static/lib/mujoco/mujoco_wasm.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e15bc5597a75e3e893692b878ac74aa69081b489b88812452147d1fb91854d42
+size 11006077

hello_world/static/lib/three/addons/controls/OrbitControls.js

@@ -0,0 +1,1417 @@
+import {
+	EventDispatcher,
+	MOUSE,
+	Quaternion,
+	Spherical,
+	TOUCH,
+	Vector2,
+	Vector3,
+	Plane,
+	Ray,
+	MathUtils
+} from 'three';
+
+// OrbitControls performs orbiting, dollying (zooming), and panning.
+// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+//
+//    Orbit - left mouse / touch: one-finger move
+//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
+//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
+
+const _changeEvent = { type: 'change' };
+const _startEvent = { type: 'start' };
+const _endEvent = { type: 'end' };
+const _ray = new Ray();
+const _plane = new Plane();
+const TILT_LIMIT = Math.cos( 70 * MathUtils.DEG2RAD );
+
+class OrbitControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		this.object = object;
+		this.domElement = domElement;
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
+
+		// Set to false to disable this control
+		this.enabled = true;
+
+		// "target" sets the location of focus, where the object orbits around
+		this.target = new Vector3();
+
+		// Sets the 3D cursor (similar to Blender), from which the maxTargetRadius takes effect
+		this.cursor = new Vector3();
+
+		// How far you can dolly in and out ( PerspectiveCamera only )
+		this.minDistance = 0;
+		this.maxDistance = Infinity;
+
+		// How far you can zoom in and out ( OrthographicCamera only )
+		this.minZoom = 0;
+		this.maxZoom = Infinity;
+
+		// Limit camera target within a spherical area around the cursor
+		this.minTargetRadius = 0;
+		this.maxTargetRadius = Infinity;
+
+		// How far you can orbit vertically, upper and lower limits.
+		// Range is 0 to Math.PI radians.
+		this.minPolarAngle = 0; // radians
+		this.maxPolarAngle = Math.PI; // radians
+
+		// How far you can orbit horizontally, upper and lower limits.
+		// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
+		this.minAzimuthAngle = - Infinity; // radians
+		this.maxAzimuthAngle = Infinity; // radians
+
+		// Set to true to enable damping (inertia)
+		// If damping is enabled, you must call controls.update() in your animation loop
+		this.enableDamping = false;
+		this.dampingFactor = 0.05;
+
+		// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+		// Set to false to disable zooming
+		this.enableZoom = true;
+		this.zoomSpeed = 1.0;
+
+		// Set to false to disable rotating
+		this.enableRotate = true;
+		this.rotateSpeed = 1.0;
+
+		// Set to false to disable panning
+		this.enablePan = true;
+		this.panSpeed = 1.0;
+		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
+		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+		this.zoomToCursor = false;
+
+		// Set to true to automatically rotate around the target
+		// If auto-rotate is enabled, you must call controls.update() in your animation loop
+		this.autoRotate = false;
+		this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
+
+		// The four arrow keys
+		this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
+
+		// Mouse buttons
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+
+		// Touch fingers
+		this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+
+		// for reset
+		this.target0 = this.target.clone();
+		this.position0 = this.object.position.clone();
+		this.zoom0 = this.object.zoom;
+
+		// the target DOM element for key events
+		this._domElementKeyEvents = null;
+
+		//
+		// public methods
+		//
+
+		this.getPolarAngle = function () {
+
+			return spherical.phi;
+
+		};
+
+		this.getAzimuthalAngle = function () {
+
+			return spherical.theta;
+
+		};
+
+		this.getDistance = function () {
+
+			return this.object.position.distanceTo( this.target );
+
+		};
+
+		this.listenToKeyEvents = function ( domElement ) {
+
+			domElement.addEventListener( 'keydown', onKeyDown );
+			this._domElementKeyEvents = domElement;
+
+		};
+
+		this.stopListenToKeyEvents = function () {
+
+			this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
+			this._domElementKeyEvents = null;
+
+		};
+
+		this.saveState = function () {
+
+			scope.target0.copy( scope.target );
+			scope.position0.copy( scope.object.position );
+			scope.zoom0 = scope.object.zoom;
+
+		};
+
+		this.reset = function () {
+
+			scope.target.copy( scope.target0 );
+			scope.object.position.copy( scope.position0 );
+			scope.object.zoom = scope.zoom0;
+
+			scope.object.updateProjectionMatrix();
+			scope.dispatchEvent( _changeEvent );
+
+			scope.update();
+
+			state = STATE.NONE;
+
+		};
+
+		// this method is exposed, but perhaps it would be better if we can make it private...
+		this.update = function () {
+
+			const offset = new Vector3();
+
+			// so camera.up is the orbit axis
+			const quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
+			const quatInverse = quat.clone().invert();
+
+			const lastPosition = new Vector3();
+			const lastQuaternion = new Quaternion();
+			const lastTargetPosition = new Vector3();
+
+			const twoPI = 2 * Math.PI;
+
+			return function update( deltaTime = null ) {
+
+				const position = scope.object.position;
+
+				offset.copy( position ).sub( scope.target );
+
+				// rotate offset to "y-axis-is-up" space
+				offset.applyQuaternion( quat );
+
+				// angle from z-axis around y-axis
+				spherical.setFromVector3( offset );
+
+				if ( scope.autoRotate && state === STATE.NONE ) {
+
+					rotateLeft( getAutoRotationAngle( deltaTime ) );
+
+				}
+
+				if ( scope.enableDamping ) {
+
+					spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+					spherical.phi += sphericalDelta.phi * scope.dampingFactor;
+
+				} else {
+
+					spherical.theta += sphericalDelta.theta;
+					spherical.phi += sphericalDelta.phi;
+
+				}
+
+				// restrict theta to be between desired limits
+
+				let min = scope.minAzimuthAngle;
+				let max = scope.maxAzimuthAngle;
+
+				if ( isFinite( min ) && isFinite( max ) ) {
+
+					if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
+
+					if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
+
+					if ( min <= max ) {
+
+						spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
+
+					} else {
+
+						spherical.theta = ( spherical.theta > ( min + max ) / 2 ) ?
+							Math.max( min, spherical.theta ) :
+							Math.min( max, spherical.theta );
+
+					}
+
+				}
+
+				// restrict phi to be between desired limits
+				spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
+
+				spherical.makeSafe();
+
+
+				// move target to panned location
+
+				if ( scope.enableDamping === true ) {
+
+					scope.target.addScaledVector( panOffset, scope.dampingFactor );
+
+				} else {
+
+					scope.target.add( panOffset );
+
+				}
+
+				// Limit the target distance from the cursor to create a sphere around the center of interest
+				scope.target.sub( scope.cursor );
+				scope.target.clampLength( scope.minTargetRadius, scope.maxTargetRadius );
+				scope.target.add( scope.cursor );
+
+				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
+				// we adjust zoom later in these cases
+				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
+
+					spherical.radius = clampDistance( spherical.radius );
+
+				} else {
+
+					spherical.radius = clampDistance( spherical.radius * scale );
+
+				}
+
+				offset.setFromSpherical( spherical );
+
+				// rotate offset back to "camera-up-vector-is-up" space
+				offset.applyQuaternion( quatInverse );
+
+				position.copy( scope.target ).add( offset );
+
+				scope.object.lookAt( scope.target );
+
+				if ( scope.enableDamping === true ) {
+
+					sphericalDelta.theta *= ( 1 - scope.dampingFactor );
+					sphericalDelta.phi *= ( 1 - scope.dampingFactor );
+
+					panOffset.multiplyScalar( 1 - scope.dampingFactor );
+
+				} else {
+
+					sphericalDelta.set( 0, 0, 0 );
+
+					panOffset.set( 0, 0, 0 );
+
+				}
+
+				// adjust camera position
+				let zoomChanged = false;
+				if ( scope.zoomToCursor && performCursorZoom ) {
+
+					let newRadius = null;
+					if ( scope.object.isPerspectiveCamera ) {
+
+						// move the camera down the pointer ray
+						// this method avoids floating point error
+						const prevRadius = offset.length();
+						newRadius = clampDistance( prevRadius * scale );
+
+						const radiusDelta = prevRadius - newRadius;
+						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
+						scope.object.updateMatrixWorld();
+
+					} else if ( scope.object.isOrthographicCamera ) {
+
+						// adjust the ortho camera position based on zoom changes
+						const mouseBefore = new Vector3( mouse.x, mouse.y, 0 );
+						mouseBefore.unproject( scope.object );
+
+						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+						scope.object.updateProjectionMatrix();
+						zoomChanged = true;
+
+						const mouseAfter = new Vector3( mouse.x, mouse.y, 0 );
+						mouseAfter.unproject( scope.object );
+
+						scope.object.position.sub( mouseAfter ).add( mouseBefore );
+						scope.object.updateMatrixWorld();
+
+						newRadius = offset.length();
+
+					} else {
+
+						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled.' );
+						scope.zoomToCursor = false;
+
+					}
+
+					// handle the placement of the target
+					if ( newRadius !== null ) {
+
+						if ( this.screenSpacePanning ) {
+
+							// position the orbit target in front of the new camera position
+							scope.target.set( 0, 0, - 1 )
+								.transformDirection( scope.object.matrix )
+								.multiplyScalar( newRadius )
+								.add( scope.object.position );
+
+						} else {
+
+							// get the ray and translation plane to compute target
+							_ray.origin.copy( scope.object.position );
+							_ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
+
+							// if the camera is 20 degrees above the horizon then don't adjust the focus target to avoid
+							// extremely large values
+							if ( Math.abs( scope.object.up.dot( _ray.direction ) ) < TILT_LIMIT ) {
+
+								object.lookAt( scope.target );
+
+							} else {
+
+								_plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
+								_ray.intersectPlane( _plane, scope.target );
+
+							}
+
+						}
+
+					}
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+					scope.object.updateProjectionMatrix();
+					zoomChanged = true;
+
+				}
+
+				scale = 1;
+				performCursorZoom = false;
+
+				// update condition is:
+				// min(camera displacement, camera rotation in radians)^2 > EPS
+				// using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+				if ( zoomChanged ||
+					lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+					8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ||
+					lastTargetPosition.distanceToSquared( scope.target ) > 0 ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+					lastQuaternion.copy( scope.object.quaternion );
+					lastTargetPosition.copy( scope.target );
+
+					return true;
+
+				}
+
+				return false;
+
+			};
+
+		}();
+
+		this.dispose = function () {
+
+			scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
+
+			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+			scope.domElement.removeEventListener( 'pointercancel', onPointerUp );
+			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+
+			if ( scope._domElementKeyEvents !== null ) {
+
+				scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
+				scope._domElementKeyEvents = null;
+
+			}
+
+			//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+
+		};
+
+		//
+		// internals
+		//
+
+		const scope = this;
+
+		const STATE = {
+			NONE: - 1,
+			ROTATE: 0,
+			DOLLY: 1,
+			PAN: 2,
+			TOUCH_ROTATE: 3,
+			TOUCH_PAN: 4,
+			TOUCH_DOLLY_PAN: 5,
+			TOUCH_DOLLY_ROTATE: 6
+		};
+
+		let state = STATE.NONE;
+
+		const EPS = 0.000001;
+
+		// current position in spherical coordinates
+		const spherical = new Spherical();
+		const sphericalDelta = new Spherical();
+
+		let scale = 1;
+		const panOffset = new Vector3();
+
+		const rotateStart = new Vector2();
+		const rotateEnd = new Vector2();
+		const rotateDelta = new Vector2();
+
+		const panStart = new Vector2();
+		const panEnd = new Vector2();
+		const panDelta = new Vector2();
+
+		const dollyStart = new Vector2();
+		const dollyEnd = new Vector2();
+		const dollyDelta = new Vector2();
+
+		const dollyDirection = new Vector3();
+		const mouse = new Vector2();
+		let performCursorZoom = false;
+
+		const pointers = [];
+		const pointerPositions = {};
+
+		function getAutoRotationAngle( deltaTime ) {
+
+			if ( deltaTime !== null ) {
+
+				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
+
+			} else {
+
+				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+			}
+
+		}
+
+		function getZoomScale( delta ) {
+
+			const normalized_delta = Math.abs( delta ) / ( 100 * ( window.devicePixelRatio | 0 ) );
+			return Math.pow( 0.95, scope.zoomSpeed * normalized_delta );
+
+		}
+
+		function rotateLeft( angle ) {
+
+			sphericalDelta.theta -= angle;
+
+		}
+
+		function rotateUp( angle ) {
+
+			sphericalDelta.phi -= angle;
+
+		}
+
+		const panLeft = function () {
+
+			const v = new Vector3();
+
+			return function panLeft( distance, objectMatrix ) {
+
+				v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
+				v.multiplyScalar( - distance );
+
+				panOffset.add( v );
+
+			};
+
+		}();
+
+		const panUp = function () {
+
+			const v = new Vector3();
+
+			return function panUp( distance, objectMatrix ) {
+
+				if ( scope.screenSpacePanning === true ) {
+
+					v.setFromMatrixColumn( objectMatrix, 1 );
+
+				} else {
+
+					v.setFromMatrixColumn( objectMatrix, 0 );
+					v.crossVectors( scope.object.up, v );
+
+				}
+
+				v.multiplyScalar( distance );
+
+				panOffset.add( v );
+
+			};
+
+		}();
+
+		// deltaX and deltaY are in pixels; right and down are positive
+		const pan = function () {
+
+			const offset = new Vector3();
+
+			return function pan( deltaX, deltaY ) {
+
+				const element = scope.domElement;
+
+				if ( scope.object.isPerspectiveCamera ) {
+
+					// perspective
+					const position = scope.object.position;
+					offset.copy( position ).sub( scope.target );
+					let targetDistance = offset.length();
+
+					// half of the fov is center to top of screen
+					targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
+
+					// we use only clientHeight here so aspect ratio does not distort speed
+					panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
+					panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					// orthographic
+					panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
+					panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
+
+				} else {
+
+					// camera neither orthographic nor perspective
+					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
+					scope.enablePan = false;
+
+				}
+
+			};
+
+		}();
+
+		function dollyOut( dollyScale ) {
+
+			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
+
+				scale /= dollyScale;
+
+			} else {
+
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+				scope.enableZoom = false;
+
+			}
+
+		}
+
+		function dollyIn( dollyScale ) {
+
+			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
+
+				scale *= dollyScale;
+
+			} else {
+
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+				scope.enableZoom = false;
+
+			}
+
+		}
+
+		function updateZoomParameters( x, y ) {
+
+			if ( ! scope.zoomToCursor ) {
+
+				return;
+
+			}
+
+			performCursorZoom = true;
+
+			const rect = scope.domElement.getBoundingClientRect();
+			const dx = x - rect.left;
+			const dy = y - rect.top;
+			const w = rect.width;
+			const h = rect.height;
+
+			mouse.x = ( dx / w ) * 2 - 1;
+			mouse.y = - ( dy / h ) * 2 + 1;
+
+			dollyDirection.set( mouse.x, mouse.y, 1 ).unproject( scope.object ).sub( scope.object.position ).normalize();
+
+		}
+
+		function clampDistance( dist ) {
+
+			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );
+
+		}
+
+		//
+		// event callbacks - update the object state
+		//
+
+		function handleMouseDownRotate( event ) {
+
+			rotateStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseDownDolly( event ) {
+
+			updateZoomParameters( event.clientX, event.clientX );
+			dollyStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseDownPan( event ) {
+
+			panStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseMoveRotate( event ) {
+
+			rotateEnd.set( event.clientX, event.clientY );
+
+			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+
+			const element = scope.domElement;
+
+			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+
+			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+
+			rotateStart.copy( rotateEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseMoveDolly( event ) {
+
+			dollyEnd.set( event.clientX, event.clientY );
+
+			dollyDelta.subVectors( dollyEnd, dollyStart );
+
+			if ( dollyDelta.y > 0 ) {
+
+				dollyOut( getZoomScale( dollyDelta.y ) );
+
+			} else if ( dollyDelta.y < 0 ) {
+
+				dollyIn( getZoomScale( dollyDelta.y ) );
+
+			}
+
+			dollyStart.copy( dollyEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseMovePan( event ) {
+
+			panEnd.set( event.clientX, event.clientY );
+
+			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+
+			pan( panDelta.x, panDelta.y );
+
+			panStart.copy( panEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseWheel( event ) {
+
+			updateZoomParameters( event.clientX, event.clientY );
+
+			if ( event.deltaY < 0 ) {
+
+				dollyIn( getZoomScale( event.deltaY ) );
+
+			} else if ( event.deltaY > 0 ) {
+
+				dollyOut( getZoomScale( event.deltaY ) );
+
+			}
+
+			scope.update();
+
+		}
+
+		function handleKeyDown( event ) {
+
+			let needsUpdate = false;
+
+			switch ( event.code ) {
+
+				case scope.keys.UP:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, scope.keyPanSpeed );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.BOTTOM:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, - scope.keyPanSpeed );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.LEFT:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( scope.keyPanSpeed, 0 );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.RIGHT:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( - scope.keyPanSpeed, 0 );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+			}
+
+			if ( needsUpdate ) {
+
+				// prevent the browser from scrolling on cursor keys
+				event.preventDefault();
+
+				scope.update();
+
+			}
+
+
+		}
+
+		function handleTouchStartRotate( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				rotateStart.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				rotateStart.set( x, y );
+
+			}
+
+		}
+
+		function handleTouchStartPan( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				panStart.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				panStart.set( x, y );
+
+			}
+
+		}
+
+		function handleTouchStartDolly( event ) {
+
+			const position = getSecondPointerPosition( event );
+
+			const dx = event.pageX - position.x;
+			const dy = event.pageY - position.y;
+
+			const distance = Math.sqrt( dx * dx + dy * dy );
+
+			dollyStart.set( 0, distance );
+
+		}
+
+		function handleTouchStartDollyPan( event ) {
+
+			if ( scope.enableZoom ) handleTouchStartDolly( event );
+
+			if ( scope.enablePan ) handleTouchStartPan( event );
+
+		}
+
+		function handleTouchStartDollyRotate( event ) {
+
+			if ( scope.enableZoom ) handleTouchStartDolly( event );
+
+			if ( scope.enableRotate ) handleTouchStartRotate( event );
+
+		}
+
+		function handleTouchMoveRotate( event ) {
+
+			if ( pointers.length == 1 ) {
+
+				rotateEnd.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				rotateEnd.set( x, y );
+
+			}
+
+			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+
+			const element = scope.domElement;
+
+			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+
+			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+
+			rotateStart.copy( rotateEnd );
+
+		}
+
+		function handleTouchMovePan( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				panEnd.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				panEnd.set( x, y );
+
+			}
+
+			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+
+			pan( panDelta.x, panDelta.y );
+
+			panStart.copy( panEnd );
+
+		}
+
+		function handleTouchMoveDolly( event ) {
+
+			const position = getSecondPointerPosition( event );
+
+			const dx = event.pageX - position.x;
+			const dy = event.pageY - position.y;
+
+			const distance = Math.sqrt( dx * dx + dy * dy );
+
+			dollyEnd.set( 0, distance );
+
+			dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
+
+			dollyOut( dollyDelta.y );
+
+			dollyStart.copy( dollyEnd );
+
+			const centerX = ( event.pageX + position.x ) * 0.5;
+			const centerY = ( event.pageY + position.y ) * 0.5;
+
+			updateZoomParameters( centerX, centerY );
+
+		}
+
+		function handleTouchMoveDollyPan( event ) {
+
+			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+
+			if ( scope.enablePan ) handleTouchMovePan( event );
+
+		}
+
+		function handleTouchMoveDollyRotate( event ) {
+
+			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+
+			if ( scope.enableRotate ) handleTouchMoveRotate( event );
+
+		}
+
+		//
+		// event handlers - FSM: listen for events and reset state
+		//
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( pointers.length === 0 ) {
+
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			removePointer( event );
+
+			if ( pointers.length === 0 ) {
+
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			scope.dispatchEvent( _endEvent );
+
+			state = STATE.NONE;
+
+		}
+
+		function onMouseDown( event ) {
+
+			let mouseAction;
+
+			switch ( event.button ) {
+
+				case 0:
+
+					mouseAction = scope.mouseButtons.LEFT;
+					break;
+
+				case 1:
+
+					mouseAction = scope.mouseButtons.MIDDLE;
+					break;
+
+				case 2:
+
+					mouseAction = scope.mouseButtons.RIGHT;
+					break;
+
+				default:
+
+					mouseAction = - 1;
+
+			}
+
+			switch ( mouseAction ) {
+
+				case MOUSE.DOLLY:
+
+					if ( scope.enableZoom === false ) return;
+
+					handleMouseDownDolly( event );
+
+					state = STATE.DOLLY;
+
+					break;
+
+				case MOUSE.ROTATE:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						if ( scope.enablePan === false ) return;
+
+						handleMouseDownPan( event );
+
+						state = STATE.PAN;
+
+					} else {
+
+						if ( scope.enableRotate === false ) return;
+
+						handleMouseDownRotate( event );
+
+						state = STATE.ROTATE;
+
+					}
+
+					break;
+
+				case MOUSE.PAN:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						if ( scope.enableRotate === false ) return;
+
+						handleMouseDownRotate( event );
+
+						state = STATE.ROTATE;
+
+					} else {
+
+						if ( scope.enablePan === false ) return;
+
+						handleMouseDownPan( event );
+
+						state = STATE.PAN;
+
+					}
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+			if ( state !== STATE.NONE ) {
+
+				scope.dispatchEvent( _startEvent );
+
+			}
+
+		}
+
+		function onMouseMove( event ) {
+
+			switch ( state ) {
+
+				case STATE.ROTATE:
+
+					if ( scope.enableRotate === false ) return;
+
+					handleMouseMoveRotate( event );
+
+					break;
+
+				case STATE.DOLLY:
+
+					if ( scope.enableZoom === false ) return;
+
+					handleMouseMoveDolly( event );
+
+					break;
+
+				case STATE.PAN:
+
+					if ( scope.enablePan === false ) return;
+
+					handleMouseMovePan( event );
+
+					break;
+
+			}
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
+
+			event.preventDefault();
+
+			scope.dispatchEvent( _startEvent );
+
+			handleMouseWheel( event );
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onKeyDown( event ) {
+
+			if ( scope.enabled === false || scope.enablePan === false ) return;
+
+			handleKeyDown( event );
+
+		}
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( pointers.length ) {
+
+				case 1:
+
+					switch ( scope.touches.ONE ) {
+
+						case TOUCH.ROTATE:
+
+							if ( scope.enableRotate === false ) return;
+
+							handleTouchStartRotate( event );
+
+							state = STATE.TOUCH_ROTATE;
+
+							break;
+
+						case TOUCH.PAN:
+
+							if ( scope.enablePan === false ) return;
+
+							handleTouchStartPan( event );
+
+							state = STATE.TOUCH_PAN;
+
+							break;
+
+						default:
+
+							state = STATE.NONE;
+
+					}
+
+					break;
+
+				case 2:
+
+					switch ( scope.touches.TWO ) {
+
+						case TOUCH.DOLLY_PAN:
+
+							if ( scope.enableZoom === false && scope.enablePan === false ) return;
+
+							handleTouchStartDollyPan( event );
+
+							state = STATE.TOUCH_DOLLY_PAN;
+
+							break;
+
+						case TOUCH.DOLLY_ROTATE:
+
+							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+
+							handleTouchStartDollyRotate( event );
+
+							state = STATE.TOUCH_DOLLY_ROTATE;
+
+							break;
+
+						default:
+
+							state = STATE.NONE;
+
+					}
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+			if ( state !== STATE.NONE ) {
+
+				scope.dispatchEvent( _startEvent );
+
+			}
+
+		}
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			switch ( state ) {
+
+				case STATE.TOUCH_ROTATE:
+
+					if ( scope.enableRotate === false ) return;
+
+					handleTouchMoveRotate( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_PAN:
+
+					if ( scope.enablePan === false ) return;
+
+					handleTouchMovePan( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_DOLLY_PAN:
+
+					if ( scope.enableZoom === false && scope.enablePan === false ) return;
+
+					handleTouchMoveDollyPan( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_DOLLY_ROTATE:
+
+					if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+
+					handleTouchMoveDollyRotate( event );
+
+					scope.update();
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+		}
+
+		function onContextMenu( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+		}
+
+		function addPointer( event ) {
+
+			pointers.push( event.pointerId );
+
+		}
+
+		function removePointer( event ) {
+
+			delete pointerPositions[ event.pointerId ];
+
+			for ( let i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) {
+
+					pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function trackPointer( event ) {
+
+			let position = pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new Vector2();
+				pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			const pointerId = ( event.pointerId === pointers[ 0 ] ) ? pointers[ 1 ] : pointers[ 0 ];
+
+			return pointerPositions[ pointerId ];
+
+		}
+
+		//
+
+		scope.domElement.addEventListener( 'contextmenu', onContextMenu );
+
+		scope.domElement.addEventListener( 'pointerdown', onPointerDown );
+		scope.domElement.addEventListener( 'pointercancel', onPointerUp );
+		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+		// force an update at start
+
+		this.update();
+
+	}
+
+}
+
+export { OrbitControls };

hello_world/static/lib/three/addons/utils/BufferGeometryUtils.js

@@ -0,0 +1,1375 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Float32BufferAttribute,
+	InstancedBufferAttribute,
+	InterleavedBuffer,
+	InterleavedBufferAttribute,
+	TriangleFanDrawMode,
+	TriangleStripDrawMode,
+	TrianglesDrawMode,
+	Vector3,
+} from 'three';
+
+function computeMikkTSpaceTangents( geometry, MikkTSpace, negateSign = true ) {
+
+	if ( ! MikkTSpace || ! MikkTSpace.isReady ) {
+
+		throw new Error( 'BufferGeometryUtils: Initialized MikkTSpace library required.' );
+
+	}
+
+	if ( ! geometry.hasAttribute( 'position' ) || ! geometry.hasAttribute( 'normal' ) || ! geometry.hasAttribute( 'uv' ) ) {
+
+		throw new Error( 'BufferGeometryUtils: Tangents require "position", "normal", and "uv" attributes.' );
+
+	}
+
+	function getAttributeArray( attribute ) {
+
+		if ( attribute.normalized || attribute.isInterleavedBufferAttribute ) {
+
+			const dstArray = new Float32Array( attribute.count * attribute.itemSize );
+
+			for ( let i = 0, j = 0; i < attribute.count; i ++ ) {
+
+				dstArray[ j ++ ] = attribute.getX( i );
+				dstArray[ j ++ ] = attribute.getY( i );
+
+				if ( attribute.itemSize > 2 ) {
+
+					dstArray[ j ++ ] = attribute.getZ( i );
+
+				}
+
+			}
+
+			return dstArray;
+
+		}
+
+		if ( attribute.array instanceof Float32Array ) {
+
+			return attribute.array;
+
+		}
+
+		return new Float32Array( attribute.array );
+
+	}
+
+	// MikkTSpace algorithm requires non-indexed input.
+
+	const _geometry = geometry.index ? geometry.toNonIndexed() : geometry;
+
+	// Compute vertex tangents.
+
+	const tangents = MikkTSpace.generateTangents(
+
+		getAttributeArray( _geometry.attributes.position ),
+		getAttributeArray( _geometry.attributes.normal ),
+		getAttributeArray( _geometry.attributes.uv )
+
+	);
+
+	// Texture coordinate convention of glTF differs from the apparent
+	// default of the MikkTSpace library; .w component must be flipped.
+
+	if ( negateSign ) {
+
+		for ( let i = 3; i < tangents.length; i += 4 ) {
+
+			tangents[ i ] *= - 1;
+
+		}
+
+	}
+
+	//
+
+	_geometry.setAttribute( 'tangent', new BufferAttribute( tangents, 4 ) );
+
+	if ( geometry !== _geometry ) {
+
+		geometry.copy( _geometry );
+
+	}
+
+	return geometry;
+
+}
+
+/**
+ * @param  {Array<BufferGeometry>} geometries
+ * @param  {Boolean} useGroups
+ * @return {BufferGeometry}
+ */
+function mergeGeometries( geometries, useGroups = false ) {
+
+	const isIndexed = geometries[ 0 ].index !== null;
+
+	const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
+	const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
+
+	const attributes = {};
+	const morphAttributes = {};
+
+	const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
+
+	const mergedGeometry = new BufferGeometry();
+
+	let offset = 0;
+
+	for ( let i = 0; i < geometries.length; ++ i ) {
+
+		const geometry = geometries[ i ];
+		let attributesCount = 0;
+
+		// ensure that all geometries are indexed, or none
+
+		if ( isIndexed !== ( geometry.index !== null ) ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );
+			return null;
+
+		}
+
+		// gather attributes, exit early if they're different
+
+		for ( const name in geometry.attributes ) {
+
+			if ( ! attributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );
+				return null;
+
+			}
+
+			if ( attributes[ name ] === undefined ) attributes[ name ] = [];
+
+			attributes[ name ].push( geometry.attributes[ name ] );
+
+			attributesCount ++;
+
+		}
+
+		// ensure geometries have the same number of attributes
+
+		if ( attributesCount !== attributesUsed.size ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );
+			return null;
+
+		}
+
+		// gather morph attributes, exit early if they're different
+
+		if ( morphTargetsRelative !== geometry.morphTargetsRelative ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );
+			return null;
+
+		}
+
+		for ( const name in geometry.morphAttributes ) {
+
+			if ( ! morphAttributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );
+				return null;
+
+			}
+
+			if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
+
+			morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
+
+		}
+
+		if ( useGroups ) {
+
+			let count;
+
+			if ( isIndexed ) {
+
+				count = geometry.index.count;
+
+			} else if ( geometry.attributes.position !== undefined ) {
+
+				count = geometry.attributes.position.count;
+
+			} else {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );
+				return null;
+
+			}
+
+			mergedGeometry.addGroup( offset, count, i );
+
+			offset += count;
+
+		}
+
+	}
+
+	// merge indices
+
+	if ( isIndexed ) {
+
+		let indexOffset = 0;
+		const mergedIndex = [];
+
+		for ( let i = 0; i < geometries.length; ++ i ) {
+
+			const index = geometries[ i ].index;
+
+			for ( let j = 0; j < index.count; ++ j ) {
+
+				mergedIndex.push( index.getX( j ) + indexOffset );
+
+			}
+
+			indexOffset += geometries[ i ].attributes.position.count;
+
+		}
+
+		mergedGeometry.setIndex( mergedIndex );
+
+	}
+
+	// merge attributes
+
+	for ( const name in attributes ) {
+
+		const mergedAttribute = mergeAttributes( attributes[ name ] );
+
+		if ( ! mergedAttribute ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed while trying to merge the ' + name + ' attribute.' );
+			return null;
+
+		}
+
+		mergedGeometry.setAttribute( name, mergedAttribute );
+
+	}
+
+	// merge morph attributes
+
+	for ( const name in morphAttributes ) {
+
+		const numMorphTargets = morphAttributes[ name ][ 0 ].length;
+
+		if ( numMorphTargets === 0 ) break;
+
+		mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
+		mergedGeometry.morphAttributes[ name ] = [];
+
+		for ( let i = 0; i < numMorphTargets; ++ i ) {
+
+			const morphAttributesToMerge = [];
+
+			for ( let j = 0; j < morphAttributes[ name ].length; ++ j ) {
+
+				morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
+
+			}
+
+			const mergedMorphAttribute = mergeAttributes( morphAttributesToMerge );
+
+			if ( ! mergedMorphAttribute ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );
+				return null;
+
+			}
+
+			mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
+
+		}
+
+	}
+
+	return mergedGeometry;
+
+}
+
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {BufferAttribute}
+ */
+function mergeAttributes( attributes ) {
+
+	let TypedArray;
+	let itemSize;
+	let normalized;
+	let gpuType = - 1;
+	let arrayLength = 0;
+
+	for ( let i = 0; i < attributes.length; ++ i ) {
+
+		const attribute = attributes[ i ];
+
+		if ( attribute.isInterleavedBufferAttribute ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. InterleavedBufferAttributes are not supported.' );
+			return null;
+
+		}
+
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.' );
+			return null;
+
+		}
+
+		if ( itemSize === undefined ) itemSize = attribute.itemSize;
+		if ( itemSize !== attribute.itemSize ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		if ( normalized === undefined ) normalized = attribute.normalized;
+		if ( normalized !== attribute.normalized ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		if ( gpuType === - 1 ) gpuType = attribute.gpuType;
+		if ( gpuType !== attribute.gpuType ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.gpuType must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		arrayLength += attribute.array.length;
+
+	}
+
+	const array = new TypedArray( arrayLength );
+	let offset = 0;
+
+	for ( let i = 0; i < attributes.length; ++ i ) {
+
+		array.set( attributes[ i ].array, offset );
+
+		offset += attributes[ i ].array.length;
+
+	}
+
+	const result = new BufferAttribute( array, itemSize, normalized );
+	if ( gpuType !== undefined ) {
+
+		result.gpuType = gpuType;
+
+	}
+
+	return result;
+
+}
+
+/**
+ * @param {BufferAttribute}
+ * @return {BufferAttribute}
+ */
+export function deepCloneAttribute( attribute ) {
+
+	if ( attribute.isInstancedInterleavedBufferAttribute || attribute.isInterleavedBufferAttribute ) {
+
+		return deinterleaveAttribute( attribute );
+
+	}
+
+	if ( attribute.isInstancedBufferAttribute ) {
+
+		return new InstancedBufferAttribute().copy( attribute );
+
+	}
+
+	return new BufferAttribute().copy( attribute );
+
+}
+
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {Array<InterleavedBufferAttribute>}
+ */
+function interleaveAttributes( attributes ) {
+
+	// Interleaves the provided attributes into an InterleavedBuffer and returns
+	// a set of InterleavedBufferAttributes for each attribute
+	let TypedArray;
+	let arrayLength = 0;
+	let stride = 0;
+
+	// calculate the length and type of the interleavedBuffer
+	for ( let i = 0, l = attributes.length; i < l; ++ i ) {
+
+		const attribute = attributes[ i ];
+
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
+
+			console.error( 'AttributeBuffers of different types cannot be interleaved' );
+			return null;
+
+		}
+
+		arrayLength += attribute.array.length;
+		stride += attribute.itemSize;
+
+	}
+
+	// Create the set of buffer attributes
+	const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
+	let offset = 0;
+	const res = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+
+	for ( let j = 0, l = attributes.length; j < l; j ++ ) {
+
+		const attribute = attributes[ j ];
+		const itemSize = attribute.itemSize;
+		const count = attribute.count;
+		const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
+		res.push( iba );
+
+		offset += itemSize;
+
+		// Move the data for each attribute into the new interleavedBuffer
+		// at the appropriate offset
+		for ( let c = 0; c < count; c ++ ) {
+
+			for ( let k = 0; k < itemSize; k ++ ) {
+
+				iba[ setters[ k ] ]( c, attribute[ getters[ k ] ]( c ) );
+
+			}
+
+		}
+
+	}
+
+	return res;
+
+}
+
+// returns a new, non-interleaved version of the provided attribute
+export function deinterleaveAttribute( attribute ) {
+
+	const cons = attribute.data.array.constructor;
+	const count = attribute.count;
+	const itemSize = attribute.itemSize;
+	const normalized = attribute.normalized;
+
+	const array = new cons( count * itemSize );
+	let newAttribute;
+	if ( attribute.isInstancedInterleavedBufferAttribute ) {
+
+		newAttribute = new InstancedBufferAttribute( array, itemSize, normalized, attribute.meshPerAttribute );
+
+	} else {
+
+		newAttribute = new BufferAttribute( array, itemSize, normalized );
+
+	}
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		newAttribute.setX( i, attribute.getX( i ) );
+
+		if ( itemSize >= 2 ) {
+
+			newAttribute.setY( i, attribute.getY( i ) );
+
+		}
+
+		if ( itemSize >= 3 ) {
+
+			newAttribute.setZ( i, attribute.getZ( i ) );
+
+		}
+
+		if ( itemSize >= 4 ) {
+
+			newAttribute.setW( i, attribute.getW( i ) );
+
+		}
+
+	}
+
+	return newAttribute;
+
+}
+
+// deinterleaves all attributes on the geometry
+export function deinterleaveGeometry( geometry ) {
+
+	const attributes = geometry.attributes;
+	const morphTargets = geometry.morphTargets;
+	const attrMap = new Map();
+
+	for ( const key in attributes ) {
+
+		const attr = attributes[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
+
+			if ( ! attrMap.has( attr ) ) {
+
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
+
+			}
+
+			attributes[ key ] = attrMap.get( attr );
+
+		}
+
+	}
+
+	for ( const key in morphTargets ) {
+
+		const attr = morphTargets[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
+
+			if ( ! attrMap.has( attr ) ) {
+
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
+
+			}
+
+			morphTargets[ key ] = attrMap.get( attr );
+
+		}
+
+	}
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @return {number}
+ */
+function estimateBytesUsed( geometry ) {
+
+	// Return the estimated memory used by this geometry in bytes
+	// Calculate using itemSize, count, and BYTES_PER_ELEMENT to account
+	// for InterleavedBufferAttributes.
+	let mem = 0;
+	for ( const name in geometry.attributes ) {
+
+		const attr = geometry.getAttribute( name );
+		mem += attr.count * attr.itemSize * attr.array.BYTES_PER_ELEMENT;
+
+	}
+
+	const indices = geometry.getIndex();
+	mem += indices ? indices.count * indices.itemSize * indices.array.BYTES_PER_ELEMENT : 0;
+	return mem;
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} tolerance
+ * @return {BufferGeometry}
+ */
+function mergeVertices( geometry, tolerance = 1e-4 ) {
+
+	tolerance = Math.max( tolerance, Number.EPSILON );
+
+	// Generate an index buffer if the geometry doesn't have one, or optimize it
+	// if it's already available.
+	const hashToIndex = {};
+	const indices = geometry.getIndex();
+	const positions = geometry.getAttribute( 'position' );
+	const vertexCount = indices ? indices.count : positions.count;
+
+	// next value for triangle indices
+	let nextIndex = 0;
+
+	// attributes and new attribute arrays
+	const attributeNames = Object.keys( geometry.attributes );
+	const tmpAttributes = {};
+	const tmpMorphAttributes = {};
+	const newIndices = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+
+	// Initialize the arrays, allocating space conservatively. Extra
+	// space will be trimmed in the last step.
+	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+
+		const name = attributeNames[ i ];
+		const attr = geometry.attributes[ name ];
+
+		tmpAttributes[ name ] = new BufferAttribute(
+			new attr.array.constructor( attr.count * attr.itemSize ),
+			attr.itemSize,
+			attr.normalized
+		);
+
+		const morphAttr = geometry.morphAttributes[ name ];
+		if ( morphAttr ) {
+
+			tmpMorphAttributes[ name ] = new BufferAttribute(
+				new morphAttr.array.constructor( morphAttr.count * morphAttr.itemSize ),
+				morphAttr.itemSize,
+				morphAttr.normalized
+			);
+
+		}
+
+	}
+
+	// convert the error tolerance to an amount of decimal places to truncate to
+	const halfTolerance = tolerance * 0.5;
+	const exponent = Math.log10( 1 / tolerance );
+	const hashMultiplier = Math.pow( 10, exponent );
+	const hashAdditive = halfTolerance * hashMultiplier;
+	for ( let i = 0; i < vertexCount; i ++ ) {
+
+		const index = indices ? indices.getX( i ) : i;
+
+		// Generate a hash for the vertex attributes at the current index 'i'
+		let hash = '';
+		for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+
+			const name = attributeNames[ j ];
+			const attribute = geometry.getAttribute( name );
+			const itemSize = attribute.itemSize;
+
+			for ( let k = 0; k < itemSize; k ++ ) {
+
+				// double tilde truncates the decimal value
+				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * hashMultiplier + hashAdditive ) },`;
+
+			}
+
+		}
+
+		// Add another reference to the vertex if it's already
+		// used by another index
+		if ( hash in hashToIndex ) {
+
+			newIndices.push( hashToIndex[ hash ] );
+
+		} else {
+
+			// copy data to the new index in the temporary attributes
+			for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+
+				const name = attributeNames[ j ];
+				const attribute = geometry.getAttribute( name );
+				const morphAttr = geometry.morphAttributes[ name ];
+				const itemSize = attribute.itemSize;
+				const newarray = tmpAttributes[ name ];
+				const newMorphArrays = tmpMorphAttributes[ name ];
+
+				for ( let k = 0; k < itemSize; k ++ ) {
+
+					const getterFunc = getters[ k ];
+					const setterFunc = setters[ k ];
+					newarray[ setterFunc ]( nextIndex, attribute[ getterFunc ]( index ) );
+
+					if ( morphAttr ) {
+
+						for ( let m = 0, ml = morphAttr.length; m < ml; m ++ ) {
+
+							newMorphArrays[ m ][ setterFunc ]( nextIndex, morphAttr[ m ][ getterFunc ]( index ) );
+
+						}
+
+					}
+
+				}
+
+			}
+
+			hashToIndex[ hash ] = nextIndex;
+			newIndices.push( nextIndex );
+			nextIndex ++;
+
+		}
+
+	}
+
+	// generate result BufferGeometry
+	const result = geometry.clone();
+	for ( const name in geometry.attributes ) {
+
+		const tmpAttribute = tmpAttributes[ name ];
+
+		result.setAttribute( name, new BufferAttribute(
+			tmpAttribute.array.slice( 0, nextIndex * tmpAttribute.itemSize ),
+			tmpAttribute.itemSize,
+			tmpAttribute.normalized,
+		) );
+
+		if ( ! ( name in tmpMorphAttributes ) ) continue;
+
+		for ( let j = 0; j < tmpMorphAttributes[ name ].length; j ++ ) {
+
+			const tmpMorphAttribute = tmpMorphAttributes[ name ][ j ];
+
+			result.morphAttributes[ name ][ j ] = new BufferAttribute(
+				tmpMorphAttribute.array.slice( 0, nextIndex * tmpMorphAttribute.itemSize ),
+				tmpMorphAttribute.itemSize,
+				tmpMorphAttribute.normalized,
+			);
+
+		}
+
+	}
+
+	// indices
+
+	result.setIndex( newIndices );
+
+	return result;
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} drawMode
+ * @return {BufferGeometry}
+ */
+function toTrianglesDrawMode( geometry, drawMode ) {
+
+	if ( drawMode === TrianglesDrawMode ) {
+
+		console.warn( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Geometry already defined as triangles.' );
+		return geometry;
+
+	}
+
+	if ( drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode ) {
+
+		let index = geometry.getIndex();
+
+		// generate index if not present
+
+		if ( index === null ) {
+
+			const indices = [];
+
+			const position = geometry.getAttribute( 'position' );
+
+			if ( position !== undefined ) {
+
+				for ( let i = 0; i < position.count; i ++ ) {
+
+					indices.push( i );
+
+				}
+
+				geometry.setIndex( indices );
+				index = geometry.getIndex();
+
+			} else {
+
+				console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
+				return geometry;
+
+			}
+
+		}
+
+		//
+
+		const numberOfTriangles = index.count - 2;
+		const newIndices = [];
+
+		if ( drawMode === TriangleFanDrawMode ) {
+
+			// gl.TRIANGLE_FAN
+
+			for ( let i = 1; i <= numberOfTriangles; i ++ ) {
+
+				newIndices.push( index.getX( 0 ) );
+				newIndices.push( index.getX( i ) );
+				newIndices.push( index.getX( i + 1 ) );
+
+			}
+
+		} else {
+
+			// gl.TRIANGLE_STRIP
+
+			for ( let i = 0; i < numberOfTriangles; i ++ ) {
+
+				if ( i % 2 === 0 ) {
+
+					newIndices.push( index.getX( i ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i + 2 ) );
+
+				} else {
+
+					newIndices.push( index.getX( i + 2 ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i ) );
+
+				}
+
+			}
+
+		}
+
+		if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
+
+			console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
+
+		}
+
+		// build final geometry
+
+		const newGeometry = geometry.clone();
+		newGeometry.setIndex( newIndices );
+		newGeometry.clearGroups();
+
+		return newGeometry;
+
+	} else {
+
+		console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unknown draw mode:', drawMode );
+		return geometry;
+
+	}
+
+}
+
+/**
+ * Calculates the morphed attributes of a morphed/skinned BufferGeometry.
+ * Helpful for Raytracing or Decals.
+ * @param {Mesh | Line | Points} object An instance of Mesh, Line or Points.
+ * @return {Object} An Object with original position/normal attributes and morphed ones.
+ */
+function computeMorphedAttributes( object ) {
+
+	const _vA = new Vector3();
+	const _vB = new Vector3();
+	const _vC = new Vector3();
+
+	const _tempA = new Vector3();
+	const _tempB = new Vector3();
+	const _tempC = new Vector3();
+
+	const _morphA = new Vector3();
+	const _morphB = new Vector3();
+	const _morphC = new Vector3();
+
+	function _calculateMorphedAttributeData(
+		object,
+		attribute,
+		morphAttribute,
+		morphTargetsRelative,
+		a,
+		b,
+		c,
+		modifiedAttributeArray
+	) {
+
+		_vA.fromBufferAttribute( attribute, a );
+		_vB.fromBufferAttribute( attribute, b );
+		_vC.fromBufferAttribute( attribute, c );
+
+		const morphInfluences = object.morphTargetInfluences;
+
+		if ( morphAttribute && morphInfluences ) {
+
+			_morphA.set( 0, 0, 0 );
+			_morphB.set( 0, 0, 0 );
+			_morphC.set( 0, 0, 0 );
+
+			for ( let i = 0, il = morphAttribute.length; i < il; i ++ ) {
+
+				const influence = morphInfluences[ i ];
+				const morph = morphAttribute[ i ];
+
+				if ( influence === 0 ) continue;
+
+				_tempA.fromBufferAttribute( morph, a );
+				_tempB.fromBufferAttribute( morph, b );
+				_tempC.fromBufferAttribute( morph, c );
+
+				if ( morphTargetsRelative ) {
+
+					_morphA.addScaledVector( _tempA, influence );
+					_morphB.addScaledVector( _tempB, influence );
+					_morphC.addScaledVector( _tempC, influence );
+
+				} else {
+
+					_morphA.addScaledVector( _tempA.sub( _vA ), influence );
+					_morphB.addScaledVector( _tempB.sub( _vB ), influence );
+					_morphC.addScaledVector( _tempC.sub( _vC ), influence );
+
+				}
+
+			}
+
+			_vA.add( _morphA );
+			_vB.add( _morphB );
+			_vC.add( _morphC );
+
+		}
+
+		if ( object.isSkinnedMesh ) {
+
+			object.applyBoneTransform( a, _vA );
+			object.applyBoneTransform( b, _vB );
+			object.applyBoneTransform( c, _vC );
+
+		}
+
+		modifiedAttributeArray[ a * 3 + 0 ] = _vA.x;
+		modifiedAttributeArray[ a * 3 + 1 ] = _vA.y;
+		modifiedAttributeArray[ a * 3 + 2 ] = _vA.z;
+		modifiedAttributeArray[ b * 3 + 0 ] = _vB.x;
+		modifiedAttributeArray[ b * 3 + 1 ] = _vB.y;
+		modifiedAttributeArray[ b * 3 + 2 ] = _vB.z;
+		modifiedAttributeArray[ c * 3 + 0 ] = _vC.x;
+		modifiedAttributeArray[ c * 3 + 1 ] = _vC.y;
+		modifiedAttributeArray[ c * 3 + 2 ] = _vC.z;
+
+	}
+
+	const geometry = object.geometry;
+	const material = object.material;
+
+	let a, b, c;
+	const index = geometry.index;
+	const positionAttribute = geometry.attributes.position;
+	const morphPosition = geometry.morphAttributes.position;
+	const morphTargetsRelative = geometry.morphTargetsRelative;
+	const normalAttribute = geometry.attributes.normal;
+	const morphNormal = geometry.morphAttributes.position;
+
+	const groups = geometry.groups;
+	const drawRange = geometry.drawRange;
+	let i, j, il, jl;
+	let group;
+	let start, end;
+
+	const modifiedPosition = new Float32Array( positionAttribute.count * positionAttribute.itemSize );
+	const modifiedNormal = new Float32Array( normalAttribute.count * normalAttribute.itemSize );
+
+	if ( index !== null ) {
+
+		// indexed buffer geometry
+
+		if ( Array.isArray( material ) ) {
+
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
+
+				group = groups[ i ];
+
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+
+				for ( j = start, jl = end; j < jl; j += 3 ) {
+
+					a = index.getX( j );
+					b = index.getX( j + 1 );
+					c = index.getX( j + 2 );
+
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
+
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
+
+				}
+
+			}
+
+		} else {
+
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
+
+			for ( i = start, il = end; i < il; i += 3 ) {
+
+				a = index.getX( i );
+				b = index.getX( i + 1 );
+				c = index.getX( i + 2 );
+
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
+
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
+
+			}
+
+		}
+
+	} else {
+
+		// non-indexed buffer geometry
+
+		if ( Array.isArray( material ) ) {
+
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
+
+				group = groups[ i ];
+
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+
+				for ( j = start, jl = end; j < jl; j += 3 ) {
+
+					a = j;
+					b = j + 1;
+					c = j + 2;
+
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
+
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
+
+				}
+
+			}
+
+		} else {
+
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
+
+			for ( i = start, il = end; i < il; i += 3 ) {
+
+				a = i;
+				b = i + 1;
+				c = i + 2;
+
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
+
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
+
+			}
+
+		}
+
+	}
+
+	const morphedPositionAttribute = new Float32BufferAttribute( modifiedPosition, 3 );
+	const morphedNormalAttribute = new Float32BufferAttribute( modifiedNormal, 3 );
+
+	return {
+
+		positionAttribute: positionAttribute,
+		normalAttribute: normalAttribute,
+		morphedPositionAttribute: morphedPositionAttribute,
+		morphedNormalAttribute: morphedNormalAttribute
+
+	};
+
+}
+
+function mergeGroups( geometry ) {
+
+	if ( geometry.groups.length === 0 ) {
+
+		console.warn( 'THREE.BufferGeometryUtils.mergeGroups(): No groups are defined. Nothing to merge.' );
+		return geometry;
+
+	}
+
+	let groups = geometry.groups;
+
+	// sort groups by material index
+
+	groups = groups.sort( ( a, b ) => {
+
+		if ( a.materialIndex !== b.materialIndex ) return a.materialIndex - b.materialIndex;
+
+		return a.start - b.start;
+
+	} );
+
+	// create index for non-indexed geometries
+
+	if ( geometry.getIndex() === null ) {
+
+		const positionAttribute = geometry.getAttribute( 'position' );
+		const indices = [];
+
+		for ( let i = 0; i < positionAttribute.count; i += 3 ) {
+
+			indices.push( i, i + 1, i + 2 );
+
+		}
+
+		geometry.setIndex( indices );
+
+	}
+
+	// sort index
+
+	const index = geometry.getIndex();
+
+	const newIndices = [];
+
+	for ( let i = 0; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+
+		const groupStart = group.start;
+		const groupLength = groupStart + group.count;
+
+		for ( let j = groupStart; j < groupLength; j ++ ) {
+
+			newIndices.push( index.getX( j ) );
+
+		}
+
+	}
+
+	geometry.dispose(); // Required to force buffer recreation
+	geometry.setIndex( newIndices );
+
+	// update groups indices
+
+	let start = 0;
+
+	for ( let i = 0; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+
+		group.start = start;
+		start += group.count;
+
+	}
+
+	// merge groups
+
+	let currentGroup = groups[ 0 ];
+
+	geometry.groups = [ currentGroup ];
+
+	for ( let i = 1; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+
+		if ( currentGroup.materialIndex === group.materialIndex ) {
+
+			currentGroup.count += group.count;
+
+		} else {
+
+			currentGroup = group;
+			geometry.groups.push( currentGroup );
+
+		}
+
+	}
+
+	return geometry;
+
+}
+
+
+/**
+ * Modifies the supplied geometry if it is non-indexed, otherwise creates a new,
+ * non-indexed geometry. Returns the geometry with smooth normals everywhere except
+ * faces that meet at an angle greater than the crease angle.
+ *
+ * @param {BufferGeometry} geometry
+ * @param {number} [creaseAngle]
+ * @return {BufferGeometry}
+ */
+function toCreasedNormals( geometry, creaseAngle = Math.PI / 3 /* 60 degrees */ ) {
+
+	const creaseDot = Math.cos( creaseAngle );
+	const hashMultiplier = ( 1 + 1e-10 ) * 1e2;
+
+	// reusable vectors
+	const verts = [ new Vector3(), new Vector3(), new Vector3() ];
+	const tempVec1 = new Vector3();
+	const tempVec2 = new Vector3();
+	const tempNorm = new Vector3();
+	const tempNorm2 = new Vector3();
+
+	// hashes a vector
+	function hashVertex( v ) {
+
+		const x = ~ ~ ( v.x * hashMultiplier );
+		const y = ~ ~ ( v.y * hashMultiplier );
+		const z = ~ ~ ( v.z * hashMultiplier );
+		return `${x},${y},${z}`;
+
+	}
+
+	// BufferGeometry.toNonIndexed() warns if the geometry is non-indexed
+	// and returns the original geometry
+	const resultGeometry = geometry.index ? geometry.toNonIndexed() : geometry;
+	const posAttr = resultGeometry.attributes.position;
+	const vertexMap = {};
+
+	// find all the normals shared by commonly located vertices
+	for ( let i = 0, l = posAttr.count / 3; i < l; i ++ ) {
+
+		const i3 = 3 * i;
+		const a = verts[ 0 ].fromBufferAttribute( posAttr, i3 + 0 );
+		const b = verts[ 1 ].fromBufferAttribute( posAttr, i3 + 1 );
+		const c = verts[ 2 ].fromBufferAttribute( posAttr, i3 + 2 );
+
+		tempVec1.subVectors( c, b );
+		tempVec2.subVectors( a, b );
+
+		// add the normal to the map for all vertices
+		const normal = new Vector3().crossVectors( tempVec1, tempVec2 ).normalize();
+		for ( let n = 0; n < 3; n ++ ) {
+
+			const vert = verts[ n ];
+			const hash = hashVertex( vert );
+			if ( ! ( hash in vertexMap ) ) {
+
+				vertexMap[ hash ] = [];
+
+			}
+
+			vertexMap[ hash ].push( normal );
+
+		}
+
+	}
+
+	// average normals from all vertices that share a common location if they are within the
+	// provided crease threshold
+	const normalArray = new Float32Array( posAttr.count * 3 );
+	const normAttr = new BufferAttribute( normalArray, 3, false );
+	for ( let i = 0, l = posAttr.count / 3; i < l; i ++ ) {
+
+		// get the face normal for this vertex
+		const i3 = 3 * i;
+		const a = verts[ 0 ].fromBufferAttribute( posAttr, i3 + 0 );
+		const b = verts[ 1 ].fromBufferAttribute( posAttr, i3 + 1 );
+		const c = verts[ 2 ].fromBufferAttribute( posAttr, i3 + 2 );
+
+		tempVec1.subVectors( c, b );
+		tempVec2.subVectors( a, b );
+
+		tempNorm.crossVectors( tempVec1, tempVec2 ).normalize();
+
+		// average all normals that meet the threshold and set the normal value
+		for ( let n = 0; n < 3; n ++ ) {
+
+			const vert = verts[ n ];
+			const hash = hashVertex( vert );
+			const otherNormals = vertexMap[ hash ];
+			tempNorm2.set( 0, 0, 0 );
+
+			for ( let k = 0, lk = otherNormals.length; k < lk; k ++ ) {
+
+				const otherNorm = otherNormals[ k ];
+				if ( tempNorm.dot( otherNorm ) > creaseDot ) {
+
+					tempNorm2.add( otherNorm );
+
+				}
+
+			}
+
+			tempNorm2.normalize();
+			normAttr.setXYZ( i3 + n, tempNorm2.x, tempNorm2.y, tempNorm2.z );
+
+		}
+
+	}
+
+	resultGeometry.setAttribute( 'normal', normAttr );
+	return resultGeometry;
+
+}
+
+function mergeBufferGeometries( geometries, useGroups = false ) {
+
+	console.warn( 'THREE.BufferGeometryUtils: mergeBufferGeometries() has been renamed to mergeGeometries().' ); // @deprecated, r151
+	return mergeGeometries( geometries, useGroups );
+
+}
+
+function mergeBufferAttributes( attributes ) {
+
+	console.warn( 'THREE.BufferGeometryUtils: mergeBufferAttributes() has been renamed to mergeAttributes().' ); // @deprecated, r151
+	return mergeAttributes( attributes );
+
+}
+
+export {
+	computeMikkTSpaceTangents,
+	mergeGeometries,
+	mergeBufferGeometries,
+	mergeAttributes,
+	mergeBufferAttributes,
+	interleaveAttributes,
+	estimateBytesUsed,
+	mergeVertices,
+	toTrianglesDrawMode,
+	computeMorphedAttributes,
+	mergeGroups,
+	toCreasedNormals
+};

hello_world/stats.py

@@ -0,0 +1,458 @@
+"""
+System Stats - Focused functions for gathering system statistics.
+
+Functions:
+    get_cpu_stats() - CPU temperature and per-core usage
+    get_memory_stats() - RAM usage
+    get_disk_stats() - Local and remote disk usage (cached)
+    get_network_stats() - Network speeds
+    get_wifi_stats() - WiFi signal and SSID (cached 10s)
+    get_uptime_stats() - Robot and daemon uptime (cached 30s)
+    get_load_stats() - System load averages
+    get_fan_stats() - Fan RPM
+    get_throttle_stats() - CPU throttling status
+    get_disk_io_stats() - Disk read/write speeds
+    get_top_processes() - Top processes by CPU usage
+    get_hardware_info() - Static hardware inventory (cached)
+
+Optimizations:
+    - Batched vcgencmd calls (temp + throttled in one subprocess)
+    - WiFi stats cached for 10s
+    - Uptime stats cached for 30s
+    - ARM/GPU memory split moved to hardware_info (static)
+"""
+
+__all__ = [
+    'get_cpu_stats',
+    'get_memory_stats',
+    'get_disk_stats',
+    'get_network_stats',
+    'get_wifi_stats',
+    'get_uptime_stats',
+    'get_load_stats',
+    'get_fan_stats',
+    'get_throttle_stats',
+    'get_disk_io_stats',
+    'get_top_processes',
+    'get_hardware_info',
+]
+
+import platform
+import subprocess
+import time
+
+import psutil
+
+# ===== Batched vcgencmd cache =====
+_vcgencmd_cache = {"data": {}, "time": 0}
+_VCGENCMD_TTL = 0.5
+
+
+def _get_vcgencmd_batch() -> dict:
+    """Get temp and throttled in single subprocess call (cached 500ms)."""
+    now = time.time()
+    if now - _vcgencmd_cache["time"] < _VCGENCMD_TTL:
+        return _vcgencmd_cache["data"]
+
+    result = {"temp": None, "throttled": None, "throttle_flags": []}
+    try:
+        proc = subprocess.run(
+            ["vcgencmd", "measure_temp"],
+            capture_output=True, text=True, timeout=1
+        )
+        if proc.returncode == 0:
+            temp_str = proc.stdout.strip()
+            result["temp"] = float(temp_str.replace("temp=", "").replace("'C", ""))
+
+        proc2 = subprocess.run(
+            ["vcgencmd", "get_throttled"],
+            capture_output=True, text=True, timeout=1
+        )
+        if proc2.returncode == 0:
+            hex_val = proc2.stdout.strip().split("=")[1]
+            throttled = int(hex_val, 16)
+            result["throttled"] = throttled
+            flags = []
+            if throttled & 0x1: flags.append("under-voltage")
+            if throttled & 0x2: flags.append("freq-capped")
+            if throttled & 0x4: flags.append("throttled")
+            if throttled & 0x8: flags.append("soft-temp-limit")
+            if throttled & 0x10000: flags.append("under-voltage-occurred")
+            if throttled & 0x20000: flags.append("freq-capped-occurred")
+            if throttled & 0x40000: flags.append("throttled-occurred")
+            if throttled & 0x80000: flags.append("soft-temp-occurred")
+            result["throttle_flags"] = flags
+    except Exception:
+        pass
+
+    _vcgencmd_cache["data"] = result
+    _vcgencmd_cache["time"] = now
+    return result
+
+
+def get_cpu_stats() -> dict:
+    """Get CPU temperature and per-core usage."""
+    cpu_cores = psutil.cpu_percent(percpu=True)[:4]
+    vcg = _get_vcgencmd_batch()
+    return {"cpu_cores": cpu_cores, "cpu_temp": vcg["temp"]}
+
+
+def get_memory_stats() -> dict:
+    """Get RAM usage."""
+    mem = psutil.virtual_memory()
+    total_mb = mem.total / (1024 * 1024)
+
+    used_pct = (mem.used / mem.total) * 100 if mem.total > 0 else 0
+    buffers_pct = (mem.buffers / mem.total) * 100 if mem.total > 0 and hasattr(mem, 'buffers') else 0
+    cached_pct = (mem.cached / mem.total) * 100 if mem.total > 0 and hasattr(mem, 'cached') else 0
+
+    return {
+        "memory_percent": mem.percent,
+        "memory_total_mb": round(total_mb),
+        "memory_used_mb": round(mem.used / (1024 * 1024)),
+        "memory_available_mb": round(mem.available / (1024 * 1024)),
+        "memory_used_pct": round(used_pct, 1),
+        "memory_buffers_pct": round(buffers_pct, 1),
+        "memory_cached_pct": round(cached_pct, 1),
+    }
+
+
+def get_disk_stats(cache: dict, ttl: int = 60) -> dict:
+    """Get local and remote disk usage with caching."""
+    now = time.time()
+    if now - cache.get("time", 0) > ttl:
+        disk = psutil.disk_usage("/")
+        cache["local"] = {
+            "percent": disk.percent,
+            "used": disk.used,
+            "free": disk.free,
+            "total": disk.total
+        }
+
+        cache["remote"] = None
+        for mount_point in ["/mnt/reachy-dev", "/mnt/nfs", "/mnt/remote", "/nfs"]:
+            try:
+                remote_disk = psutil.disk_usage(mount_point)
+                cache["remote"] = {
+                    "percent": remote_disk.percent,
+                    "used": remote_disk.used,
+                    "free": remote_disk.free,
+                    "total": remote_disk.total
+                }
+                break
+            except (FileNotFoundError, OSError):
+                pass
+
+        swap = psutil.swap_memory()
+        cache["swap"] = {
+            "percent": swap.percent,
+            "used": swap.used,
+            "free": swap.free,
+            "total": swap.total
+        }
+        cache["time"] = now
+
+    result = {}
+    if cache.get("local"):
+        result["disk_local"] = cache["local"]
+    if cache.get("remote"):
+        result["disk_remote"] = cache["remote"]
+    if cache.get("swap"):
+        result["swap"] = cache["swap"]
+    return result
+
+
+def get_network_stats(last_net: dict) -> dict:
+    """Get network RX/TX speeds."""
+    net = psutil.net_io_counters()
+    now = time.time()
+    elapsed = now - last_net.get("time", now)
+
+    rx_speed = (net.bytes_recv - last_net.get("rx", net.bytes_recv)) / elapsed if elapsed > 0 else 0
+    tx_speed = (net.bytes_sent - last_net.get("tx", net.bytes_sent)) / elapsed if elapsed > 0 else 0
+
+    last_net["rx"] = net.bytes_recv
+    last_net["tx"] = net.bytes_sent
+    last_net["time"] = now
+
+    return {"net_rx_speed": rx_speed, "net_tx_speed": tx_speed}
+
+
+_wifi_cache = {"data": {}, "time": 0}
+_WIFI_TTL = 10
+
+
+def get_wifi_stats() -> dict:
+    """Get WiFi signal strength and SSID (cached 10s)."""
+    now = time.time()
+    if now - _wifi_cache["time"] < _WIFI_TTL:
+        return _wifi_cache["data"]
+
+    wifi_signal = None
+    wifi_ssid = None
+    try:
+        result = subprocess.run(
+            ["iwconfig", "wlan0"],
+            capture_output=True, text=True, timeout=1
+        )
+        if result.returncode == 0:
+            for line in result.stdout.split("\n"):
+                if "Signal level" in line:
+                    parts = line.split("Signal level=")
+                    if len(parts) > 1:
+                        dbm = int(parts[1].split()[0].replace("dBm", ""))
+                        wifi_signal = max(0, min(100, 2 * (dbm + 100)))
+                if "ESSID:" in line and 'ESSID:"' in line:
+                    wifi_ssid = line.split('ESSID:"')[1].split('"')[0]
+    except Exception:
+        pass
+
+    _wifi_cache["data"] = {"wifi_signal": wifi_signal, "wifi_ssid": wifi_ssid}
+    _wifi_cache["time"] = now
+    return _wifi_cache["data"]
+
+
+_uptime_cache = {"data": {}, "time": 0, "daemon_start": None}
+_UPTIME_TTL = 30
+
+
+def get_uptime_stats() -> dict:
+    """Get robot and daemon uptime in seconds."""
+    now = time.time()
+
+    robot_uptime = None
+    try:
+        with open("/proc/uptime", "r") as f:
+            robot_uptime = float(f.read().split()[0])
+    except Exception:
+        pass
+
+    if now - _uptime_cache["time"] > _UPTIME_TTL or _uptime_cache["daemon_start"] is None:
+        try:
+            result = subprocess.run(
+                ["systemctl", "show", "reachy-mini-daemon", "--property=ActiveEnterTimestampMonotonic"],
+                capture_output=True, text=True, timeout=2
+            )
+            if result.returncode == 0:
+                mono_str = result.stdout.strip().replace("ActiveEnterTimestampMonotonic=", "")
+                if mono_str and mono_str != "0":
+                    _uptime_cache["daemon_start"] = int(mono_str) / 1_000_000
+                    _uptime_cache["time"] = now
+        except Exception:
+            pass
+
+    daemon_uptime = None
+    if _uptime_cache["daemon_start"] is not None and robot_uptime is not None:
+        daemon_uptime = robot_uptime - _uptime_cache["daemon_start"]
+        if daemon_uptime < 0:
+            daemon_uptime = None
+
+    return {"robot_uptime": robot_uptime, "daemon_uptime": daemon_uptime}
+
+
+def get_load_stats() -> dict:
+    """Get system load averages (1, 5, 15 min)."""
+    load = psutil.getloadavg()
+    return {
+        "load_1m": round(load[0], 2),
+        "load_5m": round(load[1], 2),
+        "load_15m": round(load[2], 2)
+    }
+
+
+def get_fan_stats() -> dict:
+    """Get fan RPM from sensors."""
+    try:
+        fans = psutil.sensors_fans()
+        for name, entries in fans.items():
+            if entries:
+                return {"fan_rpm": entries[0].current, "fan_name": name}
+    except Exception:
+        pass
+    return {"fan_rpm": None, "fan_name": None}
+
+
+def get_throttle_stats() -> dict:
+    """Get CPU throttling status."""
+    vcg = _get_vcgencmd_batch()
+    return {"throttled": vcg["throttled"], "throttle_flags": vcg["throttle_flags"]}
+
+
+def get_disk_io_stats(last_dio: dict) -> dict:
+    """Get disk read/write speeds."""
+    try:
+        dio = psutil.disk_io_counters()
+        now = time.time()
+        elapsed = now - last_dio.get("time", now)
+
+        read_speed = (dio.read_bytes - last_dio.get("read", dio.read_bytes)) / elapsed if elapsed > 0 else 0
+        write_speed = (dio.write_bytes - last_dio.get("write", dio.write_bytes)) / elapsed if elapsed > 0 else 0
+
+        last_dio["read"] = dio.read_bytes
+        last_dio["write"] = dio.write_bytes
+        last_dio["time"] = now
+
+        return {"disk_read_speed": read_speed, "disk_write_speed": write_speed}
+    except Exception:
+        return {"disk_read_speed": None, "disk_write_speed": None}
+
+
+def get_top_processes(cache: dict, ttl: int = 15, limit: int = 10) -> dict:
+    """Get top processes by CPU usage with caching."""
+    now = time.time()
+    if now - cache.get("time", 0) > ttl:
+        procs = []
+        for p in psutil.process_iter(['pid', 'name', 'cpu_percent', 'memory_percent']):
+            try:
+                info = p.info
+                cpu = info.get('cpu_percent') or 0
+                mem = info.get('memory_percent') or 0
+                if cpu > 0 or mem > 0.5:
+                    procs.append({
+                        "pid": info['pid'],
+                        "name": (info.get('name') or '')[:20],
+                        "cpu": round(cpu, 1),
+                        "mem": round(mem, 1)
+                    })
+            except (psutil.NoSuchProcess, psutil.AccessDenied):
+                pass
+
+        procs.sort(key=lambda x: x['cpu'], reverse=True)
+        cache["processes"] = procs[:limit]
+        cache["time"] = now
+
+    return {"top_processes": cache.get("processes", [])}
+
+
+def get_hardware_info(cache: dict) -> dict:
+    """Get static hardware inventory (cached indefinitely)."""
+    if cache.get("hardware"):
+        return {"hardware_info": cache["hardware"]}
+
+    hw = {}
+
+    try:
+        with open("/sys/firmware/devicetree/base/model", "r") as f:
+            hw["board_model"] = f.read().strip().replace("\x00", "")
+    except Exception:
+        hw["board_model"] = "Unknown"
+
+    try:
+        with open("/proc/cpuinfo", "r") as f:
+            cpuinfo = f.read()
+            for line in cpuinfo.split("\n"):
+                if line.startswith("Revision"):
+                    hw["board_revision"] = line.split(":")[1].strip()
+                elif line.startswith("Serial"):
+                    hw["board_serial"] = line.split(":")[1].strip()
+    except Exception:
+        pass
+
+    try:
+        hw["cpu_arch"] = platform.machine()
+        hw["cpu_cores"] = psutil.cpu_count(logical=True)
+        freq = psutil.cpu_freq()
+        if freq:
+            hw["cpu_freq_max"] = int(freq.max)
+            hw["cpu_freq_min"] = int(freq.min)
+    except Exception:
+        pass
+
+    try:
+        arm_result = subprocess.run(
+            ["vcgencmd", "get_mem", "arm"],
+            capture_output=True, text=True, timeout=1
+        )
+        gpu_result = subprocess.run(
+            ["vcgencmd", "get_mem", "gpu"],
+            capture_output=True, text=True, timeout=1
+        )
+        if arm_result.returncode == 0:
+            hw["mem_arm"] = arm_result.stdout.strip().split("=")[1]
+        if gpu_result.returncode == 0:
+            hw["mem_gpu"] = gpu_result.stdout.strip().split("=")[1]
+    except Exception:
+        pass
+
+    try:
+        mem = psutil.virtual_memory()
+        hw["mem_total_gb"] = round(mem.total / (1024**3), 1)
+    except Exception:
+        pass
+
+    try:
+        result = subprocess.run(
+            ["lsblk", "-o", "NAME,SIZE,TYPE", "-n"],
+            capture_output=True, text=True, timeout=2
+        )
+        if result.returncode == 0:
+            storage = []
+            for line in result.stdout.strip().split("\n"):
+                parts = line.split()
+                if len(parts) >= 3 and parts[2] == "disk" and "loop" not in parts[0]:
+                    name = parts[0].replace("─", "").replace("├", "").replace("└", "")
+                    storage.append({"name": name, "size": parts[1]})
+            hw["storage"] = storage
+    except Exception:
+        pass
+
+    try:
+        result = subprocess.run(
+            ["lsusb"], capture_output=True, text=True, timeout=2
+        )
+        if result.returncode == 0:
+            usb = []
+            for line in result.stdout.strip().split("\n"):
+                if "ID " in line:
+                    parts = line.split("ID ")[1].split(" ", 1)
+                    usb_id = parts[0]
+                    name = parts[1] if len(parts) > 1 else "Unknown"
+                    if "root hub" not in name.lower():
+                        usb.append({"id": usb_id, "name": name})
+            hw["usb_devices"] = usb
+    except Exception:
+        pass
+
+    try:
+        result = subprocess.run(
+            ["i2cdetect", "-l"], capture_output=True, text=True, timeout=2
+        )
+        if result.returncode == 0:
+            hw["i2c_buses"] = len(result.stdout.strip().split("\n"))
+    except Exception:
+        pass
+
+    try:
+        result = subprocess.run(
+            ["ip", "-br", "link"], capture_output=True, text=True, timeout=2
+        )
+        if result.returncode == 0:
+            interfaces = []
+            for line in result.stdout.strip().split("\n"):
+                parts = line.split()
+                if len(parts) >= 2 and parts[0] != "lo":
+                    interfaces.append({
+                        "name": parts[0],
+                        "state": parts[1],
+                        "mac": parts[2] if len(parts) > 2 else None
+                    })
+            hw["network_interfaces"] = interfaces
+    except Exception:
+        pass
+
+    try:
+        hw["kernel"] = platform.release()
+    except Exception:
+        pass
+
+    try:
+        result = subprocess.run(
+            ["vcgencmd", "version"], capture_output=True, text=True, timeout=1
+        )
+        if result.returncode == 0:
+            hw["firmware_date"] = result.stdout.strip().split("\n")[0]
+    except Exception:
+        pass
+
+    cache["hardware"] = hw
+    return {"hardware_info": hw}

hello_world/websocket.py

@@ -0,0 +1,227 @@
+"""
+WebSocket endpoint for Hello World.
+
+Endpoints:
+    /ws/live - Robot state, head pose, system stats
+    /ws/intercom - Browser mic audio to robot speaker (+ conversation listener routing)
+    /ws/transcribe - Passive receiver for transcriptions, responses, TTS audio
+"""
+
+__all__ = ['register_websockets']
+
+import asyncio
+import json
+import logging
+import time
+import urllib.request
+
+import numpy as np
+from fastapi import WebSocket, WebSocketDisconnect
+from scipy.spatial.transform import Rotation as R
+
+from .config import config
+
+logger = logging.getLogger("reachy_mini.app.hello_world.websocket")
+
+
+def register_websockets(app) -> None:
+    """Register WebSocket endpoints on the app."""
+
+    @app.settings_app.websocket("/ws/live")
+    async def live_websocket(websocket: WebSocket):
+        """Stream live data to browser with subscription support.
+
+        Client can send JSON messages to control what data is streamed:
+            {"subscribe": ["robot", "stats"]}  - subscribe to both
+            {"subscribe": ["stats"]}           - stats only
+            {"subscribe": []}                  - minimal (just tick)
+        """
+        await websocket.accept()
+        logger.info("LIVE: WebSocket connected")
+
+        subscriptions = {"robot", "stats"}
+        connected = True
+
+        tick = 0
+        send_motor_status = True
+
+        async def handle_client_messages():
+            nonlocal subscriptions, connected
+            try:
+                while connected:
+                    msg = await websocket.receive_json()
+                    if "subscribe" in msg:
+                        new_subs = set(msg["subscribe"])
+                        valid_subs = new_subs & {"robot", "stats"}
+                        subscriptions = valid_subs
+                        logger.info(f"LIVE: Subscriptions updated: {subscriptions}")
+            except WebSocketDisconnect:
+                connected = False
+            except Exception as e:
+                connected = False
+                logger.debug(f"LIVE: Client message error: {e}")
+
+        receive_task = asyncio.create_task(handle_client_messages())
+
+        try:
+            while connected:
+                robot_hz = max(1, int(app._settings.get("robot_update_hz", 15)))
+                stats_hz = max(1, int(app._settings.get("stats_update_hz", 1)))
+                stats_interval = max(1, robot_hz // stats_hz) if stats_hz > 0 else robot_hz
+
+                data = {"tick": tick}
+
+                # Robot state
+                if "robot" in subscriptions and app._reachy_mini is not None:
+                    try:
+                        pose_matrix = app._reachy_mini.get_current_head_pose()
+                        roll, pitch, yaw = R.from_matrix(pose_matrix[:3, :3]).as_euler("xyz")
+                        x, y, z = pose_matrix[:3, 3]
+                        head_joints, antenna_joints = app._reachy_mini.get_current_joint_positions()
+                        data["robot"] = {
+                            "head_pose": {
+                                "x": float(x), "y": float(y), "z": float(z),
+                                "roll": float(np.degrees(roll)),
+                                "pitch": float(np.degrees(pitch)),
+                                "yaw": float(np.degrees(yaw)),
+                            },
+                            "head_joints": [float(np.degrees(j)) for j in head_joints],
+                            "antenna_joints": [float(np.degrees(j)) for j in antenna_joints],
+                        }
+                    except Exception as e:
+                        data["robot"] = {"error": str(e)}
+
+                # System stats
+                if "stats" in subscriptions and tick % stats_interval == 0:
+                    data["stats"] = app._get_stats()
+                    data["status"] = {
+                        "app": "hello_world",
+                        "uptime": time.time() - app._start_time,
+                    }
+
+                    # Daemon health (pushed via WS, no frontend polling needed)
+                    try:
+                        with urllib.request.urlopen(
+                            config.get_daemon_endpoint("daemon/status"),
+                            timeout=2
+                        ) as resp:
+                            daemon_data = json.loads(resp.read().decode())
+                            serial_ok = not (
+                                daemon_data.get("error") == "channel closed" or
+                                daemon_data.get("backend_status", {}).get("error") == "channel closed" or
+                                daemon_data.get("state") == "error"
+                            )
+                            data["daemon"] = {"api": "ok", "serial": "ok" if serial_ok else "error"}
+                    except Exception:
+                        data["daemon"] = {"api": "error", "serial": "unknown"}
+
+                # Motor status on first tick
+                if send_motor_status:
+                    try:
+                        with urllib.request.urlopen(
+                            config.get_daemon_endpoint("motors/status"),
+                            timeout=config.TIMEOUTS['daemon_move']
+                        ) as resp:
+                            status = json.loads(resp.read().decode())
+                        data["motors"] = {"mode": status.get("mode", "unknown")}
+                    except Exception:
+                        data["motors"] = {"mode": "unknown"}
+                    send_motor_status = False
+
+                if connected:
+                    await websocket.send_json(data)
+                tick += 1
+                await asyncio.sleep(1 / robot_hz)
+
+        except WebSocketDisconnect:
+            logger.info("LIVE: WebSocket disconnected")
+        except RuntimeError as e:
+            if "websocket" in str(e).lower():
+                logger.info("LIVE: WebSocket closed during send")
+            else:
+                logger.error(f"LIVE ERROR: {e}")
+        except Exception as e:
+            logger.error(f"LIVE ERROR: {e}", exc_info=True)
+        finally:
+            connected = False
+            receive_task.cancel()
+            try:
+                await receive_task
+            except asyncio.CancelledError:
+                pass
+
+    @app.settings_app.websocket("/ws/intercom")
+    async def intercom_websocket(websocket: WebSocket):
+        """Receive browser mic audio and play through robot speaker.
+
+        Also routes audio to conversation listener when:
+        - Listener is running AND audio_input is "browser"
+
+        Expects binary frames of int16 PCM at 16kHz.
+        """
+        await websocket.accept()
+        logger.info("INTERCOM: WebSocket connected")
+
+        # Check if this should route to robot speaker
+        # (always start playback — intercom is always available)
+        try:
+            app._reachy_mini.media.start_playing()
+        except Exception as e:
+            logger.error(f"INTERCOM: Failed to start media playback: {e}")
+            await websocket.close(code=1011, reason="Failed to start audio playback")
+            return
+
+        try:
+            while True:
+                data = await websocket.receive_bytes()
+                pcm_int16 = np.frombuffer(data, dtype=np.int16)
+
+                # Always push to robot speaker (intercom functionality)
+                audio_float32 = pcm_int16.astype(np.float32) / 32768.0
+                app._reachy_mini.media.push_audio_sample(audio_float32)
+
+                # Also route to conversation listener if active + browser mic
+                from .api.listener import feed_audio_chunk, is_listener_running
+                if is_listener_running() and app._settings.get("audio_input") == "browser":
+                    feed_audio_chunk(pcm_int16.tobytes())
+
+        except WebSocketDisconnect:
+            logger.info("INTERCOM: WebSocket disconnected")
+        except Exception as e:
+            logger.error(f"INTERCOM ERROR: {e}", exc_info=True)
+        finally:
+            try:
+                app._reachy_mini.media.stop_playing()
+            except Exception as e:
+                logger.warning(f"INTERCOM: Error stopping playback: {e}")
+
+    @app.settings_app.websocket("/ws/transcribe")
+    async def transcribe_websocket(websocket: WebSocket):
+        """Passive receiver for transcription data, LLM responses, tool activity, and TTS audio.
+
+        Clients connect and receive broadcast messages. No data sent from client.
+        Used by the Conversation tab to display live transcript.
+        """
+        await websocket.accept()
+        app._transcribe_websockets.add(websocket)
+        logger.info(f"TRANSCRIBE: WebSocket connected ({len(app._transcribe_websockets)} clients)")
+
+        # Send initial listener status so UI is correct without polling
+        try:
+            from .api.listener import get_listener_status
+            status = get_listener_status()
+            await websocket.send_json({"type": "listener_status", **status})
+        except Exception:
+            pass
+
+        try:
+            while True:
+                # Keep connection alive — client may send pings
+                await websocket.receive_text()
+        except WebSocketDisconnect:
+            pass
+        except Exception:
+            pass
+        finally:
+            app._transcribe_websockets.discard(websocket)
+            logger.info(f"TRANSCRIBE: WebSocket disconnected ({len(app._transcribe_websockets)} clients)")

index.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Hello World — Reachy Mini DevKit</title>
+    <meta name="description" content="A community dashboard app for Reachy Mini with AI conversation, system telemetry, music playback, and robot control." />
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <div class="hero">
+        <div class="hero-content">
+            <div class="app-icon">&#x1F916;&#x1F4CA;</div>
+            <h1>Hello World</h1>
+            <p class="tagline">A full-featured community dashboard for Reachy Mini</p>
+            <p class="subtitle">AI conversation, system telemetry, music, and more — all in one app</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="main-card">
+            <div class="features-section">
+                <h2>Features</h2>
+                <div class="feature-grid">
+                    <div class="feature-item">
+                        <div class="feature-icon">&#x1F4AC;</div>
+                        <h3>AI Conversation</h3>
+                        <p>Voice-activated assistant with STT, LLM chat, and TTS. Supports OpenAI, Anthropic, Groq, Gemini, DeepSeek, and ElevenLabs.</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">&#x1F4CA;</div>
+                        <h3>System Telemetry</h3>
+                        <p>Live charts for CPU, RAM, disk, network, WiFi, and thermal stats. Real-time head pose and antenna telemetry.</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">&#x1F441;</div>
+                        <h3>Vision (VLM)</h3>
+                        <p>Vision-capable models auto-detected per provider. Take snapshots and let the AI describe what it sees.</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">&#x1F3B5;</div>
+                        <h3>Music Playback</h3>
+                        <p>Upload and play music through the robot speaker via GStreamer. Full library management with metadata and cover art.</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">&#x1F399;</div>
+                        <h3>Audio Routing</h3>
+                        <p>Selectable input (robot mic or browser) and output (robot speaker or browser). Queued TTS with no overlapping speech.</p>
+                    </div>
+                    <div class="feature-item">
+                        <div class="feature-icon">&#x1F4F9;</div>
+                        <h3>Recording</h3>
+                        <p>Video recording from the robot camera, audio recording from the mic, and snapshot capture — all controllable via AI tools.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="info-card">
+            <h2>AI Pipeline</h2>
+            <div class="pipeline-grid">
+                <div class="pipeline-item">
+                    <strong>STT</strong>
+                    <span>OpenAI Whisper, Groq</span>
+                </div>
+                <div class="pipeline-item">
+                    <strong>LLM</strong>
+                    <span>OpenAI, Anthropic, Groq, Gemini, DeepSeek</span>
+                </div>
+                <div class="pipeline-item">
+                    <strong>TTS</strong>
+                    <span>OpenAI, ElevenLabs, Groq Orpheus, Gemini</span>
+                </div>
+                <div class="pipeline-item">
+                    <strong>VLM</strong>
+                    <span>Vision models auto-detected per provider</span>
+                </div>
+            </div>
+            <p class="pipeline-note">All providers unified through LiteLLM. API keys entered in the web UI — no environment variables needed.</p>
+        </div>
+
+        <div class="info-card">
+            <h2>What You Can Ask Reachy</h2>
+            <p>The AI assistant has <strong>13 tools</strong> it can call autonomously during conversation:</p>
+            <ul class="tools-list">
+                <li><strong>71 emotions</strong> — "Show me you're happy", "Are you curious?"</li>
+                <li><strong>19 dances</strong> — "Dance for me", "Do the chicken peck"</li>
+                <li><strong>Head movement</strong> — "Look left", "Look up at the ceiling"</li>
+                <li><strong>Camera snapshots</strong> — "Take a photo", "What do you see?"</li>
+                <li><strong>Video recording</strong> — "Record a ten second video"</li>
+                <li><strong>Audio recording</strong> — "Record what you hear for five seconds"</li>
+                <li><strong>Music playback</strong> — "Play some music", "Stop the music"</li>
+                <li><strong>System status</strong> — "How are your systems doing?"</li>
+                <li><strong>Date and time</strong> — "What time is it?"</li>
+            </ul>
+        </div>
+
+        <div class="info-card">
+            <h2>Getting Started</h2>
+            <ol class="steps-list">
+                <li>Clone or install this app on your Reachy Mini: <code>pip install -e .</code></li>
+                <li>Restart the daemon: <code>reachy-restart</code></li>
+                <li>Open the dashboard at <code>http://localhost:8000</code></li>
+                <li>Find <strong>Hello World</strong> in Applications and toggle it on</li>
+                <li>Click the gear icon or go to <code>http://localhost:8042</code> to open the dashboard</li>
+                <li>Configure your AI providers in the Conversation tab settings</li>
+            </ol>
+        </div>
+
+        <div class="info-card">
+            <h2>Architecture</h2>
+            <pre class="arch-tree">hello_world/
+├── app.py              # ReachyMiniApp entry point
+├── config.py           # Centralized config
+├── settings.py         # Settings persistence
+├── websocket.py        # WebSocket endpoints
+├── api/
+│   ├── conversation.py # LLM chat, STT, TTS, VLM
+│   ├── listener.py     # Voice activity detection
+│   ├── music.py        # Music library + GStreamer
+│   ├── recordings.py   # Video recording
+│   ├── snapshots.py    # Camera snapshots
+│   ├── sounds.py       # Audio recording
+│   └── system.py       # System telemetry
+└── static/
+    ├── index.html      # Single-page dashboard
+    ├── css/styles.css   # Theme-aware (light/dark)
+    └── js/              # Modular JS (core + features)</pre>
+        </div>
+    </div>
+
+    <div class="footer">
+        <p>
+            Hello World for Reachy Mini
+            &middot; Built with <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank">reachy-mini SDK</a>
+            &middot; <a href="https://pollen-robotics-reachy-mini.hf.space/#/apps" target="_blank">Browse More Apps</a>
+        </p>
+    </div>
+</body>
+</html>

pyproject.toml

@@ -0,0 +1,30 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "hello-world"
+version = "0.1.0"
+description = "A community hello world app for Reachy Mini with system telemetry dashboard"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini",
+    "litellm",
+    "webrtcvad",
+    "soundfile",
+    "setuptools",  # webrtcvad needs pkg_resources at runtime
+]
+keywords = ["reachy-mini-app"]
+
+[project.entry-points."reachy_mini_apps"]
+hello_world = "hello_world.main:HelloWorld"
+
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+
+[tool.setuptools.packages.find]
+where = ["."]
+
+[tool.setuptools.package-data]
+hello_world = ["**/*"]