Restore accordion behavior for Status control in Preview Generator V2 - PR_26126_046-preview-generator-v2-status-accordion-restore

Author: DavidQ

docs/dev/reports/preview_generator_v2_status_accordion_restore.txt

@@ -0,0 +1,48 @@
+PR_26126_046 Preview Generator V2 Status accordion restore
+
+Scope
+- Updated Preview Generator V2 Status control only.
+- Updated tools/preview-generator-v2/index.html.
+- Updated tools/preview-generator-v2/controls/StatusLogControl.js.
+- Updated tools/preview-generator-v2/previewGeneratorV2.css for Status accordion layout/hidden state.
+- Extended tests/playwright/PreviewGeneratorV2Baseline.spec.mjs to include Status accordion coverage.
+- No samples, schemas, or start_of_day files were modified.
+
+Implementation
+- Converted #statusAccordion to an accordion-v2 section.
+- Added a Status accordion toggle button with aria-controls="statusAccordionContent".
+- Kept Clear as a separate button on the same header row, outside the toggle button.
+- Wired StatusLogControl to use AccordionSection with #statusAccordionContent.
+- Added a scoped hidden-content rule so the log textarea/content hides when Status is collapsed.
+
+Behavior preserved
+- Status logging still writes through the existing logger/status control path.
+- Clear still clears the logging/status textarea.
+- Status remains expanded by default.
+- No generation logic changed.
+- Other controls were not modified.
+
+Validation
+- JavaScript syntax check passed for tools/preview-generator-v2/*.js.
+- JavaScript syntax check passed for tools/preview-generator-v2/controls/*.js.
+- JavaScript syntax check passed for tests/playwright/PreviewGeneratorV2Baseline.spec.mjs.
+- npm run test:workspace-v2 passed.
+- Result: 3 passed.
+- Confirmed no samples, schemas, or start_of_day changes.
+
+Playwright coverage
+- Existing accordion helper now verifies icon state for closed/open.
+- Status accordion is included in the accordion coverage list.
+- Test verifies #statusAccordionContent hides/shows through the shared accordion behavior.
+- Test verifies #clearLogBtn remains visible after accordion toggling.
+
+Full samples smoke test
+- Skipped intentionally.
+- Reason: this PR is a targeted Preview Generator V2 Status control change and does not modify sample JSON, sample launch code, or shared sample runtime behavior.
+
+Manual validation
+- Open tools/preview-generator-v2/index.html.
+- Collapse Status and confirm the log textarea hides.
+- Expand Status and confirm the log textarea returns.
+- Confirm the icon rotates/updates with open/closed state.
+- Click Clear and confirm the log output clears.

tests/playwright/PreviewGeneratorV2Baseline.spec.mjs

@@ -317,10 +317,12 @@ test.describe("Preview Generator V2 baseline", () => {
         "assetFolderContent",
         "captureModeContent",
         "renderControlsContent",
-        "outputSummaryContent"
+        "outputSummaryContent",
+        "statusAccordionContent"
       ]) {
         await expectAccordionToggles(page, contentId);
       }
+      await expect(page.locator("#clearLogBtn")).toBeVisible();
 
       expect(pageErrors).toEqual([]);
     } finally {

tools/preview-generator-v2/controls/StatusLogControl.js

@@ -1,5 +1,8 @@
+import { AccordionSection } from "./AccordionSection.js";
+
 class StatusLogControl {
   constructor({ documentRef = document } = {}) {
+    this.accordion = new AccordionSection({ content: documentRef.getElementById("statusAccordionContent") });
     this.statusEl = documentRef.getElementById("status");
     this.logEl = documentRef.getElementById("log");
     this.clearLogBtn = documentRef.getElementById("clearLogBtn");

tools/preview-generator-v2/index.html

@@ -211,12 +211,15 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface</h2>
           </div>
         </section>
 
-        <section id="statusAccordion" class="preview-generator-v2__status-block">
+        <section id="statusAccordion" class="accordion-v2 preview-generator-v2__status-block is-open" data-accordion-v2-open="true">
           <div class="preview-generator-v2__status-header-row">
-            <h2 class="preview-generator-v2__status-heading">Status</h2>
+            <button class="accordion-v2__header preview-generator-v2__status-accordion-header" type="button" aria-expanded="true" aria-controls="statusAccordionContent">
+              <span>Status</span>
+              <span class="accordion-v2__icon" aria-hidden="true">+</span>
+            </button>
             <button id="clearLogBtn" class="preview-generator-v2__status-clear-button" type="button">Clear</button>
           </div>
-          <div id="statusAccordionContent" class="preview-generator-v2__status-content">
+          <div id="statusAccordionContent" class="accordion-v2__content preview-generator-v2__status-content">
             <div id="status" class="preview-generator-v2__status-text" hidden></div>
             <div id="log">Ready.
 </div>

tools/preview-generator-v2/previewGeneratorV2.css

@@ -218,28 +218,28 @@ body.tools-platform-tool-page[data-tool-id="preview-generator-v2"] > .palette-ma
   padding: 8px;
 }
 
+.preview-generator-v2__status-content[hidden] {
+  display: none;
+}
+
 .preview-generator-v2__status-header-row {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   min-width: 0;
-  padding: 8px 10px;
   border-bottom: 1px solid var(--pm-line, rgba(221, 214, 254, 0.26));
 }
 
-.preview-generator-v2__status-heading {
+.preview-generator-v2__status-accordion-header {
   flex: 1 1 auto;
   min-width: 0;
-  margin: 0;
-  color: var(--pm-text, #f7f4ff);
-  font-size: 0.95rem;
-  font-weight: 700;
 }
 
 .preview-generator-v2__status-clear-button {
   flex: 0 0 auto;
+  margin-right: 10px;
 }
 
 .preview-generator-v2__status-text {