Separate Workspace Manager V2 tools control and add Workflow nav entry - PR_26127_002-workspace-manager-v2-tools-control-and-nav

Author: DavidQ

docs/dev/reports/PR_26127_002-workspace-manager-v2-tools-control-and-nav.md

@@ -0,0 +1,58 @@
+# PR_26127_002-workspace-manager-v2-tools-control-and-nav
+
+## Scope
+
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before implementation.
+- Moved Workspace Manager V2 launch tiles into their own accordion control above Workspace Context.
+- Labeled the new Workspace Manager V2 control `Tools`.
+- Kept Workspace Manager V2 tool tile launch behavior unchanged.
+- Made Workspace Context summary tiles a consistent fixed height.
+- Added a `Workflow` group to `tools/index.html` above `Editors`.
+- Moved Workspace Manager V2 into the `Workflow` group while preserving `Editors`, `Utilities`, and `Viewers`.
+- Kept tile action labels as `How To Use`, `Read Me`, and `Samples (x)`.
+
+## Validation
+
+- `npm run test:workspace-v2` - PASS, 24 Playwright tests.
+- `git diff --check` - PASS with only Git line-ending warnings.
+- Scope check: no changes under `tools/workspace-v2` or `samples`.
+- Full samples smoke test skipped by request; this PR is Workspace Manager V2 UI/nav scoped.
+
+## Playwright Impacted
+
+Yes. This PR changes Workspace Manager V2 UI layout and the tools index navigation grouping.
+
+Validated behavior:
+- Tools index shows `Workflow`, `Editors`, `Utilities`, and `Viewers` in that order.
+- Workspace Manager V2 appears in the `Workflow` group and not in `Utilities`.
+- Tool card action labels use `How To Use`, `Read Me`, and `Samples (x)` formatting.
+- Workspace Manager V2 has a separate `Tools` accordion above `Workspace Context`.
+- Tool tiles are no longer nested in Workspace Context.
+- Workspace Context summary tiles render at a consistent height.
+- Workspace Manager V2 tool tile launches and Return to Workspace behavior remain valid.
+
+Expected pass behavior:
+- Workspace Manager V2 launches from tools/index.html under `Workflow`.
+- Workspace Manager V2 shows the `Tools` control above `Workspace Context`.
+- Workspace Context summary tiles align at the same height.
+
+Expected fail behavior:
+- Invalid manifests still block export and log schema errors.
+- Direct Asset Manager V2 workspace query launch remains blocked.
+
+## Manual Validation Notes
+
+1. Open `/tools/index.html`.
+2. Confirm `Workflow` appears above `Editors`, followed by `Utilities` and `Viewers`.
+3. Confirm Workspace Manager V2 appears under `Workflow`.
+4. Confirm tool card actions read `How To Use`, `Read Me`, and `Samples (x)` where sample links exist.
+5. Open `/tools/workspace-manager-v2/index.html`.
+6. Confirm the center panel shows `Tools` above `Workspace Context`.
+7. Load Asteroids and confirm Workspace Context summary tiles have matching heights.
+8. Launch a tile, return to Workspace, and confirm the active context remains restored.
+
+Out of scope:
+- Full samples smoke test.
+- Deprecated `tools/workspace-v2`.
+- Sample JSON changes.
+

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -43,6 +43,34 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(card.locator("a", { hasText: "Workspace Manager V2" })).toHaveAttribute("href", "/tools/workspace-manager-v2/index.html");
       await expect(card).toContainText("First-Class Tool V2 workspace surface");
       await expect(card).toContainText("Workspace");
