Remove tool center placeholder images and clean up badge display - PR_26156_123-tool-center-image-and-badge-cleanup

Author: ToolboxAid

assets/theme-v2/css/panels.css

@@ -284,11 +284,11 @@
 .tool-display-mode__badge {
   width: 64px;
   height: 64px;
-  object-fit: cover;
+  object-fit: contain;
   object-position: center;
-  border: var(--border-standard);
-  border-radius: var(--radius-pill);
-  background: var(--panel-soft)
+  border: 0;
+  border-radius: var(--space-0);
+  background: transparent
 }
 
 .tool-display-mode__body {
@@ -351,6 +351,11 @@ body.tool-focus-mode .tool-display-mode__fullscreen-name {
   display: inline
 }
 
+body.tool-focus-mode .tool-display-mode__badge {
+  width: 32px;
+  height: 32px
+}
+
 .side-menu a {
   display: block;
   padding: var(--space-11) var(--space-12);

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,16 +1,16 @@
 # Testing Lane Execution Report
 
-Generated: 2026-06-05T13:20:23.710Z
+Generated: 2026-06-05T13:34:55.467Z
 Dry run: No
 
 ## Summary
 
-PASS: 1
+PASS: 2
 WARN: 0
 FAIL: 0
-SKIP: 13
-Total lane elapsed time: 18.48s
-Actual browser launches: 1
+SKIP: 12
+Total lane elapsed time: 96.49s
+Actual browser launches: 2
 
 ## Full Samples Smoke
 
@@ -21,7 +21,7 @@ Reason: Skipped because changed files do not modify sample JSON or shared sample
 
 Status: PASS
 Reason: Runner preflight and Playwright structure audit passed before expensive lane execution.
-Command: C:\nvm4w\nodejs\node.exe scripts/audit-playwright-test-locations.mjs --discovery-report docs_build/dev/reports/playwright_discovery_ownership_report.md --scope-report docs_build/dev/reports/playwright_discovery_scope_report.md --scan-report docs_build/dev/reports/filesystem_scan_reduction_report.md --lanes tool-display-mode --targets tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs --helpers tests/helpers/playwrightRepoServer.mjs,tests/helpers/playwrightStorageIsolation.mjs,tests/helpers/playwrightV8CoverageReporter.mjs,tests/helpers/workspaceV2CoverageReporter.mjs
+Command: C:\nvm4w\nodejs\node.exe scripts/audit-playwright-test-locations.mjs --discovery-report docs_build/dev/reports/playwright_discovery_ownership_report.md --scope-report docs_build/dev/reports/playwright_discovery_scope_report.md --scan-report docs_build/dev/reports/filesystem_scan_reduction_report.md --lanes tool-runtime,tool-display-mode --targets tests/playwright/tools/RootToolsFutureState.spec.mjs,tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs --helpers tests/helpers/playwrightRepoServer.mjs,tests/helpers/playwrightStorageIsolation.mjs,tests/helpers/playwrightV8CoverageReporter.mjs,tests/helpers/workspaceV2CoverageReporter.mjs
 Details: none
 
 ## Dependency Gate
@@ -32,15 +32,15 @@ Reason: No deterministic dependency failures before runtime.
 ## Runtime Scheduling
 
 Status: PASS
-Scheduled lane order: tool-display-mode
-Reused runtime sessions: 0
-Reused lane snapshots: 0
-Reused warm-start lanes: 0
-Reused dependency hydration: 0
-Prevented graph rebuilds: 0
-Prevented redundant initialization: 0
+Scheduled lane order: tool-display-mode, tool-runtime
+Reused runtime sessions: 1
+Reused lane snapshots: 2
+Reused warm-start lanes: 2
+Reused dependency hydration: 2
+Prevented graph rebuilds: 2
+Prevented redundant initialization: 2
 Prevented redundant browser launches: 0
-Prevented redundant lane execution: 13
+Prevented redundant lane execution: 12
 
 ## Validation Cache
 
@@ -61,39 +61,39 @@ Prevented broad lane escalation: 0
 ## Discovery Scope
 
 Status: PASS
-Target files: tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs
+Target files: tests/playwright/tools/RootToolsFutureState.spec.mjs, tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs
 Required shared helpers: tests/helpers/playwrightRepoServer.mjs, tests/helpers/playwrightStorageIsolation.mjs, tests/helpers/playwrightV8CoverageReporter.mjs, tests/helpers/workspaceV2CoverageReporter.mjs
 Required fixtures: none
-Targeted file/helper reads: 5
+Targeted file/helper reads: 0
 Cached discovery reuse: Yes
 Prevented fallback expansion: Yes; no ownership or scope blocker widened into broad discovery.
 
 ## Targeted File Manifests
 
 Status: PASS
-Generated manifests: tool-display-mode:PASS
+Generated manifests: tool-runtime:PASS, tool-display-mode:PASS
 Prevented discovery expansion: Yes
-Prevented redundant scans: 4
-Persistent manifest events: tool-display-mode:INVALIDATED
+Prevented redundant scans: 0
+Persistent manifest events: tool-runtime:REUSED, tool-display-mode:REUSED
 
 ## Warm-Start Reuse
 
 Status: PASS
-Warm-start events: tool-display-mode:INVALIDATED
-Dependency hydration events: tool-display-mode:INVALIDATED
-Prevented redundant initialization: 0
-Prevented helper resolution passes: 0
+Warm-start events: tool-runtime:REUSED, tool-display-mode:REUSED
+Dependency hydration events: tool-runtime:REUSED, tool-display-mode:REUSED
+Prevented redundant initialization: 2
+Prevented helper resolution passes: 8
 Prevented fixture ownership traversal: 0
 
 ## Lane Snapshots
 
 Status: PASS
-Snapshot events: tool-display-mode:INVALIDATED
-Reused snapshots: 0
-Invalidated snapshots: 1
-Prevented graph rebuilds: 0
-Prevented redundant dependency traversal: 0
-Prevented fixture/helper graph assembly: 0
+Snapshot events: tool-runtime:REUSED, tool-display-mode:REUSED
+Reused snapshots: 2
+Invalidated snapshots: 0
+Prevented graph rebuilds: 2
+Prevented redundant dependency traversal: 2
+Prevented fixture/helper graph assembly: 8
 
 ## Lane Deduplication
 
@@ -112,9 +112,9 @@ Prevented Workspace lane reruns: 0
 | build-path | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Toolbox Build Path simplification, workflow status table, and Admin Tools Progress navigation | repo-served Toolbox page; repo-served Admin Tools Progress page; Project Workspace mock project context; Toolbox role simulation |
 | tools-progress | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Admin Tools Progress hydration, Toolbox Group view color model, and Project Build Path separation | repo-served Admin Tools Progress page; repo-served Toolbox Group view; Toolbox registry build sequence; Project Build Path workflow table |
 | tool-navigation | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Admin Tools Progress tool route links, Tool Display Mode build-order previous/next controls, and Toolbox group fallback routing | repo-served Admin Tools Progress page; repo-served Project Workspace, Game Design, and Game Configuration tool pages; repo-served Toolbox Group view with URL-selected accordion; Toolbox registry build sequence and route metadata |
-| tool-display-mode | PASS | 18.48s | 1 | Tool Display Mode validates the two-row identity/navigation layout, anchors for previous/next targets, disabled text for missing targets, registry build-order labels, role preservation, and multi-path fallback without exercising unrelated toolbox routes. | Tool Display Mode identity row, registry-owned previous/next links, disabled text fallback, and multi-path group routing | repo-served Project Workspace, Game Design, Game Configuration, and AI Assistant tool pages; repo-served Toolbox Group view with URL-selected accordion; Toolbox registry build sequence and route metadata; shared Theme V2 Tool Display Mode script |
+| tool-display-mode | PASS | 17.55s | 1 | Tool Display Mode validates the two-row identity/navigation layout, anchors for previous/next targets, disabled text for missing targets, registry build-order labels, role preservation, and multi-path fallback without exercising unrelated toolbox routes. | Tool Display Mode identity row, registry-owned previous/next links, disabled text fallback, and multi-path group routing | repo-served Project Workspace, Game Design, Game Configuration, and AI Assistant tool pages; repo-served Toolbox Group view with URL-selected accordion; Toolbox registry build sequence and route metadata; shared Theme V2 Tool Display Mode script |
 | tool-images | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Toolbox registry image contract, Toolbox card image rendering, and Tool Display Mode image fallback | Toolbox registry badge/tool image contract; repo-served Toolbox page; repo-served representative Toolbox tool pages; shared registry image fallback |
-| tool-runtime | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Active public toolbox and Tool Template V2 contract | repo-served root toolbox page; Tool Template V2 public page; Theme V2 shared partials and assets |
+| tool-runtime | PASS | 78.94s | 1 | Tool runtime lane now validates the active public toolbox/template surface and excludes removed V2 tool routes. | Active public toolbox and Tool Template V2 contract | repo-served root toolbox page; Tool Template V2 public page; Theme V2 shared partials and assets |
 | game-runtime | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Deprecated archive/v1-v2/games reference coverage |  |
 | integration | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Integration handoff behavior | No active integration Playwright specs after removal of stale V2 tool and removed game manifest routes. |
 | engine-src | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | src/ engine and shared runtime capability behavior | explicit node unit fixtures; fresh in-memory localStorage/sessionStorage mocks per file |
@@ -124,11 +124,11 @@ Prevented Workspace lane reruns: 0
 
 | Lane | Duration | Test |
 | --- | --- | --- |
-| tool-display-mode | 4.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:211:1 > multi-path fallback opens Toolbox Group view with only the target group expanded |
-| tool-display-mode | 2.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:143:1 > Project Workspace and Game Configuration use registry order without page hardcoding |
-| tool-display-mode | 1.60s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:116:1 > Game Design renders identity and navigation rows with registry anchor links |
-| tool-display-mode | 1.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:168:1 > missing previous target renders disabled text instead of a broken link |
-| tool-display-mode | 1.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:186:1 > Build Game renders plain previous and next links in the second row |
+| tool-runtime | 34.00s | tests\playwright\tools\RootToolsFutureState.spec.mjs:508:1 > active tool pages do not render placeholder center panel images |
+| tool-runtime | 12.20s | tests\playwright\tools\RootToolsFutureState.spec.mjs:69:1 > root tools surface links current tool pages without old_* routes |
+| tool-runtime | 10.80s | tests\playwright\tools\RootToolsFutureState.spec.mjs:408:1 > learn wireframe pages load with shared Theme V2 structure |
+| tool-runtime | 9.10s | tests\playwright\tools\RootToolsFutureState.spec.mjs:323:1 > common header renders primary navigation order across active pages |
+| tool-display-mode | 4.20s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:231:1 > multi-path fallback opens Toolbox Group view with only the target group expanded |
 
 ## Commands
 
@@ -154,13 +154,13 @@ Prevented Workspace lane reruns: 0
 - SKIP
 
 ### tool-display-mode
-- PASS 18.48s C:\nvm4w\nodejs\node.exe C:\Users\davidq\Documents\GitHub\HTML-JavaScript-Gaming\node_modules\@playwright\test\cli.js test tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs --project=playwright --workers=1 --reporter=list
+- PASS 17.55s C:\nvm4w\nodejs\node.exe C:\Users\davidq\Documents\GitHub\HTML-JavaScript-Gaming\node_modules\@playwright\test\cli.js test tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs --project=playwright --workers=1 --reporter=list
 
 ### tool-images
 - SKIP
 
 ### tool-runtime
-- SKIP
+- PASS 78.94s C:\nvm4w\nodejs\node.exe C:\Users\davidq\Documents\GitHub\HTML-JavaScript-Gaming\node_modules\@playwright\test\cli.js test tests/playwright/tools/RootToolsFutureState.spec.mjs --project=playwright --workers=1 --reporter=list
 
 ### game-runtime
 - SKIP

docs_build/dev/reports/tool-center-image-and-badge-cleanup-report.md

@@ -0,0 +1,75 @@
+# PR_26156_123 Tool Center Image And Badge Cleanup Report
+
+## Scope
+
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first.
+- Removed placeholder `image-missing.svg` center-panel images from active registry-owned tool pages only.
+- Updated shared Tool Display Mode badge styling under `assets/theme-v2/css/panels.css`.
+- Updated targeted active tool page UI and Tool Display Mode Playwright/MSJ coverage.
+- Did not modify archived V1/V2 pages.
+- Did not modify `start_of_day`.
+
+## Active Tool Pages Cleaned
+
+- `toolbox/achievements/index.html`
+- `toolbox/animations/index.html`
+- `toolbox/audio-effects/index.html`
+- `toolbox/audio/index.html`
+- `toolbox/build-game/index.html`
+- `toolbox/characters/index.html`
+- `toolbox/cloud/index.html`
+- `toolbox/colors/index.html`
+- `toolbox/community/index.html`
+- `toolbox/controls/index.html`
+- `toolbox/debug/index.html`
+- `toolbox/environments/index.html`
+- `toolbox/events/index.html`
+- `toolbox/fonts/index.html`
+- `toolbox/game-configuration/index.html`
+- `toolbox/game-design/index.html`
+- `toolbox/game-migration/index.html`
+- `toolbox/game-testing/index.html`
+- `toolbox/hitboxes/index.html`
+- `toolbox/languages/index.html`
+- `toolbox/marketplace/index.html`
+- `toolbox/music/index.html`
+- `toolbox/objects/index.html`
+- `toolbox/performance/index.html`
+- `toolbox/platform-settings/index.html`
+- `toolbox/project-workspace/index.html`
+- `toolbox/ratings/index.html`
+- `toolbox/saved-data/index.html`
+- `toolbox/speech-to-text/index.html`
+- `toolbox/sprites/index.html`
+- `toolbox/text-to-speech/index.html`
+- `toolbox/users/index.html`
+- `toolbox/videos/index.html`
+- `toolbox/voices/index.html`
+- `toolbox/worlds/index.html`
+
+## Badge Cleanup
+
+- Normal Tool Display Mode badge remains `64px` by `64px`.
+- Fullscreen Tool Display Mode badge now renders at `32px` by `32px`.
+- Badge uses `object-fit: contain` so the full square artwork displays.
+- Removed the border, circular radius, and panel background that created a ring/crop treatment.
+
+## Validation Notes
+
+- Impacted lanes: `tool-runtime` and `tool-display-mode`.
+- Ran `node --check tests/playwright/tools/RootToolsFutureState.spec.mjs`.
+- Ran `node --check tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs`.
+- Ran `node ./scripts/run-targeted-test-lanes.mjs --lane tool-runtime --lane tool-display-mode`.
+- Ran a registry-driven static check confirming no active tool-center-panel placeholder images remain.
+- Ran scoped `git diff --check` for changed implementation/test/report files.
+- Ran changed-file static validation confirming no inline styles, style blocks, inline scripts, inline event handlers, archived V1/V2 paths, or `start_of_day` file changes were introduced.
+- Full samples smoke: skipped by request.
+
+## Manual Test Notes
+
+- Verified by targeted Playwright that active tool pages still render `.tool-center-panel` and visible heading content after placeholder image removal.
+- Verified by targeted Playwright that normal badge size is `64x64`.
+- Verified by targeted Playwright that fullscreen badge size is `32x32`.
+- Verified by targeted Playwright that badge border width and border radius are `0px`.
+- Verified by targeted Playwright that badge artwork uses `object-fit: contain`.
+- Verified no console errors or failed page requests in the selected lanes.

tests/playwright/tools/RootToolsFutureState.spec.mjs

@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/test";
 import { startRepoServer } from "../../helpers/playwrightRepoServer.mjs";
 import { clearPlaywrightStorage, installPlaywrightStorageIsolation } from "../../helpers/playwrightStorageIsolation.mjs";
 import { workspaceV2CoverageReporter } from "../../helpers/workspaceV2CoverageReporter.mjs";
+import { getActiveToolRegistry, getToolRoute } from "../../../toolbox/toolRegistry.js";
 
 const PRIMARY_NAVIGATION_ORDER = ["Games", "Toolbox", "Marketplace", "Learn", "Account", "Admin"];
 
@@ -503,3 +504,24 @@ test("tool template future-state page loads from root Theme V2 paths", async ({
     await server.close();
   }
 });
+
+test("active tool pages do not render placeholder center panel images", async ({ page }) => {
+  const activeRoutes = getActiveToolRegistry()
+    .map((tool) => getToolRoute(tool))
+    .filter(Boolean);
+  const { failedRequests, pageErrors, server } = await openRepoPage(page, `/${activeRoutes[0]}`);
+
+  try {
+    for (const route of activeRoutes) {
+      await page.goto(`${server.baseUrl}/${route}`, { waitUntil: "networkidle" });
+      await expect(page.locator(".tool-center-panel")).toBeVisible();
+      await expect(page.locator(".tool-center-panel > img[src$='image-missing.svg']")).toHaveCount(0);
+      await expect(page.locator(".tool-center-panel h1, .tool-center-panel h2, .tool-center-panel h3").first()).toBeVisible();
+    }
+    expect(failedRequests).toEqual([]);
+    expect(pageErrors).toEqual([]);
+  } finally {
+    await workspaceV2CoverageReporter.stop(page);
+    await server.close();
+  }
+});

tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs

@@ -90,7 +90,10 @@ async function expectToolDisplayModeVisualLayout(page) {
     const navigationBox = navigation.getBoundingClientRect();
 
     return {
+      badgeBorderRadius: getComputedStyle(badge).borderRadius,
+      badgeBorderWidth: getComputedStyle(badge).borderTopWidth,
       badgeHeight: Math.round(badgeBox.height),
+      badgeObjectFit: getComputedStyle(badge).objectFit,
       badgeWidth: Math.round(badgeBox.width),
       characterHeight: Math.round(characterBox.height),
       characterWidth: Math.round(characterBox.width),
@@ -102,7 +105,10 @@ async function expectToolDisplayModeVisualLayout(page) {
   });
 
   expect(layout).toEqual({
+    badgeBorderRadius: "0px",
+    badgeBorderWidth: "0px",
     badgeHeight: 64,
+    badgeObjectFit: "contain",
     badgeWidth: 64,
     characterHeight: 127,
     characterWidth: 225,
@@ -113,6 +119,19 @@ async function expectToolDisplayModeVisualLayout(page) {
   });
 }
 
+async function expectToolDisplayModeFullscreenBadge(page) {
+  await page.locator("#toolDisplayMode summary").click();
+  await expect(page.locator("body")).toHaveClass(/tool-focus-mode/);
+  const badgeSize = await page.locator(".tool-display-mode__badge").evaluate((badge) => {
+    const box = badge.getBoundingClientRect();
+    return {
+      height: Math.round(box.height),
+      width: Math.round(box.width)
+    };
+  });
+  expect(badgeSize).toEqual({ height: 32, width: 32 });
+}
+
 test("Game Design renders identity and navigation rows with registry anchor links", async ({ page }) => {
   const failures = await openRepoPage(page, "/toolbox/game-design/index.html?role=user");
 
@@ -133,6 +152,7 @@ test("Game Design renders identity and navigation rows with registry anchor link
     await expect(next).toHaveAttribute("href", "toolbox/game-configuration/index.html?role=user");
     await expectPlainNavigationLinks(page);
     await expectToolDisplayModeVisualLayout(page);
+    await expectToolDisplayModeFullscreenBadge(page);
     await expectNoPageFailures(failures);
   } finally {
     await workspaceV2CoverageReporter.stop(page);

toolbox/achievements/index.html

@@ -36,8 +36,7 @@ <h2>Achievements</h2>
                         </div>
                     </aside>
                     <div data-tool-display-mode data-asset-root="assets/theme-v2/images" data-tool-slug="achievements" data-tool-icon-src="assets/theme-v2/images/image-missing.svg" data-tool-character-src="assets/theme-v2/images/image-missing.svg"></div>
-                    <section class="tool-center-panel"><img src="assets/theme-v2/images/image-missing.svg" alt="Achievements preview placeholder">
-                        <h2>Workspace</h2>
+                    <section class="tool-center-panel"><h2>Workspace</h2>
                         <p>Plan achievement definitions and creator-facing unlock review. This page preserves the shared Theme V2 tool template structure for future rebuild work.</p>
                     </section>
                     <aside class="tool-column tool-group-community-marketplace">