Clean Game Design context layout and hide JSON output - PR_26155_077-079-game-design-layout-cleanup

Author: ToolboxAid

assets/theme-v2/images/tools/project-workspace.png

@@ -6,11 +6,9 @@ Missing changed runtime JS files are WARN, not FAIL.
 Source: Playwright/Chromium built-in V8 coverage from the active Playwright run.
 
 Changed runtime JS files considered:
-(0%) toolbox/project-workspace/project-workspace.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(79%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 384/384; executed functions 26/33
 (89%) toolbox/tools-page-accordions.js - executed lines 1690/1690; executed functions 51/57
-(95%) toolbox/game-design/game-design-mock-repository.js - executed lines 310/310; executed functions 36/38
-(96%) toolbox/game-design/game-design.js - executed lines 255/255; executed functions 23/24
+(92%) toolbox/game-design/game-design-mock-repository.js - executed lines 310/310; executed functions 34/37
+(100%) toolbox/game-design/game-design.js - executed lines 224/224; executed functions 21/21
 
 Guardrail warnings:
-(0%) toolbox/project-workspace/project-workspace.js - WARNING: changed runtime JS file missing from coverage; advisory only
+(100%) none - no changed runtime JS coverage warnings

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -0,0 +1,47 @@
+# Game Design Center Fields Layout
+
+PR: PR_26155_078-game-design-center-fields-layout
+
+Status: PASS
+
+## Changes
+
+Design Fields moved from the left column into the center workspace column.
+
+Left column now focuses on:
+- Project Context
+- Purpose Flow
+- Actions
+
+Center column now owns the editable Game Design form:
+- Game Type
+- Genre
+- Play Style
+- Design Summary
+- Capability Demo Notes
+- Save Game Design
+
+Right column remains focused on:
+- Output
+- Validation
+- Repository Tables
+- Toolbox Progress Handoff
+- Status Log
+
+No page-local CSS, tool-local CSS, inline styles, or style blocks were added.
+
+## Validation Notes
+
+Impacted lane: `game-design`.
+
+Targeted Playwright verified:
+- Design Fields render inside `.tool-center-panel`.
+- Design Fields no longer render in either `aside`.
+- save/update behavior still works.
+- no console errors.
+
+Manual test:
+- Open `toolbox/game-design/index.html`.
+- Confirm the editable fields are in the center column under Project Design.
+- Confirm the left column is setup/context/actions only.
+- Confirm the right column contains status, validation, output, and handoff guidance.

docs_build/dev/reports/game-design-center-fields-layout.md

@@ -0,0 +1,46 @@
+# Game Design Output No JSON
+
+PR: PR_26155_079-game-design-output-no-json
+
+Status: PASS
+
+## Changes
+
+Game Design Output no longer renders raw JSON.
+
+The right-column Output section now shows user-facing summary text:
+- Design Summary
+- Validation Status
+- Next Step
+- Missing Requirements
+- Capability Demo
+
+Raw/internal payload visibility is deferred to future Debug, Saved Data, or Admin surfaces if needed.
+
+## Validation Notes
+
+Impacted lane: `game-design`.
+
+Targeted Playwright verified:
+- output contains no raw `{` JSON object display.
+- output contains no quoted internal payload fields such as `"gameType"`.
+- readable summary sections remain visible.
+- save/update/validation still work.
+- no console errors.
+
+Additional checks:
+- `node --check toolbox/game-design/game-design.js`
+- `node --check tests/playwright/tools/GameDesignMockRepository.spec.mjs`
+- `git diff --check`
+- searched for inline script/style/event handlers and persistence hooks.
+- no `assets/theme-v2/css` files changed.
+
+Skipped lanes:
+- `npm run test:workspace-v2` was skipped because shared launch/contract wiring did not change. The command name is legacy; user-facing language is Project Workspace.
+- full samples smoke was skipped because samples are out of scope.
+
+Manual test:
+- Open `toolbox/game-design/index.html`.
+- Save a complete Game Design.
+- Confirm Output shows readable Design Summary, Validation Status, Next Step, Missing Requirements, and Capability Demo text.
+- Confirm no raw JSON is visible in normal output.

docs_build/dev/reports/game-design-output-no-json.md

@@ -0,0 +1,42 @@
+# Game Design Project Context Cleanup
+
+PR: PR_26155_077-game-design-project-context-cleanup
+
+Status: PASS
+
+## Changes
+
+Game Design now renders Project Context once in the left setup column as text only.
+
+Current display pattern:
+
+`Demo Project - Game Project`
+
+Removed duplicate split displays:
+- Active Project
+- Project Purpose
+- Project Status
+- Project Context selector
+
+The Project Context value is not rendered as a duplicate card/header and does not contain controls.
+
+## Validation Notes
+
+Impacted lane: `game-design`.
+
+Targeted Playwright verified:
+- Project Context appears once on the default Game Design page.
+- Project Context is text-only.
+- old duplicate context hooks are absent.
+- missing project context still shows an actionable validation overlay.
+- no console errors.
+
+Skipped lanes:
+- `project-workspace`: not run separately because Game Design lane directly exercises active Project Workspace context dependency.
+- `workspace-contract`: skipped because shared launch/header/template wiring did not change.
+- full samples smoke: skipped because samples are out of scope.
+
+Manual test:
+- Open `toolbox/game-design/index.html`.
+- Confirm the left Project Context section shows `Demo Project - Game Project` once.
+- Confirm there is no duplicate Project Context card/header or Project Context dropdown.

docs_build/dev/reports/game-design-project-context-cleanup.md

@@ -1,6 +1,6 @@
 # Playwright Structure Audit
 
-Generated: 2026-06-04T23:06:53.944Z
+Generated: 2026-06-04T23:26:02.777Z
 Status: PASS
 
 ## Lane Directories

docs_build/dev/reports/playwright_structure_audit.md

@@ -17,29 +17,24 @@ Exercised tool entry points detected:
 (71%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(0%) toolbox/project-workspace/project-workspace.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(79%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 384/384; executed functions 26/33
 (89%) toolbox/tools-page-accordions.js - executed lines 1690/1690; executed functions 51/57
-(95%) toolbox/game-design/game-design-mock-repository.js - executed lines 310/310; executed functions 36/38
-(96%) toolbox/game-design/game-design.js - executed lines 255/255; executed functions 23/24
+(92%) toolbox/game-design/game-design-mock-repository.js - executed lines 310/310; executed functions 34/37
+(100%) toolbox/game-design/game-design.js - executed lines 224/224; executed functions 21/21
 
 Files with executed line/function counts where available:
 (55%) assets/theme-v2/js/tool-display-mode.js - executed lines 113/113; executed functions 6/11
 (79%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 384/384; executed functions 26/33
 (80%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 204/204; executed functions 16/20
 (89%) toolbox/tools-page-accordions.js - executed lines 1690/1690; executed functions 51/57
-(95%) toolbox/game-design/game-design-mock-repository.js - executed lines 310/310; executed functions 36/38
-(96%) toolbox/game-design/game-design.js - executed lines 255/255; executed functions 23/24
+(92%) toolbox/game-design/game-design-mock-repository.js - executed lines 310/310; executed functions 34/37
+(100%) toolbox/game-design/game-design.js - executed lines 224/224; executed functions 21/21
 
 Uncovered or low-coverage changed JS files:
-(0%) toolbox/project-workspace/project-workspace.js - WARNING: uncovered changed runtime JS file; advisory only
+(100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
 (0%) scripts/run-targeted-test-lanes.mjs - changed JS file not collected as browser runtime coverage
 (0%) tests/playwright/tools/GameDesignMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) toolbox/project-workspace/project-workspace.js - changed JS file not collected as browser runtime coverage
-(79%) toolbox/project-workspace/project-workspace-mock-repository.js - changed JS file with browser V8 coverage
 (89%) toolbox/tools-page-accordions.js - changed JS file with browser V8 coverage
-(95%) toolbox/game-design/game-design-mock-repository.js - changed JS file with browser V8 coverage
-(96%) toolbox/game-design/game-design.js - changed JS file with browser V8 coverage
+(92%) toolbox/game-design/game-design-mock-repository.js - changed JS file with browser V8 coverage
+(100%) toolbox/game-design/game-design.js - changed JS file with browser V8 coverage

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -61,11 +61,14 @@ test("Game Design shows an actionable overlay when project context is missing",
     await expect(page.locator("[data-game-design-project-overlay]")).toBeVisible();
     await expect(page.locator("[data-game-design-validation-overlay]")).toBeVisible();
     await expect(page.locator("[data-game-design-validation-list]")).toContainText("Project Context");
-    await expect(page.locator("[data-game-design-active-project]")).toHaveText("No Project Workspace project");
+    await expect(page.locator("[data-game-design-project-context]")).toHaveText("No Project Workspace project");
+    await expect(page.locator("[data-game-design-output]")).not.toContainText("{");
+    await expect(page.locator("[data-game-design-output]")).not.toContainText('"activeProjectId"');
 
     await page.getByRole("button", { name: "Save Game Design" }).click();
     await expect(page.locator("[data-game-design-log]")).toHaveText("Open or seed a project before saving Game Design.");
-    await expect(page.locator("[data-game-design-output]")).toContainText('"activeProjectId": null');
+    await expect(page.locator("[data-game-design-output-validation]")).toHaveText("Blocked");
+    await expect(page.locator("[data-game-design-output-missing]")).toHaveText("Project Context");
 
     await expectNoPageFailures(failures);
   } finally {
@@ -78,8 +81,18 @@ test("Game Design saves and updates design fields against the active project", a
   const failures = await openRepoPage(page, "/toolbox/game-design/index.html");
 
   try {
-    await expect(page.locator("[data-game-design-active-project]")).toHaveText("Demo Project");
-    await expect(page.locator("[data-game-design-project-purpose]")).toHaveText("Game Project");
+    await expect(page.locator("[data-game-design-project-context]")).toHaveText("Demo Project - Game Project");
+    await expect(page.getByText("Project Context", { exact: true })).toHaveCount(1);
+    await expect(page.locator("[data-game-design-project-context] select, [data-game-design-project-context] input, [data-game-design-project-context] button, [data-game-design-project-context] a")).toHaveCount(0);
+    await expect(page.locator("[data-game-design-active-project], [data-game-design-project-purpose], [data-game-design-project-status], [data-game-design-project-select]")).toHaveCount(0);
+    await expect(page.locator(".tool-center-panel [data-game-design-form]")).toBeVisible();
+    await expect(page.locator("aside [data-game-design-form]")).toHaveCount(0);
+    await expect(page.locator("[data-game-design-output] pre, [data-game-design-output] code")).toHaveCount(0);
+    await expect(page.locator("[data-game-design-output]")).toContainText("Design Summary");
+    await expect(page.locator("[data-game-design-output]")).toContainText("Validation Status");
+    await expect(page.locator("[data-game-design-output]")).toContainText("Next Step");
+    await expect(page.locator("[data-game-design-output]")).not.toContainText("{");
+    await expect(page.locator("[data-game-design-output]")).not.toContainText('"gameType"');
     await expect(page.locator("[data-game-design-validation-overlay]")).toBeVisible();
     await expect(page.locator("[data-game-design-validation-list]")).toContainText("Game Type");
     await expect(page.locator("[data-game-design-validation-list]")).toContainText("Genre");
@@ -96,12 +109,14 @@ test("Game Design saves and updates design fields against the active project", a
     await expect(page.locator("[data-game-design-validation-overlay]")).toBeHidden();
     await expect(page.locator("[data-game-design-status]")).toHaveText("Ready");
     await expect(page.locator("[data-game-design-recommended-tool]").first()).toHaveText("Game Configuration");
-    await expect(page.locator("[data-game-design-output]")).toContainText('"gameType": "Puzzle"');
-    await expect(page.locator("[data-game-design-output]")).toContainText('"genre": "Adventure"');
+    await expect(page.locator("[data-game-design-output-summary]")).toHaveText("A compact puzzle adventure with one clear project promise.");
+    await expect(page.locator("[data-game-design-output-validation]")).toHaveText("Ready");
+    await expect(page.locator("[data-game-design-output-next-step]")).toHaveText("Game Configuration");
+    await expect(page.locator("[data-game-design-output-missing]")).toHaveText("None");
 
     await page.getByLabel("Genre").selectOption("Fantasy");
     await page.getByRole("button", { name: "Save Game Design" }).click();
-    await expect(page.locator("[data-game-design-output]")).toContainText('"genre": "Fantasy"');
+    await expect(page.locator("[data-game-design-output]")).not.toContainText('"genre"');
     await expect(page.locator("[data-game-design-log]")).toHaveText("Saved Demo Project Game Design as ready.");
 
     await expectNoPageFailures(failures);
@@ -115,8 +130,7 @@ test("Game Design authors capability demos as Project Workspace projects", async
   const failures = await openRepoPage(page, "/toolbox/game-design/index.html?project=gravity-demo");
 
   try {
-    await expect(page.locator("[data-game-design-active-project]")).toHaveText("Gravity Demo");
-    await expect(page.locator("[data-game-design-project-purpose]")).toHaveText("Capability Demo");
+    await expect(page.locator("[data-game-design-project-context]")).toHaveText("Gravity Demo - Capability Demo");
     await expect(page.getByText("Capability demos remain Project Workspace projects.")).toBeVisible();
     await expect(page.locator("[data-game-design-capability-demos]")).toContainText("Gravity Demo: Project Workspace project");
     await expect(page.getByLabel("Game Type")).toHaveValue("Capability Demo");
@@ -126,9 +140,9 @@ test("Game Design authors capability demos as Project Workspace projects", async
 
     await page.getByLabel("Capability Demo Notes").fill("Gravity demo remains project-owned authoring data.");
     await page.getByRole("button", { name: "Save Game Design" }).click();
-    await expect(page.locator("[data-game-design-output]")).toContainText('"activeProjectId": "gravity-demo"');
-    await expect(page.locator("[data-game-design-output]")).toContainText('"projectPurpose": "Capability Demo"');
-    await expect(page.locator("[data-game-design-output]")).toContainText('"capabilityDemoAuthoring": true');
+    await expect(page.locator("[data-game-design-output]")).not.toContainText("{");
+    await expect(page.locator("[data-game-design-output]")).not.toContainText('"capabilityDemoAuthoring"');
+    await expect(page.locator("[data-game-design-output-capability]")).toHaveText("Gravity Demo remains a Project Workspace project.");
     await expect(page.locator("[data-game-design-table-counts]")).toContainText("game_design_capability_demos");
 
     await expectNoPageFailures(failures);