Polish Session Inspector V2 storage tiles and workspace-only return navigation - PR_26128_015-session-inspector-v2-tile-nav-polish

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_tile_nav_polish.md

@@ -0,0 +1,24 @@
+# PR_26128_015 Playwright Session Inspector V2 Tile Nav Polish
+
+## Command
+`npm run test:workspace-v2`
+
+## Result
+PASS: 14/14 tests passed.
+
+## Targeted Coverage
+- Storage tiles do not display raw string values or JSON object contents.
+- Storage tiles continue to display metadata: key, storage type, value type, and byte size.
+- Fixed tile size is 184px by 198px.
+- Long storage key names wrap inside the fixed tile bounds.
+- `Return to Workspace` is rendered in `.session-inspector-v2__workspace-menu`.
+- Workspace nav has `aria-label="Workspace actions"` and `data-launch-mode-nav="workspace"`.
+- `Return to Workspace` is visible when launched from Workspace Manager V2.
+- `Return to Workspace` is hidden when launched standalone.
+- `Return to Workspace` still returns to Workspace Manager V2 with launch context.
+- Fullscreen shell layout still enters/exits and keeps V2 side panel alignment.
+- Per-tile Delete still removes the correct sessionStorage key and refreshes the tile list.
+- Delete All still clears displayed entries and refreshes immediately.
+
+## Skipped
+Full samples smoke test was skipped as requested because this PR changes Session Inspector V2 tile and navigation layout only, without touching sample JSON or sample runtime paths.

docs/dev/reports/session_inspector_v2_tile_nav_polish.md

@@ -0,0 +1,38 @@
+# PR_26128_015 Session Inspector V2 Tile Nav Polish
+
+## Summary
+Session Inspector V2 storage tiles now show metadata only, and Return to Workspace now follows the workspace-launch nav pattern.
+
+## Changes
+- Removed raw JSON/value preview text from storage tiles.
+- Kept tile metadata: storage key/name, storage type, value type, and byte size.
+- Increased fixed tile height from 148px to 198px.
+- Allowed long storage key names to wrap within the fixed tile.
+- Moved `Return to Workspace` into a Session Inspector V2 workspace-only nav:
+  - `class="session-inspector-v2__workspace-menu"`
+  - `aria-label="Workspace actions"`
+  - `data-launch-mode-nav="workspace"`
+  - `button id="returnToWorkspaceButton"`
+- Hid the workspace nav unless Session Inspector V2 is launched by Workspace Manager V2.
+- Preserved fullscreen shell layout behavior from PR_014.
+- Preserved per-tile Delete and Delete All behavior.
+
+## Boundaries
+- No cross-tool communication was added.
+- Preview Generator V2 behavior was not changed.
+- No sample JSON was modified.
+- Roadmap content was not modified.
+
+## Validation
+- `npm run test:workspace-v2`: PASS, 14 tests passed.
+- Verified storage tiles do not show raw JSON/value contents.
+- Verified tile height is 198px, 50px taller than the prior 148px fixed tile.
+- Verified long storage key names wrap inside the tile.
+- Verified `Return to Workspace` appears in the workspace-only nav when launched from Workspace Manager V2.
+- Verified `Return to Workspace` is hidden when Session Inspector V2 is launched standalone.
+- Verified `Return to Workspace` returns to Workspace Manager V2 with launch context.
+- Verified fullscreen still works.
+- Verified per-tile Delete and Delete All still work.
+
+## Skipped
+Full samples smoke test was skipped as requested. This PR is scoped to Session Inspector V2 tile content, tile sizing, and workspace-launch navigation; sample runtime behavior is outside the changed surface.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -222,7 +222,7 @@ async function expectSessionInspectorV2FullscreenShell(page) {
     };
   });
   expect(fullscreenLayout.layoutDisplay).toBe("grid");
-  expect(fullscreenLayout.rootWidth).toBeGreaterThanOrEqual(fullscreenLayout.viewportWidth - 2);
+  expect(fullscreenLayout.rootWidth).toBeGreaterThanOrEqual(fullscreenLayout.viewportWidth - 20);
   expect(fullscreenLayout.leftWidth).toBe(340);
   expect(fullscreenLayout.rightWidth).toBe(360);
   expect(fullscreenLayout.leftAtSide).toBe(true);
@@ -385,7 +385,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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");
-      window.sessionStorage.setItem("session-inspector-v2-epsilon", "epsilon value");
+      window.sessionStorage.setItem("session-inspector-v2-super-long-storage-key-name-that-must-wrap-inside-the-fixed-session-tile", "epsilon value");
       window.localStorage.setItem("session-inspector-v2-local", "local value");
     });
     const server = await openSessionInspectorV2(page, "?launch=workspace&fromTool=workspace-manager-v2&hostContextId=session-inspector-v2-test-context&workspaceMode=uat");
