Skip to content

Commit 77f7442

Browse files
author
DavidQ
committed
Deep rename Session Inspector to Session Inspector V2 with workspace registration and delete controls - PR_26128_012-session-inspector-v2-deep-rename
1 parent 1abd81b commit 77f7442

27 files changed

Lines changed: 784 additions & 444 deletions

‎docs/dev/reports/playwright_session_inspector_v2_deep_rename.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# PR_26128_012 Playwright Session Inspector V2 Deep Rename
2+
3+
## Command
4+
`npm run test:workspace-v2`
5+
6+
## Result
7+
PASS: 14/14 tests passed.
8+
9+
## Targeted Coverage
10+
- Tools index shows `Session Inspector V2` and does not show the old exact `Session Inspector` card label.
11+
- Workspace Manager V2 shows `Session Inspector V2` in the Viewers tool group.
12+
- Workspace Manager V2 no longer exposes an old `session-inspector` tile id.
13+
- Workspace Manager V2 hydrates `workspace.tools.session-inspector-v2.schema` and `workspace.tools.session-inspector-v2.state`.
14+
- Session Inspector V2 launches from `tools/session-inspector-v2/index.html`.
15+
- Session Inspector V2 uses V2 page labels, ids, stylesheet path, and tool id.
16+
- Session Inspector V2 accordions open and close.
17+
- Session Inspector V2 CSS uses shared theme tokens.
18+
- Per-entry Delete removes the selected sessionStorage entry, updates the list/details immediately, and logs `OK`.
19+
- Simulated storage deletion failure logs `FAIL` and keeps the entry visible.
20+
- Delete All clears remaining displayed sessionStorage entries and logs `OK`.
21+
- Delete All on an empty displayed list logs `WARN`.
22+
23+
## Skipped
24+
Full samples smoke test was skipped as requested because this PR affects Session Inspector V2, Workspace Manager V2 registration, and targeted tool launch UI rather than sample runtime behavior.

‎docs/dev/reports/session_inspector_v2_deep_rename.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# PR_26128_012 Session Inspector V2 Deep Rename
2+
3+
## Summary
4+
Session Inspector was deep-renamed to Session Inspector V2 and moved to `tools/session-inspector-v2/**`.
5+
6+
## Runtime Changes
7+
- Removed the old `tools/session-inspector/**` tool path.
8+
- Added `tools/session-inspector-v2/**` with V2 class names, file names, CSS classes, data attributes, DOM ids, runtime contract, and page labels.
9+
- Updated `tools/toolRegistry.js` to register only `session-inspector-v2`.
10+
- Updated tools index grouping and shared platform shell references from `session-inspector` to `session-inspector-v2`.
11+
- Added Session Inspector V2 to Workspace Manager V2 launchable tool tiles.
12+
- Added Workspace Manager V2 index metadata for the Session Inspector V2 tool surface.
13+
- Added per-entry Delete controls and a Delete All control.
14+
- Delete actions refresh the displayed storage list immediately and log `OK`, `WARN`, or `FAIL` status entries.
15+
16+
## Boundaries
17+
- No cross-tool communication was added.
18+
- Preview Generator V2 session repo load behavior was not changed.
19+
- No sample JSON was modified.
20+
- Roadmap content was not modified.
21+
22+
## Validation
23+
- `npm run test:workspace-v2`: PASS, 14 tests passed.
24+
- Verified `tools/session-inspector-v2/**` exists.
25+
- Verified `tools/session-inspector/**` is removed.
26+
- Verified old `session-inspector` registry/navigation ids are absent from active registry/index/shell/workspace-manager files.
27+
- Verified Session Inspector V2 appears in tools index and Workspace Manager V2 tool UI.
28+
- Verified Session Inspector V2 accordions open and close.
29+
- Verified Session Inspector V2 theme uses shared V2 theme tokens.
30+
- Verified per-entry Delete removes the session entry and updates UI immediately.
31+
- Verified Delete All clears displayed session entries.
32+
- Verified delete actions log `OK`, `WARN`, and `FAIL` entries.
33+
34+
## Skipped
35+
Full samples smoke test was skipped as requested. This PR is scoped to Session Inspector V2 rename, Workspace Manager V2 registration, and storage deletion behavior; the targeted workspace V2 suite covers those affected launch/UI paths.

‎tests/playwright/tools/WorkspaceManagerV2.spec.mjs‎

Lines changed: 153 additions & 5 deletions
Large diffs are not rendered by default.

