feat: Network Inspector v1, multi-framework improvements, box-model UX fixes

- Network Inspector (y toggle): fetch/XHR capture, call stack, N+1 analysis,
  GraphQL detection, drift/anomaly detection, TypeScript interface generation
- Tooltip DOM tab: Copy HTML + Copy classes, per-attribute copy buttons
- Key bindings simplified: x=picker, y=network panel, Esc=close all
- Scroll isolation in tooltip + network panel
- Right-click during hold-x toggles tooltip dismiss (box-model overlay UX)
- Box-model overlay labels now render with dark background badge
- N+1 dialog: severity tiers, stats row, Copy all
- Call stack in network requests (12 frames, internals filtered)

Author: rosoam

.gitignore

@@ -14,3 +14,8 @@ demo/.vite/
 .pw-profile/
 screenshots/
 playwright-report/
+
+# OAuth / secrets — never commit
+client_secret*.json
+*.env
+.env*

CHANGELOG.md

@@ -9,23 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- **Call stack in network requests** — each captured request now carries the JS call stack that triggered it (up to 12 user-land frames, webpack/node_modules internals filtered out). Displayed in the Overview tab as a scrollable frame list with per-frame copy buttons and a "Copy all" button on the section header. The call stack is also included in the per-request debug bundle (Copy all in the Request tab).
-
-- **N+1 dialog: stats, severity, and Copy all** — the N+1 Patterns overlay now shows for each pattern: a stats row with avg duration, total time wasted, and first/last seen timestamps; a computed burst window in the count pill (replaces the hardcoded "in 3s"); three severity tiers (moderate / high / critical) with distinct colours and matching hint text; and a **Copy all** button in the overlay header that exports a structured N+1 debug bundle (all patterns, full request list per pattern, timing stats).
-
-### Changed
-
-- **Scroll isolation** — the cursor tooltip body and the Network Inspector panel (request list + tab panels) no longer scroll the host page when the cursor is inside them (`overscroll-behavior: contain` + `wheel stopPropagation`).
-- **Selected request row** — the focused request in the Network Inspector list now has a stronger indigo left border and background, making it easy to identify while inspecting its detail tabs.
-
-### Removed
-
-- **Smart labels in Overview tab** — the auto-generated human-readable label card has been removed from the Overview tab to reduce visual noise. Labels remain visible in the request list column.
-
-## [0.4.0] - 2026-05-03
-
-### Added
-
 - **Network Inspector** (`y` to toggle) — a floating draggable panel that captures every `fetch` and `XMLHttpRequest` call made by the page in real time, without any proxy or DevTools Protocol required. The capture runs entirely in the MAIN world by patching `window.fetch` and `window.XMLHttpRequest`; captured entries travel over `postMessage` to the isolated-world store before being displayed.
 
   Request entries carry: id, timestamp, method, URL (path + query + host), request headers and body, response headers and body, HTTP status, duration, and a component attribution derived from the call-site stack trace.
@@ -51,13 +34,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - **Tooltip DOM tab improvements** — the DOM tab in the contextual tooltip now has a **Copy HTML** + **Copy classes** button group (replacing the single "Copy" button) and an attributes table with per-attribute rows showing name, truncated value, and an individual copy button on each row.
 
+- **Call stack in network requests** — each captured request now carries the JS call stack that triggered it (up to 12 user-land frames, webpack/node_modules internals filtered out). Displayed in the Overview tab as a scrollable frame list with per-frame copy buttons and a "Copy all" button on the section header. The call stack is also included in the per-request debug bundle (Copy all in the Request tab).
+
+- **N+1 dialog: stats, severity, and Copy all** — the N+1 Patterns overlay now shows for each pattern: a stats row with avg duration, total time wasted, and first/last seen timestamps; a computed burst window in the count pill (replaces the hardcoded "in 3s"); three severity tiers (moderate / high / critical) with distinct colours and matching hint text; and a **Copy all** button in the overlay header that exports a structured N+1 debug bundle (all patterns, full request list per pattern, timing stats).
+
 ### Changed
 
 - **Key bindings** — the binding scheme has been simplified:
   - **`x` held** activates the component picker: hover any element to get the indigo highlight and the contextual tooltip floating near the cursor. Click to open the full inspector panel. This replaces the old `y` (hover) and `y + x` (tooltip) combination — `x` alone does everything.
   - **`y` keypress** toggles the Network Inspector panel.
   - **`Esc`** closes all overlays (tooltip, component panel, Network Inspector panel).
   - The `y + x` combo for the tooltip is gone; `y` is now exclusively the Network Inspector toggle.
