Add asset selection and details panel to Asset Manager V2 without mutating payload - PR_11_318

Author: DavidQ

docs/dev/codex_commands.md

@@ -166,3 +166,10 @@ PR_11_317
 ```bash
 npx @openai/codex run --model gpt-5.3-codex --reasoning medium "Implement PR_11_317: Clarify Workspace V2 Asset Manager launcher with explicit no-session vs active-session state while preserving session-routed launch behavior."
 ```
+
+---
+PR_11_318
+
+```bash
+npx @openai/codex run --model gpt-5.3-codex --reasoning medium "Implement PR_11_318: Add Asset Manager V2 row selection + details panel with UI-only selection state and no payload mutation."
+```

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Clarify Workspace V2 Asset Manager launcher session/no-session state and prevent no-session confusion - PR 11.317
+Add Asset Manager V2 asset row selection and details panel with UI-only state - PR 11.318

docs/dev/reports/PR_11_318_report.md

@@ -0,0 +1,32 @@
+# PR_11_318 Report
+
+## Purpose
+Add asset selection + details panel behavior in Asset Manager V2 with UI-only state.
+
+## Files Changed
+- `tools/asset-manager-v2/index.html`
+- `tools/asset-manager-v2/index.js`
+- `docs/pr/PR_11_318_ASSET_MANAGER_SELECTION_DETAILS/PLAN_PR.md`
+- `docs/pr/PR_11_318_ASSET_MANAGER_SELECTION_DETAILS/BUILD_PR.md`
+- `docs/dev/reports/PR_11_318_report.md`
+- `docs/dev/codex_commands.md`
+- `docs/dev/commit_comment.txt`
+
+## Implementation Summary
+- Clicking an asset row now selects it.
+- Selected row is visibly highlighted.
+- Selected details panel shows:
+  - id
+  - label
+  - kind
+  - path
+- No selection state uses persistence/session writes.
+- Default non-selection message is preserved exactly:
+  - `Select an asset entry to inspect its session metadata.`
+
+## Validation Commands
+- `node --check tools/asset-manager-v2/index.js` -> **PASS**
+
+## Full Samples Smoke Decision
+- **Skipped** full samples smoke.
+- Reason: change is limited to `asset-manager-v2` UI behavior and validated with targeted syntax check.

docs/pr/PR_11_318_ASSET_MANAGER_SELECTION_DETAILS/BUILD_PR.md

@@ -0,0 +1,18 @@
+# BUILD_PR_11_318
+
+## Implementation
+- Added a minimal selected-asset details panel in `tools/asset-manager-v2/index.html`:
+  - `id`
+  - `label`
+  - `kind`
+  - `path`
+  - default message: `Select an asset entry to inspect its session metadata.`
+- Updated `tools/asset-manager-v2/index.js`:
+  - added UI-only selection state: `selectedAssetId`
+  - clicking an asset row now selects it and updates details panel
+  - selected row is visually highlighted (pressed + border/background)
+  - selection is cleared on empty/invalid states
+  - no selection data is written to payload/session persistence
+
+## Validation
+- `node --check tools/asset-manager-v2/index.js`

docs/pr/PR_11_318_ASSET_MANAGER_SELECTION_DETAILS/PLAN_PR.md

@@ -0,0 +1,19 @@
+# PLAN_PR_11_318
+
+## Purpose
+Add selection UX to Asset Manager V2 so users can select an asset row and inspect explicit details without mutating session payload data.
+
+## Scope
+- `tools/asset-manager-v2/index.html`
+- `tools/asset-manager-v2/index.js`
+- `docs/dev/reports/PR_11_318_report.md`
+- `docs/dev/codex_commands.md`
+- `docs/dev/commit_comment.txt`
+
+## Steps
+1. Add minimal details panel fields for id/label/kind/path.
+2. Track selected asset id in UI-only runtime state.
+3. Highlight selected asset row visually.
+4. Show exact default message when nothing is selected.
+5. Keep selection state non-persistent and payload/session unchanged by selection.
+6. Run targeted syntax validation for changed JS.

package-lock.json

