Initial commit

.gitignore

@@ -0,0 +1,2 @@
+__pycache__/
+*.egg-info/

README.md

@@ -0,0 +1,12 @@
+---
+title: Simpledances
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Write your description here
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
+---

SimpleDances/dance_params.json

@@ -0,0 +1,143 @@
+{
+  "dances": {
+    "chicken_peck": {
+      "amplitude_m": 0.02,
+      "antenna_amplitude_rad": 0.5235987755982988,
+      "antenna_move_name": "both",
+      "subcycles_per_beat": 1.0
+    },
+    "chin_lead": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "pitch_amplitude_rad": 0.2617993877991494,
+      "subcycles_per_beat": 0.5,
+      "x_amplitude_m": 0.02
+    },
+    "dizzy_spin": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "pitch_amplitude_rad": 0.2617993877991494,
+      "roll_amplitude_rad": 0.2617993877991494,
+      "subcycles_per_beat": 0.25
+    },
+    "grid_snap": {
+      "amplitude_rad": 0.3490658503988659,
+      "antenna_amplitude_rad": 0.17453292519943295,
+      "antenna_move_name": "both",
+      "subcycles_per_beat": 0.25
+    },
+    "groovy_sway_and_roll": {
+      "antenna_amplitude_rad": 1.8413223608540177,
+      "antenna_move_name": "both",
+      "roll_amplitude_rad": 0.4014257279586958,
+      "subcycles_per_beat": 1.0,
+      "y_amplitude_m": 0.035
+    },
+    "head_tilt_roll": {
+      "amplitude_rad": 0.2617993877991494,
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.5
+    },
+    "headbanger_combo": {
+      "antenna_amplitude_rad": 0.6981317007977318,
+      "antenna_move_name": "both",
+      "pitch_amplitude_rad": 0.5235987755982988,
+      "subcycles_per_beat": 1.0,
+      "waveform": "sin",
+      "z_amplitude_m": 0.015
+    },
+    "interwoven_spirals": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "pitch_amp": 0.3490658503988659,
+      "roll_amp": 0.2617993877991494,
+      "subcycles_per_beat": 0.125,
+      "yaw_amp": 0.4363323129985824
+    },
+    "jackson_square": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.2,
+      "twitch_amplitude_rad": 0.3490658503988659,
+      "y_amp_m": 0.035,
+      "z_amp_m": 0.025,
+      "z_offset_m": -0.01
+    },
+    "neck_recoil": {
+      "amplitude_m": 0.015,
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.5
+    },
+    "pendulum_swing": {
+      "amplitude_rad": 0.4363323129985824,
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.25
+    },
+    "polyrhythm_combo": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "nod_amplitude_rad": 0.17453292519943295,
+      "sway_amplitude_m": 0.02
+    },
+    "sharp_side_tilt": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "roll_amplitude_rad": 0.3839724354387525,
+      "subcycles_per_beat": 1.0,
+      "waveform": "triangle"
+    },
+    "side_glance_flick": {
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.25,
+      "yaw_amplitude_rad": 0.7853981633974483
+    },
+    "side_peekaboo": {
+      "antenna_amplitude_rad": 1.0471975511965976,
+      "antenna_move_name": "both",
+      "pitch_amp": 0.3490658503988659,
+      "subcycles_per_beat": 0.5,
+      "y_amp": 0.03,
+      "z_amp": 0.04
+    },
+    "side_to_side_sway": {
+      "amplitude_m": 0.04,
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.5
+    },
+    "simple_nod": {
+      "amplitude_rad": 0.3490658503988659,
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 1.0
+    },
+    "stumble_and_recover": {
+      "antenna_amplitude_rad": 0.8726646259971648,
+      "antenna_move_name": "both",
+      "pitch_amplitude_rad": 0.17453292519943295,
+      "subcycles_per_beat": 0.25,
+      "y_amplitude_m": 0.015,
+      "yaw_amplitude_rad": 0.4363323129985824
+    },
+    "uh_huh_tilt": {
+      "amplitude_rad": 0.2617993877991494,
+      "antenna_amplitude_rad": 0.7853981633974483,
+      "antenna_move_name": "wiggle",
+      "subcycles_per_beat": 0.5
+    },
+    "yeah_nod": {
+      "amplitude_rad": 0.2617993877991494,
+      "antenna_amplitude_rad": 0.3490658503988659,
+      "antenna_move_name": "both",
+      "subcycles_per_beat": 1.0
+    }
+  },
+  "globals": {
+    "amplitude_scale": 0.55,
+    "bpm": 52.0
+  }
+}

SimpleDances/main.py

