PR_26171_007 Game Journey progress dashboard

Author: ToolboxAid

tests/playwright/tools/GameJourneyTool.spec.mjs

@@ -102,6 +102,14 @@ function statusLabel(statusId) {
   return status ? `${status.icon} ${status.label}` : statusId;
 }
 
+function restoreEnvValue(key, value) {
+  if (value === undefined) {
+    delete process.env[key];
+    return;
+  }
+  process.env[key] = value;
+}
+
 function expectStaticToolOwnershipAreas(areas) {
   expect(areas.map((area) => area.sectionName)).toEqual([
     "Idea",
@@ -197,6 +205,83 @@ test("Game Journey exposes static tool ownership areas without automatic counts"
   }
 });
 
+test("Game Journey progress dashboard summarizes completion metrics", async ({ page }) => {
+  const server = await startRepoServer();
+  const previousApiUrl = process.env.GAMEFOUNDRY_API_URL;
+  const previousSiteUrl = process.env.GAMEFOUNDRY_SITE_URL;
+  process.env.GAMEFOUNDRY_API_URL = `${server.baseUrl}/api`;
+  process.env.GAMEFOUNDRY_SITE_URL = server.baseUrl;
+  const failedRequests = [];
+  const pageErrors = [];
+  const consoleErrors = [];
+
+  page.on("pageerror", (error) => {
+    pageErrors.push(error.message);
+  });
+  page.on("console", (message) => {
+    if (message.type() === "error") {
+      consoleErrors.push(message.text());
+    }
+  });
+  page.on("response", (response) => {
+    if (response.status() >= 400) {
+      failedRequests.push(`${response.status()} ${response.url()}`);
+    }
+  });
+  page.on("requestfailed", (request) => {
+    failedRequests.push(`FAILED ${request.url()}`);
+  });
+
+  try {
+    await workspaceV2CoverageReporter.start(page);
+    await fetch(`${server.baseUrl}/api/session/mode`, {
+      body: JSON.stringify({ modeId: "local-db" }),
+      headers: { "content-type": "application/json" },
+      method: "POST",
+    });
+    await fetch(`${server.baseUrl}/api/session/user`, {
+      body: JSON.stringify({ userKey: MOCK_DB_KEYS.users.user1 }),
+      headers: { "content-type": "application/json" },
+      method: "POST",
+    });
+    await page.goto(`${server.baseUrl}/toolbox/game-journey/index.html?game=demo-game`, { waitUntil: "networkidle" });
+
+    await expect(page.locator("[data-journey-active-game]")).toHaveText("Active game: Demo Game.");
+    await expect(page.locator("[data-journey-progress-dashboard]")).toBeVisible();
+    await expect(page.locator("details > summary", { hasText: /^Progress Dashboard$/ })).toHaveCount(1);
+    await expect(page.locator("[data-journey-completion-metrics]")).toContainText("Completion model: 0 of 66 planned items complete (0%). Active buckets: 10; inactive buckets: 4.");
+    await expect(page.locator("[data-journey-overall-progress] .mini-stat")).toHaveText([
+      "0%Progress",
+      "0Completed",
+      "66Planned",
+      "10Active Sections",
+    ]);
+    await expect(page.locator("[data-journey-section-progress] table")).toHaveAttribute("aria-label", "Game Journey section progress");
+    await expect(page.locator("[data-journey-completion-bucket]")).toHaveCount(14);
+    await expect(page.locator("[data-journey-completion-bucket='001-idea'] td")).toHaveText([
+      "Idea",
+      "4",
+      "0",
+      "0%",
+      "inactive",
+    ]);
+    await expect(page.locator("[data-journey-most-complete-areas] li")).toHaveCount(3);
+    await expect(page.locator("[data-journey-most-complete-areas] li").first()).toHaveText("Idea: 0% complete (0 of 4)");
+    await expect(page.locator("[data-journey-least-complete-areas] li")).toHaveCount(3);
+    await expect(page.locator("[data-journey-least-complete-areas] li").first()).toHaveText("Idea: 0% complete (0 of 4)");
+    await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
+
+    expect(failedRequests).toEqual([]);
+    expect(pageErrors).toEqual([]);
+    expect(consoleErrors).toEqual([]);
+  } finally {
+    await workspaceV2CoverageReporter.stop(page);
+    await server.close();
+    restoreEnvValue("GAMEFOUNDRY_API_URL", previousApiUrl);
+    restoreEnvValue("GAMEFOUNDRY_SITE_URL", previousSiteUrl);
+  }
+});
+
 async function closeWithCoverage(page, failures) {
   await workspaceV2CoverageReporter.stop(page);
   await failures.server.close();

toolbox/game-journey/game-journey.js

@@ -719,16 +719,37 @@ function renderCompletionMetrics() {
     return;
   }
 
+  const dashboard = createElement("div", { className: "content-stack content-stack--compact" });
+  dashboard.dataset.journeyProgressDashboard = "";
   const summary = createElement("p", {
     className: "status",
     text: `Completion model: ${completionMetricsSnapshot.completedCount} of ${completionMetricsSnapshot.plannedCount} planned items complete (${completionMetricsSnapshot.percentComplete}%). Active buckets: ${completionMetricsSnapshot.activeCount}; inactive buckets: ${completionMetricsSnapshot.inactiveCount}.`,
   });
+  const overallHeading = createElement("h3", { text: "Overall Progress" });
+  const overallGrid = createElement("div", { className: "grid cols-2" });
+  overallGrid.dataset.journeyOverallProgress = "";
+  [
+    ["Progress", `${completionMetricsSnapshot.percentComplete}%`],
+    ["Completed", String(completionMetricsSnapshot.completedCount)],
+    ["Planned", String(completionMetricsSnapshot.plannedCount)],
+    ["Active Sections", String(completionMetricsSnapshot.activeCount)],
+  ].forEach(([label, value]) => {
+    const stat = createElement("article", { className: "mini-stat mini-stat--inline" });
+    stat.append(
+      createElement("strong", { text: value }),
+      createElement("span", { text: label }),
+    );
+    overallGrid.append(stat);
+  });
+
+  const sectionHeading = createElement("h3", { text: "Section Progress" });
   const wrapper = createElement("div", { className: "table-wrapper" });
+  wrapper.dataset.journeySectionProgress = "";
   const table = createElement("table", { className: "data-table data-table--fixed" });
-  table.setAttribute("aria-label", "Game Journey completion metrics");
+  table.setAttribute("aria-label", "Game Journey section progress");
   const head = createElement("thead");
   const headRow = createElement("tr");
-  ["Bucket", "Planned", "Completed", "%", "Status"].forEach((heading) => {
+  ["Section", "Planned", "Completed", "%", "Status"].forEach((heading) => {
     const cell = createElement("th", { text: heading });
     cell.scope = "col";
     headRow.append(cell);
@@ -749,7 +770,53 @@ function renderCompletionMetrics() {
   });
   table.append(head, body);
   wrapper.append(table);
-  completionMetrics.append(summary, wrapper);
+
+  const rankedRecords = records.filter((metric) => metric.plannedCount > 0);
+  const mostComplete = [...rankedRecords]
+    .sort((left, right) =>
+      right.percentComplete - left.percentComplete ||
+      right.completedCount - left.completedCount ||
+      left.bucketKey.localeCompare(right.bucketKey),
+    )
+    .slice(0, 3);
+  const leastComplete = [...rankedRecords]
+    .sort((left, right) =>
+      left.percentComplete - right.percentComplete ||
+      left.completedCount - right.completedCount ||
+      left.bucketKey.localeCompare(right.bucketKey),
+    )
+    .slice(0, 3);
+
+  const mostHeading = createElement("h3", { text: "Most Complete Areas" });
+  const mostList = createElement("ol");
+  mostList.dataset.journeyMostCompleteAreas = "";
+  mostComplete.forEach((metric) => {
+    mostList.append(createElement("li", {
+      text: `${metric.bucketName}: ${metric.percentComplete}% complete (${metric.completedCount} of ${metric.plannedCount})`,
+    }));
+  });
+
+  const leastHeading = createElement("h3", { text: "Least Complete Areas" });
+  const leastList = createElement("ol");
+  leastList.dataset.journeyLeastCompleteAreas = "";
+  leastComplete.forEach((metric) => {
+    leastList.append(createElement("li", {
+      text: `${metric.bucketName}: ${metric.percentComplete}% complete (${metric.completedCount} of ${metric.plannedCount})`,
+    }));
+  });
+
+  dashboard.append(
+    summary,
+    overallHeading,
+    overallGrid,
+    sectionHeading,
+    wrapper,
+    mostHeading,
+    mostList,
+    leastHeading,
+    leastList,
+  );
+  completionMetrics.append(dashboard);
 }
 
 function renderSearchStatus(query, notes) {

toolbox/game-journey/index.html

@@ -169,7 +169,7 @@ <h2>Journey Inspector</h2>
                                 </div>
                             </details>
                             <details class="vertical-accordion" open>
-                                <summary>Completion Metrics</summary>
+                                <summary>Progress Dashboard</summary>
                                 <div class="accordion-body">
                                     <div class="content-stack content-stack--compact" data-journey-completion-metrics></div>
                                 </div>