Polish Session Inspector V2 controls filters and details copy action - PR_26128_017-session-inspector-v2-controls-polish

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_controls_polish.md

@@ -0,0 +1,24 @@
+# PR_26128_017 Playwright Session Inspector V2 Controls Polish
+
+## Command
+`npm run test:workspace-v2`
+
+## Result
+PASS: 14/14 tests passed.
+
+## Targeted Coverage
+- Controls accordion contains `Refresh` and `Delete All`.
+- Controls accordion no longer contains `Clear Status`.
+- Status header contains `Status` and `Clear Status`.
+- Refresh, Delete All, and Clear Status fit without text overflow.
+- Storage label and dropdown share a row.
+- Filter label and textbox share a row.
+- Details header includes `Copy` after the collapse/X control.
+- Copy writes the current Details JSON to the clipboard.
+- Successful copy logs `OK`.
+- Copy with empty Details logs `WARN`.
+- Per-tile Delete and Delete All still work.
+- Fullscreen shell behavior and workspace Return nav behavior are still covered by the Session Inspector V2 launch test.
+
+## Skipped
+Full samples smoke test was skipped as requested because this PR changes Session Inspector V2 controls and Details copy behavior only, without touching sample JSON or sample runtime paths.

docs/dev/reports/session_inspector_v2_controls_polish.md

@@ -0,0 +1,36 @@
+# PR_26128_017 Session Inspector V2 Controls Polish
+
+## Summary
+Session Inspector V2 controls were tightened and Details now supports clipboard copy.
+
+## Changes
+- Moved `Clear Status` out of the Controls accordion.
+- Added `Clear Status` to the Status header/action area.
+- Reduced Session Inspector V2 button text padding for compact control rows.
+- Kept `Refresh` and `Delete All` side by side in Controls.
+- Put the Storage label and dropdown on the same row.
+- Put the Filter label and textbox on the same row.
+- Added a `Copy` button in the Details header immediately after the collapse/X control.
+- Copy writes the currently shown Details JSON to the clipboard.
+- Copy logs:
+  - `OK` when Details content is copied.
+  - `WARN` when no Details content is shown.
+  - `FAIL` when the clipboard API fails or is unavailable.
+- Preserved Delete All, per-tile Delete, fullscreen behavior, and workspace Return nav behavior.
+
+## 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 `Clear Status` moved from Controls to Status.
+- Verified Refresh, Delete All, and Clear Status fit without text overflow.
+- Verified Storage label/dropdown are on the same line.
+- Verified Filter label/textbox are on the same line.
+- Verified Details Copy appears after the collapse control.
+- Verified Copy copies the Details content and logs the result.
+
+## Skipped
+Full samples smoke test was skipped as requested. This PR is scoped to Session Inspector V2 control placement, filter layout, and Details copy behavior; sample runtime behavior is outside the changed surface.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -382,6 +382,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     const pageErrors = [];
     await page.setViewportSize({ height: 900, width: 1440 });
     await page.addInitScript(() => {
+      Object.defineProperty(window.navigator, "clipboard", {
+        configurable: true,
+        value: {
+          async writeText(value) {
+            window.__sessionInspectorV2ClipboardText = value;
+          }
+        }
+      });
       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 }));
@@ -415,7 +423,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#clearSessionInspectorV2StatusButton")).toHaveText("Clear Status");
       await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Refresh");
       await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Delete All");
-      await expect(page.locator("#sessionInspectorV2ControlsContent")).toContainText("Clear Status");
+      await expect(page.locator("#sessionInspectorV2ControlsContent")).not.toContainText("Clear Status");
+      await expect(page.locator(".session-inspector-v2__status-accordion-header")).toContainText("Status");
+      await expect(page.locator(".session-inspector-v2__status-accordion-header #clearSessionInspectorV2StatusButton")).toHaveText("Clear Status");
+      await expect(page.locator(".session-inspector-v2__details-accordion-header #copySessionInspectorV2DetailsButton")).toHaveText("Copy");
       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"
@@ -427,6 +438,46 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "(0) LocalStorage."
       ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Session Inspector V2 ready\. Storage is read\/delete\./);
