Adjust Session Inspector V2 storage tile width and metadata spacing - PR_26128_016-session-inspector-v2-tile-sizing

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_tile_sizing.md

@@ -0,0 +1,22 @@
+# PR_26128_016 Playwright Session Inspector V2 Tile Sizing
+
+## Command
+`npm run test:workspace-v2`
+
+## Result
+PASS: 14/14 tests passed.
+
+## Targeted Coverage
+- Session Inspector V2 storage tiles render at 234px by 198px.
+- Tile width is 50px wider than the prior 184px fixed tile.
+- The value type and byte size line renders separately from the storage type line.
+- The value type and byte size line has visible spacing below storage type.
+- A boolean session value renders the expected `boolean | 4 bytes` metadata line.
+- Long storage key names still wrap within the fixed tile bounds.
+- Delete buttons remain inside each tile.
+- Per-tile Delete still removes the correct sessionStorage key and refreshes the list.
+- Delete All still clears displayed entries.
+- Fullscreen shell behavior still enters/exits and keeps V2 side panel alignment.
+
+## Skipped
+Full samples smoke test was skipped as requested because this PR changes Session Inspector V2 tile sizing and metadata positioning only, without touching sample JSON or sample runtime paths.

docs/dev/reports/session_inspector_v2_tile_sizing.md

