Share Session Inspector V2 detail panel height and label Copy All output with session key - PR_26128_026-session-inspector-v2-shared-detail-space

DavidQ · DavidQ · commit c4bf6677a5ce · 2026-05-08T18:28:09.000-04:00
diff --git a/docs/dev/reports/playwright_session_inspector_v2_shared_detail_space.md b/docs/dev/reports/playwright_session_inspector_v2_shared_detail_space.md
@@ -0,0 +1,26 @@
+# Playwright Session Inspector V2 Shared Detail Space
+
+## Targeted Coverage
+- Verified 1 open detail section receives the full open-section output allocation.
+- Verified 2 open detail sections split output height evenly.
+- Verified 3 open detail sections split output height evenly.
+- Verified 4 open detail sections split output height evenly.
+- Verified closed detail sections show only their headers.
+- Verified open outputs keep vertical scrolling on the output element.
+- Verified open outputs have no horizontal scrollbar and wrap long lines.
+- Verified lower detail headers remain reachable.
+- Verified Copy All includes the selected storage key before JSON, Data, and Dirty data.
+
+## Commands
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "launches Session Inspector V2 with V2 labels, accordions, theme, and delete controls"`
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "shows normalized workspace tool sessions as JSON, Data, and Dirty views"`
+- `npm run test:workspace-v2`
+
+## Result
+- Focused Session Inspector V2 launch/copy validation passed.
+- Focused shared detail space validation passed.
+- Full workspace-v2 Playwright validation passed: 15 tests.
+
+## Full Samples Smoke
+- Skipped per PR instructions because this change is scoped to Session Inspector V2 layout and Copy All output text.
diff --git a/docs/dev/reports/session_inspector_v2_shared_detail_space.md b/docs/dev/reports/session_inspector_v2_shared_detail_space.md
@@ -0,0 +1,29 @@
+# PR_26128_026 Session Inspector V2 Shared Detail Space
+
+## Scope
+- Updated Session Inspector V2 right-side detail layout.
+- Updated Copy All payload formatting for selected storage entries.
+- Preserved normalized session object shape, Dirty header values, and Clear Status behavior.
+
+## Changes
+- JSON, Data, Dirty, and Status now share the right detail panel through flex layout.
+- Open detail sections split available vertical space evenly.
+- Closed detail sections keep only their headers visible.
+- JSON/Data/Dirty/Status outputs keep vertical scrolling inside the output element.
+- JSON/Data/Dirty/Status outputs wrap long lines and suppress horizontal scrolling.
+- Copy All now includes `Session: <storageType>:<key>` before each JSON, Data, and Dirty block.
+
+## Guardrails
+- No sample JSON files modified.
+- No roadmap files modified.
+- No cross-tool communication added.
+- No schema or normalized session object shape changes.
+
+## Validation
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs` passed.
+- Focused Session Inspector V2 launch/copy test passed.
+- Focused normalized JSON/Data/Dirty shared-space test passed.
+- `npm run test:workspace-v2` passed: 15 tests.
+
+## Full Samples Smoke
+- Skipped per PR instructions. This PR is limited to Session Inspector V2 detail-panel layout and Copy All text formatting; targeted Workspace Manager V2 Playwright coverage validates the affected launch and inspector flows.
diff --git a/tests/playwright/tools/WorkspaceManagerV2.spec.mjs b/tests/playwright/tools/WorkspaceManagerV2.spec.mjs
@@ -217,6 +217,97 @@ async function expectSessionInspectorV2DetailAccordionsIndependent(page) {
   }
 }
 
+const SESSION_INSPECTOR_V2_DETAIL_SECTIONS = [
+  {
+    contentId: "sessionInspectorV2JsonContent",
+    outputSelector: "#sessionInspectorV2JsonOutput"
+  },
+  {
+    contentId: "sessionInspectorV2DataContent",
+    outputSelector: "#sessionInspectorV2DataOutput"
+  },
+  {
+    contentId: "sessionInspectorV2DirtyContent",
+    outputSelector: "#sessionInspectorV2DirtyOutput"
+  },
+  {
+    contentId: "sessionInspectorV2StatusContent",
+    outputSelector: "#statusLog"
+  }
+];
+
+async function setSessionInspectorV2DetailSectionsOpen(page, openContentIds) {
+  const openSet = new Set(openContentIds);
+  for (const { contentId } of SESSION_INSPECTOR_V2_DETAIL_SECTIONS) {
+    const header = page.locator(`.accordion-v2__header[aria-controls="${contentId}"]`);
+    const content = page.locator(`#${contentId}`);
+    const isOpen = await content.evaluate((element) => !element.hidden);
+    if (isOpen !== openSet.has(contentId)) {
+      await header.click();
+    }
+    if (openSet.has(contentId)) {
+      await expect(content).toBeVisible();
+      await expect(header).toHaveAttribute("aria-expanded", "true");
+    } else {
+      await expect(content).toBeHidden();
+      await expect(header).toHaveAttribute("aria-expanded", "false");
+    }
+  }
+}
+
+async function expectSessionInspectorV2SharedDetailSpace(page, openContentIds) {
+  await setSessionInspectorV2DetailSectionsOpen(page, openContentIds);
+  const state = await page.evaluate((sections) => {
+    const rightPanel = document.querySelector(".session-inspector-v2__panel--right");
+    const rightRect = rightPanel.getBoundingClientRect();
+    const details = sections.map((sectionInfo) => {
+      const content = document.querySelector(`#${sectionInfo.contentId}`);
+      const section = content.closest(".session-inspector-v2__accordion");
+      const header = section.querySelector(".session-inspector-v2__accordion-header-row") || section.querySelector(".accordion-v2__header");
+      const output = document.querySelector(sectionInfo.outputSelector);
+      const outputStyle = getComputedStyle(output);
+      const sectionRect = section.getBoundingClientRect();
+      const headerRect = header.getBoundingClientRect();
+      const outputRect = output.getBoundingClientRect();
+      const isOpen = !content.hidden;
+      return {
+        contentId: sectionInfo.contentId,
+        closedHeaderOnly: isOpen || sectionRect.height <= headerRect.height + 5,
+        headerReachable: headerRect.top >= rightRect.top - 1 && headerRect.bottom <= rightRect.bottom + 1,
+        isOpen,
+        noHorizontalScrollbar: output.scrollWidth <= output.clientWidth + 1,
+        outputHeight: isOpen ? outputRect.height : 0,
+        overflowY: outputStyle.overflowY,
+        wrapsLongLines: outputStyle.whiteSpace === "pre-wrap" && outputStyle.overflowWrap === "anywhere"
+      };
+    });
+    const openDetails = details.filter((detail) => detail.isOpen);
+    const totalOpenOutputHeight = openDetails.reduce((total, detail) => total + detail.outputHeight, 0);
+    const expectedOpenOutputHeight = totalOpenOutputHeight / Math.max(openDetails.length, 1);
+    return {
+      closedSectionsHeaderOnly: details.every((detail) => detail.closedHeaderOnly),
+      headersReachable: details.every((detail) => detail.headerReachable),
+      openContentIds: openDetails.map((detail) => detail.contentId),
+      openCount: openDetails.length,
+      openOutputHeight: expectedOpenOutputHeight,
+      openOutputsSplitEvenly: openDetails.every((detail) => Math.abs(detail.outputHeight - expectedOpenOutputHeight) <= 1),
+      openOutputsUseInternalVerticalScroll: openDetails.every((detail) => detail.overflowY === "auto"),
+      outputsHaveNoHorizontalScrollbars: openDetails.every((detail) => detail.noHorizontalScrollbar),
+      outputsWrapLongLines: openDetails.every((detail) => detail.wrapsLongLines)
+    };
+  }, SESSION_INSPECTOR_V2_DETAIL_SECTIONS);
+
+  expect(state.openContentIds).toEqual(openContentIds);
+  expect(state.openCount).toBe(openContentIds.length);
+  expect(state.openOutputsSplitEvenly).toBe(true);
+  expect(state.openOutputsUseInternalVerticalScroll).toBe(true);
+  expect(state.outputsHaveNoHorizontalScrollbars).toBe(true);
+  expect(state.outputsWrapLongLines).toBe(true);
+  expect(state.closedSectionsHeaderOnly).toBe(true);
+  expect(state.headersReachable).toBe(true);
+  return state.openOutputHeight;
+}
+
 async function expectSessionInspectorV2FullscreenShell(page) {
   const summary = page.locator("[data-session-inspector-v2-summary]");
   await summary.click();
@@ -665,9 +756,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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.");
+      expect(copiedValidationText).toContain("=== JSON ===\nSession: sessionStorage:session-inspector-v2-alpha\ntrue");
+      expect(copiedValidationText).toContain("=== Data ===\nSession: sessionStorage:session-inspector-v2-alpha\nNo data section is present for sessionStorage:session-inspector-v2-alpha.");
+      expect(copiedValidationText).toContain("=== Dirty ===\nSession: sessionStorage:session-inspector-v2-alpha\nNo dirty section is present for sessionStorage:session-inspector-v2-alpha.");
       await page.locator("#clearSessionInspectorV2StatusButton").click();
       await expect(page.locator("#statusLog")).toHaveValue("");
       await page.locator('[data-session-inspector-v2-delete-entry-id="sessionStorage:session-inspector-v2-alpha"]').click();
@@ -892,62 +983,36 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).not.toContainText('"workspace"');
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).not.toContainText('"schema"');
       await expect(page.locator("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: false");
+      const allDetailContentIds = SESSION_INSPECTOR_V2_DETAIL_SECTIONS.map((section) => section.contentId);
+      const fourOpenOutputHeight = await expectSessionInspectorV2SharedDetailSpace(page, allDetailContentIds);
+      const threeOpenOutputHeight = await expectSessionInspectorV2SharedDetailSpace(page, allDetailContentIds.slice(0, 3));
+      const twoOpenOutputHeight = await expectSessionInspectorV2SharedDetailSpace(page, allDetailContentIds.slice(0, 2));
+      const oneOpenOutputHeight = await expectSessionInspectorV2SharedDetailSpace(page, allDetailContentIds.slice(0, 1));
+      expect(oneOpenOutputHeight).toBeGreaterThan(twoOpenOutputHeight);
+      expect(twoOpenOutputHeight).toBeGreaterThan(threeOpenOutputHeight);
+      expect(threeOpenOutputHeight).toBeGreaterThan(fourOpenOutputHeight);
+      await setSessionInspectorV2DetailSectionsOpen(page, allDetailContentIds);
       const detailPanelState = await page.evaluate(() => {
-        const jsonContent = document.querySelector("#sessionInspectorV2JsonContent");
-        const dataContent = document.querySelector("#sessionInspectorV2DataContent");
         const jsonOutput = document.querySelector("#sessionInspectorV2JsonOutput");
         const dataOutput = document.querySelector("#sessionInspectorV2DataOutput");
-        const dirtyHeader = document.querySelector(".session-inspector-v2__dirty-accordion-header");
-        const statusHeader = document.querySelector(".session-inspector-v2__status-accordion-header");
-        const rightPanel = document.querySelector(".session-inspector-v2__panel--right");
-        const statusOutput = document.querySelector("#statusLog");
-        const jsonOutputStyle = getComputedStyle(jsonOutput);
-        const dataOutputStyle = getComputedStyle(dataOutput);
-        const jsonContentStyle = getComputedStyle(jsonContent);
-        const dataContentStyle = getComputedStyle(dataContent);
-        const rectFor = (element) => element.getBoundingClientRect();
-        const rightRect = rectFor(rightPanel);
-        const dirtyHeaderRect = rectFor(dirtyHeader);
-        const statusHeaderRect = rectFor(statusHeader);
-        rightPanel.scrollTop = rightPanel.scrollHeight;
-        const scrolledDirtyHeaderRect = rectFor(dirtyHeader);
-        const scrolledStatusHeaderRect = rectFor(statusHeader);
-        const statusOutputHeight = Math.round(rectFor(statusOutput).height);
         return {
-          dataContentDoesNotOwnScrollbar: dataContentStyle.overflowY === "hidden" && dataContentStyle.overflowX === "hidden",
-          dataOutputHasNoHorizontalScrollbar: dataOutput.scrollWidth <= dataOutput.clientWidth + 1,
           dataOutputScrollsVertically: dataOutput.scrollHeight > dataOutput.clientHeight + 1,
-          dataOutputHeightMatchesStatus: Math.abs(Math.round(rectFor(dataOutput).height) - statusOutputHeight) <= 1,
-          dataOutputWrapsLongLines: dataOutputStyle.whiteSpace === "pre-wrap" && dataOutputStyle.overflowWrap === "anywhere",
-          dirtyHeaderReachable: dirtyHeaderRect.top >= rightRect.top || (scrolledDirtyHeaderRect.top >= rightRect.top && scrolledDirtyHeaderRect.bottom <= rightRect.bottom),
-          jsonContentDoesNotOwnScrollbar: jsonContentStyle.overflowY === "hidden" && jsonContentStyle.overflowX === "hidden",
-          jsonOutputHasNoHorizontalScrollbar: jsonOutput.scrollWidth <= jsonOutput.clientWidth + 1,
-          jsonOutputScrollsVertically: jsonOutput.scrollHeight > jsonOutput.clientHeight + 1,
-          jsonOutputHeightMatchesStatus: Math.abs(Math.round(rectFor(jsonOutput).height) - statusOutputHeight) <= 1,
-          jsonOutputWrapsLongLines: jsonOutputStyle.whiteSpace === "pre-wrap" && jsonOutputStyle.overflowWrap === "anywhere",
-          statusHeaderReachable: statusHeaderRect.top >= rightRect.top || (scrolledStatusHeaderRect.top >= rightRect.top && scrolledStatusHeaderRect.bottom <= rightRect.bottom)
+          jsonOutputScrollsVertically: jsonOutput.scrollHeight > jsonOutput.clientHeight + 1
         };
       });
       expect(detailPanelState).toEqual({
-        dataContentDoesNotOwnScrollbar: true,
-        dataOutputHasNoHorizontalScrollbar: true,
         dataOutputScrollsVertically: true,
-        dataOutputHeightMatchesStatus: true,
-        dataOutputWrapsLongLines: true,
-        dirtyHeaderReachable: true,
-        jsonContentDoesNotOwnScrollbar: true,
-        jsonOutputHasNoHorizontalScrollbar: true,
-        jsonOutputScrollsVertically: true,
-        jsonOutputHeightMatchesStatus: true,
-        jsonOutputWrapsLongLines: true,
-        statusHeaderReachable: true
+        jsonOutputScrollsVertically: true
       });
       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("=== JSON ===\nSession: sessionStorage:workspace.tools.asset-manager-v2\n");
       expect(copiedToolPayload).toContain("=== Data ===");
+      expect(copiedToolPayload).toContain("=== Data ===\nSession: sessionStorage:workspace.tools.asset-manager-v2\n");
       expect(copiedToolPayload).toContain("=== Dirty ===");
+      expect(copiedToolPayload).toContain("=== Dirty ===\nSession: sessionStorage:workspace.tools.asset-manager-v2\n");
       expect(copiedToolPayload).toContain('"workspace"');
       expect(copiedToolPayload).toContain('"data"');
       expect(copiedToolPayload).toContain('"dirty"');
diff --git a/tools/session-inspector-v2/js/SessionInspectorV2App.js b/tools/session-inspector-v2/js/SessionInspectorV2App.js
@@ -131,15 +131,23 @@ export class SessionInspectorV2App {
     this.refresh({ silent: true });
   }
 
-  copyAllPayload() {
+  selectedSessionLabel(entry) {
+    return entry ? `${entry.storageType}:${entry.key}` : "(none)";
+  }
+
+  copyAllPayload(entry) {
+    const sessionLine = `Session: ${this.selectedSessionLabel(entry)}`;
     return [
       "=== JSON ===",
+      sessionLine,
       this.json.text().trim(),
       "",
       "=== Data ===",
+      sessionLine,
       this.data.text().trim(),
       "",
       "=== Dirty ===",
+      sessionLine,
       this.dirty.text().trim()
     ].join("\n");
   }
@@ -169,7 +177,7 @@ export class SessionInspectorV2App {
       this.statusLog.fail("Copy All failed: clipboard API is unavailable.");
       return;
     }
-    const payload = this.copyAllPayload();
+    const payload = this.copyAllPayload(selectedEntry);
     const missingSections = this.missingSelectedSections(selectedEntry);
     try {
       await this.window.navigator.clipboard.writeText(payload);
diff --git a/tools/session-inspector-v2/styles/sessionInspectorV2.css b/tools/session-inspector-v2/styles/sessionInspectorV2.css
@@ -10,7 +10,6 @@ body[data-tool-id="session-inspector-v2"],
   --session-inspector-v2-header-surface: var(--tools-shell-glass, var(--panel));
   --session-inspector-v2-shadow: var(--tools-shell-shadow, none);
   --session-inspector-v2-shadow-strong: var(--tools-shell-shadow-strong, none);
-  --session-inspector-v2-output-height: 180px;
 }
 
 body {
@@ -170,11 +169,22 @@ button:hover {
 }
 
 .session-inspector-v2__panel--right {
-  overflow: auto;
+  overflow: hidden;
+}
+
+.session-inspector-v2__panel--right > .session-inspector-v2__accordion {
+  flex: 0 0 auto;
+}
+
+.session-inspector-v2__panel--right > .session-inspector-v2__accordion.is-open {
+  flex: 1 1 0;
+}
+
+.session-inspector-v2__panel--right > .session-inspector-v2__accordion:not(.is-open) {
+  flex: 0 0 auto;
 }
 
 .session-inspector-v2__accordion--detail.is-open {
-  flex: 0 1 auto;
   min-height: 0;
   max-height: none;
 }
@@ -255,9 +265,9 @@ button:hover {
 }
 
 .session-inspector-v2__accordion--detail .session-inspector-v2__output {
-  flex: 0 0 var(--session-inspector-v2-output-height);
-  height: var(--session-inspector-v2-output-height);
-  max-height: var(--session-inspector-v2-output-height);
+  flex: 1 1 0;
+  height: auto;
+  max-height: none;
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -421,21 +431,31 @@ button:hover {
 .session-inspector-v2__output,
 #statusLog {
   width: 100%;
-  height: var(--session-inspector-v2-output-height);
-  min-height: var(--session-inspector-v2-output-height);
+  min-height: 0;
   box-sizing: border-box;
   margin: 0;
   padding: 10px;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
+  word-break: break-word;
 }
 
-.session-inspector-v2__output {
-  flex: 1 1 auto;
+.session-inspector-v2__panel--right .accordion-v2__content {
+  flex: 1 1 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.session-inspector-v2__panel--right :is(.session-inspector-v2__output, #statusLog) {
+  flex: 1 1 0;
+  height: auto;
+  max-height: none;
 }
 
 #statusLog {
-  resize: vertical;
+  resize: none;
 }
 
 .session-inspector-v2__json-header-actions,
