Fix Toolbox tile layout and Planned filter display - PR_26160_064-toolbox-tile-layout-and-planned-filter

Author: ToolboxAid

docs_build/dev/admin-notes/tools.txt

@@ -0,0 +1,170 @@
+Order	Tool	Group	Status	Complete
+1	
+AI Assistant
+AI
+Wireframe	No
+2	
+Project Workspace
+Build/Create
+Ready	Yes
+3	
+Project Journey
+Build/Create
+Ready	Yes
+4	
+Game Design
+Design
+Ready	Yes
+5	
+Game Configuration
+Build/Create
+Ready	Yes
+6	
+Assets
+Design
+Ready	Yes
+7	
+Colors
+Design
+Ready	Yes
+8	
+Fonts
+Design
+Wireframe	No
+9	
+Sprites
+Design
+Wireframe	No
+10	
+Characters
+Design
+Wireframe	No
+11	
+Objects
+Design
+Wireframe	No
+12	
+Worlds
+Design
+Wireframe	No
+13	
+Animations
+Design
+Wireframe	No
+14	
+Audio
+Audio
+Wireframe	No
+15	
+Music
+Audio
+Wireframe	No
+16	
+Voices
+Audio
+Wireframe	No
+17	
+Videos
+Audio
+Wireframe	No
+18	
+Build Game
+Build/Create
+Wireframe	No
+19	
+Game Testing
+Play
+Wireframe	No
+20	
+Controls
+Platform
+Wireframe	No
+21	
+Hitboxes
+Platform
+Wireframe	No
+22	
+Saved Data
+Platform
+Wireframe	No
+23	
+Debug
+Platform
+Wireframe	No
+24	
+Performance
+Platform
+Wireframe	No
+25	
+Events
+Platform
+Wireframe	No
+26	
+Publish
+Marketplace
+Planned	No
+27	
+Marketplace
+Marketplace
+Wireframe	No
+28	
+Community
+Marketplace
+Wireframe	No
+29	
+Languages
+Platform
+Wireframe	No
+30	
+Achievements
+Play
+Wireframe	No
+31	
+Ratings
+Play
+Wireframe	No
+32	
+Cloud
+Platform
+Hidden	No
+33	
+Custom Extensions
+Build/Create
+Hidden	No
+34	
+MIDI
+Audio
+Hidden	No
+35	
+Particles
+Audio
+Hidden	No
+36	
+Audio Effects
+Audio
+Hidden	No
+37	
+Voice Capture
+Audio
+Hidden	No
+38	
+Voice Output
+Audio
+Hidden	No
+39	
+Users
+Platform
+Planned	No
+40	
+Environments
+Platform
+Planned	No
+41	
+Game Migration
+Platform
+Planned	No
+42	
+Platform Settings
+Platform
+Planned	No
+Tools Progress lists 42/42 planned or active tools in intended build sequence. Complete: 6/42.

docs_build/dev/reports/toolbox-tile-layout-and-planned-filter-report.md

