Clean Preview Generator V2 header and duplicate control labels - PR_26126_023-preview-generator-v2-label-consistency

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,7 +1,7 @@
-# Codex Commands - PR_26126_022-preview-generator-v2-no-inline-style-and-auto-rewrite
+# Codex Commands - PR_26126_023-preview-generator-v2-label-consistency
 
 ```bash
-codex run "Create PR_26126_022-preview-generator-v2-no-inline-style-and-auto-rewrite. Fix Preview Generator V2 UI/behavior only. Preserve existing generation behavior. Remove all inline style attributes from HTML; move styling into the existing Preview Generator V2 stylesheet/classes using Palette Manager V2 style conventions. Do not show the text \"Only rewrite if preview.svg contains literal \\\"Capture timeout\\\"\" in the UI. Instead, if an existing preview.svg exists, automatically test its contents; only rewrite/regenerate when preview.svg contains the literal text \"Capture timeout\". If preview.svg exists and does not contain that text, skip rewrite and log the decision in the status textarea. Do not modify samples. Do not add schema. Produce review artifacts."
+codex run "Create PR_26126_023-preview-generator-v2-label-consistency. Fix Preview Generator V2 UI labels only. Preserve existing generation behavior. Make the header/title consistent: replace \"Preview SVG Generator > Preview Generator V2\" with \"Preview Generator V2\" and keep \"First-Class Tools Surface\" as the subtitle/context line. Remove duplicate labels inside the Asset folder section so \"Asset folder\" appears only once with value \"assets/images\". Remove duplicate labels inside Capture mode so \"Capture mode\" appears only once. Move \"Canvas Only\" above \"Full Screen (1600x900 HTML Page)\". Do not modify samples. Do not add schema. Produce review artifacts."
 ```
 
 ## Validation Commands
