Update app for official version

README.md

@@ -1,11 +1,11 @@
 ---
 title: Emotions
-emoji: 👋
+emoji: 🎡
 colorFrom: red
 colorTo: blue
 sdk: static
 pinned: false
-short_description: Trigger Reachy Mini's emotions!
+short_description: Spin Reachy Mini's emotion wheel and trigger any behavior.
 tags:
  - reachy_mini
  - reachy_mini_python_app

build/lib/emotions/main.py

@@ -0,0 +1,647 @@
+from __future__ import annotations
+
+import re
+import threading
+import time
+from collections import defaultdict
+from dataclasses import dataclass, field
+from datetime import datetime
+from pathlib import Path
+from typing import Any
+
+from fastapi import HTTPException
+from pydantic import BaseModel, Field
+from ruamel.yaml import YAML
+
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.motion.recorded_move import RecordedMoves
+
+EMOTIONS_DATASET = "pollen-robotics/reachy-mini-emotions-library"
+RESOURCE_ROOT = Path(__file__).resolve().parent.parent / "ressources"
+EMOTIONS_YAML_PATH = RESOURCE_ROOT / "emotions.yml"
+COHERENCE_DURATION_TOLERANCE = 0.25
+YAML_LOADER = YAML()
+YAML_LOADER.preserve_quotes = True
+YAML_LOADER.indent(mapping=2, sequence=4, offset=2)
+
+DEFAULT_SECTOR_ORDER = {
+    "emotion": [
+        "Joy",
+        "Trust",
+        "Fear",
+        "Surprise",
+        "Sadness",
+        "Disgust",
+        "Anger",
+        "Anticipation",
+    ],
+    "behavior": [
+        "Agree",
+        "Disagree",
+        "Ask",
+        "Listen",
+        "Direct",
+        "Social",
+        "Play",
+        "Meta",
+    ],
+}
+
+WHEEL_NODE_LAYOUT = {
+    "emotion": {
+        "node_size": 96.0,
+        "padding": 30.0,
+        "inner_margin": 40.0,
+        "fallback_radius": 240.0,
+        "min_ratio": 0.35,
+    },
+    "behavior": {
+        "node_size": 96.0,
+        "padding": 30.0,
+        "inner_margin": 40.0,
+        "fallback_radius": 240.0,
+        "min_ratio": 0.35,
+    },
+}
+
+
+@dataclass
+class WheelMove:
+    move_id: str
+    clean_name: str
+    description: str
+    move_type: str
+    wheel_sector: str
+    intensity: float
+    normalized_intensity: float
+    duration_seconds: float
+    duration_bucket: str
+    duration_color: str
+    sector_color: str
+    available: bool
+    recorded_duration: float | None
+    order: int
+    layout: dict[str, float] | None = None
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "id": self.move_id,
+            "label": self.clean_name,
+            "description": self.description,
+            "type": self.move_type,
+            "wheel_sector": self.wheel_sector,
+            "intensity": self.intensity,
+            "normalized_intensity": self.normalized_intensity,
+            "duration_seconds": self.duration_seconds,
+            "duration_bucket": self.duration_bucket,
+            "duration_color": self.duration_color,
+            "sector_color": self.sector_color,
+            "available": self.available,
+            "recorded_duration": self.recorded_duration,
+            "order": self.order,
+            "layout": self.layout,
+        }
+
+
+@dataclass
+class WheelSector:
+    slug: str
+    label: str
+    color: str
+    note: str | None
+    moves: list[WheelMove] = field(default_factory=list)
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "id": self.slug,
+            "label": self.label,
+            "color": self.color,
+            "note": self.note,
+            "moves": [move.to_dict() for move in self.moves],
+            "count": len(self.moves),
+        }
+
+
+@dataclass
+class EmotionCatalog:
+    wheels: dict[str, list[WheelSector]]
+    duration_buckets: list[dict[str, Any]]
+    intensity_scale: dict[str, float]
+    wheel_layout: dict[str, dict[str, float]]
+    coherence_report: dict[str, Any]
+    move_lookup: dict[str, WheelMove]
+
+    def to_payload(self) -> dict[str, Any]:
+        def wheel_payload(key: str, label: str) -> dict[str, Any]:
+            sectors = self.wheels.get(key, [])
+            return {
+                "label": label,
+                "sectors": [sector.to_dict() for sector in sectors],
+                "total_moves": sum(len(sector.moves) for sector in sectors),
+                "layout": self.wheel_layout.get(key, {}),
+            }
+
+        return {
+            "wheels": {
+                "emotion": wheel_payload("emotion", "Emotions"),
+                "behavior": wheel_payload("behavior", "Behaviors"),
+            },
+            "duration_buckets": self.duration_buckets,
+            "intensity_scale": self.intensity_scale,
+            "wheel_layout": self.wheel_layout,
+            "coherence": self.coherence_report,
+        }
+
+
+class PlayEmotionPayload(BaseModel):
+    move_name: str = Field(..., description="Exact key of the recorded move to play")
+
+
+class MovePositionPayload(BaseModel):
+    angle: float = Field(..., description="Angle in degrees (0° at positive X axis)")
+    radius: float = Field(
+        ..., ge=0.0, description="Radius ratio relative to wheel max radius (values >1 allowed)"
+    )
+
+
+class SaveLayoutPayload(BaseModel):
+    positions: dict[str, MovePositionPayload]
+
+
+def slugify(value: str) -> str:
+    slug = re.sub(r"[^a-z0-9]+", "-", value.lower()).strip("-")
+    return slug or "sector"
+
+
+def load_emotions_spec_tree() -> Any:
+    if not EMOTIONS_YAML_PATH.exists():
+        raise FileNotFoundError(f"Cannot locate emotions spec at {EMOTIONS_YAML_PATH}")
+    with EMOTIONS_YAML_PATH.open(encoding="utf-8") as handle:
+        return YAML_LOADER.load(handle)
+
+
+def dump_emotions_spec_tree(tree: Any) -> None:
+    with EMOTIONS_YAML_PATH.open("w", encoding="utf-8") as handle:
+        YAML_LOADER.dump(tree, handle)
+
+
+def clamp(value: float, lower: float, upper: float) -> float:
+    return max(lower, min(upper, value))
+
+
+def normalize_intensity(value: float, scale: dict[str, float]) -> float:
+    min_val = float(scale.get("min", 0.0))
+    max_val = float(scale.get("max", 10.0))
+    if max_val <= min_val:
+        return 0.5
+    normalized = (value - min_val) / (max_val - min_val)
+    return max(0.0, min(1.0, normalized))
+
+
+def classify_duration(duration: float, thresholds: dict[str, float]) -> str:
+    short_max = thresholds.get("short_max", 3.25)
+    medium_max = thresholds.get("medium_max", 6.5)
+    if duration <= short_max:
+        return "short"
+    if duration <= medium_max:
+        return "medium"
+    return "long"
+
+
+def prepare_duration_buckets(
+    thresholds: dict[str, float], palette: dict[str, dict[str, Any]]
+) -> tuple[list[dict[str, Any]], dict[str, dict[str, Any]]]:
+    short_max = float(thresholds.get("short_max", 3.25))
+    medium_max = float(thresholds.get("medium_max", 6.5))
+
+    def color_for(bucket: str) -> str:
+        return palette.get(bucket, {}).get("hex", "#ffffff")
+
+    buckets = [
+        {
+            "id": "short",
+            "label": f"Short (≤ {short_max:.2f}s)",
+            "max_seconds": short_max,
+            "color": color_for("short"),
+        },
+        {
+            "id": "medium",
+            "label": f"Medium ({short_max:.2f}s – {medium_max:.2f}s)",
+            "min_seconds": short_max,
+            "max_seconds": medium_max,
+            "color": color_for("medium"),
+        },
+        {
+            "id": "long",
+            "label": f"Long (> {medium_max:.2f}s)",
+            "min_seconds": medium_max,
+            "color": color_for("long"),
+        },
+    ]
+    lookup = {bucket["id"]: bucket for bucket in buckets}
+    return buckets, lookup
+
+
+def build_wheel_sectors(
+    moves: list[WheelMove], palette: dict[str, dict[str, Any]]
+) -> list[WheelSector]:
+    sectors: list[WheelSector] = []
+    handled_labels: set[str] = set()
+
+    for label, style in palette.items():
+        filtered = [move for move in moves if move.wheel_sector == label]
+        if not filtered:
+            continue
+        sector = WheelSector(
+            slug=slugify(label),
+            label=label,
+            color=style.get("hex", "#ffffff"),
+            note=style.get("note"),
+            moves=filtered,
+        )
+        sectors.append(sector)
+        handled_labels.add(label)
+
+    extra_labels = {
+        move.wheel_sector for move in moves if move.wheel_sector not in handled_labels
+    }
+    for label in extra_labels:
+        filtered = [move for move in moves if move.wheel_sector == label]
+        if not filtered:
+            continue
+        sectors.append(
+            WheelSector(
+                slug=slugify(label),
+                label=label,
+                color="#a0a0a0",
+                note=None,
+                moves=filtered,
+            )
+        )
+    return sectors
+
+
+def build_catalog(spec: dict[str, Any], recorded_emotions: RecordedMoves) -> EmotionCatalog:
+    meta = spec.get("meta", {})
+    intensity_scale = {
+        "min": float(meta.get("intensity_scale", {}).get("min", 0.0)),
+        "max": float(meta.get("intensity_scale", {}).get("max", 10.0)),
+    }
+    thresholds = {
+        "short_max": float(meta.get("duration_thresholds_seconds", {}).get("short_max", 3.25)),
+        "medium_max": float(meta.get("duration_thresholds_seconds", {}).get("medium_max", 6.5)),
+    }
+    wheel_layout_cfg = meta.get("wheel_layout", {})
+    wheel_layout = {
+        "emotion": {"radius": float(wheel_layout_cfg.get("emotion_radius", 240.0))},
+        "behavior": {"radius": float(wheel_layout_cfg.get("behavior_radius", 200.0))},
+    }
+    color_system = meta.get("color_system", {})
+    sector_palette: dict[str, dict[str, Any]] = color_system.get("wheel_sector_colors", {})
+    duration_palette: dict[str, dict[str, Any]] = color_system.get("duration_bucket_colors", {})
+    duration_buckets, duration_lookup = prepare_duration_buckets(thresholds, duration_palette)
+
+    dataset_move_names = set(recorded_emotions.list_moves())
+    moves_by_type: dict[str, list[WheelMove]] = {"emotion": [], "behavior": []}
+    move_lookup: dict[str, WheelMove] = {}
+
+    coherence = {
+        "yaml_missing_in_dataset": [],
+        "dataset_missing_in_yaml": [],
+        "duration_mismatches": [],
+        "sector_type_conflicts": [],
+        "unknown_sectors": [],
+        "unknown_types": [],
+        "intensity_out_of_range": [],
+    }
+    sector_type_map: dict[str, set[str]] = defaultdict(set)
+    spec_move_ids: set[str] = set()
+
+    for order, move_data in enumerate(spec.get("moves", [])):
+        move_id = move_data.get("id")
+        if not move_id:
+            continue
+        spec_move_ids.add(move_id)
+        move_type = (move_data.get("type") or "behavior").lower()
+        if move_type not in moves_by_type:
+            coherence["unknown_types"].append({"move": move_id, "type": move_type})
+            move_type = "behavior"
+
+        wheel_sector = move_data.get("wheel_sector", "Uncategorized")
+        sector_style = sector_palette.get(wheel_sector)
+        if not sector_style:
+            coherence["unknown_sectors"].append({"move": move_id, "sector": wheel_sector})
+        sector_color = (sector_style or {}).get("hex", "#a0a0a0")
+
+        intensity = float(move_data.get("intensity", intensity_scale["min"]))
+        normalized_intensity = normalize_intensity(intensity, intensity_scale)
+        if intensity < intensity_scale["min"] or intensity > intensity_scale["max"]:
+            coherence["intensity_out_of_range"].append(
+                {"move": move_id, "value": intensity}
+            )
+
+        duration_seconds = float(move_data.get("duration_seconds", 0.0))
+        bucket = classify_duration(duration_seconds, thresholds)
+        duration_color = duration_lookup[bucket]["color"]
+        description = move_data.get("description") or ""
+        clean_name = move_data.get("clean_name") or move_id
+
+        recorded_duration = None
+        available = move_id in dataset_move_names
+        if available:
+            dataset_move = recorded_emotions.get(move_id)
+            recorded_duration = float(dataset_move.duration)
+            diff = abs(recorded_duration - duration_seconds)
+            if diff > COHERENCE_DURATION_TOLERANCE:
+                coherence["duration_mismatches"].append(
+                    {
+                        "move": move_id,
+                        "yaml_duration": duration_seconds,
+                        "dataset_duration": recorded_duration,
+                        "delta": diff,
+                    }
+                )
+        else:
+            coherence["yaml_missing_in_dataset"].append(
+                {
+                    "move": move_id,
+                    "name": clean_name,
+                    "type": move_type,
+                    "sector": wheel_sector,
+                }
+            )
+
+        layout = None
+        position_data = move_data.get("position")
+        if isinstance(position_data, dict):
+            try:
+                angle = float(position_data.get("angle", 0.0)) % 360
+                radius_value = max(0.0, float(position_data.get("radius", 0.5)))
+                layout = {"angle": angle, "radius": radius_value}
+            except (TypeError, ValueError):
+                layout = None
+
+        sector_type_map[wheel_sector].add(move_type)
+        move = WheelMove(
+            move_id=move_id,
+            clean_name=clean_name,
+            description=description,
+            move_type=move_type,
+            wheel_sector=wheel_sector,
+            intensity=intensity,
+            normalized_intensity=normalized_intensity,
+            duration_seconds=duration_seconds,
+            duration_bucket=bucket,
+            duration_color=duration_color,
+            sector_color=sector_color,
+            available=available,
+            recorded_duration=recorded_duration,
+            order=order,
+            layout=layout,
+        )
+        moves_by_type[move_type].append(move)
+        move_lookup[move_id] = move
+
+    coherence["dataset_missing_in_yaml"] = sorted(dataset_move_names - spec_move_ids)
+    coherence["sector_type_conflicts"] = [
+        {"sector": sector, "types": sorted(types)}
+        for sector, types in sector_type_map.items()
+        if len(types) > 1
+    ]
+
+    wheels = {
+        wheel_type: build_wheel_sectors(moves, sector_palette)
+        for wheel_type, moves in moves_by_type.items()
+    }
+
+    return EmotionCatalog(
+        wheels=wheels,
+        duration_buckets=duration_buckets,
+        intensity_scale=intensity_scale,
+        wheel_layout=wheel_layout,
+        coherence_report=coherence,
+        move_lookup=move_lookup,
+    )
+
+
+def determine_sector_order(wheel_type: str, sectors: set[str]) -> list[str]:
+    remaining = list(sectors)
+    ordered: list[str] = []
+    for label in DEFAULT_SECTOR_ORDER.get(wheel_type, []):
+        if label in remaining:
+            ordered.append(label)
+            remaining.remove(label)
+    ordered.extend(sorted(remaining))
+    return ordered
+
+
+def apply_simple_wheel_layout(tree: Any) -> None:
+    meta = tree.get("meta", {})
+    wheel_layout_cfg = meta.get("wheel_layout", {})
+    intensity_scale = meta.get("intensity_scale", {"min": 0.0, "max": 10.0})
+    min_intensity = float(intensity_scale.get("min", 0.0))
+    max_intensity = float(intensity_scale.get("max", 10.0))
+
+    wheel_moves: dict[str, dict[str, list[dict[str, Any]]]] = {
+        "emotion": defaultdict(list),
+        "behavior": defaultdict(list),
+    }
+
+    moves_section = tree.get("moves", [])
+    for order, entry in enumerate(moves_section):
+        if not isinstance(entry, dict):
+            continue
+        move_id = entry.get("id")
+        if not move_id:
+            continue
+        move_type = (entry.get("type") or "behavior").lower()
+        if move_type not in wheel_moves:
+            move_type = "behavior"
+        sector = entry.get("wheel_sector") or "Uncategorized"
+        intensity = float(entry.get("intensity", min_intensity))
+        wheel_moves[move_type][sector].append(
+            {"entry": entry, "intensity": intensity, "order": order}
+        )
+
+    for wheel_type, sectors in wheel_moves.items():
+        if not sectors:
+            continue
+        settings = WHEEL_NODE_LAYOUT[wheel_type]
+        wheel_radius = float(
+            wheel_layout_cfg.get(f"{wheel_type}_radius", settings["fallback_radius"])
+        )
+        node_size = settings["node_size"]
+        padding = settings["padding"]
+        inner_margin = settings["inner_margin"]
+        ordered_sectors = determine_sector_order(wheel_type, set(sectors.keys()))
+        span = 360.0 / len(ordered_sectors)
+
+        for index, sector in enumerate(ordered_sectors):
+            moves = sectors.get(sector, [])
+            if not moves:
+                continue
+            center_angle = (index * span + span / 2) % 360.0
+            sorted_moves = sorted(
+                moves, key=lambda item: (item["intensity"], item["order"])
+            )
+
+            base_offset = inner_margin + node_size + padding
+            step = node_size + padding
+            min_ratio = settings.get("min_ratio", 0.25)
+
+            for position_index, move in enumerate(sorted_moves):
+                radius_px = base_offset + position_index * step
+                intensity_ratio = (
+                    (move["intensity"] - min_intensity)
+                    / (max_intensity - min_intensity or 1.0)
+                )
+                intensity_boost = (node_size * 0.35) * intensity_ratio
+                radius_px = radius_px + intensity_boost
+                radius_ratio = max(radius_px / wheel_radius, min_ratio)
+                move["entry"]["position"] = {
+                    "angle": round(center_angle, 6),
+                    "radius": round(radius_ratio, 6),
+                }
+
+
+class Emotions(ReachyMiniApp):
+    """Reachy Mini app that plays recorded emotions with a YAML-driven UI."""
+
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = None
+
+    def __init__(self) -> None:
+        super().__init__()
+        self._recorded_emotions = RecordedMoves(EMOTIONS_DATASET)
+        self._spec_tree = load_emotions_spec_tree()
+        self._catalog = build_catalog(self._spec_tree, self._recorded_emotions)
+        self._move_lookup = self._catalog.move_lookup
+        self._lock = threading.Lock()
+        self._config_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 _refresh_catalog(self, tree: Any | None = None) -> None:
+        if tree is None:
+            tree = load_emotions_spec_tree()
+        self._spec_tree = tree
+        self._catalog = build_catalog(tree, self._recorded_emotions)
+        self._move_lookup = self._catalog.move_lookup
+
+    def _save_positions(self, positions: dict[str, MovePositionPayload]) -> None:
+        with self._config_lock:
+            tree = load_emotions_spec_tree()
+            moves_section = tree.get("moves", [])
+            for entry in moves_section:
+                if not isinstance(entry, dict):
+                    continue
+                move_id = entry.get("id")
+                if not move_id:
+                    continue
+                payload = positions.get(move_id)
+                if payload is None:
+                    continue
+                angle = float(payload.angle) % 360
+                radius = max(0.0, float(payload.radius))
+                entry["position"] = {"angle": angle, "radius": radius}
+
+            dump_emotions_spec_tree(tree)
+            self._refresh_catalog(tree)
+
+    def _reset_positions(self) -> None:
+        with self._config_lock:
+            tree = load_emotions_spec_tree()
+            apply_simple_wheel_layout(tree)
+            dump_emotions_spec_tree(tree)
+            self._refresh_catalog(tree)
+
+    def _register_routes(self) -> None:
+        @self.settings_app.get("/api/emotions")
+        def list_emotions() -> dict[str, Any]:
+            return self._catalog.to_payload()
+
+        @self.settings_app.get("/api/visualization")
+        def visualization() -> dict[str, Any]:
+            # Return the same payload for compatibility with dashboards expecting this endpoint.
+            return {
+                "wheels": self._catalog.to_payload()["wheels"],
+                "updated_at": datetime.utcnow().isoformat(),
+            }
+
+        @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
+            move_meta = self._move_lookup.get(move_name)
+            if move_meta is None:
+                raise HTTPException(status_code=404, detail=f"Unknown move {move_name}")
+            if not move_meta.available:
+                raise HTTPException(
+                    status_code=409,
+                    detail=f"Move {move_name} is missing from the recorded dataset.",
+                )
+
+            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": move_meta.clean_name,
+                }
+
+        @self.settings_app.post("/api/layout/save")
+        def save_layout(payload: SaveLayoutPayload) -> dict[str, Any]:
+            self._save_positions(payload.positions)
+            return {"status": "ok"}
+
+        @self.settings_app.post("/api/layout/reset")
+        def reset_layout() -> dict[str, Any]:
+            self._reset_positions()
+            return {"status": "ok"}
+
+    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__":
+    app = Emotions()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