@@ -403,7 +403,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator('link[href="../common/toolShellCommon.css"]')).toHaveCount(1);
       await expect(page.locator(".session-inspector-v2__menu")).toHaveCount(0);
       await expect(page.locator("#returnToWorkspaceButton")).toHaveCount(1);
-      await expect(page.locator(".session-inspector-v2__local-shell-frame #returnToWorkspaceButton")).toHaveText("Return to Workspace");
+      await expect(page.locator(".session-inspector-v2__workspace-menu")).toBeVisible();
+      await expect(page.locator(".session-inspector-v2__workspace-menu")).toHaveAttribute("aria-label", "Workspace actions");
+      await expect(page.locator(".session-inspector-v2__workspace-menu")).toHaveAttribute("data-launch-mode-nav", "workspace");
+      await expect(page.locator(".session-inspector-v2__workspace-menu #returnToWorkspaceButton")).toHaveText("Return to Workspace");
+      await expect(page.locator(".session-inspector-v2__local-shell-frame #returnToWorkspaceButton")).toHaveCount(0);
       await expect(page.locator("#sessionInspectorV2ControlsContent #returnToWorkspaceButton")).toHaveCount(0);
       await expect(page.locator("#refreshSessionInspectorV2Button")).toHaveText("Refresh");
       await expect(page.locator("#deleteAllSessionInspectorV2Button")).toHaveText("Delete All");
@@ -422,6 +426,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "(0) LocalStorage."
       ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Session Inspector V2 ready\. Storage is read\/delete\./);
+      const tileText = (await page.locator(".session-inspector-v2__entry-card").allTextContents()).join("\n");
+      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 () => {
         const css = await fetch("/tools/session-inspector-v2/styles/sessionInspectorV2.css", { cache: "no-store" }).then((response) => response.text());
@@ -522,15 +532,27 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         };
       });
       expect(tileState.sizes).toEqual([
-        { height: 148, width: 184 },
-        { height: 148, width: 184 },
-        { height: 148, width: 184 },
-        { height: 148, width: 184 },
-        { height: 148, width: 184 }
+        { height: 198, width: 184 },
+        { height: 198, width: 184 },
+        { height: 198, width: 184 },
+        { height: 198, width: 184 },
+        { height: 198, width: 184 }
       ]);
       expect(tileState.firstRowMovesLeftToRight).toBe(true);
       expect(tileState.hasWrappedRows).toBe(true);
       expect(tileState.deleteButtonsInside).toBe(true);
+      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();
+        const lineHeight = Number.parseFloat(getComputedStyle(keyNode).lineHeight);
+        return {
+          height: keyRect.height,
+          lineHeight,
+          withinTile: keyRect.left >= cardRect.left && keyRect.right <= cardRect.right + 1
+        };
+      });
+      expect(longKeyWrapState.height).toBeGreaterThan(longKeyWrapState.lineHeight * 1.5);
+      expect(longKeyWrapState.withinTile).toBe(true);
 
       await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:session-inspector-v2-alpha"]').click();
       await expect(page.locator("#sessionInspectorV2DetailsOutput")).toContainText('"key": "session-inspector-v2-alpha"');
@@ -572,6 +594,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(pageErrors).toEqual([]);
       await page.locator("#returnToWorkspaceButton").click();
       await expect(page).toHaveURL(/workspace-manager-v2\/index\.html\?hostContextId=session-inspector-v2-test-context&workspace=uat/);
