release: @johanleroy/git-arboretum 1.6.1

Le centre d'aide décrivait encore le modèle P5 (une session par repo) ;
l'entrée « cross-repo » dit désormais qu'un groupe lance UNE seule session
Claude couvrant tous ses repos (contexte partagé) et s'ouvre sur son terminal.
Inclut aussi un ajustement de copie de la FAQ du site.

README.fr.md

@@ -10,7 +10,7 @@
   <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, les états de session en temps réel, le terminal web, la supervision mobile (PWA installable, Web Push quand une session vous attend, valider/refuser sans ouvrir de terminal) et les groupes de travail (piloter plusieurs repos liés à la fois) sont implémentés et testés.
+**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.
 
 ---
 
@@ -30,8 +30,8 @@ Un unique daemon Node.js que vous lancez sur votre machine de dev (`npx @johanle
 - **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.
 - **Terminal web** — terminal xterm.js complet vers chaque session managée, qui survit aux déconnexions du navigateur.
-- **Supervision depuis votre téléphone** — PWA installable avec notifications push quand une session vous attend ; validez ou refusez une demande sans ouvrir de terminal.
-- **Groupes de travail** — regroupez des repos liés (ex. une API, son frontend web et une lib partagée) dans un groupe nommé pour travailler sur tous à la fois : une vue unifiée de leurs worktrees et sessions, une grille multi-terminaux côte à côte, et une action « feature cross-repo » en un clic qui crée le même worktree de branche (et au besoin une session Claude) dans chaque repo du groupe.
+- **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.
 
 ---
 
@@ -100,9 +100,9 @@ node packages/server/dist/index.js
 
 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.
 2. **Créez ou adoptez des worktrees.** Créez un nouveau worktree + branche en un clic (les hooks s'exécutent pour vous), ou adoptez un worktree créé à la main. Chaque worktree affiche sa branche, son ahead/behind et son nombre de fichiers modifiés.
-3. **Démarrez ou reprenez une session.** Lancez une session Claude Code sur un worktree, ou reprenez-en une démarrée dans votre terminal — Arboretum découvre les sessions existantes automatiquement et les reprend toujours dans leur répertoire de travail d'origine.
+3. **Démarrez ou reprenez une session.** Lancez une session Claude Code sur la branche principale du repo ou n'importe quel worktree, ou reprenez-en une démarrée dans votre terminal — Arboretum découvre les sessions existantes automatiquement et les reprend toujours dans leur répertoire de travail d'origine.
 4. **Suivez les états en direct.** Chaque session indique si elle est *busy*, *en attente de votre entrée* ou *idle*. Ouvrez le **terminal web** pour interagir directement ; il survit aux déconnexions du navigateur (fermer l'onglet ne tue pas la session).
-5. **Supervisez depuis votre téléphone.** Installez la PWA, et quand une session bascule en *attente*, vous recevez une notification push. Validez ou refusez la demande directement depuis l'interface de notification — sans terminal.
+5. **Supervisez depuis votre téléphone.** Installez la PWA, et quand une session bascule en *attente*, vous recevez une notification push. Répondez à la demande — choisissez l'une de ses options ou refusez-la — directement depuis le dashboard, sans terminal.
 
 ## Accès distant depuis votre téléphone
 

README.md

@@ -10,7 +10,7 @@
   <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, live session states, the web terminal, and mobile supervision (installable PWA, Web Push when a session needs you, approve/deny without opening a terminal), and work groups (run several related repos at once) are implemented and tested.
+**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.
 
 ---
 
@@ -30,8 +30,8 @@ A single Node.js daemon you run on your dev machine (`npx @johanleroy/git-arbore
 - **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.
 - **Web terminal** — full xterm.js terminal to every managed session, surviving browser disconnects.
-- **Supervision from your phone** — installable PWA with push notifications when a session needs you; approve/deny a prompt without opening a terminal.
-- **Work groups** — bundle related repos (e.g. an API, its web frontend and a shared library) into a named group to work on them at once: a unified view of all their worktrees and sessions, a side-by-side multi-terminal grid, and a one-click "cross-repo feature" that creates the same branch worktree (and optionally a Claude session) across every repo in the group.
+- **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.
 
 ---
 
@@ -100,9 +100,9 @@ node packages/server/dist/index.js
 
 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.
 2. **Create or adopt worktrees.** Spin up a new worktree + branch in one click (hooks run for you), or adopt a worktree you created by hand. Each worktree shows its branch, ahead/behind, and dirty-file count.
-3. **Start or resume a session.** Launch a Claude Code session on a worktree, or resume one that was started in your terminal — Arboretum discovers existing sessions automatically and always resumes them in their original working directory.
+3. **Start or resume a session.** Launch a Claude Code session on the repo's main branch or any worktree, or resume one that was started in your terminal — Arboretum discovers existing sessions automatically and always resumes them in their original working directory.
 4. **Watch the live states.** Each session reports whether it's *busy*, *waiting for your input*, or *idle*. Open the **web terminal** to interact directly; it survives browser disconnects (closing the tab does not kill the session).
-5. **Supervise from your phone.** Install the PWA, and when a session flips to *waiting* you get a push notification. Approve or deny the prompt straight from the notification UI — no terminal required.
+5. **Supervise from your phone.** Install the PWA, and when a session flips to *waiting* you get a push notification. Answer the prompt — pick one of its options or deny it — straight from the dashboard, no terminal required.
 
 ## Remote access from your phone
 

package-lock.json

@@ -4854,7 +4854,7 @@
     },
     "packages/server": {
       "name": "@johanleroy/git-arboretum",
-      "version": "1.5.0",
+      "version": "1.6.0",
       "license": "MIT",
       "dependencies": {
         "@fastify/cookie": "^11.0.0",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johanleroy/git-arboretum",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Self-hosted web dashboard for git worktrees and the Claude Code sessions running on them",
   "license": "MIT",
   "type": "module",

packages/server/scripts/acceptance-p2.mjs

@@ -144,6 +144,37 @@ try {
   const out = c.state.outputs.get(att?.channel) ?? '';
   check('resume lance `--resume sid-dead` dans le bon cwd', out.includes('args=[--resume sid-dead]') && out.includes(`cwd=${workDir}`), out.replace(/\s+/g, ' ').slice(0, 120));
 
+  // --- Régression « Reprendre » : reprise d'une session MANAGÉE morte par son UUID Arboretum ---
+  // (le bouton web envoie l'UUID managé, pas le claudeSessionId ; le serveur doit le résoudre en DB).
+  const createManaged = await fetch(`${ORIGIN}/api/v1/sessions`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Origin: ORIGIN, Cookie: cookie },
+    body: JSON.stringify({ cwd: workDir, command: 'claude' }),
+  });
+  const managed = (await createManaged.json()).session;
+  check('création session managée claude → 201 (pid)', createManaged.status === 201 && managed?.pid > 0);
+
+  // Simule la capture du claudeSessionId : entrée registre pour le pid du PTY managé (pollée toutes les 400ms).
+  writeFileSync(
+    join(sessions, `${managed.pid}.json`),
+    JSON.stringify({ pid: managed.pid, sessionId: 'sid-managed', cwd: workDir, status: 'idle' }),
+  );
+  const captured = await c.waitMsg(
+    (m) => m.type === 'session_update' && m.session?.id === managed.id && m.session?.claudeSessionId === 'sid-managed',
+  );
+  check('claudeSessionId capturé depuis le registre (session managée)', !!captured);
+
+  // Fermeture (kill) puis reprise par UUID managé → 201 dans le cwd d'origine (avant le fix : 404).
+  const killManaged = await fetch(`${ORIGIN}/api/v1/sessions/${managed.id}`, { method: 'DELETE', headers: { Origin: ORIGIN, Cookie: cookie } });
+  check('kill session managée → 200', killManaged.status === 200);
+  await sleep(400); // laisse handleExit persister ended_at
+  const resumeManaged = await postJson(`/api/v1/sessions/${managed.id}/resume`, cookie);
+  const resumedManaged = (await resumeManaged.json()).session;
+  check(
+    'resume d’une session MANAGÉE morte par UUID → 201',
+    resumeManaged.status === 201 && resumedManaged?.command === 'claude' && resumedManaged?.source === 'managed' && resumedManaged?.cwd === workDir,
+  );
+
   // Broadcast : une nouvelle session découverte est poussée via session_update au rafraîchissement périodique.
   writeJsonl(workDir, 'sid-new');
   const pushed = await c.waitMsg((m) => m.type === 'session_update' && m.session?.id === 'sid-new', 13000);

packages/server/scripts/acceptance-p3.mjs

@@ -3,7 +3,7 @@
 // Vrai daemon + vrai repo git tmp. Couvre : enregistrement repo, création worktree avec hook
 // post-create, broadcast WS worktree_update, corrélation worktree↔session (bash), suppression.
 import { spawn, execFileSync } from 'node:child_process';
-import { mkdtempSync, rmSync, existsSync } from 'node:fs';
+import { mkdtempSync, rmSync, existsSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join, dirname, basename } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -119,6 +119,24 @@ try {
   const feat = wlist1.worktrees.find((w) => w.branch === 'feat');
   check('corrélation worktree ↔ session (cwd)', feat?.sessions?.some((s) => s.command === 'bash' && s.live));
 
+  // Session sur le checkout principal (« bosser sur la branche principale ») avec création de branche.
+  const mainSess = await j(`/api/v1/repos/${repoSummary.id}/session`, 'POST', cookie, { command: 'bash', branch: 'mainfeat', newBranch: true });
+  const mainBody = await mainSess.json();
+  check('POST repo session → 201 (bash)', mainSess.status === 201 && mainBody.session?.command === 'bash');
+  check('session de branche principale : cwd = checkout principal', mainBody.session?.cwd === repoSummary.path);
+  const mainPush = await c.waitMsg((m) => m.type === 'worktree_update' && m.worktree?.isMain && m.worktree?.branch === 'mainfeat');
+  check('broadcast worktree_update (branche principale basculée)', !!mainPush);
+  await sleep(300);
+  const wlistM = await (await j('/api/v1/worktrees', 'GET', cookie)).json();
+  const mainWt = wlistM.worktrees.find((w) => w.isMain);
+  check('session corrélée au checkout principal', mainWt?.branch === 'mainfeat' && mainWt.sessions.some((s) => s.id === mainBody.session.id));
+
+  // Refus 409 quand le checkout principal est sale.
+  writeFileSync(join(repo, 'scratch.txt'), 'wip\n');
+  const dirtyRefused = await j(`/api/v1/repos/${repoSummary.id}/session`, 'POST', cookie, { command: 'bash', branch: 'other', newBranch: true });
+  check('repo session sur checkout sale → 409', dirtyRefused.status === 409);
+  rmSync(join(repo, 'scratch.txt'), { force: true });
+
   // Suppression forcée (une session vit dans le worktree).
   const refused = await j(`/api/v1/repos/${repoSummary.id}/worktrees?path=${encodeURIComponent(wtPath)}&force=false`, 'DELETE', cookie);
   check('delete sans force (session live) → 409', refused.status === 409);

packages/server/scripts/acceptance-p5.mjs

@@ -127,9 +127,11 @@ try {
   const gsession = gsBody.session;
   check('POST /groups/:id/session → 201', gsRes.status === 201 && !!gsession);
   check('session de groupe : 2 répertoires couverts', Array.isArray(gsBody.dirs) && gsBody.dirs.length === 2);
-  check('session de groupe : addedDirs (1 dir supplémentaire)', (gsession?.addedDirs?.length ?? 0) === 1);
+  // cwd = parent commun des repos (P6), chaque repo relié en --add-dir → 2 addedDirs.
+  check('session de groupe : cwd = parent commun des repos', gsession?.cwd === tmp);
+  check('session de groupe : addedDirs = les 2 repos', (gsession?.addedDirs?.length ?? 0) === 2);
   check('session de groupe : groupId posé', gsession?.groupId === group.id);
-  check('session de groupe : cwd primaire + addedDir = 2 repos', new Set([gsession?.cwd, ...(gsession?.addedDirs ?? [])]).size === 2);
+  check('session de groupe : cwd parent + 2 repos addedDirs = 3 chemins distincts', new Set([gsession?.cwd, ...(gsession?.addedDirs ?? [])]).size === 3);
 
   // La session apparaît dans la liste globale avec son groupId.
   const sessList = await (await j('/api/v1/sessions', 'GET', cookie)).json();

packages/server/src/core/git.ts

@@ -190,6 +190,16 @@ export async function addWorktree(
   await git(repoPath, args);
 }
 
+/**
+ * Crée/bascule une branche dans le checkout (worktree) en `repoPath` — utilisé pour démarrer une
+ * session sur la branche principale sans worktree dédié. `create` → `git switch -c <branch>` (échoue
+ * si la branche existe) ; sinon `git switch <branch>` (branche existante). Pas de `--` : l'argument
+ * est une réf (pas un pathspec) et le nom est déjà filtré en amont par `isValidBranchName` (anti-flag).
+ */
+export async function switchBranch(repoPath: string, opts: { branch: string; create: boolean }): Promise<void> {
+  await git(repoPath, opts.create ? ['switch', '-c', opts.branch] : ['switch', opts.branch]);
+}
+
 export async function removeWorktree(repoPath: string, worktreePath: string, force: boolean): Promise<void> {
   await git(repoPath, ['worktree', 'remove', ...(force ? ['--force'] : []), '--', worktreePath]);
 }

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

@@ -0,0 +1,37 @@
+import { parse, resolve, sep } from 'node:path';
+
+/**
+ * Plus long ancêtre commun d'un ensemble de chemins absolus (par segments, jamais par préfixe
+ * de chaîne — `/a/bc` n'est PAS un ancêtre de `/a/bcd`). Pour un seul chemin, renvoie ce chemin.
+ */
+export function commonAncestorDir(paths: string[]): string {
+  const first = paths[0];
+  if (first === undefined) throw new Error('commonAncestorDir: empty input');
+  const firstSegs = resolve(first).split(sep);
+  let common = firstSegs.length;
+  for (let i = 1; i < paths.length; i++) {
+    const segs = resolve(paths[i]!).split(sep);
+    let k = 0;
+    while (k < common && k < segs.length && segs[k] === firstSegs[k]) k++;
+    common = k;
+  }
+  const joined = firstSegs.slice(0, common).join(sep);
+  // `['', 'a', 'b'].slice(0,1).join('/')` === '' → racine POSIX ; rétablir le séparateur racine.
+  return joined === '' ? parse(resolve(first)).root : joined;
+}
+
+/**
+ * Politique de répertoire de travail d'une session de groupe (P6) : le `cwd` est le PARENT COMMUN
+ * des répertoires couverts (racine neutre, chemins relatifs cross-repo naturels), chaque répertoire
+ * étant ensuite relié via `--add-dir` (le dédoublonnage + filtrage du cwd est fait par `PtyManager`).
+ * Garde-fou : si le parent commun est la racine du FS (repos éparpillés sur des racines différentes),
+ * on retombe sur le premier répertoire pour ne pas accorder à Claude la permission sur tout le disque.
+ */
+export function resolveGroupCwd(dirs: string[]): { cwd: string; addDirs: string[] } {
+  const first = dirs[0];
+  if (first === undefined) throw new Error('resolveGroupCwd: empty input');
+  const ancestor = commonAncestorDir(dirs);
+  const root = parse(resolve(first)).root;
+  const cwd = ancestor === root ? first : ancestor;
+  return { cwd, addDirs: dirs };
+}

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

@@ -201,6 +201,24 @@ export class PtyManager extends EventEmitter<PtyManagerEvents> {
     return { addedDirs: parseAddedDirs(row.added_dirs), groupId: row.group_id };
   }
 
+  /**
+   * Cible de reprise d'une session managée MORTE (P2/P6), résolue par UUID Arboretum : son cwd
+   * d'origine, son claudeSessionId et son contexte de groupe, lus en DB. null si l'id ne correspond
+   * pas à une session managée morte, reprenable (claude + claudeSessionId connu).
+   * Complète `DiscoveryService.getDiscovered`, qui ne couvre QUE les sessions claude EXTERNES
+   * (une managée connue est justement exclue de la découverte).
+   */
+  resumeTargetById(id: string): { cwd: string; claudeSessionId: string; addedDirs: string[]; groupId: string | null } | null {
+    if (this.live.has(id)) return null; // vivante : pas de resume direct (fork via le même chemin)
+    const row = this.db
+      .prepare(
+        "SELECT cwd, claude_session_id, added_dirs, group_id FROM sessions WHERE id = ? AND ended_at IS NOT NULL AND claude_session_id IS NOT NULL AND command = 'claude'",
+      )
+      .get(id) as { cwd: string; claude_session_id: string; added_dirs: string | null; group_id: string | null } | undefined;
+    if (!row) return null;
+    return { cwd: row.cwd, claudeSessionId: row.claude_session_id, addedDirs: parseAddedDirs(row.added_dirs), groupId: row.group_id };
+  }
+
   /** Session managée VIVANTE portant ce claudeSessionId (garde-fou anti-resume d'une session vivante). */
   findLiveByClaudeSessionId(claudeSessionId: string): SessionSummary | null {
     for (const s of this.live.values()) {

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

@@ -30,6 +30,7 @@ import {
   listWorktrees,
   pruneWorktrees,
   removeWorktree,
+  switchBranch,
   worktreeStatus,
   type ParsedWorktree,
 } from './git.js';
@@ -355,6 +356,41 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
     });
   }
 
+  /**
+   * Lance UNE session dans le checkout principal du repo (`repo.path`) — pour « bosser sur la branche
+   * principale » sans créer de worktree. Si `branch` est fourni, crée/bascule d'abord cette branche
+   * dans ce checkout (`git switch[-c]`), refusé si l'arbre est sale (on n'écrase pas un HEAD modifié).
+   * Volontairement SANS hooks ni pré-trust (contraste avec createWorktree) : le checkout principal
+   * est le dépôt réel de l'utilisateur, déjà configuré/approuvé. Sérialisé par repo (withLock).
+   */
+  async startMainSession(
+    repoId: string,
+    req: { command?: 'claude' | 'bash'; branch?: string; newBranch?: boolean },
+  ): Promise<{ session: SessionSummary; worktree: WorktreeSummary | null }> {
+    const row = this.getRepoRow(repoId);
+    if (!row) throw httpError(404, 'NOT_FOUND', 'No repo with this id');
+    const branch = req.branch?.trim() || undefined;
+    if (branch !== undefined && !isValidBranchName(branch)) throw httpError(400, 'BAD_BRANCH', `Invalid branch name: ${branch}`);
+
+    return this.withLock(repoId, async () => {
+      if (branch !== undefined) {
+        // garde-fou : ne pas basculer le HEAD du checkout principal s'il a des changements non sauvegardés.
+        if ((await worktreeStatus(row.path)).dirtyCount > 0) {
+          throw httpError(409, 'DIRTY_TREE', 'Main checkout has uncommitted changes — commit or stash before switching branch');
+        }
+        try {
+          await switchBranch(row.path, { branch, create: req.newBranch ?? true });
+        } catch (err) {
+          throw httpError(400, 'SWITCH_FAILED', (err as Error).message);
+        }
+        this.factsCache.delete(repoId);
+      }
+      const session = this.ptyManager.spawn({ cwd: row.path, command: req.command ?? 'claude' });
+      const worktree = await this.emitWorktree(row, row.path);
+      return { session, worktree };
+    });
+  }
+
   async adoptWorktree(repoId: string, req: { path: string; runHooks?: boolean; preTrust?: boolean }): Promise<{ worktree: WorktreeSummary; hookResults: HookRunResult[] }> {
     const row = this.getRepoRow(repoId);
     if (!row) throw httpError(404, 'NOT_FOUND', 'No repo with this id');

packages/server/src/routes/groups.ts

@@ -13,6 +13,7 @@ import type { WorktreeManager } from '../core/worktree-manager.js';
 import type { PtyManager } from '../core/pty-manager.js';
 import type { Db } from '../db/index.js';
 import { recordAudit } from '../core/audit-log.js';
+import { resolveGroupCwd } from '../core/group-session.js';
 import { sendManagerError } from './repos.js';
 
 export function registerGroupRoutes(
@@ -137,13 +138,14 @@ export function registerGroupRoutes(
       if (!dirs.includes(match.path)) dirs.push(match.path);
     }
 
-    const [primary, ...rest] = dirs;
-    if (primary === undefined) {
+    if (dirs.length === 0) {
       return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'no directory to span (group has no resolvable worktree)' } });
     }
+    // cwd = parent commun des repos couverts, chacun relié en --add-dir (P6). Voir resolveGroupCwd.
+    const { cwd, addDirs } = resolveGroupCwd(dirs);
 
     try {
-      const session = manager.spawn({ cwd: primary, addDirs: rest, command, groupId: id });
+      const session = manager.spawn({ cwd, addDirs, command, groupId: id });
       recordAudit(db, {
         actor: req.authContext?.tokenId ?? 'unknown',
         action: 'group.session.create',

packages/server/src/routes/sessions.ts

@@ -26,24 +26,29 @@ export function registerSessionRoutes(app: FastifyInstance, manager: PtyManager,
     }
   });
 
-  // Reprise d'une session morte : nouveau PTY managé `--resume <id>` DANS SON CWD D'ORIGINE (spike S1).
-  // Le cwd n'est jamais fourni par le client : il est lu sur disque via la découverte.
+  // Reprise d'une session morte : nouveau PTY managé `--resume <claudeSessionId>` DANS SON CWD D'ORIGINE
+  // (spike S1). Le cwd n'est JAMAIS fourni par le client. Deux origines d'id possibles :
+  //  - session managée morte (id = UUID Arboretum) → cwd + claudeSessionId + groupe lus en DB ;
+  //  - session claude EXTERNE découverte (id = claudeSessionId) → cwd lu sur disque.
   app.post('/api/v1/sessions/:id/resume', async (req, reply) => {
     const { id } = req.params as { id: string };
-    const discovered = discovery.getDiscovered(id);
-    if (!discovered) {
+    const managed = manager.resumeTargetById(id);
+    const discovered = managed ? null : discovery.getDiscovered(id);
+    if (!managed && !discovered) {
       return reply.status(404).send({ error: { code: 'NOT_FOUND', message: 'No resumable session with this id' } });
     }
+    const cwd = managed ? managed.cwd : discovered!.cwd;
+    const claudeSessionId = managed ? managed.claudeSessionId : id;
     // Garde-fou anti-corruption : jamais de resume direct d'une session vivante (vérif FRAÎCHE).
-    if (discovery.isClaudeSessionLive(id) || manager.findLiveByClaudeSessionId(id)) {
+    if (discovery.isClaudeSessionLive(claudeSessionId) || manager.findLiveByClaudeSessionId(claudeSessionId)) {
       return reply.status(409).send({ error: { code: 'SESSION_LIVE', message: 'Session is live — fork it instead' } });
     }
     try {
       // Session de groupe (P6) : re-relie les mêmes répertoires (--add-dir) et son groupe au resume.
-      const ctx = manager.groupSessionContext(id);
+      const ctx = managed ? { addedDirs: managed.addedDirs, groupId: managed.groupId } : manager.groupSessionContext(claudeSessionId);
       const session = manager.spawn({
-        cwd: discovered.cwd,
-        resume: { claudeSessionId: id },
+        cwd,
+        resume: { claudeSessionId },
         ...(ctx?.addedDirs.length ? { addDirs: ctx.addedDirs } : {}),
         ...(ctx?.groupId ? { groupId: ctx.groupId } : {}),
       });
@@ -56,14 +61,18 @@ export function registerSessionRoutes(app: FastifyInstance, manager: PtyManager,
   });
 
   // Fork : duplique une session (vivante ou morte) sans la corrompre (`--resume <id> --fork-session`).
+  // Même résolution d'id que /resume (managée morte par UUID, sinon externe découverte par claudeSessionId).
   app.post('/api/v1/sessions/:id/fork', async (req, reply) => {
     const { id } = req.params as { id: string };
-    const discovered = discovery.getDiscovered(id);
-    if (!discovered) {
+    const managed = manager.resumeTargetById(id);
+    const discovered = managed ? null : discovery.getDiscovered(id);
+    if (!managed && !discovered) {
       return reply.status(404).send({ error: { code: 'NOT_FOUND', message: 'No session with this id to fork' } });
     }
+    const cwd = managed ? managed.cwd : discovered!.cwd;
+    const claudeSessionId = managed ? managed.claudeSessionId : id;
     try {
-      const session = manager.spawn({ cwd: discovered.cwd, resume: { claudeSessionId: id, fork: true } });
+      const session = manager.spawn({ cwd, resume: { claudeSessionId, fork: true } });
       const res: SessionResponse = { session };
       return reply.status(201).send(res);
     } catch (err) {

packages/server/src/routes/worktrees.ts

@@ -3,6 +3,8 @@ import type {
   AdoptWorktreeRequest,
   CreateWorktreeRequest,
   CreateWorktreeResponse,
+  SessionResponse,
+  StartRepoSessionRequest,
   WorktreeResponse,
   WorktreesListResponse,
 } from '@arboretum/shared';
@@ -43,6 +45,33 @@ export function registerWorktreeRoutes(app: FastifyInstance, wt: WorktreeManager
     }
   });
 
+  // Session sur le checkout principal (« bosser sur la branche principale » sans worktree),
+  // avec création/bascule de branche optionnelle côté serveur.
+  app.post('/api/v1/repos/:id/session', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const body = (req.body as Partial<StartRepoSessionRequest> | null) ?? {};
+    if (body.command != null && body.command !== 'claude' && body.command !== 'bash') {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'command must be claude or bash' } });
+    }
+    if (body.branch != null && typeof body.branch !== 'string') {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'branch must be a string' } });
+    }
+    if (body.newBranch != null && typeof body.newBranch !== 'boolean') {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'newBranch must be a boolean' } });
+    }
+    try {
+      const out = await wt.startMainSession(id, {
+        ...(body.command !== undefined ? { command: body.command } : {}),
+        ...(body.branch !== undefined ? { branch: body.branch } : {}),
+        ...(body.newBranch !== undefined ? { newBranch: body.newBranch } : {}),
+      });
+      const res: SessionResponse = { session: out.session };
+      return reply.status(201).send(res);
+    } catch (err) {
+      return sendManagerError(reply, err);
+    }
+  });
+
   app.post('/api/v1/repos/:id/worktrees/adopt', async (req, reply) => {
     const { id } = req.params as { id: string };
     const body = req.body as Partial<AdoptWorktreeRequest> | null;

packages/server/test/git.test.ts

@@ -13,6 +13,7 @@ import {
   addWorktree,
   removeWorktree,
   pruneWorktrees,
+  switchBranch,
   isDirtyWorktreeError,
 } from '../src/core/git.js';
 
@@ -118,6 +119,20 @@ describe('opérations git (repo tmp réel)', () => {
     expect((await listWorktrees(repo)).some((w) => resolve(w.path) === resolve(wtPath))).toBe(false);
   });
 
+  it('switchBranch : create=true crée une branche, create=false bascule sur une existante', async () => {
+    const repo = makeTmpRepo();
+    const cur = (): string => execFileSync('git', ['branch', '--show-current'], { cwd: repo }).toString().trim();
+
+    await switchBranch(repo, { branch: 'feature/new', create: true });
+    expect(cur()).toBe('feature/new');
+
+    await switchBranch(repo, { branch: 'main', create: false });
+    expect(cur()).toBe('main');
+
+    // créer une branche déjà existante échoue (git refuse).
+    await expect(switchBranch(repo, { branch: 'feature/new', create: true })).rejects.toBeDefined();
+  });
+
   it('prune retire un worktree dont le dossier a disparu', async () => {
     const repo = makeTmpRepo();
     const wtPath = join(dirname(repo), `${basename(repo)}-wt-gone`);

packages/server/test/group-cwd.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { commonAncestorDir, resolveGroupCwd } from '../src/core/group-session.js';
+
+describe('commonAncestorDir', () => {
+  it('renvoie le chemin lui-même pour un seul répertoire', () => {
+    expect(commonAncestorDir(['/home/johan/WebstormProjects/arboretum'])).toBe('/home/johan/WebstormProjects/arboretum');
+  });
+
+  it('renvoie le parent commun de deux siblings', () => {
+    expect(commonAncestorDir(['/p/a', '/p/b'])).toBe('/p');
+  });
+
+  it('gère un répertoire ancêtre d’un autre', () => {
+    expect(commonAncestorDir(['/p/a', '/p/a/b'])).toBe('/p/a');
+  });
+
+  it('compare par segments, pas par préfixe de chaîne', () => {
+    // /a/bc n'est PAS un ancêtre de /a/bcd : ancêtre commun = /a
+    expect(commonAncestorDir(['/a/bc', '/a/bcd'])).toBe('/a');
+  });
+
+  it('renvoie la racine quand aucun segment n’est commun', () => {
+    expect(commonAncestorDir(['/x/a', '/y/b'])).toBe('/');
+  });
+});
+
+describe('resolveGroupCwd', () => {
+  it('mono-repo : cwd = le repo, addDirs sera filtré à vide par PtyManager', () => {
+    const { cwd, addDirs } = resolveGroupCwd(['/p/a']);
+    expect(cwd).toBe('/p/a');
+    expect(addDirs).toEqual(['/p/a']);
+  });
+
+  it('multi-repos sous un parent commun : cwd = parent, addDirs = tous les repos', () => {
+    const dirs = ['/home/johan/WebstormProjects/beehelp_lambdas', '/home/johan/WebstormProjects/beehelp_api'];
+    const { cwd, addDirs } = resolveGroupCwd(dirs);
+    expect(cwd).toBe('/home/johan/WebstormProjects');
+    expect(addDirs).toEqual(dirs);
+  });
+
+  it('garde-fou : repos sur des racines différentes → retombe sur le premier répertoire', () => {
+    const { cwd } = resolveGroupCwd(['/x/a', '/y/b']);
+    expect(cwd).toBe('/x/a');
+  });
+});

packages/server/test/pty-manager.test.ts

@@ -187,6 +187,34 @@ describe('PtyManager (pty mocké)', () => {
       expect(listed).toMatchObject({ live: false, resumable: true, claudeSessionId: 'sid-known' });
     });
 
+    it('resumeTargetById : session claude morte → cwd + claudeSessionId + groupe ; null sinon', () => {
+      const d1 = mkdtempSync(join(tmpdir(), 'arb-rt-'));
+      try {
+        const summary = manager.spawn({ cwd, command: 'claude', addDirs: [d1], groupId: 'grpR' });
+        db.prepare('UPDATE sessions SET claude_session_id = ? WHERE id = ?').run('cs-resume', summary.id);
+        // vivante → null (resume direct interdit ; fork passe par le même chemin)
+        expect(manager.resumeTargetById(summary.id)).toBeNull();
+        lastPty().emitExit(0);
+        // morte avec claudeSessionId connu → cible complète
+        expect(manager.resumeTargetById(summary.id)).toEqual({
+          cwd,
+          claudeSessionId: 'cs-resume',
+          addedDirs: [d1],
+          groupId: 'grpR',
+        });
+        // id inconnu → null
+        expect(manager.resumeTargetById('nope')).toBeNull();
+      } finally {
+        rmSync(d1, { recursive: true, force: true });
+      }
+    });
+
+    it('resumeTargetById : session bash morte (sans claudeSessionId) → null', () => {
+      const { summary, pty } = spawnBash();
+      pty.emitExit(0);
+      expect(manager.resumeTargetById(summary.id)).toBeNull();
+    });
+
     it('capture le claudeSessionId via le registre (poll par pid) → findLiveByClaudeSessionId', () => {
       vi.useFakeTimers();
       const sessDir = mkdtempSync(join(tmpdir(), 'arb-sess-'));

packages/server/test/worktree-manager.test.ts

@@ -116,6 +116,46 @@ describe('WorktreeManager', () => {
     await expect(wt.createWorktree(r.id, { branch: '../evil', newBranch: true })).rejects.toMatchObject({ statusCode: 400 });
   });
 
+  it('startMainSession : session dans le checkout principal (branche actuelle, sans mutation git)', async () => {
+    const repo = makeTmpRepo();
+    const r = await wt.addRepo({ path: repo });
+    const out = await wt.startMainSession(r.id, { command: 'bash' });
+    expect(resolve(out.session.cwd)).toBe(resolve(repo));
+    expect(out.session).toMatchObject({ command: 'bash', live: true });
+    // pas de bascule de branche → toujours sur main.
+    expect(execFileSync('git', ['branch', '--show-current'], { cwd: repo }).toString().trim()).toBe('main');
+    const main = (await wt.listRepoWorktrees(r.id, true)).find((w) => w.isMain);
+    expect(main?.sessions.some((s) => s.id === out.session.id)).toBe(true);
+  });
+
+  it('startMainSession : newBranch crée et bascule la branche dans le checkout principal + event', async () => {
+    const repo = makeTmpRepo();
+    const r = await wt.addRepo({ path: repo });
+    const events: Array<{ worktree: WorktreeSummary }> = [];
+    wt.on('worktree_update', (e) => events.push(e));
+    const out = await wt.startMainSession(r.id, { command: 'bash', branch: 'feature/x', newBranch: true });
+    expect(execFileSync('git', ['branch', '--show-current'], { cwd: repo }).toString().trim()).toBe('feature/x');
+    expect(out.worktree?.branch).toBe('feature/x');
+    expect(events.some((e) => e.worktree.isMain && e.worktree.branch === 'feature/x')).toBe(true);
+  });
+
+  it('startMainSession : checkout principal sale → 409 DIRTY_TREE (pas de bascule)', async () => {
+    const repo = makeTmpRepo();
+    const r = await wt.addRepo({ path: repo });
+    writeFileSync(join(repo, 'scratch.txt'), 'wip\n'); // arbre sale
+    await expect(wt.startMainSession(r.id, { command: 'bash', branch: 'feature/y', newBranch: true })).rejects.toMatchObject({
+      statusCode: 409,
+      code: 'DIRTY_TREE',
+    });
+    expect(execFileSync('git', ['branch', '--show-current'], { cwd: repo }).toString().trim()).toBe('main');
+  });
+
+  it('startMainSession : branche invalide → 400', async () => {
+    const repo = makeTmpRepo();
+    const r = await wt.addRepo({ path: repo });
+    await expect(wt.startMainSession(r.id, { command: 'bash', branch: '../evil', newBranch: true })).rejects.toMatchObject({ statusCode: 400 });
+  });
+
   it('deleteWorktree : main refusé (400), dirty refusé (409) puis force OK', async () => {
     const repo = makeTmpRepo();
     const r = await wt.addRepo({ path: repo });

packages/shared/src/api.ts

@@ -128,6 +128,20 @@ export interface AdoptWorktreeRequest {
   preTrust?: boolean;
 }
 
+/**
+ * POST /api/v1/repos/:id/session — lance UNE session dans le checkout principal du repo
+ * (`repo.path`) pour « bosser sur la branche principale » sans créer de worktree.
+ * Réponse : `SessionResponse`.
+ */
+export interface StartRepoSessionRequest {
+  /** binaire à lancer — défaut "claude" ; "bash" sert aux tests sans quota. */
+  command?: 'claude' | 'bash';
+  /** si fourni : crée/bascule cette branche dans le checkout principal avant la session. */
+  branch?: string;
+  /** true (défaut quand `branch` fourni) : `git switch -c` ; false : bascule sur une branche existante. */
+  newBranch?: boolean;
+}
+
 // ---- Groupes de travail (P5) ----
 export interface GroupsListResponse {
   groups: GroupSummary[];

packages/site/src/components/HeroMockup.vue

@@ -4,6 +4,7 @@ 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');
@@ -20,10 +21,11 @@ const LINE_COLORS: Record<string, string> = {
   run: '#7dd3fc',
 };
 
+// Couleurs alignées sur SessionStateBadge de l'app (zinc/emerald/amber/sky de Tailwind).
 const PILL: Record<SessionState, { bg: string; fg: string; dot: string; pulse: string }> = {
-  idle: { bg: 'rgba(2,44,34,.6)', fg: '#34d399', dot: '#34d399', pulse: '' },
-  busy: { bg: 'rgba(8,47,73,.7)', fg: '#7dd3fc', dot: '#7dd3fc', pulse: 'pulseSky 2s ease-in-out infinite' },
-  waiting: { bg: 'rgba(69,26,3,.7)', fg: '#fcd34d', dot: '#fcd34d', pulse: 'pulseAmber 2.2s ease-in-out infinite' },
+  idle: { bg: '#022c22', fg: '#34d399', dot: '#34d399', pulse: '' },
+  busy: { bg: '#082f49', fg: '#7dd3fc', dot: '#7dd3fc', pulse: 'pulseSky 2s ease-in-out infinite' },
+  waiting: { bg: '#451a03', fg: '#fcd34d', dot: '#fcd34d', pulse: 'pulseAmber 2.2s ease-in-out infinite' },
 };
 
 const pill = computed(() => PILL[anim.value.sess]);
@@ -33,36 +35,14 @@ const termLines = computed(() =>
   anim.value.lines.map((l) => ({ text: l.text, color: LINE_COLORS[l.k] ?? '#d4d4d8' })),
 );
 
+// Options du dialogue de permission — reproduit DialogPrompt (boutons numérotés + Deny).
 const dlgOptions = computed(() =>
-  DLG_OPTS[locale.value as AppLocale].map((txt, i) => {
-    const highlighted = anim.value.hl === i;
-    const answered = anim.value.ans === i;
-    const row: Record<string, string> = {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '9px',
-      padding: '7px 9px',
-      borderRadius: '7px',
-      border: '1px solid transparent',
-      background: 'rgba(9,9,11,.4)',
-      transition: 'background .2s, border-color .2s',
-    };
-    if (highlighted) {
-      row.background = 'rgba(69,26,3,.5)';
-      row.border = '1px solid rgba(217,119,6,.6)';
-    }
-    if (answered) {
-      row.background = 'rgba(2,44,34,.45)';
-      row.border = '1px solid rgba(5,150,105,.6)';
-    }
-    return {
-      num: answered ? '✓' : String(i + 1),
+  DLG_OPTS[locale.value as AppLocale].map((txt, i) => ({
+    num: anim.value.ans === i ? '✓' : String(i + 1),
     text: txt,
-      rowStyle: row,
-      numColor: answered ? '#34d399' : '#fbbf24',
-      textColor: answered ? '#a7f3d0' : highlighted ? '#fde68a' : '#d4d4d8',
-    };
-  }),
+    highlighted: anim.value.hl === i,
+    answered: anim.value.ans === i,
+  })),
 );
 </script>
 
@@ -79,59 +59,79 @@ const dlgOptions = computed(() =>
         <span class="ml-2 font-mono text-[11.5px] text-zinc-600">arboretum · localhost:7317</span>
       </div>
 
-      <div class="flex min-h-[360px]">
-        <!-- sidebar -->
+      <div class="flex min-h-[440px]">
+        <!-- sidebar (fidèle à AppSidebar : Worktrees / Sessions / Groups, puis Réglages / Aide / Gitea / Café) -->
         <div
-          class="flex w-[168px] flex-none flex-col border-r border-[#1c1c1f] bg-zinc-900/40 px-2.5 py-3"
+          class="flex w-[190px] flex-none flex-col border-r border-[#1c1c1f] bg-zinc-900/40 px-2 py-3"
         >
-          <div class="flex items-center gap-2 px-1 pb-3">
+          <div class="flex items-center gap-2 px-2 pb-3">
             <img
               src="/assets/arboretum-mark.png"
               alt=""
-              width="20"
-              height="20"
-              class="h-5 w-5 object-contain"
+              width="22"
+              height="22"
+              class="h-[22px] w-[22px] object-contain"
             />
-            <span class="font-mono text-[13px] font-semibold text-zinc-200">Arboretum</span>
+            <span class="text-[14px] font-semibold text-zinc-100">Arboretum</span>
           </div>
 
           <div
-            class="mb-3 flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950/50 px-[9px] py-[7px]"
+            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="13" height="13" 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-[11.5px] text-zinc-600">{{ t('mSearch') }}</span>
-            <span class="rounded border border-zinc-800 px-[5px] py-px font-mono text-[10px] text-zinc-500">⌘K</span>
+            <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>
 
-          <div class="flex flex-col gap-0.5">
-            <div class="flex items-center gap-[9px] rounded-lg bg-zinc-800 px-[9px] py-[7px] text-zinc-100">
-              <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="7" height="9" x="3" y="3" rx="1" /><rect width="7" height="5" x="14" y="3" rx="1" /><rect width="7" height="9" x="14" y="12" rx="1" /><rect width="7" height="5" x="3" y="16" rx="1" /></svg>
-              <span class="text-[12.5px]">{{ t('mDash') }}</span>
+          <!-- nav primaire -->
+          <div class="flex flex-col gap-1">
+            <div class="flex items-center gap-2.5 rounded-lg bg-zinc-800 px-2.5 py-1.5 text-zinc-100">
+              <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="ml-auto inline-flex h-[17px] min-w-[17px] items-center justify-center rounded-full px-[5px] font-mono text-[10px] font-bold"
-                style="background: #f59e0b; color: #1c1300"
+                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-[9px] rounded-lg px-[9px] py-[7px] text-zinc-400">
-              <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"><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-[12.5px]">{{ t('mGroups') }}</span>
+            <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>
           </div>
 
           <div class="flex-1"></div>
 
-          <div class="flex flex-col gap-0.5 border-t border-[#1c1c1f] pt-2.5">
-            <div class="flex items-center gap-[9px] rounded-lg px-[9px] py-1.5 text-zinc-400">
-              <svg width="14" height="14" 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.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="text-[12.5px]">{{ t('mSettings') }}</span>
+          <!-- nav secondaire -->
+          <div class="flex flex-col gap-1">
+            <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="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-[9px] rounded-lg px-[9px] py-1.5 text-zinc-400">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>
-              <span class="text-[12.5px]">{{ t('mHelp') }}</span>
+            <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"><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>
+              <span class="flex-1 text-[12.5px] font-medium">{{ t('mHelp') }}</span>
             </div>
-            <div class="px-[9px] pt-1.5 font-mono text-[10px] text-zinc-700">v0.4.2</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) -->
+          <div class="mt-2 flex items-center gap-2 border-t border-[#1c1c1f] px-1 pt-2.5">
+            <span class="rounded border border-zinc-700 px-1.5 py-px font-mono text-[10px] text-zinc-400">{{ locale.toUpperCase() }}</span>
+            <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>
+            <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>
+            <span class="ml-auto font-mono text-[10px] text-zinc-600">v1.6.0</span>
           </div>
         </div>
 
@@ -142,9 +142,9 @@ const dlgOptions = computed(() =>
             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-[#1c1c1f] px-[11px] py-2">
-              <span class="font-mono text-[11.5px] text-zinc-400">api · feat/auth</span>
+              <span class="font-mono text-[11.5px] text-zinc-300">api · feat/auth</span>
               <span
-                class="inline-flex items-center gap-1.5 rounded-full px-[9px] py-[3px] font-mono text-[11px]"
+                class="inline-flex items-center gap-1.5 rounded px-2 py-[3px] font-mono text-[11px]"
                 :style="{ background: pill.bg, color: pill.fg }"
               >
                 <span
@@ -167,24 +167,30 @@ const dlgOptions = computed(() =>
             </div>
           </div>
 
-          <!-- dialogue de permission -->
+          <!-- dialogue de permission (fidèle à DialogPrompt : badge type + question + options + Deny) -->
           <div
             v-if="anim.dlg"
-            class="animate-dlg-in rounded-[10px] border border-[rgba(120,53,15,0.6)] bg-[rgba(69,26,3,0.3)] p-[11px]"
+            class="animate-dlg-in rounded-lg border border-amber-900/60 bg-amber-950/30 p-[11px]"
           >
-            <div class="mb-[9px] flex items-center gap-2">
-              <svg width="14" height="14" 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>
-              <span class="text-[12.5px] text-zinc-200">{{ t('dlgQ') }}</span>
+            <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="text-[12.5px] text-amber-100">{{ t('dlgQ') }}</span>
             </div>
-            <div class="flex flex-col gap-[5px]">
-              <div v-for="(op, i) in dlgOptions" :key="i" :style="op.rowStyle">
+            <div class="flex flex-wrap gap-[6px]">
               <span
-                  class="w-[15px] flex-none text-center font-mono text-[11px] font-bold"
-                  :style="{ color: op.numColor }"
-                  >{{ op.num }}</span
+                v-for="(op, i) in dlgOptions"
+                :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'
+                  : op.highlighted
+                    ? 'border-amber-400 bg-amber-950/50 text-amber-200'
+                    : 'border-zinc-700 bg-zinc-800 text-zinc-200'"
               >
-                <span class="text-xs" :style="{ color: op.textColor }">{{ op.text }}</span>
-              </div>
+                <span class="font-mono" :class="op.answered ? 'text-emerald-400' : 'text-amber-400'">{{ 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>
             </div>
           </div>
         </div>

packages/site/src/components/ShowcaseSection.vue

@@ -1,67 +1,115 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
+import { DLG_OPTS } from '../i18n/content';
+import type { AppLocale } from '../i18n';
+
+const { t, locale } = useI18n();
+
+// Options du dialogue (réutilisées pour le rail « À traiter » et la vue mobile).
+const dlgOpts = computed(() => DLG_OPTS[locale.value as AppLocale]);
 </script>
 
 <template>
   <section id="showcase" class="mx-auto flex max-w-[1200px] scroll-mt-[84px] flex-col gap-[92px] px-6">
-    <!-- a) dashboard + needs attention -->
+    <!-- a) dashboard worktree-first : rail « À traiter » + section de repo (fidèle à AttentionSection + RepoSection) -->
     <div v-reveal class="flex flex-wrap items-center gap-12">
-      <div class="min-w-[280px] flex-[1_1_380px]">
+      <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>
         <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
           {{ t('scATitle') }}
         </h2>
         <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('scABody') }}</p>
       </div>
-      <div class="min-w-[280px] flex-[1_1_420px]">
-        <div class="overflow-hidden rounded-xl border border-zinc-800 bg-[#0c0c0e] shadow-card">
-          <div class="flex items-center gap-[9px] border-b border-[#1c1c1f] bg-[rgba(69,26,3,0.18)] px-[15px] py-3">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fcd34d" 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-sm font-semibold text-zinc-50">{{ t('mAttn') }}</span>
-            <span class="ml-auto rounded-full bg-amber-300/[0.12] px-[9px] py-0.5 font-mono text-[11px] text-amber-300">2</span>
+      <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 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>
+            <h3 class="text-sm font-semibold text-amber-200">{{ t('mAttn') }}</h3>
+            <span class="rounded-full bg-amber-500/20 px-1.5 text-[11px] font-semibold text-amber-300">1</span>
           </div>
-          <div class="flex flex-col gap-2 p-2.5">
-            <div class="flex items-center gap-3 rounded-[9px] border border-[rgba(120,53,15,0.55)] bg-[rgba(69,26,3,0.3)] px-[13px] py-[11px]">
-              <span class="h-2 w-2 flex-none animate-pulse-amber rounded-full bg-amber-300"></span>
-              <div class="min-w-0 flex-1">
-                <div class="font-mono text-[13px] text-zinc-200">api · feat/auth</div>
-                <div class="text-xs text-[#d4a55a]">Approve change to login.ts?</div>
+          <span class="truncate font-mono text-xs text-amber-300/80">~/code/arboretum/api</span>
+          <!-- DialogPrompt -->
+          <div class="rounded-lg border border-amber-900/60 bg-amber-950/30 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="text-[12.5px] text-amber-100">{{ t('dlgQ') }}</span>
             </div>
-              <button type="button" class="flex-none rounded-[7px] border border-amber-300/30 bg-amber-300/[0.12] px-3 py-[5px] text-xs font-semibold text-amber-300">Answer</button>
+            <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"
+              >
+                <span class="font-mono text-amber-400">{{ 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>
             </div>
-            <div class="flex items-center gap-3 rounded-[9px] border border-[rgba(120,53,15,0.55)] bg-[rgba(69,26,3,0.3)] px-[13px] py-[11px]">
-              <span class="h-2 w-2 flex-none animate-pulse-amber rounded-full bg-amber-300"></span>
-              <div class="min-w-0 flex-1">
-                <div class="font-mono text-[13px] text-zinc-200">web · checkout</div>
-                <div class="text-xs text-[#d4a55a]">Run the failing test again?</div>
           </div>
-              <button type="button" class="flex-none rounded-[7px] border border-amber-300/30 bg-amber-300/[0.12] px-3 py-[5px] text-xs font-semibold text-amber-300">Answer</button>
         </div>
-            <div class="mx-0.5 my-[3px] h-px bg-[#1c1c1f]"></div>
-            <div class="flex items-center gap-3 rounded-[9px] px-[13px] py-[9px]">
-              <span class="h-2 w-2 flex-none animate-pulse-sky rounded-full bg-sky-300"></span>
-              <div class="min-w-0 flex-1 font-mono text-[13px] text-zinc-400">db · refactor</div>
-              <span class="flex-none font-mono text-[11px] text-sky-300">{{ t('busy') }}</span>
+
+        <!-- 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">
+          <header class="flex flex-wrap items-center gap-2">
+            <h3 class="font-semibold text-zinc-100">arboretum</h3>
+            <span class="truncate font-mono text-xs text-zinc-500">~/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">
+              <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="flex items-center gap-2">
+              <span class="font-mono text-sm text-zinc-200">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="ml-auto text-xs text-zinc-600">{{ t('mClean') }}</span>
             </div>
-            <div class="flex items-center gap-3 rounded-[9px] px-[13px] py-[9px]">
-              <span class="h-2 w-2 flex-none rounded-full bg-emerald-400"></span>
-              <div class="min-w-0 flex-1 font-mono text-[13px] text-zinc-400">docs · main</div>
-              <span class="flex-none font-mono text-[11px] text-emerald-400">{{ t('idle') }}</span>
+            <p class="truncate font-mono text-xs text-zinc-500">~/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-emerald-950 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400">
+                  <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>{{ t('idle') }}
+                </span>
+                <span class="font-mono text-[11px] text-zinc-400">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="flex items-center gap-2">
+              <span class="font-mono text-sm text-zinc-200">feat/auth</span>
+              <span class="ml-auto flex items-center gap-2 text-xs text-zinc-500">
+                <span>↑2</span>
+                <span class="text-amber-400">● {{ t('mDirty') }}</span>
+              </span>
+            </div>
+            <p class="truncate font-mono text-xs text-zinc-500">~/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-sky-950 px-1.5 py-0.5 text-[11px] 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="font-mono text-[11px] text-zinc-400">claude</span>
+              </span>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- b) multi-terminal grid -->
+    <!-- b) grille multi-terminaux (fidèle à TerminalCell : 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_420px]">
+      <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="overflow-hidden rounded-[9px] border border-zinc-800 bg-zinc-950">
-            <div class="flex items-center justify-between border-b border-[#1c1c1f] px-[11px] py-2">
-              <span class="font-mono text-[11px] text-zinc-400">api · feat/auth</span>
-              <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>
+          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+            <div class="flex items-center gap-2 border-b border-zinc-800 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="truncate font-mono text-[11px] text-zinc-300">api · feat/auth</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
             </div>
             <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
               <div class="text-emerald-400">● Edit session.ts</div>
@@ -70,10 +118,11 @@ const { t } = useI18n();
               <div class="text-zinc-500">refactoring guards…</div>
             </div>
           </div>
-          <div class="overflow-hidden rounded-[9px] border border-zinc-800 bg-zinc-950">
-            <div class="flex items-center justify-between border-b border-[#1c1c1f] px-[11px] py-2">
-              <span class="font-mono text-[11px] text-zinc-400">web · fix/cart</span>
-              <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
+          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+            <div class="flex items-center gap-2 border-b border-zinc-800 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="truncate font-mono text-[11px] text-zinc-300">web · fix/cart</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
             </div>
             <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
               <div class="text-emerald-400">✓ all tests passing</div>
@@ -84,10 +133,11 @@ const { t } = useI18n();
               </div>
             </div>
           </div>
-          <div class="overflow-hidden rounded-[9px] border border-zinc-800 bg-zinc-950">
-            <div class="flex items-center justify-between border-b border-[#1c1c1f] px-[11px] py-2">
-              <span class="font-mono text-[11px] text-zinc-400">db · refactor</span>
-              <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>
+          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+            <div class="flex items-center gap-2 border-b border-zinc-800 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="truncate font-mono text-[11px] text-zinc-300">db · refactor</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
             </div>
             <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
               <div class="text-emerald-400">● Write migration</div>
@@ -95,20 +145,21 @@ const { t } = useI18n();
               <div class="text-zinc-500">applying to schema…</div>
             </div>
           </div>
-          <div class="overflow-hidden rounded-[9px] border border-zinc-800 bg-zinc-950">
-            <div class="flex items-center justify-between border-b border-[#1c1c1f] px-[11px] py-2">
-              <span class="font-mono text-[11px] text-zinc-400">docs · api</span>
-              <span class="h-1.5 w-1.5 animate-pulse-sky rounded-full bg-sky-300"></span>
+          <div class="overflow-hidden rounded-lg border border-zinc-800 bg-[#09090b]">
+            <div class="flex items-center gap-2 border-b border-zinc-800 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="truncate font-mono text-[11px] text-zinc-300">docs · api</span>
+              <span class="ml-auto shrink-0 font-mono text-[11px] text-zinc-500">claude</span>
             </div>
             <div class="p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
               <div class="text-emerald-400">● Read README.md</div>
-              <div class="text-zinc-500">## Quick start</div>
-              <div class="text-zinc-500">writing examples…</div>
+              <div class="text-amber-300">Permission required</div>
+              <div class="text-zinc-500">waiting for input…</div>
             </div>
           </div>
         </div>
       </div>
-      <div class="min-w-[280px] flex-[1_1_380px]">
+      <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>
         <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
           {{ t('scBTitle') }}
@@ -117,7 +168,7 @@ const { t } = useI18n();
       </div>
     </div>
 
-    <!-- c) mobile -->
+    <!-- c) mobile : push + réponse au dialogue (fidèle à DialogPrompt) + 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>
@@ -127,11 +178,12 @@ const { t } = useI18n();
         <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('scCBody') }}</p>
       </div>
       <div class="flex min-w-[280px] flex-[1_1_320px] justify-center">
-        <div class="relative w-[288px] 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-zinc-900 bg-zinc-950 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>
-          <div class="px-[13px] pb-[22px]">
+          <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">
               <span class="inline-flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg bg-emerald-500/[0.14]">
                 <img src="/assets/arboretum-mark.png" alt="" width="18" height="18" class="h-[18px] w-[18px] object-contain" />
@@ -145,24 +197,54 @@ const { t } = useI18n();
                 <div class="text-xs leading-[1.45] text-zinc-400">{{ t('toastBody') }}</div>
               </div>
             </div>
-            <div class="mt-[14px] overflow-hidden rounded-[15px] border border-zinc-800 bg-zinc-950">
-              <div class="flex items-center gap-2 border-b border-[#1c1c1f] px-[13px] py-[11px]">
-                <span class="h-[7px] w-[7px] animate-pulse-amber rounded-full bg-amber-300"></span>
-                <span class="font-mono text-[11px] text-zinc-300">feat/auth</span>
+
+            <!-- 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="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>
+                <span class="text-[13px] font-semibold text-amber-200">{{ t('mAttn') }}</span>
+                <span class="rounded-full bg-amber-500/20 px-1.5 text-[11px] font-semibold text-amber-300">1</span>
               </div>
-              <div class="p-[13px]">
-                <div class="text-[13px] leading-[1.5] text-zinc-300">{{ t('dlgQ') }}</div>
-                <div class="mt-2 rounded-lg border border-[#1c1c1f] bg-[#0c0c0e] p-[9px] font-mono text-[11px] leading-[1.6] text-zinc-500">
-                  <div class="text-emerald-400">+ verifyToken(req)</div>
-                  <div class="text-red-400">- skipAuth()</div>
-                </div>
-                <div class="mt-[13px] flex gap-2">
-                  <button type="button" class="flex-1 rounded-lg bg-emerald-600 py-2.5 text-[13px] font-semibold text-white">{{ t('approve') }}</button>
-                  <button type="button" class="flex-1 rounded-lg border border-zinc-800 bg-transparent py-2.5 text-[13px] font-medium text-zinc-300">{{ t('reject') }}</button>
+              <span class="font-mono text-[11px] text-amber-300/80">api · feat/auth</span>
+              <div class="rounded-lg border border-amber-900/60 bg-amber-950/30 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>
+                <div class="mt-1.5 text-[13px] leading-[1.4] text-amber-100">{{ 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"
+                  >
+                    <span class="font-mono text-amber-400">{{ 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>
                 </div>
               </div>
             </div>
           </div>
+
+          <!-- barre d'onglets mobile (fidèle à MobileTabBar) -->
+          <div class="absolute inset-x-0 bottom-0 flex border-t border-zinc-800 bg-zinc-950/95 backdrop-blur">
+            <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="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="text-[10px]">{{ t('mWorktrees') }}</span>
+            </div>
+            <div class="relative flex flex-1 flex-col items-center gap-0.5 py-2 text-emerald-400">
+              <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>
+                <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>
+              <span class="text-[10px]">{{ t('mSessions') }}</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"><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>
+            </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>
       </div>
     </div>

packages/site/src/i18n/content.ts

@@ -10,8 +10,8 @@ export interface FaqItem {
 export const FAQS: Record<AppLocale, FaqItem[]> = {
   en: [
     {
-      q: 'Is Arboretum an IDE?',
-      a: "No — it's a command center. It doesn't replace your editor; it supervises the AI coding agents working across your repos: spawning sessions, surfacing their state, and letting you answer them.",
+      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 / idle 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?',
@@ -23,7 +23,7 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
     },
     {
       q: 'Does it work on mobile?',
-      a: 'Yes. The dashboard is an installable PWA. Add it to your home screen, get Web Push the moment a session needs you, and approve or reject a prompt with a single tap.',
+      a: 'Yes. The dashboard is an installable PWA. Add it to your home screen, get Web Push the moment a session needs you, and answer a prompt with a single tap.',
     },
     {
       q: 'Is my code safe?',
@@ -32,8 +32,8 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
   ],
   fr: [
     {
-      q: 'Arboretum est-il un IDE ?',
-      a: "Non — c'est un poste de commandement. Il ne remplace pas votre éditeur ; il supervise les agents de code IA qui travaillent sur vos repos : lancement des sessions, affichage de leur état, et réponse à leurs questions.",
+      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 / inactive 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 ?',
@@ -45,7 +45,7 @@ export const FAQS: Record<AppLocale, FaqItem[]> = {
     },
     {
       q: 'Fonctionne-t-il sur mobile ?',
-      a: "Oui. Le dashboard est une PWA installable. Ajoutez-le à l'écran d'accueil, recevez un Web Push dès qu'une session a besoin de vous, et approuvez ou refusez une question d'un toucher.",
+      a: "Oui. Le dashboard est une PWA installable. Ajoutez-le à l'écran d'accueil, recevez un Web Push dès qu'une session a besoin de vous, et répondez à une question d'un seul toucher.",
     },
     {
       q: 'Mon code est-il en sécurité ?',

packages/site/src/i18n/en.ts

@@ -15,9 +15,9 @@ export default {
   probBody:
     'Sessions scattered across tabs. No idea which agent is waiting on you. Step away from the desk and everything stalls. Arboretum is the single pane of glass.',
   featKicker: 'Everything in one view',
-  featTitle: 'Built to supervise agents — not to be an IDE',
+  featTitle: 'Built to supervise agents working in parallel',
   feat1Title: 'Worktree-first',
-  feat1Desc: 'Every session is pinned to a git worktree. You see branches, not chaos.',
+  feat1Desc: 'Work on your main branch or spin up an isolated worktree — every session stays pinned to a branch. Branches, not chaos.',
   feat2Title: 'Many sessions, one view',
   feat2Desc: 'Run parallel Claude Code agents side by side in a single live grid.',
   feat3Title: 'Fine-grained states',
@@ -56,7 +56,7 @@ export default {
   step2Title: 'Open the dashboard',
   step2Desc: 'It serves a web dashboard on localhost. Install it as a PWA on any device.',
   step3Title: 'Spawn & supervise',
-  step3Desc: 'Start Claude Code sessions on any worktree and watch them from anywhere.',
+  step3Desc: 'Start Claude Code sessions on your main branch or any worktree, and watch them from anywhere.',
   secKicker: 'Security',
   secTitle: 'A web terminal you can actually trust',
   secIntro: 'Built local-first. Nothing is exposed unless you choose to — and even then, on your terms.',
@@ -75,17 +75,24 @@ export default {
   footTag: 'a garden of branches, one pane of glass.',
   license: 'MIT License',
   coffee: 'Buy me a coffee',
-  mDash: 'Dashboard',
+  mWorktrees: 'Worktrees',
+  mSessions: 'Sessions',
   mGroups: 'Groups',
   mSettings: 'Settings',
   mHelp: 'Help',
+  mGitea: 'Gitea',
+  mMore: 'More',
   mSearch: 'Search',
   mAttn: 'Needs attention',
   waiting: 'waiting',
   busy: 'busy',
   idle: 'idle',
-  approve: 'Approve',
-  reject: 'Reject',
+  mPermission: 'Permission',
+  mDeny: 'Deny (Esc)',
+  mMain: 'main',
+  mClean: 'clean',
+  mDirty: '3 changed',
+  mStart: 'Start work',
   toastTitle: 'Session waiting for you',
   toastBody: 'api · feat/auth needs a decision',
   dlgQ: 'Apply this change to login.ts?',

packages/site/src/i18n/fr.ts

@@ -15,9 +15,9 @@ export default {
   probBody:
     "Des sessions éparpillées dans des onglets. Aucune idée de quel agent vous attend. Vous quittez le bureau et tout se fige. Arboretum, c'est la vitre unique.",
   featKicker: 'Tout dans une seule vue',
-  featTitle: 'Conçu pour superviser les agents — pas pour être un IDE',
+  featTitle: 'Conçu pour superviser des agents qui travaillent en parallèle',
   feat1Title: "Worktree d'abord",
-  feat1Desc: 'Chaque session est rattachée à un worktree git. Vous voyez des branches, pas du chaos.',
+  feat1Desc: 'Travaillez sur votre branche principale ou créez un worktree isolé — chaque session reste rattachée à une branche. Des branches, pas du chaos.',
   feat2Title: 'Plusieurs sessions, une vue',
   feat2Desc: 'Lancez des agents Claude Code en parallèle, côte à côte dans une seule grille en direct.',
   feat3Title: 'États fins',
@@ -56,7 +56,7 @@ export default {
   step2Title: 'Ouvrez le dashboard',
   step2Desc: "Il sert un dashboard web sur localhost. Installez-le en PWA sur n'importe quel appareil.",
   step3Title: 'Lancez & supervisez',
-  step3Desc: "Démarrez des sessions Claude Code sur n'importe quel worktree et surveillez-les de partout.",
+  step3Desc: "Démarrez des sessions Claude Code sur votre branche principale ou n'importe quel worktree, et surveillez-les de partout.",
   secKicker: 'Sécurité',
   secTitle: 'Un terminal web en qui vous pouvez avoir confiance',
   secIntro: "Conçu local-first. Rien n'est exposé sauf si vous le décidez — et toujours selon vos règles.",
@@ -68,24 +68,31 @@ export default {
   sec3Desc: 'Chaque requête est validée par origine. Pas de surprise cross-site.',
   sec4Title: 'Distant via Tailscale',
   sec4Desc: 'Accédez-y via Tailscale Serve — aucun port public, aucune redirection de port.',
-  faqTitle: 'Vos questions, nos réponses',
+  faqTitle: 'Vos questions, les réponses',
   ctaTitle: 'Prenez le commandement de vos agents',
   ctaBody: 'Une commande pour lancer. Tout superviser depuis un seul endroit.',
   ctaSource: 'Voir le code sur Gitea',
   footTag: 'un jardin de branches, une seule vitre.',
   license: 'Licence MIT',
   coffee: 'Paye-moi un café',
-  mDash: 'Tableau de bord',
+  mWorktrees: 'Worktrees',
+  mSessions: 'Sessions',
   mGroups: 'Groupes',
   mSettings: 'Réglages',
   mHelp: 'Aide',
+  mGitea: 'Gitea',
+  mMore: 'Plus',
   mSearch: 'Rechercher',
   mAttn: 'À traiter',
   waiting: 'en attente',
-  busy: 'occupé',
-  idle: 'au repos',
-  approve: 'Approuver',
-  reject: 'Refuser',
+  busy: 'occupée',
+  idle: 'inactive',
+  mPermission: 'Permission',
+  mDeny: 'Refuser (Échap)',
+  mMain: 'principal',
+  mClean: 'propre',
+  mDirty: '3 modifiés',
+  mStart: 'Démarrer',
   toastTitle: 'Une session vous attend',
   toastBody: 'api · feat/auth attend une décision',
   dlgQ: 'Appliquer ce changement à login.ts ?',

packages/web/src/components/GroupSessionModal.vue

@@ -79,15 +79,19 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import type { RepoSummary } from '@arboretum/shared';
 import { useGroupsStore, type CrossRepoResult, type GroupFeatureOutcome } from '../stores/groups';
+import { useToastsStore } from '../stores/toasts';
 
 const props = defineProps<{ groupId: string; repos: RepoSummary[] }>();
 const emit = defineEmits<{ close: [] }>();
 
 const { t } = useI18n();
+const router = useRouter();
 const groups = useGroupsStore();
+const toasts = useToastsStore();
 
 const mode = ref<'feature' | 'main'>('feature');
 const branch = ref('');
@@ -139,6 +143,14 @@ async function onSubmit(): Promise<void> {
         wtResults.value = { ...wtResults.value, [result.repoId]: result };
       },
     );
+    // Session lancée → on redirige vers son terminal plein écran (comme une session individuelle).
+    // En cas d'échec serveur (session null), on garde le modal ouvert avec le statut d'erreur.
+    if (outcome.value.session) {
+      const failed = outcome.value.skipped.length + outcome.value.worktreeResults.filter((r) => r.status !== 'ok').length;
+      if (failed > 0) toasts.info(t('toast.groupSessionPartial', { n: failed }));
+      else toasts.success(t('toast.groupSessionLaunched'));
+      await router.push({ name: 'session', params: { id: outcome.value.session.id } });
+    }
   } catch (err) {
     errorMsg.value = err instanceof Error ? err.message : String(err);
   } finally {

packages/web/src/components/RepoSection.vue

@@ -5,7 +5,7 @@
       <BaseBadge v-if="!repo.valid" tone="red">{{ t('repos.invalid') }}</BaseBadge>
       <span class="truncate font-mono text-xs text-zinc-500" :title="repo.path">{{ repo.path }}</span>
       <div class="ml-auto flex items-center gap-2">
-        <BaseButton size="sm" :icon="Plus" @click="creating = !creating">{{ t('worktrees.new') }}</BaseButton>
+        <BaseButton size="sm" :icon="Plus" @click="creating = !creating">{{ t('worktrees.startWork') }}</BaseButton>
         <BaseButton size="sm" :icon="Scissors" :loading="busy" @click="onPrune">{{ t('worktrees.prune') }}</BaseButton>
         <BaseButton
           size="sm"
@@ -18,7 +18,17 @@
       </div>
     </header>
 
-    <form v-if="creating" class="card-inset flex flex-wrap items-end gap-2" @submit.prevent="onCreate">
+    <form v-if="creating" class="card-inset flex flex-col gap-2" @submit.prevent="onCreate">
+      <!-- mode : créer un worktree dédié, ou bosser directement sur le checkout principal -->
+      <div class="flex flex-wrap items-center gap-3 text-xs text-zinc-400">
+        {{ t('worktrees.modeLabel') }}
+        <label class="flex items-center gap-1.5"><input v-model="mode" type="radio" value="worktree" /> {{ t('worktrees.modeWorktree') }}</label>
+        <label class="flex items-center gap-1.5"><input v-model="mode" type="radio" value="main" /> {{ t('worktrees.modeMain') }}</label>
+      </div>
+
+      <div class="flex flex-wrap items-end gap-2">
+        <!-- mode worktree : branche + créer/existante -->
+        <template v-if="mode === 'worktree'">
           <label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
             {{ t('worktrees.branch') }}
             <input v-model="branch" class="input font-mono" placeholder="feature/…" required />
@@ -32,9 +42,34 @@
             </select>
           </label>
           <label class="flex items-center gap-1 text-xs text-zinc-400"><input v-model="newBranch" type="checkbox" /> {{ t('worktrees.newBranch') }}</label>
-      <BaseButton type="submit" variant="primary" size="sm" :loading="busy" :disabled="branch.trim() === ''">
-        {{ t('worktrees.create') }}
+        </template>
+
+        <!-- mode branche principale : option git (branche actuelle ou nouvelle branche) + commande -->
+        <template v-else>
+          <label class="flex flex-col gap-1 text-xs text-zinc-400">
+            {{ t('worktrees.branchModeLabel') }}
+            <select v-model="mainBranchMode" class="input">
+              <option value="current">{{ t('worktrees.currentBranch') }}</option>
+              <option value="new">{{ t('worktrees.newBranchOpt') }}</option>
+            </select>
+          </label>
+          <label v-if="mainBranchMode === 'new'" class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
+            {{ t('worktrees.branch') }}
+            <input v-model="branch" class="input font-mono" placeholder="feature/…" />
+          </label>
+          <label class="flex flex-col gap-1 text-xs text-zinc-400">
+            {{ t('worktrees.commandLabel') }}
+            <select v-model="mainCommand" class="input">
+              <option value="claude">claude</option>
+              <option value="bash">bash</option>
+            </select>
+          </label>
+        </template>
+
+        <BaseButton type="submit" variant="primary" size="sm" :loading="busy" :disabled="!canSubmit">
+          {{ mode === 'worktree' ? t('worktrees.create') : t('worktrees.start') }}
         </BaseButton>
+      </div>
     </form>
     <p v-if="error" class="text-sm text-red-400">{{ error }}</p>
 
@@ -66,20 +101,37 @@ const toasts = useToastsStore();
 // applique le tri/filtre/recherche partagé (toolbar du dashboard) aux worktrees de ce repo.
 const worktrees = computed(() => view.apply(store.worktreesForRepo(props.repo.id)));
 const creating = ref(false);
+const mode = ref<'worktree' | 'main'>('worktree');
 const branch = ref('');
 const newBranch = ref(true);
 const startSession = ref<'claude' | 'bash' | null>(null);
+const mainBranchMode = ref<'current' | 'new'>('current');
+const mainCommand = ref<'claude' | 'bash'>('claude');
 const busy = ref(false);
 const error = ref<string | null>(null);
 
+// worktree : branche obligatoire ; branche principale + nouvelle branche : branche obligatoire ; sinon OK.
+const canSubmit = computed(() =>
+  mode.value === 'worktree' ? branch.value.trim() !== '' : mainBranchMode.value === 'current' || branch.value.trim() !== '',
+);
+
 async function onCreate(): Promise<void> {
   busy.value = true;
   error.value = null;
   try {
+    if (mode.value === 'worktree') {
       await store.createWorktree(props.repo.id, { branch: branch.value.trim(), newBranch: newBranch.value, startSession: startSession.value });
+      toasts.success(t('toast.worktreeCreated'));
+    } else {
+      // bosser sur la branche principale : session dans le checkout principal, avec création de branche optionnelle.
+      await store.startMainSession(props.repo.id, {
+        command: mainCommand.value,
+        ...(mainBranchMode.value === 'new' ? { branch: branch.value.trim(), newBranch: true } : {}),
+      });
+      toasts.success(t('toast.sessionCreated'));
+    }
     branch.value = '';
     creating.value = false;
-    toasts.success(t('toast.worktreeCreated'));
   } catch (err) {
     error.value = err instanceof Error ? err.message : String(err);
   } finally {

packages/web/src/components/TerminalGrid.vue

@@ -6,9 +6,16 @@
         {{ t('groups.gridCapped', { shown: MAX_CELLS, total: sessions.length }) }}
       </p>
       <!-- une seule socket WS multiplexe tous les terminaux ; cap dur pour préserver GPU/canaux.
-           Sur mobile la grille retombe à une colonne (empilement). -->
+           Sur mobile la grille retombe à une colonne (empilement). Hauteur relative au viewport
+           (dvh) : terminaux grands sur PC, exploitables sur mobile ; xterm re-fit via ResizeObserver.
+           Plancher min-h-80 pour les fenêtres courtes. -->
       <div class="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3">
-        <TerminalCell v-for="s in shown" :key="s.id" :session="s" class="h-80" />
+        <TerminalCell
+          v-for="s in shown"
+          :key="s.id"
+          :session="s"
+          class="h-[68dvh] min-h-80 lg:h-[calc((100dvh-9rem)/2)]"
+        />
       </div>
     </template>
   </div>

packages/web/src/components/WorktreeCard.vue

@@ -26,6 +26,30 @@
       </RouterLink>
       <span v-if="worktree.sessions.length === 0" class="text-xs text-zinc-600">{{ t('worktrees.noSession') }}</span>
 
+      <!-- lancement d'une session sur ce worktree ; carte principale = bosser sur la branche principale -->
+      <button v-if="hasLiveSession && !showLauncher" class="btn text-xs" @click="showLauncher = true">+ {{ t('worktrees.start') }}</button>
+      <form v-if="!hasLiveSession || showLauncher" class="flex flex-wrap items-center gap-1" @submit.prevent="onStart">
+        <template v-if="worktree.isMain">
+          <select v-model="branchMode" class="input text-xs" :aria-label="t('worktrees.branchModeLabel')">
+            <option value="current">{{ t('worktrees.currentBranch') }}</option>
+            <option value="new">{{ t('worktrees.newBranchOpt') }}</option>
+          </select>
+          <input v-if="branchMode === 'new'" v-model="newBranchName" class="input w-32 font-mono text-xs" placeholder="feature/…" />
+        </template>
+        <select v-model="startCommand" class="input text-xs" :aria-label="t('worktrees.commandLabel')">
+          <option value="claude">claude</option>
+          <option value="bash">bash</option>
+        </select>
+        <button
+          type="submit"
+          class="btn-primary text-xs"
+          :disabled="starting || (worktree.isMain && branchMode === 'new' && newBranchName.trim() === '')"
+        >
+          {{ starting ? t('worktrees.starting') : t('worktrees.start') }}
+        </button>
+      </form>
+      <span v-if="startError" class="text-xs text-amber-400">{{ startError }}</span>
+
       <div v-if="!worktree.isMain" class="ml-auto flex items-center gap-2">
         <template v-if="confirming">
           <span v-if="error" class="text-xs text-amber-400">{{ error }}</span>
@@ -74,6 +98,39 @@ const forceNeeded = ref(false);
 const error = ref<string | null>(null);
 const busy = ref(false);
 
+// --- lancement de session sur ce worktree ---
+const hasLiveSession = computed(() => props.worktree.sessions.some((s) => liveSession(s).live));
+const showLauncher = ref(false);
+const startCommand = ref<'claude' | 'bash'>('claude');
+const branchMode = ref<'current' | 'new'>('current'); // carte principale uniquement
+const newBranchName = ref('');
+const starting = ref(false);
+const startError = ref<string | null>(null);
+
+async function onStart(): Promise<void> {
+  if (starting.value) return;
+  starting.value = true;
+  startError.value = null;
+  try {
+    if (props.worktree.isMain && branchMode.value === 'new') {
+      // bosser sur la branche principale en créant d'abord une branche dans le checkout principal.
+      await store.startMainSession(props.worktree.repoId, { command: startCommand.value, branch: newBranchName.value.trim(), newBranch: true });
+    } else {
+      // worktree existant (ou branche principale actuelle) : session directe dans son cwd.
+      await sessions.createSession(props.worktree.path, startCommand.value);
+    }
+    // resynchronise les worktrees du repo pour que la nouvelle session apparaisse sur la carte.
+    await store.refreshRepoWorktrees(props.worktree.repoId);
+    showLauncher.value = false;
+    newBranchName.value = '';
+    branchMode.value = 'current';
+  } catch (err) {
+    startError.value = err instanceof Error ? err.message : String(err);
+  } finally {
+    starting.value = false;
+  }
+}
+
 const branchLabel = computed(() =>
   props.worktree.branch ?? (props.worktree.detached ? `${t('worktrees.detached')} ${props.worktree.head.slice(0, 7)}` : '—'),
 );

packages/web/src/i18n/en.ts

@@ -141,7 +141,16 @@ export default {
     branch: 'Branch',
     newBranch: 'create branch',
     start: 'Start',
+    starting: 'Starting…',
     startNone: 'no session',
+    startWork: 'Start work',
+    modeLabel: 'Mode',
+    modeWorktree: 'Worktree',
+    modeMain: 'Main branch',
+    branchModeLabel: 'Branch',
+    currentBranch: 'current branch',
+    newBranchOpt: 'new branch',
+    commandLabel: 'Command',
     delete: 'Delete',
     confirmDelete: 'Confirm delete',
     forceDelete: 'Force delete',
@@ -297,6 +306,8 @@ export default {
     groupCreated: 'Group created',
     groupUpdated: 'Group updated',
     groupDeleted: 'Group deleted',
+    groupSessionLaunched: 'Group session started',
+    groupSessionPartial: 'Group session started ({n} repo(s) skipped)',
     genericError: 'Something went wrong',
     dismiss: 'Dismiss',
   },

packages/web/src/i18n/fr.ts

@@ -143,7 +143,16 @@ const fr: typeof en = {
     branch: 'Branche',
     newBranch: 'créer la branche',
     start: 'Démarrer',
+    starting: 'Démarrage…',
     startNone: 'aucune session',
+    startWork: 'Démarrer le travail',
+    modeLabel: 'Mode',
+    modeWorktree: 'Worktree',
+    modeMain: 'Branche principale',
+    branchModeLabel: 'Branche',
+    currentBranch: 'branche actuelle',
+    newBranchOpt: 'nouvelle branche',
+    commandLabel: 'Commande',
     delete: 'Supprimer',
     confirmDelete: 'Confirmer',
     forceDelete: 'Forcer la suppression',
@@ -300,6 +309,8 @@ const fr: typeof en = {
     groupCreated: 'Groupe créé',
     groupUpdated: 'Groupe mis à jour',
     groupDeleted: 'Groupe supprimé',
+    groupSessionLaunched: 'Session de groupe démarrée',
+    groupSessionPartial: 'Session de groupe démarrée ({n} dépôt(s) ignoré(s))',
     genericError: 'Une erreur est survenue',
     dismiss: 'Fermer',
   },

packages/web/src/stores/worktrees.ts

@@ -7,6 +7,9 @@ import type {
   RepoResponse,
   ReposListResponse,
   RepoSummary,
+  SessionResponse,
+  SessionSummary,
+  StartRepoSessionRequest,
   WorktreeSummary,
   WorktreesListResponse,
 } from '@arboretum/shared';
@@ -104,6 +107,16 @@ export const useWorktreesStore = defineStore('worktrees', () => {
     return res;
   }
 
+  /**
+   * Lance une session sur le checkout principal du repo (« bosser sur la branche principale » sans
+   * worktree). Avec `branch`, le serveur crée/bascule la branche d'abord. La session et le worktree
+   * mis à jour arrivent aussi par WS ; on retourne la session pour permettre la navigation immédiate.
+   */
+  async function startMainSession(repoId: string, req: StartRepoSessionRequest = {}): Promise<SessionSummary> {
+    const res = await api.post<SessionResponse>(`/api/v1/repos/${repoId}/session`, req);
+    return res.session;
+  }
+
   async function deleteWorktree(repoId: string, path: string, force: boolean): Promise<void> {
     await api.delete<{ ok: true }>(`/api/v1/repos/${repoId}/worktrees?path=${encodeURIComponent(path)}&force=${force}`);
     removeWorktreeLocal(path);
@@ -135,6 +148,7 @@ export const useWorktreesStore = defineStore('worktrees', () => {
     discover,
     refreshRepoWorktrees,
     createWorktree,
+    startMainSession,
     deleteWorktree,
     prune,
     startRealtime,

packages/web/src/views/help-content.ts

@@ -122,7 +122,7 @@ const en: HelpSection[] = [
       },
       {
         title: 'Cross-repo feature',
-        body: 'Create the same worktree (and an optional session) across every repo of the group in one action; partial failures can be retried per repo.',
+        body: 'Create the same branch worktree across every repo of the group, then launch one Claude session that spans them all — one conversation, one shared context. Partial worktree failures can be retried per repo, and the new session opens straight into its terminal.',
       },
     ],
   },
@@ -290,7 +290,7 @@ const fr: HelpSection[] = [
       },
       {
         title: 'Feature cross-repo',
-        body: 'Créez le même worktree (et une session optionnelle) dans chaque dépôt du groupe en une seule action ; les échecs partiels sont rejouables dépôt par dépôt.',
+        body: 'Créez le même worktree de branche dans chaque dépôt du groupe, puis lancez une seule session Claude qui les couvre tous — une conversation, un contexte partagé. Les échecs partiels de worktree sont rejouables dépôt par dépôt, et la session s’ouvre directement sur son terminal.',
       },
     ],
   },