Fix Object Vector Studio V2 dirty state tracking for saveable edits - PR_26133_025-object-vector-studio-dirty-state-save-tracking

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,13 +1,13 @@
-# PR_26133_023 Playwright V8 Coverage Report
+# PR_26133_025 Playwright V8 Coverage Report
 
-Task: PR_26133_023-font-assets-standardization
+Task: PR_26133_025-object-vector-studio-dirty-state-save-tracking
 Date: 2026-05-13
 
 ## Result
 
 PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
-- Test result: 48 passed.
+- Test result: 49 passed.
 - Coverage source: Playwright/Chromium built-in V8 coverage.
 - Thresholds: none enforced.
 - Coverage is advisory for this PR.
@@ -21,21 +21,19 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 - Tool Template V2: not exercised by this Playwright run.
 - Workspace Manager: not exercised by this Playwright run.
 
-## Changed Runtime JS Coverage Notes
+## Changed Runtime JS Coverage
 
-PR_26133_023 is a font asset standardization change. The intended runtime surface is CSS, manifest path data, font files, and Playwright validation updates; no Object Vector Studio V2 runtime JavaScript implementation was changed by this PR.
-
-The generated V8 coverage text still lists Object Vector Studio V2 JavaScript from the current HEAD comparison baseline:
-
-- `tools/object-vector-studio-v2/js/bootstrap.js`: 83% function coverage, 107/107 reported lines executed.
-- `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 93% function coverage, 4096/4096 reported lines executed.
-- `tools/object-vector-studio-v2/playwright.config.mjs`: advisory warning, not collected by browser V8 coverage.
+- `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 94% function coverage, 4171/4171 reported lines executed, 450/481 reported functions executed.
 
 ## PR-Specific Coverage/Validation Relevance
 
-- Object Vector Studio V2 Nerd Font loading is validated through Workspace V2 Playwright font fetch and UI flow coverage.
-- Asteroids Vector Battle font loading is validated through Workspace V2 Playwright CSS/font fetch checks plus `document.fonts.load()` and `document.fonts.check()`.
-- Legacy font path behavior is validated by direct path scans and Asteroids generated URL 404 coverage.
-- No additional V8 threshold was introduced for this asset-path-only PR.
+The new Workspace Manager V2 Playwright coverage exercises the Object Vector Studio V2 workspace dirty contract end to end:
+
+- clean startup session state,
+- selection/preview actions remaining clean,
+- every requested persisted edit category marking the Object Vector session dirty,
+- Workspace Manager Save becoming enabled after return,
+- invalid save preserving dirty state without manifest writes,
+- successful save clearing dirty state only after verified write-back.
 
 Generated source report: `docs/dev/reports/playwright_v8_coverage_report.txt`.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,37 +1,40 @@
-# PR_26133_023 Workspace V2 Validation
+# PR_26133_025 Workspace V2 Validation
 
-Task: PR_26133_023-font-assets-standardization
+Task: PR_26133_025-object-vector-studio-dirty-state-save-tracking
 Date: 2026-05-13
 
 ## Result
 
 PASS - `npm run test:workspace-v2`
 
-- 48 Playwright tests passed.
-- Object Vector Studio V2, Workspace Manager V2, Asset Manager V2, Asteroids, and related workspace flows completed with no reported runtime console errors.
+- 49 Playwright tests passed.
+- Focused Object Vector Studio V2 dirty-state test passed before the full run.
+- No console/runtime page errors were reported by the new dirty-state coverage.
 - No sample JSON files were changed.
 
-## Targeted Checks
+## Targeted Object Vector Studio V2 Verification
 
-- PASS - Nerd Font assets were moved into the shared font asset tree at `src/assets/fonts/0xProtoNerdFont`.
-- PASS - Object Vector Studio V2 CSS now loads `0xProtoNerdFontMono-Regular.ttf` from the shared font asset tree.
-- PASS - Workspace V2 Playwright coverage includes a direct Nerd Font fetch check at the new URL and verifies the response succeeds.
-- PASS - `vector_battle.ttf` was moved into the shared font asset tree at `src/assets/fonts/vector_battle/vector_battle.ttf`.
-- PASS - Asteroids manifest data now points at the shared `vector_battle.ttf` path.
-- PASS - Shared Vector Battle CSS now loads the font from `/src/assets/fonts/vector_battle/vector_battle.ttf`.
-- PASS - Workspace V2 Playwright validation fetches the Asteroids font CSS and font file, waits for `VectorBattle` to load, and confirms the legacy generated asset URL 404s.
-- PASS - Direct legacy font path scans returned no active matches outside generated PR report artifacts.
+- PASS - Object Vector Studio V2 workspace launches start with `workspace.tools.object-vector-studio-v2.dirty.isDirty=false`.
+- PASS - Selection-only changes do not mark the workspace tool session dirty.
+- PASS - Preview-only actions tested through zoom, pan, and grid visibility do not change persisted Object Vector data or dirty state.
+- PASS - Persisted object edits mark `workspace.tools.object-vector-studio-v2` dirty.
+- PASS - Persisted object geometry edits mark dirty.
+- PASS - Persisted object transform edits mark dirty.
+- PASS - Persisted palette/color application marks dirty.
+- PASS - Shape add, visibility, lock/unlock, and delete edits mark dirty.
+- PASS - Object add, rename, duplicate, and delete edits mark dirty.
+- PASS - Returning to Workspace Manager V2 enables Save and marks the Object Vector Studio V2 tile dirty.
+- PASS - Failed invalid save keeps dirty state active and does not write a manifest.
+- PASS - Successful save clears dirty state only after verified manifest write-back.
 
