Add Text to Speech V2 workspace return nav without schema changes - PR_26130_018-text-to-speech-v2-workspace-nav-only

Author: DavidQ

docs/dev/reports/PR_26130_018-text-to-speech-v2-workspace-nav-only.md

@@ -0,0 +1,70 @@
+# PR_26130_018-text-to-speech-v2-workspace-nav-only
+
+## Summary
+
+Updated Text to Speech V2 workspace launch navigation only. Workspace launches now show a below-header Text to Speech V2 workspace nav with Return to Workspace, matching the Palette Manager V2 placement pattern while keeping speech playback controls inside the Named Sentences surface.
+
+## Scope Guard
+
+- Text to Speech V2 only for implementation files.
+- No schema files changed.
+- No Workspace Manager schema contract changes.
+- No Text to Speech V2 payload/schema shape changes.
+- No start_of_day changes.
+
+## Files Changed
+
+- tools/text2speach-V2/index.html
+- tools/text2speach-V2/styles/text2speach-V2.css
+- tools/text2speach-V2/js/bootstrap.js
+- tools/text2speach-V2/js/controls/ActionNavControl.js
+- tests/playwright/tools/WorkspaceManagerV2.spec.mjs
+
+## Implementation Notes
+
+- Moved the Text to Speech V2 workspace nav out of the Named Sentences accordion to the below-header position used by Palette Manager V2.
+- The below-header workspace nav uses Text to Speech V2 classes: text2speach-V2__menu, text2speach-V2__workspace-menu, and text2speach-V2__menu-actions.
+- The workspace nav contains Return to Workspace only.
+- The regular speech action buttons remain in the Named Sentences accordion and remain available during workspace launches.
+- Return to Workspace continues to preserve hostContextId in the Workspace Manager V2 return URL.
+
+## Playwright Impacted
+
+Yes.
+
+Playwright validates:
+- Standalone Text to Speech V2 launch keeps the workspace nav hidden.
+- Workspace-launched Text to Speech V2 shows the below-header workspace nav.
+- The Return to Workspace button is visible in workspace launch mode.
+- The workspace nav is placed between the collapsible header and the main Text to Speech V2 app surface.
+- Return to Workspace preserves the active hostContextId in the Workspace Manager V2 URL.
+
+Expected pass behavior:
+- Workspace nav is visible only for launch=workspace, fromTool=workspace-manager-v2, and hostContextId launches.
+- Standalone launches do not show the workspace nav.
+- Return navigation returns to Workspace Manager V2 without clearing or dirtying workspace/toolState data.
+
+Expected fail behavior:
+- Missing or misplaced workspace nav, missing Return to Workspace button, or lost hostContextId fails the Playwright assertions.
+
+## Validation
+
+- `npm run test:workspace-v2` passed: 30 tests passed.
+- Initial `npm run test:workspace-v2` attempt timed out due the command timeout; rerun with a longer timeout passed.
+- `node --check tools/text2speach-V2/js/bootstrap.js` passed.
+- `node --check tools/text2speach-V2/js/controls/ActionNavControl.js` passed.
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs` passed.
+- `git diff --check HEAD -- ...` passed with line-ending warnings only.
+
+## Full Samples Smoke Test
+
+Skipped. Reason: this PR is limited to Text to Speech V2 workspace nav placement and does not modify shared sample loading, broad runtime sample launch paths, or game/sample data contracts.
+
+## Manual Test Steps
+
+1. Open Text to Speech V2 directly from `tools/text2speach-V2/index.html`.
+2. Confirm no below-header Workspace actions nav is visible.
+3. Open Workspace Manager V2, select a repo and Asteroids, then launch Text to Speech V2.
+4. Confirm a below-header Workspace actions nav appears with Return to Workspace.
+5. Click Return to Workspace.
+6. Confirm the browser returns to Workspace Manager V2 with the same hostContextId and the active workspace/toolState remains open.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -981,8 +981,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator('[aria-controls="text2speach-V2TextContent"] > span:first-child')).toHaveText("Text to Speak");
       await expect(page.locator("#text2speach-V2TextContent")).not.toContainText("Speech text");
       await expect(page.locator('[aria-controls="text2speach-V2QueueContent"] > span:first-child')).toHaveText("Named Sentences");
-      await expect(page.locator('[data-launch-mode-nav="tool"]')).toBeVisible();
-      await expect(page.locator('[data-launch-mode-nav="workspace"]')).toBeHidden();
+      await expect(page.locator("#text2speach-V2SpeechActions")).toBeVisible();
+      await expect(page.locator(".text2speach-V2__workspace-menu")).toBeHidden();
       await expect(page.locator("#text2speach-V2SpeechPreview")).toHaveCount(0);
       await expect(page.locator("#text2speach-V2SpeechText")).toHaveValue("Welcome to Toolbox Aid. This is the default Text to Speech V2 sample line for previewing narration, prompts, and menu feedback.");
       await expect(page.locator("#text2speach-V2SpeakButton")).toBeEnabled();
@@ -1009,17 +1009,17 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "text2speach-V2PitchSlider",
         "text2speach-V2SpeechItemName"
       ]);
-      expect(await page.locator("#text2speach-V2QueueContent [data-launch-mode-nav='tool'] button").evaluateAll((buttons) => buttons.map((button) => button.id))).toEqual([
+      expect(await page.locator("#text2speach-V2SpeechActions button").evaluateAll((buttons) => buttons.map((button) => button.id))).toEqual([
         "text2speach-V2SpeakButton",
         "text2speach-V2PauseButton",
         "text2speach-V2ResumeButton",
         "text2speach-V2StopButton"
       ]);
       const namedSentenceTopControls = await page.locator("#text2speach-V2QueueContent").evaluate((content) => {
         const firstElement = Array.from(content.children).find((child) => child.nodeType === Node.ELEMENT_NODE);
-        return firstElement?.getAttribute("data-launch-mode-nav") || "";
+        return firstElement?.id || "";
       });
-      expect(namedSentenceTopControls).toBe("tool");
+      expect(namedSentenceTopControls).toBe("text2speach-V2SpeechActions");
       expect(await page.locator("#text2speach-V2SpeechOptionsContent .text2speach-V2__item-actions button").evaluateAll((buttons) => buttons.map((button) => button.textContent.trim()))).toEqual(["Add", "Duplicate", "Delete"]);
       const statusHeaderOrder = await page.locator(".text2speach-V2__status-accordion-header").evaluate((header) => Array.from(header.querySelectorAll(":scope > span, :scope > div > span, :scope > div > button"), (element) => element.textContent.trim()));
       expect(statusHeaderOrder).toEqual(["Status", "+", "Clear"]);
@@ -1496,7 +1496,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#returnToWorkspaceButton")).toBeVisible();
       await expect(page.locator("#text2speach-V2QueueTiles [data-speech-item-id]")).toHaveCount(0);
       await expect(page.locator("#text2speach-V2SpeechText")).toHaveValue("");
-      await expect(page.locator("#text2speach-V2WorkspaceSpeakButton")).toBeDisabled();
+      await expect(page.locator("#text2speach-V2SpeakButton")).toBeDisabled();
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/FAIL Text to Speech V2 payload from \/games\/Asteroids\/game\.manifest\.json failed tools\/schemas\/tools\/text2speach-V2\.schema\.json validation:/);
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/root\.queue\[0\]\.autoSpeak is not allowed/);
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/root\.queue\[0\]\.repeatCount is not allowed/);
@@ -3135,28 +3135,38 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page).toHaveURL(/text2speach-V2\/index\.html.*launch=workspace/);
       await expect(page).toHaveURL(/fromTool=workspace-manager-v2/);
       await expect(page).toHaveURL(/hostContextId=workspace-manager-v2-/);
-      await expect(page.locator('[data-launch-mode-nav="tool"]')).toBeHidden();
-      await expect(page.locator('[data-launch-mode-nav="workspace"]')).toBeVisible();
-      await expect(page.locator('[data-launch-mode-nav="workspace"] button')).toHaveText(["Speak", "Pause", "Resume", "Stop", "Return to Workspace"]);
+      await expect(page.locator("#text2speach-V2SpeechActions")).toBeVisible();
+      await expect(page.locator(".text2speach-V2__workspace-menu")).toBeVisible();
+      await expect(page.locator(".text2speach-V2__workspace-menu")).toHaveAttribute("data-launch-mode-nav", "workspace");
+      await expect(page.locator(".text2speach-V2__workspace-menu button")).toHaveText(["Return to Workspace"]);
+      const textToSpeechWorkspaceNavPlacement = await page.locator("body").evaluate(() => {
+        const details = document.querySelector("body > details");
+        const workspaceNav = document.querySelector("body > .text2speach-V2__workspace-menu");
+        const main = document.querySelector("body > main.text2speach-V2");
+        return Boolean(details && workspaceNav && main
+          && workspaceNav.previousElementSibling === details
+          && workspaceNav.nextElementSibling === main);
+      });
+      expect(textToSpeechWorkspaceNavPlacement).toBe(true);
       await expect(page.locator("#text2speach-V2QueueTiles [data-speech-item-id]")).toHaveCount(3);
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/OK Loaded Text to Speech V2 payload source: \/games\/Asteroids\/game\.manifest\.json\./);
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/OK Text to Speech V2 schema validation result: tools\/schemas\/tools\/text2speach-V2\.schema\.json valid; queue=3\./);
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/OK Text to Speech V2 dirty state: isDirty=false; reason=clean\./);
       await expect(page.locator("#text2speach-V2SpeechText")).toHaveValue("Welcome to Toolbox Aid. This is the default Text to Speech V2 sample line for previewing narration, prompts, and menu feedback.");
       await expect(page.locator("#text2speach-V2SpeechItemName")).toHaveValue("Narrator welcome");
-      await expect(page.locator("#text2speach-V2WorkspaceSpeakButton")).toBeEnabled();
-      await expect(page.locator("#text2speach-V2WorkspacePauseButton")).toBeEnabled();
-      await expect(page.locator("#text2speach-V2WorkspaceResumeButton")).toBeEnabled();
-      await expect(page.locator("#text2speach-V2WorkspaceStopButton")).toBeEnabled();
+      await expect(page.locator("#text2speach-V2SpeakButton")).toBeEnabled();
+      await expect(page.locator("#text2speach-V2PauseButton")).toBeEnabled();
+      await expect(page.locator("#text2speach-V2ResumeButton")).toBeEnabled();
+      await expect(page.locator("#text2speach-V2StopButton")).toBeEnabled();
       await expect(page.locator("#text2speach-V2VoiceSelect option")).toHaveCount(4);
-      await page.locator("#text2speach-V2WorkspaceSpeakButton").click();
+      await page.locator("#text2speach-V2SpeakButton").click();
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/OK Speech queued: Narrator welcome; mode=replace; en-US; voice=Google US English; rate=1; pitch=1; volume=1; queuedItems=1\./);
       const spoken = await page.evaluate(() => window["__text2speach-V2Spoken"]);
       expect(spoken).toHaveLength(1);
       expect(spoken[0].text).toBe("Welcome to Toolbox Aid. This is the default Text to Speech V2 sample line for previewing narration, prompts, and menu feedback.");
-      await page.locator("#text2speach-V2WorkspacePauseButton").click();
-      await page.locator("#text2speach-V2WorkspaceResumeButton").click();
-      await page.locator("#text2speach-V2WorkspaceStopButton").click();
+      await page.locator("#text2speach-V2PauseButton").click();
+      await page.locator("#text2speach-V2ResumeButton").click();
+      await page.locator("#text2speach-V2StopButton").click();
       await expect(page.locator("#text2speach-V2StatusLog")).toHaveValue(/OK Speech queue stopped: 1 queued item\(s\) cleared\./);
       expect(await page.evaluate(() => window["__text2speach-V2Paused"])).toBe(1);
       expect(await page.evaluate(() => window["__text2speach-V2Resumed"])).toBe(1);

tools/text2speach-V2/index.html

@@ -36,6 +36,12 @@ <h2 class="tools-platform-frame__eyebrow">Browser speech synthesis</h2>
       </div>
     </details>
 
+    <nav class="text2speach-V2__menu text2speach-V2__workspace-menu" aria-label="Workspace actions" data-launch-mode-nav="workspace" hidden>
+      <div class="text2speach-V2__menu-actions">
+        <button id="returnToWorkspaceButton" type="button">Return to Workspace</button>
+      </div>
+    </nav>
+
     <main class="text2speach-V2 app-shell" data-tool-id="text2speach-V2">
       <aside class="text2speach-V2__panel text2speach-V2__panel--left" aria-label="Speech input">
         <section class="accordion-v2 text2speach-V2__accordion is-open" data-accordion-v2-open="true">
@@ -118,19 +124,12 @@ <h2 class="tools-platform-frame__eyebrow">Browser speech synthesis</h2>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
           </button>
           <div id="text2speach-V2QueueContent" class="accordion-v2__content">
-            <nav class="text2speach-V2__menu" aria-label="Tool actions" data-launch-mode-nav="tool">
+            <nav id="text2speach-V2SpeechActions" class="text2speach-V2__menu text2speach-V2__speech-actions" aria-label="Speech actions">
               <button id="text2speach-V2SpeakButton" type="button" disabled>Speak</button>
               <button id="text2speach-V2PauseButton" type="button" disabled>Pause</button>
               <button id="text2speach-V2ResumeButton" type="button" disabled>Resume</button>
               <button id="text2speach-V2StopButton" type="button" disabled>Stop</button>
             </nav>
-            <nav class="text2speach-V2__menu text2speach-V2__workspace-menu" aria-label="Workspace actions" data-launch-mode-nav="workspace" hidden>
-              <button id="text2speach-V2WorkspaceSpeakButton" type="button" disabled>Speak</button>
-              <button id="text2speach-V2WorkspacePauseButton" type="button" disabled>Pause</button>
-              <button id="text2speach-V2WorkspaceResumeButton" type="button" disabled>Resume</button>
-              <button id="text2speach-V2WorkspaceStopButton" type="button" disabled>Stop</button>
-              <button id="returnToWorkspaceButton" type="button">Return to Workspace</button>
-            </nav>
             <div id="text2speach-V2QueueTiles" class="text2speach-V2__queue-tiles" role="listbox" aria-label="Named Sentences"></div>
           </div>
         </section>

tools/text2speach-V2/js/bootstrap.js

@@ -20,24 +20,11 @@ window.addEventListener("DOMContentLoaded", () => {
   mountAccordionV2(document);
   const app = new TextToSpeechToolApp({
     actionNav: new ActionNavControl({
-      pauseButtons: [
-        requireElement("#text2speach-V2PauseButton"),
-        requireElement("#text2speach-V2WorkspacePauseButton")
-      ],
+      pauseButtons: [requireElement("#text2speach-V2PauseButton")],
       returnToWorkspaceButton: requireElement("#returnToWorkspaceButton"),
-      resumeButtons: [
-        requireElement("#text2speach-V2ResumeButton"),
-        requireElement("#text2speach-V2WorkspaceResumeButton")
-      ],
-      speakButtons: [
-        requireElement("#text2speach-V2SpeakButton"),
-        requireElement("#text2speach-V2WorkspaceSpeakButton")
-      ],
-      stopButtons: [
-        requireElement("#text2speach-V2StopButton"),
-        requireElement("#text2speach-V2WorkspaceStopButton")
-      ],
-      toolNav: requireElement('[data-launch-mode-nav="tool"]'),
+      resumeButtons: [requireElement("#text2speach-V2ResumeButton")],
+      speakButtons: [requireElement("#text2speach-V2SpeakButton")],
+      stopButtons: [requireElement("#text2speach-V2StopButton")],
       workspaceNav: requireElement('[data-launch-mode-nav="workspace"]')
     }),
     engine: new TextToSpeechEngine(),

tools/text2speach-V2/js/controls/ActionNavControl.js

@@ -6,7 +6,6 @@ export class ActionNavControl {
     resumeButtons = [],
     speakButtons = [],
     stopButtons = [],
-    toolNav,
     windowRef = window,
     workspaceNav
   }) {
@@ -16,7 +15,6 @@ export class ActionNavControl {
     this.resumeButtons = resumeButtons;
     this.speakButtons = speakButtons;
     this.stopButtons = stopButtons;
-    this.toolNav = toolNav;
     this.window = windowRef;
     this.workspaceNav = workspaceNav;
   }
@@ -45,7 +43,6 @@ export class ActionNavControl {
     const isWorkspaceManagerLaunch = params.get("launch") === "workspace"
       && params.get("fromTool") === "workspace-manager-v2"
       && Boolean(params.get("hostContextId"));
-    this.toolNav.hidden = isWorkspaceManagerLaunch;
     this.workspaceNav.hidden = !isWorkspaceManagerLaunch;
   }
 

tools/text2speach-V2/styles/text2speach-V2.css

@@ -80,8 +80,16 @@
   display: none;
 }
 
+.text2speach-V2__menu-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
 .text2speach-V2__item-actions,
-.text2speach-V2__options .text2speach-V2__menu {
+.text2speach-V2__options .text2speach-V2__menu,
+.text2speach-V2__speech-actions {
   flex-wrap: wrap;
   justify-content: flex-start;
   width: 100%;