@@ -19,5 +19,27 @@
   },
   "dependencies": {
     "ws": "^8.20.0"
+  },
+  "name": "html-javascript-gaming",
+  "version": "1.0.0",
+  "description": "> Learn, build, and scale 2D → 3D browser games with a structured engine, integrated tools, and progressive samples.",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs",
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ToolboxAid/HTML-JavaScript-Gaming.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ToolboxAid/HTML-JavaScript-Gaming/issues"
+  },
+  "homepage": "https://github.com/ToolboxAid/HTML-JavaScript-Gaming#readme",
+  "devDependencies": {
+    "@playwright/test": "^1.59.1"
   }
 }

package.json

@@ -46,7 +46,13 @@ <h3 id="assetBrowserV2Title">No assets loaded</h3>
               <div id="assetBrowserV2InvalidState" hidden>Asset Manager V2 session data is invalid. Re-open the tool from a valid host session.</div>
               <div id="assetBrowserV2ValidState" hidden>
                 <div id="assetBrowserV2State">Asset Manager V2 loaded the session asset catalog.</div>
-                <pre id="assetBrowserV2Preview" aria-label="Asset Manager V2 preview"></pre>
+                <section aria-label="Asset Manager V2 selected asset details">
+                  <p id="assetBrowserV2DetailsMessage">Select an asset entry to inspect its session metadata.</p>
+                  <p><strong>id:</strong> <span id="assetBrowserV2DetailId">-</span></p>
+                  <p><strong>label:</strong> <span id="assetBrowserV2DetailLabel">-</span></p>
+                  <p><strong>kind:</strong> <span id="assetBrowserV2DetailKind">-</span></p>
+                  <p><strong>path:</strong> <span id="assetBrowserV2DetailPath">-</span></p>
+                </section>
               </div>
             </section>
             <aside class="asset-manager-v2-panel" data-menu-workspace>

tools/asset-manager-v2/index.html

