Restore left/right accordions, add status clear, and gate Generate Preview visibility - PR_26126_019-preview-generator-v2-accordion-status-and-generate-gate

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,7 +1,7 @@
-# Codex Commands - PR_26126_018-preview-generator-v2-working-accordion-and-status-fix
+# Codex Commands - PR_26126_019-preview-generator-v2-accordion-status-and-generate-gate
 
 ```bash
-codex run "Create PR_26126_018-preview-generator-v2-working-accordion-and-status-fix. Fix Preview Generator V2 UI only. Preserve existing generation behavior. Right column controls must use a working accordion: headers toggle open/closed panels, icons reflect state, and controls remain usable when expanded. Do not leave dead X/underscore controls. Move status text such as \"Ready.\" out of the header/status line and into the textarea/status output area below. Specifically, do not set header/status display to \"Ready.\"; keep repo destination display separate from status output. Ensure setRepoDestinationDisplayName(repoDisplayName) still works, execute button enables correctly, and \"Ready.\" appears only in the lower text/status output area. Do not modify samples. Do not add schema. Produce review artifacts."
+codex run "Create PR_26126_019-preview-generator-v2-accordion-status-and-generate-gate. Fix Preview Generator V2 UI only. Preserve existing generation behavior. New rule: left and right columns must always use working accordion sections. Restore working accordion behavior on the left column and keep working accordion behavior on the right column. Add a Clear button on the same line as Status to empty the logging/status textarea. Hide Generate Preview until all required fields are provided; do not merely disable it. Add the missing \"Paths or IDs\" header above the input information in the left panel aside. Do not modify samples. Do not add schema. Produce review artifacts."
 ```
 
 ## Validation Commands
