release: git-arboretum 3.5.0 (cache SPA, copier/coller terminal, fichiers des groupes), desktop 0.2.1
CI / No em/en dashes (push) Successful in 3s
CI / Build & test (Node 24) (push) Successful in 10m50s
CI / Build & test (Node 22) (push) Successful in 11m2s
Release / Publish to Gitea npm registry (push) Successful in 10m56s
Desktop Release / Build Linux (AppImage + deb) (push) Successful in 13m21s
Desktop Release / Publish floating desktop-latest release (push) Successful in 11s
CI / Pack & boot smoke (Node 22) (push) Successful in 9m53s
Desktop Release / Build Windows (NSIS + portable) (push) Canceled after 0s

Cause racine de l'ecran noir apres mise a jour : l'etag faible de @fastify/static derive de
taille+mtime, et npm pack fige le mtime de tout le tarball a une date constante (1985-10-26). Deux
index.html de versions differentes mais de meme taille partageaient donc le meme etag : le client
recevait un 304, gardait son index perime, et demandait des /assets/<hash> disparus ; le fallback SPA
repondait index.html en text/html pour ces modules, le navigateur refusait le script, rien ne peignait.

- fix(server): index.html et tous les fichiers non haches servis en no-store, validation
  conditionnelle desactivee (etag/lastModified) pour qu'un client bloque sur un index perime se
  repare seul ; /assets/ (noms haches) passent en immutable un an
- feat(web): copier/coller dans le terminal xterm, dont la selection n'est pas une selection DOM :
  Ctrl+Maj+C / Ctrl+Maj+V, Cmd+C / Cmd+V sur macOS, Ctrl+Inser / Maj+Inser, plus interception de
  l'evenement DOM copy pour que le Copier natif fonctionne. Ctrl+C reste SIGINT
- fix(web): script anti-FOUC sorti dans /theme-boot.js, la CSP script-src 'self' du daemon refusait
  de l'executer inline (le theme n'etait donc pose qu'au montage de la SPA)
- feat(web): les worktrees d'un groupe se deplient sur leur arborescence de fichiers dans le panneau
  Groupes (meme composant et meme etat d'expansion que l'Explorateur), et un worktree ainsi deplie
  est desormais surveille en temps reel
- fix: octet nul litteral remplace par \0 dans trois sources (stores/ide.ts, GitPanel.vue,
  vscode/repos-tree.ts) : git et grep les traitaient comme binaires, leurs diffs etaient
  illisibles en revue et la garde CI lint-dashes (git grep -I) les sautait en silence
- test: cacheControlFor et clipboardIntent en tests purs, verify-clipboard.mjs (E2E Chromium CDP :
  copie, collage et SIGINT prouves par le presse-papier reel et par le systeme de fichiers),
  capture groups-dark-desktop ajoutee a verify-ui.mjs
