Polish Project Workspace banner layout and active project state - PR_26155_050-052-project-workspace-polish

Author: ToolboxAid

docs_build/dev/reports/admin-project-data-alignment.md

@@ -0,0 +1,20 @@
+# Admin Project Data Alignment
+
+Stack item: PR_26155_050-admin-project-data-alignment
+
+## Summary
+- Updated `toolbox/index.html` so the role simulation banner reuses the existing Theme V2 `section-head` row pattern.
+- Kept the admin banner text on the left and the `Project Data ▾` menu on the right side of the same banner row.
+- Project Data controls remain admin-only through the existing role simulation behavior.
+
+## Validation Notes
+- Impacted lane: `project-workspace`.
+- PASS: `npm run test:lane:project-workspace`.
+- PASS: `git diff --check`.
+- Skipped lanes: `tool-runtime`, `workspace-contract`, `game-runtime`, `integration`, `engine-src`, `samples`, and full samples smoke.
+- Skipped-lane rationale: this PR only changes the Project Workspace/Toolbox banner and Project Workspace page layout behavior; it does not change engine runtime, games, samples, cross-tool launch behavior, or shared Theme V2 CSS.
+
+## Manual Test Notes
+- Verified in targeted Playwright that `?role=admin` shows the admin banner and Project Data menu on the same row.
+- Verified Project Data remains hidden for `?role=guest` and `?role=user`.
+- Verified no new CSS was added; existing Theme V2 classes support the row alignment.

docs_build/dev/reports/project-workspace-open-project-state.md

@@ -0,0 +1,20 @@
+# Project Workspace Open Project State
+
+Stack item: PR_26155_052-project-workspace-open-project-state
+
+## Summary
+- Removed the separate `Open` status label that appeared beside the active project row.
+- Highlighted the currently open project button with the existing Theme V2 `btn primary` classes.
+- Added `aria-current="true"` and `data-project-active="true"` to the active project button.
+- Updated button text to include `(Active)` for the currently open project.
+
+## Validation Notes
+- Impacted lane: `project-workspace`.
+- PASS: `npm run test:lane:project-workspace`.
+- PASS: `git diff --check`.
+- No DB, auth, cloud, persistence, or new CSS behavior was added.
+
+## Manual Test Notes
+- Verified `Open Demo Project` no longer has a separate `Open` label.
+- Verified the active/open project is indicated directly on the button.
+- Verified create, open, and delete project behavior still works.

docs_build/dev/reports/project-workspace-panel-layout-polish.md

@@ -0,0 +1,23 @@
+# Project Workspace Panel Layout Polish
+
+Stack item: PR_26155_051-project-workspace-panel-layout-polish
+
+## Summary
+- Moved `Readiness Output`, `Repository Tables`, and `Project Members` out of the right Inspector column.
+- Placed those three output accordions in the center panel between `Static Overlay Wireframe` and `Missing Requirements`.
+- Kept the left panel for setup/input, the center panel for primary project work and outputs, and the right panel for inspector status/logging.
+
+## Validation Notes
+- Impacted lane: `project-workspace`.
+- PASS: `npm run test:lane:project-workspace`.
+- PASS: `node --check toolbox/project-workspace/project-workspace.js`.
+- PASS: `node --check tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs`.
+- PASS: `git diff --check`.
+
+## Manual Test Notes
+- Verified the center panel order is:
+  - `Static Overlay Wireframe`
+  - `Readiness Output`, `Repository Tables`, `Project Members`
+  - `Missing Requirements`
+- Verified the right column no longer contains the moved output accordions.
+- Verified no console errors in the targeted Project Workspace lane.

tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs

