Fix Session Inspector V2 workspace return layout accordions and V2 header styling - PR_26128_013-session-inspector-v2-layout-fix

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_layout_fix.md

@@ -0,0 +1,23 @@
+# PR_26128_013 Playwright Session Inspector V2 Layout Fix
+
+## Command
+`npm run test:workspace-v2`
+
+## Result
+PASS: 14/14 tests passed.
+
+## Targeted Coverage
+- Session Inspector V2 launches from `tools/session-inspector-v2/index.html`.
+- `Return to Workspace` is present and returns to Workspace Manager V2 with launch context preserved.
+- The old loose action nav is absent.
+- The left column shows `Controls` before `Filters`.
+- `Refresh`, `Delete All`, and `Clear Status` are inside the `Controls` accordion.
+- The count display renders `(N) Entries shown.`, `(N) SessionStorage.`, and `(N) LocalStorage.` as separate lines.
+- Controls, Filters, Entries, Details, and Status accordions all open and close from header label and icon clicks.
+- Header frame and app shell use V2 boxed frame styling and existing theme tokens.
+- Per-entry Delete still removes the selected session entry, refreshes the UI immediately, and logs `OK`.
+- A simulated delete failure still logs `FAIL`.
+- Delete All still clears displayed entries, refreshes counts/details immediately, and logs `OK` or `WARN`.
+
+## Skipped
+Full samples smoke test was skipped as requested because this PR changes Session Inspector V2 layout/control behavior and does not touch sample JSON or sample runtime paths.

docs/dev/reports/session_inspector_v2_layout_fix.md

@@ -0,0 +1,34 @@
+# PR_26128_013 Session Inspector V2 Layout Fix
+
+## Summary
+Session Inspector V2 layout was tightened so controls, counts, and the local shell match the V2 tool frame pattern.
+
+## Changes
+- Added a `Return to Workspace` control to Session Inspector V2.
+- Moved `Refresh`, `Delete All`, and `Clear Status` into a `Controls` accordion above `Filters`.
+- Updated the count display to the requested three-line format:
+  - `(N) Entries shown.`
+  - `(N) SessionStorage.`
+  - `(N) LocalStorage.`
+- Kept all Session Inspector V2 accordions mounted through the shared accordion behavior.
+- Fixed accordion header child-click handling so clicking header labels or icons toggles button-backed accordions, matching the Status accordion behavior.
+- Boxed the Session Inspector V2 header frame and app shell with V2 frame/display-box styling and existing theme tokens.
+- Preserved per-entry 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 Session Inspector V2 has `Return to Workspace`.
+- Verified the count display uses the requested parenthesized three-line format.
+- Verified `Refresh`, `Delete All`, and `Clear Status` are inside the `Controls` accordion above `Filters`.
+- Verified every Session Inspector V2 accordion opens and closes from header label and icon clicks.
+- Verified below-header content uses boxed V2 frame styling.
+- Verified per-item Delete and Delete All still work and update the UI immediately.
+
+## Skipped
+Full samples smoke test was skipped as requested. This PR is scoped to Session Inspector V2 layout, controls, and targeted Workspace Manager V2 launch coverage; sample runtime behavior is outside the changed surface.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -25,10 +25,10 @@ async function openToolsIndex(page) {
   return server;
 }
 
-async function openSessionInspectorV2(page) {
+async function openSessionInspectorV2(page, query = "") {
   const server = await startRepoServer();
   await coverageReporter.start(page);
-  await page.goto(`${server.baseUrl}/tools/session-inspector-v2/index.html`, { waitUntil: "networkidle" });
+  await page.goto(`${server.baseUrl}/tools/session-inspector-v2/index.html${query}`, { waitUntil: "networkidle" });
   return server;
 }
 
@@ -173,13 +173,15 @@ async function readWorkspaceSessionHydration(page) {
 async function expectSessionInspectorV2AccordionToggles(page, contentId) {
   const header = page.locator(`.accordion-v2__header[aria-controls="${contentId}"]`);
   const content = page.locator(`#${contentId}`);
+  const label = header.locator("span").first();
+  const icon = header.locator(".accordion-v2__icon");
   await expect(header).toBeVisible();
   await expect(content).toBeVisible();
   await expect(header).toHaveAttribute("aria-expanded", "true");
-  await header.click();
+  await label.click();
   await expect(content).toBeHidden();
   await expect(header).toHaveAttribute("aria-expanded", "false");
-  await header.click();
+  await icon.click();
   await expect(content).toBeVisible();
   await expect(header).toHaveAttribute("aria-expanded", "true");
 }
@@ -325,7 +327,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       window.sessionStorage.setItem("session-inspector-v2-beta", "plain beta value");
       window.localStorage.setItem("session-inspector-v2-local", "local value");
     });
