fix(desktop): nom d'artefact distinct pour le build Windows portable

`win.artifactName` s'applique aux deux cibles : l'installeur NSIS et le build portable produisaient
tous deux `Arboretum-<version>-x64.exe`, donc une collision où l'un écrase l'autre. Le portable prend
un suffixe explicite. Les liens de la vitrine visent l'installeur NSIS, dont le nom ne change pas.

.gitea/scripts/attach-release-assets.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+# Attache des fichiers à une release Gitea, de façon idempotente (re-run friendly).
+#
+# Usage : attach-release-assets.sh <tag> <release-name> <fichier...>
+# Env   : RELEASE_TOKEN (token Gitea avec write:repository), GITHUB_SERVER_URL, GITHUB_REPOSITORY.
+#
+# Partagé par tous les jobs de release desktop (Linux, Windows, canal flottant) : la logique était
+# dupliquée dans chaque job, et toute correction devait être faite trois fois.
+set -uo pipefail
+
+tag="${1:?tag manquant}"
+release_name="${2:?nom de release manquant}"
+shift 2
+
+# Token ABSENT : cas légitime (fork, run sans secret) → on sort proprement.
+# Token PRÉSENT mais refusé par l'API : anomalie, on doit ÉCHOUER. Sinon le job reste vert alors
+# qu'aucun asset n'est attaché et qu'aucune release n'est créée, ce qui s'est produit avec un token
+# expiré : trois workflows « réussis » et zéro fichier publié.
+if [ -z "${RELEASE_TOKEN:-}" ]; then
+  echo "::notice::RELEASE_TOKEN absent, aucun asset attaché (les artefacts du run restent disponibles)."
+  exit 0
+fi
+
+api="${GITHUB_SERVER_URL}/api/v1/repos/${GITHUB_REPOSITORY}"
+auth="Authorization: token ${RELEASE_TOKEN}"
+
+release_id=$(curl -fsSL -H "$auth" "${api}/releases/tags/${tag}" \
+  | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''" || true)
+
+if [ -z "$release_id" ]; then
+  release_id=$(curl -fsSL -X POST -H "$auth" -H 'Content-Type: application/json' \
+    -d "{\"tag_name\":\"${tag}\",\"name\":\"${release_name}\"}" \
+    "${api}/releases" | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''")
+fi
+
+if [ -z "$release_id" ]; then
+  echo "::error::impossible de résoudre ou créer la release ${tag} avec le token fourni."
+  echo "::error::vérifier que le secret porte les portées write:repository et write:package, et qu'il n'a pas expiré."
+  exit 1
+fi
+
+for f in "$@"; do
+  [ -f "$f" ] || continue
+  name=$(basename "$f")
+  # L'API Gitea refuse un asset de même nom : on supprime l'ancien pour que le dernier build gagne.
+  existing=$(curl -fsSL -H "$auth" "${api}/releases/${release_id}/assets" \
+    | node -e "const a=JSON.parse(require('fs').readFileSync(0,'utf8'));const m=Array.isArray(a)?a.find(x=>x.name===process.argv[1]):null;process.stdout.write(m?String(m.id):'')" "$name" || true)
+  if [ -n "$existing" ]; then
+    echo "replacing existing $name (asset $existing)"
+    curl -fsSL -X DELETE -H "$auth" "${api}/releases/${release_id}/assets/${existing}" || true
+  fi
+  echo "attaching $name"
+  if ! curl -fsSL -X POST -H "$auth" -F "attachment=@${f}" "${api}/releases/${release_id}/assets?name=${name}"; then
+    echo "::error::échec de l'upload de ${name}"
+    failed=1
+  fi
+done
+
+if [ "${failed:-0}" != "0" ]; then
+  echo "::error::au moins un asset n'a pas pu être attaché à ${tag}."
+  exit 1
+fi
+
+echo "Assets attachés à la release ${tag}."

.gitea/workflows/ci.yml

@@ -29,6 +29,17 @@ jobs:
       - run: npm run build
       - run: npm run build:site
       - run: npx vitest run
+      # packages/desktop est HORS des workspaces (CI daemon allégée) : sans cette étape, son code
+      # n'était JAMAIS typechecké avant un tag de release. Une seule version de Node suffit, et
+      # ELECTRON_SKIP_BINARY_DOWNLOAD évite de télécharger ~100 Mo de binaire Electron dont un
+      # typecheck n'a aucun besoin (c'est ce qui rendait le job très long).
+      - name: Typecheck desktop shell
+        if: matrix.node == '22'
+        env:
+          ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
+        run: |
+          npm --prefix packages/desktop ci
+          npm run typecheck:desktop
 
   pack-smoke:
     name: Pack & boot smoke (Node 22)
@@ -57,9 +68,11 @@ jobs:
           rm -rf /tmp/inspect && mkdir -p /tmp/inspect && tar -xzf "$tgz" -C /tmp/inspect
           test -f /tmp/inspect/package/dist/_shared/index.js \
             || { echo "ERREUR: dist/_shared/index.js absent de $tgz : inline-shared n'a pas tourné ?"; exit 1; }
-          if grep -rq '@arboretum/shared' /tmp/inspect/package/dist; then
+          # On cherche les vraies formes d'IMPORT, pas la simple chaîne : un commentaire de code qui
+          # mentionne le paquet (pour dire où vit la règle partagée) est légitime et ne casse rien.
+          if grep -rqE "(from|require\(|import\()[[:space:]]*['\"]@arboretum/shared" /tmp/inspect/package/dist; then
             echo "ERREUR: import bare '@arboretum/shared' encore présent dans le JS publié"
-            grep -rn '@arboretum/shared' /tmp/inspect/package/dist; exit 1
+            grep -rnE "(from|require\(|import\()[[:space:]]*['\"]@arboretum/shared" /tmp/inspect/package/dist; exit 1
           fi
           echo "OK: paquet autonome : shared inliné dans dist/_shared, aucun import externe"
       - name: Install tarball in an empty project
@@ -86,15 +99,16 @@ jobs:
   lint-dashes:
     # Interdit tout tiret cadratin (U+2014) ou demi-cadratin (U+2013) dans les fichiers suivis.
     # Utiliser a la place : point median, deux-points, virgule, ou tiret simple pour les plages.
-    # Exclusions : logo binaire + captures brutes du terminal (fidelite des fixtures de dialogue).
+    # `-I` ignore les fichiers BINAIRES : une icone PNG/ICO peut contenir ces octets par hasard, ce
+    # qui faisait echouer la garde sans aucun texte fautif. Exclusion restante : les captures brutes
+    # du terminal (fichiers texte, fidelite des fixtures de dialogue).
     name: No em/en dashes
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - name: Fail on U+2014 / U+2013 (outside allow-list)
         run: |
-          if git grep -nP '[\x{2014}\x{2013}]' -- . \
+          if git grep -nPI '[\x{2014}\x{2013}]' -- . \
-               ':(exclude)brand/arboretum-logo-source.png' \
                ':(exclude)packages/server/test/fixtures/dialogs/*.raw'; then
             echo "::error::Tiret cadratin/demi-cadratin trouve. Utiliser point median, deux-points, virgule ou tiret simple (plages)."
             exit 1

.gitea/workflows/desktop-release.yml

@@ -1,12 +1,23 @@
-# Packaging de l'app de bureau Electron, déclenché UNIQUEMENT par un tag desktop-vX.Y.Z (séparé de
+# Packaging de l'app de bureau Electron, déclenché par un tag desktop-vX.Y.Z (séparé de la release du
-# la release du daemon qui écoute v*, et du VSIX qui écoute vscode-v*). Linux (AppImage + deb) est
+# daemon qui écoute v*, et du VSIX qui écoute vscode-v*).
-# automatisé ici ; Windows et macOS se buildent sur ces OS (voir packages/desktop/README.md) et
+#
-# leurs artefacts sont attachés manuellement à la release.
+# Linux (AppImage + deb) : toujours automatisé.
+# Windows (NSIS + portable) : job dédié, ACTIVÉ par la variable de dépôt ENABLE_WINDOWS_BUILD=true une
+#   fois qu'un runner labellisé `windows-latest` est enregistré sur le forge. Procédure complète dans
+#   docs/CI_RUNNERS.md. Tant que la variable est absente, le job est sauté et la release Linux part
+#   normalement ; le repli reste un build manuel attaché à la release.
+#   Le cross-build depuis Linux est IMPOSSIBLE : node-pty ne copie conpty.dll / OpenConsole.exe que si
+#   l'hôte de build est Windows, et son tarball ne contient que les prebuilds linux.
+# macOS (dmg + zip) : non automatisé (aucun runner) ; build manuel documenté dans le README desktop.
+#
+# `workflow_dispatch` permet de tester les jobs sans créer de tag (le garde-fou tag == version est
+# alors ignoré, puisqu'il n'y a pas de tag à comparer).
 name: Desktop Release
 
 on:
   push:
     tags: ['desktop-v*']
+  workflow_dispatch:
 
 permissions:
   contents: write
@@ -26,6 +37,7 @@ jobs:
           cache: npm
       # Garde-fou : le tag (sans "desktop-v") doit correspondre à la version du paquet desktop.
       - name: Verify tag matches desktop version
+        if: github.event_name == 'push'
         run: |
           pkg=$(node -p "require('./packages/desktop/package.json').version")
           tag="${GITHUB_REF_NAME#desktop-v}"
@@ -41,6 +53,11 @@ jobs:
       # Build complet : shell + daemon empaqueté + Node standalone + AppImage/deb (electron-builder).
       - name: Build installers
         run: cd packages/desktop && npm run dist:linux
+      - name: Compute checksums
+        run: |
+          cd packages/desktop/release
+          sha256sum *.AppImage *.deb > SHA256SUMS-linux.txt
+          cat SHA256SUMS-linux.txt
       # Artefacts du run : canal fiable, indépendant de l'API release.
       - uses: actions/upload-artifact@v3
         with:
@@ -48,40 +65,135 @@ jobs:
           path: |
             packages/desktop/release/*.AppImage
             packages/desktop/release/*.deb
+            packages/desktop/release/*.blockmap
             packages/desktop/release/latest-linux.yml
-      # Best-effort : attache les installeurs (+ latest-linux.yml pour l'auto-update) à la release
+            packages/desktop/release/SHA256SUMS-linux.txt
-      # Gitea du tag (crée la release si absente). Réutilise NPM_TOKEN (même token Gitea) : ce token
+      # Attache les installeurs (+ latest-linux.yml pour l'auto-update) à la release du tag. Réutilise
-      # doit porter la portée write:repository en plus de write:package, sinon l'API release renvoie
+      # NPM_TOKEN (même token Gitea) : il doit porter write:repository en plus de write:package, sinon
-      # un 403 (l'attache est ignorée, les installeurs restent disponibles en artefact du run).
+      # l'API release renvoie 403. Pas de continue-on-error : les artefacts du run sont déjà uploadés à
-      - name: Attach installers to Gitea release
+      # l'étape précédente, donc un échec ici ne perd rien et doit être VU (avec un token expiré, la
+      # release ressortait verte et vide).
+      - name: Attach installers to the tag release
+        if: github.event_name == 'push'
+        env:
+          RELEASE_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          version=$(node -p "require('./packages/desktop/package.json').version")
+          bash .gitea/scripts/attach-release-assets.sh "${GITHUB_REF_NAME}" "Arboretum Desktop ${version}" \
+            packages/desktop/release/*.AppImage \
+            packages/desktop/release/*.deb \
+            packages/desktop/release/*.blockmap \
+            packages/desktop/release/latest-linux.yml \
+            packages/desktop/release/SHA256SUMS-linux.txt
+
+  windows:
+    name: Build Windows (NSIS + portable)
+    # Activé par la variable de dépôt ENABLE_WINDOWS_BUILD (voir docs/CI_RUNNERS.md). Sans runner
+    # Windows enregistré, un job non conditionné resterait en attente indéfiniment et bloquerait la
+    # release entière.
+    if: vars.ENABLE_WINDOWS_BUILD == 'true'
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Verify tag matches desktop version
+        if: github.event_name == 'push'
+        shell: bash
+        run: |
+          pkg=$(node -p "require('./packages/desktop/package.json').version")
+          tag="${GITHUB_REF_NAME#desktop-v}"
+          if [ "$pkg" != "$tag" ]; then
+            echo "ERREUR: tag '$tag' != version desktop '$pkg'"
+            exit 1
+          fi
+          echo "OK: tag $tag == version $pkg"
+      - run: npm ci
+      - name: Install desktop deps
+        shell: bash
+        run: cd packages/desktop && npm ci
+      # `dist:win` sur hôte Windows : c'est le SEUL chemin qui produit un node-pty utilisable (ConPTY,
+      # conpty.dll + OpenConsole.exe copiés par le post-install de node-pty).
+      - name: Build installers
+        shell: bash
+        run: cd packages/desktop && npm run dist:win
+      - name: Compute checksums
+        shell: bash
+        run: |
+          cd packages/desktop/release
+          sha256sum *.exe > SHA256SUMS-windows.txt
+          cat SHA256SUMS-windows.txt
+      - uses: actions/upload-artifact@v3
+        with:
+          name: desktop-windows
+          path: |
+            packages/desktop/release/*.exe
+            packages/desktop/release/*.blockmap
+            packages/desktop/release/latest.yml
+            packages/desktop/release/SHA256SUMS-windows.txt
+      # Pas de continue-on-error : cf. la note du job Linux.
+      - name: Attach installers to the tag release
+        if: github.event_name == 'push'
+        shell: bash
+        env:
+          RELEASE_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          version=$(node -p "require('./packages/desktop/package.json').version")
+          bash .gitea/scripts/attach-release-assets.sh "${GITHUB_REF_NAME}" "Arboretum Desktop ${version}" \
+            packages/desktop/release/*.exe \
+            packages/desktop/release/*.blockmap \
+            packages/desktop/release/latest.yml \
+            packages/desktop/release/SHA256SUMS-windows.txt
+
+  # Canal d'auto-update : electron-updater interroge une URL FIXE
+  # (.../releases/download/desktop-latest, cf. electron-builder.yml). Ce tag flottant doit donc exister
+  # et porter les latest*.yml de la dernière version, sinon l'updater reçoit un 404 · c'était le cas
+  # jusqu'en 0.1.3, où l'auto-update annoncé ne fonctionnait pour personne.
+  latest-channel:
+    name: Publish floating desktop-latest release
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+    needs: [linux]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - uses: actions/download-artifact@v3
+        with:
+          name: desktop-linux
+          path: dl
+      # Les artefacts Windows n'existent que si le job correspondant a tourné : téléchargement toléré
+      # en échec pour ne jamais bloquer la publication du canal Linux.
+      - uses: actions/download-artifact@v3
         continue-on-error: true
+        with:
+          name: desktop-windows
+          path: dl
+      # On repart d'une release flottante VIERGE : sinon les assets de la version précédente y
+      # restent (mêmes noms de fichiers uniquement remplacés, un ancien numéro de version subsisterait).
+      # La recréation est faite par le script suivant, via l'API (Gitea crée le tag au besoin).
+      - name: Reset the floating release
         env:
           RELEASE_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
           if [ -z "$RELEASE_TOKEN" ]; then
-            echo "::notice::NPM_TOKEN absent : installeurs disponibles en artefact uniquement."
+            echo "::notice::NPM_TOKEN absent, canal desktop-latest non publié."
             exit 0
           fi
           api="${GITHUB_SERVER_URL}/api/v1/repos/${GITHUB_REPOSITORY}"
           auth="Authorization: token ${RELEASE_TOKEN}"
+          old=$(curl -fsSL -H "$auth" "${api}/releases/tags/desktop-latest" | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''" || true)
+          if [ -n "$old" ]; then
+            echo "suppression de l'ancienne release flottante (id ${old})"
+            curl -fsSL -X DELETE -H "$auth" "${api}/releases/${old}" || true
+          fi
+          curl -fsSL -X DELETE -H "$auth" "${api}/tags/desktop-latest" || true
+      - name: Attach installers to the floating release
+        env:
+          RELEASE_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
           version=$(node -p "require('./packages/desktop/package.json').version")
-          rid=$(curl -fsSL -H "$auth" "${api}/releases/tags/${GITHUB_REF_NAME}" | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''" || true)
+          bash .gitea/scripts/attach-release-assets.sh desktop-latest "Arboretum Desktop (latest, ${version})" \
-          if [ -z "$rid" ]; then
+            dl/*.AppImage dl/*.deb dl/*.exe dl/*.blockmap dl/latest-linux.yml dl/latest.yml dl/SHA256SUMS-*.txt
-            rid=$(curl -fsSL -X POST -H "$auth" -H 'Content-Type: application/json' \
-              -d "{\"tag_name\":\"${GITHUB_REF_NAME}\",\"name\":\"Arboretum Desktop ${version}\"}" \
-              "${api}/releases" | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''")
-          fi
-          for f in packages/desktop/release/*.AppImage packages/desktop/release/*.deb packages/desktop/release/latest-linux.yml; do
-            [ -f "$f" ] || continue
-            name=$(basename "$f")
-            # Re-run idempotent : supprimer un asset existant du même nom avant de ré-uploader, pour
-            # que le dernier build gagne (l'API Gitea refuse sinon un asset déjà présent).
-            existing=$(curl -fsSL -H "$auth" "${api}/releases/${rid}/assets" | node -e "const a=JSON.parse(require('fs').readFileSync(0,'utf8'));const m=Array.isArray(a)?a.find(x=>x.name===process.argv[1]):null;process.stdout.write(m?String(m.id):'')" "$name" || true)
-            if [ -n "$existing" ]; then
-              echo "replacing existing $name (asset $existing)"
-              curl -fsSL -X DELETE -H "$auth" "${api}/releases/${rid}/assets/${existing}" || true
-            fi
-            echo "attaching $name"
-            curl -fsSL -X POST -H "$auth" -F "attachment=@${f}" "${api}/releases/${rid}/assets?name=${name}"
-          done
-          echo "Installeurs Linux attachés à la release ${GITHUB_REF_NAME}."

.gitea/workflows/vscode-release.yml

@@ -45,31 +45,15 @@ jobs:
         with:
           name: vsix
           path: packages/vscode/*.vsix
-      # Best-effort : attache le VSIX à la release Gitea du tag (crée la release si absente).
+      # Attache le VSIX à la release Gitea du tag (créée si absente), via le script partagé avec la
-      # Réutilise le secret NPM_TOKEN (même token Gitea que la publication du daemon) : ce token doit
+      # release desktop : la logique était dupliquée, avec le même angle mort. Réutilise le secret
-      # porter write:repository en plus de write:package, sinon l'API release renvoie un 403. Sans
+      # NPM_TOKEN (même token Gitea que la publication du daemon), qui doit porter write:repository en
-      # token, l'étape est ignorée sans faire échouer le job (continue-on-error) ; le VSIX reste
+      # plus de write:package. Sans token du tout, le script sort proprement ; avec un token REFUSÉ, il
-      # disponible en artefact.
+      # échoue, pour que l'anomalie soit visible (le VSIX reste dans les artefacts du run).
       - name: Attach VSIX to Gitea release
-        continue-on-error: true
         env:
           RELEASE_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          if [ -z "$RELEASE_TOKEN" ]; then
-            echo "::notice::NPM_TOKEN absent : VSIX disponible en artefact uniquement."
-            exit 0
-          fi
-          api="${GITHUB_SERVER_URL}/api/v1/repos/${GITHUB_REPOSITORY}"
-          auth="Authorization: token ${RELEASE_TOKEN}"
           version=$(node -p "require('./packages/vscode/package.json').version")
-          vsix="packages/vscode/git-arboretum-${version}.vsix"
+          bash .gitea/scripts/attach-release-assets.sh "${GITHUB_REF_NAME}" "Arboretum VSCode ${version}" \
-          # id de release du tag, sinon création
+            "packages/vscode/git-arboretum-${version}.vsix"
-          rid=$(curl -fsSL -H "$auth" "${api}/releases/tags/${GITHUB_REF_NAME}" | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''" || true)
-          if [ -z "$rid" ]; then
-            rid=$(curl -fsSL -X POST -H "$auth" -H 'Content-Type: application/json' \
-              -d "{\"tag_name\":\"${GITHUB_REF_NAME}\",\"name\":\"Arboretum VSCode ${version}\"}" \
-              "${api}/releases" | node -p "JSON.parse(require('fs').readFileSync(0,'utf8')).id || ''")
-          fi
-          curl -fsSL -X POST -H "$auth" -F "attachment=@${vsix}" \
-            "${api}/releases/${rid}/assets?name=git-arboretum-${version}.vsix"
-          echo "VSIX attaché à la release ${GITHUB_REF_NAME}."

README.fr.md

@@ -10,12 +10,28 @@
   <a href="README.md">English</a> · <strong>Français</strong>
 </p>
 
-**Statut : MVP.** Le dashboard worktree-first, la découverte et la reprise de sessions, le cycle de vie des worktrees multi-repo, le démarrage de sessions sur votre branche principale ou n'importe quel worktree, les états de session en temps réel, le terminal web, la supervision mobile (PWA installable, Web Push quand une session vous attend, répondre à une demande sans ouvrir de terminal) et les groupes de travail (piloter plusieurs repos liés depuis une seule session Claude) sont implémentés et testés.
+La découverte et la reprise de sessions, le cycle de vie des worktrees multi-repo, le démarrage de sessions sur votre branche principale ou n'importe quel worktree, les états de session en temps réel, le terminal web, la supervision mobile (PWA installable, Web Push quand une session vous attend, répondre à une demande sans ouvrir de terminal) et les groupes de travail (piloter plusieurs repos liés depuis une seule session Claude) sont tous implémentés et testés.
 
 La dernière étape transforme Arboretum en véritable **IDE IA multi-projet** : un espace de travail unique (route `/ide`, la vue par défaut sur desktop) qui réunit **tous** vos projets ouverts à la fois, fini l'IDE par projet. Un arbre unique à gauche (projet, puis checkout principal et worktrees, puis session Claude), un éditeur Monaco à onglets au centre (plusieurs fichiers de projets différents côte à côte, diffs inline), les terminaux Claude en dock bas, et des panneaux Git / Sessions / Groupes via une barre d'activité. Il est fourni à la fois en **app de bureau native** (Linux, Windows, macOS) et en interface web, adossé à un watcher de système de fichiers en temps réel, au staging sélectif / discard / amend / fetch / pull, à l'archivage automatique des sessions, à la synchronisation des réglages en temps réel, et à des services git distants chiffrés (GitHub / GitLab / Gitea) avec clone HTTPS.
 
 ---
 
+## Captures d'écran
+
+<p align="center">
+  <img src="brand/screenshot-ide-dark.png" alt="Arboretum, l'IDE IA multi-projet (thème sombre)" width="900">
+</p>
+
+<p align="center">
+  <em>Un espace de travail pour tous les projets : arbre unifié, éditeur Monaco à onglets avec diffs inline, terminaux Claude en dock. Thèmes sombre et clair.</em>
+</p>
+
+<p align="center">
+  <img src="brand/screenshot-ide-light.png" alt="Arboretum, l'IDE IA multi-projet (thème clair)" width="900">
+</p>
+
+---
+
 ## Le problème
 
 Travailler avec des agents de code IA a changé notre usage de git : une feature = un worktree = une session Claude Code, plusieurs en parallèle. Mais l'outillage n'a pas suivi :
@@ -28,11 +44,12 @@ Travailler avec des agents de code IA a changé notre usage de git : une feature
 
 Un unique daemon Node.js que vous lancez sur votre machine de dev (en app de bureau native, ou via `npx @johanleroy/git-arboretum`), servant une interface utilisable depuis votre ordinateur, téléphone ou tablette :
 
-- **Dashboard worktree-first, multi-repo** : chaque worktree de chaque repo enregistré, avec son état git (branche, ahead/behind, fichiers modifiés) *et* l'état de sa session Claude Code (busy / en attente d'entrée / idle / reprenable).
+- **Dashboard worktree multi-repo** : chaque worktree de chaque repo enregistré, avec son état git (branche, ahead/behind, fichiers modifiés) *et* l'état de sa session Claude Code (busy / en attente d'entrée / idle / reprenable).
 - **Cycle de vie complet des worktrees** : créer (avec des hooks post-création par repo : `npm ci`, copie de `.env`…), adopter des worktrees créés à la main, supprimer avec garde-fous, élaguer les orphelins.
 - **Découverte & reprise de sessions** : les sessions lancées dans votre propre terminal apparaissent automatiquement ; reprenez les sessions mortes, observez ou forkez les vivantes. Ne corrompt jamais une session vivante. Masquez les anciennes qui encombrent la liste (un clic efface tout l'historique externe ; elles restent reprenables).
 - **Terminal web** : terminal xterm.js complet vers chaque session managée, qui survit aux déconnexions du navigateur ; vraiment plein écran, avec l'invite ancrée en bas et tout l'historique défilable au-dessus.
 - **IDE multi-projet** : un espace de travail pour tous les projets ouverts à la fois (pas de fenêtre par projet). Un arbre unique (projet, worktrees, sessions Claude), un éditeur Monaco à onglets (plusieurs fichiers de projets différents côte à côte, avec diffs inline par fichier), un dock bas de terminaux de session, et des panneaux Git / Sessions / Groupes. Éditez les fichiers, indexez les changements sélectivement, committez (ou amendez), fetch/pull et push, au même endroit. Un watcher de système de fichiers en temps réel garde la vue à jour au fil des éditions de l'agent. Disponible en app de bureau native et dans le navigateur.
+- **Démarrez un projet en un clic** : beaucoup de projets exigent plusieurs commandes longue durée pour démarrer (serveur de dev, API, base de données). Définissez-les une fois par projet (libellés, commandes shell, sous-dossier optionnel), auto-détectées depuis les scripts `package.json`, un `Procfile` ou `docker-compose`, puis lancez-les toutes d'un coup, un terminal attaché par commande. Chacune tourne dans votre shell de login (donc `npm`, `docker`, nvm/asdf sont dans le `PATH`) et reste vivante après la fin de la commande, pour que les échecs restent à l'écran ; arrêtez tout le lot en une action.
 - **Supervision depuis votre téléphone** : PWA installable avec notifications push quand une session vous attend ; répondez à une demande (ses options, ou refusez) sans ouvrir de terminal.
 - **Groupes de travail** : regroupez des repos liés (ex. une API, son frontend web et sa doc) dans un groupe nommé, puis lancez **une seule session Claude qui les couvre tous à la fois** (via le flag `--add-dir` du CLI) : une conversation unique avec un contexte partagé travaillant à travers chaque repo, plus une vue unifiée de tous leurs worktrees et une grille multi-terminaux côte à côte. Une session de groupe peut d'abord créer le même worktree de branche dans chaque repo, ou tourner directement sur les checkouts principaux.
 - **Services git distants** : connectez vos comptes GitHub, GitLab ou Gitea (personal access token ou app password), stockés **chiffrés au repos** (AES-256-GCM) ; parcourez vos dépôts distants et clonez-les en HTTPS avec progression en direct, directement depuis le dashboard.
@@ -112,6 +129,19 @@ Vous préférez une app native au daemon-dans-un-terminal ? Arboretum fournit un
 
 L'app de bureau n'est qu'une coquille autour du même daemon et de la même interface web : tout ce qui suit (espace de travail, git, sessions) fonctionne à l'identique.
 
+### Installer selon la plateforme
+
+| Plateforme | Artefact | Notes |
+|---|---|---|
+| **Debian / Ubuntu** | `Arboretum-<version>-amd64.deb` | `sudo apt install ./Arboretum-*.deb`. Installe la dépendance `git`. À préférer à l'AppImage sous Debian : il pose l'entrée de lanceur et ses icônes. |
+| **Autres Linux** | `Arboretum-<version>-x86_64.AppImage` | `chmod +x` puis lancer. Aucune entrée de menu sans un outil d'intégration comme `appimaged`. |
+| **Windows** | `Arboretum-<version>-x64.exe` (NSIS) ou le build portable | Non signé : SmartScreen affiche « éditeur inconnu », choisissez **Informations complémentaires → Exécuter quand même**. Nécessite Windows 10 1809+ (ConPTY). |
+| **macOS** | `Arboretum-<version>.dmg` | Ni signé ni notarisé : clic droit sur l'app → **Ouvrir**, ou `xattr -dr com.apple.quarantine /Applications/Arboretum.app`. Buildé à la demande, voir `packages/desktop/README.md`. |
+
+Sous Windows aussi, le CLI `claude` doit être dans votre PATH ; si l'app ne le trouve pas, renseignez son
+chemin dans **Réglages → CLI Claude**. Le lancement du daemon à l'ouverture de session y est également
+géré (`arboretum install` enregistre une tâche planifiée).
+
 ## Utiliser Arboretum
 
 1. **Ajoutez un dépôt.** Depuis le dashboard, enregistrez un repo git local par son chemin. Configurez éventuellement des **hooks post-création** (ex. `npm ci`, `cp ../.env .env`) exécutés automatiquement à chaque création d'un nouveau worktree pour ce repo.
@@ -129,6 +159,7 @@ Au-delà de la supervision, Arboretum est un véritable **IDE multi-projet** (ro
 - **Dock de terminaux.** Les terminaux de session Claude vivent dans un dock bas, un onglet par session ; ouvrez-en plusieurs à la fois (à travers les projets), répondez à une demande en attente directement là. Les terminaux survivent aux changements d'onglet et aux déconnexions du navigateur.
 - **Panneau Git.** Indexez ou désindexez des fichiers individuels, jetez des changements, écrivez un message et **committez** (tout ou seulement l'indexé), **amendez** le dernier commit (refusé une fois poussé), puis **fetch**, **pull** (fast-forward ou rebase) et **push**. Les compteurs indexés / non indexés / conflits détaillés et le dernier commit restent à jour via un **watcher de système de fichiers en temps réel** : la vue s'actualise dès qu'une session Claude touche un fichier.
 - **Deep links & mobile.** `/workspace/:repoId/:wt` ouvre toujours un worktree précis directement dans l'IDE (utilisé par l'extension VS Code). Sur mobile, l'IDE dégrade en panneau unique, et le dashboard des worktrees et les vues de session restent la PWA de supervision installable.
+- **Clair ou sombre, au choix.** Un langage visuel épuré et cohérent (le design system « Emerald » : Inter + JetBrains Mono, un accent emerald) avec une bascule de thème **clair / sombre / système** mémorisée d'une session à l'autre. L'éditeur Monaco, les terminaux et les diffs suivent tous le thème actif.
 
 Comme toute action git dans Arboretum, ces opérations s'exécutent **en tant que vous** (le daemon tourne sous votre compte), cohérent avec le modèle de sécurité : un terminal web, c'est de l'exécution de code à distance par conception.
 
@@ -146,10 +177,10 @@ Elle est distribuée en **VSIX privé**. Buildez-la et packagez-la depuis le mon
 
 ```bash
 npm run build:vscode
-cd packages/vscode && npx @vscode/vsce package --no-dependencies   # → git-arboretum-0.2.0.vsix
+cd packages/vscode && npx @vscode/vsce package --no-dependencies   # → git-arboretum-<version>.vsix
 ```
 
-Puis installez-la via **Extensions : Installer à partir d'un VSIX…** (ou `code --install-extension git-arboretum-0.2.0.vsix`), lancez **Arboretum: Sign In** et collez un token. Détails complets dans [`packages/vscode/README.md`](packages/vscode/README.md).
+Puis installez-la via **Extensions : Installer à partir d'un VSIX…** (ou `code --install-extension git-arboretum-<version>.vsix`), lancez **Arboretum: Sign In** et collez un token. Détails complets dans [`packages/vscode/README.md`](packages/vscode/README.md).
 
 ## Accès distant depuis votre téléphone
 
@@ -170,6 +201,47 @@ Ouvrez `https://<machine>.<tailnet>.ts.net` depuis n'importe quel appareil de vo
 
 > ⚠️ Un terminal web, c'est de l'exécution de code à distance **par conception**. N'exposez jamais Arboretum directement sur l'internet public.
 
+### Mode serveur web (réseau local, reverse proxy)
+
+Quel que soit le front que vous mettez devant, retenez la règle qui piège tout le monde en premier : **le
+daemon rejette toute requête dont il ne connaît pas l'`Origin`**, avec un `403 BAD_ORIGIN`. L'adresse que
+vous tapez dans le navigateur doit être passée en `--allow-origin` (répétable). Réglages → **Accès
+distant** affiche l'origine courante, la liste autorisée, et la commande exacte pour en ajouter une.
+
+**Derrière un reverse proxy** (nginx, Caddy, Traefik), avec terminaison TLS sur votre domaine :
+
+```nginx
+# nginx : l'upgrade WebSocket ET X-Forwarded-Proto sont nécessaires
+location / {
+  proxy_pass http://127.0.0.1:7317;
+  proxy_http_version 1.1;
+  proxy_set_header Upgrade $http_upgrade;
+  proxy_set_header Connection "upgrade";
+  proxy_set_header Host $host;
+  proxy_set_header X-Forwarded-Proto $scheme;   # rend le cookie de session Secure
+  proxy_read_timeout 3600s;                     # terminaux longue durée
+}
+```
+
+```bash
+npx @johanleroy/git-arboretum --allow-origin https://arboretum.exemple.com
+```
+
+C'est `X-Forwarded-Proto: https` qui indique à Arboretum de marquer son cookie de session `Secure` ; sans
+cet en-tête, le cookie reste non-Secure derrière votre front HTTPS. Gardez un timeout de lecture large :
+un WebSocket de terminal reste inactif de longs moments.
+
+**Sur le réseau local, sans proxy** (le moins recommandé : HTTP simple, pas de Web Push, pas d'install PWA) :
+
+```bash
+npx @johanleroy/git-arboretum \
+  --bind 0.0.0.0 --i-know-this-exposes-a-terminal \
+  --allow-origin http://192.168.1.42:7317
+```
+
+Le flag d'acquittement est obligatoire et n'est jamais ajouté pour vous : sortir de la boucle locale doit
+être un acte délibéré. Restreignez l'accès au niveau réseau (pare-feu, VPN) et préférez Tailscale.
+
 ## Le faire tourner en service d'arrière-plan
 
 Le plus rapide pour faire tourner Arboretum en service qui survit à la déconnexion et redémarre au boot, c'est l'installeur intégré. Installez une version figée globalement, puis lancez `install`. Il détecte votre OS, écrit le fichier de service, le démarre et affiche le token unique :
@@ -179,7 +251,7 @@ npm i -g @johanleroy/git-arboretum
 arboretum install --allow-origin https://MACHINE.TAILNET.ts.net
 ```
 
-Cela met en place un **service systemd utilisateur** sous Linux (`~/.config/systemd/user/arboretum.service`) ou un **LaunchAgent launchd** sous macOS (`~/Library/LaunchAgents/fr.lidge.arboretum.plist`). Tous les flags du daemon (`--port`, `--allow-origin`, `--db`, …) sont propagés au service. Gérez-le avec :
+Cela met en place un **service systemd utilisateur** sous Linux (`~/.config/systemd/user/arboretum.service`), un **LaunchAgent launchd** sous macOS (`~/Library/LaunchAgents/fr.lidge.arboretum.plist`), ou une **tâche planifiée** sous Windows (`Arboretum`, déclenchée à l'ouverture de session, enregistrée par `schtasks`). Toujours sous votre compte utilisateur, jamais en root ni SYSTEM. Tous les flags du daemon (`--port`, `--allow-origin`, `--db`, …) sont propagés au service. Gérez-le avec :
 
 ```bash
 arboretum status      # état du service (+ où lire les logs)
@@ -235,7 +307,9 @@ Les options du daemon sont des flags CLI :
 | `--allow-origin <url>` | aucun | Origine `Origin` autorisée supplémentaire (répétable). Nécessaire pour l'accès Tailscale/HTTPS. |
 | `--db <path>` | `<data>/arboretum.db` | Chemin de la base SQLite. |
 | `--vapid-contact <mailto/url>` | `mailto:arboretum@localhost` | Sujet de contact VAPID pour le Web Push. |
-| `--print-token` | `false` | Indication sur le réaffichage du token (les tokens sont hashés et ne peuvent pas être réaffichés). |
+| `--print-token` | `false` | Affiche le jeton d'accès au démarrage (et le crée si la base n'en a aucun). |
+| `--claude-home <chemin>` | `~/.claude` | Surcharge la racine d'installation de Claude (registre de sessions et transcripts). |
+| `--no-discover` | `false` | Désactive la découverte auto des dépôts (scan au démarrage et re-scan périodique). |
 | `--i-know-this-exposes-a-terminal` | `false` | Reconnaître le bind sur une adresse non-loopback. **À éviter** : préférez Tailscale Serve. |
 
 `arboretum install` accepte tous les flags du daemon ci-dessus (propagés tels quels au service), plus :
@@ -247,7 +321,18 @@ Les options du daemon sont des flags CLI :
 | `--dry-run` | Affiche le unit/plist et les commandes sans rien appliquer. |
 | `--no-enable` | Écrit le fichier de service sans l'activer/le démarrer. |
 
-L'état (la base SQLite) vit dans `$XDG_DATA_HOME/arboretum` (par défaut `~/.local/share/arboretum`).
+L'état (la base SQLite) vit dans `$XDG_DATA_HOME/arboretum`, avec pour défaut
+`~/.local/share/arboretum` sous Linux et macOS, et `%APPDATA%\arboretum` sous Windows.
+
+Variables d'environnement :
+
+| Variable | Utilisée par | Description |
+|---|---|---|
+| `ARBORETUM_LOG` | daemon | Niveau de log (`fatal`, `error`, `warn`, `info`, `debug`, `trace`). Défaut `info`. |
+| `ARBORETUM_SECRET_KEY` | daemon | Clé de 32 octets (base64 ou hex) chiffrant les identifiants git stockés. Générée et conservée en base si absente. |
+| `ARBORETUM_EMIT_TOKEN_FD` | daemon | Écrit le jeton d'accès sur ce descripteur de fichier au démarrage. Utilisé par l'app de bureau pour s'auto-connecter ; pas destiné à un usage manuel. |
+| `XDG_DATA_HOME` | daemon | Racine du répertoire de données (voir ci-dessus). |
+| `ARBORETUM_SHELL` | daemon (Windows) | Shell utilisé pour les commandes de projet. Défaut `powershell.exe`. |
 
 Les réglages au-delà des flags CLI (les répertoires qu'Arboretum scanne pour trouver des repos et à quelle fréquence, le chemin et le home du binaire `claude`, et les fenêtres de rétention / purge des sessions) vivent dans les **Réglages** de l'UI. Ils sont diffusés via le WebSocket, donc chaque navigateur connecté reflète un changement en temps réel, sans rechargement.
 
@@ -273,6 +358,19 @@ Tailscale Serve est **la** façon d'atteindre Arboretum depuis d'autres appareil
 
 Voir [`SECURITY.md`](SECURITY.md) pour le modèle de menace complet et [`docs/ENTERPRISE_DEPLOYMENT.md`](docs/ENTERPRISE_DEPLOYMENT.md) pour le durcissement en environnement réglementé.
 
+## Dépannage
+
+| Symptôme | Cause & correction |
+|---|---|
+| `npm error 404 Not Found @johanleroy/git-arboretum` | Le paquet vit sur un registre privé. Déclarez le scope dans votre `~/.npmrc` : `@johanleroy:registry=https://git.lidge.fr/api/packages/johanleroy/npm/` |
+| `403 BAD_ORIGIN` dans la console, interface blanche | L'adresse utilisée n'est pas dans la liste autorisée. Redémarrez avec `--allow-origin <cette origine exacte>` (schéma, hôte et port doivent correspondre). |
+| `ERR_UNKNOWN_BUILTIN_MODULE node:sqlite` ou plantage au démarrage | Node est antérieur à 22.16. Vérifiez avec `node --version` : `node:sqlite` n'est stable qu'à partir de là. L'app de bureau embarque son runtime et n'est pas concernée. |
+| « Claude Code CLI not found in PATH » | Le daemon tourne avec un PATH minimal (cas typique sous systemd/launchd). Renseignez le chemin du binaire dans **Réglages → CLI Claude**, ou réinstallez le service avec `arboretum install`, qui fige votre PATH interactif. |
+| Impossible d'activer les notifications | Le Web Push exige HTTPS. Utilisez Tailscale Serve ou un reverse proxy ; sur iOS, installez d'abord la PWA. |
+| Le lanceur affiche une icône générique (Linux) | Corrigé en desktop 0.2.0 : les paquets antérieurs installaient une taille d'icône non standard, ignorée par la spécification freedesktop. Mettez le `.deb` à jour ; si l'icône persiste, lancez `gtk-update-icon-cache -f /usr/share/icons/hicolor` ou reconnectez-vous. |
+| SmartScreen ou Gatekeeper bloque l'app | Attendu : les binaires ne sont pas signés. Voir le tableau par plateforme plus haut. |
+| Un terminal reste vide après « Démarrer le projet » | La commande a été tapée dans un shell de login qui n'a pas démarré. Regardez l'onglet : le shell survit volontairement à l'échec, l'erreur y est donc visible. |
+
 ## Ce qui le distingue
 
 | | Arboretum | GitKraken Agent Mode / Conductor / Nimbalyst | Happy / CloudCLI | Anthropic Remote Control |
@@ -316,8 +414,17 @@ node packages/server/scripts/acceptance-p9.mjs   # commit/push avancé : staging
 node packages/server/scripts/acceptance-p10.mjs  # archivage automatique des sessions
 node packages/server/scripts/acceptance-p11.mjs  # synchronisation des réglages en temps réel
 node packages/server/scripts/acceptance-p12.mjs  # services git distants + clone HTTPS
+node packages/server/scripts/acceptance-p13.mjs  # démarrer le projet : commandes de lancement, multi-terminaux
+node packages/server/scripts/acceptance-p14.mjs  # temps réel armé : watcher épinglé par session, corrélation cwd
+node packages/server/scripts/acceptance-p15.mjs  # historisation : log de commits & diff par commit
 ```
 
+Contrôle de rendu (Chromium headless via CDP, sans Playwright) : après `npm run build`, lancez
+`node packages/server/scripts/copy-web.mjs` puis
+`node packages/server/scripts/verify-ui.mjs [dossier]`. Le script démarre un daemon isolé, crée un dépôt
+de démonstration et écrit des captures de l'IDE dans les deux thèmes, en largeurs desktop et mobile, en
+échouant sur toute erreur console.
+
 Le protocole s'est enrichi (de façon additive, sans bump de version) pour porter ces nouveautés : messages client `watch` / `unwatch` et signal ciblé `worktree_changes` (P7), plus les broadcasts `session_archived` (P10), `settings_update` (P11) et `clone_update` (P12). Côté serveur, le tout s'appuie sur `core/git.ts` (le moteur git pur), `core/fs-watcher.ts` (chokidar), `core/git-credentials.ts` + `core/clone-manager.ts` (identifiants chiffrés & clone), et les services d'archivage de sessions et de réglages.
 
 ## Soutenir le projet

README.md

@@ -10,12 +10,28 @@
   <strong>English</strong> · <a href="README.fr.md">Français</a>
 </p>
 
-**Status: MVP.** The worktree-first dashboard, session discovery & resume, multi-repo worktree lifecycle, sessions on your main branch or any worktree, live session states, the web terminal, mobile supervision (installable PWA, Web Push when a session needs you, answer a prompt without opening a terminal), and work groups (drive several related repos from a single Claude session) are implemented and tested.
+Session discovery & resume, multi-repo worktree lifecycle, sessions on your main branch or any worktree, live session states, the web terminal, mobile supervision (installable PWA, Web Push when a session needs you, answer a prompt without opening a terminal), and work groups (drive several related repos from a single Claude session) are all implemented and tested.
 
 The latest milestone turns Arboretum into a real **multi-project AI IDE**: a single workspace (route `/ide`, the default view on desktop) that holds **all** your open projects at once, no more one IDE window per project. A single left tree (project, then main checkout and worktrees, then Claude session), a tabbed Monaco editor at the center (several files from different projects side by side, inline diffs), Claude terminals in a bottom dock, and Git / Sessions / Groups panels via an activity bar. It ships both as a **native desktop app** (Linux, Windows, macOS) and the same web UI, backed by a real-time file-system watcher, selective staging / discard / amend / fetch / pull, automatic session archival, real-time settings sync, and encrypted remote git services (GitHub / GitLab / Gitea) with HTTPS clone.
 
 ---
 
+## Screenshots
+
+<p align="center">
+  <img src="brand/screenshot-ide-dark.png" alt="Arboretum, the multi-project AI IDE (dark theme)" width="900">
+</p>
+
+<p align="center">
+  <em>One workspace for every project: a unified tree, a tabbed Monaco editor with inline diffs, and docked Claude terminals. Dark and light themes.</em>
+</p>
+
+<p align="center">
+  <img src="brand/screenshot-ide-light.png" alt="Arboretum, the multi-project AI IDE (light theme)" width="900">
+</p>
+
+---
+
 ## The problem
 
 Working with AI coding agents changed how we use git: one feature = one worktree = one Claude Code session, several of them in parallel. But the tooling didn't follow:
@@ -28,11 +44,12 @@ Working with AI coding agents changed how we use git: one feature = one worktree
 
 A single Node.js daemon you run on your dev machine (as a native desktop app, or via `npx @johanleroy/git-arboretum`), serving a UI usable from your desktop, phone or tablet:
 
-- **Worktree-first, multi-repo dashboard**: every worktree of every registered repo, with its git state (branch, ahead/behind, dirty files) *and* the state of its Claude Code session (busy / waiting for input / idle / resumable).
+- **Multi-repo worktree dashboard**: every worktree of every registered repo, with its git state (branch, ahead/behind, dirty files) *and* the state of its Claude Code session (busy / waiting for input / idle / resumable).
 - **Full worktree lifecycle**: create (with per-repo post-create hooks: `npm ci`, copy `.env`…), adopt worktrees created by hand, delete with guardrails, prune orphans.
 - **Session discovery & resume**: sessions you launched in your own terminal show up automatically; resume dead ones, observe or fork live ones. Never corrupts a live session. Hide the old ones that clutter the list (one click clears the whole external history; they stay resumable).
 - **Web terminal**: full xterm.js terminal to every managed session, surviving browser disconnects; truly fullscreen, with the prompt pinned to the bottom and full scrollback above.
 - **Multi-project IDE**: one workspace for every open project at once (no per-project window). A single tree (project, worktrees, Claude sessions), a tabbed Monaco editor (several files from different projects side by side, with inline per-file diffs), a bottom dock of session terminals, and Git / Sessions / Groups panels. Edit files, stage changes selectively, commit (or amend), fetch/pull and push, all in one place. A real-time file-system watcher keeps the view live as the agent edits. Available as a native desktop app and in the browser.
+- **Start a project in one click**: many projects need several long-running commands to boot (dev server, API, database). Define them once per project (labels, shell commands, optional subdir), auto-detected from `package.json` scripts, a `Procfile` or `docker-compose`, then launch them all at once, one attached terminal per command. Each runs in your login shell (so `npm`, `docker`, nvm/asdf are on `PATH`) and stays live after the command exits, so failures stay on screen; stop the whole set in one action.
 - **Supervision from your phone**: installable PWA with push notifications when a session needs you; answer a prompt (its options, or deny) without opening a terminal.
 - **Work groups**: bundle related repos (e.g. an API, its web frontend and its docs) into a named group, then launch **one Claude session that spans all of them at once** (via the CLI's `--add-dir`): a single conversation with one shared context working across every repo, plus a unified view of all their worktrees and a side-by-side multi-terminal grid. Group sessions can either create the same branch worktree in each repo first, or run straight on the main checkouts.
 - **Remote git services**: connect your GitHub, GitLab or Gitea accounts (personal access token or app password), stored **encrypted at rest** (AES-256-GCM); browse your remote repositories and clone them over HTTPS with live progress, straight from the dashboard.
@@ -112,6 +129,19 @@ Prefer a native app to the daemon-in-a-terminal? Arboretum ships an **Electron d
 
 The desktop app is just a shell around the same daemon and web UI, so everything below (workspace, git, sessions) works identically.
 
+### Installing per platform
+
+| Platform | Artifact | Notes |
+|---|---|---|
+| **Debian / Ubuntu** | `Arboretum-<version>-amd64.deb` | `sudo apt install ./Arboretum-*.deb`. Pulls in `git`. Preferred over the AppImage on Debian: it installs the launcher entry and its icons. |
+| **Other Linux** | `Arboretum-<version>-x86_64.AppImage` | `chmod +x` then run. No desktop entry unless you use a tool like `appimaged`. |
+| **Windows** | `Arboretum-<version>-x64.exe` (NSIS) or the portable build | Not code-signed: SmartScreen shows "unknown publisher", choose **More info → Run anyway**. Needs Windows 10 1809+ (ConPTY). |
+| **macOS** | `Arboretum-<version>.dmg` | Not signed or notarized: right-click the app → **Open**, or `xattr -dr com.apple.quarantine /Applications/Arboretum.app`. Built on demand, see `packages/desktop/README.md`. |
+
+Windows also needs the `claude` CLI on your PATH like any other platform; if the app cannot find it,
+set its path in **Settings → Claude CLI**. Running the daemon at logon is supported there too
+(`arboretum install` registers a scheduled task).
+
 ## Using Arboretum
 
 1. **Add a repository.** From the dashboard, register a local git repo by its path. Optionally configure **post-create hooks** (e.g. `npm ci`, `cp ../.env .env`) that run automatically every time you create a new worktree for that repo.
@@ -129,6 +159,7 @@ Beyond supervising, Arboretum is a full **multi-project IDE** (route `/ide`, the
 - **Terminal dock.** Claude session terminals live in a bottom dock with one tab per session; open several at once (across projects), answer a waiting prompt right there. Terminals survive tab switches and browser disconnects.
 - **Git panel.** Stage or unstage individual files, discard changes, write a message and **commit** (everything or just what's staged), **amend** the last commit (refused once pushed), then **fetch**, **pull** (fast-forward or rebase) and **push**. Detailed staged / unstaged / conflict counts and the last commit stay current via a **real-time file-system watcher**, so the view updates the moment a Claude session touches a file.
 - **Deep links & mobile.** `/workspace/:repoId/:wt` still opens a specific worktree straight in the IDE (used by the VS Code extension). On mobile the IDE degrades to a single panel, and the worktree dashboard and session views remain the installable supervision PWA.
+- **Light or dark, your call.** A clean, consistent visual language (the "Emerald" design system: Inter + JetBrains Mono, an emerald accent) with a **light / dark / system** theme toggle remembered across sessions. The Monaco editor, the terminals and the diffs all follow the active theme.
 
 Like every git action in Arboretum, these run **as you** (the daemon runs under your account), consistent with the security model: a web terminal is remote code execution by design.
 
@@ -146,10 +177,10 @@ It is distributed as a **private VSIX**. Build and package it from the monorepo:
 
 ```bash
 npm run build:vscode
-cd packages/vscode && npx @vscode/vsce package --no-dependencies   # → git-arboretum-0.2.0.vsix
+cd packages/vscode && npx @vscode/vsce package --no-dependencies   # → git-arboretum-<version>.vsix
 ```
 
-Then install it via **Extensions: Install from VSIX…** (or `code --install-extension git-arboretum-0.2.0.vsix`), run **Arboretum: Sign In** and paste a token. Full details in [`packages/vscode/README.md`](packages/vscode/README.md).
+Then install it via **Extensions: Install from VSIX…** (or `code --install-extension git-arboretum-<version>.vsix`), run **Arboretum: Sign In** and paste a token. Full details in [`packages/vscode/README.md`](packages/vscode/README.md).
 
 ## Remote access from your phone
 
@@ -170,6 +201,47 @@ Open `https://<machine>.<tailnet>.ts.net` from any device on your tailnet. **Web
 
 > ⚠️ A web terminal is remote code execution **by design**. Never expose Arboretum directly to the public internet.
 
+### Web server mode (LAN, reverse proxy)
+
+Whatever front you put in place, remember the rule that trips everyone up first: **the daemon rejects any
+request whose `Origin` it does not know**, with `403 BAD_ORIGIN`. The address you type in the browser must
+be passed with `--allow-origin` (repeatable). Settings → **Remote access** shows the current origin, the
+allowed list, and the exact command to add one.
+
+**Behind a reverse proxy** (nginx, Caddy, Traefik), terminating TLS on your own domain:
+
+```nginx
+# nginx: the WebSocket upgrade and X-Forwarded-Proto are both required
+location / {
+  proxy_pass http://127.0.0.1:7317;
+  proxy_http_version 1.1;
+  proxy_set_header Upgrade $http_upgrade;
+  proxy_set_header Connection "upgrade";
+  proxy_set_header Host $host;
+  proxy_set_header X-Forwarded-Proto $scheme;   # makes the session cookie Secure
+  proxy_read_timeout 3600s;                     # long-lived terminals
+}
+```
+
+```bash
+npx @johanleroy/git-arboretum --allow-origin https://arboretum.example.com
+```
+
+`X-Forwarded-Proto: https` is what tells Arboretum to mark its session cookie `Secure`; without it the
+cookie stays non-Secure behind your HTTPS front. Keep the proxy read timeout generous, a terminal
+WebSocket is idle for long stretches.
+
+**On the LAN, without a proxy** (least recommended: plain HTTP, no Web Push, no PWA install):
+
+```bash
+npx @johanleroy/git-arboretum \
+  --bind 0.0.0.0 --i-know-this-exposes-a-terminal \
+  --allow-origin http://192.168.1.42:7317
+```
+
+The acknowledgement flag is mandatory and never added for you: binding beyond loopback must be a
+deliberate act. Restrict access at the network level (firewall, VPN) and prefer Tailscale.
+
 ## Running it as a background service
 
 The quickest way to run Arboretum as a service that survives logout and restarts on boot is the built-in installer. Install a pinned version globally, then run `install`. It detects your OS, writes the service file, starts it, and prints the one-time token:
@@ -179,7 +251,7 @@ npm i -g @johanleroy/git-arboretum
 arboretum install --allow-origin https://MACHINE.TAILNET.ts.net
 ```
 
-This sets up a **systemd user service** on Linux (`~/.config/systemd/user/arboretum.service`) or a **launchd LaunchAgent** on macOS (`~/Library/LaunchAgents/fr.lidge.arboretum.plist`). Every daemon flag (`--port`, `--allow-origin`, `--db`, …) is propagated to the service. Manage it with:
+This sets up a **systemd user service** on Linux (`~/.config/systemd/user/arboretum.service`), a **launchd LaunchAgent** on macOS (`~/Library/LaunchAgents/fr.lidge.arboretum.plist`), or a **scheduled task** on Windows (`Arboretum`, triggered at logon, registered with `schtasks`). Always as your user, never as root or SYSTEM. Every daemon flag (`--port`, `--allow-origin`, `--db`, …) is propagated to the service. Manage it with:
 
 ```bash
 arboretum status      # service status (+ where to read logs)
@@ -235,7 +307,9 @@ Daemon options are CLI flags:
 | `--allow-origin <url>` | none | Additional allowed `Origin` (repeatable). Needed for Tailscale/HTTPS access. |
 | `--db <path>` | `<data>/arboretum.db` | SQLite database path. |
 | `--vapid-contact <mailto/url>` | `mailto:arboretum@localhost` | VAPID contact subject for Web Push. |
-| `--print-token` | `false` | Hint about token re-printing (tokens are hashed and cannot be re-shown). |
+| `--print-token` | `false` | Print the access token on start (bootstraps one if the database has none). |
+| `--claude-home <path>` | `~/.claude` | Override the Claude install root (session registry and transcripts). |
+| `--no-discover` | `false` | Disable repository auto-discovery (start-up scan and periodic re-scan). |
 | `--i-know-this-exposes-a-terminal` | `false` | Acknowledge binding to a non-loopback address. **Avoid**: prefer Tailscale Serve. |
 
 `arboretum install` accepts every daemon flag above (propagated verbatim to the service) plus:
@@ -247,7 +321,18 @@ Daemon options are CLI flags:
 | `--dry-run` | Print the unit/plist and commands without applying anything. |
 | `--no-enable` | Write the service file but do not enable/start it. |
 
-State (the SQLite database) lives in `$XDG_DATA_HOME/arboretum` (default `~/.local/share/arboretum`).
+State (the SQLite database) lives in `$XDG_DATA_HOME/arboretum`, defaulting to
+`~/.local/share/arboretum` on Linux and macOS and `%APPDATA%\arboretum` on Windows.
+
+Environment variables:
+
+| Variable | Used by | Description |
+|---|---|---|
+| `ARBORETUM_LOG` | daemon | Log level (`fatal`, `error`, `warn`, `info`, `debug`, `trace`). Default `info`. |
+| `ARBORETUM_SECRET_KEY` | daemon | 32-byte key (base64 or hex) encrypting stored git credentials. Generated and stored in the database when absent. |
+| `ARBORETUM_EMIT_TOKEN_FD` | daemon | Write the access token to this file descriptor at start-up. Used by the desktop app to sign itself in; not meant for manual use. |
+| `XDG_DATA_HOME` | daemon | Root of the data directory (see above). |
+| `ARBORETUM_SHELL` | daemon (Windows) | Shell used to run project commands. Default `powershell.exe`. |
 
 Settings beyond CLI flags (the directories Arboretum scans for repos and how often, the `claude` binary path and home, and the session retention / purge windows) live in **Settings** in the UI. They are broadcast over the WebSocket, so every connected browser reflects a change in real time, no reload needed.
 
@@ -273,6 +358,19 @@ Tailscale Serve is **the** way to reach Arboretum from other devices, not just a
 
 See [`SECURITY.md`](SECURITY.md) for the full threat model and [`docs/ENTERPRISE_DEPLOYMENT.md`](docs/ENTERPRISE_DEPLOYMENT.md) for hardening in regulated environments.
 
+## Troubleshooting
+
+| Symptom | Cause & fix |
+|---|---|
+| `npm error 404 Not Found @johanleroy/git-arboretum` | The package lives on a private registry. Add the scope to your `~/.npmrc`: `@johanleroy:registry=https://git.lidge.fr/api/packages/johanleroy/npm/` |
+| `403 BAD_ORIGIN` in the browser console, blank UI | The address you are using is not in the allowed list. Restart with `--allow-origin <that exact origin>` (scheme, host and port must match). |
+| `ERR_UNKNOWN_BUILTIN_MODULE node:sqlite` or a crash on start | Node is older than 22.16. Check with `node --version`; `node:sqlite` is only stable from there. The desktop app bundles its own runtime and is immune. |
+| "Claude Code CLI not found in PATH" | The daemon runs with a minimal PATH (typical under systemd/launchd). Set the binary path in **Settings → Claude CLI**, or reinstall the service with `arboretum install`, which freezes your interactive PATH. |
+| Notifications cannot be enabled | Web Push requires HTTPS. Use Tailscale Serve or a reverse proxy; on iOS, install the PWA first. |
+| The app launcher shows a generic icon (Linux) | Fixed in desktop 0.2.0: earlier packages installed a single non-standard icon size that the freedesktop spec ignores. Upgrade the `.deb`; if the icon persists, run `gtk-update-icon-cache -f /usr/share/icons/hicolor` or log out and back in. |
+| SmartScreen or Gatekeeper blocks the app | Expected: the binaries are not signed. See the per-platform table above. |
+| A terminal stays blank after "Start project" | The command was typed into a login shell that failed to start. Check the tab: the shell survives the failure on purpose, so the error is visible in it. |
+
 ## What makes it different
 
 | | Arboretum | GitKraken Agent Mode / Conductor / Nimbalyst | Happy / CloudCLI | Anthropic Remote Control |
@@ -316,8 +414,17 @@ node packages/server/scripts/acceptance-p9.mjs   # advanced commit/push: selecti
 node packages/server/scripts/acceptance-p10.mjs  # automatic session archival
 node packages/server/scripts/acceptance-p11.mjs  # real-time settings sync
 node packages/server/scripts/acceptance-p12.mjs  # remote git services + HTTPS clone
+node packages/server/scripts/acceptance-p13.mjs  # start the project: launch commands & multi-terminal
+node packages/server/scripts/acceptance-p14.mjs  # armed real-time: session-pinned watcher, cwd correlation
+node packages/server/scripts/acceptance-p15.mjs  # history: commit log & per-commit diff
 ```
 
+Rendering check (headless Chromium over CDP, no Playwright): after `npm run build`, run
+`node packages/server/scripts/copy-web.mjs` then
+`node packages/server/scripts/verify-ui.mjs [outdir]`. It starts an isolated daemon, seeds a demo repo,
+and writes screenshots of the IDE in both themes at desktop and mobile widths, failing on any console
+error.
+
 The protocol grew (additively, no version bump) to carry the new surface: client `watch` / `unwatch` messages and the targeted `worktree_changes` signal (P7), plus `session_archived` (P10), `settings_update` (P11) and `clone_update` (P12) broadcasts. Server-side, the work is backed by `core/git.ts` (the pure git engine), `core/fs-watcher.ts` (chokidar), `core/git-credentials.ts` + `core/clone-manager.ts` (encrypted credentials & clone), and the session-archive and settings services.
 
 ## Support

brand/README.md

@@ -7,7 +7,7 @@ branches, cyan session nodes, a `>_` prompt at the base) on a dark background.
 | --- | --- |
 | `arboretum-logo-source.png` | Master artwork (opaque dark background). Keep; everything else derives from it. |
 | `arboretum-logo.png` | Full logo, **transparent**. Best on dark surfaces (the wordmark is light). |
-| `arboretum-logo-on-dark.png` | Full logo on the app background `#09090b`. Safe on any theme, used in the README. |
+| `arboretum-logo-on-dark.png` | Full logo on a dark backdrop (`#09090b`, the app's dark theme; the UI now also ships a light theme on `#fafafa`). Safe on any theme, used in the README. |
 | `arboretum-mark.png` | Square, **transparent**, tree only (no wordmark). Ideal **Gitea repo avatar**, reads on both light and dark. |
 
 The transparent versions are extracted by luminance (alpha ∝ brightness), the clean

brand/build-assets.py

@@ -16,9 +16,17 @@ Sorties :
   packages/web/public/icon-512.png  icône PWA maskable (arbre, fond #09090b)
   packages/web/public/apple-touch-icon.png  icône iOS 180 (arbre, fond #09090b)
   packages/web/public/favicon.ico   favicon transparent (arbre, 16/32/48)
+  packages/web/public/screenshot-ide-{dark,light}.png  captures du manifeste PWA (copiées de brand/)
+  packages/desktop/resources/icon.png       source 1024 (electron-builder : macOS + dérivations)
+  packages/desktop/resources/icon.ico       icône Windows multi-tailles (NSIS + fenêtre)
+  packages/desktop/resources/icons/NNxNN.png  jeu Linux aux TAILLES STANDARD hicolor
+  packages/desktop/resources/trayTemplate.png (+@2x)  icône de barre de menus macOS (monochrome)
+  packages/vscode/media/icon.png    icône du VSIX (128, requise par tout marketplace)
 
 Usage : python3 brand/build-assets.py <source.png>
 """
+import os
+import shutil
 import sys
 import numpy as np
 from PIL import Image
@@ -94,6 +102,40 @@ def main():
     fav = square(tree, 0.04)
     fav.save("packages/web/public/favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)])
     print("  packages/web/public/favicon.ico  16/32/48")
+    # captures utilisées par le manifeste PWA (installation enrichie Chrome/Edge)
+    for theme in ("dark", "light"):
+        src = f"brand/screenshot-ide-{theme}.png"
+        if os.path.exists(src):
+            shutil.copyfile(src, f"packages/web/public/screenshot-ide-{theme}.png")
+            print(f"  packages/web/public/screenshot-ide-{theme}.png  (copié)")
+
+    # --- app de bureau -------------------------------------------------------------------
+    # electron-builder n'invente RIEN pour Linux : sans un dossier d'icônes aux tailles standard
+    # hicolor, il installe l'unique taille source (ex. 895x895), répertoire que la spécification
+    # freedesktop ignore → aucun logo au lanceur. D'où la génération explicite ci-dessous.
+    print("packages/desktop/resources/")
+    os.makedirs("packages/desktop/resources/icons", exist_ok=True)
+    desk = square(tree, 0.08)
+    save(desk, "packages/desktop/resources/icon.png", 1024)
+    for size in (16, 24, 32, 48, 64, 128, 256, 512):
+        save(desk, f"packages/desktop/resources/icons/{size}x{size}.png", size)
+    desk.resize((256, 256), Image.LANCZOS).save(
+        "packages/desktop/resources/icon.ico", sizes=[(16, 16), (24, 24), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)]
+    )
+    print("  packages/desktop/resources/icon.ico  16→256")
+    # macOS : la barre de menus exige une image TEMPLATE (monochrome + alpha), sinon l'icône est
+    # illisible et ne suit pas le thème clair/sombre du système.
+    tpl = tree.copy()
+    tpl_alpha = tpl.getchannel("A")
+    template = Image.new("RGBA", tpl.size, (0, 0, 0, 0))
+    template.putalpha(tpl_alpha)
+    save(template, "packages/desktop/resources/trayTemplate.png", 16)
+    save(template, "packages/desktop/resources/trayTemplate@2x.png", 32)
+
+    # --- extension VS Code ---------------------------------------------------------------
+    print("packages/vscode/media/")
+    os.makedirs("packages/vscode/media", exist_ok=True)
+    save(square(tree, 0.10, bg=BG), "packages/vscode/media/icon.png", 128)
 
 
 if __name__ == "__main__":

docs/CI_RUNNERS.md

@@ -0,0 +1,134 @@
+# Runners Gitea Actions · ajouter Windows (et macOS)
+
+Ce document explique comment activer le build **Windows** de l'app de bureau dans la CI. Il est écrit
+pour être appliqué tel quel sur `git.lidge.fr` (Gitea 1.25).
+
+## Pourquoi un runner Windows est obligatoire
+
+Le cross-build Windows depuis Linux **ne peut pas fonctionner**, pour deux raisons vérifiées dans
+`node_modules/@homebridge/node-pty-prebuilt-multiarch` :
+
+1. `scripts/check-prebuild.js` sort en succès dès que le binaire de l'hôte existe, donc
+   `prebuild-install` n'est jamais appelé et aucun binaire `win32` n'est téléchargé (le tarball publié
+   ne contient que `prebuilds/linux-*`) ;
+2. `scripts/post-install.js` ne copie `conpty.dll` et `OpenConsole.exe` **que si la plateforme de build
+   est win32**. Sans eux, pas de ConPTY, donc **aucun terminal** dans l'app.
+
+Un build produit sous Wine serait donc installable mais inutilisable. C'est pour cela que
+`packages/desktop/README.md` ne propose plus cette voie.
+
+## État actuel
+
+| Plateforme | Runner | Build |
+|---|---|---|
+| Linux | `ubuntu-latest` (déjà en place) | automatique à chaque tag `desktop-v*` |
+| Windows | **à enregistrer** | job `windows`, activé par la variable `ENABLE_WINDOWS_BUILD` |
+| macOS | aucun | manuel (`npm run dist:mac` sur un Mac) |
+
+Le job Windows est conditionné par `if: vars.ENABLE_WINDOWS_BUILD == 'true'`. Tant que la variable
+n'existe pas, le job est **sauté** : la release Linux part normalement. Sans cette condition, un job
+`runs-on: windows-latest` sans runner disponible resterait en attente et bloquerait la release entière.
+
+## 1. Préparer la machine Windows
+
+Prérequis (Windows 10 1809+ ou Windows 11, x64) :
+
+- **Git pour Windows** (fournit aussi `bash`, utilisé par les étapes `shell: bash` du workflow) ;
+- **Node.js 22.21.1** (même version que `NODE_VERSION` dans le workflow) ;
+- rien d'autre : `node-pty` s'installe via des binaires précompilés, aucun compilateur C++ n'est requis.
+
+Vérification rapide dans PowerShell :
+
+```powershell
+node --version   # v22.21.1
+git --version
+bash --version   # fourni par Git for Windows
+```
+
+## 2. Enregistrer le runner
+
+Récupérer un jeton d'enregistrement dans Gitea : **Site Administration → Actions → Runners → Create new
+runner** (jeton d'instance), ou au niveau du dépôt : **Settings → Actions → Runners**.
+
+Puis, dans PowerShell (répertoire dédié, par exemple `C:\actions-runner`) :
+
+```powershell
+mkdir C:\actions-runner; cd C:\actions-runner
+# Binaire act_runner pour Windows (adapter la version à celle de votre Gitea)
+Invoke-WebRequest -Uri "https://gitea.com/gitea/act_runner/releases/download/v0.2.13/act_runner-0.2.13-windows-amd64.exe" -OutFile act_runner.exe
+
+.\act_runner.exe register --no-interactive `
+  --instance https://git.lidge.fr `
+  --token <JETON_DENREGISTREMENT> `
+  --name windows-builder `
+  --labels windows-latest:host
+```
+
+Le label **`windows-latest:host`** est essentiel : `:host` signifie « exécuter directement sur la
+machine », sans conteneur (il n'y a pas d'image Docker Windows utilisable ici), et `windows-latest` est
+le nom attendu par `runs-on` dans le workflow.
+
+Démarrage manuel pour un premier essai :
+
+```powershell
+.\act_runner.exe daemon
+```
+
+## 3. Exécuter le runner en service
+
+Pour qu'il survive aux redémarrages, créer une tâche planifiée « à l'ouverture de session » (même
+principe que `arboretum install` sur Windows) :
+
+```powershell
+schtasks /Create /TN "GiteaActRunner" /TR "C:\actions-runner\act_runner.exe daemon" `
+  /SC ONLOGON /RL LIMITED /F
+schtasks /Run /TN "GiteaActRunner"
+```
+
+Alternative : [NSSM](https://nssm.cc/) pour un vrai service Windows, si le runner doit tourner sans
+session ouverte. Attention : un service hors session n'a pas accès au profil utilisateur.
+
+## 4. Activer le job dans la CI
+
+Dans Gitea, sur le dépôt `johanleroy/arboretum` : **Settings → Actions → Variables → Add Variable**
+
+| Nom | Valeur |
+|---|---|
+| `ENABLE_WINDOWS_BUILD` | `true` |
+
+## 5. Vérifier sans créer de tag
+
+Le workflow accepte `workflow_dispatch` : **Actions → Desktop Release → Run workflow**. Dans ce mode, le
+garde-fou « tag == version » est ignoré et rien n'est attaché à une release ; les installeurs sont
+récupérables dans les artefacts du run (`desktop-windows`).
+
+Contrôles à faire sur l'installeur produit :
+
+1. l'installeur NSIS s'exécute et propose le répertoire d'installation ;
+2. l'app démarre et affiche l'IDE **sans écran de connexion** (le token passe par le descripteur 3 ;
+   c'est le point le plus susceptible de différer sur Windows, cf. `packages/desktop/src/main/daemon.ts`) ;
+3. un terminal s'ouvre et répond (ConPTY présent) ;
+4. le CLI `claude` est trouvé (sinon renseigner son chemin dans Réglages → Claude CLI) ;
+5. « Démarrer le projet » lance bien les commandes sous PowerShell.
+
+## 6. Signature de code
+
+Aucun binaire n'est signé. SmartScreen affichera « éditeur inconnu » au premier lancement : choisir
+« Informations complémentaires » puis « Exécuter quand même ». Pour signer plus tard, ajouter les
+secrets `CSC_LINK` (certificat .pfx encodé en base64) et `CSC_KEY_PASSWORD` au dépôt : electron-builder
+les utilise automatiquement, sans changement de workflow.
+
+## Repli si aucun runner n'est possible
+
+Sur une machine Windows, avec le dépôt cloné :
+
+```powershell
+npm ci
+cd packages\desktop
+npm ci
+npm run dist:win
+```
+
+Puis attacher `packages\desktop\release\*.exe`, `latest.yml` et les `.blockmap` à la release
+`desktop-vX.Y.Z` depuis l'interface Gitea. Le canal d'auto-update (`desktop-latest`) doit recevoir les
+mêmes fichiers, sinon les utilisateurs Windows ne verront pas la mise à jour.

package-lock.json

@@ -980,11 +980,19 @@
         "ws": "^8.16.0"
       }
     },
-    "node_modules/@fontsource/jetbrains-mono": {
+    "node_modules/@fontsource-variable/inter": {
-      "version": "5.2.8",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
-      "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
-      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.3.0.tgz",
+      "integrity": "sha512-F32xpS2NsGYoQi2ADSkKTgpJj7ozajsGgDJ8woTnqjmIB+dxDIqImjl4pXZVEExu8UFZ2ndhmX18EBS/hdz3Lw==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -7925,7 +7933,7 @@
     },
     "packages/server": {
       "name": "@johanleroy/git-arboretum",
-      "version": "3.1.0",
+      "version": "3.4.0",
       "license": "MIT",
       "dependencies": {
         "@fastify/cookie": "^11.0.0",
@@ -7959,13 +7967,14 @@
     },
     "packages/site": {
       "name": "@arboretum/site",
-      "version": "0.2.0",
+      "version": "0.4.0",
       "dependencies": {
         "vue": "^3.5.38",
         "vue-i18n": "^11.4.5"
       },
       "devDependencies": {
-        "@fontsource/jetbrains-mono": "^5.1.0",
+        "@fontsource-variable/inter": "^5.0.0",
+        "@fontsource-variable/jetbrains-mono": "^5.0.0",
         "@tailwindcss/vite": "^4.3.0",
         "@vitejs/plugin-vue": "^6.0.7",
         "tailwindcss": "^4.3.0",
@@ -8054,7 +8063,7 @@
     },
     "packages/vscode": {
       "name": "git-arboretum",
-      "version": "0.3.0",
+      "version": "0.4.1",
       "license": "MIT",
       "devDependencies": {
         "@arboretum/shared": "0.1.0",
@@ -8505,6 +8514,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@arboretum/shared": "*",
+        "@fontsource-variable/inter": "^5.0.0",
+        "@fontsource-variable/jetbrains-mono": "^5.0.0",
         "@lucide/vue": "^1.21.0",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/addon-webgl": "^0.19.0",

package.json

@@ -26,7 +26,9 @@
     "dev:site": "npm run dev -w @arboretum/site",
     "preview:site": "npm run preview -w @arboretum/site",
     "build:vscode": "npm run build -w @arboretum/shared -w git-arboretum",
-    "dev:vscode": "npm run dev -w git-arboretum"
+    "dev:vscode": "npm run dev -w git-arboretum",
+    "typecheck:desktop": "npm --prefix packages/desktop run typecheck",
+    "build:desktop": "npm --prefix packages/desktop run build"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",

packages/desktop/CHANGELOG.md

@@ -0,0 +1,55 @@
+# Changelog
+
+Notable changes to the Arboretum desktop app (`packages/desktop`). The daemon and the VS Code
+extension keep their own changelogs in `packages/server/CHANGELOG.md` and
+`packages/vscode/CHANGELOG.md`.
+
+## 0.2.0
+
+Distribution release: the Linux launcher icon finally shows up, Windows becomes a first-class target,
+and the embedded runtime loses a third of its weight.
+
+- **Launcher icon fixed (Linux).** Earlier packages installed a single 895×895 icon. That size is not
+  declared in `hicolor/index.theme`, so by the freedesktop spec every desktop environment ignored it and
+  the launcher fell back to a generic icon. The build now generates the standard set (16 → 512) plus a
+  proper `.ico` for Windows, and forces `executableName: arboretum` (the scoped package name was
+  producing `@arboretumdesktop` as binary, `.desktop` file and icon name).
+- **Package metadata.** A non-empty short description in `apt show` (`deb.synopsis` was missing),
+  `Section: devel` instead of `default`, a single-line `Comment` in the desktop entry (it was multi-line,
+  hence invalid), plus `GenericName` and `Keywords` for search.
+- **Windows.** Build scripts run on a Windows host again (`npm`/`npx` are `.cmd` shims that
+  `execFileSync` cannot resolve; the Node extraction used `unzip` and `bash -c cp/rm`, none of which
+  exist there). The daemon side gained what it needed to actually work: `where.exe` to find the Claude
+  CLI, PowerShell as the launch shell, a `.cmd` askpass so HTTPS clone/push with a token works, and
+  `taskkill /T` so stopping a terminal takes its whole process tree down. CI has a `windows-latest` job,
+  enabled by the `ENABLE_WINDOWS_BUILD` repository variable, see `docs/CI_RUNNERS.md`.
+- **Auto-update repaired.** Shipped binaries point at a `desktop-latest` release that never existed, so
+  no client could ever see an update. The release workflow now recreates that floating release on every
+  version and attaches the `latest*.yml` files and installers to it, with `.blockmap`s for differential
+  updates and `SHA256SUMS`.
+- **Smaller download.** The bundled Node runtime is pruned to the binary and its licence (no headers, no
+  docs, no `npm`/`corepack`): ~205 MB → ~118 MB. Nothing at runtime used them, the daemon's dependencies
+  being installed at build time.
+- **macOS integration.** An application menu (without it ⌘C / ⌘V / ⌘A were not bound anywhere in the
+  app), `app.on('activate')` so the Dock icon brings back a hidden window, and a monochrome template tray
+  icon that follows the menu-bar theme.
+- **PATH enrichment on Windows.** `%LOCALAPPDATA%\Programs` and `%APPDATA%\npm` are added to the daemon's
+  PATH, where the Claude CLI and global npm binaries live (this was POSIX-only).
+
+## 0.1.3
+
+Ships the 3.3.0 daemon ("Start the project": launch commands and multi-terminal boot).
+
+## 0.1.2
+
+Ships the 3.2.0 daemon (Emerald visual overhaul, light and dark themes).
+
+## 0.1.1
+
+- Fixed the missing window/launcher logo under Debian and Wayland by pinning the runtime app id
+  (`app.setName('Arboretum')`) to the `StartupWMClass` written in the desktop entry.
+
+## 0.1.0
+
+First desktop release: an Electron shell that runs the daemon as a child process and opens its UI
+already authenticated, with a bundled Node runtime, a tray icon, launch-at-login and auto-update.

packages/desktop/README.md

@@ -15,7 +15,8 @@ not by the main `npm run build`.
 2. The daemon mints a fresh token and writes `{token, url}` on file descriptor 3 (private stdio pipe).
 3. The shell posts that token to `/api/v1/auth/login` from the window's session (server to server),
    which drops the `arb_session` cookie into the session jar, then loads the SPA on `127.0.0.1`.
-4. On quit, the daemon child gets `SIGTERM` (then `SIGKILL` after a grace delay).
+4. On quit, the daemon child is asked to stop (`SIGTERM` on POSIX, `taskkill /T` on Windows, which
+   Windows requires to take the whole process tree down rather than leaving PTY grandchildren behind).
 
 A standalone Node runtime (pinned, >= 22.16) is bundled instead of reusing Electron's Node, so
 `node:sqlite` works without a flag and the `node-pty` prebuild keeps the `node.` ABI prefix.
@@ -56,24 +57,61 @@ Fully supported. `dist:linux` runs on a Linux host or the Gitea CI runner.
 
 ### Windows
 
-Build on a Windows host (recommended): the `node-pty` win32 native binary and the installer
+**Must be built on a Windows host.** Cross-building from Linux (including via Wine) does not work, and
-(`makensis`) are most reliable there. Cross-building from Linux via Wine is a best-effort fallback.
+the option has been removed from this document to stop people losing time on it:
-The app uses ConPTY (Windows 10 1809+). The installer is not code-signed yet, so SmartScreen shows
+
+- `node-pty`'s `check-prebuild.js` exits successfully as soon as the *host* binary exists, so
+  `prebuild-install` never runs and no win32 binary is fetched (its published tarball only ships
+  `prebuilds/linux-*`);
+- its `post-install.js` copies `conpty.dll` and `OpenConsole.exe` **only when the build platform is
+  win32**. Without them there is no ConPTY, hence no terminal at all.
+
+In CI this is a dedicated job on a `windows-latest` runner, enabled by the `ENABLE_WINDOWS_BUILD`
+repository variable. Full procedure to register such a runner: [`docs/CI_RUNNERS.md`](../../docs/CI_RUNNERS.md).
+
+The app requires Windows 10 1809+ (ConPTY). The installer is not code-signed, so SmartScreen shows
 "unknown publisher": choose "More info" then "Run anyway".
 
 ### macOS (best-effort)
 
-Build on a Mac (`dmg`/`zip` cannot be produced elsewhere). The app is **not** signed or notarized,
+Build on a Mac (`dmg`/`zip` cannot be produced elsewhere); there is no macOS runner, so it is a manual
-so Gatekeeper blocks the first launch: right-click the app then "Open", or run
+step. The app is **not** signed or notarized, so Gatekeeper blocks the first launch: right-click the app
-`xattr -dr com.apple.quarantine /Applications/Arboretum.app`.
+then "Open", or run `xattr -dr com.apple.quarantine /Applications/Arboretum.app`.
+
+## What the shell adds beyond the window
+
+- **Tray icon** (`src/main/tray.ts`): open the window, toggle launch-at-login, quit. On macOS it uses a
+  monochrome *template* image so it follows the menu-bar theme.
+- **Application menu** (`src/main/app-menu.ts`): required on macOS, where without it ⌘C / ⌘V / ⌘A are not
+  bound anywhere in the app. Closing the window hides it; `app.on('activate')` brings it back from the Dock.
+- **Launch at login** (`src/main/autostart.ts`): a `.desktop` file under `~/.config/autostart` on Linux,
+  `app.setLoginItemSettings` on Windows/macOS.
+- **Auto-update** (`src/main/updater.ts`): see below.
+- **PATH enrichment** (`src/main/env.ts`): a GUI app starts with a minimal PATH. On POSIX we add
+  `/usr/local/bin`, `/opt/homebrew/bin`, `~/.local/bin`; on Windows `%LOCALAPPDATA%\Programs` and
+  `%APPDATA%\npm`, where the Claude CLI and global npm binaries actually live.
 
 ## Auto-update
 
-electron-builder emits `latest*.yml` next to the artifacts; `electron-updater` (wired in a later
+electron-builder emits `latest*.yml` next to the artifacts and `electron-updater` reads them from a
-change) points at the Gitea release assets. Auto-update works for Windows (NSIS) and Linux
+**floating `desktop-latest` release** on Gitea, which the release workflow recreates on every version
-(AppImage); macOS updates are manual while the app is unsigned.
+(that URL is baked into shipped binaries, so it must always exist). Auto-update covers Windows (NSIS)
+and Linux (AppImage); macOS updates are manual while the app is unsigned.
 
-## Icon
+## Bundled Node runtime
 
-`resources/icon.png` (square, >= 512px) is the single source; electron-builder derives every
+`scripts/fetch-node.mjs` downloads a pinned Node (SHA256 verified) and **prunes it** to the binary and
-platform icon from it.
+its licence: headers, docs and `npm`/`corepack` are removed, since the daemon's dependencies are
+installed at build time, never at runtime. That takes the embedded runtime from ~205 MB to ~118 MB.
+
+## Icons
+
+Generated by `python3 brand/build-assets.py` from the source logo, into `resources/`:
+
+- `icons/{16,24,32,48,64,128,256,512}x*.png` : the Linux set, at **standard hicolor sizes**. This is not
+  cosmetic: with a single non-standard size (the old 895×895), the directory is not declared in
+  `hicolor/index.theme` and the freedesktop spec makes desktops ignore it, so the launcher showed no
+  icon at all.
+- `icon.png` (1024) : macOS source and generic fallback.
+- `icon.ico` : Windows (NSIS installer and window).
+- `trayTemplate.png` (+`@2x`) : monochrome macOS menu-bar icon.

packages/desktop/electron-builder.yml

@@ -21,27 +21,59 @@ extraResources:
     to: node
   - from: resources/icon.png
     to: icon.png
+  - from: resources/trayTemplate.png
+    to: trayTemplate.png
+  - from: resources/trayTemplate@2x.png
+    to: trayTemplate@2x.png
 
-# Icône : electron-builder dérive toutes les tailles/formats par OS depuis resources/icon.png
+# Icônes : générées par `python3 brand/build-assets.py` depuis le logo source.
-# (buildResources), pas besoin de .ico/.icns séparés.
+#  - `resources/icons/` : jeu Linux aux TAILLES STANDARD hicolor (16→512). Indispensable : sans lui,
+#    electron-builder installe l'unique taille du PNG source (895x895), or `hicolor/index.theme` ne
+#    déclare pas ce répertoire, donc la spécification freedesktop l'ignore et AUCUN logo n'apparaît
+#    au lanceur (c'était le bug du .deb 0.1.x).
+#  - `resources/icon.png` (1024) : source macOS et dérivations.
+#  - `resources/icon.ico` : Windows (installeur NSIS + fenêtre).
 linux:
   target: [AppImage, deb]
   category: Development
+  icon: resources/icons
+  # `executableName` explicite : sinon electron-builder le dérive du `name` SCOPÉ du package
+  # (@arboretum/desktop → « @arboretumdesktop »), qui se retrouvait dans /usr/bin, le .desktop et son
+  # `Icon=` · un nom d'icône commençant par « @ » n'est pas résoluble.
+  executableName: arboretum
   artifactName: ${productName}-${version}-${arch}.${ext}
+  synopsis: Self-hosted multi-project AI IDE for git worktrees
   # Entrée .desktop (forme plate, mergée telle quelle par electron-builder 25). StartupWMClass DOIT
   # correspondre à l'app_id runtime (posé par app.setName('Arboretum') dans src/main/main.ts) pour
   # que GNOME/Wayland associe la fenêtre au lanceur et affiche le logo. Redondant avec le défaut
   # (productName) mais explicite et robuste à un futur changement de productName.
   desktop:
     StartupWMClass: Arboretum
-  # Note : le .deb installe l'icône et rafraîchit le cache (postinst electron-builder). L'AppImage,
+    GenericName: AI IDE for git worktrees
-  # lui, n'installe aucun .desktop sans intégration (appimaged) : sur Debian, préférer le .deb.
+    Keywords: git;worktree;claude;ide;terminal;
+    # Pas de `Comment` ici : electron-builder l'écrase systématiquement après la surcharge
+    # (LinuxTargetHelper : desktopMeta.Comment = deb.description || package.json description). C'est
+    # donc la description du package.json qui fait foi, et elle DOIT rester sur une seule ligne : un
+    # texte multi-lignes produirait une entrée .desktop invalide (lignes suivantes lues comme clés).
+  # Note : avec des tailles standard, GTK/KDE résolvent l'icône même sans cache d'icônes rafraîchi
+  # (le postinst d'electron-builder n'appelle pas gtk-update-icon-cache). L'AppImage, lui, n'installe
+  # aucun .desktop sans intégration (appimaged) : sur Debian, préférer le .deb.
 
 deb:
   # git est requis pour les operations de worktree ; claude n'est pas dans les depots (documente).
   depends: [git]
   # Mainteneur .deb explicite (electron-builder l'exige ; sinon derive de author.email du package.json).
   maintainer: Johan LEROY <contact@johanleroy.fr>
+  # `synopsis` alimente la description COURTE du paquet : sans lui, `apt show` affichait une ligne
+  # vide (electron-builder concatène `synopsis || ''` puis la description longue).
+  # `synopsis` = description COURTE du paquet : sans elle, `apt show` affichait une ligne vide
+  # (electron-builder concatène `synopsis || ''` puis la description longue). La description longue
+  # reste celle du package.json, volontairement sur une seule ligne (cf. note sur Comment ci-dessus).
+  synopsis: Self-hosted multi-project AI IDE for git worktrees
+  # electron-builder nomme ce champ `packageCategory` (et non `section`) : il alimente le champ
+  # Section: du paquet, qui valait « default » jusqu'ici.
+  packageCategory: devel
+  priority: optional
 
 win:
   target:
@@ -49,22 +81,38 @@ win:
       arch: [x64]
     - target: portable
       arch: [x64]
+  icon: resources/icon.ico
+  # Affiché par SmartScreen et dans les métadonnées de l'exécutable. Le binaire n'est PAS signé :
+  # SmartScreen montrera « éditeur inconnu » (documenté dans le README).
+  publisherName: Johan LEROY
   artifactName: ${productName}-${version}-${arch}.${ext}
 
+# Le build portable produit lui aussi un .exe : sans nom distinct, il entrerait en collision avec
+# l'installeur NSIS (les deux cibles héritent de `win.artifactName`) et l'un écraserait l'autre.
+portable:
+  artifactName: ${productName}-${version}-${arch}-portable.${ext}
+
 nsis:
   oneClick: false
   perMachine: false
   allowToChangeInstallationDirectory: true
+  shortcutName: Arboretum
+  uninstallDisplayName: Arboretum ${version}
+  createDesktopShortcut: true
+  license: ../../LICENSE
 
 mac:
   target: [dmg, zip]
+  icon: resources/icon.png
   category: public.app-category.developer-tools
   # macOS best-effort : non signe (documente : clic droit -> Ouvrir, ou xattr -dr com.apple.quarantine)
   identity: null
   hardenedRuntime: false
 
-# Auto-update (electron-updater, cable en C5) : provider generic pointant sur les assets de release
+# Auto-update (electron-updater) : provider generic pointant sur un tag FLOTTANT `desktop-latest`,
-# Gitea. Genere latest*.yml a cote des artefacts.
+# que la CI recrée à chaque release en y attachant les installeurs et les `latest*.yml`. Ce tag doit
+# exister, sinon l'updater reçoit un 404 (c'était le cas jusqu'en 0.1.3) : voir
+# .gitea/workflows/desktop-release.yml, étape « Publish floating desktop-latest release ».
 publish:
   provider: generic
   url: https://git.lidge.fr/johanleroy/arboretum/releases/download/desktop-latest

packages/desktop/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@arboretum/desktop",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@arboretum/desktop",
-      "version": "0.1.1",
+      "version": "0.2.0",
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^22.10.0",

packages/desktop/package.json

@@ -1,9 +1,25 @@
 {
   "name": "@arboretum/desktop",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.2.0",
-  "description": "Arboretum desktop app: Electron shell that runs the daemon and shows its web UI",
+  "description": "Self-hosted multi-project AI IDE for git worktrees and Claude Code sessions",
   "homepage": "https://git-arboretum.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://git.lidge.fr/johanleroy/arboretum.git"
+  },
+  "bugs": {
+    "url": "https://git.lidge.fr/johanleroy/arboretum/issues"
+  },
+  "keywords": [
+    "arboretum",
+    "git",
+    "worktree",
+    "claude",
+    "ide",
+    "electron",
+    "desktop"
+  ],
   "license": "MIT",
   "author": {
     "name": "Johan LEROY",

packages/desktop/scripts/fetch-node.mjs

@@ -2,7 +2,7 @@
 // SHA256. Le daemon tourne SUR ce Node (pas celui d'Electron) pour garantir node:sqlite sans flag
 // et l'ABI node-pty attendue (prefixe `node.`). Options : --platform / --arch (défaut : hôte).
 import { execFileSync } from 'node:child_process';
-import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { cpSync, existsSync, mkdirSync, readdirSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import { createHash } from 'node:crypto';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -41,9 +41,45 @@ if (expected !== actual) throw new Error(`SHA256 mismatch pour ${name}.${ext}`);
 
 const archive = join(BUILD, `${name}.${ext}`);
 writeFileSync(archive, tarball);
-if (ext === 'zip') execFileSync('unzip', ['-q', archive, '-d', BUILD], { stdio: 'inherit' });
+// `tar` de Windows 10+ (bsdtar) lit aussi les .zip : une seule commande pour les trois plateformes,
-else execFileSync('tar', ['-xJf', archive, '-C', BUILD], { stdio: 'inherit' });
+// là où `unzip` n'existe pas sur un Windows standard.
-// aplatir node-vX-os-arch/ -> build/node/
+execFileSync('tar', [ext === 'zip' ? '-xf' : '-xJf', archive, '-C', BUILD], { stdio: 'inherit' });
-execFileSync('bash', ['-c', `cp -R "${join(BUILD, name)}/." "${NODE_DIR}/" && rm -rf "${join(BUILD, name)}" "${archive}"`], { stdio: 'inherit' });
 
-console.log(`fetch-node: Node ${NODE_VERSION} (${OS}-${arch}) -> build/node`);
+// Aplatir node-vX-os-arch/ -> build/node/ avec l'API Node (l'ancien `bash -c 'cp -R … && rm -rf …'`
+// rendait ce script inexécutable sur Windows, où il n'y a ni bash, ni cp, ni rm).
+const extracted = join(BUILD, name);
+cpSync(extracted, NODE_DIR, { recursive: true });
+rmSync(extracted, { recursive: true, force: true });
+rmSync(archive, { force: true });
+
+// --- élagage ---------------------------------------------------------------------------------
+// On n'embarque QUE de quoi exécuter le daemon. La distribution complète pèse ~205 Mo, dont l'essentiel
+// est inutile ici : en-têtes de compilation, docs, et surtout npm/corepack (le `npm install --omit=dev`
+// du daemon a lieu au BUILD, jamais au runtime).
+const PRUNE = ['include', 'share', 'lib', 'CHANGELOG.md', 'README.md'];
+for (const rel of PRUNE) rmSync(join(NODE_DIR, rel), { recursive: true, force: true });
+// les shims npm/npx/corepack (POSIX : bin/, Windows : racine)
+for (const shim of ['npm', 'npx', 'corepack', 'npm.cmd', 'npx.cmd', 'corepack.cmd', 'npm.ps1', 'npx.ps1', 'corepack.ps1']) {
+  rmSync(join(NODE_DIR, 'bin', shim), { force: true });
+  rmSync(join(NODE_DIR, shim), { force: true });
+}
+
+// Garde-fou : le binaire doit avoir survécu à l'élagage.
+const nodeBin = platform === 'win32' ? join(NODE_DIR, 'node.exe') : join(NODE_DIR, 'bin', 'node');
+if (!existsSync(nodeBin)) throw new Error(`binaire Node introuvable apres extraction: ${nodeBin}`);
+
+console.log(`fetch-node: Node ${NODE_VERSION} (${OS}-${arch}) -> build/node (${duMb(NODE_DIR)} Mo)`);
+
+/** Taille approximative d'un dossier, en Mo (diagnostic de l'élagage). */
+function duMb(dir) {
+  let total = 0;
+  const walk = (d) => {
+    for (const entry of readdirSync(d, { withFileTypes: true })) {
+      const p = join(d, entry.name);
+      if (entry.isDirectory()) walk(p);
+      else if (entry.isFile()) total += statSync(p).size;
+    }
+  };
+  walk(dir);
+  return Math.round(total / 1024 / 1024);
+}

packages/desktop/scripts/prepare-server.mjs

@@ -20,8 +20,12 @@ const arg = (name) => args.find((a) => a.startsWith(`--${name}=`))?.split('=')[1
 const platform = arg('platform');
 const arch = arg('arch');
 
+// Sur Windows, `npm`/`npx` sont des shims `.cmd` : `execFileSync` ne les résout pas (ENOENT), il faut
+// leur nom complet. Sans ça, tout le chemin de build documenté échouait sur un hôte Windows.
+const winShim = (cmd) => (process.platform === 'win32' && (cmd === 'npm' || cmd === 'npx') ? `${cmd}.cmd` : cmd);
+
 const run = (cmd, cmdArgs, cwd, env) =>
-  execFileSync(cmd, cmdArgs, { cwd, stdio: 'inherit', env: { ...process.env, ...env } });
+  execFileSync(winShim(cmd), cmdArgs, { cwd, stdio: 'inherit', env: { ...process.env, ...env } });
 
 rmSync(SERVER_DIR, { recursive: true, force: true });
 mkdirSync(SERVER_DIR, { recursive: true });

packages/desktop/src/main/app-menu.ts

@@ -0,0 +1,82 @@
+import { app, Menu, shell, type MenuItemConstructorOptions } from 'electron';
+
+/**
+ * Menu applicatif. Sur macOS il n'est PAS optionnel : sans lui, aucun raccourci d'édition n'est
+ * enregistré et ⌘C / ⌘V / ⌘A / ⌘Z ne fonctionnent nulle part dans l'app (y compris dans les terminaux
+ * et l'éditeur). Sur Linux/Windows on garde un menu minimal, masqué par défaut (`setMenuBarVisibility`
+ * côté fenêtre) mais qui enregistre quand même les accélérateurs standard.
+ */
+export function installAppMenu(opts: { url: string; onQuit: () => void }): void {
+  const isMac = process.platform === 'darwin';
+
+  const macAppMenu: MenuItemConstructorOptions[] = isMac
+    ? [
+        {
+          label: app.name,
+          submenu: [
+            { role: 'about' },
+            { type: 'separator' },
+            { role: 'hide' },
+            { role: 'hideOthers' },
+            { role: 'unhide' },
+            { type: 'separator' },
+            { label: 'Quit Arboretum', accelerator: 'Command+Q', click: opts.onQuit },
+          ],
+        },
+      ]
+    : [];
+
+  const template: MenuItemConstructorOptions[] = [
+    ...macAppMenu,
+    {
+      label: 'File',
+      submenu: isMac ? [{ role: 'close' }] : [{ label: 'Quit', accelerator: 'Ctrl+Q', click: opts.onQuit }],
+    },
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        { role: 'selectAll' },
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        { type: 'separator' },
+        { role: 'resetZoom' },
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+        { role: 'toggleDevTools' },
+      ],
+    },
+    {
+      label: 'Window',
+      submenu: isMac ? [{ role: 'minimize' }, { role: 'zoom' }, { type: 'separator' }, { role: 'front' }] : [{ role: 'minimize' }],
+    },
+    {
+      role: 'help',
+      submenu: [
+        { label: 'Open in browser', click: () => void shell.openExternal(opts.url) },
+        { label: 'Website', click: () => void shell.openExternal('https://git-arboretum.com') },
+      ],
+    },
+  ];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+
+  app.setAboutPanelOptions({
+    applicationName: 'Arboretum',
+    applicationVersion: app.getVersion(),
+    copyright: 'Copyright © 2026 Johan Leroy',
+    website: 'https://git-arboretum.com',
+  });
+}

packages/desktop/src/main/env.ts

@@ -6,10 +6,30 @@ import { homedir } from 'node:os';
 // `claude`. Le réglage `claude_bin_path` (UI) reste le filet de secours.
 export function buildChildEnv(extra: Record<string, string>): NodeJS.ProcessEnv {
   const env: NodeJS.ProcessEnv = { ...process.env, ...extra };
-  if (process.platform !== 'win32') {
+  const extras = pathExtras(process.platform, env);
-    const extras = ['/usr/local/bin', '/opt/homebrew/bin', join(homedir(), '.local', 'bin'), '/usr/bin', '/bin'];
+  if (extras.length > 0) {
     const current = env.PATH ? env.PATH.split(delimiter) : [];
     env.PATH = [...new Set([...extras, ...current])].join(delimiter);
   }
   return env;
 }
+
+/**
+ * Répertoires à ajouter au PATH du daemon, par plateforme. Windows était entièrement ignoré : or
+ * l'installeur natif de Claude Code se pose dans %LOCALAPPDATA%\Programs et npm global dans
+ * %APPDATA%\npm, deux emplacements absents du PATH d'une app lancée depuis le menu Démarrer.
+ */
+export function pathExtras(platform: NodeJS.Platform, env: NodeJS.ProcessEnv = process.env): string[] {
+  const home = env.USERPROFILE ?? homedir();
+  if (platform === 'win32') {
+    const local = env.LOCALAPPDATA ?? join(home, 'AppData', 'Local');
+    const roaming = env.APPDATA ?? join(home, 'AppData', 'Roaming');
+    return [
+      join(local, 'Programs'),
+      join(local, 'Programs', 'claude'),
+      join(roaming, 'npm'),
+      join(home, '.local', 'bin'),
+    ];
+  }
+  return ['/usr/local/bin', '/opt/homebrew/bin', join(home, '.local', 'bin'), '/usr/bin', '/bin'];
+}

packages/desktop/src/main/main.ts

@@ -4,6 +4,7 @@ import { startDaemon, type DaemonHandle } from './daemon';
 import { seedSessionCookie } from './auth';
 import { loadWindowState, saveWindowState } from './window-state';
 import { createTray } from './tray';
+import { installAppMenu } from './app-menu';
 import { initUpdater } from './updater';
 import { resolveIconPath } from './paths';
 
@@ -39,10 +40,15 @@ async function bootstrap(): Promise<void> {
   daemon = await startDaemon({ dataDir, port: PORT, onLog: (l) => process.stdout.write(l) });
   await seedSessionCookie(PARTITION, daemon.url, daemon.token);
   createWindow(daemon.url);
+  installAppMenu({ url: daemon.url, onQuit: quitApp });
   tray = createTray({ show: showWindow, quit: quitApp });
   initUpdater();
 }
 
+// macOS : la fenêtre est cachée (pas détruite) à la fermeture. Sans ce handler, cliquer l'icône du
+// Dock ne la ramenait jamais et l'app paraissait bloquée en arrière-plan.
+app.on('activate', showWindow);
+
 function showWindow(): void {
   if (!win) return;
   if (win.isMinimized()) win.restore();

packages/desktop/src/main/paths.ts

@@ -1,5 +1,6 @@
 import { app } from 'electron';
 import { join } from 'node:path';
+import { existsSync } from 'node:fs';
 
 // Résolution des chemins runtime : dev (depuis le repo) vs packagé (extraResources).
 // __dirname pointe sur dist/ (bundle esbuild) une fois construit.
@@ -23,6 +24,19 @@ export function resolveIconPath(): string {
     : join(__dirname, '..', 'resources', 'icon.png');
 }
 
+/**
+ * Icône de barre système. macOS exige une image « template » (monochrome) dans la barre de menus ;
+ * ailleurs on retombe sur le logo couleur. `null` si l'asset n'est pas présent (build sans
+ * régénération des icônes) : l'appelant utilise alors resolveIconPath().
+ */
+export function resolveTrayIconPath(): string | null {
+  if (process.platform !== 'darwin') return null;
+  const path = app.isPackaged
+    ? join(process.resourcesPath, 'trayTemplate.png')
+    : join(__dirname, '..', 'resources', 'trayTemplate.png');
+  return existsSync(path) ? path : null;
+}
+
 /** Binaire Node qui exécute le daemon (>= 22.16 : node:sqlite + ABI node-pty maîtrisé). */
 export function resolveNodeBin(): string {
   if (app.isPackaged) {

packages/desktop/src/main/tray.ts

@@ -1,11 +1,17 @@
 import { Menu, Tray, nativeImage } from 'electron';
 import { isAutoStartEnabled, setAutoStart } from './autostart';
-import { resolveIconPath } from './paths';
+import { resolveIconPath, resolveTrayIconPath } from './paths';
 
 /** Icône de barre système : ouvrir la fenêtre, basculer le lancement au login, quitter. */
 export function createTray(opts: { show: () => void; quit: () => void }): Tray {
-  const image = nativeImage.createFromPath(resolveIconPath());
+  // macOS exige une image TEMPLATE (monochrome + alpha) dans la barre de menus : elle s'inverse
-  const tray = new Tray(image.isEmpty() ? nativeImage.createEmpty() : image.resize({ width: 18, height: 18 }));
+  // automatiquement selon le thème système. Une icône couleur y est illisible. Windows attend 16px.
+  const trayPath = resolveTrayIconPath() ?? resolveIconPath();
+  const raw = nativeImage.createFromPath(trayPath);
+  const size = process.platform === 'darwin' ? 16 : process.platform === 'win32' ? 16 : 18;
+  const image = raw.isEmpty() ? nativeImage.createEmpty() : raw.resize({ width: size, height: size });
+  if (process.platform === 'darwin' && !image.isEmpty()) image.setTemplateImage(true);
+  const tray = new Tray(image);
   tray.setToolTip('Arboretum');
 
   const buildMenu = (): void => {

packages/server/CHANGELOG.md

@@ -0,0 +1,71 @@
+# Changelog
+
+Notable changes to `@johanleroy/git-arboretum` (the Arboretum daemon). The VS Code
+extension keeps its own changelog in `packages/vscode/CHANGELOG.md`.
+
+## 3.4.0
+
+Visibility release: the real-time machinery is now actually armed, worktrees show what they are worth,
+and history is served. Fully additive, no protocol version bump.
+
+- **Real-time that no longer depends on which panel is open.** A live session now pins the FS watcher of
+  its worktree, so a worktree an agent is writing into refreshes on its own even when nobody is looking at
+  it (`pinSession` existed but was never called). On the client side, `watch` subscriptions moved out of
+  the Git panel, which was unmounted as soon as you left its tab, taking the app's only subscription with
+  it; they now follow what you actually look at (active worktree plus expanded repositories).
+- **Reconnection no longer loses state.** The protocol replays nothing, so every event missed during a
+  WebSocket outage was lost for good. The client reloads repos, worktrees, sessions and settings whenever
+  the connection comes back.
+- **Session correlation by containment.** A terminal started in a *subdirectory* of a worktree (which
+  "Start the project" allows) and a group session covering a worktree through `--add-dir` are now listed
+  under that worktree, instead of vanishing from the tree. The rule lives in `@arboretum/shared`, shared by
+  the daemon, the web UI and the VS Code extension; the most specific worktree wins.
+- **History API.** `GET /api/v1/repos/:id/worktrees/log` serves the branch commits with the count of
+  unpushed ones, and `GET .../worktrees/diff?commit=<hash>` the full diff of a commit (hash strictly
+  validated, same size limits as file diffs). The UI unfolds them in place under the Git panel.
+- **Full git counters where they matter.** `ahead`/`behind`, staged, unstaged and conflict counts were
+  only visible in the status bar, for the active worktree. They are now on every worktree row of the tree
+  and of the Groups panel, with upstream and last commit in the tooltip. `locked`, `prunable` and an
+  invalid repository are surfaced too.
+- **Groups show their composition.** A group lists its repositories with their worktrees and git state,
+  its sessions (live and recent) and the directories a group session spans. Its colour tints those repos
+  in the explorer.
+- **Actionable `403 BAD_ORIGIN`.** The error now names the exact `--allow-origin` flag to add, and logs
+  it. It is the first wall of any LAN or reverse-proxy access.
+- **Windows support in the daemon.** `where.exe` for CLI discovery, PowerShell as the project launch
+  shell, a `.cmd` askpass so token-based HTTPS clone/push works, `taskkill /T` for process-tree
+  termination, `%APPDATA%` for the data directory, and `arboretum install` registering a scheduled task.
+- **UI fixes.** Error toasts were painted behind modals (they are sticky, so they piled up invisible);
+  on mobile, opening a terminal or switching activity had no visible effect; the dock could push the
+  status bar out of the viewport; panels showed "nothing here" instead of a loading or error state;
+  modals had no dialog role, focus trap or focus restore; the splitters are now keyboard operable; diff
+  line numbers stay pinned while scrolling.
+
+## 3.3.0
+
+"Start the project": boot a project's long-running commands (dev server, API, database) in one click. Fully additive, no protocol or API change.
+
+- **Launch commands per repo.** A repo now carries reusable start commands (label, shell command, optional subdirectory), persisted as JSON and edited from the dashboard. They can be auto-detected from `package.json` scripts, a `Procfile` or a `docker-compose` file.
+- **One terminal per command.** `POST /api/v1/repos/:id/launch` resolves the target worktree server-side (the client never passes a raw path) and opens one managed terminal per enabled command, all sharing a launch run id so you can stop the whole set in one action. Each command runs in your interactive login shell (so `npm`, `docker`, nvm/asdf are on `PATH`) and the shell stays live after the command exits, keeping failures on screen.
+- **Surfaces.** Start a project from a repo or worktree menu, the sessions panel or the command palette. The VS Code extension exposes it too (see its changelog).
+
+## 3.2.0
+
+Visual overhaul: the web UI adopts the "Emerald" design system and gains a full theme system. No protocol or API change (fully additive, backward compatible).
+
+- **Light and dark themes.** A `light` / `dark` / `system` toggle (in the activity bar and in Settings), remembered across sessions and applied before the first paint (no flash of the wrong theme). The Monaco editor, the xterm terminals (now with a full 16-color ANSI palette) and the diffs all re-theme live.
+- **Emerald design language.** Self-hosted Inter + JetBrains Mono, an emerald accent, consistent rounded corners, mono status pills and dots, refined focus and text selection, thin scrollbars, and a terminal signature motif.
+- **Marketing site aligned.** git-arboretum.com now mirrors the app: the same tokens, fonts and theme toggle, with up-to-date IDE mockups.
+
+## 3.1.0
+
+- The IDE becomes the single shell of the web UI; the legacy worktree-first dashboard is retired as the default surface (still reachable at `/dashboard`).
+- Desktop app metadata fixes (window logo on Debian / Wayland).
+
+## 3.0.0
+
+- **Multi-project IDE** milestone: one workspace (route `/ide`, the default on desktop) holding every open project at once, a unified project / worktree / session tree, a tabbed Monaco editor with inline diffs, docked session terminals, and Git / Sessions / Groups panels. Ships as a **native Electron desktop app** (Linux, Windows, macOS) alongside the same web UI.
+
+## 2.0.0
+
+- "Real worktree IDE" foundations: a pure git engine, a real-time file-system watcher, the file API, selective staging / discard / amend / fetch / pull, automatic session archival, real-time settings sync, and encrypted remote git services (GitHub / GitLab / Gitea) with HTTPS clone.

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@johanleroy/git-arboretum",
-  "version": "3.1.0",
+  "version": "3.4.0",
-  "description": "Self-hosted web dashboard for git worktrees and the Claude Code sessions running on them",
+  "description": "Self-hosted multi-project AI IDE for git worktrees and the Claude Code sessions running on them",
   "license": "MIT",
   "type": "module",
   "author": "Johan LEROY <contact@johanleroy.fr>",

packages/server/scripts/acceptance-p13.mjs

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+// Acceptation P13 (sans navigateur, sans quota Claude) : « Démarrer le projet » (lancement
+// multi-terminaux). Vrai daemon + vrai repo git tmp + vrai client WS. Couvre : exposition/persistance
+// de launch_commands (+ broadcast repo_update), auto-détection (package.json/Procfile/compose),
+// lancement d'un terminal par commande activée (même launchRunId, command bash, titre = label),
+// auto-type réellement exécuté (marqueur dans le ring) dans un shell INTERACTIF (survit à la commande),
+// bornage anti-traversal du cwd + sous-dossier valide, sélection par commandIds, filtrage des désactivées,
+// et « tout arrêter ».
+import { spawn, execFileSync } from 'node:child_process';
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const WebSocket = require('ws');
+
+const PORT = 7553;
+const ORIGIN = `http://127.0.0.1:${PORT}`;
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const serverDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+const results = [];
+const check = (name, ok, detail = '') => {
+  results.push({ name, ok, detail });
+  console.log(`${ok ? '✅' : '❌'} ${name}${detail ? `: ${detail}` : ''}`);
+};
+
+const tmp = mkdtempSync(join(tmpdir(), 'arb-accept-p13-'));
+const repo = join(tmp, 'demo-repo');
+mkdirSync(repo, { recursive: true });
+mkdirSync(join(repo, 'sub'), { recursive: true });
+const git = (...args) => execFileSync('git', args, { cwd: repo, stdio: 'pipe' });
+git('init', '-b', 'main');
+git('config', 'user.email', 'test@arboretum.dev');
+git('config', 'user.name', 'Test');
+// Fichiers pour l'auto-détection.
+writeFileSync(join(repo, 'package.json'), JSON.stringify({ scripts: { dev: 'echo dev', build: 'echo build', test: 'echo test' } }));
+writeFileSync(join(repo, 'Procfile'), 'web: echo procweb\n');
+writeFileSync(join(repo, 'docker-compose.yml'), 'services: {}\n');
+writeFileSync(join(repo, 'README.md'), '# demo\n');
+git('add', '-A');
+git('commit', '-m', 'init');
+
+const srv = spawn(
+  'node',
+  [join(serverDir, 'dist', 'index.js'), '--port', String(PORT), '--db', join(tmp, 'a.db'), '--claude-home', join(tmp, 'claude'), '--no-discover'],
+  { env: { ...process.env, ARBORETUM_LOG: 'warn' }, stdio: ['ignore', 'pipe', 'pipe'] },
+);
+let srvOut = '';
+srv.stdout.on('data', (d) => (srvOut += d));
+srv.stderr.on('data', (d) => (srvOut += d));
+
+// Client WS multiplexé (contrôle JSON + sortie binaire → ring décodé en latin1).
+function wsClient(cookie) {
+  const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws`, { headers: { Origin: ORIGIN, Cookie: cookie } });
+  ws.binaryType = 'arraybuffer';
+  const state = { msgs: [], outputs: new Map() };
+  ws.on('message', (data, isBinary) => {
+    if (!isBinary) {
+      state.msgs.push(JSON.parse(String(data)));
+      return;
+    }
+    const buf = Buffer.from(data);
+    const type = buf.readUInt8(0);
+    const channel = buf.readUInt32LE(1);
+    const payload = buf.subarray(5);
+    if (type === 0x02) state.outputs.set(channel, payload.toString('latin1'));
+    else state.outputs.set(channel, ((state.outputs.get(channel) ?? '') + payload.toString('latin1')).slice(-200000));
+  });
+  const waitMsg = async (pred, timeout = 8000) => {
+    const t0 = Date.now();
+    while (Date.now() - t0 < timeout) {
+      const m = state.msgs.find(pred);
+      if (m) return m;
+      await sleep(50);
+    }
+    return null;
+  };
+  return { ws, state, waitMsg, send: (m) => ws.send(JSON.stringify(m)) };
+}
+
+const j = (path, method, cookie, body) =>
+  fetch(`${ORIGIN}${path}`, {
+    method,
+    headers: { Origin: ORIGIN, Cookie: cookie, ...(body ? { 'Content-Type': 'application/json' } : {}) },
+    ...(body ? { body: JSON.stringify(body) } : {}),
+  });
+
+try {
+  await sleep(1500);
+  const token = /arb_[0-9a-f]+/.exec(srvOut)?.[0];
+  check('boot + token bootstrap', !!token);
+
+  const login = await fetch(`${ORIGIN}/api/v1/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Origin: ORIGIN },
+    body: JSON.stringify({ token }),
+  });
+  const cookie = login.headers.get('set-cookie')?.split(';')[0] ?? '';
+  check('login → cookie', login.status === 200 && cookie.startsWith('arb_session='));
+
+  // Enregistre le repo.
+  const reg = await j('/api/v1/repos', 'POST', cookie, { path: repo });
+  const repoId = (await reg.json()).repo?.id;
+  check('register repo', reg.status === 201 && !!repoId);
+
+  // launchCommands vide par défaut.
+  const list0 = await (await j('/api/v1/repos', 'GET', cookie)).json();
+  const r0 = list0.repos.find((r) => r.id === repoId);
+  check('launchCommands défaut = []', Array.isArray(r0?.launchCommands) && r0.launchCommands.length === 0);
+
+  // Auto-détection.
+  const det = await (await j(`/api/v1/repos/${repoId}/launch/detect`, 'GET', cookie)).json();
+  const runs = (det.suggestions ?? []).map((s) => s.run);
+  check(
+    'detect : package.json + Procfile + docker-compose',
+    runs.includes('npm run dev') && runs.includes('npm run build') && runs.some((r) => r.startsWith('echo procweb')) && runs.includes('docker compose up'),
+    `${runs.length} suggestions`,
+  );
+  check('detect : dev activé, build désactivé (heuristique)', (det.suggestions.find((s) => s.run === 'npm run dev')?.enabled === true) && (det.suggestions.find((s) => s.run === 'npm run build')?.enabled === false));
+
+  // Abonnement worktrees pour vérifier le broadcast repo_update.
+  const c1 = wsClient(cookie);
+  await new Promise((res, rej) => (c1.ws.on('open', res), c1.ws.on('error', rej)));
+  c1.send({ type: 'hello', protocol: 1 });
+  await c1.waitMsg((m) => m.type === 'hello_ok');
+  c1.send({ type: 'sub', topics: ['worktrees', 'sessions'] });
+  await sleep(200);
+
+  const nonce = String(token).slice(-6);
+  const commands = [
+    { id: 'c-web', label: 'web', run: `echo ARB_LAUNCH_OK_${nonce}; echo ARB_FLAGS_$-; sleep 30`, enabled: true },
+    { id: 'c-api', label: 'api', run: 'sleep 30', enabled: true },
+    { id: 'c-build', label: 'build', run: 'echo SHOULD_NOT_RUN', enabled: false },
+    { id: 'c-sub', label: 'sub', run: 'pwd; sleep 30', cwd: 'sub', enabled: false },
+    { id: 'c-esc', label: 'esc', run: 'pwd', cwd: '../../etc', enabled: false },
+  ];
+  const patch = await j(`/api/v1/repos/${repoId}`, 'PATCH', cookie, { launchCommands: commands });
+  const patched = (await patch.json()).repo;
+  check('PATCH launchCommands persiste', patch.status === 200 && patched.launchCommands.length === 5);
+  const evt = await c1.waitMsg((m) => m.type === 'repo_update' && m.repo?.id === repoId && (m.repo.launchCommands?.length ?? 0) === 5);
+  check('broadcast repo_update porte launchCommands', !!evt);
+
+  // Lancement par défaut (commandes activées : web, api).
+  const launch = await j(`/api/v1/repos/${repoId}/launch`, 'POST', cookie, {});
+  const lr = await launch.json();
+  check('POST /launch → N sessions (activées only)', launch.status === 201 && lr.sessions?.length === 2, `${lr.sessions?.length} sessions`);
+  const runIds = new Set(lr.sessions.map((s) => s.launchRunId));
+  check('même launchRunId sur tous les terminaux', runIds.size === 1 && [...runIds][0], [...runIds][0]);
+  check('command = bash + titre = label', lr.sessions.every((s) => s.command === 'bash') && lr.sessions.map((s) => s.title).sort().join(',') === 'api,web');
+  const launchRunId = [...runIds][0];
+
+  // Attache au terminal « web » → l'auto-type a été exécuté (marqueur) dans un shell INTERACTIF.
+  const webSid = lr.sessions.find((s) => s.title === 'web').id;
+  c1.send({ type: 'attach', sessionId: webSid, mode: 'interactive', cols: 120, rows: 32 });
+  const att = await c1.waitMsg((m) => m.type === 'attached' && m.sessionId === webSid);
+  await sleep(1200);
+  const out = c1.state.outputs.get(att.channel) ?? '';
+  check('auto-type exécuté (marqueur dans le ring)', out.includes(`ARB_LAUNCH_OK_${nonce}`), `${out.length} o`);
+  check('shell interactif (flags $- contiennent i)', /ARB_FLAGS_[a-zA-Z]*i/.test(out));
+
+  // Le shell survit à la commande (sleep encore vivant).
+  const sess1 = await (await j('/api/v1/sessions', 'GET', cookie)).json();
+  const apiSid = lr.sessions.find((s) => s.title === 'api').id;
+  check('shell survivant (session live)', sess1.sessions.find((s) => s.id === apiSid)?.live === true);
+
+  // Sélection par commandIds (web seul).
+  const one = await (await j(`/api/v1/repos/${repoId}/launch`, 'POST', cookie, { commandIds: ['c-web'] })).json();
+  check('commandIds : sous-ensemble', one.sessions?.length === 1 && one.sessions[0].title === 'web');
+
+  // Sous-dossier valide : pwd sous le worktree.
+  const subRes = await (await j(`/api/v1/repos/${repoId}/launch`, 'POST', cookie, { commandIds: ['c-sub'] })).json();
+  const subSid = subRes.sessions?.[0]?.id;
+  c1.send({ type: 'attach', sessionId: subSid, mode: 'interactive', cols: 120, rows: 32 });
+  const attSub = await c1.waitMsg((m) => m.type === 'attached' && m.sessionId === subSid);
+  await sleep(800);
+  check('cwd sous-dossier borné (pwd dans /sub)', (c1.state.outputs.get(attSub.channel) ?? '').includes('/sub'));
+
+  // Traversal rejeté : cwd ../../etc.
+  const esc = await j(`/api/v1/repos/${repoId}/launch`, 'POST', cookie, { commandIds: ['c-esc'] });
+  check('cwd traversal rejeté (4xx)', esc.status >= 400 && esc.status < 500, `status ${esc.status}`);
+
+  // « Tout arrêter » : kill de tous les terminaux du launchRunId initial.
+  const before = (await (await j('/api/v1/sessions', 'GET', cookie)).json()).sessions.filter((s) => s.launchRunId === launchRunId);
+  for (const s of before) await j(`/api/v1/sessions/${s.id}`, 'DELETE', cookie);
+  // Un shell interactif ignore SIGTERM (standard) → mort garantie au SIGKILL après le délai de grâce (~5 s).
+  await sleep(6500);
+  const after = (await (await j('/api/v1/sessions', 'GET', cookie)).json()).sessions.filter((s) => s.launchRunId === launchRunId);
+  check('tout arrêter → terminaux non vivants', before.length === 2 && after.length === 2 && after.every((s) => !s.live));
+
+  c1.ws.close();
+} catch (err) {
+  check('exception', false, String(err && err.stack ? err.stack : err));
+} finally {
+  srv.kill('SIGTERM');
+  await sleep(1500);
+  rmSync(tmp, { recursive: true, force: true });
+  const failed = results.filter((r) => !r.ok);
+  console.log(failed.length === 0 ? '\nACCEPTANCE P13: ALL GREEN' : `\nACCEPTANCE P13: ${failed.length} FAILURE(S)`);
+  process.exit(failed.length === 0 ? 0 : 1);
+}

packages/server/scripts/acceptance-p14.mjs

@@ -0,0 +1,174 @@
+#!/usr/bin/env node
+// Acceptation P14 (sans navigateur, sans quota Claude) : temps réel « armé ». Vrai daemon + vrai repo
+// git tmp + vrai client WS. Couvre les trois trous de visibilité corrigés :
+//   1. une session vivante épingle le watcher FS de SON worktree → les compteurs git d'un worktree
+//      secondaire restent temps réel même si AUCUN client ne le regarde (avant : point « modifié » figé
+//      sur le dernier listing REST) ;
+//   2. corrélation par contenance : un terminal lancé dans un SOUS-répertoire du worktree y est
+//      rattaché (« Démarrer le projet »), et pas au checkout principal ;
+//   3. `watch` explicite → `worktree_changes` ciblé sur ce worktree secondaire.
+import { spawn, execFileSync } from 'node:child_process';
+import { mkdtempSync, rmSync, writeFileSync, mkdirSync, appendFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const WebSocket = require('ws');
+
+const PORT = 7554;
+const ORIGIN = `http://127.0.0.1:${PORT}`;
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const serverDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+const results = [];
+const check = (name, ok, detail = '') => {
+  results.push({ name, ok, detail });
+  console.log(`${ok ? '✅' : '❌'} ${name}${detail ? `: ${detail}` : ''}`);
+};
+
+const tmp = mkdtempSync(join(tmpdir(), 'arb-accept-p14-'));
+const repo = join(tmp, 'demo-repo');
+mkdirSync(repo, { recursive: true });
+const git = (...args) => execFileSync('git', args, { cwd: repo, stdio: 'pipe' });
+git('init', '-b', 'main');
+git('config', 'user.email', 'test@arboretum.dev');
+git('config', 'user.name', 'Test');
+mkdirSync(join(repo, 'packages', 'api'), { recursive: true });
+writeFileSync(join(repo, 'README.md'), '# demo\n');
+writeFileSync(join(repo, 'packages', 'api', 'index.js'), 'console.log(1)\n');
+git('add', '-A');
+git('commit', '-m', 'init');
+
+const srv = spawn(
+  'node',
+  [join(serverDir, 'dist', 'index.js'), '--port', String(PORT), '--db', join(tmp, 'a.db'), '--claude-home', join(tmp, 'claude'), '--no-discover'],
+  { env: { ...process.env, ARBORETUM_LOG: 'warn' }, stdio: ['ignore', 'pipe', 'pipe'] },
+);
+let srvOut = '';
+srv.stdout.on('data', (d) => (srvOut += d));
+srv.stderr.on('data', (d) => (srvOut += d));
+
+function wsClient(cookie) {
+  const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws`, { headers: { Origin: ORIGIN, Cookie: cookie } });
+  const state = { msgs: [] };
+  ws.on('message', (data, isBinary) => {
+    if (!isBinary) state.msgs.push(JSON.parse(String(data)));
+  });
+  const waitMsg = async (pred, timeout = 8000) => {
+    const t0 = Date.now();
+    while (Date.now() - t0 < timeout) {
+      const m = state.msgs.find(pred);
+      if (m) return m;
+      await sleep(50);
+    }
+    return null;
+  };
+  return { ws, state, waitMsg, send: (m) => ws.send(JSON.stringify(m)) };
+}
+
+const j = (path, method, cookie, body) =>
+  fetch(`${ORIGIN}${path}`, {
+    method,
+    headers: { Origin: ORIGIN, Cookie: cookie, ...(body ? { 'Content-Type': 'application/json' } : {}) },
+    ...(body ? { body: JSON.stringify(body) } : {}),
+  });
+
+try {
+  await sleep(1500);
+  const token = /arb_[0-9a-f]+/.exec(srvOut)?.[0];
+  check('boot + token bootstrap', !!token);
+
+  const login = await fetch(`${ORIGIN}/api/v1/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Origin: ORIGIN },
+    body: JSON.stringify({ token }),
+  });
+  const cookie = login.headers.get('set-cookie')?.split(';')[0] ?? '';
+  check('login → cookie', login.status === 200);
+
+  const c = wsClient(cookie);
+  await new Promise((res, rej) => (c.ws.on('open', res), c.ws.on('error', rej)));
+  c.send({ type: 'hello', protocol: 1 });
+  await c.waitMsg((m) => m.type === 'hello_ok');
+  c.send({ type: 'sub', topics: ['worktrees', 'sessions'] });
+
+  const addRepo = await j('/api/v1/repos', 'POST', cookie, { path: repo });
+  const repoId = (await addRepo.json()).repo.id;
+  check('POST /repos → 201', addRepo.status === 201 && !!repoId);
+
+  // ---- worktree secondaire (feature) avec un sous-répertoire ----
+  const created = await j(`/api/v1/repos/${repoId}/worktrees`, 'POST', cookie, { branch: 'feature/live', runHooks: false });
+  const wtPath = (await created.json()).worktree?.path;
+  check('POST /worktrees → worktree secondaire créé', created.status === 201 && !!wtPath);
+  const subDir = join(wtPath, 'packages', 'api');
+
+  // ---- 2. corrélation par contenance : session lancée DANS un sous-répertoire ----
+  const sess = await j('/api/v1/sessions', 'POST', cookie, { cwd: subDir, command: 'bash' });
+  const session = (await sess.json()).session;
+  check('POST /sessions (cwd = sous-répertoire) → 201', sess.status === 201 && !!session?.id);
+  await sleep(600);
+
+  const list = await (await j('/api/v1/worktrees', 'GET', cookie)).json();
+  const secondary = (list.worktrees ?? []).find((w) => w.path === wtPath);
+  const main = (list.worktrees ?? []).find((w) => w.isMain);
+  check(
+    'la session du sous-répertoire est rattachée au worktree secondaire',
+    (secondary?.sessions ?? []).some((s) => s.id === session.id),
+    `sessions=${(secondary?.sessions ?? []).length}`,
+  );
+  check(
+    'elle n’est PAS rattachée au checkout principal (désambiguïsation)',
+    !(main?.sessions ?? []).some((s) => s.id === session.id),
+  );
+
+  // ---- 1. session vivante → watcher épinglé SANS aucun watch client ----
+  // Aucun `watch` n'a été envoyé : seul `pinSession` peut produire cet événement.
+  await sleep(900); // laisse chokidar finir son scan initial
+  c.state.msgs.length = 0;
+  const t0 = Date.now();
+  appendFileSync(join(wtPath, 'README.md'), 'edited by the agent\n');
+  const upd = await c.waitMsg((m) => m.type === 'worktree_update' && m.worktree?.path === wtPath && m.worktree?.git?.dirtyCount > 0, 6000);
+  check('worktree secondaire non regardé : worktree_update reçu (pinSession)', !!upd, upd ? `${Date.now() - t0}ms` : 'timeout');
+  check('les compteurs git du worktree secondaire sont frais', (upd?.worktree?.git?.unstagedCount ?? 0) >= 1);
+
+  // ---- pas de worktree_changes sans watch (le détail reste ciblé) ----
+  const changesWithoutWatch = c.state.msgs.find((m) => m.type === 'worktree_changes');
+  check('sans watch : aucun worktree_changes (push ciblé préservé)', !changesWithoutWatch);
+
+  // ---- 3. watch explicite → worktree_changes ciblé ----
+  c.send({ type: 'watch', repoId, path: wtPath });
+  await sleep(900);
+  c.state.msgs.length = 0;
+  writeFileSync(join(wtPath, 'live.txt'), 'live\n');
+  const changesMsg = await c.waitMsg((m) => m.type === 'worktree_changes' && m.path === wtPath, 6000);
+  check('watch → worktree_changes ciblé sur le worktree secondaire', !!changesMsg);
+
+  c.send({ type: 'unwatch', repoId, path: wtPath });
+  await j(`/api/v1/sessions/${session.id}`, 'DELETE', cookie);
+  await sleep(500);
+
+  // ---- contraposée : le temps réel reste PILOTÉ (ni session, ni watch → pas de surveillance) ----
+  // Un watcher déjà ouvert est volontairement conservé en cache (évincé par la LRU) : on vérifie donc
+  // sur un worktree neuf, jamais épinglé ni regardé, qu'aucun événement n'est émis.
+  const idle = await j(`/api/v1/repos/${repoId}/worktrees`, 'POST', cookie, { branch: 'feature/idle', runHooks: false });
+  const idlePath = (await idle.json()).worktree?.path;
+  check('POST /worktrees → second worktree (sans session)', idle.status === 201 && !!idlePath);
+  await sleep(700);
+  c.state.msgs.length = 0;
+  writeFileSync(join(idlePath, 'unwatched.txt'), 'x\n');
+  const idleMsg = await c.waitMsg((m) => m.type === 'worktree_update' && m.worktree?.path === idlePath, 2500);
+  check('worktree sans session ni watch → aucune surveillance (coût piloté par l’attention)', !idleMsg);
+
+  c.ws.close();
+} catch (err) {
+  check('exception', false, String(err));
+} finally {
+  srv.kill('SIGTERM');
+  await sleep(1500);
+  check('arrêt propre du daemon (SIGTERM)', srv.exitCode === 0 || srv.signalCode === null || srv.exitCode === null);
+  rmSync(tmp, { recursive: true, force: true });
+  const failed = results.filter((r) => !r.ok);
+  console.log(failed.length === 0 ? '\nACCEPTANCE P14: ALL GREEN' : `\nACCEPTANCE P14: ${failed.length} FAILURE(S)`);
+  process.exit(failed.length === 0 ? 0 : 1);
+}

packages/server/scripts/acceptance-p15.mjs

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+// Acceptation P15 (sans navigateur, sans quota Claude) : historisation. Vrai daemon + vrai repo git
+// tmp. Couvre GET /worktrees/log (ordre, champs, limit/skip, marquage non poussé) et la forme
+// `diff?commit=` (diff unifié complet d'un commit, hash invalide et inconnu rejetés).
+import { spawn, execFileSync } from 'node:child_process';
+import { mkdtempSync, rmSync, writeFileSync, appendFileSync, mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const PORT = 7555;
+const ORIGIN = `http://127.0.0.1:${PORT}`;
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const serverDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+const results = [];
+const check = (name, ok, detail = '') => {
+  results.push({ name, ok, detail });
+  console.log(`${ok ? '✅' : '❌'} ${name}${detail ? `: ${detail}` : ''}`);
+};
+
+const tmp = mkdtempSync(join(tmpdir(), 'arb-accept-p15-'));
+const repo = join(tmp, 'demo-repo');
+mkdirSync(repo, { recursive: true });
+const git = (...args) => execFileSync('git', args, { cwd: repo, stdio: 'pipe' });
+git('init', '-b', 'main');
+git('config', 'user.email', 'test@arboretum.dev');
+git('config', 'user.name', 'Test');
+writeFileSync(join(repo, 'README.md'), '# demo\n');
+git('add', '-A');
+git('commit', '-m', 'init');
+// un sujet contenant un guillemet et un caractère accentué : piège classique de parsing
+appendFileSync(join(repo, 'README.md'), 'deuxième ligne\n');
+git('commit', '-am', 'ajoute la « deuxième » ligne');
+writeFileSync(join(repo, 'feature.txt'), 'contenu de la feature\n');
+git('add', '-A');
+git('commit', '-m', 'ajoute feature.txt');
+
+const srv = spawn(
+  'node',
+  [join(serverDir, 'dist', 'index.js'), '--port', String(PORT), '--db', join(tmp, 'a.db'), '--claude-home', join(tmp, 'claude'), '--no-discover'],
+  { env: { ...process.env, ARBORETUM_LOG: 'warn' }, stdio: ['ignore', 'pipe', 'pipe'] },
+);
+let srvOut = '';
+srv.stdout.on('data', (d) => (srvOut += d));
+srv.stderr.on('data', (d) => (srvOut += d));
+
+const j = (path, method, cookie, body) =>
+  fetch(`${ORIGIN}${path}`, {
+    method,
+    headers: { Origin: ORIGIN, Cookie: cookie, ...(body ? { 'Content-Type': 'application/json' } : {}) },
+    ...(body ? { body: JSON.stringify(body) } : {}),
+  });
+
+try {
+  await sleep(1500);
+  const token = /arb_[0-9a-f]+/.exec(srvOut)?.[0];
+  check('boot + token bootstrap', !!token);
+
+  const login = await fetch(`${ORIGIN}/api/v1/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Origin: ORIGIN },
+    body: JSON.stringify({ token }),
+  });
+  const cookie = login.headers.get('set-cookie')?.split(';')[0] ?? '';
+  check('login → cookie', login.status === 200);
+
+  const addRepo = await j('/api/v1/repos', 'POST', cookie, { path: repo });
+  const repoId = (await addRepo.json()).repo.id;
+  check('POST /repos → 201', addRepo.status === 201 && !!repoId);
+  const enc = encodeURIComponent(repo);
+
+  // ---- GET /log : ordre, champs, sujet non trivial ----
+  const log = await (await j(`/api/v1/repos/${repoId}/worktrees/log?path=${enc}`, 'GET', cookie)).json();
+  const subjects = (log.commits ?? []).map((c) => c.subject);
+  check('GET /log : 3 commits, du plus récent au plus ancien', subjects.length === 3 && subjects[0] === 'ajoute feature.txt' && subjects[2] === 'init');
+  check('GET /log : sujet accentué et guillemets préservés', subjects[1] === 'ajoute la « deuxième » ligne');
+  const head = log.commits?.[0];
+  check('GET /log : champs hash/shortHash/auteur/date remplis', /^[0-9a-f]{40}$/.test(head?.hash ?? '') && (head?.shortHash?.length ?? 0) >= 7 && head?.author === 'Test' && !Number.isNaN(Date.parse(head?.date ?? '')));
+  check('GET /log : branche locale sans remote → hasUpstream=false', log.hasUpstream === false && log.unpushedCount === 0);
+
+  // ---- limit / skip ----
+  const page = await (await j(`/api/v1/repos/${repoId}/worktrees/log?path=${enc}&limit=1&skip=1`, 'GET', cookie)).json();
+  check('GET /log : limit + skip bornent la fenêtre', page.commits?.length === 1 && page.commits[0].subject === 'ajoute la « deuxième » ligne');
+  const bad = await j(`/api/v1/repos/${repoId}/worktrees/log?path=${enc}&limit=abc`, 'GET', cookie);
+  check('GET /log : limit non numérique → 400', bad.status === 400);
+  const noPath = await j(`/api/v1/repos/${repoId}/worktrees/log`, 'GET', cookie);
+  check('GET /log : path manquant → 400', noPath.status === 400);
+
+  // ---- diff d'un commit ----
+  const cd = await (await j(`/api/v1/repos/${repoId}/worktrees/diff?path=${enc}&commit=${head.hash}`, 'GET', cookie)).json();
+  check('GET /diff?commit= : diff unifié du commit', typeof cd.diff === 'string' && cd.diff.includes('feature.txt') && cd.diff.includes('+contenu de la feature'));
+  check('GET /diff?commit= : ni binaire ni tronqué', cd.binary === false && cd.tooLarge === false);
+  const shortHash = await (await j(`/api/v1/repos/${repoId}/worktrees/diff?path=${enc}&commit=${head.shortHash}`, 'GET', cookie)).json();
+  check('GET /diff?commit= : hash court accepté', typeof shortHash.diff === 'string' && shortHash.diff.includes('feature.txt'));
+
+  const invalid = await j(`/api/v1/repos/${repoId}/worktrees/diff?path=${enc}&commit=${encodeURIComponent('--upload-pack=x')}`, 'GET', cookie);
+  check('GET /diff?commit= : révision non hexadécimale refusée', invalid.status === 400);
+  const unknown = await j(`/api/v1/repos/${repoId}/worktrees/diff?path=${enc}&commit=deadbeef`, 'GET', cookie);
+  check('GET /diff?commit= : commit inconnu → 404', unknown.status === 404);
+  const neither = await j(`/api/v1/repos/${repoId}/worktrees/diff?path=${enc}`, 'GET', cookie);
+  check('GET /diff : ni file ni commit → 400', neither.status === 400);
+
+  // ---- la forme fichier reste intacte (non-régression P7/P9) ----
+  appendFileSync(join(repo, 'README.md'), 'travail en cours\n');
+  const fileDiff = await (await j(`/api/v1/repos/${repoId}/worktrees/diff?path=${enc}&file=README.md`, 'GET', cookie)).json();
+  check('GET /diff?file= : toujours fonctionnel', typeof fileDiff.diff === 'string' && fileDiff.diff.includes('+travail en cours'));
+} catch (err) {
+  check('exception', false, String(err));
+} finally {
+  srv.kill('SIGTERM');
+  await sleep(1500);
+  check('arrêt propre du daemon (SIGTERM)', srv.exitCode === 0 || srv.signalCode === null || srv.exitCode === null);
+  rmSync(tmp, { recursive: true, force: true });
+  const failed = results.filter((r) => !r.ok);
+  console.log(failed.length === 0 ? '\nACCEPTANCE P15: ALL GREEN' : `\nACCEPTANCE P15: ${failed.length} FAILURE(S)`);
+  process.exit(failed.length === 0 ? 0 : 1);
+}

packages/server/scripts/verify-ui.mjs

@@ -0,0 +1,232 @@
+#!/usr/bin/env node
+// Vérification VISUELLE de la SPA authentifiée, sans Playwright : daemon temporaire isolé + Chromium
+// headless piloté en CDP + cookie de session injecté. Produit des captures PNG (thème sombre et clair,
+// largeurs desktop et mobile) et échoue si une erreur console / exception Vue survient.
+//
+// Usage : node packages/server/scripts/verify-ui.mjs [dossier-de-sortie]
+// Prérequis : `npm run build` puis `node packages/server/scripts/copy-web.mjs` (le daemon sert la SPA
+// depuis packages/server/public, que le build NE rafraîchit PAS).
+import { spawn, execFileSync } from 'node:child_process';
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync, existsSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname, resolve as resolvePath } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const WebSocket = require('ws');
+
+const PORT = 7998;
+const CDP_PORT = 9333;
+const ORIGIN = `http://127.0.0.1:${PORT}`;
+const serverDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+const outDir = resolvePath(process.argv[2] ?? join(serverDir, '..', '..', '.ui-shots'));
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const results = [];
+const check = (name, ok, detail = '') => {
+  results.push({ name, ok, detail });
+  console.log(`${ok ? '✅' : '❌'} ${name}${detail ? `: ${detail}` : ''}`);
+};
+
+function findChromium() {
+  for (const bin of ['chromium', 'chromium-browser', 'google-chrome', 'google-chrome-stable']) {
+    try {
+      return execFileSync('which', [bin]).toString().trim();
+    } catch {
+      /* essai suivant */
+    }
+  }
+  return null;
+}
+
+/** Client CDP minimal : un seul socket, corrélation par id, sessionId pour la cible attachée. */
+function cdp(url) {
+  const ws = new WebSocket(url, { perMessageDeflate: false, maxPayload: 256 * 1024 * 1024 });
+  let nextId = 1;
+  const pending = new Map();
+  const events = [];
+  ws.on('message', (raw) => {
+    const msg = JSON.parse(String(raw));
+    if (msg.id && pending.has(msg.id)) {
+      const { resolve, reject } = pending.get(msg.id);
+      pending.delete(msg.id);
+      msg.error ? reject(new Error(JSON.stringify(msg.error))) : resolve(msg.result);
+      return;
+    }
+    if (msg.method) events.push(msg);
+  });
+  const ready = new Promise((res, rej) => (ws.on('open', res), ws.on('error', rej)));
+  const send = (method, params = {}, sessionId) =>
+    new Promise((resolve, reject) => {
+      const id = nextId++;
+      pending.set(id, { resolve, reject });
+      ws.send(JSON.stringify({ id, method, params, ...(sessionId ? { sessionId } : {}) }));
+      setTimeout(() => pending.has(id) && (pending.delete(id), reject(new Error(`CDP timeout: ${method}`))), 30_000);
+    });
+  return { ws, ready, send, events };
+}
+
+const tmp = mkdtempSync(join(tmpdir(), 'arb-verify-ui-'));
+mkdirSync(outDir, { recursive: true });
+let srv = null;
+let browser = null;
+
+try {
+  // La SPA servie vient de packages/server/public : garde-fou contre la vérification d'un ancien build.
+  const publicIndex = join(serverDir, 'public', 'index.html');
+  check('SPA copiée dans packages/server/public', existsSync(publicIndex), publicIndex);
+
+  // --- dépôt de démonstration : un checkout principal, un worktree de feature, du travail en cours ---
+  const repo = join(tmp, 'demo-repo');
+  mkdirSync(repo, { recursive: true });
+  const git = (...args) => execFileSync('git', args, { cwd: repo, stdio: 'pipe' });
+  git('init', '-b', 'main');
+  git('config', 'user.email', 'test@arboretum.dev');
+  git('config', 'user.name', 'Test');
+  writeFileSync(join(repo, 'README.md'), '# demo\n');
+  mkdirSync(join(repo, 'src'), { recursive: true });
+  writeFileSync(join(repo, 'src', 'app.ts'), 'export const version = 1\n');
+  git('add', '-A');
+  git('commit', '-m', 'commit initial');
+  writeFileSync(join(repo, 'src', 'app.ts'), 'export const version = 2\n');
+
+  srv = spawn(
+    'node',
+    [join(serverDir, 'dist', 'index.js'), '--port', String(PORT), '--db', join(tmp, 't.db'), '--claude-home', join(tmp, 'claude'), '--no-discover'],
+    { env: { ...process.env, XDG_DATA_HOME: join(tmp, 'xdg'), ARBORETUM_LOG: 'warn' }, stdio: ['ignore', 'pipe', 'pipe'] },
+  );
+  let srvOut = '';
+  srv.stdout.on('data', (d) => (srvOut += d));
+  srv.stderr.on('data', (d) => (srvOut += d));
+
+  for (let i = 0; i < 60 && !/arb_[0-9a-f]{16,}/.test(srvOut); i++) await sleep(150);
+  const token = /arb_[0-9a-f]{16,}/.exec(srvOut)?.[0];
+  check('daemon temporaire démarré + token', !!token);
+
+  const login = await fetch(`${ORIGIN}/api/v1/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Origin: ORIGIN },
+    body: JSON.stringify({ token }),
+  });
+  const setCookie = login.headers.getSetCookie?.() ?? [];
+  const sessionCookie = setCookie.map((c) => c.split(';')[0]).find((c) => c.startsWith('arb_session='));
+  check('login → cookie de session', !!sessionCookie);
+  const cookieValue = sessionCookie?.slice('arb_session='.length) ?? '';
+
+  const j = (path, method, body) =>
+    fetch(`${ORIGIN}${path}`, {
+      method,
+      headers: { Origin: ORIGIN, Cookie: sessionCookie ?? '', ...(body ? { 'Content-Type': 'application/json' } : {}) },
+      ...(body ? { body: JSON.stringify(body) } : {}),
+    });
+
+  const repoId = (await (await j('/api/v1/repos', 'POST', { path: repo })).json()).repo?.id;
+  check('dépôt de démonstration enregistré', !!repoId);
+  const wtRes = await (await j(`/api/v1/repos/${repoId}/worktrees`, 'POST', { branch: 'feature/demo', runHooks: false })).json();
+  check('worktree de feature créé', !!wtRes.worktree?.path);
+  // du travail non commité dans le worktree de feature, pour peupler les compteurs git de l'arbre
+  if (wtRes.worktree?.path) writeFileSync(join(wtRes.worktree.path, 'wip.txt'), 'travail en cours\n');
+  const groupRes = await (await j('/api/v1/groups', 'POST', { label: 'Démo', color: '#34d399', repoIds: [repoId] })).json();
+  check('groupe de démonstration créé', !!groupRes.group?.id);
+  const sess = await (await j('/api/v1/sessions', 'POST', { cwd: repo, command: 'bash' })).json();
+  check('session bash de démonstration', !!sess.session?.id);
+
+  // --- Chromium headless en CDP ---
+  const chromeBin = findChromium();
+  check('Chromium disponible', !!chromeBin, chromeBin ?? 'introuvable');
+  if (!chromeBin) throw new Error('Chromium introuvable : impossible de vérifier le rendu');
+  browser = spawn(
+    chromeBin,
+    [
+      '--headless=new',
+      `--remote-debugging-port=${CDP_PORT}`,
+      `--user-data-dir=${join(tmp, 'chrome')}`,
+      '--no-first-run',
+      '--no-default-browser-check',
+      '--disable-gpu',
+      '--hide-scrollbars',
+    ],
+    { stdio: ['ignore', 'pipe', 'pipe'] },
+  );
+  let wsUrl = null;
+  for (let i = 0; i < 80 && !wsUrl; i++) {
+    await sleep(200);
+    try {
+      wsUrl = (await (await fetch(`http://127.0.0.1:${CDP_PORT}/json/version`)).json()).webSocketDebuggerUrl;
+    } catch {
+      /* pas encore prêt */
+    }
+  }
+  check('Chromium en écoute CDP', !!wsUrl);
+
+  const client = cdp(wsUrl);
+  await client.ready;
+
+  // État de vue injecté avant le premier paint : on veut des captures qui MONTRENT le contenu
+  // (arbre déplié, worktree actif), pas un IDE vide.
+  const expanded = JSON.stringify(JSON.stringify([repoId]));
+  const context = JSON.stringify(JSON.stringify({ repoId, wtPath: repo }));
+  const seedExplorer = `localStorage.setItem('arb.ide.expandedRepos', ${expanded});localStorage.setItem('arb.ide.context', ${context});`;
+  const seedGit = `${seedExplorer}localStorage.setItem('arb.ide.activity', '"git"');localStorage.setItem('arb.history.open', 'true');`;
+
+  const shots = [
+    { name: 'ide-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedExplorer },
+    { name: 'ide-light-desktop', theme: 'light', width: 1440, height: 900, seed: seedExplorer },
+    { name: 'git-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedGit },
+    { name: 'git-light-desktop', theme: 'light', width: 1440, height: 900, seed: seedGit },
+    { name: 'ide-dark-mobile', theme: 'dark', width: 390, height: 844, seed: seedExplorer },
+    { name: 'ide-light-mobile', theme: 'light', width: 390, height: 844, seed: seedExplorer },
+    { name: 'dashboard-dark-mobile', theme: 'dark', width: 390, height: 844, path: '/dashboard' },
+  ];
+
+  for (const shot of shots) {
+    const { targetId } = await client.send('Target.createTarget', { url: 'about:blank' });
+    const { sessionId } = await client.send('Target.attachToTarget', { targetId, flatten: true });
+    await client.send('Runtime.enable', {}, sessionId);
+    await client.send('Log.enable', {}, sessionId);
+    await client.send('Network.enable', {}, sessionId);
+    await client.send('Emulation.setDeviceMetricsOverride', { width: shot.width, height: shot.height, deviceScaleFactor: 1, mobile: shot.width < 500 }, sessionId);
+    await client.send('Network.setCookie', { name: 'arb_session', value: cookieValue, domain: '127.0.0.1', path: '/', httpOnly: true }, sessionId);
+    // Thème : la SPA lit `arb.theme` avant le premier paint (script anti-FOUC).
+    await client.send('Page.enable', {}, sessionId);
+    await client.send(
+      'Page.addScriptToEvaluateOnNewDocument',
+      { source: `localStorage.setItem('arb.theme', ${JSON.stringify(JSON.stringify(shot.theme))});${shot.seed ?? ''}` },
+      sessionId,
+    );
+    const before = client.events.length;
+    await client.send('Page.navigate', { url: `${ORIGIN}${shot.path ?? '/ide'}` }, sessionId);
+    await sleep(3500); // laisse le temps au bootstrap REST + WS et au rendu
+
+    const text = await client.send('Runtime.evaluate', { expression: 'document.body.innerText', returnByValue: true }, sessionId);
+    const rendered = String(text.result?.value ?? '');
+    check(`${shot.name} : page rendue`, rendered.length > 20, `${rendered.length} caractères`);
+
+    const errs = client.events
+      .slice(before)
+      .filter((e) => e.sessionId === sessionId)
+      .filter((e) => (e.method === 'Runtime.consoleAPICalled' && e.params?.type === 'error') || e.method === 'Runtime.exceptionThrown')
+      .map((e) => e.params?.exceptionDetails?.text ?? (e.params?.args ?? []).map((a) => a.value ?? a.description).join(' '))
+      // Les erreurs réseau des favicons/manifest en headless ne concernent pas l'app.
+      .filter((m) => m && !/favicon|manifest\.webmanifest/i.test(m));
+    check(`${shot.name} : aucune erreur console`, errs.length === 0, errs.slice(0, 3).join(' | '));
+
+    const { data } = await client.send('Page.captureScreenshot', { format: 'png', captureBeyondViewport: false }, sessionId);
+    const file = join(outDir, `${shot.name}.png`);
+    writeFileSync(file, Buffer.from(data, 'base64'));
+    check(`${shot.name} : capture écrite`, true, file);
+    await client.send('Target.closeTarget', { targetId });
+  }
+
+  client.ws.close();
+} catch (err) {
+  check('exception', false, String(err));
+} finally {
+  browser?.kill('SIGTERM');
+  srv?.kill('SIGTERM');
+  await sleep(1200);
+  rmSync(tmp, { recursive: true, force: true });
+  const failed = results.filter((r) => !r.ok);
+  console.log(failed.length === 0 ? `\nVERIFY UI: ALL GREEN (captures dans ${outDir})` : `\nVERIFY UI: ${failed.length} FAILURE(S)`);
+  process.exit(failed.length === 0 ? 0 : 1);
+}

packages/server/src/app.ts

@@ -183,7 +183,12 @@ export function buildApp(config: Config, db: Db, serverVersion: string): AppBund
     if (!isApi && !isWs) return; // statique : public (la SPA gère son écran de login)
     const origin = req.headers.origin;
     if (origin && !allowedOrigins.has(origin)) {
-      return reply.status(403).send({ error: { code: 'BAD_ORIGIN', message: `Origin not allowed: ${origin}` } });
+      // Message ACTIONNABLE : c'est le premier mur de tout accès non-loopback (LAN, reverse proxy,
+      // Tailscale). Un « Origin not allowed » sec laissait chercher pendant des heures, alors que la
+      // correction tient en un flag. Le log serveur porte la même consigne.
+      const hint = `Origin not allowed: ${origin}. Restart the daemon with --allow-origin ${origin} (repeatable) to permit it.`;
+      req.log.warn({ origin, allowed: [...allowedOrigins] }, hint);
+      return reply.status(403).send({ error: { code: 'BAD_ORIGIN', message: hint } });
     }
     req.authContext = authenticate(req);
     if (req.routeOptions.config.public) return;
@@ -195,7 +200,7 @@ export function buildApp(config: Config, db: Db, serverVersion: string): AppBund
   registerAuthRoutes(app, auth, limiter, serverVersion, db);
   registerSessionRoutes(app, manager, discovery, sessionArchive, db);
   registerProjectRoutes(app, manager, db);
-  registerRepoRoutes(app, worktrees, db);
+  registerRepoRoutes(app, worktrees, db, manager);
   registerGroupRoutes(app, groups, db, worktrees, manager);
   registerWorktreeRoutes(app, worktrees, db);
   registerGitRoutes(app, worktrees, db);

packages/server/src/cli/install.ts

@@ -12,7 +12,7 @@ import { AuthService } from '../auth/service.js';
 const SERVICE_NAME = 'arboretum';
 const LAUNCHD_LABEL = 'fr.lidge.arboretum';
 
-export type SupportedPlatform = 'linux' | 'darwin';
+export type SupportedPlatform = 'linux' | 'darwin' | 'win32';
 
 export interface InstallFlags {
   port?: string | undefined;
@@ -29,15 +29,31 @@ export interface InstallFlags {
 
 // ─── Fonctions pures (génération de contenu / chemins) ────────────────────────────────
 
-/** macOS (launchd) et Linux (systemd) uniquement ; sinon throw avec un message pédagogique. */
+/**
+ * Superviseur par plateforme : systemd (Linux), launchd (macOS), Planificateur de tâches (Windows).
+ * Toujours en tant qu'utilisateur, jamais en root/SYSTEM.
+ */
 export function detectPlatform(platform: NodeJS.Platform = process.platform): SupportedPlatform {
-  if (platform === 'linux' || platform === 'darwin') return platform;
+  if (platform === 'linux' || platform === 'darwin' || platform === 'win32') return platform;
   throw new Error(
-    `Automatic service installation is supported on Linux (systemd) and macOS (launchd) only.\n` +
+    `Automatic service installation is supported on Linux (systemd), macOS (launchd) and Windows ` +
-      `On ${platform}, run \`arboretum\` manually or set up your own supervisor.`,
+      `(Task Scheduler) only.\nOn ${platform}, run \`arboretum\` manually or set up your own supervisor.`,
   );
 }
 
+/** Nom de la tâche planifiée Windows (visible dans taskschd.msc). */
+export const WINDOWS_TASK_NAME = 'Arboretum';
+
+/**
+ * Arguments `schtasks /Create` d'une tâche « au démarrage de session utilisateur ». `/RL LIMITED`
+ * garde les privilèges de l'utilisateur (jamais d'élévation), `/F` rend la commande idempotente.
+ * `/TR` attend UNE chaîne de commande : chaque token à espaces est donc quoté.
+ */
+export function windowsCreateArgs(input: { taskName: string; exec: string; scriptArgs: string[] }): string[] {
+  const command = [input.exec, ...input.scriptArgs].map(quoteIfNeeded).join(' ');
+  return ['/Create', '/TN', input.taskName, '/TR', command, '/SC', 'ONLOGON', '/RL', 'LIMITED', '/F'];
+}
+
 export function parseInstallArgs(argv: string[]): InstallFlags {
   const { values } = parseArgs({
     args: argv,
@@ -207,7 +223,8 @@ export function printUsage(version: string): void {
 Usage:
   arboretum [flags]            Start the daemon (default)
   arboretum serve [flags]      Start the daemon (explicit alias)
-  arboretum install [flags]    Install & start a user service (systemd on Linux, launchd on macOS)
+  arboretum install [flags]    Install & start a user service (systemd on Linux, launchd on macOS,
+                               Task Scheduler on Windows)
   arboretum uninstall          Stop & remove the user service
   arboretum status             Show the service status
   arboretum help               Show this help
@@ -218,6 +235,9 @@ Daemon flags:
   --allow-origin <url>               Additional allowed Origin (repeatable)
   --db <path>                        SQLite database path
   --vapid-contact <mailto|url>       VAPID contact subject for Web Push
+  --claude-home <path>               Override the Claude install root (default ~/.claude)
+  --print-token                      Print the access token on start (bootstrap it if missing)
+  --no-discover                      Disable repository auto-discovery (startup + periodic scan)
   --i-know-this-exposes-a-terminal   Acknowledge a non-loopback bind (avoid, prefer Tailscale Serve)
 
 Install flags (daemon flags above are propagated to the service):
@@ -301,6 +321,23 @@ export async function runInstall(argv: string[]): Promise<void> {
     return;
   }
 
+  if (platform === 'win32') {
+    // Windows : Planificateur de tâches, déclenchement à l'ouverture de session. Pas de service NT
+    // (il tournerait hors session utilisateur, donc sans accès au profil ni au CLI `claude`).
+    const createArgs = windowsCreateArgs({ taskName: WINDOWS_TASK_NAME, exec, scriptArgs });
+    if (flags.dryRun) {
+      console.log(`# commands:\nschtasks ${createArgs.join(' ')}`);
+      if (!flags.noEnable) console.log(`schtasks /Run /TN ${WINDOWS_TASK_NAME}`);
+      return;
+    }
+    bootstrapToken(serviceArgs);
+    run('schtasks.exe', createArgs, { check: true });
+    console.log(`Registered scheduled task "${WINDOWS_TASK_NAME}" (runs at logon).`);
+    if (!flags.noEnable) run('schtasks.exe', ['/Run', '/TN', WINDOWS_TASK_NAME], { check: true });
+    console.log(`\nArboretum task installed. Manage it with: schtasks /Query /TN ${WINDOWS_TASK_NAME}`);
+    return;
+  }
+
   // macOS (launchd)
   const logs = launchdLogPaths();
   const programArguments = [exec, ...scriptArgs];
@@ -352,6 +389,12 @@ export async function runUninstall(argv: string[]): Promise<void> {
     console.log('Arboretum service removed.');
     return;
   }
+  if (platform === 'win32') {
+    run('schtasks.exe', ['/End', '/TN', WINDOWS_TASK_NAME]); // best-effort : arrête l'instance courante
+    run('schtasks.exe', ['/Delete', '/TN', WINDOWS_TASK_NAME, '/F']);
+    console.log('Arboretum scheduled task removed.');
+    return;
+  }
   const plistPath = launchAgentPlistPath(flags.label);
   const uid = process.getuid?.() ?? 0;
   run('launchctl', ['bootout', `gui/${uid}/${flags.label}`]); // best-effort
@@ -371,6 +414,10 @@ export async function runStatus(argv: string[]): Promise<void> {
     process.exitCode = code;
     return;
   }
+  if (platform === 'win32') {
+    process.exitCode = run('schtasks.exe', ['/Query', '/TN', WINDOWS_TASK_NAME, '/V', '/FO', 'LIST']);
+    return;
+  }
   const uid = process.getuid?.() ?? 0;
   const code = run('launchctl', ['print', `gui/${uid}/${flags.label}`]);
   console.log(`\nLogs: ${launchdLogPaths().out}`);

packages/server/src/config.ts

@@ -25,6 +25,21 @@ export interface Config {
   autoDiscover: boolean;
 }
 
+/**
+ * Racine des données applicatives, par plateforme. `XDG_DATA_HOME` reste prioritaire partout (l'app de
+ * bureau s'en sert pour isoler ses données). Sinon : `%APPDATA%` sur Windows (`~/.local/share` n'y a
+ * aucun sens et n'est ni sauvegardé ni migré par l'OS), `~/.local/share` ailleurs.
+ */
+export function defaultDataRoot(
+  platform: NodeJS.Platform = process.platform,
+  env: NodeJS.ProcessEnv = process.env,
+  home: string = homedir(),
+): string {
+  if (env.XDG_DATA_HOME) return env.XDG_DATA_HOME;
+  if (platform === 'win32') return env.APPDATA ?? join(home, 'AppData', 'Roaming');
+  return join(home, '.local', 'share');
+}
+
 export function loadConfig(argv = process.argv.slice(2)): Config {
   const { values } = parseArgs({
     args: argv,
@@ -55,7 +70,7 @@ export function loadConfig(argv = process.argv.slice(2)): Config {
     );
   }
 
-  const dataDir = join(process.env.XDG_DATA_HOME ?? join(homedir(), '.local', 'share'), 'arboretum');
+  const dataDir = join(defaultDataRoot(), 'arboretum');
   mkdirSync(dataDir, { recursive: true });
   // La DB contient des secrets (server_secret, clé privée VAPID, hashs de tokens) : le dossier de
   // données ne doit jamais être lisible par d'autres utilisateurs du système. chmod best-effort

packages/server/src/core/claude-launcher.ts

@@ -1,5 +1,5 @@
 import { execFileSync } from 'node:child_process';
-import { accessSync, constants } from 'node:fs';
+import { accessSync, constants, existsSync } from 'node:fs';
 
 export interface SpawnSpec {
   file: string;
@@ -13,8 +13,17 @@ export interface SpawnOptions {
   resume?: { claudeSessionId: string; fork?: boolean };
   /** répertoires supplémentaires à relier dans une seule session (P6) : `--add-dir <path>` répété. */
   addDirs?: string[];
-  /** chemin explicite du binaire `claude` (réglage UI) ; sinon résolution via PATH (`which`). */
+  /** chemin explicite du binaire `claude` (réglage UI) ; sinon résolution via le PATH. */
   claudeBinPath?: string | null;
+  /**
+   * Lancement de projet (« Démarrer le projet ») : au lieu de `bash --norc`, lance le shell de
+   * login interactif de l'utilisateur (`$SHELL -l -i`) pour charger son environnement complet
+   * (PATH nvm/asdf/~/.local/bin). Indispensable quand le daemon tourne en service systemd/launchd
+   * (PATH minimal, cf. resolveClaudeBin) : sinon `npm`/`docker` seraient introuvables. Ignoré pour claude.
+   */
+  login?: boolean;
+  /** plateforme cible (injectable pour les tests) ; défaut `process.platform`. */
+  platform?: NodeJS.Platform;
 }
 
 /** Diagnostic de résolution du binaire `claude` (exposé en lecture dans Réglages). */
@@ -29,16 +38,32 @@ export interface ClaudeBinDiagnostic {
 
 let cachedClaudeBin: string | null = null;
 
+/**
+ * Commande de recherche dans le PATH selon la plateforme : `which` n'existe PAS sur Windows, c'est
+ * `where.exe` (qui peut renvoyer plusieurs lignes, la première étant la retenue).
+ */
+export function whichCommand(platform: NodeJS.Platform = process.platform): { file: string; args: string[] } {
+  return platform === 'win32' ? { file: 'where.exe', args: ['claude'] } : { file: 'which', args: ['claude'] };
+}
+
 /** Recherche `claude` dans le PATH (sans throw). null si absent. */
-function findClaudeOnPath(): string | null {
+function findClaudeOnPath(platform: NodeJS.Platform = process.platform): string | null {
+  const { file, args } = whichCommand(platform);
   try {
-    return execFileSync('which', ['claude'], { encoding: 'utf8' }).trim() || null;
+    const out = execFileSync(file, args, { encoding: 'utf8' });
+    // `where.exe` liste toutes les correspondances : on garde la première.
+    return out.split(/\r?\n/).map((l) => l.trim()).find((l) => l.length > 0) ?? null;
   } catch {
     return null;
   }
 }
 
-function isExecutable(path: string): boolean {
+/**
+ * « Est-ce lançable ? ». Sur Windows, le bit d'exécution POSIX n'a aucun sens (NTFS n'en a pas) et
+ * `accessSync(X_OK)` y répond au hasard : on se contente donc de l'existence du fichier.
+ */
+function isExecutable(path: string, platform: NodeJS.Platform = process.platform): boolean {
+  if (platform === 'win32') return existsSync(path);
   try {
     accessSync(path, constants.X_OK);
     return true;
@@ -50,9 +75,9 @@ function isExecutable(path: string): boolean {
 /**
  * Résout le binaire `claude`. Si `configuredPath` est fourni (réglage UI), il est utilisé tel quel
  * (validé exécutable, message clair sinon) et JAMAIS mis en cache (modifiable à chaud). Sinon :
- * `which claude`, mis en cache. Un service systemd/launchd démarre avec un PATH minimal sans
+ * recherche dans le PATH (`which` / `where.exe`), mise en cache. Un service systemd/launchd démarre
- * ~/.local/bin → `which claude` y échoue ; d'où le réglage de chemin explicite (et le PATH figé par
+ * avec un PATH minimal sans ~/.local/bin → la recherche y échoue ; d'où le réglage de chemin explicite
- * `arboretum install`).
+ * (et le PATH figé par `arboretum install`).
  */
 export function resolveClaudeBin(configuredPath?: string | null): string {
   if (configuredPath) {
@@ -81,15 +106,52 @@ export function diagnoseClaudeBin(configuredPath?: string | null): ClaudeBinDiag
   return found ? { path: found, source: 'path', ok: true } : { path: null, source: null, ok: false };
 }
 
+/** Shells interactifs connus supportant `-l -i` (login + interactif). */
+const KNOWN_LOGIN_SHELLS = new Set(['bash', 'zsh', 'fish']);
+
+/**
+ * Shell interactif pour « Démarrer le projet ».
+ *
+ * POSIX : `$SHELL -l -i` s'il fait partie des shells connus supportant ces options (bash/zsh/fish),
+ * sinon `bash` (un `$SHELL=dash` sortirait aussitôt avec `-l -i`, laissant un terminal vide).
+ *
+ * Windows : PowerShell, en restant attaché après la commande auto-tapée (`-NoExit`), avec repli sur
+ * `cmd.exe /K`. `%COMSPEC%` n'est PAS utilisé comme shell de lancement : il pointe cmd.exe, qui ne
+ * charge aucun profil utilisateur. La commande est ensuite auto-tapée par le PtyManager, exactement
+ * comme sous POSIX · le mécanisme est indépendant du shell.
+ */
+export function resolveInteractiveShell(
+  platform: NodeJS.Platform = process.platform,
+  env: NodeJS.ProcessEnv = process.env,
+): { file: string; args: string[] } {
+  if (platform === 'win32') {
+    const pwsh = env.ARBORETUM_SHELL ?? 'powershell.exe';
+    return { file: pwsh, args: ['-NoLogo', '-NoExit'] };
+  }
+  const shell = env.SHELL;
+  const file = shell && KNOWN_LOGIN_SHELLS.has(shell.split('/').pop() ?? '') ? shell : 'bash';
+  return { file, args: ['-l', '-i'] };
+}
+
+/** Shell non interactif « neutre » (terminal simple, hors lancement de projet). */
+export function resolvePlainShell(platform: NodeJS.Platform = process.platform): { file: string; args: string[] } {
+  if (platform === 'win32') return { file: 'powershell.exe', args: ['-NoLogo', '-NoExit'] };
+  return { file: 'bash', args: ['--norc'] };
+}
+
 /** Module volontairement abstrait : le plan B « BYO API key / Agent SDK » se brancherait ici. */
 export function buildSpawnSpec(opts: SpawnOptions): SpawnSpec {
+  const platform = opts.platform ?? process.platform;
   const env: NodeJS.ProcessEnv = {
     ...process.env,
     TERM: 'xterm-256color',
     COLORTERM: 'truecolor',
   };
   if (opts.command === 'bash') {
-    return { file: 'bash', args: ['--norc'], env };
+    // `'bash'` désigne « le shell de la machine », pas littéralement bash : le contrat d'API reste
+    // stable (claude|bash) et c'est ici qu'on choisit le shell réel par plateforme.
+    const { file, args } = opts.login ? resolveInteractiveShell(platform) : resolvePlainShell(platform);
+    return { file, args, env };
   }
   const args: string[] = [];
   if (opts.resume) {

packages/server/src/core/fs-watcher.ts

@@ -7,9 +7,33 @@ import { resolve, sep, join } from 'node:path';
 import chokidar, { type FSWatcher } from 'chokidar';
 import { resolveGitDir } from './git.js';
 
-const DEFAULT_MAX_WATCHERS = 32;
+// Plafond du pool : l'arbre de projets peut désormais « regarder » tous les worktrees des dépôts
+// dépliés (et non plus le seul worktree du panneau Git), il faut donc de la marge. Les entrées
+// épinglées (session vivante, checkout principal) ne sont jamais évincées, cf. evictIfNeeded.
+const DEFAULT_MAX_WATCHERS = 64;
 const DEBOUNCE_MS = 200;
 
+/**
+ * Répertoires lourds ignorés en plus de `.git` : ils concentrent l'essentiel des descripteurs inotify
+ * sans jamais rien apprendre sur le statut git. Liste volontairement CONSERVATRICE (pas de `dist`,
+ * `build`, `out` ni `vendor`, qui sont versionnés dans certains projets : les ignorer ferait manquer
+ * un vrai changement).
+ */
+const IGNORED_DIRS = [
+  'node_modules',
+  '.venv',
+  'venv',
+  '__pycache__',
+  '.turbo',
+  '.cache',
+  '.pnpm-store',
+  'coverage',
+  '.next',
+  '.nuxt',
+  '.output',
+  'target',
+];
+
 export interface FsWatcherEvents {
   /** le contenu d'un worktree surveillé a changé (édition, staging, checkout externe…). */
   worktree_fs_change: [{ repoId: string; path: string }];
@@ -33,11 +57,14 @@ interface WatchEntry {
 
 /**
  * Ignore tout sous `.git/` SAUF `HEAD` et `index` (⇒ on détecte le `git checkout` externe et le
- * staging) ainsi que `node_modules`. chokidar n'ignore pas le dossier `.git` lui-même afin de
+ * staging) ainsi que les répertoires de `IGNORED_DIRS`. chokidar n'ignore pas le dossier `.git`
- * pouvoir descendre jusqu'à `HEAD`/`index`, mais saute ses sous-dossiers volumineux (objects…).
+ * lui-même afin de pouvoir descendre jusqu'à `HEAD`/`index`, mais saute ses sous-dossiers
+ * volumineux (objects…).
  */
 export function isIgnoredPath(p: string): boolean {
-  if (p.includes(`${sep}node_modules${sep}`) || p.endsWith(`${sep}node_modules`)) return true;
+  for (const dir of IGNORED_DIRS) {
+    if (p.includes(`${sep}${dir}${sep}`) || p.endsWith(`${sep}${dir}`)) return true;
+  }
   if (p.includes(`${sep}.git${sep}`)) {
     return !(p.endsWith(`${sep}HEAD`) || p.endsWith(`${sep}index`));
   }

packages/server/src/core/git-auth.ts

@@ -1,7 +1,7 @@
 // Préparation d'un environnement d'authentification git ÉPHÉMÈRE (P12). HTTPS (pat/app_password) :
-// les identifiants sont fournis via GIT_ASKPASS (script 0o700 lisant deux variables d'env), JAMAIS
+// les identifiants sont fournis via GIT_ASKPASS (script à permissions restreintes lisant deux variables
-// dans l'URL ni dans `.git/config`. GIT_TERMINAL_PROMPT=0 (pas d'invite bloquante). Le script est
+// d'env), JAMAIS dans l'URL ni dans `.git/config`. GIT_TERMINAL_PROMPT=0 (pas d'invite bloquante). Le
-// supprimé en `finally` ; le secret ne transite que par l'env du process enfant (jamais loggé).
+// script est supprimé en `finally` ; le secret ne transite que par l'env du process enfant (jamais loggé).
 import { mkdtemp, writeFile, rm, chmod } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
@@ -11,20 +11,40 @@ import type { GitAuth } from './git-clients/index.js';
 // Identité HTTPS par défaut quand l'utilisateur n'a pas fourni de username (token-as-password).
 const SERVICE_DEFAULT_USER: Record<GitService, string> = { github: 'x-access-token', gitlab: 'oauth2', gitea: 'oauth2' };
 
+const ASKPASS_SH = "#!/bin/sh\ncase \"$1\" in\n  Username*) printf '%s' \"$ARB_GIT_USER\" ;;\n  *) printf '%s' \"$ARB_GIT_PASS\" ;;\nesac\n";
+
+// Équivalent Windows : git appelle GIT_ASKPASS avec l'invite en argument. `echo` de cmd.exe ajoute un
+// saut de ligne que git tolère (il trime la réponse). `~1` = premier argument sans les guillemets.
+const ASKPASS_CMD = [
+  '@echo off',
+  'echo %~1 | findstr /b /i "Username" >nul',
+  'if %errorlevel%==0 (echo %ARB_GIT_USER%) else (echo %ARB_GIT_PASS%)',
+  '',
+].join('\r\n');
+
+/**
+ * Nom et contenu du script askpass selon la plateforme. Un `.sh` avec shebang n'est PAS exécutable sur
+ * Windows : sans cette variante `.cmd`, tout clone/push HTTPS par jeton y échouait silencieusement
+ * (git n'obtenait aucun identifiant et abandonnait, GIT_TERMINAL_PROMPT étant à 0).
+ */
+export function askpassScript(platform: NodeJS.Platform = process.platform): { name: string; content: string; mode: number } {
+  return platform === 'win32'
+    ? { name: 'askpass.cmd', content: ASKPASS_CMD, mode: 0o700 }
+    : { name: 'askpass.sh', content: ASKPASS_SH, mode: 0o700 };
+}
+
 export async function withGitAuth<T>(
   service: GitService,
   auth: GitAuth,
   fn: (env: NodeJS.ProcessEnv) => Promise<T>,
 ): Promise<T> {
   const dir = await mkdtemp(join(tmpdir(), 'arb-gitauth-'));
-  const askpass = join(dir, 'askpass.sh');
+  const script = askpassScript();
+  const askpass = join(dir, script.name);
   const user = auth.username || SERVICE_DEFAULT_USER[service];
-  await writeFile(
+  await writeFile(askpass, script.content, { mode: script.mode });
-    askpass,
+  // chmod best-effort : sans effet sur NTFS (comme ailleurs dans le code, cf. config.ts).
-    "#!/bin/sh\ncase \"$1\" in\n  Username*) printf '%s' \"$ARB_GIT_USER\" ;;\n  *) printf '%s' \"$ARB_GIT_PASS\" ;;\nesac\n",
+  await chmod(askpass, script.mode).catch(() => {});
-    { mode: 0o700 },
-  );
-  await chmod(askpass, 0o700);
   const env: NodeJS.ProcessEnv = {
     ...process.env,
     GIT_ASKPASS: askpass,

packages/server/src/core/git.ts

@@ -2,7 +2,7 @@
 // les chemins/refs utilisateur. Fonctions pures sans état, prenant un cwd déjà validé par l'appelant.
 import { execFile, spawn } from 'node:child_process';
 import { resolve, sep } from 'node:path';
-import type { WorktreeGitStatus, WorktreeBranchAction, WorktreeBranchMode, FileChange } from '@arboretum/shared';
+import type { WorktreeGitStatus, WorktreeBranchAction, WorktreeBranchMode, FileChange, CommitEntry } from '@arboretum/shared';
 
 const GIT_TIMEOUT_MS = 10_000;
 // `push` peut dialoguer avec un remote (réseau) : on lui laisse une marge bien plus large.
@@ -502,6 +502,81 @@ export async function lastCommit(worktreePath: string): Promise<{ hash: string;
   return { hash: r.stdout.slice(0, idx), subject: r.stdout.slice(idx + 1).replace(/\n$/, '') };
 }
 
+const MAX_LOG_LIMIT = 200;
+
+/**
+ * Hash de commit : hexadécimal, 4 à 64 caractères. Bornage strict AVANT de le passer à git · un
+ * identifiant libre ouvrirait la porte à des révisions arbitraires ou à des options déguisées (`-…`).
+ */
+export function isValidCommitish(hash: string): boolean {
+  return /^[0-9a-f]{4,64}$/i.test(hash);
+}
+
+/**
+ * Découpe la sortie de `git log -z --format=<n champs séparés par NUL>` en enregistrements. Isolée et
+ * pure pour être testable sans dépôt : c'est le point délicat (avec `-z`, les séparateurs de champs et
+ * d'enregistrements sont tous des NUL, il faut donc compter les champs).
+ */
+export function parseLogZ(stdout: string, fieldsPerCommit: number): string[][] {
+  const fields = stdout.split('\0');
+  const out: string[][] = [];
+  for (let i = 0; i + fieldsPerCommit - 1 < fields.length; i += fieldsPerCommit) {
+    const rec = fields.slice(i, i + fieldsPerCommit);
+    if ((rec[0] ?? '').trim() === '') continue;
+    out.push(rec);
+  }
+  return out;
+}
+
+/**
+ * Historique de la branche du worktree. `-z` + champs séparés par NUL : un sujet contenant un saut de
+ * ligne ne peut pas casser le parsing. `unpushedCount` = commits de tête pas encore poussés
+ * (`@{u}..HEAD`) ; `hasUpstream: false` signifie qu'AUCUN commit n'est publié (branche purement locale),
+ * ce que l'UI marque en bloc plutôt que de compter tout l'historique.
+ */
+export async function commitLog(
+  worktreePath: string,
+  opts: { limit?: number; skip?: number } = {},
+): Promise<{ commits: CommitEntry[]; unpushedCount: number; hasUpstream: boolean }> {
+  const limit = Math.min(Math.max(1, Math.trunc(opts.limit ?? 30)), MAX_LOG_LIMIT);
+  const skip = Math.max(0, Math.trunc(opts.skip ?? 0));
+  const r = await gitRaw(worktreePath, [
+    'log',
+    `--max-count=${limit}`,
+    `--skip=${skip}`,
+    '-z',
+    '--format=%H%x00%h%x00%an%x00%aI%x00%s',
+  ]);
+  if (r.code !== 0) return { commits: [], unpushedCount: 0, hasUpstream: false }; // dépôt sans commit
+  const commits: CommitEntry[] = parseLogZ(r.stdout, 5).map((f) => ({
+    hash: (f[0] ?? '').trim(),
+    shortHash: f[1] ?? '',
+    author: f[2] ?? '',
+    date: f[3] ?? '',
+    subject: (f[4] ?? '').replace(/\n$/, ''),
+  }));
+  const upstream = await gitRaw(worktreePath, ['rev-parse', '--abbrev-ref', '--symbolic-full-name', '@{u}']);
+  if (upstream.code !== 0) return { commits, unpushedCount: 0, hasUpstream: false };
+  const count = await gitRaw(worktreePath, ['rev-list', '--count', '@{u}..HEAD']);
+  return { commits, unpushedCount: count.code === 0 ? Number(count.stdout.trim()) || 0 : 0, hasUpstream: true };
+}
+
+/**
+ * Diff complet d'un commit (`git show`), borné exactement comme `fileDiff` : refus des binaires,
+ * troncature au-delà de MAX_DIFF_BYTES. Le résultat étant un diff unifié, il passe dans le même
+ * parseur et la même vue que les diffs de fichiers.
+ */
+export async function commitDiff(worktreePath: string, hash: string): Promise<{ diff: string; binary: boolean; tooLarge: boolean }> {
+  if (!isValidCommitish(hash)) throw new Error(`Invalid commit hash: ${hash}`);
+  const out = await gitRaw(worktreePath, ['show', '--no-color', '--format=', hash]);
+  if (out.code !== 0) throw new Error(`Unknown commit: ${hash}`);
+  const raw = out.stdout;
+  const binary = /^Binary files .* differ$/m.test(raw) || raw.includes('GIT binary patch');
+  if (binary) return { diff: '', binary: true, tooLarge: false };
+  if (raw.length > MAX_DIFF_BYTES) return { diff: raw.slice(0, MAX_DIFF_BYTES), binary: false, tooLarge: true };
+  return { diff: raw, binary: false, tooLarge: false };
+}
+
 /** true si le HEAD courant n'est pas encore poussé (amend autorisé). Sans upstream → true. */
 export async function isUnpushed(worktreePath: string): Promise<boolean> {
   try {

packages/server/src/core/launch-detect.ts

@@ -0,0 +1,83 @@
+// Auto-détection des commandes de démarrage d'un projet (« Démarrer le projet »).
+// Fonctions PURES et sans effet de bord notable : lecture bornée de quelques fichiers connus dans
+// UN répertoire (jamais de récursion, jamais d'exécution). Tolérant : tout fichier absent/illisible
+// est simplement ignoré. Les suggestions sont proposées à l'utilisateur, qui coche/ajuste.
+import { existsSync, readFileSync } from 'node:fs';
+import { randomUUID } from 'node:crypto';
+import { join } from 'node:path';
+import type { LaunchCommand } from '@arboretum/shared';
+
+/** Taille max lue par fichier (garde-fou anti-fichier géant). */
+const MAX_FILE_BYTES = 256 * 1024;
+
+/** Noms de scripts npm activés par défaut (serveurs de dev longue durée) ; les autres sont proposés décochés. */
+const DEFAULT_ENABLED_SCRIPT = /(^|:)(dev|start|serve|watch)(:|$)/i;
+
+function readTextSafe(file: string): string | null {
+  try {
+    if (!existsSync(file)) return null;
+    // Lecture bornée : on tronque au-delà de MAX_FILE_BYTES (suffisant pour scripts / Procfile).
+    return readFileSync(file, 'utf8').slice(0, MAX_FILE_BYTES);
+  } catch {
+    return null;
+  }
+}
+
+/** Détecte le gestionnaire de paquets d'après le lockfile présent (défaut : npm). */
+function detectRunner(dir: string): { cmd: string } {
+  if (existsSync(join(dir, 'pnpm-lock.yaml'))) return { cmd: 'pnpm run' };
+  if (existsSync(join(dir, 'yarn.lock'))) return { cmd: 'yarn' };
+  if (existsSync(join(dir, 'bun.lockb'))) return { cmd: 'bun run' };
+  return { cmd: 'npm run' };
+}
+
+function mk(label: string, run: string, enabled: boolean): LaunchCommand {
+  return { id: randomUUID(), label, run, enabled };
+}
+
+/** Scripts npm depuis package.json → `<runner> <script>`. */
+function fromPackageJson(dir: string): LaunchCommand[] {
+  const raw = readTextSafe(join(dir, 'package.json'));
+  if (!raw) return [];
+  let scripts: Record<string, unknown> | undefined;
+  try {
+    const pkg = JSON.parse(raw) as { scripts?: Record<string, unknown> };
+    scripts = pkg.scripts;
+  } catch {
+    return [];
+  }
+  if (!scripts || typeof scripts !== 'object') return [];
+  const runner = detectRunner(dir);
+  return Object.keys(scripts)
+    .filter((name) => typeof scripts![name] === 'string')
+    .map((name) => mk(name, `${runner.cmd} ${name}`, DEFAULT_ENABLED_SCRIPT.test(name)));
+}
+
+/** Procfile (heroku/foreman) : lignes `name: command`. Toutes activées (ce sont des cibles d'exécution). */
+function fromProcfile(dir: string): LaunchCommand[] {
+  const raw = readTextSafe(join(dir, 'Procfile'));
+  if (!raw) return [];
+  const out: LaunchCommand[] = [];
+  for (const line of raw.split(/\r?\n/)) {
+    const m = /^([A-Za-z0-9_-]+):\s*(.+)$/.exec(line.trim());
+    const name = m?.[1];
+    const cmd = m?.[2]?.trim();
+    if (name && cmd) out.push(mk(name, cmd, true));
+  }
+  return out;
+}
+
+/** docker-compose présent → suggestion `docker compose up` (énumération des services : évolution future). */
+function fromDockerCompose(dir: string): LaunchCommand[] {
+  const names = ['docker-compose.yml', 'docker-compose.yaml', 'compose.yml', 'compose.yaml'];
+  const present = names.some((n) => existsSync(join(dir, n)));
+  return present ? [mk('docker', 'docker compose up', true)] : [];
+}
+
+/**
+ * Détecte des commandes de démarrage candidates dans `dir` (package.json, Procfile, docker-compose).
+ * Ne récurse pas et n'exécute rien. Renvoie [] si rien n'est détecté ou si `dir` est inaccessible.
+ */
+export function detectLaunchCommands(dir: string): LaunchCommand[] {
+  return [...fromPackageJson(dir), ...fromProcfile(dir), ...fromDockerCompose(dir)];
+}

packages/server/src/core/pty-manager.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from 'node:events';
+import { execFile } from 'node:child_process';
 import { existsSync, statSync } from 'node:fs';
 import { randomUUID } from 'node:crypto';
 import { homedir } from 'node:os';
@@ -40,8 +41,29 @@ type HistoricalRow = {
   added_dirs: string | null;
   group_id: string | null;
   archived_at: string | null;
+  launch_run_id: string | null;
 };
 
+/** Longueur max d'une commande auto-tapée (garde-fou ; une ligne shell raisonnable). */
+const MAX_INITIAL_INPUT_LEN = 4096;
+
+/**
+ * Assainit une commande de lancement avant de l'écrire dans le PTY : trim, borne de longueur,
+ * retrait de tous les caractères de contrôle (dont retours chariot/ligne : le `\r` de soumission
+ * est ajouté par l'appelant). Empêche l'injection de plusieurs lignes / séquences de contrôle par
+ * le champ de commande ; le modèle de menace reste inchangé (terminal = RCE par conception).
+ */
+function sanitizeInitialInput(raw: string): string {
+  let out = '';
+  for (const ch of raw.slice(0, MAX_INITIAL_INPUT_LEN)) {
+    const code = ch.codePointAt(0) ?? 0;
+    // saute les caractères de contrôle C0 (0x00-0x1F) et DEL (0x7F) : ni multi-lignes ni séquences ANSI.
+    if (code < 0x20 || code === 0x7f) continue;
+    out += ch;
+  }
+  return out.trim();
+}
+
 /** Parse la colonne `added_dirs` (JSON array de chemins) de façon défensive ; [] si NULL/invalide. */
 function parseAddedDirs(raw: string | null): string[] {
   if (!raw) return [];
@@ -85,6 +107,8 @@ interface ManagedSession {
   addedDirs: string[];
   /** groupe propriétaire d'une session de groupe multi-repo ; null sinon (P6). */
   groupId: string | null;
+  /** identifiant partagé par les terminaux d'un même « Démarrer le projet » ; null sinon. */
+  launchRunId: string | null;
   /** détection d'état fin (busy/waiting/idle + dialogue) ; null pour bash (P3-B). */
   tracker: SessionActivityTracker | null;
   /** dernière activité notifiée (détection du front montant vers `waiting` pour le push P4-B). */
@@ -117,6 +141,14 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
     addDirs?: string[];
     /** groupe propriétaire (session de groupe, P6). */
     groupId?: string;
+    /** shell de login interactif (charge le PATH utilisateur) : lancement de projet uniquement. */
+    login?: boolean;
+    /** commande auto-tapée dans le PTY juste après le spawn (« Démarrer le projet »). */
+    initialInput?: string;
+    /** titre initial de la session (libellé de l'onglet ; ex. label de commande de lancement). */
+    title?: string;
+    /** identifiant partagé par tous les terminaux d'un même lancement de projet. */
+    launchRunId?: string;
   }): SessionSummary {
     const cwd = opts.cwd;
     if (!existsSync(cwd) || !statSync(cwd).isDirectory()) {
@@ -138,6 +170,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
       ...(claudeBinPath ? { claudeBinPath } : {}),
       ...(opts.resume ? { resume: opts.resume } : {}),
       ...(addedDirs.length ? { addDirs: addedDirs } : {}),
+      ...(opts.login ? { login: true } : {}),
     });
     const id = randomUUID();
     const proc = pty.spawn(spec.file, spec.args, {
@@ -151,7 +184,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
       id,
       cwd,
       command,
-      title: null,
+      title: opts.title ?? null,
       createdAt: new Date().toISOString(),
       proc,
       ring: new RingBuffer(RING_CAPACITY),
@@ -162,6 +195,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
       claudeSessionId: null,
       addedDirs,
       groupId: opts.groupId ?? null,
+      launchRunId: opts.launchRunId ?? null,
       tracker: null,
       prevActivity: null,
       notifyTimer: null,
@@ -177,19 +211,28 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
     }
     this.live.set(id, session);
     this.db
-      .prepare('INSERT INTO sessions (id, cwd, command, created_at, resumed_from, added_dirs, group_id) VALUES (?, ?, ?, ?, ?, ?, ?)')
+      .prepare('INSERT INTO sessions (id, cwd, command, title, created_at, resumed_from, added_dirs, group_id, launch_run_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)')
       .run(
         id,
         cwd,
         command,
+        session.title,
         session.createdAt,
         opts.resume?.claudeSessionId ?? null,
         addedDirs.length ? JSON.stringify(addedDirs) : null,
         session.groupId,
+        session.launchRunId,
       );
 
     proc.onData((data) => this.handleOutput(session, Buffer.from(data, 'utf8')));
     proc.onExit(({ exitCode, signal }) => this.handleExit(session, exitCode, signal ?? null));
+    // Auto-type de la commande de lancement APRÈS onData : la commande et sa sortie entrent dans le
+    // ring et sont rejouées à l'attach. Les octets sont mis en file par le tty tant que le shell
+    // n'a pas commencé à lire → pas de course. Un seul `\r` final (aligné sur answer()).
+    if (opts.initialInput) {
+      const line = sanitizeInitialInput(opts.initialInput);
+      if (line) proc.write(`${line}\r`);
+    }
     if (command === 'claude') this.captureClaudeSessionId(session);
 
     const summary = this.summarize(session);
@@ -269,7 +312,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
     const liveSummaries = [...this.live.values()].map((s) => this.summarize(s));
     const liveIds = new Set(this.live.keys());
     const rows = this.db
-      .prepare('SELECT id, cwd, command, title, created_at, ended_at, exit_code, claude_session_id, added_dirs, group_id, archived_at FROM sessions ORDER BY created_at DESC LIMIT 100')
+      .prepare('SELECT id, cwd, command, title, created_at, ended_at, exit_code, claude_session_id, added_dirs, group_id, archived_at, launch_run_id FROM sessions ORDER BY created_at DESC LIMIT 100')
       .all() as HistoricalRow[];
     const historical: SessionSummary[] = rows
       .filter((r) => !liveIds.has(r.id))
@@ -302,6 +345,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
       registryStatus: null,
       ...(addedDirs.length ? { addedDirs } : {}),
       groupId: r.group_id,
+      launchRunId: r.launch_run_id,
       archived: r.archived_at != null,
     };
   }
@@ -314,7 +358,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
   emitHistoricalUpdate(id: string): void {
     if (this.live.has(id)) return;
     const r = this.db
-      .prepare('SELECT id, cwd, command, title, created_at, ended_at, exit_code, claude_session_id, added_dirs, group_id, archived_at FROM sessions WHERE id = ?')
+      .prepare('SELECT id, cwd, command, title, created_at, ended_at, exit_code, claude_session_id, added_dirs, group_id, archived_at, launch_run_id FROM sessions WHERE id = ?')
       .get(id) as HistoricalRow | undefined;
     if (!r) return;
     this.emit('session_update', this.historicalSummary(r));
@@ -329,18 +373,25 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
     const s = this.live.get(id);
     if (!s || s.exited) return false;
     try {
-      process.kill(s.proc.pid, 'SIGTERM');
+      // Windows n'a pas de signaux : node-pty traduit `kill()` en fermeture de la pseudo-console, ce
+      // qui laisse échapper les petits-enfants (un `npm run dev` lancé dans le shell). Le SIGKILL
+      // différé est donc remplacé par un `taskkill /T` qui tue l'ARBRE complet.
+      if (process.platform === 'win32') s.proc.kill();
+      else process.kill(s.proc.pid, 'SIGTERM');
     } catch {
       return false;
     }
     s.killTimer ??= setTimeout(() => {
-      if (!s.exited) {
+      if (s.exited) return;
       try {
+        if (process.platform === 'win32') {
+          execFile('taskkill.exe', ['/PID', String(s.proc.pid), '/T', '/F'], () => {});
+        } else {
           process.kill(s.proc.pid, 'SIGKILL');
+        }
       } catch {
         /* déjà mort */
       }
-      }
     }, KILL_GRACE_MS);
     return true;
   }
@@ -558,6 +609,7 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
       dialog: act?.dialog ?? null,
       ...(s.addedDirs.length ? { addedDirs: s.addedDirs } : {}),
       groupId: s.groupId,
+      launchRunId: s.launchRunId,
     };
   }
 }

packages/server/src/core/session-match.ts

@@ -0,0 +1,33 @@
+// Adaptateur serveur de la corrélation session ↔ worktree : la RÈGLE vit dans `@arboretum/shared`
+// (`path-match.ts`, partagée avec le front et l'extension) ; ici on se contente de normaliser les
+// chemins avec `resolve()` avant de la lui passer, puisque le serveur manipule des chemins venant de
+// git, de la base et de requêtes (fins de slash, `..`, chemins relatifs au cwd du process).
+import { resolve } from 'node:path';
+import {
+  containsPath as sharedContains,
+  findWorktreeForCwd as sharedFind,
+  sessionBelongsToWorktree as sharedBelongs,
+} from '@arboretum/shared';
+
+export function containsPath(parent: string, child: string): boolean {
+  return sharedContains(resolve(parent), resolve(child));
+}
+
+export function sessionBelongsToWorktree(
+  session: { cwd: string; addedDirs?: string[] },
+  worktreePath: string,
+  others: string[] = [],
+): boolean {
+  return sharedBelongs(
+    { cwd: resolve(session.cwd), ...(session.addedDirs ? { addedDirs: session.addedDirs.map((d) => resolve(d)) } : {}) },
+    resolve(worktreePath),
+    others.map((p) => resolve(p)),
+  );
+}
+
+export function findWorktreeForCwd<T extends { path: string }>(cwd: string, worktrees: T[]): T | null {
+  // On résout une copie pour la comparaison, puis on renvoie l'objet d'origine (le chemin brut est ce
+  // que le reste du code attend, notamment les clés du watcher FS).
+  const normalized = worktrees.map((w) => ({ w, path: resolve(w.path) }));
+  return sharedFind(resolve(cwd), normalized)?.w ?? null;
+}

packages/server/src/core/worktree-manager.ts

@@ -9,6 +9,7 @@ import { existsSync, realpathSync } from 'node:fs';
 import type {
   DiscoverReposResponse,
   HookRunResult,
+  LaunchCommand,
   PostCreateHook,
   RepoSummary,
   SessionSummary,
@@ -27,6 +28,8 @@ import {
   amendCommit,
   cleanFiles,
   commitAll,
+  commitDiff,
+  commitLog,
   commitStaged,
   defaultBranch,
   fetchRemote,
@@ -37,6 +40,7 @@ import {
   isSafeRelativePath,
   isUnpushed,
   isValidBranchName,
+  isValidCommitish,
   listBranches,
   listChanges,
   listWorktrees,
@@ -52,7 +56,8 @@ import {
   type ParsedWorktree,
 } from './git.js';
 import type { FsWatcherService } from './fs-watcher.js';
-import type { FileChange, FileDiffResponse } from '@arboretum/shared';
+import { findWorktreeForCwd, sessionBelongsToWorktree } from './session-match.js';
+import type { CommitDiffResponse, FileChange, FileDiffResponse, WorktreeLogResponse } from '@arboretum/shared';
 
 const FACTS_TTL_MS = 2500;
 const HOOK_TIMEOUT_MS = 5 * 60_000;
@@ -71,6 +76,8 @@ interface RepoRow {
   pre_trust: number;
   created_at: string;
   hidden: number;
+  /** commandes de démarrage du projet (JSON array de LaunchCommand) ; '[]' par défaut. */
+  launch_commands: string;
 }
 
 export interface WorktreeManagerEvents {
@@ -101,6 +108,28 @@ function parseHooks(json: string): PostCreateHook[] {
   }
 }
 
+/** Parse la colonne `launch_commands` (JSON array de LaunchCommand) de façon défensive ; [] si invalide. */
+function parseLaunchCommands(json: string): LaunchCommand[] {
+  try {
+    const arr = JSON.parse(json) as unknown;
+    if (!Array.isArray(arr)) return [];
+    return arr
+      .filter(
+        (c): c is LaunchCommand =>
+          !!c && typeof c.id === 'string' && typeof c.label === 'string' && typeof c.run === 'string' && typeof c.enabled === 'boolean',
+      )
+      .map((c) => ({
+        id: c.id,
+        label: c.label,
+        run: c.run,
+        enabled: c.enabled,
+        ...(typeof c.cwd === 'string' && c.cwd.trim() !== '' ? { cwd: c.cwd } : {}),
+      }));
+  } catch {
+    return [];
+  }
+}
+
 function runHook(cwd: string, hook: PostCreateHook): Promise<HookRunResult> {
   return new Promise((resolveP) => {
     const t0 = Date.now();
@@ -128,6 +157,8 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
   private readonly locks = new Map<string, Promise<unknown>>();
   /** Scan de découverte en cours : coalesce boot + bouton + périodique sur un seul scan. */
   private scanInFlight: Promise<DiscoverReposResponse> | null = null;
+  /** Worktree épinglé au watcher FS pour chaque session vivante (clé = id de session). */
+  private readonly pinnedSessions = new Map<string, { repoId: string; path: string }>();
 
   constructor(
     private readonly db: Db,
@@ -145,6 +176,46 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
       if (row) void this.emitWorktree(row, path).catch(() => {});
       this.emit('worktree_changes', { repoId, path });
     });
+    // Une session vivante rend son worktree « actif » : on épingle son watcher FS pour que les
+    // compteurs git restent temps réel même si aucun client ne regarde ce worktree. C'est le cas
+    // nominal du travail en CLI : l'agent écrit dans un worktree de feature pendant qu'on regarde
+    // ailleurs. Sans cette épingle, le point « modifié » de l'arbre restait figé sur le dernier
+    // listing REST.
+    this.ptyManager.on('session_update', (s) => {
+      void this.syncSessionPin(s).catch(() => {});
+    });
+  }
+
+  /** Épingle (session vivante) ou libère (session terminée) le watcher FS du worktree d'une session. */
+  private async syncSessionPin(s: SessionSummary): Promise<void> {
+    if (!this.fsWatcher) return;
+    const pinned = this.pinnedSessions.get(s.id);
+    if (!s.live) {
+      if (!pinned) return;
+      this.pinnedSessions.delete(s.id);
+      this.fsWatcher.unpinSession(pinned.repoId, pinned.path);
+      return;
+    }
+    if (pinned) return; // déjà épinglé : `session_update` bat au rythme de l'activité
+    const target = await this.resolveWorktreeForCwd(s.cwd);
+    if (!target) return; // session hors de tout repo enregistré
+    this.pinnedSessions.set(s.id, target);
+    this.fsWatcher.pinSession(target.repoId, target.path);
+  }
+
+  /**
+   * Worktree connu (tous repos non masqués) contenant ce cwd, le plus spécifique. Un worktree lié vit
+   * souvent HORS de l'arborescence de son repo : on ne peut donc pas écarter un repo sur son seul
+   * chemin, il faut ses worktrees réels (servis par le cache court partagé avec les listings).
+   */
+  private async resolveWorktreeForCwd(cwd: string): Promise<{ repoId: string; path: string } | null> {
+    const rows = this.db.prepare('SELECT id, path FROM repos WHERE hidden = 0').all() as unknown as Array<{ id: string; path: string }>;
+    const candidates: Array<{ repoId: string; path: string }> = [];
+    for (const row of rows) {
+      const facts = await this.repoFacts(row).catch(() => []);
+      for (const f of facts) candidates.push({ repoId: row.id, path: f.w.path });
+    }
+    return findWorktreeForCwd(cwd, candidates);
   }
 
   // ---- repos ----
@@ -160,6 +231,7 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
       label: row.label,
       defaultBranch: row.default_branch,
       postCreateHooks: parseHooks(row.post_create_hooks),
+      launchCommands: parseLaunchCommands(row.launch_commands),
       preTrust: row.pre_trust === 1,
       createdAt: row.created_at,
       valid: await isRepo(row.path),
@@ -167,12 +239,18 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     };
   }
 
+  /** Résumé d'un repo par id (null si inconnu). Sert notamment au lancement de projet. */
+  async getRepo(id: string): Promise<RepoSummary | null> {
+    const row = this.getRepoRow(id);
+    return row ? this.rowToSummary(row) : null;
+  }
+
   async listRepos(): Promise<RepoSummary[]> {
     const rows = this.db.prepare('SELECT * FROM repos ORDER BY created_at ASC').all() as unknown as RepoRow[];
     return Promise.all(rows.map((r) => this.rowToSummary(r)));
   }
 
-  async addRepo(opts: { path: string; label?: string; postCreateHooks?: PostCreateHook[]; preTrust?: boolean }): Promise<RepoSummary> {
+  async addRepo(opts: { path: string; label?: string; postCreateHooks?: PostCreateHook[]; preTrust?: boolean; launchCommands?: LaunchCommand[] }): Promise<RepoSummary> {
     const path = opts.path;
     if (!isSafeAbsolutePath(path)) throw httpError(400, 'BAD_REQUEST', 'path must be an absolute, normalized path');
     if (!(await isRepo(path))) throw httpError(400, 'NOT_A_REPO', `Not a git repository root: ${path}`);
@@ -187,11 +265,12 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
       pre_trust: opts.preTrust ? 1 : 0,
       created_at: new Date().toISOString(),
       hidden: 0,
+      launch_commands: JSON.stringify(opts.launchCommands ?? []),
     };
     try {
       this.db
-        .prepare('INSERT INTO repos (id, path, label, default_branch, post_create_hooks, pre_trust, created_at, hidden) VALUES (?, ?, ?, ?, ?, ?, ?, ?)')
+        .prepare('INSERT INTO repos (id, path, label, default_branch, post_create_hooks, pre_trust, created_at, hidden, launch_commands) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)')
-        .run(row.id, row.path, row.label, row.default_branch, row.post_create_hooks, row.pre_trust, row.created_at, row.hidden);
+        .run(row.id, row.path, row.label, row.default_branch, row.post_create_hooks, row.pre_trust, row.created_at, row.hidden, row.launch_commands);
     } catch (err) {
       // Course possible avec un scan concurrent qui aurait inséré le même path entre le SELECT
       // d'unicité et cet INSERT (contrainte UNIQUE sur path) → on rend le même 409 explicite.
@@ -220,16 +299,17 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     this.fsWatcher?.pinRepo(row.id, resolve(row.path));
   }
 
-  async updateRepo(id: string, patch: { label?: string; postCreateHooks?: PostCreateHook[]; preTrust?: boolean; hidden?: boolean }): Promise<RepoSummary> {
+  async updateRepo(id: string, patch: { label?: string; postCreateHooks?: PostCreateHook[]; preTrust?: boolean; hidden?: boolean; launchCommands?: LaunchCommand[] }): Promise<RepoSummary> {
     const row = this.getRepoRow(id);
     if (!row) throw httpError(404, 'NOT_FOUND', 'No repo with this id');
     if (patch.label !== undefined) row.label = patch.label.trim() || row.label;
     if (patch.postCreateHooks !== undefined) row.post_create_hooks = JSON.stringify(patch.postCreateHooks);
     if (patch.preTrust !== undefined) row.pre_trust = patch.preTrust ? 1 : 0;
     if (patch.hidden !== undefined) row.hidden = patch.hidden ? 1 : 0;
+    if (patch.launchCommands !== undefined) row.launch_commands = JSON.stringify(patch.launchCommands);
     this.db
-      .prepare('UPDATE repos SET label = ?, post_create_hooks = ?, pre_trust = ?, hidden = ? WHERE id = ?')
+      .prepare('UPDATE repos SET label = ?, post_create_hooks = ?, pre_trust = ?, hidden = ?, launch_commands = ? WHERE id = ?')
-      .run(row.label, row.post_create_hooks, row.pre_trust, row.hidden, id);
+      .run(row.label, row.post_create_hooks, row.pre_trust, row.hidden, row.launch_commands, id);
     const summary = await this.rowToSummary(row);
     this.emit('repo_update', summary);
     // P11 : masqué → on libère le watcher permanent du principal ; ré-affiché → on le réarme.
@@ -287,6 +367,7 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
         pre_trust: 0,
         created_at: new Date().toISOString(),
         hidden: 0,
+        launch_commands: '[]',
       };
       const res = insert.run(row.id, row.path, row.label, row.created_at);
       if (res.changes === 1) {
@@ -301,20 +382,28 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
   // ---- worktrees ----
 
   /**
-   * Sessions (managées + découvertes) dont le cwd correspond à ce chemin de worktree.
+   * Sessions (managées + découvertes) rattachées à ce worktree : cwd dans le worktree (y compris un
+   * sous-répertoire de « Démarrer le projet ») ou worktree relié en `--add-dir` par une session de
+   * groupe · voir `sessionBelongsToWorktree`. `siblings` = les autres worktrees du repo, indispensables
+   * pour qu'un worktree imbriqué ne voie pas ses sessions attribuées aussi au checkout principal.
    * Les sessions explicitement masquées (`hidden`) sont exclues, cohérent avec `/api/v1/sessions`
    * (sans quoi le masquage était ignoré dans les fiches worktree). Le tri managées/externes est laissé
    * au client (interrupteur « afficher les externes »), qui dispose du champ `source`. La garde de
    * suppression réclame en revanche TOUTES les sessions vivantes (`includeHidden`) pour rester sûre.
    */
-  private sessionsForCwd(path: string, opts?: { includeHidden?: boolean }): SessionSummary[] {
+  private sessionsForCwd(path: string, opts?: { includeHidden?: boolean; siblings?: string[] }): SessionSummary[] {
-    const rp = resolve(path);
     return mergeSessions(this.ptyManager.list(), this.discovery.list())
-      .filter((s) => resolve(s.cwd) === rp)
+      .filter((s) => sessionBelongsToWorktree(s, path, opts?.siblings ?? []))
       .filter((s) => opts?.includeHidden || !s.hidden);
   }
 
-  private toSummary(repoId: string, repoPath: string, w: ParsedWorktree, status: WorktreeGitStatus): WorktreeSummary {
+  private toSummary(
+    repoId: string,
+    repoPath: string,
+    w: ParsedWorktree,
+    status: WorktreeGitStatus,
+    siblings: string[] = [],
+  ): WorktreeSummary {
     return {
       repoId,
       path: w.path,
@@ -325,11 +414,11 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
       prunable: w.prunable,
       isMain: resolve(w.path) === resolve(repoPath),
       git: status,
-      sessions: this.sessionsForCwd(w.path),
+      sessions: this.sessionsForCwd(w.path, { siblings }),
     };
   }
 
-  private async repoFacts(row: RepoRow, noCache = false): Promise<Array<{ w: ParsedWorktree; status: WorktreeGitStatus }>> {
+  private async repoFacts(row: { id: string; path: string }, noCache = false): Promise<Array<{ w: ParsedWorktree; status: WorktreeGitStatus }>> {
     const cached = this.factsCache.get(row.id);
     if (!noCache && cached && Date.now() - cached.at < FACTS_TTL_MS) return cached.facts;
     const parsed = (await listWorktrees(row.path)).filter((w) => !w.bare);
@@ -342,7 +431,8 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     const row = this.getRepoRow(repoId);
     if (!row) return [];
     const facts = await this.repoFacts(row, noCache);
-    return facts.map(({ w, status }) => this.toSummary(row.id, row.path, w, status));
+    const paths = facts.map(({ w }) => w.path);
+    return facts.map(({ w, status }) => this.toSummary(row.id, row.path, w, status, paths));
   }
 
   async listAllWorktrees(): Promise<WorktreeSummary[]> {
@@ -376,9 +466,19 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
   }
 
   private async emitWorktree(row: RepoRow, path: string): Promise<WorktreeSummary | null> {
-    const w = await this.findWorktree(row, path);
+    // On liste tous les worktrees du repo (et pas seulement celui visé) pour désambiguïser la
+    // corrélation des sessions entre worktrees imbriqués (cf. sessionsForCwd).
+    const all = (await listWorktrees(row.path)).filter((w) => !w.bare);
+    const rp = resolve(path);
+    const w = all.find((x) => resolve(x.path) === rp);
     if (!w) return null;
-    const summary = this.toSummary(row.id, row.path, w, await worktreeStatus(w.path));
+    const summary = this.toSummary(
+      row.id,
+      row.path,
+      w,
+      await worktreeStatus(w.path),
+      all.map((x) => x.path),
+    );
     this.emit('worktree_update', { repoId: row.id, worktree: summary });
     return summary;
   }
@@ -485,6 +585,25 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     return listChanges(w.path);
   }
 
+  /** Historique de la branche du worktree (lecture, hors lock) : « ce qui a déjà été acté ». */
+  async getWorktreeLog(repoId: string, path: string, opts: { limit?: number; skip?: number }): Promise<WorktreeLogResponse> {
+    const { w } = await this.requireWorktree(repoId, path);
+    const { commits, unpushedCount, hasUpstream } = await commitLog(w.path, opts);
+    return { repoId, path: w.path, commits, unpushedCount, hasUpstream };
+  }
+
+  /** Diff unifié complet d'un commit (lecture, hors lock). Le hash est validé par la couche git. */
+  async getCommitDiff(repoId: string, path: string, hash: string): Promise<CommitDiffResponse> {
+    const { w } = await this.requireWorktree(repoId, path);
+    if (!isValidCommitish(hash)) throw httpError(400, 'BAD_COMMIT', 'Invalid commit hash');
+    try {
+      const d = await commitDiff(w.path, hash);
+      return { path: w.path, commit: hash, binary: d.binary, tooLarge: d.tooLarge, diff: d.diff };
+    } catch (err) {
+      throw httpError(404, 'NOT_FOUND', (err as Error).message);
+    }
+  }
+
   /** Diff unifié d'un fichier (détecte untracked → `git diff --no-index`). Lecture, hors lock. */
   async getFileDiff(repoId: string, path: string, file: string, staged: boolean): Promise<FileDiffResponse> {
     const { w } = await this.requireWorktree(repoId, path);
@@ -601,6 +720,55 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     return abs;
   }
 
+  /**
+   * « Démarrer le projet » : résout le répertoire de base du lancement. Priorité au worktree
+   * `worktreePath` (validé comme worktree connu du repo), sinon worktree portant `branch`, sinon
+   * checkout principal. Le client ne passe JAMAIS un chemin brut non validé (défense en profondeur).
+   */
+  async resolveLaunchBase(repoId: string, opts: { worktreePath?: string; branch?: string }): Promise<string> {
+    const row = this.getRepoRow(repoId);
+    if (!row) throw httpError(404, 'NOT_FOUND', 'No repo with this id');
+    const wp = opts.worktreePath?.trim();
+    if (wp) {
+      if (!isSafeAbsolutePath(wp)) throw httpError(400, 'BAD_PATH', 'Worktree path must be absolute and normalized');
+      const w = await this.findWorktree(row, wp);
+      if (!w) throw httpError(404, 'NO_RESOLVABLE_WORKTREE', 'No such worktree under this repo');
+      return resolve(w.path);
+    }
+    const branch = opts.branch?.trim();
+    if (branch) {
+      const wts = await this.listRepoWorktrees(repoId);
+      const match = wts.find((w) => w.branch === branch);
+      if (!match) throw httpError(404, 'NO_RESOLVABLE_WORKTREE', `No worktree on branch ${branch}`);
+      return resolve(match.path);
+    }
+    return resolve(row.path); // checkout principal
+  }
+
+  /**
+   * Résout le sous-répertoire relatif d'une commande de lancement, borné au répertoire de base
+   * (anti `..`, anti symlink sortant), calqué sur assertPathInWorktree. Renvoie `base` si vide.
+   */
+  resolveLaunchSubdir(baseDir: string, relCwd?: string): string {
+    const base = resolve(baseDir);
+    const rel = relCwd?.trim();
+    if (!rel) return base;
+    if (!isSafeRelativePath(rel)) throw httpError(400, 'BAD_PATH', 'Invalid launch cwd');
+    const abs = resolve(join(base, rel));
+    if (abs !== base && !abs.startsWith(base + sep)) throw httpError(403, 'PATH_OUTSIDE_WORKTREE', 'Launch cwd escapes the worktree');
+    if (existsSync(abs)) {
+      let real: string;
+      try {
+        real = realpathSync(abs);
+      } catch {
+        throw httpError(400, 'BAD_PATH', 'Cannot resolve launch cwd');
+      }
+      const realBase = realpathSync(base);
+      if (real !== realBase && !real.startsWith(realBase + sep)) throw httpError(403, 'PATH_OUTSIDE_WORKTREE', 'Launch cwd escapes the worktree (symlink)');
+    }
+    return abs;
+  }
+
   /** Arme le watcher FS sur un worktree (validé) pour le push temps réel du détail. */
   async watch(repoId: string, path: string): Promise<void> {
     if (!this.fsWatcher) return;
@@ -729,8 +897,10 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     const w = await this.findWorktree(row, path);
     if (!w) throw httpError(404, 'NOT_FOUND', 'No such worktree under this repo');
     if (resolve(w.path) === resolve(row.path)) throw httpError(400, 'IS_MAIN_WORKTREE', 'Cannot remove the main worktree');
-    // garde-fou : une session vivante tourne dans ce worktree → exiger une confirmation explicite.
+    // garde-fou : une session vivante tourne dans ce worktree (ou dans un de ses sous-répertoires, ou
-    if (!force && this.sessionsForCwd(w.path, { includeHidden: true }).some((s) => s.live)) {
+    // le relie en `--add-dir`) → exiger une confirmation explicite.
+    const siblings = (await listWorktrees(row.path)).map((x) => x.path);
+    if (!force && this.sessionsForCwd(w.path, { includeHidden: true, siblings }).some((s) => s.live)) {
       throw httpError(409, 'SESSION_LIVE_IN_WORKTREE', 'A live session runs in this worktree: pass force to delete anyway');
     }
     return this.withLock(repoId, async () => {

packages/server/src/db/index.ts

@@ -191,6 +191,16 @@ const MIGRATIONS: Array<{ id: number; sql: string }> = [
       ALTER TABLE repos ADD COLUMN credential_id TEXT;
     `,
   },
+  {
+    // « Démarrer le projet » : commandes de démarrage multi-terminaux, stockées en JSON sur le
+    // repo (miroir de post_create_hooks). Chaque terminal lancé porte un launch_run_id partagé
+    // (regroupement UI + « tout arrêter ») ; pas de FK (cohérent avec sessions.group_id #8).
+    id: 13,
+    sql: `
+      ALTER TABLE repos ADD COLUMN launch_commands TEXT NOT NULL DEFAULT '[]';
+      ALTER TABLE sessions ADD COLUMN launch_run_id TEXT;
+    `,
+  },
 ];
 
 export type Db = DatabaseSync;

packages/server/src/routes/git.ts

@@ -5,7 +5,9 @@
 import type { FastifyInstance } from 'fastify';
 import type {
   WorktreeChangesResponse,
+  CommitDiffResponse,
   FileDiffResponse,
+  WorktreeLogResponse,
   WorktreeFilesRequest,
   DiscardFilesRequest,
   FetchWorktreeRequest,
@@ -33,12 +35,48 @@ export function registerGitRoutes(app: FastifyInstance, wt: WorktreeManager, db:
     }
   });
 
-  // Diff unifié d'un fichier (staged ou non ; untracked détecté côté manager).
+  // Historique de la branche du worktree (« ce qui a déjà été acté », + ce qui n'est pas poussé).
+  app.get('/api/v1/repos/:id/worktrees/log', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const q = req.query as { path?: string; limit?: string; skip?: string };
+    if (typeof q.path !== 'string' || q.path === '') {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'path is required' } });
+    }
+    // Bornes appliquées côté couche git (limite dure) : ici on se contente de convertir.
+    const limit = q.limit !== undefined ? Number(q.limit) : undefined;
+    const skip = q.skip !== undefined ? Number(q.skip) : undefined;
+    if ((limit !== undefined && !Number.isFinite(limit)) || (skip !== undefined && !Number.isFinite(skip))) {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'limit and skip must be numbers' } });
+    }
+    try {
+      const res = await wt.getWorktreeLog(id, q.path, {
+        ...(limit !== undefined ? { limit } : {}),
+        ...(skip !== undefined ? { skip } : {}),
+      });
+      return reply.send(res satisfies WorktreeLogResponse);
+    } catch (err) {
+      return sendManagerError(reply, err);
+    }
+  });
+
+  // Diff unifié : d'un fichier (`file`), ou d'un commit entier (`commit`). Les deux formes renvoient un
+  // diff unifié, donc le même parseur et la même vue côté client.
   app.get('/api/v1/repos/:id/worktrees/diff', async (req, reply) => {
     const { id } = req.params as { id: string };
-    const q = req.query as { path?: string; file?: string; staged?: string };
+    const q = req.query as { path?: string; file?: string; staged?: string; commit?: string };
-    if (typeof q.path !== 'string' || q.path === '' || typeof q.file !== 'string' || q.file === '') {
+    if (typeof q.path !== 'string' || q.path === '') {
-      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'path and file are required' } });
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'path is required' } });
+    }
+    if (typeof q.commit === 'string' && q.commit !== '') {
+      try {
+        const res = await wt.getCommitDiff(id, q.path, q.commit);
+        return reply.send(res satisfies CommitDiffResponse);
+      } catch (err) {
+        return sendManagerError(reply, err);
+      }
+    }
+    if (typeof q.file !== 'string' || q.file === '') {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'file or commit is required' } });
     }
     const staged = q.staged === '1' || q.staged === 'true';
     try {

packages/server/src/routes/repos.ts

@@ -1,8 +1,22 @@
 import type { FastifyInstance, FastifyReply } from 'fastify';
-import type { CreateRepoRequest, DiscoverReposResponse, RepoResponse, ReposListResponse, UpdateRepoRequest } from '@arboretum/shared';
+import { randomUUID } from 'node:crypto';
+import type {
+  CreateRepoRequest,
+  DetectLaunchResponse,
+  DiscoverReposResponse,
+  RepoResponse,
+  ReposListResponse,
+  SessionSummary,
+  StartLaunchRequest,
+  StartLaunchResponse,
+  UpdateRepoRequest,
+} from '@arboretum/shared';
 import type { WorktreeManager } from '../core/worktree-manager.js';
+import type { PtyManager } from '../core/pty-manager.js';
 import type { Db } from '../db/index.js';
 import { readScanRoots } from '../core/scan-settings.js';
+import { recordAudit } from '../core/audit-log.js';
+import { detectLaunchCommands } from '../core/launch-detect.js';
 
 /** Mappe une erreur du manager (statusCode + code) vers une réponse REST normalisée. */
 export function sendManagerError(reply: FastifyReply, err: unknown): FastifyReply {
@@ -10,7 +24,7 @@ export function sendManagerError(reply: FastifyReply, err: unknown): FastifyRepl
   return reply.status(e.statusCode ?? 500).send({ error: { code: e.code ?? 'INTERNAL', message: e.message ?? 'Internal error' } });
 }
 
-export function registerRepoRoutes(app: FastifyInstance, wt: WorktreeManager, db: Db): void {
+export function registerRepoRoutes(app: FastifyInstance, wt: WorktreeManager, db: Db, manager: PtyManager): void {
   app.get('/api/v1/repos', async (): Promise<ReposListResponse> => ({ repos: await wt.listRepos() }));
 
   // Scan manuel : découvre et auto-enregistre les repos sous les racines configurées (settings).
@@ -34,6 +48,7 @@ export function registerRepoRoutes(app: FastifyInstance, wt: WorktreeManager, db
         ...(body.label !== undefined ? { label: body.label } : {}),
         ...(body.postCreateHooks !== undefined ? { postCreateHooks: body.postCreateHooks } : {}),
         ...(body.preTrust !== undefined ? { preTrust: body.preTrust } : {}),
+        ...(body.launchCommands !== undefined ? { launchCommands: body.launchCommands } : {}),
       });
       const res: RepoResponse = { repo };
       return reply.status(201).send(res);
@@ -51,6 +66,7 @@ export function registerRepoRoutes(app: FastifyInstance, wt: WorktreeManager, db
         ...(body.postCreateHooks !== undefined ? { postCreateHooks: body.postCreateHooks } : {}),
         ...(body.preTrust !== undefined ? { preTrust: body.preTrust } : {}),
         ...(typeof body.hidden === 'boolean' ? { hidden: body.hidden } : {}),
+        ...(body.launchCommands !== undefined ? { launchCommands: body.launchCommands } : {}),
       });
       const res: RepoResponse = { repo };
       return reply.send(res);
@@ -66,4 +82,79 @@ export function registerRepoRoutes(app: FastifyInstance, wt: WorktreeManager, db
     }
     return reply.send({ ok: true });
   });
+
+  // « Démarrer le projet » : suggestions de commandes détectées dans le répertoire cible
+  // (package.json/Procfile/docker-compose). Le worktree cible est résolu côté serveur.
+  app.get('/api/v1/repos/:id/launch/detect', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const query = (req.query as { worktreePath?: string }) ?? {};
+    try {
+      const base = await wt.resolveLaunchBase(id, {
+        ...(typeof query.worktreePath === 'string' ? { worktreePath: query.worktreePath } : {}),
+      });
+      return reply.send({ suggestions: detectLaunchCommands(base) } satisfies DetectLaunchResponse);
+    } catch (err) {
+      return sendManagerError(reply, err);
+    }
+  });
+
+  // « Démarrer le projet » : lance un terminal (session managée) par commande activée, tous reliés
+  // par un même launchRunId. Le cwd de chaque terminal est borné au worktree cible (anti-traversal).
+  app.post('/api/v1/repos/:id/launch', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const body = (req.body as Partial<StartLaunchRequest> | null) ?? {};
+
+    let repo;
+    try {
+      repo = await wt.getRepo(id);
+    } catch (err) {
+      return sendManagerError(reply, err);
+    }
+    if (!repo) return reply.status(404).send({ error: { code: 'NOT_FOUND', message: 'No repo with this id' } });
+
+    // Sélection explicite par `commandIds` (outrepasse `enabled`) ; sinon toutes les commandes activées.
+    const wanted = Array.isArray(body.commandIds) ? new Set(body.commandIds) : null;
+    const commands = wanted ? repo.launchCommands.filter((c) => wanted.has(c.id)) : repo.launchCommands.filter((c) => c.enabled);
+    if (commands.length === 0) {
+      return reply.status(400).send({ error: { code: 'NO_LAUNCH_COMMANDS', message: 'No launch command to start (define or enable commands first)' } });
+    }
+
+    let base: string;
+    try {
+      base = await wt.resolveLaunchBase(id, {
+        ...(typeof body.worktreePath === 'string' ? { worktreePath: body.worktreePath } : {}),
+        ...(typeof body.branch === 'string' ? { branch: body.branch } : {}),
+      });
+    } catch (err) {
+      return sendManagerError(reply, err);
+    }
+
+    const launchRunId = randomUUID();
+    const sessions: SessionSummary[] = [];
+    const skipped: Array<{ id: string; reason: string }> = [];
+    for (const cmd of commands) {
+      if (cmd.run.trim() === '') {
+        skipped.push({ id: cmd.id, reason: 'empty command' });
+        continue;
+      }
+      try {
+        const cwd = wt.resolveLaunchSubdir(base, cmd.cwd);
+        sessions.push(
+          manager.spawn({ cwd, command: 'bash', login: true, initialInput: cmd.run, title: cmd.label, launchRunId }),
+        );
+      } catch (err) {
+        skipped.push({ id: cmd.id, reason: err instanceof Error ? err.message : String(err) });
+      }
+    }
+    if (sessions.length === 0) {
+      return reply.status(400).send({ error: { code: 'LAUNCH_FAILED', message: 'No launch command could be started', details: skipped } });
+    }
+    recordAudit(db, {
+      actor: req.authContext?.tokenId ?? 'unknown',
+      action: 'repo.launch',
+      resourceId: id,
+      details: { launchRunId, started: sessions.length, skipped: skipped.length },
+    });
+    return reply.status(201).send({ sessions, skipped } satisfies StartLaunchResponse);
+  });
 }

packages/server/test/cli-install.test.ts

@@ -12,6 +12,7 @@ import {
   xmlEscape,
   systemdUnitPath,
   launchAgentPlistPath,
+  windowsCreateArgs,
 } from '../src/cli/install.js';
 
 describe('cli install · detectPlatform', () => {
@@ -20,9 +21,10 @@ describe('cli install · detectPlatform', () => {
     expect(detectPlatform('darwin')).toBe('darwin');
   });
 
-  it('rejette les autres plateformes avec un message clair', () => {
+  it('rejette les plateformes sans superviseur connu, avec un message clair', () => {
-    expect(() => detectPlatform('win32')).toThrow(/Linux \(systemd\) and macOS \(launchd\)/);
+    // win32 est désormais SUPPORTÉ (Planificateur de tâches) : cf. la suite dédiée plus bas.
     expect(() => detectPlatform('freebsd')).toThrow(/freebsd/);
+    expect(() => detectPlatform('aix')).toThrow(/Task Scheduler/);
   });
 });
 
@@ -192,3 +194,30 @@ describe('cli install · chemins', () => {
     );
   });
 });
+
+describe('P14 · Windows (Planificateur de tâches)', () => {
+  it('detectPlatform accepte win32', () => {
+    expect(detectPlatform('win32')).toBe('win32');
+    expect(() => detectPlatform('freebsd')).toThrow(/Task Scheduler/);
+  });
+
+  it('windowsCreateArgs : tâche à l’ouverture de session, sans élévation, idempotente', () => {
+    const args = windowsCreateArgs({
+      taskName: 'Arboretum',
+      exec: 'C:\\Program Files\\nodejs\\node.exe',
+      scriptArgs: ['C:\\app\\dist\\index.js', '--port', '7317'],
+    });
+    expect(args).toEqual([
+      '/Create',
+      '/TN',
+      'Arboretum',
+      '/TR',
+      '"C:\\Program Files\\nodejs\\node.exe" C:\\app\\dist\\index.js --port 7317',
+      '/SC',
+      'ONLOGON',
+      '/RL',
+      'LIMITED',
+      '/F',
+    ]);
+  });
+});

packages/server/test/git.test.ts

@@ -32,6 +32,10 @@ import {
   amendCommit,
   lastCommit,
   isUnpushed,
+  commitLog,
+  commitDiff,
+  isValidCommitish,
+  parseLogZ,
 } from '../src/core/git.js';
 import { appendFileSync } from 'node:fs';
 
@@ -318,3 +322,79 @@ describe('addWorktree : résolution auto (créer / réutiliser)', () => {
     await expect(addWorktree(repo, { path: wt, branch: 'dup', mode: 'create' })).rejects.toBeDefined();
   });
 });
+
+describe('P14 · historique (commitLog / commitDiff)', () => {
+  it('parseLogZ : découpe par paquets de champs et tolère un sujet multi-lignes', () => {
+    const stdout = ['h1', 's1', 'auteur', '2026-01-01T00:00:00Z', 'sujet\navec saut', 'h2', 's2', 'a2', 'd2', 'sujet 2'].join('\0');
+    const recs = parseLogZ(stdout, 5);
+    expect(recs).toHaveLength(2);
+    expect(recs[0]?.[4]).toBe('sujet\navec saut');
+    expect(recs[1]?.[0]).toBe('h2');
+  });
+
+  it('parseLogZ : ignore un enregistrement final vide (NUL de fin)', () => {
+    expect(parseLogZ(['h', 's', 'a', 'd', 'sub', ''].join('\0'), 5)).toHaveLength(1);
+  });
+
+  it('isValidCommitish : hex 4-64 uniquement (refuse une option déguisée)', () => {
+    expect(isValidCommitish('abc1234')).toBe(true);
+    expect(isValidCommitish('ABCDEF12')).toBe(true);
+    expect(isValidCommitish('abc')).toBe(false);
+    expect(isValidCommitish('--upload-pack=x')).toBe(false);
+    expect(isValidCommitish('HEAD')).toBe(false);
+    expect(isValidCommitish('main..HEAD')).toBe(false);
+  });
+
+  it('commitLog : ordre récent → ancien, champs remplis, sans upstream tout est local', async () => {
+    const repo = makeTmpRepo();
+    appendFileSync(join(repo, 'README.md'), 'second\n');
+    await commitAll(repo, 'deuxième commit');
+
+    const { commits, hasUpstream, unpushedCount } = await commitLog(repo);
+    expect(commits).toHaveLength(2);
+    expect(commits[0]?.subject).toBe('deuxième commit');
+    expect(commits[1]?.subject).toBe('init');
+    expect(commits[0]?.hash).toMatch(/^[0-9a-f]{40}$/);
+    expect(commits[0]?.shortHash.length).toBeGreaterThanOrEqual(7);
+    expect(commits[0]?.author).toBe('Test');
+    expect(Number.isNaN(Date.parse(commits[0]?.date ?? ''))).toBe(false);
+    // branche locale sans remote : aucun commit n'est publié
+    expect(hasUpstream).toBe(false);
+    expect(unpushedCount).toBe(0);
+  });
+
+  it('commitLog : limit et skip bornent la fenêtre', async () => {
+    const repo = makeTmpRepo();
+    for (const n of [1, 2, 3]) {
+      appendFileSync(join(repo, 'README.md'), `line ${n}\n`);
+      await commitAll(repo, `commit ${n}`);
+    }
+    expect((await commitLog(repo, { limit: 2 })).commits.map((c) => c.subject)).toEqual(['commit 3', 'commit 2']);
+    expect((await commitLog(repo, { limit: 1, skip: 2 })).commits.map((c) => c.subject)).toEqual(['commit 1']);
+  });
+
+  it('commitLog : dépôt sans aucun commit → liste vide, pas d’exception', async () => {
+    const dir = mkdtempSync(join(tmpdir(), 'arb-git-empty-'));
+    dirs.push(dir);
+    execFileSync('git', ['init', '-b', 'main'], { cwd: dir, stdio: 'pipe' });
+    const res = await commitLog(dir);
+    expect(res.commits).toEqual([]);
+    expect(res.hasUpstream).toBe(false);
+  });
+
+  it('commitDiff : diff unifié du commit demandé, hash invalide et inconnu rejetés', async () => {
+    const repo = makeTmpRepo();
+    writeFileSync(join(repo, 'nouveau.txt'), 'contenu\n');
+    await commitAll(repo, 'ajout fichier');
+    const [head] = (await commitLog(repo)).commits;
+
+    const d = await commitDiff(repo, head?.hash ?? '');
+    expect(d.binary).toBe(false);
+    expect(d.tooLarge).toBe(false);
+    expect(d.diff).toContain('nouveau.txt');
+    expect(d.diff).toContain('+contenu');
+
+    await expect(commitDiff(repo, 'HEAD')).rejects.toThrow(/Invalid commit hash/);
+    await expect(commitDiff(repo, 'deadbeef')).rejects.toThrow(/Unknown commit/);
+  });
+});

packages/server/test/launch-detect.test.ts

@@ -0,0 +1,55 @@
+import { afterAll, describe, expect, it } from 'vitest';
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { detectLaunchCommands } from '../src/core/launch-detect.js';
+
+const tmp = mkdtempSync(join(tmpdir(), 'launch-detect-'));
+afterAll(() => rmSync(tmp, { recursive: true, force: true }));
+
+function fixture(name: string, files: Record<string, string>): string {
+  const dir = join(tmp, name);
+  mkdirSync(dir, { recursive: true });
+  for (const [f, content] of Object.entries(files)) writeFileSync(join(dir, f), content);
+  return dir;
+}
+
+describe('detectLaunchCommands', () => {
+  it('extrait les scripts npm (par défaut : npm run), active les scripts de dev', () => {
+    const dir = fixture('npm', {
+      'package.json': JSON.stringify({ scripts: { dev: 'vite', build: 'vite build', 'test:unit': 'vitest' } }),
+    });
+    const cmds = detectLaunchCommands(dir);
+    const dev = cmds.find((c) => c.run === 'npm run dev');
+    const build = cmds.find((c) => c.run === 'npm run build');
+    expect(dev?.enabled).toBe(true); // heuristique : dev/start/serve/watch activés
+    expect(build?.enabled).toBe(false);
+    expect(cmds.some((c) => c.run === 'npm run test:unit')).toBe(true);
+  });
+
+  it('utilise pnpm/yarn selon le lockfile présent', () => {
+    const pnpm = fixture('pnpm', { 'package.json': JSON.stringify({ scripts: { dev: 'x' } }), 'pnpm-lock.yaml': '' });
+    expect(detectLaunchCommands(pnpm).find((c) => c.label === 'dev')?.run).toBe('pnpm run dev');
+    const yarn = fixture('yarn', { 'package.json': JSON.stringify({ scripts: { dev: 'x' } }), 'yarn.lock': '' });
+    expect(detectLaunchCommands(yarn).find((c) => c.label === 'dev')?.run).toBe('yarn dev');
+  });
+
+  it('lit le Procfile (name: command), toutes activées', () => {
+    const dir = fixture('proc', { Procfile: 'web: bundle exec puma\nworker: rake jobs:work\n# comment\n' });
+    const cmds = detectLaunchCommands(dir);
+    expect(cmds.find((c) => c.label === 'web')?.run).toBe('bundle exec puma');
+    expect(cmds.find((c) => c.label === 'worker')?.enabled).toBe(true);
+    expect(cmds).toHaveLength(2); // la ligne de commentaire est ignorée
+  });
+
+  it('suggère docker compose up si un fichier compose est présent', () => {
+    const dir = fixture('compose', { 'compose.yaml': 'services: {}' });
+    expect(detectLaunchCommands(dir).some((c) => c.run === 'docker compose up')).toBe(true);
+  });
+
+  it('tolère un répertoire vide ou un package.json invalide', () => {
+    expect(detectLaunchCommands(join(tmp, 'inexistant'))).toEqual([]);
+    const bad = fixture('bad', { 'package.json': '{ not json' });
+    expect(detectLaunchCommands(bad)).toEqual([]);
+  });
+});

packages/server/test/session-match.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { containsPath, findWorktreeForCwd, sessionBelongsToWorktree } from '../src/core/session-match.js';
+
+describe('containsPath', () => {
+  it('vrai pour le répertoire lui-même', () => {
+    expect(containsPath('/p/repo', '/p/repo')).toBe(true);
+  });
+
+  it('vrai pour un descendant', () => {
+    expect(containsPath('/p/repo', '/p/repo/packages/api')).toBe(true);
+  });
+
+  it('compare par segment, pas par préfixe de chaîne', () => {
+    // /p/repo ne contient PAS /p/repo-wt-feature (piège du startsWith nu)
+    expect(containsPath('/p/repo', '/p/repo-wt-feature')).toBe(false);
+  });
+
+  it('faux pour un ancêtre', () => {
+    expect(containsPath('/p/repo/api', '/p/repo')).toBe(false);
+  });
+
+  it('normalise les chemins non résolus', () => {
+    expect(containsPath('/p/repo', '/p/repo/./api/../api')).toBe(true);
+  });
+});
+
+describe('sessionBelongsToWorktree', () => {
+  it('rattache une session lancée à la racine du worktree', () => {
+    expect(sessionBelongsToWorktree({ cwd: '/p/repo' }, '/p/repo')).toBe(true);
+  });
+
+  it('rattache une session lancée dans un sous-répertoire (« Démarrer le projet »)', () => {
+    // LaunchCommand.cwd autorise un sous-dossier : le terminal doit rester visible sous son worktree.
+    expect(sessionBelongsToWorktree({ cwd: '/p/repo/packages/api' }, '/p/repo')).toBe(true);
+  });
+
+  it('ne rattache pas une session d’un worktree frère', () => {
+    expect(sessionBelongsToWorktree({ cwd: '/p/repo-wt-feat' }, '/p/repo')).toBe(false);
+  });
+
+  it('donne un worktree imbriqué au plus spécifique, pas au principal', () => {
+    const session = { cwd: '/p/repo/.worktrees/feat/src' };
+    const all = ['/p/repo', '/p/repo/.worktrees/feat'];
+    expect(sessionBelongsToWorktree(session, '/p/repo/.worktrees/feat', all)).toBe(true);
+    expect(sessionBelongsToWorktree(session, '/p/repo', all)).toBe(false);
+  });
+
+  it('rattache une session de groupe via ses répertoires reliés', () => {
+    // cwd = parent commun (hors des repos), les worktrees couverts vivent dans addedDirs.
+    const session = { cwd: '/p', addedDirs: ['/p/api', '/p/web'] };
+    expect(sessionBelongsToWorktree(session, '/p/api')).toBe(true);
+    expect(sessionBelongsToWorktree(session, '/p/web')).toBe(true);
+    expect(sessionBelongsToWorktree(session, '/p/docs')).toBe(false);
+  });
+
+  it('ignore un addedDirs absent', () => {
+    expect(sessionBelongsToWorktree({ cwd: '/p/api' }, '/p/api', [])).toBe(true);
+  });
+});
+
+describe('findWorktreeForCwd', () => {
+  const worktrees = [
+    { repoId: 'r1', path: '/p/api' },
+    { repoId: 'r1', path: '/p/api-wt-feat' },
+    { repoId: 'r2', path: '/p/api/vendor/web' },
+  ];
+
+  it('choisit le worktree le plus spécifique', () => {
+    expect(findWorktreeForCwd('/p/api/vendor/web/src', worktrees)?.repoId).toBe('r2');
+  });
+
+  it('choisit le worktree frère exact et non le préfixe de chaîne', () => {
+    expect(findWorktreeForCwd('/p/api-wt-feat/src', worktrees)?.path).toBe('/p/api-wt-feat');
+  });
+
+  it('renvoie null hors de tout worktree connu', () => {
+    expect(findWorktreeForCwd('/tmp/ailleurs', worktrees)).toBeNull();
+  });
+});

packages/server/test/windows-support.test.ts

@@ -0,0 +1,94 @@
+// Support Windows du daemon : helpers purs, testés avec la plateforme INJECTÉE (ils doivent donc être
+// vérifiables depuis Linux). Chacun corrige un point qui rendait le daemon inutilisable sur Windows.
+import { describe, expect, it } from 'vitest';
+import { buildSpawnSpec, resolveInteractiveShell, resolvePlainShell, whichCommand } from '../src/core/claude-launcher.js';
+import { askpassScript } from '../src/core/git-auth.js';
+import { defaultDataRoot } from '../src/config.js';
+
+describe('recherche du binaire claude dans le PATH', () => {
+  it('utilise where.exe sur Windows, which ailleurs', () => {
+    expect(whichCommand('win32')).toEqual({ file: 'where.exe', args: ['claude'] });
+    expect(whichCommand('linux')).toEqual({ file: 'which', args: ['claude'] });
+    expect(whichCommand('darwin').file).toBe('which');
+  });
+});
+
+describe('shell de lancement', () => {
+  it('POSIX : $SHELL connu en login interactif, sinon bash', () => {
+    expect(resolveInteractiveShell('linux', { SHELL: '/usr/bin/zsh' })).toEqual({ file: '/usr/bin/zsh', args: ['-l', '-i'] });
+    expect(resolveInteractiveShell('linux', { SHELL: '/bin/dash' })).toEqual({ file: 'bash', args: ['-l', '-i'] });
+    expect(resolveInteractiveShell('linux', {})).toEqual({ file: 'bash', args: ['-l', '-i'] });
+  });
+
+  it('Windows : PowerShell qui reste attaché après la commande auto-tapée', () => {
+    const shell = resolveInteractiveShell('win32', {});
+    expect(shell.file).toBe('powershell.exe');
+    expect(shell.args).toContain('-NoExit');
+  });
+
+  it('Windows : le shell est surchargeable par ARBORETUM_SHELL', () => {
+    expect(resolveInteractiveShell('win32', { ARBORETUM_SHELL: 'pwsh.exe' }).file).toBe('pwsh.exe');
+  });
+
+  it('terminal simple : bash --norc sur POSIX, PowerShell sur Windows', () => {
+    expect(resolvePlainShell('linux')).toEqual({ file: 'bash', args: ['--norc'] });
+    expect(resolvePlainShell('win32').file).toBe('powershell.exe');
+  });
+});
+
+describe('buildSpawnSpec · plateforme injectée', () => {
+  it('command=bash sur Windows lance PowerShell (le contrat d’API reste claude|bash)', () => {
+    const spec = buildSpawnSpec({ command: 'bash', platform: 'win32' });
+    expect(spec.file).toBe('powershell.exe');
+    expect(spec.env.TERM).toBe('xterm-256color');
+  });
+
+  it('command=bash avec login sur Windows reste attaché', () => {
+    expect(buildSpawnSpec({ command: 'bash', login: true, platform: 'win32' }).args).toContain('-NoExit');
+  });
+
+  it('command=bash sur Linux inchangé', () => {
+    expect(buildSpawnSpec({ command: 'bash', platform: 'linux' })).toMatchObject({ file: 'bash', args: ['--norc'] });
+  });
+});
+
+describe('script askpass git', () => {
+  it('Windows : .cmd (un .sh à shebang n’y est pas exécutable)', () => {
+    const s = askpassScript('win32');
+    expect(s.name).toBe('askpass.cmd');
+    expect(s.content).toContain('@echo off');
+    expect(s.content).toContain('ARB_GIT_USER');
+    expect(s.content).toContain('ARB_GIT_PASS');
+  });
+
+  it('POSIX : .sh avec shebang', () => {
+    const s = askpassScript('linux');
+    expect(s.name).toBe('askpass.sh');
+    expect(s.content.startsWith('#!/bin/sh')).toBe(true);
+    expect(s.mode).toBe(0o700);
+  });
+
+  it('les deux variantes distinguent Username du mot de passe', () => {
+    for (const p of ['win32', 'linux'] as const) {
+      const c = askpassScript(p).content;
+      expect(c).toMatch(/Username/i);
+    }
+  });
+});
+
+describe('racine des données', () => {
+  it('XDG_DATA_HOME est prioritaire partout (l’app de bureau s’en sert pour isoler)', () => {
+    expect(defaultDataRoot('win32', { XDG_DATA_HOME: '/iso' }, '/home/u')).toBe('/iso');
+    expect(defaultDataRoot('linux', { XDG_DATA_HOME: '/iso' }, '/home/u')).toBe('/iso');
+  });
+
+  it('Windows : %APPDATA%, avec repli sur AppData/Roaming', () => {
+    expect(defaultDataRoot('win32', { APPDATA: 'C:\\Users\\u\\AppData\\Roaming' }, 'C:\\Users\\u')).toBe('C:\\Users\\u\\AppData\\Roaming');
+    expect(defaultDataRoot('win32', {}, '/home/u')).toBe('/home/u/AppData/Roaming');
+  });
+
+  it('POSIX : ~/.local/share', () => {
+    expect(defaultDataRoot('linux', {}, '/home/u')).toBe('/home/u/.local/share');
+    expect(defaultDataRoot('darwin', {}, '/Users/u')).toBe('/Users/u/.local/share');
+  });
+});

packages/shared/src/api.ts

@@ -1,5 +1,5 @@
 // Types REST partagés (préfixe /api/v1).
-import type { CloneOperation, GroupSummary, PostCreateHook, RepoSummary, SessionSummary, SettingsBroadcast, WorktreeSummary } from './protocol.js';
+import type { CloneOperation, GroupSummary, LaunchCommand, PostCreateHook, RepoSummary, SessionSummary, SettingsBroadcast, WorktreeSummary } from './protocol.js';
 
 export interface ApiError {
   error: { code: string; message: string; details?: unknown };
@@ -99,6 +99,8 @@ export interface CreateRepoRequest {
   label?: string;
   postCreateHooks?: PostCreateHook[];
   preTrust?: boolean;
+  /** commandes de démarrage du projet (« Démarrer le projet »). */
+  launchCommands?: LaunchCommand[];
 }
 export interface UpdateRepoRequest {
   label?: string;
@@ -106,6 +108,8 @@ export interface UpdateRepoRequest {
   preTrust?: boolean;
   /** true = masquer le repo (exclu du dashboard, conservé en DB) ; false = ré-afficher. */
   hidden?: boolean;
+  /** commandes de démarrage du projet (« Démarrer le projet »). */
+  launchCommands?: LaunchCommand[];
 }
 
 /** Résultat d'un scan de découverte (POST /api/v1/repos/discover). */
@@ -233,6 +237,37 @@ export interface FileDiffResponse {
   /** texte du diff unifié git (vide si binaire ou tooLarge). */
   diff: string;
 }
+/** Un commit de l'historique d'un worktree (GET .../worktrees/log). */
+export interface CommitEntry {
+  /** hash complet (clé stable, utilisée pour demander le diff du commit). */
+  hash: string;
+  /** hash court tel que git l'abrège (affichage). */
+  shortHash: string;
+  author: string;
+  /** date d'auteur ISO 8601 (%aI). */
+  date: string;
+  subject: string;
+}
+/**
+ * GET /api/v1/repos/:id/worktrees/log?path=&limit=&skip= : historique de la branche du worktree.
+ * `unpushedCount` compte les commits de tête pas encore poussés ; `hasUpstream: false` signifie qu'aucun
+ * commit n'est publié (branche purement locale) et que TOUS sont donc à considérer comme non poussés.
+ */
+export interface WorktreeLogResponse {
+  repoId: string;
+  path: string;
+  commits: CommitEntry[];
+  unpushedCount: number;
+  hasUpstream: boolean;
+}
+/** GET /api/v1/repos/:id/worktrees/diff?path=&commit= : diff unifié complet d'un commit. */
+export interface CommitDiffResponse {
+  path: string;
+  commit: string;
+  binary: boolean;
+  tooLarge: boolean;
+  diff: string;
+}
 /** GET /api/v1/repos/:id/files/content?wt=&path= : contenu d'un fichier (pour l'éditeur Monaco). */
 export interface FileContentResponse {
   /** chemin relatif au worktree (POSIX). */
@@ -313,6 +348,31 @@ export interface StartRepoSessionRequest {
   newBranch?: boolean;
 }
 
+// ---- « Démarrer le projet » : lancement multi-terminaux ----
+/**
+ * POST /api/v1/repos/:id/launch : lance un terminal par commande de démarrage activée du repo.
+ * Le worktree cible est résolu côté serveur (le client ne passe jamais de chemin absolu brut) :
+ * `worktreePath` prioritaire, sinon worktree de `branch`, sinon checkout principal.
+ */
+export interface StartLaunchRequest {
+  /** worktree cible (chemin absolu d'un worktree connu du repo) ; défaut : checkout principal. */
+  worktreePath?: string;
+  /** alternative à `worktreePath` : worktree portant cette branche. */
+  branch?: string;
+  /** ids des commandes à lancer (défaut : toutes les commandes activées du repo). */
+  commandIds?: string[];
+}
+export interface StartLaunchResponse {
+  /** un terminal (session managée) par commande lancée, partageant le même launchRunId. */
+  sessions: SessionSummary[];
+  /** commandes non lancées (répertoire cible introuvable, cwd invalide…). */
+  skipped: Array<{ id: string; reason: string }>;
+}
+/** GET /api/v1/repos/:id/launch/detect : suggestions de commandes détectées dans le projet. */
+export interface DetectLaunchResponse {
+  suggestions: LaunchCommand[];
+}
+
 // ---- Groupes de travail (P5) ----
 export interface GroupsListResponse {
   groups: GroupSummary[];

packages/shared/src/index.ts

@@ -1,3 +1,4 @@
 export * from './protocol.js';
 export * from './api.js';
 export * from './wt-key.js';
+export * from './path-match.js';

packages/shared/src/path-match.ts

@@ -0,0 +1,71 @@
+// Corrélation session ↔ worktree par contenance de chemin. Source unique partagée par le daemon, le
+// front web et l'extension VS Code : la règle doit être identique partout, sinon un terminal apparaît
+// sous un worktree côté serveur et sous un autre côté UI.
+//
+// Historiquement la corrélation était une égalité stricte `session.cwd === worktree.path`. Deux cas
+// réels y échappent :
+//  1. « Démarrer le projet » autorise un sous-répertoire par commande (`LaunchCommand.cwd`, borné par
+//     `resolveLaunchSubdir`) : le terminal tourne DANS le worktree, mais pas à sa racine ;
+//  2. une session de groupe (P6) couvre plusieurs repos via `--add-dir` : son cwd est le parent commun
+//     et les worktrees couverts n'apparaissent que dans `addedDirs`.
+// Dans les deux cas la session appartient bel et bien au worktree.
+//
+// Aucune dépendance à `node:path` (le front tourne dans un navigateur) : la comparaison se fait par
+// segments, en tolérant les deux séparateurs pour rester correcte sur Windows. La comparaison reste
+// SENSIBLE à la casse : les chemins comparés viennent tous de la même source (git et la base), et
+// insensibiliser casserait deux répertoires ne différant que par la casse sous Linux.
+
+/** Segments non vides d'un chemin, séparateurs POSIX et Windows confondus. */
+function segments(p: string): string[] {
+  return p.split(/[\\/]+/).filter((s) => s.length > 0 && s !== '.');
+}
+
+/** true si `child` est `parent` lui-même ou un descendant. */
+export function containsPath(parent: string, child: string): boolean {
+  const p = segments(parent);
+  const c = segments(child);
+  if (c.length < p.length) return false;
+  return p.every((seg, i) => c[i] === seg);
+}
+
+/** Répertoires qu'une session occupe : son cwd, plus les répertoires reliés d'une session de groupe. */
+export function sessionDirs(session: { cwd: string; addedDirs?: string[] }): string[] {
+  return [session.cwd, ...(session.addedDirs ?? [])];
+}
+
+/**
+ * Attribue une session au worktree `worktreePath`. `others` = les autres worktrees connus (au moins
+ * ceux du même repo) : sans eux, une session lancée dans un worktree imbriqué (`repo/.worktrees/x`)
+ * serait aussi listée sous le checkout principal `repo`. Le worktree le plus spécifique gagne.
+ */
+export function sessionBelongsToWorktree(
+  session: { cwd: string; addedDirs?: string[] },
+  worktreePath: string,
+  others: string[] = [],
+): boolean {
+  const depth = segments(worktreePath).length;
+  return sessionDirs(session).some((dir) => {
+    if (!containsPath(worktreePath, dir)) return false;
+    // un autre worktree plus profond contient aussi ce répertoire → il est le propriétaire légitime.
+    return !others.some((o) => segments(o).length > depth && containsPath(o, dir));
+  });
+}
+
+/**
+ * Worktree auquel rattacher un répertoire, parmi une liste hétérogène (tous repos confondus) : le plus
+ * spécifique qui le contient. Sert à épingler le watcher FS du worktree d'une session vivante et à
+ * étiqueter un terminal.
+ */
+export function findWorktreeForCwd<T extends { path: string }>(cwd: string, worktrees: T[]): T | null {
+  let best: T | null = null;
+  let bestDepth = -1;
+  for (const w of worktrees) {
+    if (!containsPath(w.path, cwd)) continue;
+    const depth = segments(w.path).length;
+    if (depth > bestDepth) {
+      best = w;
+      bestDepth = depth;
+    }
+  }
+  return best;
+}

packages/shared/src/protocol.ts

@@ -122,6 +122,9 @@ export interface SessionSummary {
   addedDirs?: string[];
   /** groupe propriétaire d'une session de groupe (couvre plusieurs repos) ; null/absent sinon. */
   groupId?: string | null;
+  // ---- Lancement de projet multi-terminaux (additif) ----
+  /** identifiant partagé par tous les terminaux d'un même « Démarrer le projet » ; null/absent sinon. */
+  launchRunId?: string | null;
   // ---- Masquage (additif) ----
   /** true = session découverte masquée par l'utilisateur (exclue de la liste sauf includeHidden). */
   hidden?: boolean;
@@ -139,6 +142,22 @@ export interface PostCreateHook {
   enabled: boolean;
 }
 
+/**
+ * Commande de démarrage d'un projet (« Démarrer le projet ») : une commande shell longue durée
+ * lancée dans un terminal PTY managé (serveur front, back, base…). Plusieurs commandes activées
+ * = plusieurs terminaux ouverts d'un seul geste. Persistée en JSON sur le repo.
+ */
+export interface LaunchCommand {
+  id: string;
+  /** libellé court affiché dans l'onglet du terminal (ex. « web », « api »). */
+  label: string;
+  /** commande shell auto-tapée dans un shell de login interactif (ex. `npm run dev`). */
+  run: string;
+  /** sous-répertoire relatif au worktree où exécuter la commande (borné, jamais hors du worktree). */
+  cwd?: string;
+  enabled: boolean;
+}
+
 export interface RepoSummary {
   id: string;
   /** chemin absolu de la racine du repo (main worktree). */
@@ -146,6 +165,8 @@ export interface RepoSummary {
   label: string;
   defaultBranch: string | null;
   postCreateHooks: PostCreateHook[];
+  /** commandes de démarrage du projet (« Démarrer le projet ») ; [] si aucune définie. */
+  launchCommands: LaunchCommand[];
   /** pré-écrire hasTrustDialogAccepted dans ~/.claude.json à la création d'un worktree. */
   preTrust: boolean;
   createdAt: string;

packages/shared/test/path-match.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+import { containsPath, findWorktreeForCwd, sessionBelongsToWorktree } from '../src/path-match.js';
+
+describe('containsPath', () => {
+  it('vrai pour le répertoire lui-même et ses descendants', () => {
+    expect(containsPath('/p/repo', '/p/repo')).toBe(true);
+    expect(containsPath('/p/repo', '/p/repo/packages/api')).toBe(true);
+  });
+
+  it('compare par segment, pas par préfixe de chaîne', () => {
+    // piège du startsWith nu : /p/repo n'est pas le parent de /p/repo-wt-feature
+    expect(containsPath('/p/repo', '/p/repo-wt-feature')).toBe(false);
+  });
+
+  it('faux pour un ancêtre', () => {
+    expect(containsPath('/p/repo/api', '/p/repo')).toBe(false);
+  });
+
+  it('tolère les deux séparateurs (chemins Windows)', () => {
+    expect(containsPath('C:\\dev\\repo', 'C:\\dev\\repo\\packages\\api')).toBe(true);
+    expect(containsPath('C:\\dev\\repo', 'C:/dev/repo/packages')).toBe(true);
+    expect(containsPath('C:\\dev\\repo', 'C:\\dev\\repo2')).toBe(false);
+  });
+
+  it('reste sensible à la casse', () => {
+    expect(containsPath('/p/Repo', '/p/repo/api')).toBe(false);
+  });
+
+  it('ignore les séparateurs redondants et un slash final', () => {
+    expect(containsPath('/p/repo/', '/p//repo/api')).toBe(true);
+  });
+});
+
+describe('sessionBelongsToWorktree', () => {
+  it('rattache une session lancée dans un sous-répertoire', () => {
+    expect(sessionBelongsToWorktree({ cwd: '/p/repo/packages/api' }, '/p/repo')).toBe(true);
+  });
+
+  it('donne un worktree imbriqué au plus spécifique, pas au principal', () => {
+    const session = { cwd: '/p/repo/.worktrees/feat/src' };
+    const all = ['/p/repo', '/p/repo/.worktrees/feat'];
+    expect(sessionBelongsToWorktree(session, '/p/repo/.worktrees/feat', all)).toBe(true);
+    expect(sessionBelongsToWorktree(session, '/p/repo', all)).toBe(false);
+  });
+
+  it('rattache une session de groupe via ses répertoires reliés', () => {
+    const session = { cwd: '/p', addedDirs: ['/p/api', '/p/web'] };
+    expect(sessionBelongsToWorktree(session, '/p/api')).toBe(true);
+    expect(sessionBelongsToWorktree(session, '/p/docs')).toBe(false);
+  });
+
+  it('ne rattache pas une session d’un worktree frère', () => {
+    expect(sessionBelongsToWorktree({ cwd: '/p/repo-wt-feat' }, '/p/repo')).toBe(false);
+  });
+});
+
+describe('findWorktreeForCwd', () => {
+  const worktrees = [
+    { repoId: 'r1', path: '/p/api' },
+    { repoId: 'r1', path: '/p/api-wt-feat' },
+    { repoId: 'r2', path: '/p/api/vendor/web' },
+  ];
+
+  it('choisit le worktree le plus spécifique', () => {
+    expect(findWorktreeForCwd('/p/api/vendor/web/src', worktrees)?.repoId).toBe('r2');
+  });
+
+  it('choisit le worktree frère exact', () => {
+    expect(findWorktreeForCwd('/p/api-wt-feat/src', worktrees)?.path).toBe('/p/api-wt-feat');
+  });
+
+  it('renvoie null hors de tout worktree connu', () => {
+    expect(findWorktreeForCwd('/tmp/ailleurs', worktrees)).toBeNull();
+  });
+});

packages/site/index.html

@@ -5,6 +5,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="dark" />
     <meta name="theme-color" content="#09090b" />
+    <!-- Anti-FOUC : applique la préférence de thème (arb.theme, même clé que l'app) avant le premier paint.
+         Doit rester inline/synchrone. Synchronisé avec src/lib/theme.ts. -->
+    <script>
+      (function () {
+        try {
+          var mode = localStorage.getItem('arb.theme') || 'dark';
+          var dark = mode === 'dark' || (mode === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
+          var theme = dark ? 'dark' : 'light';
+          var bg = dark ? '#09090b' : '#fafafa';
+          var el = document.documentElement;
+          el.dataset.theme = theme;
+          el.style.backgroundColor = bg;
+          var cs = document.querySelector('meta[name=color-scheme]');
+          if (cs) cs.setAttribute('content', theme);
+          var tc = document.querySelector('meta[name=theme-color]');
+          if (tc) tc.setAttribute('content', bg);
+        } catch (e) {}
+      })();
+    </script>
 
     <title>Arboretum · Mission control for your AI coding agents</title>
     <meta

packages/site/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arboretum/site",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,8 @@
     "vue-i18n": "^11.4.5"
   },
   "devDependencies": {
-    "@fontsource/jetbrains-mono": "^5.1.0",
+    "@fontsource-variable/inter": "^5.0.0",
+    "@fontsource-variable/jetbrains-mono": "^5.0.0",
     "@tailwindcss/vite": "^4.3.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "tailwindcss": "^4.3.0",

packages/site/public/sitemap.xml

@@ -2,7 +2,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://git-arboretum.com/</loc>
-    <lastmod>2026-06-19</lastmod>
+    <lastmod>2026-08-04</lastmod>
     <changefreq>monthly</changefreq>
     <priority>1.0</priority>
   </url>

packages/site/src/App.vue

@@ -7,7 +7,9 @@ import ProblemSection from './components/ProblemSection.vue';
 import FeaturesSection from './components/FeaturesSection.vue';
 import ShowcaseSection from './components/ShowcaseSection.vue';
 import WorkspaceShowcase from './components/WorkspaceShowcase.vue';
+import LaunchShowcase from './components/LaunchShowcase.vue';
 import DownloadSection from './components/DownloadSection.vue';
+import AccessSection from './components/AccessSection.vue';
 import RemoteGitSection from './components/RemoteGitSection.vue';
 import WorkGroupsSection from './components/WorkGroupsSection.vue';
 import HowItWorksSection from './components/HowItWorksSection.vue';
@@ -27,13 +29,14 @@ watch(
   { immediate: true },
 );
 
-// Grain de fond + halo emerald (décoratifs) : portés tels quels du design.
+// Grain de fond + halo accent (décoratifs), tokenisés pour suivre le thème clair/sombre.
 const grainStyle = {
   position: 'fixed',
   inset: '0',
   zIndex: 0,
+  opacity: '0.025',
   pointerEvents: 'none',
-  backgroundImage: 'radial-gradient(rgba(255,255,255,.025) 1px,transparent 1.4px)',
+  backgroundImage: 'radial-gradient(var(--color-fg) 1px,transparent 1.4px)',
   backgroundSize: '34px 34px',
   WebkitMaskImage: 'radial-gradient(ellipse 120% 70% at 50% -4%,#000,transparent 70%)',
   maskImage: 'radial-gradient(ellipse 120% 70% at 50% -4%,#000,transparent 70%)',
@@ -47,8 +50,9 @@ const glowStyle = {
   width: '1100px',
   height: '680px',
   zIndex: 0,
+  opacity: '0.12',
   pointerEvents: 'none',
-  background: 'radial-gradient(50% 50% at 50% 50%,rgba(16,185,129,.12),transparent 64%)',
+  background: 'radial-gradient(50% 50% at 50% 50%,var(--color-accent),transparent 64%)',
   filter: 'blur(18px)',
 } as const;
 </script>
@@ -66,7 +70,9 @@ const glowStyle = {
       <FeaturesSection />
       <ShowcaseSection />
       <WorkspaceShowcase />
+      <LaunchShowcase />
       <DownloadSection />
+      <AccessSection />
       <RemoteGitSection />
       <WorkGroupsSection />
       <HowItWorksSection />

packages/site/src/components/AccessSection.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// Les trois façons d'utiliser Arboretum. Le « mode serveur web » (le daemon servi à ses propres
+// appareils) n'était décrit nulle part sur le site, alors que c'est l'usage central du produit ; et
+// l'extension VS Code n'avait qu'une carte de fonctionnalité, sans lien ni mode d'emploi.
+import { useI18n } from 'vue-i18n';
+import { DOWNLOADS, DESKTOP_SRC } from '../lib/links';
+
+const { t } = useI18n();
+
+const ways = [
+  {
+    key: 'wayDesktop',
+    body: 'wayDesktopBody',
+    code: null,
+    link: { href: DOWNLOADS.deb, label: 'wayDesktopLink' },
+  },
+  {
+    key: 'wayServer',
+    body: 'wayServerBody',
+    code: 'tailscale serve --bg 7317',
+    link: null,
+  },
+  {
+    key: 'wayVscode',
+    body: 'wayVscodeBody',
+    code: null,
+    link: { href: DOWNLOADS.vsix, label: 'wayVscodeLink' },
+  },
+] as const;
+</script>
+
+<template>
+  <section id="access" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
+    <div v-reveal class="mb-[40px] max-w-[720px]">
+      <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('wayKicker') }}</div>
+      <h2 class="m-0 mb-4 text-[clamp(26px,3vw,38px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
+        {{ t('wayTitle') }}
+      </h2>
+      <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('wayBody') }}</p>
+    </div>
+
+    <div v-reveal class="grid gap-4 md:grid-cols-3">
+      <div
+        v-for="w in ways"
+        :key="w.key"
+        class="flex flex-col gap-3 rounded-[14px] border border-border bg-surface-0 p-5 shadow-card"
+      >
+        <h3 class="m-0 text-[15px] font-semibold text-fg">{{ t(w.key) }}</h3>
+        <p class="m-0 flex-1 text-[14px] leading-[1.55] text-fg-muted">{{ t(w.body) }}</p>
+        <code
+          v-if="w.code"
+          class="block overflow-x-auto whitespace-nowrap rounded-lg border border-border bg-surface-1 px-3 py-2 font-mono text-[12.5px] text-fg"
+        >
+          <span class="text-accent">$ </span>{{ w.code }}
+        </code>
+        <a
+          v-if="w.link"
+          :href="w.link.href"
+          class="text-[13.5px] font-medium text-accent no-underline hover:underline"
+        >
+          {{ t(w.link.label) }} →
+        </a>
+      </div>
+    </div>
+
+    <p v-reveal class="mt-6 max-w-[760px] text-[13.5px] leading-[1.6] text-fg-subtle">{{ t('wayOriginNote') }}</p>
+    <p v-reveal class="mt-2 max-w-[760px] text-[13.5px] leading-[1.6] text-fg-subtle">
+      {{ t('wayBuildNote') }}
+      <a :href="DESKTOP_SRC" target="_blank" rel="noopener" class="text-fg-muted underline decoration-border underline-offset-2 hover:text-accent">
+        packages/desktop
+      </a>
+    </p>
+  </section>
+</template>

packages/site/src/components/AppFooter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { INSTALL_COMMAND } from '../composables/useCopy';
-import { REPO, LICENSE, COFFEE } from '../lib/links';
+import { COFFEE, LICENSE, REPO, VERSIONS } from '../lib/links';
 import IconGitea from './icons/IconGitea.vue';
 import CopyButton from './CopyButton.vue';
 
@@ -9,7 +9,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <footer class="relative z-[1] border-t border-[#1c1c1f]">
+  <footer class="relative z-[1] border-t border-border-soft">
     <div class="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-5 px-6 py-[34px]">
       <div class="flex items-center gap-[11px]">
         <img
@@ -20,30 +20,34 @@ const { t } = useI18n();
           class="h-[22px] w-[22px] object-contain"
           style="filter: grayscale(1) brightness(1.5); opacity: 0.4"
         />
-        <span class="font-mono text-sm text-zinc-300">git-arboretum.com</span>
+        <span class="font-mono text-sm text-fg-muted">git-arboretum.com</span>
-        <span class="ml-1 text-[13px] text-zinc-600">· {{ t('footTag') }}</span>
+        <span class="ml-1 text-[13px] text-fg-subtle">· {{ t('footTag') }}</span>
       </div>
       <div class="flex items-center gap-[22px] text-sm">
-        <a :href="REPO" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-zinc-400 no-underline transition-colors hover:text-emerald-400">
+        <a :href="REPO" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-fg-muted no-underline transition-colors hover:text-accent">
           <IconGitea :size="15" />
           Gitea
         </a>
-        <a :href="LICENSE" target="_blank" rel="noopener" class="text-zinc-400 no-underline transition-colors hover:text-emerald-400">
+        <a :href="LICENSE" target="_blank" rel="noopener" class="text-fg-muted no-underline transition-colors hover:text-accent">
           {{ t('license') }}
         </a>
         <a
           :href="COFFEE"
           target="_blank"
           rel="noopener"
-          class="inline-flex items-center gap-1.5 text-zinc-400 no-underline transition-colors hover:text-amber-400 focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-400/70"
+          class="inline-flex items-center gap-1.5 text-fg-muted no-underline transition-colors hover:text-warn focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warn/70"
         >
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2" /><path d="M14 2v2" /><path d="M5 8h13a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1Z" /><path d="M6 15a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4" /><path d="M19 9h1.5a2.5 2.5 0 0 1 0 5H18" /></svg>
           {{ t('coffee') }}
         </a>
         <div class="flex items-center gap-2">
-          <code class="font-mono text-[12.5px] text-zinc-600">{{ INSTALL_COMMAND }}</code>
+          <code class="font-mono text-[12.5px] text-fg-subtle">{{ INSTALL_COMMAND }}</code>
           <CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
         </div>
+        <!-- Versions publiées : le site n'en affichait aucune, impossible de savoir ce qu'il décrit. -->
+        <span class="font-mono text-[12px] text-fg-subtle">
+          daemon {{ VERSIONS.daemon }} · desktop {{ VERSIONS.desktop }} · vscode {{ VERSIONS.vscode }}
+        </span>
       </div>
     </div>
   </footer>

packages/site/src/components/AppHeader.vue

@@ -2,13 +2,18 @@
 import { useI18n } from 'vue-i18n';
 import { REPO } from '../lib/links';
 import LangToggle from './LangToggle.vue';
+import ThemeToggle from './ThemeToggle.vue';
 import IconGitea from './icons/IconGitea.vue';
 
 const { t } = useI18n();
 
+// Les sections #launch (« Démarrer le projet ») et #remotegit (services git distants) existaient sans
+// aucun lien de navigation : elles n'étaient atteignables qu'en scrollant à l'aveugle.
 const navLinks = [
   { href: '#features', key: 'navFeatures' },
   { href: '#workspace', key: 'navWorkspace' },
+  { href: '#launch', key: 'navLaunch' },
+  { href: '#remotegit', key: 'navRemoteGit' },
   { href: '#download', key: 'navDownload' },
   { href: '#how', key: 'navHow' },
   { href: '#security', key: 'navSecurity' },
@@ -18,10 +23,10 @@ const navLinks = [
 
 <template>
   <header
-    class="sticky top-0 z-50 border-b border-[#1c1c1f] bg-[rgba(9,9,11,0.72)] backdrop-blur-[14px]"
+    class="sticky top-0 z-50 border-b border-border-soft bg-surface-0/72 backdrop-blur-[14px]"
   >
     <div class="mx-auto flex h-16 max-w-[1200px] items-center justify-between gap-6 px-6">
-      <a href="#top" class="flex items-center gap-2.5 text-zinc-100 no-underline">
+      <a href="#top" class="flex items-center gap-2.5 text-fg no-underline">
         <img
           src="/assets/arboretum-mark.png"
           alt="Arboretum"
@@ -37,20 +42,21 @@ const navLinks = [
           v-for="link in navLinks"
           :key="link.href"
           :href="link.href"
-          class="text-[14.5px] text-zinc-400 no-underline transition-colors hover:text-zinc-100"
+          class="text-[14.5px] text-fg-muted no-underline transition-colors hover:text-fg"
         >
           {{ t(link.key) }}
         </a>
       </nav>
 
       <div class="flex items-center gap-3.5">
+        <ThemeToggle />
         <LangToggle />
         <a
           :href="REPO"
           target="_blank"
           rel="noopener"
           aria-label="Gitea"
-          class="inline-flex items-center gap-[7px] rounded-lg border border-zinc-800 px-[13px] py-[7px] text-[13.5px] font-medium text-zinc-300 no-underline transition-colors hover:border-emerald-500/50 hover:text-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
+          class="inline-flex items-center gap-[7px] rounded-lg border border-border px-[13px] py-[7px] text-[13.5px] font-medium text-fg-muted no-underline transition-colors hover:border-accent hover:text-accent"
         >
           <IconGitea :size="16" />
           Gitea

packages/site/src/components/CopyButton.vue

@@ -28,9 +28,9 @@ const { copied, copy } = useCopy();
     type="button"
     :aria-label="label || t('copy')"
     :class="[
-      'inline-flex flex-none items-center gap-[7px] border-l border-zinc-800 bg-zinc-900 font-mono text-[13px] font-semibold transition-colors hover:bg-zinc-800 hover:text-emerald-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-emerald-500/70',
+      'inline-flex flex-none items-center gap-[7px] border-l border-border bg-surface-1 font-mono text-[13px] font-semibold transition-colors hover:bg-surface-2 hover:text-accent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent/70',
       barClass,
-      copied ? 'text-emerald-400' : 'text-zinc-300',
+      copied ? 'text-accent' : 'text-fg-muted',
     ]"
     @click="copy(text)"
   >
@@ -44,10 +44,10 @@ const { copied, copy } = useCopy();
     :aria-label="label || t('copy')"
     :title="copied ? t('copied') : label || t('copy')"
     :class="[
-      'inline-flex flex-none items-center justify-center rounded-md border p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70',
+      'inline-flex flex-none items-center justify-center rounded-md border p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70',
       copied
-        ? 'border-emerald-500/40 bg-zinc-800 text-emerald-400'
+        ? 'border-accent/40 bg-surface-2 text-accent'
-        : 'border-zinc-800 bg-zinc-900/80 text-zinc-400 hover:border-emerald-500/40 hover:bg-zinc-800 hover:text-emerald-400',
+        : 'border-border bg-surface-1/80 text-fg-muted hover:border-accent/40 hover:bg-surface-2 hover:text-accent',
     ]"
     @click="copy(text)"
   >

packages/site/src/components/DownloadSection.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
+// Téléchargements réels : chaque plateforme porte son lien direct vers l'asset de la release flottante
+// `desktop-latest` (le tag est recréé par la CI à chaque version, les URL restent donc valables).
+// Avant, les trois cartes étaient décoratives et un unique bouton renvoyait vers la page des releases.
 import { useI18n } from 'vue-i18n';
-import { RELEASES, DESKTOP_SRC } from '../lib/links';
+import { DOWNLOADS, DESKTOP_SRC, RELEASES, VERSIONS } from '../lib/links';
 
 const { t } = useI18n();
 
 const platforms = [
-  { key: 'dlLinux', hint: 'dlLinuxHint' },
+  { key: 'dlLinux', hint: 'dlLinuxHint', href: DOWNLOADS.deb },
-  { key: 'dlWin', hint: 'dlWinHint' },
+  { key: 'dlWin', hint: 'dlWinHint', href: DOWNLOADS.windows },
-  { key: 'dlMac', hint: 'dlMacHint' },
+  // macOS n'est pas buildé par la CI (aucun runner) : la carte renvoie donc vers les sources.
+  { key: 'dlMac', hint: 'dlMacHint', href: DESKTOP_SRC },
 ] as const;
 
 const bullets = ['dlNoNode', 'dlBundled', 'dlAutoUpdate'] as const;
@@ -16,53 +20,54 @@ const bullets = ['dlNoNode', 'dlBundled', 'dlAutoUpdate'] as const;
 <template>
   <section id="download" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
     <div v-reveal class="mb-[40px] max-w-[720px]">
-      <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('dlKicker') }}</div>
+      <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('dlKicker') }}</div>
-      <h2 class="m-0 mb-4 text-[clamp(26px,3vw,38px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+      <h2 class="m-0 mb-4 text-[clamp(26px,3vw,38px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
         {{ t('dlTitle') }}
       </h2>
-      <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('dlBody') }}</p>
+      <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('dlBody') }}</p>
+      <p class="mt-2 font-mono text-[12.5px] text-fg-subtle">{{ t('dlVersion', { version: VERSIONS.desktop }) }}</p>
     </div>
 
     <div v-reveal class="grid gap-4 md:grid-cols-3">
-      <div
+      <a
         v-for="p in platforms"
         :key="p.key"
-        class="flex flex-col gap-1 rounded-[14px] border border-zinc-800 bg-[#09090b] p-5 shadow-card"
+        :href="p.href"
+        class="group flex flex-col gap-1 rounded-[14px] border border-border bg-surface-0 p-5 no-underline shadow-card transition-colors hover:border-accent/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70"
       >
-        <div class="flex items-center gap-2 text-zinc-100">
+        <div class="flex items-center gap-2 text-fg">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>
-          <span class="text-[15px] font-semibold">{{ t(p.key) }}</span>
+          <span class="text-[15px] font-semibold group-hover:text-accent">{{ t(p.key) }}</span>
-        </div>
-        <span class="pl-[26px] font-mono text-[12.5px] text-zinc-500">{{ t(p.hint) }}</span>
         </div>
+        <span class="pl-[26px] font-mono text-[12.5px] text-fg-subtle">{{ t(p.hint) }}</span>
+      </a>
     </div>
 
+    <p v-reveal class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-[13px] text-fg-subtle">
+      <a
+        :href="DOWNLOADS.appImage"
+        class="text-fg-muted underline decoration-border underline-offset-2 hover:text-accent"
+      >
+        {{ t('dlLinuxAlt') }}
+      </a>
+      <a :href="RELEASES" target="_blank" rel="noopener" class="text-fg-muted underline decoration-border underline-offset-2 hover:text-accent">
+        {{ t('dlAllAssets') }}
+      </a>
+      <a :href="DESKTOP_SRC" target="_blank" rel="noopener" class="text-fg-muted underline decoration-border underline-offset-2 hover:text-accent">
+        {{ t('dlSource') }}
+      </a>
+    </p>
+
     <ul v-reveal class="mt-6 flex flex-wrap gap-x-6 gap-y-2">
-      <li v-for="b in bullets" :key="b" class="flex items-center gap-2 text-[14px] text-zinc-300">
+      <li v-for="b in bullets" :key="b" class="flex items-center gap-2 text-[14px] text-fg-muted">
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="text-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
         {{ t(b) }}
       </li>
     </ul>
 
-    <div v-reveal class="mt-7 flex flex-wrap items-center gap-3">
+    <!-- Premier lancement : ni l'installeur Windows ni l'app macOS ne sont signés. Le dire ICI évite
-      <a
+         qu'un visiteur conclue à un binaire cassé. -->
-        :href="RELEASES"
+    <p v-reveal class="mt-6 max-w-[720px] text-[13.5px] leading-[1.55] text-fg-subtle">{{ t('dlUnsigned') }}</p>
-        target="_blank"
+    <p v-reveal class="mt-2 max-w-[720px] text-[13.5px] leading-[1.55] text-fg-subtle">{{ t('dlNote') }}</p>
-        rel="noopener"
-        class="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-4 py-2.5 text-[14.5px] font-semibold text-emerald-950 no-underline transition-colors hover:bg-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
-      >
-        {{ t('dlGet') }}
-      </a>
-      <a
-        :href="DESKTOP_SRC"
-        target="_blank"
-        rel="noopener"
-        class="inline-flex items-center gap-2 rounded-lg border border-zinc-800 px-4 py-2.5 text-[14.5px] font-medium text-zinc-300 no-underline transition-colors hover:border-emerald-500/50 hover:text-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
-      >
-        {{ t('dlSource') }}
-      </a>
-    </div>
-
-    <p v-reveal class="mt-4 max-w-[720px] text-[13.5px] leading-[1.55] text-zinc-500">{{ t('dlNote') }}</p>
   </section>
 </template>

packages/site/src/components/FaqSection.vue

@@ -25,26 +25,26 @@ function panelStyle(i: number) {
 <template>
   <section id="faq" class="mx-auto max-w-[780px] scroll-mt-[84px] px-6 pb-[100px]">
     <div v-reveal class="mb-[38px] text-center">
-      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('navFaq') }}</div>
+      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('navFaq') }}</div>
-      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">{{ t('faqTitle') }}</h2>
+      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-fg">{{ t('faqTitle') }}</h2>
     </div>
 
     <div v-reveal>
-      <div v-for="(f, i) in items" :key="i" class="border-t" :class="open === i ? 'border-emerald-400/40' : 'border-zinc-800'">
+      <div v-for="(f, i) in items" :key="i" class="border-t" :class="open === i ? 'border-accent/40' : 'border-border'">
         <button
           type="button"
           :aria-expanded="open === i"
           :aria-controls="`faq-panel-${i}`"
-          class="flex w-full cursor-pointer items-center justify-between gap-4 border-none bg-transparent px-1 py-5 text-left text-[clamp(16px,2vw,18px)] font-medium text-zinc-50 focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
+          class="flex w-full cursor-pointer items-center justify-between gap-4 border-none bg-transparent px-1 py-5 text-left text-[clamp(16px,2vw,18px)] font-medium text-fg focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
           @click="toggle(i)"
         >
           <span>{{ f.q }}</span>
-          <span class="flex flex-none text-emerald-400 transition-transform duration-300" :class="open === i ? 'rotate-180' : ''">
+          <span class="flex flex-none text-accent transition-transform duration-300" :class="open === i ? 'rotate-180' : ''">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
           </span>
         </button>
         <div :id="`faq-panel-${i}`" :style="panelStyle(i)" :inert="open !== i" :aria-hidden="open !== i">
-          <p class="m-0 max-w-[640px] px-1 pb-5 text-[15.5px] leading-[1.6] text-zinc-400">{{ f.a }}</p>
+          <p class="m-0 max-w-[640px] px-1 pb-5 text-[15.5px] leading-[1.6] text-fg-muted">{{ f.a }}</p>
         </div>
       </div>
     </div>

packages/site/src/components/FeatureCard.vue

@@ -4,14 +4,14 @@ defineProps<{ title: string }>();
 
 <template>
   <div
-    class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6 transition-[transform,border-color] duration-[180ms] ease-in-out hover:-translate-y-[3px] hover:border-emerald-400/40"
+    class="rounded-xl border border-border bg-surface-1/50 p-6 transition-[transform,border-color] duration-[180ms] ease-in-out hover:-translate-y-[3px] hover:border-accent/40"
   >
     <div
-      class="mb-4 inline-flex h-[42px] w-[42px] items-center justify-center rounded-[10px] bg-emerald-500/10 text-emerald-400"
+      class="mb-4 inline-flex h-[42px] w-[42px] items-center justify-center rounded-[10px] bg-accent/10 text-accent"
     >
       <slot name="icon" />
     </div>
-    <h3 class="m-0 mb-[7px] text-lg font-semibold text-zinc-50">{{ title }}</h3>
+    <h3 class="m-0 mb-[7px] text-lg font-semibold text-fg">{{ title }}</h3>
-    <p class="m-0 text-[14.5px] leading-[1.55] text-zinc-400"><slot /></p>
+    <p class="m-0 text-[14.5px] leading-[1.55] text-fg-muted"><slot /></p>
   </div>
 </template>

packages/site/src/components/FeaturesSection.vue

@@ -7,8 +7,8 @@ const { t } = useI18n();
 <template>
   <section id="features" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
     <div v-reveal class="mb-[46px] text-center">
-      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('featKicker') }}</div>
+      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('featKicker') }}</div>
-      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">
+      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-fg">
         {{ t('featTitle') }}
       </h2>
     </div>
@@ -32,9 +32,9 @@ const { t } = useI18n();
         <template #icon>
           <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2" /></svg>
         </template>
-        <span class="text-sky-300">{{ t('busy') }}</span> ·
+        <span class="text-info">{{ t('busy') }}</span> ·
-        <span class="text-amber-300">{{ t('waiting') }}</span> ·
+        <span class="text-warn">{{ t('waiting') }}</span> ·
-        <span class="text-emerald-400">{{ t('idle') }}</span> · {{ t('feat3Desc') }}
+        <span class="text-accent">{{ t('idle') }}</span> · {{ t('feat3Desc') }}
       </FeatureCard>
 
       <FeatureCard :title="t('feat4Title')">
@@ -120,6 +120,27 @@ const { t } = useI18n();
         </template>
         {{ t('feat15Desc') }}
       </FeatureCard>
+
+      <FeatureCard :title="t('feat16Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></svg>
+        </template>
+        {{ t('feat16Desc') }}
+      </FeatureCard>
+
+      <FeatureCard :title="t('feat17Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v5h5" /><path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" /><path d="M12 7v5l4 2" /></svg>
+        </template>
+        {{ t('feat17Desc') }}
+      </FeatureCard>
+
+      <FeatureCard :title="t('feat18Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" /><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /></svg>
+        </template>
+        {{ t('feat18Desc') }}
+      </FeatureCard>
     </div>
   </section>
 </template>

packages/site/src/components/FinalCta.vue

@@ -12,8 +12,8 @@ const { t } = useI18n();
   <section class="mx-auto max-w-[1200px] px-6 pb-[100px]">
     <div
       v-reveal
-      class="rounded-[20px] border border-zinc-800 px-6 py-[clamp(36px,5vw,64px)] text-center"
+      class="rounded-[20px] border border-border px-6 py-[clamp(36px,5vw,64px)] text-center"
-      style="background: radial-gradient(120% 140% at 50% 0%, rgba(16, 185, 129, 0.1), transparent 60%), #0c0c0e"
+      style="background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%), var(--color-surface-0)"
     >
       <img
         src="/assets/arboretum-mark.png"
@@ -22,16 +22,16 @@ const { t } = useI18n();
         height="52"
         class="mx-auto mb-5 block h-[52px] w-[52px] object-contain"
       />
-      <h2 class="m-0 mb-3.5 text-[clamp(30px,4vw,46px)] font-bold leading-[1.08] tracking-[-0.03em] text-zinc-50">
+      <h2 class="m-0 mb-3.5 text-[clamp(30px,4vw,46px)] font-bold leading-[1.08] tracking-[-0.03em] text-fg">
         {{ t('ctaTitle') }}
       </h2>
-      <p class="mx-auto mb-7 max-w-[480px] text-[17px] text-zinc-400">{{ t('ctaBody') }}</p>
+      <p class="mx-auto mb-7 max-w-[480px] text-[17px] text-fg-muted">{{ t('ctaBody') }}</p>
 
       <div
-        class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950"
+        class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-border bg-surface-0"
       >
         <div class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-4 font-mono text-sm">
-          <span class="text-emerald-400">$</span><span class="text-zinc-200">{{ INSTALL_COMMAND }}</span>
+          <span class="text-accent">$</span><span class="text-fg">{{ INSTALL_COMMAND }}</span>
         </div>
         <CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" bar-class="px-4" />
       </div>
@@ -41,7 +41,7 @@ const { t } = useI18n();
           :href="REPO"
           target="_blank"
           rel="noopener"
-          class="inline-flex items-center gap-2 text-[14.5px] text-zinc-400 no-underline transition-colors hover:text-emerald-400"
+          class="inline-flex items-center gap-2 text-[14.5px] text-fg-muted no-underline transition-colors hover:text-accent"
         >
           <IconGitea :size="16" />
           {{ t('ctaSource') }}

packages/site/src/components/HeroMockup.vue

@@ -4,35 +4,47 @@ import { useI18n } from 'vue-i18n';
 import { useHeroTimeline, type SessionState } from '../composables/useHeroTimeline';
 import { DLG_OPTS } from '../i18n/content';
 import type { AppLocale } from '../i18n';
-import IconGitea from './icons/IconGitea.vue';
 
 const { t, locale } = useI18n();
 const { anim } = useHeroTimeline('hero-stage');
 
-// Couleurs des lignes de terminal par type (porté de renderVals.C).
+// Couleurs des lignes de terminal par type, tokenisées (suivent le thème clair/sombre).
 const LINE_COLORS: Record<string, string> = {
-  cmd: '#52525b',
+  cmd: 'var(--color-fg-subtle)',
-  tool: '#a1a1aa',
+  tool: 'var(--color-fg-muted)',
-  edit: '#34d399',
+  edit: 'var(--color-accent)',
-  add: '#34d399',
+  add: 'var(--color-accent)',
-  del: '#f87171',
+  del: 'var(--color-danger)',
-  ok: '#34d399',
+  ok: 'var(--color-accent)',
-  warn: '#fcd34d',
+  warn: 'var(--color-warn)',
-  run: '#7dd3fc',
+  run: 'var(--color-info)',
 };
 
-// Couleurs alignées sur SessionStateBadge de l'app (zinc/emerald/amber/sky de Tailwind).
+// Pastille d'état, alignée sur SessionStateBadge + lib/status-tokens de l'app
-const PILL: Record<SessionState, { bg: string; fg: string; dot: string; pulse: string }> = {
+// (waiting -> warn, busy -> info, idle -> accent), via color-mix pour le fond teinté.
-  idle: { bg: '#022c22', fg: '#34d399', dot: '#34d399', pulse: '' },
+const PILL: Record<SessionState, { bg: string; fg: string; pulse: string }> = {
-  busy: { bg: '#082f49', fg: '#7dd3fc', dot: '#7dd3fc', pulse: 'pulseSky 2s ease-in-out infinite' },
+  idle: {
-  waiting: { bg: '#451a03', fg: '#fcd34d', dot: '#fcd34d', pulse: 'pulseAmber 2.2s ease-in-out infinite' },
+    bg: 'color-mix(in oklab, var(--color-accent) 15%, transparent)',
+    fg: 'var(--color-accent)',
+    pulse: '',
+  },
+  busy: {
+    bg: 'color-mix(in oklab, var(--color-info) 15%, transparent)',
+    fg: 'var(--color-info)',
+    pulse: 'pulseSky 2s ease-in-out infinite',
+  },
+  waiting: {
+    bg: 'color-mix(in oklab, var(--color-warn) 15%, transparent)',
+    fg: 'var(--color-warn)',
+    pulse: 'pulseAmber 2.2s ease-in-out infinite',
+  },
 };
 
 const pill = computed(() => PILL[anim.value.sess]);
 const sessText = computed(() => t(anim.value.sess));
 
 const termLines = computed(() =>
-  anim.value.lines.map((l) => ({ text: l.text, color: LINE_COLORS[l.k] ?? '#d4d4d8' })),
+  anim.value.lines.map((l) => ({ text: l.text, color: LINE_COLORS[l.k] ?? 'var(--color-fg-muted)' })),
 );
 
 // Options du dialogue de permission : reproduit DialogPrompt (boutons numérotés + Deny).
@@ -48,137 +60,108 @@ const dlgOptions = computed(() =>
 
 <template>
   <div id="hero-stage" class="relative min-w-[300px] flex-[1_1_480px]">
-    <div
+    <div class="relative overflow-hidden rounded-[14px] border border-border bg-surface-0 shadow-hero">
-      class="relative overflow-hidden rounded-[14px] border border-zinc-800 bg-zinc-950 shadow-hero"
-    >
       <!-- barre de fenêtre -->
-      <div class="flex items-center gap-2 border-b border-[#1c1c1f] bg-[#0c0c0e] px-[14px] py-[11px]">
+      <div class="flex items-center gap-2 border-b border-border-soft bg-surface-1 px-[14px] py-[11px]">
-        <span class="h-2.5 w-2.5 rounded-full bg-zinc-700"></span>
+        <span class="h-2.5 w-2.5 rounded-full bg-danger"></span>
-        <span class="h-2.5 w-2.5 rounded-full bg-zinc-700"></span>
+        <span class="h-2.5 w-2.5 rounded-full bg-warn"></span>
-        <span class="h-2.5 w-2.5 rounded-full bg-zinc-700"></span>
+        <span class="h-2.5 w-2.5 rounded-full bg-accent"></span>
-        <span class="ml-2 font-mono text-[11.5px] text-zinc-600">arboretum · localhost:7317</span>
+        <span class="ml-2 font-mono text-[11.5px] text-fg-subtle">arboretum · localhost:7317</span>
       </div>
 
       <div class="flex min-h-[440px]">
-        <!-- sidebar (fidèle à AppSidebar : Worktrees / Sessions / Groups, puis Réglages / Aide / Gitea / Café) -->
+        <!-- rail ActivityBar (fidèle à ActivityBar.vue : icônes explorer / git / sessions / groups) -->
-        <div
+        <div class="flex w-12 flex-none flex-col items-center gap-1 border-r border-border bg-surface-1 py-2">
-          class="flex w-[190px] flex-none flex-col border-r border-[#1c1c1f] bg-zinc-900/40 px-2 py-3"
+          <!-- explorer (actif) -->
-        >
+          <div class="relative flex h-9 w-9 items-center justify-center rounded-[9px] bg-surface-2 text-accent">
-          <div class="flex items-center gap-2 px-2 pb-3">
+            <span class="absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-full bg-accent"></span>
-            <img
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M3 9h18" /><path d="M9 21V9" /></svg>
-              src="/assets/arboretum-mark.png"
-              alt=""
-              width="22"
-              height="22"
-              class="h-[22px] w-[22px] object-contain"
-            />
-            <span class="text-[14px] font-semibold text-zinc-100">Arboretum</span>
           </div>
-
+          <!-- git -->
-          <div
+          <div class="flex h-9 w-9 items-center justify-center rounded-[9px] text-fg-subtle">
-            class="mb-2 flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950/40 px-2.5 py-1.5"
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
-            <span class="flex-1 text-[12px] text-zinc-500">{{ t('mSearch') }}</span>
-            <span class="rounded border border-zinc-700 px-[5px] py-px font-mono text-[10px] text-zinc-500">⌘K</span>
           </div>
-
+          <!-- sessions (+ badge attention) -->
-          <!-- nav primaire (fidèle à AppSidebar : IDE actif, puis Worktrees / Sessions / Groups) -->
+          <div class="relative flex h-9 w-9 items-center justify-center rounded-[9px] text-fg-subtle">
-          <div class="flex flex-col gap-1">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /></svg>
-            <div class="flex items-center gap-2.5 rounded-lg bg-zinc-800 px-2.5 py-1.5 text-zinc-100">
+            <span v-show="anim.att > 0" class="absolute top-1 right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-warn px-1 text-[9px] font-semibold text-zinc-950">{{ anim.att }}</span>
-              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M3 9h18" /><path d="M9 21V9" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mIde') }}</span>
-            </div>
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
-              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mWorktrees') }}</span>
-            </div>
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
-              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mSessions') }}</span>
-              <span
-                v-show="anim.att > 0"
-                class="rounded-full bg-amber-500/20 px-1.5 text-[11px] font-semibold text-amber-300"
-                >{{ anim.att }}</span
-              >
-            </div>
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
-              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="M7 16.5 12 13.5" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0z" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mGroups') }}</span>
           </div>
+          <!-- groups -->
+          <div class="flex h-9 w-9 items-center justify-center rounded-[9px] text-fg-subtle">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="M7 16.5 12 13.5" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0z" /></svg>
           </div>
 
           <div class="flex-1"></div>
 
-          <!-- nav secondaire -->
+          <!-- bas : thème / réglages / aide -->
-          <div class="flex flex-col gap-1">
+          <div class="flex h-9 w-9 items-center justify-center rounded-[9px] text-fg-subtle">
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
+            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" /></svg>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mSettings') }}</span>
           </div>
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
+          <div class="flex h-9 w-9 items-center justify-center rounded-[9px] text-fg-subtle">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m4.93 4.93 4.24 4.24" /><path d="m14.83 9.17 4.24-4.24" /><path d="m14.83 14.83 4.24 4.24" /><path d="m9.17 14.83-4.24 4.24" /><circle cx="12" cy="12" r="4" /></svg>
+            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3" /><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mHelp') }}</span>
-            </div>
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
-              <IconGitea :size="16" />
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('mGitea') }}</span>
-            </div>
-            <div class="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-zinc-400">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2" /><path d="M14 2v2" /><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" /><path d="M6 2v2" /></svg>
-              <span class="flex-1 text-[12.5px] font-medium">{{ t('coffee') }}</span>
           </div>
         </div>
 
-          <!-- pied : langue · notifications · déconnexion + version (fidèle à AppShellFooter) -->
+        <!-- panneau Projects (fidèle à ProjectTree : arbre projet -> worktree -> session) -->
-          <div class="mt-2 flex items-center gap-2 border-t border-[#1c1c1f] px-1 pt-2.5">
+        <div class="flex w-[176px] flex-none flex-col border-r border-border bg-surface-1 py-2">
-            <span class="rounded border border-zinc-700 px-1.5 py-px font-mono text-[10px] text-zinc-400">{{ locale.toUpperCase() }}</span>
+          <div class="label-mono px-3 pb-2">{{ t('mProjects') }}</div>
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
+          <div class="flex flex-col gap-px px-1 text-[12px]">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" x2="9" y1="12" y2="12" /></svg>
+            <div class="flex items-center gap-1.5 rounded px-2 py-1 text-fg-muted">
-            <span class="ml-auto font-mono text-[10px] text-zinc-600">v2.0.0</span>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" /><circle cx="12" cy="10" r="2" /><path d="M12 12v4" /></svg>
+              <span class="truncate">api</span>
+            </div>
+            <div class="flex items-center gap-1.5 rounded bg-surface-2 px-2 py-1 pl-5 text-fg">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
+              <span class="truncate font-mono text-accent">feat/auth</span>
+            </div>
+            <div class="flex items-center gap-1.5 rounded px-2 py-0.5 pl-9 text-[11px] text-fg-muted">
+              <span class="h-1.5 w-1.5 flex-none rounded-full" :style="{ background: pill.fg, animation: pill.pulse }"></span>
+              <span class="truncate font-mono">claude</span>
+            </div>
+            <div class="flex items-center gap-1.5 rounded px-2 py-1 text-fg-muted">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" /><circle cx="12" cy="10" r="2" /><path d="M12 12v4" /></svg>
+              <span class="truncate">web</span>
+            </div>
+            <div class="flex items-center gap-1.5 rounded px-2 py-1 text-fg-muted">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" /><circle cx="12" cy="10" r="2" /><path d="M12 12v4" /></svg>
+              <span class="truncate">docs</span>
+            </div>
           </div>
         </div>
 
         <!-- main -->
-        <div class="flex min-w-0 flex-1 flex-col gap-[11px] p-[13px]">
+        <div class="flex min-w-0 flex-1 flex-col gap-[11px] bg-surface-0 p-[13px]">
           <!-- terminal pane -->
-          <div
+          <div class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[10px] border border-border bg-surface-0">
-            class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950"
+            <div class="flex items-center justify-between border-b border-border-soft px-[11px] py-2">
-          >
+              <span class="font-mono text-[11.5px] text-fg-muted">api · feat/auth</span>
-            <div class="flex items-center justify-between border-b border-[#1c1c1f] px-[11px] py-2">
-              <span class="font-mono text-[11.5px] text-zinc-300">api · feat/auth</span>
               <span
-                class="inline-flex items-center gap-1.5 rounded px-2 py-[3px] font-mono text-[11px]"
+                class="inline-flex items-center gap-1.5 rounded-full px-2 py-[3px] font-mono text-[11px]"
                 :style="{ background: pill.bg, color: pill.fg }"
               >
-                <span
+                <span class="h-1.5 w-1.5 flex-none rounded-full" :style="{ background: pill.fg, animation: pill.pulse }"></span>
-                  class="h-1.5 w-1.5 flex-none rounded-full"
-                  :style="{ background: pill.dot, animation: pill.pulse }"
-                ></span>
                 {{ sessText }}
               </span>
             </div>
-            <div
+            <div class="flex min-h-[150px] flex-1 flex-col justify-end overflow-hidden p-[11px] font-mono text-xs leading-[1.7] text-fg-muted">
-              class="flex min-h-[150px] flex-1 flex-col justify-end overflow-hidden p-[11px] font-mono text-xs leading-[1.7] text-zinc-300"
-            >
               <div v-for="(ln, i) in termLines" :key="i" :style="{ color: ln.color, whiteSpace: 'pre' }">
                 {{ ln.text }}
               </div>
               <div v-if="anim.cur">
-                <span class="text-emerald-400">$</span>
+                <span class="text-accent">$</span>
-                <span class="ml-1 inline-block h-[13px] w-[7px] animate-blink align-middle bg-zinc-200"></span>
+                <span class="ml-1 inline-block h-[13px] w-[7px] animate-blink bg-fg align-middle"></span>
               </div>
             </div>
           </div>
 
-          <!-- dialogue de permission (fidèle à DialogPrompt : badge type + question + options + Deny) -->
+          <!-- dialogue de permission (fidèle à DialogPrompt) -->
-          <div
+          <div v-if="anim.dlg" class="animate-dlg-in rounded-lg border border-warn/40 bg-warn/10 p-[11px]">
-            v-if="anim.dlg"
-            class="animate-dlg-in rounded-lg border border-amber-900/60 bg-amber-950/30 p-[11px]"
-          >
             <div class="mb-2 flex items-center gap-2">
-              <span class="inline-flex items-center rounded bg-amber-900 px-1.5 py-0.5 text-[11px] font-medium text-amber-200">{{ t('mPermission') }}</span>
+              <span class="inline-flex items-center rounded-full bg-warn/15 px-1.5 py-0.5 font-mono text-[11px] text-warn">{{ t('mPermission') }}</span>
-              <span class="text-[12.5px] text-amber-100">{{ t('dlgQ') }}</span>
+              <span class="text-[12.5px] text-fg">{{ t('dlgQ') }}</span>
             </div>
             <div class="flex flex-wrap gap-[6px]">
               <span
@@ -186,15 +169,15 @@ const dlgOptions = computed(() =>
                 :key="i"
                 class="inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors"
                 :class="op.answered
-                  ? 'border-emerald-500/70 bg-emerald-950/50 text-emerald-300'
+                  ? 'border-accent/70 bg-accent/15 text-accent'
                   : op.highlighted
-                    ? 'border-amber-400 bg-amber-950/50 text-amber-200'
+                    ? 'border-warn bg-warn/15 text-warn'
-                    : 'border-zinc-700 bg-zinc-800 text-zinc-200'"
+                    : 'border-border bg-surface-2 text-fg'"
               >
-                <span class="font-mono" :class="op.answered ? 'text-emerald-400' : 'text-amber-400'">{{ op.num }}</span>
+                <span class="font-mono" :class="op.answered ? 'text-accent' : 'text-warn'">{{ op.num }}</span>
                 {{ op.text }}
               </span>
-              <span class="inline-flex items-center rounded-lg border border-red-900 bg-red-950 px-2.5 py-1.5 text-xs font-medium text-red-300">{{ t('mDeny') }}</span>
+              <span class="inline-flex items-center rounded-lg border border-danger/40 bg-danger/10 px-2.5 py-1.5 text-xs font-medium text-danger">{{ t('mDeny') }}</span>
             </div>
           </div>
         </div>
@@ -204,18 +187,18 @@ const dlgOptions = computed(() =>
     <!-- toast push -->
     <div
       v-if="anim.toast"
-      class="animate-toast-in absolute bottom-[14px] right-[14px] flex w-[248px] items-start gap-2.5 rounded-[11px] border border-[rgba(120,53,15,0.5)] bg-[#0c0c0e] p-3 shadow-toast"
+      class="animate-toast-in absolute right-[14px] bottom-[14px] flex w-[248px] items-start gap-2.5 rounded-[11px] border border-border bg-surface-1 p-3 shadow-toast"
     >
-      <span class="inline-flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg bg-emerald-500/15">
+      <span class="inline-flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg bg-accent/15">
         <img src="/assets/arboretum-mark.png" alt="" width="18" height="18" class="h-[18px] w-[18px] object-contain" />
       </span>
       <div class="min-w-0 flex-1">
         <div class="flex items-center justify-between">
-          <span class="font-mono text-[11px] text-emerald-400">Arboretum</span>
+          <span class="font-mono text-[11px] text-accent">Arboretum</span>
-          <span class="text-[10px] text-zinc-600">now</span>
+          <span class="text-[10px] text-fg-subtle">now</span>
         </div>
-        <div class="mt-[3px] text-[13px] font-semibold text-zinc-100">{{ t('toastTitle') }}</div>
+        <div class="mt-[3px] text-[13px] font-semibold text-fg">{{ t('toastTitle') }}</div>
-        <div class="mt-px text-[11.5px] leading-[1.4] text-zinc-400">{{ t('toastBody') }}</div>
+        <div class="mt-px text-[11.5px] leading-[1.4] text-fg-muted">{{ t('toastBody') }}</div>
       </div>
     </div>
   </div>

packages/site/src/components/HeroSection.vue

@@ -21,27 +21,27 @@ const { t } = useI18n();
           class="block h-[46px] w-[46px] object-contain"
         />
         <span
-          class="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/[0.07] px-[11px] py-[5px] font-mono text-[11.5px] uppercase tracking-[0.1em] text-emerald-400"
+          class="inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/[0.07] px-[11px] py-[5px] font-mono text-[11.5px] uppercase tracking-[0.1em] text-accent"
         >
-          <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_8px_#34d399]"></span>
+          <span class="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_8px_var(--color-accent)]"></span>
           {{ t('heroBadge') }}
         </span>
       </div>
 
-      <h1 class="m-0 text-[clamp(40px,5.6vw,64px)] font-bold leading-[1.04] tracking-[-0.035em] text-zinc-50">
+      <h1 class="m-0 text-[clamp(40px,5.6vw,64px)] font-bold leading-[1.04] tracking-[-0.035em] text-fg">
         {{ t('heroTitle') }}
       </h1>
-      <p class="mt-[22px] max-w-[520px] text-[clamp(17px,1.7vw,20px)] leading-[1.55] text-zinc-400">
+      <p class="mt-[22px] max-w-[520px] text-[clamp(17px,1.7vw,20px)] leading-[1.55] text-fg-muted">
         {{ t('heroSub') }}
       </p>
 
       <div
-        class="mt-[30px] flex max-w-[480px] items-stretch overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950/60"
+        class="mt-[30px] flex max-w-[480px] items-stretch overflow-hidden rounded-[10px] border border-border bg-surface-0/60"
       >
         <div
           class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-[15px] font-mono text-sm"
         >
-          <span class="text-emerald-400">$</span><span class="text-zinc-200">{{ INSTALL_COMMAND }}</span>
+          <span class="text-accent">$</span><span class="text-fg">{{ INSTALL_COMMAND }}</span>
         </div>
         <CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
       </div>
@@ -49,7 +49,7 @@ const { t } = useI18n();
       <div class="mt-6 flex flex-wrap gap-[13px]">
         <a
           href="#how"
-          class="inline-flex items-center gap-[9px] rounded-[9px] bg-emerald-600 px-6 py-[13px] text-[15.5px] font-semibold text-white no-underline transition-[background,transform] duration-150 ease-in-out hover:-translate-y-px hover:bg-emerald-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
+          class="inline-flex items-center gap-[9px] rounded-[9px] bg-accent-solid px-6 py-[13px] text-[15.5px] font-semibold text-white no-underline transition-[background,transform] duration-150 ease-in-out hover:-translate-y-px hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70"
         >
           {{ t('getStarted') }}
           <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
@@ -58,7 +58,7 @@ const { t } = useI18n();
           :href="REPO"
           target="_blank"
           rel="noopener"
-          class="inline-flex items-center gap-[9px] rounded-[9px] border border-zinc-800 px-[22px] py-[13px] text-[15.5px] font-medium text-zinc-100 no-underline transition-colors hover:border-emerald-500/45 hover:text-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
+          class="inline-flex items-center gap-[9px] rounded-[9px] border border-border px-[22px] py-[13px] text-[15.5px] font-medium text-fg no-underline transition-colors hover:border-accent/45 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70"
         >
           <IconGitea :size="17" />
           {{ t('gitea') }}

packages/site/src/components/HowItWorksSection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { INSTALL_COMMAND } from '../composables/useCopy';
+import { NPMRC_LINE } from '../lib/links';
 import CopyButton from './CopyButton.vue';
 
 const { t } = useI18n();
@@ -11,41 +12,55 @@ const LOCAL_URL = 'http://localhost:7317';
 <template>
   <section id="how" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
     <div v-reveal class="mb-[46px] text-center">
-      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('howKicker') }}</div>
+      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('howKicker') }}</div>
-      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">{{ t('howTitle') }}</h2>
+      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-fg">{{ t('howTitle') }}</h2>
+    </div>
+
+    <!-- Prérequis : le paquet vit sur un registre npm PRIVÉ. Sans cette ligne dans ~/.npmrc, le `npx`
+         de l'étape 1 renvoie un 404. C'était le premier mur pour tout nouvel arrivant. -->
+    <div v-reveal class="mb-4 rounded-xl border border-border bg-surface-1/50 p-[26px]">
+      <h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('prereqTitle') }}</h3>
+      <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('prereqDesc') }}</p>
+      <div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 p-[11px]">
+        <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-fg">
+          {{ NPMRC_LINE }}
+        </code>
+        <CopyButton variant="icon" :text="NPMRC_LINE" :label="t('copyCommand')" />
+      </div>
+      <p class="m-0 mt-3 text-[13.5px] leading-[1.55] text-fg-subtle">{{ t('prereqNote') }}</p>
     </div>
 
     <div v-reveal class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
-      <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
+      <div class="rounded-xl border border-border bg-surface-1/50 p-[26px]">
-        <div class="mb-[18px] font-mono text-[13px] text-emerald-400">01</div>
+        <div class="mb-[18px] font-mono text-[13px] text-accent">01</div>
-        <h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step1Title') }}</h3>
+        <h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('step1Title') }}</h3>
-        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step1Desc') }}</p>
+        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('step1Desc') }}</p>
-        <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
+        <div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 p-[11px]">
-          <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-zinc-200">
+          <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-fg">
-            <span class="text-emerald-400">$ </span>{{ INSTALL_COMMAND }}
+            <span class="text-accent">$ </span>{{ INSTALL_COMMAND }}
           </code>
           <CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
         </div>
       </div>
-      <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
+      <div class="rounded-xl border border-border bg-surface-1/50 p-[26px]">
-        <div class="mb-[18px] font-mono text-[13px] text-emerald-400">02</div>
+        <div class="mb-[18px] font-mono text-[13px] text-accent">02</div>
-        <h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step2Title') }}</h3>
+        <h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('step2Title') }}</h3>
-        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step2Desc') }}</p>
+        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('step2Desc') }}</p>
-        <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
+        <div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 p-[11px]">
-          <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-sky-300">
+          <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-info">
             → {{ LOCAL_URL }}
           </code>
           <CopyButton variant="icon" :text="LOCAL_URL" :label="t('copyUrl')" />
         </div>
       </div>
-      <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
+      <div class="rounded-xl border border-border bg-surface-1/50 p-[26px]">
-        <div class="mb-[18px] font-mono text-[13px] text-emerald-400">03</div>
+        <div class="mb-[18px] font-mono text-[13px] text-accent">03</div>
-        <h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step3Title') }}</h3>
+        <h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('step3Title') }}</h3>
-        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step3Desc') }}</p>
+        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('step3Desc') }}</p>
         <div class="flex flex-wrap gap-1.5">
-          <span class="rounded-md bg-emerald-500/10 px-[9px] py-1 font-mono text-[11px] text-emerald-400">{{ t('idle') }}</span>
+          <span class="rounded-md bg-accent/10 px-[9px] py-1 font-mono text-[11px] text-accent">{{ t('idle') }}</span>
-          <span class="rounded-md bg-[rgba(8,47,73,0.7)] px-[9px] py-1 font-mono text-[11px] text-sky-300">{{ t('busy') }}</span>
+          <span class="rounded-md bg-info/15 px-[9px] py-1 font-mono text-[11px] text-info">{{ t('busy') }}</span>
-          <span class="rounded-md bg-[rgba(69,26,3,0.6)] px-[9px] py-1 font-mono text-[11px] text-amber-300">{{ t('waiting') }}</span>
+          <span class="rounded-md bg-warn/15 px-[9px] py-1 font-mono text-[11px] text-warn">{{ t('waiting') }}</span>
         </div>
       </div>
     </div>

packages/site/src/components/LangToggle.vue

@@ -13,13 +13,13 @@ function set(l: AppLocale): void {
   <div
     role="group"
     aria-label="Language"
-    class="flex items-center overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950/40"
+    class="flex items-center overflow-hidden rounded-lg border border-border bg-surface-0/40"
   >
     <button
       type="button"
       :aria-pressed="locale === 'en'"
-      class="cursor-pointer border-none px-[11px] py-1.5 font-mono text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-emerald-500/70"
+      class="cursor-pointer border-none px-[11px] py-1.5 font-mono text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/70"
-      :class="locale === 'en' ? 'bg-zinc-800 text-emerald-400' : 'bg-transparent text-zinc-500'"
+      :class="locale === 'en' ? 'bg-surface-2 text-accent' : 'bg-transparent text-fg-subtle'"
       @click="set('en')"
     >
       EN
@@ -27,8 +27,8 @@ function set(l: AppLocale): void {
     <button
       type="button"
       :aria-pressed="locale === 'fr'"
-      class="cursor-pointer border-none px-[11px] py-1.5 font-mono text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-emerald-500/70"
+      class="cursor-pointer border-none px-[11px] py-1.5 font-mono text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/70"
-      :class="locale === 'fr' ? 'bg-zinc-800 text-emerald-400' : 'bg-transparent text-zinc-500'"
+      :class="locale === 'fr' ? 'bg-surface-2 text-accent' : 'bg-transparent text-fg-subtle'"
       @click="set('fr')"
     >
       FR

packages/site/src/components/LaunchShowcase.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Commandes de démarrage du mockup (fidele a LaunchProjectModal : label + commande mono).
+const cmds = [
+  { label: 'web', run: 'npm run dev' },
+  { label: 'api', run: 'npm run api' },
+  { label: 'db', run: 'docker compose up' },
+];
+</script>
+
+<template>
+  <section id="launch" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
+    <div v-reveal class="flex flex-wrap items-center gap-12">
+      <!-- texte -->
+      <div class="min-w-[280px] flex-[1_1_360px]">
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('launchScKicker') }}</div>
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
+          {{ t('launchScTitle') }}
+        </h2>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('launchScBody') }}</p>
+      </div>
+
+      <!-- mockup : modal « Démarrer le projet » puis dock a un onglet terminal par commande -->
+      <div class="flex min-w-[280px] flex-[1_1_440px] flex-col gap-3">
+        <!-- modal (fidele a LaunchProjectModal) -->
+        <div class="overflow-hidden rounded-xl border border-border bg-surface-1 shadow-card">
+          <header class="flex items-center gap-2 border-b border-border px-3 py-2.5">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="text-accent" aria-hidden="true"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></svg>
+            <span class="text-sm font-semibold text-fg">{{ t('launchModalTitle') }}</span>
+            <span class="ml-auto rounded bg-surface-2 px-1.5 py-0.5 font-mono text-[11px] text-fg-muted">api</span>
+          </header>
+          <div class="flex flex-col gap-2 p-3">
+            <div v-for="c in cmds" :key="c.label" class="flex items-center gap-2">
+              <span class="inline-flex h-4 w-4 flex-none items-center justify-center rounded bg-accent-solid text-white">
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+              </span>
+              <span class="w-16 flex-none truncate rounded bg-surface-2 px-1.5 py-1 text-xs font-medium text-fg">{{ c.label }}</span>
+              <span class="min-w-0 flex-1 truncate rounded border border-border bg-surface-0 px-2 py-1 font-mono text-xs text-fg-muted">{{ c.run }}</span>
+            </div>
+            <div class="mt-1 flex items-center gap-2">
+              <span class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-2.5 py-1.5 text-xs font-medium text-fg-muted">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z" /></svg>
+                {{ t('launchDetect') }}
+              </span>
+              <span class="ml-auto inline-flex items-center gap-1.5 rounded-lg bg-accent-solid px-2.5 py-1.5 text-xs font-semibold text-white">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3" /></svg>
+                {{ t('launchStartN') }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- fleche vers le dock -->
+        <div class="flex justify-center text-fg-subtle">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14" /><path d="m19 12-7 7-7-7" /></svg>
+        </div>
+
+        <!-- dock IDE : un onglet terminal par commande lancée -->
+        <div class="overflow-hidden rounded-xl border border-border bg-surface-0 shadow-card">
+          <div class="flex items-stretch border-b border-border text-[11px]">
+            <span class="label-mono flex items-center gap-1 px-2 py-1.5">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" /></svg>
+              {{ t('mTerminal') }}
+            </span>
+            <span class="flex items-center gap-1.5 border-l border-border bg-surface-0 px-2.5 py-1.5 font-mono text-fg">
+              <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-info"></span>web
+            </span>
+            <span class="flex items-center gap-1.5 border-l border-border px-2.5 py-1.5 font-mono text-fg-muted">api</span>
+            <span class="flex items-center gap-1.5 border-l border-border px-2.5 py-1.5 font-mono text-fg-muted">db</span>
+          </div>
+          <div class="min-h-[104px] p-[11px] font-mono text-[11px] leading-[1.7] text-fg-muted">
+            <div class="text-fg-subtle">$ npm run dev</div>
+            <div class="text-accent">VITE v6 ready in 312 ms</div>
+            <div class="text-fg-subtle">Local: http://localhost:5173/</div>
+            <div><span class="text-accent">$</span><span class="ml-1 inline-block h-[11px] w-1.5 animate-blink bg-fg align-middle"></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

packages/site/src/components/ProblemSection.vue

@@ -5,10 +5,10 @@ const { t } = useI18n();
 
 <template>
   <section v-reveal class="mx-auto max-w-[920px] px-6 pb-[92px] pt-12 text-center">
-    <div class="mb-4 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('probKicker') }}</div>
+    <div class="mb-4 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('probKicker') }}</div>
-    <h2 class="m-0 text-[clamp(28px,3.6vw,42px)] font-semibold leading-[1.18] tracking-[-0.025em] text-zinc-50">
+    <h2 class="m-0 text-[clamp(28px,3.6vw,42px)] font-semibold leading-[1.18] tracking-[-0.025em] text-fg">
       {{ t('probTitle') }}
     </h2>
-    <p class="mx-auto mt-[22px] max-w-[640px] text-[clamp(17px,1.6vw,19px)] text-zinc-400">{{ t('probBody') }}</p>
+    <p class="mx-auto mt-[22px] max-w-[640px] text-[clamp(17px,1.6vw,19px)] text-fg-muted">{{ t('probBody') }}</p>
   </section>
 </template>

packages/site/src/components/RemoteGitSection.vue

@@ -15,12 +15,12 @@ const connections = [
   <section id="remotegit" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
     <div v-reveal class="flex flex-wrap items-center gap-12">
       <div class="min-w-[280px] flex-[1_1_360px]">
-        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('rgKicker') }}</div>
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('rgKicker') }}</div>
-        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
           {{ t('rgTitle') }}
         </h2>
-        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('rgBody') }}</p>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('rgBody') }}</p>
-        <div class="mt-4 inline-flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/[0.08] px-3 py-1.5 text-[13px] font-medium text-emerald-300">
+        <div class="mt-4 inline-flex items-center gap-2 rounded-lg border border-accent/30 bg-accent/[0.08] px-3 py-1.5 text-[13px] font-medium text-accent">
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
           {{ t('rgEncrypted') }}
         </div>
@@ -28,8 +28,8 @@ const connections = [
 
       <div class="flex min-w-[280px] flex-[1_1_440px] flex-col gap-3">
         <!-- carte connexions (fidèle à GitConnectionsSection) -->
-        <div class="flex flex-col gap-2 rounded-xl border border-zinc-800 bg-zinc-900/50 p-3 shadow-card">
+        <div class="flex flex-col gap-2 rounded-xl border border-border bg-surface-1/50 p-3 shadow-card">
-          <h3 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+          <h3 class="flex items-center gap-2 text-sm font-semibold text-fg">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2v6" /><path d="M15 2v6" /><path d="M12 17v5" /><path d="M5 8h14" /><path d="M6 11V8h12v3a6 6 0 0 1-12 0Z" /></svg>
             {{ t('rgConnections') }}
           </h3>
@@ -38,19 +38,19 @@ const connections = [
             <li
               v-for="c in connections"
               :key="c.label"
-              class="flex flex-wrap items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-900/40 px-2.5 py-2"
+              class="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface-1/40 px-2.5 py-2"
             >
               <!-- icône service (Gitea / GitHub / GitLab) -->
-              <span class="inline-flex h-6 w-6 flex-none items-center justify-center rounded-md bg-zinc-800 text-zinc-300">
+              <span class="inline-flex h-6 w-6 flex-none items-center justify-center rounded-md bg-surface-2 text-fg-muted">
                 <svg v-if="c.service === 'github'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 1.3a10.7 10.7 0 0 0-3.38 20.86c.53.1.73-.23.73-.51l-.01-1.79c-2.98.65-3.61-1.44-3.61-1.44-.49-1.24-1.19-1.57-1.19-1.57-.97-.66.07-.65.07-.65 1.08.08 1.64 1.11 1.64 1.11.96 1.64 2.51 1.16 3.12.89.1-.69.37-1.16.68-1.43-2.38-.27-4.88-1.19-4.88-5.3 0-1.17.42-2.13 1.1-2.88-.11-.27-.48-1.36.1-2.84 0 0 .9-.29 2.96 1.1a10.3 10.3 0 0 1 5.38 0c2.05-1.39 2.95-1.1 2.95-1.1.59 1.48.22 2.57.11 2.84.69.75 1.1 1.71 1.1 2.88 0 4.12-2.51 5.02-4.9 5.29.39.33.73.98.73 1.97l-.01 2.92c0 .29.2.62.74.51A10.7 10.7 0 0 0 12 1.3" /></svg>
                 <svg v-else-if="c.service === 'gitlab'" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 21.42 3.68-11.33H8.32L12 21.42Z" /><path d="M12 21.42 8.32 10.09H3.16L12 21.42Z" /><path d="M3.16 10.09 2.04 13.53a.76.76 0 0 0 .28.85L12 21.42 3.16 10.09Z" /><path d="M3.16 10.09h5.16L6.1 3.26a.38.38 0 0 0-.72 0l-2.22 6.83Z" /><path d="M12 21.42l3.68-11.33h5.16L12 21.42Z" /><path d="m20.84 10.09 1.12 3.44a.76.76 0 0 1-.28.85L12 21.42l8.84-11.33Z" /><path d="M20.84 10.09h-5.16l2.22-6.83a.38.38 0 0 1 .72 0l2.22 6.83Z" /></svg>
                 <svg v-else width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z" /><path d="M16 11h2.5a2.5 2.5 0 0 1 0 5H16" /><path d="M7 3c-.5.8.5 1.6 0 2.5" /><path d="M11 3c-.5.8.5 1.6 0 2.5" /></svg>
               </span>
-              <span class="inline-flex items-center rounded bg-sky-950 px-1.5 py-0.5 text-[11px] font-medium text-sky-300">{{ c.service }}</span>
+              <span class="inline-flex items-center rounded bg-info/15 px-1.5 py-0.5 text-[11px] font-medium text-info">{{ c.service }}</span>
-              <span class="font-medium text-zinc-200">{{ c.label }}</span>
+              <span class="font-medium text-fg">{{ c.label }}</span>
-              <span class="text-xs text-zinc-500">{{ c.username }}</span>
+              <span class="text-xs text-fg-subtle">{{ c.username }}</span>
-              <span class="font-mono text-xs text-zinc-600">••••{{ c.last4 }}</span>
+              <span class="font-mono text-xs text-fg-subtle">••••{{ c.last4 }}</span>
-              <span class="ml-auto inline-flex items-center gap-1 rounded bg-emerald-950 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400">
+              <span class="ml-auto inline-flex items-center gap-1 rounded bg-accent/15 px-1.5 py-0.5 text-[11px] font-medium text-accent">
                 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
                 {{ t('rgTested') }}
               </span>
@@ -58,7 +58,7 @@ const connections = [
           </ul>
 
           <div>
-            <span class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-xs font-medium text-zinc-200">
+            <span class="inline-flex items-center gap-1.5 rounded-lg border border-border-strong bg-surface-2 px-2.5 py-1.5 text-xs font-medium text-fg">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
               {{ t('rgAddConnection') }}
             </span>
@@ -66,16 +66,16 @@ const connections = [
         </div>
 
         <!-- progression de clone (fidèle à CloneRepoModal) -->
-        <div class="flex flex-col gap-2 rounded-xl border border-zinc-800 bg-zinc-900/50 p-3 shadow-card">
+        <div class="flex flex-col gap-2 rounded-xl border border-border bg-surface-1/50 p-3 shadow-card">
           <div class="flex items-center gap-2">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>
-            <span class="font-mono text-[13px] text-zinc-200">github.com/jleroy/api</span>
+            <span class="font-mono text-[13px] text-fg">github.com/jleroy/api</span>
-            <span class="ml-auto font-mono text-xs text-zinc-500">62%</span>
+            <span class="ml-auto font-mono text-xs text-fg-subtle">62%</span>
           </div>
-          <div class="h-2 w-full overflow-hidden rounded bg-zinc-800">
+          <div class="h-2 w-full overflow-hidden rounded bg-surface-2">
-            <div class="h-full rounded bg-emerald-500" style="width: 62%"></div>
+            <div class="h-full rounded bg-accent" style="width: 62%"></div>
           </div>
-          <span class="font-mono text-xs text-zinc-500">{{ t('rgCloneReceiving') }}… 62%</span>
+          <span class="font-mono text-xs text-fg-subtle">{{ t('rgCloneReceiving') }}… 62%</span>
         </div>
       </div>
     </div>

packages/site/src/components/SecuritySection.vue

@@ -7,44 +7,44 @@ const { t } = useI18n();
   <section id="security" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
     <div
       v-reveal
-      class="rounded-[18px] border border-emerald-500/[0.18] p-[clamp(28px,4vw,48px)]"
+      class="rounded-[18px] border border-accent/[0.18] p-[clamp(28px,4vw,48px)]"
-      style="background: linear-gradient(180deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0))"
+      style="background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent)"
     >
       <div class="mb-[30px] flex flex-wrap items-end justify-between gap-3.5">
         <div>
-          <div class="mb-3 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('secKicker') }}</div>
+          <div class="mb-3 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('secKicker') }}</div>
-          <h2 class="m-0 text-[clamp(26px,3.2vw,38px)] font-semibold leading-[1.12] tracking-[-0.025em] text-zinc-50">
+          <h2 class="m-0 text-[clamp(26px,3.2vw,38px)] font-semibold leading-[1.12] tracking-[-0.025em] text-fg">
             {{ t('secTitle') }}
           </h2>
         </div>
-        <p class="m-0 max-w-[380px] text-[15.5px] leading-[1.55] text-zinc-400">{{ t('secIntro') }}</p>
+        <p class="m-0 max-w-[380px] text-[15.5px] leading-[1.55] text-fg-muted">{{ t('secIntro') }}</p>
       </div>
 
       <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-3.5">
-        <div class="flex flex-col gap-2.5 rounded-[11px] border border-zinc-800 bg-[#0c0c0e] p-[18px]">
+        <div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
-          <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec1Title') }}</div>
+          <div class="text-[15px] font-semibold text-fg">{{ t('sec1Title') }}</div>
-          <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec1Desc') }}</div>
+          <div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec1Desc') }}</div>
         </div>
-        <div class="flex flex-col gap-2.5 rounded-[11px] border border-zinc-800 bg-[#0c0c0e] p-[18px]">
+        <div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" /><path d="m21 2-9.6 9.6" /><circle cx="7.5" cy="15.5" r="5.5" /></svg>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" /><path d="m21 2-9.6 9.6" /><circle cx="7.5" cy="15.5" r="5.5" /></svg>
-          <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec2Title') }}</div>
+          <div class="text-[15px] font-semibold text-fg">{{ t('sec2Title') }}</div>
-          <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec2Desc') }}</div>
+          <div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec2Desc') }}</div>
         </div>
-        <div class="flex flex-col gap-2.5 rounded-[11px] border border-zinc-800 bg-[#0c0c0e] p-[18px]">
+        <div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg>
-          <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec3Title') }}</div>
+          <div class="text-[15px] font-semibold text-fg">{{ t('sec3Title') }}</div>
-          <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec3Desc') }}</div>
+          <div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec3Desc') }}</div>
         </div>
-        <div class="flex flex-col gap-2.5 rounded-[11px] border border-zinc-800 bg-[#0c0c0e] p-[18px]">
+        <div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.55a11 11 0 0 1 14.08 0" /><path d="M1.42 9a16 16 0 0 1 21.16 0" /><path d="M8.53 16.11a6 6 0 0 1 6.95 0" /><path d="M12 20h.01" /></svg>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.55a11 11 0 0 1 14.08 0" /><path d="M1.42 9a16 16 0 0 1 21.16 0" /><path d="M8.53 16.11a6 6 0 0 1 6.95 0" /><path d="M12 20h.01" /></svg>
-          <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec4Title') }}</div>
+          <div class="text-[15px] font-semibold text-fg">{{ t('sec4Title') }}</div>
-          <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec4Desc') }}</div>
+          <div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec4Desc') }}</div>
         </div>
-        <div class="flex flex-col gap-2.5 rounded-[11px] border border-zinc-800 bg-[#0c0c0e] p-[18px]">
+        <div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /><path d="M12 16v-2" /></svg>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /><path d="M12 16v-2" /></svg>
-          <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec5Title') }}</div>
+          <div class="text-[15px] font-semibold text-fg">{{ t('sec5Title') }}</div>
-          <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec5Desc') }}</div>
+          <div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec5Desc') }}</div>
         </div>
       </div>
     </div>

packages/site/src/components/ShowcaseSection.vue

@@ -12,246 +12,250 @@ const dlgOpts = computed(() => DLG_OPTS[locale.value as AppLocale]);
 
 <template>
   <section id="showcase" class="mx-auto flex max-w-[1200px] scroll-mt-[84px] flex-col gap-[92px] px-6">
-    <!-- a) dashboard worktree-first : rail « À traiter » + section de repo (fidèle à AttentionSection + RepoSection) -->
+    <!-- a) supervision : rail « À traiter » + section de repo (AttentionList + worktrees / git) -->
     <div v-reveal class="flex flex-wrap items-center gap-12">
       <div class="min-w-[280px] flex-[1_1_360px]">
-        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('scAKicker') }}</div>
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('scAKicker') }}</div>
-        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
           {{ t('scATitle') }}
         </h2>
-        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('scABody') }}</p>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('scABody') }}</p>
       </div>
       <div class="flex min-w-[280px] flex-[1_1_440px] flex-col gap-3">
         <!-- rail « À traiter » -->
-        <div class="flex flex-col gap-2 rounded-xl border border-amber-900/50 bg-amber-950/20 p-3 shadow-card">
+        <div class="flex flex-col gap-2 rounded-xl border border-warn/40 bg-warn/10 p-3 shadow-card">
           <div class="flex items-center gap-2">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-warn)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-            <h3 class="text-sm font-semibold text-amber-200">{{ t('mAttn') }}</h3>
+            <h3 class="text-sm font-semibold text-warn">{{ t('mAttn') }}</h3>
-            <span class="rounded-full bg-amber-500/20 px-1.5 text-[11px] font-semibold text-amber-300">1</span>
+            <span class="rounded-full bg-warn/20 px-1.5 text-[11px] font-semibold text-warn">1</span>
           </div>
-          <span class="truncate font-mono text-xs text-amber-300/80">~/code/arboretum/api</span>
+          <span class="truncate font-mono text-xs text-warn/80">~/code/arboretum/api</span>
           <!-- DialogPrompt -->
-          <div class="rounded-lg border border-amber-900/60 bg-amber-950/30 p-2.5">
+          <div class="rounded-lg border border-warn/40 bg-warn/10 p-2.5">
             <div class="flex items-center gap-2">
-              <span class="inline-flex items-center rounded bg-amber-900 px-1.5 py-0.5 text-[11px] font-medium text-amber-200">{{ t('mPermission') }}</span>
+              <span class="inline-flex items-center rounded-full bg-warn/15 px-1.5 py-0.5 font-mono text-[11px] text-warn">{{ t('mPermission') }}</span>
-              <span class="text-[12.5px] text-amber-100">{{ t('dlgQ') }}</span>
+              <span class="text-[12.5px] text-fg">{{ t('dlgQ') }}</span>
             </div>
             <div class="mt-2 flex flex-wrap gap-1.5">
               <span
                 v-for="(op, i) in dlgOpts"
                 :key="i"
-                class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-xs font-medium text-zinc-200"
+                class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-2.5 py-1.5 text-xs font-medium text-fg"
               >
-                <span class="font-mono text-amber-400">{{ i + 1 }}</span> {{ op }}
+                <span class="font-mono text-warn">{{ i + 1 }}</span> {{ op }}
               </span>
-              <span class="inline-flex items-center rounded-lg border border-red-900 bg-red-950 px-2.5 py-1.5 text-xs font-medium text-red-300">{{ t('mDeny') }}</span>
+              <span class="inline-flex items-center rounded-lg border border-danger/40 bg-danger/10 px-2.5 py-1.5 text-xs font-medium text-danger">{{ t('mDeny') }}</span>
             </div>
           </div>
         </div>
 
         <!-- section de repo : worktrees + état de session -->
-        <div class="flex flex-col gap-2 rounded-xl border border-zinc-800 bg-zinc-900/50 p-3 shadow-card">
+        <div class="flex flex-col gap-2 rounded-xl border border-border bg-surface-1/50 p-3 shadow-card">
           <header class="flex flex-wrap items-center gap-2">
-            <h3 class="font-semibold text-zinc-100">arboretum</h3>
+            <h3 class="font-semibold text-fg">arboretum</h3>
-            <span class="truncate font-mono text-xs text-zinc-500">~/code/arboretum</span>
+            <span class="truncate font-mono text-xs text-fg-subtle">~/code/arboretum</span>
-            <span class="ml-auto inline-flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-200">
+            <span class="ml-auto inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-2 py-1 text-xs font-medium text-fg">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
               {{ t('mStart') }}
             </span>
           </header>
 
           <!-- worktree : branche principale, session au repos -->
-          <div class="rounded border border-zinc-800 bg-zinc-900/40 p-2">
+          <div class="rounded border border-border bg-surface-1/40 p-2">
             <div class="flex items-center gap-2">
-              <span class="font-mono text-sm text-zinc-200">main</span>
+              <span class="font-mono text-sm text-fg">main</span>
-              <span class="inline-flex items-center rounded bg-zinc-800 px-1.5 py-0.5 text-[11px] font-medium text-zinc-400">{{ t('mMain') }}</span>
+              <span class="inline-flex items-center rounded bg-surface-2 px-1.5 py-0.5 text-[11px] font-medium text-fg-muted">{{ t('mMain') }}</span>
-              <span class="ml-auto text-xs text-zinc-600">{{ t('mClean') }}</span>
+              <span class="ml-auto text-xs text-fg-subtle">{{ t('mClean') }}</span>
             </div>
-            <p class="truncate font-mono text-xs text-zinc-500">~/code/arboretum</p>
+            <p class="truncate font-mono text-xs text-fg-subtle">~/code/arboretum</p>
             <div class="mt-1 flex items-center gap-2">
-              <span class="inline-flex items-center gap-1 rounded bg-zinc-800/60 px-1.5 py-0.5">
+              <span class="inline-flex items-center gap-1 rounded bg-surface-2/60 px-1.5 py-0.5">
-                <span class="inline-flex items-center gap-1 rounded bg-emerald-950 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400">
+                <span class="inline-flex items-center gap-1 rounded-full bg-accent/15 px-1.5 py-0.5 text-[11px] font-medium text-accent">
-                  <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>{{ t('idle') }}
+                  <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>{{ t('idle') }}
                 </span>
-                <span class="font-mono text-[11px] text-zinc-400">claude</span>
+                <span class="font-mono text-[11px] text-fg-muted">claude</span>
               </span>
             </div>
           </div>
 
           <!-- worktree : branche de feature, session occupée -->
-          <div class="rounded border border-zinc-800 bg-zinc-900/40 p-2">
+          <div class="rounded border border-border bg-surface-1/40 p-2">
             <div class="flex items-center gap-2">
-              <span class="font-mono text-sm text-zinc-200">feat/auth</span>
+              <span class="font-mono text-sm text-fg">feat/auth</span>
-              <span class="ml-auto flex items-center gap-2 text-xs text-zinc-500">
+              <span class="ml-auto flex items-center gap-2 text-xs text-fg-subtle">
                 <span>↑2</span>
-                <span class="text-amber-400">● {{ t('mDirty') }}</span>
+                <span class="text-warn">● {{ t('mDirty') }}</span>
               </span>
             </div>
-            <p class="truncate font-mono text-xs text-zinc-500">~/code/arboretum/.wt/feat-auth</p>
+            <p class="truncate font-mono text-xs text-fg-subtle">~/code/arboretum/.wt/feat-auth</p>
             <div class="mt-1 flex items-center gap-2">
-              <span class="inline-flex items-center gap-1 rounded bg-zinc-800/60 px-1.5 py-0.5">
+              <span class="inline-flex items-center gap-1 rounded bg-surface-2/60 px-1.5 py-0.5">
-                <span class="inline-flex items-center gap-1 rounded bg-sky-950 px-1.5 py-0.5 text-[11px] font-medium text-sky-300">
+                <span class="inline-flex items-center gap-1 rounded-full bg-info/15 px-1.5 py-0.5 text-[11px] font-medium text-info">
-                  <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>{{ t('busy') }}
+                  <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-info"></span>{{ t('busy') }}
                 </span>
-                <span class="font-mono text-[11px] text-zinc-400">claude</span>
+                <span class="font-mono text-[11px] text-fg-muted">claude</span>
               </span>
             </div>
-            <!-- actions git de la carte : commit / push (fidèle au WorktreeCard) -->
+            <!-- actions git de la carte : commit / push -->
             <div class="mt-1 flex items-center gap-1.5">
-              <span class="inline-flex items-center rounded border border-zinc-700 bg-zinc-800 px-1.5 py-0.5 text-[11px] font-medium text-zinc-300">{{ t('mCommit') }}</span>
+              <span class="inline-flex items-center rounded border border-border bg-surface-2 px-1.5 py-0.5 text-[11px] font-medium text-fg-muted">{{ t('mCommit') }}</span>
-              <span class="inline-flex items-center rounded border border-zinc-700 bg-zinc-800 px-1.5 py-0.5 text-[11px] font-medium text-zinc-300">{{ t('mPush') }} ↑2</span>
+              <span class="inline-flex items-center rounded border border-border bg-surface-2 px-1.5 py-0.5 text-[11px] font-medium text-fg-muted">{{ t('mPush') }} ↑2</span>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- b) grille multi-terminaux (fidèle à TerminalCell : badge d'état + titre repo · branche + commande) -->
+    <!-- b) grille multi-terminaux (badge d'état + titre repo · branche + commande) -->
     <div v-reveal class="flex flex-wrap-reverse items-center gap-12">
       <div class="min-w-[280px] flex-[1_1_440px]">
-        <div class="grid grid-cols-2 gap-2.5 overflow-hidden rounded-xl border border-zinc-800 bg-[#0c0c0e] p-3 shadow-card">
+        <div class="grid grid-cols-2 gap-2.5 overflow-hidden rounded-xl border border-border bg-surface-1 p-3 shadow-card">
-          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+          <div class="overflow-hidden rounded-lg border border-border bg-surface-0">
-            <div class="flex items-center gap-2 border-b border-zinc-800 px-2 py-1.5">
+            <div class="flex items-center gap-2 border-b border-border px-2 py-1.5">
-              <span class="inline-flex items-center gap-1 rounded bg-sky-950 px-1.5 py-0.5 text-[10px] font-medium text-sky-300"><span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>{{ t('busy') }}</span>
+              <span class="inline-flex items-center gap-1 rounded-full bg-info/15 px-1.5 py-0.5 text-[10px] font-medium text-info"><span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-info"></span>{{ t('busy') }}</span>
-              <span class="truncate font-mono text-[11px] text-zinc-300">api · feat/auth</span>
+              <span class="truncate font-mono text-[11px] text-fg-muted">api · feat/auth</span>
-              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-fg-subtle">claude</span>
             </div>
-            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
+            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-fg-muted">
-              <div class="text-emerald-400">● Edit session.ts</div>
+              <div class="text-accent">● Edit session.ts</div>
-              <div class="text-emerald-400">+ const token = sign(...)</div>
+              <div class="text-accent">+ const token = sign(...)</div>
-              <div class="text-red-400">- legacy cookie auth</div>
+              <div class="text-danger">- legacy cookie auth</div>
-              <div class="text-zinc-500">refactoring guards…</div>
+              <div class="text-fg-subtle">refactoring guards…</div>
             </div>
           </div>
-          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+          <div class="overflow-hidden rounded-lg border border-border bg-surface-0">
-            <div class="flex items-center gap-2 border-b border-zinc-800 px-2 py-1.5">
+            <div class="flex items-center gap-2 border-b border-border px-2 py-1.5">
-              <span class="inline-flex items-center gap-1 rounded bg-emerald-950 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400"><span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>{{ t('idle') }}</span>
+              <span class="inline-flex items-center gap-1 rounded-full bg-accent/15 px-1.5 py-0.5 text-[10px] font-medium text-accent"><span class="h-1.5 w-1.5 rounded-full bg-accent"></span>{{ t('idle') }}</span>
-              <span class="truncate font-mono text-[11px] text-zinc-300">web · fix/cart</span>
+              <span class="truncate font-mono text-[11px] text-fg-muted">web · fix/cart</span>
-              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-fg-subtle">claude</span>
             </div>
-            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
+            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-fg-muted">
-              <div class="text-emerald-400">✓ all tests passing</div>
+              <div class="text-accent">✓ all tests passing</div>
-              <div class="text-zinc-500">24 passed, 0 failed</div>
+              <div class="text-fg-subtle">24 passed, 0 failed</div>
               <div>
-                <span class="text-emerald-400">$</span>
+                <span class="text-accent">$</span>
-                <span class="ml-1 inline-block h-[11px] w-1.5 animate-blink align-middle bg-zinc-200"></span>
+                <span class="ml-1 inline-block h-[11px] w-1.5 animate-blink bg-fg align-middle"></span>
               </div>
             </div>
           </div>
-          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+          <div class="overflow-hidden rounded-lg border border-border bg-surface-0">
-            <div class="flex items-center gap-2 border-b border-zinc-800 px-2 py-1.5">
+            <div class="flex items-center gap-2 border-b border-border px-2 py-1.5">
-              <span class="inline-flex items-center gap-1 rounded bg-sky-950 px-1.5 py-0.5 text-[10px] font-medium text-sky-300"><span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>{{ t('busy') }}</span>
+              <span class="inline-flex items-center gap-1 rounded-full bg-info/15 px-1.5 py-0.5 text-[10px] font-medium text-info"><span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-info"></span>{{ t('busy') }}</span>
-              <span class="truncate font-mono text-[11px] text-zinc-300">db · refactor</span>
+              <span class="truncate font-mono text-[11px] text-fg-muted">db · refactor</span>
-              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-fg-subtle">claude</span>
             </div>
-            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
+            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-fg-muted">
-              <div class="text-emerald-400">● Write migration</div>
+              <div class="text-accent">● Write migration</div>
-              <div class="text-zinc-500">0003_add_index.sql</div>
+              <div class="text-fg-subtle">0003_add_index.sql</div>
-              <div class="text-zinc-500">applying to schema…</div>
+              <div class="text-fg-subtle">applying to schema…</div>
             </div>
           </div>
-          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+          <div class="overflow-hidden rounded-lg border border-border bg-surface-0">
-            <div class="flex items-center gap-2 border-b border-zinc-800 px-2 py-1.5">
+            <div class="flex items-center gap-2 border-b border-border px-2 py-1.5">
-              <span class="inline-flex items-center gap-1 rounded bg-amber-950 px-1.5 py-0.5 text-[10px] font-medium text-amber-300"><span class="h-1.5 w-1.5 animate-pulse-amber rounded-full bg-amber-300"></span>{{ t('waiting') }}</span>
+              <span class="inline-flex items-center gap-1 rounded-full bg-warn/15 px-1.5 py-0.5 text-[10px] font-medium text-warn"><span class="h-1.5 w-1.5 animate-pulse-amber rounded-full bg-warn"></span>{{ t('waiting') }}</span>
-              <span class="truncate font-mono text-[11px] text-zinc-300">docs · api</span>
+              <span class="truncate font-mono text-[11px] text-fg-muted">docs · api</span>
-              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-fg-subtle">claude</span>
             </div>
-            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
+            <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-fg-muted">
-              <div class="text-emerald-400">● Read README.md</div>
+              <div class="text-accent">● Read README.md</div>
-              <div class="text-amber-300">Permission required</div>
+              <div class="text-warn">Permission required</div>
-              <div class="text-zinc-500">waiting for input…</div>
+              <div class="text-fg-subtle">waiting for input…</div>
             </div>
           </div>
         </div>
       </div>
       <div class="min-w-[280px] flex-[1_1_360px]">
-        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('scBKicker') }}</div>
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('scBKicker') }}</div>
-        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
           {{ t('scBTitle') }}
         </h2>
-        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('scBBody') }}</p>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('scBBody') }}</p>
       </div>
     </div>
 
-    <!-- c) mobile : push + réponse au dialogue (fidèle à DialogPrompt) + barre d'onglets -->
+    <!-- c) mobile : push + réponse au dialogue + barre d'onglets -->
     <div v-reveal class="flex flex-wrap items-center gap-12">
       <div class="min-w-[280px] flex-[1_1_380px]">
-        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('scCKicker') }}</div>
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('scCKicker') }}</div>
-        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
           {{ t('scCTitle') }}
         </h2>
-        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('scCBody') }}</p>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('scCBody') }}</p>
       </div>
       <div class="flex min-w-[280px] flex-[1_1_320px] justify-center">
-        <div class="relative w-[300px] overflow-hidden rounded-[40px] border-[9px] border-zinc-900 bg-zinc-950 shadow-phone">
+        <div class="relative w-[300px] overflow-hidden rounded-[40px] border-[9px] border-surface-1 bg-surface-0 shadow-phone">
           <div class="flex h-[30px] items-center justify-center">
-            <div class="h-1.5 w-[90px] rounded-full bg-zinc-800"></div>
+            <div class="h-1.5 w-[90px] rounded-full bg-surface-2"></div>
           </div>
           <div class="px-3 pb-[64px]">
             <!-- toast push -->
-            <div class="flex items-start gap-[11px] rounded-[15px] border border-[rgba(120,53,15,0.5)] bg-[#0c0c0e] p-[13px] shadow-toast-sm">
+            <div class="flex items-start gap-[11px] rounded-[15px] border border-border bg-surface-1 p-[13px] shadow-toast-sm">
-              <span class="inline-flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg bg-emerald-500/[0.14]">
+              <span class="inline-flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg bg-accent/15">
                 <img src="/assets/arboretum-mark.png" alt="" width="18" height="18" class="h-[18px] w-[18px] object-contain" />
               </span>
               <div class="min-w-0 flex-1">
                 <div class="flex items-center justify-between">
-                  <span class="font-mono text-[11px] text-emerald-400">Arboretum</span>
+                  <span class="font-mono text-[11px] text-accent">Arboretum</span>
-                  <span class="text-[10px] text-zinc-600">now</span>
+                  <span class="text-[10px] text-fg-subtle">now</span>
                 </div>
-                <div class="mt-[3px] text-[13.5px] font-semibold text-zinc-50">{{ t('toastTitle') }}</div>
+                <div class="mt-[3px] text-[13.5px] font-semibold text-fg">{{ t('toastTitle') }}</div>
-                <div class="text-xs leading-[1.45] text-zinc-400">{{ t('toastBody') }}</div>
+                <div class="text-xs leading-[1.45] text-fg-muted">{{ t('toastBody') }}</div>
               </div>
             </div>
 
             <!-- carte « À traiter » + DialogPrompt -->
-            <div class="mt-[14px] flex flex-col gap-2 rounded-[15px] border border-amber-900/50 bg-amber-950/20 p-2.5">
+            <div class="mt-[14px] flex flex-col gap-2 rounded-[15px] border border-warn/40 bg-warn/10 p-2.5">
               <div class="flex items-center gap-2">
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--color-warn)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-                <span class="text-[13px] font-semibold text-amber-200">{{ t('mAttn') }}</span>
+                <span class="text-[13px] font-semibold text-warn">{{ t('mAttn') }}</span>
-                <span class="rounded-full bg-amber-500/20 px-1.5 text-[11px] font-semibold text-amber-300">1</span>
+                <span class="rounded-full bg-warn/20 px-1.5 text-[11px] font-semibold text-warn">1</span>
               </div>
-              <span class="font-mono text-[11px] text-amber-300/80">api · feat/auth</span>
+              <span class="font-mono text-[11px] text-warn/80">api · feat/auth</span>
-              <div class="rounded-lg border border-amber-900/60 bg-amber-950/30 p-2.5">
+              <div class="rounded-lg border border-warn/40 bg-warn/10 p-2.5">
-                <span class="inline-flex items-center rounded bg-amber-900 px-1.5 py-0.5 text-[11px] font-medium text-amber-200">{{ t('mPermission') }}</span>
+                <span class="inline-flex items-center rounded-full bg-warn/15 px-1.5 py-0.5 font-mono text-[11px] text-warn">{{ t('mPermission') }}</span>
-                <div class="mt-1.5 text-[13px] leading-[1.4] text-amber-100">{{ t('dlgQ') }}</div>
+                <div class="mt-1.5 text-[13px] leading-[1.4] text-fg">{{ t('dlgQ') }}</div>
                 <div class="mt-2 flex flex-col gap-1.5">
                   <span
                     v-for="(op, i) in dlgOpts"
                     :key="i"
-                    class="flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-[13px] font-medium text-zinc-200"
+                    class="flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-2.5 py-2 text-[13px] font-medium text-fg"
                   >
-                    <span class="font-mono text-amber-400">{{ i + 1 }}</span> {{ op }}
+                    <span class="font-mono text-warn">{{ i + 1 }}</span> {{ op }}
                   </span>
-                  <span class="rounded-lg border border-red-900 bg-red-950 px-2.5 py-2 text-center text-[13px] font-medium text-red-300">{{ t('mDeny') }}</span>
+                  <span class="rounded-lg border border-danger/40 bg-danger/10 px-2.5 py-2 text-center text-[13px] font-medium text-danger">{{ t('mDeny') }}</span>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- barre d'onglets mobile (fidèle à MobileTabBar) -->
+          <!-- barre d'onglets mobile (fidèle a IdeShell : explorer / editor / terminal / git / sessions / groups) -->
-          <div class="absolute inset-x-0 bottom-0 flex border-t border-zinc-800 bg-zinc-950/95 backdrop-blur">
+          <div class="absolute inset-x-0 bottom-0 flex border-t border-border bg-surface-0/95 backdrop-blur">
-            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500">
+            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-fg-subtle">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M3 9h18" /><path d="M9 21V9" /></svg>
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M3 9h18" /><path d="M9 21V9" /></svg>
-              <span class="text-[10px]">{{ t('mIde') }}</span>
+              <span class="text-[9px]">{{ t('mExplorer') }}</span>
             </div>
-            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500">
+            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-fg-subtle">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v5h5" /><path d="m10 13-2 2 2 2" /><path d="m14 17 2-2-2-2" /></svg>
-              <span class="text-[10px]">{{ t('mWorktrees') }}</span>
+              <span class="text-[9px]">{{ t('mEditor') }}</span>
             </div>
-            <div class="relative flex flex-1 flex-col items-center gap-0.5 py-2 text-emerald-400">
+            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-fg-subtle">
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" /></svg>
+              <span class="text-[9px]">{{ t('mTerminal') }}</span>
+            </div>
+            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-fg-subtle">
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M13 6h3a2 2 0 0 1 2 2v7" /><path d="M11 18H8a2 2 0 0 1-2-2V9" /></svg>
+              <span class="text-[9px]">{{ t('mGit') }}</span>
+            </div>
+            <div class="relative flex flex-1 flex-col items-center gap-0.5 py-2 text-accent">
               <span class="relative">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /></svg>
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2" /></svg>
-                <span class="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-semibold text-amber-950">1</span>
+                <span class="absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-warn px-1 text-[9px] font-semibold text-zinc-950">1</span>
               </span>
-              <span class="text-[10px]">{{ t('mSessions') }}</span>
+              <span class="text-[9px]">{{ t('mSessions') }}</span>
             </div>
-            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500">
+            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-fg-subtle">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="M7 16.5 12 13.5" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0z" /></svg>
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="M7 16.5 12 13.5" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0z" /></svg>
-              <span class="text-[10px]">{{ t('mGroups') }}</span>
+              <span class="text-[9px]">{{ t('mGroups') }}</span>
-            </div>
-            <div class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" /></svg>
-              <span class="text-[10px]">{{ t('mMore') }}</span>
             </div>
           </div>
         </div>

packages/site/src/components/ThemeToggle.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// Bascule de thème du site (dark -> light -> system), alignée sur l'app.
+import { useI18n } from 'vue-i18n';
+import { themeMode, cycleTheme } from '../lib/theme';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border text-fg-muted transition-colors hover:border-accent hover:text-accent"
+    :title="t('themeToggle')"
+    :aria-label="t('themeToggle')"
+    @click="cycleTheme()"
+  >
+    <!-- soleil (clair) -->
+    <svg
+      v-if="themeMode === 'light'"
+      viewBox="0 0 24 24"
+      width="17"
+      height="17"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+      />
+    </svg>
+    <!-- écran (système) -->
+    <svg
+      v-else-if="themeMode === 'system'"
+      viewBox="0 0 24 24"
+      width="17"
+      height="17"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect x="2" y="3" width="20" height="14" rx="2" />
+      <path d="M8 21h8M12 17v4" />
+    </svg>
+    <!-- lune (sombre) -->
+    <svg
+      v-else
+      viewBox="0 0 24 24"
+      width="17"
+      height="17"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+    </svg>
+  </button>
+</template>

packages/site/src/components/WorkGroupsSection.vue

@@ -7,45 +7,45 @@ const { t } = useI18n();
   <section class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 py-[92px]">
     <div
       v-reveal
-      class="flex flex-wrap items-center gap-12 rounded-[18px] border border-zinc-800 p-[clamp(28px,4vw,52px)]"
+      class="flex flex-wrap items-center gap-12 rounded-[18px] border border-border p-[clamp(28px,4vw,52px)]"
-      style="background: linear-gradient(180deg, rgba(24, 24, 27, 0.55), rgba(12, 12, 14, 0.55))"
+      style="background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-1) 55%, transparent), color-mix(in srgb, var(--color-surface-0) 55%, transparent))"
     >
       <div class="min-w-[280px] flex-[1_1_360px]">
-        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('grpKicker') }}</div>
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('grpKicker') }}</div>
-        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,36px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,36px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
           {{ t('grpTitle') }}
         </h2>
-        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('grpBody') }}</p>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('grpBody') }}</p>
       </div>
       <div class="flex min-w-[280px] flex-[1_1_360px] justify-center">
         <div class="flex w-full max-w-[380px] items-center">
           <div class="flex flex-none flex-col items-center gap-2">
             <div
-              class="inline-flex h-[62px] w-[62px] items-center justify-center rounded-[15px] border border-emerald-500/35 bg-emerald-500/[0.12] text-emerald-400"
+              class="inline-flex h-[62px] w-[62px] items-center justify-center rounded-[15px] border border-accent/35 bg-accent/[0.12] text-accent"
             >
               <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="M7 16.5 12 13.5" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0z" /></svg>
             </div>
-            <span class="font-mono text-[11px] text-zinc-300">{{ t('grpHub') }}</span>
+            <span class="font-mono text-[11px] text-fg-muted">{{ t('grpHub') }}</span>
           </div>
           <div class="relative h-[96px] flex-1">
             <svg width="100%" height="100%" viewBox="0 0 100 96" preserveAspectRatio="none" class="absolute inset-0" aria-hidden="true">
-              <path d="M0 48 H40 V14 H100" fill="none" stroke="rgba(16,185,129,.45)" stroke-width="1.4" />
+              <path d="M0 48 H40 V14 H100" fill="none" stroke="var(--color-accent)" stroke-width="1.4" />
-              <path d="M0 48 H40 V48 H100" fill="none" stroke="rgba(16,185,129,.45)" stroke-width="1.4" />
+              <path d="M0 48 H40 V48 H100" fill="none" stroke="var(--color-accent)" stroke-width="1.4" />
-              <path d="M0 48 H40 V82 H100" fill="none" stroke="rgba(16,185,129,.45)" stroke-width="1.4" />
+              <path d="M0 48 H40 V82 H100" fill="none" stroke="var(--color-accent)" stroke-width="1.4" />
             </svg>
           </div>
           <div class="flex flex-none flex-col gap-2.5">
-            <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-[#0c0c0e] px-3 py-2">
+            <div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 px-3 py-2">
-              <span class="h-1.5 w-1.5 rounded-full bg-sky-300"></span>
+              <span class="h-1.5 w-1.5 rounded-full bg-info"></span>
-              <span class="font-mono text-[11px] text-zinc-300">api</span>
+              <span class="font-mono text-[11px] text-fg-muted">api</span>
             </div>
-            <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-[#0c0c0e] px-3 py-2">
+            <div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 px-3 py-2">
-              <span class="h-1.5 w-1.5 rounded-full bg-sky-300"></span>
+              <span class="h-1.5 w-1.5 rounded-full bg-info"></span>
-              <span class="font-mono text-[11px] text-zinc-300">web</span>
+              <span class="font-mono text-[11px] text-fg-muted">web</span>
             </div>
-            <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-[#0c0c0e] px-3 py-2">
+            <div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 px-3 py-2">
-              <span class="h-1.5 w-1.5 rounded-full bg-sky-300"></span>
+              <span class="h-1.5 w-1.5 rounded-full bg-info"></span>
-              <span class="font-mono text-[11px] text-zinc-300">sdk</span>
+              <span class="font-mono text-[11px] text-fg-muted">sdk</span>
             </div>
           </div>
         </div>

packages/site/src/components/WorkspaceShowcase.vue

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
-// Lignes du diff (fidele a DiffViewer : add -> emerald-950/40, del -> rose-950/40).
+// Lignes du diff (fidèle a DiffViewer : fond teinté add/del, texte neutre).
 type DiffLine = { o: string; n: string; type: 'ctx' | 'add' | 'del' | 'hunk'; text: string };
 const diffLines: DiffLine[] = [
   { o: '', n: '', type: 'hunk', text: '@@ -12,7 +12,9 @@ export function session(' },
@@ -16,9 +16,9 @@ const diffLines: DiffLine[] = [
 ];
 
 function rowClass(type: DiffLine['type']): string {
-  if (type === 'add') return 'bg-emerald-950/40 text-emerald-200';
+  if (type === 'add') return 'diff-add';
-  if (type === 'del') return 'bg-rose-950/40 text-rose-200';
+  if (type === 'del') return 'diff-del';
-  return 'text-zinc-300';
+  return 'diff-ctx';
 }
 function marker(type: DiffLine['type']): string {
   return type === 'add' ? '+' : type === 'del' ? '-' : ' ';
@@ -28,30 +28,31 @@ function marker(type: DiffLine['type']): string {
 <template>
   <section id="workspace" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
     <div v-reveal class="mb-[40px] max-w-[760px]">
-      <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('wsKicker') }}</div>
+      <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-accent">{{ t('wsKicker') }}</div>
-      <h2 class="m-0 mb-4 text-[clamp(26px,3vw,38px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+      <h2 class="m-0 mb-4 text-[clamp(26px,3vw,38px)] font-semibold leading-[1.15] tracking-[-0.025em] text-fg">
         {{ t('wsTitle') }}
       </h2>
-      <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('wsBody') }}</p>
+      <p class="m-0 text-[16.5px] leading-[1.6] text-fg-muted">{{ t('wsBody') }}</p>
     </div>
 
     <!-- maquette IDE multi-projet : barre d'activite, arbre unifie, onglets d'editeur, dock bas -->
-    <div v-reveal class="overflow-hidden rounded-[14px] border border-zinc-800 bg-[#09090b] shadow-card">
+    <div v-reveal class="overflow-hidden rounded-[14px] border border-border bg-surface-0 shadow-card">
       <!-- barre superieure -->
-      <header class="flex items-center gap-3 border-b border-zinc-800 px-3 py-2">
+      <header class="flex items-center gap-3 border-b border-border px-3 py-2">
-        <span class="flex items-center gap-2 text-sm font-medium text-zinc-200">
+        <span class="flex items-center gap-2 text-sm font-medium text-fg">
           <img src="/assets/arboretum-mark.png" alt="" width="16" height="16" class="h-4 w-4 object-contain" />
           Arboretum
         </span>
-        <span class="ml-auto flex items-center gap-1.5 text-[11px] text-zinc-500">
+        <span class="ml-auto flex items-center gap-1.5 text-[11px] text-fg-subtle">
-          <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>{{ t('waiting') }}
+          <span class="h-1.5 w-1.5 rounded-full bg-warn"></span>{{ t('waiting') }}
         </span>
       </header>
 
       <div class="flex">
         <!-- barre d'activite -->
-        <nav class="flex w-11 flex-none flex-col items-center gap-1 border-r border-zinc-800 bg-zinc-900/50 py-2 text-zinc-500">
+        <nav class="flex w-11 flex-none flex-col items-center gap-1 border-r border-border bg-surface-1 py-2 text-fg-subtle">
-          <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-700 text-zinc-100" :title="t('wsFiles')">
+          <span class="relative flex h-9 w-9 items-center justify-center rounded-lg bg-surface-2 text-accent" :title="t('wsFiles')">
+            <span class="absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-full bg-accent"></span>
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 14 3h-3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" /><path d="M3 5a2 2 0 0 0 2 2h3" /><path d="M3 3v13a2 2 0 0 0 2 2h3" /></svg>
           </span>
           <span class="flex h-9 w-9 items-center justify-center rounded-lg" :title="t('wsChanges')">
@@ -60,42 +61,53 @@ function marker(type: DiffLine['type']): string {
           <span class="flex h-9 w-9 items-center justify-center rounded-lg" :title="t('wsTerminal')">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" /></svg>
           </span>
+          <!-- 4e onglet : Groupes (l'app en a quatre, le mockup n'en montrait que trois) -->
+          <span class="flex h-9 w-9 items-center justify-center rounded-lg" :title="t('wsGroups')">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7.5 4.27 9 5.15" /><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg>
+          </span>
         </nav>
 
         <!-- arbre unifie : plusieurs projets a la fois -->
-        <aside class="hidden w-[248px] flex-none flex-col border-r border-zinc-800 md:flex">
+        <aside class="hidden w-[248px] flex-none flex-col border-r border-border md:flex">
-          <div class="px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-zinc-500">Projects</div>
+          <div class="label-mono px-3 py-2">Projects</div>
           <div class="px-1 pb-2 font-mono text-xs">
             <!-- projet api (ouvert) -->
-            <div class="flex items-center gap-1 rounded py-0.5 pl-1.5 pr-2 text-zinc-200">
+            <div class="flex items-center gap-1 rounded py-0.5 pr-2 pl-1.5 text-fg">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-fg-subtle" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
               <span class="font-medium">api</span>
             </div>
             <!-- worktree feat/auth (actif) -->
-            <div class="flex items-center gap-1 rounded bg-zinc-800/70 py-0.5 pl-[18px] pr-2 text-zinc-100">
+            <div class="flex items-center gap-1 rounded bg-surface-2 py-0.5 pr-2 pl-[18px] text-fg">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-fg-subtle" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
-              <span class="truncate">feat/auth</span>
+              <span class="truncate text-accent">feat/auth</span>
+              <!-- compteurs git compacts : ahead / indexés / non indexés, comme dans l'app -->
+              <span class="ml-auto flex shrink-0 items-center gap-1 text-[11px]">
+                <span class="text-accent">↑2</span>
+                <span class="text-accent">●1</span>
+                <span class="text-warn">○1</span>
+              </span>
             </div>
             <!-- session claude corrélée -->
-            <div class="flex items-center gap-1.5 rounded py-0.5 pl-[38px] pr-2 text-zinc-300">
+            <div class="flex items-center gap-1.5 rounded py-0.5 pr-2 pl-[38px] text-fg-muted">
-              <span class="inline-flex items-center gap-1 rounded bg-sky-950 px-1.5 py-[1px] text-[10px] text-sky-300"><span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>{{ t('busy') }}</span>
+              <span class="inline-flex items-center gap-1 rounded-full bg-info/15 px-1.5 py-[1px] text-[10px] text-info"><span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-info"></span>{{ t('busy') }}</span>
               <span class="truncate">claude</span>
             </div>
             <!-- fichiers du worktree -->
-            <div class="flex items-center justify-between gap-1 rounded bg-zinc-800 py-0.5 pl-[30px] pr-2 text-zinc-100">
+            <div class="flex items-center justify-between gap-1 rounded bg-surface-2 py-0.5 pr-2 pl-[30px] text-fg">
-              <span class="truncate">session.ts</span><span class="font-bold text-amber-400">M</span>
+              <span class="truncate">session.ts</span><span class="font-bold text-warn">M</span>
             </div>
-            <div class="flex items-center justify-between gap-1 rounded py-0.5 pl-[30px] pr-2 text-zinc-300">
+            <div class="flex items-center justify-between gap-1 rounded py-0.5 pr-2 pl-[30px] text-fg-muted">
-              <span class="truncate">token.ts</span><span class="font-bold text-emerald-400">A</span>
+              <span class="truncate">token.ts</span><span class="font-bold text-accent">A</span>
             </div>
             <!-- projet web (replie) -->
-            <div class="flex items-center gap-1 rounded py-0.5 pl-1.5 pr-2 text-zinc-300">
+            <div class="flex items-center gap-1 rounded py-0.5 pr-2 pl-1.5 text-fg-muted">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-fg-subtle" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
               <span class="font-medium">web</span>
+              <span class="ml-auto shrink-0 text-[11px] text-warn">○3</span>
             </div>
-            <div class="flex items-center gap-1 rounded py-0.5 pl-1.5 pr-2 text-zinc-300">
+            <div class="flex items-center gap-1 rounded py-0.5 pr-2 pl-1.5 text-fg-muted">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-fg-subtle" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
               <span class="font-medium">docs</span>
             </div>
           </div>
@@ -104,21 +116,21 @@ function marker(type: DiffLine['type']): string {
         <!-- centre : onglets d'editeur + diff + dock terminaux -->
         <main class="flex min-w-0 flex-1 flex-col">
           <!-- onglets d'editeur (plusieurs fichiers, potentiellement de projets differents) -->
-          <div class="flex items-stretch overflow-x-auto border-b border-zinc-800 text-xs">
+          <div class="flex items-stretch overflow-x-auto border-b border-border text-xs">
-            <span class="flex items-center gap-1.5 border-r border-zinc-800 bg-[#09090b] px-3 py-1.5 text-zinc-100">
+            <span class="flex items-center gap-1.5 border-r border-border bg-surface-0 px-3 py-1.5 text-fg">
-              session.ts <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
+              session.ts <span class="h-1.5 w-1.5 rounded-full bg-warn"></span>
             </span>
-            <span class="flex items-center gap-1.5 border-r border-zinc-800 px-3 py-1.5 text-zinc-400">token.ts</span>
+            <span class="flex items-center gap-1.5 border-r border-border px-3 py-1.5 text-fg-muted">token.ts</span>
-            <span class="flex items-center gap-1.5 border-r border-zinc-800 px-3 py-1.5 text-zinc-500">app.vue</span>
+            <span class="flex items-center gap-1.5 border-r border-border px-3 py-1.5 text-fg-subtle">app.vue</span>
           </div>
           <!-- barre : bascule Editor/Diff + chemin -->
-          <div class="flex items-center gap-2 border-b border-zinc-800 px-2 py-1">
+          <div class="flex items-center gap-2 border-b border-border px-2 py-1">
-            <div class="inline-flex rounded-lg border border-zinc-800 bg-zinc-950/40 p-0.5">
+            <div class="inline-flex rounded-lg border border-border bg-surface-0/40 p-0.5">
-              <span class="rounded-md px-2.5 py-1 text-xs font-medium text-zinc-400">{{ t('wsEditor') }}</span>
+              <span class="rounded-[9px] px-2.5 py-1 text-xs font-medium text-fg-muted">{{ t('wsEditor') }}</span>
-              <span class="rounded-md bg-zinc-800 px-2.5 py-1 text-xs font-medium text-zinc-100">{{ t('wsDiff') }}</span>
+              <span class="rounded-[9px] bg-surface-2 px-2.5 py-1 text-xs font-medium text-fg">{{ t('wsDiff') }}</span>
             </div>
-            <span class="truncate font-mono text-[11px] text-zinc-500">api · src/core/session.ts</span>
+            <span class="truncate font-mono text-[11px] text-fg-subtle">api · src/core/session.ts</span>
-            <span class="ml-auto inline-flex items-center gap-1.5 rounded-md bg-emerald-500 px-2.5 py-1 text-xs font-semibold text-emerald-950">
+            <span class="ml-auto inline-flex items-center gap-1.5 rounded-[9px] bg-accent-solid px-2.5 py-1 text-xs font-semibold text-white">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
               {{ t('wsCommitBtn') }}
             </span>
@@ -127,46 +139,46 @@ function marker(type: DiffLine['type']): string {
           <div class="overflow-x-auto">
             <table class="w-full border-collapse font-mono text-xs leading-5">
               <tbody>
-                <tr v-for="(l, i) in diffLines" :key="i" :class="l.type === 'hunk' ? 'bg-zinc-900/60 text-sky-300/80' : rowClass(l.type)">
+                <tr v-for="(l, i) in diffLines" :key="i" :class="l.type === 'hunk' ? 'bg-surface-1/60 text-info/80' : rowClass(l.type)">
-                  <td class="w-10 select-none px-2 text-right text-zinc-600">{{ l.o }}</td>
+                  <td class="w-10 px-2 text-right text-fg-subtle select-none">{{ l.o }}</td>
-                  <td class="w-10 select-none px-2 text-right text-zinc-600">{{ l.n }}</td>
+                  <td class="w-10 px-2 text-right text-fg-subtle select-none">{{ l.n }}</td>
-                  <td class="whitespace-pre px-2">{{ l.type === 'hunk' ? l.text : marker(l.type) + l.text }}</td>
+                  <td class="px-2 whitespace-pre">{{ l.type === 'hunk' ? l.text : marker(l.type) + l.text }}</td>
                 </tr>
               </tbody>
             </table>
           </div>
 
           <!-- dock terminaux en bas (onglets par session) -->
-          <div class="border-t border-zinc-800">
+          <div class="border-t border-border">
-            <div class="flex items-stretch border-b border-zinc-800 text-[11px]">
+            <div class="flex items-stretch border-b border-border text-[11px]">
-              <span class="flex items-center gap-1 px-2 py-1.5 font-semibold uppercase tracking-wide text-zinc-500">
+              <span class="label-mono flex items-center gap-1 px-2 py-1.5">
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" /></svg>
                 {{ t('wsTerminal') }}
               </span>
-              <span class="flex items-center gap-1.5 border-l border-zinc-800 bg-[#09090b] px-2.5 py-1.5 font-mono text-zinc-100">
+              <span class="flex items-center gap-1.5 border-l border-border bg-surface-0 px-2.5 py-1.5 font-mono text-fg">
-                <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>api · feat/auth
+                <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-info"></span>api · feat/auth
               </span>
-              <span class="flex items-center gap-1.5 border-l border-zinc-800 px-2.5 py-1.5 font-mono text-zinc-400">web · main</span>
+              <span class="flex items-center gap-1.5 border-l border-border px-2.5 py-1.5 font-mono text-fg-muted">web · main</span>
             </div>
-            <div class="min-h-[112px] p-[11px] font-mono text-[11px] leading-[1.7] text-zinc-300">
+            <div class="min-h-[112px] p-[11px] font-mono text-[11px] leading-[1.7] text-fg-muted">
-              <div class="text-emerald-400">● Edit session.ts</div>
+              <div class="text-accent">● Edit session.ts</div>
-              <div class="text-emerald-400">+ const token = sign(...)</div>
+              <div class="text-accent">+ const token = sign(...)</div>
-              <div class="text-zinc-500">running tests…</div>
+              <div class="text-fg-subtle">running tests…</div>
-              <div class="text-emerald-400">✓ 24 passed</div>
+              <div class="text-accent">✓ 24 passed</div>
-              <div><span class="text-emerald-400">$</span><span class="ml-1 inline-block h-[11px] w-1.5 animate-blink align-middle bg-zinc-200"></span></div>
+              <div><span class="text-accent">$</span><span class="ml-1 inline-block h-[11px] w-1.5 animate-blink bg-fg align-middle"></span></div>
             </div>
           </div>
         </main>
       </div>
 
       <!-- barre de statut -->
-      <footer class="flex items-center gap-3 border-t border-zinc-800 px-3 py-1 text-[11px] text-zinc-500">
+      <footer class="flex items-center gap-3 border-t border-border px-3 py-1 text-[11px] text-fg-subtle">
-        <span class="flex items-center gap-1 font-mono text-zinc-400">
+        <span class="flex items-center gap-1 font-mono text-fg-muted">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
           feat/auth
         </span>
-        <span class="text-emerald-400">↑2</span>
+        <span class="text-accent">↑2</span>
-        <span class="text-amber-400">○3</span>
+        <span class="text-warn">○3</span>
         <span class="ml-auto">api · {{ t('busy') }}</span>
       </footer>
     </div>

packages/site/src/i18n/content.ts

@@ -11,7 +11,7 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
   en: [
     {
       q: 'How is this different from running Claude Code in a terminal?',
-      a: 'It runs the very same interactive claude CLI. Arboretum just wraps it in a managed terminal you reach from a browser. What you gain on top: a worktree-first dashboard across all your repos, live busy / waiting / available states, a multi-terminal grid, push notifications, and the ability to answer a prompt from your phone. It supervises your sessions; it does not change how Claude Code works.',
+      a: 'It runs the very same interactive claude CLI. Arboretum just wraps it in a managed terminal you reach from a browser. What you gain on top: a multi-project IDE across all your repos and worktrees, live busy / waiting / available states, a multi-terminal grid, push notifications, and the ability to answer a prompt from your phone. It supervises your sessions; it does not change how Claude Code works.',
     },
     {
       q: 'Does it need the cloud?',
@@ -31,7 +31,7 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
     },
     {
       q: 'Can I edit files directly?',
-      a: 'Yes. The /workspace view is a real IDE: a file tree, a full Monaco editor with inline diffs, and the correlated session terminal. Stage changes file by file, write a commit message, amend, then push, all from the browser, on any device.',
+      a: 'Yes. The /ide view is a real IDE: a file tree, a full Monaco editor with inline diffs, and the correlated session terminal. Stage changes file by file, write a commit message, amend, then push, all from the browser, on any device.',
     },
     {
       q: 'Can I connect GitHub, GitLab or Gitea and clone?',
@@ -45,7 +45,7 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
   fr: [
     {
       q: 'En quoi est-ce différent de lancer Claude Code dans un terminal ?',
-      a: "C'est exactement le même CLI claude interactif. Arboretum l'enveloppe simplement dans un terminal managé accessible depuis un navigateur. Ce que vous gagnez en plus : un dashboard worktree-first sur tous vos repos, les états occupée / en attente / disponible en direct, une grille multi-terminaux, des notifications push, et la possibilité de répondre à une question depuis votre téléphone. Il supervise vos sessions ; il ne change rien au fonctionnement de Claude Code.",
+      a: "C'est exactement le même CLI claude interactif. Arboretum l'enveloppe simplement dans un terminal managé accessible depuis un navigateur. Ce que vous gagnez en plus : un IDE multi-projet sur tous vos repos et worktrees, les états occupée / en attente / disponible en direct, une grille multi-terminaux, des notifications push, et la possibilité de répondre à une question depuis votre téléphone. Il supervise vos sessions ; il ne change rien au fonctionnement de Claude Code.",
     },
     {
       q: 'A-t-il besoin du cloud ?',
@@ -65,7 +65,7 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
     },
     {
       q: 'Puis-je éditer les fichiers directement ?',
-      a: "Oui. La vue /workspace est un vrai IDE : un arbre de fichiers, un éditeur Monaco complet avec les diffs inline, et le terminal de la session corrélée. Indexez les changements fichier par fichier, rédigez un message de commit, amendez, puis poussez, le tout depuis le navigateur, sur n'importe quel appareil.",
+      a: "Oui. La vue /ide est un vrai IDE : un arbre de fichiers, un éditeur Monaco complet avec les diffs inline, et le terminal de la session corrélée. Indexez les changements fichier par fichier, rédigez un message de commit, amendez, puis poussez, le tout depuis le navigateur, sur n'importe quel appareil.",
     },
     {
       q: 'Puis-je connecter GitHub, GitLab ou Gitea et cloner ?',

packages/site/src/i18n/en.ts

@@ -2,10 +2,13 @@
 export default {
   navFeatures: 'Features',
   navWorkspace: 'IDE',
+  navLaunch: 'Start project',
+  navRemoteGit: 'Git services',
   navDownload: 'Download',
   navHow: 'How it works',
   navSecurity: 'Security',
   navFaq: 'FAQ',
+  themeToggle: 'Toggle theme',
   gitea: 'View on Gitea',
   heroBadge: 'Mission control for AI coding agents',
   heroTitle: 'Mission control for your AI coding agents',
@@ -38,7 +41,13 @@ export default {
   feat9Desc: 'Drive worktrees and attach sessions in native terminals, right inside your editor.',
   feat10Title: 'New project in one click',
   feat10Desc: 'Create a project folder anywhere (optional git init) and start a Claude session in it, from any device.',
-  scAKicker: 'Worktree-first dashboard',
+  feat16Title: 'Start your project',
+  feat16Desc: 'Define your dev commands once (dev server, API, database), then launch each in its own terminal in a single click.',
+  feat17Title: 'Branch history',
+  feat17Desc: 'See what is already committed, which commits are not pushed yet, and unfold the full diff of any of them, right next to what is still uncommitted.',
+  feat18Title: 'Git state at a glance',
+  feat18Desc: 'Every worktree row carries its own counters: ahead/behind, staged, unstaged, conflicts. They refresh on their own while an agent works, no click needed.',
+  scAKicker: 'Session supervision',
   scATitle: 'See what needs you, before anything stalls',
   scABody:
     'A live list of every worktree and its session state. The Needs attention rail floats the agents waiting on a decision to the top, so nothing sits blocked while you are heads-down elsewhere. Commit, push or promote a branch to main straight from the card, and hide the noisy history left by past terminal sessions so the list stays actionable.',
@@ -55,6 +64,11 @@ export default {
   grpTitle: 'Drive every repo from one Claude session',
   grpBody:
     'Group the repos that move together: a service, its client, its docs. Launch a single Claude session that spans all of them at once: one conversation, one shared context working across every repo, instead of juggling one agent per repo.',
+  prereqTitle: 'Prerequisites',
+  prereqDesc:
+    'Arboretum is published on a private npm registry. Declare its scope once in your ~/.npmrc, otherwise npm answers 404.',
+  prereqNote:
+    'You also need Node 22.16 or newer (the daemon uses node:sqlite) and the Claude Code CLI on your PATH. The desktop app needs neither: it bundles its own runtime.',
   howKicker: 'How it works',
   howTitle: 'Zero install. Three steps.',
   step1Title: 'Launch the daemon',
@@ -81,15 +95,13 @@ export default {
   footTag: 'a garden of branches, one pane of glass.',
   license: 'MIT License',
   coffee: 'Buy me a coffee',
-  mIde: 'IDE',
+  mProjects: 'Projects',
-  mWorktrees: 'Worktrees',
+  mExplorer: 'Explorer',
+  mEditor: 'Editor',
+  mTerminal: 'Terminal',
+  mGit: 'Git',
   mSessions: 'Sessions',
   mGroups: 'Groups',
-  mSettings: 'Settings',
-  mHelp: 'Help',
-  mGitea: 'Gitea',
-  mMore: 'More',
-  mSearch: 'Search',
   mAttn: 'Needs attention',
   waiting: 'waiting',
   busy: 'busy',
@@ -131,16 +143,18 @@ export default {
   wsDiff: 'Diff',
   wsFiles: 'Files',
   wsChanges: 'Changes',
-  wsStaged: 'Staged',
   wsTerminal: 'Terminal',
-  wsCommitMsg: 'Implement token refresh',
+  wsGroups: 'Groups',
-  wsCommitPlaceholder: 'Commit message…',
-  wsAmend: 'Amend last commit',
   wsCommitBtn: 'Commit',
-  wsPushBtn: 'Push',
+
-  wsStage: 'Stage',
+  // « Start the project » : lancement multi-terminaux
-  wsUnstage: 'Unstage',
+  launchScKicker: 'Start the project',
-  wsDiscard: 'Discard',
+  launchScTitle: 'One click, every terminal your project needs',
+  launchScBody:
+    'Most projects need more than one long-running command: a dev server, an API, a database. Define them once per project (auto-detected from package.json, Procfile or docker-compose), then launch them all at once. Each command opens in its own docked terminal you can attach to, restart, or stop as a group.',
+  launchModalTitle: 'Start the project',
+  launchDetect: 'Detect',
+  launchStartN: 'Start (3)',
 
   // Remote git services + clone
   rgKicker: 'Remote git · encrypted',
@@ -151,7 +165,6 @@ export default {
   rgTested: 'tested',
   rgAddConnection: 'Add connection',
   rgEncrypted: 'Encrypted at rest',
-  rgCloning: 'Cloning',
   rgCloneReceiving: 'Receiving objects',
 
   // Security pillar (encrypted secrets)
@@ -159,20 +172,43 @@ export default {
   sec5Desc: 'Remote git credentials are encrypted at rest (AES-256-GCM) and never returned in clear by the API.',
 
   // Desktop app (download)
+  wayKicker: 'Three ways to run it',
+  wayTitle: 'Desktop app, web server, or inside VS Code',
+  wayBody:
+    'The same daemon powers all three. Pick the one that fits the machine you are on, they share the same data.',
+  wayDesktop: 'Desktop app',
+  wayDesktopBody:
+    'A native window that starts the daemon for you, already signed in, with a tray icon and launch-at-login. Nothing to install beyond the app itself.',
+  wayDesktopLink: 'Download',
+  wayServer: 'Self-hosted web server',
+  wayServerBody:
+    'Run the daemon on your workstation and reach its UI from any device you own: laptop, tablet, phone. Tailscale Serve gives you HTTPS inside your tailnet without opening a port, which is also what enables push notifications and PWA install.',
+  wayVscode: 'VS Code extension',
+  wayVscodeBody:
+    'A native extension (not a webview) that connects to the same daemon: live tree of repos, worktrees and sessions, native terminals, a waiting counter with notifications, and git actions.',
+  wayVscodeLink: 'Get the VSIX',
+  wayOriginNote:
+    'One rule to remember when serving it beyond localhost: the daemon rejects any address it was not told about, with a 403. Start it with --allow-origin <your URL> (repeatable) and it is settled. Binding beyond loopback also requires an explicit acknowledgement flag, on purpose.',
+  wayBuildNote: 'Build the desktop app yourself from',
   dlKicker: 'Native desktop app',
   dlTitle: 'Download Arboretum for your desktop',
   dlBody:
     'A native app for Linux, Windows and macOS. It bundles the daemon and its Node runtime, so there is nothing else to install: launch it and your multi-project IDE opens, already signed in. Tray, launch at login and auto-update included. Prefer the terminal? Keep running it in the browser with a single command.',
   dlLinux: 'Linux',
-  dlLinuxHint: 'AppImage and .deb',
+  dlLinuxHint: '.deb (Debian, Ubuntu)',
+  dlLinuxAlt: 'AppImage (other distributions)',
   dlWin: 'Windows',
   dlWinHint: 'NSIS installer and portable',
   dlMac: 'macOS',
-  dlMacHint: 'dmg (best-effort, unsigned)',
+  dlMacHint: 'build from source (unsigned)',
   dlNoNode: 'No Node install needed',
   dlBundled: 'Daemon and runtime bundled',
   dlAutoUpdate: 'Auto-update on Windows and Linux',
+  dlVersion: 'Latest desktop release: {version}',
+  dlAllAssets: 'All release assets',
+  dlUnsigned:
+    'The binaries are not code-signed. On Windows, SmartScreen shows "unknown publisher": choose More info, then Run anyway. On macOS, right-click the app then Open.',
   dlGet: 'Get the app',
   dlSource: 'Build from source',
-  dlNote: 'Installers are published on the releases page once a desktop build is tagged. Until then, build it from source (see packages/desktop).',
+  dlNote: 'macOS builds are produced on demand (no macOS CI runner): build them with npm run dist:mac, or ask for one.',
 };

packages/site/src/i18n/fr.ts

@@ -2,10 +2,13 @@
 export default {
   navFeatures: 'Fonctionnalités',
   navWorkspace: 'IDE',
+  navLaunch: 'Démarrer',
+  navRemoteGit: 'Services git',
   navDownload: 'Télécharger',
   navHow: 'Comment ça marche',
   navSecurity: 'Sécurité',
   navFaq: 'FAQ',
+  themeToggle: 'Changer de thème',
   gitea: 'Voir sur Gitea',
   heroBadge: 'Poste de commandement pour agents de code IA',
   heroTitle: 'Le poste de commandement de vos agents de code IA',
@@ -38,7 +41,13 @@ export default {
   feat9Desc: 'Pilotez vos worktrees et attachez vos sessions dans des terminaux natifs, directement dans votre éditeur.',
   feat10Title: 'Nouveau projet en un clic',
   feat10Desc: "Créez un dossier de projet où vous voulez (git init optionnel) et lancez-y une session Claude, depuis n'importe quel appareil.",
-  scAKicker: 'Dashboard worktree-first',
+  feat16Title: 'Démarrez votre projet',
+  feat16Desc: 'Définissez vos commandes de démarrage une fois (serveur de dev, API, base de données), puis lancez chacune dans son terminal en un seul clic.',
+  feat17Title: 'Historique de branche',
+  feat17Desc: 'Voyez ce qui est déjà commité, quels commits ne sont pas encore poussés, et dépliez le diff complet de n’importe lequel, juste à côté de ce qui n’est pas commité.',
+  feat18Title: 'État git d’un coup d’œil',
+  feat18Desc: 'Chaque worktree porte ses compteurs : avance/retard, indexés, non indexés, conflits. Ils se rafraîchissent seuls pendant qu’un agent travaille, sans un clic.',
+  scAKicker: 'Supervision des sessions',
   scATitle: 'Voyez ce qui vous attend, avant que ça ne bloque',
   scABody:
     "Une liste en direct de chaque worktree et de l'état de sa session. Le bandeau À traiter fait remonter les agents en attente d'une décision, pour que rien ne reste bloqué pendant que vous êtes concentré ailleurs. Commitez, poussez ou passez une branche en principal directement depuis la carte, et masquez l'historique encombrant laissé par vos anciennes sessions terminal pour garder la liste actionnable.",
@@ -55,6 +64,11 @@ export default {
   grpTitle: 'Pilotez tous vos repos depuis une seule session Claude',
   grpBody:
     'Regroupez les repos qui avancent ensemble : un service, son client, sa doc. Lancez une seule session Claude qui les couvre tous à la fois : une conversation, un contexte partagé travaillant à travers chaque repo, au lieu de jongler avec un agent par repo.',
+  prereqTitle: 'Prérequis',
+  prereqDesc:
+    'Arboretum est publié sur un registre npm privé. Déclarez son scope une fois dans votre ~/.npmrc, sinon npm répond 404.',
+  prereqNote:
+    'Il vous faut aussi Node 22.16 ou plus récent (le daemon utilise node:sqlite) et le CLI Claude Code dans votre PATH. L’app de bureau n’a besoin d’aucun des deux : elle embarque son runtime.',
   howKicker: 'Comment ça marche',
   howTitle: 'Zéro install. Trois étapes.',
   step1Title: 'Lancez le daemon',
@@ -81,15 +95,13 @@ export default {
   footTag: 'un jardin de branches, une seule vitre.',
   license: 'Licence MIT',
   coffee: 'Paye-moi un café',
-  mIde: 'IDE',
+  mProjects: 'Projets',
-  mWorktrees: 'Worktrees',
+  mExplorer: 'Explorateur',
+  mEditor: 'Éditeur',
+  mTerminal: 'Terminal',
+  mGit: 'Git',
   mSessions: 'Sessions',
   mGroups: 'Groupes',
-  mSettings: 'Réglages',
-  mHelp: 'Aide',
-  mGitea: 'Gitea',
-  mMore: 'Plus',
-  mSearch: 'Rechercher',
   mAttn: 'À traiter',
   waiting: 'en attente',
   busy: 'occupée',
@@ -131,16 +143,18 @@ export default {
   wsDiff: 'Diff',
   wsFiles: 'Fichiers',
   wsChanges: 'Changements',
-  wsStaged: 'Indexés',
   wsTerminal: 'Terminal',
-  wsCommitMsg: 'Implémente le rafraîchissement du token',
+  wsGroups: 'Groupes',
-  wsCommitPlaceholder: 'Message de commit…',
-  wsAmend: 'Amender le dernier commit',
   wsCommitBtn: 'Commit',
-  wsPushBtn: 'Push',
+
-  wsStage: 'Indexer',
+  // « Démarrer le projet » : lancement multi-terminaux
-  wsUnstage: 'Désindexer',
+  launchScKicker: 'Démarrer le projet',
-  wsDiscard: 'Annuler',
+  launchScTitle: 'Un clic, tous les terminaux dont votre projet a besoin',
+  launchScBody:
+    "La plupart des projets exigent plusieurs commandes longue durée : un serveur de dev, une API, une base de données. Définissez-les une fois par projet (détectées depuis package.json, Procfile ou docker-compose), puis lancez-les toutes d'un coup. Chaque commande ouvre son propre terminal en dock, que vous pouvez attacher, relancer ou arrêter en groupe.",
+  launchModalTitle: 'Démarrer le projet',
+  launchDetect: 'Détecter',
+  launchStartN: 'Démarrer (3)',
 
   // Services git distants + clone
   rgKicker: 'Git distant · chiffré',
@@ -151,7 +165,6 @@ export default {
   rgTested: 'testée',
   rgAddConnection: 'Ajouter une connexion',
   rgEncrypted: 'Chiffré au repos',
-  rgCloning: 'Clonage',
   rgCloneReceiving: 'Réception des objets',
 
   // Pilier sécurité (secrets chiffrés)
@@ -159,20 +172,43 @@ export default {
   sec5Desc: "Les identifiants git distants sont chiffrés au repos (AES-256-GCM) et jamais renvoyés en clair par l'API.",
 
   // App de bureau (téléchargement)
+  wayKicker: 'Trois façons de l’utiliser',
+  wayTitle: 'App de bureau, serveur web, ou dans VS Code',
+  wayBody:
+    'Le même daemon alimente les trois. Choisissez celle qui correspond à la machine où vous êtes : elles partagent les mêmes données.',
+  wayDesktop: 'Application de bureau',
+  wayDesktopBody:
+    'Une fenêtre native qui démarre le daemon pour vous, déjà connectée, avec icône de barre système et lancement au démarrage. Rien à installer d’autre que l’app.',
+  wayDesktopLink: 'Télécharger',
+  wayServer: 'Serveur web auto-hébergé',
+  wayServerBody:
+    'Faites tourner le daemon sur votre poste et ouvrez son interface depuis n’importe quel appareil qui vous appartient : portable, tablette, téléphone. Tailscale Serve fournit HTTPS dans votre tailnet sans ouvrir de port, ce qui active aussi les notifications et l’installation PWA.',
+  wayVscode: 'Extension VS Code',
+  wayVscodeBody:
+    'Une extension native (pas un webview) connectée au même daemon : arbre temps réel des dépôts, worktrees et sessions, terminaux natifs, compteur de sessions en attente avec notifications, et actions git.',
+  wayVscodeLink: 'Obtenir le VSIX',
+  wayOriginNote:
+    'Une règle à retenir dès qu’on sort de localhost : le daemon rejette toute adresse dont on ne lui a pas parlé, avec un 403. Démarrez-le avec --allow-origin <votre URL> (répétable) et c’est réglé. Sortir de la boucle locale demande en outre un flag d’acquittement explicite, volontairement.',
+  wayBuildNote: 'Buildez l’app de bureau vous-même depuis',
   dlKicker: 'App de bureau native',
   dlTitle: 'Téléchargez Arboretum pour votre bureau',
   dlBody:
     "Une app native pour Linux, Windows et macOS. Elle embarque le daemon et son runtime Node : rien d'autre à installer, lancez-la et votre IDE multi-projet s'ouvre, déjà authentifié. Tray, lancement au login et auto-update inclus. Vous préférez le terminal ? Continuez à la lancer dans le navigateur en une commande.",
   dlLinux: 'Linux',
-  dlLinuxHint: 'AppImage et .deb',
+  dlLinuxHint: '.deb (Debian, Ubuntu)',
+  dlLinuxAlt: 'AppImage (autres distributions)',
   dlWin: 'Windows',
   dlWinHint: 'Installeur NSIS et portable',
   dlMac: 'macOS',
-  dlMacHint: 'dmg (best-effort, non signé)',
+  dlMacHint: 'à builder depuis les sources (non signé)',
   dlNoNode: "Pas besoin d'installer Node",
   dlBundled: 'Daemon et runtime embarqués',
   dlAutoUpdate: 'Auto-update sur Windows et Linux',
+  dlVersion: 'Dernière version desktop : {version}',
+  dlAllAssets: 'Tous les fichiers de la release',
+  dlUnsigned:
+    'Les binaires ne sont pas signés. Sous Windows, SmartScreen affiche « éditeur inconnu » : choisissez Informations complémentaires, puis Exécuter quand même. Sous macOS, clic droit sur l’app puis Ouvrir.',
   dlGet: "Obtenir l'app",
   dlSource: 'Builder depuis les sources',
-  dlNote: 'Les installeurs sont publiés sur la page des releases dès qu\'un build desktop est taggé. En attendant, buildez depuis les sources (voir packages/desktop).',
+  dlNote: 'Les builds macOS sont produits à la demande (pas de runner macOS en CI) : construisez-les avec npm run dist:mac, ou demandez-en un.',
 };

packages/site/src/lib/links.ts

@@ -8,3 +8,27 @@ export const COFFEE = 'https://buymeacoffee.com/johanleroy';
 // et sources du paquet Electron pour un build local.
 export const RELEASES = `${REPO}/releases`;
 export const DESKTOP_SRC = `${REPO}/src/branch/main/packages/desktop`;
+
+// Versions publiées, source unique du site (affichées et utilisées pour construire les liens d'assets).
+// À bumper avec les tags de release correspondants.
+export const VERSIONS = {
+  daemon: '3.4.0',
+  desktop: '0.2.0',
+  vscode: '0.4.1',
+} as const;
+
+/**
+ * Lien direct d'un asset de release desktop. Le canal `desktop-latest` est un tag FLOTTANT recréé par la
+ * CI à chaque version : ces URL restent donc valides sans être rééditées à chaque release.
+ */
+const DESKTOP_LATEST = `${REPO}/releases/download/desktop-latest`;
+export const DOWNLOADS = {
+  deb: `${DESKTOP_LATEST}/Arboretum-${VERSIONS.desktop}-amd64.deb`,
+  appImage: `${DESKTOP_LATEST}/Arboretum-${VERSIONS.desktop}-x86_64.AppImage`,
+  windows: `${DESKTOP_LATEST}/Arboretum-${VERSIONS.desktop}-x64.exe`,
+  vsix: `${REPO}/releases/tag/vscode-v${VERSIONS.vscode}`,
+} as const;
+
+/** Registre npm privé à déclarer avant tout `npx` : sans lui, npm renvoie un 404. */
+export const NPM_REGISTRY = 'https://git.lidge.fr/api/packages/johanleroy/npm/';
+export const NPMRC_LINE = '@johanleroy:registry=https://git.lidge.fr/api/packages/johanleroy/npm/';

packages/site/src/lib/theme.ts

@@ -0,0 +1,75 @@
+// Thème clair / sombre du site vitrine (aligné sur l'app : lib/theme.ts de packages/web).
+// Singleton module Vue : `themeMode` (persisté en localStorage, clé `arb.theme`), `resolvedTheme`
+// (résout `system` via prefers-color-scheme), application au <html> (dataset.theme + metas).
+import { computed, ref, watch, type ComputedRef } from 'vue';
+
+export type ThemeMode = 'dark' | 'light' | 'system';
+export type ResolvedTheme = 'dark' | 'light';
+
+// MÊME clé que l'app (packages/web/src/lib/theme.ts) : le site se présente comme aligné sur elle, et
+// un visiteur qui bascule le thème ici retrouve le même sur son instance.
+const STORAGE_KEY = 'arb.theme';
+// Doit rester synchronisé avec --color-surface-0 (style.css) : fond du <html> + metas.
+const BG: Record<ResolvedTheme, string> = { dark: '#09090b', light: '#fafafa' };
+
+function initialMode(): ThemeMode {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved === 'dark' || saved === 'light' || saved === 'system') return saved;
+  } catch {
+    /* localStorage indisponible */
+  }
+  return 'dark';
+}
+
+export const themeMode = ref<ThemeMode>(initialMode());
+
+const mql =
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null;
+const systemDark = ref(mql?.matches ?? true);
+mql?.addEventListener('change', (e) => {
+  systemDark.value = e.matches;
+});
+
+export const resolvedTheme: ComputedRef<ResolvedTheme> = computed(() => {
+  if (themeMode.value === 'system') return systemDark.value ? 'dark' : 'light';
+  return themeMode.value;
+});
+
+function applyTheme(resolved: ResolvedTheme): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  root.dataset.theme = resolved;
+  root.style.backgroundColor = BG[resolved];
+  const setMeta = (name: string, content: string): void => {
+    document.querySelector(`meta[name="${name}"]`)?.setAttribute('content', content);
+  };
+  setMeta('color-scheme', resolved);
+  setMeta('theme-color', BG[resolved]);
+}
+
+watch(
+  resolvedTheme,
+  (r) => {
+    applyTheme(r);
+    try {
+      localStorage.setItem(STORAGE_KEY, themeMode.value);
+    } catch {
+      /* quota / mode privé */
+    }
+  },
+  { immediate: true },
+);
+
+export function setThemeMode(mode: ThemeMode): void {
+  themeMode.value = mode;
+}
+
+/** Cycle dark -> light -> system (pour un bouton unique). */
+export function cycleTheme(): void {
+  const order: ThemeMode[] = ['dark', 'light', 'system'];
+  const next = order[(order.indexOf(themeMode.value) + 1) % order.length];
+  if (next) themeMode.value = next;
+}

packages/site/src/main.ts

@@ -1,11 +1,11 @@
 import { createApp } from 'vue';
-// Polices self-host (subset latin) : bundlées par Vite, aucune requête Google Fonts.
+// Polices auto-hébergées (fontes variables), bundlées par Vite, aucune requête Google Fonts.
-import '@fontsource/jetbrains-mono/latin-400.css';
+import '@fontsource-variable/inter';
-import '@fontsource/jetbrains-mono/latin-500.css';
+import '@fontsource-variable/jetbrains-mono';
-import '@fontsource/jetbrains-mono/latin-600.css';
-import '@fontsource/jetbrains-mono/latin-700.css';
 import App from './App.vue';
 import { i18n } from './i18n';
+// Effet de bord : active le watcher d'application du thème clair/sombre.
+import './lib/theme';
 import { reveal } from './composables/useScrollReveal';
 import './style.css';
 

packages/site/src/style.css

@@ -1,15 +1,41 @@
 @import 'tailwindcss';
 
-/* La palette du design correspond à zinc/emerald/amber/sky/red de Tailwind.
+/* ============================================================
-   On ajoute seulement les tokens hors échelle : ombres, police mono, animations. */
+   Tokens de design « Emerald » : alignés sur packages/web/src/style.css.
+   Défauts SOMBRES dans @theme ; thème CLAIR via html[data-theme="light"]
+   (les utilitaires référencent les vars, l'override cascade sans duplication).
+   ============================================================ */
 @theme {
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  /* Surfaces / bordures / texte / accent / tons sémantiques (défauts sombres). */
+  --color-surface-0: #09090b;
+  --color-surface-1: #18181b;
+  --color-surface-2: #27272a;
+  --color-surface-3: #3f3f46;
+  --color-border: #27272a;
+  --color-border-strong: #3f3f46;
+  --color-border-soft: #1c1c1f;
+  --color-fg: #f4f4f5;
+  --color-fg-muted: #a1a1aa;
+  --color-fg-subtle: #52525b;
+  --color-accent: #34d399;
+  --color-accent-solid: #059669;
+  --color-accent-hover: #10b981;
+  --color-coffee: #f59e0b;
+  --color-info: #7dd3fc;
+  --color-warn: #fcd34d;
+  --color-danger: #f87171;
 
+  /* Polices auto-hébergées (fontes variables). */
+  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'Fira Code', Menlo, Consolas, monospace;
+
+  /* Ombres (site) + shadow-pop Emerald. */
   --shadow-hero: 0 30px 80px -30px rgb(0 0 0 / 0.85);
   --shadow-card: 0 24px 60px -30px rgb(0 0 0 / 0.8);
   --shadow-phone: 0 30px 70px -28px rgb(0 0 0 / 0.9);
   --shadow-toast: 0 12px 32px -12px rgb(0 0 0 / 0.7);
   --shadow-toast-sm: 0 10px 24px -12px rgb(0 0 0 / 0.6);
+  --shadow-pop: 0 24px 48px -20px rgb(0 0 0 / 0.65);
 
   --animate-blink: blink 1.05s steps(1) infinite;
   --animate-pulse-sky: pulseSky 2s ease-in-out infinite;
@@ -18,26 +44,46 @@
   --animate-dlg-in: dlgIn 0.35s ease both;
 }
 
-/* JetBrains Mono (Open Font License) : @font-face fournis par @fontsource,
+html[data-theme='light'] {
-   importés dans main.ts et bundlés par Vite (self-host, pas de CDN Google). */
+  --color-surface-0: #fafafa;
+  --color-surface-1: #ffffff;
+  --color-surface-2: #f4f4f5;
+  --color-surface-3: #e4e4e7;
+  --color-border: #e4e4e7;
+  --color-border-strong: #d4d4d8;
+  --color-border-soft: #ececee;
+  --color-fg: #18181b;
+  --color-fg-muted: #52525b;
+  --color-fg-subtle: #a1a1aa;
+  --color-accent: #059669;
+  --color-accent-solid: #059669;
+  --color-accent-hover: #047857;
+  --color-coffee: #d97706;
+  --color-info: #0284c7;
+  --color-warn: #d97706;
+  --color-danger: #dc2626;
+  /* Ombres plus douces en clair. */
+  --shadow-hero: 0 30px 80px -30px rgb(24 24 27 / 0.18);
+  --shadow-card: 0 24px 60px -30px rgb(24 24 27 / 0.16);
+  --shadow-phone: 0 30px 70px -28px rgb(24 24 27 / 0.2);
+  --shadow-toast: 0 12px 32px -12px rgb(24 24 27 / 0.14);
+  --shadow-toast-sm: 0 10px 24px -12px rgb(24 24 27 / 0.12);
+  --shadow-pop: 0 18px 38px -22px rgb(24 24 27 / 0.22);
+}
 
 html {
   scroll-behavior: smooth;
 }
 body {
   margin: 0;
-  background-color: #09090b;
+  background-color: var(--color-surface-0);
-  color: #f4f4f5;
+  color: var(--color-fg);
-  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-family: var(--font-sans);
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
-::selection {
-  background: rgba(16, 185, 129, 0.3);
-  color: #fff;
-}
 
 @keyframes blink {
   0%,
@@ -89,14 +135,39 @@ body {
 }
 
 @layer base {
-  /* Tailwind v4 ne met plus cursor:pointer sur les boutons → on le rétablit. */
+  /* Tailwind v4 ne met plus cursor:pointer sur les boutons : on le rétablit. */
   button:not(:disabled),
   [role='button']:not([aria-disabled='true']) {
     cursor: pointer;
   }
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background: var(--color-accent);
+    color: var(--color-surface-0);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-surface-3) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-surface-3);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border-strong);
+  }
 }
 
-/* Révélation au scroll (directive v-reveal) */
+/* Révélation au scroll (directive v-reveal). */
 .reveal {
   opacity: 0;
   transform: translateY(22px);
@@ -118,3 +189,89 @@ body {
     transform: none;
   }
 }
+
+@layer components {
+  /* Pastille (pill mono) + point pulsé. */
+  .badge {
+    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 font-mono text-[11px];
+  }
+  .chip {
+    @apply inline-flex items-center rounded-full border border-border bg-surface-0 px-[9px] py-1 font-mono text-[11px] text-fg-muted;
+  }
+  .status {
+    @apply inline-flex items-center gap-1.5 font-mono text-[11px] tracking-[0.05em] text-fg-muted uppercase;
+  }
+  .status-dot {
+    @apply inline-block h-[7px] w-[7px] rounded-full;
+  }
+  .eyebrow {
+    @apply font-mono text-[13px] text-accent;
+  }
+  .label-mono {
+    @apply font-mono text-[11px] tracking-[0.08em] text-fg-subtle uppercase;
+  }
+  /* Caret clignotant des mockups terminaux (réutilise le keyframe `blink` du site). */
+  .caret {
+    @apply ml-0.5 inline-block h-[15px] w-2 bg-accent align-[-2px];
+    animation: blink 1.05s steps(1) infinite;
+  }
+  .card {
+    @apply rounded-[14px] border border-border bg-surface-1/50 p-3;
+  }
+  .card-hover {
+    @apply transition-[transform,border-color,box-shadow] hover:-translate-y-1 hover:border-accent hover:shadow-pop;
+  }
+  .card-inset {
+    @apply rounded-[10px] border border-border bg-surface-0/40 p-2;
+  }
+  /* Boutons Emerald (pour réutilisation dans les mockups). */
+  .btn {
+    @apply inline-flex items-center justify-center gap-[9px] rounded-[11px] border border-border bg-surface-2 px-3 py-1.5 text-sm font-semibold text-fg transition-[background-color,border-color,color,transform] hover:border-accent hover:text-accent;
+  }
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-[9px] rounded-[11px] border border-accent-solid bg-accent-solid px-3 py-1.5 text-sm font-semibold text-white transition-[background-color,border-color,color,transform] hover:-translate-y-px hover:bg-accent-hover;
+  }
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-[9px] rounded-[11px] px-3 py-1.5 text-sm font-semibold text-fg-muted transition-[background-color,color] hover:bg-surface-2/60 hover:text-fg;
+  }
+  /* Calques décoratifs (halo accent + grain). */
+  .halo {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    width: 1100px;
+    max-width: 140%;
+    height: 560px;
+    transform: translateX(-50%);
+    background: radial-gradient(50% 60% at 50% 0%, var(--color-accent) 0%, transparent 70%);
+    opacity: 0.12;
+    filter: blur(18px);
+    pointer-events: none;
+    z-index: 0;
+  }
+  .grain {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(var(--color-fg) 1px, transparent 1px);
+    background-size: 34px 34px;
+    opacity: 0.025;
+    pointer-events: none;
+    z-index: 0;
+    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
+    mask-image: linear-gradient(to bottom, #000, transparent 70%);
+  }
+  /* Lignes de diff : fond teinté sémantique, texte neutre lisible (clair + sombre). */
+  .diff-add {
+    @apply bg-accent/12 text-fg;
+  }
+  .diff-del {
+    @apply bg-danger/12 text-fg;
+  }
+  .diff-ctx {
+    @apply text-fg-muted;
+  }
+}
+
+html[data-theme='light'] .halo {
+  opacity: 0.06;
+}