Constrain Session Inspector V2 detail panel height and show dirty status in header - PR_26128_023-session-inspector-v2-detail-panel-height

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_detail_panel_height.md

@@ -0,0 +1,23 @@
+# Playwright Session Inspector V2 Detail Panel Height
+
+## Command
+`npm run test:workspace-v2`
+
+## Result
+- Passed: 15/15
+- Runtime: about 1.5 minutes
+
+## Targeted Coverage
+- Verified JSON content scrolls inside `#sessionInspectorV2JsonContent` for a long selected object.
+- Verified Data content scrolls inside `#sessionInspectorV2DataContent` for a long selected data payload.
+- Verified JSON and Data panel heights remain bounded.
+- Verified Dirty and Status headers remain visible/reachable with long JSON/Data content.
+- Verified Dirty header shows `Dirty: false` for clean selected items.
+- Verified Dirty header shows `Dirty: true` for dirty selected items.
+- Verified Dirty header shows `Dirty: unknown` when dirty data is missing.
+- Verified Copy All still copies JSON/Data/Dirty content.
+- Verified Clear Status still clears Session Inspector V2 status output.
+- Verified existing JSON/Data/Dirty/Status accordion independence remains covered.
+
+## Skipped
+- Full samples smoke test was skipped by request. The relevant Session Inspector V2 layout, accordion, Copy All, Clear Status, and dirty-header behavior is covered by `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`.

docs/dev/reports/session_inspector_v2_detail_panel_height.md

@@ -0,0 +1,39 @@
+# Session Inspector V2 Detail Panel Height
+
+## Scope
+- Constrained Session Inspector V2 JSON and Data detail bodies so long content scrolls inside those panels.
+- Kept lower Dirty and Status headers visible/reachable when JSON/Data contain large payloads.
+- Preserved the fresh JSON/Data/Dirty/Status V2 accordion behavior.
+- Added live dirty state text to the Dirty header:
+  - `Dirty: false`
+  - `Dirty: true`
+  - `Dirty: unknown`
+
+## Implementation Notes
+- JSON and Data sections now use bounded detail-scroll content bodies.
+- JSON/Data output content no longer drives uncontrolled right-panel growth.
+- Dirty header value is updated by `DirtyControl` from the selected item’s `dirty.isDirty` boolean.
+- Missing or non-boolean dirty state displays `Dirty: unknown`.
+
+## Preserved Behavior
+- Copy All still copies the labeled JSON/Data/Dirty payload.
+- Clear Status still clears the status log.
+- JSON, Data, Dirty, and Status accordions still open and close independently.
+- Storage tile layout, per-tile Delete, and Delete All behavior were preserved.
+- Normalized session object shape was not changed.
+
+## Guardrails
+- No cross-tool communication was added.
+- No sample JSON was modified.
+- No roadmap content was modified.
+
+## Validation
+- Passed `npm run test:workspace-v2` with 15/15 tests.
+- Verified long JSON content scrolls inside the JSON body.
+- Verified long Data content scrolls inside the Data body.
+- Verified Dirty and Status headers remain visible/reachable.
+- Verified Dirty header values for clean, dirty, and missing dirty data.
+- Verified Copy All and Clear Status still work.
+
+## Skipped
+- Full samples smoke test was skipped by request. The changed surface is Session Inspector V2 panel layout and header state, covered by `npm run test:workspace-v2`.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -462,6 +462,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: unknown");
       await expect(page.locator(".session-inspector-v2__state-accordion-header")).toHaveCount(0);
       await expect(page.locator(".session-inspector-v2__schema-accordion-header")).toHaveCount(0);
       await expect(page.locator("#sessionInspectorV2StateOutput")).toHaveCount(0);
@@ -660,6 +661,7 @@ 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.");
+      await expect(page.locator("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: unknown");
       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);
@@ -733,6 +735,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           }
         }
       });
+      const longAssetMap = Object.fromEntries(Array.from({ length: 90 }, (_, index) => {
+        const paddedIndex = String(index).padStart(2, "0");
+        return [`assets.image.long.${paddedIndex}`, {
+          path: `assets/images/long-${paddedIndex}.png`,
+          type: "image",
+          kind: "png",
+          role: "preview",
+          source: "test-fixture"
+        }];
+      }));
       window.sessionStorage.setItem("workspace.tools.preview-generator-v2", JSON.stringify({
         schema: {
           source: "workspace-manager-v2",
@@ -773,14 +785,35 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           assetsPath: "games/Asteroids/assets",
           repoReferenceKey: "workspace.repo.reference"
         },
-        data: { assets: { "assets.image.preview.preview": { path: "assets/images/preview.png" } } },
+        data: { assets: { "assets.image.preview.preview": { path: "assets/images/preview.png" }, ...longAssetMap } },
         dirty: {
           isDirty: false,
           reason: null,
           changedAt: null,
           changedKeys: []
         }
       }));