-## Additional Validation
+## Commands
 
-- PASS - `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
-- PASS - `node --check tests/playwright/tools/AssetManagerV2.spec.mjs`
 - PASS - `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`
-- PASS - `node --check tools/object-vector-studio-v2/js/bootstrap.js`
-- PASS - `node --check games/Asteroids/entities/Asteroid.js`
-- PASS - `node -e "JSON.parse(require('fs').readFileSync('games/Asteroids/game.manifest.json','utf8'))"`
-- PASS - `git diff --check` completed with line-ending warnings only and no whitespace errors.
+- PASS - `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- PASS - `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "tracks Object Vector Studio V2 dirty state"`
+- PASS - `npm run test:workspace-v2`
+- PASS - `git diff --check HEAD` completed with line-ending warnings only.
 
 ## Notes
 
-The validation run generated temporary Asteroids file noise during test execution; those generated edits were cleaned before final reporting. The final Asteroids manifest diff is limited to the shared Vector Battle font path change.
+The full workspace-v2 run produced transient Asteroids manifest write-back output from existing save tests. That generated file noise was restored after validation; the final tracked diff contains only Object Vector Studio V2 dirty tracking and its Playwright test coverage.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -576,6 +576,31 @@ async function dirtyPaletteToolState(page, swatch) {
   }, swatch);
 }
 
