Polish Project Journey DB tables and migrate mock keys to ULID style - PR_26157_007-project-journey-ulid-db-table-polish

Author: ToolboxAid

admin/db-viewer.js

@@ -38,6 +38,11 @@ class AdminDbViewer {
     return record.itemId || record.templateId || record.id || record.name || "record";
   }
 
+  shortKey(record) {
+    const key = String(this.recordId(record));
+    return key.length > 8 ? key.slice(-8) : key;
+  }
+
   formatValue(value) {
     if (Array.isArray(value)) {
       return value.join(", ");
@@ -80,13 +85,14 @@ class AdminDbViewer {
       className: "table-wrapper",
     });
     const table = this.createElement("table", {
-      className: "data-table",
+      className: "data-table data-table--preserve-casing",
     });
     table.setAttribute("aria-label", `${tableName} records`);
 
     const fields = this.tableFields(records);
     const head = this.createElement("thead");
     const headerRow = this.createElement("tr");
+    headerRow.append(this.createElement("th", { text: "Key" }));
     fields.forEach((field) => {
       headerRow.append(this.createElement("th", { text: field }));
     });
@@ -96,6 +102,9 @@ class AdminDbViewer {
     records.forEach((record) => {
       const row = this.createElement("tr");
       row.dataset.adminDbRecord = this.recordId(record);
+      const keyCell = this.createElement("td", { text: this.shortKey(record) });
+      keyCell.title = this.recordId(record);
+      row.append(keyCell);
       fields.forEach((field) => {
         row.append(this.createElement("td", { text: this.formatValue(record[field]) }));
       });

assets/theme-v2/css/panels.css

@@ -418,6 +418,18 @@ body.tool-focus-mode .tool-display-mode__badge {
   color: var(--gold)
 }
 
+.mini-stat--inline {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-8);
+  justify-content: flex-start;
+  white-space: nowrap
+}
+
+.mini-stat--inline strong {
+  display: inline
+}
+
 .tool-stat-divider {
   border-top: var(--border-standard);
   grid-column: 1 / -1;

assets/theme-v2/css/tables.css

@@ -45,6 +45,11 @@ td {
   letter-spacing: var(--letter-spacing-brand)
 }
 
+.data-table--preserve-casing th {
+  letter-spacing: 0;
+  text-transform: none
+}
+
 .tool-form-table {
   table-layout: fixed;
   width: 100%

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -12,23 +12,24 @@ Note: entry percentages use function coverage when available, otherwise line cov
 Note: coverage entries are aggregated across every page/tool where coverageReporter.start(page) and coverageReporter.stop(page) ran.
 
 Exercised tool entry points detected:
-(85%) Toolbox Index - exercised 6 runtime JS files
+(86%) Toolbox Index - exercised 6 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
 (74%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(94%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 882/882; executed functions 74/79
-(96%) toolbox/project-journey/project-journey.js - executed lines 815/815; executed functions 81/84
+(95%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 960/960; executed functions 76/80
+(96%) toolbox/project-journey/project-journey.js - executed lines 805/805; executed functions 79/82
 
 Files with executed line/function counts where available:
 (67%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 10/15
 (71%) toolbox/project-workspace/project-workspace.js - executed lines 264/264; executed functions 17/24
 (73%) toolbox/tools-page-accordions.js - executed lines 826/826; executed functions 55/75
 (76%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 402/402; executed functions 26/34
 (80%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 207/207; executed functions 16/20
-(84%) toolbox/toolRegistry.js - executed lines 1788/1788; executed functions 31/37
-(94%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 882/882; executed functions 74/79
-(96%) toolbox/project-journey/project-journey.js - executed lines 815/815; executed functions 81/84
+(86%) toolbox/toolRegistry.js - executed lines 1788/1788; executed functions 32/37
+(95%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 960/960; executed functions 76/80
+(96%) toolbox/project-journey/project-journey.js - executed lines 805/805; executed functions 79/82
+(98%) admin/db-viewer.js - executed lines 221/221; executed functions 40/41
 
 Uncovered or low-coverage changed JS files:
 (100%) none - no low-coverage changed runtime JS files
@@ -38,5 +39,6 @@ Changed JS files considered:
 (0%) tests/playwright/tools/AdminDbViewer.spec.mjs - changed JS file not collected as browser runtime coverage
 (0%) tests/playwright/tools/AdminNotesViewer.spec.mjs - changed JS file not collected as browser runtime coverage
 (0%) tests/playwright/tools/ProjectJourneyTool.spec.mjs - changed JS file not collected as browser runtime coverage
-(94%) toolbox/project-journey/project-journey-mock-repository.js - changed JS file with browser V8 coverage
+(95%) toolbox/project-journey/project-journey-mock-repository.js - changed JS file with browser V8 coverage
 (96%) toolbox/project-journey/project-journey.js - changed JS file with browser V8 coverage
+(98%) admin/db-viewer.js - changed JS file with browser V8 coverage

docs_build/dev/reports/project-journey-ulid-db-table-polish-report.md

@@ -0,0 +1,40 @@
+# Project Journey ULID DB Table Polish Report
+
+PR: PR_26157_007-project-journey-ulid-db-table-polish
+
+## Scope
+- Updated Project Journey Statistics mini-stats so each value and label render inline.
+- Removed Project Journey-only Status Legend callout markup and `statusLegend` runtime code.
+- Preserved Admin Notes legend behavior; Admin Notes files were not modified.
+- Updated Project Journey DB Viewer tables to preserve actual field casing and show a short `Key` column with full-key hover titles.
+- Migrated Project Journey mock DB primary keys and relationship keys to ULID-style IDs.
+
+## Implementation Notes
+- Added reusable Theme V2 `.mini-stat--inline` for inline value/label mini-stat layout.
+- Added reusable Theme V2 `.data-table--preserve-casing` because DB dump tables need exact field names such as `createdAt`, not uppercase headings.
+- Project Journey mock records now use ULID-style primary keys for notes, note types, items, templates, activity, and the Project Journey project relationship key.
+- Human-readable note/type/template descriptors are stored separately as names, `noteKey`, `typeKey`, or `templateKey`, not as primary keys.
+- `demo-project` remains only as the Project Workspace route alias so existing workspace handoff URLs still work; Project Journey table `projectId` values use the ULID-style Project Journey key.
+- Generated user note, note type, item, activity, and diagnostic records now receive ULID-style IDs.
+
+## Verification
+- Statistics tiles render `strong` and `span` on one row with no status/pill styling inside the tile.
+- Project Journey Status Legend callout and `data-journey-status-legend` are removed from Project Journey.
+- Admin Notes legend remains outside this PR scope and was not changed.
+- DB Viewer headers display exact field casing.
+- Every DB Viewer table has a `Key` column; the Key cell shows the last 8 characters and its `title` contains the complete primary key.
+- Full primary key/id fields remain visible in each DB Viewer table.
+- Project Journey mock primary keys match the ULID-style pattern and no seeded Project Journey primary key uses `activity-*`, `demo-project`, `note-*`, `item-*`, `template-*`, or `custom-type-*`.
+- Relationship checks still report no missing links and no table bleed.
+
+## Validation
+- `node --check toolbox/project-journey/project-journey-mock-repository.js`
+- `node --check toolbox/project-journey/project-journey.js`
+- `node --check admin/db-viewer.js`
+- `node --check tests/playwright/tools/ProjectJourneyTool.spec.mjs`
+- `node --check tests/playwright/tools/AdminDbViewer.spec.mjs`
+- `npx playwright test tests/playwright/tools/ProjectJourneyTool.spec.mjs tests/playwright/tools/AdminDbViewer.spec.mjs --reporter=list --workers=1` - PASS, 12 passed.
+- `npm run test:playwright:static -- --static-report docs_build/dev/reports/static_validation_report.md` - PASS.
+
+## Skipped
+- Full samples smoke was not run because this PR only affects Project Journey, Admin DB Viewer, targeted Theme V2 classes, and targeted tests.

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,48 +1,36 @@
 # Testing Lane Execution Report
 
-Generated: 2026-06-06
+PR: PR_26157_007-project-journey-ulid-db-table-polish
 
-Status: PASS
-
-## Lanes
-
-- Project Journey runtime/UI lane: PASS.
-- Admin Notes parser/UI lane: PASS.
-- Admin DB Viewer relationship-count check: PASS because Project Journey mock DB seed counts changed.
-- Changed-file/static validation: PASS.
-- Full samples smoke: SKIP per PR instructions.
+## Lanes Run
+- Project Journey runtime/UI lane.
+- Project Journey DB Viewer UI lane.
+- Changed-file/static validation lane.
+- Runtime JavaScript syntax checks for changed JS/test files.
 
 ## Commands
-
-| Command | Result | Notes |
-| --- | --- | --- |
-| `node --check toolbox/project-journey/project-journey.js` | PASS | Project Journey runtime syntax passed. |
-| `node --check toolbox/project-journey/project-journey-mock-repository.js` | PASS | Project Journey mock DB syntax passed. |
-| `node --check admin/notes.js` | PASS | Admin Notes parser syntax passed. |
-| `node --check tests/playwright/tools/ProjectJourneyTool.spec.mjs` | PASS | Project Journey Playwright spec syntax passed. |
-| `node --check tests/playwright/tools/AdminNotesViewer.spec.mjs` | PASS | Admin Notes Playwright spec syntax passed. |
-| `npx playwright test tests/playwright/tools/ProjectJourneyTool.spec.mjs tests/playwright/tools/AdminNotesViewer.spec.mjs tests/playwright/tools/AdminDbViewer.spec.mjs --reporter=list` | PASS | 16 passed in 39.0s. |
-| `npm run test:playwright:static -- --static-report docs_build/dev/reports/static_validation_report.md` | PASS | Static-only lane runner completed; auxiliary static cache report churn was restored out of the PR diff. |
-
-## Targeted Runtime Coverage
-
-- Verified Project Journey Summary Table sorted column is visually distinct and shows asc/desc arrows.
-- Verified every sortable Summary Table column still toggles asc/desc.
-- Verified reusable `.btn.btn--compact` minimum width increased through Theme V2 button CSS.
-- Verified Skipped appears after Complete in Project Journey navigation, summary headers, statistics, dropdowns, and legend.
-- Verified Skipped does not count as Open and does count in Total.
-- Verified Summary Table displays Skipped after Complete and before Open.
-- Verified Skipped filter returns the expected release note with Skipped counts.
-- Verified Admin Notes parses `[-]` as Skipped and shows `[-] ⏭️ Skipped` in the status legend.
-- Verified Project Journey manual Status Legend layout remains intact while receiving the new Skipped entry from the existing renderer.
-
-## Coverage Notes
-
-- `docs_build/dev/reports/playwright_v8_coverage_report.txt` was regenerated by the targeted Playwright run.
-- Project Journey changed runtime JS was collected by V8 coverage.
-- `admin/notes.js` is listed by the coverage reporter as not collected browser runtime coverage, but the Admin Notes parser/UI lane executed and passed.
+- `node --check toolbox/project-journey/project-journey-mock-repository.js`
+- `node --check toolbox/project-journey/project-journey.js`
+- `node --check admin/db-viewer.js`
+- `node --check tests/playwright/tools/ProjectJourneyTool.spec.mjs`
+- `node --check tests/playwright/tools/AdminDbViewer.spec.mjs`
+- `npx playwright test tests/playwright/tools/ProjectJourneyTool.spec.mjs tests/playwright/tools/AdminDbViewer.spec.mjs --reporter=list --workers=1`
+- `npm run test:playwright:static -- --static-report docs_build/dev/reports/static_validation_report.md`
+
+## Results
+- Syntax checks: PASS.
+- Targeted Playwright: PASS, 12 passed.
+- Static validation: PASS.
+- V8 coverage report: generated at `docs_build/dev/reports/playwright_v8_coverage_report.txt`.
+
+## Behavior Covered
+- Project Journey Statistics mini-stat value/label inline layout.
+- Project Journey Status Legend removal.
+- Summary Table sorting, Skipped status, Open/Total formulas, System Generated filter, system template SSoT, and ownership fields.
+- User-created generated note/type/item IDs remain ULID-style and editable/deletable as scoped.
+- System-created items remain template-backed and non-deletable.
+- DB Viewer field casing, Key column, full-key hover titles, read-only behavior, relationship summaries, and no table bleed diagnostics.
 
 ## Skipped Lanes
-
-- Full samples smoke was skipped because samples were explicitly out of scope.
-- Broad runtime lanes were skipped because the targeted Project Journey, Admin Notes, DB Viewer count, and static lanes covered the changed surfaces.
+- Full samples smoke: SKIP. Samples are not in scope and the PR does not modify sample manifests or game runtime.
+- Broad workspace/samples lanes: SKIP. Existing Project Workspace handoff coverage in the targeted Project Journey spec validates the active project route boundary needed for this PR.

tests/playwright/tools/AdminDbViewer.spec.mjs

@@ -1,8 +1,11 @@
 import { expect, test } from "@playwright/test";
+import { PROJECT_JOURNEY_IDS } from "../../../toolbox/project-journey/project-journey-mock-repository.js";
 import { startRepoServer } from "../../helpers/playwrightRepoServer.mjs";
 import { clearPlaywrightStorage, installPlaywrightStorageIsolation } from "../../helpers/playwrightStorageIsolation.mjs";
 import { workspaceV2CoverageReporter } from "../../helpers/workspaceV2CoverageReporter.mjs";
 
+const ULID_PATTERN = /^[0-9A-HJKMNP-TV-Z]{26}$/;
+
 test.beforeEach(async ({ page }) => {
   await installPlaywrightStorageIsolation(page, {
     lane: "admin-db-viewer",
@@ -72,7 +75,21 @@ test("Admin DB Viewer shows read-only mock DB tables and diagnostics", async ({
     await expect(page.locator("[data-admin-db-table='project_journey_note_types']")).toBeVisible();
     await expect(page.locator("[data-admin-db-table='project_journey_activity']")).toBeVisible();
 
+    for (const tableName of [
+      "project_journey_activity",
+      "project_journey_items",
+      "project_journey_note_types",
+      "project_journey_notes",
+      "project_journey_templates",
+    ]) {
+      await expect(page.locator(`[data-admin-db-table="${tableName}"] thead th`).first()).toHaveText("Key");
+      const keyCell = page.locator(`[data-admin-db-table="${tableName}"] tbody tr`).first().locator("td").first();
+      await expect(keyCell).toHaveText(/^[0-9A-HJKMNP-TV-Z]{6,8}$/);
+      await expect(keyCell).toHaveAttribute("title", ULID_PATTERN);
+    }
+
     const itemHeaders = await page.locator("[data-admin-db-table='project_journey_items'] thead th").allTextContents();
+    expect(itemHeaders[0]).toBe("Key");
     expect(itemHeaders).toEqual(expect.arrayContaining([
       "itemId",
       "projectId",
@@ -86,8 +103,14 @@ test("Admin DB Viewer shows read-only mock DB tables and diagnostics", async ({
       "updatedByType",
       "templateId",
     ]));
-    await expect(page.locator("[data-admin-db-table='project_journey_items']")).toContainText("item-design-1");
-    await expect(page.locator("[data-admin-db-table='project_journey_templates']")).toContainText("template-palette-affordance");
+    expect(itemHeaders).not.toEqual(expect.arrayContaining(["CREATEDAT", "UPDATEDAT", "CREATEDBYTYPE", "UPDATEDBYTYPE"]));
+    const createdAtHeader = page.locator("[data-admin-db-table='project_journey_items'] thead th", { hasText: "createdAt" });
+    await expect(createdAtHeader).toHaveCSS("text-transform", "none");
+    const designItemRow = page.locator(`[data-admin-db-record="${PROJECT_JOURNEY_IDS.items.designAffordance}"]`);
+    await expect(designItemRow.locator("td").first()).toHaveText(PROJECT_JOURNEY_IDS.items.designAffordance.slice(-8));
+    await expect(designItemRow.locator("td").first()).toHaveAttribute("title", PROJECT_JOURNEY_IDS.items.designAffordance);
+    await expect(page.locator("[data-admin-db-table='project_journey_items']")).toContainText(PROJECT_JOURNEY_IDS.items.designAffordance);
+    await expect(page.locator("[data-admin-db-table='project_journey_templates']")).toContainText(PROJECT_JOURNEY_IDS.templates.paletteAffordance);
     await expect(page.locator("[data-admin-db-table='project_journey_note_types']")).toContainText("Design");
     await expect(page.locator("[data-admin-db-table='project_journey_activity']")).toContainText("Palette and Input Density updated by Designer");