@@ -0,0 +1,53 @@
+# PR_26160_064-toolbox-tile-layout-and-planned-filter
+
+## Branch Validation
+
+- Current branch: `main`
+- Expected branch: `main`
+- Branch validation: PASS
+
+## Summary
+
+- Split Toolbox tile action, group, and status into separate card lines.
+- Preserved existing group colors and group assignments.
+- Fixed Planned tile visibility for normal users when the Planned status filter is selected.
+- Added regression coverage proving Planned (28) renders 28 planned tiles and Tool Count reflects visible cards.
+
+## Requirement Checklist
+
+| Requirement | Status | Evidence |
+| --- | --- | --- |
+| Tile line 1 is badge icon and Open Tool/Planned Details action | PASS | `toolbox/tools-page-accordions.js` now keeps `createToolActionRow()` to badge + action link only; Playwright validates action row order. |
+| Tile line 2 is group color marker and group name | PASS | `createToolCard()` now appends `createGroupLabel(tool.group)` as its own card child after the action row; Playwright validates group badge is not inside the action row. |
+| Tile line 3 is status badge | PASS | `createToolCard()` appends `stateBadge` immediately after the group line; Playwright validates group and status are separate lines. |
+| Do not render group and status on same line | PASS | Playwright checks the status badge top position is below the group badge top position. |
+| Preserve group colors and assignments | PASS | No registry/group mapping files changed; existing group color/assignment Playwright validation passed. |
+| Fix Planned filter regression | PASS | `baseVisibleForCreator()` now permits planned tools only when the Planned filter is active. |
+| Tool Count reflects visible tiles when Planned is selected | PASS | Playwright validates `Tool Count: 38/38` after selecting Planned with default active non-planned filters. |
+| Support multiple active status filters without hiding Planned tools | PASS | Existing multi-filter Build Path test passed; new normal tile assertion validates Planned + default filters show all 38 tiles. |
+| Keep Complete as the only default active Build Path filter | PASS | Existing Build Path Playwright assertions still validate Complete-only default. |
+| Add regression validation so Planned (28) displays 28 planned tiles | PASS | `tests/playwright/tools/ToolboxRoutePages.spec.mjs` asserts 28 planned tile cards after selecting Planned. |
+| No inline script/style/event handlers | PASS | Static `rg` checks found no runtime/page inline additions; only existing Playwright source assertions matched. |
+
+## Validation
+
+- PASS: `node --check toolbox/tools-page-accordions.js`
+- PASS: `node --check tests/playwright/tools/ToolboxRoutePages.spec.mjs`
+- PASS: `npx playwright test tests/playwright/tools/ToolboxRoutePages.spec.mjs --project=playwright` (8 passed)
+- PASS: `git diff --check` (line-ending warning only, no whitespace errors)
+- PASS: Inline handler/style/script scan on changed active Toolbox files.
+
+## Impacted Lane
+
+- Targeted Toolbox validation: Toolbox index tile layout, Planned status filtering, Tool Count, and multi-filter behavior.
+
+## Skipped Lanes
+
+- Full samples validation: skipped because no sample runtime or shared sample loader changed.
+- Full repo smoke: skipped per request; targeted Toolbox coverage exercised the affected page behavior.
+
+## Manual Test Notes
+
+- Default Toolbox tile view still shows Wireframe, Beta, and Complete tools.
+- Selecting Planned displays all 28 planned tools while keeping the default visible status filters active.
+- Tile metadata now appears as action row, group row, then status row.

tests/playwright/tools/ToolboxRoutePages.spec.mjs

@@ -128,6 +128,14 @@ test("toolbox index shows wireframe and beta tools while Planned remains opt-in"
     await expect(page.locator("[data-toolbox-tool-name-link='Project Journey']")).toBeVisible();
     await expect(page.locator("[data-toolbox-tool-name-link='Project Workspace']")).toBeVisible();
     await expect(page.locator("[data-toolbox-tool-name-link='Publish']")).toHaveCount(0);
+    await expect(page.locator("[data-tools-count]")).toHaveText("Tool Count: 10/38");
+    await page.locator("[data-toolbox-status-filter='planned']").click();
+    await expect(page.locator("[data-toolbox-status-filter='planned']")).toHaveAttribute("aria-pressed", "true");
+    await expect(page.locator("[data-toolbox-tool-card][data-toolbox-release-channel='planned']")).toHaveCount(28);
+    await expect(page.locator("[data-toolbox-tool-card]")).toHaveCount(38);
+    await expect(page.locator("[data-tools-count]")).toHaveText("Tool Count: 38/38");
+    await expect(page.locator("[data-toolbox-tool-name-link='AI Assistant']")).toBeVisible();
+    await expect(page.locator("[data-toolbox-tool-name-link='Publish']")).toBeVisible();
 
     await setServerSession(server, MOCK_DB_KEYS.users.admin);
     await page.goto(`${server.baseUrl}/toolbox/index.html`, { waitUntil: "networkidle" });
@@ -248,18 +256,27 @@ test("toolbox status kickers, filters, card order, and voting controls work from
         return child.tagName.toLowerCase();
       })
     ));
-    expect(actionOrder).toEqual(["badge", "Open Tool", "group"]);
+    expect(actionOrder).toEqual(["badge", "Open Tool"]);
     const bodyOrder = await wireframeCard.locator(".card-body").evaluate((body) => (
       Array.from(body.children).map((child) => {
         if (child.hasAttribute("data-toolbox-tile-action-row")) return "action";
+        if (child.hasAttribute("data-toolbox-group-badge")) return "group";
         if (child.hasAttribute("data-toolbox-vote-controls")) return "feedback";
         if (child.hasAttribute("data-toolbox-plan-details")) return "plan-details";
         if (child.hasAttribute("data-toolbox-state-badge")) return "state";
         return child.tagName.toLowerCase();
       })
     ));
