feat: onglets Réglages & Aide + icône Gitea

Réglages : préférences (langue, notifications push + test), gestion complète des tokens d'accès (liste/création/révocation, garde anti lock-out sur le dernier token), URL Gitea configurable, infos serveur en lecture seule (port/bind/origines/VAPID + flags CLI). Aide : documentation bilingue EN/FR de toutes les fonctionnalités, avec recherche. Icône Gitea (lien externe) dans la nav (sidebar + MoreSheet mobile).

Backend : routes /api/v1/auth/tokens (GET/POST/DELETE) + tokenId dans /me ; routes/settings.ts (GET/PATCH, allow-list stricte gitea_url, aucun secret exposé, URL validée http/https anti-XSS) ; AuthService.listTokens/revokeToken (transaction). Front : NavItem gère les liens externes, nav primaire/secondaire, store settings, vues SettingsView/HelpView.

236 tests verts (+15 nouveaux : auth-tokens, settings-routes).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/server/src/app.ts

@@ -19,6 +19,7 @@ import { registerRepoRoutes } from './routes/repos.js';
 import { registerGroupRoutes } from './routes/groups.js';
 import { registerWorktreeRoutes } from './routes/worktrees.js';
 import { registerPushRoutes } from './routes/push.js';
+import { registerSettingsRoutes } from './routes/settings.js';
 import { registerFsRoutes } from './routes/fs.js';
 import { registerWsGateway } from './ws/gateway.js';
 
@@ -98,6 +99,7 @@ export function buildApp(config: Config, db: Db, serverVersion: string): AppBund
   registerGroupRoutes(app, groups);
   registerWorktreeRoutes(app, worktrees);
   registerPushRoutes(app, push);
+  registerSettingsRoutes(app, db, config, serverVersion, push);
   registerFsRoutes(app);
   // La route websocket doit être déclarée APRÈS le chargement du plugin (contexte
   // encapsulé) — sinon le handler reçoit la signature REST (request, reply).

packages/server/src/auth/service.ts

@@ -35,11 +35,60 @@ export class AuthService {
   }
 
   createToken(label: string): string {
+    return this.createTokenRecord(label).token;
+  }
+
+  /** Comme createToken mais renvoie aussi l'id (pour l'API de gestion des tokens). */
+  createTokenRecord(label: string): { id: string; token: string } {
+    const id = randomUUID();
     const raw = `arb_${randomBytes(24).toString('hex')}`;
     this.db
       .prepare('INSERT INTO auth_tokens (id, label, token_hash, created_at) VALUES (?, ?, ?, ?)')
-      .run(randomUUID(), label, sha256(raw), new Date().toISOString());
+      .run(id, label, sha256(raw), new Date().toISOString());
-    return raw;
+    return { id, token: raw };
+  }
+
+  /** Tokens actifs (non révoqués), du plus ancien au plus récent. Ne renvoie JAMAIS le hash. */
+  listTokens(): Array<{ id: string; label: string; createdAt: string; lastUsedAt: string | null }> {
+    return this.db
+      .prepare(
+        'SELECT id, label, created_at AS createdAt, last_used_at AS lastUsedAt FROM auth_tokens WHERE revoked_at IS NULL ORDER BY created_at',
+      )
+      .all() as Array<{ id: string; label: string; createdAt: string; lastUsedAt: string | null }>;
+  }
+
+  /** Nombre de tokens actifs (non révoqués). */
+  countActiveTokens(): number {
+    return (this.db.prepare('SELECT COUNT(*) AS n FROM auth_tokens WHERE revoked_at IS NULL').get() as { n: number }).n;
+  }
+
+  /**
+   * Révoque un token. Refuse de révoquer le DERNIER token actif (sinon lock-out total) → 'last'.
+   * 'ok' = révoqué ; 'not_found' = id inconnu ou déjà révoqué.
+   */
+  revokeToken(id: string): 'ok' | 'last' | 'not_found' {
+    // Transaction : le check « dernier token » et l'UPDATE doivent être atomiques (garde
+    // anti lock-out robuste, même si un refactor futur introduisait de la concurrence).
+    this.db.exec('BEGIN IMMEDIATE');
+    try {
+      const row = this.db.prepare('SELECT id FROM auth_tokens WHERE id = ? AND revoked_at IS NULL').get(id) as
+        | { id: string }
+        | undefined;
+      let result: 'ok' | 'last' | 'not_found';
+      if (!row) {
+        result = 'not_found';
+      } else if (this.countActiveTokens() <= 1) {
+        result = 'last';
+      } else {
+        this.db.prepare('UPDATE auth_tokens SET revoked_at = ? WHERE id = ?').run(new Date().toISOString(), id);
+        result = 'ok';
+      }
+      this.db.exec('COMMIT');
+      return result;
+    } catch (err) {
+      this.db.exec('ROLLBACK');
+      throw err;
+    }
   }
 
   verifyRawToken(raw: string): AuthContext | null {

packages/server/src/routes/auth.ts

@@ -1,5 +1,12 @@
 import type { FastifyInstance, FastifyRequest } from 'fastify';
-import type { LoginRequest, LoginResponse, MeResponse } from '@arboretum/shared';
+import type {
+  CreateTokenRequest,
+  CreateTokenResponse,
+  LoginRequest,
+  LoginResponse,
+  MeResponse,
+  TokensListResponse,
+} from '@arboretum/shared';
 import type { AuthService, LoginRateLimiter } from '../auth/service.js';
 
 // Tailscale Serve / un reverse-proxy TLS posent x-forwarded-proto. On ne sert jamais
@@ -41,7 +48,12 @@ export function registerAuthRoutes(
   });
 
   app.get('/api/v1/auth/me', async (req, reply) => {
-    const res: MeResponse = { ok: true, tokenLabel: req.authContext?.label ?? 'unknown', serverVersion };
+    const res: MeResponse = {
+      ok: true,
+      tokenId: req.authContext?.tokenId ?? '',
+      tokenLabel: req.authContext?.label ?? 'unknown',
+      serverVersion,
+    };
     return reply.send(res);
   });
 
@@ -50,4 +62,35 @@ export function registerAuthRoutes(
     void reply.clearCookie(auth.cookieName, { path: '/', secure: isHttpsRequest(req) });
     return reply.send({ ok: true });
   });
+
+  // ---- Gestion des tokens d'accès (onglet Réglages) ----
+  // Sous l'auth globale (preValidation). On ne renvoie jamais le hash ; la valeur en clair
+  // d'un nouveau token n'est exposée qu'une seule fois, à la création.
+  app.get('/api/v1/auth/tokens', async (req): Promise<TokensListResponse> => {
+    const current = req.authContext?.tokenId;
+    return { tokens: auth.listTokens().map((t) => ({ ...t, current: t.id === current })) };
+  });
+
+  app.post('/api/v1/auth/tokens', async (req, reply) => {
+    const body = req.body as Partial<CreateTokenRequest> | null;
+    const label = typeof body?.label === 'string' ? body.label.trim() : '';
+    if (label.length < 1 || label.length > 64) {
+      return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'label must be 1–64 characters' } });
+    }
+    const { id, token } = auth.createTokenRecord(label);
+    return reply.status(201).send({ id, label, token } satisfies CreateTokenResponse);
+  });
+
+  app.delete('/api/v1/auth/tokens/:id', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const result = auth.revokeToken(id);
+    if (result === 'not_found') {
+      return reply.status(404).send({ error: { code: 'NOT_FOUND', message: 'No active token with this id' } });
+    }
+    if (result === 'last') {
+      return reply.status(409).send({ error: { code: 'LAST_TOKEN', message: 'Cannot revoke the last active token' } });
+    }
+    // 200 + corps JSON (pas 204) : le mini-client REST du front parse toujours la réponse.
+    return reply.send({ ok: true });
+  });
 }

packages/server/src/routes/settings.ts

@@ -0,0 +1,67 @@
+// Réglages exposés à l'UI (onglet Réglages). Frontière de sécurité CENTRALE : la table `settings`
+// contient aussi des SECRETS (server_secret, vapid_private). Ces routes n'exposent QUE des champs
+// non sensibles et n'écrivent QUE des clés explicitement allow-listées — jamais les secrets.
+import type { FastifyInstance } from 'fastify';
+import type { ServerInfo, SettingsResponse, UpdateSettingsRequest } from '@arboretum/shared';
+import type { Config } from '../config.js';
+import { type Db, getSetting, setSetting } from '../db/index.js';
+import type { PushService } from '../core/push-service.js';
+
+// Seule clé de `settings` modifiable via l'API. Les secrets ne figurent JAMAIS ici.
+const GITEA_URL_KEY = 'gitea_url';
+
+/** Valide/normalise une URL Gitea : http(s) uniquement (anti-XSS sur le href de l'icône). */
+function normalizeGiteaUrl(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (trimmed === '') return null;
+  let url: URL;
+  try {
+    url = new URL(trimmed);
+  } catch {
+    return null;
+  }
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+  return url.toString();
+}
+
+export function registerSettingsRoutes(
+  app: FastifyInstance,
+  db: Db,
+  config: Config,
+  serverVersion: string,
+  push: PushService,
+): void {
+  // '' (effacé) est normalisé en null côté réponse.
+  const readGiteaUrl = (): string | null => getSetting(db, GITEA_URL_KEY) || null;
+  const serverInfo = (): ServerInfo => ({
+    version: serverVersion,
+    port: config.port,
+    bind: config.bind,
+    allowedOrigins: config.allowedOrigins,
+    dataDir: config.dataDir,
+    vapidPublicKey: push.publicKey() || null,
+    vapidContact: config.vapidContact,
+  });
+  const snapshot = (): SettingsResponse => ({ settings: { giteaUrl: readGiteaUrl() }, server: serverInfo() });
+
+  app.get('/api/v1/settings', async (): Promise<SettingsResponse> => snapshot());
+
+  app.patch('/api/v1/settings', async (req, reply) => {
+    const body = (req.body as Partial<UpdateSettingsRequest> | null) ?? {};
+    if ('giteaUrl' in body) {
+      const v = body.giteaUrl;
+      if (v === null || v === '') {
+        setSetting(db, GITEA_URL_KEY, ''); // effacement
+      } else if (typeof v === 'string') {
+        const normalized = normalizeGiteaUrl(v);
+        if (!normalized) {
+          return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'giteaUrl must be a valid http(s) URL' } });
+        }
+        setSetting(db, GITEA_URL_KEY, normalized);
+      } else {
+        return reply.status(400).send({ error: { code: 'BAD_REQUEST', message: 'giteaUrl must be a string or null' } });
+      }
+    }
+    return reply.send(snapshot());
+  });
+}

