Move Clear button into Status accordion header without changing behavior - PR_26126_072-status-clear-header-placement-fix

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.txt

@@ -11,14 +11,14 @@ Note: entry percentages use function coverage when available, otherwise line cov
 Note: coverage entries are aggregated across every page/tool where coverageReporter.start(page) and coverageReporter.stop(page) ran.
 
 Exercised tool entry points detected:
-(86%) Preview Generator V2 - exercised 19 runtime JS files
+(87%) Preview Generator V2 - exercised 19 runtime JS files
 (49%) Palette Manager - exercised 12 runtime JS files
 (84%) Tool Template V2 - exercised 10 runtime JS files
 (0%) Workspace V2 - not exercised by this Playwright run
 (0%) Workspace Manager - not exercised by this Playwright run
 
 Changed runtime JS files covered:
-(100%) none changed - no changed runtime JS files
+(100%) tools/preview-generator-v2/controls/StatusLogControl.js - executed lines 22/22; executed functions 6/6
 
 Files with executed line/function counts where available:
 (2%) src/engine/input/ActionInputService.js - executed lines 397/397; executed functions 1/51
@@ -104,8 +104,8 @@ Files with executed line/function counts where available:
 (82%) samples/shared/sampleDetailPageEnhancement.js - executed lines 471/471; executed functions 41/50
 (86%) tools/templates-v2/js/controls/StatusLogControl.js - executed lines 21/21; executed functions 6/7
 (87%) tools/common/PaletteSortService.js - executed lines 103/103; executed functions 13/15
-(88%) tools/preview-generator-v2/PreviewGeneratorV2App.js - executed lines 539/539; executed functions 51/58
 (88%) tools/templates-v2/js/controls/SourceInputControl.js - executed lines 33/33; executed functions 7/8
+(90%) tools/preview-generator-v2/PreviewGeneratorV2App.js - executed lines 539/539; executed functions 52/58
 (92%) tools/templates-v2/js/controls/ToolStarterShellControl.js - executed lines 111/111; executed functions 11/12
 (100%) samples/phase-01/0102/KeyboardMoveScene.js - executed lines 78/78; executed functions 6/6
 (100%) samples/phase-01/0102/main.js - executed lines 23/23; executed functions 1/1
@@ -142,7 +142,7 @@ Files with executed line/function counts where available:
 (100%) tools/preview-generator-v2/controls/PreviewFrameControl.js - executed lines 9/9; executed functions 3/3
 (100%) tools/preview-generator-v2/controls/RenderControlsControl.js - executed lines 18/18; executed functions 5/5
 (100%) tools/preview-generator-v2/controls/RepoDestinationControl.js - executed lines 16/16; executed functions 4/4
-(100%) tools/preview-generator-v2/controls/StatusLogControl.js - executed lines 19/19; executed functions 5/5
+(100%) tools/preview-generator-v2/controls/StatusLogControl.js - executed lines 22/22; executed functions 6/6
 (100%) tools/preview-generator-v2/controls/TargetSourceControl.js - executed lines 30/30; executed functions 11/11
 (100%) tools/preview-generator-v2/previewGeneratorV2.bootstrap.js - executed lines 4/4; executed functions 1/1
 (100%) tools/preview-generator-v2/PreviewGeneratorV2Logger.js - executed lines 19/19; executed functions 5/5
@@ -156,7 +156,8 @@ Files with executed line/function counts where available:
 (100%) tools/templates-v2/js/services/ToolStateSerializer.js - executed lines 13/13; executed functions 3/3
 
 Uncovered or low-coverage changed JS files:
