Normalize Session Inspector V2 tool objects and copy JSON Data Dirty validation payload - PR_26128_020-session-inspector-v2-data-dirty-model

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_data_dirty_model.md

@@ -17,6 +17,10 @@
 - JSON shows the full selected object.
 - Data shows only selected `data`.
 - Dirty shows only selected `dirty`.
+- Copy is renamed to Copy All.
+- Copy All copies one payload with labeled JSON, Data, and Dirty sections.
+- Copy All includes empty-state text for missing Data or Dirty sections.
+- Copy All logs OK for complete normalized entries, WARN for copied missing-section empty states, and FAIL when no item is selected.
 - JSON, Data, Dirty, Controls, Filters, Entries, and Status accordions all open and close.
 - Split `workspace.tools.<tool-id>.schema` and `workspace.tools.<tool-id>.state` keys are not recreated.
 

docs/dev/reports/session_inspector_v2_data_dirty_model.md

@@ -19,6 +19,8 @@
   - JSON: full stored object
   - Data: selected item `data`
   - Dirty: selected item `dirty`
+- Renamed the JSON header Copy button to Copy All.
+- Copy All now copies one labeled validation payload containing JSON, Data, and Dirty sections.
 - Removed the Workspace Manager V2 Session Inspector tile subtitle `Session storage inspector`.
 
 ## Implementation Notes
@@ -27,6 +29,11 @@
 - Preview Generator V2 reads workspace session context from `workspace.tools.preview-generator-v2.workspace`.
 - Preview Generator V2 image generation behavior was not changed.
 - Data and Dirty views show actionable empty states when the selected storage item has no matching section.
+- Copy All includes Data/Dirty empty-state text in the copied payload when those sections are missing.
+- Copy All logs:
+  - OK when all three sections copy for a selected normalized tool entry.
+  - WARN when the copied payload includes missing Data/Dirty empty states.
+  - FAIL when no storage entry is selected or the clipboard API fails.
 - Per-tile Delete and Delete All behavior were preserved.
 
 ## Guardrails
@@ -43,6 +50,10 @@
 - Verified dirty defaults to clean.
 - Verified Session Inspector V2 has JSON, Data, and Dirty views.
 - Verified State and Schema controls are absent from Session Inspector V2 UI.
+- Verified Copy is renamed to Copy All.
+- Verified Copy All copies one payload with clearly labeled JSON, Data, and Dirty sections.
+- Verified Copy All includes empty-state text for missing Data/Dirty sections.
+- Verified Copy All logs OK/WARN/FAIL outcomes, including an actionable no-selection error.
 - Verified JSON/Data/Dirty accordion behavior does not conflict with other accordions.
 
 ## Skipped

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -434,7 +434,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator(".session-inspector-v2__status-accordion-header #clearSessionInspectorV2StatusButton")).toHaveText("Clear Status");
       await expect(page.locator(".session-inspector-v2__json-accordion-header")).toContainText("JSON");
       await expect(page.locator(".session-inspector-v2__json-accordion-header")).not.toContainText("Details");
-      await expect(page.locator(".session-inspector-v2__json-accordion-header #copySessionInspectorV2JsonButton")).toHaveText("Copy");
+      await expect(page.locator(".session-inspector-v2__json-accordion-header #copySessionInspectorV2AllButton")).toHaveText("Copy All");
       await expect(page.locator(".session-inspector-v2__data-accordion-header")).toContainText("Data");
       await expect(page.locator(".session-inspector-v2__dirty-accordion-header")).toContainText("Dirty");
       await expect(page.locator(".session-inspector-v2__state-accordion-header")).toHaveCount(0);
@@ -476,7 +476,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const filterLabel = rectFor('label[for="sessionInspectorV2FilterInput"] span');
         const filterInput = rectFor("#sessionInspectorV2FilterInput");
         const jsonIcon = rectFor(".session-inspector-v2__json-accordion-header .accordion-v2__icon");