@@ -30,79 +30,48 @@ page.on('console', (message) => {
 await page.route('https://cdn.jsdelivr.net/**', async (route) => {
   await route.fulfill({ status: 200, contentType: 'text/javascript', body: 'window.html2canvas = window.html2canvas || undefined;' });
 });
-await page.addInitScript(() => {
-  const writes = [];
-  class FakeFile { constructor(text) { this._text = text; } async text() { return this._text; } }
-  class FakeFileHandle {
-    constructor(path, existing = null) { this.kind = 'file'; this.name = path.split('/').pop(); this.path = path; this._existing = existing; }
-    async getFile() { return new FakeFile(this._existing || ''); }
-    async createWritable() { const handle = this; const path = this.path; return { async write(content) { writes.push({ path, content: String(content) }); handle._existing = String(content); }, async close() {} }; }
-  }
-  class FakeDirectoryHandle {
-    constructor(name = 'HTML-JavaScript-Gaming', path = '') { this.kind = 'directory'; this.name = name; this.path = path; this.children = new Map(); }
-    async getDirectoryHandle(name) { const key = `dir:${name}`; if (!this.children.has(key)) { const nextPath = this.path ? `${this.path}/${name}` : name; this.children.set(key, new FakeDirectoryHandle(name, nextPath)); } return this.children.get(key); }
-    async getFileHandle(name, options = {}) { const key = `file:${name}`; if (!this.children.has(key)) { if (!options.create) throw new DOMException('Not found', 'NotFoundError'); const nextPath = this.path ? `${this.path}/${name}` : name; this.children.set(key, new FakeFileHandle(nextPath)); } return this.children.get(key); }
-  }
-  async function addFile(root, path, text) {
-    const parts = path.split('/').filter(Boolean);
-    let current = root;
-    for (const part of parts.slice(0, -1)) current = await current.getDirectoryHandle(part);
-    const fileHandle = await current.getFileHandle(parts.at(-1), { create: true });
-    fileHandle._existing = text;
-  }
-  window.__previewGeneratorV2Writes = writes;
-  window.__previewGeneratorV2Root = new FakeDirectoryHandle();
-  window.__previewGeneratorV2Ready = (async () => {
-    await addFile(window.__previewGeneratorV2Root, 'samples/phase-01/0107/assets/images/preview.svg', '<svg><text>Healthy preview</text></svg>');
-    await addFile(window.__previewGeneratorV2Root, 'samples/phase-01/0102/assets/images/preview.svg', '<svg><text>Capture timeout</text></svg>');
-  })();
-  window.showDirectoryPicker = async () => {
-    await window.__previewGeneratorV2Ready;
-    return window.__previewGeneratorV2Root;
-  };
-});
-
 await page.goto(`${server.baseUrl}/tools/preview-generator-v2/index.html`, { waitUntil: 'domcontentloaded' });
 await page.waitForSelector('#shared-theme-header');
 await page.waitForFunction(() => Array.from(document.querySelectorAll('.preview-generator-v2 .accordion-v2__header')).every((header) => header.dataset.accordionV2Bound === 'true'));
+
+const title = await page.title();
+if (title !== 'Preview Generator V2') throw new Error(`Unexpected title: ${title}`);
+const h1 = await page.locator('.tools-platform-frame__title[data-tool-id="preview-generator-v2"]').innerText();
+if (h1.trim() !== 'Preview Generator V2') throw new Error(`Unexpected h1: ${h1}`);
+const eyebrow = await page.locator('.tools-platform-frame__eyebrow').innerText();
+if (eyebrow.trim() !== 'First-Class Tools Surface') throw new Error(`Unexpected context line: ${eyebrow}`);
 const bodyText = await page.locator('body').innerText();
-if (bodyText.includes('Only rewrite if preview.svg contains literal')) throw new Error('Manual capture-timeout rewrite text should not be visible.');
-const previewInlineStyleCount = await page.locator('.preview-generator-v2 [style]').count();
-if (previewInlineStyleCount !== 0) throw new Error(`Expected no inline style attributes inside Preview Generator V2 UI, got ${previewInlineStyleCount}`);
+if (bodyText.includes('Preview SVG Generator')) throw new Error('Old Preview SVG Generator label is still visible.');
 
-await page.fill('#baseUrl', server.baseUrl);
-await page.fill('#waitMs', '3000');
-await page.fill('#sampleList', '0107');
-await page.check('#targetTypeSamples');
-await page.click('#pickRepoBtn');
-await page.waitForFunction(() => !document.getElementById('executeBtn').disabled);
-await page.click('#executeBtn');
-await page.waitForFunction(() => document.getElementById('log').textContent.includes('existing-preview-without-capture-timeout'), null, { timeout: 35000 });
-let writes = await page.evaluate(() => window.__previewGeneratorV2Writes || []);
-if (writes.length !== 0) throw new Error(`Existing healthy preview should skip rewrite, got ${writes.length} writes.`);
+const assetLabelCount = await page.evaluate(() => (document.body.innerText.match(/Asset folder/g) || []).length);
+if (assetLabelCount !== 1) throw new Error(`Expected one visible Asset folder label, got ${assetLabelCount}`);
+const assetFolderValue = await page.locator('#assetFolder').inputValue();
+if (assetFolderValue !== 'assets/images') throw new Error(`Unexpected asset folder value: ${assetFolderValue}`);
+const assetAria = await page.locator('#assetFolder').getAttribute('aria-label');
+if (assetAria !== 'Asset folder') throw new Error(`Expected Asset folder aria label, got ${assetAria}`);
 
-await page.click('#clearLogBtn');
-await page.fill('#sampleList', '0102');
-await page.waitForFunction(() => !document.getElementById('executeBtn').disabled);
-await page.click('#executeBtn');
-await page.waitForFunction(() => document.getElementById('log').textContent.includes('contains Capture timeout; rewriting'), null, { timeout: 35000 });
-await page.waitForFunction(() => document.getElementById('lastGeneratedImagePreview') && !document.getElementById('lastGeneratedImagePreview').hidden, null, { timeout: 35000 });
-writes = await page.evaluate(() => window.__previewGeneratorV2Writes || []);
-if (writes.length !== 1) throw new Error(`Existing Capture timeout preview should rewrite once, got ${writes.length} writes.`);
-if (!writes[0].path.endsWith('samples/phase-01/0102/assets/images/preview.svg')) throw new Error(`Unexpected rewrite path: ${writes[0].path}`);
+const captureLabelCount = await page.evaluate(() => (document.body.innerText.match(/Capture mode/g) || []).length);
+if (captureLabelCount !== 1) throw new Error(`Expected one visible Capture mode label, got ${captureLabelCount}`);
+const captureTexts = await page.locator('#captureModeContent .preview-generator-v2__radio-option span').evaluateAll((nodes) => nodes.map((node) => node.textContent.trim()));
+const expectedCaptureTexts = ['Canvas Only', 'Full Screen (1600x900 HTML Page)'];
+if (JSON.stringify(captureTexts) !== JSON.stringify(expectedCaptureTexts)) throw new Error(`Unexpected capture order: ${captureTexts.join(' | ')}`);
+if (!(await page.locator('#captureModeCanvasOnly').isChecked())) throw new Error('Canvas Only should remain selected by default.');
+if (await page.locator('legend', { hasText: 'Capture mode' }).count()) throw new Error('Capture mode legend should not render as duplicate label.');
+
+const generateButton = page.locator('#executeBtn');
+if (!(await generateButton.isVisible())) throw new Error('Generate Preview button should remain visible.');
+if (!(await generateButton.isDisabled())) throw new Error('Generate Preview should remain disabled until required fields are provided.');
 if (errors.length || consoleErrors.length) throw new Error([...errors, ...consoleErrors].join(' | '));
 await browser.close();
 await server.close();
-console.log('preview-generator-v2 automatic capture-timeout rewrite gate smoke valid');
+console.log('preview-generator-v2 label consistency smoke valid');
 '@ | node --input-type=module -
 ```
 
 ## Notes
 
-The targeted Playwright smoke validates the visible manual capture-timeout checkbox text is absent, Preview Generator V2-owned UI has no inline style attributes, existing healthy previews skip rewrite with a status log, and existing timeout previews rewrite and update Last Generated Image.
+The targeted Playwright smoke validates the updated title/header labels, confirms the old `Preview SVG Generator` label is not visible, verifies Asset folder and Capture mode each render one visible label, confirms `Canvas Only` is listed before `Full Screen (1600x900 HTML Page)`, and checks the Generate Preview gate remains visible/disabled before required fields are provided.
 
 `npm run test:workspace-v2` was attempted, but the script is not defined in this checkout.
 
-Full samples smoke test was skipped because this PR is scoped to Preview Generator V2 UI/behavior only.
-
-Unstaged sample preview SVG changes were present before this PR and were left untouched.
+Full samples smoke test was skipped because this PR is scoped to Preview Generator V2 labels only.

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Automate Preview Generator V2 capture-timeout rewrite gate - PR_26126_022-preview-generator-v2-no-inline-style-and-auto-rewrite
+Normalize Preview Generator V2 labels - PR_26126_023-preview-generator-v2-label-consistency

docs/dev/reports/codex_changed_files.txt

@@ -1,12 +1,7 @@
 # git status --short
 M  docs/dev/codex_commands.md
 M  docs/dev/commit_comment.txt
-M  docs/dev/reports/codex_changed_files.txt
-M  docs/dev/reports/codex_review.diff
 M  tools/preview-generator-v2/index.html
 
-# git diff --cached --stat
-docs/dev/codex_commands.md            | 71 ++++++++++++++++++-----------------
- docs/dev/commit_comment.txt           |  2 +-
- tools/preview-generator-v2/index.html | 21 +++++------
- 3 files changed, 46 insertions(+), 48 deletions(-)
+# git diff --stat
+(no output)