First iteration, still very WIP

README.md

@@ -5,8 +5,45 @@ colorFrom: red
 colorTo: blue
 sdk: static
 pinned: false
-short_description: Write your description here
+short_description: Trigger Reachy Mini's recorded emotions with a Plutchik-inspired wheel
 tags:
  - reachy_mini
  - reachy_mini_python_app
----
+---
+
+The Emotions Wheel is a playful control board that lets you browse every recorded feeling for Reachy Mini.
+Each emotion family appears once on the outer wheel while the prerecorded behaviors (the numbered variations)
+rest inside the inner wheel. Click one of the behaviors to make Reachy re-enact the motion and its matching
+sound, and hover any slice to get the original dataset name, duration, and description.
+
+## Color families
+
+To echo Plutchik's flower, we tinted each family but kept the labels out of the GUI. Here's the mapping:
+
+- Joy — warm coral (`#FF9F66`)
+- Trust — lagoon teal (`#5CC8D7`)
+- Fear — noctilucent blue (`#4D7C8A`)
+- Surprise — lilac flare (`#C084FC`)
+- Sadness — dusk indigo (`#4F6DF5`)
+- Disgust — mossy green (`#58B368`)
+- Anger — ember red (`#E94F37`)
+- Anticipation — amber sunrise (`#FFB347`)
+
+## Duration badges
+
+Behaviors carry a tiny colored crescent to hint how long the move lasts:
+
+- Seafoam (`#73E0A9`) — short (≤ 4 s)
+- Amber (`#FFC857`) — medium (between 4 s and 8 s)
+- Rose (`#FF6B6B`) — long (> 8 s)
+
+## Missing emotions we'd love to record
+
+- hopeful
+- jealous
+- playful
+- apologetic
+- embarrassed
+- nostalgic
+- proud_shy_combo
+- confident

emotions/main.py

@@ -1,69 +1,328 @@
+from __future__ import annotations
+
+import re
 import threading
-from reachy_mini import ReachyMini, ReachyMiniApp
-from reachy_mini.utils import create_head_pose
-import numpy as np
 import time
-from pydantic import BaseModel
+from dataclasses import dataclass, field
+from datetime import datetime
+from typing import Any
 
+from fastapi import HTTPException
+from pydantic import BaseModel, Field
 
-class Emotions(ReachyMiniApp):
-    # Optional: URL to a custom configuration page for the app
-    # eg. "http://localhost:8042"
-    custom_app_url: str | None = "http://0.0.0.0:8042"
-    # Optional: specify a media backend ("gstreamer", "default", etc.)
-    request_media_backend: str | None = None
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.motion.recorded_move import RecordedMoves
 
-    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
-        t0 = time.time()
+EMOTIONS_DATASET = "pollen-robotics/reachy-mini-emotions-library"
 
-        antennas_enabled = True
-        sound_play_requested = False
+DURATION_BANDS: dict[str, dict[str, Any]] = {
+    "short": {"label": "Short (<4s)", "max": 4.0, "color": "#73E0A9"},
+    "medium": {"label": "Medium (4‑8s)", "max": 8.0, "color": "#FFC857"},
+    "long": {"label": "Long (>8s)", "max": None, "color": "#FF6B6B"},
+}
 
-        # You can ignore this part if you don't want to add settings to your app. If you set custom_app_url to None, you have to remove this part as well.
-        # === vvv ===
-        class AntennaState(BaseModel):
-            enabled: bool
+CATEGORY_STYLES: dict[str, dict[str, str]] = {
+    "joy": {"label": "Joy", "color": "#FF9F66", "accent": "#FFE0C7"},
+    "trust": {"label": "Trust", "color": "#5CC8D7", "accent": "#B6F2FF"},
+    "fear": {"label": "Fear", "color": "#4D7C8A", "accent": "#A8D5E3"},
+    "surprise": {"label": "Surprise", "color": "#C084FC", "accent": "#EBD4FF"},
+    "sadness": {"label": "Sadness", "color": "#4F6DF5", "accent": "#B6C5FF"},
+    "disgust": {"label": "Disgust", "color": "#58B368", "accent": "#C6F3C8"},
+    "anger": {"label": "Anger", "color": "#E94F37", "accent": "#F7B6A4"},
+    "anticipation": {"label": "Anticipation", "color": "#FFB347", "accent": "#FFE0A3"},
+    "neutral": {"label": "Neutral", "color": "#8E9AAF", "accent": "#E0E6F4"},
+}
 
-        @self.settings_app.post("/antennas")
-        def update_antennas_state(state: AntennaState):
-            nonlocal antennas_enabled
-            antennas_enabled = state.enabled
-            return {"antennas_enabled": antennas_enabled}
+# Manual assignment of each emotion family to a Plutchik-inspired category
+CATEGORY_ASSIGNMENTS: dict[str, str] = {
+    "amazed": "surprise",
+    "anxiety": "fear",
+    "attentive": "trust",
+    "boredom": "sadness",
+    "calming": "trust",
+    "cheerful": "joy",
+    "come": "trust",
+    "confused": "surprise",
+    "contempt": "disgust",
+    "curious": "anticipation",
+    "dance": "joy",
+    "disgusted": "disgust",
+    "displeased": "anger",
+    "downcast": "sadness",
+    "dying": "sadness",
+    "electric": "surprise",
+    "enthusiastic": "joy",
+    "exhausted": "sadness",
+    "fear": "fear",
+    "frustrated": "anger",
+    "furious": "anger",
+    "go_away": "disgust",
+    "grateful": "joy",
+    "helpful": "trust",
+    "impatient": "anticipation",
+    "incomprehensible": "surprise",
+    "indifferent": "disgust",
+    "inquiring": "anticipation",
+    "irritated": "anger",
+    "laughing": "joy",
+    "lonely": "sadness",
+    "lost": "sadness",
+    "loving": "joy",
+    "no": "anger",
+    "no_excited": "anger",
+    "no_sad": "sadness",
+    "oops": "surprise",
+    "proud": "joy",
+    "rage": "anger",
+    "relief": "trust",
+    "reprimand": "anger",
+    "resigned": "sadness",
+    "sad": "sadness",
+    "scared": "fear",
+    "serenity": "trust",
+    "shy": "fear",
+    "sleep": "sadness",
+    "success": "joy",
+    "surprised": "surprise",
+    "thoughtful": "anticipation",
+    "tired": "sadness",
+    "uncertain": "fear",
+    "uncomfortable": "fear",
+    "understanding": "trust",
+    "welcoming": "trust",
+    "yes": "joy",
+    "yes_sad": "sadness",
+}
 
-        @self.settings_app.post("/play_sound")
-        def request_sound_play():
-            nonlocal sound_play_requested
-            sound_play_requested = True
-            
-        # === ^^^ ===
+MISSING_EMOTIONS = [
+    "hopeful",
+    "jealous",
+    "playful",
+    "apologetic",
+    "embarrassed",
+    "nostalgic",
+    "proud_shy_combo",
+    "confident",
+]
 
-        # Main control loop
-        while not stop_event.is_set():
-            t = time.time() - t0
 