build/lib/emotions/static/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>
+    <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, the badge hue shows duration, and distance from the
+                    heart of the wheel still encodes intensity.
+                </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>
+
+        <section class="layout-controls">
+            <button id="layoutModeBtn" class="control-btn">Manual layout</button>
+            <button id="layoutSaveBtn" class="control-btn" disabled>Save layout</button>
+            <button id="layoutResetBtn" class="control-btn secondary">Reset layout</button>
+        </section>
+
+        <section class="wheel-stage">
+            <div class="wheel-block">
+                <div class="wheel-header">
+                    <h2>Emotion Wheel</h2>
+                </div>
+                <div class="wheel" id="emotionWheel">
+                    <div class="ring outer"></div>
+                    <div class="ring inner"></div>
+                    <div class="wheel-center">
+                        <p>emotions</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="wheel-block">
+                <div class="wheel-header">
+                    <h2>Behavior Wheel</h2>
+                </div>
+                <div class="wheel" id="behaviorWheel">
+                    <div class="ring outer"></div>
+                    <div class="ring inner"></div>
+                    <div class="wheel-center">
+                        <p>behaviors</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="coherence-panel" id="coherencePanel">
+            <strong>Sync diagnostics</strong>
+            <p>Loading…</p>
+        </section>
+    </main>
+
+    <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>

