v0.8.0

- Reachy Eyes: drive the community LED eyes module from the dashboard, its colors and effects, mirrored live on the 3D twin.
- Movement sequences: record keyframes, replay them, and export or import your own.
- A 10-band graphic equalizer to shape the robot's sound.
- One shared camera stream feeds the picture, the mic and Listen, and it survives power off and on.
- 12 new skins (36 in all), and picking one from the camera view applies it right away.
- A cleaner simulator: tidy wake and fold, a LIVE / SIM badge, and no startup flicker.
- Install straight on the robot with setup.sh for a dashboard that starts at boot, plus a community Eyes showcase on the landing.

Source: ab0191433f09ede52e783d9933dad8f2061ff9ee
Auto-sync: reachy_web

.gitignore

@@ -14,3 +14,6 @@ node_modules/
 
 # last daemon host mDNS found, so a relaunch aims there first
 .reachy-web-daemon-host
+
+# run.sh session logs (on-disk, never shipped)
+logs/

README.md

@@ -14,8 +14,13 @@ tags:
   - reachy_mini_lite
   - dashboard
   - web_dashboard
+  - web_app
   - robot_dashboard
+  - robot_tools
+  - robot_control
   - digital_twin
+  - tableau_de_bord
+  - application_web
   - reachy_mirror
   - reachy_eyes
   - domotick
@@ -57,7 +62,7 @@ The dashboard only needs to reach the daemon over HTTP, so it runs just as well
 git clone https://huggingface.co/spaces/Domotick/reachy_web
 cd reachy_web
 
-./scripts/run.sh
+./run.sh
 ```
 
 The script builds its own virtualenv, installs the app, then **scans the network** (mDNS) for a Reachy Mini and points the dashboard at it. Open <http://127.0.0.1:8042>.
@@ -65,7 +70,7 @@ The script builds its own virtualenv, installs the app, then **scans the network
 Know the address already, or running a daemon locally (`reachy-mini-daemon --sim` works too)? Skip the scan:
 
 ```bash