-            yaw_deg = 30.0 * np.sin(2.0 * np.pi * 0.2 * t)
-            head_pose = create_head_pose(yaw=yaw_deg, degrees=True)
+@dataclass
+class EmotionVariant:
+    move_name: str
+    base_name: str
+    description: str
+    duration: float
+    ordinal: int
+    duration_band: str
+    display_label: str
+    roman_label: str
 
-            if antennas_enabled:
-                amp_deg = 25.0
-                a = amp_deg * np.sin(2.0 * np.pi * 0.5 * t)
-                antennas_deg = np.array([a, -a])
-            else:
-                antennas_deg = np.array([0.0, 0.0])
+    @property
+    def duration_color(self) -> str:
+        return DURATION_BANDS[self.duration_band]["color"]
+
+
+@dataclass
+class EmotionGroup:
+    base_name: str
+    category: str
+    display_label: str
+    variants: list[EmotionVariant] = field(default_factory=list)
+
+    @property
+    def average_duration(self) -> float:
+        if not self.variants:
+            return 0.0
+        return sum(v.duration for v in self.variants) / len(self.variants)
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "base_name": self.base_name,
+            "label": self.display_label,
+            "category": self.category,
+            "average_duration": self.average_duration,
+            "stack_size": len(self.variants),
+            "variants": [
+                {
+                    "move_name": v.move_name,
+                    "description": v.description,
+                    "duration": v.duration,
+                    "duration_band": v.duration_band,
+                    "duration_color": v.duration_color,
+                    "display_label": v.display_label,
+                    "roman_label": v.roman_label,
+                }
+                for v in self.variants
+            ],
+        }
+
+
+class PlayEmotionPayload(BaseModel):
+    move_name: str = Field(..., description="Exact key of the recorded move to play")
+
+
+def duration_band(duration: float) -> str:
+    if duration <= DURATION_BANDS["short"]["max"]:
+        return "short"
+    if duration <= DURATION_BANDS["medium"]["max"]:
+        return "medium"
+    return "long"
+
+
+def roman_from_int(value: int) -> str:
+    symbols = {1: "I", 2: "II", 3: "III", 4: "IV", 5: "V"}
+    return symbols.get(value, str(value))
+
+
+def strip_suffix(move_name: str) -> tuple[str, int]:
+    match = re.match(r"([a-z_]+?)(\\d+)?$", move_name)
+    if not match:
+        return move_name, 1
+    base = match.group(1)
+    ordinal = int(match.group(2)) if match.group(2) else 1
+    return base, ordinal
 
-            if sound_play_requested:
-                print("Playing sound...")
-                reachy_mini.media.play_sound("wake_up.wav")
-                sound_play_requested = False
 
-            antennas_rad = np.deg2rad(antennas_deg)
+def display_label(slug: str) -> str:
+    return slug.replace("_", " ").title()
 
-            reachy_mini.set_target(
-                head=head_pose,
-                antennas=antennas_rad,
+
+def build_catalog(recorded_emotions: RecordedMoves) -> tuple[list[EmotionGroup], dict[str, EmotionVariant]]:
+    groups: dict[str, EmotionGroup] = {}
+    variant_lookup: dict[str, EmotionVariant] = {}
+
+    for move_name in sorted(recorded_emotions.list_moves()):
+        move = recorded_emotions.get(move_name)
+        base, ordinal = strip_suffix(move_name)
+        category = CATEGORY_ASSIGNMENTS.get(base, "neutral")
+        label = display_label(base)
+        band = duration_band(move.duration)
+        variant = EmotionVariant(
+            move_name=move_name,
+            base_name=base,
+            description=move.description or "",
+            duration=move.duration,
+            ordinal=ordinal,
+            duration_band=band,
+            display_label=label,
+            roman_label=roman_from_int(ordinal),
+        )
+        variant_lookup[move_name] = variant
+
+        if base not in groups:
+            groups[base] = EmotionGroup(
+                base_name=base,
+                category=category,
+                display_label=label,
+                variants=[variant],
             )
+        else:
+            groups[base].variants.append(variant)
+
+    ordered_groups = sorted(groups.values(), key=lambda g: (g.category, g.display_label))
+    for group in ordered_groups:
+        group.variants.sort(key=lambda v: v.ordinal)
+    return ordered_groups, variant_lookup
+
+
+class Emotions(ReachyMiniApp):
+    """Reachy Mini app that plays recorded emotions with a wheel-inspired UI."""
+
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = None
 
-            time.sleep(0.02)
+    def __init__(self) -> None:
+        super().__init__()
+        self._recorded_emotions = RecordedMoves(EMOTIONS_DATASET)
+        self._groups, self._variant_map = build_catalog(self._recorded_emotions)
+        self._lock = threading.Lock()
+        self._pending_move: str | None = None
+        self._current_move: str | None = None
+        self._last_completed: float | None = None
+        self._register_routes()
+
+    def _register_routes(self) -> None:
+        @self.settings_app.get("/api/emotions")
+        def list_emotions() -> dict[str, Any]:
+            category_blocks: list[dict[str, Any]] = []
+            for category_id, style in CATEGORY_STYLES.items():
+                members = [
+                    group.to_dict()
+                    for group in self._groups
+                    if group.category == category_id
+                ]
+                if not members:
+                    continue
+                category_blocks.append(
+                    {
+                        "id": category_id,
+                        "color": style["color"],
+                        "accent": style["accent"],
+                        "emotions": members,
+                    }
+                )
+
+            return {
+                "categories": category_blocks,
+                "duration_bands": [
+                    {"id": key, **value} for key, value in DURATION_BANDS.items()
+                ],
+                "missing_emotions": MISSING_EMOTIONS,
+            }
+
+        @self.settings_app.get("/api/state")
+        def get_state() -> dict[str, Any]:
+            with self._lock:
+                current = self._current_move
+                pending = self._pending_move
+                last_completed = (
+                    datetime.fromtimestamp(self._last_completed).isoformat()
+                    if self._last_completed
+                    else None
+                )
+
+            return {
+                "is_playing": current is not None,
+                "current_move": current,
+                "pending_move": pending,
+                "last_completed_at": last_completed,
+            }
+
+        @self.settings_app.post("/api/play")
+        def play_emotion(payload: PlayEmotionPayload) -> dict[str, Any]:
+            move_name = payload.move_name
+            variant = self._variant_map.get(move_name)
+            if variant is None:
+                raise HTTPException(status_code=404, detail=f"Unknown move {move_name}")
+
+            with self._lock:
+                if self._current_move or self._pending_move:
+                    return {"accepted": False, "reason": "busy"}
+                self._pending_move = move_name
+                return {
+                    "accepted": True,
+                    "queued_move": move_name,
+                    "display_label": variant.display_label,
+                    "roman_label": variant.roman_label,
+                }
+
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event) -> None:
+        while not stop_event.is_set():
+            move_to_play: str | None = None
+            with self._lock:
+                if self._pending_move:
+                    move_to_play = self._pending_move
+                    self._pending_move = None
+                    self._current_move = move_to_play
+
+            if move_to_play:
+                move = self._recorded_emotions.get(move_to_play)
+                reachy_mini.play_move(move, initial_goto_duration=0.7)
+                with self._lock:
+                    self._current_move = None
+                    self._last_completed = time.time()
+            else:
+                stop_event.wait(0.01)
 
 
 if __name__ == "__main__":