build/lib/emotions/static/main.js

@@ -0,0 +1,855 @@
+const wheelElements = {
+    emotion: document.getElementById("emotionWheel"),
+    behavior: document.getElementById("behaviorWheel"),
+};
+const wheelStage = document.querySelector(".wheel-stage");
+const statusChip = document.getElementById("statusChip");
+const tooltip = document.getElementById("tooltip");
+const toast = document.getElementById("toast");
+const coherencePanel = document.getElementById("coherencePanel");
+const layoutModeBtn = document.getElementById("layoutModeBtn");
+const layoutSaveBtn = document.getElementById("layoutSaveBtn");
+const layoutResetBtn = document.getElementById("layoutResetBtn");
+
+const WHEEL_PADDING = 60;
+const MAX_LANES = 9;
+const WHEEL_SETTINGS = {
+    default: { nodeSize: 84, baseInnerRatio: 0.22, movesPerLane: 5 },
+    emotion: { nodeSize: 96, baseInnerRatio: 0.2, movesPerLane: 5 },
+    behavior: { nodeSize: 96, baseInnerRatio: 0.2, movesPerLane: 5 },
+};
+
+const appState = {
+    wheels: {},
+    durationBuckets: [],
+    intensityScale: { min: 0, max: 10 },
+    coherence: {},
+    moveIndex: new Map(),
+    wheelLayout: {},
+    wheelGeometry: {},
+    positions: new Map(),
+    busy: true,
+    currentMove: null,
+    manualMode: false,
+    positionsDirty: false,
+    layoutOverrides: new Map(),
+};
+const manualState = {
+    drag: null,
+};
+
+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();
+};
+
+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(buildApiUrl(path), config);
+    if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+    }
+    if (response.status === 204) {
+        return {};
+    }
+    return response.json();
+}
+
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+
+function hexToRgba(hex, alpha) {
+    if (!hex) {
+        return `rgba(255, 255, 255, ${alpha})`;
+    }
+    const normalized = hex.replace("#", "");
+    const bigint = parseInt(normalized.length === 3 ? normalized.repeat(2) : normalized, 16);
+    // eslint-disable-next-line no-bitwise
+    const r = (bigint >> 16) & 255;
+    // eslint-disable-next-line no-bitwise
+    const g = (bigint >> 8) & 255;
+    // eslint-disable-next-line no-bitwise
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+function applySectorColor(element, color, { backgroundAlpha = 0.9, borderAlpha = 0.95 } = {}) {
+    const base = hexToRgba(color, backgroundAlpha);
+    const fade = hexToRgba(color, 0.45);
+    element.style.background = `linear-gradient(135deg, ${base}, ${fade})`;
+    element.style.borderColor = hexToRgba(color, borderAlpha);
+    element.style.boxShadow = `0 15px 35px ${hexToRgba(color, 0.35)}`;
+}
+
+function showToast(message) {
+    toast.textContent = message;
+    toast.classList.add("visible");
+    setTimeout(() => toast.classList.remove("visible"), 2600);
+}
+
+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 && moveName ? `Playing ${formatMoveName(moveName)}` : "Idle";
+    updateStatusChip(label, isBusy);
+    document.querySelectorAll(".wheel-node").forEach((node) => {
+        const available = node.dataset.available !== "false";
+        node.classList.toggle("busy", isBusy);
+        const shouldDisable = !appState.manualMode && (!available || isBusy);
+        node.disabled = shouldDisable;
+    });
+}
+
+function formatMoveName(moveId) {
+    if (!moveId) return "";
+    const move = appState.moveIndex.get(moveId);
+    if (!move) return moveId;
+    return move.label;
+}
+
+function buildStructures(data) {
+    appState.wheels = data.wheels || {};
+    appState.durationBuckets = data.duration_buckets || [];
+    appState.intensityScale = data.intensity_scale || { min: 0, max: 10 };
+    appState.coherence = data.coherence || {};
+    appState.wheelLayout = data.wheel_layout || {};
+    appState.moveIndex = new Map();
+    appState.wheelGeometry = {};
+    appState.positions = new Map();
+    appState.positionsDirty = false;
+    appState.layoutOverrides = new Map();
+
+    Object.entries(appState.wheels).forEach(([, wheel]) => {
+        (wheel.sectors || []).forEach((sector) => {
+            (sector.moves || []).forEach((move) => {
+                appState.moveIndex.set(move.id, move);
+            });
+        });
+    });
+}
+
+function getWheelSetting(key) {
+    return { ...WHEEL_SETTINGS.default, ...(WHEEL_SETTINGS[key] || {}) };
+}
+
+function buildWheelGradient(sectors) {
+    if (!sectors?.length) {
+        return "rgba(255,255,255,0.08)";
+    }
+    const span = 360 / sectors.length;
+    const parts = sectors.map((sector, index) => {
+        const start = index * span;
+        const end = start + span;
+        return `${sector.color} ${start}deg ${end}deg`;
+    });
+    return `conic-gradient(${parts.join(",")})`;
+}
+
+function applyGradient(wheelEl, gradient) {
+    wheelEl.style.setProperty("--wheel-gradient", gradient);
+}
+
+function clearNodes(selector) {
+    document.querySelectorAll(selector).forEach((node) => node.remove());
+}
+
+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 polarToCartesian(angleDeg, radius) {
+    const radians = (angleDeg * Math.PI) / 180;
+    return {
+        x: Math.cos(radians) * radius,
+        y: Math.sin(radians) * radius,
+    };
+}
+
+function createNodeElement(move, wheelKey) {
+    const node = document.createElement("button");
+    node.className = `wheel-node ${wheelKey}-node`;
+    node.dataset.move = move.id;
+    node.dataset.sector = move.wheel_sector;
+    node.dataset.wheel = wheelKey;
+    node.dataset.available = move.available ? "true" : "false";
+    node.style.setProperty("--duration-color", move.duration_color);
+    applySectorColor(node, move.sector_color, { backgroundAlpha: 0.85, borderAlpha: 0.9 });
+    node.innerHTML = `
+        <span class="node-title">${move.label}</span>
+        <span class="node-meta">${move.duration_bucket.toUpperCase()}</span>
+    `;
+
+    if (!move.available) {
+        node.classList.add("unavailable");
+        node.disabled = true;
+    }
+
+    node.addEventListener("mouseenter", () => {
+        showTooltip(move);
+        highlightSector(move.wheel_sector, true);
+    });
+    node.addEventListener("mousemove", (event) => moveTooltip(event));
+    node.addEventListener("mouseleave", () => {
+        hideTooltip();
+        highlightSector(move.wheel_sector, false);
+    });
+    node.addEventListener("click", () => triggerPlay(move.id));
+    return node;
+}
+
+function renderWheel(wheelKey) {
+    const wheelData = appState.wheels[wheelKey];
+    const wheelEl = wheelElements[wheelKey];
+    if (!wheelData || !wheelEl) return;
+
+    clearNodes(`.${wheelKey}-node`);
+    clearNodes(`.${wheelKey}-sector-label-layer`);
+
+    const rect = wheelEl.getBoundingClientRect();
+    if (!rect.width) return;
+
+    const sectors = wheelData.sectors || [];
+    const gradient = buildWheelGradient(sectors);
+    applyGradient(wheelEl, gradient);
+
+    if (!sectors.length) {
+        return;
+    }
+
+    const maxDrawableRadius = rect.width / 2 - WHEEL_PADDING;
+    const layoutRadiusSetting = Number(wheelData.layout?.radius) || maxDrawableRadius;
+    const drawRadius = Math.min(layoutRadiusSetting, maxDrawableRadius);
+    const wheelSettings = getWheelSetting(wheelKey);
+    const span = 360 / sectors.length;
+    appState.wheelGeometry[wheelKey] = {
+        drawRadius,
+        element: wheelEl,
+    };
+    renderSectorLabels(wheelEl, sectors, drawRadius, span, wheelKey);
+
+    sectors.forEach((sector, index) => {
+        const moves = sector.moves || [];
+        const sectorCenter = index * span + span / 2;
+
+        const manualMoves = [];
+        const autoMoves = [];
+
+        moves.forEach((move) => {
+            const layout = resolveLayout(move);
+            if (layout) {
+                manualMoves.push({ move, layout });
+            } else {
+                autoMoves.push(move);
+            }
+        });
+
+        manualMoves.forEach(({ move, layout }) => {
+            const ratio = Number(layout.radius) || 0;
+            const radiusPx = ratio * drawRadius;
+            const angle =
+                typeof layout.angle === "number"
+                    ? (Number(layout.angle) + 360) % 360
+                    : sectorCenter;
+            const node = createNodeElement(move, wheelKey);
+            attachManualHandlers(node, move.id, wheelKey);
+            positionNode(node, angle, radiusPx);
+            recordPosition(move.id, wheelKey, angle, radiusPx);
+            wheelEl.appendChild(node);
+        });
+
+        const lanes = buildSectorLanes(autoMoves, drawRadius, span, wheelSettings);
+        lanes.forEach((lane) => {
+            const bucket = lane.items;
+            if (!bucket.length) return;
+            const availableSpread = span * 0.85;
+            const laneOffset =
+                lanes.length > 1 ? ((lane.index / (lanes.length - 1)) - 0.5) * (span * 0.08) : 0;
+
+            if (bucket.length === 1) {
+                const move = bucket[0];
+                const node = createNodeElement(move, wheelKey);
+                attachManualHandlers(node, move.id, wheelKey);
+                positionNode(node, sectorCenter + laneOffset, lane.radius);
+                recordPosition(move.id, wheelKey, sectorCenter + laneOffset, lane.radius);
+                wheelEl.appendChild(node);
+                return;
+            }
+
+            const nodeSize = wheelSettings.nodeSize;
+            const minAngleStep = (nodeSize / lane.radius) * (180 / Math.PI) * 1.15;
+            let step = Math.max(minAngleStep, availableSpread / (bucket.length - 1));
+            if (step * (bucket.length - 1) > availableSpread) {
+                step = availableSpread / (bucket.length - 1);
+            }
+            const totalSpan = step * (bucket.length - 1);
+            const start = sectorCenter - totalSpan / 2 + laneOffset;
+
+            bucket.forEach((move, idx) => {
+                const angle = start + step * idx;
+                const node = createNodeElement(move, wheelKey);
+                attachManualHandlers(node, move.id, wheelKey);
+                positionNode(node, angle, lane.radius);
+                recordPosition(move.id, wheelKey, angle, lane.radius);
+                wheelEl.appendChild(node);
+            });
+        });
+    });
+}
+
+function renderAllWheels() {
+    if (manualState.drag) {
+        finishDrag();
+    }
+    appState.positions = new Map();
+    renderWheel("emotion");
+    renderWheel("behavior");
+    updateWheelStageSpacing();
+}
+
+function updateWheelStageSpacing() {
+    if (!wheelStage) return;
+    const geometries = Object.entries(appState.wheelGeometry);
+    if (!geometries.length) return;
+    const radii = geometries.map(([, geo]) => geo.drawRadius || 0);
+    const maxRadius = Math.max(...radii);
+    const haloBuffer = WHEEL_PADDING * 1.4;
+    const emotionRadius = appState.wheelGeometry.emotion?.drawRadius ?? maxRadius;
+    const behaviorRadius = appState.wheelGeometry.behavior?.drawRadius ?? maxRadius;
+    const gapBase = emotionRadius + behaviorRadius + haloBuffer * 2;
+    const gap = Math.max(220, Math.round(gapBase));
+    const topPadding = Math.max(100, Math.round(maxRadius + haloBuffer));
+    const bottomPadding = Math.max(
+        180,
+        Math.round((behaviorRadius || maxRadius) + haloBuffer * 1.6)
+    );
+    wheelStage.style.setProperty("--wheel-gap", `${gap}px`);
+    wheelStage.style.setProperty("--wheel-padding-top", `${topPadding}px`);
+    wheelStage.style.setProperty("--wheel-padding-bottom", `${bottomPadding}px`);
+}
+
+function renderSectorLabels(wheelEl, sectors, outerRadius, span, wheelKey) {
+    const existing = wheelEl.querySelector(`.sector-label-layer.${wheelKey}-sector-label-layer`);
+    if (existing) {
+        existing.remove();
+    }
+    if (!sectors.length) {
+        return;
+    }
+    const labelRadius = outerRadius + 200;
+    const layer = document.createElement("div");
+    layer.classList.add("sector-label-layer", `${wheelKey}-sector-label-layer`);
+    layer.setAttribute("aria-hidden", "true");
+    layer.style.position = "absolute";
+    layer.style.left = "50%";
+    layer.style.top = "50%";
+    layer.style.width = "0";
+    layer.style.height = "0";
+    layer.style.transform = "translate(-50%, -50%)";
+
+    sectors.forEach((sector, index) => {
+        const padding = 6;
+        const startAngle = index * span + padding;
+        const endAngle = (index + 1) * span - padding;
+        const centerAngle = (startAngle + endAngle) / 2;
+        const coords = polarToCartesian(centerAngle, labelRadius);
+        const label = document.createElement("span");
+        label.classList.add("sector-label");
+        label.textContent = sector.label;
+        label.style.transform = `translate(${coords.x}px, ${coords.y}px) translate(-50%, -50%)`;
+        const normalizedCenter = ((centerAngle % 360) + 360) % 360;
+        if (Math.cos((normalizedCenter * Math.PI) / 180) < 0) {
+            label.dataset.side = "left";
+        } else {
+            label.dataset.side = "right";
+        }
+        layer.appendChild(label);
+    });
+    wheelEl.appendChild(layer);
+}
+
+function resolveLayout(move) {
+    if (appState.layoutOverrides.has(move.id)) {
+        return appState.layoutOverrides.get(move.id);
+    }
+    return move.layout || null;
+}
+
+function buildSectorLanes(moves, outerRadius, span, settings) {
+    if (!moves.length) {
+        return [];
+    }
+    const nodeSize = settings.nodeSize;
+    const movesPerLane = settings.movesPerLane;
+    const baseInnerRadius = outerRadius * settings.baseInnerRatio;
+    const laneCount = clamp(Math.ceil(moves.length / movesPerLane), 1, MAX_LANES);
+    const radii = computeLaneRadii(laneCount, outerRadius, baseInnerRadius, nodeSize);
+
+    const capacities = radii.map((radius) => {
+        const arcLength = ((span * 0.9) * Math.PI) / 180 * radius;
+        return Math.max(2, Math.floor(arcLength / (nodeSize * 1.35)));
+    });
+    const lanes = radii.map((radius, index) => ({ radius, items: [], index }));
+    const sortedMoves = [...moves].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+    sortedMoves.forEach((move) => {
+        const prefLane = clamp(
+            Math.round(move.normalized_intensity * (laneCount - 1)),
+            0,
+            laneCount - 1
+        );
+        let laneIndex = prefLane;
+        if (lanes[laneIndex].items.length >= capacities[laneIndex]) {
+            let offset = 1;
+            while (offset < laneCount) {
+                const left = prefLane - offset;
+                const right = prefLane + offset;
+                if (left >= 0 && lanes[left].items.length < capacities[left]) {
+                    laneIndex = left;
+                    break;
+                }
+                if (right < laneCount && lanes[right].items.length < capacities[right]) {
+                    laneIndex = right;
+                    break;
+                }
+                offset += 1;
+            }
+        }
+        lanes[laneIndex].items.push(move);
+    });
+
+    return lanes;
+}
+
+function computeLaneRadii(laneCount, outerRadius, baseInnerRadius, nodeSize) {
+    if (laneCount <= 1) {
+        return [Math.max(outerRadius * 0.4, outerRadius - nodeSize * 1.2)];
+    }
+    const minGap = nodeSize * 1.05;
+    let innerRadius = baseInnerRadius;
+    let span = outerRadius - innerRadius;
+    const neededSpan = minGap * (laneCount - 1);
+    if (span < neededSpan) {
+        innerRadius = Math.max(outerRadius - neededSpan, 40);
+        span = outerRadius - innerRadius;
+    }
+    const gap = span / (laneCount - 1);
+    return Array.from({ length: laneCount }, (_, idx) => innerRadius + gap * idx);
+}
+
+function recordPosition(moveId, wheelKey, angle, radiusPx) {
+    const geometry = appState.wheelGeometry[wheelKey];
+    if (!geometry || !geometry.drawRadius) {
+        return;
+    }
+    const normalizedAngle = ((angle % 360) + 360) % 360;
+    const ratio = geometry.drawRadius ? radiusPx / geometry.drawRadius : 0;
+    appState.positions.set(moveId, { angle: normalizedAngle, radius: Math.max(0, ratio) });
+}
+
+function attachManualHandlers(node, moveId, wheelKey) {
+    node.addEventListener("pointerdown", (event) => {
+        if (!appState.manualMode) {
+            return;
+        }
+        event.preventDefault();
+        try {
+            node.setPointerCapture(event.pointerId);
+        } catch (error) {
+            // ignore
+        }
+        node.classList.add("dragging");
+        manualState.drag = {
+            node,
+            moveId,
+            wheelKey,
+            pointerId: event.pointerId,
+        };
+    });
+
+    node.addEventListener("pointermove", (event) => {
+        if (!manualState.drag || manualState.drag.pointerId !== event.pointerId) {
+            return;
+        }
+        updateDragPosition(event);
+    });
+
+    const endDrag = (event) => {
+        if (!manualState.drag || manualState.drag.pointerId !== event.pointerId) {
+            return;
+        }
+        finishDrag();
+    };
+
+    node.addEventListener("pointerup", endDrag);
+    node.addEventListener("pointercancel", endDrag);
+}
+
+function updateDragPosition(event) {
+    const drag = manualState.drag;
+    if (!drag) return;
+    const geometry = appState.wheelGeometry[drag.wheelKey];
+    if (!geometry) return;
+    const rect = geometry.element.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const dx = event.clientX - centerX;
+    const dy = event.clientY - centerY;
+    let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
+    if (angle < 0) angle += 360;
+    const radiusPx = Math.sqrt(dx * dx + dy * dy);
+    positionNode(drag.node, angle, radiusPx);
+    appState.layoutOverrides.set(drag.moveId, {
+        angle,
+        radius: geometry.drawRadius ? radiusPx / geometry.drawRadius : 0,
+    });
+    recordPosition(drag.moveId, drag.wheelKey, angle, radiusPx);
+    setPositionsDirty(true);
+}
+
+function finishDrag() {
+    const drag = manualState.drag;
+    if (!drag) return;
+    drag.node.classList.remove("dragging");
+    try {
+        drag.node.releasePointerCapture(drag.pointerId);
+    } catch (error) {
+        // ignore
+    }
+    manualState.drag = null;
+}
+
+function moveTooltip(event) {
+    tooltip.style.left = `${event.clientX}px`;
+    tooltip.style.top = `${event.clientY - 20}px`;
+}
+
+function showTooltip(move) {
+    tooltip.classList.add("visible");
+    const duration = `${move.duration_seconds.toFixed(2)}s`;
+    const availability = move.available ? "" : "<span class=\"warning\">Missing in dataset</span>";
+    const hasRecorded = Number.isFinite(move.recorded_duration);
+    const datasetId =
+        typeof move.id === "string" ? move.id.toLowerCase() : String(move.id ?? "");
+    const recorded =
+        hasRecorded && Math.abs(move.recorded_duration - move.duration_seconds) > 0.01
+            ? `<br><small>Recorded duration: ${move.recorded_duration.toFixed(2)}s</small>`
+            : "";
+    tooltip.innerHTML = `
+        <strong>${move.label}</strong>
+        <small class="muted">dataset: ${datasetId}</small>
+        <span>${move.wheel_sector} • ${duration} • ${move.duration_bucket.toUpperCase()} ${availability}</span>
+        <p>${move.description || "No description yet."}</p>
+        <small>Intensity ${move.intensity.toFixed(1)}${recorded}</small>
+    `;
+}
+
+function hideTooltip() {
+    tooltip.classList.remove("visible");
+}
+
+function highlightSector(sector, enabled) {
+    if (!sector) return;
+    document.querySelectorAll(`.wheel-node[data-sector="${sector}"]`).forEach((node) => {
+        node.classList.toggle("highlight", enabled);
+    });
+}
+
+function summarizeList(items, formatter) {
+    if (!items?.length) {
+        return "";
+    }
+    const preview = items.slice(0, 3).map(formatter).join("");
+    const remaining = items.length - 3;
+    const more = remaining > 0 ? `<span class="more">+${remaining} more</span>` : "";
+    return `<div class="issue-list">${preview}${more}</div>`;
+}
+
+function updateCoherencePanel(coherence) {
+    if (!coherencePanel) return;
+    const hasIssues = Object.values(coherence || {}).some(
+        (value) => Array.isArray(value) && value.length
+    );
+    if (!hasIssues) {
+        coherencePanel.classList.add("clean");
+        coherencePanel.innerHTML = `
+            <strong>Sync diagnostics</strong>
+            <p>YAML and recorded dataset are in sync.</p>
+        `;
+        return;
+    }
+
+    coherencePanel.classList.remove("clean");
+    const blocks = [];
+
+    if (coherence.yaml_missing_in_dataset?.length) {
+        blocks.push(`
+            <article>
+                <h4>Missing in dataset (${coherence.yaml_missing_in_dataset.length})</h4>
+                ${summarizeList(
+                    coherence.yaml_missing_in_dataset,
+                    (item) =>
+                        `<span>${item.move} <small>${item.sector}</small></span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (coherence.dataset_missing_in_yaml?.length) {
+        blocks.push(`
+            <article>
+                <h4>Dataset only (${coherence.dataset_missing_in_yaml.length})</h4>
+                ${summarizeList(
+                    coherence.dataset_missing_in_yaml,
+                    (item) => `<span>${item}</span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (coherence.duration_mismatches?.length) {
+        blocks.push(`
+            <article>
+                <h4>Duration mismatches (${coherence.duration_mismatches.length})</h4>
+                ${summarizeList(
+                    coherence.duration_mismatches,
+                    (item) =>
+                        `<span>${item.move} <small>${Number.isFinite(item.dataset_duration) ? item.dataset_duration.toFixed(
+                            2
+                        ) : "?"}s vs ${item.yaml_duration.toFixed(2)}s</small></span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (coherence.sector_type_conflicts?.length) {
+        blocks.push(`
+            <article>
+                <h4>Sector conflicts</h4>
+                ${summarizeList(
+                    coherence.sector_type_conflicts,
+                    (item) => `<span>${item.sector} <small>${item.types.join(" & ")}</small></span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (coherence.unknown_sectors?.length) {
+        blocks.push(`
+            <article>
+                <h4>Unknown sectors</h4>
+                ${summarizeList(
+                    coherence.unknown_sectors,
+                    (item) => `<span>${item.move} <small>${item.sector || "?"}</small></span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (coherence.unknown_types?.length) {
+        blocks.push(`
+            <article>
+                <h4>Unknown types</h4>
+                ${summarizeList(
+                    coherence.unknown_types,
+                    (item) => `<span>${item.move} <small>${item.type}</small></span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (coherence.intensity_out_of_range?.length) {
+        blocks.push(`
+            <article>
+                <h4>Intensity out of scale</h4>
+                ${summarizeList(
+                    coherence.intensity_out_of_range,
+                    (item) => `<span>${item.move} <small>${item.value}</small></span>`
+                )}
+            </article>
+        `);
+    }
+
+    if (blocks.length === 0) {
+        coherencePanel.innerHTML = `
+            <strong>Sync diagnostics</strong>
+            <p>YAML and recorded dataset are in sync.</p>
+        `;
+        return;
+    }
+
+    coherencePanel.innerHTML = `
+        <strong>Sync diagnostics</strong>
+        <div class="issue-grid">
+            ${blocks.join("")}
+        </div>
+    `;
+}
+
+function updateManualControls() {
+    document.body.classList.toggle("manual-mode", appState.manualMode);
+    if (layoutModeBtn) {
+        layoutModeBtn.textContent = appState.manualMode ? "Exit layout" : "Manual layout";
+    }
+    if (layoutSaveBtn) {
+        layoutSaveBtn.disabled = !appState.positionsDirty;
+    }
+}
+
+function setPositionsDirty(flag) {
+    appState.positionsDirty = flag;
+    updateManualControls();
+}
+
+function toggleManualMode(force) {
+    const nextState = typeof force === "boolean" ? force : !appState.manualMode;
+    if (!nextState && manualState.drag) {
+        finishDrag();
+    }
+    appState.manualMode = nextState;
+    updateManualControls();
+    setBusyState(appState.busy, appState.currentMove);
+}
+
+async function saveLayout() {
+    try {
+        const payload = {};
+        appState.positions.forEach((value, key) => {
+            payload[key] = { angle: value.angle, radius: value.radius };
+        });
+        if (!Object.keys(payload).length) {
+            showToast("No moves available to save.");
+            return;
+        }
+        await fetchJson("/api/layout/save", { method: "POST", body: { positions: payload } });
+        appState.layoutOverrides.clear();
+        setPositionsDirty(false);
+        showToast("Layout saved.");
+        await loadAndRender();
+        toggleManualMode(false);
+    } catch (error) {
+        console.error(error);
+        showToast("Unable to save layout.");
+    }
+}
+
+async function resetLayout() {
+    try {
+        await fetchJson("/api/layout/reset", { method: "POST" });
+        appState.layoutOverrides.clear();
+        setPositionsDirty(false);
+        showToast("Layout reset.");
+        await loadAndRender();
+        toggleManualMode(false);
+    } catch (error) {
+        console.error(error);
+        showToast("Unable to reset layout.");
+    }
+}
+
+async function loadAndRender() {
+    const data = await fetchJson("/api/emotions");
+    buildStructures(data);
+    renderAllWheels();
+    updateCoherencePanel(appState.coherence);
+    setPositionsDirty(false);
+    updateManualControls();
+    setBusyState(appState.busy, appState.currentMove);
+}
+
+async function triggerPlay(moveId) {
+    if (appState.manualMode) {
+        showToast("Exit layout mode to play moves.");
+        return;
+    }
+    const move = appState.moveIndex.get(moveId);
+    if (!move) {
+        showToast("Unknown move.");
+        return;
+    }
+    if (!move.available) {
+        showToast("This move is missing in the recorded dataset.");
+        return;
+    }
+    if (appState.busy) {
+        showToast("Reachy Mini is already playing a move.");
+        return;
+    }
+    try {
+        const res = await fetchJson("/api/play", { method: "POST", body: { move_name: moveId } });
+        if (res.accepted) {
+            setBusyState(true, res.queued_move);
+            showToast(`Playing ${formatMoveName(res.queued_move)}`);
+        } else {
+            showToast("Reachy Mini is still busy with the previous move.");
+        }
+    } 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 {
+        await loadAndRender();
+        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.wheels.emotion && !appState.wheels.behavior) {
+        return;
+    }
+    renderAllWheels();
+    setBusyState(appState.busy, appState.currentMove);
+});
+
+layoutModeBtn?.addEventListener("click", () => toggleManualMode());
+layoutSaveBtn?.addEventListener("click", () => {
+    if (!appState.positionsDirty) {
+        showToast("Adjust positions before saving.");
+        return;
+    }
+    saveLayout();
+});
+layoutResetBtn?.addEventListener("click", () => resetLayout());

build/lib/emotions/static/style.css

@@ -0,0 +1,481 @@
+: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(760px, 95vw);
+    --emotion-node-size: 96px;
+    --behavior-node-size: 96px;
+    --wheel-gap: 96px;
+    --wheel-padding-top: 16px;
+    --wheel-padding-bottom: 64px;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    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.08), transparent 55%),
+        radial-gradient(circle at 80% -20%, rgba(155, 132, 255, 0.18), transparent 45%),
+        conic-gradient(from 90deg at 50% 0%, rgba(255, 149, 128, 0.15), rgba(103, 126, 247, 0.15), rgba(255, 149, 128, 0.15)),
+        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.12), transparent 45%),
+        radial-gradient(circle at 80% 0%, rgba(255, 195, 113, 0.25), transparent 40%);
+    filter: blur(50px);
+    z-index: 0;
+    pointer-events: none;
+}
+
+.background-halo::after {
+    content: "";
+    position: absolute;
+    inset: -10%;
+    background: conic-gradient(from -90deg, rgba(252, 214, 112, 0.2), rgba(255, 111, 145, 0.15), rgba(98, 178, 255, 0.2), rgba(252, 214, 112, 0.2));
+    mix-blend-mode: screen;
+    opacity: 0.4;
+}
+
+.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;
+}
+
+.layout-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 32px;
+}
+
+.control-btn {
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: rgba(0, 0, 0, 0.35);
+    color: var(--text-strong);
+    padding: 10px 18px;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
+}
+
+.control-btn.secondary {
+    border-color: rgba(255, 255, 255, 0.08);
+    color: var(--text-muted);
+}
+
+.control-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.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);
+}
+
+.wheel-stage {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wheel-gap);
+    align-items: center;
+    padding: var(--wheel-padding-top) 0 var(--wheel-padding-bottom);
+}
+
+.wheel-block {
+    width: 100%;
+    max-width: 900px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    text-align: center;
+}
+
+.wheel-header h2 {
+    margin: 0;
+    font-weight: 600;
+    letter-spacing: 0.35em;
+    text-transform: uppercase;
+}
+
+.wheel {
+    width: min(70vw, 520px);
+    height: min(70vw, 520px);
+    position: relative;
+    margin: 32px auto 0;
+    overflow: visible;
+    isolation: isolate;
+}
+
+.ring {
+    display: none;
+}
+
+.wheel::before {
+    content: "";
+    position: absolute;
+    inset: -55%;
+    border-radius: 50%;
+    background: var(--wheel-gradient, rgba(255, 255, 255, 0.08));
+    opacity: 0.7;
+    filter: blur(55px);
+    z-index: 0;
+    pointer-events: none;
+    mix-blend-mode: screen;
+    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 40%, rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0.4) 80%, transparent 95%);
+}
+
+.wheel::after {
+    content: "";
+    position: absolute;
+    inset: -45%;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(7, 11, 22, 0.25), transparent 70%);
+    z-index: 0;
+    pointer-events: none;
+}
+
+.wheel-center {
+    position: absolute;
+    inset: 35%;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(7, 11, 22, 0.8);
+    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);
+}
+
+.wheel::before,
+.wheel::after,
+.wheel-center,
+.sector-label-layer .sector-label,
+.wheel-node {
+    transition: opacity 0.4s ease, filter 0.4s ease;
+}
+
+.sector-label-layer {
+    pointer-events: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0;
+    height: 0;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
+
+
+.sector-label-layer .sector-label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 1.2rem;
+    letter-spacing: 0.55em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+    text-shadow: 0 6px 16px rgba(0, 0, 0, 0.85);
+    white-space: nowrap;
+    transform-origin: center;
+    text-align: center;
+}
+
+.sector-label-layer .sector-label[data-side="left"] {
+    text-align: right;
+}
+
+.wheel-node {
+    position: absolute;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    color: var(--text-strong);
+    padding: 16px 10px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    cursor: pointer;
+    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
+    background: rgba(7, 11, 22, 0.85);
+    z-index: 1;
+}
+
+.manual-mode .wheel-node {
+    cursor: grab;
+}
+
+.manual-mode .wheel-node.dragging {
+    cursor: grabbing;
+    opacity: 0.85;
+}
+
+.wheel-node.emotion-node {
+    width: var(--emotion-node-size);
+    height: var(--emotion-node-size);
+    font-size: 0.95rem;
+}
+
+.wheel-node.behavior-node {
+    width: var(--behavior-node-size);
+    height: var(--behavior-node-size);
+    font-size: 0.85rem;
+}
+
+.wheel-node:hover {
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+}
+
+.wheel-node.highlight {
+    box-shadow: 0 0 35px rgba(255, 255, 255, 0.25);
+}
+
+.wheel-node.busy {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.wheel-node.unavailable {
+    opacity: 0.45;
+    border-style: dashed;
+}
+
+.node-title {
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.node-meta {
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+}
+
+.node-meta:empty {
+    display: none;
+}
+
+.coherence-panel {
+    margin: 180px auto 0;
+    padding: 16px 0;
+    max-width: 720px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.coherence-panel strong {
+    display: block;
+    color: var(--text-soft);
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+}
+
+.coherence-panel.clean {
+    border-color: rgba(122, 201, 136, 0.35);
+}
+
+.issue-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}
+
+.issue-grid article {
+    padding: 12px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.issue-grid h4 {
+    margin: 0 0 6px;
+    font-size: 0.85rem;
+    color: var(--text-strong);
+}
+
+.issue-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.85rem;
+}
+
+.issue-list span {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.issue-list small {
+    color: var(--text-muted);
+}
+
+.issue-list .more {
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+.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 .muted {
+    display: block;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    letter-spacing: 0.08em;
+    text-transform: none;
+}
+
+.tooltip p {
+    margin: 0;
+    color: var(--text-soft);
+    line-height: 1.4;
+}
+
+.tooltip .warning {
+    color: #f9a826;
+    font-weight: 600;
+    margin-left: 6px;
+}
+
+.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: 640px) {
+    .card {
+        padding: 24px;
+    }
+
+    .hero-status {
+        flex-direction: column;
+    }
+
+    .wheel-center {
+        font-size: 0.75rem;
+        letter-spacing: 0.2em;
+    }
+}

build/lib/ressources/emotions_overview.py

@@ -0,0 +1,19 @@
+"""Print the metadata of each recorded emotion from the Reachy Mini dataset."""
+
+from reachy_mini.motion.recorded_move import RecordedMoves
+
+EMOTIONS_DATASET = "pollen-robotics/reachy-mini-emotions-library"
+
+
+def main() -> None:
+    """Display name, description, and duration for each recorded emotion."""
+    recorded_emotions = RecordedMoves(EMOTIONS_DATASET)
+
+    for move_name in sorted(recorded_emotions.list_moves()):
+        move = recorded_emotions.get(move_name)
+        duration = move.duration  # seconds, already included in the dataset
+        print(f"{move_name}: {move.description} (duration: {duration:.2f}s)")
+
+
+if __name__ == "__main__":
+    main()

build/lib/ressources/recorded_moves_example.py

@@ -0,0 +1,47 @@
+"""Demonstrate and play all available moves from a dataset for Reachy Mini.
+
+Run :
+
+python3 recorded_moves_example.py -l [dance, emotions]
+"""
+
+import argparse
+
+from reachy_mini import ReachyMini
+from reachy_mini.motion.recorded_move import RecordedMove, RecordedMoves
+
+
+def main(dataset_path: str) -> None:
+    """Connect to Reachy and run the main demonstration loop."""
+    recorded_moves = RecordedMoves(dataset_path)
+
+    print("Connecting to Reachy Mini...")
+    with ReachyMini(use_sim=False, media_backend="no_media") as reachy:
+        print("Connection successful! Starting dance sequence...\n")
+        try:
+            while True:
+                for move_name in recorded_moves.list_moves():
+                    move: RecordedMove = recorded_moves.get(move_name)
+                    print(f"Playing move: {move_name}: {move.description}\n")
+                    # print(f"params: {move.move_params}")
+                    reachy.play_move(move, initial_goto_duration=1.0)
+
+        except KeyboardInterrupt:
+            print("\n Sequence interrupted by user. Shutting down.")
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(
+        description="Demonstrate and play all available dance moves for Reachy Mini."
+    )
+    parser.add_argument(
+        "-l", "--library", type=str, default="dance", choices=["dance", "emotions"]
+    )
+    args = parser.parse_args()
+
+    dataset_path = (
+        "pollen-robotics/reachy-mini-dances-library"
+        if args.library == "dance"
+        else "pollen-robotics/reachy-mini-emotions-library"
+    )
+    main(dataset_path)

index.html

@@ -2,216 +2,273 @@
 <html lang="en">
 
 <head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<title>Reachy Mini • Emotions Wheel</title>
-	<link rel="stylesheet" href="style.css" />
+    <meta charset="utf-8" />
+    <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="bg-gradient"></div>
-	<header class="hero">
-		<div class="hero-content">
-			<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 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>
-	</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>How do you read the wheels?</h2>
-					<p>Outer (emotions) shows the macro feeling, inner (behaviors) lists each recorded move.
-						Radial distance encodes intensity, and colored crescents show short/medium/long durations.</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>
-
-	<footer class="footer">
-		<p>Built with ❤️ by Pollen Robotics • Browse more apps on Hugging Face Spaces.</p>
-	</footer>
-
-	<script>
-		function getCurrentSpaceUrl() {
-			const currentUrl = window.location.href;
-			return currentUrl.split('?')[0].replace(/\/$/, '');
-		}
-
-		function parseTomlProjectName(tomlContent) {
-			try {
-				const lines = tomlContent.split('\n');
-				let inProjectSection = false;
-
-				for (const line of lines) {
-					const trimmedLine = line.trim();
-
-					if (trimmedLine === '[project]') {
-						inProjectSection = true;
-						continue;
-					}
-
-					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
-						inProjectSection = false;
-						continue;
-					}
-
-					if (inProjectSection && trimmedLine.startsWith('name')) {
-						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
-						if (match) {
-							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';
-			}
-		}
-
-		async function getAppNameFromCurrentSpace() {
-			try {
-				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);
-				const url = getCurrentSpaceUrl();
-				const parts = url.split('/');
-				const spaceName = parts[parts.length - 1];
-				return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
-			}
-		}
-
-		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 installBtn = document.getElementById('installBtn');
-
-			if (!dashboardUrl) {
-				showStatus('error', 'Please enter your Reachy dashboard URL');
-				return;
-			}
-
-			try {
-				installBtn.disabled = true;
-				installBtn.textContent = 'Installing…';
-				showStatus('loading', 'Connecting to your Reachy dashboard…');
-
-				const testResponse = await fetch(`${dashboardUrl}/api/status`, {
-					method: 'GET',
-					mode: 'cors',
-				});
-
-				if (!testResponse.ok) {
-					throw new Error('Cannot connect to dashboard. Check the URL and make sure the dashboard is running.');
-				}
-
-				showStatus('loading', 'Reading app configuration…');
-
-				const appName = await getAppNameFromCurrentSpace();
-				const repoUrl = getCurrentSpaceUrl();
-
-				showStatus('loading', `Starting installation of "${appName}"…`);
-
-				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.`);
-				} else {
-					throw new Error(result.detail || 'Installation failed');
-				}
-
-			} catch (error) {
-				console.error('Installation error:', error);
-				showStatus('error', `❌ ${error.message}`);
-			} finally {
-				installBtn.disabled = false;
-				installBtn.textContent = 'Install Emotions Wheel';
-			}
-		}
-
-		document.getElementById('installBtn').addEventListener('click', installToReachy);
-	</script>
+    <div class="bg-gradient"></div>
+    <main class="page">
+        <header class="hero">
+            <div class="hero-text">
+                <p class="eyebrow">Reachy Mini App</p>
+                <h1>Emotions Wheel</h1>
+                <p class="lede">
+                    The landing page now mirrors the production UI: two synchronized rings (families outside, behaviors inside),
+                    tooltips straight from the dataset metadata, manual layout controls, and coherence diagnostics so demos feel
+                    the same as the robot runtime.
+                </p>
+                <div class="hero-meta">
+                    <span class="chip">Linked wheels</span>
+                    <span class="chip">Manual layout mode</span>
+                    <span class="chip">Dataset-aware tooltips</span>
+                </div>
+                <div class="hero-cta">
+                    <div>
+                        <p class="label">Dataset</p>
+                        <p class="value"><a href="https://huggingface.co/datasets/pollen-robotics/reachy-mini-emotions-library">pollen-robotics/reachy-mini-emotions-library</a></p>
+                    </div>
+                    <div>
+                        <p class="label">Behaviors catalogued</p>
+                        <p class="value">138 motions · 8 families</p>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-preview">
+                <div class="preview-wheel">
+                    <div class="ring outer"></div>
+                    <div class="ring inner"></div>
+                    <div class="preview-label">
+                        <span>emotion</span>
+                        <span>behavior</span>
+                    </div>
+                </div>
+                <div class="preview-controls">
+                    <span class="chip accent">Manual layout</span>
+                    <span class="chip soft">Save layout</span>
+                    <span class="chip success">Reachy idle</span>
+                </div>
+            </div>
+        </header>
+
+        <section class="feature-grid">
+            <article class="feature-card">
+                <h2>Linked wheels + live tooltips</h2>
+                <p>
+                    Hover the outer emotion ring to highlight its behaviors, then click a behavior badge to play the move on
+                    Reachy Mini. Tooltips quote the dataset entry name, intensity, and duration so the wheel always stays in
+                    sync with the YAML catalog.
+                </p>
+            </article>
+            <article class="feature-card">
+                <h2>Manual layout mode</h2>
+                <p>
+                    Tapping <em>Manual layout</em> displays draggable handles for every move. Drop badges anywhere on the wheel,
+                    press save, and the layout persists to disk so your museum demos, lessons, and videos stay consistent.
+                </p>
+            </article>
+            <article class="feature-card">
+                <h2>Duration & intensity cues</h2>
+                <p>
+                    Distance from the center encodes emotion intensity, while the colored crescents show the duration bucket.
+                    It is the same visual legend the runtime uses, so observers instantly grasp what Reachy is about to do.
+                </p>
+            </article>
+            <article class="feature-card">
+                <h2>Sync diagnostics panel</h2>
+                <p>
+                    A small panel below the wheels compares the dataset, YAML spec, and recorded files. If something drifts,
+                    the warning badge catches it before a visitor clicks a missing behavior.
+                </p>
+            </article>
+        </section>
+
+        <section class="details-grid">
+            <article class="details-card">
+                <h3>Color language</h3>
+                <p>Plutchik-inspired colors span the outer wheel. Labels stay inside tooltips so the UI remains minimal.</p>
+                <ul class="palette">
+                    <li><span class="swatch" style="--swatch:#FF9F66"></span><div><strong>Joy</strong><small>warm coral</small></div></li>
+                    <li><span class="swatch" style="--swatch:#5CC8D7"></span><div><strong>Trust</strong><small>lagoon teal</small></div></li>
+                    <li><span class="swatch" style="--swatch:#4D7C8A"></span><div><strong>Fear</strong><small>noctilucent blue</small></div></li>
+                    <li><span class="swatch" style="--swatch:#C084FC"></span><div><strong>Surprise</strong><small>lilac flare</small></div></li>
+                    <li><span class="swatch" style="--swatch:#4F6DF5"></span><div><strong>Sadness</strong><small>dusk indigo</small></div></li>
+                    <li><span class="swatch" style="--swatch:#58B368"></span><div><strong>Disgust</strong><small>mossy green</small></div></li>
+                    <li><span class="swatch" style="--swatch:#E94F37"></span><div><strong>Anger</strong><small>ember red</small></div></li>
+                    <li><span class="swatch" style="--swatch:#FFB347"></span><div><strong>Anticipation</strong><small>amber sunrise</small></div></li>
+                </ul>
+            </article>
+            <article class="details-card">
+                <h3>Duration crescents</h3>
+                <p>Badges keep the same three crescents the runtime overlays on every node.</p>
+                <ul class="duration-list">
+                    <li><span class="swatch small" style="--swatch:#73E0A9"></span><div><strong>Seafoam</strong><small>short · ≤ 4 seconds</small></div></li>
+                    <li><span class="swatch small" style="--swatch:#FFC857"></span><div><strong>Amber</strong><small>medium · 4–8 seconds</small></div></li>
+                    <li><span class="swatch small" style="--swatch:#FF6B6B"></span><div><strong>Rose</strong><small>long · > 8 seconds</small></div></li>
+                </ul>
+            </article>
+            <article class="details-card">
+                <h3>Operator niceties</h3>
+                <ul class="feature-list">
+                    <li>Status chip locks clicks while Reachy finishes a previous behavior.</li>
+                    <li>Toast + tooltip copy include the raw move name so debugging stays easy.</li>
+                    <li>Aside from layout saves, everything runs client-side, so the wheel feels instant.</li>
+                </ul>
+            </article>
+        </section>
+
+        <section class="install-card">
+            <div>
+                <h2>Install on your Reachy Mini</h2>
+                <p>
+                    Point the installer at the dashboard that runs on your robot (default is
+                    <code>http://localhost:8000</code>). We ping its health endpoint first, then call <code>/api/install</code>
+                    with the Space URL so the dashboard clones this repository.
+                </p>
+            </div>
+            <div class="install-form">
+                <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>
+
+    <footer class="footer">
+        <p>Built with ❤️ by Pollen Robotics · Browse more Reachy Mini apps on Hugging Face Spaces.</p>
+    </footer>
+
+    <script>
+        function getCurrentSpaceUrl() {
+            const currentUrl = window.location.href;
+            return currentUrl.split('?')[0].replace(/\/$/, '');
+        }
+
+        function parseTomlProjectName(tomlContent) {
+            try {
+                const lines = tomlContent.split('\n');
+                let inProjectSection = false;
+
+                for (const line of lines) {
+                    const trimmedLine = line.trim();
+
+                    if (trimmedLine === '[project]') {
+                        inProjectSection = true;
+                        continue;
+                    }
+
+                    if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
+                        inProjectSection = false;
+                        continue;
+                    }
+
+                    if (inProjectSection && trimmedLine.startsWith('name')) {
+                        const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
+                        if (match) {
+                            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';
+            }
+        }
+
+        async function getAppNameFromCurrentSpace() {
+            try {
+                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);
+                const url = getCurrentSpaceUrl();
+                const parts = url.split('/');
+                const spaceName = parts[parts.length - 1];
+                return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+            }
+        }
+
+        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 installBtn = document.getElementById('installBtn');
+
+            if (!dashboardUrl) {
+                showStatus('error', 'Please enter your Reachy dashboard URL');
+                return;
+            }
+
+            try {
+                installBtn.disabled = true;
+                installBtn.textContent = 'Installing…';
+                showStatus('loading', 'Connecting to your Reachy dashboard…');
+
+                const testResponse = await fetch(`${dashboardUrl}/api/status`, {
+                    method: 'GET',
+                    mode: 'cors',
+                });
+
+                if (!testResponse.ok) {
+                    throw new Error('Cannot connect to dashboard. Check the URL and make sure the dashboard is running.');
+                }
+
+                showStatus('loading', 'Reading app configuration…');
+
+                const appName = await getAppNameFromCurrentSpace();
+                const repoUrl = getCurrentSpaceUrl();
+
+                showStatus('loading', `Starting installation of "${appName}"…`);
+
+                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.`);
+                } else {
+                    throw new Error(result.detail || 'Installation failed');
+                }
+
+            } catch (error) {
+                console.error('Installation error:', error);
+                showStatus('error', `❌ ${error.message}`);
+            } finally {
+                installBtn.disabled = false;
+                installBtn.textContent = 'Install Emotions Wheel';
+            }
+        }
+
+        document.getElementById('installBtn').addEventListener('click', installToReachy);
+    </script>
 </body>
 
 </html>

style.css

@@ -1,273 +1,409 @@
 :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);
