Balance Audio SFX right panel layout and simplify Wave Preview - PR_26144_007-audio-sfx-balanced-right-panel-layout

Author: ToolboxAid

docs/dev/reports/playwright_audio_sfx_balanced_right_panel.md

@@ -0,0 +1,70 @@
+# Audio / SFX Playground V2 Balanced Right Panel Validation
+
+PR: `PR_26144_007-audio-sfx-balanced-right-panel-layout`
+
+## Scope
+
+- Updated only `tools/audio-sfx-playground-v2` plus required reports.
+- Removed visible Wave Preview metadata text:
+  - sound name
+  - waveform/frequency/duration/sweep summary
+  - preview tags
+- Kept Wave Preview visual-only by rendering only the meter bars for valid sounds.
+- Replaced the initial preview fallback text with an empty visual preview shell.
+- Updated right-column accordion flex behavior so Wave Preview, Output Summary, and Status share height evenly.
+- Prevented the preview accordion from keeping the prior fixed-height bias.
+- Did not modify `start_of_day` folders.
+
+## Static Validation
+
+PASS:
+
+- HTML/CSS/static preview validation:
+  - no `<style>` blocks
+  - no inline event handlers
+  - no script tags without `src`
+  - linked stylesheets resolve
+  - CSS braces are balanced
+  - preview renderer no longer emits metadata text
+  - HTML preview fallback no longer contains visible fallback text
+- Audio / SFX Playground V2 JavaScript syntax check:
+  - `node --check` over `tools/audio-sfx-playground-v2/js/**/*.js`
+- Changed runtime module import check:
+  - `SfxPreviewControl.js`
+- Whitespace validation:
+  - `git diff --check -- tools/audio-sfx-playground-v2`
+- JSON validation:
+  - No JSON files changed in this PR.
+
+## Playwright Impact
+
+Playwright impacted: Yes.
+
+Expected validation:
+
+- Workspace V2 launches Audio / SFX Playground V2 with no console errors.
+- Wave Preview shows only the visual meter bars for a valid sound.
+- Wave Preview does not show sound name text.
+- Wave Preview does not show waveform/frequency/duration/sweep summary text.
+- Right-column panels for Wave Preview, Output Summary, and Status share available vertical space evenly/flexibly.
+- No right-column panel consumes most of the column height.
+- No clipping or overflow regression appears in the right column.
+
+Local command results:
+
+- `npm run test:workspace-v2`
+  - FAIL: PowerShell blocked `npm.ps1` because script execution is disabled on this system.
+- `npm.cmd run test:workspace-v2`
+  - FAIL: package script started, but `playwright` is not installed or not available on PATH.
+
+Because Playwright is unavailable in this local environment, browser launch validation and V8 coverage could not be completed here.
+
+## Coverage
+
+WARN: Runtime JavaScript changed, but Playwright V8 coverage could not be generated because the local Playwright command is unavailable.
+
+- `(WARN) tools/audio-sfx-playground-v2/js/controls/SfxPreviewControl.js - Playwright unavailable`
+
+## Full Samples Smoke Test
+
+Skipped. This PR only adjusts Audio / SFX Playground V2 layout behavior.

tools/audio-sfx-playground-v2/index.html

@@ -138,7 +138,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
           </button>
           <div id="previewPanelContent" class="accordion-v2__content">
             <div id="previewOutput" class="tool-starter__preview audio-sfx__preview" role="img" aria-label="SFX envelope and waveform preview">
-              <p>No preview rendered yet.</p>
+              <div class="tool-starter__preview-card audio-sfx__preview-empty" aria-hidden="true"></div>
             </div>
           </div>
         </section>

tools/audio-sfx-playground-v2/js/controls/SfxPreviewControl.js

@@ -20,22 +20,17 @@ export class SfxPreviewControl {
     this.output = output;
   }
 
-  clear(message = "No preview rendered yet.") {
-    const emptyState = document.createElement("p");
-    emptyState.textContent = message;
+  clear() {
+    const emptyState = document.createElement("div");
+    emptyState.className = "tool-starter__preview-card audio-sfx__preview-empty";
+    emptyState.setAttribute("aria-hidden", "true");
     this.output.replaceChildren(emptyState);
   }
 
   render(sound) {
     const card = document.createElement("article");
     card.className = "tool-starter__preview-card";
 
-    const title = document.createElement("h2");
-    title.textContent = sound.name;
-
-    const summary = document.createElement("p");
-    summary.textContent = `${sound.waveform}, ${sound.frequencyHz} Hz, ${sound.durationMs} ms, ${sound.pitchSweepCents} cents`;
-
     const bars = document.createElement("div");
     bars.className = "tool-starter__meter-bars";
     bars.setAttribute("aria-hidden", "true");
@@ -45,15 +40,7 @@ export class SfxPreviewControl {
       bars.append(bar);
     }
 
-    const tags = document.createElement("div");
-    tags.className = "tool-starter__preview-tags";
-    [sound.noise ? "noise transient" : "oscillator only", `volume ${sound.volume.toFixed(2)}`].forEach((label) => {
-      const tag = document.createElement("span");
-      tag.textContent = label;
-      tags.append(tag);
-    });
-
-    card.append(title, summary, bars, tags);
+    card.append(bars);
     this.output.replaceChildren(card);
   }
 }

tools/audio-sfx-playground-v2/styles/audioSfxLayoutDensity.css

@@ -142,49 +142,52 @@ body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__tile span {
   font-size: 0.88rem;
 }
 
-body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview-accordion {
-  flex: 0 0 auto;
+body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right {
+  overflow: hidden;
 }
 
-body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview-accordion .accordion-v2__content {
-  flex: 0 0 auto;
+body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right > .accordion-v2 {
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right > .accordion-v2.is-open {
+  flex: 1 1 0;
+}
+
+body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--right .accordion-v2__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
 }
 
 body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview {
-  min-height: 176px;
+  height: 100%;
+  min-height: 0;
   padding: 10px;
 }
 
 body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__preview-card {
+  height: 100%;
+  min-height: 0;
   width: 100%;
+  display: flex;
+  flex-direction: column;
   padding: 12px;
 }
 
-body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__preview-card h2 {
-  font-size: 1rem;
-}
-
-body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__preview-card p {
-  margin-top: 5px;
-  font-size: 0.84rem;
+body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .audio-sfx__preview-empty {
+  border-style: dashed;
 }
 
 body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__meter-bars {
-  min-height: 86px;
+  min-height: 0;
+  flex: 1 1 auto;
   gap: 3px;
-  margin-top: 8px;
+  margin-top: 0;
   padding: 6px;
 }
 
 body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__meter-bars span {
   max-height: 86px;
 }
-
-body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__preview-tags {
-  gap: 6px;
-  margin-top: 8px;
-}
-
-body[data-tool-id="audio-sfx-playground-v2"] .audio-sfx__preview .tool-starter__preview-tags span {
-  padding: 3px 6px;
-}