mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-09-30 12:39:42 +02:00
Codeman maintainer
dc63d1f1a6
scripts/capture-real-overview.mjs: - Default deviceScaleFactor to 1 (DSF=2 makes xterm's headless WebGL renderer draw console glyphs at ~2x while reporting nominal cell dims — invisible to cols/cell measurement, only the pixels reveal it; HTML chrome is unaffected so only the terminal font looks oversized) - Mint a unique timestamped filename per run so a viewer/HTTP cache can't shadow a fresh capture with a stale render of a fixed path - Seed per-device localStorage (skin, codeman-font-size, codeman-app-settings) so the capture reflects a real device: plan-usage chip shown (per-device key, deleted from server payload), side panels closed for a full-width terminal - Support prod's self-signed HTTPS (ignoreHTTPSErrors), env-configurable viewport CLAUDE.md: - Document the DSF=1 / unique-filename screenshot gotcha (incl. the real Codeman-side immutable-static-asset cache footgun) - Add the sanitize-html.js infra module (DOMPurify mXSS allowlist, COD-56) to the frontend module list and load order (was missing) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
148 lines
5.9 KiB
JavaScript
148 lines
5.9 KiB
JavaScript
#!/usr/bin/env node
|
||
/**
|
||
* capture-real-overview.mjs
|
||
*
|
||
* Captures a REAL claude-overview screenshot from a LIVE Codeman server
|
||
* (no mock injection). Drive a real session to do real work, then run:
|
||
*
|
||
* SID=<sessionId> BASE=http://localhost:5000 OUT=screenshots-real \
|
||
* node scripts/capture-real-overview.mjs
|
||
*
|
||
* Skin defaults to daylight-blue (prod default) via the localStorage pre-paint
|
||
* contract in index.html. Output: <OUT>/claude-overview.png at 1280x720 (DSF 2).
|
||
*/
|
||
import { chromium } from 'playwright';
|
||
import { mkdirSync } from 'fs';
|
||
import { join } from 'path';
|
||
|
||
const SID = process.env.SID;
|
||
const BASE = process.env.BASE || 'http://localhost:5000';
|
||
const OUT = process.env.OUT || 'screenshots-real';
|
||
const SKIN = process.env.SKIN || 'daylight-blue';
|
||
// Unique filename per run (timestamped) so a viewer holding an old render of a
|
||
// fixed path can never shadow a fresh capture. Override with NAME=… if needed.
|
||
const STAMP = new Date().toISOString().replace(/[:.]/g, '-').replace('T', '_').slice(0, 19);
|
||
const NAME = process.env.NAME || `claude-overview-${STAMP}.png`;
|
||
const VIEWPORT = { width: Number(process.env.VW || 1512), height: Number(process.env.VH || 812) };
|
||
// IMPORTANT: default deviceScaleFactor is 1, NOT 2. xterm's WebGL renderer in
|
||
// headless Chromium draws terminal glyphs at ~2× their nominal size when DSF=2
|
||
// (while still reporting nominal 8px cell dims internally, so it can't be caught
|
||
// by measuring terminal.cols/cell — only the pixels reveal it). The HTML chrome
|
||
// is unaffected, so DSF=2 makes ONLY the console font look comically large. DSF=1
|
||
// renders the console at its true size, matching a real (non-headless) browser.
|
||
const DSF = Number(process.env.DSF || 1);
|
||
|
||
if (!SID) {
|
||
console.error('SID env var required (the live session id to screenshot)');
|
||
process.exit(1);
|
||
}
|
||
|
||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||
|
||
const main = async () => {
|
||
mkdirSync(OUT, { recursive: true });
|
||
const browser = await chromium.launch({
|
||
headless: true,
|
||
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu'],
|
||
});
|
||
const context = await browser.newContext({
|
||
viewport: VIEWPORT,
|
||
deviceScaleFactor: DSF,
|
||
ignoreHTTPSErrors: BASE.startsWith('https'),
|
||
});
|
||
const page = await context.newPage();
|
||
page.setDefaultTimeout(30000);
|
||
|
||
// Force the skin before any page script runs (pre-paint <head> contract), and
|
||
// seed the PER-DEVICE display blob so the capture reflects what prod actually
|
||
// shows on the user's real device — notably the plan-usage chip, which is a
|
||
// per-device setting (default OFF) deleted from the server payload, so a fresh
|
||
// browser would otherwise hide it. PLAN_USAGE=0 disables.
|
||
const PLAN_USAGE = process.env.PLAN_USAGE !== '0';
|
||
// Terminal console font size. App default is 14px; a fresh headless browser has
|
||
// no saved codeman-font-size, so it renders at 14 — much larger than a real
|
||
// device where the console has been zoomed down. Seed a smaller value (clamped
|
||
// to the app's [10,24] range) so the console font looks normal in the capture.
|
||
const FONT = Math.max(10, Math.min(24, Number(process.env.FONT || 14)));
|
||
await page.addInitScript(
|
||
([skin, planUsage, font]) => {
|
||
try {
|
||
localStorage.setItem('codeman:skin', skin);
|
||
localStorage.setItem('codeman-font-size', String(font));
|
||
// Desktop app-settings blob (settings-ui.js getSettingsStorageKey()).
|
||
// Present these display keys explicitly so the server merge won't seed
|
||
// side panels open (display keys only seed from server when absent from
|
||
// localStorage). Matches the clean full-width-terminal reference look.
|
||
const blob = {
|
||
skin,
|
||
showFileBrowser: false,
|
||
showMonitor: false,
|
||
showSubagents: false,
|
||
showProjectInsights: false,
|
||
};
|
||
if (planUsage) blob.showPlanUsageLimits = true;
|
||
localStorage.setItem('codeman-app-settings', JSON.stringify(blob));
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
},
|
||
[SKIN, PLAN_USAGE, FONT]
|
||
);
|
||
|
||
console.log(`Loading ${BASE} ...`);
|
||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||
await page.waitForFunction(() => window.app && window.app.terminal, { timeout: 20000 });
|
||
await sleep(1500);
|
||
|
||
console.log(`Selecting session ${SID} ...`);
|
||
await page.evaluate((sid) => window.app.selectSession(sid), SID);
|
||
|
||
// Let the terminal buffer stream in + xterm render + any Ink redraw settle.
|
||
await sleep(2000);
|
||
|
||
// Force a clean fit (avoids capturing a transient pre-fit frame where the
|
||
// terminal renders at the wrong column count) and re-apply per-device header
|
||
// visibility so the seeded plan-usage chip is shown.
|
||
await page.evaluate((font) => {
|
||
// Force the console font explicitly (setFontSize also re-fits) in case
|
||
// loadFontSize didn't pick up the seeded value before the session rendered.
|
||
try {
|
||
if (window.app.setFontSize) window.app.setFontSize(font);
|
||
else window.app.terminal.options.fontSize = font;
|
||
} catch {}
|
||
try {
|
||
window.app.fitAddon && window.app.fitAddon.fit();
|
||
} catch {}
|
||
try {
|
||
window.dispatchEvent(new Event('resize'));
|
||
} catch {}
|
||
try {
|
||
window.app.applyHeaderVisibilitySettings && window.app.applyHeaderVisibilitySettings();
|
||
} catch {}
|
||
}, FONT);
|
||
await sleep(3000);
|
||
|
||
// Optionally scroll the terminal up to frame the rich tool-call region
|
||
// (Read/Write/Bash + green test results) instead of the trailing summary.
|
||
const SCROLL = Number(process.env.SCROLL || 0);
|
||
if (SCROLL) {
|
||
await page.evaluate((n) => {
|
||
const t = window.app && window.app.terminal;
|
||
if (t && t.scrollLines) t.scrollLines(-n);
|
||
}, SCROLL);
|
||
await sleep(800);
|
||
}
|
||
|
||
const outPath = join(OUT, NAME);
|
||
await page.screenshot({ path: outPath, fullPage: false });
|
||
console.log(`Saved: ${outPath}`);
|
||
|
||
await context.close();
|
||
await browser.close();
|
||
};
|
||
|
||
main().catch((e) => {
|
||
console.error('FATAL', e.message);
|
||
process.exit(1);
|
||
});
|