PR_26174_ALFA_013-game-hub-game-row-child-rows

Author: ToolboxAid

docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-branch-validation.txt

@@ -0,0 +1,6 @@
+Branch Validation: PASS
+
+PASS - Current branch is pr/26174-ALFA-013-game-hub-game-row-child-rows.
+PASS - Expected branch is pr/26174-ALFA-013-game-hub-game-row-child-rows.
+PASS - Branch stacks on the current Team Alfa PR_012 branch.
+PASS - Work stayed scoped to Game Hub row rendering, targeted Playwright expectations, and required reports.

docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-manual-validation-notes.txt

@@ -0,0 +1,9 @@
+Manual Validation Notes: PASS
+
+- Confirmed the Game Hub table uses game rows as the parent rows.
+- Confirmed the previous Open Games table identity and caption are absent.
+- Confirmed expanding a game creates exactly two child rows.
+- Confirmed Source Idea appears before Readiness Output.
+- Confirmed the old Game Summary child table is absent.
+- Confirmed safe empty and unavailable state checks still pass.
+- Confirmed Idea Board-created Source Idea context still appears in Game Hub.

docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-requirement-checklist.txt

@@ -0,0 +1,13 @@
+Requirement Checklist: PASS
+
+PASS - Open Games is no longer used as the wrapper/accordion table identity.
+PASS - Parent rows are games.
+PASS - Each game row expands/collapses.
+PASS - Expanded game rows show Source Idea child table first.
+PASS - Expanded game rows show Readiness Output child table second.
+PASS - Source Idea and Readiness Output render as child rows under the game parent row.
+PASS - No new readiness math was added.
+PASS - Existing API/service contract was preserved.
+PASS - Safe empty/unavailable states were preserved by targeted validation.
+PASS - No browser-owned project data was introduced.
+PASS - No silent fallbacks were introduced.

docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-validation-lane.txt

@@ -0,0 +1,11 @@
+Validation Lane: PASS
+
+Commands:
+1. npx playwright test tests/playwright/tools/GameHubMockRepository.spec.mjs -g "Game Hub creates, opens, and deletes mock games|Game Hub validates game parent rows and child tables|Game Hub shows a creator-safe empty state|Game Hub shows a creator-safe unavailable state"
+Result: 4 passed.
+
+2. npx playwright test tests/playwright/tools/IdeaBoardTableNotes.spec.mjs -g "Idea Board uses accordion table ideas and notes"
+Result: 1 passed.
+
+3. git diff --check
+Result: PASS.

docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows.md

@@ -0,0 +1,18 @@
+# PR_26174_ALFA_013-game-hub-game-row-child-rows
+
+## Purpose
+
+Correct Game Hub so each game is the parent row and Source Idea plus Readiness Output render as child rows/child tables.
+
+## Summary
+
+- Removed the Open Games wrapper/table identity from the Game Hub list table.
+- Removed the Game Summary child table from expanded game rows.
+- Rendered each expanded game as two child rows in this order: Source Idea, Readiness Output.
+- Preserved the existing Game Hub API/service contract and safe empty/unavailable states.
+
+## Validation
+
+PASS - `npx playwright test tests/playwright/tools/GameHubMockRepository.spec.mjs -g "Game Hub creates, opens, and deletes mock games|Game Hub validates game parent rows and child tables|Game Hub shows a creator-safe empty state|Game Hub shows a creator-safe unavailable state"`
+PASS - `npx playwright test tests/playwright/tools/IdeaBoardTableNotes.spec.mjs -g "Idea Board uses accordion table ideas and notes"`
+PASS - `git diff --check`

docs_build/dev/reports/codex_changed_files.txt

@@ -1,8 +1,9 @@
+toolbox/game-hub/game-hub.js
 tests/playwright/tools/GameHubMockRepository.spec.mjs
 docs_build/dev/reports/codex_review.diff
 docs_build/dev/reports/codex_changed_files.txt