packages/server/test/app.e2e.test.ts

@@ -127,7 +127,8 @@ describe('app e2e — auth, origin et sessions', () => {
       cookies: { arb_session: cookieValue },
     });
     expect(me.statusCode).toBe(200);
-    expect(me.json()).toEqual({ ok: true, tokenLabel: 'initial', serverVersion: '0.0.0-test' });
+    expect(me.json()).toMatchObject({ ok: true, tokenLabel: 'initial', serverVersion: '0.0.0-test' });
+    expect(typeof (me.json() as { tokenId: string }).tokenId).toBe('string');
   });
 
   it('cookie altéré → 401', async () => {

packages/server/test/auth-tokens.test.ts

@@ -0,0 +1,143 @@
+// Gestion des tokens d'accès via l'API REST (onglet Réglages) : create → list → revoke,
+// flag « courant », jamais de hash exposé, garde anti lock-out sur le dernier token.
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { buildApp, type AppBundle } from '../src/app.js';
+import { openDb, type Db } from '../src/db/index.js';
+import type { Config } from '../src/config.js';
+import type { CreateTokenResponse, MeResponse, TokensListResponse } from '@arboretum/shared';
+
+// Mêmes stubs que les autres tests de routes : pas de vrai claude ni de vrai PTY.
+vi.mock('node:child_process', () => ({ execFileSync: () => '/usr/bin/claude\n' }));
+vi.mock('@homebridge/node-pty-prebuilt-multiarch', () => {
+  class FakePty {
+    pid = 424242;
+    write = vi.fn();
+    resize = vi.fn();
+    pause = vi.fn();
+    resume = vi.fn();
+    kill = vi.fn();
+    onData(): { dispose: () => void } {
+      return { dispose: () => {} };
+    }
+    onExit(): { dispose: () => void } {
+      return { dispose: () => {} };
+    }
+  }
+  return { default: { spawn: (): FakePty => new FakePty() } };
+});
+
+process.env.ARBORETUM_LOG = 'silent';
+
+let dir: string;
+let bundle: AppBundle;
+let db: Db;
+let token: string;
+
+const auth = (): { authorization: string } => ({ authorization: `Bearer ${token}` });
+
+beforeAll(() => {
+  dir = mkdtempSync(join(tmpdir(), 'arboretum-tokens-'));
+  const dbPath = join(dir, 'tokens.db');
+  db = openDb(dbPath);
+  const config: Config = {
+    port: 7317,
+    bind: '127.0.0.1',
+    dbPath,
+    dataDir: dir,
+    allowedOrigins: [],
+    printToken: false,
+    claudeProjectsDir: join(dir, 'claude', 'projects'),
+    claudeSessionsDir: join(dir, 'claude', 'sessions'),
+    vapidContact: 'mailto:test@localhost',
+  };
+  bundle = buildApp(config, db, '0.0.0-test');
+  const t = bundle.auth.ensureBootstrapToken();
+  if (!t) throw new Error('bootstrap token attendu sur une base vierge');
+  token = t;
+});
+
+afterAll(async () => {
+  await bundle.app.close();
+  db.close();
+  rmSync(dir, { recursive: true, force: true });
+});
+
+describe('routes de gestion des tokens', () => {
+  it('GET /auth/me expose le tokenId courant', async () => {
+    const res = await bundle.app.inject({ method: 'GET', url: '/api/v1/auth/me', headers: auth() });
+    expect(res.statusCode).toBe(200);
+    const me = res.json() as MeResponse;
+    expect(typeof me.tokenId).toBe('string');
+    expect(me.tokenId.length).toBeGreaterThan(0);
+  });
+
+  it('liste le token initial et le marque « courant », sans jamais exposer de hash', async () => {
+    const res = await bundle.app.inject({ method: 'GET', url: '/api/v1/auth/tokens', headers: auth() });
+    expect(res.statusCode).toBe(200);
+    const body = res.json() as TokensListResponse;
+    expect(body.tokens).toHaveLength(1);
+    expect(body.tokens[0]?.label).toBe('initial');
+    expect(body.tokens[0]?.current).toBe(true);
+    // aucune fuite de hash / valeur en clair
+    expect(JSON.stringify(body)).not.toMatch(/token_hash|tokenHash/);
+  });
+
+  it('crée un token (valeur en clair renvoyée une fois), puis utilisable pour s’authentifier', async () => {
+    const res = await bundle.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/tokens',
+      headers: auth(),
+      payload: { label: 'laptop' },
+    });
+    expect(res.statusCode).toBe(201);
+    const created = res.json() as CreateTokenResponse;
+    expect(created.label).toBe('laptop');
+    expect(created.token).toMatch(/^arb_[0-9a-f]{48}$/);
+
+    // le nouveau token authentifie réellement
+    const me = await bundle.app.inject({
+      method: 'GET',
+      url: '/api/v1/auth/me',
+      headers: { authorization: `Bearer ${created.token}` },
+    });
+    expect((me.json() as MeResponse).tokenLabel).toBe('laptop');
+  });
+
+  it('rejette un label vide ou trop long (400)', async () => {
+    const empty = await bundle.app.inject({ method: 'POST', url: '/api/v1/auth/tokens', headers: auth(), payload: { label: '  ' } });
+    expect(empty.statusCode).toBe(400);
+    const tooLong = await bundle.app.inject({ method: 'POST', url: '/api/v1/auth/tokens', headers: auth(), payload: { label: 'x'.repeat(65) } });
+    expect(tooLong.statusCode).toBe(400);
+  });
+
+  it('révoque un token non courant (204), qui disparaît de la liste et n’authentifie plus', async () => {
+    const before = (await bundle.app.inject({ method: 'GET', url: '/api/v1/auth/tokens', headers: auth() })).json() as TokensListResponse;
+    const victim = before.tokens.find((t) => !t.current);
+    expect(victim).toBeDefined();
+    const del = await bundle.app.inject({ method: 'DELETE', url: `/api/v1/auth/tokens/${victim!.id}`, headers: auth() });
+    expect(del.statusCode).toBe(200);
+    const after = (await bundle.app.inject({ method: 'GET', url: '/api/v1/auth/tokens', headers: auth() })).json() as TokensListResponse;
+    expect(after.tokens.find((t) => t.id === victim!.id)).toBeUndefined();
+  });
+
+  it('404 sur un id inconnu', async () => {
+    const res = await bundle.app.inject({ method: 'DELETE', url: '/api/v1/auth/tokens/nope-xyz', headers: auth() });
+    expect(res.statusCode).toBe(404);
+  });
+
+  it('409 LAST_TOKEN : refuse de révoquer le dernier token actif', async () => {
+    const list = (await bundle.app.inject({ method: 'GET', url: '/api/v1/auth/tokens', headers: auth() })).json() as TokensListResponse;
+    expect(list.tokens).toHaveLength(1); // seul le token courant subsiste
+    const res = await bundle.app.inject({ method: 'DELETE', url: `/api/v1/auth/tokens/${list.tokens[0]!.id}`, headers: auth() });
+    expect(res.statusCode).toBe(409);
+    expect(res.json()).toMatchObject({ error: { code: 'LAST_TOKEN' } });
+  });
+
+  it('sans authentification → 401', async () => {
+    const res = await bundle.app.inject({ method: 'GET', url: '/api/v1/auth/tokens' });
+    expect(res.statusCode).toBe(401);
+  });
+});

packages/server/test/settings-routes.test.ts