+- **Scroll isolation** — the cursor tooltip body and the Network Inspector panel (request list + tab panels) no longer scroll the host page when the cursor is inside them (`overscroll-behavior: contain` + `wheel stopPropagation`).
+- **Selected request row** — the focused request in the Network Inspector list now has a stronger indigo left border and background, making it easy to identify while inspecting its detail tabs.
+
+### Fixed
+
+- **Right-click dismiss** — right-clicking during hold-`x` now toggles the floating tooltip off, so the box-model overlay is fully visible without the tooltip obscuring it. The dismissed state persists across key-release/re-press cycles; only the next right-click restores live tracking.
+- **Box-model overlay labels** — the px dimension labels in padding and margin overlay zones now render with a dark background badge, making them legible over any element colour.
+
+### Removed
+
+- **Smart labels in Overview tab** — the auto-generated human-readable label card has been removed from the Overview tab to reduce visual noise. Labels remain visible in the request list column.
 
 ## [0.3.0] - 2026-05-01
 
@@ -150,4 +148,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [0.1.0]: https://github.com/rosoam/peekly/releases/tag/v0.1.0
 [0.2.0]: https://github.com/rosoam/peekly/releases/tag/v0.2.0
 [0.3.0]: https://github.com/rosoam/peekly/releases/tag/v0.3.0
-[0.4.0]: https://github.com/rosoam/peekly/releases/tag/v0.4.0

docs/CHROME_WEB_STORE.md

@@ -69,17 +69,17 @@ Peekly
 ### Short description
 
 ```
-Hold y and click to peek at any React component, DOM element, or CSS — fast, seamless, on any site.
+Hold x to inspect any component, DOM element, or CSS. Press y for the Network Inspector — fast, seamless, on any site.
 ```
 
-(Limit: 132 characters. The version above is 110.)
+(Limit: 132 characters. The version above is 125.)
 
 ### Detailed description
 
 ```
 Peekly is a near-invisible developer inspector that turns any web page into an interactive component map.
 
-Hold the y key, hover any element, and Peekly highlights the React component under your cursor. Click to open a floating panel with everything you need:
+Hold the x key, hover any element, and Peekly highlights the React component under your cursor with a contextual tooltip showing component details (Comp / DOM / CSS / A11y tabs). The tooltip is sticky: release x and it stays on screen for interaction. Click outside or press Esc to dismiss. Click while holding x to open a full floating panel with everything you need:
 
   • Source file — one-click "Open in VS Code / Cursor / WebStorm / Sublime"
   • Live re-render counter
@@ -91,7 +91,7 @@ Hold the y key, hover any element, and Peekly highlights the React component und
   • Hints for inline functions in props, dangerouslySetInnerHTML, very long classNames
   • Owner chain with clickable source links
 
-Hold y + x while hovering for a contextual tooltip that follows the cursor — a mini debugger with tabs for Component / DOM / CSS / A11y. The tooltip is sticky: once it appears, you can release both keys and it stays on screen for interaction. Click outside or press Esc to dismiss.
+Press y to toggle the Network Inspector — a floating draggable panel that captures every fetch and XHR request on the page in real time. Filter by method / status / search. See request details (headers, body, TypeScript interface generation), GraphQL analysis, call stack for each request, and N+1 pattern detection with severity tiers.
 
 Plain letter keys are intentional — they're easy to reach with one hand and don't collide with the OS / browser shortcuts that real modifiers (Option, Shift, Ctrl) tend to clash with. Peekly never captures keys while you're typing in a form field.
 

docs/SPRINT_LOG.md

@@ -0,0 +1,15 @@
+# Peekly — Sprint Log
+
+Entrées de travail non analysées. Alimentées via `/log-peekly`.
+
+<!-- Les nouvelles entrées s'ajoutent automatiquement ici via `log-peekly` -->
+
+## En attente d'analyse
+
+## Intégré au backlog
+
+- [x] [2026-05-06 18:54] clic droit (contextmenu) pendant hold-x toggle la visibilité du panel flottant → P0 · S — bug-ux mouse event guard ✅ livré
+- [x] [2026-05-06 18:53] bg manquant derrière les labels px dans les zones padding/margin overlay → P1 · XS — bug-ux CSS fix ✅ livré
+- [x] [2026-05-06 17:12] au hover, on doit voir le padding des éléments comme background dans/autour + px et classes impliquées → P1 · M — feature box-model-overlay ⏳ backlog
+- [x] [2026-05-06 16:50] le X ne marche pas sur windows.. → P0 · S — bug-critique Windows, keyboard events ✅ livré
+- [x] [2026-05-06 16:50] on doit voir aussi les padding et margin au hover des éléments → P1 · S — amélioration-ux tooltip box model ✅ livré

package.json

@@ -1,7 +1,7 @@
 {
   "name": "peekly",
   "version": "0.3.0",
-  "description": "Hold Y and click to peek at any React component, DOM element, or CSS. Hold Y + X for the contextual tooltip — fast, seamless, on any site.",
+  "description": "Hold x to inspect any component, DOM element, or CSS. Press y for the Network Inspector — fast, seamless, on any site.",
   "private": true,
   "type": "module",
   "license": "MIT",