-    const server = await openSessionInspectorV2(page);
+    const server = await openSessionInspectorV2(page, "?launch=workspace&fromTool=workspace-manager-v2&hostContextId=session-inspector-v2-test-context&workspaceMode=uat");
 
     page.on("pageerror", (error) => {
       pageErrors.push(error.message);
@@ -337,16 +339,33 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("h1")).not.toHaveText("Session Inspector");
       await expect(page.locator('link[href="./styles/sessionInspectorV2.css"]')).toHaveCount(1);
       await expect(page.locator('link[href="./styles/sessionInspector.css"]')).toHaveCount(0);
+      await expect(page.locator(".session-inspector-v2__menu")).toHaveCount(0);
+      await expect(page.locator("#returnToWorkspaceButton")).toHaveText("Return to Workspace");
       await expect(page.locator("#refreshSessionInspectorV2Button")).toHaveText("Refresh");
       await expect(page.locator("#deleteAllSessionInspectorV2Button")).toHaveText("Delete All");
       await expect(page.locator("#clearSessionInspectorV2StatusButton")).toHaveText("Clear Status");
+      await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Return to Workspace");
+      await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Refresh");
+      await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Delete All");
+      await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Clear Status");
+      expect(await page.locator(".session-inspector-v2__panel--left > .accordion-v2 > .accordion-v2__header > span:first-child").evaluateAll((labels) => labels.map((label) => label.textContent.trim()))).toEqual([
+        "Controls",
+        "Filters"
+      ]);
       await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(2);
-      await expect(page.locator("#sessionInspectorV2Summary")).toHaveText("2 entries shown. sessionStorage: 2. localStorage: 0.");
+      await expect(page.locator("#sessionInspectorV2Summary > span")).toHaveText([
+        "(2) Entries shown.",
+        "(2) SessionStorage.",
+        "(0) LocalStorage."
+      ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Session Inspector V2 ready\. Storage is read\/delete\./);
 
       const themeState = await page.evaluate(async () => {
         const css = await fetch("/tools/session-inspector-v2/styles/sessionInspectorV2.css", { cache: "no-store" }).then((response) => response.text());
         const bodyStyle = getComputedStyle(document.body);
+        const shellStyle = getComputedStyle(document.querySelector(".session-inspector-v2.app-shell"));
+        const headerFrameStyle = getComputedStyle(document.querySelector(".session-inspector-v2__local-shell-frame"));
+        const headerSummaryStyle = getComputedStyle(document.querySelector(".session-inspector-v2__local-shell-frame .tools-platform-frame__accordion-summary"));
         const panelStyle = getComputedStyle(document.querySelector(".session-inspector-v2__panel"));
         const inputStyle = getComputedStyle(document.querySelector("#sessionInspectorV2FilterInput"));
         const probeStyle = (property, value) => {
@@ -370,19 +389,31 @@ test.describe("Workspace Manager V2 bootstrap", () => {
             "--session-inspector-v2-accent: var(--accent);"
           ].every((snippet) => css.includes(snippet)),
           expectedBackground: probeStyle("backgroundImage", "var(--bg-gradient)"),
+          expectedLine: probeStyle("borderColor", "var(--line)"),
           expectedPanel: probeStyle("backgroundColor", "var(--panel)"),
           expectedSurface: probeStyle("backgroundColor", "var(--surface-inline)"),
+          headerBorder: headerFrameStyle.borderTopColor,
+          headerRadius: headerFrameStyle.borderTopLeftRadius,
+          headerSummaryBackground: headerSummaryStyle.backgroundColor,
           inputBackground: inputStyle.backgroundColor,
+          shellBorder: shellStyle.borderTopColor,
+          shellRadius: shellStyle.borderTopLeftRadius,
           panelBackground: panelStyle.backgroundColor
         };
       });
       expect(themeState.cssHasHardcodedColors).toBe(false);
       expect(themeState.cssUsesThemeTokens).toBe(true);
       expect(themeState.bodyBackground).toBe(themeState.expectedBackground);
+      expect(themeState.headerBorder).toBe(themeState.expectedLine);
+      expect(themeState.headerRadius).toBe("18px");
+      expect(themeState.headerSummaryBackground).toBe(themeState.expectedPanel);
+      expect(themeState.shellBorder).toBe(themeState.expectedLine);
+      expect(themeState.shellRadius).toBe("20px");
       expect(themeState.panelBackground).toBe(themeState.expectedPanel);
       expect(themeState.inputBackground).toBe(themeState.expectedSurface);
 
       for (const contentId of [
+        "sessionInspectorV2ControlsContent",
         "sessionInspectorV2FiltersContent",
         "sessionInspectorV2EntriesContent",
         "sessionInspectorV2DetailsContent",
@@ -419,11 +450,18 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(0);
       await expect(page.locator("#sessionInspectorV2EntryList")).toContainText("No matching storage entries.");
       await expect(page.locator("#sessionInspectorV2DetailsOutput")).toHaveText("{}");
+      await expect(page.locator("#sessionInspectorV2Summary > span")).toHaveText([
+        "(0) Entries shown.",
+        "(0) SessionStorage.",
+        "(0) LocalStorage."
+      ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted 1 shown storage entry\./);
       await page.locator("#deleteAllSessionInspectorV2Button").click();
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Delete All skipped: no matching storage entries are shown\./);
       expect(await page.evaluate(() => window.localStorage.getItem("session-inspector-v2-local"))).toBe("local value");
       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/);
     } finally {
       await coverageReporter.stop(page);
       await server.close();

tools/session-inspector-v2/index.html

@@ -15,7 +15,7 @@
       <summary class="is-collapsible__summary" data-session-inspector-v2-summary>Hide Header and Details</summary>
       <div class="is-collapsible__content">
         <div id="shared-theme-header"></div>
-        <header class="session-inspector-v2__header" data-session-inspector-v2-header>
+        <div class="session-inspector-v2__header-frame" data-session-inspector-v2-header>
           <section class="tools-platform-frame session-inspector-v2__local-shell-frame">
             <div class="tools-platform-frame__accordion-content">
               <div class="tools-platform-frame__accordion-summary">
@@ -29,18 +29,27 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
               </div>
             </div>
           </section>
-        </header>
+        </div>
       </div>
     </details>
 
-    <nav class="session-inspector-v2__menu" aria-label="Session Inspector V2 actions">
-      <button id="refreshSessionInspectorV2Button" type="button">Refresh</button>
-      <button id="deleteAllSessionInspectorV2Button" type="button">Delete All</button>
-      <button id="clearSessionInspectorV2StatusButton" type="button">Clear Status</button>
-    </nav>
-
     <main class="session-inspector-v2 app-shell" data-tool-id="session-inspector-v2">
       <aside class="session-inspector-v2__panel session-inspector-v2__panel--left" aria-label="Session filters">
+        <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--controls is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2ControlsContent">
+            <span>Controls</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="sessionInspectorV2ControlsContent" class="accordion-v2__content">
+            <div class="session-inspector-v2__actions" aria-label="Session Inspector V2 controls">
+              <button id="returnToWorkspaceButton" type="button">Return to Workspace</button>
+              <button id="refreshSessionInspectorV2Button" type="button">Refresh</button>
+              <button id="deleteAllSessionInspectorV2Button" type="button">Delete All</button>
+              <button id="clearSessionInspectorV2StatusButton" type="button">Clear Status</button>
+            </div>
+          </div>
+        </section>
+
         <section class="accordion-v2 session-inspector-v2__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2FiltersContent">
             <span>Filters</span>
@@ -59,7 +68,11 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
               <span>Filter</span>
               <input id="sessionInspectorV2FilterInput" type="search" autocomplete="off" placeholder="Key or value text">
             </label>
-            <p id="sessionInspectorV2Summary" class="session-inspector-v2__hint">No storage entries loaded.</p>
+            <div id="sessionInspectorV2Summary" class="session-inspector-v2__summary-counts" aria-live="polite">
+              <span>(0) Entries shown.</span>
+              <span>(0) SessionStorage.</span>
+              <span>(0) LocalStorage.</span>
+            </div>
           </div>
         </section>
       </aside>

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

@@ -6,9 +6,11 @@ export class SessionInspectorV2App {
     entryList,
     filters,
     refreshButton,
+    returnToWorkspaceButton,
     runtimeContract,
     statusLog,
-    storageService
+    storageService,
+    windowRef = window
   }) {
     this.accordions = accordions;
     this.deleteAllButton = deleteAllButton;
@@ -17,10 +19,12 @@ export class SessionInspectorV2App {
     this.entryList = entryList;
     this.filters = filters;
     this.refreshButton = refreshButton;
+    this.returnToWorkspaceButton = returnToWorkspaceButton;
     this.runtimeContract = runtimeContract || { storageAccess: "read-only" };
     this.statusLog = statusLog;
     this.storageService = storageService;
     this.selectedId = "";
+    this.window = windowRef;
   }
 
   start() {
@@ -35,6 +39,7 @@ export class SessionInspectorV2App {
     });
     this.refreshButton.addEventListener("click", () => this.refresh());
     this.deleteAllButton.addEventListener("click", () => this.deleteAllShownEntries());
+    this.returnToWorkspaceButton.addEventListener("click", () => this.returnToWorkspace());
     this.refresh({ silent: true });
     this.statusLog.ok(`Session Inspector V2 ready. Storage is ${this.runtimeContract.storageAccess}.`);
   }
@@ -49,17 +54,17 @@ export class SessionInspectorV2App {
     }
     this.entryList.render(this.entries, this.selectedId);
     this.details.render(this.entries.find((entry) => entry.id === this.selectedId));
-    this.filters.setSummary(this.summaryText());
+    this.filters.setSummary(this.summaryCounts());
     if (!silent) {
       this.statusLog.ok(`Loaded ${this.entries.length} matching storage entries.`);
     }
   }
 
-  summaryText() {
+  summaryCounts() {
     const sessionCount = this.entries.filter((entry) => entry.storageType === "sessionStorage").length;
     const localCount = this.entries.filter((entry) => entry.storageType === "localStorage").length;
     const totalCount = this.entries.length;
-    return `${totalCount} entries shown. sessionStorage: ${sessionCount}. localStorage: ${localCount}.`;
+    return { localCount, sessionCount, totalCount };
   }
 
   selectEntry(entryId) {
@@ -107,4 +112,21 @@ export class SessionInspectorV2App {
     this.selectedId = "";
     this.refresh({ silent: true });
   }
+
+  workspaceManagerUrl() {
+    const url = new URL("../workspace-manager-v2/index.html", this.window.location.href);
+    const params = new URLSearchParams(this.window.location.search || "");
+    const hostContextId = params.get("hostContextId") || "";
+    if (hostContextId) {
+      url.searchParams.set("hostContextId", hostContextId);
+    }
+    if (params.get("workspaceMode")?.toLowerCase() === "uat") {
+      url.searchParams.set("workspace", "uat");
+    }
+    return url.href;
+  }
+
+  returnToWorkspace() {
+    this.window.location.href = this.workspaceManagerUrl();
+  }
 }

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

@@ -31,6 +31,7 @@ window.addEventListener("DOMContentLoaded", () => {
       summary: requireElement("#sessionInspectorV2Summary")
     }),
     refreshButton: requireElement("#refreshSessionInspectorV2Button"),
+    returnToWorkspaceButton: requireElement("#returnToWorkspaceButton"),
     runtimeContract: sessionInspectorV2RuntimeContract(),
     statusLog: new StatusLogControl({
       clearButton: requireElement("#clearSessionInspectorV2StatusButton"),

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

@@ -14,9 +14,10 @@ export class AccordionSection {
     this.header.dataset.accordionV2Bound = "true";
     this.setOpen(this.section.dataset.accordionV2Open !== "false");
     this.header.addEventListener("click", (event) => {
-      const clickedNestedButton = event.target instanceof Element
-        && event.target.closest("button")
-        && event.target !== this.header;
+      const clickedButton = event.target instanceof Element
+        ? event.target.closest("button")
+        : null;
+      const clickedNestedButton = clickedButton && clickedButton !== this.header;
       if (clickedNestedButton) {
         return;
       }

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

@@ -22,7 +22,17 @@ export class FilterControl {
     return String(this.scopeSelect.value || "sessionStorage");
   }
 
-  setSummary(value) {
-    this.summary.textContent = value;
+  setSummary({ localCount = 0, sessionCount = 0, totalCount = 0 } = {}) {
+    const lines = [
+      `(${totalCount}) Entries shown.`,
+      `(${sessionCount}) SessionStorage.`,
+      `(${localCount}) LocalStorage.`
+    ];
+    const documentRef = this.summary.ownerDocument || document;
+    this.summary.replaceChildren(...lines.map((line) => {
+      const item = documentRef.createElement("span");
+      item.textContent = line;
+      return item;
+    }));
   }
 }