Rebuild docs.html with full Help tab experience (Quick Help + Developer Docs)

docs.html

@@ -5,271 +5,398 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Documentation — Hello World DevKit</title>
 <style>
+/* ===== Theme variables (matching app dark theme) ===== */
 :root {
-    --bg: #0a0a0f;
-    --bg-secondary: #111118;
-    --bg-card: #14141f;
-    --border: #1e1e2e;
-    --border-accent: rgba(124, 92, 252, 0.2);
-    --text: #e2e0ea;
-    --text-muted: #9490a6;
-    --accent: #7c5cfc;
-    --accent-light: #a78bfa;
-    --accent-glow: rgba(124, 92, 252, 0.15);
-    --green: #22c55e;
-    --amber: #f59e0b;
-    --cyan: #06b6d4;
-    --purple: #a855f7;
-    --code-bg: #0e0e18;
+    --bg-primary: #0f0f0f;
+    --bg-secondary: #1a1a1a;
+    --bg-tertiary: #252525;
+    --bg-elevated: #1a1a2e;
+    --text-primary: #f5f5f5;
+    --text-secondary: #a0a0a0;
+    --text-muted: #888;
+    --accent: #6366f1;
+    --accent-hover: #818cf8;
+    --accent-20: rgba(99, 102, 241, 0.2);
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    --border: #333;
+    --border-subtle: #2a2a2a;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    line-height: 1.7;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
 }
 
-/* Sticky search/nav */
+/* ===== Top bar ===== */
 .topbar {
     position: sticky;
     top: 0;
     z-index: 100;
-    background: rgba(10, 10, 15, 0.92);
+    background: rgba(15, 15, 15, 0.92);
     backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--border-accent);
+    border-bottom: 1px solid var(--border);
     padding: 10px 20px;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 14px;
 }
 .topbar-brand {
     font-weight: 700;
-    color: var(--accent-light);
+    color: var(--accent-hover);
     font-size: 14px;
     white-space: nowrap;
     text-decoration: none;
 }
 .topbar-brand:hover { color: #fff; }
-.topbar input {
-    flex: 1;
-    max-width: 480px;
-    padding: 7px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    background: var(--bg);
-    color: var(--text);
-    font-size: 13px;
-    outline: none;
-    transition: border-color 0.2s;
-}
-.topbar input:focus { border-color: var(--accent); }
-.topbar input::placeholder { color: var(--text-muted); }
-.search-info { color: var(--text-muted); font-size: 12px; min-width: 90px; }
 .topbar-home {
     color: var(--text-muted);
     text-decoration: none;
     font-size: 13px;
     padding: 5px 12px;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--border);
     transition: all 0.2s;
     white-space: nowrap;
+    margin-left: auto;
 }
-.topbar-home:hover { color: var(--accent-light); border-color: var(--accent); }
+.topbar-home:hover { color: var(--accent-hover); border-color: var(--accent); }
 
-/* Content area */
-.docs {
-    max-width: 920px;
+/* ===== Help container (matches app layout) ===== */
+.help-container {
+    max-width: 860px;
     margin: 0 auto;
-    padding: 32px 24px 80px;
+    padding: 0 20px 80px;
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 50px);
 }
 
-/* Markdown styles */
-.docs h1 {
-    font-size: 1.9rem;
-    margin: 48px 0 16px;
-    padding-bottom: 8px;
-    border-bottom: 2px solid var(--accent);
-    color: #fff;
-}
-.docs h1:first-child { margin-top: 0; }
-.docs h2 {
-    font-size: 1.4rem;
-    margin: 40px 0 12px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid var(--border);
-    color: var(--accent-light);
+/* ===== Mode toggle ===== */
+.help-tab-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 0;
+    flex-shrink: 0;
 }