‎tools/renderToolsIndex.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function classifyToolGroup(toolId) {
7878
]);
7979
const viewerToolIds = new Set([
8080
"3d-asset-viewer",
81-
"session-inspector",
81+
"session-inspector-v2",
8282
"replay-visualizer",
8383
"performance-profiler"
8484
]);

‎tools/session-inspector-v2/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Session Inspector V2
2+
3+
Session Inspector V2 is a first-class tool for inspecting and clearing current-origin browser storage during Workspace V2 and tool launch validation.
4+
5+
## Scope
6+
- Reads `sessionStorage` and `localStorage` values for display.
7+
- Deletes selected displayed storage entries or all currently shown entries on explicit user action.
8+
- Does not pass data to other tools.
9+
- Does not add repo selection or File System Access API behavior.
10+
11+
## Validation
12+
- Open `tools/session-inspector-v2/index.html`.
13+
- Seed a storage key in the current origin.
14+
- Refresh the tool and verify the key appears in the Entries list.
15+
- Select an entry and confirm the Details panel shows raw value, parsed value, parse status, and byte size.
16+
- Use per-entry Delete or Delete All and verify the Entries list and status log update immediately.

tools/session-inspector/how_to_use.html renamed to tools/session-inspector-v2/how_to_use.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Session Inspector - How To Use</title>
6+
<title>Session Inspector V2 - How To Use</title>
77
<link rel="stylesheet" href="../../src/engine/theme/main.css">
88
<link rel="stylesheet" href="../../src/engine/ui/hubCommon.css">
99
</head>
10-
<body class="tools-platform-tool-page tools-platform-surface hub-page-tools" data-tool-id="session-inspector">
10+
<body class="tools-platform-tool-page tools-platform-surface hub-page-tools" data-tool-id="session-inspector-v2">
1111
<main class="wrap">
1212
<section class="hero">
13-
<h1>Session Inspector</h1>
14-
<p class="subtitle">Inspect current-origin storage values without writing handoff data or changing tool state.</p>
13+
<h1>Session Inspector V2</h1>
14+
<p class="subtitle">Inspect and explicitly clear current-origin storage values without writing handoff data.</p>
1515
</section>
1616
<section class="card">
1717
<h2>Use</h2>
18-
<p>Open the tool, choose a storage scope, filter by key or value text, and select an entry to inspect its parsed JSON and raw value.</p>
18+
<p>Open the tool, choose a storage scope, filter by key or value text, select an entry to inspect its parsed JSON and raw value, or delete shown entries when cleanup is needed.</p>
1919
</section>
2020
<section class="card">
2121
<h2>Boundaries</h2>
22-
<p>The tool is read-only. It does not create repo handles, write storage, modify workspace manifests, or communicate state to another tool.</p>
22+
<p>The tool does not create repo handles, modify workspace manifests, or communicate state to another tool. Delete actions affect only the displayed current-origin storage entries.</p>
2323
</section>
2424
</main>
2525
</body>