@@ -54,11 +54,16 @@ test("Project Workspace creates, opens, and deletes mock projects", async ({ pag
     await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
     await expect(page.locator("[data-active-project-name]")).toHaveText("Demo Project");
     await expect(page.locator("[data-project-list]")).toContainText("Demo Project");
+    const demoProjectRow = page.locator("[data-project-row='demo-project']");
+    await expect(demoProjectRow.locator("> .status")).toHaveCount(0);
+    await expect(demoProjectRow.getByRole("button", { name: "Open Demo Project (Active)" })).toHaveClass(/primary/);
+    await expect(demoProjectRow.getByRole("button", { name: "Open Demo Project (Active)" })).toHaveAttribute("aria-current", "true");
 
     await page.getByLabel("Project Name").fill("Launch Test Project");
     await page.getByRole("button", { name: "Create Project" }).click();
     await expect(page.locator("[data-active-project-name]")).toHaveText("Launch Test Project");
     await expect(page.locator("[data-project-list]")).toContainText("Launch Test Project");
+    await expect(page.locator("[data-project-row='launch-test-project-1']").getByRole("button", { name: "Open Launch Test Project (Active)" })).toHaveClass(/primary/);
     await expect(page.locator("[data-project-workspace-log]")).toHaveText("Created and opened Launch Test Project.");
 
     await page.getByLabel("Project Name").fill("Archive Project");
@@ -67,6 +72,7 @@ test("Project Workspace creates, opens, and deletes mock projects", async ({ pag
 
     await page.getByRole("button", { name: "Open Launch Test Project" }).click();
     await expect(page.locator("[data-active-project-name]")).toHaveText("Launch Test Project");
+    await expect(page.locator("[data-project-row='launch-test-project-1']").getByRole("button", { name: "Open Launch Test Project (Active)" })).toHaveAttribute("data-project-active", "true");
     await expect(page.locator("[data-project-workspace-log]")).toHaveText("Opened Launch Test Project.");
 
     await page.getByRole("button", { name: "Delete Open Project" }).click();
@@ -90,6 +96,27 @@ test("Project Workspace progress panels update from mock project state", async (
     await expect(page.locator("[data-current-focus]")).toHaveText("Complete Game Configuration");
     await expect(page.locator("[data-recommended-next-tool]").first()).toHaveText("Game Configuration");
     await expect(page.locator("[data-project-progress-checklist]")).toContainText("Project identity: Complete");
+    await expect(page.locator("[data-project-output-panels] summary")).toHaveText([
+      "Readiness Output",
+      "Repository Tables",
+      "Project Members"
+    ]);
+    await expect(page.locator("aside.tool-column").last().getByText("Readiness Output")).toHaveCount(0);
+    await expect(page.locator("aside.tool-column").last().getByText("Repository Tables")).toHaveCount(0);
+    await expect(page.locator("aside.tool-column").last().getByText("Project Members")).toHaveCount(0);
+    const panelOrderIsCorrect = await page.locator(".tool-center-panel").evaluate((panel) => {
+      const staticOverlay = panel.querySelector("[data-static-overlay-wireframe]");
+      const outputPanels = panel.querySelector("[data-project-output-panels]");
+      const missingRequirements = panel.querySelector("[data-missing-requirements]");
+      return Boolean(
+        staticOverlay &&
+        outputPanels &&
+        missingRequirements &&
+        (staticOverlay.compareDocumentPosition(outputPanels) & Node.DOCUMENT_POSITION_FOLLOWING) &&
+        (outputPanels.compareDocumentPosition(missingRequirements) & Node.DOCUMENT_POSITION_FOLLOWING)
+      );
+    });
+    expect(panelOrderIsCorrect).toBe(true);
 
     await page.getByLabel("Project Name").fill("Progress Review Project");
     await page.getByRole("button", { name: "Create Project" }).click();
@@ -125,6 +152,13 @@ test("Toolbox Project Data controls are admin-only and drive mock Progress and B
     await page.goto(`${failures.server.baseUrl}/toolbox/index.html?role=admin`, { waitUntil: "networkidle" });
     await expect(page.locator("[data-toolbox-role-banner]")).toHaveText(/ADMIN VIEW.*Planned tools visible.*Switch to Creator View/);
     await expect(page.locator("[data-project-data-menu]")).toBeVisible();
+    await expect(page.locator("[aria-label='Toolbox role simulation']")).toHaveClass(/section-head/);
+    const roleBannerBox = await page.locator("[data-toolbox-role-banner]").boundingBox();
+    const projectDataBox = await page.locator("[data-project-data-menu] > summary").boundingBox();
+    expect(roleBannerBox).not.toBeNull();
+    expect(projectDataBox).not.toBeNull();
+    expect(Math.abs((roleBannerBox.y + roleBannerBox.height / 2) - (projectDataBox.y + projectDataBox.height / 2))).toBeLessThan(16);
+    expect(projectDataBox.x).toBeGreaterThan(roleBannerBox.x + roleBannerBox.width);
     await page.locator("[data-project-data-menu] summary").click();
 
     await page.getByRole("button", { name: "Clear Test Data" }).click();

toolbox/index.html

@@ -12,7 +12,7 @@
 
 <body>
     <div data-partial="header-nav"></div>
-    <div class="container callout" aria-label="Toolbox role simulation">
+    <div class="container callout section-head" aria-label="Toolbox role simulation">
         <a class="status" href="toolbox/index.html?role=user" data-toolbox-role-banner>GUEST VIEW • Preview only • Sign in to create</a>
         <details class="status" data-project-data-menu hidden>
             <summary>Project Data ▾</summary>

toolbox/project-workspace/index.html

@@ -74,10 +74,10 @@ <h3 data-active-project-name>Demo Project</h3>
                                 </div>
                             </div>
                         </article>
-                        <article class="card">
+                        <article class="card" data-static-overlay-wireframe>
                             <div class="card-body content-stack">
                                 <div>
-                                    <div class="kicker">Progress Panels</div>
+                                    <div class="kicker">Static Overlay Wireframe</div>
                                     <h3>Project Progress</h3>
                                 </div>
                                 <div class="grid cols-3">
@@ -93,12 +93,25 @@ <h3>Project Progress</h3>
                                 <div class="status" role="status" data-project-workspace-log>Mock repository seeded with Demo Project.</div>
                             </div>
                         </article>
-                    </section>
-                    <aside class="tool-column tool-group-development-system">
-                        <div class="tool-column-header forge-gold">
-                            <h2>Inspector</h2>
-                        </div>
-                        <div class="accordion-stack">
+                        <div class="accordion-stack" data-project-output-panels>
+                            <details class="vertical-accordion" open>
+                                <summary>Readiness Output</summary>
+                                <div class="accordion-body">
+                                    <div class="table-wrapper">
+                                        <table class="data-table">
+                                            <caption>Mock readiness output</caption>
+                                            <thead>
+                                                <tr><th scope="col">Path</th><th scope="col">Status</th><th scope="col">Next Tool</th></tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr><td>Plan</td><td>Under Construction</td><td>Game Configuration</td></tr>
+                                                <tr><td>Configure</td><td>Planned</td><td>Build Game</td></tr>
+                                                <tr><td>Release</td><td>Planned</td><td>Publish</td></tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </details>
                             <details class="vertical-accordion" open>
                                 <summary>Repository Tables</summary>
                                 <div class="accordion-body">
@@ -134,6 +147,35 @@ <h2>Inspector</h2>
                                 </div>
                             </details>
                         </div>
+                        <article class="card" role="dialog" aria-labelledby="project-workspace-missing-requirements-title" data-missing-requirements>
+                            <div class="card-body content-stack">
+                                <div>
+                                    <div class="kicker">Mock Requirements</div>
+                                    <h3 id="project-workspace-missing-requirements-title">Missing Requirements</h3>
+                                </div>
+                                <p>This card remains a static review surface for the next required tools. It does not block, save, or validate runtime state.</p>
+                                <div class="grid cols-3">
+                                    <article class="callout"><h3>Game Design</h3><p><span class="pill">Under Construction</span> Define win and lose conditions.</p></article>
+                                    <article class="callout"><h3>Game Configuration</h3><p><span class="pill">Planned</span> Choose release profile and debug policy.</p></article>
+                                    <article class="callout"><h3>Publish</h3><p><span class="pill">Planned</span> Prepare share metadata later.</p></article>
+                                </div>
+                                <div class="status" role="status">Mock-only: Project Workspace does not run real publish gating yet.</div>
+                            </div>
+                        </article>
+                    </section>
+                    <aside class="tool-column tool-group-development-system">
+                        <div class="tool-column-header forge-gold">
+                            <h2>Inspector</h2>
+                        </div>
+                        <div class="accordion-stack">
+                            <details class="vertical-accordion" open>
+                                <summary>Status Log</summary>
+                                <div class="accordion-body">
+                                    <p>Project Workspace operations report status in the center panel while the right column stays reserved for inspector status and diagnostics.</p>
+                                    <div class="status" role="status">Mock repository ready.</div>
+                                </div>
+                            </details>
+                        </div>
                     </aside>
                 </div>
             </div>

toolbox/project-workspace/project-workspace.js

@@ -41,12 +41,16 @@ function setStatusLog(message) {
   setText(elements.statusLog, message);
 }
 
-function createProjectButton(project) {
+function createProjectButton(project, isActive) {
   const button = document.createElement("button");
-  button.className = "btn";
+  button.className = isActive ? "btn primary" : "btn";
   button.type = "button";
   button.dataset.projectOpen = project.id;
-  button.textContent = `Open ${project.name}`;
+  if (isActive) {
+    button.dataset.projectActive = "true";
+    button.setAttribute("aria-current", "true");
+  }
+  button.textContent = isActive ? `Open ${project.name} (Active)` : `Open ${project.name}`;
   return button;
 }
 
@@ -80,16 +84,10 @@ function renderProjectList() {
     meta.className = "eyebrow";
     meta.textContent = `${project.status} | ${project.ownerDisplayName}`;
 
-    const action = createProjectButton(project);
+    const isActive = activeProject?.id === project.id;
+    const action = createProjectButton(project, isActive);
 
-    if (activeProject?.id === project.id) {
-      const active = document.createElement("span");
-      active.className = "status";
-      active.textContent = "Open";
-      row.append(title, meta, active, action);
-    } else {
-      row.append(title, meta, action);
-    }
+    row.append(title, meta, action);
 
     elements.projectList.append(row);
   });