+      const controlsLayout = await page.evaluate(() => {
+        const rectFor = (selector) => {
+          const element = document.querySelector(selector);
+          const rect = element.getBoundingClientRect();
+          return {
+            bottom: Math.round(rect.bottom),
+            clientWidth: element.clientWidth,
+            height: Math.round(rect.height),
+            left: Math.round(rect.left),
+            right: Math.round(rect.right),
+            scrollWidth: element.scrollWidth,
+            top: Math.round(rect.top)
+          };
+        };
+        const refresh = rectFor("#refreshSessionInspectorV2Button");
+        const deleteAll = rectFor("#deleteAllSessionInspectorV2Button");
+        const clearStatus = rectFor("#clearSessionInspectorV2StatusButton");
+        const storageLabel = rectFor('label[for="storageScopeSelect"] span');
+        const storageSelect = rectFor("#storageScopeSelect");
+        const filterLabel = rectFor('label[for="sessionInspectorV2FilterInput"] span');
+        const filterInput = rectFor("#sessionInspectorV2FilterInput");
+        const detailsIcon = rectFor(".session-inspector-v2__details-accordion-header .accordion-v2__icon");
+        const copyButton = rectFor("#copySessionInspectorV2DetailsButton");
+        return {
+          buttonsFit: [refresh, deleteAll, clearStatus].every((rect) => rect.scrollWidth <= rect.clientWidth + 1),
+          clearStatusCompact: clearStatus.height <= 34,
+          copyAfterCollapseIcon: copyButton.left >= detailsIcon.right,
+          deleteAllRightOfRefresh: deleteAll.left > refresh.right,
+          filterSameLine: filterInput.top <= filterLabel.bottom && filterInput.bottom >= filterLabel.top,
+          refreshDeleteSameLine: refresh.top === deleteAll.top,
+          storageSameLine: storageSelect.top <= storageLabel.bottom && storageSelect.bottom >= storageLabel.top
+        };
+      });
+      expect(controlsLayout.buttonsFit).toBe(true);
+      expect(controlsLayout.clearStatusCompact).toBe(true);
+      expect(controlsLayout.refreshDeleteSameLine).toBe(true);
+      expect(controlsLayout.deleteAllRightOfRefresh).toBe(true);
+      expect(controlsLayout.storageSameLine).toBe(true);
+      expect(controlsLayout.filterSameLine).toBe(true);
+      expect(controlsLayout.copyAfterCollapseIcon).toBe(true);
       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");
@@ -563,6 +614,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
 
       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"');
+      const copiedDetailsText = await page.locator("#sessionInspectorV2DetailsOutput").textContent();
+      await page.locator("#copySessionInspectorV2DetailsButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Copied Details content to clipboard\./);
+      expect(await page.evaluate(() => window.__sessionInspectorV2ClipboardText)).toBe(copiedDetailsText);
       await page.locator('[data-session-inspector-v2-delete-entry-id="sessionStorage:session-inspector-v2-alpha"]').click();
       await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(4);
       await expect(page.locator("#sessionInspectorV2DetailsOutput")).toContainText('"key": "session-inspector-v2-beta"');
@@ -595,6 +650,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "(0) LocalStorage."
       ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted 4 shown storage entries\./);