@@ -0,0 +1,126 @@
+// Routes Réglages : GET expose la config non sensible (jamais les secrets), PATCH n'écrit que
+// l'allow-list et valide l'URL Gitea (http/https only, anti-XSS).
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { buildApp, type AppBundle } from '../src/app.js';
+import { getSetting, openDb, type Db } from '../src/db/index.js';
+import type { Config } from '../src/config.js';
+import type { SettingsResponse } from '@arboretum/shared';
+
+vi.mock('node:child_process', () => ({ execFileSync: () => '/usr/bin/claude\n' }));
+vi.mock('@homebridge/node-pty-prebuilt-multiarch', () => {
+  class FakePty {
+    pid = 424242;
+    write = vi.fn();
+    resize = vi.fn();
+    pause = vi.fn();
+    resume = vi.fn();
+    kill = vi.fn();
+    onData(): { dispose: () => void } {
+      return { dispose: () => {} };
+    }
+    onExit(): { dispose: () => void } {
+      return { dispose: () => {} };
+    }
+  }
+  return { default: { spawn: (): FakePty => new FakePty() } };
+});
+
+process.env.ARBORETUM_LOG = 'silent';
+
+let dir: string;
+let bundle: AppBundle;
+let db: Db;
+let token: string;
+
+const auth = (): { authorization: string } => ({ authorization: `Bearer ${token}` });
+
+beforeAll(() => {
+  dir = mkdtempSync(join(tmpdir(), 'arboretum-settings-'));
+  const dbPath = join(dir, 'settings.db');
+  db = openDb(dbPath);
+  const config: Config = {
+    port: 9999,
+    bind: '127.0.0.1',
+    dbPath,
+    dataDir: dir,
+    allowedOrigins: ['https://host.tailnet.ts.net'],
+    printToken: false,
+    claudeProjectsDir: join(dir, 'claude', 'projects'),
+    claudeSessionsDir: join(dir, 'claude', 'sessions'),
+    vapidContact: 'mailto:test@localhost',
+  };
+  bundle = buildApp(config, db, '1.2.3-test');
+  const t = bundle.auth.ensureBootstrapToken();
+  if (!t) throw new Error('bootstrap token attendu');
+  token = t;
+});
+
+afterAll(async () => {
+  await bundle.app.close();
+  db.close();
+  rmSync(dir, { recursive: true, force: true });
+});
+
+describe('GET /api/v1/settings', () => {
+  it('renvoie la config serveur non sensible et giteaUrl null par défaut', async () => {
+    const res = await bundle.app.inject({ method: 'GET', url: '/api/v1/settings', headers: auth() });
+    expect(res.statusCode).toBe(200);
+    const body = res.json() as SettingsResponse;
+    expect(body.server.version).toBe('1.2.3-test');
+    expect(body.server.port).toBe(9999);
+    expect(body.server.bind).toBe('127.0.0.1');
+    expect(body.server.allowedOrigins).toEqual(['https://host.tailnet.ts.net']);
+    expect(body.server.vapidPublicKey).toBeTruthy(); // clé publique = sûre à exposer
+    expect(body.settings.giteaUrl).toBeNull();
+  });
+
+  it('n’expose AUCUN secret (server_secret, clé privée VAPID)', async () => {
+    const res = await bundle.app.inject({ method: 'GET', url: '/api/v1/settings', headers: auth() });
+    const raw = res.body;
+    const secret = getSetting(db, 'server_secret');
+    const vapidPrivate = getSetting(db, 'vapid_private');
+    expect(secret).toBeTruthy();
+    expect(raw).not.toContain(secret as string);
+    expect(raw).not.toContain(vapidPrivate as string);
+    expect(raw).not.toMatch(/server_secret|vapid_private|privateKey/);
+  });
+});
+
+describe('PATCH /api/v1/settings', () => {
+  it('enregistre une URL Gitea valide et la renvoie', async () => {
+    const res = await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', headers: auth(), payload: { giteaUrl: 'https://git.lidge.fr' } });
+    expect(res.statusCode).toBe(200);
+    expect((res.json() as SettingsResponse).settings.giteaUrl).toBe('https://git.lidge.fr/');
+    // persisté
+    const get = await bundle.app.inject({ method: 'GET', url: '/api/v1/settings', headers: auth() });
+    expect((get.json() as SettingsResponse).settings.giteaUrl).toBe('https://git.lidge.fr/');
+  });
+
+  it('efface l’URL avec null ou chaîne vide', async () => {
+    await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', headers: auth(), payload: { giteaUrl: 'https://git.lidge.fr' } });
+    const res = await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', headers: auth(), payload: { giteaUrl: null } });
+    expect((res.json() as SettingsResponse).settings.giteaUrl).toBeNull();
+  });
+
+  it('rejette une URL non http(s) — anti-XSS (400)', async () => {
+    const res = await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', headers: auth(), payload: { giteaUrl: 'javascript:alert(1)' } });
+    expect(res.statusCode).toBe(400);
+    const notUrl = await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', headers: auth(), payload: { giteaUrl: 'pas une url' } });
+    expect(notUrl.statusCode).toBe(400);
+  });
+
+  it('ignore toute clé hors allow-list (ne touche pas aux secrets)', async () => {
+    const before = getSetting(db, 'server_secret');
+    await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', headers: auth(), payload: { server_secret: 'pwned', vapid_private: 'pwned' } });
+    expect(getSetting(db, 'server_secret')).toBe(before); // inchangé
+    expect(getSetting(db, 'vapid_private')).not.toBe('pwned');
+  });
+
+  it('sans authentification → 401', async () => {
+    const res = await bundle.app.inject({ method: 'PATCH', url: '/api/v1/settings', payload: { giteaUrl: 'https://x.example' } });
+    expect(res.statusCode).toBe(401);
+  });
+});

packages/shared/src/api.ts

@@ -14,10 +14,34 @@ export interface LoginResponse {
 }
 export interface MeResponse {
   ok: true;
+  /** id du token de la session courante — sert à marquer « courant » dans la liste des tokens. */
+  tokenId: string;
   tokenLabel: string;
   serverVersion: string;
 }
 