@@ -0,0 +1,474 @@
+from __future__ import annotations
+
+import copy
+import json
+import math
+import threading
+import time
+from datetime import datetime
+from pathlib import Path
+from typing import Any, Callable
+
+import numpy as np
+from fastapi import HTTPException
+from pydantic import BaseModel, Field
+
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+
+from reachy_mini_dances_library.collection.dance import AVAILABLE_MOVES
+from reachy_mini_dances_library.rhythmic_motion import (
+    AVAILABLE_ANTENNA_MOVES,
+    MoveOffsets,
+)
+
+# ---------------------------------------------------------------------------
+# Constants & dance catalog
+# ---------------------------------------------------------------------------
+APP_DIR = Path(__file__).parent
+PRESET_FILE = APP_DIR / "dance_params.json"
+
+WAVEFORMS = ["sin", "cos", "square", "triangle", "sawtooth"]
+BPM_RANGE = (40.0, 180.0)
+AMP_SCALE_RANGE = (0.0, 2.0)
+DEFAULT_GLOBALS = {"bpm": 110.0, "amplitude_scale": 1.0}
+RAD_NAME_OVERRIDES = {"pitch_amp", "roll_amp", "yaw_amp"}
+METER_NAME_OVERRIDES = {"z_amp", "y_amp"}
+
+
+class ParamSpec(BaseModel):
+    name: str
+    label: str
+    type: str
+    value: float | str
+    min: float | None = None
+    max: float | None = None
+    step: float | None = None
+    unit: str | None = None
+    options: list[str] | None = None
+
+
+class SelectPayload(BaseModel):
+    name: str = Field(..., description="Name of the dance to select")
+
+
+class ParamUpdatePayload(BaseModel):
+    name: str
+    params: dict[str, float | str]
+
+
+class GlobalSettingsPayload(BaseModel):
+    bpm: float
+    amplitude_scale: float
+
+
+class TogglePayload(BaseModel):
+    playing: bool
+
+
+class ResetPayload(BaseModel):
+    name: str
+
+
+def _normalize_params(raw: dict[str, Any]) -> dict[str, Any]:
+    normalized: dict[str, Any] = {}
+    for key, value in raw.items():
+        if isinstance(value, (int, float)):
+            normalized[key] = float(value)
+        else:
+            normalized[key] = value
+    return normalized
+
+
+DANCE_CATALOG: dict[
+    str, dict[str, Any]
+] = {
+    name: {
+        "fn": fn,
+        "default_params": _normalize_params(copy.deepcopy(params)),
+        "metadata": metadata or {},
+        "label": name.replace("_", " ").title(),
+    }
+    for name, (fn, params, metadata) in AVAILABLE_MOVES.items()
+}
+
+DANCE_ORDER = sorted(DANCE_CATALOG.keys())
+DEFAULT_DANCE = "simple_nod" if "simple_nod" in DANCE_CATALOG else DANCE_ORDER[0]
+ANTENNA_CHOICES = sorted(AVAILABLE_ANTENNA_MOVES.keys())
+
+
+# ---------------------------------------------------------------------------
+# Helper functions (units, persistence, specs)
+# ---------------------------------------------------------------------------
+
+def clamp(value: float, bounds: tuple[float, float]) -> float:
+    return max(bounds[0], min(bounds[1], value))
+
+
+def param_is_degree(name: str) -> bool:
+    return "rad" in name or name in RAD_NAME_OVERRIDES
+
+
+def param_is_meter(name: str) -> bool:
+    return name.endswith("_m") or name in METER_NAME_OVERRIDES or name.endswith(
+        "_amp_m"
+    )
+
+
+def to_ui_units(name: str, value: float) -> tuple[float, str | None]:
+    if param_is_degree(name):
+        return math.degrees(value), "deg"
+    if param_is_meter(name):
+        return value * 1000.0, "mm"
+    return value, None
+
+
+def from_ui_units(name: str, value: float) -> float:
+    if param_is_degree(name):
+        return math.radians(value)
+    if param_is_meter(name):
+        return value / 1000.0
+    return value
+
+
+def range_for_param(name: str, ui_value: float) -> tuple[float, float, float]:
+    if name == "subcycles_per_beat":
+        return 0.1, 4.0, 0.05
+    if "phase_offset" in name:
+        return 0.0, 1.0, 0.01
+    if param_is_degree(name):
+        span = min(max(abs(ui_value) * 3.0, 30.0), 180.0)
+        return -span, span, 0.5
+    if param_is_meter(name):
+        span = min(max(abs(ui_value) * 3.0, 30.0), 150.0)
+        return -span, span, 1.0
+    base = max(abs(ui_value), 1.0)
+    span = max(base * 4.0, 2.0)
+    step = max(span / 100.0, 0.01)
+    return -span, span, step
+
+
+def build_param_spec(name: str, value: Any) -> ParamSpec:
+    label = name.replace("_", " ").title()
+
+    if isinstance(value, str):
+        options = WAVEFORMS if name == "waveform" else ANTENNA_CHOICES
+        if value not in options:
+            value = options[0]
+        return ParamSpec(
+            name=name,
+            label=label,
+            type="select",
+            value=value,
+            options=options,
+        )
+
+    if not isinstance(value, (int, float)):
+        raise ValueError(f"Unsupported parameter type for {name}: {type(value)}")
+
+    ui_value, unit = to_ui_units(name, float(value))
+    min_val, max_val, step = range_for_param(name, ui_value)
+    return ParamSpec(
+        name=name,
+        label=label,
+        type="number",
+        value=ui_value,
+        min=min_val,
+        max=max_val,
+        step=step,
+        unit=unit,
+    )
+
+
+def load_persisted() -> dict[str, Any]:
+    if not PRESET_FILE.exists():
+        return {"globals": DEFAULT_GLOBALS.copy(), "dances": {}}
+    try:
+        loaded = json.loads(PRESET_FILE.read_text())
+    except Exception:
+        return {"globals": DEFAULT_GLOBALS.copy(), "dances": {}}
+
+    globals_section = loaded.get("globals") or {}
+    dances_section = loaded.get("dances") or {}
+
+    return {
+        "globals": {
+            "bpm": float(globals_section.get("bpm", DEFAULT_GLOBALS["bpm"])),
+            "amplitude_scale": float(
+                globals_section.get("amplitude_scale", DEFAULT_GLOBALS["amplitude_scale"])
+            ),
+        },
+        "dances": {
+            name: _normalize_params(params)
+            for name, params in dances_section.items()
+            if isinstance(params, dict)
+        },
+    }
+
+
+def serialize_state(snapshot: dict[str, Any]) -> None:
+    payload = {
+        "globals": {
+            "bpm": snapshot["bpm"],
+            "amplitude_scale": snapshot["amplitude_scale"],
+        },
+        "dances": snapshot["dance_params"],
+    }
+    PRESET_FILE.write_text(json.dumps(payload, indent=2, sort_keys=True))
+
+
+# ---------------------------------------------------------------------------
+# Reachy Mini App
+# ---------------------------------------------------------------------------
+class Simpledances(ReachyMiniApp):
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = None
+
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        state_lock = threading.Lock()
+        persisted = load_persisted()
+
+        dance_params = {
+            name: {
+                **copy.deepcopy(DANCE_CATALOG[name]["default_params"]),
+                **persisted["dances"].get(name, {}),
+            }
+            for name in DANCE_ORDER
+        }
+
+        runtime_state: dict[str, Any] = {
+            "selected": DEFAULT_DANCE,
+            "playing": False,
+            "bpm": clamp(persisted["globals"].get("bpm", DEFAULT_GLOBALS["bpm"]), BPM_RANGE),
+            "amplitude_scale": clamp(
+                persisted["globals"].get("amplitude_scale", DEFAULT_GLOBALS["amplitude_scale"]),
+                AMP_SCALE_RANGE,
+            ),
+            "dance_params": dance_params,
+            "last_offsets": {
+                "position": [0.0, 0.0, 0.0],
+                "orientation": [0.0, 0.0, 0.0],
+                "antennas": [0.0, 0.0],
+            },
+            "last_saved": None,
+            "phase_start": time.perf_counter(),
+        }
+
+        def persist_locked() -> None:
+            serialize_state(runtime_state)
+            runtime_state["last_saved"] = datetime.utcnow().isoformat() + "Z"
+
+        def get_param_specs(dance_name: str) -> list[ParamSpec]:
+            return [
+                build_param_spec(param, value)
+                for param, value in runtime_state["dance_params"][dance_name].items()
+            ]
+
+        # -------------------- API Endpoints --------------------
+        @self.settings_app.get("/api/dances")
+        async def list_dances():
+            return {
+                "dances": [
+                    {
+                        "name": name,
+                        "label": DANCE_CATALOG[name]["label"],
+                        "description": DANCE_CATALOG[name]["metadata"].get(
+                            "description", ""
+                        ),
+                        "default_duration_beats": DANCE_CATALOG[name]["metadata"].get(
+                            "default_duration_beats", 4
+                        ),
+                    }
+                    for name in DANCE_ORDER
+                ]
+            }
+
+        @self.settings_app.get("/api/state")
+        async def get_state():
+            with state_lock:
+                selected = runtime_state["selected"]
+                meta = DANCE_CATALOG[selected]["metadata"]
+                return {
+                    "selected": selected,
+                    "playing": runtime_state["playing"],
+                    "bpm": runtime_state["bpm"],
+                    "amplitude_scale": runtime_state["amplitude_scale"],
+                    "param_specs": [spec.model_dump() for spec in get_param_specs(selected)],
+                    "description": meta.get("description", ""),
+                    "last_saved": runtime_state["last_saved"],
+                }
+
+        @self.settings_app.post("/api/select")
+        async def select_dance(payload: SelectPayload):
+            if payload.name not in runtime_state["dance_params"]:
+                raise HTTPException(status_code=404, detail="Unknown dance")
+            with state_lock:
+                runtime_state["selected"] = payload.name
+                runtime_state["phase_start"] = time.perf_counter()
+                specs = [spec.model_dump() for spec in get_param_specs(payload.name)]
+                meta = DANCE_CATALOG[payload.name]["metadata"]
+                return {
+                    "selected": payload.name,
+                    "param_specs": specs,
+                    "description": meta.get("description", ""),
+                }
+
+        @self.settings_app.post("/api/params")
+        async def update_params(payload: ParamUpdatePayload):
+            dance_params = runtime_state["dance_params"].get(payload.name)
+            if dance_params is None:
+                raise HTTPException(status_code=404, detail="Unknown dance")
+
+            changed = False
+            with state_lock:
+                for key, ui_value in payload.params.items():
+                    if key not in dance_params:
+                        continue
+                    current = dance_params[key]
+                    if isinstance(current, str):
+                        if not isinstance(ui_value, str):
+                            continue
+                        if key == "waveform" and ui_value not in WAVEFORMS:
+                            continue
+                        if key == "antenna_move_name" and ui_value not in ANTENNA_CHOICES:
+                            continue
+                        dance_params[key] = ui_value
+                        changed = True
+                    else:
+                        try:
+                            numeric = from_ui_units(key, float(ui_value))
+                        except (TypeError, ValueError):
+                            continue
+                        if math.isclose(numeric, current, rel_tol=1e-4, abs_tol=1e-4):
+                            continue
+                        dance_params[key] = numeric
+                        changed = True
+                if changed:
+                    persist_locked()
+                specs = [spec.model_dump() for spec in get_param_specs(payload.name)]
+            return {"param_specs": specs, "last_saved": runtime_state["last_saved"]}
+
+        @self.settings_app.post("/api/globals")
+        async def update_globals(payload: GlobalSettingsPayload):
+            with state_lock:
+                runtime_state["bpm"] = clamp(float(payload.bpm), BPM_RANGE)
+                runtime_state["amplitude_scale"] = clamp(
+                    float(payload.amplitude_scale), AMP_SCALE_RANGE
+                )
+                persist_locked()
+                return {
+                    "bpm": runtime_state["bpm"],
+                    "amplitude_scale": runtime_state["amplitude_scale"],
+                    "last_saved": runtime_state["last_saved"],
+                }
+
+        @self.settings_app.post("/api/toggle")
+        async def toggle_playback(payload: TogglePayload):
+            with state_lock:
+                runtime_state["playing"] = bool(payload.playing)
+                runtime_state["phase_start"] = time.perf_counter()
+                return {"playing": runtime_state["playing"]}
+
+        @self.settings_app.post("/api/reset")
+        async def reset_dance(payload: ResetPayload):
+            if payload.name not in runtime_state["dance_params"]:
+                raise HTTPException(status_code=404, detail="Unknown dance")
+            with state_lock:
+                runtime_state["dance_params"][payload.name] = copy.deepcopy(
+                    DANCE_CATALOG[payload.name]["default_params"]
+                )
+                persist_locked()
+                specs = [spec.model_dump() for spec in get_param_specs(payload.name)]
+                return {
+                    "param_specs": specs,
+                    "description": DANCE_CATALOG[payload.name]["metadata"].get(
+                        "description", ""
+                    ),
+                    "last_saved": runtime_state["last_saved"],
+                }
+
+        @self.settings_app.get("/api/visualization")
+        async def visualization_snapshot():
+            with state_lock:
+                return {
+                    "offsets": runtime_state["last_offsets"],
+                    "playing": runtime_state["playing"],
+                    "bpm": runtime_state["bpm"],
+                }
+
+        neutral_pose = create_head_pose()
+        neutral_antennas = np.zeros(2, dtype=float)
+        reachy_mini.set_target(head=neutral_pose, antennas=neutral_antennas)
+
+        loop_dt = 0.02
+
+        while not stop_event.is_set():
+            with state_lock:
+                selected = runtime_state["selected"]
+                playing = runtime_state["playing"]
+                bpm = runtime_state["bpm"]
+                amp_scale = runtime_state["amplitude_scale"]
+                params = copy.deepcopy(runtime_state["dance_params"][selected])
+                phase_start = runtime_state["phase_start"]
+
+            head_pose = neutral_pose
+            antennas_cmd = neutral_antennas
+            offsets_payload = {
+                "position": [0.0, 0.0, 0.0],
+                "orientation": [0.0, 0.0, 0.0],
+                "antennas": [0.0, 0.0],
+            }
+
+            if playing:
+                fn: Callable[..., MoveOffsets] | None = DANCE_CATALOG[selected]["fn"]
+                t_now = time.perf_counter()
+                elapsed = max(t_now - phase_start, 0.0)
+                beats = elapsed * (bpm / 60.0)
+                try:
+                    offsets = fn(beats, **params)
+                except Exception as exc:  # pragma: no cover - safety net
+                    print(f"[SimpleDances] Move error ({selected}): {exc}")
+                    pos = np.zeros(3)
+                    ori = np.zeros(3)
+                    antennas = np.zeros(2)
+                else:
+                    pos = np.asarray(offsets.position_offset, dtype=float)
+                    ori = np.asarray(offsets.orientation_offset, dtype=float)
+                    antennas = np.asarray(offsets.antennas_offset, dtype=float)
+
+                pos *= amp_scale
+                ori *= amp_scale
+                antennas *= amp_scale
+
+                head_pose = create_head_pose(
+                    x=float(pos[0]),
+                    y=float(pos[1]),
+                    z=float(pos[2]),
+                    roll=float(ori[0]),
+                    pitch=float(ori[1]),
+                    yaw=float(ori[2]),
+                    degrees=False,
+                    mm=False,
+                )
+                antennas_cmd = antennas
+
+                offsets_payload = {
+                    "position": pos.tolist(),
+                    "orientation": ori.tolist(),
+                    "antennas": antennas.tolist(),
+                }
+
+            reachy_mini.set_target(head=head_pose, antennas=antennas_cmd)
+
+            with state_lock:
+                runtime_state["last_offsets"] = offsets_payload
+
+            time.sleep(loop_dt)
+
+
+if __name__ == "__main__":
+    app = Simpledances()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