@@ -0,0 +1,33 @@
+# PR_26128_016 Session Inspector V2 Tile Sizing
+
+## Summary
+Session Inspector V2 storage tiles were widened and their metadata layout was clarified without changing fullscreen or workspace navigation behavior.
+
+## Changes
+- Increased fixed storage tile width from 184px to 234px.
+- Preserved the existing 198px tile height.
+- Split tile metadata into separate lines:
+  - storage type
+  - value type and byte size
+- Moved the value type and byte size line below the storage type line with additional spacing.
+- Preserved long storage key wrapping inside the tile.
+- Preserved per-tile Delete button placement inside each tile.
+- Preserved Delete All behavior.
+- Left fullscreen shell behavior and workspace navigation behavior unchanged.
+
+## Boundaries
+- No cross-tool communication was added.
+- No sample JSON was modified.
+- Roadmap content was not modified.
+
+## Validation
+- `npm run test:workspace-v2`: PASS, 14 tests passed.
+- Verified tile width increased by 50px to 234px.
+- Verified tile height remains 198px.
+- Verified `value type | byte size` appears below the storage type line with visible spacing.
+- Verified long storage key names still wrap inside tiles.
+- Verified Delete buttons still fit inside tiles.
+- Verified fullscreen still works.
+
+## Skipped
+Full samples smoke test was skipped as requested. This PR is scoped to Session Inspector V2 tile sizing and metadata placement; sample runtime behavior is outside the changed surface.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -380,8 +380,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
 
   test("launches Session Inspector V2 with V2 labels, accordions, theme, and delete controls", async ({ page }) => {
     const pageErrors = [];
+    await page.setViewportSize({ height: 900, width: 1440 });
     await page.addInitScript(() => {
-      window.sessionStorage.setItem("session-inspector-v2-alpha", JSON.stringify({ active: true }));
+      window.sessionStorage.setItem("session-inspector-v2-alpha", "true");
       window.sessionStorage.setItem("session-inspector-v2-beta", "plain beta value");
       window.sessionStorage.setItem("session-inspector-v2-gamma", JSON.stringify({ index: 3, wraps: true }));
       window.sessionStorage.setItem("session-inspector-v2-delta", "delta value that is long enough to prove tile text clips inside a fixed tile");
@@ -430,7 +431,6 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(tileText).not.toContain("plain beta value");
       expect(tileText).not.toContain("delta value that is long enough");
       expect(tileText).not.toContain("epsilon value");
-      expect(tileText).not.toContain("active");
       expect(tileText).not.toContain("wraps");
 
       const themeState = await page.evaluate(async () => {
@@ -528,19 +528,26 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           deleteButtonsInside: rects.every((rect) => rect.deleteInside),
           firstRowMovesLeftToRight: rects[1].top === rects[0].top && rects[1].left > rects[0].left,
           hasWrappedRows: new Set(rects.map((rect) => rect.top)).size > 1,
-          sizes: rects.map(({ height, width }) => ({ height, width }))
+          metadataGap: Math.round(cards[0].querySelector(".session-inspector-v2__entry-value-size").getBoundingClientRect().top
+            - cards[0].querySelector(".session-inspector-v2__entry-storage-type").getBoundingClientRect().bottom),
+          sizes: rects.map(({ height, width }) => ({ height, width })),
+          storageTypeText: cards[0].querySelector(".session-inspector-v2__entry-storage-type").textContent.trim(),
+          valueSizeText: cards[0].querySelector(".session-inspector-v2__entry-value-size").textContent.trim()
         };
       });
       expect(tileState.sizes).toEqual([
-        { height: 198, width: 184 },
-        { height: 198, width: 184 },
-        { height: 198, width: 184 },
-        { height: 198, width: 184 },
-        { height: 198, width: 184 }
+        { height: 198, width: 234 },
+        { height: 198, width: 234 },
+        { height: 198, width: 234 },
+        { height: 198, width: 234 },
+        { height: 198, width: 234 }
       ]);
       expect(tileState.firstRowMovesLeftToRight).toBe(true);
       expect(tileState.hasWrappedRows).toBe(true);
       expect(tileState.deleteButtonsInside).toBe(true);
+      expect(tileState.storageTypeText).toBe("sessionStorage");
+      expect(tileState.valueSizeText).toBe("boolean | 4 bytes");
+      expect(tileState.metadataGap).toBeGreaterThanOrEqual(8);
       const longKeyWrapState = await page.locator(".session-inspector-v2__entry-card", { hasText: "session-inspector-v2-super-long-storage-key-name-that-must-wrap-inside-the-fixed-session-tile" }).locator(".session-inspector-v2__entry-key").evaluate((keyNode) => {
         const keyRect = keyNode.getBoundingClientRect();
         const cardRect = keyNode.closest(".session-inspector-v2__entry-card").getBoundingClientRect();

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

@@ -39,11 +39,15 @@ export class EntryListControl {
     key.className = "session-inspector-v2__entry-key";
     key.textContent = entry.key;
 
-    const meta = document.createElement("span");
-    meta.className = "session-inspector-v2__entry-meta";
-    meta.textContent = `${entry.storageType} | ${entry.valueType} | ${entry.sizeBytes} bytes`;
+    const storageType = document.createElement("span");
+    storageType.className = "session-inspector-v2__entry-storage-type";
+    storageType.textContent = entry.storageType;
 
-    button.append(key, meta);
+    const valueSize = document.createElement("span");
+    valueSize.className = "session-inspector-v2__entry-value-size";
+    valueSize.textContent = `${entry.valueType} | ${entry.sizeBytes} bytes`;
+
+    button.append(key, storageType, valueSize);
     button.addEventListener("click", () => {
       this.selectedId = entry.id;
       this.onSelected(entry.id);

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

@@ -289,7 +289,7 @@ button:hover {
 
 .session-inspector-v2__entry-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 184px);
+  grid-template-columns: repeat(auto-fill, 234px);
   grid-auto-rows: 198px;
   align-content: start;
   justify-content: start;
@@ -302,9 +302,9 @@ button:hover {
 }
 
 .session-inspector-v2__entry-card {
-  width: 184px;
+  width: 234px;
   height: 198px;
-  min-width: 184px;
+  min-width: 234px;
   min-height: 198px;
   display: flex;
   flex-direction: column;
@@ -351,7 +351,8 @@ button:hover {
   font-weight: 800;
 }
 
-.session-inspector-v2__entry-meta {
+.session-inspector-v2__entry-storage-type,
+.session-inspector-v2__entry-value-size {
   min-width: 0;
   display: block;
   overflow: hidden;
@@ -363,6 +364,10 @@ button:hover {
   word-break: break-word;
 }
 
+.session-inspector-v2__entry-value-size {
+  margin-top: 8px;
+}
+
 .session-inspector-v2__output,
 #statusLog {
   width: 100%;