+// ---- Gestion des tokens d'accès (onglet Réglages) ----
+export interface TokenInfo {
+  id: string;
+  label: string;
+  createdAt: string;
+  lastUsedAt: string | null;
+  /** true pour le token de la session courante. */
+  current: boolean;
+}
+export interface TokensListResponse {
+  tokens: TokenInfo[];
+}
+export interface CreateTokenRequest {
+  label: string;
+}
+export interface CreateTokenResponse {
+  id: string;
+  label: string;
+  /** valeur en clair — affichée une seule fois, jamais re-récupérable. */
+  token: string;
+}
+
 export interface CreateSessionRequest {
   cwd: string;
   /** binaire à lancer — défaut "claude" ; "bash" sert aux tests d'acceptation sans quota */
@@ -146,3 +170,25 @@ export interface PushSubscribeRequest {
 export interface PushUnsubscribeRequest {
   endpoint: string;
 }
+
+// ---- Réglages & info serveur (onglet Réglages) ----
+/** Config runtime non sensible du daemon — lecture seule (changée via flags CLI + redémarrage). */
+export interface ServerInfo {
+  version: string;
+  port: number;
+  bind: string;
+  allowedOrigins: string[];
+  dataDir: string;
+  /** clé publique VAPID (sûre à exposer) ; null si push indisponible. */
+  vapidPublicKey: string | null;
+  vapidContact: string;
+}
+export interface SettingsResponse {
+  /** réglages modifiables à chaud (allow-list serveur — jamais les secrets). */
+  settings: { giteaUrl: string | null };
+  server: ServerInfo;
+}
+export interface UpdateSettingsRequest {
+  /** URL de l'instance Gitea (http/https) ; null ou '' pour effacer. */
+  giteaUrl?: string | null;
+}

packages/web/src/components/layout/AppShell.vue

@@ -23,6 +23,7 @@ import { onMounted, onUnmounted } from 'vue';
 import { useSessionsStore } from '../../stores/sessions';
 import { useWorktreesStore } from '../../stores/worktrees';
 import { useGroupsStore } from '../../stores/groups';
+import { useSettingsStore } from '../../stores/settings';
 import AppSidebar from './AppSidebar.vue';
 import MobileTabBar from './MobileTabBar.vue';
 
@@ -31,11 +32,14 @@ defineProps<{ fullbleed?: boolean }>();
 const sessions = useSessionsStore();
 const worktrees = useWorktreesStore();
 const groups = useGroupsStore();
+const settings = useSettingsStore();
 
 onMounted(() => {
   void worktrees.fetchAll();
   void sessions.fetchSessions();
   void groups.fetchGroups();
+  void settings.fetch(); // alimente l'icône de nav Gitea et la vue Réglages
+
   worktrees.startRealtime();
   sessions.startRealtime();
   groups.startRealtime();

packages/web/src/components/layout/AppSidebar.vue

@@ -15,7 +15,7 @@
     </button>
     <nav class="flex flex-1 flex-col gap-1 px-2">
       <NavItem
-        v-for="item in items"
+        v-for="item in primary"
         :key="item.key"
         :to="item.to"
         :icon="item.icon"
@@ -25,6 +25,19 @@
         orientation="row"
       />
     </nav>
+    <nav class="flex flex-col gap-1 px-2 pb-1">
+      <NavItem
+        v-for="item in secondary"
+        :key="item.key"
+        :to="item.to"
+        :href="item.href"
+        :icon="item.icon"
+        :label="item.label"
+        :badge="item.badge"
+        :active="isActive(item.match)"
+        orientation="row"
+      />
+    </nav>
     <div class="border-t border-zinc-800/80 p-3">
       <AppShellFooter />
     </div>
@@ -40,6 +53,6 @@ import NavItem from './NavItem.vue';
 import AppShellFooter from './AppShellFooter.vue';
 
 const { t } = useI18n();
-const { items, isActive } = useNav();
+const { primary, secondary, isActive } = useNav();
 const palette = useCommandPalette();
 </script>

packages/web/src/components/layout/MobileTabBar.vue

@@ -4,7 +4,7 @@
     style="padding-bottom: env(safe-area-inset-bottom)"
   >
     <NavItem
-      v-for="item in items"
+      v-for="item in primary"
       :key="item.key"
       :to="item.to"
       :icon="item.icon"
@@ -17,24 +17,27 @@
     <button
       type="button"
       class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500 transition-colors hover:text-zinc-300 focus-visible:outline-none"
+      :class="moreActive ? 'text-emerald-400' : ''"
       @click="showMore = true"
     >
-      <Settings :size="20" :stroke-width="1.75" />
+      <Menu :size="20" :stroke-width="1.75" />
-      <span class="text-[10px]">{{ t('nav.settings') }}</span>
+      <span class="text-[10px]">{{ t('nav.more') }}</span>
     </button>
     <MoreSheet v-if="showMore" @close="showMore = false" />
   </nav>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Settings } from '@lucide/vue';
+import { Menu } from '@lucide/vue';
 import { useNav } from '../../composables/useNav';
 import NavItem from './NavItem.vue';
 import MoreSheet from './MoreSheet.vue';
 
 const { t } = useI18n();
-const { items, isActive } = useNav();
+const { primary, secondary, isActive } = useNav();
 const showMore = ref(false);
+// « More » est actif quand la route courante appartient aux items secondaires (Réglages/Aide).
+const moreActive = computed(() => secondary.value.some((i) => isActive(i.match)));
 </script>

packages/web/src/components/layout/MoreSheet.vue

@@ -7,7 +7,22 @@
         style="padding-bottom: calc(1rem + env(safe-area-inset-bottom))"
       >
         <div class="mx-auto mb-3 h-1 w-10 rounded-full bg-zinc-700" />
+        <nav class="mb-3 flex flex-col gap-1">
+          <NavItem
+            v-for="item in secondary"
+            :key="item.key"
+            :to="item.to"
+            :href="item.href"
+            :icon="item.icon"
+            :label="item.label"
+            :active="isActive(item.match)"
+            orientation="row"
+            @click="emit('close')"
+          />
+        </nav>
+        <div class="border-t border-zinc-800/80 pt-3">
           <AppShellFooter />
+        </div>
         <BaseButton class="mt-3 w-full" @click="emit('close')">{{ t('common.close') }}</BaseButton>
       </div>
     </div>
@@ -16,9 +31,12 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
+import { useNav } from '../../composables/useNav';
+import NavItem from './NavItem.vue';
 import AppShellFooter from './AppShellFooter.vue';
 import BaseButton from '../ui/BaseButton.vue';
 
 const { t } = useI18n();
+const { secondary, isActive } = useNav();
 const emit = defineEmits<{ close: [] }>();
 </script>

packages/web/src/components/layout/NavItem.vue

@@ -1,7 +1,12 @@
 <template>
-  <RouterLink
+  <!-- RouterLink pour une route interne ; <a target=_blank> pour un lien externe (ex. Gitea). -->
-    :to="to"
+  <component
-    :aria-current="active ? 'page' : undefined"
+    :is="href ? 'a' : RouterLink"
+    :to="href ? undefined : to"
+    :href="href"
+    :target="href ? '_blank' : undefined"
+    :rel="href ? 'noopener noreferrer' : undefined"
+    :aria-current="!href && active ? 'page' : undefined"
     :class="orientation === 'col' ? colClass : rowClass"
   >
     <span class="relative">
@@ -20,16 +25,19 @@
     >
       {{ badge }}
     </span>
-  </RouterLink>
+  </component>
 </template>
 
 <script setup lang="ts">
 import { computed, type Component } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import { RouterLink, type RouteLocationRaw } from 'vue-router';
 
 const props = withDefaults(
   defineProps<{
-    to: RouteLocationRaw;
+    // `| undefined` requis par exactOptionalPropertyTypes : les items de nav passent `to`/`href`
+    // potentiellement undefined (l'un ou l'autre selon route interne vs lien externe).
+    to?: RouteLocationRaw | undefined;
+    href?: string | undefined;
     icon: Component;
     label: string;
     badge?: number;

packages/web/src/components/settings/ServerRow.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- Ligne de config serveur en lecture seule : label + valeur (+ flag CLI) + copier. -->
+  <div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 py-2">
+    <dt class="w-40 shrink-0 text-sm text-zinc-400">{{ label }}</dt>
+    <dd class="flex min-w-0 flex-1 items-center gap-2">
+      <span :class="['min-w-0 flex-1 break-all text-sm text-zinc-200', mono ? 'font-mono text-xs' : '']">{{ value }}</span>
+      <span v-if="flag" class="hidden shrink-0 font-mono text-[11px] text-zinc-600 sm:inline" :title="t('settings.flagHint', { flag })">{{ flag }}</span>
+      <BaseButton size="sm" variant="ghost" icon-only :icon="copied ? Check : Copy" :aria-label="t('settings.copy')" @click="copy" />
+    </dd>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Check, Copy } from '@lucide/vue';
+import BaseButton from '../ui/BaseButton.vue';
+
+const props = defineProps<{ label: string; value: string; flag?: string; mono?: boolean }>();
+const { t } = useI18n();
+
+const copied = ref(false);
+// Auto-contenu : on ne confirme (✓) qu'après la résolution réelle de l'écriture presse-papiers.
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(props.value);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1500);
+  } catch {
+    /* presse-papiers indisponible (http non sécurisé) : silencieux */
+  }
+}
+</script>

packages/web/src/components/ui/GiteaIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <!-- Lucide n'a pas d'icône Gitea : motif « tasse de thé fumante » (git + tea), trait cohérent
+       avec les icônes Lucide (currentColor, coins arrondis). stroke-width hérité via fallthrough. -->
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <!-- vapeur = mini-branche git -->
+    <path d="M9 5.5V4" />
+    <path d="M13 5.5V3" />
+    <circle cx="9" cy="3" r="0.6" fill="currentColor" stroke="none" />
+    <circle cx="13" cy="2.5" r="0.6" fill="currentColor" stroke="none" />
+    <!-- tasse -->
+    <path d="M4 8h12v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z" />
+    <!-- anse -->
+    <path d="M16 9h1.5a2.5 2.5 0 0 1 0 5H16" />
+    <!-- soucoupe -->
+    <path d="M5 20h10" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{ size?: number }>(), { size: 18 });
+</script>

packages/web/src/composables/useNav.ts

@@ -1,12 +1,17 @@
 import { computed, type Component } from 'vue';
 import { useRoute, type RouteLocationRaw } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { GitBranch, TerminalSquare, Boxes } from '@lucide/vue';
+import { Boxes, GitBranch, LifeBuoy, Settings, TerminalSquare } from '@lucide/vue';
 import { useSessionsStore } from '../stores/sessions';