-    expect(bodyOrder.slice(2, 6)).toEqual(["action", "feedback", "plan-details", "state"]);
-    expect(bodyOrder.at(-1)).toBe("state");
+    expect(bodyOrder.slice(2, 7)).toEqual(["action", "group", "state", "feedback", "plan-details"]);
+    const groupAndStateTop = await wireframeCard.locator(".card-body").evaluate((body) => {
+      const group = body.querySelector("[data-toolbox-group-badge]");
+      const state = body.querySelector("[data-toolbox-state-badge]");
+      return {
+        group: Math.round(group.getBoundingClientRect().top),
+        state: Math.round(state.getBoundingClientRect().top),
+      };
+    });
+    expect(groupAndStateTop.state).toBeGreaterThan(groupAndStateTop.group);
 
     const buildVotes = wireframeCard.locator("[data-toolbox-vote-controls='Build Game']");
     await expect(buildVotes).toBeVisible();
@@ -345,9 +362,9 @@ test("toolbox status kickers, filters, card order, and voting controls work from
     await expect(designGroupLabel).toHaveCSS("background-color", "rgb(255, 79, 139)");
     await expect(designGroupLabel).toHaveCSS("color", "rgb(255, 255, 255)");
     const designActionRow = page.locator("[data-toolbox-tile-action-row='Colors']");
-    await expect(designActionRow.locator("[data-toolbox-group-label='Design']")).toHaveCSS("background-color", "rgb(255, 79, 139)");
-    await expect(designActionRow.locator("[data-toolbox-group-label='Design']")).toHaveCount(1);
-    await expect(page.locator("[data-toolbox-tool-card='Colors'] .card-body > :last-child")).toHaveAttribute("data-toolbox-state-badge", "complete");
+    await expect(designActionRow.locator("[data-toolbox-group-label='Design']")).toHaveCount(0);
+    await expect(page.locator("[data-toolbox-tool-card='Colors'] .card-body > [data-toolbox-group-badge] [data-toolbox-group-label='Design']")).toHaveCSS("background-color", "rgb(255, 79, 139)");
+    await expect(page.locator("[data-toolbox-tool-card='Colors'] .card-body > [data-toolbox-state-badge]")).toHaveAttribute("data-toolbox-state-badge", "complete");
 
     await page.goto(`${server.baseUrl}/admin/tool-votes.html`, { waitUntil: "networkidle" });
     await expect(page.getByRole("heading", { level: 1, name: "Tool Votes" })).toBeVisible();

toolbox/tools-page-accordions.js

@@ -310,7 +310,8 @@ import { getSessionCurrent } from "../src/engine/api/session-api-client.js";
         return tool.adminOnly !== true && (
             tool.releaseChannel === "complete" ||
             tool.releaseChannel === "beta" ||
-            tool.releaseChannel === "wireframe"
+            tool.releaseChannel === "wireframe" ||
+            (tool.releaseChannel === "planned" && visibleReleaseChannels.has("planned"))
         );
     }
 
@@ -900,7 +901,7 @@ import { getSessionCurrent } from "../src/engine/api/session-api-client.js";
             link.textContent = tool.href.indexOf("toolbox/") === 0 || tool.href.indexOf("../toolbox/") === 0 ? "Open Tool" : "Open Page";
         }
 
-        row.append(badge, link, createGroupLabel(tool.group));
+        row.append(badge, link);
         return row;
     }
 
@@ -1069,6 +1070,7 @@ import { getSessionCurrent } from "../src/engine/api/session-api-client.js";
         const description = document.createElement("p");
         description.textContent = tool.description;
         const actionRow = createToolActionRow(tool, registryTool, body);
+        const groupLabel = createGroupLabel(tool.group);
         const voteControls = createToolVoteControls(tool);
         const plannedDetails = createPlanDetails(tool);
         const values = createToolValues(tool, options);
@@ -1082,6 +1084,8 @@ import { getSessionCurrent } from "../src/engine/api/session-api-client.js";
             cardParts.push(statusDiagnostic);
         }
         cardParts.push(actionRow);
+        cardParts.push(groupLabel);
+        cardParts.push(stateBadge);
         if (voteControls) {
             cardParts.push(voteControls);
         }
@@ -1091,7 +1095,6 @@ import { getSessionCurrent } from "../src/engine/api/session-api-client.js";
         if (values) {
             cardParts.push(values);
         }
-        cardParts.push(stateBadge);
 
         body.append(...cardParts);
         article.append(media, body);