Fix Asset Manager V2 asset ID generation for type, role, and color assets - PR_26139_018-asset-manager-id-builder-fixes

Author: DavidQ

docs/dev/reports/PR_26139_018-asset-manager-id-builder-fixes_report.md

@@ -0,0 +1,38 @@
+# PR_26139_018 Asset Manager ID Builder Fixes Report
+
+## Summary
+- Updated Asset Manager V2 color ID generation to use `assets.color.<role>.<usage-or-game>` and never append the color name.
+- Allowed color assets to validate and save without Usage; blank Usage now generates the `game` segment.
+- Preserved `assets.color.background.game` background color behavior.
+- Kept selected file state through Type changes so Asset ID regenerates immediately; incompatible file/type combinations now remain visibly blocked by validation.
+
+## Files Changed
+- `tools/asset-manager-v2/js/assetManagerMetadata.js`
+- `tools/asset-manager-v2/js/controls/AssetFormControl.js`
+- `tools/asset-manager-v2/js/services/AssetSchemaValidator.js`
+- `tests/playwright/tools/AssetManagerV2.spec.mjs`
+- `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+
+## Targeted Validation Covered
+- Type change updates generated Asset ID.
+- Role change updates generated Asset ID.
+- Color save succeeds without Usage.
+- Color ID excludes color name.
+- Background color remains `assets.color.background.game`.
+- Workspace-launched Asset Manager uses the same role-based color ID contract.
+
+## Validation Commands
+- PASS: `node --check tools/asset-manager-v2/js/assetManagerMetadata.js`
+- PASS: `node --check tools/asset-manager-v2/js/controls/AssetFormControl.js`
+- PASS: `node --check tools/asset-manager-v2/js/services/AssetSchemaValidator.js`
+- PASS: `node --check tests/playwright/tools/AssetManagerV2.spec.mjs`
+- PASS: `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- PASS: `npx playwright test tests/playwright/tools/AssetManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "launches Asset Manager V2 with temporary UAT context and schema-complete asset controls|launches Asset Manager V2 from Workspace Manager V2 with schema-valid context and workspace return nav"`
+- PASS: `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "uses header lifecycle controls and launches tools from fixed Workspace Manager V2 tiles"`
+- PASS: `npm run build:manifest`
+- PASS: `git diff --check`
+
+## Notes
+- The first targeted Asset Manager Playwright run found stale test expectations for source path preservation and current Workspace Manager tile count. The assertions were corrected and the targeted validation was rerun successfully.
+- Full samples smoke test was not run because this PR is limited to Asset Manager V2 ID builder and validation behavior.
+- Playwright V8 coverage artifacts were refreshed by the targeted Playwright runs; coverage remains advisory.

tests/playwright/tools/AssetManagerV2.spec.mjs

@@ -569,6 +569,24 @@ test.describe("Asset Manager V2", () => {
       await expect(page.locator("#assetStretchOverrideInput")).toHaveValue("0");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Selected file nebula-background\.png validated as type image, kind png, role background\./);
       await expect(page.locator("#addAssetButton")).toBeEnabled();
+      await page.locator("#assetRoleSelect").selectOption("preview");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.image.preview.nebula-background");
+      await expect(page.locator("#assetStretchOverrideField")).toBeHidden();
+      await page.locator("#assetRoleSelect").selectOption("background");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.image.background.nebula-background");
+      await expect(page.locator("#assetStretchOverrideField")).toBeVisible();
+      await page.locator("#assetKindAudio").check();
+      await expect(page.locator("#assetRoleSelect")).toHaveValue("sound");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.audio.sound.nebula-background");
+      await expect(page.locator("#assetPathInput")).toHaveValue("assets/images/nebula-background.png");
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Selected file validation failed: File nebula-background\.png is not accepted for Audio assets\./);
+      await expect(page.locator("#addAssetButton")).toBeDisabled();
+      await page.locator("#assetKindImage").check();
+      await expect(page.locator("#assetRoleSelect")).toHaveValue("background");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.image.background.nebula-background");
+      await expect(page.locator("#assetPathInput")).toHaveValue("assets/images/nebula-background.png");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected file nebula-background\.png validated as type image, kind png, role background\./);
+      await expect(page.locator("#addAssetButton")).toBeEnabled();
       await page.locator("#addAssetButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Added assets\.image\.background\.nebula-background\./);
       await expect(page.locator("#assetList")).toContainText("assets.image.background.nebula-background");
@@ -1230,29 +1248,28 @@ test.describe("Asset Manager V2", () => {
         isSelected: true,
         swatchBorderColor: "rgb(255, 255, 255)"
       });
-      await expect(page.locator("#assetIdInput")).toHaveValue("");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.game");
       await expect(page.locator("#assetPathInput")).toHaveValue("palette://workspace/signal-violet");
-      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Selected color validation failed: Color usage is required for color assets\./);
-      await expect(page.locator("#addAssetButton")).toBeDisabled();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected color Signal Violet! validated as type color, kind hex, role hud\./);
+      await expect(page.locator("#addAssetButton")).toBeEnabled();
       await page.locator("#assetRoleSelect").selectOption("background");
