Wrap Session Inspector V2 detail output text and match Status output height - PR_26128_025-session-inspector-v2-output-wrap-height

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_output_wrap_height.md

@@ -0,0 +1,22 @@
+# Playwright Session Inspector V2 Output Wrap Height
+
+## Targeted Coverage
+- Verified JSON output wraps long lines without a horizontal scrollbar.
+- Verified Data output wraps long lines without a horizontal scrollbar.
+- Verified Dirty output wraps long lines without a horizontal scrollbar.
+- Verified JSON/Data/Dirty outputs keep vertical scrolling inside their `<pre>` elements.
+- Verified JSON/Data/Dirty output height matches the Status output height.
+- Verified Dirty and Status headers remain reachable when detail content overflows.
+- Verified Copy All and Clear Status behavior remains covered by existing Session Inspector V2 tests.
+
+## 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 "shows normalized workspace tool sessions as JSON, Data, and Dirty views"`
+- `npm run test:workspace-v2`
+
+## Result
+- Focused Playwright validation passed: 1 test.
+- Full workspace-v2 Playwright validation passed: 15 tests.
+
+## Full Samples Smoke
+- Skipped per PR instructions because the requested change is restricted to Session Inspector V2 detail output wrapping/height behavior and the existing targeted Workspace Manager V2 suite validates the affected launch path.

docs/dev/reports/session_inspector_v2_output_wrap_height.md

@@ -0,0 +1,26 @@
+# PR_26128_025 Session Inspector V2 Output Wrap Height
+
+## Scope
+- Updated Session Inspector V2 detail output styling only.
+- Kept JSON, Data, and Dirty output scroll ownership on their own `<pre>` elements.
+- Preserved normalized session object shape and existing Copy All, Clear Status, and Dirty header behavior.
+
+## Changes
+- Added a shared Session Inspector V2 output height token and applied it to JSON, Data, Dirty, and Status outputs.
+- Changed JSON/Data/Dirty outputs to wrap long lines with `pre-wrap`, `overflow-wrap: anywhere`, and no horizontal output scrollbar.
+- Kept vertical scrolling inside JSON/Data/Dirty `<pre>` elements.
+- Let the right detail panel scroll so lower accordion headers remain reachable when all detail sections are open.
+
+## Guardrails
+- No sample JSON files modified.
+- No roadmap files modified.
+- No cross-tool communication added.
+- No normalized session storage object shape changes.
+
+## Validation
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs` passed.
+- `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"` passed.
+- `npm run test:workspace-v2` passed: 15 tests.
+
+## Full Samples Smoke
+- Skipped per PR instructions. This PR is limited to Session Inspector V2 output layout and targeted Workspace Manager V2 Playwright coverage.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -900,35 +900,46 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         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",
-          dataOutputScrollsHorizontally: dataOutput.scrollWidth > dataOutput.clientWidth + 1,
+          dataOutputHasNoHorizontalScrollbar: dataOutput.scrollWidth <= dataOutput.clientWidth + 1,
           dataOutputScrollsVertically: dataOutput.scrollHeight > dataOutput.clientHeight + 1,
-          dataOutputHeightBounded: rectFor(dataOutput).height <= 170,
-          dirtyHeaderReachable: dirtyHeaderRect.top >= rightRect.top && dirtyHeaderRect.bottom <= rightRect.bottom,
+          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",
-          jsonOutputScrollsHorizontally: jsonOutput.scrollWidth > jsonOutput.clientWidth + 1,
+          jsonOutputHasNoHorizontalScrollbar: jsonOutput.scrollWidth <= jsonOutput.clientWidth + 1,
           jsonOutputScrollsVertically: jsonOutput.scrollHeight > jsonOutput.clientHeight + 1,