+async function readObjectVectorWorkspaceSession(page) {
+  return await page.evaluate(() => {
+    const session = JSON.parse(sessionStorage.getItem("workspace.tools.object-vector-studio-v2"));
+    return {
+      dataText: JSON.stringify(session.data),
+      dirty: session.dirty,
+      objectCount: Array.isArray(session.data?.objects) ? session.data.objects.length : 0,
+      session
+    };
+  });
+}
+
+async function resetObjectVectorWorkspaceDirty(page) {
+  await page.evaluate(() => {
+    const session = JSON.parse(sessionStorage.getItem("workspace.tools.object-vector-studio-v2"));
+    session.dirty = {
+      isDirty: false,
+      reason: null,
+      changedAt: null,
+      changedKeys: []
+    };
+    sessionStorage.setItem("workspace.tools.object-vector-studio-v2", JSON.stringify(session));
+  });
+}
+
 async function installMissingGamePreviewRepoPicker(page) {
   await page.addInitScript(() => {
     function makeDirectoryHandle(name, children = {}, path = name) {
@@ -7191,6 +7216,173 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     }
   });
 
+  test("tracks Object Vector Studio V2 dirty state through persisted edits and save outcomes", async ({ page }) => {
+    const server = await openWorkspaceManagerV2(page);
+    const pageErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+
+    try {
+      await selectMockRepo(page);
+      await page.locator("#activeGameSelect").selectOption("Asteroids");
+      await expectWorkspaceReturnRehydrated(page);
+      await expect(page.locator("#saveWorkspaceButton")).toBeDisabled();
+
+      await page.locator('[data-workspace-tool-id="object-vector-studio-v2"]').click();
+      await expect(page).toHaveURL(/object-vector-studio-v2\/index\.html.*launch=workspace/);
+      await expect(page.locator("#objectVectorStudioV2ObjectsCount")).toHaveText("(6 obj, 3 shapes)");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Loaded Object Vector Studio V2 schema payload from workspace\.tools\.object-vector-studio-v2: 6 objects\./);
+
+      let objectVectorSession = await readObjectVectorWorkspaceSession(page);
+      expect(objectVectorSession.dirty).toEqual({
+        isDirty: false,
+        reason: null,
+        changedAt: null,
+        changedKeys: []
+      });
+      let lastDataText = objectVectorSession.dataText;
+
+      async function expectObjectVectorDirtyAfter(label, action, { resetDirty = true } = {}) {
+        await action();
+        await expect.poll(async () => {
+          const session = await readObjectVectorWorkspaceSession(page);
+          return session.dirty.isDirty === true && session.dataText !== lastDataText;
+        }, { message: `${label} should mark Object Vector Studio V2 workspace data dirty` }).toBe(true);
+        const dirtySession = await readObjectVectorWorkspaceSession(page);
+        expect(dirtySession.dirty).toMatchObject({
+          isDirty: true,
+          reason: "object-vector-updated"
+        });
+        expect(Date.parse(dirtySession.dirty.changedAt)).not.toBeNaN();
+        expect(dirtySession.dirty.changedKeys).toEqual(expect.arrayContaining(["data.objects"]));
+        lastDataText = dirtySession.dataText;
+        if (resetDirty) {
+          await resetObjectVectorWorkspaceDirty(page);
+        }
+        return dirtySession;
+      }
+
+      await page.locator('.object-vector-studio-v2__object-tile[data-object-id="object.asteroids.asteroid.large"] .object-vector-studio-v2__object-select').click();
+      await page.locator("#objectVectorStudioV2ZoomInButton").click();
+      await page.locator("#objectVectorStudioV2PanDownButton").click();
+      await page.locator("#objectVectorStudioV2GridRenderButton").click();
+      objectVectorSession = await readObjectVectorWorkspaceSession(page);
+      expect(objectVectorSession.dataText).toBe(lastDataText);
+      expect(objectVectorSession.dirty.isDirty).toBe(false);
+
+      await expectObjectVectorDirtyAfter("object tag edit", async () => {
+        await page.locator("#objectVectorStudioV2ObjectTagInput").fill("dirty-state");
+        await page.locator("#objectVectorStudioV2AddTagButton").click();
+      });
+      await expectObjectVectorDirtyAfter("object geometry edit", async () => {
+        await page.locator("#objectVectorStudioV2ObjectDetails [data-shape-geometry-field='points'][data-polygon-point-index='0'][data-polygon-point-axis='x']").fill("11");
+        await page.locator("#objectVectorStudioV2ApplyGeometryButton").click();
+      });
+      await expectObjectVectorDirtyAfter("object transform edit", async () => {
+        await page.locator("#objectVectorStudioV2MoveXInput").fill("5");
+        await page.locator("#objectVectorStudioV2MoveYInput").fill("-5");
+        await page.locator("#objectVectorStudioV2MoveShapeButton").click();
+      });
+      await expectObjectVectorDirtyAfter("palette color edit", async () => {
+        await page.locator("#objectVectorStudioV2PaletteSummary [data-palette-color]").first().click();
+      });
+      await expectObjectVectorDirtyAfter("shape add edit", async () => {
+        await page.locator("[data-shape-tool='rectangle']").click();
+      });
+      await expectObjectVectorDirtyAfter("shape visibility edit", async () => {
+        const selectedShapeId = await page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeId);
+        await page.locator(`[data-shape-visibility-id="${selectedShapeId}"]`).click();
+      });
+      await expectObjectVectorDirtyAfter("shape lock edit", async () => {
+        await page.evaluate(() => window.__objectVectorStudioV2App.toggleSelectedShapeLock());
+      });
+      await expectObjectVectorDirtyAfter("shape unlock edit", async () => {
+        await page.evaluate(() => window.__objectVectorStudioV2App.toggleSelectedShapeLock());
+      });
+      await expectObjectVectorDirtyAfter("shape delete edit", async () => {
+        const selectedShapeId = await page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeId);
+        await page.locator(`[data-shape-delete-id="${selectedShapeId}"]`).click();
+      });
+      await expectObjectVectorDirtyAfter("object add edit", async () => {
+        await page.locator("#objectVectorStudioV2ObjectNameInput").fill("Dirty Probe");
+        await page.locator("#objectVectorStudioV2AddObjectButton").click();
+      });
+      await expectObjectVectorDirtyAfter("object rename edit", async () => {
+        await page.locator("#objectVectorStudioV2ObjectNameInput").fill("Dirty Probe Renamed");
+        await page.locator("#objectVectorStudioV2RenameObjectButton").click();
+      });
+      await expectObjectVectorDirtyAfter("object duplicate edit", async () => {
+        await page.locator("#objectVectorStudioV2DuplicateObjectButton").click();
+      });
+      const validDirtyObjectVectorSession = await expectObjectVectorDirtyAfter("object delete edit", async () => {
+        const selectedObjectId = await page.evaluate(() => window.__objectVectorStudioV2App.selectedObjectId);
+        await page.locator(`[data-object-control="delete"][data-object-control-id="${selectedObjectId}"]`).click();
+      }, { resetDirty: false });
+
+      await page.locator("#returnToWorkspaceButton").click();
+      await expect(page).toHaveURL(/workspace-manager-v2\/index\.html\?hostContextId=workspace-manager-v2-/);
+      await expectWorkspaceReturnedFromTool(page, { dirty: true });
+      const objectVectorTile = page.locator('[data-workspace-tool-id="object-vector-studio-v2"]');
+      await expect(objectVectorTile).toHaveAttribute("data-workspace-tool-dirty", "true");
+      await expect(page.locator("#saveWorkspaceButton")).toBeEnabled();
+
+      await page.evaluate(() => {
+        const session = JSON.parse(sessionStorage.getItem("workspace.tools.object-vector-studio-v2"));
+        session.data.unexpected = "blocked";
+        session.dirty = {
+          isDirty: true,
+          reason: "object-vector-invalid-save",
+          changedAt: new Date().toISOString(),
+          changedKeys: ["data.objects.invalid"]
+        };
+        sessionStorage.setItem("workspace.tools.object-vector-studio-v2", JSON.stringify(session));
+        window.__workspaceManagerV2App.syncLifecycleControls();
+      });
+      await page.locator("#saveWorkspaceButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Save blocked: Generated Workspace Manager V2 manifest failed schema validation:/);
+      const failedSaveState = await page.evaluate(() => ({
+        dirty: JSON.parse(sessionStorage.getItem("workspace.tools.object-vector-studio-v2")).dirty,
+        writes: JSON.parse(sessionStorage.getItem("workspace.repo.manifestWrites") || "[]")
+      }));
+      expect(failedSaveState.dirty).toMatchObject({
+        isDirty: true,
+        reason: "object-vector-invalid-save"
+      });
+      expect(failedSaveState.writes).toEqual([]);
+      await expect(page.locator("#saveWorkspaceButton")).toBeEnabled();
+
+      await page.evaluate((session) => {
+        sessionStorage.setItem("workspace.tools.object-vector-studio-v2", JSON.stringify(session));
+        window.__workspaceManagerV2App.syncLifecycleControls();
+      }, validDirtyObjectVectorSession.session);
+      await page.locator("#saveWorkspaceButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Saved and marked clean: workspace\.tools\.object-vector-studio-v2\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Save dirty\/clean validation: 1 dirty toolState payload persisted; 1 toolState key marked clean\./);
+      await expect(objectVectorTile).toHaveAttribute("data-workspace-tool-dirty", "false");
+      await expect(page.locator("#saveWorkspaceButton")).toBeDisabled();
+      await expect(page.locator("#closeWorkspaceButton")).toBeEnabled();
+      const savedState = await page.evaluate(() => ({
+        session: JSON.parse(sessionStorage.getItem("workspace.tools.object-vector-studio-v2")),
+        writes: JSON.parse(sessionStorage.getItem("workspace.repo.manifestWrites") || "[]")
+      }));
+      expect(savedState.session.dirty).toEqual({
+        isDirty: false,
+        reason: null,
+        changedAt: null,
+        changedKeys: []
+      });
+      const writtenManifest = JSON.parse(savedState.writes.at(-1).contents);
+      expect(writtenManifest.game.workspace.tools["object-vector-studio-v2"].objects.some((object) => object.name === "Dirty Probe Renamed")).toBe(true);
+      expect(writtenManifest.game.workspace.tools["object-vector-studio-v2"].objects.find((object) => object.id === "object.asteroids.asteroid.large").tags).toContain("dirty-state");
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await coverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("syncs Workspace Manager V2 dirty lifecycle buttons and closes clean toolState data", async ({ page }) => {
     const server = await openWorkspaceManagerV2(page);
     const pageErrors = [];

tests/tools/AssetUsageIntegration.test.mjs

@@ -54,7 +54,7 @@ export async function run() {
     const validAsset = createAssetHandoff({
       assetId: "asset-vector-player",
       assetType: "vector",
-      sourcePath: "../../games/Asteroids/game.manifest.json#tools.svg-asset-studio.vectors.vector.asteroids.ship",
+      sourcePath: "../../games/Asteroids/game.manifest.json#tools.vector-map-editor.vectorMapDocument.vectors.vector.asteroids.ship",
       displayName: "Asteroids Ship Vector",
       metadata: { category: "Vector Assets" },
       sourceToolId: "tile-map-editor"
@@ -63,7 +63,7 @@ export async function run() {
     const storedAsset = readSharedAssetHandoff();
     assert.equal(storedAsset.assetId, "asset-vector-player");
     assert.equal(storedAsset.assetType, "vector");
-    assert.equal(storedAsset.sourcePath, "../../games/Asteroids/game.manifest.json#tools.svg-asset-studio.vectors.vector.asteroids.ship");
+    assert.equal(storedAsset.sourcePath, "../../games/Asteroids/game.manifest.json#tools.vector-map-editor.vectorMapDocument.vectors.vector.asteroids.ship");
     assert.equal(storedAsset.displayName, "Asteroids Ship Vector");
     assert.equal(storedAsset.sourceToolId, "tile-map-editor");
     assert.equal(typeof storedAsset.selectedAt, "string");