@@ -9,6 +9,7 @@ class AssetBrowserV2 {
     this.openSvgAssetStudioV2 = this.openSvgAssetStudioV2.bind(this);
     this.addAssetEntry = this.addAssetEntry.bind(this);
     this.currentSessionContext = null;
+    this.selectedAssetId = "";
     this.handleNavigationState = this.handleNavigationState.bind(this);
     window.addEventListener("popstate", this.handleNavigationState);
     window.addEventListener("pageshow", this.handleNavigationState);
@@ -127,6 +128,26 @@ class AssetBrowserV2 {
     document.getElementById("assetManagerV2ActionStatus").textContent = message;
   }
 
+  clearSelectedAssetDetails() {
+    document.getElementById("assetBrowserV2DetailsMessage").textContent = "Select an asset entry to inspect its session metadata.";
+    document.getElementById("assetBrowserV2DetailId").textContent = "-";
+    document.getElementById("assetBrowserV2DetailLabel").textContent = "-";
+    document.getElementById("assetBrowserV2DetailKind").textContent = "-";
+    document.getElementById("assetBrowserV2DetailPath").textContent = "-";
+  }
+
+  renderSelectedAssetDetails(assetEntry) {
+    if (!assetEntry) {
+      this.clearSelectedAssetDetails();
+      return;
+    }
+    document.getElementById("assetBrowserV2DetailsMessage").textContent = "Selected asset details.";
+    document.getElementById("assetBrowserV2DetailId").textContent = assetEntry.id.trim();
+    document.getElementById("assetBrowserV2DetailLabel").textContent = assetEntry.label.trim();
+    document.getElementById("assetBrowserV2DetailKind").textContent = assetEntry.kind.trim();
+    document.getElementById("assetBrowserV2DetailPath").textContent = assetEntry.path.trim();
+  }
+
   normalizedAssetEntryFromForm() {
     const id = typeof document.getElementById("assetManagerV2AddId").value === "string" ? document.getElementById("assetManagerV2AddId").value.trim() : "";
     const label = typeof document.getElementById("assetManagerV2AddLabel").value === "string" ? document.getElementById("assetManagerV2AddLabel").value.trim() : "";
@@ -150,6 +171,17 @@ class AssetBrowserV2 {
     document.getElementById("assetManagerV2AddPath").value = "";
   }
 
+  selectedAssetEntryFromCatalogEntries(entries) {
+    if (!Array.isArray(entries)) {
+      return null;
+    }
+    if (typeof this.selectedAssetId !== "string" || !this.selectedAssetId.trim()) {
+      return null;
+    }
+    const selectedAssetEntry = entries.find((entry) => entry && typeof entry === "object" && !Array.isArray(entry) && typeof entry.id === "string" && entry.id.trim() === this.selectedAssetId);
+    return selectedAssetEntry || null;
+  }
+
   addAssetEntry() {
     if (!this.currentSessionContext || typeof this.currentSessionContext !== "object" || Array.isArray(this.currentSessionContext)) {
       this.setActionStatus("Add blocked. No valid Asset Manager V2 session is loaded.");
@@ -372,6 +404,10 @@ class AssetBrowserV2 {
     document.getElementById("assetBrowserV2InvalidState").hidden = true;
     document.getElementById("assetBrowserV2ValidState").hidden = false;
     this.currentSessionContext = this.cloneSessionValue(sessionContext);
+    const selectedAssetEntry = this.selectedAssetEntryFromCatalogEntries(assetCatalog.entries);
+    if (!selectedAssetEntry) {
+      this.selectedAssetId = "";
+    }
 
     document.getElementById("assetBrowserV2List").replaceChildren();
     assetCatalog.entries.forEach((entry) => {
@@ -386,28 +422,23 @@ class AssetBrowserV2 {
       assetMeta.textContent = `${entry.kind.trim()} | ${entry.path.trim()}`;
       assetItem.append(assetName, assetMeta);
       removeButton.textContent = `Remove ${entry.id.trim()}`;
+      const entryIsSelected = typeof this.selectedAssetId === "string" && this.selectedAssetId.trim() === entry.id.trim();
+      assetItem.setAttribute("aria-pressed", entryIsSelected ? "true" : "false");
+      assetItem.style.borderWidth = entryIsSelected ? "2px" : "";
+      assetItem.style.borderStyle = entryIsSelected ? "solid" : "";
+      assetItem.style.borderColor = entryIsSelected ? "#1f6feb" : "";
+      assetItem.style.backgroundColor = entryIsSelected ? "#dbeafe" : "";
       assetItem.addEventListener("click", () => {
-        document.getElementById("assetBrowserV2Preview").textContent = JSON.stringify(
-          {
-            id: entry.id.trim(),
-            label: entry.label.trim(),
-            kind: entry.kind.trim(),
-            path: entry.path.trim()
-          },
-          null,
-          2
-        );
+        this.selectedAssetId = entry.id.trim();
+        this.renderCatalog(assetCatalog, sessionContext);
       });
       removeButton.addEventListener("click", () => {
         this.removeAssetEntryById(entry.id.trim());
       });
       assetRow.append(assetItem, removeButton);
       document.getElementById("assetBrowserV2List").appendChild(assetRow);
     });
-
-    document.getElementById("assetBrowserV2Preview").textContent = assetCatalog.entries.length === 0
-      ? "No assets are available in this session catalog."
-      : "Select an asset entry to inspect its session metadata.";
+    this.renderSelectedAssetDetails(this.selectedAssetEntryFromCatalogEntries(assetCatalog.entries));
   }
 
   renderMissing(message) {
@@ -422,7 +453,8 @@ class AssetBrowserV2 {
     document.getElementById("assetBrowserV2InvalidState").hidden = true;
     document.getElementById("assetBrowserV2ValidState").hidden = true;
     document.getElementById("assetBrowserV2List").replaceChildren();
-    document.getElementById("assetBrowserV2Preview").textContent = "";
+    this.selectedAssetId = "";
+    this.clearSelectedAssetDetails();
     this.currentSessionContext = null;
     this.setActionStatus("No asset action yet.");
   }
@@ -439,7 +471,8 @@ class AssetBrowserV2 {
     document.getElementById("assetBrowserV2InvalidState").hidden = false;
     document.getElementById("assetBrowserV2ValidState").hidden = true;
     document.getElementById("assetBrowserV2List").replaceChildren();
-    document.getElementById("assetBrowserV2Preview").textContent = "";
+    this.selectedAssetId = "";
+    this.clearSelectedAssetDetails();
     this.currentSessionContext = null;
     this.setActionStatus("No asset action yet.");
   }