+      window.sessionStorage.setItem("workspace.tools.dirty-test", JSON.stringify({
+        schema: {
+          source: "workspace-manager-v2",
+          toolId: "dirty-test",
+          schemaRole: "workspace-launch-context",
+          schemaRef: "tools/schemas/workspace.manifest.schema.json"
+        },
+        workspace: {
+          source: "workspace-manager-v2",
+          toolId: "dirty-test"
+        },
+        data: {
+          note: "dirty fixture"
+        },
+        dirty: {
+          isDirty: true,
+          reason: "test dirty flag",
+          changedAt: "2026-05-08T12:00:00.000Z",
+          changedKeys: ["data.note"]
+        }
+      }));
       window.sessionStorage.setItem("workspace.tools.no-data-test", JSON.stringify({
         schema: {
           source: "workspace-manager-v2",
@@ -822,7 +855,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     });
 
     try {
-      await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(4);
+      await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(5);
       await expect(page.locator(".session-inspector-v2__json-accordion-header")).toContainText("JSON");
       await expect(page.locator(".session-inspector-v2__data-accordion-header")).toContainText("Data");
       await expect(page.locator(".session-inspector-v2__dirty-accordion-header")).toContainText("Dirty");
@@ -854,6 +887,34 @@ 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 expect(page.locator("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: false");
+      const detailPanelState = await page.evaluate(() => {
+        const jsonContent = document.querySelector("#sessionInspectorV2JsonContent");
+        const dataContent = document.querySelector("#sessionInspectorV2DataContent");
+        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 rectFor = (element) => element.getBoundingClientRect();
+        const rightRect = rectFor(rightPanel);
+        const dirtyHeaderRect = rectFor(dirtyHeader);
+        const statusHeaderRect = rectFor(statusHeader);
+        return {
+          dataContentScrolls: dataContent.scrollHeight > dataContent.clientHeight + 1,
+          dataHeightBounded: rectFor(dataContent).height <= 170,
+          dirtyHeaderReachable: dirtyHeaderRect.top >= rightRect.top && dirtyHeaderRect.bottom <= rightRect.bottom,
+          jsonContentScrolls: jsonContent.scrollHeight > jsonContent.clientHeight + 1,
+          jsonHeightBounded: rectFor(jsonContent).height <= 170,
+          statusHeaderReachable: statusHeaderRect.top >= rightRect.top && statusHeaderRect.bottom <= rightRect.bottom
+        };
+      });
+      expect(detailPanelState).toEqual({
+        dataContentScrolls: true,
+        dataHeightBounded: true,
+        dirtyHeaderReachable: true,
+        jsonContentScrolls: true,
+        jsonHeightBounded: true,
+        statusHeaderReachable: 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);
@@ -866,19 +927,23 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(copiedToolPayload).toContain('"assets.image.preview.preview"');
       expect(copiedToolPayload).toContain('"isDirty": false');
 
+      await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:workspace.tools.dirty-test"]').click();
+      await expect(page.locator("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: true");
+      await expect(page.locator("#sessionInspectorV2DirtyOutput")).toContainText('"isDirty": 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.");
       await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:workspace.tools.no-dirty-test"]').click();
+      await expect(page.locator("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: unknown");
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).toContainText("No dirty section is present for sessionStorage:workspace.tools.no-dirty-test.");
 
       await page.locator('[data-session-inspector-v2-delete-entry-id="sessionStorage:workspace.tools.preview-generator-v2"]').click();
-      await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(3);
+      await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(4);
       expect(await page.evaluate(() => window.sessionStorage.getItem("workspace.tools.preview-generator-v2"))).toBeNull();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted sessionStorage:workspace\.tools\.preview-generator-v2\./);
 
       await page.locator("#deleteAllSessionInspectorV2Button").click();
       await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(0);
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted 3 shown storage entries\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted 4 shown storage entries\./);
       expect(pageErrors).toEqual([]);
     } finally {
       await coverageReporter.stop(page);

tools/session-inspector-v2/index.html

@@ -96,7 +96,7 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
       </section>
 
       <aside class="session-inspector-v2__panel session-inspector-v2__panel--right tool-shell-common__fullscreen-panel tool-shell-common__fullscreen-side-panel tool-shell-common__fullscreen-panel-right" aria-label="Session JSON, data, and dirty tracking">
-        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--detail session-inspector-v2__accordion--detail-scroll is-open" data-accordion-v2-open="true">
           <div class="session-inspector-v2__accordion-header-row session-inspector-v2__json-accordion-header">
             <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2JsonContent">
               <span>JSON</span>
@@ -106,27 +106,27 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
               <button id="copySessionInspectorV2AllButton" type="button">Copy All</button>
             </div>
           </div>
-          <div id="sessionInspectorV2JsonContent" class="accordion-v2__content">
+          <div id="sessionInspectorV2JsonContent" class="accordion-v2__content session-inspector-v2__detail-scroll-content">
             <pre id="sessionInspectorV2JsonOutput" class="session-inspector-v2__output">{}</pre>
           </div>
         </section>
 
-        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--detail session-inspector-v2__accordion--detail-scroll is-open" data-accordion-v2-open="true">
           <div class="session-inspector-v2__accordion-header-row session-inspector-v2__data-accordion-header">
             <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2DataContent">
               <span>Data</span>
               <span class="accordion-v2__icon" aria-hidden="true">+</span>
             </button>
           </div>
-          <div id="sessionInspectorV2DataContent" class="accordion-v2__content">
+          <div id="sessionInspectorV2DataContent" class="accordion-v2__content session-inspector-v2__detail-scroll-content">
             <pre id="sessionInspectorV2DataOutput" class="session-inspector-v2__output">Select a normalized tool entry with a top-level data section.</pre>
           </div>
         </section>
 
-        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--detail is-open" data-accordion-v2-open="true">
           <div class="session-inspector-v2__accordion-header-row session-inspector-v2__dirty-accordion-header">
             <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2DirtyContent">
-              <span>Dirty</span>
+              <span id="sessionInspectorV2DirtyHeaderValue">Dirty: unknown</span>
               <span class="accordion-v2__icon" aria-hidden="true">+</span>
             </button>
           </div>

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

@@ -28,6 +28,7 @@ window.addEventListener("DOMContentLoaded", () => {
       output: requireElement("#sessionInspectorV2JsonOutput")
     }),
     dirty: new DirtyControl({
+      headerValue: requireElement("#sessionInspectorV2DirtyHeaderValue"),
       output: requireElement("#sessionInspectorV2DirtyOutput")
     }),
     deleteAllButton: requireElement("#deleteAllSessionInspectorV2Button"),

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

@@ -1,9 +1,15 @@
 export class DirtyControl {
-  constructor({ output }) {
+  constructor({ headerValue, output }) {
+    this.headerValue = headerValue;
     this.output = output;
   }
 
+  setHeaderValue(value) {
+    this.headerValue.textContent = `Dirty: ${value}`;
+  }
+
   clear() {
+    this.setHeaderValue("unknown");
     this.output.textContent = "Select a normalized tool entry with a top-level dirty section.";
   }
 
@@ -18,9 +24,11 @@ export class DirtyControl {
     }
     const value = entry.parseOk ? entry.parsedValue : null;
     if (!value || typeof value !== "object" || Array.isArray(value) || !Object.prototype.hasOwnProperty.call(value, "dirty")) {
+      this.setHeaderValue("unknown");
       this.output.textContent = `No dirty section is present for ${entry.storageType}:${entry.key}. Select a normalized tool entry with a top-level dirty section.`;
       return;
     }
+    this.setHeaderValue(typeof value.dirty?.isDirty === "boolean" ? String(value.dirty.isDirty) : "unknown");
     this.output.textContent = JSON.stringify(value.dirty, null, 2);
   }
 }

tools/session-inspector-v2/styles/sessionInspectorV2.css

@@ -168,6 +168,19 @@ button:hover {
   flex: 1 1 auto;
 }
 
+.session-inspector-v2__panel--right {
+  overflow: hidden;
+}
+
+.session-inspector-v2__accordion--detail.is-open {
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.session-inspector-v2__accordion--detail-scroll.is-open {
+  max-height: clamp(126px, 24vh, 190px);
+}
+
 .session-inspector-v2__accordion--controls.is-open {
   flex: 0 0 auto;
 }
@@ -231,6 +244,20 @@ button:hover {
   display: none;
 }
 
+.session-inspector-v2__detail-scroll-content {
+  max-height: clamp(86px, 17vh, 142px);
+  overflow: auto;
+}
+
+.session-inspector-v2__accordion--detail .session-inspector-v2__output {
+  min-height: 0;
+}
+
+.session-inspector-v2__detail-scroll-content > .session-inspector-v2__output {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
 .session-inspector-v2__actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));