-DAEMON_HOST=192.168.1.42:8000 ./scripts/run.sh
+DAEMON_HOST=192.168.1.42:8000 ./run.sh
 ```
 
 If port 8042 is taken, the desktop app keeps it for the apps it hosts, `run.sh` falls back to 8043 and says so.

VERSION

@@ -1 +1 @@
-0.7.0
+0.8.0

changelog.json

@@ -1,4 +1,82 @@
 [
+  {
+    "version": "0.8.0",
+    "date": "2026-07-20",
+    "changes": {
+      "en": [
+        "Reachy Eyes: drive the community LED eyes module from the dashboard, its colors and effects, mirrored live on the 3D twin.",
+        "Movement sequences: record keyframes, replay them, and export or import your own.",
+        "A 10-band graphic equalizer to shape the robot's sound.",
+        "One shared camera stream feeds the picture, the mic and Listen, and it survives power off and on.",
+        "12 new skins (36 in all), and picking one from the camera view applies it right away.",
+        "A cleaner simulator: tidy wake and fold, a LIVE / SIM badge, and no startup flicker.",
+        "Install straight on the robot with setup.sh for a dashboard that starts at boot, plus a community Eyes showcase on the landing."
+      ],
+      "fr": [
+        "Reachy Eyes : pilotez le module LED communautaire depuis le tableau de bord, ses couleurs et ses effets, reflétés en direct sur le jumeau 3D.",
+        "Séquences de mouvement : enregistrez des images clés, rejouez-les, et exportez ou importez les vôtres.",
+        "Un égaliseur graphique à 10 bandes pour façonner le son du robot.",
+        "Un seul flux caméra partagé alimente l'image, le micro et Listen, et il survit à l'extinction et au rallumage.",
+        "12 nouveaux skins (36 en tout), et en choisir un depuis la vue caméra l'applique aussitôt.",
+        "Un simulateur plus propre : réveil et repli soignés, un badge LIVE / SIM, et plus aucun scintillement au démarrage.",
+        "Installez directement sur le robot avec setup.sh pour un tableau de bord qui se lance au démarrage, plus une vitrine Eyes communautaire sur la page d'accueil."
+      ],
+      "es": [
+        "Reachy Eyes: controla el módulo de ojos LED de la comunidad desde el panel, sus colores y efectos, reflejados en vivo en el gemelo 3D.",
+        "Secuencias de movimiento: graba fotogramas clave, reprodúcelos y exporta o importa los tuyos.",
+        "Un ecualizador gráfico de 10 bandas para dar forma al sonido del robot.",
+        "Una única transmisión de cámara compartida alimenta la imagen, el micrófono y Listen, y sobrevive al apagado y encendido.",
+        "12 nuevos skins (36 en total), y elegir uno desde la vista de cámara lo aplica al instante.",
+        "Un simulador más limpio: despertar y plegado ordenados, una insignia LIVE / SIM y sin parpadeo al arrancar.",
+        "Instala directamente en el robot con setup.sh para un panel que arranca al iniciar, más una vitrina Eyes de la comunidad en la página de inicio."
+      ],
+      "de": [
+        "Reachy Eyes: Steuere das LED-Augenmodul der Community vom Dashboard aus, seine Farben und Effekte, live gespiegelt auf dem 3D-Zwilling.",
+        "Bewegungssequenzen: Zeichne Keyframes auf, spiele sie ab und exportiere oder importiere eigene.",
+        "Ein grafischer 10-Band-Equalizer, um den Klang des Roboters zu formen.",
+        "Ein gemeinsamer Kamerastream versorgt Bild, Mikrofon und Listen und übersteht das Aus- und Einschalten.",
+        "12 neue Skins (36 insgesamt), und die Auswahl aus der Kameraansicht übernimmt ihn sofort.",
+        "Ein aufgeräumterer Simulator: sauberes Aufwecken und Einklappen, ein LIVE / SIM Badge und kein Flackern beim Start.",
+        "Installiere direkt auf dem Roboter mit setup.sh für ein Dashboard, das beim Systemstart läuft, plus eine Community-Eyes-Vitrine auf der Landingpage."
+      ],
+      "it": [
+        "Reachy Eyes: controlla il modulo occhi LED della community dal pannello, i suoi colori ed effetti, riflessi dal vivo sul gemello 3D.",
+        "Sequenze di movimento: registra i fotogrammi chiave, riproducili ed esporta o importa i tuoi.",
+        "Un equalizzatore grafico a 10 bande per modellare il suono del robot.",
+        "Un unico flusso della camera condiviso alimenta l'immagine, il microfono e Listen, e sopravvive allo spegnimento e alla riaccensione.",
+        "12 nuovi skin (36 in tutto), e sceglierne uno dalla vista camera lo applica subito.",
+        "Un simulatore più pulito: risveglio e ripiegamento ordinati, un badge LIVE / SIM e nessuno sfarfallio all'avvio.",
+        "Installa direttamente sul robot con setup.sh per un pannello che parte all'avvio, più una vetrina Eyes della community sulla landing page."
+      ],
+      "pt": [
+        "Reachy Eyes: controle o módulo de olhos LED da comunidade pelo painel, suas cores e efeitos, espelhados ao vivo no gêmeo 3D.",
+        "Sequências de movimento: grave keyframes, reproduza-os e exporte ou importe os seus.",
+        "Um equalizador gráfico de 10 bandas para moldar o som do robô.",
+        "Um único fluxo de câmera compartilhado alimenta a imagem, o microfone e o Listen, e sobrevive ao desligar e ligar.",
+        "12 novos skins (36 no total), e escolher um pela visualização da câmera o aplica na hora.",
+        "Um simulador mais limpo: despertar e recolher organizados, um selo LIVE / SIM e sem tremulação na inicialização.",
+        "Instale direto no robô com setup.sh para um painel que inicia no boot, mais uma vitrine Eyes da comunidade na página inicial."
+      ],
+      "ja": [
+        "Reachy Eyes: コミュニティのLEDアイモジュールをダッシュボードから操作。色やエフェクトを3Dツインにリアルタイムで反映します。",
+        "動作シーケンス: キーフレームを記録して再生し、自作のものをエクスポートまたはインポートできます。",
+        "ロボットのサウンドを調整できる10バンドのグラフィックイコライザー。",
+        "共有された1つのカメラストリームが映像、マイク、Listenに供給され、電源のオフとオンをまたいで維持されます。",
+        "新しいスキンが12種類（全36種類）。カメラビューから選ぶとすぐに適用されます。",
+        "よりすっきりしたシミュレーター: 起動と折りたたみが整い、LIVE / SIMバッジを追加、起動時のちらつきもなし。",
+        "setup.sh でロボットに直接インストールすれば、起動時にダッシュボードが立ち上がります。ランディングページにはコミュニティのEyesショーケースも追加。"
+      ],
+      "ar": [
+        "Reachy Eyes: تحكّم في وحدة عيون LED المجتمعية من لوحة التحكم، بألوانها وتأثيراتها، مع عكسها مباشرة على التوأم 3D.",
+        "تسلسلات الحركة: سجّل الإطارات المفتاحية وأعد تشغيلها، وصدّر أو استورد ما تصنعه بنفسك.",
+        "معادل صوتي بياني من 10 نطاقات لتشكيل صوت الروبوت.",
+        "بث كاميرا واحد مشترك يغذّي الصورة والميكروفون وListen، ويصمد عند إيقاف التشغيل وتشغيله من جديد.",
+        "12 مظهرًا جديدًا (36 في المجمل)، واختيار واحد من عرض الكاميرا يطبّقه على الفور.",
+        "محاكٍ أكثر سلاسة: إيقاظ وطي مرتّبان، وشارة LIVE / SIM، وبلا وميض عند بدء التشغيل.",
+        "ثبّت مباشرة على الروبوت باستخدام setup.sh للحصول على لوحة تحكم تبدأ عند الإقلاع، إضافةً إلى واجهة عرض Eyes مجتمعية في الصفحة الرئيسية."
+      ]
+    }
+  },
   {
     "version": "0.7.0",
     "date": "2026-07-17",

fonts/Manrope.ttf

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

fonts/SpaceGrotesk.ttf

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

index.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<title>Reachy Web: the Reachy Mini web dashboard, back as an app</title>
 	<meta name="description" content="Reachy Web is the good old Reachy Mini web dashboard, back as an installable app. Control your Reachy Mini Lite or Wireless from any browser: live camera, 3D digital twin, moves, app store, volume, no desktop app needed. By Domotick.">
-	<meta name="keywords" content="Reachy Web, Reachy Mini, Reachy Mini dashboard, Reachy Mini Lite, Reachy Mini Wireless, web dashboard, browser dashboard, robot dashboard, robot control, 3D digital twin, live camera, Reachy Mirror, Reachy Eyes, Domotick, Pollen Robotics, Hugging Face Space, reachy_mini_python_app">
+	<meta name="keywords" content="Reachy Web, Reachy Mini, Reachy Mini dashboard, Reachy Mini Lite, Reachy Mini Wireless, web dashboard, web app, browser dashboard, robot dashboard, robot control, robot tools, robot web app, control robot from browser, 3D digital twin, live camera, app store, Reachy Mirror, Reachy Eyes, Domotick, Pollen Robotics, Hugging Face Space, reachy_mini_python_app, tableau de bord Reachy Mini, tableau de bord robot, dashboard web robot, application web robot, outils robot, piloter Reachy Mini depuis un navigateur, controle robot en ligne, camera robot en direct, jumeau numerique 3D, boutique d'applications robot">
 	<meta name="author" content="Domotick">
 	<meta name="robots" content="index, follow">
 	<link rel="canonical" href="https://domotick-reachy-web.static.hf.space/">
@@ -17,13 +17,13 @@
 	<meta property="og:title" content="Reachy Web: the dashboard is back">
 	<meta property="og:description" content="Control your Reachy Mini from any browser again. The removed web dashboard, back as an installable app.">
 	<meta property="og:url" content="https://domotick-reachy-web.static.hf.space/">
-	<meta property="og:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=2">
+	<meta property="og:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=3">
 	<meta property="og:image:width" content="512">
 	<meta property="og:image:height" content="512">
 	<meta name="twitter:card" content="summary">
 	<meta name="twitter:title" content="Reachy Web: the dashboard is back">
 	<meta name="twitter:description" content="Control your Reachy Mini from any browser again. The removed web dashboard, back as an installable app.">
-	<meta name="twitter:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=2">
+	<meta name="twitter:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=3">
 	<script type="application/ld+json">
 	{
 		"@context": "https://schema.org",
@@ -33,25 +33,66 @@
 		"operatingSystem": "Any (web browser)",
 		"description": "The Reachy Mini web dashboard, back as an installable app. Control your Reachy Mini Lite or Wireless from any browser: live camera, 3D digital twin, moves, app store, volume, no desktop app needed.",
 		"url": "https://domotick-reachy-web.static.hf.space/",
-		"image": "https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=2",
+		"image": "https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=3",
 		"author": { "@type": "Organization", "name": "Domotick", "url": "https://huggingface.co/Domotick" },
-		"keywords": "Reachy Mini, Reachy Mini Lite, Reachy Mini Wireless, dashboard, web dashboard, 3D digital twin, Reachy Mirror, Reachy Eyes, Domotick, Pollen Robotics",
+		"keywords": "Reachy Mini, Reachy Mini Lite, Reachy Mini Wireless, dashboard, web dashboard, web app, robot tools, robot control, 3D digital twin, app store, Reachy Mirror, Reachy Eyes, Domotick, Pollen Robotics, tableau de bord robot, application web robot, outils robot, piloter Reachy Mini depuis un navigateur, jumeau numerique 3D",
 		"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
 	}
 	</script>
 	<script>try{var d=document.documentElement,t=localStorage.getItem("theme")||(matchMedia("(prefers-color-scheme: light)").matches?"light":"dark");d.setAttribute("data-theme",t);var p=localStorage.getItem("palette")||"default";p!=="default"&&d.setAttribute("data-palette",p)}catch(e){}</script>
 	<link rel="stylesheet" href="style.css" />
 	<link rel="stylesheet" href="reachy_web/static/css/icons.css" />
+	<link rel="stylesheet" href="reachy_web/static/css/logo.css" />
 </head>
 <body>
 	<nav class="sticky top-0 z-10 border-b border-line backdrop-blur-xl bg-[color-mix(in_srgb,var(--bg)_78%,transparent)]">
 		<div class="mx-auto flex max-w-[1100px] flex-col items-stretch gap-3.5 px-5 py-2.5 md:flex-row md:items-center md:justify-between">
 			<div class="flex items-center justify-center gap-2.5 whitespace-nowrap font-display text-lg font-semibold md:justify-start">
-				<img src="reachy_web/static/assets/logo.png" alt="Reachy Web logo" class="h-9 w-9 rounded-xl">
+				<!-- INLINE like in the app (an <img>-loaded SVG cannot run scripts, so
+				     its timing would be a fixed loop): logo_anim.js plays a random move
+				     now and then, the wink first. Same markup as base.html. -->
+				<svg class="topbar-logo h-9 w-9" viewBox="24 13 72 72" role="img" aria-label="Reachy Web">
+					<g class="lg-sway lg-sway-l">
+						<g class="lg-ant lg-ant-l">
+							<path d="M45 46 L37 22" fill="none" stroke="#1b2330" stroke-width="3" stroke-linecap="round"/>
+							<circle class="lg-ball lg-ball-l" cx="37" cy="22" r="4" fill="#1b2330"/>
+						</g>
+					</g>
+					<g class="lg-sway lg-sway-r">
+						<g class="lg-ant lg-ant-r">
+							<path d="M75 46 L81.4 26.4" fill="none" stroke="#1b2330" stroke-width="3" stroke-linecap="round"/>
+							<circle class="lg-ball lg-ball-r" cx="81.4" cy="26.4" r="3.4" fill="#1b2330"/>
+						</g>
+					</g>
+					<rect x="34" y="44" width="52" height="36" rx="13" fill="#fff" stroke="#1b2330" stroke-width="3"/>
+					<circle class="lg-eye lg-eye-l" cx="48.98" cy="62.21" r="8.14" fill="#1b2330"/>
+					<circle class="lg-eye lg-eye-r" cx="71.02" cy="62.21" r="7" fill="#1b2330"/>
+					<path class="lg-wink" d="M63.9 61.5 Q71 68.5 78.1 61.5" fill="none" stroke="#1b2330" stroke-width="3.6" stroke-linecap="round"/>
+					<g class="lg-glasses" fill="none" stroke="#1b2330" stroke-width="3" stroke-linecap="round">
+						<circle cx="48.98" cy="62.21" r="11.5"/>
+						<circle cx="71.02" cy="62.21" r="10.5"/>
+						<path d="M37.48 62.21 L34 59.5"/>
+						<path d="M81.52 62.21 L86 59.5"/>
+					</g>
+				</svg>
 				<span>Reachy Web</span>
-				<span class="version-pill" id="version-pill">v0.7.0</span>
+				<span class="version-pill" id="version-pill">v0.8.0</span>
 			</div>
 			<div class="flex flex-wrap items-center justify-center gap-3.5 md:justify-end">
+				<div class="relative flex items-center text-mut">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="pointer-events-none absolute left-3 h-[15px] w-[15px]"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.5 2.4 4 5.6 4 9s-1.5 6.6-4 9c-2.5-2.4-4-5.6-4-9s1.5-6.6 4-9z"/></svg>
+					<select id="langSel" aria-label="Language" class="cursor-pointer appearance-none rounded-full border border-line bg-card py-1.5 pl-9 pr-8 text-sm font-semibold text-txt transition hover:border-acc focus:border-acc focus:outline-none">
+						<option value="en">English</option>
+						<option value="fr">Français</option>
+						<option value="es">Español</option>
+						<option value="de">Deutsch</option>
+						<option value="it">Italiano</option>
+						<option value="pt">Português</option>
+						<option value="ja">日本語</option>
+						<option value="ar">العربية</option>
+					</select>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="pointer-events-none absolute right-3 h-3.5 w-3.5"><path d="M6 9l6 6 6-6"/></svg>
+				</div>
 				<div class="flex flex-wrap items-center gap-1.5" id="palettes" title="Palette"></div>
 				<div class="flex items-center gap-2 text-mut">
 					<span class="ic i-weather-night"></span>
@@ -114,8 +155,8 @@
 		<div class="mx-auto max-w-[1100px] px-5">
 			<div class="mb-11 text-center">
 				<p class="mb-3.5 text-sm font-bold uppercase tracking-[1.5px] text-acc">Getting it running</p>
-				<h2 class="mb-3 text-3xl">Two ways to run it</h2>
-				<p class="mx-auto max-w-[680px] text-mut">On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.</p>
+				<h2 class="mb-3 text-3xl">Three ways to run it</h2>
+				<p class="mx-auto max-w-[680px] text-mut">Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.</p>
 			</div>
 
 			<div class="grid gap-[18px] md:grid-cols-2">
@@ -135,7 +176,8 @@
 							</a>
 							<p class="text-xs text-mut">Desktop: macOS is production-ready, Windows and Linux are still work in progress. No Android app yet.</p>
 						</div>
-						<a class="justify-self-center rounded-xl border border-line bg-soft p-2.5 text-txt"
+						<!-- a QR scans black on white: the backing stays white in BOTH themes -->
+						<a class="justify-self-center rounded-xl border border-line bg-white p-2.5"
 							href="https://apps.apple.com/app/reachy-mini/id6766823749" target="_blank" rel="noopener"
 							title="Scan to get the iPhone app">
 							<img src="reachy_web/static/assets/qr-ios.svg" alt="QR code to the Reachy Mini app on the App Store" class="block h-28 w-28">
@@ -158,16 +200,34 @@ curl -X POST http://reachy-mini.local:8000/api/apps/start-app/reachy_web</code><
 				</div>
 
 				<div class="card">
+					<h3 class="mb-2 flex items-center gap-2.5 text-xl"><span class="ic i-power text-acc"></span> Directly on the robot, at boot</h3>
+					<p class="mb-4 text-[0.95rem] text-mut">No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.</p>
+					<div class="code-block mb-4"><code># SSH into the robot (or the Pi beside a Lite)
+ssh pollen@reachy-mini.local
+
+git clone https://huggingface.co/spaces/Domotick/reachy_web
+cd reachy_web
+./setup.sh</code></div>
+					<p class="mb-4 text-[0.95rem] text-mut">This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).</p>
+					<p class="mb-4 text-[0.95rem] text-mut">setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.</p>
+					<p class="mb-3 text-sm text-mut">Check it, follow its logs, or remove it:</p>
+					<div class="code-block"><code>systemctl status reachy-web.service
+journalctl -u reachy-web.service -f
+
+./setup.sh --uninstall</code></div>
+				</div>
+
+				<div class="card md:col-span-2">
 					<h3 class="mb-2 flex items-center gap-2.5 text-xl"><span class="ic i-cog text-acc"></span> On your machine: <code class="font-mono text-acc">run.sh</code></h3>
 					<p class="mb-4 text-[0.95rem] text-mut">The dashboard only needs to reach the daemon over HTTP, so it can just as well run on your laptop. Nothing is installed on the robot, ideal for trying it out or hacking on the code.</p>
 					<div class="code-block mb-4"><code># grab the app (it is just a git repo)
 git clone https://huggingface.co/spaces/Domotick/reachy_web
 cd reachy_web
 
-./scripts/run.sh</code></div>
+./run.sh</code></div>
 					<p class="mb-4 text-[0.95rem] text-mut">The script builds its own virtualenv, installs the app, then <strong class="text-txt">scans the network</strong> (mDNS) for a Reachy Mini and points the dashboard at it. Open <strong class="text-txt">http://127.0.0.1:8042</strong> and you are in.</p>
 					<p class="mb-3 text-sm text-mut">Know your robot's address, or running the daemon locally? Skip the scan:</p>
-					<div class="code-block"><code>DAEMON_HOST=192.168.1.42:8000 ./scripts/run.sh
+					<div class="code-block"><code>DAEMON_HOST=192.168.1.42:8000 ./run.sh
 
 # port 8042 taken (the desktop app keeps it)?
 # run.sh falls back to 8043 and tells you.</code></div>
@@ -203,6 +263,107 @@ cd reachy_web
 		</div>
 	</section>
 
+	<section id="eyes" class="py-14">
+		<div class="mx-auto max-w-[1100px] px-5">
+			<div class="mb-11 text-center">
+				<p class="mb-3.5 text-sm font-bold uppercase tracking-[1.5px] text-acc">Community hardware</p>
+				<!-- the section mascot: a Reachy with a USB eyes module, blinking then
+				     flashing its LEDs through the colours. Pure inline CSS so it runs
+				     as-is, honours prefers-reduced-motion. -->
+				<style>
+					.eyes-bot .ex-sway-l{transform-box:fill-box;transform-origin:100% 100%;animation:exSwayL 7.3s ease-in-out infinite}
+					.eyes-bot .ex-sway-r{transform-box:fill-box;transform-origin:0% 100%;animation:exSwayR 11.9s ease-in-out infinite}
+					@keyframes exSwayL{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
+					@keyframes exSwayR{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
+					.eyes-bot .ex-eL{transform-box:view-box;transform-origin:48.98px 62.21px}
+					.eyes-bot .ex-eR{transform-box:view-box;transform-origin:71.02px 62.21px}
+					.eyes-bot .ex-rb{animation:exRb 5s linear infinite}
+					@keyframes exRb{0%{fill:#ff2d55}16%{fill:#ff9500}33%{fill:#ffd60a}50%{fill:#34c759}66%{fill:#00c7ff}83%{fill:#af52de}100%{fill:#ff2d55}}
+					.eyes-bot .ex-lid{animation:exBlink 2.8s ease-in-out infinite}
+					@keyframes exBlink{0%,10%{transform:scaleY(1)}16%{transform:scaleY(.1)}22%{transform:scaleY(1)}28%{transform:scaleY(.1)}34%,100%{transform:scaleY(1)}}
+					.eyes-bot .ex-zap{animation:exZap 2.8s ease-in-out infinite}
+					@keyframes exZap{0%,40%,100%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.35)}70%{opacity:.7;transform:scale(1)}82%{opacity:0}}
+					@media (prefers-reduced-motion:reduce){.eyes-bot *{animation:none!important}}
+				</style>
+				<svg class="eyes-bot mx-auto mb-4 block h-24 w-24 text-txt" viewBox="24 14 72 90" style="overflow:visible" role="img" aria-label="A Reachy with LED eyes">
+					<defs>
+						<filter id="ex-g" x="-140%" y="-140%" width="380%" height="380%"><feGaussianBlur stdDeviation="2.4"/></filter>
+						<radialGradient id="ex-hot"><stop offset="0" stop-color="#fff"/><stop offset=".45" stop-color="#fff" stop-opacity=".5"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient>
+					</defs>
+					<g class="ex-sway-l"><path d="M45 46 L37 22" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><circle cx="37" cy="22" r="4" fill="currentColor"/></g>
+					<g class="ex-sway-r"><path d="M75 46 L81.4 26.4" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><circle cx="81.4" cy="26.4" r="3.4" fill="currentColor"/></g>
+					<rect x="34" y="44" width="52" height="36" rx="13" fill="#fff" stroke="currentColor" stroke-width="3"/>
+					<g class="ex-lid ex-eL"><circle class="ex-rb" cx="48.98" cy="62.21" r="8.14"/></g>
+					<g class="ex-lid ex-eR"><circle class="ex-rb" cx="71.02" cy="62.21" r="7"/></g>
+					<g class="ex-zap ex-eL"><circle class="ex-rb" cx="48.98" cy="62.21" r="14" filter="url(#ex-g)" opacity=".9"/></g>
+					<g class="ex-zap ex-eR"><circle class="ex-rb" cx="71.02" cy="62.21" r="13" filter="url(#ex-g)" opacity=".9"/></g>
+					<g class="ex-zap ex-eL"><circle cx="48.98" cy="62.21" r="6" fill="url(#ex-hot)"/></g>
+					<g class="ex-zap ex-eR"><circle cx="71.02" cy="62.21" r="6" fill="url(#ex-hot)"/></g>
+					<rect x="52" y="86" width="16" height="9" rx="1.5" fill="#0f2e1e" stroke="#1b2330" stroke-width="1"/><rect x="54" y="88" width="7" height="4" rx=".6" fill="#c0c4cc"/><line x1="60" y1="80" x2="60" y2="86" stroke="#1b2330" stroke-width="1.4"/><rect x="57.5" y="95" width="5" height="4" rx=".8" fill="#8b8f98"/><circle cx="65" cy="88.4" r=".9" fill="#3ddc84"/>
+				</svg>
+				<h2 class="mb-3 text-3xl">Eyes for your Reachy</h2>
+				<p class="mx-auto max-w-[620px] text-mut">The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.</p>
+			</div>
+			<div class="grid grid-cols-1 gap-[18px] md:grid-cols-2">
+				<!-- Tom Mulder, ESP32 eyes -->
+				<div class="card flex flex-col">
+					<div class="ex-video group relative mb-4 block aspect-video w-full cursor-pointer overflow-hidden rounded-xl border border-line bg-black" data-yt="OOBtFCLjouE" role="button" tabindex="0" aria-label="Play the ESP32 eyes demo video">
+						<img src="https://img.youtube.com/vi/OOBtFCLjouE/hqdefault.jpg" alt="ESP32 eyes demo" loading="lazy" class="h-full w-full object-cover opacity-90 transition group-hover:opacity-100">
+						<span class="absolute left-1/2 top-1/2 flex h-14 w-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white transition group-hover:scale-110 group-hover:bg-[#e5232a]"><svg viewBox="0 0 24 24" fill="currentColor" class="ml-0.5 h-6 w-6"><path d="M8 5v14l11-7z"/></svg></span>
+					</div>
+					<h3 class="mb-1 flex items-center gap-2.5 text-lg"><span class="ic i-flash text-acc"></span> ESP32 eyes</h3>
+					<p class="mb-3 text-sm text-mut">by <a class="font-semibold text-txt underline-offset-2 hover:underline" href="https://algoryn.nl" target="_blank" rel="noopener">Tom Mulder</a></p>
+					<p class="mb-4 text-[0.92rem] text-mut">WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.</p>
+					<div class="mb-5 flex flex-wrap gap-1.5">
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">ESP32 / S2 / S3 / C3</span>
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">2x WS2812</span>
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">REST API</span>
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">mDNS · rmeyes.local</span>
+					</div>
+					<div class="mt-auto flex flex-wrap items-center gap-2.5">
+						<a class="inline-flex items-center gap-1.5 rounded-full bg-acc px-4 py-2 text-sm font-bold text-white transition hover:brightness-110" href="https://github.com/algoryn-nl/reachy-mini-esp32-eyes" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m8 6-6 6 6 6M16 6l6 6-6 6"/></svg>Build it yourself</a>
+						<span class="flex-1"></span>
+						<div class="flex items-center gap-2.5 text-mut">
+							<a class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-line transition hover:border-acc hover:text-acc" href="https://github.com/algoryn-nl/reachy-mini-esp32-eyes" target="_blank" rel="noopener" aria-label="GitHub" title="GitHub"><svg viewBox="0 0 24 24" fill="currentColor" class="h-[18px] w-[18px]"><path d="M12 .5C5.4.5 0 5.9 0 12.6c0 5.3 3.4 9.8 8.2 11.4.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.4-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 5 18 5.3 18 5.3c.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.3v3.4c0 .3.2.7.8.6A12 12 0 0 0 24 12.6C24 5.9 18.6.5 12 .5z"/></svg></a>
+							<a class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-line transition hover:border-acc hover:text-acc" href="https://www.linkedin.com/posts/temulder_i-gave-reachy-mini-access-to-control-its-activity-7417959994995679233-bJ-D" target="_blank" rel="noopener" aria-label="LinkedIn demo" title="LinkedIn demo"><svg viewBox="0 0 24 24" fill="currentColor" class="h-[18px] w-[18px]"><path d="M20.4 20.4h-3.6v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.2V9h3.4v1.6h.1c.5-.9 1.7-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zM7.1 20.4H3.5V9h3.6v11.4zM22.2 0H1.8C.8 0 0 .8 0 1.7v20.6c0 .9.8 1.7 1.8 1.7h20.4c1 0 1.8-.8 1.8-1.7V1.7C24 .8 23.2 0 22.2 0z"/></svg></a>
+							<a class="inline-flex h-9 items-center justify-center rounded-full border border-line px-3 text-xs font-bold transition hover:border-acc hover:text-acc" href="https://huggingface.co/algoryn" target="_blank" rel="noopener" aria-label="Hugging Face" title="Hugging Face">🤗</a>
+							<a class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-line transition hover:border-acc hover:text-acc" href="https://algoryn.nl" target="_blank" rel="noopener" aria-label="Website" title="algoryn.nl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-[18px] w-[18px]"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.5 2.4 4 5.6 4 9s-1.5 6.6-4 9c-2.5-2.4-4-5.6-4-9s1.5-6.6 4-9z"/></svg></a>
+						</div>
+					</div>
+				</div>
+				<!-- Daniel Ritchie, Reachy Eyes -->
+				<div class="card flex flex-col">
+					<div class="ex-video group relative mb-4 block aspect-video w-full cursor-pointer overflow-hidden rounded-xl border border-line bg-black" data-yt="pDPKP4a4vfc" role="button" tabindex="0" aria-label="Play the Reachy Mini Eyes demo video">
+						<img src="https://img.youtube.com/vi/pDPKP4a4vfc/hqdefault.jpg" alt="Reachy Mini Eyes demo" loading="lazy" class="h-full w-full object-cover opacity-90 transition group-hover:opacity-100">
+						<span class="absolute left-1/2 top-1/2 flex h-14 w-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white transition group-hover:scale-110 group-hover:bg-[#e5232a]"><svg viewBox="0 0 24 24" fill="currentColor" class="ml-0.5 h-6 w-6"><path d="M8 5v14l11-7z"/></svg></span>
+					</div>
+					<h3 class="mb-1 flex items-center gap-2.5 text-lg"><span class="ic i-monitor text-acc"></span> Reachy Eyes</h3>
+					<p class="mb-3 text-sm text-mut">by <a class="font-semibold text-txt underline-offset-2 hover:underline" href="https://brainwavecollective.ai" target="_blank" rel="noopener">Daniel Ritchie</a>, Brainwave Collective</p>
+					<p class="mb-4 text-[0.92rem] text-mut">One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.</p>
+					<div class="mb-5 flex flex-wrap gap-1.5">
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">USB plug and play</span>
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">WS2812</span>
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">Auto-detected</span>
+						<span class="rounded-full border border-line bg-bg px-2.5 py-1 text-xs font-semibold text-mut">DIY or ready-made</span>
+					</div>
+					<div class="mt-auto flex flex-wrap items-center gap-2.5">
+						<a class="inline-flex items-center gap-1.5 rounded-full bg-acc px-4 py-2 text-sm font-bold text-white transition hover:brightness-110" href="https://reachyeyes.brainwavecollective.ai/#buy" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M6 6 5 3H2"/></svg>Get the kit</a>
+						<span class="flex-1"></span>
+						<div class="flex items-center gap-2.5 text-mut">
+							<a class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-line transition hover:border-acc hover:text-acc" href="https://github.com/brainwavecollective/reachy-eyes" target="_blank" rel="noopener" aria-label="GitHub" title="GitHub"><svg viewBox="0 0 24 24" fill="currentColor" class="h-[18px] w-[18px]"><path d="M12 .5C5.4.5 0 5.9 0 12.6c0 5.3 3.4 9.8 8.2 11.4.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.4-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 5 18 5.3 18 5.3c.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.3v3.4c0 .3.2.7.8.6A12 12 0 0 0 24 12.6C24 5.9 18.6.5 12 .5z"/></svg></a>
+							<a class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-line transition hover:border-acc hover:text-acc" href="https://www.linkedin.com/posts/danielritchie123_one-of-the-first-sets-of-reachy-mini-eyes-activity-7424229814674538497-nqEs" target="_blank" rel="noopener" aria-label="LinkedIn" title="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" class="h-[18px] w-[18px]"><path d="M20.4 20.4h-3.6v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.2V9h3.4v1.6h.1c.5-.9 1.7-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zM7.1 20.4H3.5V9h3.6v11.4zM22.2 0H1.8C.8 0 0 .8 0 1.7v20.6c0 .9.8 1.7 1.8 1.7h20.4c1 0 1.8-.8 1.8-1.7V1.7C24 .8 23.2 0 22.2 0z"/></svg></a>
+							<a class="inline-flex h-9 items-center justify-center rounded-full border border-line px-3 text-xs font-bold transition hover:border-acc hover:text-acc" href="https://huggingface.co/danielritchie" target="_blank" rel="noopener" aria-label="Hugging Face" title="Hugging Face">🤗</a>
+							<a class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-line transition hover:border-acc hover:text-acc" href="https://brainwavecollective.ai" target="_blank" rel="noopener" aria-label="Website" title="brainwavecollective.ai"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-[18px] w-[18px]"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.5 2.4 4 5.6 4 9s-1.5 6.6-4 9c-2.5-2.4-4-5.6-4-9s1.5-6.6 4-9z"/></svg></a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="mt-9 text-center">
+				<a class="inline-flex items-center gap-2 rounded-full bg-acc px-5 py-2.5 text-sm font-bold text-white transition hover:brightness-110" href="https://discord.gg/WpJ7PE9GV" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path d="M20 4.4A19 19 0 0 0 15.3 3l-.2.4a17 17 0 0 1 4.2 1.3 15.7 15.7 0 0 0-13.4 0A17 17 0 0 1 10 3.4L9.8 3A19 19 0 0 0 5 4.4 20 20 0 0 0 1.4 18a19 19 0 0 0 5.8 3l.5-1a13 13 0 0 1-2-1l.5-.4a13.5 13.5 0 0 0 11.6 0l.5.4c-.6.4-1.3.7-2 1l.5 1a19 19 0 0 0 5.8-3A20 20 0 0 0 20 4.4zM8.5 14.7c-1.1 0-2-1-2-2.3s.9-2.3 2-2.3 2 1 2 2.3-.9 2.3-2 2.3zm7 0c-1.1 0-2-1-2-2.3s.9-2.3 2-2.3 2 1 2 2.3-.9 2.3-2 2.3z"/></svg>Discuss the eyes on Discord</a>
+			</div>
+		</div>
+	</section>
+
 	<section id="features" class="py-14">
 		<div class="mx-auto max-w-[1100px] px-5">
 			<div class="mb-11 text-center">
@@ -366,7 +527,22 @@ cd reachy_web
 				}
 			})
 			.catch(err => console.error('Failed to load changelog:', err));
+
+		// Video preview: a poster facade that swaps in the YouTube player on click,
+		// so nothing loads from YouTube until the visitor asks for it.
+		document.querySelectorAll('.ex-video[data-yt]').forEach(el => {
+			const play = () => {
+				const id = el.dataset.yt;
+				el.innerHTML = `<iframe class="h-full w-full" src="https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0" title="Demo video" frameborder="0" allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen></iframe>`;
+				el.classList.remove('cursor-pointer');
+				el.removeAttribute('role');
+				el.removeAttribute('tabindex');
+			};
+			el.addEventListener('click', play);
+			el.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); play(); } });
+		});
 	</script>
 	<script src="reachy_web/static/js/landing-i18n.js"></script>
+	<script src="reachy_web/static/js/logo_anim.js"></script>
 </body>
 </html>

pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "reachy_web"
-version = "0.7.0"
+version = "0.8.0"
 description = "The web dashboard for your Reachy Mini, in any browser"
 readme = "README.md"
 requires-python = ">=3.10"
@@ -16,6 +16,7 @@ dependencies = [
     "websockets",
     "linuxpy; sys_platform == 'linux'",
     "imageio-ffmpeg",
+    "pyserial",
 ]
 keywords = [
     "reachy-mini-app",
@@ -23,7 +24,13 @@ keywords = [
     "reachy-mini-lite",
     "dashboard",
     "web-dashboard",
+    "web-app",
+    "robot-tools",
+    "robot-control",
     "digital-twin",
+    "tableau-de-bord",
+    "application-web",
+    "outils-robot",
     "reachy-mirror",
     "reachy-eyes",
     "domotick",

reachy_web/audio_eq.py

@@ -27,6 +27,11 @@ SCHEMA = "com.github.wwmm.easyeffects"
 TONE_PRESET = "Reachy Tone"          # the preset the tone sliders patch
 TONE_BANDS = ("band0", "band1", "band2")   # bass, mid, treble — see the shipped JSON
 
+# the real graphic EQ the panel drives: one Bell band per fixed frequency, like
+# any 10-band graphic equalizer. We write it as its own preset and reload it.
+GRAPHIC_PRESET = "Reachy Graphic"
+GRAPHIC_FREQS = (31.0, 62.0, 125.0, 250.0, 500.0, 1000.0, 2000.0, 4000.0, 8000.0, 16000.0)
+
 
 def _preset_dirs() -> List[str]:
     """The output-preset folders EasyEffects reads, whichever layout it uses."""
@@ -152,6 +157,59 @@ def tone(bass: float, mid: float, treble: float) -> bool:
     return load(TONE_PRESET)
 
 
+def graphic_bands() -> List[float]:
+    """The current gain (dB) of each graphic band, or flat if none written yet."""
+    for d in _preset_dirs():
+        p = os.path.join(d, GRAPHIC_PRESET + ".json")
+        if os.path.exists(p):
+            try:
+                eq = json.load(open(p, encoding="utf-8"))["output"]["equalizer"]
+                left = eq.get("left", {})
+                return [float(left.get(f"band{i}", {}).get("gain", 0.0)) for i in range(len(GRAPHIC_FREQS))]
+            except (OSError, KeyError, ValueError):
+                pass
+    return [0.0] * len(GRAPHIC_FREQS)
+
+
+def set_bands(gains: List[float]) -> bool:
+    """Write the graphic EQ (one Bell band per fixed frequency) and load it.
+
+    Built on the shipped Tone preset's known-good structure: we only swap the band
+    list and gains, staying clear of EasyEffects' version-specific schema quirks."""
+    if not detected():
+        return False
+    tone = _tone_path()
+    if tone is None:
+        return False   # the shipped presets provide the template we start from
+    gains = (list(gains) + [0.0] * len(GRAPHIC_FREQS))[: len(GRAPHIC_FREQS)]
+    try:
+        with open(tone, "r", encoding="utf-8") as fh:
+            data = json.load(fh)
+        eq = data["output"]["equalizer"]
+    except (OSError, KeyError, ValueError) as exc:
+        logger.warning("audio_eq: could not read the tone template: %s", exc)
+        return False
+    eq["num-bands"] = len(GRAPHIC_FREQS)
+    eq["mode"] = "IIR"
+    for channel in ("left", "right"):
+        eq[channel] = {
+            f"band{i}": {
+                "frequency": float(GRAPHIC_FREQS[i]), "gain": float(gains[i]),
+                "mode": "RLC (BT)", "mute": False, "q": 2.4, "slope": "x1",
+                "solo": False, "type": "Bell",
+            }
+            for i in range(len(GRAPHIC_FREQS))
+        }
+    path = os.path.join(os.path.dirname(tone), GRAPHIC_PRESET + ".json")
+    try:
+        with open(path, "w", encoding="utf-8") as fh:
+            json.dump(data, fh, indent=4)
+    except OSError as exc:
+        logger.warning("audio_eq: could not write the graphic preset: %s", exc)
+        return False
+    return _run(["easyeffects", "-l", GRAPHIC_PRESET]).returncode == 0
+
+
 def status() -> Dict[str, object]:
     """Everything the GUI needs in one poll."""
     det = detected()
@@ -162,4 +220,6 @@ def status() -> Dict[str, object]:
         "enabled": enabled() if det else False,
         "presets": presets() if det else [],
         "current": current() if det else "",
+        "freqs": [int(f) for f in GRAPHIC_FREQS],
+        "bands": graphic_bands() if det else [0.0] * len(GRAPHIC_FREQS),
     }

reachy_web/eyes.py

@@ -0,0 +1,365 @@
+"""LED eyes: one facade, two community modules.
+
+Two different mods give the Reachy Mini light-up eyes, and the dashboard speaks
+to whichever is there behind the SAME /eyes/* routes:
+
+  · Reachy Eyes (github.com/brainwavecollective/reachy-eyes, no licence — our
+    own client, nothing copied): RP2350 on USB serial, VID:PID 2E8A:10FC, a
+    one-line text protocol with named colors, per-eye L:/R: prefixes, effects
+    and 0..1 state scalars. Detected by enumerating serial ports + a STATUS
+    handshake answering REACHY_MINI_EYES.
+
+  · reachy-mini-esp32-eyes (github.com/algoryn-nl/reachy-mini-esp32-eyes,
+    Apache-2.0): an ESP32 on WIFI, REST API at http://rmeyes.local — true RGB
+    per LED (0 = left, 1 = right, -1 = both), brightness 0-100, on/off. No
+    fades and no ENERGY breathing in the firmware's direct-LED path, so those
+    degrade gracefully (the twin still fades and breathes). Detected by
+    resolving the mDNS name (or REACHY_WEB_EYES_HOST) and checking that
+    GET /api/v1/led answers the module's exact LED-list shape — the system-info
+    endpoint is a stock ESP-IDF demo answer, too generic to trust.
+
+USB wins when both are present (it is the wired truth). Detection has no
+on-robot gate — the module hangs off whatever box runs this server (or its
+LAN, for the ESP), and the handshakes make false positives impossible. Nothing
+here throws: no hardware, `status()` says `detected: false` with a `why`.
+"""
+
+import logging
+import os
+import threading
+import time
+from typing import Dict, Optional, Tuple
+
+import httpx
+
+logger = logging.getLogger("reachy_web")
+
+try:
+    from serial import Serial
+    from serial.tools import list_ports
+except ImportError:          # pyserial missing: report it, never crash the app
+    Serial = None
+
+COLORS = {"WHITE", "RED", "GREEN", "BLUE", "AMBER", "CYAN", "MAGENTA", "OFF"}
+EFFECTS = {"BLINK", "ACK", "STARTLE"}
+EYES = {"L": "L", "R": "R", "LEFT": "L", "RIGHT": "R"}
+
+# the palette as RGB, for the ESP module (the same hexes the GUI swatches show)
+RGB: Dict[str, Tuple[int, int, int]] = {
+    "WHITE": (245, 245, 240), "RED": (229, 35, 42), "AMBER": (255, 179, 0),
+    "GREEN": (31, 191, 58), "CYAN": (0, 200, 215), "BLUE": (30, 91, 255),
+    "MAGENTA": (224, 33, 158),
+}
+
+
+# ===== driver 1: USB serial (Brainwave Reachy Eyes) ================================
+
+VID, PID = 0x2E8A, 0x10FC
+DEVICE_ID = "REACHY_MINI_EYES"
+BAUD = 115200
+
+# One talker at a time: every command is a line on one shared port.
+_lock = threading.Lock()
+_link: Optional["Serial"] = None
+_port = ""
+_ident = ""
+
+
+def _handshake(link: "Serial") -> str:
+    """Ask STATUS and return the identity line, or '' when nobody answers."""
+    link.reset_input_buffer()
+    time.sleep(0.2)              # let queued async "OK"s land, then discard them
+    link.reset_input_buffer()
+    link.write(b"STATUS\n")
+    time.sleep(0.1)
+    answer = link.readline().decode(errors="ignore").strip()
+    return answer if DEVICE_ID in answer else ""
+
+
+def _drop() -> None:
+    global _link, _port, _ident
+    if _link is not None:
+        try:
+            _link.close()
+        except Exception:
+            pass
+    _link, _port, _ident = None, "", ""
+
+
+def _discover() -> None:
+    """Find the module among the serial ports and keep the connection open.
+
+    `exclusive` matters: it turns "someone else already drives the eyes" into a
+    clean open failure instead of two writers interleaving bytes on one port.
+    """
+    global _link, _port, _ident
+    if Serial is None:
+        return
+    for info in list_ports.comports():
+        if info.vid != VID or info.pid != PID:
+            continue
+        try:
+            link = Serial(info.device, BAUD, timeout=0.3, exclusive=True)
+            time.sleep(0.15)     # settle after open, as the vendor lib does
+            ident = _handshake(link)
+            if ident:
+                _link, _port, _ident = link, info.device, ident
+                # full brightness by default (Pierre's ask) — the GUI slider
+                # starts at 1.0 too, so the two agree from the first glance
+                link.write(b"INTENSITY 1.0\n")
+                logger.info("👀 Reachy Eyes connected: %s (%s)", ident, info.device)
+                return
+            link.close()
+        except Exception:
+            continue
+
+
+def _serial_status() -> Optional[Dict[str, object]]:
+    """A held link is verified for real (a stale handle after an unplug must
+    not report a device that is gone); with none, re-hunt."""
+    if Serial is None:
+        return None
+    with _lock:
+        if _link is not None:
+            try:
+                if _handshake(_link):
+                    return {"detected": True, "kind": "serial", "port": _port,
+                            "ident": _ident, "why": ""}
+            except Exception:
+                pass
+            _drop()              # went silent or unplugged: forget it, re-hunt
+        _discover()
+        if _link is not None:
+            return {"detected": True, "kind": "serial", "port": _port,
+                    "ident": _ident, "why": ""}
+    return None
+
+
+def _serial_send(cmd: str) -> bool:
+    """One command line out. A failed write means the device left: drop the
+    link so the next status() probes from scratch."""
+    with _lock:
+        if _link is None:
+            return False
+        try:
+            _link.write((cmd + "\n").encode())
+            return True
+        except Exception as exc:
+            logger.info("👀 Reachy Eyes lost (%s)", exc)
+            _drop()
+            return False
+
+
+# ===== driver 2: WiFi REST (algoryn ESP32 eyes) ====================================
+
+ESP_LED = {"L": 0, "R": 1}
+ESP_RETRY_S = 15.0               # negative cache: no re-probe storm on every open
+
+_esp_lock = threading.Lock()
+_esp = {
+    "url": None,                 # base URL once detected
+    "last_fail": 0.0,            # monotonic stamp of the last failed probe
+    "brightness": 100,           # the module wants 0-100 per write, so we keep it
+    # what each eye currently shows — needed because every POST re-states
+    # color AND brightness, so a brightness change must replay the colors
+    "eyes": {"L": {"on": True, "rgb": RGB["WHITE"]},
+             "R": {"on": True, "rgb": RGB["WHITE"]}},
+}
+
+
+def _esp_candidates() -> list:
+    """Where an ESP module might answer: the pinned env host first, then the
+    firmware's default mDNS name."""
+    urls = []
+    pin = os.environ.get("REACHY_WEB_EYES_HOST", "").strip()
+    if pin:
+        urls.append(pin if pin.startswith("http") else f"http://{pin}")
+    urls.append("http://rmeyes.local")
+    return urls
+
+
+def _esp_check(url: str) -> bool:
+    """GET /api/v1/led must answer the module's exact LED-list shape. The
+    system-info route is a stock ESP-IDF example answer — not an identity."""
+    r = httpx.get(f"{url}/api/v1/led", timeout=1.5)
+    r.raise_for_status()
+    leds = r.json()
+    return (isinstance(leds, list) and len(leds) >= 2
+            and all(isinstance(l, dict) and "led" in l and "brightness" in l for l in leds))
+
+
+def _esp_status() -> Optional[Dict[str, object]]:
+    with _esp_lock:
+        if _esp["url"]:
+            try:
+                if _esp_check(_esp["url"]):
+                    return {"detected": True, "kind": "esp32", "port": _esp["url"],
+                            "ident": "reachy-mini-esp32-eyes", "why": ""}
+            except Exception:
+                pass
+            _esp["url"] = None   # answered once, silent now: re-hunt below
+        if time.monotonic() - _esp["last_fail"] < ESP_RETRY_S:
+            return None          # it just failed; a .local timeout per open would hurt
+        for url in _esp_candidates():
+            try:
+                if _esp_check(url):
+                    _esp["url"] = url
+                    logger.info("👀 ESP32 eyes connected: %s", url)
+                    return {"detected": True, "kind": "esp32", "port": url,
+                            "ident": "reachy-mini-esp32-eyes", "why": ""}
+            except Exception:
+                continue
+        _esp["last_fail"] = time.monotonic()
+    return None
+
+
+def _esp_post_led(side: str, on: bool, rgb: Tuple[int, int, int], brightness: int) -> bool:
+    url = _esp["url"]
+    if not url:
+        return False
+    try:
+        r = httpx.post(f"{url}/api/v1/led", timeout=1.5, json={
+            "led": ESP_LED[side], "on": bool(on),
+            "red": rgb[0], "green": rgb[1], "blue": rgb[2],
+            "brightness": int(brightness),
+        })
+        r.raise_for_status()
+        return True
+    except Exception as exc:
+        logger.info("👀 ESP32 eyes lost (%s)", exc)
+        with _esp_lock:
+            _esp["url"] = None
+            _esp["last_fail"] = time.monotonic()
+        return False
+
+
+def _esp_apply(sides: list) -> bool:
+    """Replay the tracked state of the given eyes onto the module."""
+    ok = True
+    for s in sides:
+        st = _esp["eyes"][s]
+        ok = _esp_post_led(s, st["on"], st["rgb"], _esp["brightness"]) and ok
+    return ok
+
+
+def _esp_color(name: str, sides: list) -> bool:
+    for s in sides:
+        if name == "OFF":
+            _esp["eyes"][s]["on"] = False
+        else:
+            _esp["eyes"][s] = {"on": True, "rgb": RGB[name]}
+    return _esp_apply(sides)
+
+
+def _esp_intensity(level: float) -> bool:
+    _esp["brightness"] = round(level * 100)
+    return _esp_apply(["L", "R"])
+
+
+def _esp_effect(name: str, sides: list) -> bool:
+    """The firmware's direct-LED path has no one-shot effects, so we shape them
+    here: BLINK goes dark and back, ACK dips politely, STARTLE overshoots.
+    Runs in the worker thread main.py already puts us on — sleeping is fine."""
+    if name == "BLINK":
+        for s in sides:
+            _esp_post_led(s, False, _esp["eyes"][s]["rgb"], _esp["brightness"])
+        time.sleep(0.12)
+    elif name == "ACK":
+        for s in sides:
+            _esp_post_led(s, True, _esp["eyes"][s]["rgb"], max(5, _esp["brightness"] // 2))
+        time.sleep(0.09)
+    else:   # STARTLE
+        for s in sides:
+            _esp_post_led(s, True, _esp["eyes"][s]["rgb"], 100)
+        time.sleep(0.13)
+    return _esp_apply(sides)
+
+
+# ===== the facade main.py talks to =================================================
+
+def _sides(eye: object) -> Optional[list]:
+    if not eye:
+        return ["L", "R"]
+    side = EYES.get(str(eye).upper())
+    return [side] if side else None
+
+
+def status() -> Dict[str, object]:
+    """Everything the GUI needs in one poll. USB first — a wired module beats a
+    WiFi one when both are around."""
+    st = _serial_status()
+    if st:
+        return st
+    st = _esp_status()
+    if st:
+        return st
+    why = []
+    if Serial is None:
+        why.append("pyserial is not installed")
+    else:
+        why.append(f"no USB device {VID:04X}:{PID:04X} answering STATUS")
+    why.append("no ESP32 eyes at " + " / ".join(_esp_candidates()))
+    return {"detected": False, "kind": None, "port": "", "ident": "",
+            "why": "; ".join(why)}
+
+
+def set_color(color: object, eye: object = None, duration: object = None) -> bool:
+    """A named color, whole face or one eye, with an optional fade (seconds).
+    The fade is serial-only — the ESP firmware snaps, and the twin fades for it."""
+    name = str(color or "").upper()
+    if name not in COLORS:
+        return False
+    sides = _sides(eye)
+    if sides is None:
+        return False
+    if _link is not None:
+        cmd = name
+        if duration is not None:
+            try:
+                cmd += f" {max(0.0, float(duration))}"
+            except (TypeError, ValueError):
+                pass
+        if eye:
+            cmd = f"{sides[0]}:{cmd}"
+        return _serial_send(cmd)
+    if _esp["url"]:
+        return _esp_color(name, sides)
+    return False
+
+
+def effect(name: object, eye: object = None) -> bool:
+    """A firmware effect: BLINK, ACK or STARTLE, whole face or one eye."""
+    cmd = str(name or "").upper()
+    if cmd not in EFFECTS:
+        return False
+    sides = _sides(eye)
+    if sides is None:
+        return False
+    if _link is not None:
+        return _serial_send(f"{sides[0]}:{cmd}" if eye else cmd)
+    if _esp["url"]:
+        return _esp_effect(cmd, sides)
+    return False
+
+
+def set_state(intensity: object = None, energy: object = None) -> bool:
+    """The runtime scalars, clamped to 0..1. ENERGY (breathing) only exists in
+    the serial firmware; on the ESP it is a graceful no-op (the twin breathes)."""
+    ok = True
+    for key, value in (("INTENSITY", intensity), ("ENERGY", energy)):
+        if value is None:
+            continue
+        try:
+            level = max(0.0, min(1.0, float(value)))
+        except (TypeError, ValueError):
+            ok = False
+            continue
+        if _link is not None:
+            ok = _serial_send(f"{key} {level}") and ok
+        elif _esp["url"]:
+            if key == "INTENSITY":
+                ok = _esp_intensity(level) and ok
+            # ENERGY: nothing to send — deliberately not a failure
+        else:
+            ok = False
+    return ok

reachy_web/log_i18n.py

@@ -224,14 +224,27 @@ MESSAGES: Dict[str, Dict[str, str]] = {
         "ja": "アプリケーションの起動が完了しました",
         "ar": "اكتمل بدء التطبيق",
     },
-    "Uvicorn running on %s://%s:%d (Press CTRL+C to quit)": {
-        "fr": "à l'écoute sur %s://%s:%d (Ctrl+C pour quitter)",
-        "es": "escuchando en %s://%s:%d (Ctrl+C para salir)",
-        "de": "lauscht auf %s://%s:%d (Strg+C zum Beenden)",
-        "it": "in ascolto su %s://%s:%d (Ctrl+C per uscire)",
-        "pt": "à escuta em %s://%s:%d (Ctrl+C para sair)",
-        "ja": "%s://%s:%d で待機中 (Ctrl+C で終了)",
-        "ar": "يستمع على %s://%s:%d (اضغط Ctrl+C للخروج)",
+    # main.py rewrites uvicorn's "Uvicorn running on …" record into one of these
+    # two, with the LAN IP + mDNS URLs as the single argument. The Ctrl+C variant
+    # is used only at a real terminal (a tty); installed via the store, the
+    # app-manager owns our life and the hint would be a lie.
+    "listening on %s (Ctrl+C to quit)": {
+        "fr": "à l'écoute sur %s (Ctrl+C pour quitter)",
+        "es": "escuchando en %s (Ctrl+C para salir)",
+        "de": "lauscht auf %s (Strg+C zum Beenden)",
+        "it": "in ascolto su %s (Ctrl+C per uscire)",
+        "pt": "à escuta em %s (Ctrl+C para sair)",
+        "ja": "%s で待機中 (Ctrl+C で終了)",
+        "ar": "يستمع على %s (اضغط Ctrl+C للخروج)",
+    },
+    "listening on %s": {
+        "fr": "à l'écoute sur %s",
+        "es": "escuchando en %s",
+        "de": "lauscht auf %s",
+        "it": "in ascolto su %s",
+        "pt": "à escuta em %s",
+        "ja": "%s で待機中",
+        "ar": "يستمع على %s",
     },
     "Shutting down": {
         "fr": "arrêt en cours",
@@ -322,7 +335,7 @@ _lang = os.environ.get("REACHY_WEB_LANG", _lang) if os.environ.get(
     "REACHY_WEB_LANG", ""
 ) in LANGS else _lang
 
-# --- the launcher (scripts/run.sh) --------------------------------------------
+# --- the launcher (run.sh) --------------------------------------------
 # Bash cannot read the table above, so run.sh asks us for it: one call, and it
 # evals the result as shell variables. Keys stay stable; the emojis live here.
 LAUNCHER = {
@@ -416,6 +429,16 @@ LAUNCHER = {
         "ja": "⚠️  ポートが他のプログラムに使用されています（デスクトップアプリが保持）",
         "ar": "⚠️  المنفذ مشغول ببرنامج آخر (يحجزه تطبيق سطح المكتب)",
     },
+    "on_robot": {
+        "en": "🤖 On the robot",
+        "fr": "🤖 Sur le robot",
+        "es": "🤖 En el robot",
+        "de": "🤖 Auf dem Roboter",
+        "it": "🤖 Sul robot",
+        "pt": "🤖 No robô",
+        "ja": "🤖 ロボット上で実行中",
+        "ar": "🤖 على الروبوت",
+    },
     "daemon_target": {
         "en": "🔌 Daemon target:",
         "fr": "🔌 Daemon ciblé :",

reachy_web/main.py

@@ -12,6 +12,7 @@ import json
 import logging
 import os
 import signal
+import socket
 import sys
 import threading
 import time
@@ -34,6 +35,7 @@ from . import log_i18n
 
 from . import audio
 from . import audio_eq
+from . import eyes
 from .camera import MEDIA_TYPE, CameraStream
 from .control import look_at_pose, pose_to_scalars
 from .moves import names as move_names_data
@@ -56,6 +58,20 @@ def _c(code: str, text: str) -> str:
     return f"\033[{code}m{text}\033[0m" if _COLOR else text
 
 
+def _lan_ip() -> Optional[str]:
+    """This machine's LAN address — the one a phone on the network can reach.
+
+    A UDP "connection" never sends a packet; it only makes the kernel pick the
+    interface that would route out, whose address is the answer.
+    """
+    try:
+        with socket.socket(socket.AF_INET, socket.SOCK_DGRAM) as s:
+            s.connect(("8.8.8.8", 80))
+            return s.getsockname()[0]
+    except OSError:
+        return None
+
+
 # Routine chatter: polls the GUI runs on its own, and per-item assets. A page
 # load fires dozens of these, and drowning the log in ✓ lines is how a real
 # error goes unseen. Only their SUCCESSES are hidden — a failing poll still
@@ -76,6 +92,7 @@ QUIET_OK = (
     "/system/info",
     "/look-at",                    # up to 8 per second while aiming
     "/moves/ik",                   # the simulator's IK solve, once per frame (~20/s)
+    "/eyes/",                      # LED scenarios post colors several times a second
     "/static/",
 )
 
@@ -104,6 +121,31 @@ class _Pretty(logging.Formatter):
                 f"{_c(colour, str(status))}"
             )
 
+        # uvicorn's startup line names the BIND address (0.0.0.0), which nobody
+        # can click. Rewrite it to the LAN IP and the mDNS name — real URLs to
+        # open from any device on the network. The Ctrl+C hint survives only
+        # when a human at a terminal can actually press it: started by the
+        # daemon's app-manager (store install), stderr is a captured pipe, not
+        # a tty, and the hint would be a lie.
+        if (
+            str(record.msg).startswith("Uvicorn running on")
+            and isinstance(record.args, tuple)
+            and len(record.args) >= 3
+        ):
+            proto, host, port = str(record.args[0]), str(record.args[1]), record.args[2]
+            if host in ("0.0.0.0", "::"):
+                name = socket.gethostname()
+                name = name if name.endswith(".local") else name + ".local"
+                hosts = [h for h in (_lan_ip(), name.lower()) if h]
+            else:
+                hosts = [host]
+            urls = " · ".join(f"{proto}://{h}:{port}" for h in hosts)
+            record.msg = (
+                "listening on %s (Ctrl+C to quit)" if sys.stderr.isatty()
+                else "listening on %s"
+            )
+            record.args = (urls,)
+
         body = log_i18n.translate(record)
         if record.levelno >= logging.WARNING:
             body = _c(self.LEVEL_COLOR[record.levelname], body)
@@ -295,6 +337,18 @@ def daemon_name() -> str:
     return DAEMON["host"].rsplit(":", 1)[0].rstrip(".")
 
 
+def _on_robot() -> bool:
+    """True when THIS process runs ON the robot. run.sh computes it from a robust
+    probe (the daemon's own systemd unit, or the Pi model) and exports
+    REACHY_WEB_ON_ROBOT; we trust that first. Only fall back to "the daemon target
+    is loopback" for launches that never went through run.sh. The old EQ gate used
+    the loopback test ALONE, which fails on a robot whose daemon was cached under
+    its mDNS name or LAN IP (the EQ then wrongly reported on_robot:false)."""
+    if os.environ.get("REACHY_WEB_ON_ROBOT") == "1":
+        return True
+    return daemon_name() in ("127.0.0.1", "localhost", "::1")
+
+
 def signalling_ws() -> str:
     """The robot's WebRTC signalling server (webrtcsink, run-signalling-server)."""
     return f"ws://{daemon_name()}:8443"
@@ -522,7 +576,14 @@ def _range_response(path: Any, range_header: Any) -> Response:
 
 
 class StaticGZip:
-    """gzip the static bundle, and only that (streams must pass through raw)."""
+    """gzip the static bundle, and only that (streams must pass through raw).
+
+    Also stamps ``Cache-Control: no-cache`` on /static: Chrome does NOT revalidate
+    subresources on a normal reload, so an edited skins.js kept being served from
+    the browser cache until a hard refresh — every "it's still broken" was often
+    just this. no-cache means "revalidate every time": with ETags the answer is a
+    304 on the LAN, so it costs almost nothing and the app is never stale again.
+    """
 
     def __init__(self, app: Any) -> None:
         self.app = app
@@ -530,7 +591,15 @@ class StaticGZip:
 
     async def __call__(self, scope: Any, receive: Any, send: Any) -> None:
         if scope["type"] == "http" and scope["path"].startswith("/static/"):
-            await self.gzip(scope, receive, send)
+            async def stamped(message: Any) -> None:
+                if message["type"] == "http.response.start":
+                    headers = [(k, v) for k, v in message.get("headers", [])
+                               if k.lower() != b"cache-control"]
+                    headers.append((b"cache-control", b"no-cache"))
+                    message = {**message, "headers": headers}
+                await send(message)
+
+            await self.gzip(scope, receive, stamped)
         else:
             await self.app(scope, receive, send)
 
@@ -672,17 +741,7 @@ class ReachyWeb(ReachyMiniApp):
         # --- host identity for the topbar (hostname + LAN IP + the ROBOT's address)
         @app.get("/system/info")
         async def system_info() -> dict:
-            import socket
-
-            ip = None
-            try:
-                # a UDP "connection" never sends a packet; it just picks the
-                # interface that would route out, i.e. the LAN address
-                with socket.socket(socket.AF_INET, socket.SOCK_DGRAM) as s:
-                    s.connect(("8.8.8.8", 80))
-                    ip = s.getsockname()[0]
-            except OSError:
-                pass
+            ip = _lan_ip()
 
             # Where the robot actually lives. The topbar used to show only the
             # machine serving the page — which, run from a laptop, is the laptop:
@@ -888,10 +947,9 @@ class ReachyWeb(ReachyMiniApp):
         async def eq_status() -> dict:
             # The EQ belongs to the ROBOT only. Detection runs server-side, so a
             # dashboard run from a laptop would otherwise report the LAPTOP's
-            # EasyEffects. Gate on being installed on the robot: the daemon target
-            # is loopback there (a laptop points at the robot over mDNS). Not on the
-            # robot ⇒ no EQ, full stop — the icon never appears.
-            if daemon_name() not in ("127.0.0.1", "localhost", "::1"):
+            # EasyEffects. Gate on running ON the robot (REACHY_WEB_ON_ROBOT, with a
+            # loopback fallback). Not on the robot: no EQ, full stop.
+            if not _on_robot():
                 return {"detected": False, "running": False, "on_robot": False,
                         "enabled": False, "presets": [], "current": ""}
             st = await asyncio.to_thread(audio_eq.status)
@@ -925,6 +983,53 @@ class ReachyWeb(ReachyMiniApp):
             )
             return {"ok": ok}
 
+        @app.post("/audio/eq/bands")
+        async def eq_bands(payload: dict) -> dict:
+            """The real graphic EQ: one gain (dB) per fixed band."""
+            def _clamp(v: object) -> float:
+                try:
+                    return max(-12.0, min(12.0, float(v)))
+                except (TypeError, ValueError):
+                    return 0.0
+            gains = [_clamp(v) for v in (payload.get("gains") or [])][: len(audio_eq.GRAPHIC_FREQS)]
+            ok = await asyncio.to_thread(audio_eq.set_bands, gains)
+            return {"ok": ok, "bands": await asyncio.to_thread(audio_eq.graphic_bands)}
+
+        # --- LED eyes: the Reachy Eyes community module (see eyes.py), when it
+        # is plugged into THIS box. Serial talks go through a thread; no on-robot
+        # gate — a module on the laptop (bench test) is as real as one in the head.
+        @app.get("/eyes/status")
+        async def eyes_status() -> dict:
+            return await asyncio.to_thread(eyes.status)
+
+        @app.post("/eyes/color")
+        async def eyes_color(payload: dict) -> dict:
+            ok = await asyncio.to_thread(
+                eyes.set_color,
+                payload.get("color"),
+                payload.get("eye"),
+                payload.get("duration"),
+            )
+            return {"ok": ok}
+
+        @app.post("/eyes/state")
+        async def eyes_state(payload: dict) -> dict:
+            ok = await asyncio.to_thread(
+                eyes.set_state,
+                payload.get("intensity"),
+                payload.get("energy"),
+            )
+            return {"ok": ok}
+
+        @app.post("/eyes/effect")
+        async def eyes_effect(payload: dict) -> dict:
+            ok = await asyncio.to_thread(
+                eyes.effect,
+                payload.get("effect"),
+                payload.get("eye"),
+            )
+            return {"ok": ok}
+
         @app.get("/camera/status")
         async def camera_status() -> dict:
             return self._camera.status()
@@ -999,6 +1104,21 @@ class ReachyWeb(ReachyMiniApp):
         @asynccontextmanager
         async def lifespan(app_: Any) -> Any:
             async with inner_lifespan(app_):
+                # An abandoned DNS lookup must not scream. When the daemon target
+                # is an mDNS name that stops resolving (robot off, wifi dropped to
+                # hotspot), a connect attempt can be cancelled or time out while
+                # getaddrinfo is still running in its thread; the thread then
+                # finishes with gaierror on a future nobody awaits, and asyncio
+                # prints "Future exception was never retrieved" at GC time. It is
+                # noise: the failed connect itself was already handled and logged.
+                # Swallow exactly that case, hand everything else to the default.
+                loop = asyncio.get_running_loop()
+                def _quiet_orphan_dns(lp: Any, context: dict) -> None:
+                    if isinstance(context.get("exception"), socket.gaierror):
+                        return
+                    lp.default_exception_handler(context)
+                loop.set_exception_handler(_quiet_orphan_dns)
+
                 # keep looking for the robot for as long as we run
                 hunter = asyncio.create_task(_discover_forever())
                 # a hunter that dies quietly leaves the robot undiscoverable for
@@ -1226,7 +1346,7 @@ class ReachyWeb(ReachyMiniApp):
         assert url.hostname is not None and url.port is not None
         # overridable for local dev: the desktop app holds 127.0.0.1:8042 for the
         # apps it hosts, and on macOS both binds silently coexist — localhost then
-        # resolves to the desktop app, not to us (scripts/run.sh detects this)
+        # resolves to the desktop app, not to us (run.sh detects this)
         port = int(os.environ.get("REACHY_WEB_PORT", url.port))
 
         server = uvicorn.Server(

reachy_web/static/css/app.css

@@ -384,9 +384,6 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .h-36 {
-    height: calc(var(--spacing) * 36);
-  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
@@ -855,9 +852,6 @@
   .text-left {
     text-align: left;
   }
-  .text-right {
-    text-align: right;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1704,6 +1698,14 @@
 .hidden {
   display: none !important;
 }
+@media (min-width: 40rem) {
+  .sm\:flex.hidden {
+    display: flex !important;
+  }
+  .sm\:grid.hidden {
+    display: grid !important;
+  }
+}
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

reachy_web/static/css/audio_eq.css

@@ -11,3 +11,58 @@
   color: var(--txt);
   font: inherit;
 }
+
+/* the real graphic EQ: a row of vertical band sliders, like the EasyEffects one */
+.eq-graphic-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.eq-flat {
+  border: 1px solid var(--line);
+  background: var(--soft);
+  color: var(--mut);
+  font: 600 0.72rem/1 inherit;
+  text-transform: none;
+  letter-spacing: 0;
+  padding: 4px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.eq-flat:hover { border-color: var(--acc); color: var(--acc); }
+
+.eq-bands {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  padding: 6px 2px 2px;
+  overflow-x: auto;
+}
+.eq-band {
+  flex: 1 1 0;
+  min-width: 26px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.eq-band-val {
+  font: 600 0.7rem/1 ui-monospace, "SF Mono", Menlo, monospace;
+  color: var(--mut);
+  font-variant-numeric: tabular-nums;
+}
+.eq-band-slider {
+  appearance: slider-vertical;            /* older Chromium / WebKit */
+  -webkit-appearance: slider-vertical;
+  writing-mode: vertical-lr;              /* Chrome 121+, Firefox */
+  direction: rtl;                         /* up = higher gain */
+  width: 18px;
+  height: 116px;
+  accent-color: var(--acc);
+  cursor: ns-resize;
+}
+.eq-band-hz {
+  font-size: 0.66rem;
+  color: var(--mut);
+  font-variant-numeric: tabular-nums;
+}

reachy_web/static/css/icons.css

@@ -26,6 +26,19 @@
 .i-flash { --i: url(../assets/icons/flash.svg); }
 .i-fullscreen { --i: url(../assets/icons/fullscreen.svg); }
 .i-hand-wave { --i: url(../assets/icons/hand-wave.svg); }
+.i-hand-back-right { --i: url(../assets/icons/hand-back-right.svg); }
+.i-gesture-swipe-horizontal { --i: url(../assets/icons/gesture-swipe-horizontal.svg); }
+.i-axis-x-arrow { --i: url(../assets/icons/axis-x-arrow.svg); }
+.i-axis-y-arrow { --i: url(../assets/icons/axis-y-arrow.svg); }
+.i-axis-z-arrow { --i: url(../assets/icons/axis-z-arrow.svg); }
+.i-axis-x-rotate-clockwise { --i: url(../assets/icons/axis-x-rotate-clockwise.svg); }
+.i-axis-y-rotate-clockwise { --i: url(../assets/icons/axis-y-rotate-clockwise.svg); }
+.i-axis-z-rotate-clockwise { --i: url(../assets/icons/axis-z-rotate-clockwise.svg); }
+.i-antenna { --i: url(../assets/icons/antenna.svg); }
+.i-rotate-3d-variant { --i: url(../assets/icons/rotate-3d-variant.svg); }
+.i-brightness-6 { --i: url(../assets/icons/brightness-6.svg); }
+.i-chevron-left { --i: url(../assets/icons/chevron-left.svg); }
+.i-tray-arrow-up { --i: url(../assets/icons/tray-arrow-up.svg); }
 .i-login-variant { --i: url(../assets/icons/login-variant.svg); }
 .i-home { --i: url(../assets/icons/home.svg); }
 .i-heart { --i: url(../assets/icons/heart.svg); }
@@ -36,6 +49,7 @@
 .i-music-note { --i: url(../assets/icons/music-note.svg); }
 .i-open-in-new { --i: url(../assets/icons/open-in-new.svg); }
 .i-package-variant-closed { --i: url(../assets/icons/package-variant-closed.svg); }
+.i-eye-outline { --i: url(../assets/icons/eye-outline.svg); }
 .i-motion-play-outline { --i: url(../assets/icons/motion-play-outline.svg); }
 .i-palette { --i: url(../assets/icons/palette.svg); }
 .i-pause { --i: url(../assets/icons/pause.svg); }

reachy_web/static/css/logo.css

@@ -5,10 +5,21 @@
    so every keyframe set here runs ONCE and lands back on the resting pose.
    Y axis only on the eyes (never X); each antenna pivots where it leaves the head. */
 
+/* Dark mode: the antennas (stem + ball) are the only ink that sits OUTSIDE the
+   white head, on the dark page — the #1b2330 brand ink makes them vanish there.
+   Lift just those to a light tone (CSS wins over the inline stroke/fill). Never
+   touch the eyes/wink: they are dark ON the white head, and must stay dark. */
+:root[data-theme="dark"] .lg-ant-l path,
+:root[data-theme="dark"] .lg-ant-r path { stroke: #e8eaed; }
+:root[data-theme="dark"] .lg-ball { fill: #e8eaed; }
+
 .lg-ant-l { transform-box: fill-box; transform-origin: 100% 100%; }
 .lg-ant-r { transform-box: fill-box; transform-origin: 0% 100%; }
 .lg-eye, .lg-wink { transform-box: fill-box; transform-origin: center; }
 .lg-wink { opacity: 0; }   /* the wink curve only shows while an eye is shut */
+/* whole-mark and head-only groups, for the body moves */
+.lg-all { transform-box: fill-box; transform-origin: center bottom; }
+.lg-hg  { transform-box: fill-box; transform-origin: 27px 44.2px; }  /* the HEAD centre: the antennas now live inside this group, whose fill-box grew upward, so `center` would pivot above the head */
 
 /* ===== the antennas never go still =====
    A permanent, tiny breath on the PARENT group of each antenna. It has to be the
@@ -107,21 +118,44 @@
 }
 @keyframes lgExEye { 0% { transform: scale(1) } 18% { transform: scale(1.28) } 70% { transform: scale(1.28) } 100% { transform: scale(1) } }
 
-/* ================= 9. BOOT — the eyes flicker on, CRT style (1.6s) ================= */
-.v-boot .lg-eye-l { animation: lgBootL 1.6s steps(1) 1 both; }
-.v-boot .lg-eye-r { animation: lgBootR 1.6s steps(1) 1 both; }
-.v-boot .lg-ant-l { animation: lgBootAnt 1.6s ease-out 1 both; }
-@keyframes lgBootL {
-  0%, 10% { opacity: 0 }
-  14% { opacity: 1 } 18% { opacity: 0 } 24% { opacity: 1 } 28% { opacity: 0 }
-  34%, 100% { opacity: 1 }
+/* ================= 9. BOOT — wakes up, heavy lids first (2.2s) ================= */
+/* eyes start shut, crack open, droop back (too heavy), second try, then a wide
+   stretch past rest. The right eye wakes a beat after the left (the asymmetry
+   canon), and the antennas rise from their sleep droop as the eyes open. */
+.v-boot .lg-eye-l { animation: lgWakeL 2.2s ease-in-out 1 both; }
+.v-boot .lg-eye-r { animation: lgWakeR 2.2s ease-in-out 1 both; }
+.v-boot .lg-ant-l { animation: lgWakeAntL 2.2s ease-in-out 1 both; }
+.v-boot .lg-ant-r { animation: lgWakeAntR 2.2s ease-in-out 1 both; }
+@keyframes lgWakeL {
+  0%   { transform: scaleY(.08) }    /* asleep */
+  22%  { transform: scaleY(.45) }    /* first crack */
+  38%  { transform: scaleY(.16) }    /* lids too heavy, droops back */
+  58%  { transform: scaleY(.55) }    /* second try */
+  74%  { transform: scaleY(1.25) }   /* wide awake stretch, past rest */
+  86%  { transform: scaleY(.92) }
+  100% { transform: scaleY(1) }
+}
+@keyframes lgWakeR {
+  0%, 12% { transform: scaleY(.08) } /* still asleep a beat longer */
+  32%  { transform: scaleY(.4) }
+  46%  { transform: scaleY(.14) }
+  64%  { transform: scaleY(.5) }
+  80%  { transform: scaleY(1.2) }
+  90%  { transform: scaleY(.88) }
+  100% { transform: scaleY(1) }
+}
+@keyframes lgWakeAntL {
+  0%, 30% { transform: rotate(-12deg) }   /* drooped in sleep */
+  70%  { transform: rotate(4deg) }        /* rises with the eyes */
+  85%  { transform: rotate(-2deg) }
+  100% { transform: rotate(0) }
 }
-@keyframes lgBootR {
-  0%, 22% { opacity: 0 }
-  26% { opacity: 1 } 30% { opacity: 0 } 38% { opacity: 1 } 42% { opacity: 0 }
-  48%, 100% { opacity: 1 }
+@keyframes lgWakeAntR {
+  0%, 40% { transform: rotate(10deg) }    /* the smaller one lags here too */
+  76%  { transform: rotate(-3deg) }
+  90%  { transform: rotate(1.5deg) }
+  100% { transform: rotate(0) }
 }
-@keyframes lgBootAnt { 0%, 40% { transform: rotate(0) } 52% { transform: rotate(-11deg) } 70% { transform: rotate(4deg) } 100% { transform: rotate(0) } }
 
 @media (prefers-reduced-motion: reduce) {
   .topbar-logo * { animation: none !important; }
@@ -153,3 +187,37 @@
   72%       { opacity: 1; transform: translateY(0) }       /* worn ~1.6s */
   86%, 100% { opacity: 0; transform: translateY(-28px) }   /* lifted off */
 }
+
+/* ================= 12. PENDULE — the whole mark swings and settles (2.6s) ================= */
+.v-pendule .lg-all { animation: lgPend 2.6s ease-in-out 1 both; }
+@keyframes lgPend { 0%{transform:rotate(0)} 18%{transform:rotate(-6deg)} 42%{transform:rotate(5deg)} 64%{transform:rotate(-3deg)} 82%{transform:rotate(1.5deg)} 100%{transform:rotate(0)} }
+
+/* ================= 13. TWIST — head one way, eyes the other (1.8s) ================= */
+.v-twist .lg-hg { animation: lgTwistH 1.8s ease-in-out 1 both; }
+.v-twist .lg-eye-l, .v-twist .lg-eye-r { animation: lgTwistE 1.8s ease-in-out 1 both; }
+@keyframes lgTwistH { 0%,100%{transform:rotate(0)} 16%{transform:rotate(-8deg)} 40%{transform:rotate(8deg)} 64%{transform:rotate(-5deg)} 84%{transform:rotate(2deg)} }
+@keyframes lgTwistE { 0%,100%{transform:translateX(0)} 16%{transform:translateX(2.4px)} 40%{transform:translateX(-2.4px)} 64%{transform:translateX(1.5px)} 84%{transform:translateX(-.6px)} }
+
+/* ================= 14. SHIMMY — a lateral head vibration burst (1.3s) ================= */
+.v-shimmy .lg-hg { animation: lgShimmy 1.3s linear 1 both; }
+@keyframes lgShimmy { 0%,100%{transform:translateX(0)} 8%,24%,40%,56%,72%{transform:translateX(-2.2px)} 16%,32%,48%,64%,84%{transform:translateX(2.2px)} }
+
+/* ================= 15. PIROUETTE — a full 360, bold (1.6s) ================= */
+.v-pirouette .lg-all { transform-origin: center; animation: lgPir 1.6s cubic-bezier(.5,.1,.2,1) 1 both; }
+@keyframes lgPir { 0%{transform:rotate(0)} 12%{transform:rotate(-8deg)} 88%,100%{transform:rotate(360deg)} }
+
+/* ================= 16. BOING — the antennas spring, one after the other (1.7s) ================= */
+.v-boing .lg-ant-l { animation: lgBoingL 1.7s ease-out 1 both; }
+.v-boing .lg-ant-r { animation: lgBoingR 1.7s ease-out 1 both; }
+@keyframes lgBoingL { 0%,100%{transform:scaleY(1)} 12%{transform:scaleY(.68)} 26%{transform:scaleY(1.18)} 40%{transform:scaleY(.9)} 54%{transform:scaleY(1.05)} 70%{transform:scaleY(1)} }
+@keyframes lgBoingR { 0%,10%{transform:scaleY(1)} 22%{transform:scaleY(.68)} 36%{transform:scaleY(1.18)} 50%{transform:scaleY(.9)} 64%{transform:scaleY(1.05)} 80%,100%{transform:scaleY(1)} }
+
+/* ================= 17. COUCOU-TÊTE — sinks out of frame, pops back (2.6s) ================= */
+.v-coucoutete .lg-all { animation: lgPeek 2.6s ease-in-out 1 both; }
+@keyframes lgPeek { 0%,6%{transform:translateY(0)} 28%,55%{transform:translateY(15px)} 70%{transform:translateY(-3px)} 82%{transform:translateY(1px)} 100%{transform:translateY(0)} }
+
+/* ================= 18. CURIEUX — the head shifts over to see better (2.4s) ================= */
+.v-curieux .lg-hg { animation: lgCurH 2.4s ease-in-out 1 both; }
+.v-curieux .lg-eye-l, .v-curieux .lg-eye-r { animation: lgCurE 2.4s ease-in-out 1 both; }
+@keyframes lgCurH { 0%,100%{transform:translateX(0)} 18%,70%{transform:translateX(5px)} }
+@keyframes lgCurE { 0%,100%{transform:translateX(0)} 18%,70%{transform:translateX(2.4px)} }

reachy_web/static/css/logs.css

@@ -396,13 +396,15 @@
 
 .cp-row {
     display: grid;
-    grid-template-columns: 4.5rem 1fr 3.2rem;
+    grid-template-columns: 6rem 1fr 3.2rem;
     align-items: center;
     gap: 10px;
     padding: 5px 0;
 }
 
-.cp-label { font-size: 0.85rem; color: var(--txt); }
+.cp-label { font-size: 0.85rem; color: var(--txt); display: flex; align-items: center; gap: 6px; }
+/* the per-movement icon sits before the label, muted so the text still leads */
+.cp-label .ic { flex: none; color: var(--mut); font-size: 1.05rem; }
 
 .cp-val {
     font-family: ui-monospace, "SF Mono", Menlo, monospace;
@@ -429,104 +431,315 @@
 
 .cp-hint { font-size: 0.78rem; color: var(--mut); line-height: 1.5; }
 
-/* the ring left where you clicked to aim the head */
-.look-ping {
-    position: absolute;
-    width: 26px;
-    height: 26px;
-    margin: -13px 0 0 -13px;
-    border: 2px solid var(--acc);
-    border-radius: 50%;
-    pointer-events: none;
-    animation: look-ping 0.7s ease-out forwards;
-    z-index: 12;
-}
-
-@keyframes look-ping {
-    from { transform: scale(0.4); opacity: 1; }
-    to   { transform: scale(1.6); opacity: 0; }
+/* ===================== the puppet =====================
+   The controller IS the robot: two stages, front and side, each a hand-drawn
+   Reachy (cartoon reference × house DA) whose parts are the controls. Every
+   grabbable part shows it: cursor grab, and a soft accent halo on hover so the
+   handle announces itself (affordance). */
+.cp-stage-duo {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 16px;
+    min-width: 0;
+    position: relative;   /* anchors the colour-picker popover across both stages */
 }
 
-/* the two joysticks: a square face, a knob you drag. No spring-back — the pose
-   stands until you move it again or press rest, exactly like the desktop app. */
-.cp-pad { margin: 4px 0 12px; }
-
-.cp-pad-face {
+/* flex-basis 0 + min-width 0 is the only combo that lets an svg-filled box
+   shrink below the svg's intrinsic width (a grid fr / auto column would spill
+   the side view past the drawer edge). The front gets a touch more room. */
+.cp-stage {
     position: relative;
-    width: 100%;
-    aspect-ratio: 1;
-    max-width: 160px;
-    margin: 0 auto;
+    flex: 1 1 0;
+    min-width: 0;
+    background: var(--soft);
     border: 1px solid var(--line);
     border-radius: 14px;
+    padding: 8px;
+    touch-action: none;   /* the whole point is dragging; never scroll-pan here */
+}
+/* equal stages: both puppet SVGs now share the 240x360 frame, so equal width =
+   equal height, and the two robots line up */
+.cp-stage svg { display: block; width: 100%; height: auto; }
+
+/* the ink/cream sticker pile: dark strokes readable on the dark theme because
+   each rides a cream rim underneath (drawn first, wider) */
+.pk-ink { stroke: #1b2330; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.pk-rim { stroke: #efe9dd; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.pk-sleeve { fill: #1b2330; stroke: #efe9dd; stroke-width: 3; }
+.pk-gloss { stroke: #ffffff; stroke-opacity: 0.8; stroke-width: 8; stroke-linecap: round; fill: none; }
+.pk-iris { fill: #2a3140; transition: fill 0.3s; }
+
+/* grabbable parts: the hand and the halo say "move me" (affordance). The head
+   blocks and antennas ease so a drag reads as motion, not teleport. */
+[data-grab] { cursor: grab; }
+[data-grab]:active { cursor: grabbing; }
+[data-grab] > rect:first-of-type,
+[data-grab] > path,
+[data-grab] > ellipse,
+[data-grab] > circle { transition: filter 0.12s; }
+.cp-stage [data-grab]:hover { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 65%, transparent)); }
+#cp-pf-head, #cp-ps-head, [data-grab="body"], [data-grab="antl"], [data-grab="antr"] {
+    transition: transform 0.09s linear;
+}
+/* the eyes announce they are the color picker */
+[data-eyes-open] { cursor: pointer; }
+
+/* ===================== eyes: color picker =====================
+   Visible IN the eyes section (not a popover): a horizontal STRIP of vignette
+   cards (same face-with-LED-dots look as the effects), the OFF card FIRST.
+   Vertical padding leaves room for the .on selection ring so it is never clipped
+   by the scroll box. */
+.cp-picker {
+    display: flex;
+    gap: 6px;
+    padding: 6px 2px;   /* the vertical pad keeps the .on ring off the clip edge */
+    margin-bottom: 10px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--line) transparent;
+}
+.cp-picker.hidden { display: none; }
+.cp-picker::-webkit-scrollbar { height: 7px; }
+.cp-picker::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
+
+.eye-chip {
+    flex: 0 0 auto;
+    width: 38px;
+    padding: 0;
+    border-radius: 10px;
+    border: 1px solid var(--line);
     background: var(--soft);
-    cursor: grab;
-    touch-action: none;
+    cursor: pointer;
+    overflow: hidden;
+    transition: border-color 0.15s, box-shadow 0.15s;
 }
+.eye-chip:hover { border-color: var(--acc); }
+.eye-chip.on { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
 
-.cp-pad-face:active { cursor: grabbing; }
-
-/* the faint Reachy behind the knob — context for what the pad moves */
-.cp-diagram {
+/* the vignette: a dark face with the two LED dots (left bigger, canon) */
+.eye-face {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16%;
+    width: 100%;
+    aspect-ratio: 1;
+    background: #10151c;
+}
+.eye-face .eye-dot { width: 27%; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
+.eye-face .eye-dot.r { width: 21%; }
+.eye-chip:not([data-eyes-color="OFF"]) .eye-dot { box-shadow: 0 0 6px currentColor; }
+/* OFF: two UNLIT lenses drawn as visible rings, so the "off" card reads as a
+   real card and not an empty dark square (dark dots on a dark face vanished) */
+.eye-face.off .eye-dot { background: transparent; box-shadow: inset 0 0 0 2px #626c7a; }
+
+/* the module palette, literal on purpose (like the HF ambers) */
+.eye-chip[data-eyes-color="WHITE"]   .eye-dot { color: #f5f5f0; }
+.eye-chip[data-eyes-color="RED"]     .eye-dot { color: #e5232a; }
+.eye-chip[data-eyes-color="AMBER"]   .eye-dot { color: #ffb300; }
+.eye-chip[data-eyes-color="GREEN"]   .eye-dot { color: #1fbf3a; }
+.eye-chip[data-eyes-color="CYAN"]    .eye-dot { color: #00c8d7; }
+.eye-chip[data-eyes-color="BLUE"]    .eye-dot { color: #1e5bff; }
+.eye-chip[data-eyes-color="MAGENTA"] .eye-dot { color: #e0219e; }
+
+/* the custom card: a full colour WHEEL (native <input type=color>, laid over the
+   card so a click opens it). At rest the two lenses show a rainbow hint; once a
+   free colour is picked, markEyes() paints them that colour inline. */
+.eye-custom { position: relative; }
+.eye-custom input[type="color"] {
     position: absolute;
-    inset: 12%;
-    width: 76%;
-    height: 76%;
-    pointer-events: none;
-    opacity: 0.5;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    opacity: 0;
+    cursor: pointer;
 }
+.eye-custom .eye-dot { background: conic-gradient(from -90deg, red, #ff0, lime, cyan, blue, magenta, red); box-shadow: none; }
+
+/* the catalogue strips clip the selection ring at the top (overflow-y:hidden +
+   only a bottom pad in app.css); give it room so the .on accent is not cut */
+.skin-list { padding-top: 8px; }
 
-.cp-diagram [class^="cp-dia-"] {
-    fill: none;
-    stroke: var(--mut);
-    stroke-width: 3;
-    stroke-linejoin: round;
-    stroke-linecap: round;
+/* ===================== eyes: effect vignettes =====================
+   The Effects strip in the catalogue. Cards ride the .skin-chip gabarit; the
+   vignette is a dark face with the two LED dots (left one bigger, canon) whose
+   CSS animation previews what the scenario does. Colors are the firmware's. */
+.fx-face {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16%;
+    background: #10151c;   /* LEDs read on dark, whatever the theme */
 }
 
-.cp-dia-eye { fill: var(--mut); stroke: none; }
-.cp-dia-ant { stroke-width: 2.6; }
+.sc-eye {
+    width: 24%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: #00c8d7;
+}
+.sc-eye.r { width: 19%; }
+/* the OFF vignette (first card in the strip): two UNLIT lenses drawn as rings,
+   so "éteint" reads as a real card, not an empty dark face */
+.fx-off .sc-eye { background: transparent; box-shadow: inset 0 0 0 2px #626c7a; }
 
-/* the face group rocks with the knob (set inline in bindPad); ease it so a
-   drag reads as motion, not teleporting */
-.cp-dia-bot {
-    transform-box: fill-box;
-    transform-origin: center;
-    transition: transform 0.08s linear;
+@media (prefers-reduced-motion: reduce) {
+    .fx-face .sc-eye { animation: none !important; }
 }
 
-.cp-pad-axis-x,
-.cp-pad-axis-y {
-    position: absolute;
-    background: var(--line);
-    pointer-events: none;
+/* wink: cyan, each eye closing on its own incommensurate beat */
+@keyframes fx-wink { 0%, 88%, 100% { transform: scaleY(1); } 92%, 96% { transform: scaleY(0.08); } }
+.sc-wink .sc-eye.l { animation: fx-wink 3.1s infinite; }
+.sc-wink .sc-eye.r { animation: fx-wink 4.7s 1.2s infinite; }
+
+/* breathe: a slow glow swell */
+@keyframes fx-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
+.sc-breathe .sc-eye { animation: fx-breathe 3s ease-in-out infinite; }
+
+/* smooth: the six colors, melted */
+@keyframes fx-smooth {
+    0%, 100% { background: #e5232a; } 16% { background: #00c8d7; }
+    33% { background: #ffb300; } 50% { background: #e0219e; }
+    66% { background: #1e5bff; } 83% { background: #1fbf3a; }
 }
+.sc-smooth .sc-eye { animation: fx-smooth 9s linear infinite; }
+
+/* disco: the same six, snapped */
+.sc-disco .sc-eye { animation: fx-smooth 1.8s steps(1) infinite; }
+
+/* chaos: each eye on its own fast random-looking snap */
+.sc-chaos .sc-eye.l { animation: fx-smooth 1.3s steps(1) infinite; }
+.sc-chaos .sc-eye.r { animation: fx-smooth 0.9s steps(1) 0.4s reverse infinite; }
+
+/* weewoo: red/blue swapping sides with a flash */
+@keyframes fx-weewoo-l { 0%, 49% { background: #e5232a; } 50%, 100% { background: #1e5bff; } }
+@keyframes fx-weewoo-r { 0%, 49% { background: #1e5bff; } 50%, 100% { background: #e5232a; } }
+@keyframes fx-strobe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+.sc-weewoo .sc-eye.l { animation: fx-weewoo-l 0.84s steps(1) infinite, fx-strobe 0.21s infinite; }
+.sc-weewoo .sc-eye.r { animation: fx-weewoo-r 0.84s steps(1) infinite, fx-strobe 0.21s 0.1s infinite; }
+
+/* pinpon: three quick blue pulses, one eye then the other */
+@keyframes fx-pinpon-l {
+    0%, 4% { opacity: 1; } 6%, 10% { opacity: 0.1; } 12%, 16% { opacity: 1; }
+    18%, 22% { opacity: 0.1; } 24%, 28% { opacity: 1; } 30%, 100% { opacity: 0.1; }
+}
+.sc-pinpon .sc-eye { background: #1e5bff; }
+.sc-pinpon .sc-eye.l { animation: fx-pinpon-l 1.6s infinite; }
+.sc-pinpon .sc-eye.r { animation: fx-pinpon-l 1.6s 0.8s infinite; }
+
+/* cylon: one red eye sweeping to the other */
+@keyframes fx-cylon-l { 0%, 45% { opacity: 1; } 55%, 95% { opacity: 0.08; } 100% { opacity: 1; } }
+.sc-cylon .sc-eye { background: #e5232a; }
+.sc-cylon .sc-eye.l { animation: fx-cylon-l 1.7s ease-in-out infinite; }
+.sc-cylon .sc-eye.r { animation: fx-cylon-l 1.7s 0.85s ease-in-out infinite; }
+
+/* anger: fast, intense red pulsing */
+@keyframes fx-anger { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.22); opacity: 1; } }
+.sc-anger .sc-eye { background: #e5232a; animation: fx-anger 0.4s ease-in-out infinite; }
+
+/* amazement: the quick white double-take flashes */
+@keyframes fx-amaze {
+    0%, 7% { background: #f5f5f0; } 8%, 16% { background: #00c8d7; }
+    17%, 24% { background: #f5f5f0; } 25%, 100% { background: #00c8d7; }
+}
+.sc-amazement .sc-eye { animation: fx-amaze 1.2s infinite; }
 
-.cp-pad-axis-x { left: 8%; right: 8%; top: 50%; height: 1px; }
-.cp-pad-axis-y { top: 8%; bottom: 8%; left: 50%; width: 1px; }
+/* heartbeat: the double red thump */
+@keyframes fx-heart {
+    0%, 100% { transform: scale(1); } 8% { transform: scale(1.25); }
+    16% { transform: scale(1); } 24% { transform: scale(1.25); } 32% { transform: scale(1); }
+}
+.sc-heart .sc-eye { background: #e5232a; animation: fx-heart 1.4s infinite; }
+
+/* hypno: cyan and magenta trading places */
+@keyframes fx-hypno-l { 0%, 100% { background: #00c8d7; } 50% { background: #e0219e; } }
+@keyframes fx-hypno-r { 0%, 100% { background: #e0219e; } 50% { background: #00c8d7; } }
+.sc-hypno .sc-eye.l { animation: fx-hypno-l 2.8s ease-in-out infinite; }
+.sc-hypno .sc-eye.r { animation: fx-hypno-r 2.8s ease-in-out infinite; }
+
+/* sunset: amber sinking to dark */
+@keyframes fx-sunset {
+    0% { background: #ffb300; opacity: 1; } 30% { background: #e0219e; opacity: 0.9; }
+    60% { background: #e5232a; opacity: 0.7; } 85%, 100% { background: #e5232a; opacity: 0.08; }
+}
+.sc-sunset .sc-eye { animation: fx-sunset 8s infinite; }
 
-.cp-pad-knob {
+/* the ring left where you clicked to aim the head */
+.look-ping {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 22px;
-    height: 22px;
-    margin: -11px 0 0 -11px;
+    width: 26px;
+    height: 26px;
+    margin: -13px 0 0 -13px;
+    border: 2px solid var(--acc);
     border-radius: 50%;
-    background: var(--acc);
-    box-shadow: 0 2px 10px color-mix(in srgb, var(--acc) 45%, transparent);
     pointer-events: none;
+    animation: look-ping 0.7s ease-out forwards;
+    z-index: 12;
 }
 
-.cp-pad-legend {
-    display: flex;
-    justify-content: space-between;
-    max-width: 160px;
-    margin: 6px auto 0;
+@keyframes look-ping {
+    from { transform: scale(0.4); opacity: 1; }
+    to   { transform: scale(1.6); opacity: 0; }
+}
+
+/* ===================== precision fold =====================
+   The numbers, for the meticulous: every axis as a plain slider, folded away by
+   default so the puppet is the face of the panel, not a wall of sliders. */
+/* the per-axis controls, always visible now (was a collapsed <details>) */
+.cp-precision { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
+
+.cp-section-title {
     font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
     color: var(--mut);
+    margin-bottom: 8px;
 }
 
+/* movement sequence (keyframes) */
+#cp-seq { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
+.cp-seq-count { font-weight: 500; letter-spacing: 0; text-transform: none; }
+.cp-seq-list { max-height: 168px; overflow-y: auto; margin-bottom: 8px; }
+.cp-seq-empty { font-size: 0.8rem; color: var(--mut); padding: 8px 2px; }
+.cp-seq-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 6px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.8rem;
+}
+.cp-seq-row:hover { background: var(--soft); }
+.cp-seq-row.on { background: color-mix(in srgb, var(--acc) 18%, var(--card)); }
+.cp-seq-n { flex: none; width: 1.4rem; text-align: right; color: var(--mut); font-variant-numeric: tabular-nums; }
+.cp-seq-desc { flex: 1; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
+.cp-seq-del { flex: none; border: 0; background: none; color: var(--mut); cursor: pointer; padding: 2px; border-radius: 6px; line-height: 0; }
+.cp-seq-del:hover { color: var(--bad); }
+.cp-seq-bar { display: flex; align-items: center; gap: 5px; }
+.cp-seq-sp { flex: 1; }
+.cp-seq-bar button {
+    flex: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    border: 1px solid var(--line);
+    background: var(--soft);
+    color: var(--txt);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.cp-seq-bar button:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
+.cp-seq-bar button:disabled { opacity: 0.4; cursor: default; }
+
 /* ===================== tabs (PiWRT style) =====================
    Pill buttons, not underlines: a card-coloured chip that fills with the accent
    when active — lifted straight from the PiWRT reference. Two content tabs here
@@ -775,3 +988,189 @@
     cursor: pointer;
 }
 .wifi-disconnect:hover { filter: brightness(1.08); }
+
+/* ============ simulator: top-right buttons + the "grab me" hint ============ */
+
+/* the help button lives next to the Camera/3D switch, top-right of the viewport.
+   When the switch is hidden (twin-only robot) the button sits alone at the edge. */
+.cam-topbtns {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 11;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+/* the mode switch keeps its look but drops its own absolute placement inside the row */
+.cam-topbtns .cam-seg { position: static; top: auto; right: auto; }
+
+.cam-iconbtn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    background: rgba(0, 0, 0, 0.5);
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    color: #e8eaed;
+    cursor: pointer;
+    padding: 0;
+}
+.cam-iconbtn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
+.cam-iconbtn.hidden { display: none; }
+.cam-iconbtn .ic { font-size: 1.05rem; }
+
+/* the hint card: dark glass pill, low-centre so it never hides the robot's head.
+   Fixed dark scheme on purpose (it floats over the 3D scene, like the switch). */
+.twin-hint {
+    position: absolute;
+    left: 50%;
+    bottom: 56px;
+    transform: translateX(-50%) translateY(6px);
+    z-index: 12;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    max-width: min(88%, 430px);
+    padding: 10px 8px 10px 14px;
+    border-radius: 14px;
+    background: rgba(0, 0, 0, 0.62);
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    color: #fff;
+    box-shadow: 0 12px 32px #00000055;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.twin-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
+.twin-hint.hidden { display: none; }
+.twin-hint-hand {
+    font-size: 1.9rem;
+    color: var(--acc);
+    flex: 0 0 auto;
+    transform-origin: 60% 90%;
+    animation: twinHintDrag 1.9s ease-in-out infinite;
+}
+.twin-hint-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
+.twin-hint-txt strong { font-size: 0.9rem; font-weight: 700; }
+.twin-hint-txt span { font-size: 0.8rem; opacity: 0.85; }
+.twin-hint-x {
+    flex: 0 0 auto;
+    color: rgba(255, 255, 255, 0.7);
+    background: none;
+    border: 0;
+    cursor: pointer;
+    padding: 4px 6px;
+    align-self: flex-start;
+}
+.twin-hint-x:hover { color: #fff; }
+
+/* the hand mimes a grab-and-drag: a little dip (grab), then a left↔right slide */
+@keyframes twinHintDrag {
+    0%, 100% { transform: translateX(-8px) rotate(-6deg); }
+    50%      { transform: translateX(8px) rotate(6deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .twin-hint-hand { animation: none; }
+}
+
+/* ===================== app stage =====================
+   A running app's own UI in an iframe, splitting the screen next to the
+   dashboard. Toolbar hidden until you hover the top strip; a small screen gets a
+   permanent Dashboard/App switch instead. */
+
+.astage {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 50vw;
+    z-index: 35;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg);
+    border-left: 1px solid var(--line);
+    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.4);
+    transform: translateX(100%);
+    transition: transform 0.25s ease;
+}
+
+.astage-frame { flex: 1; width: 100%; border: 0; background: #fff; }
+
+/* the hover strip: hidden until the pointer is over the top of the stage */
+.astage-bar {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 9px;
+    background: color-mix(in srgb, var(--card) 90%, transparent);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--line);
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.astage:hover .astage-bar, .astage-bar:focus-within { opacity: 1; transform: none; }
+
+/* a faint grab pill so you know the bar is up there */
+.astage::after {
+    content: "";
+    position: absolute;
+    top: 5px; left: 50%;
+    transform: translateX(-50%);
+    width: 40px; height: 4px;
+    border-radius: 999px;
+    background: var(--line);
+    z-index: 1;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+}
+.astage:hover::after { opacity: 0; }
+
+.astage-name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.88rem; min-width: 0; }
+.astage-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.astage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px var(--ok); flex: none; }
+.astage-perf { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.72rem; color: var(--mut); flex: none; }
+.astage-fps-val { font-family: ui-monospace, Menlo, monospace; color: var(--txt); min-width: 44px; }
+.astage-actions { display: flex; gap: 2px; flex: none; }
+.astage-actions button {
+    width: 30px; height: 30px;
+    border: none; background: none;
+    color: var(--mut);
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+}
+.astage-actions button:hover { background: var(--soft); color: var(--txt); }
+.astage-actions button.bad:hover { color: var(--bad); }
+
+/* the mobile Dashboard/App switch — a floating pill, small screens only */
+.aswitch { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 47; }
+.aswitch .seg { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
+
+/* desktop: the stage takes the right half, the dashboard the left */
+@media (min-width: 1024px) {
+    .astage.open { transform: none; }
+    body.app-open { padding-right: 50vw; }
+    .aswitch { display: none; }
+}
+
+/* small screens: full width, no split; the switch decides dashboard vs app, and
+   the toolbar is always visible (no hover on touch) */
+@media (max-width: 1023px) {
+    .astage { width: 100vw; border-left: none; }
+    body.app-mobile-show .astage { transform: none; }
+    .astage-bar { opacity: 1; transform: none; position: relative; }
+    .astage::after { display: none; }
+    .astage-frame { min-height: 0; }
+}

reachy_web/static/js/app_stage.js

@@ -0,0 +1,133 @@
+// App Stage — when an app runs, split the screen: the dashboard stays as it is
+// on the left, the app's OWN interface loads in an iframe on the right. The
+// app's toolbar is hidden and only appears on hover of the top strip (desktop);
+// on a small screen a permanent bar switches between Dashboard and App. The
+// daemon runs a single app at a time, so there is only ever one stage.
+const appStage = {
+  current: null,   // name of the app currently on the stage
+  url: null,       // its interface URL (on the robot)
+  fps: [],         // ring buffer of the control-loop frequency, for the sparkline
+  fpsTimer: null,
+
+  el: (id) => document.getElementById(id),
+
+  // Called by installedApps.showRunning: an app is running (with a URL) or not.
+  open: (app) => {
+    if (!app || !app.url) return;
+    const stage = appStage.el('app-stage');
+    if (!stage) return;
+    appStage.setMeta(app);
+    // same app already on the stage: don't reload its iframe on every 4 s poll
+    if (appStage.current === app.name) return;
+    appStage.current = app.name;
+    appStage.url = app.url;
+    const frame = appStage.el('astage-frame');
+    if (frame && frame.getAttribute('src') !== app.url) frame.setAttribute('src', app.url);
+    stage.classList.add('open');
+    stage.setAttribute('aria-hidden', 'false');
+    document.body.classList.add('app-open', 'app-mobile-show');   // mobile: show the app first
+    appStage.showSwitch(true);
+    appStage.mobileView('app');
+    appStage.startFps();
+  },
+
+  setMeta: (app) => {
+    const em = appStage.el('astage-emoji'), ti = appStage.el('astage-title');
+    if (em) em.textContent = app.emoji || '';
+    if (ti) ti.textContent = app.title || app.name || '';
+  },
+
+  // Hide the split. external=true when the poll saw the app already gone — then we
+  // do NOT ask the daemon to stop it again (it already stopped).
+  close: (external) => {
+    if (!appStage.current && !appStage.el('app-stage')?.classList.contains('open')) return;
+    const name = appStage.current;
+    const stage = appStage.el('app-stage');
+    if (stage) { stage.classList.remove('open'); stage.setAttribute('aria-hidden', 'true'); }
+    document.body.classList.remove('app-open', 'app-mobile-show');
+    appStage.showSwitch(false);
+    appStage.stopFps();
+    const frame = appStage.el('astage-frame');
+    if (frame) frame.setAttribute('src', 'about:blank');
+    appStage.current = null; appStage.url = null;
+    if (!external && name && typeof installedApps !== 'undefined') installedApps.stopApp(name);
+  },
+
+  reload: () => {
+    const f = appStage.el('astage-frame');
+    if (f && appStage.url) { f.setAttribute('src', 'about:blank'); requestAnimationFrame(() => f.setAttribute('src', appStage.url)); }
+  },
+
+  restart: async () => {
+    const name = appStage.current;
+    if (!name || typeof installedApps === 'undefined') return;
+    await installedApps.stopApp(name);
+    setTimeout(() => installedApps.startApp(name), 700);   // let it settle, then relaunch
+  },
+
+  // its true URL, in a real tab — coming back to the dashboard tab, the split and
+  // the iframe are still there
+  fullscreen: () => { if (appStage.url) window.open(appStage.url, '_blank', 'noopener'); },
+
+  // the app's stdout goes to the daemon log — open the logs panel, filtered to it
+  debug: () => {
+    if (typeof daemonLogs === 'undefined') return;
+    daemonLogs.openPanel();
+    const search = document.getElementById('lp-search');
+    if (search && appStage.current) {
+      search.value = appStage.current;
+      search.dispatchEvent(new Event('input'));
+    }
+  },
+
+  // --- mobile Dashboard / App switch ---------------------------------------
+  showSwitch: (on) => { const sw = appStage.el('app-switch'); if (sw) sw.hidden = !on; },
+  mobileView: (v) => {
+    document.body.classList.toggle('app-mobile-show', v === 'app');
+    appStage.el('app-switch')?.querySelectorAll('[data-aview]').forEach((b) =>
+      b.classList.toggle('on', b.dataset.aview === v));
+  },
+
+  // --- FPS = the robot's control-loop frequency (Hz), sampled ~1 Hz ---------
+  startFps: () => {
+    clearInterval(appStage.fpsTimer);
+    appStage.fps = [];
+    appStage.fpsTimer = setInterval(appStage.sampleFps, 1000);
+    appStage.sampleFps();
+  },
+  stopFps: () => { clearInterval(appStage.fpsTimer); appStage.fpsTimer = null; },
+  sampleFps: () => {
+    let hz = null;
+    try {
+      const b = daemon.currentStatus.backend_status;
+      hz = b && b.control_loop_stats && b.control_loop_stats.mean_control_loop_frequency;
+    } catch (e) { /* no data yet */ }
+    if (!Number.isFinite(hz)) return;
+    appStage.fps.push(hz);
+    if (appStage.fps.length > 40) appStage.fps.shift();
+    const path = appStage.el('astage-fps-line');
+    const val = appStage.el('astage-fps-val');
+    if (val) val.textContent = Math.round(hz) + ' Hz';
+    if (!path) return;
+    const n = appStage.fps.length;
+    const max = Math.max(60, ...appStage.fps);   // scale to at least 60 Hz
+    let d = '';
+    appStage.fps.forEach((v, i) => {
+      const x = (i / Math.max(1, n - 1)) * 70;
+      const y = 19 - (v / max) * 17;
+      d += (i ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1) + ' ';
+    });
+    path.setAttribute('d', d.trim());
+  },
+
+  init: () => {
+    appStage.el('astage-reload')?.addEventListener('click', appStage.reload);
+    appStage.el('astage-restart')?.addEventListener('click', appStage.restart);
+    appStage.el('astage-debug')?.addEventListener('click', appStage.debug);
+    appStage.el('astage-full')?.addEventListener('click', appStage.fullscreen);
+    appStage.el('astage-close')?.addEventListener('click', () => appStage.close(false));
+    appStage.el('app-switch')?.querySelectorAll('[data-aview]').forEach((b) =>
+      b.addEventListener('click', () => appStage.mobileView(b.dataset.aview)));
+  },
+};
+window.addEventListener('DOMContentLoaded', appStage.init);

reachy_web/static/js/apps.js

@@ -497,15 +497,43 @@ const installedApps = {
             }
             installedApps.currentlyRunningApp = data.info.name;
             const card = await installedApps.getCard(data.info);
+            // the app's own interface URL, pointed at the robot (custom_app_url is
+            // 0.0.0.0 in the manifest) — the App Stage embeds it in an iframe
+            let url = null;
+            const raw = data.info.extra?.custom_app_url;
+            if (raw) {
+                try { const u = new URL(raw); u.hostname = installedApps.appHost(); url = u.toString(); }
+                catch (e) { url = null; }
+            }
+            // The dashboard is ITSELF the current app when launched from the store
+            // or the desktop app. Never stage ourselves: our custom_app_url is this
+            // very page, so the split would embed the dashboard in its own iframe and
+            // squeeze the real one to half the screen forever (author/stars columns
+            // gone, everything cramped). Drop the URL so the stage stays closed.
+            const selfName = window.REACHY_WEB_CARD?.name;
+            let isSelf = !!(selfName && data.info.name === selfName);
+            if (!isSelf && url) {
+                try { isSelf = new URL(url).origin === location.origin; } catch (e) { /* keep false */ }
+            }
+            if (isSelf) url = null;
             installedApps.showRunning({
+                name: data.info.name,
                 emoji: card?.emoji || '',
                 title: card?.title || data.info.name,
+                url,
             });
         } catch (e) { /* keep the last known: a blip is not a stop */ }
     },
 
     showRunning: (app) => {
         if (typeof topbar !== 'undefined') topbar.setApp(app);
+        // the App Stage splits the screen with the running app's own UI. It opens
+        // only for an app that exposes a URL; a stop (app == null) closes it,
+        // flagged external so we don't ask the daemon to stop what already stopped.
+        if (typeof appStage !== 'undefined') {
+            if (app && app.url) appStage.open(app);
+            else appStage.close(true);
+        }
     },
 
     appUninstallLogHandler: async (appName, jobId) => {

reachy_web/static/js/audio_eq.js

@@ -17,21 +17,10 @@ const eqPanel = (function () {
   let wired = false;
   let detected = false;
 
-  // Are we served BY the robot (installed there, daemon on loopback) or from a
-  // laptop via run.sh (a remote daemon)? /system/info reports the daemon host;
-  // loopback ⇒ on the robot. Can't tell ⇒ treat as laptop and hide the EQ.
-  async function onRobot() {
-    try {
-      const info = await fetch('/system/info').then((r) => r.json());
-      const host = String(info.daemon_host || '').split(':')[0];
-      return ['127.0.0.1', 'localhost', '::1'].includes(host);
-    } catch (e) {
-      return false;
-    }
-  }
-
   // The opener (topbar icon + burger entry) shows ONLY when EasyEffects is running on
-  // the robot (the box that serves the dashboard). No EasyEffects there → no icon.
+  // the robot. Whether we are ON the robot is the BACKEND's call now (st.on_robot,
+  // from REACHY_WEB_ON_ROBOT) — the old frontend loopback probe wrongly hid the EQ on
+  // a robot whose daemon was cached under its mDNS name.
   async function refresh() {
     let st;
     try {
@@ -40,11 +29,7 @@ const eqPanel = (function () {
       return;
     }
     detected = !!(st && st.detected);
-    // The EQ acts on the box that SERVES the page. Run from a laptop (run.sh, a
-    // REMOTE daemon) that box is the laptop, not the robot, so the control is
-    // meaningless there — hide the opener whatever EasyEffects the laptop itself
-    // happens to run. Only ON the robot (loopback daemon) does the EQ mean anything.
-    const active = !!(st && st.running) && (await onRobot());
+    const active = !!(st && st.running && st.on_robot);
 
     // gate the two ways in on "active AND on the robot", not merely installed
     document.querySelectorAll('[data-eq-toggle], [data-eq-nav]')
@@ -53,7 +38,7 @@ const eqPanel = (function () {
 
     // panel body: controls when detected, a note when not
     el('eq-controls').classList.toggle('hidden', !detected);
-    el('eq-tone').classList.toggle('hidden', !detected);
+    el('eq-graphic').classList.toggle('hidden', !detected);
     el('eq-note').classList.toggle('hidden', detected);
     if (!detected) return;
 
@@ -69,25 +54,40 @@ const eqPanel = (function () {
       sel.appendChild(opt);
     });
 
+    // render the graphic EQ bands, but don't clobber sliders the user is dragging:
+    // only (re)build when the band set changed (open, or a band-count change)
+    const freqs = st.freqs || [];
+    if (el('eqBands').children.length !== freqs.length) renderBands(freqs, st.bands || []);
+
     if (!wired) wire();
     wired = true;
   }
 
-  function label(id, v) {
-    el(id).textContent = `${v > 0 ? '+' : ''}${v} dB`;
+  const fmtHz = (f) => (f >= 1000 ? `${f / 1000}k` : `${f}`);
+  const fmtGain = (v) => `${v > 0 ? '+' : ''}${Math.round(v)}`;
+
+  function renderBands(freqs, gains) {
+    const box = el('eqBands');
+    if (!box) return;
+    box.innerHTML = freqs.map((f, i) => `
+      <div class="eq-band">
+        <output class="eq-band-val" id="eqBandVal${i}">${fmtGain(gains[i] || 0)}</output>
+        <input type="range" class="eq-band-slider" id="eqBand${i}" data-i="${i}"
+               min="-12" max="12" step="1" value="${gains[i] || 0}">
+        <span class="eq-band-hz">${fmtHz(f)}</span>
+      </div>`).join('');
   }
 
-  function readTone() {
-    const bass = +el('eqBass').value;
-    const mid = +el('eqMid').value;
-    const treble = +el('eqTreble').value;
-    label('eqBassVal', bass);
-    label('eqMidVal', mid);
-    label('eqTrebleVal', treble);
-    return { bass, mid, treble };
-  }
+  const readBands = () =>
+    [...document.querySelectorAll('.eq-band-slider')]
+      .sort((a, b) => a.dataset.i - b.dataset.i)
+      .map((s) => +s.value);
 
-  let toneTimer = null;
+  let bandTimer = null;
+  const pushBands = () => {
+    clearTimeout(bandTimer);
+    bandTimer = setTimeout(() => post('/audio/eq/bands', { gains: readBands() }).catch(() => {}), 250);
+  };
 
   function wire() {
     el('eqEnabled').addEventListener('click', async () => {
@@ -104,20 +104,27 @@ const eqPanel = (function () {
       post('/audio/eq/preset', { preset: el('eqPreset').value }).catch(() => {});
     });
 
-    ['eqBass', 'eqMid', 'eqTreble'].forEach((id) => {
-      el(id).addEventListener('input', () => {
-        readTone();                                 // live labels, every frame
-        clearTimeout(toneTimer);                    // reload EasyEffects once the drag settles
-        toneTimer = setTimeout(() => post('/audio/eq/tone', readTone()).catch(() => {}), 250);
+    // one delegated listener on the strip: it survives every re-render of the bands
+    el('eqBands').addEventListener('input', (ev) => {
+      const s = ev.target.closest('.eq-band-slider');
+      if (!s) return;
+      const out = el('eqBandVal' + s.dataset.i);
+      if (out) out.textContent = fmtGain(+s.value);   // live label, every frame
+      pushBands();                                     // reload EasyEffects once it settles
+    });
+
+    el('eqFlat').addEventListener('click', () => {
+      document.querySelectorAll('.eq-band-slider').forEach((s) => {
+        s.value = 0;
+        const out = el('eqBandVal' + s.dataset.i);
+        if (out) out.textContent = '0';
       });
+      pushBands();
     });
   }
 
   function open() {
-    // one drawer at a time — they share the right edge
-    if (typeof controller !== 'undefined' && controller.isOpen) controller.close();
-    if (typeof daemonLogs !== 'undefined' && daemonLogs.isOpen && !daemonLogs.inline) daemonLogs.closePanel();
-    if (typeof settingsPanel !== 'undefined' && settingsPanel.isOpen) settingsPanel.close();
+    closeOtherDrawers('eq');   // one drawer at a time (shared right edge)
 
     const p = panel();
     if (!p) return;
@@ -147,12 +154,13 @@ const eqPanel = (function () {
       if (e.key === 'Escape' && eqPanel.isOpen) close();
     });
 
-    // a click on the layout behind the panel closes it — not inside it, not on the
-    // opener that would immediately reopen it
+    // a click on the layout behind the panel closes it — not inside it, and not
+    // on ANY drawer opener (switching drawers; closing on pointerdown would shift
+    // the page and eat that opener's click), nor the burger's eq entry
     document.addEventListener('pointerdown', (e) => {
       if (!eqPanel.isOpen) return;
       const p = panel();
-      if (p.contains(e.target) || e.target.closest('[data-eq-toggle], [data-eq-nav]')) return;
+      if (p.contains(e.target) || e.target.closest(window.DRAWER_OPENERS + ',[data-eq-nav]')) return;
       close();
     });
 

reachy_web/static/js/camera.js

@@ -172,11 +172,13 @@ const cameraView = {
     // it is visible on the immersive (page-coloured) background.
     document.getElementById('cam-reset-btn')?.classList.toggle('hidden', twin);
     document.getElementById('cam-close-btn')?.classList.toggle('hidden', twin);
-    const skinbar = document.getElementById('cam-skinbar');
-    if (skinbar) {
-      skinbar.classList.toggle('hidden', cameraView.mode !== '3d');
-      skinbar.classList.toggle('flex', cameraView.mode === '3d');
-    }
+    // the "grab me" help button + first-time hint belong to the simulator only
+    document.getElementById('twin-help-btn')?.classList.toggle('hidden', !twin);
+    if (twin) cameraView.showTwinHint(false);
+    else cameraView.hideTwinHint();
+    // the catalogue (skins/moves/effects tabs) stays whatever the viewport shows:
+    // picking a skin no longer requires the simulator view — the choice persists
+    // and the twin wears it the next time it is on screen (viewer3d.setSkin)
     if (cameraView.mode === '3d') cameraView.start3d();
     else if (cameraView.mode === 'mjpeg') cameraView.startMjpeg();
     else cameraView.startWebrtc();
@@ -241,6 +243,28 @@ const cameraView = {
     e.img.removeAttribute('src');
   },
 
+  // Show the video from the shared producer stream (set by whoever opened the
+  // session — the camera consume or the mic). One producer = one session, so
+  // both the picture and the mic read tracks off this single stream.
+  showSharedVideo: () => {
+    if (cameraView.mode === '3d' || !cameraView.openState) {
+      dbg(`[cam] showSharedVideo: not shown (mode=${cameraView.mode} open=${cameraView.openState})`);
+      return;
+    }
+    const s = cameraView.currentStream;
+    if (!s || !s.getVideoTracks().length) {
+      dbg(`[cam] showSharedVideo: no video track (stream=${!!s})`);
+      return;
+    }
+    const e = cameraView.els();
+    if (e.video.srcObject !== s) e.video.srcObject = s;
+    e.video.muted = !cameraView.listening;
+    e.video.play().catch(() => {});
+    cameraView.setMsg('');
+    if (typeof topbar !== 'undefined') topbar.setStatus('');
+    dbg('[cam] showSharedVideo: video shown ✓');
+  },
+
   startWebrtc: () => {
     const e = cameraView.els();
     cameraView.stop3d();
@@ -257,11 +281,18 @@ const cameraView = {
       return;
     }
 
-    cameraView.startEyes();
+    // The shared stream may already be flowing (the mic opened THE session first,
+    // on the twin, before we switched here): show its video, no new session.
+    dbg(`[cam] startWebrtc: session=${!!cameraView.session} currentStream=${!!cameraView.currentStream}`);
+    if (cameraView.currentStream && cameraView.currentStream.getVideoTracks().length) {
+      cameraView.showSharedVideo();
+      cameraView.waitStart = Date.now();
+      cameraView.waitForVideo();          // watchdog, in case it later drops
+      return;
+    }
 
-    cameraView.ensureApi();
-    const producers = cameraView.api.getAvailableProducers();
-    if (producers.length > 0) cameraView.consume(producers[0].id);
+    cameraView.startEyes();
+    cameraView.ensureSession();           // open THE shared session (once)
 
     // A booting robot takes far longer than the eight seconds we used to allow
     // before giving up — which is why the twin kept stealing the stage from a
@@ -278,7 +309,11 @@ const cameraView = {
   waitForVideo: () => {
     clearTimeout(cameraView.webrtcTimer);
     if (cameraView.mode !== 'webrtc' || !cameraView.openState) return;
-    if (cameraView.session) {
+    // DONE only when the shared stream actually carries video (a session existing
+    // is not enough — it may be a stream still negotiating, and the old code
+    // stopped waiting too early and left the spinner up).
+    if (cameraView.currentStream && cameraView.currentStream.getVideoTracks().length) {
+      cameraView.showSharedVideo();
       if (typeof topbar !== 'undefined') topbar.setStatus('');
       return;
     }
@@ -295,9 +330,8 @@ const cameraView = {
     }
 
     cameraView.startEyes();
-    cameraView.ensureApi();
-    const producers = cameraView.api.getAvailableProducers();
-    if (producers.length > 0) cameraView.consume(producers[0].id);
+    cameraView.ensureSession();
+    dbg(`[cam] waitForVideo: still waiting (session=${!!cameraView.session} stream=${!!cameraView.currentStream})`);
     cameraView.webrtcTimer = setTimeout(cameraView.waitForVideo, 2000);
   },
 
@@ -322,29 +356,79 @@ const cameraView = {
     });
     cameraView.api.registerProducersListener({
       producerAdded: (producer) => {
-        if (cameraView.mode === 'webrtc' && cameraView.openState && !cameraView.session)
-          cameraView.consume(producer.id);
-        else if (cameraView.listening && !cameraView.audioSession)
-          cameraView.listenViaWebrtc();
+        dbg('[cam] producerAdded:', producer.id, `mode=${cameraView.mode} open=${cameraView.openState}`);
+        // open THE shared session as soon as a producer appears and the viewport
+        // is up — the camera, the mic and listen all read off it.
+        if (cameraView.openState) cameraView.ensureSession();
         // the mic waveform rides the SAME producer — tell it the instant one is
-        // announced (event-driven, like the desktop app's registerProducersListener),
-        // so it never has to catch the producer with a polled snapshot and miss it.
+        // announced (event-driven, like the desktop app's registerProducersListener).
         if (typeof waveform !== 'undefined') waveform.onProducer();
       },
       producerRemoved: () => {},
     });
   },
 
+  // Rebuild the WebRTC api from scratch. Its signalling socket to the daemon dies
+  // when the robot powers off, and the recovered gstwebrtc-api does not
+  // re-enumerate producers on its own after that — so on power-ON it never sees
+  // the new producer and the viewport stays on the twin until a reload (a reload
+  // "fixing it" is exactly the tell: it just built a fresh api). Tearing it down
+  // on OFF means the next ensureApi() connects fresh and the camera returns.
+  resetApi: () => {
+    if (cameraView.session) { try { cameraView.session.close(); } catch (e) { /* gone */ } cameraView.session = null; }
+    if (cameraView.audioSession) { try { cameraView.audioSession.close(); } catch (e) { /* gone */ } cameraView.audioSession = null; }
+    cameraView.currentStream = null;
+    cameraView.api = null;
+  },
+
+  // The robot just came back (onState 'running'). Do exactly what a page reload
+  // does for the camera — the one thing that was known to fix "the camera does
+  // not return after OFF/ON": drop the stale WebRTC api, clear the one-shot
+  // guards (userPicked / switched) that a fresh load starts without, re-read
+  // /camera/status (mjpeg availability can change across a restart), then let the
+  // auto-switch probe again. No reload needed.
+  reprobe: () => {
+    cameraView.resetApi();
+    cameraView.userPicked = false;
+    if (typeof robotWake !== 'undefined') robotWake.switched = false;
+    fetch('/camera/status')
+      .then((r) => (r.ok ? r.json() : {}))
+      .then((s) => { cameraView.mjpegAvailable = !!s.mjpeg_available; })
+      .catch(() => {})
+      .finally(() => { if (typeof robotWake !== 'undefined') robotWake.probeCamera(); });
+  },
+
+  // THE single WebRTC consumer session on the daemon's ONE producer. Video AND
+  // audio (camera picture + mic + listen) all ride it — a second session on the
+  // same producer gets no media (that was the "video hangs, sound works" after
+  // OFF/ON: the mic had opened a rival session first). Everyone calls
+  // ensureSession and reads tracks off cameraView.currentStream; nobody opens
+  // their own. Created on demand by whoever needs the stream first.
+  ensureSession: () => {
+    if (cameraView.session) return;
+    cameraView.ensureApi();
+    const producers = cameraView.api ? cameraView.api.getAvailableProducers() : [];
+    if (!producers.length) { dbg('[cam] ensureSession: no producer yet'); return; }
+    dbg('[cam] ensureSession: creating THE session on', producers[0].id);
+    cameraView.consume(producers[0].id);
+  },
+
   consume: (producerId) => {
+    if (cameraView.session) { dbg('[cam] consume: session already open, skip'); return; }
     const e = cameraView.els();
     const session = cameraView.api.createConsumerSession(producerId);
     if (!session) {
+      console.warn('[cam] consume: createConsumerSession returned null');
       cameraView.setMsg(t('camera.webrtc_failed'));
       return;
     }
     cameraView.session = session;
-    session.addEventListener('error', (ev) => cameraView.setMsg(t('camera.webrtc_error', { message: ev.message })));
+    session.addEventListener('error', (ev) => {
+      console.warn('[cam] session error:', ev && ev.message);
+      cameraView.setMsg(t('camera.webrtc_error', { message: ev.message }));
+    });
     session.addEventListener('closed', () => {
+      dbg('[cam] session closed');
       e.video.pause();
       e.video.srcObject = null;
       cameraView.session = null;
@@ -355,19 +439,27 @@ const cameraView = {
       clearTimeout(cameraView.webrtcTimer);          // video: stop waiting
       cameraView.stopEyes();
       if (typeof topbar !== 'undefined') topbar.setStatus('');
-      if (session.streams.length > 0) {
-        e.video.srcObject = session.streams[0];
-        e.video.muted = !cameraView.listening;   // sound off by default
-        e.video.play().catch(() => {});
-        cameraView.setMsg('');
-        // this stream carries the mic's audio track too — hand it to the waveform
-        // so it analyses it client-side, sharing THE one session (a second
-        // consumer on the same producer gets no media)
-        cameraView.currentStream = session.streams[0];
-        if (typeof waveform !== 'undefined') waveform.onStream(session.streams[0]);
-      }
+      const stream = session.streams[0];
+      dbg(`[cam] streamsChanged: streams=${session.streams.length} video=${stream ? stream.getVideoTracks().length : 0} audio=${stream ? stream.getAudioTracks().length : 0}`);
+      if (!stream) return;
+      // ONE stream, shared: show the picture (if on the camera view), feed the
+      // listen audio, and hand the audio track to the mic waveform
+      cameraView.currentStream = stream;
+      cameraView.showSharedVideo();
+      if (cameraView.listening) cameraView.playListen();
+      if (typeof waveform !== 'undefined') waveform.onStream(stream);
     });
     session.connect();
+    dbg('[cam] consume: session.connect() called');
+  },
+
+  // play the shared stream's audio into the (muted-by-default) listen element
+  playListen: () => {
+    const e = cameraView.els();
+    const s = cameraView.currentStream;
+    if (!cameraView.listening || !s || !s.getAudioTracks().length || !e.audio) return;
+    e.audio.srcObject = new MediaStream(s.getAudioTracks());
+    e.audio.play().catch(() => {});
   },
 
   stopWebrtc: () => {
@@ -454,8 +546,62 @@ const cameraView = {
     const has = d.state === 'running' && d.no_media === false;
     const modes = document.getElementById('cam-modes');
     if (modes) modes.classList.toggle('hidden', !has);
-    // the camera went away while we were watching it: fall back to the twin
-    if (!has && cameraView.mode !== '3d') cameraView.setMode('3d', false);
+    // the camera went away (robot powered off, media stack dropped): fall back
+    // to the twin, and RE-ARM the auto-switch so the camera returns on its own
+    // when the robot comes back. This is the fix for "the camera does not
+    // reconnect after OFF/ON, I have to reload": a single earlier click on the
+    // Camera/3D toggle set userPicked for the whole session, and probeCamera()
+    // bails on userPicked, so the viewport stayed on the twin until a reload.
+    // A reload works precisely because it starts fresh with userPicked=false;
+    // clearing it here does the same without the reload. We only clear when the
+    // camera actually VANISHED (this !has branch), so a deliberate 3D choice
+    // made while the robot keeps running is still honoured.
+    if (!has && cameraView.mode !== '3d') {
+      cameraView.setMode('3d', false);
+      cameraView.userPicked = false;
+      if (typeof robotWake !== 'undefined') robotWake.switched = false;
+    }
+    // robot powered OFF (not merely media-released while running — that would
+    // fight the mic's own use of the api): drop the stale WebRTC api so a fresh
+    // one is built when the robot returns, else the camera only comes back on a
+    // reload. api is nulled, so this fires once, not every poll.
+    const off = d.state !== 'running' && d.state !== 'starting';
+    if (off && cameraView.api) cameraView.resetApi();
+    // keep the LIVE / SIM flag in step with the power on every poll
+    cameraView.updateSimFlag();
+  },
+
+  // --- simulator "grab me" hint --------------------------------------------
+  //
+  // The twin is draggable (head, body, antennas — viewer3d.bindHandles) but
+  // nothing on screen says so. The first time the simulator is shown we play a
+  // little animated hand that explains it; the top-right ? button replays it on
+  // demand. Only the twin has anything to grab, so the button and the hint live
+  // on the 3D view alone (startLive toggles them).
+  twinHintTimer: null,
+  twinHintSeen: () => {
+    try { return localStorage.getItem('twin-hint-seen') === '1'; } catch (e) { return false; }
+  },
+
+  showTwinHint: (force) => {
+    const hint = document.getElementById('twin-hint');
+    if (!hint) return;
+    if (!force && cameraView.twinHintSeen()) return;   // auto-shows once, ever
+    try { localStorage.setItem('twin-hint-seen', '1'); } catch (e) { /* private mode */ }
+    clearTimeout(cameraView.twinHintTimer);
+    hint.classList.remove('hidden');
+    void hint.offsetWidth;                 // reflow: re-showing restarts the fade-in
+    hint.classList.add('show');
+    // auto-dismiss after the hand has looped a few times
+    cameraView.twinHintTimer = setTimeout(cameraView.hideTwinHint, 8000);
+  },
+
+  hideTwinHint: () => {
+    clearTimeout(cameraView.twinHintTimer);
+    const hint = document.getElementById('twin-hint');
+    if (!hint) return;
+    hint.classList.remove('show');
+    setTimeout(() => hint.classList.add('hidden'), 320);   // after the fade-out
   },
 
   syncModes: () => {
@@ -475,6 +621,27 @@ const cameraView = {
       e.listenBtn.title = canListen ? t('camera.listen') : t('camera.listen_unavailable');
     }
     cameraView.syncListenIcon();
+    cameraView.updateSimFlag();
+  },
+
+  // The LIVE / SIM flag over the simulator: green (a real robot's joint stream
+  // is mirrored) vs amber (pure simulation). Only on the 3D view — on the camera
+  // view the picture is self-evidently the real feed. Called on every mode change
+  // and whenever the joint stream comes or goes (from viewer3d).
+  updateSimFlag: () => {
+    const flag = document.getElementById('cam-sim-flag');
+    if (!flag) return;
+    const on3d = cameraView.mode === '3d' && cameraView.openState;
+    const live = typeof viewer3d !== 'undefined' && viewer3d.streamLive();
+    flag.classList.toggle('hidden', !on3d);
+    flag.classList.toggle('flex', on3d);
+    if (!on3d) return;
+    const dot = document.getElementById('cam-sim-dot');
+    const txt = document.getElementById('cam-sim-text');
+    if (dot) dot.className = 'w-2.5 h-2.5 rounded-full ' + (live ? 'bg-green-500 animate-pulse' : 'bg-yellow-500');
+    // the sim label reuses the mode name (camera.mode_3d = "Simulateur"), so the
+    // flag and the switch always say the same thing
+    if (txt) txt.textContent = live ? t('camera.flag_live') : t('camera.mode_3d');
   },
 
   // --- sound: muted by default, on demand through the robot mics ------------------
@@ -502,31 +669,18 @@ const cameraView = {
     const e = cameraView.els();
     cameraView.listening = false;
     if (e.video) e.video.muted = true;
-    if (cameraView.audioSession) {
-      cameraView.audioSession.close();
-      cameraView.audioSession = null;
-    }
+    // just stop playing the audio; the shared session stays (the picture and the
+    // mic still need it) — we no longer own a separate audio session
     if (e.audio) { e.audio.pause(); e.audio.srcObject = null; }
     cameraView.syncListenIcon();
   },
 
+  // Listen now rides THE shared session too (no rival audio session): make sure
+  // the session is up, then play its audio. If the stream is not here yet, the
+  // session's streamsChanged calls playListen() when it lands.
   listenViaWebrtc: () => {
-    const e = cameraView.els();
-    cameraView.ensureApi();
-    const producers = cameraView.api.getAvailableProducers();
-    if (!producers.length) return;                    // producer not up (yet)
-    const session = cameraView.api.createConsumerSession(producers[0].id);
-    if (!session) return;
-    cameraView.audioSession = session;
-    session.addEventListener('streamsChanged', () => {
-      const stream = session.streams[0];
-      if (!stream) return;
-      const audioOnly = new MediaStream(stream.getAudioTracks());
-      e.audio.srcObject = audioOnly;
-      e.audio.play().catch(() => {});
-    });
-    session.addEventListener('closed', () => { cameraView.audioSession = null; });
-    session.connect();
+    cameraView.ensureSession();
+    cameraView.playListen();
   },
 
   syncListenIcon: () => {

reachy_web/static/js/controller.js

@@ -14,6 +14,26 @@
 //     completely silent — an idle panel costs the daemon nothing.
 //
 // Closing the panel walks the robot back to its rest pose, as the desktop does.
+
+// All the slide-in drawers (controller, settings, logs, equalizer) share the
+// right edge, so only one is open at a time, and clicking one opener while
+// another drawer is open must SWITCH, not merely close. Two rules make that
+// reliable, shared here (controller.js loads first, so every other drawer can
+// use these globals):
+//   1. a drawer's outside-click-to-close IGNORES clicks on ANY drawer opener —
+//      otherwise it closes on the pointerdown, and on a wide screen the
+//      `padding-right` it drops shifts the whole page LEFT out from under the
+//      pointer, so the opener never receives its `click` and the new drawer
+//      never opens (the "it just closes" bug);
+//   2. every open() closes the others.
+window.DRAWER_OPENERS = '[data-controller-toggle],[data-settings-toggle],[data-logs-toggle],[data-eq-toggle]';
+window.closeOtherDrawers = (except) => {
+  if (except !== 'controller' && typeof controller !== 'undefined' && controller.isOpen) controller.close();
+  if (except !== 'settings' && typeof settingsPanel !== 'undefined' && settingsPanel.isOpen) settingsPanel.close();
+  if (except !== 'logs' && typeof daemonLogs !== 'undefined' && daemonLogs.isOpen && !daemonLogs.inline) daemonLogs.closePanel();
+  if (except !== 'eq' && typeof eqPanel !== 'undefined' && eqPanel.isOpen) eqPanel.close();
+};
+
 const controller = {
   THROTTLE: 50,        // ms — the desktop's SEND_THROTTLE, ~20 Hz on the wire
   SETTLED: 0.01,       // every axis this close to target → stop talking
@@ -34,8 +54,13 @@ const controller = {
   //    That coupling is the one nothing enforced: yaw 68° with the body at 160°
   //    asks for 92° of neck, which no Stewart platform here can give.
   // Radians and metres.
+  //  · the OFFICIAL axis table (private_docs/resources/IMG_5025.PNG, Pollen's
+  //    own doc) gives the head's translation box: Tx -1.5…+2.5 cm, Ty ±4 cm —
+  //    seen from above the reachable area is a wide RECTANGLE, offset forward,
+  //    and the position pad draws exactly that box. (Both sit inside the
+  //    solver-bisected edges above, so every pad pose still solves.)
   LIMITS: {
-    x: 0.05, y: 0.05,
+    x: { min: -0.015, max: 0.025 }, y: 0.04,
     z: { min: -0.05, max: 0.02 },
     roll: 0.7854,             // 45°
     pitch: 0.7854,            // 45°
@@ -56,23 +81,32 @@ const controller = {
   current: null,     // where the smoother actually is
   lastGood: null,    // the last pose the robot's own IK could actually solve
 
+  // movement sequence (keyframes): each captured pose is one step; the list
+  // replays, steps back/forth, and saves to the marionette / RecordedMoves json
+  seq: [],
+  seqIdx: -1,
+  seqPlaying: false,
+  seqLastCap: 0,     // ms of the last capture, for natural replay timing
+
   // --- panel ------------------------------------------------------------
 
   toggle: () => (controller.isOpen ? controller.close() : controller.open()),
 
   open: () => {
-    // one drawer at a time: both are fixed to the right edge, so they would
-    // simply cover each other
-    if (typeof daemonLogs !== 'undefined' && daemonLogs.isOpen && !daemonLogs.inline) {
-      daemonLogs.closePanel();
-    }
+    closeOtherDrawers('controller');   // one drawer at a time (shared right edge)
     controller.build();
     if (!controller.root.isConnected) document.body.appendChild(controller.root);
     requestAnimationFrame(() => controller.root.classList.add('open'));
     document.body.classList.add('cp-open');
     controller.isOpen = true;
+    // stop the idle greeting AT ONCE: it also poses the twin via applyFrame, and
+    // if it is still running when you drag, the two sources alternate and the
+    // twin flickers between the sway pose and yours. (idle disarms itself on its
+    // next tick anyway, but not before a few contended frames.)
+    if (typeof idle !== 'undefined') idle.disarm();
     controller.connect();
     controller.loop();
+    controller.probeEyes();
   },
 
   close: () => {
@@ -91,59 +125,119 @@ const controller = {
   },
 
   // --- widgets ----------------------------------------------------------
+  //
+  // THE PUPPET (Pierre's pick among the affordance designs, private_docs/
+  // controller-affordance.html): no joysticks, no legend — the robot itself,
+  // front and side, and every part is the control for what it moves. The art
+  // mixes the house hand-drawn family with the cartoon reference (private_docs/
+  // resources/reachy-mini-cartoon.png): thick ink lines, cream shells, big
+  // glossy LED eyes, spring sleeves on the antennas — over REAL proportions
+  // (the body is the tall part). Ink strokes ride a cream "sticker rim" so the
+  // dark parts (antennas, foot, lens) stay readable on a dark theme.
+  //
+  // What grabs what (bindPuppet):
+  //   front head  → sideways + height (the two axes you SEE from the front)
+  //   camera dot  → the gaze (yaw + pitch — the camera is what looks)
+  //   antennas    → their angles, pivoting where they leave the skull
+  //   body        → body rotation (slide it sideways)
+  //   eyes        → the LED color ring (they ARE the picker)
+  //   side head   → forward/back + height (the axes you see from the side)
+  //   side lens   → pitch (nodding is THE profile gesture)
+  // Roll has no honest handle on either view: it lives in the precision fold.
 
-  pad: (id, labels) => `
-    <div class="cp-pad" data-pad="${id}">
-      <div class="cp-pad-face">
-        ${controller.diagram(id)}
-        <span class="cp-pad-axis-x"></span>
-        <span class="cp-pad-axis-y"></span>
-        <span class="cp-pad-knob"></span>
-      </div>
-      <div class="cp-pad-legend"><span>${labels[0]}</span><span>${labels[1]}</span></div>
-    </div>`,
-
-  // A faint Reachy behind each joystick, so you can SEE what the pad moves.
-  //   pos → looking straight DOWN on the robot: dragging slides the head across
-  //         that plane. Up on the pad is the robot's front (the eyes).
-  //   rot → looking at its FACE: dragging turns it (left/right) and tips it
-  //         (up/down). The whole drawing rocks with the knob so the axis is
-  //         unmistakable — it is wired up in bindPad.
-  // Traced from the loader's face (loader.js), same hand-drawn family as the
-  // tab and viewport icons.
-  diagram: (id) => id === 'pos'
-    ? `<svg class="cp-diagram" viewBox="0 0 120 120" aria-hidden="true">
-         <!-- top-down: a rectangular head (same width as the front view), the two
-              antennas to the back (top), the front edge toward the bottom. No eyes
-              — you do not see them looking straight down. -->
-         <g class="cp-dia-bot">
-           <path class="cp-dia-ant" d="M50 40 L40 16"/><circle class="cp-dia-ant" cx="39" cy="14" r="3.2"/>
-           <path class="cp-dia-ant" d="M70 40 L80 16"/><circle class="cp-dia-ant" cx="81" cy="14" r="3.2"/>
-           <rect class="cp-dia-head" x="34" y="38" width="52" height="46" rx="15"/>
-           <path class="cp-dia-front" d="M46 84 Q60 92 74 84"/>
-         </g>
-       </svg>`
-    : `<svg class="cp-diagram" viewBox="0 0 120 120" aria-hidden="true">
-         <!-- front: the face, the whole thing shifts with the knob to show where
-              it is looking -->
-         <g class="cp-dia-bot">
-           <path class="cp-dia-ant" d="M46 40 L38 18"/><circle class="cp-dia-ant" cx="37" cy="16" r="3.2"/>
-           <path class="cp-dia-ant" d="M74 40 L82 18"/><circle class="cp-dia-ant" cx="83" cy="16" r="3.2"/>
-           <rect class="cp-dia-head" x="34" y="38" width="52" height="40" rx="15"/>
-           <circle class="cp-dia-eye" cx="50" cy="58" r="8"/>
-           <circle class="cp-dia-eye" cx="72" cy="58" r="7"/>
-           <rect class="cp-dia-eye" x="58" y="57" width="8" height="2.4" rx="1.2"/>
-           <path class="cp-dia-body" d="M46 78 h28 q8 0 8 8 v6 q0 4 -4 4 h-36 q-4 0 -4 -4 v-6 q0 -8 8 -8 z"/>
-         </g>
-       </svg>`,
+  puppetFront: () => `
+    <svg viewBox="0 0 240 360" id="cp-p-front">
+      <g id="cp-pf-head" data-grab="head">
+        <g id="cp-pf-antl" data-grab="antl">
+          <path class="pk-rim" stroke-width="12" d="M82 56 L58 6"/>
+          <path class="pk-ink" stroke-width="6" d="M82 56 L58 6"/>
+          <circle cx="58" cy="6" r="6.6" fill="#efe9dd"/><circle cx="58" cy="6" r="5.2" fill="#1b2330"/>
+          <rect x="63" y="33" width="15" height="28" rx="7" class="pk-sleeve" transform="rotate(25.7 70.5 47)"/>
+        </g>
+        <g id="cp-pf-antr" data-grab="antr">
+          <path class="pk-rim" stroke-width="12" d="M158 56 L178 16"/>
+          <path class="pk-ink" stroke-width="6" d="M158 56 L178 16"/>
+          <circle cx="178" cy="16" r="5.6" fill="#efe9dd"/><circle cx="178" cy="16" r="4.3" fill="#1b2330"/>
+          <rect x="157" y="31" width="15" height="26" rx="7" class="pk-sleeve" transform="rotate(-26.6 164.5 44)"/>
+        </g>
+        <rect x="34" y="50" width="172" height="112" rx="42" fill="#efe9dd" stroke="#1b2330" stroke-width="7"/>
+        <path d="M56 80 Q62 62 90 57" class="pk-gloss"/>
+        <rect x="112" y="102" width="36" height="15" rx="7.5" fill="#20242e"/>
+        <g id="cp-pf-eyes">
+          <g data-eyes-open="1">
+            <circle cx="90" cy="110" r="32" fill="#20242e"/>
+            <circle class="pk-iris" cx="90" cy="110" r="25.4"/>
+            <ellipse cx="90" cy="126" rx="14" ry="6.5" fill="#8fa0bd" opacity=".33"/>
+            <circle cx="101" cy="98" r="8" fill="#fff" opacity=".95"/>
+            <circle cx="80" cy="117" r="3.4" fill="#fff" opacity=".8"/>
+          </g>
+          <g data-eyes-open="1">
+            <circle cx="168" cy="110" r="27.5" fill="#20242e"/>
+            <circle class="pk-iris" cx="168" cy="110" r="21.4"/>
+            <ellipse cx="168" cy="123" rx="12" ry="5.6" fill="#8fa0bd" opacity=".33"/>
+            <circle cx="177" cy="99" r="6.8" fill="#fff" opacity=".95"/>
+            <circle cx="160" cy="116" r="2.8" fill="#fff" opacity=".8"/>
+          </g>
+        </g>
+        <g id="cp-pf-cam" data-grab="gaze">
+          <circle cx="130" cy="109" r="10" fill="transparent"/>
+          <circle cx="130" cy="109" r="7.5" fill="#39414f"/>
+          <circle cx="130" cy="109" r="3.2" fill="#cbd5e1"/>
+        </g>
+      </g>
+      <g data-grab="body">
+        <ellipse cx="120" cy="174" rx="44" ry="11" fill="#1b2330" stroke="#efe9dd" stroke-width="2.5"/>
+        <path d="M76 178 Q66 178 63 192 Q50 232 50 268 Q50 306 84 309 L156 309 Q190 306 190 268 Q190 232 177 192 Q174 178 164 178 Z"
+              fill="#efe9dd" stroke="#1b2330" stroke-width="6.5" stroke-linejoin="round"/>
+        <path d="M70 198 Q60 256 68 286" class="pk-gloss" stroke-opacity=".65"/>
+        <path d="M55 288 L185 288" stroke="#1b2330" stroke-width="2.4" opacity=".3"/>
+        <circle id="cp-pf-seam" cx="120" cy="232" r="4.5" fill="#1b2330" opacity=".35"/>
+        <path d="M56 303 Q56 322 84 322 L156 322 Q184 322 184 303 L184 300 L56 300 Z"
+              fill="#1b2330" stroke="#efe9dd" stroke-width="2.5"/>
+      </g>
+    </svg>`,
+
+  puppetSide: () => `
+    <!-- same 240x360 frame as the front (content 210 wide, centred by the -15
+         left offset) so both stages render at the SAME height side by side -->
+    <svg viewBox="-15 0 240 360" id="cp-p-side">
+      <g id="cp-ps-head" data-grab="sidehead">
+        <g opacity=".3">
+          <path class="pk-rim" stroke-width="9" d="M78 54 L62 8"/>
+          <path class="pk-ink" stroke-width="4.5" d="M78 54 L62 8"/>
+          <circle cx="62" cy="8" r="4.2" fill="#1b2330"/>
+        </g>
+        <path class="pk-rim" stroke-width="12" d="M64 56 L44 10"/>
+        <path class="pk-ink" stroke-width="6" d="M64 56 L44 10"/>
+        <circle cx="44" cy="10" r="6.6" fill="#efe9dd"/><circle cx="44" cy="10" r="5.2" fill="#1b2330"/>
+        <rect x="46" y="31" width="15" height="28" rx="7" class="pk-sleeve" transform="rotate(23.5 53.5 45)"/>
+        <rect x="22" y="50" width="132" height="112" rx="38" fill="#efe9dd" stroke="#1b2330" stroke-width="7"/>
+        <path d="M42 80 Q48 62 74 57" class="pk-gloss"/>
+        <g id="cp-ps-lens" data-grab="pitch">
+          <rect x="142" y="90" width="22" height="40" rx="8" fill="#20242e" stroke="#efe9dd" stroke-width="3"/>
+          <ellipse cx="163" cy="110" rx="9" ry="18" fill="#20242e" stroke="#efe9dd" stroke-width="3"/>
+          <ellipse class="pk-iris" cx="164" cy="110" rx="5.6" ry="13.5"/>
+          <ellipse cx="165.5" cy="101" rx="2.6" ry="4.6" fill="#fff" opacity=".9"/>
+        </g>
+      </g>
+      <g>
+        <ellipse cx="102" cy="174" rx="40" ry="11" fill="#1b2330" stroke="#efe9dd" stroke-width="2.5"/>
+        <path d="M64 178 Q54 178 51 192 Q40 232 40 268 Q40 306 72 309 L136 309 Q166 306 166 268 Q166 232 156 192 Q153 178 144 178 Z"
+              fill="#efe9dd" stroke="#1b2330" stroke-width="6.5" stroke-linejoin="round"/>
+        <path d="M58 198 Q48 256 56 286" class="pk-gloss" stroke-opacity=".65"/>
+        <path d="M45 288 L161 288" stroke="#1b2330" stroke-width="2.4" opacity=".3"/>
+        <path d="M46 303 Q46 322 72 322 L136 322 Q160 322 160 303 L160 300 L46 300 Z"
+              fill="#1b2330" stroke="#efe9dd" stroke-width="2.5"/>
+      </g>
+    </svg>`,
 
   // a limit is a number (symmetric) or {min, max} — z is not symmetric
   lo: (lim) => (typeof lim === 'object' ? lim.min : -lim),
   hi: (lim) => (typeof lim === 'object' ? lim.max : lim),
 
-  slider: (key, label, limit, step) => `
+  slider: (key, label, limit, step, icon) => `
     <label class="cp-row">
-      <span class="cp-label">${label}</span>
+      <span class="cp-label">${icon ? `<span class="ic i-${icon}"></span>` : ''}${label}</span>
       <input type="range" data-key="${key}" min="${controller.lo(limit)}" max="${controller.hi(limit)}" step="${step}" value="0">
       <output class="cp-val">0</output>
     </label>`,