-docs_build/dev/reports/PR_26174_ALFA_012-game-hub-parent-child-final-validation.md
-docs_build/dev/reports/PR_26174_ALFA_012-game-hub-parent-child-final-validation-branch-validation.txt
-docs_build/dev/reports/PR_26174_ALFA_012-game-hub-parent-child-final-validation-requirement-checklist.txt
-docs_build/dev/reports/PR_26174_ALFA_012-game-hub-parent-child-final-validation-validation-lane.txt
-docs_build/dev/reports/PR_26174_ALFA_012-game-hub-parent-child-final-validation-manual-validation-notes.txt
+docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows.md
+docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-branch-validation.txt
+docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-requirement-checklist.txt
+docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-validation-lane.txt
+docs_build/dev/reports/PR_26174_ALFA_013-game-hub-game-row-child-rows-manual-validation-notes.txt

docs_build/dev/reports/codex_review.diff

@@ -264,9 +264,10 @@ test("Game Hub creates, opens, and deletes mock games", async ({ page }) => {
     await expect(page.locator("[data-game-list]")).toContainText("Gravity Demo");
     await expect(page.locator("[data-game-list]")).toContainText("Collision Demo");
     await expect(page.locator("[data-game-list]")).toContainText("Camera Follow Demo");
-    await expect(page.locator("[data-game-parent-table='open-games']")).toHaveAttribute("aria-label", "Open Games");
-    await expect(page.locator("[data-game-parent-table='open-games'] caption")).toHaveText("Open Games");
-    await expect(page.locator("[data-game-parent-table='open-games'] thead th")).toHaveText([
+    await expect(page.locator("[data-game-parent-table='open-games']")).toHaveCount(0);
+    await expect(page.locator("[data-game-rows-table='true']")).toHaveAttribute("aria-label", "Games");
+    await expect(page.locator("[data-game-rows-table='true'] caption")).toHaveCount(0);
+    await expect(page.locator("[data-game-rows-table='true'] thead th")).toHaveText([
       "Game",
       "Purpose",
       "Status",
@@ -280,17 +281,14 @@ test("Game Hub creates, opens, and deletes mock games", async ({ page }) => {
     await expect(demoGameRow.getByRole("button", { name: "Open Demo Game (Active)" })).toHaveAttribute("aria-current", "true");
     await demoGameRow.locator("[data-game-toggle='demo-game']").click();
     await expect(demoGameRow.locator("[data-game-toggle='demo-game']")).toHaveAttribute("aria-expanded", "true");
-    await expect(page.locator("[data-game-row='demo-game'] + [data-game-expanded-row='demo-game']")).toHaveCount(1);
-    await expect(page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table='summary']")).toContainText("Game Summary");
-    await expect(page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table='summary'] tbody tr")).toHaveText([
-      "ProjectDemo Game",
-      "PurposeGame",
-      "StatusUnder Construction",
-      "OwnerUser 1",
-    ]);
-    await expect(page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table]")).toHaveCount(3);
-    await expect(page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table='source-idea'] caption")).toHaveText("Source Idea");
-    const readinessOutputTable = page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table='readiness-output']");
+    const demoChildRows = page.locator("[data-game-expanded-row='demo-game']");
+    await expect(demoChildRows).toHaveCount(2);
+    await expect(demoChildRows.nth(0)).toHaveAttribute("data-game-child-row", "source-idea");
+    await expect(demoChildRows.nth(1)).toHaveAttribute("data-game-child-row", "readiness-output");
+    await expect(page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table='summary']")).toHaveCount(0);
+    await expect(page.locator("[data-game-expanded-row='demo-game'] [data-game-child-table]")).toHaveCount(2);
+    await expect(demoChildRows.nth(0).locator("[data-game-child-table='source-idea'] caption")).toHaveText("Source Idea");
+    const readinessOutputTable = demoChildRows.nth(1).locator("[data-game-child-table='readiness-output']");
     await expect(readinessOutputTable.locator("caption")).toHaveText("Readiness Output");
     await expect(readinessOutputTable.locator("thead th")).toHaveText(["Output", "Status"]);
     await expect(readinessOutputTable.locator("tbody tr")).toHaveText([
@@ -335,7 +333,7 @@ test("Game Hub creates, opens, and deletes mock games", async ({ page }) => {
   }
 });
 
-test("Game Hub validates Open Games parent and child tables", async ({ page }) => {
+test("Game Hub validates game parent rows and child tables", async ({ page }) => {
   const sourceLinkedGame = {
     id: "lantern-reef",
     ownerKey: MOCK_DB_KEYS.users.user1,
@@ -422,20 +420,25 @@ test("Game Hub validates Open Games parent and child tables", async ({ page }) =
   const failures = await openRepoPage(page, "/toolbox/game-hub/index.html", { session: creatorSession() });
 
   try {
-    await expect(page.locator("[data-game-parent-table='open-games'] caption")).toHaveText("Open Games");
-    const parentRows = page.locator("[data-game-parent-table='open-games'] tbody > [data-game-row]");
+    await expect(page.locator("[data-game-parent-table='open-games']")).toHaveCount(0);
+    await expect(page.locator("[data-game-rows-table='true']")).toHaveAttribute("aria-label", "Games");
+    await expect(page.locator("[data-game-rows-table='true'] caption")).toHaveCount(0);
+    const parentRows = page.locator("[data-game-rows-table='true'] tbody > [data-game-row]");
     await expect(parentRows).toHaveCount(1);
     const gameRow = page.locator("[data-game-row='lantern-reef']");
     await expect(gameRow).toContainText("Lantern Reef");
     await expect(gameRow.locator("[data-game-toggle='lantern-reef']")).toHaveAttribute("aria-expanded", "false");
 
     await gameRow.locator("[data-game-toggle='lantern-reef']").click();
     await expect(gameRow.locator("[data-game-toggle='lantern-reef']")).toHaveAttribute("aria-expanded", "true");
-    const expandedRow = page.locator("[data-game-expanded-row='lantern-reef']");
-    await expect(expandedRow).toHaveCount(1);
-    await expect(expandedRow.locator("[data-game-child-table]")).toHaveCount(3);
-
-    const sourceIdeaTable = expandedRow.locator("[data-game-child-table='source-idea']");
+    const expandedRows = page.locator("[data-game-expanded-row='lantern-reef']");
+    await expect(expandedRows).toHaveCount(2);
+    await expect(expandedRows.nth(0)).toHaveAttribute("data-game-child-row", "source-idea");
+    await expect(expandedRows.nth(1)).toHaveAttribute("data-game-child-row", "readiness-output");
+    await expect(expandedRows.locator("[data-game-child-table]")).toHaveCount(2);
+    await expect(expandedRows.locator("[data-game-child-table='summary']")).toHaveCount(0);
+
+    const sourceIdeaTable = expandedRows.nth(0).locator("[data-game-child-table='source-idea']");
     await expect(sourceIdeaTable.locator("caption")).toHaveText("Source Idea");
     await expect(sourceIdeaTable.locator("tbody tr")).toHaveText([
       "IdeaLantern Reef",
@@ -446,7 +449,7 @@ test("Game Hub validates Open Games parent and child tables", async ({ page }) =
     await expect(sourceIdeaTable.locator("button, input, textarea, select, [contenteditable='true'], [role='button']")).toHaveCount(0);
     await expect(sourceIdeaTable).not.toContainText(/Edit|Delete|Current Focus|Recommended Next Tool/);
 
-    const readinessOutputTable = expandedRow.locator("[data-game-child-table='readiness-output']");
+    const readinessOutputTable = expandedRows.nth(1).locator("[data-game-child-table='readiness-output']");
     await expect(readinessOutputTable.locator("caption")).toHaveText("Readiness Output");
     await expect(readinessOutputTable.locator("thead th")).toHaveText(["Output", "Status"]);
     await expect(readinessOutputTable).not.toContainText(/Guide reef keepers|Keep traversal gentle|Use warm lantern art/);

tests/playwright/tools/GameHubMockRepository.spec.mjs

@@ -241,36 +241,11 @@ function createGameToggleButton(game, expanded) {
   button.type = "button";
   button.dataset.gameToggle = game.id;
   button.setAttribute("aria-expanded", String(expanded));
-  button.setAttribute("aria-controls", `game-child-${game.id}`);
+  button.setAttribute("aria-controls", `game-child-source-idea-${game.id} game-child-readiness-output-${game.id}`);
   button.textContent = game.name;
   return button;
 }
 
-function renderGameSummaryChildTable(parent, game) {
-  const wrapper = document.createElement("div");
-  wrapper.className = "table-wrapper";
-  const table = document.createElement("table");
-  table.className = "data-table data-table--fixed";
-  table.dataset.gameChildTable = "summary";
-  table.setAttribute("aria-label", `${game.name} game summary`);
-  table.innerHTML = "<caption>Game Summary</caption><thead><tr><th scope=\"col\">Field</th><th scope=\"col\">Value</th></tr></thead>";
-  const body = document.createElement("tbody");
-  [
-    ["Project", game.name],
-    ["Purpose", game.purpose],
-    ["Status", game.status],
-    ["Owner", game.ownerDisplayName],
-  ].forEach(([label, value]) => {
-    const row = document.createElement("tr");
-    row.append(createCell(label, "th"), createCell(value || "Not set"));
-    row.firstElementChild.scope = "row";
-    body.append(row);
-  });
-  table.append(body);
-  wrapper.append(table);
-  parent.append(wrapper);
-}
-
 function gameSourceIdeaDetails(game) {
   const sourceIdea = isRecord(game?.sourceIdea) ? game.sourceIdea : null;
   const name = String(sourceIdea?.idea || "").trim();
@@ -366,19 +341,28 @@ function renderReadinessOutputChildTable(parent, game, progress, active) {
 }
 
 function renderExpandedGameRow(tbody, game, progress, active) {
-  const row = document.createElement("tr");
-  row.dataset.gameExpandedRow = game.id;
-  row.id = `game-child-${game.id}`;
-  const content = document.createElement("td");
-  content.colSpan = 5;
-  const stack = document.createElement("div");
-  stack.className = "content-stack content-stack--compact";
-  renderGameSummaryChildTable(stack, game);
-  renderSourceIdeaChildTable(stack, game);
-  renderReadinessOutputChildTable(stack, game, progress, active);
-  content.append(stack);
-  row.append(content);
-  tbody.append(row);
+  [
+    {
+      id: `game-child-source-idea-${game.id}`,
+      render: (parent) => renderSourceIdeaChildTable(parent, game),
+      type: "source-idea",
+    },
+    {
+      id: `game-child-readiness-output-${game.id}`,
+      render: (parent) => renderReadinessOutputChildTable(parent, game, progress, active),
+      type: "readiness-output",
+    },
+  ].forEach(({ id, render, type }) => {
+    const row = document.createElement("tr");
+    row.dataset.gameExpandedRow = game.id;
+    row.dataset.gameChildRow = type;
+    row.id = id;
+    const content = document.createElement("td");
+    content.colSpan = 5;
+    render(content);
+    row.append(content);
+    tbody.append(row);
+  });
 }
 
 function renderGameParentRow(tbody, game, activeGame, progress) {
@@ -465,9 +449,9 @@ function renderGameList(progress) {
   wrapper.className = "table-wrapper";
   const table = document.createElement("table");
   table.className = "data-table data-table--fixed";
-  table.dataset.gameParentTable = "open-games";
-  table.setAttribute("aria-label", "Open Games");
-  table.innerHTML = "<caption>Open Games</caption><thead><tr><th scope=\"col\">Game</th><th scope=\"col\">Purpose</th><th scope=\"col\">Status</th><th scope=\"col\">Owner</th><th scope=\"col\">Actions</th></tr></thead>";
+  table.dataset.gameRowsTable = "true";
+  table.setAttribute("aria-label", "Games");
+  table.innerHTML = "<thead><tr><th scope=\"col\">Game</th><th scope=\"col\">Purpose</th><th scope=\"col\">Status</th><th scope=\"col\">Owner</th><th scope=\"col\">Actions</th></tr></thead>";
   const body = document.createElement("tbody");
   listResult.forEach((game) => renderGameParentRow(body, game, activeGame, progress));
   table.append(body);