Polish MIDI Studio V2 launch-specific NAV bars and tab styling - PR_26146_049-midi-studio-v2-nav-and-tab-mode-polish

Author: ToolboxAid

docs/dev/reports/PR_26146_049-midi-studio-v2-nav-and-tab-mode-polish_validation.md

@@ -0,0 +1,52 @@
+# PR_26146_049 MIDI Studio V2 NAV and Tab Mode Polish Validation
+
+Status: PASS
+
+## Scope
+
+- Removed the visible launch-mode badge text from MIDI Studio V2 while preserving internal launch-mode state on `body[data-midi-studio-launch-mode]`.
+- Preserved launch-specific NAV behavior so workspace launch shows only Workspace NAV actions and tool launch shows only tool-owned Import/Save/Export actions.
+- Normalized `Import JSON Manifest` to use the same NAV button styling as neighboring action buttons.
+- Restyled MIDI Studio section controls as tabs with matching NAV font, clickable inactive tabs, and a distinct active tab.
+
+## Changed Files
+
+- `tools/midi-studio-v2/index.html`
+- `tools/midi-studio-v2/js/bootstrap.js`
+- `tools/midi-studio-v2/js/controls/ActionNavControl.js`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+
+## Validation Commands
+
+- PASS: `node --check tools/midi-studio-v2/js/bootstrap.js`
+- PASS: `node --check tools/midi-studio-v2/js/controls/ActionNavControl.js`
+- PASS: `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: HTML external-only guard for `tools/midi-studio-v2/index.html`
+- PASS: CSS brace check for `tools/midi-studio-v2/styles/midiStudioV2.css`
+- PASS: `npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "separates Workspace launch save ownership from Tool Mode standalone save|launches and renders a valid multi-song manifest payload|exports output through Type dropdown and Save Output without claiming project save|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000`
+- PASS: `git diff --check`
+
+## Playwright Coverage
+
+The targeted MIDI Studio V2 Playwright run proved:
+
+- Workspace launch shows Workspace NAV and hides the tool-only NAV.
+- Workspace launch exposes `Return to Workspace` without standalone Save/Import/Export output controls.
+- Tool launch shows tool-only Import JSON Manifest, Save Project, and output Export Type/Save controls.
+- Workspace-only return controls are hidden in tool launch.
+- Visible `Tool Mode` and `Workspace Mode` labels are absent.
+- `Import JSON Manifest` computed font, weight, padding, and button shape match the other NAV buttons.
+- Studio, Song Setup, Instruments, Auto-Create Parts, MIDI Import, and Diagnostics render as tabs.
+- Tab font matches NAV button font.
+- Active tab is visually distinct and inactive tabs remain clickable.
+- Tab switching still shows the MIDI Import and Studio panels.
+- Play and Stop still work through the existing fast octave editing coverage.
+
+## Samples Decision
+
+Full samples smoke test: SKIP. This PR only changes MIDI Studio V2 launch NAV presentation, tab styling, and targeted Playwright coverage. No sample JSON, shared runtime, or broad sample loading behavior changed.
+
+## Notes
+
+- Initial targeted Playwright run exposed a brittle exact subpixel border assertion for tabs. The implementation was kept scoped, and the test was corrected to prove visible tab shape and active/inactive distinction instead of an environment-specific fractional border value.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -1076,10 +1076,14 @@ test.describe("MIDI Studio V2", () => {
     const manifest = JSON.parse(await fs.readFile(uatManifestPath, "utf8"));
     const server = await openMidiStudioFromWorkspace(page, manifest);
     try {
-      await expect(page.locator("#launchModeIndicator")).toHaveText("Workspace Mode");
+      await expect(page.locator("#launchModeIndicator")).toHaveCount(0);
+      await expect(page.getByText("Tool Mode", { exact: true })).toHaveCount(0);
+      await expect(page.getByText("Workspace Mode", { exact: true })).toHaveCount(0);
       await expect(page.locator("body")).toHaveAttribute("data-midi-studio-launch-mode", "workspace");
       await expect(page.locator('[data-launch-mode-nav="workspace"]')).toBeVisible();
+      await expect(page.locator('[data-launch-mode-nav="tool"]')).toBeHidden();
       await expect(page.locator("#returnToWorkspaceButton")).toBeVisible();
+      await expect(page.locator('[data-launch-mode-nav="workspace"] button:not([hidden])')).toHaveText(["Return to Workspace"]);
       await expect(page.locator("#saveProjectButton")).toBeHidden();
       await expect(page.locator("#toolImportManifestButton")).toBeHidden();
       await expect(page.locator("#renderedExportSaveButton")).toBeHidden();
@@ -1871,7 +1875,11 @@ test.describe("MIDI Studio V2", () => {
     try {
       await expect(page.locator("body")).toHaveAttribute("data-tool-id", "midi-studio-v2");
       await expect(page.locator("body")).toHaveAttribute("data-midi-studio-launch-mode", "tool");
-      await expect(page.locator("#launchModeIndicator")).toHaveText("Tool Mode");
+      await expect(page.locator("#launchModeIndicator")).toHaveCount(0);
+      await expect(page.getByText("Tool Mode", { exact: true })).toHaveCount(0);
+      await expect(page.locator('[data-launch-mode-nav="tool"]')).toBeVisible();
+      await expect(page.locator('[data-launch-mode-nav="workspace"]')).toBeHidden();
+      await expect(page.locator("#returnToWorkspaceButton")).toBeHidden();
       await expect(page.locator("[data-midi-studio-header]")).toContainText("MIDI Studio V2");
       await expect(page.locator("#songList [data-song-id]")).toHaveCount(3);
       await expect(page.locator('[data-song-id="theme-main"]')).toHaveAttribute("aria-pressed", "true");
@@ -1895,6 +1903,74 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator(".midi-studio-v2__tool-menu #renderedExportTargetTypeSelect")).toBeVisible();
       await expect(page.locator(".midi-studio-v2__tool-menu #renderedExportSaveButton")).toBeVisible();
       await expect(page.locator(".midi-studio-v2__tool-menu #renderedExportSaveButton")).toHaveText("Save Output");
+      const navAndTabPresentation = await page.evaluate(() => {
+        const readActionButton = (selector) => {
+          const style = getComputedStyle(document.querySelector(selector));
+          return {
+            borderRadius: style.borderRadius,
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight,
+            paddingBottom: style.paddingBottom,
+            paddingLeft: style.paddingLeft,
+            paddingRight: style.paddingRight,
+            paddingTop: style.paddingTop
+          };
+        };
+        const readTab = (tab) => {
+          const style = getComputedStyle(tab);
+          return {
+            backgroundColor: style.backgroundColor,
+            borderTopLeftRadius: style.borderTopLeftRadius,
+            borderTopRightRadius: style.borderTopRightRadius,
+            color: style.color,
+            cursor: style.cursor,
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight
+          };
+        };
+        const tabs = Array.from(document.querySelectorAll(".midi-studio-v2__tabs [role='tab']"));
+        const activeTab = tabs.find((tab) => tab.classList.contains("is-active"));
+        const inactiveTab = tabs.find((tab) => !tab.classList.contains("is-active"));
+        return {
+          activeTab: readTab(activeTab),
+          importButton: readActionButton("#toolImportManifestButton"),
+          inactiveTab: readTab(inactiveTab),
+          stopAllButton: readActionButton("#stopAllAudioButton"),
+          tabLabels: tabs.map((tab) => tab.textContent.trim())
+        };
+      });
+      expect(navAndTabPresentation.importButton).toEqual(navAndTabPresentation.stopAllButton);
+      expect(navAndTabPresentation.activeTab).toMatchObject({
+        cursor: "pointer",
+        fontFamily: navAndTabPresentation.stopAllButton.fontFamily,
+        fontSize: navAndTabPresentation.stopAllButton.fontSize,
+        fontWeight: navAndTabPresentation.stopAllButton.fontWeight
+      });
+      expect(navAndTabPresentation.inactiveTab).toMatchObject({
+        cursor: "pointer",
+        fontFamily: navAndTabPresentation.stopAllButton.fontFamily,
+        fontSize: navAndTabPresentation.stopAllButton.fontSize,
+        fontWeight: navAndTabPresentation.stopAllButton.fontWeight
+      });
+      expect(navAndTabPresentation.activeTab.backgroundColor).not.toBe(navAndTabPresentation.inactiveTab.backgroundColor);
+      expect(navAndTabPresentation.activeTab.borderTopLeftRadius).not.toBe("0px");
+      expect(navAndTabPresentation.activeTab.borderTopRightRadius).not.toBe("0px");
+      expect(navAndTabPresentation.tabLabels).toEqual([
+        "Studio",
+        "Song Setup",
+        "Instruments",
+        "Auto-Create Parts",
+        "MIDI Import",
+        "Diagnostics"
+      ]);
+      await selectMidiStudioTab(page, "midi-import");
+      await expect(page.locator('[data-midi-studio-tab="midi-import"]')).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator("#midiImportContent")).toBeVisible();
+      await selectMidiStudioTab(page, "studio");
+      await expect(page.locator('[data-midi-studio-tab="studio"]')).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator("#instrumentGridOutput")).toBeVisible();
       await expect(page.locator("#midiSourceDetails")).toContainText("No MIDI source inspected.");
       await expect(page.locator("#audioDiagnosticsContent")).toBeHidden();
       await expect(page.locator("#playbackState")).toContainText("Audible preview ready: Main Theme.");

tools/midi-studio-v2/index.html

@@ -39,7 +39,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
     </details>
 
     <nav class="tool-starter__menu tool-starter__tool__menu midi-studio-v2__tool-menu" aria-label="Tool actions" data-launch-mode-nav="tool">
-      <button id="toolImportManifestButton" class="midi-studio-v2__primary-action" type="button">Import JSON Manifest</button>
+      <button id="toolImportManifestButton" type="button">Import JSON Manifest</button>
       <span id="nowPlayingLabel" class="midi-studio-v2__now-playing-label">No song selected</span>
       <button id="playButton" type="button" disabled>Play</button>
       <button id="stopButton" type="button" disabled>Stop</button>
@@ -69,10 +69,6 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
       <button id="returnToWorkspaceButton" type="button" hidden>Return to Workspace</button>
     </nav>
 
-    <div class="midi-studio-v2__mode-bar">
-      <span id="launchModeIndicator" class="midi-studio-v2__mode-indicator">Tool Mode</span>
-    </div>
-
     <nav class="midi-studio-v2__tabs" aria-label="MIDI Studio sections" role="tablist">
       <button class="is-active" type="button" role="tab" aria-selected="true" data-midi-studio-tab="studio">Studio</button>
       <button type="button" role="tab" aria-selected="false" data-midi-studio-tab="song-setup">Song Setup</button>

tools/midi-studio-v2/js/bootstrap.js

@@ -41,7 +41,6 @@ window.addEventListener("DOMContentLoaded", () => {
   const app = new MidiStudioV2App({
     accordions: Array.from(document.querySelectorAll(".accordion-v2"), (section) => new AccordionSection(section)),
     actionNav: new ActionNavControl({
-      launchModeIndicator: requireElement("#launchModeIndicator"),
       nowPlayingLabel: requireElement("#nowPlayingLabel"),
       projectDirtyState: requireElement("#projectDirtyState"),
       returnToWorkspaceButton: requireElement("#returnToWorkspaceButton"),

tools/midi-studio-v2/js/controls/ActionNavControl.js

@@ -1,7 +1,6 @@
 export class ActionNavControl {
   constructor({
     locationRef = window.location,
-    launchModeIndicator,
     nowPlayingLabel,
     projectDirtyState,
     returnToWorkspaceButton,
@@ -20,7 +19,6 @@ export class ActionNavControl {
     workspaceNav
   }) {
     this.location = locationRef;
-    this.launchModeIndicator = launchModeIndicator;
     this.nowPlayingLabel = nowPlayingLabel;
     this.projectDirtyState = projectDirtyState;
     this.returnToWorkspaceButton = returnToWorkspaceButton;
@@ -76,10 +74,6 @@ export class ActionNavControl {
     this.workspaceCopyManifestButton.hidden = isWorkspaceManagerLaunch;
     this.workspaceExportManifestButton.hidden = isWorkspaceManagerLaunch;
     this.returnToWorkspaceButton.hidden = !isWorkspaceManagerLaunch;
-    if (this.launchModeIndicator) {
-      this.launchModeIndicator.textContent = isWorkspace ? "Workspace Mode" : "Tool Mode";
-      this.launchModeIndicator.dataset.midiStudioLaunchMode = isWorkspace ? "workspace" : "tool";
-    }
     this.window.document.body.dataset.midiStudioLaunchMode = isWorkspace ? "workspace" : "tool";
   }
 

tools/midi-studio-v2/styles/midiStudioV2.css

@@ -54,33 +54,55 @@
   gap: 0.75rem;
 }
 
+body[data-tool-id="midi-studio-v2"] {
+  --midi-studio-v2-nav-font-size: 0.82rem;
+  --midi-studio-v2-nav-font-weight: 800;
+}
+
 .midi-studio-v2__tool-menu {
   align-items: center;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
+.midi-studio-v2__tool-menu button,
+.midi-studio-v2__workspace-menu button {
+  font-family: inherit;
+  font-size: var(--midi-studio-v2-nav-font-size);
+  font-weight: var(--midi-studio-v2-nav-font-weight);
+}
+
 .midi-studio-v2__tabs {
-  align-items: center;
+  align-items: flex-end;
   border-bottom: 1px solid var(--tool-starter-line);
   display: flex;
   flex-wrap: wrap;
-  gap: 0.4rem;
-  padding: 0.55rem 1rem 0.65rem;
+  gap: 0.2rem;
+  padding: 0.55rem 1rem 0;
 }
 
-.midi-studio-v2__tabs button {
-  border-radius: 6px;
-  font-size: 0.82rem;
-  font-weight: 800;
-  min-height: 2.25rem;
+body[data-tool-id="midi-studio-v2"] .midi-studio-v2__tabs button {
+  background: var(--tool-starter-surface);
+  border: 1px solid var(--tool-starter-line);
+  border-bottom: 0;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--midi-studio-v2-nav-font-size);
+  font-weight: var(--midi-studio-v2-nav-font-weight);
+  margin-bottom: -1px;
+  min-height: 2.35rem;
+  opacity: 0.86;
+  padding: 0.45rem 0.75rem;
 }
 
-.midi-studio-v2__tabs button.is-active {
+body[data-tool-id="midi-studio-v2"] .midi-studio-v2__tabs button.is-active {
   background: #0ea5e9;
   border-color: #7dd3fc;
+  border-bottom-color: #0ea5e9;
   color: #08111f;
+  opacity: 1;
 }
 
 .midi-studio-v2__now-playing-label {
@@ -106,21 +128,6 @@
   border-color: rgba(245, 158, 11, 0.72);
 }
 
-.midi-studio-v2__mode-bar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.4rem 1rem 0;
-}
-
-.midi-studio-v2__mode-indicator {
-  border: 1px solid var(--tool-starter-line);
-  border-radius: 999px;
-  font-size: 0.78rem;
-  font-weight: 800;
-  padding: 0.22rem 0.6rem;
-  text-transform: uppercase;
-}
-
 .midi-studio-v2.app-shell {
   grid-template-columns: 350px minmax(0, 1fr) minmax(14rem, 18rem);
 }
@@ -1074,10 +1081,6 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
   min-width: 0;
 }
 
-.midi-studio-v2__primary-action {
-  font-weight: 800;
-}
-
 .midi-studio-v2__header-actions .accordion-v2__icon {
   margin-left: auto;
 }