Finish Object Vector Studio V2 UI control surface for review and preserve World read-only object references - PR_26132_017-object-vector-studio-v2-ui-finish-pass

Author: DavidQ

docs/dev/reports/playwright_v8_coverage.txt

@@ -20,11 +20,11 @@ Exercised tool entry points detected:
 (0%) Workspace Manager - not exercised by this Playwright run
 
 Changed runtime JS files covered:
-(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 100/100; executed functions 4/5
-(92%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 2805/2805; executed functions 327/355
+(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 101/101; executed functions 4/5
+(91%) tools/object-vector-studio-v2/js/controls/ActionNavControl.js - executed lines 78/78; executed functions 10/11
+(92%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 2862/2862; executed functions 328/356
 (95%) tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js - executed lines 406/406; executed functions 52/55
 (98%) src/engine/rendering/ObjectVectorRuntimeAssetService.js - executed lines 919/919; executed functions 105/107
-(100%) src/engine/rendering/index.js - executed lines 12/12; executed functions 1/1
 
 Files with executed line/function counts where available:
 (2%) src/engine/input/ActionInputService.js - executed lines 397/397; executed functions 1/51
@@ -170,7 +170,7 @@ Files with executed line/function counts where available:
 (80%) src/engine/persistence/StorageService.js - executed lines 49/49; executed functions 4/5
 (80%) tools/asset-manager-v2/js/controls/AccordionSection.js - executed lines 27/27; executed functions 4/5
 (80%) tools/asset-manager-v2/js/controls/AssetFormControl.js - executed lines 563/563; executed functions 49/61
-(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 100/100; executed functions 4/5
+(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 101/101; executed functions 4/5
 (80%) tools/palette-manager-v2/modules/PaletteHistoryStack.js - executed lines 54/54; executed functions 8/10
 (80%) tools/preview-generator-v2/controls/AccordionSection.js - executed lines 31/31; executed functions 4/5
 (80%) tools/preview-generator-v2/PreviewGeneratorV2Logger.js - executed lines 19/19; executed functions 4/5
@@ -199,11 +199,11 @@ Files with executed line/function counts where available:
 (90%) tools/palette-manager-v2/modules/PaletteValidationService.js - executed lines 88/88; executed functions 9/10
 (90%) tools/text2speech-V2/js/controls/ActionNavControl.js - executed lines 117/117; executed functions 19/21
 (90%) tools/text2speech-V2/js/TextToSpeechToolApp.js - executed lines 807/807; executed functions 62/69
-(91%) tools/object-vector-studio-v2/js/controls/ActionNavControl.js - executed lines 75/75; executed functions 10/11
+(91%) tools/object-vector-studio-v2/js/controls/ActionNavControl.js - executed lines 78/78; executed functions 10/11
 (91%) tools/toolRegistry.js - executed lines 526/526; executed functions 10/11
 (91%) tools/workspace-manager-v2/js/services/WorkspaceManagerV2ContextService.js - executed lines 1598/1598; executed functions 145/159
 (92%) tools/object-vector-studio-v2/js/controls/ToolStarterShellControl.js - executed lines 112/112; executed functions 11/12
-(92%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 2805/2805; executed functions 327/355
+(92%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 2862/2862; executed functions 328/356
 (93%) tools/asset-manager-v2/js/services/WorkspaceBridge.js - executed lines 305/305; executed functions 25/27
 (93%) tools/session-inspector-v2/js/SessionInspectorV2App.js - executed lines 337/337; executed functions 42/45
 (93%) tools/text2speech-V2/js/controls/QueueControl.js - executed lines 122/122; executed functions 26/28
@@ -299,7 +299,7 @@ Changed JS files considered:
 (50%) games/Asteroids/index.js - changed JS file with browser V8 coverage
 (52%) games/Asteroids/game/AsteroidsGameScene.js - changed JS file with browser V8 coverage
 (80%) tools/object-vector-studio-v2/js/bootstrap.js - changed JS file with browser V8 coverage
+(91%) tools/object-vector-studio-v2/js/controls/ActionNavControl.js - changed JS file with browser V8 coverage
 (92%) tools/object-vector-studio-v2/js/ToolStarterApp.js - changed JS file with browser V8 coverage
 (95%) tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js - changed JS file with browser V8 coverage
 (98%) src/engine/rendering/ObjectVectorRuntimeAssetService.js - changed JS file with browser V8 coverage
-(100%) src/engine/rendering/index.js - changed JS file with browser V8 coverage

docs/pr/PR_26132_017-object-vector-studio-v2-ui-finish-pass.md

@@ -0,0 +1,81 @@
+# PR_26132_017-object-vector-studio-v2-ui-finish-pass
+
+## Scope
+
+Finishes Object Vector Studio V2 to a control-reviewable UI state without adding new major feature systems or changing the Object Vector schema. Adds the requested World Vector Studio V2 read-only Object Vector asset reference note.
+
+## Changes
+
+- Grouped Object Vector Studio V2 controls into reviewable Object Actions, Library / Detach, and State Actions sections.
+- Added visible disabled-control reason text and per-control disabled titles/data reasons.
+- Made selected object, selected shape, selected state, selected frame, and selection count explicit in the center work area.
+- Clarified Object Details as read-only object metadata plus schema-valid editable shape fields only.
+- Kept JSON Details readable and scrollable and verified Status Log remains the bottom-right scrollable section.
+- Clarified palette behavior as read-only session/workspace input; swatches apply color without mutating palette data.
+- Added visible tooltips for icon-capable shape/tool controls.
+- Added World Vector Studio V2 UI/help/README notes that Object Vector Studio V2 asset references are read-only and must not be mutated there.
+- Preserved Duplicate As Local as the only Object Vector detachment path for inherited source data.
+
+## Validation
+
+Playwright impacted: Yes.
+
+Commands run:
+
+- `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`
+- `node --check tools/object-vector-studio-v2/js/bootstrap.js`
+- `node --check tools/object-vector-studio-v2/js/controls/ActionNavControl.js`
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "World Vector Studio V2 and Object Vector Studio V2 copied|Object Vector Studio V2 layout shell|Object Vector Studio V2 animation states|Object Vector Studio V2 asset library"`
+- `npm run test:workspace-v2`
+- `git diff --check`
+
+Result:
+
+- Targeted Object/World Vector UI validation passed: 4 passed.
+- Full Workspace Manager V2 suite passed: 45 passed.
+- Playwright V8 coverage generated at `docs/dev/reports/playwright_v8_coverage.txt`.
+- Full samples smoke test skipped per request.
+
+## Playwright Coverage
+
+Validates:
+
+- Object Vector Studio V2 visible control groups and button grouping.
+- Disabled control reason display and disabled reason attributes.
+- Selected object, shape, state, and frame visibility.
+- Palette read-only session/workspace behavior.
+- JSON Details scrollability and Status Log bottom-right scrollability.
+- World Vector Studio V2 read-only Object Vector asset reference rule in the tool surface.
+
+Expected pass behavior:
+
+- Controls are visible, grouped, explain disabled states, and show current selections clearly.
+- Palette remains read-only runtime/session data.
+- World Vector Studio V2 only documents and surfaces read-only Object Vector references.
+
+Expected fail behavior:
+
+- Missing payload, missing palette, missing selection, and invalid state/frame conditions keep relevant controls disabled with visible/actionable reasons.
+
+## Manual Validation
+
+1. Open `tools/object-vector-studio-v2/index.html`.
+2. Confirm Object Actions, Library / Detach, and State Actions are visible in the Object accordion.
+3. Confirm disabled buttons show a disabled reason and the visible disabled-control message explains the missing payload/selection state.
+4. Import a valid Object Vector payload with a runtime palette in session/workspace.
+5. Select objects, shapes, states, and frames and confirm the center selection summary updates.
+6. Confirm Palette says it is read-only session/workspace input.
+7. Open `tools/world-vector-studio-v2/index.html` and confirm the Object Vector asset reference rule is read-only and points users to Duplicate As Local for detachment.
+
+Expected outcome:
+
+- Object Vector Studio V2 is control-reviewable, with clear grouping, current selection visibility, readable JSON/status panels, and no palette mutation claim.
+- World Vector Studio V2 makes the read-only Object Vector asset boundary explicit.
+
+## Out Of Scope
+
+- No schema changes.
+- No sample JSON changes.
+- No new major feature systems.
+- No full samples smoke test.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1152,6 +1152,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         await expect(page.locator(".tool-starter__tool__menu")).toBeVisible();
         await expect(page.locator(".tool-starter__workspace__menu")).toBeHidden();
         if (tool.id === "world-vector-studio-v2") {
+          await expect(page.locator("#worldVectorStudioV2ObjectReferenceRule")).toContainText("Object Vector Studio V2 asset references are read-only");
+          await expect(page.locator("#worldVectorStudioV2ObjectReferenceRule")).toContainText("must not mutate Object Vector Studio V2 source assets");
+          await expect(page.locator("#worldVectorStudioV2ObjectReferenceRule")).toContainText("Duplicate As Local");
           await page.locator("#sourceInput").fill(`${tool.name} launch coverage`);
           await page.locator("#toolExportButton").click();
           await expect(page.locator("#inspectorOutput")).toContainText(`"toolId": "${tool.id}"`);
@@ -1196,8 +1199,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("No objects loaded");
       await expect(page.locator("#objectVectorStudioV2ObjectCount")).toHaveValue("0 objects");
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toBeDisabled();
+      await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toHaveAttribute("data-disabled-reason", "Disabled until a schema-valid object is selected.");
       await expect(page.locator("#objectVectorStudioV2DeleteObjectButton")).toBeDisabled();
       await expect(page.locator("#objectVectorStudioV2FlattenObjectButton")).toBeDisabled();
+      await expect(page.locator("#objectVectorStudioV2DisabledReason")).toContainText("load a schema-valid payload");
+      await expect(page.locator("#objectVectorStudioV2DisabledReason")).toContainText("select an object");
+      await expect(page.locator("[data-control-group] > h3")).toHaveText(["Object Actions", "Library / Detach", "State Actions"]);
+      await expect(page.locator("[data-control-group='object-actions'] button")).toHaveText(["Add", "Create Template", "Rename", "Duplicate", "Delete", "Flatten"]);
+      await expect(page.locator("[data-control-group='library-detach-actions'] button")).toHaveText(["Duplicate As Local", "Create Library Asset"]);
+      await expect(page.locator("[data-control-group='library-detach-actions']")).toContainText("Duplicate As Local is the only detachment path");
       await page.locator("#objectVectorStudioV2ObjectNameInput").fill("Blocked Object");
       await page.locator("#objectVectorStudioV2AddObjectButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL Add object blocked: load a schema-valid Object Vector Studio V2 payload before adding objects\./);
@@ -1316,7 +1326,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await writeFile(validPayloadPath, JSON.stringify(validPayload, null, 2), "utf8");
       await page.locator("#objectVectorStudioV2ImportJsonInput").setInputFiles(validPayloadPath);
       await expect(page.locator("#objectVectorStudioV2PaletteGate")).toHaveValue("Palette loaded");
-      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("Palette arcade-primary: 2 swatches.");
+      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("Palette arcade-primary: 2 read-only swatches.");
+      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("not stored in Object Vector Studio V2 JSON");
       const swatchState = await page.locator(".object-vector-studio-v2__palette-swatch").evaluateAll((swatches) => swatches.map((swatch) => {
         const rect = swatch.getBoundingClientRect();
         return {
@@ -1335,7 +1346,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ObjectCount")).toHaveValue("18 objects");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Asteroids Ship");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Ship entity metadata framework");
-      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected item visible: Asteroids Ship");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Read-only Object Metadata");
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected Object: Asteroids Ship");
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected Shape: none");
+      await expect(page.locator("#objectVectorStudioV2DuplicateAsLocalButton")).toBeDisabled();
+      await expect(page.locator("#objectVectorStudioV2DuplicateAsLocalButton")).toHaveAttribute("data-disabled-reason", /inherits from a base object/);
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"name": "Asteroids Ship"');
@@ -1353,6 +1368,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"selectedShape"');
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"type": "rectangle"');
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Rectangle primitive metadata");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Editable fields below are limited to schema-valid geometry");
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected Shape: rectangle-1 (rectangle)");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Created rectangle shape rectangle-1 on Asteroids Ship\./);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Render mode svg-work-surface: rendered Asteroids Ship with 1 visible shapes; capture mode none\./);
 
@@ -1386,10 +1403,26 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']").click({ modifiers: ["Shift"] });
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='rectangle-1']")).toHaveClass(/is-selected/);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']")).toHaveClass(/is-selected/);
-      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("2 shape selection");
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selection Count: 2 shapes");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"selectedShapeIds"');
       await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='rectangle-1']").click();
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Rectangle Geometry");
+      const reviewLayoutState = await page.evaluate(() => {
+        const jsonContent = document.querySelector("#objectVectorStudioV2JsonDetailsContent");
+        const statusSection = document.querySelector("#statusLogContent").closest(".accordion-v2");
+        const rightPanel = document.querySelector(".tool-starter__panel--right");
+        const rightSections = Array.from(rightPanel.querySelectorAll(":scope > .accordion-v2"));
+        return {
+          jsonScrollable: getComputedStyle(jsonContent).overflowY === "auto" || getComputedStyle(jsonContent).overflowY === "scroll",
+          statusIsBottomRight: rightSections.at(-1) === statusSection,
+          statusScrollable: getComputedStyle(document.querySelector("#statusLog")).overflowY === "auto" || getComputedStyle(document.querySelector("#statusLog")).overflowY === "scroll"
+        };
+      });
+      expect(reviewLayoutState).toEqual({
+        jsonScrollable: true,
+        statusIsBottomRight: true,
+        statusScrollable: true
+      });
 
       await page.locator("#objectVectorStudioV2GridSnapButton").click();
       await expect(page.locator("#objectVectorStudioV2GridSnapButton")).toHaveAttribute("aria-pressed", "true");
@@ -1764,6 +1797,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='idle']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='idle-frame-1']")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"id": "idle"');
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected State: idle");
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected Frame: idle-frame-1");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Created state Idle with frame idle-frame-1\./);
 
       await page.locator("#objectVectorStudioV2DuplicateFrameButton").click();
@@ -1983,6 +2018,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Base Object");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("base-ship");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Base shapes/states are read-only until Duplicate As Local");
+      await expect(page.locator("#objectVectorStudioV2DuplicateAsLocalButton")).toBeEnabled();
+      await expect(page.locator("#objectVectorStudioV2DisabledReason")).toContainText("All current Object Vector Studio V2 controls are reviewable");
 
       await page.locator("#objectVectorStudioV2RuntimePreviewButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("data-runtime-preview", "true");
@@ -5063,7 +5100,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator(".tool-starter__workspace__menu button")).toHaveText(["Return to Workspace"]);
       await expect(page.locator(".tool-starter__tool__menu")).toBeHidden();
       await expect(page.locator("#objectVectorStudioV2PaletteGate")).toHaveValue("Palette loaded");
-      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("10 swatches.");
+      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("10 read-only swatches.");
+      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("not stored in Object Vector Studio V2 JSON");
       await expect(page.locator("#objectVectorStudioV2ObjectCount")).toHaveValue("6 objects");
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("Asteroids Ship");
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("Large Asteroid");