-      await page.locator("#assetUsageInput").fill("game");
       await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.background.game");
       await expect(page.locator("#assetUsageField")).toHaveCount(1);
       await page.locator("#assetRoleSelect").selectOption("hud");
       await page.locator("#assetUsageInput").fill("Menu Highlight");
-      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.menu-highlight.signal-violet");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.menu-highlight");
       await expect(page.locator("#assetPathInput")).toHaveValue("palette://workspace/signal-violet");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Selected color Signal Violet! validated as type color, kind hex, role hud\./);
       await page.locator("#addAssetButton").click();
-      await expect(page.locator("#assetList")).toContainText("assets.color.hud.menu-highlight.signal-violet");
+      await expect(page.locator("#assetList")).toContainText("assets.color.hud.menu-highlight");
       await expect(page.locator("#assetList")).toContainText("assets.font.ui.vector-battle");
       await expect(page.locator("#assetList")).toContainText("assets.image.preview.uat-preview");
       await expect(page.locator("#assetList")).toContainText("assets.video.cutscene.8-mile");
       await expect(page.locator("#selectedAssetDetails")).not.toContainText("Final ID");
-      await expect(page.locator("#selectedAssetDetails")).toContainText("assets.color.hud.menu-highlight.signal-violet");
+      await expect(page.locator("#selectedAssetDetails")).toContainText("assets.color.hud.menu-highlight");
       const output = JSON.parse(await page.locator("#inspectorOutput").textContent());
       expect(output.assets[0]).toEqual({
-        id: "assets.color.hud.menu-highlight.signal-violet",
+        id: "assets.color.hud.menu-highlight",
         type: "color",
         kind: "hex",
         role: "hud",
@@ -1394,7 +1411,7 @@ test.describe("Asset Manager V2", () => {
     });
 
     try {
-      await expect(page.locator("#workspaceToolTiles [data-workspace-tool-id]")).toHaveCount(7);
+      await expect(page.locator("#workspaceToolTiles [data-workspace-tool-id]")).toHaveCount(8);
       await expect(page.locator('[data-workspace-tool-id="workspace-manager-v2"]')).toHaveCount(0);
       await selectFakeWorkspaceRepo(page);
       await page.locator("#activeGameSelect").selectOption("Asteroids");
@@ -1503,22 +1520,25 @@ test.describe("Asset Manager V2", () => {
       expect(paletteTitles.some((title) => title.includes("name: HUD Blue"))).toBe(true);
       expect(paletteTitles.some((title) => title.includes("name: Vector White"))).toBe(true);
       await page.locator('#assetColorSwatchList button[title*="HUD Blue"]').click();
-      await expect(page.locator("#assetIdInput")).toHaveValue("");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.game");
       await expect(page.locator("#assetPathInput")).toHaveValue("palette://workspace/hud-blue");
-      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Selected color validation failed: Color usage is required for color assets\./);
-      await expect(page.locator("#addAssetButton")).toBeDisabled();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected color HUD Blue validated as type color, kind hex, role hud\./);
+      await expect(page.locator("#addAssetButton")).toBeEnabled();
+      await page.locator("#assetRoleSelect").selectOption("background");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.background.game");
+      await page.locator("#assetRoleSelect").selectOption("hud");
       await page.locator("#assetUsageInput").fill("Primary HUD");
-      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.primary-hud.hud-blue");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.primary-hud");
       await expect(page.locator("#assetPathInput")).toHaveValue("palette://workspace/hud-blue");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Selected color HUD Blue validated as type color, kind hex, role hud\./);
       await page.locator("#assetRoleSelect").selectOption("accent");
-      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.accent.primary-hud.hud-blue");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.accent.primary-hud");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Selected color HUD Blue validated as type color, kind hex, role accent\./);
       await page.locator("#assetRoleSelect").selectOption("hud");
-      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.primary-hud.hud-blue");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.primary-hud");
       await expect(page.locator("#addAssetButton")).toBeEnabled();
       await page.locator("#addAssetButton").click();
-      await expect(page.locator("#assetList")).toContainText("assets.color.hud.primary-hud.hud-blue");
+      await expect(page.locator("#assetList")).toContainText("assets.color.hud.primary-hud");
       await expect(page.locator('#assetPreview [data-preview-type="color"][data-preview-kind="hex"]')).toBeVisible();
       await expect(page.locator(".asset-manager-v2__preview-color span")).toHaveCSS("background-color", "rgb(120, 183, 255)");
       await expect(page.locator("#inspectorOutput")).toContainText("\"type\": \"color\"");