@@ -71,4 +330,4 @@ if __name__ == "__main__":
     try:
         app.wrapped_run()
     except KeyboardInterrupt:
-        app.stop()
+        app.stop()

emotions/static/index.html

@@ -3,25 +3,65 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Reachy Mini example app template</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reachy Mini • Emotions Wheel</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 
 <body>
-    <h1>Reachy Mini – Control Panel</h1>
+    <div class="background-halo"></div>
+    <main class="app-shell">
+        <header class="hero">
+            <div>
+                <p class="eyebrow">Reachy Mini Companion</p>
+                <h1>Wheel of Emotions & Behaviors</h1>
+                <p class="subtitle">
+                    Hover to explore every recorded emotion, then click the behavior ring to play it on Reachy Mini.
+                    Each slice inherits a Plutchik-inspired color, while the duration badge tells you how long the move
+                    lasts.
+                </p>
+            </div>
+            <div class="hero-status">
+                <span class="chip" id="statusChip">Syncing…</span>
+                <span class="chip soft">Tooltips include the original dataset name + duration.</span>
+            </div>
+        </header>
 
-    <div id="controls">
-        <label style="display:flex; align-items:center; gap:8px;">
-            <input type="checkbox" id="antenna-checkbox" checked>
-            Antennas
-        </label>
+        <section class="layout-grid">
+            <article class="card wheel-card">
+                <div class="wheel" id="emotionWheel">
+                    <div class="ring outer" id="outerRing"></div>
+                    <div class="ring inner" id="innerRing"></div>
+                    <div class="wheel-center">
+                        <p>behavior wheel</p>
+                        <small>Clicks are ignored while a move is still running.</small>
+                    </div>
+                </div>
+                <div class="legend-row">
+                    <div class="legend" id="durationLegend"></div>
+                    <div class="legend-note">Duration colors live on the little crescents around each behavior.</div>
+                </div>
+            </article>
 
-        <button id="sound-btn">Play Sound</button>
-    </div>
+            <article class="card info-card">
+                <div class="info-header">
+                    <h2>What’s not yet recorded?</h2>
+                    <p>Ideas we’d love to capture next time the microphones are on.</p>
+                </div>
+                <ul class="missing-list" id="missingList"></ul>
+                <div class="info-footer">
+                    <p>
+                        Want to contribute another feeling? Log it in the plan or ping the team with timing ideas.
+                        We can even add behaviors that branch from the same emotion stack.
+                    </p>
+                </div>
+            </article>
+        </section>
+    </main>
 
-    <div id="status">Antennas status: running</div>
-    <script src="/static/main.js"></script>
+    <div id="tooltip" class="tooltip" role="status" aria-live="polite"></div>
+    <div id="toast" class="toast" role="status" aria-live="polite"></div>
+    <script type="module" src="/static/main.js"></script>
 </body>
 
-</html>
+</html>

emotions/static/main.js

@@ -1,47 +1,284 @@
-let antennasEnabled = true;
+const outerRing = document.getElementById("outerRing");
+const innerRing = document.getElementById("innerRing");
+const durationLegend = document.getElementById("durationLegend");
+const missingList = document.getElementById("missingList");
+const statusChip = document.getElementById("statusChip");
+const tooltip = document.getElementById("tooltip");
+const toast = document.getElementById("toast");
+const wheel = document.getElementById("emotionWheel");
 
-async function updateAntennasState(enabled) {
-    try {
-        const resp = await fetch("/antennas", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ enabled }),
-        });
-        const data = await resp.json();
-        antennasEnabled = data.antennas_enabled;
-        updateUI();
-    } catch (e) {
-        document.getElementById("status").textContent = "Backend error";
+const appState = {
+    categories: [],
+    durationBands: [],
+    missing: [],
+    variantLookup: new Map(),
+    busy: true,
+    currentMove: null,
+};
+
+const currentUrl = new URL(window.location.href);
+if (!currentUrl.pathname.endsWith("/")) {
+    currentUrl.pathname += "/";
+}
+currentUrl.search = "";
+currentUrl.hash = "";
+const apiUrl = (path) => {
+    const clean = path.startsWith("/") ? path.slice(1) : path;
+    return new URL(clean, currentUrl).toString();
+};
+
+async function fetchJson(path, options = {}) {
+    const config = { method: options.method || "GET", headers: { ...(options.headers || {}) } };
+    if (options.body) {
+        config.body = JSON.stringify(options.body);
+        config.headers["Content-Type"] = "application/json";
+    }
+    const response = await fetch(apiUrl(path), config);
+    if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+    }
+    if (response.status === 204) {
+        return {};
     }
+    return response.json();
 }
 