‎tools/session-inspector-v2/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Session Inspector V2</title>
7+
<link rel="stylesheet" href="../../src/engine/theme/main.css">
8+
<link rel="stylesheet" href="../../src/engine/ui/hubCommon.css">
9+
<link rel="stylesheet" href="../../src/engine/theme/accordionV2/accordionV2.css">
10+
<link rel="stylesheet" href="./styles/sessionInspectorV2.css">
11+
<script type="module" src="./js/bootstrap.js"></script>
12+
</head>
13+
<body class="tools-platform-tool-page tools-platform-surface hub-page-tools" data-tool-id="session-inspector-v2">
14+
<details class="is-collapsible" open>
15+
<summary class="is-collapsible__summary" data-session-inspector-v2-summary>Hide Header and Details</summary>
16+
<div class="is-collapsible__content">
17+
<div id="shared-theme-header"></div>
18+
<header class="session-inspector-v2__header" data-session-inspector-v2-header>
19+
<section class="tools-platform-frame session-inspector-v2__local-shell-frame">
20+
<div class="tools-platform-frame__accordion-content">
21+
<div class="tools-platform-frame__accordion-summary">
22+
<div class="tools-platform-frame__summary-copy">
23+
<h1 class="tools-platform-frame__title" data-tool-id="session-inspector-v2">Session Inspector V2</h1>
24+
<h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
25+
</div>
26+
<div class="tools-platform-frame__summary-meta">
27+
<div class="tools-platform-frame__meta">Inspect and clear current-origin storage values without cross-tool handoff writes.</div>
28+
</div>
29+
</div>
30+
</div>
31+
</section>
32+
</header>
33+
</div>
34+
</details>
35+
36+
<nav class="session-inspector-v2__menu" aria-label="Session Inspector V2 actions">
37+
<button id="refreshSessionInspectorV2Button" type="button">Refresh</button>
38+
<button id="deleteAllSessionInspectorV2Button" type="button">Delete All</button>
39+
<button id="clearSessionInspectorV2StatusButton" type="button">Clear Status</button>
40+
</nav>
41+
42+
<main class="session-inspector-v2 app-shell" data-tool-id="session-inspector-v2">
43+
<aside class="session-inspector-v2__panel session-inspector-v2__panel--left" aria-label="Session filters">
44+
<section class="accordion-v2 session-inspector-v2__accordion is-open" data-accordion-v2-open="true">
45+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2FiltersContent">
46+
<span>Filters</span>
47+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
48+
</button>
49+
<div id="sessionInspectorV2FiltersContent" class="accordion-v2__content">
50+
<label class="session-inspector-v2__field" for="storageScopeSelect">
51+
<span>Storage</span>
52+
<select id="storageScopeSelect">
53+
<option value="sessionStorage">sessionStorage</option>
54+
<option value="localStorage">localStorage</option>
55+
<option value="all">All storage</option>
56+
</select>
57+
</label>
58+
<label class="session-inspector-v2__field" for="sessionInspectorV2FilterInput">
59+
<span>Filter</span>
60+
<input id="sessionInspectorV2FilterInput" type="search" autocomplete="off" placeholder="Key or value text">
61+
</label>
62+
<p id="sessionInspectorV2Summary" class="session-inspector-v2__hint">No storage entries loaded.</p>
63+
</div>
64+
</section>
65+
</aside>
66+
67+
<section class="session-inspector-v2__panel session-inspector-v2__panel--center" aria-label="Storage entries">
68+
<section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
69+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2EntriesContent">
70+
<span>Entries</span>
71+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
72+
</button>
73+
<div id="sessionInspectorV2EntriesContent" class="accordion-v2__content">
74+
<div id="sessionInspectorV2EntryList" class="session-inspector-v2__entry-list" aria-label="Storage entries"></div>
75+
</div>
76+
</section>
77+
</section>
78+
79+
<aside class="session-inspector-v2__panel session-inspector-v2__panel--right" aria-label="Session details">
80+
<section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
81+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2DetailsContent">
82+
<span>Details</span>
83+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
84+
</button>
85+
<div id="sessionInspectorV2DetailsContent" class="accordion-v2__content">
86+
<pre id="sessionInspectorV2DetailsOutput" class="session-inspector-v2__output">{}</pre>
87+
</div>
88+
</section>
89+
90+
<section class="accordion-v2 session-inspector-v2__accordion is-open" data-accordion-v2-open="true">
91+
<div class="accordion-v2__header session-inspector-v2__status-accordion-header" role="button" tabindex="0" aria-expanded="true" aria-controls="sessionInspectorV2StatusContent">
92+
<span>Status</span>
93+
<div class="session-inspector-v2__status-header-actions">
94+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
95+
</div>
96+
</div>
97+
<div id="sessionInspectorV2StatusContent" class="accordion-v2__content">
98+
<textarea id="statusLog" readonly rows="10" aria-label="Session Inspector V2 status log"></textarea>
99+
</div>
100+
</section>
101+
</aside>
102+
</main>
103+
<script type="module" src="../../src/engine/theme/mount-shared-header.js"></script>
104+
</body>
105+
</html>