@@ -1579,7 +1599,7 @@ test.describe("Asset Manager V2", () => {
         role: "preview",
         source: "asset-manager-v2"
       });
-      expect(storedAssetSession.data.assets["assets.color.hud.primary-hud.hud-blue"]).toEqual({
+      expect(storedAssetSession.data.assets["assets.color.hud.primary-hud"]).toEqual({
         path: "palette://workspace/hud-blue",
         type: "color",
         kind: "hex",
@@ -1596,7 +1616,7 @@ test.describe("Asset Manager V2", () => {
       expect(storedContext.tools["palette-manager-v2"].swatches.length).toBeGreaterThan(0);
       expect(storedContext.tools["object-vector-studio-v2"].objects.map((object) => object.id)).toContain("object.asteroids.ship");
       expect(storedContext.tools["workspace-v2"]).toBeUndefined();
-      expect(Object.keys(storedContext.tools).sort()).toEqual(["asset-manager-v2", "object-vector-studio-v2", "palette-manager-v2", "text2speech-V2"]);
+      expect(Object.keys(storedContext.tools).sort()).toEqual(["asset-manager-v2", "object-vector-studio-v2", "palette-manager-v2"]);
       await page.locator("#returnToWorkspaceButton").click();
       await expect(page).toHaveURL(/workspace-manager-v2\/index\.html\?hostContextId=workspace-manager-v2-/);
       await expect(page.locator("#activeGameSelect")).toHaveValue("Asteroids");
@@ -1614,7 +1634,7 @@ test.describe("Asset Manager V2", () => {
       expect(savedManifest.tools["asset-manager-v2"].previewImagePath).toBeUndefined();
       expect(savedManifest.tools["asset-manager-v2"].assets["assets.color.background.game"]).toEqual(storedContext.tools["asset-manager-v2"].assets["assets.color.background.game"]);
       expect(savedManifest.tools["asset-manager-v2"].assets["assets.audio.sound.laser"]).toEqual(storedAssetSession.data.assets["assets.audio.sound.laser"]);
-      expect(savedManifest.tools["asset-manager-v2"].assets["assets.color.hud.primary-hud.hud-blue"]).toEqual(storedAssetSession.data.assets["assets.color.hud.primary-hud.hud-blue"]);
+      expect(savedManifest.tools["asset-manager-v2"].assets["assets.color.hud.primary-hud"]).toEqual(storedAssetSession.data.assets["assets.color.hud.primary-hud"]);
       expect(savedManifest.tools["object-vector-studio-v2"].objects.map((object) => object.id)).toContain("object.asteroids.ship");
 
       expect(pageErrors).toEqual([]);

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -10675,13 +10675,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(sessionPurpleSwatch).toBeVisible();
       await sessionPurpleSwatch.click();
       await page.locator("#assetUsageInput").fill("session");
-      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.session.workspace-session-purple");
+      await expect(page.locator("#assetIdInput")).toHaveValue("assets.color.hud.session");
       await page.locator("#addAssetButton").click();
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Added assets\.color\.hud\.session\.workspace-session-purple\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Added assets\.color\.hud\.session\./);
       await expect(page.locator("#statusLog")).toHaveValue(/OK workspace\.tools\.asset-manager-v2 now has 16 validated assets\./);
       const editedAssetSession = await page.evaluate(() => JSON.parse(sessionStorage.getItem("workspace.tools.asset-manager-v2")));
       expect(Object.keys(editedAssetSession.data.assets)).toHaveLength(16);
-      expect(editedAssetSession.data.assets["assets.color.hud.session.workspace-session-purple"]).toMatchObject({
+      expect(editedAssetSession.data.assets["assets.color.hud.session"]).toMatchObject({
         color: {
           hex: "#123456",
           name: "Workspace Session Purple",
@@ -10700,7 +10700,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(Date.parse(editedAssetSession.dirty.changedAt)).not.toBeNaN();
       expect(editedAssetSession.dirty.changedKeys).toEqual(expect.arrayContaining([
         "data.assets",
-        'data.assets["assets.color.hud.session.workspace-session-purple"]'
+        'data.assets["assets.color.hud.session"]'
       ]));
       await page.locator("#returnToWorkspaceButton").click();
       await expect(page).toHaveURL(/workspace-manager-v2\/index\.html\?hostContextId=workspace-manager-v2-/);

tools/asset-manager-v2/js/assetManagerMetadata.js

@@ -235,21 +235,13 @@ export function assetIdForFile(type, fileName, role) {
   return `assets.${normalizedType}.${normalizedRole}.${filenamePartForAssetId(fileName)}`;
 }
 
-export function assetIdForColor(type, role, usage, colorName) {
+export function assetIdForColor(type, role, usage) {
   const normalizedType = dotPathIdSegment(type);
   const normalizedRole = dotPathIdSegment(role);
-  const normalizedUsage = dotPathIdSegment(usage);
-  const normalizedColorName = dotPathIdSegment(colorName);
-  if (!normalizedType || !normalizedRole || !normalizedUsage) {
-    return "";
-  }
-  if (normalizedType === "color" && normalizedRole === "background" && normalizedUsage === "game") {
-    return "assets.color.background.game";
-  }
-  if (!normalizedColorName) {
+  if (!normalizedType || !normalizedRole) {
     return "";
   }
-  return `assets.${normalizedType}.${normalizedRole}.${normalizedUsage}.${normalizedColorName}`;
+  return `assets.${normalizedType}.${normalizedRole}.${dotPathIdSegment(usage) || "game"}`;
 }
 
 export function suggestedRoleForFile(type, fileName) {

tools/asset-manager-v2/js/controls/AssetFormControl.js

@@ -206,7 +206,7 @@ export class AssetFormControl {
       input.addEventListener("change", () => {
         this.updateFileAccept();
         this.updateRoleOptions({ preserveCurrentRole: false });
-        this.clearSelectionFields();
+        this.applyTypeChange({ onFileSelected });
         this.updatePickerMode();
         onChange();
       });
@@ -217,7 +217,7 @@ export class AssetFormControl {
         this.applyDerivedFileValues();
         onFileSelected(this.readValue(), this.selectedFileInfo);
       } else if (this.selectedColorInfo) {
-        this.applyDerivedAssetId(this.selectedColorInfo.name);
+        this.applyDerivedAssetId();
         this.onColorSelected?.(this.readValue(), this.selectedColorInfo);
       } else {
         this.applyDerivedAssetId();
@@ -288,7 +288,6 @@ export class AssetFormControl {
       && value.kind
       && value.path
       && value.role
-      && (value.type !== "color" || value.usage)
       && !this.selectedFileError);
   }
 
@@ -450,7 +449,7 @@ export class AssetFormControl {
     this.selectedFileError = "";
     this.kindValue = "hex";
     this.pathInput.value = colorAssetPath(this.selectedColorInfo.name);
-    this.applyDerivedAssetId(this.selectedColorInfo.name);
+    this.applyDerivedAssetId();
     this.renderColorSwatches();
   }
 
@@ -468,10 +467,48 @@ export class AssetFormControl {
     const fallbackFromId = this.assetIdInput.value.split(".").slice(3).join(".");
     const name = fileName || fallbackFromPath || fallbackFromId;
     this.assetIdInput.value = this.selectedKind() === "color"
-      ? assetIdForColor(this.selectedKind(), this.selectedRole(), this.usageInput.value, name)
+      ? assetIdForColor(this.selectedKind(), this.selectedRole(), this.usageInput.value)
       : assetIdForFile(this.selectedKind(), name, this.selectedRole());
   }
 
+  applyTypeChange({ onFileSelected } = {}) {
+    const type = this.selectedKind();
+    if (type === "color") {
+      this.selectedFileInfo = null;
+      this.selectedFileError = "";
+      this.kindValue = this.selectedColorInfo ? "hex" : "";
+      this.pathInput.value = this.selectedColorInfo ? colorAssetPath(this.selectedColorInfo.name) : "";
+      this.applyDerivedAssetId();
+      if (this.selectedColorInfo) {
+        this.onColorSelected?.(this.readValue(), this.selectedColorInfo);
+      }
+      return;
+    }
+    if (!this.selectedFileInfo) {
+      this.clearSelectionFields();
+      return;
+    }
+    this.selectedColorInfo = null;
+    this.selectedFileInfo = {
+      ...this.selectedFileInfo,
+      type
+    };
+    const suggestedRole = suggestedRoleForFile(type, this.selectedFileInfo.name);
+    if (suggestedRole && [...this.roleSelect.options].some((option) => option.value === suggestedRole)) {
+      this.roleSelect.value = suggestedRole;
+    }
+    this.updateStretchControl();
+    this.selectedFileError = fileMatchesAccept(type, {
+      name: this.selectedFileInfo.name,
+      type: this.selectedFileInfo.mimeType
+    })
+      ? ""
+      : `File ${this.selectedFileInfo.name} is not accepted for ${labelForKind(type)} assets.`;
+    this.kindValue = this.selectedFileInfo.kind;
+    this.applyDerivedFileValues();
+    onFileSelected?.(this.readValue(), this.selectedFileInfo);
+  }
+
   updateStretchControl({ preserveValue = false } = {}) {
     const role = this.selectedRole();
     const supportsStretch = roleSupportsStretchOverride(this.selectedKind(), role);