This commit is contained in:
2026-08-04 16:23:33 +02:00
parent 9624270d9b
commit bde5358ea8
21 changed files with 599 additions and 45 deletions
@@ -0,0 +1,235 @@
#!/usr/bin/env node
// Vérification E2E du copier / coller dans le terminal web (régression : la sélection d'xterm n'est
// pas une sélection DOM, le « Copier » natif ne voyait donc rien). Daemon temporaire isolé + session
// `bash` (pas `claude` : pas de quota consommé) + Chromium piloté en CDP : on tape un marqueur, on le
// sélectionne à la souris, Ctrl+Shift+C, et on relit le presse-papier réel du navigateur. Puis
// l'inverse : on remplit le presse-papier, Ctrl+Shift+V, et on vérifie que le PTY l'a reçu.
import { spawn } from 'node:child_process';
import { mkdtempSync, rmSync, existsSync } from 'node:fs';
import { tmpdir } from 'node:os';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { WebSocket } from 'ws';
const PORT = 7411;
const CDP_PORT = 9334;
const ORIGIN = `http://127.0.0.1:${PORT}`;
const serverDir = join(dirname(fileURLToPath(import.meta.url)), '..');
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
let failures = 0;
function check(label, ok, detail = '') {
console.log(`${ok ? '✅' : '❌'} ${label}${detail ? ` : ${detail}` : ''}`);
if (!ok) failures++;
}
function findChromium() {
for (const bin of ['/usr/bin/chromium', '/usr/bin/chromium-browser', '/usr/bin/google-chrome']) {
if (existsSync(bin)) return bin;
}
return null;
}
/** Client CDP minimal : un socket, corrélation par id. */
function cdp(url) {
const ws = new WebSocket(url, { perMessageDeflate: false });
const pending = new Map();
let seq = 0;
const ready = new Promise((resolve, reject) => {
ws.once('open', resolve);
ws.once('error', reject);
});
ws.on('message', (raw) => {
const msg = JSON.parse(raw.toString());
const entry = pending.get(msg.id);
if (!entry) return;
pending.delete(msg.id);
msg.error ? entry.reject(new Error(msg.error.message)) : entry.resolve(msg.result);
});
return {
ready,
close: () => ws.close(),
send(method, params = {}, sessionId) {
const id = ++seq;
return new Promise((resolve, reject) => {
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);
});
},
};
}
let srv, browser, tmp;
try {
tmp = mkdtempSync(join(tmpdir(), 'arb-clip-'));
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);
const login = await fetch(`${ORIGIN}/api/v1/auth/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', Origin: ORIGIN },
body: JSON.stringify({ token }),
});
const cookie = (login.headers.getSetCookie?.() ?? []).map((c) => c.split(';')[0]).find((c) => c.startsWith('arb_session='));
const cookieValue = cookie?.slice('arb_session='.length) ?? '';
check('login → cookie de session', !!cookie);
const sess = await (
await fetch(`${ORIGIN}/api/v1/sessions`, {
method: 'POST',
headers: { Origin: ORIGIN, Cookie: cookie, 'Content-Type': 'application/json' },
body: JSON.stringify({ cwd: tmp, command: 'bash' }),
})
).json();
const sessionId = sess.session?.id;
check('session bash lancée', !!sessionId);
const chromeBin = findChromium();
check('Chromium disponible', !!chromeBin, chromeBin ?? 'introuvable');
if (!chromeBin || !sessionId) throw new Error('prérequis manquants');
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;
// Presse-papier lisible/écrivable sans geste utilisateur (sinon readText() rejette en headless).
await client.send('Browser.grantPermissions', {
origin: ORIGIN,
permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
});
const { targetId } = await client.send('Target.createTarget', { url: 'about:blank' });
const { sessionId: sid } = await client.send('Target.attachToTarget', { targetId, flatten: true });
await client.send('Page.enable', {}, sid);
await client.send('Runtime.enable', {}, sid);
await client.send('Network.enable', {}, sid);
await client.send('Network.setCookie', { name: 'arb_session', value: cookieValue, domain: '127.0.0.1', path: '/', httpOnly: true }, sid);
await client.send('Emulation.setDeviceMetricsOverride', { width: 1440, height: 900, deviceScaleFactor: 1, mobile: false }, sid);
const evaluate = async (expression, awaitPromise = false) =>
(await client.send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise }, sid)).result?.value;
await client.send('Page.navigate', { url: `${ORIGIN}/sessions/${sessionId}` }, sid);
// attend que xterm soit monté ET que bash ait rendu son invite
let screen = null;
for (let i = 0; i < 80 && !screen; i++) {
await sleep(250);
screen = await evaluate(`(() => { const el = document.querySelector('.xterm-screen'); if (!el) return null; const r = el.getBoundingClientRect(); return r.width > 50 ? JSON.stringify(r) : null; })()`);
}
check('terminal xterm monté', !!screen);
const rect = screen ? JSON.parse(screen) : null;
// Le renderer WebGL peint dans un canvas : `.xterm-rows` est vide, on ne peut RIEN vérifier via le
// DOM. Les preuves passent donc par le système de fichiers (le cwd de la session est `tmp`) et par
// le presse-papier réel du navigateur.
const focusTerm = () => client.send('Runtime.evaluate', { expression: `document.querySelector('.xterm-helper-textarea')?.focus()` }, sid);
const pressEnter = async () => {
await client.send('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13, nativeVirtualKeyCode: 13, text: '\r' }, sid);
await client.send('Input.dispatchKeyEvent', { type: 'keyUp', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13, nativeVirtualKeyCode: 13 }, sid);
};
const waitForFile = async (name, tries = 40) => {
for (let i = 0; i < tries; i++) {
if (existsSync(join(tmp, name))) return true;
await sleep(200);
}
return false;
};
// --- Frappe dans le PTY (Input.insertText → textarea xterm → stdin) ---
await focusTerm();
await client.send('Input.insertText', { text: 'touch typed-ok' }, sid);
await pressEnter();
check('le PTY exécute une commande tapée au clavier', await waitForFile('typed-ok'));
// Marqueur affiché à l'écran, cible de la copie
const MARKER = 'COPIE_MOI_4242';
await client.send('Input.insertText', { text: `echo ${MARKER}` }, sid);
await pressEnter();
await sleep(600);
// --- Sélection à la souris sur la zone du terminal, puis Ctrl+Shift+C ---
if (rect) {
const y = rect.y + 8;
await client.send('Input.dispatchMouseEvent', { type: 'mousePressed', x: rect.x + 2, y, button: 'left', clickCount: 1, buttons: 1 }, sid);
await client.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: rect.x + rect.width - 4, y: y + 40, button: 'left', buttons: 1 }, sid);
await client.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: rect.x + rect.width - 4, y: y + 40, button: 'left', clickCount: 1, buttons: 0 }, sid);
}
await sleep(300);
const selection = await evaluate(`(() => { const s = document.querySelector('.xterm')?.classList; return document.getSelection()?.toString() ?? ''; })()`);
// ctrl(2) + shift(8) = 10
const keyOpts = { modifiers: 10, windowsVirtualKeyCode: 67, nativeVirtualKeyCode: 67, key: 'C', code: 'KeyC' };
await client.send('Input.dispatchKeyEvent', { type: 'keyDown', ...keyOpts }, sid);
await client.send('Input.dispatchKeyEvent', { type: 'keyUp', ...keyOpts }, sid);
await sleep(500);
const copied = (await evaluate('navigator.clipboard.readText()', true)) ?? '';
check('Ctrl+Shift+C copie la sélection du terminal', copied.includes(MARKER), JSON.stringify(copied.slice(0, 60)));
// --- Collage : presse-papier → Ctrl+Shift+V → la commande collée doit atteindre le PTY ---
await evaluate(`navigator.clipboard.writeText('touch paste-ok')`, true);
await focusTerm();
const vOpts = { modifiers: 10, windowsVirtualKeyCode: 86, nativeVirtualKeyCode: 86, key: 'V', code: 'KeyV' };
await client.send('Input.dispatchKeyEvent', { type: 'keyDown', ...vOpts }, sid);
await client.send('Input.dispatchKeyEvent', { type: 'keyUp', ...vOpts }, sid);
await sleep(400);
await pressEnter();
check('Ctrl+Shift+V colle le presse-papier dans le terminal', await waitForFile('paste-ok'));
// --- Ctrl+C ne doit PAS être détourné : il reste SIGINT ---
// `sleep 25` bloque le shell ; si le ^C passe, le shell reprend et exécute la commande suivante.
await focusTerm();
await client.send('Input.insertText', { text: 'sleep 25' }, sid);
await pressEnter();
await sleep(700);
const cOpts = { modifiers: 2, windowsVirtualKeyCode: 67, nativeVirtualKeyCode: 67, key: 'c', code: 'KeyC' };
await client.send('Input.dispatchKeyEvent', { type: 'keyDown', ...cOpts }, sid);
await client.send('Input.dispatchKeyEvent', { type: 'keyUp', ...cOpts }, sid);
await sleep(500);
await client.send('Input.insertText', { text: 'touch interrupt-ok' }, sid);
await pressEnter();
check('Ctrl+C reste transmis au PTY (SIGINT, pas une copie)', await waitForFile('interrupt-ok', 30));
client.close();
} catch (err) {
check('exécution du scénario', false, err?.message ?? String(err));
} finally {
browser?.kill('SIGKILL');
srv?.kill('SIGKILL');
await sleep(300);
if (tmp) rmSync(tmp, { recursive: true, force: true });
}
console.log(failures === 0 ? '\nVERIFY CLIPBOARD: ALL GREEN' : `\nVERIFY CLIPBOARD: ${failures} ÉCHEC(S)`);
process.exit(failures === 0 ? 0 : 1);
+7
View File
@@ -168,12 +168,19 @@ try {
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');`;
// 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 =
`${seedExplorer}localStorage.setItem('arb.ide.activity', '"groups"');` +
`localStorage.setItem('arb.ide.expandedGroups', ${JSON.stringify(JSON.stringify([groupRes.group?.id]))});` +
`localStorage.setItem('arb.ide.expandedWts', ${JSON.stringify(JSON.stringify([repo]))});`;
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: '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 },
{ name: 'dashboard-dark-mobile', theme: 'dark', width: 390, height: 844, path: '/dashboard' },