Restore working right-column accordion and move Ready status into output area - PR_26126_018-preview-generator-v2-working-accordion-and-status-fix

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,7 +1,7 @@
-# Codex Commands - PR_26126_015-preview-generator-v2-output-target-polish
+# Codex Commands - PR_26126_018-preview-generator-v2-working-accordion-and-status-fix
 
 ```bash
-codex run "Create PR_26126_015-preview-generator-v2-output-target-polish. Fix Preview Generator V2 UI polish only. Preserve existing generation behavior. Output Summary must not show dead accordion controls such as X or underscore unless they work; remove those controls. Status must remain a normal block with no accordion and no X. Update write folder sample labels/values: \"games\\Game Name\" becomes \"games\\<gamename>\", \"tools\\Tool Name\" becomes \"tools\\<toolname>\", and any repeated game example must use \"games\\<gamename>\". In Target type, move Games above Samples and remove the \"Target type\" text label. Render \"Write folder sample\" label/value on two lines with value \"samples\\phaseXX\\XXXX\\assets\\images\". Render \"Write folder\" label/value on two lines with value \"not available yet\". Do not modify samples. Do not add schema. Produce review artifacts."
+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."
 ```
 
 ## Validation Commands
@@ -39,7 +39,7 @@ await page.addInitScript(() => {
     async createWritable() { const path = this.path; return { async write(content) { writes.push({ path, content: String(content) }); }, async close() {} }; }
   }
   class FakeDirectoryHandle {
-    constructor(name = 'SelectedRepoFolder', path = '') { this.kind = 'directory'; this.name = name; this.path = path; this.children = new Map(); }
+    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); }
   }
@@ -49,46 +49,47 @@ await page.addInitScript(() => {
 
 await page.goto(`${server.baseUrl}/tools/preview-generator-v2/index.html`, { waitUntil: 'domcontentloaded' });
 await page.waitForSelector('#shared-theme-header');
-
-if (await page.locator('#outputSummary .accordion-v2__icon').count() !== 0) throw new Error('Output Summary still has accordion icon controls.');
-if (await page.locator('#outputSummary .accordion-v2__header').count() !== 0) throw new Error('Output Summary still has accordion header controls.');
-if (await page.locator('#statusAccordionContent').count() !== 0) throw new Error('Status accordion content still exists.');
-if (await page.locator('.preview-generator-v2__status-block .accordion-v2__icon').count() !== 0) throw new Error('Status block still has accordion icon controls.');
-
-const targetLabels = await page.locator('#targetSourceAccordionContent .preview-generator-v2__radio-option span').evaluateAll((items) => items.map((item) => item.textContent.trim()));
-if (JSON.stringify(targetLabels) !== JSON.stringify(['Games', 'Samples', 'Tools'])) throw new Error(`Unexpected target order: ${JSON.stringify(targetLabels)}`);
-if ((await page.locator('#targetSourceAccordionContent').innerText()).includes('Target type')) throw new Error('Target type text label still visible.');
-
-const initialSampleText = await page.locator('#writeFolderSampleValue').innerText();
-if (initialSampleText !== 'samples\\phaseXX\\XXXX\\assets\\images') throw new Error(`Unexpected initial sample text: ${initialSampleText}`);
-const initialWriteText = await page.locator('#writeFolderActualValue').innerText();
-if (initialWriteText !== 'not available yet') throw new Error(`Unexpected initial write folder text: ${initialWriteText}`);
-
-const summaryFields = await page.locator('#outputSummaryContent .preview-generator-v2__summary-field').evaluateAll((fields) => fields.map((field) => {
-  const children = Array.from(field.children);
-  return children.map((child) => ({ text: child.textContent.trim(), top: Math.round(child.getBoundingClientRect().top) }));
-}));
-for (const field of summaryFields) {
-  if (field.length !== 2 || field[0].top >= field[1].top) throw new Error(`Summary field is not two-line label/value: ${JSON.stringify(field)}`);
+await page.waitForFunction(() => document.querySelector('#outputSummary .accordion-v2__header')?.dataset.accordionV2Bound === 'true');
+await page.waitForFunction(() => document.querySelector('#statusAccordion .accordion-v2__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`);
+  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}`);
+  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`);
 }
 
-const placeholder = await page.locator('#sampleList').getAttribute('placeholder');
-if (!placeholder.includes('games\\<gamename>\\index.html')) throw new Error(`Game placeholder not normalized: ${placeholder}`);
-if (!placeholder.includes('tools\\<toolname>\\index.html')) throw new Error(`Tool placeholder not normalized: ${placeholder}`);
-
-await page.check('#targetTypeGames');
-await page.waitForFunction(() => document.getElementById('writeFolderSampleValue').textContent === 'games\\<gamename>\\assets\\images');
-await page.check('#targetTypeTools');
-await page.waitForFunction(() => document.getElementById('writeFolderSampleValue').textContent === 'tools\\<toolname>\\assets\\images');
-await page.check('#targetTypeSamples');
-await page.waitForFunction(() => document.getElementById('writeFolderSampleValue').textContent === 'samples\\phaseXX\\XXXX\\assets\\images');
+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.');
 
 await page.fill('#baseUrl', server.baseUrl);
 await page.fill('#waitMs', '3000');
 await page.fill('#sampleList', '0107');
 await page.check('#forceRewrite');
 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('writeFolderActualValue').textContent === 'samples\\phase-01\\0107\\assets\\images');
 await page.click('#executeBtn');
 await page.waitForFunction(() => document.getElementById('log').textContent.includes('===== SUMMARY ====='), null, { timeout: 35000 });
@@ -99,14 +100,14 @@ 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 output target polish browser smoke valid');
+console.log('preview-generator-v2 working accordion and status browser smoke valid');
 '@ | node --input-type=module -
 ```
 
 ## Notes
 
-The targeted Playwright smoke validates that Output Summary and Status have no dead accordion controls, target radios display Games/Samples/Tools, placeholder and write-folder sample text uses `<gamename>`/`<toolname>`, summary fields render as label/value rows, and the existing preview generation path still writes `preview.svg`.
+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`.
 
 `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 polish only.
+Full samples smoke test was skipped because this PR is scoped to Preview Generator V2 UI only.

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Polish Preview Generator V2 output targets and summary controls - PR_26126_015-preview-generator-v2-output-target-polish
+Fix Preview Generator V2 right accordion collapse behavior - PR_26126_018-preview-generator-v2-working-accordion-and-status-fix

docs/dev/reports/codex_changed_files.txt

@@ -1,10 +1,12 @@
 # git status --short
-M docs/dev/codex_commands.md
- M docs/dev/commit_comment.txt
- M tools/preview-generator-v2/index.html
+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 --stat
-docs/dev/codex_commands.md            | 56 +++++++++++++++++------------
- docs/dev/commit_comment.txt           |  2 +-
- tools/preview-generator-v2/index.html | 66 ++++++++++++++++-------------------
- 3 files changed, 66 insertions(+), 58 deletions(-)
+docs/dev/codex_commands.md            |  75 +++++++++++-----------
+ docs/dev/commit_comment.txt           |   2 +-
+ tools/preview-generator-v2/index.html | 116 ++++++++++++++++++++--------------
+ 3 files changed, 109 insertions(+), 84 deletions(-)