-.docs h3 {
-    font-size: 1.15rem;
-    margin: 28px 0 10px;
-    color: var(--cyan);
+.help-mode-toggle {
+    display: flex;
+    gap: 2px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    padding: 2px;
 }
-.docs h4 {
-    font-size: 1rem;
-    margin: 20px 0 8px;
-    color: var(--purple);
+.help-mode-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    padding: 0.3rem 0.75rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
 }
-.docs p { margin: 10px 0; }
-.docs a { color: var(--accent-light); text-decoration: none; }
-.docs a:hover { text-decoration: underline; }
-.docs ul, .docs ol { margin: 10px 0; padding-left: 24px; }
-.docs li { margin: 3px 0; }
-.docs strong { color: #f0f0f8; }
-.docs em { color: var(--text-muted); }
-.docs hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
-.docs blockquote {
-    border-left: 3px solid var(--accent);
-    padding: 8px 16px;
-    margin: 14px 0;
-    background: var(--bg-secondary);
-    border-radius: 0 8px 8px 0;
+.help-mode-btn.active {
+    background: var(--accent);
+    color: white;
 }
+.help-mode-btn:hover:not(.active) { color: var(--text-primary); }
 
-/* Tables */
-.docs table {
+/* ===== Search ===== */
+.help-search-row { padding: 0 0 0.5rem; flex-shrink: 0; }
+.help-search {
     width: 100%;
-    border-collapse: collapse;
-    margin: 14px 0;
-    font-size: 0.88rem;
-}
-.docs th {
+    padding: 0.5rem 0.75rem;
     background: var(--bg-secondary);
-    padding: 9px 11px;
-    text-align: left;
     border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 0.82rem;
+    outline: none;
+    transition: border-color 0.15s;
+}
+.help-search:focus { border-color: var(--accent); }
+.help-search::placeholder { color: var(--text-muted); }
+
+/* ===== Category pills ===== */
+.help-categories {
+    display: flex;
+    gap: 0.35rem;
+    padding: 0 0 0.75rem;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+}
+.help-category {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    padding: 0.2rem 0.6rem;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+}
+.help-category.active {
+    background: var(--accent);
+    color: white;
+    border-color: var(--accent);
+}
+.help-category:hover:not(.active) {
+    border-color: var(--text-muted);
+    color: var(--text-primary);
+}
+.help-category-count {
+    opacity: 0.6;
+    font-size: 0.65rem;
+    margin-left: 0.15rem;
+}
+
+/* ===== Section headers ===== */
+.help-section-header {
+    font-size: 0.75rem;
     font-weight: 600;
-    color: var(--accent-light);
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 1.25rem 0 0.5rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--border-subtle);
 }
-.docs td {
-    padding: 7px 11px;
-    border: 1px solid var(--border);
-    vertical-align: top;
+.help-section-header:first-child { margin-top: 0; }
+
+/* ===== Topic cards ===== */
+.help-topic {
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    margin-bottom: 0.4rem;
+    transition: border-color 0.15s;
 }
-.docs tr:nth-child(even) td { background: rgba(17,17,24,0.5); }
-
-/* Code */
-.docs code {
-    background: var(--code-bg);
-    padding: 2px 5px;
-    border-radius: 4px;
-    font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
-    font-size: 0.86em;
-    color: var(--cyan);
+.help-topic[open] { border-color: var(--accent-20); }
+.help-topic summary {
+    cursor: pointer;
+    padding: 0.6rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    list-style: none;
 }
-.docs pre {
-    background: var(--code-bg);
-    padding: 14px;
-    border-radius: 8px;
-    overflow-x: auto;
-    margin: 14px 0;
+.help-topic summary::-webkit-details-marker { display: none; }
+.help-topic summary::before { content: ''; display: none; }
+.help-topic-title {
+    font-weight: 600;
+    font-size: 0.82rem;
+    color: var(--text-primary);
+}
+.help-topic-summary {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+.help-topic[open] .help-topic-title { color: var(--accent); }
+.help-topic-snippet {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+    margin-top: 0.2rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+    border-left: 2px solid var(--accent-20);
+    font-style: italic;
+}
+
+/* ===== Topic body (rendered markdown) ===== */
+.help-topic-body {
+    padding: 0 0.85rem 0.75rem;
+    font-size: 0.8rem;
+    line-height: 1.65;
+    color: var(--text-primary);
+}
+.help-topic-body p { margin: 0.4rem 0; }
+.help-topic-body ul, .help-topic-body ol {
+    margin: 0.3rem 0;
+    padding-left: 1.25rem;
+}
+.help-topic-body li { margin: 0.15rem 0; }
+.help-topic-body strong { color: var(--text-primary); }
+.help-topic-body code {
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 0.75rem;
+    background: var(--bg-tertiary);
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    color: var(--accent);
+}
+.help-topic-body pre {
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 0.6rem 0.8rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
 }
-.docs pre code {
+.help-topic-body pre code {
     background: none;
     padding: 0;
-    font-size: 0.84rem;
-    color: var(--text);
+    color: var(--text-primary);
 }
 
-/* Mermaid */
-.mermaid { margin: 18px 0; text-align: center; }
+/* ===== Tags ===== */
+.help-tags {
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    padding: 0 0.85rem 0.5rem;
+}
+.help-tag {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    font-size: 0.62rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 999px;
+    letter-spacing: 0.02em;
+}
 
-/* Search */
-mark {
-    background: rgba(245, 158, 11, 0.3);
+/* ===== Empty/highlight ===== */
+.help-empty {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 3rem;
+    font-size: 0.85rem;
+}
+.help-highlight {
+    background: rgba(250, 204, 21, 0.3);
     color: inherit;
     border-radius: 2px;
-    padding: 0 2px;
+    padding: 0 1px;
 }
-.search-hidden { display: none !important; }
-
-/* Scroll anchors */
-.docs h1[id], .docs h2[id], .docs h3[id] { scroll-margin-top: 56px; }
-
-/* TOC */
-.toc-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 50;
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    background: var(--accent);
-    border: none;
-    color: #fff;
-    font-size: 18px;
-    cursor: pointer;
-    box-shadow: 0 4px 16px rgba(124, 92, 252, 0.4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+/* ===== Developer Docs (README) ===== */
+.help-dev-docs {
+    padding: 0.5rem 0;
+    line-height: 1.6;
 }
-.toc-panel {
-    display: none;
-    position: fixed;
-    bottom: 72px;
-    right: 20px;
-    z-index: 50;
-    width: 280px;
-    max-height: 65vh;
-    overflow-y: auto;
-    background: var(--bg-card);
+.help-dev-docs h1, .help-dev-docs h2, .help-dev-docs h3 {
+    color: var(--text-primary);
+    margin-top: 1.5rem;
+}
+.help-dev-docs h1 {
+    font-size: 1.7rem;
+    padding-bottom: 6px;
+    border-bottom: 2px solid var(--accent);
+}
+.help-dev-docs h1:first-child { margin-top: 0; }
+.help-dev-docs h2 {
+    font-size: 1.3rem;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--border);
+    color: var(--accent-hover);
+}
+.help-dev-docs h3 {
+    font-size: 1.05rem;
+    color: #06b6d4;
+}
+.help-dev-docs p { margin: 0.5rem 0; }
+.help-dev-docs a { color: var(--accent); }
+.help-dev-docs a:hover { text-decoration: underline; }
+.help-dev-docs ul, .help-dev-docs ol { margin: 0.5rem 0; padding-left: 1.5rem; }
+.help-dev-docs li { margin: 0.2rem 0; }
+.help-dev-docs strong { color: var(--text-primary); }
+.help-dev-docs blockquote {
+    border-left: 3px solid var(--accent);
+    padding: 8px 16px;
+    margin: 14px 0;
+    background: var(--bg-secondary);
+    border-radius: 0 8px 8px 0;
+}
+.help-dev-docs pre {
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 14px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+    border-radius: var(--radius-md);
+    padding: 0.6rem 0.8rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
 }
-.toc-panel.open { display: block; }
-.toc-panel a {
-    display: block;
-    color: var(--text-muted);
-    text-decoration: none;
-    padding: 3px 0 3px 8px;
-    font-size: 12px;
-    border-left: 2px solid transparent;
-    transition: all 0.15s;
+.help-dev-docs pre code {
+    background: none;
+    padding: 0;
+    color: var(--text-primary);
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 0.82rem;
+}
+.help-dev-docs :not(pre) > code {
+    background: var(--bg-tertiary);
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    font-size: 0.75rem;
+    color: var(--accent);
+}
+.help-dev-docs table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.75rem 0;
+    font-size: 0.82rem;
 }
-.toc-panel a:hover { color: var(--accent-light); border-left-color: var(--accent); }
-.toc-panel a.depth-3 { padding-left: 20px; opacity: 0.8; }
-
-/* Back to top */
-.top-btn {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    z-index: 50;
-    padding: 6px 14px;
-    border-radius: 8px;
-    background: var(--bg-card);
+.help-dev-docs th {
+    background: var(--bg-secondary);
+    padding: 8px 10px;
+    text-align: left;
     border: 1px solid var(--border);
-    color: var(--text-muted);
-    font-size: 12px;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.3s;
+    font-weight: 600;
+    color: var(--accent-hover);
+}
+.help-dev-docs td {
+    padding: 6px 10px;
+    border: 1px solid var(--border);
+    vertical-align: top;
+}
+.help-dev-docs tr:nth-child(even) td { background: rgba(26, 26, 26, 0.5); }
+.help-dev-docs hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
+
+/* Mermaid */
+.help-mermaid { margin: 18px 0; text-align: center; }
+.help-mermaid-error { color: var(--error); font-size: 0.8rem; }
+
+/* ===== Help body scrollable area ===== */
+.help-tab-body {
+    flex: 1;
+    overflow-y: auto;
 }
-.top-btn.show { opacity: 1; }
 
-/* Footer */
+/* ===== Footer ===== */
 .foot {
     text-align: center;
     padding: 24px;
     color: var(--text-muted);
     font-size: 12px;
     border-top: 1px solid var(--border);
+    margin-top: 40px;
+}
+.foot a { color: var(--accent-hover); text-decoration: none; }
+.foot a:hover { text-decoration: underline; }
+
+/* ===== Topic count badge ===== */
+.topic-count {
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    margin-left: auto;
 }
-.foot a { color: var(--accent-light); text-decoration: none; }
 
 @media (max-width: 768px) {
-    .docs { padding: 20px 14px 60px; }
-    .toc-panel { width: calc(100vw - 40px); }
-    .topbar { flex-wrap: wrap; gap: 8px; }
-    .topbar input { max-width: 100%; }
+    .help-container { padding: 0 12px 60px; }
+    .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
 }
 </style>
 </head>
@@ -277,16 +404,26 @@ mark {
 
 <div class="topbar">
     <a href="index.html" class="topbar-brand">Hello World DevKit</a>
-    <input type="text" id="search" placeholder="Search documentation..." autocomplete="off">
-    <span class="search-info" id="searchInfo"></span>
     <a href="index.html" class="topbar-home">&larr; Home</a>
 </div>
 
-<div class="docs" id="docs"></div>
+<div class="help-container">
+    <div class="help-tab-header">
+        <div class="help-mode-toggle">
+            <button class="help-mode-btn active" data-mode="help" id="modeHelp">Quick Help</button>
+            <button class="help-mode-btn" data-mode="dev" id="modeDev">Developer Docs</button>
+        </div>
+        <span class="topic-count" id="topicCount"></span>
+    </div>
+
+    <div class="help-search-row" id="searchRow">
+        <input type="text" class="help-search" id="helpSearch" placeholder="Search help topics..." autocomplete="off" />
+    </div>
 
-<button class="toc-btn" id="tocBtn" title="Table of Contents">&#9776;</button>
-<div class="toc-panel" id="tocPanel"></div>
-<button class="top-btn" id="topBtn" onclick="window.scrollTo({top:0,behavior:'smooth'})">&#8593; Top</button>
+    <div class="help-categories" id="helpCategories"></div>
+
+    <div class="help-tab-body" id="helpTabBody"></div>
+</div>
 
 <div class="foot">
     Built with vanilla Python + JS &mdash; no framework, no bundler<br>
@@ -295,13 +432,520 @@ mark {
     <a href="https://www.pollen-robotics.com/reachy-mini/">Reachy Mini</a>
 </div>
 
-<script id="md-src" type="text/markdown">
+<!-- Pre-baked help topics (27 conceptual topics from help.py) -->
+<script id="topics-data" type="application/json">
+[
+  {
+    "id": "what-is-hello-world",
+    "category": "Getting Started",
+    "title": "What is Hello World?",
+    "summary": "A community dashboard for Reachy Mini with AI conversation, vision, and motion control.",
+    "body": "Hello World is an open-source web dashboard for **Reachy Mini**, a small expressive robot head by Pollen Robotics. It runs directly on Reachy's onboard Raspberry Pi CM4 and provides:\n\n- **Voice conversation** with AI (multi-provider: OpenAI, Anthropic, Google, Groq, Ollama, and more)\n- **Real-time vision** with YOLO object detection, pose estimation, and segmentation\n- **81 emotions** and **19 dances** for expressive robot behavior\n- **MuJoCo 3D simulation** of the robot head\n- **Timers, alarms, and ambient sounds** with custom sound upload\n- **Music playback**, snapshots, video/audio recording\n- **Joystick control** for manual head movement\n\nAccess the dashboard at `http://reachy:8042` from any device on the same network.",
+    "tags": ["overview", "introduction", "about", "dashboard"]
+  },
+  {
+    "id": "dashboard-tabs",
+    "category": "Getting Started",
+    "title": "Dashboard Tabs Overview",
+    "summary": "Navigate the main tabs: Status, Telemetry, Moves, Conversation, Media, Timers, Settings.",
+    "body": "The dashboard has several tabs across the top:\n\n- **Status** \u2014 System stats (CPU, RAM, disk, network), uptime, head telemetry\n- **Telemetry** \u2014 Real-time charts of system metrics\n- **Moves** \u2014 Gallery of 81 emotions, 19 dances, and 6 oscillation patterns with preview\n- **Conversation** \u2014 Voice transcription, AI chat, and listener controls\n- **Media** \u2014 Recordings, snapshots, music library\n- **Timers** \u2014 Countdown timers, alarms, and ambient sound playback\n- **Settings** \u2014 API keys, audio, vision, UI configuration\n\nClick any tab to switch. Your last active tab is remembered across sessions.",
+    "tags": ["tabs", "navigation", "ui", "layout"]
+  },
+  {
+    "id": "api-keys-setup",
+    "category": "Getting Started",
+    "title": "Setting Up AI Providers",
+    "summary": "Add API keys for OpenAI, Anthropic, Google, Groq, or connect to local Ollama.",
+    "body": "To use AI features (voice conversation, vision analysis), you need at least one AI provider key:\n\n1. Go to **Settings** tab\n2. Find the **API Keys** section\n3. Enter your key for any supported provider\n4. The system auto-detects which capabilities each provider offers (LLM, STT, TTS, VLM)\n\n**Supported providers**: OpenAI, Anthropic, Google (Gemini), Groq, DeepSeek, ElevenLabs, Ollama (local).\n\nFor **Ollama** (free, local models): enter the server URL (e.g. `http://localhost:11434`) instead of an API key. Ollama provides LLM and VLM capabilities without any cloud costs.\n\nKeys are stored locally in `settings.json` on the robot and never sent anywhere except the provider's API.",
+    "tags": ["api", "keys", "providers", "setup", "openai", "anthropic", "ollama", "groq"]
+  },
+  {
+    "id": "first-conversation",
+    "category": "Getting Started",
+    "title": "Your First Conversation with Reachy",
+    "summary": "Start talking to Reachy using voice or text with the AI assistant.",
+    "body": "Once you have an API key configured:\n\n1. Go to the **Conversation** tab\n2. Select your preferred **STT** (speech-to-text), **LLM** (chat), and **TTS** (text-to-speech) providers/models\n3. Click **Start Listener** to begin voice input, or type in the chat box\n4. Reachy will respond with speech and expressive head movements\n\nReachy has 24 built-in tools: playing emotions/dances, taking snapshots, setting timers, playing music, checking system status, creating visual content on the scratchpad, and more. Just ask naturally.\n\n**Tip**: Adjust the confidence and volume thresholds in Settings if Reachy responds to background noise.",
+    "tags": ["conversation", "voice", "chat", "assistant", "getting started"]
+  },
+  {
+    "id": "making-reachy-move",
+    "category": "Getting Started",
+    "title": "Making Reachy Move",
+    "summary": "Use emotions, dances, oscillation patterns, and the joystick to animate Reachy.",
+    "body": "Reachy can move in several ways:\n\n**Emotions** (81 animations): Go to the Moves tab and click any emotion card to play it. Categories include happy, sad, angry, surprised, thinking, and more.\n\n**Dances** (19 patterns): Rhythmic head movements like nodding, swaying, and bobbing.\n\n**Oscillation** (6 patterns): Continuous idle animations \u2014 sway, nod, circle, breathe, figure8, lookAround. Great for making Reachy look alive when idle.\n\n**Joystick**: Use the floating joystick panel for direct head control \u2014 5 axes (yaw, pitch, roll, body rotation, vertical).\n\n**Voice**: During conversation, Reachy automatically plays emotions matching its responses.",
+    "tags": ["movement", "emotions", "dances", "oscillation", "joystick", "animation"]
+  },
+  {
+    "id": "floating-panels",
+    "category": "Getting Started",
+    "title": "Floating Panels",
+    "summary": "Camera view and joystick controls as draggable floating windows.",
+    "body": "Two panels can float on top of any tab:\n\n- **Camera Panel** \u2014 Live video feed from Reachy's camera or MuJoCo simulation. Toggle between camera, simulation, both, or off in Settings.\n- **Joystick Panel** \u2014 5-axis head control with a virtual joystick. Controls yaw (left/right), pitch (up/down), roll (tilt), body rotation, and vertical position.\n\nBoth panels are draggable, resizable, and remember their position across sessions.",
+    "tags": ["panels", "camera", "joystick", "floating", "ui"]
+  },
+  {
+    "id": "joystick-controls",
+    "category": "Controls",
+    "title": "Joystick Controls",
+    "summary": "5-axis head control with yaw, pitch, roll, body rotation, and vertical translation.",
+    "body": "The joystick provides 5 axes of control:\n\n- **Yaw**: Left/right rotation (-50 to +50 degrees)\n- **Pitch**: Up/down tilt (-25 to +25 degrees)\n- **Roll**: Head tilt (-30 to +35 degrees)\n- **Body Rotation**: Full body yaw (-160 to +160 degrees)\n- **Vertical (Z)**: Head height adjustment (-4cm to +4cm)\n\nThe joystick sends head pose commands via WebSocket at the configured update rate (default 15Hz). Release the joystick to return to center.",
+    "tags": ["joystick", "controls", "axes", "head", "movement"]
+  },
+  {
+    "id": "motor-modes",
+    "category": "Controls",
+    "title": "Motor Modes",
+    "summary": "Three motor modes: Enabled (full control), Disabled (limp), Gravity Compensation (springy).",
+    "body": "Reachy's motors have three modes:\n\n- **Enabled**: Full torque, robot holds position and responds to commands. Required for emotions, dances, and joystick.\n- **Disabled**: Motors are off, head is limp. Safe for physical interaction.\n- **Gravity Compensation**: Motors resist gravity but allow manual positioning. The head feels springy and can be gently moved by hand.\n\nChange modes from Settings or via the API. Motors must be **enabled** for any movement commands to work.",
+    "tags": ["motors", "mode", "enabled", "disabled", "gravity"]
+  },
+  {
+    "id": "voice-setup",
+    "category": "Voice & AI",
+    "title": "Setting Up Voice Conversation",
+    "summary": "Configure speech-to-text, LLM, and text-to-speech for voice interaction.",
+    "body": "Voice conversation requires three AI components:\n\n1. **STT (Speech-to-Text)**: Converts your speech to text. Providers: OpenAI (gpt-4o-transcribe), Groq (whisper-large-v3-turbo).\n2. **LLM (Language Model)**: Generates responses. Providers: Anthropic (Claude), OpenAI (GPT), Google (Gemini), Ollama (local), and more.\n3. **TTS (Text-to-Speech)**: Speaks responses aloud. Providers: OpenAI (gpt-4o-mini-tts), Google (Gemini TTS).\n\nConfigure each in the **Settings** tab under the Conversation section. The system routes through **LiteLLM** for unified provider access.\n\n**Language**: The `stt_language` setting controls the speech recognition language (ISO 639-1 code, e.g. `en`, `fr`, `de`). Defaults to English (`en`). Set to empty for auto-detect (multilingual mode). See the *Multilingual Support* topic for details.\n\n**Audio routing**: Choose between robot mic/speaker or browser mic/speaker for input and output independently.",
+    "tags": ["voice", "stt", "tts", "llm", "conversation", "speech", "microphone", "language"]
+  },
+  {
+    "id": "multilingual-support",
+    "category": "Voice & AI",
+    "title": "Multilingual Support",
+    "summary": "Hello World supports speech recognition in 99 languages via Whisper.",
+    "body": "The speech-to-text engine (Whisper) supports **99 languages**. By default, the `stt_language` setting is set to `en` (English) to prevent false transcriptions from background noise.\n\n**To use a different language:**\n- In Settings, change `stt_language` to an ISO 639-1 code (e.g. `fr` for French, `de` for German, `es` for Spanish, `ja` for Japanese)\n- Set it to an empty string for auto-detection (Whisper will detect the language per utterance)\n\n**Common language codes:** en (English), fr (French), de (German), es (Spanish), it (Italian), pt (Portuguese), nl (Dutch), ja (Japanese), ko (Korean), zh (Chinese), ar (Arabic), hi (Hindi), ru (Russian), pl (Polish), sv (Swedish), tr (Turkish)\n\n**Why default to English?** Without a language hint, Whisper sometimes hallucinates text in random languages when it hears ambiguous sounds or background noise. Pinning the language eliminates this.",
+    "tags": ["multilingual", "language", "stt", "whisper", "french", "german", "spanish", "i18n", "international"]
+  },
+  {
+    "id": "custom-system-prompt",
+    "category": "Voice & AI",
+    "title": "Custom System Prompts",
+    "summary": "Override Reachy's default personality and instructions with a custom system prompt.",
+    "body": "By default, Reachy uses a built-in system prompt that defines its personality and capabilities. You can override this in Settings:\n\n- Find **System Prompt** in the Conversation settings\n- Enter your custom instructions (leave empty to use the default)\n- Changes take effect on the next conversation turn\n\nThe default prompt instructs Reachy to be concise, expressive (always play emotions), and format output for TTS (no markdown, numbers as words).",
+    "tags": ["prompt", "personality", "system", "custom", "instructions"]
+  },
+  {
+    "id": "vision-modes",
+    "category": "Vision",
+    "title": "Vision Modes: CM4 vs WebGPU",
+    "summary": "Two inference backends for object detection \u2014 local Pi or browser GPU.",
+    "body": "Reachy supports two vision inference modes:\n\n**CM4 Mode** (local): Runs YOLO on the Pi's CPU via ONNX Runtime. Limited to nano models (~2-8 FPS). No extra hardware needed.\n\n**WebGPU Mode** (browser): Offloads inference to your browser's GPU via WebGPU/ONNX Web Runtime. Supports all model sizes, much faster on modern GPUs (30-60 FPS). Requires a WebGPU-capable browser.\n\nSwitch modes in Settings > Vision. CM4 mode is best for standalone operation; WebGPU mode is best when you have a laptop or desktop with a good GPU connected.",
+    "tags": ["vision", "cm4", "webgpu", "yolo", "inference", "gpu"]
+  },
+  {
+    "id": "snapshots-recordings",
+    "category": "Media",
+    "title": "Snapshots and Recordings",
+    "summary": "Capture images and record video/audio from Reachy's camera and microphone.",
+    "body": "**Snapshots**: Click the camera button or ask Reachy to take a snapshot. Images are saved to the media folder and visible in the Media tab. If a VLM is configured, snapshots are automatically described.\n\n**Video Recording**: Start/stop recording from the Robot tab or via voice command. Recordings use the robot's camera.\n\n**Audio Recording**: Record from the robot's microphone for sound capture.\n\nAll media files are accessible from the **Media** tab with thumbnails and playback controls.",
+    "tags": ["snapshot", "recording", "video", "audio", "camera", "media"]
+  },
+  {
+    "id": "music-playback",
+    "category": "Media",
+    "title": "Music Playback",
+    "summary": "Upload and play music through Reachy's speaker with volume control.",
+    "body": "Upload music files (MP3, WAV) to Reachy's music library. Play them from the Media tab or ask Reachy via voice (\"play some music\").\n\nThe AI can list available tracks and play specific ones using the `list_music` and `play_music` tools.\n\nMusic volume is controlled independently from speech volume via the `music_volume` setting. The master volume applies on top of all channels.",
+    "tags": ["music", "playback", "upload", "speaker", "audio"]
+  },
+  {
+    "id": "timers-guide",
+    "category": "Timers & Sounds",
+    "title": "Countdown Timers",
+    "summary": "Set named countdown timers that play a sound and announce when done.",
+    "body": "Set a timer from the Timers tab or by voice (\"set a timer for 5 minutes called pasta\").\n\nWhen a timer expires:\n- A configurable sound plays on the robot speaker\n- Reachy announces the timer name via TTS\n- A celebration emotion plays\n\nTimers can be paused, resumed, or cancelled. Expired/cancelled timers are auto-cleaned after 30 seconds. Timer state is in-memory (lost on restart).\n\nChoose from bundled timer sounds (ding, success, bell) or upload your own custom sounds.",
+    "tags": ["timer", "countdown", "sound", "notification"]
+  },
+  {
+    "id": "alarms-guide",
+    "category": "Timers & Sounds",
+    "title": "Alarms",
+    "summary": "Set recurring or one-shot alarms with day-of-week scheduling.",
+    "body": "Set alarms from the Timers tab or by voice (\"set an alarm for 7 AM called wake up\").\n\n**One-shot alarms**: Trigger once at the specified time, then auto-disable.\n**Recurring alarms**: Set specific days (mon, tue, etc.) to repeat weekly.\n\nWhen an alarm triggers: a sound plays, Reachy announces the alarm name, and a welcoming emotion plays.\n\nAlarms can be snoozed (default 5 minutes), dismissed, toggled on/off, or deleted. Alarm definitions persist in settings.json across restarts.",
+    "tags": ["alarm", "schedule", "recurring", "snooze", "wake"]
+  },
+  {
+    "id": "ambient-sounds",
+    "category": "Timers & Sounds",
+    "title": "Ambient Sounds",
+    "summary": "Loop ambient soundscapes (rain, ocean, forest) with optional sleep timer.",
+    "body": "Play ambient sounds from the Timers tab or by voice (\"play rain sounds for 30 minutes\").\n\n**Bundled sounds**: Rain, Ocean, Forest, Crickets, Fireplace, Wind, White Noise, Pink Noise, Brown Noise.\n\nFeatures:\n- Loops seamlessly by re-reading the audio file\n- Optional sleep timer auto-stops after N minutes\n- Pauses automatically during TTS playback (yields the speaker)\n- Volume adjustable independently via ambient_volume setting\n- Upload custom ambient loops (WAV/MP3, up to 20MB)\n\nAmbient and music share the speaker pipeline \u2014 starting one stops the other.",
+    "tags": ["ambient", "sounds", "rain", "ocean", "forest", "sleep", "noise", "loop"]
+  },
+  {
+    "id": "scratchpad-overview",
+    "category": "Media",
+    "title": "Scratchpad \u2014 Visual Content",
+    "summary": "Create rich HTML visualizations with charts, diagrams, code, and tables.",
+    "body": "The **Scratchpad** tab displays rich HTML content created by the AI or via the API. It supports:\n\n- **Chart.js** charts (bar, line, doughnut, etc.)\n- **Mermaid** diagrams (flowcharts, sequence, state, etc.)\n- **Prism** syntax-highlighted code blocks (Python, JavaScript, Bash, JSON)\n- **KaTeX** mathematical equations\n- **Markdown** rendering\n- Themed cards, badges, tables, and grid layouts\n\nContent is theme-aware \u2014 it switches between dark and light mode with the dashboard.\n\n**Entries are organized by project** and searchable by title or project name. When the AI creates a new entry, the dashboard auto-switches to the Scratchpad tab.\n\nAsk the AI to create visual content: \"Show me a chart of...\", \"Draw a diagram of...\", \"Create a comparison table for...\"",
+    "tags": ["scratchpad", "visualization", "chart", "diagram", "mermaid", "code"]
+  },
+  {
+    "id": "bluetooth-audio",
+    "category": "Controls",
+    "title": "Bluetooth Audio",
+    "summary": "Stream music and audio to Bluetooth speakers or headphones.",
+    "body": "Reachy can route audio output to Bluetooth A2DP speakers or headphones:\n\n1. **Pair a device**: Go to Settings and scan for nearby Bluetooth devices\n2. **Select audio output**: Set `audio_output` to `bluetooth` in Settings\n3. **Music streams at 48kHz** via A2DP for high quality playback\n\nWhen Bluetooth is selected, music and ambient sounds play through the Bluetooth device. Speech (TTS) can be routed to either the robot speaker or Bluetooth.\n\nThe intercom feature can also stream browser microphone audio to Bluetooth.",
+    "tags": ["bluetooth", "audio", "speaker", "a2dp", "wireless"]
+  },
+  {
+    "id": "intercom-speak-through-robot",
+    "category": "Controls",
+    "title": "Speak Through Robot (Intercom)",
+    "summary": "Use your browser mic to speak through the robot's speaker in real time.",
+    "body": "The **Speak Through Robot** button (microphone icon in the Conversation tab header) streams your browser microphone audio directly to the robot's speaker in real time.\n\nThis is different from the voice listener \u2014 the intercom does not transcribe speech. It is a direct audio pass-through, like a walkie-talkie.\n\n**How it works:**\n1. Click the microphone/speak button in the Conversation tab header\n2. Grant browser microphone permission if prompted\n3. Speak \u2014 your voice plays through the robot's speaker immediately\n4. Click again to stop\n\nThe intercom uses the `/ws/intercom` WebSocket endpoint and streams 16kHz PCM audio.",
+    "tags": ["intercom", "speak", "microphone", "speaker", "pass-through", "walkie-talkie", "browser mic"]
+  },
+  {
+    "id": "volume-channels",
+    "category": "Controls",
+    "title": "Volume Channels",
+    "summary": "Independent volume controls for master, music, speech, effects, and ambient sounds.",
+    "body": "Audio volume is controlled through multiple independent channels:\n\n- **Master Volume** (0-100, default 68): Scales all audio. Applied on top of per-channel volumes.\n- **Music Volume** (0-100, default 80): Controls music playback level.\n- **Ambient Volume** (0-100, default 15): Controls ambient sound loops (rain, ocean, etc.).\n- **Effects Volume** (0-100, default 80): Controls emotion and dance sound effects.\n- **Speech Volume** (0-100, default 80): Controls TTS voice output level.\n\nThe final volume for any source is: `master \u00d7 channel \u00d7 boost`. For example, TTS at master=68, speech=80 plays at 68% \u00d7 80% \u00d7 2.0 boost = 1.09\u00d7 normal level.\n\nAdjust all volumes in **Settings > Audio**.",
+    "tags": ["volume", "master", "music", "speech", "effects", "ambient", "audio", "level"]
+  },
+  {
+    "id": "web-search",
+    "category": "Voice & AI",
+    "title": "Web Search Model Filter",
+    "summary": "Filter the LLM model list to only show models that support web search.",
+    "body": "The **Web Search** toggle in LLM settings is a **model filter**. When enabled, the model dropdown only shows models that support web search capabilities.\n\nCurrently supported providers: **Anthropic** (Claude 3.5+) and **Perplexity**.\n\nWhen a web-search-capable model is selected and the filter is on, the system automatically passes `web_search_options` to the provider during chat completions, allowing the AI to look up current information during conversations.\n\nIf you switch the filter off, all models are shown regardless of web search support.",
+    "tags": ["web", "search", "filter", "model", "selection", "chat"]
+  },
+  {
+    "id": "confidence-thresholds",
+    "category": "Voice & AI",
+    "title": "Confidence and Volume Thresholds",
+    "summary": "Fine-tune when Reachy responds to voice input and ignores background noise.",
+    "body": "Two thresholds control voice activation:\n\n**Confidence Threshold** (`conf_threshold`, default 40): Minimum confidence percentage from the speech-to-text engine. Higher values mean the engine must be more confident the audio is speech before sending it to the LLM. Raise this if Reachy responds to non-speech sounds.\n\n**Volume Threshold** (`vol_threshold`, default 40): Minimum volume level. Audio below this is ignored. Raise this in noisy environments to filter out background noise.\n\n**Mic Gain** (`mic_gain`, default 5.0, range 1-20): Amplifies the microphone signal before processing. Increase if your voice is too quiet for the thresholds.\n\nAdjust all three in **Settings**. Start with defaults and adjust if Reachy triggers on noise or misses your speech.",
+    "tags": ["confidence", "threshold", "volume", "noise", "sensitivity", "mic", "gain", "tuning"]
+  },
+  {
+    "id": "faq-no-voice",
+    "category": "FAQ",
+    "title": "Reachy won't respond to voice",
+    "summary": "Troubleshoot voice conversation issues.",
+    "body": "If Reachy is not responding to your voice:\n\n1. **Check API keys**: Ensure you have valid keys for STT, LLM, and TTS providers in Settings.\n2. **Start the listener**: Go to Conversation tab and click Start Listener.\n3. **Check thresholds**: Lower the confidence threshold (conf_threshold) and volume threshold (vol_threshold) in Settings.\n4. **Check audio input**: Verify audio_input is set correctly (robot mic or browser mic).\n5. **Mic gain**: Increase mic_gain in Settings if the mic is too quiet.\n6. **Check the Conversation tab**: Look for transcription output \u2014 if text appears but no response, the LLM key may be invalid.",
+    "tags": ["troubleshoot", "voice", "microphone", "not working", "faq"]
+  },
+  {
+    "id": "faq-camera-not-showing",
+    "category": "FAQ",
+    "title": "Camera not showing",
+    "summary": "Troubleshoot missing camera feed.",
+    "body": "If the camera feed is not visible:\n\n1. **Check video_view setting**: Must be set to 'camera' or 'both' (not 'off' or 'simulation').\n2. **Camera hardware**: Reachy uses a Sony IMX708 CSI camera \u2014 ensure the ribbon cable is connected.\n3. **Browser camera**: If using a browser camera, grant camera permissions when prompted.\n4. **Refresh**: Hard-refresh the browser (Ctrl+Shift+R) to reconnect the video stream.",
+    "tags": ["camera", "video", "not showing", "troubleshoot", "faq"]
+  },
+  {
+    "id": "faq-motors",
+    "category": "FAQ",
+    "title": "Motors explained",
+    "summary": "Understanding motor modes and when to use each one.",
+    "body": "Reachy has 9 Dynamixel XL330 servo motors:\n- 1 body rotation motor (yaw, 160 degrees range)\n- 6 Stewart platform actuators (head position/orientation)\n- 2 antenna motors (left/right)\n\n**Enabled**: Full torque. Required for all movement commands.\n**Disabled**: No torque. Head is limp. Use when physically handling the robot.\n**Gravity Compensation**: Partial torque resists gravity. Head can be gently positioned by hand.\n\nIf motors won't enable, check the daemon status: `curl http://reachy:8000/api/daemon/status`",
+    "tags": ["motors", "servo", "torque", "mode", "faq"]
+  },
+  {
+    "id": "faq-reset",
+    "category": "FAQ",
+    "title": "How to reset everything",
+    "summary": "Reset settings, restart the app, or restart the daemon.",
+    "body": "**Reset settings**: Delete `~/hello_world/settings.json` on the robot and restart the app. This restores all defaults (you will need to re-enter API keys).\n\n**Restart the app** (quick): `curl -s -X POST http://reachy:8000/api/apps/restart-current-app`\n\n**Restart the daemon** (full): SSH into Reachy and run `reachy-restart`. After daemon restart, you MUST wake it up:\n```\ncurl -s -X POST 'http://reachy:8000/api/daemon/start?wake_up=true'\ncurl -s -X POST http://reachy:8000/api/apps/restart-current-app\n```",
+    "tags": ["reset", "restart", "settings", "daemon", "faq"]
+  }
+]
+</script>
+
+<script src="https://cdn.jsdelivr.net/npm/marked@14.1.0/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js"></script>
+
+<script>
+(function() {
+    // ===== Data =====
+    const topics = JSON.parse(document.getElementById('topics-data').textContent);
+    let activeCategory = '';
+    let searchQuery = '';
+    let showingDevDocs = false;
+    let devDocsLoaded = false;
+
+    // Derive categories from topics
+    const catMap = {};
+    topics.forEach(t => { catMap[t.category] = (catMap[t.category] || 0) + 1; });
+    const categories = Object.entries(catMap).map(([name, count]) => ({ name, count }));
+
+    // ===== Init =====
+    marked.setOptions({ breaks: false, gfm: true });
+    mermaid.initialize({
+        startOnLoad: false,
+        theme: 'dark',
+        themeVariables: {
+            primaryColor: '#6366f1', primaryTextColor: '#f5f5f5',
+            primaryBorderColor: '#444', lineColor: '#666',
+            secondaryColor: '#1a1a2e', tertiaryColor: '#252525',
+            background: '#1a1a1a', mainBkg: '#1a1a2e',
+            nodeBorder: '#6366f1', clusterBkg: '#252525',
+            clusterBorder: '#444', titleColor: '#f5f5f5',
+            edgeLabelBackground: '#1a1a1a',
+        },
+        flowchart: { htmlLabels: true, curve: 'basis' },
+        securityLevel: 'loose',
+    });
+
+    // ===== Mode toggle =====
+    document.getElementById('modeHelp').addEventListener('click', function() {
+        document.querySelectorAll('.help-mode-btn').forEach(b => b.classList.remove('active'));
+        this.classList.add('active');
+        showingDevDocs = false;
+        document.getElementById('searchRow').style.display = '';
+        document.getElementById('helpCategories').style.display = '';
+        document.getElementById('topicCount').style.display = '';
+        renderTopics();
+    });
+
+    document.getElementById('modeDev').addEventListener('click', function() {
+        document.querySelectorAll('.help-mode-btn').forEach(b => b.classList.remove('active'));
+        this.classList.add('active');
+        showingDevDocs = true;
+        document.getElementById('searchRow').style.display = 'none';
+        document.getElementById('helpCategories').style.display = 'none';
+        document.getElementById('topicCount').style.display = 'none';
+        showDevDocs();
+    });
+
+    // ===== Search =====
+    document.getElementById('helpSearch').addEventListener('input', function() {
+        searchQuery = this.value.trim();
+        renderTopics();
+    });
+
+    // ===== Categories =====
+    function renderCategories() {
+        const container = document.getElementById('helpCategories');
+        let html = '<button class="help-category active" data-cat="" title="Show all topics">All</button>';
+        for (const cat of categories) {
+            html += '<button class="help-category" data-cat="' + cat.name + '" title="Filter by ' + cat.name + '">' + cat.name + ' <span class="help-category-count">' + cat.count + '</span></button>';
+        }
+        container.innerHTML = html;
+        container.querySelectorAll('.help-category').forEach(btn => {
+            btn.addEventListener('click', function() {
+                activeCategory = this.dataset.cat;
+                container.querySelectorAll('.help-category').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                renderTopics();
+            });
+        });
+    }
+
+    // ===== Render topics =====
+    function renderTopics() {
+        const body = document.getElementById('helpTabBody');
+        if (showingDevDocs) return;
+
+        let filtered = topics.slice();
+
+        if (activeCategory) {
+            filtered = filtered.filter(t => t.category === activeCategory);
+        }
+
+        if (searchQuery) {
+            const words = searchQuery.toLowerCase().split(/\s+/);
+            filtered = filtered.filter(t => {
+                const text = [t.title, t.summary, (t.tags || []).join(' '), t.body || ''].join(' ').toLowerCase();
+                return words.every(w => text.includes(w));
+            });
+            filtered.sort((a, b) => {
+                const aTitle = a.title.toLowerCase();
+                const bTitle = b.title.toLowerCase();
+                const aMatch = words.some(w => aTitle.includes(w)) ? 1 : 0;
+                const bMatch = words.some(w => bTitle.includes(w)) ? 1 : 0;
+                return bMatch - aMatch;
+            });
+        }
+
+        document.getElementById('topicCount').textContent = filtered.length + ' topic' + (filtered.length === 1 ? '' : 's');
+
+        if (filtered.length === 0) {
+            body.innerHTML = '<div class="help-empty">No topics found' + (searchQuery ? ' for "' + escapeHtml(searchQuery) + '"' : '') + '.</div>';
+            return;
+        }
+
+        let html = '';
+        let currentCategory = '';
+
+        for (const topic of filtered) {
+            if (!activeCategory && !searchQuery && topic.category !== currentCategory) {
+                currentCategory = topic.category;
+                html += '<div class="help-section-header">' + currentCategory + '</div>';
+            }
+
+            const tags = (topic.tags || []).map(t =>
+                '<span class="help-tag">' + (searchQuery ? highlightText(t, searchQuery) : escapeHtml(t)) + '</span>'
+            ).join('');
+
+            const titleHtml = searchQuery ? highlightText(topic.title, searchQuery) : escapeHtml(topic.title);
+            const summaryHtml = searchQuery ? highlightText(topic.summary, searchQuery) : escapeHtml(topic.summary);
+
+            let snippetHtml = '';
+            if (searchQuery) {
+                const words = searchQuery.toLowerCase().split(/\s+/).filter(w => w.length > 0);
+                const titleLower = (topic.title + ' ' + topic.summary).toLowerCase();
+                const bodyOnly = topic.body || '';
+                const bodyLower = bodyOnly.toLowerCase();
+                const bodyOnlyWords = words.filter(w => bodyLower.includes(w) && !titleLower.includes(w));
+                const anyTitleMatch = words.some(w => titleLower.includes(w));
+                if (bodyOnlyWords.length > 0 || !anyTitleMatch) {
+                    const snippet = extractSnippet(bodyOnly, words);
+                    if (snippet) {
+                        snippetHtml = '<div class="help-topic-snippet">' + highlightText(snippet, searchQuery) + '</div>';
+                    }
+                }
+            }
+
+            html += '<details class="help-topic" id="help-' + topic.id + '">' +
+                '<summary>' +
+                    '<span class="help-topic-title">' + titleHtml + '</span>' +
+                    '<span class="help-topic-summary">' + summaryHtml + '</span>' +
+                    snippetHtml +
+                '</summary>' +
+                '<div class="help-topic-body" data-md="' + topic.id + '">' + escapeHtml(topic.body || '') + '</div>' +
+                (tags ? '<div class="help-tags">' + tags + '</div>' : '') +
+            '</details>';
+        }
+
+        body.innerHTML = html;
+
+        // Render markdown on expand
+        body.querySelectorAll('details.help-topic').forEach(details => {
+            details.addEventListener('toggle', function() {
+                if (!this.open) return;
+                const bodyDiv = this.querySelector('.help-topic-body');
+                if (bodyDiv.dataset.rendered) return;
+                bodyDiv.innerHTML = marked.parse(bodyDiv.textContent);
+                bodyDiv.dataset.rendered = 'true';
+                bodyDiv.querySelectorAll('table').forEach(t => t.classList.add('about-table'));
+                if (searchQuery) highlightDom(bodyDiv, searchQuery);
+            });
+        });
+    }
+
+    // ===== Developer Docs =====
+    async function showDevDocs() {
+        const body = document.getElementById('helpTabBody');
+        if (devDocsLoaded) return;
+
+        body.innerHTML = '<div class="help-empty">Loading developer documentation...</div>';
+
+        // README is embedded in a script tag to avoid a server round-trip
+        const readmeEl = document.getElementById('readme-src');
+        if (!readmeEl) {
+            body.innerHTML = '<div class="help-empty">README not available.</div>';
+            return;
+        }
+
+        const md = readmeEl.textContent;
+
+        const renderer = new marked.Renderer();
+        renderer.code = function({ text, lang }) {
+            if (lang === 'mermaid') return '<div class="help-mermaid">' + text + '</div>';
+            const esc = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            return '<pre><code class="language-' + (lang || '') + '">' + esc + '</code></pre>';
+        };
+        renderer.heading = function({ text, depth }) {
+            const id = text.toLowerCase().replace(/[^\w]+/g, '-').replace(/-+$/, '');
+            return '<h' + depth + ' id="' + id + '">' + text + '</h' + depth + '>';
+        };
+
+        body.innerHTML = '<div class="help-dev-docs">' + marked.parse(md, { renderer }) + '</div>';
+
+        // Render mermaid diagrams
+        const mermaidBlocks = body.querySelectorAll('.help-mermaid');
+        if (mermaidBlocks.length > 0) {
+            for (let i = 0; i < mermaidBlocks.length; i++) {
+                const block = mermaidBlocks[i];
+                try {
+                    const { svg } = await mermaid.render('mermaid-' + i, block.textContent.trim());
+                    block.innerHTML = svg;
+                } catch (e) {
+                    block.innerHTML = '<pre class="help-mermaid-error">' + e.message + '</pre>';
+                }
+            }
+        }
+
+        devDocsLoaded = true;
+    }
+
+    // ===== Helpers =====
+    function highlightText(text, query) {
+        if (!query) return escapeHtml(text);
+        const escaped = escapeHtml(text);
+        const words = query.toLowerCase().split(/\s+/).filter(w => w.length > 0);
+        if (!words.length) return escaped;
+        const sorted = words.slice().sort((a, b) => b.length - a.length);
+        const pattern = sorted.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+        const regex = new RegExp('(' + pattern + ')', 'gi');
+        return escaped.replace(regex, '<mark class="help-highlight">$1</mark>');
+    }
+
+    function highlightDom(container, query) {
+        if (!query || !container) return;
+        const words = query.toLowerCase().split(/\s+/).filter(w => w.length > 0);
+        if (!words.length) return;
+        const sorted = words.slice().sort((a, b) => b.length - a.length);
+        const pattern = sorted.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+        const regex = new RegExp('(' + pattern + ')', 'gi');
+        const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+            acceptNode: function(node) {
+                const tag = node.parentElement && node.parentElement.tagName;
+                if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'MARK') return NodeFilter.FILTER_REJECT;
+                return regex.test(node.textContent) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+            }
+        });
+        const nodes = [];
+        while (walker.nextNode()) nodes.push(walker.currentNode);
+        for (const node of nodes) {
+            const span = document.createElement('span');
+            span.innerHTML = node.textContent.replace(regex, '<mark class="help-highlight">$1</mark>');
+            node.parentNode.replaceChild(span, node);
+        }
+    }
+
+    function extractSnippet(body, words) {
+        const plain = body.replace(/[*_`#\[\]]/g, '').replace(/\n+/g, ' ').replace(/\s+/g, ' ');
+        const lower = plain.toLowerCase();
+        let bestPos = -1;
+        for (const w of words) {
+            const pos = lower.indexOf(w);
+            if (pos !== -1 && (bestPos === -1 || pos < bestPos)) bestPos = pos;
+        }
+        if (bestPos === -1) return '';
+        const start = Math.max(0, bestPos - 40);
+        const end = Math.min(plain.length, bestPos + 80);
+        let snippet = plain.slice(start, end).trim();
+        if (start > 0) snippet = '...' + snippet;
+        if (end < plain.length) snippet += '...';
+        return snippet;
+    }
+
+    function escapeHtml(str) {
+        const d = document.createElement('div');
+        d.textContent = str;
+        return d.innerHTML;
+    }
+
+    // ===== Boot =====
+    renderCategories();
+    renderTopics();
+})();
+</script>
+
+<!-- README embedded for Developer Docs mode (frontmatter stripped) -->
+<script id="readme-src" type="text/markdown">
 # Hello World — Reachy Mini DevKit
 
 A community dashboard app for [Reachy Mini](https://www.pollen-robotics.com/reachy-mini/) with system telemetry, AI conversation, real-time vision, music playback, and full robot control.
 
 Built on the `reachy-mini` SDK as a `ReachyMiniApp`. Serves a single-page web UI on port 8042.
 
+> **A note from the developer** — This is a solo project. I've been ambitious with the feature set — 114 endpoints, 22 LLM tools, real-time WebSocket control, vision, voice, smart home, and more — and that means there will be rough edges. If you find a bug or have a suggestion, please [open a discussion](https://huggingface.co/spaces/panny247/hello_world/discussions). I haven't had any community contributions yet but I genuinely welcome them. It's one person behind this, so expect passion, not perfection.
+
 ```mermaid
 graph LR
     subgraph Browser
@@ -673,7 +1317,7 @@ hello_world/
         │   ├── status-manager.js # Service health pills + issue badge
         │   ├── transcribe.js     # Transcript WebSocket UI + message routing
         │   ├── vision.js         # Vision mode/task/settings controller
-        │   ├── vision-follow.js  # Vision-based head tracking (follow detected objects)
+        │   ├── vision-follow.js  # Vision-based head tracking (follow objects)
         │   ├── vision-overlay.js # Canvas overlay (boxes, keypoints, labels)
         │   ├── vision-poses.js   # Pose keypoint visualization + skeleton rendering
         │   └── vision-webgpu.js  # Browser-side ONNX Runtime Web inference
@@ -1000,137 +1644,7 @@ Dark/light theme via CSS custom properties. Toggle in header bar. Persisted to l
 ## License
 
 Community project for Reachy Mini developers.
-
 </script>
 
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-
-<script>
-mermaid.initialize({
-    startOnLoad: false,
-    theme: "dark",
-    themeVariables: {
-        primaryColor: "#7c5cfc",
-        primaryTextColor: "#e2e0ea",
-        primaryBorderColor: "#1e1e2e",
-        lineColor: "#7c5cfc",
-        secondaryColor: "#14141f",
-        tertiaryColor: "#111118",
-        background: "#14141f",
-        mainBkg: "#14141f",
-        nodeBorder: "#7c5cfc"
-    }
-});
-
-// Render
-const md = document.getElementById("md-src").textContent;
-const renderer = new marked.Renderer();
-
-renderer.code = function({ text, lang }) {
-    if (lang === "mermaid") return '<div class="mermaid">' + text + "</div>";
-    const esc = text.replace(/</g,"&lt;").replace(/>/g,"&gt;");
-    return '<pre><code class="language-' + (lang||"") + '">' + esc + "</code></pre>";
-};
-
-renderer.heading = function({ text, depth }) {
-    const id = text.toLowerCase().replace(/[^\w]+/g, "-").replace(/-+$/, "");
-    return "<h" + depth + ' id="' + id + '">' + text + "</h" + depth + ">";
-};
-
-marked.setOptions({ renderer, gfm: true, breaks: false });
-
-const docsEl = document.getElementById("docs");
-docsEl.innerHTML = marked.parse(md);
-mermaid.run({ nodes: document.querySelectorAll(".mermaid") });
-
-// TOC
-const tocPanel = document.getElementById("tocPanel");
-docsEl.querySelectorAll("h1,h2,h3").forEach(h => {
-    if (!h.id) return;
-    const a = document.createElement("a");
-    a.href = "#" + h.id;
-    a.textContent = h.textContent;
-    if (h.tagName === "H3") a.className = "depth-3";
-    a.onclick = () => tocPanel.classList.remove("open");
-    tocPanel.appendChild(a);
-});
-
-document.getElementById("tocBtn").onclick = () => tocPanel.classList.toggle("open");
-document.addEventListener("click", e => {
-    if (!tocPanel.contains(e.target) && e.target !== document.getElementById("tocBtn"))
-        tocPanel.classList.remove("open");
-});
-
-// Back to top
-const topBtn = document.getElementById("topBtn");
-window.addEventListener("scroll", () => topBtn.classList.toggle("show", scrollY > 400));
-
-// Search
-const searchInput = document.getElementById("search");
-const searchInfo = document.getElementById("searchInfo");
-let searchTimer;
-searchInput.addEventListener("input", () => { clearTimeout(searchTimer); searchTimer = setTimeout(doSearch, 200); });
-
-function doSearch() {
-    const q = searchInput.value.trim().toLowerCase();
-
-    // Clear highlights
-    docsEl.querySelectorAll("mark").forEach(m => {
-        const p = m.parentNode;
-        p.replaceChild(document.createTextNode(m.textContent), m);
-        p.normalize();
-    });
-    docsEl.querySelectorAll(".search-hidden").forEach(el => el.classList.remove("search-hidden"));
-
-    if (!q) { searchInfo.textContent = ""; return; }
-
-    // Group into sections by h1/h2
-    const sections = [];
-    let cur = null;
-    for (const child of docsEl.children) {
-        if (child.tagName === "H1" || child.tagName === "H2") {
-            cur = { heading: child, els: [child] };
-            sections.push(cur);
-        } else if (cur) {
-            cur.els.push(child);
-        }
-    }
-
-    let count = 0;
-    sections.forEach(sec => {
-        const text = sec.els.map(e => e.textContent).join(" ").toLowerCase();
-        if (!text.includes(q)) {
-            sec.els.forEach(e => e.classList.add("search-hidden"));
-        } else {
-            sec.els.forEach(e => { count += highlight(e, q); });
-        }
-    });
-
-    searchInfo.textContent = count > 0 ? count + " match" + (count === 1 ? "" : "es") : "No matches";
-}
-
-function highlight(el, q) {
-    let n = 0;
-    if (el.classList && (el.classList.contains("mermaid") || el.tagName === "PRE")) return 0;
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-    const nodes = [];
-    while (walker.nextNode()) nodes.push(walker.currentNode);
-    nodes.forEach(node => {
-        const idx = node.textContent.toLowerCase().indexOf(q);
-        if (idx === -1 || node.parentNode.tagName === "MARK") return;
-        const before = document.createTextNode(node.textContent.substring(0, idx));
-        const mark = document.createElement("mark");
-        mark.textContent = node.textContent.substring(idx, idx + q.length);
-        const after = document.createTextNode(node.textContent.substring(idx + q.length));
-        node.parentNode.insertBefore(before, node);
-        node.parentNode.insertBefore(mark, node);
-        node.parentNode.insertBefore(after, node);
-        node.parentNode.removeChild(node);
-        n++;
-    });
-    return n;
-}
-</script>
 </body>
-</html>
+</html>