@@ -168,30 +262,71 @@ const controller = {
       </div>
 
       <div class="cp-body">
-        <div class="cp-group">
-          <div class="cp-group-title">${t('control.head_position')}</div>
-          ${controller.pad('pos', [t('control.y'), t('control.x')])}
-          ${controller.slider('z', t('control.z'), L.z, 0.001)}
+        <!-- Reachy Eyes, up top: pick a colour (OFF first), a preset, or ANY
+             colour with the wheel (the custom card). Brightness lives down in
+             Precision. Drives the LED module when one answers, and the twin. -->
+        <div class="cp-group" id="cp-eyes">
+          <div id="cp-picker" class="cp-picker">
+            <button class="eye-chip" data-eyes-color="OFF" title="${t('control.eyes_off')}">
+              <span class="eye-face off"><span class="eye-dot l"></span><span class="eye-dot r"></span></span>
+            </button>
+            ${['WHITE', 'RED', 'AMBER', 'GREEN', 'CYAN', 'BLUE', 'MAGENTA']
+              .map((c) => `<button class="eye-chip" data-eyes-color="${c}"><span class="eye-face"><span class="eye-dot l"></span><span class="eye-dot r"></span></span></button>`)
+              .join('')}
+            <label class="eye-chip eye-custom" title="${t('control.eyes_custom')}">
+              <span class="eye-face"><span class="eye-dot l rainbow"></span><span class="eye-dot r rainbow"></span></span>
+              <input type="color" id="cp-eyes-custom" value="#ff8800">
+            </label>
+          </div>
         </div>
 
-        <div class="cp-group">
-          <div class="cp-group-title">${t('control.head_rotation')}</div>
-          ${controller.pad('rot', [t('control.yaw'), t('control.pitch')])}
-          ${controller.slider('roll', t('control.roll'), L.roll, 0.01)}
+        <!-- the puppet, front and side: the robot IS the controls, drag to pose -->
+        <div class="cp-stage-duo">
+          <div class="cp-stage" id="cp-stage-front">
+            ${controller.puppetFront()}
+          </div>
+          <div class="cp-stage" id="cp-stage-side">
+            ${controller.puppetSide()}
+          </div>
         </div>
 
-        <div class="cp-group">
-          <div class="cp-group-title">${t('control.body')}</div>
-          ${controller.slider('body_yaw', t('control.body_yaw'), L.body_yaw, 0.1)}
+        <!-- every axis as a plain slider, always visible now, each with an icon
+             of the movement it drives; the eyes brightness sits at the end -->
+        <div class="cp-precision">
+          <div class="cp-section-title">${t('control.precision')}</div>
+          ${controller.slider('x', t('control.x'), L.x, 0.001, 'axis-x-arrow')}
+          ${controller.slider('y', t('control.y'), L.y, 0.001, 'axis-y-arrow')}
+          ${controller.slider('z', t('control.z'), L.z, 0.001, 'axis-z-arrow')}
+          ${controller.slider('yaw', t('control.yaw'), L.yaw, 0.01, 'axis-z-rotate-clockwise')}
+          ${controller.slider('pitch', t('control.pitch'), L.pitch, 0.01, 'axis-y-rotate-clockwise')}
+          ${controller.slider('roll', t('control.roll'), L.roll, 0.01, 'axis-x-rotate-clockwise')}
+          ${controller.slider('ant_l', t('control.antenna_left'), L.antenna, 0.1, 'antenna')}
+          ${controller.slider('ant_r', t('control.antenna_right'), L.antenna, 0.1, 'antenna')}
+          ${controller.slider('body_yaw', t('control.body_yaw'), L.body_yaw, 0.1, 'rotate-3d-variant')}
+          <label class="cp-row">
+            <span class="cp-label"><span class="ic i-brightness-6"></span>${t('control.intensity')}</span>
+            <input type="range" id="cp-eyes-int" min="0" max="1" step="0.01" value="1">
+            <output class="cp-val">1.00</output>
+          </label>
         </div>
 
-        <div class="cp-group">
-          <div class="cp-group-title">${t('control.antennas')}</div>
-          ${controller.slider('ant_l', t('control.antenna_left'), L.antenna, 0.1)}
-          ${controller.slider('ant_r', t('control.antenna_right'), L.antenna, 0.1)}
+        <!-- movement sequence: capture poses as keyframes, replay, step back and
+             forth, export/import at the marionette (RecordedMoves) .json format -->
+        <div class="cp-group" id="cp-seq">
+          <div class="cp-section-title">${t('control.sequence')}<span id="cp-seq-count" class="cp-seq-count"></span></div>
+          <div id="cp-seq-list" class="cp-seq-list"></div>
+          <div class="cp-seq-bar">
+            <button id="cp-seq-add" title="${t('control.seq_add')}"><span class="ic i-plus"></span></button>
+            <button id="cp-seq-prev" title="${t('control.seq_prev')}"><span class="ic i-chevron-left"></span></button>
+            <button id="cp-seq-next" title="${t('control.seq_next')}"><span class="ic i-chevron-right"></span></button>
+            <button id="cp-seq-play" title="${t('control.seq_play')}"><span class="ic i-play"></span></button>
+            <span class="cp-seq-sp"></span>
+            <button id="cp-seq-import" title="${t('control.seq_import')}"><span class="ic i-tray-arrow-up"></span></button>
+            <button id="cp-seq-export" title="${t('control.seq_export')}"><span class="ic i-download"></span></button>
+            <button id="cp-seq-clear" title="${t('control.seq_clear')}"><span class="ic i-delete"></span></button>
+            <input type="file" id="cp-seq-file" accept="application/json,.json" hidden>
+          </div>
         </div>
-
-        <p class="cp-hint">${t('control.look_hint')}</p>
       </div>`;
 
     controller.root = el;
@@ -204,14 +339,16 @@ const controller = {
     // sliders), nor on the topbar button that toggles it. Escape closes it too.
     document.addEventListener('pointerdown', (ev) => {
       if (!controller.isOpen) return;
-      if (el.contains(ev.target) || ev.target.closest('[data-controller-toggle]')) return;
+      if (el.contains(ev.target) || ev.target.closest(window.DRAWER_OPENERS)) return;
       controller.close();
     });
     document.addEventListener('keydown', (ev) => {
       if (ev.key === 'Escape' && controller.isOpen) controller.close();
     });
 
-    el.querySelectorAll('input[type=range]').forEach((input) => {
+    // only the pose sliders feed the smoother — the eyes' intensity slider has
+    // no data-key and its own wiring (a serial device, not a joint)
+    el.querySelectorAll('input[type=range][data-key]').forEach((input) => {
       const out = input.parentElement.querySelector('.cp-val');
       const show = () => {
         const v = parseFloat(input.value);
@@ -220,58 +357,245 @@ const controller = {
       input.addEventListener('input', () => {
         controller.target[input.dataset.key] = parseFloat(input.value);
         show();
+        controller.puppetSync();
       });
       show();
     });
 
-    controller.bindPad(el.querySelector('[data-pad=pos]'), 'y', 'x', L.y, L.x);
-    // flipY: on the rotation pad, dragging DOWN must make the head look DOWN
-    controller.bindPad(el.querySelector('[data-pad=rot]'), 'yaw', 'pitch', L.yaw, L.pitch, true);
-  },
-
-  // A joystick: horizontal axis → keyX, vertical → keyY. Dragging past the
-  // edge is clamped, and — like the desktop — releasing does NOT spring back;
-  // the pose stands until you move it or press rest.
-  bindPad: (pad, keyX, keyY, limX, limY, flipY) => {
-    const face = pad.querySelector('.cp-pad-face');
-    const knob = pad.querySelector('.cp-pad-knob');
-    let dragging = false;
-
-    // The face pad SHOWS the rotation: the drawing slides toward where the head
-    // is looking, so you watch what you are doing. The position pad is a top-down
-    // map instead — there the knob itself is the head's place on the plane, so its
-    // drawing stays put as a reference.
-    const bot = pad.dataset.pad === 'rot' ? pad.querySelector('.cp-dia-bot') : null;
-
-    const place = (ev) => {
-      const r = face.getBoundingClientRect();
-      const nx = Math.max(-1, Math.min(1, ((ev.clientX - r.left) / r.width) * 2 - 1));
-      const ny = Math.max(-1, Math.min(1, ((ev.clientY - r.top) / r.height) * 2 - 1));
-      controller.target[keyX] = nx * limX;
-      // screen Y grows downward. On the position pad, up = forward, so we negate.
-      // On the rotation pad, down = look down, so we DON'T (flipY).
-      controller.target[keyY] = (flipY ? ny : -ny) * limY;
-      knob.style.left = `${((nx + 1) / 2) * 100}%`;
-      knob.style.top = `${((ny + 1) / 2) * 100}%`;
-      // the face shifts where you look: right-drag → looks right, down → looks down
-      if (bot) bot.style.transform = `translate(${nx * 13}px, ${ny * 13}px)`;
+    controller.bindPuppet(el);
+    controller.bindEyes(el);
+    controller.bindSeq(el);
+    controller.puppetSync();   // draw the initial (rest) pose
+  },
+
+  // --- the puppet's strings ------------------------------------------------
+  //
+  // Pixel-to-value scale: the puppets draw at K px per metre, so the head's
+  // on-screen travel IS its real travel box to scale (and the clamps below are
+  // the same LIMITS the wire enforces). Gaze and pitch are radians per pixel.
+  PK: 550,
+
+  // pointer position in a puppet svg's own coordinates
+  pkPoint: (svg, ev) => {
+    const p = svg.createSVGPoint();
+    p.x = ev.clientX; p.y = ev.clientY;
+    return p.matrixTransform(svg.getScreenCTM().inverse());
+  },
+
+  // one grab: capture the pointer, remember where the TARGET stood, and hand
+  // every move to the mapper as a delta in svg pixels
+  pkDrag: (el, svg, map) => {
+    el.addEventListener('pointerdown', (ev) => {
+      ev.stopPropagation();
+      const from = controller.pkPoint(svg, ev);
+      const base = { ...controller.target };
+      el.setPointerCapture(ev.pointerId);
+      const move = (e2) => {
+        const p = controller.pkPoint(svg, e2);
+        map(p.x - from.x, p.y - from.y, base, p);
+        controller.puppetSync();
+      };
+      el.addEventListener('pointermove', move);
+      el.addEventListener('pointerup', () => el.removeEventListener('pointermove', move), { once: true });
+    });
+  },
+
+  bindPuppet: (el) => {
+    const front = el.querySelector('#cp-p-front');
+    const side = el.querySelector('#cp-p-side');
+    const L = controller.LIMITS;
+    const K = controller.PK;
+    const clampL = (v, lim) => Math.max(controller.lo(lim), Math.min(controller.hi(lim), v));
+    const T = controller.target;
+
+    // front head: sideways + height — the two axes you see from the front
+    controller.pkDrag(el.querySelector('#cp-pf-head'), front, (dx, dy, base) => {
+      T.y = clampL(base.y + dx / K, L.y);
+      T.z = clampL(base.z - dy / K, L.z);
+    });
+
+    // the camera looks: yaw + pitch. ~40 px of drag = the full neck, and the
+    // wire's own coupling turns the body when the neck runs out
+    controller.pkDrag(el.querySelector('#cp-pf-cam'), front, (dx, dy, base) => {
+      T.yaw = clampL(base.yaw + dx * 0.035, L.yaw);
+      T.pitch = clampL(base.pitch + dy * 0.026, L.pitch);
+    });
+
+    // each antenna pivots where it leaves the skull
+    const ant = (id, key, bx, by, sign) => {
+      controller.pkDrag(el.querySelector(id), front, (dx, dy, base, p) => {
+        const a = Math.atan2(p.x - bx, by - p.y) * sign;
+        T[key] = clampL(a, L.antenna);
+      });
     };
+    ant('#cp-pf-antl', 'ant_l', 82, 56, 1);
+    ant('#cp-pf-antr', 'ant_r', 158, 56, 1);
+
+    // the body slides sideways under the head: body rotation
+    controller.pkDrag(el.querySelector('#cp-p-front [data-grab=body]'), front, (dx, dy, base) => {
+      T.body_yaw = clampL(base.body_yaw + dx * 0.02, L.body_yaw);
+    });
+
+    // side head: forward/back + height — the axes you see from the side
+    controller.pkDrag(el.querySelector('#cp-ps-head'), side, (dx, dy, base) => {
+      T.x = clampL(base.x + dx / K, L.x);
+      T.z = clampL(base.z - dy / K, L.z);
+    });
+
+    // the lens nods: pitch (dragging DOWN looks down)
+    controller.pkDrag(el.querySelector('#cp-ps-lens'), side, (dx, dy, base) => {
+      T.pitch = clampL(base.pitch + dy * 0.02, L.pitch);
+    });
+  },
 
-    face.addEventListener('pointerdown', (ev) => {
-      dragging = true;
-      face.setPointerCapture(ev.pointerId);
-      place(ev);
+  // The puppet always says what the TARGET says — whoever moved it (a grab, a
+  // precision slider, a look-at click, rest). Pure transforms, no reflow.
+  puppetSync: () => {
+    const root = controller.root, T = controller.target;
+    if (!root || !T) return;
+    const K = controller.PK;
+    const deg = (rad) => (rad * 180) / Math.PI;
+    const set = (sel, tr) => {
+      const n = root.querySelector(sel);
+      if (n) n.setAttribute('transform', tr);
+    };
+    // front: the head block (antennas riding along) carries y and z, and it
+    // SCALES with x — forward (+x, set from the side view) brings the head toward
+    // you, so from the front it grows; back shrinks it. Scale about the head's
+    // centre (120,106 in the 240x360 viewBox) so it grows in place.
+    const s = Math.max(0.9, Math.min(1.14, 1 + (T.x || 0) * 4.5));
+    set('#cp-pf-head', `translate(${(T.y || 0) * K} ${-(T.z || 0) * K})`
+      + ` translate(120 106) scale(${s.toFixed(3)}) translate(-120 -106)`);
+    set('#cp-pf-antl', `rotate(${deg(T.ant_l || 0)} 82 56)`);
+    set('#cp-pf-antr', `rotate(${deg(T.ant_r || 0)} 158 56)`);
+    // the gaze: camera dot and eyes drift toward where the head looks
+    const gx = (T.yaw || 0) * 10, gy = (T.pitch || 0) * 12;
+    set('#cp-pf-cam', `translate(${Math.max(-14, Math.min(14, gx))} ${Math.max(-10, Math.min(10, gy))})`);
+    set('#cp-pf-eyes', `translate(${Math.max(-9, Math.min(9, gx * 0.6))} ${Math.max(-7, Math.min(7, gy * 0.6))})`);
+    // the body seam slides with the body's rotation
+    set('#cp-pf-seam', `translate(${((T.body_yaw || 0) / controller.LIMITS.body_yaw) * 46} 0)`);
+    // side: x and z, and the whole head nods with pitch around its centre
+    set('#cp-ps-head', `translate(${(T.x || 0) * K} ${-(T.z || 0) * K}) rotate(${deg(T.pitch || 0) * 0.55} 88 106)`);
+    // sync the precision sliders without re-firing their input events
+    root.querySelectorAll('input[type=range][data-key]').forEach((input) => {
+      const v = T[input.dataset.key];
+      if (v === undefined || document.activeElement === input) return;
+      input.value = v;
+      const out = input.parentElement.querySelector('.cp-val');
+      if (out) out.textContent = input.step === '0.001' ? v.toFixed(3) : v.toFixed(2);
     });
-    face.addEventListener('pointermove', (ev) => dragging && place(ev));
-    face.addEventListener('pointerup', () => { dragging = false; });
-    face.addEventListener('pointercancel', () => { dragging = false; });
-
-    pad._reset = () => {
-      knob.style.left = '50%';
-      knob.style.top = '50%';
-      if (bot) bot.style.transform = '';
+  },
+
+  // --- eyes (Reachy Eyes LED module) --------------------------------------
+  //
+  // A community accessory, not a joint. All the actual driving lives in
+  // eyes_fx.js (module + twin, both at once); the drawer only carries the RGB:
+  // a color picker under the palette icon, and the brightness slider. Shown
+  // when the backend shook hands with the module, re-checked at every open
+  // (USB is hotpluggable) — the probe also feeds the catalogue's Effects tab.
+
+  probeEyes: async () => {
+    if (typeof eyesFx === 'undefined') return;
+    const on = await eyesFx.probe();
+    // the colour cards + brightness stay visible whatever answers: they drive the
+    // twin even with no LED module. The probe only decides the Effects tab.
+    if (typeof catalogue !== 'undefined') catalogue.fx(on);
+  },
+
+  bindEyes: (el) => {
+    const picker = el.querySelector('#cp-picker');
+    if (!picker) return;
+    const slider = el.querySelector('#cp-eyes-int');
+
+    // OFF <-> brightness: switching off drops luminosité to 0; any colour (preset
+    // or custom) brings it back to the last non-zero level (Pierre). Slider follows.
+    const relight = (isOff) => {
+      const cur = slider ? parseFloat(slider.value) : 1;
+      if (isOff) { if (cur > 0) controller.lastEyesInt = cur; controller.setEyesIntensity(0); }
+      else controller.setEyesIntensity(controller.lastEyesInt || 1);
     };
-    pad._reset();
+
+    // the preset cards (OFF + the firmware palette), visible in the eyes section
+    // now, not a popover on the puppet. Each drives the LED module + the twin.
+    picker.querySelectorAll('[data-eyes-color]').forEach((b) => {
+      b.addEventListener('click', () => {
+        const name = b.dataset.eyesColor;
+        eyesFx.select(name);
+        controller.tintEyes(eyesFx.PALETTE[name] || null);
+        controller.markEyes();
+        relight(name === 'OFF');
+      });
+    });
+
+    // the custom card: the native colour WHEEL, any colour you like. The twin
+    // shows the exact hex; the LED module (named colours only) gets the nearest.
+    const custom = el.querySelector('#cp-eyes-custom');
+    if (custom) {
+      custom.addEventListener('input', () => {
+        eyesFx.colorHex(custom.value, { dur: 0.3 });
+        controller.tintEyes(custom.value);
+        controller.markEyes();
+        relight(false);
+      });
+    }
+
+    controller.markEyes();   // resting state (OFF) selected from the start
+
+    if (!slider) return;
+    const out = slider.parentElement.querySelector('.cp-val');
+    let timer = null;
+    slider.addEventListener('input', () => {
+      const v = parseFloat(slider.value);
+      if (out) out.textContent = v.toFixed(2);
+      if (v > 0) controller.lastEyesInt = v;   // remember it, to restore on relight
+      // live label every frame, one serial write once the drag settles
+      clearTimeout(timer);
+      timer = setTimeout(() => eyesFx.intensity(v), 150);
+    });
+  },
+
+  // set the brightness slider AND push it to the eyes (module + twin) in one place
+  // — the OFF <-> brightness coupling above uses it.
+  lastEyesInt: 1,
+  setEyesIntensity: (v) => {
+    const slider = controller.root && controller.root.querySelector('#cp-eyes-int');
+    if (!slider) return;
+    slider.value = String(v);
+    const out = slider.parentElement.querySelector('.cp-val');
+    if (out) out.textContent = Number(v).toFixed(2);
+    if (typeof eyesFx !== 'undefined') eyesFx.intensity(v);
+  },
+
+  // the puppet's irises (front eyes + side lens) wear the picked LED color;
+  // null = LEDs off, back to the resting dark glass
+  tintEyes: (hex) => {
+    if (!controller.root) return;
+    controller.root.querySelectorAll('.pk-iris').forEach((n) => {
+      n.style.fill = hex || '';
+    });
+  },
+
+  // highlight which swatch is the live selection (the OFF button included), so
+  // the ring shows a real state and it is obvious what is currently on. Reads
+  // eyesFx.current, the single source of truth (OFF at rest).
+  markEyes: () => {
+    if (!controller.root) return;
+    const cur = (typeof eyesFx !== 'undefined' && eyesFx.current) || 'OFF';
+    const isHex = typeof cur === 'string' && cur[0] === '#';
+    controller.root.querySelectorAll('#cp-picker [data-eyes-color]').forEach((b) =>
+      b.classList.toggle('on', b.dataset.eyesColor === cur));
+    // the custom card lights up when a FREE colour is showing, and its lenses
+    // wear that colour (else they fall back to the rainbow hint, via CSS)
+    const custom = controller.root.querySelector('.eye-custom');
+    if (custom) {
+      custom.classList.toggle('on', isHex);
+      custom.querySelectorAll('.eye-dot').forEach((d) => {
+        d.style.background = isHex ? cur : '';
+        d.style.boxShadow = isHex ? `0 0 6px ${cur}` : '';
+      });
+      const inp = custom.querySelector('#cp-eyes-custom');
+      if (inp && isHex) inp.value = cur;
+    }
   },
 
   // --- the wire ---------------------------------------------------------
@@ -312,10 +636,21 @@ const controller = {
     controller.raf = requestAnimationFrame(controller.loop);
 
     const c = controller.current, tg = controller.target, k = controller.EMA;
-    // The EMA is a mechanical-safety feature: it turns a yanked joystick into a
-    // sweep the real robot can follow. The TWIN is just a picture — no motor to
-    // protect — so in the simulator we snap (factor 1) and it tracks the finger.
     const sim = !controller.robotReady();
+
+    // Were we ALREADY there before this frame's step? Then nothing to do. This
+    // check MUST come before the step: the twin has no motor to protect, so in
+    // the simulator we snap (factor 1) — but a snap lands current ON target in
+    // one frame, and a settled-check done AFTER the snap would be true instantly
+    // and return before send() ever ran (the twin never moved). Checking first
+    // means a moved target still gets snapped AND sent, then settles next frame.
+    const need = Object.keys(tg).some(
+      (key) => Math.abs(tg[key] - c[key]) >= controller.SETTLED
+    );
+    if (!need) return;
+
+    // The EMA is a mechanical-safety feature: it turns a yanked joystick into a
+    // sweep the real robot can follow. The twin is just a picture, so it snaps.
     const ema = (key, f) => { c[key] += (tg[key] - c[key]) * (sim ? 1 : f); };
     ['x', 'y', 'z'].forEach((key) => ema(key, k.pos));
     ['pitch', 'yaw', 'roll'].forEach((key) => ema(key, k.rot));
@@ -323,14 +658,12 @@ const controller = {
     ema('ant_l', k.ant);
     ema('ant_r', k.ant);
 
-    // caught up? then say nothing at all — an idle panel is silent
-    const settled = Object.keys(tg).every(
-      (key) => Math.abs(tg[key] - c[key]) < controller.SETTLED
-    );
-    if (settled) return;
-
+    // Throttle the WIRE to the real robot (20 Hz). The twin's IK coalesces its
+    // own round-trips (driveSim), so drive it every frame — otherwise a throttled
+    // frame would snap current onto target and the next frame, seeing no need,
+    // would never send that pose.
     const now = Date.now();
-    if (now - controller.lastSend < controller.THROTTLE) return;
+    if (!sim && now - controller.lastSend < controller.THROTTLE) return;
     controller.lastSend = now;
     controller.send();
   },
@@ -407,6 +740,10 @@ const controller = {
   // one returns: the twin always catches up to where you actually are.
   driveSim: (body) => {
     if (typeof viewer3d === 'undefined' || !viewer3d.robot) return;
+    // a wake/fold animation owns the twin: don't drive (nor spend the IK round
+    // trip) until it lands. The loop keeps calling us, so control resumes on its
+    // own the frame after the animation ends.
+    if (viewer3d.busyAnim && viewer3d.busyAnim()) return;
     if (controller.simBusy) { controller.simNext = body; return; }
     controller.simBusy = true;
     controller._simSend(body);
@@ -450,15 +787,11 @@ const controller = {
   },
 
   // Rest is not a command: we ramp the TARGET to zero and let the smoother walk
-  // the robot home, so it never snaps.
+  // the robot home, so it never snaps. The puppet follows the target home.
   rest: () => {
     if (!controller.root) return;
     controller.target = controller.ZERO();
-    controller.root.querySelectorAll('input[type=range]').forEach((input) => {
-      input.value = 0;
-      input.dispatchEvent(new Event('input'));
-    });
-    controller.root.querySelectorAll('.cp-pad').forEach((pad) => pad._reset());
+    controller.puppetSync();
   },
 
   // --- look at ----------------------------------------------------------
@@ -495,6 +828,7 @@ const controller = {
 
   // Feed the smoother from outside the panel (the panel need not even exist).
   drive: (pose) => {
+    if (typeof idle !== 'undefined') idle.disarm();   // driving and idling both applyFrame
     controller.ensureStream();
     Object.assign(controller.target, pose);
     if (controller.root) controller.syncWidgets();
@@ -511,28 +845,20 @@ const controller = {
     if (!controller.raf) controller.loop();
   },
 
-  // Whatever moved the target (a click in the image, a reset), the widgets have
-  // to say the same thing as the robot.
+  // Whatever moved the target (a click in the image, a reset), the puppet and
+  // the precision sliders have to say the same thing as the robot.
   syncWidgets: () => {
-    controller.root.querySelectorAll('input[type=range]').forEach((input) => {
+    controller.puppetSync();
+    if (!controller.root) return;
+    // the precision sliders are input-only; reflect the target back onto them so
+    // applying a keyframe (or a reset, or click-to-look) moves the sliders too
+    controller.root.querySelectorAll('input[type=range][data-key]').forEach((input) => {
       const v = controller.target[input.dataset.key];
-      if (v === undefined) return;
-      input.value = v;
+      if (typeof v !== 'number') return;
+      input.value = String(v);
       const out = input.parentElement.querySelector('.cp-val');
       if (out) out.textContent = input.step === '0.001' ? v.toFixed(3) : v.toFixed(2);
     });
-    const place = (padKey, keyX, keyY, limX, limY) => {
-      const pad = controller.root.querySelector(`[data-pad=${padKey}]`);
-      if (!pad) return;
-      const knob = pad.querySelector('.cp-pad-knob');
-      const nx = Math.max(-1, Math.min(1, controller.target[keyX] / limX));
-      const ny = Math.max(-1, Math.min(1, -controller.target[keyY] / limY));
-      knob.style.left = `${((nx + 1) / 2) * 100}%`;
-      knob.style.top = `${((ny + 1) / 2) * 100}%`;
-    };
-    const L = controller.LIMITS;
-    place('pos', 'y', 'x', L.y, L.x);
-    place('rot', 'yaw', 'pitch', L.yaw, L.pitch);
   },
 
   // Standing back up is NOT the rest pose. A folded robot (asleep, or left that
@@ -562,8 +888,214 @@ const controller = {
   resetPose: () => {
     controller.ensureStream();
     controller.target = controller.ZERO();
-    if (controller.root) controller.syncWidgets();
-    if (controller.root) controller.root.querySelectorAll('.cp-pad').forEach((pad) => pad._reset());
+    if (controller.root) controller.puppetSync();
+  },
+
+  // --- movement sequence (keyframes) ------------------------------------
+  //
+  // Each captured pose is one keyframe of the 9 head/antenna/body axes, with a
+  // timestamp. The list replays (the smoother eases between keyframes), steps
+  // back and forth, and saves to the marionette / RecordedMoves .json — the
+  // exact format the robot's move store plays (moves.py reads the same one):
+  //   { description, time:[s...], set_target_data:[{head:4x4, antennas:[l,r],
+  //     body_yaw, check_collision}] }
+  // head is the 4x4 transform; our 6 scalars (metres + xyz-euler radians) are
+  // exactly what R.from_euler("xyz") <-> from_matrix decompose, so it round-trips.
+
+  pose: () => {
+    const T = controller.target || controller.ZERO();
+    const p = {};
+    ['x', 'y', 'z', 'roll', 'pitch', 'yaw', 'ant_l', 'ant_r', 'body_yaw'].forEach((k) => { p[k] = T[k] || 0; });
+    return p;
+  },
+
+  seqAdd: () => {
+    const now = Date.now();
+    const prev = controller.seq[controller.seq.length - 1];
+    const dt = prev ? Math.max(0.3, (now - controller.seqLastCap) / 1000) : 0;
+    controller.seqLastCap = now;
+    controller.seq.push({ t: +(((prev && prev.t) || 0) + dt).toFixed(2), ...controller.pose() });
+    controller.seqIdx = controller.seq.length - 1;
+    controller.seqRender();
+  },
+
+  seqApply: (i) => {
+    if (i < 0 || i >= controller.seq.length) return;
+    controller.seqIdx = i;
+    const { t, ...pose } = controller.seq[i];
+    controller.drive(pose);   // sets the whole target + syncs widgets + streams
+    controller.seqRender();
+  },
+
+  seqRemove: (i) => {
+    controller.seq.splice(i, 1);
+    if (controller.seqIdx >= controller.seq.length) controller.seqIdx = controller.seq.length - 1;
+    controller.seqRender();
+  },
+
+  seqClear: () => {
+    controller.seqPlaying = false;
+    controller.seq = [];
+    controller.seqIdx = -1;
+    controller.seqRender();
+  },
+
+  seqPlay: async () => {
+    if (controller.seqPlaying) { controller.seqPlaying = false; return; }   // toggle = stop
+    if (controller.seq.length < 1) return;
+    controller.seqPlaying = true;
+    controller.seqPlayIcon(true);
+    for (let i = 0; i < controller.seq.length; i++) {
+      if (!controller.seqPlaying) break;
+      controller.seqApply(i);
+      const cur = controller.seq[i].t;
+      const next = i + 1 < controller.seq.length ? controller.seq[i + 1].t : cur + 0.9;
+      await new Promise((r) => setTimeout(r, Math.max(300, (next - cur) * 1000)));
+    }
+    controller.seqPlaying = false;
+    controller.seqPlayIcon(false);
+  },
+
+  seqPlayIcon: (playing) => {
+    const ic = controller.root && controller.root.querySelector('#cp-seq-play .ic');
+    if (!ic) return;
+    ic.classList.toggle('i-play', !playing);
+    ic.classList.toggle('i-stop', playing);
+  },
+
+  // a compact one-line readout so keyframes are distinguishable in the list:
+  // time + the notable axes (Yaw/Pitch/Roll/Body in degrees, z in cm)
+  seqLabel: (k) => {
+    const d = (r) => Math.round((r || 0) * 180 / Math.PI);
+    const bits = [];
+    if (Math.abs(k.yaw) > 0.02) bits.push(`Y${d(k.yaw)}`);
+    if (Math.abs(k.pitch) > 0.02) bits.push(`P${d(k.pitch)}`);
+    if (Math.abs(k.roll) > 0.02) bits.push(`R${d(k.roll)}`);
+    if (Math.abs(k.body_yaw) > 0.02) bits.push(`B${d(k.body_yaw)}`);
+    if (Math.abs(k.z) > 0.003) bits.push(`z${(k.z * 100).toFixed(1)}`);
+    return `${k.t.toFixed(1)}s  ${bits.join(' ') || '·'}`;
+  },
+
+  seqRender: () => {
+    if (!controller.root) return;
+    const list = controller.root.querySelector('#cp-seq-list');
+    const count = controller.root.querySelector('#cp-seq-count');
+    if (count) count.textContent = controller.seq.length ? ` · ${controller.seq.length}` : '';
+    if (list) {
+      list.innerHTML = controller.seq.length
+        ? controller.seq.map((k, i) => `
+            <div class="cp-seq-row${i === controller.seqIdx ? ' on' : ''}" data-i="${i}">
+              <span class="cp-seq-n">${i + 1}</span>
+              <span class="cp-seq-desc">${controller.seqLabel(k)}</span>
+              <button class="cp-seq-del" data-del="${i}" title="${t('control.seq_clear')}"><span class="ic i-close"></span></button>
+            </div>`).join('')
+        : `<div class="cp-seq-empty">${t('control.seq_empty')}</div>`;
+    }
+    const dis = (id, cond) => { const b = controller.root.querySelector(id); if (b) b.disabled = cond; };
+    dis('#cp-seq-prev', controller.seqIdx <= 0);
+    dis('#cp-seq-next', controller.seqIdx >= controller.seq.length - 1);
+    dis('#cp-seq-play', controller.seq.length < 1);
+    dis('#cp-seq-export', controller.seq.length < 1);
+    dis('#cp-seq-clear', controller.seq.length < 1);
+  },
+
+  bindSeq: (el) => {
+    const q = (id) => el.querySelector(id);
+    q('#cp-seq-add')?.addEventListener('click', controller.seqAdd);
+    q('#cp-seq-prev')?.addEventListener('click', () => controller.seqApply(controller.seqIdx - 1));
+    q('#cp-seq-next')?.addEventListener('click', () => controller.seqApply(controller.seqIdx + 1));
+    q('#cp-seq-play')?.addEventListener('click', controller.seqPlay);
+    q('#cp-seq-export')?.addEventListener('click', controller.seqExport);
+    q('#cp-seq-clear')?.addEventListener('click', controller.seqClear);
+    const file = q('#cp-seq-file');
+    q('#cp-seq-import')?.addEventListener('click', () => file && file.click());
+    file?.addEventListener('change', () => { if (file.files[0]) controller.seqImport(file.files[0]); file.value = ''; });
+    q('#cp-seq-list')?.addEventListener('click', (ev) => {
+      const del = ev.target.closest('[data-del]');
+      if (del) { ev.stopPropagation(); controller.seqRemove(+del.dataset.del); return; }
+      const row = ev.target.closest('[data-i]');
+      if (row) controller.seqApply(+row.dataset.i);
+    });
+    controller.seqRender();
+  },
+
+  // --- marionette / RecordedMoves format --------------------------------
+  //
+  // head 4x4 from our 6 scalars: translation + R = Rz(yaw)·Ry(pitch)·Rx(roll),
+  // the matrix scipy's from_euler("xyz") builds (and from_matrix.as_euler("xyz")
+  // inverts), which is the daemon's own convention — so a re-import round-trips.
+  poseToMatrix: (p) => {
+    const cx = Math.cos(p.roll || 0), sx = Math.sin(p.roll || 0);
+    const cy = Math.cos(p.pitch || 0), sy = Math.sin(p.pitch || 0);
+    const cz = Math.cos(p.yaw || 0), sz = Math.sin(p.yaw || 0);
+    return [
+      [cz * cy, cz * sy * sx - sz * cx, cz * sy * cx + sz * sx, p.x || 0],
+      [sz * cy, sz * sy * sx + cz * cx, sz * sy * cx - cz * sx, p.y || 0],
+      [-sy, cy * sx, cy * cx, p.z || 0],
+      [0, 0, 0, 1],
+    ];
+  },
+
+  matrixToPose: (head) => {
+    let M = head;
+    if (Array.isArray(head) && typeof head[0] === 'number') {   // flat 16 or 12
+      const f = head;
+      M = [[f[0], f[1], f[2], f[3]], [f[4], f[5], f[6], f[7]], [f[8], f[9], f[10], f[11]], [0, 0, 0, 1]];
+    }
+    const c = (v) => Math.max(-1, Math.min(1, v));
+    return {
+      x: M[0][3], y: M[1][3], z: M[2][3],
+      roll: Math.atan2(M[2][1], M[2][2]),
+      pitch: Math.asin(c(-M[2][0])),
+      yaw: Math.atan2(M[1][0], M[0][0]),
+    };
+  },
+
+  seqExport: () => {
+    if (!controller.seq.length) return;
+    const data = {
+      description: 'Reachy Web sequence',
+      time: controller.seq.map((k) => k.t),
+      set_target_data: controller.seq.map((k) => ({
+        head: controller.poseToMatrix(k),
+        antennas: [k.ant_l || 0, k.ant_r || 0],
+        body_yaw: k.body_yaw || 0,
+        check_collision: false,
+      })),
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'reachy-sequence.json';
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  },
+
+  seqImport: (file) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const data = JSON.parse(reader.result);
+        const frames = data.set_target_data || [];
+        const times = data.time || [];
+        if (!frames.length) throw new Error('empty');
+        controller.seq = frames.map((f, i) => {
+          const a = f.antennas || [0, 0];
+          return {
+            t: typeof times[i] === 'number' ? times[i] : i,
+            ...controller.matrixToPose(f.head),
+            ant_l: a[0] || 0, ant_r: a[1] || 0, body_yaw: f.body_yaw || 0,
+          };
+        });
+        controller.seqIdx = 0;
+        controller.seqRender();
+        controller.seqApply(0);
+      } catch (e) {
+        if (typeof notificationCenter !== 'undefined') notificationCenter.showError(t('control.seq_bad'));
+      }
+    };
+    reader.readAsText(file);
   },
 
   ping: (x, y, el) => {

reachy_web/static/js/daemon.js

@@ -6,6 +6,12 @@ const daemon = {
         state: null,
     },
 
+    // true once a power-OFF folded the twin, so the next ON gives it a clean wake
+    // (fold → neutral) instead of leaving it folded or letting it jump. Starts
+    // false, so a fresh page load — where the twin begins folded on its own — does
+    // not trigger an unwanted wake.
+    wasOff: false,
+
     start: async (wakeUp) => {
         await fetch(`/api/daemon/start?wake_up=${wakeUp}`, {
             method: 'POST',
@@ -149,9 +155,18 @@ const daemon = {
             && daemonState !== 'starting' && !viewer3d.streamLive()) {
           viewer3d.goToSleep();
           if (typeof robotWake !== 'undefined') robotWake.virtualAwake = false;
+          daemon.wasOff = true;   // remember: the next ON should wake it cleanly
         }
         if (typeof robotWake !== 'undefined') robotWake.showWake(daemonState);
 
+        // power off (or any non-running/non-starting state) darkens the LED eyes:
+        // a robot that is off with lit eyes makes no sense. updateUI only runs on
+        // a state CHANGE, so this fires once per transition, not every poll.
+        if (daemonState !== 'running' && daemonState !== 'starting'
+            && typeof eyesFx !== 'undefined' && eyesFx.select) {
+          eyesFx.select('OFF');
+        }
+
         // wake.js: scrolling messages while it boots, auto-switch to the camera
         // once it actually produces an image
         if (typeof robotWake !== 'undefined') robotWake.onState(daemonState);
@@ -181,6 +196,20 @@ const daemon = {
             // a fresh startup re-arms the idle greeting (updateUI only fires on a
             // state change, so this is the transition INTO running, not every poll)
             if (typeof idle !== 'undefined') idle.arm();
+            // the daemon wakes the robot at power-on (wake_up=true): keep idle
+            // quiet through that move so its greeting does not fight it
+            if (typeof robotWake !== 'undefined' && robotWake.markBusy) robotWake.markBusy();
+            // Coming back from a power-OFF while the SIMULATOR is on screen and no
+            // real robot is streaming: don't jump: give the twin ONE clean wake,
+            // folded (its rest) → neutral. A real robot drives the twin from its
+            // own telemetry instead, so this is skipped there.
+            if (daemon.wasOff && typeof viewer3d !== 'undefined' && viewer3d.robot
+                && !viewer3d.streamLive()
+                && typeof cameraView !== 'undefined' && cameraView.mode === '3d') {
+              viewer3d.wakeUpSim();
+              if (typeof robotWake !== 'undefined') robotWake.virtualAwake = true;
+            }
+            daemon.wasOff = false;
             // Everything that reads the ROBOT was asked once, at page load — and a
             // dashboard started before its robot got nothing but 502s. This is the
             // first moment those questions have an answer, so they are asked again.

reachy_web/static/js/eyes_fx.js

@@ -0,0 +1,340 @@
+// Reachy Eyes, the browser side. One module owns everything the LED eyes do:
+// the color state, the scenario player, and the digital twin's mirror.
+//
+// Every command goes BOTH ways at once: to the module over /eyes/* when one is
+// detected (serial, server-side), and to the twin's lenses ALWAYS — the
+// simulator is never out of the loop, so what you play is what you see, robot
+// or not. The scenarios re-create the behaviors of the vendor's demo scripts
+// (github.com/brainwavecollective/reachy-eyes, no code copied) plus a few of
+// our own; they run HERE, as cancellable async loops, which is what lets the
+// twin and the LEDs stay in perfect step without a server-side player.
+const eyesFx = {
+  // the firmware's palette — the only colors the protocol names
+  PALETTE: {
+    WHITE: '#f5f5f0', RED: '#e5232a', AMBER: '#ffb300', GREEN: '#1fbf3a',
+    CYAN: '#00c8d7', BLUE: '#1e5bff', MAGENTA: '#e0219e', OFF: null,
+  },
+
+  detected: false,
+  current: 'OFF',        // what the picker shows — OFF at rest, like the real LEDs
+  colorL: null,          // per-eye overrides (null = follow `current`), so a
+  colorR: null,          // split scenario (weewoo…) mirrors correctly
+  playing: null,         // scenario id, or null
+  _run: 0,               // cancellation token: bumping it kills every loop
+
+  probe: async () => {
+    try {
+      const st = await fetch('/eyes/status').then((r) => r.json());
+      eyesFx.detected = !!(st && st.detected);
+    } catch { eyesFx.detected = false; }
+    return eyesFx.detected;
+  },
+
+  // probe once at load so the catalogue's Effects tab appears without ever
+  // opening the controller drawer (which re-probes on its own, for hotplug)
+  init: async () => {
+    const on = await eyesFx.probe();
+    if (typeof catalogue !== 'undefined') catalogue.fx(on);
+  },
+
+  post: (path, body) =>
+    fetch(path, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    }).catch(() => {}),
+
+  // --- the two-way commands ---------------------------------------------
+
+  color: (name, opts = {}) => {
+    const { eye = null, dur = 0.4 } = opts;
+    if (eyesFx.detected) eyesFx.post('/eyes/color', { color: name, eye, duration: dur });
+    if (typeof viewer3d !== 'undefined') {
+      viewer3d.eyesColor(eyesFx.PALETTE[name] ?? null, eye, dur);
+    }
+    if (eye === 'LEFT') eyesFx.colorL = name;
+    else if (eye === 'RIGHT') eyesFx.colorR = name;
+    else { eyesFx.current = name; eyesFx.colorL = null; eyesFx.colorR = null; }
+    eyesFx.reflect();
+  },
+
+  // Mirror the LIVE eye colors into the chrome: the topbar effect label and the
+  // top-left logo eyes glow with whatever the eyes are showing, per eye. OFF (or
+  // an unknown name) → null, which lets the logo eyes fall back to the ink fill.
+  reflect: () => {
+    if (typeof topbar === 'undefined' || !topbar.setEyes) return;
+    const hex = (n) => {
+      if (!n || n === 'OFF') return null;
+      if (typeof n === 'string' && n[0] === '#') return n;   // a free (custom) hex
+      return eyesFx.PALETTE[n] ?? null;
+    };
+    topbar.setEyes(hex(eyesFx.colorL ?? eyesFx.current), hex(eyesFx.colorR ?? eyesFx.current));
+  },
+
+  // a FREE colour (from the wheel), not one of the firmware's named ones. The
+  // twin shows the exact hex; the LED module speaks named colours only, so it
+  // gets the nearest name. `current` then holds the hex, not a name.
+  colorHex: (hex, opts = {}) => {
+    const { eye = null, dur = 0.4 } = opts;
+    if (eyesFx.detected) eyesFx.post('/eyes/color', { color: eyesFx.nearestName(hex), eye, duration: dur });
+    if (typeof viewer3d !== 'undefined') viewer3d.eyesColor(hex, eye, dur);
+    if (eye === 'LEFT') eyesFx.colorL = hex;
+    else if (eye === 'RIGHT') eyesFx.colorR = hex;
+    else { eyesFx.current = hex; eyesFx.colorL = null; eyesFx.colorR = null; }
+    eyesFx.reflect();
+  },
+
+  // nearest named colour to a hex (RGB Euclidean), for the module's named protocol
+  nearestName: (hex) => {
+    const rgb = (h) => {
+      const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(h || '');
+      return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : null;
+    };
+    const c = rgb(hex);
+    if (!c) return 'WHITE';
+    let best = 'WHITE', bestD = Infinity;
+    for (const [name, h] of Object.entries(eyesFx.PALETTE)) {
+      const p = rgb(h);
+      if (!p) continue;   // OFF (null) is skipped
+      const d = (c[0] - p[0]) ** 2 + (c[1] - p[1]) ** 2 + (c[2] - p[2]) ** 2;
+      if (d < bestD) { bestD = d; best = name; }
+    }
+    return best;
+  },
+
+  intensity: (v) => {
+    if (eyesFx.detected) eyesFx.post('/eyes/state', { intensity: v });
+    if (typeof viewer3d !== 'undefined') viewer3d.eyesState({ intensity: v });
+  },
+
+  energy: (v) => {
+    if (eyesFx.detected) eyesFx.post('/eyes/state', { energy: v });
+    if (typeof viewer3d !== 'undefined') viewer3d.eyesState({ energy: v });
+  },
+
+  effect: (name, eye = null) => {
+    if (eyesFx.detected) eyesFx.post('/eyes/effect', { effect: name, eye });
+    if (typeof viewer3d !== 'undefined') viewer3d.eyesEffect(name, eye);
+  },
+
+  // picking a plain color is also how you leave a scenario: kill the loop
+  // quietly, then settle on the chosen color
+  select: (name) => {
+    eyesFx._run++;
+    eyesFx.playing = null;
+    eyesFx.syncCards();
+    eyesFx.energy(0);
+    eyesFx.color(name, { dur: 0.4 });
+  },
+
+  // --- scenario player ---------------------------------------------------
+
+  sleep: (ms) => new Promise((r) => setTimeout(r, ms)),
+  rand: (lo, hi) => lo + Math.random() * (hi - lo),
+  pick: (arr) => arr[Math.floor(Math.random() * arr.length)],
+
+  play: async (id) => {
+    const sc = eyesFx.SCENARIOS[id];
+    if (!sc) return;
+    if (eyesFx.playing === id) { eyesFx.stop(); return; }   // same card = toggle off
+    const run = ++eyesFx._run;                              // kills any previous loop
+    const alive = () => eyesFx._run === run;
+    eyesFx.playing = id;
+    eyesFx.syncCards();
+    if (sc.init) sc.init();
+    while (alive()) await sc.step(alive);
+    // whoever cancelled us repaints; a finished loop only cleans its own energy
+  },
+
+  stop: () => {
+    eyesFx._run++;
+    eyesFx.playing = null;
+    eyesFx.syncCards();
+    // back to a calm state: the picked color, no breathing
+    eyesFx.energy(0);
+    eyesFx.color(eyesFx.current, { dur: 0.6 });
+  },
+
+  // the running effect, visible everywhere: the active card wears the same .on
+  // ring as a playing move or the worn skin, and the topbar's state line says
+  // what the eyes are doing next to what the robot is running. The OFF card is
+  // active when nothing plays AND the LEDs are off.
+  syncCards: () => {
+    const isOff = !eyesFx.playing && eyesFx.current === 'OFF';
+    document.querySelectorAll('[data-sc]').forEach((b) =>
+      b.classList.toggle('on', b.dataset.sc === 'off' ? isOff : b.dataset.sc === eyesFx.playing));
+    if (typeof topbar !== 'undefined' && topbar.setFx) {
+      topbar.setFx(eyesFx.playing ? t('eyes.sc_' + eyesFx.playing) : null);
+    }
+  },
+
+  // switch everything off from the strip: stop any running scenario and turn the
+  // LEDs off. This is the OFF card, FIRST in the strip (before the scenarios).
+  allOff: () => {
+    eyesFx._run++;
+    eyesFx.playing = null;
+    eyesFx.syncCards();
+    eyesFx.energy(0);
+    eyesFx.color('OFF', { dur: 0.3 });
+  },
+
+  // the Effects strip in the catalogue — same .skin-chip gabarit as the skins
+  // and moves, the vignette being a live CSS preview of what the LEDs will do.
+  // The OFF card leads: "éteint" is a card you pick like any scenario.
+  buildCards: (container) => {
+    if (!container || container.dataset.built) return;
+    const off = `
+      <button class="skin-chip fx-chip" data-sc="off" title="${t('control.eyes_off')}">
+        <span class="skin-thumb fx-face fx-off"><span class="sc-eye l"></span><span class="sc-eye r"></span></span>
+        <span class="skin-name">${t('control.eyes_off')}</span>
+      </button>`;
+    container.innerHTML = off + Object.keys(eyesFx.SCENARIOS).map((id) => `
+      <button class="skin-chip fx-chip" data-sc="${id}" title="${t('eyes.sc_' + id)}">
+        <span class="skin-thumb fx-face sc-${id}"><span class="sc-eye l"></span><span class="sc-eye r"></span></span>
+        <span class="skin-name">${t('eyes.sc_' + id)}</span>
+      </button>`).join('');
+    container.dataset.built = '1';
+    container.querySelectorAll('[data-sc]').forEach((b) => {
+      b.addEventListener('click', () =>
+        b.dataset.sc === 'off' ? eyesFx.allOff() : eyesFx.play(b.dataset.sc));
+    });
+    eyesFx.syncCards();
+  },
+
+  // One entry per card, in display order. `step` is ONE cycle of the loop and
+  // must stay polite: check alive() after every sleep before sending more.
+  SCENARIOS: {
+    // — theirs, re-created —
+    wink: {
+      init: () => eyesFx.color('CYAN'),
+      step: async (alive) => {
+        eyesFx.effect('BLINK', eyesFx.pick(['LEFT', 'RIGHT', null]));
+        await eyesFx.sleep(eyesFx.rand(800, 3200));
+      },
+    },
+    breathe: {
+      init: () => { eyesFx.color('CYAN'); eyesFx.energy(0.75); },
+      step: async () => eyesFx.sleep(400),
+    },
+    smooth: {
+      step: async (alive) => {
+        for (const c of ['RED', 'CYAN', 'AMBER', 'MAGENTA', 'BLUE', 'GREEN']) {
+          if (!alive()) return;
+          eyesFx.color(c, { dur: 1.0 });
+          await eyesFx.sleep(2000);
+        }
+      },
+    },
+    disco: {
+      step: async (alive) => {
+        eyesFx.color(eyesFx.pick(['RED', 'CYAN', 'AMBER', 'MAGENTA', 'BLUE', 'GREEN']), { dur: 0 });
+        await eyesFx.sleep(250);
+      },
+    },
+    chaos: {
+      init: () => eyesFx.energy(0.8),
+      step: async (alive) => {
+        eyesFx.color(eyesFx.pick(['RED', 'GREEN', 'BLUE', 'CYAN', 'MAGENTA', 'AMBER']),
+          { eye: 'LEFT', dur: eyesFx.rand(0, 0.3) });
+        await eyesFx.sleep(eyesFx.rand(150, 400));
+        if (!alive()) return;
+        eyesFx.color(eyesFx.pick(['RED', 'GREEN', 'BLUE', 'CYAN', 'MAGENTA', 'AMBER']),
+          { eye: 'RIGHT', dur: eyesFx.rand(0, 0.3) });
+        if (Math.random() < 0.25) eyesFx.effect('BLINK', eyesFx.pick(['LEFT', 'RIGHT']));
+        await eyesFx.sleep(eyesFx.rand(150, 400));
+      },
+    },
+    weewoo: {
+      step: async (alive) => {
+        eyesFx.color('RED', { eye: 'LEFT', dur: 0 });
+        eyesFx.color('BLUE', { eye: 'RIGHT', dur: 0 });
+        eyesFx.effect('STARTLE');
+        await eyesFx.sleep(420);
+        if (!alive()) return;
+        eyesFx.color('BLUE', { eye: 'LEFT', dur: 0 });
+        eyesFx.color('RED', { eye: 'RIGHT', dur: 0 });
+        eyesFx.effect('STARTLE');
+        await eyesFx.sleep(420);
+      },
+    },
+    pinpon: {
+      step: async (alive) => {
+        for (const eye of ['LEFT', 'RIGHT']) {
+          for (let i = 0; i < 3; i++) {
+            eyesFx.color('BLUE', { eye, dur: 0 });
+            await eyesFx.sleep(70);
+            if (!alive()) return;
+            eyesFx.color('OFF', { eye, dur: 0 });
+            await eyesFx.sleep(70);
+            if (!alive()) return;
+          }
+          await eyesFx.sleep(120);
+          if (!alive()) return;
+        }
+      },
+    },
+    // — algoryn's ESP32 firmware animations, re-created as universal loops so
+    //   they run on BOTH modules and the twin (their "joy" rainbow ≈ smooth) —
+    cylon: {
+      step: async (alive) => {
+        const c = eyesFx.current === 'OFF' ? 'RED' : eyesFx.current;
+        eyesFx.color(c, { eye: 'LEFT', dur: 0.3 });
+        eyesFx.color('OFF', { eye: 'RIGHT', dur: 0.3 });
+        await eyesFx.sleep(420);
+        if (!alive()) return;
+        eyesFx.color('OFF', { eye: 'LEFT', dur: 0.3 });
+        eyesFx.color(c, { eye: 'RIGHT', dur: 0.3 });
+        await eyesFx.sleep(420);
+      },
+    },
+    anger: {
+      init: () => eyesFx.color('RED', { dur: 0 }),
+      step: async () => {
+        eyesFx.effect('STARTLE');
+        await eyesFx.sleep(200);
+      },
+    },
+    amazement: {
+      step: async (alive) => {
+        for (const [c, hold] of [['WHITE', 90], ['CYAN', 110], ['WHITE', 90], ['CYAN', 900]]) {
+          if (!alive()) return;
+          eyesFx.color(c, { dur: 0 });
+          await eyesFx.sleep(hold);
+        }
+      },
+    },
+    // — ours —
+    heart: {
+      init: () => eyesFx.color('RED'),
+      step: async (alive) => {
+        eyesFx.effect('STARTLE');
+        await eyesFx.sleep(190);
+        if (!alive()) return;
+        eyesFx.effect('STARTLE');
+        await eyesFx.sleep(950);
+      },
+    },
+    hypno: {
+      step: async (alive) => {
+        eyesFx.color('CYAN', { eye: 'LEFT', dur: 1.2 });
+        eyesFx.color('MAGENTA', { eye: 'RIGHT', dur: 1.2 });
+        await eyesFx.sleep(1400);
+        if (!alive()) return;
+        eyesFx.color('MAGENTA', { eye: 'LEFT', dur: 1.2 });
+        eyesFx.color('CYAN', { eye: 'RIGHT', dur: 1.2 });
+        await eyesFx.sleep(1400);
+      },
+    },
+    sunset: {
+      step: async (alive) => {
+        for (const [c, hold] of [['AMBER', 2600], ['MAGENTA', 2600], ['RED', 2600], ['OFF', 2000]]) {
+          if (!alive()) return;
+          eyesFx.color(c, { dur: 2.0 });
+          await eyesFx.sleep(hold);
+        }
+      },
+    },
+  },
+};
+
+document.addEventListener('DOMContentLoaded', eyesFx.init);

reachy_web/static/js/idle.js

@@ -79,7 +79,14 @@ const idle = {
   physical: () => typeof viewer3d !== 'undefined' && viewer3d.streamLive()
     && typeof robotWake !== 'undefined' && robotWake.awake === true,
   virtual: () => typeof viewer3d !== 'undefined' && !!viewer3d.robot,
+  // NEVER greet while the twin is owned by something else: a wake/fold animation
+  // in the sim (busyAnim), or the robot mid wake-up / sleep move (robotWake.busy).
+  // Idle sending set_target during wake_up was fighting the move — the twin
+  // jittered between many poses. The greeting waits for calm.
+  busy: () => (typeof viewer3d !== 'undefined' && viewer3d.busyAnim && viewer3d.busyAnim())
+    || (typeof robotWake !== 'undefined' && robotWake.busy),
   eligible: () => idle.armed && document.visibilityState === 'visible'
+    && !idle.busy()
     && (idle.physical() || idle.virtual()),
 
   tick: () => {

reachy_web/static/js/landing-i18n.js

@@ -18,6 +18,22 @@
 
 	const T = {
 		fr: {
+			"Community hardware": "Matériel communautaire",
+			"Build it yourself": "Montez-le vous-même",
+			"Three ways to run it": "Trois façons de le lancer",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "Via l'app de Pollen, directement sur le robot pour qu'il démarre au boot, ou sur votre propre machine dirigée vers le robot sur le réseau.",
+			"Directly on the robot, at boot": "Directement sur le robot, au démarrage",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "Pas de store, pas de souci : connectez-vous en SSH au robot et lancez setup.sh. Il enregistre un service systemd, donc le tableau de bord est disponible à chaque démarrage sur http://your-robot.local:8042, sans SSH par la suite.",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "C'est la voie à suivre pour la version Wireless, qui l'installe sur son CM4 embarqué, ou pour une Lite associée à un Raspberry Pi à côté (installez-le sur ce Pi, celui qui fait déjà tourner le daemon).",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "setup.sh construit le virtualenv une fois, écrit reachy-web.service et l'active. Il démarre sans réveiller le robot ; le tableau de bord le réveille à la demande.",
+			"Check it, follow its logs, or remove it:": "Vérifiez-le, suivez ses logs, ou supprimez-le :",
+			"ESP32 eyes": "Des yeux ESP32",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "Des yeux LED en WiFi sur un ESP32 : une REST API, des émotions prêtes à l'emploi (joie, colère, émerveillement), la découverte mDNS, et Reachy peut animer son propre regard depuis l'app de conversation.",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "L'un des premiers kits d'yeux pour le Reachy Mini : un module USB avec une LED derrière chaque lentille, prêt à l'emploi ou à monter soi-même. Le dashboard le détecte automatiquement et pilote couleurs, humeurs et effets.",
+			"Get the kit": "Obtenir le kit",
+			"Discuss the eyes on Discord": "Discuter des yeux sur Discord",
+			"Eyes for your Reachy": "Des yeux pour votre Reachy",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "La communauté équipe le Reachy Mini d'yeux lumineux et expressifs. Deux projets ouvrent la voie ; branchez le kit USB et le dashboard fait apparaître un panneau Yeux.",
 			"Reachy Mini App": "Application Reachy Mini",
 			"The web dashboard is back.": "Le dashboard web du Reachy",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "Pollen a retiré le dashboard navigateur du daemon. Cette app le ramène, et va même plus loin : une caméra en direct, un jumeau numérique 3D, un panneau de logs colorisé, douze thèmes et huit langues. Installée comme n'importe quelle app Reachy Mini, sans app de bureau.",
@@ -77,8 +93,6 @@
 			"Changelog": "Journal des modifications",
 			"View older versions": "Voir les versions plus anciennes",
 			"Getting it running": "La mise en route",
-			"Two ways to run it": "Deux façons de le lancer",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "Sur le robot, comme une vraie app installée. Ou sur votre propre machine, pointée vers le robot par le réseau, pratique pour bricoler.",
 			"On the robot, through Pollen's app": "Sur le robot, via l'app de Pollen",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "Il y a là une délicieuse ironie : la boutique qui installe le dashboard web vit dans l'app qui l'a remplacé. Récupérez",
 			"(desktop) or the": "(bureau) ou l'app",
@@ -105,6 +119,22 @@
 			"by": "par",
 		},
 		es: {
+			"Community hardware": "Hardware comunitario",
+			"Build it yourself": "Constrúyelo tú mismo",
+			"Three ways to run it": "Tres formas de ejecutarlo",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "A través de la app de Pollen, directamente en el robot para que arranque al inicio, o en tu propia máquina apuntando al robot por la red.",
+			"Directly on the robot, at boot": "Directamente en el robot, al arrancar",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "Sin tienda, sin problema: conéctate por SSH al robot y ejecuta setup.sh. Registra un servicio systemd, así que el panel está disponible en cada arranque en http://your-robot.local:8042, sin necesidad de SSH después.",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "Es la opción indicada para la versión Wireless, que lo instala en su CM4 integrado, o para una Lite emparejada con una Raspberry Pi al lado (instálalo en esa Pi, la que ya ejecuta el daemon).",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "setup.sh crea el virtualenv una vez, escribe reachy-web.service y lo activa. Arranca sin despertar al robot; el panel lo despierta cuando hace falta.",
+			"Check it, follow its logs, or remove it:": "Compruébalo, sigue sus registros o elimínalo:",
+			"ESP32 eyes": "Ojos ESP32",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "Ojos LED por WiFi en un ESP32: una REST API, emociones predefinidas (alegría, enfado, asombro), descubrimiento mDNS, y Reachy puede dirigir su propia mirada desde la app de conversación.",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "Uno de los primeros kits de ojos para el Reachy Mini: un módulo USB con una LED detrás de cada lente, listo para usar o para montar tú mismo. El dashboard lo detecta automáticamente y controla colores, estados de ánimo y efectos.",
+			"Get the kit": "Consigue el kit",
+			"Discuss the eyes on Discord": "Habla de los ojos en Discord",
+			"Eyes for your Reachy": "Ojos para tu Reachy",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "La comunidad equipa al Reachy Mini con ojos luminosos y expresivos. Dos proyectos abren el camino; conecta el kit USB y el panel Ojos aparece en el dashboard.",
 			"Reachy Mini App": "Aplicación Reachy Mini",
 			"The web dashboard is back.": "El panel web ha vuelto.",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "Pollen quitó el panel del navegador del daemon. Esta app lo trae de vuelta, y más: una cámara en vivo, un gemelo digital 3D, un panel de registros con colores, doce temas y ocho idiomas. Se instala como cualquier otra app de Reachy Mini, sin necesidad de app de escritorio.",
@@ -164,8 +194,6 @@
 			"Changelog": "Registro de cambios",
 			"View older versions": "Ver versiones anteriores",
 			"Getting it running": "Ponerlo en marcha",
-			"Two ways to run it": "Dos formas de ejecutarlo",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "En el robot, como una app instalada de verdad. O en tu propia máquina, apuntando al robot por la red, práctico para trastear con él.",
 			"On the robot, through Pollen's app": "En el robot, a través de la app de Pollen",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "Aquí hay una ironía deliciosa: la tienda que instala el panel web vive en la app que lo reemplazó. Consigue",
 			"(desktop) or the": "(escritorio) o la app",
@@ -192,6 +220,22 @@
 			"by": "por",
 		},
 		de: {
+			"Community hardware": "Community-Hardware",
+			"Build it yourself": "Selbst bauen",
+			"Three ways to run it": "Drei Wege, es zu starten",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "Über die App von Pollen, direkt auf dem Roboter, damit er beim Start hochfährt, oder auf deinem eigenen Rechner, der über das Netzwerk auf den Roboter zeigt.",
+			"Directly on the robot, at boot": "Direkt auf dem Roboter, beim Start",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "Kein Store, kein Problem: per SSH auf den Roboter und setup.sh ausführen. Es registriert einen systemd-Dienst, sodass das Dashboard bei jedem Start unter http://your-robot.local:8042 bereitsteht, danach ohne SSH.",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "Das ist der Weg für die Wireless-Version, die es auf ihrem integrierten CM4 installiert, oder für eine Lite, die mit einem daneben stehenden Raspberry Pi gekoppelt ist (auf diesem Pi installieren, dem, der bereits den daemon ausführt).",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "setup.sh baut den virtualenv einmal, schreibt reachy-web.service und aktiviert ihn. Es startet, ohne den Roboter zu wecken; das Dashboard weckt ihn bei Bedarf.",
+			"Check it, follow its logs, or remove it:": "Prüfen, die Logs verfolgen oder wieder entfernen:",
+			"ESP32 eyes": "ESP32-Augen",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "WiFi-LED-Augen auf einem ESP32: eine REST API, fertige Emotionen (Freude, Wut, Staunen), mDNS-Erkennung, und Reachy steuert seinen Blick selbst aus der Konversations-App.",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "Eines der ersten Augen-Kits für den Reachy Mini: ein USB-Modul mit einer LED hinter jeder Linse, fertig oder zum Selberbauen. Das Dashboard erkennt es automatisch und steuert Farben, Stimmungen und Effekte.",
+			"Get the kit": "Kit holen",
+			"Discuss the eyes on Discord": "Über die Augen auf Discord sprechen",
+			"Eyes for your Reachy": "Augen für deinen Reachy",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "Die Community verpasst dem Reachy Mini leuchtende, ausdrucksstarke Augen. Zwei Projekte gehen voran; steck das USB-Kit ein und im Dashboard erscheint ein Augen-Panel.",
 			"Reachy Mini App": "Reachy Mini App",
 			"The web dashboard is back.": "Das Web-Dashboard ist zurück.",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "Pollen hat das Browser-Dashboard aus dem Daemon entfernt. Diese App bringt es zurück, und mehr: eine Live-Kamera, ein digitaler 3D-Zwilling, ein farbcodiertes Log-Panel, zwölf Themes und acht Sprachen. Installiert wie jede andere Reachy Mini App, ganz ohne Desktop-App.",
@@ -251,8 +295,6 @@
 			"Changelog": "Änderungsverlauf",
 			"View older versions": "Ältere Versionen anzeigen",
 			"Getting it running": "Zum Laufen bringen",
-			"Two ways to run it": "Zwei Wege, es auszuführen",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "Auf dem Roboter, als echte installierte App. Oder auf deinem eigenen Rechner, übers Netzwerk auf den Roboter gerichtet, praktisch zum Basteln.",
 			"On the robot, through Pollen's app": "Auf dem Roboter, über Pollens App",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "Eine köstliche Ironie: Der Store, der das Web-Dashboard installiert, steckt in der App, die es ersetzt hat. Hol dir",
 			"(desktop) or the": "(Desktop) oder die",
@@ -279,6 +321,22 @@
 			"by": "von",
 		},
 		it: {
+			"Community hardware": "Hardware della community",
+			"Build it yourself": "Costruiscilo da te",
+			"Three ways to run it": "Tre modi per avviarlo",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "Tramite l'app di Pollen, direttamente sul robot così parte all'avvio, oppure sulla tua macchina puntata verso il robot sulla rete.",
+			"Directly on the robot, at boot": "Direttamente sul robot, all'avvio",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "Niente store, nessun problema: collegati in SSH al robot ed esegui setup.sh. Registra un servizio systemd, così la dashboard è pronta a ogni avvio su http://your-robot.local:8042, senza più bisogno di SSH.",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "È la strada giusta per la versione Wireless, che lo installa sul suo CM4 integrato, o per una Lite abbinata a un Raspberry Pi accanto (installalo su quel Pi, quello che già esegue il daemon).",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "setup.sh crea il virtualenv una volta, scrive reachy-web.service e lo abilita. Si avvia senza svegliare il robot; la dashboard lo sveglia su richiesta.",
+			"Check it, follow its logs, or remove it:": "Controllalo, segui i suoi log oppure rimuovilo:",
+			"ESP32 eyes": "Occhi ESP32",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "Occhi LED in WiFi su un ESP32: una REST API, emozioni pronte all'uso (gioia, rabbia, stupore), rilevamento mDNS, e Reachy può guidare il proprio sguardo dall'app di conversazione.",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "Uno dei primi kit di occhi per il Reachy Mini: un modulo USB con una LED dietro ogni lente, pronto all'uso o da montare da soli. La dashboard lo rileva automaticamente e gestisce colori, stati d'animo ed effetti.",
+			"Get the kit": "Ottieni il kit",
+			"Discuss the eyes on Discord": "Parla degli occhi su Discord",
+			"Eyes for your Reachy": "Occhi per il tuo Reachy",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "La community dota il Reachy Mini di occhi luminosi ed espressivi. Due progetti fanno strada; collega il kit USB e nel dashboard compare un pannello Occhi.",
 			"Reachy Mini App": "App Reachy Mini",
 			"The web dashboard is back.": "Il pannello web è tornato.",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "Pollen ha rimosso il pannello browser dal daemon. Questa app lo riporta, e fa di più: una telecamera in diretta, un gemello digitale 3D, un pannello di log a colori, dodici temi e otto lingue. Si installa come qualsiasi altra app Reachy Mini, senza bisogno di un'app desktop.",
@@ -338,8 +396,6 @@
 			"Changelog": "Registro modifiche",
 			"View older versions": "Vedi le versioni precedenti",
 			"Getting it running": "Metterlo in funzione",
-			"Two ways to run it": "Due modi per eseguirlo",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "Sul robot, come una vera app installata. Oppure sulla tua macchina, puntata al robot in rete, comodo per smanettarci.",
 			"On the robot, through Pollen's app": "Sul robot, tramite l'app di Pollen",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "C'è una deliziosa ironia qui: lo store che installa il pannello web vive proprio nell'app che lo ha sostituito. Prendi",
 			"(desktop) or the": "(desktop) o l'app",
@@ -366,6 +422,22 @@
 			"by": "da",
 		},
 		pt: {
+			"Community hardware": "Hardware da comunidade",
+			"Build it yourself": "Monte o seu",
+			"Three ways to run it": "Três formas de o executar",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "Pela app da Pollen, diretamente no robô para que arranque na inicialização, ou na sua própria máquina apontada para o robô pela rede.",
+			"Directly on the robot, at boot": "Diretamente no robô, na inicialização",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "Sem loja, sem problema: entre por SSH no robô e execute setup.sh. Regista um serviço systemd, por isso o painel fica disponível em cada arranque em http://your-robot.local:8042, sem precisar de SSH depois.",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "É o caminho a seguir para a versão Wireless, que o instala no seu CM4 integrado, ou para uma Lite emparelhada com um Raspberry Pi ao lado (instale nesse Pi, o que já executa o daemon).",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "setup.sh cria o virtualenv uma vez, escreve reachy-web.service e ativa-o. Arranca sem acordar o robô; o painel acorda-o quando é preciso.",
+			"Check it, follow its logs, or remove it:": "Verifique-o, acompanhe os seus registos ou remova-o:",
+			"ESP32 eyes": "Olhos ESP32",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "Olhos LED por WiFi num ESP32: uma REST API, emoções prontas a usar (alegria, raiva, espanto), descoberta mDNS, e o Reachy pode dirigir o próprio olhar a partir da app de conversação.",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "Um dos primeiros kits de olhos para o Reachy Mini: um módulo USB com uma LED atrás de cada lente, pronto a usar ou para montar. O dashboard deteta-o automaticamente e controla cores, humores e efeitos.",
+			"Get the kit": "Obter o kit",
+			"Discuss the eyes on Discord": "Fala sobre os olhos no Discord",
+			"Eyes for your Reachy": "Olhos para o seu Reachy",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "A comunidade equipa o Reachy Mini com olhos luminosos e expressivos. Dois projetos abrem caminho; conecte o kit USB e o painel Olhos aparece no dashboard.",
 			"Reachy Mini App": "App Reachy Mini",
 			"The web dashboard is back.": "O painel web está de volta.",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "A Pollen removeu o painel do navegador do daemon. Este app o traz de volta, e vai além: uma câmera ao vivo, um gêmeo digital 3D, um painel de logs colorido, doze temas e oito idiomas. Instalado como qualquer outro app do Reachy Mini, sem precisar de app de desktop.",
@@ -425,8 +497,6 @@
 			"Changelog": "Registro de alterações",
 			"View older versions": "Ver versões mais antigas",
 			"Getting it running": "Colocando para rodar",
-			"Two ways to run it": "Duas formas de executá-lo",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "No robô, como um app instalado de verdade. Ou na sua própria máquina, apontada para o robô pela rede, prático para mexer nele.",
 			"On the robot, through Pollen's app": "No robô, pelo app da Pollen",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "Há uma ironia deliciosa aqui: a loja que instala o painel web vive no app que o substituiu. Pegue o",
 			"(desktop) or the": "(desktop) ou o app",
@@ -453,6 +523,22 @@
 			"by": "por",
 		},
 		ja: {
+			"Community hardware": "コミュニティハードウェア",
+			"Build it yourself": "自分で組み立てる",
+			"Three ways to run it": "起動する3つの方法",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "Pollenのアプリ経由で、起動時に立ち上がるようロボット上で直接、あるいはネットワーク越しにロボットを指定した自分のマシンで。",
+			"Directly on the robot, at boot": "ロボット上で直接、起動時に",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "ストア不要、問題ありません。SSHでロボットに入り、setup.sh を実行します。systemd サービスを登録するので、以降は SSH なしで、起動のたびにダッシュボードが http://your-robot.local:8042 で立ち上がります。",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "これは、内蔵の CM4 にインストールする Wireless 版、あるいは隣に Raspberry Pi を組み合わせた Lite に最適な方法です(すでに daemon を動かしているその Pi にインストールしてください)。",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "setup.sh は virtualenv を一度だけ作成し、reachy-web.service を書き込んで有効化します。ロボットを起こさずに立ち上がり、ダッシュボードが必要に応じて起こします。",
+			"Check it, follow its logs, or remove it:": "状態を確認したり、ログを追ったり、削除したりできます:",
+			"ESP32 eyes": "ESP32のアイ",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "ESP32上のWiFi対応LEDアイ。REST API、すぐ使える感情表現（喜び、怒り、驚き）、mDNS検出、そしてReachyは会話アプリから自ら視線を動かせます。",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "Reachy Mini向けの最初期のアイキットのひとつ。各レンズの奥にLEDを備えたUSBモジュールで、完成品でもDIYでも使えます。ダッシュボードが自動で検出し、色やムード、エフェクトを操ります。",
+			"Get the kit": "キットを入手",
+			"Discuss the eyes on Discord": "Discordで目について話す",
+			"Eyes for your Reachy": "Reachyに目を",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "コミュニティがReachy Miniに光る表情豊かな目を与えています。先行する2つのプロジェクト。USBキットをつなぐと、ダッシュボードに「目」パネルが現れます。",
 			"Reachy Mini App": "Reachy Mini アプリ",
 			"The web dashboard is back.": "Web ダッシュボードが戻ってきました。",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "Pollen はブラウザ用のダッシュボードを daemon から削除しました。このアプリはそれを取り戻し、さらに進化させます。ライブカメラ、3D デジタルツイン、色分けされたログパネル、12 のテーマと 8 つの言語。他の Reachy Mini アプリと同じようにインストールでき、デスクトップアプリは不要です。",
@@ -512,8 +598,6 @@
 			"Changelog": "変更履歴",
 			"View older versions": "古いバージョンを見る",
 			"Getting it running": "動かしてみる",
-			"Two ways to run it": "実行する 2 つの方法",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "ロボット上で、本物のインストール済みアプリとして。あるいは自分のマシンで、ネットワーク越しにロボットを指定して。いじって遊ぶのに便利です。",
 			"On the robot, through Pollen's app": "ロボット上で、Pollen のアプリ経由",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "ここには痛快な皮肉があります。Web ダッシュボードをインストールするストアが、それに取って代わったアプリの中にあるのです。入手するには",
 			"(desktop) or the": "（デスクトップ）または",
@@ -540,6 +624,22 @@
 			"by": "作:",
 		},
 		ar: {
+			"Community hardware": "عتاد المجتمع",
+			"Build it yourself": "اصنعه بنفسك",
+			"Three ways to run it": "ثلاث طرق لتشغيله",
+			"Through Pollen's app, directly on the robot so it starts at boot, or on your own machine pointed at the robot over the network.": "عبر تطبيق Pollen، مباشرة على الروبوت ليبدأ عند الإقلاع، أو على جهازك الخاص موجَّهًا إلى الروبوت عبر الشبكة.",
+			"Directly on the robot, at boot": "مباشرة على الروبوت، عند الإقلاع",
+			"No store, no problem: SSH into the robot and run setup.sh. It registers a systemd service, so the dashboard is up at every boot at http://your-robot.local:8042, with no SSH needed afterwards.": "لا متجر، لا مشكلة: اتصل بالروبوت عبر SSH وشغّل setup.sh. يسجّل خدمة systemd، فتصبح لوحة التحكم جاهزة عند كل إقلاع على http://your-robot.local:8042، دون حاجة إلى SSH بعد ذلك.",
+			"This is the way to go for the Wireless version, which installs it on its onboard CM4, or a Lite paired with a Raspberry Pi beside it (install on that Pi, the one already running the daemon).": "هذه هي الطريقة المثلى لنسخة Wireless، التي تثبّته على وحدة CM4 المدمجة فيها، أو لنسخة Lite مقترنة بجهاز Raspberry Pi بجانبها (ثبّته على ذلك الـ Pi، الذي يشغّل daemon بالفعل).",
+			"setup.sh builds the virtualenv once, writes reachy-web.service and enables it. It boots without waking the robot; the dashboard wakes it on demand.": "يبني setup.sh الـ virtualenv مرة واحدة، ويكتب reachy-web.service ويفعّله. يقلع دون إيقاظ الروبوت؛ ولوحة التحكم توقظه عند الحاجة.",
+			"Check it, follow its logs, or remove it:": "تحقّق منه، أو تابع سجلّاته، أو أزله:",
+			"ESP32 eyes": "عيون ESP32",
+			"WiFi LED eyes on an ESP32: a REST API, pre-built emotions (joy, anger, amazement), mDNS discovery, and Reachy can drive its own gaze from the conversation app.": "عيون LED عبر WiFi على ESP32: واجهة REST API، وانفعالات جاهزة (الفرح، الغضب، الدهشة)، واكتشاف mDNS، ويستطيع Reachy توجيه نظرته بنفسه من تطبيق ا��محادثة.",
+			"One of the first eye kits for the Reachy Mini: a USB module with an LED behind each lens, ready-made or DIY. The dashboard auto-detects it and drives colors, moods and effects.": "واحدة من أوائل مجموعات العيون لـ Reachy Mini: وحدة USB بها LED خلف كل عدسة، جاهزة أو للتركيب بنفسك. تكتشفها لوحة التحكم تلقائيًا وتتحكم في الألوان والحالات المزاجية والمؤثرات.",
+			"Get the kit": "احصل على المجموعة",
+			"Discuss the eyes on Discord": "ناقش العيون على Discord",
+			"Eyes for your Reachy": "عيون لروبوتك Reachy",
+			"The community fits the Reachy Mini with glowing, expressive eyes. Two projects lead the way; plug the USB kit in and the dashboard grows an Eyes panel.": "يمنح المجتمع روبوت Reachy Mini عيونًا مضيئة معبّرة. مشروعان يفتحان الطريق؛ وصّل طقم USB فتظهر لوحة العيون في لوحة التحكم.",
 			"Reachy Mini App": "تطبيق Reachy Mini",
 			"The web dashboard is back.": "لوحة التحكم عبر الويب عادت.",
 			"Pollen removed the browser dashboard from the daemon. This app brings it back, and then some: a live camera, a 3D digital twin, a colour-coded log panel, twelve themes and eight languages. Installed like any other Reachy Mini app, no desktop app needed.": "أزالت Pollen لوحة التحكم من المتصفح في الـ daemon. يعيدها هذا التطبيق، وأكثر: كاميرا مباشرة، وتوأم رقمي ثلاثي الأبعاد، ولوحة سجلات ملوّنة، واثنا عشر مظهرًا، وثماني لغات. يُثبَّت مثل أي تطبيق آخر لـ Reachy Mini، دون الحاجة إلى تطبيق سطح مكتب.",
@@ -599,8 +699,6 @@
 			"Changelog": "سجل التغييرات",
 			"View older versions": "عرض الإصدارات الأقدم",
 			"Getting it running": "تشغيله",
-			"Two ways to run it": "طريقتان لتشغيله",
-			"On the robot, as a real installed app. Or on your own machine, pointed at the robot over the network, handy for hacking on it.": "على الروبوت، كتطبيق حقيقي مثبّت. أو على جهازك الخاص، موجَّهًا إلى الروبوت عبر الشبكة، وهو مفيد للتجربة والتعديل.",
 			"On the robot, through Pollen's app": "على الروبوت، عبر تطبيق Pollen",
 			"There is a delicious irony here: the store that installs the web dashboard lives in the app that replaced it. Grab": "هناك مفارقة طريفة هنا: المتجر الذي يثبّت لوحة التحكم عبر الويب يعيش داخل التطبيق الذي حلّ محلها. احصل على",
 			"(desktop) or the": "(سطح المكتب) أو تطبيق",
@@ -628,11 +726,11 @@
 		}
 	};
 
-	function apply() {
-		const dict = T[lang];
-		if (!dict) return; // unknown language → English stays (the fallback)
+	const LANGS = ['en', 'fr', 'es', 'de', 'it', 'pt', 'ja', 'ar'];
+	const SKIP = { CODE: 1, PRE: 1, SCRIPT: 1, STYLE: 1, NOSCRIPT: 1 };
+	let CACHE = null; // [{node, orig}] collected once, so languages can be switched live
 
-		const SKIP = { CODE: 1, PRE: 1, SCRIPT: 1, STYLE: 1, NOSCRIPT: 1 };
+	function collect() {
 		const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
 			acceptNode: function (node) {
 				for (let p = node.parentNode; p && p.nodeType === 1; p = p.parentNode) {
@@ -641,25 +739,58 @@
 				return NodeFilter.FILTER_ACCEPT;
 			}
 		});
+		const out = [];
+		for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+			if (n.nodeValue.trim()) out.push({ node: n, orig: n.nodeValue });
+		}
+		return out;
+	}
 
-		const nodes = [];
-		for (let n = walker.nextNode(); n; n = walker.nextNode()) nodes.push(n);
+	// Translate every cached node FROM its original English, so switching is reversible
+	// (English is just the case where no dictionary matches). <head> is never touched.
+	function apply(target) {
+		if (!CACHE) CACHE = collect();
+		const dict = T[target];
+		for (const item of CACHE) {
+			const k = item.orig.trim();
+			item.node.nodeValue = (dict && Object.prototype.hasOwnProperty.call(dict, k))
+				? item.orig.replace(k, dict[k])
+				: item.orig;
+		}
+		document.documentElement.lang = target;
+		document.documentElement.dir = (target === 'ar') ? 'rtl' : 'ltr';
+		current = target;
+		const sel = document.getElementById('langSel');
+		if (sel && sel.value !== target) sel.value = target;
+	}
 
-		for (const node of nodes) {
-			const k = node.nodeValue.trim();
-			if (k && Object.prototype.hasOwnProperty.call(dict, k)) {
-				// replace the trimmed substring so surrounding whitespace survives
-				node.nodeValue = node.nodeValue.replace(k, dict[k]);
-			}
+	// Default is the browser language (English fallback). A manual pick is remembered
+	// in localStorage and wins on the next visit, but detection stays the default.
+	let saved = null;
+	try { saved = localStorage.getItem('lang'); } catch (e) {}
+	let current = (saved && LANGS.indexOf(saved) >= 0)
+		? saved
+		: (LANGS.indexOf(lang) >= 0 ? lang : 'en');
+
+	window.landingI18n = {
+		langs: LANGS,
+		get current() { return current; },
+		set: function (target) {
+			if (LANGS.indexOf(target) < 0) return;
+			try { localStorage.setItem('lang', target); } catch (e) {}
+			apply(target);
 		}
+	};
 
-		document.documentElement.lang = lang;
-		if (lang === 'ar') document.documentElement.dir = 'rtl';
+	function boot() {
+		apply(current);
+		const sel = document.getElementById('langSel');
+		if (sel) sel.addEventListener('change', function () { window.landingI18n.set(this.value); });
 	}
 
 	if (document.readyState === 'loading') {
-		document.addEventListener('DOMContentLoaded', apply);
+		document.addEventListener('DOMContentLoaded', boot);
 	} else {
-		apply();
+		boot();
 	}
 })();

reachy_web/static/js/locales.js

@@ -35,7 +35,7 @@ window.LOCALES = {
     "cam.eyes.5": "Checking I still have both eyes…",
     "cam.eyes.6": "Recounting my pixels…",
     "cam.eyes.7": "Wiping off the fog…",
-    "cam.eyes.8": "Five more minutes…",
+    "cam.eyes.8": "Five more milliseconds…",
     "cam.eyes.9": "And then there was light…",
     "cam.eyes.10": "I glitch a bit when I wake up…",
     "cam.eyes.11": "Coffee first?",
@@ -49,20 +49,39 @@ window.LOCALES = {
     "skin.name.default": "Original",
     "skin.name.flash": "Flash",
     "skin.name.spider": "Spider",
-    "skin.name.america": "America",
-    "skin.name.urban": "Urban Camo",
-    "skin.name.graffiti": "Graffiti",
-    "skin.name.rainbow": "Rainbow",
-    "skin.name.breton": "Breton",
     "skin.name.bat": "Bat",
     "skin.name.steel": "Super",
     "skin.name.iron": "Iron",
-    "skin.name.rage": "Rage",
-    "skin.name.ranger": "Astro",
-    "skin.name.protocol": "Protocol",
-    "skin.name.crewmate": "Crewmate",
     "skin.name.volt": "Volt",
-    "skin.name.yoda": "Yoda",
+    "skin.name.tuxedo": "Tuxedo",
+    "skin.name.bee": "Bee",
+    "skin.name.graffiti": "Graffiti",
+    "skin.name.rainbow": "Rainbow",
+    "skin.name.urban": "Urban Camo",
+    "skin.name.america": "America",
+    "skin.name.breton": "Breton",
+    "skin.name.pixel": "Pixel",
+    "skin.name.plumber": "Plumber",
+    "skin.name.ghost": "Ghost",
+    "skin.name.capsule": "Capsule",
+    "skin.name.ronin": "Ronin",
+    "skin.name.wizard": "Wizard",
+    "skin.name.mamba": "Mamba",
+    "skin.name.pirate": "Pirate",
+    "skin.name.tiger": "Tiger",
+    "skin.name.clown": "Clownfish",
+    "skin.name.panda": "Panda",
+    "skin.name.ladybug": "Ladybug",
+    "skin.name.japan": "Japan",
+    "skin.name.germany": "Germany",
+    "skin.name.ukraine": "Ukraine",
+    "skin.name.mondrian": "Mondrian",
+    "skin.name.wave": "The Wave",
+    "skin.name.sakura": "Sakura",
+    "skin.name.aurora": "Aurora",
+    "skin.name.wood": "Wood",
+    "skin.name.carbon": "Carbon",
+    "skin.name.circuit": "Circuit",
     "skin.all": "All",
     "skin.search": "Search…",
     "camera.replay": "REPLAY",
@@ -72,8 +91,20 @@ window.LOCALES = {
     "camera.mode_camera": "Camera",
     "tab.main": "Reachy",
     "tab.store": "Store",
+    "appstage.dashboard": "Dashboard",
+    "appstage.app": "App",
+    "appstage.reload": "Reload the page",
+    "appstage.restart": "Restart the app",
+    "appstage.debug": "App logs",
+    "appstage.fullscreen": "Open in a new tab",
+    "appstage.close": "Close (stop the app)",
+    "appstage.fps_hint": "Robot control loop (Hz)",
     "tab.settings": "Settings",
     "camera.mode_3d": "Simulator",
+    "twin.hint_title": "Move the robot",
+    "twin.hint_body": "Grab the head or the body and drag to aim it",
+    "twin.replay": "How to move the robot",
+    "camera.flag_live": "Live",
     "camera.mode_mjpeg": "Camera (MJPEG)",
     "camera.mode_webrtc": "Camera + sound (WebRTC)",
     "camera.listen": "Listen to the robot microphones",
@@ -96,10 +127,6 @@ window.LOCALES = {
     "control.title": "Controller",
     "control.home": "Stand back up (home position)",
     "control.rest": "Back to rest pose",
-    "control.head_rotation": "Head rotation",
-    "control.head_position": "Head position",
-    "control.body": "Body",
-    "control.antennas": "Antennas",
     "control.yaw": "Yaw",
     "control.pitch": "Pitch",
     "control.roll": "Roll",
@@ -109,11 +136,37 @@ window.LOCALES = {
     "control.body_yaw": "Rotation",
     "control.antenna_left": "Left",
     "control.antenna_right": "Right",
-    "control.look_hint": "Click anywhere in the camera view and the head will look at that point.",
+    "control.intensity": "Brightness",
+    "control.precision": "Fine tuning",
+    "control.sequence": "Sequence",
+    "control.seq_add": "Capture the pose",
+    "control.seq_prev": "Previous pose",
+    "control.seq_next": "Next pose",
+    "control.seq_play": "Play",
+    "control.seq_import": "Import (.json)",
+    "control.seq_export": "Export (.json)",
+    "control.seq_clear": "Clear",
+    "control.seq_empty": "No pose yet. Pose the robot, then +.",
+    "control.seq_bad": "Invalid sequence file",
+    "control.eyes_off": "Off",
+    "control.eyes_custom": "Custom colour",
+    "eyes.effects": "Eyes",
+    "eyes.sc_wink": "Wink",
+    "eyes.sc_breathe": "Breathe",
+    "eyes.sc_smooth": "Fade",
+    "eyes.sc_disco": "Disco",
+    "eyes.sc_chaos": "Chaos",
+    "eyes.sc_weewoo": "Weewoo",
+    "eyes.sc_pinpon": "Pin-pon",
+    "eyes.sc_cylon": "Cylon",
+    "eyes.sc_anger": "Anger",
+    "eyes.sc_amazement": "Amazement",
+    "eyes.sc_heart": "Heartbeat",
+    "eyes.sc_hypno": "Hypno",
+    "eyes.sc_sunset": "Sunset",
     "control.move_running": "A recorded move is playing, the robot ignores manual control until it ends.",
     "common.connect": "Connect",
     "common.connected": "Connected",
-    "common.dashboard_title": "Reachy Mini dashboard",
     "common.error_prefix": "Error: {message}",
     "common.failed": "Failed",
     "common.off": "Off",
@@ -176,7 +229,6 @@ window.LOCALES = {
     "logs.title": "Daemon logs",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "daemon unreachable, no moves",
-    "moves.title": "Moves",
     "moves.dances": "Dances",
     "moves.emotions": "Emotions",
     "moves.loading": "Loading moves…",
@@ -190,6 +242,8 @@ window.LOCALES = {
     "eq.treble": "Treble",
     "eq.general": "General",
     "eq.tone": "Tone",
+    "eq.bands": "Equalizer",
+    "eq.flat": "Flat",
     "eq.unavailable": "EasyEffects is not installed on the robot.",
     "settings.appearance": "Appearance",
     "settings.language": "Language",
@@ -197,9 +251,7 @@ window.LOCALES = {
     "settings.light_theme": "Light theme",
     "settings.palette": "Palette",
     "settings.random_skin": "Random skin",
-    "settings.debug": "Debug mode",
-    "settings.debug_hint": "Mirror the browser console into the logs panel",
-    "settings.random_skin_hint": "A different skin on every start",
+    "settings.debug": "Debug console",
     "settings.theme": "Theme",
     "settings.title": "Settings",
     "store.advanced_title": "Install a private Space",
@@ -437,7 +489,7 @@ window.LOCALES = {
     "cam.eyes.5": "Je vérifie que j'ai bien mes deux yeux…",
     "cam.eyes.6": "Je recompte mes pixels…",
     "cam.eyes.7": "J'essuie la buée…",
-    "cam.eyes.8": "Encore cinq petites minutes…",
+    "cam.eyes.8": "Encore cinq petites millisecondes…",
     "cam.eyes.9": "Et la lumière fut…",
     "cam.eyes.10": "Je bugue un peu au réveil…",
     "cam.eyes.11": "On commence par un café ?",
@@ -451,20 +503,39 @@ window.LOCALES = {
     "skin.name.default": "Original",
     "skin.name.flash": "Flash",
     "skin.name.spider": "Araignée",
-    "skin.name.america": "Amérique",
-    "skin.name.urban": "Camo urbain",
-    "skin.name.graffiti": "Graffiti",
-    "skin.name.rainbow": "Arc-en-ciel",
-    "skin.name.breton": "Breton",
-    "skin.name.bat": "Chauve-souris",
+    "skin.name.bat": "Chauve-Souris",
     "skin.name.steel": "Super",
     "skin.name.iron": "Iron",
-    "skin.name.rage": "Rage",
-    "skin.name.ranger": "Astro",
-    "skin.name.protocol": "Protocole",
-    "skin.name.crewmate": "Équipier",
     "skin.name.volt": "Volt",
-    "skin.name.yoda": "Yoda",
+    "skin.name.tuxedo": "Smoking",
+    "skin.name.bee": "Abeille",
+    "skin.name.graffiti": "Graffiti",
+    "skin.name.rainbow": "Arc-en-ciel",
+    "skin.name.urban": "Camo urbain",
+    "skin.name.america": "Amérique",
+    "skin.name.breton": "Breton",
+    "skin.name.pixel": "Pixel",
+    "skin.name.plumber": "Plombier",
+    "skin.name.ghost": "Fantôme",
+    "skin.name.capsule": "Capsule",
+    "skin.name.ronin": "Ronin",
+    "skin.name.wizard": "Mage",
+    "skin.name.mamba": "Mamba",
+    "skin.name.pirate": "Pirate",
+    "skin.name.tiger": "Tigre",
+    "skin.name.clown": "Poisson-clown",
+    "skin.name.panda": "Panda",
+    "skin.name.ladybug": "Coccinelle",
+    "skin.name.japan": "Japon",
+    "skin.name.germany": "Allemagne",
+    "skin.name.ukraine": "Ukraine",
+    "skin.name.mondrian": "Mondrian",
+    "skin.name.wave": "La Vague",
+    "skin.name.sakura": "Sakura",
+    "skin.name.aurora": "Aurore",
+    "skin.name.wood": "Bois",
+    "skin.name.carbon": "Carbone",
+    "skin.name.circuit": "Circuit",
     "skin.all": "Tous",
     "skin.search": "Rechercher…",
     "camera.replay": "REPLAY",
@@ -474,8 +545,20 @@ window.LOCALES = {
     "camera.mode_camera": "Caméra",
     "tab.main": "Reachy",
     "tab.store": "Store",
+    "appstage.dashboard": "Dashboard",
+    "appstage.app": "App",
+    "appstage.reload": "Recharger la page",
+    "appstage.restart": "Redémarrer l'app",
+    "appstage.debug": "Logs de l'app",
+    "appstage.fullscreen": "Ouvrir dans un nouvel onglet",
+    "appstage.close": "Fermer (arrêter l'app)",
+    "appstage.fps_hint": "Boucle de contrôle du robot (Hz)",
     "tab.settings": "Paramètres",
     "camera.mode_3d": "Simulateur",
+    "twin.hint_title": "Manipule le robot",
+    "twin.hint_body": "Attrape la tête ou le corps et glisse pour l'orienter",
+    "twin.replay": "Comment bouger le robot",
+    "camera.flag_live": "En direct",
     "camera.mode_mjpeg": "Caméra (MJPEG)",
     "camera.mode_webrtc": "Caméra + son (WebRTC)",
     "camera.listen": "Écouter les micros du robot",
@@ -498,10 +581,6 @@ window.LOCALES = {
     "control.title": "Contrôleur",
     "control.home": "Se relever (position initiale)",
     "control.rest": "Revenir à la position de repos",
-    "control.head_rotation": "Rotation de la tête",
-    "control.head_position": "Position de la tête",
-    "control.body": "Corps",
-    "control.antennas": "Antennes",
     "control.yaw": "Lacet",
     "control.pitch": "Tangage",
     "control.roll": "Roulis",
@@ -511,11 +590,37 @@ window.LOCALES = {
     "control.body_yaw": "Rotation",
     "control.antenna_left": "Gauche",
     "control.antenna_right": "Droite",
-    "control.look_hint": "Cliquez n'importe où dans la vue caméra : la tête regardera ce point.",
+    "control.intensity": "Luminosité",
+    "control.precision": "Réglages fins",
+    "control.sequence": "Séquence",
+    "control.seq_add": "Capturer la pose",
+    "control.seq_prev": "Pose précédente",
+    "control.seq_next": "Pose suivante",
+    "control.seq_play": "Rejouer",
+    "control.seq_import": "Importer (.json)",
+    "control.seq_export": "Exporter (.json)",
+    "control.seq_clear": "Vider",
+    "control.seq_empty": "Aucune pose. Posez le robot, puis +.",
+    "control.seq_bad": "Fichier de séquence invalide",
+    "control.eyes_off": "Éteints",
+    "control.eyes_custom": "Couleur personnalisée",
+    "eyes.effects": "Yeux",
+    "eyes.sc_wink": "Clin d'œil",
+    "eyes.sc_breathe": "Respiration",
+    "eyes.sc_smooth": "Fondu",
+    "eyes.sc_disco": "Disco",
+    "eyes.sc_chaos": "Chaos",
+    "eyes.sc_weewoo": "Weewoo",
+    "eyes.sc_pinpon": "Pin-pon",
+    "eyes.sc_cylon": "Cylon",
+    "eyes.sc_anger": "Colère",
+    "eyes.sc_amazement": "Stupeur",
+    "eyes.sc_heart": "Battement",
+    "eyes.sc_hypno": "Hypnose",
+    "eyes.sc_sunset": "Couchant",
     "control.move_running": "Un mouvement enregistré est en cours : le robot ignore le contrôle manuel jusqu'à la fin.",
     "common.connect": "Connecter",
     "common.connected": "Connecté",
-    "common.dashboard_title": "Tableau de bord Reachy Mini",
     "common.error_prefix": "Erreur : {message}",
     "common.failed": "Échec",
     "common.off": "Désactivé",
@@ -578,7 +683,6 @@ window.LOCALES = {
     "logs.title": "Logs du daemon",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "daemon injoignable, aucun mouvement",
-    "moves.title": "Mouvements",
     "moves.dances": "Danses",
     "moves.emotions": "Émotions",
     "moves.loading": "Chargement des mouvements…",
@@ -592,6 +696,8 @@ window.LOCALES = {
     "eq.treble": "Aigu",
     "eq.general": "Général",
     "eq.tone": "Tonalité",
+    "eq.bands": "Égaliseur",
+    "eq.flat": "Plat",
     "eq.unavailable": "EasyEffects n'est pas installé sur le robot.",
     "settings.appearance": "Apparence",
     "settings.language": "Langue",
@@ -599,9 +705,7 @@ window.LOCALES = {
     "settings.light_theme": "Thème clair",
     "settings.palette": "Palette",
     "settings.random_skin": "Skin aléatoire",
-    "settings.debug": "Mode debug",
-    "settings.debug_hint": "Renvoie la console du navigateur dans le panneau des logs",
-    "settings.random_skin_hint": "Un skin différent à chaque démarrage",
+    "settings.debug": "Debug console",
     "settings.theme": "Thème",
     "settings.title": "Paramètres",
     "store.advanced_title": "Installer un Space privé",
@@ -839,7 +943,7 @@ window.LOCALES = {
     "cam.eyes.5": "Compruebo que sigo teniendo los dos ojos…",
     "cam.eyes.6": "Recuento mis píxeles…",
     "cam.eyes.7": "Quito el vaho…",
-    "cam.eyes.8": "Cinco minutos más…",
+    "cam.eyes.8": "Cinco milisegundos más…",
     "cam.eyes.9": "Y se hizo la luz…",
     "cam.eyes.10": "Fallo un poco al despertar…",
     "cam.eyes.11": "¿Primero un café?",
@@ -853,20 +957,39 @@ window.LOCALES = {
     "skin.name.default": "Original",
     "skin.name.flash": "Flash",
     "skin.name.spider": "Araña",
-    "skin.name.america": "América",
-    "skin.name.urban": "Camuflaje urbano",
+    "skin.name.bat": "Murciélago",
+    "skin.name.steel": "Super",
+    "skin.name.iron": "Iron",
+    "skin.name.volt": "Volt",
+    "skin.name.tuxedo": "Esmoquin",
+    "skin.name.bee": "Abeja",
     "skin.name.graffiti": "Grafiti",
     "skin.name.rainbow": "Arcoíris",
+    "skin.name.urban": "Camuflaje urbano",
+    "skin.name.america": "América",
     "skin.name.breton": "Bretón",
-    "skin.name.bat": "Murciélago",
-    "skin.name.steel": "Súper",
-    "skin.name.iron": "Hierro",
-    "skin.name.rage": "Furia",
-    "skin.name.ranger": "Astro",
-    "skin.name.protocol": "Protocolo",
-    "skin.name.crewmate": "Tripulante",
-    "skin.name.volt": "Voltio",
-    "skin.name.yoda": "Yoda",
+    "skin.name.pixel": "Píxel",
+    "skin.name.plumber": "Fontanero",
+    "skin.name.ghost": "Fantasma",
+    "skin.name.capsule": "Cápsula",
+    "skin.name.ronin": "Ronin",
+    "skin.name.wizard": "Mago",
+    "skin.name.mamba": "Mamba",
+    "skin.name.pirate": "Pirata",
+    "skin.name.tiger": "Tigre",
+    "skin.name.clown": "Pez payaso",
+    "skin.name.panda": "Panda",
+    "skin.name.ladybug": "Mariquita",
+    "skin.name.japan": "Japón",
+    "skin.name.germany": "Alemania",
+    "skin.name.ukraine": "Ucrania",
+    "skin.name.mondrian": "Mondrian",
+    "skin.name.wave": "La Ola",
+    "skin.name.sakura": "Sakura",
+    "skin.name.aurora": "Aurora",
+    "skin.name.wood": "Madera",
+    "skin.name.carbon": "Carbono",
+    "skin.name.circuit": "Circuito",
     "skin.all": "Todos",
     "skin.search": "Buscar…",
     "camera.replay": "REPETICIÓN",
@@ -876,8 +999,20 @@ window.LOCALES = {
     "camera.mode_camera": "Cámara",
     "tab.main": "Reachy",
     "tab.store": "Tienda",
+    "appstage.dashboard": "Panel",
+    "appstage.app": "App",
+    "appstage.reload": "Recargar la página",
+    "appstage.restart": "Reiniciar la app",
+    "appstage.debug": "Registros de la app",
+    "appstage.fullscreen": "Abrir en una pestaña nueva",
+    "appstage.close": "Cerrar (detener la app)",
+    "appstage.fps_hint": "Bucle de control del robot (Hz)",
     "tab.settings": "Ajustes",
     "camera.mode_3d": "Simulador",
+    "twin.hint_title": "Mueve el robot",
+    "twin.hint_body": "Agarra la cabeza o el cuerpo y arrástralo para orientarlo",
+    "twin.replay": "Cómo mover el robot",
+    "camera.flag_live": "En vivo",
     "camera.mode_mjpeg": "Cámara (MJPEG)",
     "camera.mode_webrtc": "Cámara + sonido (WebRTC)",
     "camera.listen": "Escuchar los micrófonos del robot",
@@ -900,10 +1035,6 @@ window.LOCALES = {
     "control.title": "Controlador",
     "control.home": "Enderezarse (posición inicial)",
     "control.rest": "Volver a la posición de reposo",
-    "control.head_rotation": "Rotación de la cabeza",
-    "control.head_position": "Posición de la cabeza",
-    "control.body": "Cuerpo",
-    "control.antennas": "Antenas",
     "control.yaw": "Guiñada",
     "control.pitch": "Cabeceo",
     "control.roll": "Alabeo",
@@ -913,11 +1044,37 @@ window.LOCALES = {
     "control.body_yaw": "Rotación",
     "control.antenna_left": "Izquierda",
     "control.antenna_right": "Derecha",
-    "control.look_hint": "Haz clic en cualquier punto de la cámara y la cabeza mirará hacia allí.",
+    "control.intensity": "Brillo",
+    "control.precision": "Ajustes finos",
+    "control.sequence": "Secuencia",
+    "control.seq_add": "Capturar la pose",
+    "control.seq_prev": "Pose anterior",
+    "control.seq_next": "Pose siguiente",
+    "control.seq_play": "Reproducir",
+    "control.seq_import": "Importar (.json)",
+    "control.seq_export": "Exportar (.json)",
+    "control.seq_clear": "Vaciar",
+    "control.seq_empty": "Sin poses. Coloca el robot, luego +.",
+    "control.seq_bad": "Archivo de secuencia no válido",
+    "control.eyes_off": "Apagados",
+    "control.eyes_custom": "Color personalizado",
+    "eyes.effects": "Ojos",
+    "eyes.sc_wink": "Guiño",
+    "eyes.sc_breathe": "Respiración",
+    "eyes.sc_smooth": "Fundido",
+    "eyes.sc_disco": "Disco",
+    "eyes.sc_chaos": "Caos",
+    "eyes.sc_weewoo": "Weewoo",
+    "eyes.sc_pinpon": "Pin-pon",
+    "eyes.sc_cylon": "Cylon",
+    "eyes.sc_anger": "Ira",
+    "eyes.sc_amazement": "Asombro",
+    "eyes.sc_heart": "Latido",
+    "eyes.sc_hypno": "Hipnosis",
+    "eyes.sc_sunset": "Ocaso",
     "control.move_running": "Se está reproduciendo un movimiento grabado: el robot ignora el control manual hasta que termine.",
     "common.connect": "Conectar",
     "common.connected": "Conectado",
-    "common.dashboard_title": "Panel de Reachy Mini",
     "common.error_prefix": "Error: {message}",
     "common.failed": "Falló",
     "common.off": "Apagado",
@@ -980,7 +1137,6 @@ window.LOCALES = {
     "logs.title": "Logs del daemon",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "daemon inaccesible: sin movimientos",
-    "moves.title": "Movimientos",
     "moves.dances": "Bailes",
     "moves.emotions": "Emociones",
     "moves.loading": "Cargando movimientos…",
@@ -994,6 +1150,8 @@ window.LOCALES = {
     "eq.treble": "Agudos",
     "eq.general": "General",
     "eq.tone": "Tono",
+    "eq.bands": "Ecualizador",
+    "eq.flat": "Plano",
     "eq.unavailable": "EasyEffects no está instalado en el robot.",
     "settings.appearance": "Apariencia",
     "settings.language": "Idioma",
@@ -1001,9 +1159,7 @@ window.LOCALES = {
     "settings.light_theme": "Tema claro",
     "settings.palette": "Paleta",
     "settings.random_skin": "Skin aleatorio",
-    "settings.debug": "Modo depuración",
-    "settings.debug_hint": "Refleja la consola del navegador en el panel de registros",
-    "settings.random_skin_hint": "Un skin distinto en cada inicio",
+    "settings.debug": "Consola de depuración",
     "settings.theme": "Tema",
     "settings.title": "Ajustes",
     "store.advanced_title": "Instalar un Space privado",
@@ -1241,7 +1397,7 @@ window.LOCALES = {
     "cam.eyes.5": "Ich prüfe, ob ich noch beide Augen habe…",
     "cam.eyes.6": "Ich zähle meine Pixel nach…",
     "cam.eyes.7": "Ich wische den Beschlag weg…",
-    "cam.eyes.8": "Noch fünf Minuten…",
+    "cam.eyes.8": "Noch fünf Millisekunden…",
     "cam.eyes.9": "Und es ward Licht…",
     "cam.eyes.10": "Ich hänge morgens manchmal kurz…",
     "cam.eyes.11": "Erst mal einen Kaffee?",
@@ -1255,20 +1411,39 @@ window.LOCALES = {
     "skin.name.default": "Original",
     "skin.name.flash": "Flash",
     "skin.name.spider": "Spinne",
-    "skin.name.america": "Amerika",
-    "skin.name.urban": "Urban-Tarnung",
-    "skin.name.graffiti": "Graffiti",
-    "skin.name.rainbow": "Regenbogen",
-    "skin.name.breton": "Bretonisch",
     "skin.name.bat": "Fledermaus",
     "skin.name.steel": "Super",
     "skin.name.iron": "Iron",
-    "skin.name.rage": "Wut",
-    "skin.name.ranger": "Astro",
-    "skin.name.protocol": "Protokoll",
-    "skin.name.crewmate": "Crewmate",
     "skin.name.volt": "Volt",
-    "skin.name.yoda": "Yoda",
+    "skin.name.tuxedo": "Smoking",
+    "skin.name.bee": "Biene",
+    "skin.name.graffiti": "Graffiti",
+    "skin.name.rainbow": "Regenbogen",
+    "skin.name.urban": "Urban-Tarnung",
+    "skin.name.america": "Amerika",
+    "skin.name.breton": "Bretonisch",
+    "skin.name.pixel": "Pixel",
+    "skin.name.plumber": "Klempner",
+    "skin.name.ghost": "Geist",
+    "skin.name.capsule": "Kapsel",
+    "skin.name.ronin": "Ronin",
+    "skin.name.wizard": "Magier",
+    "skin.name.mamba": "Mamba",
+    "skin.name.pirate": "Pirat",
+    "skin.name.tiger": "Tiger",
+    "skin.name.clown": "Clownfisch",
+    "skin.name.panda": "Panda",
+    "skin.name.ladybug": "Marienkäfer",
+    "skin.name.japan": "Japan",
+    "skin.name.germany": "Deutschland",
+    "skin.name.ukraine": "Ukraine",
+    "skin.name.mondrian": "Mondrian",
+    "skin.name.wave": "Die Welle",
+    "skin.name.sakura": "Sakura",
+    "skin.name.aurora": "Aurora",
+    "skin.name.wood": "Holz",
+    "skin.name.carbon": "Karbon",
+    "skin.name.circuit": "Schaltkreis",
     "skin.all": "Alle",
     "skin.search": "Suchen…",
     "camera.replay": "REPLAY",
@@ -1278,8 +1453,20 @@ window.LOCALES = {
     "camera.mode_camera": "Kamera",
     "tab.main": "Reachy",
     "tab.store": "Store",
+    "appstage.dashboard": "Dashboard",
+    "appstage.app": "App",
+    "appstage.reload": "Seite neu laden",
+    "appstage.restart": "App neu starten",
+    "appstage.debug": "App-Logs",
+    "appstage.fullscreen": "In neuem Tab öffnen",
+    "appstage.close": "Schließen (App stoppen)",
+    "appstage.fps_hint": "Regelschleife des Roboters (Hz)",
     "tab.settings": "Einstellungen",
     "camera.mode_3d": "Simulator",
+    "twin.hint_title": "Bewege den Roboter",
+    "twin.hint_body": "Kopf oder Körper greifen und ziehen, um ihn auszurichten",
+    "twin.replay": "So bewegst du den Roboter",
+    "camera.flag_live": "Live",
     "camera.mode_mjpeg": "Kamera (MJPEG)",
     "camera.mode_webrtc": "Kamera + Ton (WebRTC)",
     "camera.listen": "Robotermikrofone abhören",
@@ -1302,10 +1489,6 @@ window.LOCALES = {
     "control.title": "Steuerung",
     "control.home": "Grundstellung (aufrichten)",
     "control.rest": "Zurück in die Ruhelage",
-    "control.head_rotation": "Kopfdrehung",
-    "control.head_position": "Kopfposition",
-    "control.body": "Körper",
-    "control.antennas": "Antennen",
     "control.yaw": "Gieren",
     "control.pitch": "Nicken",
     "control.roll": "Rollen",
@@ -1315,11 +1498,37 @@ window.LOCALES = {
     "control.body_yaw": "Drehung",
     "control.antenna_left": "Links",
     "control.antenna_right": "Rechts",
-    "control.look_hint": "Klicke irgendwo ins Kamerabild, dann schaut der Kopf dorthin.",
+    "control.intensity": "Helligkeit",
+    "control.precision": "Feineinstellung",
+    "control.sequence": "Sequenz",
+    "control.seq_add": "Pose aufnehmen",
+    "control.seq_prev": "Vorherige Pose",
+    "control.seq_next": "Nächste Pose",
+    "control.seq_play": "Abspielen",
+    "control.seq_import": "Importieren (.json)",
+    "control.seq_export": "Exportieren (.json)",
+    "control.seq_clear": "Leeren",
+    "control.seq_empty": "Noch keine Pose. Roboter posieren, dann +.",
+    "control.seq_bad": "Ungültige Sequenzdatei",
+    "control.eyes_off": "Aus",
+    "control.eyes_custom": "Eigene Farbe",
+    "eyes.effects": "Augen",
+    "eyes.sc_wink": "Zwinkern",
+    "eyes.sc_breathe": "Atmen",
+    "eyes.sc_smooth": "Farbwechsel",
+    "eyes.sc_disco": "Disco",
+    "eyes.sc_chaos": "Chaos",
+    "eyes.sc_weewoo": "Weewoo",
+    "eyes.sc_pinpon": "Pin-pon",
+    "eyes.sc_cylon": "Cylon",
+    "eyes.sc_anger": "Wut",
+    "eyes.sc_amazement": "Staunen",
+    "eyes.sc_heart": "Herzschlag",
+    "eyes.sc_hypno": "Hypnose",
+    "eyes.sc_sunset": "Abendrot",
     "control.move_running": "Eine aufgezeichnete Bewegung läuft, der Roboter ignoriert die manuelle Steuerung bis zum Ende.",
     "common.connect": "Verbinden",
     "common.connected": "Verbunden",
-    "common.dashboard_title": "Reachy Mini Dashboard",
     "common.error_prefix": "Fehler: {message}",
     "common.failed": "Fehlgeschlagen",
     "common.off": "Aus",
@@ -1382,7 +1591,6 @@ window.LOCALES = {
     "logs.title": "Daemon-Logs",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "Daemon nicht erreichbar, keine Bewegungen",
-    "moves.title": "Bewegungen",
     "moves.dances": "Tänze",
     "moves.emotions": "Emotionen",
     "moves.loading": "Bewegungen werden geladen…",
@@ -1396,6 +1604,8 @@ window.LOCALES = {
     "eq.treble": "Höhen",
     "eq.general": "Allgemein",
     "eq.tone": "Klang",
+    "eq.bands": "Equalizer",
+    "eq.flat": "Neutral",
     "eq.unavailable": "EasyEffects ist nicht auf dem Roboter installiert.",
     "settings.appearance": "Erscheinungsbild",
     "settings.language": "Sprache",
@@ -1403,9 +1613,7 @@ window.LOCALES = {
     "settings.light_theme": "Helles Design",
     "settings.palette": "Farbpalette",
     "settings.random_skin": "Zufalls-Skin",
-    "settings.debug": "Debug-Modus",
-    "settings.debug_hint": "Spiegelt die Browser-Konsole ins Log-Panel",
-    "settings.random_skin_hint": "Bei jedem Start ein anderer Skin",
+    "settings.debug": "Debug-Konsole",
     "settings.theme": "Design",
     "settings.title": "Einstellungen",
     "store.advanced_title": "Privaten Space installieren",
@@ -1643,7 +1851,7 @@ window.LOCALES = {
     "cam.eyes.5": "Controllo di avere ancora entrambi gli occhi…",
     "cam.eyes.6": "Riconto i miei pixel…",
     "cam.eyes.7": "Tolgo l'appannamento…",
-    "cam.eyes.8": "Ancora cinque minuti…",
+    "cam.eyes.8": "Ancora cinque millisecondi…",
     "cam.eyes.9": "E luce fu…",
     "cam.eyes.10": "Appena sveglio ho qualche glitch…",
     "cam.eyes.11": "Prima un caffè?",
@@ -1657,20 +1865,39 @@ window.LOCALES = {
     "skin.name.default": "Originale",
     "skin.name.flash": "Flash",
     "skin.name.spider": "Ragno",
-    "skin.name.america": "America",
-    "skin.name.urban": "Camo urbano",
-    "skin.name.graffiti": "Graffiti",
-    "skin.name.rainbow": "Arcobaleno",
-    "skin.name.breton": "Bretone",
     "skin.name.bat": "Pipistrello",
     "skin.name.steel": "Super",
     "skin.name.iron": "Iron",
-    "skin.name.rage": "Furia",
-    "skin.name.ranger": "Astro",
-    "skin.name.protocol": "Protocollo",
-    "skin.name.crewmate": "Crewmate",
     "skin.name.volt": "Volt",
-    "skin.name.yoda": "Yoda",
+    "skin.name.tuxedo": "Smoking",
+    "skin.name.bee": "Ape",
+    "skin.name.graffiti": "Graffiti",
+    "skin.name.rainbow": "Arcobaleno",
+    "skin.name.urban": "Camo urbano",
+    "skin.name.america": "America",
+    "skin.name.breton": "Bretone",
+    "skin.name.pixel": "Pixel",
+    "skin.name.plumber": "Idraulico",
+    "skin.name.ghost": "Fantasma",
+    "skin.name.capsule": "Capsula",
+    "skin.name.ronin": "Ronin",
+    "skin.name.wizard": "Mago",
+    "skin.name.mamba": "Mamba",
+    "skin.name.pirate": "Pirata",
+    "skin.name.tiger": "Tigre",
+    "skin.name.clown": "Pesce pagliaccio",
+    "skin.name.panda": "Panda",
+    "skin.name.ladybug": "Coccinella",
+    "skin.name.japan": "Giappone",
+    "skin.name.germany": "Germania",
+    "skin.name.ukraine": "Ucraina",
+    "skin.name.mondrian": "Mondrian",
+    "skin.name.wave": "L'Onda",
+    "skin.name.sakura": "Sakura",
+    "skin.name.aurora": "Aurora",
+    "skin.name.wood": "Legno",
+    "skin.name.carbon": "Carbonio",
+    "skin.name.circuit": "Circuito",
     "skin.all": "Tutte",
     "skin.search": "Cerca…",
     "camera.replay": "REPLAY",
@@ -1680,8 +1907,20 @@ window.LOCALES = {
     "camera.mode_camera": "Fotocamera",
     "tab.main": "Reachy",
     "tab.store": "Store",
+    "appstage.dashboard": "Dashboard",
+    "appstage.app": "App",
+    "appstage.reload": "Ricarica la pagina",
+    "appstage.restart": "Riavvia l'app",
+    "appstage.debug": "Log dell'app",
+    "appstage.fullscreen": "Apri in una nuova scheda",
+    "appstage.close": "Chiudi (arresta l'app)",
+    "appstage.fps_hint": "Ciclo di controllo del robot (Hz)",
     "tab.settings": "Impostazioni",
     "camera.mode_3d": "Simulatore",
+    "twin.hint_title": "Muovi il robot",
+    "twin.hint_body": "Afferra la testa o il corpo e trascina per orientarlo",
+    "twin.replay": "Come muovere il robot",
+    "camera.flag_live": "Dal vivo",
     "camera.mode_mjpeg": "Fotocamera (MJPEG)",
     "camera.mode_webrtc": "Fotocamera + audio (WebRTC)",
     "camera.listen": "Ascolta i microfoni del robot",
@@ -1704,10 +1943,6 @@ window.LOCALES = {
     "control.title": "Controller",
     "control.home": "Rialzati (posizione iniziale)",
     "control.rest": "Torna alla posizione di riposo",
-    "control.head_rotation": "Rotazione della testa",
-    "control.head_position": "Posizione della testa",
-    "control.body": "Corpo",
-    "control.antennas": "Antenne",
     "control.yaw": "Imbardata",
     "control.pitch": "Beccheggio",
     "control.roll": "Rollio",
@@ -1717,11 +1952,37 @@ window.LOCALES = {
     "control.body_yaw": "Rotazione",
     "control.antenna_left": "Sinistra",
     "control.antenna_right": "Destra",
-    "control.look_hint": "Clicca ovunque nella vista telecamera: la testa guarderà quel punto.",
+    "control.intensity": "Luminosità",
+    "control.precision": "Regolazioni fini",
+    "control.sequence": "Sequenza",
+    "control.seq_add": "Cattura la posa",
+    "control.seq_prev": "Posa precedente",
+    "control.seq_next": "Posa successiva",
+    "control.seq_play": "Riproduci",
+    "control.seq_import": "Importa (.json)",
+    "control.seq_export": "Esporta (.json)",
+    "control.seq_clear": "Svuota",
+    "control.seq_empty": "Nessuna posa. Posiziona il robot, poi +.",
+    "control.seq_bad": "File di sequenza non valido",
+    "control.eyes_off": "Spenti",
+    "control.eyes_custom": "Colore personalizzato",
+    "eyes.effects": "Occhi",
+    "eyes.sc_wink": "Occhiolino",
+    "eyes.sc_breathe": "Respiro",
+    "eyes.sc_smooth": "Dissolvenza",
+    "eyes.sc_disco": "Disco",
+    "eyes.sc_chaos": "Caos",
+    "eyes.sc_weewoo": "Weewoo",
+    "eyes.sc_pinpon": "Pin-pon",
+    "eyes.sc_cylon": "Cylon",
+    "eyes.sc_anger": "Rabbia",
+    "eyes.sc_amazement": "Stupore",
+    "eyes.sc_heart": "Battito",
+    "eyes.sc_hypno": "Ipnosi",
+    "eyes.sc_sunset": "Tramonto",
     "control.move_running": "È in corso un movimento registrato: il robot ignora il controllo manuale fino al termine.",
     "common.connect": "Connetti",
     "common.connected": "Connesso",
-    "common.dashboard_title": "Dashboard Reachy Mini",
     "common.error_prefix": "Errore: {message}",
     "common.failed": "Non riuscito",
     "common.off": "Off",
@@ -1784,7 +2045,6 @@ window.LOCALES = {
     "logs.title": "Log del daemon",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "daemon non raggiungibile, nessun movimento",
-    "moves.title": "Movimenti",
     "moves.dances": "Danze",
     "moves.emotions": "Emozioni",
     "moves.loading": "Caricamento movimenti…",
@@ -1798,6 +2058,8 @@ window.LOCALES = {
     "eq.treble": "Alti",
     "eq.general": "Generale",
     "eq.tone": "Tono",
+    "eq.bands": "Equalizzatore",
+    "eq.flat": "Piatto",
     "eq.unavailable": "EasyEffects non è installato sul robot.",
     "settings.appearance": "Aspetto",
     "settings.language": "Lingua",
@@ -1805,9 +2067,7 @@ window.LOCALES = {
     "settings.light_theme": "Tema chiaro",
     "settings.palette": "Palette",
     "settings.random_skin": "Skin casuale",
-    "settings.debug": "Modalità debug",
-    "settings.debug_hint": "Rispecchia la console del browser nel pannello dei log",
-    "settings.random_skin_hint": "Una skin diversa a ogni avvio",
+    "settings.debug": "Console di debug",
     "settings.theme": "Tema",
     "settings.title": "Impostazioni",
     "store.advanced_title": "Installa uno Space privato",
@@ -2045,7 +2305,7 @@ window.LOCALES = {
     "cam.eyes.5": "Verifico se tenho os dois olhos…",
     "cam.eyes.6": "Reconto os meus pixels…",
     "cam.eyes.7": "Limpo o embaciado…",
-    "cam.eyes.8": "Mais cinco minutos…",
+    "cam.eyes.8": "Mais cinco milissegundos…",
     "cam.eyes.9": "E fez-se luz…",
     "cam.eyes.10": "Dou uns bugs ao acordar…",
     "cam.eyes.11": "Um cafezinho primeiro?",
@@ -2059,20 +2319,39 @@ window.LOCALES = {
     "skin.name.default": "Original",
     "skin.name.flash": "Flash",
     "skin.name.spider": "Aranha",
-    "skin.name.america": "América",
-    "skin.name.urban": "Camo urbano",
-    "skin.name.graffiti": "Graffiti",
-    "skin.name.rainbow": "Arco-íris",
-    "skin.name.breton": "Bretão",
     "skin.name.bat": "Morcego",
     "skin.name.steel": "Super",
-    "skin.name.iron": "Ferro",
-    "skin.name.rage": "Fúria",
-    "skin.name.ranger": "Astro",
-    "skin.name.protocol": "Protocolo",
-    "skin.name.crewmate": "Tripulante",
+    "skin.name.iron": "Iron",
     "skin.name.volt": "Volt",
-    "skin.name.yoda": "Yoda",
+    "skin.name.tuxedo": "Smoking",
+    "skin.name.bee": "Abelha",
+    "skin.name.graffiti": "Grafíti",
+    "skin.name.rainbow": "Arco-íris",
+    "skin.name.urban": "Camo urbano",
+    "skin.name.america": "América",
+    "skin.name.breton": "Bretão",
+    "skin.name.pixel": "Pixel",
+    "skin.name.plumber": "Encanador",
+    "skin.name.ghost": "Fantasma",
+    "skin.name.capsule": "Cápsula",
+    "skin.name.ronin": "Ronin",
+    "skin.name.wizard": "Mago",
+    "skin.name.mamba": "Mamba",
+    "skin.name.pirate": "Pirata",
+    "skin.name.tiger": "Tigre",
+    "skin.name.clown": "Peixe-palhaço",
+    "skin.name.panda": "Panda",
+    "skin.name.ladybug": "Joaninha",
+    "skin.name.japan": "Japão",
+    "skin.name.germany": "Alemanha",
+    "skin.name.ukraine": "Ucrânia",
+    "skin.name.mondrian": "Mondrian",
+    "skin.name.wave": "A Onda",
+    "skin.name.sakura": "Sakura",
+    "skin.name.aurora": "Aurora",
+    "skin.name.wood": "Madeira",
+    "skin.name.carbon": "Carbono",
+    "skin.name.circuit": "Circuito",
     "skin.all": "Todos",
     "skin.search": "Pesquisar…",
     "camera.replay": "REPETIÇÃO",
@@ -2082,8 +2361,20 @@ window.LOCALES = {
     "camera.mode_camera": "Câmara",
     "tab.main": "Reachy",
     "tab.store": "Loja",
+    "appstage.dashboard": "Painel",
+    "appstage.app": "App",
+    "appstage.reload": "Recarregar a página",
+    "appstage.restart": "Reiniciar a app",
+    "appstage.debug": "Logs da app",
+    "appstage.fullscreen": "Abrir num novo separador",
+    "appstage.close": "Fechar (parar a app)",
+    "appstage.fps_hint": "Ciclo de controlo do robô (Hz)",
     "tab.settings": "Definições",
     "camera.mode_3d": "Simulador",
+    "twin.hint_title": "Mova o robô",
+    "twin.hint_body": "Agarra a cabeça ou o corpo e arrasta para orientá-lo",
+    "twin.replay": "Como mover o robô",
+    "camera.flag_live": "Ao vivo",
     "camera.mode_mjpeg": "Câmara (MJPEG)",
     "camera.mode_webrtc": "Câmara + som (WebRTC)",
     "camera.listen": "Ouvir os microfones do robô",
@@ -2106,10 +2397,6 @@ window.LOCALES = {
     "control.title": "Controlador",
     "control.home": "Posição inicial (levantar)",
     "control.rest": "Voltar à posição de repouso",
-    "control.head_rotation": "Rotação da cabeça",
-    "control.head_position": "Posição da cabeça",
-    "control.body": "Corpo",
-    "control.antennas": "Antenas",
     "control.yaw": "Guinada",
     "control.pitch": "Inclinação",
     "control.roll": "Rolamento",
@@ -2119,11 +2406,37 @@ window.LOCALES = {
     "control.body_yaw": "Rotação",
     "control.antenna_left": "Esquerda",
     "control.antenna_right": "Direita",
-    "control.look_hint": "Clique em qualquer ponto da câmara e a cabeça olhará para lá.",
+    "control.intensity": "Brilho",
+    "control.precision": "Ajustes finos",
+    "control.sequence": "Sequência",
+    "control.seq_add": "Capturar a pose",
+    "control.seq_prev": "Pose anterior",
+    "control.seq_next": "Próxima pose",
+    "control.seq_play": "Reproduzir",
+    "control.seq_import": "Importar (.json)",
+    "control.seq_export": "Exportar (.json)",
+    "control.seq_clear": "Limpar",
+    "control.seq_empty": "Sem poses. Posicione o robô, depois +.",
+    "control.seq_bad": "Ficheiro de sequência inválido",
+    "control.eyes_off": "Desligados",
+    "control.eyes_custom": "Cor personalizada",
+    "eyes.effects": "Olhos",
+    "eyes.sc_wink": "Piscadela",
+    "eyes.sc_breathe": "Respiração",
+    "eyes.sc_smooth": "Fusão",
+    "eyes.sc_disco": "Disco",
+    "eyes.sc_chaos": "Caos",
+    "eyes.sc_weewoo": "Weewoo",
+    "eyes.sc_pinpon": "Pin-pon",
+    "eyes.sc_cylon": "Cylon",
+    "eyes.sc_anger": "Raiva",
+    "eyes.sc_amazement": "Espanto",
+    "eyes.sc_heart": "Batimento",
+    "eyes.sc_hypno": "Hipnose",
+    "eyes.sc_sunset": "Pôr do sol",
     "control.move_running": "Um movimento gravado está a decorrer: o robô ignora o controlo manual até terminar.",
     "common.connect": "Ligar",
     "common.connected": "Ligado",
-    "common.dashboard_title": "Painel do Reachy Mini",
     "common.error_prefix": "Erro: {message}",
     "common.failed": "Falhou",
     "common.off": "Desligado",
@@ -2186,7 +2499,6 @@ window.LOCALES = {
     "logs.title": "Logs do daemon",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "daemon inacessível: sem movimentos",
-    "moves.title": "Movimentos",
     "moves.dances": "Danças",
     "moves.emotions": "Emoções",
     "moves.loading": "A carregar movimentos…",
@@ -2200,6 +2512,8 @@ window.LOCALES = {
     "eq.treble": "Agudos",
     "eq.general": "Geral",
     "eq.tone": "Tom",
+    "eq.bands": "Equalizador",
+    "eq.flat": "Plano",
     "eq.unavailable": "O EasyEffects não está instalado no robô.",
     "settings.appearance": "Aspeto",
     "settings.language": "Idioma",
@@ -2207,9 +2521,7 @@ window.LOCALES = {
     "settings.light_theme": "Tema claro",
     "settings.palette": "Paleta",
     "settings.random_skin": "Skin aleatório",
-    "settings.debug": "Modo de depuração",
-    "settings.debug_hint": "Espelha a consola do navegador no painel de registos",
-    "settings.random_skin_hint": "Um skin diferente a cada início",
+    "settings.debug": "Consola de depuração",
     "settings.theme": "Tema",
     "settings.title": "Definições",
     "store.advanced_title": "Instalar um Space privado",
@@ -2447,7 +2759,7 @@ window.LOCALES = {
     "cam.eyes.5": "目が二つあるか確認中…",
     "cam.eyes.6": "ピクセルを数え直しています…",
     "cam.eyes.7": "くもりを拭き取っています…",
-    "cam.eyes.8": "あと五分…",
+    "cam.eyes.8": "あと五ミリ秒…",
     "cam.eyes.9": "光あれ…",
     "cam.eyes.10": "起きたては少しバグりがち…",
     "cam.eyes.11": "まずはコーヒー？",
@@ -2461,20 +2773,39 @@ window.LOCALES = {
     "skin.name.default": "オリジナル",
     "skin.name.flash": "フラッシュ",
     "skin.name.spider": "スパイダー",
-    "skin.name.america": "アメリカ",
-    "skin.name.urban": "アーバン迷彩",
-    "skin.name.graffiti": "グラフィティ",
-    "skin.name.rainbow": "レインボー",
-    "skin.name.breton": "ブルターニュ",
-    "skin.name.bat": "バット",
+    "skin.name.bat": "コウモリ",
     "skin.name.steel": "スーパー",
     "skin.name.iron": "アイアン",
-    "skin.name.rage": "レイジ",
-    "skin.name.ranger": "アストロ",
-    "skin.name.protocol": "プロトコル",
-    "skin.name.crewmate": "クルーメイト",
     "skin.name.volt": "ボルト",
-    "skin.name.yoda": "ヨーダ",
+    "skin.name.tuxedo": "タキシード",
+    "skin.name.bee": "ミツバチ",
+    "skin.name.graffiti": "グラフィティ",
+    "skin.name.rainbow": "レインボー",
+    "skin.name.urban": "アーバン迷彩",
+    "skin.name.america": "アメリカ",
+    "skin.name.breton": "ブルターニュ",
+    "skin.name.pixel": "ピクセル",
+    "skin.name.plumber": "配管工",
+    "skin.name.ghost": "ゴースト",
+    "skin.name.capsule": "カプセル",
+    "skin.name.ronin": "浪人",
+    "skin.name.wizard": "魔法使い",
+    "skin.name.mamba": "マンバ",
+    "skin.name.pirate": "海賊",
+    "skin.name.tiger": "トラ",
+    "skin.name.clown": "カクレクマノミ",
+    "skin.name.panda": "パンダ",
+    "skin.name.ladybug": "てんとう虫",
+    "skin.name.japan": "日本",
+    "skin.name.germany": "ドイツ",
+    "skin.name.ukraine": "ウクライナ",
+    "skin.name.mondrian": "モンドリアン",
+    "skin.name.wave": "波",
+    "skin.name.sakura": "桜",
+    "skin.name.aurora": "オーロラ",
+    "skin.name.wood": "木目",
+    "skin.name.carbon": "カーボン",
+    "skin.name.circuit": "回路",
     "skin.all": "すべて",
     "skin.search": "検索…",
     "camera.replay": "リプレイ",
@@ -2484,8 +2815,20 @@ window.LOCALES = {
     "camera.mode_camera": "カメラ",
     "tab.main": "Reachy",
     "tab.store": "ストア",
+    "appstage.dashboard": "ダッシュボード",
+    "appstage.app": "アプリ",
+    "appstage.reload": "ページを再読み込み",
+    "appstage.restart": "アプリを再起動",
+    "appstage.debug": "アプリのログ",
+    "appstage.fullscreen": "新しいタブで開く",
+    "appstage.close": "閉じる（アプリを停止）",
+    "appstage.fps_hint": "ロボットの制御ループ (Hz)",
     "tab.settings": "設定",
     "camera.mode_3d": "シミュレーター",
+    "twin.hint_title": "ロボットを動かす",
+    "twin.hint_body": "頭や胴体をつかんでドラッグすると向きが変わります",
+    "twin.replay": "ロボットの動かし方",
+    "camera.flag_live": "ライブ",
     "camera.mode_mjpeg": "カメラ (MJPEG)",
     "camera.mode_webrtc": "カメラ + 音声 (WebRTC)",
     "camera.listen": "ロボットのマイクを聞く",
@@ -2508,10 +2851,6 @@ window.LOCALES = {
     "control.title": "コントローラー",
     "control.home": "初期姿勢に戻る",
     "control.rest": "待機姿勢に戻す",
-    "control.head_rotation": "頭の回転",
-    "control.head_position": "頭の位置",
-    "control.body": "胴体",
-    "control.antennas": "アンテナ",
     "control.yaw": "ヨー",
     "control.pitch": "ピッチ",
     "control.roll": "ロール",
@@ -2521,11 +2860,37 @@ window.LOCALES = {
     "control.body_yaw": "回転",
     "control.antenna_left": "左",
     "control.antenna_right": "右",
-    "control.look_hint": "カメラ映像のどこかをクリックすると、頭がその点を見ます。",
+    "control.intensity": "明るさ",
+    "control.precision": "微調整",
+    "control.sequence": "シーケンス",
+    "control.seq_add": "ポーズを記録",
+    "control.seq_prev": "前のポーズ",
+    "control.seq_next": "次のポーズ",
+    "control.seq_play": "再生",
+    "control.seq_import": "読み込み (.json)",
+    "control.seq_export": "書き出し (.json)",
+    "control.seq_clear": "クリア",
+    "control.seq_empty": "ポーズなし。ロボットを動かして + を押す。",
+    "control.seq_bad": "無効なシーケンスファイル",
+    "control.eyes_off": "消灯",
+    "control.eyes_custom": "カスタムカラー",
+    "eyes.effects": "目",
+    "eyes.sc_wink": "ウインク",
+    "eyes.sc_breathe": "呼吸",
+    "eyes.sc_smooth": "フェード",
+    "eyes.sc_disco": "ディスコ",
+    "eyes.sc_chaos": "カオス",
+    "eyes.sc_weewoo": "ウィーウー",
+    "eyes.sc_pinpon": "ピーポー",
+    "eyes.sc_cylon": "サイロン",
+    "eyes.sc_anger": "怒り",
+    "eyes.sc_amazement": "驚き",
+    "eyes.sc_heart": "鼓動",
+    "eyes.sc_hypno": "催眠",
+    "eyes.sc_sunset": "夕焼け",
     "control.move_running": "記録された動作を再生中です。終わるまで手動操作は無視されます。",
     "common.connect": "接続",
     "common.connected": "接続済み",
-    "common.dashboard_title": "Reachy Mini ダッシュボード",
     "common.error_prefix": "エラー: {message}",
     "common.failed": "失敗",
     "common.off": "オフ",
@@ -2588,7 +2953,6 @@ window.LOCALES = {
     "logs.title": "デーモンログ",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "デーモンに接続できません。モーションなし",
-    "moves.title": "モーション",
     "moves.dances": "ダンス",
     "moves.emotions": "エモーション",
     "moves.loading": "モーションを読み込み中…",
@@ -2602,6 +2966,8 @@ window.LOCALES = {
     "eq.treble": "高音",
     "eq.general": "一般",
     "eq.tone": "トーン",
+    "eq.bands": "イコライザー",
+    "eq.flat": "フラット",
     "eq.unavailable": "EasyEffects はロボットにインストールされていません。",
     "settings.appearance": "外観",
     "settings.language": "言語",
@@ -2609,9 +2975,7 @@ window.LOCALES = {
     "settings.light_theme": "ライトテーマ",
     "settings.palette": "パレット",
     "settings.random_skin": "ランダムスキン",
-    "settings.debug": "デバッグモード",
-    "settings.debug_hint": "ブラウザのコンソールをログパネルに表示",
-    "settings.random_skin_hint": "起動ごとに違うスキン",
+    "settings.debug": "デバッグコンソール",
     "settings.theme": "テーマ",
     "settings.title": "設定",
     "store.advanced_title": "非公開の Space をインストール",
@@ -2849,7 +3213,7 @@ window.LOCALES = {
     "cam.eyes.5": "أتأكد أنني ما زلت أملك عينين…",
     "cam.eyes.6": "أعيد عدّ بكسلاتي…",
     "cam.eyes.7": "أمسح الضباب…",
-    "cam.eyes.8": "خمس دقائق إضافية…",
+    "cam.eyes.8": "خمس ميلي ثانية إضافية…",
     "cam.eyes.9": "ثم كان النور…",
     "cam.eyes.10": "أتلعثم قليلًا عند الاستيقاظ…",
     "cam.eyes.11": "قهوة أولًا؟",
@@ -2863,20 +3227,39 @@ window.LOCALES = {
     "skin.name.default": "أصلي",
     "skin.name.flash": "فلاش",
     "skin.name.spider": "العنكبوت",
-    "skin.name.america": "أمريكا",
-    "skin.name.urban": "تمويه حضري",
+    "skin.name.bat": "الخفاش",
+    "skin.name.steel": "سوبر",
+    "skin.name.iron": "آيرون",
+    "skin.name.volt": "فولت",
+    "skin.name.tuxedo": "بدلة سهرة",
+    "skin.name.bee": "نحلة",
     "skin.name.graffiti": "غرافيتي",
     "skin.name.rainbow": "قوس قزح",
+    "skin.name.urban": "تمويه حضري",
+    "skin.name.america": "أمريكا",
     "skin.name.breton": "بريتاني",
-    "skin.name.bat": "الخفاش",
-    "skin.name.steel": "خارق",
-    "skin.name.iron": "حديدي",
-    "skin.name.rage": "غضب",
-    "skin.name.ranger": "أسترو",
-    "skin.name.protocol": "بروتوكول",
-    "skin.name.crewmate": "زميل الطاقم",
-    "skin.name.volt": "فولت",
-    "skin.name.yoda": "يودا",
+    "skin.name.pixel": "بكسل",
+    "skin.name.plumber": "سبّاك",
+    "skin.name.ghost": "شبح",
+    "skin.name.capsule": "كبسولة",
+    "skin.name.ronin": "رونين",
+    "skin.name.wizard": "ساحر",
+    "skin.name.mamba": "مامبا",
+    "skin.name.pirate": "قرصان",
+    "skin.name.tiger": "نمر",
+    "skin.name.clown": "سمكة المهرج",
+    "skin.name.panda": "باندا",
+    "skin.name.ladybug": "دعسوقة",
+    "skin.name.japan": "اليابان",
+    "skin.name.germany": "ألمانيا",
+    "skin.name.ukraine": "أوكرانيا",
+    "skin.name.mondrian": "موندريان",
+    "skin.name.wave": "الموجة",
+    "skin.name.sakura": "ساكورا",
+    "skin.name.aurora": "الشفق القطبي",
+    "skin.name.wood": "خشب",
+    "skin.name.carbon": "كربون",
+    "skin.name.circuit": "دائرة",
     "skin.all": "الكل",
     "skin.search": "بحث…",
     "camera.replay": "إعادة",
@@ -2886,8 +3269,20 @@ window.LOCALES = {
     "camera.mode_camera": "الكاميرا",
     "tab.main": "Reachy",
     "tab.store": "المتجر",
+    "appstage.dashboard": "لوحة التحكم",
+    "appstage.app": "التطبيق",
+    "appstage.reload": "إعادة تحميل الصفحة",
+    "appstage.restart": "إعادة تشغيل التطبيق",
+    "appstage.debug": "سجلات التطبيق",
+    "appstage.fullscreen": "فتح في علامة تبويب جديدة",
+    "appstage.close": "إغلاق (إيقاف التطبيق)",
+    "appstage.fps_hint": "حلقة تحكم الروبوت (هرتز)",
     "tab.settings": "الإعدادات",
     "camera.mode_3d": "محاكاة",
+    "twin.hint_title": "حرّك الروبوت",
+    "twin.hint_body": "أمسك الرأس أو الجسم واسحب لتوجيهه",
+    "twin.replay": "كيفية تحريك الروبوت",
+    "camera.flag_live": "مباشر",
     "camera.mode_mjpeg": "الكاميرا (MJPEG)",
     "camera.mode_webrtc": "الكاميرا + الصوت (WebRTC)",
     "camera.listen": "الاستماع إلى ميكروفونات الروبوت",
@@ -2910,10 +3305,6 @@ window.LOCALES = {
     "control.title": "وحدة التحكم",
     "control.home": "الوقوف من جديد (الوضع الأولي)",
     "control.rest": "العودة إلى وضع الراحة",
-    "control.head_rotation": "دوران الرأس",
-    "control.head_position": "موضع الرأس",
-    "control.body": "الجسم",
-    "control.antennas": "الهوائيات",
     "control.yaw": "الانعراج",
     "control.pitch": "الميل",
     "control.roll": "الدوران",
@@ -2923,11 +3314,37 @@ window.LOCALES = {
     "control.body_yaw": "دوران",
     "control.antenna_left": "يسار",
     "control.antenna_right": "يمين",
-    "control.look_hint": "انقر في أي مكان من صورة الكاميرا وسينظر الرأس إلى تلك النقطة.",
+    "control.intensity": "السطوع",
+    "control.precision": "ضبط دقيق",
+    "control.sequence": "تسلسل",
+    "control.seq_add": "التقاط الوضعية",
+    "control.seq_prev": "الوضعية السابقة",
+    "control.seq_next": "الوضعية التالية",
+    "control.seq_play": "تشغيل",
+    "control.seq_import": "استيراد (.json)",
+    "control.seq_export": "تصدير (.json)",
+    "control.seq_clear": "مسح",
+    "control.seq_empty": "لا وضعيات بعد. حرّك الروبوت ثم +.",
+    "control.seq_bad": "ملف تسلسل غير صالح",
+    "control.eyes_off": "إطفاء",
+    "control.eyes_custom": "لون مخصص",
+    "eyes.effects": "العيون",
+    "eyes.sc_wink": "غمزة",
+    "eyes.sc_breathe": "تنفّس",
+    "eyes.sc_smooth": "تدرّج",
+    "eyes.sc_disco": "ديسكو",
+    "eyes.sc_chaos": "فوضى",
+    "eyes.sc_weewoo": "وي-وو",
+    "eyes.sc_pinpon": "بين-بون",
+    "eyes.sc_cylon": "سايلون",
+    "eyes.sc_anger": "غضب",
+    "eyes.sc_amazement": "ذهول",
+    "eyes.sc_heart": "نبض",
+    "eyes.sc_hypno": "تنويم",
+    "eyes.sc_sunset": "غروب",
     "control.move_running": "يتم تشغيل حركة مسجّلة؛ يتجاهل الروبوت التحكم اليدوي حتى تنتهي.",
     "common.connect": "اتصال",
     "common.connected": "متصل",
-    "common.dashboard_title": "لوحة تحكم Reachy Mini",
     "common.error_prefix": "خطأ: {message}",
     "common.failed": "فشل",
     "common.off": "إيقاف",
@@ -2990,7 +3407,6 @@ window.LOCALES = {
     "logs.title": "سجلات البرنامج الخفي",
     "logs.warn_plus": "Warn+",
     "moves.daemon_unreachable": "تعذّر الوصول إلى البرنامج الخفي؛ لا توجد حركات",
-    "moves.title": "الحركات",
     "moves.dances": "رقصات",
     "moves.emotions": "مشاعر",
     "moves.loading": "جارٍ تحميل الحركات…",
@@ -3004,6 +3420,8 @@ window.LOCALES = {
     "eq.treble": "الحادة",
     "eq.general": "عام",
     "eq.tone": "النغمة",
+    "eq.bands": "الموازن",
+    "eq.flat": "مسطّح",
     "eq.unavailable": "EasyEffects غير مثبّت على الروبوت.",
     "settings.appearance": "المظهر",
     "settings.language": "اللغة",
@@ -3011,9 +3429,7 @@ window.LOCALES = {
     "settings.light_theme": "السمة الفاتحة",
     "settings.palette": "لوحة الألوان",
     "settings.random_skin": "مظهر عشوائي",
-    "settings.debug": "وضع التصحيح",
-    "settings.debug_hint": "يعكس وحدة تحكم المتصفح في لوحة السجلات",
-    "settings.random_skin_hint": "مظهر مختلف عند كل تشغيل",
+    "settings.debug": "وحدة تصحيح الأخطاء",
     "settings.theme": "السمة",
     "settings.title": "الإعدادات",
     "store.advanced_title": "تثبيت Space خاص",

reachy_web/static/js/logo_anim.js

@@ -20,8 +20,15 @@ const logoAnim = {
     { cls: 'v-sleepy',  ms: 2400, w: 2 },
     { cls: 'v-squint',  ms: 2000, w: 2 },
     { cls: 'v-excited', ms: 1800, w: 1 },
-    { cls: 'v-boot',    ms: 1600, w: 1 },
+    { cls: 'v-boot',    ms: 2200, w: 1 },
     { cls: 'v-glasses', ms: 2800, w: 1 },
+    { cls: 'v-pendule',   ms: 2600, w: 1 },
+    { cls: 'v-twist',     ms: 1800, w: 1 },
+    { cls: 'v-shimmy',    ms: 1300, w: 1 },
+    { cls: 'v-pirouette', ms: 1600, w: 1 },
+    { cls: 'v-boing',     ms: 1700, w: 1 },
+    { cls: 'v-coucoutete', ms: 2600, w: 1 },
+    { cls: 'v-curieux',   ms: 2400, w: 2 },
   ],
   PAUSE_MIN: 4000,
   PAUSE_MAX: 11000,

reachy_web/static/js/logs.js

@@ -18,57 +18,22 @@ const daemonLogs = {
     root: null,
     inline: false,
 
-    // --- browser debug mode ---------------------------------------------------
-    // When on, the browser's own console (and any dbg() calls) are mirrored into
-    // this same panel, same format, so you can read what the PAGE sees — WebRTC
-    // producers, audio tracks, mic levels — next to the daemon's logs. Buffered
-    // until the panel is built, then flushed.
+    // --- debug console --------------------------------------------------------
+    // A toggle (Settings → Appearance) that turns the page's verbose debug output
+    // ON in the BROWSER console — nothing is copied into the logs panel: that
+    // panel is the SERVER's logs, faithfully, and stays that way. Our own debug
+    // lines go through dbg() and print to the console only while this is on.
     debugOn: false,
-    localBuffer: [],
-    _hooked: false,
 
     setDebug: (on) => {
         daemonLogs.debugOn = !!on;
         try { localStorage.setItem('debug', on ? '1' : '0'); } catch (e) { /* private mode */ }
-        if (on) { daemonLogs.hookConsole(); daemonLogs.local(1, '🌐 browser debug on'); }
+        if (on) console.log('🌐 debug console on');
     },
 
-    // one line INTO the panel, from the browser side. `level`: 0 dbg 1 inf 2 warn 3 err
-    local: (level, msg) => {
-        const word = { 0: 'DEBUG', 1: 'INFO', 2: 'WARNING', 3: 'ERROR' }[level] || 'DEBUG';
-        const raw = `${word} ${msg}`;
-        if (document.getElementById('lp-body')) daemonLogs.appendLog(raw);
-        else {
-            daemonLogs.localBuffer.push(raw);
-            if (daemonLogs.localBuffer.length > daemonLogs.MAX_LINES) daemonLogs.localBuffer.shift();
-        }
-    },
-
-    flushLocal: () => {
-        const q = daemonLogs.localBuffer;
-        daemonLogs.localBuffer = [];
-        q.forEach(daemonLogs.appendLog);
-    },
-
-    // mirror console.* into the panel while debug is on (the real console still
-    // gets everything; we only forward when the flag is set)
-    hookConsole: () => {
-        if (daemonLogs._hooked) return;
-        daemonLogs._hooked = true;
-        const lvl = { log: 1, info: 1, debug: 0, warn: 2, error: 3 };
-        Object.keys(lvl).forEach((k) => {
-            const orig = console[k] ? console[k].bind(console) : () => {};
-            console[k] = (...args) => {
-                orig(...args);
-                if (!daemonLogs.debugOn) return;
-                const msg = args.map((a) => {
-                    if (typeof a === 'string') return a;
-                    try { return JSON.stringify(a); } catch (e) { return String(a); }
-                }).join(' ');
-                daemonLogs.local(lvl[k], '🌐 ' + msg);
-            };
-        });
-    },
+    // verbose page-side logging, gated on the toggle. Same call shape as
+    // console.log; silent unless the Debug console switch is on.
+    dbg: (...args) => { if (daemonLogs.debugOn) console.log(...args); },
 
     build: () => {
         if (daemonLogs.root) return;
@@ -134,11 +99,12 @@ const daemonLogs = {
             if (e.key === 'Escape' && daemonLogs.isOpen && !daemonLogs.inline) daemonLogs.closePanel();
         });
 
-        // a click anywhere in the page closes the panel — but not a click inside it,
-        // nor the topbar button that would immediately reopen it
+        // a click anywhere in the page closes the panel — but not a click inside
+        // it, nor on ANY drawer opener (which switches drawers; closing here on
+        // pointerdown would shift the page and eat that opener's click)
         document.addEventListener('pointerdown', e => {
             if (!daemonLogs.isOpen || daemonLogs.inline) return;
-            if (el.contains(e.target) || e.target.closest('[data-logs-toggle]')) return;
+            if (el.contains(e.target) || e.target.closest(window.DRAWER_OPENERS)) return;
             daemonLogs.closePanel();
         });
     },
@@ -149,8 +115,7 @@ const daemonLogs = {
     },
 
     openPanel: () => {
-        // one drawer at a time (see controller.open)
-        if (typeof controller !== 'undefined' && controller.isOpen) controller.close();
+        closeOtherDrawers('logs');   // one drawer at a time (shared right edge)
         daemonLogs.build();
         // Append BEFORE flushing the buffer: appendLog resolves #lp-body via
         // document.getElementById, so it must already be in the DOM. With debug
@@ -158,7 +123,6 @@ const daemonLogs = {
         // threw here — aborting the open before isOpen=true, so the first click
         // did nothing (and cleared the buffer) and only the second one worked.
         if (!daemonLogs.root.isConnected) document.body.appendChild(daemonLogs.root);
-        daemonLogs.flushLocal();
         requestAnimationFrame(() => daemonLogs.root.classList.add('open'));
         document.body.classList.add('lp-open');
         daemonLogs.isOpen = true;
@@ -175,7 +139,6 @@ const daemonLogs = {
     // — inline mode (/logs page)
     mountInline: (container) => {
         daemonLogs.build();
-        daemonLogs.flushLocal();
         daemonLogs.inline = true;
         daemonLogs.root.classList.add('lp-inline', 'open');
         container.appendChild(daemonLogs.root);
@@ -251,7 +214,19 @@ const daemonLogs = {
         return body.scrollHeight - body.scrollTop <= body.clientHeight + 50;
     },
 
+    // Known-noise lines from the DAEMON's side that say nothing anyone can act
+    // on. We cannot quiet them at the source (it is Pollen's process, not ours),
+    // so they are dropped here, before the panel. Keep every pattern narrow: a
+    // line must be provably routine to earn its place.
+    NOISE: [
+        // onnxruntime probing for a GPU at model load: the Pi's VideoCore is a
+        // platform device with no PCI vendor file, so discovery "fails" and it
+        // falls back to CPU — the only option on a Pi anyway. Two lines per load.
+        /onnxruntime.*device_discovery|GetGpuDevices|Failed to detect devices under "\/sys\/class\/drm/,
+    ],
+
     appendLog: (raw) => {
+        if (daemonLogs.NOISE.some((re) => re.test(raw))) return;
         if (daemonLogs.paused) {
             daemonLogs.pausedQueue.push(raw);
             if (daemonLogs.pausedQueue.length > daemonLogs.MAX_LINES) daemonLogs.pausedQueue.shift();
@@ -348,11 +323,13 @@ const daemonLogs = {
     }
 };
 
-// Debug mode: hook the console once (cheap; forwarding is gated by debugOn), and
-// turn it on now if it was left on last session.
+// Restore the Debug console toggle from last session.
 window.addEventListener('DOMContentLoaded', () => {
-    daemonLogs.hookConsole();
     let on = false;
     try { on = localStorage.getItem('debug') === '1'; } catch (e) { /* private mode */ }
     if (on) daemonLogs.setDebug(true);
 });
+
+// dbg(): global page-side verbose logging, printed to the browser console only
+// while the Debug console toggle is on. Safe before daemonLogs exists.
+window.dbg = (...args) => { if (typeof daemonLogs !== 'undefined' && daemonLogs.debugOn) console.log(...args); };

reachy_web/static/js/move_player.js

@@ -25,12 +25,8 @@ const movePlayer = {
     return label === key ? name.replace(/[_-]/g, ' ') : label;
   },
 
-  setDataset: (btn) => {
-    document.querySelectorAll('#move-dataset-seg button').forEach((b) => b.classList.remove('on'));
-    btn.classList.add('on');
-    movePlayer.dataset = btn.dataset.dataset;
-    movePlayer.load();
-  },
+  // dataset switching lives in the catalogue tabs now (tabs.js): it sets
+  // movePlayer.dataset and calls load()
 
   load: async () => {
     const grid = document.getElementById('move-grid');