SimpleDances/static/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Reachy Mini • Simple Dances</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+
+<body>
+    <div class="background-glow"></div>
+    <main class="app-shell">
+        <header class="hero">
+            <div>
+                <p class="eyebrow">Reachy Mini Playground</p>
+                <h1>Simple Dances Studio</h1>
+                <p class="subtitle">Pick a groove, fine-tune every motion axis, and let Reachy Mini vibe to your beat.</p>
+            </div>
+            <div class="hero-meta">
+                <span class="chip" id="chipPlaying">Idle</span>
+                <span class="chip" id="chipSaved">Not saved</span>
+            </div>
+        </header>
+
+        <section class="panel-grid">
+            <article class="card selection-card">
+                <div class="card-header">
+                    <div>
+                        <h2>Dance Library</h2>
+                        <p>Browse every move from the Reachy Mini Dances Library.</p>
+                    </div>
+                    <button class="ghost" id="resetDance">Reset dance</button>
+                </div>
+                <div class="field">
+                    <label for="danceSelect">Choose a dance</label>
+                    <div class="select-wrapper">
+                        <select id="danceSelect"></select>
+                        <span class="chevron">⌄</span>
+                    </div>
+                </div>
+                <p class="description" id="danceDescription">Loading dances…</p>
+            </article>
+
+            <article class="card global-card">
+                <h2>Global Groove</h2>
+                <div class="field">
+                    <div class="field-heading">
+                        <label for="bpmRange">Beats Per Minute</label>
+                        <span id="bpmDisplay">0 BPM</span>
+                    </div>
+                    <div class="slider-row">
+                        <input type="range" id="bpmRange" min="40" max="180" step="1">
+                        <input type="number" id="bpmInput" min="40" max="180" step="1">
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="field-heading">
+                        <label for="ampRange">Amplitude Scale</label>
+                        <span id="ampDisplay">0.0×</span>
+                    </div>
+                    <div class="slider-row">
+                        <input type="range" id="ampRange" min="0" max="2" step="0.05">
+                        <input type="number" id="ampInput" min="0" max="2" step="0.05">
+                    </div>
+                </div>
+            </article>
+
+            <article class="card action-card">
+                <div class="card-header">
+                    <h2>Playback</h2>
+                    <p>Start or pause the routine at any time.</p>
+                </div>
+                <button id="togglePlayback" class="primary">Start Dancing</button>
+                <div class="status-line" id="statusLine">Syncing…</div>
+            </article>
+        </section>
+
+        <section class="card viz-card">
+            <div class="card-header">
+                <div>
+                    <h2>Kinesthetic Visualizer</h2>
+                    <p>Every DoF feeds the glow. Watch orientation, translation, and antennas pulse to the beat.</p>
+                </div>
+                <span class="chip" id="vizBpm">0 BPM</span>
+            </div>
+            <div class="viz-grid" id="vizGrid"></div>
+        </section>
+
+        <section class="card params-card">
+            <div class="card-header">
+                <div>
+                    <h2>Dance Parameters</h2>
+                    <p>Fine-tune anything: waveforms, amplitudes, twitches, antenna flair.</p>
+                </div>
+            </div>
+            <div id="paramsContainer" class="params-grid">
+                <div class="empty">Select a dance to load its parameters.</div>
+            </div>
+        </section>
+    </main>
+
+    <div id="toast" class="toast" role="status" aria-live="polite"></div>
+    <script src="/static/main.js" type="module"></script>
+</body>
+
+</html>