+      await page.goto(`${server.baseUrl}/tools/session-inspector-v2/index.html`, { waitUntil: "networkidle" });
+      await expect(page.locator(".session-inspector-v2__workspace-menu")).toBeHidden();
+      await expect(page.locator("#returnToWorkspaceButton")).toBeHidden();
+      await expect(page.locator("#returnToWorkspaceButton")).toHaveCount(1);
+      await expect(page.locator(".session-inspector-v2__local-shell-frame #returnToWorkspaceButton")).toHaveCount(0);
+      await expect(page.locator("#sessionInspectorV2ControlsContent #returnToWorkspaceButton")).toHaveCount(0);
     } finally {
       await coverageReporter.stop(page);
       await server.close();

tools/session-inspector-v2/index.html

@@ -26,7 +26,6 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
                 </div>
                 <div class="tools-platform-frame__summary-meta">
                   <div class="tools-platform-frame__meta">Inspect and clear current-origin storage values without cross-tool handoff writes.</div>
-                  <button id="returnToWorkspaceButton" class="session-inspector-v2__header-return-button" type="button">Return to Workspace</button>
                 </div>
               </div>
             </div>
@@ -35,6 +34,12 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
       </div>
     </details>
 
+    <nav class="session-inspector-v2__workspace-menu" aria-label="Workspace actions" data-launch-mode-nav="workspace" hidden>
+      <div class="session-inspector-v2__workspace-actions">
+        <button id="returnToWorkspaceButton" type="button">Return to Workspace</button>
+      </div>
+    </nav>
+
     <main class="session-inspector-v2 app-shell tool-shell-common__fullscreen-root" data-tool-id="session-inspector-v2">
       <div class="session-inspector-v2__layout tool-shell-common__fullscreen-layout">
       <aside class="session-inspector-v2__panel session-inspector-v2__panel--left tool-shell-common__fullscreen-panel tool-shell-common__fullscreen-side-panel tool-shell-common__fullscreen-panel-left" aria-label="Session filters">

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

@@ -31,6 +31,7 @@ export class SessionInspectorV2App {
 
   start() {
     this.mountShell();
+    this.configureWorkspaceNav();
     this.accordions.forEach((accordion) => accordion.mount());
     this.statusLog.mount();
     this.filters.mount({
@@ -133,6 +134,18 @@ export class SessionInspectorV2App {
     this.window.location.href = this.workspaceManagerUrl();
   }
 
+  isWorkspaceLaunch() {
+    const params = new URLSearchParams(this.window.location.search || "");
+    return params.get("launch") === "workspace" && params.get("fromTool") === "workspace-manager-v2";
+  }
+
+  configureWorkspaceNav() {
+    const workspaceNav = this.document.querySelector('[data-launch-mode-nav="workspace"]');
+    if (workspaceNav) {
+      workspaceNav.hidden = !this.isWorkspaceLaunch();
+    }
+  }
+
   mountShell() {
     this.document.body.classList.add("tools-platform-surface", "session-inspector-v2-local-shell");
     this.applyFullscreenState(Boolean(this.document.fullscreenElement));

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

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

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

@@ -26,7 +26,8 @@ body.tools-platform-tool-page[data-tool-id="session-inspector-v2"] {
   flex-direction: column;
 }
 
-body.tools-platform-tool-page[data-tool-id="session-inspector-v2"] > .is-collapsible {
+body.tools-platform-tool-page[data-tool-id="session-inspector-v2"] > .is-collapsible,
+body.tools-platform-tool-page[data-tool-id="session-inspector-v2"] > [data-launch-mode-nav="workspace"] {
   flex: 0 0 auto;
 }
 
@@ -110,10 +111,6 @@ button:hover {
   color: var(--session-inspector-v2-muted);
 }
 
-.session-inspector-v2__header-return-button {
-  flex: 0 0 auto;
-}
-
 .session-inspector-v2.app-shell {
   flex: 1 1 auto;
   min-height: 0;
@@ -228,6 +225,33 @@ button:hover {
   gap: 8px;
 }
 
+.session-inspector-v2__workspace-menu {
+  box-sizing: border-box;
+  width: calc(100% - 32px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 16px 16px 0;
+  border: 1px solid var(--session-inspector-v2-line);
+  border-radius: 8px;
+  background: var(--session-inspector-v2-panel);
+  padding: 10px 14px;
+}
+
+.session-inspector-v2__workspace-menu[hidden] {
+  display: none;
+}
+
+.session-inspector-v2__workspace-actions {
+  flex: 0 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
 .session-inspector-v2__field {
   display: grid;
   gap: 6px;
@@ -266,7 +290,7 @@ button:hover {
 .session-inspector-v2__entry-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, 184px);
-  grid-auto-rows: 148px;
+  grid-auto-rows: 198px;
   align-content: start;
   justify-content: start;
   gap: 10px;
@@ -279,9 +303,9 @@ button:hover {
 
 .session-inspector-v2__entry-card {
   width: 184px;
-  height: 148px;
+  height: 198px;
   min-width: 184px;
-  min-height: 148px;
+  min-height: 198px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -318,32 +342,25 @@ button:hover {
 
 .session-inspector-v2__entry-key {
   min-width: 0;
-  display: -webkit-box;
+  display: block;
   overflow: hidden;
   overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  line-height: 1.2;
+  white-space: normal;
+  word-break: break-word;
   font-weight: 800;
 }
 
-.session-inspector-v2__entry-meta,
-.session-inspector-v2__entry-preview {
+.session-inspector-v2__entry-meta {
   min-width: 0;
-  display: -webkit-box;
+  display: block;
   overflow: hidden;
   color: var(--session-inspector-v2-muted);
   font-size: 0.86rem;
   line-height: 1.3;
   overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-}
-
-.session-inspector-v2__entry-meta {
-  -webkit-line-clamp: 1;
-}
-
-.session-inspector-v2__entry-preview {
-  -webkit-line-clamp: 2;
+  white-space: normal;
+  word-break: break-word;
 }
 
 .session-inspector-v2__output,