-        const copyButton = rectFor("#copySessionInspectorV2JsonButton");
+        const copyButton = rectFor("#copySessionInspectorV2AllButton");
         return {
           buttonsFit: [refresh, deleteAll, clearStatus].every((rect) => rect.scrollWidth <= rect.clientWidth + 1),
           clearStatusCompact: clearStatus.height <= 34,
@@ -634,10 +634,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#sessionInspectorV2JsonOutput")).toHaveText("true");
       await expect(page.locator("#sessionInspectorV2DataOutput")).toContainText("No data section is present for sessionStorage:session-inspector-v2-alpha.");
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).toContainText("No dirty section is present for sessionStorage:session-inspector-v2-alpha.");
-      const copiedJsonText = await page.locator("#sessionInspectorV2JsonOutput").textContent();
-      await page.locator("#copySessionInspectorV2JsonButton").click();
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Copied JSON content to clipboard\./);
-      expect(await page.evaluate(() => window.__sessionInspectorV2ClipboardText)).toBe(copiedJsonText);
+      await page.locator("#copySessionInspectorV2AllButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/WARN Copied JSON, Data, and Dirty sections with empty-state text for missing Data and Dirty\./);
+      const copiedValidationText = await page.evaluate(() => window.__sessionInspectorV2ClipboardText);
+      expect(copiedValidationText).toContain("=== JSON ===\ntrue");
+      expect(copiedValidationText).toContain("=== Data ===\nNo data section is present for sessionStorage:session-inspector-v2-alpha.");
+      expect(copiedValidationText).toContain("=== Dirty ===\nNo dirty section is present for sessionStorage:session-inspector-v2-alpha.");
       await page.locator('[data-session-inspector-v2-delete-entry-id="sessionStorage:session-inspector-v2-alpha"]').click();
       await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(4);
       await expect(page.locator("#sessionInspectorV2JsonOutput")).toHaveText('"plain beta value"');
@@ -672,8 +674,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "(0) LocalStorage."
       ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted 4 shown storage entries\./);
-      await page.locator("#copySessionInspectorV2JsonButton").click();
-      await expect(page.locator("#statusLog")).toHaveValue(/WARN Copy skipped: no JSON content is shown\./);
+      await page.locator("#copySessionInspectorV2AllButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Copy All failed: select a storage entry before copying JSON, Data, and Dirty\./);
       await page.locator("#deleteAllSessionInspectorV2Button").click();
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Delete All skipped: no matching storage entries are shown\./);
       expect(await page.evaluate(() => window.localStorage.getItem("session-inspector-v2-local"))).toBe("local value");
