feat(web): refonte visuelle « Emerald » (thème clair/sombre, polices, tokens)

Adopte le langage visuel du design system Emerald dans l'IDE web :
neutres zinc + accent emerald, polices auto-hébergées Inter + JetBrains
Mono, radii/pills mono, points de statut, motif terminal, halo/grain.
Refonte purement visuelle et additive (layout, routing, stores, protocole
inchangés).

- style.css : défauts sombres dans @theme + override clair sous
  html[data-theme=light] ; accent scindé (bright #34d399 / solid #059669 /
  hover) ; tokens border-soft/info/warn/danger/coffee ; idiomes globaux
  (focus/selection accent, scrollbars fines, jl-pulse/jl-blink, classes
  .chip/.status/.eyebrow/.label-mono/.caret/.halo/.grain, .btn*/.badge pill).
- lib/theme.ts : singleton themeMode/resolvedTheme (dark/light/system,
  persistedRef arb.theme) + application dataset.theme/metas ; script
  anti-FOUC inline dans index.html ; toggle ActivityBar + Réglages.
- Thèmes Monaco + xterm dark/light réactifs (palette ANSI + coloration
  syntaxique) ; fonts.ready + remeasureFonts pour l'alignement des glyphes.
- status-tokens : tons sémantiques tokenisés ; balayage des ~340 couleurs
  Tailwind brutes vers les tokens sur tout components/* et views/*
  (exceptions assumées commentées).
- GroupSummary.color exploité : icône de groupe teintée + ColorSwatchPicker
  (lib/group-colors.ts) dans les modals de groupe.
- Polices via @fontsource-variable/{inter,jetbrains-mono} (offline).

packages/web/src/components/TerminalView.vue

@@ -3,13 +3,13 @@
     <div ref="container" class="h-full w-full" />
     <div
       v-if="!controlling && !ended"
-      class="pointer-events-none absolute top-2 right-4 rounded bg-zinc-800/90 px-2 py-0.5 text-xs text-amber-300"
+      class="pointer-events-none absolute top-2 right-4 rounded-md bg-surface-2/90 px-2 py-0.5 text-xs text-warn"
     >
       {{ t('terminal.observer') }}
     </div>
     <div
       v-if="ended"
-      class="absolute inset-x-0 top-0 bg-red-950/90 px-4 py-2 text-center text-sm text-red-200"
+      class="absolute inset-x-0 top-0 border-b border-danger/40 bg-danger/15 px-4 py-2 text-center text-sm text-danger"
     >
       {{ t('terminal.sessionEnded') }}
     </div>
@@ -19,13 +19,14 @@
 <script setup lang="ts">
 // Terminal xterm branché sur le client WS multiplexé : stdin, resize (seulement
 // si controlling), flow control et resync entièrement délégués au ws-client.
-import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import '@xterm/xterm/css/xterm.css';
 import { wsClient, type Attachment } from '../lib/ws-client';
-import { TERMINAL_THEME, TERMINAL_FONT_FAMILY } from '../lib/terminal-theme';
+import { terminalTheme, TERMINAL_FONT_FAMILY } from '../lib/terminal-theme';
+import { resolvedTheme } from '../lib/theme';
 
 const props = withDefaults(defineProps<{ sessionId: string; mode?: 'interactive' | 'observer' }>(), {
   mode: 'interactive',
@@ -41,17 +42,27 @@ let attachment: Attachment | null = null;
 let resizeObserver: ResizeObserver | null = null;
 let intersectionObserver: IntersectionObserver | null = null;
 let onVisible: (() => void) | null = null;
+let stopThemeWatch: (() => void) | null = null;
 let disposed = false;
 
 onMounted(async () => {
   if (!container.value) return;
 
+  // Charge la fonte mono AVANT d'ouvrir xterm : sinon les cellules sont mesurées avec la fonte
+  // système puis désalignées quand 'JetBrains Mono Variable' arrive (refit ci-dessous en filet).
+  try {
+    await document.fonts?.load('13px "JetBrains Mono Variable"');
+  } catch {
+    /* Font Loading API indisponible : refit corrigera après chargement */
+  }
+  if (disposed || !container.value) return;
+
   term = new Terminal({
     cursorBlink: true,
     fontSize: 13,
     fontFamily: TERMINAL_FONT_FAMILY,
     scrollback: 20_000, // absorbe le replay élargi (REPLAY_TAIL_BYTES = 1 Mo) → on remonte plus loin
-    theme: TERMINAL_THEME,
+    theme: terminalTheme(resolvedTheme.value),
   });
   const fit = new FitAddon();
   term.loadAddon(fit);
@@ -91,6 +102,15 @@ onMounted(async () => {
     activeTerm.refresh(0, activeTerm.rows - 1);
   };
 
+  // Filet : re-mesure quand la fonte web est prête (au cas où le load ci-dessus n'a pas suffi).
+  void document.fonts?.ready.then(() => {
+    if (!disposed) refit();
+  });
+  // Repeint xterm lors d'une bascule de thème clair/sombre (sans recréer le terminal).
+  stopThemeWatch = watch(resolvedTheme, (r) => {
+    if (term) term.options.theme = terminalTheme(r);
+  });
+
   try {
     attachment = await wsClient.attach({
       sessionId: props.sessionId,
@@ -152,6 +172,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   disposed = true;
+  stopThemeWatch?.();
   resizeObserver?.disconnect();
   intersectionObserver?.disconnect();
   if (onVisible) document.removeEventListener('visibilitychange', onVisible);