SimpleDances/static/main.js

@@ -0,0 +1,496 @@
+const danceSelect = document.getElementById('danceSelect');
+const resetDanceBtn = document.getElementById('resetDance');
+const descriptionEl = document.getElementById('danceDescription');
+const paramsContainer = document.getElementById('paramsContainer');
+const toggleBtn = document.getElementById('togglePlayback');
+const statusLine = document.getElementById('statusLine');
+const chipPlaying = document.getElementById('chipPlaying');
+const chipSaved = document.getElementById('chipSaved');
+const bpmRange = document.getElementById('bpmRange');
+const bpmInput = document.getElementById('bpmInput');
+const bpmDisplay = document.getElementById('bpmDisplay');
+const ampRange = document.getElementById('ampRange');
+const ampInput = document.getElementById('ampInput');
+const ampDisplay = document.getElementById('ampDisplay');
+const toast = document.getElementById('toast');
+const vizGrid = document.getElementById('vizGrid');
+const vizBpm = document.getElementById('vizBpm');
+
+const currentUrl = new URL(window.location.href);
+if (!currentUrl.pathname.endsWith('/')) {
+    currentUrl.pathname += '/';
+}
+currentUrl.search = '';
+currentUrl.hash = '';
+const buildApiUrl = (path) => {
+    const clean = path.startsWith('/') ? path.slice(1) : path;
+    return new URL(clean, currentUrl).toString();
+};
+
+const state = {
+    dances: [],
+    selected: null,
+    playing: false,
+    bpm: 110,
+    amplitudeScale: 1,
+    paramSpecs: [],
+    description: '',
+    lastSaved: null,
+};
+
+const paramQueue = new Map();
+const vizNodes = [];
+const vizConfig = [
+    { key: 'orientation', index: 0, label: 'Roll', unit: '°', scale: 60 },
+    { key: 'orientation', index: 1, label: 'Pitch', unit: '°', scale: 60 },
+    { key: 'orientation', index: 2, label: 'Yaw', unit: '°', scale: 60 },
+    { key: 'position', index: 0, label: 'X Shift', unit: 'mm', scale: 40 },
+    { key: 'position', index: 1, label: 'Y Shift', unit: 'mm', scale: 40 },
+    { key: 'position', index: 2, label: 'Z Lift', unit: 'mm', scale: 40 },
+    { key: 'antennas', index: 0, label: 'Left Antenna', unit: '°', scale: 90 },
+    { key: 'antennas', index: 1, label: 'Right Antenna', unit: '°', scale: 90 },
+];
+
+function debounce(fn, delay) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), delay);
+    };
+}
+
+async function apiRequest(path, options = {}) {
+    const settings = { method: options.method || 'GET', headers: options.headers ? { ...options.headers } : {} };
+    if (options.body !== undefined) {
+        settings.body = options.body;
+        settings.headers['Content-Type'] = settings.headers['Content-Type'] || 'application/json';
+    }
+    const res = await fetch(buildApiUrl(path), settings);
+    if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+    }
+    const text = await res.text();
+    return text ? JSON.parse(text) : {};
+}
+
+function setStatus(text) {
+    statusLine.textContent = text;
+}
+
+function showToast(message) {
+    toast.textContent = message;
+    toast.classList.add('visible');
+    setTimeout(() => toast.classList.remove('visible'), 2500);
+}
+
+function updateSavedChip(ts) {
+    state.lastSaved = ts || null;
+    if (!ts) {
+        chipSaved.textContent = 'Not saved';
+        chipSaved.classList.add('alert');
+        return;
+    }
+    chipSaved.classList.remove('alert');
+    const date = new Date(ts);
+    const label = Number.isNaN(date.getTime()) ? 'Saved' : `Saved ${date.toLocaleTimeString()}`;
+    chipSaved.textContent = label;
+}
+
+function updatePlayingChip(isPlaying) {
+    chipPlaying.textContent = isPlaying ? 'Playing' : 'Idle';
+    chipPlaying.classList.toggle('playing', isPlaying);
+}
+
+function updateToggleButton() {
+    toggleBtn.textContent = state.playing ? 'Pause Dance' : 'Start Dancing';
+    toggleBtn.classList.toggle('is-active', state.playing);
+}
+
+function renderDanceOptions() {
+    danceSelect.innerHTML = '';
+    state.dances.forEach((dance) => {
+        const option = document.createElement('option');
+        option.value = dance.name;
+        option.textContent = `${dance.label} (${dance.default_duration_beats} beats)`;
+        danceSelect.appendChild(option);
+    });
+    if (state.selected) {
+        danceSelect.value = state.selected;
+    }
+}
+
+function renderParams(specs) {
+    paramsContainer.innerHTML = '';
+    if (!specs || !specs.length) {
+        const msg = document.createElement('div');
+        msg.className = 'empty';
+        msg.textContent = 'No parameters exposed for this dance.';
+        paramsContainer.appendChild(msg);
+        return;
+    }
+    specs.forEach((spec) => {
+        const card = document.createElement('div');
+        card.className = 'param-card';
+
+        const title = document.createElement('h4');
+        title.textContent = spec.label;
+        card.appendChild(title);
+
+        const meta = document.createElement('div');
+        meta.className = 'param-meta';
+        meta.textContent = spec.unit ? `Unit: ${spec.unit}` : 'Unitless';
+        card.appendChild(meta);
+
+        if (spec.type === 'select') {
+            const select = document.createElement('select');
+            (spec.options || []).forEach((opt) => {
+                const option = document.createElement('option');
+                option.value = opt;
+                option.textContent = opt;
+                select.appendChild(option);
+            });
+            select.value = spec.value;
+            select.addEventListener('change', () => queueParamUpdate(spec.name, select.value));
+            const wrapper = document.createElement('div');
+            wrapper.className = 'param-inputs';
+            wrapper.appendChild(select);
+            card.appendChild(wrapper);
+        } else {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'param-inputs';
+
+            const slider = document.createElement('input');
+            slider.type = 'range';
+            slider.min = spec.min;
+            slider.max = spec.max;
+            slider.step = spec.step;
+            slider.value = spec.value;
+
+            const number = document.createElement('input');
+            number.type = 'number';
+            number.min = spec.min;
+            number.max = spec.max;
+            number.step = spec.step;
+            number.value = Number(spec.value).toFixed(3);
+
+            const syncValue = (val) => {
+                slider.value = val;
+                number.value = Number(val).toFixed(3);
+            };
+
+            slider.addEventListener('input', () => {
+                const val = parseFloat(slider.value);
+                syncValue(val);
+                queueParamUpdate(spec.name, val);
+            });
+
+            number.addEventListener('change', () => {
+                const val = parseFloat(number.value);
+                if (Number.isNaN(val)) {
+                    number.value = slider.value;
+                    return;
+                }
+                const clamped = Math.min(Math.max(val, spec.min), spec.max);
+                syncValue(clamped);
+                queueParamUpdate(spec.name, clamped);
+            });
+
+            wrapper.appendChild(slider);
+            wrapper.appendChild(number);
+            card.appendChild(wrapper);
+        }
+
+        paramsContainer.appendChild(card);
+    });
+}
+
+const flushParamUpdates = debounce(async () => {
+    if (!state.selected || !paramQueue.size) return;
+    const payload = {};
+    paramQueue.forEach((value, key) => {
+        payload[key] = value;
+    });
+    paramQueue.clear();
+    setStatus('Saving parameters…');
+    try {
+        const data = await apiRequest('api/params', {
+            method: 'POST',
+            body: JSON.stringify({ name: state.selected, params: payload }),
+        });
+        if (Array.isArray(data.param_specs)) {
+            state.paramSpecs = data.param_specs;
+            renderParams(state.paramSpecs);
+        }
+        if (data.last_saved) {
+            updateSavedChip(data.last_saved);
+        }
+        setStatus('Parameters synced.');
+    } catch (error) {
+        setStatus('Parameter sync failed.');
+        showToast('Could not save parameter changes.');
+    }
+}, 220);
+
+function queueParamUpdate(name, value) {
+    if (!state.selected) return;
+    paramQueue.set(name, value);
+    flushParamUpdates();
+}
+
+const saveGlobals = debounce(async () => {
+    const payload = {
+        bpm: parseFloat(bpmInput.value) || state.bpm,
+        amplitude_scale: parseFloat(ampInput.value) || state.amplitudeScale,
+    };
+    setStatus('Saving globals…');
+    try {
+        const data = await apiRequest('api/globals', {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        });
+        state.bpm = data.bpm;
+        state.amplitudeScale = data.amplitude_scale;
+        if (data.last_saved) {
+            updateSavedChip(data.last_saved);
+        }
+        setStatus('Globals synced.');
+        updateGlobalsUI();
+    } catch (error) {
+        setStatus('Global sync failed.');
+        showToast('Failed to save global settings.');
+    }
+}, 250);
+
+function updateGlobalsUI() {
+    bpmRange.value = state.bpm;
+    bpmInput.value = state.bpm.toFixed(0);
+    bpmDisplay.textContent = `${Math.round(state.bpm)} BPM`;
+    ampRange.value = state.amplitudeScale;
+    ampInput.value = state.amplitudeScale.toFixed(2);
+    ampDisplay.textContent = `${state.amplitudeScale.toFixed(2)}×`;
+    vizBpm.textContent = `${Math.round(state.bpm)} BPM`;
+}
+
+function initVisualizationGrid() {
+    vizGrid.innerHTML = '';
+    vizNodes.length = 0;
+    vizConfig.forEach((cfg) => {
+        const node = document.createElement('div');
+        node.className = 'viz-node';
+        const orb = document.createElement('div');
+        orb.className = 'viz-orb';
+        node.appendChild(orb);
+        const title = document.createElement('h4');
+        title.textContent = cfg.label;
+        node.appendChild(title);
+        const value = document.createElement('div');
+        value.className = 'viz-value';
+        value.textContent = cfg.unit === 'mm' ? '0.0 mm' : '0.0°';
+        node.appendChild(value);
+        const pulse = document.createElement('div');
+        pulse.className = 'viz-pulse';
+        node.appendChild(pulse);
+        vizGrid.appendChild(node);
+        vizNodes.push({ cfg, node, valueEl: value, level: 0, targetLevel: 0, currentValue: 0, targetValue: 0 });
+    });
+}
+
+function formatVizValue(value, unit) {
+    if (unit === '°') {
+        return `${value.toFixed(1)}°`;
+    }
+    if (unit === 'mm') {
+        return `${value.toFixed(1)} mm`;
+    }
+    return value.toFixed(2);
+}
+
+function updateVisualizationTargets(offsets) {
+    vizNodes.forEach((node) => {
+        const values = offsets[node.cfg.key] || [];
+        const raw = Number(values[node.cfg.index] || 0);
+        let display = raw;
+        if (node.cfg.unit === '°') {
+            display = raw * (180 / Math.PI);
+        } else if (node.cfg.unit === 'mm') {
+            display = raw * 1000;
+        }
+        node.targetValue = display;
+        node.targetLevel = Math.min(Math.abs(display) / node.cfg.scale, 1);
+    });
+}
+
+function animateVisualization() {
+    vizNodes.forEach((node) => {
+        node.level += (node.targetLevel - node.level) * 0.08;
+        node.currentValue += (node.targetValue - node.currentValue) * 0.12;
+        node.node.style.setProperty('--level', node.level.toFixed(3));
+        node.node.dataset.level = node.level.toFixed(2);
+        node.valueEl.textContent = formatVizValue(node.currentValue, node.cfg.unit);
+    });
+    requestAnimationFrame(animateVisualization);
+}
+
+async function pollVisualization() {
+    try {
+        const data = await apiRequest('api/visualization');
+        if (data && data.offsets) {
+            updateVisualizationTargets(data.offsets);
+        }
+        if (typeof data?.playing === 'boolean') {
+            updatePlayingChip(data.playing);
+        }
+        if (typeof data?.bpm === 'number') {
+            vizBpm.textContent = `${Math.round(data.bpm)} BPM`;
+        }
+    } catch (error) {
+        // Swallow visualization errors to avoid noisy UI.
+    } finally {
+        setTimeout(pollVisualization, 250);
+    }
+}
+
+async function loadDances() {
+    try {
+        const data = await apiRequest('api/dances');
+        state.dances = data.dances || [];
+        renderDanceOptions();
+    } catch (error) {
+        showToast('Unable to load dance list.');
+    }
+}
+
+async function refreshState() {
+    try {
+        const data = await apiRequest('api/state');
+        state.selected = data.selected;
+        state.playing = Boolean(data.playing);
+        state.bpm = data.bpm;
+        state.amplitudeScale = data.amplitude_scale;
+        state.paramSpecs = data.param_specs || [];
+        state.description = data.description || '';
+        updateSavedChip(data.last_saved);
+        renderDanceOptions();
+        renderParams(state.paramSpecs);
+        descriptionEl.textContent = state.description || 'This dance is ready to jam.';
+        danceSelect.value = state.selected;
+        updateGlobalsUI();
+        updatePlayingChip(state.playing);
+        updateToggleButton();
+        setStatus('Ready.');
+    } catch (error) {
+        setStatus('Failed to load state.');
+        showToast('Cannot reach the backend API.');
+    }
+}
+
+async function selectDance(name) {
+    setStatus('Loading dance…');
+    try {
+        const data = await apiRequest('api/select', {
+            method: 'POST',
+            body: JSON.stringify({ name }),
+        });
+        state.selected = data.selected;
+        state.paramSpecs = data.param_specs || [];
+        state.description = data.description || '';
+        renderDanceOptions();
+        renderParams(state.paramSpecs);
+        descriptionEl.textContent = state.description || 'Customizable move.';
+        setStatus('Dance loaded.');
+    } catch (error) {
+        setStatus('Unable to load dance.');
+        showToast('Dance selection failed.');
+    }
+}
+
+async function togglePlayback() {
+    try {
+        const targetState = !state.playing;
+        const data = await apiRequest('api/toggle', {
+            method: 'POST',
+            body: JSON.stringify({ playing: targetState }),
+        });
+        state.playing = Boolean(data.playing);
+        updatePlayingChip(state.playing);
+        updateToggleButton();
+    } catch (error) {
+        showToast('Playback toggle failed.');
+    }
+}
+
+async function resetDance() {
+    if (!state.selected) return;
+    setStatus('Resetting dance…');
+    try {
+        const data = await apiRequest('api/reset', {
+            method: 'POST',
+            body: JSON.stringify({ name: state.selected }),
+        });
+        state.paramSpecs = data.param_specs || [];
+        state.description = data.description || state.description;
+        updateSavedChip(data.last_saved);
+        renderParams(state.paramSpecs);
+        descriptionEl.textContent = state.description;
+        setStatus('Dance reset to defaults.');
+    } catch (error) {
+        setStatus('Reset failed.');
+        showToast('Could not reset dance.');
+    }
+}
+
+function attachEventListeners() {
+    danceSelect.addEventListener('change', () => {
+        const name = danceSelect.value;
+        if (name) {
+            selectDance(name);
+        }
+    });
+
+    resetDanceBtn.addEventListener('click', resetDance);
+    toggleBtn.addEventListener('click', togglePlayback);
+
+    bpmRange.addEventListener('input', () => {
+        state.bpm = parseFloat(bpmRange.value);
+        updateGlobalsUI();
+        saveGlobals();
+    });
+    bpmInput.addEventListener('change', () => {
+        const value = parseFloat(bpmInput.value);
+        if (Number.isNaN(value)) {
+            bpmInput.value = state.bpm.toFixed(0);
+            return;
+        }
+        state.bpm = Math.min(Math.max(value, 40), 180);
+        updateGlobalsUI();
+        saveGlobals();
+    });
+
+    ampRange.addEventListener('input', () => {
+        state.amplitudeScale = parseFloat(ampRange.value);
+        updateGlobalsUI();
+        saveGlobals();
+    });
+    ampInput.addEventListener('change', () => {
+        const value = parseFloat(ampInput.value);
+        if (Number.isNaN(value)) {
+            ampInput.value = state.amplitudeScale.toFixed(2);
+            return;
+        }
+        state.amplitudeScale = Math.min(Math.max(value, 0), 2);
+        updateGlobalsUI();
+        saveGlobals();
+    });
+}
+
+async function init() {
+    setStatus('Booting UI…');
+    initVisualizationGrid();
+    attachEventListeners();
+    await loadDances();
+    await refreshState();
+    pollVisualization();
+    requestAnimationFrame(animateVisualization);
+}
+
+init();