-async function playSound() {
-    try {
-        await fetch("/play_sound", { method: "POST" });
-    } catch (e) {
-        console.error("Error triggering sound:", e);
+function showToast(message) {
+    toast.textContent = message;
+    toast.classList.add("visible");
+    setTimeout(() => toast.classList.remove("visible"), 2800);
+}
+
+function updateStatusChip(label, playing) {
+    statusChip.textContent = label;
+    statusChip.classList.toggle("playing", playing);
+}
+
+function setBusyState(isBusy, moveName) {
+    appState.busy = isBusy;
+    appState.currentMove = moveName || null;
+    const label = isBusy ? `Playing ${formatMoveName(moveName)}` : "Idle";
+    updateStatusChip(label, isBusy);
+    document.querySelectorAll(".behavior-node").forEach((node) => {
+        node.classList.toggle("busy", isBusy);
+    });
+}
+
+function formatMoveName(moveName) {
+    if (!moveName) {
+        return "";
     }
+    const variant = appState.variantLookup.get(moveName);
+    if (!variant) {
+        return moveName;
+    }
+    return `${variant.display_label} ${variant.roman_label}`.trim();
 }
 
-function updateUI() {
-    const checkbox = document.getElementById("antenna-checkbox");
-    const status = document.getElementById("status");
+function renderLegend(bands) {
+    durationLegend.innerHTML = "";
+    bands.forEach((band) => {
+        const el = document.createElement("span");
+        el.className = "legend-item";
+        const swatch = document.createElement("span");
+        swatch.className = "legend-swatch";
+        swatch.style.background = band.color;
+        const label = document.createElement("span");
+        label.textContent = band.label;
+        el.appendChild(swatch);
+        el.appendChild(label);
+        durationLegend.appendChild(el);
+    });
+}
 
-    checkbox.checked = antennasEnabled;
+function renderMissing(list) {
+    missingList.innerHTML = "";
+    list.forEach((name) => {
+        const li = document.createElement("li");
+        li.textContent = name.replace(/_/g, " ");
+        missingList.appendChild(li);
+    });
+}
 
-    if (antennasEnabled) {
-        status.textContent = "Antennas status: running";
-    } else {
-        status.textContent = "Antennas status: stopped";
+function buildVariantLookup(categories) {
+    appState.variantLookup.clear();
+    categories.forEach((cat) =>
+        cat.emotions.forEach((group) =>
+            group.variants.forEach((variant) => {
+                appState.variantLookup.set(variant.move_name, variant);
+            })
+        )
+    );
+}
+
+function renderWheel(categories) {
+    outerRing.innerHTML = "";
+    innerRing.innerHTML = "";
+    const totalGroups = categories.reduce((acc, cat) => acc + cat.emotions.length, 0);
+    if (!totalGroups) {
+        return;
     }
+    const gradientParts = [];
+    let cursor = 0;
+    const wheelRadius = wheel.getBoundingClientRect().width / 2;
+    const outerRadius = wheelRadius - 60;
+    const behaviorBase = wheelRadius - 150;
+    const behaviorStep = 26;
+
+    categories.forEach((category) => {
+        const groupCount = category.emotions.length;
+        if (!groupCount) {
+            return;
+        }
+        const startDeg = (cursor / totalGroups) * 360;
+        const endDeg = ((cursor + groupCount) / totalGroups) * 360;
+        gradientParts.push(`${category.color} ${startDeg}deg ${endDeg}deg`);
+
+        category.emotions.forEach((group, indexWithinCategory) => {
+            const absoluteIndex = cursor + indexWithinCategory + 0.5;
+            const angle = absoluteIndex / totalGroups * 360 - 90;
+            createEmotionNode(group, angle, outerRadius);
+            createBehaviorNodes(group, category, angle, behaviorBase, behaviorStep);
+        });
+
+        cursor += groupCount;
+    });
+
+    outerRing.style.setProperty("--wheel-gradient", `conic-gradient(${gradientParts.join(",")})`);
+    innerRing.style.setProperty("--wheel-gradient", `conic-gradient(${gradientParts.join(",")})`);
 }
 
-document.getElementById("antenna-checkbox").addEventListener("change", (e) => {
-    updateAntennasState(e.target.checked);
-});
+function createEmotionNode(group, angle, radius) {
+    const node = document.createElement("div");
+    node.className = "emotion-node";
+    node.dataset.base = group.base_name;
+    node.dataset.stack = group.stack_size;
+    node.textContent = group.label;
+    positionNode(node, angle, radius);
 
-document.getElementById("sound-btn").addEventListener("click", () => {
-    playSound();
-});
+    node.addEventListener("mouseenter", () => highlightBase(group.base_name, true));
+    node.addEventListener("mouseleave", () => highlightBase(group.base_name, false));
+
+    outerRing.appendChild(node);
+}
 
-updateUI();
+function createBehaviorNodes(group, category, angle, baseRadius, radiusStep) {
+    const total = group.variants.length || 1;
+    group.variants.forEach((variant, idx) => {
+        const btn = document.createElement("button");
+        btn.className = "behavior-node";
+        btn.dataset.move = variant.move_name;
+        btn.dataset.base = group.base_name;
+        btn.dataset.durationBand = variant.duration_band;
+        btn.style.setProperty("--duration-color", variant.duration_color);
+        btn.textContent = variant.roman_label;
+        const offsetAngle = angle + (idx - (total - 1) / 2) * 8;
+        const radius = baseRadius - idx * radiusStep;
+        positionNode(btn, offsetAngle, radius);
+        btn.addEventListener("mouseenter", (event) => showTooltip(event, group, variant));
+        btn.addEventListener("mousemove", (event) => moveTooltip(event));
+        btn.addEventListener("mouseleave", hideTooltip);
+        btn.addEventListener("click", () => triggerPlay(variant.move_name));
+        innerRing.appendChild(btn);
+    });
+}
+
+function positionNode(node, angleDeg, radius) {
+    const radians = (angleDeg * Math.PI) / 180;
+    const x = Math.cos(radians) * radius;
+    const y = Math.sin(radians) * radius;
+    node.style.left = "50%";
+    node.style.top = "50%";
+    node.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
+}
+
+function highlightBase(baseName, enabled) {
+    document.querySelectorAll(`.emotion-node[data-base="${baseName}"]`).forEach((node) => {
+        node.classList.toggle("highlight", enabled);
+    });
+    document.querySelectorAll(`.behavior-node[data-base="${baseName}"]`).forEach((node) => {
+        node.classList.toggle("highlight", enabled);
+    });
+}
+
+function showTooltip(event, group, variant) {
+    const duration = `${variant.duration.toFixed(2)}s`;
+    tooltip.innerHTML = `
+        <strong>${group.label} ${variant.roman_label}</strong>
+        <span>${variant.move_name}</span>
+        <p>${variant.description || "No description available yet."}</p>
+        <small>${duration} • ${variant.duration_band.toUpperCase()}</small>
+    `;
+    tooltip.style.borderColor = variant.duration_color;
+    tooltip.classList.add("visible");
+    moveTooltip(event);
+}
+
+function moveTooltip(event) {
+    tooltip.style.left = `${event.clientX}px`;
+    tooltip.style.top = `${event.clientY - 20}px`;
+}
+
+function hideTooltip() {
+    tooltip.classList.remove("visible");
+}
+
+async function triggerPlay(moveName) {
+    if (appState.busy) {
+        showToast("Waiting for the previous move to finish.");
+        return;
+    }
+    try {
+        const res = await fetchJson("/api/play", { method: "POST", body: { move_name: moveName } });
+        if (res.accepted) {
+            setBusyState(true, res.queued_move);
+            showToast(`Playing ${formatMoveName(res.queued_move)}`);
+        } else {
+            showToast("Reachy Mini is still busy with the last feel.");
+        }
+    } catch (error) {
+        console.error(error);
+        showToast("Cannot reach the backend right now.");
+    }
+}
+
+async function pollState() {
+    try {
+        const data = await fetchJson("/api/state");
+        const busy = Boolean(data.is_playing || data.pending_move);
+        setBusyState(busy, data.current_move || data.pending_move);
+    } catch (error) {
+        console.warn("State polling failed", error);
+    } finally {
+        setTimeout(pollState, 1400);
+    }
+}
+
+async function init() {
+    try {
+        const data = await fetchJson("/api/emotions");
+        appState.categories = data.categories || [];
+        appState.durationBands = data.duration_bands || [];
+        appState.missing = data.missing_emotions || [];
+        buildVariantLookup(appState.categories);
+        renderLegend(appState.durationBands);
+        renderMissing(appState.missing);
+        renderWheel(appState.categories);
+        setBusyState(false, null);
+        pollState();
+    } catch (error) {
+        console.error(error);
+        updateStatusChip("Failed to load data", false);
+        showToast("Unable to fetch the emotions list.");
+    }
+}
+
+init();
+
+window.addEventListener("resize", () => {
+    if (!appState.categories.length) {
+        return;
+    }
+    renderWheel(appState.categories);
+    setBusyState(appState.busy, appState.currentMove);
+});

emotions/static/style.css

@@ -1,25 +1,395 @@
+:root {
+    color-scheme: dark;
+    --bg: #070b16;
+    --surface: rgba(20, 24, 37, 0.85);
+    --surface-border: rgba(255, 255, 255, 0.08);
+    --text-strong: #f5f7ff;
+    --text-soft: rgba(245, 247, 255, 0.7);
+    --text-muted: rgba(245, 247, 255, 0.5);
+    --chip-bg: rgba(255, 255, 255, 0.08);
+    --wheel-size: min(520px, 80vw);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 body {
-    font-family: sans-serif;
-    margin: 24px;
+    margin: 0;
+    font-family: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: radial-gradient(circle at 20% -10%, rgba(255, 255, 255, 0.1), transparent 45%),
+        radial-gradient(circle at 80% -20%, rgba(199, 132, 255, 0.15), transparent 50%),
+        var(--bg);
+    min-height: 100vh;
+    color: var(--text-strong);
+}
+
+.background-halo {
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.07), transparent 50%),
+        radial-gradient(circle at 80% 0%, rgba(255, 195, 113, 0.15), transparent 40%);
+    filter: blur(40px);
+    z-index: 0;
+    pointer-events: none;
+}
+
+.app-shell {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 56px 24px 96px;
+}
+
+.hero {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-bottom: 40px;
+}
+
+.eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+}
+
+.hero h1 {
+    margin: 0;
+    font-size: clamp(2.5rem, 6vw, 3.5rem);
+}
+
+.subtitle {
+    margin: 0;
+    color: var(--text-soft);
+    max-width: 720px;
+    line-height: 1.6;
+}
+
+.hero-status {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.chip {
+    padding: 6px 18px;
+    border-radius: 999px;
+    background: var(--chip-bg);
+    color: var(--text-strong);
+    font-size: 0.9rem;
+}
+
+.chip.soft {
+    color: var(--text-soft);
+}
+
+.chip.playing {
+    background: rgba(255, 155, 102, 0.2);
+}
+
+.layout-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    gap: 32px;
+}
+
+.card {
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: 32px;
+    padding: 32px;
+    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(20px);
+}
+
+.wheel-card {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.wheel {
+    width: var(--wheel-size);
+    height: var(--wheel-size);
+    margin: 0 auto;
+    position: relative;
+}
+
+.ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+}
+
+.ring.outer::before,
+.ring.inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: var(--wheel-gradient, rgba(255, 255, 255, 0.08));
+    opacity: 0.35;
+}
+
+.ring.inner {
+    inset: 12%;
+}
+
+.wheel-center {
+    position: absolute;
+    inset: 35%;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(7, 11, 22, 0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    letter-spacing: 0.3em;
+    text-align: center;
+    padding: 16px;
+    color: var(--text-muted);
+}
+
+.wheel-center small {
+    letter-spacing: normal;
+    text-transform: none;
+    margin-top: 12px;
+    color: var(--text-soft);
+}
+
+.emotion-node {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--text-strong);
+    text-transform: capitalize;
+    font-size: 0.95rem;
+    text-align: center;
+    padding: 24px 12px;
+    line-height: 1.3;
+    cursor: default;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    background: rgba(7, 11, 22, 0.65);
+}
+
+.emotion-node::after {
+    content: attr(data-stack);
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 999px;
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    display: none;
+}
+
+.emotion-node[data-stack]:not([data-stack="1"])::after {
+    display: inline-flex;
+}
+
+.emotion-node.highlight {
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+    transform: translate(-50%, -50%) scale(1.04);
 }
 
-#sound-btn {
-    padding: 10px 20px;
-    border: none;
-    color: white;
+.behavior-node {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.15);
+    background: rgba(7, 11, 22, 0.9);
+    color: var(--text-strong);
+    font-weight: 600;
+    font-size: 0.85rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    font-size: 16px;
-    border-radius: 6px;
-    background-color: #3498db;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
 
-#status {
-    margin-top: 16px;
-    font-weight: bold;
+.behavior-node::after {
+    content: "";
+    position: absolute;
+    inset: 6px;
+    border-radius: 50%;
+    border: 2px solid var(--duration-color, rgba(255, 255, 255, 0.5));
+    opacity: 0.85;
 }
 
-#controls {
+.behavior-node:hover {
+    transform: translate(-50%, -50%) scale(1.08);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+}
+
+.behavior-node.highlight {
+    box-shadow: 0 0 25px rgba(255, 255, 255, 0.25);
+}
+
+.behavior-node.busy {
+    opacity: 0.35;
+    pointer-events: none;
+}
+
+.legend-row {
     display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+}
+
+.legend {
+    display: inline-flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.legend-item {
+    display: inline-flex;
     align-items: center;
-    gap: 20px;
-}
+    gap: 8px;
+    font-size: 0.9rem;
+    color: var(--text-soft);
+}
+
+.legend-swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+}
+
+.legend-note {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+.info-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.info-header h2 {
+    margin: 0 0 8px;
+}
+
+.info-header p {
+    margin: 0;
+    color: var(--text-soft);
+}
+
+.missing-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 10px;
+}
+
+.missing-list li {
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-soft);
+    font-size: 0.9rem;
+    text-transform: capitalize;
+}
+
+.info-footer {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.tooltip {
+    position: fixed;
+    pointer-events: none;
+    background: rgba(7, 11, 22, 0.95);
+    padding: 14px 20px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
+    color: var(--text-strong);
+    font-size: 0.85rem;
+    max-width: 280px;
+    opacity: 0;
+    transform: translate(-50%, calc(-100% - 16px));
+    transition: opacity 0.2s ease;
+    z-index: 10;
+}
+
+.tooltip.visible {
+    opacity: 1;
+}
+
+.tooltip strong {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.tooltip p {
+    margin: 0;
+    color: var(--text-soft);
+    line-height: 1.4;
+}
+
+.toast {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    background: rgba(7, 11, 22, 0.95);
+    padding: 16px 22px;
+    border-radius: 999px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.25s ease, transform 0.25s ease;
+    font-size: 0.95rem;
+    color: var(--text-soft);
+}
+
+.toast.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+@media (max-width: 1024px) {
+    .layout-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .wheel {
+        width: min(420px, 90vw);
+        height: min(420px, 90vw);
+    }
+}
+
+@media (max-width: 640px) {
+    .card {
+        padding: 24px;
+    }
+
+    .hero-status {
+        flex-direction: column;
+    }
+
+    .wheel-center {
+        font-size: 0.75rem;
+        letter-spacing: 0.2em;
+    }
+}

index.html

@@ -1,75 +1,99 @@
 <!doctype html>
-<html>
+<html lang="en">
 
 <head>
 	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<title> Emotions </title>
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Reachy Mini • Emotions Wheel</title>
 	<link rel="stylesheet" href="style.css" />
 </head>
 
 <body>
-	<div class="hero">
+	<div class="bg-gradient"></div>
+	<header class="hero">
 		<div class="hero-content">
-			<div class="app-icon">🤖⚡</div>
-			<h1> Emotions </h1>
-			<p class="tagline">Enter your tagline here</p>
+			<p class="eyebrow">Reachy Mini Playground</p>
+			<h1>Emotions Wheel</h1>
+			<p>
+				A dual wheel inspired by Plutchik’s flower. The outer ring shows emotion families, the inner ring stacks each
+				recorded behavior. Hover for descriptions, click to play.
+			</p>
+			<div class="hero-tags">
+				<span class="tag">Plutchik palette</span>
+				<span class="tag">Duration crescents</span>
+				<span class="tag">Stacked behaviors</span>
+			</div>
 		</div>
-	</div>
-
-	<div class="container">
-		<div class="main-card">
-			<div class="app-preview">
-				<div class="preview-image">
-					<div class="camera-feed">🛠️</div>
+		<div class="hero-preview">
+			<div class="wheel-ghost">
+				<div class="spoke spoke-1"></div>
+				<div class="spoke spoke-2"></div>
+				<div class="spoke spoke-3"></div>
+				<div class="spoke spoke-4"></div>
+				<div class="inner-ghost">
+					<div class="dot"></div>
+					<div class="dot"></div>
+					<div class="dot"></div>
 				</div>
 			</div>
+			<p class="preview-caption">Color-coded families + duration crescents</p>
 		</div>
-	</div>
-
-	<div class="download-section">
-		<div class="download-card">
-			<h2>Install This App</h2>
-
-			<div class="dashboard-config">
-				<label for="dashboardUrl">Your Reachy Dashboard URL:</label>
-				<input type="url" id="dashboardUrl" value="http://localhost:8000"
-					placeholder="http://your-reachy-ip:8000" />
+	</header>
+
+	<main class="content">
+		<section class="feature-grid">
+			<article class="feature-card">
+				<h2>Outer wheel • emotions</h2>
+				<p>One badge per emotion family. We strip digits, title-case the names, and show a subtle stack badge so you
+					know how many behaviors hide behind each feeling.</p>
+			</article>
+			<article class="feature-card">
+				<h2>Inner wheel • behaviors</h2>
+				<p>The numbered motions become small orbiting buttons. They inherit the same hue, display Roman numerals,
+					and glow softly when you hover an associated emotion.</p>
+			</article>
+			<article class="feature-card">
+				<h2>Duration crescents</h2>
+				<p>Every behavior has a colored crescent: seafoam (short), amber (medium), rose (long). Tooltips show the
+					exact duration in seconds.</p>
+			</article>
+			<article class="feature-card">
+				<h2>Busy-guarded clicks</h2>
+				<p>API clicks are ignored while Reachy is still moving, so you can’t overload the robot. The status chip
+					updates as soon as the previous move ends.</p>
+			</article>
+		</section>
+
+		<section class="plan-card">
+			<div>
+				<h2>What still needs recording?</h2>
+				<p>We’d love to capture hopeful, jealous, playful, apologetic, embarrassed, nostalgic, a proud+shy combo,
+					and a confident nod.</p>
 			</div>
+			<div>
+				<h2>Install on your Reachy Mini</h2>
+				<p>Point to your dashboard URL and we’ll ask it to clone this Space.</p>
+				<label for="dashboardUrl">Dashboard URL</label>
+				<input type="url" id="dashboardUrl" value="http://localhost:8000" placeholder="http://reachy-mini:8000" />
+				<button id="installBtn" class="install-btn">
+					<span>📥</span>
+					Install Emotions Wheel
+				</button>
+				<div id="installStatus" class="install-status"></div>
+			</div>
+		</section>
+	</main>
 
-			<button id="installBtn" class="install-btn primary">
-				<span class="btn-icon">📥</span>
-				Install Emotions to Reachy Mini
-			</button>
-
-			<div id="installStatus" class="install-status"></div>
-
-		</div>
-	</div>
-
-	<div class="footer">
-		<p>
-			🤖 Emotions •
-			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
-			<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
-				Apps</a>
-		</p>
-	</div>
-	</div>
+	<footer class="footer">
+		<p>Built with ❤️ by Pollen Robotics • Browse more apps on Hugging Face Spaces.</p>
+	</footer>
 
 	<script>
-		// Get the current Hugging Face Space URL as the repository URL
 		function getCurrentSpaceUrl() {
-			// Get current page URL and convert to repository format
 			const currentUrl = window.location.href;
-
-			// Remove any trailing slashes and query parameters
-			const cleanUrl = currentUrl.split('?')[0].replace(/\/$/, '');
-
-			return cleanUrl;
+			return currentUrl.split('?')[0].replace(/\/$/, '');
 		}
 
-		// Parse TOML content to extract project name
 		function parseTomlProjectName(tomlContent) {
 			try {
 				const lines = tomlContent.split('\n');
@@ -78,23 +102,19 @@
 				for (const line of lines) {
 					const trimmedLine = line.trim();
 
-					// Check if we're entering the [project] section
 					if (trimmedLine === '[project]') {
 						inProjectSection = true;
 						continue;
 					}
 
-					// Check if we're entering a different section
 					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
 						inProjectSection = false;
 						continue;
 					}
 
-					// If we're in the project section, look for the name field
 					if (inProjectSection && trimmedLine.startsWith('name')) {
 						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
 						if (match) {
-							// Convert to lowercase and replace invalid characters for app naming
 							return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
 						}
 					}
@@ -107,10 +127,8 @@
 			}
 		}
 
-		// Fetch and parse pyproject.toml from the current space
 		async function getAppNameFromCurrentSpace() {
 			try {
-				// Fetch pyproject.toml from the current space
 				const response = await fetch('./pyproject.toml');
 				if (!response.ok) {
 					throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
@@ -120,7 +138,6 @@
 				return parseTomlProjectName(tomlContent);
 			} catch (error) {
 				console.error('Error fetching app name from current space:', error);
-				// Fallback to extracting from URL if pyproject.toml is not accessible
 				const url = getCurrentSpaceUrl();
 				const parts = url.split('/');
 				const spaceName = parts[parts.length - 1];
@@ -128,9 +145,14 @@
 			}
 		}
 
+		function showStatus(type, message) {
+			const statusDiv = document.getElementById('installStatus');
+			statusDiv.textContent = message;
+			statusDiv.className = `install-status ${type}`;
+		}
+
 		async function installToReachy() {
 			const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
-			const statusDiv = document.getElementById('installStatus');
 			const installBtn = document.getElementById('installBtn');
 
 			if (!dashboardUrl) {
@@ -140,30 +162,25 @@
 
 			try {
 				installBtn.disabled = true;
-				installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
-				showStatus('loading', 'Connecting to your Reachy dashboard...');
+				installBtn.textContent = 'Installing…';
+				showStatus('loading', 'Connecting to your Reachy dashboard…');
 
-				// Test connection
 				const testResponse = await fetch(`${dashboardUrl}/api/status`, {
 					method: 'GET',
 					mode: 'cors',
 				});
 
 				if (!testResponse.ok) {
-					throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
+					throw new Error('Cannot connect to dashboard. Check the URL and make sure the dashboard is running.');
 				}
 
-				showStatus('loading', 'Reading app configuration...');
+				showStatus('loading', 'Reading app configuration…');
 
-				// Get app name from pyproject.toml in current space
 				const appName = await getAppNameFromCurrentSpace();
-
-				// Get current space URL as repository URL
 				const repoUrl = getCurrentSpaceUrl();
 
-				showStatus('loading', `Starting installation of "${appName}"...`);
+				showStatus('loading', `Starting installation of "${appName}"…`);
 
-				// Start installation
 				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
 					method: 'POST',
 					mode: 'cors',
@@ -179,10 +196,7 @@
 				const result = await installResponse.json();
 
 				if (installResponse.ok) {
-					showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
-					setTimeout(() => {
-						showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
-					}, 3000);
+					showStatus('success', `Installation started for "${appName}". Check your dashboard for progress.`);
 				} else {
 					throw new Error(result.detail || 'Installation failed');
 				}
@@ -192,44 +206,12 @@
 				showStatus('error', `❌ ${error.message}`);
 			} finally {
 				installBtn.disabled = false;
-				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
+				installBtn.textContent = 'Install Emotions Wheel';
 			}
 		}
 
-		function showStatus(type, message) {
-			const statusDiv = document.getElementById('installStatus');
-			statusDiv.className = `install-status ${type}`;
-			statusDiv.textContent = message;
-			statusDiv.style.display = 'block';
-		}
-
-		function copyToClipboard() {
-			const repoUrl = document.getElementById('repoUrl').textContent;
-			navigator.clipboard.writeText(repoUrl).then(() => {
-				showStatus('success', '📋 Repository URL copied to clipboard!');
-			}).catch(() => {
-				showStatus('error', 'Failed to copy URL. Please copy manually.');
-			});
-		}
-
-		// Update the displayed repository URL on page load
-		document.addEventListener('DOMContentLoaded', () => {
-			// Auto-detect local dashboard
-			const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-			if (isLocalhost) {
-				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
-			}
-
-			// Update the repository URL display if element exists
-			const repoUrlElement = document.getElementById('repoUrl');
-			if (repoUrlElement) {
-				repoUrlElement.textContent = getCurrentSpaceUrl();
-			}
-		});
-
-		// Event listeners
 		document.getElementById('installBtn').addEventListener('click', installToReachy);
 	</script>
 </body>
 
-</html>
+</html>

style.css

@@ -1,411 +1,273 @@
-* {
-	margin: 0;
-	padding: 0;
+:root {
+	--bg: #04070f;
+	--surface: rgba(17, 21, 33, 0.85);
+	--border: rgba(255, 255, 255, 0.08);
+	--text: #f7f8ff;
+	--text-soft: rgba(247, 248, 255, 0.7);
+	--accent: #ff9f66;
+	--accent-soft: #ffc857;
+	font-family: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	color: var(--text);
+	background-color: var(--bg);
+}
+
+*,
+*::before,
+*::after {
 	box-sizing: border-box;
 }
 
 body {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-	line-height: 1.6;
-	color: #333;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	margin: 0;
 	min-height: 100vh;
+	background:
+		radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
+		radial-gradient(circle at 80% 0%, rgba(192, 132, 252, 0.2), transparent 45%),
+		var(--bg);
+	color: var(--text);
 }
 
-.hero {
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	color: white;
-	padding: 4rem 2rem;
-	text-align: center;
+.bg-gradient {
+	position: fixed;
+	inset: 0;
+	background:
+		radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.1), transparent 55%),
+		radial-gradient(circle at 90% 10%, rgba(255, 159, 102, 0.2), transparent 40%);
+	filter: blur(40px);
+	z-index: 0;
+	pointer-events: none;
 }
 
-.hero-content {
-	max-width: 800px;
+.hero {
+	position: relative;
+	z-index: 1;
+	max-width: 1200px;
 	margin: 0 auto;
+	padding: 80px 24px 32px;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	gap: 32px;
+	align-items: center;
 }
 
-.app-icon {
-	font-size: 4rem;
-	margin-bottom: 1rem;
-	display: inline-block;
+.hero-content h1 {
+	font-size: clamp(2.8rem, 6vw, 4rem);
+	margin-bottom: 12px;
 }
 
-.hero h1 {
-	font-size: 3rem;
-	font-weight: 700;
-	margin-bottom: 1rem;
-	background: linear-gradient(45deg, #fff, #f0f9ff);
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
+.hero-content p {
+	color: var(--text-soft);
+	line-height: 1.6;
 }
 
-.tagline {
-	font-size: 1.25rem;
-	opacity: 0.9;
-	max-width: 600px;
-	margin: 0 auto;
+.eyebrow {
+	text-transform: uppercase;
+	letter-spacing: 0.3em;
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 0.85rem;
 }
 
-.container {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0 2rem;
-	position: relative;
-	z-index: 2;
+.hero-tags {
+	margin-top: 16px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
 }
 
-.main-card {
-	background: white;
-	border-radius: 20px;
-	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-	margin-top: -2rem;
-	overflow: hidden;
-	margin-bottom: 3rem;
+.tag {
+	padding: 6px 16px;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.08);
+	font-size: 0.9rem;
 }
 
-.app-preview {
-	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
-	padding: 3rem;
-	color: white;
+.hero-preview {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 32px;
+	padding: 24px;
+	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
 	text-align: center;
-	position: relative;
 }
 
-.preview-image {
-	background: #000;
-	border-radius: 15px;
-	padding: 2rem;
-	max-width: 500px;
-	margin: 0 auto;
+.wheel-ghost {
+	width: 280px;
+	height: 280px;
+	margin: 0 auto 16px;
+	border-radius: 50%;
+	border: 1px dashed rgba(255, 255, 255, 0.2);
 	position: relative;
-	overflow: hidden;
-}
-
-.camera-feed {
-	font-size: 4rem;
-	margin-bottom: 1rem;
-	opacity: 0.7;
 }
 
-.detection-overlay {
+.spoke {
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 100%;
-}
-
-.bbox {
-	background: rgba(34, 197, 94, 0.9);
-	color: white;
-	padding: 0.5rem 1rem;
-	border-radius: 8px;
-	font-size: 0.9rem;
-	font-weight: 600;
-	margin: 0.5rem;
-	display: inline-block;
-	border: 2px solid #22c55e;
-}
-
-.app-details {
-	padding: 3rem;
+	width: 70%;
+	height: 2px;
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+	transform-origin: left center;
 }
 
-.app-details h2 {
-	font-size: 2rem;
-	color: #1e293b;
-	margin-bottom: 2rem;
-	text-align: center;
-}
-
-.template-info {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 2rem;
-	margin-bottom: 3rem;
+.spoke-2 {
+	transform: rotate(45deg);
 }
 
-.info-box {
-	background: #f0f9ff;
-	border: 2px solid #e0f2fe;
-	border-radius: 12px;
-	padding: 2rem;
+.spoke-3 {
+	transform: rotate(90deg);
 }
 
-.info-box h3 {
-	color: #0c4a6e;
-	margin-bottom: 1rem;
-	font-size: 1.2rem;
+.spoke-4 {
+	transform: rotate(135deg);
 }
 
-.info-box p {
-	color: #0369a1;
-	line-height: 1.6;
+.inner-ghost {
+	position: absolute;
+	inset: 25%;
+	border-radius: 50%;
+	border: 1px dashed rgba(255, 255, 255, 0.2);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 12px;
 }
 
-.how-to-use {
-	background: #fefce8;
-	border: 2px solid #fde047;
-	border-radius: 12px;
-	padding: 2rem;
-	margin-top: 3rem;
+.inner-ghost .dot {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.4);
 }
 
-.how-to-use h3 {
-	color: #a16207;
-	margin-bottom: 1.5rem;
-	font-size: 1.3rem;
-	text-align: center;
+.preview-caption {
+	color: var(--text-soft);
+	margin: 0;
+	font-size: 0.9rem;
 }
 
-.steps {
+.content {
+	position: relative;
+	z-index: 1;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 24px 96px;
 	display: flex;
 	flex-direction: column;
-	gap: 1.5rem;
-}
-
-.step {
-	display: flex;
-	align-items: flex-start;
-	gap: 1rem;
+	gap: 32px;
 }
 
-.step-number {
-	background: #eab308;
-	color: white;
-	width: 2rem;
-	height: 2rem;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: bold;
-	flex-shrink: 0;
+.feature-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	gap: 16px;
 }
 
-.step h4 {
-	color: #a16207;
-	margin-bottom: 0.5rem;
-	font-size: 1.1rem;
+.feature-card {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 24px;
+	padding: 24px;
+	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
 }
 
-.step p {
-	color: #ca8a04;
+.feature-card h2 {
+	margin-top: 0;
+	font-size: 1.2rem;
 }
 
-.download-card {
-	background: white;
-	border-radius: 20px;
-	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-	padding: 3rem;
-	text-align: center;
+.feature-card p {
+	color: var(--text-soft);
 }
 
-.download-card h2 {
-	font-size: 2rem;
-	color: #1e293b;
-	margin-bottom: 1rem;
+.plan-card {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 24px;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 32px;
+	padding: 32px;
+	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
 }
 
-.download-card>p {
-	color: #64748b;
-	font-size: 1.1rem;
-	margin-bottom: 2rem;
+.plan-card h2 {
+	margin: 0 0 12px;
 }
 
-.dashboard-config {
-	margin-bottom: 2rem;
-	text-align: left;
-	max-width: 400px;
-	margin-left: auto;
-	margin-right: auto;
+.plan-card p {
+	color: var(--text-soft);
+	line-height: 1.6;
 }
 
-.dashboard-config label {
-	display: block;
-	color: #374151;
-	font-weight: 600;
-	margin-bottom: 0.5rem;
+label {
+	display: flex;
+	flex-direction: column;
+	font-size: 0.9rem;
+	color: var(--text-soft);
+	margin-bottom: 8px;
 }
 
-.dashboard-config input {
+input[type="url"] {
 	width: 100%;
-	padding: 0.75rem 1rem;
-	border: 2px solid #e5e7eb;
-	border-radius: 8px;
-	font-size: 0.95rem;
-	transition: border-color 0.2s;
-}
-
-.dashboard-config input:focus {
-	outline: none;
-	border-color: #667eea;
+	padding: 12px 16px;
+	border-radius: 16px;
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	background: rgba(0, 0, 0, 0.3);
+	color: var(--text);
+	font-size: 1rem;
+	margin-bottom: 12px;
 }
 
 .install-btn {
-	background: linear-gradient(135deg, #667eea, #764ba2);
-	color: white;
-	border: none;
-	padding: 1.25rem 3rem;
-	border-radius: 16px;
-	font-size: 1.2rem;
-	font-weight: 700;
-	cursor: pointer;
-	transition: all 0.3s ease;
 	display: inline-flex;
 	align-items: center;
-	gap: 0.75rem;
-	margin-bottom: 2rem;
-	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-}
-
-.install-btn:hover:not(:disabled) {
-	transform: translateY(-3px);
-	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+	gap: 8px;
+	padding: 12px 20px;
+	border: none;
+	border-radius: 999px;
+	background: linear-gradient(135deg, var(--accent), var(--accent-soft));
+	color: #1a1329;
+	font-weight: 600;
+	cursor: pointer;
 }
 
 .install-btn:disabled {
-	opacity: 0.7;
+	opacity: 0.6;
 	cursor: not-allowed;
-	transform: none;
-}
-
-.manual-option {
-	background: #f8fafc;
-	border-radius: 12px;
-	padding: 2rem;
-	margin-top: 2rem;
-}
-
-.manual-option h3 {
-	color: #1e293b;
-	margin-bottom: 1rem;
-	font-size: 1.2rem;
-}
-
-.manual-option>p {
-	color: #64748b;
-	margin-bottom: 1rem;
-}
-
-.btn-icon {
-	font-size: 1.1rem;
 }
 
 .install-status {
-	padding: 1rem;
-	border-radius: 8px;
+	margin-top: 10px;
+	min-height: 20px;
 	font-size: 0.9rem;
-	text-align: center;
-	display: none;
-	margin-top: 1rem;
+	color: var(--text-soft);
 }
 
 .install-status.success {
-	background: #dcfce7;
-	color: #166534;
-	border: 1px solid #bbf7d0;
+	color: #7bd389;
 }
 
 .install-status.error {
-	background: #fef2f2;
-	color: #dc2626;
-	border: 1px solid #fecaca;
+	color: #ff6b6b;
 }
 
 .install-status.loading {
-	background: #dbeafe;
-	color: #1d4ed8;
-	border: 1px solid #bfdbfe;
-}
-
-.install-status.info {
-	background: #e0f2fe;
-	color: #0369a1;
-	border: 1px solid #7dd3fc;
-}
-
-.manual-install {
-	background: #1f2937;
-	border-radius: 8px;
-	padding: 1rem;
-	margin-bottom: 1rem;
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-}
-
-.manual-install code {
-	color: #10b981;
-	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-	font-size: 0.85rem;
-	flex: 1;
-	overflow-x: auto;
-}
-
-.copy-btn {
-	background: #374151;
-	color: white;
-	border: none;
-	padding: 0.5rem 1rem;
-	border-radius: 6px;
-	font-size: 0.8rem;
-	cursor: pointer;
-	transition: background-color 0.2s;
-}
-
-.copy-btn:hover {
-	background: #4b5563;
-}
-
-.manual-steps {
-	color: #6b7280;
-	font-size: 0.9rem;
-	line-height: 1.8;
+	color: var(--accent-soft);
 }
 
 .footer {
 	text-align: center;
-	padding: 2rem;
-	color: white;
-	opacity: 0.8;
-}
-
-.footer a {
-	color: white;
-	text-decoration: none;
-	font-weight: 600;
-}
-
-.footer a:hover {
-	text-decoration: underline;
+	color: var(--text-soft);
+	padding: 24px;
+	font-size: 0.9rem;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
+@media (max-width: 600px) {
 	.hero {
-		padding: 2rem 1rem;
-	}
-
-	.hero h1 {
-		font-size: 2rem;
+		padding-top: 64px;
 	}
 
-	.container {
-		padding: 0 1rem;
+	.plan-card {
+		padding: 24px;
 	}
-
-	.app-details,
-	.download-card {
-		padding: 2rem;
-	}
-
-	.features-grid {
-		grid-template-columns: 1fr;
-	}
-
-	.download-options {
-		grid-template-columns: 1fr;
-	}
-}
+}