+    --bg: #030711;
+    --surface: rgba(9, 14, 29, 0.88);
+    --surface-soft: rgba(15, 23, 42, 0.72);
+    --border: rgba(255, 255, 255, 0.08);
+    --text: #f4f6ff;
+    --muted: rgba(244, 246, 255, 0.72);
+    --accent: #c084fc;
+    --accent-2: #64d6ff;
+    --success: #7bd389;
+    --danger: #ff6b6b;
+    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;
+    box-sizing: border-box;
 }
 
 body {
-	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);
+    margin: 0;
+    min-height: 100vh;
+    background: radial-gradient(circle at 20% -10%, rgba(255, 255, 255, 0.12), transparent 50%),
+        radial-gradient(circle at 80% 0%, rgba(192, 132, 252, 0.2), transparent 45%),
+        radial-gradient(circle at 0% 60%, rgba(100, 214, 255, 0.12), transparent 40%),
+        var(--bg);
+    color: var(--text);
 }
 
 .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;
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(circle at 20% 20%, rgba(192, 132, 252, 0.25), transparent 50%),
+        radial-gradient(circle at 80% 30%, rgba(94, 234, 212, 0.12), transparent 45%);
+    filter: blur(80px);
+    opacity: 0.7;
+    pointer-events: none;
+    z-index: 0;
 }
 