+      const toolsIndexState = await page.evaluate(() => {
+        const firstClassToolsSection = Array.from(document.querySelectorAll("section"))
+          .find((section) => section.querySelector(":scope > h2")?.textContent?.trim() === "First-Class Tools");
+        const workflowGrid = firstClassToolsSection?.querySelector("[data-active-tools-workflow-grid]");
+        const utilitiesGrid = firstClassToolsSection?.querySelector("[data-active-tools-utilities-grid]");
+        const workspaceCard = workflowGrid?.querySelector(".tools-platform-card");
+        return {
+          actionLabels: Array.from(firstClassToolsSection?.querySelectorAll(".tools-platform-card__action") || [])
+            .map((action) => action.textContent.trim()),
+          headings: Array.from(firstClassToolsSection?.querySelectorAll(":scope > h3") || [])
+            .map((heading) => heading.textContent.trim()),
+          sampleLabels: Array.from(firstClassToolsSection?.querySelectorAll(".tools-platform-card__action") || [])
+            .map((action) => action.textContent.trim())
+            .filter((label) => label.startsWith("Samples")),
+          utilitiesCards: Array.from(utilitiesGrid?.querySelectorAll(".tools-platform-card h3") || [])
+            .map((heading) => heading.textContent.trim()),
+          workflowCards: Array.from(workflowGrid?.querySelectorAll(".tools-platform-card h3") || [])
+            .map((heading) => heading.textContent.trim()),
+          workspaceActionLabels: Array.from(workspaceCard?.querySelectorAll(".tools-platform-card__action") || [])
+            .map((action) => action.textContent.trim())
+        };
+      });
+      expect(toolsIndexState.headings.slice(0, 4)).toEqual(["Workflow", "Editors", "Utilities", "Viewers"]);
+      expect(toolsIndexState.workflowCards).toEqual(["Workspace Manager V2"]);
+      expect(toolsIndexState.utilitiesCards).not.toContain("Workspace Manager V2");
+      expect(toolsIndexState.workspaceActionLabels).toEqual(["How To Use", "Read Me"]);
+      expect(toolsIndexState.actionLabels).not.toContain("README");
+      expect(toolsIndexState.sampleLabels.every((label) => /^Samples \(\d+\)$/.test(label))).toBe(true);
       expect(pageErrors).toEqual([]);
     } finally {
       await coverageReporter.stop(page);
@@ -140,6 +168,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#seedUatManifestButton")).toBeHidden();
       await expect(page.locator("#loadAsteroidsButton")).toHaveText("Load Asteroids");
       await expect(page.locator("#launchAssetManagerV2Button")).toHaveCount(0);
+      await expect(page.locator("#workspaceToolsContent #workspaceToolTiles")).toBeVisible();
+      await expect(page.locator("#workspaceContextContent #workspaceToolTiles")).toHaveCount(0);
+      const centerControlLabels = await page.locator(".workspace-manager-v2__panel--center > .accordion-v2 > .accordion-v2__header span:first-child")
+        .evaluateAll((labels) => labels.map((label) => label.textContent.trim()));
+      expect(centerControlLabels.slice(0, 2)).toEqual(["Tools", "Workspace Context"]);
       await expect(page.locator("#workspaceToolTiles [data-workspace-tool-id]")).toHaveCount(5);
       expect(await page.locator("#workspaceToolTiles [data-workspace-tool-id]").evaluateAll((tiles) => tiles.every((tile) => tile.disabled))).toBe(true);
       await expect(page.locator("#activeGameSelect option")).toHaveText([
@@ -155,6 +188,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#activePaletteSummary")).toContainText("active colors");
       await expect(page.locator("#activeAssetRegistrySummary")).toHaveText("Schema-ready Asset Manager V2 manifest payload contains 13 managed assets.");
       await expect(page.locator("#launchContextSummary")).toHaveText("Schema-valid manifest is ready for Asteroids.");
+      const workspaceContextTileHeights = await page.locator(".workspace-manager-v2__summary-card").evaluateAll((tiles) => tiles.map((tile) => Math.round(tile.getBoundingClientRect().height)));
+      expect(new Set(workspaceContextTileHeights).size).toBe(1);
+      expect(workspaceContextTileHeights.every((height) => height >= 118)).toBe(true);
       await expect(page.locator("#workspaceContextOutput")).toContainText('"gameRoot": "games/Asteroids/"');
       await expect(page.locator("#workspaceContextOutput")).toContainText('"assetsPath": "games/Asteroids/assets"');
       await expect(page.locator("#workspaceContextOutput")).toContainText('"source": "manifest"');

tools/index.html

@@ -29,6 +29,8 @@
 
     <section>
       <h2>First-Class Tools</h2>
+      <h3>Workflow</h3>
+      <div class="grid" data-active-tools-workflow-grid></div>
       <h3>Editors</h3>
       <div class="grid" data-active-tools-editors-grid></div>
       <h3>Utilities</h3>

tools/renderToolsIndex.js

@@ -16,7 +16,7 @@ function buildDocumentationLinks(tool) {
   }
   return [
     { label: "How To Use", path: `${folder}/how_to_use.html` },
-    { label: "README", path: `${folder}/README.md` }
+    { label: "Read Me", path: `${folder}/README.md` }
   ];
 }
 
@@ -73,6 +73,9 @@ function renderToolCard(tool, sampleCountByToolId) {
 }
 
 function classifyToolGroup(toolId) {
+  const workflowToolIds = new Set([
+    "workspace-manager-v2"
+  ]);
   const viewerToolIds = new Set([
     "3d-asset-viewer",
     "replay-visualizer",
@@ -82,11 +85,13 @@ function classifyToolGroup(toolId) {
     "asset-browser",
     "asset-manager-v2",
     "asset-pipeline",
-    "workspace-manager-v2",
     "tile-model-converter",
     "physics-sandbox",
     "3d-json-payload"
   ]);
+  if (workflowToolIds.has(toolId)) {
+    return "workflow";
+  }
   if (viewerToolIds.has(toolId)) {
     return "viewers";
   }
@@ -136,10 +141,11 @@ async function loadSampleCountByToolId() {
 }
 
 function renderActiveToolsList(sampleCountByToolId) {
+  const workflowGrid = document.querySelector("[data-active-tools-workflow-grid]");
   const editorsGrid = document.querySelector("[data-active-tools-editors-grid]");
   const utilitiesGrid = document.querySelector("[data-active-tools-utilities-grid]");
   const viewersGrid = document.querySelector("[data-active-tools-viewers-grid]");
-  if (!editorsGrid || !utilitiesGrid || !viewersGrid) {
+  if (!workflowGrid || !editorsGrid || !utilitiesGrid || !viewersGrid) {
     return;
   }
   const tools = getToolRegistry()
@@ -148,10 +154,12 @@ function renderActiveToolsList(sampleCountByToolId) {
     .filter((entry) => entry.id !== "state-inspector")
     .sort((left, right) => String(left.displayName || "").localeCompare(String(right.displayName || "")));
 
+  const workflow = tools.filter((tool) => classifyToolGroup(tool.id) === "workflow").map((tool) => renderToolCard(tool, sampleCountByToolId));
   const editors = tools.filter((tool) => classifyToolGroup(tool.id) === "editors").map((tool) => renderToolCard(tool, sampleCountByToolId));
   const utilities = tools.filter((tool) => classifyToolGroup(tool.id) === "utilities").map((tool) => renderToolCard(tool, sampleCountByToolId));
   const viewers = tools.filter((tool) => classifyToolGroup(tool.id) === "viewers").map((tool) => renderToolCard(tool, sampleCountByToolId));
 
+  workflowGrid.innerHTML = workflow.join("\n");
   editorsGrid.innerHTML = editors.join("\n");
   utilitiesGrid.innerHTML = utilities.join("\n");
   viewersGrid.innerHTML = viewers.join("\n");

tools/workspace-manager-v2/index.html

@@ -59,6 +59,16 @@ <h2 class="tools-platform-frame__eyebrow">Games-only launch context</h2>
       </aside>
 
       <section class="workspace-manager-v2__panel workspace-manager-v2__panel--center" aria-label="Workspace context">
+        <section class="accordion-v2 workspace-manager-v2__accordion workspace-manager-v2__accordion--tools is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="workspaceToolsContent">
+            <span>Tools</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="workspaceToolsContent" class="accordion-v2__content">
+            <div id="workspaceToolTiles" class="workspace-manager-v2__tool-grid" aria-label="Workspace launchable tools"></div>
+          </div>
+        </section>
+
         <section class="accordion-v2 workspace-manager-v2__accordion workspace-manager-v2__accordion--fill is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="workspaceContextContent">
             <span>Workspace Context</span>
@@ -79,10 +89,6 @@ <h2>Launch Context</h2>
                 <p id="launchContextSummary">Asset Manager V2 launch is waiting for a game and palette.</p>
               </section>
             </div>
-            <section class="workspace-manager-v2__tool-launcher" aria-label="Workspace launchable tools">
-              <h2>Tools</h2>
-              <div id="workspaceToolTiles" class="workspace-manager-v2__tool-grid"></div>
-            </section>
             <pre id="workspaceContextOutput" class="workspace-manager-v2__output">{}</pre>
           </div>
         </section>

tools/workspace-manager-v2/styles/workspaceManagerV2.css

@@ -271,14 +271,19 @@ textarea:hover {
 .workspace-manager-v2__summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: minmax(118px, auto);
   gap: 12px;
 }
 
 .workspace-manager-v2__summary-card {
   min-width: 0;
+  height: 118px;
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--workspace-manager-v2-line);
   border-radius: 8px;
   background: var(--workspace-manager-v2-surface);
+  overflow: auto;
   padding: 12px;
 }
 
@@ -297,17 +302,6 @@ textarea:hover {
   line-height: 1.45;
 }
 
-.workspace-manager-v2__tool-launcher {
-  display: grid;
-  gap: 10px;
-}
-
-.workspace-manager-v2__tool-launcher h2 {
-  margin: 0;
-  color: var(--workspace-manager-v2-muted);
-  font-size: 0.95rem;
-}
-
 .workspace-manager-v2__tool-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 180px));