-          jsonOutputHeightBounded: rectFor(jsonOutput).height <= 170,
-          statusHeaderReachable: statusHeaderRect.top >= rightRect.top && statusHeaderRect.bottom <= rightRect.bottom
+          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)
         };
       });
       expect(detailPanelState).toEqual({
         dataContentDoesNotOwnScrollbar: true,
-        dataOutputScrollsHorizontally: true,
+        dataOutputHasNoHorizontalScrollbar: true,
         dataOutputScrollsVertically: true,
-        dataOutputHeightBounded: true,
+        dataOutputHeightMatchesStatus: true,
+        dataOutputWrapsLongLines: true,
         dirtyHeaderReachable: true,
         jsonContentDoesNotOwnScrollbar: true,
-        jsonOutputScrollsHorizontally: true,
+        jsonOutputHasNoHorizontalScrollbar: true,
         jsonOutputScrollsVertically: true,
-        jsonOutputHeightBounded: true,
+        jsonOutputHeightMatchesStatus: true,
+        jsonOutputWrapsLongLines: true,
         statusHeaderReachable: true
       });
       await page.locator("#copySessionInspectorV2AllButton").click();
@@ -949,20 +960,25 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const dirtyOutputScrollState = await page.evaluate(() => {
         const dirtyContent = document.querySelector("#sessionInspectorV2DirtyContent");
         const dirtyOutput = document.querySelector("#sessionInspectorV2DirtyOutput");
+        const statusOutput = document.querySelector("#statusLog");
         const dirtyContentStyle = getComputedStyle(dirtyContent);
+        const dirtyOutputStyle = getComputedStyle(dirtyOutput);
         const rect = dirtyOutput.getBoundingClientRect();
+        const statusOutputHeight = Math.round(statusOutput.getBoundingClientRect().height);
         return {
           dirtyContentDoesNotOwnScrollbar: dirtyContentStyle.overflowY === "hidden" && dirtyContentStyle.overflowX === "hidden",
-          dirtyOutputScrollsHorizontally: dirtyOutput.scrollWidth > dirtyOutput.clientWidth + 1,
+          dirtyOutputHasNoHorizontalScrollbar: dirtyOutput.scrollWidth <= dirtyOutput.clientWidth + 1,
           dirtyOutputScrollsVertically: dirtyOutput.scrollHeight > dirtyOutput.clientHeight + 1,
-          dirtyOutputHeightBounded: rect.height <= 170
+          dirtyOutputHeightMatchesStatus: Math.abs(Math.round(rect.height) - statusOutputHeight) <= 1,
+          dirtyOutputWrapsLongLines: dirtyOutputStyle.whiteSpace === "pre-wrap" && dirtyOutputStyle.overflowWrap === "anywhere"
         };
       });
       expect(dirtyOutputScrollState).toEqual({
         dirtyContentDoesNotOwnScrollbar: true,
-        dirtyOutputScrollsHorizontally: true,
+        dirtyOutputHasNoHorizontalScrollbar: true,
         dirtyOutputScrollsVertically: true,
-        dirtyOutputHeightBounded: true
+        dirtyOutputHeightMatchesStatus: true,
+        dirtyOutputWrapsLongLines: true
       });
       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/styles/sessionInspectorV2.css

@@ -10,6 +10,7 @@ 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 {
@@ -169,17 +170,17 @@ button:hover {
 }
 
 .session-inspector-v2__panel--right {
-  overflow: hidden;
+  overflow: auto;
 }
 
 .session-inspector-v2__accordion--detail.is-open {
   flex: 0 1 auto;
   min-height: 0;
-  max-height: clamp(126px, 24vh, 190px);
+  max-height: none;
 }
 
 .session-inspector-v2__accordion--detail-scroll.is-open {
-  max-height: clamp(126px, 24vh, 190px);
+  max-height: none;
 }
 
 .session-inspector-v2__accordion--controls.is-open {
@@ -254,13 +255,15 @@ button:hover {
 }
 
 .session-inspector-v2__accordion--detail .session-inspector-v2__output {
-  flex: 1 1 auto;
-  max-height: clamp(86px, 17vh, 142px);
+  flex: 0 0 var(--session-inspector-v2-output-height);
+  height: var(--session-inspector-v2-output-height);
+  max-height: var(--session-inspector-v2-output-height);
   min-height: 0;
-  overflow: auto;
-  overflow-wrap: normal;
-  white-space: pre;
-  word-break: normal;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .session-inspector-v2__actions {
@@ -418,7 +421,8 @@ button:hover {
 .session-inspector-v2__output,
 #statusLog {
   width: 100%;
-  min-height: 180px;
+  height: var(--session-inspector-v2-output-height);
+  min-height: var(--session-inspector-v2-output-height);
   box-sizing: border-box;
   margin: 0;
   padding: 10px;