-.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;
+a {
+    color: var(--accent-2);
 }
 
-.hero-content h1 {
-	font-size: clamp(2.8rem, 6vw, 4rem);
-	margin-bottom: 12px;
+a:hover {
+    color: var(--accent);
 }
 
-.hero-content p {
-	color: var(--text-soft);
-	line-height: 1.6;
+.page {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 96px 24px 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
 }
 
-.eyebrow {
-	text-transform: uppercase;
-	letter-spacing: 0.3em;
-	color: rgba(255, 255, 255, 0.5);
-	font-size: 0.85rem;
+.hero {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 48px;
+    align-items: center;
 }
 
-.hero-tags {
-	margin-top: 16px;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 10px;
+.hero-text h1 {
+    font-size: clamp(2.8rem, 5vw, 3.8rem);
+    margin: 0.1em 0 0.4em;
 }
 
-.tag {
-	padding: 6px 16px;
-	border-radius: 999px;
-	background: rgba(255, 255, 255, 0.08);
-	font-size: 0.9rem;
+.hero .lede {
+    color: var(--muted);
+    line-height: 1.65;
+    max-width: 52ch;
 }
 
-.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;
+.eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.6);
 }
 
-.wheel-ghost {
-	width: 280px;
-	height: 280px;
-	margin: 0 auto 16px;
-	border-radius: 50%;
-	border: 1px dashed rgba(255, 255, 255, 0.2);
-	position: relative;
+.hero-meta {
+    margin: 20px 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
-.spoke {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 70%;
-	height: 2px;
-	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-	transform-origin: left center;
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text);
 }
 
-.spoke-2 {
-	transform: rotate(45deg);
+.chip.accent {
+    background: rgba(192, 132, 252, 0.25);
+    color: #f5eeff;
 }
 
-.spoke-3 {
-	transform: rotate(90deg);
+.chip.soft {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--muted);
 }
 
-.spoke-4 {
-	transform: rotate(135deg);
+.chip.success {
+    background: rgba(123, 211, 137, 0.2);
+    color: var(--success);
 }
 
-.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;
+.hero-cta {
+    margin-top: 24px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
 }
 
-.inner-ghost .dot {
-	width: 16px;
-	height: 16px;
-	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.4);
+.hero-cta .label {
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: 0.72rem;
+    color: var(--muted);
+    margin: 0 0 4px;
 }
 
-.preview-caption {
-	color: var(--text-soft);
-	margin: 0;
-	font-size: 0.9rem;
+.hero-cta .value {
+    margin: 0;
+    font-size: 1.05rem;
+    color: var(--text);
 }
 
-.content {
-	position: relative;
-	z-index: 1;
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0 24px 96px;
-	display: flex;
-	flex-direction: column;
-	gap: 32px;
+.hero-cta .value a {
+    text-decoration: none;
+}
+
+.hero-preview {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 32px;
+    padding: 32px 32px 26px;
+    text-align: center;
+    box-shadow: 0 40px 80px rgba(2, 6, 23, 0.6);
+}
+
+.preview-wheel {
+    position: relative;
+    width: min(320px, 70vw);
+    height: min(320px, 70vw);
+    margin: 0 auto 24px;
+    border-radius: 50%;
+    background: conic-gradient(#ff9f66 0 45deg, #5cc8d7 45deg 90deg, #4d7c8a 90deg 135deg,
+            #c084fc 135deg 180deg, #4f6df5 180deg 225deg, #58b368 225deg 270deg,
+            #e94f37 270deg 315deg, #ffb347 315deg 360deg);
+    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
+}
+
+.preview-wheel .ring {
+    position: absolute;
+    inset: 14px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+}
+
+.preview-wheel .ring.inner {
+    inset: 25%;
+    border-color: rgba(244, 246, 255, 0.55);
+}
+
+.preview-label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.preview-controls {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
 .feature-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-	gap: 16px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 18px;
 }
 
 .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);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    padding: 28px;
+    line-height: 1.6;
+    box-shadow: 0 25px 60px rgba(3, 7, 18, 0.55);
 }
 
 .feature-card h2 {
-	margin-top: 0;
-	font-size: 1.2rem;
+    margin: 0 0 0.8em;
+    font-size: 1.3rem;
 }
 
 .feature-card p {
-	color: var(--text-soft);
+    margin: 0;
+    color: var(--muted);
+}
+
+.feature-card em {
+    color: var(--accent);
+    font-style: normal;
 }
 
-.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);
+.details-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 18px;
 }
 
-.plan-card h2 {
-	margin: 0 0 12px;
+.details-card {
+    background: var(--surface-soft);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    padding: 28px;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
 }
 
-.plan-card p {
-	color: var(--text-soft);
-	line-height: 1.6;
+.details-card h3 {
+    margin: 0 0 0.6em;
+    font-size: 1.1rem;
+}
+
+.details-card p {
+    color: var(--muted);
+    margin-top: 0;
+}
+
+.palette,
+.duration-list,
+.feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 16px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.palette li,
+.duration-list li {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 12px;
+    align-items: center;
+}
+
+.palette strong,
+.duration-list strong {
+    display: block;
+    font-size: 0.95rem;
+}
+
+.palette small,
+.duration-list small {
+    color: var(--muted);
+}
+
+.swatch {
+    width: 26px;
+    height: 26px;
+    border-radius: 8px;
+    background: var(--swatch, #fff);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.swatch.small {
+    border-radius: 999px;
+}
+
+.feature-list li {
+    position: relative;
+    padding-left: 18px;
+    color: var(--muted);
+}
+
+.feature-list li::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: var(--accent-2);
+}
+
+.install-card {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 32px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 32px;
+    padding: 36px;
+    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
+}
+
+.install-card h2 {
+    margin-top: 0;
+}
+
+.install-card p {
+    color: var(--muted);
+    line-height: 1.6;
+}
+
+.install-form {
+    display: flex;
+    flex-direction: column;
 }
 
 label {
-	display: flex;
-	flex-direction: column;
-	font-size: 0.9rem;
-	color: var(--text-soft);
-	margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: 0.72rem;
+    color: var(--muted);
+    margin-bottom: 6px;
 }
 
 input[type="url"] {
-	width: 100%;
-	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;
+    width: 100%;
+    padding: 14px 18px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(0, 0, 0, 0.35);
+    color: var(--text);
+    font-size: 1rem;
+    margin-bottom: 16px;
 }
 
 .install-btn {
-	display: inline-flex;
-	align-items: center;
-	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;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 22px;
+    border-radius: 999px;
+    border: none;
+    background: linear-gradient(135deg, var(--accent), var(--accent-2));
+    color: #0b0415;
+    font-weight: 600;
+    cursor: pointer;
 }
 
 .install-btn:disabled {
-	opacity: 0.6;
-	cursor: not-allowed;
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
 .install-status {
-	margin-top: 10px;
-	min-height: 20px;
-	font-size: 0.9rem;
-	color: var(--text-soft);
+    min-height: 22px;
+    margin-top: 10px;
+    font-size: 0.9rem;
+    color: var(--muted);
 }
 
 .install-status.success {
-	color: #7bd389;
+    color: var(--success);
 }
 
 .install-status.error {
-	color: #ff6b6b;
+    color: var(--danger);
 }
 
 .install-status.loading {
-	color: var(--accent-soft);
+    color: var(--accent-2);
 }
 
 .footer {
-	text-align: center;
-	color: var(--text-soft);
-	padding: 24px;
-	font-size: 0.9rem;
+    text-align: center;
+    color: var(--muted);
+    font-size: 0.9rem;
+    padding: 32px 24px 64px;
 }
 
 @media (max-width: 600px) {
-	.hero {
-		padding-top: 64px;
-	}
+    .page {
+        padding-top: 72px;
+    }
+
+    .hero-preview {
+        padding: 24px;
+    }
 
-	.plan-card {
-		padding: 24px;
-	}
+    .install-card {
+        padding: 28px;
+    }
 }