@@ -695,6 +697,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
   test("shows normalized workspace tool sessions as JSON, Data, and Dirty views", async ({ page }) => {
     const pageErrors = [];
     await page.addInitScript(() => {
+      Object.defineProperty(window.navigator, "clipboard", {
+        configurable: true,
+        value: {
+          async writeText(value) {
+            window.__sessionInspectorV2ClipboardText = value;
+          }
+        }
+      });
       window.sessionStorage.setItem("workspace.tools.preview-generator-v2", JSON.stringify({
         schema: {
           source: "workspace-manager-v2",
@@ -816,6 +826,17 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).not.toContainText('"data"');
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).not.toContainText('"workspace"');
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).not.toContainText('"schema"');
+      await page.locator("#copySessionInspectorV2AllButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Copied JSON, Data, and Dirty sections to clipboard\./);
+      const copiedToolPayload = await page.evaluate(() => window.__sessionInspectorV2ClipboardText);
+      expect(copiedToolPayload).toContain("=== JSON ===");
+      expect(copiedToolPayload).toContain("=== Data ===");
+      expect(copiedToolPayload).toContain("=== Dirty ===");
+      expect(copiedToolPayload).toContain('"workspace"');
+      expect(copiedToolPayload).toContain('"data"');
+      expect(copiedToolPayload).toContain('"dirty"');
+      expect(copiedToolPayload).toContain('"assets.image.preview.preview"');
+      expect(copiedToolPayload).toContain('"isDirty": false');
 
       await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:workspace.tools.no-data-test"]').click();
       await expect(page.locator("#sessionInspectorV2DataOutput")).toContainText("No data section is present for sessionStorage:workspace.tools.no-data-test.");

tools/session-inspector-v2/index.html

@@ -101,7 +101,7 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
             <span>JSON</span>
             <div class="session-inspector-v2__json-header-actions">
               <span class="accordion-v2__icon" aria-hidden="true">+</span>
-              <button id="copySessionInspectorV2JsonButton" type="button">Copy</button>
+              <button id="copySessionInspectorV2AllButton" type="button">Copy All</button>
             </div>
           </div>
           <div id="sessionInspectorV2JsonContent" class="accordion-v2__content">

tools/session-inspector-v2/js/SessionInspectorV2App.js

@@ -1,7 +1,7 @@
 export class SessionInspectorV2App {
   constructor({
     accordions,
-    copyJsonButton,
+    copyAllButton,
     data,
     deleteAllButton,
     dirty,
@@ -16,7 +16,7 @@ export class SessionInspectorV2App {
     windowRef = window
   }) {
     this.accordions = accordions;
-    this.copyJsonButton = copyJsonButton;
+    this.copyAllButton = copyAllButton;
     this.data = data;
     this.deleteAllButton = deleteAllButton;
     this.dirty = dirty;
@@ -48,8 +48,8 @@ export class SessionInspectorV2App {
       onSelected: (entryId) => this.selectEntry(entryId)
     });
     this.refreshButton.addEventListener("click", () => this.refresh());
-    this.copyJsonButton.addEventListener("click", () => {
-      void this.copyJson();
+    this.copyAllButton.addEventListener("click", () => {
+      void this.copyAll();
     });
     this.deleteAllButton.addEventListener("click", () => this.deleteAllShownEntries());
     this.returnToWorkspaceButton.addEventListener("click", () => this.returnToWorkspace());
@@ -131,21 +131,55 @@ export class SessionInspectorV2App {
     this.refresh({ silent: true });
   }
 
-  async copyJson() {
+  copyAllPayload() {
+    return [
+      "=== JSON ===",
+      this.json.text().trim(),
+      "",
+      "=== Data ===",
+      this.data.text().trim(),
+      "",
+      "=== Dirty ===",
+      this.dirty.text().trim()
+    ].join("\n");
+  }
+
+  missingSelectedSections(entry) {
+    const value = entry?.parseOk ? entry.parsedValue : null;
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+      return ["Data", "Dirty"];
+    }
+    return ["Data", "Dirty"].filter((sectionName) => (
+      !Object.prototype.hasOwnProperty.call(value, sectionName.toLowerCase())
+    ));
+  }
+
+  async copyAll() {
+    const selectedEntry = this.entries.find((entry) => entry.id === this.selectedId);
+    if (!selectedEntry) {
+      this.statusLog.fail("Copy All failed: select a storage entry before copying JSON, Data, and Dirty.");
+      return;
+    }
     const jsonText = this.json.text().trim();
-    if (!jsonText || jsonText === "{}") {
-      this.statusLog.warn("Copy skipped: no JSON content is shown.");
+    if (!jsonText) {
+      this.statusLog.warn("Copy All skipped: no JSON content is shown for the selected storage entry.");
       return;
     }
     if (typeof this.window.navigator?.clipboard?.writeText !== "function") {
-      this.statusLog.fail("Copy failed: clipboard API is unavailable.");
+      this.statusLog.fail("Copy All failed: clipboard API is unavailable.");
       return;
     }
+    const payload = this.copyAllPayload();
+    const missingSections = this.missingSelectedSections(selectedEntry);
     try {
-      await this.window.navigator.clipboard.writeText(jsonText);
-      this.statusLog.ok("Copied JSON content to clipboard.");
+      await this.window.navigator.clipboard.writeText(payload);
+      if (missingSections.length) {
+        this.statusLog.warn(`Copied JSON, Data, and Dirty sections with empty-state text for missing ${missingSections.join(" and ")}.`);
+        return;
+      }
+      this.statusLog.ok("Copied JSON, Data, and Dirty sections to clipboard.");
     } catch (error) {
-      this.statusLog.fail(`Copy failed: ${error.message}`);
+      this.statusLog.fail(`Copy All failed: ${error.message}`);
     }
   }
 

tools/session-inspector-v2/js/bootstrap.js

@@ -20,7 +20,7 @@ function requireElement(selector) {
 window.addEventListener("DOMContentLoaded", () => {
   const app = new SessionInspectorV2App({
     accordions: Array.from(document.querySelectorAll(".accordion-v2"), (section) => new AccordionSection(section)),
-    copyJsonButton: requireElement("#copySessionInspectorV2JsonButton"),
+    copyAllButton: requireElement("#copySessionInspectorV2AllButton"),
     data: new DataControl({
       output: requireElement("#sessionInspectorV2DataOutput")
     }),

tools/session-inspector-v2/js/controls/DataControl.js

@@ -7,6 +7,10 @@ export class DataControl {
     this.output.textContent = "Select a normalized tool entry with a top-level data section.";
   }
 
+  text() {
+    return String(this.output.textContent || "");
+  }
+
   render(entry) {
     if (!entry) {
       this.clear();

tools/session-inspector-v2/js/controls/DirtyControl.js

@@ -7,6 +7,10 @@ export class DirtyControl {
     this.output.textContent = "Select a normalized tool entry with a top-level dirty section.";
   }
 
+  text() {
+    return String(this.output.textContent || "");
+  }
+
   render(entry) {
     if (!entry) {
       this.clear();