SimpleDances/static/style.css

@@ -0,0 +1,389 @@
+:root {
+    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    color: #f7f7fb;
+    background-color: #05060a;
+    --card-bg: rgba(14, 16, 26, 0.6);
+    --card-border: rgba(255, 255, 255, 0.08);
+    --accent: #ff8ba7;
+    --accent-strong: #ff5f6d;
+    --accent-secondary: #87f1ff;
+    --text-muted: rgba(247, 247, 251, 0.7);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: radial-gradient(circle at top, rgba(255, 95, 109, 0.25), transparent 50%),
+        radial-gradient(circle at 20% 20%, rgba(135, 241, 255, 0.18), transparent 55%),
+        #05060a;
+    color: #fff;
+}
+
+.background-glow {
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(circle at 80% 10%, rgba(255, 206, 134, 0.4), transparent 60%),
+        radial-gradient(circle at 10% 80%, rgba(96, 88, 255, 0.35), transparent 70%);
+    filter: blur(90px);
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.app-shell {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 48px 24px 80px;
+}
+
+.hero {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.eyebrow {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.25rem;
+    color: var(--text-muted);
+    margin: 0 0 8px;
+}
+
+.hero h1 {
+    margin: 0;
+    font-size: clamp(2.2rem, 4vw, 3.2rem);
+}
+
+.subtitle {
+    margin-top: 8px;
+    color: var(--text-muted);
+    max-width: 600px;
+}
+
+.hero-meta {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+}
+
+.panel-grid {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    margin-bottom: 24px;
+}
+
+.card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 18px;
+    padding: 24px;
+    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(16px);
+}
+
+.card h2 {
+    margin: 0 0 6px;
+    font-size: 1.4rem;
+}
+
+.card p {
+    margin: 0;
+    color: var(--text-muted);
+}
+
+.card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.field {
+    margin-top: 12px;
+}
+
+.field-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.select-wrapper {
+    position: relative;
+}
+
+select {
+    width: 100%;
+    padding: 12px 16px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+    font-size: 1rem;
+    appearance: none;
+}
+
+select:focus {
+    outline: 2px solid var(--accent-secondary);
+    border-color: transparent;
+}
+
+.chevron {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--text-muted);
+}
+
+.description {
+    margin-top: 16px;
+    line-height: 1.4;
+}
+
+.slider-row {
+    display: grid;
+    grid-template-columns: 1fr 90px;
+    gap: 12px;
+    margin-top: 8px;
+}
+
+input[type="range"] {
+    width: 100%;
+    accent-color: var(--accent);
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+}
+
+input[type="number"]:focus {
+    outline: 1px solid var(--accent-secondary);
+}
+
+.primary {
+    width: 100%;
+    padding: 14px;
+    border-radius: 999px;
+    border: none;
+    font-size: 1rem;
+    font-weight: 600;
+    background: linear-gradient(120deg, var(--accent), var(--accent-secondary));
+    color: #05060a;
+    cursor: pointer;
+    transition: transform 0.2s ease, filter 0.2s ease;
+}
+
+.primary:hover {
+    transform: translateY(-2px);
+    filter: brightness(1.1);
+}
+
+.primary.is-active {
+    background: linear-gradient(120deg, #49e9a6, #7bffda);
+    color: #041314;
+}
+
+.ghost {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 999px;
+    color: #fff;
+    padding: 8px 16px;
+    cursor: pointer;
+}
+
+.status-line {
+    margin-top: 16px;
+    text-align: center;
+    font-size: 0.95rem;
+    color: var(--text-muted);
+}
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    font-size: 0.85rem;
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.chip.playing {
+    border-color: rgba(73, 233, 166, 0.8);
+    background: rgba(73, 233, 166, 0.15);
+}
+
+.chip.alert {
+    border-color: rgba(255, 143, 178, 0.8);
+    background: rgba(255, 143, 178, 0.15);
+}
+
+.viz-card {
+    margin-bottom: 24px;
+}
+
+.viz-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 16px;
+    margin-top: 16px;
+}
+
+.viz-node {
+    position: relative;
+    padding: 16px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    overflow: hidden;
+}
+
+.viz-node h4 {
+    margin: 0 0 6px;
+    font-size: 0.95rem;
+    color: var(--text-muted);
+}
+
+.viz-value {
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+.viz-pulse {
+    position: absolute;
+    inset: auto auto 0 0;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
+    transform-origin: left center;
+    transform: scaleX(0);
+    opacity: 0.9;
+    transition: transform 0.3s ease;
+}
+
+.viz-orb {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
+    filter: blur(20px);
+    opacity: 0.5;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.4);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.viz-node[data-level] .viz-pulse {
+    transform: scaleX(var(--level, 0));
+}
+
+.viz-node[data-level] .viz-orb {
+    opacity: calc(0.2 + var(--level, 0) * 0.8);
+    transform: translate(-50%, -50%) scale(calc(0.35 + var(--level, 0) * 0.65));
+}
+
+.params-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 20px;
+}
+
+.param-card {
+    padding: 16px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.param-card h4 {
+    margin: 0 0 6px;
+    font-size: 1rem;
+}
+
+.param-meta {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+}
+
+.param-inputs {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.param-inputs input[type="range"] {
+    flex: 1;
+}
+
+.param-inputs input[type="number"],
+.param-inputs select {
+    width: 90px;
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+}
+
+.param-inputs select {
+    width: 100%;
+}
+
+.params-card .empty {
+    text-align: center;
+    padding: 24px;
+    color: var(--text-muted);
+}
+
+.toast {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    padding: 14px 18px;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 12px;
+    color: #fff;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    transform: translateY(10px);
+}
+
+.toast.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+@media (max-width: 720px) {
+    .slider-row {
+        grid-template-columns: 1fr;
+    }
+
+    input[type="number"] {
+        width: 100%;
+    }
+}

index.html

@@ -0,0 +1,235 @@
+<!doctype html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Simpledances </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Simpledances </h1>
+			<p class="tagline">Enter your tagline here</p>
+		</div>
+	</div>
+
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+					<div class="camera-feed">🛠️</div>
+				</div>
+			</div>
+		</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" />
+			</div>
+
+			<button id="installBtn" class="install-btn primary">
+				<span class="btn-icon">📥</span>
+				Install Simpledances to Reachy Mini
+			</button>
+
+			<div id="installStatus" class="install-status"></div>
+
+		</div>
+	</div>
+
+	<div class="footer">
+		<p>
+			🤖 Simpledances •
+			<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>
+
+	<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;
+		}
+
+		// Parse TOML content to extract project name
+		function parseTomlProjectName(tomlContent) {
+			try {
+				const lines = tomlContent.split('\n');
+				let inProjectSection = false;
+
+				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, '-');
+						}
+					}
+				}
+
+				throw new Error('Project name not found in pyproject.toml');
+			} catch (error) {
+				console.error('Error parsing pyproject.toml:', error);
+				return 'unknown-app';
+			}
+		}
+
+		// 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}`);
+				}
+
+				const tomlContent = await response.text();
+				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];
+				return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+			}
+		}
+
+		async function installToReachy() {
+			const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
+			const statusDiv = document.getElementById('installStatus');
+			const installBtn = document.getElementById('installBtn');
+
+			if (!dashboardUrl) {
+				showStatus('error', 'Please enter your Reachy dashboard URL');
+				return;
+			}
+
+			try {
+				installBtn.disabled = true;
+				installBtn.innerHTML = '<span class="btn-icon">⏳</span>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.');
+				}
+
+				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}"...`);
+
+				// Start installation
+				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
+					method: 'POST',
+					mode: 'cors',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						url: repoUrl,
+						name: appName
+					})
+				});
+
+				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);
+				} else {
+					throw new Error(result.detail || 'Installation failed');
+				}
+
+			} catch (error) {
+				console.error('Installation error:', error);
+				showStatus('error', `❌ ${error.message}`);
+			} finally {
+				installBtn.disabled = false;
+				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
+			}
+		}
+
+		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>

