feat(web): couche de tokens de design centralisée (surfaces, statuts, terminal)

Introduit une couche sémantique dans style.css (@theme) : surfaces (surface-0..3), bordures, texte (fg/muted/subtle) et accent, aliasant la palette Tailwind (rendu identique, vérifié dans le CSS produit). Ajoute les métriques du chrome IDE (--ide-*) pour la refonte à venir.

Centralise deux sources uniques : lib/terminal-theme.ts (thème + police xterm) et lib/status-tokens.ts (tons de statut, dédupliqués entre BaseBadge et SessionStateBadge). Définit le thème Monaco « arboretum-dark ». Remplace les #09090b épars des composants par bg-surface-0 (ne restent que index.html et les renderers exigeant un hex concret).

packages/web/src/lib/monaco-setup.ts

@@ -10,4 +10,15 @@ import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
   getWorker: () => new EditorWorker(),
 };
 
+// Thème dérivé de vs-dark dont le fond s'aligne sur --color-surface-0 (#09090b) : cohérence
+// visuelle de l'éditeur avec le reste du chrome IDE. Défini une fois au chargement du module.
+monaco.editor.defineTheme('arboretum-dark', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#09090b',
+  },
+});
+
 export { monaco };

packages/web/src/lib/status-tokens.ts

@@ -0,0 +1,38 @@
+// Tons de statut centralisés : paires bg/text et couleurs de point, partagées par
+// BaseBadge (pastille générique) et SessionStateBadge (état de session live).
+// Évite la duplication historique des classes amber/sky/emerald/zinc/red.
+
+export type Tone = 'zinc' | 'emerald' | 'amber' | 'sky' | 'red';
+
+/** Classe fond + texte de la pastille pour chaque ton. */
+export const TONE_BADGE: Record<Tone, string> = {
+  zinc: 'bg-zinc-800 text-zinc-400',
+  emerald: 'bg-emerald-950 text-emerald-400',
+  amber: 'bg-amber-950 text-amber-300',
+  sky: 'bg-sky-950 text-sky-300',
+  red: 'bg-red-950 text-red-400',
+};
+
+/** Classe de couleur du point d'état pour chaque ton. */
+export const TONE_DOT: Record<Tone, string> = {
+  zinc: 'bg-zinc-500',
+  emerald: 'bg-emerald-400',
+  amber: 'bg-amber-300',
+  sky: 'bg-sky-300',
+  red: 'bg-red-400',
+};
+
+/** Activité fine d'une session live (P3-B) : busy / waiting / idle (null = idle). */
+export type SessionActivityTone = 'busy' | 'waiting' | 'idle' | null;
+
+/** Mappe l'activité live d'une session vers un ton : waiting -> amber, busy -> sky, idle -> emerald. */
+export function activityTone(activity: SessionActivityTone): Tone {
+  if (activity === 'waiting') return 'amber';
+  if (activity === 'busy') return 'sky';
+  return 'emerald';
+}
+
+/** L'état busy/waiting mérite un point pulsé (activité en cours) ; idle reste fixe. */
+export function activityPulses(activity: SessionActivityTone): boolean {
+  return activity === 'waiting' || activity === 'busy';
+}

packages/web/src/lib/terminal-theme.ts

@@ -0,0 +1,16 @@
+// Source unique du thème xterm. xterm exige des couleurs hex concrètes (pas de var CSS),
+// donc les valeurs vivent ici plutôt que dupliquées dans chaque composant terminal.
+// À garder synchronisé avec --color-surface-0 de style.css si la surface de base change.
+import type { ITheme } from '@xterm/xterm';
+
+// Aligne le fond sur --color-surface-0 (#09090b) ; fg = zinc-300, curseur = zinc-200,
+// sélection = zinc-700.
+export const TERMINAL_THEME: ITheme = {
+  background: '#09090b',
+  foreground: '#d4d4d8',
+  cursor: '#e4e4e7',
+  selectionBackground: '#3f3f46',
+};
+
+export const TERMINAL_FONT_FAMILY =
+  "ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace";