diff --git a/packages/components/scripts/generate-chat-workspace-geometry-report.mjs b/packages/components/scripts/generate-chat-workspace-geometry-report.mjs index e645f0954..5998134d7 100644 --- a/packages/components/scripts/generate-chat-workspace-geometry-report.mjs +++ b/packages/components/scripts/generate-chat-workspace-geometry-report.mjs @@ -3,6 +3,7 @@ import { spawn } from 'node:child_process'; import { createServer } from 'node:net'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; +import { MAX_REPORT_SCREENSHOTS } from './geometry-report-budget.mjs'; const packageRoot = fileURLToPath(new URL('..', import.meta.url)); const templatePath = path.join( @@ -140,7 +141,6 @@ const detailImageBytes = imageStats.reduce((total, { file }) => total + file.siz // A screenshot budget, enforced rather than intended. Cards are chosen by how // much they deviate, so an unbounded report is one nobody opens: the run fails // instead of quietly growing. -const MAX_REPORT_SCREENSHOTS = 80; const assetFiles = (await readdir(path.join(outputDirectory, 'assets'))).filter((name) => name.endsWith('.png') ); diff --git a/packages/components/scripts/geometry-report-budget.mjs b/packages/components/scripts/geometry-report-budget.mjs new file mode 100644 index 000000000..9deea821b --- /dev/null +++ b/packages/components/scripts/geometry-report-budget.mjs @@ -0,0 +1,2 @@ +/** Exclusive limit, shared by screenshot selection and final artifact validation. */ +export const MAX_REPORT_SCREENSHOTS = 80; diff --git a/packages/components/scripts/templates/chat-workspace-geometry-report.html b/packages/components/scripts/templates/chat-workspace-geometry-report.html index 535557d8b..a132dfc94 100644 --- a/packages/components/scripts/templates/chat-workspace-geometry-report.html +++ b/packages/components/scripts/templates/chat-workspace-geometry-report.html @@ -434,6 +434,37 @@ color: var(--text); } + .visual-candidates { + margin: 28px 0; + } + .visual-candidates details { + padding: 12px 0; + border-bottom: 1px solid var(--border); + } + .visual-candidates summary { + cursor: pointer; + } + .visual-candidates .evidence { + color: var(--text-muted); + font-size: 13px; + overflow-wrap: anywhere; + } + .visual-overlay { + position: relative; + margin-top: 12px; + } + .visual-overlay img { + display: block; + width: 100%; + } + .visual-overlay svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + /* ---------- lightbox ---------- */ dialog.lightbox { @@ -559,6 +590,33 @@