-(100%) none changed - no changed runtime JS files
+(100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
 (0%) tests/playwright/PreviewGeneratorV2Baseline.spec.mjs - changed JS file not collected as browser runtime coverage
+(100%) tools/preview-generator-v2/controls/StatusLogControl.js - changed JS file with browser V8 coverage

docs/dev/reports/status_clear_header_placement_fix.txt

@@ -0,0 +1,30 @@
+PR_26126_072-status-clear-header-placement-fix
+
+Scope:
+- Preview Generator V2 Status header placement and Status Clear interaction only.
+
+Changes:
+- Moved the Clear button into the actual Status `.accordion-v2__header` DOM node with the Status title and accordion icon.
+- Kept Clear on the same visual row as the Status title and accordion toggle.
+- Stopped Clear click propagation so Clear does not collapse or expand the Status accordion.
+- Added Playwright assertions that:
+  - Clear is inside the Status accordion header
+  - Clear empties the status/log output
+  - Clear does not toggle the accordion when Status is open
+  - Clear does not toggle the accordion when Status is collapsed
+
+Playwright impacted: Yes
+- This PR changes UI control placement and event behavior.
+- `npm run test:workspace-v2` must pass.
+
+Validation:
+- `node --check tests/playwright/PreviewGeneratorV2Baseline.spec.mjs` passed.
+- `node --check tools/preview-generator-v2/controls/StatusLogControl.js` passed.
+- `npm run test:workspace-v2` passed: 7 tests passed.
+- `git diff --check` passed with line-ending warnings only.
+
+Manual test notes:
+- Open Preview Generator V2.
+- Confirm Status shows Status, Clear, and the accordion icon on the same header row.
+- Click Clear and confirm the log is emptied without changing the Status accordion open/closed state.
+- Click the Status header outside Clear and confirm the accordion still collapses and expands.

tests/playwright/PreviewGeneratorV2Baseline.spec.mjs

@@ -383,8 +383,15 @@ test.describe("Preview Generator V2 baseline", () => {
       await expect(page.locator("#repoSelectedValue")).toHaveText("HTML-JavaScript-Gaming");
       await expect(page.locator("#executeBtn")).toBeEnabled();
 
+      const statusHeader = page.locator('#statusAccordion .accordion-v2__header[aria-controls="statusAccordionContent"]');
+      const statusContent = page.locator("#statusAccordionContent");
+      await expect(statusHeader.locator("#clearLogBtn")).toBeVisible();
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(statusContent).toBeVisible();
       await page.locator("#clearLogBtn").click();
       await expect(page.locator("#log")).toHaveText("");
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(statusContent).toBeVisible();
 
       for (const contentId of [
         "repoDestinationContent",
@@ -399,7 +406,16 @@ test.describe("Preview Generator V2 baseline", () => {
         await expectAccordionToggles(page, contentId);
       }
       await expect(page.locator("#clearLogBtn")).toBeVisible();
-      await expect(page.locator("#statusAccordion .preview-generator-v2__status-header-actions #clearLogBtn")).toBeVisible();
+      await expect(statusHeader.locator(".preview-generator-v2__status-header-actions #clearLogBtn")).toBeVisible();
+      await page.locator("#captureModeFullScreen").check();
+      await expect(page.locator("#log")).toContainText("Capture mode: Full Screen");
+      await statusHeader.click();
+      await expect(statusContent).toBeHidden();
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "false");
+      await page.locator("#clearLogBtn").click();
+      await expect(page.locator("#log")).toHaveText("");
+      await expect(statusHeader).toHaveAttribute("aria-expanded", "false");
+      await expect(statusContent).toBeHidden();
 
       expect(pageErrors).toEqual([]);
     } finally {

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

@@ -17,7 +17,10 @@ class StatusLogControl {
   }
 
   onClear(handler) {
-    this.clearLogBtn.addEventListener("click", handler);
+    this.clearLogBtn.addEventListener("click", (event) => {
+      event.stopPropagation();
+      handler(event);
+    });
   }
 }
 

tools/preview-generator-v2/index.html

@@ -212,13 +212,11 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface</h2>
         </section>
 
         <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">
-            <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>
+          <div class="accordion-v2__header preview-generator-v2__status-accordion-header" aria-expanded="true" aria-controls="statusAccordionContent">
+            <span>Status</span>
             <div class="preview-generator-v2__status-header-actions">
               <button id="clearLogBtn" class="preview-generator-v2__status-clear-button" type="button">Clear</button>
+              <span class="accordion-v2__icon" aria-hidden="true">+</span>
             </div>
           </div>
           <div id="statusAccordionContent" class="accordion-v2__content preview-generator-v2__status-content">

tools/preview-generator-v2/previewGeneratorV2.css

@@ -222,18 +222,8 @@ body.tools-platform-tool-page[data-tool-id="preview-generator-v2"] > .palette-ma
   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;
-  border-bottom: 1px solid var(--pm-line, rgba(221, 214, 254, 0.26));
-}
-
 .preview-generator-v2__status-accordion-header {
-  flex: 1 1 auto;
+  flex: 0 0 44px;
   min-width: 0;
 }
 
@@ -242,7 +232,6 @@ body.tools-platform-tool-page[data-tool-id="preview-generator-v2"] > .palette-ma
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding-right: 10px;
 }
 
 .preview-generator-v2__status-clear-button {