tools/session-inspector/js/SessionInspectorApp.js renamed to tools/session-inspector-v2/js/SessionInspectorV2App.js

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
export class SessionInspectorApp {
1+
export class SessionInspectorV2App {
22
constructor({
33
accordions,
4+
deleteAllButton,
45
details,
56
entryList,
67
filters,
@@ -10,6 +11,7 @@ export class SessionInspectorApp {
1011
storageService
1112
}) {
1213
this.accordions = accordions;
14+
this.deleteAllButton = deleteAllButton;
1315
this.details = details;
1416
this.entries = [];
1517
this.entryList = entryList;
@@ -28,11 +30,13 @@ export class SessionInspectorApp {
2830
onFilterChanged: () => this.refresh({ silent: true })
2931
});
3032
this.entryList.mount({
33+
onDelete: (entryId) => this.deleteEntry(entryId),
3134
onSelected: (entryId) => this.selectEntry(entryId)
3235
});
3336
this.refreshButton.addEventListener("click", () => this.refresh());
37+
this.deleteAllButton.addEventListener("click", () => this.deleteAllShownEntries());
3438
this.refresh({ silent: true });
35-
this.statusLog.ok(`Session Inspector ready. Storage is ${this.runtimeContract.storageAccess}.`);
39+
this.statusLog.ok(`Session Inspector V2 ready. Storage is ${this.runtimeContract.storageAccess}.`);
3640
}
3741

3842
refresh({ silent = false } = {}) {
@@ -67,4 +71,40 @@ export class SessionInspectorApp {
6771
this.statusLog.info(`Selected ${entry.storageType}:${entry.key}.`);
6872
}
6973
}
74+
75+
deleteEntry(entryId) {
76+
const entry = this.entries.find((candidate) => candidate.id === entryId);
77+
if (!entry) {
78+
this.statusLog.warn(`Delete skipped: storage entry ${entryId || "(empty)"} is no longer shown.`);
79+
this.refresh({ silent: true });
80+
return;
81+
}
82+
const result = this.storageService.deleteEntry(entry);
83+
if (result.ok) {
84+
this.statusLog.ok(`Deleted ${entry.storageType}:${entry.key}.`);
85+
} else {
86+
this.statusLog.fail(`Delete failed for ${entry.storageType}:${entry.key}: ${result.message}`);
87+
}
88+
this.refresh({ silent: true });
89+
}
90+
91+
deleteAllShownEntries() {
92+
if (!this.entries.length) {
93+
this.statusLog.warn("Delete All skipped: no matching storage entries are shown.");
94+
return;
95+
}
96+
const result = this.storageService.deleteEntries(this.entries);
97+
if (result.failed.length) {
98+
result.deleted.forEach((entry) => {
99+
this.statusLog.ok(`Deleted ${entry.storageType}:${entry.key}.`);
100+
});
101+
result.failed.forEach(({ entry, message }) => {
102+
this.statusLog.fail(`Delete failed for ${entry.storageType}:${entry.key}: ${message}`);
103+
});
104+
} else {
105+
this.statusLog.ok(`Deleted ${result.deleted.length} shown storage entr${result.deleted.length === 1 ? "y" : "ies"}.`);
106+
}
107+
this.selectedId = "";
108+
this.refresh({ silent: true });
109+
}
70110
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { SessionInspectorV2App } from "./SessionInspectorV2App.js";
2+
import { AccordionSection } from "./controls/AccordionSection.js";
3+
import { DetailsControl } from "./controls/DetailsControl.js";
4+
import { EntryListControl } from "./controls/EntryListControl.js";
5+
import { FilterControl } from "./controls/FilterControl.js";
6+
import { StatusLogControl } from "./controls/StatusLogControl.js";
7+
import { sessionInspectorV2RuntimeContract } from "./services/SessionInspectorV2RuntimeContract.js";
8+
import { SessionInspectorV2StorageService } from "./services/SessionInspectorV2StorageService.js";
9+
10+
function requireElement(selector) {
11+
const element = document.querySelector(selector);
12+
if (!element) {
13+
throw new Error(`Missing required Session Inspector V2 element: ${selector}`);
14+
}
15+
return element;
16+
}
17+
18+
window.addEventListener("DOMContentLoaded", () => {
19+
const app = new SessionInspectorV2App({
20+
accordions: Array.from(document.querySelectorAll(".accordion-v2"), (section) => new AccordionSection(section)),
21+
details: new DetailsControl({
22+
output: requireElement("#sessionInspectorV2DetailsOutput")
23+
}),
24+
deleteAllButton: requireElement("#deleteAllSessionInspectorV2Button"),
25+
entryList: new EntryListControl({
26+
container: requireElement("#sessionInspectorV2EntryList")
27+
}),
28+
filters: new FilterControl({
29+
filterInput: requireElement("#sessionInspectorV2FilterInput"),
30+
scopeSelect: requireElement("#storageScopeSelect"),
31+
summary: requireElement("#sessionInspectorV2Summary")
32+
}),
33+
refreshButton: requireElement("#refreshSessionInspectorV2Button"),
34+
runtimeContract: sessionInspectorV2RuntimeContract(),
35+
statusLog: new StatusLogControl({
36+
clearButton: requireElement("#clearSessionInspectorV2StatusButton"),
37+
output: requireElement("#statusLog")
38+
}),
39+
storageService: new SessionInspectorV2StorageService()
40+
});
41+
window.__sessionInspectorV2App = app;
42+
app.start();
43+
});

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

File renamed without changes.

0 commit comments

Comments
 (0)