+import { useSettingsStore } from '../stores/settings';
+import GiteaIcon from '../components/ui/GiteaIcon.vue';
 
 export interface NavEntry {
   key: string;
-  to: RouteLocationRaw;
+  /** route interne (exclusif avec `href`). */
+  to?: RouteLocationRaw;
+  /** lien externe ouvert dans un nouvel onglet (exclusif avec `to`). */
+  href?: string;
   icon: Component;
   label: string;
   match: string[]; // noms de routes considérés actifs pour cet item
@@ -18,19 +23,33 @@ export function useNav() {
   const { t } = useI18n();
   const route = useRoute();
   const sessions = useSessionsStore();
+  const settings = useSettingsStore();
 
   // sessions vivantes bloquées sur un dialogue (le cœur de la supervision mobile).
   const waitingCount = computed(
     () => sessions.sessions.filter((s) => s.live && s.activity === 'waiting').length,
   );
 
-  const items = computed<NavEntry[]>(() => [
+  // Onglets principaux : barre du bas mobile + haut de sidebar.
+  const primary = computed<NavEntry[]>(() => [
     { key: 'worktrees', to: { name: 'dashboard' }, icon: GitBranch, label: t('nav.worktrees'), match: ['dashboard'], badge: 0 },
     { key: 'sessions', to: { name: 'sessions' }, icon: TerminalSquare, label: t('nav.sessions'), match: ['sessions', 'session'], badge: waitingCount.value },
     { key: 'groups', to: { name: 'groups' }, icon: Boxes, label: t('nav.groups'), match: ['groups', 'group'], badge: 0 },
   ]);
 
+  // Onglets secondaires : réglages, aide, et lien externe Gitea (uniquement si l'URL est configurée).
+  const secondary = computed<NavEntry[]>(() => {
+    const items: NavEntry[] = [
+      { key: 'settings', to: { name: 'settings' }, icon: Settings, label: t('nav.settings'), match: ['settings'], badge: 0 },
+      { key: 'help', to: { name: 'help' }, icon: LifeBuoy, label: t('nav.help'), match: ['help'], badge: 0 },
+    ];
+    if (settings.giteaUrl) {
+      items.push({ key: 'gitea', href: settings.giteaUrl, icon: GiteaIcon, label: t('nav.gitea'), match: [], badge: 0 });
+    }
+    return items;
+  });
+
   const isActive = (match: string[]): boolean => match.includes(String(route.name));
 
-  return { items, isActive, waitingCount };
+  return { primary, secondary, isActive, waitingCount };
 }

packages/web/src/i18n/en.ts

@@ -174,6 +174,9 @@ export default {
     sessions: 'Sessions',
     groups: 'Groups',
     settings: 'Settings',
+    help: 'Help',
+    more: 'More',
+    gitea: 'Open Gitea',
     waiting: 'waiting',
   },
   controls: {
@@ -292,4 +295,64 @@ export default {
     count: 'no session waiting | 1 session waiting | {n} sessions waiting',
     empty: 'Nothing waiting',
   },
+  settings: {
+    title: 'Settings',
+    // Préférences
+    preferences: 'Preferences',
+    preferencesHint: 'These apply to this browser only.',
+    language: 'Language',
+    notifications: 'Notifications',
+    notificationsEnabled: 'Enabled — you will be notified when a session needs input.',
+    notificationsDisabled: 'Disabled.',
+    enableNotifications: 'Enable notifications',
+    disableNotifications: 'Disable notifications',
+    testNotification: 'Send a test',
+    testSent: 'Test notification sent',
+    pushUnsupported: 'Push needs HTTPS (e.g. Tailscale Serve); on iOS, install the app to your home screen first.',
+    // Accès & sécurité
+    security: 'Access & security',
+    securityHint: 'Tokens grant full access to this server. Create one per device and revoke any you no longer use.',
+    tokens: 'Access tokens',
+    newTokenLabel: 'Label',
+    newTokenPlaceholder: 'e.g. phone, laptop',
+    createToken: 'Create token',
+    tokenCreated: 'Token created',
+    copyTokenHint: 'Copy this token now — for security it will never be shown again.',
+    copy: 'Copy',
+    copied: 'Copied',
+    current: 'current',
+    created: 'Created {date}',
+    lastUsed: 'last used {date}',
+    neverUsed: 'never used',
+    revoke: 'Revoke',
+    confirmRevoke: 'Confirm revoke',
+    tokenRevoked: 'Token revoked',
+    lastTokenError: 'You cannot revoke the last active token — create another one first.',
+    // Intégrations
+    integrations: 'Integrations',
+    gitea: 'Gitea',
+    giteaUrlLabel: 'Gitea instance URL',
+    giteaUrlPlaceholder: 'https://git.example.com',
+    giteaUrlHint: 'Adds a shortcut icon to the navigation. Leave empty to hide it.',
+    save: 'Save',
+    saved: 'Saved',
+    // Serveur (lecture seule)
+    server: 'Server',
+    serverHint: 'Set at startup via CLI flags — changing them requires restarting the daemon.',
+    version: 'Version',
+    port: 'Port',
+    bind: 'Bind address',
+    allowedOrigins: 'Allowed origins',
+    dataDir: 'Data directory',
+    vapidPublicKey: 'VAPID public key',
+    vapidContact: 'VAPID contact',
+    none: 'none',
+    flagHint: 'CLI flag: {flag}',
+  },
+  help: {
+    title: 'Help',
+    intro: 'Everything Arboretum can do, and how to use it.',
+    searchPlaceholder: 'Search help…',
+    noMatch: 'No matching topic',
+  },
 };

packages/web/src/i18n/fr.ts

@@ -177,6 +177,9 @@ const fr: typeof en = {
     sessions: 'Sessions',
     groups: 'Groupes',
     settings: 'Réglages',
+    help: 'Aide',
+    more: 'Plus',
+    gitea: 'Ouvrir Gitea',
     waiting: 'en attente',
   },
   controls: {
@@ -295,6 +298,66 @@ const fr: typeof en = {
     count: 'aucune session en attente | 1 session en attente | {n} sessions en attente',
     empty: 'Rien à traiter',
   },
+  settings: {
+    title: 'Réglages',
+    // Préférences
+    preferences: 'Préférences',
+    preferencesHint: 'Ces réglages ne s’appliquent qu’à ce navigateur.',
+    language: 'Langue',
+    notifications: 'Notifications',
+    notificationsEnabled: 'Activées — vous serez notifié lorsqu’une session attend une réponse.',
+    notificationsDisabled: 'Désactivées.',
+    enableNotifications: 'Activer les notifications',
+    disableNotifications: 'Désactiver les notifications',
+    testNotification: 'Envoyer un test',
+    testSent: 'Notification de test envoyée',
+    pushUnsupported: 'Le push exige HTTPS (ex. Tailscale Serve) ; sur iOS, installez d’abord l’app sur l’écran d’accueil.',
+    // Accès & sécurité
+    security: 'Accès & sécurité',
+    securityHint: 'Les jetons donnent un accès complet à ce serveur. Créez-en un par appareil et révoquez ceux que vous n’utilisez plus.',
+    tokens: 'Jetons d’accès',
+    newTokenLabel: 'Libellé',
+    newTokenPlaceholder: 'ex. téléphone, portable',
+    createToken: 'Créer un jeton',
+    tokenCreated: 'Jeton créé',
+    copyTokenHint: 'Copiez ce jeton maintenant — par sécurité il ne sera plus jamais affiché.',
+    copy: 'Copier',
+    copied: 'Copié',
+    current: 'courant',
+    created: 'Créé le {date}',
+    lastUsed: 'utilisé le {date}',
+    neverUsed: 'jamais utilisé',
+    revoke: 'Révoquer',
+    confirmRevoke: 'Confirmer la révocation',
+    tokenRevoked: 'Jeton révoqué',
+    lastTokenError: 'Impossible de révoquer le dernier jeton actif — créez-en un autre d’abord.',
+    // Intégrations
+    integrations: 'Intégrations',
+    gitea: 'Gitea',
+    giteaUrlLabel: 'URL de l’instance Gitea',
+    giteaUrlPlaceholder: 'https://git.exemple.com',
+    giteaUrlHint: 'Ajoute une icône de raccourci dans la navigation. Laissez vide pour la masquer.',
+    save: 'Enregistrer',
+    saved: 'Enregistré',
+    // Serveur (lecture seule)
+    server: 'Serveur',
+    serverHint: 'Définis au démarrage via des flags CLI — les modifier nécessite de redémarrer le daemon.',
+    version: 'Version',
+    port: 'Port',
+    bind: 'Adresse de liaison',
+    allowedOrigins: 'Origines autorisées',
+    dataDir: 'Répertoire de données',
+    vapidPublicKey: 'Clé publique VAPID',
+    vapidContact: 'Contact VAPID',
+    none: 'aucune',
+    flagHint: 'Flag CLI : {flag}',
+  },
+  help: {
+    title: 'Aide',
+    intro: 'Tout ce qu’Arboretum sait faire, et comment l’utiliser.',
+    searchPlaceholder: 'Rechercher dans l’aide…',
+    noMatch: 'Aucun sujet correspondant',
+  },
 };
 
 export default fr;

packages/web/src/router/index.ts

@@ -18,6 +18,8 @@ export const router = createRouter({
     { path: '/sessions/:id', name: 'session', component: () => import('../views/SessionView.vue'), meta: { layout: 'fullbleed' } },
     { path: '/groups', name: 'groups', component: () => import('../views/GroupsListView.vue'), meta: { layout: 'shell' } },
     { path: '/groups/:id', name: 'group', component: () => import('../views/GroupView.vue'), meta: { layout: 'shell' } },
+    { path: '/settings', name: 'settings', component: () => import('../views/SettingsView.vue'), meta: { layout: 'shell' } },
+    { path: '/help', name: 'help', component: () => import('../views/HelpView.vue'), meta: { layout: 'shell' } },
     { path: '/:pathMatch(.*)*', redirect: '/' },
   ],
 });

packages/web/src/stores/settings.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { ServerInfo, SettingsResponse, UpdateSettingsRequest } from '@arboretum/shared';
+import { api } from '../lib/api';
+
+// Réglages serveur + intégrations. `giteaUrl` alimente l'item de nav Gitea (affiché si défini).
+// Les préférences purement client (langue) restent gérées par l'i18n/localStorage.
+export const useSettingsStore = defineStore('settings', () => {
+  const server = ref<ServerInfo | null>(null);
+  const giteaUrl = ref<string | null>(null);
+  const loaded = ref(false);
+  const saving = ref(false);
+
+  function apply(res: SettingsResponse): void {
+    server.value = res.server;
+    giteaUrl.value = res.settings.giteaUrl;
+    loaded.value = true;
+  }
+
+  async function fetch(): Promise<void> {
+    apply(await api.get<SettingsResponse>('/api/v1/settings'));
+  }
+
+  async function save(patch: UpdateSettingsRequest): Promise<void> {
+    saving.value = true;
+    try {
+      apply(await api.patch<SettingsResponse>('/api/v1/settings', patch));
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  return { server, giteaUrl, loaded, saving, fetch, save };
+});

packages/web/src/views/HelpView.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <PageHeader :title="t('help.title')">
+      <template #search>
+        <div class="relative">
+          <Search :size="15" class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-500" />
+          <input v-model="query" class="input pl-8" :placeholder="t('help.searchPlaceholder')" />
+        </div>
+      </template>
+    </PageHeader>
+    <p class="text-sm text-zinc-400">{{ t('help.intro') }}</p>
+
+    <section v-for="section in filtered" :key="section.id" class="card flex flex-col gap-3">
+      <header class="flex items-center gap-2">
+        <component :is="iconFor(section.id)" :size="18" class="text-emerald-400" :stroke-width="1.75" />
+        <h2 class="text-sm font-semibold text-zinc-100">{{ section.title }}</h2>
+      </header>
+      <p class="text-xs text-zinc-500">{{ section.blurb }}</p>
+      <dl class="flex flex-col gap-2">
+        <div v-for="(item, i) in section.items" :key="i" class="card-inset">
+          <dt class="text-sm font-medium text-zinc-200">{{ item.title }}</dt>
+          <dd class="mt-0.5 text-sm leading-relaxed text-zinc-400">{{ item.body }}</dd>
+        </div>
+      </dl>
+    </section>
+
+    <EmptyState v-if="!filtered.length" :icon="SearchX" :title="t('help.noMatch')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type Component } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Boxes, Command, GitBranch, KeyRound, Puzzle, Search, SearchX, Settings, Smartphone, TerminalSquare } from '@lucide/vue';
+import type { AppLocale } from '../i18n';
+import { helpSections, type HelpSection } from './help-content';
+import PageHeader from '../components/layout/PageHeader.vue';
+import EmptyState from '../components/ui/EmptyState.vue';
+
+const { t, locale } = useI18n();
+const query = ref('');
+
+const ICONS: Record<string, Component> = {
+  gettingStarted: KeyRound,
+  worktrees: GitBranch,
+  sessions: TerminalSquare,
+  mobile: Smartphone,
+  groups: Boxes,
+  productivity: Command,
+  settings: Settings,
+  integrations: Puzzle,
+};
+const iconFor = (id: string): Component => ICONS[id] ?? KeyRound;
+
+const sections = computed<HelpSection[]>(() => helpSections[locale.value as AppLocale] ?? helpSections.en);
+
+const filtered = computed<HelpSection[]>(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return sections.value;
+  return sections.value
+    .map((s) => {
+      const sectionMatches = (s.title + ' ' + s.blurb).toLowerCase().includes(q);
+      const items = sectionMatches ? s.items : s.items.filter((it) => (it.title + ' ' + it.body).toLowerCase().includes(q));
+      return items.length ? { ...s, items } : null;
+    })
+    .filter((s): s is HelpSection => s !== null);
+});
+</script>

packages/web/src/views/SettingsView.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <PageHeader :title="t('settings.title')" />
+
+    <!-- Préférences (client) -->
+    <section class="card flex flex-col gap-3">
+      <h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+        <SlidersHorizontal :size="16" /> {{ t('settings.preferences') }}
+      </h2>
+      <p class="text-xs text-zinc-500">{{ t('settings.preferencesHint') }}</p>
+
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-sm text-zinc-300">{{ t('settings.language') }}</span>
+        <LanguageSwitcher />
+      </div>
+
+      <div class="flex flex-col gap-2 border-t border-zinc-800/80 pt-3">
+        <div class="flex items-center justify-between gap-3">
+          <div class="min-w-0">
+            <p class="text-sm text-zinc-300">{{ t('settings.notifications') }}</p>
+            <p class="text-xs text-zinc-500">
+              {{ push.supported ? (push.enabled ? t('settings.notificationsEnabled') : t('settings.notificationsDisabled')) : t('settings.pushUnsupported') }}
+            </p>
+          </div>
+          <BaseButton
+            v-if="push.supported"
+            :variant="push.enabled ? 'secondary' : 'primary'"
+            size="sm"
+            :icon="push.enabled ? BellOff : Bell"
+            :loading="push.busy"
+            @click="push.toggle()"
+          >
+            {{ push.enabled ? t('settings.disableNotifications') : t('settings.enableNotifications') }}
+          </BaseButton>
+        </div>
+        <div v-if="push.enabled">
+          <BaseButton variant="ghost" size="sm" :icon="Send" :loading="testing" @click="sendTest">
+            {{ t('settings.testNotification') }}
+          </BaseButton>
+        </div>
+      </div>
+    </section>
+
+    <!-- Accès & sécurité : tokens -->
+    <section class="card flex flex-col gap-3">
+      <h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+        <Shield :size="16" /> {{ t('settings.security') }}
+      </h2>
+      <p class="text-xs text-zinc-500">{{ t('settings.securityHint') }}</p>
+
+      <!-- Création -->
+      <form class="flex flex-wrap items-end gap-2" @submit.prevent="createToken">
+        <label class="flex min-w-40 flex-1 flex-col gap-1">
+          <span class="text-xs text-zinc-400">{{ t('settings.newTokenLabel') }}</span>
+          <input v-model="newLabel" class="input" :placeholder="t('settings.newTokenPlaceholder')" maxlength="64" />
+        </label>
+        <BaseButton type="submit" variant="primary" :icon="Plus" :loading="creating" :disabled="!newLabel.trim()">
+          {{ t('settings.createToken') }}
+        </BaseButton>
+      </form>
+
+      <!-- Valeur en clair (une seule fois) -->
+      <div v-if="createdToken" class="card-inset flex flex-col gap-2 border-emerald-800/60 bg-emerald-950/20">
+        <p class="text-xs text-emerald-300">{{ t('settings.copyTokenHint') }}</p>
+        <div class="flex items-center gap-2">
+          <code class="min-w-0 flex-1 truncate rounded bg-zinc-950 px-2 py-1 font-mono text-xs text-zinc-100">{{ createdToken.token }}</code>
+          <BaseButton size="sm" :icon="copiedNew ? Check : Copy" @click="copy(createdToken.token, 'new')">
+            {{ copiedNew ? t('settings.copied') : t('settings.copy') }}
+          </BaseButton>
+          <BaseButton size="sm" variant="ghost" icon-only :icon="X" :aria-label="t('common.close')" @click="createdToken = null" />
+        </div>
+      </div>
+
+      <!-- Liste -->
+      <ul class="flex flex-col gap-2">
+        <li
+          v-for="tok in tokens"
+          :key="tok.id"
+          class="card-inset flex flex-wrap items-center gap-x-3 gap-y-1"
+        >
+          <KeyRound :size="15" class="shrink-0 text-zinc-500" />
+          <div class="min-w-0 flex-1">
+            <p class="flex items-center gap-2 truncate text-sm text-zinc-200">
+              {{ tok.label }}
+              <span v-if="tok.current" class="badge bg-emerald-500/15 text-emerald-300">{{ t('settings.current') }}</span>
+            </p>
+            <p class="text-[11px] text-zinc-500">
+              {{ t('settings.created', { date: fmt(tok.createdAt) }) }} ·
+              {{ tok.lastUsedAt ? t('settings.lastUsed', { date: fmt(tok.lastUsedAt) }) : t('settings.neverUsed') }}
+            </p>
+          </div>
+          <BaseButton
+            v-if="!tok.current"
+            size="sm"
+            :variant="confirmId === tok.id ? 'danger' : 'ghost'"
+            :icon="Trash2"
+            @click="revoke(tok)"
+          >
+            {{ confirmId === tok.id ? t('settings.confirmRevoke') : t('settings.revoke') }}
+          </BaseButton>
+        </li>
+      </ul>
+    </section>
+
+    <!-- Intégrations : Gitea -->
+    <section class="card flex flex-col gap-3">
+      <h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+        <Puzzle :size="16" /> {{ t('settings.integrations') }}
+      </h2>
+      <form class="flex flex-col gap-2" @submit.prevent="saveGitea">
+        <label class="flex flex-col gap-1">
+          <span class="text-xs text-zinc-400">{{ t('settings.giteaUrlLabel') }}</span>
+          <div class="flex flex-wrap items-center gap-2">
+            <input v-model="giteaInput" type="url" class="input min-w-48 flex-1" :placeholder="t('settings.giteaUrlPlaceholder')" />
+            <BaseButton type="submit" variant="primary" :loading="settings.saving" :disabled="!giteaDirty">
+              {{ t('settings.save') }}
+            </BaseButton>
+          </div>
+        </label>
+        <p class="text-xs text-zinc-500">{{ t('settings.giteaUrlHint') }}</p>
+      </form>
+    </section>
+
+    <!-- Serveur (lecture seule) -->
+    <section class="card flex flex-col gap-3">
+      <h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+        <Server :size="16" /> {{ t('settings.server') }}
+      </h2>
+      <p class="text-xs text-zinc-500">{{ t('settings.serverHint') }}</p>
+      <dl v-if="settings.server" class="flex flex-col divide-y divide-zinc-800/80">
+        <ServerRow :label="t('settings.version')" :value="settings.server.version" />
+        <ServerRow :label="t('settings.port')" :value="String(settings.server.port)" flag="--port" />
+        <ServerRow :label="t('settings.bind')" :value="settings.server.bind" flag="--bind" />
+        <ServerRow
+          :label="t('settings.allowedOrigins')"
+          :value="settings.server.allowedOrigins.length ? settings.server.allowedOrigins.join(', ') : t('settings.none')"
+          flag="--allow-origin"
+        />
+        <ServerRow :label="t('settings.dataDir')" :value="settings.server.dataDir" />
+        <ServerRow :label="t('settings.vapidContact')" :value="settings.server.vapidContact" flag="--vapid-contact" />
+        <ServerRow :label="t('settings.vapidPublicKey')" :value="settings.server.vapidPublicKey ?? t('settings.none')" mono />
+      </dl>
+      <SkeletonRow v-else />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Bell, BellOff, Check, Copy, KeyRound, Plus, Puzzle, Send, Server, Shield, SlidersHorizontal, Trash2, X } from '@lucide/vue';
+import type { CreateTokenResponse, TokenInfo, TokensListResponse } from '@arboretum/shared';
+import { api, ApiError } from '../lib/api';
+import { useSettingsStore } from '../stores/settings';
+import { usePushStore } from '../stores/push';
+import { useToastsStore } from '../stores/toasts';
+import PageHeader from '../components/layout/PageHeader.vue';
+import LanguageSwitcher from '../components/LanguageSwitcher.vue';
+import BaseButton from '../components/ui/BaseButton.vue';
+import SkeletonRow from '../components/ui/SkeletonRow.vue';
+import ServerRow from '../components/settings/ServerRow.vue';
+
+const { t, locale } = useI18n();
+const settings = useSettingsStore();
+const push = usePushStore();
+const toasts = useToastsStore();
+
+// ---- Préférences ----
+const testing = ref(false);
+async function sendTest(): Promise<void> {
+  testing.value = true;
+  try {
+    await api.post('/api/v1/push/test');
+    toasts.success(t('settings.testSent'));
+  } catch (e) {
+    toasts.error(e);
+  } finally {
+    testing.value = false;
+  }
+}
+
+// ---- Tokens ----
+const tokens = ref<TokenInfo[]>([]);
+const newLabel = ref('');
+const creating = ref(false);
+const createdToken = ref<CreateTokenResponse | null>(null);
+const confirmId = ref<string | null>(null);
+const copiedNew = ref(false);
+
+const fmt = (iso: string): string => new Date(iso).toLocaleString(locale.value);
+
+async function loadTokens(): Promise<void> {
+  tokens.value = (await api.get<TokensListResponse>('/api/v1/auth/tokens')).tokens;
+}
+
+async function createToken(): Promise<void> {
+  const label = newLabel.value.trim();
+  if (!label) return;
+  creating.value = true;
+  try {
+    createdToken.value = await api.post<CreateTokenResponse>('/api/v1/auth/tokens', { label });
+    newLabel.value = '';
+    toasts.success(t('settings.tokenCreated'));
+    await loadTokens();
+  } catch (e) {
+    toasts.error(e);
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function revoke(tok: TokenInfo): Promise<void> {
+  if (confirmId.value !== tok.id) {
+    confirmId.value = tok.id;
+    return;
+  }
+  confirmId.value = null;
+  try {
+    await api.delete(`/api/v1/auth/tokens/${tok.id}`);
+    toasts.success(t('settings.tokenRevoked'));
+    await loadTokens();
+  } catch (e) {
+    toasts.error(e instanceof ApiError && e.code === 'LAST_TOKEN' ? t('settings.lastTokenError') : e);
+  }
+}
+
+async function copy(text: string, target?: 'new'): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text);
+    if (target === 'new') {
+      copiedNew.value = true;
+      setTimeout(() => (copiedNew.value = false), 1500);
+    }
+  } catch {
+    /* presse-papiers indisponible (http non sécurisé) : silencieux */
+  }
+}
+
+// ---- Gitea ----
+const giteaInput = ref('');
+const giteaDirty = computed(() => giteaInput.value.trim() !== (settings.giteaUrl ?? ''));
+async function saveGitea(): Promise<void> {
+  try {
+    await settings.save({ giteaUrl: giteaInput.value.trim() || null });
+    giteaInput.value = settings.giteaUrl ?? '';
+    toasts.success(t('settings.saved'));
+  } catch (e) {
+    toasts.error(e);
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([loadTokens(), settings.loaded ? Promise.resolve() : settings.fetch()]);
+  giteaInput.value = settings.giteaUrl ?? '';
+  void push.refresh();
+});
+</script>

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

@@ -0,0 +1,352 @@
+// Contenu de l'onglet Aide, bilingue. Texte long-format → gardé hors des fichiers i18n
+// (en.ts/fr.ts) pour ne pas les alourdir. HelpView mappe chaque `id` vers une icône Lucide.
+import type { AppLocale } from '../i18n';
+
+export interface HelpItem {
+  title: string;
+  body: string;
+}
+export interface HelpSection {
+  id: string;
+  title: string;
+  blurb: string;
+  items: HelpItem[];
+}
+
+const en: HelpSection[] = [
+  {
+    id: 'gettingStarted',
+    title: 'Getting started & access',
+    blurb:
+      'Arboretum is a single daemon that serves this dashboard to drive your git worktrees and the Claude Code sessions running on them, from any device.',
+    items: [
+      {
+        title: 'Sign in with a token',
+        body: 'On first start the daemon prints a one-time access token. Paste it on the login screen. You can create extra tokens (one per device) and revoke old ones in Settings → Access & security.',
+      },
+      {
+        title: 'Remote access via Tailscale Serve',
+        body: 'The daemon binds to 127.0.0.1. To reach it from your phone, run tailscale serve --bg 7317 and start Arboretum with --allow-origin https://<machine>.<tailnet>.ts.net. The HTTPS that Tailscale provides is also what makes Web Push work.',
+      },
+      {
+        title: 'Install as an app (PWA)',
+        body: 'On mobile, open Arboretum and choose Add to Home Screen. On iOS this install step is required before notifications can work.',
+      },
+    ],
+  },
+  {
+    id: 'worktrees',
+    title: 'Repositories & worktrees',
+    blurb: 'Register your git repos, then spin up an isolated worktree per branch — each can auto-start a session.',
+    items: [
+      {
+        title: 'Add a repository',
+        body: 'On the Worktrees page, type or browse to the absolute path of a git repo and add it. Per-repo post-create hooks (e.g. npm ci) run automatically on new worktrees.',
+      },
+      {
+        title: 'Create a worktree',
+        body: 'In a repo section, click New worktree, enter a branch (optionally create it), and optionally start a claude or bash session in it. Hooks run automatically.',
+      },
+      {
+        title: 'Read worktree state',
+        body: 'Each card shows the branch, ahead/behind counts, dirty file count and flags (main, locked, prunable), plus the live state of any linked session.',
+      },
+      {
+        title: 'Delete & prune',
+        body: 'Delete a worktree from its card (force-delete if dirty or locked), or prune all orphaned worktrees at the repo level.',
+      },
+    ],
+  },
+  {
+    id: 'sessions',
+    title: 'Sessions & the web terminal',
+    blurb: 'Run, observe, resume and answer Claude Code (or bash) sessions in a full xterm terminal, right in the browser.',
+    items: [
+      {
+        title: 'Start a session',
+        body: 'On the Sessions page, set a working directory and a command (claude or bash) and launch. Open it to get an interactive terminal.',
+      },
+      {
+        title: 'Discovered sessions',
+        body: 'Sessions you start in your own terminal are detected automatically and tagged as discovered. Observe them read-only, or resume/fork them once stopped.',
+      },
+      {
+        title: 'Resume & fork',
+        body: 'Resume restarts a stopped session in its original working directory, with full scrollback replayed. Fork creates a fresh independent copy with the same command and cwd.',
+      },
+      {
+        title: 'Observe vs interact',
+        body: 'Anyone opening a live session can type; open it as an observer for read-only monitoring that never slows the session down.',
+      },
+      {
+        title: 'Fine-grained state',
+        body: 'Managed Claude sessions report waiting / busy / idle in real time. Waiting sessions are surfaced first and can trigger notifications.',
+      },
+      {
+        title: 'Kill a session',
+        body: 'Kill a live session from its row (confirm to avoid accidents); it receives SIGTERM, then SIGKILL after a short grace delay.',
+      },
+    ],
+  },
+  {
+    id: 'mobile',
+    title: 'Mobile supervision',
+    blurb: 'Keep sessions moving from your phone, without opening a terminal.',
+    items: [
+      {
+        title: 'Needs attention',
+        body: 'A banner at the top of the dashboard lists every session blocked on a dialog, with inline answer buttons.',
+      },
+      {
+        title: 'Answer dialogs',
+        body: 'When Claude asks for trust, a permission or a choice, pick an option (or Deny) right from the card — no terminal needed.',
+      },
+      {
+        title: 'Web Push notifications',
+        body: 'Enable notifications in Settings (or the footer bell). You get a push when a session starts waiting; tap it to answer. Requires HTTPS; on iOS, install the app first.',
+      },
+    ],
+  },
+  {
+    id: 'groups',
+    title: 'Work groups',
+    blurb: 'Bundle related repos (API, web, shared lib…) and operate on them together.',
+    items: [
+      {
+        title: 'Create a group',
+        body: 'On the Groups page, name a group and pick its repos. Membership is lightweight and editable anytime.',
+      },
+      {
+        title: 'List vs terminal grid',
+        body: 'A group view shows all its repos worktrees and sessions as a list, or switch to the terminal grid to watch several live sessions side by side.',
+      },
+      {
+        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.',
+      },
+    ],
+  },
+  {
+    id: 'productivity',
+    title: 'Productivity',
+    blurb: 'Find anything fast and tailor each list.',
+    items: [
+      {
+        title: 'Command palette',
+        body: 'Press ⌘K (or Ctrl+K) to fuzzy-jump to any repo, worktree, session or group, or to run a quick action.',
+      },
+      {
+        title: 'Sort, filter & search',
+        body: 'Every list has a toolbar to sort, filter (state, command, source, flags…) and search. Your choices persist in the URL, so links are shareable.',
+      },
+      {
+        title: 'Pagination',
+        body: 'Long lists are paginated with a configurable page size; choose All to show everything at once.',
+      },
+      {
+        title: 'Language',
+        body: 'Switch the interface between English and French anytime, from Settings or the footer.',
+      },
+    ],
+  },
+  {
+    id: 'settings',
+    title: 'Settings & security',
+    blurb: 'Configure the app and manage who can reach the daemon.',
+    items: [
+      {
+        title: 'Notifications',
+        body: 'Enable or disable Web Push and send a test notification from Settings → Preferences.',
+      },
+      {
+        title: 'Access tokens',
+        body: 'Create a token per device and revoke any you no longer trust. A new token value is shown only once — copy it immediately. The last active token cannot be revoked, to avoid locking yourself out.',
+      },
+      {
+        title: 'Server info',
+        body: 'Settings → Server shows the running version and the startup configuration (port, bind, allowed origins, data directory, VAPID). These are set via CLI flags and need a daemon restart to change.',
+      },
+    ],
+  },
+  {
+    id: 'integrations',
+    title: 'Integrations',
+    blurb: 'Shortcuts to the tools around your repos.',
+    items: [
+      {
+        title: 'Gitea',
+        body: 'Set your Gitea instance URL in Settings → Integrations to add a one-click Gitea icon to the navigation. Leave it empty to hide the icon.',
+      },
+    ],
+  },
+];
+
+const fr: HelpSection[] = [
+  {
+    id: 'gettingStarted',
+    title: 'Prise en main & accès',
+    blurb:
+      'Arboretum est un daemon unique qui sert ce dashboard pour piloter vos worktrees git et les sessions Claude Code qui tournent dessus, depuis n’importe quel appareil.',
+    items: [
+      {
+        title: 'Se connecter avec un jeton',
+        body: 'Au premier démarrage, le daemon affiche un jeton d’accès à usage unique. Collez-le sur l’écran de connexion. Vous pouvez créer des jetons supplémentaires (un par appareil) et révoquer les anciens dans Réglages → Accès & sécurité.',
+      },
+      {
+        title: 'Accès distant via Tailscale Serve',
+        body: 'Le daemon écoute sur 127.0.0.1. Pour y accéder depuis votre téléphone, lancez tailscale serve --bg 7317 et démarrez Arboretum avec --allow-origin https://<machine>.<tailnet>.ts.net. Le HTTPS fourni par Tailscale est aussi ce qui permet au Web Push de fonctionner.',
+      },
+      {
+        title: 'Installer comme une app (PWA)',
+        body: 'Sur mobile, ouvrez Arboretum et choisissez Ajouter à l’écran d’accueil. Sur iOS, cette installation est requise avant que les notifications puissent fonctionner.',
+      },
+    ],
+  },
+  {
+    id: 'worktrees',
+    title: 'Dépôts & worktrees',
+    blurb: 'Enregistrez vos dépôts git, puis créez un worktree isolé par branche — chacun peut démarrer une session automatiquement.',
+    items: [
+      {
+        title: 'Ajouter un dépôt',
+        body: 'Sur la page Worktrees, saisissez (ou parcourez) le chemin absolu d’un dépôt git et ajoutez-le. Les hooks post-création par dépôt (ex. npm ci) s’exécutent automatiquement sur les nouveaux worktrees.',
+      },
+      {
+        title: 'Créer un worktree',
+        body: 'Dans une section de dépôt, cliquez sur Nouveau worktree, saisissez une branche (à créer éventuellement) et démarrez si besoin une session claude ou bash. Les hooks s’exécutent automatiquement.',
+      },
+      {
+        title: 'Lire l’état d’un worktree',
+        body: 'Chaque carte affiche la branche, l’avance/le retard, le nombre de fichiers modifiés et des indicateurs (main, verrouillé, élagable), ainsi que l’état en direct de la session liée.',
+      },
+      {
+        title: 'Supprimer & élaguer',
+        body: 'Supprimez un worktree depuis sa carte (suppression forcée s’il est sale ou verrouillé), ou élaguez tous les worktrees orphelins au niveau du dépôt.',
+      },
+    ],
+  },
+  {
+    id: 'sessions',
+    title: 'Sessions & terminal web',
+    blurb: 'Lancez, observez, reprenez et répondez aux sessions Claude Code (ou bash) dans un vrai terminal xterm, directement dans le navigateur.',
+    items: [
+      {
+        title: 'Démarrer une session',
+        body: 'Sur la page Sessions, indiquez un répertoire de travail et une commande (claude ou bash) puis lancez. Ouvrez-la pour obtenir un terminal interactif.',
+      },
+      {
+        title: 'Sessions découvertes',
+        body: 'Les sessions lancées dans votre propre terminal sont détectées automatiquement et marquées « découvertes ». Observez-les en lecture seule, ou reprenez/forkez-les une fois arrêtées.',
+      },
+      {
+        title: 'Reprendre & forker',
+        body: 'Reprendre relance une session arrêtée dans son répertoire d’origine, avec tout l’historique rejoué. Forker crée une copie indépendante neuve avec la même commande et le même cwd.',
+      },
+      {
+        title: 'Observer ou interagir',
+        body: 'Quiconque ouvre une session vivante peut écrire ; ouvrez-la en observateur pour une supervision en lecture seule qui ne ralentit jamais la session.',
+      },
+      {
+        title: 'États fins',
+        body: 'Les sessions Claude gérées rapportent en temps réel les états en attente / occupé / inactif. Les sessions en attente sont remontées en premier et peuvent déclencher des notifications.',
+      },
+      {
+        title: 'Arrêter une session',
+        body: 'Arrêtez une session vivante depuis sa ligne (confirmation pour éviter les accidents) ; elle reçoit SIGTERM, puis SIGKILL après un court délai de grâce.',
+      },
+    ],
+  },
+  {
+    id: 'mobile',
+    title: 'Supervision mobile',
+    blurb: 'Faites avancer vos sessions depuis votre téléphone, sans ouvrir de terminal.',
+    items: [
+      {
+        title: 'À traiter',
+        body: 'Une bannière en haut du dashboard liste toutes les sessions bloquées sur un dialogue, avec des boutons de réponse en ligne.',
+      },
+      {
+        title: 'Répondre aux dialogues',
+        body: 'Quand Claude demande une confiance, une permission ou un choix, sélectionnez une option (ou Refuser) directement depuis la carte — sans terminal.',
+      },
+      {
+        title: 'Notifications Web Push',
+        body: 'Activez les notifications dans Réglages (ou via la cloche du pied de page). Vous recevez un push quand une session passe en attente ; touchez-le pour répondre. Exige HTTPS ; sur iOS, installez d’abord l’app.',
+      },
+    ],
+  },
+  {
+    id: 'groups',
+    title: 'Groupes de travail',
+    blurb: 'Regroupez des dépôts liés (API, web, lib partagée…) et agissez dessus ensemble.',
+    items: [
+      {
+        title: 'Créer un groupe',
+        body: 'Sur la page Groupes, nommez un groupe et choisissez ses dépôts. L’appartenance est légère et modifiable à tout moment.',
+      },
+      {
+        title: 'Liste ou grille de terminaux',
+        body: 'La vue d’un groupe affiche les worktrees et sessions de tous ses dépôts en liste, ou basculez sur la grille de terminaux pour suivre plusieurs sessions vivantes côte à côte.',
+      },
+      {
+        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.',
+      },
+    ],
+  },
+  {
+    id: 'productivity',
+    title: 'Productivité',
+    blurb: 'Trouvez tout rapidement et adaptez chaque liste.',
+    items: [
+      {
+        title: 'Palette de commandes',
+        body: 'Appuyez sur ⌘K (ou Ctrl+K) pour sauter en recherche floue vers n’importe quel dépôt, worktree, session ou groupe, ou lancer une action rapide.',
+      },
+      {
+        title: 'Trier, filtrer & rechercher',
+        body: 'Chaque liste a une barre d’outils pour trier, filtrer (état, commande, source, indicateurs…) et rechercher. Vos choix persistent dans l’URL, donc les liens sont partageables.',
+      },
+      {
+        title: 'Pagination',
+        body: 'Les longues listes sont paginées avec une taille de page configurable ; choisissez Tout pour afficher l’ensemble.',
+      },
+      {
+        title: 'Langue',
+        body: 'Basculez l’interface entre l’anglais et le français à tout moment, depuis les Réglages ou le pied de page.',
+      },
+    ],
+  },
+  {
+    id: 'settings',
+    title: 'Réglages & sécurité',
+    blurb: 'Configurez l’application et gérez qui peut atteindre le daemon.',
+    items: [
+      {
+        title: 'Notifications',
+        body: 'Activez ou désactivez le Web Push et envoyez une notification de test depuis Réglages → Préférences.',
+      },
+      {
+        title: 'Jetons d’accès',
+        body: 'Créez un jeton par appareil et révoquez ceux en lesquels vous n’avez plus confiance. La valeur d’un nouveau jeton n’est affichée qu’une seule fois — copiez-la immédiatement. Le dernier jeton actif ne peut pas être révoqué, pour éviter de vous verrouiller dehors.',
+      },
+      {
+        title: 'Infos serveur',
+        body: 'Réglages → Serveur affiche la version en cours et la configuration de démarrage (port, bind, origines autorisées, répertoire de données, VAPID). Ces valeurs se définissent via des flags CLI et nécessitent un redémarrage du daemon.',
+      },
+    ],
+  },
+  {
+    id: 'integrations',
+    title: 'Intégrations',
+    blurb: 'Des raccourcis vers les outils autour de vos dépôts.',
+    items: [
+      {
+        title: 'Gitea',
+        body: 'Renseignez l’URL de votre instance Gitea dans Réglages → Intégrations pour ajouter une icône Gitea en un clic dans la navigation. Laissez vide pour masquer l’icône.',
+      },
+    ],
+  },
+];
+
+export const helpSections: Record<AppLocale, HelpSection[]> = { en, fr };