plan.txt

@@ -0,0 +1,65 @@
+Plan for SimpleDances reachy mini app (v1)
+=========================================
+
+0. Context & goals
+------------------
+- Reuse the structure of `reachy_mini_radio` to build a Reachy Mini app with a custom UI hosted from `SimpleDances/SimpleDances/static`.
+- Drive actual motions using `reachy_mini_dances_library`, exposing *all* available moves with tunable parameters.
+- Provide a clean web UI with dance selection, parameter sliders + numeric inputs, start/stop toggle, BPM + amplitude sliders, reset-to-default per dance, and a rhythmic visualization tied to all 8 DoF (6 head + 2 antenna) using live data from the control loop.
+- Persist parameter tweaks so each dance remembers its last settings between runs.
+
+1. Backend design (SimpleDances/SimpleDances/main.py)
+----------------------------------------------------
+- Import `AVAILABLE_MOVES` + antenna metadata from the dance library, and pre-compute a catalog: name, friendly label (title case), description, default params, metadata (duration, etc.).
+- Build helpers to:
+  * Load/save persisted parameters (JSON file adjacent to main.py). Structure: `{ "globals": {"bpm": float, "amplitude_scale": float}, "dances": {dance_name: {param: value}} }`.
+  * Merge saved params with defaults per dance.
+  * Derive UI specs for each param (type, slider min/max/step, unit, display multiplier) using heuristics based on the param name (e.g. `_rad` => degrees slider ±(default*3 capped), `_m` => centimeters range, `subcycles` => 0-4, `phase_offset` => 0-1, enumerations for waveform/antenna moves).
+  * Convert between internal units and UI units when serving values + when updates arrive.
+- Shared runtime state guarded by a `threading.Lock`: selected dance name, per-dance params, BPM, amplitude scale, playing flag, timestamps, last computed offsets for visualization, file persistence timestamps, etc.
+- Settings API endpoints on `self.settings_app`:
+  * `GET /api/dances` -> list of dances (name, label, description).
+  * `GET /api/state` -> current selection, playing flag, bpm, amplitude scale, parameter specs for the selected dance (values already converted for UI), and last-saved timestamp.
+  * `POST /api/select` -> pick a dance (payload: `{name}`), responds with updated param specs + selection.
+  * `POST /api/params` -> update parameters for the (selected) dance; payload includes `name` + `params` dictionary in UI units; convert, persist, respond with new specs.
+  * `POST /api/globals` -> update BPM and amplitude scale with validation + persistence.
+  * `POST /api/toggle` -> set playing flag (payload `{"playing": bool}`) and resets timing when toggling on.
+  * `POST /api/reset` -> reset a dance back to defaults (payload `{"name": ...}`) with save + updated specs.
+  * `GET /api/visualization` -> return most recent normalized offsets (position/orientation/antennas arrays) for front-end animation plus playing + bpm (read-only, polled at ~10–15 Hz by UI).
+- Control loop logic:
+  * On `run`, load ReachyMini, ensure motors enabled as needed (maybe only when playing), instantiate start time.
+  * Inside loop (50–100 Hz), read `state` snapshot; if playing and a dance is selected, compute beat time using global BPM, call the corresponding move function with stored params, scale offsets by amplitude scale, convert to head pose with `create_head_pose`, and send `reachy_mini.set_target(head=head_pose, antennas=...)`. If stopped, gradually go to neutral pose (or hold last command) to avoid abrupt freeze.
+  * Update shared `latest_offsets` for visualization each cycle, store for `/api/visualization`.
+  * Sleep for ~0.02s.
+- Persist JSON whenever params/globals change (debounce by writing immediately under lock).
+- Handle graceful shutdown (stop flag already provided); ensure motors disabled on exit.
+
+2. Front-end (SimpleDances/SimpleDances/static/{index.html,style.css,main.js})
+-----------------------------------------------------------------------------
+- Layout: split page with header, global controls, dance selector, parameter panel, start/stop button, and visualization canvas/bars.
+- Use CSS with pastel gradient, glassmorphism cards, responsive grid for parameter controls.
+- JS boot flow:
+  * Fetch `/api/dances` once for the list (populate `<select>` or tiles).
+  * Fetch `/api/state` and render: selection (pre-select from list), global slider values, playing state, params grid.
+  * On selection change -> POST `/api/select` then update UI.
+  * Parameter controls: for each spec (value + slider + numeric). Both inputs stay in sync and `debounce` POST `/api/params` updates; show “saved” indicator and disable controls while saving to avoid jitter.
+  * Reset button -> POST `/api/reset`.
+  * Start/stop toggle button -> POST `/api/toggle`.
+  * Global BPM + amplitude sliders with numeric inputs -> POST `/api/globals` when changed (debounced) with validation (BPM 40–180, amplitude 0–2.0 as slider requirements hint).
+- Visualization: create `<canvas>` or `<svg>` area that animates arcs/waves based on telemetry from `/api/visualization`. Poll every ~150 ms and animate smoothly using requestAnimationFrame. Map the 8 DoF to color-coded bars/rings (e.g., 3 orientation lines, 3 translation pulses, 2 antenna bars); amplitude drives height/opacity to satisfy “each DoF has an impact”. Provide fallback animation even when not playing (dim, idle oscillation) to keep it “beautiful and simple”.
+
+3. Persistence + utilities
+--------------------------
+- JSON file path: `SimpleDances/SimpleDances/dance_params.json` (auto-created). On failure to load parseable JSON, fall back to defaults but keep file for next writes.
+- Provide helper to sanitize payloads and ensure only known params are stored.
+- On each save, update `state["last_saved"]` so UI can display “Saved at …”.
+
+4. Testing / validation
+-----------------------
+- Manual: lint via running `python -m compileall` or `uv run`? (Not necessary yet but consider). Without hardware, run `python SimpleDances/SimpleDances/main.py` in dry-run to ensure no import errors and that endpoints accept sample requests.
+- UI: open `index.html` via app host after hooking to CLI environment (can't do now, but ensure markup includes helpful fallback text + `aria` labels).
+
+Open questions / assumptions
+----------------------------
+- Slider heuristics rely on parameter names; confirm tomorrow whether ranges feel right. Might need fine-tuning later.
+- Visualization currently planned as polling endpoint; if future requirement wants streaming/websocket, architecture allows swap.

pyproject.toml

@@ -0,0 +1,29 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+
+[project]
+name = "SimpleDances"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini",
+    "reachy_mini_dances_library",
+]
+keywords = ["reachy-mini-app"]
+
+[project.entry-points."reachy_mini_apps"]
+SimpleDances = "SimpleDances.main:Simpledances"
+
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+
+[tool.setuptools.packages.find]
+where = ["."]
+
+[tool.setuptools.package-data]
+SimpleDances = ["**/*"] # Also include all non-.py files

style.css

@@ -0,0 +1,411 @@
+* {
+	margin: 0;
+	padding: 0;
+	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%);
+	min-height: 100vh;
+}
+
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
+}
+
+.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;
+}
+
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
+	margin: 0 auto;
+}
+
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+
+.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;
+}
+
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+
+.detection-overlay {
+	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;
+}
+
+.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;
+}
+
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+
+.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;
+}
+
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+
+.step p {
+	color: #ca8a04;
+}
+
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.dashboard-config input {
+	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;
+}
+
+.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);
+}
+
+.install-btn:disabled {
+	opacity: 0.7;
+	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;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+
+.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;
+}
+
+.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;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+
+	.hero h1 {
+		font-size: 2rem;
+	}
+
+	.container {
+		padding: 0 1rem;
+	}
+
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}