@@ -49,47 +49,45 @@ await page.addInitScript(() => {
 
 await page.goto(`${server.baseUrl}/tools/preview-generator-v2/index.html`, { waitUntil: 'domcontentloaded' });
 await page.waitForSelector('#shared-theme-header');
-await page.waitForFunction(() => document.querySelector('#outputSummary .accordion-v2__header')?.dataset.accordionV2Bound === 'true');
-await page.waitForFunction(() => document.querySelector('#statusAccordion .accordion-v2__header')?.dataset.accordionV2Bound === 'true');
+await page.waitForFunction(() => Array.from(document.querySelectorAll('.preview-generator-v2 .accordion-v2__header')).every((header) => header.dataset.accordionV2Bound === 'true'));
 
-for (const selector of ['#outputSummary', '#statusAccordion']) {
-  const header = page.locator(`${selector} .accordion-v2__header`);
-  const content = page.locator(`${selector} .accordion-v2__content`);
-  const icon = page.locator(`${selector} .accordion-v2__icon`);
+async function assertAccordion(selector) {
+  const header = page.locator(`${selector} .accordion-v2__header`).first();
+  const content = page.locator(`${selector} .accordion-v2__content`).first();
   if (await header.count() !== 1) throw new Error(`${selector} missing accordion header`);
   if (await content.count() !== 1) throw new Error(`${selector} missing accordion content`);
-  if (await icon.count() !== 1) throw new Error(`${selector} missing accordion icon`);
   if (await header.getAttribute('aria-expanded') !== 'true') throw new Error(`${selector} should start expanded`);
   await header.click();
   await page.waitForFunction((target) => document.querySelector(`${target} .accordion-v2__header`)?.getAttribute('aria-expanded') === 'false', selector);
-  const collapsed = await content.evaluate((node) => ({
-    hidden: node.hidden,
-    display: getComputedStyle(node).display,
-    height: node.getBoundingClientRect().height
-  }));
-  if (!collapsed.hidden) throw new Error(`${selector} content should be hidden after collapse`);
-  if (collapsed.display !== 'none') throw new Error(`${selector} collapsed content display should be none, got ${collapsed.display}`);
-  if (collapsed.height !== 0) throw new Error(`${selector} collapsed content height should be 0, got ${collapsed.height}`);
+  const collapsed = await content.evaluate((node) => ({ hidden: node.hidden, display: getComputedStyle(node).display, height: node.getBoundingClientRect().height }));
+  if (!collapsed.hidden) throw new Error(`${selector} should set hidden=true when collapsed`);
+  if (collapsed.display !== 'none') throw new Error(`${selector} collapsed display should be none, got ${collapsed.display}`);
+  if (collapsed.height !== 0) throw new Error(`${selector} collapsed height should be 0, got ${collapsed.height}`);
   await header.click();
   await page.waitForFunction((target) => document.querySelector(`${target} .accordion-v2__header`)?.getAttribute('aria-expanded') === 'true', selector);
-  if (await content.evaluate((node) => node.hidden) !== false) throw new Error(`${selector} content should be visible after expand`);
 }
 
-if (await page.locator('#status').isVisible()) throw new Error('Hidden status display should not be visible.');
-const initialLog = await page.locator('#log').innerText();
-if (!initialLog.trim().startsWith('Ready.')) throw new Error(`Ready should be in lower log output: ${initialLog}`);
-if ((await page.locator('#status').textContent()).includes('Ready.')) throw new Error('Ready should not be set on hidden status display.');
-if ((await page.locator('#statusAccordion .accordion-v2__header').innerText()).includes('Ready.')) throw new Error('Ready should not be in Status header.');
+for (const selector of [
+  '.preview-generator-v2__left-accordion:nth-of-type(1)',
+  '.preview-generator-v2__left-accordion:nth-of-type(2)',
+  '.preview-generator-v2__left-accordion:nth-of-type(3)',
+  '#outputSummary',
+  '#statusAccordion'
+]) {
+  await assertAccordion(selector);
+}
 
+if ((await page.locator('#pathsOrIdsTitle').innerText()) !== 'Paths or IDs') throw new Error('Missing Paths or IDs heading.');
+if (await page.locator('#executeBtn').isVisible()) throw new Error('Generate Preview should be hidden before required fields are provided.');
 await page.fill('#baseUrl', server.baseUrl);
 await page.fill('#waitMs', '3000');
 await page.fill('#sampleList', '0107');
 await page.check('#forceRewrite');
+if (await page.locator('#executeBtn').isVisible()) throw new Error('Generate Preview should remain hidden until repo folder is selected.');
+await page.click('#clearLogBtn');
+if ((await page.locator('#log').innerText()).trim() !== '') throw new Error('Clear should empty the status log output.');
 await page.click('#pickRepoBtn');
-await page.waitForFunction(() => !document.getElementById('executeBtn').disabled);
-const repoSelected = await page.locator('#repoSelectedValue').innerText();
-if (repoSelected !== 'HTML-JavaScript-Gaming') throw new Error(`Repo selected did not populate from folder handle: ${repoSelected}`);
-if ((await page.locator('#status').textContent()).includes('Ready.')) throw new Error('Repo selection should not set Ready on status display.');
+await page.waitForFunction(() => !document.getElementById('executeBtn').hidden && !document.getElementById('executeBtn').disabled);
 await page.waitForFunction(() => document.getElementById('writeFolderActualValue').textContent === 'samples\\phase-01\\0107\\assets\\images');
 await page.click('#executeBtn');
 await page.waitForFunction(() => document.getElementById('log').textContent.includes('===== SUMMARY ====='), null, { timeout: 35000 });
@@ -100,13 +98,13 @@ if (!writes[0].content.includes('<svg')) throw new Error('Generated content is n
 if (errors.length || consoleErrors.length) throw new Error([...errors, ...consoleErrors].join(' | '));
 await browser.close();
 await server.close();
-console.log('preview-generator-v2 working accordion and status browser smoke valid');
+console.log('preview-generator-v2 accordion status generate gate smoke valid');
 '@ | node --input-type=module -
 ```
 
 ## Notes
 
-The targeted Playwright smoke validates that Output Summary and Status are working accordionV2 panels, their headers toggle `aria-expanded`, collapsed panels compute to `display: none` with zero content height, `Ready.` appears only in the lower log output, repo destination display still updates, Generate Preview enables, and the existing preview generation path still writes `preview.svg`.
+The targeted Playwright smoke validates left and right accordion collapse/expand behavior, hidden Generate Preview gating, Status Clear log clearing, the Paths or IDs heading, repo destination display, and preserved preview generation output.
 
 `npm run test:workspace-v2` was attempted, but the script is not defined in this checkout.
 

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Fix Preview Generator V2 right accordion collapse behavior - PR_26126_018-preview-generator-v2-working-accordion-and-status-fix
+Restore Preview Generator V2 accordions and generate readiness gate - PR_26126_019-preview-generator-v2-accordion-status-and-generate-gate

docs/dev/reports/codex_changed_files.txt

@@ -6,7 +6,7 @@ M  docs/dev/reports/codex_review.diff
 M  tools/preview-generator-v2/index.html
 
 # git diff --stat
-docs/dev/codex_commands.md            |  75 +++++++++++-----------
+docs/dev/codex_commands.md            |  56 +++++++--------
  docs/dev/commit_comment.txt           |   2 +-
- tools/preview-generator-v2/index.html | 116 ++++++++++++++++++++--------------
- 3 files changed, 109 insertions(+), 84 deletions(-)
+ tools/preview-generator-v2/index.html | 131 ++++++++++++++++++++++++++--------
+ 3 files changed, 128 insertions(+), 61 deletions(-)