release: git-arboretum 3.6.0 (ouverture des fichiers réparée, vue Changements par projet), desktop 0.2.3

Le daemon 3.6.0 corrige la zone d'édition qui pouvait rester vide et ajoute la bascule Fichiers / Changements au centre de l'IDE. Le shell Electron est inchangé, seule la version du daemon embarqué change.
fix(web): les fichiers s'ouvrent enfin, et le travail git par projet au centre
2026-08-04 23:19:16 +02:00 · 2026-08-04 23:18:40 +02:00
38 changed files with 2031 additions and 231 deletions
@@ -34,3 +34,6 @@ CLAUDE.md
 # Spike scratch output
 spikes/**/tmp/
 spikes/**/captures/
+
+# captures des scripts de verification visuelle (verify-ui.mjs)
+.ui-shots/
@@ -7933,7 +7933,7 @@
    },
    "packages/server": {
      "name": "@johanleroy/git-arboretum",
-      "version": "3.5.1",
+      "version": "3.6.0",
      "license": "MIT",
      "dependencies": {
        "@fastify/cookie": "^11.0.0",
@@ -4,6 +4,12 @@ Notable changes to the Arboretum desktop app (`packages/desktop`). The daemon an
 extension keep their own changelogs in `packages/server/CHANGELOG.md` and
 `packages/vscode/CHANGELOG.md`.

+## 0.2.3
+
+Ships the daemon 3.6.0. Files open again (the editor area could stay blank), and uncommitted work
+gets a real surface in the centre of the IDE: one block per project, with staging, commit and push.
+The Electron shell itself is unchanged.
+
 ## 0.2.2

 - **Clipboard bridge.** The renderer cannot use `navigator.clipboard` (Electron rejects it with
@@ -1,12 +1,12 @@
 {
  "name": "@arboretum/desktop",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@arboretum/desktop",
-      "version": "0.2.2",
+      "version": "0.2.3",
      "license": "MIT",
      "devDependencies": {
        "@types/node": "^22.10.0",
@@ -1,7 +1,7 @@
 {
  "name": "@arboretum/desktop",
  "private": true,
-  "version": "0.2.2",
+  "version": "0.2.3",
  "description": "Self-hosted multi-project AI IDE for git worktrees and Claude Code sessions",
  "homepage": "https://git-arboretum.com",
  "repository": {
@@ -3,6 +3,40 @@
 Notable changes to `@johanleroy/git-arboretum` (the Arboretum daemon). The VS Code
 extension keeps its own changelog in `packages/vscode/CHANGELOG.md`.

+## 3.6.0
+
+Files open again, and uncommitted work gets a real surface: one block per project, in the centre of
+the IDE. Fully additive, no protocol version bump.
+
+- **Opening a file showed an empty page.** The container of the single Monaco instance lived inside a
+  `v-if`, so mounting the IDE with no open tab (first use, or after closing everything) bailed out
+  silently and the editor was never created: the first file you opened rendered nothing, with no
+  spinner and no error. The container is now always mounted and the editor is created on demand.
+  Closing the last tab no longer destroys it either.
+- **The editor now says when it cannot load.** A missing editor chunk (a stale `index.html` after an
+  update, a network drop) used to be memoized as a permanent failure, silently, for the whole
+  session. It reports the failure, offers Retry and Reload page, and shows a loading state while the
+  chunk and the file are fetched. A file that disappears under the editor is reported instead of
+  being swallowed.
+- **No more console errors when opening TypeScript.** Only the base worker was provided, so the
+  TypeScript language service kept calling a worker that did not implement its methods, throwing on
+  every single file open. The language workers are shipped now (loaded on demand). Semantic
+  diagnostics stay off on purpose: with no tsconfig and no node_modules, they would invent errors.
+- **Changes: your uncommitted work, per project, in the centre.** Two buttons on the right of the tab
+  bar switch the centre between Files and Changes. Changes shows one block per worktree across every
+  open project, each with its staged and unstaged files, its diff unfolded in place, its commit,
+  push, fetch and pull, and its own history. The Git panel in the sidebar becomes the index: what
+  each project is worth at a glance, one click to open the matching block. The activity bar badge
+  finally counts the worktrees that need attention.
+- **Push and commit buttons tell the truth.** Push was enabled with nothing to push and disabled when
+  merely behind; it now follows what git will actually do. Amending just a message is allowed, as the
+  server already did. A rebase is offered as soon as the branch is behind, not only after a
+  fast-forward fails.
+- **Commit, fetch and push refresh what they change.** They only broadcast a worktree update, so the
+  "n unpushed" counter stayed stale right after a push, and files just committed were still listed.
+- On mobile, tapping a file in the explorer now brings the editor to the front, and the Git tab opens
+  the Changes view (the sidebar index is a desktop affordance).
+
 ## 3.5.1

 Completes the terminal copy & paste of 3.5.0, which only worked in a browser.
@@ -1,6 +1,6 @@
 {
  "name": "@johanleroy/git-arboretum",
-  "version": "3.5.1",
+  "version": "3.6.0",
  "description": "Self-hosted multi-project AI IDE for git worktrees and the Claude Code sessions running on them",
  "license": "MIT",
  "type": "module",
@@ -0,0 +1,403 @@
+#!/usr/bin/env node
+// Vérification E2E de la ZONE CENTRALE de l'IDE, par interaction réelle (pas des captures) : daemon
+// temporaire isolé + Chromium headless piloté en CDP + cookie de session injecté. On clique dans
+// l'arbre comme un utilisateur, puis on lit le DOM de Monaco.
+//
+// Ce que ce script prouve, et qu'aucune capture ne prouvait :
+//  (a) ouvrir un fichier alors qu'AUCUN onglet n'est persisté affiche réellement son contenu. C'est
+//      le cas nominal qui restait vide et muet : le conteneur de Monaco vivait sous un `v-if`, donc
+//      l'éditeur n'était jamais créé et aucun watcher ne retentait ;
+//  (b) fermer le dernier onglet puis réouvrir un fichier réaffiche le contenu (le conteneur ne doit
+//      pas être détruit, sinon l'éditeur pointe sur un noeud détaché) ;
+//  (c) sur mobile, toucher un fichier amène la zone centrale au premier plan (l'arbre et l'éditeur
+//      étant mutuellement exclusifs sous 768 px, un contenu visible EST la preuve de la bascule) ;
+//  (d) chunk de l'éditeur introuvable : un message et des actions de récupération, pas une zone vide ;
+//  (e) la bascule Fichiers / Changements liste bien les fichiers modifiés et permet de committer.
+//
+// Usage : node packages/server/scripts/verify-editor.mjs
+// Prérequis : `npm run build` puis `node packages/server/scripts/copy-web.mjs`.
+import { spawn, execFileSync } from 'node:child_process';
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync, existsSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const WebSocket = require('ws');
+
+const PORT = 7412;
+const CDP_PORT = 9335;
+const ORIGIN = `http://127.0.0.1:${PORT}`;
+const MARKER = 'ARB_EDITOR_RENDERED_4242';
+const serverDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const results = [];
+const check = (name, ok, detail = '') => {
+  results.push({ name, ok, detail });
+  console.log(`${ok ? '✅' : '❌'} ${name}${detail ? `: ${detail}` : ''}`);
+};
+
+function findChromium() {
+  for (const bin of ['chromium', 'chromium-browser', 'google-chrome', 'google-chrome-stable']) {
+    try {
+      return execFileSync('which', [bin]).toString().trim();
+    } catch {
+      /* essai suivant */
+    }
+  }
+  return null;
+}
+
+/** Client CDP minimal : un seul socket, corrélation par id, sessionId pour la cible attachée. */
+function cdp(url) {
+  const ws = new WebSocket(url, { perMessageDeflate: false, maxPayload: 256 * 1024 * 1024 });
+  let nextId = 1;
+  const pending = new Map();
+  const events = [];
+  ws.on('message', (raw) => {
+    const msg = JSON.parse(String(raw));
+    if (msg.id && pending.has(msg.id)) {
+      const { resolve, reject } = pending.get(msg.id);
+      pending.delete(msg.id);
+      msg.error ? reject(new Error(JSON.stringify(msg.error))) : resolve(msg.result);
+      return;
+    }
+    if (msg.method) events.push(msg);
+  });
+  const ready = new Promise((res, rej) => (ws.on('open', res), ws.on('error', rej)));
+  const send = (method, params = {}, sessionId) =>
+    new Promise((resolve, reject) => {
+      const id = nextId++;
+      pending.set(id, { resolve, reject });
+      ws.send(JSON.stringify({ id, method, params, ...(sessionId ? { sessionId } : {}) }));
+      setTimeout(() => pending.has(id) && (pending.delete(id), reject(new Error(`CDP timeout: ${method}`))), 30_000);
+    });
+  return { ws, ready, send, events };
+}
+
+const tmp = mkdtempSync(join(tmpdir(), 'arb-verify-editor-'));
+let srv = null;
+let browser = null;
+
+try {
+  const publicIndex = join(serverDir, 'public', 'index.html');
+  check('SPA copiée dans packages/server/public', existsSync(publicIndex), publicIndex);
+
+  // --- dépôt de démonstration : un fichier sonde EN PREMIÈRE LIGNE (Monaco virtualise le rendu) ---
+  const repo = join(tmp, 'demo-repo');
+  mkdirSync(repo, { recursive: true });
+  const git = (...args) => execFileSync('git', args, { cwd: repo, stdio: 'pipe' });
+  git('init', '-b', 'main');
+  git('config', 'user.email', 'test@arboretum.dev');
+  git('config', 'user.name', 'Test');
+  writeFileSync(join(repo, 'README.md'), '# demo\n');
+  writeFileSync(join(repo, 'probe.ts'), `export const probe = '${MARKER}';\n`);
+  git('add', '-A');
+  git('commit', '-m', 'commit initial');
+  // du travail non commité, pour la vue Changements
+  writeFileSync(join(repo, 'dirty.txt'), 'travail en cours\n');
+
+  srv = spawn(
+    'node',
+    [join(serverDir, 'dist', 'index.js'), '--port', String(PORT), '--db', join(tmp, 't.db'), '--claude-home', join(tmp, 'claude'), '--no-discover'],
+    { env: { ...process.env, XDG_DATA_HOME: join(tmp, 'xdg'), ARBORETUM_LOG: 'warn' }, stdio: ['ignore', 'pipe', 'pipe'] },
+  );
+  let srvOut = '';
+  srv.stdout.on('data', (d) => (srvOut += d));
+  srv.stderr.on('data', (d) => (srvOut += d));
+  for (let i = 0; i < 60 && !/arb_[0-9a-f]{16,}/.test(srvOut); i++) await sleep(150);
+  const token = /arb_[0-9a-f]{16,}/.exec(srvOut)?.[0];
+  check('daemon temporaire démarré + token', !!token);
+
+  const login = await fetch(`${ORIGIN}/api/v1/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Origin: ORIGIN },
+    body: JSON.stringify({ token }),
+  });
+  const sessionCookie = (login.headers.getSetCookie?.() ?? []).map((c) => c.split(';')[0]).find((c) => c.startsWith('arb_session='));
+  check('login → cookie de session', !!sessionCookie);
+  const cookieValue = sessionCookie?.slice('arb_session='.length) ?? '';
+
+  const j = (path, method, body) =>
+    fetch(`${ORIGIN}${path}`, {
+      method,
+      headers: { Origin: ORIGIN, Cookie: sessionCookie ?? '', ...(body ? { 'Content-Type': 'application/json' } : {}) },
+      ...(body ? { body: JSON.stringify(body) } : {}),
+    });
+  const repoRes = await (await j('/api/v1/repos', 'POST', { path: repo })).json();
+  const repoId = repoRes.repo?.id;
+  const repoLabel = repoRes.repo?.label;
+  check('dépôt de démonstration enregistré', !!repoId, repoLabel ?? '');
+
+  const chromeBin = findChromium();
+  check('Chromium disponible', !!chromeBin, chromeBin ?? 'introuvable');
+  if (!chromeBin) throw new Error('Chromium introuvable : impossible de vérifier le rendu');
+  browser = spawn(
+    chromeBin,
+    [
+      '--headless=new',
+      `--remote-debugging-port=${CDP_PORT}`,
+      `--user-data-dir=${join(tmp, 'chrome')}`,
+      '--no-first-run',
+      '--no-default-browser-check',
+      '--disable-gpu',
+      '--hide-scrollbars',
+    ],
+    { stdio: ['ignore', 'pipe', 'pipe'] },
+  );
+  let wsUrl = null;
+  for (let i = 0; i < 80 && !wsUrl; i++) {
+    await sleep(200);
+    try {
+      wsUrl = (await (await fetch(`http://127.0.0.1:${CDP_PORT}/json/version`)).json()).webSocketDebuggerUrl;
+    } catch {
+      /* pas encore prêt */
+    }
+  }
+  check('Chromium en écoute CDP', !!wsUrl);
+  const client = cdp(wsUrl);
+  await client.ready;
+
+  // localStorage est partagé par les cibles d'un même profil : on l'efface pour chaque scénario.
+  // AUCUN onglet persisté : c'est précisément le cas qui restait vide. `arboretum.locale` n'est pas
+  // un persistedRef (chaîne brute, pas de JSON).
+  const seed = (extra = '') =>
+    `localStorage.clear();localStorage.setItem('arb.theme', '"dark"');localStorage.setItem('arboretum.locale', 'en');${extra}`;
+
+  /** Ouvre une cible isolée, authentifiée, avec un état de vue amorcé. */
+  async function openTarget({ width = 1440, height = 900, extraSeed = '', blocked = [] } = {}) {
+    const { targetId } = await client.send('Target.createTarget', { url: 'about:blank' });
+    const { sessionId } = await client.send('Target.attachToTarget', { targetId, flatten: true });
+    await client.send('Runtime.enable', {}, sessionId);
+    await client.send('Log.enable', {}, sessionId);
+    await client.send('Network.enable', {}, sessionId);
+    await client.send('Page.enable', {}, sessionId);
+    await client.send('Emulation.setDeviceMetricsOverride', { width, height, deviceScaleFactor: 1, mobile: width < 500 }, sessionId);
+    await client.send('Network.setCookie', { name: 'arb_session', value: cookieValue, domain: '127.0.0.1', path: '/', httpOnly: true }, sessionId);
+    if (blocked.length > 0) await client.send('Network.setBlockedURLs', { urls: blocked }, sessionId);
+    await client.send('Page.addScriptToEvaluateOnNewDocument', { source: seed(extraSeed) }, sessionId);
+    const before = client.events.length;
+    await client.send('Page.navigate', { url: `${ORIGIN}/ide` }, sessionId);
+    return { targetId, sessionId, before };
+  }
+
+  const evaluate = async (expression, sessionId) =>
+    (await client.send('Runtime.evaluate', { expression, returnByValue: true }, sessionId)).result?.value;
+
+  /** Attend qu'une condition devienne vraie (jamais de sleep fixe sur un rendu asynchrone). */
+  async function waitFor(fn, tries = 60, delay = 250) {
+    for (let i = 0; i < tries; i++) {
+      if (await fn()) return true;
+      await sleep(delay);
+    }
+    return false;
+  }
+
+  // Clic sur une ligne par son libellé exact : les libellés vivent dans un <span> à l'intérieur du
+  // <button> de la ligne (arbre de projets comme arbre de fichiers).
+  const clickRow = (label, sessionId) =>
+    evaluate(
+      `(() => {
+        const span = [...document.querySelectorAll('button span')].find((s) => s.textContent.trim() === ${JSON.stringify(label)});
+        const btn = span?.closest('button');
+        if (!btn) return false;
+        btn.click();
+        return true;
+      })()`,
+      sessionId,
+    );
+
+  // Monaco VIRTUALISE : seules les lignes visibles existent dans le DOM, et les espaces sortent en
+  // U+00A0. La sonde est donc en première ligne, et on normalise avant comparaison.
+  const editorText = async (sessionId) =>
+    (await evaluate(
+      `(() => {
+        const lines = document.querySelector('.monaco-editor .view-lines');
+        return lines ? lines.textContent.replace(/\\u00a0/g, ' ') : '';
+      })()`,
+      sessionId,
+    )) ?? '';
+
+  const editorBox = async (sessionId) =>
+    JSON.parse(
+      (await evaluate(
+        `JSON.stringify((() => {
+          const el = document.querySelector('.monaco-editor');
+          if (!el) return null;
+          const r = el.getBoundingClientRect();
+          return { w: Math.round(r.width), h: Math.round(r.height) };
+        })())`,
+        sessionId,
+      )) ?? 'null',
+    );
+
+  const describeError = (e) => {
+    const d = e.params?.exceptionDetails;
+    if (d) {
+      const ex = d.exception ?? {};
+      const where = d.url ? ` @${d.url}:${d.lineNumber ?? '?'}` : '';
+      return `${d.text ?? ''} ${ex.description ?? ex.value ?? ''}${where}`.trim();
+    }
+    return (e.params?.args ?? []).map((a) => a.description ?? a.value ?? a.type).join(' ');
+  };
+
+  const consoleErrors = (sessionId, before) =>
+    client.events
+      .slice(before)
+      .filter((e) => e.sessionId === sessionId)
+      .filter((e) => (e.method === 'Runtime.consoleAPICalled' && e.params?.type === 'error') || e.method === 'Runtime.exceptionThrown')
+      .map(describeError)
+      .filter((m) => m && !/favicon|manifest\.webmanifest/i.test(m));
+
+  /** Déroule l'arbre jusqu'au fichier sonde : dépôt, puis branche, puis fichier. */
+  async function openProbeFile(sessionId) {
+    if (!(await waitFor(() => clickRow(repoLabel, sessionId)))) return false;
+    if (!(await waitFor(() => clickRow('main', sessionId)))) return false;
+    return waitFor(() => clickRow('probe.ts', sessionId));
+  }
+
+  // --- (a) desktop, aucun onglet persisté : le cas nominal qui restait vide ---
+  {
+    const { targetId, sessionId, before } = await openTarget();
+    const treeReady = await waitFor(async () => !!(await clickRow(repoLabel, sessionId)));
+    check('a · arbre de projets rendu', treeReady);
+    // L'éditeur ne doit pas exister avant qu'un fichier soit demandé (chargement paresseux préservé).
+    check('a · Monaco non chargé avant ouverture d un fichier', (await editorBox(sessionId)) === null);
+
+    check('a · navigation jusqu au fichier', await waitFor(() => clickRow('main', sessionId)) && (await waitFor(() => clickRow('probe.ts', sessionId))));
+    const shown = await waitFor(async () => (await editorText(sessionId)).includes(MARKER));
+    check('a · le contenu du fichier est réellement rendu', shown, shown ? '' : await editorText(sessionId));
+    const box = await editorBox(sessionId);
+    check('a · l éditeur occupe une surface réelle', !!box && box.w > 200 && box.h > 100, JSON.stringify(box));
+    check('a · la gouttière de numéros est rendue', !!(await evaluate("!!document.querySelector('.margin-view-overlays .line-numbers')", sessionId)));
+    const errs = consoleErrors(sessionId, before);
+    check('a · aucune erreur console', errs.length === 0, errs.slice(0, 3).join(' | '));
+    await client.send('Target.closeTarget', { targetId });
+  }
+
+  // --- (b) fermer le dernier onglet, puis réouvrir : le conteneur ne doit pas avoir été détruit ---
+  {
+    const { targetId, sessionId, before } = await openTarget();
+    check('b · fichier ouvert une première fois', (await openProbeFile(sessionId)) && (await waitFor(async () => (await editorText(sessionId)).includes(MARKER))));
+
+    const closed = await evaluate(
+      `(() => {
+        const tab = [...document.querySelectorAll('[title="probe.ts"]')].find((e) => e.querySelector('button'));
+        const btn = tab?.querySelector('button');
+        if (!btn) return false;
+        btn.click();
+        return true;
+      })()`,
+      sessionId,
+    );
+    check('b · dernier onglet fermé', !!closed);
+    const tabsLeft = await evaluate("JSON.parse(localStorage.getItem('arb.ide.tabs') ?? '[]').length", sessionId);
+    check('b · plus aucun onglet', tabsLeft === 0, `restants: ${tabsLeft}`);
+    // Le point à prouver : le CONTENEUR survit (v-show, pas v-if). Sans modèle, Monaco détruit sa
+    // vue de lui-même (`.monaco-editor` disparaît) et la recrée au prochain setModel : c'est normal.
+    // Ce qui ne doit jamais disparaître, c'est le conteneur, sinon l'instance garde une référence sur
+    // un noeud détaché et la zone reste définitivement vide.
+    const hostAlive = await waitFor(
+      async () => (await evaluate("!!document.querySelector('[data-editor-host]')", sessionId)) === true,
+      12,
+    );
+    check('b · le conteneur de l éditeur survit à la fermeture', hostAlive);
+    check(
+      'b · état vide affiché',
+      await waitFor(async () => String(await evaluate('document.body.innerText', sessionId)).includes('No file open'), 12),
+    );
+
+    check('b · fichier réouvert', await waitFor(() => clickRow('probe.ts', sessionId)));
+    check('b · le contenu revient après réouverture', await waitFor(async () => (await editorText(sessionId)).includes(MARKER)));
+    const errs = consoleErrors(sessionId, before);
+    check('b · aucune erreur console', errs.length === 0, errs.slice(0, 3).join(' | '));
+    await client.send('Target.closeTarget', { targetId });
+  }
+
+  // --- (c) mobile : l'arbre et l'éditeur sont mutuellement exclusifs, donc un contenu visible
+  //         prouve que l'ouverture d'un fichier a bien amené la zone centrale au premier plan ---
+  {
+    const { targetId, sessionId } = await openTarget({ width: 390, height: 844 });
+    check('c · fichier ouvert depuis l explorateur mobile', await openProbeFile(sessionId));
+    check('c · le contenu s affiche (le panneau a basculé)', await waitFor(async () => (await editorText(sessionId)).includes(MARKER)));
+    const treeGone = await evaluate(
+      `![...document.querySelectorAll('button span')].some((s) => s.textContent.trim() === 'probe.ts')`,
+      sessionId,
+    );
+    check('c · l explorateur a laissé la place à l éditeur', !!treeGone);
+    await client.send('Target.closeTarget', { targetId });
+  }
+
+  // --- (d) chunk de l'éditeur introuvable : message + actions, puis récupération au rechargement ---
+  //     On bloque UNIQUEMENT le module d'import dynamique. Surtout pas *vendor-monaco* : le chunk
+  //     d'entrée l'importe statiquement, le bloquer tuerait toute la SPA.
+  {
+    const { targetId, sessionId } = await openTarget({ blocked: ['*monaco-setup*'] });
+    check('d · fichier demandé malgré le chunk bloqué', await openProbeFile(sessionId));
+    const said = await waitFor(async () =>
+      String(await evaluate('document.body.innerText', sessionId)).includes('The code editor could not be loaded'),
+    );
+    check('d · l échec est annoncé au lieu d une zone vide', said);
+    const actions = await evaluate(
+      `(() => {
+        const labels = [...document.querySelectorAll('button')].map((b) => b.textContent.trim());
+        return labels.includes('Retry') && labels.includes('Reload page');
+      })()`,
+      sessionId,
+    );
+    check('d · des actions de récupération sont proposées', !!actions);
+
+    await client.send('Network.setBlockedURLs', { urls: [] }, sessionId);
+    await client.send('Page.reload', {}, sessionId);
+    check('d · après rechargement, le fichier s ouvre', (await openProbeFile(sessionId)) && (await waitFor(async () => (await editorText(sessionId)).includes(MARKER))));
+    await client.send('Target.closeTarget', { targetId });
+  }
+
+  // --- (e) bascule Fichiers / Changements : la liste des fichiers non commités et le commit ---
+  {
+    const { targetId, sessionId, before } = await openTarget({
+      extraSeed:
+        `localStorage.setItem('arb.ide.centerMode', '"changes"');` +
+        `localStorage.setItem('arb.ide.expandedRepos', ${JSON.stringify(JSON.stringify([repoId]))});` +
+        `localStorage.setItem('arb.ide.changesExpanded', ${JSON.stringify(JSON.stringify([`${repoId}\0${repo}`]))});`,
+    });
+    const listed = await waitFor(async () => String(await evaluate('document.body.innerText', sessionId)).includes('dirty.txt'));
+    check('e · la vue Changements liste le fichier non commité', listed);
+    const hasCommit = await evaluate(
+      `[...document.querySelectorAll('button')].some((b) => b.textContent.trim().startsWith('Commit'))`,
+      sessionId,
+    );
+    check('e · le panneau de commit est présent dans le bloc', !!hasCommit);
+    // La bascule de mode vit dans la barre d'onglets, donc elle est là même sans aucun onglet ouvert.
+    const switched = await evaluate(
+      `(() => {
+        const btn = [...document.querySelectorAll('button[title]')].find((b) => b.getAttribute('title') === 'Files');
+        if (!btn) return false;
+        btn.click();
+        return true;
+      })()`,
+      sessionId,
+    );
+    check('e · la bascule Fichiers est accessible sans onglet ouvert', !!switched);
+    check(
+      'e · retour au mode Fichiers',
+      await waitFor(async () => String(await evaluate('document.body.innerText', sessionId)).includes('No file open')),
+    );
+    const errs = consoleErrors(sessionId, before);
+    check('e · aucune erreur console', errs.length === 0, errs.slice(0, 3).join(' | '));
+    await client.send('Target.closeTarget', { targetId });
+  }
+
+  client.ws.close();
+} catch (err) {
+  check('exception', false, String(err));
+} finally {
+  browser?.kill('SIGTERM');
+  srv?.kill('SIGTERM');
+  await sleep(1200);
+  rmSync(tmp, { recursive: true, force: true });
+  const failed = results.filter((r) => !r.ok);
+  console.log(failed.length === 0 ? '\nVERIFY EDITOR: ALL GREEN' : `\nVERIFY EDITOR: ${failed.length} FAILURE(S)`);
+  process.exit(failed.length === 0 ? 0 : 1);
+}
@@ -130,6 +130,11 @@ try {
  check('groupe de démonstration créé', !!groupRes.group?.id);
  const sess = await (await j('/api/v1/sessions', 'POST', { cwd: repo, command: 'bash' })).json();
  check('session bash de démonstration', !!sess.session?.id);
+  // Un fichier indexé et un non indexé dans le checkout principal : la vue Changements doit montrer
+  // ses DEUX sections (« Staged » et « Changes »), sinon la capture ne prouve que la moitié.
+  writeFileSync(join(repo, 'notes.md'), 'brouillon\n');
+  const staged = await j(`/api/v1/repos/${repoId}/worktrees/stage`, 'POST', { path: repo, files: ['src/app.ts'] });
+  check('un fichier indexé pour la démonstration', staged.ok);

  // --- Chromium headless en CDP ---
  const chromeBin = findChromium();
@@ -167,7 +172,24 @@ try {
  const expanded = JSON.stringify(JSON.stringify([repoId]));
  const context = JSON.stringify(JSON.stringify({ repoId, wtPath: repo }));
  const seedExplorer = `localStorage.setItem('arb.ide.expandedRepos', ${expanded});localStorage.setItem('arb.ide.context', ${context});`;
-  const seedGit = `${seedExplorer}localStorage.setItem('arb.ide.activity', '"git"');localStorage.setItem('arb.history.open', 'true');`;
+  // Index Git de la sidebar : compteurs par projet, sans liste de fichiers (celle-ci vit au centre).
+  const seedGit = `${seedExplorer}localStorage.setItem('arb.ide.activity', '"git"');`;
+  // Vue Changements de la zone centrale : blocs dépliés du checkout principal ET du worktree de
+  // feature, plus l'historique du premier (sa clé de repli est désormais PAR worktree).
+  const changesKeys = JSON.stringify(
+    JSON.stringify([`${repoId}\0${repo}`, ...(wtRes.worktree?.path ? [`${repoId}\0${wtRes.worktree.path}`] : [])]),
+  );
+  const seedChanges =
+    `${seedExplorer}localStorage.setItem('arb.ide.centerMode', '"changes"');` +
+    `localStorage.setItem('arb.ide.changesExpanded', ${changesKeys});` +
+    `localStorage.setItem(${JSON.stringify(`arb.history.open:${repoId}\0${repo}`)}, 'true');`;
+  const seedChangesMobile = `${seedChanges}localStorage.setItem('arb.ide.mobilePanel', '"changes"');`;
+  // Zone d'édition : un onglet persisté, jamais capturé jusqu'ici.
+  const editorTabId = `${repoId}\0${repo}\0src/app.ts`;
+  const seedEditor =
+    `${seedExplorer}localStorage.setItem('arb.ide.tabs', ${JSON.stringify(
+      JSON.stringify([{ id: editorTabId, repoId, wtPath: repo, file: 'src/app.ts', view: 'editor' }]),
+    )});localStorage.setItem('arb.ide.activeTab', ${JSON.stringify(JSON.stringify(editorTabId))});`;
  // Panneau Groupes avec le groupe ET le worktree dépliés : c'est la vue qui porte l'arborescence de
  // fichiers des membres du groupe, sinon jamais capturée.
  const seedGroups =
@@ -175,11 +197,17 @@ try {
    `localStorage.setItem('arb.ide.expandedGroups', ${JSON.stringify(JSON.stringify([groupRes.group?.id]))});` +
    `localStorage.setItem('arb.ide.expandedWts', ${JSON.stringify(JSON.stringify([repo]))});`;

+  // `expect` : une capture non vide ne prouve pas que le bon composant s'est rendu. On exige donc un
+  // fragment de texte propre à la surface visée.
  const shots = [
    { name: 'ide-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedExplorer },
    { name: 'ide-light-desktop', theme: 'light', width: 1440, height: 900, seed: seedExplorer },
-    { name: 'git-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedGit },
-    { name: 'git-light-desktop', theme: 'light', width: 1440, height: 900, seed: seedGit },
+    { name: 'git-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedGit, expect: 'feature/demo' },
+    { name: 'git-light-desktop', theme: 'light', width: 1440, height: 900, seed: seedGit, expect: 'feature/demo' },
+    { name: 'changes-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedChanges, expect: 'wip.txt' },
+    { name: 'changes-light-desktop', theme: 'light', width: 1440, height: 900, seed: seedChanges, expect: 'wip.txt' },
+    { name: 'changes-dark-mobile', theme: 'dark', width: 390, height: 844, seed: seedChangesMobile, expect: 'wip.txt' },
+    { name: 'editor-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedEditor, expect: 'src/app.ts' },
    { name: 'groups-dark-desktop', theme: 'dark', width: 1440, height: 900, seed: seedGroups },
    { name: 'ide-dark-mobile', theme: 'dark', width: 390, height: 844, seed: seedExplorer },
    { name: 'ide-light-mobile', theme: 'light', width: 390, height: 844, seed: seedExplorer },
@@ -196,9 +224,12 @@ try {
    await client.send('Network.setCookie', { name: 'arb_session', value: cookieValue, domain: '127.0.0.1', path: '/', httpOnly: true }, sessionId);
    // Thème : la SPA lit `arb.theme` avant le premier paint (script anti-FOUC).
    await client.send('Page.enable', {}, sessionId);
+    // `localStorage.clear()` d'abord : les cibles d'un même profil Chromium le PARTAGENT, donc sans
+    // ça une capture héritait de l'état de vue de la précédente (une capture de la zone d'édition
+    // montrait la vue Changements laissée par celle d'avant).
    await client.send(
      'Page.addScriptToEvaluateOnNewDocument',
-      { source: `localStorage.setItem('arb.theme', ${JSON.stringify(JSON.stringify(shot.theme))});${shot.seed ?? ''}` },
+      { source: `localStorage.clear();localStorage.setItem('arb.theme', ${JSON.stringify(JSON.stringify(shot.theme))});${shot.seed ?? ''}` },
      sessionId,
    );
    const before = client.events.length;
@@ -208,6 +239,7 @@ try {
    const text = await client.send('Runtime.evaluate', { expression: 'document.body.innerText', returnByValue: true }, sessionId);
    const rendered = String(text.result?.value ?? '');
    check(`${shot.name} : page rendue`, rendered.length > 20, `${rendered.length} caractères`);
+    if (shot.expect) check(`${shot.name} : contenu attendu`, rendered.includes(shot.expect), shot.expect);

    const errs = client.events
      .slice(before)
@@ -564,6 +564,11 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
        throw httpError(400, 'COMMIT_FAILED', (err as Error).message);
      }
      this.factsCache.delete(repoId);
+      // Un commit vide l'index et déplace HEAD : sans cette émission, les vues à contenu paresseux
+      // continuaient d'afficher les fichiers qu'on venait de committer, et l'historique ne voyait pas
+      // le nouveau commit (le watcher FS finissait par le rattraper, mais seulement si ce worktree
+      // était observé, et avec le délai du debounce).
+      this.emit('worktree_changes', { repoId, path: w.path });
      return (await this.emitWorktree(row, w.path)) as WorktreeSummary;
    });
  }
@@ -676,6 +681,10 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
    return this.withLock(repoId, async () => {
      await fetchRemote(w.path).catch((err) => { throw httpError(400, 'FETCH_FAILED', (err as Error).message); });
      this.factsCache.delete(repoId);
+      // Un fetch ne touche pas l'arbre de travail, mais il change ce que valent les compteurs et
+      // l'historique : uniformité « toute mutation git ré-arme les vues à contenu paresseux », sans
+      // quoi ce bouton est le seul du panneau à ne rien rafraîchir de visible.
+      this.emit('worktree_changes', { repoId, path: w.path });
      return (await this.emitWorktree(row, w.path)) as WorktreeSummary;
    });
  }
@@ -793,6 +802,9 @@ export class WorktreeManager extends EventEmitter<WorktreeManagerEvents> {
        throw httpError(400, 'PUSH_FAILED', (err as Error).message);
      }
      this.factsCache.delete(repoId);
+      // Corrige le badge « n commits non poussés » de l'historique, qui restait périmé après un push :
+      // son seul déclencheur est ce jeton d'invalidation.
+      this.emit('worktree_changes', { repoId, path: w.path });
      return (await this.emitWorktree(row, w.path)) as WorktreeSummary;
    });
  }
@@ -212,6 +212,33 @@ describe('WorktreeManager', () => {
    expect(w.git.dirtyCount).toBe(0);
  });

+  // Les vues à contenu paresseux (liste de fichiers modifiés, historique) ne se rechargent QUE sur
+  // `worktree_changes`. Il manquait sur commit, fetch et push, d'où un badge « non poussé » périmé et
+  // des fichiers déjà commités encore listés.
+  it('commit, fetch et push émettent worktree_changes (pas seulement worktree_update)', async () => {
+    const repo = makeTmpRepo();
+    const remote = mkdtempSync(join(tmpdir(), 'arb-remote-'));
+    dirs.push(remote);
+    execFileSync('git', ['init', '--bare', '-b', 'main'], { cwd: remote, stdio: 'pipe' });
+    execFileSync('git', ['remote', 'add', 'origin', remote], { cwd: repo, stdio: 'pipe' });
+
+    const r = await wt.addRepo({ path: repo });
+    const changed: Array<{ repoId: string; path: string }> = [];
+    wt.on('worktree_changes', (e) => changed.push(e));
+
+    writeFileSync(join(repo, 'f.txt'), 'x\n');
+    await wt.commitWorktree(r.id, repo, 'add f');
+    expect(changed).toHaveLength(1);
+
+    const pushed = await wt.pushWorktree(r.id, repo);
+    expect(changed).toHaveLength(2);
+    expect(pushed.git.ahead).toBe(0); // documente le nouveau canPush : plus rien à pousser
+
+    await wt.fetch(r.id, repo);
+    expect(changed).toHaveLength(3);
+    expect(changed.every((e) => e.repoId === r.id && resolve(e.path) === resolve(repo))).toBe(true);
+  });
+
  it('promoteWorktree : la branche du worktree devient le checkout principal, worktree supprimé, ancienne branche conservée', async () => {
    const repo = makeTmpRepo();
    const r = await wt.addRepo({ path: repo });
@@ -57,13 +57,16 @@ import {
  Sun,
 } from '@lucide/vue';
 import { useIdeStore, type ActivityView } from '../../stores/ide';
+import { useWorktreesStore } from '../../stores/worktrees';
 import { useModalsStore } from '../../stores/modals';
+import { pendingWorktreeCount } from '../../lib/changes-model';
 import { useNav } from '../../composables/useNav';
 import { useSession } from '../../composables/useSession';
 import { themeMode, cycleTheme } from '../../lib/theme';

 const { t } = useI18n();
 const ide = useIdeStore();
+const worktrees = useWorktreesStore();
 const modals = useModalsStore();
 const { waitingCount } = useNav();
 const { logout } = useSession();
@@ -74,9 +77,13 @@ const HelpOverlay = defineAsyncComponent(() => import('./overlays/HelpOverlay.vu

 const isActive = (v: ActivityView): boolean => ide.activeActivity === v && ide.leftVisible;

+// Badge Git : nombre de worktrees à traiter (plus lisible qu'un nombre de fichiers, et il ne
+// s'emballe pas). Dérivé des compteurs déjà diffusés par WS, donc sans aucune requête.
+const gitBadge = computed(() => pendingWorktreeCount(worktrees.visibleRepos, (id) => worktrees.worktreesForRepo(id)));
+
 const items = computed(() => [
  { view: 'explorer' as ActivityView, icon: FolderTree, label: t('ide.activity.explorer'), badge: 0 },
-  { view: 'git' as ActivityView, icon: GitCompare, label: t('ide.activity.git'), badge: 0 },
+  { view: 'git' as ActivityView, icon: GitCompare, label: t('ide.activity.git'), badge: gitBadge.value },
  { view: 'sessions' as ActivityView, icon: SquareTerminal, label: t('ide.activity.sessions'), badge: waitingCount.value },
  { view: 'groups' as ActivityView, icon: Boxes, label: t('ide.activity.groups'), badge: 0 },
 ]);
@@ -0,0 +1,129 @@
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div class="label-mono flex items-center gap-2 px-3 py-2">
+      <GitCompare :size="13" />
+      {{ t('changes.title') }}
+      <span class="text-fg-subtle normal-case">{{ t('changes.summary', { n: pendingCount }, pendingCount) }}</span>
+      <span class="ml-auto flex items-center gap-1">
+        <button
+          type="button"
+          class="rounded p-0.5 hover:bg-surface-2 hover:text-fg"
+          :title="allExpanded ? t('changes.collapseAll') : t('changes.expandAll')"
+          @click="toggleAll"
+        >
+          <component :is="allExpanded ? FoldVertical : UnfoldVertical" :size="14" />
+        </button>
+        <button
+          type="button"
+          class="rounded p-0.5 hover:bg-surface-2 hover:text-fg"
+          :class="ide.changesShowClean ? 'text-accent' : ''"
+          :title="ide.changesShowClean ? t('changes.hideClean') : t('changes.showClean')"
+          @click="ide.changesShowClean = !ide.changesShowClean"
+        >
+          <component :is="ide.changesShowClean ? Eye : EyeOff" :size="14" />
+        </button>
+        <button
+          type="button"
+          class="rounded p-0.5 hover:bg-surface-2 hover:text-fg"
+          :title="t('common.refresh')"
+          @click="refreshAll"
+        >
+          <RefreshCw :size="14" />
+        </button>
+      </span>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-auto pb-6">
+      <!-- Les trois états distingués, comme dans l'explorateur : chargement, échec, vide. -->
+      <SkeletonRow v-if="worktrees.loading && repos.length === 0" :count="4" :height="26" class="px-2 py-1" />
+      <div v-else-if="worktrees.loadError" class="px-3 py-2 text-xs">
+        <p class="text-danger">{{ worktrees.loadError }}</p>
+        <button type="button" class="mt-1 rounded px-1 text-accent hover:bg-surface-2" @click="worktrees.fetchAll()">
+          {{ t('common.retry') }}
+        </button>
+      </div>
+      <EmptyState
+        v-else-if="groups.length === 0"
+        :icon="GitCompare"
+        :title="t('changes.allClean')"
+        :hint="t('changes.allCleanHint')"
+        class="m-6"
+      />
+
+      <div v-for="g in groups" :key="g.repo.id">
+        <div class="flex items-center gap-1.5 border-b border-border bg-surface-1/60 px-2 py-1 text-xs">
+          <FolderGit2 :size="13" class="shrink-0" :style="tint(g.repo.id)" />
+          <span class="truncate font-medium" :title="g.repo.path">{{ g.repo.label }}</span>
+          <span class="shrink-0 text-[10px] text-fg-subtle">{{ t('changes.repoDirty', { n: g.dirtyFiles }, g.dirtyFiles) }}</span>
+        </div>
+        <ChangesWorktreeBlock v-for="wt in g.worktrees" :key="wtKey(wt.repoId, wt.path)" :wt="wt" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Vue « Changements » de la zone centrale : le statut git non commité de TOUS les projets ouverts,
+// un bloc par worktree, avec de quoi indexer, committer et pousser sur place. Elle remplace le
+// panneau latéral comme surface de travail ; la sidebar n'en garde que l'index.
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Eye, EyeOff, FoldVertical, FolderGit2, GitCompare, RefreshCw, UnfoldVertical } from '@lucide/vue';
+import { useIdeStore, wtKey } from '../../stores/ide';
+import { useWorktreesStore } from '../../stores/worktrees';
+import { useGroupsStore } from '../../stores/groups';
+import { useChangesStore } from '../../stores/changes';
+import { groupWorktreesByRepo, pendingWorktreeCount } from '../../lib/changes-model';
+import ChangesWorktreeBlock from './ChangesWorktreeBlock.vue';
+import EmptyState from '../ui/EmptyState.vue';
+import SkeletonRow from '../ui/SkeletonRow.vue';
+
+const { t } = useI18n();
+const ide = useIdeStore();
+const worktrees = useWorktreesStore();
+const groupsStore = useGroupsStore();
+const changes = useChangesStore();
+
+const repos = computed(() => worktrees.visibleRepos);
+const groups = computed(() =>
+  groupWorktreesByRepo(repos.value, (id) => worktrees.worktreesForRepo(id), {
+    showClean: ide.changesShowClean,
+    active: ide.activeContext,
+  }),
+);
+const pendingCount = computed(() => pendingWorktreeCount(repos.value, (id) => worktrees.worktreesForRepo(id)));
+
+const allKeys = computed(() => groups.value.flatMap((g) => g.worktrees.map((w) => wtKey(w.repoId, w.path))));
+const allExpanded = computed(() => allKeys.value.length > 0 && allKeys.value.every((k) => ide.changesExpanded.includes(k)));
+
+// Teinte de groupe : relie visuellement un dépôt à son groupe, comme dans l'explorateur.
+function tint(repoId: string): Record<string, string> {
+  const color = groupsStore.colorForRepo(repoId);
+  return color ? { color } : {};
+}
+
+function toggleAll(): void {
+  ide.setChangesExpanded(allExpanded.value ? [] : allKeys.value);
+}
+
+// Premier affichage : les blocs sont repliés par défaut (aucune requête), mais une vue entièrement
+// repliée ne montre rien. On déplie donc le premier bloc, celui du worktree actif s'il est listé.
+watch(
+  () => allKeys.value,
+  (keys) => {
+    if (keys.length === 0 || ide.changesExpanded.length > 0) return;
+    const ctx = ide.activeContext;
+    const preferred = ctx ? wtKey(ctx.repoId, ctx.wtPath) : null;
+    ide.setChangesExpanded([preferred && keys.includes(preferred) ? preferred : keys[0]!]);
+  },
+  { immediate: true },
+);
+
+function refreshAll(): void {
+  changes.invalidateAll();
+  for (const key of ide.changesExpanded) {
+    const wt = worktrees.worktrees.find((w) => wtKey(w.repoId, w.path) === key);
+    if (wt) changes.request(wt.repoId, wt.path);
+  }
+}
+</script>
@@ -0,0 +1,148 @@
+<template>
+  <div class="border-b border-border">
+    <!-- En-tête : ZÉRO requête, tout vient du WorktreeSummary diffusé par WS. -->
+    <div class="flex items-center gap-2 px-2 py-1.5" :class="isActive ? 'bg-surface-2/60' : 'hover:bg-surface-2/30'">
+      <button
+        type="button"
+        class="flex min-w-0 flex-1 items-center gap-1.5 text-left text-xs"
+        :aria-expanded="expanded"
+        @click="onToggle"
+      >
+        <component :is="expanded ? ChevronDown : ChevronRight" :size="13" class="shrink-0 text-fg-subtle" />
+        <component :is="wt.isMain ? Home : GitBranch" :size="13" class="shrink-0 text-fg-subtle" />
+        <span class="truncate font-mono" :title="wt.path">{{ wt.branch ?? t('worktrees.detached') }}</span>
+        <GitStatusBadge :git="wt.git" :branch="wt.branch" dense class="shrink-0" />
+        <!-- L'upstream est déjà nommé sur la ligne d'actions distantes juste en dessous : ici on ne
+             garde que ce qui appelle une action, ou l'état « propre ». -->
+        <span v-if="unpushed" class="shrink-0 text-[10px] text-warn">{{ t('changes.unpushed', { n: unpushed }) }}</span>
+        <span v-else-if="clean" class="shrink-0 text-[10px] text-fg-subtle">{{ t('changes.clean') }}</span>
+      </button>
+      <!-- Boutons frères et non imbriqués : un bouton dans un bouton est invalide. -->
+      <button
+        v-if="selected"
+        type="button"
+        class="shrink-0 rounded p-0.5 text-fg-subtle hover:bg-surface-3 hover:text-fg"
+        :title="t('changes.openInEditor')"
+        @click="openInEditor"
+      >
+        <FileCode :size="13" />
+      </button>
+      <button
+        type="button"
+        class="shrink-0 rounded p-0.5 text-fg-subtle hover:bg-surface-3 hover:text-fg"
+        :title="t('common.refresh')"
+        @click="changes.invalidate(wt.repoId, wt.path)"
+      >
+        <RefreshCw :size="13" :class="entry?.loading ? 'animate-spin' : undefined" />
+      </button>
+    </div>
+
+    <template v-if="expanded">
+      <div v-if="entry?.error" class="flex items-center gap-2 px-3 py-1.5 text-xs text-danger">
+        <span class="min-w-0 flex-1">{{ t('changes.loadFailed') }} {{ entry.error }}</span>
+        <BaseButton size="sm" variant="ghost" @click="changes.invalidate(wt.repoId, wt.path)">{{ t('common.retry') }}</BaseButton>
+      </div>
+      <SkeletonRow v-if="entry?.loading && entry.changes.length === 0" :count="3" :height="18" class="px-2 py-1" />
+
+      <CommitPanel
+        :repo-id="wt.repoId"
+        :wt="wt.path"
+        :changes="entry?.changes ?? []"
+        :git="wt.git"
+        :truncated="entry?.truncated ?? false"
+        :active="selected?.file ?? null"
+        @select="onSelect"
+        @changed="changes.invalidate(wt.repoId, wt.path)"
+      />
+
+      <DiffViewer
+        v-if="selected"
+        :key="`d:${selected.file}:${selected.staged}`"
+        :repo-id="wt.repoId"
+        :wt="wt.path"
+        :file="selected.file"
+        :staged="selected.staged"
+        :version="version"
+        class="max-h-96 border-y border-border bg-surface-1/40"
+      />
+
+      <CommitHistory :repo-id="wt.repoId" :wt="wt.path" :version="version" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Un worktree dans la vue « Changements » : en-tête toujours peu coûteux (compteurs WS), et si
+// déplié, le panneau de commit, le diff du fichier sélectionné INLINE, puis l'historique.
+// Le diff est inline et non en onglet : en mode « changements », un onglet est masqué par
+// construction, donc le clic n'aurait aucun effet visible. Le bouton FileCode garde la porte de
+// sortie vers l'éditeur plein cadre.
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ChevronDown, ChevronRight, FileCode, GitBranch, Home, RefreshCw } from '@lucide/vue';
+import type { WorktreeSummary } from '@arboretum/shared';
+import { useIdeStore, tabId, wtKey } from '../../stores/ide';
+import { useWorktreesStore } from '../../stores/worktrees';
+import { useChangesStore } from '../../stores/changes';
+import CommitPanel from '../workspace/CommitPanel.vue';
+import CommitHistory from '../workspace/CommitHistory.vue';
+import DiffViewer from '../workspace/DiffViewer.vue';
+import GitStatusBadge from '../workspace/GitStatusBadge.vue';
+import BaseButton from '../ui/BaseButton.vue';
+import SkeletonRow from '../ui/SkeletonRow.vue';
+
+const props = defineProps<{ wt: WorktreeSummary }>();
+const { t } = useI18n();
+const ide = useIdeStore();
+const worktrees = useWorktreesStore();
+const changes = useChangesStore();
+
+const selected = ref<{ file: string; staged: boolean } | null>(null);
+
+const key = computed(() => wtKey(props.wt.repoId, props.wt.path));
+const expanded = computed(() => ide.changesExpanded.includes(key.value));
+const isActive = computed(
+  () => ide.activeContext?.repoId === props.wt.repoId && ide.activeContext?.wtPath === props.wt.path,
+);
+const version = computed(() => worktrees.changeVersion(props.wt.repoId, props.wt.path));
+const entry = computed(() => changes.entry(props.wt.repoId, props.wt.path));
+const unpushed = computed(() => (props.wt.git.upstream ? props.wt.git.ahead : 0));
+const clean = computed(() => props.wt.git.dirtyCount === 0 && props.wt.git.ahead === 0 && props.wt.git.behind === 0);
+
+function onToggle(): void {
+  ide.toggleChangesWt(key.value);
+  ide.setActiveWorktree(props.wt.repoId, props.wt.path);
+}
+
+function onSelect(sel: { file: string; staged: boolean }): void {
+  // Second clic sur la même ligne : on replie le diff (même geste que l'historique des commits).
+  selected.value =
+    selected.value?.file === sel.file && selected.value.staged === sel.staged ? null : { ...sel };
+}
+
+function openInEditor(): void {
+  const sel = selected.value;
+  if (!sel) return;
+  ide.openFile(props.wt.repoId, props.wt.path, sel.file, 'diff');
+  ide.setTabView(tabId(props.wt.repoId, props.wt.path, sel.file), 'diff', sel.staged);
+}
+
+// Charge à l'ouverture, recharge dès que le disque bouge, libère au repli (bornage mémoire sur un
+// parc de dépôts important).
+watch(
+  () => [expanded.value, version.value] as const,
+  ([open]) => {
+    if (open) changes.request(props.wt.repoId, props.wt.path);
+    else changes.forget(props.wt.repoId, props.wt.path);
+  },
+  { immediate: true },
+);
+
+// Le fichier sélectionné a disparu de la liste (commité, abandonné) : on replie le diff.
+watch(
+  () => entry.value?.changes,
+  (list) => {
+    if (selected.value && list && !list.some((c) => c.path === selected.value?.file)) selected.value = null;
+  },
+);
+</script>
@@ -1,7 +1,14 @@
 <template>
  <div class="flex h-full min-h-0 flex-col">
-    <EditorTabs />
+    <EditorTabs>
+      <template #trailing>
+        <SegmentedControl v-model="modeModel" :options="modeOptions" />
+      </template>
+    </EditorTabs>

+    <!-- Mode « fichiers » en v-show et JAMAIS en v-if : l'unique instance Monaco, ses modèles et son
+         conteneur doivent survivre à un aller-retour vers la vue Changements. -->
+    <div v-show="ide.centerMode === 'files'" class="flex min-h-0 flex-1 flex-col">
      <template v-if="activeTab">
        <!-- barre : bascule éditeur/diff + chemin + save -->
        <div class="flex items-center gap-2 border-b border-border px-2 py-1 text-xs">
@@ -32,9 +39,18 @@
          </div>
        </div>
        <p v-if="loadError && activeTab.view === 'editor'" class="px-3 py-1 text-xs text-danger">{{ loadError }}</p>
+        <p v-else-if="syncError && activeTab.view === 'editor'" class="px-3 py-1 text-xs text-warn">{{ syncError }}</p>
+      </template>

+      <!-- Zone de rendu TOUJOURS montée : ce conteneur porte le DOM de l'unique instance Monaco.
+           Sous un v-if, il était détruit à la fermeture du dernier onglet (l'éditeur pointait alors
+           sur un noeud détaché : zone vide définitive) et absent au montage sans onglet actif
+           (l'éditeur n'était alors JAMAIS créé, ce qui laissait le premier fichier ouvert vide et
+           muet). Les autres états sont des surcouches. Ne jamais repasser ce bloc en v-if. -->
      <div class="relative min-h-0 flex-1">
-        <div v-show="activeTab.view === 'editor'" ref="host" class="h-full min-h-0" />
+        <div v-show="activeTab?.view === 'editor'" ref="host" data-editor-host class="h-full min-h-0" />
+
+        <template v-if="activeTab">
          <DiffViewer
            v-if="activeTab.view === 'diff'"
            :key="`diff:${activeTab.id}`"
@@ -45,20 +61,43 @@
            :version="activeVersion"
            class="h-full"
          />
+          <!-- Chunk de l'éditeur introuvable (build remplacé, index.html périmé, réseau) : la zone
+               restait vide et muette pour toute la session. -->
+          <div v-else-if="monacoStatus === 'error'" class="absolute inset-0 flex items-center justify-center bg-surface-0 p-6">
+            <EmptyState :icon="TriangleAlert" :title="t('editor.loadFailed')" :hint="monacoErrorHint">
+              <template #action>
+                <div class="flex items-center gap-2">
+                  <BaseButton size="sm" :icon="RefreshCw" @click="retryMonaco">{{ t('common.retry') }}</BaseButton>
+                  <BaseButton size="sm" variant="ghost" @click="reloadPage">{{ t('editor.reloadPage') }}</BaseButton>
+                </div>
+              </template>
+            </EmptyState>
+          </div>
+          <!-- Attente visible : téléchargement du chunk éditeur, puis lecture REST du fichier. -->
+          <div v-else-if="busy" class="absolute inset-0 bg-surface-0 p-3">
+            <p class="pb-2 text-xs text-fg-subtle">
+              {{ monacoStatus === 'loading' ? t('editor.loadingEditor') : t('editor.loadingFile') }}
+            </p>
+            <SkeletonRow :count="8" :height="12" />
          </div>
        </template>

        <EmptyState v-else :icon="FileCode" :title="t('ide.noFileOpen')" :hint="t('ide.noFileHint')" class="m-6" />
      </div>
+    </div>
+
+    <ChangesView v-if="ide.centerMode === 'changes'" class="min-h-0 flex-1" />
+  </div>
 </template>

 <script setup lang="ts">
-// Zone centrale de l'IDE : UNE seule instance Monaco partagée entre tous les onglets, avec un cache
-// de modèles (préserve contenu, historique undo et position du curseur au changement d'onglet).
+// Zone centrale de l'IDE. Deux modes : « fichiers » (UNE seule instance Monaco partagée entre tous
+// les onglets, avec un cache de modèles qui préserve contenu, historique undo et position du
+// curseur) et « changements » (statut git non commité de tous les projets ouverts).
 // Les onglets « diff » réutilisent DiffViewer. Le dirty est remonté au store IDE.
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { FileCode, Save, TriangleAlert } from '@lucide/vue';
+import { FileCode, GitCompare, RefreshCw, Save, TriangleAlert } from '@lucide/vue';
 import type * as Monaco from 'monaco-editor';
 import { useIdeStore, type EditorTab } from '../../stores/ide';
 import { useWorktreesStore } from '../../stores/worktrees';
@@ -67,10 +106,12 @@ import { ApiError } from '../../lib/api';
 import { loadMonaco } from '../../composables/useMonaco';
 import { resolvedTheme } from '../../lib/theme';
 import EditorTabs from './EditorTabs.vue';
+import ChangesView from './ChangesView.vue';
 import DiffViewer from '../workspace/DiffViewer.vue';
 import SegmentedControl from '../ui/SegmentedControl.vue';
 import BaseButton from '../ui/BaseButton.vue';
 import EmptyState from '../ui/EmptyState.vue';
+import SkeletonRow from '../ui/SkeletonRow.vue';

 interface ModelEntry {
  model: Monaco.editor.ITextModel;
@@ -83,10 +124,17 @@ const ide = useIdeStore();
 const worktrees = useWorktreesStore();
 const host = useTemplateRef<HTMLDivElement>('host');

-const ready = ref(false);
 const saving = ref(false);
 const conflict = ref(false);
 const loadError = ref<string | null>(null);
+// Erreur de RELECTURE disque : avertissement, pas panne. Le buffer reste éditable.
+const syncError = ref<string | null>(null);
+// Cycle de vie de l'unique instance Monaco. 'idle' : pas encore demandée, donc chunk non tiré.
+const monacoStatus = ref<'idle' | 'loading' | 'ready' | 'error'>('idle');
+const monacoError = ref<string | null>(null);
+// Onglet dont le contenu est en cours de lecture : borné à l'onglet, donc le voile ne reste pas
+// collé après un enchaînement rapide d'onglets.
+const loadingTabId = ref<string | null>(null);

 let monaco: typeof Monaco | null = null;
 const editor = shallowRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
@@ -113,10 +161,62 @@ const viewModel = computed<string>({
  },
 });

-onMounted(async () => {
-  monaco = await loadMonaco();
-  if (disposed || !host.value) return;
-  editor.value = monaco.editor.create(host.value, {
+// Bascule de MODE de la zone (icônes seules, dans la barre d'onglets), à ne pas confondre avec la
+// bascule de VUE ci-dessus (libellés texte, portée : l'onglet actif).
+const modeOptions = computed(() => [
+  { value: 'files', icon: FileCode, title: t('workspace.files') },
+  { value: 'changes', icon: GitCompare, title: t('workspace.changes') },
+]);
+const modeModel = computed<string>({
+  get: () => ide.centerMode,
+  set: (v) => ide.setCenterMode(v === 'changes' ? 'changes' : 'files'),
+});
+
+const ready = computed(() => monacoStatus.value === 'ready'); // n'arme QUE le bouton Enregistrer
+const fileLoading = computed(() => !!activeTab.value && loadingTabId.value === activeTab.value.id);
+const busy = computed(() => monacoStatus.value === 'loading' || fileLoading.value);
+const monacoErrorHint = computed(() =>
+  monacoError.value ? `${t('editor.loadFailedHint')} (${monacoError.value})` : t('editor.loadFailedHint'),
+);
+
+let creating: Promise<Monaco.editor.IStandaloneCodeEditor | null> | null = null;
+
+/**
+ * Crée l'unique instance Monaco à la PREMIÈRE demande d'affichage, une seule fois (appels
+ * concurrents partagés). Paresseux et non plus au montage, pour deux raisons : l'IDE est couramment
+ * monté sans aucun onglet (premier usage, tous les onglets fermés), cas où l'ancien `onMounted`
+ * sortait en silence sur `!host.value` et laissait l'éditeur inexistant pour toute la session ; et
+ * le conteneur doit être visible et mesurable au moment de la création.
+ */
+function ensureEditor(): Promise<Monaco.editor.IStandaloneCodeEditor | null> {
+  if (editor.value) return Promise.resolve(editor.value);
+  creating ??= createEditor().finally(() => {
+    creating = null; // un échec doit rester réessayable
+  });
+  return creating;
+}
+
+async function createEditor(): Promise<Monaco.editor.IStandaloneCodeEditor | null> {
+  monacoStatus.value = 'loading';
+  monacoError.value = null;
+  let mod: typeof Monaco;
+  try {
+    mod = await loadMonaco();
+  } catch (err) {
+    // Rejet enfin traité : l'ancien `await loadMonaco()` nu dans un onMounted async partait en rejet
+    // non géré, sans le moindre message à l'écran.
+    if (!disposed) {
+      monacoStatus.value = 'error';
+      monacoError.value = err instanceof Error ? err.message : String(err);
+    }
+    return null;
+  }
+  monaco = mod;
+  // Le conteneur vient peut-être d'apparaître (v-show piloté par activeTab) et le watcher est en
+  // flush 'pre' : on attend le patch DOM pour que Monaco mesure une taille réelle.
+  await nextTick();
+  if (disposed || !host.value) return null;
+  const ed = mod.editor.create(host.value, {
    value: '',
    theme: resolvedTheme.value === 'light' ? 'arboretum-light' : 'arboretum-dark',
    automaticLayout: true,
@@ -129,22 +229,46 @@ onMounted(async () => {
  });
  // Re-mesure après chargement de la fonte web (sinon curseur/colonnes décalés).
  void document.fonts?.ready.then(() => {
-    if (!disposed) monaco?.editor.remeasureFonts();
+    if (!disposed) mod.editor.remeasureFonts();
  });
-  editor.value.onDidChangeModelContent(() => {
+  ed.onDidChangeModelContent(() => {
    if (!shownTabId) return;
    const entry = entries.get(shownTabId);
    if (entry) ide.setTabDirty(shownTabId, entry.model.getValue() !== entry.savedContent);
  });
-  editor.value.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => void save());
-  ready.value = true;
-  if (activeTab.value && activeTab.value.view === 'editor') await showTab(activeTab.value);
+  ed.addCommand(mod.KeyMod.CtrlCmd | mod.KeyCode.KeyS, () => void save());
+  editor.value = ed;
+  monacoStatus.value = 'ready';
+  return ed;
+}
+
+async function retryMonaco(): Promise<void> {
+  monacoStatus.value = 'idle';
+  monacoError.value = null;
+  const tab = activeTab.value;
+  if (tab && tab.view === 'editor') await showTab(tab);
+  else await ensureEditor();
+}
+
+// Recours garanti : un `import()` déjà en échec est mémorisé par la module map du navigateur, un
+// nouvel essai en page ne récupère donc pas toujours. Sans éditeur il n'y a aucun buffer à perdre.
+function reloadPage(): void {
+  location.reload();
+}
+
+// Restauration au montage : un onglet persisté doit s'afficher sans geste (F5, et sur mobile où
+// EditorArea est monté/démonté à chaque changement de panneau). Sans onglet : rien n'est chargé.
+onMounted(() => {
+  const tab = activeTab.value;
+  if (tab && tab.view === 'editor') void showTab(tab);
 });

 async function ensureEntry(tab: EditorTab): Promise<ModelEntry | null> {
  const cached = entries.get(tab.id);
  if (cached) return cached;
  if (!monaco) return null;
+  loadingTabId.value = tab.id; // lecture REST : plusieurs secondes possibles, il faut le montrer
+  try {
    const res = await gitApi.readFile(tab.repoId, tab.wtPath, tab.file);
    if (disposed) return null;
    const uri = monaco.Uri.parse(`inmemory://arb/${encodeURIComponent(tab.id)}`);
@@ -152,17 +276,24 @@ async function ensureEntry(tab: EditorTab): Promise<ModelEntry | null> {
    const entry: ModelEntry = { model, baseMtime: res.mtime, savedContent: res.content };
    entries.set(tab.id, entry);
    return entry;
+  } finally {
+    if (loadingTabId.value === tab.id) loadingTabId.value = null;
+  }
 }

+/** Unique entonnoir « quelque chose doit s'afficher » : c'est lui qui crée l'éditeur au besoin. */
 async function showTab(tab: EditorTab): Promise<void> {
-  if (!editor.value) return;
  loadError.value = null;
  conflict.value = false;
-  // sauvegarde de la position/scroll de l'onglet quitté
-  if (shownTabId && shownTabId !== tab.id) viewStates.set(shownTabId, editor.value.saveViewState());
+  syncError.value = null;
+  // sauvegarde de la position/scroll de l'onglet quitté, avant tout await
+  if (editor.value && shownTabId && shownTabId !== tab.id) viewStates.set(shownTabId, editor.value.saveViewState());
+  const ed = await ensureEditor();
+  if (!ed || disposed) return;
  try {
    const entry = await ensureEntry(tab);
    if (!entry || disposed || !editor.value) return;
+    if (activeTab.value?.id !== tab.id) return; // un autre onglet a pris la main pendant la lecture
    editor.value.setModel(entry.model);
    const vs = viewStates.get(tab.id);
    if (vs) editor.value.restoreViewState(vs);
@@ -227,6 +358,7 @@ async function reload(): Promise<void> {
    entry.baseMtime = res.mtime;
    entry.savedContent = res.content;
    conflict.value = false;
+    syncError.value = null;
    ide.setTabDirty(tab.id, false);
  } catch (err) {
    loadError.value = err instanceof Error ? err.message : String(err);
@@ -244,6 +376,7 @@ async function syncActiveTabFromDisk(): Promise<void> {
  if (!tab || tab.view !== 'editor' || saving.value) return;
  const entry = entries.get(tab.id);
  if (!entry) return;
+  syncError.value = null;
  try {
    const res = await gitApi.readFile(tab.repoId, tab.wtPath, tab.file);
    if (res.mtime === entry.baseMtime || res.content === entry.savedContent) return; // ce fichier-là n'a pas changé
@@ -255,20 +388,23 @@ async function syncActiveTabFromDisk(): Promise<void> {
    entry.baseMtime = res.mtime;
    entry.savedContent = res.content;
    ide.setTabDirty(tab.id, false);
-  } catch {
-    /* fichier supprimé ou illisible : on laisse l'onglet en place, la sauvegarde tranchera */
+  } catch (err) {
+    // Le fichier n'est plus lisible (déplacé, supprimé, droits) : on garde l'onglet et le buffer,
+    // mais on le DIT. Avalé en silence, l'utilisateur continuait d'éditer un fichier fantôme et ne
+    // l'apprenait qu'au moment de la sauvegarde.
+    syncError.value = `${t('editor.syncFailed')} : ${err instanceof Error ? err.message : String(err)}`;
  }
 }

-watch(activeVersion, () => {
-  if (ready.value) void syncActiveTabFromDisk();
-});
+watch(activeVersion, () => void syncActiveTabFromDisk());

-// changement d'onglet actif -> affiche le bon modèle (si vue éditeur).
+// changement d'onglet actif -> affiche le bon modèle (si vue éditeur). Plus de garde `ready` : c'est
+// showTab qui crée l'éditeur au besoin. Cette garde faisait que le PREMIER fichier ouvert n'affichait
+// rien quand l'IDE avait été monté sans onglet actif.
 watch(
  () => [activeTab.value?.id, activeTab.value?.view] as const,
  ([, view]) => {
-    if (ready.value && activeTab.value && view === 'editor') void showTab(activeTab.value);
+    if (activeTab.value && view === 'editor') void showTab(activeTab.value);
  },
 );

@@ -1,5 +1,6 @@
 <template>
-  <div class="no-scrollbar flex h-[var(--ide-tab-h)] shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface-1">
+  <div class="flex h-[var(--ide-tab-h)] shrink-0 items-stretch border-b border-border bg-surface-1">
+    <div class="no-scrollbar flex min-w-0 flex-1 items-stretch overflow-x-auto">
      <div
        v-for="tab in ide.editorTabs"
        :key="tab.id"
@@ -23,6 +24,13 @@
        </button>
      </div>
    </div>
+
+    <!-- Bascule de mode de la zone centrale : hors de la zone défilante, donc toujours visible, et
+         rendue même sans aucun onglet ouvert. -->
+    <div v-if="$slots.trailing" class="flex shrink-0 items-center border-l border-border px-2">
+      <slot name="trailing" />
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
@@ -1,96 +1,90 @@
 <template>
  <div class="flex h-full min-h-0 flex-col">
-    <template v-if="activeWt">
-      <CommitPanel
-        :repo-id="activeWt.repoId"
-        :wt="activeWt.path"
-        :changes="changes"
-        :git="activeWt.git"
-        :truncated="truncated"
-        :active="activeFile"
-        class="min-h-0 flex-1"
-        @select="onSelect"
-        @changed="load"
-      />
-      <!-- historique : ce qui est déjà acté, sous ce qui ne l'est pas encore -->
-      <CommitHistory
-        :repo-id="activeWt.repoId"
-        :wt="activeWt.path"
-        :version="worktrees.changeVersion(activeWt.repoId, activeWt.path)"
-        class="max-h-[45%] shrink-0"
-      />
-    </template>
-    <div v-else class="flex h-full items-center justify-center p-4">
-      <EmptyState :icon="GitCompare" :title="t('ide.activity.git')" :hint="t('git.noWorktreeHint')" />
+    <div class="label-mono flex items-center gap-1 px-3 py-2" :title="t('git.indexHint')">
+      <GitCompare :size="13" /> {{ t('ide.activity.git') }}
+      <BaseBadge v-if="pendingCount" tone="warn" class="ml-auto">{{ pendingCount }}</BaseBadge>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-auto pb-2">
+      <!-- Les trois états distingués, comme dans l'explorateur : chargement, échec, vide. -->
+      <SkeletonRow v-if="worktrees.loading && repos.length === 0" :count="4" :height="22" class="px-2 py-1" />
+      <div v-else-if="worktrees.loadError" class="px-3 py-2 text-xs">
+        <p class="text-danger">{{ worktrees.loadError }}</p>
+        <button type="button" class="mt-1 rounded px-1 text-accent hover:bg-surface-2" @click="worktrees.fetchAll()">
+          {{ t('common.retry') }}
+        </button>
+      </div>
+      <p v-else-if="repos.length === 0" class="px-3 py-2 text-xs text-fg-subtle">{{ t('ide.noProjects') }}</p>
+
+      <div v-for="repo in repos" :key="repo.id">
+        <div class="flex items-center gap-1.5 px-2 py-1 text-xs">
+          <FolderGit2 :size="13" class="shrink-0" :style="tint(repo.id)" />
+          <span class="truncate font-medium" :title="repo.path">{{ repo.label }}</span>
+          <span v-if="dirtyFilesFor(repo.id)" class="ml-auto shrink-0 text-[10px] text-fg-subtle">
+            {{ t('changes.repoDirty', { n: dirtyFilesFor(repo.id) }, dirtyFilesFor(repo.id)) }}
+          </span>
+        </div>
+        <p v-if="worktreesFor(repo.id).length === 0" class="px-6 py-0.5 text-[11px] text-fg-subtle">{{ t('ide.noWorktrees') }}</p>
+        <button
+          v-for="wt in worktreesFor(repo.id)"
+          :key="wt.path"
+          type="button"
+          class="flex h-[var(--ide-row-h)] w-full items-center gap-1.5 px-2 pl-6 text-left text-xs"
+          :class="isActive(wt) ? 'bg-surface-2 text-fg' : 'text-fg-muted hover:bg-surface-2/50'"
+          :title="wt.path"
+          @click="ide.openChanges(wt.repoId, wt.path)"
+        >
+          <component :is="wt.isMain ? Home : GitBranch" :size="13" class="shrink-0 text-fg-subtle" />
+          <span class="truncate font-mono">{{ wt.branch ?? t('worktrees.detached') }}</span>
+          <GitStatusBadge :git="wt.git" :branch="wt.branch" dense class="ml-auto shrink-0" />
+          <!-- Dans une sidebar de 288 px, le nom de branche passe avant tout : « à pousser » est
+               actionnable donc il reste, l'absence d'upstream est un simple marqueur (le détail est
+               dans l'infobulle du badge et dans le bloc de la vue Changements). -->
+          <span v-if="unpushed(wt)" class="shrink-0 text-[10px] text-warn">{{ t('changes.unpushed', { n: unpushed(wt) }) }}</span>
+          <span v-else-if="!wt.git.upstream" class="shrink-0 text-[10px] text-fg-subtle" :title="t('git.noUpstream')">◦</span>
+        </button>
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-// Panneau Git de l'IDE : cible le worktree actif (ide.activeContext) et charge ses changements.
-// L'abonnement disque ne vit PLUS ici : ce composant est démonté dès qu'on quitte l'onglet Git, ce qui
-// coupait le seul `watch` de toute l'app. C'est désormais useWatchedWorktrees (monté dans App.vue) qui
-// s'abonne et incrémente le jeton `changeVersion` du store, observé ci-dessous.
-import { computed, ref, watch } from 'vue';
+// Index Git de la barre latérale : l'inventaire de TOUS les projets ouverts et de leurs worktrees,
+// avec leur état git. Le clic ouvre le détail (fichiers, commit, push, historique) dans la vue
+// Changements de la zone centrale, où il y a la place de travailler.
+// Ce panneau ne fait AUCUN appel réseau : ahead/behind, staged, unstaged et conflits arrivent déjà
+// dans chaque `worktree_update`. C'est aussi pour ça que l'ancien `catch {}` silencieux a disparu :
+// il n'y a plus rien à charger ici. Le nombre exact de commits non poussés d'une branche sans
+// upstream demanderait un `git log` par worktree : on affiche le marqueur, pas un chiffre faux.
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { GitCompare } from '@lucide/vue';
-import type { FileChange } from '@arboretum/shared';
-import { useIdeStore, tabId } from '../../stores/ide';
+import { FolderGit2, GitBranch, GitCompare, Home } from '@lucide/vue';
+import type { WorktreeSummary } from '@arboretum/shared';
+import { useIdeStore } from '../../stores/ide';
 import { useWorktreesStore } from '../../stores/worktrees';
-import { gitApi } from '../../lib/git-api';
-import CommitPanel from '../workspace/CommitPanel.vue';
-import CommitHistory from '../workspace/CommitHistory.vue';
-import EmptyState from '../ui/EmptyState.vue';
+import { useGroupsStore } from '../../stores/groups';
+import { dirtyFileCount, pendingWorktreeCount, sortForIndex } from '../../lib/changes-model';
+import GitStatusBadge from '../workspace/GitStatusBadge.vue';
+import BaseBadge from '../ui/BaseBadge.vue';
+import SkeletonRow from '../ui/SkeletonRow.vue';

 const { t } = useI18n();
 const ide = useIdeStore();
 const worktrees = useWorktreesStore();
+const groupsStore = useGroupsStore();

-const changes = ref<FileChange[]>([]);
-const truncated = ref(false);
+const repos = computed(() => worktrees.visibleRepos);
+const pendingCount = computed(() => pendingWorktreeCount(repos.value, (id) => worktrees.worktreesForRepo(id)));

-const activeWt = computed(() => {
-  const c = ide.activeContext;
-  if (!c) return null;
-  return worktrees.worktrees.find((w) => w.repoId === c.repoId && w.path === c.wtPath) ?? null;
-});
+const worktreesFor = (repoId: string): WorktreeSummary[] => sortForIndex(worktrees.worktreesForRepo(repoId));
+const dirtyFilesFor = (repoId: string): number =>
+  worktrees.worktreesForRepo(repoId).reduce((sum, w) => sum + dirtyFileCount(w.git), 0);
+const unpushed = (wt: WorktreeSummary): number => (wt.git.upstream ? wt.git.ahead : 0);
+const isActive = (wt: WorktreeSummary): boolean =>
+  ide.activeContext?.repoId === wt.repoId && ide.activeContext?.wtPath === wt.path;

-const activeFile = computed(() => {
-  const tab = ide.activeTab;
-  const wt = activeWt.value;
-  return tab && wt && tab.repoId === wt.repoId && tab.wtPath === wt.path ? tab.file : null;
-});
-
-async function load(): Promise<void> {
-  const wt = activeWt.value;
-  if (!wt) {
-    changes.value = [];
-    truncated.value = false;
-    return;
+function tint(repoId: string): Record<string, string> {
+  const color = groupsStore.colorForRepo(repoId);
+  return color ? { color } : {};
 }
-  try {
-    const res = await gitApi.changes(wt.repoId, wt.path);
-    changes.value = res.changes;
-    truncated.value = res.truncated;
-  } catch {
-    /* worktree transitoire / erreur réseau : on garde l'état précédent */
-  }
-}
-
-function onSelect(sel: { file: string; staged: boolean }): void {
-  const wt = activeWt.value;
-  if (!wt) return;
-  ide.openFile(wt.repoId, wt.path, sel.file, 'diff');
-  ide.setTabView(tabId(wt.repoId, wt.path, sel.file), 'diff', sel.staged);
-}
-
-// Recharge à chaque changement de worktree actif ET à chaque modification disque de celui-ci.
-watch(
-  () => {
-    const wt = activeWt.value;
-    return wt ? `${wt.repoId}\0${wt.path}\0${worktrees.changeVersion(wt.repoId, wt.path)}` : null;
-  },
-  () => void load(),
-  { immediate: true },
-);
 </script>
@@ -10,8 +10,9 @@
      <!-- « À traiter » visible quel que soit le panneau mobile actif (cf. PrimarySidebar côté desktop) -->
      <AttentionList />
      <div class="min-h-0 flex-1 overflow-hidden">
+        <!-- Pas d'index Git sur mobile : c'est une affordance de la sidebar desktop. Sur téléphone,
+             le panneau 'changes' est rendu par EditorArea, qui suit `ide.centerMode`. -->
        <ProjectTree v-if="ide.mobilePanel === 'explorer'" />
-        <GitPanel v-else-if="ide.mobilePanel === 'git'" />
        <TerminalDock v-else-if="ide.mobilePanel === 'terminal'" />
        <SessionsPanel v-else-if="ide.mobilePanel === 'sessions'" />
        <GroupsPanel v-else-if="ide.mobilePanel === 'groups'" />
@@ -88,7 +89,6 @@ import StatusBar from './StatusBar.vue';
 import EditorArea from './EditorArea.vue';
 import TerminalDock from './TerminalDock.vue';
 import ProjectTree from './ProjectTree.vue';
-import GitPanel from './GitPanel.vue';
 import SessionsPanel from './SessionsPanel.vue';
 import GroupsPanel from './GroupsPanel.vue';
 import AttentionList from './AttentionList.vue';
@@ -140,13 +140,17 @@ const mobilePanels = computed(() => [
  { key: 'explorer', icon: FolderTree, label: t('ide.activity.explorer') },
  { key: 'editor', icon: FileCode, label: t('workspace.editor') },
  { key: 'terminal', icon: SquareTerminal, label: t('ide.terminals') },
-  { key: 'git', icon: GitCompare, label: t('ide.activity.git') },
+  { key: 'changes', icon: GitCompare, label: t('workspace.changes') },
  { key: 'sessions', icon: List, label: t('ide.activity.sessions') },
  { key: 'groups', icon: Boxes, label: t('ide.activity.groups') },
 ]);
 const mobileTitle = computed(() => mobilePanels.value.find((p) => p.key === ide.mobilePanel)?.label ?? '');
+// Les deux modes de la zone centrale passent par le store : `mobilePanel` et `centerMode` y sont
+// écrits au même endroit, donc ils ne peuvent pas diverger.
 const setMobilePanel = (key: string): void => {
-  ide.mobilePanel = key;
+  if (key === 'changes') ide.setCenterMode('changes');
+  else if (key === 'editor') ide.setCenterMode('files');
+  else ide.mobilePanel = key;
 };

 // Deep-link / redirections rétro-compat. /workspace/:repoId/:wt (ex. extension VS Code) cible un
@@ -246,9 +246,10 @@ function openWtMenu(e: MouseEvent, wt: WorktreeSummary): void {
  ctx.open(e.clientX, e.clientY, items);
 }

+// Le détail git vit désormais dans la zone centrale : on rend le worktree actif, on déplie son bloc
+// et on bascule la vue Changements au premier plan (la sidebar n'en garde que l'index).
 function openGitPanel(wt: WorktreeSummary): void {
-  ide.setActiveWorktree(wt.repoId, wt.path);
-  ide.setActivity('git');
+  ide.openChanges(wt.repoId, wt.path);
 }

 async function onPush(wt: WorktreeSummary): Promise<void> {
@@ -7,6 +7,8 @@
      class="inline-flex items-center gap-1.5 rounded-[9px] px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/60"
      :class="opt.value === modelValue ? 'bg-surface-2 text-fg' : 'text-fg-muted hover:text-fg'"
      :aria-pressed="opt.value === modelValue"
+      :title="opt.title ?? opt.label"
+      :aria-label="opt.label ? undefined : opt.title"
      @click="emit('update:modelValue', opt.value)"
    >
      <component :is="opt.icon" v-if="opt.icon" :size="15" />
@@ -23,6 +25,8 @@ export interface SegmentOption {
  value: string;
  label?: string;
  icon?: Component;
+  /** Infobulle : indispensable quand l'option n'a qu'une icône (sert aussi d'aria-label). */
+  title?: string;
 }

 defineProps<{ modelValue: string; options: SegmentOption[] }>();
@@ -80,7 +80,10 @@ const props = defineProps<{ repoId: string; wt: string; version: number }>();
 const { t, locale } = useI18n();

 const PAGE = 30;
-const open = persistedRef<boolean>('arb.history.open', false);
+// Repli mémorisé PAR worktree : la clé était globale, donc un seul clic aurait déplié les N
+// historiques de la vue Changements et lancé N `git log`. La clé est lue une fois au setup, les
+// appelants doivent donc poser un `:key` par worktree (c'est le cas des blocs).
+const open = persistedRef<boolean>(`arb.history.open:${props.repoId}\0${props.wt}`, false);
 const commits = ref<CommitEntry[]>([]);
 const unpushedCount = ref(0);
 const hasUpstream = ref(false);
@@ -1,10 +1,16 @@
 <template>
-  <!-- pas de bordure haute : ce panneau est le premier enfant du panneau Git (le trait était un
-       vestige de l'ancien layout, où il vivait sous le contenu). -->
-  <div class="flex h-full flex-col">
-    <!-- en-tête + actions distantes -->
+  <!-- Layout « bloc » : ce panneau est monté une fois par worktree dans une vue qui défile, donc sa
+       hauteur suit son contenu et c'est la LISTE qui est bornée. Un `h-full` avec une liste `flex-1`
+       ne fonctionnerait que dans un parent à hauteur définie. -->
+  <div class="flex flex-col">
+    <!-- Actions distantes. Pas de titre : le bloc qui monte ce panneau nomme déjà le worktree, et
+         répéter « Changements » sous l'en-tête de la vue Changements ne disait rien de plus. -->
    <div class="flex items-center gap-1 px-2 py-1 label-mono">
-      <GitCompare :size="13" /> {{ t('workspace.changes') }}
+      <!-- L'upstream nomme le contexte des deux boutons de droite : sans lui, cette ligne était une
+           barre d'icônes orpheline. -->
+      <span class="min-w-0 truncate normal-case" :class="git.upstream ? 'text-fg-subtle' : 'text-fg-subtle/70'">
+        {{ git.upstream ?? t('git.noUpstream') }}
+      </span>
      <span v-if="git.ahead" class="text-accent">↑{{ git.ahead }}</span>
      <span v-if="git.behind" class="text-warn">↓{{ git.behind }}</span>
      <span class="ml-auto flex items-center gap-1">
@@ -13,7 +19,7 @@
      </span>
    </div>

-    <div class="min-h-0 flex-1 overflow-auto">
+    <div class="max-h-[50vh] overflow-auto">
      <!-- fichiers indexés (staged) -->
      <div v-if="staged.length" class="px-1">
        <div class="flex items-center px-1 py-0.5 text-[11px] text-fg-subtle">
@@ -67,9 +73,9 @@
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowDownToLine, Check, Download, GitCompare, Minus, Plus, Undo2, Upload } from '@lucide/vue';
+import { ArrowDownToLine, Check, Download, Minus, Plus, Undo2, Upload } from '@lucide/vue';
 import type { FileChange, WorktreeGitStatus, WorktreeSummary } from '@arboretum/shared';
 import { gitApi } from '../../lib/git-api';
 import { ApiError } from '../../lib/api';
@@ -90,10 +96,33 @@ const amend = ref(false);
 const busy = ref<string | null>(null);
 const error = ref<string | null>(null);
 const discardArmed = ref<string | null>(null);
-const canRebase = ref(false);
+// Un `git pull --ff-only` a échoué : la divergence est constatée, on propose le rebase même si les
+// compteurs ne l'annoncent pas encore.
+const ffFailed = ref(false);

-const canCommit = computed(() => !busy.value && staged.value.length > 0 && (amend.value || message.value.trim() !== ''));
-const canPush = computed(() => !!props.git && props.git.behind === 0); // push simple (ff) ; le serveur gère l'upstream
+// Le serveur autorise l'amend d'un message seul (sans rien d'indexé) : l'exiger ici privait d'une
+// correction de message pourtant sans risque.
+const canCommit = computed(() =>
+  !busy.value &&
+  (amend.value
+    ? message.value.trim() !== '' || staged.value.length > 0
+    : staged.value.length > 0 && message.value.trim() !== ''),
+);
+// Ne rien pousser n'a aucun sens, et être en retard n'empêche pas de pousser (git tranche, et son
+// refus s'affiche ci-dessous). Sans upstream, le serveur publie la branche via `push -u origin`.
+const canPush = computed(() => !busy.value && (!props.git.upstream || props.git.ahead > 0));
+// Pas de garde `busy` ici : le bouton porte déjà son propre indicateur de chargement, et le faire
+// disparaître pendant le rebase serait déroutant.
+const canRebase = computed(() => ffFailed.value || props.git.behind > 0);
+
+// Une confirmation destructive ne doit pas survivre à un rechargement de liste ni à un changement de
+// worktree : la ligne sous le curseur peut avoir changé d'identité entre l'armement et le clic.
+watch(
+  () => [props.repoId, props.wt, props.changes] as const,
+  () => {
+    discardArmed.value = null;
+  },
+);

 function select(c: FileChange, stagedSide: boolean): void {
  emit('select', { file: c.path, staged: stagedSide });
@@ -140,11 +169,11 @@ async function onCommit(): Promise<void> {
 const onPush = () => run('push', () => store.pushWorktree(props.repoId, props.wt).then((worktree) => ({ worktree }))).catch(() => {});

 async function onPull(mode: 'ff-only' | 'rebase'): Promise<void> {
-  canRebase.value = false;
  try {
    await run(mode === 'rebase' ? 'rebase' : 'pull', () => gitApi.pull(props.repoId, props.wt, mode));
+    ffFailed.value = false;
  } catch {
-    if (mode === 'ff-only') canRebase.value = true; // ff impossible (divergence) → proposer le rebase
+    if (mode === 'ff-only') ffFailed.value = true; // ff impossible (divergence) → proposer le rebase
  }
 }
 </script>
@@ -1,10 +1,27 @@
 // Chargement paresseux de Monaco : le gros paquet n'est tiré qu'à la première ouverture d'un
-// fichier dans l'IDE. Mémoïsé (un seul import partagé entre toutes les instances d'éditeur).
+// fichier dans l'IDE. Le SUCCÈS est mémoïsé (un seul import partagé entre tous les appelants) ;
+// l'ÉCHEC ne l'est PAS.
 import type * as Monaco from 'monaco-editor';

+type MonacoImporter = () => Promise<typeof Monaco>;
+
+const defaultImporter: MonacoImporter = () => import('../lib/monaco-setup').then((m) => m.monaco);
+
 let monacoPromise: Promise<typeof Monaco> | null = null;

-export function loadMonaco(): Promise<typeof Monaco> {
-  monacoPromise ??= import('../lib/monaco-setup').then((m) => m.monaco);
-  return monacoPromise;
+/**
+ * Mémoïser un rejet condamnait l'éditeur pour toute la session : un chunk absent (index.html
+ * périmé après une mise à jour) ou une coupure réseau rendait tout nouvel essai instantanément
+ * perdant, sans le moindre message à l'écran. On oublie donc la promesse en échec pour qu'un
+ * « Réessayer » refasse un véritable import.
+ *
+ * `importer` n'existe que pour les tests (aucun appelant applicatif ne le passe) : il permet de
+ * vérifier ce contrat sans charger monaco-editor dans un environnement node.
+ */
+export function loadMonaco(importer: MonacoImporter = defaultImporter): Promise<typeof Monaco> {
+  const pending = (monacoPromise ??= importer());
+  return pending.catch((err: unknown) => {
+    if (monacoPromise === pending) monacoPromise = null;
+    throw err;
+  });
 }
@@ -4,6 +4,7 @@ import { useSessionsStore } from '../stores/sessions';
 import { useWorktreesStore } from '../stores/worktrees';
 import { useGroupsStore } from '../stores/groups';
 import { useSettingsStore } from '../stores/settings';
+import { useChangesStore } from '../stores/changes';
 import { wsClient } from '../lib/ws-client';

 /**
@@ -18,6 +19,7 @@ export function useRealtimeBootstrap(): void {
  const worktrees = useWorktreesStore();
  const groups = useGroupsStore();
  const settings = useSettingsStore();
+  const changes = useChangesStore();

  let started = false;

@@ -27,6 +29,9 @@ export function useRealtimeBootstrap(): void {
    void sessions.fetchSessions();
    void groups.fetchGroups();
    void settings.fetch(); // alimente l'icône de nav Gitea et la vue Réglages
+    // Les listes de fichiers modifiés ne sont jamais diffusées par WS : après une coupure, celles
+    // déjà chargées sont suspectes. On les repérime (les blocs visibles rechargeront).
+    changes.invalidateAll();
  }

  function start(): void {
@@ -46,6 +51,7 @@ export function useRealtimeBootstrap(): void {
    sessions.stopRealtime();
    groups.stopRealtime();
    settings.stopRealtime();
+    changes.reset();
  }

  watch(
@@ -1,5 +1,5 @@
 import { computed, onScopeDispose, watch } from 'vue';
-import { useIdeStore } from '../stores/ide';
+import { parseWtKey, useIdeStore } from '../stores/ide';
 import { useWorktreesStore } from '../stores/worktrees';
 import { wsClient } from '../lib/ws-client';

@@ -43,6 +43,16 @@ export function useWatchedWorktrees(): void {
    // Le worktree actif d'abord : il doit survivre au plafond.
    const ctx = ide.activeContext;
    if (ctx) add(ctx.repoId, ctx.wtPath);
+    // Blocs dépliés de la vue Changements : ils affichent une liste de fichiers modifiés, donc ils
+    // ont besoin du même jeton d'invalidation que l'arbre de fichiers. Priorité juste après le
+    // worktree actif : en mode « changements », c'est précisément ce que l'utilisateur regarde.
+    for (const key of ide.changesExpanded) {
+      const ref = parseWtKey(key);
+      if (!ref) continue;
+      if (worktrees.worktrees.some((w) => w.repoId === ref.repoId && w.path === ref.wtPath)) {
+        add(ref.repoId, ref.wtPath);
+      }
+    }
    // Worktrees dont l'arbre de fichiers est déplié : ils peuvent l'être depuis le panneau Groupes,
    // sans que leur dépôt soit déplié dans l'Explorateur. Sans eux, cet arbre-là ne recevrait aucun
    // `worktree_changes` et resterait figé sur son premier chargement.
@@ -293,6 +293,12 @@ export default {
    conflict: 'This file changed on disk since you opened it.',
    reload: 'Reload',
    overwrite: 'Overwrite',
+    loadingEditor: 'Loading the code editor…',
+    loadingFile: 'Loading file…',
+    loadFailed: 'The code editor could not be loaded.',
+    loadFailedHint: 'Check your connection, then retry. If it keeps failing, reload the page.',
+    reloadPage: 'Reload page',
+    syncFailed: 'This file can no longer be read on disk (moved, deleted, or not readable).',
  },
  diff: {
    binary: 'Binary file. No text diff.',
@@ -306,6 +312,7 @@ export default {
    unstaged: 'unstaged',
    conflicts: 'conflicts',
    noWorktreeHint: 'Pick a worktree in the explorer to see its changes.',
+    indexHint: 'Every open project and its worktrees. Pick one to review, commit and push it.',
    locked: 'locked worktree',
    prunable: 'stale worktree (prunable)',
    detached: 'detached HEAD',
@@ -333,6 +340,21 @@ export default {
    pushUnsupported: 'unavailable (requires HTTPS; on iOS, install the PWA first)',
    pwaHint: 'On mobile, install Arboretum as an app (“Add to Home Screen”) for full-screen access and notifications.',
  },
+  changes: {
+    title: 'Changes',
+    summary: 'nothing to commit | 1 worktree to review | {n} worktrees to review',
+    repoDirty: 'no change | 1 changed file | {n} changed files',
+    allClean: 'Everything is committed and pushed',
+    allCleanHint: 'No uncommitted change in your open projects. Show clean worktrees to review them anyway.',
+    showClean: 'Show clean worktrees',
+    hideClean: 'Hide clean worktrees',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+    unpushed: '{n} to push',
+    openInEditor: 'Open in an editor tab',
+    loadFailed: 'Could not read the changes of this worktree.',
+    clean: 'clean',
+  },
  history: {
    title: 'History',
    empty: 'No commit on this branch.',
@@ -295,6 +295,12 @@ const fr: typeof en = {
    conflict: 'Ce fichier a changé sur le disque depuis son ouverture.',
    reload: 'Recharger',
    overwrite: 'Écraser',
+    loadingEditor: 'Chargement de l’éditeur de code…',
+    loadingFile: 'Chargement du fichier…',
+    loadFailed: 'L’éditeur de code n’a pas pu être chargé.',
+    loadFailedHint: 'Vérifiez votre connexion puis réessayez. Si l’échec persiste, rechargez la page.',
+    reloadPage: 'Recharger la page',
+    syncFailed: 'Ce fichier n’est plus lisible sur le disque (déplacé, supprimé, ou droits insuffisants).',
  },
  diff: {
    binary: 'Fichier binaire. Pas de diff texte.',
@@ -308,6 +314,7 @@ const fr: typeof en = {
    unstaged: 'non indexé',
    conflicts: 'conflits',
    noWorktreeHint: 'Sélectionnez un worktree dans l’explorateur pour voir ses changements.',
+    indexHint: 'Tous vos projets ouverts et leurs worktrees. Choisissez-en un pour le relire, le committer et le pousser.',
    locked: 'worktree verrouillé',
    prunable: 'worktree orphelin (à nettoyer)',
    detached: 'HEAD détaché',
@@ -335,6 +342,21 @@ const fr: typeof en = {
    pushUnsupported: 'non disponibles (nécessite HTTPS ; sur iOS, installez la PWA)',
    pwaHint: 'Sur mobile, installez Arboretum comme application (« Ajouter à l’écran d’accueil ») pour un accès plein écran et les notifications.',
  },
+  changes: {
+    title: 'Changements',
+    summary: 'rien à committer | 1 worktree à relire | {n} worktrees à relire',
+    repoDirty: 'aucun changement | 1 fichier modifié | {n} fichiers modifiés',
+    allClean: 'Tout est committé et poussé',
+    allCleanHint: 'Aucun changement non committé dans vos projets ouverts. Affichez les worktrees propres pour les relire quand même.',
+    showClean: 'Afficher les worktrees propres',
+    hideClean: 'Masquer les worktrees propres',
+    expandAll: 'Tout déplier',
+    collapseAll: 'Tout replier',
+    unpushed: '{n} à pousser',
+    openInEditor: 'Ouvrir dans un onglet',
+    loadFailed: 'Impossible de lire les changements de ce worktree.',
+    clean: 'propre',
+  },
  history: {
    title: 'Historique',
    empty: 'Aucun commit sur cette branche.',
@@ -0,0 +1,86 @@
+// Règles d'affichage de la vue « Changements » (zone centrale) et de l'index Git (barre latérale).
+// Fonctions pures : elles ne touchent ni aux stores ni au réseau, et sont testées en isolation.
+import type { RepoSummary, WorktreeGitStatus, WorktreeSummary } from '@arboretum/shared';
+
+/**
+ * Un worktree « a du travail » : quelque chose à indexer, à committer, à résoudre, ou à pousser.
+ * `ahead > 0` compte, la vue servant aussi à pousser un worktree propre mais en avance. Les
+ * compteurs fins sont OPTIONNELS dans le protocole (champs additifs P7) : `dirtyCount` reste le
+ * filet. `behind` seul ne compte pas : rien à faire de notre côté, c'est un pull.
+ */
+export function hasPendingWork(git: WorktreeGitStatus): boolean {
+  return (
+    git.dirtyCount > 0 ||
+    (git.stagedCount ?? 0) > 0 ||
+    (git.unstagedCount ?? 0) > 0 ||
+    (git.conflictCount ?? 0) > 0 ||
+    git.ahead > 0
+  );
+}
+
+/** Nombre de fichiers modifiés d'un worktree, tel qu'affiché sans lire la liste (compteurs WS). */
+export function dirtyFileCount(git: WorktreeGitStatus): number {
+  const fine = (git.stagedCount ?? 0) + (git.unstagedCount ?? 0);
+  return Math.max(git.dirtyCount, fine);
+}
+
+export interface RepoChangesGroup {
+  repo: RepoSummary;
+  worktrees: WorktreeSummary[];
+  /** Somme des fichiers modifiés des worktrees retenus, pour l'en-tête du dépôt. */
+  dirtyFiles: number;
+}
+
+export interface GroupOptions {
+  /** Inclure les worktrees propres et à jour (audit) plutôt que le seul travail en cours. */
+  showClean: boolean;
+  /** Worktree actif : toujours affiché, même propre, pour que la vue ne se vide pas après un commit. */
+  active: { repoId: string; wtPath: string } | null;
+}
+
+/**
+ * Regroupe les worktrees par dépôt pour la vue Changements. `repos` doit déjà être filtré et trié
+ * (worktrees.visibleRepos) et `forRepo` renvoyer les worktrees d'un dépôt (main d'abord). Un dépôt
+ * dont aucun worktree n'est retenu disparaît entièrement : pas d'en-tête orphelin.
+ */
+export function groupWorktreesByRepo(
+  repos: RepoSummary[],
+  forRepo: (repoId: string) => WorktreeSummary[],
+  opts: GroupOptions,
+): RepoChangesGroup[] {
+  const groups: RepoChangesGroup[] = [];
+  for (const repo of repos) {
+    const kept = forRepo(repo.id).filter(
+      (w) =>
+        opts.showClean ||
+        hasPendingWork(w.git) ||
+        (!!opts.active && opts.active.repoId === w.repoId && opts.active.wtPath === w.path),
+    );
+    if (kept.length === 0) continue;
+    groups.push({
+      repo,
+      worktrees: kept,
+      dirtyFiles: kept.reduce((sum, w) => sum + dirtyFileCount(w.git), 0),
+    });
+  }
+  return groups;
+}
+
+/** Ordre de l'index : ce qui demande une action d'abord, puis le worktree principal, puis le chemin. */
+export function sortForIndex(list: WorktreeSummary[]): WorktreeSummary[] {
+  return [...list].sort(
+    (a, b) =>
+      Number(hasPendingWork(b.git)) - Number(hasPendingWork(a.git)) ||
+      Number(b.isMain) - Number(a.isMain) ||
+      a.path.localeCompare(b.path),
+  );
+}
+
+/** Nombre de worktrees à traiter, tous dépôts visibles confondus (badge de la barre d'activité). */
+export function pendingWorktreeCount(repos: RepoSummary[], forRepo: (repoId: string) => WorktreeSummary[]): number {
+  let n = 0;
+  for (const repo of repos) {
+    for (const w of forRepo(repo.id)) if (hasPendingWork(w.git)) n++;
+  }
+  return n;
+}
@@ -5,12 +5,45 @@
 // avancés (TS/JSON) dégradent proprement : suffisant pour éditer + sauver dans le navigateur.
 import * as monaco from 'monaco-editor';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import type { ResolvedTheme } from './theme';

+// Un worker par famille de langage. Ne fournir que le worker de base ne « dégradait » PAS
+// proprement : dès qu'on ouvrait un .ts, le service TypeScript appelait un worker qui ne connaissait
+// pas ses méthodes, et chaque ouverture jetait un rejet non géré dans la console (getSyntacticDiagnostics,
+// provideInlayHints, ...). Ces workers sont des chunks séparés, téléchargés seulement quand un fichier
+// du langage correspondant est ouvert.
 (self as unknown as { MonacoEnvironment: monaco.Environment }).MonacoEnvironment = {
-  getWorker: () => new EditorWorker(),
+  getWorker: (_id: string, label: string) => {
+    if (label === 'typescript' || label === 'javascript') return new TsWorker();
+    if (label === 'json') return new JsonWorker();
+    if (label === 'css' || label === 'scss' || label === 'less') return new CssWorker();
+    if (label === 'html' || label === 'handlebars' || label === 'razor') return new HtmlWorker();
+    return new EditorWorker();
+  },
 };

+// Les diagnostics SÉMANTIQUES restent coupés, workers ou pas : le worker ne voit qu'un fichier isolé,
+// sans tsconfig ni node_modules, donc il signalerait des dizaines de fausses erreurs (imports non
+// résolus) sur du code parfaitement valide. On garde la coloration, la complétion de base et le
+// pliage ; la vraie vérification de types reste le rôle du terminal.
+monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+  noSemanticValidation: true,
+  noSyntaxValidation: true,
+  noSuggestionDiagnostics: true,
+});
+monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+  noSemanticValidation: true,
+  noSyntaxValidation: true,
+  noSuggestionDiagnostics: true,
+});
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ validate: false });
+monaco.languages.css.cssDefaults.setOptions({ validate: false });
+monaco.languages.html.htmlDefaults.setOptions({});
+
 // Deux thèmes « Emerald » (hex concrets : Monaco n'accepte pas de var CSS). Les couleurs de token
 // (rules) sont SANS '#', les couleurs de chrome (colors) AVEC '#'. À garder synchronisé avec style.css.
 monaco.editor.defineTheme('arboretum-dark', {
@@ -0,0 +1,127 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { FileChange } from '@arboretum/shared';
+import { gitApi } from '../lib/git-api';
+import { useWorktreesStore } from './worktrees';
+import { wtKey } from './ide';
+
+// Cache des listes de fichiers modifiés, par worktree. Le protocole ne diffuse JAMAIS de
+// FileChange[] en WS (REST uniquement) et aucun store ne les gardait : chaque composant refetchait
+// pour lui-même, et la liste mourait avec lui. Une vue qui affiche N dépôts a besoin de l'inverse :
+// un cache partagé, invalidé par le jeton `worktrees.changeVersion` (incrémenté à chaque
+// `worktree_changes`), et une politique de charge explicite.
+//
+// Politique d'erreur de cette surface : une erreur de CHARGEMENT reste en place avec un
+// « Réessayer » (jamais avalée en silence, ce que faisait l'ancien panneau Git) ; une erreur de
+// MUTATION s'affiche dans le panneau qui l'a déclenchée (CommitPanel) ; une action lancée hors
+// panneau (menu contextuel, palette) passe par un toast.
+
+export interface ChangesEntry {
+  changes: FileChange[];
+  truncated: boolean;
+  /** Valeur de changeVersion au DÉBUT du chargement : un worktree_changes en vol repérime l'entrée. */
+  version: number;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Chargements simultanés autorisés. Un dépliage massif ne doit pas ouvrir N requêtes `changes` (donc
+ * N `git status` côté daemon) d'un coup : les demandes sont mises en file et dépilées par paquets.
+ */
+export const MAX_CONCURRENT_LOADS = 3;
+
+interface Pending {
+  repoId: string;
+  wtPath: string;
+}
+
+export const useChangesStore = defineStore('changes', () => {
+  const worktrees = useWorktreesStore();
+  const entries = ref<Record<string, ChangesEntry>>({});
+  // File d'attente et compteur non réactifs : détails d'ordonnancement, pas de l'état de vue.
+  const queue: Pending[] = [];
+  let running = 0;
+
+  function entry(repoId: string, wtPath: string): ChangesEntry | null {
+    return entries.value[wtKey(repoId, wtPath)] ?? null;
+  }
+
+  /** Entrée absente, en erreur, ou plus ancienne que le jeton du worktree. */
+  function isStale(repoId: string, wtPath: string): boolean {
+    const e = entries.value[wtKey(repoId, wtPath)];
+    if (!e) return true;
+    return !e.loading && (e.error !== null || e.version < worktrees.changeVersion(repoId, wtPath));
+  }
+
+  function patch(key: string, next: Partial<ChangesEntry>): void {
+    const prev = entries.value[key] ?? { changes: [], truncated: false, version: -1, loading: false, error: null };
+    entries.value = { ...entries.value, [key]: { ...prev, ...next } };
+  }
+
+  function pump(): void {
+    while (running < MAX_CONCURRENT_LOADS) {
+      const next = queue.shift();
+      if (!next) return;
+      running++;
+      void load(next).finally(() => {
+        running--;
+        pump();
+      });
+    }
+  }
+
+  async function load({ repoId, wtPath }: Pending): Promise<void> {
+    const key = wtKey(repoId, wtPath);
+    const version = worktrees.changeVersion(repoId, wtPath);
+    patch(key, { loading: true, error: null });
+    try {
+      const res = await gitApi.changes(repoId, wtPath);
+      patch(key, { changes: res.changes, truncated: res.truncated, version, loading: false, error: null });
+    } catch (err) {
+      // On conserve la liste précédente : un écran qui se vide est moins lisible qu'une liste
+      // périmée surmontée d'un message.
+      patch(key, { loading: false, error: err instanceof Error ? err.message : String(err) });
+    }
+  }
+
+  /** Demande (idempotente) le chargement si l'entrée est absente ou périmée. */
+  function request(repoId: string, wtPath: string): void {
+    if (!isStale(repoId, wtPath)) return;
+    if (queue.some((q) => q.repoId === repoId && q.wtPath === wtPath)) return;
+    const e = entries.value[wtKey(repoId, wtPath)];
+    if (e?.loading) return;
+    queue.push({ repoId, wtPath });
+    pump();
+  }
+
+  /** Force le rechargement (après une mutation locale) sans vider l'affichage courant. */
+  function invalidate(repoId: string, wtPath: string): void {
+    const key = wtKey(repoId, wtPath);
+    if (entries.value[key]) patch(key, { version: -1 });
+    request(repoId, wtPath);
+  }
+
+  /** Reconnexion WS : le protocole ne rejoue rien, donc toute liste chargée avant est suspecte. */
+  function invalidateAll(): void {
+    const stale: Record<string, ChangesEntry> = {};
+    for (const [key, e] of Object.entries(entries.value)) stale[key] = { ...e, version: -1 };
+    entries.value = stale;
+  }
+
+  /** Bloc replié : on libère (bornage mémoire sur un parc de dépôts important). */
+  function forget(repoId: string, wtPath: string): void {
+    const key = wtKey(repoId, wtPath);
+    if (!entries.value[key]) return;
+    const next = { ...entries.value };
+    delete next[key];
+    entries.value = next;
+  }
+
+  function reset(): void {
+    entries.value = {};
+    queue.length = 0;
+  }
+
+  return { entries, entry, isStale, request, invalidate, invalidateAll, forget, reset };
+});
@@ -14,6 +14,16 @@ import { persistedRef } from '../lib/persisted-ref';

 export type ActivityView = 'explorer' | 'git' | 'sessions' | 'groups';
 export type EditorView = 'editor' | 'diff';
+/** Mode de la zone centrale : lecture/édition de fichiers, ou changements non commités par projet. */
+export type CenterMode = 'files' | 'changes';
+
+/**
+ * Panneaux du layout mobile (sous md, IdeShell n'affiche qu'un panneau, choisi par `mobilePanel`).
+ * Liste blanche : une valeur inconnue laissait l'utilisateur sur un panneau fantôme. Doit rester
+ * alignée sur la chaîne de rendu et la nav de `components/ide/IdeShell.vue`.
+ */
+export const MOBILE_PANELS = ['explorer', 'editor', 'changes', 'terminal', 'sessions', 'groups'] as const;
+export type MobilePanel = (typeof MOBILE_PANELS)[number];

 export interface EditorTab {
  /** Clé composite stable : repoId + wtPath + fichier relatif. */
@@ -38,6 +48,12 @@ export function tabId(repoId: string, wtPath: string, file: string): string {
 export function wtKey(repoId: string, wtPath: string): string {
  return `${repoId}${SEP}${wtPath}`;
 }
+/** Inverse de `wtKey` : les consommateurs d'un ensemble de clés (useWatchedWorktrees) en ont besoin. */
+export function parseWtKey(key: string): WorktreeRef | null {
+  const i = key.indexOf(SEP);
+  if (i <= 0 || i === key.length - 1) return null;
+  return { repoId: key.slice(0, i), wtPath: key.slice(i + 1) };
+}

 export const useIdeStore = defineStore('ide', () => {
  // --- état persisté (références + vue) ---
@@ -58,6 +74,19 @@ export const useIdeStore = defineStore('ide', () => {
  const expandedGroupIds = persistedRef<string[]>('arb.ide.expandedGroups', []);
  const mobilePanel = persistedRef<string>('arb.ide.mobilePanel', 'explorer');

+  const centerMode = persistedRef<CenterMode>('arb.ide.centerMode', 'files');
+  /** Blocs dépliés de la vue Changements, en clés `wtKey`. Réassigné (persistedRef non profond). */
+  const changesExpanded = persistedRef<string[]>('arb.ide.changesExpanded', []);
+  /** Afficher aussi les worktrees propres et à jour (bruit par défaut, utile pour un audit). */
+  const changesShowClean = persistedRef<boolean>('arb.ide.changesShowClean', false);
+
+  // Migration des valeurs de `mobilePanel` devenues invalides. `setActivity` posait 'sidebar', que
+  // le layout mobile ne savait pas rendre (il retombait sur la zone centrale, sans que le bon
+  // bouton de nav ne s'allume) ; et le panneau 'git' est désormais l'index de la sidebar desktop,
+  // son rôle mobile étant tenu par la vue Changements.
+  if (mobilePanel.value === 'git') mobilePanel.value = 'changes';
+  else if (!MOBILE_PANELS.includes(mobilePanel.value as MobilePanel)) mobilePanel.value = 'explorer';
+
  // --- état volatile ---
  const dirty = ref<Record<string, boolean>>({}); // id d'onglet -> modifié non sauvegardé

@@ -74,6 +103,9 @@ export const useIdeStore = defineStore('ide', () => {
  }

  // --- actions onglets ---
+  // `setCenterMode('files')` n'est pas décoratif : sans lui, ouvrir un fichier depuis la vue
+  // Changements n'aurait AUCUN effet visible (l'éditeur est masqué), et sur mobile le layout
+  // resterait sur l'explorateur (cf. openTerminal, même piège).
  function openFile(repoId: string, wtPath: string, file: string, view: EditorView = 'editor'): void {
    const id = tabId(repoId, wtPath, file);
    const existing = editorTabs.value.find((t) => t.id === id);
@@ -84,6 +116,7 @@ export const useIdeStore = defineStore('ide', () => {
    }
    activeTabId.value = id;
    activeContext.value = { repoId, wtPath };
+    setCenterMode('files');
  }

  function setTabView(id: string, view: EditorView, diffStaged?: boolean): void {
@@ -98,6 +131,7 @@ export const useIdeStore = defineStore('ide', () => {
    if (!tab) return;
    activeTabId.value = id;
    activeContext.value = { repoId: tab.repoId, wtPath: tab.wtPath };
+    setCenterMode('files');
  }

  function closeTab(id: string): void {
@@ -169,11 +203,43 @@ export const useIdeStore = defineStore('ide', () => {
    if (next.length === 0) bottomVisible.value = false;
  }

+  // --- actions zone centrale ---
+  /**
+   * Bascule le mode de la zone centrale. SEUL écrivain de `mobilePanel` pour ces deux modes : les
+   * deux états ne peuvent donc pas diverger (cf. openTerminal, le layout mobile suit `mobilePanel`).
+   */
+  function setCenterMode(mode: CenterMode): void {
+    centerMode.value = mode;
+    mobilePanel.value = mode === 'changes' ? 'changes' : 'editor';
+  }
+
+  function toggleChangesWt(key: string): void {
+    changesExpanded.value = changesExpanded.value.includes(key)
+      ? changesExpanded.value.filter((k) => k !== key)
+      : [...changesExpanded.value, key];
+  }
+  function setChangesExpanded(keys: string[]): void {
+    changesExpanded.value = [...keys];
+  }
+
+  /** Rend un worktree actif, déplie son bloc et amène la vue Changements au premier plan. */
+  function openChanges(repoId: string, wtPath: string): void {
+    activeContext.value = { repoId, wtPath };
+    const key = wtKey(repoId, wtPath);
+    if (!changesExpanded.value.includes(key)) changesExpanded.value = [...changesExpanded.value, key];
+    setCenterMode('changes');
+  }
+
  // --- actions panneaux / activité ---
+  // Les 4 vues d'activité sont aussi des panneaux mobiles, à une exception : 'git' est l'index de la
+  // sidebar desktop, dont le rôle mobile est tenu par la vue Changements de la zone centrale.
+  const mobilePanelForActivity = (view: ActivityView): MobilePanel => (view === 'git' ? 'changes' : view);
+
  function setActivity(view: ActivityView): void {
    activeActivity.value = view;
    leftVisible.value = true;
-    mobilePanel.value = 'sidebar'; // cf. openTerminal : le layout mobile suit mobilePanel
+    if (view === 'git') centerMode.value = 'changes';
+    mobilePanel.value = mobilePanelForActivity(view);
  }
  function toggleActivity(view: ActivityView): void {
    // Re-clic sur la vue active alors que le panneau est ouvert : on replie le panneau gauche.
@@ -183,7 +249,8 @@ export const useIdeStore = defineStore('ide', () => {
    }
    activeActivity.value = view;
    leftVisible.value = true;
-    mobilePanel.value = 'sidebar';
+    if (view === 'git') centerMode.value = 'changes';
+    mobilePanel.value = mobilePanelForActivity(view);
  }
  function setActiveWorktree(repoId: string, wtPath: string): void {
    activeContext.value = { repoId, wtPath };
@@ -275,6 +342,9 @@ export const useIdeStore = defineStore('ide', () => {
    expandedWtPaths,
    expandedGroupIds,
    mobilePanel,
+    centerMode,
+    changesExpanded,
+    changesShowClean,
    // getters
    activeTab,
    tabsCount,
@@ -291,6 +361,10 @@ export const useIdeStore = defineStore('ide', () => {
    openTerminal,
    focusTerminal,
    closeTerminal,
+    setCenterMode,
+    toggleChangesWt,
+    setChangesExpanded,
+    openChanges,
    setActivity,
    toggleActivity,
    setActiveWorktree,
@@ -180,13 +180,6 @@ export const useWorktreesStore = defineStore('worktrees', () => {
    return api.get<RepoBranchesResponse>(`/api/v1/repos/${repoId}/branches`);
  }

-  /** Commit (add -A + commit) dans un worktree ; le worktree mis à jour arrive aussi par WS. */
-  async function commitWorktree(repoId: string, path: string, message: string): Promise<WorktreeSummary> {
-    const res = await api.post<WorktreeResponse>(`/api/v1/repos/${repoId}/worktrees/commit`, { path, message });
-    upsertWorktree(res.worktree);
-    return res.worktree;
-  }
-
  /** Push de la branche d'un worktree (upstream auto si absent). */
  async function pushWorktree(repoId: string, path: string): Promise<WorktreeSummary> {
    const res = await api.post<WorktreeResponse>(`/api/v1/repos/${repoId}/worktrees/push`, { path });
@@ -232,7 +225,6 @@ export const useWorktreesStore = defineStore('worktrees', () => {
    deleteWorktree,
    prune,
    fetchBranches,
-    commitWorktree,
    pushWorktree,
    promoteWorktree,
    startRealtime,
@@ -30,7 +30,7 @@ const en: HelpSection[] = [
      },
      {
        title: 'The IDE layout',
-        body: 'Everything lives in one window: the activity bar on the left switches between Explorer, Git, Sessions and Groups; the centre holds editor tabs; the bottom dock holds terminals. Drag the separators to resize, or focus them and use the arrow keys.',
+        body: 'Everything lives in one window: the activity bar on the left switches between Explorer, Git, Sessions and Groups; the centre holds editor tabs; the bottom dock holds terminals. Drag the separators to resize, or focus them and use the arrow keys. The two buttons on the right of the tab bar switch the centre between Files and Changes.',
      },
      {
        title: 'Remote access',
@@ -92,19 +92,19 @@ const en: HelpSection[] = [
      },
      {
        title: 'Diffs',
-        body: 'The Git panel lists changed files; click one to see its unified diff. Every diff tab switches between Editor and Diff, and refreshes on its own when the file changes on disk.',
+        body: 'Changes is the working surface: one block per worktree, across every open project. Click a changed file to unfold its unified diff right under the list, or send it to a full-width editor tab. Diffs refresh on their own when the file changes on disk. The Git panel in the sidebar is the index: it shows what every project is worth and opens the matching block.',
      },
      {
        title: 'Stage & commit',
-        body: 'Stage or unstage file by file, or all at once, then commit the index only, or everything. Amend rewrites the last commit (refused once pushed). Discard is destructive and asks for a confirmation click.',
+        body: 'Stage or unstage file by file, or all at once, then commit the index. Amend rewrites the last commit, message only if you want (refused once pushed). Discard is destructive and asks for a confirmation click. Every project keeps its own block, so a commit never mixes two repositories.',
      },
      {
        title: 'History',
-        body: 'The History section under the Git panel lists the branch commits, marks those not pushed yet, and unfolds the full diff of any commit in place. Its counter answers the question that matters before removing a worktree: is there local work that would be lost?',
+        body: 'Each block carries its own History section, folded until you need it: the branch commits, those not pushed yet, and the full diff of any commit unfolded in place. Its counter answers the question that matters before removing a worktree: is there local work that would be lost?',
      },
      {
        title: 'Fetch, pull & push',
-        body: 'Fetch and pull (fast-forward only, or rebase) live in the Git panel header. Push publishes the branch and sets its upstream on first push.',
+        body: 'Fetch and pull (fast-forward only, or rebase) live in the header of each block. Push publishes the branch and sets its upstream on first push; it stays greyed out when there is nothing to publish.',
      },
    ],
  },
@@ -269,7 +269,7 @@ const fr: HelpSection[] = [
      },
      {
        title: 'L’organisation de l’IDE',
-        body: 'Tout tient dans une seule fenêtre : la barre d’activité à gauche bascule entre Explorateur, Git, Sessions et Groupes ; le centre porte les onglets d’éditeur ; le dock du bas porte les terminaux. Les séparateurs se déplacent à la souris, ou au clavier avec les flèches une fois focalisés.',
+        body: 'Tout tient dans une seule fenêtre : la barre d’activité à gauche bascule entre Explorateur, Git, Sessions et Groupes ; le centre porte les onglets d’éditeur ; le dock du bas porte les terminaux. Les séparateurs se déplacent à la souris, ou au clavier avec les flèches une fois focalisés. Les deux boutons à droite de la barre d’onglets basculent le centre entre Fichiers et Changements.',
      },
      {
        title: 'Accès distant',
@@ -331,19 +331,19 @@ const fr: HelpSection[] = [
      },
      {
        title: 'Diffs',
-        body: 'Le panneau Git liste les fichiers modifiés ; un clic affiche son diff unifié. Chaque onglet bascule entre Éditeur et Diff, et se rafraîchit seul quand le fichier change sur le disque.',
+        body: 'La vue Changements est la surface de travail : un bloc par worktree, pour tous vos projets ouverts. Un clic sur un fichier modifié déplie son diff unifié juste sous la liste, ou l’envoie dans un onglet pleine largeur. Les diffs se rafraîchissent seuls quand le fichier change sur le disque. Le panneau Git de la barre latérale est l’index : il montre ce que vaut chaque projet et ouvre le bloc correspondant.',
      },
      {
        title: 'Indexer & committer',
-        body: 'Indexez ou désindexez fichier par fichier, ou tout d’un coup, puis committez l’index seul ou l’ensemble. « Amender » réécrit le dernier commit (refusé s’il est déjà poussé). « Abandonner » est destructif et demande une confirmation.',
+        body: 'Indexez ou désindexez fichier par fichier, ou tout d’un coup, puis committez l’index. « Amender » réécrit le dernier commit, son message seul si vous le souhaitez (refusé s’il est déjà poussé). « Abandonner » est destructif et demande une confirmation. Chaque projet garde son bloc : un commit ne mélange jamais deux dépôts.',
      },
      {
        title: 'Historique',
-        body: 'La section Historique, sous le panneau Git, liste les commits de la branche, marque ceux qui ne sont pas encore poussés, et déplie sur place le diff complet de n’importe lequel. Son compteur répond à la question qui compte avant de supprimer un worktree : reste-t-il du travail local qui serait perdu ?',
+        body: 'Chaque bloc porte sa propre section Historique, repliée jusqu’à ce que vous en ayez besoin : les commits de la branche, ceux qui ne sont pas encore poussés, et le diff complet de n’importe lequel déplié sur place. Son compteur répond à la question qui compte avant de supprimer un worktree : reste-t-il du travail local qui serait perdu ?',
      },
      {
        title: 'Fetch, pull & push',
-        body: 'Fetch et pull (fast-forward seul, ou rebase) sont dans l’en-tête du panneau Git. Push publie la branche et pose son upstream au premier envoi.',
+        body: 'Fetch et pull (fast-forward seul, ou rebase) sont dans l’en-tête de chaque bloc. Push publie la branche et pose son upstream au premier envoi ; il reste grisé quand il n’y a rien à publier.',
      },
    ],
  },
@@ -0,0 +1,127 @@
+// Règles d'affichage de la vue Changements et de l'index Git. Fonctions pures, testées sans DOM.
+import { describe, expect, it } from 'vitest';
+import type { RepoSummary, WorktreeGitStatus, WorktreeSummary } from '@arboretum/shared';
+import {
+  dirtyFileCount,
+  groupWorktreesByRepo,
+  hasPendingWork,
+  pendingWorktreeCount,
+  sortForIndex,
+} from '../src/lib/changes-model';
+
+const git = (over: Partial<WorktreeGitStatus> = {}): WorktreeGitStatus => ({
+  ahead: 0,
+  behind: 0,
+  dirtyCount: 0,
+  upstream: 'origin/main',
+  ...over,
+});
+
+const wt = (path: string, over: Partial<WorktreeSummary> = {}): WorktreeSummary => ({
+  repoId: 'r1',
+  path,
+  branch: path.split('/').pop() ?? null,
+  head: 'abc1234',
+  detached: false,
+  locked: false,
+  prunable: false,
+  isMain: false,
+  git: git(),
+  sessions: [],
+  ...over,
+});
+
+const repo = (id: string, label = id): RepoSummary =>
+  ({ id, path: `/repos/${id}`, label, hidden: false, valid: true }) as unknown as RepoSummary;
+
+describe('hasPendingWork', () => {
+  it('un worktree propre et à jour n a rien à traiter', () => {
+    expect(hasPendingWork(git())).toBe(false);
+  });
+
+  it('détecte chaque forme de travail en attente', () => {
+    expect(hasPendingWork(git({ dirtyCount: 2 }))).toBe(true);
+    expect(hasPendingWork(git({ stagedCount: 1 }))).toBe(true);
+    expect(hasPendingWork(git({ unstagedCount: 1 }))).toBe(true);
+    expect(hasPendingWork(git({ conflictCount: 1 }))).toBe(true);
+    expect(hasPendingWork(git({ ahead: 3 }))).toBe(true); // rien à committer mais à pousser
+  });
+
+  it('être en retard ne demande rien de notre côté', () => {
+    expect(hasPendingWork(git({ behind: 5 }))).toBe(false);
+  });
+
+  it('les compteurs fins étant optionnels dans le protocole, dirtyCount reste le filet', () => {
+    // Cas d'un daemon plus ancien : ni stagedCount ni unstagedCount, seulement dirtyCount.
+    expect(hasPendingWork({ ahead: 0, behind: 0, dirtyCount: 4, upstream: null })).toBe(true);
+  });
+});
+
+describe('dirtyFileCount', () => {
+  it('prend le maximum entre dirtyCount et la somme des compteurs fins', () => {
+    expect(dirtyFileCount(git({ dirtyCount: 3 }))).toBe(3);
+    expect(dirtyFileCount(git({ dirtyCount: 3, stagedCount: 2, unstagedCount: 2 }))).toBe(4);
+  });
+});
+
+describe('groupWorktreesByRepo', () => {
+  const repos = [repo('r1', 'alpha'), repo('r2', 'beta')];
+  const byRepo: Record<string, WorktreeSummary[]> = {
+    r1: [
+      wt('/wt/main', { isMain: true, git: git({ dirtyCount: 2, unstagedCount: 2 }) }),
+      wt('/wt/feature'),
+    ],
+    r2: [wt('/wt/clean', { repoId: 'r2' })],
+  };
+  const forRepo = (id: string): WorktreeSummary[] => byRepo[id] ?? [];
+
+  it('ne garde que ce qui a du travail, et masque un dépôt sans worktree retenu', () => {
+    const groups = groupWorktreesByRepo(repos, forRepo, { showClean: false, active: null });
+    expect(groups).toHaveLength(1);
+    expect(groups[0]?.repo.id).toBe('r1');
+    expect(groups[0]?.worktrees.map((w) => w.path)).toEqual(['/wt/main']);
+    expect(groups[0]?.dirtyFiles).toBe(2);
+  });
+
+  it('showClean inclut tout', () => {
+    const groups = groupWorktreesByRepo(repos, forRepo, { showClean: true, active: null });
+    expect(groups.map((g) => g.repo.id)).toEqual(['r1', 'r2']);
+    expect(groups[0]?.worktrees).toHaveLength(2);
+  });
+
+  it('le worktree actif reste affiché même propre (la vue ne se vide pas après un commit)', () => {
+    const groups = groupWorktreesByRepo(repos, forRepo, {
+      showClean: false,
+      active: { repoId: 'r2', wtPath: '/wt/clean' },
+    });
+    expect(groups.map((g) => g.repo.id)).toEqual(['r1', 'r2']);
+    expect(groups[1]?.worktrees.map((w) => w.path)).toEqual(['/wt/clean']);
+  });
+});
+
+describe('sortForIndex', () => {
+  it('ce qui demande une action d abord, puis le principal, puis le chemin', () => {
+    const list = [
+      wt('/b/clean'),
+      wt('/a/main', { isMain: true }),
+      wt('/c/dirty', { git: git({ dirtyCount: 1 }) }),
+    ];
+    expect(sortForIndex(list).map((w) => w.path)).toEqual(['/c/dirty', '/a/main', '/b/clean']);
+  });
+
+  it('ne mute pas la liste reçue', () => {
+    const list = [wt('/b'), wt('/a')];
+    sortForIndex(list);
+    expect(list.map((w) => w.path)).toEqual(['/b', '/a']);
+  });
+});
+
+describe('pendingWorktreeCount', () => {
+  it('compte les worktrees à traiter, tous dépôts visibles confondus', () => {
+    const forRepo = (id: string): WorktreeSummary[] =>
+      id === 'r1'
+        ? [wt('/a', { git: git({ dirtyCount: 1 }) }), wt('/b')]
+        : [wt('/c', { repoId: 'r2', git: git({ ahead: 2 }) })];
+    expect(pendingWorktreeCount([repo('r1'), repo('r2')], forRepo)).toBe(2);
+  });
+});
@@ -0,0 +1,169 @@
+// Cache des listes de fichiers modifiés : invalidation par jeton, plafond de chargements simultanés,
+// et erreur qui reste visible au lieu d'être avalée (le défaut de l'ancien panneau Git).
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import type { FileChange, WorktreeChangesResponse } from '@arboretum/shared';
+
+interface Deferred {
+  resolve: (res: WorktreeChangesResponse) => void;
+  reject: (err: Error) => void;
+}
+
+let calls: string[] = [];
+let inFlight = 0;
+let maxInFlight = 0;
+let deferreds: Deferred[] = [];
+/** Quand true, chaque appel reste en vol jusqu'à résolution explicite (test du plafond). */
+let manual = false;
+let failNext = false;
+
+vi.mock('../src/lib/git-api', () => ({
+  gitApi: {
+    changes: (repoId: string, wt: string): Promise<WorktreeChangesResponse> => {
+      calls.push(`${repoId}\0${wt}`);
+      inFlight++;
+      maxInFlight = Math.max(maxInFlight, inFlight);
+      const settle = <T,>(p: Promise<T>): Promise<T> =>
+        p.finally(() => {
+          inFlight--;
+        });
+      if (manual) {
+        return settle(
+          new Promise<WorktreeChangesResponse>((resolve, reject) => {
+            deferreds.push({ resolve, reject });
+          }),
+        );
+      }
+      if (failNext) {
+        failNext = false;
+        return settle(Promise.reject(new Error('boom')));
+      }
+      return settle(Promise.resolve({ repoId, path: wt, changes: [], truncated: false }));
+    },
+  },
+}));
+
+const { useChangesStore, MAX_CONCURRENT_LOADS } = await import('../src/stores/changes');
+const { useWorktreesStore } = await import('../src/stores/worktrees');
+
+function fakeStorage() {
+  const m = new Map<string, string>();
+  return {
+    getItem: (k: string) => (m.has(k) ? (m.get(k) as string) : null),
+    setItem: (k: string, v: string) => void m.set(k, v),
+    removeItem: (k: string) => void m.delete(k),
+    clear: () => m.clear(),
+  };
+}
+
+/** Laisse la file se dépiler (les chargements sont enchaînés par des microtâches). */
+const settle = async (): Promise<void> => {
+  for (let i = 0; i < 20; i++) await Promise.resolve();
+};
+
+describe('store changes', () => {
+  beforeEach(() => {
+    calls = [];
+    deferreds = [];
+    inFlight = 0;
+    maxInFlight = 0;
+    manual = false;
+    failNext = false;
+    (globalThis as unknown as { localStorage: unknown }).localStorage = fakeStorage();
+    setActivePinia(createPinia());
+  });
+
+  it('ne recharge pas une entrée fraîche, recharge dès que le jeton bouge', async () => {
+    const changes = useChangesStore();
+    const worktrees = useWorktreesStore();
+
+    changes.request('r1', '/wt/a');
+    await settle();
+    expect(calls).toHaveLength(1);
+
+    changes.request('r1', '/wt/a'); // rien n'a bougé
+    await settle();
+    expect(calls).toHaveLength(1);
+
+    worktrees.noteChange('r1', '/wt/a'); // le disque a bougé
+    changes.request('r1', '/wt/a');
+    await settle();
+    expect(calls).toHaveLength(2);
+  });
+
+  it('invalidate force le rechargement sans jeton', async () => {
+    const changes = useChangesStore();
+    changes.request('r1', '/wt/a');
+    await settle();
+    changes.invalidate('r1', '/wt/a');
+    await settle();
+    expect(calls).toHaveLength(2);
+  });
+
+  it('une erreur reste visible et la liste précédente est conservée', async () => {
+    const changes = useChangesStore();
+    const seeded: FileChange[] = [
+      {
+        path: 'src/x.ts',
+        indexStatus: '.',
+        worktreeStatus: 'M',
+        staged: false,
+        unstaged: true,
+        untracked: false,
+        conflicted: false,
+        insertions: 1,
+        deletions: 0,
+        binary: false,
+      },
+    ];
+    // premier chargement réussi, puis échec
+    changes.request('r1', '/wt/a');
+    await settle();
+    changes.entries['r1\0/wt/a'] = { ...changes.entries['r1\0/wt/a']!, changes: seeded };
+
+    failNext = true;
+    changes.invalidate('r1', '/wt/a');
+    await settle();
+
+    const entry = changes.entry('r1', '/wt/a');
+    expect(entry?.error).toBe('boom');
+    expect(entry?.changes).toEqual(seeded); // pas d'écran qui se vide
+    expect(entry?.loading).toBe(false);
+  });
+
+  it('ne dépasse jamais le plafond de chargements simultanés', async () => {
+    manual = true;
+    const changes = useChangesStore();
+    for (let i = 0; i < 10; i++) changes.request('r1', `/wt/${i}`);
+    await settle();
+    expect(maxInFlight).toBe(MAX_CONCURRENT_LOADS);
+    expect(calls).toHaveLength(MAX_CONCURRENT_LOADS);
+
+    // on libère tout : la file se dépile jusqu'au bout
+    while (deferreds.length > 0) {
+      const d = deferreds.shift();
+      d?.resolve({ repoId: 'r1', path: '/wt/x', changes: [], truncated: false });
+      await settle();
+    }
+    expect(calls).toHaveLength(10);
+    expect(maxInFlight).toBe(MAX_CONCURRENT_LOADS);
+  });
+
+  it('forget libère, invalidateAll repérime, reset vide', async () => {
+    const changes = useChangesStore();
+    changes.request('r1', '/wt/a');
+    changes.request('r1', '/wt/b');
+    await settle();
+    expect(Object.keys(changes.entries)).toHaveLength(2);
+
+    changes.forget('r1', '/wt/a');
+    expect(changes.entry('r1', '/wt/a')).toBeNull();
+
+    expect(changes.isStale('r1', '/wt/b')).toBe(false);
+    changes.invalidateAll();
+    expect(changes.isStale('r1', '/wt/b')).toBe(true);
+
+    changes.reset();
+    expect(Object.keys(changes.entries)).toHaveLength(0);
+  });
+});
@@ -1,7 +1,7 @@
 // Store IDE : onglets (ouverture/dedup/fermeture), dock terminaux, activité, réconciliation.
 import { describe, it, expect, beforeEach } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
-import { useIdeStore, tabId, wtKey } from '../src/stores/ide';
+import { MOBILE_PANELS, parseWtKey, useIdeStore, tabId, wtKey } from '../src/stores/ide';

 function fakeStorage() {
  const m = new Map<string, string>();
@@ -139,4 +139,77 @@ describe('store IDE', () => {
    expect(ide.isDirty(tabId('r', '/w2', 'b'))).toBe(false); // onglet retiré : dirty nettoyé
    expect(ide.hasUnsaved).toBe(true); // il reste l'onglet /w1 modifié
  });
+
+  // --- zone centrale : mode fichiers / changements, et cohérence du layout mobile ---
+
+  it('setCenterMode amène le bon panneau au premier plan sur mobile', () => {
+    const ide = useIdeStore();
+    ide.setCenterMode('changes');
+    expect(ide.centerMode).toBe('changes');
+    expect(ide.mobilePanel).toBe('changes');
+    ide.setCenterMode('files');
+    expect(ide.mobilePanel).toBe('editor');
+  });
+
+  it('ouvrir un fichier ou un onglet ramène la zone centrale aux fichiers', () => {
+    const ide = useIdeStore();
+    ide.setCenterMode('changes');
+    ide.openFile('r1', '/wt/a', 'src/x.ts');
+    expect(ide.centerMode).toBe('files');
+    expect(ide.mobilePanel).toBe('editor');
+
+    ide.setCenterMode('changes');
+    ide.setActiveTab(tabId('r1', '/wt/a', 'src/x.ts'));
+    expect(ide.centerMode).toBe('files');
+  });
+
+  it('openChanges rend le worktree actif, déplie son bloc et bascule la vue', () => {
+    const ide = useIdeStore();
+    ide.openChanges('r1', '/wt/a');
+    expect(ide.activeContext).toEqual({ repoId: 'r1', wtPath: '/wt/a' });
+    expect(ide.changesExpanded).toEqual([wtKey('r1', '/wt/a')]);
+    expect(ide.centerMode).toBe('changes');
+    ide.openChanges('r1', '/wt/a'); // idempotent
+    expect(ide.changesExpanded).toHaveLength(1);
+  });
+
+  it('toggleChangesWt bascule et réassigne le tableau (persistedRef non profond)', () => {
+    const ide = useIdeStore();
+    const before = ide.changesExpanded;
+    ide.toggleChangesWt('k1');
+    expect(ide.changesExpanded).toEqual(['k1']);
+    expect(ide.changesExpanded).not.toBe(before); // nouvelle référence, donc persistée
+    ide.toggleChangesWt('k1');
+    expect(ide.changesExpanded).toEqual([]);
+  });
+
+  it('setActivity pose un panneau mobile que le layout sait rendre', () => {
+    const ide = useIdeStore();
+    for (const view of ['explorer', 'sessions', 'groups'] as const) {
+      ide.setActivity(view);
+      expect(ide.mobilePanel).toBe(view);
+      expect(MOBILE_PANELS).toContain(ide.mobilePanel);
+    }
+    // 'git' est l'index de la sidebar desktop : sur mobile, c'est la vue Changements qui le remplace.
+    ide.setActivity('git');
+    expect(ide.mobilePanel).toBe('changes');
+    expect(ide.centerMode).toBe('changes');
+    expect(MOBILE_PANELS).toContain(ide.mobilePanel);
+  });
+
+  it('un mobilePanel persisté obsolète est ramené à une valeur gérée', () => {
+    localStorage.setItem('arb.ide.mobilePanel', JSON.stringify('sidebar')); // persistedRef stocke du JSON
+    setActivePinia(createPinia());
+    expect(useIdeStore().mobilePanel).toBe('explorer');
+
+    localStorage.setItem('arb.ide.mobilePanel', JSON.stringify('git'));
+    setActivePinia(createPinia());
+    expect(useIdeStore().mobilePanel).toBe('changes');
+  });
+
+  it('parseWtKey est l’inverse de wtKey', () => {
+    expect(parseWtKey(wtKey('r1', '/wt/mon projet'))).toEqual({ repoId: 'r1', wtPath: '/wt/mon projet' });
+    expect(parseWtKey('sans-separateur')).toBeNull();
+    expect(parseWtKey('')).toBeNull();
+  });
 });
@@ -0,0 +1,32 @@
+// Contrat de loadMonaco : le SUCCÈS est partagé, l'ÉCHEC est réessayable. Un chunk manquant ne doit
+// pas condamner l'éditeur pour toute la session (c'était le cas : la promesse rejetée restait
+// mémoïsée, donc la zone d'édition restait vide et muette jusqu'au rechargement de la page).
+// Le cache vit au niveau du module : ce fichier garde donc UN seul test, ordonné.
+import { describe, expect, it } from 'vitest';
+import type * as Monaco from 'monaco-editor';
+import { loadMonaco } from '../src/composables/useMonaco';
+
+const fake = { editor: {} } as unknown as typeof Monaco;
+
+describe('loadMonaco', () => {
+  it('ne mémoïse pas un échec, mémoïse un succès', async () => {
+    let failed = 0;
+    const failing = (): Promise<typeof Monaco> => {
+      failed++;
+      return Promise.reject(new Error('chunk absent'));
+    };
+
+    await expect(loadMonaco(failing)).rejects.toThrow('chunk absent');
+    await expect(loadMonaco(failing)).rejects.toThrow('chunk absent');
+    expect(failed).toBe(2); // l'import est réellement retenté
+
+    let ok = 0;
+    const working = (): Promise<typeof Monaco> => {
+      ok++;
+      return Promise.resolve(fake);
+    };
+    await expect(loadMonaco(working)).resolves.toBe(fake);
+    await expect(loadMonaco(working)).resolves.toBe(fake);
+    expect(ok).toBe(1); // succès partagé : un seul import
+  });
+});
@@ -117,6 +117,36 @@ describe('useWatchedWorktrees', () => {
    scope.stop();
  });

+  it('observe un bloc déplié de la vue Changements, sans dépôt déplié dans l’explorateur', async () => {
+    const ide = useIdeStore();
+    const worktrees = useWorktreesStore();
+    worktrees.worktrees = [wt('r1', '/wt/a'), wt('r2', '/wt/b')];
+    const scope = effectScope();
+    scope.run(() => useWatchedWorktrees());
+    expect(watched).toEqual([]);
+
+    ide.toggleChangesWt('r2\0/wt/b');
+    await nextTick();
+    expect(watched).toEqual(['r2\0/wt/b']);
+
+    ide.toggleChangesWt('r2\0/wt/b');
+    await nextTick();
+    expect(released).toEqual(['r2\0/wt/b']);
+    scope.stop();
+  });
+
+  it('ignore une clé de bloc dont le worktree n’existe plus', async () => {
+    const ide = useIdeStore();
+    const worktrees = useWorktreesStore();
+    worktrees.worktrees = [wt('r1', '/wt/a')];
+    ide.toggleChangesWt('r9\0/wt/disparu');
+    const scope = effectScope();
+    scope.run(() => useWatchedWorktrees());
+    await nextTick();
+    expect(watched).toEqual([]);
+    scope.stop();
+  });
+
  it('incrémente le jeton d’invalidation du store à chaque worktree_changes', () => {
    const ide = useIdeStore();
    const worktrees = useWorktreesStore();