diff --git a/.gitignore b/.gitignore
index 8b7d186..b3618a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -113,6 +113,9 @@ tmp/
 temp/
 .tmp/
 
+# Brainstorming visual companion sessions
+.superpowers/
+
 # Chrome extension specific
 *.crx
 *.pem
diff --git a/.impeccable/critique/2026-10-21T05-01-02Z__frontend-devtools-html.md b/.impeccable/critique/2026-10-21T05-01-02Z__frontend-devtools-html.md
new file mode 100644
index 0000000..eb9dc7d
--- /dev/null
+++ b/.impeccable/critique/2026-10-21T05-01-02Z__frontend-devtools-html.md
@@ -0,0 +1,30 @@
+---
+target: DevTools panel
+total_score: 17
+max_score: 40
+na_heuristics: 
+p0_count: 1
+p1_count: 3
+target_identity: "file:C:\\Users\\ishab\\projects\\apq-debugger\\frontend\\devtools.html"
+target_fingerprint: "sha256:ff29165fbb1567ffacc53a9ca6ae9fc5dbda938cfc5f24783f3d3ddc0c3cee4e"
+target_path: "C:\\Users\\ishab\\projects\\apq-debugger\\frontend\\devtools.html"
+timestamp: 2026-10-21T05-01-02Z
+slug: frontend-devtools-html
+---
+# Critique: APQ Debugger DevTools panel (frontend/devtools.html)
+Method: dual-agent. Score 17/40 (Poor).
+
+Heuristics: 1 Status 2 | 2 Match 2 | 3 Control 2 | 4 Consistency 1 | 5 Error prevention 2 | 6 Recognition 2 | 7 Efficiency 1 | 8 Aesthetic 2 | 9 Recovery 2 | 10 Help 1
+
+Specificity: Kora's editorial identity (Italiana, cream canvas, grain, tracked mono eyebrows) is distinctive but foreign to a DevTools tool; nothing derives from hashes/interception/resolution.
+
+Detector (rendered, light): low-contrast FULL badge 3.95 (dark 3.66), selected-row text 4.2 (dark 3.8), chips 4.35/4.49, primary hover 4.4; tiny-text detail URL 11px; flat-type-hierarchy; cream-palette (intentional); monotonous-spacing (weak). Static cramped-padding on modal = false positive.
+
+Priority issues:
+- [P0] Docked layouts break: 520x400 detail placeholder blocks clicks on list; 760x420 sidebar+metrics leave <2 rows. -> adapt
+- [P1] Wrong register; Italiana numerals misread (components.css:726), eyebrows, grain. -> typeset, quieter
+- [P1] Query buried (one-line pre, h-scroll) + variables render as $1 (js/ui/request-detail.js:144). -> layout
+- [P1] Settings popover has no surface; focus halo cancelled on tabs/rows by reset block components.css:70-95. -> harden
+- [P2] No live/intercepting state, no safety framing at Start, resolved vs unresolved indistinguishable. -> clarify, onboard
+
+Personas: Alex (no shortcuts, >10 tab stops), Sam (no focus on tabs/rows, noisy live region, toggle state unannounced), Priya (docked 400px: ~4 rows visible, no status/timing).
diff --git a/.impeccable/design.json b/.impeccable/design.json
new file mode 100644
index 0000000..3725836
--- /dev/null
+++ b/.impeccable/design.json
@@ -0,0 +1,1010 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-10-21T05:37:41.642Z",
+  "title": "Design System: APQ Debugger",
+  "extensions": {
+    "colorMeta": {
+      "surface": {
+        "role": "neutral",
+        "displayName": "Surface",
+        "canonical": "light-dark(#ffffff, #202124)",
+        "light": "#ffffff",
+        "dark": "#202124",
+        "lightOklch": "oklch(100.0% 0.000 89.9)",
+        "darkOklch": "oklch(24.8% 0.006 271.2)",
+        "purpose": "Table, panes and detail body.",
+        "tonalRamp": [
+          "#0b0b0b",
+          "#242424",
+          "#404040",
+          "#5d5d5d",
+          "#808080",
+          "#a4a4a4",
+          "#cacaca",
+          "#eeeeee"
+        ]
+      },
+      "surface-chrome": {
+        "role": "neutral",
+        "displayName": "Chrome Grey",
+        "canonical": "light-dark(#f1f3f4, #292a2d)",
+        "light": "#f1f3f4",
+        "dark": "#292a2d",
+        "lightOklch": "oklch(96.3% 0.003 228.8)",
+        "darkOklch": "oklch(28.5% 0.006 271.2)",
+        "purpose": "Tab strip, toolbars, table head, group and code headers.",
+        "tonalRamp": [
+          "#0a0b0c",
+          "#232425",
+          "#3e4041",
+          "#5c5e5f",
+          "#7f8081",
+          "#a3a5a6",
+          "#c9cbcc",
+          "#edeff0"
+        ]
+      },
+      "surface-raised": {
+        "role": "neutral",
+        "displayName": "Raised",
+        "canonical": "light-dark(#ffffff, #303134)",
+        "light": "#ffffff",
+        "dark": "#303134",
+        "lightOklch": "oklch(100.0% 0.000 89.9)",
+        "darkOklch": "oklch(31.3% 0.006 271.2)",
+        "purpose": "Menus and dialogs.",
+        "tonalRamp": [
+          "#0b0b0b",
+          "#242424",
+          "#404040",
+          "#5d5d5d",
+          "#808080",
+          "#a4a4a4",
+          "#cacaca",
+          "#eeeeee"
+        ]
+      },
+      "surface-sunken": {
+        "role": "neutral",
+        "displayName": "Sunken",
+        "canonical": "light-dark(#f8f9fa, #1b1c1e)",
+        "light": "#f8f9fa",
+        "dark": "#1b1c1e",
+        "lightOklch": "oklch(98.2% 0.002 247.8)",
+        "darkOklch": "oklch(22.6% 0.004 264.5)",
+        "purpose": "Query, variables and SDL code bodies.",
+        "tonalRamp": [
+          "#0b0b0c",
+          "#232425",
+          "#3f4041",
+          "#5d5e5e",
+          "#7f8081",
+          "#a4a5a5",
+          "#cacacb",
+          "#edeeef"
+        ]
+      },
+      "surface-hover": {
+        "role": "neutral",
+        "displayName": "Hover Wash",
+        "canonical": "light-dark(#eef1f6, #2f3236)",
+        "light": "#eef1f6",
+        "dark": "#2f3236",
+        "lightOklch": "oklch(95.7% 0.007 260.7)",
+        "darkOklch": "oklch(31.6% 0.008 255.6)",
+        "purpose": "Hover on rows, tabs, buttons, menu options.",
+        "tonalRamp": [
+          "#090b0e",
+          "#222428",
+          "#3d4044",
+          "#5b5e62",
+          "#7e8085",
+          "#a2a5a9",
+          "#c8cbcf",
+          "#eceff4"
+        ]
+      },
+      "selection": {
+        "role": "primary",
+        "displayName": "Selection Blue",
+        "canonical": "light-dark(#d3e3fd, #0f3a6e)",
+        "light": "#d3e3fd",
+        "dark": "#0f3a6e",
+        "lightOklch": "oklch(91.2% 0.040 260.1)",
+        "darkOklch": "oklch(35.1% 0.101 255.7)",
+        "purpose": "Selected row / type / active pill while the list is focused.",
+        "tonalRamp": [
+          "#030b1c",
+          "#192437",
+          "#344055",
+          "#515e74",
+          "#738198",
+          "#96a6be",
+          "#bccce5",
+          "#e5efff"
+        ]
+      },
+      "selection-idle": {
+        "role": "neutral",
+        "displayName": "Selection Grey",
+        "canonical": "light-dark(#e8eaed, #3c4043)",
+        "light": "#e8eaed",
+        "dark": "#3c4043",
+        "lightOklch": "oklch(93.6% 0.005 258.3)",
+        "darkOklch": "oklch(36.9% 0.007 240.0)",
+        "purpose": "Selected row when its list is not focused.",
+        "tonalRamp": [
+          "#0a0b0d",
+          "#232426",
+          "#3e4042",
+          "#5c5e60",
+          "#7e8083",
+          "#a3a5a7",
+          "#c9cbcd",
+          "#edeff2"
+        ]
+      },
+      "input-surface": {
+        "role": "neutral",
+        "displayName": "Input Surface",
+        "canonical": "light-dark(#ffffff, #202124)",
+        "light": "#ffffff",
+        "dark": "#202124",
+        "lightOklch": "oklch(100.0% 0.000 89.9)",
+        "darkOklch": "oklch(24.8% 0.006 271.2)",
+        "purpose": "Text inputs and selects.",
+        "tonalRamp": [
+          "#0b0b0b",
+          "#242424",
+          "#404040",
+          "#5d5d5d",
+          "#808080",
+          "#a4a4a4",
+          "#cacaca",
+          "#eeeeee"
+        ]
+      },
+      "divider": {
+        "role": "neutral",
+        "displayName": "Divider",
+        "canonical": "light-dark(#dadce0, #3c4043)",
+        "light": "#dadce0",
+        "dark": "#3c4043",
+        "lightOklch": "oklch(89.4% 0.006 264.5)",
+        "darkOklch": "oklch(36.9% 0.007 240.0)",
+        "purpose": "Every 1px region split and column rule; resting input border.",
+        "tonalRamp": [
+          "#0a0b0e",
+          "#232427",
+          "#3e4043",
+          "#5c5e61",
+          "#7e8084",
+          "#a3a5a8",
+          "#c8cace",
+          "#eceef2"
+        ]
+      },
+      "input-border": {
+        "role": "neutral",
+        "displayName": "Input Border",
+        "canonical": "light-dark(#80868b, #80868b)",
+        "light": "#80868b",
+        "dark": "#80868b",
+        "lightOklch": "oklch(61.7% 0.010 242.9)",
+        "darkOklch": "oklch(61.7% 0.010 242.9)",
+        "purpose": "Input border on hover (3:1).",
+        "tonalRamp": [
+          "#080c0f",
+          "#202529",
+          "#3b4045",
+          "#595e63",
+          "#7b8186",
+          "#9fa5ab",
+          "#c5cbd1",
+          "#e9eff5"
+        ]
+      },
+      "raised-border": {
+        "role": "neutral",
+        "displayName": "Raised Border",
+        "canonical": "light-dark(#c4c7c5, #5f6368)",
+        "light": "#c4c7c5",
+        "dark": "#5f6368",
+        "lightOklch": "oklch(82.7% 0.004 157.2)",
+        "darkOklch": "oklch(49.8% 0.009 253.9)",
+        "purpose": "Menu and dialog edge; kbd border; scrollbar thumb.",
+        "tonalRamp": [
+          "#0a0c0a",
+          "#222523",
+          "#3e403f",
+          "#5c5e5d",
+          "#7e817f",
+          "#a2a5a3",
+          "#c8cbc9",
+          "#ecefed"
+        ]
+      },
+      "ink": {
+        "role": "neutral",
+        "displayName": "Ink",
+        "canonical": "light-dark(#1f1f1f, #e3e3e3)",
+        "light": "#1f1f1f",
+        "dark": "#e3e3e3",
+        "lightOklch": "oklch(23.9% 0.000 89.9)",
+        "darkOklch": "oklch(91.6% 0.000 89.9)",
+        "purpose": "Primary text.",
+        "tonalRamp": [
+          "#0b0b0b",
+          "#242424",
+          "#404040",
+          "#5d5d5d",
+          "#808080",
+          "#a4a4a4",
+          "#cacaca",
+          "#eeeeee"
+        ]
+      },
+      "ink-secondary": {
+        "role": "neutral",
+        "displayName": "Ink Secondary",
+        "canonical": "light-dark(#5f6368, #a8acb1)",
+        "light": "#5f6368",
+        "dark": "#a8acb1",
+        "lightOklch": "oklch(49.8% 0.009 253.9)",
+        "darkOklch": "oklch(74.3% 0.008 253.9)",
+        "purpose": "Labels, column heads, hashes, times.",
+        "tonalRamp": [
+          "#090b0f",
+          "#212429",
+          "#3c4045",
+          "#5a5e63",
+          "#7c8186",
+          "#a1a5aa",
+          "#c6cbd1",
+          "#eaeff5"
+        ]
+      },
+      "ink-disabled": {
+        "role": "neutral",
+        "displayName": "Ink Disabled",
+        "canonical": "light-dark(#9aa0a6, #6f7378)",
+        "light": "#9aa0a6",
+        "dark": "#6f7378",
+        "lightOklch": "oklch(70.3% 0.011 248.0)",
+        "darkOklch": "oklch(55.4% 0.009 253.9)",
+        "purpose": "Disabled controls.",
+        "tonalRamp": [
+          "#080c10",
+          "#202529",
+          "#3b4045",
+          "#595e64",
+          "#7b8187",
+          "#9fa5ab",
+          "#c5cbd2",
+          "#e9eff6"
+        ]
+      },
+      "ink-on-selection": {
+        "role": "neutral",
+        "displayName": "Ink on Selection",
+        "canonical": "light-dark(#041e49, #e3eefe)",
+        "light": "#041e49",
+        "dark": "#e3eefe",
+        "lightOklch": "oklch(24.6% 0.087 259.7)",
+        "darkOklch": "oklch(94.6% 0.025 257.6)",
+        "purpose": "Text on Selection Blue.",
+        "tonalRamp": [
+          "#00072a",
+          "#07224d",
+          "#233f6d",
+          "#405e8e",
+          "#6181b4",
+          "#84a6db",
+          "#adccfe",
+          "#e6effe"
+        ]
+      },
+      "devtools-blue": {
+        "role": "primary",
+        "displayName": "DevTools Blue",
+        "canonical": "light-dark(#0b57d0, #a8c7fa)",
+        "light": "#0b57d0",
+        "dark": "#a8c7fa",
+        "lightOklch": "oklch(49.5% 0.199 260.6)",
+        "darkOklch": "oklch(82.5% 0.080 260.3)",
+        "purpose": "Active tab, primary button, links, checkbox accent.",
+        "tonalRamp": [
+          "#00052e",
+          "#001e5a",
+          "#003790",
+          "#0452cb",
+          "#3179f4",
+          "#6ea4ff",
+          "#adccff",
+          "#e6efff"
+        ]
+      },
+      "devtools-blue-hover": {
+        "role": "primary",
+        "displayName": "DevTools Blue Hover",
+        "canonical": "light-dark(#0842a0, #c2d7fb)",
+        "light": "#0842a0",
+        "dark": "#c2d7fb",
+        "lightOklch": "oklch(40.9% 0.163 260.6)",
+        "darkOklch": "oklch(87.5% 0.055 261.2)",
+        "purpose": "Primary button hover.",
+        "tonalRamp": [
+          "#00052e",
+          "#001e5a",
+          "#003791",
+          "#2058b7",
+          "#437de0",
+          "#6fa4fe",
+          "#adccfe",
+          "#e6effe"
+        ]
+      },
+      "on-devtools-blue": {
+        "role": "primary",
+        "displayName": "On DevTools Blue",
+        "canonical": "light-dark(#ffffff, #062e6f)",
+        "light": "#ffffff",
+        "dark": "#062e6f",
+        "lightOklch": "oklch(100.0% 0.000 89.9)",
+        "darkOklch": "oklch(32.1% 0.121 260.2)",
+        "purpose": "Text on primary buttons.",
+        "tonalRamp": [
+          "#0b0b0b",
+          "#242424",
+          "#404040",
+          "#5d5d5d",
+          "#808080",
+          "#a4a4a4",
+          "#cacaca",
+          "#eeeeee"
+        ]
+      },
+      "focus": {
+        "role": "primary",
+        "displayName": "Focus Blue",
+        "canonical": "light-dark(#0b57d0, #a8c7fa)",
+        "light": "#0b57d0",
+        "dark": "#a8c7fa",
+        "lightOklch": "oklch(49.5% 0.199 260.6)",
+        "darkOklch": "oklch(82.5% 0.080 260.3)",
+        "purpose": "2px focus outline; resize handle active.",
+        "tonalRamp": [
+          "#00052e",
+          "#001e5a",
+          "#003790",
+          "#0452cb",
+          "#3179f4",
+          "#6ea4ff",
+          "#adccff",
+          "#e6efff"
+        ]
+      },
+      "record-red": {
+        "role": "secondary",
+        "displayName": "Record Red",
+        "canonical": "light-dark(#d93025, #f28b82)",
+        "light": "#d93025",
+        "dark": "#f28b82",
+        "lightOklch": "oklch(57.8% 0.206 29.0)",
+        "darkOklch": "oklch(74.5% 0.127 25.8)",
+        "purpose": "Recording circle, Intercepting status, live infobar dot.",
+        "tonalRamp": [
+          "#210000",
+          "#4c0000",
+          "#7d0000",
+          "#b20102",
+          "#e1392c",
+          "#ff7362",
+          "#ffb5aa",
+          "#ffe9e5"
+        ]
+      },
+      "resolved-green": {
+        "role": "tertiary",
+        "displayName": "Resolved Green",
+        "canonical": "light-dark(#137333, #81c995)",
+        "light": "#137333",
+        "dark": "#81c995",
+        "lightOklch": "oklch(48.8% 0.130 149.0)",
+        "darkOklch": "oklch(77.4% 0.104 152.2)",
+        "purpose": "Resolved state only.",
+        "tonalRamp": [
+          "#001002",
+          "#002d0d",
+          "#014e1e",
+          "#0e7131",
+          "#3e9553",
+          "#65bb77",
+          "#8be29b",
+          "#c8ffd0"
+        ]
+      },
+      "awaiting-amber": {
+        "role": "tertiary",
+        "displayName": "Awaiting Amber",
+        "canonical": "light-dark(#8a5300, #fdd663)",
+        "light": "#8a5300",
+        "dark": "#fdd663",
+        "lightOklch": "oklch(49.4% 0.109 66.9)",
+        "darkOklch": "oklch(88.8% 0.139 90.6)",
+        "purpose": "Awaiting retry state; no-patterns warning; warning status.",
+        "tonalRamp": [
+          "#160700",
+          "#371d00",
+          "#5c3601",
+          "#845002",
+          "#ab722f",
+          "#d29755",
+          "#fbbd7b",
+          "#feebd8"
+        ]
+      },
+      "error-red": {
+        "role": "tertiary",
+        "displayName": "Error Red",
+        "canonical": "light-dark(#b3261e, #f2b8b5)",
+        "light": "#b3261e",
+        "dark": "#f2b8b5",
+        "lightOklch": "oklch(50.1% 0.178 28.7)",
+        "darkOklch": "oklch(83.4% 0.068 22.0)",
+        "purpose": "Not in registry, errors, destructive confirm.",
+        "tonalRamp": [
+          "#210000",
+          "#4c0000",
+          "#7d0001",
+          "#ac1d17",
+          "#d64a3d",
+          "#ff7363",
+          "#ffb5aa",
+          "#ffe9e5"
+        ]
+      },
+      "error-wash": {
+        "role": "tertiary",
+        "displayName": "Error Wash",
+        "canonical": "light-dark(#fce8e6, #3c1b18)",
+        "light": "#fce8e6",
+        "dark": "#3c1b18",
+        "lightOklch": "oklch(94.6% 0.022 24.4)",
+        "darkOklch": "oklch(26.9% 0.053 26.5)",
+        "purpose": "Schema error band, error toast.",
+        "tonalRamp": [
+          "#130807",
+          "#2e201f",
+          "#4b3b3a",
+          "#6a5957",
+          "#8d7b7a",
+          "#b2a09e",
+          "#d9c5c3",
+          "#fde9e7"
+        ]
+      },
+      "live-wash": {
+        "role": "secondary",
+        "displayName": "Live Yellow",
+        "canonical": "light-dark(#fef7e0, #3a3013)",
+        "light": "#fef7e0",
+        "dark": "#3a3013",
+        "lightOklch": "oklch(97.6% 0.031 92.9)",
+        "darkOklch": "oklch(31.3% 0.047 90.5)",
+        "purpose": "Interception infobar and warning toast background.",
+        "tonalRamp": [
+          "#100b00",
+          "#292412",
+          "#45402d",
+          "#645d4a",
+          "#86806c",
+          "#aba58f",
+          "#d1cab4",
+          "#f5eed8"
+        ]
+      },
+      "live-border": {
+        "role": "secondary",
+        "displayName": "Live Yellow Border",
+        "canonical": "light-dark(#f2d68b, #6b5718)",
+        "light": "#f2d68b",
+        "dark": "#6b5718",
+        "lightOklch": "oklch(88.3% 0.099 89.8)",
+        "darkOklch": "oklch(46.5% 0.083 90.7)",
+        "purpose": "Infobar and warning toast edge.",
+        "tonalRamp": [
+          "#110a00",
+          "#2e2200",
+          "#4f3d01",
+          "#735a03",
+          "#977d32",
+          "#bda258",
+          "#e4c87d",
+          "#ffedbf"
+        ]
+      },
+      "live-ink": {
+        "role": "secondary",
+        "displayName": "Live Ink",
+        "canonical": "light-dark(#3c2c00, #fdecb7)",
+        "light": "#3c2c00",
+        "dark": "#fdecb7",
+        "lightOklch": "oklch(30.3% 0.062 87.0)",
+        "darkOklch": "oklch(94.4% 0.070 92.4)",
+        "purpose": "Text on Live Yellow.",
+        "tonalRamp": [
+          "#120a00",
+          "#2f2200",
+          "#4e3d14",
+          "#6d5b33",
+          "#907e55",
+          "#b5a378",
+          "#dcc99d",
+          "#ffedc4"
+        ]
+      },
+      "passive-wash": {
+        "role": "secondary",
+        "displayName": "Passive Blue Wash",
+        "canonical": "light-dark(#e8f0fe, #172b4d)",
+        "light": "#e8f0fe",
+        "dark": "#172b4d",
+        "lightOklch": "oklch(95.3% 0.021 261.8)",
+        "darkOklch": "oklch(29.2% 0.068 260.4)",
+        "purpose": "Passive-mode infobar background.",
+        "tonalRamp": [
+          "#070b14",
+          "#1e242e",
+          "#3a404b",
+          "#575e6a",
+          "#79818d",
+          "#9ea5b2",
+          "#c3cbd8",
+          "#e7effd"
+        ]
+      },
+      "passive-border": {
+        "role": "secondary",
+        "displayName": "Passive Border",
+        "canonical": "light-dark(#c2d7fb, #2c4a7a)",
+        "light": "#c2d7fb",
+        "dark": "#2c4a7a",
+        "lightOklch": "oklch(87.5% 0.055 261.2)",
+        "darkOklch": "oklch(41.0% 0.089 259.4)",
+        "purpose": "Passive infobar edge.",
+        "tonalRamp": [
+          "#010922",
+          "#14233e",
+          "#2f405d",
+          "#4c5e7d",
+          "#6e81a2",
+          "#92a5c8",
+          "#b7ccef",
+          "#e6effe"
+        ]
+      },
+      "passive-ink": {
+        "role": "secondary",
+        "displayName": "Passive Ink",
+        "canonical": "light-dark(#062e6f, #d3e3fd)",
+        "light": "#062e6f",
+        "dark": "#d3e3fd",
+        "lightOklch": "oklch(32.1% 0.121 260.2)",
+        "darkOklch": "oklch(91.2% 0.040 260.1)",
+        "purpose": "Text on Passive Blue Wash.",
+        "tonalRamp": [
+          "#00062c",
+          "#001e58",
+          "#153c7e",
+          "#335ca1",
+          "#5480c8",
+          "#78a5f0",
+          "#adccff",
+          "#e6effe"
+        ]
+      },
+      "update-flash": {
+        "role": "tertiary",
+        "displayName": "Update Flash",
+        "canonical": "light-dark(#fde293, #6b5718)",
+        "light": "#fde293",
+        "dark": "#6b5718",
+        "lightOklch": "oklch(91.8% 0.103 91.3)",
+        "darkOklch": "oklch(46.5% 0.083 90.7)",
+        "purpose": "Start colour of the resolve-in-place row flash.",
+        "tonalRamp": [
+          "#110a00",
+          "#2e2300",
+          "#4f3e00",
+          "#725b00",
+          "#977e2d",
+          "#bca254",
+          "#e3c97a",
+          "#ffeebc"
+        ]
+      },
+      "syntax-keyword": {
+        "role": "tertiary",
+        "displayName": "Syntax Keyword",
+        "canonical": "light-dark(#aa0d91, #e36eec)",
+        "light": "#aa0d91",
+        "dark": "#e36eec",
+        "lightOklch": "oklch(50.7% 0.217 336.8)",
+        "darkOklch": "oklch(72.1% 0.209 324.7)",
+        "purpose": "GraphQL keywords.",
+        "tonalRamp": [
+          "#1c0016",
+          "#430038",
+          "#6f005e",
+          "#9f0188",
+          "#ca3aae",
+          "#f463d5",
+          "#ffabe8",
+          "#ffe6f7"
+        ]
+      },
+      "syntax-type": {
+        "role": "tertiary",
+        "displayName": "Syntax Type",
+        "canonical": "light-dark(#0b57d0, #8ab4f8)",
+        "light": "#0b57d0",
+        "dark": "#8ab4f8",
+        "lightOklch": "oklch(49.5% 0.199 260.6)",
+        "darkOklch": "oklch(76.6% 0.108 259.8)",
+        "purpose": "Type names and built-ins.",
+        "tonalRamp": [
+          "#00052e",
+          "#001e5a",
+          "#003790",
+          "#0452cb",
+          "#3179f4",
+          "#6ea4ff",
+          "#adccff",
+          "#e6efff"
+        ]
+      },
+      "syntax-variable": {
+        "role": "tertiary",
+        "displayName": "Syntax Variable",
+        "canonical": "light-dark(#c5221f, #f28b82)",
+        "light": "#c5221f",
+        "dark": "#f28b82",
+        "lightOklch": "oklch(53.2% 0.198 27.9)",
+        "darkOklch": "oklch(74.5% 0.127 25.8)",
+        "purpose": "$variables and directives.",
+        "tonalRamp": [
+          "#210000",
+          "#4c0001",
+          "#7d0005",
+          "#b2010b",
+          "#dd3e35",
+          "#ff7365",
+          "#ffb5ab",
+          "#fee9e6"
+        ]
+      },
+      "syntax-string": {
+        "role": "tertiary",
+        "displayName": "Syntax String",
+        "canonical": "light-dark(#1a1aa6, #f29766)",
+        "light": "#1a1aa6",
+        "dark": "#f29766",
+        "lightOklch": "oklch(35.5% 0.209 269.0)",
+        "darkOklch": "oklch(76.0% 0.127 48.4)",
+        "purpose": "String literals.",
+        "tonalRamp": [
+          "#030036",
+          "#0e0075",
+          "#1c21ab",
+          "#3249d1",
+          "#4f70fb",
+          "#809fff",
+          "#b5c9ff",
+          "#e8eefe"
+        ]
+      },
+      "syntax-enum": {
+        "role": "tertiary",
+        "displayName": "Syntax Enum",
+        "canonical": "light-dark(#1c00cf, #b39ddb)",
+        "light": "#1c00cf",
+        "dark": "#b39ddb",
+        "lightOklch": "oklch(39.3% 0.263 267.9)",
+        "darkOklch": "oklch(73.7% 0.091 300.5)",
+        "purpose": "Enum values in SDL.",
+        "tonalRamp": [
+          "#020036",
+          "#0b0076",
+          "#1901bf",
+          "#2738ee",
+          "#4a70fe",
+          "#7e9fff",
+          "#b4c9ff",
+          "#e8eefe"
+        ]
+      },
+      "syntax-comment": {
+        "role": "tertiary",
+        "displayName": "Syntax Comment",
+        "canonical": "light-dark(#5f6368, #9aa0a6)",
+        "light": "#5f6368",
+        "dark": "#9aa0a6",
+        "lightOklch": "oklch(49.8% 0.009 253.9)",
+        "darkOklch": "oklch(70.3% 0.011 248.0)",
+        "purpose": "SDL descriptions/comments (italic).",
+        "tonalRamp": [
+          "#090b0f",
+          "#212429",
+          "#3c4045",
+          "#5a5e63",
+          "#7c8186",
+          "#a1a5aa",
+          "#c6cbd1",
+          "#eaeff5"
+        ]
+      }
+    },
+    "colorNotes": "Canonical values are light-dark() pairs in frontend/css/tokens.css; tonalRamp is synthesized in OKLCH from the light value. Dark mode flips color-scheme only (frontend/css/theme-dark.css). prefers-contrast: more strengthens divider and ink-secondary.",
+    "typographyMeta": {
+      "title": {
+        "displayName": "Title",
+        "purpose": "Detail operation name, empty-state and dialog titles. Largest UI text (13px)."
+      },
+      "body": {
+        "displayName": "Body",
+        "purpose": "Default for all interface text at DevTools 12px."
+      },
+      "label": {
+        "displayName": "Label",
+        "purpose": "Operation names, state words, column heads, primary/record buttons. Emphasis by weight 500."
+      },
+      "code": {
+        "displayName": "Code",
+        "purpose": "Query, variables and SDL bodies; wraps, never scrolls horizontally."
+      },
+      "code-small": {
+        "displayName": "Code Small",
+        "purpose": "Hashes, times, patterns, endpoint URLs, group headers, schema type names, inline code."
+      }
+    },
+    "density": [
+      {
+        "name": "comfortable",
+        "values": {
+          "fs": "12px",
+          "fs-sm": "11px",
+          "fs-title": "13px",
+          "toolbar-h": "30px",
+          "tab-h": "28px",
+          "control-h": "22px",
+          "row-h": "24px",
+          "pad": "12px"
+        },
+        "purpose": "DevTools default row height."
+      },
+      {
+        "name": "compact",
+        "values": {
+          "toolbar-h": "26px",
+          "tab-h": "26px",
+          "control-h": "20px",
+          "row-h": "20px",
+          "pad": "8px"
+        },
+        "purpose": "Dense tables; set via data-density=\"compact\" and applied automatically at max-height 460px."
+      }
+    ],
+    "shadows": [
+      {
+        "name": "shadow-menu",
+        "value": "0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15)",
+        "purpose": "Floating layers only: settings menu, toasts, dialog panel."
+      },
+      {
+        "name": "focus-outline",
+        "value": "outline: 2px solid var(--focus); outline-offset: 1px",
+        "purpose": "Focus indicator (an outline, not a shadow); inset -1px/-2px on rows, tabs, lists and code."
+      }
+    ],
+    "motion": [
+      {
+        "name": "ease-out",
+        "value": "cubic-bezier(0.2, 0, 0, 1)",
+        "purpose": "Standard easing for state transitions, the row flash and toast entry."
+      },
+      {
+        "name": "t-fast",
+        "value": "120ms",
+        "purpose": "Chevron and disclosure-triangle rotation."
+      },
+      {
+        "name": "t-med",
+        "value": "200ms",
+        "purpose": "Toast rise-in (6px)."
+      },
+      {
+        "name": "row-updated",
+        "value": "1.2s var(--ease-out), background from var(--flash)",
+        "purpose": "Signature resolve-in-place flash; reduced motion swaps it for a 1px resolved-green inset outline."
+      },
+      {
+        "name": "live-pulse",
+        "value": "1.2s ease-in-out x3, opacity to 0.35",
+        "purpose": "Record dot in the live infobar pulses three times, then rests."
+      },
+      {
+        "name": "skeleton",
+        "value": "1.4s ease-in-out infinite",
+        "purpose": "Schema loading shimmer."
+      }
+    ],
+    "breakpoints": [
+      {
+        "name": "narrow",
+        "value": "640px",
+        "purpose": "Below: detail pane overlays the list; Hash column, Patterns label and pane descriptions drop."
+      },
+      {
+        "name": "very-narrow",
+        "value": "420px",
+        "purpose": "Below: Time column, resolved count and toolbar separators drop; schema type list 140px."
+      },
+      {
+        "name": "short",
+        "value": "max-height: 460px",
+        "purpose": "Compact density applies automatically."
+      }
+    ]
+  },
+  "components": [
+    {
+      "name": "Toolbar Button",
+      "kind": "button",
+      "refersTo": "button-toolbar",
+      "description": "Default quiet control in toolbars; gains a divider outline on content surfaces.",
+      "html": "<div class=\"ds-toolbar\"><button class=\"ds-btn\">Clear</button><button class=\"ds-btn ds-btn-outlined\">Copy as cURL</button></div>",
+      "css": ".ds-toolbar{display:flex;gap:4px;padding:2px 6px;background:var(--bg-chrome);font:12px/1.4 var(--font-ui);color:var(--text)} .ds-btn{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--text);font:inherit;cursor:pointer} .ds-btn-outlined{border-color:var(--divider)} .ds-btn:hover{background:var(--bg-hover)} .ds-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .ds-btn:disabled{color:var(--text-disabled);background:none}"
+    },
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "One primary action per view (Load schema, Copy in the cURL dialog).",
+      "html": "<button class=\"ds-btn-primary\">Load schema</button>",
+      "css": ".ds-btn-primary{height:22px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);font:500 12px/1.4 var(--font-ui);cursor:pointer} .ds-btn-primary:hover{background:var(--primary-hover)} .ds-btn-primary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}"
+    },
+    {
+      "name": "Record Button",
+      "kind": "button",
+      "refersTo": "button-toolbar",
+      "description": "Network-panel record circle: hollow when idle, filled red while intercepting.",
+      "html": "<button class=\"ds-rec\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><circle cx=\"12\" cy=\"12\" r=\"6\"/></svg>Record</button> <button class=\"ds-rec is-on\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><circle cx=\"12\" cy=\"12\" r=\"6\"/></svg>Stop</button>",
+      "css": ".ds-rec{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 6px;border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--text);font:500 12px/1.4 var(--font-ui);cursor:pointer} .ds-rec svg{fill:none;stroke:var(--text-2);stroke-width:2} .ds-rec.is-on{color:var(--record)} .ds-rec.is-on svg{fill:var(--record);stroke:var(--record)} .ds-rec:hover{background:var(--bg-hover)} .ds-rec:focus-visible{outline:2px solid var(--focus);outline-offset:1px}"
+    },
+    {
+      "name": "Type Filter Pills",
+      "kind": "chip",
+      "refersTo": "chip-filter",
+      "description": "DevTools Network resource-type pills: All / APQ / Full.",
+      "html": "<div class=\"ds-pills\"><button class=\"ds-pill is-active\">All</button><button class=\"ds-pill\">APQ</button><button class=\"ds-pill\">Full</button></div>",
+      "css": ".ds-pills{display:inline-flex;gap:2px;font:12px/1.4 var(--font-ui)} .ds-pill{height:20px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-pill);background:none;color:var(--text);font:inherit;cursor:pointer} .ds-pill:hover{background:var(--bg-hover)} .ds-pill.is-active{background:var(--bg-selected);color:var(--text-on-selected)} .ds-pill:focus-visible{outline:2px solid var(--focus);outline-offset:1px}"
+    },
+    {
+      "name": "Toolbar Input",
+      "kind": "input",
+      "refersTo": "input-toolbar",
+      "description": "Filter and pattern fields; patterns use the monospace stack.",
+      "html": "<input class=\"ds-input\" placeholder=\"Filter\"> <input class=\"ds-input ds-mono\" value=\"*graphql*\">",
+      "css": ".ds-input{height:22px;width:180px;padding:0 6px;border:1px solid var(--divider);border-radius:var(--r-md);background:var(--bg-input);color:var(--text);font:12px/1.4 var(--font-ui)} .ds-input::placeholder{color:var(--text-2)} .ds-input:hover{border-color:var(--border-input)} .ds-input:focus-visible{outline:2px solid var(--focus);outline-offset:-1px;border-color:var(--focus)} .ds-mono{font-family:var(--font-mono);font-size:11px}"
+    },
+    {
+      "name": "Tab Strip",
+      "kind": "nav",
+      "refersTo": "tab",
+      "description": "Requests / Schema tabs with the blue underline; session status at the end.",
+      "html": "<div class=\"ds-tabs\"><button class=\"ds-tab is-on\">Requests</button><button class=\"ds-tab\">Schema</button><span class=\"ds-status\"><i></i>Intercepting</span></div>",
+      "css": ".ds-tabs{display:flex;align-items:stretch;min-height:28px;background:var(--bg-chrome);border-bottom:1px solid var(--divider);font:12px/1.4 var(--font-ui)} .ds-tab{position:relative;padding:0 12px;border:0;background:none;color:var(--text-2);font:inherit;cursor:pointer} .ds-tab:hover{color:var(--text);background:var(--bg-hover)} .ds-tab.is-on{color:var(--primary)} .ds-tab.is-on::after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)} .ds-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .ds-status{margin-left:auto;padding:0 8px;display:inline-flex;align-items:center;gap:6px;color:var(--record);font-weight:600} .ds-status i{width:8px;height:8px;border-radius:50%;background:currentColor}"
+    },
+    {
+      "name": "Live Infobar",
+      "kind": "custom",
+      "refersTo": "infobar-live",
+      "description": "Yellow band shown only while matching traffic is being rewritten.",
+      "html": "<div class=\"ds-infobar\"><svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\"><circle cx=\"12\" cy=\"12\" r=\"6\"/></svg><p>Intercepting requests matching <code>*graphql*</code></p><button>Stop</button></div>",
+      "css": ".ds-infobar{display:flex;align-items:flex-start;gap:8px;min-height:30px;padding:4px 12px;background:var(--live-bg);color:var(--live-text);border-bottom:1px solid var(--live-border);font:12px/1.4 var(--font-ui)} .ds-infobar svg{margin-top:4px;fill:var(--record);flex:none;animation:ds-pulse 1.2s ease-in-out 3} .ds-infobar p{flex:1;margin:0;padding-top:1px} .ds-infobar code{font:11px var(--font-mono);padding:0 2px;border-radius:var(--r-sm);background:color-mix(in srgb,currentColor 10%,transparent)} .ds-infobar button{height:22px;padding:0 8px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--r-md);background:none;color:inherit;font:500 12px var(--font-ui);cursor:pointer} .ds-infobar button:hover{background:color-mix(in srgb,currentColor 10%,transparent)} .ds-infobar button:focus-visible{outline:2px solid var(--focus);outline-offset:1px} @keyframes ds-pulse{50%{opacity:.35}}"
+    },
+    {
+      "name": "Request Rows",
+      "kind": "custom",
+      "refersTo": "table-row",
+      "description": "Single-line rows with state as word + glyph; a resolving row flashes in place.",
+      "html": "<div class=\"ds-table\"><div class=\"ds-row ds-head\"><span>Name</span><span>State</span><span>Hash</span></div><div class=\"ds-row ds-flash\"><span class=\"ds-op\">GetViewer</span><span class=\"ds-st ds-res\">Resolved</span><span class=\"ds-h\">ecf4edb4</span></div><div class=\"ds-row\" tabindex=\"0\"><span class=\"ds-op\">ProductListing</span><span class=\"ds-st ds-pen\">Awaiting retry</span><span class=\"ds-h\">7a1f0c2e</span></div><div class=\"ds-row ds-sel\"><span class=\"ds-op\">AddToCart</span><span class=\"ds-st ds-full\">Full query</span><span class=\"ds-h\"></span></div></div>",
+      "css": ".ds-table{font:12px/1.4 var(--font-ui);color:var(--text);background:var(--bg);min-width:360px} .ds-row{display:grid;grid-template-columns:minmax(120px,1fr) 112px 76px;align-items:center;height:24px;border-bottom:1px solid color-mix(in srgb,var(--divider) 55%,transparent)} .ds-row>*{padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-row>*+*{border-left:1px solid var(--divider);line-height:23px} .ds-head{background:var(--bg-chrome);color:var(--text-2);font-weight:500;border-bottom-color:var(--divider)} .ds-row:not(.ds-head):hover{background:var(--bg-hover)} .ds-row:focus-visible{outline:1px solid var(--focus);outline-offset:-1px} .ds-sel{background:var(--bg-selected);color:var(--text-on-selected)} .ds-op{font-weight:500} .ds-h{font:11px var(--font-mono);color:var(--text-2)} .ds-st{display:inline-flex;align-items:center;gap:4px;font-weight:500} .ds-st::before{content:\"\";width:7px;height:7px;flex:none} .ds-res{color:var(--resolved)} .ds-res::before{border-radius:50%;background:currentColor} .ds-pen{color:var(--pending)} .ds-pen::before{border-radius:50%;border:1.5px solid currentColor} .ds-full{color:inherit;font-weight:400} .ds-full::before{width:6px;height:6px;background:currentColor;border-radius:1px} .ds-flash{animation:ds-flash 1.2s var(--ease-out) infinite} @keyframes ds-flash{from{background:var(--flash)}} @media (prefers-reduced-motion:reduce){.ds-flash{animation:none;outline:1px solid var(--resolved);outline-offset:-1px}}"
+    },
+    {
+      "name": "Query Code Block",
+      "kind": "card",
+      "refersTo": "code-block",
+      "description": "Collapsible, wrapped, syntax-coloured query; the dominant element of the detail pane.",
+      "html": "<details class=\"ds-code\" open><summary><span>Query</span><button>Copy</button></summary><pre><span class=\"k\">query</span> GetViewer(<span class=\"v\">$id</span>: <span class=\"t\">ID!</span>) {\n  viewer(id: <span class=\"v\">$id</span>) { name }\n}</pre></details>",
+      "css": ".ds-code{border:1px solid var(--divider);border-radius:var(--r-md);font:12px/1.4 var(--font-ui);color:var(--text)} .ds-code summary{display:flex;align-items:center;gap:6px;min-height:26px;padding:2px 2px 2px 8px;background:var(--bg-chrome);border-bottom:1px solid var(--divider);border-radius:var(--r-md) var(--r-md) 0 0;list-style:none;cursor:pointer;font-weight:600} .ds-code summary::-webkit-details-marker{display:none} .ds-code summary::before{content:\"\";border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--text-2);transform:rotate(90deg);transition:transform var(--t-fast) var(--ease-out)} .ds-code summary span{flex:1} .ds-code summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .ds-code summary button{height:20px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--text);font:400 12px var(--font-ui);cursor:pointer} .ds-code summary button:hover{background:var(--bg-hover)} .ds-code pre{margin:0;padding:8px 12px;background:var(--bg-sunken);font:12px/1.5 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:0 0 var(--r-md) var(--r-md)} .ds-code .k{color:var(--syn-keyword)} .ds-code .t{color:var(--syn-type)} .ds-code .v{color:var(--syn-variable)}"
+    },
+    {
+      "name": "Settings Menu",
+      "kind": "custom",
+      "refersTo": "menu",
+      "description": "Floating raised menu: the only in-panel surface (with toasts and dialogs) that carries a shadow.",
+      "html": "<div class=\"ds-menu\"><fieldset><legend>Theme</legend><label><input type=\"radio\" name=\"t\" checked> System</label><label><input type=\"radio\" name=\"t\"> Light</label><label><input type=\"radio\" name=\"t\"> Dark</label></fieldset></div>",
+      "css": ".ds-menu{width:240px;padding:6px 0;background:var(--bg-raised);border:1px solid var(--border-raised);border-radius:var(--r-lg);box-shadow:var(--shadow-menu);font:12px/1.4 var(--font-ui);color:var(--text)} .ds-menu fieldset{margin:0;padding:4px 0;border:0} .ds-menu legend{float:left;width:100%;padding:4px 12px;color:var(--text-2);font-weight:500} .ds-menu label{clear:both;display:flex;align-items:center;gap:8px;height:26px;padding:0 12px;cursor:pointer} .ds-menu label:hover{background:var(--bg-hover)} .ds-menu input{width:14px;height:14px;margin:0;accent-color:var(--primary)} .ds-menu input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}"
+    }
+  ],
+  "narrative": {
+    "northStar": "The First-Party Panel",
+    "overview": "APQ Debugger is built to be mistaken for a panel Chrome shipped itself. It sits beside Network and Elements, so it takes their system wholesale: 12px system UI type, monospace for anything machine-made (hashes, queries, URLs, timestamps), white and grey-100 surfaces (dark: #202124 / #292a2d) split by 1px dividers, Google blue for selection, focus and the one primary action, record red, a yellow infobar while traffic is being rewritten, and green reserved for a resolved hash. Familiarity is the design goal; personality is spent only on state changes.\n\nThe structure is the DevTools canon: a tab strip (Requests, Schema, settings gear and session status at the right), a per-view toolbar, an optional collapsible patterns pane, an infobar when interception or passive mode is on, then a dense single-line data table with a detail pane that appears only after selection. In the detail pane the recovered query is the largest, most readable thing on screen, wrapped and syntax-coloured in DevTools Sources colours. The system rejects the editorial card-and-metric dashboard and the permanent settings sidebar that preceded it.\n\nDensity is a working constraint, not a preference: the panel is often docked about 400px tall. Comfortable matches DevTools' default row height (24px), Compact its dense tables (20px), and Compact switches on by itself when the panel is 460px tall or less. The one signature moment is a pending APQ row resolving in place, its state flipping to Resolved under the DevTools \"updated\" flash.",
+    "keyCharacteristics": [
+      "System UI 12px for interface, ui-monospace for code, hashes, URLs and times; no bundled or network fonts.",
+      "Flat in-flow surfaces separated by 1px dividers and tonal steps (surface vs chrome vs sunken).",
+      "Blue means selection, focus or primary; red means recording; yellow means traffic is being rewritten; green means resolved.",
+      "Every request state is a word plus a glyph shape, never colour alone.",
+      "Single-line 24px (20px compact) table rows with column dividers.",
+      "Every colour defined once with light-dark(); dark mode only flips color-scheme."
+    ],
+    "rules": [
+      {
+        "name": "The One Meaning Rule",
+        "body": "Each signal colour has exactly one job: blue is selection, focus and the primary action; red is recording; yellow is live rewriting or a warning; green is a resolved hash. A colour never borrows another's meaning.",
+        "section": "colors"
+      },
+      {
+        "name": "The Yellow Means Rewriting Rule",
+        "body": "The yellow infobar is visible if and only if the debugger is attached and rewriting matching traffic; it names the patterns in monospace and carries Stop. Passive mode gets the blue infobar instead, because nothing is modified.",
+        "section": "colors"
+      },
+      {
+        "name": "The Define-Once Rule",
+        "body": "Every colour is declared once in tokens.css as `light-dark(light, dark)`. Dark mode is a `color-scheme` flip in theme-dark.css (explicit `data-theme` wins; otherwise the system preference). No component redeclares a colour per theme.",
+        "section": "colors"
+      },
+      {
+        "name": "The Machine-Text Rule",
+        "body": "Anything the machine produced (hash, URL, pattern, timestamp, query, type name) is set in the monospace stack; anything a person reads as interface is in system-ui. Numbers that update in place use tabular numerals.",
+        "section": "typography"
+      },
+      {
+        "name": "The Flat Ramp Rule",
+        "body": "The ramp spans 11px to 13px. Hierarchy comes from weight (400/500/600), colour (ink vs ink-secondary) and position, never from display sizes. Sentence case throughout; no uppercase tracking, no eyebrows.",
+        "section": "typography"
+      },
+      {
+        "name": "The Docked-First Rule",
+        "body": "Design for the panel docked about 400px tall: no chrome may cost more than one toolbar row plus the optional infobar before data rows begin.",
+        "section": "layout"
+      },
+      {
+        "name": "The Overlays-Only Rule",
+        "body": "A shadow means \"floating above the panel\". Rows, panes, toolbars, code blocks and infobars never carry one.",
+        "section": "elevation"
+      }
+    ],
+    "dos": [
+      "Do take every colour from tokens.css and add new ones there as `light-dark(light, dark)` pairs with text at 4.5:1 and meaningful indicators at 3:1 in both themes.",
+      "Do separate regions with 1px dividers and the surface / chrome / sunken tonal steps.",
+      "Do express every request state as a word plus a glyph shape, using the vocabulary in `request-state.js`.",
+      "Do set hashes, URLs, patterns, times and code in the monospace stack, and counts in tabular numerals.",
+      "Do keep controls at the density heights (22/20px controls, 24/20px rows) so compact and the short-dock auto-compact keep working.",
+      "Do keep the query block wrapped and dominant in the detail pane; the recovered query is the largest readable thing on screen.",
+      "Do give every motion a reduced-motion fallback that keeps the meaning (the resolve flash becomes a green outline).",
+      "Do support forced colours: selection maps to Highlight/HighlightText and floating layers get a CanvasText border."
+    ],
+    "donts": [
+      "Don't add shadows to in-flow surfaces; the overlay shadow is for menus, toasts and dialogs only.",
+      "Don't use green for anything except a resolved hash, or yellow except live interception and warnings.",
+      "Don't signal state with colour alone.",
+      "Don't load fonts, icons or scripts from the network, or ship a display face; the platform system-ui and ui-monospace stacks are the type system.",
+      "Don't reintroduce the editorial card-and-metric dashboard, a permanent settings sidebar, uppercase tracked eyebrows or display numerals.",
+      "Don't redeclare colours for dark mode; flip `color-scheme` only.",
+      "Don't let the query scroll horizontally; it wraps."
+    ]
+  }
+}
diff --git a/.impeccable/review/dark-04-detail.png b/.impeccable/review/dark-04-detail.png
new file mode 100644
index 0000000..0de0f51
Binary files /dev/null and b/.impeccable/review/dark-04-detail.png differ
diff --git a/.impeccable/review/dark-05-detail-pending.png b/.impeccable/review/dark-05-detail-pending.png
new file mode 100644
index 0000000..1ee8ce9
Binary files /dev/null and b/.impeccable/review/dark-05-detail-pending.png differ
diff --git a/.impeccable/review/dark-07-schema-empty.png b/.impeccable/review/dark-07-schema-empty.png
new file mode 100644
index 0000000..d9703f6
Binary files /dev/null and b/.impeccable/review/dark-07-schema-empty.png differ
diff --git a/.impeccable/review/desktop.png b/.impeccable/review/desktop.png
new file mode 100644
index 0000000..bf107e1
Binary files /dev/null and b/.impeccable/review/desktop.png differ
diff --git a/.impeccable/review/light-01-first-run.png b/.impeccable/review/light-01-first-run.png
new file mode 100644
index 0000000..dcaa82c
Binary files /dev/null and b/.impeccable/review/light-01-first-run.png differ
diff --git a/.impeccable/review/light-03-resolving-flash.png b/.impeccable/review/light-03-resolving-flash.png
new file mode 100644
index 0000000..8c4821e
Binary files /dev/null and b/.impeccable/review/light-03-resolving-flash.png differ
diff --git a/.impeccable/review/light-06-settings.png b/.impeccable/review/light-06-settings.png
new file mode 100644
index 0000000..639b741
Binary files /dev/null and b/.impeccable/review/light-06-settings.png differ
diff --git a/.impeccable/review/light-08-docked-900x400.png b/.impeccable/review/light-08-docked-900x400.png
new file mode 100644
index 0000000..3d998ae
Binary files /dev/null and b/.impeccable/review/light-08-docked-900x400.png differ
diff --git a/.impeccable/review/light-09-narrow-520-list.png b/.impeccable/review/light-09-narrow-520-list.png
new file mode 100644
index 0000000..8f3c144
Binary files /dev/null and b/.impeccable/review/light-09-narrow-520-list.png differ
diff --git a/.impeccable/review/light-10-narrow-520-detail.png b/.impeccable/review/light-10-narrow-520-detail.png
new file mode 100644
index 0000000..ed02bf8
Binary files /dev/null and b/.impeccable/review/light-10-narrow-520-detail.png differ
diff --git a/.impeccable/review/light-11-focus-tab.png b/.impeccable/review/light-11-focus-tab.png
new file mode 100644
index 0000000..2164f62
Binary files /dev/null and b/.impeccable/review/light-11-focus-tab.png differ
diff --git a/.impeccable/review/light-12-focus-row.png b/.impeccable/review/light-12-focus-row.png
new file mode 100644
index 0000000..805b87c
Binary files /dev/null and b/.impeccable/review/light-12-focus-row.png differ
diff --git a/.impeccable/review/mobile.png b/.impeccable/review/mobile.png
new file mode 100644
index 0000000..928bfef
Binary files /dev/null and b/.impeccable/review/mobile.png differ
diff --git a/.impeccable/surfaces/frontend-devtools-html.md b/.impeccable/surfaces/frontend-devtools-html.md
new file mode 100644
index 0000000..6915def
--- /dev/null
+++ b/.impeccable/surfaces/frontend-devtools-html.md
@@ -0,0 +1,29 @@
+---
+version: 1
+slug: "frontend-devtools-html"
+primary_target: "frontend/devtools.html"
+related_targets: []
+---
+
+# Surface brief: DevTools panel
+
+Scope: the whole APQ Debugger DevTools panel (frontend/devtools.html, frontend/css/*, js/ui/*). Visitor mode: Operate.
+
+Audience/job: GraphQL developers mid-investigation in Chrome DevTools, often docked ~400px tall beside Network. Task: start interception on matching URLs, watch operations arrive, read and copy the recovered query/variables, optionally browse the schema. Constraints: MV3, Chrome 123+, nothing loaded from the network, keyboard and screen-reader operable, light and dark.
+
+User decisions (2026-10-21): direction pinned to DevTools-native (the category standard played straight; sits alongside Chrome DevTools Network/Elements panels at their craft level); full redesign incl. structure; bugs folded in; live bar plus first-run note for Start (no modal).
+
+## Direction contract
+
+THESIS: A panel that reads as a first-party DevTools tool: Network-style toolbar, single-line data rows, a detail pane where the recovered query is the largest, most readable thing. Refuses the editorial card-and-metric dashboard with a permanent settings sidebar.
+
+OWN-WORLD: Chrome DevTools system: system-ui 12px and ui-monospace for code/hashes; white/grey-100 surfaces (dark #202124/#292a2d) split by 1px dividers; Google blue for selection, focus and primary; record red; yellow infobar for live interception; green only for resolved; DevTools Sources syntax colours.
+
+STORY: The user sees at once whether traffic is being rewritten and on which patterns, watches hashes arrive and resolve, opens one and copies the query.
+
+FIRST VIEWPORT: Row 1 tab strip (Requests, Schema; settings gear right). Row 2 toolbar: record/stop, clear, export, filter, All/APQ/Full, endpoint select, Patterns toggle with summary, count "5 · 4 resolved". Optional collapsible patterns pane under it. Yellow live bar when intercepting. Table: Name, State, Hash, Time. Detail pane (right; full overlay when narrow) only after selection: name + state line, meta grid, wrapped highlighted query, variables.
+
+FORM: DevTools-native canon (user-pinned standing exit, position: canon). Signature move: a pending APQ row resolves in place when its retry lands (state flips to Resolved with the DevTools update flash). Roll skipped: the user pinned the direction, which beats the roll.
+seed: none
+
+FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9df4042..427c087 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,47 @@ All notable changes to the APQ Debugger extension will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [4.0.0] - 2026-10-23
+
+### Added
+- Observed endpoints in the patterns pane: GraphQL endpoints seen in live
+  traffic, with request counts and one-click "Add as pattern"
+- Request and resolved-hash counts in the toolbar
+- Endpoint filter and automatic endpoint group headers in the request list
+- Row states with a word and a shape for each: Resolved, Awaiting retry,
+  Not in registry, APQ retry, Full query; a hash row resolves in place when
+  its full-query retry arrives
+- Infobar while traffic is being rewritten, and in passive mode
+- Toast notifications (replacing the status banner), confirm dialogs before
+  clearing history or the hash registry, and skeleton loading for the schema
+  explorer
+- Comfortable and compact row density (compact applies automatically in short
+  DevTools docks)
+- New read-only `getObservedEndpoints` service-worker message
+
+### Changed
+- **Full UI redesign as a DevTools-native panel**, matching Network and
+  Elements: tab strip, per-view toolbar, collapsible patterns pane (open by
+  default until a pattern is saved), request table with a detail split that
+  overlays the list in narrow docks
+- System UI font only; no bundled or network fonts
+- Light and dark colours defined once via CSS `light-dark()` (requires
+  Chrome 123+, declared via `minimum_chrome_version`)
+- One-word status vocabulary: Off, Starting, Intercepting, Passive, Stopping,
+  Error
+- Schema SDL highlighting rewritten as a single-pass lexer: fields, arguments,
+  default values, directive arguments, interfaces, unions and directive
+  locations are now coloured correctly, in DevTools Sources colours
+- CSS build supports ordered multi-file concatenation with a size budget;
+  panel bundle budget raised to 55 KB
+
+### Fixed
+- SDL comments containing a string no longer render stray placeholder
+  characters in the schema viewer
+- All-caps type names (such as `URL`) are no longer coloured as enum values
+
 ## [3.0.0] - 2026-06-13
 
 ### Added
@@ -102,6 +143,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 | Version | Commit | Date |
 |---------|--------|------|
+| 4.0.0 | — | 2026-10-23 |
 | 3.0.0 | — | 2026-06-13 |
 | 2.0.0 | — | 2026-02-07 |
 | 1.1.0 | `5b035ba` | 2026-01-30 |
diff --git a/CLAUDE.md b/CLAUDE.md
index 826a28f..f97dcc6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,6 +18,8 @@ npx jest -t "should evict the oldest hash"     # Single test by name
 npm run test:e2e       # Playwright e2e (launches real Chrome with the built extension)
 npm run lint           # ESLint
 npm run format:check   # Prettier check (see Windows note below)
+npm run promo:screens  # Regenerate store screenshots + promo tiles (after npm run build)
+npm run promo:video    # Re-record the demo video per store/promo/video/demo-script.md
 ```
 
 Releases: `npm version patch|minor|major` (syncs manifest.json via `scripts/sync-version.js`), then `git push --follow-tags` — the release workflow builds, tests, and publishes the zip.
@@ -32,6 +34,8 @@ Two independently bundled contexts that communicate only via `chrome.runtime.sen
 
 - **Service worker** (`js/sw/`, entry `index.js` → built as `service-worker.min.js`): owns all Chrome Debugger interaction. `debugger-manager.js` handles attach/detach lifecycle, `interceptor.js` handles `Fetch.requestPaused` and hash contamination, `messaging.js` routes incoming messages, `chrome-api.js` wraps callback APIs in promises.
 - **DevTools panel** (`js/ui/`, entry `index.js` → built as `devtools.min.js` loaded by `frontend/devtools.html`): one module per UI concern, all sharing the mutable `state` object in `js/ui/state.js`. The panel identifies its tab via `chrome.devtools.inspectedWindow.tabId` (reliable even when undocked).
+- **UI design layer** (`frontend/css/`, concatenated in order into `devtools.min.css`): the panel is **DevTools-native** — it should read as a first-party Chrome DevTools panel next to Network/Elements (see `PRODUCT.md`; the earlier Kora styling was retired in Oct 2026). `tokens.css` (every color defined once via `light-dark()`; hence `minimum_chrome_version: 123`), `theme-dark.css` (the only dark-mode gates — flip `color-scheme`, never redeclare colors), `density.css` (row/control heights behind `data-density`; compact also applies automatically below 460px tall), `components.css` (all component styling). Rules that must not regress: system UI font at 12px and `ui-monospace` only for code, hashes and URLs (no bundled or network fonts); 1px dividers separate regions, and only floating layers (menus, dialogs, toasts) get a shadow; colour carries state only — blue for selection/focus/primary, record red, yellow infobar while traffic is rewritten, green only for a resolved hash — and state is never colour alone (each state has a word and a shape); never cancel `:focus-visible`; sentence-case copy and one-word status vocabulary (Off, Starting, Intercepting, Passive, Stopping, Error).
+- **Panel structure:** tab strip (Requests / Schema, status, settings) → per-view toolbar (record, clear, export, patterns toggle, filter, type pills, endpoint select, counts) → collapsible patterns pane (opens automatically when no pattern is saved) → infobar (`session.js`: live interception or passive mode) → table + detail split. The detail pane is hidden until a row is selected and overlays the list below 640px wide (`layout.js`). `request-state.js` owns the row vocabulary (Resolved / Awaiting retry / Not in registry / APQ retry / Full query); `request-list.js` resolves a hash row in place when its full-query retry with the same hash arrives.
 - **`js/shared/`**: constants and logger used by both bundles. The GraphQL introspection query is a string literal here specifically so the `graphql` npm package stays out of the service worker bundle.
 
 Key cross-cutting behaviors:
@@ -40,7 +44,7 @@ Key cross-cutting behaviors:
 - **Hash registry / passive mode** (`js/sw/hash-registry.js`): active mode contaminates hashes and records hash→query mappings from the retries; passive mode resolves hashes from the registry without touching traffic. Capped at `HASH_REGISTRY_MAX_ENTRIES` (LRU eviction; insertion order is recency — re-registering deletes then re-sets the key).
 - **Messaging convention:** SW→panel messages are broadcast with a `tabId` field and filtered on the receiving side; panel→SW messages are validated in `messaging.js` (`validateMessage`) before routing. Every `sendMessage` callback checks `chrome.runtime.lastError` because the panel is frequently not open.
 - **Schema loading** (`js/sw/schema-loader.js`): runs in the SW (which has `<all_urls>` host permission for cross-origin fetch). Endpoints observed by the interceptor (`endpoint-tracker.js`) are known GraphQL endpoints, so they are introspected directly, replaying the request headers captured from live traffic (production gateways reject bare requests); only the common-path guesses on the page's origin are probed with a bare `{__typename}` request.
-- **Build** (`build-enhanced.js`): esbuild bundles both entries as IIFEs; production drops `debugger` statements and treats `console.info`/`console.debug` as pure (stripped) — so use those for dev-only logging and `console.log`/`warn`/`error` for messages that should survive in release builds. The HTML/manifest are patched for the flat `extension_build/` layout; loading the repo root unpacked does not work.
+- **Build** (`build-enhanced.js`): esbuild bundles both entries as IIFEs; production drops `debugger` statements and treats `console.info`/`console.debug` as pure (stripped) — so use those for dev-only logging and `console.log`/`warn`/`error` for messages that should survive in release builds. CSS is an ordered `config.css.inputs` array concatenated then minified once (budgeted in `check-bundle-size.js`); `frontend/fonts/` is copied into the build. The HTML/manifest are patched for the flat `extension_build/` layout; loading the repo root unpacked does not work.
 
 ## Tests
 
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..355596b
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,354 @@
+---
+name: APQ Debugger
+description: A DevTools-native panel that recovers the GraphQL query behind every Apollo persisted-query hash.
+colors:
+  surface: "light-dark(#ffffff, #202124)"
+  surface-chrome: "light-dark(#f1f3f4, #292a2d)"
+  surface-raised: "light-dark(#ffffff, #303134)"
+  surface-sunken: "light-dark(#f8f9fa, #1b1c1e)"
+  surface-hover: "light-dark(#eef1f6, #2f3236)"
+  selection: "light-dark(#d3e3fd, #0f3a6e)"
+  selection-idle: "light-dark(#e8eaed, #3c4043)"
+  input-surface: "light-dark(#ffffff, #202124)"
+  divider: "light-dark(#dadce0, #3c4043)"
+  input-border: "light-dark(#80868b, #80868b)"
+  raised-border: "light-dark(#c4c7c5, #5f6368)"
+  ink: "light-dark(#1f1f1f, #e3e3e3)"
+  ink-secondary: "light-dark(#5f6368, #a8acb1)"
+  ink-disabled: "light-dark(#9aa0a6, #6f7378)"
+  ink-on-selection: "light-dark(#041e49, #e3eefe)"
+  devtools-blue: "light-dark(#0b57d0, #a8c7fa)"
+  devtools-blue-hover: "light-dark(#0842a0, #c2d7fb)"
+  on-devtools-blue: "light-dark(#ffffff, #062e6f)"
+  focus: "light-dark(#0b57d0, #a8c7fa)"
+  record-red: "light-dark(#d93025, #f28b82)"
+  resolved-green: "light-dark(#137333, #81c995)"
+  awaiting-amber: "light-dark(#8a5300, #fdd663)"
+  error-red: "light-dark(#b3261e, #f2b8b5)"
+  error-wash: "light-dark(#fce8e6, #3c1b18)"
+  live-wash: "light-dark(#fef7e0, #3a3013)"
+  live-border: "light-dark(#f2d68b, #6b5718)"
+  live-ink: "light-dark(#3c2c00, #fdecb7)"
+  passive-wash: "light-dark(#e8f0fe, #172b4d)"
+  passive-border: "light-dark(#c2d7fb, #2c4a7a)"
+  passive-ink: "light-dark(#062e6f, #d3e3fd)"
+  update-flash: "light-dark(#fde293, #6b5718)"
+  syntax-keyword: "light-dark(#aa0d91, #e36eec)"
+  syntax-type: "light-dark(#0b57d0, #8ab4f8)"
+  syntax-variable: "light-dark(#c5221f, #f28b82)"
+  syntax-string: "light-dark(#1a1aa6, #f29766)"
+  syntax-enum: "light-dark(#1c00cf, #b39ddb)"
+  syntax-comment: "light-dark(#5f6368, #9aa0a6)"
+typography:
+  title:
+    fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
+    fontSize: "13px"
+    fontWeight: 600
+    lineHeight: 1.4
+  body:
+    fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
+    fontSize: "12px"
+    fontWeight: 400
+    lineHeight: 1.4
+  label:
+    fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif"
+    fontSize: "12px"
+    fontWeight: 500
+    lineHeight: 1.4
+  code:
+    fontFamily: "ui-monospace, Menlo, Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace"
+    fontSize: "12px"
+    fontWeight: 400
+    lineHeight: 1.5
+  code-small:
+    fontFamily: "ui-monospace, Menlo, Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace"
+    fontSize: "11px"
+    fontWeight: 400
+    lineHeight: 1.4
+    fontFeature: "\"tnum\" 1"
+rounded:
+  sm: "3px"
+  md: "4px"
+  lg: "8px"
+  pill: "999px"
+spacing:
+  s-1: "2px"
+  s-2: "4px"
+  s-3: "6px"
+  s-4: "8px"
+  s-5: "12px"
+  s-6: "16px"
+  s-7: "24px"
+components:
+  button-toolbar:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    padding: "0 8px"
+    height: "22px"
+  button-toolbar-hover:
+    backgroundColor: "{colors.surface-hover}"
+  button-primary:
+    backgroundColor: "{colors.devtools-blue}"
+    textColor: "{colors.on-devtools-blue}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "0 8px"
+    height: "22px"
+  button-primary-hover:
+    backgroundColor: "{colors.devtools-blue-hover}"
+  button-danger:
+    backgroundColor: "{colors.error-red}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "0 8px"
+    height: "22px"
+  button-icon:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink-secondary}"
+    rounded: "{rounded.md}"
+    size: "24px"
+  chip-filter:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.pill}"
+    padding: "0 8px"
+    height: "20px"
+  chip-filter-active:
+    backgroundColor: "{colors.selection}"
+    textColor: "{colors.ink-on-selection}"
+  input-toolbar:
+    backgroundColor: "{colors.input-surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+    padding: "0 6px"
+    height: "22px"
+  tab:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink-secondary}"
+    padding: "0 12px"
+    height: "28px"
+  tab-active:
+    textColor: "{colors.devtools-blue}"
+  toolbar:
+    backgroundColor: "{colors.surface-chrome}"
+    padding: "2px 6px"
+    height: "30px"
+  table-row:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    padding: "0 8px"
+    height: "24px"
+  table-row-selected:
+    backgroundColor: "{colors.selection}"
+    textColor: "{colors.ink-on-selection}"
+  table-row-selected-idle:
+    backgroundColor: "{colors.selection-idle}"
+  infobar-live:
+    backgroundColor: "{colors.live-wash}"
+    textColor: "{colors.live-ink}"
+    padding: "4px 12px"
+  infobar-passive:
+    backgroundColor: "{colors.passive-wash}"
+    textColor: "{colors.passive-ink}"
+    padding: "4px 12px"
+  code-block:
+    backgroundColor: "{colors.surface-sunken}"
+    textColor: "{colors.ink}"
+    typography: "{typography.code}"
+    rounded: "{rounded.md}"
+    padding: "8px 12px"
+  menu:
+    backgroundColor: "{colors.surface-raised}"
+    rounded: "{rounded.lg}"
+    padding: "6px 0"
+    width: "240px"
+  dialog:
+    backgroundColor: "{colors.surface-raised}"
+    rounded: "{rounded.lg}"
+    padding: "16px"
+    width: "400px"
+---
+
+# Design System: APQ Debugger
+
+## Overview
+
+**Creative North Star: "The First-Party Panel"**
+
+APQ Debugger is built to be mistaken for a panel Chrome shipped itself. It sits beside Network and Elements, so it takes their system wholesale: 12px system UI type, monospace for anything machine-made (hashes, queries, URLs, timestamps), white and grey-100 surfaces (dark: #202124 / #292a2d) split by 1px dividers, Google blue for selection, focus and the one primary action, record red, a yellow infobar while traffic is being rewritten, and green reserved for a resolved hash. Familiarity is the design goal; personality is spent only on state changes.
+
+The structure is the DevTools canon: a tab strip (Requests, Schema, settings gear and session status at the right), a per-view toolbar, an optional collapsible patterns pane, an infobar when interception or passive mode is on, then a dense single-line data table with a detail pane that appears only after selection. In the detail pane the recovered query is the largest, most readable thing on screen, wrapped and syntax-coloured in DevTools Sources colours. The system rejects the editorial card-and-metric dashboard and the permanent settings sidebar that preceded it.
+
+Density is a working constraint, not a preference: the panel is often docked about 400px tall. Comfortable matches DevTools' default row height (24px), Compact its dense tables (20px), and Compact switches on by itself when the panel is 460px tall or less. The one signature moment is a pending APQ row resolving in place, its state flipping to Resolved under the DevTools "updated" flash.
+
+**Key Characteristics:**
+- System UI 12px for interface, ui-monospace for code, hashes, URLs and times; no bundled or network fonts.
+- Flat in-flow surfaces separated by 1px dividers and tonal steps (surface vs chrome vs sunken).
+- Blue means selection, focus or primary; red means recording; yellow means traffic is being rewritten; green means resolved.
+- Every request state is a word plus a glyph shape, never colour alone.
+- Single-line 24px (20px compact) table rows with column dividers.
+- Every colour defined once with light-dark(); dark mode only flips color-scheme.
+
+## Colors
+
+A neutral DevTools grey-and-white field with a strict signal vocabulary: one blue, one red, one yellow, one green, each tied to a single meaning.
+
+### Primary
+- **DevTools Blue** (devtools-blue): the active tab label and its 2px underline, primary buttons (Load schema, Copy in the cURL dialog), link buttons and the checkbox accent. Its hover deepens to DevTools Blue Hover.
+- **Focus Blue** (focus): the 2px focus outline on every interactive element and the resize handle's hover/drag state. Same value as DevTools Blue by design; kept as its own token so focus can diverge without touching actions.
+- **Selection Blue** (selection): the selected row, schema type and active filter pill while their list has focus; text on it uses Ink on Selection. When the list loses focus the row drops to Selection Grey (selection-idle), exactly as DevTools does.
+
+### Secondary
+- **Record Red** (record-red): the record circle while recording, the "Intercepting" session status, and the pulsing dot in the live infobar. Nothing else.
+- **Live Yellow** (live-wash, live-border, live-ink): the interception infobar ("Intercepting requests matching ...") and warning toasts. It appears only while requests are actually being rewritten or something needs attention.
+- **Passive Blue Wash** (passive-wash, passive-border, passive-ink): the passive-mode infobar ("Requests are not modified"). Blue-grey, calm, informational.
+
+### Tertiary (state)
+- **Resolved Green** (resolved-green): the Resolved state word and its filled dot.
+- **Awaiting Amber** (awaiting-amber): the Awaiting retry state (hollow ring), the "none" patterns summary warning, and the warning session status.
+- **Error Red** (error-red, error-wash): Not in registry (dash glyph), schema load errors, error toasts, and the destructive confirm button.
+- **Update Flash** (update-flash): the background a row starts from when it resolves in place, fading out over 1.2s.
+
+### Neutral
+- **Surface** (surface): the table, panes and detail body.
+- **Chrome Grey** (surface-chrome): tab strip, toolbars, table head, group headers, code-block headers, detail head, inline code.
+- **Raised** (surface-raised, raised-border): menus and dialogs.
+- **Sunken** (surface-sunken): query, variables and SDL code bodies.
+- **Hover** (surface-hover): hover wash on rows, tabs, buttons and menu options.
+- **Divider** (divider): every 1px region split, column rule and resting input border; row bottoms use it at 55% strength.
+- **Input Border** (input-border): input and select border on hover, chosen to reach 3:1.
+- **Ink** (ink), **Ink Secondary** (ink-secondary), **Ink Disabled** (ink-disabled): primary text, secondary text (labels, column heads, hashes, times; at least 5.3:1 on surface and chrome), disabled controls.
+
+### Syntax (DevTools Sources)
+- **Keyword** (syntax-keyword) magenta, **Type** (syntax-type) blue, **Variable** (syntax-variable) red, **String** (syntax-string) deep blue / orange in dark, **Enum value** (syntax-enum) indigo / lavender, **Comment** (syntax-comment) grey italic. Used in the query and variables blocks and the schema SDL view only.
+
+### Named Rules
+**The One Meaning Rule.** Each signal colour has exactly one job: blue is selection, focus and the primary action; red is recording; yellow is live rewriting or a warning; green is a resolved hash. A colour never borrows another's meaning.
+
+**The Yellow Means Rewriting Rule.** The yellow infobar is visible if and only if the debugger is attached and rewriting matching traffic; it names the patterns in monospace and carries Stop. Passive mode gets the blue infobar instead, because nothing is modified.
+
+**The Define-Once Rule.** Every colour is declared once in tokens.css as `light-dark(light, dark)`. Dark mode is a `color-scheme` flip in theme-dark.css (explicit `data-theme` wins; otherwise the system preference). No component redeclares a colour per theme.
+
+## Typography
+
+**Interface Font:** system-ui (with -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif)
+**Code Font:** ui-monospace (with Menlo, Consolas, Cascadia Mono, DejaVu Sans Mono, monospace)
+
+**Character:** The platform's own faces at DevTools sizes. The UI face disappears into Chrome; the monospace face marks everything the machine produced, so a hash or URL is recognisable at a glance.
+
+### Hierarchy
+- **Title** (600, 13px, 1.4): detail pane operation name, empty-state titles, dialog titles. The largest UI text in the panel.
+- **Body** (400, 12px, 1.4): everything by default: toolbar controls, rows, descriptions, menus, infobar copy.
+- **Label** (500, 12px): operation names in rows, state words, column heads, record and primary buttons, menu group labels. Weight, not size, carries emphasis.
+- **Code** (400, 12px mono, 1.5): query, variables and SDL bodies; wraps (`pre-wrap`, `overflow-wrap: anywhere`), tab size 2.
+- **Code Small** (400, 11px mono, tabular numerals): short hashes, times, pattern inputs and summary, endpoint URLs, group headers, schema type names, inline code.
+
+### Named Rules
+**The Machine-Text Rule.** Anything the machine produced (hash, URL, pattern, timestamp, query, type name) is set in the monospace stack; anything a person reads as interface is in system-ui. Numbers that update in place use tabular numerals.
+
+**The Flat Ramp Rule.** The ramp spans 11px to 13px. Hierarchy comes from weight (400/500/600), colour (ink vs ink-secondary) and position, never from display sizes. Sentence case throughout; no uppercase tracking, no eyebrows.
+
+## Layout
+
+A full-height column: tab strip (28px; 26px compact), toolbar (30px; 26px compact, wraps when crowded), optional patterns pane, optional infobar, then a horizontal split filling the rest. The split is the request table plus, only after a row is selected, a detail pane at `clamp(320px, 45%, 720px)` behind a 1px draggable resize handle (6px hit area, keyboard-focusable).
+
+The request table is a four-column grid: Name `minmax(120px, 1fr)`, State 112px, Hash 76px, Time 76px, with 1px column rules and 8px cell padding. Rows group under sticky endpoint headers. The Schema view is a 240px type list beside a scrolling SDL pane.
+
+Spacing runs on a 4px grid with half steps: 2, 4, 6, 8, 12, 16, 24px (`s-1` to `s-7`). Toolbars use 2px/4px gaps; panes pad 8px by 12px; the detail body pads 8px / 12px / 16px bottom with 8px between blocks; empty states and dialogs use the 16 and 24px steps.
+
+Responsive behaviour is width-driven from a ResizeObserver on the app frame:
+- **Narrow (< 640px):** the detail pane becomes a full overlay over the list; the Hash column, the "Patterns" label and pane descriptions drop; the filter input flexes.
+- **Very narrow (< 420px):** the Time column, the resolved count and toolbar separators also drop; the schema type list narrows to 140px.
+- **Short (height <= 460px):** compact density applies automatically.
+
+**The Docked-First Rule.** Design for the panel docked about 400px tall: no chrome may cost more than one toolbar row plus the optional infobar before data rows begin.
+
+## Elevation & Depth
+
+Flat by default. In-flow regions are separated by 1px dividers and three tonal steps (surface, chrome, sunken), never by shadow. A single shadow exists for things that float above the panel: the settings menu, toasts and dialogs. Dialogs add a 35% black backdrop. Focus is an outline, not a shadow.
+
+### Shadow Vocabulary
+- **Overlay** (`box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15)`): settings menu, toast, dialog panel. Nothing else.
+
+### Named Rules
+**The Overlays-Only Rule.** A shadow means "floating above the panel". Rows, panes, toolbars, code blocks and infobars never carry one.
+
+## Shapes
+
+Small, uniform corners in the DevTools idiom: 3px for inline code, kbd and skeleton bars; 4px for buttons, inputs, selects, code blocks, toasts and the cURL preview; 8px for menus and dialogs; full pill for the type-filter pills and endpoint count badges. Table rows, panes, toolbars and infobars are square, full-bleed bands. Code blocks are 1px-divider bordered boxes whose header and body share the 4px corner (header rounds the top, body the bottom; collapsed, the header rounds all four).
+
+Icons are inline 16px stroke SVGs (1.75 stroke, round caps and joins, `currentColor`), shipped in the markup. State glyphs are 6 to 8px CSS shapes: filled dot, hollow ring, dash, diamond, small square.
+
+## Components
+
+### Buttons
+Quiet toolbar controls that only show a surface when touched.
+- **Shape:** gently squared (4px), 22px tall (20px compact), 8px horizontal padding, 4px icon gap.
+- **Toolbar (default):** transparent with ink text; hover fills with the hover wash. On content surfaces (detail pane, patterns pane, dialog footers) the same button gains a 1px divider outline so it reads as a control.
+- **Primary:** DevTools Blue fill, on-blue text, weight 500; hover deepens. One per view at most (Load schema; Copy in the cURL dialog).
+- **Danger:** error-red fill, weight 500; used only as the accept button of a destructive confirm.
+- **Icon button:** 24px square, ink-secondary glyph, hover wash; disabled drops to ink-disabled.
+- **Record:** the Network panel's circle. Idle: hollow ink-secondary ring, "Record". Recording: filled record-red circle and red "Stop".
+- **Link button:** blue underlined text (underline at 40% until hover); inside the infobar it inherits the bar's ink.
+- **Focus:** 2px focus-blue outline, 1px offset (inset on tabs, rows, lists and code).
+
+### Chips
+- **Style:** the DevTools Network resource-type pills (All / APQ / Full): pill radius, 20px tall, transparent, ink text, hover wash.
+- **State:** active pill fills with Selection Blue and Ink on Selection. In dialogs (cURL shell picker) inactive pills gain a divider outline.
+
+### Inputs / Fields
+- **Style:** 22px (20px compact), input surface, 1px divider border, 4px radius, 6px padding; placeholders in ink-secondary. Pattern and schema URL inputs use Code Small.
+- **Hover:** border strengthens to input-border.
+- **Focus:** border and outline go focus blue, outline inset 1px.
+- **Checkboxes:** native, 14px, accent-colour DevTools Blue.
+
+### Navigation
+- **Tab strip:** chrome-grey band, tabs as 12px-padded text in ink-secondary; hover wash plus ink; selected tab turns DevTools Blue with a 2px underline that overlaps the strip's bottom divider. Right end holds the session status and the settings gear.
+- **Session status:** one word plus an 8px dot. Idle: ink-secondary hollow ring. Intercepting: record-red, filled, weight 600. Passive: blue filled. Warning: amber. Error: error-red filled.
+
+### Request Table (signature)
+- **Head:** chrome-grey, ink-secondary labels at weight 500, 1px column rules.
+- **Rows:** single line, 24px (20px compact), operation name at weight 500 (anonymous operations italic ink-secondary), state word, 8-character hash and time in Code Small ink-secondary. Hover wash; selected rows Selection Blue when the list is focused, Selection Grey otherwise; keyboard focus is a 1px inset focus outline.
+- **States:** Resolved (green filled dot), Awaiting retry (amber hollow ring), Not in registry (error-red dash), APQ retry (secondary diamond, weight 400), Full query (secondary small square, weight 400). Words come from `request-state.js` and are shared with the detail pane.
+- **Resolve in place:** when the APQ retry lands, the pending row is re-rendered where it sits (focus preserved) and its background fades from Update Flash to nothing over 1.2s on the standard ease. With reduced motion the flash becomes a 1px resolved-green inset outline instead.
+- **Group headers:** sticky chrome-grey bands with the endpoint in Code Small and a tabular request count.
+
+### Infobar
+- **Live:** full-width yellow band under the toolbar: pulsing record dot (three pulses, then still), "Intercepting requests matching" followed by each pattern as inline code, an optional first-run note explaining the swap and Chrome's own debugging bar (dismissed with "Got it"), and an outlined Stop button.
+- **Passive:** the same band in passive blue, no dot, states the registry size and that requests are not modified.
+
+### Detail Pane
+- **Head:** chrome-grey row with the operation name in Title and a close icon button.
+- **Body:** facts line (state word, time, links), a one-line state description, a key/value grid (Endpoint, Hash with Copy) in Code Small, Copy as cURL, then collapsible code blocks: Query (min 72px, the dominant element) and Variables. Each block has a chrome-grey summary header with a rotating triangle, a weight-600 title and a borderless Copy that confirms in place ("Copied").
+
+### Overlays
+- **Settings menu:** 240px raised surface, raised border, 8px radius, overlay shadow; fieldset groups split by dividers (Theme, Density, Passive mode) with radio/check options as 26px rows and a keyboard-shortcut hint footer.
+- **Toast:** bottom-right stack, inverted neutral (dark on light theme, light on dark), 4px radius, overlay shadow, rises 6px in over 200ms. Warning and error variants use the live yellow and error washes with a 1px border.
+- **Dialog:** 400px (640px wide variant) raised panel, 16px padding, 8px radius, overlay shadow, 35% black backdrop; Title heading, secondary description, right-aligned footer (outlined Cancel, then primary or danger).
+
+### Empty States and Loading
+- **Empty:** left-aligned block up to 460px wide, Title heading, numbered steps with bold key terms, secondary description; a filtered variant hides the steps.
+- **Schema skeleton:** 12px chrome-grey bars at 100/80/60/70% width with a 1.4s shimmer to the hover wash.
+
+## Do's and Don'ts
+
+### Do:
+- **Do** take every colour from tokens.css and add new ones there as `light-dark(light, dark)` pairs with text at 4.5:1 and meaningful indicators at 3:1 in both themes.
+- **Do** separate regions with 1px dividers and the surface / chrome / sunken tonal steps.
+- **Do** express every request state as a word plus a glyph shape, using the vocabulary in `request-state.js`.
+- **Do** set hashes, URLs, patterns, times and code in the monospace stack, and counts in tabular numerals.
+- **Do** keep controls at the density heights (22/20px controls, 24/20px rows) so compact and the short-dock auto-compact keep working.
+- **Do** keep the query block wrapped and dominant in the detail pane; the recovered query is the largest readable thing on screen.
+- **Do** give every motion a reduced-motion fallback that keeps the meaning (the resolve flash becomes a green outline).
+- **Do** support forced colours: selection maps to Highlight/HighlightText and floating layers get a CanvasText border.
+
+### Don't:
+- **Don't** add shadows to in-flow surfaces; the overlay shadow is for menus, toasts and dialogs only.
+- **Don't** use green for anything except a resolved hash, or yellow except live interception and warnings.
+- **Don't** signal state with colour alone.
+- **Don't** load fonts, icons or scripts from the network, or ship a display face; the platform system-ui and ui-monospace stacks are the type system.
+- **Don't** reintroduce the editorial card-and-metric dashboard, a permanent settings sidebar, uppercase tracked eyebrows or display numerals.
+- **Don't** redeclare colours for dark mode; flip `color-scheme` only.
+- **Don't** let the query scroll horizontally; it wraps.
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..d01bae5
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,57 @@
+# Product
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+Front-end and GraphQL developers (also backend devs and QA) debugging apps that use Apollo Client's Automatic Persisted Queries. They are mid-investigation inside Chrome DevTools, usually with the Network panel open beside this one, often docked at the bottom of the window at a few hundred pixels tall. Their job: see the real operation, variables and endpoint behind an opaque SHA-256 hash, then copy it into an editor, a cURL or a bug report.
+
+## Product Purpose
+
+APQ requests carry only a hash, so the Network panel cannot show what query ran. APQ Debugger attaches the Chrome Debugger to the inspected tab, swaps the hash for a bogus one so the server answers `PersistedQueryNotFound`, and captures the full query Apollo Client retries with. Success: within seconds of browsing, every hashed operation on the page is readable, copyable, and attributable to its endpoint.
+
+## Positioning
+
+It recovers the query from live traffic without access to the app's source, build, or server-side persisted-query store. Passive mode then resolves known hashes from a local registry without touching traffic at all.
+
+## Operating Context
+
+- Lives as a DevTools panel; identifies its tab via `chrome.devtools.inspectedWindow.tabId`; works undocked and docked.
+- Starting interception shows Chrome's own "is debugging this browser" infobar and rewrites matching requests on a real (often production) site.
+- Session flow: set URL patterns → start → browse → read/copy operations → optionally load the schema by introspection → stop.
+- A toolbar action can also start/stop without opening the panel.
+
+## Capabilities and Constraints
+
+- Active mode (hash contamination) vs passive mode (registry lookup, no traffic changes); registry is LRU-capped.
+- Request list with operation-name filter, APQ/full filter, endpoint filter; detail with query, variables, copy, Copy as cURL (Bash/PowerShell); JSON export; history clear.
+- Schema tab: introspect observed endpoints (replaying captured headers) or a typed URL; SDL type browser.
+- Theme (system/light/dark) and density (comfortable/compact) settings.
+- MV3, `minimum_chrome_version` 123. No network-loaded fonts, icons or scripts; everything ships in the bundle.
+- Terminology: "APQ" (hash-only request), "full" (request carrying query text), "resolved" (hash mapped to query).
+
+## Brand Commitments
+
+- Name: APQ Debugger. Icons in `icons/`.
+- Visual direction (confirmed 2026-10-21): DevTools-native. The panel should sit alongside Chrome DevTools' own panels (Network, Elements) as if it belonged there. This replaces the earlier Kora styling.
+
+## Evidence on Hand
+
+- Store copy: `store/store-description.md`; privacy policy and permission justifications in `store/`.
+- No testimonials, user counts or benchmarks exist; do not invent them.
+
+## Product Principles
+
+1. The recovered query is the product. Everything else serves reading and copying it.
+2. Be honest about interception: the user always knows whether traffic is being rewritten, on which patterns.
+3. Belong in DevTools. Earned familiarity beats personality; save emphasis for state changes and the moment a hash resolves.
+4. Work at the docked size people actually use.
+5. Local only: nothing leaves the browser.
+
+## Accessibility & Inclusion
+
+WCAG 2.2 AA: visible focus on every interactive element, full keyboard operation of list/detail/tabs, 4.5:1 text contrast in both themes, forced-colors and reduced-motion support (already present in the codebase).
diff --git a/README.md b/README.md
index d2c7f6a..6597a7e 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,13 @@
 apq-debugger/
 ├── frontend/
 │   ├── devtools.html              # Main DevTools panel HTML
-│   └── devtools.css               # Panel styles (dark/light theme)
+│   ├── css/                       # Kora design system layer
+│   │   ├── tokens.css             # Color/type/spacing tokens (light-dark() theming)
+│   │   ├── theme-dark.css         # Dark-mode gates (explicit + system preference)
+│   │   ├── density.css            # Comfortable/Compact density scales
+│   │   └── components.css         # Panel components in the Kora idiom
+│   └── fonts/                     # Bundled woff2 (Italiana, Albert Sans,
+│                                  # Spline Sans Mono — all SIL OFL 1.1)
 ├── js/
 │   ├── shared/                    # Constants & logger shared by both bundles
 │   ├── sw/                        # Service worker modules
diff --git a/build-enhanced.js b/build-enhanced.js
index b8ba729..f72533e 100644
--- a/build-enhanced.js
+++ b/build-enhanced.js
@@ -29,7 +29,13 @@ const config = {
     },
   ],
   css: {
-    input: 'frontend/devtools.css',
+    // Concatenated in order, then minified into a single output file
+    inputs: [
+      'frontend/css/tokens.css',
+      'frontend/css/theme-dark.css',
+      'frontend/css/density.css',
+      'frontend/css/components.css',
+    ],
     output: 'devtools.min.css',
     options: {
       level: {
@@ -102,17 +108,22 @@ async function bundleJS(entry, outfile) {
 // ── CSS minification (Clean-CSS) ──────────────────────────────────
 
 async function minifyCSS() {
-  const inputPath = path.join(config.sourceDir, config.css.input);
   const outputPath = path.join(config.extDir, config.css.output);
+  const chunks = [];
 
-  if (!(await fs.pathExists(inputPath))) {
-    console.log(`❌ CSS not found: ${config.css.input}`);
-    return;
+  for (const input of config.css.inputs) {
+    const inputPath = path.join(config.sourceDir, input);
+    if (!(await fs.pathExists(inputPath))) {
+      console.log(`❌ CSS not found: ${input}`);
+      return;
+    }
+    const code = await fs.readFile(inputPath, 'utf8');
+    chunks.push(`/* ── ${input} ── */\n${code}`);
   }
 
-  console.log(`🔄 Processing ${config.css.input}...`);
+  console.log(`🔄 Processing ${config.css.inputs.join(', ')}...`);
 
-  const code = await fs.readFile(inputPath, 'utf8');
+  const code = chunks.join('\n');
   const cleanCSS = new CleanCSS(config.css.options);
   const result = cleanCSS.minify(code);
 
@@ -126,7 +137,7 @@ async function minifyCSS() {
   const minifiedSize = Buffer.byteLength(result.styles, 'utf8');
   const reduction = (((originalSize - minifiedSize) / originalSize) * 100).toFixed(1);
 
-  console.log(`✅ ${config.css.input} → ${config.css.output}`);
+  console.log(`✅ ${config.css.inputs.length} CSS file(s) → ${config.css.output}`);
   console.log(`   ${originalSize} bytes → ${minifiedSize} bytes (${reduction}% reduction)\n`);
 }
 
@@ -206,7 +217,7 @@ async function watch() {
   await build();
 
   const watcher = chokidar.watch(
-    ['js/**/*.js', 'frontend/*.css', 'frontend/devtools.html', 'manifest.json', 'icons/*'],
+    ['js/**/*.js', 'frontend/css/**/*.css', 'frontend/devtools.html', 'manifest.json', 'icons/*'],
     {
       ignored: [/\.min\.(js|css)$/, /node_modules/, /extension_build/],
       persistent: true,
diff --git a/frontend/css/components.css b/frontend/css/components.css
new file mode 100644
index 0000000..b89944c
--- /dev/null
+++ b/frontend/css/components.css
@@ -0,0 +1,1694 @@
+/* ================================================================
+   APQ Debugger panel components — DevTools-native.
+   Structure: tab strip → per-view toolbar → optional patterns pane →
+   infobar → data table + detail split. 1px dividers separate regions;
+   only floating layers (menus, dialogs, toasts) carry a shadow.
+   ================================================================ */
+
+/* ---- base ---- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font: var(--fs) / var(--lh) var(--font-ui);
+  color: var(--text);
+  background: var(--bg);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: default;
+}
+
+code,
+kbd,
+pre {
+  font-family: var(--font-mono);
+}
+
+code {
+  font-size: var(--fs-sm);
+  padding: 0 var(--s-1);
+  border-radius: var(--r-sm);
+  background: var(--bg-chrome);
+}
+
+kbd {
+  font-size: 10px;
+  padding: 0 var(--s-2);
+  border: 1px solid var(--border-raised);
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  white-space: nowrap;
+}
+
+::selection {
+  background: var(--bg-selected);
+  color: var(--text-on-selected);
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 1px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-raised) transparent;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+/* ---- app frame ---- */
+
+.app {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  min-width: 0;
+}
+
+/* ---- tab strip ---- */
+
+.tabstrip {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  min-height: var(--tab-h);
+  padding: 0 var(--s-2) 0 0;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+}
+
+.tabs {
+  display: flex;
+  align-items: stretch;
+}
+
+.tab {
+  position: relative;
+  padding: 0 var(--s-5);
+  border: 0;
+  background: none;
+  color: var(--text-2);
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+.tab[aria-selected='true'] {
+  color: var(--primary);
+}
+
+.tab[aria-selected='true']::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--primary);
+}
+
+.tab:focus-visible {
+  outline-offset: -2px;
+}
+
+.tabstrip-end {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+}
+
+/* session status: one word plus a dot */
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  color: var(--text-2);
+  white-space: nowrap;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+}
+
+.status.active {
+  color: var(--record);
+  font-weight: 600;
+}
+
+.status.active .status-dot,
+.status.error .status-dot {
+  background: currentColor;
+}
+
+.status.info {
+  color: var(--primary);
+}
+
+.status.info .status-dot {
+  background: currentColor;
+}
+
+.status.warning {
+  color: var(--pending);
+}
+
+.status.error {
+  color: var(--error);
+}
+
+/* ---- buttons ---- */
+
+.icon-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--r-md);
+  background: none;
+  color: var(--text-2);
+}
+
+.icon-btn:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+.icon-btn:disabled {
+  color: var(--text-disabled);
+}
+
+.tb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  height: var(--control-h);
+  min-width: 24px;
+  padding: 0 var(--s-4);
+  border: 1px solid transparent;
+  border-radius: var(--r-md);
+  background: none;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.tb-btn.icon-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  justify-content: center;
+  color: var(--text-2);
+}
+
+.tb-btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+}
+
+.tb-btn:disabled {
+  color: var(--text-disabled);
+}
+
+.tb-btn.primary {
+  background: var(--primary);
+  color: var(--on-primary);
+  font-weight: 500;
+}
+
+.tb-btn.primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+
+.tb-btn.danger {
+  background: var(--error);
+  color: light-dark(#ffffff, #3c1b18);
+  font-weight: 500;
+}
+
+.tb-btn.danger:hover {
+  filter: brightness(0.92);
+}
+
+/* buttons that live on content surfaces read as outlined controls */
+.detail-content .tb-btn,
+.modal-footer .tb-btn:not(.primary):not(.danger),
+.pane-row .tb-btn {
+  border-color: var(--divider);
+}
+
+/* record: the Network panel's circle, red while recording */
+.record-btn {
+  font-weight: 500;
+  padding-left: var(--s-3);
+}
+
+.record-btn .icon-record {
+  fill: none;
+  stroke: var(--text-2);
+  stroke-width: 2;
+}
+
+.record-btn.is-recording {
+  color: var(--record);
+}
+
+.record-btn.is-recording .icon-record {
+  fill: var(--record);
+  stroke: var(--record);
+}
+
+.link-btn {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+.link-btn:hover:not(:disabled) {
+  text-decoration-color: currentColor;
+}
+
+.link-btn:disabled {
+  color: var(--text-disabled);
+  text-decoration: none;
+}
+
+/* ---- toolbar ---- */
+
+.view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.views {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-1) var(--s-2);
+  min-height: var(--toolbar-h);
+  padding: var(--s-1) var(--s-3);
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+}
+
+.tb-sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 var(--s-2);
+  background: var(--divider);
+}
+
+.tb-spacer {
+  flex: 1;
+}
+
+.tb-input,
+.tb-select {
+  height: var(--control-h);
+  min-width: 0;
+  padding: 0 var(--s-3);
+  border: 1px solid var(--divider);
+  border-radius: var(--r-md);
+  background: var(--bg-input);
+  color: var(--text);
+}
+
+.tb-input:hover,
+.tb-select:hover {
+  border-color: var(--border-input);
+}
+
+.tb-input:focus-visible,
+.tb-select:focus-visible {
+  outline-offset: -1px;
+  border-color: var(--focus);
+}
+
+.tb-input::placeholder {
+  color: var(--text-2);
+}
+
+.filter-input {
+  width: 180px;
+  flex: 0 1 180px;
+}
+
+.tb-select {
+  max-width: 220px;
+  padding-right: var(--s-2);
+}
+
+/* type filter: DevTools Network's resource-type pills */
+.segmented {
+  display: inline-flex;
+  gap: var(--s-1);
+}
+
+.chip {
+  height: calc(var(--control-h) - 2px);
+  padding: 0 var(--s-4);
+  border: 1px solid transparent;
+  border-radius: var(--r-pill);
+  background: none;
+  color: var(--text);
+}
+
+.chip:hover {
+  background: var(--bg-hover);
+}
+
+.chip.active {
+  background: var(--bg-selected);
+  color: var(--text-on-selected);
+}
+
+.patterns-toggle {
+  max-width: 260px;
+  padding-right: var(--s-2);
+}
+
+.patterns-toggle-label {
+  color: var(--text-2);
+}
+
+.patterns-summary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+}
+
+.patterns-toggle.is-empty .patterns-summary {
+  font-family: var(--font-ui);
+  font-size: var(--fs);
+  color: var(--pending);
+  font-weight: 500;
+}
+
+.icon-chevron {
+  width: 14px;
+  height: 14px;
+  color: var(--text-2);
+  transition: transform var(--t-fast) var(--ease-out);
+}
+
+.patterns-toggle[aria-expanded='true'] .icon-chevron {
+  transform: rotate(180deg);
+}
+
+.request-count {
+  color: var(--text-2);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  padding-right: var(--s-2);
+}
+
+/* ---- patterns pane ---- */
+
+.patterns-pane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+  padding: var(--s-4) var(--s-5);
+  background: var(--bg);
+  border-bottom: 1px solid var(--divider);
+}
+
+.patterns-pane[hidden] {
+  display: none;
+}
+
+.pane-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-3) var(--s-4);
+}
+
+.pane-label {
+  color: var(--text-2);
+  white-space: nowrap;
+}
+
+.pattern-list {
+  display: contents;
+}
+
+.pattern-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+}
+
+.pattern-item .urlPattern {
+  width: 200px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+}
+
+.btn-remove[hidden] {
+  display: none;
+}
+
+.check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.check input,
+.menu-option input {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--primary);
+}
+
+.pane-desc {
+  color: var(--text-2);
+}
+
+.registry-count {
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.registry-count span {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.endpoints-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2) var(--s-5);
+}
+
+.endpoint-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+.endpoint-info {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s-2);
+  min-width: 0;
+}
+
+.endpoint-url {
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.endpoint-count {
+  min-width: 18px;
+  padding: 0 var(--s-2);
+  border-radius: var(--r-pill);
+  background: var(--bg-chrome);
+  color: var(--text-2);
+  font-size: var(--fs-sm);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- infobar: live interception (yellow) / passive mode (blue) ---- */
+
+.infobar {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-4);
+  min-height: var(--toolbar-h);
+  padding: var(--s-2) var(--s-5);
+  border-bottom: 1px solid;
+}
+
+.infobar.is-live {
+  background: var(--live-bg);
+  border-color: var(--live-border);
+  color: var(--live-text);
+}
+
+.infobar.is-passive {
+  background: var(--info-bg);
+  border-color: var(--info-border);
+  color: var(--info-text);
+}
+
+.infobar.is-passive .icon-record {
+  display: none;
+}
+
+.infobar .icon-record {
+  width: 12px;
+  height: 12px;
+  fill: var(--record);
+  stroke: none;
+  animation: live-pulse 1.2s ease-in-out 3;
+}
+
+@keyframes live-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+.infobar-text {
+  flex: 1;
+  margin: 0;
+  min-width: 0;
+  padding-top: 1px;
+}
+
+.infobar > .icon-record {
+  margin-top: 4px;
+}
+
+.infobar-text code {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.infobar-note {
+  display: block;
+  margin-top: var(--s-1);
+  opacity: 0.9;
+}
+
+.infobar .link-btn {
+  color: inherit;
+  white-space: nowrap;
+}
+
+.infobar-action {
+  border-color: color-mix(in srgb, currentColor 35%, transparent);
+  font-weight: 500;
+}
+
+.infobar-action:hover:not(:disabled) {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+/* ---- requests split ---- */
+
+.split {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.list-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+/* table columns shared by the header and every row */
+.grid-head,
+.request-item {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) 112px 76px 76px;
+  align-items: center;
+}
+
+.grid-head > *,
+.request-item > * {
+  min-width: 0;
+  padding: 0 var(--s-4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.grid-head > * + *,
+.request-item > * + * {
+  border-left: 1px solid var(--divider);
+}
+
+.grid-head {
+  height: var(--row-h);
+  flex: none;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+  color: var(--text-2);
+  font-weight: 500;
+}
+
+.request-list {
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.request-list:focus-visible {
+  outline-offset: -2px;
+}
+
+.request-item {
+  height: var(--row-h);
+  cursor: default;
+  border-bottom: 1px solid color-mix(in srgb, var(--divider) 55%, transparent);
+}
+
+.request-item > * {
+  line-height: calc(var(--row-h) - 1px);
+}
+
+.request-item:hover {
+  background: var(--bg-hover);
+}
+
+.request-item.selected {
+  background: var(--bg-selected-idle);
+}
+
+.request-list:focus-within .request-item.selected {
+  background: var(--bg-selected);
+  color: var(--text-on-selected);
+}
+
+.request-item:focus-visible {
+  outline: 1px solid var(--focus);
+  outline-offset: -1px;
+}
+
+.request-operation {
+  font-weight: 500;
+}
+
+.is-anonymous {
+  font-style: italic;
+  font-weight: 400;
+  color: var(--text-2);
+}
+
+.request-hash,
+.request-time {
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.request-list:focus-within .request-item.selected .request-hash,
+.request-list:focus-within .request-item.selected .request-time,
+.request-list:focus-within .request-item.selected .is-anonymous {
+  color: inherit;
+}
+
+/* resolution state: a word with a shape, never colour alone */
+.state {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-weight: 500;
+}
+
+.state::before {
+  content: '';
+  flex: none;
+  width: 7px;
+  height: 7px;
+}
+
+.state--resolved {
+  color: var(--resolved);
+}
+
+.state--resolved::before {
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.state--pending {
+  color: var(--pending);
+}
+
+.state--pending::before {
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+}
+
+.state--unknown {
+  color: var(--error);
+}
+
+.state--unknown::before {
+  width: 8px;
+  height: 2px;
+  background: currentColor;
+}
+
+.state--full,
+.state--retry {
+  color: var(--text-2);
+  font-weight: 400;
+}
+
+/* a small diamond: no tree, disclosure or checkbox meaning */
+.state--retry::before {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  transform: rotate(45deg);
+}
+
+.state--full::before {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+.request-list:focus-within .request-item.selected .state {
+  color: inherit;
+}
+
+/* the signature moment: a hash row resolves in place */
+.request-item.is-updated {
+  animation: row-updated 1.2s var(--ease-out);
+}
+
+@keyframes row-updated {
+  from {
+    background: var(--flash);
+  }
+}
+
+.request-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  height: var(--row-h);
+  padding: 0 var(--s-4);
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.group-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-count {
+  margin-left: var(--s-4);
+  font-family: var(--font-ui);
+  font-size: var(--fs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* ---- empty states ---- */
+
+.empty-state,
+.schema-empty {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+  max-width: 460px;
+  padding: var(--s-7) var(--s-6);
+  color: var(--text-2);
+}
+
+.empty-title {
+  margin: 0;
+  color: var(--text);
+  font-size: var(--fs-title);
+  font-weight: 600;
+}
+
+.empty-steps {
+  margin: 0;
+  padding-left: 1.4em;
+  display: grid;
+  gap: var(--s-3);
+}
+
+.empty-steps strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.empty-desc {
+  margin: 0;
+}
+
+.empty-state.is-filtered .empty-steps,
+.empty-state.is-filtered .empty-desc {
+  display: none;
+}
+
+/* ---- resize handles ---- */
+
+.resize-handle {
+  position: relative;
+  flex: none;
+  width: 1px;
+  background: var(--divider);
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.resize-handle::before {
+  content: '';
+  position: absolute;
+  inset: 0 -3px;
+}
+
+.resize-handle:hover,
+.resize-handle.dragging,
+.resize-handle:focus-visible {
+  background: var(--focus);
+  outline: none;
+}
+
+.resize-handle:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0 -1px;
+  background: var(--focus);
+}
+
+.split:has(#detail-panel.hidden) #resize-handle-right {
+  display: none;
+}
+
+body.resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+/* ---- detail panel ---- */
+
+.detail-panel {
+  display: flex;
+  flex-direction: column;
+  width: clamp(320px, 45%, 720px);
+  min-width: 280px;
+  min-height: 0;
+  background: var(--bg);
+}
+
+.detail-head {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  min-height: var(--row-h);
+  padding: 0 var(--s-2) 0 var(--s-5);
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+}
+
+.detail-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--fs-title);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-content {
+  flex: 1;
+  overflow: auto;
+  padding: var(--s-4) var(--s-5) var(--s-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+}
+
+.detail-placeholder {
+  color: var(--text-2);
+}
+
+.detail-facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-2) var(--s-5);
+}
+
+.detail-fact {
+  color: var(--text-2);
+}
+
+.detail-note {
+  margin: calc(var(--s-2) * -1) 0 0;
+  color: var(--text-2);
+}
+
+.kv {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--s-2) var(--s-5);
+  margin: 0;
+}
+
+.kv dt {
+  color: var(--text-2);
+}
+
+.kv dd {
+  margin: 0;
+  min-width: 0;
+  font-size: var(--fs-sm);
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+
+.kv-hash {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-3);
+}
+
+.detail-hash {
+  flex: 1;
+  min-width: 0;
+}
+
+.kv-hash .btn-copy {
+  margin-top: -3px;
+}
+
+.detail-actions {
+  display: flex;
+  gap: var(--s-3);
+}
+
+.code-block {
+  position: relative;
+  flex: none;
+  border: 1px solid var(--divider);
+  border-radius: var(--r-md);
+  scroll-margin-top: var(--s-4);
+}
+
+summary.code-header {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  min-height: 26px;
+}
+
+summary.code-header::-webkit-details-marker {
+  display: none;
+}
+
+summary.code-header::before {
+  content: '';
+  flex: none;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px 0 4px 6px;
+  border-color: transparent transparent transparent var(--text-2);
+  transition: transform var(--t-fast) var(--ease-out);
+}
+
+.code-block[open] > summary.code-header::before {
+  transform: rotate(90deg);
+}
+
+summary.code-header:focus-visible {
+  outline-offset: -2px;
+}
+
+.code-block:not([open]) > summary.code-header {
+  border-bottom: 0;
+  border-radius: var(--r-md);
+}
+
+.code-block:not([open]) > .btn-copy {
+  display: none;
+}
+
+.code-block > .btn-copy {
+  position: absolute;
+  top: 3px;
+  right: var(--s-1);
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+  border-radius: var(--r-md) var(--r-md) 0 0;
+}
+
+.code-title {
+  margin: 0;
+  font-size: var(--fs);
+  font-weight: 600;
+}
+
+.btn-copy {
+  height: 20px;
+  padding: 0 var(--s-4);
+}
+
+.code-block .btn-copy {
+  border-color: transparent;
+}
+
+.btn-copy.is-done {
+  color: var(--text-2);
+}
+
+.code {
+  margin: 0;
+  padding: var(--s-4) var(--s-5);
+  background: var(--bg-sunken);
+  font-size: var(--fs-code);
+  line-height: var(--lh-code);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+  user-select: text;
+}
+
+.code:focus-visible {
+  outline-offset: -2px;
+}
+
+.code-block .code {
+  border-radius: 0 0 var(--r-md) var(--r-md);
+}
+
+.code-block--query .code {
+  min-height: 72px;
+}
+
+.code-missing {
+  margin: 0;
+  padding: var(--s-4) var(--s-5);
+  color: var(--text-2);
+  background: var(--bg-sunken);
+  border-radius: 0 0 var(--r-md) var(--r-md);
+}
+
+/* GraphQL and SDL syntax (DevTools Sources colours) */
+.code .keyword,
+.schema-sdl .keyword {
+  color: var(--syn-keyword);
+}
+
+.code .type,
+.schema-sdl .type-name,
+.schema-sdl .builtin {
+  color: var(--syn-type);
+}
+
+.code .variable {
+  color: var(--syn-variable);
+}
+
+.code .string,
+.schema-sdl .string {
+  color: var(--syn-string);
+}
+
+.schema-sdl .field {
+  color: var(--syn-property);
+}
+
+.schema-sdl .enum-value,
+.schema-sdl .number {
+  color: var(--syn-number);
+}
+
+.schema-sdl .punct {
+  color: var(--syn-punct);
+}
+
+.schema-sdl .directive {
+  color: var(--syn-variable);
+}
+
+.schema-sdl .comment {
+  color: var(--syn-comment);
+  font-style: italic;
+}
+
+/* ---- schema view ---- */
+
+.schema-url-input {
+  flex: 1 1 280px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+}
+
+.schema-search {
+  width: 160px;
+  flex: 0 1 160px;
+}
+
+.schema-status {
+  padding: var(--s-2) var(--s-5);
+  color: var(--text-2);
+  border-bottom: 1px solid var(--divider);
+  min-height: var(--row-h);
+}
+
+.schema-status:empty {
+  display: none;
+}
+
+.schema-status.is-error {
+  color: var(--error);
+  background: var(--error-bg);
+}
+
+.schema-skeleton {
+  display: grid;
+  gap: var(--s-4);
+  padding: var(--s-5);
+}
+
+.skeleton {
+  height: 12px;
+  border-radius: var(--r-sm);
+  background: linear-gradient(
+    90deg,
+    var(--bg-chrome) 0%,
+    var(--bg-hover) 50%,
+    var(--bg-chrome) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton 1.4s ease-in-out infinite;
+}
+
+.skeleton:nth-child(2) {
+  width: 80%;
+}
+
+.skeleton:nth-child(3) {
+  width: 60%;
+}
+
+.skeleton:nth-child(4) {
+  width: 70%;
+}
+
+@keyframes skeleton {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.schema-explorer {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.schema-meta {
+  padding: var(--s-2) var(--s-5);
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--divider);
+  color: var(--text-2);
+  font-size: var(--fs-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.schema-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.schema-type-list {
+  width: 240px;
+  min-width: 140px;
+  overflow-y: auto;
+  padding: var(--s-1) 0;
+}
+
+.schema-type-list:focus-visible {
+  outline-offset: -2px;
+}
+
+.schema-type-item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-3);
+  width: 100%;
+  height: var(--row-h);
+  padding: 0 var(--s-4);
+  border: 0;
+  background: none;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.schema-type-item:hover {
+  background: var(--bg-hover);
+}
+
+.schema-type-item.selected {
+  background: var(--bg-selected-idle);
+}
+
+.schema-type-list:focus-within .schema-type-item.selected {
+  background: var(--bg-selected);
+  color: var(--text-on-selected);
+}
+
+.schema-type-item:focus-visible {
+  outline: 1px solid var(--focus);
+  outline-offset: -1px;
+}
+
+.schema-type-item .kind {
+  width: 64px;
+  flex: none;
+  color: var(--text-2);
+  font-size: var(--fs-sm);
+}
+
+.schema-type-item .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+}
+
+.schema-type-list:focus-within .schema-type-item.selected .kind {
+  color: inherit;
+}
+
+.schema-type-list-empty {
+  padding: var(--s-4) var(--s-5);
+  color: var(--text-2);
+}
+
+.schema-sdl {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: var(--s-4) var(--s-5);
+  overflow: auto;
+  font-size: var(--fs-code);
+  line-height: var(--lh-code);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+
+.schema-sdl:focus-visible {
+  outline-offset: -2px;
+}
+
+/* ---- settings menu ---- */
+
+.settings-wrap {
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + var(--s-2));
+  right: 0;
+  z-index: 20;
+  width: 240px;
+  padding: var(--s-3) 0;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-raised);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-menu);
+}
+
+.menu-group {
+  margin: 0;
+  padding: var(--s-2) 0;
+  border: 0;
+}
+
+.menu-group + .menu-group {
+  border-top: 1px solid var(--divider);
+}
+
+/* floated so the legend sits inside the group instead of on its border */
+.menu-label {
+  float: left;
+  width: 100%;
+  padding: var(--s-2) var(--s-5);
+  color: var(--text-2);
+  font-weight: 500;
+}
+
+.menu-label + * {
+  clear: both;
+}
+
+.menu-option {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  height: 26px;
+  padding: 0 var(--s-5);
+  cursor: pointer;
+}
+
+.menu-option:hover {
+  background: var(--bg-hover);
+}
+
+.menu-hint {
+  margin: 0;
+  padding: var(--s-4) var(--s-5) var(--s-2);
+  border-top: 1px solid var(--divider);
+  color: var(--text-2);
+  line-height: 1.7;
+}
+
+/* ---- toasts ---- */
+
+.toast-stack {
+  position: fixed;
+  right: var(--s-5);
+  bottom: var(--s-5);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--s-3);
+  max-width: min(420px, calc(100vw - 24px));
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
+  min-height: 32px;
+  background: light-dark(#303134, #e3e3e3);
+  color: light-dark(#f1f3f4, #1f1f1f);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-menu);
+  pointer-events: auto;
+  animation: toast-in var(--t-med) var(--ease-out);
+}
+
+.toast-text {
+  flex: 1;
+}
+
+.toast--warning {
+  background: var(--live-bg);
+  color: var(--live-text);
+  border: 1px solid var(--live-border);
+}
+
+.toast--error {
+  background: var(--error-bg);
+  color: var(--error);
+  border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
+}
+
+.toast-close {
+  color: inherit;
+}
+
+.toast-close:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent) !important;
+  color: inherit !important;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* ---- dialogs ---- */
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: grid;
+  /* a bounded column: an auto track would grow to the widest unbreakable
+     line (a one-line cURL --data-raw) and push the dialog off-screen */
+  grid-template-columns: minmax(0, 1fr);
+  place-items: center;
+  padding: var(--s-5);
+}
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.35);
+}
+
+.modal-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+  width: min(400px, 100%);
+  max-height: calc(100vh - 32px);
+  padding: var(--s-6);
+  background: var(--bg-raised);
+  border: 1px solid var(--border-raised);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-menu);
+}
+
+.modal-wide {
+  width: min(640px, 100%);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: var(--fs-title);
+  font-weight: 600;
+}
+
+.modal-desc {
+  margin: 0;
+  color: var(--text-2);
+}
+
+.modal-options .chip {
+  border-color: var(--divider);
+}
+
+.modal-options .chip.active {
+  border-color: transparent;
+}
+
+.modal-preview {
+  max-height: 50vh;
+  overflow: auto;
+  border: 1px solid var(--divider);
+  border-radius: var(--r-md);
+  white-space: pre;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--s-3);
+}
+
+/* ---- narrow and short panels ---- */
+
+/* the detail pane overlays the list when there is no room for a split */
+.app.narrow .detail-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  width: auto !important;
+  min-width: 0 !important;
+}
+
+.app.narrow #resize-handle-right {
+  display: none;
+}
+
+.app.narrow .grid-head,
+.app.narrow .request-item {
+  grid-template-columns: minmax(100px, 1fr) 112px 76px;
+}
+
+.app.narrow .col-hash {
+  display: none !important;
+}
+
+.app.narrow .patterns-toggle-label,
+.app.narrow .pane-desc {
+  display: none;
+}
+
+.app.narrow .filter-input {
+  flex: 1 1 120px;
+}
+
+.app.very-narrow .grid-head,
+.app.very-narrow .request-item {
+  grid-template-columns: minmax(100px, 1fr) 112px;
+}
+
+.app.very-narrow .col-time,
+.app.very-narrow .count-resolved,
+.app.very-narrow .tb-sep {
+  display: none !important;
+}
+
+.app.very-narrow .schema-type-list {
+  width: 140px !important;
+}
+
+/* ---- accessibility adjustments ---- */
+
+@media (prefers-reduced-motion: reduce) {
+  .request-item.is-updated,
+  .infobar .icon-record,
+  .skeleton,
+  .toast {
+    animation: none;
+  }
+
+  /* the resolved row still marks the change, without movement */
+  .request-item.is-updated {
+    outline: 1px solid var(--resolved);
+    outline-offset: -1px;
+  }
+
+  .icon-chevron,
+  summary.code-header::before {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --divider: light-dark(#80868b, #9aa0a6);
+    --text-2: light-dark(#3c4043, #dadce0);
+  }
+}
+
+@media (forced-colors: active) {
+  :focus-visible,
+  .request-item:focus-visible,
+  .schema-type-item:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+
+  .request-item.selected,
+  .schema-type-item.selected,
+  .chip.active,
+  .tab[aria-selected='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .tab[aria-selected='true']::after,
+  .status-dot,
+  .state::before {
+    background: CanvasText;
+  }
+
+  .infobar,
+  .toast,
+  .menu,
+  .modal-panel {
+    border: 1px solid CanvasText;
+  }
+}
diff --git a/frontend/css/density.css b/frontend/css/density.css
new file mode 100644
index 0000000..3d49fc9
--- /dev/null
+++ b/frontend/css/density.css
@@ -0,0 +1,38 @@
+/* ================================================================
+   Density. Comfortable matches DevTools' default row height;
+   Compact matches its dense tables. Compact also applies on its own
+   when the panel is docked short, so a 400px dock still shows a
+   useful number of rows. settings.js sets data-density.
+   ================================================================ */
+
+:root {
+  --fs: 12px;
+  --fs-sm: 11px;
+  --fs-code: 12px;
+  --fs-title: 13px;
+  --lh: 1.4;
+  --lh-code: 1.5;
+  --toolbar-h: 30px;
+  --tab-h: 28px;
+  --control-h: 22px;
+  --row-h: 24px;
+  --pad: var(--s-5);
+}
+
+:root[data-density='compact'] {
+  --toolbar-h: 26px;
+  --tab-h: 26px;
+  --control-h: 20px;
+  --row-h: 20px;
+  --pad: var(--s-4);
+}
+
+@media (max-height: 460px) {
+  :root {
+    --toolbar-h: 26px;
+    --tab-h: 26px;
+    --control-h: 20px;
+    --row-h: 20px;
+    --pad: var(--s-4);
+  }
+}
diff --git a/frontend/css/theme-dark.css b/frontend/css/theme-dark.css
new file mode 100644
index 0000000..5e417d2
--- /dev/null
+++ b/frontend/css/theme-dark.css
@@ -0,0 +1,16 @@
+/* ================================================================
+   Dark theme gates. All dark values live in tokens.css as the second
+   argument of light-dark(); these gates only flip the color scheme.
+   An explicit data-theme wins; the system preference applies
+   otherwise (settings.js removes the attribute for "system").
+   ================================================================ */
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+  }
+}
diff --git a/frontend/css/tokens.css b/frontend/css/tokens.css
new file mode 100644
index 0000000..2e677eb
--- /dev/null
+++ b/frontend/css/tokens.css
@@ -0,0 +1,104 @@
+/* ================================================================
+   APQ Debugger — DevTools-native tokens.
+   The panel sits beside Chrome's own Network and Elements panels, so
+   it borrows their system: system UI type at 12px, ui-monospace for
+   code and hashes, white / grey surfaces split by 1px dividers,
+   Google blue for selection, focus and primary actions, record red,
+   a yellow infobar while traffic is being rewritten, and green only
+   for a resolved hash.
+
+   Theming: every color token is defined ONCE via light-dark().
+   theme-dark.css only flips color-scheme. Text pairs are >= 4.5:1
+   on the surface they sit on; indicators and borders >= 3:1 where
+   they carry meaning.
+   ================================================================ */
+
+:root {
+  color-scheme: light;
+
+  /* ---- type ---- */
+  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif;
+  --font-mono: ui-monospace, Menlo, Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace;
+
+  /* ---- surfaces ---- */
+  --bg: light-dark(#ffffff, #202124);
+  --bg-chrome: light-dark(#f1f3f4, #292a2d); /* tab strip, toolbars, table head */
+  --bg-raised: light-dark(#ffffff, #303134); /* menus, dialogs */
+  --bg-sunken: light-dark(#f8f9fa, #1b1c1e); /* code blocks */
+  --bg-hover: light-dark(#eef1f6, #2f3236);
+  --bg-selected: light-dark(#d3e3fd, #0f3a6e);
+  --bg-selected-idle: light-dark(#e8eaed, #3c4043); /* selected row, list not focused */
+  --bg-input: light-dark(#ffffff, #202124);
+
+  /* ---- lines ---- */
+  --divider: light-dark(#dadce0, #3c4043);
+  --border-input: light-dark(#80868b, #80868b); /* 3:1+ on bg and chrome */
+  --border-raised: light-dark(#c4c7c5, #5f6368);
+
+  /* ---- text ---- */
+  --text: light-dark(#1f1f1f, #e3e3e3);
+  --text-2: light-dark(#5f6368, #a8acb1); /* secondary: >= 5.3:1 on bg and chrome */
+  --text-disabled: light-dark(#9aa0a6, #6f7378);
+  --text-on-selected: light-dark(#041e49, #e3eefe);
+
+  /* ---- accent and state ---- */
+  --primary: light-dark(#0b57d0, #a8c7fa);
+  --primary-hover: light-dark(#0842a0, #c2d7fb);
+  --on-primary: light-dark(#ffffff, #062e6f);
+  --focus: light-dark(#0b57d0, #a8c7fa);
+
+  --record: light-dark(#d93025, #f28b82);
+
+  --resolved: light-dark(#137333, #81c995);
+  --resolved-bg: light-dark(#e6f4ea, #10301b);
+  --pending: light-dark(#8a5300, #fdd663);
+  --pending-bg: light-dark(#fef7e0, #3a2f0b);
+  --error: light-dark(#b3261e, #f2b8b5);
+  --error-bg: light-dark(#fce8e6, #3c1b18);
+
+  /* live interception infobar (DevTools "paused" yellow) */
+  --live-bg: light-dark(#fef7e0, #3a3013);
+  --live-border: light-dark(#f2d68b, #6b5718);
+  --live-text: light-dark(#3c2c00, #fdecb7);
+
+  /* passive-mode infobar */
+  --info-bg: light-dark(#e8f0fe, #172b4d);
+  --info-border: light-dark(#c2d7fb, #2c4a7a);
+  --info-text: light-dark(#062e6f, #d3e3fd);
+
+  /* row "updated" flash, as in the Elements panel */
+  --flash: light-dark(#fde293, #6b5718);
+
+  /* ---- syntax (DevTools Sources) ---- */
+  --syn-keyword: light-dark(#aa0d91, #e36eec);
+  --syn-type: light-dark(#0b57d0, #8ab4f8);
+  --syn-variable: light-dark(#c5221f, #f28b82);
+  --syn-property: light-dark(#994500, #e8c38a);
+  --syn-string: light-dark(#1a1aa6, #f29766);
+  --syn-number: light-dark(#1c00cf, #b39ddb);
+  --syn-punct: light-dark(#5f6368, #a8acb1);
+  --syn-comment: light-dark(#5f6368, #9aa0a6);
+
+  /* ---- space (4px grid) ---- */
+  --s-1: 2px;
+  --s-2: 4px;
+  --s-3: 6px;
+  --s-4: 8px;
+  --s-5: 12px;
+  --s-6: 16px;
+  --s-7: 24px;
+
+  /* ---- shape ---- */
+  --r-sm: 3px;
+  --r-md: 4px;
+  --r-lg: 8px;
+  --r-pill: 999px;
+
+  /* ---- elevation: overlays only (menus, dialogs, toasts) ---- */
+  --shadow-menu: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
+
+  /* ---- motion ---- */
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --t-fast: 120ms;
+  --t-med: 200ms;
+}
diff --git a/frontend/devtools.css b/frontend/devtools.css
deleted file mode 100644
index 5ae7693..0000000
--- a/frontend/devtools.css
+++ /dev/null
@@ -1,1700 +0,0 @@
-/* ================================================
-   APQ Debugger - DevTools Panel Styles
-   System-aware theming with light/dark mode
-   ================================================ */
-
-/* CSS Custom Properties - Light Mode (Default) */
-:root {
-    --color-primary: #4F46E5;
-    --color-primary-hover: #4338CA;
-    --color-success: #16A34A;
-    --color-success-bg: #DCFCE7;
-    --color-warning: #D97706;
-    --color-warning-bg: #FEF3C7;
-    --color-error: #DC2626;
-    --color-error-bg: #FEE2E2;
-
-    --color-surface: #FFFFFF;
-    --color-surface-alt: #F4F4F5;
-    --color-surface-hover: #E4E4E7;
-    --color-border: #E4E4E7;
-    --color-border-strong: #D4D4D8;
-
-    --color-text-primary: #18181B;
-    --color-text-secondary: #52525B;
-    --color-text-muted: #71717A;
-    --color-text-inverse: #FFFFFF;
-
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
-    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-full: 9999px;
-
-    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-
-    --transition-fast: 0.15s ease;
-    --transition-normal: 0.2s ease;
-
-    /* Density (overridden by [data-density="compact"]) */
-    --font-size-base: 13px;
-    --header-height: 40px;
-    --control-pad-y: 8px;
-    --item-pad-y: 10px;
-    --panel-pad: 12px;
-    --section-pad: 10px;
-}
-
-/* Compact density */
-:root[data-density="compact"] {
-    --font-size-base: 12px;
-    --header-height: 32px;
-    --control-pad-y: 5px;
-    --item-pad-y: 5px;
-    --panel-pad: 8px;
-    --section-pad: 6px;
-}
-
-/* Dark Mode.
-   The variable block is intentionally duplicated: once for the explicit
-   user override ([data-theme="dark"]) and once for system preference
-   (when no explicit "light" override is set). */
-   :root[data-theme="dark"] {
-    --color-primary: #6366F1;
-    --color-primary-hover: #818CF8;
-    --color-success: #22C55E;
-    --color-success-bg: rgba(34, 197, 94, 0.15);
-    --color-warning: #F59E0B;
-    --color-warning-bg: rgba(245, 158, 11, 0.15);
-    --color-error: #EF4444;
-    --color-error-bg: rgba(239, 68, 68, 0.15);
-    --color-surface: #1E1E2E;
-    --color-surface-alt: #2A2A3E;
-    --color-surface-hover: #3A3A4E;
-    --color-border: #3A3A4E;
-    --color-border-strong: #4A4A5E;
-    --color-text-primary: #E4E4E7;
-    --color-text-secondary: #A1A1AA;
-    --color-text-muted: #71717A;
-    --color-text-inverse: #18181B;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
-}
-
-/* Dark Mode */
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) {
-        --color-primary: #6366F1;
-        --color-primary-hover: #818CF8;
-        --color-success: #22C55E;
-        --color-success-bg: rgba(34, 197, 94, 0.15);
-        --color-warning: #F59E0B;
-        --color-warning-bg: rgba(245, 158, 11, 0.15);
-        --color-error: #EF4444;
-        --color-error-bg: rgba(239, 68, 68, 0.15);
-
-        --color-surface: #1E1E2E;
-        --color-surface-alt: #2A2A3E;
-        --color-surface-hover: #3A3A4E;
-        --color-border: #3A3A4E;
-        --color-border-strong: #4A4A5E;
-
-        --color-text-primary: #E4E4E7;
-        --color-text-secondary: #A1A1AA;
-        --color-text-muted: #71717A;
-        --color-text-inverse: #18181B;
-
-        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
-        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
-    }
-}
-
-/* Reset & Base */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-base);
-    line-height: 1.5;
-    color: var(--color-text-primary);
-    background: var(--color-surface);
-    min-height: 100vh;
-    overflow: hidden;
-}
-
-/* App Container */
-.app {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: hidden;
-}
-
-/* ================================================
-   Header
-   ================================================ */
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--header-height);
-    padding: 0 12px;
-    background: var(--color-surface-alt);
-    border-bottom: 1px solid var(--color-border);
-    flex-shrink: 0;
-}
-
-.header-left {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.header-logo {
-    width: 20px;
-    height: 20px;
-}
-
-.header-title {
-    font-weight: 600;
-    font-size: 14px;
-    color: var(--color-text-primary);
-}
-
-.header-center {
-    display: flex;
-    align-items: center;
-}
-
-.header-right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-/* Status Badge */
-.status-badge {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    border-radius: var(--radius-full);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    font-size: 12px;
-    font-weight: 500;
-}
-
-.status-badge.active {
-    background: var(--color-success-bg);
-    border-color: var(--color-success);
-}
-
-.status-badge.active .status-dot {
-    background: var(--color-success);
-    animation: pulse 2s infinite;
-}
-
-.status-badge.warning {
-    background: var(--color-warning-bg);
-    border-color: var(--color-warning);
-}
-
-.status-badge.warning .status-dot {
-    background: var(--color-warning);
-}
-
-.status-badge.error {
-    background: var(--color-error-bg);
-    border-color: var(--color-error);
-}
-
-.status-badge.error .status-dot {
-    background: var(--color-error);
-}
-
-.status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--color-text-muted);
-}
-
-@keyframes pulse {
-
-    0%,
-    100% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-}
-
-/* Request Count */
-.request-count {
-    display: flex;
-    align-items: baseline;
-    gap: 4px;
-    font-size: 12px;
-    color: var(--color-text-muted);
-}
-
-.count-number {
-    font-weight: 700;
-    font-size: 14px;
-    color: var(--color-primary);
-}
-
-/* ================================================
-   Main Content Layout
-   ================================================ */
-.main-content {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-}
-
-/* ================================================
-   Sidebar - Patterns
-   ================================================ */
-.sidebar {
-    width: 220px;
-    min-width: 180px;
-    display: flex;
-    flex-direction: column;
-    background: var(--color-surface);
-    overflow: hidden;
-}
-
-.sidebar-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: var(--panel-pad);
-    border-bottom: 1px solid var(--color-border);
-}
-
-.sidebar-title {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--color-text-muted);
-}
-
-.patterns-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px;
-}
-
-.pattern-item {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-bottom: 6px;
-}
-
-.urlPattern {
-    flex: 1;
-    min-width: 0;
-    padding: var(--control-pad-y) 10px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    color: var(--color-text-primary);
-    font-size: 12px;
-    font-family: var(--font-mono);
-    transition: border-color var(--transition-fast);
-}
-
-.urlPattern:focus {
-    outline: none;
-    border-color: var(--color-primary);
-}
-
-.urlPattern::placeholder {
-    color: var(--color-text-muted);
-}
-
-.btn-add-pattern {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    margin: 0 8px 8px;
-    padding: 8px;
-    border: 1px dashed var(--color-border);
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text-muted);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.btn-add-pattern:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-    background: var(--color-surface-alt);
-}
-
-.btn-icon-plus {
-    font-size: 14px;
-    font-weight: 300;
-}
-
-.sidebar-actions {
-    padding: 8px;
-    border-top: 1px solid var(--color-border);
-}
-
-/* ================================================
-   Status Banner
-   ================================================ */
-.status-banner {
-    margin: 0 8px 8px;
-    padding: 8px 10px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    border: 1px solid var(--color-border);
-    font-size: 11px;
-    line-height: 1.4;
-    color: var(--color-text-secondary);
-    transition: all var(--transition-normal);
-    word-break: break-word;
-}
-
-.status-banner.hidden {
-    display: none;
-}
-
-.status-banner.success {
-    background: var(--color-success-bg);
-    border-color: var(--color-success);
-    color: var(--color-success);
-}
-
-.status-banner.warning {
-    background: var(--color-warning-bg);
-    border-color: var(--color-warning);
-    color: var(--color-warning);
-}
-
-.status-banner.error {
-    background: var(--color-error-bg);
-    border-color: var(--color-error);
-    color: var(--color-error);
-}
-
-.status-banner-text {
-    display: block;
-}
-
-/* ================================================
-   Sidebar Sections (Passive Mode, Schema)
-   ================================================ */
-.sidebar-section {
-    padding: var(--section-pad) 8px;
-    border-top: 1px solid var(--color-border);
-}
-
-.sidebar-section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-}
-
-.sidebar-section-title {
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--color-text-secondary);
-}
-
-.sidebar-section-desc {
-    margin-top: 4px;
-    font-size: 11px;
-    line-height: 1.4;
-    color: var(--color-text-muted);
-}
-
-/* Toggle switch */
-.toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 32px;
-    height: 18px;
-    flex-shrink: 0;
-}
-
-.toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.toggle-slider {
-    position: absolute;
-    inset: 0;
-    background: var(--color-border-strong);
-    border-radius: var(--radius-full);
-    cursor: pointer;
-    transition: background var(--transition-normal);
-}
-
-.toggle-slider::before {
-    content: '';
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    left: 2px;
-    top: 2px;
-    background: var(--color-surface);
-    border-radius: 50%;
-    box-shadow: var(--shadow-sm);
-    transition: transform var(--transition-normal);
-}
-
-.toggle-switch input:checked+.toggle-slider {
-    background: var(--color-primary);
-}
-
-.toggle-switch input:checked+.toggle-slider::before {
-    transform: translateX(14px);
-}
-
-.toggle-switch input:focus-visible+.toggle-slider {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-
-/* Registry info row */
-.registry-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 8px;
-    font-size: 11px;
-    color: var(--color-text-secondary);
-}
-
-.btn-link {
-    border: none;
-    background: none;
-    padding: 0;
-    font-size: 11px;
-    color: var(--color-primary);
-    cursor: pointer;
-}
-
-.btn-link:hover {
-    color: var(--color-primary-hover);
-    text-decoration: underline;
-}
-
-.btn-link:disabled {
-    color: var(--color-text-muted);
-    cursor: default;
-    text-decoration: none;
-}
-
-/* Schema form */
-.schema-load-bar {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-    padding: 8px var(--panel-pad);
-    border-bottom: 1px solid var(--color-border);
-    flex-shrink: 0;
-    min-width: 0;
-}
-
-.schema-actions {
-    display: flex;
-    align-items: stretch;
-    gap: 6px;
-    width: 100%;
-    min-width: 0;
-}
-
-.schema-url-input {
-    width: 100%;
-    min-width: 0;
-    box-sizing: border-box;
-    padding: 6px 8px;
-    border: 1px solid var(--color-border-strong);
-    border-radius: var(--radius-sm);
-    background: var(--color-surface);
-    color: var(--color-text-primary);
-    font-size: 11px;
-    font-family: var(--font-mono);
-}
-
-.schema-actions .schema-search,
-.schema-actions .btn {
-    flex: 1;
-    min-width: 0;
-    box-sizing: border-box;
-}
-
-.schema-actions .schema-search {
-    padding: 5px 8px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    color: var(--color-text-primary);
-    font-size: 12px;
-}
-
-.schema-url-input:focus,
-.schema-actions .schema-search:focus {
-    outline: none;
-    border-color: var(--color-primary);
-}
-
-.schema-status {
-    font-size: 11px;
-    color: var(--color-text-muted);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-    width: 100%;
-}
-
-/* ================================================
-   Buttons
-   ================================================ */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: var(--control-pad-y) 16px;
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.btn-block {
-    width: 100%;
-}
-
-.btn-primary {
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
-}
-
-.btn-primary:hover {
-    background: var(--color-primary-hover);
-}
-
-.btn-danger {
-    background: var(--color-error);
-    color: var(--color-text-inverse);
-}
-
-.btn-danger:hover {
-    background: #B91C1C;
-}
-
-.btn-success {
-    background: var(--color-success);
-    color: var(--color-text-inverse);
-}
-
-.btn-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-muted);
-    font-size: 16px;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.btn-icon:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text-primary);
-}
-
-.btn-remove {
-    color: var(--color-error);
-}
-
-.btn-remove:hover {
-    background: var(--color-error-bg);
-}
-
-.btn-icon-play {
-    font-size: 10px;
-}
-
-/* ================================================
-   Request Panel
-   ================================================ */
-.request-panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background: var(--color-surface);
-    overflow: hidden;
-    min-width: 300px;
-}
-
-.panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--section-pad) var(--panel-pad);
-    border-bottom: 1px solid var(--color-border);
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.panel-title {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--color-text-muted);
-    white-space: nowrap;
-}
-
-.main-panel-header {
-    flex-wrap: nowrap;
-}
-
-.main-panel-header .panel-toolbar {
-    margin-left: auto;
-}
-
-.panel-toolbar.hidden {
-    display: none;
-}
-
-.main-tab-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-height: 0;
-}
-
-.main-tab-content.hidden {
-    display: none;
-}
-
-.filter-bar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    justify-content: flex-end;
-    padding: 8px var(--panel-pad);
-    border-bottom: 1px solid var(--color-border);
-    flex-shrink: 0;
-}
-
-.main-tab-content .request-list {
-    flex: 1;
-    min-height: 0;
-}
-
-.filter-input {
-    width: 180px;
-    padding: 6px 10px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    color: var(--color-text-primary);
-    font-size: 12px;
-    transition: border-color var(--transition-fast);
-}
-
-.filter-input:focus {
-    outline: none;
-    border-color: var(--color-primary);
-}
-
-.filter-chips {
-    display: flex;
-    gap: 4px;
-}
-
-.chip {
-    padding: 4px 10px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-full);
-    background: var(--color-surface);
-    color: var(--color-text-muted);
-    font-size: 11px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.chip:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-}
-
-.chip.active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-text-inverse);
-}
-
-/* Request List */
-.request-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 4px;
-}
-
-.request-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: var(--item-pad-y) 12px;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: background var(--transition-fast);
-    border: 1px solid transparent;
-}
-
-.request-item:hover {
-    background: var(--color-surface-alt);
-}
-
-.request-item.selected {
-    background: var(--color-surface-alt);
-    border-color: var(--color-primary);
-}
-
-.request-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.request-operation {
-    font-weight: 600;
-    font-size: 13px;
-    color: var(--color-text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.request-url {
-    font-size: 11px;
-    color: var(--color-text-muted);
-    font-family: var(--font-mono);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.request-meta {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-.request-time {
-    font-size: 11px;
-    color: var(--color-text-muted);
-    font-family: var(--font-mono);
-}
-
-.request-badge {
-    padding: 2px 6px;
-    border-radius: var(--radius-sm);
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-.request-badge.apq {
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
-}
-
-.request-badge.full {
-    background: var(--color-success);
-    color: var(--color-text-inverse);
-}
-
-/* Empty State */
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 40px;
-    text-align: center;
-}
-
-.empty-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
-    opacity: 0.5;
-}
-
-.empty-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    margin-bottom: 4px;
-}
-
-.empty-desc {
-    font-size: 12px;
-    color: var(--color-text-muted);
-    max-width: 240px;
-}
-
-/* ================================================
-   Detail Panel
-   ================================================ */
-.detail-panel {
-    width: 350px;
-    min-width: 280px;
-    display: flex;
-    flex-direction: column;
-    background: var(--color-surface);
-    overflow: hidden;
-}
-
-.detail-panel.hidden {
-    display: none;
-}
-
-.detail-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--panel-pad);
-}
-
-.detail-placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: var(--color-text-muted);
-    font-size: 12px;
-}
-
-/* Detail Sections */
-.detail-section {
-    margin-bottom: 16px;
-}
-
-.detail-label {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--color-text-muted);
-    margin-bottom: 6px;
-}
-
-.detail-value {
-    font-size: 13px;
-    color: var(--color-text-primary);
-    word-break: break-all;
-}
-
-.detail-hash {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--color-text-secondary);
-    background: var(--color-surface-alt);
-    padding: 8px;
-    border-radius: var(--radius-md);
-    word-break: break-all;
-}
-
-/* Code Block */
-.code-block {
-    position: relative;
-    background: var(--color-surface-alt);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-}
-
-.code-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 6px 10px;
-    background: var(--color-surface-hover);
-    border-bottom: 1px solid var(--color-border);
-}
-
-.code-title {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--color-text-muted);
-}
-
-.btn-copy {
-    padding: 2px 8px;
-    font-size: 10px;
-}
-
-.code-content {
-    padding: 12px;
-    font-family: var(--font-mono);
-    font-size: 12px;
-    line-height: 1.6;
-    color: var(--color-text-primary);
-    white-space: pre-wrap;
-    word-break: break-word;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-/* Syntax Highlighting */
-.code-content .keyword {
-    color: #C678DD;
-}
-
-.code-content .type {
-    color: #E5C07B;
-}
-
-.code-content .field {
-    color: #61AFEF;
-}
-
-.code-content .string {
-    color: #98C379;
-}
-
-.code-content .variable {
-    color: #E06C75;
-}
-
-/* ================================================
-   Focus Styles (Keyboard Accessibility)
-   ================================================ */
-*:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-
-/* Remove outline for mouse users */
-*:focus:not(:focus-visible) {
-    outline: none;
-}
-
-.request-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
-    background: var(--color-surface-alt);
-}
-
-.request-item[aria-selected="true"] {
-    background: var(--color-surface-alt);
-    border-color: var(--color-primary);
-}
-
-.chip:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-
-.request-list:focus-visible {
-    outline: none;
-}
-
-/* ================================================
-   Panel Toolbar (Clear / Export)
-   ================================================ */
-.panel-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-}
-
-.btn-toolbar {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-    color: var(--color-text-secondary);
-    font-size: 11px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.btn-toolbar:hover:not(:disabled) {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-    background: var(--color-surface-alt);
-}
-
-.btn-toolbar:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-}
-
-.btn-toolbar span[aria-hidden] {
-    font-size: 12px;
-}
-
-/* ================================================
-   Resize Handles
-   ================================================ */
-.resize-handle {
-    width: 5px;
-    cursor: col-resize;
-    background: transparent;
-    position: relative;
-    flex-shrink: 0;
-    z-index: 10;
-    transition: background var(--transition-fast);
-}
-
-.resize-handle::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 2px;
-    width: 1px;
-    background: var(--color-border);
-    transition: background var(--transition-fast), width var(--transition-fast);
-}
-
-.resize-handle:hover::after,
-.resize-handle.dragging::after {
-    left: 1px;
-    width: 3px;
-    background: var(--color-primary);
-    border-radius: 2px;
-}
-
-.resize-handle:focus-visible::after {
-    left: 1px;
-    width: 3px;
-    background: var(--color-primary);
-    border-radius: 2px;
-}
-
-/* Hide the old border on panels when resize handles are present */
-.resize-handle-left + .request-panel {
-    border-left: none;
-}
-
-/* Prevent text selection while dragging */
-body.resizing {
-    cursor: col-resize !important;
-    user-select: none;
-}
-
-body.resizing * {
-    cursor: col-resize !important;
-}
-
-/* ================================================
-   Improved Empty & Filter States
-   ================================================ */
-.empty-state.filter-empty .empty-icon {
-    font-size: 36px;
-}
-
-/* ================================================
-   Scrollbar Styling
-   ================================================ */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--color-border-strong);
-}
-
-/* ================================================
-   Inline SVG Icons
-   ================================================ */
-.icon {
-    width: 14px;
-    height: 14px;
-    flex-shrink: 0;
-    vertical-align: -2px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.empty-icon .icon {
-    width: 42px;
-    height: 42px;
-    stroke-width: 1.2;
-}
-
-.panel-title .icon,
-.sidebar-title .icon {
-    margin-right: 4px;
-}
-
-/* ================================================
-   Header Buttons & Settings Popover
-   ================================================ */
-.btn-header {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    border: none;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.btn-header:hover,
-.btn-header[aria-expanded="true"] {
-    background: var(--color-surface-hover);
-    color: var(--color-text-primary);
-}
-
-.settings-wrap {
-    position: relative;
-}
-
-.settings-popover {
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    z-index: 100;
-    width: 220px;
-    padding: 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    background: var(--color-surface);
-    box-shadow: var(--shadow-lg);
-}
-
-.settings-popover.hidden {
-    display: none;
-}
-
-.settings-group+.settings-group {
-    margin-top: 12px;
-}
-
-.settings-group-label {
-    display: block;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--color-text-muted);
-    margin-bottom: 6px;
-}
-
-.settings-options {
-    display: flex;
-    gap: 4px;
-}
-
-.settings-option {
-    flex: 1;
-}
-
-.settings-option input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-}
-
-.settings-option span {
-    display: block;
-    padding: 5px 0;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    text-align: center;
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.settings-option input:checked+span {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-text-inverse);
-}
-
-.settings-option input:focus-visible+span {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-
-/* ================================================
-   Panel Tabs (Requests / Schema)
-   ================================================ */
-.panel-tabs {
-    display: flex;
-    gap: 2px;
-    padding: 2px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    flex-shrink: 0;
-}
-
-.panel-tab {
-    padding: 4px 12px;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-muted);
-    font-size: 11px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.panel-tab[aria-selected="true"] {
-    background: var(--color-surface);
-    color: var(--color-text-primary);
-    box-shadow: var(--shadow-sm);
-}
-
-.panel-tab:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-}
-
-/* ================================================
-   Schema Viewer
-   ================================================ */
-#schema-content {
-    min-height: 0;
-}
-
-#schema-content.hidden {
-    display: none;
-}
-
-.schema-explorer {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-height: 0;
-}
-
-.schema-explorer.hidden {
-    display: none;
-}
-
-.schema-body {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-    min-height: 0;
-}
-
-.schema-type-list {
-    width: 220px;
-    min-width: 140px;
-    flex-shrink: 0;
-    overflow-y: auto;
-    padding: 4px 0;
-}
-
-.schema-type-item {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    width: 100%;
-    padding: 4px 10px;
-    border: none;
-    background: transparent;
-    text-align: left;
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    min-width: 0;
-}
-
-.schema-type-item:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text-primary);
-}
-
-.schema-type-item.selected {
-    background: var(--color-surface-alt);
-    color: var(--color-text-primary);
-    font-weight: 600;
-}
-
-.schema-type-item .kind {
-    flex: 0 0 6em;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--color-text-muted);
-}
-
-.schema-type-item .name {
-    min-width: 0;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.schema-type-list-empty {
-    padding: 16px 10px;
-    font-size: 11px;
-    color: var(--color-text-muted);
-    text-align: center;
-}
-
-.schema-types {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--panel-pad);
-}
-
-#schema-sdl-view {
-    flex: 1;
-    min-width: 0;
-    margin: 0;
-    padding: 12px var(--panel-pad);
-    overflow: auto;
-    border: none;
-    border-radius: 0;
-    background: transparent;
-}
-
-.schema-sdl {
-    margin: 0;
-    padding: 12px;
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    font-family: var(--font-mono);
-    font-size: 11px;
-    line-height: 1.55;
-    color: var(--color-text-primary);
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-.schema-sdl .keyword {
-    color: #C678DD;
-}
-
-.schema-sdl .builtin {
-    color: #E5C07B;
-}
-
-.schema-sdl .type-name {
-    color: #E5C07B;
-    font-weight: 500;
-}
-
-.schema-sdl .field {
-    color: #61AFEF;
-}
-
-.schema-sdl .directive {
-    color: #C678DD;
-    font-style: italic;
-}
-
-.schema-sdl .string {
-    color: #98C379;
-}
-
-.schema-sdl .comment {
-    color: #5C6370;
-    font-style: italic;
-}
-
-.schema-sdl .enum-value {
-    color: #D19A66;
-}
-
-.schema-sdl .punct {
-    color: #ABB2BF;
-}
-
-.schema-meta {
-    padding: 6px var(--panel-pad);
-    font-size: 11px;
-    color: var(--color-text-muted);
-    border-bottom: 1px solid var(--color-border);
-    word-break: break-all;
-}
-
-.schema-empty {
-    padding: 24px;
-    text-align: center;
-    font-size: 12px;
-    color: var(--color-text-muted);
-}
-
-/* ================================================
-   Responsive Layout (class-driven, set by layout.js)
-   ================================================ */
-.main-content {
-    position: relative;
-}
-
-/* Manual sidebar collapse (any width) */
-.app.sidebar-collapsed .sidebar,
-.app.sidebar-collapsed #resize-handle-left {
-    display: none;
-}
-
-/* Narrow: detail panel becomes an overlay */
-.app.narrow .detail-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 20;
-    width: min(85%, 360px);
-    border-left: 1px solid var(--color-border);
-    box-shadow: var(--shadow-lg);
-}
-
-.app.narrow #resize-handle-right {
-    display: none;
-}
-
-.app.narrow .request-panel {
-    min-width: 0;
-}
-
-.app.narrow .schema-body {
-    flex-direction: column;
-}
-
-.app.narrow .schema-type-list {
-    width: auto !important;
-    min-width: 0;
-    max-height: 38%;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--color-border);
-}
-
-.app.narrow #resize-handle-schema {
-    display: none;
-}
-
-.app.narrow #schema-sdl-view {
-    flex: 1;
-    min-height: 0;
-}
-
-/* Very narrow: sidebar becomes a slide-in drawer */
-.app.very-narrow .sidebar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 30;
-    width: min(85%, 260px);
-    border-right: 1px solid var(--color-border);
-    box-shadow: var(--shadow-lg);
-    transform: translateX(-105%);
-    transition: transform var(--transition-normal);
-}
-
-.app.very-narrow.sidebar-open .sidebar {
-    transform: none;
-}
-
-.app.very-narrow #resize-handle-left {
-    display: none;
-}
-
-.app.very-narrow .filter-input {
-    width: 110px;
-}
-
-.app.very-narrow .header-title {
-    display: none;
-}
-
-/* ================================================
-   Detail actions
-   ================================================ */
-.detail-actions {
-    display: flex;
-    gap: 8px;
-}
-
-/* ================================================
-   Modal (Copy as cURL)
-   ================================================ */
-.modal {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 16px;
-}
-
-.modal.hidden {
-    display: none;
-}
-
-.modal-backdrop {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.45);
-}
-
-.modal-panel {
-    position: relative;
-    z-index: 1;
-    width: min(560px, 100%);
-    max-height: min(80vh, 520px);
-    display: flex;
-    flex-direction: column;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    background: var(--color-surface);
-    box-shadow: var(--shadow-lg);
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 14px;
-    border-bottom: 1px solid var(--color-border);
-}
-
-.modal-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-}
-
-.modal-desc {
-    padding: 10px 14px 0;
-    font-size: 12px;
-    color: var(--color-text-muted);
-}
-
-.modal-options {
-    display: flex;
-    gap: 6px;
-    padding: 10px 14px;
-}
-
-.curl-shell-option {
-    flex: 1;
-    padding: 6px 10px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    color: var(--color-text-secondary);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.curl-shell-option.active,
-.curl-shell-option[aria-pressed="true"] {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-text-inverse);
-}
-
-.modal-preview {
-    margin: 0 14px;
-    padding: 10px 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface-alt);
-    font-family: var(--font-mono);
-    font-size: 11px;
-    line-height: 1.5;
-    color: var(--color-text-primary);
-    white-space: pre-wrap;
-    word-break: break-all;
-    overflow: auto;
-    max-height: 240px;
-    flex: 1;
-}
-
-.modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: 12px 14px;
-    border-top: 1px solid var(--color-border);
-}
-
-/* ================================================
-   Reduced Motion
-   ================================================ */
-@media (prefers-reduced-motion: reduce) {
-
-    *,
-    *::before,
-    *::after {
-        transition-duration: 0.01ms !important;
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-    }
-}
\ No newline at end of file
diff --git a/frontend/devtools.html b/frontend/devtools.html
index db59dbd..fd907dc 100644
--- a/frontend/devtools.html
+++ b/frontend/devtools.html
@@ -1,280 +1,520 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>APQ Debugger</title>
-    <link rel="stylesheet" href="devtools.min.css">
-</head>
+    <link rel="stylesheet" href="devtools.min.css" />
+  </head>
 
-<body>
+  <body>
     <div class="app">
-        <!-- Header Bar -->
-        <header class="header" role="banner">
-            <div class="header-left">
-                <button type="button" class="btn-header" id="btn-toggle-sidebar" title="Toggle patterns sidebar"
-                    aria-label="Toggle patterns sidebar" aria-expanded="true" aria-controls="patterns-sidebar">
+      <!-- Tab strip: views on the left, session status and settings on the right -->
+      <header class="tabstrip" role="banner">
+        <div class="tabs" role="tablist" aria-label="Panel views">
+          <button
+            class="tab"
+            id="tab-requests"
+            role="tab"
+            aria-selected="true"
+            aria-controls="requests-content"
+          >
+            Requests
+          </button>
+          <button
+            class="tab"
+            id="tab-schema"
+            role="tab"
+            aria-selected="false"
+            tabindex="-1"
+            aria-controls="schema-content"
+          >
+            Schema
+          </button>
+        </div>
+        <div class="tabstrip-end">
+          <div class="status" id="debugger-status" role="status" aria-live="polite">
+            <span class="status-dot" aria-hidden="true"></span>
+            <span class="status-text">Off</span>
+          </div>
+          <div class="settings-wrap">
+            <button
+              type="button"
+              class="icon-btn"
+              id="btn-settings"
+              title="Settings"
+              aria-label="Settings"
+              aria-haspopup="true"
+              aria-expanded="false"
+              aria-controls="settings-popover"
+            >
+              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="12" cy="12" r="3" />
+                <path
+                  d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+                />
+              </svg>
+            </button>
+            <div
+              class="menu settings-popover hidden"
+              id="settings-popover"
+              role="group"
+              aria-label="Panel settings"
+            >
+              <fieldset class="menu-group">
+                <legend class="menu-label">Theme</legend>
+                <label class="menu-option"
+                  ><input type="radio" name="theme" value="system" checked /> System</label
+                >
+                <label class="menu-option"
+                  ><input type="radio" name="theme" value="light" /> Light</label
+                >
+                <label class="menu-option"
+                  ><input type="radio" name="theme" value="dark" /> Dark</label
+                >
+              </fieldset>
+              <fieldset class="menu-group">
+                <legend class="menu-label">Row density</legend>
+                <label class="menu-option"
+                  ><input type="radio" name="density" value="comfortable" checked />
+                  Comfortable</label
+                >
+                <label class="menu-option"
+                  ><input type="radio" name="density" value="compact" /> Compact</label
+                >
+              </fieldset>
+              <p class="menu-hint">
+                Shortcuts: <kbd>Ctrl</kbd>+<kbd>E</kbd> start or stop, <kbd>Ctrl</kbd>+<kbd>F</kbd>
+                filter, <kbd>Esc</kbd> close details.
+              </p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main class="views" aria-label="APQ Debugger">
+        <!-- ── Requests ─────────────────────────────────────────── -->
+        <section class="view" id="requests-content" role="tabpanel" aria-labelledby="tab-requests">
+          <div class="toolbar" id="requests-toolbar" role="toolbar" aria-label="Requests">
+            <button
+              type="button"
+              id="form-submit"
+              class="tb-btn record-btn"
+              title="Start intercepting (Ctrl+E)"
+            >
+              <svg class="icon icon-record" viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="12" cy="12" r="6" />
+              </svg>
+              <span class="record-label">Start</span>
+            </button>
+            <button
+              type="button"
+              class="tb-btn icon-btn"
+              id="btn-clear-history"
+              title="Clear requests"
+              aria-label="Clear requests"
+              disabled
+            >
+              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="12" cy="12" r="8" />
+                <line x1="6.4" y1="6.4" x2="17.6" y2="17.6" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="tb-btn icon-btn"
+              id="btn-export-history"
+              title="Export requests as JSON"
+              aria-label="Export requests as JSON"
+              disabled
+            >
+              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 4v11" />
+                <polyline points="7 10 12 15 17 10" />
+                <path d="M5 19h14" />
+              </svg>
+            </button>
+            <span class="tb-sep" aria-hidden="true"></span>
+            <button
+              type="button"
+              class="tb-btn patterns-toggle"
+              id="btn-toggle-patterns"
+              aria-expanded="false"
+              aria-controls="patterns-pane"
+              title="URL patterns and passive mode"
+            >
+              <span class="patterns-toggle-label">Patterns</span>
+              <span class="patterns-summary" id="patterns-summary">none</span>
+              <svg class="icon icon-chevron" viewBox="0 0 24 24" aria-hidden="true">
+                <polyline points="7 10 12 15 17 10" />
+              </svg>
+            </button>
+            <span class="tb-sep" aria-hidden="true"></span>
+            <input
+              type="search"
+              class="tb-input filter-input"
+              id="filter-input"
+              placeholder="Filter"
+              aria-label="Filter by operation name or URL"
+              autocomplete="off"
+              spellcheck="false"
+            />
+            <div class="segmented filter-chips" role="radiogroup" aria-label="Request type">
+              <button
+                type="button"
+                class="chip active"
+                data-filter="all"
+                role="radio"
+                aria-checked="true"
+              >
+                All
+              </button>
+              <button
+                type="button"
+                class="chip"
+                data-filter="apq"
+                role="radio"
+                aria-checked="false"
+                tabindex="-1"
+                title="Hash-only requests"
+              >
+                APQ
+              </button>
+              <button
+                type="button"
+                class="chip"
+                data-filter="full"
+                role="radio"
+                aria-checked="false"
+                tabindex="-1"
+                title="Requests carrying the query text"
+              >
+                Full
+              </button>
+            </div>
+            <select
+              class="tb-select endpoint-filter hidden"
+              id="endpoint-filter"
+              aria-label="Filter by endpoint"
+            ></select>
+            <span class="tb-spacer" aria-hidden="true"></span>
+            <span class="request-count" id="request-count">
+              <span class="count-number" id="interception-counter">0</span> requests<span
+                class="count-resolved"
+                title="APQ hashes resolved to their full query"
+              >
+                · <span id="metric-resolved">0</span> hashes resolved</span
+              >
+            </span>
+          </div>
+
+          <!-- Session pane: patterns, passive mode, observed endpoints -->
+          <div class="patterns-pane" id="patterns-pane" hidden>
+            <div class="pane-row">
+              <span class="pane-label" id="patterns-label">Intercept URLs matching</span>
+              <form id="myForm" class="pattern-list" role="group" aria-labelledby="patterns-label">
+                <div class="pattern-item">
+                  <input
+                    type="text"
+                    class="tb-input urlPattern"
+                    data-pattern-index="1"
+                    placeholder="e.g. *graphql*"
+                    aria-label="URL pattern 1"
+                    autocomplete="off"
+                    spellcheck="false"
+                  />
+                  <button
+                    type="button"
+                    class="icon-btn btn-remove"
+                    title="Remove pattern"
+                    aria-label="Remove pattern"
+                    hidden
+                  >
                     <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                        <rect x="3" y="4" width="18" height="16" rx="2" />
-                        <line x1="9" y1="4" x2="9" y2="20" />
+                      <line x1="7" y1="7" x2="17" y2="17" />
+                      <line x1="17" y1="7" x2="7" y2="17" />
                     </svg>
-                </button>
-                <img src="../icons/icon32.png" alt="APQ" class="header-logo">
-                <span class="header-title">APQ Debugger</span>
-            </div>
-            <div class="header-center">
-                <div class="status-badge" id="debugger-status" role="status" aria-live="polite">
-                    <span class="status-dot" aria-hidden="true"></span>
-                    <span class="status-text">Ready</span>
+                  </button>
                 </div>
+              </form>
+              <button type="button" class="tb-btn btn-add-pattern" id="add">
+                <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <line x1="12" y1="6" x2="12" y2="18" />
+                  <line x1="6" y1="12" x2="18" y2="12" />
+                </svg>
+                Add pattern
+              </button>
             </div>
-            <div class="header-right">
-                <span class="request-count" id="request-count" role="status" aria-live="polite"
-                    aria-label="Intercepted request count">
-                    <span class="count-number" id="interception-counter">0</span>
-                    <span class="count-label">requests</span>
-                </span>
-                <div class="settings-wrap">
-                    <button type="button" class="btn-header" id="btn-settings" title="Settings"
-                        aria-label="Settings" aria-haspopup="true" aria-expanded="false"
-                        aria-controls="settings-popover">
-                        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                            <circle cx="12" cy="12" r="3" />
-                            <path
-                                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
-                        </svg>
-                    </button>
-                    <div class="settings-popover hidden" id="settings-popover" role="group"
-                        aria-label="Panel settings">
-                        <div class="settings-group">
-                            <span class="settings-group-label" id="theme-label">Theme</span>
-                            <div class="settings-options" role="radiogroup" aria-labelledby="theme-label">
-                                <label class="settings-option">
-                                    <input type="radio" name="theme" value="system" checked>
-                                    <span>System</span>
-                                </label>
-                                <label class="settings-option">
-                                    <input type="radio" name="theme" value="light">
-                                    <span>Light</span>
-                                </label>
-                                <label class="settings-option">
-                                    <input type="radio" name="theme" value="dark">
-                                    <span>Dark</span>
-                                </label>
-                            </div>
-                        </div>
-                        <div class="settings-group">
-                            <span class="settings-group-label" id="density-label">Density</span>
-                            <div class="settings-options" role="radiogroup" aria-labelledby="density-label">
-                                <label class="settings-option">
-                                    <input type="radio" name="density" value="comfortable" checked>
-                                    <span>Comfortable</span>
-                                </label>
-                                <label class="settings-option">
-                                    <input type="radio" name="density" value="compact">
-                                    <span>Compact</span>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <div class="pane-row" id="passive-mode-section">
+              <label class="check">
+                <input
+                  type="checkbox"
+                  id="passive-mode-toggle"
+                  aria-describedby="passive-mode-desc"
+                />
+                Passive mode
+              </label>
+              <span class="pane-desc" id="passive-mode-desc"
+                >Resolve hashes from the local registry without modifying requests.</span
+              >
+              <span class="registry-count"><span id="registry-size">0</span> hashes known</span>
+              <button type="button" class="link-btn" id="btn-clear-registry" disabled>
+                Clear registry
+              </button>
             </div>
-        </header>
+            <div class="pane-row hidden" id="endpoints-section">
+              <span class="pane-label">Seen on this page</span>
+              <div
+                class="endpoints-list"
+                id="observed-endpoints"
+                role="list"
+                aria-label="Observed GraphQL endpoints"
+              ></div>
+            </div>
+          </div>
 
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Left Sidebar - Patterns -->
-            <aside class="sidebar" id="patterns-sidebar" role="complementary" aria-label="URL Patterns">
-                <div class="sidebar-header">
-                    <h2 class="sidebar-title"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-                        </svg>Patterns</h2>
-                </div>
-                <div class="patterns-list" id="patterns-list" role="list" aria-label="URL pattern list">
-                    <form id="myForm" role="group" aria-label="URL pattern inputs">
-                        <div class="pattern-item" role="listitem">
-                            <input type="text" class="urlPattern" data-pattern-index="1" placeholder="*graphql*"
-                                aria-label="URL pattern 1">
-                            <button type="button" class="btn-icon btn-remove" title="Remove pattern"
-                                aria-label="Remove pattern" style="display: none;">×</button>
-                        </div>
-                    </form>
-                </div>
-                <button type="button" class="btn-add-pattern" id="add" aria-label="Add URL pattern">
-                    <span class="btn-icon-plus" aria-hidden="true">+</span> Add Pattern
-                </button>
-                <div class="sidebar-actions">
-                    <button id="form-submit" class="btn btn-primary btn-block"
-                        aria-label="Start debugger">
-                        <span class="btn-icon-play" aria-hidden="true">▶</span> Start
-                    </button>
-                </div>
-                <div class="status-banner hidden" id="status-banner" role="alert" aria-live="assertive">
-                    <span class="status-banner-text" id="status-banner-text"></span>
-                </div>
+          <!-- Live interception bar -->
+          <div class="infobar hidden" id="live-bar">
+            <svg class="icon icon-record" viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="6" />
+            </svg>
+            <p class="infobar-text">
+              <span id="live-text">Intercepting requests</span>
+              <span class="infobar-note hidden" id="live-note"
+                >APQ hashes are swapped so the server asks Apollo for the full query. Chrome shows
+                its own “started debugging” bar while this runs.</span
+              >
+            </p>
+            <button type="button" class="link-btn hidden" id="live-note-dismiss">Got it</button>
+            <button type="button" class="tb-btn infobar-action" id="live-stop">Stop</button>
+          </div>
 
-                <!-- Passive Mode -->
-                <div class="sidebar-section" id="passive-mode-section">
-                    <div class="sidebar-section-header">
-                        <h3 class="sidebar-section-title">Passive Mode</h3>
-                        <label class="toggle-switch" title="Resolve APQ hashes from the registry without contaminating requests">
-                            <input type="checkbox" id="passive-mode-toggle" aria-label="Toggle passive mode">
-                            <span class="toggle-slider" aria-hidden="true"></span>
-                        </label>
-                    </div>
-                    <p class="sidebar-section-desc">
-                        Look up hashes locally instead of contaminating requests.
-                    </p>
-                    <div class="registry-info">
-                        <span class="registry-count">
-                            <strong id="registry-size">0</strong> hashes known
-                        </span>
-                        <button type="button" class="btn-link" id="btn-clear-registry"
-                            aria-label="Clear hash registry" disabled>Clear</button>
-                    </div>
+          <div class="split" id="requests-split">
+            <div class="list-pane">
+              <div class="grid-head" aria-hidden="true">
+                <span class="col-name">Name</span>
+                <span class="col-state">State</span>
+                <span class="col-hash">Hash</span>
+                <span class="col-time">Time</span>
+              </div>
+              <div
+                class="request-list"
+                id="request-list"
+                role="listbox"
+                aria-label="Captured GraphQL operations"
+                tabindex="0"
+              >
+                <div class="empty-state" id="empty-state">
+                  <p class="empty-title" id="empty-title">No operations captured yet</p>
+                  <ol class="empty-steps" id="empty-steps">
+                    <li>
+                      Under <strong>Patterns</strong>, enter a URL pattern for your GraphQL
+                      endpoint, for example <code>*graphql*</code>.
+                    </li>
+                    <li>
+                      Press <strong>Start</strong> (<kbd>Ctrl</kbd>+<kbd>E</kbd>) and use the page.
+                      Each hashed operation appears here with its full query.
+                    </li>
+                  </ol>
+                  <p class="empty-desc" id="empty-desc">
+                    Rather not modify requests? Turn on passive mode to resolve hashes you have
+                    already captured.
+                  </p>
                 </div>
-            </aside>
+              </div>
+            </div>
 
-            <!-- Resize handle: sidebar / request panel -->
-            <div class="resize-handle resize-handle-left" id="resize-handle-left" role="separator"
-                aria-orientation="vertical" aria-label="Resize patterns panel" tabindex="0"></div>
+            <div
+              class="resize-handle"
+              id="resize-handle-right"
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize details"
+              tabindex="0"
+            ></div>
 
-            <!-- Center Panel - Requests / Schema -->
-            <main class="request-panel" aria-label="Main panel">
-                <div class="panel-header main-panel-header">
-                    <div class="panel-tabs" role="tablist" aria-label="Main panel views">
-                        <button class="panel-tab" id="tab-requests" role="tab" aria-selected="true"
-                            aria-controls="requests-content">Requests</button>
-                        <button class="panel-tab" id="tab-schema" role="tab" aria-selected="false"
-                            aria-controls="schema-content">Schema</button>
-                    </div>
-                    <div class="panel-toolbar" id="requests-toolbar">
-                        <button class="btn btn-toolbar" id="btn-clear-history" title="Clear request history"
-                            aria-label="Clear request history" disabled>
-                            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                                <polyline points="3 6 5 6 21 6" />
-                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                            </svg> Clear
-                        </button>
-                        <button class="btn btn-toolbar" id="btn-export-history" title="Export history as JSON"
-                            aria-label="Export history as JSON" disabled>
-                            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                                <polyline points="7 10 12 15 17 10" />
-                                <line x1="12" y1="15" x2="12" y2="3" />
-                            </svg> Export
-                        </button>
-                    </div>
-                </div>
-                <div class="main-tab-content" id="requests-content" role="tabpanel" aria-labelledby="tab-requests">
-                    <div class="filter-bar">
-                        <input type="text" class="filter-input" id="filter-input"
-                            placeholder="Filter by operation name..." aria-label="Filter requests by operation name">
-                        <div class="filter-chips" role="radiogroup" aria-label="Filter by request type">
-                            <button class="chip active" data-filter="all" role="radio" aria-checked="true">All</button>
-                            <button class="chip" data-filter="apq" role="radio" aria-checked="false">APQ</button>
-                            <button class="chip" data-filter="full" role="radio" aria-checked="false">Full</button>
-                        </div>
-                    </div>
-                    <div class="request-list" id="request-list" role="listbox" aria-label="Request list"
-                        tabindex="0">
-                        <div class="empty-state" id="empty-state" role="status">
-                            <div class="empty-icon" aria-hidden="true">
-                                <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9" />
-                                    <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5" />
-                                    <circle cx="12" cy="12" r="2" />
-                                    <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5" />
-                                    <path d="M19.1 4.9C23 8.8 23 15.2 19.1 19.1" />
-                                </svg>
-                            </div>
-                            <p class="empty-title" id="empty-title">No requests intercepted yet</p>
-                            <p class="empty-desc" id="empty-desc">Start debugging to capture GraphQL requests</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="main-tab-content hidden" id="schema-content" role="tabpanel" aria-labelledby="tab-schema">
-                    <div class="schema-load-bar">
-                        <input type="url" class="schema-url-input" id="schema-url-input"
-                            placeholder="https://api.example.com/graphql"
-                            aria-label="GraphQL endpoint URL">
-                        <div class="schema-actions">
-                            <input type="text" class="schema-search" id="schema-search" placeholder="Filter types..."
-                                aria-label="Filter schema types">
-                            <button type="button" class="btn btn-primary" id="btn-load-schema"
-                                aria-label="Load schema via introspection">Load Schema</button>
-                            <button type="button" class="btn btn-toolbar" id="btn-clear-schema"
-                                aria-label="Clear loaded schema" disabled>Clear</button>
-                        </div>
-                        <div class="schema-status" id="schema-status" role="status" aria-live="polite">
-                            No schema loaded
-                        </div>
-                    </div>
-                    <div class="schema-explorer hidden" id="schema-explorer">
-                        <div class="schema-meta" id="schema-meta"></div>
-                        <div class="schema-body">
-                            <div class="schema-type-list" id="schema-type-list" role="listbox"
-                                aria-label="Schema types" tabindex="0"></div>
-                            <div class="resize-handle resize-handle-schema" id="resize-handle-schema" role="separator"
-                                aria-orientation="vertical" aria-label="Resize schema type list" tabindex="0"></div>
-                            <pre class="schema-sdl" id="schema-sdl-view" aria-label="Selected type definition"></pre>
-                        </div>
-                    </div>
+            <aside class="detail-panel hidden" id="detail-panel" aria-labelledby="detail-title">
+              <div class="detail-head">
+                <h2 class="detail-title" id="detail-title">Operation</h2>
+                <button
+                  type="button"
+                  class="icon-btn btn-close"
+                  id="close-detail"
+                  title="Close (Esc)"
+                  aria-label="Close details"
+                >
+                  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                    <line x1="7" y1="7" x2="17" y2="17" />
+                    <line x1="17" y1="7" x2="7" y2="17" />
+                  </svg>
+                </button>
+              </div>
+              <div class="detail-content" id="detail-content">
+                <div class="detail-placeholder">
+                  <p>Select a request to view details</p>
                 </div>
-            </main>
+              </div>
+            </aside>
+          </div>
+        </section>
 
-            <!-- Resize handle: request panel / detail panel -->
-            <div class="resize-handle resize-handle-right" id="resize-handle-right" role="separator"
-                aria-orientation="vertical" aria-label="Resize detail panel" tabindex="0"></div>
+        <!-- ── Schema ───────────────────────────────────────────── -->
+        <section
+          class="view hidden"
+          id="schema-content"
+          role="tabpanel"
+          aria-labelledby="tab-schema"
+        >
+          <div class="toolbar" role="toolbar" aria-label="Schema">
+            <input
+              type="url"
+              class="tb-input schema-url-input"
+              id="schema-url-input"
+              placeholder="Endpoint URL, or leave blank to use observed traffic"
+              aria-label="GraphQL endpoint URL"
+              autocomplete="off"
+              spellcheck="false"
+            />
+            <button type="button" class="tb-btn primary" id="btn-load-schema">Load schema</button>
+            <button type="button" class="tb-btn" id="btn-clear-schema" disabled>Clear</button>
+            <span class="tb-sep" aria-hidden="true"></span>
+            <input
+              type="search"
+              class="tb-input schema-search"
+              id="schema-search"
+              placeholder="Filter types"
+              aria-label="Filter schema types"
+              autocomplete="off"
+              spellcheck="false"
+            />
+          </div>
+          <div class="schema-status" id="schema-status" role="status" aria-live="polite">
+            No schema loaded
+          </div>
+          <div class="schema-empty" id="schema-empty">
+            <p class="empty-title">Browse the schema behind these operations</p>
+            <p class="empty-desc">
+              Load schema runs an introspection query against the endpoint, reusing the request
+              headers captured from live traffic. Leave the URL blank to try the endpoints this page
+              has already called.
+            </p>
+          </div>
+          <div class="schema-skeleton hidden" id="schema-skeleton" aria-hidden="true">
+            <div class="skeleton"></div>
+            <div class="skeleton"></div>
+            <div class="skeleton"></div>
+            <div class="skeleton"></div>
+          </div>
+          <div class="schema-explorer hidden" id="schema-explorer">
+            <div class="schema-meta" id="schema-meta"></div>
+            <div class="schema-body">
+              <div
+                class="schema-type-list"
+                id="schema-type-list"
+                role="listbox"
+                aria-label="Schema types"
+                tabindex="0"
+              ></div>
+              <div
+                class="resize-handle resize-handle-schema"
+                id="resize-handle-schema"
+                role="separator"
+                aria-orientation="vertical"
+                aria-label="Resize type list"
+                tabindex="0"
+              ></div>
+              <pre
+                class="schema-sdl"
+                id="schema-sdl-view"
+                tabindex="0"
+                aria-label="Selected type definition"
+              ></pre>
+            </div>
+          </div>
+        </section>
+      </main>
 
-            <!-- Right Panel - Request Details -->
-            <aside class="detail-panel" id="detail-panel" aria-label="Request details">
-                <div class="panel-header">
-                    <h2 class="panel-title">Request</h2>
-                    <button class="btn-icon btn-close" id="close-detail" title="Close (Escape)"
-                        aria-label="Close detail panel">×</button>
-                </div>
-                <div class="detail-content" id="detail-content">
-                    <div class="detail-placeholder">
-                        <p>Select a request to view details</p>
-                    </div>
-                </div>
-            </aside>
-        </div>
+      <!-- Toasts (bottom-right); error toasts individually get role="alert" -->
+      <div class="toast-stack hidden" id="status-banner" role="status" aria-live="polite"></div>
 
-        <!-- Response Container (hidden, for compatibility) -->
-        <div id="response-container" style="display: none;">
-            <div class="response" id="response"></div>
+      <!-- Confirm dialog for destructive actions -->
+      <div
+        class="modal hidden"
+        id="confirm-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="confirm-title"
+        aria-describedby="confirm-body"
+      >
+        <div class="modal-backdrop" aria-hidden="true"></div>
+        <div class="modal-panel">
+          <h3 class="modal-title" id="confirm-title"></h3>
+          <p class="modal-desc" id="confirm-body"></p>
+          <div class="modal-footer">
+            <button type="button" class="tb-btn" id="confirm-cancel">Cancel</button>
+            <button type="button" class="tb-btn danger" id="confirm-accept">Confirm</button>
+          </div>
         </div>
+      </div>
 
-        <!-- Copy as cURL modal -->
-        <div class="modal hidden" id="curl-modal" role="dialog" aria-modal="true"
-            aria-labelledby="curl-modal-title">
-            <div class="modal-backdrop" aria-hidden="true"></div>
-            <div class="modal-panel">
-                <div class="modal-header">
-                    <h3 class="modal-title" id="curl-modal-title">Copy as cURL</h3>
-                    <button type="button" class="btn-icon btn-close" id="curl-modal-close"
-                        aria-label="Close">×</button>
-                </div>
-                <p class="modal-desc">Includes captured request headers (cookies, client headers, etc.) when available.</p>
-                <div class="modal-options" role="group" aria-label="Shell format">
-                    <button type="button" class="curl-shell-option active" data-shell="bash"
-                        aria-pressed="true">Bash</button>
-                    <button type="button" class="curl-shell-option" data-shell="powershell"
-                        aria-pressed="false">PowerShell</button>
-                </div>
-                <pre class="modal-preview" id="curl-preview" aria-label="Generated cURL command"></pre>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" id="curl-copy-btn">Copy</button>
-                </div>
-            </div>
+      <!-- Copy as cURL dialog -->
+      <div
+        class="modal hidden"
+        id="curl-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="curl-modal-title"
+      >
+        <div class="modal-backdrop" aria-hidden="true"></div>
+        <div class="modal-panel modal-wide">
+          <div class="modal-header">
+            <h3 class="modal-title" id="curl-modal-title">Copy as cURL</h3>
+            <button
+              type="button"
+              class="icon-btn btn-close"
+              id="curl-modal-close"
+              aria-label="Close"
+            >
+              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                <line x1="7" y1="7" x2="17" y2="17" />
+                <line x1="17" y1="7" x2="7" y2="17" />
+              </svg>
+            </button>
+          </div>
+          <p class="modal-desc">
+            Includes the captured request headers (cookies, client headers) when available.
+          </p>
+          <div class="segmented modal-options" role="group" aria-label="Shell">
+            <button
+              type="button"
+              class="chip curl-shell-option active"
+              data-shell="bash"
+              aria-pressed="true"
+            >
+              Bash
+            </button>
+            <button
+              type="button"
+              class="chip curl-shell-option"
+              data-shell="powershell"
+              aria-pressed="false"
+            >
+              PowerShell
+            </button>
+          </div>
+          <pre
+            class="code modal-preview"
+            id="curl-preview"
+            tabindex="0"
+            aria-label="Generated cURL command"
+          ></pre>
+          <div class="modal-footer">
+            <button type="button" class="tb-btn primary" id="curl-copy-btn">Copy</button>
+          </div>
         </div>
+      </div>
     </div>
 
     <script src="../js/devtools.min.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/js/shared/constants.js b/js/shared/constants.js
index d67d314..e3846fa 100644
--- a/js/shared/constants.js
+++ b/js/shared/constants.js
@@ -126,3 +126,4 @@ export const INTROSPECTION_QUERY = `
 // ── UI Settings ───────────────────────────────────────────────────
 export const UI_SETTINGS_STORAGE_KEY = 'apqUiSettings';
 export const PANEL_WIDTHS_STORAGE_KEY = 'apqPanelWidths';
+export const FIRST_RUN_NOTE_STORAGE_KEY = 'apqFirstRunNoteSeen';
diff --git a/js/sw/messaging.js b/js/sw/messaging.js
index 3715f03..29a94d8 100644
--- a/js/sw/messaging.js
+++ b/js/sw/messaging.js
@@ -14,6 +14,7 @@ import {
 } from './debugger-manager.js';
 import { getRegistrySize, clearRegistry, isPassiveMode, setPassiveMode } from './hash-registry.js';
 import { loadSchema } from './schema-loader.js';
+import { ensureEndpointsLoaded, getObservedEndpoints } from './endpoint-tracker.js';
 
 /**
  * Broadcast a status update to all listeners (DevTools panel, popup, etc.).
@@ -149,6 +150,14 @@ function validateMessage(message) {
   if (message.loadSchema !== undefined && typeof message.loadSchema !== 'boolean') {
     return '"loadSchema" must be a boolean';
   }
+
+  // Validate getObservedEndpoints message shape
+  if (
+    message.getObservedEndpoints !== undefined &&
+    typeof message.getObservedEndpoints !== 'boolean'
+  ) {
+    return '"getObservedEndpoints" must be a boolean';
+  }
   if (message.url !== undefined && typeof message.url !== 'string') {
     return '"url" must be a string';
   }
@@ -221,6 +230,16 @@ export function handleMessage(message, sender, sendResponse) {
         });
       } else if (message.loadSchema === true) {
         await handleLoadSchemaMessage(message, sendResponse);
+      } else if (message.getObservedEndpoints === true) {
+        if (message.tabId === undefined) {
+          sendResponse({ status: 'ERROR', error: 'No tabId provided for endpoints query' });
+        } else {
+          await ensureEndpointsLoaded();
+          sendResponse({
+            status: 'SUCCESS',
+            endpoints: getObservedEndpoints(message.tabId),
+          });
+        }
       } else {
         sendResponse({ status: 'ERROR', error: 'Invalid message format or empty patterns' });
       }
diff --git a/js/ui/confirm.js b/js/ui/confirm.js
new file mode 100644
index 0000000..5fae46b
--- /dev/null
+++ b/js/ui/confirm.js
@@ -0,0 +1,93 @@
+/**
+ * Confirm dialog for destructive actions (clear history, clear registry).
+ * When the #confirm-dialog element is absent (unit-test fixtures), actions
+ * proceed as if confirmed so existing flows stay synchronous.
+ * @module ui/confirm
+ */
+
+import { getElement } from './dom-helpers.js';
+
+/** @type {((confirmed: boolean) => void)|null} */
+let activeResolve = null;
+
+/** @type {HTMLElement|null} */
+let previousFocus = null;
+
+function closeDialog(confirmed) {
+  const dialog = getElement('confirm-dialog');
+  if (dialog) dialog.classList.add('hidden');
+  if (previousFocus && typeof previousFocus.focus === 'function') {
+    previousFocus.focus();
+  }
+  previousFocus = null;
+  if (activeResolve) {
+    const resolve = activeResolve;
+    activeResolve = null;
+    resolve(confirmed);
+  }
+}
+
+/**
+ * Ask the user to confirm a destructive action.
+ * @param {{title: string, body: string, confirmLabel?: string}} options
+ * @returns {true|Promise<boolean>} `true` synchronously when no dialog
+ *   exists in the DOM; otherwise a promise resolving with the choice.
+ */
+export function confirmAction({ title, body, confirmLabel = 'Confirm' }) {
+  const dialog = getElement('confirm-dialog');
+  if (!dialog) return true;
+
+  const titleEl = getElement('confirm-title');
+  const bodyEl = getElement('confirm-body');
+  const acceptBtn = getElement('confirm-accept');
+  if (titleEl) titleEl.textContent = title;
+  if (bodyEl) bodyEl.textContent = body;
+  if (acceptBtn) acceptBtn.textContent = confirmLabel;
+
+  previousFocus = document.activeElement;
+  dialog.classList.remove('hidden');
+  if (acceptBtn) acceptBtn.focus();
+
+  return new Promise((resolve) => {
+    activeResolve = resolve;
+  });
+}
+
+/**
+ * Run an action behind a confirmation. Keeps the no-dialog path synchronous.
+ * @param {true|Promise<boolean>} result - Return value of confirmAction().
+ * @param {() => void} action
+ */
+export function whenConfirmed(result, action) {
+  if (result === true) {
+    action();
+    return;
+  }
+  result.then((confirmed) => {
+    if (confirmed) action();
+  });
+}
+
+/**
+ * Wire the dialog's buttons, backdrop, and Escape handling.
+ */
+export function initConfirm() {
+  const dialog = getElement('confirm-dialog');
+  if (!dialog) return;
+
+  const acceptBtn = getElement('confirm-accept');
+  if (acceptBtn) acceptBtn.addEventListener('click', () => closeDialog(true));
+
+  const cancelBtn = getElement('confirm-cancel');
+  if (cancelBtn) cancelBtn.addEventListener('click', () => closeDialog(false));
+
+  const backdrop = dialog.querySelector('.modal-backdrop');
+  if (backdrop) backdrop.addEventListener('click', () => closeDialog(false));
+
+  dialog.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      closeDialog(false);
+    }
+  });
+}
diff --git a/js/ui/curl-copy.js b/js/ui/curl-copy.js
index 2b6df3e..69d2d39 100644
--- a/js/ui/curl-copy.js
+++ b/js/ui/curl-copy.js
@@ -42,12 +42,31 @@ export function buildGraphQLBody(request) {
 }
 
 /**
+ * Captured headers to replay, one per name. Header names are
+ * case-insensitive, so a repeated name keeps its first position and the
+ * last value sent.
  * @param {object} request
  * @returns {{name: string, value: string}[]}
  */
 export function getReplayHeaders(request) {
   if (!request || !Array.isArray(request.headers)) return [];
-  return request.headers.filter((h) => h && h.name && h.value);
+  const byName = new Map(); // Map.set on an existing key keeps its position
+  for (const header of request.headers) {
+    if (!header || !header.name || !header.value) continue;
+    byName.set(header.name.toLowerCase(), { name: header.name, value: header.value });
+  }
+  return Array.from(byName.values());
+}
+
+/**
+ * Find a header by name, ignoring case.
+ * @param {{name: string, value: string}[]} headers
+ * @param {string} name
+ * @returns {{name: string, value: string}|undefined}
+ */
+function findHeader(headers, name) {
+  const wanted = name.toLowerCase();
+  return headers.find((header) => header.name.toLowerCase() === wanted);
 }
 
 /**
@@ -76,12 +95,17 @@ function psSingleQuote(value) {
  */
 export function toBashCurl(url, body, headers = []) {
   const json = JSON.stringify(body);
-  const lines = [
-    `curl ${bashSingleQuote(url)} \\`,
-    `  -X POST \\`,
-    `  -H ${bashSingleQuote('Content-Type: application/json')} \\`,
-    `  -H ${bashSingleQuote('Accept: application/json')} \\`,
-  ];
+  const lines = [`curl ${bashSingleQuote(url)} \\`, `  -X POST \\`];
+
+  // Defaults only where the captured request didn't send its own value
+  for (const [name, value] of [
+    ['Content-Type', 'application/json'],
+    ['Accept', 'application/json'],
+  ]) {
+    if (!findHeader(headers, name)) {
+      lines.push(`  -H ${bashSingleQuote(`${name}: ${value}`)} \\`);
+    }
+  }
 
   for (const header of headers) {
     lines.push(`  -H ${bashSingleQuote(`${header.name}: ${header.value}`)} \\`);
@@ -102,6 +126,12 @@ export function toPowerShellCurl(url, body, headers = []) {
   const escapedUrl = String(url).replace(/"/g, '`"');
   const lines = [`$body = @'`, json, `'@`, ``];
 
+  // Content-Type travels as -ContentType. It must not also appear in
+  // $headers: PowerShell rejects a hashtable literal that repeats a key.
+  const contentType = findHeader(headers, 'Content-Type');
+  const contentTypeValue = String(contentType ? contentType.value : 'application/json');
+  headers = headers.filter((header) => header !== contentType);
+
   if (headers.length > 0) {
     lines.push(`$headers = @{`);
     for (const header of headers) {
@@ -116,7 +146,7 @@ export function toPowerShellCurl(url, body, headers = []) {
   if (headers.length > 0) {
     lines.push(`  -Headers $headers \``);
   }
-  lines.push(`  -ContentType "application/json" \``);
+  lines.push(`  -ContentType "${contentTypeValue.replace(/"/g, '`"')}" \``);
   lines.push(`  -Body $body`);
   return lines.join('\n');
 }
@@ -193,7 +223,7 @@ export function initCurlCopy() {
       navigator.clipboard
         .writeText(preview.textContent)
         .then(() => {
-          copyBtn.textContent = 'Copied!';
+          copyBtn.textContent = 'Copied';
           setTimeout(() => {
             copyBtn.textContent = 'Copy';
           }, 1500);
diff --git a/js/ui/debugger-controls.js b/js/ui/debugger-controls.js
index 51ad3b0..8a6e5ce 100644
--- a/js/ui/debugger-controls.js
+++ b/js/ui/debugger-controls.js
@@ -7,6 +7,22 @@ import { getElement } from './dom-helpers.js';
 import { state, inspectedTabId } from './state.js';
 import { updateDebuggerStatus, showStatusBanner, showError } from './status.js';
 import { savePatternsToStorage } from './patterns.js';
+import { renderSessionBar, setPatternsPaneOpen } from './session.js';
+
+/**
+ * Put the record button into its idle or recording appearance.
+ * @param {HTMLButtonElement} button
+ * @param {boolean} recording
+ * @param {string} label
+ */
+function setRecordButton(button, recording, label) {
+  button.classList.toggle('is-recording', recording);
+  button.setAttribute('aria-pressed', String(recording));
+  button.title = recording ? 'Stop intercepting (Ctrl+E)' : 'Start intercepting (Ctrl+E)';
+  const labelEl = button.querySelector('.record-label');
+  if (labelEl) labelEl.textContent = label;
+  else button.textContent = label;
+}
 
 // ── UI state helpers ──────────────────────────────────────────────
 
@@ -18,8 +34,7 @@ export function resetUIState() {
   const submitButton = getElement('form-submit');
   if (submitButton) {
     submitButton.disabled = false;
-    submitButton.innerHTML = '<span class="btn-icon-play">&#9654;</span> Start';
-    submitButton.className = 'btn btn-primary btn-block';
+    setRecordButton(submitButton, false, 'Start');
   }
   state.currentOperation = null;
 }
@@ -31,8 +46,7 @@ export function setActiveUIState() {
   const submitButton = getElement('form-submit');
   if (submitButton) {
     submitButton.disabled = false;
-    submitButton.innerHTML = '<span class="btn-icon-play">&#9209;</span> Stop';
-    submitButton.className = 'btn btn-danger btn-block';
+    setRecordButton(submitButton, true, 'Stop');
   }
 }
 
@@ -43,10 +57,12 @@ export function setActiveUIState() {
  * @param {string} message - Success message to display in the status banner.
  */
 export function handleStartSuccess(message) {
-  updateDebuggerStatus('Active', 'active');
-  showStatusBanner(message, 'success');
+  // The live infobar is the confirmation; the message only goes to the log.
+  if (message) console.info(message);
+  updateDebuggerStatus('Intercepting', 'active');
   setActiveUIState();
   state.isDebuggerActive = true;
+  renderSessionBar();
 }
 
 /**
@@ -64,23 +80,42 @@ export function handleStartWarning(message) {
  * @param {string} error - Error message to display.
  */
 export function handleStartError(error) {
-  updateDebuggerStatus('Failed', 'error');
+  updateDebuggerStatus('Error', 'error');
   showStatusBanner(error, 'error');
   resetUIState();
 }
 
 function handleStartTimeout() {
   state.currentOperation = null;
-  updateDebuggerStatus('Timeout', 'error');
-  showStatusBanner('Start operation timed out', 'error');
+  updateDebuggerStatus('Error', 'error');
+  showStatusBanner('Start timed out. Press Start to try again.', 'error');
   resetUIState();
 }
 
 export function handleStopSuccess() {
-  updateDebuggerStatus('Stopped', 'error');
-  showStatusBanner('Debugger disconnected', 'warning');
+  updateDebuggerStatus(
+    state.passiveMode ? 'Passive' : 'Off',
+    state.passiveMode ? 'info' : 'default'
+  );
+  showStatusBanner(sessionRecap(), 'default');
   resetUIState();
   state.isDebuggerActive = false;
+  renderSessionBar();
+}
+
+/**
+ * One-line summary of the session for the stop toast.
+ * @returns {string}
+ */
+function sessionRecap() {
+  const captured = state.requestHistory.length;
+  if (captured === 0) return 'Interception stopped. No operations were captured.';
+  const resolved = state.requestHistory.filter((r) => r.type === 'apq' && r.query).length;
+  const hashes = state.requestHistory.filter((r) => r.type === 'apq').length;
+  const noun = captured === 1 ? 'operation' : 'operations';
+  return hashes > 0
+    ? `Interception stopped. ${captured} ${noun} captured; ${resolved} of ${hashes} hashes resolved.`
+    : `Interception stopped. ${captured} ${noun} captured.`;
 }
 
 /**
@@ -92,6 +127,7 @@ export function handleStopWarning(message) {
   showStatusBanner(message, 'warning');
   resetUIState();
   state.isDebuggerActive = false;
+  renderSessionBar();
 }
 
 function handleStopError(error) {
@@ -102,8 +138,8 @@ function handleStopError(error) {
 
 function handleStopTimeout() {
   state.currentOperation = null;
-  updateDebuggerStatus('Timeout', 'error');
-  showStatusBanner('Stop operation timed out', 'error');
+  updateDebuggerStatus('Error', 'error');
+  showStatusBanner('Stop timed out. Press Stop to try again.', 'error');
   resetUIState();
 }
 
@@ -125,18 +161,21 @@ function startDebugger() {
   });
 
   if (urlPatterns.length === 0) {
-    showError('Please enter at least one URL pattern');
+    setPatternsPaneOpen(true, { user: true });
+    const firstInput = document.querySelector('.urlPattern');
+    if (firstInput) firstInput.focus();
+    showError('Add a URL pattern first, for example *graphql*');
     state.currentOperation = null;
     return;
   }
 
   savePatternsToStorage();
-  updateDebuggerStatus('Connecting...', 'warning');
+  updateDebuggerStatus('Starting', 'warning');
 
   const submitButton = getElement('form-submit');
   if (submitButton) {
     submitButton.disabled = true;
-    submitButton.innerHTML = '<span class="btn-icon-play">&#9203;</span> Starting...';
+    setRecordButton(submitButton, false, 'Starting…');
   }
 
   const startTimeout = setTimeout(() => {
@@ -164,12 +203,12 @@ function startDebugger() {
 
 function stopDebugger() {
   state.currentOperation = 'stopping';
-  updateDebuggerStatus('Disconnecting...', 'warning');
+  updateDebuggerStatus('Stopping', 'warning');
 
   const submitButton = getElement('form-submit');
   if (submitButton) {
     submitButton.disabled = true;
-    submitButton.innerHTML = '<span class="btn-icon-play">&#9203;</span> Stopping...';
+    setRecordButton(submitButton, true, 'Stopping…');
   }
 
   const stopTimeout = setTimeout(() => {
diff --git a/js/ui/endpoint-utils.js b/js/ui/endpoint-utils.js
new file mode 100644
index 0000000..d8ecc09
--- /dev/null
+++ b/js/ui/endpoint-utils.js
@@ -0,0 +1,21 @@
+/**
+ * Endpoint URL normalization shared by the metrics strip, the endpoints
+ * drawer section, and request-list filtering/grouping. Matches the service
+ * worker's endpoint-tracker normalization (origin + pathname).
+ * @module ui/endpoint-utils
+ */
+
+/**
+ * Normalize a request URL to its endpoint key (origin + pathname).
+ * @param {string} url
+ * @returns {string} Empty string when the URL cannot be parsed.
+ */
+export function endpointKey(url) {
+  if (!url || typeof url !== 'string') return '';
+  try {
+    const parsed = new URL(url);
+    return parsed.origin + parsed.pathname;
+  } catch (_) {
+    return '';
+  }
+}
diff --git a/js/ui/endpoints.js b/js/ui/endpoints.js
new file mode 100644
index 0000000..aa0b1f7
--- /dev/null
+++ b/js/ui/endpoints.js
@@ -0,0 +1,189 @@
+/**
+ * Observed GraphQL endpoints: the patterns-pane row (with per-endpoint request
+ * counts and one-click "Add as pattern") and the endpoint filter in the
+ * requests view. Endpoint URLs come from the service worker's
+ * endpoint-tracker, merged with origins seen in the captured history.
+ * @module ui/endpoints
+ */
+
+import { getElement } from './dom-helpers.js';
+import { state, inspectedTabId } from './state.js';
+import { endpointKey } from './endpoint-utils.js';
+import { addPatternField } from './patterns.js';
+import { renderRequestList } from './request-list.js';
+
+/** Endpoint URLs reported by the service worker (already normalized). */
+let observedFromWorker = [];
+
+let refreshTimer = null;
+
+/** Debounce so a burst of intercepts causes one worker round-trip. */
+const REFRESH_DEBOUNCE_MS = 2000;
+
+/**
+ * All known endpoints: worker observations first, then history-only ones.
+ * @returns {string[]}
+ */
+function getKnownEndpoints() {
+  const known = new Set(observedFromWorker);
+  for (const request of state.requestHistory) {
+    const key = endpointKey(request.url);
+    if (key) known.add(key);
+  }
+  return Array.from(known);
+}
+
+/** Per-endpoint captured-request counts from history. */
+function getEndpointCounts() {
+  const counts = new Map();
+  for (const request of state.requestHistory) {
+    const key = endpointKey(request.url);
+    if (key) counts.set(key, (counts.get(key) || 0) + 1);
+  }
+  return counts;
+}
+
+/**
+ * Suggested URL pattern for an endpoint (host + path, wildcarded).
+ * @param {string} endpoint
+ * @returns {string}
+ */
+function patternForEndpoint(endpoint) {
+  try {
+    const parsed = new URL(endpoint);
+    return `*${parsed.host}${parsed.pathname}*`;
+  } catch (_) {
+    return `*${endpoint}*`;
+  }
+}
+
+function buildEndpointRow(endpoint, count) {
+  const row = document.createElement('div');
+  row.className = 'endpoint-item';
+  row.setAttribute('role', 'listitem');
+
+  const info = document.createElement('div');
+  info.className = 'endpoint-info';
+
+  const urlEl = document.createElement('span');
+  urlEl.className = 'endpoint-url';
+  urlEl.textContent = endpoint.replace(/^https?:\/\//, '');
+  urlEl.title = endpoint;
+  info.appendChild(urlEl);
+
+  const countEl = document.createElement('span');
+  countEl.className = 'endpoint-count';
+  countEl.textContent = String(count);
+  countEl.title = count === 1 ? '1 request captured' : `${count} requests captured`;
+  info.appendChild(countEl);
+
+  const addBtn = document.createElement('button');
+  addBtn.type = 'button';
+  addBtn.className = 'link-btn';
+  addBtn.textContent = 'Add as pattern';
+  addBtn.setAttribute('aria-label', `Add ${endpoint} as URL pattern`);
+  addBtn.addEventListener('click', () => {
+    addPatternField(patternForEndpoint(endpoint));
+  });
+
+  row.appendChild(info);
+  row.appendChild(addBtn);
+  return row;
+}
+
+/**
+ * Rebuild the endpoint filter select. Visible only when more than one
+ * endpoint has been seen; a vanished selection resets to all endpoints.
+ * @param {string[]} endpoints
+ */
+function renderEndpointFilter(endpoints) {
+  const select = getElement('endpoint-filter');
+  if (!select) return;
+
+  const previous = state.endpointFilter;
+  select.textContent = '';
+
+  const allOption = document.createElement('option');
+  allOption.value = '';
+  allOption.textContent = 'All endpoints';
+  select.appendChild(allOption);
+
+  for (const endpoint of endpoints) {
+    const option = document.createElement('option');
+    option.value = endpoint;
+    option.textContent = endpoint.replace(/^https?:\/\//, '');
+    select.appendChild(option);
+  }
+
+  if (previous && endpoints.includes(previous)) {
+    select.value = previous;
+  } else {
+    select.value = '';
+    if (previous) {
+      state.endpointFilter = '';
+      renderRequestList();
+    }
+  }
+
+  select.classList.toggle('hidden', endpoints.length < 2);
+}
+
+/**
+ * Re-render the drawer section and the endpoint filter from current data.
+ */
+export function renderEndpointsView() {
+  const section = getElement('endpoints-section');
+  const listEl = getElement('observed-endpoints');
+  const endpoints = getKnownEndpoints();
+
+  if (section && listEl) {
+    section.classList.toggle('hidden', endpoints.length === 0);
+    const counts = getEndpointCounts();
+    listEl.textContent = '';
+    for (const endpoint of endpoints) {
+      listEl.appendChild(buildEndpointRow(endpoint, counts.get(endpoint) || 0));
+    }
+  }
+
+  renderEndpointFilter(endpoints);
+}
+
+/** Fetch worker-observed endpoints, then re-render. */
+function fetchObservedEndpoints() {
+  chrome.runtime.sendMessage({ getObservedEndpoints: true, tabId: inspectedTabId }, (response) => {
+    if (chrome.runtime.lastError) {
+      // Worker may be restarting; history-derived endpoints still render
+      renderEndpointsView();
+      return;
+    }
+    if (response && response.status === 'SUCCESS' && Array.isArray(response.endpoints)) {
+      observedFromWorker = response.endpoints;
+    }
+    renderEndpointsView();
+  });
+}
+
+/**
+ * Schedule a debounced worker refresh (called on every INTERCEPTED message).
+ */
+export function scheduleEndpointsRefresh() {
+  if (refreshTimer) return;
+  refreshTimer = setTimeout(() => {
+    refreshTimer = null;
+    fetchObservedEndpoints();
+  }, REFRESH_DEBOUNCE_MS);
+}
+
+/**
+ * Wire the endpoint filter and load the initial endpoint list.
+ */
+export function initEndpoints() {
+  const select = getElement('endpoint-filter');
+  if (select) {
+    select.addEventListener('change', () => {
+      state.endpointFilter = select.value;
+      renderRequestList();
+    });
+  }
+  fetchObservedEndpoints();
+}
diff --git a/js/ui/index.js b/js/ui/index.js
index 361a140..2660be0 100644
--- a/js/ui/index.js
+++ b/js/ui/index.js
@@ -24,6 +24,9 @@ import { initKeyboard } from './keyboard.js';
 import { initSchemaControls, updateSchemaProgress } from './schema-controls.js';
 import { initSchemaViewer } from './schema-viewer.js';
 import { initCurlCopy } from './curl-copy.js';
+import { initConfirm } from './confirm.js';
+import { initEndpoints, scheduleEndpointsRefresh } from './endpoints.js';
+import { initSession, renderSessionBar } from './session.js';
 
 // ── Panel registration ────────────────────────────────────────────
 
@@ -41,6 +44,7 @@ chrome.devtools.panels.create(
 document.addEventListener('DOMContentLoaded', function () {
   // Initialise UI modules
   initPatterns();
+  initSession();
   initRequestList();
   initRequestDetail();
   initDebuggerControls();
@@ -53,6 +57,8 @@ document.addEventListener('DOMContentLoaded', function () {
   initSchemaViewer();
   initSchemaControls();
   initCurlCopy();
+  initConfirm();
+  initEndpoints();
 
   // ── Message listeners ─────────────────────────────────────────
 
@@ -79,6 +85,7 @@ document.addEventListener('DOMContentLoaded', function () {
           responseTime: message.responseTime || null,
           headers: message.headers || [],
         });
+        scheduleEndpointsRefresh();
 
         try {
           sendResponse({ status: 'Message received' });
@@ -120,16 +127,20 @@ document.addEventListener('DOMContentLoaded', function () {
     state.isDebuggerActive = false;
 
     const reasonMessages = {
-      target_closed: 'Tab closed',
-      canceled_by_user: 'Manually detached',
+      target_closed: 'the tab closed.',
+      canceled_by_user: 'Chrome’s debugging bar was cancelled.',
     };
 
-    updateDebuggerStatus('Disconnected', 'error');
+    updateDebuggerStatus(
+      state.passiveMode ? 'Passive' : 'Off',
+      state.passiveMode ? 'info' : 'default'
+    );
     showStatusBanner(
-      `Debugger disconnected: ${reasonMessages[reason] || 'Unknown reason'}`,
+      `Interception stopped: ${reasonMessages[reason] || 'Chrome detached the debugger.'}`,
       'warning'
     );
     resetUIState();
+    renderSessionBar();
   });
 
   // ── Extension suspend handler ─────────────────────────────────
@@ -142,7 +153,7 @@ document.addEventListener('DOMContentLoaded', function () {
   // ── Initialisation ────────────────────────────────────────────
 
   console.log('APQ Debugger DevTools panel initialized');
-  updateDebuggerStatus('Ready', 'default');
+  updateDebuggerStatus('Off', 'default');
   restorePatternsFromStorage();
   renderRequestList();
 
diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index 4a02d93..cb44c13 100644
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -1,6 +1,9 @@
 /**
  * Keyboard navigation:
  * - Escape closes the detail panel
+ * - Ctrl/Cmd+E starts or stops interception (as Network's record shortcut)
+ * - Ctrl/Cmd+F or "/" focuses the active view's filter
+ * - Arrow navigation between the Requests / Schema tabs
  * - Arrow/Home/End navigation within the request list (roving focus)
  * - Arrow/Home/End navigation within the schema type list (roving focus)
  * - Arrow navigation within the filter chip radio group
@@ -9,6 +12,7 @@
 
 import { getElement } from './dom-helpers.js';
 import { state } from './state.js';
+import { showMainTab } from './schema-viewer.js';
 
 function isEditableTarget(target) {
   if (!target) return false;
@@ -126,6 +130,34 @@ function handleChipKeydown(e) {
   chips[next].click();
 }
 
+function handleTabKeydown(e) {
+  if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End')
+    return;
+  const tabs = Array.from(document.querySelectorAll('.tabs [role="tab"]'));
+  const currentIndex = tabs.indexOf(document.activeElement);
+  if (currentIndex < 0) return;
+
+  e.preventDefault();
+  let next = currentIndex;
+  if (e.key === 'ArrowRight') next = (currentIndex + 1) % tabs.length;
+  else if (e.key === 'ArrowLeft') next = (currentIndex - 1 + tabs.length) % tabs.length;
+  else if (e.key === 'Home') next = 0;
+  else next = tabs.length - 1;
+
+  showMainTab(tabs[next].id === 'tab-schema' ? 'schema' : 'requests');
+  tabs[next].focus();
+}
+
+/** Focus the filter of whichever view is showing. */
+function focusActiveFilter() {
+  const schemaVisible = !document.getElementById('schema-content')?.classList.contains('hidden');
+  const filter = document.getElementById(schemaVisible ? 'schema-search' : 'filter-input');
+  if (filter) {
+    filter.focus();
+    filter.select?.();
+  }
+}
+
 /**
  * Wire up global and per-region keyboard handling.
  */
@@ -164,7 +196,32 @@ export function initKeyboard() {
     chipGroup.addEventListener('keydown', handleChipKeydown);
   }
 
+  const tabList = document.querySelector('.tabs');
+  if (tabList) {
+    tabList.addEventListener('keydown', handleTabKeydown);
+  }
+
   document.addEventListener('keydown', (e) => {
+    const mod = e.ctrlKey || e.metaKey;
+
+    if (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'e') {
+      const recordButton = document.getElementById('form-submit');
+      if (recordButton && !recordButton.disabled) {
+        e.preventDefault();
+        recordButton.click();
+      }
+      return;
+    }
+
+    if (
+      (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'f') ||
+      (e.key === '/' && !mod && !isEditableTarget(e.target))
+    ) {
+      e.preventDefault();
+      focusActiveFilter();
+      return;
+    }
+
     // Escape: close the detail panel (unless typing in a field)
     if (e.key === 'Escape' && !isEditableTarget(e.target)) {
       const detailPanel = getElement('detail-panel');
diff --git a/js/ui/layout.js b/js/ui/layout.js
index a026b03..e561ac0 100644
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -1,58 +1,26 @@
 /**
- * Responsive layout management: width-driven panel collapse and the
- * manual sidebar toggle. Class changes are picked up by devtools.css
- * (.app.narrow, .app.very-narrow, .app.sidebar-collapsed, .sidebar-open).
+ * Responsive layout: width-driven classes on .app that CSS uses to drop
+ * low-priority columns and to show the detail pane as an overlay when
+ * the panel is too narrow for a side-by-side split
+ * (.app.narrow, .app.very-narrow).
  * @module ui/layout
  */
 
-import { getElement } from './dom-helpers.js';
-
-const NARROW_PX = 560;
-const VERY_NARROW_PX = 400;
+const NARROW_PX = 640;
+const VERY_NARROW_PX = 420;
 
 function applyBreakpoints(app, width) {
   app.classList.toggle('narrow', width < NARROW_PX);
-  const veryNarrow = width < VERY_NARROW_PX;
-  const wasVeryNarrow = app.classList.contains('very-narrow');
-  app.classList.toggle('very-narrow', veryNarrow);
-
-  // Close the drawer when entering very-narrow so it doesn't cover content
-  if (veryNarrow && !wasVeryNarrow) {
-    app.classList.remove('sidebar-open');
-    syncToggleButton(app);
-  }
-}
-
-function syncToggleButton(app) {
-  const button = document.getElementById('btn-toggle-sidebar');
-  if (!button) return;
-
-  const veryNarrow = app.classList.contains('very-narrow');
-  const visible = veryNarrow
-    ? app.classList.contains('sidebar-open')
-    : !app.classList.contains('sidebar-collapsed');
-  button.setAttribute('aria-expanded', String(visible));
+  app.classList.toggle('very-narrow', width < VERY_NARROW_PX);
 }
 
 /**
- * Initialise responsive breakpoints and the sidebar toggle button.
+ * Initialise responsive breakpoints.
  */
 export function initLayout() {
   const app = document.querySelector('.app');
   if (!app) return;
 
-  const toggleButton = getElement('btn-toggle-sidebar');
-  if (toggleButton) {
-    toggleButton.addEventListener('click', () => {
-      if (app.classList.contains('very-narrow')) {
-        app.classList.toggle('sidebar-open');
-      } else {
-        app.classList.toggle('sidebar-collapsed');
-      }
-      syncToggleButton(app);
-    });
-  }
-
   applyBreakpoints(app, window.innerWidth);
 
   if (typeof ResizeObserver !== 'undefined') {
diff --git a/js/ui/metrics.js b/js/ui/metrics.js
new file mode 100644
index 0000000..5342c04
--- /dev/null
+++ b/js/ui/metrics.js
@@ -0,0 +1,41 @@
+/**
+ * Session metrics: captured requests, resolved hashes, unique operations
+ * and unique endpoints, all derived from request history. The toolbar
+ * shows captured and resolved; the other counts render when their
+ * elements exist.
+ * @module ui/metrics
+ */
+
+import { state } from './state.js';
+import { endpointKey } from './endpoint-utils.js';
+
+function setMetric(id, value) {
+  // Optional: the toolbar shows only captured and resolved counts, so the
+  // other metrics render only where an element exists (no error when absent).
+  const el = document.getElementById(id);
+  if (el) el.textContent = String(value);
+}
+
+/**
+ * Recompute and render the four metric tiles from state.requestHistory.
+ * Called from renderRequestList so every history change updates the strip.
+ */
+export function renderMetrics() {
+  const history = state.requestHistory;
+
+  const operations = new Set();
+  const endpoints = new Set();
+  let resolved = 0;
+
+  for (const request of history) {
+    if (request.type === 'apq' && request.query) resolved++;
+    if (request.operationName) operations.add(request.operationName);
+    const key = endpointKey(request.url);
+    if (key) endpoints.add(key);
+  }
+
+  setMetric('metric-captured', history.length);
+  setMetric('metric-resolved', resolved);
+  setMetric('metric-operations', operations.size);
+  setMetric('metric-endpoints', endpoints.size);
+}
diff --git a/js/ui/patterns.js b/js/ui/patterns.js
index 042bb2c..2368c1b 100644
--- a/js/ui/patterns.js
+++ b/js/ui/patterns.js
@@ -5,6 +5,10 @@
 
 import { getElement, getPatternInputs, getPatternsFromForm } from './dom-helpers.js';
 import { state, PATTERNS_STORAGE_KEY } from './state.js';
+import { setPatternsPaneOpen, renderPatternsSummary } from './session.js';
+
+const REMOVE_ICON =
+  '<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><line x1="7" y1="7" x2="17" y2="17"/><line x1="17" y1="7" x2="7" y2="17"/></svg>';
 
 /**
  * Persist current pattern values to chrome.storage.local.
@@ -32,6 +36,10 @@ export function restorePatternsFromStorage() {
       ? result[PATTERNS_STORAGE_KEY]
       : [];
 
+    // First run (no patterns yet): open the pane so setup is obvious.
+    // Configured already: keep it closed and give the list the room.
+    setPatternsPaneOpen(!patterns.some((p) => typeof p === 'string' && p.trim().length > 0));
+
     const inputs = getPatternInputs();
     if (inputs.length === 0) return;
 
@@ -42,6 +50,7 @@ export function restorePatternsFromStorage() {
     for (let i = 1; i < patterns.length; i++) {
       addPatternField(patterns[i]);
     }
+    renderPatternsSummary();
   });
 }
 
@@ -58,20 +67,25 @@ export function addPatternField(value = '') {
 
   const input = document.createElement('input');
   input.type = 'text';
-  input.className = 'urlPattern';
+  input.className = 'tb-input urlPattern';
   input.setAttribute('data-pattern-index', ++state.totalPatterns);
-  input.placeholder = '*graphql*';
+  input.setAttribute('aria-label', `URL pattern ${state.totalPatterns}`);
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  input.placeholder = 'e.g. *api/graphql*';
   if (value) input.value = value;
   input.addEventListener('input', savePatternsToStorage);
 
   const removeBtn = document.createElement('button');
   removeBtn.type = 'button';
-  removeBtn.className = 'btn-icon btn-remove';
+  removeBtn.className = 'icon-btn btn-remove';
   removeBtn.title = 'Remove pattern';
-  removeBtn.innerHTML = '&times;';
+  removeBtn.setAttribute('aria-label', 'Remove pattern');
+  removeBtn.innerHTML = REMOVE_ICON;
   removeBtn.addEventListener('click', () => {
     patternItem.remove();
     savePatternsToStorage();
+    renderPatternsSummary();
   });
 
   patternItem.appendChild(input);
@@ -79,6 +93,7 @@ export function addPatternField(value = '') {
   form.appendChild(patternItem);
 
   savePatternsToStorage();
+  renderPatternsSummary();
 }
 
 /**
@@ -87,7 +102,11 @@ export function addPatternField(value = '') {
 export function initPatterns() {
   const addButton = getElement('add');
   if (addButton) {
-    addButton.addEventListener('click', () => addPatternField());
+    addButton.addEventListener('click', () => {
+      addPatternField();
+      const inputs = getPatternInputs();
+      if (inputs.length) inputs[inputs.length - 1].focus();
+    });
   }
 
   const initialInput = document.querySelector('.urlPattern');
diff --git a/js/ui/registry-controls.js b/js/ui/registry-controls.js
index bf31daf..6ee281e 100644
--- a/js/ui/registry-controls.js
+++ b/js/ui/registry-controls.js
@@ -1,10 +1,13 @@
 /**
- * Passive mode toggle and hash registry controls in the sidebar.
+ * Passive mode toggle and hash registry controls in the patterns pane.
  * @module ui/registry-controls
  */
 
 import { getElement } from './dom-helpers.js';
-import { showStatusBanner } from './status.js';
+import { showStatusBanner, updateDebuggerStatus } from './status.js';
+import { state } from './state.js';
+import { confirmAction, whenConfirmed } from './confirm.js';
+import { renderSessionBar } from './session.js';
 
 /**
  * Update the registry UI (size counter, clear button, passive-mode toggle)
@@ -15,6 +18,7 @@ export function updateRegistryUI(info) {
   if (!info || typeof info !== 'object') return;
 
   if (info.size !== undefined) {
+    state.registrySize = info.size;
     const sizeEl = getElement('registry-size');
     if (sizeEl) sizeEl.textContent = info.size;
 
@@ -25,7 +29,19 @@ export function updateRegistryUI(info) {
   if (info.passiveMode !== undefined) {
     const toggle = getElement('passive-mode-toggle');
     if (toggle) toggle.checked = info.passiveMode;
+    state.passiveMode = Boolean(info.passiveMode);
+
+    // While interception is off, passive mode is the effective state.
+    if (!state.isDebuggerActive) {
+      if (info.passiveMode) {
+        updateDebuggerStatus('Passive', 'info');
+      } else {
+        updateDebuggerStatus('Off', 'default');
+      }
+    }
   }
+
+  renderSessionBar();
 }
 
 /**
@@ -46,8 +62,8 @@ export function initRegistryControls() {
         updateRegistryUI(response);
         showStatusBanner(
           enabled
-            ? 'Passive mode on — requests will not be modified'
-            : 'Passive mode off — APQ hashes will be contaminated',
+            ? 'Passive mode on. Requests will not be modified.'
+            : 'Passive mode off. Start will swap APQ hashes again.',
           'success'
         );
       });
@@ -57,14 +73,23 @@ export function initRegistryControls() {
   const clearBtn = getElement('btn-clear-registry');
   if (clearBtn) {
     clearBtn.addEventListener('click', () => {
-      chrome.runtime.sendMessage({ clearRegistry: true }, (response) => {
-        if (chrome.runtime.lastError || !response || response.status !== 'SUCCESS') {
-          showStatusBanner('Failed to clear hash registry', 'error');
-          return;
+      whenConfirmed(
+        confirmAction({
+          title: 'Clear hash registry?',
+          body: 'Removes every known hash-to-query mapping. Passive mode cannot resolve hashes until new ones are learned.',
+          confirmLabel: 'Clear registry',
+        }),
+        () => {
+          chrome.runtime.sendMessage({ clearRegistry: true }, (response) => {
+            if (chrome.runtime.lastError || !response || response.status !== 'SUCCESS') {
+              showStatusBanner('Failed to clear hash registry', 'error');
+              return;
+            }
+            updateRegistryUI(response);
+            showStatusBanner('Hash registry cleared', 'success');
+          });
         }
-        updateRegistryUI(response);
-        showStatusBanner('Hash registry cleared', 'success');
-      });
+      );
     });
   }
 
diff --git a/js/ui/request-detail.js b/js/ui/request-detail.js
index 9590908..cb04bbe 100644
--- a/js/ui/request-detail.js
+++ b/js/ui/request-detail.js
@@ -1,11 +1,14 @@
 /**
  * Request detail panel: selection, rendering, and copy-to-clipboard.
+ * The recovered query is the panel's main content; metadata stays to one
+ * compact key/value block above it.
  * @module ui/request-detail
  */
 
 import { getElement, escapeHtml } from './dom-helpers.js';
 import { state } from './state.js';
 import { openCurlModal } from './curl-copy.js';
+import { getRequestState, isAnonymousOperation } from './request-state.js';
 
 /**
  * Mark a request as selected and show the detail panel.
@@ -27,6 +30,10 @@ export function selectRequest(requestId) {
   renderRequestDetail(requestId);
 }
 
+function copyButton(kind, label) {
+  return `<button type="button" class="tb-btn btn-copy" data-copy="${kind}" aria-label="${label}">Copy</button>`;
+}
+
 /**
  * Render the detail panel content for a given request.
  * @param {number} requestId
@@ -36,7 +43,6 @@ export function renderRequestDetail(requestId) {
   const detailContent = getElement('detail-content');
   if (!request || !detailContent) return;
 
-  const formattedQuery = request.query ? formatGraphQL(request.query) : 'No query available';
   let variablesJson = null;
   try {
     variablesJson = request.variables ? JSON.stringify(request.variables, null, 2) : null;
@@ -45,70 +51,71 @@ export function renderRequestDetail(requestId) {
     variablesJson = '(unable to display variables)';
   }
 
+  const rowState = getRequestState(request);
+  const anonymous = isAnonymousOperation(request.operationName);
+  const name = anonymous ? '(anonymous)' : request.operationName;
+
+  const title = document.getElementById('detail-title');
+  if (title) {
+    title.textContent = name;
+    title.classList.toggle('is-anonymous', anonymous);
+  }
+
+  const time = request.timestamp.toLocaleTimeString('en-US', { hour12: false });
+  const linked = findLinkedRequest(request);
+
+  const queryBody = request.query
+    ? `<pre class="code code-content" tabindex="0" aria-label="GraphQL query">${formatGraphQL(prettyPrintGraphQL(request.query))}</pre>`
+    : `<p class="code-missing">${escapeHtml(rowState.description)}</p>`;
+
   detailContent.innerHTML = `
-    <div class="detail-section">
-        <div class="detail-label">Operation</div>
-        <div class="detail-value">${escapeHtml(request.operationName)}</div>
-    </div>
-    
-    <div class="detail-section">
-        <div class="detail-label">Type</div>
-        <div class="detail-value">
-            <span class="request-badge ${request.type}">${request.type.toUpperCase()}</span>
-        </div>
-    </div>
-    
-    ${
-      request.hash
-        ? `
-    <div class="detail-section">
-        <div class="detail-label">SHA256 Hash</div>
-        <div class="detail-hash">${escapeHtml(request.hash)}</div>
-    </div>
-    `
-        : ''
-    }
-    
-    <div class="detail-section">
-        <div class="detail-label">URL</div>
-        <div class="detail-value" style="font-family: var(--font-mono); font-size: 11px; word-break: break-all;">${escapeHtml(request.url)}</div>
+    <div class="detail-facts">
+        <span class="state state--${rowState.key}">${rowState.label}</span>
+        ${request.type === 'apq' ? '<span class="detail-fact">APQ request</span>' : ''}
+        <span class="detail-fact">${escapeHtml(time)}</span>
+        ${
+          linked
+            ? `<button type="button" class="link-btn" id="btn-linked-request">${
+                request.type === 'full' ? 'Show hash row' : 'Show retry request'
+              }</button>`
+            : ''
+        }
+        ${variablesJson ? '<a class="link-btn" href="#detail-variables">Variables</a>' : ''}
     </div>
+    ${request.query ? `<p class="detail-note">${escapeHtml(rowState.description)}</p>` : ''}
+
+    <dl class="kv">
+        <dt>Endpoint</dt>
+        <dd class="mono kv-url">${escapeHtml(request.url || '—')}</dd>
+        ${
+          request.hash
+            ? `<dt>Hash</dt>
+        <dd class="mono kv-hash"><span class="detail-hash">${escapeHtml(request.hash)}</span>${copyButton('hash', 'Copy hash')}</dd>`
+            : ''
+        }
+    </dl>
 
     ${
       request.url
-        ? `
-    <div class="detail-section detail-actions">
-        <button type="button" class="btn btn-toolbar" id="btn-copy-curl" aria-label="Copy request as cURL">
-            Copy as cURL
-        </button>
-    </div>
-    `
+        ? `<div class="detail-actions">
+        <button type="button" class="tb-btn" id="btn-copy-curl">Copy as cURL</button>
+    </div>`
         : ''
     }
-    
-    <div class="detail-section">
-        <div class="code-block">
-            <div class="code-header">
-                <span class="code-title">GraphQL Query</span>
-                <button class="btn btn-copy" data-copy="query">Copy</button>
-            </div>
-            <pre class="code-content">${formattedQuery}</pre>
-        </div>
-    </div>
-    
+
+    <details class="code-block code-block--query" open>
+        <summary class="code-header"><h3 class="code-title">Query</h3></summary>
+        ${request.query ? copyButton('query', 'Copy query') : ''}
+        ${queryBody}
+    </details>
+
     ${
       variablesJson
-        ? `
-    <div class="detail-section">
-        <div class="code-block">
-            <div class="code-header">
-                <span class="code-title">Variables</span>
-                <button class="btn btn-copy" data-copy="variables">Copy</button>
-            </div>
-            <pre class="code-content">${escapeHtml(variablesJson)}</pre>
-        </div>
-    </div>
-    `
+        ? `<details class="code-block" id="detail-variables" open>
+        <summary class="code-header"><h3 class="code-title">Variables</h3></summary>
+        ${copyButton('variables', 'Copy variables')}
+        <pre class="code code-content" tabindex="0" aria-label="Variables JSON">${escapeHtml(variablesJson)}</pre>
+    </details>`
         : ''
     }
   `;
@@ -118,7 +125,9 @@ export function renderRequestDetail(requestId) {
     btn.addEventListener('click', () => {
       try {
         const type = btn.dataset.copy;
-        const text = type === 'query' ? request.query : JSON.stringify(request.variables, null, 2);
+        let text = request.query;
+        if (type === 'variables') text = JSON.stringify(request.variables, null, 2);
+        else if (type === 'hash') text = request.hash;
         copyToClipboard(text, btn);
       } catch (e) {
         console.error('Failed to prepare copy content:', e);
@@ -126,6 +135,32 @@ export function renderRequestDetail(requestId) {
     });
   });
 
+  const linkedBtn = detailContent.querySelector('#btn-linked-request');
+  if (linkedBtn && linked) {
+    linkedBtn.addEventListener('click', () => {
+      selectRequest(linked.id);
+      const row = document.querySelector(`.request-item[data-request-id="${linked.id}"]`);
+      if (row) {
+        row.scrollIntoView({ block: 'nearest' });
+        document.querySelectorAll('#request-list .request-item').forEach((item) => {
+          item.setAttribute('tabindex', item === row ? '0' : '-1');
+        });
+        row.focus();
+      }
+    });
+  }
+
+  const variablesLink = detailContent.querySelector('a[href="#detail-variables"]');
+  if (variablesLink) {
+    variablesLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      const section = detailContent.querySelector('#detail-variables');
+      if (!section) return;
+      section.open = true;
+      section.scrollIntoView({ block: 'start' });
+    });
+  }
+
   const curlBtn = detailContent.querySelector('#btn-copy-curl');
   if (curlBtn) {
     curlBtn.addEventListener('click', () => openCurlModal(request));
@@ -133,15 +168,135 @@ export function renderRequestDetail(requestId) {
 }
 
 /**
- * Basic GraphQL syntax highlighting (keywords, types, variables).
+ * The other half of an APQ exchange: for a retry, the hash row it
+ * resolved; for a resolved hash row, the retry that resolved it.
+ * @param {object} request
+ * @returns {object|null}
+ */
+function findLinkedRequest(request) {
+  if (!request.hash) return null;
+  if (request.type === 'full') {
+    return (
+      state.requestHistory.find(
+        (r) => r.type === 'apq' && r.hash === request.hash && r.resolvedBy === request.id
+      ) || null
+    );
+  }
+  if (request.resolvedBy) {
+    return state.requestHistory.find((r) => r.id === request.resolvedBy) || null;
+  }
+  return null;
+}
+
+/**
+ * Pretty-print a single-line GraphQL document (as minified clients send it)
+ * with two-space indentation. Documents that already contain line breaks
+ * are returned unchanged. String literals are copied verbatim.
+ * @param {string} query
+ * @returns {string}
+ */
+export function prettyPrintGraphQL(query) {
+  if (!query || query.includes('\n')) return query;
+
+  const indent = (depth) => '  '.repeat(Math.max(depth, 0));
+  let out = '';
+  let depth = 0;
+  let parens = 0;
+  let i = 0;
+
+  const trimEnd = () => {
+    out = out.replace(/[ \t]+$/, '');
+  };
+
+  while (i < query.length) {
+    const ch = query[i];
+
+    // Copy string literals ("..." and """...""") untouched
+    if (ch === '"') {
+      const block = query.startsWith('"""', i);
+      const end = block ? query.indexOf('"""', i + 3) : findStringEnd(query, i + 1);
+      const stop = end < 0 ? query.length : end + (block ? 3 : 1);
+      out += query.slice(i, stop);
+      i = stop;
+      continue;
+    }
+
+    if (ch === '(') parens++;
+    if (ch === ')') parens = Math.max(parens - 1, 0);
+
+    if (ch === '{' && parens === 0) {
+      trimEnd();
+      depth++;
+      out += ' {\n' + indent(depth);
+      i++;
+      while (query[i] === ' ') i++;
+      continue;
+    }
+
+    if (ch === '}' && parens === 0) {
+      trimEnd();
+      depth--;
+      out = out.replace(/\n\s*$/, '');
+      out += '\n' + indent(depth) + '}';
+      i++;
+      while (query[i] === ' ') i++;
+      if (i < query.length && query[i] !== '}') out += depth > 0 ? '\n' + indent(depth) : '\n\n';
+      continue;
+    }
+
+    // Whitespace between selections becomes a line break; whitespace inside
+    // arguments, after a colon, around "on" / "...", or before "{", "(", "@"
+    // stays a single space.
+    if (ch === ' ' && depth > 0 && parens === 0) {
+      let j = i;
+      while (query[j] === ' ') j++;
+      const next = query[j];
+      const before = out.trimEnd();
+      const keepSpace =
+        next === '{' ||
+        next === '(' ||
+        next === '@' ||
+        next === ':' ||
+        before.endsWith(':') ||
+        before.endsWith('...') ||
+        /\bon$/.test(before) ||
+        query.startsWith('on ', j);
+      out += keepSpace ? ' ' : '\n' + indent(depth);
+      i = j;
+      continue;
+    }
+
+    out += ch;
+    i++;
+  }
+
+  return out.trim();
+}
+
+function findStringEnd(text, from) {
+  for (let i = from; i < text.length; i++) {
+    if (text[i] === '\\') {
+      i++;
+      continue;
+    }
+    if (text[i] === '"') return i;
+  }
+  return -1;
+}
+
+/**
+ * Basic GraphQL syntax highlighting (strings, keywords, types, variables).
  * @param {string} query
  * @returns {string} HTML string with <span> wrappers.
  */
 export function formatGraphQL(query) {
   return escapeHtml(query)
+    .replace(/&quot;(?:[^&]|&(?!quot;))*?&quot;/g, '<span class="string">$&</span>')
     .replace(/\b(query|mutation|subscription|fragment|on)\b/g, '<span class="keyword">$1</span>')
-    .replace(/\b(String|Int|Float|Boolean|ID|!)\b/g, '<span class="type">$1</span>')
-    .replace(/\$(\w+)/g, '<span class="variable">$$1</span>');
+    .replace(/\b(String|Int|Float|Boolean|ID)\b/g, '<span class="type">$1</span>')
+    .replace(/(:\s*\[?)([A-Z]\w*)/g, '$1<span class="type">$2</span>')
+    .replace(/(on<\/span>\s+)([A-Z]\w*)/g, '$1<span class="type">$2</span>')
+    .replace(/\$(\w+)/g, '<span class="variable">$$$1</span>');
 }
 
 /**
@@ -154,9 +309,11 @@ function copyToClipboard(text, button) {
     .writeText(text)
     .then(() => {
       const originalText = button.textContent;
-      button.textContent = 'Copied!';
+      button.textContent = 'Copied';
+      button.classList.add('is-done');
       setTimeout(() => {
         button.textContent = originalText;
+        button.classList.remove('is-done');
       }, 1500);
     })
     .catch((err) => {
@@ -164,20 +321,25 @@ function copyToClipboard(text, button) {
     });
 }
 
+/**
+ * Hide the detail panel and clear the selection.
+ */
+export function closeRequestDetail() {
+  const detailPanel = getElement('detail-panel');
+  if (detailPanel) detailPanel.classList.add('hidden');
+  state.selectedRequestId = null;
+  document.querySelectorAll('.request-item.selected').forEach((el) => {
+    el.classList.remove('selected');
+    el.setAttribute('aria-selected', 'false');
+  });
+}
+
 /**
  * Wire up the close button for the detail panel.
  */
 export function initRequestDetail() {
   const closeDetailBtn = getElement('close-detail');
   if (closeDetailBtn) {
-    closeDetailBtn.addEventListener('click', () => {
-      const detailPanel = getElement('detail-panel');
-      if (detailPanel) detailPanel.classList.add('hidden');
-      state.selectedRequestId = null;
-      document.querySelectorAll('.request-item.selected').forEach((el) => {
-        el.classList.remove('selected');
-        el.setAttribute('aria-selected', 'false');
-      });
-    });
+    closeDetailBtn.addEventListener('click', closeRequestDetail);
   }
 }
diff --git a/js/ui/request-list.js b/js/ui/request-list.js
index 844fc7e..42d0004 100644
--- a/js/ui/request-list.js
+++ b/js/ui/request-list.js
@@ -1,34 +1,69 @@
 /**
- * Intercepted request list: rendering, filtering, and selection triggers.
+ * Intercepted request list: rendering, filtering, selection triggers, and
+ * in-place resolution of hash-only rows when their full-query retry lands.
  * @module ui/request-list
  */
 
-import { getElement, escapeHtml, truncateUrl } from './dom-helpers.js';
+import { getElement, escapeHtml } from './dom-helpers.js';
 import { state, MAX_HISTORY } from './state.js';
-import { selectRequest } from './request-detail.js';
+import { selectRequest, renderRequestDetail } from './request-detail.js';
 import { updateToolbarState } from './toolbar.js';
-
-function prefersReducedMotion() {
-  return (
-    typeof window.matchMedia === 'function' &&
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  );
-}
+import { renderMetrics } from './metrics.js';
+import { endpointKey } from './endpoint-utils.js';
+import { getRequestState, isAnonymousOperation, shortHash } from './request-state.js';
 
 /**
- * Animate the request counter badge with the current history size.
+ * Update the request counter with the current history size.
  */
 export function updateRequestCount() {
   const counter = getElement('interception-counter');
-  if (counter) {
-    counter.textContent = state.requestHistory.length;
-    if (!prefersReducedMotion()) {
-      counter.style.transform = 'scale(1.2)';
-      setTimeout(() => {
-        counter.style.transform = 'scale(1)';
-      }, 200);
-    }
+  if (counter) counter.textContent = state.requestHistory.length;
+}
+
+/**
+ * When a full-query request carries a hash, fill in the most recent
+ * hash-only row with the same hash: that row's hash is now resolved.
+ * @param {object} fullRequest
+ * @returns {object|null} The resolved APQ request, if any.
+ */
+function resolvePendingRow(fullRequest) {
+  if (fullRequest.type !== 'full' || !fullRequest.hash || !fullRequest.query) return null;
+
+  const pending = state.requestHistory.find(
+    (req) => req.type === 'apq' && !req.query && req.hash === fullRequest.hash
+  );
+  if (!pending) return null;
+
+  pending.query = fullRequest.query;
+  if (!pending.variables) pending.variables = fullRequest.variables;
+  if (
+    isAnonymousOperation(pending.operationName) &&
+    !isAnonymousOperation(fullRequest.operationName)
+  ) {
+    pending.operationName = fullRequest.operationName;
   }
+  pending.resolvedBy = fullRequest.id;
+  return pending;
+}
+
+/**
+ * Re-render one row in place and play the "updated" flash on it.
+ * @param {object} request
+ */
+function refreshRow(request) {
+  const existing = document.querySelector(`.request-item[data-request-id="${request.id}"]`);
+  if (!existing) return;
+
+  const replacement = createRequestItem(request);
+  replacement.setAttribute('tabindex', existing.getAttribute('tabindex') || '-1');
+  const hadFocus = document.activeElement === existing;
+  existing.replaceWith(replacement);
+  if (hadFocus) replacement.focus();
+
+  replacement.classList.add('is-updated');
+  replacement.addEventListener('animationend', () => replacement.classList.remove('is-updated'), {
+    once: true,
+  });
 }
 
 /**
@@ -49,24 +84,53 @@ export function addRequest(requestData) {
     variables: requestData.variables || null,
     responseTime: requestData.responseTime || null,
     headers: requestData.headers || [],
+    capturedPassive: Boolean(state.passiveMode),
   };
 
+  const resolved = resolvePendingRow(request);
+
   state.requestHistory.unshift(request);
   if (state.requestHistory.length > MAX_HISTORY) {
     state.requestHistory.length = MAX_HISTORY;
   }
   updateRequestCount();
   updateToolbarState();
+  renderMetrics();
 
   // Incremental update: prepend the new item if it passes the current filter,
-  // instead of clearing and re-rendering the entire list.
-  if (requestPassesFilter(request)) {
+  // instead of clearing and re-rendering the entire list. When endpoint
+  // grouping is active the item belongs under its group header, so fall
+  // back to a full re-render.
+  if (isGroupingActive()) {
+    renderRequestList();
+  } else if (requestPassesFilter(request)) {
     prependRequestItem(request);
   }
 
+  if (resolved) {
+    refreshRow(resolved);
+    if (state.selectedRequestId === resolved.id) renderRequestDetail(resolved.id);
+  }
+
   return request;
 }
 
+/**
+ * Endpoint group headers appear when more than one endpoint has traffic
+ * and no endpoint filter is active.
+ * @returns {boolean}
+ */
+function isGroupingActive() {
+  if (state.endpointFilter) return false;
+  const keys = new Set();
+  for (const req of state.requestHistory) {
+    const key = endpointKey(req.url);
+    if (key) keys.add(key);
+    if (keys.size > 1) return true;
+  }
+  return false;
+}
+
 /**
  * Check if a request passes the active type and text filters.
  * @param {object} req
@@ -76,6 +140,9 @@ function requestPassesFilter(req) {
   if (state.activeFilter !== 'all' && req.type !== state.activeFilter) {
     return false;
   }
+  if (state.endpointFilter && endpointKey(req.url) !== state.endpointFilter) {
+    return false;
+  }
   if (state.filterText) {
     const searchText = state.filterText.toLowerCase();
     return (
@@ -86,6 +153,22 @@ function requestPassesFilter(req) {
   return true;
 }
 
+/**
+ * Show the empty state, worded for "nothing captured" or "nothing matches".
+ */
+function showEmptyState() {
+  const emptyState = getElement('empty-state');
+  if (!emptyState) return;
+  emptyState.style.display = 'flex';
+
+  const filtered = state.requestHistory.length > 0;
+  emptyState.classList.toggle('is-filtered', filtered);
+  const title = document.getElementById('empty-title');
+  if (title) {
+    title.textContent = filtered ? 'No operations match the filter' : 'No operations captured yet';
+  }
+}
+
 /**
  * Prepend a single request item to the top of the list container.
  * Hides the empty state and trims overflow DOM nodes if history is capped.
@@ -131,18 +214,52 @@ export function renderRequestList() {
   const emptyState = getElement('empty-state');
   if (!listContainer) return;
 
+  renderMetrics();
+
   const filtered = getFilteredRequests();
 
-  // Clear existing request items (preserve the empty-state element)
-  listContainer.querySelectorAll('.request-item').forEach((el) => el.remove());
+  // Clear existing request items and group headers (preserve empty-state)
+  listContainer
+    .querySelectorAll('.request-item, .request-group-header')
+    .forEach((el) => el.remove());
 
   if (filtered.length === 0) {
-    if (emptyState) emptyState.style.display = 'flex';
+    showEmptyState();
     return;
   }
 
   if (emptyState) emptyState.style.display = 'none';
 
+  if (isGroupingActive()) {
+    // Partition by endpoint (first-seen order); recency order within groups
+    const groups = new Map();
+    for (const request of filtered) {
+      const key = endpointKey(request.url) || request.url;
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key).push(request);
+    }
+    for (const [key, requests] of groups) {
+      const header = document.createElement('div');
+      header.className = 'request-group-header';
+      header.setAttribute('role', 'presentation');
+      header.title = key;
+
+      const label = document.createElement('span');
+      label.className = 'group-label';
+      label.textContent = key.replace(/^https?:\/\//, '');
+      const count = document.createElement('span');
+      count.className = 'group-count';
+      count.textContent = requests.length === 1 ? '1 request' : `${requests.length} requests`;
+      header.append(label, count);
+
+      listContainer.appendChild(header);
+      requests.forEach((request) => {
+        listContainer.appendChild(createRequestItem(request));
+      });
+    }
+    return;
+  }
+
   filtered.forEach((request) => {
     const item = createRequestItem(request);
     listContainer.appendChild(item);
@@ -150,7 +267,7 @@ export function renderRequestList() {
 }
 
 /**
- * Create a single request list item DOM element.
+ * Create a single request list row.
  * @param {object} request
  * @returns {HTMLElement}
  */
@@ -165,6 +282,7 @@ function createRequestItem(request) {
   }
   item.setAttribute('aria-selected', String(isSelected));
   item.dataset.requestId = request.id;
+  if (request.url) item.title = request.url;
 
   const timeStr = request.timestamp.toLocaleTimeString('en-US', {
     hour12: false,
@@ -173,15 +291,15 @@ function createRequestItem(request) {
     second: '2-digit',
   });
 
+  const rowState = getRequestState(request);
+  const anonymous = isAnonymousOperation(request.operationName);
+  const name = anonymous ? '(anonymous)' : request.operationName;
+
   item.innerHTML = `
-    <div class="request-info">
-        <div class="request-operation">${escapeHtml(request.operationName)}</div>
-        <div class="request-url">${escapeHtml(truncateUrl(request.url))}</div>
-    </div>
-    <div class="request-meta">
-        <span class="request-time">${timeStr}</span>
-        <span class="request-badge ${request.type}">${request.type.toUpperCase()}</span>
-    </div>
+    <span class="col-name request-operation${anonymous ? ' is-anonymous' : ''}">${escapeHtml(name)}</span>
+    <span class="col-state"><span class="state state--${rowState.key}">${rowState.label}</span></span>
+    <span class="col-hash request-hash">${escapeHtml(shortHash(request.hash))}</span>
+    <span class="col-time request-time">${timeStr}</span>
   `;
 
   item.addEventListener('click', () => selectRequest(request.id));
@@ -201,14 +319,14 @@ export function initRequestList() {
     });
   }
 
-  document.querySelectorAll('.chip').forEach((chip) => {
+  document.querySelectorAll('.filter-chips .chip, .chip[data-filter]').forEach((chip) => {
     chip.addEventListener('click', () => {
-      document.querySelectorAll('.chip').forEach((c) => {
-        c.classList.remove('active');
-        c.setAttribute('aria-checked', 'false');
+      document.querySelectorAll('.chip[data-filter]').forEach((c) => {
+        const active = c === chip;
+        c.classList.toggle('active', active);
+        c.setAttribute('aria-checked', String(active));
+        c.setAttribute('tabindex', active ? '0' : '-1');
       });
-      chip.classList.add('active');
-      chip.setAttribute('aria-checked', 'true');
       state.activeFilter = chip.dataset.filter;
       renderRequestList();
     });
diff --git a/js/ui/request-state.js b/js/ui/request-state.js
new file mode 100644
index 0000000..0136c6a
--- /dev/null
+++ b/js/ui/request-state.js
@@ -0,0 +1,74 @@
+/**
+ * What a captured request means to the user: resolved, waiting for the
+ * APQ retry, unknown to the registry, or a plain full-query request.
+ * Shared by the request list and the detail panel so both use the same
+ * words.
+ * @module ui/request-state
+ */
+
+import { DEFAULT_OPERATION_NAME } from '../shared/constants.js';
+
+/** Placeholder names the worker and panel use when a payload has none. */
+const ANONYMOUS_NAMES = new Set([DEFAULT_OPERATION_NAME, 'Unknown Query', 'Unknown', '']);
+
+/**
+ * @param {string} name
+ * @returns {boolean} True when the operation carried no name of its own.
+ */
+export function isAnonymousOperation(name) {
+  return ANONYMOUS_NAMES.has(name || '');
+}
+
+/**
+ * Classify a request for display.
+ * @param {{type: string, query: string, hash: string, capturedPassive?: boolean}} request
+ * @returns {{key: 'resolved'|'pending'|'unknown'|'retry'|'full', label: string, description: string}}
+ */
+export function getRequestState(request) {
+  if (request.type === 'full') {
+    return request.hash
+      ? {
+          key: 'retry',
+          label: 'APQ retry',
+          description:
+            'Apollo re-sent the operation with its full query after the hash was rejected. The matching hash row is now resolved.',
+        }
+      : {
+          key: 'full',
+          label: 'Full query',
+          description: 'Sent the query text directly; no persisted-query hash.',
+        };
+  }
+  if (request.query) {
+    return {
+      key: 'resolved',
+      label: 'Resolved',
+      description: request.capturedPassive
+        ? 'Hash resolved from the local registry. The request was not modified.'
+        : 'Hash swapped; Apollo retried with the full query.',
+    };
+  }
+  if (request.capturedPassive) {
+    return {
+      key: 'unknown',
+      label: 'Not in registry',
+      description:
+        'Passive mode has not seen this hash yet. Capture it once with passive mode off and it will resolve from then on.',
+    };
+  }
+  return {
+    key: 'pending',
+    label: 'Awaiting retry',
+    description:
+      'Hash swapped; waiting for Apollo to retry with the full query. If nothing arrives, the server may not answer PersistedQueryNotFound.',
+  };
+}
+
+/**
+ * First characters of a SHA-256 hash, enough to tell rows apart.
+ * @param {string} hash
+ * @returns {string}
+ */
+export function shortHash(hash) {
+  return hash ? hash.slice(0, 8) : '';
+}
diff --git a/js/ui/resize.js b/js/ui/resize.js
index 358285d..2f6ced5 100644
--- a/js/ui/resize.js
+++ b/js/ui/resize.js
@@ -1,7 +1,7 @@
 /**
  * Draggable + keyboard-resizable panel widths with persistence.
- * Wires the separator handles between sidebar / request panel,
- * request panel / detail panel, and schema type list / SDL view.
+ * Wires the separator handles between the request list / detail panel
+ * and the schema type list / SDL view.
  * @module ui/resize
  */
 
@@ -9,14 +9,13 @@ import { getElement } from './dom-helpers.js';
 import { PANEL_WIDTHS_STORAGE_KEY } from '../shared/constants.js';
 
 const LIMITS = {
-  sidebar: { min: 150, max: 420 },
-  detail: { min: 240, max: 560 },
+  detail: { min: 280, max: 1000 },
   schemaList: { min: 140, max: 480 },
 };
 
 const KEYBOARD_STEP = 16;
 
-let widths = { sidebar: null, detail: null };
+let widths = { detail: null, schemaList: null };
 let saveTimer = null;
 
 function persistWidths() {
@@ -46,7 +45,7 @@ function applyWidth(panel, key, value) {
  * Wire one resize handle.
  * @param {HTMLElement} handle - The separator element.
  * @param {HTMLElement} panel - The panel whose width changes.
- * @param {'sidebar'|'detail'|'schemaList'} key - Storage key / limits entry.
+ * @param {'detail'|'schemaList'} key - Storage key / limits entry.
  * @param {1|-1} direction - +1 if dragging right grows the panel.
  */
 function wireHandle(handle, panel, key, direction) {
@@ -102,16 +101,11 @@ function wireHandle(handle, panel, key, direction) {
  * Initialise resize handles and restore persisted widths.
  */
 export function initResize() {
-  const sidebar = getElement('patterns-sidebar');
   const detailPanel = getElement('detail-panel');
-  const leftHandle = getElement('resize-handle-left');
   const rightHandle = getElement('resize-handle-right');
   const schemaList = getElement('schema-type-list');
   const schemaHandle = getElement('resize-handle-schema');
 
-  if (sidebar && leftHandle) {
-    wireHandle(leftHandle, sidebar, 'sidebar', 1);
-  }
   if (detailPanel && rightHandle) {
     wireHandle(rightHandle, detailPanel, 'detail', -1);
   }
@@ -124,9 +118,6 @@ export function initResize() {
     const stored = result[PANEL_WIDTHS_STORAGE_KEY];
     if (!stored || typeof stored !== 'object') return;
 
-    if (typeof stored.sidebar === 'number' && sidebar) {
-      applyWidth(sidebar, 'sidebar', stored.sidebar);
-    }
     if (typeof stored.detail === 'number' && detailPanel) {
       applyWidth(detailPanel, 'detail', stored.detail);
     }
diff --git a/js/ui/schema-controls.js b/js/ui/schema-controls.js
index c66ec61..83cd35e 100644
--- a/js/ui/schema-controls.js
+++ b/js/ui/schema-controls.js
@@ -1,5 +1,5 @@
 /**
- * Schema sidebar section: Load Schema button with endpoint auto-detection,
+ * Schema toolbar: Load Schema button with endpoint auto-detection,
  * progress display, and per-endpoint caching in chrome.storage.local.
  * The service worker does the network work; this module converts the
  * introspection result to SDL and feeds the viewer.
@@ -22,7 +22,14 @@ function setStatus(text, isError = false) {
   const statusEl = getElement('schema-status');
   if (!statusEl) return;
   statusEl.textContent = text;
-  statusEl.style.color = isError ? 'var(--color-error)' : '';
+  statusEl.classList.toggle('is-error', isError);
+}
+
+function setSkeletonVisible(visible) {
+  const skeleton = getElement('schema-skeleton');
+  if (skeleton) skeleton.classList.toggle('hidden', !visible);
+  const empty = document.getElementById('schema-empty');
+  if (empty) empty.classList.toggle('hidden', visible || isSchemaLoaded());
 }
 
 /**
@@ -42,8 +49,9 @@ function updateClearButton() {
 
 function applySchema(sdl, meta) {
   setSchema(sdl, meta);
-  const when = meta.fetchedAt ? new Date(meta.fetchedAt).toLocaleString() : '';
-  setStatus(`${meta.typeCount} types loaded${when ? ` (${when})` : ''}`);
+  // The explorer's meta line shows count, endpoint and time; keep the
+  // status line for progress and errors only.
+  setStatus('');
   updateClearButton();
 }
 
@@ -74,11 +82,14 @@ function handleLoadClick() {
 
   isLoading = true;
   updateClearButton();
+  setSkeletonVisible(true);
   if (button) {
     button.disabled = true;
-    button.textContent = 'Loading...';
+    button.textContent = 'Loading…';
   }
-  setStatus(url ? `Loading schema from ${url}...` : 'Detecting GraphQL endpoint...');
+  setStatus(
+    url ? `Loading schema from ${url}…` : 'Looking for a GraphQL endpoint in observed traffic…'
+  );
 
   const message = { loadSchema: true, tabId: inspectedTabId };
   if (url) message.url = url;
@@ -86,9 +97,10 @@ function handleLoadClick() {
   chrome.runtime.sendMessage(message, (response) => {
     isLoading = false;
     updateClearButton();
+    setSkeletonVisible(false);
     if (button) {
       button.disabled = false;
-      button.textContent = 'Load Schema';
+      button.textContent = 'Load schema';
     }
 
     if (chrome.runtime.lastError) {
diff --git a/js/ui/schema-viewer.js b/js/ui/schema-viewer.js
index 48b30bf..5611273 100644
--- a/js/ui/schema-viewer.js
+++ b/js/ui/schema-viewer.js
@@ -171,17 +171,15 @@ export function showMainTab(tab) {
   const schemaTab = getElement('tab-schema');
   const requestsContent = getElement('requests-content');
   const schemaContent = getElement('schema-content');
-  const requestsToolbar = document.getElementById('requests-toolbar');
   if (!requestsTab || !schemaTab || !requestsContent || !schemaContent) return;
 
   const showSchema = tab === 'schema';
   requestsTab.setAttribute('aria-selected', String(!showSchema));
   schemaTab.setAttribute('aria-selected', String(showSchema));
+  requestsTab.setAttribute('tabindex', showSchema ? '-1' : '0');
+  schemaTab.setAttribute('tabindex', showSchema ? '0' : '-1');
   requestsContent.classList.toggle('hidden', showSchema);
   schemaContent.classList.toggle('hidden', !showSchema);
-  if (requestsToolbar) {
-    requestsToolbar.classList.toggle('hidden', showSchema);
-  }
 }
 
 /** @deprecated Use showMainTab('schema') */
@@ -192,6 +190,8 @@ export function showDetailTab(tab) {
 function setExplorerVisible(visible) {
   const explorer = getElement('schema-explorer');
   if (explorer) explorer.classList.toggle('hidden', !visible);
+  const empty = document.getElementById('schema-empty');
+  if (empty) empty.classList.toggle('hidden', visible);
 }
 
 function getSearchValue() {
@@ -303,7 +303,7 @@ export function setSchema(sdl, meta) {
   if (metaEl) {
     if (meta) {
       const when = meta.fetchedAt ? new Date(meta.fetchedAt).toLocaleString() : '';
-      metaEl.textContent = `${meta.typeCount} types — ${meta.endpoint}${when ? ` — ${when}` : ''}`;
+      metaEl.textContent = `${meta.typeCount} types · ${meta.endpoint}${when ? ` · loaded ${when}` : ''}`;
     } else if (!sdl) {
       metaEl.textContent = '';
     }
diff --git a/js/ui/sdl-highlighter.js b/js/ui/sdl-highlighter.js
index d846413..0a75157 100644
--- a/js/ui/sdl-highlighter.js
+++ b/js/ui/sdl-highlighter.js
@@ -1,94 +1,246 @@
 /**
- * Regex-based GraphQL SDL syntax highlighting for the schema viewer.
- * Uses placeholder tokens so nested replacements stay well-formed.
+ * GraphQL SDL syntax highlighting for the schema viewer.
+ * A single-pass lexer classifies each token by its grammatical position
+ * (definition name, field, argument, type reference, default value, …), so
+ * nothing is highlighted twice and comments/strings are never re-scanned.
  * @module ui/sdl-highlighter
  */
 
 import { escapeHtml } from './dom-helpers.js';
 
-const KEYWORDS = new Set([
-  'type',
-  'input',
-  'enum',
-  'interface',
-  'union',
-  'scalar',
-  'schema',
-  'directive',
-  'implements',
-  'extend',
-  'on',
-  'repeatable',
-]);
-
-const BUILTINS = new Set(['String', 'Int', 'Float', 'Boolean', 'ID']);
+/** @param {string} list Space-separated words. */
+const words = (list) => new Set(list.split(' '));
+
+const KEYWORDS = words(
+  'type input enum interface union scalar schema directive implements extend on repeatable'
+);
+
+/** Keywords that open a definition and are followed by its name. */
+const DEFINITION_KEYWORDS = words('type input enum interface union scalar');
+
+const BUILTINS = words('String Int Float Boolean ID');
+
+const LITERALS = words('true false null');
+
+/** One capture group per token kind, in KINDS order; the group that matched names the kind. */
+const TOKEN =
+  /(\s+)|(#.*)|("""(?:\\"""|[\s\S])*?"""|"(?:\\.|[^"\\\n\r])*"?)|(@\w+)|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|([_A-Za-z]\w*)|([!|&=:[\](){},])|([\s\S])/g;
+const KINDS = 'space comment string directive number name punct other'.split(' ');
+
+/** Kinds whose class is the kind itself, whatever the grammatical position. */
+const FIXED_KINDS = words('comment string directive number');
+
+/**
+ * @typedef {{ kind: string, text: string }} Lexeme
+ */
+
+/**
+ * @param {string} text
+ * @returns {Lexeme[]}
+ */
+function lex(text) {
+  return Array.from(text.matchAll(TOKEN), (match) => ({
+    kind: KINDS[match.findIndex((group, i) => i > 0 && group !== undefined) - 1],
+    text: match[0],
+  }));
+}
+
+/**
+ * @param {Lexeme[]} tokens
+ * @param {number} index
+ * @returns {Lexeme | undefined} The next token that is not whitespace or a comment.
+ */
+function nextSignificant(tokens, index) {
+  for (let i = index + 1; i < tokens.length; i++) {
+    if (tokens[i].kind !== 'space' && tokens[i].kind !== 'comment') return tokens[i];
+  }
+  return undefined;
+}
 
 /**
  * @param {string} text
- * @param {string} className
- * @param {{ key: string, html: string }[]} tokens
- * @param {{ value: number }} id
+ * @param {string | null} className
  * @returns {string}
  */
-function tokenize(text, className, tokens, id) {
-  const key = `\uE000${id.value++}\uE001`;
-  tokens.push({ key, html: `<span class="${className}">${text}</span>` });
-  return key;
+function wrap(text, className) {
+  const escaped = escapeHtml(text);
+  return className ? `<span class="${className}">${escaped}</span>` : escaped;
 }
 
 /**
  * Highlight a single SDL definition for display in the schema viewer.
  * @param {string} text
- * @returns {string}
+ * @returns {string} HTML string with <span> wrappers.
  */
 export function highlightSDL(text) {
   if (!text) return '';
 
-  /** @type {{ key: string, html: string }[]} */
-  const tokens = [];
-  const id = { value: 0 };
-
-  /** @param {string} match @param {string} className */
-  const stash = (match, className) => tokenize(match, className, tokens, id);
-
-  let s = escapeHtml(text);
-
-  s = s.replace(/"""[\s\S]*?"""/g, (match) => stash(match, 'string'));
-  s = s.replace(/"(?:\\.|[^"\\])*"/g, (match) => stash(match, 'string'));
-  s = s.replace(/^([ \t]*#.*)$/gm, (match) => stash(match, 'comment'));
-  s = s.replace(/@[A-Za-z_]\w*/g, (match) => stash(match, 'directive'));
-
-  s = s.replace(/^(\s+)([_A-Za-z]\w*)(\s*:)/gm, (line, indent, name, colon) => {
-    if (KEYWORDS.has(name)) return line;
-    return `${indent}${tokenize(name, 'field', tokens, id)}${colon}`;
-  });
-
-  s = s.replace(/^(\s+)([A-Z][A-Z0-9_]*)(\s*,?\s*)$/gm, (line, indent, name, tail) => {
-    return `${indent}${tokenize(name, 'enum-value', tokens, id)}${tail}`;
-  });
-
-  s = s.replace(/\b(String|Int|Float|Boolean|ID)\b/g, (match) => stash(match, 'builtin'));
-
-  s = s.replace(
-    /\b(type|input|enum|interface|union|scalar|schema|directive|implements|extend|on|repeatable)\b/g,
-    (match) => stash(match, 'keyword')
-  );
-
-  s = s.replace(/\b([A-Z][a-z][A-Za-z0-9_]*)\b/g, (match) => stash(match, 'type-name'));
-
-  s = s.replace(/\b([A-Z][A-Z0-9_]+)\b/g, (match) => {
-    if (BUILTINS.has(match)) return match;
-    return stash(match, 'enum-value');
-  });
-
-  s = s.replace(/!/g, () => tokenize('!', 'punct', tokens, id));
-  s = s.replace(/(\s)\|(\s)/g, (_, before, after) => {
-    return `${before}${tokenize('|', 'punct', tokens, id)}${after}`;
-  });
+  const tokens = lex(text);
+  let html = '';
+
+  /** Keyword of the definition currently being read (top level). */
+  let definition = '';
+  /** Open `{` blocks; true when the block is a value (object literal), not a body. */
+  const braces = [];
+  /** Open `(` groups; true when they hold directive arguments. */
+  const parens = [];
+  /** Nesting of `[` / `{` inside a value, so commas inside lists don't end it. */
+  let valueDepth = 0;
+  let inValue = false;
+  /** Set after `:` in a field or argument; the next name is a type reference. */
+  let expectType = false;
+  /** Set after a definition keyword, `implements`, `&`, or a union's `=` / `|`. */
+  let expectTypeName = false;
+  /** After `on` in a directive definition: names are locations. */
+  let inLocations = false;
+  /** Whether the last `@name` was a directive usage rather than a definition's name. */
+  let directiveIsUsage = false;
+  /** @type {Lexeme | undefined} */
+  let prev;
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    const { kind } = token;
+    let className = FIXED_KINDS.has(kind) ? kind : null;
+
+    if (kind === 'space') {
+      if (inValue && valueDepth === 0 && token.text.includes('\n')) inValue = false;
+    } else if (kind === 'directive') {
+      directiveIsUsage = prev?.text !== 'directive';
+    } else if (kind === 'punct') {
+      className = handlePunct(token.text);
+    } else if (kind === 'name') {
+      className = classifyName(token.text, i);
+    }
+
+    html += wrap(token.text, className);
+    if (kind !== 'space' && kind !== 'comment') prev = token;
+  }
 
-  for (const { key, html } of tokens) {
-    s = s.split(key).join(html);
+  return html;
+
+  /**
+   * Update parser state for a punctuator and pick its class.
+   * @param {string} p
+   * @returns {string | null}
+   */
+  function handlePunct(p) {
+    switch (p) {
+      case '{':
+        if (inValue) {
+          valueDepth++;
+          braces.push(true);
+        } else {
+          braces.push(false);
+        }
+        expectTypeName = false;
+        return null;
+      case '}':
+        if (braces.pop() && valueDepth > 0) valueDepth--;
+        if (braces.length === 0) definition = '';
+        return null;
+      case '(':
+        parens.push(prev?.kind === 'directive' && directiveIsUsage);
+        expectTypeName = false;
+        return null;
+      case ')':
+        parens.pop();
+        inValue = false;
+        valueDepth = 0;
+        expectType = false;
+        return null;
+      case '[':
+        if (inValue) valueDepth++;
+        return null;
+      case ']':
+        if (inValue && valueDepth > 0) valueDepth--;
+        return null;
+      case ':':
+        if (parens.at(-1) || inValue) {
+          inValue = true;
+        } else {
+          expectType = true;
+        }
+        return null;
+      case '=':
+        if (definition === 'union' && braces.length === 0 && parens.length === 0) {
+          expectTypeName = true;
+        } else {
+          inValue = true;
+          valueDepth = 0;
+          expectType = false;
+        }
+        return 'punct';
+      case '&':
+        expectTypeName = true;
+        return 'punct';
+      case '|':
+        if (!inLocations) expectTypeName = true;
+        return 'punct';
+      case ',':
+        if (inValue && valueDepth === 0) inValue = false;
+        expectType = false;
+        return null;
+      case '!':
+        return 'punct';
+      default:
+        return null;
+    }
   }
 
-  return s;
+  /**
+   * Classify a name token by its grammatical position.
+   * @param {string} name
+   * @param {number} index
+   * @returns {string | null}
+   */
+  function classifyName(name, index) {
+    const next = nextSignificant(tokens, index);
+
+    if (inValue) {
+      if (LITERALS.has(name)) return 'keyword';
+      // Object-literal keys inside a default value.
+      if (next?.text === ':') return 'field';
+      return 'enum-value';
+    }
+
+    if (expectType) {
+      expectType = false;
+      return BUILTINS.has(name) ? 'builtin' : 'type-name';
+    }
+
+    if (parens.length > 0) {
+      return next?.text === ':' ? 'field' : null;
+    }
+
+    if (braces.length > 0) {
+      if (next?.text === ':' || next?.text === '(') return 'field';
+      if (definition === 'enum') return 'enum-value';
+      return null;
+    }
+
+    // Top level from here on.
+    if (KEYWORDS.has(name) && !expectTypeName) {
+      if (name === 'extend') return 'keyword';
+      if (DEFINITION_KEYWORDS.has(name) || name === 'schema' || name === 'directive') {
+        definition = name;
+        inLocations = false;
+        expectTypeName = DEFINITION_KEYWORDS.has(name);
+      } else if (name === 'implements') {
+        expectTypeName = true;
+      } else if (name === 'on' && definition === 'directive') {
+        inLocations = true;
+      }
+      return 'keyword';
+    }
+
+    if (inLocations) return 'enum-value';
+
+    if (expectTypeName) {
+      expectTypeName = false;
+      return BUILTINS.has(name) ? 'builtin' : 'type-name';
+    }
+
+    return null;
+  }
 }
diff --git a/js/ui/session.js b/js/ui/session.js
new file mode 100644
index 0000000..a82e065
--- /dev/null
+++ b/js/ui/session.js
@@ -0,0 +1,162 @@
+/**
+ * Session controls: the patterns pane toggle and its summary, the
+ * infobar that says whether traffic is being rewritten (or resolved
+ * passively), and the one-time note explaining what Start does.
+ * @module ui/session
+ */
+
+import { getPatternsFromForm } from './dom-helpers.js';
+import { state } from './state.js';
+import { FIRST_RUN_NOTE_STORAGE_KEY } from '../shared/constants.js';
+
+/** Set once the user opens or closes the pane; blocks programmatic defaults. */
+let userToggledPane = false;
+
+/** Whether the first-run note has been dismissed (assume yes until storage answers). */
+let noteSeen = true;
+
+/**
+ * Open or close the patterns pane.
+ * @param {boolean} open
+ * @param {{user?: boolean}} [options] - `user: true` for a user action;
+ *   programmatic calls are ignored once the user has chosen.
+ */
+export function setPatternsPaneOpen(open, { user = false } = {}) {
+  if (user) userToggledPane = true;
+  else if (userToggledPane) return;
+
+  const pane = document.getElementById('patterns-pane');
+  const toggle = document.getElementById('btn-toggle-patterns');
+  if (!pane || !toggle) return;
+
+  pane.hidden = !open;
+  toggle.setAttribute('aria-expanded', String(open));
+}
+
+/**
+ * Show the configured patterns in the toolbar toggle ("*graphql* +1").
+ */
+export function renderPatternsSummary() {
+  const summary = document.getElementById('patterns-summary');
+  const toggle = document.getElementById('btn-toggle-patterns');
+  if (!summary) return;
+
+  const patterns = getPatternsFromForm();
+  summary.textContent = patterns.length
+    ? patterns[0] + (patterns.length > 1 ? ` +${patterns.length - 1}` : '')
+    : 'none';
+  if (toggle) toggle.classList.toggle('is-empty', patterns.length === 0);
+}
+
+function setText(el, parts) {
+  el.textContent = '';
+  for (const part of parts) {
+    if (typeof part === 'string') {
+      el.append(part);
+    } else {
+      const code = document.createElement('code');
+      code.textContent = part.code;
+      el.append(code);
+    }
+  }
+}
+
+/**
+ * Render the infobar for the current session state: live interception
+ * (yellow, with Stop), passive mode (blue), or nothing.
+ */
+export function renderSessionBar() {
+  const bar = document.getElementById('live-bar');
+  const text = document.getElementById('live-text');
+  const note = document.getElementById('live-note');
+  const dismiss = document.getElementById('live-note-dismiss');
+  const stop = document.getElementById('live-stop');
+  if (!bar || !text) return;
+
+  bar.classList.remove('is-live', 'is-passive');
+
+  if (state.isDebuggerActive) {
+    const patterns = getPatternsFromForm();
+    const parts = ['Intercepting requests matching '];
+    patterns.forEach((pattern, index) => {
+      if (index > 0) parts.push(', ');
+      parts.push({ code: pattern });
+    });
+    if (patterns.length === 0) parts.push('the saved patterns');
+    setText(text, parts);
+
+    bar.classList.add('is-live');
+    bar.classList.remove('hidden');
+    if (note) note.classList.toggle('hidden', noteSeen);
+    if (dismiss) dismiss.classList.toggle('hidden', noteSeen);
+    if (stop) stop.classList.remove('hidden');
+    return;
+  }
+
+  if (state.passiveMode) {
+    const known = state.registrySize || 0;
+    setText(text, [
+      `Passive mode: resolving hashes from the registry (${known} known). Requests are not modified.`,
+    ]);
+    bar.classList.add('is-passive');
+    bar.classList.remove('hidden');
+    if (note) note.classList.add('hidden');
+    if (dismiss) dismiss.classList.add('hidden');
+    if (stop) stop.classList.add('hidden');
+    return;
+  }
+
+  bar.classList.add('hidden');
+}
+
+/**
+ * Wire the patterns toggle, the infobar buttons, and load the
+ * first-run note state.
+ */
+export function initSession() {
+  const toggle = document.getElementById('btn-toggle-patterns');
+  if (toggle) {
+    toggle.addEventListener('click', () => {
+      const pane = document.getElementById('patterns-pane');
+      const open = pane ? pane.hidden : false;
+      setPatternsPaneOpen(open, { user: true });
+      if (open) {
+        const firstInput = document.querySelector('#patterns-pane .urlPattern');
+        if (firstInput) firstInput.focus();
+      }
+    });
+  }
+
+  const form = document.getElementById('myForm');
+  if (form) form.addEventListener('input', renderPatternsSummary);
+
+  const stop = document.getElementById('live-stop');
+  if (stop) {
+    stop.addEventListener('click', () => {
+      const recordButton = document.getElementById('form-submit');
+      if (recordButton && state.isDebuggerActive) recordButton.click();
+    });
+  }
+
+  const dismiss = document.getElementById('live-note-dismiss');
+  if (dismiss) {
+    dismiss.addEventListener('click', () => {
+      noteSeen = true;
+      renderSessionBar();
+      chrome.storage.local.set({ [FIRST_RUN_NOTE_STORAGE_KEY]: true }, () => {
+        if (chrome.runtime.lastError) {
+          console.warn('Failed to save first-run note state:', chrome.runtime.lastError);
+        }
+      });
+    });
+  }
+
+  chrome.storage.local.get([FIRST_RUN_NOTE_STORAGE_KEY], (result) => {
+    if (chrome.runtime.lastError) return;
+    noteSeen = Boolean(result && result[FIRST_RUN_NOTE_STORAGE_KEY]);
+    renderSessionBar();
+  });
+
+  renderPatternsSummary();
+  renderSessionBar();
+}
diff --git a/js/ui/state.js b/js/ui/state.js
index aba4718..bb2b5e1 100644
--- a/js/ui/state.js
+++ b/js/ui/state.js
@@ -21,9 +21,11 @@ export const inspectedTabId = chrome.devtools.inspectedWindow.tabId;
  *   selectedRequestId: number|null,
  *   activeFilter: string,
  *   filterText: string,
+ *   endpointFilter: string,
  *   requestHistory: object[],
  *   requestIdCounter: number,
- *   statusBannerTimeout: number|null
+ *   passiveMode: boolean,
+ *   registrySize: number
  * }}
  */
 export const state = {
@@ -33,7 +35,9 @@ export const state = {
   selectedRequestId: null,
   activeFilter: 'all',
   filterText: '',
+  endpointFilter: '',
   requestHistory: [],
   requestIdCounter: 0,
-  statusBannerTimeout: null,
+  passiveMode: false,
+  registrySize: 0,
 };
diff --git a/js/ui/status.js b/js/ui/status.js
index 793b942..b40978e 100644
--- a/js/ui/status.js
+++ b/js/ui/status.js
@@ -1,15 +1,25 @@
 /**
- * Status badge and banner management for the DevTools panel.
+ * Session status indicator and toast notifications for the DevTools panel.
+ * showStatusBanner / hideStatusBanner render toasts into the
+ * #status-banner stack.
  * @module ui/status
  */
 
 import { getElement } from './dom-helpers.js';
-import { state } from './state.js';
+
+/** Maximum toasts kept on screen; oldest are dropped first. */
+const TOAST_LIMIT = 4;
+
+/** Auto-dismiss delay for transient toasts. */
+const TOAST_DISMISS_MS = 5000;
+
+const CLOSE_ICON =
+  '<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><line x1="7" y1="7" x2="17" y2="17"/><line x1="17" y1="7" x2="7" y2="17"/></svg>';
 
 /**
- * Update the status badge in the header bar.
- * @param {string} text - Status text to display.
- * @param {'default'|'active'|'success'|'warning'|'error'} type
+ * Update the session status indicator in the tab strip.
+ * @param {string} text - Status word (Off, Starting, Intercepting, Passive, Stopping, Error…).
+ * @param {'default'|'active'|'success'|'info'|'warning'|'error'} type
  */
 export function updateDebuggerStatus(text, type = 'default') {
   const statusBadge = getElement('debugger-status');
@@ -18,9 +28,11 @@ export function updateDebuggerStatus(text, type = 'default') {
   const statusText = statusBadge.querySelector('.status-text');
   if (statusText) statusText.textContent = text;
 
-  statusBadge.className = 'status-badge';
+  statusBadge.className = 'status';
   if (type === 'active' || type === 'success') {
     statusBadge.classList.add('active');
+  } else if (type === 'info') {
+    statusBadge.classList.add('info');
   } else if (type === 'warning') {
     statusBadge.classList.add('warning');
   } else if (type === 'error') {
@@ -29,52 +41,75 @@ export function updateDebuggerStatus(text, type = 'default') {
 }
 
 /**
- * Show the status banner below the action buttons.
+ * Remove one toast and hide the stack container when it empties.
+ * @param {HTMLElement} toast
+ */
+function removeToast(toast) {
+  toast.remove();
+  const stack = getElement('status-banner');
+  if (stack && stack.childElementCount === 0) {
+    stack.classList.add('hidden');
+  }
+}
+
+/**
+ * Show a toast in the bottom-right stack. Success/warning/default toasts
+ * dismiss themselves; error toasts persist until dismissed.
  * @param {string} message
  * @param {'default'|'success'|'warning'|'error'} type
- * @param {boolean} autoDismiss
+ * @param {boolean} autoDismiss - Kept for API compatibility; transient
+ *   types dismiss regardless.
  */
 export function showStatusBanner(message, type = 'default', autoDismiss = false) {
-  const banner = getElement('status-banner');
-  const bannerText = getElement('status-banner-text');
+  const stack = getElement('status-banner');
+  if (!stack) return;
+
+  const toast = document.createElement('div');
+  toast.className = 'toast';
+  if (type === 'warning') toast.classList.add('toast--warning');
+  else if (type === 'error') toast.classList.add('toast--error');
+  else if (type === 'success') toast.classList.add('toast--success');
 
-  if (!banner || !bannerText) return;
+  const text = document.createElement('span');
+  text.className = 'toast-text';
+  text.textContent = message;
+  toast.appendChild(text);
 
-  if (state.statusBannerTimeout) {
-    clearTimeout(state.statusBannerTimeout);
-    state.statusBannerTimeout = null;
+  if (type === 'error') {
+    toast.setAttribute('role', 'alert');
+    const dismiss = document.createElement('button');
+    dismiss.type = 'button';
+    dismiss.className = 'icon-btn toast-close';
+    dismiss.setAttribute('aria-label', 'Dismiss');
+    dismiss.innerHTML = CLOSE_ICON;
+    dismiss.addEventListener('click', () => removeToast(toast));
+    toast.appendChild(dismiss);
   }
 
-  bannerText.textContent = message;
-  banner.className = 'status-banner';
-  if (type !== 'default') {
-    banner.classList.add(type);
+  stack.appendChild(toast);
+  stack.classList.remove('hidden');
+
+  while (stack.childElementCount > TOAST_LIMIT) {
+    stack.firstElementChild.remove();
   }
-  banner.classList.remove('hidden');
 
-  if (autoDismiss || type === 'success') {
-    state.statusBannerTimeout = setTimeout(() => {
-      banner.classList.add('hidden');
-    }, 5000);
+  if (autoDismiss || type !== 'error') {
+    setTimeout(() => removeToast(toast), TOAST_DISMISS_MS);
   }
 }
 
 /**
- * Hide the status banner.
+ * Clear all toasts and hide the stack.
  */
 export function hideStatusBanner() {
-  const banner = getElement('status-banner');
-  if (banner) {
-    banner.classList.add('hidden');
-  }
-  if (state.statusBannerTimeout) {
-    clearTimeout(state.statusBannerTimeout);
-    state.statusBannerTimeout = null;
-  }
+  const stack = getElement('status-banner');
+  if (!stack) return;
+  stack.textContent = '';
+  stack.classList.add('hidden');
 }
 
 /**
- * Display an error in both the status badge and banner.
+ * Display an error in both the status indicator and a persistent toast.
  * @param {string} message
  */
 export function showError(message) {
diff --git a/js/ui/toolbar.js b/js/ui/toolbar.js
index d5d0795..885f9e1 100644
--- a/js/ui/toolbar.js
+++ b/js/ui/toolbar.js
@@ -7,6 +7,9 @@ import { getElement } from './dom-helpers.js';
 import { state } from './state.js';
 import { renderRequestList, updateRequestCount } from './request-list.js';
 import { showStatusBanner } from './status.js';
+import { confirmAction, whenConfirmed } from './confirm.js';
+import { renderEndpointsView } from './endpoints.js';
+import { closeRequestDetail } from './request-detail.js';
 
 /**
  * Enable/disable the toolbar buttons based on history length.
@@ -21,19 +24,30 @@ export function updateToolbarState() {
 }
 
 function clearHistory() {
-  state.requestHistory = [];
-  state.selectedRequestId = null;
-  renderRequestList();
-  updateRequestCount();
-  updateToolbarState();
+  const count = state.requestHistory.length;
+  whenConfirmed(
+    confirmAction({
+      title: 'Clear captured requests?',
+      body: `Removes ${count === 1 ? '1 captured request' : `${count} captured requests`} from the panel. The hash registry keeps what it learned.`,
+      confirmLabel: 'Clear requests',
+    }),
+    () => {
+      state.requestHistory = [];
+      closeRequestDetail();
+      renderRequestList();
+      updateRequestCount();
+      updateToolbarState();
+      renderEndpointsView();
 
-  const detailContent = getElement('detail-content');
-  if (detailContent) {
-    detailContent.innerHTML =
-      '<div class="detail-placeholder"><p>Select a request to view details</p></div>';
-  }
+      const detailContent = getElement('detail-content');
+      if (detailContent) {
+        detailContent.innerHTML =
+          '<div class="detail-placeholder"><p>Select a request to view details</p></div>';
+      }
 
-  showStatusBanner('Request history cleared', 'success');
+      showStatusBanner('Requests cleared', 'success');
+    }
+  );
 }
 
 function exportHistory() {
diff --git a/manifest.json b/manifest.json
index 6280786..1104ba9 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,8 @@
   "manifest_version": 3,
   "name": "Apollo GraphQL Persisted Queries (APQ) Debugger",
   "description": "Reveal full GraphQL queries behind Apollo APQ hashes. Inspect fallback flow and debug Automatic Persisted Queries in DevTools.",
-  "version": "3.0.0",
+  "version": "4.0.0",
+  "minimum_chrome_version": "123",
   "permissions": ["contextMenus", "debugger", "storage", "tabs", "notifications"],
   "host_permissions": ["<all_urls>"],
   "background": {
diff --git a/package-lock.json b/package-lock.json
index ca057f4..013d5f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "apq-debugger",
-  "version": "2.0.1",
+  "version": "4.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "apq-debugger",
-      "version": "2.0.1",
+      "version": "4.0.0",
       "license": "Apache-2.0",
       "devDependencies": {
         "@playwright/test": "^1.58.1",
diff --git a/package.json b/package.json
index a1a09a6..b055952 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "apq-debugger",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Chrome DevTools extension for intercepting Apollo Persisted Queries",
   "main": "build-enhanced.js",
   "scripts": {
@@ -17,7 +17,9 @@
     "version": "node scripts/sync-version.js && git add manifest.json",
     "package": "node scripts/package-extension.js",
     "release": "npm run build && npm run package",
-    "check:bundle": "node scripts/check-bundle-size.js"
+    "check:bundle": "node scripts/check-bundle-size.js",
+    "promo:screens": "node scripts/promo/capture-screens.js",
+    "promo:video": "node scripts/promo/record-demo.js"
   },
   "devDependencies": {
     "@playwright/test": "^1.58.1",
diff --git a/playwright.config.js b/playwright.config.js
index 622ed95..607d898 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -9,7 +9,9 @@ module.exports = defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  // Each test launches a full headed Chrome with the extension loaded;
+  // parallel launches starve the extension service worker and flake.
+  workers: 1,
   reporter: 'html',
   use: {
     trace: 'on-first-retry',
diff --git a/scripts/check-bundle-size.js b/scripts/check-bundle-size.js
index 5baa8d5..0257edc 100644
--- a/scripts/check-bundle-size.js
+++ b/scripts/check-bundle-size.js
@@ -10,8 +10,9 @@ const path = require('path');
 
 /** Max bytes per artifact in extension_build/ */
 const BUDGETS = {
-  'devtools.min.js': 45000,
+  'devtools.min.js': 55000,
   'service-worker.min.js': 25000,
+  'devtools.min.css': 30000,
 };
 
 const extDir = path.join(__dirname, '..', 'extension_build');
diff --git a/scripts/promo/capture-screens.js b/scripts/promo/capture-screens.js
new file mode 100644
index 0000000..47232a0
--- /dev/null
+++ b/scripts/promo/capture-screens.js
@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+/**
+ * Regenerate the Chrome Web Store screenshots and promo tiles from the
+ * real panel UI (run `npm run build` first).
+ *
+ *   store/promo/screenshots/NN-*.png          1280x800
+ *   store/promo/screenshots/_preview-640x400/  640x400 copies
+ *   store/promo/tiles/*.png                    440x280, 920x680, 1400x560
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execFileSync } = require('child_process');
+const {
+  ROOT,
+  launch,
+  openStage,
+  panelFrame,
+  playExchanges,
+  intercept,
+  clickWithCursor,
+} = require('./lib');
+const { apqExchange, fullQuery, unresolvedTelemetry } = require('./demo-data');
+
+const OUT = path.join(ROOT, 'store', 'promo');
+const SHOTS = path.join(OUT, 'screenshots');
+const PREVIEWS = path.join(SHOTS, '_preview-640x400');
+const TILES = path.join(OUT, 'tiles');
+
+const SESSION = [
+  apqExchange('GetViewer'),
+  apqExchange('ProductListing'),
+  apqExchange('CartSummary'),
+  [fullQuery('AddToCart')],
+  [unresolvedTelemetry],
+  apqExchange('ProductRecommendations'),
+];
+
+const PANEL_STORAGE = { apqPatterns: ['*graphql*'], apqFirstRunNoteSeen: true };
+
+async function startLive(page) {
+  const panel = panelFrame(page);
+  await clickWithCursor(page, panel.locator('#form-submit'), { showCursor: false });
+  await page.waitForTimeout(400);
+}
+
+async function selectRow(page, name, nth = 'last') {
+  const rows = panelFrame(page).locator('.request-item', { hasText: name });
+  await (nth === 'last' ? rows.last() : rows.first()).click();
+  await page.waitForTimeout(300);
+}
+
+async function settle(page) {
+  // let toasts and the live-dot pulse finish so captures are steady
+  await page.waitForTimeout(4200);
+}
+
+async function main() {
+  for (const dir of [SHOTS, PREVIEWS, TILES]) fs.mkdirSync(dir, { recursive: true });
+  const { context, extensionId, extDir } = await launch();
+  const shoot = (page, name) => page.screenshot({ path: path.join(SHOTS, `${name}.png`) });
+
+  // 01 · live session, dark, query open
+  let page = await openStage(context, extensionId, {
+    dark: true,
+    storage: PANEL_STORAGE,
+    pageHeight: 190,
+  });
+  await page.evaluate(() => window.stage.setCategory('outerwear'));
+  await startLive(page);
+  await playExchanges(page, SESSION);
+  await selectRow(page, 'ProductListing');
+  await settle(page);
+  await shoot(page, '01-requests-dark');
+
+  // 02 · light theme, a resolved hash with variables
+  page = await openStage(context, extensionId, {
+    dark: false,
+    storage: PANEL_STORAGE,
+    pageHeight: 190,
+  });
+  await page.evaluate(() => window.stage.setCategory('shoes'));
+  await startLive(page);
+  await playExchanges(page, SESSION);
+  await selectRow(page, 'ProductRecommendations');
+  await settle(page);
+  await shoot(page, '02-request-detail');
+
+  // 04 · light theme, patterns pane open, a hash resolving in place
+  page = await openStage(context, extensionId, {
+    dark: false,
+    storage: { ...PANEL_STORAGE, apqPatterns: ['*graphql*', '*api/query*'] },
+    pageHeight: 190,
+  });
+  await page.evaluate(() => window.stage.setCategory('outerwear'));
+  await panelFrame(page).locator('#btn-toggle-patterns').click();
+  await startLive(page);
+  await playExchanges(page, SESSION.slice(0, 5));
+  await settle(page);
+  const last = apqExchange('ProductRecommendations');
+  await intercept(page, [last[0]]);
+  await page.waitForTimeout(500);
+  await intercept(page, [last[1]]);
+  await page.waitForTimeout(140);
+  await shoot(page, '04-requests-light');
+
+  // 03 · schema explorer, dark
+  page = await openStage(context, extensionId, {
+    dark: true,
+    storage: PANEL_STORAGE,
+    pageHeight: 170,
+  });
+  const panel = panelFrame(page);
+  await panel.locator('#tab-schema').click();
+  await panel.locator('#btn-load-schema').click();
+  await panel.locator('.schema-type-item', { hasText: 'Product' }).first().waitFor();
+  await panel.locator('.schema-type-item[data-type-name="Product"]').click();
+  await page.waitForTimeout(400);
+  await shoot(page, '03-schema');
+
+  // 05 · toolbar toggle
+  page = await openStage(context, extensionId, {
+    dark: false,
+    storage: PANEL_STORAGE,
+    pageHeight: 260,
+  });
+  await startLive(page);
+  await playExchanges(page, SESSION.slice(0, 3));
+  await settle(page);
+  await page.evaluate(() => window.stage.menu(true));
+  await shoot(page, '05-toolbar');
+
+  // 640x400 previews
+  for (const file of fs.readdirSync(SHOTS).filter((f) => f.endsWith('.png'))) {
+    execFileSync('ffmpeg', [
+      '-y',
+      '-loglevel',
+      'error',
+      '-i',
+      path.join(SHOTS, file),
+      '-vf',
+      'scale=640:400:flags=lanczos',
+      path.join(PREVIEWS, file),
+    ]);
+  }
+
+  // promo tiles, built from the fresh screenshots
+  fs.mkdirSync(path.join(extDir, 'shots'), { recursive: true });
+  fs.copyFileSync(
+    path.join(SHOTS, '01-requests-dark.png'),
+    path.join(extDir, 'shots', '01-requests-dark.png')
+  );
+  page = await context.newPage();
+  await page.setViewportSize({ width: 1500, height: 1700 });
+  await page.goto(`chrome-extension://${extensionId}/tiles.html`);
+  await page.waitForLoadState('load');
+  const tiles = { small: 'small-440x280', large: 'large-920x680', marquee: 'marquee-1400x560' };
+  for (const [id, name] of Object.entries(tiles)) {
+    await page.locator(`#${id}`).screenshot({ path: path.join(TILES, `${name}.png`) });
+  }
+
+  await context.close();
+  console.log(`Screenshots → ${path.relative(ROOT, SHOTS)}\nTiles → ${path.relative(ROOT, TILES)}`);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/promo/demo-data.js b/scripts/promo/demo-data.js
new file mode 100644
index 0000000..66ca6d7
--- /dev/null
+++ b/scripts/promo/demo-data.js
@@ -0,0 +1,288 @@
+/**
+ * Synthetic demo traffic and schema for promo screenshots and the demo
+ * video. Every host is under example.com; names and hashes are invented.
+ */
+
+const API = 'https://api.shop.example.com/graphql';
+const TELEMETRY = 'https://telemetry.example.com/v1/graphql?client=web';
+
+const HEADERS = [
+  { name: 'content-type', value: 'application/json' },
+  { name: 'apollographql-client-name', value: 'shopfront-web' },
+];
+
+const QUERIES = {
+  GetViewer: 'query GetViewer { viewer { id name email avatarUrl } }',
+  ProductListing:
+    'query ProductListing($first: Int!, $after: String, $filter: ProductFilter) { products(first: $first, after: $after, filter: $filter) { edges { node { id title handle priceRange { min { amount currencyCode } } featuredImage { url altText } } } pageInfo { hasNextPage endCursor } } }',
+  CartSummary:
+    'query CartSummary { cart { id totalQuantity cost { total { amount currencyCode } } } }',
+  AddToCart:
+    'mutation AddToCart($input: CartLineInput!) { cartLinesAdd(input: $input) { cart { id totalQuantity } userErrors { field message } } }',
+  ProductRecommendations:
+    'query ProductRecommendations($productId: ID!, $limit: Int = 4) { recommendations(productId: $productId, limit: $limit) { id title priceRange { min { amount } } } }',
+};
+
+const HASHES = {
+  GetViewer: 'ecf4edb46db40b5132295c0291d62fb65d6759a9eedfa4d5d612dd5ec54a6b38',
+  ProductListing: '7a1f0c2e9b8d4e6f3a5c1b2d0e9f8a7b6c5d4e3f2a1b0c9d8e7f6a5b4c3d2e1f',
+  CartSummary: '3c9e1f7a2b4d6e8f0a1c3e5b7d9f1a3c5e7b9d1f3a5c7e9b1d3f5a7c9e1b3d5f',
+  ProductRecommendations: 'b52f0e7c1a9d3e6f8b2c4d6e8f0a2c4e6b8d0f2a4c6e8b0d2f4a6c8e0b2d4f6a',
+  Telemetry: '0b9c8d7e6f5a4b3c2d1e0f9a8b7c6d5e4f3a2b1c0d9e8f7a6b5c4d3e2f1a0b9c',
+};
+
+const VARIABLES = {
+  ProductListing: { first: 24, after: null, filter: { category: 'outerwear', inStock: true } },
+  AddToCart: { input: { merchandiseId: 'gid://shop/ProductVariant/4471', quantity: 1 } },
+  ProductRecommendations: { productId: 'gid://shop/Product/1182', limit: 4 },
+};
+
+/** Hash-only request (as sent), then Apollo's full-query retry. */
+function apqExchange(name, url = API) {
+  const variables = VARIABLES[name] || null;
+  return [
+    { operationName: name, url, isAPQ: true, hash: HASHES[name], variables, headers: HEADERS },
+    {
+      operationName: name,
+      url,
+      isAPQ: false,
+      hash: HASHES[name],
+      query: QUERIES[name],
+      variables,
+      headers: HEADERS,
+    },
+  ];
+}
+
+const fullQuery = (name) => ({
+  operationName: name,
+  url: API,
+  isAPQ: false,
+  query: QUERIES[name],
+  variables: VARIABLES[name] || null,
+  headers: HEADERS,
+});
+
+/** A hash nobody retries (e.g. a telemetry server without APQ fallback). */
+const unresolvedTelemetry = {
+  operationName: 'Anonymous Query',
+  url: TELEMETRY,
+  isAPQ: true,
+  hash: HASHES.Telemetry,
+  headers: HEADERS,
+};
+
+const SCHEMA_SDL = `
+"""Root query"""
+type Query {
+  viewer: User
+  products(first: Int!, after: String, filter: ProductFilter): ProductConnection!
+  product(id: ID!): Product
+  recommendations(productId: ID!, limit: Int = 4): [Product!]!
+  cart: Cart
+}
+
+type Mutation {
+  cartLinesAdd(input: CartLineInput!): CartLinesAddPayload!
+}
+
+type User {
+  id: ID!
+  name: String!
+  email: String!
+  avatarUrl: String
+}
+
+"""A product in the catalogue."""
+type Product {
+  id: ID!
+  title: String!
+  handle: String!
+  description: String
+  priceRange: PriceRange!
+  featuredImage: Image
+  category: Category!
+  inStock: Boolean!
+}
+
+type ProductConnection {
+  edges: [ProductEdge!]!
+  pageInfo: PageInfo!
+}
+
+type ProductEdge {
+  cursor: String!
+  node: Product!
+}
+
+type PageInfo {
+  hasNextPage: Boolean!
+  endCursor: String
+}
+
+type PriceRange {
+  min: Money!
+  max: Money!
+}
+
+type Money {
+  amount: Float!
+  currencyCode: CurrencyCode!
+}
+
+type Image {
+  url: String!
+  altText: String
+}
+
+type Cart {
+  id: ID!
+  totalQuantity: Int!
+  cost: CartCost!
+}
+
+type CartCost {
+  total: Money!
+}
+
+type CartLinesAddPayload {
+  cart: Cart
+  userErrors: [UserError!]!
+}
+
+type UserError {
+  field: [String!]
+  message: String!
+}
+
+input ProductFilter {
+  category: Category
+  inStock: Boolean
+}
+
+input CartLineInput {
+  merchandiseId: ID!
+  quantity: Int = 1
+}
+
+enum Category {
+  OUTERWEAR
+  SHOES
+  ACCESSORIES
+}
+
+enum CurrencyCode {
+  USD
+  EUR
+  GBP
+}
+`;
+
+const SCALARS = ['String', 'Int', 'Float', 'Boolean', 'ID'];
+
+/**
+ * Parse a type reference such as `[Product!]!` into introspection form.
+ * @param {string} ref
+ * @param {Map<string, string>} kinds - type name → introspection kind
+ */
+function typeRef(ref, kinds) {
+  ref = ref.trim();
+  if (ref.endsWith('!'))
+    return { kind: 'NON_NULL', name: null, ofType: typeRef(ref.slice(0, -1), kinds) };
+  if (ref.startsWith('['))
+    return { kind: 'LIST', name: null, ofType: typeRef(ref.slice(1, -1), kinds) };
+  return { kind: kinds.get(ref) || 'SCALAR', name: ref, ofType: null };
+}
+
+/** Split `a: Int!, b: String = "x"` into argument definitions. */
+function parseArgs(text, kinds) {
+  if (!text) return [];
+  return text.split(',').map((part) => {
+    const [decl, defaultValue] = part.split('=').map((x) => x.trim());
+    const [name, ref] = decl.split(':').map((x) => x.trim());
+    return {
+      name,
+      description: null,
+      type: typeRef(ref, kinds),
+      defaultValue: defaultValue || null,
+    };
+  });
+}
+
+/**
+ * Introspection result for the demo schema (what the worker would fetch).
+ * A small parser for the controlled SDL above — not a general GraphQL parser.
+ */
+function buildIntrospection() {
+  const blocks = [
+    ...SCHEMA_SDL.matchAll(/(?:"""([^]*?)"""\s*)?(type|input|enum) (\w+) \{([^}]*)\}/g),
+  ];
+  const kindOf = { type: 'OBJECT', input: 'INPUT_OBJECT', enum: 'ENUM' };
+  const kinds = new Map(blocks.map((b) => [b[3], kindOf[b[2]]]));
+
+  const types = blocks.map(([, description, keyword, name, body]) => {
+    const lines = body
+      .split('\n')
+      .map((l) => l.trim())
+      .filter(Boolean);
+    const type = {
+      kind: kindOf[keyword],
+      name,
+      description: description ? description.trim() : null,
+    };
+    if (keyword === 'enum') {
+      type.enumValues = lines.map((value) => ({
+        name: value,
+        description: null,
+        isDeprecated: false,
+      }));
+      return type;
+    }
+    const fields = lines.map((line) => {
+      const m = line.match(/^(\w+)(?:\(([^)]*)\))?:\s*(.+)$/);
+      return { name: m[1], args: parseArgs(m[2], kinds), type: m[3] };
+    });
+    if (keyword === 'input') {
+      type.inputFields = fields.map((fld) => {
+        const [ref, defaultValue] = fld.type.split('=').map((x) => x.trim());
+        return {
+          name: fld.name,
+          description: null,
+          type: typeRef(ref, kinds),
+          defaultValue: defaultValue || null,
+        };
+      });
+    } else {
+      type.fields = fields.map((fld) => ({
+        name: fld.name,
+        description: null,
+        args: fld.args,
+        type: typeRef(fld.type, kinds),
+        isDeprecated: false,
+        deprecationReason: null,
+      }));
+      type.interfaces = [];
+    }
+    return type;
+  });
+
+  for (const scalar of SCALARS) types.push({ kind: 'SCALAR', name: scalar, description: null });
+
+  return {
+    __schema: {
+      queryType: { name: 'Query' },
+      mutationType: { name: 'Mutation' },
+      subscriptionType: null,
+      types,
+      directives: [],
+    },
+  };
+}
+
+module.exports = {
+  API,
+  apqExchange,
+  fullQuery,
+  unresolvedTelemetry,
+  buildIntrospection,
+};
diff --git a/scripts/promo/lib.js b/scripts/promo/lib.js
new file mode 100644
index 0000000..014e8e5
--- /dev/null
+++ b/scripts/promo/lib.js
@@ -0,0 +1,228 @@
+/**
+ * Shared helpers for promo screenshots and the demo video.
+ *
+ * The real panel (extension_build/devtools.html) is loaded inside
+ * stage.html, which is copied into a temporary copy of the build so the
+ * iframe is same-origin. Inside the panel frame, chrome.devtools is
+ * mocked and chrome.runtime.sendMessage answers like the service worker
+ * would, so no real tab is attached and no network traffic is touched.
+ * Captured operations are injected through the panel's own onMessage
+ * listeners — exactly the path the service worker's INTERCEPTED messages
+ * take.
+ */
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { chromium } = require('@playwright/test');
+const { buildIntrospection, API } = require('./demo-data');
+
+const ROOT = path.join(__dirname, '..', '..');
+const BUILD_DIR = path.join(ROOT, 'extension_build');
+const TAB_ID = 123;
+
+/**
+ * Copy the built extension plus the stage files into a fresh temp dir.
+ * @returns {string} Path of the prepared extension.
+ */
+function prepareExtension() {
+  if (!fs.existsSync(path.join(BUILD_DIR, 'devtools.html'))) {
+    throw new Error('extension_build/ is missing — run `npm run build` first.');
+  }
+  const dir = path.join(os.tmpdir(), 'apq-debugger-promo-ext');
+  fs.rmSync(dir, { recursive: true, force: true });
+  fs.cpSync(BUILD_DIR, dir, { recursive: true });
+  for (const file of ['stage.html', 'stage.js', 'tiles.html']) {
+    const src = path.join(__dirname, file);
+    if (fs.existsSync(src)) fs.copyFileSync(src, path.join(dir, file));
+  }
+  return dir;
+}
+
+/**
+ * Launch Chrome with the prepared extension loaded.
+ * @param {{recordVideoDir?: string, size?: {width: number, height: number}}} [options]
+ */
+async function launch({ recordVideoDir, size = { width: 1280, height: 800 } } = {}) {
+  const extDir = prepareExtension();
+  const context = await chromium.launchPersistentContext('', {
+    headless: false,
+    viewport: size,
+    deviceScaleFactor: 1,
+    recordVideo: recordVideoDir ? { dir: recordVideoDir, size } : undefined,
+    args: [`--disable-extensions-except=${extDir}`, `--load-extension=${extDir}`],
+  });
+  let [worker] = context.serviceWorkers();
+  if (!worker) worker = await context.waitForEvent('serviceworker', { timeout: 20000 });
+  const extensionId = worker.url().split('/')[2];
+
+  const introspection = buildIntrospection();
+  await context.addInitScript(mockPanelRuntime, { tabId: TAB_ID, introspection, api: API });
+
+  return { context, extensionId, extDir };
+}
+
+/**
+ * Runs in every frame; only acts inside the panel frame (devtools.html).
+ * Replaces chrome.devtools and the worker side of chrome.runtime.sendMessage.
+ */
+function mockPanelRuntime({ tabId, introspection, api }) {
+  if (!location.pathname.endsWith('/devtools.html')) return;
+
+  window.chrome.devtools = { inspectedWindow: { tabId }, panels: { create: () => {} } };
+
+  // Copy buttons show their "Copied" state without needing window focus,
+  // and recording never touches the real clipboard.
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText: () => Promise.resolve() },
+  });
+
+  const addListener = chrome.runtime.onMessage.addListener.bind(chrome.runtime.onMessage);
+  window.__apqListeners = [];
+  chrome.runtime.onMessage.addListener = (fn) => {
+    window.__apqListeners.push(fn);
+    return addListener(fn);
+  };
+
+  const fake = { passiveMode: false, registrySize: 0, active: false };
+  const notifyStage = (msg) => window.parent && window.parent.postMessage({ apqDemo: msg }, '*');
+
+  chrome.runtime.sendMessage = (message, callback) => {
+    let response = { status: 'SUCCESS' };
+    if (message.patterns) {
+      fake.active = true;
+      response = { status: 'SUCCESS', message: 'Debugger attached' };
+      notifyStage('started');
+    } else if (message.disconnect) {
+      fake.active = false;
+      notifyStage('stopped');
+    } else if (message.getStatus) {
+      response = { status: 'SUCCESS', debuggerActive: fake.active };
+    } else if (message.getRegistry || message.clearRegistry) {
+      if (message.clearRegistry) fake.registrySize = 0;
+      response = { status: 'SUCCESS', size: fake.registrySize, passiveMode: fake.passiveMode };
+    } else if (message.setPassiveMode !== undefined) {
+      fake.passiveMode = Boolean(message.setPassiveMode);
+      response = { status: 'SUCCESS', size: fake.registrySize, passiveMode: fake.passiveMode };
+    } else if (message.getObservedEndpoints) {
+      response = { status: 'SUCCESS', endpoints: [api] };
+    } else if (message.loadSchema) {
+      response = { status: 'SUCCESS', endpoint: message.url || api, introspection };
+    }
+    if (typeof callback === 'function') setTimeout(() => callback(response), 250);
+  };
+
+  window.__apqDemo = fake;
+}
+
+/**
+ * Open the stage page.
+ * @param {import('@playwright/test').BrowserContext} context
+ * @param {string} extensionId
+ * @param {{dark?: boolean, storage?: object, pageHeight?: number}} [options]
+ */
+async function openStage(context, extensionId, { dark = false, storage = {}, pageHeight } = {}) {
+  const page = context.pages()[0] || (await context.newPage());
+  await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', reducedMotion: 'no-preference' });
+  await page.goto(`chrome-extension://${extensionId}/stage.html`);
+  await page.evaluate(
+    (items) =>
+      new Promise((resolve) =>
+        chrome.storage.local.clear(() => chrome.storage.local.set(items, resolve))
+      ),
+    storage
+  );
+  await page.reload();
+  await page.evaluate(
+    ({ dark, pageHeight }) => {
+      window.stage.setTheme(dark);
+      if (pageHeight) window.stage.setPageHeight(pageHeight);
+    },
+    { dark, pageHeight }
+  );
+  await panelFrame(page).waitForSelector('#request-list');
+  await page.waitForTimeout(500);
+  return page;
+}
+
+/** @param {import('@playwright/test').Page} page */
+function panelFrame(page) {
+  const frame = page.frames().find((f) => f.url().endsWith('/devtools.html'));
+  if (!frame) throw new Error('Panel frame not found');
+  return frame;
+}
+
+/**
+ * Deliver messages to the panel exactly as the service worker would.
+ * @param {import('@playwright/test').Page} page
+ * @param {object[]} messages - INTERCEPTED payloads (status added here).
+ */
+async function intercept(page, messages) {
+  await panelFrame(page).evaluate(
+    ({ list, tabId }) => {
+      for (const m of list) {
+        for (const fn of window.__apqListeners)
+          fn({ status: 'INTERCEPTED', tabId, ...m }, {}, () => {});
+      }
+    },
+    { list: messages, tabId: TAB_ID }
+  );
+}
+
+/**
+ * Play APQ exchanges: each hash row arrives, then its retry after `gap` ms.
+ * @param {import('@playwright/test').Page} page
+ * @param {object[][]} exchanges - Arrays of [hashMessage, retryMessage?].
+ */
+async function playExchanges(page, exchanges, gap = 650) {
+  for (const exchange of exchanges) await intercept(page, [exchange[0]]);
+  await page.waitForTimeout(gap);
+  for (const exchange of exchanges) {
+    if (exchange[1]) {
+      await intercept(page, [exchange[1]]);
+      await page.waitForTimeout(180);
+    }
+  }
+}
+
+/**
+ * Move the drawn cursor to an element (in the stage or the panel) and click it.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('@playwright/test').Locator} locator
+ * @param {{showCursor?: boolean, dwell?: number}} [options]
+ */
+async function clickWithCursor(page, locator, { showCursor = true, dwell = 650 } = {}) {
+  if (showCursor) {
+    const box = await locator.boundingBox();
+    if (box) {
+      await page.evaluate(({ x, y }) => window.stage.cursorTo(x, y), {
+        x: Math.round(box.x + Math.min(box.width / 2, 40)),
+        y: Math.round(box.y + box.height / 2),
+      });
+      await page.waitForTimeout(dwell);
+      await page.evaluate(() => window.stage.cursorClick());
+    }
+  }
+  await locator.click();
+}
+
+/**
+ * Type into a field with visible keystrokes.
+ * @param {import('@playwright/test').Locator} locator
+ * @param {string} text
+ */
+async function typeSlowly(locator, text, delay = 90) {
+  await locator.pressSequentially(text, { delay });
+}
+
+module.exports = {
+  ROOT,
+  launch,
+  openStage,
+  panelFrame,
+  intercept,
+  playExchanges,
+  clickWithCursor,
+  typeSlowly,
+};
diff --git a/scripts/promo/record-demo.js b/scripts/promo/record-demo.js
new file mode 100644
index 0000000..d9e8d64
--- /dev/null
+++ b/scripts/promo/record-demo.js
@@ -0,0 +1,247 @@
+#!/usr/bin/env node
+
+/**
+ * Record the demo video by performing store/promo/video/demo-script.md
+ * scene by scene against the real panel (run `npm run build` first).
+ *
+ * Frames come from Chrome's screencast (full quality, timestamped) and
+ * are encoded to H.264 at a constant 30 fps with ffmpeg.
+ *
+ *   store/promo/video/apq-debugger-demo.mp4
+ *   store/promo/video/apq-debugger-demo-poster.png
+ */
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { execFileSync } = require('child_process');
+const {
+  ROOT,
+  launch,
+  openStage,
+  panelFrame,
+  intercept,
+  playExchanges,
+  clickWithCursor,
+  typeSlowly,
+} = require('./lib');
+const { apqExchange, fullQuery, unresolvedTelemetry } = require('./demo-data');
+
+const OUT_DIR = path.join(ROOT, 'store', 'promo', 'video');
+const OUT_FILE = path.join(OUT_DIR, 'apq-debugger-demo.mp4');
+const POSTER = path.join(OUT_DIR, 'apq-debugger-demo-poster.png');
+const FRAMES = path.join(os.tmpdir(), 'apq-debugger-demo-frames');
+
+/** Capture timestamped screencast frames until stop() is called. */
+async function startScreencast(page) {
+  fs.rmSync(FRAMES, { recursive: true, force: true });
+  fs.mkdirSync(FRAMES, { recursive: true });
+  const cdp = await page.context().newCDPSession(page);
+  const frames = [];
+  cdp.on('Page.screencastFrame', async ({ data, metadata, sessionId }) => {
+    const file = path.join(FRAMES, `f${String(frames.length).padStart(5, '0')}.jpg`);
+    fs.writeFileSync(file, Buffer.from(data, 'base64'));
+    frames.push({ file, t: metadata.timestamp });
+    try {
+      await cdp.send('Page.screencastFrameAck', { sessionId });
+    } catch (_) {
+      /* session closing */
+    }
+  });
+  await cdp.send('Page.startScreencast', {
+    format: 'jpeg',
+    quality: 95,
+    maxWidth: 1280,
+    maxHeight: 800,
+    everyNthFrame: 1,
+  });
+  return {
+    async stop() {
+      // Static scenes emit no frames; remember when recording ended so the
+      // last frame holds until then.
+      frames.stopAt = Date.now() / 1000;
+      await cdp.send('Page.stopScreencast');
+      return frames;
+    },
+  };
+}
+
+/** Encode variable-rate frames to constant 30 fps H.264. */
+function encode(frames) {
+  if (frames.length < 2) throw new Error('No frames captured');
+  const lines = ['ffconcat version 1.0'];
+  for (let i = 0; i < frames.length; i++) {
+    const next = frames[i + 1];
+    const end = next ? next.t : frames.stopAt || frames[i].t + 1;
+    const duration = Math.max(end - frames[i].t, 0.001);
+    lines.push(`file '${frames[i].file.replace(/\\/g, '/')}'`, `duration ${duration.toFixed(4)}`);
+  }
+  lines.push(`file '${frames[frames.length - 1].file.replace(/\\/g, '/')}'`);
+  const list = path.join(FRAMES, 'frames.txt');
+  fs.writeFileSync(list, lines.join('\n'));
+
+  execFileSync('ffmpeg', [
+    '-y',
+    '-loglevel',
+    'error',
+    '-f',
+    'concat',
+    '-safe',
+    '0',
+    '-i',
+    list,
+    '-vf',
+    'fps=30,scale=1280:800:flags=lanczos,format=yuv420p',
+    '-c:v',
+    'libx264',
+    '-preset',
+    'slow',
+    '-crf',
+    '18',
+    '-movflags',
+    '+faststart',
+    OUT_FILE,
+  ]);
+}
+
+async function main() {
+  fs.mkdirSync(OUT_DIR, { recursive: true });
+  const { context, extensionId } = await launch();
+
+  // Fresh profile: no saved pattern, first-run note not yet seen.
+  const page = await openStage(context, extensionId, { dark: false, storage: {}, pageHeight: 200 });
+  const panel = panelFrame(page);
+  const stage = (fn, ...args) =>
+    page.evaluate(({ fn, args }) => window.stage[fn](...args), { fn, args });
+  const hold = (ms) => page.waitForTimeout(ms);
+  const caption = (text, placement) => stage('caption', text, placement);
+
+  await stage('card', 'APQ Debugger', 'See the GraphQL behind every persisted-query hash.');
+  await hold(600);
+  const cast = await startScreencast(page);
+
+  // Scene 1 · Title
+  await hold(4500);
+  await stage('card', null);
+
+  // Scene 2 · The problem
+  await stage('callout', true);
+  await caption(
+    'Apollo’s Automatic Persisted Queries send a SHA-256 hash, not the query. The Network panel can’t show you what ran.'
+  );
+  await hold(7500);
+  await stage('callout', false);
+
+  // Scene 3 · Set a pattern
+  await caption('Tell APQ Debugger which requests to watch.');
+  await hold(900);
+  const patternInput = panel.locator('.urlPattern').first();
+  await clickWithCursor(page, patternInput);
+  await typeSlowly(patternInput, '*graphql*', 110);
+  await hold(2200);
+
+  // Scene 4 · Start
+  await caption('Press Start (Ctrl+E). The bar stays up whenever requests are being rewritten.');
+  await clickWithCursor(page, panel.locator('#form-submit'));
+  await hold(3800);
+  await clickWithCursor(page, panel.locator('#live-note-dismiss'));
+  await hold(900);
+  await clickWithCursor(page, panel.locator('#btn-toggle-patterns'));
+  await hold(1000);
+
+  // Scene 5 · Browse and watch hashes resolve
+  await caption(
+    'Each hash is swapped, the server asks for the full query, and Apollo retries. The row resolves in place.'
+  );
+  await clickWithCursor(page, page.locator('#cats [data-cat="outerwear"]'));
+  await stage('setCategory', 'outerwear');
+  await playExchanges(
+    page,
+    [apqExchange('GetViewer'), apqExchange('ProductListing'), [unresolvedTelemetry]],
+    1400
+  );
+  await hold(1800);
+  await clickWithCursor(page, page.locator('#grid .product .add').first());
+  await stage('setCart', 1);
+  await intercept(page, [fullQuery('AddToCart')]);
+  await playExchanges(page, [apqExchange('CartSummary')], 1200);
+  await hold(2200);
+
+  // Scene 6 · Read the query
+  await caption('Open any operation to read and copy the full query and its variables.');
+  const listingRow = panel.locator('.request-item', { hasText: 'ProductListing' }).filter({
+    has: panel.locator('.state--resolved'),
+  });
+  await clickWithCursor(page, listingRow);
+  await hold(2600);
+  await clickWithCursor(page, panel.locator('.btn-copy[data-copy="query"]'));
+  await hold(1800);
+  await clickWithCursor(page, panel.locator('a[href="#detail-variables"]'));
+  await hold(2600);
+
+  // Scene 7 · Copy as cURL
+  await caption(
+    'Copy as cURL to replay it from a terminal, with the headers captured from the page.',
+    'top'
+  );
+  await clickWithCursor(page, panel.locator('#btn-copy-curl'));
+  await hold(3200);
+  await clickWithCursor(page, panel.locator('.curl-shell-option[data-shell="powershell"]'));
+  await hold(2600);
+  await clickWithCursor(page, panel.locator('#curl-copy-btn'));
+  await hold(1600);
+  await clickWithCursor(page, panel.locator('#curl-modal-close'));
+  await hold(800);
+
+  // Scene 8 · Find things fast
+  await caption('Filter by name, URL or request type.');
+  const filter = panel.locator('#filter-input');
+  await clickWithCursor(page, filter);
+  await typeSlowly(filter, 'Cart', 140);
+  await hold(1500);
+  await filter.fill('');
+  await panel.evaluate(() =>
+    document.getElementById('filter-input').dispatchEvent(new Event('input'))
+  );
+  await clickWithCursor(page, panel.locator('.chip[data-filter="apq"]'));
+  await hold(1400);
+  await clickWithCursor(page, panel.locator('.chip[data-filter="all"]'));
+  await hold(900);
+
+  // Scene 9 · Browse the schema
+  await caption('Load the schema by introspection, reusing the headers from live traffic.');
+  await clickWithCursor(page, panel.locator('#tab-schema'));
+  await hold(700);
+  await clickWithCursor(page, panel.locator('#btn-load-schema'));
+  await panel.locator('.schema-type-item[data-type-name="Product"]').waitFor();
+  await hold(900);
+  await clickWithCursor(page, panel.locator('.schema-type-item[data-type-name="Product"]'));
+  await hold(2800);
+
+  // Scene 10 · Stop
+  await caption('Stop when you’re done. Everything stays local to your browser.');
+  await clickWithCursor(page, panel.locator('#tab-requests'));
+  await hold(600);
+  await clickWithCursor(page, panel.locator('#form-submit'));
+  await hold(4800);
+
+  // Scene 11 · End card
+  await caption('');
+  await stage('hideCursor');
+  await stage('card', 'APQ Debugger', 'A Chrome DevTools panel for Apollo APQ');
+  await hold(5500);
+
+  const frames = await cast.stop();
+  await stage('card', 'APQ Debugger', 'See the GraphQL behind every persisted-query hash.');
+  await page.screenshot({ path: POSTER });
+  await context.close();
+
+  encode(frames);
+  fs.rmSync(FRAMES, { recursive: true, force: true });
+  console.log(`Video → ${path.relative(ROOT, OUT_FILE)} (${frames.length} source frames)`);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/promo/stage.html b/scripts/promo/stage.html
new file mode 100644
index 0000000..de15af9
--- /dev/null
+++ b/scripts/promo/stage.html
@@ -0,0 +1,623 @@
+<!doctype html>
+<html lang="en">
+  <!--
+  Promo stage: a browser window drawn around the real APQ Debugger panel.
+  Copied next to devtools.html in a temporary extension build by
+  scripts/promo/lib.js, so the iframe below loads the real panel.
+  Everything outside the iframe is illustration; all data is synthetic.
+-->
+
+  <head>
+    <meta charset="UTF-8" />
+    <title>APQ Debugger demo stage</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --win: light-dark(#dfe3e8, #1f2023);
+        --tab: light-dark(#ffffff, #35363a);
+        --bar: light-dark(#ffffff, #35363a);
+        --omni: light-dark(#eef1f5, #202124);
+        --ink: light-dark(#1f1f1f, #e3e3e3);
+        --ink-2: light-dark(#5f6368, #a8acb1);
+        --line: light-dark(#dadce0, #4a4b4f);
+        --dt-head: light-dark(#f1f3f4, #292a2d);
+        --dt-blue: light-dark(#0b57d0, #a8c7fa);
+        --page: light-dark(#fbfaf8, #17181a);
+        --card: light-dark(#ffffff, #232427);
+        --infobar: light-dark(#fff8e1, #3a3013);
+        --infobar-ink: light-dark(#3c2c00, #fdecb7);
+        font:
+          13px/1.4 system-ui,
+          -apple-system,
+          'Segoe UI',
+          Roboto,
+          sans-serif;
+      }
+
+      :root.dark {
+        color-scheme: dark;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+        background: var(--win);
+        color: var(--ink);
+      }
+
+      .window {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+      }
+
+      /* ---- browser chrome ---- */
+      .tabs {
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+        height: 38px;
+        padding: 0 12px;
+      }
+
+      .dots {
+        display: flex;
+        gap: 7px;
+        align-self: center;
+        margin-right: 8px;
+      }
+
+      .dots i {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: light-dark(#c4c7cc, #5f6368);
+      }
+
+      .tab {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 240px;
+        height: 32px;
+        padding: 0 12px;
+        border-radius: 8px 8px 0 0;
+        background: var(--tab);
+        font-size: 12px;
+      }
+
+      .favicon {
+        width: 16px;
+        height: 16px;
+        border-radius: 4px;
+        background: #2f7d5b;
+        color: #fff;
+        font-size: 10px;
+        font-weight: 700;
+        display: grid;
+        place-items: center;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 42px;
+        padding: 0 12px;
+        background: var(--bar);
+        border-bottom: 1px solid var(--line);
+      }
+
+      .nav-icon {
+        width: 18px;
+        height: 18px;
+        fill: none;
+        stroke: var(--ink-2);
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .omnibox {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 30px;
+        padding: 0 14px;
+        border-radius: 15px;
+        background: var(--omni);
+        color: var(--ink-2);
+      }
+
+      .omnibox b {
+        color: var(--ink);
+        font-weight: 400;
+      }
+
+      .ext {
+        position: relative;
+        width: 30px;
+        height: 30px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+      }
+
+      .ext.pressed {
+        background: light-dark(#e3e6ea, #4a4b4f);
+      }
+
+      .ext img {
+        width: 18px;
+        height: 18px;
+      }
+
+      .badge {
+        position: absolute;
+        right: -3px;
+        bottom: 0;
+        padding: 0 3px;
+        border-radius: 3px;
+        font:
+          700 9px/12px system-ui,
+          sans-serif;
+        color: #fff;
+        background: #d9534f;
+      }
+
+      .badge.on {
+        background: #5cb85c;
+      }
+
+      .badge[hidden] {
+        display: none;
+      }
+
+      /* Chrome's own infobar while an extension uses chrome.debugger */
+      .chrome-infobar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        height: 36px;
+        padding: 0 16px;
+        background: var(--infobar);
+        color: var(--infobar-ink);
+        border-bottom: 1px solid var(--line);
+      }
+
+      .chrome-infobar[hidden] {
+        display: none;
+      }
+
+      .chrome-infobar button {
+        margin-left: auto;
+        padding: 3px 12px;
+        border: 1px solid currentColor;
+        border-radius: 14px;
+        background: none;
+        color: inherit;
+        font: inherit;
+        opacity: 0.8;
+      }
+
+      /* ---- demo store ---- */
+      .page {
+        flex: none;
+        height: var(--page-h, 270px);
+        overflow: hidden;
+        background: var(--page);
+        padding: 16px 32px;
+      }
+
+      .store-head {
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        margin-bottom: 14px;
+      }
+
+      .store-name {
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: -0.01em;
+      }
+
+      .store-name small {
+        margin-left: 6px;
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--ink-2);
+      }
+
+      .cats {
+        display: flex;
+        gap: 4px;
+      }
+
+      .cats button {
+        padding: 5px 12px;
+        border: 0;
+        border-radius: 14px;
+        background: none;
+        color: var(--ink);
+        font: inherit;
+        cursor: pointer;
+      }
+
+      .cats button.on {
+        background: light-dark(#1f1f1f, #e3e3e3);
+        color: light-dark(#fff, #1f1f1f);
+      }
+
+      .cart {
+        margin-left: auto;
+        padding: 6px 14px;
+        border: 1px solid var(--line);
+        border-radius: 16px;
+        background: var(--card);
+        color: var(--ink);
+        font: inherit;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 16px;
+      }
+
+      .product {
+        border-radius: 10px;
+        background: var(--card);
+        border: 1px solid var(--line);
+        overflow: hidden;
+      }
+
+      .swatch {
+        height: clamp(36px, calc(var(--page-h, 270px) - 150px), 120px);
+      }
+
+      .product div.meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 12px;
+      }
+
+      .product button {
+        padding: 3px 10px;
+        border: 1px solid var(--line);
+        border-radius: 12px;
+        background: none;
+        color: var(--ink);
+        font:
+          12px system-ui,
+          sans-serif;
+        cursor: pointer;
+      }
+
+      /* ---- DevTools dock ---- */
+      .devtools {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        border-top: 1px solid var(--line);
+      }
+
+      .dt-tabs {
+        display: flex;
+        align-items: stretch;
+        height: 27px;
+        background: var(--dt-head);
+        border-bottom: 1px solid var(--line);
+        font-size: 12px;
+      }
+
+      .dt-tabs span {
+        display: flex;
+        align-items: center;
+        padding: 0 12px;
+        color: var(--ink-2);
+      }
+
+      .dt-tabs span.on {
+        color: var(--dt-blue);
+        box-shadow: inset 0 -2px 0 var(--dt-blue);
+      }
+
+      .dt-tabs .dt-end {
+        margin-left: auto;
+        letter-spacing: 2px;
+      }
+
+      iframe {
+        flex: 1;
+        width: 100%;
+        border: 0;
+        background: light-dark(#fff, #202124);
+      }
+
+      /* ---- presentation overlays (video only) ---- */
+      .caption {
+        position: absolute;
+        left: 50%;
+        bottom: 28px;
+        transform: translateX(-50%);
+        max-width: 940px;
+        padding: 12px 22px;
+        border-radius: 10px;
+        background: rgb(20 21 23 / 0.9);
+        color: #f1f3f4;
+        font-size: 18px;
+        line-height: 1.4;
+        text-align: center;
+        box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
+        transition: opacity 250ms;
+        z-index: 30;
+        pointer-events: none;
+      }
+
+      /* Lifted clear of the panel when a dialog fills its lower half. */
+      .caption.top {
+        top: 96px;
+        bottom: auto;
+      }
+
+      .caption:empty {
+        opacity: 0;
+      }
+
+      .callout {
+        position: absolute;
+        left: 50%;
+        top: 140px;
+        transform: translateX(-50%);
+        width: 720px;
+        padding: 16px 20px;
+        border-radius: 10px;
+        background: #202124;
+        color: #e3e3e3;
+        box-shadow: 0 8px 28px rgb(0 0 0 / 0.35);
+        z-index: 25;
+      }
+
+      .callout[hidden],
+      .card[hidden],
+      .menu[hidden] {
+        display: none;
+      }
+
+      .callout .label {
+        color: #a8acb1;
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+
+      .callout pre {
+        margin: 0;
+        font:
+          14px/1.5 ui-monospace,
+          Menlo,
+          Consolas,
+          monospace;
+        white-space: pre-wrap;
+      }
+
+      .callout .k {
+        color: #8ab4f8;
+      }
+
+      .callout .s {
+        color: #f29766;
+      }
+
+      .callout .hl {
+        background: rgb(253 214 99 / 0.25);
+        border-radius: 3px;
+      }
+
+      .card {
+        position: absolute;
+        inset: 0;
+        z-index: 40;
+        display: grid;
+        place-content: center;
+        justify-items: center;
+        gap: 14px;
+        background: rgb(17 18 20 / 0.94);
+        color: #f1f3f4;
+        text-align: center;
+      }
+
+      .card img {
+        width: 96px;
+        height: 96px;
+        border-radius: 20px;
+        image-rendering: auto;
+      }
+
+      .card h1 {
+        margin: 6px 0 0;
+        font-size: 44px;
+        letter-spacing: -0.02em;
+      }
+
+      .card p {
+        margin: 0;
+        font-size: 22px;
+        color: #c4c7cc;
+      }
+
+      .cursor {
+        position: absolute;
+        left: 640px;
+        top: 400px;
+        width: 22px;
+        height: 22px;
+        z-index: 50;
+        pointer-events: none;
+        transition:
+          left 550ms cubic-bezier(0.2, 0, 0, 1),
+          top 550ms cubic-bezier(0.2, 0, 0, 1);
+        filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
+      }
+
+      .cursor[hidden] {
+        display: none;
+      }
+
+      .cursor::after {
+        content: '';
+        position: absolute;
+        left: -9px;
+        top: -9px;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: rgb(11 87 208 / 0.35);
+        transform: scale(0);
+        opacity: 0;
+      }
+
+      .cursor.click::after {
+        animation: ripple 380ms ease-out;
+      }
+
+      @keyframes ripple {
+        from {
+          transform: scale(0.4);
+          opacity: 1;
+        }
+
+        to {
+          transform: scale(2.2);
+          opacity: 0;
+        }
+      }
+
+      /* right-click menu on the extension icon (toolbar screenshot) */
+      .menu {
+        position: absolute;
+        right: 18px;
+        top: 76px;
+        z-index: 35;
+        width: 230px;
+        padding: 6px 0;
+        border-radius: 8px;
+        background: light-dark(#fff, #303134);
+        border: 1px solid var(--line);
+        box-shadow:
+          0 2px 6px rgb(0 0 0 / 0.18),
+          0 8px 24px rgb(0 0 0 / 0.14);
+      }
+
+      .menu div {
+        padding: 7px 16px;
+      }
+
+      .menu div.muted {
+        color: var(--ink-2);
+      }
+
+      .menu div.hi {
+        background: light-dark(#e8f0fe, #3c4043);
+      }
+
+      .menu hr {
+        margin: 6px 0;
+        border: 0;
+        border-top: 1px solid var(--line);
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="window">
+      <div class="tabs">
+        <div class="dots"><i></i><i></i><i></i></div>
+        <div class="tab"><span class="favicon">S</span>Shopfront demo store</div>
+      </div>
+      <div class="toolbar">
+        <svg class="nav-icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" /></svg>
+        <svg class="nav-icon" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>
+        <svg class="nav-icon" viewBox="0 0 24 24">
+          <path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5" />
+        </svg>
+        <div class="omnibox">
+          <span>https://<b>shop.example.com</b>/catalog/<span id="omni-path">all</span></span>
+        </div>
+        <div class="ext" id="ext">
+          <img src="icons/icon32.png" alt="" /><span class="badge" id="badge" hidden>OFF</span>
+        </div>
+      </div>
+      <div class="chrome-infobar" id="chrome-infobar" hidden>
+        “APQ Debugger” started debugging this browser
+        <button type="button">Cancel</button>
+      </div>
+      <div class="page" id="page">
+        <div class="store-head">
+          <div class="store-name">Shopfront<small>demo</small></div>
+          <div class="cats" id="cats">
+            <button type="button" class="on" data-cat="all">All</button>
+            <button type="button" data-cat="outerwear">Outerwear</button>
+            <button type="button" data-cat="shoes">Shoes</button>
+            <button type="button" data-cat="accessories">Accessories</button>
+          </div>
+          <button type="button" class="cart" id="cart">
+            Cart · <span id="cart-count">0</span>
+          </button>
+        </div>
+        <div class="grid" id="grid"></div>
+      </div>
+      <div class="devtools">
+        <div class="dt-tabs">
+          <span>Elements</span><span>Console</span><span>Sources</span><span>Network</span
+          ><span>Application</span><span class="on">APQ Debugger</span><span class="dt-end">⋮</span>
+        </div>
+        <iframe id="panel" src="devtools.html" title="APQ Debugger panel"></iframe>
+      </div>
+
+      <div class="callout" id="callout" hidden>
+        <div class="label">Network › Payload · POST https://api.shop.example.com/graphql</div>
+        <pre>{<span class="k">"operationName"</span>: <span class="s">"ProductListing"</span>,
+ <span class="k">"variables"</span>: {<span class="k">"first"</span>: 24, <span class="k">"filter"</span>: {<span class="k">"category"</span>: <span class="s">"outerwear"</span>}},
+ <span class="k">"extensions"</span>: {<span class="k">"persistedQuery"</span>: {<span class="k">"version"</span>: 1,
+   <span class="k">"sha256Hash"</span>: <span class="s hl">"7a1f0c2e9b8d4e6f3a5c1b2d0e9f8a7b…"</span>}}}</pre>
+      </div>
+      <div class="card" id="card" hidden>
+        <img src="icons/icon128.png" alt="" />
+        <h1 id="card-title">APQ Debugger</h1>
+        <p id="card-line"></p>
+      </div>
+      <div class="menu" id="menu" hidden>
+        <div class="muted">APQ Debugger</div>
+        <hr />
+        <div class="hi">Toggle APQ Debugger</div>
+        <hr />
+        <div>Unpin</div>
+        <div>Remove from Chrome…</div>
+        <div>Manage extension</div>
+      </div>
+      <div class="caption" id="caption"></div>
+      <svg class="cursor" id="cursor" viewBox="0 0 22 22" hidden>
+        <path
+          d="M3 2l15 9-6.5 1.3L9 19z"
+          fill="#fff"
+          stroke="#1f1f1f"
+          stroke-width="1.4"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+
+    <script src="stage.js"></script>
+  </body>
+</html>
diff --git a/scripts/promo/stage.js b/scripts/promo/stage.js
new file mode 100644
index 0000000..0400a54
--- /dev/null
+++ b/scripts/promo/stage.js
@@ -0,0 +1,129 @@
+/**
+ * Promo stage helpers, driven from Playwright through window.stage.
+ * Draws the fictional demo store and the presentation overlays
+ * (captions, cursor, title cards) around the real panel iframe.
+ */
+
+const PRODUCTS = {
+  all: [
+    ['Field jacket', '#7a8b6f', '$148'],
+    ['Trail runner', '#c4643c', '$112'],
+    ['Wool beanie', '#3e5c7a', '$28'],
+    ['Canvas tote', '#d8c39a', '$36'],
+  ],
+  outerwear: [
+    ['Field jacket', '#7a8b6f', '$148'],
+    ['Rain shell', '#2f6f8f', '$164'],
+    ['Quilted vest', '#8f4f3a', '$96'],
+    ['Wool overcoat', '#4b4b55', '$228'],
+  ],
+  shoes: [
+    ['Trail runner', '#c4643c', '$112'],
+    ['Court sneaker', '#e6e1d6', '$88'],
+    ['Desert boot', '#a07850', '$134'],
+    ['Slip-on', '#3a3a3a', '$64'],
+  ],
+  accessories: [
+    ['Wool beanie', '#3e5c7a', '$28'],
+    ['Canvas tote', '#d8c39a', '$36'],
+    ['Leather belt', '#5a3a28', '$42'],
+    ['Sunglasses', '#2b2b2b', '$72'],
+  ],
+};
+
+function renderGrid(cat) {
+  const grid = document.getElementById('grid');
+  grid.textContent = '';
+  for (const [name, color, price] of PRODUCTS[cat] || PRODUCTS.all) {
+    const card = document.createElement('div');
+    card.className = 'product';
+    card.innerHTML = `<div class="swatch" style="background:${color}"></div>
+      <div class="meta"><span>${name} · ${price}</span><button type="button" class="add">Add</button></div>`;
+    grid.appendChild(card);
+  }
+}
+
+const $ = (id) => document.getElementById(id);
+
+window.stage = {
+  setTheme(dark) {
+    document.documentElement.classList.toggle('dark', dark);
+  },
+  setPageHeight(px) {
+    document.documentElement.style.setProperty('--page-h', `${px}px`);
+  },
+  setCategory(cat) {
+    document.querySelectorAll('#cats button').forEach((b) => {
+      b.classList.toggle('on', b.dataset.cat === cat);
+    });
+    $('omni-path').textContent = cat;
+    renderGrid(cat);
+  },
+  setCart(n) {
+    $('cart-count').textContent = String(n);
+  },
+  /** @param {'on'|'off'|null} state */
+  setBadge(state) {
+    const badge = $('badge');
+    badge.hidden = !state;
+    if (state) {
+      badge.textContent = state.toUpperCase();
+      badge.classList.toggle('on', state === 'on');
+    }
+  },
+  setChromeInfobar(show) {
+    $('chrome-infobar').hidden = !show;
+  },
+  caption(text, placement) {
+    const caption = $('caption');
+    caption.textContent = text || '';
+    caption.classList.toggle('top', placement === 'top');
+  },
+  callout(show) {
+    $('callout').hidden = !show;
+  },
+  card(title, line) {
+    const card = $('card');
+    if (!title) {
+      card.hidden = true;
+      return;
+    }
+    $('card-title').textContent = title;
+    $('card-line').textContent = line || '';
+    card.hidden = false;
+  },
+  menu(show) {
+    $('menu').hidden = !show;
+    $('ext').classList.toggle('pressed', show);
+  },
+  cursorTo(x, y) {
+    const c = $('cursor');
+    c.removeAttribute('hidden'); // SVG elements have no .hidden property
+    c.style.left = `${x}px`;
+    c.style.top = `${y}px`;
+  },
+  hideCursor() {
+    $('cursor').setAttribute('hidden', '');
+  },
+  cursorClick() {
+    const c = $('cursor');
+    c.classList.remove('click');
+    void c.getBoundingClientRect();
+    c.classList.add('click');
+  },
+};
+
+// The panel iframe reports start/stop (from the mocked service worker in
+// lib.js) so the toolbar badge and Chrome's infobar follow it, as in Chrome.
+window.addEventListener('message', (event) => {
+  const msg = event.data && event.data.apqDemo;
+  if (msg === 'started') {
+    window.stage.setBadge('on');
+    window.stage.setChromeInfobar(true);
+  } else if (msg === 'stopped') {
+    window.stage.setBadge('off');
+    window.stage.setChromeInfobar(false);
+  }
+});
+
+renderGrid('all');
diff --git a/scripts/promo/tiles.html b/scripts/promo/tiles.html
new file mode 100644
index 0000000..bba5ee8
--- /dev/null
+++ b/scripts/promo/tiles.html
@@ -0,0 +1,290 @@
+<!doctype html>
+<html lang="en">
+  <!--
+  Chrome Web Store promo tiles. Each <section> is captured at its exact
+  size by scripts/promo/capture-screens.js. shots/ is filled with the
+  freshly captured store screenshots before this page loads.
+-->
+
+  <head>
+    <meta charset="UTF-8" />
+    <title>APQ Debugger promo tiles</title>
+    <style>
+      :root {
+        --bg: #202124;
+        --bg-2: #292a2d;
+        --line: #3c4043;
+        --text: #e3e3e3;
+        --text-2: #a8acb1;
+        --resolved: #81c995;
+        --pending: #fdd663;
+        --blue: #a8c7fa;
+        --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+        --mono: ui-monospace, Menlo, Consolas, 'Cascadia Mono', monospace;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        background: #111;
+        font-family: var(--ui);
+        color: var(--text);
+      }
+
+      section {
+        position: relative;
+        overflow: hidden;
+        background: var(--bg);
+        margin-bottom: 40px;
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .brand img {
+        border-radius: 18%;
+      }
+
+      .brand h1 {
+        margin: 0;
+        white-space: nowrap;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        line-height: 1.05;
+      }
+
+      .brand small {
+        display: block;
+        margin-top: 4px;
+        font-size: 0.42em;
+        font-weight: 500;
+        letter-spacing: 0;
+        color: var(--text-2);
+      }
+
+      .line {
+        margin: 0;
+        text-wrap: balance;
+        color: #c4c7cc;
+        line-height: 1.35;
+      }
+
+      /* the product's moment: a hash row resolving into its operation */
+      .resolve {
+        display: grid;
+        grid-template-columns: auto auto 1fr auto;
+        align-items: center;
+        gap: 12px;
+        padding: 0 14px;
+        border: 1px solid var(--line);
+        border-radius: 6px;
+        background: var(--bg-2);
+        font-family: var(--mono);
+      }
+
+      .resolve .hash {
+        color: var(--text-2);
+      }
+
+      .resolve .arrow {
+        color: var(--text-2);
+      }
+
+      .resolve .name {
+        font-family: var(--ui);
+        font-weight: 600;
+      }
+
+      .state {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        font-family: var(--ui);
+        font-weight: 600;
+        color: var(--resolved);
+      }
+
+      .state::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      .shot {
+        display: block;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
+      }
+
+      /* ---- small tile 440x280 ---- */
+      #small {
+        width: 440px;
+        height: 280px;
+        padding: 30px 30px 0;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      #small .brand h1 {
+        font-size: 30px;
+      }
+
+      #small .line {
+        font-size: 16px;
+      }
+
+      #small .resolve {
+        height: 40px;
+        margin-top: auto;
+        margin-bottom: 30px;
+        font-size: 13px;
+      }
+
+      /* ---- large tile 920x680 ---- */
+      #large {
+        width: 920px;
+        height: 680px;
+        padding: 44px 48px 0;
+      }
+
+      #large .head {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 32px;
+        margin-bottom: 30px;
+      }
+
+      #large .brand h1 {
+        font-size: 42px;
+      }
+
+      #large .line {
+        max-width: 400px;
+        font-size: 20px;
+      }
+
+      #large .shot {
+        width: 824px;
+      }
+
+      /* ---- marquee 1400x560 ---- */
+      #marquee {
+        width: 1400px;
+        height: 560px;
+        display: grid;
+        grid-template-columns: 560px 1fr;
+      }
+
+      #marquee .copy {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 22px;
+        padding: 0 40px 0 64px;
+      }
+
+      #marquee .brand h1 {
+        font-size: 46px;
+      }
+
+      #marquee .line {
+        font-size: 22px;
+      }
+
+      #marquee ul {
+        margin: 4px 0 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        gap: 10px;
+        font-size: 16px;
+        color: #c4c7cc;
+      }
+
+      #marquee li {
+        display: flex;
+        gap: 10px;
+        align-items: baseline;
+      }
+
+      #marquee li::before {
+        content: '';
+        flex: none;
+        width: 7px;
+        height: 7px;
+        margin-top: 7px;
+        border-radius: 50%;
+        background: var(--blue);
+        transform: translateY(-2px);
+      }
+
+      #marquee .resolve {
+        height: 44px;
+        font-size: 14px;
+      }
+
+      #marquee .stage {
+        position: relative;
+      }
+
+      #marquee .shot {
+        position: absolute;
+        left: 0;
+        top: 56px;
+        width: 1020px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section id="small">
+      <div class="brand">
+        <img src="icons/icon128.png" width="64" height="64" alt="" />
+        <h1>APQ Debugger<small>for Chrome DevTools</small></h1>
+      </div>
+      <p class="line">See the GraphQL behind every Apollo persisted-query hash.</p>
+      <div class="resolve">
+        <span class="hash">7a1f0c2e</span><span class="arrow">→</span
+        ><span class="name">ProductListing</span><span class="state">Resolved</span>
+      </div>
+    </section>
+
+    <section id="large">
+      <div class="head">
+        <div class="brand">
+          <img src="icons/icon128.png" width="84" height="84" alt="" />
+          <h1>APQ Debugger<small>for Chrome DevTools</small></h1>
+        </div>
+        <p class="line">See the full GraphQL query behind every Apollo persisted-query hash.</p>
+      </div>
+      <img class="shot" src="shots/01-requests-dark.png" alt="" />
+    </section>
+
+    <section id="marquee">
+      <div class="copy">
+        <div class="brand">
+          <img src="icons/icon128.png" width="88" height="88" alt="" />
+          <h1>APQ Debugger<small>for Chrome DevTools</small></h1>
+        </div>
+        <p class="line">See the full GraphQL query behind every Apollo persisted-query hash.</p>
+        <ul>
+          <li>Swaps the hash so Apollo retries with the full query</li>
+          <li>Shows each query and its variables, ready to copy or replay as cURL</li>
+          <li>Passive mode resolves known hashes without touching traffic</li>
+        </ul>
+      </div>
+      <div class="stage"><img class="shot" src="shots/01-requests-dark.png" alt="" /></div>
+    </section>
+  </body>
+</html>
diff --git a/scripts/sync-version.js b/scripts/sync-version.js
index 4dd0e56..1a69464 100644
--- a/scripts/sync-version.js
+++ b/scripts/sync-version.js
@@ -19,11 +19,17 @@ const pkgPath = path.join(rootDir, 'package.json');
 const manifestPath = path.join(rootDir, 'manifest.json');
 
 const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+const manifestText = fs.readFileSync(manifestPath, 'utf8');
+const manifest = JSON.parse(manifestText);
 
 if (manifest.version !== pkg.version) {
-  manifest.version = pkg.version;
-  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
+  // Replace only the version value so the Prettier layout survives
+  // (re-serializing with JSON.stringify expands one-line arrays).
+  const updated = manifestText.replace(
+    /("version"\s*:\s*)"[^"]*"/,
+    (_, key) => `${key}${JSON.stringify(pkg.version)}`
+  );
+  fs.writeFileSync(manifestPath, updated);
   console.log(`Synced manifest.json version to ${pkg.version}`);
 } else {
   console.log(`manifest.json already at version ${pkg.version}`);
diff --git a/store/promo/screenshots/01-requests-dark.png b/store/promo/screenshots/01-requests-dark.png
new file mode 100644
index 0000000..bd9ae7a
Binary files /dev/null and b/store/promo/screenshots/01-requests-dark.png differ
diff --git a/store/promo/screenshots/02-request-detail.png b/store/promo/screenshots/02-request-detail.png
new file mode 100644
index 0000000..a94044a
Binary files /dev/null and b/store/promo/screenshots/02-request-detail.png differ
diff --git a/store/promo/screenshots/03-schema.png b/store/promo/screenshots/03-schema.png
new file mode 100644
index 0000000..cc76296
Binary files /dev/null and b/store/promo/screenshots/03-schema.png differ
diff --git a/store/promo/screenshots/04-requests-light.png b/store/promo/screenshots/04-requests-light.png
new file mode 100644
index 0000000..31e7468
Binary files /dev/null and b/store/promo/screenshots/04-requests-light.png differ
diff --git a/store/promo/screenshots/05-toolbar.png b/store/promo/screenshots/05-toolbar.png
new file mode 100644
index 0000000..9b3817c
Binary files /dev/null and b/store/promo/screenshots/05-toolbar.png differ
diff --git a/store/promo/screenshots/_preview-640x400/01-requests-dark.png b/store/promo/screenshots/_preview-640x400/01-requests-dark.png
new file mode 100644
index 0000000..4b96be7
Binary files /dev/null and b/store/promo/screenshots/_preview-640x400/01-requests-dark.png differ
diff --git a/store/promo/screenshots/_preview-640x400/02-request-detail.png b/store/promo/screenshots/_preview-640x400/02-request-detail.png
new file mode 100644
index 0000000..be99fb8
Binary files /dev/null and b/store/promo/screenshots/_preview-640x400/02-request-detail.png differ
diff --git a/store/promo/screenshots/_preview-640x400/03-schema.png b/store/promo/screenshots/_preview-640x400/03-schema.png
new file mode 100644
index 0000000..af6f693
Binary files /dev/null and b/store/promo/screenshots/_preview-640x400/03-schema.png differ
diff --git a/store/promo/screenshots/_preview-640x400/04-requests-light.png b/store/promo/screenshots/_preview-640x400/04-requests-light.png
new file mode 100644
index 0000000..8420ccd
Binary files /dev/null and b/store/promo/screenshots/_preview-640x400/04-requests-light.png differ
diff --git a/store/promo/screenshots/_preview-640x400/05-toolbar.png b/store/promo/screenshots/_preview-640x400/05-toolbar.png
new file mode 100644
index 0000000..eb18e5a
Binary files /dev/null and b/store/promo/screenshots/_preview-640x400/05-toolbar.png differ
diff --git a/store/promo/tiles/large-920x680.png b/store/promo/tiles/large-920x680.png
new file mode 100644
index 0000000..63e9cb6
Binary files /dev/null and b/store/promo/tiles/large-920x680.png differ
diff --git a/store/promo/tiles/marquee-1400x560.png b/store/promo/tiles/marquee-1400x560.png
new file mode 100644
index 0000000..4c46de2
Binary files /dev/null and b/store/promo/tiles/marquee-1400x560.png differ
diff --git a/store/promo/tiles/small-440x280.png b/store/promo/tiles/small-440x280.png
new file mode 100644
index 0000000..b55e518
Binary files /dev/null and b/store/promo/tiles/small-440x280.png differ
diff --git a/store/promo/video/apq-debugger-demo-poster.png b/store/promo/video/apq-debugger-demo-poster.png
new file mode 100644
index 0000000..928504d
Binary files /dev/null and b/store/promo/video/apq-debugger-demo-poster.png differ
diff --git a/store/promo/video/apq-debugger-demo.mp4 b/store/promo/video/apq-debugger-demo.mp4
new file mode 100644
index 0000000..eb9c17b
Binary files /dev/null and b/store/promo/video/apq-debugger-demo.mp4 differ
diff --git a/store/promo/video/demo-script.md b/store/promo/video/demo-script.md
new file mode 100644
index 0000000..2f01996
--- /dev/null
+++ b/store/promo/video/demo-script.md
@@ -0,0 +1,74 @@
+# APQ Debugger: demo video script
+
+**Length:** about 80 seconds · **Frame:** 1280×800 (store screenshot size), 30 fps, MP4 (H.264) · **Audio:** none; on-screen captions carry the narration so the video works muted (Web Store and social autoplay are muted).
+
+**Recording:** `npm run build && npm run promo:video` runs `scripts/promo/record-demo.js`, which performs every action below in order with the caption shown in the lower third. Timings are approximate; the recorder holds each scene long enough to read its caption.
+
+**Setting:** a fictional demo store, `shop.example.com`, in a Chrome window with DevTools docked at the bottom and the APQ Debugger panel open. All traffic is synthetic and every name, hash and URL is invented. The panel itself is the real extension UI.
+
+**Cursor:** a visible pointer moves to each target before it is clicked, so viewers can follow the action without narration.
+
+---
+
+## Scene 1 · Title (0:00–0:05)
+
+- **Screen:** title card over the dimmed browser frame. App icon, "APQ Debugger", line: "See the GraphQL behind every persisted-query hash."
+- **Caption:** none.
+
+## Scene 2 · The problem (0:05–0:13)
+
+- **Screen:** the demo store with DevTools docked. A request-payload callout appears over the page: `{"operationName":"ProductListing","extensions":{"persistedQuery":{"sha256Hash":"7a1f0c2e…"}}}`.
+- **Caption:** "Apollo's Automatic Persisted Queries send a SHA-256 hash, not the query. The Network panel can't show you what ran."
+
+## Scene 3 · Set a pattern (0:13–0:21)
+
+- **Action:** on first run the **Patterns** pane is already open (no pattern is saved yet). Click the pattern field and type `*graphql*`.
+- **Caption:** "Tell APQ Debugger which requests to watch."
+
+## Scene 4 · Start (0:21–0:27)
+
+- **Action:** click **Start**. The yellow live bar appears ("Intercepting requests matching `*graphql*`") with its one-time note about Chrome's own "started debugging" bar, which Chrome also shows at the top of the window; the toolbar icon badge turns **ON**. Click **Got it** to dismiss the note, then click **Patterns** to fold the pane away and give the list room.
+- **Caption:** "Press Start (Ctrl+E). The bar stays up whenever requests are being rewritten."
+
+## Scene 5 · Browse and watch hashes resolve (0:27–0:38)
+
+- **Action:** click **Outerwear** in the store. Hash-only rows arrive as **Awaiting retry**; a moment later each retry lands and its row flips to **Resolved** with a flash. A telemetry hash from a server without APQ fallback stays **Awaiting retry**. Then click **Add** on a product: the cart mutation arrives as a plain **Full query**, and the cart refresh resolves like the others.
+- **Caption:** "Each hash is swapped, the server asks for the full query, and Apollo retries. The row resolves in place."
+
+## Scene 6 · Read the query (0:38–0:48)
+
+- **Action:** click the **ProductListing** resolved row. The detail pane shows the formatted, highlighted query. Click **Copy** on the query; then click the **Variables** link.
+- **Caption:** "Open any operation to read and copy the full query and its variables."
+
+## Scene 7 · Copy as cURL (0:48–1:00)
+
+- **Action:** click **Copy as cURL** in the detail pane. The dialog opens on the **Bash** command, built from the captured URL, the operation body and the request headers captured from the page. Click **PowerShell** to show the `Invoke-RestMethod` form, click **Copy** (it reads "Copied"), then close the dialog.
+- **Caption:** "Copy as cURL to replay it from a terminal, with the headers captured from the page."
+
+## Scene 8 · Find things fast (1:00–1:06)
+
+- **Action:** click the filter, type `Cart`; then clear it and click the **APQ** type filter, then **All**.
+- **Caption:** "Filter by name, URL or request type."
+
+## Scene 9 · Browse the schema (1:06–1:14)
+
+- **Action:** click the **Schema** tab, click **Load schema**, then click the `Product` type in the list.
+- **Caption:** "Load the schema by introspection, reusing the headers from live traffic."
+
+## Scene 10 · Stop (1:14–1:21)
+
+- **Action:** click the **Requests** tab, then **Stop**. The live bar disappears, the badge turns **OFF**, and a recap toast reads how many hashes resolved.
+- **Caption:** "Stop when you're done. Everything stays local to your browser."
+
+## Scene 11 · End card (1:21–1:27)
+
+- **Screen:** end card: app icon, "APQ Debugger", "A Chrome DevTools panel for Apollo APQ".
+- **Caption:** none.
+
+---
+
+## Rules for re-shooting
+
+- Keep claims factual: no user counts, ratings, prices or "free" claims unless they are true at the time of publishing.
+- Use only `example.com` hosts in demo traffic. Never show a real company's domain or data.
+- If the panel UI changes, re-record. The video must match the shipped extension.
diff --git a/store/store-description.md b/store/store-description.md
index 33bcff2..acdc64f 100644
--- a/store/store-description.md
+++ b/store/store-description.md
@@ -54,17 +54,22 @@ English
 
 ## Screenshots
 
-The following screenshots should be prepared and included in the store listing:
+Generated from the real panel UI by `npm run build && npm run promo:screens` (see `scripts/promo/`). 1280×800 files in `store/promo/screenshots/`, 640×400 copies in `store/promo/screenshots/_preview-640x400/`. All traffic is synthetic and uses `example.com` hosts.
 
-1. **Main panel (dark mode)** — DevTools panel showing the request list with several intercepted requests, the URL pattern configuration, and the "Active" status badge.
+1. **`01-requests-dark.png`** — Live interception (dark): the yellow "Intercepting" bar, operations grouped by endpoint with Resolved / APQ retry / Awaiting retry states, and ProductListing's recovered query in the detail pane.
+2. **`02-request-detail.png`** — Light theme: a resolved hash with its formatted query, hash, Copy as cURL and the link to its retry request.
+3. **`03-schema.png`** — Schema tab (dark): types loaded by introspection, `Product` selected.
+4. **`04-requests-light.png`** — Patterns pane open (two URL patterns, passive mode, endpoints seen on the page) while a hash row resolves in place.
+5. **`05-toolbar.png`** — The toolbar icon with the ON badge and its right-click "Toggle APQ Debugger" item, with Chrome's "started debugging" bar.
 
-2. **Request detail (dark mode)** — Detail panel open showing a full GraphQL query with syntax highlighting, operation name, variables, and the copy button.
+## Promotional Images
 
-3. **Main panel (light mode)** — Same as screenshot 1 but with the light theme to show both theme variants.
+Generated by the same command into `store/promo/tiles/`:
 
-4. **Toolbar toggle** — The browser toolbar showing the APQ Debugger icon with the "ON" badge and the right-click context menu with "Toggle APQ Debugger".
+- **Small tile (440×280):** `small-440x280.png` — icon, name, "See the GraphQL behind every Apollo persisted-query hash." and a hash → operation "Resolved" row.
+- **Large tile (920×680):** `large-920x680.png` — name and line over screenshot 1.
+- **Marquee (1400×560):** `marquee-1400x560.png` — name, line and three feature points beside screenshot 1.
 
-## Promotional Images
+## Demo video
 
-- **Small tile (440x280):** APQ Debugger logo with tagline "Debug Apollo Persisted Queries in DevTools"
-- **Large tile (920x680):** Logo + screenshot of the DevTools panel in action, with feature highlights overlaid
+`store/promo/video/apq-debugger-demo.mp4` (1280×800, H.264, ~68 s, no audio; captions on screen) with a poster frame, recorded by `npm run promo:video` following `store/promo/video/demo-script.md`. The Web Store takes a YouTube link for video, so upload the MP4 to YouTube and paste the URL into the listing.
diff --git a/tests/e2e/extension.spec.js b/tests/e2e/extension.spec.js
index 40533c6..25f0b50 100644
--- a/tests/e2e/extension.spec.js
+++ b/tests/e2e/extension.spec.js
@@ -16,9 +16,19 @@ test.describe('APQ Debugger Extension', () => {
       ],
     });
 
-    // Parse extension ID from Service Worker
+    // Parse extension ID from Service Worker. The worker may register
+    // before or after this point, so poll rather than rely on one event.
     let [background] = context.serviceWorkers();
-    if (!background) background = await context.waitForEvent('serviceworker');
+    if (!background) {
+      const deadline = Date.now() + 20000;
+      while (!background && Date.now() < deadline) {
+        background = await Promise.race([
+          context.waitForEvent('serviceworker', { timeout: 1000 }).catch(() => null),
+          new Promise((resolve) => setTimeout(() => resolve(null), 1000)),
+        ]);
+        if (!background) [background] = context.serviceWorkers();
+      }
+    }
 
     extensionId = background.url().split('/')[2];
     expect(extensionId).toBeDefined();
@@ -36,6 +46,15 @@ test.describe('APQ Debugger Extension', () => {
         inspectedWindow: { tabId: 123 },
         panels: { create: () => {} },
       };
+      // Capture the panel's onMessage listeners so tests can deliver
+      // service-worker messages (e.g. INTERCEPTED) directly.
+      const listeners = [];
+      const addListener = chrome.runtime.onMessage.addListener.bind(chrome.runtime.onMessage);
+      chrome.runtime.onMessage.addListener = (fn) => {
+        listeners.push(fn);
+        return addListener(fn);
+      };
+      window.__deliver = (message) => listeners.forEach((fn) => fn(message, {}, () => {}));
     });
     await page.goto(`chrome-extension://${extensionId}/devtools.html`);
     await page.waitForLoadState('domcontentloaded');
@@ -50,7 +69,7 @@ test.describe('APQ Debugger Extension', () => {
     const page = await openDevToolsPage();
 
     await expect(page.locator('#add')).toBeVisible();
-    await expect(page.locator('#debugger-status')).toContainText('Ready');
+    await expect(page.locator('#debugger-status')).toContainText('Off');
     await expect(page.locator('#form-submit')).toContainText('Start');
     await expect(page.locator('#interception-counter')).toContainText('0');
   });
@@ -123,9 +142,9 @@ test.describe('APQ Debugger Extension', () => {
     const startBtn = page.locator('#form-submit');
     await startBtn.click();
 
-    // Button should change state (either show "Starting..." or change to "Stop" on success,
+    // Button should change state (either show "Starting…" or change to "Stop" on success,
     // or show error status since we can't actually attach in this context)
-    await expect(page.locator('#debugger-status')).not.toContainText('Ready');
+    await expect(page.locator('#debugger-status')).not.toContainText('Off');
   });
 
   test('should show error when starting with empty pattern', async () => {
@@ -134,12 +153,11 @@ test.describe('APQ Debugger Extension', () => {
     // Leave pattern empty and click Start
     await page.locator('#form-submit').click();
 
-    // Should show error in status banner
+    // Should show an error toast in the stack
     await page.waitForTimeout(300);
-    const bannerText = page.locator('#status-banner-text');
-    const bannerContent = await bannerText.textContent();
-    // Either the banner shows an error or the status changes from Ready
-    expect(bannerContent.length).toBeGreaterThan(0);
+    const toastText = page.locator('#status-banner .toast .toast-text');
+    const toastContent = await toastText.first().textContent();
+    expect(toastContent.length).toBeGreaterThan(0);
   });
 
   // ── Filter chips ───────────────────────────────────────────────
@@ -176,8 +194,8 @@ test.describe('APQ Debugger Extension', () => {
     const page = await openDevToolsPage();
 
     await expect(page.locator('#empty-state')).toBeVisible();
-    await expect(page.locator('.empty-title')).toContainText('No requests');
-    await expect(page.locator('.empty-desc')).toContainText('Start debugging');
+    await expect(page.locator('#empty-title')).toContainText('No operations captured');
+    await expect(page.locator('#empty-steps')).toContainText('Start');
   });
 
   // ── Detail panel ───────────────────────────────────────────────
@@ -189,6 +207,36 @@ test.describe('APQ Debugger Extension', () => {
     await expect(detailContent).toContainText('Select a request');
   });
 
+  test('should open Copy as cURL with a reachable Copy button', async () => {
+    const page = await openDevToolsPage();
+
+    // Deliver a captured request the way the service worker does, with a
+    // long single-line query so the cURL preview is much wider than the panel.
+    const longQuery = `query Long { ${Array.from({ length: 80 }, (_, i) => `field${i}`).join(' ')} }`;
+    await page.evaluate(
+      ({ query }) =>
+        window.__deliver({
+          status: 'INTERCEPTED',
+          tabId: 123,
+          operationName: 'Long',
+          url: 'https://api.example.com/graphql',
+          isAPQ: false,
+          query,
+          headers: [{ name: 'content-type', value: 'application/json' }],
+        }),
+      { query: longQuery }
+    );
+
+    await page.locator('.request-item').first().click();
+    await page.locator('#btn-copy-curl').click();
+
+    await expect(page.locator('#curl-modal')).toBeVisible();
+    await expect(page.locator('#curl-preview')).toContainText('curl ');
+    await expect(page.locator('#curl-modal .modal-panel')).toBeInViewport({ ratio: 1 });
+    await expect(page.locator('#curl-copy-btn')).toBeInViewport();
+    await page.locator('#curl-copy-btn').click({ timeout: 5000 });
+  });
+
   // ── Accessibility ──────────────────────────────────────────────
 
   test('should have accessible elements with ARIA attributes', async () => {
@@ -208,8 +256,9 @@ test.describe('APQ Debugger Extension', () => {
     // Request list has role="listbox"
     await expect(page.locator('#request-list')).toHaveAttribute('role', 'listbox');
 
-    // Status banner has role="alert"
-    await expect(page.locator('#status-banner')).toHaveAttribute('role', 'alert');
+    // Toast stack is a polite live region; error toasts get role="alert"
+    await expect(page.locator('#status-banner')).toHaveAttribute('role', 'status');
+    await expect(page.locator('#status-banner')).toHaveAttribute('aria-live', 'polite');
   });
 
   // ── Filter input ───────────────────────────────────────────────
@@ -234,10 +283,10 @@ test.describe('APQ Debugger Extension', () => {
     await expect(page.locator('#settings-popover')).toBeVisible();
     await expect(settingsBtn).toHaveAttribute('aria-expanded', 'true');
 
-    await page.locator('.settings-option:has(input[name="theme"][value="dark"])').click();
+    await page.locator('.menu-option:has(input[name="theme"][value="dark"])').click();
     await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
 
-    await page.locator('.settings-option:has(input[name="density"][value="compact"])').click();
+    await page.locator('.menu-option:has(input[name="density"][value="compact"])').click();
     await expect(page.locator('html')).toHaveAttribute('data-density', 'compact');
 
     await page.waitForTimeout(300);
@@ -246,17 +295,23 @@ test.describe('APQ Debugger Extension', () => {
     await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
   });
 
-  test('should toggle sidebar via header button', async () => {
+  test('should toggle the patterns pane from the toolbar', async () => {
     const page = await openDevToolsPage();
 
-    const toggleBtn = page.locator('#btn-toggle-sidebar');
+    const toggleBtn = page.locator('#btn-toggle-patterns');
+    const pane = page.locator('#patterns-pane');
     await expect(toggleBtn).toBeVisible();
 
+    // First run (no saved patterns): the pane starts open
+    await expect(pane).toBeVisible();
+    await expect(toggleBtn).toHaveAttribute('aria-expanded', 'true');
+
     await toggleBtn.click();
-    await expect(page.locator('.app')).toHaveClass(/sidebar-collapsed/);
+    await expect(pane).toBeHidden();
+    await expect(toggleBtn).toHaveAttribute('aria-expanded', 'false');
 
     await toggleBtn.click();
-    await expect(page.locator('.app')).not.toHaveClass(/sidebar-collapsed/);
+    await expect(pane).toBeVisible();
   });
 
   // ── Schema tab ─────────────────────────────────────────────────
@@ -266,7 +321,7 @@ test.describe('APQ Debugger Extension', () => {
 
     await page.locator('#tab-schema').click();
     await expect(page.locator('#schema-content')).toBeVisible();
-    await expect(page.locator('#btn-load-schema')).toContainText('Load Schema');
+    await expect(page.locator('#btn-load-schema')).toContainText('Load schema');
     await expect(page.locator('#schema-status')).toContainText('No schema loaded');
     await expect(page.locator('#schema-url-input')).toBeVisible();
   });
diff --git a/tests/unit/curl-copy.test.js b/tests/unit/curl-copy.test.js
index 4386e0b..86e5e01 100644
--- a/tests/unit/curl-copy.test.js
+++ b/tests/unit/curl-copy.test.js
@@ -102,6 +102,81 @@ describe('curl-copy', () => {
         })
       ).toEqual([{ name: 'User-Agent', value: 'Mozilla/5.0' }]);
     });
+
+    test('should collapse repeated names case-insensitively, keeping the last value', () => {
+      expect(
+        getReplayHeaders({
+          headers: [
+            { name: 'X-Trace', value: 'one' },
+            { name: 'Cookie', value: 'a=b' },
+            { name: 'x-trace', value: 'two' },
+          ],
+        })
+      ).toEqual([
+        { name: 'x-trace', value: 'two' },
+        { name: 'Cookie', value: 'a=b' },
+      ]);
+    });
+  });
+
+  describe('header de-duplication', () => {
+    const countMatches = (text, pattern) => (text.match(pattern) || []).length;
+
+    test('bash: a captured content-type replaces the default instead of repeating it', () => {
+      const curl = toBashCurl('https://x.com/gql', { query: '{}' }, [
+        { name: 'content-type', value: 'application/json; charset=utf-8' },
+      ]);
+
+      expect(countMatches(curl, /-H 'content-type:/gi)).toBe(1);
+      expect(curl).toContain("-H 'content-type: application/json; charset=utf-8'");
+      expect(curl).toContain("-H 'Accept: application/json'");
+    });
+
+    test('bash: a captured accept header replaces the default', () => {
+      const curl = toBashCurl('https://x.com/gql', { query: '{}' }, [
+        { name: 'accept', value: 'application/graphql-response+json' },
+      ]);
+
+      expect(countMatches(curl, /-H 'accept:/gi)).toBe(1);
+      expect(curl).toContain("-H 'accept: application/graphql-response+json'");
+      expect(curl).toContain("-H 'Content-Type: application/json'");
+    });
+
+    test('powershell: content-type goes to -ContentType, never the headers hashtable', () => {
+      const ps = toPowerShellCurl('https://x.com/gql', { query: '{}' }, [
+        { name: 'Content-Type', value: 'application/json; charset=utf-8' },
+        { name: 'Cookie', value: 'a=b' },
+      ]);
+
+      expect(ps).not.toMatch(/'content-type' =/i);
+      expect(ps).toContain('-ContentType "application/json; charset=utf-8"');
+      expect(ps).toContain("'Cookie' = 'a=b'");
+    });
+
+    test('powershell: no hashtable when content-type was the only captured header', () => {
+      const ps = toPowerShellCurl('https://x.com/gql', { query: '{}' }, [
+        { name: 'content-type', value: 'application/json' },
+      ]);
+
+      expect(ps).not.toContain('$headers');
+      expect(ps).toContain('-ContentType "application/json"');
+    });
+
+    test('the generated command for a captured request lists each header once', () => {
+      const request = {
+        ...sampleRequest,
+        headers: [
+          { name: 'content-type', value: 'application/json' },
+          { name: 'Accept', value: '*/*' },
+          { name: 'accept', value: 'application/json' },
+        ],
+      };
+      const curl = toBashCurl(request.url, buildGraphQLBody(request), getReplayHeaders(request));
+
+      expect(countMatches(curl, /-H 'content-type:/gi)).toBe(1);
+      expect(countMatches(curl, /-H 'accept:/gi)).toBe(1);
+      expect(curl).toContain("-H 'accept: application/json'");
+    });
   });
 
   describe('modal interactions', () => {
@@ -168,7 +243,7 @@ describe('curl-copy', () => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
         document.getElementById('curl-preview').textContent
       );
-      expect(copyBtn.textContent).toBe('Copied!');
+      expect(copyBtn.textContent).toBe('Copied');
     });
 
     test.each([
diff --git a/tests/unit/devtools.test.js b/tests/unit/devtools.test.js
index eabf4fe..7afc4aa 100644
--- a/tests/unit/devtools.test.js
+++ b/tests/unit/devtools.test.js
@@ -11,7 +11,8 @@ import {
 } from '../../js/ui/dom-helpers.js';
 import { state, MAX_HISTORY, inspectedTabId } from '../../js/ui/state.js';
 import { addRequest, getFilteredRequests, renderRequestList } from '../../js/ui/request-list.js';
-import { formatGraphQL } from '../../js/ui/request-detail.js';
+import { formatGraphQL, prettyPrintGraphQL } from '../../js/ui/request-detail.js';
+import { getRequestState } from '../../js/ui/request-state.js';
 import {
   updateDebuggerStatus,
   showStatusBanner,
@@ -39,16 +40,15 @@ import {
 import { initSchemaControls } from '../../js/ui/schema-controls.js';
 import { SCHEMA_STORAGE_KEY, SCHEMA_CACHE_STORAGE_KEY } from '../../js/shared/constants.js';
 import { initRequestList } from '../../js/ui/request-list.js';
+import { renderMetrics } from '../../js/ui/metrics.js';
 
 function setupDOM() {
   document.body.innerHTML = `
-        <div id="debugger-status" class="status-badge">
+        <div id="debugger-status" class="status">
             <span class="status-dot"></span>
             <span class="status-text">Ready</span>
         </div>
-        <div id="status-banner" class="status-banner hidden">
-            <span id="status-banner-text"></span>
-        </div>
+        <div id="status-banner" class="toast-stack hidden"></div>
         <span id="interception-counter">0</span>
         <div id="request-list">
             <div id="empty-state" style="display: flex;"></div>
@@ -63,13 +63,17 @@ function setupDOM() {
             </div>
         </form>
         <button id="add"></button>
-        <button id="form-submit" class="btn btn-primary btn-block">
-            <span class="btn-icon-play">&#9654;</span> Start
+        <button id="form-submit" class="tb-btn record-btn">
+            <span class="record-label">Start</span>
         </button>
         <input type="text" id="filter-input">
         <button class="chip active" data-filter="all">All</button>
         <button class="chip" data-filter="apq">APQ</button>
         <button class="chip" data-filter="full">Full</button>
+        <span id="metric-captured">0</span>
+        <span id="metric-resolved">0</span>
+        <span id="metric-operations">0</span>
+        <span id="metric-endpoints">0</span>
     `;
 }
 
@@ -80,12 +84,9 @@ function resetAppState() {
   state.selectedRequestId = null;
   state.activeFilter = 'all';
   state.filterText = '';
+  state.endpointFilter = '';
   state.requestHistory = [];
   state.requestIdCounter = 0;
-  if (state.statusBannerTimeout) {
-    clearTimeout(state.statusBannerTimeout);
-  }
-  state.statusBannerTimeout = null;
 }
 
 describe('DevTools Panel Logic', () => {
@@ -262,6 +263,31 @@ describe('DevTools Panel Logic', () => {
       expect(items.length).toBe(2);
     });
 
+    test('a full-query retry should resolve the matching hash row in place', () => {
+      const pending = addRequest({ operationName: 'GetUser', isAPQ: true, hash: 'abc' });
+      expect(pending.query).toBe('');
+
+      addRequest({
+        operationName: 'GetUser',
+        isAPQ: false,
+        hash: 'abc',
+        query: 'query GetUser { user { id } }',
+        variables: { id: 1 },
+      });
+
+      expect(pending.query).toBe('query GetUser { user { id } }');
+      expect(pending.variables).toEqual({ id: 1 });
+      const row = document.querySelector(`.request-item[data-request-id="${pending.id}"]`);
+      expect(row.textContent).toContain('Resolved');
+      expect(row.classList.contains('is-updated')).toBe(true);
+    });
+
+    test('a retry should not touch hash rows with a different hash', () => {
+      const other = addRequest({ operationName: 'A', isAPQ: true, hash: 'one' });
+      addRequest({ operationName: 'B', isAPQ: false, hash: 'two', query: 'query B { b }' });
+      expect(other.query).toBe('');
+    });
+
     test('renderRequestList should hide empty state when items present', () => {
       addRequest({ operationName: 'A' });
       renderRequestList();
@@ -302,6 +328,49 @@ describe('DevTools Panel Logic', () => {
       expect(result).toContain('&lt;script&gt;');
       expect(result).toContain('<span class="keyword">query</span>');
     });
+
+    test('formatGraphQL should keep variable names (not "$1")', () => {
+      const result = formatGraphQL(
+        'mutation AddToCart($input: CartLineInput!) { add(input: $input) }'
+      );
+      expect(result).toContain('<span class="variable">$input</span>');
+      expect(result).not.toContain('$1');
+    });
+
+    test('prettyPrintGraphQL should indent a single-line document', () => {
+      const pretty = prettyPrintGraphQL(
+        'query Q($id: ID!) { user(id: $id) { id name ... on Admin { level } } }'
+      );
+      expect(pretty).toBe(
+        [
+          'query Q($id: ID!) {',
+          '  user(id: $id) {',
+          '    id',
+          '    name',
+          '    ... on Admin {',
+          '      level',
+          '    }',
+          '  }',
+          '}',
+        ].join('\n')
+      );
+    });
+
+    test('prettyPrintGraphQL should leave strings and multi-line documents alone', () => {
+      expect(prettyPrintGraphQL('{ a(s: "x { y } z") }')).toBe('{\n  a(s: "x { y } z")\n}');
+      const formatted = 'query Q {\n  a\n}';
+      expect(prettyPrintGraphQL(formatted)).toBe(formatted);
+    });
+
+    test('getRequestState should describe each kind of row', () => {
+      expect(getRequestState({ type: 'apq', query: 'q', hash: 'h' }).key).toBe('resolved');
+      expect(getRequestState({ type: 'apq', query: '', hash: 'h' }).key).toBe('pending');
+      expect(
+        getRequestState({ type: 'apq', query: '', hash: 'h', capturedPassive: true }).key
+      ).toBe('unknown');
+      expect(getRequestState({ type: 'full', query: 'q', hash: 'h' }).key).toBe('retry');
+      expect(getRequestState({ type: 'full', query: 'q', hash: '' }).key).toBe('full');
+    });
   });
 
   // ── Status Management ──────────────────────────────────────────
@@ -329,74 +398,182 @@ describe('DevTools Panel Logic', () => {
 
     test('updateDebuggerStatus should reset classes for default type', () => {
       updateDebuggerStatus('Error', 'error');
-      updateDebuggerStatus('Ready', 'default');
+      updateDebuggerStatus('Detached', 'default');
       const badge = document.getElementById('debugger-status');
       expect(badge.classList.contains('error')).toBe(false);
-      expect(badge.className).toBe('status-badge');
+      expect(badge.className).toBe('status');
     });
 
-    test('showStatusBanner should display banner with message and type', () => {
+    test('showStatusBanner should append a toast with message and tone', () => {
       showStatusBanner('Test message', 'warning');
-      const banner = document.getElementById('status-banner');
-      const text = document.getElementById('status-banner-text');
-      expect(banner.classList.contains('hidden')).toBe(false);
-      expect(banner.classList.contains('warning')).toBe(true);
-      expect(text.textContent).toBe('Test message');
+      const stack = document.getElementById('status-banner');
+      expect(stack.classList.contains('hidden')).toBe(false);
+      const toast = stack.querySelector('.toast');
+      expect(toast).not.toBeNull();
+      expect(toast.classList.contains('toast--warning')).toBe(true);
+      expect(toast.textContent).toContain('Test message');
     });
 
-    test('showStatusBanner should auto-dismiss for success type', () => {
+    test('success toasts should auto-dismiss and hide the empty stack', () => {
       jest.useFakeTimers();
-      showStatusBanner('Success!', 'success');
-      const banner = document.getElementById('status-banner');
-      expect(banner.classList.contains('hidden')).toBe(false);
+      showStatusBanner('Success', 'success');
+      const stack = document.getElementById('status-banner');
+      expect(stack.classList.contains('hidden')).toBe(false);
 
       jest.advanceTimersByTime(5000);
-      expect(banner.classList.contains('hidden')).toBe(true);
+      expect(stack.querySelectorAll('.toast').length).toBe(0);
+      expect(stack.classList.contains('hidden')).toBe(true);
       jest.useRealTimers();
     });
 
-    test('showStatusBanner should auto-dismiss when autoDismiss is true', () => {
+    test('error toasts should persist until dismissed', () => {
       jest.useFakeTimers();
-      showStatusBanner('Info', 'default', true);
-      expect(state.statusBannerTimeout).not.toBeNull();
-
-      jest.advanceTimersByTime(5000);
-      const banner = document.getElementById('status-banner');
-      expect(banner.classList.contains('hidden')).toBe(true);
+      showStatusBanner('Broken', 'error');
+      const stack = document.getElementById('status-banner');
+      jest.advanceTimersByTime(10000);
+      const toast = stack.querySelector('.toast');
+      expect(toast).not.toBeNull();
+      expect(toast.getAttribute('role')).toBe('alert');
+
+      toast.querySelector('.toast-close').click();
+      expect(stack.querySelectorAll('.toast').length).toBe(0);
+      expect(stack.classList.contains('hidden')).toBe(true);
       jest.useRealTimers();
     });
 
-    test('showStatusBanner should clear previous timeout', () => {
+    test('toasts should stack and drop the oldest beyond the limit', () => {
       jest.useFakeTimers();
-      showStatusBanner('First', 'success');
-      const firstTimeout = state.statusBannerTimeout;
-      showStatusBanner('Second', 'warning');
-      // The first timeout should have been cleared (new timeout or null)
-      expect(state.statusBannerTimeout).not.toBe(firstTimeout);
+      for (let i = 1; i <= 5; i++) {
+        showStatusBanner(`Message ${i}`, 'error');
+      }
+      const stack = document.getElementById('status-banner');
+      const toasts = stack.querySelectorAll('.toast');
+      expect(toasts.length).toBe(4);
+      expect(toasts[0].textContent).toContain('Message 2');
       jest.useRealTimers();
     });
 
-    test('hideStatusBanner should hide banner and clear timeout', () => {
-      showStatusBanner('Temp message', 'default');
+    test('hideStatusBanner should clear all toasts', () => {
+      showStatusBanner('Temp message', 'error');
       hideStatusBanner();
-      const banner = document.getElementById('status-banner');
-      expect(banner.classList.contains('hidden')).toBe(true);
-      expect(state.statusBannerTimeout).toBeNull();
+      const stack = document.getElementById('status-banner');
+      expect(stack.classList.contains('hidden')).toBe(true);
+      expect(stack.querySelectorAll('.toast').length).toBe(0);
     });
 
-    test('showError should set error status and show error banner', () => {
+    test('showError should set error status and show a persistent toast', () => {
       const spy = jest.spyOn(console, 'error').mockImplementation();
       showError('Something went wrong');
       const badge = document.getElementById('debugger-status');
       const text = badge.querySelector('.status-text');
       expect(text.textContent).toBe('Error');
       expect(badge.classList.contains('error')).toBe(true);
-      const bannerText = document.getElementById('status-banner-text');
-      expect(bannerText.textContent).toBe('Something went wrong');
+      const toast = document.querySelector('#status-banner .toast');
+      expect(toast.textContent).toContain('Something went wrong');
       spy.mockRestore();
     });
   });
 
+  // ── Session Metrics ────────────────────────────────────────────
+
+  describe('Session Metrics', () => {
+    test('renderMetrics should compute captured, resolved hashes, operations, endpoints', () => {
+      state.requestHistory = [
+        {
+          id: 1,
+          timestamp: new Date(),
+          operationName: 'GetUser',
+          url: 'https://a.example.com/graphql',
+          type: 'apq',
+          query: 'query GetUser { user { id } }',
+        },
+        {
+          id: 2,
+          timestamp: new Date(),
+          operationName: 'GetUser',
+          url: 'https://a.example.com/graphql?x=1',
+          type: 'apq',
+          query: '',
+        },
+        {
+          id: 3,
+          timestamp: new Date(),
+          operationName: 'ListPosts',
+          url: 'https://b.example.com/api',
+          type: 'full',
+          query: 'query ListPosts { posts { id } }',
+        },
+      ];
+
+      renderMetrics();
+
+      expect(document.getElementById('metric-captured').textContent).toBe('3');
+      // Only APQ rows count as resolved hashes; full-query requests never had one
+      expect(document.getElementById('metric-resolved').textContent).toBe('1');
+      expect(document.getElementById('metric-operations').textContent).toBe('2');
+      expect(document.getElementById('metric-endpoints').textContent).toBe('2');
+    });
+
+    test('renderMetrics should render zeros for empty history', () => {
+      state.requestHistory = [];
+      renderMetrics();
+      expect(document.getElementById('metric-captured').textContent).toBe('0');
+      expect(document.getElementById('metric-endpoints').textContent).toBe('0');
+    });
+  });
+
+  // ── Endpoint grouping and filtering ────────────────────────────
+
+  describe('Endpoint grouping', () => {
+    const twoEndpointHistory = () => [
+      {
+        id: 1,
+        timestamp: new Date(),
+        operationName: 'GetUser',
+        url: 'https://a.example.com/graphql',
+        type: 'apq',
+        query: '',
+      },
+      {
+        id: 2,
+        timestamp: new Date(),
+        operationName: 'ListPosts',
+        url: 'https://b.example.com/api',
+        type: 'full',
+        query: '',
+      },
+    ];
+
+    test('renderRequestList should insert group headers when multiple endpoints have traffic', () => {
+      state.requestHistory = twoEndpointHistory();
+      renderRequestList();
+
+      const headers = document.querySelectorAll('#request-list .request-group-header');
+      expect(headers.length).toBe(2);
+      expect(document.querySelectorAll('#request-list .request-item').length).toBe(2);
+      expect(headers[0].getAttribute('role')).toBe('presentation');
+    });
+
+    test('renderRequestList should not group with a single endpoint', () => {
+      state.requestHistory = [twoEndpointHistory()[0]];
+      renderRequestList();
+
+      expect(document.querySelectorAll('#request-list .request-group-header').length).toBe(0);
+      expect(document.querySelectorAll('#request-list .request-item').length).toBe(1);
+    });
+
+    test('endpoint filter should narrow the list and disable grouping', () => {
+      state.requestHistory = twoEndpointHistory();
+      state.endpointFilter = 'https://a.example.com/graphql';
+      renderRequestList();
+
+      const items = document.querySelectorAll('#request-list .request-item');
+      expect(items.length).toBe(1);
+      expect(items[0].textContent).toContain('GetUser');
+      expect(document.querySelectorAll('#request-list .request-group-header').length).toBe(0);
+    });
+  });
+
   // ── Debugger Controls ──────────────────────────────────────────
 
   describe('Debugger Controls', () => {
@@ -406,7 +583,7 @@ describe('DevTools Panel Logic', () => {
       const btn = document.getElementById('form-submit');
       expect(btn.disabled).toBe(false);
       expect(btn.innerHTML).toContain('Start');
-      expect(btn.className).toContain('btn-primary');
+      expect(btn.classList.contains('is-recording')).toBe(false);
       expect(state.currentOperation).toBeNull();
     });
 
@@ -415,13 +592,14 @@ describe('DevTools Panel Logic', () => {
       const btn = document.getElementById('form-submit');
       expect(btn.disabled).toBe(false);
       expect(btn.innerHTML).toContain('Stop');
-      expect(btn.className).toContain('btn-danger');
+      expect(btn.classList.contains('is-recording')).toBe(true);
+      expect(btn.getAttribute('aria-pressed')).toBe('true');
     });
 
     test('handleStartSuccess should activate UI and set state', () => {
       handleStartSuccess('Connected');
       const badge = document.getElementById('debugger-status');
-      expect(badge.querySelector('.status-text').textContent).toBe('Active');
+      expect(badge.querySelector('.status-text').textContent).toBe('Intercepting');
       expect(badge.classList.contains('active')).toBe(true);
       expect(state.isDebuggerActive).toBe(true);
       const btn = document.getElementById('form-submit');
@@ -439,7 +617,7 @@ describe('DevTools Panel Logic', () => {
     test('handleStartError should show error and reset', () => {
       handleStartError('Connection failed');
       const badge = document.getElementById('debugger-status');
-      expect(badge.querySelector('.status-text').textContent).toBe('Failed');
+      expect(badge.querySelector('.status-text').textContent).toBe('Error');
       expect(badge.classList.contains('error')).toBe(true);
       const btn = document.getElementById('form-submit');
       expect(btn.innerHTML).toContain('Start');
@@ -451,7 +629,7 @@ describe('DevTools Panel Logic', () => {
       expect(state.isDebuggerActive).toBe(false);
       const btn = document.getElementById('form-submit');
       expect(btn.innerHTML).toContain('Start');
-      expect(btn.className).toContain('btn-primary');
+      expect(btn.classList.contains('is-recording')).toBe(false);
     });
 
     test('handleStopWarning should show warning and deactivate', () => {
diff --git a/tests/unit/sdl-highlighter.test.js b/tests/unit/sdl-highlighter.test.js
index 2054e72..6993ae1 100644
--- a/tests/unit/sdl-highlighter.test.js
+++ b/tests/unit/sdl-highlighter.test.js
@@ -40,4 +40,89 @@ describe('highlightSDL', () => {
     expect(html).not.toContain('<script>');
     expect(html).toContain('&lt;script&gt;');
   });
+
+  test('should not leak placeholders when a comment contains a string', () => {
+    const html = highlightSDL('type Query {\n  # legacy "name" field\n  id: ID\n}');
+
+    expect(html).toContain('<span class="comment"># legacy "name" field</span>');
+    expect(html).not.toMatch(/[-]/);
+  });
+
+  test('should highlight fields with arguments, argument names and defaults', () => {
+    const html = highlightSDL(
+      'type Query {\n  posts(first: Int = 10, order: Order = DESC, tags: [String] = ["a"]): [Post!]!\n}'
+    );
+
+    expect(html).toContain('<span class="field">posts</span>(');
+    expect(html).toContain('<span class="field">first</span>: <span class="builtin">Int</span>');
+    expect(html).toContain('<span class="number">10</span>');
+    expect(html).toContain(
+      '<span class="field">order</span>: <span class="type-name">Order</span>'
+    );
+    expect(html).toContain('<span class="enum-value">DESC</span>');
+    expect(html).toContain('<span class="string">"a"</span>');
+    expect(html).toContain('<span class="type-name">Post</span>');
+  });
+
+  test('should treat all-caps names in type position as types, not enum values', () => {
+    const html = highlightSDL('type Link {\n  href: URL\n}');
+
+    expect(html).toContain('<span class="type-name">URL</span>');
+  });
+
+  test('should treat directive arguments as values', () => {
+    const html = highlightSDL(
+      'type User @key(fields: "id") {\n  id: ID! @deprecated(reason: "no")\n}'
+    );
+
+    expect(html).toContain(
+      '<span class="directive">@key</span>(<span class="field">fields</span>: <span class="string">"id"</span>)'
+    );
+    expect(html).toContain('<span class="field">reason</span>: <span class="string">"no"</span>');
+  });
+
+  test('should highlight interfaces, unions and directive definitions', () => {
+    const html = highlightSDL(
+      'type User implements Node & Entity {\n  id: ID\n}\nunion Result = User | Post\n' +
+        'directive @auth(role: Role = ADMIN) repeatable on FIELD_DEFINITION | OBJECT'
+    );
+
+    expect(html).toContain(
+      '<span class="type-name">Node</span> <span class="punct">&amp;</span> <span class="type-name">Entity</span>'
+    );
+    expect(html).toContain(
+      '<span class="type-name">User</span> <span class="punct">|</span> <span class="type-name">Post</span>'
+    );
+    expect(html).toContain('<span class="field">role</span>: <span class="type-name">Role</span>');
+    expect(html).toContain('<span class="enum-value">ADMIN</span>');
+    expect(html).toContain('<span class="keyword">repeatable</span>');
+    expect(html).toContain(
+      '<span class="enum-value">FIELD_DEFINITION</span> <span class="punct">|</span> <span class="enum-value">OBJECT</span>'
+    );
+  });
+
+  test('should highlight a field named like a keyword as a field', () => {
+    const html = highlightSDL('type Node {\n  type: String\n  input: String\n}');
+
+    expect(html).toContain('<span class="field">type</span>');
+    expect(html).toContain('<span class="field">input</span>');
+  });
+
+  test('should highlight schema root operation fields', () => {
+    const html = highlightSDL('schema {\n  query: Query\n  mutation: Mutation\n}');
+
+    expect(html).toContain('<span class="keyword">schema</span>');
+    expect(html).toContain(
+      '<span class="field">query</span>: <span class="type-name">Query</span>'
+    );
+  });
+
+  test('should preserve the source text exactly', () => {
+    const sdl =
+      '"""\nDocs & <stuff>\n"""\ninput Filter {\n  ids: [ID!] = []\n  meta: JSON = {a: 1, b: [true, null]}\n}';
+    const div = document.createElement('div');
+    div.innerHTML = highlightSDL(sdl);
+
+    expect(div.textContent).toBe(sdl);
+  });
 });
diff --git a/tests/unit/service-worker.test.js b/tests/unit/service-worker.test.js
index be263de..7898fe1 100644
--- a/tests/unit/service-worker.test.js
+++ b/tests/unit/service-worker.test.js
@@ -15,6 +15,7 @@ import {
 } from '../../js/sw/hash-registry.js';
 import { digestMessage } from '../../js/sw/hash.js';
 import { handleMessage, toggleDebuggerFromAction } from '../../js/sw/messaging.js';
+import { recordEndpoint, clearObservedEndpoints } from '../../js/sw/endpoint-tracker.js';
 import {
   saveTabToStorage,
   removeTabFromStorage,
@@ -727,6 +728,43 @@ describe('Service Worker Logic', () => {
       expect(lookupHash('h1')).toBeNull();
     });
 
+    test('should handle getObservedEndpoints message', async () => {
+      recordEndpoint(4242, 'https://api.example.com/graphql', []);
+      const sendResponse = jest.fn();
+
+      handleMessage({ getObservedEndpoints: true, tabId: 4242 }, {}, sendResponse);
+      await new Promise((r) => setTimeout(r, 50));
+
+      expect(sendResponse).toHaveBeenCalledWith(
+        expect.objectContaining({
+          status: 'SUCCESS',
+          endpoints: expect.arrayContaining(['https://api.example.com/graphql']),
+        })
+      );
+      clearObservedEndpoints(4242);
+    });
+
+    test('should return error for getObservedEndpoints without tabId', async () => {
+      const sendResponse = jest.fn();
+
+      handleMessage({ getObservedEndpoints: true }, {}, sendResponse);
+      await new Promise((r) => setTimeout(r, 50));
+
+      expect(sendResponse).toHaveBeenCalledWith(expect.objectContaining({ status: 'ERROR' }));
+    });
+
+    test('should reject non-boolean getObservedEndpoints', () => {
+      const sendResponse = jest.fn();
+      handleMessage({ getObservedEndpoints: 'yes', tabId: 42 }, {}, sendResponse);
+
+      expect(sendResponse).toHaveBeenCalledWith(
+        expect.objectContaining({
+          status: 'ERROR',
+          error: expect.stringContaining('getObservedEndpoints'),
+        })
+      );
+    });
+
     test('should return error for loadSchema without tabId', async () => {
       const sendResponse = jest.fn();
       handleMessage({ loadSchema: true }, {}, sendResponse);