# Refonte UI Atelier — « Console du Professeur Zacus »

**Date** : 2026-06-13
**Statut** : design approuvé (split vertical)
**Périmètre** : `frontend-v3/apps/atelier`

## 1. Intention

Refondre complètement l'UI de l'atelier d'authoring Zacus :
- **retirer** toute la simulation 3D (R3F/three) ;
- adopter un **langage visuel néo-rétro « labo du professeur »** (palette Workbench du firmware) ;
- **conserver Blockly** comme cœur de l'édition, refondre le layout autour ;
- remplacer la colonne 3D par un **Banc d'essai** : aperçu écran device fidèle **+** vue flux du scénario (split vertical, les deux visibles).

## 2. Layout cible

```
┌───────────────────────────────────────────────┐
│  ▦ ZACUS · ATELIER   [Menu][Config][Déployer][✦Assets]   ← barre labo (Orbitron)
├──────────────────────────┬────────────────────┤
│   Éditeur Blockly        │  BANC D'ESSAI        │
│   (thème Workbench) 55%   │  ┌── Écran device ──┐ │  aperçu LCD ST7796 fidèle
│                          │  └──────────────────┘ │  de l'étape sélectionnée
│                          │  ┌── Flux scénario ─┐ │  graphe d'étapes/pivots
│                          │  └──────────────────┘ │  clic nœud → écran + bloc
├──────────────────────────┴────────────────────┤
│  Console validation (schema/compile) · 25%      │
└───────────────────────────────────────────────┘
```

- Colonne droite = `WorkbenchPane`, **split vertical** : `DeviceScreen` (haut) + `FlowGraph` (bas), via `react-resizable-panels` (déjà utilisé).
- `⌘B` : bascule l'affichage du Banc d'essai (remplace l'ancien toggle 3D).

## 3. Langage visuel (Workbench)

Repris 1:1 de `ESP32_ZACUS/.../display_ui.cpp` :
- Palette : fond bleu profond `#0055AA` → quasi-noir en surfaces ; accent `#FF8800` (orange Workbench) ; valeurs `#FFFFFF` ; labels `#AAAAAA`.
- Fonts : **Orbitron** (titres, chrome) + **IBM Plex Mono** (données, labels). Chargées localement (pas de CDN bloquant) avec fallbacks.
- Chrome : barre-titre façon device, cadres de panneaux étiquetés, LEDs de statut (gateway / cartes), légère texture grille/scanline.
- **Blockly** reçoit un thème custom assorti (API `Blockly.Theme`).

## 4. Composants

### Supprimés
- `components/StagePane.tsx`
- `scene/*` : NpcBubble, PuzzleStation, PuzzleStations, Room, RoomScene, RtcPhone
- `puzzles/*` : P1Sound, P5Morse, P6Symbols, P7Coffre
- `modes/*` : DemoMode, SandboxMode, TestMode
- `stores/simStore.ts`
- deps `three`, `@types/three`, `@react-three/fiber`, `@react-three/drei`
- `manualChunks` three/r3f dans `vite.config.ts`
- Console : onglets de **modes** (liés à la sim) → la console ne garde que la validation.

### Nouveaux
- `components/WorkbenchPane.tsx` — split vertical (Écran / Flux).
- `components/DeviceScreen.tsx` — réutilise le rendu fidèle de `ScreenPreview` (extrait de `ScreenEditorPanel`/`lib/screenSpec.ts`), branché sur la `scene` de l'étape sélectionnée.
- `components/FlowGraph.tsx` — nœuds = steps du scénario compilé (IR), arêtes = transitions/pivots ; clic → sélection d'étape.
- `stores/selectionStore.ts` — état léger : `selectedStepId`.

### Re-skinnés
- `Layout.tsx`, `MenuBar.tsx`, panneaux flottants (`GameConfigPanel`, `DeployPanel`, `AssetsPanel`), `main.css`, `BlocklyWorkspace.tsx` (thème).

## 5. Flux de données

- `FlowGraph` lit les steps depuis le scénario courant. Source : l'IR de `runtimeStore` (déjà calculé via le live-diff) ; à défaut, parse l'export YAML courant.
- Sélection d'un nœud → `selectionStore.selectedStepId` → `DeviceScreen` affiche la `scene` de ce step (title/subtitle/symbol/effect) ; option : focaliser le bloc Blockly correspondant.
- `DeviceScreen` se met aussi à jour quand l'IR change (édition live).

## 6. Découpage d'implémentation (3 phases)

- **A — Retrait 3D** : supprimer sim/3D, corriger `Layout`/`ConsolePane`/`App`, retirer les deps + `manualChunks`, mettre à jour les hooks e2e (`window.__atelierStores` perd `sim`). Pure soustraction — dérisque, build doit rester vert.
- **B — Thème Workbench** : palette/fonts/chrome/`main.css` + thème Blockly + re-skin barre & panneaux.
- **C — Banc d'essai** : `WorkbenchPane` + `DeviceScreen` + `FlowGraph` + `selectionStore` + wiring.

## 7. Tests & risques

- Gate à chaque phase : `pnpm exec tsc --noEmit` + `pnpm exec vite build` verts.
- Specs e2e pilotant la sim (`__atelierStores.sim`, modes) : à nettoyer/retirer en phase A.
- Risque principal : `FlowGraph` interactif (le morceau le plus consistant) — commencer simple (liste ordonnée de nœuds cliquables + arêtes de transition), enrichir ensuite.
- `DeviceScreen` dépend de la présence d'une `scene` sur le step ; fallback = afficher step_id/code comme le firmware.

## 8. Hors périmètre

- Refonte de l'édition par blocs (Blockly conservé tel quel, juste thémé).
- Playtest texte / runtime pas-à-pas (envisagé mais non retenu pour cette refonte).
- `apps/dashboard` (cette refonte concerne `apps/atelier`).