+      await page.locator("#copySessionInspectorV2DetailsButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/WARN Copy skipped: no Details content is shown\./);
       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");

tools/session-inspector-v2/index.html

@@ -52,7 +52,6 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
             <div class="session-inspector-v2__actions" aria-label="Session Inspector V2 controls">
               <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>
@@ -98,10 +97,13 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
 
       <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 details">
         <section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
-          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2DetailsContent">
+          <div class="accordion-v2__header session-inspector-v2__details-accordion-header" role="button" tabindex="0" aria-expanded="true" aria-controls="sessionInspectorV2DetailsContent">
             <span>Details</span>
-            <span class="accordion-v2__icon" aria-hidden="true">+</span>
-          </button>
+            <div class="session-inspector-v2__details-header-actions">
+              <span class="accordion-v2__icon" aria-hidden="true">+</span>
+              <button id="copySessionInspectorV2DetailsButton" type="button">Copy</button>
+            </div>
+          </div>
           <div id="sessionInspectorV2DetailsContent" class="accordion-v2__content">
             <pre id="sessionInspectorV2DetailsOutput" class="session-inspector-v2__output">{}</pre>
           </div>
@@ -112,6 +114,7 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
             <span>Status</span>
             <div class="session-inspector-v2__status-header-actions">
               <span class="accordion-v2__icon" aria-hidden="true">+</span>
+              <button id="clearSessionInspectorV2StatusButton" type="button">Clear Status</button>
             </div>
           </div>
           <div id="sessionInspectorV2StatusContent" class="accordion-v2__content">

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

@@ -1,6 +1,7 @@
 export class SessionInspectorV2App {
   constructor({
     accordions,
+    copyDetailsButton,
     deleteAllButton,
     details,
     entryList,
@@ -13,6 +14,7 @@ export class SessionInspectorV2App {
     windowRef = window
   }) {
     this.accordions = accordions;
+    this.copyDetailsButton = copyDetailsButton;
     this.deleteAllButton = deleteAllButton;
     this.details = details;
     this.entries = [];
@@ -42,6 +44,9 @@ export class SessionInspectorV2App {
       onSelected: (entryId) => this.selectEntry(entryId)
     });
     this.refreshButton.addEventListener("click", () => this.refresh());
+    this.copyDetailsButton.addEventListener("click", () => {
+      void this.copyDetails();
+    });
     this.deleteAllButton.addEventListener("click", () => this.deleteAllShownEntries());
     this.returnToWorkspaceButton.addEventListener("click", () => this.returnToWorkspace());
     this.refresh({ silent: true });
@@ -117,6 +122,24 @@ export class SessionInspectorV2App {
     this.refresh({ silent: true });
   }
 
+  async copyDetails() {
+    const detailsText = this.details.text().trim();
+    if (!detailsText || detailsText === "{}") {
+      this.statusLog.warn("Copy skipped: no Details content is shown.");
+      return;
+    }
+    if (typeof this.window.navigator?.clipboard?.writeText !== "function") {
+      this.statusLog.fail("Copy failed: clipboard API is unavailable.");
+      return;
+    }
+    try {
+      await this.window.navigator.clipboard.writeText(detailsText);
+      this.statusLog.ok("Copied Details content to clipboard.");
+    } catch (error) {
+      this.statusLog.fail(`Copy failed: ${error.message}`);
+    }
+  }
+
   workspaceManagerUrl() {
     const url = new URL("../workspace-manager-v2/index.html", this.window.location.href);
     const params = new URLSearchParams(this.window.location.search || "");

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

@@ -18,6 +18,7 @@ function requireElement(selector) {
 window.addEventListener("DOMContentLoaded", () => {
   const app = new SessionInspectorV2App({
     accordions: Array.from(document.querySelectorAll(".accordion-v2"), (section) => new AccordionSection(section)),
+    copyDetailsButton: requireElement("#copySessionInspectorV2DetailsButton"),
     details: new DetailsControl({
       output: requireElement("#sessionInspectorV2DetailsOutput")
     }),

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

@@ -7,6 +7,10 @@ export class DetailsControl {
     this.output.textContent = "{}";
   }
 
+  text() {
+    return String(this.output.textContent || "");
+  }
+
   render(entry) {
     if (!entry) {
       this.clear();

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

@@ -45,6 +45,7 @@ button {
   background: var(--session-inspector-v2-surface);
   color: var(--session-inspector-v2-text);
   cursor: pointer;
+  padding: 3px 7px;
 }
 
 button:hover {
@@ -254,6 +255,8 @@ button:hover {
 
 .session-inspector-v2__field {
   display: grid;
+  grid-template-columns: 68px minmax(0, 1fr);
+  align-items: center;
   gap: 6px;
 }
 
@@ -275,6 +278,7 @@ button:hover {
 
 .session-inspector-v2__field input,
 .session-inspector-v2__field select {
+  width: 100%;
   min-height: 38px;
   padding: 6px 8px;
 }
@@ -387,12 +391,19 @@ button:hover {
   resize: vertical;
 }
 
+.session-inspector-v2__details-header-actions,
 .session-inspector-v2__status-header-actions {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 
+.session-inspector-v2__details-header-actions button,
+.session-inspector-v2__status-header-actions button {
+  min-height: 30px;
+  padding: 2px 7px;
+}
+
 @media (max-width: 980px) {
   .session-inspector-v2__layout {
     grid-template-columns: 1fr;