From dbd8494e3ff2121c58d8cfedd8491621d15d7820 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 7 Oct 2026 18:54:35 +0200
Subject: [PATCH 01/51] feat: add diagnostics popup

---
 README.md                                     |   1 +
 jest.config.js                                |   5 +-
 package-lock.json                             | 107 +++++-
 package.json                                  |  10 +-
 projects/ngx-ui-watchtower/DESIGN.md          | 250 ++++++++++++-
 projects/ngx-ui-watchtower/README.md          |  14 +-
 .../diagnostics/ng-package.json               |   6 +
 .../uwt-diagnostics-dialog.component.html     |  78 ++++
 .../uwt-diagnostics-dialog.component.scss     | 102 ++++++
 .../uwt-diagnostics-dialog.component.spec.ts  | 343 ++++++++++++++++++
 .../uwt-diagnostics-dialog.component.ts       | 154 ++++++++
 .../uwt-diagnostics-export.spec.ts            | 140 +++++++
 .../uwt-diagnostics-export.ts                 | 119 ++++++
 .../uwt-diagnostics-exporter.ts               | 137 +++++++
 .../uwt-diagnostics-filter-bar.component.html |  97 +++++
 .../uwt-diagnostics-filter-bar.component.scss |  52 +++
 ...t-diagnostics-filter-bar.component.spec.ts |  98 +++++
 .../uwt-diagnostics-filter-bar.component.ts   | 142 ++++++++
 .../uwt-diagnostics-filter.spec.ts            | 234 ++++++++++++
 .../uwt-diagnostics-filter.ts                 | 210 +++++++++++
 .../uwt-diagnostics-internal.util.ts          |  53 +++
 .../uwt-diagnostics-json.component.html       |  37 ++
 .../uwt-diagnostics-json.component.scss       |  41 +++
 .../uwt-diagnostics-json.component.spec.ts    |  90 +++++
 .../uwt-diagnostics-json.component.ts         |  82 +++++
 .../uwt-diagnostics-columns.ts                | 199 ++++++++++
 .../uwt-diagnostics-section.component.html    | 161 ++++++++
 .../uwt-diagnostics-section.component.scss    | 108 ++++++
 .../uwt-diagnostics-section.component.spec.ts | 126 +++++++
 .../uwt-diagnostics-section.component.ts      | 168 +++++++++
 .../uwt-diagnostics-shortcut.spec.ts          | 104 ++++++
 .../uwt-diagnostics-shortcut.ts               |  92 +++++
 .../uwt-diagnostics-store.spec.ts             | 264 ++++++++++++++
 .../uwt-diagnostics-store.ts                  | 337 +++++++++++++++++
 .../uwt-diagnostics.models.ts                 | 141 +++++++
 .../uwt-diagnostics.providers.ts              |  60 +++
 .../uwt-telemetry-diagnostics.service.spec.ts | 194 ++++++++++
 .../uwt-telemetry-diagnostics.service.ts      | 167 +++++++++
 .../diagnostics/src/public-api.ts             |  21 ++
 .../diagnostics/tsconfig.lib.json             |  25 ++
 .../diagnostics/tsconfig.spec.json            |  11 +
 projects/ngx-ui-watchtower/package.json       |  12 +
 .../uwt-telemetry-monitor.models.ts           | 125 +++++++
 .../uwt-scenario/uwt-scenario.spec.ts         |   2 +
 .../lib/scenario/uwt-scenario/uwt-scenario.ts |  16 +-
 .../uwt-bi-telemetry.service.ts               |   9 +
 .../uwt-logger.service/uwt-logger.service.ts  |  37 +-
 .../uwt-scenario-telemetry.service.ts         |   3 +
 .../uwt-telemetry-monitor.integration.spec.ts | 210 +++++++++++
 .../uwt-telemetry-monitor.service.spec.ts     | 118 ++++++
 .../uwt-telemetry-monitor.service.ts          |  81 +++++
 .../uwt-broadcast-host.service.ts             |  99 ++++-
 .../sinks/uwt-broadcast/uwt-broadcast.spec.ts | 154 ++++++++
 projects/ngx-ui-watchtower/src/public-api.ts  |  10 +
 tsconfig.json                                 |   7 +-
 55 files changed, 5632 insertions(+), 31 deletions(-)
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/ng-package.json
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/src/public-api.ts
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json
 create mode 100644 projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json
 create mode 100644 projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts
 create mode 100644 projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.integration.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts

diff --git a/README.md b/README.md
index 85513da..be75dd4 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ How it is designed: [projects/ngx-ui-watchtower/DESIGN.md](projects/ngx-ui-watch
 projects/ngx-ui-watchtower/
   src/          main entry point — @absaoss-cps/ngx-ui-watchtower
   rum/          secondary entry point — @absaoss-cps/ngx-ui-watchtower/rum
+  diagnostics/  secondary entry point — @absaoss-cps/ngx-ui-watchtower/diagnostics
   README.md     usage guide, published to npm
   DESIGN.md     full design
   package.json  the published package's manifest
diff --git a/jest.config.js b/jest.config.js
index 3a8a9c8..921e2a2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,10 +3,13 @@ module.exports = {
   coverageDirectory: '<rootDir>/coverage',
   preset: 'jest-preset-angular',
   moduleNameMapper: {
+    '^lodash-es$': 'lodash',
     '^@absaoss-cps/ngx-ui-watchtower$':
       '<rootDir>/projects/ngx-ui-watchtower/src/public-api.ts',
     '^@absaoss-cps/ngx-ui-watchtower/rum$':
-      '<rootDir>/projects/ngx-ui-watchtower/rum/src/public-api.ts'
+      '<rootDir>/projects/ngx-ui-watchtower/rum/src/public-api.ts',
+    '^@absaoss-cps/ngx-ui-watchtower/diagnostics$':
+      '<rootDir>/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts'
   },
   transformIgnorePatterns: [
     'node_modules/(?!(.*.mjs$|@angular/common/locales/.*.js$))'
diff --git a/package-lock.json b/package-lock.json
index 6f764f7..81f82b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,14 +19,20 @@
       },
       "devDependencies": {
         "@angular-builders/jest": "^22.0.1",
+        "@angular/animations": "^22.1.3",
         "@angular/build": "^22.1.5",
         "@angular/cli": "~22.1.5",
         "@angular/compiler-cli": "^22.1.3",
+        "@angular/forms": "^22.1.3",
+        "@angular/router": "^22.1.3",
+        "@e965/xlsx": "^0.20.3",
         "@types/jest": "^30.0.0",
+        "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.10.10",
         "@typescript-eslint/eslint-plugin": "^8.67.0",
         "@typescript-eslint/parser": "^8.67.0",
         "aws-rum-web": "^3.2.1",
+        "cps-ui-kit": "^22.0.1",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-config-standard": "^17.1.0",
@@ -38,6 +44,8 @@
         "jest": "^30.3.0",
         "jest-environment-jsdom": "^30.3.0",
         "jest-preset-angular": "^17.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "ng-packagr": "^22.1.1",
         "prettier": "^3.4.2",
         "typescript": "~6.0.3"
@@ -305,9 +313,8 @@
       "version": "22.2.1",
       "integrity": "sha512-vTxZN6uL/m61lv7ZCvfmQ3VuFb4o/tniGLpc3SpkNHE6MLM8WN0IjfNBRLMYMovd1uUBSPwhcG4Llcmucr9dmw==",
       "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -714,6 +721,26 @@
         }
       }
     },
+    "node_modules/@angular/forms": {
+      "version": "22.2.1",
+      "integrity": "sha512-xHM+PhrvYDJ+edPxh6PWhkE99tXWbsMcxdXCWF6QcyByX+bsW2rVlNZ7dumOsUle9MYa8Yj0lZFACUWbwFw+4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "tslib": "^2.3.0",
+        "zod": "^4.0.10"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "22.2.1",
+        "@angular/core": "22.2.1",
+        "@angular/platform-browser": "22.2.1",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "22.2.1",
       "integrity": "sha512-KQ3oguemaSqyNP00yqEvPouY7NC4Lji+6S8yfjaWaUZjSth/GckpeP/Fo9HtMqd04y6MZ6lEb2hbQtTqFcSdEQ==",
@@ -753,6 +780,24 @@
         "@angular/platform-browser": "22.2.1"
       }
     },
+    "node_modules/@angular/router": {
+      "version": "22.2.1",
+      "integrity": "sha512-HJfJ4yA1znKd9YFtbDOJfKmD12x0PhS7LkmYdWlJRu2WkQZRBVrdGKdmbvV5UvrqCRllVWKpzw1TIZJM69rlcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "22.2.1",
+        "@angular/core": "22.2.1",
+        "@angular/platform-browser": "22.2.1",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "7.1.3",
       "integrity": "sha512-1t1U8Cm3RBl9vh3RAZhjkPaduzLSvQJRToRrxpGR/eDRW99mOREleuu+mWfiFa795bUzjwht7NgphCKTs2ianQ==",
@@ -2642,6 +2687,18 @@
         "node": ">=14.17.0"
       }
     },
+    "node_modules/@e965/xlsx": {
+      "version": "0.20.3",
+      "integrity": "sha512-703RN/3OdsRD5mtse2HBX7Um7xwaP9tlswEG6svOtjqokXoX7rJdQj7DyabD2I+xk22RgaIIU+R6BHgkpZGB/w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
@@ -7008,6 +7065,12 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.4",
       "integrity": "sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==",
@@ -7377,6 +7440,21 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.25",
+      "integrity": "sha512-+K1NIO8I+F9/wNulfVvu23QYd0Pe9/OCqRrim4NoYIf1VoEDL90Ve4ClzpyqBLc7NpGGWRvYNCKZ1BE/Jpf8dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.20.5",
       "integrity": "sha512-U2+DNr+wSjpsTS/wZGYHq7GcwfuSmKiKvoPvK22zwTlRhU91yOniN4qRR5KhIjvif7ysw/dz/hKmfDH0Ris4aA==",
@@ -10176,6 +10254,25 @@
         }
       }
     },
+    "node_modules/cps-ui-kit": {
+      "version": "22.0.1",
+      "integrity": "sha512-9N5K+0wEiqzJB8do9awT3abAIOFN8VqPjJZmLdOzpk8QmintWQ0SLmWA5CVvruP993r7j85RDbzX/bVrkDub2w==",
+      "dev": true,
+      "license": "Apache License 2.0",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      },
+      "peerDependencies": {
+        "@angular/common": "^22.1.3",
+        "@angular/core": "^22.1.3",
+        "@angular/forms": "^22.1.3",
+        "@e965/xlsx": "^0.20.3",
+        "@types/lodash-es": "^4.17.12",
+        "lodash-es": "^4.17.21",
+        "rxjs": "^7.8.2",
+        "zone.js": "^0.15.1 || ^0.16.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
@@ -16134,6 +16231,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
diff --git a/package.json b/package.json
index dc64593..07ab38e 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint \"**/*.ts\" --max-warnings=0",
     "format": "prettier --write \"**/*.{ts,html}\"",
     "format:check": "prettier --check \"**/*.{ts,html}\"",
-    "typecheck": "tsc -p projects/ngx-ui-watchtower/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.spec.json --noEmit"
+    "typecheck": "tsc -p projects/ngx-ui-watchtower/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json --noEmit"
   },
   "private": true,
   "dependencies": {
@@ -24,14 +24,20 @@
   },
   "devDependencies": {
     "@angular-builders/jest": "^22.0.1",
+    "@angular/animations": "^22.1.3",
     "@angular/build": "^22.1.5",
     "@angular/cli": "~22.1.5",
     "@angular/compiler-cli": "^22.1.3",
+    "@angular/forms": "^22.1.3",
+    "@angular/router": "^22.1.3",
+    "@e965/xlsx": "^0.20.3",
     "@types/jest": "^30.0.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.10",
     "@typescript-eslint/eslint-plugin": "^8.67.0",
     "@typescript-eslint/parser": "^8.67.0",
     "aws-rum-web": "^3.2.1",
+    "cps-ui-kit": "^22.0.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-config-standard": "^17.1.0",
@@ -43,6 +49,8 @@
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
     "jest-preset-angular": "^17.0.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "ng-packagr": "^22.1.1",
     "prettier": "^3.4.2",
     "typescript": "~6.0.3"
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index ecfed37..49c9f59 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -24,7 +24,7 @@ configuration, log backend and AWS credentials.
 - **Product signal.** Record feature adoption and interaction events without
   putting business vocabulary inside the telemetry infrastructure itself.
 - **Developer debugging.** Let any developer see exactly what telemetry is
-  produced, in any environment, with a LocalStorage flag —
+  produced, in any environment, with a LocalStorage flag or an in-app popup —
   no rebuild, no config change, no production switch.
 - **Reusability.** Ship as a library any Angular application can install and
   configure.
@@ -85,24 +85,28 @@ flowchart TD
 | `UwtNoopTelemetrySink`        | Explicit opt-out — everything runs, nothing ships                                   |
 | `UwtLogApiProvider`           | The seam where the application supplies its log store — send, query, optional flush |
 | `UwtRumCredentialsProvider`   | The seam where the application supplies its AWS details                             |
+| `UwtTelemetryMonitor`         | A read-only stream of everything handed to a destination                            |
 
 Everything is wired through Angular DI, so a destination can be swapped in
 production and stubbed in tests.
 
 ### Entry points
 
-Two, each pulling in only what it needs:
+Three, each pulling in only what it needs:
 
-| Entry point                          | Contains                             | Needs                           |
-| ------------------------------------ | ------------------------------------ | ------------------------------- |
-| `@absaoss-cps/ngx-ui-watchtower`     | Everything except the one below      | Angular                         |
-| `@absaoss-cps/ngx-ui-watchtower/rum` | `UwtRumTelemetrySink`, its providers | `aws-rum-web`, an optional peer |
+| Entry point                                  | Contains                                    | Needs                                                                       |
+| -------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------- |
+| `@absaoss-cps/ngx-ui-watchtower`             | Everything except the two below             | Angular                                                                     |
+| `@absaoss-cps/ngx-ui-watchtower/rum`         | `UwtRumTelemetrySink`, its providers        | `aws-rum-web`, an optional peer                                             |
+| `@absaoss-cps/ngx-ui-watchtower/diagnostics` | The [diagnostics popup](#diagnostics-popup) | `cps-ui-kit` (with `@angular/forms`, `@angular/animations`), optional peers |
 
 A bundler resolves every static import in a module graph, and a dynamic
 `import()`'s specifier, whether or not that code path ever runs. Keeping the
 RUM sink and its `await import('aws-rum-web')` out of the main entry is what
 lets an app using only `'broadcast'`/`'noop'` build without `aws-rum-web`
-installed.
+installed. The popup is split out the same way: it is the only UI in the
+package, and nothing in the main entry — bundle or `.d.ts` — references
+cps-ui-kit.
 
 ### Public API
 
@@ -120,6 +124,7 @@ Everything each entry point exports, by role.
 | Name registries             | `UwtScenarioNames` / `UwtScenarioName`, `UwtScenarioSteps` / `UwtStepName`, `UwtBIEventNames` / `UwtBIEventName`, `UwtLoggerNames` / `UwtLoggerName`                                                                                                                                                        |
 | Sinks                       | `UwtTelemetrySink` (abstract), `UwtNoopTelemetrySink`, `UwtBroadcastTelemetrySink`, `UwtTelemetryBroadcastHost`, `UWT_BROADCAST_CHANNEL`, `UWT_DEFAULT_BROADCAST_CHANNEL` (`'ngx-ui-watchtower'`); `uwtClassifyTelemetryEvent` + `UwtTelemetrySinkEvent`, for a sink to tell what it received               |
 | Shared models               | `UwtTelemetryMetadata`, `UwtTelemetryError`, `UwtTelemetryAttribution`; event types `UWT_DEFAULT_EVENT_NAMESPACE`, `UWT_TELEMETRY_EVENT_TYPE`, `uwtEventTypes()`, `UwtTelemetryEventTypes`                                                                                                                  |
+| Monitor                     | `UwtTelemetryMonitor`; `UwtTelemetryObservedEvent`, `UwtTelemetryPublishInput`, `UwtTelemetryEventKind`, `UwtTelemetryDestination`, `UwtTelemetryEventOrigin`, `UwtJsonValue`, `UwtJsonObject`                                                                                                              |
 | Redaction, for custom sinks | `uwtRedactMetadata`, `uwtNormalizeError`, `uwtScrubString`, `uwtRedactConfigFor`, `UwtRedactConfig`, `UWT_DEFAULT_REDACT_CONFIG`, `UwtPiiValuePattern`, `UWT_REDACTED` (`'[redacted]'`, the replacement value)                                                                                              |
 | Utilities                   | `uwtUuid()`, `uwtIsDebugEnabled(flag, name?)` + `UwtDebugFlag` (`'debugLogger' \| 'debugScenario' \| 'debugBI'`)                                                                                                                                                                                            |
 
@@ -129,6 +134,14 @@ Everything each entry point exports, by role.
 `UwtRumCredentials` (`accessKeyId`, `secretAccessKey`, `sessionToken`,
 `expiration`).
 
+**`@absaoss-cps/ngx-ui-watchtower/diagnostics`:** `provideUwtTelemetryDiagnostics`,
+`UwtTelemetryDiagnosticsService`, `UWT_TELEMETRY_DIAGNOSTICS_CONFIG`,
+`UwtTelemetryDiagnosticsConfig`, `UWT_DEFAULT_DIAGNOSTICS_CONFIG`,
+`UwtDiagnosticsShortcut`, `UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS`,
+`UwtDiagnosticsExport`, `UwtDiagnosticsSectionId`, and the filter types
+`UwtDiagnosticsFilterState`, `UwtDiagnosticsFieldFilter`,
+`UwtDiagnosticsFilterOperator` — see §12, "Diagnostics popup".
+
 ### Destinations
 
 A realm has exactly **one telemetry destination**: the sink every scenario
@@ -176,7 +189,9 @@ redacted), deduplicate BI events, time anything, or guard the library's
 calls — every call the library makes into it, `init` included, is wrapped
 fail-open. The one exception is `setUserId`/`getUserId`, which the
 application calls on the sink directly; a destination should not throw
-there. Log lines are not part of it: they go to the application's
+there. The
+diagnostics monitor observes the hand-off, so the popup works with any
+destination. Log lines are not part of it: they go to the application's
 own log backend through `UWT_LOG_API_PROVIDER`, whatever the destination.
 
 ```ts
@@ -187,6 +202,16 @@ providers: [
 ];
 ```
 
+### The telemetry monitor
+
+Every place that hands something to a destination — the scenario's emit,
+`track()`, the logger's delivery and its RUM mirror, and the broadcast host
+forwarding a fragment's events and logs — then publishes the same object to
+`UwtTelemetryMonitor`, inside the same fail-open block. So nothing is sent
+twice, and a hand-off that throws is not shown. A fragment's event appears
+once in each popup: as its own in the fragment's, as forwarded in the
+shell's.
+
 ### Packaging and internals
 
 - **Every export is explicit.** The barrels list their exports one by one —
@@ -195,10 +220,14 @@ providers: [
   broadcast plumbing stay internal so they can change freely. Redaction is
   the exception: a custom sink needs `uwtRedactMetadata`,
   `uwtNormalizeError`, `uwtScrubString` and `uwtRedactConfigFor`.
-- **The secondary entry keeps private copies of a few utilities.** ng-packagr
+- **Secondary entries keep private copies of a few utilities.** ng-packagr
   fixes each entry point's `rootDir` to its own `src`, so
-  `@absaoss-cps/ngx-ui-watchtower/rum` can't import the main entry's
-  internals by relative path and carries small copies of what it needs.
+  `@absaoss-cps/ngx-ui-watchtower/rum` and `@absaoss-cps/ngx-ui-watchtower/diagnostics` can't import the main
+  entry's internals by relative path and carry small copies of what they
+  need.
+- **cps-ui-kit comes from npm.** It is an optional peer of the package and a
+  dev dependency of the workspace, so the build and the unit tests resolve it
+  from `node_modules` and it is never compiled into the package.
 - **Test doubles live in the specs that use them**, declared inline, never in
   a shared file and never exported. The one browser gap needing a stub is
   `BroadcastChannel`, which jsdom doesn't implement.
@@ -1190,6 +1219,21 @@ Reading through AWS also answers the wrong question: by the time a record is
 in CloudWatch it is minutes old and mixed in with everyone else's, which is
 rarely what someone asking for "the logs" actually wants.
 
+### The diagnostics popup
+
+The popup shows exactly what is sent, after redaction — including session
+and user ids — and redacts nothing further, since a popup that hid fields
+would misreport what leaves the browser. That is acceptable in every
+environment because it exposes nothing new: the data is the current user's
+own, already in their browser and visible in the network panel. It stores
+nothing, sends nothing and grants no remote access.
+
+Avoid sharing your screen while it is open, and treat downloads as you would
+any file with ids in it; filenames carry only the application name, the
+section and a timestamp
+(`ngx-ui-watchtower-diagnostics-<application>-<section>-<yyyyMMdd-HHmmss>.json`). The shortcut prevents accidental opening; it is not access
+control — use `enabled` for that, or leave the provider out.
+
 ---
 
 ## 10. Configuration
@@ -1437,7 +1481,10 @@ convention, for an application that wants the pre-fallback behavior back.
   becoming stable.
 - **Bounded.** A 100-item buffer keeps events, page views and errors recorded
   before the RUM client is ready, then replays them; it never grows past
-  that if initialization never completes.
+  that if initialization never completes. The diagnostics monitor costs one
+  check per event while nobody watches; the popup keeps at most 500 events
+  per section, updates the screen at most every 250 ms, and releases
+  everything when it closes.
 
 The console report is itself wrapped in a try/catch — an application that has
 patched or otherwise broken `console.error` cannot turn a suppressed
@@ -1472,6 +1519,8 @@ How an application uses the library, end to end.
 npm install @absaoss-cps/ngx-ui-watchtower
 # optional, only if you use the AWS RUM sink
 npm install aws-rum-web
+# optional, only if you use the diagnostics popup
+npm install cps-ui-kit
 ```
 
 ### Setup
@@ -1816,6 +1865,173 @@ writes to the console, so starting a scenario, opening a step or calling a
 method after settlement — none of which sends anything — print nothing. To
 see each step, turn on `emitLifecycleEvents`, which makes steps real events.
 
+### Diagnostics popup
+
+An in-app window showing, live, every BI event, scenario event and log
+record your app hands to its telemetry destinations — no DevTools, no
+backend access:
+
+```ts
+import { provideUwtTelemetryDiagnostics } from '@absaoss-cps/ngx-ui-watchtower/diagnostics';
+
+providers: [
+  provideUwtTelemetry({ application: 'my-app', environment, version }),
+  provideUwtTelemetryDiagnostics()
+];
+```
+
+It is built from cps-ui-kit, so the app needs cps-ui-kit set up as for any
+cps-ui-kit dialog (styles, icons, animations). It supports the light theme
+only, for now: cps-dialog, which frames it, is light-only, and the kit's
+dark theme is not yet complete for the components inside it.
+
+#### Opening it
+
+| Platform          | Shortcut                   |
+| ----------------- | -------------------------- |
+| macOS             | **⇧ ⌥ ⌘ 8**                |
+| Windows and Linux | **Ctrl + Alt + Shift + 8** |
+
+Four keys, so it never opens by accident; both combinations work
+everywhere, which covers external keyboards and remote desktops. Keys are
+matched by physical position (`KeyboardEvent.code`), so they work on any
+layout — Option rewrites the typed character on macOS. Every modifier must
+match exactly, held-down repeats are ignored, and AltGr — which many
+European Windows layouts report as Ctrl+Alt — never triggers it. ⌥⌘8 alone
+is macOS Accessibility Zoom, which is why Shift is part of it.
+
+The popup is not modal: it docks on the right at half the screen and leaves
+the app usable, so you can watch events arrive. It is draggable, resizable
+and maximizable. With it open, the shortcut brings focus back to
+it from the app, and closes it when focus is already inside. Escape closes it
+too.
+
+It works in every environment. To change the keys, turn the shortcut off, or
+limit who can open it:
+
+```ts
+provideUwtTelemetryDiagnostics({
+  // Your own combination — replaces the defaults.
+  shortcuts: [
+    {
+      code: 'KeyD',
+      ctrl: true,
+      alt: true,
+      shift: true,
+      label: 'Ctrl+Alt+Shift+D'
+    }
+  ],
+
+  // Or no keyboard at all, opening it from your own UI instead:
+  // shortcuts: [],   then   inject(UwtTelemetryDiagnosticsService).open();
+
+  // Read once at startup.
+  enabled: () => inject(AuthService).isSupportStaff()
+});
+```
+
+#### What it shows
+
+Three sections — BI telemetry, scenario telemetry and logging — listing
+events newest first, from the moment the popup opens. Expand a row for the
+full payload as JSON.
+
+Each section has its own tools, which never affect the other two:
+
+- **Search** matches any field's value or name. **Add filter** compares one
+  field — `metadata.theme`, `status`, or `steps[].name` for any item of a
+  list. Field suggestions come from the events that section has seen.
+- **Download JSON** saves every event that section captured, oldest first,
+  whatever its filters, with those filters recorded in the file. Each event
+  keeps its `sequence` and `capturedAt`, so downloads from different
+  sections can be interleaved again. **Copy JSON** puts the same JSON on the
+  clipboard, for when a browser blocks downloads.
+
+Two controls at the top apply to all three sections, because they are about
+capturing rather than viewing:
+
+- **Pause live updates** freezes the view while you read; events are still
+  captured.
+- **Clear** empties the history; capturing continues.
+
+Each section keeps the latest 500 events (`maxEventsPerSection`). History is
+discarded when the popup closes.
+
+What it does **not** show:
+
+- Anything before the popup opened.
+- RUM's own automatic events — page views, web vitals, HTTP and JS errors —
+  which never pass through this library.
+- Whether the server accepted an event. It shows what was handed to the sink
+  or log provider; RUM can still drop events, for example when it samples a
+  session out or reaches its event limit.
+
+In a composed page, the shell's popup also shows what its fragments send — BI
+and scenario events and log records alike, since the shell delivers them —
+each marked with `↪` and the fragment's name.
+
+#### Configuration
+
+| Option                  | Default                             | Meaning                                                                                                   |
+| ----------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `enabled`               | `true`                              | `false`, or a function read once at startup, turns the popup off — shortcut and `open()` alike            |
+| `shortcuts`             | `UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                         |
+| `maxEventsPerSection`   | `500`                               | Events kept per section; the oldest are dropped, and the count of dropped ones is shown                   |
+| `maxPayloadCharsInView` | `262144` (256 × 1024)               | A payload whose JSON is longer is shown truncated to its first 65,536 characters; downloads stay complete |
+
+Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
+limit protects rendering, which costs by the length of the text. A cut never
+splits a surrogate pair.
+
+A shortcut is a `UwtDiagnosticsShortcut` — `{ code, ctrl?, alt?, shift?,
+meta?, label? }`, where `code` is a `KeyboardEvent.code` such as `'Digit8'`
+or `'KeyD'`, and an omitted modifier must be up. Spread
+`UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS` to add one rather than replace them.
+
+`UwtTelemetryDiagnosticsService` opens the popup from code: `open()`,
+`close()`, `toggle()`, and an `isOpen` signal.
+
+A download is a `UwtDiagnosticsExport`:
+
+```ts
+interface UwtDiagnosticsExport {
+  format: 'ngx-ui-watchtower-diagnostics';
+  formatVersion: 1;
+  section: 'bi' | 'scenario' | 'logging';
+  exportedAt: string;
+  capture: { startedAt: string; endedAt: string; paused: boolean };
+  app: {
+    application: string;
+    environment: string;
+    version: string;
+    eventNamespace: string;
+  };
+  session: { sessionId?: string; userId?: string };
+  userAgent: string;
+  activeFilters: UwtDiagnosticsFilterState; // recorded, not applied
+  count: { captured: number; droppedOldest: number };
+  events: UwtTelemetryObservedEvent[]; // oldest first
+}
+```
+
+Field filters use the operators `contains` (the default), `equals`,
+`not-contains`, `exists` and `missing`, all case-insensitive; several filters
+combine with AND. A path such as `steps[].name` matches any item of a list.
+
+#### Reading events from code
+
+The popup is built on `UwtTelemetryMonitor`, from the main entry point, which
+anyone can observe — a test, or your own overlay:
+
+```ts
+inject(UwtTelemetryMonitor)
+  .events$.pipe(filter((e) => e.kind === 'scenario'))
+  .subscribe((e) => console.table(e.payload));
+```
+
+Each event is a deep copy of what was sent, so observers can't change it.
+While nothing subscribes, it costs one check per event.
+
 ### Testing
 
 The library ships **no test helpers**. Everything a test needs is already in
@@ -2012,7 +2228,7 @@ error's name instead (`[cart] TypeError`).
 | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `provideUwtTelemetryRumSink()`       | Builds a second AWS client — one visitor becomes two sessions. Listed next to `'broadcast'`, it is a second destination, so bootstrap fails                                                 |
 | `UWT_RUM_CREDENTIALS_PROVIDER`       | Nothing in a fragment needs AWS credentials                                                                                                                                                 |
-| `UWT_LOG_API_PROVIDER`               | `'broadcast'` mode already binds it to the forwarding provider. One bound after it wins, and the fragment ships its own logs — the shell never sees them                                    |
+| `UWT_LOG_API_PROVIDER`               | `'broadcast'` mode already binds it to the forwarding provider. One bound after it wins, and the fragment ships its own logs — the shell, and its diagnostics popup, never see them         |
 | `provideUwtTelemetryBroadcastHost()` | A host receives its own realm's messages too, so beside the forwarding sink it would forward them again, forever. It detects this, warns (`... cannot also host it ...`) and stays inactive |
 
 #### A realm that both forwards and hosts
@@ -2084,7 +2300,13 @@ never injects `UwtLoggerService` sends none in the first place.
 With `mirrorErrorsToRum`, each error-level log line leaves a fragment as two
 messages — the record for the log provider, then its mirrored error for the
 sink — with no id in common. Each destination still receives it once: the
-log backend gets the record, RUM gets the error.
+log backend gets the record, RUM gets the error. The host links them for its
+monitor anyway, so the shell's diagnostics popup shows the mirror against
+its record as the fragment's own does: an `error` arriving straight after an
+error-level record from the same realm, with the name and message the logger
+mirrors for it, gets that record's sequence as `relatedSequence`. Both are
+posted in the same task, so nothing can arrive between them. A mirror that
+doesn't match exactly is shown unlinked, never linked wrongly.
 
 ### A fragment that also deploys standalone
 
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 6187cdd..3a23416 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -300,7 +300,7 @@ Fragment code doesn't change. Give each fragment its own `application` name.
 
 ## Seeing what is sent
 
-Run in DevTools, no reload needed:
+**In the console** — run in DevTools, no reload needed:
 
 ```js
 localStorage.setItem('debugScenario', 'true');
@@ -308,6 +308,18 @@ localStorage.setItem('debugBI', 'true');
 localStorage.setItem('debugLogger', 'true'); // or 'checkout,cart' for some loggers
 ```
 
+**In the app** — add the diagnostics popup (needs `cps-ui-kit`):
+
+```ts
+import { provideUwtTelemetryDiagnostics } from '@absaoss-cps/ngx-ui-watchtower/diagnostics';
+
+providers: [provideUwtTelemetryDiagnostics()];
+```
+
+Open it with **⇧⌥⌘8** on macOS or **Ctrl+Alt+Shift+8** on Windows and Linux.
+It lists everything the app sends from that moment on, with search, filters
+and JSON download.
+
 ## Testing
 
 ```ts
diff --git a/projects/ngx-ui-watchtower/diagnostics/ng-package.json b/projects/ngx-ui-watchtower/diagnostics/ng-package.json
new file mode 100644
index 0000000..e09fb3f
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html
new file mode 100644
index 0000000..f8c839a
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html
@@ -0,0 +1,78 @@
+<div class="uwt-diagnostics-dialog">
+  <div class="uwt-diagnostics-dialog__toolbar">
+    <p class="uwt-diagnostics-dialog__status">
+      <span
+        class="uwt-diagnostics-dialog__dot"
+        [class.uwt-diagnostics-dialog__dot--paused]="store.paused()"
+        aria-hidden="true"></span>
+      {{ store.paused() ? 'Paused' : 'Capturing' }} since {{ since() }} ·
+      {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
+    </p>
+    <div class="uwt-diagnostics-dialog__actions">
+      <cps-switch
+        label="Pause live updates"
+        [value]="store.paused()"
+        (valueChanged)="setPaused($event)">
+      </cps-switch>
+      <cps-button
+        type="outlined"
+        size="small"
+        icon="delete"
+        label="Clear"
+        ariaLabel="Clear captured events"
+        (clicked)="clear()">
+      </cps-button>
+    </div>
+  </div>
+
+  @if (store.paused() && store.newWhilePaused() > 0) {
+    <div class="uwt-diagnostics-dialog__paused" role="status">
+      <span
+        >{{ store.newWhilePaused() }} new event{{
+          store.newWhilePaused() === 1 ? '' : 's'
+        }}
+        held back while paused.</span
+      >
+      <cps-button
+        type="borderless"
+        size="xsmall"
+        label="Resume"
+        (clicked)="setPaused(false)">
+      </cps-button>
+    </div>
+  }
+
+  @if (store.total() === 0 && !store.paused()) {
+    <p class="uwt-diagnostics-dialog__hint">
+      Capturing from now. Use the app to generate events; they appear here as
+      they are sent.
+    </p>
+  }
+
+  <div class="uwt-diagnostics-dialog__sections">
+    @for (section of sections; track section) {
+      <uwt-diagnostics-section
+        [section]="section"
+        [maxPayloadChars]="maxPayloadChars">
+      </uwt-diagnostics-section>
+    }
+  </div>
+
+  <footer class="uwt-diagnostics-dialog__footer">
+    <p>
+      Shows what this app hands to its telemetry destinations, after redaction.
+      A destination can still drop an event, for example when RUM samples a
+      session out. RUM's own page views, errors and performance events aren't
+      shown.
+    </p>
+    <p>
+      Contains your session and user ids: avoid sharing your screen while it's
+      open, and share downloads only with your team. History is discarded when
+      this window closes.
+      @if (shortcut) {
+        Shortcut: <kbd>{{ shortcut }}</kbd
+        >.
+      }
+    </p>
+  </footer>
+</div>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss
new file mode 100644
index 0000000..9079222
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss
@@ -0,0 +1,102 @@
+:host {
+  display: block;
+  color: var(--cps-text-primary);
+}
+
+.uwt-diagnostics-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.uwt-diagnostics-dialog__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+}
+
+.uwt-diagnostics-dialog__status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--cps-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.uwt-diagnostics-dialog__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--cps-radius-full, 50%);
+  background: var(--cps-state-success);
+  animation: uwt-diagnostics-pulse 1.6s ease-in-out infinite;
+
+  &--paused {
+    background: var(--cps-state-warn);
+    animation: none;
+  }
+}
+
+@keyframes uwt-diagnostics-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .uwt-diagnostics-dialog__dot {
+    animation: none;
+  }
+}
+
+.uwt-diagnostics-dialog__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.uwt-diagnostics-dialog__paused {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--cps-radius-sm);
+  background: var(--cps-state-warn-surface);
+  color: var(--cps-text-primary);
+  font-size: 0.8125rem;
+}
+
+.uwt-diagnostics-dialog__hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--cps-text-secondary);
+}
+
+.uwt-diagnostics-dialog__sections {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.uwt-diagnostics-dialog__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--cps-border-color);
+  font-size: 0.75rem;
+  color: var(--cps-text-secondary);
+
+  p {
+    margin: 0;
+    max-width: 75ch;
+  }
+
+  kbd {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts
new file mode 100644
index 0000000..113b2f7
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts
@@ -0,0 +1,343 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  UWT_TELEMETRY_IDENTITY,
+  UwtTelemetryMonitor,
+  UwtTelemetryPublishInput
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CPS_LIVE_ANNOUNCER_SERVICE } from 'cps-ui-kit';
+import * as exportUtil from '../uwt-diagnostics-export/uwt-diagnostics-export';
+import {
+  UWT_DIAGNOSTICS_FLUSH_MS,
+  UwtDiagnosticsStore
+} from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UwtDiagnosticsDialogComponent } from './uwt-diagnostics-dialog.component';
+
+const bi = (name: string, theme = 'dark'): UwtTelemetryPublishInput => ({
+  kind: 'bi',
+  eventType: 'com.uwt.bi',
+  payload: {
+    eventName: name,
+    eventTime: '2026-01-01T00:00:00.000Z',
+    application: 'app',
+    metadata: { theme }
+  },
+  destination: 'sink',
+  origin: { forwarded: false }
+});
+
+const scenario: UwtTelemetryPublishInput = {
+  kind: 'scenario',
+  eventType: 'com.uwt.scenario',
+  payload: {
+    scenarioId: 'abc',
+    scenarioName: 'load-dashboard',
+    status: 'success',
+    startTime: '2026-01-01T00:00:00.000Z',
+    delta: 42,
+    elapsed: 1000,
+    stepCount: 1,
+    steps: [],
+    application: 'app'
+  },
+  destination: 'sink',
+  origin: { forwarded: false }
+};
+
+const warn: UwtTelemetryPublishInput = {
+  kind: 'log',
+  payload: {
+    timestamp: '2026-01-01T00:00:00.000Z',
+    level: 'warn',
+    message: 'Careful now',
+    logger: 'checkout',
+    application: 'app',
+    environment: 'test',
+    version: '1'
+  },
+  destination: 'log-provider',
+  origin: { forwarded: false }
+};
+
+describe('UwtDiagnosticsDialogComponent', () => {
+  let fixture: ComponentFixture<UwtDiagnosticsDialogComponent>;
+  let monitor: UwtTelemetryMonitor;
+  let announce: jest.Mock;
+
+  const el = () => fixture.nativeElement as HTMLElement;
+  /** The popup's own actions, as its buttons and switch call them. */
+  const ui = () =>
+    fixture.componentInstance as unknown as {
+      setPaused(paused: boolean): void;
+      clear(): void;
+    };
+  /** A button found by the start of its accessible name. */
+  const button = (name: string) => {
+    const found = el().querySelector<HTMLButtonElement>(
+      `button[aria-label^="${name}"]`
+    );
+    if (!found) {
+      throw new Error(`No button named "${name}…"`);
+    }
+    return found;
+  };
+  const text = () => el().textContent?.replace(/\s+/g, ' ') ?? '';
+  const titles = () =>
+    Array.from(
+      el().querySelectorAll('[data-testid="cps-expansion-panel-title"]')
+    ).map((t) => t.textContent?.trim());
+  const bodyRows = () =>
+    el().querySelectorAll('td.uwt-diagnostics-section__time').length;
+
+  function settle(): void {
+    jest.advanceTimersByTime(UWT_DIAGNOSTICS_FLUSH_MS);
+    fixture.detectChanges();
+  }
+
+  beforeEach(async () => {
+    jest.useFakeTimers();
+    announce = jest.fn();
+    await TestBed.configureTestingModule({
+      imports: [UwtDiagnosticsDialogComponent, NoopAnimationsModule],
+      providers: [
+        {
+          provide: UWT_TELEMETRY_IDENTITY,
+          useValue: {
+            application: 'app',
+            environment: 'test',
+            version: '1.0.0'
+          }
+        },
+        {
+          provide: CPS_LIVE_ANNOUNCER_SERVICE,
+          useValue: { announce, clear: jest.fn() }
+        }
+      ]
+    }).compileComponents();
+    monitor = TestBed.inject(UwtTelemetryMonitor);
+    fixture = TestBed.createComponent(UwtDiagnosticsDialogComponent);
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it('should open empty, with three sections and an explanation', () => {
+    expect(titles()).toEqual([
+      'BI telemetry · no events yet',
+      'Scenario telemetry · no events yet',
+      'Logging · no events yet'
+    ]);
+    expect(text()).toContain('Capturing from now.');
+    expect(text()).toContain('No BI events since this window opened.');
+  });
+
+  it('should show events live, in the right section, with the right columns', () => {
+    monitor.publish(bi('theme_changed'));
+    monitor.publish(scenario);
+    monitor.publish(warn);
+    settle();
+
+    expect(bodyRows()).toBe(3);
+    expect(titles()[0]).toMatch(/^BI telemetry · 1 · last \d\d:\d\d:\d\d$/);
+    expect(text()).toContain('theme_changed');
+    expect(text()).toContain('theme=dark');
+    expect(text()).toContain('load-dashboard');
+    expect(text()).toContain('42 ms');
+    expect(text()).toContain('Careful now');
+    expect(text()).toContain('3 events');
+  });
+
+  it('should mark the newest rows as new', () => {
+    monitor.publish(bi('a'));
+    settle();
+    expect(
+      el().querySelector('td.uwt-diagnostics-section__time cps-chip')
+    ).not.toBeNull();
+  });
+
+  it('should show the full payload when a row is expanded', () => {
+    monitor.publish(bi('theme_changed'));
+    settle();
+
+    (
+      el().querySelector('button[aria-label="Expand row"]') as HTMLElement
+    ).click();
+    fixture.detectChanges();
+
+    const pre = el().querySelector('pre');
+    expect(pre?.getAttribute('aria-label')).toMatch(/^Payload of event #\d+$/);
+    expect(JSON.parse(pre?.textContent ?? '')).toMatchObject({
+      eventName: 'theme_changed',
+      metadata: { theme: 'dark' }
+    });
+    expect(text()).toContain('telemetry sink');
+  });
+
+  it('should filter one section without touching the others', () => {
+    monitor.publish(bi('theme_changed', 'dark'));
+    monitor.publish(bi('sidebar_toggled', 'light'));
+    monitor.publish(warn);
+    settle();
+
+    const search = el().querySelector(
+      'input[aria-label="Search BI telemetry events"]'
+    ) as HTMLInputElement;
+    search.value = 'dark';
+    search.dispatchEvent(new Event('input'));
+    jest.advanceTimersByTime(200);
+    fixture.detectChanges();
+
+    expect(titles()[0]).toMatch(/^BI telemetry · 1 of 2/);
+    // Logging has its own filters, still empty.
+    expect(titles()[2]).toMatch(/^Logging · 1 · /);
+    expect(text()).toContain('Careful now');
+  });
+
+  it('should give each section its own search field', () => {
+    const labels = Array.from(
+      el().querySelectorAll('.uwt-diagnostics-search input')
+    ).map((i) => i.getAttribute('aria-label'));
+    expect(labels).toEqual([
+      'Search BI telemetry events',
+      'Search Scenario telemetry events',
+      'Search Logging events'
+    ]);
+  });
+
+  it('should clear history and keep capturing', () => {
+    monitor.publish(bi('a'));
+    settle();
+
+    Array.from(el().querySelectorAll('button'))
+      .find((b) => b.textContent?.trim() === 'Clear')
+      ?.click();
+    fixture.detectChanges();
+    expect(bodyRows()).toBe(0);
+    expect(announce).toHaveBeenCalledWith(
+      'History cleared. Capturing continues.',
+      'polite'
+    );
+
+    monitor.publish(bi('b'));
+    settle();
+    expect(bodyRows()).toBe(1);
+  });
+
+  it('should hold events back while paused, then show them on resume', () => {
+    monitor.publish(bi('a'));
+    settle();
+
+    ui().setPaused(true);
+    monitor.publish(bi('b'));
+    settle();
+    expect(bodyRows()).toBe(1);
+    expect(text()).toContain('1 new event held back while paused.');
+
+    ui().setPaused(false);
+    fixture.detectChanges();
+    expect(bodyRows()).toBe(2);
+  });
+
+  it("should download a section's own events, whatever its filters", () => {
+    const download = jest
+      .spyOn(exportUtil, 'uwtDownloadJson')
+      .mockImplementation(() => undefined);
+    monitor.publish(bi('a'));
+    monitor.publish(bi('b'));
+    monitor.publish(warn);
+    settle();
+    // A BI filter hiding one event must not remove it from BI's download.
+    fixture.debugElement.injector
+      .get(UwtDiagnosticsStore)
+      .setText('bi', 'nothing matches this');
+    fixture.detectChanges();
+
+    button('Download BI telemetry').click();
+
+    expect(download).toHaveBeenCalledTimes(1);
+    const [, filename, json] = download.mock.calls[0];
+    expect(filename).toMatch(
+      /^ngx-ui-watchtower-diagnostics-app-bi-\d{8}-\d{6}\.json$/
+    );
+    const doc = JSON.parse(json);
+    expect(doc).toMatchObject({
+      format: 'ngx-ui-watchtower-diagnostics',
+      section: 'bi',
+      app: { application: 'app' },
+      count: { captured: 2, droppedOldest: 0 },
+      activeFilters: { text: 'nothing matches this' }
+    });
+    expect(doc.events.map((e: { kind: string }) => e.kind)).toEqual([
+      'bi',
+      'bi'
+    ]);
+
+    button('Download Logging').click();
+    const logging = JSON.parse(download.mock.calls[1][2]);
+    expect(logging.section).toBe('logging');
+    expect(logging.events.map((e: { kind: string }) => e.kind)).toEqual([
+      'log'
+    ]);
+  });
+
+  it("should copy a section's own events as JSON", async () => {
+    const writeText = jest.fn((_text: string) => Promise.resolve());
+    Object.assign(navigator, { clipboard: { writeText } });
+    monitor.publish(bi('a'));
+    monitor.publish(warn);
+    settle();
+
+    button('Copy Logging').click();
+    await Promise.resolve();
+
+    const doc = JSON.parse(writeText.mock.calls[0][0]);
+    expect(doc.section).toBe('logging');
+    expect(doc.events).toHaveLength(1);
+  });
+
+  it('should announce new arrivals politely, at most every ten seconds', () => {
+    monitor.publish(bi('a'));
+    monitor.publish(bi('b'));
+    monitor.publish(warn);
+    settle();
+    expect(announce).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(10_000);
+    expect(announce).toHaveBeenCalledWith(
+      '3 new events: 2 BI, 1 log.',
+      'polite'
+    );
+
+    announce.mockClear();
+    jest.advanceTimersByTime(10_000);
+    expect(announce).not.toHaveBeenCalled(); // nothing new
+  });
+
+  it('should produce no telemetry of its own while being used', () => {
+    const seen: unknown[] = [];
+    // Subscribe as a second observer, alongside the popup's own store.
+    monitor.events$.subscribe((e) => seen.push(e));
+
+    ui().clear();
+    ui().setPaused(true);
+    ui().setPaused(false);
+    jest
+      .spyOn(exportUtil, 'uwtDownloadJson')
+      .mockImplementation(() => undefined);
+    button('Download BI telemetry').click();
+    button('Download Logging').click();
+    settle();
+
+    expect(seen).toHaveLength(0);
+  });
+
+  it('should stop observing when closed', () => {
+    expect(monitor.observed).toBe(true);
+    fixture.destroy();
+    expect(monitor.observed).toBe(false);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts
new file mode 100644
index 0000000..7d8a240
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts
@@ -0,0 +1,154 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject
+} from '@angular/core';
+import {
+  CPS_LIVE_ANNOUNCER_SERVICE,
+  CpsButtonComponent,
+  CpsSwitchComponent
+} from 'cps-ui-kit';
+import { UWT_TELEMETRY_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import {
+  UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+  UWT_DIAGNOSTICS_SECTIONS,
+  UwtDiagnosticsStore
+} from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UwtDiagnosticsSectionComponent } from '../uwt-diagnostics-section/uwt-diagnostics-section.component';
+import {
+  UWT_DIAGNOSTICS_SECTION_NOUN,
+  UwtDiagnosticsExporter
+} from '../uwt-diagnostics-export/uwt-diagnostics-exporter';
+import { uwtDiagnosticsTime } from '../uwt-diagnostics-section/uwt-diagnostics-columns';
+import {
+  UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+  uwtIsApplePlatform,
+  uwtShortcutLabel
+} from '../uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
+
+/** Screen readers hear about new events at most this often, in ms. */
+const ANNOUNCE_EVERY_MS = 10_000;
+
+/**
+ * The diagnostics popup's content, opened by
+ * {@link UwtTelemetryDiagnosticsService} inside a non-modal cps-dialog.
+ * Capturing is controlled here — pause and clear apply to everything —
+ * while each section filters, downloads and copies its own events.
+ *
+ * Owns its {@link UwtDiagnosticsStore}, so the captured history lives
+ * exactly as long as this window: it starts empty and is discarded on
+ * close. Uses no telemetry service itself, so opening or using it never
+ * produces events of its own.
+ */
+@Component({
+  selector: 'uwt-diagnostics-dialog',
+  imports: [
+    CpsButtonComponent,
+    CpsSwitchComponent,
+    UwtDiagnosticsSectionComponent
+  ],
+  providers: [UwtDiagnosticsStore, UwtDiagnosticsExporter],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './uwt-diagnostics-dialog.component.html',
+  styleUrl: './uwt-diagnostics-dialog.component.scss'
+})
+export class UwtDiagnosticsDialogComponent {
+  protected readonly store = inject(UwtDiagnosticsStore);
+
+  private readonly document = inject(DOCUMENT);
+  private readonly host: ElementRef<HTMLElement> = inject(ElementRef);
+  private readonly announcer = inject(CPS_LIVE_ANNOUNCER_SERVICE, {
+    optional: true
+  });
+
+  private readonly config = {
+    ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+    shortcuts: UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+    ...inject(UWT_TELEMETRY_DIAGNOSTICS_CONFIG, { optional: true })
+  };
+
+  protected readonly sections = UWT_DIAGNOSTICS_SECTIONS;
+  protected readonly maxPayloadChars = this.config.maxPayloadCharsInView;
+
+  protected readonly since = computed(() =>
+    uwtDiagnosticsTime(this.store.startedAt()).slice(0, 8)
+  );
+
+  protected readonly shortcut = uwtShortcutLabel(
+    this.config.shortcuts,
+    uwtIsApplePlatform(this.document.defaultView?.navigator)
+  );
+
+  private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
+
+  constructor() {
+    const timer = setInterval(() => this.announceNew(), ANNOUNCE_EVERY_MS);
+    inject(DestroyRef).onDestroy(() => clearInterval(timer));
+  }
+
+  /** Whether keyboard focus is anywhere in the popup, header included. */
+  containsFocus(): boolean {
+    const dialog = this.dialogElement();
+    return !!dialog && dialog.contains(this.document.activeElement);
+  }
+
+  /** Moves focus to the search field. */
+  focusSearch(): void {
+    const input = this.host.nativeElement.querySelector<HTMLInputElement>(
+      '.uwt-diagnostics-search input'
+    );
+    (input ?? this.dialogElement())?.focus();
+  }
+
+  protected setPaused(paused: boolean): void {
+    this.store.setPaused(paused);
+    this.announce(
+      paused
+        ? 'Live updates paused. Events are still captured.'
+        : 'Live updates resumed.'
+    );
+  }
+
+  protected clear(): void {
+    this.store.clear();
+    this.lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
+    this.announce('History cleared. Capturing continues.');
+  }
+
+  /** One polite summary of what arrived since the last one, if anything. */
+  private announceNew(): void {
+    if (this.store.paused()) {
+      return;
+    }
+    const received = this.store.received();
+    const parts = UWT_DIAGNOSTICS_SECTIONS.map((id) => ({
+      id,
+      n: received[id] - this.lastAnnounced[id]
+    })).filter((p) => p.n > 0);
+    this.lastAnnounced = { ...received };
+    if (parts.length === 0) {
+      return;
+    }
+    const total = parts.reduce((sum, p) => sum + p.n, 0);
+    const detail = parts
+      .map((p) => `${p.n} ${UWT_DIAGNOSTICS_SECTION_NOUN[p.id]}`)
+      .join(', ');
+    this.announce(`${total} new event${total === 1 ? '' : 's'}: ${detail}.`);
+  }
+
+  private announce(message: string): void {
+    try {
+      this.announcer?.announce(message, 'polite');
+    } catch {
+      // Announcements are a courtesy; never let one break the popup.
+    }
+  }
+
+  private dialogElement(): HTMLElement | null {
+    return this.host.nativeElement.closest<HTMLElement>('[role="dialog"]');
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts
new file mode 100644
index 0000000..8fe39b2
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts
@@ -0,0 +1,140 @@
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  uwtBuildDiagnosticsExport,
+  uwtDiagnosticsFilename,
+  uwtDownloadJson,
+  uwtSafeStringify
+} from './uwt-diagnostics-export';
+
+function bi(sequence: number): UwtTelemetryObservedEvent {
+  return {
+    kind: 'bi',
+    eventType: 'com.uwt.bi',
+    sequence,
+    capturedAt: '2026-01-01T10:00:00.000Z',
+    destination: 'sink',
+    origin: { forwarded: false },
+    payload: {
+      eventName: `e${sequence}`,
+      eventTime: '2026-01-01T10:00:00.000Z',
+      application: 'app',
+      metadata: { nested: 'kept' }
+    }
+  };
+}
+
+const context = {
+  section: 'bi' as const,
+  startedAt: '2026-01-01T09:00:00.000Z',
+  paused: false,
+  app: {
+    application: 'app',
+    environment: 'test',
+    version: '1.0.0',
+    eventNamespace: 'com.uwt'
+  },
+  session: { sessionId: 's-1' },
+  userAgent: 'jest',
+  activeFilters: {
+    text: 'e2',
+    fields: [
+      { id: '1', path: 'kind', operator: 'equals' as const, value: 'bi' }
+    ]
+  },
+  count: { captured: 3, droppedOldest: 0 },
+  now: new Date('2026-01-01T10:05:00.000Z')
+};
+
+describe('uwtBuildDiagnosticsExport', () => {
+  it("should contain every one of the section's events in hand-off order, whatever the filters", () => {
+    const doc = uwtBuildDiagnosticsExport([bi(3), bi(1), bi(2)], context);
+
+    expect(doc.events.map((e) => e.sequence)).toEqual([1, 2, 3]);
+    // Filters are recorded for context, not applied.
+    expect(doc.activeFilters.text).toBe('e2');
+  });
+
+  it('should carry the format, capture window and app identity', () => {
+    const doc = uwtBuildDiagnosticsExport([bi(1)], context);
+
+    expect(doc).toMatchObject({
+      format: 'ngx-ui-watchtower-diagnostics',
+      formatVersion: 1,
+      section: 'bi',
+      exportedAt: '2026-01-01T10:05:00.000Z',
+      capture: {
+        startedAt: '2026-01-01T09:00:00.000Z',
+        endedAt: '2026-01-01T10:05:00.000Z',
+        paused: false
+      },
+      app: { application: 'app', eventNamespace: 'com.uwt' },
+      session: { sessionId: 's-1' },
+      count: { captured: 3, droppedOldest: 0 }
+    });
+  });
+
+  it('should round-trip as valid JSON with nested payloads intact', () => {
+    const json = uwtSafeStringify(
+      uwtBuildDiagnosticsExport([bi(1)], context),
+      2
+    );
+    const parsed = JSON.parse(json);
+    expect(parsed.events[0].payload.metadata.nested).toBe('kept');
+  });
+});
+
+describe('uwtSafeStringify', () => {
+  it('should replace a cycle instead of throwing', () => {
+    const value: Record<string, unknown> = { a: 1 };
+    value.self = value;
+    expect(JSON.parse(uwtSafeStringify(value))).toEqual({
+      a: 1,
+      self: '[Circular]'
+    });
+  });
+
+  it('should keep an object that is shared, but not circular', () => {
+    const shared = { x: 1 };
+    expect(JSON.parse(uwtSafeStringify({ a: shared, b: shared }))).toEqual({
+      a: { x: 1 },
+      b: { x: 1 }
+    });
+  });
+
+  it('should write a bigint as text', () => {
+    expect(uwtSafeStringify({ n: BigInt(12) })).toBe('{"n":"12"}');
+  });
+});
+
+describe('uwtDiagnosticsFilename', () => {
+  it('should name the app, section and time, and nothing identifying', () => {
+    expect(
+      uwtDiagnosticsFilename(
+        'my app/x',
+        'logging',
+        new Date(2026, 0, 2, 3, 4, 5)
+      )
+    ).toBe(
+      'ngx-ui-watchtower-diagnostics-my-app-x-logging-20260102-030405.json'
+    );
+  });
+});
+
+describe('uwtDownloadJson', () => {
+  it('should click a temporary link to a JSON blob, then remove it', () => {
+    const created = jest.fn(() => 'blob:x');
+    Object.assign(URL, {
+      createObjectURL: created,
+      revokeObjectURL: jest.fn()
+    });
+    const click = jest
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => undefined);
+
+    uwtDownloadJson(document, 'f.json', '{}');
+
+    expect(created).toHaveBeenCalledWith(expect.any(Blob));
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(document.querySelector('a[download]')).toBeNull();
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts
new file mode 100644
index 0000000..97baa7b
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts
@@ -0,0 +1,119 @@
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UwtDiagnosticsExport,
+  UwtDiagnosticsFilterState,
+  UwtDiagnosticsSectionId
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+
+/** What the export needs to know beyond the events themselves. */
+export interface UwtDiagnosticsExportContext {
+  section: UwtDiagnosticsSectionId;
+  startedAt: string;
+  paused: boolean;
+  app: UwtDiagnosticsExport['app'];
+  session: UwtDiagnosticsExport['session'];
+  userAgent: string;
+  activeFilters: UwtDiagnosticsFilterState;
+  count: UwtDiagnosticsExport['count'];
+  now?: Date;
+}
+
+/**
+ * One section's downloadable document: every event captured in it, in the
+ * order they were handed over, regardless of the filters on screen.
+ */
+export function uwtBuildDiagnosticsExport(
+  events: readonly UwtTelemetryObservedEvent[],
+  context: UwtDiagnosticsExportContext
+): UwtDiagnosticsExport {
+  const now = (context.now ?? new Date()).toISOString();
+  return {
+    format: 'ngx-ui-watchtower-diagnostics',
+    formatVersion: 1,
+    section: context.section,
+    exportedAt: now,
+    capture: {
+      startedAt: context.startedAt,
+      endedAt: now,
+      paused: context.paused
+    },
+    app: context.app,
+    session: context.session,
+    userAgent: context.userAgent,
+    activeFilters: context.activeFilters,
+    count: context.count,
+    events: [...events].sort((a, b) => a.sequence - b.sequence)
+  };
+}
+
+/**
+ * `JSON.stringify` that never throws on a payload: a repeated reference
+ * becomes `"[Circular]"`, and a `bigint` becomes its decimal text.
+ */
+export function uwtSafeStringify(value: unknown, indent?: number): string {
+  const ancestors: object[] = [];
+  return JSON.stringify(
+    value,
+    function (this: unknown, _key: string, v: unknown) {
+      if (typeof v === 'bigint') {
+        return v.toString();
+      }
+      if (v === null || typeof v !== 'object') {
+        return v;
+      }
+      // `this` is the object holding v: unwind to it, then check for a loop.
+      while (ancestors.length && ancestors[ancestors.length - 1] !== this) {
+        ancestors.pop();
+      }
+      if (ancestors.includes(v)) {
+        return '[Circular]';
+      }
+      ancestors.push(v);
+      return v;
+    },
+    indent
+  );
+}
+
+/**
+ * `ngx-ui-watchtower-diagnostics-<application>-<section>-<yyyyMMdd-HHmmss>.json`
+ * — no session or user id, since the name ends up in folders and tickets.
+ */
+export function uwtDiagnosticsFilename(
+  application: string,
+  section: UwtDiagnosticsSectionId,
+  at: Date
+): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const stamp =
+    `${at.getFullYear()}${pad(at.getMonth() + 1)}${pad(at.getDate())}-` +
+    `${pad(at.getHours())}${pad(at.getMinutes())}${pad(at.getSeconds())}`;
+  const app = application.replace(/[^a-z0-9._-]+/gi, '-') || 'app';
+  return `ngx-ui-watchtower-diagnostics-${app}-${section}-${stamp}.json`;
+}
+
+/**
+ * Saves `json` as a file through a temporary link. The browser may still
+ * block it without telling the page, so the popup also offers copying.
+ */
+export function uwtDownloadJson(
+  doc: Document,
+  filename: string,
+  json: string
+): void {
+  const url = URL.createObjectURL(
+    new Blob([json], { type: 'application/json' })
+  );
+  const link = doc.createElement('a');
+  link.href = url;
+  link.download = filename;
+  link.style.display = 'none';
+  doc.body.appendChild(link);
+  try {
+    link.click();
+  } finally {
+    link.remove();
+    // Revoked after the click has been handed to the browser.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts
new file mode 100644
index 0000000..b8f6a0e
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts
@@ -0,0 +1,137 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, Injectable } from '@angular/core';
+import {
+  UWT_DEFAULT_EVENT_NAMESPACE,
+  UWT_TELEMETRY_IDENTITY,
+  UwtTelemetrySink
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CPS_LIVE_ANNOUNCER_SERVICE, CpsNotificationService } from 'cps-ui-kit';
+import { UwtDiagnosticsSectionId } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UwtDiagnosticsStore } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import {
+  uwtBuildDiagnosticsExport,
+  uwtDiagnosticsFilename,
+  uwtDownloadJson,
+  uwtSafeStringify
+} from './uwt-diagnostics-export';
+
+/** What each section calls its events, when telling people about them. */
+export const UWT_DIAGNOSTICS_SECTION_NOUN: Record<
+  UwtDiagnosticsSectionId,
+  string
+> = { bi: 'BI', scenario: 'scenario', logging: 'log' };
+
+/**
+ * Downloads or copies one section's captured events as JSON. Provided by
+ * the popup, beside its {@link UwtDiagnosticsStore}.
+ */
+@Injectable()
+export class UwtDiagnosticsExporter {
+  private readonly store = inject(UwtDiagnosticsStore);
+  private readonly identity = inject(UWT_TELEMETRY_IDENTITY, {
+    optional: true
+  });
+
+  private readonly sink = inject(UwtTelemetrySink, { optional: true });
+  private readonly document = inject(DOCUMENT);
+  private readonly announcer = inject(CPS_LIVE_ANNOUNCER_SERVICE, {
+    optional: true
+  });
+
+  private readonly notifications = inject(CpsNotificationService, {
+    optional: true
+  });
+
+  /** Saves the section's events as a JSON file. */
+  download(section: UwtDiagnosticsSectionId): void {
+    try {
+      const json = this.json(section);
+      uwtDownloadJson(
+        this.document,
+        uwtDiagnosticsFilename(
+          this.identity?.application ?? 'app',
+          section,
+          new Date()
+        ),
+        json
+      );
+      this.announce(
+        `Downloaded ${this.store.sectionCount(section).captured} ${
+          UWT_DIAGNOSTICS_SECTION_NOUN[section]
+        } events.`
+      );
+    } catch (error) {
+      this.fail("Couldn't create the download", error);
+    }
+  }
+
+  /**
+   * Puts the section's events on the clipboard, for when a browser blocks
+   * downloads.
+   *
+   * @returns whether copying worked
+   */
+  async copy(section: UwtDiagnosticsSectionId): Promise<boolean> {
+    try {
+      await navigator.clipboard.writeText(this.json(section));
+      this.announce(
+        `${UWT_DIAGNOSTICS_SECTION_NOUN[section]} events copied as JSON.`
+      );
+      return true;
+    } catch (error) {
+      this.fail("Couldn't copy to the clipboard", error);
+      return false;
+    }
+  }
+
+  /** The section's export document, serialized. */
+  json(section: UwtDiagnosticsSectionId): string {
+    return uwtSafeStringify(
+      uwtBuildDiagnosticsExport(this.store.sectionEvents(section), {
+        section,
+        startedAt: this.store.startedAt(),
+        paused: this.store.paused(),
+        app: {
+          application: this.identity?.application ?? '',
+          environment: this.identity?.environment ?? '',
+          version: this.identity?.version ?? '',
+          eventNamespace:
+            this.identity?.eventNamespace ?? UWT_DEFAULT_EVENT_NAMESPACE
+        },
+        session: this.session(),
+        userAgent: this.document.defaultView?.navigator.userAgent ?? '',
+        activeFilters: this.store.filters()[section],
+        count: this.store.sectionCount(section)
+      }),
+      2
+    );
+  }
+
+  private session(): { sessionId?: string; userId?: string } {
+    try {
+      return {
+        sessionId: this.sink?.getSessionId(),
+        userId: this.sink?.getUserId()
+      };
+    } catch {
+      return {};
+    }
+  }
+
+  private announce(message: string): void {
+    try {
+      this.announcer?.announce(message, 'polite');
+    } catch {
+      // Announcements are a courtesy; never let one break the popup.
+    }
+  }
+
+  private fail(message: string, error: unknown): void {
+    const detail = error instanceof Error ? error.message : String(error);
+    try {
+      this.notifications?.error(message, detail);
+    } catch {
+      // Nothing more to do; the popup keeps working.
+    }
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
new file mode 100644
index 0000000..e765ec1
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
@@ -0,0 +1,97 @@
+<div class="uwt-diagnostics-filter-bar">
+  <div class="uwt-diagnostics-filter-bar__row">
+    <cps-input
+      class="uwt-diagnostics-filter-bar__search uwt-diagnostics-search"
+      [ariaLabel]="'Search ' + sectionName() + ' events'"
+      placeholder="Search all fields"
+      prefixIcon="search"
+      [clearable]="true"
+      [hideDetails]="true"
+      [value]="filters().text"
+      (valueChanged)="onSearch($event)">
+    </cps-input>
+    <cps-button
+      type="outlined"
+      size="small"
+      icon="filter-funnel"
+      label="Add filter"
+      [ariaLabel]="'Add a filter to ' + sectionName()"
+      [ariaExpanded]="builderOpen()"
+      (clicked)="builderOpen.set(!builderOpen())">
+    </cps-button>
+    <cps-info-circle
+      tooltipText="Search matches any field's value or name, ignoring case. A filter compares one field, such as metadata.theme. Use steps[].name to match any item of a list, or steps[2].name for one. All filters must match. Filters apply to this section only; its download always contains everything it captured.">
+    </cps-info-circle>
+  </div>
+
+  @if (builderOpen()) {
+    <div
+      class="uwt-diagnostics-filter-bar__builder"
+      role="group"
+      [attr.aria-label]="'New filter for ' + sectionName()"
+      (keydown.enter)="add()">
+      <cps-autocomplete
+        class="uwt-diagnostics-filter-bar__path"
+        label="Field"
+        placeholder="Choose a field"
+        [options]="pathOptions()"
+        [returnObject]="false"
+        [hideDetails]="true"
+        [value]="path()"
+        (valueChanged)="onPath($event)">
+      </cps-autocomplete>
+      <cps-select
+        class="uwt-diagnostics-filter-bar__operator"
+        label="Condition"
+        [options]="operators"
+        [returnObject]="false"
+        [hideDetails]="true"
+        [value]="operator()"
+        (valueChanged)="onOperator($event)">
+      </cps-select>
+      @if (needsValue()) {
+        <cps-input
+          class="uwt-diagnostics-filter-bar__value"
+          label="Value"
+          placeholder="Text to compare"
+          [hideDetails]="true"
+          [value]="value()"
+          (valueChanged)="value.set($event ?? '')">
+        </cps-input>
+      }
+      <cps-button
+        size="small"
+        label="Add"
+        [disabled]="!canAdd()"
+        (clicked)="add()">
+      </cps-button>
+    </div>
+  }
+
+  @if (chips().length > 0 || anyActive()) {
+    <div class="uwt-diagnostics-filter-bar__active">
+      <span class="uwt-diagnostics-filter-bar__label">Filters:</span>
+      <ul
+        class="uwt-diagnostics-filter-bar__chips"
+        [attr.aria-label]="'Active filters for ' + sectionName()">
+        @for (chip of chips(); track chip.id) {
+          <li>
+            <cps-chip
+              [label]="chip.text"
+              [closable]="true"
+              [closeButtonAriaLabel]="'Remove filter ' + chip.text"
+              (closed)="store.removeFilter(section(), chip.id)">
+            </cps-chip>
+          </li>
+        }
+      </ul>
+      <cps-button
+        type="borderless"
+        size="xsmall"
+        label="Clear filters"
+        [ariaLabel]="'Clear filters for ' + sectionName()"
+        (clicked)="clearAll()">
+      </cps-button>
+    </div>
+  }
+</div>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss
new file mode 100644
index 0000000..11a4ef0
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss
@@ -0,0 +1,52 @@
+:host {
+  display: block;
+}
+
+.uwt-diagnostics-filter-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.uwt-diagnostics-filter-bar__row,
+.uwt-diagnostics-filter-bar__builder,
+.uwt-diagnostics-filter-bar__active {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.uwt-diagnostics-filter-bar__active {
+  align-items: center;
+}
+
+.uwt-diagnostics-filter-bar__search {
+  flex: 1 1 18rem;
+}
+
+.uwt-diagnostics-filter-bar__path {
+  flex: 2 1 14rem;
+}
+
+.uwt-diagnostics-filter-bar__operator {
+  flex: 1 1 9rem;
+}
+
+.uwt-diagnostics-filter-bar__value {
+  flex: 2 1 12rem;
+}
+
+.uwt-diagnostics-filter-bar__label {
+  font-size: 0.8125rem;
+  color: var(--cps-text-secondary);
+}
+
+.uwt-diagnostics-filter-bar__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts
new file mode 100644
index 0000000..ba09957
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts
@@ -0,0 +1,98 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UwtDiagnosticsStore } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UwtDiagnosticsFilterBarComponent } from './uwt-diagnostics-filter-bar.component';
+
+describe('UwtDiagnosticsFilterBarComponent', () => {
+  let fixture: ComponentFixture<UwtDiagnosticsFilterBarComponent>;
+  let store: UwtDiagnosticsStore;
+  const bar = () =>
+    fixture.componentInstance as unknown as {
+      builderOpen: { set(v: boolean): void };
+      onPath(v: unknown): void;
+      onOperator(v: unknown): void;
+      value: { set(v: string): void };
+      add(): void;
+      canAdd(): boolean;
+    };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UwtDiagnosticsFilterBarComponent, NoopAnimationsModule],
+      providers: [UwtDiagnosticsStore]
+    }).compileComponents();
+    store = TestBed.inject(UwtDiagnosticsStore);
+    fixture = TestBed.createComponent(UwtDiagnosticsFilterBarComponent);
+    fixture.componentRef.setInput('section', 'logging');
+    fixture.componentRef.setInput('sectionName', 'Logging');
+    fixture.detectChanges();
+  });
+
+  it('should need a field, and a value unless checking presence', () => {
+    bar().builderOpen.set(true);
+    fixture.detectChanges();
+    expect(bar().canAdd()).toBe(false);
+
+    bar().onPath('metadata.theme');
+    expect(bar().canAdd()).toBe(false);
+    bar().value.set('dark');
+    expect(bar().canAdd()).toBe(true);
+
+    bar().value.set('');
+    bar().onOperator('exists');
+    expect(bar().canAdd()).toBe(true);
+  });
+
+  it('should name its controls after the section', () => {
+    const el = fixture.nativeElement as HTMLElement;
+    expect(
+      el
+        .querySelector('.uwt-diagnostics-search input')
+        ?.getAttribute('aria-label')
+    ).toBe('Search Logging events');
+  });
+
+  it('should add a filter as a removable chip with a spoken name', () => {
+    bar().onPath('metadata.theme');
+    bar().onOperator('equals');
+    bar().value.set('dark');
+    bar().add();
+    fixture.detectChanges();
+
+    // Written to this bar's own section only.
+    expect(store.filters().bi.fields).toHaveLength(0);
+    expect(store.filters().logging.fields).toEqual([
+      expect.objectContaining({
+        path: 'metadata.theme',
+        operator: 'equals',
+        value: 'dark'
+      })
+    ]);
+    const close = fixture.nativeElement.querySelector(
+      'cps-chip button'
+    ) as HTMLButtonElement;
+    expect(close.getAttribute('aria-label')).toBe(
+      'Remove filter metadata.theme equals "dark"'
+    );
+
+    close.click();
+    fixture.detectChanges();
+    expect(store.filters().logging.fields).toHaveLength(0);
+  });
+
+  it('should clear the text and every filter together', () => {
+    store.setText('logging', 'x');
+    store.addFilter('logging', { path: 'kind', operator: 'exists', value: '' });
+    store.setText('bi', 'kept');
+    fixture.detectChanges();
+
+    const clearBtn = Array.from(
+      (fixture.nativeElement as HTMLElement).querySelectorAll('button')
+    ).find((b) => b.textContent?.trim() === 'Clear filters');
+    clearBtn?.click();
+
+    expect(store.filters().logging).toEqual({ text: '', fields: [] });
+    // Another section's filters are left alone.
+    expect(store.filters().bi.text).toBe('kept');
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts
new file mode 100644
index 0000000..105e967
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts
@@ -0,0 +1,142 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  inject,
+  input,
+  signal
+} from '@angular/core';
+import {
+  CpsAutocompleteComponent,
+  CpsButtonComponent,
+  CpsChipComponent,
+  CpsInfoCircleComponent,
+  CpsInputComponent,
+  CpsSelectComponent
+} from 'cps-ui-kit';
+import {
+  UwtDiagnosticsFilterOperator,
+  UwtDiagnosticsSectionId
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UwtDiagnosticsStore } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import {
+  uwtDescribeFilter,
+  uwtOperatorNeedsValue
+} from '../uwt-diagnostics-filter/uwt-diagnostics-filter';
+
+/** Typing settles for this long before filtering runs, in milliseconds. */
+const SEARCH_DEBOUNCE_MS = 150;
+
+/**
+ * One section's free-text search, field-filter builder and active filters.
+ * Each section filters on its own; nothing here affects the others.
+ */
+@Component({
+  selector: 'uwt-diagnostics-filter-bar',
+  imports: [
+    CpsInputComponent,
+    CpsAutocompleteComponent,
+    CpsSelectComponent,
+    CpsButtonComponent,
+    CpsChipComponent,
+    CpsInfoCircleComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './uwt-diagnostics-filter-bar.component.html',
+  styleUrl: './uwt-diagnostics-filter-bar.component.scss'
+})
+export class UwtDiagnosticsFilterBarComponent {
+  protected readonly store = inject(UwtDiagnosticsStore);
+
+  /** The section these filters belong to. */
+  readonly section = input.required<UwtDiagnosticsSectionId>();
+  /** The section's name as people read it, e.g. `BI telemetry`. */
+  readonly sectionName = input.required<string>();
+
+  protected readonly filters = computed(
+    () => this.store.filters()[this.section()]
+  );
+
+  protected readonly operators: {
+    label: string;
+    value: UwtDiagnosticsFilterOperator;
+  }[] = [
+    { label: 'contains', value: 'contains' },
+    { label: 'equals', value: 'equals' },
+    { label: 'does not contain', value: 'not-contains' },
+    { label: 'exists', value: 'exists' },
+    { label: 'is missing', value: 'missing' }
+  ];
+
+  protected readonly builderOpen = signal(false);
+  protected readonly path = signal('');
+  protected readonly operator =
+    signal<UwtDiagnosticsFilterOperator>('contains');
+
+  protected readonly value = signal('');
+
+  protected readonly pathOptions = computed(() =>
+    this.store.knownPaths()[this.section()].map((p) => ({ label: p, value: p }))
+  );
+
+  protected readonly needsValue = computed(() =>
+    uwtOperatorNeedsValue(this.operator())
+  );
+
+  protected readonly canAdd = computed(
+    () => !!this.path().trim() && (!this.needsValue() || !!this.value().trim())
+  );
+
+  protected readonly chips = computed(() =>
+    this.filters().fields.map((f) => ({
+      id: f.id,
+      text: uwtDescribeFilter(f)
+    }))
+  );
+
+  protected readonly anyActive = computed(() => {
+    const f = this.filters();
+    return !!f.text.trim() || f.fields.length > 0;
+  });
+
+  private searchTimer?: ReturnType<typeof setTimeout>;
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => clearTimeout(this.searchTimer));
+  }
+
+  protected onSearch(text: string): void {
+    clearTimeout(this.searchTimer);
+    this.searchTimer = setTimeout(
+      () => this.store.setText(this.section(), text ?? ''),
+      SEARCH_DEBOUNCE_MS
+    );
+  }
+
+  protected onPath(value: unknown): void {
+    this.path.set(typeof value === 'string' ? value : '');
+  }
+
+  protected onOperator(value: unknown): void {
+    const match = this.operators.find((o) => o.value === value);
+    this.operator.set(match?.value ?? 'contains');
+  }
+
+  protected add(): void {
+    if (!this.canAdd()) {
+      return;
+    }
+    this.store.addFilter(this.section(), {
+      path: this.path().trim(),
+      operator: this.operator(),
+      value: this.needsValue() ? this.value().trim() : ''
+    });
+    this.value.set('');
+  }
+
+  protected clearAll(): void {
+    clearTimeout(this.searchTimer);
+    this.store.clearFilters(this.section());
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts
new file mode 100644
index 0000000..af026f7
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts
@@ -0,0 +1,234 @@
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UwtDiagnosticsFieldFilter,
+  UwtDiagnosticsFilterState
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import {
+  uwtDescribeFilter,
+  uwtDiagnosticsSectionOf,
+  uwtFlattenEvent,
+  uwtKnownPaths,
+  uwtMatchesFilters
+} from './uwt-diagnostics-filter';
+
+const base = {
+  sequence: 7,
+  capturedAt: '2026-01-01T10:00:00.000Z',
+  destination: 'sink' as const,
+  origin: { forwarded: false as const }
+};
+
+const scenario: UwtTelemetryObservedEvent = {
+  ...base,
+  kind: 'scenario',
+  eventType: 'com.uwt.scenario',
+  payload: {
+    scenarioId: 'abc-123',
+    scenarioName: 'load-dashboard',
+    status: 'failure',
+    startTime: '2026-01-01T09:59:59.000Z',
+    delta: 812,
+    elapsed: 5000,
+    stepCount: 2,
+    steps: [
+      { name: 'scenario-start', startOffset: 0 },
+      { name: 'fetch', startOffset: 10, status: 'success' },
+      { name: 'render', startOffset: 400, status: 'failure' }
+    ],
+    metadata: { theme: 'Dark', retry: null },
+    application: 'app'
+  }
+};
+
+function state(
+  text = '',
+  fields: Partial<UwtDiagnosticsFieldFilter>[] = []
+): UwtDiagnosticsFilterState {
+  return {
+    text,
+    fields: fields.map((f, i) => ({
+      id: String(i),
+      path: '',
+      operator: 'contains',
+      value: '',
+      ...f
+    }))
+  };
+}
+
+describe('uwtFlattenEvent', () => {
+  const fields = uwtFlattenEvent(scenario);
+  const byPath = (p: string) => fields.find((f) => f.path === p);
+
+  it('should expose nested payload fields at their own paths', () => {
+    expect(byPath('metadata.theme')?.value).toBe('Dark');
+    expect(byPath('scenarioName')?.value).toBe('load-dashboard');
+  });
+
+  it('should index array items, with an index-free pattern', () => {
+    expect(byPath('steps[2].name')).toEqual({
+      path: 'steps[2].name',
+      pattern: 'steps[].name',
+      value: 'render'
+    });
+  });
+
+  it('should include the envelope', () => {
+    expect(byPath('kind')?.value).toBe('scenario');
+    expect(byPath('eventType')?.value).toBe('com.uwt.scenario');
+    expect(byPath('origin.forwarded')?.value).toBe('false');
+    expect(byPath('sequence')?.value).toBe('7');
+  });
+
+  it('should keep null as text, and address empty containers', () => {
+    expect(byPath('metadata.retry')?.value).toBe('null');
+    const empty = uwtFlattenEvent({
+      ...base,
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload: { tags: [], extra: {} }
+    });
+    expect(empty.map((f) => f.path)).toEqual(
+      expect.arrayContaining(['tags', 'extra'])
+    );
+  });
+
+  it('should survive a circular payload', () => {
+    const payload: Record<string, unknown> = { a: 1 };
+    payload.self = payload;
+    const event = {
+      ...base,
+      kind: 'unknown',
+      eventType: 'x',
+      payload
+    } as unknown as UwtTelemetryObservedEvent;
+
+    const result = uwtFlattenEvent(event);
+    expect(result.find((f) => f.path === 'self')?.value).toBe('[Circular]');
+  });
+
+  it('should cap the number of fields for a huge payload', () => {
+    const payload = Object.fromEntries(
+      Array.from({ length: 5000 }, (_, i) => [`k${i}`, i])
+    );
+    const result = uwtFlattenEvent({
+      ...base,
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload
+    });
+    expect(result.length).toBeLessThanOrEqual(2000 + 10);
+  });
+});
+
+describe('uwtMatchesFilters', () => {
+  const fields = uwtFlattenEvent(scenario);
+  const matches = (s: UwtDiagnosticsFilterState) =>
+    uwtMatchesFilters(fields, s);
+
+  it('should match everything with no filters', () => {
+    expect(matches(state())).toBe(true);
+  });
+
+  it('should match free text anywhere, ignoring case', () => {
+    expect(matches(state('DASHBOARD'))).toBe(true);
+    expect(matches(state('dark'))).toBe(true);
+    expect(matches(state('metadata.the'))).toBe(true); // path text too
+    expect(matches(state('nowhere'))).toBe(false);
+  });
+
+  it('should apply contains, equals and not-contains to one path', () => {
+    expect(matches(state('', [{ path: 'scenarioName', value: 'dash' }]))).toBe(
+      true
+    );
+    expect(
+      matches(
+        state('', [{ path: 'scenarioName', operator: 'equals', value: 'dash' }])
+      )
+    ).toBe(false);
+    expect(
+      matches(
+        state('', [
+          { path: 'status', operator: 'not-contains', value: 'success' }
+        ])
+      )
+    ).toBe(true);
+  });
+
+  it('should match any array item by pattern, or one item by index', () => {
+    expect(
+      matches(state('', [{ path: 'steps[].name', value: 'render' }]))
+    ).toBe(true);
+    expect(
+      matches(state('', [{ path: 'steps[1].name', value: 'render' }]))
+    ).toBe(false);
+  });
+
+  it('should treat exists and missing as presence checks', () => {
+    expect(
+      matches(state('', [{ path: 'metadata.theme', operator: 'exists' }]))
+    ).toBe(true);
+    expect(
+      matches(state('', [{ path: 'error.message', operator: 'missing' }]))
+    ).toBe(true);
+  });
+
+  it('should require every filter and the text together', () => {
+    expect(
+      matches(
+        state('dashboard', [
+          { path: 'status', operator: 'equals', value: 'failure' },
+          { path: 'metadata.theme', value: 'light' }
+        ])
+      )
+    ).toBe(false);
+  });
+
+  it('should find nothing for a path that does not exist', () => {
+    expect(matches(state('', [{ path: 'level', value: 'warn' }]))).toBe(false);
+  });
+});
+
+describe('helpers', () => {
+  it('should put each kind in its section', () => {
+    expect(uwtDiagnosticsSectionOf('bi')).toBe('bi');
+    expect(uwtDiagnosticsSectionOf('unknown')).toBe('bi');
+    expect(uwtDiagnosticsSectionOf('scenario-step')).toBe('scenario');
+    expect(uwtDiagnosticsSectionOf('error')).toBe('logging');
+  });
+
+  it('should describe a filter as a short sentence', () => {
+    expect(
+      uwtDescribeFilter({
+        id: '1',
+        path: 'level',
+        operator: 'not-contains',
+        value: 'log'
+      })
+    ).toBe('level does not contain "log"');
+    expect(
+      uwtDescribeFilter({
+        id: '1',
+        path: 'error',
+        operator: 'exists',
+        value: ''
+      })
+    ).toBe('error exists');
+  });
+
+  it('should suggest envelope paths first, then the most common', () => {
+    const paths = uwtKnownPaths([
+      uwtFlattenEvent(scenario),
+      uwtFlattenEvent(scenario)
+    ]);
+    expect(paths.slice(0, 5)).toEqual([
+      'kind',
+      'eventType',
+      'destination',
+      'origin.application',
+      'capturedAt'
+    ]);
+    expect(paths).toContain('steps[].name');
+    expect(new Set(paths).size).toBe(paths.length);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts
new file mode 100644
index 0000000..3826694
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts
@@ -0,0 +1,210 @@
+import {
+  UwtTelemetryEventKind,
+  UwtTelemetryObservedEvent
+} from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UwtDiagnosticsField,
+  UwtDiagnosticsFieldFilter,
+  UwtDiagnosticsFilterOperator,
+  UwtDiagnosticsFilterState,
+  UwtDiagnosticsSectionId
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+
+/** Deeper structures are cut off, so a pathological payload stays cheap. */
+const MAX_DEPTH = 12;
+/** Leaves per event considered for filtering. */
+const MAX_FIELDS = 2000;
+/** Characters of each value considered for matching. */
+const MAX_VALUE_CHARS = 2000;
+
+/**
+ * Which section an event is shown in. An event forwarded from another
+ * realm with an unrecognised type is shown with BI, alongside the other
+ * custom events.
+ */
+export function uwtDiagnosticsSectionOf(
+  kind: UwtTelemetryEventKind
+): UwtDiagnosticsSectionId {
+  switch (kind) {
+    case 'scenario':
+    case 'scenario-step':
+      return 'scenario';
+    case 'log':
+    case 'error':
+      return 'logging';
+    default:
+      return 'bi';
+  }
+}
+
+/**
+ * Every leaf of an event as `path = value` text, done once when the event
+ * arrives so filtering never walks payloads again.
+ *
+ * Payload fields come first, at their own paths (`metadata.theme`,
+ * `steps[2].name`); the envelope follows (`kind`, `eventType`,
+ * `destination`, `origin.application`, `sequence`, `capturedAt`). Cycles,
+ * excessive depth and oversized strings are cut short rather than failing.
+ */
+export function uwtFlattenEvent(
+  event: UwtTelemetryObservedEvent
+): UwtDiagnosticsField[] {
+  const fields: UwtDiagnosticsField[] = [];
+  const seen = new WeakSet<object>();
+
+  const visit = (value: unknown, path: string, depth: number): void => {
+    if (fields.length >= MAX_FIELDS) {
+      return;
+    }
+    if (value === null || typeof value !== 'object') {
+      if (value !== undefined) {
+        push(fields, path, String(value));
+      }
+      return;
+    }
+    if (seen.has(value)) {
+      push(fields, path, '[Circular]');
+      return;
+    }
+    if (depth >= MAX_DEPTH) {
+      push(fields, path, '[Too deep]');
+      return;
+    }
+    seen.add(value);
+
+    const entries: [string, unknown][] = Array.isArray(value)
+      ? value.map((v, i) => [`[${i}]`, v])
+      : Object.entries(value).map(([k, v]) => [path ? `.${k}` : k, v]);
+
+    if (entries.length === 0) {
+      // Still addressable, so `exists` can find an empty object or array.
+      push(fields, path, '');
+      return;
+    }
+    for (const [suffix, child] of entries) {
+      visit(child, path + suffix, depth + 1);
+    }
+  };
+
+  visit(event.payload, '', 0);
+
+  const { payload: _payload, ...envelope } = event;
+  visit(envelope, '', 0);
+  return fields;
+}
+
+function push(fields: UwtDiagnosticsField[], path: string, value: string) {
+  fields.push({
+    path,
+    pattern: path.replace(/\[\d+\]/g, '[]'),
+    value:
+      value.length > MAX_VALUE_CHARS ? value.slice(0, MAX_VALUE_CHARS) : value
+  });
+}
+
+/**
+ * Whether an event's fields satisfy every active filter.
+ *
+ * - Free text: case-insensitive, matched against every value and path.
+ * - A field filter's path matches a field's exact path or its pattern, so
+ *   `steps[].name` covers every step and `steps[2].name` only the third.
+ *   With several matching fields, one is enough.
+ * - Everything is combined with AND.
+ */
+export function uwtMatchesFilters(
+  fields: readonly UwtDiagnosticsField[],
+  filters: UwtDiagnosticsFilterState
+): boolean {
+  const text = filters.text.trim().toLowerCase();
+  if (
+    text &&
+    !fields.some(
+      (f) =>
+        f.value.toLowerCase().includes(text) ||
+        f.path.toLowerCase().includes(text)
+    )
+  ) {
+    return false;
+  }
+  return filters.fields.every((filter) => matchesField(fields, filter));
+}
+
+function matchesField(
+  fields: readonly UwtDiagnosticsField[],
+  filter: UwtDiagnosticsFieldFilter
+): boolean {
+  const path = filter.path.trim().toLowerCase();
+  const value = filter.value.trim().toLowerCase();
+  const atPath = fields.filter(
+    (f) => f.path.toLowerCase() === path || f.pattern.toLowerCase() === path
+  );
+
+  switch (filter.operator) {
+    case 'exists':
+      return atPath.length > 0;
+    case 'missing':
+      return atPath.length === 0;
+    case 'equals':
+      return atPath.some((f) => f.value.toLowerCase() === value);
+    case 'not-contains':
+      return !atPath.some((f) => f.value.toLowerCase().includes(value));
+    case 'contains':
+    default:
+      return atPath.some((f) => f.value.toLowerCase().includes(value));
+  }
+}
+
+const OPERATOR_TEXT: Record<UwtDiagnosticsFilterOperator, string> = {
+  contains: 'contains',
+  equals: 'equals',
+  'not-contains': 'does not contain',
+  exists: 'exists',
+  missing: 'is missing'
+};
+
+/** A filter as a short sentence, for chips and screen readers. */
+export function uwtDescribeFilter(filter: UwtDiagnosticsFieldFilter): string {
+  const op = OPERATOR_TEXT[filter.operator];
+  return filter.operator === 'exists' || filter.operator === 'missing'
+    ? `${filter.path} ${op}`
+    : `${filter.path} ${op} "${filter.value}"`;
+}
+
+/** Whether an operator compares against a value. */
+export function uwtOperatorNeedsValue(
+  operator: UwtDiagnosticsFilterOperator
+): boolean {
+  return operator !== 'exists' && operator !== 'missing';
+}
+
+/**
+ * Field paths to suggest, from everything captured so far: envelope fields
+ * first, then the rest by how often they occur.
+ */
+export function uwtKnownPaths(
+  fieldSets: readonly (readonly UwtDiagnosticsField[])[]
+): string[] {
+  const envelope = [
+    'kind',
+    'eventType',
+    'destination',
+    'origin.application',
+    'capturedAt'
+  ];
+  const counts = new Map<string, number>();
+  for (const fields of fieldSets) {
+    for (const f of new Set(fields.map((x) => x.pattern))) {
+      if (
+        !envelope.includes(f) &&
+        f !== 'sequence' &&
+        f !== 'origin.forwarded'
+      ) {
+        counts.set(f, (counts.get(f) ?? 0) + 1);
+      }
+    }
+  }
+  const rest = [...counts.entries()]
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+    .map(([path]) => path);
+  return [...envelope, ...rest];
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts
new file mode 100644
index 0000000..141f770
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts
@@ -0,0 +1,53 @@
+import { isPlatformBrowser } from '@angular/common';
+import { inject, isDevMode, PLATFORM_ID } from '@angular/core';
+
+/**
+ * A local copy of `@absaoss-cps/ngx-ui-watchtower`'s fail-open helpers —
+ * `uwtSafe`/`uwtSafeVoid`/`uwtIsBrowser`/`uwtIsDevMode`.
+ *
+ * Not imported from the main entry point for the same reason as
+ * `@absaoss-cps/ngx-ui-watchtower/rum`'s copy: ng-packagr fixes each entry point's `rootDir`
+ * to its own `src`, and the main entry keeps these internal on purpose.
+ * See `rum/src/lib/uwt-rum-internal.util`.
+ */
+
+/** Runs `fn`, returning `fallback` instead of ever throwing. */
+export function uwtSafe<T>(operation: string, fn: () => T, fallback: T): T {
+  try {
+    return fn();
+  } catch (error) {
+    reportSuppressed(operation, error);
+    return fallback;
+  }
+}
+
+/** Void-returning form of {@link uwtSafe}. */
+export function uwtSafeVoid(operation: string, fn: () => void): void {
+  uwtSafe(operation, fn, undefined);
+}
+
+/** `isDevMode()` throws outside an Angular context; this never does. */
+export function uwtIsDevMode(): boolean {
+  try {
+    return isDevMode();
+  } catch {
+    return false;
+  }
+}
+
+/** Whether this runs in a browser. Needs an injection context. */
+export function uwtIsBrowser(): boolean {
+  return isPlatformBrowser(inject(PLATFORM_ID));
+}
+
+function reportSuppressed(operation: string, error: unknown): void {
+  if (!uwtIsDevMode()) {
+    return;
+  }
+  try {
+    // eslint-disable-next-line no-console
+    console.error(`[ngx-ui-watchtower] diagnostics.${operation} failed`, error);
+  } catch {
+    // A patched/throwing console must never escape suppression.
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
new file mode 100644
index 0000000..f155d11
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
@@ -0,0 +1,37 @@
+<div class="uwt-diagnostics-json">
+  <div class="uwt-diagnostics-json__actions">
+    <cps-button
+      type="borderless"
+      size="xsmall"
+      icon="copy"
+      [label]="
+        copied() === 'copied'
+          ? 'Copied'
+          : copied() === 'failed'
+            ? 'Copy failed'
+            : 'Copy JSON'
+      "
+      ariaLabel="Copy this payload as JSON"
+      (clicked)="copy()">
+    </cps-button>
+    <span role="status" class="cps-sr-only">{{
+      copied() === 'copied'
+        ? 'Payload copied'
+        : copied() === 'failed'
+          ? 'Copying failed'
+          : ''
+    }}</span>
+  </div>
+  @if (truncated()) {
+    <p class="uwt-diagnostics-json__notice">
+      Large payload: showing the first {{ shownChars }} characters. The download
+      contains all of it.
+    </p>
+  }
+  <pre
+    class="uwt-diagnostics-json__code"
+    tabindex="0"
+    role="region"
+    [attr.aria-label]="label()"
+    >{{ shown() }}</pre>
+</div>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss
new file mode 100644
index 0000000..09c41fb
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss
@@ -0,0 +1,41 @@
+:host {
+  display: block;
+}
+
+.uwt-diagnostics-json {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.uwt-diagnostics-json__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.uwt-diagnostics-json__notice {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--cps-state-warn);
+}
+
+.uwt-diagnostics-json__code {
+  margin: 0;
+  padding: 0.75rem;
+  max-height: 24rem;
+  overflow: auto;
+  background: var(--cps-surface-muted);
+  color: var(--cps-text-primary);
+  border: 1px solid var(--cps-border-color);
+  border-radius: var(--cps-radius-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+
+  &:focus-visible {
+    outline: 2px solid var(--cps-ring-color);
+    outline-offset: 2px;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
new file mode 100644
index 0000000..11c1afc
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
@@ -0,0 +1,90 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UwtDiagnosticsJsonComponent } from './uwt-diagnostics-json.component';
+
+describe('UwtDiagnosticsJsonComponent', () => {
+  let fixture: ComponentFixture<UwtDiagnosticsJsonComponent>;
+  const pre = () => fixture.nativeElement.querySelector('pre') as HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UwtDiagnosticsJsonComponent, NoopAnimationsModule]
+    }).compileComponents();
+    fixture = TestBed.createComponent(UwtDiagnosticsJsonComponent);
+  });
+
+  afterEach(() => jest.restoreAllMocks());
+
+  it('should show the payload as indented JSON in a named, focusable region', () => {
+    fixture.componentRef.setInput('value', { a: { b: 1 } });
+    fixture.componentRef.setInput('label', 'Payload of event #3');
+    fixture.detectChanges();
+
+    expect(JSON.parse(pre().textContent ?? '')).toEqual({ a: { b: 1 } });
+    expect(pre().textContent).toContain('\n  "a"');
+    expect(pre().getAttribute('aria-label')).toBe('Payload of event #3');
+    expect(pre().getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should truncate a huge payload in view, and say so', () => {
+    fixture.componentRef.setInput('value', { big: 'x'.repeat(100_000) });
+    fixture.componentRef.setInput('maxChars', 1000);
+    fixture.detectChanges();
+
+    expect(pre().textContent!.length).toBe(64 * 1024);
+    expect(fixture.nativeElement.textContent).toContain(
+      'showing the first 65,536 characters'
+    );
+    expect(fixture.nativeElement.textContent).toContain(
+      'The download contains all of it.'
+    );
+  });
+
+  it('should measure the limit in characters, not bytes', () => {
+    // 600 Cyrillic letters: about 600 characters of JSON, but 1,200+ bytes.
+    fixture.componentRef.setInput('value', { text: 'ж'.repeat(600) });
+    fixture.componentRef.setInput('maxChars', 1000);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).not.toContain('Large payload');
+    expect(pre().textContent).toContain('ж'.repeat(600));
+  });
+
+  it('should not cut a truncated view through the middle of a surrogate pair', () => {
+    const before = '{\n  "big": "';
+    // Lines the first emoji up so the cut would fall inside it.
+    const padding = 'x'.repeat(64 * 1024 - 1 - before.length);
+    fixture.componentRef.setInput('value', {
+      big: padding + '😀'.repeat(10)
+    });
+    fixture.componentRef.setInput('maxChars', 1000);
+    fixture.detectChanges();
+
+    const shown = pre().textContent!;
+    expect(shown.length).toBe(64 * 1024 - 1);
+    expect(shown.endsWith('x')).toBe(true);
+  });
+
+  it('should render a circular value instead of failing', () => {
+    const value: Record<string, unknown> = { a: 1 };
+    value.self = value;
+    fixture.componentRef.setInput('value', value);
+    fixture.detectChanges();
+    expect(pre().textContent).toContain('"[Circular]"');
+  });
+
+  it('should copy the full JSON', async () => {
+    const writeText = jest.fn(() => Promise.resolve());
+    Object.assign(navigator, { clipboard: { writeText } });
+    fixture.componentRef.setInput('value', { a: 1 });
+    fixture.detectChanges();
+
+    await (
+      fixture.componentInstance as unknown as { copy(): Promise<void> }
+    ).copy();
+    fixture.detectChanges();
+
+    expect(writeText).toHaveBeenCalledWith('{\n  "a": 1\n}');
+    expect(fixture.nativeElement.textContent).toContain('Payload copied');
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
new file mode 100644
index 0000000..a4ac7d3
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
@@ -0,0 +1,82 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  signal
+} from '@angular/core';
+import { CpsButtonComponent } from 'cps-ui-kit';
+import { uwtSafeStringify } from '../uwt-diagnostics-export/uwt-diagnostics-export';
+import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+
+/** Characters shown of a payload too large to show in full. */
+const TRUNCATED_VIEW_CHARS = 64 * 1024;
+
+/**
+ * The first `length` characters of `text`, one fewer if the cut would split
+ * a surrogate pair — half an emoji renders as a replacement character.
+ */
+function cutAt(text: string, length: number): string {
+  const last = text.charCodeAt(length - 1);
+  const isHighSurrogate = last >= 0xd800 && last <= 0xdbff;
+  return text.slice(0, isHighSurrogate ? length - 1 : length);
+}
+
+/**
+ * A payload as indented JSON, with a copy button.
+ *
+ * The only piece of the popup not taken from cps-ui-kit, which has no code
+ * or JSON display. It uses the kit's colour and radius tokens.
+ */
+@Component({
+  selector: 'uwt-diagnostics-json',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './uwt-diagnostics-json.component.html',
+  styleUrl: './uwt-diagnostics-json.component.scss'
+})
+export class UwtDiagnosticsJsonComponent {
+  /** What to show. */
+  readonly value = input.required<unknown>();
+
+  /** Accessible name of the scrollable block. */
+  readonly label = input('Event payload');
+
+  /** JSON length, in characters, above which the view is truncated. */
+  readonly maxChars = input(
+    UWT_DEFAULT_DIAGNOSTICS_CONFIG.maxPayloadCharsInView
+  );
+
+  /** How much a truncated view shows, as the notice words it. */
+  protected readonly shownChars = TRUNCATED_VIEW_CHARS.toLocaleString('en-US');
+
+  protected readonly copied = signal<'idle' | 'copied' | 'failed'>('idle');
+
+  protected readonly full = computed(() => {
+    try {
+      return uwtSafeStringify(this.value(), 2) ?? 'undefined';
+    } catch (error) {
+      return `Couldn't render this payload: ${
+        error instanceof Error ? error.message : String(error)
+      }`;
+    }
+  });
+
+  protected readonly truncated = computed(
+    () => this.full().length > this.maxChars()
+  );
+
+  protected readonly shown = computed(() =>
+    this.truncated() ? cutAt(this.full(), TRUNCATED_VIEW_CHARS) : this.full()
+  );
+
+  protected async copy(): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(this.full());
+      this.copied.set('copied');
+    } catch {
+      this.copied.set('failed');
+    }
+    setTimeout(() => this.copied.set('idle'), 2000);
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts
new file mode 100644
index 0000000..a2efc2a
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts
@@ -0,0 +1,199 @@
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UwtDiagnosticsEntry,
+  UwtDiagnosticsSectionId
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+
+/** One column of a section's table. */
+export interface UwtDiagnosticsColumn {
+  key: string;
+  header: string;
+  /** Hidden on narrow screens. */
+  secondary?: boolean;
+  value: (event: UwtTelemetryObservedEvent) => string;
+}
+
+/** One table row: display text, plus the entry for the detail view. */
+export interface UwtDiagnosticsRow {
+  sequence: number;
+  time: string;
+  cells: Record<string, string>;
+  forwardedFrom?: string;
+  entry: UwtDiagnosticsEntry;
+}
+
+/** Reads a field as text, whatever the payload's declared type. */
+function text(payload: unknown, key: string): string {
+  if (payload === null || typeof payload !== 'object') {
+    return '';
+  }
+  const value = (payload as Record<string, unknown>)[key];
+  return value === undefined || value === null ? '' : String(value);
+}
+
+function metadataSummary(payload: unknown): string {
+  if (payload === null || typeof payload !== 'object') {
+    return '';
+  }
+  const metadata = (payload as Record<string, unknown>).metadata;
+  if (metadata === null || typeof metadata !== 'object') {
+    return '';
+  }
+  const pairs = Object.entries(metadata as Record<string, unknown>);
+  const shown = pairs
+    .slice(0, 3)
+    .map(([k, v]) => `${k}=${String(v)}`)
+    .join(', ');
+  return pairs.length > 3 ? `${shown}, …` : shown;
+}
+
+function ms(value: string): string {
+  return value === '' ? '' : `${value} ms`;
+}
+
+function eventTypeOf(event: UwtTelemetryObservedEvent): string {
+  return 'eventType' in event ? event.eventType : '';
+}
+
+export const UWT_DIAGNOSTICS_COLUMNS: Record<
+  UwtDiagnosticsSectionId,
+  readonly UwtDiagnosticsColumn[]
+> = {
+  bi: [
+    {
+      key: 'name',
+      header: 'Event',
+      value: (e) =>
+        e.kind === 'unknown'
+          ? `${eventTypeOf(e)} (unrecognised type)`
+          : text(e.payload, 'eventName')
+    },
+    { key: 'type', header: 'Event type', secondary: true, value: eventTypeOf },
+    {
+      key: 'scenario',
+      header: 'Scenario id',
+      secondary: true,
+      value: (e) => text(e.payload, 'scenarioId')
+    },
+    {
+      key: 'feature',
+      header: 'Feature',
+      secondary: true,
+      value: (e) => text(e.payload, 'feature')
+    },
+    {
+      key: 'metadata',
+      header: 'Metadata',
+      value: (e) => metadataSummary(e.payload)
+    }
+  ],
+  scenario: [
+    {
+      key: 'name',
+      header: 'Scenario',
+      value: (e) => text(e.payload, 'scenarioName')
+    },
+    {
+      key: 'kind',
+      header: 'Event',
+      value: (e) => (e.kind === 'scenario-step' ? 'step' : 'record')
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      value: (e) =>
+        e.kind === 'scenario-step'
+          ? [text(e.payload, 'name'), text(e.payload, 'status')]
+              .filter(Boolean)
+              .join(' · ')
+          : text(e.payload, 'status')
+    },
+    {
+      key: 'duration',
+      header: 'Duration',
+      value: (e) =>
+        ms(text(e.payload, e.kind === 'scenario-step' ? 'stepDelta' : 'delta'))
+    },
+    {
+      key: 'steps',
+      header: 'Steps',
+      secondary: true,
+      value: (e) => text(e.payload, 'stepCount')
+    },
+    {
+      key: 'id',
+      header: 'Scenario id',
+      secondary: true,
+      value: (e) => text(e.payload, 'scenarioId')
+    }
+  ],
+  logging: [
+    {
+      key: 'level',
+      header: 'Level',
+      value: (e) =>
+        e.kind === 'error' ? 'error → RUM' : text(e.payload, 'level')
+    },
+    {
+      key: 'logger',
+      header: 'Logger',
+      value: (e) => text(e.payload, 'logger')
+    },
+    {
+      key: 'context',
+      header: 'Context',
+      secondary: true,
+      value: (e) => text(e.payload, 'context')
+    },
+    {
+      key: 'message',
+      header: 'Message',
+      value: (e) =>
+        e.kind === 'error'
+          ? `${text(e.payload, 'name')}: ${text(e.payload, 'message')}`
+          : text(e.payload, 'message')
+    },
+    {
+      key: 'correlation',
+      header: 'Correlation id',
+      secondary: true,
+      value: (e) => text(e.payload, 'correlationId')
+    }
+  ]
+};
+
+/** `HH:MM:SS.mmm` in local time — the precision that orders a burst. */
+export function uwtDiagnosticsTime(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  const pad = (n: number, width = 2) => String(n).padStart(width, '0');
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
+    date.getSeconds()
+  )}.${pad(date.getMilliseconds(), 3)}`;
+}
+
+export function uwtDiagnosticsRow(
+  entry: UwtDiagnosticsEntry,
+  columns: readonly UwtDiagnosticsColumn[]
+): UwtDiagnosticsRow {
+  const { event } = entry;
+  const cells: Record<string, string> = {};
+  for (const column of columns) {
+    try {
+      cells[column.key] = column.value(event);
+    } catch {
+      cells[column.key] = '';
+    }
+  }
+  return {
+    sequence: event.sequence,
+    time: uwtDiagnosticsTime(event.capturedAt),
+    cells,
+    forwardedFrom: event.origin.forwarded
+      ? (event.origin.application ?? 'another app')
+      : undefined,
+    entry
+  };
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
new file mode 100644
index 0000000..2167f7a
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
@@ -0,0 +1,161 @@
+<cps-expansion-panel
+  [headerTitle]="title()"
+  [prefixIcon]="text().icon"
+  [isExpanded]="true"
+  borderColor="line-mid">
+  <div class="uwt-diagnostics-section">
+    <div class="uwt-diagnostics-section__tools">
+      <uwt-diagnostics-filter-bar
+        class="uwt-diagnostics-section__filters"
+        [section]="section()"
+        [sectionName]="text().title">
+      </uwt-diagnostics-filter-bar>
+      <div class="uwt-diagnostics-section__actions">
+        <cps-button
+          type="outlined"
+          size="small"
+          icon="copy"
+          [label]="
+            copyState() === 'copied'
+              ? 'Copied'
+              : copyState() === 'failed'
+                ? 'Copy failed'
+                : 'Copy JSON'
+          "
+          [ariaLabel]="'Copy ' + text().title + ' events as JSON'"
+          (clicked)="copy()">
+        </cps-button>
+        <cps-button
+          size="small"
+          icon="download"
+          label="Download JSON"
+          [ariaLabel]="
+            'Download ' +
+            text().title +
+            ' events as JSON. Contains session and user ids.'
+          "
+          (clicked)="download()">
+        </cps-button>
+      </div>
+    </div>
+    @if (unseenNew() > 0) {
+      <div class="uwt-diagnostics-section__notice">
+        <span>{{ unseenNew() }} new on the first page.</span>
+        <cps-button
+          type="borderless"
+          size="xsmall"
+          label="Go to newest"
+          (clicked)="goToNewest()">
+        </cps-button>
+      </div>
+    }
+    <cps-table
+      [data]="rows()"
+      dataKey="sequence"
+      [hasToolbar]="false"
+      size="small"
+      [striped]="true"
+      [paginator]="true"
+      [rows]="25"
+      [rowsPerPageOptions]="[25, 50, 100]"
+      [first]="first()"
+      (pageChanged)="onPage($event)"
+      [emptyMessage]="emptyMessage()">
+      <ng-template #header>
+        <th scope="col">Time</th>
+        @for (column of columns(); track column.key) {
+          <th
+            scope="col"
+            [class.uwt-diagnostics-section__secondary]="column.secondary">
+            {{ column.header }}
+          </th>
+        }
+      </ng-template>
+
+      <ng-template let-row #body>
+        <td class="uwt-diagnostics-section__time">
+          {{ row.time }}
+          @if (isFresh(row.sequence)) {
+            <cps-chip label="New"></cps-chip>
+          }
+        </td>
+        @for (column of columns(); track column.key) {
+          <td
+            [class.uwt-diagnostics-section__secondary]="column.secondary"
+            [class.uwt-diagnostics-section__level--warn]="
+              column.key === 'level' && row.cells['level'] === 'warn'
+            "
+            [class.uwt-diagnostics-section__level--error]="
+              column.key === 'level' && row.cells['level'].startsWith('error')
+            ">
+            @if (column.key === columns()[0].key && row.forwardedFrom) {
+              <span class="uwt-diagnostics-section__forwarded"
+                >↪ {{ row.forwardedFrom }}</span
+              >
+            }
+            <span class="uwt-diagnostics-section__cell">{{
+              row.cells[column.key]
+            }}</span>
+          </td>
+        }
+      </ng-template>
+
+      <ng-template let-row #rowexpansion>
+        <div class="uwt-diagnostics-section__detail">
+          <dl class="uwt-diagnostics-section__meta">
+            <div>
+              <dt>Handed to</dt>
+              <dd>
+                {{
+                  row.entry.event.destination === 'sink'
+                    ? 'telemetry sink'
+                    : 'log API provider'
+                }}
+              </dd>
+            </div>
+            <div>
+              <dt>From</dt>
+              <dd>
+                {{
+                  row.forwardedFrom
+                    ? 'forwarded by ' + row.forwardedFrom
+                    : 'this app'
+                }}
+              </dd>
+            </div>
+            @if ('eventType' in row.entry.event) {
+              <div>
+                <dt>Event type</dt>
+                <dd>{{ row.entry.event.eventType }}</dd>
+              </div>
+            }
+            @if (
+              row.entry.event.kind === 'error' &&
+              row.entry.event.relatedSequence
+            ) {
+              <div>
+                <dt>Mirrored from</dt>
+                <dd>log event #{{ row.entry.event.relatedSequence }}</dd>
+              </div>
+            }
+            <div>
+              <dt>Event</dt>
+              <dd>#{{ row.sequence }}, {{ row.entry.sizeChars }} characters</dd>
+            </div>
+          </dl>
+          @if (row.entry.renderError) {
+            <p class="uwt-diagnostics-section__error">
+              Couldn't prepare this event for display:
+              {{ row.entry.renderError }}
+            </p>
+          }
+          <uwt-diagnostics-json
+            [value]="row.entry.event.payload"
+            [label]="'Payload of event #' + row.sequence"
+            [maxChars]="maxPayloadChars()">
+          </uwt-diagnostics-json>
+        </div>
+      </ng-template>
+    </cps-table>
+  </div>
+</cps-expansion-panel>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
new file mode 100644
index 0000000..13af3b9
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
@@ -0,0 +1,108 @@
+:host {
+  display: block;
+  container-type: inline-size;
+}
+
+.uwt-diagnostics-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+}
+
+.uwt-diagnostics-section__tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.5rem 1rem;
+}
+
+.uwt-diagnostics-section__filters {
+  flex: 1 1 24rem;
+}
+
+.uwt-diagnostics-section__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.uwt-diagnostics-section__notice {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--cps-text-secondary);
+}
+
+.uwt-diagnostics-section__time {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.uwt-diagnostics-section__cell {
+  display: inline-block;
+  max-width: 28rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.uwt-diagnostics-section__forwarded {
+  margin-inline-end: 0.375rem;
+  color: var(--cps-text-secondary);
+  font-size: 0.75rem;
+}
+
+// Level is always written out; colour only supports it.
+.uwt-diagnostics-section__level--warn {
+  color: var(--cps-state-warn);
+  font-weight: 600;
+}
+
+.uwt-diagnostics-section__level--error {
+  color: var(--cps-state-error);
+  font-weight: 600;
+}
+
+.uwt-diagnostics-section__detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem;
+}
+
+.uwt-diagnostics-section__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+  margin: 0;
+  font-size: 0.8125rem;
+
+  div {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  dt {
+    color: var(--cps-text-secondary);
+  }
+
+  dd {
+    margin: 0;
+    color: var(--cps-text-primary);
+  }
+}
+
+.uwt-diagnostics-section__error {
+  margin: 0;
+  color: var(--cps-state-error);
+  font-size: 0.8125rem;
+}
+
+@container (max-width: 48rem) {
+  .uwt-diagnostics-section__secondary {
+    display: none;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts
new file mode 100644
index 0000000..00371b6
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts
@@ -0,0 +1,126 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UwtTelemetryMonitor } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtDiagnosticsExporter } from '../uwt-diagnostics-export/uwt-diagnostics-exporter';
+import {
+  UWT_DIAGNOSTICS_FLUSH_MS,
+  UwtDiagnosticsStore
+} from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UwtDiagnosticsSectionComponent } from './uwt-diagnostics-section.component';
+
+/** Rows per page, as the section's table is configured. */
+const PAGE = 25;
+
+describe('UwtDiagnosticsSectionComponent', () => {
+  let fixture: ComponentFixture<UwtDiagnosticsSectionComponent>;
+  let store: UwtDiagnosticsStore;
+  let monitor: UwtTelemetryMonitor;
+
+  const el = () => fixture.nativeElement as HTMLElement;
+  const shownRows = () =>
+    el().querySelectorAll('td.uwt-diagnostics-section__time').length;
+  const pageReport = () =>
+    el().querySelector('.p-paginator-current')?.textContent?.trim();
+  const ui = () =>
+    fixture.componentInstance as unknown as {
+      first(): number;
+      onPage(state: { first?: number }): void;
+    };
+
+  /** Publishes BI events, every tenth one named `needle`. */
+  function publish(count: number): void {
+    for (let i = 0; i < count; i++) {
+      monitor.publish({
+        kind: 'bi',
+        eventType: 'com.uwt.bi',
+        payload: {
+          eventName: i % 10 === 0 ? 'needle' : `hay-${i}`,
+          eventTime: '2026-01-01T00:00:00.000Z',
+          application: 'app'
+        },
+        destination: 'sink',
+        origin: { forwarded: false }
+      });
+    }
+    jest.advanceTimersByTime(UWT_DIAGNOSTICS_FLUSH_MS);
+    fixture.detectChanges();
+  }
+
+  function goToPage(page: number): void {
+    ui().onPage({ first: (page - 1) * PAGE });
+    fixture.detectChanges();
+  }
+
+  beforeEach(async () => {
+    jest.useFakeTimers();
+    await TestBed.configureTestingModule({
+      imports: [UwtDiagnosticsSectionComponent, NoopAnimationsModule],
+      providers: [UwtDiagnosticsStore, UwtDiagnosticsExporter]
+    }).compileComponents();
+    monitor = TestBed.inject(UwtTelemetryMonitor);
+    store = TestBed.inject(UwtDiagnosticsStore);
+    fixture = TestBed.createComponent(UwtDiagnosticsSectionComponent);
+    fixture.componentRef.setInput('section', 'bi');
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    jest.useRealTimers();
+  });
+
+  describe('paging', () => {
+    it('should show the page the reader chose', () => {
+      publish(100);
+      goToPage(4);
+
+      expect(ui().first()).toBe(75);
+      expect(shownRows()).toBe(PAGE);
+    });
+
+    it('should stay on the page while new events arrive', () => {
+      publish(100);
+      goToPage(2);
+
+      publish(1);
+
+      expect(ui().first()).toBe(PAGE);
+    });
+
+    it('should go back to the first page when a filter leaves fewer rows than the page starts at', () => {
+      publish(100);
+      goToPage(4);
+
+      store.setText('bi', 'needle');
+      fixture.detectChanges();
+
+      expect(ui().first()).toBe(0);
+      expect(shownRows()).toBe(10);
+      expect(pageReport()).toBe('1 - 10 of 10');
+    });
+
+    it('should keep the page when a filter still reaches it', () => {
+      publish(100);
+      goToPage(2);
+
+      store.setText('bi', 'hay');
+      fixture.detectChanges();
+
+      expect(ui().first()).toBe(PAGE);
+      expect(shownRows()).toBe(PAGE);
+    });
+
+    it('should go back to the first page when the section is cleared', () => {
+      publish(100);
+      goToPage(3);
+
+      store.clear();
+      fixture.detectChanges();
+      expect(ui().first()).toBe(0);
+
+      publish(1);
+      expect(shownRows()).toBe(1);
+      expect(pageReport()).toBe('1 - 1 of 1');
+    });
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts
new file mode 100644
index 0000000..100ab73
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts
@@ -0,0 +1,168 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  linkedSignal,
+  signal
+} from '@angular/core';
+import {
+  CpsChipComponent,
+  CpsButtonComponent,
+  CpsExpansionPanelComponent,
+  CpsIconType,
+  CpsTableComponent
+} from 'cps-ui-kit';
+import { UwtDiagnosticsSectionId } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import {
+  UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+  UwtDiagnosticsStore
+} from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UwtDiagnosticsJsonComponent } from '../uwt-diagnostics-json/uwt-diagnostics-json.component';
+import { UwtDiagnosticsFilterBarComponent } from '../uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component';
+import { UwtDiagnosticsExporter } from '../uwt-diagnostics-export/uwt-diagnostics-exporter';
+import {
+  UWT_DIAGNOSTICS_COLUMNS,
+  uwtDiagnosticsRow,
+  uwtDiagnosticsTime
+} from './uwt-diagnostics-columns';
+
+const SECTION_TEXT: Record<
+  UwtDiagnosticsSectionId,
+  { title: string; icon: CpsIconType; empty: string }
+> = {
+  bi: {
+    title: 'BI telemetry',
+    icon: 'graph',
+    empty: 'No BI events since this window opened.'
+  },
+  scenario: {
+    title: 'Scenario telemetry',
+    icon: 'measurement',
+    empty: 'No scenario events since this window opened.'
+  },
+  logging: {
+    title: 'Logging',
+    icon: 'book',
+    empty: 'No log records since this window opened.'
+  }
+};
+
+/**
+ * One section of the popup: an expander holding the section's own filters,
+ * its download and copy actions, and a paginated table of its events.
+ */
+@Component({
+  selector: 'uwt-diagnostics-section',
+  imports: [
+    CpsExpansionPanelComponent,
+    CpsTableComponent,
+    CpsChipComponent,
+    CpsButtonComponent,
+    UwtDiagnosticsJsonComponent,
+    UwtDiagnosticsFilterBarComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './uwt-diagnostics-section.component.html',
+  styleUrl: './uwt-diagnostics-section.component.scss'
+})
+export class UwtDiagnosticsSectionComponent {
+  protected readonly store = inject(UwtDiagnosticsStore);
+  private readonly exporter = inject(UwtDiagnosticsExporter);
+
+  readonly section = input.required<UwtDiagnosticsSectionId>();
+  /** JSON length, in characters, above which a payload is shown truncated. */
+  readonly maxPayloadChars = input(
+    UWT_DEFAULT_DIAGNOSTICS_CONFIG.maxPayloadCharsInView
+  );
+
+  protected readonly copyState = signal<'idle' | 'copied' | 'failed'>('idle');
+
+  protected readonly text = computed(() => SECTION_TEXT[this.section()]);
+  protected readonly columns = computed(
+    () => UWT_DIAGNOSTICS_COLUMNS[this.section()]
+  );
+
+  protected readonly rows = computed(() => {
+    const columns = this.columns();
+    return this.store
+      .filtered()
+      [this.section()].map((entry) => uwtDiagnosticsRow(entry, columns));
+  });
+
+  /**
+   * The paginator's offset. Kept while it still lands on a row; otherwise —
+   * a filter or a clear shrinking the rows past it — back to the first page,
+   * where the newest events are. The table won't do this itself: PrimeNG
+   * steps back one page at most, so page four filtered down to one page
+   * would show an empty table.
+   */
+  protected readonly first = linkedSignal<readonly unknown[], number>({
+    source: this.rows,
+    computation: (rows, previous) =>
+      previous && previous.value < rows.length ? previous.value : 0
+  });
+
+  private readonly captured = computed(
+    () => this.store.entries()[this.section()]
+  );
+
+  /** The expander title — the kit's header takes plain text only. */
+  protected readonly title = computed(() => {
+    const { title } = this.text();
+    const captured = this.captured();
+    if (captured.length === 0) {
+      return `${title} · no events yet`;
+    }
+    const count = this.store.isFiltering(this.section())
+      ? `${this.rows().length} of ${captured.length}`
+      : `${captured.length}`;
+    const last = uwtDiagnosticsTime(captured[0].event.capturedAt).slice(0, 8);
+    const dropped = this.store.dropped()[this.section()];
+    return [
+      title,
+      count,
+      `last ${last}`,
+      dropped ? `oldest ${dropped} dropped` : ''
+    ]
+      .filter(Boolean)
+      .join(' · ');
+  });
+
+  protected readonly emptyMessage = computed(() =>
+    this.captured().length > 0
+      ? 'No events match the filters.'
+      : this.text().empty
+  );
+
+  /** Fresh arrivals that a reader past page one cannot see. */
+  protected readonly unseenNew = computed(() =>
+    this.first() > 0
+      ? this.rows().filter((r) => this.store.fresh().has(r.sequence)).length
+      : 0
+  );
+
+  protected onPage(state: { first?: number }): void {
+    this.first.set(state?.first ?? 0);
+  }
+
+  protected goToNewest(): void {
+    this.first.set(0);
+  }
+
+  protected download(): void {
+    this.exporter.download(this.section());
+  }
+
+  protected async copy(): Promise<void> {
+    this.copyState.set(
+      (await this.exporter.copy(this.section())) ? 'copied' : 'failed'
+    );
+    setTimeout(() => this.copyState.set('idle'), 2000);
+  }
+
+  protected isFresh(sequence: number): boolean {
+    return this.store.fresh().has(sequence);
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts
new file mode 100644
index 0000000..06214d1
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts
@@ -0,0 +1,104 @@
+import {
+  UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+  uwtIsApplePlatform,
+  uwtMatchesShortcut,
+  uwtShortcutLabel
+} from './uwt-diagnostics-shortcut';
+
+type Mods = Partial<
+  Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'repeat'>
+>;
+
+function key(code: string, mods: Mods, keyChar = '8', altGraph = false) {
+  const event = new KeyboardEvent('keydown', { code, key: keyChar, ...mods });
+  Object.defineProperty(event, 'getModifierState', {
+    value: (k: string) => k === 'AltGraph' && altGraph
+  });
+  return event;
+}
+
+const [MAC, WIN] = UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS;
+const macMods = { shiftKey: true, altKey: true, metaKey: true };
+const winMods = { ctrlKey: true, altKey: true, shiftKey: true };
+
+describe('uwtMatchesShortcut', () => {
+  it('should match ⇧⌥⌘8, even though Option and Shift change the character', () => {
+    // On macOS, ⇧⌥8 produces "°" — only the physical key is reliable.
+    expect(uwtMatchesShortcut(key('Digit8', macMods, '°'), MAC)).toBe(true);
+  });
+
+  it('should match Ctrl+Alt+Shift+8', () => {
+    expect(uwtMatchesShortcut(key('Digit8', winMods, '*'), WIN)).toBe(true);
+  });
+
+  it.each([
+    ['a modifier missing', { shiftKey: true, altKey: true }],
+    ['an extra modifier', { ...macMods, ctrlKey: true }],
+    ['no modifiers', {}]
+  ])('should not match with %s', (_label, mods) => {
+    expect(uwtMatchesShortcut(key('Digit8', mods), MAC)).toBe(false);
+  });
+
+  it('should not match the numpad 8', () => {
+    expect(uwtMatchesShortcut(key('Numpad8', macMods), MAC)).toBe(false);
+  });
+
+  it('should ignore a held-down repeat', () => {
+    expect(
+      uwtMatchesShortcut(key('Digit8', { ...winMods, repeat: true }), WIN)
+    ).toBe(false);
+  });
+
+  it('should not fire while AltGr is producing a character', () => {
+    // AltGr reports as Ctrl+Alt on many European Windows layouts.
+    expect(uwtMatchesShortcut(key('Digit8', winMods, '8', true), WIN)).toBe(
+      false
+    );
+  });
+
+  it('should match a custom shortcut', () => {
+    const custom = { code: 'KeyD', ctrl: true, alt: true, shift: true };
+    expect(uwtMatchesShortcut(key('KeyD', winMods, 'D'), custom)).toBe(true);
+    expect(uwtMatchesShortcut(key('Digit8', winMods), custom)).toBe(false);
+  });
+});
+
+describe('uwtShortcutLabel', () => {
+  it('should show the macOS label on Apple platforms, and the other elsewhere', () => {
+    expect(uwtShortcutLabel(UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS, true)).toBe(
+      '⇧⌥⌘8'
+    );
+    expect(uwtShortcutLabel(UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS, false)).toBe(
+      'Ctrl+Alt+Shift+8'
+    );
+  });
+
+  it('should describe a shortcut that has no label', () => {
+    expect(
+      uwtShortcutLabel([{ code: 'KeyD', ctrl: true, shift: true }], false)
+    ).toBe('Ctrl+Shift+D');
+  });
+
+  it('should be undefined with no shortcuts', () => {
+    expect(uwtShortcutLabel([], false)).toBeUndefined();
+  });
+});
+
+describe('uwtIsApplePlatform', () => {
+  it.each([
+    ['MacIntel', true],
+    ['iPad', true],
+    ['Win32', false],
+    ['Linux x86_64', false]
+  ])('should read %s as %s', (platform, expected) => {
+    expect(uwtIsApplePlatform({ platform } as Navigator)).toBe(expected);
+  });
+
+  it('should prefer userAgentData when present', () => {
+    const nav = {
+      platform: 'Win32',
+      userAgentData: { platform: 'macOS' }
+    } as unknown as Navigator;
+    expect(uwtIsApplePlatform(nav)).toBe(true);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts
new file mode 100644
index 0000000..1d38f5e
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts
@@ -0,0 +1,92 @@
+import { UwtDiagnosticsShortcut } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+
+/**
+ * The default shortcuts: ⇧⌥⌘8 on macOS, Ctrl+Alt+Shift+8 on Windows and
+ * Linux.
+ *
+ * Four keys so it is never pressed by accident, ending in a digit because
+ * every layout has one. Both are active everywhere — the other platform's
+ * combination is harmless, and covers external keyboards and remote
+ * desktops. None is bound by Chrome, Safari, Edge or Firefox; ⌥⌘8 alone is
+ * macOS Accessibility Zoom, which is why Shift is part of it.
+ *
+ * @group Utils
+ */
+export const UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS: readonly UwtDiagnosticsShortcut[] =
+  [
+    { code: 'Digit8', shift: true, alt: true, meta: true, label: '⇧⌥⌘8' },
+    {
+      code: 'Digit8',
+      ctrl: true,
+      alt: true,
+      shift: true,
+      label: 'Ctrl+Alt+Shift+8'
+    }
+  ];
+
+/**
+ * Whether `event` is exactly `shortcut`.
+ *
+ * - The physical key is compared (`code`), never the produced character —
+ *   Option turns 8 into `•` on macOS, and Shift turns it into `*`.
+ * - Every modifier must match; one left out must be up.
+ * - Held-down repeats don't count.
+ * - AltGr is rejected. On many European Windows layouts it reports as
+ *   Ctrl+Alt, and typing an AltGr character must never open the popup.
+ */
+export function uwtMatchesShortcut(
+  event: KeyboardEvent,
+  shortcut: UwtDiagnosticsShortcut
+): boolean {
+  if (event.repeat || event.code !== shortcut.code) {
+    return false;
+  }
+  if (event.getModifierState?.('AltGraph')) {
+    return false;
+  }
+  return (
+    event.ctrlKey === !!shortcut.ctrl &&
+    event.altKey === !!shortcut.alt &&
+    event.shiftKey === !!shortcut.shift &&
+    event.metaKey === !!shortcut.meta
+  );
+}
+
+/** Whether the platform is Apple's, for choosing which label to show. */
+export function uwtIsApplePlatform(nav: Navigator | undefined): boolean {
+  if (!nav) {
+    return false;
+  }
+  const platform =
+    (nav as Navigator & { userAgentData?: { platform?: string } }).userAgentData
+      ?.platform ??
+    nav.platform ??
+    '';
+  return /mac|iphone|ipad/i.test(platform);
+}
+
+/**
+ * The shortcut to show people: the one written for this platform when
+ * there is one, otherwise the first configured.
+ */
+export function uwtShortcutLabel(
+  shortcuts: readonly UwtDiagnosticsShortcut[],
+  apple: boolean
+): string | undefined {
+  const preferred = shortcuts.find((s) => !!s.meta === apple);
+  const chosen = preferred ?? shortcuts[0];
+  return chosen ? (chosen.label ?? describeShortcut(chosen)) : undefined;
+}
+
+function describeShortcut(s: UwtDiagnosticsShortcut): string {
+  const key = s.code.replace(/^Digit|^Key/, '');
+  return [
+    s.ctrl && 'Ctrl',
+    s.alt && 'Alt',
+    s.shift && 'Shift',
+    s.meta && 'Meta',
+    key
+  ]
+    .filter(Boolean)
+    .join('+');
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts
new file mode 100644
index 0000000..8978703
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts
@@ -0,0 +1,264 @@
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  UwtTelemetryMonitor,
+  UwtTelemetryPublishInput
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { UWT_TELEMETRY_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import {
+  UWT_DIAGNOSTICS_FLUSH_MS,
+  UwtDiagnosticsStore
+} from './uwt-diagnostics-store';
+
+const bi = (name: string): UwtTelemetryPublishInput => ({
+  kind: 'bi',
+  eventType: 'com.uwt.bi',
+  payload: {
+    eventName: name,
+    eventTime: '2026-01-01T00:00:00.000Z',
+    application: 'app'
+  },
+  destination: 'sink',
+  origin: { forwarded: false }
+});
+
+const log = (message: string): UwtTelemetryPublishInput => ({
+  kind: 'log',
+  payload: {
+    timestamp: '2026-01-01T00:00:00.000Z',
+    level: 'warn',
+    message,
+    logger: 'checkout',
+    application: 'app',
+    environment: 'test',
+    version: '1'
+  },
+  destination: 'log-provider',
+  origin: { forwarded: false }
+});
+
+describe('UwtDiagnosticsStore', () => {
+  let monitor: UwtTelemetryMonitor;
+  let injector: Injector;
+
+  function createStore(max = 500): UwtDiagnosticsStore {
+    injector = Injector.create({
+      providers: [
+        UwtDiagnosticsStore,
+        {
+          provide: UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+          useValue: { maxEventsPerSection: max }
+        }
+      ],
+      parent: TestBed.inject(Injector)
+    });
+    return injector.get(UwtDiagnosticsStore);
+  }
+
+  const flush = () => jest.advanceTimersByTime(UWT_DIAGNOSTICS_FLUSH_MS);
+  const names = (store: UwtDiagnosticsStore) =>
+    store
+      .entries()
+      .bi.map((e) => (e.event.payload as { eventName: string }).eventName);
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    TestBed.resetTestingModule();
+    monitor = TestBed.inject(UwtTelemetryMonitor);
+  });
+
+  function destroy(): void {
+    const target = injector as unknown as {
+      destroy(): void;
+      destroyed: boolean;
+    };
+    if (target && !target.destroyed) {
+      target.destroy();
+    }
+  }
+
+  afterEach(() => {
+    destroy();
+    jest.useRealTimers();
+  });
+
+  it('should start empty, and ignore everything sent before it existed', () => {
+    monitor.publish(bi('before')); // nobody observing yet
+    const store = createStore();
+    flush();
+
+    expect(store.total()).toBe(0);
+  });
+
+  it('should batch arrivals into one update per flush', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    monitor.publish(bi('b'));
+
+    expect(store.total()).toBe(0); // not on screen yet
+    flush();
+    expect(names(store)).toEqual(['b', 'a']); // newest first
+  });
+
+  it('should route each kind to its section', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    monitor.publish(log('careful'));
+    flush();
+
+    expect(store.entries().bi).toHaveLength(1);
+    expect(store.entries().logging).toHaveLength(1);
+    expect(store.entries().scenario).toHaveLength(0);
+  });
+
+  it('should keep at most the configured number per section, counting drops', () => {
+    const store = createStore(2);
+    ['a', 'b', 'c', 'd'].forEach((n) => monitor.publish(bi(n)));
+    monitor.publish(log('kept'));
+    flush();
+
+    expect(names(store)).toEqual(['d', 'c']);
+    expect(store.dropped().bi).toBe(2);
+    // A noisy section never evicts another.
+    expect(store.entries().logging).toHaveLength(1);
+  });
+
+  it('should clear everything and keep capturing', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    flush();
+
+    store.clear();
+    expect(store.total()).toBe(0);
+
+    monitor.publish(bi('after'));
+    flush();
+    expect(names(store)).toEqual(['after']);
+  });
+
+  it('should freeze the view while paused, but keep capturing', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    flush();
+
+    store.setPaused(true);
+    monitor.publish(bi('b'));
+    monitor.publish(bi('c'));
+    flush();
+    expect(names(store)).toEqual(['a']);
+    expect(store.newWhilePaused()).toBe(2);
+    // The section's download still contains them.
+    expect(store.sectionEvents('bi')).toHaveLength(3);
+
+    store.setPaused(false);
+    expect(names(store)).toEqual(['c', 'b', 'a']);
+    expect(store.newWhilePaused()).toBe(0);
+  });
+
+  it('should include not-yet-flushed events in the download without hiding them', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+
+    expect(store.sectionEvents('bi')).toHaveLength(1);
+    expect(store.sectionCount('bi')).toEqual({ captured: 1, droppedOldest: 0 });
+
+    flush();
+    expect(names(store)).toEqual(['a']);
+  });
+
+  it("should export only a section's own events, oldest first", () => {
+    const store = createStore();
+    monitor.publish(bi('first'));
+    monitor.publish(log('a log line'));
+    monitor.publish(bi('second'));
+    flush();
+
+    const events = store.sectionEvents('bi');
+    expect(events.map((e) => e.kind)).toEqual(['bi', 'bi']);
+    expect(events[0].sequence).toBeLessThan(events[1].sequence);
+    expect(store.sectionEvents('logging')).toHaveLength(1);
+    expect(store.sectionEvents('scenario')).toHaveLength(0);
+  });
+
+  it('should filter each section on its own, ignoring case', () => {
+    const store = createStore();
+    monitor.publish(bi('theme_changed'));
+    monitor.publish(bi('sidebar_toggled'));
+    monitor.publish(log('Careful now'));
+    flush();
+
+    store.setText('bi', 'THEME');
+    expect(store.filtered().bi).toHaveLength(1);
+    // Other sections are untouched by BI's filter.
+    expect(store.filtered().logging).toHaveLength(1);
+    expect(store.isFiltering('bi')).toBe(true);
+    expect(store.isFiltering('logging')).toBe(false);
+
+    store.addFilter('logging', {
+      path: 'level',
+      operator: 'equals',
+      value: 'error'
+    });
+    expect(store.filtered().logging).toHaveLength(0);
+    expect(store.filtered().bi).toHaveLength(1);
+
+    store.removeFilter('logging', store.filters().logging.fields[0].id);
+    expect(store.filtered().logging).toHaveLength(1);
+
+    store.clearFilters('bi');
+    expect(store.filtered().bi).toHaveLength(2);
+  });
+
+  it('should suggest filter fields from each section separately', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    monitor.publish(log('b'));
+    flush();
+
+    expect(store.knownPaths().logging).toContain('level');
+    expect(store.knownPaths().bi).not.toContain('level');
+    expect(store.knownPaths().bi).toContain('eventName');
+  });
+
+  it('should mark the latest arrivals as new, briefly', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    flush();
+
+    const [entry] = store.entries().bi;
+    expect(store.fresh().has(entry.event.sequence)).toBe(true);
+    jest.advanceTimersByTime(3000);
+    expect(store.fresh().size).toBe(0);
+  });
+
+  it('should keep going after an event it cannot prepare', () => {
+    const store = createStore();
+    const payload: Record<string, unknown> = { eventName: 'x' };
+    Object.defineProperty(payload, 'boom', {
+      enumerable: true,
+      get: () => {
+        throw new Error('bad getter');
+      }
+    });
+    // Delivered as-is, bypassing the monitor's copy, to simulate a bad payload.
+    (store as unknown as { receive(e: unknown): void }).receive({
+      ...bi('x'),
+      payload,
+      sequence: 99,
+      capturedAt: ''
+    });
+    monitor.publish(bi('fine'));
+    flush();
+
+    expect(store.entries().bi).toHaveLength(2);
+    expect(store.entries().bi[1].renderError).toBe('bad getter');
+  });
+
+  it('should stop observing when destroyed', () => {
+    createStore();
+    expect(monitor.observed).toBe(true);
+
+    destroy();
+    expect(monitor.observed).toBe(false);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts
new file mode 100644
index 0000000..84d6442
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts
@@ -0,0 +1,337 @@
+import {
+  computed,
+  DestroyRef,
+  inject,
+  Injectable,
+  signal
+} from '@angular/core';
+import {
+  UwtTelemetryMonitor,
+  UwtTelemetryObservedEvent
+} from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+  UwtDiagnosticsEntry,
+  UwtDiagnosticsFieldFilter,
+  UwtDiagnosticsFilterState,
+  UwtDiagnosticsSectionId,
+  UwtTelemetryDiagnosticsConfig
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import {
+  uwtDiagnosticsSectionOf,
+  uwtFlattenEvent,
+  uwtKnownPaths,
+  uwtMatchesFilters
+} from '../uwt-diagnostics-filter/uwt-diagnostics-filter';
+import { uwtSafeStringify } from '../uwt-diagnostics-export/uwt-diagnostics-export';
+
+/** Library defaults, applied under whatever the application configures. */
+export const UWT_DEFAULT_DIAGNOSTICS_CONFIG: Omit<
+  UwtTelemetryDiagnosticsConfig,
+  'shortcuts'
+> = {
+  enabled: true,
+  maxEventsPerSection: 500,
+  maxPayloadCharsInView: 256 * 1024
+};
+
+/** How often arriving events reach the screen, in milliseconds. */
+export const UWT_DIAGNOSTICS_FLUSH_MS = 250;
+/** How long a row counts as new, in milliseconds. */
+const FRESH_MS = 3000;
+
+export const UWT_DIAGNOSTICS_SECTIONS: readonly UwtDiagnosticsSectionId[] = [
+  'bi',
+  'scenario',
+  'logging'
+];
+
+type PerSection<T> = Record<UwtDiagnosticsSectionId, T>;
+
+function perSection<T>(make: () => T): PerSection<T> {
+  return { bi: make(), scenario: make(), logging: make() };
+}
+
+/**
+ * The popup's captured history. Provided by the popup itself, so it exists
+ * exactly as long as the popup is open: created empty on open, subscribed
+ * to {@link UwtTelemetryMonitor} for its lifetime, and discarded on close.
+ *
+ * Events arrive whenever the application sends them; they are batched and
+ * reach the screen at most every {@link UWT_DIAGNOSTICS_FLUSH_MS}, so a
+ * burst causes one re-render rather than hundreds. Each section keeps at
+ * most `maxEventsPerSection`, newest first, and counts what it dropped.
+ */
+@Injectable()
+export class UwtDiagnosticsStore {
+  private readonly monitor = inject(UwtTelemetryMonitor);
+  private readonly config: UwtTelemetryDiagnosticsConfig = {
+    ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+    shortcuts: [],
+    ...inject(UWT_TELEMETRY_DIAGNOSTICS_CONFIG, { optional: true })
+  };
+
+  /** Newest first. Written on every flush, paused or not. */
+  private readonly buffers = perSection<UwtDiagnosticsEntry[]>(() => []);
+  private readonly droppedCount = perSection(() => 0);
+  private pending: UwtDiagnosticsEntry[] = [];
+  private flushTimer?: ReturnType<typeof setTimeout>;
+  private freshTimer?: ReturnType<typeof setTimeout>;
+
+  /** When capturing began: the popup opening, or the last clear. */
+  readonly startedAt = signal(new Date().toISOString());
+
+  /** What the popup shows: the buffers as of the last unpaused flush. */
+  readonly entries = signal<PerSection<readonly UwtDiagnosticsEntry[]>>(
+    perSection(() => [])
+  );
+
+  readonly dropped = signal<PerSection<number>>(perSection(() => 0));
+
+  /** Freezes what is shown. Capturing carries on underneath. */
+  readonly paused = signal(false);
+  /** Events captured while paused and not yet shown. */
+  readonly newWhilePaused = signal(0);
+
+  /**
+   * Events received per section since opening or the last clear — keeps
+   * rising after the retention cap, unlike the section lengths.
+   */
+  readonly received = signal<PerSection<number>>(perSection(() => 0));
+
+  /** Sequence numbers from the latest flush, for a "new" marker. */
+  readonly fresh = signal<ReadonlySet<number>>(new Set());
+
+  /** Each section's own search text and field filters. */
+  readonly filters = signal<PerSection<UwtDiagnosticsFilterState>>(
+    perSection(emptyFilters)
+  );
+
+  /** Entries matching each section's own filters. */
+  readonly filtered = computed<PerSection<readonly UwtDiagnosticsEntry[]>>(
+    () => {
+      const entries = this.entries();
+      const filters = this.filters();
+      return perSectionFrom((id) =>
+        isFiltering(filters[id])
+          ? entries[id].filter((e) => uwtMatchesFilters(e.fields, filters[id]))
+          : entries[id]
+      );
+    }
+  );
+
+  /** Field paths seen so far in each section, for filter suggestions. */
+  readonly knownPaths = computed<PerSection<string[]>>(() => {
+    const entries = this.entries();
+    return perSectionFrom((id) =>
+      uwtKnownPaths(entries[id].map((e) => e.fields))
+    );
+  });
+
+  readonly total = computed(() => {
+    const entries = this.entries();
+    return UWT_DIAGNOSTICS_SECTIONS.reduce(
+      (n, id) => n + entries[id].length,
+      0
+    );
+  });
+
+  constructor() {
+    const subscription = this.monitor.events$.subscribe((event) =>
+      this.receive(event)
+    );
+    inject(DestroyRef).onDestroy(() => {
+      subscription.unsubscribe();
+      clearTimeout(this.flushTimer);
+      clearTimeout(this.freshTimer);
+    });
+  }
+
+  /** Empties every section. Capturing continues. */
+  clear(): void {
+    for (const id of UWT_DIAGNOSTICS_SECTIONS) {
+      this.buffers[id] = [];
+      this.droppedCount[id] = 0;
+    }
+    this.pending = [];
+    this.startedAt.set(new Date().toISOString());
+    this.newWhilePaused.set(0);
+    this.received.set(perSection(() => 0));
+    this.publish();
+  }
+
+  setPaused(paused: boolean): void {
+    this.paused.set(paused);
+    if (!paused) {
+      this.newWhilePaused.set(0);
+      this.publish();
+    }
+  }
+
+  setText(section: UwtDiagnosticsSectionId, text: string): void {
+    this.updateFilters(section, (f) => ({ ...f, text }));
+  }
+
+  addFilter(
+    section: UwtDiagnosticsSectionId,
+    filter: Omit<UwtDiagnosticsFieldFilter, 'id'>
+  ): void {
+    this.updateFilters(section, (f) => ({
+      ...f,
+      fields: [...f.fields, { ...filter, id: newId() }]
+    }));
+  }
+
+  removeFilter(section: UwtDiagnosticsSectionId, id: string): void {
+    this.updateFilters(section, (f) => ({
+      ...f,
+      fields: f.fields.filter((x) => x.id !== id)
+    }));
+  }
+
+  clearFilters(section: UwtDiagnosticsSectionId): void {
+    this.updateFilters(section, emptyFilters);
+  }
+
+  /** Whether a section has any filter or search text active. */
+  isFiltering(section: UwtDiagnosticsSectionId): boolean {
+    return isFiltering(this.filters()[section]);
+  }
+
+  /**
+   * Every event captured in one section: what is shown, plus anything held
+   * back while paused or still waiting for the next flush. Oldest first.
+   */
+  sectionEvents(section: UwtDiagnosticsSectionId): UwtTelemetryObservedEvent[] {
+    return [
+      ...this.buffers[section].map((e) => e.event),
+      ...this.pending.filter((e) => e.section === section).map((e) => e.event)
+    ].sort((a, b) => a.sequence - b.sequence);
+  }
+
+  /** One section's totals for its export, counted like {@link sectionEvents}. */
+  sectionCount(section: UwtDiagnosticsSectionId): {
+    captured: number;
+    droppedOldest: number;
+  } {
+    return {
+      captured:
+        this.buffers[section].length +
+        this.pending.filter((e) => e.section === section).length,
+      droppedOldest: this.droppedCount[section]
+    };
+  }
+
+  private updateFilters(
+    section: UwtDiagnosticsSectionId,
+    change: (f: UwtDiagnosticsFilterState) => UwtDiagnosticsFilterState
+  ): void {
+    this.filters.update((all) => ({ ...all, [section]: change(all[section]) }));
+  }
+
+  /**
+   * Called for every observed event. Never throws: an error here would
+   * surface asynchronously in the application, since RxJS reports
+   * subscriber errors on its own.
+   */
+  private receive(event: UwtTelemetryObservedEvent): void {
+    try {
+      this.pending.push(this.prepare(event));
+      this.flushTimer ??= setTimeout(
+        () => this.flush(),
+        UWT_DIAGNOSTICS_FLUSH_MS
+      );
+    } catch {
+      // Nothing to show for this one; later events are unaffected.
+    }
+  }
+
+  private prepare(event: UwtTelemetryObservedEvent): UwtDiagnosticsEntry {
+    const section = uwtDiagnosticsSectionOf(event.kind);
+    try {
+      return {
+        event,
+        section,
+        fields: uwtFlattenEvent(event),
+        sizeChars: uwtSafeStringify(event.payload).length
+      };
+    } catch (error) {
+      return {
+        event,
+        section,
+        fields: [],
+        sizeChars: 0,
+        renderError: error instanceof Error ? error.message : String(error)
+      };
+    }
+  }
+
+  private flush(): void {
+    this.flushTimer = undefined;
+    const arrived = this.drain();
+    if (arrived.length === 0) {
+      return;
+    }
+    this.received.update((counts) => {
+      const next = { ...counts };
+      for (const entry of arrived) {
+        next[entry.section]++;
+      }
+      return next;
+    });
+    if (this.paused()) {
+      this.newWhilePaused.update((n) => n + arrived.length);
+      return;
+    }
+    this.publish(arrived);
+  }
+
+  /** Moves pending events into the buffers. Returns what moved. */
+  private drain(): UwtDiagnosticsEntry[] {
+    const arrived = this.pending;
+    this.pending = [];
+    const max = Math.max(1, this.config.maxEventsPerSection);
+    for (const entry of arrived) {
+      const buffer = this.buffers[entry.section];
+      buffer.unshift(entry);
+      if (buffer.length > max) {
+        this.droppedCount[entry.section] += buffer.length - max;
+        buffer.length = max;
+      }
+    }
+    return arrived;
+  }
+
+  private publish(arrived: readonly UwtDiagnosticsEntry[] = []): void {
+    this.entries.set(perSectionFrom((id) => [...this.buffers[id]]));
+    this.dropped.set({ ...this.droppedCount });
+    this.fresh.set(new Set(arrived.map((e) => e.event.sequence)));
+    clearTimeout(this.freshTimer);
+    if (arrived.length) {
+      this.freshTimer = setTimeout(() => this.fresh.set(new Set()), FRESH_MS);
+    }
+  }
+}
+
+function perSectionFrom<T>(
+  make: (id: UwtDiagnosticsSectionId) => T
+): PerSection<T> {
+  return {
+    bi: make('bi'),
+    scenario: make('scenario'),
+    logging: make('logging')
+  };
+}
+
+function emptyFilters(): UwtDiagnosticsFilterState {
+  return { text: '', fields: [] };
+}
+
+function isFiltering(filters: UwtDiagnosticsFilterState): boolean {
+  return !!filters.text.trim() || filters.fields.length > 0;
+}
+
+let idCounter = 0;
+function newId(): string {
+  return `f${++idCounter}`;
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
new file mode 100644
index 0000000..6b65d65
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
@@ -0,0 +1,141 @@
+import { InjectionToken } from '@angular/core';
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+
+/**
+ * The three sections of the diagnostics popup.
+ *
+ * @group Types
+ */
+export type UwtDiagnosticsSectionId = 'bi' | 'scenario' | 'logging';
+
+/**
+ * A key combination that opens the diagnostics popup.
+ *
+ * Matched on `KeyboardEvent.code` — the physical key — so it works on every
+ * keyboard layout, and isn't affected by what Option or Shift produce.
+ * A modifier left out must be *up*, so extra modifiers never match.
+ *
+ * @group Interfaces
+ */
+export interface UwtDiagnosticsShortcut {
+  /** `KeyboardEvent.code`, e.g. `'Digit8'` or `'KeyD'`. */
+  code: string;
+  ctrl?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  meta?: boolean;
+
+  /** How the shortcut is written for people, e.g. `'⇧⌥⌘8'`. */
+  label?: string;
+}
+
+/**
+ * Configuration for {@link provideUwtTelemetryDiagnostics}.
+ *
+ * @group Interfaces
+ */
+export interface UwtTelemetryDiagnosticsConfig {
+  /**
+   * Whether the popup can be opened at all. A function is read once, at
+   * startup — use it to limit access to, say, support staff.
+   */
+  enabled: boolean | (() => boolean);
+
+  /**
+   * Shortcuts that open the popup. An empty array disables the keyboard,
+   * leaving {@link UwtTelemetryDiagnosticsService.open} as the only way in.
+   */
+  shortcuts: readonly UwtDiagnosticsShortcut[];
+
+  /** Events kept per section; the oldest are dropped beyond this. */
+  maxEventsPerSection: number;
+
+  /**
+   * Payloads whose JSON is longer than this many characters are shown
+   * truncated. The download always contains them in full.
+   *
+   * Characters (UTF-16 code units, JavaScript's `length`), not bytes: the
+   * limit protects rendering, which costs by the length of the text.
+   */
+  maxPayloadCharsInView: number;
+}
+
+/** @group Tokens */
+export const UWT_TELEMETRY_DIAGNOSTICS_CONFIG =
+  new InjectionToken<UwtTelemetryDiagnosticsConfig>(
+    'UWT_TELEMETRY_DIAGNOSTICS_CONFIG'
+  );
+
+/** A flattened leaf of an event, used for filtering. */
+export interface UwtDiagnosticsField {
+  /** Exact path, e.g. `steps[2].name`. */
+  path: string;
+
+  /** Path with array indexes removed, e.g. `steps[].name`. */
+  pattern: string;
+
+  /** The value as text. */
+  value: string;
+}
+
+/** One captured event, prepared once for display and filtering. */
+export interface UwtDiagnosticsEntry {
+  event: UwtTelemetryObservedEvent;
+  section: UwtDiagnosticsSectionId;
+  fields: readonly UwtDiagnosticsField[];
+  /** Length of the payload's JSON, in characters (UTF-16 code units). */
+  sizeChars: number;
+  /** Set when the event could not be prepared for display. */
+  renderError?: string;
+}
+
+/**
+ * How a field filter compares.
+ *
+ * @group Types
+ */
+export type UwtDiagnosticsFilterOperator =
+  'contains' | 'equals' | 'not-contains' | 'exists' | 'missing';
+
+/** @group Interfaces */
+export interface UwtDiagnosticsFieldFilter {
+  id: string;
+  path: string;
+  operator: UwtDiagnosticsFilterOperator;
+  value: string;
+}
+
+/** @group Interfaces */
+export interface UwtDiagnosticsFilterState {
+  /** Free text, matched against every value and path. */
+  text: string;
+  fields: readonly UwtDiagnosticsFieldFilter[];
+}
+
+/**
+ * A downloaded JSON file: one section's captured events.
+ *
+ * `events` holds every event captured in that section, oldest first,
+ * regardless of the filters on screen. `activeFilters` records that
+ * section's filters, for context; they were not applied to `events`.
+ *
+ * @group Interfaces
+ */
+export interface UwtDiagnosticsExport {
+  format: 'ngx-ui-watchtower-diagnostics';
+  formatVersion: 1;
+  section: UwtDiagnosticsSectionId;
+  exportedAt: string;
+  capture: { startedAt: string; endedAt: string; paused: boolean };
+  app: {
+    application: string;
+    environment: string;
+    version: string;
+    eventNamespace: string;
+  };
+  session: { sessionId?: string; userId?: string };
+  userAgent: string;
+  activeFilters: UwtDiagnosticsFilterState;
+  count: { captured: number; droppedOldest: number };
+  events: UwtTelemetryObservedEvent[];
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts
new file mode 100644
index 0000000..0dc0ad3
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts
@@ -0,0 +1,60 @@
+import {
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  provideAppInitializer
+} from '@angular/core';
+import {
+  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+  UwtTelemetryDiagnosticsConfig
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS } from '../uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
+import { UwtTelemetryDiagnosticsService } from '../uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service';
+
+/**
+ * Adds the telemetry diagnostics popup: an in-app window showing, live,
+ * every BI, scenario and log event this app hands to its destinations.
+ *
+ * Opens with ⇧⌥⌘8 (macOS) or Ctrl+Alt+Shift+8 (Windows, Linux) by
+ * default, in every environment. Needs cps-ui-kit set up in the app, as
+ * for any cps-ui-kit dialog.
+ *
+ * @example
+ * ```typescript
+ * import { provideUwtTelemetryDiagnostics } from '@absaoss-cps/ngx-ui-watchtower/diagnostics';
+ *
+ * providers: [
+ *   provideUwtTelemetry({ application: 'my-app', environment, version }),
+ *   provideUwtTelemetryDiagnostics()
+ * ]
+ *
+ * // Or a different key, or access limited to some users:
+ * provideUwtTelemetryDiagnostics({
+ *   shortcuts: [{ code: 'KeyD', ctrl: true, alt: true, shift: true }],
+ *   enabled: () => inject(AuthService).isSupportStaff()
+ * })
+ * ```
+ *
+ * @param config overrides merged over the defaults
+ * @returns providers for the popup and its shortcut
+ *
+ * @group Utils
+ */
+export function provideUwtTelemetryDiagnostics(
+  config: Partial<UwtTelemetryDiagnosticsConfig> = {}
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+      useValue: {
+        ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+        shortcuts: UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+        ...config
+      }
+    },
+    provideAppInitializer(() => {
+      inject(UwtTelemetryDiagnosticsService).install();
+    })
+  ]);
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts
new file mode 100644
index 0000000..d2c795f
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts
@@ -0,0 +1,194 @@
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Subject } from 'rxjs';
+import { CpsDialogService } from 'cps-ui-kit';
+import {
+  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+  UwtTelemetryDiagnosticsConfig
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UwtDiagnosticsDialogComponent } from '../uwt-diagnostics-dialog/uwt-diagnostics-dialog.component';
+import { UwtTelemetryDiagnosticsService } from './uwt-telemetry-diagnostics.service';
+
+/** Stands in for CpsDialogService, recording what was opened. */
+class FakeDialogs {
+  readonly opened: { component: unknown; config: Record<string, unknown> }[] =
+    [];
+
+  readonly destroyed = new Subject<void>();
+  containsFocus = false;
+  readonly instance = {
+    containsFocus: () => this.containsFocus,
+    focusSearch: jest.fn()
+  };
+
+  readonly close = jest.fn(() => this.destroyed.next());
+
+  open(component: unknown, config: Record<string, unknown>) {
+    this.opened.push({ component, config });
+    return {
+      componentInstance: this.instance,
+      onDestroy: this.destroyed.asObservable(),
+      close: this.close
+    };
+  }
+}
+
+const SHORTCUT = {
+  code: 'Digit8',
+  ctrlKey: true,
+  altKey: true,
+  shiftKey: true
+};
+
+type KeyInit = ConstructorParameters<typeof KeyboardEvent>[1];
+
+function press(init: KeyInit = SHORTCUT): KeyboardEvent {
+  const event = new KeyboardEvent('keydown', {
+    ...init,
+    bubbles: true,
+    cancelable: true
+  });
+  document.body.dispatchEvent(event);
+  return event;
+}
+
+describe('UwtTelemetryDiagnosticsService', () => {
+  let dialogs: FakeDialogs;
+
+  function create(
+    config: Partial<UwtTelemetryDiagnosticsConfig> = {},
+    platform = 'browser'
+  ): UwtTelemetryDiagnosticsService {
+    TestBed.resetTestingModule();
+    dialogs = new FakeDialogs();
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: CpsDialogService, useValue: dialogs },
+        { provide: PLATFORM_ID, useValue: platform },
+        { provide: UWT_TELEMETRY_DIAGNOSTICS_CONFIG, useValue: config }
+      ]
+    });
+    return TestBed.inject(UwtTelemetryDiagnosticsService);
+  }
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+    jest.restoreAllMocks();
+  });
+
+  it('should open the popup, non-modal and named, on the default shortcut', () => {
+    create().install();
+
+    const event = press();
+
+    expect(dialogs.opened).toHaveLength(1);
+    expect(dialogs.opened[0].component).toBe(UwtDiagnosticsDialogComponent);
+    expect(dialogs.opened[0].config).toMatchObject({
+      modal: false,
+      ariaLabel: 'Telemetry diagnostics',
+      closeOnEscape: true
+    });
+    expect(event.defaultPrevented).toBe(true);
+    expect(TestBed.inject(UwtTelemetryDiagnosticsService).isOpen()).toBe(true);
+  });
+
+  it('should also open on the macOS shortcut', () => {
+    create().install();
+    press({ code: 'Digit8', metaKey: true, altKey: true, shiftKey: true });
+    expect(dialogs.opened).toHaveLength(1);
+  });
+
+  it('should ignore ordinary typing and near misses', () => {
+    create().install();
+
+    press({ code: 'Digit8' });
+    press({ code: 'Digit8', ctrlKey: true, shiftKey: true });
+    press({ code: 'KeyD', ctrlKey: true, altKey: true, shiftKey: true });
+
+    expect(dialogs.opened).toHaveLength(0);
+  });
+
+  it('should bring focus back to an open popup, and close it from inside', () => {
+    create().install();
+    press();
+
+    dialogs.containsFocus = false;
+    press();
+    expect(dialogs.instance.focusSearch).toHaveBeenCalledTimes(1);
+    expect(dialogs.close).not.toHaveBeenCalled();
+
+    dialogs.containsFocus = true;
+    press();
+    expect(dialogs.close).toHaveBeenCalledTimes(1);
+    expect(TestBed.inject(UwtTelemetryDiagnosticsService).isOpen()).toBe(false);
+  });
+
+  it('should open fresh after the previous popup was destroyed', () => {
+    create().install();
+    press();
+    dialogs.destroyed.next();
+
+    press();
+    expect(dialogs.opened).toHaveLength(2);
+  });
+
+  it('should use custom shortcuts instead of the defaults', () => {
+    create({
+      shortcuts: [{ code: 'KeyD', ctrl: true, alt: true, shift: true }]
+    }).install();
+
+    press();
+    expect(dialogs.opened).toHaveLength(0);
+    press({ code: 'KeyD', ctrlKey: true, altKey: true, shiftKey: true });
+    expect(dialogs.opened).toHaveLength(1);
+  });
+
+  it('should not listen with no shortcuts, but still open on request', () => {
+    const service = create({ shortcuts: [] });
+    service.install();
+
+    press();
+    expect(dialogs.opened).toHaveLength(0);
+
+    service.open();
+    expect(dialogs.opened).toHaveLength(1);
+  });
+
+  it.each([
+    ['disabled', { enabled: false }],
+    ['disabled by a function', { enabled: () => false }]
+  ])('should do nothing when %s', (_label, config) => {
+    const service = create(config);
+    service.install();
+
+    press();
+    service.open();
+    expect(dialogs.opened).toHaveLength(0);
+  });
+
+  it('should treat a throwing enabled() as disabled', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const service = create({
+      enabled: () => {
+        throw new Error('auth not ready');
+      }
+    });
+    service.install();
+    service.open();
+    expect(dialogs.opened).toHaveLength(0);
+  });
+
+  it('should not listen during a server-side render', () => {
+    create({}, 'server').install();
+    press();
+    expect(dialogs.opened).toHaveLength(0);
+  });
+
+  it('should stop listening when the application is destroyed', () => {
+    create().install();
+    TestBed.resetTestingModule();
+
+    press();
+    expect(dialogs.opened).toHaveLength(0);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
new file mode 100644
index 0000000..343ad9f
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
@@ -0,0 +1,167 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import {
+  DestroyRef,
+  inject,
+  Injectable,
+  NgZone,
+  PLATFORM_ID,
+  signal
+} from '@angular/core';
+import { CpsDialogRef, CpsDialogService } from 'cps-ui-kit';
+import {
+  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+  UwtTelemetryDiagnosticsConfig
+} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import {
+  UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+  uwtMatchesShortcut
+} from '../uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
+import { UwtDiagnosticsDialogComponent } from '../uwt-diagnostics-dialog/uwt-diagnostics-dialog.component';
+import {
+  uwtSafe,
+  uwtSafeVoid
+} from '../uwt-diagnostics-internal.util/uwt-diagnostics-internal.util';
+
+/**
+ * Opens and closes the telemetry diagnostics popup, and listens for its
+ * keyboard shortcut once {@link provideUwtTelemetryDiagnostics} installs it.
+ *
+ * The popup is non-modal: the application stays usable while events
+ * arrive. With the popup open, the shortcut returns focus to it from the
+ * application, and closes it when focus is already inside.
+ *
+ * @example
+ * ```typescript
+ * // From an app's own "Support" menu, when the shortcut is disabled:
+ * inject(UwtTelemetryDiagnosticsService).open();
+ * ```
+ *
+ * @group Services
+ */
+@Injectable({ providedIn: 'root' })
+export class UwtTelemetryDiagnosticsService {
+  private readonly dialogs = inject(CpsDialogService);
+  private readonly document = inject(DOCUMENT);
+  private readonly zone = inject(NgZone);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly config: UwtTelemetryDiagnosticsConfig = {
+    ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+    shortcuts: UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+    ...inject(UWT_TELEMETRY_DIAGNOSTICS_CONFIG, { optional: true })
+  };
+
+  private readonly enabled = uwtSafe(
+    'enabled',
+    () =>
+      typeof this.config.enabled === 'function'
+        ? this.config.enabled()
+        : this.config.enabled,
+    false
+  );
+
+  private ref?: CpsDialogRef<UwtDiagnosticsDialogComponent>;
+  private installed = false;
+
+  /** Whether the popup is currently open. */
+  readonly isOpen = signal(false);
+
+  /**
+   * Starts listening for the shortcut. Called by
+   * {@link provideUwtTelemetryDiagnostics}; does nothing on the server,
+   * when disabled, with no shortcuts, or when already listening.
+   */
+  install(): void {
+    if (
+      this.installed ||
+      !this.isBrowser ||
+      !this.enabled ||
+      this.config.shortcuts.length === 0
+    ) {
+      return;
+    }
+    this.installed = true;
+
+    const listener = (event: KeyboardEvent) =>
+      uwtSafeVoid('shortcut', () => {
+        if (!this.config.shortcuts.some((s) => uwtMatchesShortcut(event, s))) {
+          return;
+        }
+        event.preventDefault();
+        this.zone.run(() => this.onShortcut());
+      });
+
+    // Capture phase, so it works even where a component stops propagation.
+    // Outside Angular's zone, so ordinary typing triggers no change detection.
+    this.zone.runOutsideAngular(() =>
+      this.document.addEventListener('keydown', listener, true)
+    );
+    this.destroyRef.onDestroy(() => {
+      this.document.removeEventListener('keydown', listener, true);
+      this.close();
+    });
+  }
+
+  /** Opens the popup, or moves focus into it when already open. */
+  open(): void {
+    if (!this.enabled || !this.isBrowser) {
+      return;
+    }
+    if (this.ref) {
+      this.ref.componentInstance?.focusSearch();
+      return;
+    }
+    uwtSafeVoid('open', () => {
+      const ref: CpsDialogRef<UwtDiagnosticsDialogComponent> =
+        this.dialogs.open(UwtDiagnosticsDialogComponent, {
+          headerTitle: 'Telemetry diagnostics',
+          ariaLabel: 'Telemetry diagnostics',
+          modal: false,
+          draggable: true,
+          resizable: true,
+          maximizable: true,
+          closeOnEscape: true,
+          // Docked right at half the screen, so the application stays
+          // visible and clickable beside it; resizable, and maximizable
+          // for a closer look.
+          position: 'right',
+          width: 'min(64rem, 50vw)',
+          height: '88vh',
+          minWidth: 'min(22rem, 96vw)',
+          autoFocus: '.uwt-diagnostics-search input'
+        });
+      this.ref = ref;
+      this.isOpen.set(true);
+      ref.onDestroy.subscribe(() => {
+        if (this.ref === ref) {
+          this.ref = undefined;
+          this.isOpen.set(false);
+        }
+      });
+    });
+  }
+
+  /** Closes the popup, discarding what it captured. */
+  close(): void {
+    uwtSafeVoid('close', () => this.ref?.close());
+  }
+
+  /**
+   * What the shortcut does: open when closed; with the popup open, close
+   * it if focus is inside, otherwise bring focus back to it.
+   */
+  toggle(): void {
+    if (!this.ref) {
+      this.open();
+    } else if (this.ref.componentInstance?.containsFocus()) {
+      this.close();
+    } else {
+      this.ref.componentInstance?.focusSearch();
+    }
+  }
+
+  private onShortcut(): void {
+    this.toggle();
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts b/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts
new file mode 100644
index 0000000..ac293ba
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts
@@ -0,0 +1,21 @@
+/*
+ * Public API Surface of ngx-ui-watchtower/diagnostics
+ *
+ * An in-app popup showing, live, every event this app hands to its
+ * telemetry destinations. Needs cps-ui-kit.
+ */
+
+export {
+  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+  UwtDiagnosticsExport,
+  UwtDiagnosticsFieldFilter,
+  UwtDiagnosticsFilterOperator,
+  UwtDiagnosticsFilterState,
+  UwtDiagnosticsSectionId,
+  UwtDiagnosticsShortcut,
+  UwtTelemetryDiagnosticsConfig
+} from './lib/uwt-diagnostics.models/uwt-diagnostics.models';
+export { UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS } from './lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
+export { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from './lib/uwt-diagnostics-store/uwt-diagnostics-store';
+export { provideUwtTelemetryDiagnostics } from './lib/uwt-diagnostics.providers/uwt-diagnostics.providers';
+export { UwtTelemetryDiagnosticsService } from './lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service';
diff --git a/projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json b/projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json
new file mode 100644
index 0000000..04a9759
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json
@@ -0,0 +1,25 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib-diagnostics",
+    "rootDir": "../../..",
+    "lib": ["ES2022", "DOM"],
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "skipLibCheck": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}
diff --git a/projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json b/projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json
new file mode 100644
index 0000000..a78ee90
--- /dev/null
+++ b/projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json
@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec-diagnostics",
+    "rootDir": "../../..",
+    "types": ["jest"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}
diff --git a/projects/ngx-ui-watchtower/package.json b/projects/ngx-ui-watchtower/package.json
index bf8fa70..15de4cd 100644
--- a/projects/ngx-ui-watchtower/package.json
+++ b/projects/ngx-ui-watchtower/package.json
@@ -5,12 +5,24 @@
   "peerDependencies": {
     "@angular/common": "^22.1.3",
     "@angular/core": "^22.1.3",
+    "@angular/animations": "^22.1.3",
+    "@angular/forms": "^22.1.3",
     "aws-rum-web": "^3.2.1",
+    "cps-ui-kit": "^22.0.0",
     "rxjs": "^7.8.2"
   },
   "peerDependenciesMeta": {
+    "@angular/animations": {
+      "optional": true
+    },
+    "@angular/forms": {
+      "optional": true
+    },
     "aws-rum-web": {
       "optional": true
+    },
+    "cps-ui-kit": {
+      "optional": true
     }
   },
   "repository": {
diff --git a/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts b/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts
new file mode 100644
index 0000000..c04100f
--- /dev/null
+++ b/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts
@@ -0,0 +1,125 @@
+import { UwtBIEvent } from '../uwt-bi.models/uwt-bi.models';
+import { UwtLogRecord } from '../uwt-log.models/uwt-log.models';
+import {
+  UwtScenarioRecord,
+  UwtScenarioStepEvent
+} from '../uwt-scenario.models/uwt-scenario.models';
+import { UwtTelemetryError } from '../uwt-telemetry-common.models/uwt-telemetry-common.models';
+
+/**
+ * Any JSON value — used where a payload's shape is not guaranteed, such as
+ * an event forwarded from another realm.
+ *
+ * @group Types
+ */
+export type UwtJsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | UwtJsonValue[]
+  | { [key: string]: UwtJsonValue };
+
+/**
+ * A JSON object — see {@link UwtJsonValue}.
+ *
+ * @group Types
+ */
+export type UwtJsonObject = { [key: string]: UwtJsonValue };
+
+/**
+ * Where an observed event was handed: the telemetry sink, or the
+ * application's log API provider.
+ *
+ * @group Types
+ */
+export type UwtTelemetryDestination = 'sink' | 'log-provider';
+
+/**
+ * Whether an observed event was produced in this realm, or forwarded from
+ * another realm through {@link UwtTelemetryBroadcastHost}.
+ *
+ * @group Types
+ */
+export type UwtTelemetryEventOrigin =
+  { forwarded: false } | { forwarded: true; application?: string };
+
+/**
+ * What an observed event is.
+ *
+ * - `bi`, `scenario`, `scenario-step` — custom events sent to the sink.
+ * - `log` — a record sent to the log API provider.
+ * - `error` — an error sent to the sink, e.g. a log error mirrored to RUM.
+ * - `unknown` — a forwarded event whose type this realm does not recognise.
+ *
+ * @group Types
+ */
+export type UwtTelemetryEventKind =
+  'bi' | 'scenario' | 'scenario-step' | 'log' | 'error' | 'unknown';
+
+interface UwtTelemetryObservedBase {
+  /** Increases by one per observed event, within one page load. */
+  sequence: number;
+
+  /** When the event was handed over, as ISO-8601. */
+  capturedAt: string;
+
+  destination: UwtTelemetryDestination;
+  origin: UwtTelemetryEventOrigin;
+}
+
+/**
+ * One event handed to a destination, as seen by
+ * {@link UwtTelemetryMonitor}.
+ *
+ * Local payloads keep their library types. A forwarded payload arrived from
+ * another realm and was only shape-checked there, so it is typed as plain
+ * JSON — narrow on `origin.forwarded` before relying on its fields.
+ *
+ * @group Types
+ */
+export type UwtTelemetryObservedEvent =
+  | (UwtTelemetryObservedBase & {
+      kind: 'bi';
+      eventType: string;
+      payload: UwtBIEvent | UwtJsonObject;
+    })
+  | (UwtTelemetryObservedBase & {
+      kind: 'scenario';
+      eventType: string;
+      payload: UwtScenarioRecord | UwtJsonObject;
+    })
+  | (UwtTelemetryObservedBase & {
+      kind: 'scenario-step';
+      eventType: string;
+      payload: UwtScenarioStepEvent | UwtJsonObject;
+    })
+  | (UwtTelemetryObservedBase & {
+      kind: 'log';
+      payload: UwtLogRecord;
+    })
+  | (UwtTelemetryObservedBase & {
+      kind: 'error';
+      payload: UwtTelemetryError;
+      /** The log event this error was mirrored from, when there is one. */
+      relatedSequence?: number;
+    })
+  | (UwtTelemetryObservedBase & {
+      kind: 'unknown';
+      eventType: string;
+      payload: UwtJsonObject;
+    });
+
+/** Distributes `Omit` over a union, so each member keeps its own fields. */
+type UwtOmitEach<T, K extends PropertyKey> = T extends unknown
+  ? Omit<T, K>
+  : never;
+
+/**
+ * What a hand-off site passes to {@link UwtTelemetryMonitor.publish} — an
+ * observed event without the fields the monitor assigns itself.
+ */
+export type UwtTelemetryPublishInput = UwtOmitEach<
+  UwtTelemetryObservedEvent,
+  'sequence' | 'capturedAt'
+>;
diff --git a/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.spec.ts b/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.spec.ts
index 419c407..d162b14 100644
--- a/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.spec.ts
+++ b/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.spec.ts
@@ -4,6 +4,7 @@ import { UwtTelemetryMetadata } from '../../models/uwt-telemetry-common.models/u
 import { UwtTelemetrySink } from '../../sinks/uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
 import { UWT_DEFAULT_REDACT_CONFIG } from '../../utils/uwt-telemetry-redact.util/uwt-telemetry-redact.util';
 import { UwtScenario, UwtScenarioDeps } from './uwt-scenario';
+import { UwtTelemetryMonitor } from '../../services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
 
 /** Captures what the scenario emitted, so a test can assert on it. */
 class RecordingSink extends UwtTelemetrySink {
@@ -54,6 +55,7 @@ function createDeps(overrides: Partial<UwtScenarioDeps> = {}): {
     redact: UWT_DEFAULT_REDACT_CONFIG,
     sink,
     onSettled: (_id, record) => settled.push(record),
+    monitor: new UwtTelemetryMonitor(),
     ...overrides
   };
   return { deps, sink, settled };
diff --git a/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.ts b/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.ts
index d67057a..f582390 100644
--- a/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.ts
+++ b/projects/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario.ts
@@ -18,6 +18,7 @@ import {
   UwtTelemetryEventTypes,
   UwtTelemetryMetadata
 } from '../../models/uwt-telemetry-common.models/uwt-telemetry-common.models';
+import { UwtTelemetryMonitor } from '../../services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
 import { UwtTelemetrySink } from '../../sinks/uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
 import {
   uwtDebugWrite,
@@ -62,6 +63,8 @@ export interface UwtScenarioDeps {
   runOutsideAngular?: <T>(callback: () => T) => T;
   /** Called once with the scenario's id when it reaches a terminal state. */
   onSettled: (scenarioId: string, record: UwtScenarioRecord) => void;
+  /** Told about every event right after it is handed to the sink. */
+  monitor: UwtTelemetryMonitor;
 }
 
 /** The two events a scenario sends: its settled record, and a closed step. */
@@ -829,10 +832,11 @@ export class UwtScenario {
 
   /**
    * Sends a payload to the sink, first logging that exact same object if
-   * `debugScenario` is on.
+   * `debugScenario` is on, then telling the monitor it was handed over.
    *
-   * The only place either happens, so console output and sink output can
-   * never drift apart: one object, one call site.
+   * The only place any of the three happens, so console output, sink output
+   * and what an observer sees can never drift apart: one object, one call
+   * site.
    *
    * @param emission the payload and which of the two events it is
    * @param summary a short human-readable prefix for the console line
@@ -847,6 +851,12 @@ export class UwtScenario {
       writeToConsole(summary, eventType, emission.payload)
     );
     this.deps.sink.record(eventType, emission.payload);
+    this.deps.monitor.publish({
+      ...emission,
+      eventType,
+      destination: 'sink',
+      origin: { forwarded: false }
+    });
   }
 }
 
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service.ts
index d827f3b..1c5ce81 100644
--- a/projects/ngx-ui-watchtower/src/lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service.ts
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service.ts
@@ -13,6 +13,7 @@ import {
   uwtEventTypes,
   UwtTelemetryMetadata
 } from '../../models/uwt-telemetry-common.models/uwt-telemetry-common.models';
+import { UwtTelemetryMonitor } from '../uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
 import { UwtTelemetrySink } from '../../sinks/uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
 import { uwtDebugWrite } from '../../utils/uwt-debug-flag.util/uwt-debug-flag.util';
 import {
@@ -68,6 +69,7 @@ export class UwtBITelemetryService {
   );
 
   private readonly sink = inject(UwtTelemetrySink);
+  private readonly monitor = inject(UwtTelemetryMonitor);
   private readonly eventTypes = uwtEventTypes(this.identity.eventNamespace);
   private readonly lastEmittedAt = new Map<string, number>();
 
@@ -120,6 +122,13 @@ export class UwtBITelemetryService {
       );
 
       this.sink.record(eventType, event);
+      this.monitor.publish({
+        kind: 'bi',
+        eventType,
+        payload: event,
+        destination: 'sink',
+        origin: { forwarded: false }
+      });
     });
   }
 
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-logger.service/uwt-logger.service.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-logger.service/uwt-logger.service.ts
index a6d4609..14f2edf 100644
--- a/projects/ngx-ui-watchtower/src/lib/services/uwt-logger.service/uwt-logger.service.ts
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-logger.service/uwt-logger.service.ts
@@ -13,6 +13,7 @@ import {
   type UwtLogLevel,
   type UwtLogRecord
 } from '../../models/uwt-log.models/uwt-log.models';
+import { UwtTelemetryMonitor } from '../uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
 import { UwtTelemetrySink } from '../../sinks/uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
 import {
   UWT_LOG_API_PROVIDER,
@@ -81,6 +82,7 @@ export class UwtLoggerService implements OnDestroy {
   /** Enrichment only (`sessionId`/`userId`, optional RUM mirroring). */
   private readonly sink = inject(UwtTelemetrySink, { optional: true });
   private readonly apiProvider = inject(UWT_LOG_API_PROVIDER);
+  private readonly monitor = inject(UwtTelemetryMonitor);
   private readonly document = inject(DOCUMENT);
   private readonly isBrowser = uwtIsBrowser();
 
@@ -246,7 +248,7 @@ export class UwtLoggerService implements OnDestroy {
 
       uwtDebugWrite('debugLogger', () => writeToConsole(record), record.logger);
 
-      this.deliver(record);
+      const sequence = this.deliver(record);
 
       if (level === 'error' && this.logsConfig.mirrorErrorsToRum && this.sink) {
         const mirrored =
@@ -254,16 +256,39 @@ export class UwtLoggerService implements OnDestroy {
           uwtNormalizeError(new Error(record.message), this.redact);
         if (mirrored) {
           this.sink.recordError(mirrored);
+          this.monitor.publish({
+            kind: 'error',
+            payload: mirrored,
+            relatedSequence: sequence,
+            destination: 'sink',
+            origin: { forwarded: false }
+          });
         }
       }
     });
   }
 
-  /** Guards against a throwing or secretly-async, rejecting provider. */
-  private deliver(record: UwtLogRecord): void {
-    uwtSafeVoidMaybeAsync('logger.deliver', () =>
-      this.apiProvider.send(record)
-    );
+  /**
+   * Guards against a throwing or secretly-async, rejecting provider, and
+   * tells the monitor once the record has been handed over.
+   *
+   * @returns the monitor's sequence number for the record, when observed
+   */
+  private deliver(record: UwtLogRecord): number | undefined {
+    let sequence: number | undefined;
+    uwtSafeVoidMaybeAsync('logger.deliver', () => {
+      const pending = this.apiProvider.send(record);
+      // After send, so a provider that throws synchronously is not reported
+      // as handed over. An asynchronous rejection can't be seen here.
+      sequence = this.monitor.publish({
+        kind: 'log',
+        payload: record,
+        destination: 'log-provider',
+        origin: { forwarded: false }
+      });
+      return pending;
+    });
+    return sequence;
   }
 
   /** Gives the provider its chance to ship whatever it has queued itself. */
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-scenario-telemetry.service/uwt-scenario-telemetry.service.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-scenario-telemetry.service/uwt-scenario-telemetry.service.ts
index c2129f0..8fd0703 100644
--- a/projects/ngx-ui-watchtower/src/lib/services/uwt-scenario-telemetry.service/uwt-scenario-telemetry.service.ts
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-scenario-telemetry.service/uwt-scenario-telemetry.service.ts
@@ -20,6 +20,7 @@ import {
 } from '../../utils/uwt-telemetry-safe.util/uwt-telemetry-safe.util';
 import { uwtRedactConfigFor } from '../../utils/uwt-telemetry-redact.util/uwt-telemetry-redact.util';
 import { UwtScenario } from '../../scenario/uwt-scenario/uwt-scenario';
+import { UwtTelemetryMonitor } from '../uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
 
 /**
  * How many scenarios may be in flight before a development-mode warning
@@ -68,6 +69,7 @@ export class UwtScenarioTelemetryService implements OnDestroy {
   );
 
   private readonly sink = inject(UwtTelemetrySink);
+  private readonly monitor = inject(UwtTelemetryMonitor);
   private readonly document = inject(DOCUMENT);
   private readonly isBrowser = uwtIsBrowser();
   private readonly zone = inject(NgZone, { optional: true });
@@ -122,6 +124,7 @@ export class UwtScenarioTelemetryService implements OnDestroy {
       scenarioTelemetryConfig: this.scenarioTelemetryConfig,
       redact: this.redact,
       sink: this.sink,
+      monitor: this.monitor,
       runOutsideAngular: (callback) =>
         this.zone?.runOutsideAngular(callback) ?? callback(),
       onSettled: (scenarioId, record) => {
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.integration.spec.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.integration.spec.ts
new file mode 100644
index 0000000..5938741
--- /dev/null
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.integration.spec.ts
@@ -0,0 +1,210 @@
+import { Injectable } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+  provideUwtTelemetry,
+  withLogging,
+  withScenarios
+} from '../../providers/uwt-telemetry-common.providers/uwt-telemetry-common.providers';
+import {
+  UWT_LOG_API_PROVIDER,
+  UwtLogApiProvider
+} from '../../providers/uwt-log-api.provider/uwt-log-api.provider';
+import { UwtLogRecord } from '../../models/uwt-log.models/uwt-log.models';
+import {
+  UwtTelemetryError,
+  UwtTelemetryMetadata
+} from '../../models/uwt-telemetry-common.models/uwt-telemetry-common.models';
+import { UwtTelemetryObservedEvent } from '../../models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models';
+import { UwtTelemetrySink } from '../../sinks/uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
+import { UwtBITelemetryService } from '../uwt-bi-telemetry.service/uwt-bi-telemetry.service';
+import { UwtLoggerService } from '../uwt-logger.service/uwt-logger.service';
+import { UwtScenarioTelemetryService } from '../uwt-scenario-telemetry.service/uwt-scenario-telemetry.service';
+import { UwtTelemetryMonitor } from './uwt-telemetry-monitor.service';
+
+/** Counts every hand-off, so a test can prove nothing is sent twice. */
+@Injectable()
+class CountingSink extends UwtTelemetrySink {
+  readonly records: { eventType: string; payload: object }[] = [];
+  readonly errors: UwtTelemetryError[] = [];
+  throwOnRecord = false;
+
+  record(eventType: string, payload: object, _m?: UwtTelemetryMetadata): void {
+    if (this.throwOnRecord) {
+      throw new Error('sink is down');
+    }
+    this.records.push({ eventType, payload });
+  }
+
+  recordError(error: UwtTelemetryError): void {
+    this.errors.push(error);
+  }
+
+  getSessionId(): string | undefined {
+    return 'session-1';
+  }
+
+  setUserId(): void {}
+
+  getUserId(): string | undefined {
+    return undefined;
+  }
+
+  flush(): void {}
+}
+
+@Injectable()
+class CountingLogApi implements UwtLogApiProvider {
+  readonly sent: UwtLogRecord[] = [];
+  throwOnSend = false;
+
+  send(record: UwtLogRecord): void {
+    if (this.throwOnSend) {
+      throw new Error('log backend is down');
+    }
+    this.sent.push(record);
+  }
+
+  query(): Promise<UwtLogRecord[]> {
+    return Promise.resolve([]);
+  }
+}
+
+describe('UwtTelemetryMonitor at the hand-off sites', () => {
+  let observed: UwtTelemetryObservedEvent[];
+  let sink: CountingSink;
+  let logApi: CountingLogApi;
+
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      providers: [
+        provideUwtTelemetry(
+          { application: 'test-app', environment: 'test', version: '1.0.0' },
+          withScenarios({ defaultTimeoutMs: 0, emitLifecycleEvents: true }),
+          withLogging({ mirrorErrorsToRum: true })
+        ),
+        CountingSink,
+        { provide: UwtTelemetrySink, useExisting: CountingSink },
+        CountingLogApi,
+        { provide: UWT_LOG_API_PROVIDER, useExisting: CountingLogApi }
+      ]
+    });
+    sink = TestBed.inject(CountingSink);
+    logApi = TestBed.inject(CountingLogApi);
+    observed = [];
+    TestBed.inject(UwtTelemetryMonitor).events$.subscribe((e) =>
+      observed.push(e)
+    );
+  });
+
+  afterEach(() => jest.restoreAllMocks());
+
+  it('should observe a BI event once, and send it once', () => {
+    TestBed.inject(UwtBITelemetryService).track('export_clicked', {
+      format: 'csv'
+    });
+
+    expect(sink.records).toHaveLength(1);
+    expect(observed).toHaveLength(1);
+    expect(observed[0]).toMatchObject({
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      destination: 'sink',
+      origin: { forwarded: false },
+      payload: { eventName: 'export_clicked', metadata: { format: 'csv' } }
+    });
+  });
+
+  it('should observe each scenario step and the settled record, once each', () => {
+    TestBed.inject(UwtScenarioTelemetryService)
+      .start({ name: 'load' })
+      .step('one')
+      .step('two')
+      .complete();
+
+    expect(observed.map((e) => e.kind)).toEqual([
+      'scenario-step',
+      'scenario-step',
+      'scenario'
+    ]);
+    expect(observed.map((e) => 'eventType' in e && e.eventType)).toEqual([
+      'com.uwt.scenario.step',
+      'com.uwt.scenario.step',
+      'com.uwt.scenario'
+    ]);
+
+    expect(sink.records).toHaveLength(observed.length);
+    expect(observed[2].payload).toEqual(sink.records[2].payload);
+  });
+
+  it('should observe a log record as handed to the log provider', () => {
+    TestBed.inject(UwtLoggerService).getLogger('checkout').warn('careful');
+
+    expect(logApi.sent).toHaveLength(1);
+    expect(observed).toHaveLength(1);
+    expect(observed[0]).toMatchObject({
+      kind: 'log',
+      destination: 'log-provider',
+      payload: { logger: 'checkout', level: 'warn', message: 'careful' }
+    });
+  });
+
+  it('should observe a mirrored error, linked to the log line it came from', () => {
+    TestBed.inject(UwtLoggerService)
+      .getLogger('checkout')
+      .error('failed', { error: new Error('boom') });
+
+    expect(sink.errors).toHaveLength(1);
+    const [log, error] = observed;
+    expect(log.kind).toBe('log');
+    expect(error).toMatchObject({
+      kind: 'error',
+      destination: 'sink',
+      relatedSequence: log.sequence,
+      payload: { name: 'Error', message: 'boom' }
+    });
+  });
+
+  it('should observe nothing for a hand-off that threw', () => {
+    sink.throwOnRecord = true;
+    logApi.throwOnSend = true;
+
+    TestBed.inject(UwtBITelemetryService).track('export_clicked');
+    TestBed.inject(UwtLoggerService).getLogger('checkout').log('lost');
+
+    expect(observed).toHaveLength(0);
+  });
+
+  it('should send exactly the same number of events whether observed or not', () => {
+    const run = () => {
+      TestBed.inject(UwtBITelemetryService).track('a');
+      TestBed.inject(UwtScenarioTelemetryService)
+        .start({ name: 'load' })
+        .step('one')
+        .complete();
+      TestBed.inject(UwtLoggerService).getLogger('checkout').log('hi');
+    };
+
+    run();
+    const observedCounts = [sink.records.length, logApi.sent.length];
+
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      providers: [
+        provideUwtTelemetry(
+          { application: 'test-app', environment: 'test', version: '1.0.0' },
+          withScenarios({ defaultTimeoutMs: 0, emitLifecycleEvents: true })
+        ),
+        CountingSink,
+        { provide: UwtTelemetrySink, useExisting: CountingSink },
+        CountingLogApi,
+        { provide: UWT_LOG_API_PROVIDER, useExisting: CountingLogApi }
+      ]
+    });
+    sink = TestBed.inject(CountingSink);
+    logApi = TestBed.inject(CountingLogApi);
+    run();
+
+    expect([sink.records.length, logApi.sent.length]).toEqual(observedCounts);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.spec.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.spec.ts
new file mode 100644
index 0000000..78baff6
--- /dev/null
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.spec.ts
@@ -0,0 +1,118 @@
+import { isDevMode } from '@angular/core';
+import { UwtBIEvent } from '../../models/uwt-bi.models/uwt-bi.models';
+import { UwtTelemetryObservedEvent } from '../../models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models';
+import * as safeUtil from '../../utils/uwt-telemetry-safe.util/uwt-telemetry-safe.util';
+import { UwtTelemetryMonitor } from './uwt-telemetry-monitor.service';
+
+jest.mock('@angular/core', () => ({
+  ...jest.requireActual('@angular/core'),
+  isDevMode: jest.fn(() => false)
+}));
+
+function biEvent(): UwtBIEvent {
+  return {
+    eventName: 'export_clicked',
+    eventTime: '2026-01-01T00:00:00.000Z',
+    metadata: { format: 'csv' },
+    application: 'test-app'
+  };
+}
+
+describe('UwtTelemetryMonitor', () => {
+  let monitor: UwtTelemetryMonitor;
+  let received: UwtTelemetryObservedEvent[];
+
+  beforeEach(() => {
+    monitor = new UwtTelemetryMonitor();
+    received = [];
+  });
+
+  afterEach(() => {
+    monitor.ngOnDestroy();
+    jest.restoreAllMocks();
+  });
+
+  function publishBI(payload = biEvent()): number | undefined {
+    return monitor.publish({
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload,
+      destination: 'sink',
+      origin: { forwarded: false }
+    });
+  }
+
+  it('should do nothing, and copy nothing, while nobody is subscribed', () => {
+    const clone = jest.spyOn(safeUtil, 'uwtDeepClone');
+
+    expect(monitor.observed).toBe(false);
+    expect(publishBI()).toBeUndefined();
+    expect(clone).not.toHaveBeenCalled();
+  });
+
+  it('should deliver an event to a subscriber, with the envelope filled in', () => {
+    monitor.events$.subscribe((e) => received.push(e));
+
+    const sequence = publishBI();
+
+    expect(received).toHaveLength(1);
+    expect(received[0]).toMatchObject({
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      destination: 'sink',
+      origin: { forwarded: false },
+      sequence
+    });
+    expect(received[0].capturedAt).toMatch(
+      /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/
+    );
+  });
+
+  it('should hand a subscriber a copy, isolated from the object that was sent', () => {
+    monitor.events$.subscribe((e) => received.push(e));
+    const sent = biEvent();
+
+    publishBI(sent);
+    const observed = received[0].payload as UwtBIEvent;
+
+    expect(observed).toEqual(sent);
+    expect(observed).not.toBe(sent);
+
+    observed.metadata!.format = 'changed-by-observer';
+    sent.metadata!.format = 'changed-by-sender';
+    expect(sent.metadata!.format).toBe('changed-by-sender');
+    expect(observed.metadata!.format).toBe('changed-by-observer');
+  });
+
+  it('should number events in increasing order', () => {
+    monitor.events$.subscribe((e) => received.push(e));
+
+    publishBI();
+    publishBI();
+    publishBI();
+
+    const [a, b, c] = received.map((e) => e.sequence);
+    expect(b).toBe(a + 1);
+    expect(c).toBe(b + 1);
+  });
+
+  it('should stop observing once the last subscriber leaves', () => {
+    const subscription = monitor.events$.subscribe((e) => received.push(e));
+    subscription.unsubscribe();
+
+    expect(monitor.observed).toBe(false);
+    expect(publishBI()).toBeUndefined();
+    expect(received).toHaveLength(0);
+  });
+
+  it('should never throw into the hand-off site, even when copying fails', () => {
+    (isDevMode as jest.Mock).mockReturnValue(false);
+    monitor.events$.subscribe((e) => received.push(e));
+    jest.spyOn(safeUtil, 'uwtDeepClone').mockImplementation(() => {
+      throw new Error('clone failed');
+    });
+
+    expect(() => publishBI()).not.toThrow();
+    expect(received).toHaveLength(0);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts
new file mode 100644
index 0000000..2c2d257
--- /dev/null
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts
@@ -0,0 +1,81 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import {
+  UwtTelemetryObservedEvent,
+  UwtTelemetryPublishInput
+} from '../../models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models';
+import {
+  uwtDeepClone,
+  uwtSafeVoid
+} from '../../utils/uwt-telemetry-safe.util/uwt-telemetry-safe.util';
+
+/**
+ * A read-only view of every event this library hands to a destination —
+ * the telemetry sink or the application's log API provider.
+ *
+ * Each hand-off site publishes here immediately *after* the hand-off, with
+ * the very object it just sent. Nothing is sent from here: this is an
+ * in-memory stream for observers such as the diagnostics popup, never a
+ * second delivery path, so observing it cannot cause an event to be sent
+ * twice.
+ *
+ * Costs one check per event while nobody subscribes. A subscriber receives
+ * a deep copy of each payload, so it can neither change what was sent nor
+ * see a live object change after the fact.
+ *
+ * "Handed over" is not "delivered": a sink may still drop an event, for
+ * example when RUM samples a session out or reaches its event limit.
+ *
+ * @example
+ * ```typescript
+ * inject(UwtTelemetryMonitor)
+ *   .events$.pipe(filter((e) => e.kind === 'scenario'))
+ *   .subscribe((e) => console.table(e.payload));
+ * ```
+ *
+ * @group Services
+ */
+@Injectable({ providedIn: 'root' })
+export class UwtTelemetryMonitor implements OnDestroy {
+  private readonly subject = new Subject<UwtTelemetryObservedEvent>();
+  private sequence = 0;
+
+  /** Every observed event, from the moment of subscription onward. */
+  readonly events$: Observable<UwtTelemetryObservedEvent> =
+    this.subject.asObservable();
+
+  /** Whether anything is currently subscribed to {@link events$}. */
+  get observed(): boolean {
+    return this.subject.observed;
+  }
+
+  /**
+   * Records one hand-off. Called by the library's own hand-off sites; an
+   * application has no reason to call it.
+   *
+   * @param input the event just handed over, and where it went
+   * @returns the sequence number assigned, or `undefined` when nobody is
+   *   subscribed and the event was not recorded
+   */
+  publish(input: UwtTelemetryPublishInput): number | undefined {
+    if (!this.subject.observed) {
+      return undefined;
+    }
+
+    const sequence = ++this.sequence;
+    uwtSafeVoid('monitor.publish', () => {
+      this.subject.next({
+        ...input,
+        payload: uwtDeepClone(input.payload),
+        sequence,
+        capturedAt: new Date().toISOString()
+      } as UwtTelemetryObservedEvent);
+    });
+    return sequence;
+  }
+
+  /** @inheritdoc */
+  ngOnDestroy(): void {
+    this.subject.complete();
+  }
+}
diff --git a/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast-host.service.ts b/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast-host.service.ts
index 684d1b5..c87dc4a 100644
--- a/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast-host.service.ts
+++ b/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast-host.service.ts
@@ -11,9 +11,19 @@ import {
   uwtIsBroadcastMessage
 } from './uwt-broadcast.messages';
 import { UwtTelemetrySink } from '../uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
+import { uwtClassifyTelemetryEvent } from '../../utils/uwt-telemetry-event.util/uwt-telemetry-event.util';
 import { UwtBroadcastTelemetrySink } from './uwt-broadcast-telemetry.sink';
 import { UwtBroadcastLogApiProvider } from '../../providers/uwt-broadcast-log-api.provider/uwt-broadcast-log-api.provider';
+import { UwtTelemetryMonitor } from '../../services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
+import {
+  UwtJsonObject,
+  UwtTelemetryEventOrigin
+} from '../../models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models';
 import { UwtLogRecord } from '../../models/uwt-log.models/uwt-log.models';
+import {
+  UwtTelemetryError,
+  UwtTelemetryMetadata
+} from '../../models/uwt-telemetry-common.models/uwt-telemetry-common.models';
 import {
   UWT_LOG_API_PROVIDER,
   UwtLogQuery
@@ -25,6 +35,16 @@ import {
  */
 const hostsInThisRealm = new Map<string, number>();
 
+/**
+ * A forwarded error-level log record, kept for exactly one message in case
+ * the next is its `mirrorErrorsToRum` copy.
+ */
+interface UwtForwardedErrorLog {
+  application: string;
+  expected: UwtTelemetryError;
+  sequence: number;
+}
+
 /**
  * Receives telemetry forwarded by follower realms and records it through this
  * realm's sink.
@@ -63,6 +83,7 @@ const hostsInThisRealm = new Map<string, number>();
 @Injectable()
 export class UwtTelemetryBroadcastHost implements OnDestroy {
   private readonly sink = inject(UwtTelemetrySink);
+  private readonly monitor = inject(UwtTelemetryMonitor);
   private readonly logApi = inject(UWT_LOG_API_PROVIDER);
   private readonly connection: UwtBroadcastConnection =
     uwtConnectBroadcastChannel('broadcastHost');
@@ -83,6 +104,9 @@ export class UwtTelemetryBroadcastHost implements OnDestroy {
   private isLeader = false;
   private releaseLeadership: () => void = () => undefined;
 
+  /** The last message, when it was an error-level log record. */
+  private lastErrorLog?: UwtForwardedErrorLog;
+
   constructor() {
     this.warnIfDuplicateInThisRealm();
     if (this.forwardsItsOwnRealm()) {
@@ -126,13 +150,35 @@ export class UwtTelemetryBroadcastHost implements OnDestroy {
         this._received++;
       }
 
+      // A mirror arrives straight after its log record, so the candidate
+      // lives for one message only.
+      const errorLog = this.lastErrorLog;
+      this.lastErrorLog = undefined;
+
       switch (data.kind) {
         case 'event':
           this.sink.record(data.eventType, data.payload, data.metadata);
+          this.monitor.publish({
+            kind: uwtClassifyTelemetryEvent(data.eventType, data.payload).kind,
+            eventType: data.eventType,
+            payload: data.payload as UwtJsonObject,
+            destination: 'sink',
+            origin: forwardedFrom(data.metadata?.application)
+          });
           this.reannounceIfIdentityChanged();
           break;
         case 'error':
           this.sink.recordError(data.error, data.metadata);
+          this.monitor.publish({
+            kind: 'error',
+            payload: data.error,
+            ...(errorLog &&
+              isMirrorOf(errorLog, data.error, data.metadata) && {
+                relatedSequence: errorLog.sequence
+              }),
+            destination: 'sink',
+            origin: forwardedFrom(data.metadata?.application)
+          });
           this.reannounceIfIdentityChanged();
           break;
         case 'user':
@@ -170,9 +216,29 @@ export class UwtTelemetryBroadcastHost implements OnDestroy {
     });
   }
 
-  /** Hands a follower's record to this realm's log API provider. */
+  /**
+   * Hands a follower's record to this realm's log API provider, and tells
+   * the monitor once it has — as {@link UwtLoggerService} does for its own.
+   */
   private deliverLog(record: UwtLogRecord): void {
-    uwtSafeVoidMaybeAsync('broadcastHost.log', () => this.logApi.send(record));
+    uwtSafeVoidMaybeAsync('broadcastHost.log', () => {
+      const pending = this.logApi.send(record);
+      const sequence = this.monitor.publish({
+        kind: 'log',
+        payload: record,
+        destination: 'log-provider',
+        origin: forwardedFrom(record.application)
+      });
+      if (record.level === 'error' && sequence !== undefined) {
+        this.lastErrorLog = {
+          application: record.application,
+          // What UwtLoggerService mirrors to RUM for this record.
+          expected: record.error ?? { name: 'Error', message: record.message },
+          sequence
+        };
+      }
+      return pending;
+    });
   }
 
   /**
@@ -292,3 +358,32 @@ export class UwtTelemetryBroadcastHost implements OnDestroy {
     );
   }
 }
+
+/**
+ * Whether a forwarded error is the `mirrorErrorsToRum` copy of the error-level
+ * log record just before it: same realm, same name and message. A mirror
+ * the logger had to rewrite simply goes unlinked.
+ */
+function isMirrorOf(
+  errorLog: UwtForwardedErrorLog,
+  error: UwtTelemetryError,
+  metadata: UwtTelemetryMetadata | undefined
+): boolean {
+  return (
+    metadata?.application === errorLog.application &&
+    error.name === errorLog.expected.name &&
+    error.message === errorLog.expected.message
+  );
+}
+
+/**
+ * The forwarding realm: the `application` a follower sink stamps onto
+ * metadata, or a log record's own.
+ */
+function forwardedFrom(
+  application: UwtTelemetryMetadata[string] | undefined
+): UwtTelemetryEventOrigin {
+  return typeof application === 'string'
+    ? { forwarded: true, application }
+    : { forwarded: true };
+}
diff --git a/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts b/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts
index 6a59da5..9fdcd3f 100644
--- a/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts
+++ b/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts
@@ -35,6 +35,8 @@ import {
   uwtIsBroadcastMessage
 } from './uwt-broadcast.messages';
 import { UwtTelemetrySink } from '../uwt-telemetry/uwt-telemetry-abstract.sink/uwt-telemetry-abstract.sink';
+import { UwtTelemetryMonitor } from '../../services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
+import { UwtTelemetryObservedEvent } from '../../models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models';
 
 /**
  * Each realm gets its own injector — the shell and every fragment run in a
@@ -43,6 +45,7 @@ import { UwtTelemetrySink } from '../uwt-telemetry/uwt-telemetry-abstract.sink/u
 function createRealm(providers: unknown[]): Injector {
   return Injector.create({
     providers: [
+      UwtTelemetryMonitor,
       { provide: PLATFORM_ID, useValue: 'browser' },
       { provide: DOCUMENT, useValue: document },
       {
@@ -374,6 +377,69 @@ describe('broadcast telemetry across realms', () => {
       expect(shellSink.events[0].metadata).toMatchObject({ feature: 'cart' });
     });
 
+    it('should show a forwarded event to the shell monitor, marked with its realm', async () => {
+      const observed: UwtTelemetryObservedEvent[] = [];
+      shell.get(UwtTelemetryMonitor).events$.subscribe((e) => observed.push(e));
+      const fragment = createFragment();
+
+      fragment
+        .get(UwtTelemetrySink)
+        .record('com.uwt.scenario.step', { scenarioName: 'load' });
+      fragment.get(UwtTelemetrySink).record('com.uwt.bi', { eventName: 'x' });
+      fragment.get(UwtTelemetrySink).record('custom.type', { a: 1 });
+      fragment
+        .get(UwtTelemetrySink)
+        .recordError({ name: 'TypeError', message: 'boom' });
+      await UwtBroadcastChannelStub.settle();
+
+      expect(observed.map((e) => e.kind)).toEqual([
+        'scenario-step',
+        'bi',
+        'unknown',
+        'error'
+      ]);
+      for (const e of observed) {
+        expect(e.origin).toEqual({ forwarded: true, application: 'realm' });
+        expect(e.destination).toBe('sink');
+      }
+      expect(shellSink.events).toHaveLength(3);
+      expect(shellSink.errors).toHaveLength(1);
+    });
+
+    it('should show a fragment scenario once per monitor — local in the fragment, forwarded in the shell', async () => {
+      const fragment = createFragment();
+      const inShell: UwtTelemetryObservedEvent[] = [];
+      const inFragment: UwtTelemetryObservedEvent[] = [];
+      shell.get(UwtTelemetryMonitor).events$.subscribe((e) => inShell.push(e));
+      fragment
+        .get(UwtTelemetryMonitor)
+        .events$.subscribe((e) => inFragment.push(e));
+
+      fragment
+        .get(UwtScenarioTelemetryService)
+        .start({ name: 'load' })
+        .complete();
+      await UwtBroadcastChannelStub.settle();
+
+      expect(fragment.get(UwtTelemetryMonitor)).not.toBe(
+        shell.get(UwtTelemetryMonitor)
+      );
+      expect(inFragment).toHaveLength(1);
+      expect(inFragment[0]).toMatchObject({
+        kind: 'scenario',
+        origin: { forwarded: false }
+      });
+      expect(inShell).toHaveLength(1);
+      expect(inShell[0]).toMatchObject({
+        kind: 'scenario',
+        origin: { forwarded: true, application: 'realm' }
+      });
+
+      expect(
+        shellSink.events.filter((e) => e.eventType === 'com.uwt.scenario')
+      ).toHaveLength(1);
+    });
+
     it('should forward handled errors', async () => {
       const fragment = createFragment();
       fragment
@@ -612,6 +678,35 @@ describe('broadcast telemetry across realms', () => {
       expect(fragment.get(RecordingLogApi).records).toHaveLength(0);
     });
 
+    it('should show a forwarded record once per monitor — local in the fragment, forwarded in the shell', async () => {
+      const fragment = createFragment();
+      const inShell: UwtTelemetryObservedEvent[] = [];
+      const inFragment: UwtTelemetryObservedEvent[] = [];
+      shell.get(UwtTelemetryMonitor).events$.subscribe((e) => inShell.push(e));
+      fragment
+        .get(UwtTelemetryMonitor)
+        .events$.subscribe((e) => inFragment.push(e));
+
+      fragment.get(UwtLoggerService).getLogger('cart').log('Hello');
+      await UwtBroadcastChannelStub.settle();
+
+      expect(inFragment).toEqual([
+        expect.objectContaining({
+          kind: 'log',
+          destination: 'log-provider',
+          origin: { forwarded: false }
+        })
+      ]);
+      expect(inShell).toEqual([
+        expect.objectContaining({
+          kind: 'log',
+          destination: 'log-provider',
+          origin: { forwarded: true, application: 'realm' },
+          payload: expect.objectContaining({ message: 'Hello' })
+        })
+      ]);
+    });
+
     it('should forward a flush to the shell log provider', async () => {
       const fragment = createFragment();
       fragment.get(UWT_LOG_API_PROVIDER).flush?.();
@@ -702,6 +797,7 @@ describe('broadcast telemetry across realms', () => {
     it('should fail at injection when the shell binds no log provider', () => {
       const bareShell = Injector.create({
         providers: [
+          UwtTelemetryMonitor,
           { provide: PLATFORM_ID, useValue: 'browser' },
           RecordingSink,
           { provide: UwtTelemetrySink, useExisting: RecordingSink },
@@ -713,6 +809,64 @@ describe('broadcast telemetry across realms', () => {
         /UWT_LOG_API_PROVIDER/
       );
     });
+
+    it('should link a mirrored error to its forwarded log record in the shell monitor', async () => {
+      const fragment = createRealm([
+        UwtBroadcastTelemetrySink,
+        { provide: UwtTelemetrySink, useExisting: UwtBroadcastTelemetrySink },
+        UwtBroadcastLogApiProvider,
+        {
+          provide: UWT_LOG_API_PROVIDER,
+          useExisting: UwtBroadcastLogApiProvider
+        },
+        {
+          provide: UWT_LOG_CONFIG,
+          useValue: {
+            ...UWT_DEFAULT_TELEMETRY_CONFIG.logs,
+            mirrorErrorsToRum: true
+          }
+        }
+      ]);
+      const inShell: UwtTelemetryObservedEvent[] = [];
+      shell.get(UwtTelemetryMonitor).events$.subscribe((e) => inShell.push(e));
+
+      const logger = fragment.get(UwtLoggerService).getLogger('cart');
+      logger.error('Payment failed');
+      logger.error('Card declined', { error: new TypeError('declined') });
+      await UwtBroadcastChannelStub.settle();
+
+      expect(inShell.map((e) => e.kind)).toEqual([
+        'log',
+        'error',
+        'log',
+        'error'
+      ]);
+      const [firstLog, firstMirror, secondLog, secondMirror] = inShell;
+      expect(firstMirror).toMatchObject({
+        payload: { name: 'Error', message: 'Payment failed' },
+        relatedSequence: firstLog.sequence
+      });
+      expect(secondMirror).toMatchObject({
+        payload: { name: 'TypeError', message: 'declined' },
+        relatedSequence: secondLog.sequence
+      });
+    });
+
+    it('should not link an error that is not the mirror of the record before it', async () => {
+      const fragment = createFragment();
+      const inShell: UwtTelemetryObservedEvent[] = [];
+      shell.get(UwtTelemetryMonitor).events$.subscribe((e) => inShell.push(e));
+
+      fragment.get(UwtLoggerService).getLogger('cart').error('Payment failed');
+      fragment
+        .get(UwtTelemetrySink)
+        .recordError({ name: 'Error', message: 'Something else' });
+      await UwtBroadcastChannelStub.settle();
+
+      const error = inShell.find((e) => e.kind === 'error');
+      expect(error).toBeDefined();
+      expect(error).not.toHaveProperty('relatedSequence');
+    });
   });
 
   describe('robustness', () => {
diff --git a/projects/ngx-ui-watchtower/src/public-api.ts b/projects/ngx-ui-watchtower/src/public-api.ts
index 566884e..6f809be 100644
--- a/projects/ngx-ui-watchtower/src/public-api.ts
+++ b/projects/ngx-ui-watchtower/src/public-api.ts
@@ -83,11 +83,21 @@ export type {
   UwtTelemetryEventTypes,
   UwtTelemetryMetadata
 } from './lib/models/uwt-telemetry-common.models/uwt-telemetry-common.models';
+export {
+  UwtJsonObject,
+  UwtJsonValue,
+  UwtTelemetryDestination,
+  UwtTelemetryEventKind,
+  UwtTelemetryEventOrigin,
+  UwtTelemetryObservedEvent,
+  UwtTelemetryPublishInput
+} from './lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models';
 
 // Services
 export { UwtBITelemetryService } from './lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service';
 export { UwtLoggerService } from './lib/services/uwt-logger.service/uwt-logger.service';
 export { UwtScenario } from './lib/scenario/uwt-scenario/uwt-scenario';
+export { UwtTelemetryMonitor } from './lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service';
 export { UwtScenarioTelemetryService } from './lib/services/uwt-scenario-telemetry.service/uwt-scenario-telemetry.service';
 
 // Sinks
diff --git a/tsconfig.json b/tsconfig.json
index 9e6331e..11d5f81 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,9 @@
       ],
       "@absaoss-cps/ngx-ui-watchtower/rum": [
         "./projects/ngx-ui-watchtower/rum/src/public-api.ts"
+      ],
+      "@absaoss-cps/ngx-ui-watchtower/diagnostics": [
+        "./projects/ngx-ui-watchtower/diagnostics/src/public-api.ts"
       ]
     },
     "esModuleInterop": true,
@@ -42,6 +45,8 @@
     { "path": "./projects/ngx-ui-watchtower/tsconfig.lib.json" },
     { "path": "./projects/ngx-ui-watchtower/tsconfig.spec.json" },
     { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.lib.json" },
-    { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.spec.json" }
+    { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.spec.json" },
+    { "path": "./projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json" },
+    { "path": "./projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json" }
   ]
 }

From b1824078134d0e48e1f7f34c8c18a7f02a76249d Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 7 Oct 2026 19:57:18 +0200
Subject: [PATCH 02/51] maxChars fix

---
 projects/ngx-ui-watchtower/DESIGN.md          | 12 ++++----
 .../uwt-diagnostics-json.component.html       |  4 +--
 .../uwt-diagnostics-json.component.spec.ts    | 28 +++++++++++++++++--
 .../uwt-diagnostics-json.component.ts         | 20 +++++++++++--
 .../uwt-diagnostics.models.ts                 |  3 +-
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 49c9f59..8b98dba 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -1972,12 +1972,12 @@ each marked with `↪` and the fragment's name.
 
 #### Configuration
 
-| Option                  | Default                             | Meaning                                                                                                   |
-| ----------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `enabled`               | `true`                              | `false`, or a function read once at startup, turns the popup off — shortcut and `open()` alike            |
-| `shortcuts`             | `UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                         |
-| `maxEventsPerSection`   | `500`                               | Events kept per section; the oldest are dropped, and the count of dropped ones is shown                   |
-| `maxPayloadCharsInView` | `262144` (256 × 1024)               | A payload whose JSON is longer is shown truncated to its first 65,536 characters; downloads stay complete |
+| Option                  | Default                             | Meaning                                                                                                                                    |
+| ----------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `enabled`               | `true`                              | `false`, or a function read once at startup, turns the popup off — shortcut and `open()` alike                                             |
+| `shortcuts`             | `UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                                                          |
+| `maxEventsPerSection`   | `500`                               | Events kept per section; the oldest are dropped, and the count of dropped ones is shown                                                    |
+| `maxPayloadCharsInView` | `262144` (256 × 1024)               | A payload whose JSON is longer is shown truncated to its first `maxPayloadCharsInView` characters, at most 65,536; downloads stay complete |
 
 Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
 limit protects rendering, which costs by the length of the text. A cut never
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
index f155d11..04def8d 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
@@ -24,8 +24,8 @@
   </div>
   @if (truncated()) {
     <p class="uwt-diagnostics-json__notice">
-      Large payload: showing the first {{ shownChars }} characters. The download
-      contains all of it.
+      Large payload: showing the first {{ shownChars() }} characters. The
+      download contains all of it.
     </p>
   }
   <pre
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
index 11c1afc..cdc8ff5 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
@@ -31,12 +31,34 @@ describe('UwtDiagnosticsJsonComponent', () => {
     fixture.componentRef.setInput('maxChars', 1000);
     fixture.detectChanges();
 
+    expect(pre().textContent!.length).toBe(1000);
+    expect(fixture.nativeElement.textContent).toContain(
+      'showing the first 1,000 characters'
+    );
+    expect(fixture.nativeElement.textContent).toContain(
+      'The download contains all of it.'
+    );
+  });
+
+  it('should show at most 65,536 characters when maxChars is larger', () => {
+    fixture.componentRef.setInput('value', { big: 'x'.repeat(200_000) });
+    fixture.componentRef.setInput('maxChars', 100_000);
+    fixture.detectChanges();
+
     expect(pre().textContent!.length).toBe(64 * 1024);
     expect(fixture.nativeElement.textContent).toContain(
       'showing the first 65,536 characters'
     );
+  });
+
+  it('should show nothing of a payload when maxChars is negative', () => {
+    fixture.componentRef.setInput('value', { big: 'x'.repeat(1000) });
+    fixture.componentRef.setInput('maxChars', -10);
+    fixture.detectChanges();
+
+    expect(pre().textContent).toBe('');
     expect(fixture.nativeElement.textContent).toContain(
-      'The download contains all of it.'
+      'showing the first 0 characters'
     );
   });
 
@@ -53,7 +75,7 @@ describe('UwtDiagnosticsJsonComponent', () => {
   it('should not cut a truncated view through the middle of a surrogate pair', () => {
     const before = '{\n  "big": "';
     // Lines the first emoji up so the cut would fall inside it.
-    const padding = 'x'.repeat(64 * 1024 - 1 - before.length);
+    const padding = 'x'.repeat(1000 - 1 - before.length);
     fixture.componentRef.setInput('value', {
       big: padding + '😀'.repeat(10)
     });
@@ -61,7 +83,7 @@ describe('UwtDiagnosticsJsonComponent', () => {
     fixture.detectChanges();
 
     const shown = pre().textContent!;
-    expect(shown.length).toBe(64 * 1024 - 1);
+    expect(shown.length).toBe(1000 - 1);
     expect(shown.endsWith('x')).toBe(true);
   });
 
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
index a4ac7d3..f24e7aa 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
@@ -9,7 +9,10 @@ import { CpsButtonComponent } from 'cps-ui-kit';
 import { uwtSafeStringify } from '../uwt-diagnostics-export/uwt-diagnostics-export';
 import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
 
-/** Characters shown of a payload too large to show in full. */
+/**
+ * The most characters a truncated view shows, even when `maxChars` allows
+ * more.
+ */
 const TRUNCATED_VIEW_CHARS = 64 * 1024;
 
 /**
@@ -47,8 +50,19 @@ export class UwtDiagnosticsJsonComponent {
     UWT_DEFAULT_DIAGNOSTICS_CONFIG.maxPayloadCharsInView
   );
 
+  /**
+   * How many characters a truncated view shows: `maxChars`, capped at
+   * `TRUNCATED_VIEW_CHARS`. Never negative — `slice` would read a negative
+   * length as "all but the last few".
+   */
+  private readonly viewChars = computed(() =>
+    Math.max(0, Math.min(TRUNCATED_VIEW_CHARS, this.maxChars()))
+  );
+
   /** How much a truncated view shows, as the notice words it. */
-  protected readonly shownChars = TRUNCATED_VIEW_CHARS.toLocaleString('en-US');
+  protected readonly shownChars = computed(() =>
+    this.viewChars().toLocaleString('en-US')
+  );
 
   protected readonly copied = signal<'idle' | 'copied' | 'failed'>('idle');
 
@@ -67,7 +81,7 @@ export class UwtDiagnosticsJsonComponent {
   );
 
   protected readonly shown = computed(() =>
-    this.truncated() ? cutAt(this.full(), TRUNCATED_VIEW_CHARS) : this.full()
+    this.truncated() ? cutAt(this.full(), this.viewChars()) : this.full()
   );
 
   protected async copy(): Promise<void> {
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
index 6b65d65..32bb38c 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
@@ -52,7 +52,8 @@ export interface UwtTelemetryDiagnosticsConfig {
 
   /**
    * Payloads whose JSON is longer than this many characters are shown
-   * truncated. The download always contains them in full.
+   * truncated to this many, at most 65,536. The download always contains
+   * them in full.
    *
    * Characters (UTF-16 code units, JavaScript's `length`), not bytes: the
    * limit protects rendering, which costs by the length of the text.

From 26ef61a0038040ffb3d160df12dd84064a586636 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 10:24:30 +0100
Subject: [PATCH 03/51] fix table and info circle issues

---
 projects/ngx-ui-watchtower/DESIGN.md          | 10 ++++----
 .../uwt-diagnostics-filter-bar.component.html |  1 +
 .../uwt-diagnostics-section.component.html    | 12 +++++-----
 .../uwt-diagnostics-section.component.scss    | 23 +++++++++++++------
 .../uwt-telemetry-diagnostics.service.ts      |  7 +++---
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 04d885a..0a84e17 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2045,8 +2045,9 @@ match exactly, held-down repeats are ignored, and AltGr — which many
 European Windows layouts report as Ctrl+Alt — never triggers it. ⌥⌘8 alone
 is macOS Accessibility Zoom, which is why Shift is part of it.
 
-The popup is not modal: it docks on the right at half the screen and leaves
-the app usable, so you can watch events arrive. It is draggable, resizable
+The popup is not modal: it docks on the right at half the screen (at least
+40rem, or nearly all of a small screen) and leaves the app usable, so you
+can watch events arrive. It is draggable, resizable
 and maximizable. With it open, the shortcut brings focus back to
 it from the app, and closes it when focus is already inside. Escape closes it
 too.
@@ -2078,8 +2079,9 @@ provideUwtTelemetryDiagnostics({
 #### What it shows
 
 Three sections — BI telemetry, scenario telemetry and logging — listing
-events newest first, from the moment the popup opens. Expand a row for the
-full payload as JSON.
+events newest first, from the moment the popup opens. The table always fits
+the popup: a long value ends in an ellipsis, and hovering shows it in full.
+Expand a row for the full payload as JSON.
 
 Each section has its own tools, which never affect the other two:
 
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
index e765ec1..2afc31e 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
@@ -20,6 +20,7 @@
       (clicked)="builderOpen.set(!builderOpen())">
     </cps-button>
     <cps-info-circle
+      tooltipMaxWidth="20rem"
       tooltipText="Search matches any field's value or name, ignoring case. A filter compares one field, such as metadata.theme. Use steps[].name to match any item of a list, or steps[2].name for one. All filters must match. Filters apply to this section only; its download always contains everything it captured.">
     </cps-info-circle>
   </div>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
index 2167f7a..42e9045 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
@@ -60,9 +60,10 @@
       [rowsPerPageOptions]="[25, 50, 100]"
       [first]="first()"
       (pageChanged)="onPage($event)"
-      [emptyMessage]="emptyMessage()">
+      [emptyMessage]="emptyMessage()"
+      tableStyleClass="uwt-diagnostics-section__table">
       <ng-template #header>
-        <th scope="col">Time</th>
+        <th scope="col" class="uwt-diagnostics-section__time">Time</th>
         @for (column of columns(); track column.key) {
           <th
             scope="col"
@@ -87,15 +88,14 @@
             "
             [class.uwt-diagnostics-section__level--error]="
               column.key === 'level' && row.cells['level'].startsWith('error')
-            ">
+            "
+            [attr.title]="row.cells[column.key] || null">
             @if (column.key === columns()[0].key && row.forwardedFrom) {
               <span class="uwt-diagnostics-section__forwarded"
                 >↪ {{ row.forwardedFrom }}</span
               >
             }
-            <span class="uwt-diagnostics-section__cell">{{
-              row.cells[column.key]
-            }}</span>
+            {{ row.cells[column.key] }}
           </td>
         }
       </ng-template>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
index 13af3b9..522a9f7 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
@@ -35,18 +35,27 @@
   color: var(--cps-text-secondary);
 }
 
-.uwt-diagnostics-section__time {
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
+// The table fits the section instead of running past its edge: the columns
+// after Time share the width, and a long value ends in an ellipsis, shown
+// in full in the cell's title and the row's detail.
+:host ::ng-deep .uwt-diagnostics-section__table {
+  width: 100%;
 }
 
-.uwt-diagnostics-section__cell {
-  display: inline-block;
-  max-width: 28rem;
+td {
+  // Lets the table make a cell narrower than its text.
+  max-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  vertical-align: bottom;
+}
+
+.uwt-diagnostics-section__time {
+  // Only as wide as the time itself.
+  width: 1%;
+  max-width: none;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
 
 .uwt-diagnostics-section__forwarded {
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
index 343ad9f..a10c911 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
+++ b/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
@@ -123,10 +123,11 @@ export class UwtTelemetryDiagnosticsService {
           maximizable: true,
           closeOnEscape: true,
           // Docked right at half the screen, so the application stays
-          // visible and clickable beside it; resizable, and maximizable
-          // for a closer look.
+          // visible and clickable beside it, but never narrower than 40rem
+          // (nearly all of a small screen), so the tables have room;
+          // resizable, and maximizable for a closer look.
           position: 'right',
-          width: 'min(64rem, 50vw)',
+          width: 'clamp(min(40rem, 96vw), 50vw, 64rem)',
           height: '88vh',
           minWidth: 'min(22rem, 96vw)',
           autoFocus: '.uwt-diagnostics-search input'

From 6d0f90e34d82275f3a90471bfa06652988df2cb6 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 10:43:53 +0100
Subject: [PATCH 04/51] rename

---
 README.md                                     |  12 +-
 jest.config.js                                |   4 +-
 package.json                                  |   2 +-
 projects/ngx-ui-watchtower/DESIGN.md          |  92 +++++++--------
 projects/ngx-ui-watchtower/README.md          |   6 +-
 .../diagnostics/src/public-api.ts             |  21 ----
 .../ng-package.json                           |   0
 .../uwt-event-inspector.service.spec.ts}      |  28 ++---
 .../uwt-event-inspector.service.ts}           |  50 ++++----
 .../uwt-inspector-dialog.component.html}      |  24 ++--
 .../uwt-inspector-dialog.component.scss}      |  24 ++--
 .../uwt-inspector-dialog.component.spec.ts}   |  32 ++---
 .../uwt-inspector-dialog.component.ts}        |  60 +++++-----
 .../uwt-inspector-export.spec.ts}             |  31 ++---
 .../uwt-inspector-export.ts}                  |  36 +++---
 .../uwt-inspector-exporter.ts}                |  36 +++---
 .../uwt-inspector-filter-bar.component.html}  |  20 ++--
 .../uwt-inspector-filter-bar.component.scss}  |  22 ++--
 ...wt-inspector-filter-bar.component.spec.ts} |  20 ++--
 .../uwt-inspector-filter-bar.component.ts}    |  27 ++---
 .../uwt-inspector-filter.spec.ts}             |  25 ++--
 .../uwt-inspector-filter.ts}                  |  38 +++---
 .../uwt-inspector-internal.util.ts}           |   5 +-
 .../uwt-inspector-json.component.html}        |   8 +-
 .../uwt-inspector-json.component.scss}        |   8 +-
 .../uwt-inspector-json.component.spec.ts}     |  10 +-
 .../uwt-inspector-json.component.ts}          |  16 ++-
 .../uwt-inspector-columns.ts}                 |  30 ++---
 .../uwt-inspector-section.component.html}     |  40 +++----
 .../uwt-inspector-section.component.scss}     |  28 ++---
 .../uwt-inspector-section.component.spec.ts}  |  28 ++---
 .../uwt-inspector-section.component.ts}       |  50 ++++----
 .../uwt-inspector-shortcut.spec.ts}           |  10 +-
 .../uwt-inspector-shortcut.ts}                |  10 +-
 .../uwt-inspector-store.spec.ts}              |  22 ++--
 .../uwt-inspector-store.ts}                   | 111 +++++++++---------
 .../uwt-inspector.models.ts}                  |  48 ++++----
 .../uwt-inspector.providers.ts}               |  32 ++---
 .../event-inspector/src/public-api.ts         |  21 ++++
 .../tsconfig.lib.json                         |   2 +-
 .../tsconfig.spec.json                        |   2 +-
 .../uwt-telemetry-monitor.service.ts          |   2 +-
 tsconfig.json                                 |   8 +-
 43 files changed, 542 insertions(+), 559 deletions(-)
 delete mode 100644 projects/ngx-ui-watchtower/diagnostics/src/public-api.ts
 rename projects/ngx-ui-watchtower/{diagnostics => event-inspector}/ng-package.json (100%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts => event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts} (84%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts => event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts} (73%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html => event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html} (76%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss => event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss} (77%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts => event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts} (91%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts => event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts} (67%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts => event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts} (83%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts => event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts} (78%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts => event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts} (76%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html => event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html} (83%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss => event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss} (52%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts => event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts} (81%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts => event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts} (81%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts => event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts} (90%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts => event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts} (86%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts => event-inspector/src/lib/uwt-inspector-internal.util/uwt-inspector-internal.util.ts} (93%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html => event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html} (82%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss => event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss} (85%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts => event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts} (92%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts => event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts} (84%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts => event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts} (89%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html => event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html} (79%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss => event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss} (76%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts => event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts} (78%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts => event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts} (73%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts => event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts} (91%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts => event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts} (88%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts => event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts} (93%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts => event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts} (73%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts => event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts} (72%)
 rename projects/ngx-ui-watchtower/{diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts => event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts} (50%)
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
 rename projects/ngx-ui-watchtower/{diagnostics => event-inspector}/tsconfig.lib.json (91%)
 rename projects/ngx-ui-watchtower/{diagnostics => event-inspector}/tsconfig.spec.json (83%)

diff --git a/README.md b/README.md
index 0f3c348..70ffb84 100644
--- a/README.md
+++ b/README.md
@@ -20,12 +20,12 @@ How it is designed: [projects/ngx-ui-watchtower/DESIGN.md](projects/ngx-ui-watch
 
 ```text
 projects/ngx-ui-watchtower/
-  src/          main entry point — @absaoss-cps/ngx-ui-watchtower
-  rum/          secondary entry point — @absaoss-cps/ngx-ui-watchtower/rum
-  diagnostics/  secondary entry point — @absaoss-cps/ngx-ui-watchtower/diagnostics
-  README.md     usage guide, published to npm
-  DESIGN.md     full design
-  package.json  the published package's manifest
+  src/              main entry point — @absaoss-cps/ngx-ui-watchtower
+  rum/              secondary entry point — @absaoss-cps/ngx-ui-watchtower/rum
+  event-inspector/  secondary entry point — @absaoss-cps/ngx-ui-watchtower/event-inspector
+  README.md         usage guide, published to npm
+  DESIGN.md         full design
+  package.json      the published package's manifest
 ```
 
 ## Getting started
diff --git a/jest.config.js b/jest.config.js
index 921e2a2..c40547f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -8,8 +8,8 @@ module.exports = {
       '<rootDir>/projects/ngx-ui-watchtower/src/public-api.ts',
     '^@absaoss-cps/ngx-ui-watchtower/rum$':
       '<rootDir>/projects/ngx-ui-watchtower/rum/src/public-api.ts',
-    '^@absaoss-cps/ngx-ui-watchtower/diagnostics$':
-      '<rootDir>/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts'
+    '^@absaoss-cps/ngx-ui-watchtower/event-inspector$':
+      '<rootDir>/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts'
   },
   transformIgnorePatterns: [
     'node_modules/(?!(.*.mjs$|@angular/common/locales/.*.js$))'
diff --git a/package.json b/package.json
index 1ff0fd9..cb244a0 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "lint": "eslint \"**/*.ts\" --max-warnings=0",
     "format": "prettier --write \"**/*.{ts,html}\"",
     "format:check": "prettier --check \"**/*.{ts,html}\"",
-    "typecheck": "tsc -p projects/ngx-ui-watchtower/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json --noEmit"
+    "typecheck": "tsc -p projects/ngx-ui-watchtower/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json --noEmit"
   },
   "private": true,
   "dependencies": {
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 0a84e17..12e6325 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -94,19 +94,19 @@ production and stubbed in tests.
 
 Three, each pulling in only what it needs:
 
-| Entry point                                  | Contains                                    | Needs                                                                       |
-| -------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------- |
-| `@absaoss-cps/ngx-ui-watchtower`             | Everything except the two below             | Angular                                                                     |
-| `@absaoss-cps/ngx-ui-watchtower/rum`         | `UwtRumTelemetrySink`, its providers        | `aws-rum-web`, an optional peer                                             |
-| `@absaoss-cps/ngx-ui-watchtower/diagnostics` | The [diagnostics popup](#diagnostics-popup) | `cps-ui-kit` (with `@angular/forms`, `@angular/animations`), optional peers |
+| Entry point                                      | Contains                                | Needs                                                                       |
+| ------------------------------------------------ | --------------------------------------- | --------------------------------------------------------------------------- |
+| `@absaoss-cps/ngx-ui-watchtower`                 | Everything except the two below         | Angular                                                                     |
+| `@absaoss-cps/ngx-ui-watchtower/rum`             | `UwtRumTelemetrySink`, its providers    | `aws-rum-web`, an optional peer                                             |
+| `@absaoss-cps/ngx-ui-watchtower/event-inspector` | The [Event Inspector](#event-inspector) | `cps-ui-kit` (with `@angular/forms`, `@angular/animations`), optional peers |
 
 A bundler resolves every static import in a module graph, and a dynamic
 `import()`'s specifier, whether or not that code path ever runs. Keeping the
 RUM sink and its `await import('aws-rum-web')` out of the main entry is what
 lets an app using only `'broadcast'`/`'noop'` build without `aws-rum-web`
-installed. The popup is split out the same way: it is the only UI in the
-package, and nothing in the main entry — bundle or `.d.ts` — references
-cps-ui-kit.
+installed. The Event Inspector is split out the same way: it is the only UI
+in the package, and nothing in the main entry — bundle or `.d.ts` —
+references cps-ui-kit.
 
 ### Public API
 
@@ -134,13 +134,13 @@ Everything each entry point exports, by role.
 `UwtRumCredentials` (`accessKeyId`, `secretAccessKey`, `sessionToken`,
 `expiration`).
 
-**`@absaoss-cps/ngx-ui-watchtower/diagnostics`:** `provideUwtTelemetryDiagnostics`,
-`UwtTelemetryDiagnosticsService`, `UWT_TELEMETRY_DIAGNOSTICS_CONFIG`,
-`UwtTelemetryDiagnosticsConfig`, `UWT_DEFAULT_DIAGNOSTICS_CONFIG`,
-`UwtDiagnosticsShortcut`, `UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS`,
-`UwtDiagnosticsExport`, `UwtDiagnosticsSectionId`, and the filter types
-`UwtDiagnosticsFilterState`, `UwtDiagnosticsFieldFilter`,
-`UwtDiagnosticsFilterOperator` — see §12, "Diagnostics popup".
+**`@absaoss-cps/ngx-ui-watchtower/event-inspector`:** `provideUwtEventInspector`,
+`UwtEventInspectorService`, `UWT_EVENT_INSPECTOR_CONFIG`,
+`UwtEventInspectorConfig`, `UWT_DEFAULT_INSPECTOR_CONFIG`,
+`UwtInspectorShortcut`, `UWT_DEFAULT_INSPECTOR_SHORTCUTS`,
+`UwtInspectorExport`, `UwtInspectorSectionId`, and the filter types
+`UwtInspectorFilterState`, `UwtInspectorFieldFilter`,
+`UwtInspectorFilterOperator` — see §12, "Event Inspector".
 
 ### Destinations
 
@@ -192,10 +192,10 @@ redacted), deduplicate BI events, time anything, or guard the library's
 calls — every call the library makes into it, `init` included, is wrapped
 fail-open. The one exception is `setUserId`/`getUserId`, which the
 application calls on the sink directly; a destination should not throw
-there. The
-diagnostics monitor observes the hand-off, so the popup works with any
-destination. Log lines are not part of it: they go to the application's
-own log backend through `UWT_LOG_API_PROVIDER`, whatever the destination.
+there. The telemetry monitor observes the hand-off, so the Event Inspector
+works with any destination. Log lines are not part of it: they go to the
+application's own log backend through `UWT_LOG_API_PROVIDER`, whatever the
+destination.
 
 ```ts
 providers: [
@@ -225,14 +225,14 @@ shell's.
   `uwtNormalizeError`, `uwtScrubString` and `uwtRedactConfigFor`.
 - **Secondary entries keep private copies of a few utilities.** ng-packagr
   fixes each entry point's `rootDir` to its own `src`, so
-  `@absaoss-cps/ngx-ui-watchtower/rum` and `@absaoss-cps/ngx-ui-watchtower/diagnostics` can't import the main
+  `@absaoss-cps/ngx-ui-watchtower/rum` and `@absaoss-cps/ngx-ui-watchtower/event-inspector` can't import the main
   entry's internals by relative path and carry small copies of what they
   need.
 - **cps-ui-kit comes from npm.** It is an optional peer of the package and a
   dev dependency of the workspace, so the build and the unit tests resolve it
   from `node_modules` and it is never compiled into the package. The
-  workspace uses cps-ui-kit 21, the lowest version the popup supports, as it
-  uses the lowest supported Angular.
+  workspace uses cps-ui-kit 21, the lowest version the Event Inspector
+  supports, as it uses the lowest supported Angular.
 - **Test doubles live in the specs that use them**, declared inline, never in
   a shared file and never exported. The one browser gap needing a stub is
   `BroadcastChannel`, which jsdom doesn't implement.
@@ -1313,7 +1313,7 @@ Reading through AWS also answers the wrong question: by the time a record is
 in CloudWatch it is minutes old and mixed in with everyone else's, which is
 rarely what someone asking for "the logs" actually wants.
 
-### The diagnostics popup
+### The Event Inspector
 
 The popup shows exactly what is sent, after redaction — including session
 and user ids — and redacts nothing further, since a popup that hid fields
@@ -1325,7 +1325,7 @@ nothing, sends nothing and grants no remote access.
 Avoid sharing your screen while it is open, and treat downloads as you would
 any file with ids in it; filenames carry only the application name, the
 section and a timestamp
-(`ngx-ui-watchtower-diagnostics-<application>-<section>-<yyyyMMdd-HHmmss>.json`). The shortcut prevents accidental opening; it is not access
+(`ngx-ui-watchtower-events-<application>-<section>-<yyyyMMdd-HHmmss>.json`). The shortcut prevents accidental opening; it is not access
 control — use `enabled` for that, or leave the provider out.
 
 ---
@@ -1615,7 +1615,7 @@ convention, for an application that wants the pre-fallback behavior back.
   becoming stable.
 - **Bounded.** A 100-item buffer keeps events, page views and errors recorded
   before the RUM client is ready, then replays them; it never grows past
-  that if initialization never completes. The diagnostics monitor costs one
+  that if initialization never completes. The telemetry monitor costs one
   check per event while nobody watches; the popup keeps at most 500 events
   per section, updates the screen at most every 250 ms, and releases
   everything when it closes.
@@ -1653,7 +1653,7 @@ How an application uses the library, end to end.
 npm install @absaoss-cps/ngx-ui-watchtower
 # optional, only if you use the AWS RUM sink
 npm install aws-rum-web
-# optional, only if you use the diagnostics popup
+# optional, only if you use the Event Inspector
 npm install cps-ui-kit
 ```
 
@@ -2009,18 +2009,18 @@ writes to the console, so starting a scenario, opening a step or calling a
 method after settlement — none of which sends anything — print nothing. To
 see each step, turn on `emitLifecycleEvents`, which makes steps real events.
 
-### Diagnostics popup
+### Event Inspector
 
 An in-app window showing, live, every BI event, scenario event and log
 record your app hands to its telemetry destinations — no DevTools, no
 backend access:
 
 ```ts
-import { provideUwtTelemetryDiagnostics } from '@absaoss-cps/ngx-ui-watchtower/diagnostics';
+import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 
 providers: [
   provideUwtTelemetry({ application: 'my-app', environment, version }),
-  provideUwtTelemetryDiagnostics()
+  provideUwtEventInspector()
 ];
 ```
 
@@ -2056,7 +2056,7 @@ It works in every environment. To change the keys, turn the shortcut off, or
 limit who can open it:
 
 ```ts
-provideUwtTelemetryDiagnostics({
+provideUwtEventInspector({
   // Your own combination — replaces the defaults.
   shortcuts: [
     {
@@ -2069,7 +2069,7 @@ provideUwtTelemetryDiagnostics({
   ],
 
   // Or no keyboard at all, opening it from your own UI instead:
-  // shortcuts: [],   then   inject(UwtTelemetryDiagnosticsService).open();
+  // shortcuts: [],   then   inject(UwtEventInspectorService).open();
 
   // Read once at startup.
   enabled: () => inject(AuthService).isSupportStaff()
@@ -2119,30 +2119,30 @@ each marked with `↪` and the fragment's name.
 
 #### Configuration
 
-| Option                  | Default                             | Meaning                                                                                                                                    |
-| ----------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `enabled`               | `true`                              | `false`, or a function read once at startup, turns the popup off — shortcut and `open()` alike                                             |
-| `shortcuts`             | `UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                                                          |
-| `maxEventsPerSection`   | `500`                               | Events kept per section; the oldest are dropped, and the count of dropped ones is shown                                                    |
-| `maxPayloadCharsInView` | `262144` (256 × 1024)               | A payload whose JSON is longer is shown truncated to its first `maxPayloadCharsInView` characters, at most 65,536; downloads stay complete |
+| Option                  | Default                           | Meaning                                                                                                                                    |
+| ----------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `enabled`               | `true`                            | `false`, or a function read once at startup, turns the popup off — shortcut and `open()` alike                                             |
+| `shortcuts`             | `UWT_DEFAULT_INSPECTOR_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                                                          |
+| `maxEventsPerSection`   | `500`                             | Events kept per section; the oldest are dropped, and the count of dropped ones is shown                                                    |
+| `maxPayloadCharsInView` | `262144` (256 × 1024)             | A payload whose JSON is longer is shown truncated to its first `maxPayloadCharsInView` characters, at most 65,536; downloads stay complete |
 
 Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
 limit protects rendering, which costs by the length of the text. A cut never
 splits a surrogate pair.
 
-A shortcut is a `UwtDiagnosticsShortcut` — `{ code, ctrl?, alt?, shift?,
+A shortcut is a `UwtInspectorShortcut` — `{ code, ctrl?, alt?, shift?,
 meta?, label? }`, where `code` is a `KeyboardEvent.code` such as `'Digit8'`
 or `'KeyD'`, and an omitted modifier must be up. Spread
-`UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS` to add one rather than replace them.
+`UWT_DEFAULT_INSPECTOR_SHORTCUTS` to add one rather than replace them.
 
-`UwtTelemetryDiagnosticsService` opens the popup from code: `open()`,
+`UwtEventInspectorService` opens the popup from code: `open()`,
 `close()`, `toggle()`, and an `isOpen` signal.
 
-A download is a `UwtDiagnosticsExport`:
+A download is a `UwtInspectorExport`:
 
 ```ts
-interface UwtDiagnosticsExport {
-  format: 'ngx-ui-watchtower-diagnostics';
+interface UwtInspectorExport {
+  format: 'ngx-ui-watchtower-event-inspector';
   formatVersion: 1;
   section: 'bi' | 'scenario' | 'logging';
   exportedAt: string;
@@ -2155,7 +2155,7 @@ interface UwtDiagnosticsExport {
   };
   session: { sessionId?: string; userId?: string };
   userAgent: string;
-  activeFilters: UwtDiagnosticsFilterState; // recorded, not applied
+  activeFilters: UwtInspectorFilterState; // recorded, not applied
   count: { captured: number; droppedOldest: number };
   events: UwtTelemetryObservedEvent[]; // oldest first
 }
@@ -2375,7 +2375,7 @@ error's name instead (`[cart] TypeError`).
 | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `provideUwtTelemetryRumSink()`       | Builds a second AWS client — one visitor becomes two sessions. Listed next to `'broadcast'`, it is a second destination, so bootstrap fails                                                 |
 | `UWT_RUM_CREDENTIALS_PROVIDER`       | Nothing in a fragment needs AWS credentials                                                                                                                                                 |
-| `UWT_LOG_API_PROVIDER`               | `'broadcast'` mode already binds it to the forwarding provider. One bound after it wins, and the fragment ships its own logs — the shell, and its diagnostics popup, never see them         |
+| `UWT_LOG_API_PROVIDER`               | `'broadcast'` mode already binds it to the forwarding provider. One bound after it wins, and the fragment ships its own logs — the shell, and its Event Inspector, never see them           |
 | `provideUwtTelemetryBroadcastHost()` | A host receives its own realm's messages too, so beside the forwarding sink it would forward them again, forever. It detects this, warns (`... cannot also host it ...`) and stays inactive |
 
 #### A realm that both forwards and hosts
@@ -2448,7 +2448,7 @@ With `mirrorErrorsToRum`, each error-level log line leaves a fragment as two
 messages — the record for the log provider, then its mirrored error for the
 sink — with no id in common. Each destination still receives it once: the
 log backend gets the record, RUM gets the error. The host links them for its
-monitor anyway, so the shell's diagnostics popup shows the mirror against
+monitor anyway, so the shell's Event Inspector shows the mirror against
 its record as the fragment's own does: an `error` arriving straight after an
 error-level record from the same realm, with the name and message the logger
 mirrors for it, gets that record's sequence as `relatedSequence`. Both are
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 1a8f76d..93804fa 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -352,12 +352,12 @@ localStorage.setItem('debugBI', 'true');
 localStorage.setItem('debugLogger', 'true'); // or 'checkout,cart' for some loggers
 ```
 
-**In the app** — add the diagnostics popup (needs `cps-ui-kit` 21.32+ or 22):
+**In the app** — add the Event Inspector (needs `cps-ui-kit` 21.32+ or 22):
 
 ```ts
-import { provideUwtTelemetryDiagnostics } from '@absaoss-cps/ngx-ui-watchtower/diagnostics';
+import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 
-providers: [provideUwtTelemetryDiagnostics()];
+providers: [provideUwtEventInspector()];
 ```
 
 Open it with **⇧⌥⌘8** on macOS or **Ctrl+Alt+Shift+8** on Windows and Linux.
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts b/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts
deleted file mode 100644
index ac293ba..0000000
--- a/projects/ngx-ui-watchtower/diagnostics/src/public-api.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Public API Surface of ngx-ui-watchtower/diagnostics
- *
- * An in-app popup showing, live, every event this app hands to its
- * telemetry destinations. Needs cps-ui-kit.
- */
-
-export {
-  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
-  UwtDiagnosticsExport,
-  UwtDiagnosticsFieldFilter,
-  UwtDiagnosticsFilterOperator,
-  UwtDiagnosticsFilterState,
-  UwtDiagnosticsSectionId,
-  UwtDiagnosticsShortcut,
-  UwtTelemetryDiagnosticsConfig
-} from './lib/uwt-diagnostics.models/uwt-diagnostics.models';
-export { UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS } from './lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
-export { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from './lib/uwt-diagnostics-store/uwt-diagnostics-store';
-export { provideUwtTelemetryDiagnostics } from './lib/uwt-diagnostics.providers/uwt-diagnostics.providers';
-export { UwtTelemetryDiagnosticsService } from './lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service';
diff --git a/projects/ngx-ui-watchtower/diagnostics/ng-package.json b/projects/ngx-ui-watchtower/event-inspector/ng-package.json
similarity index 100%
rename from projects/ngx-ui-watchtower/diagnostics/ng-package.json
rename to projects/ngx-ui-watchtower/event-inspector/ng-package.json
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
similarity index 84%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index d2c795f..ce83904 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -3,11 +3,11 @@ import { TestBed } from '@angular/core/testing';
 import { Subject } from 'rxjs';
 import { CpsDialogService } from 'cps-ui-kit';
 import {
-  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
-  UwtTelemetryDiagnosticsConfig
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
-import { UwtDiagnosticsDialogComponent } from '../uwt-diagnostics-dialog/uwt-diagnostics-dialog.component';
-import { UwtTelemetryDiagnosticsService } from './uwt-telemetry-diagnostics.service';
+  UWT_EVENT_INSPECTOR_CONFIG,
+  UwtEventInspectorConfig
+} from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorDialogComponent } from '../uwt-inspector-dialog/uwt-inspector-dialog.component';
+import { UwtEventInspectorService } from './uwt-event-inspector.service';
 
 /** Stands in for CpsDialogService, recording what was opened. */
 class FakeDialogs {
@@ -52,23 +52,23 @@ function press(init: KeyInit = SHORTCUT): KeyboardEvent {
   return event;
 }
 
-describe('UwtTelemetryDiagnosticsService', () => {
+describe('UwtEventInspectorService', () => {
   let dialogs: FakeDialogs;
 
   function create(
-    config: Partial<UwtTelemetryDiagnosticsConfig> = {},
+    config: Partial<UwtEventInspectorConfig> = {},
     platform = 'browser'
-  ): UwtTelemetryDiagnosticsService {
+  ): UwtEventInspectorService {
     TestBed.resetTestingModule();
     dialogs = new FakeDialogs();
     TestBed.configureTestingModule({
       providers: [
         { provide: CpsDialogService, useValue: dialogs },
         { provide: PLATFORM_ID, useValue: platform },
-        { provide: UWT_TELEMETRY_DIAGNOSTICS_CONFIG, useValue: config }
+        { provide: UWT_EVENT_INSPECTOR_CONFIG, useValue: config }
       ]
     });
-    return TestBed.inject(UwtTelemetryDiagnosticsService);
+    return TestBed.inject(UwtEventInspectorService);
   }
 
   afterEach(() => {
@@ -82,14 +82,14 @@ describe('UwtTelemetryDiagnosticsService', () => {
     const event = press();
 
     expect(dialogs.opened).toHaveLength(1);
-    expect(dialogs.opened[0].component).toBe(UwtDiagnosticsDialogComponent);
+    expect(dialogs.opened[0].component).toBe(UwtInspectorDialogComponent);
     expect(dialogs.opened[0].config).toMatchObject({
       modal: false,
-      ariaLabel: 'Telemetry diagnostics',
+      ariaLabel: 'Event Inspector',
       closeOnEscape: true
     });
     expect(event.defaultPrevented).toBe(true);
-    expect(TestBed.inject(UwtTelemetryDiagnosticsService).isOpen()).toBe(true);
+    expect(TestBed.inject(UwtEventInspectorService).isOpen()).toBe(true);
   });
 
   it('should also open on the macOS shortcut', () => {
@@ -120,7 +120,7 @@ describe('UwtTelemetryDiagnosticsService', () => {
     dialogs.containsFocus = true;
     press();
     expect(dialogs.close).toHaveBeenCalledTimes(1);
-    expect(TestBed.inject(UwtTelemetryDiagnosticsService).isOpen()).toBe(false);
+    expect(TestBed.inject(UwtEventInspectorService).isOpen()).toBe(false);
   });
 
   it('should open fresh after the previous popup was destroyed', () => {
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
similarity index 73%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index a10c911..c3495b5 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -9,23 +9,23 @@ import {
 } from '@angular/core';
 import { CpsDialogRef, CpsDialogService } from 'cps-ui-kit';
 import {
-  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
-  UwtTelemetryDiagnosticsConfig
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
-import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+  UWT_EVENT_INSPECTOR_CONFIG,
+  UwtEventInspectorConfig
+} from '../uwt-inspector.models/uwt-inspector.models';
+import { UWT_DEFAULT_INSPECTOR_CONFIG } from '../uwt-inspector-store/uwt-inspector-store';
 import {
-  UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   uwtMatchesShortcut
-} from '../uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
-import { UwtDiagnosticsDialogComponent } from '../uwt-diagnostics-dialog/uwt-diagnostics-dialog.component';
+} from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
+import { UwtInspectorDialogComponent } from '../uwt-inspector-dialog/uwt-inspector-dialog.component';
 import {
   uwtSafe,
   uwtSafeVoid
-} from '../uwt-diagnostics-internal.util/uwt-diagnostics-internal.util';
+} from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
 
 /**
- * Opens and closes the telemetry diagnostics popup, and listens for its
- * keyboard shortcut once {@link provideUwtTelemetryDiagnostics} installs it.
+ * Opens and closes the Event Inspector, and listens for its
+ * keyboard shortcut once {@link provideUwtEventInspector} installs it.
  *
  * The popup is non-modal: the application stays usable while events
  * arrive. With the popup open, the shortcut returns focus to it from the
@@ -34,22 +34,22 @@ import {
  * @example
  * ```typescript
  * // From an app's own "Support" menu, when the shortcut is disabled:
- * inject(UwtTelemetryDiagnosticsService).open();
+ * inject(UwtEventInspectorService).open();
  * ```
  *
  * @group Services
  */
 @Injectable({ providedIn: 'root' })
-export class UwtTelemetryDiagnosticsService {
+export class UwtEventInspectorService {
   private readonly dialogs = inject(CpsDialogService);
   private readonly document = inject(DOCUMENT);
   private readonly zone = inject(NgZone);
   private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly destroyRef = inject(DestroyRef);
-  private readonly config: UwtTelemetryDiagnosticsConfig = {
-    ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
-    shortcuts: UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
-    ...inject(UWT_TELEMETRY_DIAGNOSTICS_CONFIG, { optional: true })
+  private readonly config: UwtEventInspectorConfig = {
+    ...UWT_DEFAULT_INSPECTOR_CONFIG,
+    shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
+    ...inject(UWT_EVENT_INSPECTOR_CONFIG, { optional: true })
   };
 
   private readonly enabled = uwtSafe(
@@ -61,7 +61,7 @@ export class UwtTelemetryDiagnosticsService {
     false
   );
 
-  private ref?: CpsDialogRef<UwtDiagnosticsDialogComponent>;
+  private ref?: CpsDialogRef<UwtInspectorDialogComponent>;
   private installed = false;
 
   /** Whether the popup is currently open. */
@@ -69,7 +69,7 @@ export class UwtTelemetryDiagnosticsService {
 
   /**
    * Starts listening for the shortcut. Called by
-   * {@link provideUwtTelemetryDiagnostics}; does nothing on the server,
+   * {@link provideUwtEventInspector}; does nothing on the server,
    * when disabled, with no shortcuts, or when already listening.
    */
   install(): void {
@@ -113,10 +113,11 @@ export class UwtTelemetryDiagnosticsService {
       return;
     }
     uwtSafeVoid('open', () => {
-      const ref: CpsDialogRef<UwtDiagnosticsDialogComponent> =
-        this.dialogs.open(UwtDiagnosticsDialogComponent, {
-          headerTitle: 'Telemetry diagnostics',
-          ariaLabel: 'Telemetry diagnostics',
+      const ref: CpsDialogRef<UwtInspectorDialogComponent> = this.dialogs.open(
+        UwtInspectorDialogComponent,
+        {
+          headerTitle: 'Event Inspector',
+          ariaLabel: 'Event Inspector',
           modal: false,
           draggable: true,
           resizable: true,
@@ -130,8 +131,9 @@ export class UwtTelemetryDiagnosticsService {
           width: 'clamp(min(40rem, 96vw), 50vw, 64rem)',
           height: '88vh',
           minWidth: 'min(22rem, 96vw)',
-          autoFocus: '.uwt-diagnostics-search input'
-        });
+          autoFocus: '.uwt-inspector-search input'
+        }
+      );
       this.ref = ref;
       this.isOpen.set(true);
       ref.onDestroy.subscribe(() => {
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
similarity index 76%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
index f8c839a..ff8a9f7 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
@@ -1,14 +1,14 @@
-<div class="uwt-diagnostics-dialog">
-  <div class="uwt-diagnostics-dialog__toolbar">
-    <p class="uwt-diagnostics-dialog__status">
+<div class="uwt-inspector-dialog">
+  <div class="uwt-inspector-dialog__toolbar">
+    <p class="uwt-inspector-dialog__status">
       <span
-        class="uwt-diagnostics-dialog__dot"
-        [class.uwt-diagnostics-dialog__dot--paused]="store.paused()"
+        class="uwt-inspector-dialog__dot"
+        [class.uwt-inspector-dialog__dot--paused]="store.paused()"
         aria-hidden="true"></span>
       {{ store.paused() ? 'Paused' : 'Capturing' }} since {{ since() }} ·
       {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
     </p>
-    <div class="uwt-diagnostics-dialog__actions">
+    <div class="uwt-inspector-dialog__actions">
       <cps-switch
         label="Pause live updates"
         [value]="store.paused()"
@@ -26,7 +26,7 @@
   </div>
 
   @if (store.paused() && store.newWhilePaused() > 0) {
-    <div class="uwt-diagnostics-dialog__paused" role="status">
+    <div class="uwt-inspector-dialog__paused" role="status">
       <span
         >{{ store.newWhilePaused() }} new event{{
           store.newWhilePaused() === 1 ? '' : 's'
@@ -43,22 +43,22 @@
   }
 
   @if (store.total() === 0 && !store.paused()) {
-    <p class="uwt-diagnostics-dialog__hint">
+    <p class="uwt-inspector-dialog__hint">
       Capturing from now. Use the app to generate events; they appear here as
       they are sent.
     </p>
   }
 
-  <div class="uwt-diagnostics-dialog__sections">
+  <div class="uwt-inspector-dialog__sections">
     @for (section of sections; track section) {
-      <uwt-diagnostics-section
+      <uwt-inspector-section
         [section]="section"
         [maxPayloadChars]="maxPayloadChars">
-      </uwt-diagnostics-section>
+      </uwt-inspector-section>
     }
   </div>
 
-  <footer class="uwt-diagnostics-dialog__footer">
+  <footer class="uwt-inspector-dialog__footer">
     <p>
       Shows what this app hands to its telemetry destinations, after redaction.
       A destination can still drop an event, for example when RUM samples a
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
similarity index 77%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
index 9079222..045b138 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
@@ -3,13 +3,13 @@
   color: var(--cps-text-primary);
 }
 
-.uwt-diagnostics-dialog {
+.uwt-inspector-dialog {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-.uwt-diagnostics-dialog__toolbar {
+.uwt-inspector-dialog__toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -17,7 +17,7 @@
   gap: 0.5rem 1rem;
 }
 
-.uwt-diagnostics-dialog__status {
+.uwt-inspector-dialog__status {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -27,12 +27,12 @@
   font-variant-numeric: tabular-nums;
 }
 
-.uwt-diagnostics-dialog__dot {
+.uwt-inspector-dialog__dot {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: var(--cps-radius-full, 50%);
   background: var(--cps-state-success);
-  animation: uwt-diagnostics-pulse 1.6s ease-in-out infinite;
+  animation: uwt-inspector-pulse 1.6s ease-in-out infinite;
 
   &--paused {
     background: var(--cps-state-warn);
@@ -40,26 +40,26 @@
   }
 }
 
-@keyframes uwt-diagnostics-pulse {
+@keyframes uwt-inspector-pulse {
   50% {
     opacity: 0.35;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .uwt-diagnostics-dialog__dot {
+  .uwt-inspector-dialog__dot {
     animation: none;
   }
 }
 
-.uwt-diagnostics-dialog__actions {
+.uwt-inspector-dialog__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
 }
 
-.uwt-diagnostics-dialog__paused {
+.uwt-inspector-dialog__paused {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -70,19 +70,19 @@
   font-size: 0.8125rem;
 }
 
-.uwt-diagnostics-dialog__hint {
+.uwt-inspector-dialog__hint {
   margin: 0;
   font-size: 0.875rem;
   color: var(--cps-text-secondary);
 }
 
-.uwt-diagnostics-dialog__sections {
+.uwt-inspector-dialog__sections {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.uwt-diagnostics-dialog__footer {
+.uwt-inspector-dialog__footer {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
similarity index 91%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
index 113b2f7..6addbf5 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
@@ -6,12 +6,12 @@ import {
   UwtTelemetryPublishInput
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CPS_LIVE_ANNOUNCER_SERVICE } from 'cps-ui-kit';
-import * as exportUtil from '../uwt-diagnostics-export/uwt-diagnostics-export';
+import * as exportUtil from '../uwt-inspector-export/uwt-inspector-export';
 import {
-  UWT_DIAGNOSTICS_FLUSH_MS,
-  UwtDiagnosticsStore
-} from '../uwt-diagnostics-store/uwt-diagnostics-store';
-import { UwtDiagnosticsDialogComponent } from './uwt-diagnostics-dialog.component';
+  UWT_INSPECTOR_FLUSH_MS,
+  UwtInspectorStore
+} from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorDialogComponent } from './uwt-inspector-dialog.component';
 
 const bi = (name: string, theme = 'dark'): UwtTelemetryPublishInput => ({
   kind: 'bi',
@@ -59,8 +59,8 @@ const warn: UwtTelemetryPublishInput = {
   origin: { forwarded: false }
 };
 
-describe('UwtDiagnosticsDialogComponent', () => {
-  let fixture: ComponentFixture<UwtDiagnosticsDialogComponent>;
+describe('UwtInspectorDialogComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorDialogComponent>;
   let monitor: UwtTelemetryMonitor;
   let announce: jest.Mock;
 
@@ -87,10 +87,10 @@ describe('UwtDiagnosticsDialogComponent', () => {
       el().querySelectorAll('[data-testid="cps-expansion-panel-title"]')
     ).map((t) => t.textContent?.trim());
   const bodyRows = () =>
-    el().querySelectorAll('td.uwt-diagnostics-section__time').length;
+    el().querySelectorAll('td.uwt-inspector-section__time').length;
 
   function settle(): void {
-    jest.advanceTimersByTime(UWT_DIAGNOSTICS_FLUSH_MS);
+    jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
     fixture.detectChanges();
   }
 
@@ -98,7 +98,7 @@ describe('UwtDiagnosticsDialogComponent', () => {
     jest.useFakeTimers();
     announce = jest.fn();
     await TestBed.configureTestingModule({
-      imports: [UwtDiagnosticsDialogComponent, NoopAnimationsModule],
+      imports: [UwtInspectorDialogComponent, NoopAnimationsModule],
       providers: [
         {
           provide: UWT_TELEMETRY_IDENTITY,
@@ -115,7 +115,7 @@ describe('UwtDiagnosticsDialogComponent', () => {
       ]
     }).compileComponents();
     monitor = TestBed.inject(UwtTelemetryMonitor);
-    fixture = TestBed.createComponent(UwtDiagnosticsDialogComponent);
+    fixture = TestBed.createComponent(UwtInspectorDialogComponent);
     fixture.detectChanges();
   });
 
@@ -155,7 +155,7 @@ describe('UwtDiagnosticsDialogComponent', () => {
     monitor.publish(bi('a'));
     settle();
     expect(
-      el().querySelector('td.uwt-diagnostics-section__time cps-chip')
+      el().querySelector('td.uwt-inspector-section__time cps-chip')
     ).not.toBeNull();
   });
 
@@ -199,7 +199,7 @@ describe('UwtDiagnosticsDialogComponent', () => {
 
   it('should give each section its own search field', () => {
     const labels = Array.from(
-      el().querySelectorAll('.uwt-diagnostics-search input')
+      el().querySelectorAll('.uwt-inspector-search input')
     ).map((i) => i.getAttribute('aria-label'));
     expect(labels).toEqual([
       'Search BI telemetry events',
@@ -252,7 +252,7 @@ describe('UwtDiagnosticsDialogComponent', () => {
     settle();
     // A BI filter hiding one event must not remove it from BI's download.
     fixture.debugElement.injector
-      .get(UwtDiagnosticsStore)
+      .get(UwtInspectorStore)
       .setText('bi', 'nothing matches this');
     fixture.detectChanges();
 
@@ -261,11 +261,11 @@ describe('UwtDiagnosticsDialogComponent', () => {
     expect(download).toHaveBeenCalledTimes(1);
     const [, filename, json] = download.mock.calls[0];
     expect(filename).toMatch(
-      /^ngx-ui-watchtower-diagnostics-app-bi-\d{8}-\d{6}\.json$/
+      /^ngx-ui-watchtower-events-app-bi-\d{8}-\d{6}\.json$/
     );
     const doc = JSON.parse(json);
     expect(doc).toMatchObject({
-      format: 'ngx-ui-watchtower-diagnostics',
+      format: 'ngx-ui-watchtower-event-inspector',
       section: 'bi',
       app: { application: 'app' },
       count: { captured: 2, droppedOldest: 0 },
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
similarity index 67%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
index 7d8a240..146ad57 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-dialog/uwt-diagnostics-dialog.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
@@ -12,52 +12,52 @@ import {
   CpsButtonComponent,
   CpsSwitchComponent
 } from 'cps-ui-kit';
-import { UWT_TELEMETRY_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UWT_EVENT_INSPECTOR_CONFIG } from '../uwt-inspector.models/uwt-inspector.models';
 import {
-  UWT_DEFAULT_DIAGNOSTICS_CONFIG,
-  UWT_DIAGNOSTICS_SECTIONS,
-  UwtDiagnosticsStore
-} from '../uwt-diagnostics-store/uwt-diagnostics-store';
-import { UwtDiagnosticsSectionComponent } from '../uwt-diagnostics-section/uwt-diagnostics-section.component';
+  UWT_DEFAULT_INSPECTOR_CONFIG,
+  UWT_INSPECTOR_SECTIONS,
+  UwtInspectorStore
+} from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorSectionComponent } from '../uwt-inspector-section/uwt-inspector-section.component';
 import {
-  UWT_DIAGNOSTICS_SECTION_NOUN,
-  UwtDiagnosticsExporter
-} from '../uwt-diagnostics-export/uwt-diagnostics-exporter';
-import { uwtDiagnosticsTime } from '../uwt-diagnostics-section/uwt-diagnostics-columns';
+  UWT_INSPECTOR_SECTION_NOUN,
+  UwtInspectorExporter
+} from '../uwt-inspector-export/uwt-inspector-exporter';
+import { uwtInspectorTime } from '../uwt-inspector-section/uwt-inspector-columns';
 import {
-  UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   uwtIsApplePlatform,
   uwtShortcutLabel
-} from '../uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
+} from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
 
 /** Screen readers hear about new events at most this often, in ms. */
 const ANNOUNCE_EVERY_MS = 10_000;
 
 /**
- * The diagnostics popup's content, opened by
- * {@link UwtTelemetryDiagnosticsService} inside a non-modal cps-dialog.
+ * The Event Inspector's content, opened by
+ * {@link UwtEventInspectorService} inside a non-modal cps-dialog.
  * Capturing is controlled here — pause and clear apply to everything —
  * while each section filters, downloads and copies its own events.
  *
- * Owns its {@link UwtDiagnosticsStore}, so the captured history lives
+ * Owns its {@link UwtInspectorStore}, so the captured history lives
  * exactly as long as this window: it starts empty and is discarded on
  * close. Uses no telemetry service itself, so opening or using it never
  * produces events of its own.
  */
 @Component({
-  selector: 'uwt-diagnostics-dialog',
+  selector: 'uwt-inspector-dialog',
   imports: [
     CpsButtonComponent,
     CpsSwitchComponent,
-    UwtDiagnosticsSectionComponent
+    UwtInspectorSectionComponent
   ],
-  providers: [UwtDiagnosticsStore, UwtDiagnosticsExporter],
+  providers: [UwtInspectorStore, UwtInspectorExporter],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './uwt-diagnostics-dialog.component.html',
-  styleUrl: './uwt-diagnostics-dialog.component.scss'
+  templateUrl: './uwt-inspector-dialog.component.html',
+  styleUrl: './uwt-inspector-dialog.component.scss'
 })
-export class UwtDiagnosticsDialogComponent {
-  protected readonly store = inject(UwtDiagnosticsStore);
+export class UwtInspectorDialogComponent {
+  protected readonly store = inject(UwtInspectorStore);
 
   private readonly document = inject(DOCUMENT);
   private readonly host: ElementRef<HTMLElement> = inject(ElementRef);
@@ -66,16 +66,16 @@ export class UwtDiagnosticsDialogComponent {
   });
 
   private readonly config = {
-    ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
-    shortcuts: UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
-    ...inject(UWT_TELEMETRY_DIAGNOSTICS_CONFIG, { optional: true })
+    ...UWT_DEFAULT_INSPECTOR_CONFIG,
+    shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
+    ...inject(UWT_EVENT_INSPECTOR_CONFIG, { optional: true })
   };
 
-  protected readonly sections = UWT_DIAGNOSTICS_SECTIONS;
+  protected readonly sections = UWT_INSPECTOR_SECTIONS;
   protected readonly maxPayloadChars = this.config.maxPayloadCharsInView;
 
   protected readonly since = computed(() =>
-    uwtDiagnosticsTime(this.store.startedAt()).slice(0, 8)
+    uwtInspectorTime(this.store.startedAt()).slice(0, 8)
   );
 
   protected readonly shortcut = uwtShortcutLabel(
@@ -99,7 +99,7 @@ export class UwtDiagnosticsDialogComponent {
   /** Moves focus to the search field. */
   focusSearch(): void {
     const input = this.host.nativeElement.querySelector<HTMLInputElement>(
-      '.uwt-diagnostics-search input'
+      '.uwt-inspector-search input'
     );
     (input ?? this.dialogElement())?.focus();
   }
@@ -125,7 +125,7 @@ export class UwtDiagnosticsDialogComponent {
       return;
     }
     const received = this.store.received();
-    const parts = UWT_DIAGNOSTICS_SECTIONS.map((id) => ({
+    const parts = UWT_INSPECTOR_SECTIONS.map((id) => ({
       id,
       n: received[id] - this.lastAnnounced[id]
     })).filter((p) => p.n > 0);
@@ -135,7 +135,7 @@ export class UwtDiagnosticsDialogComponent {
     }
     const total = parts.reduce((sum, p) => sum + p.n, 0);
     const detail = parts
-      .map((p) => `${p.n} ${UWT_DIAGNOSTICS_SECTION_NOUN[p.id]}`)
+      .map((p) => `${p.n} ${UWT_INSPECTOR_SECTION_NOUN[p.id]}`)
       .join(', ');
     this.announce(`${total} new event${total === 1 ? '' : 's'}: ${detail}.`);
   }
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts
similarity index 83%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts
index 8fe39b2..1b1da7b 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts
@@ -1,10 +1,10 @@
 import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  uwtBuildDiagnosticsExport,
-  uwtDiagnosticsFilename,
+  uwtBuildInspectorExport,
+  uwtInspectorFilename,
   uwtDownloadJson,
   uwtSafeStringify
-} from './uwt-diagnostics-export';
+} from './uwt-inspector-export';
 
 function bi(sequence: number): UwtTelemetryObservedEvent {
   return {
@@ -45,9 +45,9 @@ const context = {
   now: new Date('2026-01-01T10:05:00.000Z')
 };
 
-describe('uwtBuildDiagnosticsExport', () => {
+describe('uwtBuildInspectorExport', () => {
   it("should contain every one of the section's events in hand-off order, whatever the filters", () => {
-    const doc = uwtBuildDiagnosticsExport([bi(3), bi(1), bi(2)], context);
+    const doc = uwtBuildInspectorExport([bi(3), bi(1), bi(2)], context);
 
     expect(doc.events.map((e) => e.sequence)).toEqual([1, 2, 3]);
     // Filters are recorded for context, not applied.
@@ -55,10 +55,10 @@ describe('uwtBuildDiagnosticsExport', () => {
   });
 
   it('should carry the format, capture window and app identity', () => {
-    const doc = uwtBuildDiagnosticsExport([bi(1)], context);
+    const doc = uwtBuildInspectorExport([bi(1)], context);
 
     expect(doc).toMatchObject({
-      format: 'ngx-ui-watchtower-diagnostics',
+      format: 'ngx-ui-watchtower-event-inspector',
       formatVersion: 1,
       section: 'bi',
       exportedAt: '2026-01-01T10:05:00.000Z',
@@ -74,10 +74,7 @@ describe('uwtBuildDiagnosticsExport', () => {
   });
 
   it('should round-trip as valid JSON with nested payloads intact', () => {
-    const json = uwtSafeStringify(
-      uwtBuildDiagnosticsExport([bi(1)], context),
-      2
-    );
+    const json = uwtSafeStringify(uwtBuildInspectorExport([bi(1)], context), 2);
     const parsed = JSON.parse(json);
     expect(parsed.events[0].payload.metadata.nested).toBe('kept');
   });
@@ -106,17 +103,11 @@ describe('uwtSafeStringify', () => {
   });
 });
 
-describe('uwtDiagnosticsFilename', () => {
+describe('uwtInspectorFilename', () => {
   it('should name the app, section and time, and nothing identifying', () => {
     expect(
-      uwtDiagnosticsFilename(
-        'my app/x',
-        'logging',
-        new Date(2026, 0, 2, 3, 4, 5)
-      )
-    ).toBe(
-      'ngx-ui-watchtower-diagnostics-my-app-x-logging-20260102-030405.json'
-    );
+      uwtInspectorFilename('my app/x', 'logging', new Date(2026, 0, 2, 3, 4, 5))
+    ).toBe('ngx-ui-watchtower-events-my-app-x-logging-20260102-030405.json');
   });
 });
 
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts
similarity index 78%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts
index 97baa7b..5981020 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-export.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts
@@ -1,20 +1,20 @@
 import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  UwtDiagnosticsExport,
-  UwtDiagnosticsFilterState,
-  UwtDiagnosticsSectionId
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+  UwtInspectorExport,
+  UwtInspectorFilterState,
+  UwtInspectorSectionId
+} from '../uwt-inspector.models/uwt-inspector.models';
 
 /** What the export needs to know beyond the events themselves. */
-export interface UwtDiagnosticsExportContext {
-  section: UwtDiagnosticsSectionId;
+export interface UwtInspectorExportContext {
+  section: UwtInspectorSectionId;
   startedAt: string;
   paused: boolean;
-  app: UwtDiagnosticsExport['app'];
-  session: UwtDiagnosticsExport['session'];
+  app: UwtInspectorExport['app'];
+  session: UwtInspectorExport['session'];
   userAgent: string;
-  activeFilters: UwtDiagnosticsFilterState;
-  count: UwtDiagnosticsExport['count'];
+  activeFilters: UwtInspectorFilterState;
+  count: UwtInspectorExport['count'];
   now?: Date;
 }
 
@@ -22,13 +22,13 @@ export interface UwtDiagnosticsExportContext {
  * One section's downloadable document: every event captured in it, in the
  * order they were handed over, regardless of the filters on screen.
  */
-export function uwtBuildDiagnosticsExport(
+export function uwtBuildInspectorExport(
   events: readonly UwtTelemetryObservedEvent[],
-  context: UwtDiagnosticsExportContext
-): UwtDiagnosticsExport {
+  context: UwtInspectorExportContext
+): UwtInspectorExport {
   const now = (context.now ?? new Date()).toISOString();
   return {
-    format: 'ngx-ui-watchtower-diagnostics',
+    format: 'ngx-ui-watchtower-event-inspector',
     formatVersion: 1,
     section: context.section,
     exportedAt: now,
@@ -76,12 +76,12 @@ export function uwtSafeStringify(value: unknown, indent?: number): string {
 }
 
 /**
- * `ngx-ui-watchtower-diagnostics-<application>-<section>-<yyyyMMdd-HHmmss>.json`
+ * `ngx-ui-watchtower-events-<application>-<section>-<yyyyMMdd-HHmmss>.json`
  * — no session or user id, since the name ends up in folders and tickets.
  */
-export function uwtDiagnosticsFilename(
+export function uwtInspectorFilename(
   application: string,
-  section: UwtDiagnosticsSectionId,
+  section: UwtInspectorSectionId,
   at: Date
 ): string {
   const pad = (n: number) => String(n).padStart(2, '0');
@@ -89,7 +89,7 @@ export function uwtDiagnosticsFilename(
     `${at.getFullYear()}${pad(at.getMonth() + 1)}${pad(at.getDate())}-` +
     `${pad(at.getHours())}${pad(at.getMinutes())}${pad(at.getSeconds())}`;
   const app = application.replace(/[^a-z0-9._-]+/gi, '-') || 'app';
-  return `ngx-ui-watchtower-diagnostics-${app}-${section}-${stamp}.json`;
+  return `ngx-ui-watchtower-events-${app}-${section}-${stamp}.json`;
 }
 
 /**
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
similarity index 76%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
index b8f6a0e..0867b31 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-export/uwt-diagnostics-exporter.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
@@ -6,28 +6,26 @@ import {
   UwtTelemetrySink
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CPS_LIVE_ANNOUNCER_SERVICE, CpsNotificationService } from 'cps-ui-kit';
-import { UwtDiagnosticsSectionId } from '../uwt-diagnostics.models/uwt-diagnostics.models';
-import { UwtDiagnosticsStore } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { UwtInspectorSectionId } from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
 import {
-  uwtBuildDiagnosticsExport,
-  uwtDiagnosticsFilename,
+  uwtBuildInspectorExport,
+  uwtInspectorFilename,
   uwtDownloadJson,
   uwtSafeStringify
-} from './uwt-diagnostics-export';
+} from './uwt-inspector-export';
 
 /** What each section calls its events, when telling people about them. */
-export const UWT_DIAGNOSTICS_SECTION_NOUN: Record<
-  UwtDiagnosticsSectionId,
-  string
-> = { bi: 'BI', scenario: 'scenario', logging: 'log' };
+export const UWT_INSPECTOR_SECTION_NOUN: Record<UwtInspectorSectionId, string> =
+  { bi: 'BI', scenario: 'scenario', logging: 'log' };
 
 /**
  * Downloads or copies one section's captured events as JSON. Provided by
- * the popup, beside its {@link UwtDiagnosticsStore}.
+ * the popup, beside its {@link UwtInspectorStore}.
  */
 @Injectable()
-export class UwtDiagnosticsExporter {
-  private readonly store = inject(UwtDiagnosticsStore);
+export class UwtInspectorExporter {
+  private readonly store = inject(UwtInspectorStore);
   private readonly identity = inject(UWT_TELEMETRY_IDENTITY, {
     optional: true
   });
@@ -43,12 +41,12 @@ export class UwtDiagnosticsExporter {
   });
 
   /** Saves the section's events as a JSON file. */
-  download(section: UwtDiagnosticsSectionId): void {
+  download(section: UwtInspectorSectionId): void {
     try {
       const json = this.json(section);
       uwtDownloadJson(
         this.document,
-        uwtDiagnosticsFilename(
+        uwtInspectorFilename(
           this.identity?.application ?? 'app',
           section,
           new Date()
@@ -57,7 +55,7 @@ export class UwtDiagnosticsExporter {
       );
       this.announce(
         `Downloaded ${this.store.sectionCount(section).captured} ${
-          UWT_DIAGNOSTICS_SECTION_NOUN[section]
+          UWT_INSPECTOR_SECTION_NOUN[section]
         } events.`
       );
     } catch (error) {
@@ -71,11 +69,11 @@ export class UwtDiagnosticsExporter {
    *
    * @returns whether copying worked
    */
-  async copy(section: UwtDiagnosticsSectionId): Promise<boolean> {
+  async copy(section: UwtInspectorSectionId): Promise<boolean> {
     try {
       await navigator.clipboard.writeText(this.json(section));
       this.announce(
-        `${UWT_DIAGNOSTICS_SECTION_NOUN[section]} events copied as JSON.`
+        `${UWT_INSPECTOR_SECTION_NOUN[section]} events copied as JSON.`
       );
       return true;
     } catch (error) {
@@ -85,9 +83,9 @@ export class UwtDiagnosticsExporter {
   }
 
   /** The section's export document, serialized. */
-  json(section: UwtDiagnosticsSectionId): string {
+  json(section: UwtInspectorSectionId): string {
     return uwtSafeStringify(
-      uwtBuildDiagnosticsExport(this.store.sectionEvents(section), {
+      uwtBuildInspectorExport(this.store.sectionEvents(section), {
         section,
         startedAt: this.store.startedAt(),
         paused: this.store.paused(),
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
similarity index 83%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index 2afc31e..effe55b 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -1,7 +1,7 @@
-<div class="uwt-diagnostics-filter-bar">
-  <div class="uwt-diagnostics-filter-bar__row">
+<div class="uwt-inspector-filter-bar">
+  <div class="uwt-inspector-filter-bar__row">
     <cps-input
-      class="uwt-diagnostics-filter-bar__search uwt-diagnostics-search"
+      class="uwt-inspector-filter-bar__search uwt-inspector-search"
       [ariaLabel]="'Search ' + sectionName() + ' events'"
       placeholder="Search all fields"
       prefixIcon="search"
@@ -27,12 +27,12 @@
 
   @if (builderOpen()) {
     <div
-      class="uwt-diagnostics-filter-bar__builder"
+      class="uwt-inspector-filter-bar__builder"
       role="group"
       [attr.aria-label]="'New filter for ' + sectionName()"
       (keydown.enter)="add()">
       <cps-autocomplete
-        class="uwt-diagnostics-filter-bar__path"
+        class="uwt-inspector-filter-bar__path"
         label="Field"
         placeholder="Choose a field"
         [options]="pathOptions()"
@@ -42,7 +42,7 @@
         (valueChanged)="onPath($event)">
       </cps-autocomplete>
       <cps-select
-        class="uwt-diagnostics-filter-bar__operator"
+        class="uwt-inspector-filter-bar__operator"
         label="Condition"
         [options]="operators"
         [returnObject]="false"
@@ -52,7 +52,7 @@
       </cps-select>
       @if (needsValue()) {
         <cps-input
-          class="uwt-diagnostics-filter-bar__value"
+          class="uwt-inspector-filter-bar__value"
           label="Value"
           placeholder="Text to compare"
           [hideDetails]="true"
@@ -70,10 +70,10 @@
   }
 
   @if (chips().length > 0 || anyActive()) {
-    <div class="uwt-diagnostics-filter-bar__active">
-      <span class="uwt-diagnostics-filter-bar__label">Filters:</span>
+    <div class="uwt-inspector-filter-bar__active">
+      <span class="uwt-inspector-filter-bar__label">Filters:</span>
       <ul
-        class="uwt-diagnostics-filter-bar__chips"
+        class="uwt-inspector-filter-bar__chips"
         [attr.aria-label]="'Active filters for ' + sectionName()">
         @for (chip of chips(); track chip.id) {
           <li>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
similarity index 52%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
index 11a4ef0..e085183 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
@@ -2,47 +2,47 @@
   display: block;
 }
 
-.uwt-diagnostics-filter-bar {
+.uwt-inspector-filter-bar {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.uwt-diagnostics-filter-bar__row,
-.uwt-diagnostics-filter-bar__builder,
-.uwt-diagnostics-filter-bar__active {
+.uwt-inspector-filter-bar__row,
+.uwt-inspector-filter-bar__builder,
+.uwt-inspector-filter-bar__active {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 0.5rem;
 }
 
-.uwt-diagnostics-filter-bar__active {
+.uwt-inspector-filter-bar__active {
   align-items: center;
 }
 
-.uwt-diagnostics-filter-bar__search {
+.uwt-inspector-filter-bar__search {
   flex: 1 1 18rem;
 }
 
-.uwt-diagnostics-filter-bar__path {
+.uwt-inspector-filter-bar__path {
   flex: 2 1 14rem;
 }
 
-.uwt-diagnostics-filter-bar__operator {
+.uwt-inspector-filter-bar__operator {
   flex: 1 1 9rem;
 }
 
-.uwt-diagnostics-filter-bar__value {
+.uwt-inspector-filter-bar__value {
   flex: 2 1 12rem;
 }
 
-.uwt-diagnostics-filter-bar__label {
+.uwt-inspector-filter-bar__label {
   font-size: 0.8125rem;
   color: var(--cps-text-secondary);
 }
 
-.uwt-diagnostics-filter-bar__chips {
+.uwt-inspector-filter-bar__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 0.375rem;
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
similarity index 81%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
index ba09957..30e373a 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
@@ -1,11 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { UwtDiagnosticsStore } from '../uwt-diagnostics-store/uwt-diagnostics-store';
-import { UwtDiagnosticsFilterBarComponent } from './uwt-diagnostics-filter-bar.component';
+import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorFilterBarComponent } from './uwt-inspector-filter-bar.component';
 
-describe('UwtDiagnosticsFilterBarComponent', () => {
-  let fixture: ComponentFixture<UwtDiagnosticsFilterBarComponent>;
-  let store: UwtDiagnosticsStore;
+describe('UwtInspectorFilterBarComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorFilterBarComponent>;
+  let store: UwtInspectorStore;
   const bar = () =>
     fixture.componentInstance as unknown as {
       builderOpen: { set(v: boolean): void };
@@ -18,11 +18,11 @@ describe('UwtDiagnosticsFilterBarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [UwtDiagnosticsFilterBarComponent, NoopAnimationsModule],
-      providers: [UwtDiagnosticsStore]
+      imports: [UwtInspectorFilterBarComponent, NoopAnimationsModule],
+      providers: [UwtInspectorStore]
     }).compileComponents();
-    store = TestBed.inject(UwtDiagnosticsStore);
-    fixture = TestBed.createComponent(UwtDiagnosticsFilterBarComponent);
+    store = TestBed.inject(UwtInspectorStore);
+    fixture = TestBed.createComponent(UwtInspectorFilterBarComponent);
     fixture.componentRef.setInput('section', 'logging');
     fixture.componentRef.setInput('sectionName', 'Logging');
     fixture.detectChanges();
@@ -47,7 +47,7 @@ describe('UwtDiagnosticsFilterBarComponent', () => {
     const el = fixture.nativeElement as HTMLElement;
     expect(
       el
-        .querySelector('.uwt-diagnostics-search input')
+        .querySelector('.uwt-inspector-search input')
         ?.getAttribute('aria-label')
     ).toBe('Search Logging events');
   });
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
similarity index 81%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
index 105e967..548608e 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
@@ -16,14 +16,14 @@ import {
   CpsSelectComponent
 } from 'cps-ui-kit';
 import {
-  UwtDiagnosticsFilterOperator,
-  UwtDiagnosticsSectionId
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
-import { UwtDiagnosticsStore } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+  UwtInspectorFilterOperator,
+  UwtInspectorSectionId
+} from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
 import {
   uwtDescribeFilter,
   uwtOperatorNeedsValue
-} from '../uwt-diagnostics-filter/uwt-diagnostics-filter';
+} from '../uwt-inspector-filter/uwt-inspector-filter';
 
 /** Typing settles for this long before filtering runs, in milliseconds. */
 const SEARCH_DEBOUNCE_MS = 150;
@@ -33,7 +33,7 @@ const SEARCH_DEBOUNCE_MS = 150;
  * Each section filters on its own; nothing here affects the others.
  */
 @Component({
-  selector: 'uwt-diagnostics-filter-bar',
+  selector: 'uwt-inspector-filter-bar',
   imports: [
     CpsInputComponent,
     CpsAutocompleteComponent,
@@ -43,14 +43,14 @@ const SEARCH_DEBOUNCE_MS = 150;
     CpsInfoCircleComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './uwt-diagnostics-filter-bar.component.html',
-  styleUrl: './uwt-diagnostics-filter-bar.component.scss'
+  templateUrl: './uwt-inspector-filter-bar.component.html',
+  styleUrl: './uwt-inspector-filter-bar.component.scss'
 })
-export class UwtDiagnosticsFilterBarComponent {
-  protected readonly store = inject(UwtDiagnosticsStore);
+export class UwtInspectorFilterBarComponent {
+  protected readonly store = inject(UwtInspectorStore);
 
   /** The section these filters belong to. */
-  readonly section = input.required<UwtDiagnosticsSectionId>();
+  readonly section = input.required<UwtInspectorSectionId>();
   /** The section's name as people read it, e.g. `BI telemetry`. */
   readonly sectionName = input.required<string>();
 
@@ -60,7 +60,7 @@ export class UwtDiagnosticsFilterBarComponent {
 
   protected readonly operators: {
     label: string;
-    value: UwtDiagnosticsFilterOperator;
+    value: UwtInspectorFilterOperator;
   }[] = [
     { label: 'contains', value: 'contains' },
     { label: 'equals', value: 'equals' },
@@ -71,8 +71,7 @@ export class UwtDiagnosticsFilterBarComponent {
 
   protected readonly builderOpen = signal(false);
   protected readonly path = signal('');
-  protected readonly operator =
-    signal<UwtDiagnosticsFilterOperator>('contains');
+  protected readonly operator = signal<UwtInspectorFilterOperator>('contains');
 
   protected readonly value = signal('');
 
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
similarity index 90%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
index af026f7..59a66b0 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
@@ -1,15 +1,15 @@
 import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  UwtDiagnosticsFieldFilter,
-  UwtDiagnosticsFilterState
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+  UwtInspectorFieldFilter,
+  UwtInspectorFilterState
+} from '../uwt-inspector.models/uwt-inspector.models';
 import {
   uwtDescribeFilter,
-  uwtDiagnosticsSectionOf,
+  uwtInspectorSectionOf,
   uwtFlattenEvent,
   uwtKnownPaths,
   uwtMatchesFilters
-} from './uwt-diagnostics-filter';
+} from './uwt-inspector-filter';
 
 const base = {
   sequence: 7,
@@ -42,8 +42,8 @@ const scenario: UwtTelemetryObservedEvent = {
 
 function state(
   text = '',
-  fields: Partial<UwtDiagnosticsFieldFilter>[] = []
-): UwtDiagnosticsFilterState {
+  fields: Partial<UwtInspectorFieldFilter>[] = []
+): UwtInspectorFilterState {
   return {
     text,
     fields: fields.map((f, i) => ({
@@ -123,8 +123,7 @@ describe('uwtFlattenEvent', () => {
 
 describe('uwtMatchesFilters', () => {
   const fields = uwtFlattenEvent(scenario);
-  const matches = (s: UwtDiagnosticsFilterState) =>
-    uwtMatchesFilters(fields, s);
+  const matches = (s: UwtInspectorFilterState) => uwtMatchesFilters(fields, s);
 
   it('should match everything with no filters', () => {
     expect(matches(state())).toBe(true);
@@ -191,10 +190,10 @@ describe('uwtMatchesFilters', () => {
 
 describe('helpers', () => {
   it('should put each kind in its section', () => {
-    expect(uwtDiagnosticsSectionOf('bi')).toBe('bi');
-    expect(uwtDiagnosticsSectionOf('unknown')).toBe('bi');
-    expect(uwtDiagnosticsSectionOf('scenario-step')).toBe('scenario');
-    expect(uwtDiagnosticsSectionOf('error')).toBe('logging');
+    expect(uwtInspectorSectionOf('bi')).toBe('bi');
+    expect(uwtInspectorSectionOf('unknown')).toBe('bi');
+    expect(uwtInspectorSectionOf('scenario-step')).toBe('scenario');
+    expect(uwtInspectorSectionOf('error')).toBe('logging');
   });
 
   it('should describe a filter as a short sentence', () => {
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
similarity index 86%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
index 3826694..dacebd6 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-filter/uwt-diagnostics-filter.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
@@ -3,12 +3,12 @@ import {
   UwtTelemetryObservedEvent
 } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  UwtDiagnosticsField,
-  UwtDiagnosticsFieldFilter,
-  UwtDiagnosticsFilterOperator,
-  UwtDiagnosticsFilterState,
-  UwtDiagnosticsSectionId
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+  UwtInspectorField,
+  UwtInspectorFieldFilter,
+  UwtInspectorFilterOperator,
+  UwtInspectorFilterState,
+  UwtInspectorSectionId
+} from '../uwt-inspector.models/uwt-inspector.models';
 
 /** Deeper structures are cut off, so a pathological payload stays cheap. */
 const MAX_DEPTH = 12;
@@ -22,9 +22,9 @@ const MAX_VALUE_CHARS = 2000;
  * realm with an unrecognised type is shown with BI, alongside the other
  * custom events.
  */
-export function uwtDiagnosticsSectionOf(
+export function uwtInspectorSectionOf(
   kind: UwtTelemetryEventKind
-): UwtDiagnosticsSectionId {
+): UwtInspectorSectionId {
   switch (kind) {
     case 'scenario':
     case 'scenario-step':
@@ -48,8 +48,8 @@ export function uwtDiagnosticsSectionOf(
  */
 export function uwtFlattenEvent(
   event: UwtTelemetryObservedEvent
-): UwtDiagnosticsField[] {
-  const fields: UwtDiagnosticsField[] = [];
+): UwtInspectorField[] {
+  const fields: UwtInspectorField[] = [];
   const seen = new WeakSet<object>();
 
   const visit = (value: unknown, path: string, depth: number): void => {
@@ -93,7 +93,7 @@ export function uwtFlattenEvent(
   return fields;
 }
 
-function push(fields: UwtDiagnosticsField[], path: string, value: string) {
+function push(fields: UwtInspectorField[], path: string, value: string) {
   fields.push({
     path,
     pattern: path.replace(/\[\d+\]/g, '[]'),
@@ -112,8 +112,8 @@ function push(fields: UwtDiagnosticsField[], path: string, value: string) {
  * - Everything is combined with AND.
  */
 export function uwtMatchesFilters(
-  fields: readonly UwtDiagnosticsField[],
-  filters: UwtDiagnosticsFilterState
+  fields: readonly UwtInspectorField[],
+  filters: UwtInspectorFilterState
 ): boolean {
   const text = filters.text.trim().toLowerCase();
   if (
@@ -130,8 +130,8 @@ export function uwtMatchesFilters(
 }
 
 function matchesField(
-  fields: readonly UwtDiagnosticsField[],
-  filter: UwtDiagnosticsFieldFilter
+  fields: readonly UwtInspectorField[],
+  filter: UwtInspectorFieldFilter
 ): boolean {
   const path = filter.path.trim().toLowerCase();
   const value = filter.value.trim().toLowerCase();
@@ -154,7 +154,7 @@ function matchesField(
   }
 }
 
-const OPERATOR_TEXT: Record<UwtDiagnosticsFilterOperator, string> = {
+const OPERATOR_TEXT: Record<UwtInspectorFilterOperator, string> = {
   contains: 'contains',
   equals: 'equals',
   'not-contains': 'does not contain',
@@ -163,7 +163,7 @@ const OPERATOR_TEXT: Record<UwtDiagnosticsFilterOperator, string> = {
 };
 
 /** A filter as a short sentence, for chips and screen readers. */
-export function uwtDescribeFilter(filter: UwtDiagnosticsFieldFilter): string {
+export function uwtDescribeFilter(filter: UwtInspectorFieldFilter): string {
   const op = OPERATOR_TEXT[filter.operator];
   return filter.operator === 'exists' || filter.operator === 'missing'
     ? `${filter.path} ${op}`
@@ -172,7 +172,7 @@ export function uwtDescribeFilter(filter: UwtDiagnosticsFieldFilter): string {
 
 /** Whether an operator compares against a value. */
 export function uwtOperatorNeedsValue(
-  operator: UwtDiagnosticsFilterOperator
+  operator: UwtInspectorFilterOperator
 ): boolean {
   return operator !== 'exists' && operator !== 'missing';
 }
@@ -182,7 +182,7 @@ export function uwtOperatorNeedsValue(
  * first, then the rest by how often they occur.
  */
 export function uwtKnownPaths(
-  fieldSets: readonly (readonly UwtDiagnosticsField[])[]
+  fieldSets: readonly (readonly UwtInspectorField[])[]
 ): string[] {
   const envelope = [
     'kind',
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-internal.util/uwt-inspector-internal.util.ts
similarity index 93%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-internal.util/uwt-inspector-internal.util.ts
index 141f770..5675854 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-internal.util/uwt-diagnostics-internal.util.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-internal.util/uwt-inspector-internal.util.ts
@@ -46,7 +46,10 @@ function reportSuppressed(operation: string, error: unknown): void {
   }
   try {
     // eslint-disable-next-line no-console
-    console.error(`[ngx-ui-watchtower] diagnostics.${operation} failed`, error);
+    console.error(
+      `[ngx-ui-watchtower] eventInspector.${operation} failed`,
+      error
+    );
   } catch {
     // A patched/throwing console must never escape suppression.
   }
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html
similarity index 82%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html
index 04def8d..a73571b 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html
@@ -1,5 +1,5 @@
-<div class="uwt-diagnostics-json">
-  <div class="uwt-diagnostics-json__actions">
+<div class="uwt-inspector-json">
+  <div class="uwt-inspector-json__actions">
     <cps-button
       type="borderless"
       size="xsmall"
@@ -23,13 +23,13 @@
     }}</span>
   </div>
   @if (truncated()) {
-    <p class="uwt-diagnostics-json__notice">
+    <p class="uwt-inspector-json__notice">
       Large payload: showing the first {{ shownChars() }} characters. The
       download contains all of it.
     </p>
   }
   <pre
-    class="uwt-diagnostics-json__code"
+    class="uwt-inspector-json__code"
     tabindex="0"
     role="region"
     [attr.aria-label]="label()"
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
similarity index 85%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
index 09c41fb..2915dd7 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
@@ -2,24 +2,24 @@
   display: block;
 }
 
-.uwt-diagnostics-json {
+.uwt-inspector-json {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.uwt-diagnostics-json__actions {
+.uwt-inspector-json__actions {
   display: flex;
   justify-content: flex-end;
 }
 
-.uwt-diagnostics-json__notice {
+.uwt-inspector-json__notice {
   margin: 0;
   font-size: 0.8125rem;
   color: var(--cps-state-warn);
 }
 
-.uwt-diagnostics-json__code {
+.uwt-inspector-json__code {
   margin: 0;
   padding: 0.75rem;
   max-height: 24rem;
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
similarity index 92%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
index cdc8ff5..b54f6c7 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { UwtDiagnosticsJsonComponent } from './uwt-diagnostics-json.component';
+import { UwtInspectorJsonComponent } from './uwt-inspector-json.component';
 
-describe('UwtDiagnosticsJsonComponent', () => {
-  let fixture: ComponentFixture<UwtDiagnosticsJsonComponent>;
+describe('UwtInspectorJsonComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorJsonComponent>;
   const pre = () => fixture.nativeElement.querySelector('pre') as HTMLElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [UwtDiagnosticsJsonComponent, NoopAnimationsModule]
+      imports: [UwtInspectorJsonComponent, NoopAnimationsModule]
     }).compileComponents();
-    fixture = TestBed.createComponent(UwtDiagnosticsJsonComponent);
+    fixture = TestBed.createComponent(UwtInspectorJsonComponent);
   });
 
   afterEach(() => jest.restoreAllMocks());
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
similarity index 84%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
index f24e7aa..a0f4703 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-json/uwt-diagnostics-json.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
@@ -6,8 +6,8 @@ import {
   signal
 } from '@angular/core';
 import { CpsButtonComponent } from 'cps-ui-kit';
-import { uwtSafeStringify } from '../uwt-diagnostics-export/uwt-diagnostics-export';
-import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
+import { uwtSafeStringify } from '../uwt-inspector-export/uwt-inspector-export';
+import { UWT_DEFAULT_INSPECTOR_CONFIG } from '../uwt-inspector-store/uwt-inspector-store';
 
 /**
  * The most characters a truncated view shows, even when `maxChars` allows
@@ -32,13 +32,13 @@ function cutAt(text: string, length: number): string {
  * or JSON display. It uses the kit's colour and radius tokens.
  */
 @Component({
-  selector: 'uwt-diagnostics-json',
+  selector: 'uwt-inspector-json',
   imports: [CpsButtonComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './uwt-diagnostics-json.component.html',
-  styleUrl: './uwt-diagnostics-json.component.scss'
+  templateUrl: './uwt-inspector-json.component.html',
+  styleUrl: './uwt-inspector-json.component.scss'
 })
-export class UwtDiagnosticsJsonComponent {
+export class UwtInspectorJsonComponent {
   /** What to show. */
   readonly value = input.required<unknown>();
 
@@ -46,9 +46,7 @@ export class UwtDiagnosticsJsonComponent {
   readonly label = input('Event payload');
 
   /** JSON length, in characters, above which the view is truncated. */
-  readonly maxChars = input(
-    UWT_DEFAULT_DIAGNOSTICS_CONFIG.maxPayloadCharsInView
-  );
+  readonly maxChars = input(UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView);
 
   /**
    * How many characters a truncated view shows: `maxChars`, capped at
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts
similarity index 89%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts
index a2efc2a..7e68588 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-columns.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts
@@ -1,11 +1,11 @@
 import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  UwtDiagnosticsEntry,
-  UwtDiagnosticsSectionId
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+  UwtInspectorEntry,
+  UwtInspectorSectionId
+} from '../uwt-inspector.models/uwt-inspector.models';
 
 /** One column of a section's table. */
-export interface UwtDiagnosticsColumn {
+export interface UwtInspectorColumn {
   key: string;
   header: string;
   /** Hidden on narrow screens. */
@@ -14,12 +14,12 @@ export interface UwtDiagnosticsColumn {
 }
 
 /** One table row: display text, plus the entry for the detail view. */
-export interface UwtDiagnosticsRow {
+export interface UwtInspectorRow {
   sequence: number;
   time: string;
   cells: Record<string, string>;
   forwardedFrom?: string;
-  entry: UwtDiagnosticsEntry;
+  entry: UwtInspectorEntry;
 }
 
 /** Reads a field as text, whatever the payload's declared type. */
@@ -55,9 +55,9 @@ function eventTypeOf(event: UwtTelemetryObservedEvent): string {
   return 'eventType' in event ? event.eventType : '';
 }
 
-export const UWT_DIAGNOSTICS_COLUMNS: Record<
-  UwtDiagnosticsSectionId,
-  readonly UwtDiagnosticsColumn[]
+export const UWT_INSPECTOR_COLUMNS: Record<
+  UwtInspectorSectionId,
+  readonly UwtInspectorColumn[]
 > = {
   bi: [
     {
@@ -163,7 +163,7 @@ export const UWT_DIAGNOSTICS_COLUMNS: Record<
 };
 
 /** `HH:MM:SS.mmm` in local time — the precision that orders a burst. */
-export function uwtDiagnosticsTime(iso: string): string {
+export function uwtInspectorTime(iso: string): string {
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) {
     return iso;
@@ -174,10 +174,10 @@ export function uwtDiagnosticsTime(iso: string): string {
   )}.${pad(date.getMilliseconds(), 3)}`;
 }
 
-export function uwtDiagnosticsRow(
-  entry: UwtDiagnosticsEntry,
-  columns: readonly UwtDiagnosticsColumn[]
-): UwtDiagnosticsRow {
+export function uwtInspectorRow(
+  entry: UwtInspectorEntry,
+  columns: readonly UwtInspectorColumn[]
+): UwtInspectorRow {
   const { event } = entry;
   const cells: Record<string, string> = {};
   for (const column of columns) {
@@ -189,7 +189,7 @@ export function uwtDiagnosticsRow(
   }
   return {
     sequence: event.sequence,
-    time: uwtDiagnosticsTime(event.capturedAt),
+    time: uwtInspectorTime(event.capturedAt),
     cells,
     forwardedFrom: event.origin.forwarded
       ? (event.origin.application ?? 'another app')
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
similarity index 79%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
index 42e9045..2a7d681 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
@@ -3,14 +3,14 @@
   [prefixIcon]="text().icon"
   [isExpanded]="true"
   borderColor="line-mid">
-  <div class="uwt-diagnostics-section">
-    <div class="uwt-diagnostics-section__tools">
-      <uwt-diagnostics-filter-bar
-        class="uwt-diagnostics-section__filters"
+  <div class="uwt-inspector-section">
+    <div class="uwt-inspector-section__tools">
+      <uwt-inspector-filter-bar
+        class="uwt-inspector-section__filters"
         [section]="section()"
         [sectionName]="text().title">
-      </uwt-diagnostics-filter-bar>
-      <div class="uwt-diagnostics-section__actions">
+      </uwt-inspector-filter-bar>
+      <div class="uwt-inspector-section__actions">
         <cps-button
           type="outlined"
           size="small"
@@ -39,7 +39,7 @@
       </div>
     </div>
     @if (unseenNew() > 0) {
-      <div class="uwt-diagnostics-section__notice">
+      <div class="uwt-inspector-section__notice">
         <span>{{ unseenNew() }} new on the first page.</span>
         <cps-button
           type="borderless"
@@ -61,20 +61,20 @@
       [first]="first()"
       (pageChanged)="onPage($event)"
       [emptyMessage]="emptyMessage()"
-      tableStyleClass="uwt-diagnostics-section__table">
+      tableStyleClass="uwt-inspector-section__table">
       <ng-template #header>
-        <th scope="col" class="uwt-diagnostics-section__time">Time</th>
+        <th scope="col" class="uwt-inspector-section__time">Time</th>
         @for (column of columns(); track column.key) {
           <th
             scope="col"
-            [class.uwt-diagnostics-section__secondary]="column.secondary">
+            [class.uwt-inspector-section__secondary]="column.secondary">
             {{ column.header }}
           </th>
         }
       </ng-template>
 
       <ng-template let-row #body>
-        <td class="uwt-diagnostics-section__time">
+        <td class="uwt-inspector-section__time">
           {{ row.time }}
           @if (isFresh(row.sequence)) {
             <cps-chip label="New"></cps-chip>
@@ -82,16 +82,16 @@
         </td>
         @for (column of columns(); track column.key) {
           <td
-            [class.uwt-diagnostics-section__secondary]="column.secondary"
-            [class.uwt-diagnostics-section__level--warn]="
+            [class.uwt-inspector-section__secondary]="column.secondary"
+            [class.uwt-inspector-section__level--warn]="
               column.key === 'level' && row.cells['level'] === 'warn'
             "
-            [class.uwt-diagnostics-section__level--error]="
+            [class.uwt-inspector-section__level--error]="
               column.key === 'level' && row.cells['level'].startsWith('error')
             "
             [attr.title]="row.cells[column.key] || null">
             @if (column.key === columns()[0].key && row.forwardedFrom) {
-              <span class="uwt-diagnostics-section__forwarded"
+              <span class="uwt-inspector-section__forwarded"
                 >↪ {{ row.forwardedFrom }}</span
               >
             }
@@ -101,8 +101,8 @@
       </ng-template>
 
       <ng-template let-row #rowexpansion>
-        <div class="uwt-diagnostics-section__detail">
-          <dl class="uwt-diagnostics-section__meta">
+        <div class="uwt-inspector-section__detail">
+          <dl class="uwt-inspector-section__meta">
             <div>
               <dt>Handed to</dt>
               <dd>
@@ -144,16 +144,16 @@
             </div>
           </dl>
           @if (row.entry.renderError) {
-            <p class="uwt-diagnostics-section__error">
+            <p class="uwt-inspector-section__error">
               Couldn't prepare this event for display:
               {{ row.entry.renderError }}
             </p>
           }
-          <uwt-diagnostics-json
+          <uwt-inspector-json
             [value]="row.entry.event.payload"
             [label]="'Payload of event #' + row.sequence"
             [maxChars]="maxPayloadChars()">
-          </uwt-diagnostics-json>
+          </uwt-inspector-json>
         </div>
       </ng-template>
     </cps-table>
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
similarity index 76%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
index 522a9f7..53c865c 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
@@ -3,31 +3,31 @@
   container-type: inline-size;
 }
 
-.uwt-diagnostics-section {
+.uwt-inspector-section {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   padding-block: 0.5rem;
 }
 
-.uwt-diagnostics-section__tools {
+.uwt-inspector-section__tools {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 0.5rem 1rem;
 }
 
-.uwt-diagnostics-section__filters {
+.uwt-inspector-section__filters {
   flex: 1 1 24rem;
 }
 
-.uwt-diagnostics-section__actions {
+.uwt-inspector-section__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.uwt-diagnostics-section__notice {
+.uwt-inspector-section__notice {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -38,7 +38,7 @@
 // The table fits the section instead of running past its edge: the columns
 // after Time share the width, and a long value ends in an ellipsis, shown
 // in full in the cell's title and the row's detail.
-:host ::ng-deep .uwt-diagnostics-section__table {
+:host ::ng-deep .uwt-inspector-section__table {
   width: 100%;
 }
 
@@ -50,7 +50,7 @@ td {
   white-space: nowrap;
 }
 
-.uwt-diagnostics-section__time {
+.uwt-inspector-section__time {
   // Only as wide as the time itself.
   width: 1%;
   max-width: none;
@@ -58,31 +58,31 @@ td {
   font-variant-numeric: tabular-nums;
 }
 
-.uwt-diagnostics-section__forwarded {
+.uwt-inspector-section__forwarded {
   margin-inline-end: 0.375rem;
   color: var(--cps-text-secondary);
   font-size: 0.75rem;
 }
 
 // Level is always written out; colour only supports it.
-.uwt-diagnostics-section__level--warn {
+.uwt-inspector-section__level--warn {
   color: var(--cps-state-warn);
   font-weight: 600;
 }
 
-.uwt-diagnostics-section__level--error {
+.uwt-inspector-section__level--error {
   color: var(--cps-state-error);
   font-weight: 600;
 }
 
-.uwt-diagnostics-section__detail {
+.uwt-inspector-section__detail {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.5rem 0.25rem;
 }
 
-.uwt-diagnostics-section__meta {
+.uwt-inspector-section__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem 1.25rem;
@@ -104,14 +104,14 @@ td {
   }
 }
 
-.uwt-diagnostics-section__error {
+.uwt-inspector-section__error {
   margin: 0;
   color: var(--cps-state-error);
   font-size: 0.8125rem;
 }
 
 @container (max-width: 48rem) {
-  .uwt-diagnostics-section__secondary {
+  .uwt-inspector-section__secondary {
     display: none;
   }
 }
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts
similarity index 78%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts
index 00371b6..bb7ba93 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts
@@ -1,24 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UwtTelemetryMonitor } from '@absaoss-cps/ngx-ui-watchtower';
-import { UwtDiagnosticsExporter } from '../uwt-diagnostics-export/uwt-diagnostics-exporter';
+import { UwtInspectorExporter } from '../uwt-inspector-export/uwt-inspector-exporter';
 import {
-  UWT_DIAGNOSTICS_FLUSH_MS,
-  UwtDiagnosticsStore
-} from '../uwt-diagnostics-store/uwt-diagnostics-store';
-import { UwtDiagnosticsSectionComponent } from './uwt-diagnostics-section.component';
+  UWT_INSPECTOR_FLUSH_MS,
+  UwtInspectorStore
+} from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorSectionComponent } from './uwt-inspector-section.component';
 
 /** Rows per page, as the section's table is configured. */
 const PAGE = 25;
 
-describe('UwtDiagnosticsSectionComponent', () => {
-  let fixture: ComponentFixture<UwtDiagnosticsSectionComponent>;
-  let store: UwtDiagnosticsStore;
+describe('UwtInspectorSectionComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorSectionComponent>;
+  let store: UwtInspectorStore;
   let monitor: UwtTelemetryMonitor;
 
   const el = () => fixture.nativeElement as HTMLElement;
   const shownRows = () =>
-    el().querySelectorAll('td.uwt-diagnostics-section__time').length;
+    el().querySelectorAll('td.uwt-inspector-section__time').length;
   const pageReport = () =>
     el().querySelector('.p-paginator-current')?.textContent?.trim();
   const ui = () =>
@@ -42,7 +42,7 @@ describe('UwtDiagnosticsSectionComponent', () => {
         origin: { forwarded: false }
       });
     }
-    jest.advanceTimersByTime(UWT_DIAGNOSTICS_FLUSH_MS);
+    jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
     fixture.detectChanges();
   }
 
@@ -54,12 +54,12 @@ describe('UwtDiagnosticsSectionComponent', () => {
   beforeEach(async () => {
     jest.useFakeTimers();
     await TestBed.configureTestingModule({
-      imports: [UwtDiagnosticsSectionComponent, NoopAnimationsModule],
-      providers: [UwtDiagnosticsStore, UwtDiagnosticsExporter]
+      imports: [UwtInspectorSectionComponent, NoopAnimationsModule],
+      providers: [UwtInspectorStore, UwtInspectorExporter]
     }).compileComponents();
     monitor = TestBed.inject(UwtTelemetryMonitor);
-    store = TestBed.inject(UwtDiagnosticsStore);
-    fixture = TestBed.createComponent(UwtDiagnosticsSectionComponent);
+    store = TestBed.inject(UwtInspectorStore);
+    fixture = TestBed.createComponent(UwtInspectorSectionComponent);
     fixture.componentRef.setInput('section', 'bi');
     fixture.detectChanges();
   });
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts
similarity index 73%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts
index d89bc45..a043cb5 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-section/uwt-diagnostics-section.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts
@@ -13,22 +13,22 @@ import {
   CpsExpansionPanelComponent,
   CpsTableComponent
 } from 'cps-ui-kit';
-import { UwtDiagnosticsSectionId } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UwtInspectorSectionId } from '../uwt-inspector.models/uwt-inspector.models';
 import {
-  UWT_DEFAULT_DIAGNOSTICS_CONFIG,
-  UwtDiagnosticsStore
-} from '../uwt-diagnostics-store/uwt-diagnostics-store';
-import { UwtDiagnosticsJsonComponent } from '../uwt-diagnostics-json/uwt-diagnostics-json.component';
-import { UwtDiagnosticsFilterBarComponent } from '../uwt-diagnostics-filter-bar/uwt-diagnostics-filter-bar.component';
-import { UwtDiagnosticsExporter } from '../uwt-diagnostics-export/uwt-diagnostics-exporter';
+  UWT_DEFAULT_INSPECTOR_CONFIG,
+  UwtInspectorStore
+} from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorJsonComponent } from '../uwt-inspector-json/uwt-inspector-json.component';
+import { UwtInspectorFilterBarComponent } from '../uwt-inspector-filter-bar/uwt-inspector-filter-bar.component';
+import { UwtInspectorExporter } from '../uwt-inspector-export/uwt-inspector-exporter';
 import {
-  UWT_DIAGNOSTICS_COLUMNS,
-  uwtDiagnosticsRow,
-  uwtDiagnosticsTime
-} from './uwt-diagnostics-columns';
+  UWT_INSPECTOR_COLUMNS,
+  uwtInspectorRow,
+  uwtInspectorTime
+} from './uwt-inspector-columns';
 
 const SECTION_TEXT: Record<
-  UwtDiagnosticsSectionId,
+  UwtInspectorSectionId,
   { title: string; icon: string; empty: string }
 > = {
   bi: {
@@ -53,41 +53,41 @@ const SECTION_TEXT: Record<
  * its download and copy actions, and a paginated table of its events.
  */
 @Component({
-  selector: 'uwt-diagnostics-section',
+  selector: 'uwt-inspector-section',
   imports: [
     CpsExpansionPanelComponent,
     CpsTableComponent,
     CpsChipComponent,
     CpsButtonComponent,
-    UwtDiagnosticsJsonComponent,
-    UwtDiagnosticsFilterBarComponent
+    UwtInspectorJsonComponent,
+    UwtInspectorFilterBarComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './uwt-diagnostics-section.component.html',
-  styleUrl: './uwt-diagnostics-section.component.scss'
+  templateUrl: './uwt-inspector-section.component.html',
+  styleUrl: './uwt-inspector-section.component.scss'
 })
-export class UwtDiagnosticsSectionComponent {
-  protected readonly store = inject(UwtDiagnosticsStore);
-  private readonly exporter = inject(UwtDiagnosticsExporter);
+export class UwtInspectorSectionComponent {
+  protected readonly store = inject(UwtInspectorStore);
+  private readonly exporter = inject(UwtInspectorExporter);
 
-  readonly section = input.required<UwtDiagnosticsSectionId>();
+  readonly section = input.required<UwtInspectorSectionId>();
   /** JSON length, in characters, above which a payload is shown truncated. */
   readonly maxPayloadChars = input(
-    UWT_DEFAULT_DIAGNOSTICS_CONFIG.maxPayloadCharsInView
+    UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView
   );
 
   protected readonly copyState = signal<'idle' | 'copied' | 'failed'>('idle');
 
   protected readonly text = computed(() => SECTION_TEXT[this.section()]);
   protected readonly columns = computed(
-    () => UWT_DIAGNOSTICS_COLUMNS[this.section()]
+    () => UWT_INSPECTOR_COLUMNS[this.section()]
   );
 
   protected readonly rows = computed(() => {
     const columns = this.columns();
     return this.store
       .filtered()
-      [this.section()].map((entry) => uwtDiagnosticsRow(entry, columns));
+      [this.section()].map((entry) => uwtInspectorRow(entry, columns));
   });
 
   /**
@@ -117,7 +117,7 @@ export class UwtDiagnosticsSectionComponent {
     const count = this.store.isFiltering(this.section())
       ? `${this.rows().length} of ${captured.length}`
       : `${captured.length}`;
-    const last = uwtDiagnosticsTime(captured[0].event.capturedAt).slice(0, 8);
+    const last = uwtInspectorTime(captured[0].event.capturedAt).slice(0, 8);
     const dropped = this.store.dropped()[this.section()];
     return [
       title,
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
similarity index 91%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
index 06214d1..ccb727e 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
@@ -1,9 +1,9 @@
 import {
-  UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   uwtIsApplePlatform,
   uwtMatchesShortcut,
   uwtShortcutLabel
-} from './uwt-diagnostics-shortcut';
+} from './uwt-inspector-shortcut';
 
 type Mods = Partial<
   Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'repeat'>
@@ -17,7 +17,7 @@ function key(code: string, mods: Mods, keyChar = '8', altGraph = false) {
   return event;
 }
 
-const [MAC, WIN] = UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS;
+const [MAC, WIN] = UWT_DEFAULT_INSPECTOR_SHORTCUTS;
 const macMods = { shiftKey: true, altKey: true, metaKey: true };
 const winMods = { ctrlKey: true, altKey: true, shiftKey: true };
 
@@ -65,10 +65,10 @@ describe('uwtMatchesShortcut', () => {
 
 describe('uwtShortcutLabel', () => {
   it('should show the macOS label on Apple platforms, and the other elsewhere', () => {
-    expect(uwtShortcutLabel(UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS, true)).toBe(
+    expect(uwtShortcutLabel(UWT_DEFAULT_INSPECTOR_SHORTCUTS, true)).toBe(
       '⇧⌥⌘8'
     );
-    expect(uwtShortcutLabel(UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS, false)).toBe(
+    expect(uwtShortcutLabel(UWT_DEFAULT_INSPECTOR_SHORTCUTS, false)).toBe(
       'Ctrl+Alt+Shift+8'
     );
   });
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
similarity index 88%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
index 1d38f5e..0e14860 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-shortcut/uwt-diagnostics-shortcut.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
@@ -1,4 +1,4 @@
-import { UwtDiagnosticsShortcut } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UwtInspectorShortcut } from '../uwt-inspector.models/uwt-inspector.models';
 
 /**
  * The default shortcuts: ⇧⌥⌘8 on macOS, Ctrl+Alt+Shift+8 on Windows and
@@ -12,7 +12,7 @@ import { UwtDiagnosticsShortcut } from '../uwt-diagnostics.models/uwt-diagnostic
  *
  * @group Utils
  */
-export const UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS: readonly UwtDiagnosticsShortcut[] =
+export const UWT_DEFAULT_INSPECTOR_SHORTCUTS: readonly UwtInspectorShortcut[] =
   [
     { code: 'Digit8', shift: true, alt: true, meta: true, label: '⇧⌥⌘8' },
     {
@@ -36,7 +36,7 @@ export const UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS: readonly UwtDiagnosticsShortcut[
  */
 export function uwtMatchesShortcut(
   event: KeyboardEvent,
-  shortcut: UwtDiagnosticsShortcut
+  shortcut: UwtInspectorShortcut
 ): boolean {
   if (event.repeat || event.code !== shortcut.code) {
     return false;
@@ -70,7 +70,7 @@ export function uwtIsApplePlatform(nav: Navigator | undefined): boolean {
  * there is one, otherwise the first configured.
  */
 export function uwtShortcutLabel(
-  shortcuts: readonly UwtDiagnosticsShortcut[],
+  shortcuts: readonly UwtInspectorShortcut[],
   apple: boolean
 ): string | undefined {
   const preferred = shortcuts.find((s) => !!s.meta === apple);
@@ -78,7 +78,7 @@ export function uwtShortcutLabel(
   return chosen ? (chosen.label ?? describeShortcut(chosen)) : undefined;
 }
 
-function describeShortcut(s: UwtDiagnosticsShortcut): string {
+function describeShortcut(s: UwtInspectorShortcut): string {
   const key = s.code.replace(/^Digit|^Key/, '');
   return [
     s.ctrl && 'Ctrl',
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
similarity index 93%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
index 8978703..ea30b9d 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
@@ -4,11 +4,11 @@ import {
   UwtTelemetryMonitor,
   UwtTelemetryPublishInput
 } from '@absaoss-cps/ngx-ui-watchtower';
-import { UWT_TELEMETRY_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics.models/uwt-diagnostics.models';
+import { UWT_EVENT_INSPECTOR_CONFIG } from '../uwt-inspector.models/uwt-inspector.models';
 import {
-  UWT_DIAGNOSTICS_FLUSH_MS,
-  UwtDiagnosticsStore
-} from './uwt-diagnostics-store';
+  UWT_INSPECTOR_FLUSH_MS,
+  UwtInspectorStore
+} from './uwt-inspector-store';
 
 const bi = (name: string): UwtTelemetryPublishInput => ({
   kind: 'bi',
@@ -37,26 +37,26 @@ const log = (message: string): UwtTelemetryPublishInput => ({
   origin: { forwarded: false }
 });
 
-describe('UwtDiagnosticsStore', () => {
+describe('UwtInspectorStore', () => {
   let monitor: UwtTelemetryMonitor;
   let injector: Injector;
 
-  function createStore(max = 500): UwtDiagnosticsStore {
+  function createStore(max = 500): UwtInspectorStore {
     injector = Injector.create({
       providers: [
-        UwtDiagnosticsStore,
+        UwtInspectorStore,
         {
-          provide: UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+          provide: UWT_EVENT_INSPECTOR_CONFIG,
           useValue: { maxEventsPerSection: max }
         }
       ],
       parent: TestBed.inject(Injector)
     });
-    return injector.get(UwtDiagnosticsStore);
+    return injector.get(UwtInspectorStore);
   }
 
-  const flush = () => jest.advanceTimersByTime(UWT_DIAGNOSTICS_FLUSH_MS);
-  const names = (store: UwtDiagnosticsStore) =>
+  const flush = () => jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
+  const names = (store: UwtInspectorStore) =>
     store
       .entries()
       .bi.map((e) => (e.event.payload as { eventName: string }).eventName);
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
similarity index 73%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
index 84d6442..715ed02 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics-store/uwt-diagnostics-store.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
@@ -10,24 +10,24 @@ import {
   UwtTelemetryObservedEvent
 } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
-  UwtDiagnosticsEntry,
-  UwtDiagnosticsFieldFilter,
-  UwtDiagnosticsFilterState,
-  UwtDiagnosticsSectionId,
-  UwtTelemetryDiagnosticsConfig
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
+  UWT_EVENT_INSPECTOR_CONFIG,
+  UwtInspectorEntry,
+  UwtInspectorFieldFilter,
+  UwtInspectorFilterState,
+  UwtInspectorSectionId,
+  UwtEventInspectorConfig
+} from '../uwt-inspector.models/uwt-inspector.models';
 import {
-  uwtDiagnosticsSectionOf,
+  uwtInspectorSectionOf,
   uwtFlattenEvent,
   uwtKnownPaths,
   uwtMatchesFilters
-} from '../uwt-diagnostics-filter/uwt-diagnostics-filter';
-import { uwtSafeStringify } from '../uwt-diagnostics-export/uwt-diagnostics-export';
+} from '../uwt-inspector-filter/uwt-inspector-filter';
+import { uwtSafeStringify } from '../uwt-inspector-export/uwt-inspector-export';
 
 /** Library defaults, applied under whatever the application configures. */
-export const UWT_DEFAULT_DIAGNOSTICS_CONFIG: Omit<
-  UwtTelemetryDiagnosticsConfig,
+export const UWT_DEFAULT_INSPECTOR_CONFIG: Omit<
+  UwtEventInspectorConfig,
   'shortcuts'
 > = {
   enabled: true,
@@ -36,17 +36,17 @@ export const UWT_DEFAULT_DIAGNOSTICS_CONFIG: Omit<
 };
 
 /** How often arriving events reach the screen, in milliseconds. */
-export const UWT_DIAGNOSTICS_FLUSH_MS = 250;
+export const UWT_INSPECTOR_FLUSH_MS = 250;
 /** How long a row counts as new, in milliseconds. */
 const FRESH_MS = 3000;
 
-export const UWT_DIAGNOSTICS_SECTIONS: readonly UwtDiagnosticsSectionId[] = [
+export const UWT_INSPECTOR_SECTIONS: readonly UwtInspectorSectionId[] = [
   'bi',
   'scenario',
   'logging'
 ];
 
-type PerSection<T> = Record<UwtDiagnosticsSectionId, T>;
+type PerSection<T> = Record<UwtInspectorSectionId, T>;
 
 function perSection<T>(make: () => T): PerSection<T> {
   return { bi: make(), scenario: make(), logging: make() };
@@ -58,23 +58,23 @@ function perSection<T>(make: () => T): PerSection<T> {
  * to {@link UwtTelemetryMonitor} for its lifetime, and discarded on close.
  *
  * Events arrive whenever the application sends them; they are batched and
- * reach the screen at most every {@link UWT_DIAGNOSTICS_FLUSH_MS}, so a
+ * reach the screen at most every {@link UWT_INSPECTOR_FLUSH_MS}, so a
  * burst causes one re-render rather than hundreds. Each section keeps at
  * most `maxEventsPerSection`, newest first, and counts what it dropped.
  */
 @Injectable()
-export class UwtDiagnosticsStore {
+export class UwtInspectorStore {
   private readonly monitor = inject(UwtTelemetryMonitor);
-  private readonly config: UwtTelemetryDiagnosticsConfig = {
-    ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
+  private readonly config: UwtEventInspectorConfig = {
+    ...UWT_DEFAULT_INSPECTOR_CONFIG,
     shortcuts: [],
-    ...inject(UWT_TELEMETRY_DIAGNOSTICS_CONFIG, { optional: true })
+    ...inject(UWT_EVENT_INSPECTOR_CONFIG, { optional: true })
   };
 
   /** Newest first. Written on every flush, paused or not. */
-  private readonly buffers = perSection<UwtDiagnosticsEntry[]>(() => []);
+  private readonly buffers = perSection<UwtInspectorEntry[]>(() => []);
   private readonly droppedCount = perSection(() => 0);
-  private pending: UwtDiagnosticsEntry[] = [];
+  private pending: UwtInspectorEntry[] = [];
   private flushTimer?: ReturnType<typeof setTimeout>;
   private freshTimer?: ReturnType<typeof setTimeout>;
 
@@ -82,7 +82,7 @@ export class UwtDiagnosticsStore {
   readonly startedAt = signal(new Date().toISOString());
 
   /** What the popup shows: the buffers as of the last unpaused flush. */
-  readonly entries = signal<PerSection<readonly UwtDiagnosticsEntry[]>>(
+  readonly entries = signal<PerSection<readonly UwtInspectorEntry[]>>(
     perSection(() => [])
   );
 
@@ -103,22 +103,20 @@ export class UwtDiagnosticsStore {
   readonly fresh = signal<ReadonlySet<number>>(new Set());
 
   /** Each section's own search text and field filters. */
-  readonly filters = signal<PerSection<UwtDiagnosticsFilterState>>(
+  readonly filters = signal<PerSection<UwtInspectorFilterState>>(
     perSection(emptyFilters)
   );
 
   /** Entries matching each section's own filters. */
-  readonly filtered = computed<PerSection<readonly UwtDiagnosticsEntry[]>>(
-    () => {
-      const entries = this.entries();
-      const filters = this.filters();
-      return perSectionFrom((id) =>
-        isFiltering(filters[id])
-          ? entries[id].filter((e) => uwtMatchesFilters(e.fields, filters[id]))
-          : entries[id]
-      );
-    }
-  );
+  readonly filtered = computed<PerSection<readonly UwtInspectorEntry[]>>(() => {
+    const entries = this.entries();
+    const filters = this.filters();
+    return perSectionFrom((id) =>
+      isFiltering(filters[id])
+        ? entries[id].filter((e) => uwtMatchesFilters(e.fields, filters[id]))
+        : entries[id]
+    );
+  });
 
   /** Field paths seen so far in each section, for filter suggestions. */
   readonly knownPaths = computed<PerSection<string[]>>(() => {
@@ -130,10 +128,7 @@ export class UwtDiagnosticsStore {
 
   readonly total = computed(() => {
     const entries = this.entries();
-    return UWT_DIAGNOSTICS_SECTIONS.reduce(
-      (n, id) => n + entries[id].length,
-      0
-    );
+    return UWT_INSPECTOR_SECTIONS.reduce((n, id) => n + entries[id].length, 0);
   });
 
   constructor() {
@@ -149,7 +144,7 @@ export class UwtDiagnosticsStore {
 
   /** Empties every section. Capturing continues. */
   clear(): void {
-    for (const id of UWT_DIAGNOSTICS_SECTIONS) {
+    for (const id of UWT_INSPECTOR_SECTIONS) {
       this.buffers[id] = [];
       this.droppedCount[id] = 0;
     }
@@ -168,13 +163,13 @@ export class UwtDiagnosticsStore {
     }
   }
 
-  setText(section: UwtDiagnosticsSectionId, text: string): void {
+  setText(section: UwtInspectorSectionId, text: string): void {
     this.updateFilters(section, (f) => ({ ...f, text }));
   }
 
   addFilter(
-    section: UwtDiagnosticsSectionId,
-    filter: Omit<UwtDiagnosticsFieldFilter, 'id'>
+    section: UwtInspectorSectionId,
+    filter: Omit<UwtInspectorFieldFilter, 'id'>
   ): void {
     this.updateFilters(section, (f) => ({
       ...f,
@@ -182,19 +177,19 @@ export class UwtDiagnosticsStore {
     }));
   }
 
-  removeFilter(section: UwtDiagnosticsSectionId, id: string): void {
+  removeFilter(section: UwtInspectorSectionId, id: string): void {
     this.updateFilters(section, (f) => ({
       ...f,
       fields: f.fields.filter((x) => x.id !== id)
     }));
   }
 
-  clearFilters(section: UwtDiagnosticsSectionId): void {
+  clearFilters(section: UwtInspectorSectionId): void {
     this.updateFilters(section, emptyFilters);
   }
 
   /** Whether a section has any filter or search text active. */
-  isFiltering(section: UwtDiagnosticsSectionId): boolean {
+  isFiltering(section: UwtInspectorSectionId): boolean {
     return isFiltering(this.filters()[section]);
   }
 
@@ -202,7 +197,7 @@ export class UwtDiagnosticsStore {
    * Every event captured in one section: what is shown, plus anything held
    * back while paused or still waiting for the next flush. Oldest first.
    */
-  sectionEvents(section: UwtDiagnosticsSectionId): UwtTelemetryObservedEvent[] {
+  sectionEvents(section: UwtInspectorSectionId): UwtTelemetryObservedEvent[] {
     return [
       ...this.buffers[section].map((e) => e.event),
       ...this.pending.filter((e) => e.section === section).map((e) => e.event)
@@ -210,7 +205,7 @@ export class UwtDiagnosticsStore {
   }
 
   /** One section's totals for its export, counted like {@link sectionEvents}. */
-  sectionCount(section: UwtDiagnosticsSectionId): {
+  sectionCount(section: UwtInspectorSectionId): {
     captured: number;
     droppedOldest: number;
   } {
@@ -223,8 +218,8 @@ export class UwtDiagnosticsStore {
   }
 
   private updateFilters(
-    section: UwtDiagnosticsSectionId,
-    change: (f: UwtDiagnosticsFilterState) => UwtDiagnosticsFilterState
+    section: UwtInspectorSectionId,
+    change: (f: UwtInspectorFilterState) => UwtInspectorFilterState
   ): void {
     this.filters.update((all) => ({ ...all, [section]: change(all[section]) }));
   }
@@ -239,15 +234,15 @@ export class UwtDiagnosticsStore {
       this.pending.push(this.prepare(event));
       this.flushTimer ??= setTimeout(
         () => this.flush(),
-        UWT_DIAGNOSTICS_FLUSH_MS
+        UWT_INSPECTOR_FLUSH_MS
       );
     } catch {
       // Nothing to show for this one; later events are unaffected.
     }
   }
 
-  private prepare(event: UwtTelemetryObservedEvent): UwtDiagnosticsEntry {
-    const section = uwtDiagnosticsSectionOf(event.kind);
+  private prepare(event: UwtTelemetryObservedEvent): UwtInspectorEntry {
+    const section = uwtInspectorSectionOf(event.kind);
     try {
       return {
         event,
@@ -287,7 +282,7 @@ export class UwtDiagnosticsStore {
   }
 
   /** Moves pending events into the buffers. Returns what moved. */
-  private drain(): UwtDiagnosticsEntry[] {
+  private drain(): UwtInspectorEntry[] {
     const arrived = this.pending;
     this.pending = [];
     const max = Math.max(1, this.config.maxEventsPerSection);
@@ -302,7 +297,7 @@ export class UwtDiagnosticsStore {
     return arrived;
   }
 
-  private publish(arrived: readonly UwtDiagnosticsEntry[] = []): void {
+  private publish(arrived: readonly UwtInspectorEntry[] = []): void {
     this.entries.set(perSectionFrom((id) => [...this.buffers[id]]));
     this.dropped.set({ ...this.droppedCount });
     this.fresh.set(new Set(arrived.map((e) => e.event.sequence)));
@@ -314,7 +309,7 @@ export class UwtDiagnosticsStore {
 }
 
 function perSectionFrom<T>(
-  make: (id: UwtDiagnosticsSectionId) => T
+  make: (id: UwtInspectorSectionId) => T
 ): PerSection<T> {
   return {
     bi: make('bi'),
@@ -323,11 +318,11 @@ function perSectionFrom<T>(
   };
 }
 
-function emptyFilters(): UwtDiagnosticsFilterState {
+function emptyFilters(): UwtInspectorFilterState {
   return { text: '', fields: [] };
 }
 
-function isFiltering(filters: UwtDiagnosticsFilterState): boolean {
+function isFiltering(filters: UwtInspectorFilterState): boolean {
   return !!filters.text.trim() || filters.fields.length > 0;
 }
 
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
similarity index 72%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index 32bb38c..aa6a40a 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.models/uwt-diagnostics.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -2,14 +2,14 @@ import { InjectionToken } from '@angular/core';
 import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 
 /**
- * The three sections of the diagnostics popup.
+ * The three sections of the Event Inspector.
  *
  * @group Types
  */
-export type UwtDiagnosticsSectionId = 'bi' | 'scenario' | 'logging';
+export type UwtInspectorSectionId = 'bi' | 'scenario' | 'logging';
 
 /**
- * A key combination that opens the diagnostics popup.
+ * A key combination that opens the Event Inspector.
  *
  * Matched on `KeyboardEvent.code` — the physical key — so it works on every
  * keyboard layout, and isn't affected by what Option or Shift produce.
@@ -17,7 +17,7 @@ export type UwtDiagnosticsSectionId = 'bi' | 'scenario' | 'logging';
  *
  * @group Interfaces
  */
-export interface UwtDiagnosticsShortcut {
+export interface UwtInspectorShortcut {
   /** `KeyboardEvent.code`, e.g. `'Digit8'` or `'KeyD'`. */
   code: string;
   ctrl?: boolean;
@@ -30,11 +30,11 @@ export interface UwtDiagnosticsShortcut {
 }
 
 /**
- * Configuration for {@link provideUwtTelemetryDiagnostics}.
+ * Configuration for {@link provideUwtEventInspector}.
  *
  * @group Interfaces
  */
-export interface UwtTelemetryDiagnosticsConfig {
+export interface UwtEventInspectorConfig {
   /**
    * Whether the popup can be opened at all. A function is read once, at
    * startup — use it to limit access to, say, support staff.
@@ -43,9 +43,9 @@ export interface UwtTelemetryDiagnosticsConfig {
 
   /**
    * Shortcuts that open the popup. An empty array disables the keyboard,
-   * leaving {@link UwtTelemetryDiagnosticsService.open} as the only way in.
+   * leaving {@link UwtEventInspectorService.open} as the only way in.
    */
-  shortcuts: readonly UwtDiagnosticsShortcut[];
+  shortcuts: readonly UwtInspectorShortcut[];
 
   /** Events kept per section; the oldest are dropped beyond this. */
   maxEventsPerSection: number;
@@ -62,13 +62,11 @@ export interface UwtTelemetryDiagnosticsConfig {
 }
 
 /** @group Tokens */
-export const UWT_TELEMETRY_DIAGNOSTICS_CONFIG =
-  new InjectionToken<UwtTelemetryDiagnosticsConfig>(
-    'UWT_TELEMETRY_DIAGNOSTICS_CONFIG'
-  );
+export const UWT_EVENT_INSPECTOR_CONFIG =
+  new InjectionToken<UwtEventInspectorConfig>('UWT_EVENT_INSPECTOR_CONFIG');
 
 /** A flattened leaf of an event, used for filtering. */
-export interface UwtDiagnosticsField {
+export interface UwtInspectorField {
   /** Exact path, e.g. `steps[2].name`. */
   path: string;
 
@@ -80,10 +78,10 @@ export interface UwtDiagnosticsField {
 }
 
 /** One captured event, prepared once for display and filtering. */
-export interface UwtDiagnosticsEntry {
+export interface UwtInspectorEntry {
   event: UwtTelemetryObservedEvent;
-  section: UwtDiagnosticsSectionId;
-  fields: readonly UwtDiagnosticsField[];
+  section: UwtInspectorSectionId;
+  fields: readonly UwtInspectorField[];
   /** Length of the payload's JSON, in characters (UTF-16 code units). */
   sizeChars: number;
   /** Set when the event could not be prepared for display. */
@@ -95,22 +93,22 @@ export interface UwtDiagnosticsEntry {
  *
  * @group Types
  */
-export type UwtDiagnosticsFilterOperator =
+export type UwtInspectorFilterOperator =
   'contains' | 'equals' | 'not-contains' | 'exists' | 'missing';
 
 /** @group Interfaces */
-export interface UwtDiagnosticsFieldFilter {
+export interface UwtInspectorFieldFilter {
   id: string;
   path: string;
-  operator: UwtDiagnosticsFilterOperator;
+  operator: UwtInspectorFilterOperator;
   value: string;
 }
 
 /** @group Interfaces */
-export interface UwtDiagnosticsFilterState {
+export interface UwtInspectorFilterState {
   /** Free text, matched against every value and path. */
   text: string;
-  fields: readonly UwtDiagnosticsFieldFilter[];
+  fields: readonly UwtInspectorFieldFilter[];
 }
 
 /**
@@ -122,10 +120,10 @@ export interface UwtDiagnosticsFilterState {
  *
  * @group Interfaces
  */
-export interface UwtDiagnosticsExport {
-  format: 'ngx-ui-watchtower-diagnostics';
+export interface UwtInspectorExport {
+  format: 'ngx-ui-watchtower-event-inspector';
   formatVersion: 1;
-  section: UwtDiagnosticsSectionId;
+  section: UwtInspectorSectionId;
   exportedAt: string;
   capture: { startedAt: string; endedAt: string; paused: boolean };
   app: {
@@ -136,7 +134,7 @@ export interface UwtDiagnosticsExport {
   };
   session: { sessionId?: string; userId?: string };
   userAgent: string;
-  activeFilters: UwtDiagnosticsFilterState;
+  activeFilters: UwtInspectorFilterState;
   count: { captured: number; droppedOldest: number };
   events: UwtTelemetryObservedEvent[];
 }
diff --git a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
similarity index 50%
rename from projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
index 0dc0ad3..c0a3cd4 100644
--- a/projects/ngx-ui-watchtower/diagnostics/src/lib/uwt-diagnostics.providers/uwt-diagnostics.providers.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
@@ -5,15 +5,15 @@ import {
   provideAppInitializer
 } from '@angular/core';
 import {
-  UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
-  UwtTelemetryDiagnosticsConfig
-} from '../uwt-diagnostics.models/uwt-diagnostics.models';
-import { UWT_DEFAULT_DIAGNOSTICS_CONFIG } from '../uwt-diagnostics-store/uwt-diagnostics-store';
-import { UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS } from '../uwt-diagnostics-shortcut/uwt-diagnostics-shortcut';
-import { UwtTelemetryDiagnosticsService } from '../uwt-telemetry-diagnostics.service/uwt-telemetry-diagnostics.service';
+  UWT_EVENT_INSPECTOR_CONFIG,
+  UwtEventInspectorConfig
+} from '../uwt-inspector.models/uwt-inspector.models';
+import { UWT_DEFAULT_INSPECTOR_CONFIG } from '../uwt-inspector-store/uwt-inspector-store';
+import { UWT_DEFAULT_INSPECTOR_SHORTCUTS } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
+import { UwtEventInspectorService } from '../uwt-event-inspector.service/uwt-event-inspector.service';
 
 /**
- * Adds the telemetry diagnostics popup: an in-app window showing, live,
+ * Adds the Event Inspector: an in-app window showing, live,
  * every BI, scenario and log event this app hands to its destinations.
  *
  * Opens with ⇧⌥⌘8 (macOS) or Ctrl+Alt+Shift+8 (Windows, Linux) by
@@ -22,15 +22,15 @@ import { UwtTelemetryDiagnosticsService } from '../uwt-telemetry-diagnostics.ser
  *
  * @example
  * ```typescript
- * import { provideUwtTelemetryDiagnostics } from '@absaoss-cps/ngx-ui-watchtower/diagnostics';
+ * import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
  *
  * providers: [
  *   provideUwtTelemetry({ application: 'my-app', environment, version }),
- *   provideUwtTelemetryDiagnostics()
+ *   provideUwtEventInspector()
  * ]
  *
  * // Or a different key, or access limited to some users:
- * provideUwtTelemetryDiagnostics({
+ * provideUwtEventInspector({
  *   shortcuts: [{ code: 'KeyD', ctrl: true, alt: true, shift: true }],
  *   enabled: () => inject(AuthService).isSupportStaff()
  * })
@@ -41,20 +41,20 @@ import { UwtTelemetryDiagnosticsService } from '../uwt-telemetry-diagnostics.ser
  *
  * @group Utils
  */
-export function provideUwtTelemetryDiagnostics(
-  config: Partial<UwtTelemetryDiagnosticsConfig> = {}
+export function provideUwtEventInspector(
+  config: Partial<UwtEventInspectorConfig> = {}
 ): EnvironmentProviders {
   return makeEnvironmentProviders([
     {
-      provide: UWT_TELEMETRY_DIAGNOSTICS_CONFIG,
+      provide: UWT_EVENT_INSPECTOR_CONFIG,
       useValue: {
-        ...UWT_DEFAULT_DIAGNOSTICS_CONFIG,
-        shortcuts: UWT_DEFAULT_DIAGNOSTICS_SHORTCUTS,
+        ...UWT_DEFAULT_INSPECTOR_CONFIG,
+        shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
         ...config
       }
     },
     provideAppInitializer(() => {
-      inject(UwtTelemetryDiagnosticsService).install();
+      inject(UwtEventInspectorService).install();
     })
   ]);
 }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts b/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
new file mode 100644
index 0000000..f8c08e6
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
@@ -0,0 +1,21 @@
+/*
+ * Public API Surface of ngx-ui-watchtower/event-inspector
+ *
+ * The Event Inspector: an in-app popup showing, live, every event this app hands to its
+ * telemetry destinations. Needs cps-ui-kit.
+ */
+
+export {
+  UWT_EVENT_INSPECTOR_CONFIG,
+  UwtInspectorExport,
+  UwtInspectorFieldFilter,
+  UwtInspectorFilterOperator,
+  UwtInspectorFilterState,
+  UwtInspectorSectionId,
+  UwtInspectorShortcut,
+  UwtEventInspectorConfig
+} from './lib/uwt-inspector.models/uwt-inspector.models';
+export { UWT_DEFAULT_INSPECTOR_SHORTCUTS } from './lib/uwt-inspector-shortcut/uwt-inspector-shortcut';
+export { UWT_DEFAULT_INSPECTOR_CONFIG } from './lib/uwt-inspector-store/uwt-inspector-store';
+export { provideUwtEventInspector } from './lib/uwt-inspector.providers/uwt-inspector.providers';
+export { UwtEventInspectorService } from './lib/uwt-event-inspector.service/uwt-event-inspector.service';
diff --git a/projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json b/projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json
similarity index 91%
rename from projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json
rename to projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json
index 04a9759..d6fea07 100644
--- a/projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json
+++ b/projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json
@@ -2,7 +2,7 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../../out-tsc/lib-diagnostics",
+    "outDir": "../../../out-tsc/lib-event-inspector",
     "rootDir": "../../..",
     "lib": ["ES2022", "DOM"],
     "moduleResolution": "bundler",
diff --git a/projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json b/projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json
similarity index 83%
rename from projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json
rename to projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json
index a78ee90..cd51ee4 100644
--- a/projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json
+++ b/projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json
@@ -2,7 +2,7 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../../out-tsc/spec-diagnostics",
+    "outDir": "../../../out-tsc/spec-event-inspector",
     "rootDir": "../../..",
     "types": ["jest"],
     "resolveJsonModule": true
diff --git a/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts
index 2c2d257..1eca315 100644
--- a/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts
+++ b/projects/ngx-ui-watchtower/src/lib/services/uwt-telemetry-monitor.service/uwt-telemetry-monitor.service.ts
@@ -15,7 +15,7 @@ import {
  *
  * Each hand-off site publishes here immediately *after* the hand-off, with
  * the very object it just sent. Nothing is sent from here: this is an
- * in-memory stream for observers such as the diagnostics popup, never a
+ * in-memory stream for observers such as the Event Inspector, never a
  * second delivery path, so observing it cannot cause an event to be sent
  * twice.
  *
diff --git a/tsconfig.json b/tsconfig.json
index 11d5f81..d0fb3ae 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,8 +10,8 @@
       "@absaoss-cps/ngx-ui-watchtower/rum": [
         "./projects/ngx-ui-watchtower/rum/src/public-api.ts"
       ],
-      "@absaoss-cps/ngx-ui-watchtower/diagnostics": [
-        "./projects/ngx-ui-watchtower/diagnostics/src/public-api.ts"
+      "@absaoss-cps/ngx-ui-watchtower/event-inspector": [
+        "./projects/ngx-ui-watchtower/event-inspector/src/public-api.ts"
       ]
     },
     "esModuleInterop": true,
@@ -46,7 +46,7 @@
     { "path": "./projects/ngx-ui-watchtower/tsconfig.spec.json" },
     { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.lib.json" },
     { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.spec.json" },
-    { "path": "./projects/ngx-ui-watchtower/diagnostics/tsconfig.lib.json" },
-    { "path": "./projects/ngx-ui-watchtower/diagnostics/tsconfig.spec.json" }
+    { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json" },
+    { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json" }
   ]
 }

From 4ffe0e5ee0461e5bd2cc2a0cac8c0c802fb2e0a3 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 10:59:51 +0100
Subject: [PATCH 05/51] add transparency slider

---
 projects/ngx-ui-watchtower/DESIGN.md          |  14 +-
 projects/ngx-ui-watchtower/README.md          |   2 +-
 .../lib/cps-slider/cps-slider.component.html  |  46 +++++
 .../lib/cps-slider/cps-slider.component.scss  | 114 +++++++++++
 .../cps-slider/cps-slider.component.spec.ts   | 112 +++++++++++
 .../lib/cps-slider/cps-slider.component.ts    | 177 ++++++++++++++++++
 .../uwt-inspector-dialog.component.html       |  10 +
 .../uwt-inspector-dialog.component.scss       |   2 +-
 .../uwt-inspector-dialog.component.spec.ts    |  46 ++++-
 .../uwt-inspector-dialog.component.ts         |  64 ++++++-
 10 files changed, 580 insertions(+), 7 deletions(-)
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.html
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.ts

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 12e6325..71d0554 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -233,6 +233,12 @@ shell's.
   from `node_modules` and it is never compiled into the package. The
   workspace uses cps-ui-kit 21, the lowest version the Event Inspector
   supports, as it uses the lowest supported Angular.
+- **`cps-slider` is staged here for cps-ui-kit.** The kit has no slider, so
+  the Transparency control is a `cps-slider` written to the kit's
+  conventions — inputs, `valueChanged`, forms support, colour variables —
+  in its own folder, `event-inspector/src/lib/cps-slider/`, depending only
+  on Angular and the kit's public API, so it can move into cps-ui-kit as
+  is.
 - **Test doubles live in the specs that use them**, declared inline, never in
   a shared file and never exported. The one browser gap needing a stub is
   `BroadcastChannel`, which jsdom doesn't implement.
@@ -1112,7 +1118,9 @@ for the session, `cwr_u` for the user id), the library keeps one
 `localStorage` entry, `ngx-ui-watchtower.sessionStarts`: up to five RUM
 session ids, each with the time it started, for `sessionElapsed`. It is
 written only while the RUM client's cookies are on, and an id stays until
-five newer sessions have replaced it. Debug flags are read from
+five newer sessions have replaced it. The Event Inspector adds one more,
+`ngx-ui-watchtower.eventInspector.transparency`, only once someone moves its
+Transparency slider: a number from 0 to 70. Debug flags are read from
 `localStorage`, never written.
 
 ### Scanning values for personal data
@@ -2101,6 +2109,10 @@ capturing rather than viewing:
   captured.
 - **Clear** empties the history; capturing continues.
 
+Beside them, **Transparency** lets the app show through the window, so you
+can watch the page and its events together. It goes up to 70%, so the window
+never disappears, and the setting is remembered in this browser.
+
 Each section keeps the latest 500 events (`maxEventsPerSection`). History is
 discarded when the popup closes.
 
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 93804fa..e5d7110 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -362,7 +362,7 @@ providers: [provideUwtEventInspector()];
 
 Open it with **⇧⌥⌘8** on macOS or **Ctrl+Alt+Shift+8** on Windows and Linux.
 It lists everything the app sends from that moment on, with search, filters
-and JSON download.
+and JSON download, and its Transparency slider lets the app show through.
 
 ## Testing
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.html
new file mode 100644
index 0000000..8ce44a1
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.html
@@ -0,0 +1,46 @@
+<div class="cps-slider-container" [class.cps-slider-disabled]="disabled">
+  @if (label) {
+    <label
+      class="cps-slider-label"
+      data-testid="cps-slider-label"
+      [for]="inputId"
+      >{{ label }}</label
+    >
+  }
+  @if (infoTooltip) {
+    <cps-info-circle
+      class="cps-slider-info-circle"
+      data-testid="cps-slider-info-circle"
+      size="xsmall"
+      [tooltipPosition]="infoTooltipPosition"
+      [tooltipContentClass]="infoTooltipClass"
+      [tooltipMaxWidth]="infoTooltipMaxWidth"
+      [tooltipPersistent]="infoTooltipPersistent"
+      [tooltipText]="infoTooltip">
+    </cps-info-circle>
+  }
+  <input
+    type="range"
+    class="cps-slider-input"
+    data-testid="cps-slider-input"
+    [id]="inputId"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+    [value]="value"
+    [disabled]="disabled"
+    [style.width]="cvtWidth"
+    [style.--cps-slider-fill]="fill"
+    [attr.aria-label]="ariaLabel || null"
+    [attr.aria-valuetext]="valueText"
+    (input)="updateValueEvent($event)"
+    (blur)="onTouched()" />
+  @if (showValue) {
+    <span
+      class="cps-slider-value"
+      data-testid="cps-slider-value"
+      aria-hidden="true"
+      >{{ valueText }}</span
+    >
+  }
+</div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss
new file mode 100644
index 0000000..3e0e250
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss
@@ -0,0 +1,114 @@
+@mixin thumb($color) {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  border: 0.125rem solid #fff;
+  border-radius: 50%;
+  background-color: $color;
+  box-shadow: 0 0 0 0.0625rem $color;
+  cursor: pointer;
+}
+
+@mixin track($fill, $rest) {
+  // The track is the input's own background: a thin band across the middle,
+  // filled up to the value.
+  background: linear-gradient(
+      to right,
+      $fill var(--cps-slider-fill, 0%),
+      $rest var(--cps-slider-fill, 0%)
+    )
+    center / 100% 0.25rem no-repeat;
+}
+
+:host {
+  min-width: max-content;
+  display: inline-block;
+
+  .cps-slider-container {
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  .cps-slider-label,
+  .cps-slider-value {
+    font-size: 1rem;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-style: normal;
+    color: var(--cps-color-text-dark);
+  }
+
+  .cps-slider-label {
+    user-select: none;
+  }
+
+  .cps-slider-value {
+    min-width: 2.5rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cps-slider-info-circle ::ng-deep cps-icon i {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .cps-slider-input {
+    appearance: none;
+    height: 1.5rem;
+    margin: 0;
+    cursor: pointer;
+    @include track(var(--cps-color-calm), var(--cps-color-line-mid));
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      @include thumb(var(--cps-color-calm));
+    }
+
+    &::-moz-range-thumb {
+      @include thumb(var(--cps-color-calm));
+    }
+
+    &::-moz-range-track {
+      background: transparent;
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow:
+          0 0 0 0.125rem var(--cps-color-calm),
+          0 0 0 0.1875rem var(--cps-color-calm-highlighten);
+      }
+
+      &::-moz-range-thumb {
+        box-shadow:
+          0 0 0 0.125rem var(--cps-color-calm),
+          0 0 0 0.1875rem var(--cps-color-calm-highlighten);
+      }
+    }
+  }
+
+  .cps-slider-disabled {
+    .cps-slider-label,
+    .cps-slider-value {
+      color: var(--cps-color-text-mild);
+    }
+
+    .cps-slider-input {
+      cursor: default;
+      @include track(var(--cps-color-text-light), var(--cps-color-line-light));
+
+      &::-webkit-slider-thumb {
+        @include thumb(var(--cps-color-text-light));
+        cursor: default;
+      }
+
+      &::-moz-range-thumb {
+        @include thumb(var(--cps-color-text-light));
+        cursor: default;
+      }
+    }
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.spec.ts
new file mode 100644
index 0000000..ac7b76d
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.spec.ts
@@ -0,0 +1,112 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CpsSliderComponent } from './cps-slider.component';
+
+describe('CpsSliderComponent', () => {
+  let fixture: ComponentFixture<CpsSliderComponent>;
+  const el = () => fixture.nativeElement as HTMLElement;
+  const input = () =>
+    el().querySelector('[data-testid="cps-slider-input"]') as HTMLInputElement;
+
+  /** What a user's drag or key press does to the native input. */
+  function slideTo(value: number): void {
+    input().value = String(value);
+    input().dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CpsSliderComponent]
+    }).compileComponents();
+    fixture = TestBed.createComponent(CpsSliderComponent);
+  });
+
+  it('should label the range input and show its value with the suffix', () => {
+    fixture.componentRef.setInput('label', 'Transparency');
+    fixture.componentRef.setInput('max', 70);
+    fixture.componentRef.setInput('value', 30);
+    fixture.componentRef.setInput('showValue', true);
+    fixture.componentRef.setInput('valueSuffix', '%');
+    fixture.detectChanges();
+
+    const label = el().querySelector('label') as HTMLLabelElement;
+    expect(label.textContent).toBe('Transparency');
+    expect(label.htmlFor).toBe(input().id);
+    expect(input().type).toBe('range');
+    expect(input().max).toBe('70');
+    expect(input().value).toBe('30');
+    expect(input().getAttribute('aria-valuetext')).toBe('30%');
+    expect(
+      el().querySelector('[data-testid="cps-slider-value"]')?.textContent
+    ).toBe('30%');
+  });
+
+  it('should emit the new value as a number and move the fill', () => {
+    const emitted: number[] = [];
+    fixture.componentInstance.valueChanged.subscribe((v) => emitted.push(v));
+    fixture.componentRef.setInput('min', 0);
+    fixture.componentRef.setInput('max', 80);
+    fixture.componentRef.setInput('step', 5);
+    fixture.detectChanges();
+
+    slideTo(20);
+
+    expect(emitted).toEqual([20]);
+    expect(input().style.getPropertyValue('--cps-slider-fill')).toBe('25%');
+  });
+
+  it('should use ariaLabel over label for the accessible name', () => {
+    fixture.componentRef.setInput('label', 'Transparency');
+    fixture.componentRef.setInput('ariaLabel', 'Window transparency');
+    fixture.detectChanges();
+
+    expect(input().getAttribute('aria-label')).toBe('Window transparency');
+  });
+
+  it('should not move when disabled', () => {
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    expect(input().disabled).toBe(true);
+    expect(el().querySelector('.cps-slider-container')?.classList).toContain(
+      'cps-slider-disabled'
+    );
+  });
+
+  describe('in a reactive form', () => {
+    @Component({
+      imports: [CpsSliderComponent, ReactiveFormsModule],
+      template: `<cps-slider label="Level" [formControl]="control" />`
+    })
+    class HostComponent {
+      readonly control = new FormControl(40);
+    }
+
+    let host: ComponentFixture<HostComponent>;
+    const hostInput = () =>
+      host.nativeElement.querySelector('input') as HTMLInputElement;
+
+    beforeEach(() => {
+      host = TestBed.createComponent(HostComponent);
+      host.detectChanges();
+    });
+
+    it('should show the control value and write user changes back', () => {
+      expect(hostInput().value).toBe('40');
+
+      hostInput().value = '60';
+      hostInput().dispatchEvent(new Event('input'));
+
+      expect(host.componentInstance.control.value).toBe(60);
+    });
+
+    it('should follow the control being disabled', () => {
+      host.componentInstance.control.disable();
+      host.detectChanges();
+
+      expect(hostInput().disabled).toBe(true);
+    });
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.ts
new file mode 100644
index 0000000..b8baff7
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.ts
@@ -0,0 +1,177 @@
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { CpsInfoCircleComponent, CpsTooltipPosition } from 'cps-ui-kit';
+
+let nextId = 0;
+
+/**
+ * CpsSliderComponent picks a number from a range by dragging a thumb along a
+ * track, or with the arrow, Page Up/Down, Home and End keys.
+ *
+ * Written to cps-ui-kit's conventions, which has no slider yet, and kept in
+ * its own folder so it can move into the kit unchanged. Depends only on
+ * Angular and cps-ui-kit's public API.
+ * @group Components
+ */
+@Component({
+  selector: 'cps-slider',
+  imports: [CpsInfoCircleComponent],
+  templateUrl: './cps-slider.component.html',
+  styleUrl: './cps-slider.component.scss'
+})
+export class CpsSliderComponent implements ControlValueAccessor {
+  /**
+   * Label of the slider component.
+   * @group Props
+   */
+  @Input() label = '';
+
+  /**
+   * Aria label for the slider component, used for accessibility, it takes precedence over label.
+   * @group Props
+   */
+  @Input() ariaLabel = '';
+
+  /**
+   * Lowest value of the slider.
+   * @group Props
+   */
+  @Input() min = 0;
+
+  /**
+   * Highest value of the slider.
+   * @group Props
+   */
+  @Input() max = 100;
+
+  /**
+   * Difference between two neighbouring values.
+   * @group Props
+   */
+  @Input() step = 1;
+
+  /**
+   * Width of the track, of type number denoting pixels or string.
+   * @group Props
+   */
+  @Input() width: number | string = '10rem';
+
+  /**
+   * Determines whether the current value is shown next to the track.
+   * @group Props
+   */
+  @Input() showValue = false;
+
+  /**
+   * Text appended to the shown and announced value, e.g. '%'.
+   * @group Props
+   */
+  @Input() valueSuffix = '';
+
+  /**
+   * Determines whether the slider component is disabled.
+   * @group Props
+   */
+  @Input() disabled = false;
+
+  /**
+   * When it is not an empty string, an info icon is displayed to show text for more info.
+   * @group Props
+   */
+  @Input() infoTooltip = '';
+
+  /**
+   * InfoTooltip class for styling.
+   * @group Props
+   */
+  @Input() infoTooltipClass = 'cps-tooltip-content';
+
+  /**
+   * Size of infoTooltip, of type number denoting pixels or string.
+   * @group Props
+   */
+  @Input() infoTooltipMaxWidth: number | string = '100%';
+
+  /**
+   * Determines whether the infoTooltip is persistent.
+   * @group Props
+   */
+  @Input() infoTooltipPersistent = false;
+
+  /**
+   * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+   * @group Props
+   */
+  @Input() infoTooltipPosition: CpsTooltipPosition = 'top';
+
+  /**
+   * Value of the slider component.
+   * @default 0
+   * @group Props
+   */
+  @Input() value = 0;
+
+  /**
+   * Callback to invoke on value change.
+   * @param {number} number - value changed.
+   * @group Emits
+   */
+  @Output() valueChanged = new EventEmitter<number>();
+
+  readonly inputId = `cps-slider-${nextId++}`;
+
+  private readonly _control = inject(NgControl, {
+    self: true,
+    optional: true
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange = (_value: number) => {};
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onTouched = () => {};
+
+  constructor() {
+    if (this._control) {
+      this._control.valueAccessor = this;
+    }
+  }
+
+  get cvtWidth(): string {
+    return typeof this.width === 'number' ? `${this.width}px` : this.width;
+  }
+
+  /** How far along the track the value is, for the filled part. */
+  get fill(): string {
+    const span = this.max - this.min;
+    const ratio = span > 0 ? (this.value - this.min) / span : 0;
+    return `${Math.min(Math.max(ratio, 0), 1) * 100}%`;
+  }
+
+  get valueText(): string {
+    return `${this.value}${this.valueSuffix}`;
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  writeValue(value: number | null): void {
+    this.value = typeof value === 'number' ? value : this.min;
+  }
+
+  setDisabledState(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  updateValueEvent(event: Event): void {
+    const value = Number((event.target as HTMLInputElement).value);
+    this.value = value;
+    this.onChange(value);
+    this.valueChanged.emit(value);
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
index ff8a9f7..e479950 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
@@ -9,6 +9,16 @@
       {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
     </p>
     <div class="uwt-inspector-dialog__actions">
+      <cps-slider
+        label="Transparency"
+        [max]="maxTransparency"
+        [step]="5"
+        width="6rem"
+        [showValue]="true"
+        valueSuffix="%"
+        [value]="transparency()"
+        (valueChanged)="setTransparency($event)">
+      </cps-slider>
       <cps-switch
         label="Pause live updates"
         [value]="store.paused()"
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
index 045b138..27d5d21 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
@@ -56,7 +56,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.5rem 1rem;
 }
 
 .uwt-inspector-dialog__paused {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
index 6addbf5..f3f759f 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
@@ -5,13 +5,16 @@ import {
   UwtTelemetryMonitor,
   UwtTelemetryPublishInput
 } from '@absaoss-cps/ngx-ui-watchtower';
-import { CPS_LIVE_ANNOUNCER_SERVICE } from 'cps-ui-kit';
+import { CPS_LIVE_ANNOUNCER_SERVICE, CpsDialogConfig } from 'cps-ui-kit';
 import * as exportUtil from '../uwt-inspector-export/uwt-inspector-export';
 import {
   UWT_INSPECTOR_FLUSH_MS,
   UwtInspectorStore
 } from '../uwt-inspector-store/uwt-inspector-store';
-import { UwtInspectorDialogComponent } from './uwt-inspector-dialog.component';
+import {
+  UWT_INSPECTOR_TRANSPARENCY_KEY,
+  UwtInspectorDialogComponent
+} from './uwt-inspector-dialog.component';
 
 const bi = (name: string, theme = 'dark'): UwtTelemetryPublishInput => ({
   kind: 'bi',
@@ -63,6 +66,7 @@ describe('UwtInspectorDialogComponent', () => {
   let fixture: ComponentFixture<UwtInspectorDialogComponent>;
   let monitor: UwtTelemetryMonitor;
   let announce: jest.Mock;
+  let dialogConfig: CpsDialogConfig;
 
   const el = () => fixture.nativeElement as HTMLElement;
   /** The popup's own actions, as its buttons and switch call them. */
@@ -97,6 +101,7 @@ describe('UwtInspectorDialogComponent', () => {
   beforeEach(async () => {
     jest.useFakeTimers();
     announce = jest.fn();
+    dialogConfig = {};
     await TestBed.configureTestingModule({
       imports: [UwtInspectorDialogComponent, NoopAnimationsModule],
       providers: [
@@ -111,7 +116,8 @@ describe('UwtInspectorDialogComponent', () => {
         {
           provide: CPS_LIVE_ANNOUNCER_SERVICE,
           useValue: { announce, clear: jest.fn() }
-        }
+        },
+        { provide: CpsDialogConfig, useValue: dialogConfig }
       ]
     }).compileComponents();
     monitor = TestBed.inject(UwtTelemetryMonitor);
@@ -123,6 +129,7 @@ describe('UwtInspectorDialogComponent', () => {
     fixture.destroy();
     jest.useRealTimers();
     jest.restoreAllMocks();
+    localStorage.removeItem(UWT_INSPECTOR_TRANSPARENCY_KEY);
   });
 
   it('should open empty, with three sections and an explanation', () => {
@@ -335,6 +342,39 @@ describe('UwtInspectorDialogComponent', () => {
     expect(seen).toHaveLength(0);
   });
 
+  it('should make the whole window see-through, and remember it', () => {
+    expect(dialogConfig.style).toEqual({ opacity: '1' });
+
+    const slider = el().querySelector('cps-slider input') as HTMLInputElement;
+    slider.value = '30';
+    slider.dispatchEvent(new Event('input'));
+
+    expect(dialogConfig.style).toEqual({ opacity: '0.7' });
+    expect(localStorage.getItem(UWT_INSPECTOR_TRANSPARENCY_KEY)).toBe('30');
+  });
+
+  it('should reopen at the remembered transparency', () => {
+    localStorage.setItem(UWT_INSPECTOR_TRANSPARENCY_KEY, '40');
+    const reopened = TestBed.createComponent(UwtInspectorDialogComponent);
+    reopened.detectChanges();
+
+    expect(dialogConfig.style).toEqual({ opacity: '0.6' });
+    expect(
+      (reopened.nativeElement as HTMLElement).querySelector<HTMLInputElement>(
+        'cps-slider input'
+      )?.value
+    ).toBe('40');
+    reopened.destroy();
+  });
+
+  it('should open opaque when the remembered value is out of range', () => {
+    localStorage.setItem(UWT_INSPECTOR_TRANSPARENCY_KEY, '95');
+    const reopened = TestBed.createComponent(UwtInspectorDialogComponent);
+
+    expect(dialogConfig.style).toEqual({ opacity: '1' });
+    reopened.destroy();
+  });
+
   it('should stop observing when closed', () => {
     expect(monitor.observed).toBe(true);
     fixture.destroy();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
index 146ad57..b5cfd96 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
@@ -5,13 +5,16 @@ import {
   computed,
   DestroyRef,
   ElementRef,
-  inject
+  inject,
+  signal
 } from '@angular/core';
 import {
   CPS_LIVE_ANNOUNCER_SERVICE,
   CpsButtonComponent,
+  CpsDialogConfig,
   CpsSwitchComponent
 } from 'cps-ui-kit';
+import { CpsSliderComponent } from '../cps-slider/cps-slider.component';
 import { UWT_EVENT_INSPECTOR_CONFIG } from '../uwt-inspector.models/uwt-inspector.models';
 import {
   UWT_DEFAULT_INSPECTOR_CONFIG,
@@ -29,10 +32,21 @@ import {
   uwtIsApplePlatform,
   uwtShortcutLabel
 } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
+import {
+  uwtSafe,
+  uwtSafeVoid
+} from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
 
 /** Screen readers hear about new events at most this often, in ms. */
 const ANNOUNCE_EVERY_MS = 10_000;
 
+/** How see-through the window can get, in percent, so it never vanishes. */
+export const UWT_INSPECTOR_MAX_TRANSPARENCY = 70;
+
+/** Where this browser remembers the chosen transparency. */
+export const UWT_INSPECTOR_TRANSPARENCY_KEY =
+  'ngx-ui-watchtower.eventInspector.transparency';
+
 /**
  * The Event Inspector's content, opened by
  * {@link UwtEventInspectorService} inside a non-modal cps-dialog.
@@ -48,6 +62,7 @@ const ANNOUNCE_EVERY_MS = 10_000;
   selector: 'uwt-inspector-dialog',
   imports: [
     CpsButtonComponent,
+    CpsSliderComponent,
     CpsSwitchComponent,
     UwtInspectorSectionComponent
   ],
@@ -65,6 +80,9 @@ export class UwtInspectorDialogComponent {
     optional: true
   });
 
+  /** The window's own config: cps-dialog binds its `style` to the window. */
+  private readonly dialogConfig = inject(CpsDialogConfig, { optional: true });
+
   private readonly config = {
     ...UWT_DEFAULT_INSPECTOR_CONFIG,
     shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
@@ -83,11 +101,15 @@ export class UwtInspectorDialogComponent {
     uwtIsApplePlatform(this.document.defaultView?.navigator)
   );
 
+  protected readonly maxTransparency = UWT_INSPECTOR_MAX_TRANSPARENCY;
+  protected readonly transparency = signal(this.storedTransparency());
+
   private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
 
   constructor() {
     const timer = setInterval(() => this.announceNew(), ANNOUNCE_EVERY_MS);
     inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    this.applyTransparency(this.transparency());
   }
 
   /** Whether keyboard focus is anywhere in the popup, header included. */
@@ -119,6 +141,46 @@ export class UwtInspectorDialogComponent {
     this.announce('History cleared. Capturing continues.');
   }
 
+  /** Lets the app show through the window, and remembers the choice. */
+  protected setTransparency(percent: number): void {
+    this.transparency.set(percent);
+    this.applyTransparency(percent);
+    uwtSafeVoid('transparency.save', () =>
+      this.document.defaultView?.localStorage.setItem(
+        UWT_INSPECTOR_TRANSPARENCY_KEY,
+        String(percent)
+      )
+    );
+  }
+
+  /**
+   * A new `style` object, rather than this component's own styles, so the
+   * window's header and frame turn see-through too.
+   */
+  private applyTransparency(percent: number): void {
+    if (this.dialogConfig) {
+      this.dialogConfig.style = {
+        ...this.dialogConfig.style,
+        opacity: String((100 - percent) / 100)
+      };
+    }
+  }
+
+  /** The last choice in this browser, or fully opaque. */
+  private storedTransparency(): number {
+    const stored = uwtSafe(
+      'transparency.read',
+      () =>
+        Number(
+          this.document.defaultView?.localStorage.getItem(
+            UWT_INSPECTOR_TRANSPARENCY_KEY
+          )
+        ),
+      0
+    );
+    return stored >= 0 && stored <= UWT_INSPECTOR_MAX_TRANSPARENCY ? stored : 0;
+  }
+
   /** One polite summary of what arrived since the last one, if anything. */
   private announceNew(): void {
     if (this.store.paused()) {

From dceee4329969a0b48ee843afe29dacb6bf1429f9 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 12:38:03 +0100
Subject: [PATCH 06/51] docking

---
 projects/ngx-ui-watchtower/DESIGN.md          |  62 +++--
 projects/ngx-ui-watchtower/README.md          |   3 +-
 .../uwt-event-inspector.service.spec.ts       | 138 +++++++++-
 .../uwt-event-inspector.service.ts            | 247 +++++++++++++-----
 ...uwt-inspector-dock-switcher.component.html |  51 ++++
 ...uwt-inspector-dock-switcher.component.scss |  70 +++++
 ...-inspector-dock-switcher.component.spec.ts |  40 +++
 .../uwt-inspector-dock-switcher.component.ts  |  47 ++++
 .../uwt-inspector-exporter.ts                 |   5 +-
 .../uwt-inspector-pane.component.html         |  16 ++
 .../uwt-inspector-pane.component.scss         |  90 +++++++
 .../uwt-inspector-pane.component.spec.ts      | 151 +++++++++++
 .../uwt-inspector-pane.component.ts           | 170 ++++++++++++
 .../uwt-inspector-preferences.spec.ts         |  90 +++++++
 .../uwt-inspector-preferences.ts              | 126 +++++++++
 .../uwt-inspector-session.spec.ts             |  28 ++
 .../uwt-inspector-session.ts                  |  53 ++++
 .../uwt-inspector-store.ts                    |   7 +-
 .../uwt-inspector-window.spec.ts              | 169 ++++++++++++
 .../uwt-inspector-window.ts                   | 167 ++++++++++++
 .../uwt-inspector.models.ts                   |  24 ++
 .../uwt-inspector.component.html}             |  75 ++++--
 .../uwt-inspector.component.scss}             |  60 ++++-
 .../uwt-inspector.component.spec.ts}          |  77 ++++--
 .../uwt-inspector.component.ts}               | 121 +++++----
 .../event-inspector/src/public-api.ts         |   1 +
 26 files changed, 1886 insertions(+), 202 deletions(-)
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.html
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
 rename projects/ngx-ui-watchtower/event-inspector/src/lib/{uwt-inspector-dialog/uwt-inspector-dialog.component.html => uwt-inspector/uwt-inspector.component.html} (52%)
 rename projects/ngx-ui-watchtower/event-inspector/src/lib/{uwt-inspector-dialog/uwt-inspector-dialog.component.scss => uwt-inspector/uwt-inspector.component.scss} (59%)
 rename projects/ngx-ui-watchtower/event-inspector/src/lib/{uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts => uwt-inspector/uwt-inspector.component.spec.ts} (81%)
 rename projects/ngx-ui-watchtower/event-inspector/src/lib/{uwt-inspector-dialog/uwt-inspector-dialog.component.ts => uwt-inspector/uwt-inspector.component.ts} (61%)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 71d0554..a8a85f1 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -138,7 +138,8 @@ Everything each entry point exports, by role.
 `UwtEventInspectorService`, `UWT_EVENT_INSPECTOR_CONFIG`,
 `UwtEventInspectorConfig`, `UWT_DEFAULT_INSPECTOR_CONFIG`,
 `UwtInspectorShortcut`, `UWT_DEFAULT_INSPECTOR_SHORTCUTS`,
-`UwtInspectorExport`, `UwtInspectorSectionId`, and the filter types
+`UwtInspectorDock`, `UwtInspectorExport`, `UwtInspectorSectionId`, and the
+filter types
 `UwtInspectorFilterState`, `UwtInspectorFieldFilter`,
 `UwtInspectorFilterOperator` — see §12, "Event Inspector".
 
@@ -239,6 +240,14 @@ shell's.
   in its own folder, `event-inspector/src/lib/cps-slider/`, depending only
   on Angular and the kit's public API, so it can move into cps-ui-kit as
   is.
+- **The separate window is drawn by the app.** The inspector renders into
+  the window's document from the app's own Angular application, with that
+  document as its `DOCUMENT` and its own cps-ui-kit notification and
+  announcer services, so tooltips, menus and messages appear in the window.
+  The app's stylesheets are copied in and kept in step, since Angular adds
+  a component's styles when it first renders. One session holds the
+  captured history from opening to closing, so moving between docks — each
+  a fresh view — loses nothing.
 - **Test doubles live in the specs that use them**, declared inline, never in
   a shared file and never exported. The one browser gap needing a stub is
   `BroadcastChannel`, which jsdom doesn't implement.
@@ -1119,9 +1128,10 @@ for the session, `cwr_u` for the user id), the library keeps one
 session ids, each with the time it started, for `sessionElapsed`. It is
 written only while the RUM client's cookies are on, and an id stays until
 five newer sessions have replaced it. The Event Inspector adds one more,
-`ngx-ui-watchtower.eventInspector.transparency`, only once someone moves its
-Transparency slider: a number from 0 to 70. Debug flags are read from
-`localStorage`, never written.
+`ngx-ui-watchtower.eventInspector`, once someone moves, resizes or fades it:
+its dock, the dialog's transparency, each pane's size, and the separate
+window's size and position. Debug flags are read from `localStorage`, never
+written.
 
 ### Scanning values for personal data
 
@@ -2053,12 +2063,31 @@ match exactly, held-down repeats are ignored, and AltGr — which many
 European Windows layouts report as Ctrl+Alt — never triggers it. ⌥⌘8 alone
 is macOS Accessibility Zoom, which is why Shift is part of it.
 
-The popup is not modal: it docks on the right at half the screen (at least
-40rem, or nearly all of a small screen) and leaves the app usable, so you
-can watch events arrive. It is draggable, resizable
-and maximizable. With it open, the shortcut brings focus back to
-it from the app, and closes it when focus is already inside. Escape closes it
-too.
+It opens where it was last — a dialog the first time — and never blocks the
+app, so you can watch events arrive. With it open, the shortcut brings focus
+back to it from the app, and closes it when focus is already inside.
+
+#### Where it opens
+
+The **Dock** buttons at its top right move it, like Chrome DevTools' dock
+side, and the choice is remembered in this browser:
+
+| Dock                | What you get                                                                                                                                                                                                                   |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Dialog (default)    | A non-modal dialog on the right, half the screen wide (at least 40rem, or nearly all of a small screen). Draggable, resizable and maximizable, with a Transparency slider. Escape closes it.                                   |
+| Separate window     | Its own browser window, which it fills: 1200×800 the first time, then wherever it was last. Closing the window closes the inspector, and so does reloading the app.                                                            |
+| Left, right, bottom | A pane beside or below the app, which moves aside to make room. Drag its inner edge, or focus it and use the arrow keys, to resize it between 30rem (12rem at the bottom) and 80% of the screen; each side remembers its size. |
+
+Moving it keeps everything captured, the filters and the pause; pages and
+expanded rows start afresh.
+
+A pane makes room by padding the page's `body` on its side, so content in
+the normal flow moves aside. Elements the app places with `position: fixed`,
+or sizes to `100vw`, stay where they are, and the pane covers their edge.
+
+The separate window has to open from a click or key press — the shortcut and
+the Dock buttons both are — or the browser blocks it. The inspector then
+opens as a dialog, and the console says why.
 
 It works in every environment. To change the keys, turn the shortcut off, or
 limit who can open it:
@@ -2109,9 +2138,10 @@ capturing rather than viewing:
   captured.
 - **Clear** empties the history; capturing continues.
 
-Beside them, **Transparency** lets the app show through the window, so you
-can watch the page and its events together. It goes up to 70%, so the window
-never disappears, and the setting is remembered in this browser.
+As a dialog, it also has **Transparency**, which lets the app show through,
+so you can watch the page and its events together. It goes up to 70%, so the
+dialog never disappears, and the setting is remembered in this browser.
+Panes and the window don't cover the app, so they have none.
 
 Each section keeps the latest 500 events (`maxEventsPerSection`). History is
 discarded when the popup closes.
@@ -2147,8 +2177,10 @@ meta?, label? }`, where `code` is a `KeyboardEvent.code` such as `'Digit8'`
 or `'KeyD'`, and an omitted modifier must be up. Spread
 `UWT_DEFAULT_INSPECTOR_SHORTCUTS` to add one rather than replace them.
 
-`UwtEventInspectorService` opens the popup from code: `open()`,
-`close()`, `toggle()`, and an `isOpen` signal.
+`UwtEventInspectorService` opens it from code: `open()`, `close()`,
+`toggle()`, `setDock(dock)` — a `UwtInspectorDock`: `'dialog'`, `'window'`,
+`'left'`, `'right'` or `'bottom'` — and an `isOpen` signal. `setDock` opens
+it there if it is closed, and remembers the choice like the Dock buttons.
 
 A download is a `UwtInspectorExport`:
 
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index e5d7110..e364c76 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -362,7 +362,8 @@ providers: [provideUwtEventInspector()];
 
 Open it with **⇧⌥⌘8** on macOS or **Ctrl+Alt+Shift+8** on Windows and Linux.
 It lists everything the app sends from that moment on, with search, filters
-and JSON download, and its Transparency slider lets the app show through.
+and JSON download. It opens as a dialog, with a Transparency slider; its Dock
+buttons move it to its own window or a pane on the left, right or bottom.
 
 ## Testing
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index ce83904..0657c18 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -1,12 +1,20 @@
 import { PLATFORM_ID } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { Subject } from 'rxjs';
-import { CpsDialogService } from 'cps-ui-kit';
+import {
+  UWT_TELEMETRY_IDENTITY,
+  UwtTelemetryMonitor
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CPS_LIVE_ANNOUNCER_SERVICE, CpsDialogService } from 'cps-ui-kit';
 import {
   UWT_EVENT_INSPECTOR_CONFIG,
   UwtEventInspectorConfig
 } from '../uwt-inspector.models/uwt-inspector.models';
-import { UwtInspectorDialogComponent } from '../uwt-inspector-dialog/uwt-inspector-dialog.component';
+import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component';
+import { UWT_INSPECTOR_PREFERENCES_KEY } from '../uwt-inspector-preferences/uwt-inspector-preferences';
+import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
+import * as windowHost from '../uwt-inspector-window/uwt-inspector-window';
 import { UwtEventInspectorService } from './uwt-event-inspector.service';
 
 /** Stands in for CpsDialogService, recording what was opened. */
@@ -65,7 +73,16 @@ describe('UwtEventInspectorService', () => {
       providers: [
         { provide: CpsDialogService, useValue: dialogs },
         { provide: PLATFORM_ID, useValue: platform },
-        { provide: UWT_EVENT_INSPECTOR_CONFIG, useValue: config }
+        { provide: UWT_EVENT_INSPECTOR_CONFIG, useValue: config },
+        {
+          provide: UWT_TELEMETRY_IDENTITY,
+          useValue: { application: 'shop', environment: 'test', version: '1' }
+        },
+        {
+          provide: CPS_LIVE_ANNOUNCER_SERVICE,
+          useValue: { announce: jest.fn(), clear: jest.fn() }
+        },
+        provideNoopAnimations()
       ]
     });
     return TestBed.inject(UwtEventInspectorService);
@@ -74,15 +91,37 @@ describe('UwtEventInspectorService', () => {
   afterEach(() => {
     TestBed.resetTestingModule();
     jest.restoreAllMocks();
+    localStorage.removeItem(UWT_INSPECTOR_PREFERENCES_KEY);
   });
 
+  const pane = () => document.querySelector('uwt-inspector-pane');
+  const remember = (preferences: object) =>
+    localStorage.setItem(
+      UWT_INSPECTOR_PREFERENCES_KEY,
+      JSON.stringify(preferences)
+    );
+  const stored = () =>
+    JSON.parse(localStorage.getItem(UWT_INSPECTOR_PREFERENCES_KEY) ?? '{}');
+  /** A stand-in window host, recording what the service asked of it. */
+  function fakeWindow() {
+    const host = {
+      focus: jest.fn(),
+      containsFocus: jest.fn(() => false),
+      destroy: jest.fn()
+    };
+    const open = jest
+      .spyOn(windowHost, 'uwtOpenInspectorWindow')
+      .mockReturnValue(host);
+    return { host, open };
+  }
+
   it('should open the popup, non-modal and named, on the default shortcut', () => {
     create().install();
 
     const event = press();
 
     expect(dialogs.opened).toHaveLength(1);
-    expect(dialogs.opened[0].component).toBe(UwtInspectorDialogComponent);
+    expect(dialogs.opened[0].component).toBe(UwtInspectorComponent);
     expect(dialogs.opened[0].config).toMatchObject({
       modal: false,
       ariaLabel: 'Event Inspector',
@@ -191,4 +230,95 @@ describe('UwtEventInspectorService', () => {
     press();
     expect(dialogs.opened).toHaveLength(0);
   });
+
+  it('should open where it was last', () => {
+    remember({ dock: 'right' });
+    create().open();
+
+    expect(dialogs.opened).toHaveLength(0);
+    expect(pane()?.classList).toContain('uwt-inspector-pane--right');
+  });
+
+  it('should move between docks, keeping the session, and remember the dock', () => {
+    const service = create();
+    service.open();
+    const store = TestBed.inject(UwtInspectorSession).store;
+
+    service.setDock('left');
+
+    expect(dialogs.close).toHaveBeenCalledTimes(1);
+    expect(pane()?.classList).toContain('uwt-inspector-pane--left');
+    expect(service.isOpen()).toBe(true);
+    expect(TestBed.inject(UwtInspectorSession).store).toBe(store);
+    expect(stored().dock).toBe('left');
+
+    service.close();
+    expect(pane()).toBeNull();
+    expect(service.isOpen()).toBe(false);
+    expect(TestBed.inject(UwtTelemetryMonitor).observed).toBe(false);
+  });
+
+  it('should open a window titled after the app, where it was last', () => {
+    remember({ window: { width: 900, height: 700, left: 10, top: 20 } });
+    const { host, open } = fakeWindow();
+    const service = create();
+
+    service.setDock('window');
+
+    expect(open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Event Inspector · shop',
+        geometry: { width: 900, height: 700, left: 10, top: 20 }
+      })
+    );
+    expect(host.focus).toHaveBeenCalled();
+    expect(dialogs.opened).toHaveLength(0);
+  });
+
+  it('should end the session when the user closes the window', () => {
+    const { host, open } = fakeWindow();
+    const service = create();
+    service.setDock('window');
+    const options = open.mock.calls[0][0];
+
+    options.onGeometry({ width: 800, height: 600, left: 1, top: 2 });
+    options.onClosed();
+
+    expect(service.isOpen()).toBe(false);
+    expect(host.destroy).toHaveBeenCalled();
+    expect(stored().window).toEqual({
+      width: 800,
+      height: 600,
+      left: 1,
+      top: 2
+    });
+  });
+
+  it('should open a dialog, warning once, when the browser blocks the window', () => {
+    jest.spyOn(windowHost, 'uwtOpenInspectorWindow').mockReturnValue(undefined);
+    const warn = jest
+      .spyOn(console, 'warn')
+      .mockImplementation(() => undefined);
+    const service = create();
+
+    service.setDock('window');
+    service.close();
+    service.setDock('window');
+
+    expect(dialogs.opened).toHaveLength(2);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(stored().dock).toBe('window');
+  });
+
+  it('should end the session when the user closes the dialog, but not on a move', () => {
+    const service = create();
+    service.open();
+    service.setDock('bottom');
+    expect(service.isOpen()).toBe(true);
+
+    service.setDock('dialog');
+    dialogs.destroyed.next();
+    expect(service.isOpen()).toBe(false);
+    expect(pane()).toBeNull();
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index c3495b5..0458f68 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -1,35 +1,50 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
+  ApplicationRef,
+  createComponent,
   DestroyRef,
+  EnvironmentInjector,
   inject,
   Injectable,
   NgZone,
   PLATFORM_ID,
   signal
 } from '@angular/core';
+import { UWT_TELEMETRY_IDENTITY } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsDialogRef, CpsDialogService } from 'cps-ui-kit';
 import {
   UWT_EVENT_INSPECTOR_CONFIG,
-  UwtEventInspectorConfig
+  UwtEventInspectorConfig,
+  UwtInspectorDock,
+  UwtInspectorPaneSide
 } from '../uwt-inspector.models/uwt-inspector.models';
 import { UWT_DEFAULT_INSPECTOR_CONFIG } from '../uwt-inspector-store/uwt-inspector-store';
 import {
   UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   uwtMatchesShortcut
 } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
-import { UwtInspectorDialogComponent } from '../uwt-inspector-dialog/uwt-inspector-dialog.component';
+import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component';
+import { UwtInspectorPaneComponent } from '../uwt-inspector-pane/uwt-inspector-pane.component';
+import { uwtOpenInspectorWindow } from '../uwt-inspector-window/uwt-inspector-window';
+import {
+  UwtInspectorHost,
+  UwtInspectorSession
+} from '../uwt-inspector-session/uwt-inspector-session';
+import { UwtInspectorPreferenceStorage } from '../uwt-inspector-preferences/uwt-inspector-preferences';
 import {
   uwtSafe,
   uwtSafeVoid
 } from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
 
 /**
- * Opens and closes the Event Inspector, and listens for its
- * keyboard shortcut once {@link provideUwtEventInspector} installs it.
+ * Opens and closes the Event Inspector, moves it between docks, and
+ * listens for its keyboard shortcut once {@link provideUwtEventInspector}
+ * installs it.
  *
- * The popup is non-modal: the application stays usable while events
- * arrive. With the popup open, the shortcut returns focus to it from the
- * application, and closes it when focus is already inside.
+ * It opens where it was last — a dialog the first time — and the
+ * application stays usable while events arrive. With it open, the shortcut
+ * returns focus to it from the application, and closes it when focus is
+ * already inside.
  *
  * @example
  * ```typescript
@@ -44,8 +59,16 @@ export class UwtEventInspectorService {
   private readonly dialogs = inject(CpsDialogService);
   private readonly document = inject(DOCUMENT);
   private readonly zone = inject(NgZone);
+  private readonly appRef = inject(ApplicationRef);
+  private readonly environment = inject(EnvironmentInjector);
   private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly destroyRef = inject(DestroyRef);
+  private readonly session = inject(UwtInspectorSession);
+  private readonly preferences = inject(UwtInspectorPreferenceStorage);
+  private readonly identity = inject(UWT_TELEMETRY_IDENTITY, {
+    optional: true
+  });
+
   private readonly config: UwtEventInspectorConfig = {
     ...UWT_DEFAULT_INSPECTOR_CONFIG,
     shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
@@ -61,12 +84,21 @@ export class UwtEventInspectorService {
     false
   );
 
-  private ref?: CpsDialogRef<UwtInspectorDialogComponent>;
+  private host?: UwtInspectorHost;
   private installed = false;
+  private warnedBlocked = false;
 
-  /** Whether the popup is currently open. */
+  /** Whether the inspector is currently open, in any dock. */
   readonly isOpen = signal(false);
 
+  constructor() {
+    this.session.controls = {
+      setDock: (dock) => this.setDock(dock),
+      close: () => this.close()
+    };
+    this.destroyRef.onDestroy(() => this.close());
+  }
+
   /**
    * Starts listening for the shortcut. Called by
    * {@link provideUwtEventInspector}; does nothing on the server,
@@ -83,88 +115,171 @@ export class UwtEventInspectorService {
     }
     this.installed = true;
 
-    const listener = (event: KeyboardEvent) =>
-      uwtSafeVoid('shortcut', () => {
-        if (!this.config.shortcuts.some((s) => uwtMatchesShortcut(event, s))) {
-          return;
-        }
-        event.preventDefault();
-        this.zone.run(() => this.onShortcut());
-      });
-
     // Capture phase, so it works even where a component stops propagation.
     // Outside Angular's zone, so ordinary typing triggers no change detection.
     this.zone.runOutsideAngular(() =>
-      this.document.addEventListener('keydown', listener, true)
+      this.document.addEventListener('keydown', this.onKeydown, true)
+    );
+    this.destroyRef.onDestroy(() =>
+      this.document.removeEventListener('keydown', this.onKeydown, true)
     );
-    this.destroyRef.onDestroy(() => {
-      this.document.removeEventListener('keydown', listener, true);
-      this.close();
-    });
   }
 
-  /** Opens the popup, or moves focus into it when already open. */
+  /** Opens the inspector where it was last, or focuses it when open. */
   open(): void {
     if (!this.enabled || !this.isBrowser) {
       return;
     }
-    if (this.ref) {
-      this.ref.componentInstance?.focusSearch();
+    if (this.host) {
+      this.host.focus();
       return;
     }
-    uwtSafeVoid('open', () => {
-      const ref: CpsDialogRef<UwtInspectorDialogComponent> = this.dialogs.open(
-        UwtInspectorDialogComponent,
-        {
-          headerTitle: 'Event Inspector',
-          ariaLabel: 'Event Inspector',
-          modal: false,
-          draggable: true,
-          resizable: true,
-          maximizable: true,
-          closeOnEscape: true,
-          // Docked right at half the screen, so the application stays
-          // visible and clickable beside it, but never narrower than 40rem
-          // (nearly all of a small screen), so the tables have room;
-          // resizable, and maximizable for a closer look.
-          position: 'right',
-          width: 'clamp(min(40rem, 96vw), 50vw, 64rem)',
-          height: '88vh',
-          minWidth: 'min(22rem, 96vw)',
-          autoFocus: '.uwt-inspector-search input'
-        }
-      );
-      this.ref = ref;
-      this.isOpen.set(true);
-      ref.onDestroy.subscribe(() => {
-        if (this.ref === ref) {
-          this.ref = undefined;
-          this.isOpen.set(false);
-        }
-      });
-    });
+    this.show(this.preferences.read().dock);
+  }
+
+  /**
+   * Moves the inspector to `dock`, opening it there when closed, and
+   * remembers the choice. Its captured events, filters and pause carry
+   * over. Opening a window must happen during a click or key press, or the
+   * browser blocks it; the inspector then opens as a dialog.
+   */
+  setDock(dock: UwtInspectorDock): void {
+    if (!this.enabled || !this.isBrowser) {
+      return;
+    }
+    this.preferences.update({ dock });
+    const previous = this.host;
+    this.host = undefined;
+    uwtSafeVoid('setDock', () => previous?.destroy());
+    this.show(dock);
+    uwtSafeVoid('focus', () => this.host?.focus());
   }
 
-  /** Closes the popup, discarding what it captured. */
+  /** Closes the inspector, discarding what it captured. */
   close(): void {
-    uwtSafeVoid('close', () => this.ref?.close());
+    const host = this.host;
+    this.host = undefined;
+    uwtSafeVoid('close', () => host?.destroy());
+    this.session.end();
+    this.isOpen.set(false);
   }
 
   /**
-   * What the shortcut does: open when closed; with the popup open, close
-   * it if focus is inside, otherwise bring focus back to it.
+   * What the shortcut does: open when closed; with the inspector open,
+   * close it if focus is inside, otherwise bring focus back to it.
    */
   toggle(): void {
-    if (!this.ref) {
+    if (!this.host) {
       this.open();
-    } else if (this.ref.componentInstance?.containsFocus()) {
+    } else if (this.host.containsFocus()) {
       this.close();
     } else {
-      this.ref.componentInstance?.focusSearch();
+      this.host.focus();
+    }
+  }
+
+  private readonly onKeydown = (event: KeyboardEvent): void =>
+    uwtSafeVoid('shortcut', () => {
+      if (!this.config.shortcuts.some((s) => uwtMatchesShortcut(event, s))) {
+        return;
+      }
+      event.preventDefault();
+      this.zone.run(() => this.toggle());
+    });
+
+  private show(dock: UwtInspectorDock): void {
+    uwtSafeVoid('open', () => {
+      this.host =
+        dock === 'dialog'
+          ? this.openDialog()
+          : dock === 'window'
+            ? (this.openWindow() ?? this.openDialog())
+            : this.openPane(dock);
+      this.isOpen.set(true);
+    });
+  }
+
+  /** The user closed it themselves: the dialog's ✕ or Escape, the window. */
+  private closedByUser(host: UwtInspectorHost): void {
+    if (this.host === host) {
+      this.close();
     }
   }
 
-  private onShortcut(): void {
-    this.toggle();
+  private openDialog(): UwtInspectorHost {
+    const ref: CpsDialogRef<UwtInspectorComponent> = this.dialogs.open(
+      UwtInspectorComponent,
+      {
+        headerTitle: 'Event Inspector',
+        ariaLabel: 'Event Inspector',
+        modal: false,
+        draggable: true,
+        resizable: true,
+        maximizable: true,
+        closeOnEscape: true,
+        // Docked right at half the screen, so the application stays
+        // visible and clickable beside it, but never narrower than 40rem
+        // (nearly all of a small screen), so the tables have room;
+        // resizable, and maximizable for a closer look.
+        position: 'right',
+        width: 'clamp(min(40rem, 96vw), 50vw, 64rem)',
+        height: '88vh',
+        minWidth: 'min(22rem, 96vw)',
+        autoFocus: '.uwt-inspector-search input'
+      }
+    );
+    const host: UwtInspectorHost = {
+      focus: () => ref.componentInstance?.focusSearch(),
+      containsFocus: () => !!ref.componentInstance?.containsFocus(),
+      destroy: () => ref.close()
+    };
+    ref.onDestroy.subscribe(() => this.closedByUser(host));
+    return host;
+  }
+
+  private openPane(side: UwtInspectorPaneSide): UwtInspectorHost {
+    const element = this.document.body.appendChild(
+      this.document.createElement('uwt-inspector-pane')
+    );
+    const ref = createComponent(UwtInspectorPaneComponent, {
+      environmentInjector: this.environment,
+      hostElement: element
+    });
+    ref.setInput('side', side);
+    this.appRef.attachView(ref.hostView);
+    ref.changeDetectorRef.detectChanges();
+    return {
+      focus: () => ref.instance.content().focusSearch(),
+      containsFocus: () => ref.instance.content().containsFocus(),
+      destroy: () => {
+        this.appRef.detachView(ref.hostView);
+        ref.destroy();
+        element.remove();
+      }
+    };
+  }
+
+  private openWindow(): UwtInspectorHost | undefined {
+    const application = this.identity?.application;
+    const host = uwtOpenInspectorWindow({
+      document: this.document,
+      environment: this.environment,
+      appRef: this.appRef,
+      title: application
+        ? `Event Inspector · ${application}`
+        : 'Event Inspector',
+      geometry: this.preferences.read().window,
+      onClosed: () => host && this.closedByUser(host),
+      onKeydown: this.onKeydown,
+      onGeometry: (window) => this.preferences.update({ window })
+    });
+    if (!host && !this.warnedBlocked) {
+      this.warnedBlocked = true;
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[ngx-ui-watchtower] the browser blocked the Event Inspector window; it opens as a dialog instead. Open it from a click or key press, or allow pop-ups for this site'
+      );
+    }
+    return host;
   }
 }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
new file mode 100644
index 0000000..8f137fd
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
@@ -0,0 +1,51 @@
+<span class="uwt-inspector-dock__label" aria-hidden="true">Dock</span>
+<div
+  class="uwt-inspector-dock__group"
+  role="group"
+  aria-label="Dock the Event Inspector">
+  @for (option of options; track option.dock) {
+    <button
+      type="button"
+      class="uwt-inspector-dock__option"
+      [attr.aria-pressed]="option.dock === dock()"
+      [attr.aria-label]="option.label"
+      [attr.data-dock]="option.dock"
+      [cpsTooltip]="option.label"
+      tooltipPosition="bottom"
+      (click)="choose(option.dock)">
+      @switch (option.dock) {
+        @case ('dialog') {
+          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+            <rect x="5" y="6" width="7" height="5" rx="0.5" class="filled" />
+          </svg>
+        }
+        @case ('window') {
+          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <path d="M9.5 2.5h4v4M13.5 2.5 8 8" />
+            <path
+              d="M12 9.5V12a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 2 12V5a1.5 1.5 0 0 1 1.5-1.5H6" />
+          </svg>
+        }
+        @case ('left') {
+          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+            <rect x="2" y="3" width="4.5" height="10" class="filled" />
+          </svg>
+        }
+        @case ('bottom') {
+          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+            <rect x="2" y="8.5" width="12" height="4.5" class="filled" />
+          </svg>
+        }
+        @case ('right') {
+          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+            <rect x="9.5" y="3" width="4.5" height="10" class="filled" />
+          </svg>
+        }
+      }
+    </button>
+  }
+</div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
new file mode 100644
index 0000000..0aa61fb
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
@@ -0,0 +1,70 @@
+// Styled like cps-button-toggle: calm outline, the current option filled.
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-family: 'Source Sans Pro', sans-serif;
+  color: var(--cps-color-text-dark);
+}
+
+.uwt-inspector-dock__group {
+  display: inline-flex;
+}
+
+.uwt-inspector-dock__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0;
+  border: 0.0625rem solid var(--cps-color-calm);
+  background-color: #fff;
+  color: var(--cps-color-calm);
+  cursor: pointer;
+
+  & + & {
+    margin-left: -0.0625rem;
+  }
+
+  &:first-child {
+    border-radius: 0.25rem 0 0 0.25rem;
+  }
+
+  &:last-child {
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  &:hover {
+    background-color: var(--cps-color-calm-lighten5);
+  }
+
+  &[aria-pressed='true'] {
+    background-color: var(--cps-color-calm);
+    color: #fff;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    position: relative;
+    z-index: 1;
+    outline: 0.0625rem solid var(--cps-color-calm);
+    outline-offset: 0.125rem;
+    box-shadow: 0 0 0 0.25rem var(--cps-color-calm-highlighten);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.2;
+  }
+
+  .filled {
+    fill: currentColor;
+    stroke: none;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
new file mode 100644
index 0000000..ec59faa
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UwtInspectorDock } from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorDockSwitcherComponent } from './uwt-inspector-dock-switcher.component';
+
+describe('UwtInspectorDockSwitcherComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorDockSwitcherComponent>;
+  let chosen: UwtInspectorDock[];
+  const buttons = () =>
+    Array.from(
+      (fixture.nativeElement as HTMLElement).querySelectorAll('button')
+    );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UwtInspectorDockSwitcherComponent);
+    chosen = [];
+    fixture.componentInstance.dockChange.subscribe((d) => chosen.push(d));
+    fixture.componentRef.setInput('dock', 'right');
+    fixture.detectChanges();
+  });
+
+  it('should offer every dock, named, with the current one pressed', () => {
+    expect(buttons().map((b) => b.getAttribute('aria-label'))).toEqual([
+      'Dialog',
+      'Separate window',
+      'Dock left',
+      'Dock bottom',
+      'Dock right'
+    ]);
+    expect(
+      buttons().map((b) => b.getAttribute('aria-pressed') === 'true')
+    ).toEqual([false, false, false, false, true]);
+  });
+
+  it('should ask for another dock, and ignore the current one', () => {
+    buttons()[4].click();
+    buttons()[1].click();
+
+    expect(chosen).toEqual(['window']);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
new file mode 100644
index 0000000..8da735d
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output
+} from '@angular/core';
+import { CpsTooltipDirective } from 'cps-ui-kit';
+import {
+  UWT_INSPECTOR_DOCKS,
+  UwtInspectorDock
+} from '../uwt-inspector.models/uwt-inspector.models';
+
+const DOCK_LABEL: Record<UwtInspectorDock, string> = {
+  dialog: 'Dialog',
+  window: 'Separate window',
+  left: 'Dock left',
+  bottom: 'Dock bottom',
+  right: 'Dock right'
+};
+
+/**
+ * Moves the inspector between docks, like Chrome DevTools' dock side: one
+ * icon per dock, the current one pressed. cps-ui-kit has no dock icons, so
+ * they are drawn here.
+ */
+@Component({
+  selector: 'uwt-inspector-dock-switcher',
+  imports: [CpsTooltipDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './uwt-inspector-dock-switcher.component.html',
+  styleUrl: './uwt-inspector-dock-switcher.component.scss'
+})
+export class UwtInspectorDockSwitcherComponent {
+  readonly dock = input.required<UwtInspectorDock>();
+  readonly dockChange = output<UwtInspectorDock>();
+
+  protected readonly options = UWT_INSPECTOR_DOCKS.map((dock) => ({
+    dock,
+    label: DOCK_LABEL[dock]
+  }));
+
+  protected choose(dock: UwtInspectorDock): void {
+    if (dock !== this.dock()) {
+      this.dockChange.emit(dock);
+    }
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
index 0867b31..3e357ca 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
@@ -71,7 +71,10 @@ export class UwtInspectorExporter {
    */
   async copy(section: UwtInspectorSectionId): Promise<boolean> {
     try {
-      await navigator.clipboard.writeText(this.json(section));
+      // The inspector's own window: in a separate window, the app's
+      // clipboard refuses, as the app's page doesn't have focus.
+      const view = this.document.defaultView ?? window;
+      await view.navigator.clipboard.writeText(this.json(section));
       this.announce(
         `${UWT_INSPECTOR_SECTION_NOUN[section]} events copied as JSON.`
       );
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.html
new file mode 100644
index 0000000..7dea2c7
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.html
@@ -0,0 +1,16 @@
+<div
+  class="uwt-inspector-pane__handle"
+  role="separator"
+  tabindex="0"
+  aria-label="Resize the Event Inspector"
+  [attr.aria-orientation]="side() === 'bottom' ? 'horizontal' : 'vertical'"
+  [attr.aria-valuenow]="size()"
+  [attr.aria-valuemin]="limits().min"
+  [attr.aria-valuemax]="limits().max"
+  (pointerdown)="startDrag($event)"
+  (pointermove)="drag($event)"
+  (pointerup)="endDrag()"
+  (pointercancel)="endDrag()"
+  (lostpointercapture)="endDrag()"
+  (keydown)="resizeByKey($event)"></div>
+<uwt-inspector [dock]="side()"></uwt-inspector>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss
new file mode 100644
index 0000000..32259b2
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss
@@ -0,0 +1,90 @@
+// Above the app, below cps-ui-kit's overlays (tooltips use 2000).
+:host {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  box-shadow: 0 0.0625rem 0.5rem #0000004d;
+}
+
+:host(.uwt-inspector-pane--left) {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+:host(.uwt-inspector-pane--right) {
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+:host(.uwt-inspector-pane--bottom) {
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+uwt-inspector {
+  flex: 1;
+  min-height: 0;
+}
+
+// A thin strip on the inner edge, with a short grip in its middle.
+.uwt-inspector-pane__handle {
+  position: absolute;
+  z-index: 1;
+  touch-action: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-radius: 0.0625rem;
+    background-color: var(--cps-color-line-dark);
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    background-color: var(--cps-color-calm);
+  }
+
+  :host(.uwt-inspector-pane--left) &,
+  :host(.uwt-inspector-pane--right) & {
+    top: 0;
+    bottom: 0;
+    width: 0.375rem;
+    cursor: ew-resize;
+
+    &::after {
+      top: calc(50% - 1rem);
+      left: 0.125rem;
+      width: 0.125rem;
+      height: 2rem;
+    }
+  }
+
+  :host(.uwt-inspector-pane--left) & {
+    right: -0.1875rem;
+  }
+
+  :host(.uwt-inspector-pane--right) & {
+    left: -0.1875rem;
+  }
+
+  :host(.uwt-inspector-pane--bottom) & {
+    top: -0.1875rem;
+    right: 0;
+    left: 0;
+    height: 0.375rem;
+    cursor: ns-resize;
+
+    &::after {
+      top: 0.125rem;
+      left: calc(50% - 1rem);
+      width: 2rem;
+      height: 0.125rem;
+    }
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
new file mode 100644
index 0000000..69f0436
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
@@ -0,0 +1,151 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UWT_TELEMETRY_IDENTITY } from '@absaoss-cps/ngx-ui-watchtower';
+import { CPS_LIVE_ANNOUNCER_SERVICE } from 'cps-ui-kit';
+import { UwtInspectorPaneSide } from '../uwt-inspector.models/uwt-inspector.models';
+import { UWT_INSPECTOR_PREFERENCES_KEY } from '../uwt-inspector-preferences/uwt-inspector-preferences';
+import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
+import { UwtInspectorPaneComponent } from './uwt-inspector-pane.component';
+
+// jsdom's viewport is 1024×768, and 1rem is 16px.
+describe('UwtInspectorPaneComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorPaneComponent>;
+
+  const host = () => fixture.nativeElement as HTMLElement;
+  const handle = () =>
+    host().querySelector('.uwt-inspector-pane__handle') as HTMLElement;
+  const stored = () =>
+    JSON.parse(localStorage.getItem(UWT_INSPECTOR_PREFERENCES_KEY) ?? '{}');
+
+  function open(side: UwtInspectorPaneSide): void {
+    fixture = TestBed.createComponent(UwtInspectorPaneComponent);
+    fixture.componentRef.setInput('side', side);
+    fixture.detectChanges();
+  }
+
+  function key(key: string): void {
+    handle().dispatchEvent(new KeyboardEvent('keydown', { key }));
+    fixture.detectChanges();
+  }
+
+  function pointer(type: string, clientX: number, clientY = 0): void {
+    handle().dispatchEvent(
+      new MouseEvent(type, { button: 0, clientX, clientY, bubbles: true })
+    );
+    fixture.detectChanges();
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UwtInspectorPaneComponent, NoopAnimationsModule],
+      providers: [
+        {
+          provide: UWT_TELEMETRY_IDENTITY,
+          useValue: { application: 'app', environment: 'test', version: '1' }
+        },
+        {
+          provide: CPS_LIVE_ANNOUNCER_SERVICE,
+          useValue: { announce: jest.fn(), clear: jest.fn() }
+        }
+      ]
+    }).compileComponents();
+  });
+
+  afterEach(() => {
+    fixture?.destroy();
+    TestBed.inject(UwtInspectorSession).end();
+    localStorage.removeItem(UWT_INSPECTOR_PREFERENCES_KEY);
+    document.body.removeAttribute('style');
+  });
+
+  it('should open at 36rem, at most half the width, and push the app aside', () => {
+    open('right');
+
+    expect(host().getAttribute('role')).toBe('region');
+    expect(host().classList).toContain('uwt-inspector-pane--right');
+    expect(host().style.width).toBe('512px');
+    expect(document.body.style.paddingRight).toBe('512px');
+    expect(host().querySelector('uwt-inspector')).not.toBeNull();
+  });
+
+  it('should give the app its padding back when it closes', () => {
+    document.body.style.paddingLeft = '7px';
+    open('left');
+    expect(document.body.style.paddingLeft).toBe('512px');
+
+    fixture.destroy();
+    expect(document.body.style.paddingLeft).toBe('7px');
+  });
+
+  it('should open at its remembered size, within 30rem and 80% of the width', () => {
+    localStorage.setItem(
+      UWT_INSPECTOR_PREFERENCES_KEY,
+      JSON.stringify({ paneSize: { right: 2000 } })
+    );
+    open('right');
+    expect(host().style.width).toBe('819px');
+
+    fixture.destroy();
+    localStorage.setItem(
+      UWT_INSPECTOR_PREFERENCES_KEY,
+      JSON.stringify({ paneSize: { right: 100 } })
+    );
+    open('right');
+    expect(host().style.width).toBe('480px');
+  });
+
+  it('should resize with the arrow keys, and remember the size', () => {
+    open('right');
+
+    key('ArrowLeft');
+    expect(host().style.width).toBe('544px');
+    key('ArrowRight');
+    key('ArrowRight');
+    expect(host().style.width).toBe('480px');
+    expect(stored().paneSize).toEqual({ right: 480 });
+
+    key('ArrowUp');
+    expect(host().style.width).toBe('480px');
+  });
+
+  it('should resize by dragging its inner edge, and remember the size', () => {
+    open('right');
+
+    pointer('pointerdown', 512);
+    pointer('pointermove', 400);
+    expect(host().style.width).toBe('624px');
+    expect(document.body.style.paddingRight).toBe('624px');
+    expect(stored().paneSize).toBeUndefined();
+
+    pointer('pointerup', 400);
+    expect(stored().paneSize).toEqual({ right: 624 });
+
+    pointer('pointermove', 100);
+    expect(host().style.width).toBe('624px');
+  });
+
+  it('should dock at the bottom, 45% high, resized upwards', () => {
+    open('bottom');
+
+    expect(host().style.height).toBe('346px');
+    expect(document.body.style.paddingBottom).toBe('346px');
+    key('ArrowUp');
+    expect(host().style.height).toBe('378px');
+    pointer('pointerdown', 0, 400);
+    pointer('pointermove', 0, 300);
+    expect(host().style.height).toBe('468px');
+  });
+
+  it('should name its edge as a separator with its size and limits', () => {
+    open('left');
+
+    expect(handle().getAttribute('role')).toBe('separator');
+    expect(handle().getAttribute('aria-orientation')).toBe('vertical');
+    expect(handle().getAttribute('aria-label')).toBe(
+      'Resize the Event Inspector'
+    );
+    expect(handle().getAttribute('aria-valuenow')).toBe('512');
+    expect(handle().getAttribute('aria-valuemin')).toBe('480');
+    expect(handle().getAttribute('aria-valuemax')).toBe('819');
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
new file mode 100644
index 0000000..a98cbb4
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
@@ -0,0 +1,170 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  signal,
+  viewChild
+} from '@angular/core';
+import { UwtInspectorPaneSide } from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component';
+import { UwtInspectorPreferenceStorage } from '../uwt-inspector-preferences/uwt-inspector-preferences';
+
+/** Narrowest a left or right pane gets, in rem, so its tables stay usable. */
+const SIDE_MIN_REM = 30;
+/** Lowest a bottom pane gets, in rem. */
+const BOTTOM_MIN_REM = 12;
+/** A pane never takes more than this share of the viewport. */
+const MAX_SHARE = 0.8;
+/** How far one arrow key press resizes, in rem. */
+const STEP_REM = 2;
+
+/**
+ * The inspector docked beside or below the app, like Chrome DevTools. It
+ * makes room by padding the page's `body` on its side, so content in the
+ * normal flow moves aside; the app's `position: fixed` elements stay where
+ * they are. Resized by dragging or with the arrow keys on its inner edge,
+ * and remembers its size per side.
+ */
+@Component({
+  selector: 'uwt-inspector-pane',
+  imports: [UwtInspectorComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: 'region',
+    'aria-label': 'Event Inspector',
+    '[class.uwt-inspector-pane--left]': "side() === 'left'",
+    '[class.uwt-inspector-pane--right]': "side() === 'right'",
+    '[class.uwt-inspector-pane--bottom]': "side() === 'bottom'",
+    '[style.width.px]': "side() === 'bottom' ? null : size()",
+    '[style.height.px]': "side() === 'bottom' ? size() : null",
+    '(window:resize)': 'resize(size())'
+  },
+  templateUrl: './uwt-inspector-pane.component.html',
+  styleUrl: './uwt-inspector-pane.component.scss'
+})
+export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
+  readonly side = input.required<UwtInspectorPaneSide>();
+
+  /** The inspector inside, for focus. */
+  readonly content = viewChild.required(UwtInspectorComponent);
+
+  private readonly document = inject(DOCUMENT);
+  private readonly preferences = inject(UwtInspectorPreferenceStorage);
+
+  protected readonly size = signal(0);
+  protected readonly limits = signal({ min: 0, max: 0 });
+
+  private padding = '';
+  private paddingBefore = '';
+  private dragging = false;
+
+  ngOnInit(): void {
+    this.padding = `padding-${this.side()}`;
+    this.paddingBefore = this.document.body.style.getPropertyValue(
+      this.padding
+    );
+    this.resize(
+      this.preferences.read().paneSize[this.side()] ?? this.defaultSize()
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.document.body.style.setProperty(this.padding, this.paddingBefore);
+  }
+
+  /** Sets the size within its limits, and makes room for it. */
+  protected resize(size: number): void {
+    const rem = this.rem();
+    const bottom = this.side() === 'bottom';
+    const view = this.document.defaultView;
+    const extent = (bottom ? view?.innerHeight : view?.innerWidth) ?? 0;
+    const min = (bottom ? BOTTOM_MIN_REM : SIDE_MIN_REM) * rem;
+    const max = Math.max(extent * MAX_SHARE, 0);
+    const clamped = Math.round(Math.min(max, Math.max(min, size)));
+    this.limits.set({
+      min: Math.round(Math.min(min, max)),
+      max: Math.round(max)
+    });
+    this.size.set(clamped);
+    this.document.body.style.setProperty(this.padding, `${clamped}px`);
+  }
+
+  protected startDrag(event: PointerEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    (event.target as HTMLElement).setPointerCapture?.(event.pointerId);
+    this.dragging = true;
+  }
+
+  protected drag(event: PointerEvent): void {
+    if (!this.dragging) {
+      return;
+    }
+    const view = this.document.defaultView;
+    const side = this.side();
+    this.resize(
+      side === 'left'
+        ? event.clientX
+        : side === 'right'
+          ? (view?.innerWidth ?? 0) - event.clientX
+          : (view?.innerHeight ?? 0) - event.clientY
+    );
+  }
+
+  protected endDrag(): void {
+    if (this.dragging) {
+      this.dragging = false;
+      this.save();
+    }
+  }
+
+  /** Arrow keys toward the app grow the pane; away from it, shrink it. */
+  protected resizeByKey(event: KeyboardEvent): void {
+    const grow = { left: 'ArrowRight', right: 'ArrowLeft', bottom: 'ArrowUp' };
+    const shrink = {
+      left: 'ArrowLeft',
+      right: 'ArrowRight',
+      bottom: 'ArrowDown'
+    };
+    const side = this.side();
+    if (event.key !== grow[side] && event.key !== shrink[side]) {
+      return;
+    }
+    event.preventDefault();
+    const step = (event.key === grow[side] ? 1 : -1) * STEP_REM * this.rem();
+    this.resize(this.size() + step);
+    this.save();
+  }
+
+  private save(): void {
+    this.preferences.update({
+      paneSize: {
+        ...this.preferences.read().paneSize,
+        [this.side()]: this.size()
+      }
+    });
+  }
+
+  private defaultSize(): number {
+    const view = this.document.defaultView;
+    return this.side() === 'bottom'
+      ? (view?.innerHeight ?? 0) * 0.45
+      : Math.min(36 * this.rem(), (view?.innerWidth ?? 0) * 0.5);
+  }
+
+  private rem(): number {
+    const view = this.document.defaultView;
+    const size = view
+      ? parseFloat(
+          view.getComputedStyle(this.document.documentElement).fontSize
+        )
+      : NaN;
+    return Number.isFinite(size) && size > 0 ? size : 16;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts
new file mode 100644
index 0000000..0aca6fc
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts
@@ -0,0 +1,90 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  UWT_INSPECTOR_PREFERENCES_KEY,
+  UwtInspectorPreferenceStorage
+} from './uwt-inspector-preferences';
+
+describe('UwtInspectorPreferenceStorage', () => {
+  let storage: UwtInspectorPreferenceStorage;
+  const store = (value: unknown) =>
+    localStorage.setItem(
+      UWT_INSPECTOR_PREFERENCES_KEY,
+      typeof value === 'string' ? value : JSON.stringify(value)
+    );
+
+  beforeEach(() => {
+    storage = TestBed.inject(UwtInspectorPreferenceStorage);
+  });
+
+  afterEach(() => {
+    localStorage.removeItem(UWT_INSPECTOR_PREFERENCES_KEY);
+    jest.restoreAllMocks();
+  });
+
+  it('should default to an opaque dialog, with nothing remembered', () => {
+    expect(storage.read()).toEqual({
+      dock: 'dialog',
+      transparency: 0,
+      paneSize: {}
+    });
+  });
+
+  it('should read back what was stored', () => {
+    const preferences = {
+      dock: 'bottom',
+      transparency: 35,
+      paneSize: { left: 500, right: 640, bottom: 300 },
+      window: { width: 1000, height: 700, left: -1200, top: 40 }
+    };
+    store(preferences);
+
+    expect(storage.read()).toEqual(preferences);
+  });
+
+  it.each([
+    ['malformed JSON', '{not json'],
+    ['not an object', '"right"'],
+    [
+      'invalid values',
+      {
+        dock: 'top',
+        transparency: 95,
+        paneSize: { left: -5, right: 'wide', bottom: Infinity },
+        window: { width: 0, height: 700, left: 0, top: 0 }
+      }
+    ]
+  ])('should fall back to the defaults for %s', (_label, value) => {
+    store(value);
+
+    expect(storage.read()).toEqual({
+      dock: 'dialog',
+      transparency: 0,
+      paneSize: {}
+    });
+  });
+
+  it('should replace only what it is given', () => {
+    store({ dock: 'left', transparency: 20, paneSize: { left: 500 } });
+
+    storage.update({ dock: 'window' });
+
+    expect(storage.read()).toEqual({
+      dock: 'window',
+      transparency: 20,
+      paneSize: { left: 500 }
+    });
+  });
+
+  it('should carry on when storage throws', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('blocked');
+    });
+    jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('blocked');
+    });
+
+    expect(() => storage.update({ dock: 'right' })).not.toThrow();
+    expect(storage.read().dock).toBe('dialog');
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts
new file mode 100644
index 0000000..2fdb32a
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts
@@ -0,0 +1,126 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, Injectable } from '@angular/core';
+import {
+  UWT_INSPECTOR_DOCKS,
+  UwtInspectorDock,
+  UwtInspectorPaneSide
+} from '../uwt-inspector.models/uwt-inspector.models';
+import {
+  uwtSafe,
+  uwtSafeVoid
+} from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
+
+/** How see-through the dialog can get, in percent, so it never vanishes. */
+export const UWT_INSPECTOR_MAX_TRANSPARENCY = 70;
+
+/** Where this browser remembers the Event Inspector's settings. */
+export const UWT_INSPECTOR_PREFERENCES_KEY = 'ngx-ui-watchtower.eventInspector';
+
+/** The separate window's size and position, in CSS pixels. */
+export interface UwtInspectorWindowGeometry {
+  width: number;
+  height: number;
+  left: number;
+  top: number;
+}
+
+/** What the Event Inspector remembers between openings, in this browser. */
+export interface UwtInspectorPreferences {
+  dock: UwtInspectorDock;
+  /** The dialog's transparency, in percent. */
+  transparency: number;
+  /** Each pane's width (left, right) or height (bottom), in pixels. */
+  paneSize: Partial<Record<UwtInspectorPaneSide, number>>;
+  window?: UwtInspectorWindowGeometry;
+}
+
+const PANE_SIDES: readonly UwtInspectorPaneSide[] = ['left', 'right', 'bottom'];
+
+/**
+ * Reads and writes {@link UwtInspectorPreferences} as one `localStorage`
+ * entry. Anything missing or invalid reads as its default, and storage
+ * that throws — a private window, blocked site data — is ignored.
+ */
+@Injectable({ providedIn: 'root' })
+export class UwtInspectorPreferenceStorage {
+  private readonly document = inject(DOCUMENT);
+
+  read(): UwtInspectorPreferences {
+    const stored = uwtSafe(
+      'preferences.read',
+      () =>
+        this.document.defaultView?.localStorage.getItem(
+          UWT_INSPECTOR_PREFERENCES_KEY
+        ),
+      undefined
+    );
+    return sanitize(parse(stored));
+  }
+
+  /** Replaces the given preferences, keeping the others. */
+  update(changes: Partial<UwtInspectorPreferences>): void {
+    uwtSafeVoid('preferences.write', () =>
+      this.document.defaultView?.localStorage.setItem(
+        UWT_INSPECTOR_PREFERENCES_KEY,
+        JSON.stringify({ ...this.read(), ...changes })
+      )
+    );
+  }
+}
+
+function parse(json: string | null | undefined): unknown {
+  try {
+    return json ? JSON.parse(json) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function sanitize(raw: unknown): UwtInspectorPreferences {
+  const value = isRecord(raw) ? raw : {};
+  const dock = UWT_INSPECTOR_DOCKS.find((d) => d === value.dock);
+  const transparency = value.transparency;
+  const paneSize: UwtInspectorPreferences['paneSize'] = {};
+  const sizes = isRecord(value.paneSize) ? value.paneSize : {};
+  for (const side of PANE_SIDES) {
+    if (isPositive(sizes[side])) {
+      paneSize[side] = sizes[side];
+    }
+  }
+  const geometry = value.window;
+  const window =
+    isRecord(geometry) &&
+    isPositive(geometry.width) &&
+    isPositive(geometry.height) &&
+    Number.isFinite(geometry.left) &&
+    Number.isFinite(geometry.top)
+      ? (geometry as unknown as UwtInspectorWindowGeometry)
+      : undefined;
+
+  return {
+    dock: dock ?? 'dialog',
+    transparency:
+      typeof transparency === 'number' &&
+      transparency >= 0 &&
+      transparency <= UWT_INSPECTOR_MAX_TRANSPARENCY
+        ? transparency
+        : 0,
+    paneSize,
+    ...(window && {
+      window: {
+        width: window.width,
+        height: window.height,
+        left: window.left,
+        top: window.top
+      }
+    })
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isPositive(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0;
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.spec.ts
new file mode 100644
index 0000000..707bbab
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.spec.ts
@@ -0,0 +1,28 @@
+import { TestBed } from '@angular/core/testing';
+import { UwtTelemetryMonitor } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtInspectorSession } from './uwt-inspector-session';
+
+describe('UwtInspectorSession', () => {
+  it('should start capturing on first use, and keep one history', () => {
+    const session = TestBed.inject(UwtInspectorSession);
+    const monitor = TestBed.inject(UwtTelemetryMonitor);
+    expect(monitor.observed).toBe(false);
+
+    const store = session.store;
+
+    expect(monitor.observed).toBe(true);
+    expect(session.store).toBe(store);
+    session.end();
+  });
+
+  it('should discard the history and stop capturing when it ends', () => {
+    const session = TestBed.inject(UwtInspectorSession);
+    const first = session.store;
+
+    session.end();
+
+    expect(TestBed.inject(UwtTelemetryMonitor).observed).toBe(false);
+    expect(session.store).not.toBe(first);
+    session.end();
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
new file mode 100644
index 0000000..4a948b4
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
@@ -0,0 +1,53 @@
+import {
+  createEnvironmentInjector,
+  EnvironmentInjector,
+  inject,
+  Injectable
+} from '@angular/core';
+import { UwtInspectorDock } from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
+
+/** One way of showing the inspector: a dialog, a pane or a window. */
+export interface UwtInspectorHost {
+  /** Moves focus into the inspector. */
+  focus(): void;
+  /** Whether keyboard focus is inside the inspector. */
+  containsFocus(): boolean;
+  /** Takes the inspector off the screen; the session carries on. */
+  destroy(): void;
+}
+
+/** What the inspector's own controls ask for: another dock, or closing. */
+export interface UwtInspectorControls {
+  setDock(dock: UwtInspectorDock): void;
+  close(): void;
+}
+
+/**
+ * One opening of the Event Inspector, from open to close, whichever docks
+ * it moves between. Holds the captured history, so moving the inspector
+ * keeps its events, filters and pause.
+ */
+@Injectable({ providedIn: 'root' })
+export class UwtInspectorSession {
+  private readonly parent = inject(EnvironmentInjector);
+  private injector?: EnvironmentInjector;
+
+  /** Set by `UwtEventInspectorService`, which shows the inspector. */
+  controls?: UwtInspectorControls;
+
+  /** The captured history, started on first use. */
+  get store(): UwtInspectorStore {
+    this.injector ??= createEnvironmentInjector(
+      [UwtInspectorStore],
+      this.parent
+    );
+    return this.injector.get(UwtInspectorStore);
+  }
+
+  /** Discards the history and stops capturing. */
+  end(): void {
+    this.injector?.destroy();
+    this.injector = undefined;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
index 715ed02..2298b59 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
@@ -53,9 +53,10 @@ function perSection<T>(make: () => T): PerSection<T> {
 }
 
 /**
- * The popup's captured history. Provided by the popup itself, so it exists
- * exactly as long as the popup is open: created empty on open, subscribed
- * to {@link UwtTelemetryMonitor} for its lifetime, and discarded on close.
+ * The inspector's captured history. Held by the `UwtInspectorSession`, so
+ * it lasts from opening to closing, whichever docks the inspector moves
+ * between: created empty on open, subscribed to {@link UwtTelemetryMonitor}
+ * for its lifetime, and discarded on close.
  *
  * Events arrive whenever the application sends them; they are batched and
  * reach the screen at most every {@link UWT_INSPECTOR_FLUSH_MS}, so a
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
new file mode 100644
index 0000000..df89879
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -0,0 +1,169 @@
+import { ApplicationRef, EnvironmentInjector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { UWT_TELEMETRY_IDENTITY } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
+import {
+  UWT_INSPECTOR_WINDOW_NAME,
+  uwtOpenInspectorWindow,
+  UwtInspectorWindowOptions
+} from './uwt-inspector-window';
+
+/** A popup window: an iframe's real window, its geometry pinned. */
+function fakePopup() {
+  const frame = document.body.appendChild(document.createElement('iframe'));
+  const popup = frame.contentWindow as Window & typeof globalThis;
+  const doc = popup.document;
+  doc.head.innerHTML = '<style>.stale {}</style>';
+  const geometry = {
+    innerWidth: 900,
+    innerHeight: 700,
+    screenX: 5,
+    screenY: 6
+  };
+  for (const [name, value] of Object.entries(geometry)) {
+    Object.defineProperty(popup, name, { value, configurable: true });
+  }
+  jest.spyOn(popup, 'focus').mockImplementation(() => undefined);
+  jest.spyOn(popup, 'close').mockImplementation(() => undefined);
+  jest.spyOn(popup, 'removeEventListener');
+  return {
+    popup,
+    doc,
+    fire: (type: string) => popup.dispatchEvent(new popup.Event(type)),
+    key: () =>
+      doc.body.dispatchEvent(
+        new popup.KeyboardEvent('keydown', { bubbles: true })
+      )
+  };
+}
+
+describe('uwtOpenInspectorWindow', () => {
+  let options: UwtInspectorWindowOptions;
+  let appStyle: HTMLStyleElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideNoopAnimations(),
+        {
+          provide: UWT_TELEMETRY_IDENTITY,
+          useValue: { application: 'shop', environment: 'test', version: '1' }
+        }
+      ]
+    });
+    appStyle = document.head.appendChild(document.createElement('style'));
+    appStyle.textContent = '.app {}';
+    options = {
+      document,
+      environment: TestBed.inject(EnvironmentInjector),
+      appRef: TestBed.inject(ApplicationRef),
+      title: 'Event Inspector · shop',
+      onClosed: jest.fn(),
+      onKeydown: jest.fn(),
+      onGeometry: jest.fn()
+    };
+  });
+
+  afterEach(() => {
+    appStyle.remove();
+    document.querySelectorAll('iframe').forEach((frame) => frame.remove());
+    TestBed.inject(UwtInspectorSession).end();
+    jest.restoreAllMocks();
+  });
+
+  it('should open the named window, titled, with the app styles, showing the inspector', () => {
+    const { popup, doc } = fakePopup();
+    const open = jest.spyOn(window, 'open').mockReturnValue(popup);
+
+    const host = uwtOpenInspectorWindow(options);
+
+    expect(host).toBeDefined();
+    expect(open).toHaveBeenCalledWith(
+      '',
+      UWT_INSPECTOR_WINDOW_NAME,
+      expect.stringMatching(/^popup,width=\d+,height=\d+$/)
+    );
+    expect(doc.title).toBe('Event Inspector · shop');
+    expect(doc.head.textContent).toContain('.app {}');
+    expect(doc.head.textContent).not.toContain('.stale');
+    expect(doc.querySelector('.uwt-inspector__title')?.textContent).toBe(
+      'Event Inspector'
+    );
+    expect(
+      doc.querySelector('[aria-pressed="true"]')?.getAttribute('aria-label')
+    ).toBe('Separate window');
+    host?.destroy();
+  });
+
+  it('should keep the window in step as the app adds and removes styles', async () => {
+    const { popup, doc } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    const host = uwtOpenInspectorWindow(options);
+
+    const later = document.head.appendChild(document.createElement('style'));
+    later.textContent = '.later {}';
+    await Promise.resolve();
+    expect(doc.head.textContent).toContain('.later {}');
+
+    later.remove();
+    await Promise.resolve();
+    expect(doc.head.textContent).not.toContain('.later {}');
+    host?.destroy();
+  });
+
+  it('should open where it was last', () => {
+    const { popup } = fakePopup();
+    const open = jest.spyOn(window, 'open').mockReturnValue(popup);
+
+    uwtOpenInspectorWindow({
+      ...options,
+      geometry: { width: 800, height: 600, left: 10, top: 20 }
+    })?.destroy();
+
+    expect(open.mock.calls[0][2]).toMatch(/,left=10,top=20$/);
+  });
+
+  it('should pass on key presses, and report its closing with its geometry', () => {
+    const { popup, fire, key } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    const host = uwtOpenInspectorWindow(options);
+
+    key();
+    expect(options.onKeydown).toHaveBeenCalledTimes(1);
+
+    fire('pagehide');
+    expect(options.onGeometry).toHaveBeenCalledWith({
+      width: 900,
+      height: 700,
+      left: 5,
+      top: 6
+    });
+    expect(options.onClosed).toHaveBeenCalledTimes(1);
+
+    host?.destroy();
+    expect(options.onGeometry).toHaveBeenCalledTimes(1);
+  });
+
+  it('should close the window, and stop listening, when destroyed', () => {
+    const { popup, key } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+
+    uwtOpenInspectorWindow(options)?.destroy();
+
+    expect(popup.close).toHaveBeenCalled();
+    expect(popup.removeEventListener).toHaveBeenCalledWith(
+      'pagehide',
+      expect.any(Function)
+    );
+    expect(options.onGeometry).toHaveBeenCalledTimes(1);
+    key();
+    expect(options.onKeydown).not.toHaveBeenCalled();
+  });
+
+  it('should give up when the browser blocks the window', () => {
+    jest.spyOn(window, 'open').mockReturnValue(null);
+
+    expect(uwtOpenInspectorWindow(options)).toBeUndefined();
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
new file mode 100644
index 0000000..8ecc11c
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -0,0 +1,167 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  ApplicationRef,
+  createComponent,
+  createEnvironmentInjector,
+  EnvironmentInjector
+} from '@angular/core';
+import {
+  CPS_LIVE_ANNOUNCER_SERVICE,
+  CpsLiveAnnouncerService,
+  CpsNotificationService
+} from 'cps-ui-kit';
+import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component';
+import { UwtInspectorHost } from '../uwt-inspector-session/uwt-inspector-session';
+import { UwtInspectorWindowGeometry } from '../uwt-inspector-preferences/uwt-inspector-preferences';
+import { uwtSafeVoid } from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
+
+/** The window's name, so a second open reuses it rather than adding one. */
+export const UWT_INSPECTOR_WINDOW_NAME = 'ngx-ui-watchtower-event-inspector';
+
+const STYLES = 'style, link[rel~="stylesheet"], base';
+
+export interface UwtInspectorWindowOptions {
+  /** The app's document. */
+  document: Document;
+  environment: EnvironmentInjector;
+  appRef: ApplicationRef;
+  title: string;
+  /** Where the window was last, if anywhere. */
+  geometry?: UwtInspectorWindowGeometry;
+  /** The user closed the window. */
+  onClosed: () => void;
+  /** Every key pressed in the window, for the shortcut. */
+  onKeydown: (event: KeyboardEvent) => void;
+  /** The window's size and position, as it closes. */
+  onGeometry: (geometry: UwtInspectorWindowGeometry) => void;
+}
+
+/**
+ * Shows the inspector in its own browser window, rendered by this app into
+ * the window's document. The window gets the app's styles, kept in step as
+ * Angular adds more, and its own `DOCUMENT`, notifications and screen
+ * reader announcer, so cps-ui-kit's tooltips, menus and messages appear in
+ * it rather than in the app.
+ *
+ * Must run during a click or key press, or the browser blocks the window.
+ *
+ * @returns the host, or `undefined` when the browser blocked the window
+ */
+export function uwtOpenInspectorWindow(
+  options: UwtInspectorWindowOptions
+): UwtInspectorHost | undefined {
+  const view = options.document.defaultView;
+  const popup = view?.open(
+    '',
+    UWT_INSPECTOR_WINDOW_NAME,
+    features(view, options.geometry)
+  );
+  if (!view || !popup) {
+    return undefined;
+  }
+
+  const doc = popup.document;
+  // A window left over from before the app reloaded holds stale content.
+  doc.head.replaceChildren();
+  doc.body.replaceChildren();
+  doc.title = options.title;
+  doc.body.style.margin = '0';
+  const stopMirroring = mirrorStyles(options.document, doc);
+
+  const element = doc.body.appendChild(doc.createElement('div'));
+  element.style.height = '100vh';
+  const environment = createEnvironmentInjector(
+    [
+      { provide: DOCUMENT, useValue: doc },
+      CpsNotificationService,
+      { provide: CPS_LIVE_ANNOUNCER_SERVICE, useClass: CpsLiveAnnouncerService }
+    ],
+    options.environment
+  );
+  const ref = createComponent(UwtInspectorComponent, {
+    environmentInjector: environment,
+    hostElement: element
+  });
+  ref.setInput('dock', 'window');
+  options.appRef.attachView(ref.hostView);
+  ref.changeDetectorRef.detectChanges();
+
+  let saved = false;
+  const saveGeometry = () => {
+    if (!saved) {
+      saved = true;
+      options.onGeometry({
+        width: popup.innerWidth,
+        height: popup.innerHeight,
+        left: popup.screenX,
+        top: popup.screenY
+      });
+    }
+  };
+  const onPageHide = () => {
+    saveGeometry();
+    options.onClosed();
+  };
+  const closeWithApp = () => popup.close();
+  popup.addEventListener('pagehide', onPageHide);
+  view.addEventListener('pagehide', closeWithApp);
+  doc.addEventListener('keydown', options.onKeydown, true);
+
+  return {
+    focus: () => {
+      popup.focus();
+      ref.instance.focusSearch();
+    },
+    containsFocus: () => doc.hasFocus(),
+    destroy: () => {
+      popup.removeEventListener('pagehide', onPageHide);
+      view.removeEventListener('pagehide', closeWithApp);
+      doc.removeEventListener('keydown', options.onKeydown, true);
+      uwtSafeVoid('window.geometry', saveGeometry);
+      stopMirroring();
+      options.appRef.detachView(ref.hostView);
+      ref.destroy();
+      environment.destroy();
+      popup.close();
+    }
+  };
+}
+
+/** 1200×800 at most the screen the first time, then where it was last. */
+function features(view: Window, geometry?: UwtInspectorWindowGeometry): string {
+  const width = Math.min(geometry?.width ?? 1200, view.screen.availWidth);
+  const height = Math.min(geometry?.height ?? 800, view.screen.availHeight);
+  const position = geometry ? `,left=${geometry.left},top=${geometry.top}` : '';
+  return `popup,width=${width},height=${height}${position}`;
+}
+
+/**
+ * Copies the app's stylesheets into the window, then keeps adding and
+ * removing copies as the app's `<head>` changes — Angular adds a
+ * component's styles only when it first renders.
+ */
+function mirrorStyles(from: Document, to: Document): () => void {
+  const copies = new Map<Node, Element>();
+  const add = (node: Node) => {
+    if (
+      node.nodeType === Node.ELEMENT_NODE &&
+      (node as Element).matches(STYLES)
+    ) {
+      const copy = to.importNode(node as Element, true);
+      copies.set(node, copy);
+      to.head.appendChild(copy);
+    }
+  };
+  from.head.childNodes.forEach(add);
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      record.addedNodes.forEach(add);
+      record.removedNodes.forEach((node) => {
+        copies.get(node)?.remove();
+        copies.delete(node);
+      });
+    }
+  });
+  observer.observe(from.head, { childList: true });
+  return () => observer.disconnect();
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index aa6a40a..106770b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -8,6 +8,30 @@ import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
  */
 export type UwtInspectorSectionId = 'bi' | 'scenario' | 'logging';
 
+/**
+ * Where the Event Inspector opens: a dialog over the app, its own browser
+ * window, or a pane beside or below the app.
+ *
+ * @group Types
+ */
+export type UwtInspectorDock =
+  'dialog' | 'window' | 'left' | 'right' | 'bottom';
+
+/** Every dock, in the order the switcher shows them. */
+export const UWT_INSPECTOR_DOCKS: readonly UwtInspectorDock[] = [
+  'dialog',
+  'window',
+  'left',
+  'bottom',
+  'right'
+];
+
+/** The docks that are panes beside or below the app. */
+export type UwtInspectorPaneSide = Extract<
+  UwtInspectorDock,
+  'left' | 'right' | 'bottom'
+>;
+
 /**
  * A key combination that opens the Event Inspector.
  *
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
similarity index 52%
rename from projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index e479950..de7d960 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -1,24 +1,47 @@
-<div class="uwt-inspector-dialog">
-  <div class="uwt-inspector-dialog__toolbar">
-    <p class="uwt-inspector-dialog__status">
-      <span
-        class="uwt-inspector-dialog__dot"
-        [class.uwt-inspector-dialog__dot--paused]="store.paused()"
-        aria-hidden="true"></span>
-      {{ store.paused() ? 'Paused' : 'Capturing' }} since {{ since() }} ·
-      {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
-    </p>
-    <div class="uwt-inspector-dialog__actions">
-      <cps-slider
-        label="Transparency"
-        [max]="maxTransparency"
-        [step]="5"
-        width="6rem"
-        [showValue]="true"
-        valueSuffix="%"
-        [value]="transparency()"
-        (valueChanged)="setTransparency($event)">
-      </cps-slider>
+@if (framed()) {
+  <div class="uwt-inspector__header">
+    <h2 class="uwt-inspector__title">Event Inspector</h2>
+    <cps-button
+      icon="close-x-2"
+      ariaLabel="Close Event Inspector"
+      size="small"
+      width="2rem"
+      color="graphite"
+      type="borderless"
+      (clicked)="close()">
+    </cps-button>
+  </div>
+}
+
+<div class="uwt-inspector__body">
+  <div class="uwt-inspector__toolbar">
+    <div class="uwt-inspector__status-row">
+      <p class="uwt-inspector__status">
+        <span
+          class="uwt-inspector__dot"
+          [class.uwt-inspector__dot--paused]="store.paused()"
+          aria-hidden="true"></span>
+        {{ store.paused() ? 'Paused' : 'Capturing' }} since {{ since() }} ·
+        {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
+      </p>
+      <uwt-inspector-dock-switcher
+        [dock]="dock()"
+        (dockChange)="setDock($event)">
+      </uwt-inspector-dock-switcher>
+    </div>
+    <div class="uwt-inspector__actions">
+      @if (dock() === 'dialog') {
+        <cps-slider
+          label="Transparency"
+          [max]="maxTransparency"
+          [step]="5"
+          width="6rem"
+          [showValue]="true"
+          valueSuffix="%"
+          [value]="transparency()"
+          (valueChanged)="setTransparency($event)">
+        </cps-slider>
+      }
       <cps-switch
         label="Pause live updates"
         [value]="store.paused()"
@@ -36,7 +59,7 @@
   </div>
 
   @if (store.paused() && store.newWhilePaused() > 0) {
-    <div class="uwt-inspector-dialog__paused" role="status">
+    <div class="uwt-inspector__paused" role="status">
       <span
         >{{ store.newWhilePaused() }} new event{{
           store.newWhilePaused() === 1 ? '' : 's'
@@ -53,13 +76,13 @@
   }
 
   @if (store.total() === 0 && !store.paused()) {
-    <p class="uwt-inspector-dialog__hint">
+    <p class="uwt-inspector__hint">
       Capturing from now. Use the app to generate events; they appear here as
       they are sent.
     </p>
   }
 
-  <div class="uwt-inspector-dialog__sections">
+  <div class="uwt-inspector__sections">
     @for (section of sections; track section) {
       <uwt-inspector-section
         [section]="section"
@@ -68,7 +91,7 @@
     }
   </div>
 
-  <footer class="uwt-inspector-dialog__footer">
+  <footer class="uwt-inspector__footer">
     <p>
       Shows what this app hands to its telemetry destinations, after redaction.
       A destination can still drop an event, for example when RUM samples a
@@ -78,7 +101,7 @@
     <p>
       Contains your session and user ids: avoid sharing your screen while it's
       open, and share downloads only with your team. History is discarded when
-      this window closes.
+      you close it.
       @if (shortcut) {
         Shortcut: <kbd>{{ shortcut }}</kbd
         >.
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
similarity index 59%
rename from projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index 27d5d21..db34606 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -3,13 +3,53 @@
   color: var(--cps-text-primary);
 }
 
-.uwt-inspector-dialog {
+// In a pane or window: a header like cps-dialog's, and a body that scrolls.
+:host(.uwt-inspector--framed) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+.uwt-inspector__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-left: 0.25rem solid var(--cps-color-surprise);
+  border-bottom: 0.0625rem solid var(--cps-color-line-mid);
+  color: var(--cps-color-text-dark);
+}
+
+.uwt-inspector__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.uwt-inspector__body {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-.uwt-inspector-dialog__toolbar {
+:host(.uwt-inspector--framed) .uwt-inspector__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.uwt-inspector__toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.uwt-inspector__status-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -17,7 +57,7 @@
   gap: 0.5rem 1rem;
 }
 
-.uwt-inspector-dialog__status {
+.uwt-inspector__status {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -27,7 +67,7 @@
   font-variant-numeric: tabular-nums;
 }
 
-.uwt-inspector-dialog__dot {
+.uwt-inspector__dot {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: var(--cps-radius-full, 50%);
@@ -47,19 +87,19 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .uwt-inspector-dialog__dot {
+  .uwt-inspector__dot {
     animation: none;
   }
 }
 
-.uwt-inspector-dialog__actions {
+.uwt-inspector__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem 1rem;
 }
 
-.uwt-inspector-dialog__paused {
+.uwt-inspector__paused {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -70,19 +110,19 @@
   font-size: 0.8125rem;
 }
 
-.uwt-inspector-dialog__hint {
+.uwt-inspector__hint {
   margin: 0;
   font-size: 0.875rem;
   color: var(--cps-text-secondary);
 }
 
-.uwt-inspector-dialog__sections {
+.uwt-inspector__sections {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.uwt-inspector-dialog__footer {
+.uwt-inspector__footer {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
similarity index 81%
rename from projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index f3f759f..e671404 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -11,10 +11,9 @@ import {
   UWT_INSPECTOR_FLUSH_MS,
   UwtInspectorStore
 } from '../uwt-inspector-store/uwt-inspector-store';
-import {
-  UWT_INSPECTOR_TRANSPARENCY_KEY,
-  UwtInspectorDialogComponent
-} from './uwt-inspector-dialog.component';
+import { UWT_INSPECTOR_PREFERENCES_KEY } from '../uwt-inspector-preferences/uwt-inspector-preferences';
+import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
+import { UwtInspectorComponent } from './uwt-inspector.component';
 
 const bi = (name: string, theme = 'dark'): UwtTelemetryPublishInput => ({
   kind: 'bi',
@@ -62,8 +61,8 @@ const warn: UwtTelemetryPublishInput = {
   origin: { forwarded: false }
 };
 
-describe('UwtInspectorDialogComponent', () => {
-  let fixture: ComponentFixture<UwtInspectorDialogComponent>;
+describe('UwtInspectorComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorComponent>;
   let monitor: UwtTelemetryMonitor;
   let announce: jest.Mock;
   let dialogConfig: CpsDialogConfig;
@@ -103,7 +102,7 @@ describe('UwtInspectorDialogComponent', () => {
     announce = jest.fn();
     dialogConfig = {};
     await TestBed.configureTestingModule({
-      imports: [UwtInspectorDialogComponent, NoopAnimationsModule],
+      imports: [UwtInspectorComponent, NoopAnimationsModule],
       providers: [
         {
           provide: UWT_TELEMETRY_IDENTITY,
@@ -121,7 +120,7 @@ describe('UwtInspectorDialogComponent', () => {
       ]
     }).compileComponents();
     monitor = TestBed.inject(UwtTelemetryMonitor);
-    fixture = TestBed.createComponent(UwtInspectorDialogComponent);
+    fixture = TestBed.createComponent(UwtInspectorComponent);
     fixture.detectChanges();
   });
 
@@ -129,7 +128,8 @@ describe('UwtInspectorDialogComponent', () => {
     fixture.destroy();
     jest.useRealTimers();
     jest.restoreAllMocks();
-    localStorage.removeItem(UWT_INSPECTOR_TRANSPARENCY_KEY);
+    TestBed.inject(UwtInspectorSession).end();
+    localStorage.removeItem(UWT_INSPECTOR_PREFERENCES_KEY);
   });
 
   it('should open empty, with three sections and an explanation', () => {
@@ -342,7 +342,7 @@ describe('UwtInspectorDialogComponent', () => {
     expect(seen).toHaveLength(0);
   });
 
-  it('should make the whole window see-through, and remember it', () => {
+  it('should make the whole dialog see-through, and remember it', () => {
     expect(dialogConfig.style).toEqual({ opacity: '1' });
 
     const slider = el().querySelector('cps-slider input') as HTMLInputElement;
@@ -350,12 +350,18 @@ describe('UwtInspectorDialogComponent', () => {
     slider.dispatchEvent(new Event('input'));
 
     expect(dialogConfig.style).toEqual({ opacity: '0.7' });
-    expect(localStorage.getItem(UWT_INSPECTOR_TRANSPARENCY_KEY)).toBe('30');
+    expect(
+      JSON.parse(localStorage.getItem(UWT_INSPECTOR_PREFERENCES_KEY) ?? '{}')
+        .transparency
+    ).toBe(30);
   });
 
   it('should reopen at the remembered transparency', () => {
-    localStorage.setItem(UWT_INSPECTOR_TRANSPARENCY_KEY, '40');
-    const reopened = TestBed.createComponent(UwtInspectorDialogComponent);
+    localStorage.setItem(
+      UWT_INSPECTOR_PREFERENCES_KEY,
+      JSON.stringify({ transparency: 40 })
+    );
+    const reopened = TestBed.createComponent(UwtInspectorComponent);
     reopened.detectChanges();
 
     expect(dialogConfig.style).toEqual({ opacity: '0.6' });
@@ -367,17 +373,48 @@ describe('UwtInspectorDialogComponent', () => {
     reopened.destroy();
   });
 
-  it('should open opaque when the remembered value is out of range', () => {
-    localStorage.setItem(UWT_INSPECTOR_TRANSPARENCY_KEY, '95');
-    const reopened = TestBed.createComponent(UwtInspectorDialogComponent);
+  it('should have the slider only as a dialog, and its own header elsewhere', () => {
+    expect(el().querySelector('cps-slider')).not.toBeNull();
+    expect(el().querySelector('.uwt-inspector__header')).toBeNull();
 
-    expect(dialogConfig.style).toEqual({ opacity: '1' });
-    reopened.destroy();
+    fixture.componentRef.setInput('dock', 'right');
+    fixture.detectChanges();
+
+    expect(el().querySelector('cps-slider')).toBeNull();
+    expect(el().querySelector('.uwt-inspector__title')?.textContent).toBe(
+      'Event Inspector'
+    );
+    expect(button('Close Event Inspector')).toBeTruthy();
   });
 
-  it('should stop observing when closed', () => {
-    expect(monitor.observed).toBe(true);
+  it('should ask to move to another dock, or to close', () => {
+    const controls = { setDock: jest.fn(), close: jest.fn() };
+    TestBed.inject(UwtInspectorSession).controls = controls;
+    const dock = (name: string) =>
+      el().querySelector<HTMLButtonElement>(`button[data-dock="${name}"]`)!;
+
+    expect(dock('dialog').getAttribute('aria-pressed')).toBe('true');
+    dock('dialog').click();
+    dock('right').click();
+    expect(controls.setDock.mock.calls).toEqual([['right']]);
+
+    fixture.componentRef.setInput('dock', 'window');
+    fixture.detectChanges();
+    button('Close Event Inspector').click();
+    expect(controls.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('should keep its history in the session, for the next dock', () => {
+    monitor.publish(bi('theme_changed'));
+    settle();
     fixture.destroy();
+    expect(monitor.observed).toBe(true);
+
+    fixture = TestBed.createComponent(UwtInspectorComponent);
+    fixture.detectChanges();
+    expect(text()).toContain('1 event');
+
+    TestBed.inject(UwtInspectorSession).end();
     expect(monitor.observed).toBe(false);
   });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
similarity index 61%
rename from projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
rename to projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index b5cfd96..2b81756 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dialog/uwt-inspector-dialog.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -6,6 +6,7 @@ import {
   DestroyRef,
   ElementRef,
   inject,
+  input,
   signal
 } from '@angular/core';
 import {
@@ -15,7 +16,10 @@ import {
   CpsSwitchComponent
 } from 'cps-ui-kit';
 import { CpsSliderComponent } from '../cps-slider/cps-slider.component';
-import { UWT_EVENT_INSPECTOR_CONFIG } from '../uwt-inspector.models/uwt-inspector.models';
+import {
+  UWT_EVENT_INSPECTOR_CONFIG,
+  UwtInspectorDock
+} from '../uwt-inspector.models/uwt-inspector.models';
 import {
   UWT_DEFAULT_INSPECTOR_CONFIG,
   UWT_INSPECTOR_SECTIONS,
@@ -32,55 +36,63 @@ import {
   uwtIsApplePlatform,
   uwtShortcutLabel
 } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
+import { UwtInspectorDockSwitcherComponent } from '../uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component';
+import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
 import {
-  uwtSafe,
-  uwtSafeVoid
-} from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
+  UWT_INSPECTOR_MAX_TRANSPARENCY,
+  UwtInspectorPreferenceStorage
+} from '../uwt-inspector-preferences/uwt-inspector-preferences';
 
 /** Screen readers hear about new events at most this often, in ms. */
 const ANNOUNCE_EVERY_MS = 10_000;
 
-/** How see-through the window can get, in percent, so it never vanishes. */
-export const UWT_INSPECTOR_MAX_TRANSPARENCY = 70;
-
-/** Where this browser remembers the chosen transparency. */
-export const UWT_INSPECTOR_TRANSPARENCY_KEY =
-  'ngx-ui-watchtower.eventInspector.transparency';
-
 /**
- * The Event Inspector's content, opened by
- * {@link UwtEventInspectorService} inside a non-modal cps-dialog.
- * Capturing is controlled here — pause and clear apply to everything —
- * while each section filters, downloads and copies its own events.
+ * The Event Inspector's content, shown by {@link UwtEventInspectorService}
+ * in a non-modal cps-dialog, a pane or its own window. Capturing is
+ * controlled here — pause and clear apply to everything — while each
+ * section filters, downloads and copies its own events.
  *
- * Owns its {@link UwtInspectorStore}, so the captured history lives
- * exactly as long as this window: it starts empty and is discarded on
- * close. Uses no telemetry service itself, so opening or using it never
- * produces events of its own.
+ * The captured history belongs to the {@link UwtInspectorSession}, so it
+ * survives moving between docks and is discarded on close. Uses no
+ * telemetry service itself, so opening or using it never produces events
+ * of its own.
  */
 @Component({
-  selector: 'uwt-inspector-dialog',
+  selector: 'uwt-inspector',
   imports: [
     CpsButtonComponent,
     CpsSliderComponent,
     CpsSwitchComponent,
+    UwtInspectorDockSwitcherComponent,
     UwtInspectorSectionComponent
   ],
-  providers: [UwtInspectorStore, UwtInspectorExporter],
+  providers: [
+    {
+      provide: UwtInspectorStore,
+      useFactory: () => inject(UwtInspectorSession).store
+    },
+    UwtInspectorExporter
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './uwt-inspector-dialog.component.html',
-  styleUrl: './uwt-inspector-dialog.component.scss'
+  host: { '[class.uwt-inspector--framed]': 'framed()' },
+  templateUrl: './uwt-inspector.component.html',
+  styleUrl: './uwt-inspector.component.scss'
 })
-export class UwtInspectorDialogComponent {
+export class UwtInspectorComponent {
+  /** Where it is shown; a cps-dialog creates it without inputs. */
+  readonly dock = input<UwtInspectorDock>('dialog');
+
   protected readonly store = inject(UwtInspectorStore);
 
   private readonly document = inject(DOCUMENT);
   private readonly host: ElementRef<HTMLElement> = inject(ElementRef);
+  private readonly session = inject(UwtInspectorSession);
+  private readonly preferences = inject(UwtInspectorPreferenceStorage);
   private readonly announcer = inject(CPS_LIVE_ANNOUNCER_SERVICE, {
     optional: true
   });
 
-  /** The window's own config: cps-dialog binds its `style` to the window. */
+  /** The dialog's own config: cps-dialog binds its `style` to the window. */
   private readonly dialogConfig = inject(CpsDialogConfig, { optional: true });
 
   private readonly config = {
@@ -89,6 +101,9 @@ export class UwtInspectorDialogComponent {
     ...inject(UWT_EVENT_INSPECTOR_CONFIG, { optional: true })
   };
 
+  /** A pane or window brings no header of its own, so this draws one. */
+  protected readonly framed = computed(() => this.dock() !== 'dialog');
+
   protected readonly sections = UWT_INSPECTOR_SECTIONS;
   protected readonly maxPayloadChars = this.config.maxPayloadCharsInView;
 
@@ -102,7 +117,9 @@ export class UwtInspectorDialogComponent {
   );
 
   protected readonly maxTransparency = UWT_INSPECTOR_MAX_TRANSPARENCY;
-  protected readonly transparency = signal(this.storedTransparency());
+  protected readonly transparency = signal(
+    this.preferences.read().transparency
+  );
 
   private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
 
@@ -112,10 +129,9 @@ export class UwtInspectorDialogComponent {
     this.applyTransparency(this.transparency());
   }
 
-  /** Whether keyboard focus is anywhere in the popup, header included. */
+  /** Whether keyboard focus is anywhere in the inspector, header included. */
   containsFocus(): boolean {
-    const dialog = this.dialogElement();
-    return !!dialog && dialog.contains(this.document.activeElement);
+    return this.frame().contains(this.document.activeElement);
   }
 
   /** Moves focus to the search field. */
@@ -123,7 +139,15 @@ export class UwtInspectorDialogComponent {
     const input = this.host.nativeElement.querySelector<HTMLInputElement>(
       '.uwt-inspector-search input'
     );
-    (input ?? this.dialogElement())?.focus();
+    (input ?? this.frame()).focus();
+  }
+
+  protected setDock(dock: UwtInspectorDock): void {
+    this.session.controls?.setDock(dock);
+  }
+
+  protected close(): void {
+    this.session.controls?.close();
   }
 
   protected setPaused(paused: boolean): void {
@@ -141,21 +165,16 @@ export class UwtInspectorDialogComponent {
     this.announce('History cleared. Capturing continues.');
   }
 
-  /** Lets the app show through the window, and remembers the choice. */
+  /** Lets the app show through the dialog, and remembers the choice. */
   protected setTransparency(percent: number): void {
     this.transparency.set(percent);
     this.applyTransparency(percent);
-    uwtSafeVoid('transparency.save', () =>
-      this.document.defaultView?.localStorage.setItem(
-        UWT_INSPECTOR_TRANSPARENCY_KEY,
-        String(percent)
-      )
-    );
+    this.preferences.update({ transparency: percent });
   }
 
   /**
    * A new `style` object, rather than this component's own styles, so the
-   * window's header and frame turn see-through too.
+   * dialog's header and frame turn see-through too. Only a dialog has one.
    */
   private applyTransparency(percent: number): void {
     if (this.dialogConfig) {
@@ -166,21 +185,6 @@ export class UwtInspectorDialogComponent {
     }
   }
 
-  /** The last choice in this browser, or fully opaque. */
-  private storedTransparency(): number {
-    const stored = uwtSafe(
-      'transparency.read',
-      () =>
-        Number(
-          this.document.defaultView?.localStorage.getItem(
-            UWT_INSPECTOR_TRANSPARENCY_KEY
-          )
-        ),
-      0
-    );
-    return stored >= 0 && stored <= UWT_INSPECTOR_MAX_TRANSPARENCY ? stored : 0;
-  }
-
   /** One polite summary of what arrived since the last one, if anything. */
   private announceNew(): void {
     if (this.store.paused()) {
@@ -206,11 +210,16 @@ export class UwtInspectorDialogComponent {
     try {
       this.announcer?.announce(message, 'polite');
     } catch {
-      // Announcements are a courtesy; never let one break the popup.
+      // Announcements are a courtesy; never let one break the inspector.
     }
   }
 
-  private dialogElement(): HTMLElement | null {
-    return this.host.nativeElement.closest<HTMLElement>('[role="dialog"]');
+  /** The dialog or pane around this content, or the content itself. */
+  private frame(): HTMLElement {
+    return (
+      this.host.nativeElement.closest<HTMLElement>(
+        '[role="dialog"], [role="region"]'
+      ) ?? this.host.nativeElement
+    );
   }
 }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts b/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
index f8c08e6..d1b4690 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
@@ -7,6 +7,7 @@
 
 export {
   UWT_EVENT_INSPECTOR_CONFIG,
+  UwtInspectorDock,
   UwtInspectorExport,
   UwtInspectorFieldFilter,
   UwtInspectorFilterOperator,

From 490ae413ad0896b855b1fbafe69615d43e9898b0 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 13:33:41 +0100
Subject: [PATCH 07/51] add vars

---
 projects/ngx-ui-watchtower/DESIGN.md          | 27 +++++++++++++++++--
 projects/ngx-ui-watchtower/README.md          | 11 ++++++++
 .../uwt-inspector-pane.component.spec.ts      | 17 ++++++++++++
 .../uwt-inspector-pane.component.ts           | 12 ++++++---
 4 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index a8a85f1..94bbd20 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2082,8 +2082,31 @@ Moving it keeps everything captured, the filters and the pause; pages and
 expanded rows start afresh.
 
 A pane makes room by padding the page's `body` on its side, so content in
-the normal flow moves aside. Elements the app places with `position: fixed`,
-or sizes to `100vw`, stay where they are, and the pane covers their edge.
+the normal flow moves aside. A page can't shrink the browser's viewport —
+only the browser can, as DevTools does — so whatever is laid out against the
+window stays where it is: `position: fixed` headers and buttons, `100vw`
+widths and `100vh` heights reach under the pane, and media queries still see
+the whole window.
+
+For those, the pane publishes its size on `<html>` while it is open, in
+pixels: `--uwt-inspector-inset-left`, `--uwt-inspector-inset-right` or
+`--uwt-inspector-inset-bottom`, and leaves the others unset. An app opts in
+where it needs to; the `0px` fallback keeps everything as it was with no pane
+open:
+
+```css
+.app-header {
+  left: var(--uwt-inspector-inset-left, 0px);
+  right: var(--uwt-inspector-inset-right, 0px);
+}
+.help-button {
+  right: calc(1.5rem + var(--uwt-inspector-inset-right, 0px));
+  bottom: calc(1.5rem + var(--uwt-inspector-inset-bottom, 0px));
+}
+.app-shell {
+  height: calc(100vh - var(--uwt-inspector-inset-bottom, 0px));
+}
+```
 
 The separate window has to open from a click or key press — the shortcut and
 the Dock buttons both are — or the browser blocks it. The inspector then
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index e364c76..4bd6c3b 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -365,6 +365,17 @@ It lists everything the app sends from that moment on, with search, filters
 and JSON download. It opens as a dialog, with a Transparency slider; its Dock
 buttons move it to its own window or a pane on the left, right or bottom.
 
+A pane pushes the page aside, but elements fixed to the window stay put. To
+keep them beside the pane, use the size it publishes on `<html>`
+(`--uwt-inspector-inset-left`, `-right` or `-bottom`):
+
+```css
+.app-header {
+  left: var(--uwt-inspector-inset-left, 0px);
+  right: var(--uwt-inspector-inset-right, 0px);
+}
+```
+
 ## Testing
 
 ```ts
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
index 69f0436..4e68d7e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
@@ -68,6 +68,23 @@ describe('UwtInspectorPaneComponent', () => {
     expect(host().querySelector('uwt-inspector')).not.toBeNull();
   });
 
+  it('should publish its size for the app, and take it back when it closes', () => {
+    const inset = (side: string) =>
+      document.documentElement.style.getPropertyValue(
+        `--uwt-inspector-inset-${side}`
+      );
+    open('right');
+    expect(inset('right')).toBe('512px');
+    expect(inset('left')).toBe('');
+    expect(inset('bottom')).toBe('');
+
+    key('ArrowLeft');
+    expect(inset('right')).toBe('544px');
+
+    fixture.destroy();
+    expect(inset('right')).toBe('');
+  });
+
   it('should give the app its padding back when it closes', () => {
     document.body.style.paddingLeft = '7px';
     open('left');
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
index a98cbb4..e2c7288 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
@@ -25,9 +25,11 @@ const STEP_REM = 2;
 /**
  * The inspector docked beside or below the app, like Chrome DevTools. It
  * makes room by padding the page's `body` on its side, so content in the
- * normal flow moves aside; the app's `position: fixed` elements stay where
- * they are. Resized by dragging or with the arrow keys on its inner edge,
- * and remembers its size per side.
+ * normal flow moves aside. Elements placed against the window — fixed
+ * headers, `100vh` shells — can't be moved from here, so it also publishes
+ * its size as `--uwt-inspector-inset-left`, `-right` or `-bottom` on
+ * `<html>`, for the app's CSS to use. Resized by dragging or with the arrow
+ * keys on its inner edge, and remembers its size per side.
  */
 @Component({
   selector: 'uwt-inspector-pane',
@@ -60,6 +62,7 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
 
   private padding = '';
   private paddingBefore = '';
+  private inset = '';
   private dragging = false;
 
   ngOnInit(): void {
@@ -67,6 +70,7 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
     this.paddingBefore = this.document.body.style.getPropertyValue(
       this.padding
     );
+    this.inset = `--uwt-inspector-inset-${this.side()}`;
     this.resize(
       this.preferences.read().paneSize[this.side()] ?? this.defaultSize()
     );
@@ -74,6 +78,7 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.document.body.style.setProperty(this.padding, this.paddingBefore);
+    this.document.documentElement.style.removeProperty(this.inset);
   }
 
   /** Sets the size within its limits, and makes room for it. */
@@ -91,6 +96,7 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
     });
     this.size.set(clamped);
     this.document.body.style.setProperty(this.padding, `${clamped}px`);
+    this.document.documentElement.style.setProperty(this.inset, `${clamped}px`);
   }
 
   protected startDrag(event: PointerEvent): void {

From 4648f5861472d901df41250836f4b629074418e9 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 14:09:42 +0100
Subject: [PATCH 08/51] polish

---
 projects/ngx-ui-watchtower/DESIGN.md          |  3 +-
 .../uwt-event-inspector.service.spec.ts       | 33 +++++++++++++++++++
 .../uwt-event-inspector.service.ts            | 10 +++++-
 .../uwt-inspector-pane.component.spec.ts      | 23 +++++++++++++
 .../uwt-inspector-pane.component.ts           | 21 ++++++++----
 .../uwt-inspector-session.ts                  |  2 ++
 .../uwt-inspector-window.spec.ts              |  2 +-
 .../uwt-inspector-window.ts                   |  1 +
 8 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 94bbd20..b849d05 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2203,7 +2203,8 @@ or `'KeyD'`, and an omitted modifier must be up. Spread
 `UwtEventInspectorService` opens it from code: `open()`, `close()`,
 `toggle()`, `setDock(dock)` — a `UwtInspectorDock`: `'dialog'`, `'window'`,
 `'left'`, `'right'` or `'bottom'` — and an `isOpen` signal. `setDock` opens
-it there if it is closed, and remembers the choice like the Dock buttons.
+it there if it is closed, and remembers the choice like the Dock buttons;
+asked for the dock it is already in, it just focuses it.
 
 A download is a `UwtInspectorExport`:
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 0657c18..13ce471 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -105,6 +105,7 @@ describe('UwtEventInspectorService', () => {
   /** A stand-in window host, recording what the service asked of it. */
   function fakeWindow() {
     const host = {
+      dock: 'window' as const,
       focus: jest.fn(),
       containsFocus: jest.fn(() => false),
       destroy: jest.fn()
@@ -150,6 +151,7 @@ describe('UwtEventInspectorService', () => {
   it('should bring focus back to an open popup, and close it from inside', () => {
     create().install();
     press();
+    dialogs.instance.focusSearch.mockClear();
 
     dialogs.containsFocus = false;
     press();
@@ -321,4 +323,35 @@ describe('UwtEventInspectorService', () => {
     expect(service.isOpen()).toBe(false);
     expect(pane()).toBeNull();
   });
+
+  it('should move focus into a pane it opens, so the shortcut closes it next', () => {
+    remember({ dock: 'right' });
+    const service = create();
+    service.install();
+
+    press();
+    expect(pane()?.contains(document.activeElement)).toBe(true);
+
+    press();
+    expect(service.isOpen()).toBe(false);
+  });
+
+  it('should leave the inspector as it is when asked for the dock it is in', () => {
+    const service = create();
+    service.setDock('right');
+    const first = pane();
+
+    service.setDock('right');
+
+    expect(pane()).toBe(first);
+    expect(document.querySelectorAll('uwt-inspector-pane')).toHaveLength(1);
+    service.close();
+
+    const { host, open } = fakeWindow();
+    service.setDock('window');
+    service.setDock('window');
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(host.destroy).not.toHaveBeenCalled();
+    expect(host.focus).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 0458f68..d1c0fe2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -148,11 +148,15 @@ export class UwtEventInspectorService {
       return;
     }
     this.preferences.update({ dock });
+    if (this.host?.dock === dock) {
+      // Already there: rebuilding would only lose its page and expanded rows.
+      this.open();
+      return;
+    }
     const previous = this.host;
     this.host = undefined;
     uwtSafeVoid('setDock', () => previous?.destroy());
     this.show(dock);
-    uwtSafeVoid('focus', () => this.host?.focus());
   }
 
   /** Closes the inspector, discarding what it captured. */
@@ -197,6 +201,8 @@ export class UwtEventInspectorService {
             : this.openPane(dock);
       this.isOpen.set(true);
     });
+    // A dialog focuses itself once rendered; a pane or window is ready now.
+    uwtSafeVoid('focus', () => this.host?.focus());
   }
 
   /** The user closed it themselves: the dialog's ✕ or Escape, the window. */
@@ -229,6 +235,7 @@ export class UwtEventInspectorService {
       }
     );
     const host: UwtInspectorHost = {
+      dock: 'dialog',
       focus: () => ref.componentInstance?.focusSearch(),
       containsFocus: () => !!ref.componentInstance?.containsFocus(),
       destroy: () => ref.close()
@@ -249,6 +256,7 @@ export class UwtEventInspectorService {
     this.appRef.attachView(ref.hostView);
     ref.changeDetectorRef.detectChanges();
     return {
+      dock: side,
       focus: () => ref.instance.content().focusSearch(),
       containsFocus: () => ref.instance.content().containsFocus(),
       destroy: () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
index 4e68d7e..7702c21 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.spec.ts
@@ -85,6 +85,29 @@ describe('UwtInspectorPaneComponent', () => {
     expect(inset('right')).toBe('');
   });
 
+  it('should return to its chosen size when a squeezed window grows back', () => {
+    const width = (px: number) => {
+      Object.defineProperty(window, 'innerWidth', {
+        value: px,
+        configurable: true,
+        writable: true
+      });
+      window.dispatchEvent(new Event('resize'));
+      fixture.detectChanges();
+    };
+    open('right');
+
+    try {
+      width(600);
+      expect(host().style.width).toBe('480px');
+      width(1024);
+      expect(host().style.width).toBe('512px');
+      expect(stored().paneSize).toBeUndefined();
+    } finally {
+      width(1024);
+    }
+  });
+
   it('should give the app its padding back when it closes', () => {
     document.body.style.paddingLeft = '7px';
     open('left');
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
index e2c7288..daaf093 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.ts
@@ -43,7 +43,7 @@ const STEP_REM = 2;
     '[class.uwt-inspector-pane--bottom]': "side() === 'bottom'",
     '[style.width.px]': "side() === 'bottom' ? null : size()",
     '[style.height.px]': "side() === 'bottom' ? size() : null",
-    '(window:resize)': 'resize(size())'
+    '(window:resize)': 'resize(chosen)'
   },
   templateUrl: './uwt-inspector-pane.component.html',
   styleUrl: './uwt-inspector-pane.component.scss'
@@ -60,6 +60,9 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
   protected readonly size = signal(0);
   protected readonly limits = signal({ min: 0, max: 0 });
 
+  /** The size last chosen, which a smaller window squeezes only for a while. */
+  protected chosen = 0;
+
   private padding = '';
   private paddingBefore = '';
   private inset = '';
@@ -71,9 +74,9 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
       this.padding
     );
     this.inset = `--uwt-inspector-inset-${this.side()}`;
-    this.resize(
-      this.preferences.read().paneSize[this.side()] ?? this.defaultSize()
-    );
+    this.chosen =
+      this.preferences.read().paneSize[this.side()] ?? this.defaultSize();
+    this.resize(this.chosen);
   }
 
   ngOnDestroy(): void {
@@ -114,7 +117,7 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
     }
     const view = this.document.defaultView;
     const side = this.side();
-    this.resize(
+    this.choose(
       side === 'left'
         ? event.clientX
         : side === 'right'
@@ -144,10 +147,16 @@ export class UwtInspectorPaneComponent implements OnInit, OnDestroy {
     }
     event.preventDefault();
     const step = (event.key === grow[side] ? 1 : -1) * STEP_REM * this.rem();
-    this.resize(this.size() + step);
+    this.choose(this.size() + step);
     this.save();
   }
 
+  /** Resizes on the user's behalf, and keeps that as the size to return to. */
+  private choose(size: number): void {
+    this.resize(size);
+    this.chosen = this.size();
+  }
+
   private save(): void {
     this.preferences.update({
       paneSize: {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
index 4a948b4..22358a7 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
@@ -9,6 +9,8 @@ import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
 
 /** One way of showing the inspector: a dialog, a pane or a window. */
 export interface UwtInspectorHost {
+  /** Where it shows the inspector. */
+  readonly dock: UwtInspectorDock;
   /** Moves focus into the inspector. */
   focus(): void;
   /** Whether keyboard focus is inside the inspector. */
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
index df89879..b9dfdbb 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -78,7 +78,7 @@ describe('uwtOpenInspectorWindow', () => {
 
     const host = uwtOpenInspectorWindow(options);
 
-    expect(host).toBeDefined();
+    expect(host?.dock).toBe('window');
     expect(open).toHaveBeenCalledWith(
       '',
       UWT_INSPECTOR_WINDOW_NAME,
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 8ecc11c..552c929 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -108,6 +108,7 @@ export function uwtOpenInspectorWindow(
   doc.addEventListener('keydown', options.onKeydown, true);
 
   return {
+    dock: 'window',
     focus: () => {
       popup.focus();
       ref.instance.focusSearch();

From b4864efa1d7f505c9ce4893ceb404c343abcd7ad Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 4 Nov 2026 22:34:04 +0100
Subject: [PATCH 09/51] lab phases 1 and 2

---
 .github/workflows/checks.yml                  |   30 +
 .gitignore                                    |    3 +
 README.md                                     |   66 +-
 angular.json                                  |   42 +
 assets/logo/logo-mark.svg                     |    1 +
 package-lock.json                             |   43 +
 package.json                                  |    7 +-
 playwright.config.ts                          |   39 +
 playwright/bi.spec.ts                         |   27 +
 playwright/broker.spec.ts                     |   43 +
 playwright/fragment.spec.ts                   |   46 +
 playwright/identity.spec.ts                   |   52 +
 playwright/inspector.spec.ts                  |  162 ++
 playwright/lab.ts                             |  157 ++
 playwright/lifecycle.spec.ts                  |   19 +
 playwright/logging.spec.ts                    |   45 +
 playwright/options.spec.ts                    |   66 +
 playwright/privacy.spec.ts                    |   35 +
 playwright/scenarios.spec.ts                  |   66 +
 playwright/telemetries.spec.ts                |  124 ++
 playwright/tsconfig.json                      |    8 +
 projects/ngx-ui-watchtower/DESIGN.md          |   36 +-
 projects/ngx-ui-watchtower/README.md          |    6 +-
 .../uwt-event-inspector.service.spec.ts       |   38 +-
 .../uwt-event-inspector.service.ts            |   10 +-
 .../uwt-inspector-filter-bar.component.html   |    2 +-
 .../uwt-inspector-logo.component.html         |   48 +
 .../uwt-inspector-logo.component.scss         |   11 +
 .../uwt-inspector-logo.component.ts           |   14 +
 .../uwt-inspector-shortcut.spec.ts            |   99 +-
 .../uwt-inspector-shortcut.ts                 |   50 +-
 .../uwt-inspector.models.ts                   |   12 +-
 .../uwt-inspector.providers.ts                |    6 +-
 .../uwt-inspector.component.html              |    8 +-
 .../uwt-inspector.component.scss              |    6 +
 .../uwt-inspector.component.spec.ts           |   21 +
 .../uwt-inspector/uwt-inspector.component.ts  |   29 +-
 .../uwt-rum-credentials.ts                    |    3 +-
 .../uwt-rum-telemetry.sink.spec.ts            |   12 +
 .../uwt-rum-telemetry.sink.ts                 |   28 +-
 projects/watchtower-lab/proxy.conf.json       |    6 +
 projects/watchtower-lab/server/lab-server.mjs |  281 +++
 .../src/fragment/fragment.component.ts        |  109 +
 .../src/fragment/fragment.config.ts           |   26 +
 projects/watchtower-lab/src/index.html        |   13 +
 .../src/lab/lab-layout.service.ts             |   17 +
 .../src/lab/lab-log-api.provider.ts           |   27 +
 .../watchtower-lab/src/lab/lab-options.ts     |   25 +
 .../src/lab/lab-rum-credentials.provider.ts   |   58 +
 .../src/lab/lab-wire.service.ts               |  116 ++
 projects/watchtower-lab/src/main.ts           |   22 +
 .../watchtower-lab/src/shell/pages/bi.page.ts |   70 +
 .../src/shell/pages/fragment.page.ts          |   31 +
 .../src/shell/pages/identity.page.ts          |   47 +
 .../src/shell/pages/inspector.page.ts         |  172 ++
 .../src/shell/pages/lifecycle.page.ts         |   56 +
 .../src/shell/pages/logging.page.ts           |   81 +
 .../src/shell/pages/privacy.page.ts           |   79 +
 .../src/shell/pages/scenarios.page.ts         |  220 ++
 .../src/shell/pages/wire.page.ts              |  210 ++
 .../src/shell/shell.component.ts              |  132 ++
 .../watchtower-lab/src/shell/shell.config.ts  |  130 ++
 projects/watchtower-lab/src/styles.scss       |  213 ++
 .../watchtower-lab/src/telemetry.schema.ts    |   42 +
 projects/watchtower-lab/tsconfig.app.json     |   10 +
 temp_docs/CHANGES_DESC.md                     |  720 +++++++
 temp_docs/CHANGES_DESC_LIBRARY_ONLY.md        |  583 ++++++
 temp_docs/CLAUDE_HANDOFF.md                   |  302 +++
 temp_docs/INTEGRATION-DATA-GATEWAY.md         | 1844 +++++++++++++++++
 temp_docs/SESSION-LIFECYCLE.md                |  243 +++
 temp_docs/WATCHTOWER_LAB_PLAN.md              |  171 ++
 tsconfig.json                                 |    3 +-
 72 files changed, 7471 insertions(+), 108 deletions(-)
 create mode 100644 assets/logo/logo-mark.svg
 create mode 100644 playwright.config.ts
 create mode 100644 playwright/bi.spec.ts
 create mode 100644 playwright/broker.spec.ts
 create mode 100644 playwright/fragment.spec.ts
 create mode 100644 playwright/identity.spec.ts
 create mode 100644 playwright/inspector.spec.ts
 create mode 100644 playwright/lab.ts
 create mode 100644 playwright/lifecycle.spec.ts
 create mode 100644 playwright/logging.spec.ts
 create mode 100644 playwright/options.spec.ts
 create mode 100644 playwright/privacy.spec.ts
 create mode 100644 playwright/scenarios.spec.ts
 create mode 100644 playwright/telemetries.spec.ts
 create mode 100644 playwright/tsconfig.json
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.html
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.scss
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.ts
 create mode 100644 projects/watchtower-lab/proxy.conf.json
 create mode 100644 projects/watchtower-lab/server/lab-server.mjs
 create mode 100644 projects/watchtower-lab/src/fragment/fragment.component.ts
 create mode 100644 projects/watchtower-lab/src/fragment/fragment.config.ts
 create mode 100644 projects/watchtower-lab/src/index.html
 create mode 100644 projects/watchtower-lab/src/lab/lab-layout.service.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-log-api.provider.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-options.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-wire.service.ts
 create mode 100644 projects/watchtower-lab/src/main.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/bi.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/fragment.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/identity.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/inspector.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/logging.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/privacy.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/scenarios.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/wire.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/shell.component.ts
 create mode 100644 projects/watchtower-lab/src/shell/shell.config.ts
 create mode 100644 projects/watchtower-lab/src/styles.scss
 create mode 100644 projects/watchtower-lab/src/telemetry.schema.ts
 create mode 100644 projects/watchtower-lab/tsconfig.app.json
 create mode 100644 temp_docs/CHANGES_DESC.md
 create mode 100644 temp_docs/CHANGES_DESC_LIBRARY_ONLY.md
 create mode 100644 temp_docs/CLAUDE_HANDOFF.md
 create mode 100644 temp_docs/INTEGRATION-DATA-GATEWAY.md
 create mode 100644 temp_docs/SESSION-LIFECYCLE.md
 create mode 100644 temp_docs/WATCHTOWER_LAB_PLAN.md

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index e74f21c..2d4d16f 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -109,3 +109,33 @@ jobs:
 
       - name: Typecheck
         run: npm run typecheck
+
+  e2e:
+    name: End-to-end (Chromium, WebKit)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version: 22.x
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install browsers
+        run: npx playwright install --with-deps chromium webkit
+
+      - name: Run the Watchtower Lab suite
+        run: npm run e2e
+
+      - name: Upload the report
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 14
diff --git a/.gitignore b/.gitignore
index dd2bf6e..d9d806b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,9 @@ yarn-error.log
 .sass-cache/
 /connect.lock
 /coverage
+/test-results
+/playwright-report
+/blob-report
 /libpeerconnection.log
 testem.log
 /typings
diff --git a/README.md b/README.md
index 70ffb84..b1853e5 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,8 @@ projects/ngx-ui-watchtower/
   README.md         usage guide, published to npm
   DESIGN.md         full design
   package.json      the published package's manifest
+projects/watchtower-lab/  the Watchtower Lab: a testing app, never published
+playwright/               the lab's end-to-end suite (Playwright)
 ```
 
 ## Getting started
@@ -42,16 +44,59 @@ The package is built to `dist/ngx-ui-watchtower`.
 
 ## Scripts
 
-| Script                  | What it does                                         |
-| ----------------------- | ---------------------------------------------------- |
-| `npm run build`         | Builds the package (production, partial compilation) |
-| `npm run watch`         | Rebuilds on change (development)                     |
-| `npm run test`          | Runs the unit tests (Jest)                           |
-| `npm run test:coverage` | Runs the unit tests with coverage, as CI does        |
-| `npm run typecheck`     | Type-checks every library and spec tsconfig          |
-| `npm run lint`          | ESLint, no warnings allowed                          |
-| `npm run format`        | Formats with Prettier                                |
-| `npm run format:check`  | Checks formatting without writing                    |
+| Script                  | What it does                                          |
+| ----------------------- | ----------------------------------------------------- |
+| `npm run build`         | Builds the package (production, partial compilation)  |
+| `npm run watch`         | Rebuilds on change (development)                      |
+| `npm run test`          | Runs the unit tests (Jest)                            |
+| `npm run test:coverage` | Runs the unit tests with coverage, as CI does         |
+| `npm run typecheck`     | Type-checks every library, spec and suite tsconfig    |
+| `npm run lint`          | ESLint, no warnings allowed                           |
+| `npm run format`        | Formats with Prettier                                 |
+| `npm run format:check`  | Checks formatting without writing                     |
+| `npm run lab`           | Starts the Watchtower Lab on http://localhost:4280    |
+| `npm run lab:build`     | Builds the lab, to check it compiles                  |
+| `npm run e2e`           | Builds the lab and runs the Playwright suite          |
+| `npm run e2e:ui`        | Opens the suite in Playwright's UI, on the last build |
+
+## Watchtower Lab
+
+A testing app for the library, built from its source, so a change shows up
+on save. `npm run lab` starts it with a mock backend on port 4380, which
+stands in for everything the library talks to: the real `aws-rum-web` runs
+against a mock RUM broker and dataplane, fully offline, and logs go to a mock
+log backend.
+
+One page per concern: **Scenarios**, **BI events**, **Logging**,
+**Identity**, **Privacy**, **Lifecycle**, **Fragment** (a second app in an
+iframe, forwarding through the shell), **Event Inspector** (every dock, event
+generators, and the `--uwt-inspector-inset-*` opt-in on the lab's fixed
+header and status bar) and **On the wire**: what the mock backend actually
+received.
+
+Options, read once at startup like an app's configuration:
+
+| Query                   | Effect                                   |
+| ----------------------- | ---------------------------------------- |
+| `?destination=noop`     | The noop destination instead of RUM      |
+| `?telemetry=off`        | `withTelemetryEnabled(false)`            |
+| `?inspector=off`        | The Event Inspector disabled             |
+| `?inspector=noshortcut` | The Event Inspector without its shortcut |
+
+The mock RUM broker's answer is set on the **On the wire** page, then applied
+by reloading: `ok`, `null` (RUM off for the page), `fail` (the broker errors;
+the app carries on) or `short-expiry` (credentials refresh within seconds).
+The same page sets RUM's own `telemetries`: the library's default, or any of
+`errors`, `performance`, `interaction`, `http` and `replay`, down to none.
+
+### Automated tests
+
+`npm run e2e` builds the lab and runs the suite in `playwright/` on Chromium
+and WebKit: every lab page, the broker modes, RUM's telemetries, the query
+options and the Event Inspector's docks and shortcut, checked against what
+the mock backend received. The server it starts serves the built lab with the
+mock backend on http://localhost:4390, so it runs beside `npm run lab`. The
+first time, download the browsers with `npx playwright install chromium webkit`.
 
 ## Before you push
 
@@ -63,6 +108,7 @@ npm run typecheck
 npm run lint
 npm run format:check
 npm run build
+npm run e2e
 ```
 
 CI runs the same checks on every pull request and every push to `main`.
diff --git a/angular.json b/angular.json
index 9cbcf28..a14fa32 100644
--- a/angular.json
+++ b/angular.json
@@ -35,6 +35,48 @@
           }
         }
       }
+    },
+    "watchtower-lab": {
+      "projectType": "application",
+      "root": "projects/watchtower-lab",
+      "sourceRoot": "projects/watchtower-lab/src",
+      "prefix": "lab",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/watchtower-lab",
+            "index": "projects/watchtower-lab/src/index.html",
+            "browser": "projects/watchtower-lab/src/main.ts",
+            "tsConfig": "projects/watchtower-lab/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "styles": ["projects/watchtower-lab/src/styles.scss"],
+            "assets": [
+              {
+                "glob": "icons.svg",
+                "input": "node_modules/cps-ui-kit/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "logo-mark.svg",
+                "input": "assets/logo",
+                "output": "assets/logo"
+              }
+            ],
+            "optimization": false,
+            "sourceMap": true,
+            "extractLicenses": false
+          }
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "buildTarget": "watchtower-lab:build",
+            "proxyConfig": "projects/watchtower-lab/proxy.conf.json",
+            "port": 4280
+          }
+        }
+      }
     }
   }
 }
diff --git a/assets/logo/logo-mark.svg b/assets/logo/logo-mark.svg
new file mode 100644
index 0000000..22a870c
--- /dev/null
+++ b/assets/logo/logo-mark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256" role="img" aria-label="Angular UI Watchtower"><title>Angular UI Watchtower</title><defs><linearGradient id="disc" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="256" y2="256"><stop offset="0" stop-color="#870a3c"/><stop offset="0.5" stop-color="#640032"/><stop offset="1" stop-color="#500a28"/></linearGradient></defs><circle cx="128" cy="128" r="128" fill="url(#disc)"/><circle fill="#ffb57b" cx="128" cy="98" r="12"/><path fill="none" stroke="#ffb57b" stroke-width="16" stroke-linecap="round" d="M99.63 75.84A36 36 0 0 1 156.37 75.84"/><path stroke="#f52d28" fill="none" stroke-width="16" stroke-linecap="round" d="M106 132H150"/><path stroke="#fa551e" fill="none" stroke-width="16" stroke-linecap="round" d="M95 154H161"/><path stroke="#ff780f" fill="none" stroke-width="16" stroke-linecap="round" d="M84 176H172"/><path stroke="#ffb57b" fill="none" stroke-width="16" stroke-linecap="round" d="M73 198H183"/></svg>
diff --git a/package-lock.json b/package-lock.json
index 2ae8619..92c0889 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@angular/forms": "~21.2.6",
         "@angular/router": "~21.2.6",
         "@e965/xlsx": "^0.20.3",
+        "@playwright/test": "^1.64.1",
         "@types/jest": "^30.0.0",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.10.10",
@@ -8320,6 +8321,21 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.64.1",
+      "integrity": "sha512-IaYGml/nSOiZWROfPtuIL7neuu9qDOZ3TNvNljUIrhDMxiGTgPjzj/g9p9RxpS2tSepPDRY+UwAaEeiKtUvIAg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.64.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@primeuix/motion": {
       "version": "0.0.10",
       "integrity": "sha512-PsZwOPq79Scp7/ionshRcQ5xKVf9+zuLcyY5mf6onK8chHT5C9JGphmcIZ4CzcqxuGEpsm8AIbTGy+zS3RtzLA==",
@@ -19710,6 +19726,33 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.64.1",
+      "integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.64.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.64.1",
+      "integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
diff --git a/package.json b/package.json
index cb244a0..227d0cf 100644
--- a/package.json
+++ b/package.json
@@ -5,12 +5,16 @@
     "ng": "ng",
     "build": "ng build --configuration=production --project=ngx-ui-watchtower",
     "watch": "ng build ngx-ui-watchtower --watch --configuration development",
+    "lab": "node projects/watchtower-lab/server/lab-server.mjs",
+    "lab:build": "ng build watchtower-lab",
+    "e2e": "ng build watchtower-lab && playwright test",
+    "e2e:ui": "playwright test --ui",
     "test": "ng test --project=ngx-ui-watchtower",
     "test:coverage": "ng test --project=ngx-ui-watchtower --coverage --coverage-reporters text-summary --coverage-reporters lcov --json --output-file=./coverage/report.json",
     "lint": "eslint \"**/*.ts\" --max-warnings=0",
     "format": "prettier --write \"**/*.{ts,html}\"",
     "format:check": "prettier --check \"**/*.{ts,html}\"",
-    "typecheck": "tsc -p projects/ngx-ui-watchtower/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json --noEmit"
+    "typecheck": "tsc -p projects/ngx-ui-watchtower/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/rum/tsconfig.spec.json --noEmit && tsc -p projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json --noEmit && tsc -p projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json --noEmit && tsc -p playwright/tsconfig.json"
   },
   "private": true,
   "dependencies": {
@@ -32,6 +36,7 @@
     "@angular/forms": "~21.2.6",
     "@angular/router": "~21.2.6",
     "@e965/xlsx": "^0.20.3",
+    "@playwright/test": "^1.64.1",
     "@types/jest": "^30.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.10",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..18605f5
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,39 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/** Wide enough for the lab beside a pane. */
+const VIEWPORT = { width: 1440, height: 900 };
+
+/**
+ * The Watchtower Lab's suite: the real library and aws-rum-web in Chromium
+ * and WebKit, against the lab's mock backend. `npm run e2e` builds the lab
+ * first; the server below then serves it with the mock backend on one port.
+ */
+export default defineConfig({
+  testDir: 'playwright',
+  // The mock backend's state is shared — what it received, its broker mode,
+  // its telemetries — so tests run one at a time.
+  workers: 1,
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL: 'http://localhost:4390',
+    trace: 'on-first-retry'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'], viewport: VIEWPORT }
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'], viewport: VIEWPORT }
+    }
+  ],
+  webServer: {
+    command: 'node projects/watchtower-lab/server/lab-server.mjs --static',
+    url: 'http://localhost:4390/__lab/state',
+    reuseExistingServer: !process.env.CI
+  }
+});
diff --git a/playwright/bi.spec.ts b/playwright/bi.spec.ts
new file mode 100644
index 0000000..9cedea0
--- /dev/null
+++ b/playwright/bi.spec.ts
@@ -0,0 +1,27 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+});
+
+test('a tracked event arrives as com.uwt.bi', async ({ page, backend }) => {
+  await press(page, 'Track a click');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab_button_clicked').length > 0
+  );
+  expect(named(events, 'lab_button_clicked')[0].type).toBe('com.uwt.bi');
+});
+
+test('two identical events at once arrive as one', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Fire twice at once');
+  // Tracked after it, so once this arrives the pair has had its chance.
+  await press(page, 'Track a click');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab_button_clicked').length > 0
+  );
+  expect(named(events, 'lab_double_fired')).toHaveLength(1);
+});
diff --git a/playwright/broker.spec.ts b/playwright/broker.spec.ts
new file mode 100644
index 0000000..8045ae3
--- /dev/null
+++ b/playwright/broker.spec.ts
@@ -0,0 +1,43 @@
+import { expect, openLab, press, test } from './lab';
+
+for (const mode of ['null', 'fail'] as const) {
+  test(`broker "${mode}": the app carries on, and nothing reaches the dataplane`, async ({
+    page,
+    backend
+  }) => {
+    await backend.setBrokerMode(mode);
+    const sent: string[] = [];
+    page.on('request', (r) => {
+      if (r.url().includes('/appmonitors/')) {
+        sent.push(r.url());
+      }
+    });
+
+    await openLab(page, 'bi');
+    await press(page, 'Track a click');
+    // RUM would have sent within two of its 2-second dispatches.
+    await page.waitForTimeout(4500);
+
+    expect(sent).toEqual([]);
+    await expect(page.locator('lab-root main h1')).toHaveText('BI events');
+  });
+}
+
+test('broker "short-expiry": credentials are refreshed within seconds, without a tight loop', async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerMode('short-expiry');
+  let inits = 0;
+  page.on('request', (r) => {
+    if (r.url().endsWith('/rum/init')) {
+      inits++;
+    }
+  });
+
+  await openLab(page, 'bi');
+  await page.waitForTimeout(12_000);
+
+  expect(inits).toBeGreaterThanOrEqual(2);
+  expect(inits).toBeLessThanOrEqual(4);
+});
diff --git a/playwright/fragment.spec.ts b/playwright/fragment.spec.ts
new file mode 100644
index 0000000..1fe2d66
--- /dev/null
+++ b/playwright/fragment.spec.ts
@@ -0,0 +1,46 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+test('the fragment sends through the shell: once, under its own name, in the shell session', async ({
+  page,
+  backend
+}) => {
+  // The Event Inspector opens as a pane, beside the fragment rather than on it.
+  await page.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
+  await openLab(page, 'fragment');
+  await sessionStarted(page);
+  const fragment = page.frameLocator('iframe.lab-fragment');
+  await expect(fragment.locator('h1')).toHaveText('lab-fragment');
+  // Open first: the Event Inspector shows what arrives from then on.
+  await page.locator('.lab-header-button').click();
+
+  await press(fragment, 'Track a BI event');
+  await press(fragment, 'Run a scenario');
+  await press(fragment, 'Log a warning');
+
+  const events = await backend.rumUntil(
+    (e) =>
+      named(e, 'fragment_button_clicked').length > 0 &&
+      named(e, 'fragment-journey').length > 0
+  );
+  const clicked = named(events, 'fragment_button_clicked');
+  expect(clicked).toHaveLength(1);
+  expect(clicked[0].details.application).toBe('lab-fragment');
+  await expect(fragment.locator('p').first()).toContainText(
+    clicked[0].user.sessionId!.slice(0, 8)
+  );
+
+  await expect
+    .poll(async () => (await backend.logs()).map((r) => r.application))
+    .toContain('lab-fragment');
+  await press(fragment, 'Query its logs');
+  await expect(fragment.locator('.lab-readout')).toContainText(
+    'answered by the shell'
+  );
+
+  await expect(page.locator('uwt-inspector')).toContainText('↪ lab-fragment');
+});
diff --git a/playwright/identity.spec.ts b/playwright/identity.spec.ts
new file mode 100644
index 0000000..d32c830
--- /dev/null
+++ b/playwright/identity.spec.ts
@@ -0,0 +1,52 @@
+import {
+  expect,
+  navigate,
+  openLab,
+  press,
+  RumEvent,
+  sessionStarted,
+  test
+} from './lab';
+
+const ANNA = '3f2504e0-4f89-41d3-9a0c-0305e82c3301';
+
+const tracked = (events: RumEvent[]) =>
+  events.filter((e) => e.details.eventName === 'lab_button_clicked');
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'identity');
+  await sessionStarted(page);
+  await press(page, 'Sign in as Anna');
+  await expect(page.locator('.lab-status')).toContainText(ANNA);
+});
+
+test('after signing in, events carry the user and signedIn: true', async ({
+  page,
+  backend
+}) => {
+  await navigate(page, 'BI events');
+  await press(page, 'Track a click');
+
+  const events = await backend.rumUntil((e) => tracked(e).length > 0);
+  expect(tracked(events)[0].user.userId).toBe(ANNA);
+  expect(tracked(events)[0].metadata.signedIn).toBe(true);
+  await expect(page.locator('.lab-header')).toContainText('Signed in');
+});
+
+for (const signOut of ['Sign out (undefined)', "Sign out ('')"]) {
+  test(`${signOut}: a new session, and events no longer carry the user`, async ({
+    page,
+    backend
+  }) => {
+    const before = await sessionStarted(page);
+    await press(page, signOut);
+    await expect(page.locator('.lab-status')).not.toContainText(ANNA);
+    await expect(page.locator('.lab-status')).not.toContainText(before);
+
+    await navigate(page, 'BI events');
+    await press(page, 'Track a click');
+    const events = await backend.rumUntil((e) => tracked(e).length > 0);
+    expect(tracked(events)[0].user.userId).not.toBe(ANNA);
+    expect(tracked(events)[0].metadata.signedIn).toBe(false);
+  });
+}
diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
new file mode 100644
index 0000000..ae2ae5f
--- /dev/null
+++ b/playwright/inspector.spec.ts
@@ -0,0 +1,162 @@
+import { expect, openLab, Page, press, test } from './lab';
+
+/** Holds Shift and presses `keys` — by default the shortcut, Shift+E+I. */
+async function shortcut(page: Page, keys = ['KeyE', 'KeyI']): Promise<void> {
+  await page.keyboard.down('Shift');
+  for (const key of keys) {
+    await page.keyboard.press(key);
+  }
+  await page.keyboard.up('Shift');
+}
+
+/** The value of one of the pane's inset variables on `<html>`. */
+const inset = (page: Page, side: string) =>
+  page.evaluate(
+    (s) =>
+      getComputedStyle(document.documentElement).getPropertyValue(
+        `--uwt-inspector-inset-${s}`
+      ),
+    side
+  );
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'inspector');
+});
+
+test('opens from the header as a dialog, with the mark and the transparency slider', async ({
+  page
+}) => {
+  await page.locator('.lab-header-button').click();
+  const dialog = page.locator('.cps-dialog');
+  await expect(dialog.locator('uwt-inspector')).toBeVisible();
+  await expect(
+    dialog.locator('.cps-dialog-header-icon uwt-inspector-logo')
+  ).toHaveCount(1);
+  await expect(dialog.locator('cps-slider')).toBeVisible();
+});
+
+test('Shift+E+I opens it, brings focus back, and closes it from inside — never while typing', async ({
+  page
+}) => {
+  const inspector = page.locator('uwt-inspector');
+  await shortcut(page, ['KeyI']);
+  await shortcut(page, ['KeyE', 'KeyX', 'KeyI']);
+  await expect(inspector).toHaveCount(0);
+
+  await shortcut(page);
+  await expect(inspector).toBeVisible();
+
+  // Focus lands in its search field, where Shift+E+I is typing.
+  const search = page.locator('.uwt-inspector-search input').first();
+  await expect(search).toBeFocused();
+  await shortcut(page);
+  await expect(search).toHaveValue('EI');
+  await expect(inspector).toBeVisible();
+
+  // From the app, it brings focus back.
+  await page.mouse.click(300, 100);
+  await expect(search).not.toBeFocused();
+  await shortcut(page);
+  await expect(search).toBeFocused();
+
+  // From a button inside, it closes.
+  await page.locator('.cps-dialog cps-button button').first().focus();
+  await shortcut(page);
+  await expect(inspector).toHaveCount(0);
+});
+
+for (const { label, side } of [
+  { label: 'Left pane', side: 'left' },
+  { label: 'Right pane', side: 'right' },
+  { label: 'Bottom pane', side: 'bottom' }
+]) {
+  test(`${label}: its own header, no slider, and its size published as --uwt-inspector-inset-${side}`, async ({
+    page
+  }) => {
+    await press(page, label);
+    const pane = page.locator('uwt-inspector-pane');
+    await expect(pane).toBeVisible();
+    await expect(
+      pane.locator('.uwt-inspector__brand uwt-inspector-logo')
+    ).toHaveCount(1);
+    await expect(pane.locator('cps-slider')).toHaveCount(0);
+
+    const box = (await pane.boundingBox())!;
+    const size = side === 'bottom' ? box.height : box.width;
+    expect(Math.round(parseFloat(await inset(page, side)))).toBe(
+      Math.round(size)
+    );
+
+    await press(page, 'Close');
+    await expect(pane).toHaveCount(0);
+    expect(await inset(page, side)).toBe('');
+  });
+}
+
+test('the lab opts its fixed header and status bar in to the insets, and out', async ({
+  page
+}) => {
+  const right = async (selector: string) => {
+    const box = (await page.locator(selector).boundingBox())!;
+    return Math.round(box.x + box.width);
+  };
+
+  await press(page, 'Right pane');
+  const paneLeft = Math.round(
+    (await page.locator('uwt-inspector-pane').boundingBox())!.x
+  );
+  expect(await right('.lab-header')).toBe(paneLeft);
+
+  await page.locator('lab-inspector-page cps-switch').click();
+  await expect
+    .poll(() => right('.lab-header'))
+    .toBe(page.viewportSize()!.width);
+
+  await page.locator('lab-inspector-page cps-switch').click();
+  await press(page, 'Bottom pane');
+  const paneTop = Math.round(
+    (await page.locator('uwt-inspector-pane').boundingBox())!.y
+  );
+  const status = (await page.locator('.lab-status').boundingBox())!;
+  expect(Math.round(status.y + status.height)).toBe(paneTop);
+});
+
+test('a separate window, with its own header and no slider', async ({
+  page
+}) => {
+  const popup = page.waitForEvent('popup');
+  await press(page, 'Separate window');
+  const window = await popup;
+
+  await expect(
+    window.locator('.uwt-inspector__brand uwt-inspector-logo')
+  ).toHaveCount(1);
+  await expect(window).toHaveTitle('Event Inspector · watchtower-lab');
+  await expect(window.locator('cps-slider')).toHaveCount(0);
+});
+
+test('reopens where it was last, after a reload', async ({ page }) => {
+  await press(page, 'Right pane');
+  await expect(page.locator('uwt-inspector-pane')).toBeVisible();
+
+  await page.reload();
+  await page.locator('.lab-header-button').click();
+  const pane = (await page.locator('uwt-inspector-pane').boundingBox())!;
+  expect(Math.round(pane.x + pane.width)).toBe(page.viewportSize()!.width);
+});
+
+test('lists what is sent, keeping the newest 500 events per section', async ({
+  page
+}) => {
+  // A pane, so the page's buttons stay clear of it.
+  await press(page, 'Right pane');
+  await press(page, 'One of each kind');
+  await press(page, 'A burst of 600 BI events');
+  await press(page, 'A 300,000-character payload');
+  await press(page, 'Odd shapes');
+  await press(page, 'An unknown event type');
+
+  await expect(page.locator('uwt-inspector')).toContainText(
+    /BI telemetry · 500 · last [\d:]{8} · oldest \d+ dropped/
+  );
+});
diff --git a/playwright/lab.ts b/playwright/lab.ts
new file mode 100644
index 0000000..27afffc
--- /dev/null
+++ b/playwright/lab.ts
@@ -0,0 +1,157 @@
+import {
+  APIRequestContext,
+  expect,
+  FrameLocator,
+  Page,
+  test as base
+} from '@playwright/test';
+
+/** One RUM event as the mock dataplane received it, with its batch's user. */
+export interface RumEvent {
+  batch: number;
+  user: { sessionId?: string; userId?: string };
+  type: string;
+  metadata: Record<string, unknown>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  details: Record<string, any>;
+}
+
+/** One log record as the mock log backend stored it. */
+export interface LogRecord {
+  application: string;
+  logger: string;
+  level: string;
+  message: string;
+}
+
+export type BrokerMode = 'ok' | 'null' | 'fail' | 'short-expiry';
+export type Telemetry =
+  'errors' | 'performance' | 'interaction' | 'http' | 'replay';
+
+/** The lab's mock backend: what it received, and how its broker answers. */
+export class LabBackend {
+  private readonly request: APIRequestContext;
+
+  constructor(request: APIRequestContext) {
+    this.request = request;
+  }
+
+  async rum(): Promise<RumEvent[]> {
+    return (await (await this.request.get('/__lab/rum')).json()).events;
+  }
+
+  async logs(): Promise<LogRecord[]> {
+    return (await this.request.get('/__lab/logs')).json();
+  }
+
+  async state(): Promise<{
+    brokerMode: BrokerMode;
+    telemetries: Telemetry[] | null;
+  }> {
+    return (await this.request.get('/__lab/state')).json();
+  }
+
+  /** Waits until the RUM events received satisfy `done`, and returns them. */
+  async rumUntil(
+    done: (events: RumEvent[]) => boolean,
+    timeout = 10_000
+  ): Promise<RumEvent[]> {
+    let events: RumEvent[] = [];
+    await expect
+      .poll(async () => done((events = await this.rum())), { timeout })
+      .toBe(true);
+    return events;
+  }
+
+  async reset(): Promise<void> {
+    await this.request.post('/__lab/reset');
+  }
+
+  /** How the broker answers the next `/rum/init`. */
+  async setBrokerMode(mode: BrokerMode): Promise<void> {
+    await this.request.post('/__lab/broker-mode', { data: { mode } });
+  }
+
+  /** RUM's own telemetries the broker names; `null` for the library's default. */
+  async setTelemetries(telemetries: Telemetry[] | null): Promise<void> {
+    await this.request.post('/__lab/telemetries', { data: { telemetries } });
+  }
+}
+
+/** The library's events for one scenario or BI event name. */
+export function named(events: RumEvent[], name: string): RumEvent[] {
+  return events.filter(
+    (e) =>
+      e.type.startsWith('com.uwt.') &&
+      (e.details.scenarioName === name || e.details.eventName === name)
+  );
+}
+
+export const test = base.extend<{
+  backend: LabBackend;
+  errors: string[];
+}>({
+  // Every test starts from the broker's defaults and an empty backend.
+  backend: [
+    async ({ request }, use) => {
+      const backend = new LabBackend(request);
+      await backend.setBrokerMode('ok');
+      await backend.setTelemetries(null);
+      await backend.reset();
+      await use(backend);
+    },
+    { auto: true }
+  ],
+
+  // Page and console errors fail the test. A failed request isn't one: the
+  // `fail` broker answers with an error on purpose.
+  errors: [
+    async ({ page }, use) => {
+      const errors: string[] = [];
+      page.on('pageerror', (e) => errors.push(`page: ${e.message}`));
+      page.on('console', (m) => {
+        if (
+          m.type() === 'error' &&
+          !m.text().startsWith('Failed to load resource')
+        ) {
+          errors.push(`console: ${m.text()}`);
+        }
+      });
+      await use(errors);
+      expect(errors, 'page and console errors').toEqual([]);
+    },
+    { auto: true }
+  ]
+});
+
+export { expect };
+export type { Page };
+
+/** Opens a lab page by its address and waits for it, e.g. `'bi?telemetry=off'`. */
+export async function openLab(page: Page, address: string): Promise<void> {
+  await page.goto(`/${address}`);
+  await expect(page.locator('lab-root main h1')).toBeVisible();
+}
+
+/** Waits until RUM has started a session, as the status bar shows; its id. */
+export async function sessionStarted(page: Page): Promise<string> {
+  const status = page.locator('.lab-status');
+  await expect(status).toContainText(/session: [0-9a-f]{8}/, {
+    timeout: 15_000
+  });
+  return (await status.textContent())!.match(/session: ([0-9a-f-]{36})/)![1];
+}
+
+/** Moves to another lab page within the app, keeping its state. */
+export async function navigate(page: Page, label: string): Promise<void> {
+  await page.locator('.lab-nav').getByRole('link', { name: label }).click();
+  await expect(page.locator('lab-root main h1')).toHaveText(label);
+}
+
+/** Presses the lab's button with exactly this label. */
+export async function press(
+  where: Page | FrameLocator,
+  label: string
+): Promise<void> {
+  await where.getByRole('button', { name: label, exact: true }).first().click();
+}
diff --git a/playwright/lifecycle.spec.ts b/playwright/lifecycle.spec.ts
new file mode 100644
index 0000000..7535940
--- /dev/null
+++ b/playwright/lifecycle.spec.ts
@@ -0,0 +1,19 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+test('a scenario running when the page goes arrives abandoned, by beacon', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'lifecycle');
+  await sessionStarted(page);
+  await press(page, 'Start a scenario and reload');
+  await expect(page.locator('lab-root main h1')).toHaveText('Lifecycle');
+
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-abandoned').length > 0
+  );
+  expect(named(events, 'lab-abandoned')[0].details).toMatchObject({
+    status: 'abandoned',
+    metadata: { abandonedBy: 'page-hidden' }
+  });
+});
diff --git a/playwright/logging.spec.ts b/playwright/logging.spec.ts
new file mode 100644
index 0000000..d6fb57f
--- /dev/null
+++ b/playwright/logging.spec.ts
@@ -0,0 +1,45 @@
+import { expect, openLab, press, sessionStarted, test } from './lab';
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'logging');
+  await sessionStarted(page);
+});
+
+test('records reach the log backend, and the noisy logger drops its log line', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'error, with an Error');
+  await press(page, 'log (dropped)');
+  await press(page, 'warn');
+
+  await expect
+    .poll(async () => (await backend.logs()).map((r) => r.level))
+    .toEqual(expect.arrayContaining(['error', 'warn']));
+  const logs = await backend.logs();
+  expect(logs.some((r) => r.logger === 'lab' && r.level === 'error')).toBe(
+    true
+  );
+  expect(logs.some((r) => r.message === 'Not written')).toBe(false);
+});
+
+test('query() reads records back from the backend', async ({ page }) => {
+  await press(page, 'error, with an Error');
+  await expect
+    .poll(async () => {
+      await press(page, "query({ logger: 'lab' })");
+      return page.locator('.lab-readout').last().textContent();
+    })
+    .toContain('Saving the order failed');
+});
+
+test('an error is mirrored to RUM', async ({ page, backend }) => {
+  await press(page, 'error, with an Error');
+  await backend.rumUntil((events) =>
+    events.some(
+      (e) =>
+        e.type === 'com.amazon.rum.js_error_event' &&
+        JSON.stringify(e.details).includes('Connection reset')
+    )
+  );
+});
diff --git a/playwright/options.spec.ts b/playwright/options.spec.ts
new file mode 100644
index 0000000..bf927c7
--- /dev/null
+++ b/playwright/options.spec.ts
@@ -0,0 +1,66 @@
+import { expect, openLab, Page, press, test } from './lab';
+
+/** Records every request this page makes to the RUM broker or dataplane. */
+function rumRequests(page: Page): string[] {
+  const seen: string[] = [];
+  page.on('request', (r) => {
+    if (/\/rum\/init|\/appmonitors\//.test(r.url())) {
+      seen.push(r.url());
+    }
+  });
+  return seen;
+}
+
+const inspector = (page: Page) => page.locator('uwt-inspector');
+
+test('?telemetry=off: no RUM requests at all, and the header says so', async ({
+  page
+}) => {
+  const seen = rumRequests(page);
+  await openLab(page, 'bi?telemetry=off');
+  await press(page, 'Track a click');
+  await page.waitForTimeout(3000);
+
+  expect(seen).toEqual([]);
+  await expect(page.locator('.lab-header')).toContainText('telemetry: off');
+});
+
+test('?destination=noop: no RUM requests; the Event Inspector still shows events', async ({
+  page
+}) => {
+  const seen = rumRequests(page);
+  await openLab(page, 'bi?destination=noop');
+  await page.locator('.lab-header-button').click();
+  await press(page, 'Track a click');
+  await page.waitForTimeout(3000);
+
+  expect(seen).toEqual([]);
+  await expect(inspector(page)).toContainText('lab_button_clicked');
+});
+
+test('?inspector=off: the Event Inspector never opens', async ({ page }) => {
+  await openLab(page, 'bi?inspector=off');
+  await page.locator('.lab-header-button').click();
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('KeyE');
+  await page.keyboard.press('KeyI');
+  await page.keyboard.up('Shift');
+
+  await page.waitForTimeout(500);
+  await expect(inspector(page)).toHaveCount(0);
+});
+
+test('?inspector=noshortcut: the shortcut does nothing, the header button opens it', async ({
+  page
+}) => {
+  await openLab(page, 'bi?inspector=noshortcut');
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('KeyE');
+  await page.keyboard.press('KeyI');
+  await page.keyboard.up('Shift');
+  await page.waitForTimeout(500);
+  await expect(inspector(page)).toHaveCount(0);
+
+  await page.locator('.lab-header-button').click();
+  await expect(inspector(page)).toBeVisible();
+});
diff --git a/playwright/privacy.spec.ts b/playwright/privacy.spec.ts
new file mode 100644
index 0000000..dd77ea4
--- /dev/null
+++ b/playwright/privacy.spec.ts
@@ -0,0 +1,35 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+/** Personal values the Privacy page sends, none of which may arrive. */
+const PERSONAL = [
+  'anna.smith@example.com',
+  '4111 1111',
+  'hunter2',
+  'eyJhbGci',
+  '10.1.2.3',
+  '7946 0958'
+];
+
+test('personal values never reach RUM or the log backend', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'privacy');
+  await sessionStarted(page);
+  await press(page, 'As BI metadata');
+  await press(page, 'In a log message');
+  await press(page, 'In a failing scenario');
+
+  const events = await backend.rumUntil(
+    (e) =>
+      named(e, 'lab_privacy_checked').length > 0 &&
+      named(e, 'lab-privacy').length > 0
+  );
+  await expect
+    .poll(async () => (await backend.logs()).length)
+    .toBeGreaterThan(0);
+  const sent = JSON.stringify([events, await backend.logs()]);
+
+  expect(PERSONAL.filter((value) => sent.includes(value))).toEqual([]);
+  expect(named(events, 'lab_privacy_checked')).toHaveLength(1);
+});
diff --git a/playwright/scenarios.spec.ts b/playwright/scenarios.spec.ts
new file mode 100644
index 0000000..2060bb3
--- /dev/null
+++ b/playwright/scenarios.spec.ts
@@ -0,0 +1,66 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'scenarios');
+  await sessionStarted(page);
+});
+
+test('a settled scenario arrives once, its steps packed inside, with the identity attributes', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Complete, with 3 steps');
+  await expect(page.locator('.lab-readout').first()).toContainText(
+    '"scenarioName": "lab-happy-path"'
+  );
+
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-happy-path').length > 0
+  );
+  const happy = named(events, 'lab-happy-path');
+  expect(happy).toHaveLength(1);
+  expect(happy[0].type).toBe('com.uwt.scenario');
+  expect(happy[0].user.sessionId).toBeTruthy();
+  expect(happy[0].details).toMatchObject({
+    status: 'success',
+    stepCount: 3,
+    application: 'watchtower-lab'
+  });
+});
+
+test('a failing scenario arrives as a failure', async ({ page, backend }) => {
+  await press(page, 'Fail with an error');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-failure').length > 0
+  );
+  expect(named(events, 'lab-failure')[0].details.status).toBe('failure');
+});
+
+test('HTTP scenarios settle through traceScenario', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Request (600 ms)');
+  const events = await backend.rumUntil((e) => named(e, 'lab-http').length > 0);
+  expect(named(events, 'lab-http')[0].details.status).toBe('success');
+});
+
+test('switchMap supersession: earlier searches are abandoned by the caller, the last succeeds', async ({
+  page,
+  backend
+}) => {
+  for (let n = 0; n < 3; n++) {
+    await press(page, 'Search');
+  }
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-superseded').length === 3
+  );
+  const settled = named(events, 'lab-superseded').map(
+    (e) => `${e.details.status}:${e.details.metadata?.abandonedBy ?? ''}`
+  );
+  expect(settled.sort()).toEqual([
+    'abandoned:caller',
+    'abandoned:caller',
+    'success:'
+  ]);
+});
diff --git a/playwright/telemetries.spec.ts b/playwright/telemetries.spec.ts
new file mode 100644
index 0000000..b7747b3
--- /dev/null
+++ b/playwright/telemetries.spec.ts
@@ -0,0 +1,124 @@
+import {
+  expect,
+  openLab,
+  press,
+  RumEvent,
+  sessionStarted,
+  Telemetry,
+  test
+} from './lab';
+
+const ALL: Telemetry[] = [
+  'errors',
+  'performance',
+  'interaction',
+  'http',
+  'replay'
+];
+
+const types = (events: RumEvent[]) =>
+  [...new Set(events.map((e) => e.type.replace('com.amazon.rum.', '')))].sort();
+
+const cases: {
+  name: string;
+  telemetries: Telemetry[] | null;
+  chip: string;
+  expected: (types: string[]) => void;
+}[] = [
+  {
+    name: "the library's default",
+    telemetries: null,
+    chip: 'default',
+    expected: (t) => {
+      expect(t).toEqual(
+        expect.arrayContaining([
+          'performance_navigation_event',
+          'xray_trace_event'
+        ])
+      );
+      expect(t).not.toContain('dom_event');
+      expect(t).not.toContain('rrweb_event');
+    }
+  },
+  {
+    name: 'none',
+    telemetries: [],
+    chip: 'none',
+    // Only RUM's session start and page views, and the mirrored error.
+    expected: (t) =>
+      expect(
+        t.filter((type) => !/session_start|page_view|js_error/.test(type))
+      ).toEqual([])
+  },
+  {
+    name: 'all five',
+    telemetries: ALL,
+    chip: ALL.join(', '),
+    expected: (t) =>
+      expect(t).toEqual(expect.arrayContaining(['dom_event', 'rrweb_event']))
+  }
+];
+
+for (const { name, telemetries, chip, expected } of cases) {
+  test(`RUM telemetries, ${name}: as set, quiet while idle, errors still mirrored`, async ({
+    page,
+    backend
+  }) => {
+    await backend.setTelemetries(telemetries);
+    await openLab(page, 'logging');
+    const session = await sessionStarted(page);
+    await expect(page.locator('.lab-header')).toContainText(
+      `rum telemetries: ${chip}`
+    );
+    const mine = async () =>
+      (await backend.rum()).filter((e) => e.user.sessionId === session);
+
+    // Replay sends its opening snapshot about 5 s in; after that, nothing
+    // should arrive while nobody uses the page — the lab's own polling least
+    // of all.
+    await page.waitForTimeout(8000);
+    const loaded = (await mine()).length;
+    await page.waitForTimeout(6000);
+    expect((await mine()).length).toBe(loaded);
+
+    await press(page, 'error, with an Error');
+    await expect
+      .poll(async () =>
+        (await mine()).some(
+          (e) =>
+            e.type === 'com.amazon.rum.js_error_event' &&
+            JSON.stringify(e.details).includes('Connection reset')
+        )
+      )
+      .toBe(true);
+
+    const events = await mine();
+    expect(events.filter((e) => JSON.stringify(e).includes('/__lab/'))).toEqual(
+      []
+    );
+    expected(types(events));
+  });
+}
+
+test('"On the wire" switches between the default and a list to edit', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'wire');
+  const telemetriesList = page.locator('cps-select[label="Telemetries"]');
+  await expect(telemetriesList).toHaveCount(0);
+
+  await page
+    .locator('cps-switch', { hasText: "The library's default" })
+    .click();
+  await expect(telemetriesList).toBeVisible();
+  await expect
+    .poll(async () => (await backend.state()).telemetries)
+    .toEqual(['errors', 'performance', 'http']);
+
+  await page
+    .locator('cps-switch', { hasText: "The library's default" })
+    .click();
+  await expect(telemetriesList).toHaveCount(0);
+  await expect.poll(async () => (await backend.state()).telemetries).toBeNull();
+});
diff --git a/playwright/tsconfig.json b/playwright/tsconfig.json
new file mode 100644
index 0000000..da2eda9
--- /dev/null
+++ b/playwright/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["**/*.ts", "../playwright.config.ts"]
+}
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index b849d05..c33d40e 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -910,6 +910,10 @@ The custom layers duplicate nothing built in: the library records no page
 views, does not re-capture unhandled errors, and collects no browser or
 device attributes.
 
+An app that sets its own `telemetries` without `'errors'` still gets RUM's
+error plugin, with its own capture off: `recordError` and
+`mirrorErrorsToRum` go through it, and RUM rejects them without it.
+
 ### From events to metrics
 
 - **Custom RUM events don't become CloudWatch metrics on their own.** They
@@ -2050,22 +2054,20 @@ dark theme is not yet complete for the components inside it.
 
 #### Opening it
 
-| Platform          | Shortcut                   |
-| ----------------- | -------------------------- |
-| macOS             | **⇧ ⌥ ⌘ 8**                |
-| Windows and Linux | **Ctrl + Alt + Shift + 8** |
+**Shift + E + I** on every platform — hold Shift, press E, then I — for
+Event Inspector. No browser binds it. Keys are matched by physical position
+(`KeyboardEvent.code`), so it works on any layout; Shift must be the only
+modifier, and held-down repeats are ignored.
 
-Four keys, so it never opens by accident; both combinations work
-everywhere, which covers external keyboards and remote desktops. Keys are
-matched by physical position (`KeyboardEvent.code`), so they work on any
-layout — Option rewrites the typed character on macOS. Every modifier must
-match exactly, held-down repeats are ignored, and AltGr — which many
-European Windows layouts report as Ctrl+Alt — never triggers it. ⌥⌘8 alone
-is macOS Accessibility Zoom, which is why Shift is part of it.
+It types text, so it is ignored in a text field — typing a capital "EI"
+there never opens it; press it with focus outside the field. Screen readers
+in browse mode keep letter keys for their own navigation; there, open it
+from a button that calls `open()`.
 
 It opens where it was last — a dialog the first time — and never blocks the
 app, so you can watch events arrive. With it open, the shortcut brings focus
-back to it from the app, and closes it when focus is already inside.
+back to it from the app — to its search field — and closes it when focus is
+already inside, outside a text field.
 
 #### Where it opens
 
@@ -2195,9 +2197,13 @@ Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
 limit protects rendering, which costs by the length of the text. A cut never
 splits a surrogate pair.
 
-A shortcut is a `UwtInspectorShortcut` — `{ code, ctrl?, alt?, shift?,
-meta?, label? }`, where `code` is a `KeyboardEvent.code` such as `'Digit8'`
-or `'KeyD'`, and an omitted modifier must be up. Spread
+A shortcut is a `UwtInspectorShortcut` — `{ code, after?, ctrl?, alt?,
+shift?, meta?, label? }`, where `code` is a `KeyboardEvent.code` such as
+`'Digit8'` or `'KeyD'`, and an omitted modifier must be up. `after` is a key
+pressed just before `code` with the modifiers still held: the default is
+`{ code: 'KeyI', after: 'KeyE', shift: true }`. A shortcut without `ctrl` or
+`meta` types text, so it doesn't count in a text field. AltGr, which many
+European Windows layouts report as Ctrl+Alt, never matches. Spread
 `UWT_DEFAULT_INSPECTOR_SHORTCUTS` to add one rather than replace them.
 
 `UwtEventInspectorService` opens it from code: `open()`, `close()`,
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 4bd6c3b..0a8c478 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -360,7 +360,7 @@ import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-i
 providers: [provideUwtEventInspector()];
 ```
 
-Open it with **⇧⌥⌘8** on macOS or **Ctrl+Alt+Shift+8** on Windows and Linux.
+Open it with **Shift+E+I** (hold Shift, press E, then I), outside a text field.
 It lists everything the app sends from that moment on, with search, filters
 and JSON download. It opens as a dialog, with a Transparency slider; its Dock
 buttons move it to its own window or a pane on the left, right or bottom.
@@ -399,6 +399,10 @@ TestBed.configureTestingModule({
 - It is safe under server-side rendering.
 - A scenario sends one event when it ends, not one per step — AWS RUM allows
   200 events per session by default.
+- RUM's own telemetry defaults to errors, performance and same-origin HTTP;
+  set `telemetries` in the RUM config to change it. Without `'errors'`, the
+  sink still loads RUM's error plugin, capturing nothing by itself, because
+  `mirrorErrorsToRum` needs it.
 
 ## License
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 13ce471..af2d61f 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -41,22 +41,20 @@ class FakeDialogs {
   }
 }
 
-const SHORTCUT = {
-  code: 'Digit8',
-  ctrlKey: true,
-  altKey: true,
-  shiftKey: true
-};
-
 type KeyInit = ConstructorParameters<typeof KeyboardEvent>[1];
 
-function press(init: KeyInit = SHORTCUT): KeyboardEvent {
+/** Presses one key on `target`; with none given, the default Shift+E+I. */
+function press(init?: KeyInit, target: Element = document.body): KeyboardEvent {
+  if (!init) {
+    press({ code: 'KeyE', shiftKey: true }, target);
+    return press({ code: 'KeyI', shiftKey: true }, target);
+  }
   const event = new KeyboardEvent('keydown', {
     ...init,
     bubbles: true,
     cancelable: true
   });
-  document.body.dispatchEvent(event);
+  target.dispatchEvent(event);
   return event;
 }
 
@@ -132,20 +130,28 @@ describe('UwtEventInspectorService', () => {
     expect(TestBed.inject(UwtEventInspectorService).isOpen()).toBe(true);
   });
 
-  it('should also open on the macOS shortcut', () => {
+  it('should ignore ordinary typing and near misses', () => {
     create().install();
-    press({ code: 'Digit8', metaKey: true, altKey: true, shiftKey: true });
-    expect(dialogs.opened).toHaveLength(1);
+
+    press({ code: 'KeyI', shiftKey: true });
+    press({ code: 'KeyE' });
+    press({ code: 'ShiftLeft', shiftKey: true });
+    press({ code: 'KeyI', shiftKey: true });
+    press({ code: 'KeyE', shiftKey: true });
+    press({ code: 'KeyX', shiftKey: true });
+    press({ code: 'KeyI', shiftKey: true });
+
+    expect(dialogs.opened).toHaveLength(0);
   });
 
-  it('should ignore ordinary typing and near misses', () => {
+  it('should ignore Shift+E+I typed into a text field', () => {
     create().install();
+    const field = document.body.appendChild(document.createElement('input'));
 
-    press({ code: 'Digit8' });
-    press({ code: 'Digit8', ctrlKey: true, shiftKey: true });
-    press({ code: 'KeyD', ctrlKey: true, altKey: true, shiftKey: true });
+    press(undefined, field);
 
     expect(dialogs.opened).toHaveLength(0);
+    field.remove();
   });
 
   it('should bring focus back to an open popup, and close it from inside', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index d1c0fe2..6d524b3 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -87,6 +87,7 @@ export class UwtEventInspectorService {
   private host?: UwtInspectorHost;
   private installed = false;
   private warnedBlocked = false;
+  private lastKey?: string;
 
   /** Whether the inspector is currently open, in any dock. */
   readonly isOpen = signal(false);
@@ -184,7 +185,14 @@ export class UwtEventInspectorService {
 
   private readonly onKeydown = (event: KeyboardEvent): void =>
     uwtSafeVoid('shortcut', () => {
-      if (!this.config.shortcuts.some((s) => uwtMatchesShortcut(event, s))) {
+      // A shortcut like Shift+E+I needs the key pressed before this one.
+      const previous = this.lastKey;
+      this.lastKey = event.code;
+      if (
+        !this.config.shortcuts.some((s) =>
+          uwtMatchesShortcut(event, s, previous)
+        )
+      ) {
         return;
       }
       event.preventDefault();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index effe55b..cbe4fc8 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -57,7 +57,7 @@
           placeholder="Text to compare"
           [hideDetails]="true"
           [value]="value()"
-          (valueChanged)="value.set($event ?? '')">
+          (valueChanged)="value.set($event)">
         </cps-input>
       }
       <cps-button
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.html
new file mode 100644
index 0000000..701ff4b
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.html
@@ -0,0 +1,48 @@
+<!-- assets/logo/logo-mark.svg, with an id no host page will share. -->
+<svg viewBox="0 0 256 256" focusable="false">
+  <defs>
+    <linearGradient
+      id="uwt-inspector-logo-disc"
+      gradientUnits="userSpaceOnUse"
+      x1="0"
+      y1="0"
+      x2="256"
+      y2="256">
+      <stop offset="0" stop-color="#870a3c" />
+      <stop offset="0.5" stop-color="#640032" />
+      <stop offset="1" stop-color="#500a28" />
+    </linearGradient>
+  </defs>
+  <circle cx="128" cy="128" r="128" fill="url(#uwt-inspector-logo-disc)" />
+  <circle fill="#ffb57b" cx="128" cy="98" r="12" />
+  <path
+    fill="none"
+    stroke="#ffb57b"
+    stroke-width="16"
+    stroke-linecap="round"
+    d="M99.63 75.84A36 36 0 0 1 156.37 75.84" />
+  <path
+    stroke="#f52d28"
+    fill="none"
+    stroke-width="16"
+    stroke-linecap="round"
+    d="M106 132H150" />
+  <path
+    stroke="#fa551e"
+    fill="none"
+    stroke-width="16"
+    stroke-linecap="round"
+    d="M95 154H161" />
+  <path
+    stroke="#ff780f"
+    fill="none"
+    stroke-width="16"
+    stroke-linecap="round"
+    d="M84 176H172" />
+  <path
+    stroke="#ffb57b"
+    fill="none"
+    stroke-width="16"
+    stroke-linecap="round"
+    d="M73 198H183" />
+</svg>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.scss
new file mode 100644
index 0000000..fbe148e
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.ts
new file mode 100644
index 0000000..8b97210
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-logo/uwt-inspector-logo.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * The Angular UI Watchtower mark, drawn inline: a library can't rely on the
+ * app serving an asset. Decorative — the title beside it names the window.
+ */
+@Component({
+  selector: 'uwt-inspector-logo',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'aria-hidden': 'true' },
+  templateUrl: './uwt-inspector-logo.component.html',
+  styleUrl: './uwt-inspector-logo.component.scss'
+})
+export class UwtInspectorLogoComponent {}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
index ccb727e..eab9f84 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
@@ -9,74 +9,117 @@ type Mods = Partial<
   Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'repeat'>
 >;
 
-function key(code: string, mods: Mods, keyChar = '8', altGraph = false) {
+function key(
+  code: string,
+  mods: Mods,
+  keyChar = 'I',
+  altGraph = false,
+  target: EventTarget | null = null
+) {
   const event = new KeyboardEvent('keydown', { code, key: keyChar, ...mods });
   Object.defineProperty(event, 'getModifierState', {
     value: (k: string) => k === 'AltGraph' && altGraph
   });
+  Object.defineProperty(event, 'target', { value: target });
   return event;
 }
 
-const [MAC, WIN] = UWT_DEFAULT_INSPECTOR_SHORTCUTS;
-const macMods = { shiftKey: true, altKey: true, metaKey: true };
-const winMods = { ctrlKey: true, altKey: true, shiftKey: true };
+const [DEFAULT] = UWT_DEFAULT_INSPECTOR_SHORTCUTS;
+const shift = { shiftKey: true };
+const CUSTOM = { code: 'Digit8', ctrl: true, alt: true, shift: true };
+const customMods = { ctrlKey: true, altKey: true, shiftKey: true };
 
 describe('uwtMatchesShortcut', () => {
-  it('should match ⇧⌥⌘8, even though Option and Shift change the character', () => {
-    // On macOS, ⇧⌥8 produces "°" — only the physical key is reliable.
-    expect(uwtMatchesShortcut(key('Digit8', macMods, '°'), MAC)).toBe(true);
+  it('should match Shift+I pressed right after Shift+E', () => {
+    expect(uwtMatchesShortcut(key('KeyI', shift), DEFAULT, 'KeyE')).toBe(true);
   });
 
-  it('should match Ctrl+Alt+Shift+8', () => {
-    expect(uwtMatchesShortcut(key('Digit8', winMods, '*'), WIN)).toBe(true);
+  it.each([
+    ['nothing before', undefined],
+    ['another key before', 'KeyX'],
+    ['Shift pressed again in between', 'ShiftLeft']
+  ])('should not match Shift+I with %s', (_label, previous) => {
+    expect(uwtMatchesShortcut(key('KeyI', shift), DEFAULT, previous)).toBe(
+      false
+    );
   });
 
   it.each([
-    ['a modifier missing', { shiftKey: true, altKey: true }],
-    ['an extra modifier', { ...macMods, ctrlKey: true }],
-    ['no modifiers', {}]
+    ['Shift missing', {}],
+    ['an extra modifier', { ...shift, ctrlKey: true }]
   ])('should not match with %s', (_label, mods) => {
-    expect(uwtMatchesShortcut(key('Digit8', mods), MAC)).toBe(false);
+    expect(uwtMatchesShortcut(key('KeyI', mods), DEFAULT, 'KeyE')).toBe(false);
+  });
+
+  it.each([
+    ['an input', 'input'],
+    ['a text area', 'textarea']
+  ])('should not match while typing in %s', (_label, tag) => {
+    const field = document.createElement(tag);
+    expect(
+      uwtMatchesShortcut(key('KeyI', shift, 'I', false, field), DEFAULT, 'KeyE')
+    ).toBe(false);
+  });
+
+  it('should match a shortcut with Ctrl in a text field, where it types nothing', () => {
+    const field = document.createElement('input');
+    expect(
+      uwtMatchesShortcut(key('Digit8', customMods, '*', false, field), CUSTOM)
+    ).toBe(true);
   });
 
-  it('should not match the numpad 8', () => {
-    expect(uwtMatchesShortcut(key('Numpad8', macMods), MAC)).toBe(false);
+  it('should match the physical key, whatever character it produces', () => {
+    // On macOS, ⇧⌥8 produces "°" — only the physical key is reliable.
+    const mac = { code: 'Digit8', shift: true, alt: true, meta: true };
+    const mods = { shiftKey: true, altKey: true, metaKey: true };
+    expect(uwtMatchesShortcut(key('Digit8', mods, '°'), mac)).toBe(true);
+    expect(uwtMatchesShortcut(key('Numpad8', mods, '°'), mac)).toBe(false);
   });
 
   it('should ignore a held-down repeat', () => {
     expect(
-      uwtMatchesShortcut(key('Digit8', { ...winMods, repeat: true }), WIN)
+      uwtMatchesShortcut(
+        key('KeyI', { ...shift, repeat: true }),
+        DEFAULT,
+        'KeyE'
+      )
     ).toBe(false);
   });
 
   it('should not fire while AltGr is producing a character', () => {
     // AltGr reports as Ctrl+Alt on many European Windows layouts.
-    expect(uwtMatchesShortcut(key('Digit8', winMods, '8', true), WIN)).toBe(
-      false
-    );
-  });
-
-  it('should match a custom shortcut', () => {
-    const custom = { code: 'KeyD', ctrl: true, alt: true, shift: true };
-    expect(uwtMatchesShortcut(key('KeyD', winMods, 'D'), custom)).toBe(true);
-    expect(uwtMatchesShortcut(key('Digit8', winMods), custom)).toBe(false);
+    expect(
+      uwtMatchesShortcut(key('Digit8', customMods, '8', true), CUSTOM)
+    ).toBe(false);
   });
 });
 
 describe('uwtShortcutLabel', () => {
-  it('should show the macOS label on Apple platforms, and the other elsewhere', () => {
+  it('should show Shift+E+I on every platform', () => {
     expect(uwtShortcutLabel(UWT_DEFAULT_INSPECTOR_SHORTCUTS, true)).toBe(
-      '⇧⌥⌘8'
+      'Shift+E+I'
     );
     expect(uwtShortcutLabel(UWT_DEFAULT_INSPECTOR_SHORTCUTS, false)).toBe(
-      'Ctrl+Alt+Shift+8'
+      'Shift+E+I'
     );
   });
 
+  it('should prefer the shortcut written for the platform', () => {
+    const both = [
+      { code: 'Digit8', shift: true, alt: true, meta: true, label: '⇧⌥⌘8' },
+      { ...CUSTOM, label: 'Ctrl+Alt+Shift+8' }
+    ];
+    expect(uwtShortcutLabel(both, true)).toBe('⇧⌥⌘8');
+    expect(uwtShortcutLabel(both, false)).toBe('Ctrl+Alt+Shift+8');
+  });
+
   it('should describe a shortcut that has no label', () => {
     expect(
       uwtShortcutLabel([{ code: 'KeyD', ctrl: true, shift: true }], false)
     ).toBe('Ctrl+Shift+D');
+    expect(
+      uwtShortcutLabel([{ code: 'KeyI', after: 'KeyE', shift: true }], false)
+    ).toBe('Shift+E+I');
   });
 
   it('should be undefined with no shortcuts', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
index 0e14860..4d9f35e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
@@ -1,31 +1,20 @@
 import { UwtInspectorShortcut } from '../uwt-inspector.models/uwt-inspector.models';
 
 /**
- * The default shortcuts: ⇧⌥⌘8 on macOS, Ctrl+Alt+Shift+8 on Windows and
- * Linux.
+ * The default shortcut, the same on every platform: Shift+E+I — hold Shift,
+ * press E, then I — for Event Inspector.
  *
- * Four keys so it is never pressed by accident, ending in a digit because
- * every layout has one. Both are active everywhere — the other platform's
- * combination is harmless, and covers external keyboards and remote
- * desktops. None is bound by Chrome, Safari, Edge or Firefox; ⌥⌘8 alone is
- * macOS Accessibility Zoom, which is why Shift is part of it.
+ * No browser binds it. It types text, so it is ignored in text fields:
+ * typing a capital "EI" there never opens the inspector.
  *
  * @group Utils
  */
 export const UWT_DEFAULT_INSPECTOR_SHORTCUTS: readonly UwtInspectorShortcut[] =
-  [
-    { code: 'Digit8', shift: true, alt: true, meta: true, label: '⇧⌥⌘8' },
-    {
-      code: 'Digit8',
-      ctrl: true,
-      alt: true,
-      shift: true,
-      label: 'Ctrl+Alt+Shift+8'
-    }
-  ];
+  [{ code: 'KeyI', after: 'KeyE', shift: true, label: 'Shift+E+I' }];
 
 /**
- * Whether `event` is exactly `shortcut`.
+ * Whether `event` is exactly `shortcut`, given the key pressed just before
+ * it (`previous`, a `KeyboardEvent.code`).
  *
  * - The physical key is compared (`code`), never the produced character —
  *   Option turns 8 into `•` on macOS, and Shift turns it into `*`.
@@ -33,17 +22,25 @@ export const UWT_DEFAULT_INSPECTOR_SHORTCUTS: readonly UwtInspectorShortcut[] =
  * - Held-down repeats don't count.
  * - AltGr is rejected. On many European Windows layouts it reports as
  *   Ctrl+Alt, and typing an AltGr character must never open the popup.
+ * - Without Ctrl or ⌘ it types text, so it doesn't count in a text field.
  */
 export function uwtMatchesShortcut(
   event: KeyboardEvent,
-  shortcut: UwtInspectorShortcut
+  shortcut: UwtInspectorShortcut,
+  previous?: string
 ): boolean {
   if (event.repeat || event.code !== shortcut.code) {
     return false;
   }
+  if (shortcut.after !== undefined && previous !== shortcut.after) {
+    return false;
+  }
   if (event.getModifierState?.('AltGraph')) {
     return false;
   }
+  if (!shortcut.ctrl && !shortcut.meta && isTextField(event.target)) {
+    return false;
+  }
   return (
     event.ctrlKey === !!shortcut.ctrl &&
     event.altKey === !!shortcut.alt &&
@@ -79,14 +76,25 @@ export function uwtShortcutLabel(
 }
 
 function describeShortcut(s: UwtInspectorShortcut): string {
-  const key = s.code.replace(/^Digit|^Key/, '');
+  const key = (code: string | undefined) => code?.replace(/^Digit|^Key/, '');
   return [
     s.ctrl && 'Ctrl',
     s.alt && 'Alt',
     s.shift && 'Shift',
     s.meta && 'Meta',
-    key
+    key(s.after),
+    key(s.code)
   ]
     .filter(Boolean)
     .join('+');
 }
+
+/** Where typing goes into the page: an input, a text area or an editor. */
+function isTextField(target: EventTarget | null): boolean {
+  const element = target as HTMLElement | null;
+  return (
+    !!element &&
+    (element.isContentEditable ||
+      ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName))
+  );
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index 106770b..c1d02cf 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -37,19 +37,27 @@ export type UwtInspectorPaneSide = Extract<
  *
  * Matched on `KeyboardEvent.code` — the physical key — so it works on every
  * keyboard layout, and isn't affected by what Option or Shift produce.
- * A modifier left out must be *up*, so extra modifiers never match.
+ * A modifier left out must be *up*, so extra modifiers never match. One
+ * without Ctrl or ⌘ types text, so it doesn't count in a text field.
  *
  * @group Interfaces
  */
 export interface UwtInspectorShortcut {
   /** `KeyboardEvent.code`, e.g. `'Digit8'` or `'KeyD'`. */
   code: string;
+
+  /**
+   * A key pressed just before `code`, with the modifiers still held:
+   * `'KeyE'` in Shift+E+I. Without it, `code` alone is pressed.
+   */
+  after?: string;
+
   ctrl?: boolean;
   alt?: boolean;
   shift?: boolean;
   meta?: boolean;
 
-  /** How the shortcut is written for people, e.g. `'⇧⌥⌘8'`. */
+  /** How the shortcut is written for people, e.g. `'Shift+E+I'`. */
   label?: string;
 }
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
index c0a3cd4..7ab6100 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
@@ -16,9 +16,9 @@ import { UwtEventInspectorService } from '../uwt-event-inspector.service/uwt-eve
  * Adds the Event Inspector: an in-app window showing, live,
  * every BI, scenario and log event this app hands to its destinations.
  *
- * Opens with ⇧⌥⌘8 (macOS) or Ctrl+Alt+Shift+8 (Windows, Linux) by
- * default, in every environment. Needs cps-ui-kit set up in the app, as
- * for any cps-ui-kit dialog.
+ * Opens with Shift+E+I by default — hold Shift, press E, then I — in every
+ * environment. Needs cps-ui-kit set up in the app, as for any cps-ui-kit
+ * dialog.
  *
  * @example
  * ```typescript
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index de7d960..824a416 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -1,6 +1,9 @@
 @if (framed()) {
   <div class="uwt-inspector__header">
-    <h2 class="uwt-inspector__title">Event Inspector</h2>
+    <div class="uwt-inspector__brand">
+      <uwt-inspector-logo></uwt-inspector-logo>
+      <h2 class="uwt-inspector__title">Event Inspector</h2>
+    </div>
     <cps-button
       icon="close-x-2"
       ariaLabel="Close Event Inspector"
@@ -11,6 +14,9 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
       (clicked)="close()">
     </cps-button>
   </div>
+} @else {
+  <!-- Moved into cps-dialog's header icon slot once rendered. -->
+  <uwt-inspector-logo #dialogLogo></uwt-inspector-logo>
 }
 
 <div class="uwt-inspector__body">
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index db34606..7c7a3dd 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -24,6 +24,12 @@
   color: var(--cps-color-text-dark);
 }
 
+.uwt-inspector__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .uwt-inspector__title {
   margin: 0;
   font-size: 1.25rem;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index e671404..481c30a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -385,6 +385,27 @@ describe('UwtInspectorComponent', () => {
       'Event Inspector'
     );
     expect(button('Close Event Inspector')).toBeTruthy();
+    expect(
+      el().querySelector('.uwt-inspector__brand uwt-inspector-logo')
+    ).not.toBeNull();
+  });
+
+  it("should put the mark in cps-dialog's header icon slot", () => {
+    // Outside a cps-dialog, as in every other test, there is nowhere to put it.
+    expect(el().querySelector('uwt-inspector-logo')).toBeNull();
+
+    const dialog = document.body.appendChild(document.createElement('div'));
+    dialog.className = 'cps-dialog';
+    const slot = dialog.appendChild(document.createElement('div'));
+    slot.className = 'cps-dialog-header-icon';
+    const inDialog = TestBed.createComponent(UwtInspectorComponent);
+    dialog.appendChild(inDialog.nativeElement);
+    inDialog.detectChanges();
+    TestBed.tick();
+
+    expect(slot.querySelector('uwt-inspector-logo')).not.toBeNull();
+    inDialog.destroy();
+    dialog.remove();
   });
 
   it('should ask to move to another dock, or to close', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 2b81756..e2ae64c 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -1,5 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -7,7 +8,8 @@ import {
   ElementRef,
   inject,
   input,
-  signal
+  signal,
+  viewChild
 } from '@angular/core';
 import {
   CPS_LIVE_ANNOUNCER_SERVICE,
@@ -37,6 +39,7 @@ import {
   uwtShortcutLabel
 } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
 import { UwtInspectorDockSwitcherComponent } from '../uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component';
+import { UwtInspectorLogoComponent } from '../uwt-inspector-logo/uwt-inspector-logo.component';
 import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
 import {
   UWT_INSPECTOR_MAX_TRANSPARENCY,
@@ -64,6 +67,7 @@ const ANNOUNCE_EVERY_MS = 10_000;
     CpsSliderComponent,
     CpsSwitchComponent,
     UwtInspectorDockSwitcherComponent,
+    UwtInspectorLogoComponent,
     UwtInspectorSectionComponent
   ],
   providers: [
@@ -121,12 +125,15 @@ export class UwtInspectorComponent {
     this.preferences.read().transparency
   );
 
+  private readonly dialogLogo = viewChild('dialogLogo', { read: ElementRef });
+
   private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
 
   constructor() {
     const timer = setInterval(() => this.announceNew(), ANNOUNCE_EVERY_MS);
     inject(DestroyRef).onDestroy(() => clearInterval(timer));
     this.applyTransparency(this.transparency());
+    afterNextRender(() => this.placeDialogLogo());
   }
 
   /** Whether keyboard focus is anywhere in the inspector, header included. */
@@ -185,6 +192,26 @@ export class UwtInspectorComponent {
     }
   }
 
+  /**
+   * cps-dialog draws the dialog's header, and its icon slot takes only an
+   * icon name, so the mark moves into that slot, before the title. Without
+   * the slot the mark goes.
+   */
+  private placeDialogLogo(): void {
+    const logo: HTMLElement | undefined = this.dialogLogo()?.nativeElement;
+    if (!logo) {
+      return;
+    }
+    const slot = this.host.nativeElement
+      .closest('.cps-dialog')
+      ?.querySelector('.cps-dialog-header-icon');
+    if (slot) {
+      slot.append(logo);
+    } else {
+      logo.remove();
+    }
+  }
+
   /** One polite summary of what arrived since the last one, if anything. */
   private announceNew(): void {
     if (this.store.paused()) {
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts
index bf0b1d5..dd417bc 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts
@@ -111,7 +111,8 @@ export interface UwtRumAppMonitorConfig {
    * Built-in telemetry categories to enable. Defaults to errors, performance
    * and same-origin HTTP. The SDK's own default also includes `'replay'`
    * (session replay via `rrweb`); this library does not enable it by
-   * default.
+   * default. Left out, `'errors'` is still loaded with its own capture off,
+   * because `recordError` and `mirrorErrorsToRum` go through it.
    */
   telemetries?: (string | (string | object)[])[];
 
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
index 42dc5a4..7a82362 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
@@ -347,6 +347,18 @@ describe('UwtRumTelemetrySink', () => {
       });
     });
 
+    it("should add RUM's error plugin, capturing nothing itself, for recordError", async () => {
+      configure({ loadImpl: async () => bootstrap({ telemetries: ['http'] }) });
+      await sink.init();
+
+      const { telemetries } = AwsRumCtor.mock.calls[0][3] as {
+        telemetries: [string, [string, { ignore: () => boolean }]];
+      };
+      expect(telemetries[0]).toBe('http');
+      expect(telemetries[1][0]).toBe('errors');
+      expect(telemetries[1][1].ignore()).toBe(true);
+    });
+
     it('should omit every SDK-default-mirroring field entirely when unset, not send it as undefined', async () => {
       await sink.init();
 
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
index 60f5f24..78a8b64 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
@@ -20,6 +20,7 @@ import {
 } from '../uwt-rum-internal.util/uwt-rum-internal.util';
 import {
   UWT_RUM_CREDENTIALS_PROVIDER,
+  UwtRumAppMonitorConfig,
   UwtRumBootstrap,
   UwtRumCredentials
 } from '../uwt-rum-credentials/uwt-rum-credentials';
@@ -125,6 +126,21 @@ function omitUndefined<T extends object>(obj: T): Partial<T> {
   return result;
 }
 
+/**
+ * The app's telemetries, plus RUM's error plugin when they leave it out.
+ * `recordError` goes through that plugin — RUM rejects it otherwise — so it
+ * is added with its own capture of unhandled errors switched off.
+ */
+function withErrorPlugin(
+  telemetries: NonNullable<UwtRumAppMonitorConfig['telemetries']>
+): UwtRumAppMonitorConfig['telemetries'] {
+  const named = (t: (typeof telemetries)[number]) =>
+    Array.isArray(t) ? t[0] : t;
+  return telemetries.some((t) => named(t) === 'errors')
+    ? telemetries
+    : [...telemetries, ['errors', { ignore: () => true }]];
+}
+
 /**
  * Telemetry sink backed by the AWS CloudWatch RUM web client.
  *
@@ -558,11 +574,13 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
       endpoint:
         config.endpoint ??
         `https://dataplane.rum.${config.region}.amazonaws.com`,
-      telemetries: config.telemetries ?? [
-        'errors',
-        'performance',
-        ['http', { addXRayTraceIdHeader: [sameOrigin] }]
-      ],
+      telemetries: withErrorPlugin(
+        config.telemetries ?? [
+          'errors',
+          'performance',
+          ['http', { addXRayTraceIdHeader: [sameOrigin] }]
+        ]
+      ),
 
       ...(config.client !== undefined ? { client: config.client } : {}),
 
diff --git a/projects/watchtower-lab/proxy.conf.json b/projects/watchtower-lab/proxy.conf.json
new file mode 100644
index 0000000..2da8746
--- /dev/null
+++ b/projects/watchtower-lab/proxy.conf.json
@@ -0,0 +1,6 @@
+{
+  "/rum": { "target": "http://localhost:4380" },
+  "/appmonitors": { "target": "http://localhost:4380" },
+  "/api": { "target": "http://localhost:4380" },
+  "/__lab": { "target": "http://localhost:4380" }
+}
diff --git a/projects/watchtower-lab/server/lab-server.mjs b/projects/watchtower-lab/server/lab-server.mjs
new file mode 100644
index 0000000..cdb6666
--- /dev/null
+++ b/projects/watchtower-lab/server/lab-server.mjs
@@ -0,0 +1,281 @@
+// The Watchtower Lab's mock backend, with no dependencies. It stands in for
+// everything the library talks to, so the real aws-rum-web runs fully
+// offline:
+//
+//   GET  /rum/init              mock RUM broker: app monitor config and fake
+//                               credentials; its mode decides the answer
+//   POST /appmonitors/:id       mock RUM dataplane: keeps every PutRumEvents
+//                               batch, beacons included
+//   POST /api/logs              mock log backend: stores records
+//   GET  /api/logs?…            answers the log provider's query()
+//   GET  /api/data?delay&status a slow or failing endpoint, for HTTP scenarios
+//   GET  /__lab/rum, /__lab/logs, /__lab/state
+//   POST /__lab/reset, /__lab/broker-mode, /__lab/telemetries    test hooks
+//
+// `npm run lab` runs this and `ng serve watchtower-lab`, which proxies these
+// paths here, so the app and this server share an origin. Pass
+// `--server-only` to start just this server, or `--static` to serve the
+// built lab (`npm run lab:build`) from here too, as the Playwright suite does.
+import { spawn } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import http from 'node:http';
+import { extname, join, normalize } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { gunzipSync } from 'node:zlib';
+
+const STATIC = process.argv.includes('--static');
+// Its own port when static, so the suite can run beside `npm run lab`.
+const PORT = STATIC ? 4390 : 4380;
+const STATIC_DIR = fileURLToPath(
+  new URL('../../../dist/watchtower-lab/browser/', import.meta.url)
+);
+const CONTENT_TYPES = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.svg': 'image/svg+xml',
+  '.woff2': 'font/woff2',
+  '.woff': 'font/woff',
+  '.ttf': 'font/ttf',
+  '.map': 'application/json',
+  '.ico': 'image/x-icon',
+  '.png': 'image/png'
+};
+const BROKER_MODES = ['ok', 'null', 'fail', 'short-expiry'];
+const TELEMETRIES = ['errors', 'performance', 'interaction', 'http', 'replay'];
+const LEVELS = { log: 0, warn: 1, error: 2 };
+
+// `telemetries: null` leaves them out of the broker's answer: the library's
+// default applies.
+const state = {
+  brokerMode: 'ok',
+  telemetries: null,
+  batches: 0,
+  rum: [],
+  logs: []
+};
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on('data', (chunk) => chunks.push(chunk));
+    req.on('end', () => {
+      const raw = Buffer.concat(chunks);
+      const gzip =
+        req.headers['content-encoding'] === 'gzip' ||
+        (raw[0] === 0x1f && raw[1] === 0x8b);
+      resolve((gzip ? gunzipSync(raw) : raw).toString('utf8'));
+    });
+    req.on('error', reject);
+  });
+}
+
+function send(res, status, body) {
+  res.writeHead(status, { 'content-type': 'application/json' });
+  res.end(body === undefined ? '' : JSON.stringify(body));
+}
+
+/** A file of the built lab, or its index.html for the app's own routes. */
+async function serveStatic(res, path) {
+  const file = join(STATIC_DIR, normalize(path));
+  if (!extname(file)) {
+    res.writeHead(200, { 'content-type': 'text/html' });
+    return res.end(await readFile(join(STATIC_DIR, 'index.html')));
+  }
+  if (!file.startsWith(STATIC_DIR) || !existsSync(file)) {
+    return send(res, 404, { error: `no file ${path}` });
+  }
+  res.writeHead(200, {
+    'content-type': CONTENT_TYPES[extname(file)] ?? 'application/octet-stream'
+  });
+  return res.end(await readFile(file));
+}
+
+function parseJson(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+}
+
+/** What the broker answers, by mode. `null` disables RUM for the page. */
+function broker(req) {
+  const origin = `http://${req.headers['x-forwarded-host'] ?? req.headers.host}`;
+  const minutes = state.brokerMode === 'short-expiry' ? 5 + 5 / 60 : 60;
+  return {
+    enabled: state.brokerMode !== 'null',
+    config: {
+      applicationId: '00000000-0000-4000-8000-00000000a1ab',
+      applicationVersion: '1.0.0',
+      region: 'eu-west-1',
+      endpoint: origin,
+      signing: false,
+      compressionStrategy: { enabled: false },
+      sessionSampleRate: 1,
+      // RUM stops recording a session after 200 events by default, and the
+      // session outlives reloads in a cookie: one burst from the Event
+      // Inspector page would silence the lab for half an hour.
+      sessionEventLimit: 0,
+      dispatchInterval: 2000,
+      allowCookies: true,
+      // Names only: the lab's credentials provider adds their options.
+      ...(state.telemetries ? { telemetries: state.telemetries } : {})
+    },
+    // Never used to sign — signing is off — but the sink schedules its
+    // refresh from their expiry, which short-expiry relies on.
+    credentials: {
+      accessKeyId: 'LAB-FAKE-KEY',
+      secretAccessKey: 'lab-fake-secret',
+      sessionToken: 'lab-fake-token',
+      expiration: new Date(Date.now() + minutes * 60_000).toISOString()
+    }
+  };
+}
+
+function keepBatch(body) {
+  const batch = parseJson(body);
+  if (!batch) {
+    return;
+  }
+  state.batches++;
+  for (const event of batch.RumEvents ?? []) {
+    state.rum.push({
+      receivedAt: new Date().toISOString(),
+      batch: state.batches,
+      user: batch.UserDetails ?? {},
+      type: event.type,
+      metadata: parseJson(event.metadata) ?? {},
+      details: parseJson(event.details) ?? {}
+    });
+  }
+}
+
+function queryLogs(params) {
+  const minLevel = params.get('minLevel');
+  const limit = Number(params.get('limit')) || Infinity;
+  return state.logs
+    .filter(
+      (r) =>
+        (!params.get('logger') || r.logger === params.get('logger')) &&
+        (!params.get('correlationId') ||
+          r.correlationId === params.get('correlationId')) &&
+        (!minLevel || LEVELS[r.level] >= LEVELS[minLevel]) &&
+        (!params.get('from') || r.timestamp >= params.get('from')) &&
+        (!params.get('to') || r.timestamp <= params.get('to'))
+    )
+    .slice(-limit);
+}
+
+const server = http.createServer(async (req, res) => {
+  const url = new URL(req.url, 'http://lab');
+  const path = url.pathname;
+  try {
+    if (req.method === 'GET' && path === '/rum/init') {
+      return state.brokerMode === 'fail'
+        ? send(res, 500, { error: 'broker unavailable (lab mode: fail)' })
+        : send(res, 200, broker(req));
+    }
+    if (req.method === 'POST' && path.startsWith('/appmonitors/')) {
+      keepBatch(await readBody(req));
+      return send(res, 200, {});
+    }
+    if (path === '/api/logs') {
+      if (req.method === 'POST') {
+        const body = parseJson(await readBody(req));
+        state.logs.push(
+          ...(Array.isArray(body) ? body : [body]).filter(Boolean)
+        );
+        return send(res, 204);
+      }
+      return send(res, 200, queryLogs(url.searchParams));
+    }
+    if (path === '/api/data') {
+      const delay = Math.min(
+        Number(url.searchParams.get('delay')) || 0,
+        30_000
+      );
+      const status = Number(url.searchParams.get('status')) || 200;
+      await new Promise((resolve) => setTimeout(resolve, delay));
+      return send(res, status, { status, delay, at: new Date().toISOString() });
+    }
+    if (path === '/__lab/rum') {
+      return send(res, 200, { batches: state.batches, events: state.rum });
+    }
+    if (path === '/__lab/logs') {
+      return send(res, 200, state.logs);
+    }
+    if (path === '/__lab/state') {
+      return send(res, 200, {
+        brokerMode: state.brokerMode,
+        modes: BROKER_MODES,
+        telemetries: state.telemetries
+      });
+    }
+    if (req.method === 'POST' && path === '/__lab/reset') {
+      Object.assign(state, { batches: 0, rum: [], logs: [] });
+      return send(res, 204);
+    }
+    if (req.method === 'POST' && path === '/__lab/broker-mode') {
+      const mode = parseJson(await readBody(req))?.mode;
+      if (!BROKER_MODES.includes(mode)) {
+        return send(res, 400, {
+          error: `mode must be one of ${BROKER_MODES.join(', ')}`
+        });
+      }
+      state.brokerMode = mode;
+      return send(res, 200, { brokerMode: mode });
+    }
+    if (req.method === 'POST' && path === '/__lab/telemetries') {
+      const telemetries = parseJson(await readBody(req))?.telemetries;
+      const valid =
+        telemetries === null ||
+        (Array.isArray(telemetries) &&
+          telemetries.every((t) => TELEMETRIES.includes(t)));
+      if (!valid) {
+        return send(res, 400, {
+          error: `telemetries must be null or some of ${TELEMETRIES.join(', ')}`
+        });
+      }
+      state.telemetries = telemetries;
+      return send(res, 200, { telemetries });
+    }
+    if (STATIC && req.method === 'GET') {
+      return serveStatic(res, path);
+    }
+    return send(res, 404, { error: `no lab route for ${req.method} ${path}` });
+  } catch (error) {
+    return send(res, 500, { error: String(error) });
+  }
+});
+
+if (STATIC && !existsSync(join(STATIC_DIR, 'index.html'))) {
+  console.error('[watchtower-lab] no built lab: run `npm run lab:build` first');
+  process.exit(1);
+}
+
+server.listen(PORT, () => {
+  console.log(
+    STATIC
+      ? `[watchtower-lab] built lab and mock backend on http://localhost:${PORT}`
+      : `[watchtower-lab] mock backend on http://localhost:${PORT}`
+  );
+});
+
+if (!STATIC && !process.argv.includes('--server-only')) {
+  const ng = spawn('npx', ['ng', 'serve', 'watchtower-lab'], {
+    stdio: 'inherit',
+    shell: process.platform === 'win32'
+  });
+  const stop = () => {
+    ng.kill();
+    server.close();
+  };
+  process.on('SIGINT', stop);
+  process.on('SIGTERM', stop);
+  ng.on('exit', (code) => {
+    server.close();
+    process.exitCode = code ?? 0;
+  });
+}
diff --git a/projects/watchtower-lab/src/fragment/fragment.component.ts b/projects/watchtower-lab/src/fragment/fragment.component.ts
new file mode 100644
index 0000000..93d9945
--- /dev/null
+++ b/projects/watchtower-lab/src/fragment/fragment.component.ts
@@ -0,0 +1,109 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  inject,
+  signal
+} from '@angular/core';
+import {
+  UwtBITelemetryService,
+  UwtLoggerService,
+  UwtScenarioTelemetryService,
+  UwtTelemetrySink
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+const CARLA = '5c8e2f14-1b7d-4a96-9e3c-8d2b7f4a6c10';
+
+@Component({
+  selector: 'lab-root',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page lab-fragment">
+      <h1>lab-fragment</h1>
+      <p>
+        Session {{ identity().sessionId ?? '—' }} · user
+        {{ identity().userId ?? '—' }}, as the shell announced them.
+      </p>
+      <div class="lab-actions">
+        <cps-button label="Track a BI event" (clicked)="track()" />
+        <cps-button
+          label="Run a scenario"
+          type="outlined"
+          (clicked)="scenario()" />
+        <cps-button label="Log a warning" type="outlined" (clicked)="warn()" />
+        <cps-button
+          label="Query its logs"
+          type="outlined"
+          (clicked)="query()" />
+        <cps-button
+          label="Sign in as Carla"
+          type="outlined"
+          (clicked)="sink.setUserId(carla)" />
+        <cps-button
+          label="Sign out"
+          type="outlined"
+          (clicked)="sink.setUserId(undefined)" />
+      </div>
+      <pre class="lab-readout">{{ readout() || 'Nothing yet.' }}</pre>
+    </section>
+  `,
+  styles: `
+    .lab-fragment {
+      padding: 1rem;
+    }
+  `
+})
+export class FragmentComponent {
+  protected readonly sink = inject(UwtTelemetrySink);
+  protected readonly carla = CARLA;
+  protected readonly identity = signal<{ sessionId?: string; userId?: string }>(
+    {}
+  );
+
+  protected readonly readout = signal('');
+
+  private readonly bi = inject(UwtBITelemetryService);
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+  private readonly loggerService = inject(UwtLoggerService);
+  private readonly logger = this.loggerService.getLogger('fragment');
+
+  constructor() {
+    const timer = setInterval(
+      () =>
+        this.identity.set({
+          sessionId: this.sink.getSessionId(),
+          userId: this.sink.getUserId()
+        }),
+      1000
+    );
+    inject(DestroyRef).onDestroy(() => clearInterval(timer));
+  }
+
+  protected track(): void {
+    this.bi.track('fragment_button_clicked', { at: Date.now() });
+    this.readout.set('fragment_button_clicked sent to the shell.');
+  }
+
+  protected scenario(): void {
+    const journey = this.scenarios.start({ name: 'fragment-journey' });
+    journey.step('fetch');
+    journey.step('render');
+    journey.complete();
+    this.readout.set('fragment-journey completed and sent to the shell.');
+  }
+
+  protected warn(): void {
+    this.logger.warn('A warning from the fragment');
+    this.readout.set('Warning sent to the shell, for its log backend.');
+  }
+
+  protected async query(): Promise<void> {
+    const records = await this.loggerService.query({ logger: 'fragment' });
+    this.readout.set(
+      `${records.length} record(s), answered by the shell's log backend:\n` +
+        JSON.stringify(records, null, 2)
+    );
+  }
+}
diff --git a/projects/watchtower-lab/src/fragment/fragment.config.ts b/projects/watchtower-lab/src/fragment/fragment.config.ts
new file mode 100644
index 0000000..c3192b6
--- /dev/null
+++ b/projects/watchtower-lab/src/fragment/fragment.config.ts
@@ -0,0 +1,26 @@
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection
+} from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+  provideUwtTelemetry,
+  provideUwtTelemetrySink,
+  withLogging
+} from '@absaoss-cps/ngx-ui-watchtower';
+
+/**
+ * The fragment: zoneless, and forwarding everything — events, log records,
+ * identity — over the broadcast channel to the shell, which records it.
+ */
+export const fragmentConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideAnimations(),
+    provideUwtTelemetry(
+      { application: 'lab-fragment', environment: 'lab', version: '1.0.0' },
+      withLogging({ minLevel: 'log', mirrorErrorsToRum: true })
+    ),
+    provideUwtTelemetrySink('broadcast')
+  ]
+};
diff --git a/projects/watchtower-lab/src/index.html b/projects/watchtower-lab/src/index.html
new file mode 100644
index 0000000..6412b3f
--- /dev/null
+++ b/projects/watchtower-lab/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Watchtower Lab</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="assets/logo/logo-mark.svg" />
+  </head>
+  <body>
+    <lab-root></lab-root>
+  </body>
+</html>
diff --git a/projects/watchtower-lab/src/lab/lab-layout.service.ts b/projects/watchtower-lab/src/lab/lab-layout.service.ts
new file mode 100644
index 0000000..67ae0c3
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-layout.service.ts
@@ -0,0 +1,17 @@
+import { DOCUMENT } from '@angular/common';
+import { effect, inject, Injectable, signal } from '@angular/core';
+
+/**
+ * Whether the lab's fixed header and status bar follow an Event Inspector
+ * pane, through the `--uwt-inspector-inset-*` variables it publishes. Off,
+ * they show what a pane covers in an app that hasn't opted in.
+ */
+@Injectable({ providedIn: 'root' })
+export class LabLayout {
+  readonly insets = signal(true);
+
+  constructor() {
+    const root = inject(DOCUMENT).documentElement;
+    effect(() => root.classList.toggle('lab-insets', this.insets()));
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
new file mode 100644
index 0000000..daae4b8
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {
+  UwtLogApiProvider,
+  UwtLogQuery,
+  UwtLogRecord
+} from '@absaoss-cps/ngx-ui-watchtower';
+
+/** Sends log records to the lab's mock backend, as the README's example does. */
+@Injectable({ providedIn: 'root' })
+export class LabLogApiProvider implements UwtLogApiProvider {
+  send(record: UwtLogRecord): void {
+    fetch('/api/logs', {
+      method: 'POST',
+      body: JSON.stringify(record),
+      // Only while the page is hidden (it may be closing): browsers reject
+      // keepalive requests once all in flight exceed 64 KiB.
+      keepalive: document.visibilityState === 'hidden'
+    }).catch(() => undefined);
+  }
+
+  query(filter: UwtLogQuery): Promise<UwtLogRecord[]> {
+    const params = new URLSearchParams(
+      Object.entries(filter).map(([key, value]) => [key, String(value)])
+    );
+    return fetch(`/api/logs?${params}`).then((r) => r.json());
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
new file mode 100644
index 0000000..8c88ebc
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -0,0 +1,25 @@
+/**
+ * How the lab was started, read once from the query string — the way an app
+ * picks its configuration at startup:
+ *
+ * - `?destination=rum` (default) or `noop`
+ * - `?telemetry=off` turns telemetry off with `withTelemetryEnabled(false)`
+ * - `?inspector=off` disables the Event Inspector; `noshortcut` drops its
+ *   keyboard shortcut
+ */
+export interface LabOptions {
+  destination: 'rum' | 'noop';
+  telemetry: boolean;
+  inspector: 'on' | 'off' | 'noshortcut';
+}
+
+export function labOptions(search = location.search): LabOptions {
+  const params = new URLSearchParams(search);
+  const inspector = params.get('inspector');
+  return {
+    destination: params.get('destination') === 'noop' ? 'noop' : 'rum',
+    telemetry: params.get('telemetry') !== 'off',
+    inspector:
+      inspector === 'off' || inspector === 'noshortcut' ? inspector : 'on'
+  };
+}
diff --git a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
new file mode 100644
index 0000000..48d7b54
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import {
+  UwtRumBootstrap,
+  UwtRumCredentialsProvider
+} from '@absaoss-cps/ngx-ui-watchtower/rum';
+
+/** The page's own origin, as the start of a URL. */
+const sameOrigin = new RegExp(
+  '^' + location.origin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '/'
+);
+
+/**
+ * Options for the RUM telemetries the broker names, which its JSON can't
+ * carry:
+ *
+ * - `http` as in the library's default.
+ * - `interaction` recording every button click — it records nothing without
+ *   a list of elements.
+ * - `replay` leaving out the status bar and "On the wire": they show what
+ *   reached the dataplane, so each replay batch would change them, and be
+ *   recorded, forever.
+ */
+const TELEMETRY_OPTIONS: Record<string, object> = {
+  http: { addXRayTraceIdHeader: [sameOrigin] },
+  interaction: {
+    enableMutationObserver: true,
+    events: [{ event: 'click', cssLocator: 'button' }]
+  },
+  replay: { recordOptions: { blockSelector: '.lab-status, lab-wire-page' } }
+};
+
+/**
+ * Asks the lab's mock broker for the app monitor config and credentials, as
+ * the library's own example does: a broker that says RUM is off returns
+ * `null`, and a failing broker throws — two different paths in the sink.
+ */
+@Injectable({ providedIn: 'root' })
+export class LabRumCredentialsProvider implements UwtRumCredentialsProvider {
+  async load(): Promise<UwtRumBootstrap | null> {
+    const response = await fetch('/rum/init');
+    if (!response.ok) {
+      throw new Error(`RUM bootstrap failed: ${response.status}`);
+    }
+    const { enabled, config, credentials } = await response.json();
+    if (!enabled) {
+      return null;
+    }
+    // Left out by the broker, the library's default applies.
+    const telemetries = (config.telemetries as string[] | undefined)?.map(
+      (name) =>
+        TELEMETRY_OPTIONS[name] ? [name, TELEMETRY_OPTIONS[name]] : name
+    );
+    return {
+      config: telemetries ? { ...config, telemetries } : config,
+      credentials
+    };
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-wire.service.ts b/projects/watchtower-lab/src/lab/lab-wire.service.ts
new file mode 100644
index 0000000..3639615
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-wire.service.ts
@@ -0,0 +1,116 @@
+import {
+  computed,
+  DestroyRef,
+  inject,
+  Injectable,
+  signal
+} from '@angular/core';
+import { UwtLogRecord } from '@absaoss-cps/ngx-ui-watchtower';
+
+/** One RUM event as the mock dataplane received it, with its batch's user. */
+export interface LabRumEvent {
+  receivedAt: string;
+  batch: number;
+  user: { sessionId?: string; userId?: string };
+  type: string;
+  metadata: Record<string, unknown>;
+  details: Record<string, unknown>;
+}
+
+export type LabBrokerMode = 'ok' | 'null' | 'fail' | 'short-expiry';
+
+/** RUM's own telemetries, as the mock broker names them. */
+export const LAB_TELEMETRIES = [
+  'errors',
+  'performance',
+  'interaction',
+  'http',
+  'replay'
+] as const;
+
+export type LabTelemetry = (typeof LAB_TELEMETRIES)[number];
+
+/** How often "On the wire" and the status bar ask the mock backend, in ms. */
+const POLL_MS = 1500;
+
+/**
+ * `fetch` as it was before RUM wrapped it: this module loads before RUM
+ * starts. RUM's `http` telemetry records the app's requests, and the lab's
+ * own polling would otherwise add an event every 1.5 s, forever.
+ */
+const labFetch = window.fetch.bind(window);
+
+/**
+ * What actually reached the lab's mock backend: every RUM event the
+ * dataplane received and every log record the log backend stored — the
+ * other side of what the app (and the Event Inspector) says it sent.
+ */
+@Injectable({ providedIn: 'root' })
+export class LabWire {
+  readonly batches = signal(0);
+  readonly rum = signal<readonly LabRumEvent[]>([]);
+  readonly logs = signal<readonly UwtLogRecord[]>([]);
+  readonly brokerMode = signal<LabBrokerMode>('ok');
+  /** RUM telemetries the broker names; `null` for the library's default. */
+  readonly telemetries = signal<readonly LabTelemetry[] | null>(null);
+
+  readonly telemetriesLabel = computed(() => {
+    const telemetries = this.telemetries();
+    return telemetries === null ? 'default' : telemetries.join(', ') || 'none';
+  });
+
+  /** The library's own events, as opposed to RUM's page views and timings. */
+  readonly libraryEvents = computed(
+    () => this.rum().filter((e) => e.type.startsWith('com.uwt.')).length
+  );
+
+  constructor() {
+    const timer = setInterval(() => this.refresh(), POLL_MS);
+    inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    this.refresh();
+  }
+
+  async refresh(): Promise<void> {
+    try {
+      const [rum, logs, state] = await Promise.all([
+        labFetch('/__lab/rum').then((r) => r.json()),
+        labFetch('/__lab/logs').then((r) => r.json()),
+        labFetch('/__lab/state').then((r) => r.json())
+      ]);
+      this.batches.set(rum.batches);
+      this.rum.set(rum.events);
+      this.logs.set(logs);
+      this.brokerMode.set(state.brokerMode);
+      this.telemetries.set(state.telemetries);
+    } catch {
+      // The mock backend isn't running: `npm run lab` starts it.
+    }
+  }
+
+  async reset(): Promise<void> {
+    await labFetch('/__lab/reset', { method: 'POST' });
+    await this.refresh();
+  }
+
+  /** The broker answers the next `/rum/init` this way; reload to apply it. */
+  async setBrokerMode(mode: LabBrokerMode): Promise<void> {
+    await labFetch('/__lab/broker-mode', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ mode })
+    });
+    this.brokerMode.set(mode);
+  }
+
+  /** The broker names these in its next answer; reload to apply them. */
+  async setTelemetries(
+    telemetries: readonly LabTelemetry[] | null
+  ): Promise<void> {
+    await labFetch('/__lab/telemetries', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ telemetries })
+    });
+    this.telemetries.set(telemetries);
+  }
+}
diff --git a/projects/watchtower-lab/src/main.ts b/projects/watchtower-lab/src/main.ts
new file mode 100644
index 0000000..4dc2ce6
--- /dev/null
+++ b/projects/watchtower-lab/src/main.ts
@@ -0,0 +1,22 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+
+/**
+ * One build, two apps. At `/fragment-app` — loaded by the shell in an iframe —
+ * this page is the fragment: zoneless, forwarding over the broadcast
+ * channel. Anywhere else it is the shell, which loads zone.js first. So the
+ * lab runs the library both with a zone and without one.
+ */
+async function start(): Promise<void> {
+  if (location.pathname.startsWith('/fragment-app')) {
+    const { FragmentComponent } = await import('./fragment/fragment.component');
+    const { fragmentConfig } = await import('./fragment/fragment.config');
+    await bootstrapApplication(FragmentComponent, fragmentConfig);
+    return;
+  }
+  await import('zone.js');
+  const { ShellComponent } = await import('./shell/shell.component');
+  const { shellConfig } = await import('./shell/shell.config');
+  await bootstrapApplication(ShellComponent, shellConfig);
+}
+
+start().catch((error: unknown) => console.error(error));
diff --git a/projects/watchtower-lab/src/shell/pages/bi.page.ts b/projects/watchtower-lab/src/shell/pages/bi.page.ts
new file mode 100644
index 0000000..06de5f6
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/bi.page.ts
@@ -0,0 +1,70 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal
+} from '@angular/core';
+import {
+  UwtBITelemetryService,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+@Component({
+  selector: 'lab-bi-page',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>BI events</h1>
+      <p>
+        Identical events within 400 ms are collapsed into one. Check the Event
+        Inspector or On the wire for what arrived.
+      </p>
+      <div class="lab-card">
+        <div class="lab-actions">
+          <cps-button label="Track a click" (clicked)="click()" />
+          <cps-button
+            label="Fire twice at once"
+            type="outlined"
+            (clicked)="doubleFire()" />
+          <cps-button
+            label="Feature, tied to a scenario"
+            type="outlined"
+            (clicked)="feature()" />
+        </div>
+      </div>
+      <pre class="lab-readout">{{ readout() || 'Nothing tracked yet.' }}</pre>
+    </section>
+  `
+})
+export class BIPage {
+  protected readonly readout = signal('');
+
+  private readonly bi = inject(UwtBITelemetryService);
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+
+  protected click(): void {
+    this.bi.track('lab_button_clicked', { button: 'primary', page: 'bi' });
+    this.readout.set(
+      'lab_button_clicked — click again within 400 ms: no second event.'
+    );
+  }
+
+  protected doubleFire(): void {
+    this.bi.track('lab_double_fired', { source: 'click-and-keydown' });
+    this.bi.track('lab_double_fired', { source: 'click-and-keydown' });
+    this.readout.set('lab_double_fired tracked twice — one event arrives.');
+  }
+
+  protected feature(): void {
+    const scenario = this.scenarios.start({ name: 'lab-happy-path' });
+    this.bi.track(
+      'lab_feature_used',
+      { theme: 'dark' },
+      { feature: 'theme-switcher', scenarioId: scenario.id }
+    );
+    scenario.complete();
+    this.readout.set(`lab_feature_used, with scenarioId ${scenario.id}`);
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/fragment.page.ts b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
new file mode 100644
index 0000000..b0e827a
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'lab-fragment-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Fragment</h1>
+      <p>
+        A second app, in its own iframe and JavaScript realm, with the
+        'broadcast' sink: it hands everything to this shell, which records it
+        once. Its events show in the Event Inspector marked ↪ lab-fragment;
+        signing in or out there applies here too.
+      </p>
+      <iframe
+        class="lab-fragment"
+        src="/fragment-app"
+        title="Lab fragment"></iframe>
+    </section>
+  `,
+  styles: `
+    .lab-fragment {
+      width: 100%;
+      height: 24rem;
+      border: 0.0625rem dashed var(--cps-color-line-mid);
+      border-radius: 0.5rem;
+      background-color: #fff;
+    }
+  `
+})
+export class FragmentPage {}
diff --git a/projects/watchtower-lab/src/shell/pages/identity.page.ts b/projects/watchtower-lab/src/shell/pages/identity.page.ts
new file mode 100644
index 0000000..7d26d1e
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/identity.page.ts
@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+/** RUM user ids must be UUIDs. */
+const ANNA = '3f2504e0-4f89-41d3-9a0c-0305e82c3301';
+const BEN = '9b2d1c6e-7a53-4d0e-8f3b-2c1a5e6d7f80';
+
+@Component({
+  selector: 'lab-identity-page',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Identity</h1>
+      <p>
+        The status bar shows the session and user. Signing out while signed in
+        starts a new session; signing out while signed out changes nothing. On
+        the wire, each event's metadata carries <code>signedIn</code>.
+      </p>
+      <div class="lab-card">
+        <div class="lab-actions">
+          <cps-button
+            label="Sign in as Anna"
+            (clicked)="sink.setUserId(anna)" />
+          <cps-button
+            label="Sign in as Ben"
+            type="outlined"
+            (clicked)="sink.setUserId(ben)" />
+          <cps-button
+            label="Sign out (undefined)"
+            type="outlined"
+            (clicked)="sink.setUserId(undefined)" />
+          <cps-button
+            label="Sign out ('')"
+            type="outlined"
+            (clicked)="sink.setUserId('')" />
+        </div>
+      </div>
+    </section>
+  `
+})
+export class IdentityPage {
+  protected readonly sink = inject(UwtTelemetrySink);
+  protected readonly anna = ANNA;
+  protected readonly ben = BEN;
+}
diff --git a/projects/watchtower-lab/src/shell/pages/inspector.page.ts b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
new file mode 100644
index 0000000..3a20f3f
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
@@ -0,0 +1,172 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  UwtBITelemetryService,
+  UwtLoggerService,
+  UwtScenarioTelemetryService,
+  UwtTelemetryMonitor,
+  UwtTelemetryPublishInput
+} from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
+  UwtEventInspectorService,
+  UwtInspectorDock
+} from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import { CpsButtonComponent, CpsSwitchComponent } from 'cps-ui-kit';
+import { LabLayout } from '../../lab/lab-layout.service';
+import { LAB_OPTIONS } from '../shell.config';
+
+const DOCKS: { dock: UwtInspectorDock; label: string }[] = [
+  { dock: 'dialog', label: 'Dialog' },
+  { dock: 'window', label: 'Separate window' },
+  { dock: 'left', label: 'Left pane' },
+  { dock: 'right', label: 'Right pane' },
+  { dock: 'bottom', label: 'Bottom pane' }
+];
+
+@Component({
+  selector: 'lab-inspector-page',
+  imports: [CpsButtonComponent, CpsSwitchComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Event Inspector</h1>
+      <p>
+        {{
+          options.inspector === 'off'
+            ? 'Disabled with ?inspector=off.'
+            : options.inspector === 'noshortcut'
+              ? 'No keyboard shortcut (?inspector=noshortcut): open it from here.'
+              : 'Shortcut: ' + shortcuts + '.'
+        }}
+      </p>
+
+      <div class="lab-card">
+        <h2>Where it opens</h2>
+        <div class="lab-actions">
+          @for (option of docks; track option.dock) {
+            <cps-button
+              [label]="option.label"
+              type="outlined"
+              (clicked)="inspector.setDock(option.dock)" />
+          }
+          <cps-button
+            label="Close"
+            type="borderless"
+            (clicked)="inspector.close()" />
+        </div>
+        <cps-switch
+          label="Keep the fixed header and status bar beside a pane (--uwt-inspector-inset-*)"
+          [value]="layout.insets()"
+          (valueChanged)="layout.insets.set($event)" />
+      </div>
+
+      <div class="lab-card">
+        <h2>Events</h2>
+        <div class="lab-actions">
+          <cps-button label="One of each kind" (clicked)="eachKind()" />
+          <cps-button
+            label="A burst of 600 BI events"
+            type="outlined"
+            (clicked)="burst()" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>Synthetic events</h2>
+        <p>
+          Published straight to the telemetry monitor, so only the Event
+          Inspector sees them — shapes the library's own services never produce.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="A 300,000-character payload"
+            type="outlined"
+            (clicked)="huge()" />
+          <cps-button label="Odd shapes" type="outlined" (clicked)="odd()" />
+          <cps-button
+            label="An unknown event type"
+            type="outlined"
+            (clicked)="unknown()" />
+        </div>
+      </div>
+    </section>
+  `
+})
+export class InspectorPage {
+  protected readonly inspector = inject(UwtEventInspectorService);
+  protected readonly layout = inject(LabLayout);
+  protected readonly options = inject(LAB_OPTIONS);
+  protected readonly docks = DOCKS;
+  protected readonly shortcuts = UWT_DEFAULT_INSPECTOR_SHORTCUTS.map(
+    (s) => s.label
+  ).join(' or ');
+
+  private readonly bi = inject(UwtBITelemetryService);
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+  private readonly logger = inject(UwtLoggerService).getLogger('lab');
+  private readonly monitor = inject(UwtTelemetryMonitor);
+
+  protected eachKind(): void {
+    this.bi.track('lab_button_clicked', {
+      button: 'each-kind',
+      at: Date.now()
+    });
+    const scenario = this.scenarios.start({ name: 'lab-happy-path' });
+    scenario.step('fetch');
+    scenario.complete();
+    this.logger.warn('A warning, from the Event Inspector page');
+    this.logger.error('An error, mirrored to RUM', {
+      error: new Error('Lab error')
+    });
+  }
+
+  protected burst(): void {
+    for (let n = 0; n < 600; n++) {
+      this.bi.track('lab_burst', { n });
+    }
+  }
+
+  protected huge(): void {
+    this.publish({
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload: { eventName: 'lab_huge_payload', blob: 'x'.repeat(300_000) }
+    });
+  }
+
+  protected odd(): void {
+    this.publish({
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload: {
+        eventName: 'lab_odd_shapes',
+        unicode: 'Zürich · 東京 · 🚀',
+        nothing: null,
+        nested: { deeper: { deepest: [1, [2, [3, { four: 4 }]]] } },
+        list: [{ name: 'a' }, { name: 'b' }],
+        empty: {}
+      }
+    });
+  }
+
+  protected unknown(): void {
+    this.publish({
+      kind: 'unknown',
+      eventType: 'com.example.custom',
+      payload: { what: 'an event type the library does not emit' }
+    });
+  }
+
+  private publish(
+    event: Pick<UwtTelemetryPublishInput, 'kind'> & {
+      eventType: string;
+      payload: object;
+    }
+  ): void {
+    this.monitor.publish({
+      ...event,
+      destination: 'sink',
+      origin: { forwarded: false }
+    } as UwtTelemetryPublishInput);
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts b/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
new file mode 100644
index 0000000..4e316fa
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  UwtScenarioTelemetryService,
+  UwtTelemetrySink
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+@Component({
+  selector: 'lab-lifecycle-page',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Lifecycle</h1>
+      <div class="lab-card">
+        <h2>Flushing</h2>
+        <p>
+          Sends what the sink is holding now, rather than at its next batch.
+        </p>
+        <div class="lab-actions">
+          <cps-button label="Flush now" (clicked)="sink.flush()" />
+        </div>
+      </div>
+      <div class="lab-card">
+        <h2>Leaving with a scenario running</h2>
+        <p>
+          Starts lab-abandoned, then reloads. As the page goes, the scenario is
+          settled as abandoned and sent by beacon: look for it On the wire.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="Start a scenario and reload"
+            type="outlined"
+            (clicked)="leave()" />
+        </div>
+      </div>
+      <div class="lab-card">
+        <h2>Hiding the tab</h2>
+        <p>
+          Switch to another tab, then come back: the sink flushes when the page
+          is hidden, so whatever was waiting shows up On the wire straight away.
+        </p>
+      </div>
+    </section>
+  `
+})
+export class LifecyclePage {
+  protected readonly sink = inject(UwtTelemetrySink);
+
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+
+  protected leave(): void {
+    this.scenarios.start({ name: 'lab-abandoned' }).step('fetch');
+    location.reload();
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/logging.page.ts b/projects/watchtower-lab/src/shell/pages/logging.page.ts
new file mode 100644
index 0000000..278345a
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/logging.page.ts
@@ -0,0 +1,81 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal
+} from '@angular/core';
+import { UwtLoggerService } from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+@Component({
+  selector: 'lab-logging-page',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Logging</h1>
+      <p>
+        Records go to the lab's mock log backend. Errors are also mirrored to
+        RUM (mirrorErrorsToRum). The <code>noisy</code> logger only writes
+        warnings and up.
+      </p>
+      <div class="lab-card">
+        <h2>The <code>lab</code> logger</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="log"
+            type="outlined"
+            (clicked)="lab.log('A lab log line')" />
+          <cps-button
+            label="warn"
+            type="outlined"
+            (clicked)="lab.warn('A lab warning')" />
+          <cps-button label="error, with an Error" (clicked)="error()" />
+        </div>
+      </div>
+      <div class="lab-card">
+        <h2>The <code>noisy</code> logger (warn and up)</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="log (dropped)"
+            type="outlined"
+            (clicked)="noisy.log('Not written')" />
+          <cps-button
+            label="warn"
+            type="outlined"
+            (clicked)="noisy.warn('A noisy warning')" />
+        </div>
+      </div>
+      <div class="lab-card">
+        <h2>Reading back</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="query({ logger: 'lab' })"
+            type="outlined"
+            (clicked)="query()" />
+        </div>
+      </div>
+      <pre class="lab-readout">{{ readout() || 'No query yet.' }}</pre>
+    </section>
+  `
+})
+export class LoggingPage {
+  protected readonly readout = signal('');
+
+  private readonly logger = inject(UwtLoggerService);
+  protected readonly lab = this.logger.getLogger('lab');
+  protected readonly noisy = this.logger.getLogger('noisy');
+
+  protected error(): void {
+    this.lab.error('Saving the order failed', {
+      error: new Error('Connection reset'),
+      context: 'checkout',
+      metadata: { orderId: 'A-1001' }
+    });
+  }
+
+  protected async query(): Promise<void> {
+    const records = await this.logger.query({ logger: 'lab', limit: 20 });
+    this.readout.set(JSON.stringify(records, null, 2));
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/privacy.page.ts b/projects/watchtower-lab/src/shell/pages/privacy.page.ts
new file mode 100644
index 0000000..860d645
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/privacy.page.ts
@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal
+} from '@angular/core';
+import {
+  UwtBITelemetryService,
+  UwtLoggerService,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+/** Values that must never leave the browser as they are. */
+const PERSONAL = {
+  email: 'anna.smith@example.com',
+  note: 'card 4111 1111 1111 1111, phone +27 82 555 0123',
+  ip: '10.1.2.3',
+  password: 'hunter2',
+  authToken: 'eyJhbGciOiJIUzI1NiJ9.lab'
+};
+
+@Component({
+  selector: 'lab-privacy-page',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Privacy</h1>
+      <p>
+        Each button sends the values below; with key patterns and
+        scanValuePatterns on, none of them should appear as they are — not in
+        the Event Inspector, not on the wire.
+      </p>
+      <pre class="lab-readout">{{ personal }}</pre>
+      <div class="lab-card">
+        <div class="lab-actions">
+          <cps-button label="As BI metadata" (clicked)="bi()" />
+          <cps-button
+            label="In a log message"
+            type="outlined"
+            (clicked)="log()" />
+          <cps-button
+            label="In a failing scenario"
+            type="outlined"
+            (clicked)="scenario()" />
+        </div>
+      </div>
+      <p>{{ sent() }}</p>
+    </section>
+  `
+})
+export class PrivacyPage {
+  protected readonly personal = JSON.stringify(PERSONAL, null, 2);
+  protected readonly sent = signal('');
+
+  private readonly biTelemetry = inject(UwtBITelemetryService);
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+  private readonly logger = inject(UwtLoggerService).getLogger('privacy');
+
+  protected bi(): void {
+    this.biTelemetry.track('lab_privacy_checked', PERSONAL);
+    this.sent.set('Sent as lab_privacy_checked.');
+  }
+
+  protected log(): void {
+    this.logger.warn(`Customer ${PERSONAL.email} paid with ${PERSONAL.note}`, {
+      metadata: { ip: PERSONAL.ip, password: PERSONAL.password }
+    });
+    this.sent.set('Sent as a warning from the privacy logger.');
+  }
+
+  protected scenario(): void {
+    this.scenarios
+      .start({ name: 'lab-privacy', metadata: { email: PERSONAL.email } })
+      .fail({ error: new Error(`Lookup failed for ${PERSONAL.email}`) });
+    this.sent.set('Sent as the failed lab-privacy scenario.');
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
new file mode 100644
index 0000000..b1e9aaf
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
@@ -0,0 +1,220 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, switchMap } from 'rxjs';
+import {
+  traceScenario,
+  UwtScenario,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent } from 'cps-ui-kit';
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+@Component({
+  selector: 'lab-scenarios-page',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Scenarios</h1>
+      <p>
+        Each settled scenario's record appears below, as the sink receives it.
+      </p>
+
+      <div class="lab-card">
+        <h2>Settling</h2>
+        <div class="lab-actions">
+          <cps-button label="Complete, with 3 steps" (clicked)="happyPath()" />
+          <cps-button
+            label="Fail with an error"
+            type="outlined"
+            (clicked)="failure()" />
+          <cps-button label="Cancel" type="outlined" (clicked)="cancel()" />
+          <cps-button
+            label="Incomplete"
+            type="outlined"
+            (clicked)="incomplete()" />
+          <cps-button
+            label="Time out after 1.5 s"
+            type="outlined"
+            (clicked)="timeout()" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>Timing</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="Backdated by 1.5 s"
+            type="outlined"
+            (clicked)="backdated()" />
+          <cps-button
+            label="5 aggregated batches"
+            type="outlined"
+            (clicked)="aggregates()" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>HTTP, with traceScenario</h2>
+        <p>
+          Search cancels the search in flight (switchMap): click it several
+          times quickly, and only the last one completes; the others settle as
+          abandoned, with abandonedBy: caller.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="Request (600 ms)"
+            type="outlined"
+            (clicked)="request()" />
+          <cps-button
+            label="Request that fails (500)"
+            type="outlined"
+            (clicked)="failingRequest()" />
+          <cps-button
+            label="Search"
+            type="outlined"
+            (clicked)="searches.next(800)" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>A running scenario</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="Start"
+            type="outlined"
+            (clicked)="startRunning()" />
+          <cps-button
+            label="Show toRecord()"
+            type="outlined"
+            (clicked)="showRunning()" />
+          <cps-button
+            label="Complete it"
+            type="outlined"
+            (clicked)="completeRunning()" />
+        </div>
+      </div>
+
+      <pre class="lab-readout">{{ readout() || 'Nothing settled yet.' }}</pre>
+    </section>
+  `
+})
+export class ScenariosPage {
+  protected readonly readout = signal('');
+  protected readonly searches = new Subject<number>();
+
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+  private readonly http = inject(HttpClient);
+  private running?: UwtScenario;
+
+  constructor() {
+    this.scenarios.settled$
+      .pipe(takeUntilDestroyed())
+      .subscribe((record) => this.readout.set(JSON.stringify(record, null, 2)));
+
+    this.searches
+      .pipe(
+        switchMap((delay) =>
+          this.http.get('/api/data', { params: { delay } }).pipe(
+            traceScenario(
+              this.scenarios.start({
+                name: 'lab-superseded',
+                metadata: { delay }
+              })
+            )
+          )
+        ),
+        takeUntilDestroyed()
+      )
+      .subscribe();
+  }
+
+  protected async happyPath(): Promise<void> {
+    const scenario = this.scenarios.start({ name: 'lab-happy-path' });
+    scenario.step('fetch');
+    await wait(300);
+    scenario.step('validate');
+    await wait(200);
+    scenario.step('render');
+    await wait(100);
+    scenario.complete();
+  }
+
+  protected failure(): void {
+    const scenario = this.scenarios.start({ name: 'lab-failure' });
+    scenario.step('fetch');
+    scenario.fail({ error: new Error('The backend said no'), statusCode: 503 });
+  }
+
+  protected cancel(): void {
+    this.scenarios.start({ name: 'lab-cancel' }).cancel();
+  }
+
+  protected incomplete(): void {
+    this.scenarios.start({ name: 'lab-incomplete' }).incomplete();
+  }
+
+  protected timeout(): void {
+    this.scenarios
+      .start({ name: 'lab-timeout', timeoutMs: 1500 })
+      .step('fetch');
+  }
+
+  protected backdated(): void {
+    this.scenarios
+      .start({ name: 'lab-backdated', startedAt: performance.now() - 1500 })
+      .complete();
+  }
+
+  protected async aggregates(): Promise<void> {
+    const scenario = this.scenarios.start({ name: 'lab-aggregates' });
+    for (let batch = 0; batch < 5; batch++) {
+      scenario.aggregateStart('batch');
+      await wait(40);
+      scenario.aggregateEnd('batch');
+    }
+    scenario.complete();
+  }
+
+  protected request(): void {
+    const scenario = this.scenarios.start({ name: 'lab-http' });
+    this.http
+      .get('/api/data', { params: { delay: 600 } })
+      .pipe(traceScenario(scenario))
+      .subscribe();
+  }
+
+  protected failingRequest(): void {
+    const scenario = this.scenarios.start({ name: 'lab-http-error' });
+    this.http
+      .get('/api/data', { params: { status: 500 } })
+      .pipe(traceScenario(scenario))
+      .subscribe({ error: () => undefined });
+  }
+
+  protected startRunning(): void {
+    this.running = this.scenarios.start({ name: 'lab-happy-path' });
+    this.running.step('fetch');
+    this.showRunning();
+  }
+
+  protected showRunning(): void {
+    this.readout.set(
+      this.running
+        ? JSON.stringify(this.running.toRecord(), null, 2)
+        : 'Start a scenario first.'
+    );
+  }
+
+  protected completeRunning(): void {
+    this.running?.complete();
+    this.running = undefined;
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/wire.page.ts b/projects/watchtower-lab/src/shell/pages/wire.page.ts
new file mode 100644
index 0000000..38297b0
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/wire.page.ts
@@ -0,0 +1,210 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal
+} from '@angular/core';
+import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  CpsButtonComponent,
+  CpsSelectComponent,
+  CpsSwitchComponent
+} from 'cps-ui-kit';
+import {
+  LAB_TELEMETRIES,
+  LabBrokerMode,
+  LabRumEvent,
+  LabTelemetry,
+  LabWire
+} from '../../lab/lab-wire.service';
+
+const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
+  { label: 'ok — RUM records normally', value: 'ok' },
+  { label: 'null — RUM off for the page', value: 'null' },
+  { label: 'fail — broker error, the app carries on', value: 'fail' },
+  {
+    label: 'short-expiry — credentials refresh within seconds',
+    value: 'short-expiry'
+  }
+];
+
+@Component({
+  selector: 'lab-wire-page',
+  imports: [CpsButtonComponent, CpsSelectComponent, CpsSwitchComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>On the wire</h1>
+      <p>
+        What the lab's mock backend actually received — the other side of what
+        the app, and the Event Inspector, say was sent. Newest first.
+      </p>
+
+      <div class="lab-card">
+        <h2>Mock RUM broker</h2>
+        <div class="lab-actions">
+          <cps-select
+            label="Answer the next /rum/init with"
+            [options]="modes"
+            [returnObject]="false"
+            [value]="wire.brokerMode()"
+            width="26rem"
+            (valueChanged)="wire.setBrokerMode($event)" />
+        </div>
+        <p>
+          RUM's own telemetry: the library's default is errors, performance and
+          same-origin HTTP. With none, RUM records only page views, the session
+          start and the library's events.
+        </p>
+        <div class="lab-actions">
+          <cps-switch
+            label="The library's default"
+            [value]="wire.telemetries() === null"
+            (valueChanged)="useDefault($event)" />
+          @if (wire.telemetries(); as chosen) {
+            <cps-select
+              label="Telemetries"
+              placeholder="None"
+              [options]="telemetryOptions"
+              [returnObject]="false"
+              [multiple]="true"
+              [selectAll]="true"
+              [chips]="true"
+              [value]="chosen"
+              width="26rem"
+              (valueChanged)="wire.setTelemetries($event)" />
+          }
+        </div>
+        <div class="lab-actions">
+          <cps-button
+            label="Reload to apply"
+            type="outlined"
+            (clicked)="reload()" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <div class="lab-actions">
+          <cps-button label="Flush now" (clicked)="sink.flush()" />
+          <cps-button
+            label="Reset the mock backend"
+            type="outlined"
+            (clicked)="wire.reset()" />
+          <cps-switch
+            label="Library events only"
+            [value]="libraryOnly()"
+            (valueChanged)="libraryOnly.set($event)" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>RUM events ({{ rum().length }})</h2>
+        <table class="lab-table">
+          <thead>
+            <tr>
+              <th>Received</th>
+              <th>Type</th>
+              <th>Session · user</th>
+              <th>signedIn</th>
+              <th>Details</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (event of rum(); track $index) {
+              <tr>
+                <td>{{ event.receivedAt.slice(11, 19) }}</td>
+                <td>
+                  <code>{{ event.type }}</code>
+                </td>
+                <td>
+                  {{ short(event.user.sessionId) }} ·
+                  {{ short(event.user.userId) }}
+                </td>
+                <td>{{ event.metadata['signedIn'] ?? '' }}</td>
+                <td>
+                  <details>
+                    <summary>{{ summary(event) }}</summary>
+                    <pre class="lab-readout">{{ json(event) }}</pre>
+                  </details>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <div class="lab-card">
+        <h2>Log records ({{ logs().length }})</h2>
+        <table class="lab-table">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Level</th>
+              <th>Application · logger</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (record of logs(); track $index) {
+              <tr>
+                <td>{{ record.timestamp.slice(11, 19) }}</td>
+                <td>{{ record.level }}</td>
+                <td>{{ record.application }} · {{ record.logger }}</td>
+                <td>{{ record.message }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </section>
+  `
+})
+export class WirePage {
+  protected readonly wire = inject(LabWire);
+  protected readonly sink = inject(UwtTelemetrySink);
+  protected readonly modes = BROKER_MODES;
+  protected readonly libraryOnly = signal(true);
+
+  protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
+    label: t,
+    value: t
+  }));
+
+  protected readonly rum = computed(() =>
+    this.wire
+      .rum()
+      .filter((e) => !this.libraryOnly() || e.type.startsWith('com.uwt.'))
+      .slice()
+      .reverse()
+  );
+
+  protected readonly logs = computed(() => this.wire.logs().slice().reverse());
+
+  protected reload(): void {
+    location.reload();
+  }
+
+  /** Back to the default, or a list to edit that starts as the default. */
+  protected useDefault(useDefault: boolean): void {
+    const defaults: LabTelemetry[] = ['errors', 'performance', 'http'];
+    this.wire.setTelemetries(useDefault ? null : defaults);
+  }
+
+  protected short(id?: string): string {
+    return id ? id.slice(0, 8) : '—';
+  }
+
+  protected summary(event: LabRumEvent): string {
+    const d = event.details;
+    return String(d.eventName ?? d.scenarioName ?? d.message ?? d.name ?? '…');
+  }
+
+  protected json(event: LabRumEvent): string {
+    return JSON.stringify(
+      { metadata: event.metadata, details: event.details },
+      null,
+      2
+    );
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
new file mode 100644
index 0000000..7024a1c
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -0,0 +1,132 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  inject,
+  signal
+} from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtEventInspectorService } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import { LabLayout } from '../lab/lab-layout.service';
+import { LabWire } from '../lab/lab-wire.service';
+import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
+
+/** The lab's frame: a fixed header, the pages, and a fixed status bar. */
+@Component({
+  selector: 'lab-root',
+  imports: [RouterLink, RouterLinkActive, RouterOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <header class="lab-header">
+      <img
+        class="lab-logo"
+        src="assets/logo/logo-mark.svg"
+        alt=""
+        width="32"
+        height="32" />
+      <strong class="lab-title">Watchtower Lab</strong>
+      <span class="lab-chip">destination: {{ options.destination }}</span>
+      <span class="lab-chip"
+        >telemetry: {{ options.telemetry ? 'on' : 'off' }}</span
+      >
+      <span class="lab-chip">broker: {{ wire.brokerMode() }}</span>
+      <span class="lab-chip"
+        >rum telemetries: {{ wire.telemetriesLabel() }}</span
+      >
+      <span class="lab-spacer"></span>
+      <span class="lab-user">{{
+        identity().userId ? 'Signed in' : 'Signed out'
+      }}</span>
+      <button
+        type="button"
+        class="lab-header-button"
+        (click)="inspector.open()">
+        Event Inspector
+      </button>
+    </header>
+
+    <div class="lab-layout">
+      <nav class="lab-nav" aria-label="Lab pages">
+        @for (page of pages; track page.path) {
+          <a [routerLink]="page.path" routerLinkActive="active">{{
+            page.label
+          }}</a>
+        }
+      </nav>
+      <main class="lab-main">
+        <router-outlet />
+      </main>
+    </div>
+
+    <footer class="lab-status">
+      <span
+        >Mock dataplane: {{ wire.rum().length }} RUM events ({{
+          wire.libraryEvents()
+        }}
+        from the library) in {{ wire.batches() }} batches</span
+      >
+      <span>logs: {{ wire.logs().length }}</span>
+      <span>session: {{ identity().sessionId ?? '—' }}</span>
+      <span>user: {{ identity().userId ?? '—' }}</span>
+    </footer>
+  `,
+  styles: `
+    .lab-logo {
+      flex-shrink: 0;
+      margin-right: -0.25rem;
+      border-radius: 50%;
+      box-shadow: 0 0 0 0.125rem #ffffffb3;
+    }
+    .lab-title {
+      font-size: 1.2rem;
+    }
+    .lab-chip {
+      padding: 0.15rem 0.6rem;
+      border-radius: 1rem;
+      background-color: #ffffff26;
+      font-size: 0.85rem;
+      white-space: nowrap;
+    }
+    .lab-spacer {
+      flex: 1;
+    }
+    .lab-user {
+      white-space: nowrap;
+    }
+    .lab-header-button {
+      padding: 0.35rem 0.9rem;
+      border: 0.0625rem solid #fff;
+      border-radius: 0.25rem;
+      background: transparent;
+      color: #fff;
+      font: inherit;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+  `
+})
+export class ShellComponent {
+  protected readonly options = inject(LAB_OPTIONS);
+  protected readonly wire = inject(LabWire);
+  protected readonly inspector = inject(UwtEventInspectorService);
+  protected readonly pages = SHELL_PAGES;
+  protected readonly identity = signal<{ sessionId?: string; userId?: string }>(
+    {}
+  );
+
+  private readonly sink = inject(UwtTelemetrySink);
+
+  constructor() {
+    inject(LabLayout);
+    const timer = setInterval(
+      () =>
+        this.identity.set({
+          sessionId: this.sink.getSessionId(),
+          userId: this.sink.getUserId()
+        }),
+      1000
+    );
+    inject(DestroyRef).onDestroy(() => clearInterval(timer));
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
new file mode 100644
index 0000000..265ceb4
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -0,0 +1,130 @@
+import { provideHttpClient } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  InjectionToken,
+  provideZoneChangeDetection
+} from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, Routes } from '@angular/router';
+import {
+  UWT_LOG_API_PROVIDER,
+  provideUwtTelemetry,
+  provideUwtTelemetryBroadcastHost,
+  provideUwtTelemetrySink,
+  withBIEvents,
+  withLogging,
+  withRedaction,
+  withScenarios,
+  withTelemetryEnabled
+} from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UWT_RUM_CREDENTIALS_PROVIDER,
+  provideUwtTelemetryRumSink
+} from '@absaoss-cps/ngx-ui-watchtower/rum';
+import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import { LabOptions, labOptions } from '../lab/lab-options';
+import { LabLogApiProvider } from '../lab/lab-log-api.provider';
+import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
+
+export const LAB_OPTIONS = new InjectionToken<LabOptions>('LAB_OPTIONS');
+
+export const SHELL_PAGES = [
+  {
+    path: 'scenarios',
+    label: 'Scenarios',
+    load: () => import('./pages/scenarios.page').then((m) => m.ScenariosPage)
+  },
+  {
+    path: 'bi',
+    label: 'BI events',
+    load: () => import('./pages/bi.page').then((m) => m.BIPage)
+  },
+  {
+    path: 'logging',
+    label: 'Logging',
+    load: () => import('./pages/logging.page').then((m) => m.LoggingPage)
+  },
+  {
+    path: 'identity',
+    label: 'Identity',
+    load: () => import('./pages/identity.page').then((m) => m.IdentityPage)
+  },
+  {
+    path: 'privacy',
+    label: 'Privacy',
+    load: () => import('./pages/privacy.page').then((m) => m.PrivacyPage)
+  },
+  {
+    path: 'lifecycle',
+    label: 'Lifecycle',
+    load: () => import('./pages/lifecycle.page').then((m) => m.LifecyclePage)
+  },
+  {
+    path: 'fragment',
+    label: 'Fragment',
+    load: () => import('./pages/fragment.page').then((m) => m.FragmentPage)
+  },
+  {
+    path: 'inspector',
+    label: 'Event Inspector',
+    load: () => import('./pages/inspector.page').then((m) => m.InspectorPage)
+  },
+  {
+    path: 'wire',
+    label: 'On the wire',
+    load: () => import('./pages/wire.page').then((m) => m.WirePage)
+  }
+];
+
+const routes: Routes = [
+  ...SHELL_PAGES.map(({ path, label, load }) => ({
+    path,
+    title: `${label} · Watchtower Lab`,
+    loadComponent: load
+  })),
+  { path: '**', redirectTo: 'scenarios' }
+];
+
+const options = labOptions();
+
+/**
+ * The shell: the realm with the real destination. RUM against the lab's
+ * mock dataplane (or noop), logs to its mock backend, the broadcast host for
+ * the fragment, and the Event Inspector.
+ */
+export const shellConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideAnimations(),
+    provideHttpClient(),
+    provideRouter(routes),
+    { provide: LAB_OPTIONS, useValue: options },
+    provideUwtTelemetry(
+      { application: 'watchtower-lab', environment: 'lab', version: '1.0.0' },
+      withTelemetryEnabled(options.telemetry),
+      withLogging({
+        minLevel: 'log',
+        levels: { noisy: 'warn' },
+        mirrorErrorsToRum: true
+      }),
+      withScenarios({ defaultTimeoutMs: 30_000 }),
+      withBIEvents(),
+      withRedaction({
+        scanValuePatterns: ['email', 'creditCard', 'ssn', 'ipv4', 'phone']
+      })
+    ),
+    options.destination === 'noop'
+      ? provideUwtTelemetrySink('noop')
+      : provideUwtTelemetryRumSink(),
+    {
+      provide: UWT_RUM_CREDENTIALS_PROVIDER,
+      useExisting: LabRumCredentialsProvider
+    },
+    { provide: UWT_LOG_API_PROVIDER, useExisting: LabLogApiProvider },
+    provideUwtTelemetryBroadcastHost(),
+    provideUwtEventInspector({
+      enabled: options.inspector !== 'off',
+      ...(options.inspector === 'noshortcut' && { shortcuts: [] })
+    })
+  ]
+};
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
new file mode 100644
index 0000000..3f41eec
--- /dev/null
+++ b/projects/watchtower-lab/src/styles.scss
@@ -0,0 +1,213 @@
+// cps-ui-kit's global styles, without its primeicons import: the lab doesn't
+// use PrimeIcons, and the package isn't installed here.
+@use 'cps-ui-kit/styles/colors';
+@use 'cps-ui-kit/styles/fonts';
+@use 'cps-ui-kit/styles/cps-tooltip-style';
+@use 'cps-ui-kit/styles/mixins' as cps;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.p-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 100px;
+  height: 100px;
+  overflow: scroll;
+}
+
+.cps-sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  margin: -0.0625rem;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+body {
+  margin: 0;
+  background-color: #f4f6f9;
+  color: var(--cps-color-text-dark);
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+// The header and status bar are fixed to the window on purpose: they show
+// what an Event Inspector pane covers, and — with `lab-insets` on <html>,
+// switched on the Event Inspector page — how an app keeps them beside it.
+.lab-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 3.5rem;
+  padding: 0 1.25rem;
+  background-color: #8a0b3c;
+  color: #fff;
+}
+
+.lab-status {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  height: 2.25rem;
+  padding: 0 1.25rem;
+  background-color: #1f2937;
+  color: #e5e7eb;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+}
+
+html.lab-insets {
+  .lab-header {
+    right: var(--uwt-inspector-inset-right, 0px);
+    left: var(--uwt-inspector-inset-left, 0px);
+  }
+
+  .lab-status {
+    right: var(--uwt-inspector-inset-right, 0px);
+    bottom: var(--uwt-inspector-inset-bottom, 0px);
+    left: var(--uwt-inspector-inset-left, 0px);
+  }
+}
+
+.lab-layout {
+  display: grid;
+  grid-template-columns: 12rem minmax(0, 1fr);
+  min-height: 100vh;
+  padding: 3.5rem 0 2.25rem;
+}
+
+.lab-nav {
+  position: sticky;
+  top: 3.5rem;
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+
+  a {
+    padding: 0.5rem 1.25rem;
+    color: var(--cps-color-text-dark);
+    text-decoration: none;
+
+    &.active {
+      border-left: 0.25rem solid #8a0b3c;
+      background-color: #f3e6eb;
+      color: #8a0b3c;
+      font-weight: 700;
+    }
+
+    // Inside the link, as cps-ui-kit does for full-width items: outside, the
+    // ring would be cut off at the window's edge.
+    &:focus-visible {
+      @include cps.focus-ring(-0.125rem, -0.25rem, 0);
+    }
+  }
+}
+
+// The header's own button; its other styles are the shell component's.
+.lab-header-button:focus-visible {
+  @include cps.focus-ring;
+}
+
+.lab-main {
+  padding: 1.5rem 2rem;
+}
+
+.lab-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 64rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.6rem;
+  }
+
+  > p {
+    margin: 0;
+    color: var(--cps-text-secondary);
+  }
+}
+
+.lab-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border: 0.0625rem solid var(--cps-color-line-mid);
+  border-radius: 0.5rem;
+  background-color: #fff;
+
+  h2 {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  p {
+    margin: 0;
+    color: var(--cps-text-secondary);
+    font-size: 0.9rem;
+  }
+}
+
+.lab-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lab-readout {
+  max-height: 20rem;
+  margin: 0;
+  padding: 0.75rem;
+  overflow: auto;
+  border-radius: 0.25rem;
+  background-color: #f8fafc;
+  font:
+    0.8rem/1.5 ui-monospace,
+    Menlo,
+    Consolas,
+    monospace;
+  white-space: pre-wrap;
+}
+
+.lab-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+
+  th,
+  td {
+    padding: 0.4rem 0.6rem;
+    border-bottom: 0.0625rem solid var(--cps-color-line-light);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    background-color: #fafbfc;
+  }
+
+  code {
+    font-size: 0.8rem;
+  }
+}
diff --git a/projects/watchtower-lab/src/telemetry.schema.ts b/projects/watchtower-lab/src/telemetry.schema.ts
new file mode 100644
index 0000000..cf3410e
--- /dev/null
+++ b/projects/watchtower-lab/src/telemetry.schema.ts
@@ -0,0 +1,42 @@
+// Every scenario, step, BI event and logger name the lab uses, declared as the
+// README tells applications to, so the library's types check them.
+declare module '@absaoss-cps/ngx-ui-watchtower' {
+  interface UwtScenarioNames {
+    'lab-happy-path': true;
+    'lab-failure': true;
+    'lab-cancel': true;
+    'lab-incomplete': true;
+    'lab-timeout': true;
+    'lab-backdated': true;
+    'lab-aggregates': true;
+    'lab-http': true;
+    'lab-http-error': true;
+    'lab-superseded': true;
+    'lab-abandoned': true;
+    'lab-privacy': true;
+    'lab-burst': true;
+    'fragment-journey': true;
+  }
+  interface UwtScenarioSteps {
+    fetch: true;
+    validate: true;
+    render: true;
+    batch: true;
+  }
+  interface UwtBIEventNames {
+    lab_button_clicked: true;
+    lab_double_fired: true;
+    lab_feature_used: true;
+    lab_privacy_checked: true;
+    lab_burst: true;
+    fragment_button_clicked: true;
+  }
+  interface UwtLoggerNames {
+    lab: true;
+    noisy: true;
+    privacy: true;
+    fragment: true;
+  }
+}
+
+export {};
diff --git a/projects/watchtower-lab/tsconfig.app.json b/projects/watchtower-lab/tsconfig.app.json
new file mode 100644
index 0000000..cd6f6e3
--- /dev/null
+++ b/projects/watchtower-lab/tsconfig.app.json
@@ -0,0 +1,10 @@
+/* The Watchtower Lab: a testing app for the library, built from its source. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/watchtower-lab",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/temp_docs/CHANGES_DESC.md b/temp_docs/CHANGES_DESC.md
new file mode 100644
index 0000000..b7a4cda
--- /dev/null
+++ b/temp_docs/CHANGES_DESC.md
@@ -0,0 +1,720 @@
+# Add `@absaoss-cps/ngx-ui-watchtower`: a reusable Angular telemetry library, wired into `composition`
+
+## Summary
+
+Adds `@absaoss-cps/ngx-ui-watchtower`, a new Angular library providing application logging,
+scenario (user-journey) health telemetry, business/UX event tracking, and
+PII redaction, with pluggable transport sinks — AWS CloudWatch RUM,
+cross-realm broadcast (for micro-frontend compositions), and a no-op sink
+for local development. Nothing in the library is specific to any one
+application: event names, configuration, and AWS credentials are all
+supplied by the host app.
+
+Each app sends to exactly one destination, registered with
+`provideUwtTelemetryDestination`; swapping it — for a future OpenTelemetry
+exporter, say — is one provider line, with no change to application code.
+An optional in-app diagnostics popup shows, live, everything the app hands
+to its destinations. The package is published publicly on npm as
+`@absaoss-cps/ngx-ui-watchtower`.
+
+The library has a single real runtime dependency, `tslib`. `aws-rum-web`
+is an optional peer dependency, needed only when the RUM sink is used, so
+an application using only the broadcast or no-op sink never pulls in the
+AWS SDK. This is enforced structurally, not just by convention: the RUM
+sink and its providers live in a separate secondary entry point,
+`@absaoss-cps/ngx-ui-watchtower/rum` (see "Two entry points" under Sinks below), so an
+application that never imports from it never needs `aws-rum-web`
+resolvable at build time either. The diagnostics popup is split out the same
+way, into `@absaoss-cps/ngx-ui-watchtower/diagnostics`: it is built from
+cps-ui-kit, an optional peer dependency nothing else in the library touches.
+
+This PR also wires the library end-to-end into `composition`, the
+component-library documentation/demo app, so every major capability
+(scenarios, logs, BI events, redaction) is exercised by real, running
+code rather than only by unit tests.
+
+`projects/ngx-ui-watchtower/README.md` is a short quick guide.
+`projects/ngx-ui-watchtower/DESIGN.md` is the full development design:
+architecture, the reasoning behind each decision, a line-by-line verification
+of every AWS RUM SDK capability claim (checked against the installed
+`aws-rum-web@3.2.1` source, not just its docs), and how a future
+OpenTelemetry destination would be connected.
+
+---
+
+## Scenario telemetry
+
+`UwtScenario` / `UwtScenarioTelemetryService` model one user journey — load
+customer data, submit a form, run a search — as an object with steps,
+aggregates, and a terminal outcome.
+
+- **Five terminal statuses**: `success`, `failure`, `abandoned`,
+  `incomplete`, `timeout`. There is no "in progress" status — a running
+  scenario simply has none yet (`scenario.status` is `undefined` until
+  settlement); `scenario.isSettled` answers whether it's done. Settling is
+  absorbing: a second `complete()`/`fail()`/etc. after the first is a
+  documented no-op, not a throw.
+- **Automatic step management**: opening a step closes the previous one as
+  completed; steps carry redacted metadata, an optional message, and a
+  normalized error on failure. `steps[]` always has at least two entries
+  (synthetic `scenario-start`/`scenario-end` boundary markers), even for a
+  scenario that never calls `.step()`.
+- **Aggregates** (`aggregateStart`/`aggregateEnd`) sum a repeatedly-invoked
+  operation (a formatter run per row, a validator per field) into one total
+  instead of one step per call, so a hot loop doesn't blow through the
+  step budget or the record's own size.
+- **Per-scenario timeout** (default 30s, configurable per call or globally,
+  `0` disables): a scenario that never settles auto-settles as `timeout`
+  rather than silently disappearing from the data.
+- **Page-unload safety**: every in-flight scenario is settled as
+  `abandoned` (`page-hidden`) on `pagehide`, with the sink flushed via
+  `sendBeacon`. Concurrent scenarios (a dashboard loading three panels at
+  once) are independent — there is no ambient "current scenario."
+- **User Timings integration**: optional `performance.mark`/`measure`
+  entries on the DevTools Performance track, gated by config or a
+  LocalStorage debug flag. Marks are cleared at settle; a scenario with its
+  timeout explicitly disabled and no navigation to clean it up is still
+  guarded by an independent mark-cleanup fallback, so marks can't
+  accumulate in the Performance buffer for the life of the page.
+- **Timers stay out of Angular's zone.** A scenario's timeout and the
+  mark-cleanup fallback are scheduled outside the zone, so a running
+  scenario never holds the application unstable (`whenStable`, hydration)
+  for the length of its timeout. A configured duration longer than
+  `setTimeout`'s 32-bit limit is honoured by rescheduling, for both.
+- **`elapsed` (the scenario and step timeline-position field) is built from
+  the _host_ page's clock, not the local realm's.** It exists specifically
+  so events from one session can be lined up against each other — but a
+  fragment's own `performance.now()` runs from a later `timeOrigin` than
+  the shell's, so a per-realm value would silently put shell- and
+  fragment-originated records on two different, non-comparable timelines
+  despite sharing one session id. `uwtElapsedNow()` prefers
+  `top.performance.now()`, mirroring the same fix already applied to User
+  Timing marks above, falling back to the local realm's clock if `top`
+  throws (cross-origin, sandboxed).
+- **`maxKeys` is enforced on the combined metadata, not each bag in
+  isolation.** `setData()`, an outcome's metadata at settle, and a step's
+  initial plus closing metadata are all merged through a shared helper
+  that re-applies the cap to the merged result — a key already present is
+  always updatable, but a genuinely new key is dropped once the combined
+  count reaches `maxKeys`. Capping each bag independently before merging
+  (the previous behavior) let the total grow past the configured bound.
+- **`toRecord()`** is public and safe to call mid-flight — its `status`
+  field is honestly typed as absent until the scenario has actually
+  settled, and its returned `steps` and `metadata` are deep-cloned, not
+  just a fresh array shell around shared objects, so mutating a mid-flight
+  snapshot (including a nested step's own `metadata`) can never change
+  what's later emitted at settlement.
+- **`complete()`/`fail()`/`incomplete()`/`cancel()` share one signature** —
+  `(outcome?: UwtScenarioOutcome)` — so custom metadata, status codes, a
+  `reason`/`message`, and (for `fail()`) the thrown `error` are all
+  available identically regardless of which one is called.
+- **`traceScenario()`** RxJS pipeable operator bridges Observable streams
+  directly to scenario completion/failure with optional outcome derivation,
+  with the outcome mapper itself guarded so a throwing mapper still settles
+  the scenario (as a success with no outcome) instead of crashing the
+  subscription. A teardown that isn't a `complete`/`error` — a superseding
+  `switchMap`, `takeUntilDestroyed()`, a manual unsubscribe — cancels the
+  scenario instead of leaving it to self-settle as a `timeout`; guarded by
+  `isSettled` so it never fires again after a real settle. That
+  cancellation carries no `reason` unless `cancelOutcome` is supplied — a
+  caller's own `scenario.cancel({ reason })` from a `switchMap` projector
+  is always too late, since `switchMap` unsubscribes (and thereby settles)
+  the prior inner Observable before the new projector ever runs.
+- **`UwtScenarioTelemetryService.settled$`** is a public `Observable` of
+  every scenario as it settles, plus `.find(scenarioId)` and
+  `.getActive()` for introspecting in-flight scenarios — a debug overlay,
+  a retry prompt, or a test harness can all build on this directly. Each
+  emission is an independent deep copy, not the same object handed to the
+  sink, so a subscriber mutating it can never change what was already (or
+  is about to be) shipped; the copy is skipped entirely when nothing is
+  subscribed, so the common unobserved case pays nothing for it.
+
+## Logging
+
+`UwtLoggerService` provides structured, leveled application logs, decoupled
+from any specific backend.
+
+- **No hard dependency on a sink**: logging's actual destination is the
+  application's `UwtLogApiProvider`, not `UwtTelemetrySink` — a sink is
+  only an optional enrichment source (session/user id correlation,
+  RUM error mirroring). An application that wants only structured logging,
+  with no scenarios, BI events, or RUM at all, is not required to configure
+  any sink to use it, unlike `UwtScenarioTelemetryService`/
+  `UwtBITelemetryService`, which still fail at bootstrap without one.
+- **Per-logger minimum levels**, overridable per named logger, so one noisy
+  area can run verbose while the rest of the app stays quiet.
+- **Delivery is entirely the application's `UwtLogApiProvider` policy**: the
+  library does no batching of its own — `send()` is called once per record,
+  as it is written. A provider that wants to batch, retry, or authenticate
+  does so on its own terms, with full knowledge of what its endpoint
+  accepts.
+- **Flush reliability at the end of a session**: a provider's optional
+  `flush()` is called on `pagehide`, on `visibilitychange` going hidden
+  (the case mobile browsers routinely produce by killing a backgrounded tab
+  without ever firing `pagehide`), and on teardown — so a provider that
+  chooses to queue its own records doesn't lose the last, still-pending
+  ones when the tab closes.
+- **Named loggers only.** `UwtLoggerService` is a factory: `getLogger(name)`
+  returns the one logger for that name — asking twice returns the same
+  instance — and the service has no unnamed `log`/`warn`/`error`. Every
+  record therefore carries the logger name that per-logger levels, the
+  `debugLogger` filter, `query({ logger })` and the console prefix key off.
+- **Correlation**: pass `correlationId: scenario.id` on a log call, and
+  frontend logs, frontend telemetry and backend logs can be reassembled into
+  one journey; `query({ correlationId })` reads the lines back across every
+  logger.
+  `correlationId` is scrubbed the same way every other string field on a
+  log record is — normally a plain scenario uuid, unaffected either way,
+  but nothing enforces that at runtime, so a caller accidentally binding
+  something sensitive there no longer bypasses redaction on its way to the
+  application's own log backend.
+- **`debugLogger` LocalStorage flag** mirrors records to the console
+  (optionally scoped to specific logger names), independent of production
+  configuration, so a deployed build can be inspected from DevTools without
+  a redeploy. Console lines from all three concerns are prefixed
+  `[<application>][<concern>]` rather than with this library's own name —
+  the same application-first rule already used for User Timing entry names,
+  so that in a composed page the realm a line came from is visible at a
+  glance instead of every realm sharing one indistinguishable prefix.
+- **`UwtNoopLogApiProvider`** is the explicit "no log backend": records are
+  discarded and `query()` finds none.
+- **`UWT_LOG_LEVEL_ORDER`** is exported, so a consumer's own log-query
+  filtering can compare levels without re-declaring the ordering.
+
+## Business/UX events
+
+`UwtBITelemetryService.track()` records discrete, durationless events —
+feature adoption, interaction analysis, funnel steps — supplied entirely by
+the application (the library defines no business vocabulary of its own).
+
+- **Double-fire absorption**: an identical event — same name, scenario
+  correlation, event-type override, feature, and metadata content — within
+  a 400ms window is collapsed, covering the common case of a handler bound
+  to both `click` and `keydown`. The dedup key includes metadata content
+  specifically so two different-but-same-named events in quick succession
+  (two different theme options picked back to back) are never mistaken for
+  a double-fire of one, and includes `eventType`/`feature` so two events
+  that only differ in those fields are never dropped as duplicates of each
+  other — the dedup key is built with `JSON.stringify`, not delimiter
+  joining, so e.g. `eventType: 'x|y', feature: 'z'` can no longer collide
+  with `eventType: 'x', feature: 'y|z'` the way naive `${a}|${b}` joining
+  would. The key cap's oldest-entry eviction now actually evicts the oldest
+  entry: a key re-emitted after its own dedup window elapses is deleted and
+  reinserted, not merely updated in place, so it moves to the front of the
+  `Map`'s iteration order the way its refreshed timestamp implies — without
+  this, a just-refreshed key could still look "oldest" by insertion order
+  and get evicted at capacity, letting an immediate duplicate straight
+  through right after. A duplicate hit refreshes the same position without
+  extending the window — otherwise a frequently-duplicated ("hot") key,
+  the only kind that never reaches that refresh, would stay pinned at
+  whichever position it held from its very first insertion and become the
+  prime eviction candidate precisely because it's actively in use.
+- **Monotonic timing**: the dedup window is measured against
+  `performance.now()`, not the wall clock, so it can't be wedged by a
+  backward time jump (an NTP correction, a device waking from sleep).
+- **The dedup key is built from redacted metadata**, not the raw values
+  passed to `track()` — `metadata` and `feature` are both scrubbed once,
+  up front, and the redacted result is reused for the key and the emitted
+  event alike. Building the key from raw values first would leave
+  sensitive content sitting as a `Map` key in this root service's memory
+  for the page lifetime, even though the emitted event was correctly
+  redacted all along.
+
+## PII redaction
+
+`uwt-telemetry-redact.util.ts` provides the shallow, synchronous redaction
+pass every metadata object, log message, and normalized error goes through
+before reaching a sink.
+
+- **Key-name denylist**, extensible per-application via
+  `extraKeyPatterns`, catches conventionally-named sensitive fields
+  (`password`, `token`, `secret`, `ssn`, …) regardless of value shape.
+- **Opt-in value-content scanning** (`scanValuePatterns`) additionally
+  redacts email addresses, credit-card numbers (Luhn-validated to avoid
+  false positives on unrelated digit runs), SSNs, IPv4 addresses, and phone
+  numbers found _inside_ a string value, not just under a suspicious key
+  name — closing the gap where PII lands under an innocuous key. Off by
+  default; each entity type is opted into individually. The `'phone'`
+  pattern covers NANP (US/Canada) numbers plus international-format numbers
+  from South Africa, Botswana, Ghana,
+  Kenya, Mauritius, Mozambique, Namibia, Seychelles, Tanzania, Uganda,
+  Zambia.
+- **URL scrubbing** strips query strings and fragments wherever a URL
+  appears in a string, including one embedded inside a longer message, not
+  only when the whole string is a bare path.
+- **Error normalization** (`uwtNormalizeError`) redacts stack traces and
+  messages, and specifically recognizes `HttpErrorResponse`-shaped objects
+  (structurally, without importing `@angular/common/http`) so an HTTP
+  failure's name/message survive normalization instead of being flattened
+  to a generic, unhelpful `Error`.
+- **`extraValueTransforms`** — application-supplied `(value: string) =>
+string` functions run on every string value after all pattern-based
+  scrubbing, an escape hatch for redaction logic no regex can express. A
+  throwing transform is skipped (logged in dev mode only), not fatal, and
+  never blocks the rest of the pipeline.
+- **Per-concern redaction toggle**: `withLogging`, `withScenarios`, and
+  `withBIEvents` each accept a `redact: boolean` (default `true`). Turning
+  it off for one concern disables only the _configurable_ PII scrubbing
+  (`extraKeyPatterns`, value-pattern scanning, URL-query stripping) for
+  that concern — the built-in credential denylist, size caps, error
+  normalization, and `extraValueTransforms` are a safety floor and stay on
+  regardless, via `uwtRedactConfigFor()`.
+- **Per-resolved-config isolation**: `extraKeyPatterns`/`extraValuePatterns`/`extraValueTransforms`
+  arrays are always copied fresh per `provideUwtTelemetry()` call, so
+  mutating one application's array can never leak into another's.
+
+## Sinks
+
+`UwtTelemetrySink` is the six-method abstraction every sink implements;
+applications inject the same services regardless of which is active.
+
+- **Exactly one destination, swappable.** Every destination — RUM,
+  broadcast, no-op, or one an application writes — is registered with
+  `provideUwtTelemetryDestination(SinkClass, { init? })`, which binds the
+  sink and runs its optional startup hook once, fail-open. Registering two
+  different destinations fails at bootstrap instead of silently keeping the
+  last. `uwtClassifyTelemetryEvent(eventType, payload)` tells a sink whether
+  it received a scenario record, a step event, a BI event or something
+  else, for any event namespace.
+- **Sign-out**: `setUserId(undefined)` or `setUserId('')` — an empty string
+  identifies nobody.
+
+- **RUM sink** (`UwtRumTelemetrySink`) wraps `aws-rum-web`, lazy-loaded so
+  the SDK is never in an application's bundle unless the RUM sink is
+  actually selected.
+  - **Two entry points.** `UwtRumTelemetrySink`, `provideUwtTelemetryRumSink`,
+    and everything `UwtRumCredentialsProvider`-shaped are exported from a
+    separate secondary entry point, `@absaoss-cps/ngx-ui-watchtower/rum`, not the main
+    `@absaoss-cps/ngx-ui-watchtower` barrel. Lazy-loading `aws-rum-web` at runtime prevents
+    it from being _bundled_ unless reached, but does not prevent it from
+    being _resolved_ — a static `import` is parsed as part of building the
+    module graph before any dead-code elimination runs, and a bundler must
+    resolve a dynamic `import()`'s specifier at build time to construct its
+    lazy chunk regardless of whether that branch ever executes. So keeping
+    `UwtRumTelemetrySink` out of the main entry point's module graph
+    entirely — not just tree-shaking it — is what lets an application
+    using only `provideUwtTelemetrySink('broadcast' | 'noop')` skip
+    installing `aws-rum-web` altogether. The cost: ng-packagr hardcodes
+    each entry point's TypeScript `rootDir` to that entry's own directory,
+    so `@absaoss-cps/ngx-ui-watchtower/rum` cannot reach the main entry's internal
+    `uwtSafe`/`uwtIsBrowser`/`uwtUuid`-style helpers by relative import;
+    rather than exporting them publicly just to satisfy that constraint, it
+    carries a small verbatim private copy of its own. See DESIGN.md §3,
+    "Entry points", for the full reasoning.
+  - Exposes the library's near-complete `aws-rum-web` configuration
+    surface (sampling, session behavior, dispatch/buffering, cookies,
+    page tracking, tracing) through `UwtRumAppMonitorConfig`, hand-typed so
+    no SDK types leak into the public API; every field with a real SDK
+    default is left unset unless the application overrides it, so the
+    library's defaults never drift from the SDK's own.
+  - Credentials come from an application-supplied
+    `UwtRumCredentialsProvider`; a failed or unreachable broker degrades to
+    a disabled-but-non-throwing sink rather than breaking the app.
+  - Credential refresh retries on failure instead of the refresh chain
+    dying permanently after one transient error, and is safe against the
+    destroy/async race where the sink is torn down while a refresh (or the
+    initial client construction) is still in flight. A refresh due to fire
+    immediately — already-expired or newly-issued credentials expiring
+    within the refresh skew window — falls back to the same bounded retry
+    delay instead of scheduling an immediate refresh, so a broker stuck
+    returning bad credentials can't tight-loop the sink.
+  - A credential refresh returning `null` disables RUM for the session, as
+    documented on `UwtRumCredentialsProvider.load()`: the client is torn
+    down — the SDK's own `disable()` is called on the live instance, not
+    just the reference dropped, so its listeners, plugins, and dispatch
+    timer actually stop — rather than continuing to collect with now-stale
+    credentials, and events recorded after that point are dropped rather
+    than silently queued forever in the pre-init buffer. The same teardown
+    runs on `ngOnDestroy()`, so an Angular-destroyed sink can't leave an
+    orphaned client still collecting (and, if the app is bootstrapped
+    again in the same page, duplicating telemetry).
+    The very first load honors the identical contract, not only a later
+    refresh — declining before the client is ever constructed, or the SDK
+    throwing anywhere in the init sequence (construction, or applying
+    identity/credentials to an already-constructed client), now also
+    disables the session and discards the pre-init buffer, instead of
+    leaving every subsequent `record()` call buffering into the capped
+    pre-init queue forever, a stale `flush()` warning about init being
+    unfinished when it had actually just been declined, or — for a throw
+    after construction — an orphaned, still-running client nothing ever
+    tore down.
+  - A bounded pre-init buffer means telemetry recorded before the RUM
+    client finishes initializing is not silently lost, and a dev-mode
+    warning fires specifically when the page unloads before that
+    resolution — not when the buffer is instead cleared because RUM was
+    declined or failed to initialize, which is a deliberate silent
+    discard, not an unload-mid-init loss. `record()`,
+    `recordPageView(pageId)`, and `recordError(error)` all buffer and
+    replay identically — an error mirrored from `UwtLoggerService` (or
+    reported directly) before the SDK loads is preserved, not dropped.
+    The three record/buffer/dispatch call sites share one internal
+    helper, so the guard can't drift between them.
+  - `UwtRumAppMonitorConfig.clientBuilder` is typed on `aws-rum-web`'s own
+    `ClientBuilder` parameter shape in full (`endpoint: URL, region:
+string, credentials?: ClientBuilderCredentials, compressionStrategy?:
+{ enabled: boolean }`) rather than `(...args: unknown[]) => unknown` —
+    the latter looks more
+    permissive but is actually the opposite: TypeScript checks function
+    parameters contravariantly, so a real, concretely-typed `ClientBuilder`
+    is not assignable to a parameter typed `unknown`, and the escape hatch
+    could never be used without a cast.
+- **Broadcast sink/host** (`UwtBroadcastTelemetrySink` /
+  `UwtTelemetryBroadcastHost`) let a micro-frontend fragment forward its
+  telemetry to the shell that owns the real RUM client, so a composed page
+  gets one AWS session and one event budget instead of one per fragment.
+  Session id **and** user id are synced two-way across every realm on the
+  channel — a user id set in one fragment is visible to a sibling
+  fragment's own logs, not just to the shell.
+  - The shell can safely run in more than one tab without double-recording
+    one event: `UwtTelemetryBroadcastHost` holds a Web Locks-based leader
+    election per channel, so only the elected tab records forwarded
+    telemetry. "Passive" describes the losing tab's _host_ only, not its
+    fragments — they keep forwarding on the same origin-wide channel
+    regardless, so their events are recorded (once, not lost) through the
+    _winning_ tab's AWS RUM client, attributed to that tab's session and
+    page rather than their own. If the same composed page could
+    realistically be open in more than one tab, give each tab's own
+    instance a unique channel name to avoid this — see README.md
+    "Multiple tabs of the same composed page" and DESIGN.md §13 "Known
+    limits". Fails open (elects
+    immediately) when the Locks API is unavailable, or if a lock request
+    itself is rejected — or throws synchronously instead of rejecting,
+    guarded the same way now that this runs unguarded inside an
+    `APP_INITIALIZER`, where an uncaught throw would otherwise crash
+    application bootstrap rather than just fail to elect a leader. A tab
+    destroyed while its own election is still
+    queued (never granted) no longer deadlocks the channel — it is
+    recognized as released the moment it is granted, and the lock passes
+    straight to the next queued tab instead of being held forever by one
+    that already closed.
+  - A genuine duplicate host provider (e.g. `provideUwtTelemetryBroadcastHost()`
+    supplied in both a root and a lazy-loaded module) is detected and warned
+    about via a small same-realm registry, not the `identity` broadcast —
+    the broadcast is origin-wide and can't tell a real duplicate apart from
+    a different, legitimate tab, which must never warn.
+  - Every message kind on the wire protocol is now field-validated, not
+    just its `kind` discriminant — `identity`'s `sessionId`/`userId` and a
+    forwarded error's `stack` are all type-checked before being trusted.
+    An `event`/`error` message's optional `metadata` is validated too, not
+    just passed through: any same-origin code can post to a
+    `BroadcastChannel` by name, and without this a payload with a nested
+    object/array value would reach a receiving sink's own sanitizer (e.g.
+    `UwtRumTelemetrySink.sanitize()`, which trusts the shape rather than
+    re-checking it) unvalidated.
+  - A forwarded error carries the originating fragment's identity through
+    the wire protocol; since the underlying AWS RUM client's `recordError`
+    has no metadata parameter to carry it, the RUM sink folds a
+    cross-realm origin into the error's `name` (e.g. `[fragment-app]
+TypeError`) rather than losing it and attributing every fragment error
+    to the shell.
+  - **Fragment logs go to the shell too.** `provideUwtTelemetrySink('broadcast')`
+    also binds `UWT_LOG_API_PROVIDER` to `UwtBroadcastLogApiProvider`, so a
+    fragment needs no log backend: records, `flush()` and `query()` — a
+    request answered by the shell's provider, or `[]` after a 10-second
+    timeout when no shell answers — all go through the shell. The host
+    requires a log provider of its own and fails at bootstrap without one;
+    in a realm that itself forwards, it warns and stays inactive rather than
+    looping; and it links a fragment's mirrored error to that fragment's log
+    record for the diagnostics popup.
+- **No-op sink** for local development and testing — telemetry calls
+  succeed and do nothing, so a fragment developed standalone never breaks
+  for lack of a shell to compose into. Every override keeps the abstract
+  `UwtTelemetrySink` method's full parameter list rather than narrowing to
+  zero arguments — TypeScript's bivariant method-override checking would
+  have allowed the narrower form to still satisfy `extends
+UwtTelemetrySink`, but it would make the _concrete_ `UwtNoopTelemetrySink`
+  type itself reject a normal call like `.record(type, payload)`.
+  `getUserId()` retains what `setUserId()` was last given, rather than
+  always reporting `undefined` — the one piece of state this sink can't
+  just discard along with everything else, since `UwtLoggerService` reads
+  it for user correlation on every log record, and logs still reach a real
+  `UWT_LOG_API_PROVIDER` even in noop mode.
+
+## Diagnostics popup
+
+`@absaoss-cps/ngx-ui-watchtower/diagnostics` adds an in-app window that
+lists, live, every BI event, scenario event and log record the app hands to
+its destinations — without DevTools, in every environment.
+
+- Opened with Shift+E+I on every platform. The keys are
+  configurable, or can be switched off in favour of `open()` from the app's
+  own UI; `enabled` limits who can open it at all.
+- Three sections — BI, scenario, logging — each with its own search, field
+  filters and JSON download or copy; pause and clear apply to all three. At
+  most 500 events per section, discarded when the popup closes.
+- Built from cps-ui-kit components, non-modal so the app stays usable
+  beside it, light theme only for now.
+- Fed by `UwtTelemetryMonitor` (main entry): every hand-off site publishes
+  the object it just sent, after the hand-off, deep-copied, and only while
+  something is subscribed — otherwise it costs one check per event. It never
+  sends anything itself.
+
+## Configuration & providers
+
+- `provideUwtTelemetry(identity, ...features)` takes the application's
+  identity (`application`/`environment`/`version`, event namespace) as a
+  mandatory first argument, composed with optional, independently
+  omittable `withLogging(...)`, `withScenarios(...)`, `withBIEvents(...)`,
+  `withRedaction(...)` features — mirroring Angular's own
+  `provideHttpClient(withInterceptors(...))` convention. Each concern gets
+  its own DI token (`UWT_LOG_CONFIG`, `UWT_SCENARIO_TELEMETRY_CONFIG`,
+  `UWT_BI_TELEMETRY_CONFIG`, `UWT_REDACT_CONFIG`, plus `UWT_TELEMETRY_IDENTITY` for
+  identity), so a consumer can override one concern through plain DI
+  substitution without touching the others. BI event tracking (dedup
+  window and key cap) is configurable via `withBIEvents(...)` rather than
+  fixed at hardcoded constants.
+- `provideUwtTelemetrySink('broadcast' | 'noop')`,
+  `provideUwtTelemetryRumSink()` (from `@absaoss-cps/ngx-ui-watchtower/rum`), and
+  `provideUwtTelemetryBroadcastHost()` select the transport explicitly —
+  there is no default destination, so an app can never look wired up while
+  silently shipping nothing, and there is never more than one.
+- Scenario, step, logger, and BI event names are typed as a closed
+  vocabulary via TypeScript module augmentation
+  (`declare module '@absaoss-cps/ngx-ui-watchtower'`), so a typo in a name is a compile error
+  instead of a second, silently incomplete metric series.
+
+---
+
+## `composition` integration
+
+Wires the library into real, running pages rather than only into unit
+tests. `AppTelemetryService` (new) owns route-navigation scenario tracking
+and application-level BI/log calls, and logs `'Application started'`
+(with the browser's `navigator.language`, when running in one — `start()`
+is called unconditionally from `AppComponent`, before its own
+`isPlatformBrowser` check, so this is `isPlatformBrowser`-gated internally
+too, to stay safe if `composition` ever gains an SSR target) once
+tracking begins to bound the session in the log stream; the page-level
+integrations below build on it:
+
+- **Route navigation** — every router navigation is a scenario
+  (`resolve-route` → `activate`), giving concurrent/superseded navigations
+  real coverage. A sidebar nav-link click is recorded via
+  `markNavigationIntent()` and backdates the scenario's start to the click
+  itself rather than the router's own (slightly later) `NavigationStart`,
+  so event-handling/guard/change-detection time is counted as part of the
+  wait the user actually experienced. A route landed on without its tab
+  segment (e.g. bare `/checkbox`) is redirected to `examples` by a
+  `CanMatch` guard (`defaultTabRedirectGuard`); since any guard-returned
+  redirect restarts navigation under a new id, `AppTelemetryService`
+  recognizes that specific restart (`NavigationCancel`'s
+  `code === NavigationCancellationCode.Redirect`) and continues the same
+  scenario into the follow-up navigation instead of opening a second one —
+  one user-visible navigation still produces exactly one scenario record.
+  `NavigationSkipped` (a terminal event, notably for same-URL navigation)
+  is handled too: it clears any pending click-intent and settles any
+  scenario already opened for that navigation id, so a skipped navigation
+  can't leave a stale intent around to wrongly backdate the _next_,
+  unrelated navigation within the 2s freshness window.
+- **File upload** — processing scenarios are tracked per upload widget
+  (keyed by filename), so two `<cps-file-upload>` widgets sharing the same
+  processing callback can be interacted with independently without one's
+  cancel affecting the other's in-flight scenario; a scenario still
+  processing when the page navigates away is cancelled, not leaked. Every
+  widget on the page — including the one demonstrating a failing callback
+  — wires `(fileProcessingCancelled)` to cancel its own scenario; without
+  it, clicking that widget's cancel button unsubscribes the processing
+  pipeline before the scenario ever learns the user cancelled, leaving it
+  to self-settle as a `timeout` 30s later instead of an immediate,
+  accurate cancellation. A successful upload settles its scenario directly
+  in the processing pipeline's own `next`/`error` handlers rather than via
+  `traceScenario`'s stream-completion hook: `CpsFileUploadComponent` wraps
+  the callback's observable in `take(1)`, which unsubscribes right after
+  the first value — before the source's own `complete` notification would
+  reach a downstream `tap()` — so a successful upload would otherwise never
+  call `scenario.complete()` and would sit active until its own timeout.
+- **Autocomplete** — search scenarios per widget (single/multi), with
+  supersede-on-new-query cancellation; a search or validation error is
+  caught, settles the scenario as failed, and leaves the search pipeline
+  able to serve future queries rather than dying after the first failure.
+  Selecting an option to validate follows the same supersede pattern: a
+  newer selection cancels a still-running validation via `switchMap`
+  rather than the two running independently and clobbering each other's
+  state, and the validating indicator is reliably cleared on both the
+  success and error paths. The `reason: 'superseded'` on that cancellation
+  is threaded through `traceScenario`'s `cancelOutcome`, not a direct
+  `scenario.cancel(...)` call — the latter would be a no-op here, since
+  `switchMap` already settles the prior scenario before a manual cancel in
+  the new projector could run.
+- **Table lazy-load** — server-side page fetches are tracked as scenarios,
+  cancelling a superseded in-flight load. A destroy landing between the
+  load's queued microtask and the timer it schedules is guarded against
+  explicitly, so a page navigated away from doesn't have its (already
+  unmounted) state mutated once that timer fires.
+- **Sidebar search** — reports a debounced BI event once typing pauses,
+  not per keystroke, so the RUM session's event budget isn't spent on
+  intermediate keystrokes.
+- **Theme options / code-example copy / sidebar collapse** — BI events for
+  feature adoption tracking (`theme_option_changed`, `code_copied`,
+  `sidebar_toggled`).
+- **Bare `console.warn` calls replaced with the structured logger** in
+  three places — a route missing a `<title>` (`routing` logger, offending
+  URL as context), a code example missing both `htmlCode` and `tsCode`,
+  and a failed clipboard-copy — each now reports through `UwtLoggerService`
+  instead of an unstructured console line.
+- Every component above cancels its own in-flight scenario(s) on
+  `ngOnDestroy`, so navigating away mid-journey doesn't leave the scenario
+  registry (or the RUM event budget) accumulating abandoned entries.
+- `resolveDeploymentEnvironment()` — this workspace has no
+  `environment.ts`/`fileReplacements` build variant, so
+  `provideUwtTelemetry`'s `environment` is derived from
+  `window.location.hostname` at bootstrap instead of a hardcoded literal:
+  recognized local-dev hostnames (`localhost`, `127.0.0.1`, `[::1]`,
+  `0.0.0.0`) resolve to `'development'`, everything else to `'production'`.
+  The classification rule (`classifyHostname`) is a pure function, unit
+  tested directly; the thin `window`-reading wrapper around it is not
+  meaningfully testable under jsdom and isn't.
+- `AppLogApiProvider` — an in-memory ring-buffered log backend standing in
+  for a real endpoint, with a browser-side JSON export. The download's
+  temporary anchor is created before, and removed in a `finally` alongside
+  the object URL — not both inside the same `try` after `.click()` — so a
+  `click()` that throws can't leave the anchor stuck in the DOM forever.
+- `AppRumCredentialsProvider` — the credentials-broker integration point,
+  requesting `/rum/init` with `cache: 'no-store'` since the response
+  carries live, temporary AWS credentials that must never be served stale
+  from the browser's HTTP cache.
+- `telemetry.schema.ts` — this application's declared scenario/step/logger
+  vocabulary.
+- **Diagnostics popup** — `provideUwtTelemetryDiagnostics()` in
+  `app.module.ts`, so the popup opens on every page with the shortcut.
+
+## Documentation
+
+- **`README.md`** — a short quick guide: setup, scenarios, BI events,
+  logging, the signed-in user, privacy, micro-frontends, debugging and the
+  diagnostics popup, testing.
+- **`DESIGN.md`** — the full development design in 14 sections: goals,
+  architecture and public API, data model, lifecycle, AWS mapping (verified
+  against the installed `aws-rum-web` source rather than its public
+  documentation), metrics, correlation, privacy, configuration, error
+  handling, usage, micro-frontends, and how to connect an OpenTelemetry
+  destination later.
+- **`telemetry-trace.capture.spec.ts`** (`projects/composition/src/app/`)
+  — drives `composition`'s real services with
+  `debugScenario`/`debugLogger`/`debugBI` enabled and captures the exact
+  payloads handed to the sink and the log API provider, including
+  synthetic cases (`incomplete`, `exceededStepsLimit`, `mirrorErrorsToRum`,
+  redaction) as a concrete, reviewable example of the emitted payload
+  shapes described in `DESIGN.md`. Regenerate with `npm run trace:telemetry`;
+  the JSON it produces isn't committed (see `.gitignore`).
+
+## Workspace wiring
+
+- `angular.json` gains the `@absaoss-cps/ngx-ui-watchtower` library project (ng-packagr
+  build, dev/production `tsconfig` split); `tsconfig.json` adds it to the
+  workspace's project references.
+- `projects/ngx-ui-watchtower/rum/ng-package.json` and
+  `projects/ngx-ui-watchtower/diagnostics/ng-package.json` declare the
+  `/rum` and `/diagnostics` secondary entry points (ng-packagr discovers it
+  automatically by scanning the primary package's directory for nested
+  `ng-package.json` files — no separate `package.json` or `angular.json`
+  project entry is needed for a secondary entry point).
+- `jest.config.js` maps all three specifiers — `@absaoss-cps/ngx-ui-watchtower`,
+  `…/rum` and `…/diagnostics` —
+  import specifiers to source, the same way `cps-ui-kit` already is, so
+  tests and the IDE resolve them without a prior build; `tsconfig.json`'s
+  `"paths"` gets the matching
+  entries.
+- The package build resolves cps-ui-kit from its built output
+  (`dist/cps-ui-kit`, a `paths` entry in the library's `tsconfig.lib.json`),
+  so the kit stays an external dependency rather than being compiled in —
+  which is why `build:telemetry` builds cps-ui-kit first.
+- `projects/ngx-ui-watchtower/rum/tsconfig.lib.json` /
+  `tsconfig.spec.json` (new) and their addition to the root `tsconfig.json`'s
+  `"references"` — ng-packagr generates its own tsconfig per entry point
+  internally and doesn't need these, but without them nothing covered the
+  `rum/` directory as a TypeScript project, so `tsc --build` and the IDE's
+  language service couldn't resolve its `@absaoss-cps/ngx-ui-watchtower` import at all.
+- CI (`.github/workflows/cps-shared-ui-checkers.yml`) gains a
+  `build:telemetry` step and a `test:ngx-ui-watchtower` step alongside the
+  existing `cps-ui-kit` ones, plus a `build:documentation` step building
+  `composition` itself — the one thing in this repo that actually imports
+  `@absaoss-cps/ngx-ui-watchtower`/`@absaoss-cps/ngx-ui-watchtower/rum` and exercises the real, bundled
+  integration; without it, a secondary-entry-point resolution failure or
+  other integration break could merge with every other check green.
+- Root `package.json` gains `build:telemetry`/`test:ngx-ui-watchtower` scripts
+  and `aws-rum-web` as a dependency (for `composition`'s real use of the RUM
+  sink); `projects/ngx-ui-watchtower/package.json` /
+  `projects/ngx-ui-watchtower/ng-package.json` declare the new library's own
+  metadata, peer dependencies (`cps-ui-kit`, `@angular/forms` and
+  `@angular/animations` optional, for the popup), `publishConfig: { access:
+"public" }` for the scoped npm package, and ng-packagr output
+  configuration.
+- `projects/composition/tsconfig.app.json` gains `skipLibCheck: true` —
+  needed because `aws-rum-web` pulls in `rrweb` typings that don't compile
+  under this workspace's TypeScript settings — and an explicit `rootDir:
+"../../"`, matching its sibling `tsconfig.spec.json`'s existing setting;
+  without it, `composition`'s own path-mapped imports of `cps-ui-kit`/
+  `@absaoss-cps/ngx-ui-watchtower` source (outside its own directory) violated TypeScript's
+  rootDir check. `projects/composition/tsconfig.json` — the plain
+  `tsconfig.json` VS Code's language service actually resolves first when a
+  file is opened, separate from `tsconfig.app.json` — gets both the same
+  `rootDir` fix and `skipLibCheck: true`, for the identical reasons.
+
+## Testing
+
+- **822 tests** in `@absaoss-cps/ngx-ui-watchtower`, **266 tests** in
+  `composition`, all passing.
+- **Playwright**: 8 end-to-end tests for the diagnostics popup
+  (`playwright/composition/telemetry-diagnostics.spec.ts`) and 3
+  accessibility tests for it in `accessibility-composition.spec.ts`.
+- Lint clean across the workspace.
+- Both production builds (`@absaoss-cps/ngx-ui-watchtower` library build,
+  `composition` documentation-site build) succeed with no compiler or CommonJS warnings.
+- The test suite includes mutation-checked coverage of every
+  concurrency/lifecycle-sensitive path (destroy-time cancellation,
+  credential-refresh retry with 32-bit overflow protection, the scenario
+  timeout rescheduling itself (rather than settling early) when a clamped
+  32-bit-overflow-protection hop fires before the real configured deadline,
+  the mark-cleanup fallback timer sharing that same overflow protection
+  (rescheduling the same way rather than clearing marks early), `elapsed`'s host-page-relative clock, cross-realm identity sync, redaction ordering,
+  dedup keying, RxJS operator stream settlement, the leader-election
+  destroy-while-queued race, `settled$`'s copy-on-emit, the dedup key-cap
+  eviction-ordering fix, a successful upload settling under `take(1)`,
+  `traceScenario`'s cancel-on-unsubscribe path, the dedup key's
+  `JSON.stringify` collision fix, `UwtNoopTelemetrySink`'s `getUserId()`
+  retention, the download anchor surviving a throwing `click()`, the
+  initial-load disable-flag parity, the dedup cache's hot-key eviction
+  fix, the leader election's synchronous-throw fail-open, per-call
+  `extraValueTransforms` isolation, `correlationId` scrubbing, the
+  pre-init buffer discard (not just a stopped future-buffering) on a
+  declined or failed init, the aggregate-freeze-at-settlement fix, the
+  BI dedup key being built from redacted rather than raw metadata,
+  `maxKeys` being re-applied to combined scenario/step metadata rather
+  than to each independently-capped bag before merging, the same-realm
+  duplicate-host registry, `traceScenario`'s `cancelOutcome` winning
+  the race against a `switchMap`'s own prior-subscription teardown, the
+  broadcast wire protocol's `metadata` field being validated as flat
+  primitives rather than passed through unchecked, the duplicate-host
+  diagnostic warning itself being fail-open (a patched, throwing
+  `console.warn` can't crash host construction), and
+  `AppTelemetryService`'s `NavigationSkipped` handling clearing a stale
+  click-intent that would otherwise backdate an unrelated navigation) —
+  each such test
+  was verified to actually fail when its corresponding guard is removed,
+  not only to pass against the current implementation.
+  `UwtRumAppMonitorConfig.clientBuilder`'s completed parameter signature is
+  verified two ways: a runtime test whose inline `clientBuilder`
+  implementation leaves `credentials`/`compressionStrategy` unannotated,
+  relying on the field's own type for contextual inference; and, like
+  `UwtNoopTelemetrySink`'s preserved method signatures, at the type level
+  (`tsc --build`) — since ts-jest itself runs with `diagnostics: false`,
+  neither jest nor this workspace's own `npm run typecheck` would catch a
+  regression here on its own, see "Known gaps" below.
+
+### Known gaps
+
+- **`npm run typecheck` (`tsc --noEmit`) is currently a no-op.** The root
+  `tsconfig.json` is solution-style — `"files": []` plus per-project
+  `"references"` — and plain `tsc --noEmit` only checks a config's own
+  `"files"`/`"include"`, not its references; following references needs
+  `tsc --build`. Confirmed directly: with a real type error introduced
+  (temporarily, while verifying the `clientBuilder` fix above), `npm run
+typecheck` still exited `0` with no output. `tsc --build` does catch it,
+  but currently also reports roughly 100 pre-existing errors across the
+  workspace unrelated to this PR (`aws-rum-web`'s bundled `rrweb` typings;
+  ambient Node globals `@types/node` would otherwise supply, since this
+  workspace's `tsconfig`s deliberately omit it — see `@absaoss-cps/ngx-ui-watchtower`'s own
+  `types: ["jest"]` convention). Pre-existing, not introduced by this PR;
+  switching the script to `tsc --build` would immediately need triaging
+  those separately. Left as-is here; flagging for a follow-up.
diff --git a/temp_docs/CHANGES_DESC_LIBRARY_ONLY.md b/temp_docs/CHANGES_DESC_LIBRARY_ONLY.md
new file mode 100644
index 0000000..d09b3b6
--- /dev/null
+++ b/temp_docs/CHANGES_DESC_LIBRARY_ONLY.md
@@ -0,0 +1,583 @@
+# Add `@absaoss-cps/ngx-ui-watchtower`: a reusable Angular telemetry library
+
+## Summary
+
+Adds `@absaoss-cps/ngx-ui-watchtower`, a new Angular library providing application logging,
+scenario (user-journey) health telemetry, business/UX event tracking, and
+PII redaction, with pluggable transport sinks — AWS CloudWatch RUM,
+cross-realm broadcast (for micro-frontend compositions), and a no-op sink
+for local development. Nothing in the library is specific to any one
+application: event names, configuration, and AWS credentials are all
+supplied by the host app.
+
+Each app sends to exactly one destination, registered with
+`provideUwtTelemetryDestination`; swapping it — for a future OpenTelemetry
+exporter, say — is one provider line, with no change to application code.
+An optional in-app diagnostics popup shows, live, everything the app hands
+to its destinations. The package is published publicly on npm as
+`@absaoss-cps/ngx-ui-watchtower`.
+
+The library has a single real runtime dependency, `tslib`. `aws-rum-web`
+is an optional peer dependency, needed only when the RUM sink is used, so
+an application using only the broadcast or no-op sink never pulls in the
+AWS SDK. This is enforced structurally, not just by convention: the RUM
+sink and its providers live in a separate secondary entry point,
+`@absaoss-cps/ngx-ui-watchtower/rum` (see "Two entry points" under Sinks below), so an
+application that never imports from it never needs `aws-rum-web`
+resolvable at build time either. The diagnostics popup is split out the same
+way, into `@absaoss-cps/ngx-ui-watchtower/diagnostics`: it is built from
+cps-ui-kit, an optional peer dependency nothing else in the library touches.
+
+This branch adds the library on its own — no consuming application is
+wired to it here, so every capability below is covered by the library's
+own unit tests rather than by a host app exercising it.
+
+`projects/ngx-ui-watchtower/README.md` is a short quick guide.
+`projects/ngx-ui-watchtower/DESIGN.md` is the full development design:
+architecture, the reasoning behind each decision, a line-by-line verification
+of every AWS RUM SDK capability claim (checked against the installed
+`aws-rum-web@3.2.1` source, not just its docs), and how a future
+OpenTelemetry destination would be connected.
+
+---
+
+## Scenario telemetry
+
+`UwtScenario` / `UwtScenarioTelemetryService` model one user journey — load
+customer data, submit a form, run a search — as an object with steps,
+aggregates, and a terminal outcome.
+
+- **Five terminal statuses**: `success`, `failure`, `abandoned`,
+  `incomplete`, `timeout`. There is no "in progress" status — a running
+  scenario simply has none yet (`scenario.status` is `undefined` until
+  settlement); `scenario.isSettled` answers whether it's done. Settling is
+  absorbing: a second `complete()`/`fail()`/etc. after the first is a
+  documented no-op, not a throw.
+- **Automatic step management**: opening a step closes the previous one as
+  completed; steps carry redacted metadata, an optional message, and a
+  normalized error on failure. `steps[]` always has at least two entries
+  (synthetic `scenario-start`/`scenario-end` boundary markers), even for a
+  scenario that never calls `.step()`.
+- **Aggregates** (`aggregateStart`/`aggregateEnd`) sum a repeatedly-invoked
+  operation (a formatter run per row, a validator per field) into one total
+  instead of one step per call, so a hot loop doesn't blow through the
+  step budget or the record's own size.
+- **Per-scenario timeout** (default 30s, configurable per call or globally,
+  `0` disables): a scenario that never settles auto-settles as `timeout`
+  rather than silently disappearing from the data.
+- **Page-unload safety**: every in-flight scenario is settled as
+  `abandoned` (`page-hidden`) on `pagehide`, with the sink flushed via
+  `sendBeacon`. Concurrent scenarios (a dashboard loading three panels at
+  once) are independent — there is no ambient "current scenario."
+- **User Timings integration**: optional `performance.mark`/`measure`
+  entries on the DevTools Performance track, gated by config or a
+  LocalStorage debug flag. Marks are cleared at settle; a scenario with its
+  timeout explicitly disabled and no navigation to clean it up is still
+  guarded by an independent mark-cleanup fallback, so marks can't
+  accumulate in the Performance buffer for the life of the page.
+- **Timers stay out of Angular's zone.** A scenario's timeout and the
+  mark-cleanup fallback are scheduled outside the zone, so a running
+  scenario never holds the application unstable (`whenStable`, hydration)
+  for the length of its timeout. A configured duration longer than
+  `setTimeout`'s 32-bit limit is honoured by rescheduling, for both.
+- **`elapsed` (the scenario and step timeline-position field) is built from
+  the _host_ page's clock, not the local realm's.** It exists specifically
+  so events from one session can be lined up against each other — but a
+  fragment's own `performance.now()` runs from a later `timeOrigin` than
+  the shell's, so a per-realm value would silently put shell- and
+  fragment-originated records on two different, non-comparable timelines
+  despite sharing one session id. `uwtElapsedNow()` prefers
+  `top.performance.now()`, mirroring the same fix already applied to User
+  Timing marks above, falling back to the local realm's clock if `top`
+  throws (cross-origin, sandboxed).
+- **`maxKeys` is enforced on the combined metadata, not each bag in
+  isolation.** `setData()`, an outcome's metadata at settle, and a step's
+  initial plus closing metadata are all merged through a shared helper
+  that re-applies the cap to the merged result — a key already present is
+  always updatable, but a genuinely new key is dropped once the combined
+  count reaches `maxKeys`. Capping each bag independently before merging
+  (the previous behavior) let the total grow past the configured bound.
+- **`toRecord()`** is public and safe to call mid-flight — its `status`
+  field is honestly typed as absent until the scenario has actually
+  settled, and its returned `steps` and `metadata` are deep-cloned, not
+  just a fresh array shell around shared objects, so mutating a mid-flight
+  snapshot (including a nested step's own `metadata`) can never change
+  what's later emitted at settlement.
+- **`complete()`/`fail()`/`incomplete()`/`cancel()` share one signature** —
+  `(outcome?: UwtScenarioOutcome)` — so custom metadata, status codes, a
+  `reason`/`message`, and (for `fail()`) the thrown `error` are all
+  available identically regardless of which one is called.
+- **`traceScenario()`** RxJS pipeable operator bridges Observable streams
+  directly to scenario completion/failure with optional outcome derivation,
+  with the outcome mapper itself guarded so a throwing mapper still settles
+  the scenario (as a success with no outcome) instead of crashing the
+  subscription. A teardown that isn't a `complete`/`error` — a superseding
+  `switchMap`, `takeUntilDestroyed()`, a manual unsubscribe — cancels the
+  scenario instead of leaving it to self-settle as a `timeout`; guarded by
+  `isSettled` so it never fires again after a real settle. That
+  cancellation carries no `reason` unless `cancelOutcome` is supplied — a
+  caller's own `scenario.cancel({ reason })` from a `switchMap` projector
+  is always too late, since `switchMap` unsubscribes (and thereby settles)
+  the prior inner Observable before the new projector ever runs.
+- **`UwtScenarioTelemetryService.settled$`** is a public `Observable` of
+  every scenario as it settles, plus `.find(scenarioId)` and
+  `.getActive()` for introspecting in-flight scenarios — a debug overlay,
+  a retry prompt, or a test harness can all build on this directly. Each
+  emission is an independent deep copy, not the same object handed to the
+  sink, so a subscriber mutating it can never change what was already (or
+  is about to be) shipped; the copy is skipped entirely when nothing is
+  subscribed, so the common unobserved case pays nothing for it.
+
+## Logging
+
+`UwtLoggerService` provides structured, leveled application logs, decoupled
+from any specific backend.
+
+- **No hard dependency on a sink**: logging's actual destination is the
+  application's `UwtLogApiProvider`, not `UwtTelemetrySink` — a sink is
+  only an optional enrichment source (session/user id correlation,
+  RUM error mirroring). An application that wants only structured logging,
+  with no scenarios, BI events, or RUM at all, is not required to configure
+  any sink to use it, unlike `UwtScenarioTelemetryService`/
+  `UwtBITelemetryService`, which still fail at bootstrap without one.
+- **Per-logger minimum levels**, overridable per named logger, so one noisy
+  area can run verbose while the rest of the app stays quiet.
+- **Delivery is entirely the application's `UwtLogApiProvider` policy**: the
+  library does no batching of its own — `send()` is called once per record,
+  as it is written. A provider that wants to batch, retry, or authenticate
+  does so on its own terms, with full knowledge of what its endpoint
+  accepts.
+- **Flush reliability at the end of a session**: a provider's optional
+  `flush()` is called on `pagehide`, on `visibilitychange` going hidden
+  (the case mobile browsers routinely produce by killing a backgrounded tab
+  without ever firing `pagehide`), and on teardown — so a provider that
+  chooses to queue its own records doesn't lose the last, still-pending
+  ones when the tab closes.
+- **Named loggers only.** `UwtLoggerService` is a factory: `getLogger(name)`
+  returns the one logger for that name — asking twice returns the same
+  instance — and the service has no unnamed `log`/`warn`/`error`. Every
+  record therefore carries the logger name that per-logger levels, the
+  `debugLogger` filter, `query({ logger })` and the console prefix key off.
+- **Correlation**: pass `correlationId: scenario.id` on a log call, and
+  frontend logs, frontend telemetry and backend logs can be reassembled into
+  one journey; `query({ correlationId })` reads the lines back across every
+  logger.
+  `correlationId` is scrubbed the same way every other string field on a
+  log record is — normally a plain scenario uuid, unaffected either way,
+  but nothing enforces that at runtime, so a caller accidentally binding
+  something sensitive there no longer bypasses redaction on its way to the
+  application's own log backend.
+- **`debugLogger` LocalStorage flag** mirrors records to the console
+  (optionally scoped to specific logger names), independent of production
+  configuration, so a deployed build can be inspected from DevTools without
+  a redeploy. Console lines from all three concerns are prefixed
+  `[<application>][<concern>]` rather than with this library's own name —
+  the same application-first rule already used for User Timing entry names,
+  so that in a composed page the realm a line came from is visible at a
+  glance instead of every realm sharing one indistinguishable prefix.
+- **`UwtNoopLogApiProvider`** is the explicit "no log backend": records are
+  discarded and `query()` finds none.
+- **`UWT_LOG_LEVEL_ORDER`** is exported, so a consumer's own log-query
+  filtering can compare levels without re-declaring the ordering.
+
+## Business/UX events
+
+`UwtBITelemetryService.track()` records discrete, durationless events —
+feature adoption, interaction analysis, funnel steps — supplied entirely by
+the application (the library defines no business vocabulary of its own).
+
+- **Double-fire absorption**: an identical event — same name, scenario
+  correlation, event-type override, feature, and metadata content — within
+  a 400ms window is collapsed, covering the common case of a handler bound
+  to both `click` and `keydown`. The dedup key includes metadata content
+  specifically so two different-but-same-named events in quick succession
+  (two different theme options picked back to back) are never mistaken for
+  a double-fire of one, and includes `eventType`/`feature` so two events
+  that only differ in those fields are never dropped as duplicates of each
+  other — the dedup key is built with `JSON.stringify`, not delimiter
+  joining, so e.g. `eventType: 'x|y', feature: 'z'` can no longer collide
+  with `eventType: 'x', feature: 'y|z'` the way naive `${a}|${b}` joining
+  would. The key cap's oldest-entry eviction now actually evicts the oldest
+  entry: a key re-emitted after its own dedup window elapses is deleted and
+  reinserted, not merely updated in place, so it moves to the front of the
+  `Map`'s iteration order the way its refreshed timestamp implies — without
+  this, a just-refreshed key could still look "oldest" by insertion order
+  and get evicted at capacity, letting an immediate duplicate straight
+  through right after. A duplicate hit refreshes the same position without
+  extending the window — otherwise a frequently-duplicated ("hot") key,
+  the only kind that never reaches that refresh, would stay pinned at
+  whichever position it held from its very first insertion and become the
+  prime eviction candidate precisely because it's actively in use.
+- **Monotonic timing**: the dedup window is measured against
+  `performance.now()`, not the wall clock, so it can't be wedged by a
+  backward time jump (an NTP correction, a device waking from sleep).
+- **The dedup key is built from redacted metadata**, not the raw values
+  passed to `track()` — `metadata` and `feature` are both scrubbed once,
+  up front, and the redacted result is reused for the key and the emitted
+  event alike. Building the key from raw values first would leave
+  sensitive content sitting as a `Map` key in this root service's memory
+  for the page lifetime, even though the emitted event was correctly
+  redacted all along.
+
+## PII redaction
+
+`uwt-telemetry-redact.util.ts` provides the shallow, synchronous redaction
+pass every metadata object, log message, and normalized error goes through
+before reaching a sink.
+
+- **Key-name denylist**, extensible per-application via
+  `extraKeyPatterns`, catches conventionally-named sensitive fields
+  (`password`, `token`, `secret`, `ssn`, …) regardless of value shape.
+- **Opt-in value-content scanning** (`scanValuePatterns`) additionally
+  redacts email addresses, credit-card numbers (Luhn-validated to avoid
+  false positives on unrelated digit runs), SSNs, IPv4 addresses, and phone
+  numbers found _inside_ a string value, not just under a suspicious key
+  name — closing the gap where PII lands under an innocuous key. Off by
+  default; each entity type is opted into individually. The `'phone'`
+  pattern covers NANP (US/Canada) numbers plus international-format numbers
+  from South Africa, Botswana, Ghana,
+  Kenya, Mauritius, Mozambique, Namibia, Seychelles, Tanzania, Uganda,
+  Zambia.
+- **URL scrubbing** strips query strings and fragments wherever a URL
+  appears in a string, including one embedded inside a longer message, not
+  only when the whole string is a bare path.
+- **Error normalization** (`uwtNormalizeError`) redacts stack traces and
+  messages, and specifically recognizes `HttpErrorResponse`-shaped objects
+  (structurally, without importing `@angular/common/http`) so an HTTP
+  failure's name/message survive normalization instead of being flattened
+  to a generic, unhelpful `Error`.
+- **`extraValueTransforms`** — application-supplied `(value: string) =>
+string` functions run on every string value after all pattern-based
+  scrubbing, an escape hatch for redaction logic no regex can express. A
+  throwing transform is skipped (logged in dev mode only), not fatal, and
+  never blocks the rest of the pipeline.
+- **Per-concern redaction toggle**: `withLogging`, `withScenarios`, and
+  `withBIEvents` each accept a `redact: boolean` (default `true`). Turning
+  it off for one concern disables only the _configurable_ PII scrubbing
+  (`extraKeyPatterns`, value-pattern scanning, URL-query stripping) for
+  that concern — the built-in credential denylist, size caps, error
+  normalization, and `extraValueTransforms` are a safety floor and stay on
+  regardless, via `uwtRedactConfigFor()`.
+- **Per-resolved-config isolation**: `extraKeyPatterns`/`extraValuePatterns`/`extraValueTransforms`
+  arrays are always copied fresh per `provideUwtTelemetry()` call, so
+  mutating one application's array can never leak into another's.
+
+## Sinks
+
+`UwtTelemetrySink` is the six-method abstraction every sink implements;
+applications inject the same services regardless of which is active.
+
+- **Exactly one destination, swappable.** Every destination — RUM,
+  broadcast, no-op, or one an application writes — is registered with
+  `provideUwtTelemetryDestination(SinkClass, { init? })`, which binds the
+  sink and runs its optional startup hook once, fail-open. Registering two
+  different destinations fails at bootstrap instead of silently keeping the
+  last. `uwtClassifyTelemetryEvent(eventType, payload)` tells a sink whether
+  it received a scenario record, a step event, a BI event or something
+  else, for any event namespace.
+- **Sign-out**: `setUserId(undefined)` or `setUserId('')` — an empty string
+  identifies nobody.
+
+- **RUM sink** (`UwtRumTelemetrySink`) wraps `aws-rum-web`, lazy-loaded so
+  the SDK is never in an application's bundle unless the RUM sink is
+  actually selected.
+  - **Two entry points.** `UwtRumTelemetrySink`, `provideUwtTelemetryRumSink`,
+    and everything `UwtRumCredentialsProvider`-shaped are exported from a
+    separate secondary entry point, `@absaoss-cps/ngx-ui-watchtower/rum`, not the main
+    `@absaoss-cps/ngx-ui-watchtower` barrel. Lazy-loading `aws-rum-web` at runtime prevents
+    it from being _bundled_ unless reached, but does not prevent it from
+    being _resolved_ — a static `import` is parsed as part of building the
+    module graph before any dead-code elimination runs, and a bundler must
+    resolve a dynamic `import()`'s specifier at build time to construct its
+    lazy chunk regardless of whether that branch ever executes. So keeping
+    `UwtRumTelemetrySink` out of the main entry point's module graph
+    entirely — not just tree-shaking it — is what lets an application
+    using only `provideUwtTelemetrySink('broadcast' | 'noop')` skip
+    installing `aws-rum-web` altogether. The cost: ng-packagr hardcodes
+    each entry point's TypeScript `rootDir` to that entry's own directory,
+    so `@absaoss-cps/ngx-ui-watchtower/rum` cannot reach the main entry's internal
+    `uwtSafe`/`uwtIsBrowser`/`uwtUuid`-style helpers by relative import;
+    rather than exporting them publicly just to satisfy that constraint, it
+    carries a small verbatim private copy of its own. See DESIGN.md §3,
+    "Entry points", for the full reasoning.
+  - Exposes the library's near-complete `aws-rum-web` configuration
+    surface (sampling, session behavior, dispatch/buffering, cookies,
+    page tracking, tracing) through `UwtRumAppMonitorConfig`, hand-typed so
+    no SDK types leak into the public API; every field with a real SDK
+    default is left unset unless the application overrides it, so the
+    library's defaults never drift from the SDK's own.
+  - Credentials come from an application-supplied
+    `UwtRumCredentialsProvider`; a failed or unreachable broker degrades to
+    a disabled-but-non-throwing sink rather than breaking the app.
+  - Credential refresh retries on failure instead of the refresh chain
+    dying permanently after one transient error, and is safe against the
+    destroy/async race where the sink is torn down while a refresh (or the
+    initial client construction) is still in flight. A refresh due to fire
+    immediately — already-expired or newly-issued credentials expiring
+    within the refresh skew window — falls back to the same bounded retry
+    delay instead of scheduling an immediate refresh, so a broker stuck
+    returning bad credentials can't tight-loop the sink.
+  - A credential refresh returning `null` disables RUM for the session, as
+    documented on `UwtRumCredentialsProvider.load()`: the client is torn
+    down — the SDK's own `disable()` is called on the live instance, not
+    just the reference dropped, so its listeners, plugins, and dispatch
+    timer actually stop — rather than continuing to collect with now-stale
+    credentials, and events recorded after that point are dropped rather
+    than silently queued forever in the pre-init buffer. The same teardown
+    runs on `ngOnDestroy()`, so an Angular-destroyed sink can't leave an
+    orphaned client still collecting (and, if the app is bootstrapped
+    again in the same page, duplicating telemetry).
+    The very first load honors the identical contract, not only a later
+    refresh — declining before the client is ever constructed, or the SDK
+    throwing anywhere in the init sequence (construction, or applying
+    identity/credentials to an already-constructed client), now also
+    disables the session and discards the pre-init buffer, instead of
+    leaving every subsequent `record()` call buffering into the capped
+    pre-init queue forever, a stale `flush()` warning about init being
+    unfinished when it had actually just been declined, or — for a throw
+    after construction — an orphaned, still-running client nothing ever
+    tore down.
+  - A bounded pre-init buffer means telemetry recorded before the RUM
+    client finishes initializing is not silently lost, and a dev-mode
+    warning fires specifically when the page unloads before that
+    resolution — not when the buffer is instead cleared because RUM was
+    declined or failed to initialize, which is a deliberate silent
+    discard, not an unload-mid-init loss. `record()`,
+    `recordPageView(pageId)`, and `recordError(error)` all buffer and
+    replay identically — an error mirrored from `UwtLoggerService` (or
+    reported directly) before the SDK loads is preserved, not dropped.
+    The three record/buffer/dispatch call sites share one internal
+    helper, so the guard can't drift between them.
+  - `UwtRumAppMonitorConfig.clientBuilder` is typed on `aws-rum-web`'s own
+    `ClientBuilder` parameter shape in full (`endpoint: URL, region:
+string, credentials?: ClientBuilderCredentials, compressionStrategy?:
+{ enabled: boolean }`) rather than `(...args: unknown[]) => unknown` —
+    the latter looks more
+    permissive but is actually the opposite: TypeScript checks function
+    parameters contravariantly, so a real, concretely-typed `ClientBuilder`
+    is not assignable to a parameter typed `unknown`, and the escape hatch
+    could never be used without a cast.
+- **Broadcast sink/host** (`UwtBroadcastTelemetrySink` /
+  `UwtTelemetryBroadcastHost`) let a micro-frontend fragment forward its
+  telemetry to the shell that owns the real RUM client, so a composed page
+  gets one AWS session and one event budget instead of one per fragment.
+  Session id **and** user id are synced two-way across every realm on the
+  channel — a user id set in one fragment is visible to a sibling
+  fragment's own logs, not just to the shell.
+  - The shell can safely run in more than one tab without double-recording
+    one event: `UwtTelemetryBroadcastHost` holds a Web Locks-based leader
+    election per channel, so only the elected tab records forwarded
+    telemetry. "Passive" describes the losing tab's _host_ only, not its
+    fragments — they keep forwarding on the same origin-wide channel
+    regardless, so their events are recorded (once, not lost) through the
+    _winning_ tab's AWS RUM client, attributed to that tab's session and
+    page rather than their own. If the same composed page could
+    realistically be open in more than one tab, give each tab's own
+    instance a unique channel name to avoid this — see README.md
+    "Multiple tabs of the same composed page" and DESIGN.md §13 "Known
+    limits". Fails open (elects
+    immediately) when the Locks API is unavailable, or if a lock request
+    itself is rejected — or throws synchronously instead of rejecting,
+    guarded the same way now that this runs unguarded inside an
+    `APP_INITIALIZER`, where an uncaught throw would otherwise crash
+    application bootstrap rather than just fail to elect a leader. A tab
+    destroyed while its own election is still
+    queued (never granted) no longer deadlocks the channel — it is
+    recognized as released the moment it is granted, and the lock passes
+    straight to the next queued tab instead of being held forever by one
+    that already closed.
+  - A genuine duplicate host provider (e.g. `provideUwtTelemetryBroadcastHost()`
+    supplied in both a root and a lazy-loaded module) is detected and warned
+    about via a small same-realm registry, not the `identity` broadcast —
+    the broadcast is origin-wide and can't tell a real duplicate apart from
+    a different, legitimate tab, which must never warn.
+  - Every message kind on the wire protocol is now field-validated, not
+    just its `kind` discriminant — `identity`'s `sessionId`/`userId` and a
+    forwarded error's `stack` are all type-checked before being trusted.
+    An `event`/`error` message's optional `metadata` is validated too, not
+    just passed through: any same-origin code can post to a
+    `BroadcastChannel` by name, and without this a payload with a nested
+    object/array value would reach a receiving sink's own sanitizer (e.g.
+    `UwtRumTelemetrySink.sanitize()`, which trusts the shape rather than
+    re-checking it) unvalidated.
+  - A forwarded error carries the originating fragment's identity through
+    the wire protocol; since the underlying AWS RUM client's `recordError`
+    has no metadata parameter to carry it, the RUM sink folds a
+    cross-realm origin into the error's `name` (e.g. `[fragment-app]
+TypeError`) rather than losing it and attributing every fragment error
+    to the shell.
+  - **Fragment logs go to the shell too.** `provideUwtTelemetrySink('broadcast')`
+    also binds `UWT_LOG_API_PROVIDER` to `UwtBroadcastLogApiProvider`, so a
+    fragment needs no log backend: records, `flush()` and `query()` — a
+    request answered by the shell's provider, or `[]` after a 10-second
+    timeout when no shell answers — all go through the shell. The host
+    requires a log provider of its own and fails at bootstrap without one;
+    in a realm that itself forwards, it warns and stays inactive rather than
+    looping; and it links a fragment's mirrored error to that fragment's log
+    record for the diagnostics popup.
+- **No-op sink** for local development and testing — telemetry calls
+  succeed and do nothing, so a fragment developed standalone never breaks
+  for lack of a shell to compose into. Every override keeps the abstract
+  `UwtTelemetrySink` method's full parameter list rather than narrowing to
+  zero arguments — TypeScript's bivariant method-override checking would
+  have allowed the narrower form to still satisfy `extends
+UwtTelemetrySink`, but it would make the _concrete_ `UwtNoopTelemetrySink`
+  type itself reject a normal call like `.record(type, payload)`.
+  `getUserId()` retains what `setUserId()` was last given, rather than
+  always reporting `undefined` — the one piece of state this sink can't
+  just discard along with everything else, since `UwtLoggerService` reads
+  it for user correlation on every log record, and logs still reach a real
+  `UWT_LOG_API_PROVIDER` even in noop mode.
+
+## Diagnostics popup
+
+`@absaoss-cps/ngx-ui-watchtower/diagnostics` adds an in-app window that
+lists, live, every BI event, scenario event and log record the app hands to
+its destinations — without DevTools, in every environment.
+
+- Opened with Shift+E+I on every platform. The keys are
+  configurable, or can be switched off in favour of `open()` from the app's
+  own UI; `enabled` limits who can open it at all.
+- Three sections — BI, scenario, logging — each with its own search, field
+  filters and JSON download or copy; pause and clear apply to all three. At
+  most 500 events per section, discarded when the popup closes.
+- Built from cps-ui-kit components, non-modal so the app stays usable
+  beside it, light theme only for now.
+- Fed by `UwtTelemetryMonitor` (main entry): every hand-off site publishes
+  the object it just sent, after the hand-off, deep-copied, and only while
+  something is subscribed — otherwise it costs one check per event. It never
+  sends anything itself.
+
+## Configuration & providers
+
+- `provideUwtTelemetry(identity, ...features)` takes the application's
+  identity (`application`/`environment`/`version`, event namespace) as a
+  mandatory first argument, composed with optional, independently
+  omittable `withLogging(...)`, `withScenarios(...)`, `withBIEvents(...)`,
+  `withRedaction(...)` features — mirroring Angular's own
+  `provideHttpClient(withInterceptors(...))` convention. Each concern gets
+  its own DI token (`UWT_LOG_CONFIG`, `UWT_SCENARIO_TELEMETRY_CONFIG`,
+  `UWT_BI_TELEMETRY_CONFIG`, `UWT_REDACT_CONFIG`, plus `UWT_TELEMETRY_IDENTITY` for
+  identity), so a consumer can override one concern through plain DI
+  substitution without touching the others. BI event tracking (dedup
+  window and key cap) is configurable via `withBIEvents(...)` rather than
+  fixed at hardcoded constants.
+- `provideUwtTelemetrySink('broadcast' | 'noop')`,
+  `provideUwtTelemetryRumSink()` (from `@absaoss-cps/ngx-ui-watchtower/rum`), and
+  `provideUwtTelemetryBroadcastHost()` select the transport explicitly —
+  there is no default destination, so an app can never look wired up while
+  silently shipping nothing, and there is never more than one.
+- Scenario, step, logger, and BI event names are typed as a closed
+  vocabulary via TypeScript module augmentation
+  (`declare module '@absaoss-cps/ngx-ui-watchtower'`), so a typo in a name is a compile error
+  instead of a second, silently incomplete metric series.
+
+## Documentation
+
+- **`README.md`** — a short quick guide: setup, scenarios, BI events,
+  logging, the signed-in user, privacy, micro-frontends, debugging and the
+  diagnostics popup, testing.
+- **`DESIGN.md`** — the full development design in 14 sections: goals,
+  architecture and public API, data model, lifecycle, AWS mapping (verified
+  against the installed `aws-rum-web` source rather than its public
+  documentation), metrics, correlation, privacy, configuration, error
+  handling, usage, micro-frontends, and how to connect an OpenTelemetry
+  destination later.
+
+## Workspace wiring
+
+- `angular.json` gains the `@absaoss-cps/ngx-ui-watchtower` library project (ng-packagr
+  build, dev/production `tsconfig` split); `tsconfig.json` adds it to the
+  workspace's project references.
+- `projects/ngx-ui-watchtower/rum/ng-package.json` and
+  `projects/ngx-ui-watchtower/diagnostics/ng-package.json` declare the
+  `/rum` and `/diagnostics` secondary entry points (ng-packagr discovers it
+  automatically by scanning the primary package's directory for nested
+  `ng-package.json` files — no separate `package.json` or `angular.json`
+  project entry is needed for a secondary entry point).
+- `jest.config.js` maps all three specifiers — `@absaoss-cps/ngx-ui-watchtower`,
+  `…/rum` and `…/diagnostics` —
+  import specifiers to source, so tests and the IDE resolve them without a
+  prior build; `tsconfig.json`'s `"paths"` gets the matching
+  entries.
+- The package build resolves cps-ui-kit from its built output
+  (`dist/cps-ui-kit`, a `paths` entry in the library's `tsconfig.lib.json`),
+  so the kit stays an external dependency rather than being compiled in —
+  which is why `build:telemetry` builds cps-ui-kit first.
+- `projects/ngx-ui-watchtower/rum/tsconfig.lib.json` /
+  `tsconfig.spec.json` (new) and their addition to the root `tsconfig.json`'s
+  `"references"` — ng-packagr generates its own tsconfig per entry point
+  internally and doesn't need these, but without them nothing covered the
+  `rum/` directory as a TypeScript project, so `tsc --build` and the IDE's
+  language service couldn't resolve its `@absaoss-cps/ngx-ui-watchtower` import at all.
+- CI (`.github/workflows/cps-shared-ui-checkers.yml`) gains a
+  `build:telemetry` step and a `test:ngx-ui-watchtower` step.
+- Root `package.json` gains `build:telemetry`/`test:ngx-ui-watchtower` scripts
+  and `aws-rum-web`, so the `rum` entry point can be built and unit-tested
+  here; it remains an _optional_ peer dependency for consumers.
+  `projects/ngx-ui-watchtower/package.json` /
+  `projects/ngx-ui-watchtower/ng-package.json` declare the new library's own
+  metadata, peer dependencies (`cps-ui-kit`, `@angular/forms` and
+  `@angular/animations` optional, for the popup), `publishConfig: { access:
+"public" }` for the scoped npm package, and ng-packagr output
+  configuration.
+
+## Testing
+
+- **822 tests** in `@absaoss-cps/ngx-ui-watchtower`, all passing.
+- Lint clean across the workspace.
+- The production `@absaoss-cps/ngx-ui-watchtower` library build succeeds with no compiler
+  warnings.
+- The test suite includes mutation-checked coverage of every
+  concurrency/lifecycle-sensitive path (destroy-time cancellation,
+  credential-refresh retry with 32-bit overflow protection, the scenario
+  timeout rescheduling itself (rather than settling early) when a clamped
+  32-bit-overflow-protection hop fires before the real configured deadline,
+  the mark-cleanup fallback timer sharing that same overflow protection
+  (rescheduling the same way rather than clearing marks early), `elapsed`'s host-page-relative clock, cross-realm identity sync, redaction ordering,
+  dedup keying, RxJS operator stream settlement, the leader-election
+  destroy-while-queued race, `settled$`'s copy-on-emit, the dedup key-cap
+  eviction-ordering fix, `traceScenario`'s cancel-on-unsubscribe path, the
+  dedup key's `JSON.stringify` collision fix, `UwtNoopTelemetrySink`'s
+  `getUserId()` retention, the initial-load disable-flag parity, the dedup
+  cache's hot-key eviction fix, the leader election's synchronous-throw
+  fail-open, per-call `extraValueTransforms` isolation, `correlationId`
+  scrubbing, the pre-init buffer discard (not just a stopped
+  future-buffering) on a declined or failed init, the
+  aggregate-freeze-at-settlement fix, the BI dedup key being built from
+  redacted rather than raw metadata, `maxKeys` being re-applied to combined
+  scenario/step metadata rather than to each independently-capped bag
+  before merging, the same-realm duplicate-host registry, `traceScenario`'s
+  `cancelOutcome` winning the race against a `switchMap`'s own
+  prior-subscription teardown, the broadcast wire protocol's `metadata`
+  field being validated as flat primitives rather than passed through
+  unchecked, and the duplicate-host diagnostic warning itself being
+  fail-open (a patched, throwing `console.warn` can't crash host
+  construction)) — each such test
+  was verified to actually fail when its corresponding guard is removed,
+  not only to pass against the current implementation.
+  `UwtRumAppMonitorConfig.clientBuilder`'s completed parameter signature is
+  verified two ways: a runtime test whose inline `clientBuilder`
+  implementation leaves `credentials`/`compressionStrategy` unannotated,
+  relying on the field's own type for contextual inference; and, like
+  `UwtNoopTelemetrySink`'s preserved method signatures, at the type level
+  (`tsc --build`) — since ts-jest itself runs with `diagnostics: false`,
+  neither jest nor this workspace's own `npm run typecheck` would catch a
+  regression here on its own, see "Known gaps" below.
+
+### Known gaps
+
+- **`npm run typecheck` (`tsc --noEmit`) is currently a no-op.** The root
+  `tsconfig.json` is solution-style — `"files": []` plus per-project
+  `"references"` — and plain `tsc --noEmit` only checks a config's own
+  `"files"`/`"include"`, not its references; following references needs
+  `tsc --build`. Confirmed directly: with a real type error introduced
+  (temporarily, while verifying the `clientBuilder` fix above), `npm run
+typecheck` still exited `0` with no output. `tsc --build` does catch it,
+  but currently also reports roughly 100 pre-existing errors across the
+  workspace unrelated to this PR (`aws-rum-web`'s bundled `rrweb` typings;
+  ambient Node globals `@types/node` would otherwise supply, since this
+  workspace's `tsconfig`s deliberately omit it — see `@absaoss-cps/ngx-ui-watchtower`'s own
+  `types: ["jest"]` convention). Pre-existing, not introduced by this PR;
+  switching the script to `tsc --build` would immediately need triaging
+  those separately. Left as-is here; flagging for a follow-up.
diff --git a/temp_docs/CLAUDE_HANDOFF.md b/temp_docs/CLAUDE_HANDOFF.md
new file mode 100644
index 0000000..7c316db
--- /dev/null
+++ b/temp_docs/CLAUDE_HANDOFF.md
@@ -0,0 +1,302 @@
+# Handoff: ngx-ui-watchtower
+
+Context for an agent continuing work on the `@absaoss-cps/ngx-ui-watchtower` library. Written
+2026-10-06, updated later the same day, at the end of a long session with the user (fateeand). Read the
+whole file before acting.
+
+The library was developed inside the `cps-shared-ui` repository and is moving
+to a new repository, at the same path: **`projects/ngx-ui-watchtower`**. Paths
+below are relative to the repository root. Where something depended on the
+old repository, the section "Moving from cps-shared-ui" says what to do.
+Copy `WATCHTOWER_LAB_PLAN.md` along with this file — it is the next piece of
+work (see "Next piece of work").
+
+## The library
+
+Angular 22, TypeScript ~6.0, built with ng-packagr, tested with Jest (jsdom,
+jest-preset-angular). Three entry points:
+
+| Entry point                                  | Source                                       | Optional peer                                            |
+| -------------------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
+| `@absaoss-cps/ngx-ui-watchtower`             | `projects/ngx-ui-watchtower/src`             | —                                                        |
+| `@absaoss-cps/ngx-ui-watchtower/rum`         | `projects/ngx-ui-watchtower/rum/src`         | `aws-rum-web`                                            |
+| `@absaoss-cps/ngx-ui-watchtower/diagnostics` | `projects/ngx-ui-watchtower/diagnostics/src` | `cps-ui-kit` (+ `@angular/forms`, `@angular/animations`) |
+
+- **Main entry:** `UwtScenarioTelemetryService` / `UwtScenario` (user
+  journeys), `UwtBITelemetryService` (business events), `UwtLoggerService`
+  (a factory: `getLogger(name)` + `query()`), sinks (`UwtTelemetrySink`,
+  broadcast, noop), `UwtTelemetryMonitor`, redaction, and providers
+  (`provideUwtTelemetry` + `withLogging` / `withScenarios` / `withBIEvents` /
+  `withRedaction`; `provideUwtTelemetryDestination` for the destination).
+- **rum:** the AWS CloudWatch RUM sink and `UwtRumCredentialsProvider`.
+- **diagnostics:** an in-app popup listing everything sent, opened with
+  Shift+E+I.
+- **Docs:** `README.md` is a short quick guide for people (~340 lines).
+  `DESIGN.md` is the full development design (~2700 lines), in 14 numbered
+  sections: Goals, Non-goals, Architecture (incl. "Public API" and
+  "Destinations"), Data model, Lifecycle, AWS mapping, Metrics, Correlation,
+  Privacy, Configuration, Error handling and performance, Usage, Multiple
+  realms, OpenTelemetry. The README does not link to it and
+  code comments don't cite its sections — the user removed those on
+  purpose; **don't add them back** unless asked.
+
+## What was built in this session
+
+1. **Diagnostics popup** (`diagnostics/`): a non-modal cps-dialog with three
+   sections (BI / Scenario / Logging). Each section has its own search,
+   field filters, Copy JSON and Download JSON; Pause and Clear are global.
+   The store keeps per-section ring buffers (500 events), batches screen
+   updates every 250 ms, newest first. It is fed by `UwtTelemetryMonitor`
+   (main entry): every hand-off site publishes to it _after_ the real
+   hand-off, deep-cloned, and only while someone is subscribed. Light theme
+   only (user: "no dark mode for now!").
+2. **Fragment logs forwarded to the shell.** `provideUwtTelemetrySink('broadcast')`
+   also binds `UWT_LOG_API_PROVIDER` to `UwtBroadcastLogApiProvider`
+   (`src/lib/providers/uwt-broadcast-log-api.provider/`). Channel messages
+   `log`, `log-flush`, `log-query`, `log-query-result` are defined and
+   validated in `src/lib/sinks/uwt-broadcast/uwt-broadcast.messages.ts`. The
+   host (`uwt-broadcast-host.service.ts`):
+   - requires `UWT_LOG_API_PROVIDER` — fails at bootstrap without one (the
+     user chose this);
+   - stays inactive with a warning in a realm that itself forwards, which
+     would otherwise loop forever;
+   - links a fragment's `mirrorErrorsToRum` error to its log record through
+     `relatedSequence` (same realm, next message, same name and message);
+   - always answers queries (`[]` on failure); only the elected leader does.
+
+   The query timeout is 10 s (`UWT_BROADCAST_LOG_QUERY_TIMEOUT_MS`); it runs
+   outside NgZone and resolves inside it.
+
+3. **`UwtNoopLogApiProvider`** — the explicit way to say "no logs", needed
+   for a shell that hosts fragments but keeps no logs.
+4. **`setUserId('')` means sign-out**, same as `undefined` (stated in the
+   abstract sink's contract). Sinks store the value as given — the user
+   rejected normalizing `''` to `undefined`. RUM checks stay truthiness-based.
+5. **Popup paging:** `first` is a `linkedSignal` of the rows, reset to page 1
+   when a filter or clear leaves fewer rows than the current offset.
+6. **Characters, not bytes:** `maxPayloadCharsInView` (was
+   `maxPayloadBytesInView`) and `sizeChars` (was `sizeBytes`). Truncation
+   never splits a surrogate pair.
+7. **`markCleanupFallbackMs` above 2³¹−1 ms** is honoured by rescheduling,
+   like `scheduleTimeout()`.
+8. **Model dedupe:** `UwtTelemetryAttribution { application; sessionId?;
+userId? }` in the common models; `UwtScenarioRecord` and `UwtLogRecord`
+   extend it and `UwtBIEvent` picks `application`; `UwtLogRecord extends
+Omit<UwtLogDetail, 'error'>`; `UwtScenarioStepEvent` picks its identity
+   fields from `UwtScenarioRecord`.
+9. **Doc examples** each declare the fields they use, inside a class.
+10. **BI rename:** names with `Bi` in the middle became `BI` —
+    `UwtBITelemetryService`, `UwtBITelemetryConfig`, `UwtBIEvent`,
+    `UwtBIEventName(s)`, `UwtBIEventDetail`, `UwtBIEventCorrelation`,
+    `withBIEvents`. Unchanged on purpose: lowercase-leading names
+    (`biTelemetry`, `biConfig`), file names (`uwt-bi-*`), and the `'bi'`
+    values (`com.uwt.bi`, `kind: 'bi'`, the popup's `'bi'` section).
+11. **One swappable destination.** A realm has exactly one telemetry
+    destination. `provideUwtTelemetryDestination(SinkClass, { init? })`
+    registers it (binds `UwtTelemetrySink`, runs `init` once, fail-open);
+    `provideUwtTelemetryRumSink()` and `provideUwtTelemetrySink('broadcast' |
+'noop')` are built on it. Two different destinations fail bootstrap with
+    a clear error; the same one twice is fine. `uwtClassifyTelemetryEvent`
+    tells a sink whether `record()` got a scenario record, a step event, a BI
+    event or something else. The acceptance test is in
+    `uwt-telemetry-common.providers.spec.ts` ("brand-new destination").
+12. **OpenTelemetry: documented, not built.** DESIGN.md §14 says how to
+    connect an OTel destination later (a `UwtTelemetrySink` that builds spans
+    and OTel log records, the app's SDK and collector, the one-line swap) and
+    its limits. The mapping was checked against the real OTel SDK; it works
+    without library changes, except live trace context, which needs core
+    changes.
+13. **Rebrand.** The package is `@absaoss-cps/ngx-ui-watchtower`, in `projects/ngx-ui-watchtower`. Every own `Cps`/`cps`/
+    `CPS_` name became `Uwt`/`uwt`/`UWT_`, files `cps-*` became `uwt-*`, and
+    runtime values changed too: default event namespace `com.uwt`, channel
+    `ngx-ui-watchtower`, console prefix `[ngx-ui-watchtower]`. Anything still
+    named `cps` belongs to cps-ui-kit (its components, tokens, `.cps-sr-only`)
+    or to the `@absaoss-cps` scope / `cps-shared-ui` repository — leave it.
+14. **Public package.** `@absaoss-cps` is an npm org, so the package is
+    scoped; its `package.json` has `"publishConfig": { "access": "public" }`
+    so a plain `npm publish` creates it public. Publishing needs rights in
+    the org (or an org-issued CI token). The release workflow still
+    publishes only cps-ui-kit.
+
+## Moving from cps-shared-ui
+
+The library folder moves as is. These things lived **outside** it and have to
+be recreated or decided in the new repository.
+
+**Workspace wiring (needed for anything to build or test):**
+
+- `angular.json` — a library project:
+  ```json
+  "ngx-ui-watchtower": {
+    "projectType": "library",
+    "root": "projects/ngx-ui-watchtower",
+    "sourceRoot": "projects/ngx-ui-watchtower/src",
+    "prefix": "uwt",
+    "architect": {
+      "build": {
+        "builder": "@angular/build:ng-packagr",
+        "options": { "project": "projects/ngx-ui-watchtower/ng-package.json" },
+        "configurations": {
+          "production": { "tsConfig": "projects/ngx-ui-watchtower/tsconfig.lib.prod.json" },
+          "development": { "tsConfig": "projects/ngx-ui-watchtower/tsconfig.lib.json" }
+        },
+        "defaultConfiguration": "production"
+      },
+      "test": { "builder": "@angular-builders/jest:run", "options": { "zoneless": false } }
+    }
+  }
+  ```
+- Root `tsconfig.json` — `paths` for the three entry points, and
+  `references` to the six library tsconfigs (`tsconfig.lib.json` and
+  `tsconfig.spec.json` in the library root, `rum/` and `diagnostics/`):
+  ```json
+  "@absaoss-cps/ngx-ui-watchtower": ["./projects/ngx-ui-watchtower/src/public-api.ts"],
+  "@absaoss-cps/ngx-ui-watchtower/rum": ["./projects/ngx-ui-watchtower/rum/src/public-api.ts"],
+  "@absaoss-cps/ngx-ui-watchtower/diagnostics": ["./projects/ngx-ui-watchtower/diagnostics/src/public-api.ts"]
+  ```
+  The library tsconfigs `extend` the root one (`../../tsconfig.json`, and
+  `../../../tsconfig.json` from `rum/` and `diagnostics/`), so the new
+  repository needs a compatible root tsconfig. `rum/` and `diagnostics/`
+  set `"rootDir": "../../.."`, which assumes the same depth.
+- Jest config — `moduleNameMapper` for the same three entry points
+  (`^@absaoss-cps/ngx-ui-watchtower$`, `…/rum$`, `…/diagnostics$`),
+  plus the jsdom + jest-preset-angular setup the old repo had.
+- `package.json` scripts — the old repo had
+  `"build:telemetry": "npm run build && ng build --configuration=production --project=ngx-ui-watchtower"`
+  and `"test:ngx-ui-watchtower": "ng test --project=ngx-ui-watchtower"`.
+- ESLint and Prettier configs — the old repo's rules apply to this code (see
+  "Pitfalls").
+
+**cps-ui-kit now comes from npm.** In cps-shared-ui the kit was a sibling
+library, so:
+
+- `projects/ngx-ui-watchtower/tsconfig.lib.json` has
+  `"paths": { "cps-ui-kit": ["../../dist/cps-ui-kit"] }` with a comment
+  about building the kit first — **remove that mapping** (and the comment);
+  the package resolves from `node_modules`.
+- `build:telemetry` no longer needs to build the kit first.
+- Jest mapped `^cps-ui-kit$` to the kit's source; drop that and resolve it
+  from `node_modules`.
+- Install `cps-ui-kit`, `aws-rum-web`, `@angular/forms` and
+  `@angular/animations` as dev dependencies so the specs and the build work.
+  The library's own peer ranges (`cps-ui-kit ^22.0.0`, Angular `^22.1.3`,
+  `aws-rum-web ^3.2.1`) stay in `projects/ngx-ui-watchtower/package.json`.
+- Check that the published cps-ui-kit version has the components and
+  services the popup uses: `CpsDialogService`, `cps-expansion-panel`,
+  `cps-table`, `cps-input`, `cps-autocomplete`, `cps-select`, `cps-chip`,
+  `cps-button`, `cps-switch`, `cps-info-circle`, `CPS_LIVE_ANNOUNCER_SERVICE`,
+  `CpsNotificationService`.
+
+**Library metadata to update:** `projects/ngx-ui-watchtower/package.json` still
+has `repository.url` and `homepage` pointing at
+`https://github.com/AbsaOSS/cps-shared-ui`.
+
+**Left behind in cps-shared-ui** (decide with the user whether to bring them;
+`WATCHTOWER_LAB_PLAN.md` says which of them the lab reuses):
+
+- The demo app integration in `projects/composition`: `app.module.ts`
+  (providers, including `provideUwtTelemetryDiagnostics()`),
+  `services/app-telemetry.service.ts`, `services/app-log-api.provider.ts`,
+  `services/rum-credentials.provider.ts`, `services/telemetry.schema.ts`,
+  and telemetry usage in several pages, each with specs. This is the only
+  place the library ran in a real app.
+- End-to-end tests: `playwright/composition/telemetry-diagnostics.spec.ts`
+  (8 tests) and three popup accessibility tests in
+  `playwright/composition/accessibility-composition.spec.ts`. They need a
+  running app; without one the popup has unit and component tests only.
+- `projects/ngx-ui-watchtower/telemetry-trace.txt` and
+  `telemetry-trace-live.txt` were generated from the composition app (the
+  old `trace:telemetry` script ran `projects/composition/src/app/telemetry-trace.capture.spec.ts`).
+  Without that app they can't be regenerated — ask before deleting.
+- `.vscode/settings.json` maps `**/src/**/*.spec.ts` to `typescriptreact`
+  (see "Pitfalls"); bring it only if the user wants it.
+
+## Next piece of work
+
+Build the **Watchtower Lab**, as planned in `WATCHTOWER_LAB_PLAN.md`: a shell
+app (SSR) and a Web Fragment app in the new repository, served with a mock
+RUM endpoint and log backend, plus a consumer smoke app built from the packed
+package, all exercised by Playwright. The user approved this plan and wants
+it built in the new repository. It replaces what `composition` gave the
+library in cps-shared-ui.
+
+## Open items (offer them; don't do them unasked)
+
+- Showing the popup inside a fragment is untested: whether the shortcut
+  reaches a fragment under Web Fragments, and how the dialog renders in a
+  shadow root. Recommended setup: the popup only in the shell.
+- A fragment's earliest log records lack `sessionId`/`userId` until the
+  shell answers. Filling them in at the shell was declined, because the
+  console would then differ from what was sent.
+
+## How the user works — follow these
+
+- **Console output must exactly match what is sent** to the sink or log
+  provider: nothing is printed that isn't sent, one line per sent event.
+- **No magic numbers** — use named constants. **No `any`.** Don't change
+  unrelated code or attributes.
+- **Loggers are named and unique**; the service has no unnamed
+  `log`/`warn`/`error`. Don't reintroduce `child()`.
+- Prefer explicit opt-outs (`'noop'`, `UwtNoopLogApiProvider`) over silent
+  defaults; a missing destination should fail at bootstrap.
+- **Exactly one destination, never two.** OTel (or anything else) would
+  _replace_ RUM, never run beside it. Don't propose fan-out or multiple
+  sinks. **No OTel support is wanted now** — only the ability to swap a sink
+  in later.
+- **Log lines are not part of the destination.** They always go to the app's
+  own backend (`UWT_LOG_API_PROVIDER`), with RUM or anything else. Don't mix
+  logs into destination work — but don't drop the log provider from example
+  `providers` arrays either: show it, marked unchanged.
+- **Docs: straight to the point.** Instructions and decisions, not research
+  narrative or "how I verified it". Short sections; cut background the
+  reader doesn't need.
+- Acronyms in PascalCase names are fully capitalised (`BI`, not `Bi`).
+- The user often asks "why?". Answer it directly; if a change isn't needed,
+  say so and recommend not doing it. Answer questions before editing, and
+  ask before changing a public contract when there is a real trade-off.
+- Reply in the language of the question (Russian or English).
+- Reviews: report findings by severity, reproduce each one (a temporary
+  test you then delete), and fix only after approval.
+- Never commit unless asked. Never use `git stash`, `git rm` or other index
+  manipulation — the user has rejected that.
+
+## Verifying a change
+
+Run all of these before saying something is done (adapt the commands to the
+new repo's scripts):
+
+- Unit tests: `npx jest projects/ngx-ui-watchtower` (822 tests at handoff).
+- Lint and format: `npx eslint projects/ngx-ui-watchtower --max-warnings=0` and
+  `npx prettier --check projects/ngx-ui-watchtower`.
+- Types: Jest uses `isolatedModules` and does **not** type-check. Run
+  `npx tsc -p <config> --noEmit` for each of the six library tsconfigs.
+- The package build: `ng build --configuration=production --project=ngx-ui-watchtower`.
+- After fixing a bug, mutation-check the test: undo the fix temporarily,
+  confirm a test fails, then restore the file (back it up first and compare
+  with `cmp`).
+
+## Pitfalls hit in this session
+
+- **Spec files as TSX.** The old repo's VS Code settings parse
+  `*.spec.ts` as TSX, where a generic arrow like `<T>(fn: () => T) => fn()`
+  reads as a JSX tag: the file turns red in the editor while tsc and Jest
+  pass. Use `function f<T>()` declarations in specs. Check with:
+  `node -e "const ts=require('typescript'),fs=require('fs');const f=process.argv[1];console.log(ts.createSourceFile(f,fs.readFileSync(f,'utf8'),99,true,ts.ScriptKind.TSX).parseDiagnostics.length)" <file>`
+- ESLint rules that came up: `no-use-before-define` (declare a type before
+  a type that references it), `no-void`, `dot-notation`,
+  `lines-between-class-members`, and `no-undef` for DOM type names such as
+  `NodeListOf`.
+- TestBed runs app initializers on the first inject and throws there
+  synchronously; it does not reject `ApplicationInitStatus.donePromise`.
+- A hand-made `NgZone` stub breaks TestBed; spy on the real zone instead
+  (`jest.spyOn(TestBed.inject(NgZone), 'run')`).
+- When editing files with scripts, assert each match occurs exactly once,
+  and diff the result afterwards — one scripted edit once cut off the end
+  of a spec file.
+- **Run doc snippets before trusting them.** A `providers` example that
+  looked fine was missing `UWT_LOG_API_PROVIDER` and failed with `NG0201`
+  as soon as the logger was used. A throwaway spec (then deleted) catches
+  this.
+- The full session transcript, if more detail is needed, is on the user's
+  machine:
+  `~/.claude/projects/-Users-madfamily-Documents-cps-shared-ui/f05e4b7e-005c-4b98-a509-f57eb8dd8276.jsonl`
diff --git a/temp_docs/INTEGRATION-DATA-GATEWAY.md b/temp_docs/INTEGRATION-DATA-GATEWAY.md
new file mode 100644
index 0000000..c3cde5c
--- /dev/null
+++ b/temp_docs/INTEGRATION-DATA-GATEWAY.md
@@ -0,0 +1,1844 @@
+# Integrating `@absaoss-cps/ngx-ui-watchtower` into `data-gateway`
+
+**Audience:** the AI coding agent (GitHub Copilot) doing the integration.
+
+**This document is self-contained.** Every code sample you need is inlined
+here — you are not expected to have access to any other repository. Passages
+quoted from the library's own `DESIGN.md` and `README.md` are quoted in full
+where they matter; if those two files were copied into `data-gateway`
+alongside the library source, they are worth reading, but nothing here depends
+on it.
+
+Everything below was verified against the library source, not recalled from
+memory. Where a rule has a "why", the why is included — you will need it to
+make judgement calls this document does not anticipate.
+
+---
+
+## 0. Mission
+
+`data-gateway` is an **Angular application with SSR** that acts as a **shell**
+composing embedded **fragments** (Unify, Aqueduct, LUM). It currently has its
+own `RumService` and a server-side credential broker at
+`src/rum/broker.server.ts`.
+
+Your job:
+
+1. Land `@absaoss-cps/ngx-ui-watchtower` in the repo so it builds, type-checks and tests.
+2. Wire the shell: telemetry providers, the RUM sink, the broadcast host.
+3. Reuse the existing broker for credentials.
+4. **Retire `RumService` without changing a single event on the wire.**
+5. Declare the app's scenario and step vocabulary.
+6. Propose and implement scenarios and BI events for the app's real use cases.
+
+**Scope note:** `data-gateway` has no log backend, so this integration covers
+**scenario telemetry and BI events only**. Logging is deliberately out of
+scope — see §3.2.
+
+### Four non-negotiables
+
+| #   | Constraint                         | What it means in practice                                                                                                                                       |
+| --- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1   | **npm-swap-ready**                 | The library is temporarily vendored as a source tree. Removing it later must be a config-only change. See §2 "The npm-swap contract".                           |
+| 2   | **Wire parity with `RumService`**  | Every event `RumService` sends today must still arrive at CloudWatch RUM with the same event type and equivalent payload. Migrate first, delete second. See §5. |
+| 3   | **SSR-safe**                       | `data-gateway` server-renders. The library is already SSR-safe — do not add redundant guards, and do not break the existing ones. See §1.3.                     |
+| 4   | **Shell hosts, fragments forward** | Exactly one realm owns the AWS client. The shell. Fragments broadcast to it. See §1.                                                                            |
+
+---
+
+## 1. Architecture
+
+### 1.1 Why the shell must host
+
+A composed page runs the shell and each fragment in **its own JavaScript
+realm**. [Web Fragments](https://web-fragments.dev) — the model this library
+was explicitly designed against (`DESIGN.md` §13) — "utilizes a hidden iframe
+to create a clean JavaScript context"; the iframe is never rendered, its DOM
+is reprojected into a Shadow Root in the host document, and its
+`window.location` is kept in sync with the host's.
+
+A separate realm means a separate Angular injector, which means **every realm
+would build its own copy of every telemetry service — including its own AWS
+RUM client.** Left alone:
+
+| Left alone                    | Consequence                                                                                                    |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| N RUM clients                 | Each mints its own session. One human becomes N sessions and N users; unique-user counts are wrong             |
+| N × `sessionEventLimit`       | Separate event budgets, separate dispatches, N calls to the credentials broker, N copies of the SDK downloaded |
+| Shared origin, shared cookies | N clients contend for one RUM session cookie                                                                   |
+
+The arrangement: **one realm hosts; the rest forward.**
+
+```mermaid
+flowchart LR
+    subgraph shell [Shell realm — data-gateway]
+      S[provideUwtTelemetryRumSink] --> R[AwsRum]
+      H[provideUwtTelemetryBroadcastHost]
+      H --> S
+    end
+    subgraph f1 [Fragment realm — Unify]
+      A[UwtBroadcastTelemetrySink]
+    end
+    subgraph f2 [Fragment realm — Aqueduct / LUM]
+      B[UwtBroadcastTelemetrySink]
+    end
+    A -- BroadcastChannel --> H
+    B -- BroadcastChannel --> H
+    R --> AWS[AWS CloudWatch RUM]
+```
+
+One session, one budget, one bundle. Application code inside a fragment does
+not change — it injects the same services and calls the same methods; only
+the sink binding differs.
+
+### 1.2 The fragments do not broadcast yet — that is fine
+
+The fragment teams have not implemented their side. **This is a supported,
+documented state, not a defect.** From `README.md`: _"A fragment with no shell
+still works"_ — and symmetrically, a host with no fragments simply receives
+nothing. `UwtTelemetryBroadcastHost` opens its channel, wins the leader
+election, announces identity, and sits idle.
+
+**Therefore: provide the broadcast host now.** Do not defer it, do not
+feature-flag it, do not write a "we'll add this later" TODO. When the
+fragments start broadcasting, the shell must already be listening — the host
+is constructed eagerly via `provideAppInitializer` precisely so that it is
+listening before any fragment sends.
+
+Hand §8 to the fragment teams as their contract.
+
+### 1.3 SSR is already handled — do not re-solve it
+
+The library guards itself. Confirmed in source:
+
+- `UwtRumTelemetrySink` holds `private readonly isBrowser = uwtIsBrowser();`
+  and returns early from both `init()` and every `record()` path when false.
+- `uwtConnectBroadcastChannel` checks `uwtIsBrowser()` **and** feature-detects
+  `globalThis.BroadcastChannel`, returning `undefined` on the server; every
+  post/close is wrapped in `uwtSafeVoid`.
+- `uwtIsBrowser()` is `isPlatformBrowser(inject(PLATFORM_ID))`.
+
+`README.md` states it as a guarantee: _"SSR-safe — every browser-touching path
+is a no-op on the server."_
+
+**What this means for you:** register the providers unconditionally in the
+shared app config. Do **not** split providers between browser and server
+configs, and do **not** wrap `provideUwtTelemetryRumSink()` in a platform
+check.
+
+**What you still own:** any code _you_ write that touches `window`,
+`navigator`, `localStorage` or `document` — including the value you pass as
+`environment`. Guard those:
+
+```ts
+private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+scenario.setData(this.isBrowser ? { language: navigator.language } : {});
+```
+
+```ts
+// resolving `environment` runs during provider setup, on the server too
+export function resolveDeploymentEnvironment(): 'development' | 'production' {
+  const hostname =
+    typeof window !== 'undefined' ? window.location.hostname : undefined;
+  return hostname === 'localhost' ? 'development' : 'production';
+}
+```
+
+> ⚠️ `uwtIsBrowser()` calls `inject(PLATFORM_ID)`, so it must run in an
+> injection context — as a field initializer or in a constructor. The same
+> applies to `uwtConnectBroadcastChannel`. This only matters if you write a
+> custom sink.
+
+---
+
+## 2. Phase 0 — land the package
+
+The library is vendored as a **library source tree** with two entry points.
+`@absaoss-cps/ngx-ui-watchtower/rum` is a real ng-packagr **secondary entry
+point**, not a folder convention.
+
+### 2.1 Why `/rum` is a separate entry point
+
+From `DESIGN.md` §3 — this is load-bearing, not cosmetic:
+
+> A bundler resolves every static import in a module graph, and a dynamic
+> `import()`'s specifier, whether or not that code path ever runs. Keeping the
+> RUM sink and its `await import('aws-rum-web')` out of the main entry is what
+> lets an app using only `'broadcast'`/`'noop'` build without `aws-rum-web`
+> installed.
+
+Consequences you must respect:
+
+- RUM symbols (`provideUwtTelemetryRumSink`, `UWT_RUM_CREDENTIALS_PROVIDER`,
+  `UwtRumBootstrap`, `UwtRumCredentials`, `UwtRumCredentialsProvider`,
+  `UwtRumAppMonitorConfig`, `UwtRumTelemetrySink`) come from
+  **`@absaoss-cps/ngx-ui-watchtower/rum`**. That is the entire `/rum` surface — seven exported
+  names. Everything else comes from `@absaoss-cps/ngx-ui-watchtower`.
+- **Never re-export the RUM sink from a shared barrel file.** That drags
+  `aws-rum-web` into every consumer's module graph and undoes the split.
+- `@absaoss-cps/ngx-ui-watchtower/rum` carries its own private copies of the internal utils
+  (`uwtSafe`, `uwtIsBrowser`, …) because ng-packagr fixes each entry point's
+  `rootDir` to its own `src`. Do not "de-duplicate" them.
+
+### 2.2 TypeScript paths
+
+Each entry point needs an entry. Point them at the vendored source:
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    "resolveJsonModule": true, // only if you import version from a package.json
+    "paths": {
+      "@absaoss-cps/ngx-ui-watchtower": [
+        "./ngx-ui-watchtower/src/public-api.ts"
+      ],
+      "@absaoss-cps/ngx-ui-watchtower/rum": [
+        "./ngx-ui-watchtower/rum/src/public-api.ts"
+      ]
+    }
+  }
+}
+```
+
+Adjust the prefix to wherever the folder actually landed.
+
+### 2.3 Jest module mapping — anchor the regexes
+
+```js
+// jest.config.js
+moduleNameMapper: {
+  '^@absaoss-cps/ngx-ui-watchtower$': '<rootDir>/ngx-ui-watchtower/src/public-api.ts',
+  '^@absaoss-cps/ngx-ui-watchtower/rum$': '<rootDir>/ngx-ui-watchtower/rum/src/public-api.ts'
+}
+```
+
+> ⚠️ **Anchor both patterns.** An unanchored `'@absaoss-cps/ngx-ui-watchtower'` also matches
+> `@absaoss-cps/ngx-ui-watchtower/rum` and swallows the sub-path, so `/rum` imports resolve to
+> the main barrel and every RUM symbol comes back `undefined` at test time.
+
+### 2.4 Angular build config
+
+```jsonc
+// angular.json — the application's build options
+"allowedCommonJsDependencies": ["shimmer"]
+```
+
+`shimmer` is a transitive CommonJS dependency of `aws-rum-web`. Without this,
+the build emits a CommonJS warning per build.
+
+### 2.5 TypeScript project wiring
+
+The secondary entry point needs its own `tsconfig.lib.json` and
+`tsconfig.spec.json`, plus `references` entries in the root tsconfig —
+"without them nothing covered the `rum/` directory as a TypeScript project".
+
+Two traps we actually hit in this workspace, both likely to recur:
+
+- **`skipLibCheck: true`** is required in the app's `tsconfig.app.json`
+  _and_ in the plain `tsconfig.json` (the one the VS Code language service
+  resolves first). `aws-rum-web` bundles `rrweb` typings that do not compile
+  under strict settings.
+- **`rootDir`** must be set explicitly to span the workspace when the app
+  imports library _source_ through `paths` rather than a built package.
+
+> ⚠️ `tsc --noEmit` is a **no-op** against a solution-style root config
+> (`"files": []` + `"references"`). It only checks the config's own
+> `files`/`include`, not its references. Use **`tsc --build`** if you want a
+> real type check. Also note `ts-jest` commonly runs with `diagnostics:
+false`, so tests will not catch type regressions either.
+
+### 2.6 Peer dependencies
+
+```jsonc
+"peerDependencies": {
+  "@angular/common": "^22.1.3",
+  "@angular/core": "^22.1.3",
+  "aws-rum-web": "^3.2.1",
+  "rxjs": "^7.8.2"
+},
+"peerDependenciesMeta": { "aws-rum-web": { "optional": true } }
+```
+
+`data-gateway` uses the RUM sink, so `aws-rum-web` must be a real dependency
+of the app. The library's only true runtime dependency is `tslib`.
+
+### 2.7 The npm-swap contract
+
+This is the constraint that makes the future migration free. **Treat it as a
+hard rule and enforce it in review:**
+
+✅ **Allowed** — bare specifiers only:
+
+```ts
+import {
+  provideUwtTelemetry,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { provideUwtTelemetryRumSink } from '@absaoss-cps/ngx-ui-watchtower/rum';
+```
+
+❌ **Forbidden** — every one of these pins you to the vendored copy:
+
+```ts
+import { UwtScenarioTelemetryService } from '../../ngx-ui-watchtower/src/public-api'; // relative
+import { UwtScenario } from '@absaoss-cps/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario'; // deep
+import { UwtRumTelemetrySink } from './shared/telemetry-barrel'; // re-export
+```
+
+When the package is published, migration is:
+
+1. Delete the vendored `ngx-ui-watchtower/` folder.
+2. `npm install @absaoss-cps/ngx-ui-watchtower aws-rum-web`.
+3. Delete the two `paths` entries and the two jest `moduleNameMapper` entries.
+4. Delete the `references` entries for the vendored tsconfigs.
+
+**Zero import statements change.** If a single import needs editing during this
+migration, the contract was broken somewhere — find it.
+
+---
+
+## 3. Phase 1 — wire the shell
+
+### 3.1 The wiring
+
+This is the proven shape, taken from a working integration. Adapt it to
+`data-gateway`'s bootstrap style — `makeEnvironmentProviders` works in both a
+standalone `ApplicationConfig` and an NgModule `providers` array:
+
+```ts
+import {
+  UWT_LOG_API_PROVIDER,
+  UwtNoopLogApiProvider,
+  provideUwtTelemetry,
+  provideUwtTelemetryBroadcastHost
+} from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UWT_RUM_CREDENTIALS_PROVIDER,
+  provideUwtTelemetryRumSink
+} from '@absaoss-cps/ngx-ui-watchtower/rum';
+import './services/telemetry.schema'; // side-effect import — see §6
+
+// One channel per browser tab — see §3.5. Browser-only: this module is
+// evaluated during server rendering too, and nothing there needs an id.
+const channelId =
+  typeof window === 'undefined'
+    ? undefined
+    : `ngx-ui-watchtower-${crypto.randomUUID()}`;
+
+if (channelId) {
+  window.__uwtTelemetryChannel = channelId;
+}
+
+providers: [
+  provideUwtTelemetry({
+    application: 'data-gateway',
+    environment: resolveDeploymentEnvironment(),
+    version: packageJson.version
+  }),
+  provideUwtTelemetryRumSink(),
+  provideUwtTelemetryBroadcastHost(channelId), // shell only
+  // No log backend: say so explicitly. The broadcast host requires a log
+  // provider (§3.2) and fails at bootstrap without one.
+  { provide: UWT_LOG_API_PROVIDER, useClass: UwtNoopLogApiProvider },
+  {
+    provide: UWT_RUM_CREDENTIALS_PROVIDER,
+    useExisting: DataGatewayRumCredentialsProvider
+  }
+];
+```
+
+### 3.2 Scenarios and BI only — no logging
+
+`data-gateway` has **no log backend**, so it integrates **scenario telemetry
+and BI events only**. Do not wire logging.
+
+Concretely:
+
+- **Do** bind `UWT_LOG_API_PROVIDER` to `UwtNoopLogApiProvider` (§3.1).
+- **Do not** inject `UwtLoggerService` anywhere.
+- **Do not** pass `withLogging(...)`.
+
+Why the no-op provider is required even with no logging: the shell hosts the
+broadcast channel, and fragments in `'broadcast'` mode forward their log lines
+to it, for the shell's log provider to ship. `UwtTelemetryBroadcastHost`
+therefore injects `UWT_LOG_API_PROVIDER` and fails at bootstrap (`NG0201`)
+without one — a shell that silently dropped its fragments' logs would look
+wired up while losing them. `UwtNoopLogApiProvider` is the explicit "no log
+backend": records are discarded and `query()` finds none. Apart from the host,
+only `UwtLoggerService` injects the token; `UwtScenarioTelemetryService` and
+`UwtBITelemetryService` don't.
+
+**What you give up:** the `correlationId` join between a log line and a
+scenario. Everything a log call would have carried has to go somewhere else:
+
+| Instead of                            | Do this                                                                         |
+| ------------------------------------- | ------------------------------------------------------------------------------- |
+| `logger.error('X failed', { error })` | `scenario.fail({ error })` — the normalized error ships on the scenario record  |
+| `logger.warn` about a degraded path   | `scenario.incomplete({ reason })`, or a BI event if there is no scenario        |
+| Free-text diagnostic context          | `scenario.setData({ … })` or step metadata — flat primitives, capped at 50 keys |
+| A code-level trace                    | `console` behind the `debugScenario` flag; it is not shipped anywhere           |
+
+If a log backend appears later, adding logging is additive: implement
+`UwtLogApiProvider`, bind it to `UWT_LOG_API_PROVIDER` in place of the no-op
+one, start injecting `UwtLoggerService`. Nothing already written has to
+change, and fragments' log lines start arriving too.
+
+### 3.3 `provideUwtTelemetry` provides no destination — by design
+
+> ⚠️ **This is the single most common first-run failure.**
+> `provideUwtTelemetry` registers _configuration only_. A sink must be bound
+> separately; injecting a telemetry service without one fails at bootstrap
+> with **`NG0201`**.
+
+From `DESIGN.md` §10, on why there is no default:
+
+> Defaulting to a no-op sink and an in-memory log store would let an
+> application forget to wire a destination and still run perfectly while
+> shipping nothing — invisible until somebody asks why the dashboard is empty.
+> A missing provider is a configuration error caught on the first run.
+
+For `data-gateway` the sink is `provideUwtTelemetryRumSink()`. Scenario and BI
+services both require it.
+
+### 3.4 What `provideUwtTelemetry` actually registers
+
+```ts
+provideUwtTelemetry(identity, ...features);
+```
+
+Registers `UWT_TELEMETRY_IDENTITY`, then the defaults for `UWT_LOG_CONFIG`,
+`UWT_SCENARIO_TELEMETRY_CONFIG`, `UWT_BI_TELEMETRY_CONFIG`, `UWT_REDACT_CONFIG`, then any features
+you pass (later-wins DI). Identity:
+
+```ts
+interface UwtTelemetryIdentity {
+  application: string; // 'data-gateway' — becomes a session attribute
+  environment: string; // 'dev' | 'qa' | 'prod'
+  version: string;
+  eventNamespace?: string; // default 'com.uwt' → com.uwt.scenario / .scenario.step / .bi
+}
+```
+
+Optional features, all omittable, each replacing exactly one config token.
+`data-gateway` should need none of them at first:
+
+| Feature                                                                                                          | Defaults                                                      | Use in data-gateway             |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------- |
+| `withScenarios({ defaultTimeoutMs, emitLifecycleEvents, maxSteps, userTimings, markCleanupFallbackMs, redact })` | `30_000`, `false`, `50`, `false`, `300_000`, `true`           | Only with a specific reason     |
+| `withBIEvents({ dedupWindowMs, dedupMaxKeys, redact })`                                                          | `400`, `100`, `true`                                          | Only with a specific reason     |
+| `withRedaction({ … })`                                                                                           | see §10.4                                                     | If URLs can carry personal data |
+| `withLogging({ … })`                                                                                             | `minLevel: 'log'`, `mirrorErrorsToRum: false`, `redact: true` | **No** — see §3.2               |
+
+**Start with defaults.** Only add a feature when you have a specific reason,
+and record the reason in a comment.
+
+### 3.5 One broadcast channel per browser tab — required
+
+**Give every tab its own channel name.** Do not rely on the shared default.
+
+`BroadcastChannel` and the Web Locks leader election that arbitrates between
+hosts are both **origin-wide, not per-tab**. With the default channel, if a
+user has `data-gateway` open in two tabs:
+
+- Only one tab's host wins the election and records — so a single event is
+  never recorded twice. That part is fine.
+- But the **losing tab's fragments keep forwarding on the same origin-wide
+  channel**, so their events are recorded through the _winning_ tab's AWS RUM
+  client — attributed to a different tab's session and page than the one they
+  actually came from.
+
+`UwtBroadcastMessage` carries no tab or window identifier at all, so the
+protocol cannot route a message back to its originating tab even in principle.
+A per-tab channel name is the only fix.
+
+#### Getting the id to the fragments
+
+Web Fragments has **no built-in way for the shell to hand a runtime value to a
+fragment**, so this needs a convention. Use a global on the top-level window.
+It is reachable because the framework requires every fragment to share the
+shell's origin — the same requirement that makes `BroadcastChannel` work at
+all.
+
+```ts
+// shell — at module scope, so it is set before any fragment can read it
+declare global {
+  interface Window {
+    __uwtTelemetryChannel?: string;
+  }
+}
+
+// Browser-only. This module is evaluated during server rendering too,
+// where there is no `window` — and, on Node below 19, no global `crypto`
+// either. Nothing is lost: the broadcast host no-ops on the server, and the
+// browser mints its own id when it boots.
+const channelId =
+  typeof window === 'undefined'
+    ? undefined
+    : `ngx-ui-watchtower-${crypto.randomUUID()}`;
+
+if (channelId) {
+  window.__uwtTelemetryChannel = channelId;
+}
+
+// …then pass the same value to the host. `undefined` on the server is fine:
+// the provider simply omits the channel override.
+provideUwtTelemetryBroadcastHost(channelId);
+```
+
+Fragments read it back off `window.top` (§8 has their side, ready to hand
+over).
+
+> ⚠️ **Do not try to pass it on the fragment's URL.** The obvious approach —
+> a `?channel=` query parameter — does not work here, and it is worth knowing
+> why so nobody "fixes" this back later:
+>
+> - The shell never sets a fragment's URL. A fragment is embedded as
+>   `<web-fragment fragment-id="unify">`, and a server-side `FragmentGateway`
+>   maps that id to an endpoint and proxies it through the shell's origin.
+> - By default a fragment is **bound**: it "shares (binds) `window.location`
+>   and navigation history with the existing application", initialised to the
+>   top-level app's location. So a fragment reading
+>   `window.location.search` sees the **host's** query string, not one of its
+>   own.
+>
+> Only an **unbound** fragment (one given an explicit `src` attribute) has its
+> own location — but going unbound decouples that fragment from the shell's
+> routing, which is far too large a change to make in order to pass a
+> telemetry id.
+
+> ⚠️ Generate the id **once per page load**, at shell bootstrap, before any
+> fragment is composed. Generating it per fragment, or regenerating it on
+> navigation, puts fragments on channels no host is listening to — and because
+> the broadcast sink fails open, that failure is **completely silent**.
+
+#### Duplicated tabs are covered — and why it had to be a global
+
+Duplicating a tab loads a fresh document, so the module-scope code above runs
+again and `window.__uwtTelemetryChannel` gets a **new** id. The duplicate is
+therefore on its own channel, hosted by its own tab, exactly like any other
+independently opened tab.
+
+That is the reason this is a `window` global rather than `sessionStorage`.
+Chrome **copies `sessionStorage` into a duplicated tab**, so a
+sessionStorage-based id would arrive pre-populated in the duplicate, both tabs
+would share a channel, and the cross-attribution this whole section exists to
+prevent would come straight back — in the one case people hit by accident.
+
+> **This buys correct attribution, not a separate RUM session.** A per-tab
+> channel guarantees a tab's fragments are recorded through _that tab's_ RUM
+> client, carrying that tab's page context. It does **not** give each tab its
+> own `sessionId`: the RUM session lives in a cookie (`allowCookies` defaults
+> to `true`, 30-minute length), and cookies are shared across every tab on the
+> origin. Two tabs of `data-gateway` are one RUM session by design — RUM
+> models a session as a _user's_ session, not a tab's, and it deliberately
+> survives reloads and navigations.
+>
+> Forcing a distinct session per tab would mean `allowCookies: false`, which
+> also makes **every reload** a new session and inflates session counts. Do
+> not reach for it to solve a tab problem; use `pageId` (or a `tabId` you mint
+> yourself and put in scenario metadata) if you need to tell tabs apart in
+> queries.
+
+---
+
+## 4. Phase 2 — credentials from the existing broker
+
+`data-gateway` already has `src/rum/broker.server.ts`. Do not replace it —
+adapt to it. The library deliberately knows nothing about AWS account details:
+
+```ts
+export interface UwtRumCredentialsProvider {
+  /**
+   * Called once at startup and again shortly before each credential expiry.
+   * Returning `null` disables RUM for the session — the telemetry layer stays
+   * fully functional, it simply stops shipping.
+   */
+  load(): Promise<UwtRumBootstrap | null>;
+}
+
+export interface UwtRumBootstrap {
+  config: UwtRumAppMonitorConfig; // applicationId, region, applicationVersion required
+  credentials?: UwtRumCredentials; // accessKeyId, secretAccessKey, sessionToken, expiration
+}
+```
+
+### 4.1 Reference implementation
+
+```ts
+@Injectable({ providedIn: 'root' })
+export class DataGatewayRumCredentialsProvider implements UwtRumCredentialsProvider {
+  async load(): Promise<UwtRumBootstrap | null> {
+    let response: Response;
+    try {
+      response = await fetch('/rum/init', {
+        headers: { Accept: 'application/json' },
+        cache: 'no-store' // this response carries live, temporary AWS credentials
+      });
+    } catch {
+      // Network-level failure rejects before any response exists — treat it
+      // the same as an unreachable broker, per load()'s documented contract.
+      return null;
+    }
+
+    if (!response.ok) return null;
+
+    const init = await response.json();
+
+    // Credentials are required: without them the client would start and then
+    // fail every dispatch silently.
+    if (!init?.enabled || !init.config || !init.credentials) return null;
+
+    return { config: init.config, credentials: init.credentials };
+  }
+}
+```
+
+Import the types with `import type`, as above, so this file carries no
+runtime dependency on `@absaoss-cps/ngx-ui-watchtower/rum` at all.
+
+### 4.2 The three-state contract
+
+| Return                             | Meaning                                                                                                                                                                                                                                                                                                                          |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `null`                             | Disable RUM for this session. Works **mid-session** too — a later refresh returning `null` tears the running client down (calling the SDK's own `disable()`, so listeners/plugins/dispatch timer actually stop) and stops scheduling.                                                                                            |
+| `{ config, credentials }`          | Normal path.                                                                                                                                                                                                                                                                                                                     |
+| `{ config }` with no `credentials` | Valid **only** for an app monitor configured for unauthenticated access, and only if the session was never authenticated. On a _later_ refresh for an already-authenticated session, the sink keeps the existing credentials and retries, with a dev-mode warning — the AWS client has no way to clear credentials once applied. |
+
+### 4.3 Refresh behaviour you get for free
+
+- Refresh is scheduled **5 minutes before** `expiration`.
+- The delay is clamped to `MAX_TIMEOUT_MS` (2 147 483 647 ms — the 32-bit
+  signed limit `setTimeout` silently overflows past).
+- An already-expired or unparsable `expiration` does **not** fire immediately;
+  it falls back to a bounded 30 s retry, so a broker stuck returning bad
+  credentials cannot tight-loop the sink.
+- The app initializer `provideUwtTelemetryRumSink()` registers deliberately
+  **does not await** the sink's `init()`, so a slow or hung broker never
+  delays first paint. You do not need to write an initializer.
+
+### 4.4 What is deliberately absent from the config
+
+`UwtRumAppMonitorConfig` mirrors the SDK's `Config` **except**:
+
+- `identityPoolId`, `guestRoleArn` — the SDK's Cognito guest-identity flow.
+  Credentials come from your broker instead. **Do not try to add them back.**
+- `endpointUrl` — always recomputed from `endpoint`.
+- `sessionId`, `userId` — owned at runtime by the sink.
+
+---
+
+## 5. Phase 3 — retire `RumService` without changing the wire
+
+**This is the highest-risk part of the migration.** `@absaoss-cps/ngx-ui-watchtower` emits its
+own event types (`com.uwt.scenario`, `com.uwt.scenario.step`, `com.uwt.bi`)
+with its own payload envelopes. A naive "delete `RumService`, call
+`biTelemetry.track()` instead" **will silently change what CloudWatch
+receives** and break every existing dashboard, extended metric and Logs
+Insights query.
+
+From `DESIGN.md` §6:
+
+> It is configurable because **event types are a contract with whatever
+> already queries them** — extended metrics, Logs Insights queries,
+> dashboards.
+
+### 5.1 Procedure — do these in order
+
+**Step 1 — Inventory.** Before changing anything, find every call site and
+record what goes on the wire today:
+
+```bash
+rg -n "recordEvent|recordError|recordPageView|dispatch|pinUserId|addSessionAttributes" src/
+```
+
+Build a table. Do not skip the payload column — the event type alone is not
+parity:
+
+| Call site             | AWS API       | Event type       | Payload keys        | Notes                 |
+| --------------------- | ------------- | ---------------- | ------------------- | --------------------- |
+| `RumService.trackX()` | `recordEvent` | `dg.user.action` | `{action, page, …}` | used by dashboard "…" |
+| …                     |               |                  |                     |                       |
+
+**Step 2 — Decide the parity tool per row.** Three options, in order of
+preference:
+
+| Tool                                                      | Use when                                                             | What you get                                                                                                                                                                                                                                 |
+| --------------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`eventNamespace`**                                      | The existing types differ from `com.uwt.*` only by prefix            | Set `eventNamespace: 'dg'` once and all three library types become `dg.scenario`, `dg.scenario.step`, `dg.bi`. Cheapest option.                                                                                                              |
+| **`track(name, metadata, { eventType })`**                | An existing dashboard or metric filter needs a _specific_ event type | The event type is exactly yours; the **payload becomes the `UwtBIEvent` envelope** (`eventName`, `eventTime`, `metadata`, `application`, `scenarioId?`, `feature?`). Documented as _"a migration escape hatch, not a pattern to reach for."_ |
+| **`inject(UwtTelemetrySink).record(eventType, payload)`** | You need byte-exact payload parity                                   | Raw passthrough. You own the payload shape entirely. Use sparingly and comment why.                                                                                                                                                          |
+
+**Step 3 — Migrate, keeping both paths alive.** Do not delete `RumService`
+yet. Migrate call sites one at a time.
+
+**Step 4 — Diff the wire.** Verify before deleting. Turn on the debug flags
+and compare old vs new output:
+
+```js
+localStorage.setItem('debugScenario', 'true');
+localStorage.setItem('debugBI', 'true');
+```
+
+Every debug line's **second console argument is the literal object handed to
+the sink** — so console capture is full-fidelity, not a summary. Compare
+against the inventory table from Step 1.
+
+**Step 5 — Delete `RumService`** only once every row in the table is ticked.
+
+### 5.2 Page views — check this specifically
+
+The RUM client **already records a page view on every navigation** via
+`history.pushState`, which covers the Angular router automatically. The
+library deliberately adds no page-view recorder of its own:
+
+> There is deliberately no `provideUwtRouterPageViews()` … a second recorder
+> on top of it would produce **two** page views per navigation, double the
+> `interaction` counter, and leave the first page with a `timeOnParentPage` of
+> roughly zero.
+
+So:
+
+- If `RumService` records page views **manually**, you must either drop that
+  code (letting the SDK's automatic page views stand) or keep it via
+  `UwtRumTelemetrySink.recordPageView(pageId)` **and** set
+  `disableAutoPageView: true` — never both recorders at once.
+- If `data-gateway`'s routes carry identifiers, the automatic page id (with
+  the default `pageIdFormat: 'PATH'`) is the **resolved** path — one page id
+  per record id. That is a cardinality problem _and_ a PII problem. Derive the
+  template yourself, call `recordPageView(template)`, and set
+  `disableAutoPageView: true`.
+
+> ⚠️ **Route-template trap:** a route declared with `matcher` has no `path` at
+> all, so walking `routeConfig.path` reports every such route as `/`. Derive
+> the template from the segments the match actually consumed, putting
+> parameters back as `:name`.
+
+### 5.3 Reserved metadata prefix
+
+Keys under `aws:` are reserved by the RUM client — it drops them with a
+console warning. The sink filters them out before recording. If `RumService`
+sets any, they were already being dropped; do not port them.
+
+### 5.4 User identity
+
+`sink.setUserId(id)` / `setUserId(undefined)` — `setUserId('')` signs out
+too. Pass an **opaque** id — never an email, username or account number.
+
+> ⚠️ Signing out starts a **fresh session** with a new anonymous id
+> (`pinUserId` has no inverse), which emits a `session_start` event and
+> re-rolls sampling. If `RumService` does something different on sign-out,
+> note the behaviour change explicitly.
+
+---
+
+## 6. Phase 4 — declare the vocabulary
+
+Scenario, step and BI event names are **metric dimensions**. From
+`DESIGN.md` §4:
+
+> A typo here would not just produce a wrong number. It would silently start a
+> **second, incomplete** metric series, and the alarm built on the first one
+> would keep reading healthy. Interpolating an id — ``step(`load-${id}`)`` —
+> does the same at a larger scale. The type turns both into compile errors.
+
+Create `src/app/services/telemetry.schema.ts`:
+
+```ts
+/**
+ * This application's telemetry vocabulary.
+ *
+ * Scenario, step and business event names are metric dimensions, declared
+ * once here rather than as free text at each call site. Anything not listed
+ * below is a compile error.
+ */
+declare module '@absaoss-cps/ngx-ui-watchtower' {
+  interface UwtScenarioNames {
+    /** A router navigation, from click to activated route. */
+    'route-navigation': true;
+    /** Mounting and activating an embedded fragment. */
+    'fragment-load': true;
+    // …
+  }
+
+  interface UwtScenarioSteps {
+    'resolve-route': true;
+    activate: true;
+    // …
+  }
+
+  interface UwtBIEventNames {
+    /** The user exported the current result set. */
+    export_clicked: true;
+    // …
+  }
+}
+
+export {};
+```
+
+> There is a fourth augmentable registry, `UwtLoggerNames`. **Do not declare
+> it** — `data-gateway` has no logging (§3.2). Add it only if a log backend
+> appears later.
+
+### 6.1 The side-effect import convention
+
+A module augmentation applies **program-wide**, not per-file: once
+`telemetry.schema.ts` is part of the compilation — which your `tsconfig`'s
+`include` guarantees — every file is checked against the registries, whether or
+not it imports the schema. So this import is a convention, not a compiler
+requirement:
+
+```ts
+import '../../services/telemetry.schema';
+```
+
+Keep it anyway in the files that own the wiring — wherever you call
+`provideUwtTelemetry`, and in your router-telemetry service — so the dependency
+stays visible and the schema file cannot become unreferenced during a refactor.
+Components that merely pass a declared name to a service of your own do not
+need it; in the reference app,
+`app.component.ts`, `theme-toggle.component.ts` and
+`navigation-sidebar.component.ts` all pass declared BI names with no such
+import and type-check clean.
+
+### 6.2 What is and is not a closed vocabulary
+
+| Closed (augmentable, compile-checked)                        | Open (plain `string`) |
+| ------------------------------------------------------------ | --------------------- |
+| `UwtScenarioNames` → `name`                                  | `feature`             |
+| `UwtScenarioSteps` → `step()` **and** `aggregateStart/End()` | `operation`           |
+| `UwtBIEventNames` → `track()`                                | BI `eventType`        |
+| (`UwtLoggerNames` → `getLogger()` — not used here)           |                       |
+
+Mechanism: `UwtRegistered<T>` resolves to `string` while the registry is
+empty, then to `keyof T`. So adoption is incremental — names are unconstrained
+until the first augmentation, then fully checked. Steps and aggregates share
+one registry because they name the same kind of thing.
+
+If you wrap `track()` in a service of your own, type its parameter
+`UwtBIEventName`, not `string` — once `UwtBIEventNames` is augmented, a plain
+`string` is no longer assignable and the wrapper stops compiling.
+
+`'scenario-start'` and `'scenario-end'` are written by the library and need no
+declaration. They bookend every settled scenario's `steps[]` and do not count
+toward `stepCount` or `maxSteps`.
+
+---
+
+## 7. Phase 5 — propose scenarios and BI events
+
+### 7.1 The two concerns, and when to use which
+
+| Concern      | Answers                                                    | Emits                                |
+| ------------ | ---------------------------------------------------------- | ------------------------------------ |
+| **Scenario** | "Did this user journey succeed, and how long did it take?" | One RUM event at settlement          |
+| **BI event** | "Did this meaningful thing happen?"                        | One RUM event, deduped within 400 ms |
+
+A BI event that happens inside a journey should carry its `scenarioId`, so the
+two join up:
+
+```ts
+biTelemetry.track('export_clicked', { format }, { scenarioId: scenario.id });
+```
+
+(The third concern, logging, is out of scope here — §3.2.)
+
+### 7.2 How to find candidates
+
+Read `data-gateway`'s source and look for:
+
+- **Every await the user actually waits on** → a scenario. Fragment mount,
+  route load, a data fetch that gates the screen, an upload, an export.
+- **Every irreversible or meaningful click** → a BI event. Submit, export,
+  switch fragment, change a filter that costs a round trip.
+- **Every `catch` block** → `scenario.fail({ error })`. With no log backend,
+  the scenario record is the _only_ place that error is reported, so make sure
+  every catch that ends a journey settles it — a swallowed error that leaves
+  the scenario running becomes a misleading `timeout` half a minute later.
+
+### 7.3 Choose the right settle status — this is the whole point
+
+Four unsuccessful outcomes exist because _"each demands a different response,
+and collapsing them together would make the failure rate useless for
+alerting"_:
+
+| Status       | Method               | Meaning                                                                                              | Response                               |
+| ------------ | -------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| `success`    | `complete()`         | Journey reached its goal                                                                             | —                                      |
+| `failure`    | `fail({ error })`    | A defect — the journey broke                                                                         | Investigate; alert if the rate spikes  |
+| `abandoned`  | `cancel({ reason })` | Stopped being relevant: navigated away, superseded, page unloaded                                    | Engagement signal, **not** a defect    |
+| `incomplete` | `incomplete()`       | An expected path that did not reach the goal — no results, a guard declined, a flag routed elsewhere | Product signal, not an engineering one |
+| `timeout`    | _automatic_          | Never settled within its deadline                                                                    | Engagement signal, distinct from both  |
+
+Getting this wrong is the most common way to make a telemetry dashboard
+useless. A user navigating away mid-load is **not** a defect.
+
+> Prefer the named methods over `settle(status, …)`. _"Naming the outcome at
+> the call site is what lets someone find every place a journey can fail just
+> by searching for `.fail(`."_ `settle()` exists for adapters mapping an
+> external status.
+
+Terminal states are absorbing: a `catch` that calls `fail()` followed by a
+`finally` that calls `complete()` records the **failure**. That is deliberate.
+
+### 7.4 Starter catalogue for a shell
+
+Propose these to the user, then implement what they confirm. Adapt names to
+`data-gateway`'s real vocabulary.
+
+**Scenarios**
+
+| Name                 | Steps                              | Settles                                                                                                                           |
+| -------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `fragment-load`      | `request`, `mount`, `activate`     | `complete()` on first meaningful render; `cancel({reason:'superseded'})` if the user switches away; `fail({error})` on load error |
+| `route-navigation`   | `resolve-route`, `activate`        | §7.5 has a complete implementation to adapt                                                                                       |
+| `shell-boot`         | `bootstrap`, `auth`, `shell-ready` | `complete()` when the shell is interactive                                                                                        |
+| `auth-token-refresh` | `request`                          | `complete()` / `fail()` / `incomplete()` when the user is simply logged out                                                       |
+| `export-download`    | `request`, `transfer`              | `complete()` on save; `cancel({reason:'user-cancelled'})`                                                                         |
+
+**BI events** — `snake_case`, low cardinality, never an id interpolated in:
+`fragment_opened`, `export_clicked`, `filter_applied`, `search_submitted`
+(debounced — see §10.1), `sign_out_clicked`. Every one you settle on goes into
+`UwtBIEventNames` in the schema file from §6 — an undeclared name is a compile
+error once that registry has its first entry.
+
+Because there is no log stream to fall back on, put diagnostic detail on the
+scenario itself: `feature`/`operation` for classification, `statusCode` for
+error-category grouping, `reason` for a low-cardinality cause, and
+`setData()`/step metadata for the rest.
+
+### 7.5 Route navigation — a working implementation to adapt
+
+Router navigation looks trivial and is not. Below is a complete, working
+handler, already adapted for `data-gateway` (no logging). It came out of a
+mutation-tested implementation, and three of the things in it are not obvious
+— each was found the hard way. **Read the four notes after the code before
+changing anything in it.**
+
+```ts
+import { DestroyRef, inject, Injectable } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  Event as RouterEvent,
+  NavigationCancel,
+  NavigationCancellationCode,
+  NavigationEnd,
+  NavigationError,
+  NavigationSkipped,
+  NavigationSkippedCode,
+  NavigationStart,
+  Router
+} from '@angular/router';
+import {
+  UwtScenario,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import './telemetry.schema';
+
+const NAVIGATION_SCENARIO = 'route-navigation';
+
+/** Beyond this, a recorded click is assumed not to have caused the navigation. */
+const INTENT_MAX_AGE_MS = 2_000;
+
+/**
+ * Stable, low-cardinality causes, derived from the router's `code`.
+ * Angular's own typings say `reason` is "for debug purposes only — use `code`
+ * instead for a stable cancellation reason that can be used in production":
+ * `reason` is `ngDevMode`-gated, so it is empty in a production build, and for
+ * a rejected guard it is empty even in development.
+ */
+const CANCEL_REASON: Partial<Record<NavigationCancellationCode, string>> = {
+  [NavigationCancellationCode.Redirect]: 'redirect',
+  [NavigationCancellationCode.SupersededByNewNavigation]: 'superseded',
+  [NavigationCancellationCode.NoDataFromResolver]: 'no-data-from-resolver',
+  [NavigationCancellationCode.GuardRejected]: 'guard-rejected',
+  [NavigationCancellationCode.Aborted]: 'aborted'
+};
+
+const SKIP_REASON: Partial<Record<NavigationSkippedCode, string>> = {
+  [NavigationSkippedCode.IgnoredSameUrlNavigation]: 'same-url',
+  [NavigationSkippedCode.IgnoredByUrlHandlingStrategy]: 'url-handling-strategy'
+};
+
+/** `code` is optional, and a future Angular may add one you do not map. */
+function causeOf<TCode extends number>(
+  causes: Partial<Record<TCode, string>>,
+  code: TCode | undefined,
+  fallback: string
+): string {
+  return (code === undefined ? undefined : causes[code]) ?? fallback;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AppTelemetryService {
+  private readonly router = inject(Router);
+  private readonly scenarioTelemetry = inject(UwtScenarioTelemetryService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  /** Note 1: keyed by navigation id, never a single "current" field. */
+  private readonly navigations = new Map<number, UwtScenario>();
+
+  /** Note 2: a redirect's scenario, waiting to be continued. */
+  private pendingRedirectScenario?: UwtScenario;
+
+  /** Note 4: when the user last did something expected to start a navigation. */
+  private navigationIntentAt?: number;
+
+  private started = false;
+
+  /** Safe to call more than once. */
+  start(): void {
+    if (this.started) return;
+    this.started = true;
+
+    this.router.events
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((event) => this.onRouterEvent(event));
+  }
+
+  /** Call this from your nav-link click handler. See note 4. */
+  markNavigationIntent(): void {
+    this.navigationIntentAt = Date.now();
+  }
+
+  private onRouterEvent(event: RouterEvent): void {
+    if (event instanceof NavigationStart) {
+      const scenario =
+        this.consumePendingRedirectScenario() ??
+        this.scenarioTelemetry.start({
+          name: NAVIGATION_SCENARIO,
+          operation: 'lazy-route-load',
+          route: this.routeTemplate(event.url),
+          startedAt: this.navigationStartedAt(),
+          // Neither completed nor superseded within this window means a
+          // stuck chunk load, not a slow one.
+          timeoutMs: 30_000
+        });
+      scenario.step('resolve-route');
+      this.navigations.set(event.id, scenario);
+      return;
+    }
+
+    if (event instanceof NavigationEnd) {
+      this.settle(event.id, (scenario) => {
+        scenario.step('activate');
+        scenario.complete({ metadata: { finalUrl: event.urlAfterRedirects } });
+      });
+      return;
+    }
+
+    if (event instanceof NavigationCancel) {
+      const scenario = this.navigations.get(event.id);
+      if (scenario && event.code === NavigationCancellationCode.Redirect) {
+        // Note 2: continue this scenario on the next NavigationStart.
+        this.navigations.delete(event.id);
+        this.pendingRedirectScenario = scenario;
+        return;
+      }
+
+      // `message` keeps the router's debug text — useful locally, empty in a
+      // production build, which is why it cannot be the grouping dimension.
+      this.settle(event.id, (scenario) =>
+        scenario.cancel({
+          reason: causeOf(CANCEL_REASON, event.code, 'navigation-cancelled'),
+          message: event.reason || undefined
+        })
+      );
+      return;
+    }
+
+    if (event instanceof NavigationSkipped) {
+      // Note 3: both lines matter.
+      this.navigationIntentAt = undefined;
+      const reason = causeOf(SKIP_REASON, event.code, 'navigation-skipped');
+      this.consumePendingRedirectScenario()?.cancel({
+        reason,
+        message: event.reason || undefined
+      });
+      this.settle(event.id, (scenario) =>
+        scenario.cancel({ reason, message: event.reason || undefined })
+      );
+      return;
+    }
+
+    if (event instanceof NavigationError) {
+      this.settle(event.id, (scenario) =>
+        scenario.fail({ error: event.error, metadata: { url: event.url } })
+      );
+    }
+  }
+
+  /**
+   * Note 5: reduces a resolved URL to a route template. This version is only
+   * correct for STATIC routes — see the note below if data-gateway's routes
+   * carry identifiers.
+   */
+  private routeTemplate(url: string): string {
+    return url
+      .split(/[?#]/)[0]
+      .split('/')
+      .map((segment) => segment.split(';')[0])
+      .join('/');
+  }
+
+  /** Consumes the click timestamp, if one is fresh enough. */
+  private navigationStartedAt(): number | undefined {
+    const at = this.navigationIntentAt;
+    this.navigationIntentAt = undefined;
+
+    if (at === undefined || Date.now() - at > INTENT_MAX_AGE_MS) {
+      return undefined;
+    }
+    return at;
+  }
+
+  private consumePendingRedirectScenario(): UwtScenario | undefined {
+    const scenario = this.pendingRedirectScenario;
+    this.pendingRedirectScenario = undefined;
+    return scenario;
+  }
+
+  private settle(
+    navigationId: number,
+    apply: (scenario: UwtScenario) => void
+  ): void {
+    const scenario = this.navigations.get(navigationId);
+    if (!scenario) return;
+    this.navigations.delete(navigationId);
+    apply(scenario);
+  }
+}
+```
+
+Call `start()` once, from your root component's constructor.
+
+**Note 1 — key by `NavigationStart.id`, not a single "current" field.**
+Angular identifies concurrent navigations by id. A single field attributes the
+wrong duration whenever one navigation supersedes another.
+
+**Note 2 — a `CanMatch` redirect must _continue_ the same scenario.** A
+redirect fires `NavigationCancel` with
+`code === NavigationCancellationCode.Redirect` and then restarts under a _new_
+id. Stash the scenario and reuse it on the next `NavigationStart`, or you
+record two scenarios for one journey.
+
+**Note 3 — `NavigationSkipped` must be handled, or the stashed scenario
+leaks.** When a guard redirect lands back on the _current_ URL, the real event
+sequence is:
+
+```
+NavigationStart(id=N) → NavigationCancel(id=N, code=Redirect)
+                      → NavigationSkipped(id=N+1, IgnoredSameUrlNavigation)
+```
+
+The `NavigationSkipped` fires **instead of** the `NavigationStart` that note
+2's mechanism is waiting for. Without the `consumePendingRedirectScenario()`
+call in that branch, the stashed scenario is never resumed and sits open until
+some later, unrelated navigation wrongly reuses it — silently misattributing
+that navigation's timing to this one. Clearing `navigationIntentAt` there
+matters for the same reason: otherwise a skipped navigation leaves a stale
+click-intent that backdates the _next_, unrelated navigation.
+
+**Note 4 — click-intent backdating.** The router raises `NavigationStart`
+after event handling, guards and change detection have all run. Recording
+`Date.now()` at the click and passing it as `startedAt` keeps that gap — which
+the user experienced as part of the wait — inside the measurement. A mark
+older than `INTENT_MAX_AGE_MS` is discarded, so a stale one can't backdate an
+unrelated journey.
+
+**Note 5 — `routeTemplate` as written only handles static routes.** It strips
+the query string, fragment and matrix parameters, which is enough when no
+route has an `:id`-style segment. **Check `data-gateway`'s route config.** If
+any route is parameterized, this function will emit one `route` value per
+resolved id — exactly the cardinality explosion §10.3 warns about. In that
+case derive the template from the matched route config instead, putting each
+parameter back as `:name`, and beware that a route declared with `matcher` has
+no `path` at all — walking `routeConfig.path` reports every such route as `/`.
+
+---
+
+## 8. Phase 6 — the fragment contract (hand this to Unify / Aqueduct / LUM)
+
+> **Copy this section verbatim to the fragment teams.**
+
+Each fragment runs in its own realm. It must **forward** telemetry to the
+shell rather than create its own AWS client.
+
+```ts
+import {
+  UWT_BROADCAST_CHANNEL,
+  provideUwtTelemetry,
+  provideUwtTelemetrySink
+} from '@absaoss-cps/ngx-ui-watchtower';
+
+declare global {
+  interface Window {
+    __uwtTelemetryChannel?: string;
+  }
+}
+
+/**
+ * The channel the shell is hosting on, published by it on the top-level
+ * window. Same-origin is guaranteed — Web Fragments requires every fragment
+ * to share the shell's origin — but `top` access is still guarded, and
+ * `undefined` is a valid answer: it means "no shell", and the sink falls
+ * back to the default channel and degrades to a no-op.
+ */
+function shellChannelName(): string | undefined {
+  // No `window` at all during server rendering.
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  try {
+    return window.top?.__uwtTelemetryChannel;
+  } catch {
+    return undefined;
+  }
+}
+
+// fragment — no AWS client, no SDK bundle, no broker call
+providers: [
+  provideUwtTelemetry({
+    application: 'unify', // MUST differ from the shell and other fragments
+    environment: 'prod',
+    version
+  }),
+  provideUwtTelemetrySink('broadcast'),
+  // Resolved lazily — see the warning below.
+  { provide: UWT_BROADCAST_CHANNEL, useFactory: shellChannelName }
+];
+```
+
+> ⚠️ **Use the `useFactory` provider, not
+> `provideUwtTelemetrySink('broadcast', { channelName: shellChannelName() })`.**
+> That option binds the value with `useValue`, so it is read **eagerly**, when
+> your providers array is constructed — which can happen before the shell has
+> published the id. The `useFactory` form is resolved **lazily**, when the sink
+> is first constructed, which is the latest possible moment and cannot lose
+> that race. Both forms fall back to the default channel on `undefined`, so the
+> difference is invisible until it silently isn't.
+
+Application code inside the fragment is otherwise identical — same services,
+same methods.
+
+> **Why not a query parameter?** Because by default a fragment is _bound_: it
+> shares `window.location` with the host application, so
+> `window.location.search` gives you the **shell's** query string, not one of
+> your own. The shell also never sets your URL — the gateway routes to you by
+> `fragment-id`. The `window.top` global is the handshake instead.
+
+> **"But doesn't reframing trap `window`?"** It virtualizes the DOM and
+> navigation, not the whole global. Verified against `reframed`'s source
+> (`packages/web-fragments/src/elements/reframed/`): what it patches is
+> `document` query/creation APIs, `history`, `location`, `navigator`, window
+> size properties and event retargeting — enough to scope DOM work into the
+> fragment's shadow root. `top`, `parent`, `BroadcastChannel`,
+> `localStorage` and `sessionStorage` are not intercepted anywhere in that
+> package. `navigator` is in fact patched _to forward to the main window_
+> (`get: () => mainWindow.navigator`), which shows the intent is to make a
+> fragment behave as though it were in the host page, not to sandbox it away
+> from it.
+>
+> The strongest corroboration is that `BroadcastChannel` is untouched — if it
+> weren't, this library's entire forwarding design would not work, and
+> neither would Web Fragments' own documented `new BroadcastChannel('/cart')`
+> examples.
+>
+> This is an implementation detail rather than a documented API guarantee, so
+> the read is guarded. If it ever stopped working, `shellChannelName()`
+> returns `undefined`, the sink falls back to the default channel, and the
+> fragment behaves exactly as it does with no shell present — which is
+> **silent**. That is why §11.2 asks you to verify the id explicitly rather
+> than infer success from the absence of errors.
+
+### What must match the shell
+
+| Setting          | Rule                                                                                                                                                                                                       |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `eventNamespace` | **Must match.** Otherwise event types diverge and CloudWatch queries fragment along with the UI                                                                                                            |
+| Channel name     | **Must match, and it is per browser tab.** The shell generates one id per page load and publishes it as `window.__uwtTelemetryChannel`; read it off `window.top`. See §3.5 for why the default is not safe |
+| `application`    | **Must differ.** The forwarding sink stamps its realm's `application`, `environment` and `appVersion` onto every event, so you can tell which fragment emitted what                                        |
+
+### What a fragment must never provide
+
+| Do not                               | Why                                                                                                                                                   |
+| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `provideUwtTelemetryRumSink()`       | Builds a second AWS client — one visitor becomes two sessions. A realm has exactly one destination, so listed beside `'broadcast'` it fails bootstrap |
+| `UWT_RUM_CREDENTIALS_PROVIDER`       | Nothing in a fragment needs AWS credentials                                                                                                           |
+| `provideUwtTelemetryBroadcastHost()` | Only the shell hosts. Beside `'broadcast'` it would receive its own realm's messages and forward them again forever, so it warns and stays inactive   |
+| `UWT_LOG_API_PROVIDER`               | `'broadcast'` already binds it to the forwarding provider; one bound after that wins, and the fragment's logs bypass the shell                        |
+
+### What to expect inside a fragment
+
+- **`getSessionId()` is `undefined` for the first task.** The host answers an
+  identity handshake asynchronously. Do not assert on it at bootstrap. Work
+  done before the answer arrives is still correlated by `scenarioId`.
+- **Paint observation does not work.** A `PerformanceObserver` inside a
+  fragment watches its own hidden iframe, never the host frame where the
+  pixels appear — so it never fires. Settle with `complete()` instead.
+- **Log lines go to the shell too.** `'broadcast'` mode forwards them, and the
+  shell's log provider ships them — for `data-gateway`, the no-op one, so they
+  are discarded. `logger.query()` is answered by the shell's provider.
+- **A fragment with no shell still works.** The sink degrades to a no-op.
+  Scenarios run and settle, nothing throws. This is also what a _wrong_
+  channel name looks like, so it is worth verifying deliberately (§11.2).
+- **Correlation crosses realms as a string, not an object.** A `UwtScenario`
+  is a class instance and cannot cross a realm. Broadcast `scenario.id` and
+  open a child scenario with `parentScenarioId`.
+- **Durations are correct across realms.** `startedAt` is epoch ms, converted
+  through the _local_ `timeOrigin`. The one limit: a moment from before the
+  fragment's realm existed is clamped away and falls back to now.
+
+---
+
+## 9. RxJS traps
+
+`data-gateway` is Angular, so these will come up. Each cost real debugging
+time on this library's own integration.
+
+### 9.1 `take(1)` / `first()` upstream of `traceScenario` breaks settling
+
+`traceScenario` settles on the source's `complete`. An operator that
+unsubscribes after the first value — `take(1)`, `first()` — unsubscribes
+**before** the source's own `complete` notification reaches the downstream
+`tap()`. The scenario therefore never completes; it sits active until its
+timeout and records **`timeout`** instead of `success`.
+
+This is exactly the `CpsFileUploadComponent` bug: it wraps the callback
+observable in `take(1)`, so a successful upload never called
+`scenario.complete()`.
+
+**Fix:** settle in the pipeline's own `next`/`error` handlers instead of
+relying on completion.
+
+```ts
+return from(processFile(file)).pipe(
+  map((result) => {
+    scenario.complete({ metadata: { fileSize: file.size } }); // settle explicitly
+    return result;
+  }),
+  catchError((error) => {
+    scenario.fail({ error }); // the only place this error gets reported
+    return of(false);
+  })
+);
+```
+
+### 9.2 `switchMap` supersession needs `cancelOutcome`, not `cancel()`
+
+`switchMap` unsubscribes the prior inner Observable **before** the projector
+for the new value runs. So calling `scenario.cancel({ reason: 'superseded' })`
+inside the new projector is a **no-op** — the scenario has already been
+settled by the unsubscribe teardown.
+
+```ts
+// ✅ the reason arrives with the cancellation
+source$.pipe(
+  switchMap((value) => {
+    const scenario = this.scenarioTelemetry.start({
+      name: 'search',
+      feature: 'x'
+    });
+    scenario.step('query');
+    return this.search(value).pipe(
+      traceScenario(scenario, { cancelOutcome: { reason: 'superseded' } })
+    );
+  })
+);
+```
+
+Without `cancelOutcome`, the cancellation still happens (that is the point —
+otherwise it would record `timeout`), it just carries no reason.
+
+If you manage the scenario by hand rather than with `traceScenario`, cancel
+the _previous_ one at the top of the projector, which does work:
+
+```ts
+switchMap((value) => {
+  previousScenario?.cancel({ reason: 'superseded' });   // ✅ explicit, before starting the new one
+  const scenario = this.scenarioTelemetry.start({ … });
+  …
+})
+```
+
+### 9.3 Cancel in `ngOnDestroy` — always
+
+Every component that starts a scenario must settle it on destroy, or the
+scenario sits in the active registry (and in memory) until its timeout — and
+with `timeoutMs: 0`, for the life of the page. The three shapes in use:
+
+```ts
+// one scenario + a timer
+ngOnDestroy(): void {
+  this._destroyed = true;
+  clearTimeout(this._timeout);
+  this._scenario?.cancel({ reason: 'component-destroyed' });
+}
+
+// several scenarios
+ngOnDestroy(): void {
+  this.searchScenario?.cancel({ reason: 'component-destroyed' });
+  this.validateScenario?.cancel({ reason: 'component-destroyed' });
+}
+
+// a map keyed by entity
+ngOnDestroy(): void {
+  for (const s of this.scenarios.values()) s.cancel({ reason: 'component-destroyed' });
+  this.scenarios.clear();
+}
+```
+
+Use consistent reason strings: `'component-destroyed'`, `'superseded'`,
+`'user-cancelled'`. They are low-cardinality grouping keys.
+
+A dev-mode warning fires once more than 50 scenarios are active — treat it as
+a leak report, not noise.
+
+---
+
+## 10. Invariants and gotchas
+
+### 10.1 The session event budget is 200
+
+`sessionEventLimit` defaults to **200 events per session, across all
+telemetry** — including page views, web vitals and JS errors, which get
+dropped once it is exhausted.
+
+This is why **a scenario emits exactly one RUM event, at settlement**, with
+its steps packed into the payload.
+
+- **Leave `emitLifecycleEvents: false`.** It emits one event per step plus the
+  final packed event. Roughly thirty six-step scenarios would exhaust the
+  whole budget. It is a local-debugging tool.
+- **Debounce high-frequency BI events.** A search box should report once
+  typing pauses, not per keystroke — otherwise the session's event budget is
+  spent on intermediate states. `debounceTime(400)` before `track()` is the
+  usual shape.
+- Raising `sessionEventLimit` is possible but deliberate — it moves the
+  ceiling, it does not change the shape of the emission.
+
+### 10.2 Metadata must be flat primitives
+
+```ts
+type UwtTelemetryMetadata = Record<string, string | number | boolean | null>;
+```
+
+Silently dropped: objects, arrays, functions, symbols, `undefined`, and
+**non-finite numbers (`NaN`, `Infinity`)**. There is no recursive serializer to
+mis-tune — this is the type system, not a heuristic, keeping response bodies
+and user objects out of telemetry.
+
+> ⚠️ `maxKeys` (default **50**) applies to the **combined** bag across
+> `start({metadata})`, `setData()`, step metadata and settle-time outcome
+> metadata — not to each bag in isolation. Merges re-apply the cap. Exceeding
+> it truncates silently in production (dev mode warns once).
+
+### 10.3 Names are metric dimensions
+
+Never interpolate an id into a scenario name, step name or BI event name.
+`route` must be a **template** (`/customers/:id`), never a resolved URL —
+otherwise one dimension splits into one series per customer.
+
+### 10.4 Redaction — what you cannot turn off
+
+Always on, regardless of any `redact: false`:
+
+- the built-in credential denylist (`pass(word|wd)?`, `secret`, `token`,
+  `auth`, `credential`, `cookie`, `api[-_]?key`, `bearer`, `jwt`, `signature`,
+  `session[-_]?key`, `ssn` — substring, case-insensitive)
+- size caps (strings 1024, stacks 2048, 50 keys)
+- error normalization to `{name, message, stack?}`
+- `extraValueTransforms`
+
+`redact: false` only skips `extraKeyPatterns`, value-pattern scanning and
+URL-query stripping. _"If `redact: false` could disable that too, one careless
+call would quietly open a real security hole — so it cannot."_
+
+> ⚠️ **URL path segments are NOT scrubbed.** Only query strings and fragments
+> are. `/customers/john.smith@example.com` passes straight through. If
+> `data-gateway`'s URLs can carry personal data in a path segment, enable
+> `scanValuePatterns: ['email']` (and friends) or fix the URL design. An
+> opaque numeric id has no recognizable shape and will not be caught either
+> way.
+
+> ⚠️ `extraKeyPatterns` / `extraValuePatterns` with a `/g` or `/y` flag are
+> **stateful** (`.test()` advances `lastIndex`). The library resets it
+> defensively, but prefer non-global patterns.
+
+Value scanning is opt-in and off by default: `'email'`, `'creditCard'`
+(Luhn-validated), `'ssn'`, `'ipv4'`, `'phone'`. `'phone'` is explicitly the
+noisiest.
+
+### 10.5 BI deduplication
+
+Identical events within `dedupWindowMs` (400 ms) collapse. "Identical" means
+same `eventName` **+ scenarioId + eventType + feature + metadata content**.
+The window is measured against `performance.now()`, so it cannot be wedged by
+a clock jump. You do not need to throttle click handlers yourself.
+
+### 10.6 Timers and clocks
+
+- `MAX_TIMEOUT_MS` = 2 147 483 647. Past it, `setTimeout` overflows the 32-bit
+  signed int and fires ~immediately. The scenario timeout clamps **and
+  reschedules** so a clamped intermediate hop does not settle the scenario
+  early.
+- Durations use `performance.now()`, immune to wall-clock adjustments — a
+  sleeping device would otherwise produce negative or wildly inflated
+  durations.
+- `startedAt` is **epoch ms** (`Date.now()`), clamped to the page's lifetime;
+  an out-of-range value is ignored rather than producing a negative duration.
+- `delta` is the duration. `elapsed` is a **timeline position** (ms since the
+  host page loaded), not a second duration. `endTime` is by construction
+  `startTime + delta`.
+
+### 10.7 Cross-realm and multi-tab
+
+- **`BroadcastChannel` is same-origin only.** If a fragment is ever served
+  from a different origin, forwarding silently does nothing — no error. Verify
+  the fragments are same-origin before relying on this.
+- **Forwarding at unload is best-effort.** `BroadcastChannel` delivers on a
+  later task; a fragment torn down before that task runs may never have its
+  message received.
+- **Multi-tab cross-attribution — solved by the per-tab channel in §3.5.**
+  `BroadcastChannel` and the Web Locks leader election are both origin-wide,
+  so on a shared channel a losing tab's fragments still get recorded under the
+  winning tab's session. This is why §3.5 requires a
+  `crypto.randomUUID()`-derived channel name per page load rather than the
+  default. Note the failure mode is _mis-attribution_, not duplication —
+  leader election already prevents one event being recorded twice.
+- **A wrong channel name fails silently.** The broadcast sink fails open, so a
+  fragment on a channel no host is listening to behaves exactly like a
+  fragment with no shell: everything runs, nothing ships. Verify the wiring
+  deliberately (§11.2) rather than assuming silence means success.
+
+### 10.8 Correlation with the backend is by convention
+
+AWS performs no automatic cross-system correlation. Send `scenario.id` to the
+backend yourself as a request header (e.g. `X-Correlation-Id`). **The library
+deliberately ships no HTTP interceptor** — header naming and which hosts may
+receive the header are application decisions. Write one in `data-gateway` if
+you want it, and restrict it to your own API origins.
+
+### 10.9 Debug flags
+
+```js
+localStorage.setItem('debugScenario', 'true'); // ALSO force-enables User Timings
+localStorage.setItem('debugBI', '1');
+```
+
+Lines are prefixed `[<application>][<concern>]`, which is how you tell the
+shell's output from each fragment's once they start broadcasting:
+
+```
+[data-gateway][scenario] route-navigation success in 68ms -> com.uwt.scenario
+[unify][bi] export_clicked -> com.uwt.bi
+```
+
+Only `'true'` and `'1'` enable them; read on every emit, so a DevTools toggle
+takes effect without a reload. (A third flag, `debugLogger`, exists for the
+logging concern `data-gateway` does not use.) No production config switch is
+involved
+— that is the point.
+
+### 10.10 Other things that will bite
+
+- **Telemetry never throws into your app.** Every public entry point is
+  wrapped; in dev mode the suppressed error goes to `console.error`, in
+  production it stays silent. Do not add your own try/catch around telemetry
+  calls.
+- **`toRecord()` on a running scenario** returns `status: undefined` and may
+  have as few as one step. It deep-clones, so mutating the snapshot cannot
+  change what is emitted.
+- **Opening a step closes the previous one.** Settling closes whatever step is
+  open, with the scenario's own final status.
+- **`aggregateStart`/`aggregateEnd`** are for work that runs many times inside
+  one scenario (per-row formatting, per-item processing) — the total is the
+  useful number, and a hundred steps would just be noise. A second
+  `aggregateStart` for the same name before its `aggregateEnd` is ignored, and
+  an `aggregateEnd` with no matching start is ignored, so an early return
+  cannot corrupt the total.
+- **On `pagehide`** every in-flight scenario settles as `abandoned` /
+  `metadata.abandonedBy: 'page-hidden'` and the sink beacons. On
+  `visibilitychange` → hidden the sink flushes but scenarios are **left
+  running**, since the user may come back.
+- **CloudWatch RUM and CloudWatch Logs are separate streams.** They are joined
+  analytically via `sessionId` and `scenarioId`, not by AWS.
+- **Custom RUM events do not automatically become CloudWatch metrics.** They
+  land in the app monitor's log group. Someone must define a RUM _extended
+  metric_ server-side. The frontend's job is to emit low-cardinality
+  dimensions (`scenarioName`, `status`, `feature`, `operation`) and values
+  (`delta`, `stepCount`).
+- **Percentiles are never computed in the browser.**
+
+---
+
+## 11. Verification
+
+### 11.1 Unit tests
+
+The library ships **no test doubles, on purpose** — _"An application testing
+its own code needs a five-line provider array and, if it wants to assert on
+emitted events, a six-method sink double — both are shorter to write than to
+depend on."_
+
+Minimal harness — two providers, since there is no log provider to bind:
+
+```ts
+TestBed.configureTestingModule({
+  providers: [
+    provideUwtTelemetry({
+      application: 'data-gateway-test',
+      environment: 'test',
+      version: '0.0.0'
+    }),
+    { provide: UwtTelemetrySink, useClass: UwtNoopTelemetrySink }
+  ]
+});
+```
+
+To assert on emitted events, substitute a recording sink — all six methods:
+
+```ts
+{
+  provide: UwtTelemetrySink,
+  useValue: {
+    record: (eventType, payload) => events.push({ eventType, payload }),
+    recordError: () => undefined,
+    getSessionId: () => 'session-1',
+    setUserId: () => undefined,
+    getUserId: () => undefined,
+    flush: () => undefined
+  }
+}
+```
+
+Disable timeouts in tests with `withScenarios({ defaultTimeoutMs: 0 })`.
+
+> ⚠️ **jsdom implements no `BroadcastChannel`**, so the broadcast sink
+> degrades to a no-op in tests. That is documented, expected behaviour — not a
+> failure. Do not try to "fix" it with a polyfill unless you are specifically
+> testing the broadcast protocol.
+
+**Write tests that fail without the fix.** This library's own suite was
+mutation-checked: every guard was verified to actually break a test when
+removed. A test that passes with and without your change is proving nothing.
+
+### 11.2 Live verification
+
+Enable `debugScenario` and `debugBI` and drive the real app. Each debug line's
+second console argument is the exact object handed to the sink, so you can
+diff it against what you expect. Check specifically:
+
+- Exactly one `route-navigation` scenario per navigation, settling with the
+  right status.
+- No scenario left running after navigating away mid-journey.
+- No duplicate BI events from a double-click (dedup should collapse them).
+- Nothing at all on the server render.
+- **The channel id actually reaches the fragments.** In a fragment's realm,
+  read `window.top.__uwtTelemetryChannel` and confirm it matches the id the
+  shell generated. Because a wrong or missing channel
+  fails silently, this cannot be verified by absence of errors — check the
+  value. Once a fragment does broadcast, `UwtTelemetryBroadcastHost.received`
+  is the counter that proves the host is receiving.
+- **Open the app in two tabs** and confirm each has a different channel id.
+
+### 11.3 What actually reaches the wire
+
+This is a real captured scenario record — the exact object handed to
+`sink.record('com.uwt.scenario', …)`, for a lazy load that was superseded by a
+second one before it finished. Only the `application` value is substituted
+(it was captured from another app); everything else is verbatim. Use it to
+calibrate what your own scenarios will look like:
+
+```json
+{
+  "scenarioId": "250514ab-eb44-4783-81a3-3b2d88dba515",
+  "scenarioName": "table-page-load",
+  "feature": "table",
+  "status": "abandoned",
+  "startTime": "2026-09-05T11:11:04.211Z",
+  "endTime": "2026-09-05T11:11:04.273Z",
+  "delta": 62,
+  "elapsed": 3037,
+  "stepCount": 1,
+  "steps": [
+    {
+      "name": "scenario-start",
+      "startOffset": 0,
+      "endOffset": 0,
+      "stepDelta": 0,
+      "elapsed": 2975,
+      "status": "success"
+    },
+    {
+      "name": "fetch",
+      "startOffset": 1,
+      "metadata": { "abandonedBy": "caller" },
+      "endOffset": 62,
+      "stepDelta": 61,
+      "elapsed": 3037,
+      "status": "abandoned",
+      "reason": "superseded"
+    },
+    {
+      "name": "scenario-end",
+      "startOffset": 62,
+      "endOffset": 62,
+      "stepDelta": 0,
+      "elapsed": 3037,
+      "status": "abandoned",
+      "reason": "superseded",
+      "metadata": { "abandonedBy": "caller" }
+    }
+  ],
+  "previousStep": "fetch",
+  "metadata": { "abandonedBy": "caller" },
+  "application": "data-gateway",
+  "reason": "superseded"
+}
+```
+
+Things to read off it:
+
+- **One event per scenario**, with every step packed into `steps[]`.
+- **`scenario-start` / `scenario-end` bookend every settled record.** They are
+  written by the library, carry the final status, and do not count toward
+  `stepCount` (which reads `1` here, for the single real `fetch` step).
+- **`abandonedBy: 'caller'`** is stamped by `cancel()` and cannot be
+  overridden by caller metadata. `'page-hidden'` there instead means the tab
+  went away rather than your code cancelling.
+- **`reason` propagates** to the open step, the end marker and the root.
+- **`delta` (62) is the duration; `elapsed` (3037) is a timeline position** —
+  ms since the host page loaded. They are not two measurements of the same
+  thing.
+- `sessionId` and `userId` would also appear once the RUM client has
+  initialised and a user is signed in.
+- `application` is whatever `provideUwtTelemetry` was given. Events forwarded
+  from a fragment carry that fragment's name here instead, which is how you
+  tell which realm emitted what.
+
+### 11.4 Build a capture harness
+
+Strongly recommended, and cheap: a spec that drives your real components
+through `TestBed` with a capturing sink, then writes every captured payload to
+a checked-in file. That file turns "the telemetry looks right" into a
+reviewable artifact — a diff shows anyone exactly how a change alters what
+reaches CloudWatch, including for statuses that are hard to trigger by hand.
+
+The shape: a `CapturingSink extends UwtTelemetrySink` that pushes
+`(eventType, payload)` into an array, one `it()` per case driving a real
+component, and a final `it()` that writes the array to disk as JSON.
+
+---
+
+## 12. Quick reference
+
+### Imports by entry point
+
+```ts
+// what data-gateway uses from '@absaoss-cps/ngx-ui-watchtower'
+import {
+  provideUwtTelemetry,
+  provideUwtTelemetryBroadcastHost,
+  UwtTelemetryBroadcastHost, // its `received` counter — §11.2
+  provideUwtTelemetrySink, // fragments only ('broadcast' | 'noop')
+  withScenarios,
+  withBIEvents,
+  withRedaction,
+  UwtScenarioTelemetryService,
+  UwtScenario,
+  UwtBITelemetryService,
+  traceScenario,
+  UwtTelemetrySink,
+  UwtNoopTelemetrySink,
+  UwtTelemetryMetadata,
+  UwtScenarioNames,
+  UwtScenarioSteps,
+  UwtBIEventName,
+  UwtBIEventNames,
+  UWT_BROADCAST_CHANNEL,
+  UWT_DEFAULT_BROADCAST_CHANNEL,
+  UWT_LOG_API_PROVIDER, // shell: bound to UwtNoopLogApiProvider (§3.2)
+  UwtNoopLogApiProvider
+} from '@absaoss-cps/ngx-ui-watchtower';
+
+// the whole of '@absaoss-cps/ngx-ui-watchtower/rum' — seven names
+import {
+  provideUwtTelemetryRumSink,
+  UwtRumTelemetrySink,
+  UWT_RUM_CREDENTIALS_PROVIDER,
+  type UwtRumCredentialsProvider,
+  type UwtRumBootstrap,
+  type UwtRumCredentials,
+  type UwtRumAppMonitorConfig
+} from '@absaoss-cps/ngx-ui-watchtower/rum';
+```
+
+Also exported from `@absaoss-cps/ngx-ui-watchtower`, but **not used by `data-gateway`** — the
+whole logging concern (§3.2): `withLogging`, `UWT_LOG_CONFIG`, `UwtLogConfig`,
+`UwtLoggerService`, `UwtLogger`,
+`UwtLogApiProvider`, `UwtBroadcastLogApiProvider`, `UwtLogQuery`,
+`UwtLogRecord`, `UwtLogDetail`,
+`UwtLogLevel`, `UWT_LOG_LEVEL_ORDER`, `UwtLoggerName`, `UwtLoggerNames`.
+
+### Scenario API
+
+```ts
+const s = scenarioTelemetry.start({
+  name,                 // declared in UwtScenarioNames
+  feature?, operation?, // plain strings — free-form classification
+  route?,               // a TEMPLATE, never a resolved URL
+  startedAt?,           // epoch ms, for click-intent backdating
+  timeoutMs?,           // default 30_000; 0 disables
+  metadata?, parentScenarioId?
+});
+
+s.step(name, metadata?);          // opening a step closes the previous one
+s.endStep(detail?); s.failStep(error, detail?);
+s.aggregateStart(name); s.aggregateEnd(name);
+s.setData(metadata);              // merges, re-capped at maxKeys
+
+s.complete(outcome?);             // success
+s.fail({ error, statusCode? });   // failure
+s.cancel({ reason });             // abandoned
+s.incomplete(outcome?);           // incomplete
+
+s.id;                             // the correlation id
+```
+
+### BI
+
+```ts
+biTelemetry.track(
+  'export_clicked', // declared in UwtBIEventNames
+  { format: 'csv' },
+  { scenarioId: s.id, feature: 'reports' }
+);
+```
+
+---
+
+## 13. Checklist
+
+- [ ] Both `paths` entries; both jest mappings **anchored**
+- [ ] `allowedCommonJsDependencies: ["shimmer"]`; `skipLibCheck` where needed
+- [ ] Secondary entry point has its own tsconfigs + root `references`
+- [ ] No relative, deep, or re-exported imports of the library (npm-swap contract)
+- [ ] `provideUwtTelemetry` + RUM sink + **broadcast host** + credentials binding
+- [ ] `UWT_LOG_API_PROVIDER` bound to **`UwtNoopLogApiProvider`** — the broadcast host fails at bootstrap without a log provider
+- [ ] **No logging used** — no `UwtLoggerService`, no `withLogging`
+- [ ] **Per-tab channel id** generated once per page load and passed to every fragment
+- [ ] Credentials provider adapted to `broker.server.ts`, `cache: 'no-store'`, returns `null` on any failure
+- [ ] `RumService` inventory table complete, every row migrated and diffed **before** deletion
+- [ ] Page views: exactly one recorder, not two
+- [ ] `telemetry.schema.ts` created (scenarios, steps and BI event names) and side-effect-imported in the files that own the telemetry wiring (§6.1)
+- [ ] Every `catch` that ends a journey calls `scenario.fail({ error })` — there is no log stream to catch it otherwise
+- [ ] Every component that starts a scenario cancels it in `ngOnDestroy`
+- [ ] No `take(1)`/`first()` upstream of `traceScenario`
+- [ ] `switchMap` supersession uses `cancelOutcome`
+- [ ] Scenarios settle with the _right_ status (`abandoned` ≠ `failure`)
+- [ ] Tests fail without the code they test
+- [ ] Verified live with the debug flags, and verified silent under SSR
+- [ ] §8 handed to the fragment teams
diff --git a/temp_docs/SESSION-LIFECYCLE.md b/temp_docs/SESSION-LIFECYCLE.md
new file mode 100644
index 0000000..34cc44e
--- /dev/null
+++ b/temp_docs/SESSION-LIFECYCLE.md
@@ -0,0 +1,243 @@
+# Session lifecycle and `sessionId`
+
+How sessions work for ngx-ui-watchtower: who owns them, when `sessionId` exists, when it changes,
+and what the library should fix.
+
+**Sources.** The installed `aws-rum-web` **3.2.1** source (`@aws-rum/web-core` and
+`@aws-rum/web-slim` 3.2.1, under `node_modules/`), the library source on branch
+`15-add-sessionid-and-userid-to-bi-events`, and the AWS documentation. Each claim is marked:
+
+- **[code]** — verified by reading the source; not run in a browser.
+- **[doc]** — stated in AWS documentation.
+- **[unverified]** — browser behavior not tested.
+
+SDK paths below are relative to `node_modules/@aws-rum/web-core/dist/es/` unless stated otherwise.
+Library paths are relative to `projects/ngx-ui-watchtower/`.
+
+## Summary
+
+The AWS RUM client owns the session completely. The library never creates, stores or rotates a
+session id. It shapes the session in three ways only: it turns cookies on (so a session survives
+reloads), it decides when the RUM client exists (so when `sessionId` becomes available), and it
+rotates the session on sign-out.
+
+The library should not add its own session management. It should fix five risks in how it uses
+the SDK's session (see [Risks and recommended fixes](#risks-and-recommended-fixes)).
+
+## 1. Session lifecycle
+
+All of it lives in the SDK's `SessionManager`.
+
+**Creation.** A session is created lazily, on the first `getSession()` call:
+
+- At construction the session is a nil placeholder (`00000000-…`), or the session restored from a
+  valid `cwr_s` cookie. **[code]** `sessions/SessionManager.js:40-57`
+- `getSession()` creates a session (UUID v4) when the current one is nil or expired.
+  **[code]** `sessions/SessionManager.js:105-114, 304-327`
+- `getSession()` is called by every `recordEvent`, by every dispatch that has events, and by
+  `getSessionId()`. So reading the id has side effects: it can create or rotate the session and
+  emit `session_start`. **[code]** `event-cache/EventCache.js:90, 138, 346`
+
+**Lifetime.** `sessionLengthSeconds` (default 1800 s) is an **inactivity timeout**:
+
+- The expiry moves to now + 30 min on every *recorded* event (`incrementSessionEventCount` →
+  `renewSession`). **[code]** `sessions/SessionManager.js:240-243, 348-352`
+- Rotation is lazy: nothing happens at the moment of expiry; the next `getSession()` call creates the
+  new session. **[code]**
+- User activity alone doesn't renew it — only recorded events. The library's default telemetries
+  (`errors`, `performance`, `http`) don't include DOM interactions.
+  **[code]** `rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts:382-386`
+- AWS describes the setting only as "The duration of a session (in seconds)". The sliding
+  behavior comes from the code. **[doc]**
+  ([configuration.md](https://github.com/aws-observability/aws-rum-web/blob/main/docs/configuration.md))
+
+**Replacement.** A new id replaces the old one on expiry, on `startSession()` (the library calls it
+on sign-out) and on `pinSessionId()` (the library never calls it). Each new session re-rolls
+sampling; the nil placeholder and the first real session share one decision.
+**[code]** `sessions/SessionManager.js:308-313`
+
+## 2. When `sessionId` becomes available
+
+`UwtRumTelemetrySink.getSessionId()` returns `this.awsRum?.getSessionId()`, so it is `undefined`
+until the client exists, then synchronous. **[code]** `rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts:249-255`
+
+The order:
+
+1. An app initializer starts `sink.init()` without waiting for it.
+   `src/lib/providers/uwt-telemetry-common.providers/uwt-telemetry-common.providers.ts:309-321`,
+   `rum/src/lib/uwt-rum.providers/uwt-rum.providers.ts:39-41`
+2. `performInit` awaits `credentialsProvider.load()` (the broker request), then
+   `import('aws-rum-web')` (a chunk download), then constructs `AwsRum`.
+   `uwt-rum-telemetry.sink.ts:153-176`
+3. From then on, `getSessionId()` returns the restored cookie session or creates one on the spot.
+
+So it is **asynchronous**: available after bootstrap, one broker round-trip and one chunk load.
+It is never available:
+
+- on the server, or with telemetry off (`canStart`, `uwt-rum-telemetry.sink.ts:110-112`);
+- for the rest of the page if the broker returns `null` or `load()` throws
+  (`uwt-rum-telemetry.sink.ts:156-160, 177-180`) — as of version 0.3.0; see risk 3 below for the
+  retry since added;
+- after a credential refresh returns `null` — it disappears mid-page
+  (`uwt-rum-telemetry.sink.ts:499-503`). **[code]**
+
+In a fragment, `UwtBroadcastTelemetrySink.getSessionId()` returns the host's last announced id,
+and `undefined` until the host answers.
+**[code]** `src/lib/sinks/uwt-broadcast/uwt-broadcast-telemetry.sink.ts:65, 99-101, 124-132`
+
+## 3. When `sessionId` changes
+
+| Trigger | Changes? | Why |
+|---|---|---|
+| Route navigation | No | It only records a page view, which renews the expiry. **[code]** |
+| Reload within 30 min of the last recorded event | No | Restored from `cwr_s`, because the library sets `allowCookies: true` (the SDK default is `false`). **[code]** `uwt-rum-telemetry.sink.ts:377`, `sessions/SessionManager.js:279-294` |
+| Reload after that, or with cookies unavailable | Yes | Cookie expired or never written. AWS: cookies make the IDs "persist across page loads". **[doc]** ([RUM cookies](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-privacy.html#CloudWatch-RUM-cookies)) |
+| Tab hidden or visible | No | It only flushes. **[code]** `dispatch/Dispatch.js:55-71, 195-197` |
+| 30 min with no recorded event | Yes, on the next `getSession()` | Lazy expiry. **[code]** |
+| Event cap (200) reached | Not immediately | Dropped events stop renewing, so the session rotates 30 min after the last *recorded* event, even while the user is active. **[code]** `event-cache/EventCache.js:92-98` |
+| Sign-out: `setUserId(undefined)` or `''` | Yes | `startSession({ userId: uuid })` creates a new session and emits `session_start`. **[code]** `uwt-rum-telemetry.sink.ts:268-279` |
+| Sign-in: `setUserId(id)` | No | `pinUserId` changes only the user. **[code]** |
+| App re-bootstrap in the same page | No, if the cookie is valid | The new `AwsRum` restores `cwr_s`. **[code]** |
+
+## 4. AWS RUM vs. the library
+
+- **AWS RUM controls** creation, expiry, rotation and persistence of the id, sampling and the
+  event cap. **[code]**
+- **The library controls:**
+  - `allowCookies: true` by default — the only reason a session survives reloads;
+  - pass-through of `sessionLengthSeconds`, `sessionEventLimit`, `sessionSampleRate`,
+    `suppressSessionStartEvent`, `userIdRetentionDays` and `cookieAttributes` (each omitted when
+    unset, so the SDK default applies — `buildRumConfig`, `uwt-rum-telemetry.sink.ts:376-424`);
+  - when the client exists (section 2), and the sign-out rotation.
+- **The library never** seeds `sessionId` or `userId` at construction (`buildRumConfig` forwards
+  neither), calls `pinSessionId`, caches the id, or mints its own.
+
+## 5. End-to-end flow
+
+1. **Read.** Each emitter reads `sink.getSessionId()` when it builds a payload:
+   - BI events: `src/lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service.ts:121-125`;
+   - scenarios: `src/lib/scenario/uwt-scenario/uwt-scenario.ts:473, 586-592, 682` — read again for
+     the start, each step and the end;
+   - log records: `src/lib/services/uwt-logger.service/uwt-logger.service.ts:321-324`.
+2. **Record.** `sink.record()` hands the payload to `awsRum.recordEvent`, or buffers it before init
+   (newest 100 kept) and replays it after init. `uwt-rum-telemetry.sink.ts:204-237, 562-581`
+3. **Dispatch.** The SDK puts the ids on the batch, not on each event: `createRequest()` reads
+   `UserDetails: { userId, sessionId }` when the batch is sent. **[code]** `dispatch/Dispatch.js:223-231`;
+   `@aws-rum/web-slim/dist/es/orchestration/Orchestration.js:137`: "sessionId rides on UserDetails
+   per batch, not per event".
+4. **Fragments.** The fragment sink forwards to the host. The host announces its identity only on:
+   - winning the leader election;
+   - a fragment's `identity-request`;
+   - sign-in or sign-out;
+   - fragment activity, when the id changed since the last announcement.
+
+   It never announces its own session change unprompted.
+   **[code]** `src/lib/sinks/uwt-broadcast/uwt-broadcast-host.service.ts:100-106, 137-176, 266-285`
+
+The payload's `sessionId` can therefore differ from the batch's:
+
+- **buffered before init** — the payload has `undefined`, the batch has the real id (documented in
+  DESIGN.md §5);
+- **after sign-out** — see risk 1;
+- **a fragment's first event after the host's session changes** — it carries the old id.
+
+## 6. Configuration and defaults
+
+SDK defaults: `@aws-rum/web-slim/dist/es/orchestration/Orchestration.js:30-64`. The library keeps
+all of them except `allowCookies`.
+
+| Option | SDK default | Effect on the session |
+|---|---|---|
+| `allowCookies` | `false` (library: `true`) | Persists `cwr_s` (session) and `cwr_u` (user) across page loads |
+| `sessionLengthSeconds` | 1800 | Inactivity window, renewed by each recorded event |
+| `sessionEventLimit` | 200 (`0` = no limit) | Cap per session; the count is stored in the cookie and survives reloads |
+| `sessionSampleRate` | 1 | Re-rolled per new session; an unsampled session still has an id |
+| `userIdRetentionDays` | 30 (`0` = nil user id) | Lifetime of `cwr_u` |
+| `cookieAttributes` | `domain: hostname, path: '/', sameSite: 'Strict', secure: true, unique: false` | `unique: false` means one cookie name for every app monitor on the hostname |
+| `suppressSessionStartEvent` | `false` | Whether a new session emits `session_start` |
+
+## 7. Edge cases
+
+- **Multiple tabs.** Each tab reads the cookie once, at construction, then keeps its own session in
+  memory. **[code]**
+  - Tabs opened while the cookie is valid share one id. They drift apart once one of them rotates
+    (inactivity or sign-out).
+  - Each tab overwrites the cookie with its own session; the next page load adopts whichever wrote
+    last.
+  - Two tabs that start with no cookie get two different sessions.
+  - Fragments on the default broadcast channel: a losing tab's fragment events land in the winning
+    tab's session. DESIGN.md documents this and prescribes a per-page-load channel.
+- **Several apps on one hostname.** With `unique: false`, app monitors on the same host and path
+  share `cwr_s` and `cwr_u`: the same id, sampling decision and restored event count. **[code]**
+  `cookieAttributes.unique: true` separates only `cwr_s`: in 3.2.1 the user cookie is always the
+  unsuffixed `cwr_u` (`sessions/SessionManager.js:274-277`), although the AWS docs say all four
+  storage names get the suffix.
+- **Reload into a capped or unsampled session.** The restored session never gets an expiry:
+  `getSessionFromCookie` doesn't set `sessionExpiry`, and `new Date() >= undefined` is `false`;
+  only recorded events set it. **[code]** `sessions/SessionManager.js:96, 112, 279-294`
+  - A tab reloaded into a session that already hit 200 events, or wasn't sampled, keeps it for the
+    rest of that page's life and drops every event.
+  - An SDK bug in 3.2.1; it only matters with a sample rate below 1 or heavy sessions.
+- **HTTP (not HTTPS) outside localhost.** The `Secure` cookie is rejected, so every load gets a new
+  session and a new user id. **[unverified]**
+- **Failed or slow init.**
+  - Everything recorded before init carries `undefined`.
+  - The buffer keeps the newest 100 items.
+  - A failed init is never retried, so the whole page runs without a session. **[code]**
+- **Shared device.**
+  - `pinUserId(appUserId)` writes the app's user id into `cwr_u` for 30 days.
+    **[code]** `sessions/SessionManager.js:339-346`
+  - If someone closes the tab without signing out, the next page load restores that id as the
+    anonymous user, so the next visitor's events carry the previous user's id until sign-in.
+    **[code]** `sessions/SessionManager.js:251-262`
+  - A `setUserId(undefined)` before init does nothing to RUM. **[code]**
+
+## Risks and recommended fixes
+
+**Status:** risk 3 is fixed and the docs are corrected, in the working tree of branch
+`15-add-sessionid-and-userid-to-bi-events` (not committed). Risks 1, 2 and 4 were implemented, then
+removed as not worth their cost; risk 5 is documented. The SDK bug report is still open.
+
+| Risk | Decision |
+|---|---|
+| 1 | Not changed. Saving a few seconds of attribution isn't worth a new failure mode: the SDK's `dispatch()` returns no promise, so a failed send on sign-out would surface as an unhandled rejection. |
+| 2 | Not changed. It only affects apps that call `setUserId(undefined)` when nobody signed in; the docs now say to call it on a real sign-out only. A guard needed a new `localStorage` key and its edge cases. |
+| 3 | Fixed: a failed broker request is retried every 30 s, up to ten attempts, with the buffer kept; a sign-out made meanwhile is applied when the client starts. A failed SDK download or client start is not retried, because browsers remember a failed module import. The whole start runs outside Angular's zone, so the SDK's dispatch interval and the sink's timers no longer keep a zone-based app unstable (an older bug, found in review). |
+| 4 | Not changed. Only a fragment's first event after a shell session change carries the old id in its payload; the RUM batch is right, and the host re-announces after that event. A fix needed new public API and broke sinks written with `implements`. |
+| 5 | Documented (DESIGN.md sign-out, `userIdRetentionDays` JSDoc); `userIdRetentionDays: 0` is the option. |
+| Docs | `sessionLengthSeconds`, `allowCookies`, `cookieAttributes` (`unique` renames only `cwr_s`) and the `load()` contract (throw to retry, `null` to disable) are corrected in JSDoc, DESIGN.md and README. |
+
+1. **Sign-out misattributes recent events.** Events still queued (up to 5 s, at most 100) go out
+   under the new anonymous user and session, because ids are attached at dispatch.
+   **Fix:** call `this.awsRum.dispatch()` just before `startSession()` in `setUserId`.
+   `dispatchFetch` builds the request synchronously (`dispatch/Dispatch.js:16-22`), so that batch
+   keeps the old ids.
+2. **Session rotates on every page load.** `setUserId(undefined)` rotates even when nobody was
+   signed in. Auth libraries that emit "not signed in" at startup start a new session on every load,
+   breaking reload continuity and inflating session counts.
+   **Fix:** rotate only on a transition from a signed-in user to none.
+3. **A transient broker failure disables RUM for the page.** No session and no `sessionId` until
+   the next load.
+   **Fix:** retry init with backoff, like credential refresh already does.
+4. **Fragments carry a stale or missing `sessionId`.** The host doesn't announce when it initializes
+   or rotates on its own.
+   **Fix:** re-announce once the host's sink finishes init — for example a small "identity changed"
+   hook on the sink. Or accept it: the RUM batch is still correct.
+5. **Shared-device user carry-over** (section 7).
+   **Fix:** document it at minimum. Rotating at init when no app user is pinned and the restored
+   RUM user id is the last app user would fix it, but it interacts with risk 2 — a product decision.
+
+**Docs:**
+
+- DESIGN.md:401 and the `sessionLengthSeconds` JSDoc
+  (`rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts:68`) should say "inactivity timeout,
+  renewed by each recorded event", not "session length".
+- Recommend `cookieAttributes.unique: true` when several app monitors share a hostname (it
+  separates only the session cookie).
+- Report the restored-session expiry bug to `aws-rum-web`.
+
+## Should the library manage sessions itself?
+
+No. Keep delegating to RUM and never mint an id. Seeding `sessionId` or calling `pinSessionId`
+switches the SDK to manual mode, where it never rotates the id on its own
+(`sessions/SessionManager.js:89-103`). Fixes 1–4 are small and stay within the current design.
diff --git a/temp_docs/WATCHTOWER_LAB_PLAN.md b/temp_docs/WATCHTOWER_LAB_PLAN.md
new file mode 100644
index 0000000..3ce7f44
--- /dev/null
+++ b/temp_docs/WATCHTOWER_LAB_PLAN.md
@@ -0,0 +1,171 @@
+# Plan: the Watchtower Lab
+
+For the agent working on `@absaoss-cps/ngx-ui-watchtower` in its own
+repository. Read `CLAUDE_HANDOFF.md` first for the library itself; this file
+is the plan for testing it end to end without any consuming app.
+
+## Why
+
+In cps-shared-ui, the library's only real-browser exercise was the
+`composition` demo app, which stays behind — and even there RUM never ran:
+its credentials provider calls `/rum/init`, and nothing serves that path.
+
+The library's 822 unit tests run under jsdom, which has none of these: a real
+`BroadcastChannel`, Web Locks, `pagehide`/`sendBeacon`, User Timings, separate
+JavaScript realms, or a RUM SDK talking to a network. The lab makes the new
+repository test the library the way a real application uses it.
+
+## Decisions already made by the user
+
+- **No real AWS.** RUM runs against a local mock endpoint, fully offline. No
+  AWS account or credentials are involved, in CI or locally.
+- **Real Web Fragments** for the micro-frontend part — the `web-fragments`
+  package with its gateway and `<web-fragment>` element — not plain iframes.
+
+## Layout
+
+```
+projects/
+  ngx-ui-watchtower/          the library
+  watchtower-lab-shell/       Angular app with SSR — RUM sink, broadcast host
+  watchtower-lab-fragment/    zoneless Angular app — a Web Fragment in 'broadcast' mode
+  watchtower-consumer-smoke/  minimal app installed from the packed .tgz, never from source
+lab server = the shell's SSR Express server, extended with:
+  Web Fragments gateway       getNodeMiddleware(gateway) from 'web-fragments/gateway/node';
+                              registerFragment({ fragmentId: 'lab-fragment', endpoint, routePatterns })
+  mock RUM broker             GET /rum/init
+  mock RUM dataplane          POST /appmonitors/:id — keeps every PutRumEvents batch
+  mock log backend            POST /api/logs, GET /api/logs?… (answers query())
+  test hooks                  GET /__lab/rum, GET /__lab/logs, POST /__lab/reset,
+                              POST /__lab/broker-mode (ok | null | fail | short-expiry)
+e2e/                          Playwright against the lab server
+```
+
+## Key mechanisms
+
+**The real RUM SDK, against a local endpoint.** `UwtRumAppMonitorConfig`
+exposes `endpoint` and `signing`. The mock broker returns
+`endpoint: 'http://localhost:<port>'`, `signing: false` and fake credentials.
+`aws-rum-web` then runs unmodified, and every batch it would send to AWS lands
+in the mock dataplane, where tests can assert on exactly what AWS would
+receive. The credentials are never used to sign anything, but they must be
+present: the sink schedules a credential refresh only when credentials arrive,
+so without them `short-expiry` could never trigger one. Each broker mode
+exercises a behaviour:
+
+| Broker mode    | Expected library behaviour                        |
+| -------------- | ------------------------------------------------- |
+| `ok`           | RUM records normally                              |
+| `null`         | RUM disabled for the session; no requests at all  |
+| `fail`         | Fail-open: the app is unaffected, nothing is sent |
+| `short-expiry` | Credentials refresh, without a tight retry loop   |
+
+- `short-expiry` returns an `expiration` just over 5 minutes away — the sink
+  refreshes 5 minutes before expiry, so the refresh fires within seconds.
+  Also cover an already-expired `expiration`: the sink must fall back to its
+  30-second retry rather than refresh immediately.
+- `fail` answers with an HTTP error, and the lab's credentials provider must
+  **throw** on a non-OK response rather than return `null`. Returning `null`
+  would make `fail` indistinguishable from `null`; throwing exercises the
+  sink's own failure path, which disables RUM while the app carries on.
+
+**Web Fragments.** The shell calls `initializeWebFragments()` from
+`web-fragments` and renders `<web-fragment fragment-id="lab-fragment">`. The
+gateway, mounted in the SSR server, routes that fragment to the fragment app.
+
+- The shell provides `provideUwtTelemetryRumSink()`,
+  `provideUwtTelemetryBroadcastHost(channelId)` and a log provider bound to
+  `UWT_LOG_API_PROVIDER` (the mock backend). The broadcast host fails at
+  bootstrap without a log provider.
+- The fragment provides `provideUwtTelemetrySink('broadcast')` and nothing
+  else for destinations; it reads the per-tab channel id from
+  `window.top.__uwtTelemetryChannel`, bound through `UWT_BROADCAST_CHANNEL`
+  with `useFactory`. The library's DESIGN.md §13 has the full pattern.
+
+**Coverage of modes.** The shell uses SSR (the library's server no-ops) and
+a zone. The fragment is zoneless — the library schedules its long-lived
+timers through `runOutsideAngular` only when a zone exists, so both paths get
+exercised.
+
+**The consumer smoke app** installs the library from `npm pack` output
+rather than source paths. That checks what source paths hide: the package's
+exports map, its typings, optional peer dependencies, and the guarantee that
+an app which never imports `/rum` has no `aws-rum-web` in its bundle.
+
+## Lab shell pages, for manual exploration
+
+One page per concern — a few buttons plus a live readout:
+
+- **Scenarios** — start; steps; every settle method; timeout; backdating;
+  aggregates; `traceScenario` with `switchMap` supersession; `toRecord()`.
+- **BI** — `track`; the 400 ms deduplication; an event-type override.
+- **Logging** — named loggers; per-logger levels; `mirrorErrorsToRum`;
+  `query()` against the mock backend.
+- **Identity** — sign in; sign out with `undefined` and with `''`.
+- **Privacy** — values that must be redacted, with `scanValuePatterns` on.
+- **Lifecycle** — hide the tab; navigate away.
+- **Fragments** — the embedded fragment, with its own controls.
+- **"On the wire"** — what the mock dataplane and log backend actually
+  received, next to what the app did.
+
+The destination is chosen at bootstrap with
+`?destination=rum|noop` — one at a time, as in production.
+
+## Automated suite — Playwright, chromium and webkit, in CI
+
+1. **Wire format.** A settled scenario arrives as exactly one
+   `com.uwt.scenario` event, with its steps packed inside and the identity
+   attributes present. BI events arrive as `com.uwt.bi`.
+   `emitLifecycleEvents: true` adds `com.uwt.scenario.step` events. Values
+   the app passes for redaction never arrive.
+2. **Lifecycle.** `pagehide` delivers pending events by beacon; a tab going
+   hidden flushes; scenarios still running arrive as `abandoned` with
+   `metadata.abandonedBy: 'page-hidden'`.
+3. **Credentials.** The four broker modes above.
+4. **Web Fragments.**
+   - Fragment events are recorded once, through the shell's RUM client, and
+     attributed to the fragment's own `application`.
+   - Fragment log lines reach the mock log backend.
+   - A fragment's `query()` is answered from the shell's backend.
+   - Signing in or out in one realm applies to all of them.
+   - Two tabs, each with its own channel, don't cross-attribute events.
+5. **Consumer smoke.** `npm pack` → install the tarball into
+   `watchtower-consumer-smoke` → `ng build` for browser and SSR. It builds,
+   the types resolve, the bundle contains no `aws-rum-web` without `/rum`,
+   and the server render succeeds.
+6. **Trace capture.** Regenerate the library's `telemetry-trace.txt` from the
+   lab, replacing cps-shared-ui's
+   `projects/composition/src/app/telemetry-trace.capture.spec.ts`.
+
+## Starting points to copy from cps-shared-ui
+
+From `projects/composition/src/app/`:
+
+- `services/app-telemetry.service.ts` — route-navigation scenarios;
+- `services/app-log-api.provider.ts`;
+- `services/rum-credentials.provider.ts`;
+- `services/telemetry.schema.ts`;
+- `telemetry-trace.capture.spec.ts`.
+
+## Order of work
+
+1. The shell app and its SSR server with the mock broker, dataplane and log
+   backend; suite items 1–3.
+2. The fragment app and the Web Fragments gateway; item 4.
+3. The consumer smoke app and the pack-and-install step; item 5.
+4. Trace capture; item 6.
+
+CI then runs: unit tests → library build → lab build → Playwright → consumer
+smoke.
+
+## Done when
+
+- `npm run lab` starts the server; the fragment renders inside the shell; "On
+  the wire" fills as the buttons are used.
+- The Playwright suite passes headless on chromium and webkit, with no
+  network access beyond localhost.
+- Breaking `/rum`'s `ng-package.json` on purpose makes the consumer smoke
+  step fail — proof that it guards the published package.
+
+Follow the working rules in `CLAUDE_HANDOFF.md` throughout (no commits unless
+asked, verify before reporting, mutation-check tests).
diff --git a/tsconfig.json b/tsconfig.json
index d0fb3ae..ba34ce6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -47,6 +47,7 @@
     { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.lib.json" },
     { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.spec.json" },
     { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json" },
-    { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json" }
+    { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json" },
+    { "path": "./projects/watchtower-lab/tsconfig.app.json" }
   ]
 }

From 2d7fdf04daf8c0a6d4bdde0fed7b61947e9bbe68 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 09:46:00 +0100
Subject: [PATCH 10/51] web fragments

---
 .eslintrc.js                                  |     6 +-
 README.md                                     |    38 +-
 angular.json                                  |    37 +-
 package-lock.json                             | 10745 +++++++---------
 package.json                                  |    35 +-
 playwright.config.ts                          |     6 +-
 playwright/fragment.spec.ts                   |   113 +-
 playwright/lab.ts                             |    15 +-
 playwright/ssr.spec.ts                        |    33 +
 playwright/tabs.spec.ts                       |    37 +
 projects/ngx-ui-watchtower/DESIGN.md          |     7 +
 .../src}/fragment.component.ts                |     2 +-
 .../src/fragment.config.ts                    |    48 +
 .../watchtower-lab-fragment/src/index.html    |    13 +
 projects/watchtower-lab-fragment/src/main.ts  |    11 +
 .../watchtower-lab-fragment/src/styles.scss   |     2 +
 .../src/telemetry.schema.ts                   |    18 +
 .../watchtower-lab-fragment/tsconfig.app.json |    10 +
 projects/watchtower-lab/proxy.conf.json       |     6 -
 projects/watchtower-lab/server/dev.mjs        |    27 +
 projects/watchtower-lab/server/lab-backend.ts |   239 +
 .../watchtower-lab/server/lab-fragments.ts    |    82 +
 projects/watchtower-lab/server/lab-server.mjs |   281 -
 projects/watchtower-lab/server/promised.ts    |    14 +
 projects/watchtower-lab/server/server.ts      |    49 +
 projects/watchtower-lab/src/_lab-base.scss    |    99 +
 .../src/fragment/fragment.config.ts           |    26 -
 .../watchtower-lab/src/lab/lab-channel.ts     |    17 +
 .../src/lab/lab-log-api.provider.ts           |     6 +-
 .../watchtower-lab/src/lab/lab-options.ts     |     2 +-
 .../src/lab/lab-rum-credentials.provider.ts   |    19 +-
 .../src/lab/lab-wire.service.ts               |    18 +-
 projects/watchtower-lab/src/main.server.ts    |    12 +
 projects/watchtower-lab/src/main.ts           |    29 +-
 .../src/shell/pages/fragment.page.ts          |     6 +-
 .../src/shell/pages/web-fragment.page.ts      |    33 +
 .../src/shell/shell.component.ts              |    27 +-
 .../src/shell/shell.config.server.ts          |    28 +
 .../watchtower-lab/src/shell/shell.config.ts  |    28 +-
 projects/watchtower-lab/src/styles.scss       |   100 +-
 .../watchtower-lab/src/telemetry.schema.ts    |     3 -
 projects/watchtower-lab/tsconfig.app.json     |     6 +-
 tsconfig.json                                 |     4 +-
 43 files changed, 5415 insertions(+), 6922 deletions(-)
 create mode 100644 playwright/ssr.spec.ts
 create mode 100644 playwright/tabs.spec.ts
 rename projects/{watchtower-lab/src/fragment => watchtower-lab-fragment/src}/fragment.component.ts (98%)
 create mode 100644 projects/watchtower-lab-fragment/src/fragment.config.ts
 create mode 100644 projects/watchtower-lab-fragment/src/index.html
 create mode 100644 projects/watchtower-lab-fragment/src/main.ts
 create mode 100644 projects/watchtower-lab-fragment/src/styles.scss
 create mode 100644 projects/watchtower-lab-fragment/src/telemetry.schema.ts
 create mode 100644 projects/watchtower-lab-fragment/tsconfig.app.json
 delete mode 100644 projects/watchtower-lab/proxy.conf.json
 create mode 100644 projects/watchtower-lab/server/dev.mjs
 create mode 100644 projects/watchtower-lab/server/lab-backend.ts
 create mode 100644 projects/watchtower-lab/server/lab-fragments.ts
 delete mode 100644 projects/watchtower-lab/server/lab-server.mjs
 create mode 100644 projects/watchtower-lab/server/promised.ts
 create mode 100644 projects/watchtower-lab/server/server.ts
 create mode 100644 projects/watchtower-lab/src/_lab-base.scss
 delete mode 100644 projects/watchtower-lab/src/fragment/fragment.config.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-channel.ts
 create mode 100644 projects/watchtower-lab/src/main.server.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/shell.config.server.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 84ba0b7..73a1d40 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,7 +34,11 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['playwright/**/*.ts', 'playwright.config.ts'],
+      files: [
+        'playwright/**/*.ts',
+        'playwright.config.ts',
+        'projects/watchtower-lab/server/**/*.ts'
+      ],
       env: {
         jest: false,
         node: true
diff --git a/README.md b/README.md
index b1853e5..ac68be4 100644
--- a/README.md
+++ b/README.md
@@ -26,8 +26,10 @@ projects/ngx-ui-watchtower/
   README.md         usage guide, published to npm
   DESIGN.md         full design
   package.json      the published package's manifest
-projects/watchtower-lab/  the Watchtower Lab: a testing app, never published
-playwright/               the lab's end-to-end suite (Playwright)
+projects/watchtower-lab/           the Watchtower Lab: a testing app, never published
+  server/                          its server: mock backend, fragment gateway, SSR
+projects/watchtower-lab-fragment/  the lab's fragment: a second app it composes
+playwright/                        the lab's end-to-end suite (Playwright)
 ```
 
 ## Getting started
@@ -55,24 +57,27 @@ The package is built to `dist/ngx-ui-watchtower`.
 | `npm run format`        | Formats with Prettier                                 |
 | `npm run format:check`  | Checks formatting without writing                     |
 | `npm run lab`           | Starts the Watchtower Lab on http://localhost:4280    |
-| `npm run lab:build`     | Builds the lab, to check it compiles                  |
+| `npm run lab:build`     | Builds the lab's fragment and shell                   |
 | `npm run e2e`           | Builds the lab and runs the Playwright suite          |
 | `npm run e2e:ui`        | Opens the suite in Playwright's UI, on the last build |
 
 ## Watchtower Lab
 
 A testing app for the library, built from its source, so a change shows up
-on save. `npm run lab` starts it with a mock backend on port 4380, which
-stands in for everything the library talks to: the real `aws-rum-web` runs
-against a mock RUM broker and dataplane, fully offline, and logs go to a mock
-log backend.
+on save. `npm run lab` starts it on http://localhost:4280. Its shell is
+rendered on the server, then hydrated. Its server (`server/server.ts`, which
+`ng serve` runs too) also has a mock backend, which stands in for everything
+the library talks to: the real `aws-rum-web` runs against a mock RUM broker
+and dataplane, fully offline, and logs go to a mock log backend.
 
 One page per concern: **Scenarios**, **BI events**, **Logging**,
-**Identity**, **Privacy**, **Lifecycle**, **Fragment** (a second app in an
-iframe, forwarding through the shell), **Event Inspector** (every dock, event
-generators, and the `--uwt-inspector-inset-*` opt-in on the lab's fixed
-header and status bar) and **On the wire**: what the mock backend actually
-received.
+**Identity**, **Privacy**, **Lifecycle**, **Fragment (iframe)** and **Web
+Fragment** (the same second app in a plain iframe, and as a
+[Web Fragment](https://web-fragments.dev) through the server's gateway, each
+forwarding through the shell over the tab's own channel), **Event Inspector**
+(every dock, event generators, and the `--uwt-inspector-inset-*` opt-in on
+the lab's fixed header and status bar) and **On the wire**: what the mock
+backend actually received.
 
 Options, read once at startup like an app's configuration:
 
@@ -92,11 +97,12 @@ The same page sets RUM's own `telemetries`: the library's default, or any of
 ### Automated tests
 
 `npm run e2e` builds the lab and runs the suite in `playwright/` on Chromium
-and WebKit: every lab page, the broker modes, RUM's telemetries, the query
+and WebKit: every lab page, server rendering and hydration, both fragment
+pages and two tabs of one, the broker modes, RUM's telemetries, the query
 options and the Event Inspector's docks and shortcut, checked against what
-the mock backend received. The server it starts serves the built lab with the
-mock backend on http://localhost:4390, so it runs beside `npm run lab`. The
-first time, download the browsers with `npx playwright install chromium webkit`.
+the mock backend received. It runs the built server on
+http://localhost:4390, beside `npm run lab`. The first time, download the
+browsers with `npx playwright install chromium webkit`.
 
 ## Before you push
 
diff --git a/angular.json b/angular.json
index a14fa32..aaafc33 100644
--- a/angular.json
+++ b/angular.json
@@ -48,6 +48,8 @@
             "outputPath": "dist/watchtower-lab",
             "index": "projects/watchtower-lab/src/index.html",
             "browser": "projects/watchtower-lab/src/main.ts",
+            "server": "projects/watchtower-lab/src/main.server.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "projects/watchtower-lab/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "styles": ["projects/watchtower-lab/src/styles.scss"],
@@ -65,18 +67,49 @@
             ],
             "optimization": false,
             "sourceMap": true,
-            "extractLicenses": false
+            "extractLicenses": false,
+            "outputMode": "server",
+            "ssr": {
+              "entry": "projects/watchtower-lab/server/server.ts"
+            },
+            "externalDependencies": ["htmlrewriter"],
+            "security": {
+              "allowedHosts": ["localhost"]
+            }
           }
         },
         "serve": {
           "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "watchtower-lab:build",
-            "proxyConfig": "projects/watchtower-lab/proxy.conf.json",
             "port": 4280
           }
         }
       }
+    },
+    "watchtower-lab-fragment": {
+      "projectType": "application",
+      "root": "projects/watchtower-lab-fragment",
+      "sourceRoot": "projects/watchtower-lab-fragment/src",
+      "prefix": "lab",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/watchtower-lab-fragment",
+            "index": "projects/watchtower-lab-fragment/src/index.html",
+            "browser": "projects/watchtower-lab-fragment/src/main.ts",
+            "tsConfig": "projects/watchtower-lab-fragment/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "styles": ["projects/watchtower-lab-fragment/src/styles.scss"],
+            "baseHref": "/_fragment/lab-fragment/",
+            "deployUrl": "/_fragment/lab-fragment/",
+            "optimization": false,
+            "sourceMap": true,
+            "extractLicenses": false
+          }
+        }
+      }
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 92c0889..389c062 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,25 +8,28 @@
       "name": "ui-watchtower",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/common": "~21.2.6",
-        "@angular/compiler": "~21.2.6",
-        "@angular/core": "~21.2.6",
-        "@angular/platform-browser": "~21.2.6",
-        "@angular/platform-browser-dynamic": "~21.2.6",
+        "@angular/common": "~21.2.26",
+        "@angular/compiler": "~21.2.26",
+        "@angular/core": "~21.2.26",
+        "@angular/platform-browser": "~21.2.26",
+        "@angular/platform-browser-dynamic": "~21.2.26",
         "rxjs": "~7.8.2",
         "tslib": "^2.8.1",
         "zone.js": "~0.16.1"
       },
       "devDependencies": {
         "@angular-builders/jest": "^21.0.4",
-        "@angular/animations": "~21.2.6",
-        "@angular/build": "~21.0.6",
-        "@angular/cli": "~21.0.6",
-        "@angular/compiler-cli": "~21.2.6",
-        "@angular/forms": "~21.2.6",
-        "@angular/router": "~21.2.6",
+        "@angular/animations": "~21.2.26",
+        "@angular/build": "~21.2.29",
+        "@angular/cli": "~21.2.29",
+        "@angular/compiler-cli": "~21.2.26",
+        "@angular/forms": "~21.2.26",
+        "@angular/platform-server": "~21.2.26",
+        "@angular/router": "~21.2.26",
+        "@angular/ssr": "~21.2.29",
         "@e965/xlsx": "^0.20.3",
         "@playwright/test": "^1.64.1",
+        "@types/express": "^5.0.6",
         "@types/jest": "^30.0.0",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.10.10",
@@ -42,6 +45,7 @@
         "eslint-plugin-prettier": "^5.2.6",
         "eslint-plugin-promise": "^6.6.0",
         "eslint-plugin-standard": "^5.0.0",
+        "express": "^5.3.0",
         "jest": "^30.3.0",
         "jest-environment-jsdom": "^30.3.0",
         "jest-preset-angular": "^17.0.0",
@@ -49,60 +53,61 @@
         "lodash-es": "^4.17.21",
         "ng-packagr": "~21.0.1",
         "prettier": "^3.4.2",
-        "typescript": "~5.9.3"
+        "typescript": "~5.9.3",
+        "web-fragments": "^0.8.2"
       },
       "engines": {
         "node": ">=22.0.0"
       }
     },
     "node_modules/@algolia/abtesting": {
-      "version": "1.6.1",
-      "integrity": "sha512-wV/gNRkzb7sI9vs1OneG129hwe3Q5zPj7zigz3Ps7M5Lpo2hSorrOnXNodHEOV+yXE/ks4Pd+G3CDFIjFTWhMQ==",
+      "version": "1.14.1",
+      "integrity": "sha512-Dkj0BgPiLAaim9sbQ97UKDFHJE/880wgStAM18U++NaJ/2Cws34J5731ovJifr6E3Pv4T2CqvMXf8qLCC417Ew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-abtesting": {
-      "version": "5.40.1",
-      "integrity": "sha512-cxKNATPY5t+Mv8XAVTI57altkaPH+DZi4uMrnexPxPHODMljhGYY+GDZyHwv9a+8CbZHcY372OkxXrDMZA4Lnw==",
+      "version": "5.48.1",
+      "integrity": "sha512-LV5qCJdj+/m9I+Aj91o+glYszrzd7CX6NgKaYdTOj4+tUYfbS62pwYgUfZprYNayhkQpVFcrW8x8ZlIHpS23Vw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "5.40.1",
-      "integrity": "sha512-XP008aMffJCRGAY8/70t+hyEyvqqV7YKm502VPu0+Ji30oefrTn2al7LXkITz7CK6I4eYXWRhN6NaIUi65F1OA==",
+      "version": "5.48.1",
+      "integrity": "sha512-/AVoMqHhPm14CcHq7mwB+bUJbfCv+jrxlNvRjXAuO+TQa+V37N8k1b0ijaRBPdmSjULMd8KtJbQyUyabXOu6Kg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "5.40.1",
-      "integrity": "sha512-gWfQuQUBtzUboJv/apVGZMoxSaB0M4Imwl1c9Ap+HpCW7V0KhjBddqF2QQt5tJZCOFsfNIgBbZDGsEPaeKUosw==",
+      "version": "5.48.1",
+      "integrity": "sha512-VXO+qu2Ep6ota28ktvBm3sG53wUHS2n7bgLWmce5jTskdlCD0/JrV4tnBm1l7qpla1CeoQb8D7ShFhad+UoSOw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -110,141 +115,141 @@
       }
     },
     "node_modules/@algolia/client-insights": {
-      "version": "5.40.1",
-      "integrity": "sha512-RTLjST/t+lsLMouQ4zeLJq2Ss+UNkLGyNVu+yWHanx6kQ3LT5jv8UvPwyht9s7R6jCPnlSI77WnL80J32ZuyJg==",
+      "version": "5.48.1",
+      "integrity": "sha512-zl+Qyb0nLg+Y5YvKp1Ij+u9OaPaKg2/EPzTwKNiVyOHnQJlFxmXyUZL1EInczAZsEY8hVpPCLtNfhMhfxluXKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "5.40.1",
-      "integrity": "sha512-2FEK6bUomBzEYkTKzD0iRs7Ljtjb45rKK/VSkyHqeJnG+77qx557IeSO0qVFE3SfzapNcoytTofnZum0BQ6r3Q==",
+      "version": "5.48.1",
+      "integrity": "sha512-r89Qf9Oo9mKWQXumRu/1LtvVJAmEDpn8mHZMc485pRfQUMAwSSrsnaw1tQ3sszqzEgAr1c7rw6fjBI+zrAXTOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-query-suggestions": {
-      "version": "5.40.1",
-      "integrity": "sha512-Nju4NtxAvXjrV2hHZNLKVJLXjOlW6jAXHef/CwNzk1b2qIrCWDO589ELi5ZHH1uiWYoYyBXDQTtHmhaOVVoyXg==",
+      "version": "5.48.1",
+      "integrity": "sha512-TPKNPKfghKG/bMSc7mQYD9HxHRUkBZA4q1PEmHgICaSeHQscGqL4wBrKkhfPlDV1uYBKW02pbFMUhsOt7p4ZpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "5.40.1",
-      "integrity": "sha512-Mw6pAUF121MfngQtcUb5quZVqMC68pSYYjCRZkSITC085S3zdk+h/g7i6FxnVdbSU6OztxikSDMh1r7Z+4iPlA==",
+      "version": "5.48.1",
+      "integrity": "sha512-4Fu7dnzQyQmMFknYwTiN/HxPbH4DyxvQ1m+IxpPp5oslOgz8m6PG5qhiGbqJzH4HiT1I58ecDiCAC716UyVA8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/ingestion": {
-      "version": "1.40.1",
-      "integrity": "sha512-z+BPlhs45VURKJIxsR99NNBWpUEEqIgwt10v/fATlNxc4UlXvALdOsWzaFfe89/lbP5Bu4+mbO59nqBC87ZM/g==",
+      "version": "1.48.1",
+      "integrity": "sha512-/RFq3TqtXDUUawwic/A9xylA2P3LDMO8dNhphHAUOU51b1ZLHrmZ6YYJm3df1APz7xLY1aht6okCQf+/vmrV9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/monitoring": {
-      "version": "1.40.1",
-      "integrity": "sha512-VJMUMbO0wD8Rd2VVV/nlFtLJsOAQvjnVNGkMkspFiFhpBA7s/xJOb+fJvvqwKFUjbKTUA7DjiSi1ljSMYBasXg==",
+      "version": "1.48.1",
+      "integrity": "sha512-Of0jTeAZRyRhC7XzDSjJef0aBkgRcvRAaw0ooYRlOw57APii7lZdq+layuNdeL72BRq1snaJhoMMwkmLIpJScw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/recommend": {
-      "version": "5.40.1",
-      "integrity": "sha512-ehvJLadKVwTp9Scg9NfzVSlBKH34KoWOQNTaN8i1Ac64AnO6iH2apJVSP6GOxssaghZ/s8mFQsDH3QIZoluFHA==",
+      "version": "5.48.1",
+      "integrity": "sha512-bE7JcpFXzxF5zHwj/vkl2eiCBvyR1zQ7aoUdO+GDXxGp0DGw7nI0p8Xj6u8VmRQ+RDuPcICFQcCwRIJT5tDJFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "5.40.1",
-      "integrity": "sha512-PbidVsPurUSQIr6X9/7s34mgOMdJnn0i6p+N6Ab+lsNhY5eiu+S33kZEpZwkITYBCIbhzDLOvb7xZD3gDi+USA==",
+      "version": "5.48.1",
+      "integrity": "sha512-MK3wZ2koLDnvH/AmqIF1EKbJlhRS5j74OZGkLpxI4rYvNi9Jn/C7vb5DytBnQ4KUWts7QsmbdwHkxY5txQHXVw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1"
+        "@algolia/client-common": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-fetch": {
-      "version": "5.40.1",
-      "integrity": "sha512-ThZ5j6uOZCF11fMw9IBkhigjOYdXGXQpj6h4k+T9UkZrF2RlKcPynFzDeRgaLdpYk8Yn3/MnFbwUmib7yxj5Lw==",
+      "version": "5.48.1",
+      "integrity": "sha512-2oDT43Y5HWRSIQMPQI4tA/W+TN/N2tjggZCUsqQV440kxzzoPGsvv9QP1GhQ4CoDa+yn6ygUsGp6Dr+a9sPPSg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1"
+        "@algolia/client-common": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "5.40.1",
-      "integrity": "sha512-H1gYPojO6krWHnUXu/T44DrEun/Wl95PJzMXRcM/szstNQczSbwq6wIFJPI9nyE95tarZfUNU3rgorT+wZ6iCQ==",
+      "version": "5.48.1",
+      "integrity": "sha512-xcaCqbhupVWhuBP1nwbk1XNvwrGljozutEiLx06mvqDf3o8cHyEgQSHS4fKJM+UAggaWVnnFW+Nne5aQ8SUJXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.40.1"
+        "@algolia/client-common": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -581,19 +586,6 @@
         }
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@angular/build/node_modules/@vitejs/plugin-basic-ssl": {
-      "version": "2.1.4",
-      "integrity": "sha512-HXciTXN/sDBYWgeAD4V4s0DN0g72x5mlxQhHxtYu3Tt8BLa6MzcJZUyDVFCdtjNs3bfENVHVzOsmooTVuNgAAw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^6.0.0 || ^7.0.0"
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/@angular/build/node_modules/vite": {
       "version": "7.3.6",
       "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
@@ -669,1498 +661,265 @@
         }
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@inquirer/confirm": {
-      "version": "5.1.21",
-      "integrity": "sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==",
+    "node_modules/@angular-devkit/build-angular/node_modules/undici": {
+      "version": "7.29.1",
+      "integrity": "sha512-RYONW2MeafgYlkVOKYKkA/Ag7BmXqgIWCa8t1m0JcxrQg9pI9lEqRhAOruOBCbAohOa/gkCF+iPi9hrgvTzu6Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
-      "dependencies": {
-        "@inquirer/core": "^10.3.2",
-        "@inquirer/type": "^3.0.10"
-      },
       "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@types/node": ">=18"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        }
+        "node": ">=20.18.1"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-darwin-arm64": {
-      "version": "3.5.1",
-      "integrity": "sha512-tpfN4kKrrMpQ+If1l8bhmoNkECJi0iOu6AEdrTJvWVC+32sLxTARX5Rsu579mPImRP9YFWfWgeRQ5oav7zApQQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-darwin-x64": {
-      "version": "3.5.1",
-      "integrity": "sha512-+a2tTfc3rmWhLAolFUWRgJtpSuu+Fw/yjn4rF406NMxhfjbMuiOUTDRvRlMFV+DzyjkwnokisskHbCWkS3Ly5w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-linux-arm": {
-      "version": "3.5.1",
-      "integrity": "sha512-0EgcE6reYr8InjD7V37EgXcYrloqpxVPINy3ig1MwDSbl6LF/vXTYRH9OE1Ti1D8YZnB35ZH9aTcdfSb5lql2A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-linux-arm64": {
-      "version": "3.5.1",
-      "integrity": "sha512-aoERa5B6ywXdyFeYGQ1gbQpkMkDbEo45qVoXE5QpIRavqjnyPwjOulMkmkypkmsbJ5z4Wi0TBztON8agCTG0Vg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-linux-x64": {
-      "version": "3.5.1",
-      "integrity": "sha512-SqNDY1+vpji7bh0sFH5wlWyFTOzjbDOl0/kB5RLLYDAFyd/uw3n7wyrmas3rYPpAW7z18lMOi1yKlTPv967E3g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-win32-arm64": {
-      "version": "3.5.1",
-      "integrity": "sha512-50v0O1Lt37cwrmR9vWZK5hRW0Aw+KEmxJJ75fge/zIYdvNKB/0bSMSVR5Uc2OV9JhosIUyklOmrEvavwNJ8D6w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@lmdb/lmdb-win32-x64": {
-      "version": "3.5.1",
-      "integrity": "sha512-qwosvPyl+zpUlp3gRb7UcJ3H8S28XHCzkv0Y0EgQToXjQP91ZD67EHSCDmaLjtKhe+GVIW5om1KUpzVLA0l6pg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@oxc-project/types": {
-      "version": "0.113.0",
-      "integrity": "sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==",
+    "node_modules/@angular-devkit/build-webpack": {
+      "version": "0.2102.26",
+      "integrity": "sha512-a16LANAlLYTNeLkrMwIEXZI1xJKi+ko0oLI+JhCj8/pnmMPX6yHawZQJ2mgKXjBAub+SK783q6RPBxy+Iu2DTQ==",
       "dev": true,
       "license": "MIT",
       "peer": true,
-      "funding": {
-        "url": "https://github.com/sponsors/Boshen"
+      "dependencies": {
+        "@angular-devkit/architect": "0.2102.26",
+        "rxjs": "7.8.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.30.0",
+        "webpack-dev-server": "^5.0.2"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-vRq9f4NzvbdZavhQbjkJBx7rRebDKYR9zHfO/Wg486+I7bSecdUapzCm5cyXoK+LHokTxgSq7A5baAXUZkIz0w==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@angular-devkit/core": {
+      "version": "21.2.26",
+      "integrity": "sha512-9X6hwij620GDWJtzuZ1awGolx42Zt0kY9IRhyTAE/UyLvIdcj5+eKbKeAv43KR9wbFIHIwWPWZ+R+8ehiOetow==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
+      "dependencies": {
+        "ajv": "8.18.0",
+        "ajv-formats": "3.0.1",
+        "jsonc-parser": "3.3.1",
+        "picomatch": "4.0.4",
+        "rxjs": "7.8.2",
+        "source-map": "0.7.6"
+      },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-kFgEvkWLqt3YCgKB5re9RlIrx9bRsvyVUnaTakEpOPuLGzLpLapYxE9BufJNvPg8GjT6mB1alN4yN1NjzoeM8Q==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@angular-devkit/schematics": {
+      "version": "21.2.29",
+      "integrity": "sha512-Bx/my36Rxwf0ptgwngXTCfbOPHyr7FX2PL3mBuaZh99065969leFd6dFajss9hSAoNreZtJu73dw5AjOpgIjBw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
+      "dependencies": {
+        "@angular-devkit/core": "21.2.29",
+        "jsonc-parser": "3.3.1",
+        "magic-string": "0.30.21",
+        "ora": "9.3.0",
+        "rxjs": "7.8.2"
+      },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-JXmaOJGsL/+rsmMfutcDjxWM2fTaVgCHGoXS7nE8Z3c9NAYjGqHvXrAhMUZvMpHS/k7Mg+X7n/MVKb7NYWKKww==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core": {
+      "version": "21.2.29",
+      "integrity": "sha512-807H6zbmVxoTZEZymJM/YKcn9BcHQsgCQg9Yki4jDAQIMockyIN9F7jscxHqBtLt2rXHiiDVyWiJhMEyot1OXQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
+      "dependencies": {
+        "ajv": "8.18.0",
+        "ajv-formats": "3.0.1",
+        "jsonc-parser": "3.3.1",
+        "picomatch": "4.0.4",
+        "rxjs": "7.8.2",
+        "source-map": "0.7.6"
+      },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-ep3Catd6sPnHTM0P4hNEvIv5arnDvk01PfyJIJ+J3wVCG1eEaPo09tvFqdtcaTrkwQy0VWR24uz+cb4IsK53Qw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@angular/animations": {
+      "version": "21.2.26",
+      "integrity": "sha512-4aE0nz6nfq3YDGTFaVwfG8/JDoOUQcAxYLxQFXeKGkP6ZH7/DAr64vswDq2ctDXTiSy6HvIrwoIeOg1nNxuMMg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "21.2.26"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-LwA5ayKIpnsgXJEwWc3h8wPiS33NMIHd9BhsV92T8VetVAbGe2qXlJwNVDGHN5cOQ22R9uYvbrQir2AB+ntT2w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-AC1WsGdlV1MtGay/OQ4J9T7GRadVnpYRzTcygV1hKnypbYN20Yh4t6O1Sa2qRBMqv1etulUknqXjc3CTIsBu6A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-lU+6rgXXViO61B4EudxtVMXSOfiZONR29Sys5VGSetUY7X8mg9FCKIIjcPPj8xNDeYzKl+H8F/qSKOBVFJChCQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-DZaN1f0PGp/bSvKhtw50pPsnln4T13ycDq1FrDWRiHmWt1JeW+UtYg9touPFf8yt993p8tS2QjybpzKNTxYEwg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-RnGxwZLN7fhMMAItnD6dZ7lvy+TI7ba+2V54UF4dhaWa/p8I/ys1E73KO6HmPmgz92ZkfD8TXS1IMV8+uhbR9g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-6lcI79+X8klGiGd8yHuTgQRjuuJYNggmEml+RsyN596P23l/zf9FVmJ7K0KVKkFAeYEdg0iMUKyIxiV5vebDNQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-wz7ohsKCAIWy91blZ/1FlpPdqrsm1xpcEOQVveWoL6+aSPKL4VUcoYmmzuLTssyZxRpEwzuIxL/GDsvpjaBtOw==",
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-p6UeR9y7ht82AH57qwGuFYn69S6CZ7LLKdCKy/8T3zS9VTrJei2/CGsTUV45Da4Z9Rbhc7G4gyWQ/Ioamqn09g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/beasties": {
-      "version": "0.4.1",
-      "integrity": "sha512-2Imdcw3LznDuxAbJM26RHniOLAzE6WgrK8OuvVXCQtNBS8rsnD9zsSEa3fHl4hHpUY7BYTlrpvtPVbvu9G6neg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "css-select": "^6.0.0",
-        "css-what": "^7.0.0",
-        "dom-serializer": "^2.0.0",
-        "domhandler": "^5.0.3",
-        "htmlparser2": "^10.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.49",
-        "postcss-media-query-parser": "^0.2.3",
-        "postcss-safe-parser": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/beasties/node_modules/postcss-safe-parser": {
-      "version": "7.1.0",
-      "integrity": "sha512-1WzZxRLaAFwEh6Do+zyGpjWV3nGJNxxhuh7Ubu/q1ICImMgZJnLwhoaEpRbG4pJppp2Y1ncL9ffA2f+LhrefQg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/lmdb": {
-      "version": "3.5.1",
-      "integrity": "sha512-NYHA0MRPjvNX+vSw8Xxg6FLKxzAG+e7Pt8RqAQA/EehzHVXq9SxDqJIN3JL1hK0dweb884y8kIh6rkWvPyg9Wg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@harperfast/extended-iterable": "^1.0.3",
-        "msgpackr": "^1.11.2",
-        "node-addon-api": "^6.1.0",
-        "node-gyp-build-optional-packages": "5.2.2",
-        "ordered-binary": "^1.5.3",
-        "weak-lru-cache": "^1.2.2"
-      },
-      "bin": {
-        "download-lmdb-prebuilds": "bin/download-prebuilds.js"
-      },
-      "optionalDependencies": {
-        "@lmdb/lmdb-darwin-arm64": "3.5.1",
-        "@lmdb/lmdb-darwin-x64": "3.5.1",
-        "@lmdb/lmdb-linux-arm": "3.5.1",
-        "@lmdb/lmdb-linux-arm64": "3.5.1",
-        "@lmdb/lmdb-linux-x64": "3.5.1",
-        "@lmdb/lmdb-win32-arm64": "3.5.1",
-        "@lmdb/lmdb-win32-x64": "3.5.1"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/magic-string": {
-      "version": "0.30.21",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/node-addon-api": {
-      "version": "6.1.0",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/rolldown": {
-      "version": "1.0.0-rc.4",
-      "integrity": "sha512-V2tPDUrY3WSevrvU2E41ijZlpF+5PbZu4giH+VpNraaadsJGHa4fR6IFwsocVwEXDoAdIv5qgPPxgrvKAOIPtA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@oxc-project/types": "=0.113.0",
-        "@rolldown/pluginutils": "1.0.0-rc.4"
-      },
-      "bin": {
-        "rolldown": "bin/cli.mjs"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.0.0-rc.4",
-        "@rolldown/binding-darwin-arm64": "1.0.0-rc.4",
-        "@rolldown/binding-darwin-x64": "1.0.0-rc.4",
-        "@rolldown/binding-freebsd-x64": "1.0.0-rc.4",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.4",
-        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.4",
-        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.4",
-        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.4",
-        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.4",
-        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.4",
-        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.4",
-        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.4",
-        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.4"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/undici": {
-      "version": "7.29.1",
-      "integrity": "sha512-RYONW2MeafgYlkVOKYKkA/Ag7BmXqgIWCa8t1m0JcxrQg9pI9lEqRhAOruOBCbAohOa/gkCF+iPi9hrgvTzu6Q==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=20.18.1"
-      }
-    },
-    "node_modules/@angular-devkit/build-angular/node_modules/watchpack": {
-      "version": "2.5.1",
-      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/@angular-devkit/build-webpack": {
-      "version": "0.2102.26",
-      "integrity": "sha512-a16LANAlLYTNeLkrMwIEXZI1xJKi+ko0oLI+JhCj8/pnmMPX6yHawZQJ2mgKXjBAub+SK783q6RPBxy+Iu2DTQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@angular-devkit/architect": "0.2102.26",
-        "rxjs": "7.8.2"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "webpack": "^5.30.0",
-        "webpack-dev-server": "^5.0.2"
-      }
-    },
-    "node_modules/@angular-devkit/core": {
-      "version": "21.2.26",
-      "integrity": "sha512-9X6hwij620GDWJtzuZ1awGolx42Zt0kY9IRhyTAE/UyLvIdcj5+eKbKeAv43KR9wbFIHIwWPWZ+R+8ehiOetow==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.18.0",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.4",
-        "rxjs": "7.8.2",
-        "source-map": "0.7.6"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-devkit/schematics": {
-      "version": "21.0.6",
-      "integrity": "sha512-0Zg4IeBoAjPNtGQobZEH010l1jQThq2lMdQZfqhLj4a3XoVdhGdzo9Xcn+GcA/z0zXy+rtAiqRazsk9mW1VcRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@angular-devkit/core": "21.0.6",
-        "jsonc-parser": "3.3.1",
-        "magic-string": "0.30.19",
-        "ora": "9.0.0",
-        "rxjs": "7.8.2"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core": {
-      "version": "21.0.6",
-      "integrity": "sha512-quhQrvfbs1zzDev2T3PdyXDsTrthi9QjwegqR4HyDZKvYCWzmXLw9KjScqEWWUSKVLhG7GULrmb+tDsxRFG9lg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.3",
-        "rxjs": "7.8.2",
-        "source-map": "0.7.6"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/ajv": {
-      "version": "8.17.1",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/ansi-regex": {
-      "version": "6.4.0",
-      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/chalk": {
-      "version": "5.6.2",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/chokidar": {
-      "version": "4.0.3",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/ora": {
-      "version": "9.0.0",
-      "integrity": "sha512-m0pg2zscbYgWbqRR6ABga5c3sZdEon7bSgjnlXC64kxtxLOyjRcbbUkLj7HFyy/FTD+P2xdBWu8snGhYI0jc4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^5.6.2",
-        "cli-cursor": "^5.0.0",
-        "cli-spinners": "^3.2.0",
-        "is-interactive": "^2.0.0",
-        "is-unicode-supported": "^2.1.0",
-        "log-symbols": "^7.0.1",
-        "stdin-discarder": "^0.2.2",
-        "string-width": "^8.1.0",
-        "strip-ansi": "^7.1.2"
-      },
-      "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/picomatch": {
-      "version": "4.0.3",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/readdirp": {
-      "version": "4.1.2",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/stdin-discarder": {
-      "version": "0.2.2",
-      "integrity": "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@angular/animations": {
-      "version": "21.2.6",
-      "integrity": "sha512-SPzTOlkyVagPdb7OMe9hw3dnpMGq2p/nADatzNfRUMXwit8AU8VaiPIrFRsCD52sAL1zDDj60gKsk/dprzIyFA==",
-      "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "21.2.6"
-      }
-    },
-    "node_modules/@angular/build": {
-      "version": "21.0.6",
-      "integrity": "sha512-kn5c5LERVuY8x9eNveeN2m+hUw2doXobqxjFGB1M1YCDNHGT3DBX7DNG8aG0PoFGV6BSbb534ypRny4mhuFh2A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.2100.6",
-        "@babel/core": "7.28.4",
-        "@babel/helper-annotate-as-pure": "7.27.3",
-        "@babel/helper-split-export-declaration": "7.24.7",
-        "@inquirer/confirm": "5.1.19",
-        "@vitejs/plugin-basic-ssl": "2.1.0",
-        "beasties": "0.3.5",
-        "browserslist": "^4.26.0",
-        "esbuild": "0.26.0",
-        "https-proxy-agent": "7.0.6",
-        "istanbul-lib-instrument": "6.0.3",
-        "jsonc-parser": "3.3.1",
-        "listr2": "9.0.5",
-        "magic-string": "0.30.19",
-        "mrmime": "2.0.1",
-        "parse5-html-rewriting-stream": "8.0.0",
-        "picomatch": "4.0.3",
-        "piscina": "5.1.3",
-        "rolldown": "1.0.0-beta.47",
-        "sass": "1.93.2",
-        "semver": "7.7.3",
-        "source-map-support": "0.5.21",
-        "tinyglobby": "0.2.15",
-        "undici": "7.16.0",
-        "vite": "7.2.2",
-        "watchpack": "2.4.4"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "optionalDependencies": {
-        "lmdb": "3.4.3"
-      },
-      "peerDependencies": {
-        "@angular/compiler": "^21.0.0",
-        "@angular/compiler-cli": "^21.0.0",
-        "@angular/core": "^21.0.0",
-        "@angular/localize": "^21.0.0",
-        "@angular/platform-browser": "^21.0.0",
-        "@angular/platform-server": "^21.0.0",
-        "@angular/service-worker": "^21.0.0",
-        "@angular/ssr": "^21.0.6",
-        "karma": "^6.4.0",
-        "less": "^4.2.0",
-        "ng-packagr": "^21.0.0",
-        "postcss": "^8.4.0",
-        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-        "tslib": "^2.3.0",
-        "typescript": ">=5.9 <6.0",
-        "vitest": "^4.0.8"
-      },
-      "peerDependenciesMeta": {
-        "@angular/core": {
-          "optional": true
-        },
-        "@angular/localize": {
-          "optional": true
-        },
-        "@angular/platform-browser": {
-          "optional": true
-        },
-        "@angular/platform-server": {
-          "optional": true
-        },
-        "@angular/service-worker": {
-          "optional": true
-        },
-        "@angular/ssr": {
-          "optional": true
-        },
-        "karma": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "ng-packagr": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "tailwindcss": {
-          "optional": true
-        },
-        "vitest": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/build/node_modules/@angular-devkit/architect": {
-      "version": "0.2100.6",
-      "integrity": "sha512-RsCXULyyNNElRHDObVeEBhEOaLK8QaKu+DaYVhfkOOKvVeDoEI0i+0JomzPhGDjazXPPYG8BPOTgSOvhlEeWSA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@angular-devkit/core": "21.0.6",
-        "rxjs": "7.8.2"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@angular-devkit/core": {
-      "version": "21.0.6",
-      "integrity": "sha512-quhQrvfbs1zzDev2T3PdyXDsTrthi9QjwegqR4HyDZKvYCWzmXLw9KjScqEWWUSKVLhG7GULrmb+tDsxRFG9lg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "8.17.1",
-        "ajv-formats": "3.0.1",
-        "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.3",
-        "rxjs": "7.8.2",
-        "source-map": "0.7.6"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
-        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
-        "yarn": ">= 1.13.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/build/node_modules/@babel/core": {
-      "version": "7.28.4",
-      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.4",
-        "@babel/parser": "^7.28.4",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.4",
-        "@babel/types": "^7.28.4",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.26.0",
-      "integrity": "sha512-hj0sKNCQOOo2fgyII3clmJXP28VhgDfU5iy3GNHlWO76KG6N7x4D9ezH5lJtQTG+1J6MFDAJXC1qsI+W+LvZoA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/android-arm": {
-      "version": "0.26.0",
-      "integrity": "sha512-C0hkDsYNHZkBtPxxDx177JN90/1MiCpvBNjz1f5yWJo1+5+c5zr8apjastpEG+wtPjo9FFtGG7owSsAxyKiHxA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/android-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-DDnoJ5eoa13L8zPh87PUlRd/IyFaIKOlRbxiwcSbeumcJ7UZKdtuMCHa1Q27LWQggug6W4m28i4/O2qiQQ5NZQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/android-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-bKDkGXGZnj0T70cRpgmv549x38Vr2O3UWLbjT2qmIkdIWcmlg8yebcFWoT9Dku7b5OV3UqPEuNKRzlNhjwUJ9A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-6Z3naJgOuAIB0RLlJkYc81An3rTlQ/IeRdrU3dOea8h/PvZSgitZV+thNuIccw0MuK1GmIAnAmd5TrMZad8FTQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/darwin-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-OPnYj0zpYW0tHusMefyaMvNYQX5pNQuSsHFTHUBNp3vVXupwqpxofcjVsUx11CQhGVkGeXjC3WLjh91hgBG2xw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-jix2fa6GQeZhO1sCKNaNMjfj5hbOvoL2F5t+w6gEPxALumkpOV/wq7oUBMHBn2hY2dOm+mEV/K+xfZy3mrsxNQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-tccJaH5xHJD/239LjbVvJwf6T4kSzbk6wPFerF0uwWlkw/u7HL+wnAzAH5GB2irGhYemDgiNTp8wJzhAHQ64oA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-arm": {
-      "version": "0.26.0",
-      "integrity": "sha512-JY8NyU31SyRmRpuc5W8PQarAx4TvuYbyxbPIpHAZdr/0g4iBr8KwQBS4kiiamGl2f42BBecHusYCsyxi7Kn8UQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-IMJYN7FSkLttYyTbsbme0Ra14cBO5z47kpamo16IwggzzATFY2lcZAwkbcNkWiAduKrTgFJP7fW5cBI7FzcuNQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-ia32": {
-      "version": "0.26.0",
-      "integrity": "sha512-XITaGqGVLgk8WOHw8We9Z1L0lbLFip8LyQzKYFKO4zFo1PFaaSKsbNjvkb7O8kEXytmSGRkYpE8LLVpPJpsSlw==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-loong64": {
-      "version": "0.26.0",
-      "integrity": "sha512-MkggfbDIczStUJwq9wU7gQ7kO33d8j9lWuOCDifN9t47+PeI+9m2QVh51EI/zZQ1spZtFMC1nzBJ+qNGCjJnsg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.26.0",
-      "integrity": "sha512-fUYup12HZWAeccNLhQ5HwNBPr4zXCPgUWzEq2Rfw7UwqwfQrFZ0SR/JljaURR8xIh9t+o1lNUFTECUTmaP7yKA==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.26.0",
-      "integrity": "sha512-MzRKhM0Ip+//VYwC8tialCiwUQ4G65WfALtJEFyU0GKJzfTYoPBw5XNWf0SLbCUYQbxTKamlVwPmcw4DgZzFxg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.26.0",
-      "integrity": "sha512-QhCc32CwI1I4Jrg1enCv292sm3YJprW8WHHlyxJhae/dVs+KRWkbvz2Nynl5HmZDW/m9ZxrXayHzjzVNvQMGQA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-s390x": {
-      "version": "0.26.0",
-      "integrity": "sha512-1D6vi6lfI18aNT1aTf2HV+RIlm6fxtlAp8eOJ4mmnbYmZ4boz8zYDar86sIYNh0wmiLJEbW/EocaKAX6Yso2fw==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/linux-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-rnDcepj7LjrKFvZkx+WrBv6wECeYACcFjdNPvVPojCPJD8nHpb3pv3AuR9CXgdnjH1O23btICj0rsp0L9wAnHA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-FSWmgGp0mDNjEXXFcsf12BmVrb+sZBBBlyh3LwB/B9ac3Kkc8x5D2WimYW9N7SUkolui8JzVnVlWh7ZmjCpnxw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-0QfciUDFryD39QoSPUDshj4uNEjQhp73+3pbSAaxjV2qGOEDsM67P7KbJq7LzHoVl46oqhIhJ1S+skKGR7lMXA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-vmAK+nHhIZWImwJ3RNw9hX3fU4UGN/OqbSE0imqljNbUQC3GvVJ1jpwYoTfD6mmXmQaxdJY6Hn4jQbLGJKg5Yw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-GPXF7RMkJ7o9bTyUsnyNtrFMqgM3X+uM/LWw4CeHIjqc32fm0Ir6jKDnWHpj8xHFstgWDUYseSABK9KCkHGnpg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-nUHZ5jEYqbBthbiBksbmHTlbb5eElyVfs/s1iHQ8rLBq1eWsd5maOnDpCocw1OM8kFK747d1Xms8dXJHtduxSw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/sunos-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-TMg3KCTCYYaVO+R6P5mSORhcNDDlemUVnUbb8QkboUtOhb5JWKAzd5uMIMECJQOxHZ/R+N8HHtDF5ylzLfMiLw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/win32-arm64": {
-      "version": "0.26.0",
-      "integrity": "sha512-apqYgoAUd6ZCb9Phcs8zN32q6l0ZQzQBdVXOofa6WvHDlSOhwCWgSfVQabGViThS40Y1NA4SCvQickgZMFZRlA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/win32-ia32": {
-      "version": "0.26.0",
-      "integrity": "sha512-FGJAcImbJNZzLWu7U6WB0iKHl4RuY4TsXEwxJPl9UZLS47agIZuILZEX3Pagfw7I4J3ddflomt9f0apfaJSbaw==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/@esbuild/win32-x64": {
-      "version": "0.26.0",
-      "integrity": "sha512-WAckBKaVnmFqbEhbymrPK7M086DQMpL1XoRbpmN0iW8k5JSXjDRQBhcZNa0VweItknLq9eAeCL34jK7/CDcw7A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@angular/build/node_modules/ajv": {
-      "version": "8.17.1",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/@angular/build/node_modules/chokidar": {
-      "version": "4.0.3",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+    "node_modules/@angular/build": {
+      "version": "21.2.29",
+      "integrity": "sha512-aahiMmyvY10nYaduYqrJPgHY3k4FpVqWYzaruxLWF74vRhz8x3OOX1rdro1OHn2p2C2/Ga80kAZ3hlsx3OyGFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/build/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@angular/build/node_modules/esbuild": {
-      "version": "0.26.0",
-      "integrity": "sha512-3Hq7jri+tRrVWha+ZeIVhl4qJRha/XjRNSopvTsOaCvfPHrflTYTcUFcEjMKdxofsXXsdc4zjg5NOTnL4Gl57Q==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
+        "@ampproject/remapping": "2.3.0",
+        "@angular-devkit/architect": "0.2102.29",
+        "@babel/core": "7.29.7",
+        "@babel/helper-annotate-as-pure": "7.27.3",
+        "@babel/helper-split-export-declaration": "7.24.7",
+        "@inquirer/confirm": "5.1.21",
+        "@vitejs/plugin-basic-ssl": "2.1.4",
+        "beasties": "0.4.1",
+        "browserslist": "^4.26.0",
+        "esbuild": "0.28.1",
+        "https-proxy-agent": "7.0.6",
+        "istanbul-lib-instrument": "6.0.3",
+        "jsonc-parser": "3.3.1",
+        "listr2": "9.0.5",
+        "magic-string": "0.30.21",
+        "mrmime": "2.0.1",
+        "parse5-html-rewriting-stream": "8.0.0",
+        "picomatch": "4.0.4",
+        "piscina": "5.3.2",
+        "rolldown": "1.0.0-rc.4",
+        "sass": "1.97.3",
+        "semver": "7.7.4",
+        "source-map-support": "0.5.21",
+        "tinyglobby": "0.2.15",
+        "undici": "7.30.1",
+        "vite": "7.3.7",
+        "watchpack": "2.5.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.26.0",
-        "@esbuild/android-arm": "0.26.0",
-        "@esbuild/android-arm64": "0.26.0",
-        "@esbuild/android-x64": "0.26.0",
-        "@esbuild/darwin-arm64": "0.26.0",
-        "@esbuild/darwin-x64": "0.26.0",
-        "@esbuild/freebsd-arm64": "0.26.0",
-        "@esbuild/freebsd-x64": "0.26.0",
-        "@esbuild/linux-arm": "0.26.0",
-        "@esbuild/linux-arm64": "0.26.0",
-        "@esbuild/linux-ia32": "0.26.0",
-        "@esbuild/linux-loong64": "0.26.0",
-        "@esbuild/linux-mips64el": "0.26.0",
-        "@esbuild/linux-ppc64": "0.26.0",
-        "@esbuild/linux-riscv64": "0.26.0",
-        "@esbuild/linux-s390x": "0.26.0",
-        "@esbuild/linux-x64": "0.26.0",
-        "@esbuild/netbsd-arm64": "0.26.0",
-        "@esbuild/netbsd-x64": "0.26.0",
-        "@esbuild/openbsd-arm64": "0.26.0",
-        "@esbuild/openbsd-x64": "0.26.0",
-        "@esbuild/openharmony-arm64": "0.26.0",
-        "@esbuild/sunos-x64": "0.26.0",
-        "@esbuild/win32-arm64": "0.26.0",
-        "@esbuild/win32-ia32": "0.26.0",
-        "@esbuild/win32-x64": "0.26.0"
-      }
-    },
-    "node_modules/@angular/build/node_modules/picomatch": {
-      "version": "4.0.3",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@angular/build/node_modules/piscina": {
-      "version": "5.1.3",
-      "integrity": "sha512-0u3N7H4+hbr40KjuVn2uNhOcthu/9usKhnw5vT3J7ply79v3D3M8naI00el9Klcy16x557VsEkkUQaHCWFXC/g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.x"
+        "lmdb": "3.5.1"
       },
-      "optionalDependencies": {
-        "@napi-rs/nice": "^1.0.4"
-      }
-    },
-    "node_modules/@angular/build/node_modules/readdirp": {
-      "version": "4.1.2",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
+      "peerDependencies": {
+        "@angular/compiler": "^21.0.0",
+        "@angular/compiler-cli": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/localize": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/platform-server": "^21.0.0",
+        "@angular/service-worker": "^21.0.0",
+        "@angular/ssr": "^21.2.29",
+        "karma": "^6.4.0",
+        "less": "^4.2.0",
+        "ng-packagr": "^21.0.0",
+        "postcss": "^8.4.0",
+        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "tslib": "^2.3.0",
+        "typescript": ">=5.9 <6.0",
+        "vitest": "^4.0.8"
       },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+      "peerDependenciesMeta": {
+        "@angular/core": {
+          "optional": true
+        },
+        "@angular/localize": {
+          "optional": true
+        },
+        "@angular/platform-browser": {
+          "optional": true
+        },
+        "@angular/platform-server": {
+          "optional": true
+        },
+        "@angular/service-worker": {
+          "optional": true
+        },
+        "@angular/ssr": {
+          "optional": true
+        },
+        "karma": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "ng-packagr": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tailwindcss": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@angular/build/node_modules/sass": {
-      "version": "1.93.2",
-      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+    "node_modules/@angular/build/node_modules/@angular-devkit/architect": {
+      "version": "0.2102.29",
+      "integrity": "sha512-o7dg7tlGbVr/ddXSAD9B/ozNwETfI7hzaBAe4v00+L+Y7Mz85hIy3R9/B0elY/SyoEDkW/HHTRsLubHMWg2AZw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
+        "@angular-devkit/core": "21.2.29",
+        "rxjs": "7.8.2"
       },
       "bin": {
-        "sass": "sass.js"
+        "architect": "bin/cli.js"
       },
       "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
       }
     },
-    "node_modules/@angular/build/node_modules/semver": {
-      "version": "7.7.3",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+    "node_modules/@angular/build/node_modules/@angular-devkit/core": {
+      "version": "21.2.29",
+      "integrity": "sha512-807H6zbmVxoTZEZymJM/YKcn9BcHQsgCQg9Yki4jDAQIMockyIN9F7jscxHqBtLt2rXHiiDVyWiJhMEyot1OXQ==",
       "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "8.18.0",
+        "ajv-formats": "3.0.1",
+        "jsonc-parser": "3.3.1",
+        "picomatch": "4.0.4",
+        "rxjs": "7.8.2",
+        "source-map": "0.7.6"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
       }
     },
     "node_modules/@angular/cdk": {
@@ -2180,19 +939,6 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@angular/cdk/node_modules/entities": {
-      "version": "9.0.0",
-      "integrity": "sha512-oJFNDJg3kTPwAD1cNn2+WmUq4wFoo09npc3Ydf1D7ED4smRiWrsKnaLxykrTWgyGEcusc87P5dxlAleol9kpkg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true,
-      "engines": {
-        "node": ">=20.19.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/@angular/cdk/node_modules/parse5": {
       "version": "8.1.0",
       "integrity": "sha512-sq3qBFpee5jeocbFbO48VHlGr8sT7mbXS0vxlKN6sottBtJzrOG3998sr0llSZcQAGgfpdmEYAIZE0P9z0dE8w==",
@@ -2207,30 +953,29 @@
       }
     },
     "node_modules/@angular/cli": {
-      "version": "21.0.6",
-      "integrity": "sha512-nBdSDwOCKB3T5STs4EPVsft73x4Ap9rZPQRJuGk5r5seS26nBsKFE/eeUShTIIqqM9tA/NRLSc080ugPKuHr2Q==",
+      "version": "21.2.29",
+      "integrity": "sha512-RGi3JzLgrCb5tZVqqCPjbb1w/1XFwFnno9iIHMs1wcecxcEhiXLq/klLj4wmHk4iWkoCYaltYs+h9fCmkvrVzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.2100.6",
-        "@angular-devkit/core": "21.0.6",
-        "@angular-devkit/schematics": "21.0.6",
-        "@inquirer/prompts": "7.9.0",
+        "@angular-devkit/architect": "0.2102.29",
+        "@angular-devkit/core": "21.2.29",
+        "@angular-devkit/schematics": "21.2.29",
+        "@inquirer/prompts": "7.10.1",
         "@listr2/prompt-adapter-inquirer": "3.0.5",
-        "@modelcontextprotocol/sdk": "1.25.2",
-        "@schematics/angular": "21.0.6",
+        "@modelcontextprotocol/sdk": "1.32.1",
+        "@schematics/angular": "21.2.29",
         "@yarnpkg/lockfile": "1.1.0",
-        "algoliasearch": "5.40.1",
-        "ini": "5.0.0",
+        "algoliasearch": "5.48.1",
+        "ini": "6.0.0",
         "jsonc-parser": "3.3.1",
         "listr2": "9.0.5",
-        "npm-package-arg": "13.0.1",
-        "pacote": "21.0.3",
+        "npm-package-arg": "13.0.2",
+        "pacote": "21.5.1",
         "parse5-html-rewriting-stream": "8.0.0",
-        "resolve": "1.22.11",
-        "semver": "7.7.3",
+        "semver": "7.7.4",
         "yargs": "18.0.0",
-        "zod": "4.1.13"
+        "zod": "4.6.6"
       },
       "bin": {
         "ng": "bin/ng.js"
@@ -2242,14 +987,17 @@
       }
     },
     "node_modules/@angular/cli/node_modules/@angular-devkit/architect": {
-      "version": "0.2100.6",
-      "integrity": "sha512-RsCXULyyNNElRHDObVeEBhEOaLK8QaKu+DaYVhfkOOKvVeDoEI0i+0JomzPhGDjazXPPYG8BPOTgSOvhlEeWSA==",
+      "version": "0.2102.29",
+      "integrity": "sha512-o7dg7tlGbVr/ddXSAD9B/ozNwETfI7hzaBAe4v00+L+Y7Mz85hIy3R9/B0elY/SyoEDkW/HHTRsLubHMWg2AZw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "21.0.6",
+        "@angular-devkit/core": "21.2.29",
         "rxjs": "7.8.2"
       },
+      "bin": {
+        "architect": "bin/cli.js"
+      },
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
         "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
@@ -2257,15 +1005,15 @@
       }
     },
     "node_modules/@angular/cli/node_modules/@angular-devkit/core": {
-      "version": "21.0.6",
-      "integrity": "sha512-quhQrvfbs1zzDev2T3PdyXDsTrthi9QjwegqR4HyDZKvYCWzmXLw9KjScqEWWUSKVLhG7GULrmb+tDsxRFG9lg==",
+      "version": "21.2.29",
+      "integrity": "sha512-807H6zbmVxoTZEZymJM/YKcn9BcHQsgCQg9Yki4jDAQIMockyIN9F7jscxHqBtLt2rXHiiDVyWiJhMEyot1OXQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "8.17.1",
+        "ajv": "8.18.0",
         "ajv-formats": "3.0.1",
         "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.3",
+        "picomatch": "4.0.4",
         "rxjs": "7.8.2",
         "source-map": "0.7.6"
       },
@@ -2275,7 +1023,7 @@
         "yarn": ">= 1.13.0"
       },
       "peerDependencies": {
-        "chokidar": "^4.0.0"
+        "chokidar": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "chokidar": {
@@ -2283,81 +1031,9 @@
         }
       }
     },
-    "node_modules/@angular/cli/node_modules/ajv": {
-      "version": "8.17.1",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/chokidar": {
-      "version": "4.0.3",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/picomatch": {
-      "version": "4.0.3",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/readdirp": {
-      "version": "4.1.2",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/semver": {
-      "version": "7.7.3",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@angular/common": {
-      "version": "21.2.6",
-      "integrity": "sha512-2FcpZ1h6AZ4JwCIlnpHCYrbRTGQTOj/RFXkuX/qw7K6cFmJGfWFMmr++xWtHZEvUddfbR9hqDo+v1mkqEKE/Kw==",
+      "version": "21.2.26",
+      "integrity": "sha512-2lnNdImIHaeTmYqW+lEKeU9vPauNLz8NgM2MoZs7kV9D+CfPMi90F5VwRg0q16J/UiKS8uiYIYmUeaoo2wu4Pg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -2366,13 +1042,13 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "21.2.6",
+        "@angular/core": "21.2.26",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "21.2.6",
-      "integrity": "sha512-shGkb/aAIPbG8oSYkVJ0msGlRdDVcJBVaUVx2KenMltifQjfLn5N8DFMAzOR6haaA3XeugFExxKqmvySjrVq+A==",
+      "version": "21.2.26",
+      "integrity": "sha512-awrZjb8ok4TE871RVCvVkPfO63vmW0whqslXQ1s5sSFzlYoYDGxQznVbp0PoDiYU+QpoxMK50Lec/J2l0+0fjw==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -2382,12 +1058,12 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "21.2.6",
-      "integrity": "sha512-CiPmat4+D+hWXMTAY++09WeII/5D0r6iTjdLdaTq8tlo0uJcrOlazib4CpA94kJ2CRdzfhmC1H+ttwBI1xIlTg==",
+      "version": "21.2.26",
+      "integrity": "sha512-W/S9tImJg9IqEQmkP1yPY2LD4D6/2uSMvg2eHZuTg8zOq3YrhzJINlCKpRy/wp9oWsKxlDKef6tddMDiNa32Hw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "7.29.0",
+        "@babel/core": "7.29.7",
         "@jridgewell/sourcemap-codec": "^1.4.14",
         "chokidar": "^5.0.0",
         "convert-source-map": "^1.5.1",
@@ -2404,7 +1080,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.2.6",
+        "@angular/compiler": "21.2.26",
         "typescript": ">=5.9 <6.1"
       },
       "peerDependenciesMeta": {
@@ -2413,54 +1089,9 @@
         }
       }
     },
-    "node_modules/@angular/compiler-cli/node_modules/@babel/core": {
-      "version": "7.29.0",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@angular/core": {
-      "version": "21.2.6",
-      "integrity": "sha512-svgK5DhFlQlS+sMybXftn08rHHRiDGY/uIKT5LZUaKgyffnkPb8uClpMIW0NzANtU8qs8pwgDZFoJw85Ia3oqQ==",
+      "version": "21.2.26",
+      "integrity": "sha512-EXALAnHRhhBj9WAYend5IIpFlpqPq+HM3OrHxBiWNQoqxOfFKnmRKGERLlX3FEDSzWQt+iZcZHpd2569Xo0pMA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -2469,7 +1100,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.2.6",
+        "@angular/compiler": "21.2.26",
         "rxjs": "^6.5.3 || ^7.4.0",
         "zone.js": "~0.15.0 || ~0.16.0"
       },
@@ -2483,8 +1114,8 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "21.2.6",
-      "integrity": "sha512-i8BoWxBAm0g2xOMcQ8wTdj07gqMPIFYIyefCOo0ezcGj5XhYjd+C2UrYnKsup0aMZqqEAO1l2aZbmfHx9xLheQ==",
+      "version": "21.2.26",
+      "integrity": "sha512-FnQ8LQu5liO5afYaCeRz0TMJW82oiEWo9h7g/KrvjCsgCHW9kY7uLFc3WxFCppVycl0kZLJtYXprkkRIJfMsbw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2495,15 +1126,15 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.6",
-        "@angular/core": "21.2.6",
-        "@angular/platform-browser": "21.2.6",
+        "@angular/common": "21.2.26",
+        "@angular/core": "21.2.26",
+        "@angular/platform-browser": "21.2.26",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "21.2.6",
-      "integrity": "sha512-LW1vPXVHvy71LBahn+fSzPlWQl25kJIdcXq+ptG7HsMVgbPQ3/vvkKXAHYaRdppLGCFL+v+3dQGHYLNLiYL9qg==",
+      "version": "21.2.26",
+      "integrity": "sha512-0yJN5FZX88SqdAnsmZC5E0MGpkQyG4CXjdWN3wTX3vFMsnetvm9MqyZKalxNFneucXV0KLrb8oRma5San3Hmeg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -2512,9 +1143,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "21.2.6",
-        "@angular/common": "21.2.6",
-        "@angular/core": "21.2.6"
+        "@angular/animations": "21.2.26",
+        "@angular/common": "21.2.26",
+        "@angular/core": "21.2.26"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -2523,9 +1154,8 @@
       }
     },
     "node_modules/@angular/platform-browser-dynamic": {
-      "version": "21.2.6",
-      "integrity": "sha512-6a+zA9jM70b1kH3fSfAJIEVmkE3qB3oIXw7otWkv1nEhOJtNO0mM0dTUuO70C3GhnV9tmpLXa2him56C2LhVig==",
-      "deprecated": "@angular/platform-browser-dynamic is deprecated. Use `@angular/platform-browser` instead.",
+      "version": "21.2.26",
+      "integrity": "sha512-YQOvZbPZZ5JuvCjk+5KCM23qrq93ftPuF8NfGNvSDUll4TX5TnKGaWldN93nl9T76oTa98y1PcRJWrCHiNe+tQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -2534,15 +1164,35 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.6",
-        "@angular/compiler": "21.2.6",
-        "@angular/core": "21.2.6",
-        "@angular/platform-browser": "21.2.6"
+        "@angular/common": "21.2.26",
+        "@angular/compiler": "21.2.26",
+        "@angular/core": "21.2.26",
+        "@angular/platform-browser": "21.2.26"
+      }
+    },
+    "node_modules/@angular/platform-server": {
+      "version": "21.2.26",
+      "integrity": "sha512-fxUB/Ji9Js05sbqZdYC8tHLkQ8JaKYaj6zGoFh5N6oWEcycoVlRwNSbIJGiUBddM6V9fOwUlU2ECjkjc5VJxfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0",
+        "xhr2": "^0.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "21.2.26",
+        "@angular/compiler": "21.2.26",
+        "@angular/core": "21.2.26",
+        "@angular/platform-browser": "21.2.26",
+        "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/router": {
-      "version": "21.2.6",
-      "integrity": "sha512-0ajhkKYeOqHQEEH88+Q0HrheR3helwTvdTqD/0gTaapCe+HOoC+SYwmzzsYP2zwAxBNQEg4JHOGKQ30X9/gwgw==",
+      "version": "21.2.26",
+      "integrity": "sha512-GSaSVW1y6SxKVAseszFzzREhxRnFbVtjE4w3acQpBg1SjgKflFrJ87U1vh39GagSfi8n0N8sswdZym4jHxet9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2552,12 +1202,32 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.6",
-        "@angular/core": "21.2.6",
-        "@angular/platform-browser": "21.2.6",
+        "@angular/common": "21.2.26",
+        "@angular/core": "21.2.26",
+        "@angular/platform-browser": "21.2.26",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/ssr": {
+      "version": "21.2.29",
+      "integrity": "sha512-PDHioohS6K5MSic9AwJhDXuDEmt7ZOfhrSdtiTa2zM9nPDsVlny8Nc9uYyIcWicc7V+2BA5Td6u34IWBmAoeeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/platform-server": "^21.0.0",
+        "@angular/router": "^21.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@angular/platform-server": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "7.1.5",
       "integrity": "sha512-jCpAvj8apa7SKHZYogk0rbXB3Kb0hLFrpkWF+Ap+vBA5rirItnpv9NKyAyEuDuFizvl0qwnj6JWR70RGJ0rOlw==",
@@ -5410,8 +4080,7 @@
       "integrity": "sha512-sSAYhQca3rDWtQUHSAPeO7axFIUJOI6hn1gjRC5APVE1a90tuyT8f5WIgRsFhhWA7htNkju2veB9eWL6YHi/Lw==",
       "dev": true,
       "license": "Apache-2.0",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/@hono/node-server": {
       "version": "1.19.17",
@@ -5522,13 +4191,13 @@
       }
     },
     "node_modules/@inquirer/confirm": {
-      "version": "5.1.19",
-      "integrity": "sha512-wQNz9cfcxrtEnUyG5PndC8g3gZ7lGDBzmWiXZkX8ot3vfZ+/BLjR8EvyGX4YzQLeVqtAlY/YScZpW7CW8qMoDQ==",
+      "version": "5.1.21",
+      "integrity": "sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/core": "^10.3.0",
-        "@inquirer/type": "^3.0.9"
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10"
       },
       "engines": {
         "node": ">=18"
@@ -5708,21 +4377,21 @@
       }
     },
     "node_modules/@inquirer/prompts": {
-      "version": "7.9.0",
-      "integrity": "sha512-X7/+dG9SLpSzRkwgG5/xiIzW0oMrV3C0HOa7YHG1WnrLK+vCQHfte4k/T80059YBdei29RBC3s+pSMvPJDU9/A==",
+      "version": "7.10.1",
+      "integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/checkbox": "^4.3.0",
-        "@inquirer/confirm": "^5.1.19",
-        "@inquirer/editor": "^4.2.21",
-        "@inquirer/expand": "^4.0.21",
-        "@inquirer/input": "^4.2.5",
-        "@inquirer/number": "^3.0.21",
-        "@inquirer/password": "^4.0.21",
-        "@inquirer/rawlist": "^4.1.9",
-        "@inquirer/search": "^3.2.0",
-        "@inquirer/select": "^4.4.0"
+        "@inquirer/checkbox": "^4.3.2",
+        "@inquirer/confirm": "^5.1.21",
+        "@inquirer/editor": "^4.2.23",
+        "@inquirer/expand": "^4.0.23",
+        "@inquirer/input": "^4.3.1",
+        "@inquirer/number": "^3.0.23",
+        "@inquirer/password": "^4.0.23",
+        "@inquirer/rawlist": "^4.1.11",
+        "@inquirer/search": "^3.2.2",
+        "@inquirer/select": "^4.4.2"
       },
       "engines": {
         "node": ">=18"
@@ -6926,8 +5595,8 @@
       }
     },
     "node_modules/@lmdb/lmdb-darwin-arm64": {
-      "version": "3.4.3",
-      "integrity": "sha512-zR6Y45VNtW5s+A+4AyhrJk0VJKhXdkLhrySCpCu7PSdnakebsOzNxf58p5Xoq66vOSuueGAxlqDAF49HwdrSTQ==",
+      "version": "3.5.1",
+      "integrity": "sha512-tpfN4kKrrMpQ+If1l8bhmoNkECJi0iOu6AEdrTJvWVC+32sLxTARX5Rsu579mPImRP9YFWfWgeRQ5oav7zApQQ==",
       "cpu": [
         "arm64"
       ],
@@ -6939,8 +5608,8 @@
       ]
     },
     "node_modules/@lmdb/lmdb-darwin-x64": {
-      "version": "3.4.3",
-      "integrity": "sha512-nfGm5pQksBGfaj9uMbjC0YyQreny/Pl7mIDtHtw6g7WQuCgeLullr9FNRsYyKplaEJBPrCVpEjpAznxTBIrXBw==",
+      "version": "3.5.1",
+      "integrity": "sha512-+a2tTfc3rmWhLAolFUWRgJtpSuu+Fw/yjn4rF406NMxhfjbMuiOUTDRvRlMFV+DzyjkwnokisskHbCWkS3Ly5w==",
       "cpu": [
         "x64"
       ],
@@ -6952,8 +5621,8 @@
       ]
     },
     "node_modules/@lmdb/lmdb-linux-arm": {
-      "version": "3.4.3",
-      "integrity": "sha512-Kjqomp7i0rgSbYSUmv9JnXpS55zYT/YcW3Bdf9oqOTjcH0/8tFAP8MLhu/i9V2pMKIURDZk63Ww49DTK0T3c/Q==",
+      "version": "3.5.1",
+      "integrity": "sha512-0EgcE6reYr8InjD7V37EgXcYrloqpxVPINy3ig1MwDSbl6LF/vXTYRH9OE1Ti1D8YZnB35ZH9aTcdfSb5lql2A==",
       "cpu": [
         "arm"
       ],
@@ -6965,8 +5634,8 @@
       ]
     },
     "node_modules/@lmdb/lmdb-linux-arm64": {
-      "version": "3.4.3",
-      "integrity": "sha512-uX9eaPqWb740wg5D3TCvU/js23lSRSKT7lJrrQ8IuEG/VLgpPlxO3lHDywU44yFYdGS7pElBn6ioKFKhvALZlw==",
+      "version": "3.5.1",
+      "integrity": "sha512-aoERa5B6ywXdyFeYGQ1gbQpkMkDbEo45qVoXE5QpIRavqjnyPwjOulMkmkypkmsbJ5z4Wi0TBztON8agCTG0Vg==",
       "cpu": [
         "arm64"
       ],
@@ -6978,8 +5647,8 @@
       ]
     },
     "node_modules/@lmdb/lmdb-linux-x64": {
-      "version": "3.4.3",
-      "integrity": "sha512-7/8l20D55CfwdMupkc3fNxNJdn4bHsti2X0cp6PwiXlLeSFvAfWs5kCCx+2Cyje4l4GtN//LtKWjTru/9hDJQg==",
+      "version": "3.5.1",
+      "integrity": "sha512-SqNDY1+vpji7bh0sFH5wlWyFTOzjbDOl0/kB5RLLYDAFyd/uw3n7wyrmas3rYPpAW7z18lMOi1yKlTPv967E3g==",
       "cpu": [
         "x64"
       ],
@@ -6991,8 +5660,8 @@
       ]
     },
     "node_modules/@lmdb/lmdb-win32-arm64": {
-      "version": "3.4.3",
-      "integrity": "sha512-yWVR0e5Gl35EGJBsAuqPOdjtUYuN8CcTLKrqpQFoM+KsMadViVCulhKNhkcjSGJB88Am5bRPjMro4MBB9FS23Q==",
+      "version": "3.5.1",
+      "integrity": "sha512-50v0O1Lt37cwrmR9vWZK5hRW0Aw+KEmxJJ75fge/zIYdvNKB/0bSMSVR5Uc2OV9JhosIUyklOmrEvavwNJ8D6w==",
       "cpu": [
         "arm64"
       ],
@@ -7004,8 +5673,8 @@
       ]
     },
     "node_modules/@lmdb/lmdb-win32-x64": {
-      "version": "3.4.3",
-      "integrity": "sha512-1JdBkcO0Vrua4LUgr4jAe4FUyluwCeq/pDkBrlaVjX3/BBWP1TzVjCL+TibWNQtPAL1BITXPAhlK5Ru4FBd/hg==",
+      "version": "3.5.1",
+      "integrity": "sha512-qwosvPyl+zpUlp3gRb7UcJ3H8S28XHCzkv0Y0EgQToXjQP91ZD67EHSCDmaLjtKhe+GVIW5om1KUpzVLA0l6pg==",
       "cpu": [
         "x64"
       ],
@@ -7017,12 +5686,12 @@
       ]
     },
     "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.25.2",
-      "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==",
+      "version": "1.32.1",
+      "integrity": "sha512-2DdE+SJDtzLEEWzY1ZjY7Q+VcPhcV1KisD3zI4u0XZyktsjHum1mwbMI+JaulUBi2OZk+KJAi2uPXzxichPkdw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@hono/node-server": "^1.19.7",
+        "@hono/node-server": "^1.19.9 || ^2.0.5",
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
         "content-type": "^1.0.5",
@@ -7030,14 +5699,15 @@
         "cross-spawn": "^7.0.5",
         "eventsource": "^3.0.2",
         "eventsource-parser": "^3.0.0",
-        "express": "^5.0.1",
-        "express-rate-limit": "^7.5.0",
-        "jose": "^6.1.1",
+        "express": "^5.2.1",
+        "express-rate-limit": "^8.2.1",
+        "hono": "^4.11.4",
+        "jose": "^6.1.3",
         "json-schema-typed": "^8.0.2",
         "pkce-challenge": "^5.0.0",
         "raw-body": "^3.0.0",
         "zod": "^3.25 || ^4.0",
-        "zod-to-json-schema": "^3.25.0"
+        "zod-to-json-schema": "^3.25.1"
       },
       "engines": {
         "node": ">=18"
@@ -7579,40 +6249,19 @@
     },
     "node_modules/@npmcli/git": {
       "version": "7.0.2",
-      "integrity": "sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@gar/promise-retry": "^1.0.0",
-        "@npmcli/promise-spawn": "^9.0.0",
-        "ini": "^6.0.0",
-        "lru-cache": "^11.2.1",
-        "npm-pick-manifest": "^11.0.1",
-        "proc-log": "^6.0.0",
-        "semver": "^7.3.5",
-        "which": "^6.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/@npmcli/git/node_modules/@npmcli/promise-spawn": {
-      "version": "9.0.1",
-      "integrity": "sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "which": "^6.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/@npmcli/git/node_modules/ini": {
-      "version": "6.0.0",
-      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
+      "integrity": "sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg==",
       "dev": true,
       "license": "ISC",
+      "dependencies": {
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "ini": "^6.0.0",
+        "lru-cache": "^11.2.1",
+        "npm-pick-manifest": "^11.0.1",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "which": "^6.0.0"
+      },
       "engines": {
         "node": "^20.17.0 || >=22.9.0"
       }
@@ -7635,15 +6284,6 @@
         "node": "20 || >=22"
       }
     },
-    "node_modules/@npmcli/git/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@npmcli/git/node_modules/which": {
       "version": "6.0.1",
       "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
@@ -7660,19 +6300,19 @@
       }
     },
     "node_modules/@npmcli/installed-package-contents": {
-      "version": "3.0.0",
-      "integrity": "sha512-fkxoPuFGvxyrH+OQzyTkX2LUEamrF4jZSmxjAtPPHHGO0dqsQ8tTKjnIS8SAnPHdk2I03BDtSMR5K/4loKg79Q==",
+      "version": "4.0.0",
+      "integrity": "sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "npm-bundled": "^4.0.0",
-        "npm-normalize-package-bin": "^4.0.0"
+        "npm-bundled": "^5.0.0",
+        "npm-normalize-package-bin": "^5.0.0"
       },
       "bin": {
         "installed-package-contents": "bin/index.js"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/@npmcli/node-gyp": {
@@ -7702,49 +6342,40 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@npmcli/package-json/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@npmcli/promise-spawn": {
-      "version": "8.0.3",
-      "integrity": "sha512-Yb00SWaL4F8w+K8YGhQ55+xE4RUNdMHV43WZGsiTM92gS+lC0mGsn7I4hLug7pbao035S6bj3Y3w0cUNGLfmkg==",
+      "version": "9.0.2",
+      "integrity": "sha512-h7b1j0egrruBm/32eVA6/zMw5VJxxaB3vT+uVGGQ4SAAMrQVFHNuzL4+EAXn66j+huj0jApINc1fW3fC+kVoeA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "which": "^5.0.0"
+        "which": "^6.0.0"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/@npmcli/promise-spawn/node_modules/isexe": {
-      "version": "3.1.5",
-      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "version": "4.0.0",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       }
     },
     "node_modules/@npmcli/promise-spawn/node_modules/which": {
-      "version": "5.0.0",
-      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "version": "6.0.1",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "isexe": "^3.1.1"
+        "isexe": "^4.0.0"
       },
       "bin": {
         "node-which": "bin/which.js"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/@npmcli/redact": {
@@ -7772,54 +6403,9 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@npmcli/run-script/node_modules/@npmcli/promise-spawn": {
-      "version": "9.0.1",
-      "integrity": "sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "which": "^6.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/@npmcli/run-script/node_modules/isexe": {
-      "version": "4.0.0",
-      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/@npmcli/run-script/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/@npmcli/run-script/node_modules/which": {
-      "version": "6.0.1",
-      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^4.0.0"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@oxc-project/types": {
-      "version": "0.96.0",
-      "integrity": "sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==",
+      "version": "0.113.0",
+      "integrity": "sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -8403,8 +6989,8 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-vPP9/MZzESh9QtmvQYojXP/midjgkkc1E4AdnPPAzQXo668ncHJcVLKjJKzoBdsQmaIvNjrMdsCwES8vTQHRQw==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-vRq9f4NzvbdZavhQbjkJBx7rRebDKYR9zHfO/Wg486+I7bSecdUapzCm5cyXoK+LHokTxgSq7A5baAXUZkIz0w==",
       "cpu": [
         "arm64"
       ],
@@ -8419,8 +7005,8 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-Lc3nrkxeaDVCVl8qR3qoxh6ltDZfkQ98j5vwIr5ALPkgjZtDK4BGCrrBoLpGVMg+csWcaqUbwbKwH5yvVa0oOw==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-kFgEvkWLqt3YCgKB5re9RlIrx9bRsvyVUnaTakEpOPuLGzLpLapYxE9BufJNvPg8GjT6mB1alN4yN1NjzoeM8Q==",
       "cpu": [
         "arm64"
       ],
@@ -8435,8 +7021,8 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-eBYxQDwP0O33plqNVqOtUHqRiSYVneAknviM5XMawke3mwMuVlAsohtOqEjbCEl/Loi/FWdVeks5WkqAkzkYWQ==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-JXmaOJGsL/+rsmMfutcDjxWM2fTaVgCHGoXS7nE8Z3c9NAYjGqHvXrAhMUZvMpHS/k7Mg+X7n/MVKb7NYWKKww==",
       "cpu": [
         "x64"
       ],
@@ -8451,8 +7037,8 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-Ns+kgp2+1Iq/44bY/Z30DETUSiHY7ZuqaOgD5bHVW++8vme9rdiWsN4yG4rRPXkdgzjvQ9TDHmZZKfY4/G11AA==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-ep3Catd6sPnHTM0P4hNEvIv5arnDvk01PfyJIJ+J3wVCG1eEaPo09tvFqdtcaTrkwQy0VWR24uz+cb4IsK53Qw==",
       "cpu": [
         "x64"
       ],
@@ -8467,8 +7053,8 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-4PecgWCJhTA2EFOlptYJiNyVP2MrVP4cWdndpOu3WmXqWqZUmSubhb4YUAIxAxnXATlGjC1WjxNPhV7ZllNgdA==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-LwA5ayKIpnsgXJEwWc3h8wPiS33NMIHd9BhsV92T8VetVAbGe2qXlJwNVDGHN5cOQ22R9uYvbrQir2AB+ntT2w==",
       "cpu": [
         "arm"
       ],
@@ -8483,8 +7069,8 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-CyIunZ6D9U9Xg94roQI1INt/bLkOpPsZjZZkiaAZ0r6uccQdICmC99M9RUPlMLw/qg4yEWLlQhG73W/mG437NA==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-AC1WsGdlV1MtGay/OQ4J9T7GRadVnpYRzTcygV1hKnypbYN20Yh4t6O1Sa2qRBMqv1etulUknqXjc3CTIsBu6A==",
       "cpu": [
         "arm64"
       ],
@@ -8499,8 +7085,8 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-doozc/Goe7qRCSnzfJbFINTHsMktqmZQmweull6hsZZ9sjNWQ6BWQnbvOlfZJe4xE5NxM1NhPnY5Giqnl3ZrYQ==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-lU+6rgXXViO61B4EudxtVMXSOfiZONR29Sys5VGSetUY7X8mg9FCKIIjcPPj8xNDeYzKl+H8F/qSKOBVFJChCQ==",
       "cpu": [
         "arm64"
       ],
@@ -8515,8 +7101,8 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-fodvSMf6Aqwa0wEUSTPewmmZOD44rc5Tpr5p9NkwQ6W1SSpUKzD3SwpJIgANDOhwiYhDuiIaYPGB7Ujkx1q0UQ==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-DZaN1f0PGp/bSvKhtw50pPsnln4T13ycDq1FrDWRiHmWt1JeW+UtYg9touPFf8yt993p8tS2QjybpzKNTxYEwg==",
       "cpu": [
         "x64"
       ],
@@ -8531,8 +7117,8 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-Rxm5hYc0mGjwLh5sjlGmMygxAaV2gnsx7CNm2lsb47oyt5UQyPDZf3GP/ct8BEcwuikdqzsrrlIp8+kCSvMFNQ==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-RnGxwZLN7fhMMAItnD6dZ7lvy+TI7ba+2V54UF4dhaWa/p8I/ys1E73KO6HmPmgz92ZkfD8TXS1IMV8+uhbR9g==",
       "cpu": [
         "x64"
       ],
@@ -8547,8 +7133,8 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-YakuVe+Gc87jjxazBL34hbr8RJpRuFBhun7NEqoChVDlH5FLhLXjAPHqZd990TVGVNkemourf817Z8u2fONS8w==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-6lcI79+X8klGiGd8yHuTgQRjuuJYNggmEml+RsyN596P23l/zf9FVmJ7K0KVKkFAeYEdg0iMUKyIxiV5vebDNQ==",
       "cpu": [
         "arm64"
       ],
@@ -8563,8 +7149,8 @@
       }
     },
     "node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-ak2GvTFQz3UAOw8cuQq8pWE+TNygQB6O47rMhvevvTzETh7VkHRFtRUwJynX5hwzFvQMP6G0az5JrBGuwaMwYQ==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-wz7ohsKCAIWy91blZ/1FlpPdqrsm1xpcEOQVveWoL6+aSPKL4VUcoYmmzuLTssyZxRpEwzuIxL/GDsvpjaBtOw==",
       "cpu": [
         "wasm32"
       ],
@@ -8572,15 +7158,15 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.0.7"
+        "@napi-rs/wasm-runtime": "^1.1.1"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-o5BpmBnXU+Cj+9+ndMcdKjhZlPb79dVPBZnWwMnI4RlNSSq5yOvFZqvfPYbyacvnW03Na4n5XXQAPhu3RydZ0w==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==",
       "cpu": [
         "arm64"
       ],
@@ -8594,25 +7180,9 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
-    "node_modules/@rolldown/binding-win32-ia32-msvc": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-FVOmfyYehNE92IfC9Kgs913UerDog2M1m+FADJypKz0gmRg3UyTt4o1cZMCAl7MiR89JpM9jegNO1nXuP1w1vw==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      }
-    },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-by/70F13IUE101Bat0oeH8miwWX5mhMFPk1yjCdxoTNHTyTdLgb0THNaebRM6AP7Kz+O3O2qx87sruYuF5UxHg==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-p6UeR9y7ht82AH57qwGuFYn69S6CZ7LLKdCKy/8T3zS9VTrJei2/CGsTUV45Da4Z9Rbhc7G4gyWQ/Ioamqn09g==",
       "cpu": [
         "x64"
       ],
@@ -8627,8 +7197,8 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==",
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -9074,13 +7644,13 @@
       "license": "MIT"
     },
     "node_modules/@schematics/angular": {
-      "version": "21.0.6",
-      "integrity": "sha512-9oh0RX+Cj2Pc8Aap/75qkcK2rmDZcyoTokiJG1m2b/I9MH1XmiFBdao1du2BA5GJtBRFizzXCoYf5v4LwxIP2w==",
+      "version": "21.2.29",
+      "integrity": "sha512-u8WDSr+AcOo+IwfS4gXVB2jT+j8EhW8P7+zoYzaBywnQl4zYLsPalo0pB8I4tbsmPyZKIMrHmlZ3b6C3UYkvUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "21.0.6",
-        "@angular-devkit/schematics": "21.0.6",
+        "@angular-devkit/core": "21.2.29",
+        "@angular-devkit/schematics": "21.2.29",
         "jsonc-parser": "3.3.1"
       },
       "engines": {
@@ -9090,15 +7660,15 @@
       }
     },
     "node_modules/@schematics/angular/node_modules/@angular-devkit/core": {
-      "version": "21.0.6",
-      "integrity": "sha512-quhQrvfbs1zzDev2T3PdyXDsTrthi9QjwegqR4HyDZKvYCWzmXLw9KjScqEWWUSKVLhG7GULrmb+tDsxRFG9lg==",
+      "version": "21.2.29",
+      "integrity": "sha512-807H6zbmVxoTZEZymJM/YKcn9BcHQsgCQg9Yki4jDAQIMockyIN9F7jscxHqBtLt2rXHiiDVyWiJhMEyot1OXQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "8.17.1",
+        "ajv": "8.18.0",
         "ajv-formats": "3.0.1",
         "jsonc-parser": "3.3.1",
-        "picomatch": "4.0.3",
+        "picomatch": "4.0.4",
         "rxjs": "7.8.2",
         "source-map": "0.7.6"
       },
@@ -9108,7 +7678,7 @@
         "yarn": ">= 1.13.0"
       },
       "peerDependencies": {
-        "chokidar": "^4.0.0"
+        "chokidar": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "chokidar": {
@@ -9116,66 +7686,6 @@
         }
       }
     },
-    "node_modules/@schematics/angular/node_modules/ajv": {
-      "version": "8.17.1",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/chokidar": {
-      "version": "4.0.3",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/picomatch": {
-      "version": "4.0.3",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/readdirp": {
-      "version": "4.1.2",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@sigstore/bundle": {
       "version": "4.0.0",
       "integrity": "sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==",
@@ -9223,15 +7733,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@sigstore/sign/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@sigstore/tuf": {
       "version": "4.0.2",
       "integrity": "sha512-TCAzTy0xzdP79EnxSjq9KQ3eaR7+FmudLC6eRKknVKZbV7ZNlGLClAAQb/HMNJ5n2OBNk2GT1tEmU0xuPr+SLQ==",
@@ -9520,7 +8021,6 @@
       "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -9541,7 +8041,6 @@
       "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -9592,16 +8091,14 @@
       "license": "MIT"
     },
     "node_modules/@types/express": {
-      "version": "4.17.25",
-      "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
+      "version": "5.0.6",
+      "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.33",
-        "@types/qs": "*",
-        "@types/serve-static": "^1"
+        "@types/express-serve-static-core": "^5.0.0",
+        "@types/serve-static": "^2"
       }
     },
     "node_modules/@types/express-serve-static-core": {
@@ -9617,12 +8114,33 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/express/node_modules/@types/express-serve-static-core": {
+      "version": "5.1.3",
+      "integrity": "sha512-dPfW8NFiOF4wOHc7+N/QSxlY9cfSsenewGbAz8C8U/MULPd/YZ27LvJUIlzaXie7e6Ove9YunJGgC9tbHD2cKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/express/node_modules/@types/serve-static": {
+      "version": "2.2.0",
+      "integrity": "sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/http-errors": {
       "version": "2.0.5",
       "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/http-proxy": {
       "version": "1.17.17",
@@ -9727,15 +8245,13 @@
       "version": "6.15.1",
       "integrity": "sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/retry": {
       "version": "0.12.2",
@@ -9749,7 +8265,6 @@
       "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -10385,8 +8900,8 @@
       ]
     },
     "node_modules/@vitejs/plugin-basic-ssl": {
-      "version": "2.1.0",
-      "integrity": "sha512-dOxxrhgyDIEUADhb/8OlV9JIqYLgos03YorAueTIeOUskLJSEsfwCByjbu98ctXitUN3znXKp0bYD/WHSudCeA==",
+      "version": "2.1.4",
+      "integrity": "sha512-HXciTXN/sDBYWgeAD4V4s0DN0g72x5mlxQhHxtYu3Tt8BLa6MzcJZUyDVFCdtjNs3bfENVHVzOsmooTVuNgAAw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10736,25 +9251,25 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "5.40.1",
-      "integrity": "sha512-iUNxcXUNg9085TJx0HJLjqtDE0r1RZ0GOGrt8KNQqQT5ugu8lZsHuMUYW/e0lHhq6xBvmktU9Bw4CXP9VQeKrg==",
+      "version": "5.48.1",
+      "integrity": "sha512-Rf7xmeuIo7nb6S4mp4abW2faW8DauZyE2faBIKFaUfP3wnpOvNSbiI5AwVhqBNj0jPgBWEvhyCu0sLjN2q77Rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/abtesting": "1.6.1",
-        "@algolia/client-abtesting": "5.40.1",
-        "@algolia/client-analytics": "5.40.1",
-        "@algolia/client-common": "5.40.1",
-        "@algolia/client-insights": "5.40.1",
-        "@algolia/client-personalization": "5.40.1",
-        "@algolia/client-query-suggestions": "5.40.1",
-        "@algolia/client-search": "5.40.1",
-        "@algolia/ingestion": "1.40.1",
-        "@algolia/monitoring": "1.40.1",
-        "@algolia/recommend": "5.40.1",
-        "@algolia/requester-browser-xhr": "5.40.1",
-        "@algolia/requester-fetch": "5.40.1",
-        "@algolia/requester-node-http": "5.40.1"
+        "@algolia/abtesting": "1.14.1",
+        "@algolia/client-abtesting": "5.48.1",
+        "@algolia/client-analytics": "5.48.1",
+        "@algolia/client-common": "5.48.1",
+        "@algolia/client-insights": "5.48.1",
+        "@algolia/client-personalization": "5.48.1",
+        "@algolia/client-query-suggestions": "5.48.1",
+        "@algolia/client-search": "5.48.1",
+        "@algolia/ingestion": "1.48.1",
+        "@algolia/monitoring": "1.48.1",
+        "@algolia/recommend": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -11280,8 +9795,8 @@
       "peer": true
     },
     "node_modules/beasties": {
-      "version": "0.3.5",
-      "integrity": "sha512-NaWu+f4YrJxEttJSm16AzMIFtVldCvaJ68b1L098KpqXmxt9xOLtKoLkKxb8ekhOrLqEJAbvT6n6SEvB/sac7A==",
+      "version": "0.4.1",
+      "integrity": "sha512-2Imdcw3LznDuxAbJM26RHniOLAzE6WgrK8OuvVXCQtNBS8rsnD9zsSEa3fHl4hHpUY7BYTlrpvtPVbvu9G6neg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -11292,10 +9807,11 @@
         "htmlparser2": "^10.0.0",
         "picocolors": "^1.1.1",
         "postcss": "^8.4.49",
-        "postcss-media-query-parser": "^0.2.3"
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-safe-parser": "^7.0.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/bidi-js": {
@@ -11550,24 +10066,12 @@
       }
     },
     "node_modules/cacache/node_modules/lru-cache": {
-      "version": "11.5.3",
-      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": "20 || >=22"
-      }
-    },
-    "node_modules/cacache/node_modules/ssri": {
-      "version": "13.0.1",
-      "integrity": "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
+      "version": "11.5.3",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": "20 || >=22"
       }
     },
     "node_modules/call-bind": {
@@ -12924,12 +11428,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/err-code": {
-      "version": "2.0.3",
-      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/errno": {
       "version": "0.1.8",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
@@ -14097,10 +12595,14 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "7.5.1",
-      "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
+      "version": "8.7.3",
+      "integrity": "sha512-zPLqDI2f0gV2WmGnacLf9XSSqn4VldRyP5LCzOwx0BKH40mO6+2PCFkoSsRO2jePx87/Kf6NUF6P2QOTKXHbQA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "ip-address": "^10.2.0"
+      },
       "engines": {
         "node": ">= 16"
       },
@@ -14873,7 +13375,6 @@
       "integrity": "sha512-CQ46U0ZkAGmbT/4UxdzzGJpacP2IeKgY4a5/tOI9AABbpOMfK739wfDXmv1usCk+3RkKj1hQy4/fjhiwa2xlrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -15002,6 +13503,13 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/htmlrewriter": {
+      "name": "wf-htmlrewriter",
+      "version": "0.0.13",
+      "integrity": "sha512-ymlCpT94FPRo1eHGOoFgoLQfdJwofayAumP9Bcxl6XBZaoR0Qk1kAIvhsfXY1PADZs1Y6crbujQC8LnaMUi0OQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.3.0",
       "integrity": "sha512-M5t5LlJpS1UHMjvwRQVdFHvPISGeLAxNcrWuJkeGh0KxsqCHZ1O3NXZU/8x7cD0BDcGW8kapxMKTvwlqrNkHkA==",
@@ -15238,12 +13746,12 @@
       "license": "ISC"
     },
     "node_modules/ini": {
-      "version": "5.0.0",
-      "integrity": "sha512-+N0ngpO3e7cRUWOJAS7qw0IZIVc6XPrW4MlFBdD066F2L4k1L6ker3hLqSq7iXxU5tgS4WGkIUElWn5vogAEnw==",
+      "version": "6.0.0",
+      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
       "dev": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/injection-js": {
@@ -17187,266 +15695,33 @@
         },
         "webpack-sources": {
           "optional": true
-        }
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/listr2": {
-      "version": "9.0.5",
-      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cli-truncate": "^5.0.0",
-        "colorette": "^2.0.20",
-        "eventemitter3": "^5.0.1",
-        "log-update": "^6.1.0",
-        "rfdc": "^1.4.1",
-        "wrap-ansi": "^9.0.0"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/listr2/node_modules/ansi-regex": {
-      "version": "6.4.0",
-      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/listr2/node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/listr2/node_modules/eventemitter3": {
-      "version": "5.0.4",
-      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/listr2/node_modules/string-width": {
-      "version": "7.2.0",
-      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^10.3.0",
-        "get-east-asian-width": "^1.0.0",
-        "strip-ansi": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/listr2/node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/listr2/node_modules/wrap-ansi": {
-      "version": "9.0.2",
-      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.2.1",
-        "string-width": "^7.0.0",
-        "strip-ansi": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/lmdb": {
-      "version": "3.4.3",
-      "integrity": "sha512-GWV1kVi6uhrXWqe+3NXWO73OYe8fto6q8JMo0HOpk1vf8nEyFWgo4CSNJpIFzsOxOrysVUlcO48qRbQfmKd1gA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "msgpackr": "^1.11.2",
-        "node-addon-api": "^6.1.0",
-        "node-gyp-build-optional-packages": "5.2.2",
-        "ordered-binary": "^1.5.3",
-        "weak-lru-cache": "^1.2.2"
-      },
-      "bin": {
-        "download-lmdb-prebuilds": "bin/download-prebuilds.js"
-      },
-      "optionalDependencies": {
-        "@lmdb/lmdb-darwin-arm64": "3.4.3",
-        "@lmdb/lmdb-darwin-x64": "3.4.3",
-        "@lmdb/lmdb-linux-arm": "3.4.3",
-        "@lmdb/lmdb-linux-arm64": "3.4.3",
-        "@lmdb/lmdb-linux-x64": "3.4.3",
-        "@lmdb/lmdb-win32-arm64": "3.4.3",
-        "@lmdb/lmdb-win32-x64": "3.4.3"
-      }
-    },
-    "node_modules/lmdb/node_modules/node-addon-api": {
-      "version": "6.1.0",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/loader-runner": {
-      "version": "4.3.2",
-      "integrity": "sha512-DFEqQ3ihfS9blba08cLfYf1NRAIEm+dDjic073DRDc3/JspI/8wYmtDsHwd3+4hwvdxSK7PGaElfTmm0awWJ4w==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6.11.5"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/loader-utils": {
-      "version": "3.3.1",
-      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/lodash": {
-      "version": "4.18.1",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash-es": {
-      "version": "4.18.1",
-      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/lodash.memoize": {
-      "version": "4.1.2",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/log-symbols": {
-      "version": "7.0.1",
-      "integrity": "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-unicode-supported": "^2.0.0",
-        "yoctocolors": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/log-update": {
-      "version": "6.1.0",
-      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-escapes": "^7.0.0",
-        "cli-cursor": "^5.0.0",
-        "slice-ansi": "^7.1.0",
-        "strip-ansi": "^7.1.0",
-        "wrap-ansi": "^9.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        }
       }
     },
-    "node_modules/log-update/node_modules/ansi-escapes": {
-      "version": "7.3.0",
-      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2": {
+      "version": "9.0.5",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "environment": "^1.0.0"
+        "cli-truncate": "^5.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
       },
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=20.0.0"
       }
     },
-    "node_modules/log-update/node_modules/ansi-regex": {
+    "node_modules/listr2/node_modules/ansi-regex": {
       "version": "6.4.0",
       "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
       "dev": true,
@@ -17458,7 +15733,7 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/log-update/node_modules/ansi-styles": {
+    "node_modules/listr2/node_modules/ansi-styles": {
       "version": "6.2.3",
       "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
@@ -17470,23 +15745,13 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/log-update/node_modules/slice-ansi": {
-      "version": "7.1.2",
-      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+    "node_modules/listr2/node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.2.1",
-        "is-fullwidth-code-point": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
-      }
+      "license": "MIT"
     },
-    "node_modules/log-update/node_modules/string-width": {
+    "node_modules/listr2/node_modules/string-width": {
       "version": "7.2.0",
       "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
@@ -17503,7 +15768,7 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-update/node_modules/strip-ansi": {
+    "node_modules/listr2/node_modules/strip-ansi": {
       "version": "7.2.0",
       "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
@@ -17518,7 +15783,7 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/log-update/node_modules/wrap-ansi": {
+    "node_modules/listr2/node_modules/wrap-ansi": {
       "version": "9.0.2",
       "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
       "dev": true,
@@ -17535,584 +15800,451 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/magic-string": {
-      "version": "0.30.19",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
-    "node_modules/make-dir": {
-      "version": "4.0.0",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+    "node_modules/lmdb": {
+      "version": "3.5.1",
+      "integrity": "sha512-NYHA0MRPjvNX+vSw8Xxg6FLKxzAG+e7Pt8RqAQA/EehzHVXq9SxDqJIN3JL1hK0dweb884y8kIh6rkWvPyg9Wg==",
       "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
+        "@harperfast/extended-iterable": "^1.0.3",
+        "msgpackr": "^1.11.2",
+        "node-addon-api": "^6.1.0",
+        "node-gyp-build-optional-packages": "5.2.2",
+        "ordered-binary": "^1.5.3",
+        "weak-lru-cache": "^1.2.2"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/make-error": {
-      "version": "1.3.6",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/make-fetch-happen": {
-      "version": "15.0.6",
-      "integrity": "sha512-Je0fLJ0F5atA7F+eIlLzk+Wkcl57JDf4kf+EW8xiP5E31xOQxkIxTbgf1Oi1Lw9tRI9UEMRdI5Vz2xTzoNU1Jw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@gar/promise-retry": "^1.0.0",
-        "@npmcli/agent": "^4.0.0",
-        "@npmcli/redact": "^4.0.0",
-        "cacache": "^20.0.1",
-        "http-cache-semantics": "^4.1.1",
-        "minipass": "^7.0.2",
-        "minipass-fetch": "^5.0.0",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.4",
-        "negotiator": "^1.0.0",
-        "proc-log": "^6.0.0",
-        "ssri": "^13.0.0"
+      "bin": {
+        "download-lmdb-prebuilds": "bin/download-prebuilds.js"
       },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+      "optionalDependencies": {
+        "@lmdb/lmdb-darwin-arm64": "3.5.1",
+        "@lmdb/lmdb-darwin-x64": "3.5.1",
+        "@lmdb/lmdb-linux-arm": "3.5.1",
+        "@lmdb/lmdb-linux-arm64": "3.5.1",
+        "@lmdb/lmdb-linux-x64": "3.5.1",
+        "@lmdb/lmdb-win32-arm64": "3.5.1",
+        "@lmdb/lmdb-win32-x64": "3.5.1"
       }
     },
-    "node_modules/make-fetch-happen/node_modules/proc-log": {
+    "node_modules/lmdb/node_modules/node-addon-api": {
       "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/make-fetch-happen/node_modules/ssri": {
-      "version": "13.0.1",
-      "integrity": "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/mdn-data": {
-      "version": "2.27.1",
-      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "dev": true,
-      "license": "CC0-1.0",
-      "peer": true
+      "optional": true
     },
-    "node_modules/media-typer": {
-      "version": "1.1.1",
-      "integrity": "sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==",
+    "node_modules/loader-runner": {
+      "version": "4.3.2",
+      "integrity": "sha512-DFEqQ3ihfS9blba08cLfYf1NRAIEm+dDjic073DRDc3/JspI/8wYmtDsHwd3+4hwvdxSK7PGaElfTmm0awWJ4w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=6.11.5"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/memfs": {
-      "version": "4.80.0",
-      "integrity": "sha512-N70W2isi44XdGn7uPo9NJ4zRukcdkwSFHlnYx42SWOH/+hzqNc8P7+tVoA2up4z7faHvNi1RSNCFjxoYQ71VPQ==",
+    "node_modules/loader-utils": {
+      "version": "3.3.1",
+      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "peer": true,
-      "dependencies": {
-        "@jsonjoy.com/fs-core": "4.80.0",
-        "@jsonjoy.com/fs-fsa": "4.80.0",
-        "@jsonjoy.com/fs-node": "4.80.0",
-        "@jsonjoy.com/fs-node-builtins": "4.80.0",
-        "@jsonjoy.com/fs-node-to-fsa": "4.80.0",
-        "@jsonjoy.com/fs-node-utils": "4.80.0",
-        "@jsonjoy.com/fs-print": "4.80.0",
-        "@jsonjoy.com/fs-snapshot": "4.80.0",
-        "@jsonjoy.com/json-pack": "^1.11.0",
-        "@jsonjoy.com/util": "^1.9.0",
-        "glob-to-regex.js": "^1.3.1",
-        "thingies": "^2.5.0",
-        "tree-dump": "^1.0.3",
-        "tslib": "^2.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
+      "engines": {
+        "node": ">= 12.13.0"
       }
     },
-    "node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
+      "license": "MIT"
     },
-    "node_modules/micromatch": {
+    "node_modules/lodash.debounce": {
       "version": "4.0.8",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
+      "peer": true
     },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.2",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "7.0.1",
+      "integrity": "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
+      "dependencies": {
+        "is-unicode-supported": "^2.0.0",
+        "yoctocolors": "^2.1.1"
+      },
       "engines": {
-        "node": ">=8.6"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.54.0",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mime-types": {
-      "version": "3.0.2",
-      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+    "node_modules/log-update/node_modules/ansi-escapes": {
+      "version": "7.3.0",
+      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "mime-db": "^1.54.0"
+        "environment": "^1.0.0"
       },
       "engines": {
         "node": ">=18"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.4.0",
+      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/mimic-function": {
-      "version": "5.0.1",
-      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/mini-css-extract-plugin": {
-      "version": "2.10.0",
-      "integrity": "sha512-540P2c5dYnJlyJxTaSloliZexv8rji6rY8FhQN+WF/82iHQfA23j/xtJx97L+mXOML27EqksSek/g4eK7jaL3g==",
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "schema-utils": "^4.0.0",
-        "tapable": "^2.2.1"
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">=18"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/minimalistic-assert": {
-      "version": "1.0.1",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true,
-      "license": "ISC",
-      "peer": true
-    },
-    "node_modules/minimatch": {
-      "version": "10.2.6",
-      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^5.0.8"
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": "18 || 20 || >=22"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
       "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.3",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minipass-collect": {
-      "version": "2.0.1",
-      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
-      "dev": true,
-      "license": "ISC",
       "dependencies": {
-        "minipass": "^7.0.3"
+        "ansi-regex": "^6.2.2"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/minipass-fetch": {
-      "version": "5.0.2",
-      "integrity": "sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ==",
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "minipass": "^7.0.3",
-        "minipass-sized": "^2.0.0",
-        "minizlib": "^3.0.1"
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       },
-      "optionalDependencies": {
-        "iconv-lite": "^0.7.2"
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/minipass-flush": {
-      "version": "1.0.7",
-      "integrity": "sha512-TbqTz9cUwWyHS2Dy89P3ocAGUGxKjjLuR9z8w4WUTGAVgEj17/4nhgo2Du56i0Fm3Pm30g4iA8Lcqctc76jCzA==",
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "ISC",
       "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
+        "yallist": "^3.0.2"
       }
     },
-    "node_modules/minipass-flush/node_modules/minipass": {
-      "version": "3.3.6",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/minipass-flush/node_modules/yallist": {
+    "node_modules/make-dir": {
       "version": "4.0.0",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/minipass-pipeline": {
-      "version": "1.2.4",
-      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "minipass": "^3.0.0"
+        "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/minipass-pipeline/node_modules/minipass": {
-      "version": "3.3.6",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
+        "node": ">=10"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/minipass-pipeline/node_modules/yallist": {
-      "version": "4.0.0",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/minipass-sized": {
-      "version": "2.0.0",
-      "integrity": "sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==",
+    "node_modules/make-fetch-happen": {
+      "version": "15.0.6",
+      "integrity": "sha512-Je0fLJ0F5atA7F+eIlLzk+Wkcl57JDf4kf+EW8xiP5E31xOQxkIxTbgf1Oi1Lw9tRI9UEMRdI5Vz2xTzoNU1Jw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "3.1.0",
-      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/agent": "^4.0.0",
+        "@npmcli/redact": "^4.0.0",
+        "cacache": "^20.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^5.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^6.0.0",
+        "ssri": "^13.0.0"
       },
       "engines": {
-        "node": ">= 18"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/mitt": {
-      "version": "3.0.1",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/mrmime": {
-      "version": "2.0.1",
-      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "CC0-1.0",
+      "peer": true
     },
-    "node_modules/msgpackr": {
-      "version": "1.12.1",
-      "integrity": "sha512-4EUH9tQHnMmEgzW/MdAP0KIfa1T9AF+htl0ffe2n5vb2EKn9y2co8ccpgWko6S52Jy1PQZKwRnx5/KkYjtd9MQ==",
+    "node_modules/media-typer": {
+      "version": "1.1.1",
+      "integrity": "sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "optionalDependencies": {
-        "msgpackr-extract": "^3.0.2"
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/msgpackr-extract": {
-      "version": "3.0.4",
-      "integrity": "sha512-4kmO/MdyUIkLIvTPr8VHLil4AtoKIoniWPIEk5+CDy0xnWC84azhSFmuJ7PxZdsYtiP5kEeQsORAVIeMgxT+Hw==",
+    "node_modules/memfs": {
+      "version": "4.80.0",
+      "integrity": "sha512-N70W2isi44XdGn7uPo9NJ4zRukcdkwSFHlnYx42SWOH/+hzqNc8P7+tVoA2up4z7faHvNi1RSNCFjxoYQ71VPQ==",
       "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
+      "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
-        "node-gyp-build-optional-packages": "5.2.2"
-      },
-      "bin": {
-        "download-msgpackr-prebuilds": "bin/download-prebuilds.js"
+        "@jsonjoy.com/fs-core": "4.80.0",
+        "@jsonjoy.com/fs-fsa": "4.80.0",
+        "@jsonjoy.com/fs-node": "4.80.0",
+        "@jsonjoy.com/fs-node-builtins": "4.80.0",
+        "@jsonjoy.com/fs-node-to-fsa": "4.80.0",
+        "@jsonjoy.com/fs-node-utils": "4.80.0",
+        "@jsonjoy.com/fs-print": "4.80.0",
+        "@jsonjoy.com/fs-snapshot": "4.80.0",
+        "@jsonjoy.com/json-pack": "^1.11.0",
+        "@jsonjoy.com/util": "^1.9.0",
+        "glob-to-regex.js": "^1.3.1",
+        "thingies": "^2.5.0",
+        "tree-dump": "^1.0.3",
+        "tslib": "^2.0.0"
       },
-      "optionalDependencies": {
-        "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.4",
-        "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.4",
-        "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.4",
-        "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.4",
-        "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.4",
-        "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.4"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
       }
     },
-    "node_modules/multicast-dns": {
-      "version": "7.2.5",
-      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "dns-packet": "^5.2.2",
-        "thunky": "^1.0.2"
+      "engines": {
+        "node": ">=18"
       },
-      "bin": {
-        "multicast-dns": "cli.js"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mute-stream": {
+    "node_modules/merge-stream": {
       "version": "2.0.0",
-      "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT"
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/nanoid": {
-      "version": "3.3.20",
-      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
+      "peer": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": ">=8.6"
       }
     },
-    "node_modules/napi-postinstall": {
-      "version": "0.3.4",
-      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "napi-postinstall": "lib/cli.js"
-      },
+      "peer": true,
       "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+        "node": ">=8.6"
       },
       "funding": {
-        "url": "https://opencollective.com/napi-postinstall"
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/needle": {
-      "version": "3.5.0",
-      "integrity": "sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==",
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "sax": "^1.2.4"
-      },
       "bin": {
-        "needle": "bin/needle"
+        "mime": "cli.js"
       },
       "engines": {
-        "node": ">= 4.4.x"
+        "node": ">=4"
       }
     },
-    "node_modules/needle/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/negotiator": {
-      "version": "1.1.0",
-      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "content-type": "^2.1.0"
+        "mime-db": "^1.54.0"
       },
       "engines": {
         "node": ">=18"
@@ -18122,477 +16254,513 @@
         "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/negotiator/node_modules/content-type": {
+    "node_modules/mimic-fn": {
       "version": "2.1.0",
-      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ng-packagr": {
-      "version": "21.0.1",
-      "integrity": "sha512-IZGxuF226GF0d8FOZIfPvHsyBl53PrDEg/IB2+CVamsm3r4+gUw3mBp27eygpowBpdVLG0Sm2IbUiH4aSspzyA==",
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.10.0",
+      "integrity": "sha512-540P2c5dYnJlyJxTaSloliZexv8rji6rY8FhQN+WF/82iHQfA23j/xtJx97L+mXOML27EqksSek/g4eK7jaL3g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "@rollup/plugin-json": "^6.1.0",
-        "@rollup/wasm-node": "^4.24.0",
-        "ajv": "^8.17.1",
-        "ansi-colors": "^4.1.3",
-        "browserslist": "^4.26.0",
-        "chokidar": "^4.0.1",
-        "commander": "^14.0.0",
-        "dependency-graph": "^1.0.0",
-        "esbuild": "^0.27.0",
-        "find-cache-directory": "^6.0.0",
-        "injection-js": "^2.4.0",
-        "jsonc-parser": "^3.3.1",
-        "less": "^4.2.0",
-        "ora": "^9.0.0",
-        "piscina": "^5.0.0",
-        "postcss": "^8.4.47",
-        "rollup-plugin-dts": "^6.2.0",
-        "rxjs": "^7.8.1",
-        "sass": "^1.81.0",
-        "tinyglobby": "^0.2.12"
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
       },
-      "bin": {
-        "ng-packagr": "src/cli/main.js"
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
       },
       "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      },
-      "optionalDependencies": {
-        "rollup": "^4.24.0"
-      },
-      "peerDependencies": {
-        "@angular/compiler-cli": "^21.0.0-next || ^21.0.0",
-        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-        "tslib": "^2.3.0",
-        "typescript": ">=5.9 <6.0"
+        "node": "18 || 20 || >=22"
       },
-      "peerDependenciesMeta": {
-        "tailwindcss": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.7",
-      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=18"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/android-arm": {
-      "version": "0.27.7",
-      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/android-arm64": {
-      "version": "0.27.7",
-      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/minipass-fetch": {
+      "version": "5.0.2",
+      "integrity": "sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^2.0.0",
+        "minizlib": "^3.0.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^20.17.0 || >=22.9.0"
+      },
+      "optionalDependencies": {
+        "iconv-lite": "^0.7.2"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/android-x64": {
-      "version": "0.27.7",
-      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/minipass-flush": {
+      "version": "1.0.7",
+      "integrity": "sha512-TbqTz9cUwWyHS2Dy89P3ocAGUGxKjjLuR9z8w4WUTGAVgEj17/4nhgo2Du56i0Fm3Pm30g4iA8Lcqctc76jCzA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 8"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.7",
-      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.7",
-      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "ISC"
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.7",
-      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.7",
-      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "license": "ISC"
+    },
+    "node_modules/minipass-sized": {
+      "version": "2.0.0",
+      "integrity": "sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-arm": {
-      "version": "0.27.7",
-      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 18"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.7",
-      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">=10"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.7",
-      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/msgpackr": {
+      "version": "1.12.1",
+      "integrity": "sha512-4EUH9tQHnMmEgzW/MdAP0KIfa1T9AF+htl0ffe2n5vb2EKn9y2co8ccpgWko6S52Jy1PQZKwRnx5/KkYjtd9MQ==",
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "optionalDependencies": {
+        "msgpackr-extract": "^3.0.2"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.7",
-      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
-      "cpu": [
-        "loong64"
-      ],
+    "node_modules/msgpackr-extract": {
+      "version": "3.0.4",
+      "integrity": "sha512-4kmO/MdyUIkLIvTPr8VHLil4AtoKIoniWPIEk5+CDy0xnWC84azhSFmuJ7PxZdsYtiP5kEeQsORAVIeMgxT+Hw==",
       "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "node-gyp-build-optional-packages": "5.2.2"
+      },
+      "bin": {
+        "download-msgpackr-prebuilds": "bin/download-prebuilds.js"
+      },
+      "optionalDependencies": {
+        "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.4",
+        "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.4"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.7",
-      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
-      "cpu": [
-        "mips64el"
-      ],
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "peer": true,
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "2.0.0",
+      "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=18"
+        "node": "^18.17.0 || >=20.5.0"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.7",
-      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/nanoid": {
+      "version": "3.3.20",
+      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
       ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.7",
-      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
-      "cpu": [
-        "riscv64"
-      ],
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.7",
-      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
-      "cpu": [
-        "s390x"
-      ],
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/needle": {
+      "version": "3.5.0",
+      "integrity": "sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==",
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 4.4.x"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/linux-x64": {
-      "version": "0.27.7",
-      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.7",
-      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/negotiator": {
+      "version": "1.1.0",
+      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
+      "dependencies": {
+        "content-type": "^2.1.0"
+      },
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.7",
-      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/negotiator/node_modules/content-type": {
+      "version": "2.1.0",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.7",
-      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ng-packagr": {
+      "version": "21.0.1",
+      "integrity": "sha512-IZGxuF226GF0d8FOZIfPvHsyBl53PrDEg/IB2+CVamsm3r4+gUw3mBp27eygpowBpdVLG0Sm2IbUiH4aSspzyA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/wasm-node": "^4.24.0",
+        "ajv": "^8.17.1",
+        "ansi-colors": "^4.1.3",
+        "browserslist": "^4.26.0",
+        "chokidar": "^4.0.1",
+        "commander": "^14.0.0",
+        "dependency-graph": "^1.0.0",
+        "esbuild": "^0.27.0",
+        "find-cache-directory": "^6.0.0",
+        "injection-js": "^2.4.0",
+        "jsonc-parser": "^3.3.1",
+        "less": "^4.2.0",
+        "ora": "^9.0.0",
+        "piscina": "^5.0.0",
+        "postcss": "^8.4.47",
+        "rollup-plugin-dts": "^6.2.0",
+        "rxjs": "^7.8.1",
+        "sass": "^1.81.0",
+        "tinyglobby": "^0.2.12"
+      },
+      "bin": {
+        "ng-packagr": "src/cli/main.js"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "optionalDependencies": {
+        "rollup": "^4.24.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler-cli": "^21.0.0-next || ^21.0.0",
+        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "tslib": "^2.3.0",
+        "typescript": ">=5.9 <6.0"
+      },
+      "peerDependenciesMeta": {
+        "tailwindcss": {
+          "optional": true
+        }
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/openbsd-x64": {
+    "node_modules/ng-packagr/node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.7",
-      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
+      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
       "cpu": [
-        "x64"
+        "ppc64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "openbsd"
+        "aix"
       ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/openharmony-arm64": {
+    "node_modules/ng-packagr/node_modules/@esbuild/android-arm": {
       "version": "0.27.7",
-      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
+      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
       "cpu": [
-        "arm64"
+        "arm"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "openharmony"
+        "android"
       ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/sunos-x64": {
+    "node_modules/ng-packagr/node_modules/@esbuild/android-arm64": {
       "version": "0.27.7",
-      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
+      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "sunos"
+        "android"
       ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/win32-arm64": {
+    "node_modules/ng-packagr/node_modules/@esbuild/android-x64": {
       "version": "0.27.7",
-      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
+      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "android"
       ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/win32-ia32": {
+    "node_modules/ng-packagr/node_modules/@esbuild/darwin-arm64": {
       "version": "0.27.7",
-      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
+      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
       "cpu": [
-        "ia32"
+        "arm64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "darwin"
       ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/ng-packagr/node_modules/@esbuild/win32-x64": {
+    "node_modules/ng-packagr/node_modules/@esbuild/darwin-x64": {
       "version": "0.27.7",
-      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
+      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
       "cpu": [
         "x64"
       ],
@@ -18600,2345 +16768,2129 @@
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "darwin"
       ],
       "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/ng-packagr/node_modules/chokidar": {
-      "version": "4.0.3",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ng-packagr/node_modules/esbuild": {
-      "version": "0.27.7",
-      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.7",
-        "@esbuild/android-arm": "0.27.7",
-        "@esbuild/android-arm64": "0.27.7",
-        "@esbuild/android-x64": "0.27.7",
-        "@esbuild/darwin-arm64": "0.27.7",
-        "@esbuild/darwin-x64": "0.27.7",
-        "@esbuild/freebsd-arm64": "0.27.7",
-        "@esbuild/freebsd-x64": "0.27.7",
-        "@esbuild/linux-arm": "0.27.7",
-        "@esbuild/linux-arm64": "0.27.7",
-        "@esbuild/linux-ia32": "0.27.7",
-        "@esbuild/linux-loong64": "0.27.7",
-        "@esbuild/linux-mips64el": "0.27.7",
-        "@esbuild/linux-ppc64": "0.27.7",
-        "@esbuild/linux-riscv64": "0.27.7",
-        "@esbuild/linux-s390x": "0.27.7",
-        "@esbuild/linux-x64": "0.27.7",
-        "@esbuild/netbsd-arm64": "0.27.7",
-        "@esbuild/netbsd-x64": "0.27.7",
-        "@esbuild/openbsd-arm64": "0.27.7",
-        "@esbuild/openbsd-x64": "0.27.7",
-        "@esbuild/openharmony-arm64": "0.27.7",
-        "@esbuild/sunos-x64": "0.27.7",
-        "@esbuild/win32-arm64": "0.27.7",
-        "@esbuild/win32-ia32": "0.27.7",
-        "@esbuild/win32-x64": "0.27.7"
-      }
-    },
-    "node_modules/ng-packagr/node_modules/readdirp": {
-      "version": "4.1.2",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/node-exports-info": {
-      "version": "1.6.2",
-      "integrity": "sha512-kXs9Go0cah0qHVV2v389IXQLdLCeE1xfFtjOAF+iobu0OIoG1pje8At2vMHyaPMiPMnG/LWP50twML21eMcAag==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "array.prototype.flatmap": "^1.3.3",
-        "es-errors": "^1.3.0",
-        "object.entries": "^1.1.9",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/node-exports-info/node_modules/semver": {
-      "version": "6.3.1",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/node-gyp": {
-      "version": "12.4.0",
-      "integrity": "sha512-OMcPNvqTCFUnNaBlmdgq+lfNqY7gTiSmNRDjY3uAXRyudeKZEZxu3CLtjMQrx4zZxCX2b/mpNqTtwuCJgXhHkw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "env-paths": "^2.2.0",
-        "exponential-backoff": "^3.1.1",
-        "graceful-fs": "^4.2.6",
-        "nopt": "^9.0.0",
-        "proc-log": "^6.0.0",
-        "semver": "^7.3.5",
-        "tar": "^7.5.4",
-        "tinyglobby": "^0.2.12",
-        "undici": "^6.25.0",
-        "which": "^6.0.0"
-      },
-      "bin": {
-        "node-gyp": "bin/node-gyp.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/node-gyp-build-optional-packages": {
-      "version": "5.2.2",
-      "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.1"
-      },
-      "bin": {
-        "node-gyp-build-optional-packages": "bin.js",
-        "node-gyp-build-optional-packages-optional": "optional.js",
-        "node-gyp-build-optional-packages-test": "build-test.js"
-      }
-    },
-    "node_modules/node-gyp/node_modules/isexe": {
-      "version": "4.0.0",
-      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/node-gyp/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/node-gyp/node_modules/undici": {
-      "version": "6.29.0",
-      "integrity": "sha512-R+RODBqp6i2pPflGdq+xIOUkl+RNfGgHwoinecKu/JCuf2uO06cOKoDbI2P7Dn6KcswdKwrczbU6IYJ6K8X+wg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.17"
-      }
-    },
-    "node_modules/node-gyp/node_modules/which": {
-      "version": "6.0.1",
-      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^4.0.0"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/node-int64": {
-      "version": "0.4.0",
-      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.58",
-      "integrity": "sha512-BdiKAgbfRlvfMq/XzO/AF9NPmaA8a+YpLAyAFTVFBj3gARrAIfWvNq7Q7NE4se3KgFu0KkrvQMxTS0XVnsGzHg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/nopt": {
-      "version": "9.0.0",
-      "integrity": "sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "abbrev": "^4.0.0"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+    "node_modules/ng-packagr/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.7",
+      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-bundled": {
-      "version": "4.0.0",
-      "integrity": "sha512-IxaQZDMsqfQ2Lz37VvyyEtKLe8FsRZuysmedy/N06TU1RyVppYKXrO4xIhR0F+7ubIBox6Q7nir6fQI3ej39iA==",
+    "node_modules/ng-packagr/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.7",
+      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-normalize-package-bin": "^4.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-install-checks": {
-      "version": "8.0.0",
-      "integrity": "sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-arm": {
+      "version": "0.27.7",
+      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "semver": "^7.1.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-normalize-package-bin": {
-      "version": "4.0.0",
-      "integrity": "sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.7",
+      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-package-arg": {
-      "version": "13.0.1",
-      "integrity": "sha512-6zqls5xFvJbgFjB1B2U6yITtyGBjDBORB7suI4zA4T/sZ1OmkMFlaQSNB/4K0LtXNA1t4OprAFxPisadK5O2ag==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.7",
+      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "hosted-git-info": "^9.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.5",
-        "validate-npm-package-name": "^6.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-packlist": {
-      "version": "10.0.4",
-      "integrity": "sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.7",
+      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "ignore-walk": "^8.0.0",
-        "proc-log": "^6.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-packlist/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.7",
+      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
+      "cpu": [
+        "mips64el"
+      ],
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-pick-manifest": {
-      "version": "11.0.3",
-      "integrity": "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.7",
+      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-install-checks": "^8.0.0",
-        "npm-normalize-package-bin": "^5.0.0",
-        "npm-package-arg": "^13.0.0",
-        "semver": "^7.3.5"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-pick-manifest/node_modules/npm-normalize-package-bin": {
-      "version": "5.0.0",
-      "integrity": "sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.7",
+      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-registry-fetch": {
-      "version": "19.1.1",
-      "integrity": "sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.7",
+      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/redact": "^4.0.0",
-        "jsonparse": "^1.3.1",
-        "make-fetch-happen": "^15.0.0",
-        "minipass": "^7.0.2",
-        "minipass-fetch": "^5.0.0",
-        "minizlib": "^3.0.1",
-        "npm-package-arg": "^13.0.0",
-        "proc-log": "^6.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-registry-fetch/node_modules/proc-log": {
-      "version": "6.1.0",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
+    "node_modules/ng-packagr/node_modules/@esbuild/linux-x64": {
+      "version": "0.27.7",
+      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+    "node_modules/ng-packagr/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.7",
+      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+    "node_modules/ng-packagr/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.7",
+      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/nwsapi": {
-      "version": "2.2.28",
-      "integrity": "sha512-IlVB7OS7qrOsVYlpnFIkETjMwT9jwvmocJmmM+GZU/PAB3uGi9Ezd7vcWhWBUnSc0ya4ppmQITOyP1ez9gg8cg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+    "node_modules/ng-packagr/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.7",
+      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
       }
     },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+    "node_modules/ng-packagr/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.7",
+      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=18"
       }
     },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+    "node_modules/ng-packagr/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.7",
+      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       }
     },
-    "node_modules/object.assign": {
-      "version": "4.1.7",
-      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+    "node_modules/ng-packagr/node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.7",
+      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0",
-        "has-symbols": "^1.1.0",
-        "object-keys": "^1.1.1"
-      },
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=18"
       }
     },
-    "node_modules/object.entries": {
-      "version": "1.1.9",
-      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+    "node_modules/ng-packagr/node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.7",
+      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.1.1"
-      },
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       }
     },
-    "node_modules/object.fromentries": {
-      "version": "2.0.8",
-      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+    "node_modules/ng-packagr/node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.7",
+      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
-      },
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=18"
       }
     },
-    "node_modules/object.groupby": {
-      "version": "1.0.3",
-      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+    "node_modules/ng-packagr/node_modules/@esbuild/win32-x64": {
+      "version": "0.27.7",
+      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2"
-      },
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       }
     },
-    "node_modules/object.values": {
-      "version": "1.2.1",
-      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+    "node_modules/ng-packagr/node_modules/chokidar": {
+      "version": "4.0.3",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">= 14.16.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/obuf": {
-      "version": "1.1.2",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+    "node_modules/ng-packagr/node_modules/esbuild": {
+      "version": "0.27.7",
+      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
       "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
+      "bin": {
+        "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/on-headers": {
-      "version": "1.1.0",
-      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.7",
+        "@esbuild/android-arm": "0.27.7",
+        "@esbuild/android-arm64": "0.27.7",
+        "@esbuild/android-x64": "0.27.7",
+        "@esbuild/darwin-arm64": "0.27.7",
+        "@esbuild/darwin-x64": "0.27.7",
+        "@esbuild/freebsd-arm64": "0.27.7",
+        "@esbuild/freebsd-x64": "0.27.7",
+        "@esbuild/linux-arm": "0.27.7",
+        "@esbuild/linux-arm64": "0.27.7",
+        "@esbuild/linux-ia32": "0.27.7",
+        "@esbuild/linux-loong64": "0.27.7",
+        "@esbuild/linux-mips64el": "0.27.7",
+        "@esbuild/linux-ppc64": "0.27.7",
+        "@esbuild/linux-riscv64": "0.27.7",
+        "@esbuild/linux-s390x": "0.27.7",
+        "@esbuild/linux-x64": "0.27.7",
+        "@esbuild/netbsd-arm64": "0.27.7",
+        "@esbuild/netbsd-x64": "0.27.7",
+        "@esbuild/openbsd-arm64": "0.27.7",
+        "@esbuild/openbsd-x64": "0.27.7",
+        "@esbuild/openharmony-arm64": "0.27.7",
+        "@esbuild/sunos-x64": "0.27.7",
+        "@esbuild/win32-arm64": "0.27.7",
+        "@esbuild/win32-ia32": "0.27.7",
+        "@esbuild/win32-x64": "0.27.7"
       }
     },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+    "node_modules/ng-packagr/node_modules/readdirp": {
+      "version": "4.1.2",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
       "engines": {
-        "node": ">=6"
+        "node": ">= 14.18.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/open": {
-      "version": "11.0.0",
-      "integrity": "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==",
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-exports-info": {
+      "version": "1.6.2",
+      "integrity": "sha512-kXs9Go0cah0qHVV2v389IXQLdLCeE1xfFtjOAF+iobu0OIoG1pje8At2vMHyaPMiPMnG/LWP50twML21eMcAag==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "default-browser": "^5.4.0",
-        "define-lazy-prop": "^3.0.0",
-        "is-in-ssh": "^1.0.0",
-        "is-inside-container": "^1.0.0",
-        "powershell-utils": "^0.1.0",
-        "wsl-utils": "^0.3.0"
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
       },
       "engines": {
-        "node": ">=20"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/optionator": {
-      "version": "0.9.4",
-      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/node-gyp": {
+      "version": "12.4.0",
+      "integrity": "sha512-OMcPNvqTCFUnNaBlmdgq+lfNqY7gTiSmNRDjY3uAXRyudeKZEZxu3CLtjMQrx4zZxCX2b/mpNqTtwuCJgXhHkw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "deep-is": "^0.1.3",
-        "fast-levenshtein": "^2.0.6",
-        "levn": "^0.4.1",
-        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.5"
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "nopt": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.5.4",
+        "tinyglobby": "^0.2.12",
+        "undici": "^6.25.0",
+        "which": "^6.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
       },
       "engines": {
-        "node": ">= 0.8.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/ora": {
-      "version": "9.3.0",
-      "integrity": "sha512-lBX72MWFduWEf7v7uWf5DHp9Jn5BI8bNPGuFgtXMmr2uDz2Gz2749y3am3agSDdkhHPHYmmxEGSKH85ZLGzgXw==",
+    "node_modules/node-gyp-build-optional-packages": {
+      "version": "5.2.2",
+      "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "chalk": "^5.6.2",
-        "cli-cursor": "^5.0.0",
-        "cli-spinners": "^3.2.0",
-        "is-interactive": "^2.0.0",
-        "is-unicode-supported": "^2.1.0",
-        "log-symbols": "^7.0.1",
-        "stdin-discarder": "^0.3.1",
-        "string-width": "^8.1.0"
-      },
-      "engines": {
-        "node": ">=20"
+        "detect-libc": "^2.0.1"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "bin": {
+        "node-gyp-build-optional-packages": "bin.js",
+        "node-gyp-build-optional-packages-optional": "optional.js",
+        "node-gyp-build-optional-packages-test": "build-test.js"
       }
     },
-    "node_modules/ora/node_modules/chalk": {
-      "version": "5.6.2",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "4.0.0",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
       "dev": true,
-      "license": "MIT",
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "node": ">=20"
       }
     },
-    "node_modules/ordered-binary": {
-      "version": "1.6.2",
-      "integrity": "sha512-BY+qgDArmYpvvmij141xbkB4Cw8RFLBQM5Zj4MODFb1SyXBRE/xO4Xj/QWbR7aUEBxbkjuNdsFVCL2TmbYrlNg==",
+    "node_modules/node-gyp/node_modules/undici": {
+      "version": "6.29.0",
+      "integrity": "sha512-R+RODBqp6i2pPflGdq+xIOUkl+RNfGgHwoinecKu/JCuf2uO06cOKoDbI2P7Dn6KcswdKwrczbU6IYJ6K8X+wg==",
       "dev": true,
       "license": "MIT",
-      "optional": true
+      "engines": {
+        "node": ">=18.17"
+      }
     },
-    "node_modules/own-keys": {
-      "version": "1.0.2",
-      "integrity": "sha512-19YVAg7T+WTrxggPukVq7DjTv6+PJ867TmhCvBsYwmbFCsZd344rq2Ld1p0wo8f8Qrrhgp82c6FJRqdXWtSEhg==",
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "6.0.1",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "call-bound": "^1.0.4",
-        "get-intrinsic": "^1.3.0",
-        "object-keys": "^1.1.1",
-        "safe-push-apply": "^1.0.0"
+        "isexe": "^4.0.0"
       },
-      "engines": {
-        "node": ">= 0.4"
+      "bin": {
+        "node-which": "bin/which.js"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.58",
+      "integrity": "sha512-BdiKAgbfRlvfMq/XzO/AF9NPmaA8a+YpLAyAFTVFBj3gARrAIfWvNq7Q7NE4se3KgFu0KkrvQMxTS0XVnsGzHg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=18"
       }
     },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+    "node_modules/nopt": {
+      "version": "9.0.0",
+      "integrity": "sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "p-limit": "^3.0.2"
+        "abbrev": "^4.0.0"
       },
-      "engines": {
-        "node": ">=10"
+      "bin": {
+        "nopt": "bin/nopt.js"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/p-map": {
-      "version": "7.1.1",
-      "integrity": "sha512-6Lh3jQPLthYujSrlw6ccWXBGZTkoTCz27Hd92g79LH/kjAbgoEu0t442cCCNbegPSJsA0lwDX8z0bcKtkpA32g==",
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/p-retry": {
-      "version": "6.2.1",
-      "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
+    "node_modules/npm-bundled": {
+      "version": "5.0.0",
+      "integrity": "sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
+      "license": "ISC",
       "dependencies": {
-        "@types/retry": "0.12.2",
-        "is-network-error": "^1.0.0",
-        "retry": "^0.13.1"
+        "npm-normalize-package-bin": "^5.0.0"
       },
       "engines": {
-        "node": ">=16.17"
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-install-checks": {
+      "version": "8.0.0",
+      "integrity": "sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "semver": "^7.1.1"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/p-retry/node_modules/retry": {
-      "version": "0.13.1",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+    "node_modules/npm-normalize-package-bin": {
+      "version": "5.0.0",
+      "integrity": "sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
+      "license": "ISC",
       "engines": {
-        "node": ">= 4"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+    "node_modules/npm-package-arg": {
+      "version": "13.0.2",
+      "integrity": "sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
+      "dependencies": {
+        "hosted-git-info": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^7.0.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+    "node_modules/npm-packlist": {
+      "version": "10.0.4",
+      "integrity": "sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==",
       "dev": true,
-      "license": "BlueOak-1.0.0"
+      "license": "ISC",
+      "dependencies": {
+        "ignore-walk": "^8.0.0",
+        "proc-log": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
     },
-    "node_modules/pacote": {
-      "version": "21.0.3",
-      "integrity": "sha512-itdFlanxO0nmQv4ORsvA9K1wv40IPfB9OmWqfaJWvoJ30VKyHsqNgDVeG+TVhI7Gk7XW8slUy7cA9r6dF5qohw==",
+    "node_modules/npm-pick-manifest": {
+      "version": "11.0.3",
+      "integrity": "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "@npmcli/git": "^7.0.0",
-        "@npmcli/installed-package-contents": "^3.0.0",
-        "@npmcli/package-json": "^7.0.0",
-        "@npmcli/promise-spawn": "^8.0.0",
-        "@npmcli/run-script": "^10.0.0",
-        "cacache": "^20.0.0",
-        "fs-minipass": "^3.0.0",
-        "minipass": "^7.0.2",
+        "npm-install-checks": "^8.0.0",
+        "npm-normalize-package-bin": "^5.0.0",
         "npm-package-arg": "^13.0.0",
-        "npm-packlist": "^10.0.1",
-        "npm-pick-manifest": "^11.0.1",
-        "npm-registry-fetch": "^19.0.0",
-        "proc-log": "^5.0.0",
-        "promise-retry": "^2.0.1",
-        "sigstore": "^4.0.0",
-        "ssri": "^12.0.0",
-        "tar": "^7.4.3"
+        "semver": "^7.3.5"
       },
-      "bin": {
-        "pacote": "bin/index.js"
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-registry-fetch": {
+      "version": "19.1.1",
+      "integrity": "sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/redact": "^4.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^15.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^5.0.0",
+        "minizlib": "^3.0.1",
+        "npm-package-arg": "^13.0.0",
+        "proc-log": "^6.0.0"
       },
       "engines": {
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "callsites": "^3.0.0"
+        "path-key": "^3.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
       }
     },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
+        "boolbase": "^1.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/parse-json/node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+    "node_modules/nwsapi": {
+      "version": "2.2.28",
+      "integrity": "sha512-IlVB7OS7qrOsVYlpnFIkETjMwT9jwvmocJmmM+GZU/PAB3uGi9Ezd7vcWhWBUnSc0ya4ppmQITOyP1ez9gg8cg==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/parse-node-version": {
-      "version": "1.0.1",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.10"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/parse5": {
-      "version": "7.3.0",
-      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "entities": "^6.0.0"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/parse5-html-rewriting-stream": {
-      "version": "8.0.0",
-      "integrity": "sha512-wzh11mj8KKkno1pZEu+l2EVeWsuKDfR5KNWZOTsslfUX8lPDZx77m9T0kIoAVkFtD1nx6YF8oh4BnPHvxMtNMw==",
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "entities": "^6.0.0",
-        "parse5": "^8.0.0",
-        "parse5-sax-parser": "^8.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parse5-html-rewriting-stream/node_modules/entities": {
-      "version": "6.0.1",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
-      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/parse5-html-rewriting-stream/node_modules/parse5": {
-      "version": "8.0.1",
-      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "entities": "^8.0.0"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
       },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parse5-html-rewriting-stream/node_modules/parse5/node_modules/entities": {
-      "version": "8.1.0",
-      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
-      "dev": true,
-      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=20.19.0"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/parse5-sax-parser": {
-      "version": "8.0.0",
-      "integrity": "sha512-/dQ8UzHZwnrzs3EvDj6IkKrD/jIZyTlB+8XrHJvcjNgRdmWruNdN9i9RK/JtxakmlUdPwKubKPTCqvbTgzGhrw==",
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "parse5": "^8.0.0"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
       },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parse5-sax-parser/node_modules/entities": {
-      "version": "8.1.0",
-      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
-      "dev": true,
-      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=20.19.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/parse5-sax-parser/node_modules/parse5": {
-      "version": "8.0.1",
-      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "entities": "^8.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parse5/node_modules/entities": {
-      "version": "6.0.1",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
-      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.12"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "peer": true
     },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/path-scurry": {
-      "version": "2.0.2",
-      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+    "node_modules/on-headers": {
+      "version": "1.1.0",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^11.0.0",
-        "minipass": "^7.1.2"
-      },
+      "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "11.5.3",
-      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+    "node_modules/once": {
+      "version": "1.4.0",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": "20 || >=22"
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "8.4.2",
-      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "4.0.4",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+    "node_modules/open": {
+      "version": "11.0.0",
+      "integrity": "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "default-browser": "^5.4.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
+        "is-inside-container": "^1.0.0",
+        "powershell-utils": "^0.1.0",
+        "wsl-utils": "^0.3.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=20"
       },
       "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/piscina": {
-      "version": "5.3.2",
-      "integrity": "sha512-vv7l/mM7B9WgrhDaudIqv1x6v4LOBRYYmpWGdWushhpbCmVHp11sUB2v4hj1CAeTGXVxuZFz6xOU1RalAiPKfQ==",
+    "node_modules/ora": {
+      "version": "9.3.0",
+      "integrity": "sha512-lBX72MWFduWEf7v7uWf5DHp9Jn5BI8bNPGuFgtXMmr2uDz2Gz2749y3am3agSDdkhHPHYmmxEGSKH85ZLGzgXw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.6.2",
+        "cli-cursor": "^5.0.0",
+        "cli-spinners": "^3.2.0",
+        "is-interactive": "^2.0.0",
+        "is-unicode-supported": "^2.1.0",
+        "log-symbols": "^7.0.1",
+        "stdin-discarder": "^0.3.1",
+        "string-width": "^8.1.0"
+      },
       "engines": {
-        "node": ">=20.x"
+        "node": ">=20"
       },
-      "optionalDependencies": {
-        "@napi-rs/nice": "^1.0.4"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pkce-challenge": {
-      "version": "5.0.1",
-      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+    "node_modules/ora/node_modules/chalk": {
+      "version": "5.6.2",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=16.20.0"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+    "node_modules/ordered-binary": {
+      "version": "1.6.2",
+      "integrity": "sha512-BY+qgDArmYpvvmij141xbkB4Cw8RFLBQM5Zj4MODFb1SyXBRE/xO4Xj/QWbR7aUEBxbkjuNdsFVCL2TmbYrlNg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.2",
+      "integrity": "sha512-19YVAg7T+WTrxggPukVq7DjTv6+PJ867TmhCvBsYwmbFCsZd344rq2Ld1p0wo8f8Qrrhgp82c6FJRqdXWtSEhg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "find-up": "^4.0.0"
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "4.1.0",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
+        "yocto-queue": "^0.1.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pkg-dir/node_modules/locate-path": {
+    "node_modules/p-locate": {
       "version": "5.0.0",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "p-locate": "^4.1.0"
+        "p-limit": "^3.0.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pkg-dir/node_modules/p-limit": {
-      "version": "2.3.0",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+    "node_modules/p-map": {
+      "version": "7.1.1",
+      "integrity": "sha512-6Lh3jQPLthYujSrlw6ccWXBGZTkoTCz27Hd92g79LH/kjAbgoEu0t442cCCNbegPSJsA0lwDX8z0bcKtkpA32g==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "4.1.0",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+    "node_modules/p-retry": {
+      "version": "6.2.1",
+      "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "p-limit": "^2.2.0"
+        "@types/retry": "0.12.2",
+        "is-network-error": "^1.0.0",
+        "retry": "^0.13.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pkijs": {
-      "version": "3.4.1",
-      "integrity": "sha512-Oo/NZcSWccq8KyoG7gLE9fnltgHns+pNCjCAp/WmjsUySi+sX7y4z4Xqu4fVb42CDHzRPl33fjzT15V1wvcyhA==",
+    "node_modules/p-retry/node_modules/retry": {
+      "version": "0.13.1",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
       "dev": true,
-      "license": "BSD-3-Clause",
+      "license": "MIT",
       "peer": true,
-      "workspaces": [
-        "website"
-      ],
-      "dependencies": {
-        "@noble/hashes": "1.8.0",
-        "asn1js": "^3.0.6",
-        "bytestreamjs": "^2.0.1",
-        "pvtsutils": "^1.3.6",
-        "pvutils": "^1.1.3",
-        "tslib": "^2.8.1"
-      },
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">= 4"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.64.1",
-      "integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==",
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.64.1"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=20"
+        "node": ">=6"
       }
     },
-    "node_modules/playwright-core": {
-      "version": "1.64.1",
-      "integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==",
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=20"
-      }
+      "license": "BlueOak-1.0.0"
     },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.1.0",
-      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+    "node_modules/pacote": {
+      "version": "21.5.1",
+      "integrity": "sha512-KvcJ9iy3crysCsgqc4+PknH/w6jkrp8JN36mpZBPwNaDRwTfMZD37YzRazNstiZUOhuF5pno9f78n9mEJBavwg==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
+      "dependencies": {
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/git": "^7.0.0",
+        "@npmcli/installed-package-contents": "^4.0.0",
+        "@npmcli/package-json": "^7.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "@npmcli/run-script": "^10.0.0",
+        "cacache": "^20.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^13.0.0",
+        "npm-packlist": "^10.0.1",
+        "npm-pick-manifest": "^11.0.1",
+        "npm-registry-fetch": "^19.0.0",
+        "proc-log": "^6.0.0",
+        "sigstore": "^4.0.0",
+        "ssri": "^13.0.0",
+        "tar": "^7.4.3"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/postcss": {
-      "version": "8.5.23",
-      "integrity": "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==",
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.16",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
+        "callsites": "^3.0.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">=6"
       }
     },
-    "node_modules/postcss-loader": {
-      "version": "8.2.0",
-      "integrity": "sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==",
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "cosmiconfig": "^9.0.0",
-        "jiti": "^2.5.1",
-        "semver": "^7.6.2"
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
       },
       "engines": {
-        "node": ">= 18.12.0"
+        "node": ">=8"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "postcss": "^7.0.0 || ^8.0.1",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/postcss-media-query-parser": {
-      "version": "0.2.3",
-      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+    "node_modules/parse-json/node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/postcss-modules-extract-imports": {
-      "version": "3.1.0",
-      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
       "dev": true,
-      "license": "ISC",
-      "peer": true,
+      "license": "MIT",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+        "node": ">= 0.10"
       }
     },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "4.2.0",
-      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^7.0.0",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "entities": "^6.0.0"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/postcss-modules-scope": {
-      "version": "3.2.1",
-      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+    "node_modules/parse5-html-rewriting-stream": {
+      "version": "8.0.0",
+      "integrity": "sha512-wzh11mj8KKkno1pZEu+l2EVeWsuKDfR5KNWZOTsslfUX8lPDZx77m9T0kIoAVkFtD1nx6YF8oh4BnPHvxMtNMw==",
       "dev": true,
-      "license": "ISC",
-      "peer": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-selector-parser": "^7.0.0"
+        "entities": "^6.0.0",
+        "parse5": "^8.0.0",
+        "parse5-sax-parser": "^8.0.0"
       },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-html-rewriting-stream/node_modules/entities": {
+      "version": "6.0.1",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "node": ">=0.12"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+    "node_modules/parse5-html-rewriting-stream/node_modules/parse5": {
+      "version": "8.0.1",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
       "dev": true,
-      "license": "ISC",
-      "peer": true,
+      "license": "MIT",
       "dependencies": {
-        "icss-utils": "^5.0.0"
+        "entities": "^8.0.0"
       },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-html-rewriting-stream/node_modules/parse5/node_modules/entities": {
+      "version": "8.1.0",
+      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "node": ">=20.19.0"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/postcss-selector-parser": {
-      "version": "7.1.6",
-      "integrity": "sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==",
+    "node_modules/parse5-sax-parser": {
+      "version": "8.0.0",
+      "integrity": "sha512-/dQ8UzHZwnrzs3EvDj6IkKrD/jIZyTlB+8XrHJvcjNgRdmWruNdN9i9RK/JtxakmlUdPwKubKPTCqvbTgzGhrw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
+        "parse5": "^8.0.0"
       },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-sax-parser/node_modules/entities": {
+      "version": "8.1.0",
+      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=4"
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+    "node_modules/parse5-sax-parser/node_modules/parse5": {
+      "version": "8.0.1",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
       "dev": true,
       "license": "MIT",
-      "peer": true
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
     },
-    "node_modules/powershell-utils": {
-      "version": "0.1.0",
-      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=20"
+        "node": ">=0.12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/prettier": {
-      "version": "3.9.10",
-      "integrity": "sha512-skGHTH1Yb9QvaTC4hWnRTzEYtCpApF0UMBPz+t/0ZPzP8ihefo/btKd+QA7pUE0fEwA1SbS/NmhyEcstdXOIdA==",
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
       "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+        "node": ">=8"
       }
     },
-    "node_modules/prettier-linter-helpers": {
+    "node_modules/path-is-absolute": {
       "version": "1.0.1",
-      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "fast-diff": "^1.1.2"
-      },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "30.5.1",
-      "integrity": "sha512-byhRAPguVKMQIj4kjJwJ5lAskVhfuiSdiYl/aLTWpgkGEmic2jYhJh1yE9ih8Ox44Xg9ccCT11/S6QrzSJuNrg==",
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "@jest/react-is-18": "npm:react-is@^18.3.1",
-        "@jest/react-is-19": "npm:react-is@^19.2.5",
-        "@jest/schemas": "30.5.0",
-        "ansi-styles": "^5.2.0"
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/primeng": {
-      "version": "21.1.10",
-      "integrity": "sha512-1dNoVrrmdif95iuPwcSyzS0MwBy4yrbB/44s4gp+UeoZU11G9+SNFd6P/3tiiun7bAh2vbe4Uf0juy7DMtnRbA==",
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
       "dev": true,
-      "license": "SEE LICENSE IN LICENSE.md",
-      "peer": true,
-      "dependencies": {
-        "@primeuix/motion": "^0.0.10",
-        "@primeuix/styled": "^0.7.4",
-        "@primeuix/styles": "^2.0.3",
-        "@primeuix/utils": "^0.7.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/cdk": "^21.0.0",
-        "@angular/common": "^21.0.0",
-        "@angular/core": "^21.0.7",
-        "@angular/forms": "^21.0.0",
-        "@angular/platform-browser": "^21.0.0",
-        "@angular/router": "^21.0.0",
-        "rxjs": "^6.0.0 || ^7.8.1"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/probe-image-size": {
-      "version": "7.4.0",
-      "integrity": "sha512-cdEprVtZxV+awMde9X+4jILBFYh4CARxVrQaMl4wY4YcPWbul9jntXrIW95NInBDyJwcVUP3U0T6yukN8rMBaQ==",
+    "node_modules/piscina": {
+      "version": "5.3.2",
+      "integrity": "sha512-vv7l/mM7B9WgrhDaudIqv1x6v4LOBRYYmpWGdWushhpbCmVHp11sUB2v4hj1CAeTGXVxuZFz6xOU1RalAiPKfQ==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/puzrin"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/nodeca"
-        }
-      ],
       "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "lodash.merge": "^4.6.2",
-        "needle": "^2.5.2",
-        "stream-parser": "~0.3.1"
+      "engines": {
+        "node": ">=20.x"
+      },
+      "optionalDependencies": {
+        "@napi-rs/nice": "^1.0.4"
       }
     },
-    "node_modules/probe-image-size/node_modules/debug": {
-      "version": "3.2.7",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ms": "^2.1.1"
+      "engines": {
+        "node": ">=16.20.0"
       }
     },
-    "node_modules/probe-image-size/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
+        "find-up": "^4.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/probe-image-size/node_modules/needle": {
-      "version": "2.9.1",
-      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "debug": "^3.2.6",
-        "iconv-lite": "^0.4.4",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">= 4.4.x"
+        "node": ">=8"
       }
     },
-    "node_modules/proc-log": {
+    "node_modules/pkg-dir/node_modules/locate-path": {
       "version": "5.0.0",
-      "integrity": "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/promise-retry": {
-      "version": "2.0.1",
-      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "err-code": "^2.0.2",
-        "retry": "^0.12.0"
+        "p-locate": "^4.1.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/proxy-addr": {
-      "version": "2.0.8",
-      "integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
+        "p-try": "^2.0.0"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">=6"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
       }
     },
-    "node_modules/pure-rand": {
-      "version": "7.0.1",
-      "integrity": "sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/dubzzz"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fast-check"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/pvtsutils": {
-      "version": "1.3.6",
-      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+    "node_modules/pkijs": {
+      "version": "3.4.1",
+      "integrity": "sha512-Oo/NZcSWccq8KyoG7gLE9fnltgHns+pNCjCAp/WmjsUySi+sX7y4z4Xqu4fVb42CDHzRPl33fjzT15V1wvcyhA==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-3-Clause",
       "peer": true,
+      "workspaces": [
+        "website"
+      ],
       "dependencies": {
+        "@noble/hashes": "1.8.0",
+        "asn1js": "^3.0.6",
+        "bytestreamjs": "^2.0.1",
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
         "tslib": "^2.8.1"
-      }
-    },
-    "node_modules/pvutils": {
-      "version": "1.2.0",
-      "integrity": "sha512-BbubeCEyTuQjVMakvJQ/Sxbc93F2pwmbsxONT/ZRrwU7Ua38d8unYTwXpTVLAKJ4BDuH9IGztCjQcd/N/39Dvg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
+      },
       "engines": {
         "node": ">=16.0.0"
       }
     },
-    "node_modules/qs": {
-      "version": "6.16.0",
-      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+    "node_modules/playwright": {
+      "version": "1.64.1",
+      "integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==",
       "dev": true,
-      "license": "BSD-3-Clause",
+      "license": "Apache-2.0",
       "dependencies": {
-        "es-define-property": "^1.0.1",
-        "side-channel": "^1.1.1"
+        "playwright-core": "1.64.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=0.6"
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.64.1",
+      "integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">=20"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.23",
+      "integrity": "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==",
       "dev": true,
       "funding": [
         {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
         },
         {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
         },
         {
-          "type": "consulting",
-          "url": "https://feross.org/support"
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT"
-    },
-    "node_modules/range-parser": {
-      "version": "1.3.0",
-      "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "3.0.2",
-      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "bytes": "~3.1.2",
-        "http-errors": "~2.0.1",
-        "iconv-lite": "~0.7.0",
-        "unpipe": "~1.0.0"
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">= 0.10"
+        "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/postcss-loader": {
+      "version": "8.2.0",
+      "integrity": "sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "cosmiconfig": "^9.0.0",
+        "jiti": "^2.5.1",
+        "semver": "^7.6.2"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
       }
     },
-    "node_modules/readdirp": {
-      "version": "5.1.1",
-      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
       "engines": {
-        "node": ">= 20.19.0"
+        "node": "^10 || ^12 || >= 14"
       },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/reflect-metadata": {
-      "version": "0.2.2",
-      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/reflect.getprototypeof": {
-      "version": "1.0.10",
-      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.7",
-        "get-proto": "^1.0.1",
-        "which-builtin-type": "^1.2.1"
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^10 || ^12 || >= 14"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/regenerate": {
-      "version": "1.5.0",
-      "integrity": "sha512-1s+CxXjJ71i7LNVy8nYwg47XV4y6lAnOEhsMtSKq3WpmPfhl9LuKlTqKIn/3yUpE8lBz+W+TT88Bxyhnr0U4yw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/regenerate-unicode-properties": {
-      "version": "10.3.0",
-      "integrity": "sha512-9ns8odR8e9q3otKeHj3DE80jZYKg6zVeZKE+zQmRKXFoVUcuiTGeO6iusDhPRoIQQPVPRvH+SfBhrTud4eczuw==",
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "peer": true,
       "dependencies": {
-        "regenerate": "^1.4.2"
+        "postcss-selector-parser": "^7.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/regex-parser": {
-      "version": "2.3.1",
-      "integrity": "sha512-yXLRqatcCuKtVHsWrNg0JL3l1zGfdXeEvDa0bdu4tCDQw0RpMDZsqbkyRTUnKMR0tXF627V2oEWjBEaEdqTwtQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.4",
-      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "set-function-name": "^2.0.2"
+        "icss-utils": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^10 || ^12 || >= 14"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/regexpp": {
-      "version": "3.2.0",
-      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+    "node_modules/postcss-safe-parser": {
+      "version": "7.1.0",
+      "integrity": "sha512-1WzZxRLaAFwEh6Do+zyGpjWV3nGJNxxhuh7Ubu/q1ICImMgZJnLwhoaEpRbG4pJppp2Y1ncL9ffA2f+LhrefQg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=18.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/regexpu-core": {
-      "version": "6.5.3",
-      "integrity": "sha512-E8VgUoSK+LMQrLboDxavm76MTBGrQhx9RiNuomRmYnZ10Uw12HrI8fkxOOncktb2hBpzIZ9SV/347euQHG5z+g==",
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.6",
+      "integrity": "sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "regenerate": "^1.5.0",
-        "regenerate-unicode-properties": "^10.3.0",
-        "regjsgen": "^0.8.0",
-        "regjsparser": "^0.13.0",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.2.1"
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
       },
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/regjsgen": {
-      "version": "0.8.0",
-      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true,
       "license": "MIT",
       "peer": true
     },
-    "node_modules/regjsparser": {
-      "version": "0.13.4",
-      "integrity": "sha512-EWV80YgFaVgFrjGCAsV7oybp4GOxbls5RzBg8OB0nKEVXsBJR1JlV8Di1JhCROg3MzTfe1RI8yitIm1eOs68iA==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true,
-      "dependencies": {
-        "jsesc": "~3.1.0"
-      },
-      "bin": {
-        "regjsparser": "bin/parser"
-      }
-    },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+    "node_modules/powershell-utils": {
+      "version": "0.1.0",
+      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/resolve": {
-      "version": "1.22.11",
-      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+    "node_modules/prettier": {
+      "version": "3.9.10",
+      "integrity": "sha512-skGHTH1Yb9QvaTC4hWnRTzEYtCpApF0UMBPz+t/0ZPzP8ihefo/btKd+QA7pUE0fEwA1SbS/NmhyEcstdXOIdA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
       "bin": {
-        "resolve": "bin/resolve"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=14"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/resolve-cwd": {
-      "version": "3.0.0",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.1",
+      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "resolve-from": "^5.0.0"
+        "fast-diff": "^1.1.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/resolve-cwd/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+    "node_modules/pretty-format": {
+      "version": "30.5.1",
+      "integrity": "sha512-byhRAPguVKMQIj4kjJwJ5lAskVhfuiSdiYl/aLTWpgkGEmic2jYhJh1yE9ih8Ox44Xg9ccCT11/S6QrzSJuNrg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@jest/react-is-18": "npm:react-is@^18.3.1",
+        "@jest/react-is-19": "npm:react-is@^19.2.5",
+        "@jest/schemas": "30.5.0",
+        "ansi-styles": "^5.2.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/resolve-pkg-maps": {
-      "version": "1.0.0",
-      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
+        "node": ">=10"
+      },
       "funding": {
-        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/resolve-url-loader": {
-      "version": "5.0.0",
-      "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==",
+    "node_modules/primeng": {
+      "version": "21.1.10",
+      "integrity": "sha512-1dNoVrrmdif95iuPwcSyzS0MwBy4yrbB/44s4gp+UeoZU11G9+SNFd6P/3tiiun7bAh2vbe4Uf0juy7DMtnRbA==",
       "dev": true,
-      "license": "MIT",
+      "license": "SEE LICENSE IN LICENSE.md",
       "peer": true,
       "dependencies": {
-        "adjust-sourcemap-loader": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.14",
-        "source-map": "0.6.1"
+        "@primeuix/motion": "^0.0.10",
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.3",
+        "@primeuix/utils": "^0.7.2",
+        "tslib": "^2.3.0"
       },
-      "engines": {
-        "node": ">=12"
+      "peerDependencies": {
+        "@angular/cdk": "^21.0.0",
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.7",
+        "@angular/forms": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/router": "^21.0.0",
+        "rxjs": "^6.0.0 || ^7.8.1"
       }
     },
-    "node_modules/resolve-url-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+    "node_modules/probe-image-size": {
+      "version": "7.4.0",
+      "integrity": "sha512-cdEprVtZxV+awMde9X+4jILBFYh4CARxVrQaMl4wY4YcPWbul9jntXrIW95NInBDyJwcVUP3U0T6yukN8rMBaQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
       "license": "MIT",
-      "peer": true,
+      "optional": true,
       "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
+        "lodash.merge": "^4.6.2",
+        "needle": "^2.5.2",
+        "stream-parser": "~0.3.1"
       }
     },
-    "node_modules/resolve-url-loader/node_modules/source-map": {
-      "version": "0.6.1",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+    "node_modules/probe-image-size/node_modules/debug": {
+      "version": "3.2.7",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/restore-cursor": {
-      "version": "5.1.0",
-      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+    "node_modules/probe-image-size/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "onetime": "^7.0.0",
-        "signal-exit": "^4.1.0"
+        "safer-buffer": ">= 2.1.2 < 3"
       },
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/restore-cursor/node_modules/onetime": {
-      "version": "7.0.0",
-      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+    "node_modules/probe-image-size/node_modules/needle": {
+      "version": "2.9.1",
+      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "mimic-function": "^5.0.0"
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
       },
-      "engines": {
-        "node": ">=18"
+      "bin": {
+        "needle": "bin/needle"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/retry": {
-      "version": "0.12.0",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
-      "dev": true,
-      "license": "MIT",
       "engines": {
-        "node": ">= 4"
+        "node": ">= 4.4.x"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+    "node_modules/proc-log": {
+      "version": "6.1.0",
+      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/rfdc": {
-      "version": "1.4.1",
-      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+    "node_modules/proxy-addr": {
+      "version": "2.0.8",
+      "integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "glob": "^7.1.3"
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
       },
-      "bin": {
-        "rimraf": "bin.js"
+      "engines": {
+        "node": ">= 0.10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/rimraf/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/rimraf/node_modules/brace-expansion": {
-      "version": "1.1.21",
-      "integrity": "sha512-9zeA+KLZNNzglF2TPKRQEDyx6Yby7daAkuy8MiPzpXPsYDWi/DRM8jmwUDxokQjYqBpv5DgPiwD4h4ZZSy1Ujw==",
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "7.2.3",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+    "node_modules/pure-rand": {
+      "version": "7.0.1",
+      "integrity": "sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==",
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/rimraf/node_modules/minimatch": {
-      "version": "3.1.5",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+        "tslib": "^2.8.1"
       }
     },
-    "node_modules/rolldown": {
-      "version": "1.0.0-beta.47",
-      "integrity": "sha512-Mid74GckX1OeFAOYz9KuXeWYhq3xkXbMziYIC+ULVdUzPTG9y70OBSBQDQn9hQP8u/AfhuYw1R0BSg15nBI4Dg==",
+    "node_modules/pvutils": {
+      "version": "1.2.0",
+      "integrity": "sha512-BbubeCEyTuQjVMakvJQ/Sxbc93F2pwmbsxONT/ZRrwU7Ua38d8unYTwXpTVLAKJ4BDuH9IGztCjQcd/N/39Dvg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.16.0",
+      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@oxc-project/types": "=0.96.0",
-        "@rolldown/pluginutils": "1.0.0-beta.47"
-      },
-      "bin": {
-        "rolldown": "bin/cli.mjs"
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
       },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": ">=0.6"
       },
-      "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.0.0-beta.47",
-        "@rolldown/binding-darwin-arm64": "1.0.0-beta.47",
-        "@rolldown/binding-darwin-x64": "1.0.0-beta.47",
-        "@rolldown/binding-freebsd-x64": "1.0.0-beta.47",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-beta.47",
-        "@rolldown/binding-linux-arm64-gnu": "1.0.0-beta.47",
-        "@rolldown/binding-linux-arm64-musl": "1.0.0-beta.47",
-        "@rolldown/binding-linux-x64-gnu": "1.0.0-beta.47",
-        "@rolldown/binding-linux-x64-musl": "1.0.0-beta.47",
-        "@rolldown/binding-openharmony-arm64": "1.0.0-beta.47",
-        "@rolldown/binding-wasm32-wasi": "1.0.0-beta.47",
-        "@rolldown/binding-win32-arm64-msvc": "1.0.0-beta.47",
-        "@rolldown/binding-win32-ia32-msvc": "1.0.0-beta.47",
-        "@rolldown/binding-win32-x64-msvc": "1.0.0-beta.47"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/rollup": {
-      "version": "4.64.6",
-      "integrity": "sha512-fX1Vy+UNKdXn+xKDnu/HBXbHVr1AY8cSdQj9BU4kLv5aFCMqGpvrVbyUMmjN3DdzWhSAuTbcX8PCNEVaumthYA==",
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/range-parser": {
+      "version": "1.3.0",
+      "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@types/estree": "1.0.9"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
       "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
+        "node": ">= 0.6"
       },
-      "optionalDependencies": {
-        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
-        "@rollup/rollup-android-arm-eabi": "4.64.6",
-        "@rollup/rollup-android-arm64": "4.64.6",
-        "@rollup/rollup-darwin-arm64": "4.64.6",
-        "@rollup/rollup-darwin-x64": "4.64.6",
-        "@rollup/rollup-freebsd-arm64": "4.64.6",
-        "@rollup/rollup-freebsd-x64": "4.64.6",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.64.6",
-        "@rollup/rollup-linux-arm-musleabihf": "4.64.6",
-        "@rollup/rollup-linux-arm64-gnu": "4.64.6",
-        "@rollup/rollup-linux-arm64-musl": "4.64.6",
-        "@rollup/rollup-linux-loong64-gnu": "4.64.6",
-        "@rollup/rollup-linux-loong64-musl": "4.64.6",
-        "@rollup/rollup-linux-ppc64-gnu": "4.64.6",
-        "@rollup/rollup-linux-ppc64-musl": "4.64.6",
-        "@rollup/rollup-linux-riscv64-gnu": "4.64.6",
-        "@rollup/rollup-linux-riscv64-musl": "4.64.6",
-        "@rollup/rollup-linux-s390x-gnu": "4.64.6",
-        "@rollup/rollup-linux-x64-gnu": "4.64.6",
-        "@rollup/rollup-linux-x64-musl": "4.64.6",
-        "@rollup/rollup-openbsd-x64": "4.64.6",
-        "@rollup/rollup-openharmony-arm64": "4.64.6",
-        "@rollup/rollup-win32-arm64-msvc": "4.64.6",
-        "@rollup/rollup-win32-ia32-msvc": "4.64.6",
-        "@rollup/rollup-win32-x64-gnu": "4.64.6",
-        "@rollup/rollup-win32-x64-msvc": "4.64.6",
-        "fsevents": "~2.3.2"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/rollup-plugin-dts": {
-      "version": "6.5.1",
-      "integrity": "sha512-jODTXp3H7MK/Ur/ErtsrQ0G1GvaCmc3du+y5pNrdBMf6d7HlL2Nd/N6TkEr+f75CkUj01zEoEd7y2elH0eHi1Q==",
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
       "dev": true,
-      "license": "LGPL-3.0-only",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/remapping": "^2.3.5",
-        "@jridgewell/sourcemap-codec": "^1.5.5",
-        "convert-source-map": "^2.0.0",
-        "magic-string": "^0.30.21"
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
       },
       "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/Swatinem"
-      },
-      "optionalDependencies": {
-        "@babel/code-frame": "^8.0.0"
-      },
-      "peerDependencies": {
-        "@typescript/typescript6": "^6",
-        "rollup": "^3 || ^4",
-        "typescript": "^4.5 || ^5 || ^6 || ^7"
-      },
-      "peerDependenciesMeta": {
-        "@typescript/typescript6": {
-          "optional": true
-        }
+        "node": ">= 0.10"
       }
     },
-    "node_modules/rollup-plugin-dts/node_modules/@babel/code-frame": {
-      "version": "8.0.6",
-      "integrity": "sha512-uMHhvmDmwFiLuiozaoRYTZHqMFuu3fem/X9JY78lohAuLoh8LSGGC8JqUzo2cVuBsBxkjMZNk56CE7ock8Xxkw==",
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
+      "peer": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^8.0.6",
-        "js-tokens": "^10.0.0"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       },
       "engines": {
-        "node": "^22.18.0 || >=24.11.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/rollup-plugin-dts/node_modules/@babel/helper-validator-identifier": {
-      "version": "8.0.6",
-      "integrity": "sha512-HYx0YmuchRxRSpnjvcNffnPS8DCauKNmnumIuHG3jnQAVewRA7kfJGwF13ayEpSZs7s4R/oBH4eppuXcAQd5JQ==",
+    "node_modules/readdirp": {
+      "version": "5.1.1",
+      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
-        "node": "^22.18.0 || >=24.11.0"
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/rollup-plugin-dts/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+    "node_modules/reflect-metadata": {
+      "version": "0.2.2",
+      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
       "dev": true,
-      "license": "MIT"
+      "license": "Apache-2.0"
     },
-    "node_modules/rollup-plugin-dts/node_modules/js-tokens": {
-      "version": "10.0.0",
-      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
       "dev": true,
       "license": "MIT",
-      "optional": true
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/rollup-plugin-dts/node_modules/magic-string": {
-      "version": "0.30.21",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+    "node_modules/regenerate": {
+      "version": "1.5.0",
+      "integrity": "sha512-1s+CxXjJ71i7LNVy8nYwg47XV4y6lAnOEhsMtSKq3WpmPfhl9LuKlTqKIn/3yUpE8lBz+W+TT88Bxyhnr0U4yw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
+      "peer": true
     },
-    "node_modules/router": {
-      "version": "2.2.0",
-      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.3.0",
+      "integrity": "sha512-9ns8odR8e9q3otKeHj3DE80jZYKg6zVeZKE+zQmRKXFoVUcuiTGeO6iusDhPRoIQQPVPRvH+SfBhrTud4eczuw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "is-promise": "^4.0.0",
-        "parseurl": "^1.3.3",
-        "path-to-regexp": "^8.0.0"
+        "regenerate": "^1.4.2"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">=4"
       }
     },
-    "node_modules/rrdom": {
-      "version": "0.1.7",
-      "integrity": "sha512-ZLd8f14z9pUy2Hk9y636cNv5Y2BMnNEY99wxzW9tD2BLDfe1xFxtLjB4q/xCBYo6HRe0wofzKzjm4JojmpBfFw==",
+    "node_modules/regex-parser": {
+      "version": "2.3.1",
+      "integrity": "sha512-yXLRqatcCuKtVHsWrNg0JL3l1zGfdXeEvDa0bdu4tCDQw0RpMDZsqbkyRTUnKMR0tXF627V2oEWjBEaEdqTwtQ==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "rrweb-snapshot": "^2.0.0-alpha.4"
-      }
+      "peer": true
     },
-    "node_modules/rrweb": {
-      "version": "2.0.0-alpha.4",
-      "integrity": "sha512-wEHUILbxDPcNwkM3m4qgPgXAiBJyqCbbOHyVoNEVBJzHszWEFYyTbrZqUdeb1EfmTRC2PsumCIkVcomJ/xcOzA==",
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rrweb/types": "^2.0.0-alpha.4",
-        "@types/css-font-loading-module": "0.0.7",
-        "@xstate/fsm": "^1.4.0",
-        "base64-arraybuffer": "^1.0.1",
-        "fflate": "^0.4.4",
-        "mitt": "^3.0.0",
-        "rrdom": "^0.1.7",
-        "rrweb-snapshot": "^2.0.0-alpha.4"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/rrweb-cssom": {
-      "version": "0.8.0",
-      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/rrweb-snapshot": {
-      "version": "2.1.7",
-      "integrity": "sha512-exIZ4dxX498CZszs4ji0KKn8lhX9sBPBdD431t0RQOqCTStAHrmdWKK2s8tWSL32iRS+AOafbMuf6TOIZxW6ug==",
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "postcss": "^8.4.38"
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
       }
     },
-    "node_modules/run-applescript": {
-      "version": "7.1.0",
-      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+    "node_modules/regexpu-core": {
+      "version": "6.5.3",
+      "integrity": "sha512-E8VgUoSK+LMQrLboDxavm76MTBGrQhx9RiNuomRmYnZ10Uw12HrI8fkxOOncktb2hBpzIZ9SV/347euQHG5z+g==",
       "dev": true,
       "license": "MIT",
       "peer": true,
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "regenerate": "^1.5.0",
+        "regenerate-unicode-properties": "^10.3.0",
+        "regjsgen": "^0.8.0",
+        "regjsparser": "^0.13.0",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.2.1"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=4"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+    "node_modules/regjsgen": {
+      "version": "0.8.0",
+      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
       "license": "MIT",
+      "peer": true
+    },
+    "node_modules/regjsparser": {
+      "version": "0.13.4",
+      "integrity": "sha512-EWV80YgFaVgFrjGCAsV7oybp4GOxbls5RzBg8OB0nKEVXsBJR1JlV8Di1JhCROg3MzTfe1RI8yitIm1eOs68iA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
-        "queue-microtask": "^1.2.2"
+        "jsesc": "~3.1.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
       }
     },
-    "node_modules/rxjs": {
-      "version": "7.8.2",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/safe-array-concat": {
-      "version": "1.1.4",
-      "integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.9",
-        "call-bound": "^1.0.4",
-        "get-intrinsic": "^1.3.0",
-        "has-symbols": "^1.1.0",
-        "isarray": "^2.0.5"
-      },
       "engines": {
-        "node": ">=0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
       "license": "MIT",
       "peer": true
     },
-    "node_modules/safe-push-apply": {
-      "version": "1.0.0",
-      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "es-errors": "^1.3.0",
-        "isarray": "^2.0.5"
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
       },
       "engines": {
         "node": ">= 0.4"
@@ -20947,2686 +18899,2723 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/safe-regex-test": {
-      "version": "1.1.0",
-      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-regex": "^1.2.1"
+        "resolve-from": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=8"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/sass": {
-      "version": "1.97.3",
-      "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/resolve-url-loader": {
+      "version": "5.0.0",
+      "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
+        "adjust-sourcemap-loader": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.14",
+        "source-map": "0.6.1"
       },
       "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
+        "node": ">=12"
       }
     },
-    "node_modules/sass-loader": {
-      "version": "16.0.7",
-      "integrity": "sha512-w6q+fRHourZ+e+xA1kcsF27iGM6jdB8teexYCfdUw0sYgcDNeZESnDNT9sUmmPm3ooziwUJXGwZJSTF3kOdBfA==",
+    "node_modules/resolve-url-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "neo-async": "^2.6.2"
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
       },
       "engines": {
-        "node": ">= 18.12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
-        "sass": "^1.3.0",
-        "sass-embedded": "*",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "node-sass": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
+        "node": ">=8.9.0"
       }
     },
-    "node_modules/sass/node_modules/chokidar": {
-      "version": "4.0.3",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+    "node_modules/resolve-url-loader/node_modules/source-map": {
+      "version": "0.6.1",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "readdirp": "^4.0.1"
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
       },
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/sass/node_modules/readdirp": {
-      "version": "4.1.2",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "7.0.0",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
       "engines": {
-        "node": ">= 14.18.0"
+        "node": ">=18"
       },
       "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/sax": {
-      "version": "1.6.1",
-      "integrity": "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==",
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=11.0.0"
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/saxes": {
-      "version": "6.0.0",
-      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=v12.22.7"
-      }
+      "license": "MIT"
     },
-    "node_modules/schema-utils": {
-      "version": "4.5.0",
-      "integrity": "sha512-zJlMCZ0cAR5p/Y4oVpRoqioDMJcGxaXRrQ/4rP4WyR84vc5z/DolXdbvXeDpTwbtocDFr2rhPqHPErDCUtz2kA==",
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
+      "license": "ISC",
       "dependencies": {
-        "@types/json-schema": "^7.0.15",
-        "ajv": "^8.20.0",
-        "ajv-formats": "^3.0.1",
-        "ajv-keywords": "^5.1.0"
+        "glob": "^7.1.3"
       },
-      "engines": {
-        "node": ">= 10.13.0"
+      "bin": {
+        "rimraf": "bin.js"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/schema-utils/node_modules/ajv": {
-      "version": "8.20.0",
-      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+    "node_modules/rimraf/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
+      "license": "MIT"
     },
-    "node_modules/select-hose": {
-      "version": "2.0.0",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+    "node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.21",
+      "integrity": "sha512-9zeA+KLZNNzglF2TPKRQEDyx6Yby7daAkuy8MiPzpXPsYDWi/DRM8jmwUDxokQjYqBpv5DgPiwD4h4ZZSy1Ujw==",
       "dev": true,
       "license": "MIT",
-      "peer": true
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
     },
-    "node_modules/selfsigned": {
-      "version": "5.5.0",
-      "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==",
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
+      "license": "ISC",
       "dependencies": {
-        "@peculiar/x509": "^1.14.2",
-        "pkijs": "^3.3.3"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/semver": {
-      "version": "7.7.4",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.5",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=10"
+        "node": "*"
       }
     },
-    "node_modules/send": {
-      "version": "1.2.1",
-      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.4",
+      "integrity": "sha512-V2tPDUrY3WSevrvU2E41ijZlpF+5PbZu4giH+VpNraaadsJGHa4fR6IFwsocVwEXDoAdIv5qgPPxgrvKAOIPtA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.4.3",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.1",
-        "mime-types": "^3.0.2",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.2"
+        "@oxc-project/types": "=0.113.0",
+        "@rolldown/pluginutils": "1.0.0-rc.4"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
       },
       "engines": {
-        "node": ">= 18"
+        "node": "^20.19.0 || >=22.12.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.4",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.4",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.4",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.4",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.4",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.4",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.4"
       }
     },
-    "node_modules/serialize-javascript": {
-      "version": "7.1.2",
-      "integrity": "sha512-GL2BWwVa6JydKO6l/ljVgjAZF4QJ3S7dWDWi53s5GZT8PJzD2fNxi67HANQGKAqPrwEpL5ba7gUBGi0Ls/sEoQ==",
+    "node_modules/rollup": {
+      "version": "4.64.6",
+      "integrity": "sha512-fX1Vy+UNKdXn+xKDnu/HBXbHVr1AY8cSdQj9BU4kLv5aFCMqGpvrVbyUMmjN3DdzWhSAuTbcX8PCNEVaumthYA==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.64.6",
+        "@rollup/rollup-android-arm64": "4.64.6",
+        "@rollup/rollup-darwin-arm64": "4.64.6",
+        "@rollup/rollup-darwin-x64": "4.64.6",
+        "@rollup/rollup-freebsd-arm64": "4.64.6",
+        "@rollup/rollup-freebsd-x64": "4.64.6",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.64.6",
+        "@rollup/rollup-linux-arm-musleabihf": "4.64.6",
+        "@rollup/rollup-linux-arm64-gnu": "4.64.6",
+        "@rollup/rollup-linux-arm64-musl": "4.64.6",
+        "@rollup/rollup-linux-loong64-gnu": "4.64.6",
+        "@rollup/rollup-linux-loong64-musl": "4.64.6",
+        "@rollup/rollup-linux-ppc64-gnu": "4.64.6",
+        "@rollup/rollup-linux-ppc64-musl": "4.64.6",
+        "@rollup/rollup-linux-riscv64-gnu": "4.64.6",
+        "@rollup/rollup-linux-riscv64-musl": "4.64.6",
+        "@rollup/rollup-linux-s390x-gnu": "4.64.6",
+        "@rollup/rollup-linux-x64-gnu": "4.64.6",
+        "@rollup/rollup-linux-x64-musl": "4.64.6",
+        "@rollup/rollup-openbsd-x64": "4.64.6",
+        "@rollup/rollup-openharmony-arm64": "4.64.6",
+        "@rollup/rollup-win32-arm64-msvc": "4.64.6",
+        "@rollup/rollup-win32-ia32-msvc": "4.64.6",
+        "@rollup/rollup-win32-x64-gnu": "4.64.6",
+        "@rollup/rollup-win32-x64-msvc": "4.64.6",
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/serve-index": {
-      "version": "1.9.2",
-      "integrity": "sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==",
+    "node_modules/rollup-plugin-dts": {
+      "version": "6.5.1",
+      "integrity": "sha512-jODTXp3H7MK/Ur/ErtsrQ0G1GvaCmc3du+y5pNrdBMf6d7HlL2Nd/N6TkEr+f75CkUj01zEoEd7y2elH0eHi1Q==",
       "dev": true,
-      "license": "MIT",
-      "peer": true,
+      "license": "LGPL-3.0-only",
       "dependencies": {
-        "accepts": "~1.3.8",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.8.0",
-        "mime-types": "~2.1.35",
-        "parseurl": "~1.3.3"
+        "@jridgewell/remapping": "^2.3.5",
+        "@jridgewell/sourcemap-codec": "^1.5.5",
+        "convert-source-map": "^2.0.0",
+        "magic-string": "^0.30.21"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Swatinem"
+      },
+      "optionalDependencies": {
+        "@babel/code-frame": "^8.0.0"
       },
-      "engines": {
-        "node": ">= 0.8.0"
+      "peerDependencies": {
+        "@typescript/typescript6": "^6",
+        "rollup": "^3 || ^4",
+        "typescript": "^4.5 || ^5 || ^6 || ^7"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+      "peerDependenciesMeta": {
+        "@typescript/typescript6": {
+          "optional": true
+        }
       }
     },
-    "node_modules/serve-index/node_modules/accepts": {
-      "version": "1.3.8",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+    "node_modules/rollup-plugin-dts/node_modules/@babel/code-frame": {
+      "version": "8.0.6",
+      "integrity": "sha512-uMHhvmDmwFiLuiozaoRYTZHqMFuu3fem/X9JY78lohAuLoh8LSGGC8JqUzo2cVuBsBxkjMZNk56CE7ock8Xxkw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
+      "optional": true,
       "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
+        "@babel/helper-validator-identifier": "^8.0.6",
+        "js-tokens": "^10.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": "^22.18.0 || >=24.11.0"
       }
     },
-    "node_modules/serve-index/node_modules/debug": {
-      "version": "2.6.9",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+    "node_modules/rollup-plugin-dts/node_modules/@babel/helper-validator-identifier": {
+      "version": "8.0.6",
+      "integrity": "sha512-HYx0YmuchRxRSpnjvcNffnPS8DCauKNmnumIuHG3jnQAVewRA7kfJGwF13ayEpSZs7s4R/oBH4eppuXcAQd5JQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ms": "2.0.0"
+      "optional": true,
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
       }
     },
-    "node_modules/serve-index/node_modules/depd": {
-      "version": "1.1.2",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+    "node_modules/rollup-plugin-dts/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rollup-plugin-dts/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
+      "optional": true
     },
-    "node_modules/serve-index/node_modules/http-errors": {
-      "version": "1.8.1",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+    "node_modules/router": {
+      "version": "2.2.0",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.1"
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 18"
       }
     },
-    "node_modules/serve-index/node_modules/mime-db": {
-      "version": "1.52.0",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+    "node_modules/rrdom": {
+      "version": "0.1.7",
+      "integrity": "sha512-ZLd8f14z9pUy2Hk9y636cNv5Y2BMnNEY99wxzW9tD2BLDfe1xFxtLjB4q/xCBYo6HRe0wofzKzjm4JojmpBfFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
+      "dependencies": {
+        "rrweb-snapshot": "^2.0.0-alpha.4"
       }
     },
-    "node_modules/serve-index/node_modules/mime-types": {
-      "version": "2.1.35",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+    "node_modules/rrweb": {
+      "version": "2.0.0-alpha.4",
+      "integrity": "sha512-wEHUILbxDPcNwkM3m4qgPgXAiBJyqCbbOHyVoNEVBJzHszWEFYyTbrZqUdeb1EfmTRC2PsumCIkVcomJ/xcOzA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
+        "@rrweb/types": "^2.0.0-alpha.4",
+        "@types/css-font-loading-module": "0.0.7",
+        "@xstate/fsm": "^1.4.0",
+        "base64-arraybuffer": "^1.0.1",
+        "fflate": "^0.4.4",
+        "mitt": "^3.0.0",
+        "rrdom": "^0.1.7",
+        "rrweb-snapshot": "^2.0.0-alpha.4"
       }
     },
-    "node_modules/serve-index/node_modules/ms": {
-      "version": "2.0.0",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rrweb-snapshot": {
+      "version": "2.1.7",
+      "integrity": "sha512-exIZ4dxX498CZszs4ji0KKn8lhX9sBPBdD431t0RQOqCTStAHrmdWKK2s8tWSL32iRS+AOafbMuf6TOIZxW6ug==",
       "dev": true,
       "license": "MIT",
-      "peer": true
+      "dependencies": {
+        "postcss": "^8.4.38"
+      }
     },
-    "node_modules/serve-index/node_modules/negotiator": {
-      "version": "0.6.3",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/serve-index/node_modules/statuses": {
-      "version": "1.5.0",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/serve-static": {
-      "version": "2.2.1",
-      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.4",
+      "integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">=0.4"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
+      "peer": true
     },
-    "node_modules/set-function-name": {
-      "version": "2.0.2",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
+        "isarray": "^2.0.5"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/set-proto": {
-      "version": "1.0.0",
-      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "dunder-proto": "^1.0.1",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0"
+        "is-regex": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
-      "license": "ISC"
+      "license": "MIT"
     },
-    "node_modules/shallow-clone": {
-      "version": "3.0.1",
-      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+    "node_modules/sass": {
+      "version": "1.97.3",
+      "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "kind-of": "^6.0.2"
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
       }
     },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+    "node_modules/sass-loader": {
+      "version": "16.0.7",
+      "integrity": "sha512-w6q+fRHourZ+e+xA1kcsF27iGM6jdB8teexYCfdUw0sYgcDNeZESnDNT9sUmmPm3ooziwUJXGwZJSTF3kOdBfA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "shebang-regex": "^3.0.0"
+        "neo-async": "^2.6.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
       }
     },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/shell-quote": {
-      "version": "1.12.0",
-      "integrity": "sha512-PcByqNyT/38F2kDNi006HAMRJaULuBzq/FOsw3qdZvX/GA9W/jamDaRskgHjubHiftXK5sIFxLNkvrXUwcof6Q==",
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
-        "node": ">= 0.4"
+        "node": ">= 14.18.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/shimmer": {
-      "version": "1.2.1",
-      "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==",
+    "node_modules/sax": {
+      "version": "1.6.1",
+      "integrity": "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==",
       "dev": true,
-      "license": "BSD-2-Clause"
+      "license": "BlueOak-1.0.0",
+      "optional": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
     },
-    "node_modules/side-channel": {
-      "version": "1.1.1",
-      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.4",
-        "side-channel-list": "^1.0.1",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
+        "xmlchars": "^2.2.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=v12.22.7"
       }
     },
-    "node_modules/side-channel-list": {
-      "version": "1.0.1",
-      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+    "node_modules/schema-utils": {
+      "version": "4.5.0",
+      "integrity": "sha512-zJlMCZ0cAR5p/Y4oVpRoqioDMJcGxaXRrQ/4rP4WyR84vc5z/DolXdbvXeDpTwbtocDFr2rhPqHPErDCUtz2kA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.4"
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^8.20.0",
+        "ajv-formats": "^3.0.1",
+        "ajv-keywords": "^5.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">= 10.13.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "8.20.0",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/selfsigned": {
+      "version": "5.5.0",
+      "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
+        "@peculiar/x509": "^1.14.2",
+        "pkijs": "^3.3.3"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=18"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
-      "engines": {
-        "node": ">=14"
+      "bin": {
+        "semver": "bin/semver.js"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/sigstore": {
-      "version": "4.1.1",
-      "integrity": "sha512-endqECJkfhozrXMK5ngu/UAA0xVcVEFdnHJCElGaExypjW+HK5i6zu3NteLoaX/iFbRUbC3+DjttQs0GARr+5w==",
+    "node_modules/send": {
+      "version": "1.2.1",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@sigstore/bundle": "^4.0.0",
-        "@sigstore/core": "^3.2.1",
-        "@sigstore/protobuf-specs": "^0.5.0",
-        "@sigstore/sign": "^4.1.1",
-        "@sigstore/tuf": "^4.0.2",
-        "@sigstore/verify": "^3.1.1"
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
       },
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+    "node_modules/serialize-javascript": {
+      "version": "7.1.2",
+      "integrity": "sha512-GL2BWwVa6JydKO6l/ljVgjAZF4QJ3S7dWDWi53s5GZT8PJzD2fNxi67HANQGKAqPrwEpL5ba7gUBGi0Ls/sEoQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.2",
+      "integrity": "sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.8.0",
+        "mime-types": "~2.1.35",
+        "parseurl": "~1.3.3"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/slice-ansi": {
-      "version": "8.0.0",
-      "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
+    "node_modules/serve-index/node_modules/accepts": {
+      "version": "1.3.8",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "ansi-styles": "^6.2.3",
-        "is-fullwidth-code-point": "^5.1.0"
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
       },
       "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/slice-ansi/node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      "peer": true,
+      "dependencies": {
+        "ms": "2.0.0"
       }
     },
-    "node_modules/smart-buffer": {
-      "version": "4.2.0",
-      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/sockjs": {
-      "version": "0.3.24",
-      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.8.1",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "faye-websocket": "^0.11.3",
-        "uuid": "^8.3.2",
-        "websocket-driver": "^0.7.4"
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/sockjs/node_modules/uuid": {
-      "version": "8.3.2",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+    "node_modules/serve-index/node_modules/mime-db": {
+      "version": "1.52.0",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/socks": {
-      "version": "2.8.10",
-      "integrity": "sha512-e0VyvkVTwVYViNovRkZ9aodhxVlyoMn7eJhVUPxZ+eK9P/7CBkxvvsBOHqFPEH416726W8tLXXXjKwqgTErrCQ==",
+    "node_modules/serve-index/node_modules/mime-types": {
+      "version": "2.1.35",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "ip-address": "^10.1.1",
-        "smart-buffer": "^4.2.0"
+        "mime-db": "1.52.0"
       },
       "engines": {
-        "node": ">= 10.0.0",
-        "npm": ">= 3.0.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/socks-proxy-agent": {
-      "version": "8.0.5",
-      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "agent-base": "^7.1.2",
-        "debug": "^4.3.4",
-        "socks": "^2.8.3"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
+      "peer": true
     },
-    "node_modules/source-map": {
-      "version": "0.7.6",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+    "node_modules/serve-index/node_modules/negotiator": {
+      "version": "0.6.3",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "dev": true,
-      "license": "BSD-3-Clause",
+      "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">= 12"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.2.2",
-      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
       "dev": true,
-      "license": "BSD-3-Clause",
+      "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/source-map-loader": {
-      "version": "5.0.0",
-      "integrity": "sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==",
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "source-map-js": "^1.0.2"
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
       },
       "engines": {
-        "node": ">= 18.12.0"
+        "node": ">= 18"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.72.1"
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/source-map-loader/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.6.1",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/spdx-exceptions": {
-      "version": "2.5.0",
-      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
-      "dev": true,
-      "license": "CC-BY-3.0"
-    },
-    "node_modules/spdx-expression-parse": {
-      "version": "4.0.0",
-      "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/spdx-license-ids": {
-      "version": "3.0.24",
-      "integrity": "sha512-cLS9TtWkIQFyLkJ3/5aFQAOHOSKTlOs/7WDut/XPSdjom1fJhUdkepeJAKXa9Y05+FabHd0sti+Et559vDtkpQ==",
-      "dev": true,
-      "license": "CC0-1.0"
-    },
-    "node_modules/spdy": {
-      "version": "4.0.2",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/spdy-transport": {
-      "version": "3.0.0",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true,
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/ssri": {
-      "version": "12.0.0",
-      "integrity": "sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==",
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
+      "license": "ISC"
     },
-    "node_modules/stack-utils": {
-      "version": "2.0.6",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "escape-string-regexp": "^2.0.0"
+        "kind-of": "^6.0.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+    "node_modules/shebang-command": {
       "version": "2.0.0",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/statuses": {
-      "version": "2.0.2",
-      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=8"
       }
     },
-    "node_modules/stdin-discarder": {
-      "version": "0.3.2",
-      "integrity": "sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==",
+    "node_modules/shell-quote": {
+      "version": "1.12.0",
+      "integrity": "sha512-PcByqNyT/38F2kDNi006HAMRJaULuBzq/FOsw3qdZvX/GA9W/jamDaRskgHjubHiftXK5sIFxLNkvrXUwcof6Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/stop-iteration-iterator": {
-      "version": "1.1.0",
-      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+    "node_modules/shimmer": {
+      "version": "1.2.1",
+      "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "internal-slot": "^1.1.0"
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/stream-parser": {
-      "version": "0.3.1",
-      "integrity": "sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "debug": "2"
-      }
-    },
-    "node_modules/stream-parser/node_modules/debug": {
-      "version": "2.6.9",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "ms": "2.0.0"
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/stream-parser/node_modules/ms": {
-      "version": "2.0.0",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "safe-buffer": "~5.2.0"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string-length": {
-      "version": "4.0.2",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string-width": {
-      "version": "8.3.0",
-      "integrity": "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ==",
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "get-east-asian-width": "^1.5.0",
-        "strip-ansi": "^7.1.2"
-      },
+      "license": "ISC",
       "engines": {
-        "node": ">=20"
+        "node": ">=14"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "node_modules/sigstore": {
+      "version": "4.1.1",
+      "integrity": "sha512-endqECJkfhozrXMK5ngu/UAA0xVcVEFdnHJCElGaExypjW+HK5i6zu3NteLoaX/iFbRUbC3+DjttQs0GARr+5w==",
       "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.2.1",
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "@sigstore/sign": "^4.1.1",
+        "@sigstore/tuf": "^4.0.2",
+        "@sigstore/verify": "^3.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
+    "node_modules/slash": {
       "version": "3.0.0",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.4.0",
-      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
+    "node_modules/slice-ansi": {
+      "version": "8.0.0",
+      "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.3",
+        "is-fullwidth-code-point": "^5.1.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=20"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/string.prototype.trim": {
-      "version": "1.2.11",
-      "integrity": "sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==",
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.9",
-        "call-bound": "^1.0.4",
-        "define-data-property": "^1.1.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.24.2",
-        "es-object-atoms": "^1.1.2",
-        "has-property-descriptors": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
-      },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
       }
     },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.10",
-      "integrity": "sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==",
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.9",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
       }
     },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.8",
-      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peer": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+    "node_modules/socks": {
+      "version": "2.8.10",
+      "integrity": "sha512-e0VyvkVTwVYViNovRkZ9aodhxVlyoMn7eJhVUPxZ+eK9P/7CBkxvvsBOHqFPEH416726W8tLXXXjKwqgTErrCQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "ip-address": "^10.1.1",
+        "smart-buffer": "^4.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 14"
       }
     },
-    "node_modules/strip-bom": {
-      "version": "4.0.0",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">= 12"
       }
     },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+    "node_modules/source-map-js": {
+      "version": "1.2.2",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=6"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+    "node_modules/source-map-loader": {
+      "version": "5.0.0",
+      "integrity": "sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.2"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 18.12.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.72.1"
       }
     },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/source-map-loader/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "CC-BY-3.0"
     },
-    "node_modules/synckit": {
-      "version": "0.12.3",
-      "integrity": "sha512-U+/AXT6LWsxnj2vz9HeUuPWBNgdWxjyIEjEPdbJARC9txmgPzo2VEdqnFo4hHaNyMPtycyVJrSaQYeQv/PoyyA==",
+    "node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@dual-bundle/import-meta-resolve": "^4.2.1",
-        "@pkgr/core": "^0.3.6"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/synckit"
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/tapable": {
-      "version": "2.3.3",
-      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.24",
+      "integrity": "sha512-cLS9TtWkIQFyLkJ3/5aFQAOHOSKTlOs/7WDut/XPSdjom1fJhUdkepeJAKXa9Y05+FabHd0sti+Et559vDtkpQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
-      "engines": {
-        "node": ">=6"
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/tar": {
-      "version": "7.5.22",
-      "integrity": "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA==",
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.1.0",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
       }
     },
-    "node_modules/tar/node_modules/yallist": {
-      "version": "5.0.0",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ssri": {
+      "version": "13.0.1",
+      "integrity": "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/terser": {
-      "version": "5.46.0",
-      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.15.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
+        "escape-string-regexp": "^2.0.0"
       },
       "engines": {
         "node": ">=10"
       }
     },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.6.1",
-      "integrity": "sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==",
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^4.3.0",
-        "terser": "^5.31.1"
-      },
       "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "@minify-html/node": {
-          "optional": true
-        },
-        "@swc/core": {
-          "optional": true
-        },
-        "@swc/css": {
-          "optional": true
-        },
-        "@swc/html": {
-          "optional": true
-        },
-        "clean-css": {
-          "optional": true
-        },
-        "cssnano": {
-          "optional": true
-        },
-        "csso": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "html-minifier-terser": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "uglify-js": {
-          "optional": true
-        }
+        "node": ">=8"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
       }
     },
-    "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
-      "version": "27.5.1",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+    "node_modules/stdin-discarder": {
+      "version": "0.3.2",
+      "integrity": "sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
-      "version": "8.1.1",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+    "node_modules/stream-parser": {
+      "version": "0.3.1",
+      "integrity": "sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true
+      "optional": true,
+      "dependencies": {
+        "debug": "2"
+      }
     },
-    "node_modules/test-exclude": {
-      "version": "7.0.2",
-      "integrity": "sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw==",
+    "node_modules/stream-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^10.4.1",
-        "minimatch": "^10.2.2"
-      },
-      "engines": {
-        "node": ">=18"
+        "ms": "2.0.0"
       }
     },
-    "node_modules/test-exclude/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+    "node_modules/stream-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/test-exclude/node_modules/brace-expansion": {
-      "version": "2.1.7",
-      "integrity": "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g==",
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "safe-buffer": "~5.2.0"
       }
     },
-    "node_modules/test-exclude/node_modules/glob": {
-      "version": "10.5.0",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
-      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/test-exclude/node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.9",
-      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+    "node_modules/string-width": {
+      "version": "8.3.0",
+      "integrity": "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^2.0.2"
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=20"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/test-exclude/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/test-exclude/node_modules/path-scurry": {
-      "version": "1.11.1",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">=8"
       }
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thingies": {
-      "version": "2.6.1",
-      "integrity": "sha512-cV/CMGTK3M4MlnJ/0At6ismOw/A0EEniDNScajjz/Br3c1sqE72YD01rGpPTKwd27wAxI5Pr+6+0w8yofzFRYw==",
+    "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
-        "node": ">=10.18"
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.4.0",
+      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      },
-      "peerDependencies": {
-        "tslib": "^2"
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/thunky": {
-      "version": "1.1.0",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
       "dev": true,
       "license": "MIT",
-      "peer": true
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
     },
-    "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.11",
+      "integrity": "sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "has-property-descriptors": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tldts": {
-      "version": "7.4.18",
-      "integrity": "sha512-somxA8xKAUzlAxl0TX/jMSYIbRNFIVGnI96pVGJPeMc5BsHmfVXn6mOJT6U++ELnl04eGfzpfcEuZe8WiASkXg==",
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.10",
+      "integrity": "sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "tldts-core": "^7.4.18"
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.2"
       },
-      "bin": {
-        "tldts": "bin/cli.js"
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tldts-core": {
-      "version": "7.4.18",
-      "integrity": "sha512-KI2PKvCmvQI/xD6ypPqkU0i7oxNXR/O58RLRaHR4svsgVUQ2JE/XC8BtMbG6PSehD27I8sZJRcC1ASnCy6lp3g==",
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
       "license": "MIT",
-      "peer": true
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "is-number": "^7.0.0"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">=8"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
       "engines": {
-        "node": ">=0.6"
+        "node": ">=8"
       }
     },
-    "node_modules/tough-cookie": {
-      "version": "6.0.2",
-      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+    "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true,
-      "dependencies": {
-        "tldts": "^7.0.5"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=16"
+        "node": ">=8"
       }
     },
-    "node_modules/tr46": {
-      "version": "7.0.0",
-      "integrity": "sha512-BcDSDW+SIGWVOns1Zm6Yg91q9AEj7eaID0QDY9oIqJD1A8dscNwMcl9Sms2DeuWCNov1X0/oXanHGYQBSLwZsg==",
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
       "engines": {
-        "node": "^22.14.0 || >=24.0.0"
+        "node": ">=6"
       }
     },
-    "node_modules/tree-dump": {
-      "version": "1.1.0",
-      "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==",
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
-      "license": "Apache-2.0",
-      "peer": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10.0"
+        "node": ">=8"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      },
-      "peerDependencies": {
-        "tslib": "2"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/tree-kill": {
-      "version": "1.2.2",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
-      "bin": {
-        "tree-kill": "cli.js"
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/ts-api-utils": {
-      "version": "2.5.0",
-      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=18.12"
+        "node": ">= 0.4"
       },
-      "peerDependencies": {
-        "typescript": ">=4.8.4"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ts-jest": {
-      "version": "29.4.14",
-      "integrity": "sha512-+943G6wCX5E3VpzTQhBGBFntCmdT+QAkTvUlp03edTONFBvqskuXPhpyX16xdUotO4P5HQKyppldSWjocoltLQ==",
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/synckit": {
+      "version": "0.12.3",
+      "integrity": "sha512-U+/AXT6LWsxnj2vz9HeUuPWBNgdWxjyIEjEPdbJARC9txmgPzo2VEdqnFo4hHaNyMPtycyVJrSaQYeQv/PoyyA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "bs-logger": "^0.2.6",
-        "fast-json-stable-stringify": "^2.1.0",
-        "handlebars": "^4.7.9",
-        "json5": "^2.2.3",
-        "lodash.memoize": "^4.1.2",
-        "make-error": "^1.3.6",
-        "semver": "^7.8.5",
-        "type-fest": "^4.41.0",
-        "yargs-parser": "^21.1.1"
-      },
-      "bin": {
-        "ts-jest": "cli.js"
+        "@dual-bundle/import-meta-resolve": "^4.2.1",
+        "@pkgr/core": "^0.3.6"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
+        "node": "^14.18.0 || >=16.0.0"
       },
-      "peerDependencies": {
-        "@babel/core": ">=7.0.0-beta.0 <9",
-        "@jest/transform": "^29.0.0 || ^30.0.0",
-        "@jest/types": "^29.0.0 || ^30.0.0",
-        "babel-jest": "^29.0.0 || ^30.0.0",
-        "jest": "^29.0.0 || ^30.0.0",
-        "jest-util": "^29.0.0 || ^30.0.0",
-        "typescript": ">=4.3 <7"
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
       },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@jest/transform": {
-          "optional": true
-        },
-        "@jest/types": {
-          "optional": true
-        },
-        "babel-jest": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "jest-util": {
-          "optional": true
-        }
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/ts-jest/node_modules/semver": {
-      "version": "7.8.5",
-      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+    "node_modules/tar": {
+      "version": "7.5.22",
+      "integrity": "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA==",
       "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
-    "node_modules/ts-jest/node_modules/type-fest": {
-      "version": "4.41.0",
-      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
       "dev": true,
-      "license": "(MIT OR CC0-1.0)",
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.46.0",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/ts-node": {
-      "version": "10.9.2",
-      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.6.1",
+      "integrity": "sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@cspotcode/source-map-support": "^0.8.0",
-        "@tsconfig/node10": "^1.0.7",
-        "@tsconfig/node12": "^1.0.7",
-        "@tsconfig/node14": "^1.0.0",
-        "@tsconfig/node16": "^1.0.2",
-        "acorn": "^8.4.1",
-        "acorn-walk": "^8.1.1",
-        "arg": "^4.1.0",
-        "create-require": "^1.1.0",
-        "diff": "^4.0.1",
-        "make-error": "^1.1.1",
-        "v8-compile-cache-lib": "^3.0.1",
-        "yn": "3.1.1"
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "terser": "^5.31.1"
       },
-      "bin": {
-        "ts-node": "dist/bin.js",
-        "ts-node-cwd": "dist/bin-cwd.js",
-        "ts-node-esm": "dist/bin-esm.js",
-        "ts-node-script": "dist/bin-script.js",
-        "ts-node-transpile-only": "dist/bin-transpile.js",
-        "ts-script": "dist/bin-script-deprecated.js"
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "@swc/core": ">=1.2.50",
-        "@swc/wasm": ">=1.2.50",
-        "@types/node": "*",
-        "typescript": ">=2.7"
+        "webpack": "^5.1.0"
       },
       "peerDependenciesMeta": {
+        "@minify-html/node": {
+          "optional": true
+        },
         "@swc/core": {
           "optional": true
         },
-        "@swc/wasm": {
+        "@swc/css": {
+          "optional": true
+        },
+        "@swc/html": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "cssnano": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "html-minifier-terser": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "uglify-js": {
           "optional": true
         }
       }
     },
-    "node_modules/tsconfig-paths": {
-      "version": "4.2.0",
-      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+    "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+      "version": "27.5.1",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "json5": "^2.2.2",
-        "minimist": "^1.2.6",
-        "strip-bom": "^3.0.0"
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tsconfig-paths/node_modules/strip-bom": {
-      "version": "3.0.0",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
+        "node": ">= 10.13.0"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
-    "node_modules/tsyringe": {
-      "version": "4.10.0",
-      "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==",
+    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "tslib": "^1.9.3"
+        "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/tsyringe/node_modules/tslib": {
-      "version": "1.14.1",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true,
-      "license": "0BSD",
+      "license": "MIT",
       "peer": true
     },
-    "node_modules/tuf-js": {
-      "version": "4.1.0",
-      "integrity": "sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==",
+    "node_modules/test-exclude": {
+      "version": "7.0.2",
+      "integrity": "sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "@tufjs/models": "4.1.0",
-        "debug": "^4.4.3",
-        "make-fetch-happen": "^15.0.1"
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^10.4.1",
+        "minimatch": "^10.2.2"
       },
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/type-check": {
-      "version": "0.4.0",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+    "node_modules/test-exclude/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+    "node_modules/test-exclude/node_modules/brace-expansion": {
+      "version": "2.1.7",
+      "integrity": "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=4"
+      "dependencies": {
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/type-fest": {
-      "version": "0.20.2",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "10.5.0",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/type-is": {
-      "version": "2.1.0",
-      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
+    "node_modules/test-exclude/node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.9",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "content-type": "^2.0.0",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/type-is/node_modules/content-type": {
-      "version": "2.1.0",
-      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+    "node_modules/test-exclude/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
+      "license": "ISC"
     },
-    "node_modules/typed-array-buffer": {
-      "version": "1.0.3",
-      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+    "node_modules/test-exclude/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
-      "license": "MIT",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.14"
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/typed-array-byte-length": {
-      "version": "1.0.3",
-      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thingies": {
+      "version": "2.6.1",
+      "integrity": "sha512-cV/CMGTK3M4MlnJ/0At6ismOw/A0EEniDNScajjz/Br3c1sqE72YD01rGpPTKwd27wAxI5Pr+6+0w8yofzFRYw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "for-each": "^0.3.3",
-        "gopd": "^1.2.0",
-        "has-proto": "^1.2.0",
-        "is-typed-array": "^1.1.14"
-      },
+      "peer": true,
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10.18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
       }
     },
-    "node_modules/typed-array-byte-offset": {
-      "version": "1.0.5",
-      "integrity": "sha512-0FHJvLPqZ7KJzp17O13jfsAjsqazgrxBu2zEK95PmUz8lv2+GjRuxUInCr2Rk9Dms3ihN21zJ929ZO43yJ95QQ==",
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.9",
-        "for-each": "^0.3.5",
-        "gopd": "^1.2.0",
-        "is-typed-array": "^1.1.15",
-        "reflect.getprototypeof": "^1.0.10"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/typed-array-length": {
-      "version": "1.0.8",
-      "integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
+    "node_modules/tldts": {
+      "version": "7.4.18",
+      "integrity": "sha512-somxA8xKAUzlAxl0TX/jMSYIbRNFIVGnI96pVGJPeMc5BsHmfVXn6mOJT6U++ELnl04eGfzpfcEuZe8WiASkXg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.9",
-        "for-each": "^0.3.5",
-        "gopd": "^1.2.0",
-        "is-typed-array": "^1.1.15",
-        "possible-typed-array-names": "^1.1.0",
-        "reflect.getprototypeof": "^1.0.10"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "tldts-core": "^7.4.18"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "bin": {
+        "tldts": "bin/cli.js"
       }
     },
-    "node_modules/typed-assert": {
-      "version": "1.0.9",
-      "integrity": "sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==",
+    "node_modules/tldts-core": {
+      "version": "7.4.18",
+      "integrity": "sha512-KI2PKvCmvQI/xD6ypPqkU0i7oxNXR/O58RLRaHR4svsgVUQ2JE/XC8BtMbG6PSehD27I8sZJRcC1ASnCy6lp3g==",
       "dev": true,
       "license": "MIT",
       "peer": true
     },
-    "node_modules/typescript": {
-      "version": "5.9.3",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=8.0"
       }
     },
-    "node_modules/uglify-js": {
-      "version": "3.19.3",
-      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=0.6"
       }
     },
-    "node_modules/unbox-primitive": {
-      "version": "1.1.0",
-      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.1.0",
-        "which-boxed-primitive": "^1.1.1"
+        "tldts": "^7.0.5"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=16"
       }
     },
-    "node_modules/undici": {
-      "version": "7.16.0",
-      "integrity": "sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==",
+    "node_modules/tr46": {
+      "version": "7.0.0",
+      "integrity": "sha512-BcDSDW+SIGWVOns1Zm6Yg91q9AEj7eaID0QDY9oIqJD1A8dscNwMcl9Sms2DeuWCNov1X0/oXanHGYQBSLwZsg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
       "engines": {
-        "node": ">=20.18.1"
+        "node": "^22.14.0 || >=24.0.0"
       }
     },
-    "node_modules/undici-types": {
-      "version": "6.21.0",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/unicode-canonical-property-names-ecmascript": {
-      "version": "2.0.1",
-      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+    "node_modules/tree-dump": {
+      "version": "1.1.0",
+      "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==",
       "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "peer": true,
       "engines": {
-        "node": ">=4"
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
       }
     },
-    "node_modules/unicode-match-property-ecmascript": {
-      "version": "2.0.0",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true,
       "license": "MIT",
       "peer": true,
-      "dependencies": {
-        "unicode-canonical-property-names-ecmascript": "^2.0.0",
-        "unicode-property-aliases-ecmascript": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+      "bin": {
+        "tree-kill": "cli.js"
       }
     },
-    "node_modules/unicode-match-property-value-ecmascript": {
-      "version": "2.2.1",
-      "integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==",
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
-        "node": ">=4"
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
       }
     },
-    "node_modules/unicode-property-aliases-ecmascript": {
-      "version": "2.2.0",
-      "integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==",
+    "node_modules/ts-jest": {
+      "version": "29.4.14",
+      "integrity": "sha512-+943G6wCX5E3VpzTQhBGBFntCmdT+QAkTvUlp03edTONFBvqskuXPhpyX16xdUotO4P5HQKyppldSWjocoltLQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
+      "dependencies": {
+        "bs-logger": "^0.2.6",
+        "fast-json-stable-stringify": "^2.1.0",
+        "handlebars": "^4.7.9",
+        "json5": "^2.2.3",
+        "lodash.memoize": "^4.1.2",
+        "make-error": "^1.3.6",
+        "semver": "^7.8.5",
+        "type-fest": "^4.41.0",
+        "yargs-parser": "^21.1.1"
+      },
+      "bin": {
+        "ts-jest": "cli.js"
+      },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0-beta.0 <9",
+        "@jest/transform": "^29.0.0 || ^30.0.0",
+        "@jest/types": "^29.0.0 || ^30.0.0",
+        "babel-jest": "^29.0.0 || ^30.0.0",
+        "jest": "^29.0.0 || ^30.0.0",
+        "jest-util": "^29.0.0 || ^30.0.0",
+        "typescript": ">=4.3 <7"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@jest/transform": {
+          "optional": true
+        },
+        "@jest/types": {
+          "optional": true
+        },
+        "babel-jest": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jest-util": {
+          "optional": true
+        }
       }
     },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+    "node_modules/ts-jest/node_modules/semver": {
+      "version": "7.8.5",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=10"
       }
     },
-    "node_modules/unrs-resolver": {
-      "version": "1.12.2",
-      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
+    "node_modules/ts-jest/node_modules/type-fest": {
+      "version": "4.41.0",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
       "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "napi-postinstall": "^0.3.4"
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
       },
       "funding": {
-        "url": "https://opencollective.com/unrs-resolver"
-      },
-      "optionalDependencies": {
-        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
-        "@unrs/resolver-binding-android-arm64": "1.12.2",
-        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
-        "@unrs/resolver-binding-darwin-x64": "1.12.2",
-        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
-        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
-        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
-        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
-        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
-        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
-        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
-        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
-        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
-        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
-        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
-        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.3.4",
-      "integrity": "sha512-t8wonIOdQyOjtPd2VktlBu6QjTVTks6v8bSi7kd0r2Vll8TK1JYDZtRRdbmCHOAMphkZgrzK+L+vXK4pyZ8t4A==",
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "license": "MIT",
       "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
       },
       "bin": {
-        "update-browserslist-db": "cli.js"
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
       },
       "peerDependencies": {
-        "browserslist": ">= 4.21.0"
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
       }
     },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "punycode": "^2.1.0"
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
-        "node": ">= 0.4.0"
+        "node": ">=4"
       }
     },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tsyringe": {
+      "version": "4.10.0",
+      "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==",
       "dev": true,
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
       "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
       }
     },
-    "node_modules/v8-compile-cache-lib": {
-      "version": "3.0.1",
-      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+    "node_modules/tsyringe/node_modules/tslib": {
+      "version": "1.14.1",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true,
-      "license": "MIT"
+      "license": "0BSD",
+      "peer": true
     },
-    "node_modules/v8-to-istanbul": {
-      "version": "9.3.0",
-      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
+    "node_modules/tuf-js": {
+      "version": "4.1.0",
+      "integrity": "sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.12",
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^2.0.0"
+        "@tufjs/models": "4.1.0",
+        "debug": "^4.4.3",
+        "make-fetch-happen": "^15.0.1"
       },
       "engines": {
-        "node": ">=10.12.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/v8-to-istanbul/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
     },
-    "node_modules/validate-npm-package-name": {
-      "version": "6.0.2",
-      "integrity": "sha512-IUoow1YUtvoBBC06dXs8bR8B9vuA3aJfmQNKMoaPG/OFsPmoQvw8xh+6Ye25Gx9DQhoEom3Pcu9MKHerm/NpUQ==",
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": ">=4"
       }
     },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/vite": {
-      "version": "7.2.2",
-      "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
+    "node_modules/type-is": {
+      "version": "2.1.0",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.25.0",
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3",
-        "postcss": "^8.5.6",
-        "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.15"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
+        "content-type": "^2.0.0",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
       },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": ">= 18"
       },
       "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
-        "jiti": ">=1.21.0",
-        "less": "^4.0.0",
-        "lightningcss": "^1.21.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "jiti": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.12",
-      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.1.0",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.25.12",
-      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.5",
+      "integrity": "sha512-0FHJvLPqZ7KJzp17O13jfsAjsqazgrxBu2zEK95PmUz8lv2+GjRuxUInCr2Rk9Dms3ihN21zJ929ZO43yJ95QQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.10"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/typed-array-length": {
+      "version": "1.0.8",
+      "integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "possible-typed-array-names": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.10"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/typed-assert": {
+      "version": "1.0.9",
+      "integrity": "sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "peer": true
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=14.17"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "BSD-2-Clause",
       "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-arm": {
-      "version": "0.25.12",
-      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/undici": {
+      "version": "7.30.1",
+      "integrity": "sha512-03KrMbjIFDWQR5RNPrSw3bd1r12JpyFQl9/yxjUbJtqkjmllqC5lFjZh6ujeuJCKr8EOQvRW872Oy/az+nLYxg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">=20.18.1"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.1",
+      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "peer": true,
       "engines": {
-        "node": ">=18"
+        "node": ">=4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.12",
-      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "peer": true,
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.12",
-      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
-      "cpu": [
-        "loong64"
-      ],
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.2.1",
+      "integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "peer": true,
       "engines": {
-        "node": ">=18"
+        "node": ">=4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.12",
-      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
-      "cpu": [
-        "mips64el"
-      ],
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.2.0",
+      "integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "peer": true,
       "engines": {
-        "node": ">=18"
+        "node": ">=4"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.12",
-      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.12",
-      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
-      "cpu": [
-        "riscv64"
-      ],
+    "node_modules/unrs-resolver": {
+      "version": "1.12.2",
+      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
       "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "napi-postinstall": "^0.3.4"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
+        "@unrs/resolver-binding-android-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-x64": "1.12.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
+        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.12",
-      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
-      "cpu": [
-        "s390x"
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.4",
+      "integrity": "sha512-t8wonIOdQyOjtPd2VktlBu6QjTVTks6v8bSi7kd0r2Vll8TK1JYDZtRRdbmCHOAMphkZgrzK+L+vXK4pyZ8t4A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
       ],
-      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/linux-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
+      "peer": true
     },
-    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
+      "peer": true,
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.4.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
-      "cpu": [
-        "x64"
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
       ],
-      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+      "bin": {
+        "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
+      "license": "MIT"
     },
-    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/v8-to-istanbul": {
+      "version": "9.3.0",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^2.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=10.12.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.12",
-      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/v8-to-istanbul/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
+      "license": "MIT"
     },
-    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.12",
-      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/validate-npm-package-name": {
+      "version": "7.0.2",
+      "integrity": "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "license": "ISC",
       "engines": {
-        "node": ">=18"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/vite/node_modules/@esbuild/win32-x64": {
-      "version": "0.25.12",
-      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/vite/node_modules/esbuild": {
-      "version": "0.25.12",
-      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+    "node_modules/vite": {
+      "version": "7.3.7",
+      "integrity": "sha512-AHEzTORMbi7/7aXp7w7KZ5+DCUdSeLsJz0grY8xHpc9DHdYb0vQu6DqJfm2tOw3gDExNgPgnJTXxM6syYFHaCA==",
       "dev": true,
-      "hasInstallScript": true,
       "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
       "bin": {
-        "esbuild": "bin/esbuild"
+        "vite": "bin/vite.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.12",
-        "@esbuild/android-arm": "0.25.12",
-        "@esbuild/android-arm64": "0.25.12",
-        "@esbuild/android-x64": "0.25.12",
-        "@esbuild/darwin-arm64": "0.25.12",
-        "@esbuild/darwin-x64": "0.25.12",
-        "@esbuild/freebsd-arm64": "0.25.12",
-        "@esbuild/freebsd-x64": "0.25.12",
-        "@esbuild/linux-arm": "0.25.12",
-        "@esbuild/linux-arm64": "0.25.12",
-        "@esbuild/linux-ia32": "0.25.12",
-        "@esbuild/linux-loong64": "0.25.12",
-        "@esbuild/linux-mips64el": "0.25.12",
-        "@esbuild/linux-ppc64": "0.25.12",
-        "@esbuild/linux-riscv64": "0.25.12",
-        "@esbuild/linux-s390x": "0.25.12",
-        "@esbuild/linux-x64": "0.25.12",
-        "@esbuild/netbsd-arm64": "0.25.12",
-        "@esbuild/netbsd-x64": "0.25.12",
-        "@esbuild/openbsd-arm64": "0.25.12",
-        "@esbuild/openbsd-x64": "0.25.12",
-        "@esbuild/openharmony-arm64": "0.25.12",
-        "@esbuild/sunos-x64": "0.25.12",
-        "@esbuild/win32-arm64": "0.25.12",
-        "@esbuild/win32-ia32": "0.25.12",
-        "@esbuild/win32-x64": "0.25.12"
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
       }
     },
     "node_modules/w3c-xmlserializer": {
@@ -23643,8 +21632,8 @@
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.4",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "version": "2.5.1",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -23672,6 +21661,14 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/web-fragments": {
+      "version": "0.8.2",
+      "integrity": "sha512-VyvTGiTdnnUuUIHHKNxyuvODl44GCLhiiGNjWHhuuLaTN12ET1ICWX46Boa/ROCcOIff38FYlczPXHDDR8EpGg==",
+      "dev": true,
+      "dependencies": {
+        "htmlrewriter": "npm:wf-htmlrewriter@0.0.13"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "4.2.4",
       "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
@@ -23825,6 +21822,19 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/@types/express": {
+      "version": "4.17.25",
+      "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "^1"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/accepts": {
       "version": "1.3.8",
       "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
@@ -24723,6 +22733,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/xhr2": {
+      "version": "0.2.1",
+      "integrity": "sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
@@ -24878,8 +22897,8 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.1.13",
-      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "version": "4.6.6",
+      "integrity": "sha512-4UmzQUF5fxvfcYHlbjBmejU+w+hbDnWFx4aS8kBx7nPBHcO2SqPbpAG8snbdg+Xse4pRefR98hgjFgIMCI/UhA==",
       "dev": true,
       "license": "MIT",
       "funding": {
diff --git a/package.json b/package.json
index 227d0cf..7ca31bd 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
     "ng": "ng",
     "build": "ng build --configuration=production --project=ngx-ui-watchtower",
     "watch": "ng build ngx-ui-watchtower --watch --configuration development",
-    "lab": "node projects/watchtower-lab/server/lab-server.mjs",
-    "lab:build": "ng build watchtower-lab",
-    "e2e": "ng build watchtower-lab && playwright test",
+    "lab": "node projects/watchtower-lab/server/dev.mjs",
+    "lab:build": "ng build watchtower-lab-fragment && ng build watchtower-lab",
+    "e2e": "npm run lab:build && playwright test",
     "e2e:ui": "playwright test --ui",
     "test": "ng test --project=ngx-ui-watchtower",
     "test:coverage": "ng test --project=ngx-ui-watchtower --coverage --coverage-reporters text-summary --coverage-reporters lcov --json --output-file=./coverage/report.json",
@@ -18,25 +18,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~21.2.6",
-    "@angular/compiler": "~21.2.6",
-    "@angular/core": "~21.2.6",
-    "@angular/platform-browser": "~21.2.6",
-    "@angular/platform-browser-dynamic": "~21.2.6",
+    "@angular/common": "~21.2.26",
+    "@angular/compiler": "~21.2.26",
+    "@angular/core": "~21.2.26",
+    "@angular/platform-browser": "~21.2.26",
+    "@angular/platform-browser-dynamic": "~21.2.26",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "~0.16.1"
   },
   "devDependencies": {
     "@angular-builders/jest": "^21.0.4",
-    "@angular/animations": "~21.2.6",
-    "@angular/build": "~21.0.6",
-    "@angular/cli": "~21.0.6",
-    "@angular/compiler-cli": "~21.2.6",
-    "@angular/forms": "~21.2.6",
-    "@angular/router": "~21.2.6",
+    "@angular/animations": "~21.2.26",
+    "@angular/build": "~21.2.29",
+    "@angular/cli": "~21.2.29",
+    "@angular/compiler-cli": "~21.2.26",
+    "@angular/forms": "~21.2.26",
+    "@angular/platform-server": "~21.2.26",
+    "@angular/router": "~21.2.26",
+    "@angular/ssr": "~21.2.29",
     "@e965/xlsx": "^0.20.3",
     "@playwright/test": "^1.64.1",
+    "@types/express": "^5.0.6",
     "@types/jest": "^30.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.10",
@@ -52,6 +55,7 @@
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-standard": "^5.0.0",
+    "express": "^5.3.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
     "jest-preset-angular": "^17.0.0",
@@ -59,7 +63,8 @@
     "lodash-es": "^4.17.21",
     "ng-packagr": "~21.0.1",
     "prettier": "^3.4.2",
-    "typescript": "~5.9.3"
+    "typescript": "~5.9.3",
+    "web-fragments": "^0.8.2"
   },
   "engines": {
     "node": ">=22.0.0"
diff --git a/playwright.config.ts b/playwright.config.ts
index 18605f5..471d448 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -6,7 +6,8 @@ const VIEWPORT = { width: 1440, height: 900 };
 /**
  * The Watchtower Lab's suite: the real library and aws-rum-web in Chromium
  * and WebKit, against the lab's mock backend. `npm run e2e` builds the lab
- * first; the server below then serves it with the mock backend on one port.
+ * first; its server then renders the shell, serves the fragment and answers
+ * as the backend, on one port beside `npm run lab`'s.
  */
 export default defineConfig({
   testDir: 'playwright',
@@ -32,7 +33,8 @@ export default defineConfig({
     }
   ],
   webServer: {
-    command: 'node projects/watchtower-lab/server/lab-server.mjs --static',
+    command: 'node dist/watchtower-lab/server/server.mjs',
+    env: { PORT: '4390' },
     url: 'http://localhost:4390/__lab/state',
     reuseExistingServer: !process.env.CI
   }
diff --git a/playwright/fragment.spec.ts b/playwright/fragment.spec.ts
index 1fe2d66..10b5c3e 100644
--- a/playwright/fragment.spec.ts
+++ b/playwright/fragment.spec.ts
@@ -1,46 +1,77 @@
-import { expect, named, openLab, press, sessionStarted, test } from './lab';
+import {
+  expect,
+  FrameLocator,
+  Locator,
+  named,
+  openLab,
+  Page,
+  press,
+  sessionStarted,
+  test
+} from './lab';
 
-test('the fragment sends through the shell: once, under its own name, in the shell session', async ({
-  page,
-  backend
-}) => {
-  // The Event Inspector opens as a pane, beside the fragment rather than on it.
-  await page.addInitScript(() =>
-    localStorage.setItem(
-      'ngx-ui-watchtower.eventInspector',
-      JSON.stringify({ dock: 'right' })
-    )
-  );
-  await openLab(page, 'fragment');
-  await sessionStarted(page);
-  const fragment = page.frameLocator('iframe.lab-fragment');
-  await expect(fragment.locator('h1')).toHaveText('lab-fragment');
-  // Open first: the Event Inspector shows what arrives from then on.
-  await page.locator('.lab-header-button').click();
+/** The same fragment build, composed into the shell two ways. */
+const COMPOSITIONS: {
+  name: string;
+  path: string;
+  fragment: (page: Page) => FrameLocator | Locator;
+}[] = [
+  {
+    name: 'in a plain iframe',
+    path: 'fragment',
+    fragment: (page) => page.frameLocator('iframe.lab-fragment')
+  },
+  {
+    name: 'as a Web Fragment',
+    path: 'web-fragment',
+    // Its page is in the <web-fragment>'s shadow root, which locators pierce.
+    fragment: (page) => page.locator('web-fragment')
+  }
+];
 
-  await press(fragment, 'Track a BI event');
-  await press(fragment, 'Run a scenario');
-  await press(fragment, 'Log a warning');
+for (const { name, path, fragment: locate } of COMPOSITIONS) {
+  test(`the fragment ${name} sends through the shell: once, under its own name, in the shell's session`, async ({
+    page,
+    backend
+  }) => {
+    // The Event Inspector opens as a pane, beside the fragment rather than on it.
+    await page.addInitScript(() =>
+      localStorage.setItem(
+        'ngx-ui-watchtower.eventInspector',
+        JSON.stringify({ dock: 'right' })
+      )
+    );
+    await openLab(page, path);
+    await sessionStarted(page);
+    const fragment = locate(page);
+    await expect(fragment.locator('h1')).toHaveText('lab-fragment');
+    // Open first: the Event Inspector shows what arrives from then on.
+    await page.locator('.lab-header-button').click();
 
-  const events = await backend.rumUntil(
-    (e) =>
-      named(e, 'fragment_button_clicked').length > 0 &&
-      named(e, 'fragment-journey').length > 0
-  );
-  const clicked = named(events, 'fragment_button_clicked');
-  expect(clicked).toHaveLength(1);
-  expect(clicked[0].details.application).toBe('lab-fragment');
-  await expect(fragment.locator('p').first()).toContainText(
-    clicked[0].user.sessionId!.slice(0, 8)
-  );
+    await press(fragment, 'Track a BI event');
+    await press(fragment, 'Run a scenario');
+    await press(fragment, 'Log a warning');
 
-  await expect
-    .poll(async () => (await backend.logs()).map((r) => r.application))
-    .toContain('lab-fragment');
-  await press(fragment, 'Query its logs');
-  await expect(fragment.locator('.lab-readout')).toContainText(
-    'answered by the shell'
-  );
+    const events = await backend.rumUntil(
+      (e) =>
+        named(e, 'fragment_button_clicked').length > 0 &&
+        named(e, 'fragment-journey').length > 0
+    );
+    const clicked = named(events, 'fragment_button_clicked');
+    expect(clicked).toHaveLength(1);
+    expect(clicked[0].details.application).toBe('lab-fragment');
+    await expect(fragment.locator('p').first()).toContainText(
+      clicked[0].user.sessionId!.slice(0, 8)
+    );
 
-  await expect(page.locator('uwt-inspector')).toContainText('↪ lab-fragment');
-});
+    await expect
+      .poll(async () => (await backend.logs()).map((r) => r.application))
+      .toContain('lab-fragment');
+    await press(fragment, 'Query its logs');
+    await expect(fragment.locator('.lab-readout')).toContainText(
+      'answered by the shell'
+    );
+
+    await expect(page.locator('uwt-inspector')).toContainText('↪ lab-fragment');
+  });
+}
diff --git a/playwright/lab.ts b/playwright/lab.ts
index 27afffc..3d3165d 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -2,6 +2,7 @@ import {
   APIRequestContext,
   expect,
   FrameLocator,
+  Locator,
   Page,
   test as base
 } from '@playwright/test';
@@ -125,12 +126,16 @@ export const test = base.extend<{
 });
 
 export { expect };
-export type { Page };
+export type { FrameLocator, Locator, Page };
 
-/** Opens a lab page by its address and waits for it, e.g. `'bi?telemetry=off'`. */
+/**
+ * Opens a lab page by its address, e.g. `'bi?telemetry=off'`, and waits until
+ * it has hydrated: the server's page shows before it answers clicks.
+ */
 export async function openLab(page: Page, address: string): Promise<void> {
   await page.goto(`/${address}`);
-  await expect(page.locator('lab-root main h1')).toBeVisible();
+  await expect(page.locator('html[data-lab-ready]')).toHaveCount(1);
+  await expect(page.locator('lab-root main h1').first()).toBeVisible();
 }
 
 /** Waits until RUM has started a session, as the status bar shows; its id. */
@@ -145,12 +150,12 @@ export async function sessionStarted(page: Page): Promise<string> {
 /** Moves to another lab page within the app, keeping its state. */
 export async function navigate(page: Page, label: string): Promise<void> {
   await page.locator('.lab-nav').getByRole('link', { name: label }).click();
-  await expect(page.locator('lab-root main h1')).toHaveText(label);
+  await expect(page.locator('lab-root main h1').first()).toHaveText(label);
 }
 
 /** Presses the lab's button with exactly this label. */
 export async function press(
-  where: Page | FrameLocator,
+  where: Page | FrameLocator | Locator,
   label: string
 ): Promise<void> {
   await where.getByRole('button', { name: label, exact: true }).first().click();
diff --git a/playwright/ssr.spec.ts b/playwright/ssr.spec.ts
new file mode 100644
index 0000000..e881bd4
--- /dev/null
+++ b/playwright/ssr.spec.ts
@@ -0,0 +1,33 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+test('the server renders the page, and sends no telemetry itself', async ({
+  request,
+  backend
+}) => {
+  const html = await (await request.get('/bi')).text();
+
+  expect(html).toMatch(/<h1[^>]*>BI events<\/h1>/);
+  expect(html).toContain('class="lab-nav"');
+  // Annotations for hydration: the browser reuses this DOM.
+  expect(html).toMatch(/ngh="/);
+  expect(await backend.rum()).toEqual([]);
+  expect(await backend.logs()).toEqual([]);
+});
+
+test('the browser hydrates the rendered page, and telemetry starts there', async ({
+  page,
+  backend
+}) => {
+  const messages: string[] = [];
+  page.on('console', (m) => messages.push(m.text()));
+
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+  // Angular reports, in development builds, what it hydrated.
+  await expect
+    .poll(() => messages.find((m) => m.startsWith('Angular hydrated')))
+    .toBeTruthy();
+
+  await press(page, 'Track a click');
+  await backend.rumUntil((e) => named(e, 'lab_button_clicked').length > 0);
+});
diff --git a/playwright/tabs.spec.ts b/playwright/tabs.spec.ts
new file mode 100644
index 0000000..83696a1
--- /dev/null
+++ b/playwright/tabs.spec.ts
@@ -0,0 +1,37 @@
+import { expect, named, openLab, press, test } from './lab';
+
+test("two tabs: each fragment reaches its own tab's shell, over that tab's channel", async ({
+  context,
+  backend
+}) => {
+  // Both Event Inspectors open as panes, beside their fragments.
+  await context.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
+  const tabs = [await context.newPage(), await context.newPage()];
+  for (const tab of tabs) {
+    await openLab(tab, 'web-fragment');
+    await expect(tab.locator('web-fragment h1')).toHaveText('lab-fragment');
+    await tab.locator('.lab-header-button').click();
+    await expect(tab.locator('uwt-inspector')).toBeVisible();
+  }
+  const [first, second] = tabs;
+
+  await press(second.locator('web-fragment'), 'Track a BI event');
+
+  // The fragment found its shell's channel on `window.top`, from inside the
+  // Web Fragment's hidden iframe: only its own tab saw the event.
+  await expect(second.locator('uwt-inspector')).toContainText(
+    'fragment_button_clicked'
+  );
+  const events = await backend.rumUntil(
+    (e) => named(e, 'fragment_button_clicked').length > 0
+  );
+  expect(named(events, 'fragment_button_clicked')).toHaveLength(1);
+  await expect(first.locator('uwt-inspector')).not.toContainText(
+    'fragment_button_clicked'
+  );
+});
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index c33d40e..05bd1f1 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2439,6 +2439,13 @@ bootstrapApplication(FragmentRoot, {
 | Channel name     | **Must match.** The default (`'ngx-ui-watchtower'`) needs no argument; if the shell passes a custom name, pass the same — `provideUwtTelemetrySink('broadcast', { channelName })` |
 | `application`    | **Should differ** per fragment. The forwarding sink stamps its realm's `application`, `environment` and `appVersion` onto every event, so you can tell fragments apart            |
 
+**An Angular fragment served as a Web Fragment** must load its files by
+absolute URL. Its scripts run in the hidden iframe, whose location is the
+host page's, so a relative `main.js` in its `index.html` resolves against the
+shell's address — and loads the shell's own bundle. Build it with `deployUrl`
+(and `baseHref`) set to the prefix the gateway routes to it, such as
+`/_fragment/cart/`. The Watchtower Lab's fragment is built this way.
+
 A forwarded **error** has no metadata to carry that origin in —
 `recordError` takes none — so the RUM sink folds a differing origin into the
 error's name instead (`[cart] TypeError`).
diff --git a/projects/watchtower-lab/src/fragment/fragment.component.ts b/projects/watchtower-lab-fragment/src/fragment.component.ts
similarity index 98%
rename from projects/watchtower-lab/src/fragment/fragment.component.ts
rename to projects/watchtower-lab-fragment/src/fragment.component.ts
index 93d9945..74d709e 100644
--- a/projects/watchtower-lab/src/fragment/fragment.component.ts
+++ b/projects/watchtower-lab-fragment/src/fragment.component.ts
@@ -16,7 +16,7 @@ import { CpsButtonComponent } from 'cps-ui-kit';
 const CARLA = '5c8e2f14-1b7d-4a96-9e3c-8d2b7f4a6c10';
 
 @Component({
-  selector: 'lab-root',
+  selector: 'lab-fragment-root',
   imports: [CpsButtonComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
diff --git a/projects/watchtower-lab-fragment/src/fragment.config.ts b/projects/watchtower-lab-fragment/src/fragment.config.ts
new file mode 100644
index 0000000..3014ad0
--- /dev/null
+++ b/projects/watchtower-lab-fragment/src/fragment.config.ts
@@ -0,0 +1,48 @@
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection
+} from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+  UWT_BROADCAST_CHANNEL,
+  UWT_DEFAULT_BROADCAST_CHANNEL,
+  provideUwtTelemetry,
+  provideUwtTelemetrySink,
+  withLogging
+} from '@absaoss-cps/ngx-ui-watchtower';
+
+declare global {
+  interface Window {
+    __uwtTelemetryChannel?: string;
+  }
+}
+
+/**
+ * The shell's channel for this tab, published on the top-level window — as
+ * a plain iframe or a Web Fragment, the fragment shares the shell's origin,
+ * so `window.top` reaches it. On its own, the default channel.
+ */
+function shellChannel(): string {
+  try {
+    return window.top?.__uwtTelemetryChannel ?? UWT_DEFAULT_BROADCAST_CHANNEL;
+  } catch {
+    return UWT_DEFAULT_BROADCAST_CHANNEL;
+  }
+}
+
+/**
+ * The fragment: zoneless, and forwarding everything — events, log records,
+ * identity — over the shell's channel, to the shell, which records it.
+ */
+export const fragmentConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideAnimations(),
+    provideUwtTelemetry(
+      { application: 'lab-fragment', environment: 'lab', version: '1.0.0' },
+      withLogging({ minLevel: 'log', mirrorErrorsToRum: true })
+    ),
+    provideUwtTelemetrySink('broadcast'),
+    { provide: UWT_BROADCAST_CHANNEL, useFactory: shellChannel }
+  ]
+};
diff --git a/projects/watchtower-lab-fragment/src/index.html b/projects/watchtower-lab-fragment/src/index.html
new file mode 100644
index 0000000..3b06f42
--- /dev/null
+++ b/projects/watchtower-lab-fragment/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>lab-fragment · Watchtower Lab</title>
+    <!-- The gateway's prefix for this fragment's files. -->
+    <base href="/_fragment/lab-fragment/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <lab-fragment-root></lab-fragment-root>
+  </body>
+</html>
diff --git a/projects/watchtower-lab-fragment/src/main.ts b/projects/watchtower-lab-fragment/src/main.ts
new file mode 100644
index 0000000..6dc07c4
--- /dev/null
+++ b/projects/watchtower-lab-fragment/src/main.ts
@@ -0,0 +1,11 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { FragmentComponent } from './fragment.component';
+import { fragmentConfig } from './fragment.config';
+
+/**
+ * The lab's fragment: a second app, shown by the shell in a plain iframe and
+ * as a Web Fragment. Either way it runs in its own JavaScript realm.
+ */
+bootstrapApplication(FragmentComponent, fragmentConfig).catch(
+  (error: unknown) => console.error(error)
+);
diff --git a/projects/watchtower-lab-fragment/src/styles.scss b/projects/watchtower-lab-fragment/src/styles.scss
new file mode 100644
index 0000000..3eb7a6b
--- /dev/null
+++ b/projects/watchtower-lab-fragment/src/styles.scss
@@ -0,0 +1,2 @@
+// The same base as the shell's.
+@use '../../watchtower-lab/src/lab-base';
diff --git a/projects/watchtower-lab-fragment/src/telemetry.schema.ts b/projects/watchtower-lab-fragment/src/telemetry.schema.ts
new file mode 100644
index 0000000..3cd23fc
--- /dev/null
+++ b/projects/watchtower-lab-fragment/src/telemetry.schema.ts
@@ -0,0 +1,18 @@
+// Every scenario, step, BI event and logger name the fragment uses.
+declare module '@absaoss-cps/ngx-ui-watchtower' {
+  interface UwtScenarioNames {
+    'fragment-journey': true;
+  }
+  interface UwtScenarioSteps {
+    fetch: true;
+    render: true;
+  }
+  interface UwtBIEventNames {
+    fragment_button_clicked: true;
+  }
+  interface UwtLoggerNames {
+    fragment: true;
+  }
+}
+
+export {};
diff --git a/projects/watchtower-lab-fragment/tsconfig.app.json b/projects/watchtower-lab-fragment/tsconfig.app.json
new file mode 100644
index 0000000..9dff14a
--- /dev/null
+++ b/projects/watchtower-lab-fragment/tsconfig.app.json
@@ -0,0 +1,10 @@
+/* The Watchtower Lab's fragment: a second app, built from the library's source. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/watchtower-lab-fragment",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/projects/watchtower-lab/proxy.conf.json b/projects/watchtower-lab/proxy.conf.json
deleted file mode 100644
index 2da8746..0000000
--- a/projects/watchtower-lab/proxy.conf.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "/rum": { "target": "http://localhost:4380" },
-  "/appmonitors": { "target": "http://localhost:4380" },
-  "/api": { "target": "http://localhost:4380" },
-  "/__lab": { "target": "http://localhost:4380" }
-}
diff --git a/projects/watchtower-lab/server/dev.mjs b/projects/watchtower-lab/server/dev.mjs
new file mode 100644
index 0000000..0d2ae17
--- /dev/null
+++ b/projects/watchtower-lab/server/dev.mjs
@@ -0,0 +1,27 @@
+// `npm run lab`: the Watchtower Lab in development. The fragment is rebuilt on
+// every change, and `ng serve` runs the shell with server/server.ts — the
+// mock backend, the fragment's gateway and server-side rendering — on
+// http://localhost:4280. The fragment's pages answer 503 until its first
+// build is done.
+import { spawn } from 'node:child_process';
+
+const ng = (...args) =>
+  spawn('npx', ['ng', ...args], {
+    stdio: 'inherit',
+    shell: process.platform === 'win32'
+  });
+
+const children = [
+  ng('build', 'watchtower-lab-fragment', '--watch'),
+  ng('serve', 'watchtower-lab')
+];
+
+const stop = () => children.forEach((child) => child.kill());
+process.on('SIGINT', stop);
+process.on('SIGTERM', stop);
+for (const child of children) {
+  child.on('exit', (code) => {
+    stop();
+    process.exitCode ||= code ?? 0;
+  });
+}
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
new file mode 100644
index 0000000..bb3a08e
--- /dev/null
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -0,0 +1,239 @@
+// The lab's mock backend. It stands in for everything the library talks to,
+// so the real aws-rum-web runs fully offline:
+//
+//   GET  /rum/init              mock RUM broker: app monitor config and fake
+//                               credentials; its mode decides the answer
+//   POST /appmonitors/:id       mock RUM dataplane: keeps every PutRumEvents
+//                               batch, beacons included
+//   POST /api/logs              mock log backend: stores records
+//   GET  /api/logs?…            answers the log provider's query()
+//   GET  /api/data?delay&status a slow or failing endpoint, for HTTP scenarios
+//   GET  /__lab/rum, /__lab/logs, /__lab/state
+//   POST /__lab/reset, /__lab/broker-mode, /__lab/telemetries    test hooks
+import { Request, Router } from 'express';
+import { promised } from './promised';
+import { gunzipSync } from 'node:zlib';
+
+const BROKER_MODES = ['ok', 'null', 'fail', 'short-expiry'];
+const TELEMETRIES = ['errors', 'performance', 'interaction', 'http', 'replay'];
+const LEVELS: Record<string, number> = { log: 0, warn: 1, error: 2 };
+
+interface LogRecord {
+  level: string;
+  logger?: string;
+  correlationId?: string;
+  timestamp?: string;
+}
+
+interface ReceivedEvent {
+  receivedAt: string;
+  batch: number;
+  user: Record<string, unknown>;
+  type: string;
+  metadata: unknown;
+  details: unknown;
+}
+
+// `telemetries: null` leaves them out of the broker's answer: the library's
+// default applies.
+const state: {
+  brokerMode: string;
+  telemetries: string[] | null;
+  batches: number;
+  rum: ReceivedEvent[];
+  logs: LogRecord[];
+} = { brokerMode: 'ok', telemetries: null, batches: 0, rum: [], logs: [] };
+
+/**
+ * The body as text, gunzipped if RUM compressed it. A page that closes while
+ * sending leaves an empty one, which nothing keeps.
+ */
+function readBody(req: Request): Promise<string> {
+  return new Promise((resolve) => {
+    const chunks: Buffer[] = [];
+    req.on('data', (chunk: Buffer) => chunks.push(chunk));
+    req.on('end', () => {
+      const raw = Buffer.concat(chunks);
+      const gzip =
+        req.headers['content-encoding'] === 'gzip' ||
+        (raw[0] === 0x1f && raw[1] === 0x8b);
+      resolve((gzip ? gunzipSync(raw) : raw).toString('utf8'));
+    });
+    req.on('error', () => resolve(''));
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function parseJson(text: string | undefined): any {
+  try {
+    return JSON.parse(text ?? '');
+  } catch {
+    return undefined;
+  }
+}
+
+/** What the broker answers, by mode. `null` disables RUM for the page. */
+function broker(req: Request) {
+  const origin = `${req.protocol}://${req.get('x-forwarded-host') ?? req.get('host')}`;
+  const minutes = state.brokerMode === 'short-expiry' ? 5 + 5 / 60 : 60;
+  return {
+    enabled: state.brokerMode !== 'null',
+    config: {
+      applicationId: '00000000-0000-4000-8000-00000000a1ab',
+      applicationVersion: '1.0.0',
+      region: 'eu-west-1',
+      endpoint: origin,
+      signing: false,
+      compressionStrategy: { enabled: false },
+      sessionSampleRate: 1,
+      // RUM stops recording a session after 200 events by default, and the
+      // session outlives reloads in a cookie: one burst from the Event
+      // Inspector page would silence the lab for half an hour.
+      sessionEventLimit: 0,
+      dispatchInterval: 2000,
+      allowCookies: true,
+      // Names only: the lab's credentials provider adds their options.
+      ...(state.telemetries ? { telemetries: state.telemetries } : {})
+    },
+    // Never used to sign — signing is off — but the sink schedules its
+    // refresh from their expiry, which short-expiry relies on.
+    credentials: {
+      accessKeyId: 'LAB-FAKE-KEY',
+      secretAccessKey: 'lab-fake-secret',
+      sessionToken: 'lab-fake-token',
+      expiration: new Date(Date.now() + minutes * 60_000).toISOString()
+    }
+  };
+}
+
+function keepBatch(body: string): void {
+  const batch = parseJson(body);
+  if (!batch) {
+    return;
+  }
+  state.batches++;
+  for (const event of batch.RumEvents ?? []) {
+    state.rum.push({
+      receivedAt: new Date().toISOString(),
+      batch: state.batches,
+      user: batch.UserDetails ?? {},
+      type: event.type,
+      metadata: parseJson(event.metadata) ?? {},
+      details: parseJson(event.details) ?? {}
+    });
+  }
+}
+
+function queryLogs(query: Request['query']): LogRecord[] {
+  const param = (name: string) =>
+    typeof query[name] === 'string' ? query[name] : undefined;
+  const minLevel = param('minLevel');
+  const limit = Number(param('limit')) || Infinity;
+  return state.logs
+    .filter(
+      (r) =>
+        (!param('logger') || r.logger === param('logger')) &&
+        (!param('correlationId') ||
+          r.correlationId === param('correlationId')) &&
+        (!minLevel || LEVELS[r.level] >= LEVELS[minLevel]) &&
+        (!param('from') || (r.timestamp ?? '') >= param('from')!) &&
+        (!param('to') || (r.timestamp ?? '') <= param('to')!)
+    )
+    .slice(-limit);
+}
+
+export const labBackend = Router();
+
+labBackend.get('/rum/init', (req, res) => {
+  if (state.brokerMode === 'fail') {
+    res.status(500).json({ error: 'broker unavailable (lab mode: fail)' });
+  } else {
+    res.json(broker(req));
+  }
+});
+
+labBackend.post(
+  '/appmonitors/:id',
+  promised(async (req, res) => {
+    keepBatch(await readBody(req));
+    res.json({});
+  })
+);
+
+labBackend
+  .route('/api/logs')
+  .post(
+    promised(async (req, res) => {
+      const body = parseJson(await readBody(req));
+      state.logs.push(...(Array.isArray(body) ? body : [body]).filter(Boolean));
+      res.status(204).end();
+    })
+  )
+  .get((req, res) => {
+    res.json(queryLogs(req.query));
+  });
+
+labBackend.get(
+  '/api/data',
+  promised(async (req, res) => {
+    const delay = Math.min(Number(req.query.delay) || 0, 30_000);
+    const status = Number(req.query.status) || 200;
+    await new Promise((resolve) => setTimeout(resolve, delay));
+    res.status(status).json({ status, delay, at: new Date().toISOString() });
+  })
+);
+
+labBackend.get('/__lab/rum', (_req, res) => {
+  res.json({ batches: state.batches, events: state.rum });
+});
+
+labBackend.get('/__lab/logs', (_req, res) => {
+  res.json(state.logs);
+});
+
+labBackend.get('/__lab/state', (_req, res) => {
+  res.json({
+    brokerMode: state.brokerMode,
+    modes: BROKER_MODES,
+    telemetries: state.telemetries
+  });
+});
+
+labBackend.post('/__lab/reset', (_req, res) => {
+  Object.assign(state, { batches: 0, rum: [], logs: [] });
+  res.status(204).end();
+});
+
+labBackend.post(
+  '/__lab/broker-mode',
+  promised(async (req, res) => {
+    const mode = parseJson(await readBody(req))?.mode;
+    if (!BROKER_MODES.includes(mode)) {
+      res
+        .status(400)
+        .json({ error: `mode must be one of ${BROKER_MODES.join(', ')}` });
+      return;
+    }
+    state.brokerMode = mode;
+    res.json({ brokerMode: mode });
+  })
+);
+
+labBackend.post(
+  '/__lab/telemetries',
+  promised(async (req, res) => {
+    const telemetries = parseJson(await readBody(req))?.telemetries;
+    const valid =
+      telemetries === null ||
+      (Array.isArray(telemetries) &&
+        telemetries.every((t) => TELEMETRIES.includes(t)));
+    if (!valid) {
+      res.status(400).json({
+        error: `telemetries must be null or some of ${TELEMETRIES.join(', ')}`
+      });
+      return;
+    }
+    state.telemetries = telemetries;
+    res.json({ telemetries });
+  })
+);
diff --git a/projects/watchtower-lab/server/lab-fragments.ts b/projects/watchtower-lab/server/lab-fragments.ts
new file mode 100644
index 0000000..6326ddb
--- /dev/null
+++ b/projects/watchtower-lab/server/lab-fragments.ts
@@ -0,0 +1,82 @@
+// The lab's fragment, served two ways from its one build
+// (`ng build watchtower-lab-fragment`):
+//
+//   /web-fragment, /_fragment/lab-fragment/…   the Web Fragments gateway
+//   /fragment-frame/                           its page, for a plain iframe
+import { Router } from 'express';
+import { promised } from './promised';
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { extname, join, normalize } from 'node:path';
+import { FragmentGateway } from 'web-fragments/gateway';
+import { getNodeMiddleware } from 'web-fragments/gateway/node';
+
+// Relative to where the lab runs from — the repository's root — both under
+// `ng serve` and as the built server.
+const FRAGMENT_DIR = join(
+  process.cwd(),
+  'dist/watchtower-lab-fragment/browser'
+);
+const FRAGMENT_INDEX = join(FRAGMENT_DIR, 'index.html');
+
+const CONTENT_TYPES: Record<string, string> = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.svg': 'image/svg+xml',
+  '.woff2': 'font/woff2',
+  '.map': 'application/json'
+};
+
+/**
+ * The fragment's endpoint, in-process: a file of its build, or its
+ * index.html for any other path — the page the gateway hands the
+ * `<web-fragment>` element.
+ */
+const fragmentEndpoint: typeof fetch = async (input) => {
+  const url = new URL(input instanceof Request ? input.url : String(input));
+  const path = url.pathname.replace(/^\/_fragment\/lab-fragment\//, '/');
+  const file = join(FRAGMENT_DIR, normalize(path));
+  const found =
+    !!extname(file) && file.startsWith(FRAGMENT_DIR) && existsSync(file);
+  const served = found ? file : FRAGMENT_INDEX;
+  if (!existsSync(served)) {
+    return new Response('Build the fragment: npm run lab:build', {
+      status: 503
+    });
+  }
+  return new Response(await readFile(served), {
+    headers: {
+      'content-type':
+        CONTENT_TYPES[extname(served)] ?? 'application/octet-stream'
+    }
+  });
+};
+
+const gateway = new FragmentGateway();
+gateway.registerFragment({
+  fragmentId: 'lab-fragment',
+  // Loaded by the <web-fragment> element once the shell runs, rather than
+  // pierced into the shell's server-rendered page.
+  piercing: false,
+  routePatterns: ['/web-fragment/:_*', '/_fragment/lab-fragment/:_*'],
+  endpoint: fragmentEndpoint
+});
+
+export const labFragments = Router();
+
+const gatewayMiddleware = getNodeMiddleware(gateway);
+labFragments.use((req, res, next) => {
+  gatewayMiddleware(req, res, next).catch(next);
+});
+
+labFragments.get(
+  ['/fragment-frame', '/fragment-frame/'],
+  promised(async (_req, res) => {
+    if (!existsSync(FRAGMENT_INDEX)) {
+      res.status(503).send('Build the fragment: npm run lab:build');
+      return;
+    }
+    res.type('html').send(await readFile(FRAGMENT_INDEX));
+  })
+);
diff --git a/projects/watchtower-lab/server/lab-server.mjs b/projects/watchtower-lab/server/lab-server.mjs
deleted file mode 100644
index cdb6666..0000000
--- a/projects/watchtower-lab/server/lab-server.mjs
+++ /dev/null
@@ -1,281 +0,0 @@
-// The Watchtower Lab's mock backend, with no dependencies. It stands in for
-// everything the library talks to, so the real aws-rum-web runs fully
-// offline:
-//
-//   GET  /rum/init              mock RUM broker: app monitor config and fake
-//                               credentials; its mode decides the answer
-//   POST /appmonitors/:id       mock RUM dataplane: keeps every PutRumEvents
-//                               batch, beacons included
-//   POST /api/logs              mock log backend: stores records
-//   GET  /api/logs?…            answers the log provider's query()
-//   GET  /api/data?delay&status a slow or failing endpoint, for HTTP scenarios
-//   GET  /__lab/rum, /__lab/logs, /__lab/state
-//   POST /__lab/reset, /__lab/broker-mode, /__lab/telemetries    test hooks
-//
-// `npm run lab` runs this and `ng serve watchtower-lab`, which proxies these
-// paths here, so the app and this server share an origin. Pass
-// `--server-only` to start just this server, or `--static` to serve the
-// built lab (`npm run lab:build`) from here too, as the Playwright suite does.
-import { spawn } from 'node:child_process';
-import { existsSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
-import http from 'node:http';
-import { extname, join, normalize } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { gunzipSync } from 'node:zlib';
-
-const STATIC = process.argv.includes('--static');
-// Its own port when static, so the suite can run beside `npm run lab`.
-const PORT = STATIC ? 4390 : 4380;
-const STATIC_DIR = fileURLToPath(
-  new URL('../../../dist/watchtower-lab/browser/', import.meta.url)
-);
-const CONTENT_TYPES = {
-  '.html': 'text/html',
-  '.js': 'text/javascript',
-  '.css': 'text/css',
-  '.svg': 'image/svg+xml',
-  '.woff2': 'font/woff2',
-  '.woff': 'font/woff',
-  '.ttf': 'font/ttf',
-  '.map': 'application/json',
-  '.ico': 'image/x-icon',
-  '.png': 'image/png'
-};
-const BROKER_MODES = ['ok', 'null', 'fail', 'short-expiry'];
-const TELEMETRIES = ['errors', 'performance', 'interaction', 'http', 'replay'];
-const LEVELS = { log: 0, warn: 1, error: 2 };
-
-// `telemetries: null` leaves them out of the broker's answer: the library's
-// default applies.
-const state = {
-  brokerMode: 'ok',
-  telemetries: null,
-  batches: 0,
-  rum: [],
-  logs: []
-};
-
-function readBody(req) {
-  return new Promise((resolve, reject) => {
-    const chunks = [];
-    req.on('data', (chunk) => chunks.push(chunk));
-    req.on('end', () => {
-      const raw = Buffer.concat(chunks);
-      const gzip =
-        req.headers['content-encoding'] === 'gzip' ||
-        (raw[0] === 0x1f && raw[1] === 0x8b);
-      resolve((gzip ? gunzipSync(raw) : raw).toString('utf8'));
-    });
-    req.on('error', reject);
-  });
-}
-
-function send(res, status, body) {
-  res.writeHead(status, { 'content-type': 'application/json' });
-  res.end(body === undefined ? '' : JSON.stringify(body));
-}
-
-/** A file of the built lab, or its index.html for the app's own routes. */
-async function serveStatic(res, path) {
-  const file = join(STATIC_DIR, normalize(path));
-  if (!extname(file)) {
-    res.writeHead(200, { 'content-type': 'text/html' });
-    return res.end(await readFile(join(STATIC_DIR, 'index.html')));
-  }
-  if (!file.startsWith(STATIC_DIR) || !existsSync(file)) {
-    return send(res, 404, { error: `no file ${path}` });
-  }
-  res.writeHead(200, {
-    'content-type': CONTENT_TYPES[extname(file)] ?? 'application/octet-stream'
-  });
-  return res.end(await readFile(file));
-}
-
-function parseJson(text) {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return undefined;
-  }
-}
-
-/** What the broker answers, by mode. `null` disables RUM for the page. */
-function broker(req) {
-  const origin = `http://${req.headers['x-forwarded-host'] ?? req.headers.host}`;
-  const minutes = state.brokerMode === 'short-expiry' ? 5 + 5 / 60 : 60;
-  return {
-    enabled: state.brokerMode !== 'null',
-    config: {
-      applicationId: '00000000-0000-4000-8000-00000000a1ab',
-      applicationVersion: '1.0.0',
-      region: 'eu-west-1',
-      endpoint: origin,
-      signing: false,
-      compressionStrategy: { enabled: false },
-      sessionSampleRate: 1,
-      // RUM stops recording a session after 200 events by default, and the
-      // session outlives reloads in a cookie: one burst from the Event
-      // Inspector page would silence the lab for half an hour.
-      sessionEventLimit: 0,
-      dispatchInterval: 2000,
-      allowCookies: true,
-      // Names only: the lab's credentials provider adds their options.
-      ...(state.telemetries ? { telemetries: state.telemetries } : {})
-    },
-    // Never used to sign — signing is off — but the sink schedules its
-    // refresh from their expiry, which short-expiry relies on.
-    credentials: {
-      accessKeyId: 'LAB-FAKE-KEY',
-      secretAccessKey: 'lab-fake-secret',
-      sessionToken: 'lab-fake-token',
-      expiration: new Date(Date.now() + minutes * 60_000).toISOString()
-    }
-  };
-}
-
-function keepBatch(body) {
-  const batch = parseJson(body);
-  if (!batch) {
-    return;
-  }
-  state.batches++;
-  for (const event of batch.RumEvents ?? []) {
-    state.rum.push({
-      receivedAt: new Date().toISOString(),
-      batch: state.batches,
-      user: batch.UserDetails ?? {},
-      type: event.type,
-      metadata: parseJson(event.metadata) ?? {},
-      details: parseJson(event.details) ?? {}
-    });
-  }
-}
-
-function queryLogs(params) {
-  const minLevel = params.get('minLevel');
-  const limit = Number(params.get('limit')) || Infinity;
-  return state.logs
-    .filter(
-      (r) =>
-        (!params.get('logger') || r.logger === params.get('logger')) &&
-        (!params.get('correlationId') ||
-          r.correlationId === params.get('correlationId')) &&
-        (!minLevel || LEVELS[r.level] >= LEVELS[minLevel]) &&
-        (!params.get('from') || r.timestamp >= params.get('from')) &&
-        (!params.get('to') || r.timestamp <= params.get('to'))
-    )
-    .slice(-limit);
-}
-
-const server = http.createServer(async (req, res) => {
-  const url = new URL(req.url, 'http://lab');
-  const path = url.pathname;
-  try {
-    if (req.method === 'GET' && path === '/rum/init') {
-      return state.brokerMode === 'fail'
-        ? send(res, 500, { error: 'broker unavailable (lab mode: fail)' })
-        : send(res, 200, broker(req));
-    }
-    if (req.method === 'POST' && path.startsWith('/appmonitors/')) {
-      keepBatch(await readBody(req));
-      return send(res, 200, {});
-    }
-    if (path === '/api/logs') {
-      if (req.method === 'POST') {
-        const body = parseJson(await readBody(req));
-        state.logs.push(
-          ...(Array.isArray(body) ? body : [body]).filter(Boolean)
-        );
-        return send(res, 204);
-      }
-      return send(res, 200, queryLogs(url.searchParams));
-    }
-    if (path === '/api/data') {
-      const delay = Math.min(
-        Number(url.searchParams.get('delay')) || 0,
-        30_000
-      );
-      const status = Number(url.searchParams.get('status')) || 200;
-      await new Promise((resolve) => setTimeout(resolve, delay));
-      return send(res, status, { status, delay, at: new Date().toISOString() });
-    }
-    if (path === '/__lab/rum') {
-      return send(res, 200, { batches: state.batches, events: state.rum });
-    }
-    if (path === '/__lab/logs') {
-      return send(res, 200, state.logs);
-    }
-    if (path === '/__lab/state') {
-      return send(res, 200, {
-        brokerMode: state.brokerMode,
-        modes: BROKER_MODES,
-        telemetries: state.telemetries
-      });
-    }
-    if (req.method === 'POST' && path === '/__lab/reset') {
-      Object.assign(state, { batches: 0, rum: [], logs: [] });
-      return send(res, 204);
-    }
-    if (req.method === 'POST' && path === '/__lab/broker-mode') {
-      const mode = parseJson(await readBody(req))?.mode;
-      if (!BROKER_MODES.includes(mode)) {
-        return send(res, 400, {
-          error: `mode must be one of ${BROKER_MODES.join(', ')}`
-        });
-      }
-      state.brokerMode = mode;
-      return send(res, 200, { brokerMode: mode });
-    }
-    if (req.method === 'POST' && path === '/__lab/telemetries') {
-      const telemetries = parseJson(await readBody(req))?.telemetries;
-      const valid =
-        telemetries === null ||
-        (Array.isArray(telemetries) &&
-          telemetries.every((t) => TELEMETRIES.includes(t)));
-      if (!valid) {
-        return send(res, 400, {
-          error: `telemetries must be null or some of ${TELEMETRIES.join(', ')}`
-        });
-      }
-      state.telemetries = telemetries;
-      return send(res, 200, { telemetries });
-    }
-    if (STATIC && req.method === 'GET') {
-      return serveStatic(res, path);
-    }
-    return send(res, 404, { error: `no lab route for ${req.method} ${path}` });
-  } catch (error) {
-    return send(res, 500, { error: String(error) });
-  }
-});
-
-if (STATIC && !existsSync(join(STATIC_DIR, 'index.html'))) {
-  console.error('[watchtower-lab] no built lab: run `npm run lab:build` first');
-  process.exit(1);
-}
-
-server.listen(PORT, () => {
-  console.log(
-    STATIC
-      ? `[watchtower-lab] built lab and mock backend on http://localhost:${PORT}`
-      : `[watchtower-lab] mock backend on http://localhost:${PORT}`
-  );
-});
-
-if (!STATIC && !process.argv.includes('--server-only')) {
-  const ng = spawn('npx', ['ng', 'serve', 'watchtower-lab'], {
-    stdio: 'inherit',
-    shell: process.platform === 'win32'
-  });
-  const stop = () => {
-    ng.kill();
-    server.close();
-  };
-  process.on('SIGINT', stop);
-  process.on('SIGTERM', stop);
-  ng.on('exit', (code) => {
-    server.close();
-    process.exitCode = code ?? 0;
-  });
-}
diff --git a/projects/watchtower-lab/server/promised.ts b/projects/watchtower-lab/server/promised.ts
new file mode 100644
index 0000000..148a042
--- /dev/null
+++ b/projects/watchtower-lab/server/promised.ts
@@ -0,0 +1,14 @@
+import { NextFunction, Request, RequestHandler, Response } from 'express';
+
+/**
+ * An async route handler, as Express takes one. Built with zone.js, an async
+ * function returns zone's own promise, which Express warns about; this
+ * returns nothing and passes a failure to `next`.
+ */
+export function promised(
+  handler: (req: Request, res: Response) => Promise<void>
+): RequestHandler {
+  return (req: Request, res: Response, next: NextFunction) => {
+    handler(req, res).catch(next);
+  };
+}
diff --git a/projects/watchtower-lab/server/server.ts b/projects/watchtower-lab/server/server.ts
new file mode 100644
index 0000000..0abdd01
--- /dev/null
+++ b/projects/watchtower-lab/server/server.ts
@@ -0,0 +1,49 @@
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse
+} from '@angular/ssr/node';
+import express from 'express';
+import { join } from 'node:path';
+import { labBackend } from './lab-backend';
+import { labFragments } from './lab-fragments';
+
+/**
+ * The Watchtower Lab's server: the mock backend, the fragment and the
+ * server-rendered shell, all on one origin. `ng serve` runs it in
+ * development; the suite runs the built `server.mjs`.
+ */
+const app = express();
+const browserDistFolder = join(import.meta.dirname, '../browser');
+const angularApp = new AngularNodeAppEngine();
+
+app.use(labBackend);
+app.use(labFragments);
+app.use(
+  express.static(browserDistFolder, {
+    index: false,
+    redirect: false
+  })
+);
+app.use((req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next()
+    )
+    .catch(next);
+});
+
+if (isMainModule(import.meta.url)) {
+  const port = process.env.PORT || 4280;
+  app.listen(port, (error) => {
+    if (error) {
+      throw error;
+    }
+    console.log(`[watchtower-lab] on http://localhost:${port}`);
+  });
+}
+
+/** Used by `ng serve` and the build. */
+export const reqHandler = createNodeRequestHandler(app);
diff --git a/projects/watchtower-lab/src/_lab-base.scss b/projects/watchtower-lab/src/_lab-base.scss
new file mode 100644
index 0000000..6e3e6e2
--- /dev/null
+++ b/projects/watchtower-lab/src/_lab-base.scss
@@ -0,0 +1,99 @@
+// What the lab's shell and fragment share. cps-ui-kit's global styles come
+// without their primeicons import: the lab doesn't use PrimeIcons, and the
+// package isn't installed here.
+@use 'cps-ui-kit/styles/colors';
+@use 'cps-ui-kit/styles/fonts';
+@use 'cps-ui-kit/styles/cps-tooltip-style';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.p-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 100px;
+  height: 100px;
+  overflow: scroll;
+}
+
+.cps-sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  margin: -0.0625rem;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+body {
+  margin: 0;
+  background-color: #f4f6f9;
+  color: var(--cps-color-text-dark);
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+.lab-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 64rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.6rem;
+  }
+
+  > p {
+    margin: 0;
+    color: var(--cps-text-secondary);
+  }
+}
+
+.lab-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border: 0.0625rem solid var(--cps-color-line-mid);
+  border-radius: 0.5rem;
+  background-color: #fff;
+
+  h2 {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  p {
+    margin: 0;
+    color: var(--cps-text-secondary);
+    font-size: 0.9rem;
+  }
+}
+
+.lab-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lab-readout {
+  max-height: 20rem;
+  margin: 0;
+  padding: 0.75rem;
+  overflow: auto;
+  border-radius: 0.25rem;
+  background-color: #f8fafc;
+  font:
+    0.8rem/1.5 ui-monospace,
+    Menlo,
+    Consolas,
+    monospace;
+  white-space: pre-wrap;
+}
diff --git a/projects/watchtower-lab/src/fragment/fragment.config.ts b/projects/watchtower-lab/src/fragment/fragment.config.ts
deleted file mode 100644
index c3192b6..0000000
--- a/projects/watchtower-lab/src/fragment/fragment.config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  ApplicationConfig,
-  provideZonelessChangeDetection
-} from '@angular/core';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import {
-  provideUwtTelemetry,
-  provideUwtTelemetrySink,
-  withLogging
-} from '@absaoss-cps/ngx-ui-watchtower';
-
-/**
- * The fragment: zoneless, and forwarding everything — events, log records,
- * identity — over the broadcast channel to the shell, which records it.
- */
-export const fragmentConfig: ApplicationConfig = {
-  providers: [
-    provideZonelessChangeDetection(),
-    provideAnimations(),
-    provideUwtTelemetry(
-      { application: 'lab-fragment', environment: 'lab', version: '1.0.0' },
-      withLogging({ minLevel: 'log', mirrorErrorsToRum: true })
-    ),
-    provideUwtTelemetrySink('broadcast')
-  ]
-};
diff --git a/projects/watchtower-lab/src/lab/lab-channel.ts b/projects/watchtower-lab/src/lab/lab-channel.ts
new file mode 100644
index 0000000..007331f
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-channel.ts
@@ -0,0 +1,17 @@
+declare global {
+  interface Window {
+    __uwtTelemetryChannel?: string;
+  }
+}
+
+/**
+ * This tab's broadcast channel, as DESIGN.md §13 recommends for a composed
+ * page open in several tabs: one per page load, so each tab's fragments
+ * reach their own shell. Published on the window for the fragments to read,
+ * before any of them starts; browser-only, so this module is safe under SSR.
+ */
+export const LAB_CHANNEL = `ngx-ui-watchtower-${crypto.randomUUID()}`;
+
+if (typeof window !== 'undefined') {
+  window.__uwtTelemetryChannel = LAB_CHANNEL;
+}
diff --git a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
index daae4b8..4320131 100644
--- a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { DOCUMENT, inject, Injectable } from '@angular/core';
 import {
   UwtLogApiProvider,
   UwtLogQuery,
@@ -8,13 +8,15 @@ import {
 /** Sends log records to the lab's mock backend, as the README's example does. */
 @Injectable({ providedIn: 'root' })
 export class LabLogApiProvider implements UwtLogApiProvider {
+  private readonly document = inject(DOCUMENT);
+
   send(record: UwtLogRecord): void {
     fetch('/api/logs', {
       method: 'POST',
       body: JSON.stringify(record),
       // Only while the page is hidden (it may be closing): browsers reject
       // keepalive requests once all in flight exceed 64 KiB.
-      keepalive: document.visibilityState === 'hidden'
+      keepalive: this.document.visibilityState === 'hidden'
     }).catch(() => undefined);
   }
 
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
index 8c88ebc..76e1a07 100644
--- a/projects/watchtower-lab/src/lab/lab-options.ts
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -13,7 +13,7 @@ export interface LabOptions {
   inspector: 'on' | 'off' | 'noshortcut';
 }
 
-export function labOptions(search = location.search): LabOptions {
+export function labOptions(search: string): LabOptions {
   const params = new URLSearchParams(search);
   const inspector = params.get('inspector');
   return {
diff --git a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
index 48d7b54..ba04c2b 100644
--- a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
@@ -4,11 +4,6 @@ import {
   UwtRumCredentialsProvider
 } from '@absaoss-cps/ngx-ui-watchtower/rum';
 
-/** The page's own origin, as the start of a URL. */
-const sameOrigin = new RegExp(
-  '^' + location.origin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '/'
-);
-
 /**
  * Options for the RUM telemetries the broker names, which its JSON can't
  * carry:
@@ -20,14 +15,18 @@ const sameOrigin = new RegExp(
  *   reached the dataplane, so each replay batch would change them, and be
  *   recorded, forever.
  */
-const TELEMETRY_OPTIONS: Record<string, object> = {
-  http: { addXRayTraceIdHeader: [sameOrigin] },
+const telemetryOptions = (origin: string): Record<string, object> => ({
+  http: {
+    addXRayTraceIdHeader: [
+      new RegExp('^' + origin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '/')
+    ]
+  },
   interaction: {
     enableMutationObserver: true,
     events: [{ event: 'click', cssLocator: 'button' }]
   },
   replay: { recordOptions: { blockSelector: '.lab-status, lab-wire-page' } }
-};
+});
 
 /**
  * Asks the lab's mock broker for the app monitor config and credentials, as
@@ -46,9 +45,9 @@ export class LabRumCredentialsProvider implements UwtRumCredentialsProvider {
       return null;
     }
     // Left out by the broker, the library's default applies.
+    const options = telemetryOptions(location.origin);
     const telemetries = (config.telemetries as string[] | undefined)?.map(
-      (name) =>
-        TELEMETRY_OPTIONS[name] ? [name, TELEMETRY_OPTIONS[name]] : name
+      (name) => (options[name] ? [name, options[name]] : name)
     );
     return {
       config: telemetries ? { ...config, telemetries } : config,
diff --git a/projects/watchtower-lab/src/lab/lab-wire.service.ts b/projects/watchtower-lab/src/lab/lab-wire.service.ts
index 3639615..e100124 100644
--- a/projects/watchtower-lab/src/lab/lab-wire.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-wire.service.ts
@@ -1,4 +1,5 @@
 import {
+  afterNextRender,
   computed,
   DestroyRef,
   inject,
@@ -36,9 +37,11 @@ const POLL_MS = 1500;
 /**
  * `fetch` as it was before RUM wrapped it: this module loads before RUM
  * starts. RUM's `http` telemetry records the app's requests, and the lab's
- * own polling would otherwise add an event every 1.5 s, forever.
+ * own polling would otherwise add an event every 1.5 s, forever. The server
+ * never polls.
  */
-const labFetch = window.fetch.bind(window);
+const labFetch =
+  typeof window === 'undefined' ? fetch : window.fetch.bind(window);
 
 /**
  * What actually reached the lab's mock backend: every RUM event the
@@ -65,9 +68,14 @@ export class LabWire {
   );
 
   constructor() {
-    const timer = setInterval(() => this.refresh(), POLL_MS);
-    inject(DestroyRef).onDestroy(() => clearInterval(timer));
-    this.refresh();
+    const destroyRef = inject(DestroyRef);
+    // In the browser only: on the server, a timer would keep the render from
+    // ever finishing.
+    afterNextRender(() => {
+      const timer = setInterval(() => this.refresh(), POLL_MS);
+      destroyRef.onDestroy(() => clearInterval(timer));
+      this.refresh();
+    });
   }
 
   async refresh(): Promise<void> {
diff --git a/projects/watchtower-lab/src/main.server.ts b/projects/watchtower-lab/src/main.server.ts
new file mode 100644
index 0000000..c79df48
--- /dev/null
+++ b/projects/watchtower-lab/src/main.server.ts
@@ -0,0 +1,12 @@
+import {
+  BootstrapContext,
+  bootstrapApplication
+} from '@angular/platform-browser';
+import { ShellComponent } from './shell/shell.component';
+import { serverConfig } from './shell/shell.config.server';
+
+/** The shell, rendered on the server for each request. */
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(ShellComponent, serverConfig, context);
+
+export default bootstrap;
diff --git a/projects/watchtower-lab/src/main.ts b/projects/watchtower-lab/src/main.ts
index 4dc2ce6..55ae35f 100644
--- a/projects/watchtower-lab/src/main.ts
+++ b/projects/watchtower-lab/src/main.ts
@@ -1,22 +1,13 @@
 import { bootstrapApplication } from '@angular/platform-browser';
+import { initializeWebFragments } from 'web-fragments';
+import { labOptions } from './lab/lab-options';
+import { ShellComponent } from './shell/shell.component';
+import { shellConfig } from './shell/shell.config';
 
-/**
- * One build, two apps. At `/fragment-app` — loaded by the shell in an iframe —
- * this page is the fragment: zoneless, forwarding over the broadcast
- * channel. Anywhere else it is the shell, which loads zone.js first. So the
- * lab runs the library both with a zone and without one.
- */
-async function start(): Promise<void> {
-  if (location.pathname.startsWith('/fragment-app')) {
-    const { FragmentComponent } = await import('./fragment/fragment.component');
-    const { fragmentConfig } = await import('./fragment/fragment.config');
-    await bootstrapApplication(FragmentComponent, fragmentConfig);
-    return;
-  }
-  await import('zone.js');
-  const { ShellComponent } = await import('./shell/shell.component');
-  const { shellConfig } = await import('./shell/shell.config');
-  await bootstrapApplication(ShellComponent, shellConfig);
-}
+// Registers <web-fragment>, before the shell renders one.
+initializeWebFragments();
 
-start().catch((error: unknown) => console.error(error));
+bootstrapApplication(
+  ShellComponent,
+  shellConfig(labOptions(location.search))
+).catch((error: unknown) => console.error(error));
diff --git a/projects/watchtower-lab/src/shell/pages/fragment.page.ts b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
index b0e827a..7fdbcf5 100644
--- a/projects/watchtower-lab/src/shell/pages/fragment.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
@@ -5,16 +5,16 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
-      <h1>Fragment</h1>
+      <h1>Fragment (iframe)</h1>
       <p>
-        A second app, in its own iframe and JavaScript realm, with the
+        A second app, in a plain iframe and its own JavaScript realm, with the
         'broadcast' sink: it hands everything to this shell, which records it
         once. Its events show in the Event Inspector marked ↪ lab-fragment;
         signing in or out there applies here too.
       </p>
       <iframe
         class="lab-fragment"
-        src="/fragment-app"
+        src="/fragment-frame/"
         title="Lab fragment"></iframe>
     </section>
   `,
diff --git a/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts b/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
new file mode 100644
index 0000000..d27b5c5
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA
+} from '@angular/core';
+
+@Component({
+  selector: 'lab-web-fragment-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <section class="lab-page">
+      <h1>Web Fragment</h1>
+      <p>
+        The same fragment as a Web Fragment: its page drawn in this one, in a
+        shadow root, while its JavaScript runs in a hidden iframe of its own.
+        The gateway in the lab's server routes its files. It forwards to this
+        shell over this tab's channel, so its events show in the Event Inspector
+        marked ↪ lab-fragment.
+      </p>
+      <web-fragment fragment-id="lab-fragment"></web-fragment>
+    </section>
+  `,
+  styles: `
+    web-fragment {
+      display: block;
+      border: 0.0625rem dashed var(--cps-color-line-mid);
+      border-radius: 0.5rem;
+      background-color: #fff;
+    }
+  `
+})
+export class WebFragmentPage {}
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 7024a1c..5e74adc 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -1,7 +1,9 @@
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
+  DOCUMENT,
   inject,
   signal
 } from '@angular/core';
@@ -119,14 +121,21 @@ export class ShellComponent {
 
   constructor() {
     inject(LabLayout);
-    const timer = setInterval(
-      () =>
-        this.identity.set({
-          sessionId: this.sink.getSessionId(),
-          userId: this.sink.getUserId()
-        }),
-      1000
-    );
-    inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    const destroyRef = inject(DestroyRef);
+    const document = inject(DOCUMENT);
+    // In the browser only, like the wire's polling.
+    afterNextRender(() => {
+      // Hydrated: the page now answers clicks. The suite waits for this.
+      document.documentElement.setAttribute('data-lab-ready', '');
+      const timer = setInterval(
+        () =>
+          this.identity.set({
+            sessionId: this.sink.getSessionId(),
+            userId: this.sink.getUserId()
+          }),
+        1000
+      );
+      destroyRef.onDestroy(() => clearInterval(timer));
+    });
   }
 }
diff --git a/projects/watchtower-lab/src/shell/shell.config.server.ts b/projects/watchtower-lab/src/shell/shell.config.server.ts
new file mode 100644
index 0000000..d5990e4
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/shell.config.server.ts
@@ -0,0 +1,28 @@
+import { mergeApplicationConfig } from '@angular/core';
+import {
+  provideServerRendering,
+  RenderMode,
+  ServerRoute,
+  withRoutes
+} from '@angular/ssr';
+import { labOptions } from '../lab/lab-options';
+import { shellConfig } from './shell.config';
+
+/** Every page is rendered on the server, for each request — but one. */
+const serverRoutes: ServerRoute[] = [
+  // cps-ui-kit's cps-select creates a ResizeObserver in its constructor,
+  // which a server doesn't have: "On the wire" renders in the browser.
+  { path: 'wire', renderMode: RenderMode.Client },
+  { path: '**', renderMode: RenderMode.Server }
+];
+
+/**
+ * The shell on the server, with the default options: a query string's take
+ * effect once the browser takes over.
+ */
+export const serverConfig = mergeApplicationConfig(
+  shellConfig(labOptions('')),
+  {
+    providers: [provideServerRendering(withRoutes(serverRoutes))]
+  }
+);
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index 265ceb4..1df1f6b 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -1,9 +1,13 @@
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import {
   ApplicationConfig,
   InjectionToken,
   provideZoneChangeDetection
 } from '@angular/core';
+import {
+  provideClientHydration,
+  withEventReplay
+} from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, Routes } from '@angular/router';
 import {
@@ -22,7 +26,8 @@ import {
   provideUwtTelemetryRumSink
 } from '@absaoss-cps/ngx-ui-watchtower/rum';
 import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
-import { LabOptions, labOptions } from '../lab/lab-options';
+import { LabOptions } from '../lab/lab-options';
+import { LAB_CHANNEL } from '../lab/lab-channel';
 import { LabLogApiProvider } from '../lab/lab-log-api.provider';
 import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
 
@@ -61,9 +66,15 @@ export const SHELL_PAGES = [
   },
   {
     path: 'fragment',
-    label: 'Fragment',
+    label: 'Fragment (iframe)',
     load: () => import('./pages/fragment.page').then((m) => m.FragmentPage)
   },
+  {
+    path: 'web-fragment',
+    label: 'Web Fragment',
+    load: () =>
+      import('./pages/web-fragment.page').then((m) => m.WebFragmentPage)
+  },
   {
     path: 'inspector',
     label: 'Event Inspector',
@@ -85,18 +96,17 @@ const routes: Routes = [
   { path: '**', redirectTo: 'scenarios' }
 ];
 
-const options = labOptions();
-
 /**
  * The shell: the realm with the real destination. RUM against the lab's
  * mock dataplane (or noop), logs to its mock backend, the broadcast host for
  * the fragment, and the Event Inspector.
  */
-export const shellConfig: ApplicationConfig = {
+export const shellConfig = (options: LabOptions): ApplicationConfig => ({
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
+    provideClientHydration(withEventReplay()),
     provideAnimations(),
-    provideHttpClient(),
+    provideHttpClient(withFetch()),
     provideRouter(routes),
     { provide: LAB_OPTIONS, useValue: options },
     provideUwtTelemetry(
@@ -121,10 +131,10 @@ export const shellConfig: ApplicationConfig = {
       useExisting: LabRumCredentialsProvider
     },
     { provide: UWT_LOG_API_PROVIDER, useExisting: LabLogApiProvider },
-    provideUwtTelemetryBroadcastHost(),
+    provideUwtTelemetryBroadcastHost(LAB_CHANNEL),
     provideUwtEventInspector({
       enabled: options.inspector !== 'off',
       ...(options.inspector === 'noshortcut' && { shortcuts: [] })
     })
   ]
-};
+});
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 3f41eec..d169d3b 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -1,43 +1,7 @@
-// cps-ui-kit's global styles, without its primeicons import: the lab doesn't
-// use PrimeIcons, and the package isn't installed here.
-@use 'cps-ui-kit/styles/colors';
-@use 'cps-ui-kit/styles/fonts';
-@use 'cps-ui-kit/styles/cps-tooltip-style';
+// The shell's own layout, on top of what it shares with the fragment.
+@use 'lab-base';
 @use 'cps-ui-kit/styles/mixins' as cps;
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.p-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 100px;
-  height: 100px;
-  overflow: scroll;
-}
-
-.cps-sr-only {
-  position: absolute;
-  width: 0.0625rem;
-  height: 0.0625rem;
-  margin: -0.0625rem;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-body {
-  margin: 0;
-  background-color: #f4f6f9;
-  color: var(--cps-color-text-dark);
-  font-family: 'Source Sans Pro', sans-serif;
-}
-
 // The header and status bar are fixed to the window on purpose: they show
 // what an Event Inspector pane covers, and — with `lab-insets` on <html>,
 // switched on the Event Inspector page — how an app keeps them beside it.
@@ -130,66 +94,6 @@ html.lab-insets {
   padding: 1.5rem 2rem;
 }
 
-.lab-page {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  max-width: 64rem;
-
-  h1 {
-    margin: 0;
-    font-size: 1.6rem;
-  }
-
-  > p {
-    margin: 0;
-    color: var(--cps-text-secondary);
-  }
-}
-
-.lab-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  border: 0.0625rem solid var(--cps-color-line-mid);
-  border-radius: 0.5rem;
-  background-color: #fff;
-
-  h2 {
-    margin: 0;
-    font-size: 1.1rem;
-  }
-
-  p {
-    margin: 0;
-    color: var(--cps-text-secondary);
-    font-size: 0.9rem;
-  }
-}
-
-.lab-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.lab-readout {
-  max-height: 20rem;
-  margin: 0;
-  padding: 0.75rem;
-  overflow: auto;
-  border-radius: 0.25rem;
-  background-color: #f8fafc;
-  font:
-    0.8rem/1.5 ui-monospace,
-    Menlo,
-    Consolas,
-    monospace;
-  white-space: pre-wrap;
-}
-
 .lab-table {
   width: 100%;
   border-collapse: collapse;
diff --git a/projects/watchtower-lab/src/telemetry.schema.ts b/projects/watchtower-lab/src/telemetry.schema.ts
index cf3410e..71f70c5 100644
--- a/projects/watchtower-lab/src/telemetry.schema.ts
+++ b/projects/watchtower-lab/src/telemetry.schema.ts
@@ -15,7 +15,6 @@ declare module '@absaoss-cps/ngx-ui-watchtower' {
     'lab-abandoned': true;
     'lab-privacy': true;
     'lab-burst': true;
-    'fragment-journey': true;
   }
   interface UwtScenarioSteps {
     fetch: true;
@@ -29,13 +28,11 @@ declare module '@absaoss-cps/ngx-ui-watchtower' {
     lab_feature_used: true;
     lab_privacy_checked: true;
     lab_burst: true;
-    fragment_button_clicked: true;
   }
   interface UwtLoggerNames {
     lab: true;
     noisy: true;
     privacy: true;
-    fragment: true;
   }
 }
 
diff --git a/projects/watchtower-lab/tsconfig.app.json b/projects/watchtower-lab/tsconfig.app.json
index cd6f6e3..bdf07b4 100644
--- a/projects/watchtower-lab/tsconfig.app.json
+++ b/projects/watchtower-lab/tsconfig.app.json
@@ -3,8 +3,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/watchtower-lab",
-    "types": []
+    "types": ["node"]
   },
-  "files": ["src/main.ts"],
-  "include": ["src/**/*.ts"]
+  "files": ["src/main.ts", "src/main.server.ts", "server/server.ts"],
+  "include": ["src/**/*.ts", "server/**/*.ts"]
 }
diff --git a/tsconfig.json b/tsconfig.json
index ba34ce6..76ac1cd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -48,6 +48,8 @@
     { "path": "./projects/ngx-ui-watchtower/rum/tsconfig.spec.json" },
     { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.lib.json" },
     { "path": "./projects/ngx-ui-watchtower/event-inspector/tsconfig.spec.json" },
-    { "path": "./projects/watchtower-lab/tsconfig.app.json" }
+    { "path": "./projects/watchtower-lab/tsconfig.app.json" },
+    { "path": "./projects/watchtower-lab-fragment/tsconfig.app.json" },
+    { "path": "./playwright/tsconfig.json" }
   ]
 }

From 25ae1406c62ea7338150c2a5224eb6ba36571c7b Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 11:41:24 +0100
Subject: [PATCH 11/51] smoke test

---
 .github/workflows/checks.yml                  |  19 +++
 .gitignore                                    |   1 +
 README.md                                     |  21 ++-
 angular.json                                  |  33 ++++
 package.json                                  |   1 +
 .../watchtower-consumer-smoke/package.json    |   5 +
 projects/watchtower-consumer-smoke/smoke.mjs  | 158 ++++++++++++++++++
 .../src/app.component.ts                      |  37 ++++
 .../src/app.config.server.ts                  |  17 ++
 .../src/app.config.ts                         |  36 ++++
 .../src/destination.rum.ts                    |  24 +++
 .../src/destination.ts                        |   8 +
 .../watchtower-consumer-smoke/src/index.html  |  12 ++
 .../src/main.server.ts                        |  11 ++
 .../watchtower-consumer-smoke/src/main.ts     |   7 +
 .../src/telemetry.schema.ts                   |  18 ++
 .../tsconfig.app.json                         |  31 ++++
 17 files changed, 435 insertions(+), 4 deletions(-)
 create mode 100644 projects/watchtower-consumer-smoke/package.json
 create mode 100644 projects/watchtower-consumer-smoke/smoke.mjs
 create mode 100644 projects/watchtower-consumer-smoke/src/app.component.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/app.config.server.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/app.config.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/destination.rum.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/destination.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/index.html
 create mode 100644 projects/watchtower-consumer-smoke/src/main.server.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/main.ts
 create mode 100644 projects/watchtower-consumer-smoke/src/telemetry.schema.ts
 create mode 100644 projects/watchtower-consumer-smoke/tsconfig.app.json

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 2d4d16f..5620df6 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -139,3 +139,22 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 14
+
+  smoke:
+    name: Consumer smoke test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version: 22.x
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Pack, install and build as a consumer
+        run: npm run smoke
diff --git a/.gitignore b/.gitignore
index d9d806b..1259144 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 
 # Node
 /node_modules
+/projects/watchtower-consumer-smoke/node_modules
 npm-debug.log
 yarn-error.log
 
diff --git a/README.md b/README.md
index ac68be4..b9d9e55 100644
--- a/README.md
+++ b/README.md
@@ -26,10 +26,11 @@ projects/ngx-ui-watchtower/
   README.md         usage guide, published to npm
   DESIGN.md         full design
   package.json      the published package's manifest
-projects/watchtower-lab/           the Watchtower Lab: a testing app, never published
-  server/                          its server: mock backend, fragment gateway, SSR
-projects/watchtower-lab-fragment/  the lab's fragment: a second app it composes
-playwright/                        the lab's end-to-end suite (Playwright)
+projects/watchtower-lab/             the Watchtower Lab: a testing app, never published
+  server/                            its server: mock backend, fragment gateway, SSR
+projects/watchtower-lab-fragment/    the lab's fragment: a second app it composes
+projects/watchtower-consumer-smoke/  a minimal app that installs the packed library
+playwright/                          the lab's end-to-end suite (Playwright)
 ```
 
 ## Getting started
@@ -60,6 +61,7 @@ The package is built to `dist/ngx-ui-watchtower`.
 | `npm run lab:build`     | Builds the lab's fragment and shell                   |
 | `npm run e2e`           | Builds the lab and runs the Playwright suite          |
 | `npm run e2e:ui`        | Opens the suite in Playwright's UI, on the last build |
+| `npm run smoke`         | Packs the library and builds an app from the tarball  |
 
 ## Watchtower Lab
 
@@ -104,6 +106,16 @@ the mock backend received. It runs the built server on
 http://localhost:4390, beside `npm run lab`. The first time, download the
 browsers with `npx playwright install chromium webkit`.
 
+## Consumer smoke test
+
+Everything above uses the library from source. `npm run smoke` uses it as
+published: it packs the built package, installs the tarball into
+`projects/watchtower-consumer-smoke` — an app with no paths into the source —
+and builds that app for the browser and, prerendering, for the server. It
+checks the tarball's files, that all three entry points resolve with their
+typings, that the page renders on the server, and that an app which never
+imports `/rum` has no `aws-rum-web` in its bundle.
+
 ## Before you push
 
 Run all of them — each catches something the others don't:
@@ -115,6 +127,7 @@ npm run lint
 npm run format:check
 npm run build
 npm run e2e
+npm run smoke
 ```
 
 CI runs the same checks on every pull request and every push to `main`.
diff --git a/angular.json b/angular.json
index aaafc33..30174b0 100644
--- a/angular.json
+++ b/angular.json
@@ -110,6 +110,39 @@
           }
         }
       }
+    },
+    "watchtower-consumer-smoke": {
+      "projectType": "application",
+      "root": "projects/watchtower-consumer-smoke",
+      "sourceRoot": "projects/watchtower-consumer-smoke/src",
+      "prefix": "smoke",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/watchtower-consumer-smoke",
+            "index": "projects/watchtower-consumer-smoke/src/index.html",
+            "browser": "projects/watchtower-consumer-smoke/src/main.ts",
+            "server": "projects/watchtower-consumer-smoke/src/main.server.ts",
+            "outputMode": "static",
+            "tsConfig": "projects/watchtower-consumer-smoke/tsconfig.app.json",
+            "optimization": true,
+            "sourceMap": false,
+            "extractLicenses": false
+          },
+          "configurations": {
+            "rum": {
+              "outputPath": "dist/watchtower-consumer-smoke-rum",
+              "fileReplacements": [
+                {
+                  "replace": "projects/watchtower-consumer-smoke/src/destination.ts",
+                  "with": "projects/watchtower-consumer-smoke/src/destination.rum.ts"
+                }
+              ]
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 7ca31bd..c1bf5cb 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lab:build": "ng build watchtower-lab-fragment && ng build watchtower-lab",
     "e2e": "npm run lab:build && playwright test",
     "e2e:ui": "playwright test --ui",
+    "smoke": "node projects/watchtower-consumer-smoke/smoke.mjs",
     "test": "ng test --project=ngx-ui-watchtower",
     "test:coverage": "ng test --project=ngx-ui-watchtower --coverage --coverage-reporters text-summary --coverage-reporters lcov --json --output-file=./coverage/report.json",
     "lint": "eslint \"**/*.ts\" --max-warnings=0",
diff --git a/projects/watchtower-consumer-smoke/package.json b/projects/watchtower-consumer-smoke/package.json
new file mode 100644
index 0000000..ce2c0aa
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "watchtower-consumer-smoke",
+  "private": true,
+  "description": "A minimal app consuming @absaoss-cps/ngx-ui-watchtower as published: `npm run smoke` packs the library and installs the tarball here."
+}
diff --git a/projects/watchtower-consumer-smoke/smoke.mjs b/projects/watchtower-consumer-smoke/smoke.mjs
new file mode 100644
index 0000000..632b977
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/smoke.mjs
@@ -0,0 +1,158 @@
+// `npm run smoke`: the library as a consumer gets it. Packs the built
+// package, installs the tarball into this app — which has no paths into the
+// source — builds the app for the browser and the server, and checks the
+// result. Prints a line per check; exits non-zero if any fails.
+import { execFileSync, spawnSync } from 'node:child_process';
+import {
+  existsSync,
+  mkdtempSync,
+  readdirSync,
+  readFileSync,
+  rmSync
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = fileURLToPath(new URL('../../', import.meta.url));
+const APP = join(ROOT, 'projects/watchtower-consumer-smoke');
+const PACKAGE = join(ROOT, 'dist/ngx-ui-watchtower');
+const INSTALLED = join(APP, 'node_modules/@absaoss-cps/ngx-ui-watchtower');
+const shell = process.platform === 'win32';
+
+let failures = 0;
+function check(label, ok, detail) {
+  console.log(`${ok ? 'PASS' : 'FAIL'}  ${label}`);
+  if (!ok) {
+    failures++;
+    if (detail !== undefined) {
+      console.log(`      ${JSON.stringify(detail)}`);
+    }
+  }
+}
+
+/** Runs a command with its output shown; whether it succeeded. */
+function run(command, args, cwd = ROOT) {
+  console.log(`\n$ ${command} ${args.join(' ')}`);
+  return (
+    spawnSync(command, args, { cwd, stdio: 'inherit', shell }).status === 0
+  );
+}
+
+/** Whether any script in a build's browser output contains `text`. */
+function bundleContains(outputPath, text) {
+  const browser = join(ROOT, outputPath, 'browser');
+  return readdirSync(browser)
+    .filter((file) => file.endsWith('.js'))
+    .some((file) => readFileSync(join(browser, file), 'utf8').includes(text));
+}
+
+function finish() {
+  console.log(failures ? `\n${failures} FAILED` : '\nALL PASSED');
+  process.exit(failures ? 1 : 0);
+}
+
+// 1. The package, as `npm publish` would send it.
+if (!run('npm', ['run', 'build'])) {
+  check('the library builds', false);
+  finish();
+}
+const packDir = mkdtempSync(join(tmpdir(), 'uwt-smoke-'));
+const [packed] = JSON.parse(
+  execFileSync(
+    'npm',
+    ['pack', PACKAGE, '--pack-destination', packDir, '--json'],
+    { cwd: ROOT, shell }
+  )
+);
+const files = packed.files.map((f) => f.path);
+const expected = [
+  'package.json',
+  'README.md',
+  'LICENSE',
+  ...['', '-rum', '-event-inspector'].flatMap((entry) => [
+    `fesm2022/absaoss-cps-ngx-ui-watchtower${entry}.mjs`,
+    `types/absaoss-cps-ngx-ui-watchtower${entry}.d.ts`
+  ])
+];
+check(
+  `the tarball has the manifest, README, LICENSE and all three entry points (${files.length} files)`,
+  expected.every((file) => files.includes(file)),
+  expected.filter((file) => !files.includes(file))
+);
+const isSource = (file) =>
+  /(^|\/)src\/|\.spec\./.test(file) ||
+  (file.endsWith('.ts') && !file.endsWith('.d.ts'));
+check(
+  'the tarball has no source or spec files',
+  !files.some(isSource),
+  files.filter(isSource)
+);
+
+// 2. Installed as a consumer installs it. Its peers — Angular, rxjs,
+// cps-ui-kit, aws-rum-web — come from the workspace, as one copy.
+rmSync(join(APP, 'node_modules'), { recursive: true, force: true });
+const installed = run(
+  'npm',
+  [
+    'install',
+    join(packDir, packed.filename),
+    '--no-save',
+    '--no-package-lock',
+    '--legacy-peer-deps',
+    '--ignore-scripts',
+    '--no-audit',
+    '--no-fund'
+  ],
+  APP
+);
+rmSync(packDir, { recursive: true, force: true });
+check(
+  `the tarball installs (${packed.id})`,
+  installed &&
+    JSON.parse(readFileSync(join(INSTALLED, 'package.json'), 'utf8'))
+      .version === packed.version
+);
+check(
+  'no second copy of Angular is installed beside it',
+  !existsSync(join(APP, 'node_modules/@angular'))
+);
+if (failures) {
+  finish();
+}
+
+// 3. Built against the published typings and bundles, for the browser and,
+// prerendering, the server.
+check(
+  'the app builds and prerenders without /rum',
+  run('npx', ['ng', 'build', 'watchtower-consumer-smoke'])
+);
+check(
+  'the app builds and prerenders with /rum',
+  run('npx', ['ng', 'build', 'watchtower-consumer-smoke', '-c', 'rum'])
+);
+if (failures) {
+  finish();
+}
+
+// 4. The builds' output. The RUM SDK sends to `/appmonitors/`, a path in no
+// part of this library, which minifying keeps.
+const SDK = '/appmonitors/';
+check(
+  'without /rum, no aws-rum-web in the bundle',
+  !bundleContains('dist/watchtower-consumer-smoke', SDK)
+);
+check(
+  'with /rum, aws-rum-web is in the bundle — the check above can see it',
+  bundleContains('dist/watchtower-consumer-smoke-rum', SDK)
+);
+const prerendered = readFileSync(
+  join(ROOT, 'dist/watchtower-consumer-smoke/browser/index.html'),
+  'utf8'
+);
+check(
+  'the page was rendered on the server',
+  /<h1[^>]*>ngx-ui-watchtower consumer smoke<\/h1>/.test(prerendered)
+);
+
+finish();
diff --git a/projects/watchtower-consumer-smoke/src/app.component.ts b/projects/watchtower-consumer-smoke/src/app.component.ts
new file mode 100644
index 0000000..07f7b58
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/app.component.ts
@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  UwtBITelemetryService,
+  UwtLoggerService,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtEventInspectorService } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+
+/** Uses the library the way an app would, through its published API. */
+@Component({
+  selector: 'smoke-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <h1>ngx-ui-watchtower consumer smoke</h1>
+    <button type="button" (click)="track()">Track</button>
+    <button type="button" (click)="inspector.open()">Event Inspector</button>
+  `
+})
+export class AppComponent {
+  protected readonly inspector = inject(UwtEventInspectorService);
+
+  private readonly bi = inject(UwtBITelemetryService);
+  private readonly logger = inject(UwtLoggerService).getLogger('smoke');
+
+  constructor() {
+    const scenario = inject(UwtScenarioTelemetryService).start({
+      name: 'smoke-render'
+    });
+    scenario.step('render');
+    scenario.complete();
+    this.logger.log('Rendered');
+  }
+
+  protected track(): void {
+    this.bi.track('smoke_clicked');
+  }
+}
diff --git a/projects/watchtower-consumer-smoke/src/app.config.server.ts b/projects/watchtower-consumer-smoke/src/app.config.server.ts
new file mode 100644
index 0000000..d7b98b8
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/app.config.server.ts
@@ -0,0 +1,17 @@
+import { mergeApplicationConfig } from '@angular/core';
+import {
+  provideServerRendering,
+  RenderMode,
+  ServerRoute,
+  withRoutes
+} from '@angular/ssr';
+import { appConfig } from './app.config';
+
+/** Rendered on the server at build time: the build fails if that throws. */
+const serverRoutes: ServerRoute[] = [
+  { path: '**', renderMode: RenderMode.Prerender }
+];
+
+export const serverConfig = mergeApplicationConfig(appConfig, {
+  providers: [provideServerRendering(withRoutes(serverRoutes))]
+});
diff --git a/projects/watchtower-consumer-smoke/src/app.config.ts b/projects/watchtower-consumer-smoke/src/app.config.ts
new file mode 100644
index 0000000..f262737
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/app.config.ts
@@ -0,0 +1,36 @@
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection
+} from '@angular/core';
+import {
+  provideClientHydration,
+  withEventReplay
+} from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+  UWT_LOG_API_PROVIDER,
+  UwtNoopLogApiProvider,
+  provideUwtTelemetry,
+  withBIEvents,
+  withLogging,
+  withScenarios
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import { destination } from './destination';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideClientHydration(withEventReplay()),
+    provideAnimations(),
+    provideUwtTelemetry(
+      { application: 'consumer-smoke', environment: 'smoke', version: '1.0.0' },
+      withLogging({ minLevel: 'log' }),
+      withScenarios(),
+      withBIEvents()
+    ),
+    destination,
+    { provide: UWT_LOG_API_PROVIDER, useClass: UwtNoopLogApiProvider },
+    provideUwtEventInspector()
+  ]
+};
diff --git a/projects/watchtower-consumer-smoke/src/destination.rum.ts b/projects/watchtower-consumer-smoke/src/destination.rum.ts
new file mode 100644
index 0000000..4db82c8
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/destination.rum.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import {
+  UWT_RUM_CREDENTIALS_PROVIDER,
+  UwtRumBootstrap,
+  UwtRumCredentialsProvider,
+  provideUwtTelemetryRumSink
+} from '@absaoss-cps/ngx-ui-watchtower/rum';
+
+/** RUM, switched off by its broker: the smoke test sends nothing. */
+@Injectable({ providedIn: 'root' })
+class SmokeRumCredentials implements UwtRumCredentialsProvider {
+  async load(): Promise<UwtRumBootstrap | null> {
+    return null;
+  }
+}
+
+/**
+ * The `rum` configuration's destination: the published `/rum` entry point,
+ * whose `aws-rum-web` the smoke test must then find in the build.
+ */
+export const destination = [
+  provideUwtTelemetryRumSink(),
+  { provide: UWT_RUM_CREDENTIALS_PROVIDER, useExisting: SmokeRumCredentials }
+];
diff --git a/projects/watchtower-consumer-smoke/src/destination.ts b/projects/watchtower-consumer-smoke/src/destination.ts
new file mode 100644
index 0000000..88ff618
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/destination.ts
@@ -0,0 +1,8 @@
+import { provideUwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
+
+/**
+ * Where the telemetry goes: nowhere, and without importing `/rum`. The
+ * smoke test checks this build has no `aws-rum-web` in it; the `rum`
+ * configuration swaps in `destination.rum.ts`.
+ */
+export const destination = [provideUwtTelemetrySink('noop')];
diff --git a/projects/watchtower-consumer-smoke/src/index.html b/projects/watchtower-consumer-smoke/src/index.html
new file mode 100644
index 0000000..ffecf8b
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ngx-ui-watchtower consumer smoke</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <smoke-root></smoke-root>
+  </body>
+</html>
diff --git a/projects/watchtower-consumer-smoke/src/main.server.ts b/projects/watchtower-consumer-smoke/src/main.server.ts
new file mode 100644
index 0000000..00232f2
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/main.server.ts
@@ -0,0 +1,11 @@
+import {
+  BootstrapContext,
+  bootstrapApplication
+} from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { serverConfig } from './app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, serverConfig, context);
+
+export default bootstrap;
diff --git a/projects/watchtower-consumer-smoke/src/main.ts b/projects/watchtower-consumer-smoke/src/main.ts
new file mode 100644
index 0000000..de87a2b
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { appConfig } from './app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((error: unknown) =>
+  console.error(error)
+);
diff --git a/projects/watchtower-consumer-smoke/src/telemetry.schema.ts b/projects/watchtower-consumer-smoke/src/telemetry.schema.ts
new file mode 100644
index 0000000..8d92e28
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/src/telemetry.schema.ts
@@ -0,0 +1,18 @@
+// The app's names, declared on the published typings as the README tells
+// applications to.
+declare module '@absaoss-cps/ngx-ui-watchtower' {
+  interface UwtScenarioNames {
+    'smoke-render': true;
+  }
+  interface UwtScenarioSteps {
+    render: true;
+  }
+  interface UwtBIEventNames {
+    smoke_clicked: true;
+  }
+  interface UwtLoggerNames {
+    smoke: true;
+  }
+}
+
+export {};
diff --git a/projects/watchtower-consumer-smoke/tsconfig.app.json b/projects/watchtower-consumer-smoke/tsconfig.app.json
new file mode 100644
index 0000000..5804ad9
--- /dev/null
+++ b/projects/watchtower-consumer-smoke/tsconfig.app.json
@@ -0,0 +1,31 @@
+/*
+ * The consumer smoke app, configured like any app: it doesn't extend the
+ * workspace's tsconfig, so there are no paths into the library's source —
+ * only the package installed in ./node_modules.
+ */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "../../out-tsc/watchtower-consumer-smoke",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "types": []
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": ["src/main.ts", "src/main.server.ts"],
+  "include": ["src/**/*.ts"]
+}

From 3a9b8299680dc535720867a949d2e3a13c324ec0 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 12:50:52 +0100
Subject: [PATCH 12/51] fixing issues

---
 playwright/privacy.spec.ts                    |  2 +-
 projects/ngx-ui-watchtower/DESIGN.md          | 13 +++++++-----
 .../uwt-event-inspector.service.spec.ts       | 20 ++++++++++++++++---
 .../uwt-inspector-shortcut.spec.ts            |  7 +++++++
 .../uwt-inspector-shortcut.ts                 | 20 ++++++++++++++-----
 .../uwt-inspector.models.ts                   |  9 +++++----
 .../uwt-rum-telemetry.sink.spec.ts            | 11 ++++++++++
 .../uwt-rum-telemetry.sink.ts                 |  5 +++--
 projects/watchtower-lab/server/lab-backend.ts | 12 +++++++++--
 .../src/lab/lab-log-api.provider.ts           |  4 +++-
 .../src/lab/lab-wire.service.ts               |  2 ++
 .../src/shell/pages/fragment.page.ts          | 12 +++++++----
 .../src/shell/pages/wire.page.ts              |  2 +-
 13 files changed, 91 insertions(+), 28 deletions(-)

diff --git a/playwright/privacy.spec.ts b/playwright/privacy.spec.ts
index dd77ea4..979c142 100644
--- a/playwright/privacy.spec.ts
+++ b/playwright/privacy.spec.ts
@@ -7,7 +7,7 @@ const PERSONAL = [
   'hunter2',
   'eyJhbGci',
   '10.1.2.3',
-  '7946 0958'
+  '555 0123'
 ];
 
 test('personal values never reach RUM or the log backend', async ({
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 05bd1f1..ab8da8f 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2056,11 +2056,13 @@ dark theme is not yet complete for the components inside it.
 
 **Shift + E + I** on every platform — hold Shift, press E, then I — for
 Event Inspector. No browser binds it. Keys are matched by physical position
-(`KeyboardEvent.code`), so it works on any layout; Shift must be the only
-modifier, and held-down repeats are ignored.
+(`KeyboardEvent.code`): the keys where E and I sit on a QWERTY keyboard —
+the same on AZERTY and QWERTZ, elsewhere on Dvorak or Colemak. Shift must be
+the only modifier, and held-down repeats are ignored.
 
 It types text, so it is ignored in a text field — typing a capital "EI"
-there never opens it; press it with focus outside the field. Screen readers
+there never opens it, even in a shadow root; press it with focus outside the
+field. Screen readers
 in browse mode keep letter keys for their own navigation; there, open it
 from a button that calls `open()`.
 
@@ -2201,8 +2203,9 @@ A shortcut is a `UwtInspectorShortcut` — `{ code, after?, ctrl?, alt?,
 shift?, meta?, label? }`, where `code` is a `KeyboardEvent.code` such as
 `'Digit8'` or `'KeyD'`, and an omitted modifier must be up. `after` is a key
 pressed just before `code` with the modifiers still held: the default is
-`{ code: 'KeyI', after: 'KeyE', shift: true }`. A shortcut without `ctrl` or
-`meta` types text, so it doesn't count in a text field. AltGr, which many
+`{ code: 'KeyI', after: 'KeyE', shift: true }`. Without `ctrl` or `meta`, a
+key that types a character doesn't count in a text field; one that types
+nothing, such as `F9`, still does. AltGr, which many
 European Windows layouts report as Ctrl+Alt, never matches. Spread
 `UWT_DEFAULT_INSPECTOR_SHORTCUTS` to add one rather than replace them.
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index af2d61f..74e0792 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -46,13 +46,14 @@ type KeyInit = ConstructorParameters<typeof KeyboardEvent>[1];
 /** Presses one key on `target`; with none given, the default Shift+E+I. */
 function press(init?: KeyInit, target: Element = document.body): KeyboardEvent {
   if (!init) {
-    press({ code: 'KeyE', shiftKey: true }, target);
-    return press({ code: 'KeyI', shiftKey: true }, target);
+    press({ code: 'KeyE', key: 'E', shiftKey: true }, target);
+    return press({ code: 'KeyI', key: 'I', shiftKey: true }, target);
   }
   const event = new KeyboardEvent('keydown', {
     ...init,
     bubbles: true,
-    cancelable: true
+    cancelable: true,
+    composed: true
   });
   target.dispatchEvent(event);
   return event;
@@ -154,6 +155,19 @@ describe('UwtEventInspectorService', () => {
     field.remove();
   });
 
+  it('should ignore Shift+E+I typed into a text field inside a shadow root', () => {
+    create().install();
+    const host = document.body.appendChild(document.createElement('div'));
+    const field = host
+      .attachShadow({ mode: 'open' })
+      .appendChild(document.createElement('input'));
+
+    press(undefined, field);
+
+    expect(dialogs.opened).toHaveLength(0);
+    host.remove();
+  });
+
   it('should bring focus back to an open popup, and close it from inside', () => {
     create().install();
     press();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
index eab9f84..136361f 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
@@ -68,6 +68,13 @@ describe('uwtMatchesShortcut', () => {
     ).toBe(true);
   });
 
+  it('should match a key that types nothing in a text field', () => {
+    const field = document.createElement('input');
+    expect(
+      uwtMatchesShortcut(key('F9', {}, 'F9', false, field), { code: 'F9' })
+    ).toBe(true);
+  });
+
   it('should match the physical key, whatever character it produces', () => {
     // On macOS, ⇧⌥8 produces "°" — only the physical key is reliable.
     const mac = { code: 'Digit8', shift: true, alt: true, meta: true };
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
index 4d9f35e..4de2183 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
@@ -22,7 +22,8 @@ export const UWT_DEFAULT_INSPECTOR_SHORTCUTS: readonly UwtInspectorShortcut[] =
  * - Held-down repeats don't count.
  * - AltGr is rejected. On many European Windows layouts it reports as
  *   Ctrl+Alt, and typing an AltGr character must never open the popup.
- * - Without Ctrl or ⌘ it types text, so it doesn't count in a text field.
+ * - Without Ctrl or ⌘, a key that types a character doesn't count in a text
+ *   field, even one inside a shadow root.
  */
 export function uwtMatchesShortcut(
   event: KeyboardEvent,
@@ -38,7 +39,7 @@ export function uwtMatchesShortcut(
   if (event.getModifierState?.('AltGraph')) {
     return false;
   }
-  if (!shortcut.ctrl && !shortcut.meta && isTextField(event.target)) {
+  if (!shortcut.ctrl && !shortcut.meta && typesIntoField(event)) {
     return false;
   }
   return (
@@ -89,9 +90,18 @@ function describeShortcut(s: UwtInspectorShortcut): string {
     .join('+');
 }
 
-/** Where typing goes into the page: an input, a text area or an editor. */
-function isTextField(target: EventTarget | null): boolean {
-  const element = target as HTMLElement | null;
+/**
+ * Whether `event` types a character — or starts one, as a dead key or an
+ * IME does — into an input, a text area or an editor. Inside a shadow root,
+ * `target` is only its host, so the path's first element is read instead.
+ */
+function typesIntoField(event: KeyboardEvent): boolean {
+  const key = event.key ?? '';
+  if (key.length !== 1 && key !== 'Dead' && key !== 'Process') {
+    return false;
+  }
+  const element = (event.composedPath?.()[0] ??
+    event.target) as HTMLElement | null;
   return (
     !!element &&
     (element.isContentEditable ||
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index c1d02cf..3e415cd 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -35,10 +35,11 @@ export type UwtInspectorPaneSide = Extract<
 /**
  * A key combination that opens the Event Inspector.
  *
- * Matched on `KeyboardEvent.code` — the physical key — so it works on every
- * keyboard layout, and isn't affected by what Option or Shift produce.
- * A modifier left out must be *up*, so extra modifiers never match. One
- * without Ctrl or ⌘ types text, so it doesn't count in a text field.
+ * Matched on `KeyboardEvent.code` — the physical key, named for its place on
+ * a US QWERTY keyboard — so it isn't affected by what Option or Shift
+ * produce. A modifier left out must be *up*, so extra modifiers never match.
+ * Without Ctrl or ⌘, a key that types a character doesn't count in a text
+ * field.
  *
  * @group Interfaces
  */
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
index 7a82362..beb1d49 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
@@ -359,6 +359,17 @@ describe('UwtRumTelemetrySink', () => {
       expect(telemetries[1][1].ignore()).toBe(true);
     });
 
+    it('should not add a second error plugin when the app names it in another case, which RUM accepts', async () => {
+      configure({
+        loadImpl: async () => bootstrap({ telemetries: [['Errors', {}]] })
+      });
+      await sink.init();
+
+      expect(AwsRumCtor.mock.calls[0][3]).toMatchObject({
+        telemetries: [['Errors', {}]]
+      });
+    });
+
     it('should omit every SDK-default-mirroring field entirely when unset, not send it as undefined', async () => {
       await sink.init();
 
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
index 78a8b64..01e95e5 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
@@ -129,13 +129,14 @@ function omitUndefined<T extends object>(obj: T): Partial<T> {
 /**
  * The app's telemetries, plus RUM's error plugin when they leave it out.
  * `recordError` goes through that plugin — RUM rejects it otherwise — so it
- * is added with its own capture of unhandled errors switched off.
+ * is added with its own capture of unhandled errors switched off. RUM reads
+ * names in any case, and a second one would make it throw.
  */
 function withErrorPlugin(
   telemetries: NonNullable<UwtRumAppMonitorConfig['telemetries']>
 ): UwtRumAppMonitorConfig['telemetries'] {
   const named = (t: (typeof telemetries)[number]) =>
-    Array.isArray(t) ? t[0] : t;
+    String(Array.isArray(t) ? t[0] : t).toLowerCase();
   return telemetries.some((t) => named(t) === 'errors')
     ? telemetries
     : [...telemetries, ['errors', { ignore: () => true }]];
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index bb3a08e..a073ab0 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -26,6 +26,7 @@ interface LogRecord {
 }
 
 interface ReceivedEvent {
+  id: string;
   receivedAt: string;
   batch: number;
   user: Record<string, unknown>;
@@ -46,7 +47,8 @@ const state: {
 
 /**
  * The body as text, gunzipped if RUM compressed it. A page that closes while
- * sending leaves an empty one, which nothing keeps.
+ * sending leaves it empty or cut short; either way it is `''`, which nothing
+ * keeps.
  */
 function readBody(req: Request): Promise<string> {
   return new Promise((resolve) => {
@@ -57,7 +59,12 @@ function readBody(req: Request): Promise<string> {
       const gzip =
         req.headers['content-encoding'] === 'gzip' ||
         (raw[0] === 0x1f && raw[1] === 0x8b);
-      resolve((gzip ? gunzipSync(raw) : raw).toString('utf8'));
+      // Thrown here, outside the promise, an error would stop the server.
+      try {
+        resolve((gzip ? gunzipSync(raw) : raw).toString('utf8'));
+      } catch {
+        resolve('');
+      }
     });
     req.on('error', () => resolve(''));
   });
@@ -114,6 +121,7 @@ function keepBatch(body: string): void {
   state.batches++;
   for (const event of batch.RumEvents ?? []) {
     state.rum.push({
+      id: event.id,
       receivedAt: new Date().toISOString(),
       batch: state.batches,
       user: batch.UserDetails ?? {},
diff --git a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
index 4320131..f7232b6 100644
--- a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
@@ -22,7 +22,9 @@ export class LabLogApiProvider implements UwtLogApiProvider {
 
   query(filter: UwtLogQuery): Promise<UwtLogRecord[]> {
     const params = new URLSearchParams(
-      Object.entries(filter).map(([key, value]) => [key, String(value)])
+      Object.entries(filter)
+        .filter(([, value]) => value !== undefined)
+        .map(([key, value]) => [key, String(value)])
     );
     return fetch(`/api/logs?${params}`).then((r) => r.json());
   }
diff --git a/projects/watchtower-lab/src/lab/lab-wire.service.ts b/projects/watchtower-lab/src/lab/lab-wire.service.ts
index e100124..9087843 100644
--- a/projects/watchtower-lab/src/lab/lab-wire.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-wire.service.ts
@@ -10,6 +10,8 @@ import { UwtLogRecord } from '@absaoss-cps/ngx-ui-watchtower';
 
 /** One RUM event as the mock dataplane received it, with its batch's user. */
 export interface LabRumEvent {
+  /** RUM's own id for the event. */
+  id: string;
   receivedAt: string;
   batch: number;
   user: { sessionId?: string; userId?: string };
diff --git a/projects/watchtower-lab/src/shell/pages/fragment.page.ts b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
index 7fdbcf5..e3647dd 100644
--- a/projects/watchtower-lab/src/shell/pages/fragment.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
@@ -12,10 +12,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         once. Its events show in the Event Inspector marked ↪ lab-fragment;
         signing in or out there applies here too.
       </p>
-      <iframe
-        class="lab-fragment"
-        src="/fragment-frame/"
-        title="Lab fragment"></iframe>
+      <!-- In the browser only, once the shell runs: the frame reads this
+        tab's channel from it as it starts. -->
+      @defer {
+        <iframe
+          class="lab-fragment"
+          src="/fragment-frame/"
+          title="Lab fragment"></iframe>
+      }
     </section>
   `,
   styles: `
diff --git a/projects/watchtower-lab/src/shell/pages/wire.page.ts b/projects/watchtower-lab/src/shell/pages/wire.page.ts
index 38297b0..17ef594 100644
--- a/projects/watchtower-lab/src/shell/pages/wire.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/wire.page.ts
@@ -111,7 +111,7 @@ const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
             </tr>
           </thead>
           <tbody>
-            @for (event of rum(); track $index) {
+            @for (event of rum(); track event.id) {
               <tr>
                 <td>{{ event.receivedAt.slice(11, 19) }}</td>
                 <td>

From ffc4e095a3da60ba18a454b245147da31458a2e3 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 13:56:18 +0100
Subject: [PATCH 13/51] more to prev

---
 .../uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
index 7ff4883..200eeb9 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
@@ -288,8 +288,9 @@ describe('UwtRumTelemetrySink', () => {
 
       const config = AwsRumCtor.mock.calls[0][3] as { telemetries: unknown[] };
       // Strict: an explicit `undefined` or `null` would replace the SDK's default.
-      expect(config.telemetries).toStrictEqual([
-        ['http', { recordAllRequests: true }]
+      expect(config.telemetries[0]).toStrictEqual([
+        'http',
+        { recordAllRequests: true }
       ]);
       expect(config).not.toHaveProperty('pagesToInclude');
       expect(config).not.toHaveProperty('pagesToExclude');

From f18c5762fe3ae3da810b0c1acdad2ad641dbfe7d Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 17:27:46 +0100
Subject: [PATCH 14/51] add test

---
 projects/ngx-ui-watchtower/DESIGN.md            |  3 ++-
 .../sinks/uwt-broadcast/uwt-broadcast.spec.ts   | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 54e7d4e..b12b811 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -214,7 +214,8 @@ forwarding a fragment's events and logs — then publishes the same object to
 `UwtTelemetryMonitor`, inside the same fail-open block. So nothing is sent
 twice, and a hand-off that throws is not shown. A fragment's event appears
 once in each popup: as its own in the fragment's, as forwarded in the
-shell's.
+shell's — there with the shell's session and user, as sent (see Identity
+across realms).
 
 ### Packaging and internals
 
diff --git a/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts b/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts
index 3ec60e2..9028251 100644
--- a/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts
+++ b/projects/ngx-ui-watchtower/src/lib/sinks/uwt-broadcast/uwt-broadcast.spec.ts
@@ -608,6 +608,23 @@ describe('broadcast telemetry across realms', () => {
       expect(event.payload.userId).toBeUndefined();
     });
 
+    it('should show the shell monitor the record as stamped and sent', async () => {
+      const observed: UwtTelemetryObservedEvent[] = [];
+      shell.get(UwtTelemetryMonitor).events$.subscribe((e) => observed.push(e));
+
+      createFragment()
+        .get(UwtTelemetrySink)
+        .record(UWT_TELEMETRY_EVENT_TYPE.bi, {
+          eventName: 'x',
+          sessionId: 'expired-session'
+        });
+      await UwtBroadcastChannelStub.settle();
+
+      expect(observed.find((e) => e.kind === 'bi')?.payload).toMatchObject({
+        sessionId: 'test-session'
+      });
+    });
+
     it("should leave a custom event's payload as it is", async () => {
       createFragment()
         .get(UwtTelemetrySink)

From e7037bde3ff479218738a35791159f3da4c6fd48 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 20:31:09 +0100
Subject: [PATCH 15/51] cover everything

---
 README.md                                     |  70 +++--
 playwright/bi.spec.ts                         |  34 +++
 playwright/channel.spec.ts                    |  44 +++
 playwright/debug.spec.ts                      |  53 ++++
 playwright/destination.spec.ts                |  35 +++
 playwright/fragment.spec.ts                   |  36 ++-
 playwright/identity.spec.ts                   |  21 ++
 playwright/inspector-tools.spec.ts            | 213 +++++++++++++++
 playwright/inspector.spec.ts                  |  45 ++++
 playwright/lab.ts                             |  42 ++-
 playwright/logging.spec.ts                    |  85 +++++-
 playwright/privacy.spec.ts                    |  58 +++-
 playwright/rum-startup.spec.ts                | 191 +++++++++++++
 playwright/scenario-api.spec.ts               | 129 +++++++++
 playwright/scenarios.spec.ts                  |  90 ++++++-
 playwright/settings.spec.ts                   | 254 ++++++++++++++++++
 playwright/ssr.spec.ts                        |   4 +
 playwright/wire.spec.ts                       | 105 ++++++++
 projects/ngx-ui-watchtower/DESIGN.md          |  28 +-
 .../src/fragment.component.ts                 |   9 +
 projects/watchtower-lab/server/lab-backend.ts | 125 +++++++--
 .../watchtower-lab/src/lab/lab-channel.ts     |  25 +-
 .../watchtower-lab/src/lab/lab-custom.sink.ts |  61 +++++
 .../src/lab/lab-log-api.provider.ts           |  45 +++-
 .../watchtower-lab/src/lab/lab-options.ts     |  77 +++++-
 .../src/lab/lab-wire.service.ts               |  23 +-
 .../src/shell/pages/lifecycle.page.ts         |  17 ++
 .../src/shell/pages/logging.page.ts           |  65 ++++-
 .../src/shell/pages/privacy.page.ts           |  91 ++++++-
 .../src/shell/pages/scenarios.page.ts         | 170 +++++++++++-
 .../src/shell/pages/settings.page.ts          | 164 +++++++++++
 .../src/shell/pages/wire.page.ts              |  55 +++-
 .../src/shell/shell.component.ts              |   7 +
 .../src/shell/shell.config.server.ts          |   2 +
 .../watchtower-lab/src/shell/shell.config.ts  | 132 ++++++---
 .../watchtower-lab/src/telemetry.schema.ts    |  10 +
 36 files changed, 2467 insertions(+), 148 deletions(-)
 create mode 100644 playwright/channel.spec.ts
 create mode 100644 playwright/debug.spec.ts
 create mode 100644 playwright/destination.spec.ts
 create mode 100644 playwright/inspector-tools.spec.ts
 create mode 100644 playwright/rum-startup.spec.ts
 create mode 100644 playwright/scenario-api.spec.ts
 create mode 100644 playwright/settings.spec.ts
 create mode 100644 playwright/wire.spec.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-custom.sink.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/settings.page.ts

diff --git a/README.md b/README.md
index b9d9e55..5b429cf 100644
--- a/README.md
+++ b/README.md
@@ -78,33 +78,67 @@ Fragment** (the same second app in a plain iframe, and as a
 [Web Fragment](https://web-fragments.dev) through the server's gateway, each
 forwarding through the shell over the tab's own channel), **Event Inspector**
 (every dock, event generators, and the `--uwt-inspector-inset-*` opt-in on
-the lab's fixed header and status bar) and **On the wire**: what the mock
-backend actually received.
+the lab's fixed header and status bar), **On the wire**: what the mock
+backend actually received, and **Settings**: the library's settings in
+effect, a `?config=` overlay to edit, and the debug flags.
 
 Options, read once at startup like an app's configuration:
 
-| Query                   | Effect                                   |
-| ----------------------- | ---------------------------------------- |
-| `?destination=noop`     | The noop destination instead of RUM      |
-| `?telemetry=off`        | `withTelemetryEnabled(false)`            |
-| `?inspector=off`        | The Event Inspector disabled             |
-| `?inspector=noshortcut` | The Event Inspector without its shortcut |
+| Query                   | Effect                                                                                        |
+| ----------------------- | --------------------------------------------------------------------------------------------- |
+| `?destination=noop`     | The noop destination instead of RUM                                                           |
+| `?destination=custom`   | The lab's own sink, through `provideUwtTelemetryDestination`                                  |
+| `?telemetry=off`        | Telemetry off, through `withTelemetryEnabled`'s factory form                                  |
+| `?channel=shared`       | The shell on the default broadcast channel, shared by every tab: their hosts elect one leader |
+| `?inspector=off`        | The Event Inspector disabled                                                                  |
+| `?inspector=noshortcut` | The Event Inspector without its shortcut                                                      |
+| `?config=<JSON>`        | Library settings laid over the lab's own                                                      |
+
+`?config=` takes `identity` (`eventNamespace`), `scenarios`, `logging`, `bi`,
+`redaction` and `inspector`, each as its `with…` function or
+`provideUwtEventInspector` takes it, in JSON: a pattern is a `RegExp` source,
+and the one value transform is `mask-order-ids`. One more, `lab`, is the
+lab's own: `{ "logBatching": true }` makes its log provider batch, and send
+when the library flushes it. For example
+`?config={"scenarios":{"emitLifecycleEvents":true}}`.
 
 The mock RUM broker's answer is set on the **On the wire** page, then applied
-by reloading: `ok`, `null` (RUM off for the page), `fail` (the broker errors;
-the app carries on) or `short-expiry` (credentials refresh within seconds).
-The same page sets RUM's own `telemetries`: the library's default, or any of
-`errors`, `performance`, `interaction`, `http` and `replay`, down to none.
+by reloading:
+
+| Mode                        | The broker                                                   |
+| --------------------------- | ------------------------------------------------------------ |
+| `ok`                        | Answers normally                                             |
+| `null`                      | Turns RUM off for the page                                   |
+| `fail`                      | Errors; the app carries on                                   |
+| `short-expiry`              | Gives credentials that are refreshed within seconds          |
+| `flaky`                     | Fails twice, then answers: the sink retries, then catches up |
+| `invalid`                   | Sends a pattern as a string: the sink doesn't start RUM      |
+| `null-on-refresh`           | Turns RUM off at the first refresh                           |
+| `no-credentials-on-refresh` | Refreshes without credentials: the sink keeps the old ones   |
+
+The same page sets RUM's own `telemetries` (the library's default, or any of
+`errors`, `performance`, `interaction`, `http` and `replay`, down to none),
+and a JSON object laid over the broker's app monitor config, such as
+`{ "sessionSampleRate": 0 }`.
 
 ### Automated tests
 
 `npm run e2e` builds the lab and runs the suite in `playwright/` on Chromium
-and WebKit: every lab page, server rendering and hydration, both fragment
-pages and two tabs of one, the broker modes, RUM's telemetries, the query
-options and the Event Inspector's docks and shortcut, checked against what
-the mock backend received. It runs the built server on
-http://localhost:4390, beside `npm run lab`. The first time, download the
-browsers with `npx playwright install chromium webkit`.
+and WebKit, checking what the mock backend received against what each page
+sends. It covers every control on every lab page: the whole scenario API and
+`traceScenario`, BI events, logging and log queries, identity, redaction,
+flushing, server rendering and hydration, both fragment pages, two tabs on
+their own channels or one shared, a custom destination, every broker mode
+and RUM's start-up and refresh, RUM's telemetries, the library's settings
+through `?config=`, the debug flags, and the Event Inspector's docks,
+shortcut, pause, search, filters, export, paging and resizing. Internal edge
+cases — timers longer than 24 days, giving up after five minutes, no Web
+Locks or storage, message validation, start-up errors — are left to the unit
+tests.
+
+It runs the built server on http://localhost:4390, beside `npm run lab`. The
+first time, download the browsers with
+`npx playwright install chromium webkit`.
 
 ## Consumer smoke test
 
diff --git a/playwright/bi.spec.ts b/playwright/bi.spec.ts
index 9cedea0..961d934 100644
--- a/playwright/bi.spec.ts
+++ b/playwright/bi.spec.ts
@@ -25,3 +25,37 @@ test('two identical events at once arrive as one', async ({
   );
   expect(named(events, 'lab_double_fired')).toHaveLength(1);
 });
+
+test('clicking again within 400 ms adds nothing; after it, a second event', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Track a click');
+  await press(page, 'Track a click');
+  await page.waitForTimeout(600);
+  await press(page, 'Track a click');
+  // Tracked last, so once this arrives the clicks have had their chance.
+  await press(page, 'Fire twice at once');
+
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab_double_fired').length > 0
+  );
+  expect(named(events, 'lab_button_clicked')).toHaveLength(2);
+});
+
+test('an event tied to a feature and a scenario carries both', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Feature, tied to a scenario');
+  const events = await backend.rumUntil(
+    (e) =>
+      named(e, 'lab_feature_used').length > 0 &&
+      named(e, 'lab-happy-path').length > 0
+  );
+  expect(named(events, 'lab_feature_used')[0].details).toMatchObject({
+    feature: 'theme-switcher',
+    scenarioId: named(events, 'lab-happy-path')[0].details.scenarioId,
+    metadata: { theme: 'dark' }
+  });
+});
diff --git a/playwright/channel.spec.ts b/playwright/channel.spec.ts
new file mode 100644
index 0000000..ab9c344
--- /dev/null
+++ b/playwright/channel.spec.ts
@@ -0,0 +1,44 @@
+import { expect, named, openLab, press, test } from './lab';
+
+test("on a shared channel, one tab's host leads for every tab, and another takes over when it closes", async ({
+  context,
+  backend
+}) => {
+  // Both Event Inspectors open as panes, beside their fragments.
+  await context.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
+  const tabs = [await context.newPage(), await context.newPage()];
+  for (const tab of tabs) {
+    await openLab(tab, 'web-fragment?channel=shared');
+    await expect(tab.locator('web-fragment h1')).toHaveText('lab-fragment');
+    await tab.locator('.lab-header-button').click();
+    await expect(tab.locator('uwt-inspector')).toBeVisible();
+  }
+  const [first, second] = tabs;
+  await expect(first.locator('.lab-header')).toContainText('channel: shared');
+
+  // The second tab's fragment is heard by the first tab's host, the leader.
+  await press(second.locator('web-fragment'), 'Track a BI event');
+  await expect(first.locator('uwt-inspector')).toContainText(
+    'fragment_button_clicked'
+  );
+  await expect(second.locator('uwt-inspector')).not.toContainText(
+    'fragment_button_clicked'
+  );
+
+  // With the leader's tab gone, the second tab's host takes over.
+  await first.close();
+  await press(second.locator('web-fragment'), 'Run a scenario');
+  await expect(second.locator('uwt-inspector')).toContainText(
+    'fragment-journey'
+  );
+  const events = await backend.rumUntil(
+    (e) => named(e, 'fragment-journey').length > 0
+  );
+  expect(named(events, 'fragment_button_clicked')).toHaveLength(1);
+  expect(named(events, 'fragment-journey')).toHaveLength(1);
+});
diff --git a/playwright/debug.spec.ts b/playwright/debug.spec.ts
new file mode 100644
index 0000000..8898c58
--- /dev/null
+++ b/playwright/debug.spec.ts
@@ -0,0 +1,53 @@
+import { expect, navigate, openLab, press, test } from './lab';
+
+test('debug flags print what is sent, without a reload', async ({ page }) => {
+  const lines: string[] = [];
+  page.on('console', (m) => lines.push(m.text()));
+  await openLab(page, 'settings');
+  for (const flag of ['debugScenario', 'debugBI', 'debugLogger']) {
+    await page
+      .locator('cps-switch', { hasText: flag })
+      .locator('label.cps-switch')
+      .click();
+    await expect
+      .poll(() => page.evaluate((f) => localStorage.getItem(f), flag))
+      .toBe('true');
+  }
+
+  await navigate(page, 'BI events');
+  await press(page, 'Track a click');
+  await navigate(page, 'Scenarios');
+  await press(page, 'Complete, with 3 steps');
+  await navigate(page, 'Logging');
+  await press(page, 'warn');
+
+  await expect
+    .poll(() => lines)
+    .toEqual(
+      expect.arrayContaining([
+        expect.stringMatching(
+          /^\[watchtower-lab\]\[bi\] lab_button_clicked -> com\.uwt\.bi/
+        ),
+        expect.stringMatching(
+          /^\[watchtower-lab\]\[scenario\] lab-happy-path .*-> com\.uwt\.scenario/
+        ),
+        expect.stringMatching(/^\[watchtower-lab\]\[lab\] A lab warning/)
+      ])
+    );
+});
+
+test('debugLogger with a list prints only those loggers', async ({ page }) => {
+  const lines: string[] = [];
+  page.on('console', (m) => lines.push(m.text()));
+  await page.addInitScript(() => localStorage.setItem('debugLogger', 'noisy'));
+  await openLab(page, 'logging');
+
+  await press(page, 'warn');
+  await press(page, 'warn (written)');
+  await expect
+    .poll(() => lines)
+    .toContainEqual(
+      expect.stringMatching(/^\[watchtower-lab\]\[noisy\] A noisy warning/)
+    );
+  expect(lines.some((l) => l.includes('A lab warning'))).toBe(false);
+});
diff --git a/playwright/destination.spec.ts b/playwright/destination.spec.ts
new file mode 100644
index 0000000..3b6dd24
--- /dev/null
+++ b/playwright/destination.spec.ts
@@ -0,0 +1,35 @@
+import { expect, navigate, openLab, press, test } from './lab';
+
+test('a custom destination is started once, given every event classified, and RUM never loads', async ({
+  page,
+  backend
+}) => {
+  const rum: string[] = [];
+  page.on('request', (r) => {
+    if (/\/rum\/init|\/appmonitors\//.test(r.url())) {
+      rum.push(r.url());
+    }
+  });
+  await openLab(page, 'bi?destination=custom');
+  await expect(page.locator('.lab-header')).toContainText(
+    'destination: custom'
+  );
+
+  await press(page, 'Track a click');
+  await navigate(page, 'Scenarios');
+  await press(page, 'Fail with an error');
+  await navigate(page, 'Logging');
+  await press(page, 'error, with an Error');
+
+  await expect
+    .poll(async () => (await backend.custom()).map((e) => e.kind).sort())
+    .toEqual(['bi', 'error', 'init', 'scenario']);
+  const types = (await backend.custom()).map((e) => e.eventType);
+  expect(types).toContain('com.uwt.bi');
+  expect(types).toContain('com.uwt.scenario');
+  // Logs keep their own route.
+  expect((await backend.logs()).map((r) => r.message)).toEqual([
+    'Saving the order failed'
+  ]);
+  expect(rum).toEqual([]);
+});
diff --git a/playwright/fragment.spec.ts b/playwright/fragment.spec.ts
index 10b5c3e..feef276 100644
--- a/playwright/fragment.spec.ts
+++ b/playwright/fragment.spec.ts
@@ -10,6 +10,8 @@ import {
   test
 } from './lab';
 
+const CARLA = '5c8e2f14-1b7d-4a96-9e3c-8d2b7f4a6c10';
+
 /** The same fragment build, composed into the shell two ways. */
 const COMPOSITIONS: {
   name: string;
@@ -60,6 +62,7 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
     const clicked = named(events, 'fragment_button_clicked');
     expect(clicked).toHaveLength(1);
     expect(clicked[0].details.application).toBe('lab-fragment');
+    expect(named(events, 'fragment-journey')[0].details.status).toBe('success');
     await expect(fragment.locator('p').first()).toContainText(
       clicked[0].user.sessionId!.slice(0, 8)
     );
@@ -69,9 +72,40 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
       .toContain('lab-fragment');
     await press(fragment, 'Query its logs');
     await expect(fragment.locator('.lab-readout')).toContainText(
-      'answered by the shell'
+      /[1-9]\d* record\(s\), answered by the shell/
     );
 
     await expect(page.locator('uwt-inspector')).toContainText('↪ lab-fragment');
+
+    // Its errors are mirrored to RUM by the shell, named for the fragment.
+    await press(fragment, 'Log an error');
+    await backend.rumUntil((e) =>
+      e.some(
+        (event) =>
+          event.type === 'com.amazon.rum.js_error_event' &&
+          JSON.stringify(event.details).includes('[lab-fragment] Error')
+      )
+    );
+
+    // Signing in or out in the fragment applies to the shell.
+    await press(fragment, 'Sign in as Carla');
+    await expect(page.locator('.lab-status')).toContainText(CARLA);
+    await press(fragment, 'Sign out');
+    await expect(page.locator('.lab-status')).not.toContainText(CARLA);
   });
 }
+
+test('the fragment on its own, with no shell, carries on and sends nothing', async ({
+  page,
+  backend
+}) => {
+  await page.goto('/fragment-frame/');
+  await expect(page.locator('h1')).toHaveText('lab-fragment');
+  await press(page, 'Track a BI event');
+  await press(page, 'Log a warning');
+
+  await page.waitForTimeout(2000);
+  await expect(page.locator('p').first()).toContainText('Session — · user —');
+  expect(await backend.rum()).toEqual([]);
+  expect(await backend.logs()).toEqual([]);
+});
diff --git a/playwright/identity.spec.ts b/playwright/identity.spec.ts
index d32c830..96fdfee 100644
--- a/playwright/identity.spec.ts
+++ b/playwright/identity.spec.ts
@@ -9,6 +9,7 @@ import {
 } from './lab';
 
 const ANNA = '3f2504e0-4f89-41d3-9a0c-0305e82c3301';
+const BEN = '9b2d1c6e-7a53-4d0e-8f3b-2c1a5e6d7f80';
 
 const tracked = (events: RumEvent[]) =>
   events.filter((e) => e.details.eventName === 'lab_button_clicked');
@@ -33,6 +34,19 @@ test('after signing in, events carry the user and signedIn: true', async ({
   await expect(page.locator('.lab-header')).toContainText('Signed in');
 });
 
+test('signing in as someone else moves the next events to them', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Sign in as Ben');
+  await expect(page.locator('.lab-status')).toContainText(BEN);
+
+  await navigate(page, 'BI events');
+  await press(page, 'Track a click');
+  const events = await backend.rumUntil((e) => tracked(e).length > 0);
+  expect(tracked(events)[0].user.userId).toBe(BEN);
+});
+
 for (const signOut of ['Sign out (undefined)', "Sign out ('')"]) {
   test(`${signOut}: a new session, and events no longer carry the user`, async ({
     page,
@@ -42,6 +56,13 @@ for (const signOut of ['Sign out (undefined)', "Sign out ('')"]) {
     await press(page, signOut);
     await expect(page.locator('.lab-status')).not.toContainText(ANNA);
     await expect(page.locator('.lab-status')).not.toContainText(before);
+    await expect(page.locator('.lab-header')).toContainText('Signed out');
+
+    // Signing out again, with nobody signed in, changes nothing.
+    const after = await sessionStarted(page);
+    await press(page, signOut);
+    await page.waitForTimeout(1500);
+    await expect(page.locator('.lab-status')).toContainText(after);
 
     await navigate(page, 'BI events');
     await press(page, 'Track a click');
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
new file mode 100644
index 0000000..f4b3955
--- /dev/null
+++ b/playwright/inspector-tools.spec.ts
@@ -0,0 +1,213 @@
+import { readFile } from 'node:fs/promises';
+import { expect, openLab, Page, press, test } from './lab';
+
+/** Opens the lab's Event Inspector page, and the inspector in `dock`. */
+async function openInspector(page: Page, dock = 'right'): Promise<void> {
+  // Only the first time: a reload keeps what the inspector remembered.
+  await page.addInitScript((d) => {
+    const key = 'ngx-ui-watchtower.eventInspector';
+    if (!localStorage.getItem(key)) {
+      localStorage.setItem(key, JSON.stringify({ dock: d }));
+    }
+  }, dock);
+  await openLab(page, 'inspector');
+  await page.locator('.lab-header-button').click();
+  await expect(page.locator('uwt-inspector')).toBeVisible();
+}
+
+const section = (page: Page, title: string) =>
+  page.locator('uwt-inspector-section').filter({ hasText: title });
+
+test('pause holds new events back until Resume, and Clear empties it', async ({
+  page
+}) => {
+  await openInspector(page);
+  const inspector = page.locator('uwt-inspector');
+  const bi = section(page, 'BI telemetry');
+
+  await page
+    .locator('cps-switch', { hasText: 'Pause live updates' })
+    .locator('label.cps-switch')
+    .click();
+  await press(page, 'An unknown event type');
+  await expect(inspector).toContainText('1 new event held back while paused.');
+  await expect(bi).not.toContainText('com.example.custom');
+
+  await press(page, 'Resume');
+  await expect(bi).toContainText('com.example.custom');
+
+  await page.getByRole('button', { name: 'Clear captured events' }).click();
+  await expect(inspector).toContainText('Capturing from now.');
+  await expect(bi).not.toContainText('com.example.custom');
+});
+
+test('search and field filters narrow a section, until cleared', async ({
+  page
+}) => {
+  await openInspector(page);
+  await press(page, 'One of each kind');
+  await press(page, 'An unknown event type');
+  const bi = section(page, 'BI telemetry');
+  await expect(bi).toContainText('com.example.custom (unrecognised type)');
+
+  const search = page.getByRole('textbox', {
+    name: 'Search BI telemetry events'
+  });
+  await search.fill('each-kind');
+  await expect(bi).not.toContainText('com.example.custom');
+  await expect(bi).toContainText('lab_button_clicked');
+  await search.fill('');
+  await expect(bi).toContainText('com.example.custom');
+
+  await page
+    .getByRole('button', { name: 'Add a filter to BI telemetry' })
+    .click();
+  const builder = page.getByRole('group', {
+    name: 'New filter for BI telemetry'
+  });
+  await builder.getByRole('combobox', { name: 'Field' }).click();
+  await page.getByRole('option', { name: 'eventType', exact: true }).click();
+  await builder.getByRole('textbox', { name: 'Value' }).fill('com.example');
+  await builder.getByRole('button', { name: 'Add', exact: true }).click();
+  await expect(bi).not.toContainText('lab_button_clicked');
+  await expect(bi).toContainText('com.example.custom');
+
+  await page
+    .getByRole('button', { name: 'Clear filters for BI telemetry' })
+    .click();
+  await expect(bi).toContainText('lab_button_clicked');
+});
+
+test('Download JSON saves a section as a versioned file', async ({ page }) => {
+  await openInspector(page);
+  await press(page, 'One of each kind');
+  const bi = section(page, 'BI telemetry');
+  await expect(bi).toContainText('lab_button_clicked');
+
+  const download = page.waitForEvent('download');
+  await bi
+    .getByRole('button', { name: /^Download BI telemetry events as JSON/ })
+    .click();
+  const file = await download;
+  expect(file.suggestedFilename()).toMatch(
+    /^ngx-ui-watchtower-events-watchtower-lab-bi-\d{8}-\d{6}\.json$/
+  );
+  const exported = JSON.parse(await readFile(await file.path(), 'utf8'));
+  expect(exported).toMatchObject({
+    formatVersion: 1,
+    section: 'bi',
+    count: { captured: 1, droppedOldest: 0 }
+  });
+  expect(exported.events[0].payload.eventName).toBe('lab_button_clicked');
+});
+
+test('Copy JSON puts a section on the clipboard', async ({
+  page,
+  context,
+  browserName
+}) => {
+  test.skip(
+    browserName !== 'chromium',
+    'Playwright grants clipboard access in Chromium only'
+  );
+  await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+  await openInspector(page);
+  await press(page, 'One of each kind');
+  const bi = section(page, 'BI telemetry');
+  await expect(bi).toContainText('lab_button_clicked');
+
+  await bi
+    .getByRole('button', { name: 'Copy BI telemetry events as JSON' })
+    .click();
+  await expect(bi).toContainText('Copied');
+  const copied = await page.evaluate(() => navigator.clipboard.readText());
+  expect(JSON.parse(copied)).toMatchObject({
+    section: 'bi',
+    count: { captured: 1, droppedOldest: 0 }
+  });
+});
+
+test('pages 25 rows at a time, and offers the newest when more arrive', async ({
+  page
+}) => {
+  await openInspector(page);
+  await press(page, 'A burst of 600 BI events');
+  const bi = section(page, 'BI telemetry');
+  await expect(bi.locator('tbody tr')).toHaveCount(25);
+
+  await bi.getByRole('button', { name: /next page/i }).click();
+  await press(page, 'An unknown event type');
+  await expect(bi).toContainText('1 new on the first page.');
+  await bi.getByRole('button', { name: 'Go to newest' }).click();
+  await expect(bi.locator('tbody tr').first()).toContainText(
+    'com.example.custom'
+  );
+});
+
+test('the transparency slider makes the dialog see-through', async ({
+  page
+}) => {
+  await openInspector(page, 'dialog');
+  const dialog = page.locator('.cps-dialog');
+  await page.getByRole('slider', { name: 'Transparency' }).focus();
+  await page.keyboard.press('ArrowRight');
+  await expect
+    .poll(() => dialog.evaluate((e) => getComputedStyle(e).opacity))
+    .toBe('0.95');
+});
+
+test('a pane resizes by keyboard and by drag, and keeps its size', async ({
+  page
+}) => {
+  await openInspector(page);
+  const pane = page.locator('uwt-inspector-pane');
+  const width = async () => Math.round((await pane.boundingBox())!.width);
+  const start = await width();
+
+  const edge = page.getByRole('separator', {
+    name: 'Resize the Event Inspector'
+  });
+  await edge.focus();
+  await page.keyboard.press('ArrowLeft');
+  await expect.poll(width).toBe(start + 32);
+
+  const box = (await edge.boundingBox())!;
+  const y = box.y + 200;
+  await page.mouse.move(box.x + box.width / 2, y);
+  await page.mouse.down();
+  await page.mouse.move(box.x + box.width / 2 - 100, y, { steps: 5 });
+  await page.mouse.up();
+  await expect.poll(width).toBe(start + 132);
+
+  await page.reload();
+  await page.locator('.lab-header-button').click();
+  await expect.poll(width).toBe(start + 132);
+});
+
+test('a blocked window falls back to the dialog, and says so once', async ({
+  page
+}) => {
+  const warnings: string[] = [];
+  page.on('console', (m) => m.type() === 'warning' && warnings.push(m.text()));
+  await page.addInitScript(() => {
+    window.open = () => null;
+  });
+  await openLab(page, 'inspector');
+
+  await press(page, 'Separate window');
+  await expect(page.locator('.cps-dialog uwt-inspector')).toBeVisible();
+  expect(
+    warnings.filter((w) => w.includes('blocked the Event Inspector window'))
+  ).toHaveLength(1);
+});
+
+test('a mirrored error links back to its log event', async ({ page }) => {
+  await openInspector(page);
+  await press(page, 'One of each kind');
+  const logging = section(page, 'Logging');
+  await logging
+    .locator('tbody tr', { hasText: 'error → RUM' })
+    .getByRole('button', { name: 'Expand row' })
+    .click();
+  await expect(logging).toContainText(/Mirrored from\s*log event #\d+/);
+});
diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index ae2ae5f..4619983 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -35,6 +35,17 @@ test('opens from the header as a dialog, with the mark and the transparency slid
   await expect(dialog.locator('cps-slider')).toBeVisible();
 });
 
+test('the Dialog button moves it from a pane to the dialog', async ({
+  page
+}) => {
+  await press(page, 'Right pane');
+  await expect(page.locator('uwt-inspector-pane')).toBeVisible();
+
+  await press(page, 'Dialog');
+  await expect(page.locator('.cps-dialog uwt-inspector')).toBeVisible();
+  await expect(page.locator('uwt-inspector-pane')).toHaveCount(0);
+});
+
 test('Shift+E+I opens it, brings focus back, and closes it from inside — never while typing', async ({
   page
 }) => {
@@ -160,3 +171,37 @@ test('lists what is sent, keeping the newest 500 events per section', async ({
     /BI telemetry · 500 · last [\d:]{8} · oldest \d+ dropped/
   );
 });
+
+test('sorts each kind into its section, and shows any shape — an unrecognised type, odd values, a huge payload cut short', async ({
+  page
+}) => {
+  const section = (title: string) =>
+    page.locator('uwt-inspector-section').filter({ hasText: title });
+  const bi = section('BI telemetry');
+
+  await press(page, 'Right pane');
+  await press(page, 'One of each kind');
+  await press(page, 'An unknown event type');
+  await press(page, 'Odd shapes');
+
+  await expect(section('Scenario telemetry')).toContainText('lab-happy-path');
+  await expect(section('Logging')).toContainText(
+    'A warning, from the Event Inspector page'
+  );
+  await expect(section('Logging')).toContainText('error → RUM');
+  await expect(bi).toContainText('com.example.custom (unrecognised type)');
+
+  const expand = (eventName: string) =>
+    bi
+      .locator('tbody tr', { hasText: eventName })
+      .getByRole('button', { name: 'Expand row' })
+      .click();
+
+  await expand('lab_odd_shapes');
+  await expect(bi).toContainText('Zürich · 東京 · 🚀');
+  await expect(bi.locator('.uwt-inspector-section__error')).toHaveCount(0);
+
+  await press(page, 'A 300,000-character payload');
+  await expand('lab_huge_payload');
+  await expect(bi).toContainText('Large payload: showing the first');
+});
diff --git a/playwright/lab.ts b/playwright/lab.ts
index 3d3165d..ea609e2 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -23,9 +23,20 @@ export interface LogRecord {
   logger: string;
   level: string;
   message: string;
+  context?: string;
+  metadata?: Record<string, unknown>;
+  error?: { name: string; message: string; stack?: string };
 }
 
-export type BrokerMode = 'ok' | 'null' | 'fail' | 'short-expiry';
+export type BrokerMode =
+  | 'ok'
+  | 'null'
+  | 'fail'
+  | 'short-expiry'
+  | 'flaky'
+  | 'invalid'
+  | 'null-on-refresh'
+  | 'no-credentials-on-refresh';
 export type Telemetry =
   'errors' | 'performance' | 'interaction' | 'http' | 'replay';
 
@@ -45,8 +56,15 @@ export class LabBackend {
     return (await this.request.get('/__lab/logs')).json();
   }
 
+  /** What the lab's custom sink was given, with `?destination=custom`. */
+  async custom(): Promise<{ kind: string; eventType?: string }[]> {
+    return (await this.request.get('/__lab/custom')).json();
+  }
+
   async state(): Promise<{
     brokerMode: BrokerMode;
+    brokerCalls: number;
+    brokerConfig: Record<string, unknown>;
     telemetries: Telemetry[] | null;
   }> {
     return (await this.request.get('/__lab/state')).json();
@@ -73,6 +91,11 @@ export class LabBackend {
     await this.request.post('/__lab/broker-mode', { data: { mode } });
   }
 
+  /** Laid over the broker's app monitor config. */
+  async setBrokerConfig(config: Record<string, unknown>): Promise<void> {
+    await this.request.post('/__lab/broker-config', { data: { config } });
+  }
+
   /** RUM's own telemetries the broker names; `null` for the library's default. */
   async setTelemetries(telemetries: Telemetry[] | null): Promise<void> {
     await this.request.post('/__lab/telemetries', { data: { telemetries } });
@@ -97,6 +120,7 @@ export const test = base.extend<{
     async ({ request }, use) => {
       const backend = new LabBackend(request);
       await backend.setBrokerMode('ok');
+      await backend.setBrokerConfig({});
       await backend.setTelemetries(null);
       await backend.reset();
       await use(backend);
@@ -129,11 +153,19 @@ export { expect };
 export type { FrameLocator, Locator, Page };
 
 /**
- * Opens a lab page by its address, e.g. `'bi?telemetry=off'`, and waits until
- * it has hydrated: the server's page shows before it answers clicks.
+ * Opens a lab page by its address, e.g. `'bi?telemetry=off'`, with `config` as
+ * its `?config=` overlay, and waits until it has hydrated: the server's page
+ * shows before it answers clicks.
  */
-export async function openLab(page: Page, address: string): Promise<void> {
-  await page.goto(`/${address}`);
+export async function openLab(
+  page: Page,
+  address: string,
+  config?: object
+): Promise<void> {
+  const overlay = config
+    ? `${address.includes('?') ? '&' : '?'}config=${encodeURIComponent(JSON.stringify(config))}`
+    : '';
+  await page.goto(`/${address}${overlay}`);
   await expect(page.locator('html[data-lab-ready]')).toHaveCount(1);
   await expect(page.locator('lab-root main h1').first()).toBeVisible();
 }
diff --git a/playwright/logging.spec.ts b/playwright/logging.spec.ts
index d6fb57f..70553aa 100644
--- a/playwright/logging.spec.ts
+++ b/playwright/logging.spec.ts
@@ -1,26 +1,39 @@
-import { expect, openLab, press, sessionStarted, test } from './lab';
+import { expect, LogRecord, openLab, press, sessionStarted, test } from './lab';
 
 test.beforeEach(async ({ page }) => {
   await openLab(page, 'logging');
   await sessionStarted(page);
 });
 
-test('records reach the log backend, and the noisy logger drops its log line', async ({
+test('records reach the log backend, and the noisy logger writes only warnings and up', async ({
   page,
   backend
 }) => {
-  await press(page, 'error, with an Error');
+  await press(page, 'log');
   await press(page, 'log (dropped)');
-  await press(page, 'warn');
+  await press(page, 'warn (written)');
+  // Written last, so once it arrives the others have had their chance.
+  await press(page, 'error, with an Error');
 
   await expect
     .poll(async () => (await backend.logs()).map((r) => r.level))
-    .toEqual(expect.arrayContaining(['error', 'warn']));
-  const logs = await backend.logs();
-  expect(logs.some((r) => r.logger === 'lab' && r.level === 'error')).toBe(
-    true
-  );
-  expect(logs.some((r) => r.message === 'Not written')).toBe(false);
+    .toContain('error');
+  const written = (await backend.logs()).map((r) => `${r.logger}:${r.level}`);
+  expect(written.sort()).toEqual(['lab:error', 'lab:log', 'noisy:warn']);
+});
+
+test('an error record carries its context, metadata and error', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'error, with an Error');
+  await expect.poll(async () => (await backend.logs()).length).toBe(1);
+  expect((await backend.logs())[0]).toMatchObject({
+    message: 'Saving the order failed',
+    context: 'checkout',
+    metadata: { orderId: 'A-1001' },
+    error: { name: 'Error', message: 'Connection reset' }
+  });
 });
 
 test('query() reads records back from the backend', async ({ page }) => {
@@ -43,3 +56,55 @@ test('an error is mirrored to RUM', async ({ page, backend }) => {
     )
   );
 });
+
+test('a query filter finds records by correlationId, by level and by time', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Log inside a scenario');
+  await press(page, 'error, with an Error');
+  await expect.poll(async () => (await backend.logs()).length).toBe(2);
+  const readout = page.locator('.lab-readout').last();
+  const found = async () =>
+    (JSON.parse((await readout.textContent())!) as LogRecord[]).map(
+      (r) => r.message
+    );
+
+  // The filter now names the scenario's id.
+  await press(page, 'Run the query');
+  await expect(readout).toContainText('Inside a journey');
+  expect(await found()).toEqual(['Inside a journey']);
+
+  const filter = page.getByRole('textbox', { name: 'Query filter (JSON)' });
+  await filter.fill('{ "minLevel": "error" }');
+  await press(page, 'Run the query');
+  await expect(readout).toContainText('Saving the order failed');
+  expect(await found()).toEqual(['Saving the order failed']);
+
+  const later = new Date(Date.now() + 60_000).toISOString();
+  await filter.fill(`{ "from": "${later}" }`);
+  await press(page, 'Run the query');
+  await expect(readout).toHaveText('[]');
+});
+
+test('a batching log provider is flushed as the page is hidden', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'logging', { lab: { logBatching: true } });
+  await press(page, 'warn');
+  await page.waitForTimeout(1500);
+  expect(await backend.logs()).toEqual([]);
+
+  await page.evaluate(() => {
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      get: () => 'hidden'
+    });
+    document.dispatchEvent(new Event('visibilitychange'));
+  });
+  // Well before the provider's own 10-second batch.
+  await expect
+    .poll(async () => (await backend.logs()).length, { timeout: 3000 })
+    .toBe(1);
+});
diff --git a/playwright/privacy.spec.ts b/playwright/privacy.spec.ts
index 979c142..ca72a69 100644
--- a/playwright/privacy.spec.ts
+++ b/playwright/privacy.spec.ts
@@ -7,15 +7,23 @@ const PERSONAL = [
   'hunter2',
   'eyJhbGci',
   '10.1.2.3',
-  '555 0123'
+  '555 0123',
+  '123-45-6789'
 ];
 
 test('personal values never reach RUM or the log backend', async ({
   page,
   backend
 }) => {
+  await page.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
   await openLab(page, 'privacy');
   await sessionStarted(page);
+  await page.locator('.lab-header-button').click();
   await press(page, 'As BI metadata');
   await press(page, 'In a log message');
   await press(page, 'In a failing scenario');
@@ -31,5 +39,53 @@ test('personal values never reach RUM or the log backend', async ({
   const sent = JSON.stringify([events, await backend.logs()]);
 
   expect(PERSONAL.filter((value) => sent.includes(value))).toEqual([]);
+  expect(sent).toContain('[redacted]');
   expect(named(events, 'lab_privacy_checked')).toHaveLength(1);
+
+  // Nor in what the Event Inspector shows.
+  const shown = await page.locator('uwt-inspector').textContent();
+  expect(PERSONAL.filter((value) => shown!.includes(value))).toEqual([]);
+});
+
+test('errors of any shape are normalized: a string scrubbed, an object reduced to its type, an HTTP error without its query', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'privacy');
+  await press(page, 'An error as a string');
+  await press(page, 'An error as a plain object');
+  await press(page, 'An HttpErrorResponse');
+
+  await expect.poll(async () => (await backend.logs()).length).toBe(3);
+  const errors = Object.fromEntries(
+    (await backend.logs()).map((r) => [r.message, r.error])
+  );
+  expect(errors['The string error']).toEqual({
+    name: 'Error',
+    message: 'Lookup failed for [redacted]'
+  });
+  expect(errors['The object error']).toEqual({
+    name: 'UnknownError',
+    message: '[redacted]'
+  });
+  const http = errors['The http error']!;
+  expect(http.name).toBe('HttpErrorResponse');
+  expect(http.message).toContain('https://shop.example/api/customers');
+  expect(http.message).toContain('404 Not Found');
+  expect(http.message).not.toContain('?email');
+});
+
+test('the scrub playground shows what the library makes of any text', async ({
+  page
+}) => {
+  await openLab(page, 'privacy');
+  await page
+    .getByRole('textbox', { name: 'Text to scrub' })
+    .fill('Call +27 82 555 0123 about https://shop.example/a?session=1');
+  const scrubbed = page.locator('.lab-scrubbed');
+  await expect(scrubbed).toContainText(
+    '"uwtScrubString": "Call [redacted] about https://shop.example/a"'
+  );
+  await expect(scrubbed).toContainText('"password": "[redacted]"');
+  await expect(scrubbed).not.toContainText('555 0123');
 });
diff --git a/playwright/rum-startup.spec.ts b/playwright/rum-startup.spec.ts
new file mode 100644
index 0000000..b2cff61
--- /dev/null
+++ b/playwright/rum-startup.spec.ts
@@ -0,0 +1,191 @@
+import {
+  expect,
+  named,
+  navigate,
+  openLab,
+  Page,
+  press,
+  RumEvent,
+  sessionStarted,
+  test
+} from './lab';
+
+const clicks = (events: RumEvent[]) => named(events, 'lab_button_clicked');
+
+/** Console warnings, and the requests to RUM's dataplane, as they happen. */
+function watch(page: Page): { warnings: string[]; sent: string[] } {
+  const seen = { warnings: [] as string[], sent: [] as string[] };
+  page.on('console', (m) => {
+    if (m.type() === 'warning') {
+      seen.warnings.push(m.text());
+    }
+  });
+  page.on('request', (r) => {
+    if (r.url().includes('/appmonitors/')) {
+      seen.sent.push(r.url());
+    }
+  });
+  return seen;
+}
+
+test('a broker that fails at first: RUM retries, then sends what was tracked meanwhile', async ({
+  page,
+  backend
+}) => {
+  const { warnings } = watch(page);
+  await backend.setBrokerMode('flaky');
+  await openLab(page, 'bi');
+  await press(page, 'Track a click');
+
+  await sessionStarted(page);
+  const events = await backend.rumUntil((e) => clicks(e).length > 0);
+  expect(clicks(events)).toHaveLength(1);
+  expect((await backend.state()).brokerCalls).toBe(3);
+  expect(warnings).toContainEqual(
+    expect.stringContaining('RUM init failed, retrying')
+  );
+});
+
+test('settings of the wrong type: RUM never starts, and the console says which', async ({
+  page,
+  backend
+}) => {
+  const { warnings, sent } = watch(page);
+  await backend.setBrokerMode('invalid');
+  await openLab(page, 'bi');
+  await press(page, 'Track a click');
+
+  await expect
+    .poll(() => warnings)
+    .toContainEqual(
+      expect.stringContaining(
+        'RUM not started, settings of the wrong type: pagesToExclude'
+      )
+    );
+  // RUM would have sent within two of its 2-second dispatches.
+  await page.waitForTimeout(4500);
+  expect(sent).toEqual([]);
+});
+
+test('settings left null count as unset: RUM starts as usual', async ({
+  page,
+  backend
+}) => {
+  const { warnings } = watch(page);
+  await backend.setBrokerConfig({
+    pagesToInclude: null,
+    sessionSampleRate: null,
+    telemetries: null
+  });
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+  await press(page, 'Track a click');
+  await backend.rumUntil((e) => clicks(e).length > 0);
+  expect(warnings.filter((w) => w.includes('RUM not started'))).toEqual([]);
+});
+
+test('a refresh answered with null turns RUM off for the page', async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerMode('null-on-refresh');
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+  await press(page, 'Track a click');
+  await backend.rumUntil((e) => clicks(e).length > 0);
+
+  await expect
+    .poll(async () => (await backend.state()).brokerCalls, { timeout: 15_000 })
+    .toBe(2);
+  await page.waitForTimeout(500);
+  await press(page, 'Fire twice at once');
+  await page.waitForTimeout(4500);
+  expect(named(await backend.rum(), 'lab_double_fired')).toEqual([]);
+});
+
+test('a refresh without credentials keeps the old ones: events still arrive', async ({
+  page,
+  backend
+}) => {
+  const { warnings } = watch(page);
+  await backend.setBrokerMode('no-credentials-on-refresh');
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+
+  await expect
+    .poll(async () => (await backend.state()).brokerCalls, { timeout: 15_000 })
+    .toBe(2);
+  await expect
+    .poll(() => warnings)
+    .toContainEqual(expect.stringContaining('RUM credential refresh'));
+  await press(page, 'Track a click');
+  await backend.rumUntil((e) => clicks(e).length > 0);
+});
+
+test('a session sampled out sends nothing', async ({ page, backend }) => {
+  const { sent } = watch(page);
+  await backend.setBrokerConfig({ sessionSampleRate: 0 });
+  await openLab(page, 'bi');
+  await press(page, 'Track a click');
+  await page.waitForTimeout(4500);
+  expect(sent).toEqual([]);
+});
+
+test('without cookies, scenario records carry no sessionElapsed', async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerConfig({ allowCookies: false });
+  await openLab(page, 'scenarios');
+  await sessionStarted(page);
+  await press(page, 'Complete, with 3 steps');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-happy-path').length > 0
+  );
+  expect(named(events, 'lab-happy-path')[0].details).not.toHaveProperty(
+    'sessionElapsed'
+  );
+});
+
+test('before the first setUserId, events carry no signedIn', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+  await press(page, 'Track a click');
+  const events = await backend.rumUntil((e) => clicks(e).length > 0);
+  expect(clicks(events)[0].metadata).not.toHaveProperty('signedIn');
+});
+
+test('recordPageView adds a page view of its own', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'lifecycle');
+  await sessionStarted(page);
+  await press(page, 'Record a page view');
+  await backend.rumUntil((e) =>
+    e.some(
+      (event) =>
+        event.type === 'com.amazon.rum.page_view_event' &&
+        event.details.pageId === '/lab/virtual-page'
+    )
+  );
+});
+
+test('Flush now sends at once what would wait for the next batch', async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerConfig({ dispatchInterval: 60_000 });
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+  await press(page, 'Track a click');
+  await page.waitForTimeout(3000);
+  expect(clicks(await backend.rum())).toEqual([]);
+
+  await navigate(page, 'Lifecycle');
+  await press(page, 'Flush now');
+  await backend.rumUntil((e) => clicks(e).length > 0, 3000);
+});
diff --git a/playwright/scenario-api.spec.ts b/playwright/scenario-api.spec.ts
new file mode 100644
index 0000000..f5cf32c
--- /dev/null
+++ b/playwright/scenario-api.spec.ts
@@ -0,0 +1,129 @@
+import { expect, named, openLab, press, sessionStarted, test } from './lab';
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'scenarios');
+  await sessionStarted(page);
+});
+
+test('steps carry their detail, a failed step leaves the scenario running, and the outcome lands on the record', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Steps with detail');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-detailed').length > 0
+  );
+  const record = named(events, 'lab-detailed')[0].details;
+  expect(record).toMatchObject({
+    status: 'success',
+    statusCode: 200,
+    message: 'Saved',
+    reason: 'all-valid',
+    metadata: { orders: 2, source: 'lab' },
+    stepCount: 2
+  });
+  const step = (name: string) =>
+    record.steps.find((s: { name: string }) => s.name === name);
+  expect(step('fetch')).toMatchObject({
+    status: 'success',
+    message: 'Fetched',
+    metadata: { rows: 3 }
+  });
+  expect(step('validate')).toMatchObject({
+    status: 'failure',
+    reason: 'validation',
+    error: { message: 'Row 2 is invalid' }
+  });
+});
+
+test('a child names its parent, with its feature, operation and route', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'A parent and a child');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-parent').length > 0 && named(e, 'lab-child').length > 0
+  );
+  expect(named(events, 'lab-child')[0].details).toMatchObject({
+    parentScenarioId: named(events, 'lab-parent')[0].details.scenarioId,
+    feature: 'checkout',
+    operation: 'pay',
+    route: '/orders/:id'
+  });
+});
+
+test("settle() settles with the status it's given", async ({
+  page,
+  backend
+}) => {
+  await press(page, "settle('incomplete')");
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-settled').length > 0
+  );
+  expect(named(events, 'lab-settled')[0].details).toMatchObject({
+    status: 'incomplete',
+    reason: 'no-results'
+  });
+});
+
+test('more than 50 active scenarios draws a warning in development', async ({
+  page
+}) => {
+  const warnings: string[] = [];
+  page.on('console', (m) => m.type() === 'warning' && warnings.push(m.text()));
+  await press(page, '51 at once');
+  await expect
+    .poll(() => warnings)
+    .toContainEqual(
+      expect.stringContaining('High number of active scenarios (51)')
+    );
+});
+
+test('the lookups find an active scenario, until it settles', async ({
+  page,
+  backend
+}) => {
+  const readout = page.locator('.lab-readout').last();
+  const lookups = async () => JSON.parse((await readout.textContent())!);
+
+  await press(page, 'Start a long one');
+  await expect(readout).toContainText('"find": "lab-long"');
+  const found = await lookups();
+  expect(found.getActive).toContain('lab-long');
+  expect(found.findByName).toHaveLength(1);
+  expect(found.findByNameAndId).toBe(found.findByName[0]);
+
+  await press(page, 'Cancel every active one');
+  await expect(readout).toContainText('"getActive": []');
+  const events = await backend.rumUntil((e) => named(e, 'lab-long').length > 0);
+  expect(named(events, 'lab-long')[0].details.status).toBe('abandoned');
+});
+
+test("traceScenario's options: an outcome from the value, a cancel outcome, and a value then teardown", async ({
+  page,
+  backend
+}) => {
+  await press(page, 'outcome, from the response');
+  await press(page, 'cancelOutcome, unsubscribed early');
+  await press(page, "valueThenTeardown: 'cancel'");
+
+  const events = await backend.rumUntil((e) =>
+    ['lab-trace-outcome', 'lab-trace-cancel', 'lab-trace-teardown'].every(
+      (name) => named(e, name).length > 0
+    )
+  );
+  expect(named(events, 'lab-trace-outcome')[0].details).toMatchObject({
+    status: 'success',
+    statusCode: 200,
+    message: 'Data arrived'
+  });
+  expect(named(events, 'lab-trace-cancel')[0].details).toMatchObject({
+    status: 'abandoned',
+    reason: 'navigated-away',
+    metadata: { abandonedBy: 'caller' }
+  });
+  expect(named(events, 'lab-trace-teardown')[0].details).toMatchObject({
+    status: 'abandoned',
+    metadata: { abandonedBy: 'caller' }
+  });
+});
diff --git a/playwright/scenarios.spec.ts b/playwright/scenarios.spec.ts
index 2060bb3..32327b4 100644
--- a/playwright/scenarios.spec.ts
+++ b/playwright/scenarios.spec.ts
@@ -24,25 +24,105 @@ test('a settled scenario arrives once, its steps packed inside, with the identit
   expect(happy[0].details).toMatchObject({
     status: 'success',
     stepCount: 3,
-    application: 'watchtower-lab'
+    application: 'watchtower-lab',
+    // RUM's session cookie dates the session's start.
+    sessionElapsed: expect.any(Number)
   });
 });
 
-test('a failing scenario arrives as a failure', async ({ page, backend }) => {
+test('a failing scenario arrives as a failure, with its error and status code', async ({
+  page,
+  backend
+}) => {
   await press(page, 'Fail with an error');
   const events = await backend.rumUntil(
     (e) => named(e, 'lab-failure').length > 0
   );
-  expect(named(events, 'lab-failure')[0].details.status).toBe('failure');
+  expect(named(events, 'lab-failure')[0].details).toMatchObject({
+    status: 'failure',
+    statusCode: 503,
+    error: { name: 'Error', message: 'The backend said no' }
+  });
+});
+
+test('cancel, incomplete and a timeout each settle with their own status', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Cancel');
+  await press(page, 'Incomplete');
+  await press(page, 'Time out after 1.5 s');
+
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-timeout').length > 0
+  );
+  expect(named(events, 'lab-cancel')[0].details).toMatchObject({
+    status: 'abandoned',
+    metadata: { abandonedBy: 'caller' }
+  });
+  expect(named(events, 'lab-incomplete')[0].details.status).toBe('incomplete');
+  expect(named(events, 'lab-timeout')[0].details).toMatchObject({
+    status: 'timeout',
+    message: 'Scenario did not settle within 1500ms'
+  });
 });
 
-test('HTTP scenarios settle through traceScenario', async ({
+test('a backdated start and aggregated batches count in the timing', async ({
+  page,
+  backend
+}) => {
+  await press(page, 'Backdated by 1.5 s');
+  await press(page, '5 aggregated batches');
+
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-aggregates').length > 0
+  );
+  expect(
+    named(events, 'lab-backdated')[0].details.delta
+  ).toBeGreaterThanOrEqual(1500);
+  const [batch] = named(events, 'lab-aggregates')[0].details.aggregates;
+  expect(batch).toMatchObject({ name: 'batch', callCount: 5 });
+  expect(batch.elapsed).toBeGreaterThanOrEqual(150);
+});
+
+test('HTTP scenarios settle through traceScenario, a failed request as a failure', async ({
   page,
   backend
 }) => {
   await press(page, 'Request (600 ms)');
-  const events = await backend.rumUntil((e) => named(e, 'lab-http').length > 0);
+  await press(page, 'Request that fails (500)');
+  const events = await backend.rumUntil(
+    (e) =>
+      named(e, 'lab-http').length > 0 && named(e, 'lab-http-error').length > 0
+  );
   expect(named(events, 'lab-http')[0].details.status).toBe('success');
+  const failed = named(events, 'lab-http-error')[0].details;
+  expect(failed.status).toBe('failure');
+  expect(failed.error.name).toBe('HttpErrorResponse');
+  expect(failed.error.message).toContain('500');
+});
+
+test('toRecord() shows a running scenario; completing it sends it once', async ({
+  page,
+  backend
+}) => {
+  const readout = page.locator('.lab-readout').first();
+  await press(page, 'Start');
+  await expect(readout).toContainText('"scenarioName": "lab-happy-path"');
+  const running = JSON.parse((await readout.textContent())!);
+  expect(running.status).toBeUndefined();
+  expect(running.steps.map((s: { name: string }) => s.name)).toContain('fetch');
+  expect(named(await backend.rum(), 'lab-happy-path')).toHaveLength(0);
+
+  await press(page, 'Complete it');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-happy-path').length > 0
+  );
+  expect(named(events, 'lab-happy-path')).toHaveLength(1);
+  expect(named(events, 'lab-happy-path')[0].details).toMatchObject({
+    status: 'success',
+    stepCount: 1
+  });
 });
 
 test('switchMap supersession: earlier searches are abandoned by the caller, the last succeeds', async ({
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
new file mode 100644
index 0000000..8903da8
--- /dev/null
+++ b/playwright/settings.spec.ts
@@ -0,0 +1,254 @@
+import {
+  expect,
+  LogRecord,
+  named,
+  navigate,
+  openLab,
+  Page,
+  press,
+  sessionStarted,
+  test
+} from './lab';
+
+/** The Event Inspector opens as a pane, beside the page's buttons. */
+const asPane = (page: Page) =>
+  page.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
+
+/** Waits for the log backend to hold one record, and returns it. */
+async function onlyLog(backend: {
+  logs(): Promise<LogRecord[]>;
+}): Promise<LogRecord> {
+  await expect.poll(async () => (await backend.logs()).length).toBe(1);
+  return (await backend.logs())[0];
+}
+
+test('the Settings page applies an overlay, shows it in effect, and goes back', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  await expect(page.locator('.lab-header')).not.toContainText('config:');
+
+  await page
+    .getByRole('textbox', { name: '?config= (JSON)' })
+    .fill('{ "bi": { "dedupWindowMs": 0 } }');
+  await press(page, 'Apply and reload');
+  await expect(page.locator('.lab-header')).toContainText('config: custom');
+  await expect(page.locator('.lab-readout')).toContainText(
+    '"dedupWindowMs": 0'
+  );
+
+  await press(page, "Back to the lab's settings");
+  await expect(page.locator('.lab-header')).not.toContainText('config:');
+  await expect(page.locator('.lab-readout')).toContainText(
+    '"dedupWindowMs": 400'
+  );
+});
+
+test('eventNamespace renames the event types, and the inspector still sorts them', async ({
+  page,
+  backend
+}) => {
+  await asPane(page);
+  await openLab(page, 'bi', { identity: { eventNamespace: 'com.acme' } });
+  await sessionStarted(page);
+  await page.locator('.lab-header-button').click();
+  await press(page, 'Track a click');
+
+  await backend.rumUntil((e) =>
+    e.some(
+      (event) =>
+        event.type === 'com.acme.bi' &&
+        event.details.eventName === 'lab_button_clicked'
+    )
+  );
+  await expect(
+    page.locator('uwt-inspector-section').filter({ hasText: 'BI telemetry' })
+  ).toContainText('lab_button_clicked');
+});
+
+test('scenario settings: step events, user timings, and a step limit', async ({
+  page,
+  backend
+}) => {
+  // The library clears each measure once made; an observer still sees it.
+  await page.addInitScript(() => {
+    const seen: string[] = ((window as { labMeasures?: string[] }).labMeasures =
+      []);
+    new PerformanceObserver((list) =>
+      seen.push(...list.getEntries().map((e) => e.name))
+    ).observe({ entryTypes: ['measure'] });
+  });
+  await openLab(page, 'scenarios', {
+    scenarios: { emitLifecycleEvents: true, userTimings: true, maxSteps: 2 }
+  });
+  await sessionStarted(page);
+  await press(page, 'Complete, with 3 steps');
+
+  const events = await backend.rumUntil((e) =>
+    named(e, 'lab-happy-path').some((x) => x.type === 'com.uwt.scenario')
+  );
+  const happy = named(events, 'lab-happy-path');
+  const of = (type: string) => happy.filter((e) => e.type === type);
+  expect(of('com.uwt.scenario')[0].details).toMatchObject({
+    stepCount: 3,
+    exceededStepsLimit: true
+  });
+  // Only stored steps are sent on their own: two, not three.
+  expect(of('com.uwt.scenario.step').map((e) => e.details.name)).toEqual([
+    'fetch',
+    'validate'
+  ]);
+  expect(
+    await page.evaluate(
+      () => (window as { labMeasures?: string[] }).labMeasures
+    )
+  ).toContain('lab-happy-path [fetch]');
+});
+
+test('BI dedup can be switched off', async ({ page, backend }) => {
+  await openLab(page, 'bi', { bi: { dedupWindowMs: 0 } });
+  await sessionStarted(page);
+  await press(page, 'Fire twice at once');
+  await press(page, 'Track a click');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab_button_clicked').length > 0
+  );
+  expect(named(events, 'lab_double_fired')).toHaveLength(2);
+});
+
+test('logging settings: a higher floor, and errors not mirrored to RUM', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'logging', {
+    logging: { minLevel: 'warn', mirrorErrorsToRum: false }
+  });
+  await sessionStarted(page);
+  await press(page, 'log');
+  await press(page, 'warn');
+  await press(page, 'error, with an Error');
+  await expect
+    .poll(async () => (await backend.logs()).map((r) => r.level).sort())
+    .toEqual(['error', 'warn']);
+
+  // Tracked after the error, so a mirror would have arrived by now.
+  await navigate(page, 'BI events');
+  await press(page, 'Track a click');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab_button_clicked').length > 0
+  );
+  expect(events.map((e) => e.type)).not.toContain(
+    'com.amazon.rum.js_error_event'
+  );
+});
+
+test('redaction: a value transform, a length cap, and no stacks', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'logging', {
+    redaction: {
+      extraValueTransforms: ['mask-order-ids'],
+      maxStringLength: 12,
+      includeStack: false
+    }
+  });
+  await press(page, 'error, with an Error');
+  const record = await onlyLog(backend);
+  expect(record.metadata).toEqual({ orderId: 'A-****' });
+  // Twelve characters kept, then the ellipsis.
+  expect(record.message).toBe('Saving the o…');
+  expect(record.error!.message).toBe('Connection r…');
+  expect(record.error!.stack).toBeUndefined();
+});
+
+test('redaction: extra key and value patterns', async ({ page, backend }) => {
+  await openLab(page, 'logging', {
+    redaction: {
+      extraKeyPatterns: ['^orderId$'],
+      extraValuePatterns: ['Connection \\w+']
+    }
+  });
+  await press(page, 'error, with an Error');
+  const record = await onlyLog(backend);
+  expect(record.metadata).toEqual({ orderId: '[redacted]' });
+  expect(record.error!.message).not.toContain('Connection reset');
+});
+
+test('redaction: URL queries kept when stripUrlQuery is off', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'scenarios', { redaction: { stripUrlQuery: false } });
+  await sessionStarted(page);
+  await press(page, 'Request that fails (500)');
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab-http-error').length > 0
+  );
+  expect(named(events, 'lab-http-error')[0].details.error.message).toContain(
+    '?status=500'
+  );
+});
+
+test('redact: false for logging stops its value scan only; BI still scans, and key names always redact', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'privacy', { logging: { redact: false } });
+  await sessionStarted(page);
+  await press(page, 'As BI metadata');
+  await press(page, 'In a log message');
+
+  const record = await onlyLog(backend);
+  expect(record.message).toContain('anna.smith@example.com');
+  expect(record.metadata!.password).toBe('[redacted]');
+
+  const events = await backend.rumUntil(
+    (e) => named(e, 'lab_privacy_checked').length > 0
+  );
+  expect(JSON.stringify(named(events, 'lab_privacy_checked'))).not.toContain(
+    'anna.smith@example.com'
+  );
+});
+
+test('inspector settings: a custom shortcut, a smaller section, a smaller view', async ({
+  page
+}) => {
+  await asPane(page);
+  await openLab(page, 'inspector', {
+    inspector: {
+      maxEventsPerSection: 10,
+      maxPayloadCharsInView: 1000,
+      shortcuts: [{ code: 'F9', label: 'F9' }]
+    }
+  });
+  const inspector = page.locator('uwt-inspector');
+
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('KeyE');
+  await page.keyboard.press('KeyI');
+  await page.keyboard.up('Shift');
+  await expect(inspector).toHaveCount(0);
+
+  await page.keyboard.press('F9');
+  await expect(inspector).toBeVisible();
+  await expect(inspector).toContainText('Shortcut: F9');
+
+  await press(page, 'A burst of 600 BI events');
+  await expect(inspector).toContainText(/BI telemetry · 10 ·/);
+
+  await press(page, 'A 300,000-character payload');
+  const bi = page
+    .locator('uwt-inspector-section')
+    .filter({ hasText: 'BI telemetry' });
+  await bi
+    .locator('tbody tr', { hasText: 'lab_huge_payload' })
+    .getByRole('button', { name: 'Expand row' })
+    .click();
+  await expect(bi).toContainText(/showing the first 1,?000 characters/);
+});
diff --git a/playwright/ssr.spec.ts b/playwright/ssr.spec.ts
index e881bd4..5b8d77e 100644
--- a/playwright/ssr.spec.ts
+++ b/playwright/ssr.spec.ts
@@ -4,6 +4,10 @@ test('the server renders the page, and sends no telemetry itself', async ({
   request,
   backend
 }) => {
+  // The previous test's page may still be sending its last beacon.
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  await backend.reset();
+
   const html = await (await request.get('/bi')).text();
 
   expect(html).toMatch(/<h1[^>]*>BI events<\/h1>/);
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
new file mode 100644
index 0000000..2007640
--- /dev/null
+++ b/playwright/wire.spec.ts
@@ -0,0 +1,105 @@
+import {
+  expect,
+  navigate,
+  openLab,
+  Page,
+  press,
+  sessionStarted,
+  test
+} from './lab';
+
+/** Picks the option starting with `option` in the select labelled `label`. */
+async function choose(page: Page, label: string, option: string) {
+  await page.getByRole('combobox', { name: label }).click();
+  await page.getByRole('option', { name: new RegExp(`^${option}`) }).click();
+}
+
+test.beforeEach(async ({ page }) => {
+  await openLab(page, 'wire');
+});
+
+test('the broker select sets how the next /rum/init is answered', async ({
+  page,
+  backend
+}) => {
+  await choose(page, 'Answer the next /rum/init with', 'null —');
+  await expect
+    .poll(async () => (await backend.state()).brokerMode)
+    .toBe('null');
+  await expect(page.locator('.lab-header')).toContainText('broker: null');
+});
+
+test('the telemetries list sets what the broker names', async ({
+  page,
+  backend
+}) => {
+  await page
+    .locator('cps-switch', { hasText: "The library's default" })
+    .click();
+  await choose(page, 'Telemetries', 'replay');
+  await expect
+    .poll(async () => (await backend.state()).telemetries)
+    .toEqual(['errors', 'performance', 'http', 'replay']);
+});
+
+test('Reload to apply loads the page again', async ({ page }) => {
+  await page.evaluate(() => ((window as { labMark?: number }).labMark = 1));
+  await press(page, 'Reload to apply');
+  await expect
+    .poll(() => page.evaluate(() => (window as { labMark?: number }).labMark))
+    .toBeUndefined();
+});
+
+test("the tables show what arrived, RUM's own events on request, until Reset empties them", async ({
+  page,
+  backend
+}) => {
+  await sessionStarted(page);
+  await navigate(page, 'BI events');
+  await press(page, 'Track a click');
+  await navigate(page, 'Logging');
+  await press(page, 'warn');
+  await navigate(page, 'On the wire');
+  const rumTable = page.locator('.lab-card', { hasText: 'RUM events (' });
+  const logTable = page.locator('.lab-card', { hasText: 'Log records (' });
+
+  await expect(rumTable).toContainText('lab_button_clicked');
+  await expect(rumTable).not.toContainText('com.amazon.rum.page_view_event');
+  await expect(logTable).toContainText('A lab warning');
+
+  const libraryOnly = page.locator('cps-switch', {
+    hasText: 'Library events only'
+  });
+  await libraryOnly.click();
+  await expect(rumTable).toContainText('com.amazon.rum.page_view_event');
+  await libraryOnly.click();
+
+  // RUM's own events can still arrive after it; the library's can't.
+  await press(page, 'Reset the mock backend');
+  await expect(rumTable.locator('h2')).toHaveText('RUM events (0)');
+  await expect(logTable.locator('h2')).toHaveText('Log records (0)');
+  expect(await backend.logs()).toEqual([]);
+});
+
+test('the overlay field sets what is laid over the broker config, and refuses what is not JSON', async ({
+  page,
+  backend
+}) => {
+  const field = page.getByRole('textbox', {
+    name: 'Laid over the app monitor config (JSON)'
+  });
+  await field.fill('{ "sessionSampleRate": 0 }');
+  await press(page, 'Set the overlay');
+  await expect
+    .poll(async () => (await backend.state()).brokerConfig)
+    .toEqual({ sessionSampleRate: 0 });
+
+  await field.fill('[1, 2]');
+  await press(page, 'Set the overlay');
+  await expect(page.locator('lab-wire-page')).toContainText(
+    'Not a JSON object.'
+  );
+  expect((await backend.state()).brokerConfig).toEqual({
+    sessionSampleRate: 0
+  });
+});
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index b12b811..c24e9b2 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -114,19 +114,19 @@ Everything each entry point exports, by role.
 
 **`@absaoss-cps/ngx-ui-watchtower`**
 
-| Role                        | Exports                                                                                                                                                                                                                                                                                                     |
-| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Setup                       | `provideUwtTelemetry`, `withLogging`, `withScenarios`, `withBIEvents`, `withRedaction`, `UwtTelemetryFeature`, `provideUwtTelemetrySink`, `UwtTelemetryLocalSinkMode` (`'broadcast' \| 'noop'`), `provideUwtTelemetryBroadcastHost`, `provideUwtTelemetryDestination` + `UwtTelemetryDestinationOptions`    |
-| Configuration               | `UWT_TELEMETRY_IDENTITY` + `UwtTelemetryIdentity`; `UWT_LOG_CONFIG` + `UwtLogConfig`; `UWT_SCENARIO_TELEMETRY_CONFIG` + `UwtScenarioTelemetryConfig`; `UWT_BI_TELEMETRY_CONFIG` + `UwtBITelemetryConfig`; `UWT_REDACT_CONFIG`; `UWT_DEFAULT_TELEMETRY_CONFIG` (every default)                               |
-| Scenarios                   | `UwtScenarioTelemetryService`, `UwtScenario`, `traceScenario` + `UwtTraceScenarioOptions`; models `UwtScenarioOptions`, `UwtScenarioOutcome`, `UwtScenarioStepDetail`, `UwtScenarioRecord`, `UwtScenarioStep`, `UwtScenarioStepEvent`, `UwtScenarioAggregate`, `UwtScenarioStatus`, `UwtScenarioStepStatus` |
-| BI events                   | `UwtBITelemetryService`; `UwtBIEvent`, `UwtBIEventDetail` (`scenarioId`, `feature`)                                                                                                                                                                                                                         |
-| Logging                     | `UwtLoggerService`, `UwtLogger`; `UwtLogDetail`, `UwtLogRecord`, `UwtLogLevel`, `UWT_LOG_LEVEL_ORDER`; `UWT_LOG_API_PROVIDER`, `UwtLogApiProvider`, `UwtLogQuery`; `UwtNoopLogApiProvider`, `UwtBroadcastLogApiProvider`                                                                                    |
-| Name registries             | `UwtScenarioNames` / `UwtScenarioName`, `UwtScenarioSteps` / `UwtStepName`, `UwtBIEventNames` / `UwtBIEventName`, `UwtLoggerNames` / `UwtLoggerName`                                                                                                                                                        |
-| Sinks                       | `UwtTelemetrySink` (abstract), `UwtNoopTelemetrySink`, `UwtBroadcastTelemetrySink`, `UwtTelemetryBroadcastHost`, `UWT_BROADCAST_CHANNEL`, `UWT_DEFAULT_BROADCAST_CHANNEL` (`'ngx-ui-watchtower'`); `uwtClassifyTelemetryEvent` + `UwtTelemetrySinkEvent`, for a sink to tell what it received               |
-| Shared models               | `UwtTelemetryMetadata`, `UwtTelemetryError`, `UwtTelemetryAttribution`; event types `UWT_DEFAULT_EVENT_NAMESPACE`, `UWT_TELEMETRY_EVENT_TYPE`, `uwtEventTypes()`, `UwtTelemetryEventTypes`                                                                                                                  |
-| Monitor                     | `UwtTelemetryMonitor`; `UwtTelemetryObservedEvent`, `UwtTelemetryPublishInput`, `UwtTelemetryEventKind`, `UwtTelemetryDestination`, `UwtTelemetryEventOrigin`, `UwtJsonValue`, `UwtJsonObject`                                                                                                              |
-| Redaction, for custom sinks | `uwtRedactMetadata`, `uwtNormalizeError`, `uwtScrubString`, `uwtRedactConfigFor`, `UwtRedactConfig`, `UWT_DEFAULT_REDACT_CONFIG`, `UwtPiiValuePattern`, `UWT_REDACTED` (`'[redacted]'`, the replacement value)                                                                                              |
-| Utilities                   | `uwtUuid()`, `uwtIsDebugEnabled(flag, name?)` + `UwtDebugFlag` (`'debugLogger' \| 'debugScenario' \| 'debugBI'`)                                                                                                                                                                                            |
+| Role                        | Exports                                                                                                                                                                                                                                                                                                                          |
+| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Setup                       | `provideUwtTelemetry`, `withLogging`, `withScenarios`, `withBIEvents`, `withRedaction`, `withTelemetryEnabled`, `UwtTelemetryFeature`, `provideUwtTelemetrySink`, `UwtTelemetryLocalSinkMode` (`'broadcast' \| 'noop'`), `provideUwtTelemetryBroadcastHost`, `provideUwtTelemetryDestination` + `UwtTelemetryDestinationOptions` |
+| Configuration               | `UWT_TELEMETRY_IDENTITY` + `UwtTelemetryIdentity`; `UWT_TELEMETRY_ENABLED`; `UWT_LOG_CONFIG` + `UwtLogConfig`; `UWT_SCENARIO_TELEMETRY_CONFIG` + `UwtScenarioTelemetryConfig`; `UWT_BI_TELEMETRY_CONFIG` + `UwtBITelemetryConfig`; `UWT_REDACT_CONFIG`; `UWT_DEFAULT_TELEMETRY_CONFIG` (every default)                           |
+| Scenarios                   | `UwtScenarioTelemetryService`, `UwtScenario`, `traceScenario` + `UwtTraceScenarioOptions`; models `UwtScenarioOptions`, `UwtScenarioOutcome`, `UwtScenarioStepDetail`, `UwtScenarioRecord`, `UwtScenarioStep`, `UwtScenarioStepEvent`, `UwtScenarioAggregate`, `UwtScenarioStatus`, `UwtScenarioStepStatus`                      |
+| BI events                   | `UwtBITelemetryService`; `UwtBIEvent`, `UwtBIEventDetail` (`scenarioId`, `feature`)                                                                                                                                                                                                                                              |
+| Logging                     | `UwtLoggerService`, `UwtLogger`; `UwtLogDetail`, `UwtLogRecord`, `UwtLogLevel`, `UWT_LOG_LEVEL_ORDER`; `UWT_LOG_API_PROVIDER`, `UwtLogApiProvider`, `UwtLogQuery`; `UwtNoopLogApiProvider`, `UwtBroadcastLogApiProvider`                                                                                                         |
+| Name registries             | `UwtScenarioNames` / `UwtScenarioName`, `UwtScenarioSteps` / `UwtStepName`, `UwtBIEventNames` / `UwtBIEventName`, `UwtLoggerNames` / `UwtLoggerName`                                                                                                                                                                             |
+| Sinks                       | `UwtTelemetrySink` (abstract), `UwtNoopTelemetrySink`, `UwtBroadcastTelemetrySink`, `UwtTelemetryBroadcastHost`, `UWT_BROADCAST_CHANNEL`, `UWT_DEFAULT_BROADCAST_CHANNEL` (`'ngx-ui-watchtower'`); `uwtClassifyTelemetryEvent` + `UwtTelemetrySinkEvent`, for a sink to tell what it received                                    |
+| Shared models               | `UwtTelemetryMetadata`, `UwtTelemetryError`, `UwtTelemetryAttribution`; event types `UWT_DEFAULT_EVENT_NAMESPACE`, `UWT_TELEMETRY_EVENT_TYPE`, `uwtEventTypes()`, `UwtTelemetryEventTypes`                                                                                                                                       |
+| Monitor                     | `UwtTelemetryMonitor`; `UwtTelemetryObservedEvent`, `UwtTelemetryPublishInput`, `UwtTelemetryEventKind`, `UwtTelemetryDestination`, `UwtTelemetryEventOrigin`, `UwtJsonValue`, `UwtJsonObject`                                                                                                                                   |
+| Redaction, for custom sinks | `uwtRedactMetadata`, `uwtNormalizeError`, `uwtScrubString`, `uwtRedactConfigFor`, `UwtRedactConfig`, `UWT_DEFAULT_REDACT_CONFIG`, `UwtPiiValuePattern`, `UWT_REDACTED` (`'[redacted]'`, the replacement value)                                                                                                                   |
+| Utilities                   | `uwtUuid()`, `uwtIsDebugEnabled(flag, name?)` + `UwtDebugFlag` (`'debugLogger' \| 'debugScenario' \| 'debugBI'`), `uwtMarkSessionStart(sessionId, now?)`, for a sink that knows when its sessions start                                                                                                                          |
 
 **`@absaoss-cps/ngx-ui-watchtower/rum`:** `provideUwtTelemetryRumSink`, `UwtRumTelemetrySink`,
 `UWT_RUM_CREDENTIALS_PROVIDER`, `UwtRumCredentialsProvider`,
@@ -649,7 +649,7 @@ const outcomeFor: Record<JobState, UwtScenarioStatus> = {
 };
 
 jobUpdates.subscribe((update) =>
-  this.scenarios.get(update.id)?.settle(outcomeFor[update.state])
+  this.scenarios.find(update.id)?.settle(outcomeFor[update.state])
 );
 ```
 
diff --git a/projects/watchtower-lab-fragment/src/fragment.component.ts b/projects/watchtower-lab-fragment/src/fragment.component.ts
index 74d709e..b0f7cf5 100644
--- a/projects/watchtower-lab-fragment/src/fragment.component.ts
+++ b/projects/watchtower-lab-fragment/src/fragment.component.ts
@@ -33,6 +33,7 @@ const CARLA = '5c8e2f14-1b7d-4a96-9e3c-8d2b7f4a6c10';
           type="outlined"
           (clicked)="scenario()" />
         <cps-button label="Log a warning" type="outlined" (clicked)="warn()" />
+        <cps-button label="Log an error" type="outlined" (clicked)="error()" />
         <cps-button
           label="Query its logs"
           type="outlined"
@@ -99,6 +100,14 @@ export class FragmentComponent {
     this.readout.set('Warning sent to the shell, for its log backend.');
   }
 
+  /** Mirrored to RUM: the shell records it, named for this fragment. */
+  protected error(): void {
+    this.logger.error('The fragment failed', {
+      error: new Error('Fragment boom')
+    });
+    this.readout.set('Error sent to the shell, and mirrored to RUM there.');
+  }
+
   protected async query(): Promise<void> {
     const records = await this.loggerService.query({ logger: 'fragment' });
     this.readout.set(
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index a073ab0..e79c315 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -9,12 +9,23 @@
 //   GET  /api/logs?…            answers the log provider's query()
 //   GET  /api/data?delay&status a slow or failing endpoint, for HTTP scenarios
 //   GET  /__lab/rum, /__lab/logs, /__lab/state
-//   POST /__lab/reset, /__lab/broker-mode, /__lab/telemetries    test hooks
+//   GET, POST /__lab/custom     what the lab's custom sink was given
+//   POST /__lab/reset, /__lab/broker-mode, /__lab/telemetries,
+//        /__lab/broker-config                                   test hooks
 import { Request, Router } from 'express';
 import { promised } from './promised';
 import { gunzipSync } from 'node:zlib';
 
-const BROKER_MODES = ['ok', 'null', 'fail', 'short-expiry'];
+const BROKER_MODES = [
+  'ok',
+  'null',
+  'fail',
+  'short-expiry',
+  'flaky',
+  'invalid',
+  'null-on-refresh',
+  'no-credentials-on-refresh'
+];
 const TELEMETRIES = ['errors', 'performance', 'interaction', 'http', 'replay'];
 const LEVELS: Record<string, number> = { log: 0, warn: 1, error: 2 };
 
@@ -36,14 +47,27 @@ interface ReceivedEvent {
 }
 
 // `telemetries: null` leaves them out of the broker's answer: the library's
-// default applies.
+// default applies. `brokerConfig` is laid over the answer's config, and
+// `brokerCalls` counts `/rum/init` calls since the mode was set.
 const state: {
   brokerMode: string;
+  brokerCalls: number;
+  brokerConfig: Record<string, unknown>;
   telemetries: string[] | null;
   batches: number;
   rum: ReceivedEvent[];
   logs: LogRecord[];
-} = { brokerMode: 'ok', telemetries: null, batches: 0, rum: [], logs: [] };
+  custom: unknown[];
+} = {
+  brokerMode: 'ok',
+  brokerCalls: 0,
+  brokerConfig: {},
+  telemetries: null,
+  batches: 0,
+  rum: [],
+  logs: [],
+  custom: []
+};
 
 /**
  * The body as text, gunzipped if RUM compressed it. A page that closes while
@@ -79,12 +103,34 @@ function parseJson(text: string | undefined): any {
   }
 }
 
-/** What the broker answers, by mode. `null` disables RUM for the page. */
+/**
+ * What the broker answers, by mode and call: `undefined` for an error,
+ * `enabled: false` to turn RUM off for the page.
+ *
+ * - `flaky`: the first two calls fail, as a broker starting up might
+ * - `invalid`: `pagesToExclude` as strings, which JSON makes of patterns
+ * - `null-on-refresh`, `no-credentials-on-refresh`: short-lived credentials,
+ *   then a refresh answered with `null`, or without credentials
+ */
 function broker(req: Request) {
+  const mode = state.brokerMode;
+  const call = ++state.brokerCalls;
+  if (mode === 'fail' || (mode === 'flaky' && call <= 2)) {
+    return undefined;
+  }
+  const refreshing = call > 1;
+  if (mode === 'null' || (mode === 'null-on-refresh' && refreshing)) {
+    return { enabled: false };
+  }
+  const shortLived = [
+    'short-expiry',
+    'null-on-refresh',
+    'no-credentials-on-refresh'
+  ].includes(mode);
   const origin = `${req.protocol}://${req.get('x-forwarded-host') ?? req.get('host')}`;
-  const minutes = state.brokerMode === 'short-expiry' ? 5 + 5 / 60 : 60;
+  const minutes = shortLived ? 5 + 5 / 60 : 60;
   return {
-    enabled: state.brokerMode !== 'null',
+    enabled: true,
     config: {
       applicationId: '00000000-0000-4000-8000-00000000a1ab',
       applicationVersion: '1.0.0',
@@ -99,17 +145,26 @@ function broker(req: Request) {
       sessionEventLimit: 0,
       dispatchInterval: 2000,
       allowCookies: true,
+      // The lab is plain http: WebKit drops a Secure cookie even on
+      // localhost, and with it the session and its start.
+      cookieAttributes: { secure: false },
       // Names only: the lab's credentials provider adds their options.
-      ...(state.telemetries ? { telemetries: state.telemetries } : {})
+      ...(state.telemetries ? { telemetries: state.telemetries } : {}),
+      ...(mode === 'invalid' ? { pagesToExclude: ['^/private'] } : {}),
+      ...state.brokerConfig
     },
     // Never used to sign — signing is off — but the sink schedules its
-    // refresh from their expiry, which short-expiry relies on.
-    credentials: {
-      accessKeyId: 'LAB-FAKE-KEY',
-      secretAccessKey: 'lab-fake-secret',
-      sessionToken: 'lab-fake-token',
-      expiration: new Date(Date.now() + minutes * 60_000).toISOString()
-    }
+    // refresh from their expiry, which the short-lived modes rely on.
+    ...(mode === 'no-credentials-on-refresh' && refreshing
+      ? {}
+      : {
+          credentials: {
+            accessKeyId: 'LAB-FAKE-KEY',
+            secretAccessKey: 'lab-fake-secret',
+            sessionToken: 'lab-fake-token',
+            expiration: new Date(Date.now() + minutes * 60_000).toISOString()
+          }
+        })
   };
 }
 
@@ -153,10 +208,13 @@ function queryLogs(query: Request['query']): LogRecord[] {
 export const labBackend = Router();
 
 labBackend.get('/rum/init', (req, res) => {
-  if (state.brokerMode === 'fail') {
-    res.status(500).json({ error: 'broker unavailable (lab mode: fail)' });
+  const answer = broker(req);
+  if (answer) {
+    res.json(answer);
   } else {
-    res.json(broker(req));
+    res
+      .status(500)
+      .json({ error: `broker unavailable (lab mode: ${state.brokerMode})` });
   }
 });
 
@@ -202,13 +260,15 @@ labBackend.get('/__lab/logs', (_req, res) => {
 labBackend.get('/__lab/state', (_req, res) => {
   res.json({
     brokerMode: state.brokerMode,
+    brokerCalls: state.brokerCalls,
+    brokerConfig: state.brokerConfig,
     modes: BROKER_MODES,
     telemetries: state.telemetries
   });
 });
 
 labBackend.post('/__lab/reset', (_req, res) => {
-  Object.assign(state, { batches: 0, rum: [], logs: [] });
+  Object.assign(state, { batches: 0, rum: [], logs: [], custom: [] });
   res.status(204).end();
 });
 
@@ -222,7 +282,7 @@ labBackend.post(
         .json({ error: `mode must be one of ${BROKER_MODES.join(', ')}` });
       return;
     }
-    state.brokerMode = mode;
+    Object.assign(state, { brokerMode: mode, brokerCalls: 0 });
     res.json({ brokerMode: mode });
   })
 );
@@ -245,3 +305,28 @@ labBackend.post(
     res.json({ telemetries });
   })
 );
+
+labBackend.post(
+  '/__lab/broker-config',
+  promised(async (req, res) => {
+    const config = parseJson(await readBody(req))?.config;
+    if (!config || typeof config !== 'object' || Array.isArray(config)) {
+      res.status(400).json({ error: 'config must be an object' });
+      return;
+    }
+    state.brokerConfig = config;
+    res.json({ config });
+  })
+);
+
+labBackend
+  .route('/__lab/custom')
+  .post(
+    promised(async (req, res) => {
+      state.custom.push(parseJson(await readBody(req)));
+      res.status(204).end();
+    })
+  )
+  .get((_req, res) => {
+    res.json(state.custom);
+  });
diff --git a/projects/watchtower-lab/src/lab/lab-channel.ts b/projects/watchtower-lab/src/lab/lab-channel.ts
index 007331f..5afb76f 100644
--- a/projects/watchtower-lab/src/lab/lab-channel.ts
+++ b/projects/watchtower-lab/src/lab/lab-channel.ts
@@ -1,3 +1,5 @@
+import { UWT_DEFAULT_BROADCAST_CHANNEL } from '@absaoss-cps/ngx-ui-watchtower';
+
 declare global {
   interface Window {
     __uwtTelemetryChannel?: string;
@@ -5,13 +7,22 @@ declare global {
 }
 
 /**
- * This tab's broadcast channel, as DESIGN.md §13 recommends for a composed
- * page open in several tabs: one per page load, so each tab's fragments
- * reach their own shell. Published on the window for the fragments to read,
- * before any of them starts; browser-only, so this module is safe under SSR.
+ * This tab's own broadcast channel, as DESIGN.md §13 recommends for a
+ * composed page open in several tabs: one per page load, so each tab's
+ * fragments reach their own shell.
  */
-export const LAB_CHANNEL = `ngx-ui-watchtower-${crypto.randomUUID()}`;
+const TAB_CHANNEL = `ngx-ui-watchtower-${crypto.randomUUID()}`;
 
-if (typeof window !== 'undefined') {
-  window.__uwtTelemetryChannel = LAB_CHANNEL;
+/**
+ * The shell's channel: this tab's own, or — `shared` — the default one every
+ * tab joins, where the tabs' hosts elect one leader. Published on the window
+ * for the fragments to read, before any of them starts; browser-only, so
+ * this is safe under SSR.
+ */
+export function labChannel(shared: boolean): string {
+  const channel = shared ? UWT_DEFAULT_BROADCAST_CHANNEL : TAB_CHANNEL;
+  if (typeof window !== 'undefined') {
+    window.__uwtTelemetryChannel = channel;
+  }
+  return channel;
 }
diff --git a/projects/watchtower-lab/src/lab/lab-custom.sink.ts b/projects/watchtower-lab/src/lab/lab-custom.sink.ts
new file mode 100644
index 0000000..1e56738
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-custom.sink.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import {
+  UwtTelemetryError,
+  UwtTelemetryMetadata,
+  UwtTelemetrySink,
+  uwtClassifyTelemetryEvent
+} from '@absaoss-cps/ngx-ui-watchtower';
+
+/**
+ * A destination of the lab's own, as an app would write one for its own
+ * backend: each event, classified, posted to the mock backend's
+ * `/__lab/custom`. With `?destination=custom`.
+ */
+@Injectable()
+export class LabCustomSink extends UwtTelemetrySink {
+  private readonly sessionId = crypto.randomUUID();
+  private userId?: string;
+
+  /** Run once at startup, by `provideUwtTelemetryDestination`'s `init`. */
+  init(): void {
+    this.post({ kind: 'init' });
+  }
+
+  record(
+    eventType: string,
+    payload: object,
+    metadata?: UwtTelemetryMetadata
+  ): void {
+    const { kind } = uwtClassifyTelemetryEvent(eventType, payload);
+    this.post({ kind, eventType, payload, metadata });
+  }
+
+  recordError(error: UwtTelemetryError, metadata?: UwtTelemetryMetadata): void {
+    this.post({ kind: 'error', error, metadata });
+  }
+
+  getSessionId(): string {
+    return this.sessionId;
+  }
+
+  setUserId(userId: string | undefined): void {
+    this.userId = userId || undefined;
+  }
+
+  getUserId(): string | undefined {
+    return this.userId;
+  }
+
+  /** Nothing waits: each event is posted as it comes. */
+  flush(): void {
+    // Nothing to send.
+  }
+
+  private post(body: object): void {
+    fetch('/__lab/custom', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body)
+    }).catch(() => undefined);
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
index f7232b6..92f912d 100644
--- a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
@@ -4,20 +4,39 @@ import {
   UwtLogQuery,
   UwtLogRecord
 } from '@absaoss-cps/ngx-ui-watchtower';
+import { LAB_OPTIONS } from './lab-options';
 
-/** Sends log records to the lab's mock backend, as the README's example does. */
+/**
+ * Sends log records to the lab's mock backend, as the README's example does:
+ * each at once, or — with the `lab.logBatching` setting — in batches, sent
+ * every 10 seconds and whenever the library calls `flush()`, as the page is
+ * hidden or closes.
+ */
 @Injectable({ providedIn: 'root' })
 export class LabLogApiProvider implements UwtLogApiProvider {
   private readonly document = inject(DOCUMENT);
+  private readonly batching =
+    inject(LAB_OPTIONS, { optional: true })?.config.lab?.logBatching ?? false;
+
+  private pending: UwtLogRecord[] = [];
+  private timer?: ReturnType<typeof setTimeout>;
 
   send(record: UwtLogRecord): void {
-    fetch('/api/logs', {
-      method: 'POST',
-      body: JSON.stringify(record),
-      // Only while the page is hidden (it may be closing): browsers reject
-      // keepalive requests once all in flight exceed 64 KiB.
-      keepalive: this.document.visibilityState === 'hidden'
-    }).catch(() => undefined);
+    if (!this.batching) {
+      this.post([record]);
+      return;
+    }
+    this.pending.push(record);
+    this.timer ??= setTimeout(() => this.flush(), 10_000);
+  }
+
+  flush(): void {
+    clearTimeout(this.timer);
+    this.timer = undefined;
+    if (this.pending.length > 0) {
+      this.post(this.pending);
+      this.pending = [];
+    }
   }
 
   query(filter: UwtLogQuery): Promise<UwtLogRecord[]> {
@@ -28,4 +47,14 @@ export class LabLogApiProvider implements UwtLogApiProvider {
     );
     return fetch(`/api/logs?${params}`).then((r) => r.json());
   }
+
+  private post(records: UwtLogRecord[]): void {
+    fetch('/api/logs', {
+      method: 'POST',
+      body: JSON.stringify(records),
+      // Only while the page is hidden (it may be closing): browsers reject
+      // keepalive requests once all in flight exceed 64 KiB.
+      keepalive: this.document.visibilityState === 'hidden'
+    }).catch(() => undefined);
+  }
 }
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
index 76e1a07..daf1a27 100644
--- a/projects/watchtower-lab/src/lab/lab-options.ts
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -1,25 +1,92 @@
+import { InjectionToken } from '@angular/core';
+import {
+  UwtBITelemetryConfig,
+  UwtLogConfig,
+  UwtRedactConfig,
+  UwtScenarioTelemetryConfig
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtEventInspectorConfig } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+
+/** Value transforms a {@link LabConfig} can name. */
+export const LAB_VALUE_TRANSFORMS = {
+  /** The lab's order ids, `A-1001`, as `A-****`. */
+  'mask-order-ids': (value: string) => value.replace(/\bA-\d{4}\b/g, 'A-****')
+};
+
+/**
+ * Library settings for one run, as JSON can carry them, laid over the lab's
+ * own. A pattern is a `RegExp` source, a value transform one of
+ * {@link LAB_VALUE_TRANSFORMS}.
+ */
+export interface LabConfig {
+  identity?: { eventNamespace?: string };
+  scenarios?: Partial<UwtScenarioTelemetryConfig>;
+  logging?: Partial<UwtLogConfig>;
+  bi?: Partial<UwtBITelemetryConfig>;
+  redaction?: Partial<
+    Omit<
+      UwtRedactConfig,
+      'extraKeyPatterns' | 'extraValuePatterns' | 'extraValueTransforms'
+    >
+  > & {
+    extraKeyPatterns?: string[];
+    extraValuePatterns?: string[];
+    extraValueTransforms?: (keyof typeof LAB_VALUE_TRANSFORMS)[];
+  };
+  inspector?: Pick<
+    Partial<UwtEventInspectorConfig>,
+    'maxEventsPerSection' | 'maxPayloadCharsInView' | 'shortcuts'
+  >;
+  /** The lab's own: its log provider batches, and sends on `flush()`. */
+  lab?: { logBatching?: boolean };
+}
+
 /**
  * How the lab was started, read once from the query string — the way an app
  * picks its configuration at startup:
  *
- * - `?destination=rum` (default) or `noop`
- * - `?telemetry=off` turns telemetry off with `withTelemetryEnabled(false)`
+ * - `?destination=rum` (default), `noop`, or `custom`: the lab's own sink
+ * - `?telemetry=off` turns telemetry off with `withTelemetryEnabled`
+ * - `?channel=shared`: the shell joins the default broadcast channel, shared
+ *   with every tab, rather than one of its own
  * - `?inspector=off` disables the Event Inspector; `noshortcut` drops its
  *   keyboard shortcut
+ * - `?config=<JSON>` lays a {@link LabConfig} over the lab's settings
  */
 export interface LabOptions {
-  destination: 'rum' | 'noop';
+  destination: 'rum' | 'noop' | 'custom';
   telemetry: boolean;
+  channel: 'tab' | 'shared';
   inspector: 'on' | 'off' | 'noshortcut';
+  config: LabConfig;
 }
 
+export const LAB_OPTIONS = new InjectionToken<LabOptions>('LAB_OPTIONS');
+
 export function labOptions(search: string): LabOptions {
   const params = new URLSearchParams(search);
   const inspector = params.get('inspector');
+  const destination = params.get('destination');
   return {
-    destination: params.get('destination') === 'noop' ? 'noop' : 'rum',
+    destination:
+      destination === 'noop' || destination === 'custom' ? destination : 'rum',
     telemetry: params.get('telemetry') !== 'off',
+    channel: params.get('channel') === 'shared' ? 'shared' : 'tab',
     inspector:
-      inspector === 'off' || inspector === 'noshortcut' ? inspector : 'on'
+      inspector === 'off' || inspector === 'noshortcut' ? inspector : 'on',
+    config: parseConfig(params.get('config'))
   };
 }
+
+function parseConfig(json: string | null): LabConfig {
+  if (!json) {
+    return {};
+  }
+  try {
+    const config = JSON.parse(json);
+    return config && typeof config === 'object' ? config : {};
+  } catch {
+    console.warn('[lab] ?config= is not JSON; ignored.');
+    return {};
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-wire.service.ts b/projects/watchtower-lab/src/lab/lab-wire.service.ts
index 9087843..0aadd58 100644
--- a/projects/watchtower-lab/src/lab/lab-wire.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-wire.service.ts
@@ -20,7 +20,15 @@ export interface LabRumEvent {
   details: Record<string, unknown>;
 }
 
-export type LabBrokerMode = 'ok' | 'null' | 'fail' | 'short-expiry';
+export type LabBrokerMode =
+  | 'ok'
+  | 'null'
+  | 'fail'
+  | 'short-expiry'
+  | 'flaky'
+  | 'invalid'
+  | 'null-on-refresh'
+  | 'no-credentials-on-refresh';
 
 /** RUM's own telemetries, as the mock broker names them. */
 export const LAB_TELEMETRIES = [
@@ -56,6 +64,8 @@ export class LabWire {
   readonly rum = signal<readonly LabRumEvent[]>([]);
   readonly logs = signal<readonly UwtLogRecord[]>([]);
   readonly brokerMode = signal<LabBrokerMode>('ok');
+  /** Laid over the broker's app monitor config. */
+  readonly brokerConfig = signal<Record<string, unknown>>({});
   /** RUM telemetries the broker names; `null` for the library's default. */
   readonly telemetries = signal<readonly LabTelemetry[] | null>(null);
 
@@ -91,6 +101,7 @@ export class LabWire {
       this.rum.set(rum.events);
       this.logs.set(logs);
       this.brokerMode.set(state.brokerMode);
+      this.brokerConfig.set(state.brokerConfig);
       this.telemetries.set(state.telemetries);
     } catch {
       // The mock backend isn't running: `npm run lab` starts it.
@@ -112,6 +123,16 @@ export class LabWire {
     this.brokerMode.set(mode);
   }
 
+  /** Laid over the broker's next answer; reload to apply it. */
+  async setBrokerConfig(config: Record<string, unknown>): Promise<void> {
+    await labFetch('/__lab/broker-config', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ config })
+    });
+    this.brokerConfig.set(config);
+  }
+
   /** The broker names these in its next answer; reload to apply them. */
   async setTelemetries(
     telemetries: readonly LabTelemetry[] | null
diff --git a/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts b/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
index 4e316fa..6ca7e6a 100644
--- a/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
@@ -3,6 +3,7 @@ import {
   UwtScenarioTelemetryService,
   UwtTelemetrySink
 } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtRumTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower/rum';
 import { CpsButtonComponent } from 'cps-ui-kit';
 
 @Component({
@@ -34,6 +35,20 @@ import { CpsButtonComponent } from 'cps-ui-kit';
             (clicked)="leave()" />
         </div>
       </div>
+      <div class="lab-card">
+        <h2>A page view of its own</h2>
+        <p>
+          The RUM sink's recordPageView, for a view the router doesn't see:
+          /lab/virtual-page. Only with the RUM destination.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="Record a page view"
+            type="outlined"
+            [disabled]="!rum"
+            (clicked)="rum?.recordPageView('/lab/virtual-page')" />
+        </div>
+      </div>
       <div class="lab-card">
         <h2>Hiding the tab</h2>
         <p>
@@ -46,6 +61,8 @@ import { CpsButtonComponent } from 'cps-ui-kit';
 })
 export class LifecyclePage {
   protected readonly sink = inject(UwtTelemetrySink);
+  protected readonly rum =
+    this.sink instanceof UwtRumTelemetrySink ? this.sink : undefined;
 
   private readonly scenarios = inject(UwtScenarioTelemetryService);
 
diff --git a/projects/watchtower-lab/src/shell/pages/logging.page.ts b/projects/watchtower-lab/src/shell/pages/logging.page.ts
index 278345a..9e0c85c 100644
--- a/projects/watchtower-lab/src/shell/pages/logging.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/logging.page.ts
@@ -4,12 +4,15 @@ import {
   inject,
   signal
 } from '@angular/core';
-import { UwtLoggerService } from '@absaoss-cps/ngx-ui-watchtower';
-import { CpsButtonComponent } from 'cps-ui-kit';
+import {
+  UwtLoggerService,
+  UwtScenarioTelemetryService
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { CpsButtonComponent, CpsTextareaComponent } from 'cps-ui-kit';
 
 @Component({
   selector: 'lab-logging-page',
-  imports: [CpsButtonComponent],
+  imports: [CpsButtonComponent, CpsTextareaComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
@@ -41,18 +44,45 @@ import { CpsButtonComponent } from 'cps-ui-kit';
             type="outlined"
             (clicked)="noisy.log('Not written')" />
           <cps-button
-            label="warn"
+            label="warn (written)"
             type="outlined"
             (clicked)="noisy.warn('A noisy warning')" />
         </div>
       </div>
+      <div class="lab-card">
+        <h2>Tied to a journey</h2>
+        <p>
+          A warning whose correlationId is a scenario's id: the filter below is
+          set to find it.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="Log inside a scenario"
+            type="outlined"
+            (clicked)="correlated()" />
+        </div>
+      </div>
       <div class="lab-card">
         <h2>Reading back</h2>
+        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+        <cps-textarea
+          ngSkipHydration
+          label="Query filter (JSON)"
+          placeholder='{ "logger": "lab", "minLevel": "warn", "limit": 20 }'
+          width="30rem"
+          [rows]="3"
+          [value]="filter()"
+          [error]="filterError()"
+          (valueChanged)="filter.set($event)" />
         <div class="lab-actions">
           <cps-button
             label="query({ logger: 'lab' })"
             type="outlined"
             (clicked)="query()" />
+          <cps-button
+            label="Run the query"
+            type="outlined"
+            (clicked)="runQuery()" />
         </div>
       </div>
       <pre class="lab-readout">{{ readout() || 'No query yet.' }}</pre>
@@ -61,10 +91,13 @@ import { CpsButtonComponent } from 'cps-ui-kit';
 })
 export class LoggingPage {
   protected readonly readout = signal('');
+  protected readonly filter = signal('');
+  protected readonly filterError = signal('');
 
   private readonly logger = inject(UwtLoggerService);
   protected readonly lab = this.logger.getLogger('lab');
   protected readonly noisy = this.logger.getLogger('noisy');
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
 
   protected error(): void {
     this.lab.error('Saving the order failed', {
@@ -78,4 +111,28 @@ export class LoggingPage {
     const records = await this.logger.query({ logger: 'lab', limit: 20 });
     this.readout.set(JSON.stringify(records, null, 2));
   }
+
+  protected correlated(): void {
+    const scenario = this.scenarios.start({ name: 'lab-correlated' });
+    this.lab.warn('Inside a journey', { correlationId: scenario.id });
+    scenario.complete();
+    this.filter.set(JSON.stringify({ correlationId: scenario.id }));
+  }
+
+  /** Any filter the log provider takes: logger, correlationId, minLevel… */
+  protected async runQuery(): Promise<void> {
+    let filter: unknown;
+    try {
+      filter = JSON.parse(this.filter().trim() || '{}');
+    } catch {
+      filter = undefined;
+    }
+    if (!filter || typeof filter !== 'object' || Array.isArray(filter)) {
+      this.filterError.set('Not a JSON object.');
+      return;
+    }
+    this.filterError.set('');
+    const records = await this.logger.query(filter);
+    this.readout.set(JSON.stringify(records, null, 2));
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/privacy.page.ts b/projects/watchtower-lab/src/shell/pages/privacy.page.ts
index 860d645..08ea6f9 100644
--- a/projects/watchtower-lab/src/shell/pages/privacy.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/privacy.page.ts
@@ -1,20 +1,26 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   inject,
   signal
 } from '@angular/core';
 import {
+  UWT_REDACT_CONFIG,
   UwtBITelemetryService,
   UwtLoggerService,
-  UwtScenarioTelemetryService
+  UwtScenarioTelemetryService,
+  uwtNormalizeError,
+  uwtRedactMetadata,
+  uwtScrubString
 } from '@absaoss-cps/ngx-ui-watchtower';
-import { CpsButtonComponent } from 'cps-ui-kit';
+import { CpsButtonComponent, CpsTextareaComponent } from 'cps-ui-kit';
 
 /** Values that must never leave the browser as they are. */
 const PERSONAL = {
   email: 'anna.smith@example.com',
-  note: 'card 4111 1111 1111 1111, phone +27 82 555 0123',
+  note: 'card 4111 1111 1111 1111, phone +27 82 555 0123, SSN 123-45-6789',
   ip: '10.1.2.3',
   password: 'hunter2',
   authToken: 'eyJhbGciOiJIUzI1NiJ9.lab'
@@ -22,7 +28,7 @@ const PERSONAL = {
 
 @Component({
   selector: 'lab-privacy-page',
-  imports: [CpsButtonComponent],
+  imports: [CpsButtonComponent, CpsTextareaComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
@@ -47,6 +53,45 @@ const PERSONAL = {
         </div>
       </div>
       <p>{{ sent() }}</p>
+
+      <div class="lab-card">
+        <h2>Errors of any shape</h2>
+        <p>
+          Logged as errors: a string is scrubbed, an object is reduced to its
+          type, and an HTTP error keeps its status but not its URL's query.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="An error as a string"
+            type="outlined"
+            (clicked)="errorAs('string')" />
+          <cps-button
+            label="An error as a plain object"
+            type="outlined"
+            (clicked)="errorAs('object')" />
+          <cps-button
+            label="An HttpErrorResponse"
+            type="outlined"
+            (clicked)="errorAs('http')" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>Scrub anything</h2>
+        <p>
+          What the library makes of any text, with this app's redaction
+          settings: as a string, as metadata, and as an error's message.
+        </p>
+        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+        <cps-textarea
+          ngSkipHydration
+          label="Text to scrub"
+          width="30rem"
+          [rows]="3"
+          [value]="text()"
+          (valueChanged)="text.set($event)" />
+        <pre class="lab-readout lab-scrubbed">{{ scrubbed() }}</pre>
+      </div>
     </section>
   `
 })
@@ -57,6 +102,30 @@ export class PrivacyPage {
   private readonly biTelemetry = inject(UwtBITelemetryService);
   private readonly scenarios = inject(UwtScenarioTelemetryService);
   private readonly logger = inject(UwtLoggerService).getLogger('privacy');
+  private readonly redaction = inject(UWT_REDACT_CONFIG);
+
+  protected readonly text = signal(
+    `Mail ${PERSONAL.email} from https://shop.example/orders?token=abc`
+  );
+
+  protected readonly scrubbed = computed(() => {
+    const text = this.text();
+    return JSON.stringify(
+      {
+        uwtScrubString: uwtScrubString(text, this.redaction),
+        uwtRedactMetadata: uwtRedactMetadata(
+          { note: text, password: text },
+          this.redaction
+        ),
+        uwtNormalizeError: uwtNormalizeError(new Error(text), {
+          ...this.redaction,
+          includeStack: false
+        })
+      },
+      null,
+      2
+    );
+  });
 
   protected bi(): void {
     this.biTelemetry.track('lab_privacy_checked', PERSONAL);
@@ -76,4 +145,18 @@ export class PrivacyPage {
       .fail({ error: new Error(`Lookup failed for ${PERSONAL.email}`) });
     this.sent.set('Sent as the failed lab-privacy scenario.');
   }
+
+  protected errorAs(shape: 'string' | 'object' | 'http'): void {
+    const error = {
+      string: `Lookup failed for ${PERSONAL.email}`,
+      object: { code: 42, customer: PERSONAL.email },
+      http: new HttpErrorResponse({
+        status: 404,
+        statusText: 'Not Found',
+        url: `https://shop.example/api/customers?email=${PERSONAL.email}`
+      })
+    }[shape];
+    this.logger.error(`The ${shape} error`, { error });
+    this.sent.set(`Logged the ${shape} error.`);
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
index b1e9aaf..9f49bd5 100644
--- a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
@@ -102,6 +102,61 @@ const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
         </div>
       </div>
 
+      <div class="lab-card">
+        <h2>The rest of the scenario API</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="Steps with detail"
+            type="outlined"
+            (clicked)="detailed()" />
+          <cps-button
+            label="A parent and a child"
+            type="outlined"
+            (clicked)="family()" />
+          <cps-button
+            label="settle('incomplete')"
+            type="outlined"
+            (clicked)="settleDirectly()" />
+          <cps-button label="51 at once" type="outlined" (clicked)="crowd()" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>Active scenarios</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="Start a long one"
+            type="outlined"
+            (clicked)="startLong()" />
+          <cps-button
+            label="Look them up"
+            type="outlined"
+            (clicked)="lookUp()" />
+          <cps-button
+            label="Cancel every active one"
+            type="outlined"
+            (clicked)="cancelActive()" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>traceScenario's options</h2>
+        <div class="lab-actions">
+          <cps-button
+            label="outcome, from the response"
+            type="outlined"
+            (clicked)="outcomeFromResponse()" />
+          <cps-button
+            label="cancelOutcome, unsubscribed early"
+            type="outlined"
+            (clicked)="unsubscribedEarly()" />
+          <cps-button
+            label="valueThenTeardown: 'cancel'"
+            type="outlined"
+            (clicked)="valueThenCancel()" />
+        </div>
+      </div>
+
       <pre class="lab-readout">{{ readout() || 'Nothing settled yet.' }}</pre>
     </section>
   `
@@ -113,6 +168,7 @@ export class ScenariosPage {
   private readonly scenarios = inject(UwtScenarioTelemetryService);
   private readonly http = inject(HttpClient);
   private running?: UwtScenario;
+  private long?: UwtScenario;
 
   constructor() {
     this.scenarios.settled$
@@ -169,7 +225,7 @@ export class ScenariosPage {
 
   protected backdated(): void {
     this.scenarios
-      .start({ name: 'lab-backdated', startedAt: performance.now() - 1500 })
+      .start({ name: 'lab-backdated', startedAt: Date.now() - 1500 })
       .complete();
   }
 
@@ -217,4 +273,116 @@ export class ScenariosPage {
     this.running?.complete();
     this.running = undefined;
   }
+
+  protected detailed(): void {
+    const scenario = this.scenarios.start({ name: 'lab-detailed' });
+    scenario.step('fetch', { rows: 3 });
+    scenario.endStep({ message: 'Fetched' });
+    scenario.step('validate');
+    scenario.failStep(new Error('Row 2 is invalid'), { reason: 'validation' });
+    scenario.setData({ orders: 2 });
+    scenario.complete({
+      statusCode: 200,
+      message: 'Saved',
+      reason: 'all-valid',
+      metadata: { source: 'lab' }
+    });
+  }
+
+  protected family(): void {
+    const parent = this.scenarios.start({ name: 'lab-parent' });
+    this.scenarios
+      .start({
+        name: 'lab-child',
+        parentScenarioId: parent.id,
+        feature: 'checkout',
+        operation: 'pay',
+        route: '/orders/:id'
+      })
+      .complete();
+    parent.complete();
+  }
+
+  protected settleDirectly(): void {
+    this.scenarios
+      .start({ name: 'lab-settled' })
+      .settle('incomplete', { reason: 'no-results' });
+  }
+
+  /** One past the 50 the library warns about, in development. */
+  protected crowd(): void {
+    const crowd = Array.from({ length: 51 }, () =>
+      this.scenarios.start({ name: 'lab-crowd' })
+    );
+    crowd.forEach((scenario) => scenario.cancel());
+  }
+
+  protected startLong(): void {
+    this.long = this.scenarios.start({ name: 'lab-long', timeoutMs: 0 });
+    this.lookUp();
+  }
+
+  protected lookUp(): void {
+    const id = this.long?.id;
+    this.readout.set(
+      JSON.stringify(
+        {
+          getActive: this.scenarios.getActive().map((s) => s.name),
+          findByName: this.scenarios.findByName('lab-long').map((s) => s.id),
+          find: id ? this.scenarios.find(id)?.name : undefined,
+          findByNameAndId: id
+            ? this.scenarios.findByNameAndId('lab-long', id)?.id
+            : undefined
+        },
+        null,
+        2
+      )
+    );
+  }
+
+  protected cancelActive(): void {
+    for (const scenario of this.scenarios.getActive()) {
+      scenario.cancel();
+    }
+    this.lookUp();
+  }
+
+  protected outcomeFromResponse(): void {
+    this.http
+      .get<{ status: number }>('/api/data')
+      .pipe(
+        traceScenario(this.scenarios.start({ name: 'lab-trace-outcome' }), {
+          outcome: (response) => ({
+            statusCode: response.status,
+            message: 'Data arrived'
+          })
+        })
+      )
+      .subscribe();
+  }
+
+  protected unsubscribedEarly(): void {
+    const subscription = this.http
+      .get('/api/data', { params: { delay: 2000 } })
+      .pipe(
+        traceScenario(this.scenarios.start({ name: 'lab-trace-cancel' }), {
+          cancelOutcome: { reason: 'navigated-away' }
+        })
+      )
+      .subscribe();
+    setTimeout(() => subscription.unsubscribe(), 100);
+  }
+
+  protected valueThenCancel(): void {
+    const values = new Subject<number>();
+    const subscription = values
+      .pipe(
+        traceScenario(this.scenarios.start({ name: 'lab-trace-teardown' }), {
+          valueThenTeardown: 'cancel'
+        })
+      )
+      .subscribe();
+    values.next(1);
+    subscription.unsubscribe();
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
new file mode 100644
index 0000000..909036d
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -0,0 +1,164 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DOCUMENT,
+  inject,
+  signal
+} from '@angular/core';
+import {
+  UWT_BI_TELEMETRY_CONFIG,
+  UWT_LOG_CONFIG,
+  UWT_REDACT_CONFIG,
+  UWT_SCENARIO_TELEMETRY_CONFIG,
+  UWT_TELEMETRY_IDENTITY
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { UWT_EVENT_INSPECTOR_CONFIG } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import {
+  CpsButtonComponent,
+  CpsSwitchComponent,
+  CpsTextareaComponent
+} from 'cps-ui-kit';
+import { LAB_OPTIONS } from '../shell.config';
+
+const DEBUG_FLAGS = ['debugScenario', 'debugBI', 'debugLogger'] as const;
+type DebugFlag = (typeof DEBUG_FLAGS)[number];
+
+@Component({
+  selector: 'lab-settings-page',
+  imports: [CpsButtonComponent, CpsSwitchComponent, CpsTextareaComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Settings</h1>
+      <p>
+        The library's settings for this run: the lab's own, with a
+        <code>?config=</code> overlay laid over them, read once at startup.
+        Patterns are RegExp sources; the one value transform is
+        <code>mask-order-ids</code>.
+      </p>
+
+      <div class="lab-card">
+        <h2>Overlay</h2>
+        <cps-textarea
+          label="?config= (JSON)"
+          placeholder='{ "scenarios": { "emitLifecycleEvents": true } }'
+          [rows]="8"
+          [value]="draft()"
+          [error]="error()"
+          (valueChanged)="draft.set($event)" />
+        <div class="lab-actions">
+          <cps-button label="Apply and reload" (clicked)="apply()" />
+          <cps-button
+            label="Back to the lab's settings"
+            type="outlined"
+            (clicked)="apply('')" />
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>Debug flags</h2>
+        <p>
+          Console lines for what is sent. The library reads them on every event,
+          so they apply without a reload.
+        </p>
+        <div class="lab-actions">
+          @for (flag of flags; track flag) {
+            <cps-switch
+              [label]="flag"
+              [value]="debug()[flag]"
+              (valueChanged)="setDebug(flag, $event)" />
+          }
+        </div>
+      </div>
+
+      <div class="lab-card">
+        <h2>In effect</h2>
+        <pre class="lab-readout">{{ effective }}</pre>
+      </div>
+    </section>
+  `
+})
+export class SettingsPage {
+  protected readonly flags = DEBUG_FLAGS;
+  protected readonly error = signal('');
+
+  private readonly window = inject(DOCUMENT).defaultView!;
+  private readonly config = inject(LAB_OPTIONS).config;
+
+  protected readonly draft = signal(
+    Object.keys(this.config).length ? JSON.stringify(this.config, null, 2) : ''
+  );
+
+  protected readonly debug = signal(this.readDebug());
+
+  /** What the library was given, read back from its tokens. */
+  protected readonly effective = JSON.stringify(
+    {
+      identity: inject(UWT_TELEMETRY_IDENTITY),
+      scenarios: inject(UWT_SCENARIO_TELEMETRY_CONFIG),
+      logging: inject(UWT_LOG_CONFIG),
+      bi: inject(UWT_BI_TELEMETRY_CONFIG),
+      redaction: inject(UWT_REDACT_CONFIG),
+      inspector: inject(UWT_EVENT_INSPECTOR_CONFIG)
+    },
+    readable,
+    2
+  );
+
+  /** Reloads with `json` as the overlay; none for the lab's own settings. */
+  protected apply(json = this.draft().trim()): void {
+    if (json) {
+      try {
+        JSON.parse(json);
+      } catch {
+        this.error.set('Not JSON.');
+        return;
+      }
+    }
+    const url = new URL(this.window.location.href);
+    if (json) {
+      url.searchParams.set('config', json);
+    } else {
+      url.searchParams.delete('config');
+    }
+    this.window.location.assign(url.toString());
+  }
+
+  protected setDebug(flag: DebugFlag, on: boolean): void {
+    try {
+      if (on) {
+        this.window.localStorage.setItem(flag, 'true');
+      } else {
+        this.window.localStorage.removeItem(flag);
+      }
+    } catch {
+      // Storage blocked: the flags stay as they were.
+    }
+    this.debug.set(this.readDebug());
+  }
+
+  private readDebug(): Record<DebugFlag, boolean> {
+    const on = (flag: DebugFlag) => {
+      try {
+        return !!this.window.localStorage.getItem(flag);
+      } catch {
+        return false;
+      }
+    };
+    return {
+      debugScenario: on('debugScenario'),
+      debugBI: on('debugBI'),
+      debugLogger: on('debugLogger')
+    };
+  }
+}
+
+/** RegExps and functions, readable in JSON. */
+function readable(_key: string, value: unknown): unknown {
+  if (value instanceof RegExp) {
+    return String(value);
+  }
+  return typeof value === 'function'
+    ? `ƒ ${value.name || '(anonymous)'}`
+    : value;
+}
diff --git a/projects/watchtower-lab/src/shell/pages/wire.page.ts b/projects/watchtower-lab/src/shell/pages/wire.page.ts
index 17ef594..12adaba 100644
--- a/projects/watchtower-lab/src/shell/pages/wire.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/wire.page.ts
@@ -9,7 +9,8 @@ import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
 import {
   CpsButtonComponent,
   CpsSelectComponent,
-  CpsSwitchComponent
+  CpsSwitchComponent,
+  CpsTextareaComponent
 } from 'cps-ui-kit';
 import {
   LAB_TELEMETRIES,
@@ -26,12 +27,30 @@ const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
   {
     label: 'short-expiry — credentials refresh within seconds',
     value: 'short-expiry'
+  },
+  { label: 'flaky — fails twice, then answers', value: 'flaky' },
+  {
+    label: 'invalid — a pattern as a string: RUM not started',
+    value: 'invalid'
+  },
+  {
+    label: 'null-on-refresh — RUM off at the first refresh',
+    value: 'null-on-refresh'
+  },
+  {
+    label: 'no-credentials-on-refresh — a refresh without credentials',
+    value: 'no-credentials-on-refresh'
   }
 ];
 
 @Component({
   selector: 'lab-wire-page',
-  imports: [CpsButtonComponent, CpsSelectComponent, CpsSwitchComponent],
+  imports: [
+    CpsButtonComponent,
+    CpsSelectComponent,
+    CpsSwitchComponent,
+    CpsTextareaComponent
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
@@ -76,7 +95,19 @@ const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
               (valueChanged)="wire.setTelemetries($event)" />
           }
         </div>
+        <cps-textarea
+          label="Laid over the app monitor config (JSON)"
+          placeholder='{ "sessionSampleRate": 0 }'
+          width="26rem"
+          [rows]="3"
+          [value]="brokerConfigDraft()"
+          [error]="brokerConfigError()"
+          (valueChanged)="brokerConfigDraft.set($event)" />
         <div class="lab-actions">
+          <cps-button
+            label="Set the overlay"
+            type="outlined"
+            (clicked)="setBrokerConfig()" />
           <cps-button
             label="Reload to apply"
             type="outlined"
@@ -165,6 +196,11 @@ export class WirePage {
   protected readonly sink = inject(UwtTelemetrySink);
   protected readonly modes = BROKER_MODES;
   protected readonly libraryOnly = signal(true);
+  protected readonly brokerConfigDraft = signal(
+    JSON.stringify(this.wire.brokerConfig())
+  );
+
+  protected readonly brokerConfigError = signal('');
 
   protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
     label: t,
@@ -181,6 +217,21 @@ export class WirePage {
 
   protected readonly logs = computed(() => this.wire.logs().slice().reverse());
 
+  protected async setBrokerConfig(): Promise<void> {
+    let config: unknown;
+    try {
+      config = JSON.parse(this.brokerConfigDraft().trim() || '{}');
+    } catch {
+      config = undefined;
+    }
+    if (!config || typeof config !== 'object' || Array.isArray(config)) {
+      this.brokerConfigError.set('Not a JSON object.');
+      return;
+    }
+    this.brokerConfigError.set('');
+    await this.wire.setBrokerConfig(config as Record<string, unknown>);
+  }
+
   protected reload(): void {
     location.reload();
   }
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 5e74adc..8cf2d80 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -36,6 +36,12 @@ import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
       <span class="lab-chip"
         >rum telemetries: {{ wire.telemetriesLabel() }}</span
       >
+      @if (options.channel === 'shared') {
+        <span class="lab-chip">channel: shared</span>
+      }
+      @if (customConfig) {
+        <span class="lab-chip">config: custom</span>
+      }
       <span class="lab-spacer"></span>
       <span class="lab-user">{{
         identity().userId ? 'Signed in' : 'Signed out'
@@ -110,6 +116,7 @@ import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
 })
 export class ShellComponent {
   protected readonly options = inject(LAB_OPTIONS);
+  protected readonly customConfig = Object.keys(this.options.config).length > 0;
   protected readonly wire = inject(LabWire);
   protected readonly inspector = inject(UwtEventInspectorService);
   protected readonly pages = SHELL_PAGES;
diff --git a/projects/watchtower-lab/src/shell/shell.config.server.ts b/projects/watchtower-lab/src/shell/shell.config.server.ts
index d5990e4..f6bb9a6 100644
--- a/projects/watchtower-lab/src/shell/shell.config.server.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.server.ts
@@ -13,6 +13,8 @@ const serverRoutes: ServerRoute[] = [
   // cps-ui-kit's cps-select creates a ResizeObserver in its constructor,
   // which a server doesn't have: "On the wire" renders in the browser.
   { path: 'wire', renderMode: RenderMode.Client },
+  // Its effective settings are the browser's, from the query string.
+  { path: 'settings', renderMode: RenderMode.Client },
   { path: '**', renderMode: RenderMode.Server }
 ];
 
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index 1df1f6b..d23df9e 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -1,7 +1,7 @@
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import {
   ApplicationConfig,
-  InjectionToken,
+  inject,
   provideZoneChangeDetection
 } from '@angular/core';
 import {
@@ -14,6 +14,7 @@ import {
   UWT_LOG_API_PROVIDER,
   provideUwtTelemetry,
   provideUwtTelemetryBroadcastHost,
+  provideUwtTelemetryDestination,
   provideUwtTelemetrySink,
   withBIEvents,
   withLogging,
@@ -26,12 +27,17 @@ import {
   provideUwtTelemetryRumSink
 } from '@absaoss-cps/ngx-ui-watchtower/rum';
 import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
-import { LabOptions } from '../lab/lab-options';
-import { LAB_CHANNEL } from '../lab/lab-channel';
+import {
+  LAB_OPTIONS,
+  LAB_VALUE_TRANSFORMS,
+  LabOptions
+} from '../lab/lab-options';
+import { labChannel } from '../lab/lab-channel';
+import { LabCustomSink } from '../lab/lab-custom.sink';
 import { LabLogApiProvider } from '../lab/lab-log-api.provider';
 import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
 
-export const LAB_OPTIONS = new InjectionToken<LabOptions>('LAB_OPTIONS');
+export { LAB_OPTIONS };
 
 export const SHELL_PAGES = [
   {
@@ -84,6 +90,11 @@ export const SHELL_PAGES = [
     path: 'wire',
     label: 'On the wire',
     load: () => import('./pages/wire.page').then((m) => m.WirePage)
+  },
+  {
+    path: 'settings',
+    label: 'Settings',
+    load: () => import('./pages/settings.page').then((m) => m.SettingsPage)
   }
 ];
 
@@ -98,43 +109,80 @@ const routes: Routes = [
 
 /**
  * The shell: the realm with the real destination. RUM against the lab's
- * mock dataplane (or noop), logs to its mock backend, the broadcast host for
- * the fragment, and the Event Inspector.
+ * mock dataplane (or noop, or the lab's own sink), logs to its mock backend, the broadcast host for
+ * the fragment, and the Event Inspector. A `?config=` overlay replaces the
+ * lab's own settings, one by one.
  */
-export const shellConfig = (options: LabOptions): ApplicationConfig => ({
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideClientHydration(withEventReplay()),
-    provideAnimations(),
-    provideHttpClient(withFetch()),
-    provideRouter(routes),
-    { provide: LAB_OPTIONS, useValue: options },
-    provideUwtTelemetry(
-      { application: 'watchtower-lab', environment: 'lab', version: '1.0.0' },
-      withTelemetryEnabled(options.telemetry),
-      withLogging({
-        minLevel: 'log',
-        levels: { noisy: 'warn' },
-        mirrorErrorsToRum: true
-      }),
-      withScenarios({ defaultTimeoutMs: 30_000 }),
-      withBIEvents(),
-      withRedaction({
-        scanValuePatterns: ['email', 'creditCard', 'ssn', 'ipv4', 'phone']
+export const shellConfig = (options: LabOptions): ApplicationConfig => {
+  const { identity, scenarios, logging, bi, inspector } = options.config;
+  const {
+    extraKeyPatterns,
+    extraValuePatterns,
+    extraValueTransforms,
+    ...redaction
+  } = options.config.redaction ?? {};
+
+  return {
+    providers: [
+      provideZoneChangeDetection({ eventCoalescing: true }),
+      provideClientHydration(withEventReplay()),
+      provideAnimations(),
+      provideHttpClient(withFetch()),
+      provideRouter(routes),
+      { provide: LAB_OPTIONS, useValue: options },
+      provideUwtTelemetry(
+        {
+          application: 'watchtower-lab',
+          environment: 'lab',
+          version: '1.0.0',
+          ...identity
+        },
+        // The factory form, read once at startup in an injection context.
+        withTelemetryEnabled(() => inject(LAB_OPTIONS).telemetry),
+        withLogging({
+          minLevel: 'log',
+          levels: { noisy: 'warn' },
+          mirrorErrorsToRum: true,
+          ...logging
+        }),
+        withScenarios({ defaultTimeoutMs: 30_000, ...scenarios }),
+        withBIEvents(bi),
+        withRedaction({
+          scanValuePatterns: ['email', 'creditCard', 'ssn', 'ipv4', 'phone'],
+          ...redaction,
+          ...(extraKeyPatterns && {
+            extraKeyPatterns: extraKeyPatterns.map((p) => new RegExp(p, 'i'))
+          }),
+          ...(extraValuePatterns && {
+            extraValuePatterns: extraValuePatterns.map((p) => new RegExp(p))
+          }),
+          ...(extraValueTransforms && {
+            extraValueTransforms: extraValueTransforms.map(
+              (name) => LAB_VALUE_TRANSFORMS[name]
+            )
+          })
+        })
+      ),
+      options.destination === 'noop'
+        ? provideUwtTelemetrySink('noop')
+        : options.destination === 'custom'
+          ? provideUwtTelemetryDestination(LabCustomSink, {
+              init: (sink) => sink.init()
+            })
+          : provideUwtTelemetryRumSink(),
+      {
+        provide: UWT_RUM_CREDENTIALS_PROVIDER,
+        useExisting: LabRumCredentialsProvider
+      },
+      { provide: UWT_LOG_API_PROVIDER, useExisting: LabLogApiProvider },
+      provideUwtTelemetryBroadcastHost(
+        labChannel(options.channel === 'shared')
+      ),
+      provideUwtEventInspector({
+        enabled: options.inspector !== 'off',
+        ...(options.inspector === 'noshortcut' && { shortcuts: [] }),
+        ...inspector
       })
-    ),
-    options.destination === 'noop'
-      ? provideUwtTelemetrySink('noop')
-      : provideUwtTelemetryRumSink(),
-    {
-      provide: UWT_RUM_CREDENTIALS_PROVIDER,
-      useExisting: LabRumCredentialsProvider
-    },
-    { provide: UWT_LOG_API_PROVIDER, useExisting: LabLogApiProvider },
-    provideUwtTelemetryBroadcastHost(LAB_CHANNEL),
-    provideUwtEventInspector({
-      enabled: options.inspector !== 'off',
-      ...(options.inspector === 'noshortcut' && { shortcuts: [] })
-    })
-  ]
-});
+    ]
+  };
+};
diff --git a/projects/watchtower-lab/src/telemetry.schema.ts b/projects/watchtower-lab/src/telemetry.schema.ts
index 71f70c5..5447a07 100644
--- a/projects/watchtower-lab/src/telemetry.schema.ts
+++ b/projects/watchtower-lab/src/telemetry.schema.ts
@@ -15,6 +15,16 @@ declare module '@absaoss-cps/ngx-ui-watchtower' {
     'lab-abandoned': true;
     'lab-privacy': true;
     'lab-burst': true;
+    'lab-detailed': true;
+    'lab-parent': true;
+    'lab-child': true;
+    'lab-settled': true;
+    'lab-crowd': true;
+    'lab-long': true;
+    'lab-trace-outcome': true;
+    'lab-trace-cancel': true;
+    'lab-trace-teardown': true;
+    'lab-correlated': true;
   }
   interface UwtScenarioSteps {
     fetch: true;

From 4a3bd9ea979909a7cd21e8fcab5fd5de6b5fb810 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 21:26:00 +0100
Subject: [PATCH 16/51] address review round

---
 playwright/bi.spec.ts                         |  6 +-
 playwright/broker.spec.ts                     |  2 +-
 playwright/channel.spec.ts                    |  9 +-
 playwright/debug.spec.ts                      |  6 ++
 playwright/destination.spec.ts                | 16 ++++
 playwright/lab.ts                             | 34 ++++---
 playwright/logging.spec.ts                    | 12 +++
 playwright/rum-startup.spec.ts                | 12 +++
 playwright/scenarios.spec.ts                  |  6 +-
 playwright/settings.spec.ts                   | 31 +++++++
 playwright/tabs.spec.ts                       |  6 +-
 playwright/wire.spec.ts                       |  3 +
 projects/watchtower-lab/server/lab-backend.ts | 12 ++-
 .../watchtower-lab/src/lab/lab-custom.sink.ts | 43 ++++++---
 projects/watchtower-lab/src/lab/lab-json.ts   | 16 ++++
 .../src/lab/lab-log-api.provider.ts           | 15 ++--
 .../watchtower-lab/src/lab/lab-options.ts     | 88 +++++++++++++++++--
 .../src/lab/lab-rum-credentials.provider.ts   |  5 +-
 .../src/shell/pages/logging.page.ts           | 18 ++--
 .../src/shell/pages/scenarios.page.ts         |  2 +
 .../src/shell/pages/settings.page.ts          | 51 +++++------
 .../src/shell/pages/wire.page.ts              | 20 ++---
 .../watchtower-lab/src/shell/shell.config.ts  | 25 +-----
 23 files changed, 314 insertions(+), 124 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-json.ts

diff --git a/playwright/bi.spec.ts b/playwright/bi.spec.ts
index 961d934..eb35ccd 100644
--- a/playwright/bi.spec.ts
+++ b/playwright/bi.spec.ts
@@ -30,8 +30,10 @@ test('clicking again within 400 ms adds nothing; after it, a second event', asyn
   page,
   backend
 }) => {
-  await press(page, 'Track a click');
-  await press(page, 'Track a click');
+  // Two clicks, milliseconds apart.
+  await page
+    .getByRole('button', { name: 'Track a click', exact: true })
+    .dblclick();
   await page.waitForTimeout(600);
   await press(page, 'Track a click');
   // Tracked last, so once this arrives the clicks have had their chance.
diff --git a/playwright/broker.spec.ts b/playwright/broker.spec.ts
index 8045ae3..6405943 100644
--- a/playwright/broker.spec.ts
+++ b/playwright/broker.spec.ts
@@ -30,7 +30,7 @@ test('broker "short-expiry": credentials are refreshed within seconds, without a
   await backend.setBrokerMode('short-expiry');
   let inits = 0;
   page.on('request', (r) => {
-    if (r.url().endsWith('/rum/init')) {
+    if (new URL(r.url()).pathname === '/rum/init') {
       inits++;
     }
   });
diff --git a/playwright/channel.spec.ts b/playwright/channel.spec.ts
index ab9c344..3411c28 100644
--- a/playwright/channel.spec.ts
+++ b/playwright/channel.spec.ts
@@ -1,8 +1,9 @@
-import { expect, named, openLab, press, test } from './lab';
+import { expect, named, openLab, press, test, watchErrors } from './lab';
 
 test("on a shared channel, one tab's host leads for every tab, and another takes over when it closes", async ({
   context,
-  backend
+  backend,
+  errors
 }) => {
   // Both Event Inspectors open as panes, beside their fragments.
   await context.addInitScript(() =>
@@ -12,6 +13,7 @@ test("on a shared channel, one tab's host leads for every tab, and another takes
     )
   );
   const tabs = [await context.newPage(), await context.newPage()];
+  tabs.forEach((tab) => watchErrors(tab, errors));
   for (const tab of tabs) {
     await openLab(tab, 'web-fragment?channel=shared');
     await expect(tab.locator('web-fragment h1')).toHaveText('lab-fragment');
@@ -26,6 +28,9 @@ test("on a shared channel, one tab's host leads for every tab, and another takes
   await expect(first.locator('uwt-inspector')).toContainText(
     'fragment_button_clicked'
   );
+  await backend.rumUntil((e) => named(e, 'fragment_button_clicked').length > 0);
+  // Past the inspector's 250 ms refresh: the follower would show it by now.
+  await second.waitForTimeout(500);
   await expect(second.locator('uwt-inspector')).not.toContainText(
     'fragment_button_clicked'
   );
diff --git a/playwright/debug.spec.ts b/playwright/debug.spec.ts
index 8898c58..99c72a4 100644
--- a/playwright/debug.spec.ts
+++ b/playwright/debug.spec.ts
@@ -50,4 +50,10 @@ test('debugLogger with a list prints only those loggers', async ({ page }) => {
       expect.stringMatching(/^\[watchtower-lab\]\[noisy\] A noisy warning/)
     );
   expect(lines.some((l) => l.includes('A lab warning'))).toBe(false);
+
+  // A list isn't "on" for every logger: the Settings switch says so.
+  await navigate(page, 'Settings');
+  await expect(
+    page.getByRole('switch', { name: 'debugLogger' })
+  ).not.toBeChecked();
 });
diff --git a/playwright/destination.spec.ts b/playwright/destination.spec.ts
index 3b6dd24..d6bc8e9 100644
--- a/playwright/destination.spec.ts
+++ b/playwright/destination.spec.ts
@@ -33,3 +33,19 @@ test('a custom destination is started once, given every event classified, and RU
   ]);
   expect(rum).toEqual([]);
 });
+
+test('a custom destination still gets the scenario abandoned as the page goes', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'lifecycle?destination=custom');
+  await press(page, 'Start a scenario and reload');
+  await expect
+    .poll(
+      async () =>
+        (await backend.custom()).find(
+          (e) => e.payload?.scenarioName === 'lab-abandoned'
+        )?.payload
+    )
+    .toMatchObject({ status: 'abandoned' });
+});
diff --git a/playwright/lab.ts b/playwright/lab.ts
index ea609e2..d3ef3f5 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -57,7 +57,9 @@ export class LabBackend {
   }
 
   /** What the lab's custom sink was given, with `?destination=custom`. */
-  async custom(): Promise<{ kind: string; eventType?: string }[]> {
+  async custom(): Promise<
+    { kind: string; eventType?: string; payload?: Record<string, unknown> }[]
+  > {
     return (await this.request.get('/__lab/custom')).json();
   }
 
@@ -128,20 +130,12 @@ export const test = base.extend<{
     { auto: true }
   ],
 
-  // Page and console errors fail the test. A failed request isn't one: the
-  // `fail` broker answers with an error on purpose.
+  // Page and console errors fail the test — a test's other tabs too, once
+  // given to watchErrors.
   errors: [
     async ({ page }, use) => {
       const errors: string[] = [];
-      page.on('pageerror', (e) => errors.push(`page: ${e.message}`));
-      page.on('console', (m) => {
-        if (
-          m.type() === 'error' &&
-          !m.text().startsWith('Failed to load resource')
-        ) {
-          errors.push(`console: ${m.text()}`);
-        }
-      });
+      watchErrors(page, errors);
       await use(errors);
       expect(errors, 'page and console errors').toEqual([]);
     },
@@ -149,6 +143,22 @@ export const test = base.extend<{
   ]
 });
 
+/**
+ * Collects `page`'s errors into `errors`. A failed request isn't one: the
+ * `fail` broker answers with an error on purpose.
+ */
+export function watchErrors(page: Page, errors: string[]): void {
+  page.on('pageerror', (e) => errors.push(`page: ${e.message}`));
+  page.on('console', (m) => {
+    if (
+      m.type() === 'error' &&
+      !m.text().startsWith('Failed to load resource')
+    ) {
+      errors.push(`console: ${m.text()}`);
+    }
+  });
+}
+
 export { expect };
 export type { FrameLocator, Locator, Page };
 
diff --git a/playwright/logging.spec.ts b/playwright/logging.spec.ts
index 70553aa..121ed27 100644
--- a/playwright/logging.spec.ts
+++ b/playwright/logging.spec.ts
@@ -108,3 +108,15 @@ test('a batching log provider is flushed as the page is hidden', async ({
     .poll(async () => (await backend.logs()).length, { timeout: 3000 })
     .toBe(1);
 });
+
+test('a batching log provider is flushed as the page reloads, in every browser', async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'logging', { lab: { logBatching: true } });
+  await press(page, 'warn');
+  await page.reload();
+  await expect
+    .poll(async () => (await backend.logs()).length, { timeout: 4000 })
+    .toBe(1);
+});
diff --git a/playwright/rum-startup.spec.ts b/playwright/rum-startup.spec.ts
index b2cff61..46a0926 100644
--- a/playwright/rum-startup.spec.ts
+++ b/playwright/rum-startup.spec.ts
@@ -103,6 +103,18 @@ test('a refresh answered with null turns RUM off for the page', async ({
   expect(named(await backend.rum(), 'lab_double_fired')).toEqual([]);
 });
 
+test("each page load is the broker's first call: a reload starts RUM again", async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerMode('null-on-refresh');
+  await openLab(page, 'bi');
+  const first = await sessionStarted(page);
+  await page.reload();
+  await expect(page.locator('html[data-lab-ready]')).toHaveCount(1);
+  expect(await sessionStarted(page)).toBe(first);
+});
+
 test('a refresh without credentials keeps the old ones: events still arrive', async ({
   page,
   backend
diff --git a/playwright/scenarios.spec.ts b/playwright/scenarios.spec.ts
index 32327b4..a354034 100644
--- a/playwright/scenarios.spec.ts
+++ b/playwright/scenarios.spec.ts
@@ -77,9 +77,9 @@ test('a backdated start and aggregated batches count in the timing', async ({
   const events = await backend.rumUntil(
     (e) => named(e, 'lab-aggregates').length > 0
   );
-  expect(
-    named(events, 'lab-backdated')[0].details.delta
-  ).toBeGreaterThanOrEqual(1500);
+  // Backdated in epoch time, measured on the page's clock: a millisecond
+  // can go either way.
+  expect(named(events, 'lab-backdated')[0].details.delta).toBeGreaterThan(1490);
   const [batch] = named(events, 'lab-aggregates')[0].details.aggregates;
   expect(batch).toMatchObject({ name: 'batch', callCount: 5 });
   expect(batch.elapsed).toBeGreaterThanOrEqual(150);
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 8903da8..207ae60 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -252,3 +252,34 @@ test('inspector settings: a custom shortcut, a smaller section, a smaller view',
     .click();
   await expect(bi).toContainText(/showing the first 1,?000 characters/);
 });
+
+test('a pattern that is not a RegExp is left out with a warning, and the lab still starts', async ({
+  page,
+  backend
+}) => {
+  const warnings: string[] = [];
+  page.on('console', (m) => m.type() === 'warning' && warnings.push(m.text()));
+  await openLab(page, 'logging', {
+    redaction: { extraKeyPatterns: ['(', '^orderId$'] }
+  });
+  await press(page, 'error, with an Error');
+  expect((await onlyLog(backend)).metadata).toEqual({ orderId: '[redacted]' });
+  expect(warnings).toContainEqual(
+    expect.stringContaining('"(" isn\'t a RegExp')
+  );
+});
+
+test('applying an overlay keeps the other startup options, which in-app links drop', async ({
+  page
+}) => {
+  await openLab(page, 'bi?destination=noop');
+  await navigate(page, 'Settings');
+  await page
+    .getByRole('textbox', { name: '?config= (JSON)' })
+    .fill('{ "bi": { "dedupWindowMs": 0 } }');
+  await press(page, 'Apply and reload');
+
+  await expect(page.locator('.lab-header')).toContainText('config: custom');
+  await expect(page.locator('.lab-header')).toContainText('destination: noop');
+  expect(new URL(page.url()).searchParams.get('destination')).toBe('noop');
+});
diff --git a/playwright/tabs.spec.ts b/playwright/tabs.spec.ts
index 83696a1..e45b739 100644
--- a/playwright/tabs.spec.ts
+++ b/playwright/tabs.spec.ts
@@ -1,8 +1,9 @@
-import { expect, named, openLab, press, test } from './lab';
+import { expect, named, openLab, press, test, watchErrors } from './lab';
 
 test("two tabs: each fragment reaches its own tab's shell, over that tab's channel", async ({
   context,
-  backend
+  backend,
+  errors
 }) => {
   // Both Event Inspectors open as panes, beside their fragments.
   await context.addInitScript(() =>
@@ -12,6 +13,7 @@ test("two tabs: each fragment reaches its own tab's shell, over that tab's chann
     )
   );
   const tabs = [await context.newPage(), await context.newPage()];
+  tabs.forEach((tab) => watchErrors(tab, errors));
   for (const tab of tabs) {
     await openLab(tab, 'web-fragment');
     await expect(tab.locator('web-fragment h1')).toHaveText('lab-fragment');
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
index 2007640..81a851f 100644
--- a/playwright/wire.spec.ts
+++ b/playwright/wire.spec.ts
@@ -93,6 +93,9 @@ test('the overlay field sets what is laid over the broker config, and refuses wh
   await expect
     .poll(async () => (await backend.state()).brokerConfig)
     .toEqual({ sessionSampleRate: 0 });
+  // After a reload, the field shows the overlay in force.
+  await press(page, 'Reload to apply');
+  await expect(field).toHaveValue('{"sessionSampleRate":0}');
 
   await field.fill('[1, 2]');
   await press(page, 'Set the overlay');
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index e79c315..006d285 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -104,7 +104,8 @@ function parseJson(text: string | undefined): any {
 }
 
 /**
- * What the broker answers, by mode and call: `undefined` for an error,
+ * What the broker answers, by mode and the page's call — its first, at
+ * startup, or a later one, a retry or refresh: `undefined` for an error,
  * `enabled: false` to turn RUM off for the page.
  *
  * - `flaky`: the first two calls fail, as a broker starting up might
@@ -114,7 +115,9 @@ function parseJson(text: string | undefined): any {
  */
 function broker(req: Request) {
   const mode = state.brokerMode;
-  const call = ++state.brokerCalls;
+  state.brokerCalls++;
+  // The page counts its own calls: each load starts again at 1.
+  const call = Number(req.query.call) || 1;
   if (mode === 'fail' || (mode === 'flaky' && call <= 2)) {
     return undefined;
   }
@@ -323,7 +326,10 @@ labBackend
   .route('/__lab/custom')
   .post(
     promised(async (req, res) => {
-      state.custom.push(parseJson(await readBody(req)));
+      const body = parseJson(await readBody(req));
+      state.custom.push(
+        ...(Array.isArray(body) ? body : [body]).filter(Boolean)
+      );
       res.status(204).end();
     })
   )
diff --git a/projects/watchtower-lab/src/lab/lab-custom.sink.ts b/projects/watchtower-lab/src/lab/lab-custom.sink.ts
index 1e56738..79abec8 100644
--- a/projects/watchtower-lab/src/lab/lab-custom.sink.ts
+++ b/projects/watchtower-lab/src/lab/lab-custom.sink.ts
@@ -1,23 +1,33 @@
-import { Injectable } from '@angular/core';
+import { DOCUMENT, inject, Injectable } from '@angular/core';
 import {
   UwtTelemetryError,
   UwtTelemetryMetadata,
   UwtTelemetrySink,
-  uwtClassifyTelemetryEvent
+  uwtClassifyTelemetryEvent,
+  uwtMarkSessionStart,
+  uwtUuid
 } from '@absaoss-cps/ngx-ui-watchtower';
 
 /**
  * A destination of the lab's own, as an app would write one for its own
  * backend: each event, classified, posted to the mock backend's
  * `/__lab/custom`. With `?destination=custom`.
+ *
+ * Events wait for the end of the task, then go together. As the page goes,
+ * the library records what is left and calls `flush(true)` straight after:
+ * those go by beacon, which outlives the page where a fetch is cancelled.
  */
 @Injectable()
 export class LabCustomSink extends UwtTelemetrySink {
-  private readonly sessionId = crypto.randomUUID();
+  private readonly document = inject(DOCUMENT);
+  /** One session per page load: it starts now, for `sessionElapsed`. */
+  private readonly sessionId = uwtUuid();
   private userId?: string;
+  private queue: object[] = [];
 
   /** Run once at startup, by `provideUwtTelemetryDestination`'s `init`. */
   init(): void {
+    uwtMarkSessionStart(this.sessionId);
     this.post({ kind: 'init' });
   }
 
@@ -46,16 +56,25 @@ export class LabCustomSink extends UwtTelemetrySink {
     return this.userId;
   }
 
-  /** Nothing waits: each event is posted as it comes. */
-  flush(): void {
-    // Nothing to send.
+  flush(beacon = false): void {
+    if (this.queue.length === 0) {
+      return;
+    }
+    const json = JSON.stringify(this.queue);
+    this.queue = [];
+    const sent =
+      beacon &&
+      this.document.defaultView?.navigator.sendBeacon('/__lab/custom', json);
+    if (!sent) {
+      fetch('/__lab/custom', { method: 'POST', body: json }).catch(
+        () => undefined
+      );
+    }
   }
 
-  private post(body: object): void {
-    fetch('/__lab/custom', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify(body)
-    }).catch(() => undefined);
+  private post(event: object): void {
+    if (this.queue.push(event) === 1) {
+      queueMicrotask(() => this.flush());
+    }
   }
 }
diff --git a/projects/watchtower-lab/src/lab/lab-json.ts b/projects/watchtower-lab/src/lab/lab-json.ts
new file mode 100644
index 0000000..e2567a9
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-json.ts
@@ -0,0 +1,16 @@
+/**
+ * `text` as a JSON object, or `undefined` for anything else: not JSON, an
+ * array, a number. The lab's JSON fields all take objects.
+ */
+export function parseJsonObject(
+  text: string
+): Record<string, unknown> | undefined {
+  try {
+    const value: unknown = JSON.parse(text);
+    return value && typeof value === 'object' && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
index 92f912d..b59f0b1 100644
--- a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
@@ -30,11 +30,16 @@ export class LabLogApiProvider implements UwtLogApiProvider {
     this.timer ??= setTimeout(() => this.flush(), 10_000);
   }
 
+  /**
+   * Called by the library as the page is hidden or goes away. Kept alive
+   * either way: WebKit still says `visible` while a reloading page hides, and
+   * cancels a plain request then.
+   */
   flush(): void {
     clearTimeout(this.timer);
     this.timer = undefined;
     if (this.pending.length > 0) {
-      this.post(this.pending);
+      this.post(this.pending, true);
       this.pending = [];
     }
   }
@@ -48,13 +53,13 @@ export class LabLogApiProvider implements UwtLogApiProvider {
     return fetch(`/api/logs?${params}`).then((r) => r.json());
   }
 
-  private post(records: UwtLogRecord[]): void {
+  private post(records: UwtLogRecord[], closing = false): void {
     fetch('/api/logs', {
       method: 'POST',
       body: JSON.stringify(records),
-      // Only while the page is hidden (it may be closing): browsers reject
-      // keepalive requests once all in flight exceed 64 KiB.
-      keepalive: this.document.visibilityState === 'hidden'
+      // Only while the page may be closing: browsers reject keepalive
+      // requests once all in flight exceed 64 KiB.
+      keepalive: closing || this.document.visibilityState === 'hidden'
     }).catch(() => undefined);
   }
 }
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
index daf1a27..be2e77a 100644
--- a/projects/watchtower-lab/src/lab/lab-options.ts
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -6,6 +6,7 @@ import {
   UwtScenarioTelemetryConfig
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtEventInspectorConfig } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import { parseJsonObject } from './lab-json';
 
 /** Value transforms a {@link LabConfig} can name. */
 export const LAB_VALUE_TRANSFORMS = {
@@ -78,15 +79,90 @@ export function labOptions(search: string): LabOptions {
   };
 }
 
+/** The query string that starts the lab with `options`. */
+export function labSearch(options: LabOptions): string {
+  const params = new URLSearchParams();
+  if (options.destination !== 'rum') {
+    params.set('destination', options.destination);
+  }
+  if (!options.telemetry) {
+    params.set('telemetry', 'off');
+  }
+  if (options.channel === 'shared') {
+    params.set('channel', 'shared');
+  }
+  if (options.inspector !== 'on') {
+    params.set('inspector', options.inspector);
+  }
+  if (Object.keys(options.config).length > 0) {
+    params.set('config', JSON.stringify(options.config));
+  }
+  const search = params.toString();
+  return search ? `?${search}` : '';
+}
+
+/**
+ * The overlay's redaction settings as the library takes them. A pattern
+ * that isn't a `RegExp` source, or a transform the lab doesn't know, is left
+ * out with a warning, rather than stop the lab from starting.
+ */
+export function labRedaction(
+  redaction: LabConfig['redaction'] = {}
+): Partial<UwtRedactConfig> {
+  const {
+    extraKeyPatterns,
+    extraValuePatterns,
+    extraValueTransforms,
+    ...rest
+  } = redaction;
+  const transforms = list(extraValueTransforms, 'extraValueTransforms');
+  return {
+    ...rest,
+    ...(extraKeyPatterns && {
+      extraKeyPatterns: patterns(extraKeyPatterns, 'extraKeyPatterns', 'i')
+    }),
+    ...(extraValuePatterns && {
+      extraValuePatterns: patterns(extraValuePatterns, 'extraValuePatterns')
+    }),
+    ...(transforms && {
+      extraValueTransforms: transforms.flatMap((name) => {
+        const transform =
+          LAB_VALUE_TRANSFORMS[name as keyof typeof LAB_VALUE_TRANSFORMS];
+        if (!transform) {
+          console.warn(`[lab] ?config= has no value transform "${name}".`);
+        }
+        return transform ? [transform] : [];
+      })
+    })
+  };
+}
+
+function patterns(sources: unknown, field: string, flags?: string): RegExp[] {
+  return (list(sources, field) ?? []).flatMap((source) => {
+    try {
+      return [new RegExp(String(source), flags)];
+    } catch {
+      console.warn(`[lab] ?config= ${field}: "${source}" isn't a RegExp.`);
+      return [];
+    }
+  });
+}
+
+function list(value: unknown, field: string): unknown[] | undefined {
+  if (value === undefined || Array.isArray(value)) {
+    return value;
+  }
+  console.warn(`[lab] ?config= ${field} isn't a list; left out.`);
+  return undefined;
+}
+
 function parseConfig(json: string | null): LabConfig {
   if (!json) {
     return {};
   }
-  try {
-    const config = JSON.parse(json);
-    return config && typeof config === 'object' ? config : {};
-  } catch {
-    console.warn('[lab] ?config= is not JSON; ignored.');
-    return {};
+  const config = parseJsonObject(json);
+  if (!config) {
+    console.warn('[lab] ?config= is not a JSON object; ignored.');
   }
+  return config ?? {};
 }
diff --git a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
index ba04c2b..a0a2b6f 100644
--- a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
@@ -35,8 +35,11 @@ const telemetryOptions = (origin: string): Record<string, object> => ({
  */
 @Injectable({ providedIn: 'root' })
 export class LabRumCredentialsProvider implements UwtRumCredentialsProvider {
+  /** This page's calls, so the broker can tell startup from a refresh. */
+  private calls = 0;
+
   async load(): Promise<UwtRumBootstrap | null> {
-    const response = await fetch('/rum/init');
+    const response = await fetch(`/rum/init?call=${++this.calls}`);
     if (!response.ok) {
       throw new Error(`RUM bootstrap failed: ${response.status}`);
     }
diff --git a/projects/watchtower-lab/src/shell/pages/logging.page.ts b/projects/watchtower-lab/src/shell/pages/logging.page.ts
index 9e0c85c..dc88a7a 100644
--- a/projects/watchtower-lab/src/shell/pages/logging.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/logging.page.ts
@@ -9,6 +9,7 @@ import {
   UwtScenarioTelemetryService
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent, CpsTextareaComponent } from 'cps-ui-kit';
+import { parseJsonObject } from '../../lab/lab-json';
 
 @Component({
   selector: 'lab-logging-page',
@@ -121,18 +122,11 @@ export class LoggingPage {
 
   /** Any filter the log provider takes: logger, correlationId, minLevel… */
   protected async runQuery(): Promise<void> {
-    let filter: unknown;
-    try {
-      filter = JSON.parse(this.filter().trim() || '{}');
-    } catch {
-      filter = undefined;
+    const filter = parseJsonObject(this.filter().trim() || '{}');
+    this.filterError.set(filter ? '' : 'Not a JSON object.');
+    if (filter) {
+      const records = await this.logger.query(filter);
+      this.readout.set(JSON.stringify(records, null, 2));
     }
-    if (!filter || typeof filter !== 'object' || Array.isArray(filter)) {
-      this.filterError.set('Not a JSON object.');
-      return;
-    }
-    this.filterError.set('');
-    const records = await this.logger.query(filter);
-    this.readout.set(JSON.stringify(records, null, 2));
   }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
index 9f49bd5..a839fd5 100644
--- a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
@@ -317,7 +317,9 @@ export class ScenariosPage {
     crowd.forEach((scenario) => scenario.cancel());
   }
 
+  /** Never times out: the one before it, if still running, is cancelled. */
   protected startLong(): void {
+    this.long?.cancel();
     this.long = this.scenarios.start({ name: 'lab-long', timeoutMs: 0 });
     this.lookUp();
   }
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 909036d..17cb5c6 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -10,7 +10,8 @@ import {
   UWT_LOG_CONFIG,
   UWT_REDACT_CONFIG,
   UWT_SCENARIO_TELEMETRY_CONFIG,
-  UWT_TELEMETRY_IDENTITY
+  UWT_TELEMETRY_IDENTITY,
+  uwtIsDebugEnabled
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { UWT_EVENT_INSPECTOR_CONFIG } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import {
@@ -18,6 +19,8 @@ import {
   CpsSwitchComponent,
   CpsTextareaComponent
 } from 'cps-ui-kit';
+import { parseJsonObject } from '../../lab/lab-json';
+import { labSearch } from '../../lab/lab-options';
 import { LAB_OPTIONS } from '../shell.config';
 
 const DEBUG_FLAGS = ['debugScenario', 'debugBI', 'debugLogger'] as const;
@@ -83,10 +86,12 @@ export class SettingsPage {
   protected readonly error = signal('');
 
   private readonly window = inject(DOCUMENT).defaultView!;
-  private readonly config = inject(LAB_OPTIONS).config;
+  private readonly options = inject(LAB_OPTIONS);
 
   protected readonly draft = signal(
-    Object.keys(this.config).length ? JSON.stringify(this.config, null, 2) : ''
+    Object.keys(this.options.config).length
+      ? JSON.stringify(this.options.config, null, 2)
+      : ''
   );
 
   protected readonly debug = signal(this.readDebug());
@@ -105,23 +110,19 @@ export class SettingsPage {
     2
   );
 
-  /** Reloads with `json` as the overlay; none for the lab's own settings. */
+  /**
+   * Reloads with `json` as the overlay — none for the lab's own settings —
+   * keeping the other startup options, which in-app links drop.
+   */
   protected apply(json = this.draft().trim()): void {
-    if (json) {
-      try {
-        JSON.parse(json);
-      } catch {
-        this.error.set('Not JSON.');
-        return;
-      }
-    }
-    const url = new URL(this.window.location.href);
-    if (json) {
-      url.searchParams.set('config', json);
-    } else {
-      url.searchParams.delete('config');
+    const config = json ? parseJsonObject(json) : {};
+    if (!config) {
+      this.error.set('Not a JSON object.');
+      return;
     }
-    this.window.location.assign(url.toString());
+    this.window.location.assign(
+      `${this.window.location.pathname}${labSearch({ ...this.options, config })}`
+    );
   }
 
   protected setDebug(flag: DebugFlag, on: boolean): void {
@@ -137,18 +138,12 @@ export class SettingsPage {
     this.debug.set(this.readDebug());
   }
 
+  /** As the library reads them: a list of logger names is not "on". */
   private readDebug(): Record<DebugFlag, boolean> {
-    const on = (flag: DebugFlag) => {
-      try {
-        return !!this.window.localStorage.getItem(flag);
-      } catch {
-        return false;
-      }
-    };
     return {
-      debugScenario: on('debugScenario'),
-      debugBI: on('debugBI'),
-      debugLogger: on('debugLogger')
+      debugScenario: uwtIsDebugEnabled('debugScenario'),
+      debugBI: uwtIsDebugEnabled('debugBI'),
+      debugLogger: uwtIsDebugEnabled('debugLogger')
     };
   }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/wire.page.ts b/projects/watchtower-lab/src/shell/pages/wire.page.ts
index 12adaba..2a910f8 100644
--- a/projects/watchtower-lab/src/shell/pages/wire.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/wire.page.ts
@@ -3,6 +3,7 @@ import {
   Component,
   computed,
   inject,
+  linkedSignal,
   signal
 } from '@angular/core';
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
@@ -19,6 +20,7 @@ import {
   LabTelemetry,
   LabWire
 } from '../../lab/lab-wire.service';
+import { parseJsonObject } from '../../lab/lab-json';
 
 const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
   { label: 'ok — RUM records normally', value: 'ok' },
@@ -196,7 +198,8 @@ export class WirePage {
   protected readonly sink = inject(UwtTelemetrySink);
   protected readonly modes = BROKER_MODES;
   protected readonly libraryOnly = signal(true);
-  protected readonly brokerConfigDraft = signal(
+  /** The overlay in force, until edited; replaced if the server's changes. */
+  protected readonly brokerConfigDraft = linkedSignal(() =>
     JSON.stringify(this.wire.brokerConfig())
   );
 
@@ -218,18 +221,11 @@ export class WirePage {
   protected readonly logs = computed(() => this.wire.logs().slice().reverse());
 
   protected async setBrokerConfig(): Promise<void> {
-    let config: unknown;
-    try {
-      config = JSON.parse(this.brokerConfigDraft().trim() || '{}');
-    } catch {
-      config = undefined;
+    const config = parseJsonObject(this.brokerConfigDraft().trim() || '{}');
+    this.brokerConfigError.set(config ? '' : 'Not a JSON object.');
+    if (config) {
+      await this.wire.setBrokerConfig(config);
     }
-    if (!config || typeof config !== 'object' || Array.isArray(config)) {
-      this.brokerConfigError.set('Not a JSON object.');
-      return;
-    }
-    this.brokerConfigError.set('');
-    await this.wire.setBrokerConfig(config as Record<string, unknown>);
   }
 
   protected reload(): void {
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index d23df9e..38b40c6 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -27,11 +27,7 @@ import {
   provideUwtTelemetryRumSink
 } from '@absaoss-cps/ngx-ui-watchtower/rum';
 import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
-import {
-  LAB_OPTIONS,
-  LAB_VALUE_TRANSFORMS,
-  LabOptions
-} from '../lab/lab-options';
+import { LAB_OPTIONS, labRedaction, LabOptions } from '../lab/lab-options';
 import { labChannel } from '../lab/lab-channel';
 import { LabCustomSink } from '../lab/lab-custom.sink';
 import { LabLogApiProvider } from '../lab/lab-log-api.provider';
@@ -115,12 +111,6 @@ const routes: Routes = [
  */
 export const shellConfig = (options: LabOptions): ApplicationConfig => {
   const { identity, scenarios, logging, bi, inspector } = options.config;
-  const {
-    extraKeyPatterns,
-    extraValuePatterns,
-    extraValueTransforms,
-    ...redaction
-  } = options.config.redaction ?? {};
 
   return {
     providers: [
@@ -149,18 +139,7 @@ export const shellConfig = (options: LabOptions): ApplicationConfig => {
         withBIEvents(bi),
         withRedaction({
           scanValuePatterns: ['email', 'creditCard', 'ssn', 'ipv4', 'phone'],
-          ...redaction,
-          ...(extraKeyPatterns && {
-            extraKeyPatterns: extraKeyPatterns.map((p) => new RegExp(p, 'i'))
-          }),
-          ...(extraValuePatterns && {
-            extraValuePatterns: extraValuePatterns.map((p) => new RegExp(p))
-          }),
-          ...(extraValueTransforms && {
-            extraValueTransforms: extraValueTransforms.map(
-              (name) => LAB_VALUE_TRANSFORMS[name]
-            )
-          })
+          ...labRedaction(options.config.redaction)
         })
       ),
       options.destination === 'noop'

From f8cbf44d206af59f3324f6058f882cc7cf1db3ca Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 5 Nov 2026 21:44:43 +0100
Subject: [PATCH 17/51] fix lockfile

---
 package-lock.json                                  | 14 ++++++++++++++
 projects/ngx-ui-watchtower/DESIGN.md               | 10 ++++++++--
 projects/ngx-ui-watchtower/README.md               |  6 +++++-
 .../uwt-log-api.provider/uwt-log-api.provider.ts   |  4 +++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 389c062..6acd57d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -939,6 +939,20 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/cdk/node_modules/entities": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-9.0.0.tgz",
+      "integrity": "sha512-oJFNDJg3kTPwAD1cNn2+WmUq4wFoo09npc3Ydf1D7ED4smRiWrsKnaLxykrTWgyGEcusc87P5dxlAleol9kpkg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/@angular/cdk/node_modules/parse5": {
       "version": "8.1.0",
       "integrity": "sha512-sq3qBFpee5jeocbFbO48VHlGr8sT7mbXS0vxlKN6sottBtJzrOG3998sr0llSZcQAGgfpdmEYAIZE0P9z0dE8w==",
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index c24e9b2..48be5b9 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -1899,7 +1899,9 @@ export class MyLogBackend implements UwtLogApiProvider {
       body: JSON.stringify(record),
       // Survives page unload. Only while the page is hidden (it may be
       // closing): browsers reject keepalive requests once all in flight
-      // exceed 64 KiB, so a burst of records would be lost.
+      // exceed 64 KiB, so a burst of records would be lost. Safari still says
+      // `visible` while a reloading page hides, so a record written then can
+      // be lost there; batching, below, sends those from flush().
       keepalive: document.visibilityState === 'hidden'
     }).catch(() => undefined);
   }
@@ -1962,7 +1964,11 @@ export class MyLogBackend implements UwtLogApiProvider {
 The one moment you cannot catch from inside a provider is the tab closing.
 Implement the optional `flush()`, and the library calls it on `pagehide`, on
 `visibilitychange` going hidden (mobile browsers routinely kill a
-backgrounded tab without `pagehide`) and on teardown.
+backgrounded tab without `pagehide`) and on teardown. Send from it with a
+beacon or `keepalive` every time, as above, rather than only when
+`document.visibilityState` is `'hidden'`: Safari still says `visible` while a
+page that is reloading or navigating away hides, and cancels a plain request
+then.
 
 #### Sending loggers to different destinations
 
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 7b4ca2e..ed0f942 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -129,7 +129,11 @@ export class MyLogBackend implements UwtLogApiProvider {
 
 Batching, retries and authentication are up to your backend class. If it
 batches, add a `flush()` method — the library calls it when the page is
-hidden or closed.
+hidden or closed. Send from it with `navigator.sendBeacon` or a `keepalive`
+request every time, not only when the page says it is hidden: Safari still
+says `visible` while a page that is reloading or navigating away hides, and
+cancels a plain request then. For the same reason, the example above can lose
+a record written as the page goes, in Safari.
 
 ### Using a different destination
 
diff --git a/projects/ngx-ui-watchtower/src/lib/providers/uwt-log-api.provider/uwt-log-api.provider.ts b/projects/ngx-ui-watchtower/src/lib/providers/uwt-log-api.provider/uwt-log-api.provider.ts
index a2a50cc..3d963e8 100644
--- a/projects/ngx-ui-watchtower/src/lib/providers/uwt-log-api.provider/uwt-log-api.provider.ts
+++ b/projects/ngx-ui-watchtower/src/lib/providers/uwt-log-api.provider/uwt-log-api.provider.ts
@@ -85,7 +85,9 @@ export interface UwtLogApiProvider {
    *
    * Called on `pagehide`, on `visibilitychange` going hidden, and on
    * teardown. Must be synchronous and non-blocking. `fetch` with `keepalive`
-   * or `navigator.sendBeacon` are the usual choices.
+   * or `navigator.sendBeacon` are the usual choices — every time, not only
+   * while `document.visibilityState` is `'hidden'`: Safari still says
+   * `visible` while a reloading page hides, and cancels a plain request then.
    */
   flush?(): void;
 }

From 1ff4bad2d15c28962940a088b66949836bbefd1e Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 6 Nov 2026 09:32:49 +0100
Subject: [PATCH 18/51] a11y and wording fixes

---
 README.md                                     |   4 +-
 package-lock.json                             |  26 ++++-
 package.json                                  |   1 +
 playwright/a11y.spec.ts                       | 100 ++++++++++++++++++
 playwright/inspector-tools.spec.ts            |  10 +-
 playwright/logging.spec.ts                    |   8 +-
 projects/ngx-ui-watchtower/DESIGN.md          |  14 ++-
 .../uwt-inspector-filter-bar.component.html   |   2 +-
 .../uwt-inspector-json.component.html         |   3 +-
 .../uwt-inspector-json.component.scss         |   2 +-
 .../uwt-inspector-json.component.spec.ts      |  10 ++
 .../uwt-inspector-json.component.ts           |   3 +
 .../uwt-inspector-preferences.spec.ts         |  10 +-
 .../uwt-inspector-preferences.ts              |  13 +--
 .../uwt-inspector-section.component.html      |  15 ++-
 .../uwt-inspector-section.component.scss      |   5 +-
 .../uwt-inspector-store.spec.ts               |  15 +++
 .../uwt-inspector-store.ts                    |   5 +
 .../uwt-inspector.component.html              |  12 ++-
 .../uwt-inspector.component.spec.ts           |  61 +++++++++--
 .../uwt-inspector/uwt-inspector.component.ts  |  17 +++
 projects/watchtower-lab/src/_lab-base.scss    |   7 ++
 .../src/shell/pages/logging.page.ts           |  13 +--
 .../src/shell/pages/settings.page.ts          |   9 +-
 .../src/shell/shell.component.ts              |  15 ++-
 projects/watchtower-lab/src/styles.scss       |  22 ++++
 26 files changed, 337 insertions(+), 65 deletions(-)
 create mode 100644 playwright/a11y.spec.ts

diff --git a/README.md b/README.md
index 5b429cf..ca1ea06 100644
--- a/README.md
+++ b/README.md
@@ -131,7 +131,9 @@ flushing, server rendering and hydration, both fragment pages, two tabs on
 their own channels or one shared, a custom destination, every broker mode
 and RUM's start-up and refresh, RUM's telemetries, the library's settings
 through `?config=`, the debug flags, and the Event Inspector's docks,
-shortcut, pause, search, filters, export, paging and resizing. Internal edge
+shortcut, pause, search, filters, export, paging and resizing. It also runs
+axe-core's WCAG 2.2 A and AA rules on every lab page and on the Event
+Inspector, and measures the contrast of its warning text. Internal edge
 cases — timers longer than 24 days, giving up after five minutes, no Web
 Locks or storage, message validation, start-up errors — are left to the unit
 tests.
diff --git a/package-lock.json b/package-lock.json
index 6acd57d..4fb9329 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@angular/platform-server": "~21.2.26",
         "@angular/router": "~21.2.26",
         "@angular/ssr": "~21.2.29",
+        "@axe-core/playwright": "4.14.0",
         "@e965/xlsx": "^0.20.3",
         "@playwright/test": "^1.64.1",
         "@types/express": "^5.0.6",
@@ -941,7 +942,6 @@
     },
     "node_modules/@angular/cdk/node_modules/entities": {
       "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-9.0.0.tgz",
       "integrity": "sha512-oJFNDJg3kTPwAD1cNn2+WmUq4wFoo09npc3Ydf1D7ED4smRiWrsKnaLxykrTWgyGEcusc87P5dxlAleol9kpkg==",
       "dev": true,
       "license": "BSD-2-Clause",
@@ -1361,6 +1361,21 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.14.0",
+      "integrity": "sha512-SGUhG5PIHd2eMdpgBF2PyQLOhX+qyDR2PT4cmoS4Qk2ak+jX/rrSvst9l0PGv5WTHolKpUMvVmoHpr4cZgf1RQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.14.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
@@ -9608,6 +9623,15 @@
         "@aws-rum/web-slim": "3.2.1"
       }
     },
+    "node_modules/axe-core": {
+      "version": "4.14.0",
+      "integrity": "sha512-9WTZxEjsZ7b13TH8JPmbV2z8CHbl80/2hm3XPEG4JgNdQLK81IBRXmSxHfMAOkSqQeRxT/0dwNDz2GOm3zzpcQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "30.5.2",
       "integrity": "sha512-ES8WeJ2fNWPEDunyAtUfJ12nHyaWUloCHdkfK2oW5uSoQSUmjNKdWiGaXJITJwvFEWoD/evHEg/QoCXAvLaQqQ==",
diff --git a/package.json b/package.json
index c1bf5cb..005d36f 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@angular/platform-server": "~21.2.26",
     "@angular/router": "~21.2.26",
     "@angular/ssr": "~21.2.29",
+    "@axe-core/playwright": "4.14.0",
     "@e965/xlsx": "^0.20.3",
     "@playwright/test": "^1.64.1",
     "@types/express": "^5.0.6",
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
new file mode 100644
index 0000000..1fd2fe2
--- /dev/null
+++ b/playwright/a11y.spec.ts
@@ -0,0 +1,100 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, openLab, Page, press, test } from './lab';
+
+/** WCAG 2.2 at levels A and AA. */
+const WCAG = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'];
+
+const PAGES = [
+  'scenarios',
+  'bi',
+  'logging',
+  'identity',
+  'privacy',
+  'lifecycle',
+  'fragment',
+  'web-fragment',
+  'inspector',
+  'wire',
+  'settings'
+];
+
+/** Each violation as its rule and where it was found. */
+async function violations(page: Page, include?: string): Promise<string[]> {
+  const builder = new AxeBuilder({ page }).withTags(WCAG);
+  const { violations } = await (
+    include ? builder.include(include) : builder
+  ).analyze();
+  return violations.map(
+    (v) => `${v.id}: ${v.nodes.map((n) => n.target.join(' ')).join(', ')}`
+  );
+}
+
+/** The text-to-background contrast of the first element `selector` finds. */
+function contrastOf(page: Page, selector: string): Promise<number> {
+  return page
+    .locator(selector)
+    .first()
+    .evaluate((el) => {
+      const rgb = (color: string) =>
+        (color.match(/[\d.]+/g) ?? []).map(Number).slice(0, 4);
+      let bg: number[] = [255, 255, 255];
+      for (let node: Element | null = el; node; node = node.parentElement) {
+        const [r, g, b, a = 1] = rgb(getComputedStyle(node).backgroundColor);
+        if (a > 0.5) {
+          bg = [r, g, b];
+          break;
+        }
+      }
+      const luminance = ([r, g, b]: number[]) =>
+        [r, g, b]
+          .map((v) => v / 255)
+          .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+          .reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
+      const [l1, l2] = [
+        luminance(rgb(getComputedStyle(el).color)),
+        luminance(bg)
+      ];
+      return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    });
+}
+
+for (const path of PAGES) {
+  test(`${path}: no WCAG 2.2 A or AA violations`, async ({ page }) => {
+    await openLab(page, path);
+    expect(await violations(page)).toEqual([]);
+  });
+}
+
+test('the Event Inspector with events, a row open and a filter being built: no violations, and readable warnings', async ({
+  page
+}) => {
+  await page.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
+  await openLab(page, 'inspector');
+  await page.locator('.lab-header-button').click();
+  await press(page, 'One of each kind');
+  await press(page, 'An unknown event type');
+  await press(page, 'A 300,000-character payload');
+  const bi = page
+    .locator('uwt-inspector-section')
+    .filter({ hasText: 'BI telemetry' });
+  await bi
+    .locator('tbody tr', { hasText: 'lab_huge_payload' })
+    .getByRole('button', { name: 'Expand row' })
+    .click();
+  await page.getByRole('button', { name: 'Add filter, BI telemetry' }).click();
+  await expect(bi).toContainText('Large payload: showing the first');
+
+  expect(await violations(page, 'uwt-inspector-pane')).toEqual([]);
+  // axe can't always settle contrast on striped rows; measured directly.
+  expect(
+    await contrastOf(page, '.uwt-inspector-section__level--warn')
+  ).toBeGreaterThanOrEqual(4.5);
+  expect(
+    await contrastOf(page, '.uwt-inspector-json__notice')
+  ).toBeGreaterThanOrEqual(4.5);
+});
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
index f4b3955..6168328 100644
--- a/playwright/inspector-tools.spec.ts
+++ b/playwright/inspector-tools.spec.ts
@@ -59,9 +59,7 @@ test('search and field filters narrow a section, until cleared', async ({
   await search.fill('');
   await expect(bi).toContainText('com.example.custom');
 
-  await page
-    .getByRole('button', { name: 'Add a filter to BI telemetry' })
-    .click();
+  await page.getByRole('button', { name: 'Add filter, BI telemetry' }).click();
   const builder = page.getByRole('group', {
     name: 'New filter for BI telemetry'
   });
@@ -86,7 +84,7 @@ test('Download JSON saves a section as a versioned file', async ({ page }) => {
 
   const download = page.waitForEvent('download');
   await bi
-    .getByRole('button', { name: /^Download BI telemetry events as JSON/ })
+    .getByRole('button', { name: /^Download JSON, BI telemetry/ })
     .click();
   const file = await download;
   expect(file.suggestedFilename()).toMatch(
@@ -116,9 +114,7 @@ test('Copy JSON puts a section on the clipboard', async ({
   const bi = section(page, 'BI telemetry');
   await expect(bi).toContainText('lab_button_clicked');
 
-  await bi
-    .getByRole('button', { name: 'Copy BI telemetry events as JSON' })
-    .click();
+  await bi.getByRole('button', { name: 'Copy JSON, BI telemetry' }).click();
   await expect(bi).toContainText('Copied');
   const copied = await page.evaluate(() => navigator.clipboard.readText());
   expect(JSON.parse(copied)).toMatchObject({
diff --git a/playwright/logging.spec.ts b/playwright/logging.spec.ts
index 121ed27..63f6aab 100644
--- a/playwright/logging.spec.ts
+++ b/playwright/logging.spec.ts
@@ -40,7 +40,7 @@ test('query() reads records back from the backend', async ({ page }) => {
   await press(page, 'error, with an Error');
   await expect
     .poll(async () => {
-      await press(page, "query({ logger: 'lab' })");
+      await press(page, 'Run query');
       return page.locator('.lab-readout').last().textContent();
     })
     .toContain('Saving the order failed');
@@ -71,19 +71,19 @@ test('a query filter finds records by correlationId, by level and by time', asyn
     );
 
   // The filter now names the scenario's id.
-  await press(page, 'Run the query');
+  await press(page, 'Run query');
   await expect(readout).toContainText('Inside a journey');
   expect(await found()).toEqual(['Inside a journey']);
 
   const filter = page.getByRole('textbox', { name: 'Query filter (JSON)' });
   await filter.fill('{ "minLevel": "error" }');
-  await press(page, 'Run the query');
+  await press(page, 'Run query');
   await expect(readout).toContainText('Saving the order failed');
   expect(await found()).toEqual(['Saving the order failed']);
 
   const later = new Date(Date.now() + 60_000).toISOString();
   await filter.fill(`{ "from": "${later}" }`);
-  await press(page, 'Run the query');
+  await press(page, 'Run query');
   await expect(readout).toHaveText('[]');
 });
 
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 48be5b9..439f9e4 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2173,7 +2173,8 @@ provideUwtEventInspector({
 Three sections — BI telemetry, scenario telemetry and logging — listing
 events newest first, from the moment the popup opens. The table always fits
 the popup: a long value ends in an ellipsis, and hovering shows it in full.
-Expand a row for the full payload as JSON.
+Expand a row for the full payload as JSON; its **Copy event** puts that one
+payload on the clipboard.
 
 Each section has its own tools, which never affect the other two:
 
@@ -2190,13 +2191,16 @@ Two controls at the top apply to all three sections, because they are about
 capturing rather than viewing:
 
 - **Pause live updates** freezes the view while you read; events are still
-  captured.
+  captured. The status line then says when you paused as well as when
+  capturing began: "Paused at 22:08:41 · capturing since 22:08:10".
 - **Clear** empties the history; capturing continues.
 
 As a dialog, it also has **Transparency**, which lets the app show through,
-so you can watch the page and its events together. It goes up to 70%, so the
-dialog never disappears, and the setting is remembered in this browser.
-Panes and the window don't cover the app, so they have none.
+so you can watch the page and its events together. Text fades with it, so it
+goes up to 30%, and a higher value remembered from an older version is
+brought down to that. A maximized dialog covers the app, so it is opaque and
+hides the slider. The setting is remembered in this browser. Panes and the
+window don't cover the app, so they have none.
 
 Each section keeps the latest 500 events (`maxEventsPerSection`). History is
 discarded when the popup closes.
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index cbe4fc8..c7536f5 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -15,7 +15,7 @@
       size="small"
       icon="filter-funnel"
       label="Add filter"
-      [ariaLabel]="'Add a filter to ' + sectionName()"
+      [ariaLabel]="'Add filter, ' + sectionName()"
       [ariaExpanded]="builderOpen()"
       (clicked)="builderOpen.set(!builderOpen())">
     </cps-button>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html
index a73571b..a0505b4 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.html
@@ -9,9 +9,8 @@
           ? 'Copied'
           : copied() === 'failed'
             ? 'Copy failed'
-            : 'Copy JSON'
+            : copyLabel()
       "
-      ariaLabel="Copy this payload as JSON"
       (clicked)="copy()">
     </cps-button>
     <span role="status" class="cps-sr-only">{{
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
index 2915dd7..fa7b667 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
@@ -16,7 +16,7 @@
 .uwt-inspector-json__notice {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--cps-state-warn);
+  color: var(--cps-color-warn-darken3);
 }
 
 .uwt-inspector-json__code {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
index b54f6c7..e6efb86 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
@@ -95,6 +95,16 @@ describe('UwtInspectorJsonComponent', () => {
     expect(pre().textContent).toContain('"[Circular]"');
   });
 
+  it('should name the copy button by its visible label, which says what it copies', () => {
+    fixture.componentRef.setInput('value', { a: 1 });
+    fixture.componentRef.setInput('copyLabel', 'Copy event');
+    fixture.detectChanges();
+
+    const copy = fixture.nativeElement.querySelector('cps-button button');
+    expect(copy.textContent.trim()).toBe('Copy event');
+    expect(copy.getAttribute('aria-label')).toBe('Copy event');
+  });
+
   it('should copy the full JSON', async () => {
     const writeText = jest.fn(() => Promise.resolve());
     Object.assign(navigator, { clipboard: { writeText } });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
index a0f4703..c9b4698 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
@@ -45,6 +45,9 @@ export class UwtInspectorJsonComponent {
   /** Accessible name of the scrollable block. */
   readonly label = input('Event payload');
 
+  /** The copy button's label, naming what it copies. */
+  readonly copyLabel = input('Copy JSON');
+
   /** JSON length, in characters, above which the view is truncated. */
   readonly maxChars = input(UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView);
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts
index 0aca6fc..480105b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.spec.ts
@@ -32,7 +32,7 @@ describe('UwtInspectorPreferenceStorage', () => {
   it('should read back what was stored', () => {
     const preferences = {
       dock: 'bottom',
-      transparency: 35,
+      transparency: 25,
       paneSize: { left: 500, right: 640, bottom: 300 },
       window: { width: 1000, height: 700, left: -1200, top: 40 }
     };
@@ -41,6 +41,12 @@ describe('UwtInspectorPreferenceStorage', () => {
     expect(storage.read()).toEqual(preferences);
   });
 
+  it('should bring a transparency above the 30% cap down to it', () => {
+    store({ transparency: 70 });
+
+    expect(storage.read().transparency).toBe(30);
+  });
+
   it.each([
     ['malformed JSON', '{not json'],
     ['not an object', '"right"'],
@@ -48,7 +54,7 @@ describe('UwtInspectorPreferenceStorage', () => {
       'invalid values',
       {
         dock: 'top',
-        transparency: 95,
+        transparency: -5,
         paneSize: { left: -5, right: 'wide', bottom: Infinity },
         window: { width: 0, height: 700, left: 0, top: 0 }
       }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts
index 2fdb32a..69deed6 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-preferences/uwt-inspector-preferences.ts
@@ -10,8 +10,11 @@ import {
   uwtSafeVoid
 } from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
 
-/** How see-through the dialog can get, in percent, so it never vanishes. */
-export const UWT_INSPECTOR_MAX_TRANSPARENCY = 70;
+/**
+ * How see-through the dialog can get, in percent. Text fades with it, so
+ * past this it gets hard to read.
+ */
+export const UWT_INSPECTOR_MAX_TRANSPARENCY = 30;
 
 /** Where this browser remembers the Event Inspector's settings. */
 export const UWT_INSPECTOR_PREFERENCES_KEY = 'ngx-ui-watchtower.eventInspector';
@@ -100,10 +103,8 @@ function sanitize(raw: unknown): UwtInspectorPreferences {
   return {
     dock: dock ?? 'dialog',
     transparency:
-      typeof transparency === 'number' &&
-      transparency >= 0 &&
-      transparency <= UWT_INSPECTOR_MAX_TRANSPARENCY
-        ? transparency
+      typeof transparency === 'number' && transparency >= 0
+        ? Math.min(transparency, UWT_INSPECTOR_MAX_TRANSPARENCY)
         : 0,
     paneSize,
     ...(window && {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
index 2a7d681..3c08554 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
@@ -22,7 +22,15 @@
                 ? 'Copy failed'
                 : 'Copy JSON'
           "
-          [ariaLabel]="'Copy ' + text().title + ' events as JSON'"
+          [ariaLabel]="
+            (copyState() === 'copied'
+              ? 'Copied'
+              : copyState() === 'failed'
+                ? 'Copy failed'
+                : 'Copy JSON') +
+            ', ' +
+            text().title
+          "
           (clicked)="copy()">
         </cps-button>
         <cps-button
@@ -30,9 +38,9 @@
           icon="download"
           label="Download JSON"
           [ariaLabel]="
-            'Download ' +
+            'Download JSON, ' +
             text().title +
-            ' events as JSON. Contains session and user ids.'
+            '. Contains session and user ids.'
           "
           (clicked)="download()">
         </cps-button>
@@ -152,6 +160,7 @@
           <uwt-inspector-json
             [value]="row.entry.event.payload"
             [label]="'Payload of event #' + row.sequence"
+            copyLabel="Copy event"
             [maxChars]="maxPayloadChars()">
           </uwt-inspector-json>
         </div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
index 53c865c..895fb2a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
@@ -64,9 +64,10 @@ td {
   font-size: 0.75rem;
 }
 
-// Level is always written out; colour only supports it.
+// Level is always written out; colour only supports it. The warn shade is
+// dark enough to read as text (5.6:1 on white); the base warn is 2.1:1.
 .uwt-inspector-section__level--warn {
-  color: var(--cps-state-warn);
+  color: var(--cps-color-warn-darken3);
   font-weight: 600;
 }
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
index ea30b9d..b9740d2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
@@ -155,6 +155,21 @@ describe('UwtInspectorStore', () => {
     expect(store.newWhilePaused()).toBe(0);
   });
 
+  it('should remember when it was paused, through a clear, until resumed', () => {
+    const store = createStore();
+    expect(store.pausedAt()).toBeUndefined();
+
+    store.setPaused(true);
+    const at = store.pausedAt();
+    expect(at).toBeDefined();
+    store.setPaused(true);
+    store.clear();
+    expect(store.pausedAt()).toBe(at);
+
+    store.setPaused(false);
+    expect(store.pausedAt()).toBeUndefined();
+  });
+
   it('should include not-yet-flushed events in the download without hiding them', () => {
     const store = createStore();
     monitor.publish(bi('a'));
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
index 2298b59..f4b802c 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
@@ -91,6 +91,8 @@ export class UwtInspectorStore {
 
   /** Freezes what is shown. Capturing carries on underneath. */
   readonly paused = signal(false);
+  /** When the user paused; `undefined` while capturing live. */
+  readonly pausedAt = signal<string | undefined>(undefined);
   /** Events captured while paused and not yet shown. */
   readonly newWhilePaused = signal(0);
 
@@ -157,6 +159,9 @@ export class UwtInspectorStore {
   }
 
   setPaused(paused: boolean): void {
+    if (paused !== this.paused()) {
+      this.pausedAt.set(paused ? new Date().toISOString() : undefined);
+    }
     this.paused.set(paused);
     if (!paused) {
       this.newWhilePaused.set(0);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index 824a416..fa5a358 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -27,7 +27,11 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
           class="uwt-inspector__dot"
           [class.uwt-inspector__dot--paused]="store.paused()"
           aria-hidden="true"></span>
-        {{ store.paused() ? 'Paused' : 'Capturing' }} since {{ since() }} ·
+        @if (pausedAt(); as at) {
+          Paused at {{ at }} · capturing since {{ since() }} ·
+        } @else {
+          Capturing since {{ since() }} ·
+        }
         {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
       </p>
       <uwt-inspector-dock-switcher
@@ -36,7 +40,7 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
       </uwt-inspector-dock-switcher>
     </div>
     <div class="uwt-inspector__actions">
-      @if (dock() === 'dialog') {
+      @if (dock() === 'dialog' && !maximized()) {
         <cps-slider
           label="Transparency"
           [max]="maxTransparency"
@@ -97,7 +101,7 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
     }
   </div>
 
-  <footer class="uwt-inspector__footer">
+  <div class="uwt-inspector__footer">
     <p>
       Shows what this app hands to its telemetry destinations, after redaction.
       A destination can still drop an event, for example when RUM samples a
@@ -113,5 +117,5 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
         >.
       }
     </p>
-  </footer>
+  </div>
 </div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 481c30a..64abacb 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -5,7 +5,12 @@ import {
   UwtTelemetryMonitor,
   UwtTelemetryPublishInput
 } from '@absaoss-cps/ngx-ui-watchtower';
-import { CPS_LIVE_ANNOUNCER_SERVICE, CpsDialogConfig } from 'cps-ui-kit';
+import { Subject } from 'rxjs';
+import {
+  CPS_LIVE_ANNOUNCER_SERVICE,
+  CpsDialogConfig,
+  CpsDialogRef
+} from 'cps-ui-kit';
 import * as exportUtil from '../uwt-inspector-export/uwt-inspector-export';
 import {
   UWT_INSPECTOR_FLUSH_MS,
@@ -66,6 +71,7 @@ describe('UwtInspectorComponent', () => {
   let monitor: UwtTelemetryMonitor;
   let announce: jest.Mock;
   let dialogConfig: CpsDialogConfig;
+  let maximize: Subject<boolean>;
 
   const el = () => fixture.nativeElement as HTMLElement;
   /** The popup's own actions, as its buttons and switch call them. */
@@ -101,6 +107,7 @@ describe('UwtInspectorComponent', () => {
     jest.useFakeTimers();
     announce = jest.fn();
     dialogConfig = {};
+    maximize = new Subject<boolean>();
     await TestBed.configureTestingModule({
       imports: [UwtInspectorComponent, NoopAnimationsModule],
       providers: [
@@ -116,7 +123,11 @@ describe('UwtInspectorComponent', () => {
           provide: CPS_LIVE_ANNOUNCER_SERVICE,
           useValue: { announce, clear: jest.fn() }
         },
-        { provide: CpsDialogConfig, useValue: dialogConfig }
+        { provide: CpsDialogConfig, useValue: dialogConfig },
+        {
+          provide: CpsDialogRef,
+          useValue: { onMaximize: maximize.asObservable() }
+        }
       ]
     }).compileComponents();
     monitor = TestBed.inject(UwtTelemetryMonitor);
@@ -249,6 +260,20 @@ describe('UwtInspectorComponent', () => {
     expect(bodyRows()).toBe(2);
   });
 
+  it('should say when it was paused, as well as when capturing began', () => {
+    jest.setSystemTime(new Date(2026, 0, 1, 10, 0, 0));
+    ui().clear();
+    jest.setSystemTime(new Date(2026, 0, 1, 10, 5, 30));
+    ui().setPaused(true);
+    fixture.detectChanges();
+    expect(text()).toContain('Paused at 10:05:30 · capturing since 10:00:00 ·');
+
+    ui().setPaused(false);
+    fixture.detectChanges();
+    expect(text()).toContain('Capturing since 10:00:00 ·');
+    expect(text()).not.toContain('Paused at');
+  });
+
   it("should download a section's own events, whatever its filters", () => {
     const download = jest
       .spyOn(exportUtil, 'uwtDownloadJson')
@@ -263,7 +288,7 @@ describe('UwtInspectorComponent', () => {
       .setText('bi', 'nothing matches this');
     fixture.detectChanges();
 
-    button('Download BI telemetry').click();
+    button('Download JSON, BI telemetry').click();
 
     expect(download).toHaveBeenCalledTimes(1);
     const [, filename, json] = download.mock.calls[0];
@@ -283,7 +308,7 @@ describe('UwtInspectorComponent', () => {
       'bi'
     ]);
 
-    button('Download Logging').click();
+    button('Download JSON, Logging').click();
     const logging = JSON.parse(download.mock.calls[1][2]);
     expect(logging.section).toBe('logging');
     expect(logging.events.map((e: { kind: string }) => e.kind)).toEqual([
@@ -298,7 +323,7 @@ describe('UwtInspectorComponent', () => {
     monitor.publish(warn);
     settle();
 
-    button('Copy Logging').click();
+    button('Copy JSON, Logging').click();
     await Promise.resolve();
 
     const doc = JSON.parse(writeText.mock.calls[0][0]);
@@ -335,8 +360,8 @@ describe('UwtInspectorComponent', () => {
     jest
       .spyOn(exportUtil, 'uwtDownloadJson')
       .mockImplementation(() => undefined);
-    button('Download BI telemetry').click();
-    button('Download Logging').click();
+    button('Download JSON, BI telemetry').click();
+    button('Download JSON, Logging').click();
     settle();
 
     expect(seen).toHaveLength(0);
@@ -359,20 +384,36 @@ describe('UwtInspectorComponent', () => {
   it('should reopen at the remembered transparency', () => {
     localStorage.setItem(
       UWT_INSPECTOR_PREFERENCES_KEY,
-      JSON.stringify({ transparency: 40 })
+      JSON.stringify({ transparency: 20 })
     );
     const reopened = TestBed.createComponent(UwtInspectorComponent);
     reopened.detectChanges();
 
-    expect(dialogConfig.style).toEqual({ opacity: '0.6' });
+    expect(dialogConfig.style).toEqual({ opacity: '0.8' });
     expect(
       (reopened.nativeElement as HTMLElement).querySelector<HTMLInputElement>(
         'cps-slider input'
       )?.value
-    ).toBe('40');
+    ).toBe('20');
     reopened.destroy();
   });
 
+  it('should drop the transparency while maximized, and bring it back after', () => {
+    const slider = el().querySelector('cps-slider input') as HTMLInputElement;
+    slider.value = '30';
+    slider.dispatchEvent(new Event('input'));
+
+    maximize.next(true);
+    fixture.detectChanges();
+    expect(dialogConfig.style).toEqual({ opacity: '1' });
+    expect(el().querySelector('cps-slider')).toBeNull();
+
+    maximize.next(false);
+    fixture.detectChanges();
+    expect(dialogConfig.style).toEqual({ opacity: '0.7' });
+    expect(el().querySelector('cps-slider')).not.toBeNull();
+  });
+
   it('should have the slider only as a dialog, and its own header elsewhere', () => {
     expect(el().querySelector('cps-slider')).not.toBeNull();
     expect(el().querySelector('.uwt-inspector__header')).toBeNull();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index e2ae64c..ecf52d9 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -11,10 +11,12 @@ import {
   signal,
   viewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   CPS_LIVE_ANNOUNCER_SERVICE,
   CpsButtonComponent,
   CpsDialogConfig,
+  CpsDialogRef,
   CpsSwitchComponent
 } from 'cps-ui-kit';
 import { CpsSliderComponent } from '../cps-slider/cps-slider.component';
@@ -98,6 +100,7 @@ export class UwtInspectorComponent {
 
   /** The dialog's own config: cps-dialog binds its `style` to the window. */
   private readonly dialogConfig = inject(CpsDialogConfig, { optional: true });
+  private readonly dialogRef = inject(CpsDialogRef, { optional: true });
 
   private readonly config = {
     ...UWT_DEFAULT_INSPECTOR_CONFIG,
@@ -115,6 +118,11 @@ export class UwtInspectorComponent {
     uwtInspectorTime(this.store.startedAt()).slice(0, 8)
   );
 
+  protected readonly pausedAt = computed(() => {
+    const at = this.store.pausedAt();
+    return at && uwtInspectorTime(at).slice(0, 8);
+  });
+
   protected readonly shortcut = uwtShortcutLabel(
     this.config.shortcuts,
     uwtIsApplePlatform(this.document.defaultView?.navigator)
@@ -125,6 +133,9 @@ export class UwtInspectorComponent {
     this.preferences.read().transparency
   );
 
+  /** A maximized dialog covers the app, so it isn't see-through. */
+  protected readonly maximized = signal(false);
+
   private readonly dialogLogo = viewChild('dialogLogo', { read: ElementRef });
 
   private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
@@ -133,6 +144,12 @@ export class UwtInspectorComponent {
     const timer = setInterval(() => this.announceNew(), ANNOUNCE_EVERY_MS);
     inject(DestroyRef).onDestroy(() => clearInterval(timer));
     this.applyTransparency(this.transparency());
+    this.dialogRef?.onMaximize
+      .pipe(takeUntilDestroyed())
+      .subscribe((maximized) => {
+        this.maximized.set(maximized);
+        this.applyTransparency(maximized ? 0 : this.transparency());
+      });
     afterNextRender(() => this.placeDialogLogo());
   }
 
diff --git a/projects/watchtower-lab/src/_lab-base.scss b/projects/watchtower-lab/src/_lab-base.scss
index 6e3e6e2..d2b3ace 100644
--- a/projects/watchtower-lab/src/_lab-base.scss
+++ b/projects/watchtower-lab/src/_lab-base.scss
@@ -76,6 +76,13 @@ body {
   }
 }
 
+.lab-switches {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
 .lab-actions {
   display: flex;
   flex-wrap: wrap;
diff --git a/projects/watchtower-lab/src/shell/pages/logging.page.ts b/projects/watchtower-lab/src/shell/pages/logging.page.ts
index dc88a7a..2c724e0 100644
--- a/projects/watchtower-lab/src/shell/pages/logging.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/logging.page.ts
@@ -77,11 +77,7 @@ import { parseJsonObject } from '../../lab/lab-json';
           (valueChanged)="filter.set($event)" />
         <div class="lab-actions">
           <cps-button
-            label="query({ logger: 'lab' })"
-            type="outlined"
-            (clicked)="query()" />
-          <cps-button
-            label="Run the query"
+            label="Run query"
             type="outlined"
             (clicked)="runQuery()" />
         </div>
@@ -92,7 +88,7 @@ import { parseJsonObject } from '../../lab/lab-json';
 })
 export class LoggingPage {
   protected readonly readout = signal('');
-  protected readonly filter = signal('');
+  protected readonly filter = signal('{ "logger": "lab", "limit": 20 }');
   protected readonly filterError = signal('');
 
   private readonly logger = inject(UwtLoggerService);
@@ -108,11 +104,6 @@ export class LoggingPage {
     });
   }
 
-  protected async query(): Promise<void> {
-    const records = await this.logger.query({ logger: 'lab', limit: 20 });
-    this.readout.set(JSON.stringify(records, null, 2));
-  }
-
   protected correlated(): void {
     const scenario = this.scenarios.start({ name: 'lab-correlated' });
     this.lab.warn('Inside a journey', { correlationId: scenario.id });
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 17cb5c6..d12f4a9 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -64,7 +64,7 @@ type DebugFlag = (typeof DEBUG_FLAGS)[number];
           Console lines for what is sent. The library reads them on every event,
           so they apply without a reload.
         </p>
-        <div class="lab-actions">
+        <div class="lab-switches">
           @for (flag of flags; track flag) {
             <cps-switch
               [label]="flag"
@@ -76,7 +76,12 @@ type DebugFlag = (typeof DEBUG_FLAGS)[number];
 
       <div class="lab-card">
         <h2>In effect</h2>
-        <pre class="lab-readout">{{ effective }}</pre>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Settings in effect"
+          >{{ effective }}</pre>
       </div>
     </section>
   `
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 8cf2d80..6d961fd 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -20,6 +20,9 @@ import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
   imports: [RouterLink, RouterLinkActive, RouterOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
+    <a class="lab-skip-link" href="#lab-main" (click)="skipToContent($event)"
+      >Skip to content</a
+    >
     <header class="lab-header">
       <img
         class="lab-logo"
@@ -62,7 +65,7 @@ import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
           }}</a>
         }
       </nav>
-      <main class="lab-main">
+      <main class="lab-main" id="lab-main" tabindex="-1">
         <router-outlet />
       </main>
     </div>
@@ -125,15 +128,15 @@ export class ShellComponent {
   );
 
   private readonly sink = inject(UwtTelemetrySink);
+  private readonly document = inject(DOCUMENT);
 
   constructor() {
     inject(LabLayout);
     const destroyRef = inject(DestroyRef);
-    const document = inject(DOCUMENT);
     // In the browser only, like the wire's polling.
     afterNextRender(() => {
       // Hydrated: the page now answers clicks. The suite waits for this.
-      document.documentElement.setAttribute('data-lab-ready', '');
+      this.document.documentElement.setAttribute('data-lab-ready', '');
       const timer = setInterval(
         () =>
           this.identity.set({
@@ -145,4 +148,10 @@ export class ShellComponent {
       destroyRef.onDestroy(() => clearInterval(timer));
     });
   }
+
+  /** Focuses the page's content; handled here, so the router stays out. */
+  protected skipToContent(event: Event): void {
+    event.preventDefault();
+    this.document.getElementById('lab-main')?.focus();
+  }
 }
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index d169d3b..0c19b23 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -2,6 +2,28 @@
 @use 'lab-base';
 @use 'cps-ui-kit/styles/mixins' as cps;
 
+// Hidden until focused, then shown over the header.
+.lab-skip-link {
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 20;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background: #fff;
+  color: var(--cps-color-calm);
+  font-weight: 600;
+  transform: translateY(-200%);
+
+  &:focus {
+    transform: none;
+  }
+}
+
+.lab-main:focus {
+  outline: none;
+}
+
 // The header and status bar are fixed to the window on purpose: they show
 // what an Event Inspector pane covers, and — with `lab-insets` on <html>,
 // switched on the Event Inspector page — how an app keeps them beside it.

From deb1e8a9e75b7848058ca1d68d0fd3c33c7084ca Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 6 Nov 2026 15:36:25 +0100
Subject: [PATCH 19/51] adjusting layout for every dock position

---
 README.md                                     |   7 +-
 playwright/a11y.spec.ts                       |  27 ++-
 playwright/inspector-tools.spec.ts            | 138 ++++++-----
 playwright/inspector.spec.ts                  |  78 +++++--
 playwright/lab.ts                             |  12 +
 playwright/scenarios.spec.ts                  |   3 +
 playwright/settings.spec.ts                   |  17 +-
 projects/ngx-ui-watchtower/DESIGN.md          |  80 ++++---
 projects/ngx-ui-watchtower/README.md          |   8 +-
 .../uwt-event-inspector.service.spec.ts       |  74 +++++-
 .../uwt-event-inspector.service.ts            |  54 ++++-
 ...uwt-inspector-dock-switcher.component.html |   2 +-
 ...-inspector-dock-switcher.component.spec.ts |  10 +
 .../uwt-inspector-dock-switcher.component.ts  |  15 +-
 .../uwt-inspector-export.spec.ts              |  16 +-
 .../uwt-inspector-export.ts                   |  18 +-
 .../uwt-inspector-exporter.ts                 |  59 +++--
 .../uwt-inspector-filter-bar.component.html   |  14 +-
 ...uwt-inspector-filter-bar.component.spec.ts |  21 +-
 .../uwt-inspector-filter-bar.component.ts     |  27 +--
 .../uwt-inspector-json.component.scss         |   4 +-
 .../uwt-inspector-columns.ts                  | 199 ----------------
 .../uwt-inspector-section.component.html      | 170 --------------
 .../uwt-inspector-section.component.scss      | 118 ----------
 .../uwt-inspector-section.component.spec.ts   | 126 ----------
 .../uwt-inspector-section.component.ts        | 167 -------------
 .../uwt-inspector-session.ts                  |   5 +-
 .../uwt-inspector-store.spec.ts               |  96 +++++---
 .../uwt-inspector-store.ts                    | 125 ++++++----
 .../uwt-inspector-rows.spec.ts                | 159 +++++++++++++
 .../uwt-inspector-rows.ts                     | 177 ++++++++++++++
 .../uwt-inspector-timeline.component.html     | 171 ++++++++++++++
 .../uwt-inspector-timeline.component.scss     | 160 +++++++++++++
 .../uwt-inspector-timeline.component.spec.ts  | 176 ++++++++++++++
 .../uwt-inspector-timeline.component.ts       | 171 ++++++++++++++
 .../uwt-inspector.models.ts                   |  33 ++-
 .../uwt-inspector.component.html              |  14 +-
 .../uwt-inspector.component.scss              |  12 +-
 .../uwt-inspector.component.spec.ts           | 220 +++++++++++++-----
 .../uwt-inspector/uwt-inspector.component.ts  |  21 +-
 .../event-inspector/src/public-api.ts         |   1 +
 41 files changed, 1829 insertions(+), 1176 deletions(-)
 delete mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts
 delete mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
 delete mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
 delete mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts
 delete mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts

diff --git a/README.md b/README.md
index ca1ea06..5917c66 100644
--- a/README.md
+++ b/README.md
@@ -131,9 +131,10 @@ flushing, server rendering and hydration, both fragment pages, two tabs on
 their own channels or one shared, a custom destination, every broker mode
 and RUM's start-up and refresh, RUM's telemetries, the library's settings
 through `?config=`, the debug flags, and the Event Inspector's docks,
-shortcut, pause, search, filters, export, paging and resizing. It also runs
-axe-core's WCAG 2.2 A and AA rules on every lab page and on the Event
-Inspector, and measures the contrast of its warning text. Internal edge
+shortcut, pause, kinds, search, filters, export, paging and resizing. It also
+runs axe-core's WCAG 2.2 A and AA rules on every lab page and on the Event
+Inspector with its Export menu open, and measures the contrast of its
+coloured statuses and levels. Internal edge
 cases — timers longer than 24 days, giving up after five minutes, no Web
 Locks or storage, message validation, start-up errors — are left to the unit
 tests.
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index 1fd2fe2..cdd0087 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -65,7 +65,7 @@ for (const path of PAGES) {
   });
 }
 
-test('the Event Inspector with events, a row open and a filter being built: no violations, and readable warnings', async ({
+test('the Event Inspector with events, a row open, a filter being built and the Export menu open: no violations, and readable colours', async ({
   page
 }) => {
   await page.addInitScript(() =>
@@ -79,22 +79,29 @@ test('the Event Inspector with events, a row open and a filter being built: no v
   await press(page, 'One of each kind');
   await press(page, 'An unknown event type');
   await press(page, 'A 300,000-character payload');
-  const bi = page
-    .locator('uwt-inspector-section')
-    .filter({ hasText: 'BI telemetry' });
-  await bi
+  const timeline = page.locator('uwt-inspector-timeline');
+  await timeline
     .locator('tbody tr', { hasText: 'lab_huge_payload' })
     .getByRole('button', { name: 'Expand row' })
     .click();
-  await page.getByRole('button', { name: 'Add filter, BI telemetry' }).click();
-  await expect(bi).toContainText('Large payload: showing the first');
+  await page.getByRole('button', { name: 'Add filter' }).click();
+  await expect(timeline).toContainText('Large payload: showing the first');
+  // Past the new-row tint, so contrast is measured on the usual rows.
+  await page.waitForTimeout(3500);
 
   expect(await violations(page, 'uwt-inspector-pane')).toEqual([]);
   // axe can't always settle contrast on striped rows; measured directly.
-  expect(
-    await contrastOf(page, '.uwt-inspector-section__level--warn')
-  ).toBeGreaterThanOrEqual(4.5);
+  for (const tone of ['success', 'warn', 'error']) {
+    expect(
+      await contrastOf(page, `.uwt-inspector-timeline__tone--${tone}`)
+    ).toBeGreaterThanOrEqual(4.5);
+  }
   expect(
     await contrastOf(page, '.uwt-inspector-json__notice')
   ).toBeGreaterThanOrEqual(4.5);
+
+  await timeline.getByRole('button', { name: 'Export' }).click();
+  // Once it has faded in: mid-fade, its text is too faint to measure.
+  await expect(page.locator('.cps-menu-container')).toHaveCSS('opacity', '1');
+  expect(await violations(page, '.cps-menu-container')).toEqual([]);
 });
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
index 6168328..e677d03 100644
--- a/playwright/inspector-tools.spec.ts
+++ b/playwright/inspector-tools.spec.ts
@@ -1,5 +1,5 @@
 import { readFile } from 'node:fs/promises';
-import { expect, openLab, Page, press, test } from './lab';
+import { expect, openLab, Page, press, showKind, test } from './lab';
 
 /** Opens the lab's Event Inspector page, and the inspector in `dock`. */
 async function openInspector(page: Page, dock = 'right'): Promise<void> {
@@ -15,15 +15,28 @@ async function openInspector(page: Page, dock = 'right'): Promise<void> {
   await expect(page.locator('uwt-inspector')).toBeVisible();
 }
 
-const section = (page: Page, title: string) =>
-  page.locator('uwt-inspector-section').filter({ hasText: title });
+const timeline = (page: Page) => page.locator('uwt-inspector-timeline');
+/** The timeline's rows, without an open row's detail. */
+const rows = (page: Page) =>
+  timeline(page).locator('tbody tr:not(.cps-table-row-expanded-content)');
+
+/** Opens the Export menu and chooses one of its items. */
+async function exportAs(
+  page: Page,
+  item: 'Copy JSON' | 'Download JSON'
+): Promise<void> {
+  await timeline(page).getByRole('button', { name: 'Export' }).click();
+  await page.getByRole('menuitem', { name: new RegExp(`^${item}`) }).click();
+  // cps-menu ignores the button while it is still closing.
+  await expect(page.getByRole('menu')).toBeHidden();
+}
 
 test('pause holds new events back until Resume, and Clear empties it', async ({
   page
 }) => {
   await openInspector(page);
   const inspector = page.locator('uwt-inspector');
-  const bi = section(page, 'BI telemetry');
+  const events = timeline(page);
 
   await page
     .locator('cps-switch', { hasText: 'Pause live updates' })
@@ -31,75 +44,85 @@ test('pause holds new events back until Resume, and Clear empties it', async ({
     .click();
   await press(page, 'An unknown event type');
   await expect(inspector).toContainText('1 new event held back while paused.');
-  await expect(bi).not.toContainText('com.example.custom');
+  await expect(events).not.toContainText('com.example.custom');
 
   await press(page, 'Resume');
-  await expect(bi).toContainText('com.example.custom');
+  await expect(events).toContainText('com.example.custom');
 
   await page.getByRole('button', { name: 'Clear captured events' }).click();
   await expect(inspector).toContainText('Capturing from now.');
-  await expect(bi).not.toContainText('com.example.custom');
+  await expect(events).not.toContainText('com.example.custom');
 });
 
-test('search and field filters narrow a section, until cleared', async ({
+test('one search and set of filters narrow every kind, until cleared; the kind toggle narrows to one', async ({
   page
 }) => {
   await openInspector(page);
   await press(page, 'One of each kind');
   await press(page, 'An unknown event type');
-  const bi = section(page, 'BI telemetry');
-  await expect(bi).toContainText('com.example.custom (unrecognised type)');
+  const events = timeline(page);
+  await expect(events).toContainText('com.example.custom');
+  await expect(events).toContainText('lab-happy-path');
 
-  const search = page.getByRole('textbox', {
-    name: 'Search BI telemetry events'
-  });
+  const search = page.getByRole('textbox', { name: 'Search events' });
   await search.fill('each-kind');
-  await expect(bi).not.toContainText('com.example.custom');
-  await expect(bi).toContainText('lab_button_clicked');
+  await expect(events).not.toContainText('com.example.custom');
+  await expect(events).toContainText('lab_button_clicked');
   await search.fill('');
-  await expect(bi).toContainText('com.example.custom');
+  await expect(events).toContainText('com.example.custom');
 
-  await page.getByRole('button', { name: 'Add filter, BI telemetry' }).click();
-  const builder = page.getByRole('group', {
-    name: 'New filter for BI telemetry'
-  });
+  await page.getByRole('button', { name: 'Add filter' }).click();
+  const builder = page.getByRole('group', { name: 'New filter' });
   await builder.getByRole('combobox', { name: 'Field' }).click();
   await page.getByRole('option', { name: 'eventType', exact: true }).click();
   await builder.getByRole('textbox', { name: 'Value' }).fill('com.example');
   await builder.getByRole('button', { name: 'Add', exact: true }).click();
-  await expect(bi).not.toContainText('lab_button_clicked');
-  await expect(bi).toContainText('com.example.custom');
-
-  await page
-    .getByRole('button', { name: 'Clear filters for BI telemetry' })
-    .click();
-  await expect(bi).toContainText('lab_button_clicked');
+  await expect(events).not.toContainText('lab_button_clicked');
+  await expect(events).not.toContainText('lab-happy-path');
+  await expect(events).toContainText('com.example.custom');
+
+  await page.getByRole('button', { name: 'Clear filters' }).click();
+  await expect(events).toContainText('lab_button_clicked');
+
+  await showKind(page, 'Scenarios');
+  await expect(rows(page)).toHaveCount(1);
+  await expect(events).toContainText('lab-happy-path');
+  await showKind(page, 'All');
+  await expect(events).toContainText('lab_button_clicked');
 });
 
-test('Download JSON saves a section as a versioned file', async ({ page }) => {
+test('Export saves every kind, or the kind shown, as a versioned file', async ({
+  page
+}) => {
   await openInspector(page);
   await press(page, 'One of each kind');
-  const bi = section(page, 'BI telemetry');
-  await expect(bi).toContainText('lab_button_clicked');
+  await expect(timeline(page)).toContainText('lab_button_clicked');
 
-  const download = page.waitForEvent('download');
-  await bi
-    .getByRole('button', { name: /^Download JSON, BI telemetry/ })
-    .click();
-  const file = await download;
+  let download = page.waitForEvent('download');
+  await exportAs(page, 'Download JSON');
+  let file = await download;
   expect(file.suggestedFilename()).toMatch(
-    /^ngx-ui-watchtower-events-watchtower-lab-bi-\d{8}-\d{6}\.json$/
+    /^ngx-ui-watchtower-events-watchtower-lab-all-\d{8}-\d{6}\.json$/
   );
-  const exported = JSON.parse(await readFile(await file.path(), 'utf8'));
-  expect(exported).toMatchObject({
-    formatVersion: 1,
+  const all = JSON.parse(await readFile(await file.path(), 'utf8'));
+  expect(all).toMatchObject({ formatVersion: 2, section: 'all' });
+  expect(all.count.captured).toBeGreaterThan(1);
+
+  await showKind(page, 'BI');
+  download = page.waitForEvent('download');
+  await exportAs(page, 'Download JSON');
+  file = await download;
+  expect(file.suggestedFilename()).toContain('-bi-');
+  const bi = JSON.parse(await readFile(await file.path(), 'utf8'));
+  expect(bi).toMatchObject({
+    formatVersion: 2,
     section: 'bi',
     count: { captured: 1, droppedOldest: 0 }
   });
-  expect(exported.events[0].payload.eventName).toBe('lab_button_clicked');
+  expect(bi.events[0].payload.eventName).toBe('lab_button_clicked');
 });
 
-test('Copy JSON puts a section on the clipboard', async ({
+test('Copy JSON puts the kind shown on the clipboard', async ({
   page,
   context,
   browserName
@@ -111,11 +134,13 @@ test('Copy JSON puts a section on the clipboard', async ({
   await context.grantPermissions(['clipboard-read', 'clipboard-write']);
   await openInspector(page);
   await press(page, 'One of each kind');
-  const bi = section(page, 'BI telemetry');
-  await expect(bi).toContainText('lab_button_clicked');
+  await expect(timeline(page)).toContainText('lab_button_clicked');
 
-  await bi.getByRole('button', { name: 'Copy JSON, BI telemetry' }).click();
-  await expect(bi).toContainText('Copied');
+  await showKind(page, 'BI');
+  await exportAs(page, 'Copy JSON');
+  await expect(
+    timeline(page).getByRole('button', { name: 'Copied' })
+  ).toBeVisible();
   const copied = await page.evaluate(() => navigator.clipboard.readText());
   expect(JSON.parse(copied)).toMatchObject({
     section: 'bi',
@@ -128,16 +153,16 @@ test('pages 25 rows at a time, and offers the newest when more arrive', async ({
 }) => {
   await openInspector(page);
   await press(page, 'A burst of 600 BI events');
-  const bi = section(page, 'BI telemetry');
-  await expect(bi.locator('tbody tr')).toHaveCount(25);
+  const events = timeline(page);
+  await expect(rows(page)).toHaveCount(25);
 
-  await bi.getByRole('button', { name: /next page/i }).click();
+  await events.getByRole('button', { name: /next page/i }).click();
+  // Once the burst is no longer new, so only the next event counts.
+  await expect(events).not.toContainText('new at the top', { timeout: 5000 });
   await press(page, 'An unknown event type');
-  await expect(bi).toContainText('1 new on the first page.');
-  await bi.getByRole('button', { name: 'Go to newest' }).click();
-  await expect(bi.locator('tbody tr').first()).toContainText(
-    'com.example.custom'
-  );
+  await expect(events).toContainText('1 new at the top of the list.');
+  await events.getByRole('button', { name: 'Go to newest' }).click();
+  await expect(rows(page).first()).toContainText('com.example.custom');
 });
 
 test('the transparency slider makes the dialog see-through', async ({
@@ -200,10 +225,9 @@ test('a blocked window falls back to the dialog, and says so once', async ({
 test('a mirrored error links back to its log event', async ({ page }) => {
   await openInspector(page);
   await press(page, 'One of each kind');
-  const logging = section(page, 'Logging');
-  await logging
-    .locator('tbody tr', { hasText: 'error → RUM' })
+  await rows(page)
+    .filter({ hasText: '→ RUM' })
     .getByRole('button', { name: 'Expand row' })
     .click();
-  await expect(logging).toContainText(/Mirrored from\s*log event #\d+/);
+  await expect(timeline(page)).toContainText(/Mirrored from\s*log event #\d+/);
 });
diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 4619983..32ad694 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -1,4 +1,4 @@
-import { expect, openLab, Page, press, test } from './lab';
+import { expect, openLab, Page, press, showKind, test } from './lab';
 
 /** Holds Shift and presses `keys` — by default the shortcut, Shift+E+I. */
 async function shortcut(page: Page, keys = ['KeyE', 'KeyI']): Promise<void> {
@@ -33,6 +33,34 @@ test('opens from the header as a dialog, with the mark and the transparency slid
     dialog.locator('.cps-dialog-header-icon uwt-inspector-logo')
   ).toHaveCount(1);
   await expect(dialog.locator('cps-slider')).toBeVisible();
+
+  // The title sits by the mark on the left, as in a pane or the window.
+  const header = (await dialog.locator('.cps-dialog-header').boundingBox())!;
+  const title = (await dialog
+    .locator('.cps-dialog-header-title')
+    .boundingBox())!;
+  expect(title.x - header.x).toBeLessThan(header.width / 4);
+});
+
+test('a phone-sized screen offers only the dialog and the window, and opens a remembered pane as a dialog', async ({
+  page
+}) => {
+  await press(page, 'Right pane');
+  await expect(page.locator('uwt-inspector-pane')).toBeVisible();
+  await press(page, 'Close');
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  await shortcut(page);
+  await expect(page.locator('.cps-dialog uwt-inspector')).toBeVisible();
+  await expect(page.locator('uwt-inspector-pane')).toHaveCount(0);
+  await expect(page.locator('[data-dock]')).toHaveCount(2);
+  await page.getByRole('button', { name: 'Close dialog' }).click();
+  await expect(page.locator('uwt-inspector')).toHaveCount(0);
+
+  // Kept for a wider screen.
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await shortcut(page);
+  await expect(page.locator('uwt-inspector-pane')).toBeVisible();
 });
 
 test('the Dialog button moves it from a pane to the dialog', async ({
@@ -156,7 +184,7 @@ test('reopens where it was last, after a reload', async ({ page }) => {
   expect(Math.round(pane.x + pane.width)).toBe(page.viewportSize()!.width);
 });
 
-test('lists what is sent, keeping the newest 500 events per section', async ({
+test('lists what is sent, keeping the newest 500 events of each kind', async ({
   page
 }) => {
   // A pane, so the page's buttons stay clear of it.
@@ -167,41 +195,49 @@ test('lists what is sent, keeping the newest 500 events per section', async ({
   await press(page, 'Odd shapes');
   await press(page, 'An unknown event type');
 
-  await expect(page.locator('uwt-inspector')).toContainText(
-    /BI telemetry · 500 · last [\d:]{8} · oldest \d+ dropped/
-  );
+  const inspector = page.locator('uwt-inspector');
+  await expect(inspector).toContainText(/ · \d+ oldest dropped/);
+  await expect(inspector.locator('cps-button-toggle')).toContainText('BI 500');
 });
 
-test('sorts each kind into its section, and shows any shape — an unrecognised type, odd values, a huge payload cut short', async ({
+test('shows every kind in one timeline, and any shape — an unrecognised type, odd values, a huge payload cut short', async ({
   page
 }) => {
-  const section = (title: string) =>
-    page.locator('uwt-inspector-section').filter({ hasText: title });
-  const bi = section('BI telemetry');
+  const timeline = page.locator('uwt-inspector-timeline');
+  const row = (text: string) =>
+    timeline.locator('tbody tr:not(.cps-table-row-expanded-content)', {
+      hasText: text
+    });
 
   await press(page, 'Right pane');
   await press(page, 'One of each kind');
   await press(page, 'An unknown event type');
   await press(page, 'Odd shapes');
 
-  await expect(section('Scenario telemetry')).toContainText('lab-happy-path');
-  await expect(section('Logging')).toContainText(
-    'A warning, from the Event Inspector page'
+  await expect(row('lab-happy-path')).toContainText('Scenario');
+  await expect(row('A warning, from the Event Inspector page')).toContainText(
+    'Log'
+  );
+  await expect(row('→ RUM')).toContainText('Error');
+  await expect(row('com.example.custom')).toContainText(
+    'unrecognised event type'
   );
-  await expect(section('Logging')).toContainText('error → RUM');
-  await expect(bi).toContainText('com.example.custom (unrecognised type)');
+
+  await showKind(page, 'Logs');
+  await expect(timeline).not.toContainText('lab-happy-path');
+  await expect(timeline).toContainText('→ RUM');
+  await showKind(page, 'All');
 
   const expand = (eventName: string) =>
-    bi
-      .locator('tbody tr', { hasText: eventName })
-      .getByRole('button', { name: 'Expand row' })
-      .click();
+    row(eventName).getByRole('button', { name: 'Expand row' }).click();
 
   await expand('lab_odd_shapes');
-  await expect(bi).toContainText('Zürich · 東京 · 🚀');
-  await expect(bi.locator('.uwt-inspector-section__error')).toHaveCount(0);
+  await expect(timeline).toContainText('Zürich · 東京 · 🚀');
+  await expect(timeline.locator('.uwt-inspector-timeline__error')).toHaveCount(
+    0
+  );
 
   await press(page, 'A 300,000-character payload');
   await expand('lab_huge_payload');
-  await expect(bi).toContainText('Large payload: showing the first');
+  await expect(timeline).toContainText('Large payload: showing the first');
 });
diff --git a/playwright/lab.ts b/playwright/lab.ts
index d3ef3f5..e9762d2 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -202,3 +202,15 @@ export async function press(
 ): Promise<void> {
   await where.getByRole('button', { name: label, exact: true }).first().click();
 }
+
+/** Shows one kind of event in the Event Inspector's timeline, or all. */
+export async function showKind(
+  page: Page,
+  kind: 'All' | 'BI' | 'Scenarios' | 'Logs'
+): Promise<void> {
+  // The toggle's options are radios, each inside the label people click.
+  await page
+    .locator('uwt-inspector cps-button-toggle label')
+    .filter({ hasText: new RegExp(`^\\s*${kind} \\d+\\s*$`) })
+    .click();
+}
diff --git a/playwright/scenarios.spec.ts b/playwright/scenarios.spec.ts
index a354034..24baaa9 100644
--- a/playwright/scenarios.spec.ts
+++ b/playwright/scenarios.spec.ts
@@ -71,6 +71,9 @@ test('a backdated start and aggregated batches count in the timing', async ({
   page,
   backend
 }) => {
+  // A start from before the page loaded is ignored, so the page must be
+  // older than the backdating.
+  await page.waitForFunction(() => performance.now() > 1600);
   await press(page, 'Backdated by 1.5 s');
   await press(page, '5 aggregated batches');
 
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 207ae60..e9e9941 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -66,9 +66,9 @@ test('eventNamespace renames the event types, and the inspector still sorts them
         event.details.eventName === 'lab_button_clicked'
     )
   );
-  await expect(
-    page.locator('uwt-inspector-section').filter({ hasText: 'BI telemetry' })
-  ).toContainText('lab_button_clicked');
+  await expect(page.locator('uwt-inspector-timeline')).toContainText(
+    'lab_button_clicked'
+  );
 });
 
 test('scenario settings: step events, user timings, and a step limit', async ({
@@ -240,17 +240,16 @@ test('inspector settings: a custom shortcut, a smaller section, a smaller view',
   await expect(inspector).toContainText('Shortcut: F9');
 
   await press(page, 'A burst of 600 BI events');
-  await expect(inspector).toContainText(/BI telemetry · 10 ·/);
+  await expect(inspector).toContainText('10 events · 590 oldest dropped');
+  await expect(inspector.locator('cps-button-toggle')).toContainText('BI 10');
 
   await press(page, 'A 300,000-character payload');
-  const bi = page
-    .locator('uwt-inspector-section')
-    .filter({ hasText: 'BI telemetry' });
-  await bi
+  const timeline = page.locator('uwt-inspector-timeline');
+  await timeline
     .locator('tbody tr', { hasText: 'lab_huge_payload' })
     .getByRole('button', { name: 'Expand row' })
     .click();
-  await expect(bi).toContainText(/showing the first 1,?000 characters/);
+  await expect(timeline).toContainText(/showing the first 1,?000 characters/);
 });
 
 test('a pattern that is not a RegExp is left out with a warning, and the lab still starts', async ({
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 439f9e4..e7d5f78 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -138,8 +138,8 @@ Everything each entry point exports, by role.
 `UwtEventInspectorService`, `UWT_EVENT_INSPECTOR_CONFIG`,
 `UwtEventInspectorConfig`, `UWT_DEFAULT_INSPECTOR_CONFIG`,
 `UwtInspectorShortcut`, `UWT_DEFAULT_INSPECTOR_SHORTCUTS`,
-`UwtInspectorDock`, `UwtInspectorExport`, `UwtInspectorSectionId`, and the
-filter types
+`UwtInspectorDock`, `UwtInspectorExport`, `UwtInspectorSectionId`,
+`UwtInspectorKindFilter`, and the filter types
 `UwtInspectorFilterState`, `UwtInspectorFieldFilter`,
 `UwtInspectorFilterOperator` — see §12, "Event Inspector".
 
@@ -1347,8 +1347,9 @@ nothing, sends nothing and grants no remote access.
 
 Avoid sharing your screen while it is open, and treat downloads as you would
 any file with ids in it; filenames carry only the application name, the
-section and a timestamp
-(`ngx-ui-watchtower-events-<application>-<section>-<yyyyMMdd-HHmmss>.json`). The shortcut prevents accidental opening; it is not access
+kind exported and a timestamp
+(`ngx-ui-watchtower-events-<application>-<kind>-<yyyyMMdd-HHmmss>.json`,
+the kind being `all`, `bi`, `scenario` or `logging`). The shortcut prevents accidental opening; it is not access
 control — use `enabled` for that, or leave the provider out.
 
 ---
@@ -1661,7 +1662,7 @@ convention, for an application that wants the pre-fallback behavior back.
   before the RUM client is ready, then replays them; it never grows past
   that if initialization never completes. The telemetry monitor costs one
   check per event while nobody watches; the popup keeps at most 500 events
-  per section, updates the screen at most every 250 ms, and releases
+  of each kind, updates the screen at most every 250 ms, and releases
   everything when it closes.
 
 The console report is itself wrapped in a try/catch — an application that has
@@ -2113,6 +2114,10 @@ side, and the choice is remembered in this browser:
 Moving it keeps everything captured, the filters and the pause; pages and
 expanded rows start afresh.
 
+A screen narrower than 640px has no room for a pane: the Dock buttons offer
+only the dialog and the window, and a pane remembered from a wider screen
+opens as a dialog there.
+
 A pane makes room by padding the page's `body` on its side, so content in
 the normal flow moves aside. A page can't shrink the browser's viewport —
 only the browser can, as DevTools does — so whatever is laid out against the
@@ -2170,24 +2175,37 @@ provideUwtEventInspector({
 
 #### What it shows
 
-Three sections — BI telemetry, scenario telemetry and logging — listing
-events newest first, from the moment the popup opens. The table always fits
-the popup: a long value ends in an ellipsis, and hovering shows it in full.
-Expand a row for the full payload as JSON; its **Copy event** puts that one
-payload on the clipboard.
-
-Each section has its own tools, which never affect the other two:
-
-- **Search** matches any field's value or name. **Add filter** compares one
-  field — `metadata.theme`, `status`, or `steps[].name` for any item of a
-  list. Field suggestions come from the events that section has seen.
-- **Download JSON** saves every event that section captured, oldest first,
-  whatever its filters, with those filters recorded in the file. Each event
-  keeps its `sequence` and `capturedAt`, so downloads from different
-  sections can be interleaved again. **Copy JSON** puts the same JSON on the
-  clipboard, for when a browser blocks downloads.
-
-Two controls at the top apply to all three sections, because they are about
+One timeline of everything sent from the moment the popup opens, newest
+first: BI events, scenarios and their steps, and log records with the errors
+they mirror to RUM. Each row shows the time, the kind, a name and the
+details — a BI event's first metadata, a scenario's status, duration and
+steps, a log's level and message — with a status or level coloured as well
+as written. With room to spare, it adds the event type and the scenario or
+correlation id. A new row is tinted for a moment, and screen readers hear
+that it is new. The table always fits the popup: a long value ends in an
+ellipsis, and hovering shows it in full. Expand a row for the full payload
+as JSON; its **Copy event** puts that one payload on the clipboard.
+
+It shows 25 rows a page, with a pager once there is more than one. On a
+later page, a notice counts the new events at the top, with **Go to
+newest**.
+
+The tools above the table:
+
+- **All, BI, Scenarios, Logs** shows every kind or one, each with how many
+  of its events match the search and filters.
+- **Export** saves the kind shown as JSON: **Download JSON** as a file, or
+  **Copy JSON** to the clipboard, for when a browser blocks downloads. It
+  holds every event captured of that kind, oldest first, whatever the search
+  and filters, which are recorded in the file. Each event keeps its
+  `sequence` and `capturedAt`, so exports of different kinds can be
+  interleaved again.
+- **Search** matches any field's value or name, in every kind. **Add
+  filter** compares one field — `metadata.theme`, `status`, or
+  `steps[].name` for any item of a list. Field suggestions come from the
+  events of the kind shown.
+
+Two controls at the top apply to everything, because they are about
 capturing rather than viewing:
 
 - **Pause live updates** freezes the view while you read; events are still
@@ -2202,8 +2220,9 @@ brought down to that. A maximized dialog covers the app, so it is opaque and
 hides the slider. The setting is remembered in this browser. Panes and the
 window don't cover the app, so they have none.
 
-Each section keeps the latest 500 events (`maxEventsPerSection`). History is
-discarded when the popup closes.
+Each kind keeps its latest 500 events (`maxEventsPerSection`), so a burst
+of one never pushes out another; the status line counts the oldest dropped.
+History is discarded when the popup closes.
 
 What it does **not** show:
 
@@ -2224,7 +2243,7 @@ each marked with `↪` and the fragment's name.
 | ----------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | `enabled`               | `true`                            | `false`, or a function read once at startup, turns the popup off — shortcut and `open()` alike                                             |
 | `shortcuts`             | `UWT_DEFAULT_INSPECTOR_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                                                          |
-| `maxEventsPerSection`   | `500`                             | Events kept per section; the oldest are dropped, and the count of dropped ones is shown                                                    |
+| `maxEventsPerSection`   | `500`                             | Events kept of each kind — BI, scenarios, logs; the oldest are dropped, and the status line counts them                                    |
 | `maxPayloadCharsInView` | `262144` (256 × 1024)             | A payload whose JSON is longer is shown truncated to its first `maxPayloadCharsInView` characters, at most 65,536; downloads stay complete |
 
 Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
@@ -2247,13 +2266,13 @@ European Windows layouts report as Ctrl+Alt, never matches. Spread
 it there if it is closed, and remembers the choice like the Dock buttons;
 asked for the dock it is already in, it just focuses it.
 
-A download is a `UwtInspectorExport`:
+An export is a `UwtInspectorExport`:
 
 ```ts
 interface UwtInspectorExport {
   format: 'ngx-ui-watchtower-event-inspector';
-  formatVersion: 1;
-  section: 'bi' | 'scenario' | 'logging';
+  formatVersion: 2;
+  section: 'all' | 'bi' | 'scenario' | 'logging'; // the kind shown
   exportedAt: string;
   capture: { startedAt: string; endedAt: string; paused: boolean };
   app: {
@@ -2270,6 +2289,9 @@ interface UwtInspectorExport {
 }
 ```
 
+Version 1, from before the timeline, exported one of three sections, so its
+`section` was never `'all'`.
+
 Field filters use the operators `contains` (the default), `equals`,
 `not-contains`, `exists` and `missing`, all case-insensitive; several filters
 combine with AND. A path such as `steps[].name` matches any item of a list.
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index ed0f942..ce00357 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -371,9 +371,11 @@ providers: [provideUwtEventInspector()];
 ```
 
 Open it with **Shift+E+I** (hold Shift, press E, then I), outside a text field.
-It lists everything the app sends from that moment on, with search, filters
-and JSON download. It opens as a dialog, with a Transparency slider; its Dock
-buttons move it to its own window or a pane on the left, right or bottom.
+It lists everything the app sends from that moment on in one timeline, newest
+first, showing every kind or just BI, scenarios or logs, with search, filters
+and JSON export. It opens as a dialog, with a Transparency slider; its Dock
+buttons move it to its own window or a pane on the left, right or bottom (on a
+screen at least 640px wide).
 
 A pane pushes the page aside, but elements fixed to the window stay put. To
 keep them beside the pane, use the size it publishes on `<html>`
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 74e0792..608e982 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -125,7 +125,8 @@ describe('UwtEventInspectorService', () => {
     expect(dialogs.opened[0].config).toMatchObject({
       modal: false,
       ariaLabel: 'Event Inspector',
-      closeOnEscape: true
+      closeOnEscape: true,
+      styleClass: 'uwt-inspector-dialog'
     });
     expect(event.defaultPrevented).toBe(true);
     expect(TestBed.inject(UwtEventInspectorService).isOpen()).toBe(true);
@@ -374,4 +375,75 @@ describe('UwtEventInspectorService', () => {
     expect(host.destroy).not.toHaveBeenCalled();
     expect(host.focus).toHaveBeenCalledTimes(2);
   });
+
+  describe('on a screen too narrow for a pane', () => {
+    let change: ((event: { matches: boolean }) => void) | undefined;
+    /** Whether the app's window is narrower than 640px right now. */
+    let narrow = false;
+
+    /** The app's window, as `matchMedia` reports it: `narrow` when asked. */
+    function screenIsNarrow(matches: boolean): void {
+      narrow = matches;
+      Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        value: jest.fn((query: string) => ({
+          get matches() {
+            return narrow;
+          },
+          media: query,
+          addEventListener: (_: string, listener: typeof change) =>
+            (change = listener),
+          removeEventListener: jest.fn()
+        }))
+      });
+    }
+
+    const original = Object.getOwnPropertyDescriptor(window, 'matchMedia');
+
+    afterEach(() => {
+      if (original) {
+        Object.defineProperty(window, 'matchMedia', original);
+      } else {
+        delete (window as { matchMedia?: unknown }).matchMedia;
+      }
+      change = undefined;
+    });
+
+    it('should open a remembered pane as a dialog, keeping the pane for later', () => {
+      screenIsNarrow(true);
+      remember({ dock: 'right' });
+      const service = create();
+
+      service.open();
+
+      expect(pane()).toBeNull();
+      expect(dialogs.opened).toHaveLength(1);
+      expect(stored().dock).toBe('right');
+      service.close();
+    });
+
+    it('should go by the width when it opens, before a resize is reported', () => {
+      screenIsNarrow(false);
+      remember({ dock: 'right' });
+      const service = create();
+
+      narrow = true; // no change event yet
+      service.open();
+
+      expect(pane()).toBeNull();
+      expect(dialogs.opened).toHaveLength(1);
+      service.close();
+    });
+
+    it('should tell the inspector whether a pane fits, as the window is resized', () => {
+      screenIsNarrow(false);
+      create();
+      const controls = TestBed.inject(UwtInspectorSession).controls;
+      expect(window.matchMedia).toHaveBeenCalledWith('(width < 640px)');
+      expect(controls?.panesFit()).toBe(true);
+
+      change?.({ matches: true });
+      expect(controls?.panesFit()).toBe(false);
+    });
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 6d524b3..46be0fe 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -36,15 +36,18 @@ import {
   uwtSafeVoid
 } from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
 
+/** Narrower than 640 CSS pixels, the app's window takes no pane. */
+const NARROW = '(width < 640px)';
+
 /**
  * Opens and closes the Event Inspector, moves it between docks, and
  * listens for its keyboard shortcut once {@link provideUwtEventInspector}
  * installs it.
  *
- * It opens where it was last — a dialog the first time — and the
- * application stays usable while events arrive. With it open, the shortcut
- * returns focus to it from the application, and closes it when focus is
- * already inside.
+ * It opens where it was last — a dialog the first time, and on a screen
+ * too narrow for a pane — and the application stays usable while events
+ * arrive. With it open, the shortcut returns focus to it from the
+ * application, and closes it when focus is already inside.
  *
  * @example
  * ```typescript
@@ -92,12 +95,17 @@ export class UwtEventInspectorService {
   /** Whether the inspector is currently open, in any dock. */
   readonly isOpen = signal(false);
 
+  /** Whether the app's window is wide enough for a pane beside it. */
+  private readonly panesFit = signal(true);
+
   constructor() {
     this.session.controls = {
       setDock: (dock) => this.setDock(dock),
-      close: () => this.close()
+      close: () => this.close(),
+      panesFit: this.panesFit.asReadonly()
     };
     this.destroyRef.onDestroy(() => this.close());
+    uwtSafeVoid('width', () => this.watchWidth());
   }
 
   /**
@@ -199,13 +207,37 @@ export class UwtEventInspectorService {
       this.zone.run(() => this.toggle());
     });
 
+  /** Keeps {@link panesFit} up to date as the app's window is resized. */
+  private watchWidth(): void {
+    const narrow = this.isBrowser
+      ? this.document.defaultView?.matchMedia?.(NARROW)
+      : undefined;
+    if (!narrow) {
+      return;
+    }
+    this.panesFit.set(!narrow.matches);
+    const onChange = (event: MediaQueryListEvent) =>
+      this.panesFit.set(!event.matches);
+    narrow.addEventListener('change', onChange);
+    this.destroyRef.onDestroy(() =>
+      narrow.removeEventListener('change', onChange)
+    );
+  }
+
+  /** Whether the app's window is too narrow for a pane, right now. */
+  private isNarrow(): boolean {
+    // A fresh query: one made earlier catches up with a resize a frame late.
+    return !!this.document.defaultView?.matchMedia?.(NARROW).matches;
+  }
+
+  /** Shows it in `dock`; a pane on a narrow screen shows as a dialog. */
   private show(dock: UwtInspectorDock): void {
     uwtSafeVoid('open', () => {
       this.host =
-        dock === 'dialog'
-          ? this.openDialog()
-          : dock === 'window'
-            ? (this.openWindow() ?? this.openDialog())
+        dock === 'window'
+          ? (this.openWindow() ?? this.openDialog())
+          : dock === 'dialog' || this.isNarrow()
+            ? this.openDialog()
             : this.openPane(dock);
       this.isOpen.set(true);
     });
@@ -239,7 +271,9 @@ export class UwtEventInspectorService {
         width: 'clamp(min(40rem, 96vw), 50vw, 64rem)',
         height: '88vh',
         minWidth: 'min(22rem, 96vw)',
-        autoFocus: '.uwt-inspector-search input'
+        autoFocus: '.uwt-inspector-search input',
+        // Hooks the title's alignment; see the inspector's styles.
+        styleClass: 'uwt-inspector-dialog'
       }
     );
     const host: UwtInspectorHost = {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
index 8f137fd..fc01057 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
@@ -3,7 +3,7 @@
   class="uwt-inspector-dock__group"
   role="group"
   aria-label="Dock the Event Inspector">
-  @for (option of options; track option.dock) {
+  @for (option of options(); track option.dock) {
     <button
       type="button"
       class="uwt-inspector-dock__option"
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
index ec59faa..4cbd44a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
@@ -31,6 +31,16 @@ describe('UwtInspectorDockSwitcherComponent', () => {
     ).toEqual([false, false, false, false, true]);
   });
 
+  it('should offer only the dialog and the window without room for a pane', () => {
+    fixture.componentRef.setInput('panes', false);
+    fixture.detectChanges();
+
+    expect(buttons().map((b) => b.getAttribute('data-dock'))).toEqual([
+      'dialog',
+      'window'
+    ]);
+  });
+
   it('should ask for another dock, and ignore the current one', () => {
     buttons()[4].click();
     buttons()[1].click();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
index 8da735d..4466476 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   input,
   output
 } from '@angular/core';
@@ -21,7 +22,8 @@ const DOCK_LABEL: Record<UwtInspectorDock, string> = {
 /**
  * Moves the inspector between docks, like Chrome DevTools' dock side: one
  * icon per dock, the current one pressed. cps-ui-kit has no dock icons, so
- * they are drawn here.
+ * they are drawn here. Without room for a pane, only the dialog and the
+ * window are offered.
  */
 @Component({
   selector: 'uwt-inspector-dock-switcher',
@@ -32,12 +34,15 @@ const DOCK_LABEL: Record<UwtInspectorDock, string> = {
 })
 export class UwtInspectorDockSwitcherComponent {
   readonly dock = input.required<UwtInspectorDock>();
+  /** Whether the panes are offered; not on a narrow screen. */
+  readonly panes = input(true);
   readonly dockChange = output<UwtInspectorDock>();
 
-  protected readonly options = UWT_INSPECTOR_DOCKS.map((dock) => ({
-    dock,
-    label: DOCK_LABEL[dock]
-  }));
+  protected readonly options = computed(() =>
+    UWT_INSPECTOR_DOCKS.filter(
+      (dock) => this.panes() || dock === 'dialog' || dock === 'window'
+    ).map((dock) => ({ dock, label: DOCK_LABEL[dock] }))
+  );
 
   protected choose(dock: UwtInspectorDock): void {
     if (dock !== this.dock()) {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts
index 1b1da7b..ab54e5a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.spec.ts
@@ -46,7 +46,7 @@ const context = {
 };
 
 describe('uwtBuildInspectorExport', () => {
-  it("should contain every one of the section's events in hand-off order, whatever the filters", () => {
+  it('should contain every event given, in hand-off order, whatever the filters', () => {
     const doc = uwtBuildInspectorExport([bi(3), bi(1), bi(2)], context);
 
     expect(doc.events.map((e) => e.sequence)).toEqual([1, 2, 3]);
@@ -59,7 +59,7 @@ describe('uwtBuildInspectorExport', () => {
 
     expect(doc).toMatchObject({
       format: 'ngx-ui-watchtower-event-inspector',
-      formatVersion: 1,
+      formatVersion: 2,
       section: 'bi',
       exportedAt: '2026-01-01T10:05:00.000Z',
       capture: {
@@ -104,10 +104,14 @@ describe('uwtSafeStringify', () => {
 });
 
 describe('uwtInspectorFilename', () => {
-  it('should name the app, section and time, and nothing identifying', () => {
-    expect(
-      uwtInspectorFilename('my app/x', 'logging', new Date(2026, 0, 2, 3, 4, 5))
-    ).toBe('ngx-ui-watchtower-events-my-app-x-logging-20260102-030405.json');
+  it('should name the app, kind and time, and nothing identifying', () => {
+    const at = new Date(2026, 0, 2, 3, 4, 5);
+    expect(uwtInspectorFilename('my app/x', 'logging', at)).toBe(
+      'ngx-ui-watchtower-events-my-app-x-logging-20260102-030405.json'
+    );
+    expect(uwtInspectorFilename('shop', 'all', at)).toBe(
+      'ngx-ui-watchtower-events-shop-all-20260102-030405.json'
+    );
   });
 });
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts
index 5981020..07e02fd 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-export.ts
@@ -2,12 +2,12 @@ import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 import {
   UwtInspectorExport,
   UwtInspectorFilterState,
-  UwtInspectorSectionId
+  UwtInspectorKindFilter
 } from '../uwt-inspector.models/uwt-inspector.models';
 
 /** What the export needs to know beyond the events themselves. */
 export interface UwtInspectorExportContext {
-  section: UwtInspectorSectionId;
+  section: UwtInspectorKindFilter;
   startedAt: string;
   paused: boolean;
   app: UwtInspectorExport['app'];
@@ -19,8 +19,9 @@ export interface UwtInspectorExportContext {
 }
 
 /**
- * One section's downloadable document: every event captured in it, in the
- * order they were handed over, regardless of the filters on screen.
+ * The downloadable document for a kind, or every kind: every event captured
+ * of it, in the order they were handed over, regardless of the filters on
+ * screen.
  */
 export function uwtBuildInspectorExport(
   events: readonly UwtTelemetryObservedEvent[],
@@ -29,7 +30,7 @@ export function uwtBuildInspectorExport(
   const now = (context.now ?? new Date()).toISOString();
   return {
     format: 'ngx-ui-watchtower-event-inspector',
-    formatVersion: 1,
+    formatVersion: 2,
     section: context.section,
     exportedAt: now,
     capture: {
@@ -76,12 +77,13 @@ export function uwtSafeStringify(value: unknown, indent?: number): string {
 }
 
 /**
- * `ngx-ui-watchtower-events-<application>-<section>-<yyyyMMdd-HHmmss>.json`
- * — no session or user id, since the name ends up in folders and tickets.
+ * `ngx-ui-watchtower-events-<application>-<kind>-<yyyyMMdd-HHmmss>.json`,
+ * the kind being `all`, `bi`, `scenario` or `logging` — no session or user
+ * id, since the name ends up in folders and tickets.
  */
 export function uwtInspectorFilename(
   application: string,
-  section: UwtInspectorSectionId,
+  section: UwtInspectorKindFilter,
   at: Date
 ): string {
   const pad = (n: number) => String(n).padStart(2, '0');
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
index 3e357ca..07cd4b2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-export/uwt-inspector-exporter.ts
@@ -6,7 +6,10 @@ import {
   UwtTelemetrySink
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CPS_LIVE_ANNOUNCER_SERVICE, CpsNotificationService } from 'cps-ui-kit';
-import { UwtInspectorSectionId } from '../uwt-inspector.models/uwt-inspector.models';
+import {
+  UwtInspectorKindFilter,
+  UwtInspectorSectionId
+} from '../uwt-inspector.models/uwt-inspector.models';
 import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
 import {
   uwtBuildInspectorExport,
@@ -15,13 +18,29 @@ import {
   uwtSafeStringify
 } from './uwt-inspector-export';
 
-/** What each section calls its events, when telling people about them. */
+/** What each kind calls its events, when telling people about them. */
 export const UWT_INSPECTOR_SECTION_NOUN: Record<UwtInspectorSectionId, string> =
   { bi: 'BI', scenario: 'scenario', logging: 'log' };
 
+/** `events`, or `BI events`: what an export of `kind` holds. */
+export function uwtInspectorEventsNoun(kind: UwtInspectorKindFilter): string {
+  return kind === 'all'
+    ? 'events'
+    : `${UWT_INSPECTOR_SECTION_NOUN[kind]} events`;
+}
+
+/** `1 BI event`, `3 events`: a number of a kind's events. */
+export function uwtInspectorEventCount(
+  count: number,
+  kind: UwtInspectorKindFilter
+): string {
+  const noun = uwtInspectorEventsNoun(kind);
+  return `${count} ${count === 1 ? noun.slice(0, -1) : noun}`;
+}
+
 /**
- * Downloads or copies one section's captured events as JSON. Provided by
- * the popup, beside its {@link UwtInspectorStore}.
+ * Downloads or copies the captured events of a kind, or of every kind, as
+ * JSON. Provided by the popup, beside its {@link UwtInspectorStore}.
  */
 @Injectable()
 export class UwtInspectorExporter {
@@ -40,23 +59,21 @@ export class UwtInspectorExporter {
     optional: true
   });
 
-  /** Saves the section's events as a JSON file. */
-  download(section: UwtInspectorSectionId): void {
+  /** Saves the kind's events as a JSON file. */
+  download(kind: UwtInspectorKindFilter): void {
     try {
-      const json = this.json(section);
+      const json = this.json(kind);
       uwtDownloadJson(
         this.document,
         uwtInspectorFilename(
           this.identity?.application ?? 'app',
-          section,
+          kind,
           new Date()
         ),
         json
       );
       this.announce(
-        `Downloaded ${this.store.sectionCount(section).captured} ${
-          UWT_INSPECTOR_SECTION_NOUN[section]
-        } events.`
+        `Downloaded ${uwtInspectorEventCount(this.store.count(kind).captured, kind)}.`
       );
     } catch (error) {
       this.fail("Couldn't create the download", error);
@@ -64,19 +81,19 @@ export class UwtInspectorExporter {
   }
 
   /**
-   * Puts the section's events on the clipboard, for when a browser blocks
+   * Puts the kind's events on the clipboard, for when a browser blocks
    * downloads.
    *
    * @returns whether copying worked
    */
-  async copy(section: UwtInspectorSectionId): Promise<boolean> {
+  async copy(kind: UwtInspectorKindFilter): Promise<boolean> {
     try {
       // The inspector's own window: in a separate window, the app's
       // clipboard refuses, as the app's page doesn't have focus.
       const view = this.document.defaultView ?? window;
-      await view.navigator.clipboard.writeText(this.json(section));
+      await view.navigator.clipboard.writeText(this.json(kind));
       this.announce(
-        `${UWT_INSPECTOR_SECTION_NOUN[section]} events copied as JSON.`
+        `${uwtInspectorEventCount(this.store.count(kind).captured, kind)} copied as JSON.`
       );
       return true;
     } catch (error) {
@@ -85,11 +102,11 @@ export class UwtInspectorExporter {
     }
   }
 
-  /** The section's export document, serialized. */
-  json(section: UwtInspectorSectionId): string {
+  /** The kind's export document, serialized. */
+  json(kind: UwtInspectorKindFilter): string {
     return uwtSafeStringify(
-      uwtBuildInspectorExport(this.store.sectionEvents(section), {
-        section,
+      uwtBuildInspectorExport(this.store.events(kind), {
+        section: kind,
         startedAt: this.store.startedAt(),
         paused: this.store.paused(),
         app: {
@@ -101,8 +118,8 @@ export class UwtInspectorExporter {
         },
         session: this.session(),
         userAgent: this.document.defaultView?.navigator.userAgent ?? '',
-        activeFilters: this.store.filters()[section],
-        count: this.store.sectionCount(section)
+        activeFilters: this.store.filters(),
+        count: this.store.count(kind)
       }),
       2
     );
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index c7536f5..ca577cc 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -2,7 +2,7 @@
   <div class="uwt-inspector-filter-bar__row">
     <cps-input
       class="uwt-inspector-filter-bar__search uwt-inspector-search"
-      [ariaLabel]="'Search ' + sectionName() + ' events'"
+      ariaLabel="Search events"
       placeholder="Search all fields"
       prefixIcon="search"
       [clearable]="true"
@@ -15,13 +15,12 @@
       size="small"
       icon="filter-funnel"
       label="Add filter"
-      [ariaLabel]="'Add filter, ' + sectionName()"
       [ariaExpanded]="builderOpen()"
       (clicked)="builderOpen.set(!builderOpen())">
     </cps-button>
     <cps-info-circle
       tooltipMaxWidth="20rem"
-      tooltipText="Search matches any field's value or name, ignoring case. A filter compares one field, such as metadata.theme. Use steps[].name to match any item of a list, or steps[2].name for one. All filters must match. Filters apply to this section only; its download always contains everything it captured.">
+      tooltipText="Search matches any field's value or name, ignoring case. A filter compares one field, such as metadata.theme. Use steps[].name to match any item of a list, or steps[2].name for one. All filters must match. Export always contains every event captured of the kind shown, whatever the filters.">
     </cps-info-circle>
   </div>
 
@@ -29,7 +28,7 @@
     <div
       class="uwt-inspector-filter-bar__builder"
       role="group"
-      [attr.aria-label]="'New filter for ' + sectionName()"
+      aria-label="New filter"
       (keydown.enter)="add()">
       <cps-autocomplete
         class="uwt-inspector-filter-bar__path"
@@ -72,16 +71,14 @@
   @if (chips().length > 0 || anyActive()) {
     <div class="uwt-inspector-filter-bar__active">
       <span class="uwt-inspector-filter-bar__label">Filters:</span>
-      <ul
-        class="uwt-inspector-filter-bar__chips"
-        [attr.aria-label]="'Active filters for ' + sectionName()">
+      <ul class="uwt-inspector-filter-bar__chips" aria-label="Active filters">
         @for (chip of chips(); track chip.id) {
           <li>
             <cps-chip
               [label]="chip.text"
               [closable]="true"
               [closeButtonAriaLabel]="'Remove filter ' + chip.text"
-              (closed)="store.removeFilter(section(), chip.id)">
+              (closed)="store.removeFilter(chip.id)">
             </cps-chip>
           </li>
         }
@@ -90,7 +87,6 @@
         type="borderless"
         size="xsmall"
         label="Clear filters"
-        [ariaLabel]="'Clear filters for ' + sectionName()"
         (clicked)="clearAll()">
       </cps-button>
     </div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
index 30e373a..b6b7719 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
@@ -23,8 +23,6 @@ describe('UwtInspectorFilterBarComponent', () => {
     }).compileComponents();
     store = TestBed.inject(UwtInspectorStore);
     fixture = TestBed.createComponent(UwtInspectorFilterBarComponent);
-    fixture.componentRef.setInput('section', 'logging');
-    fixture.componentRef.setInput('sectionName', 'Logging');
     fixture.detectChanges();
   });
 
@@ -43,13 +41,13 @@ describe('UwtInspectorFilterBarComponent', () => {
     expect(bar().canAdd()).toBe(true);
   });
 
-  it('should name its controls after the section', () => {
+  it('should name its search field', () => {
     const el = fixture.nativeElement as HTMLElement;
     expect(
       el
         .querySelector('.uwt-inspector-search input')
         ?.getAttribute('aria-label')
-    ).toBe('Search Logging events');
+    ).toBe('Search events');
   });
 
   it('should add a filter as a removable chip with a spoken name', () => {
@@ -59,9 +57,7 @@ describe('UwtInspectorFilterBarComponent', () => {
     bar().add();
     fixture.detectChanges();
 
-    // Written to this bar's own section only.
-    expect(store.filters().bi.fields).toHaveLength(0);
-    expect(store.filters().logging.fields).toEqual([
+    expect(store.filters().fields).toEqual([
       expect.objectContaining({
         path: 'metadata.theme',
         operator: 'equals',
@@ -77,13 +73,12 @@ describe('UwtInspectorFilterBarComponent', () => {
 
     close.click();
     fixture.detectChanges();
-    expect(store.filters().logging.fields).toHaveLength(0);
+    expect(store.filters().fields).toHaveLength(0);
   });
 
   it('should clear the text and every filter together', () => {
-    store.setText('logging', 'x');
-    store.addFilter('logging', { path: 'kind', operator: 'exists', value: '' });
-    store.setText('bi', 'kept');
+    store.setText('x');
+    store.addFilter({ path: 'kind', operator: 'exists', value: '' });
     fixture.detectChanges();
 
     const clearBtn = Array.from(
@@ -91,8 +86,6 @@ describe('UwtInspectorFilterBarComponent', () => {
     ).find((b) => b.textContent?.trim() === 'Clear filters');
     clearBtn?.click();
 
-    expect(store.filters().logging).toEqual({ text: '', fields: [] });
-    // Another section's filters are left alone.
-    expect(store.filters().bi.text).toBe('kept');
+    expect(store.filters()).toEqual({ text: '', fields: [] });
   });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
index 548608e..1c9a051 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
@@ -4,7 +4,6 @@ import {
   computed,
   DestroyRef,
   inject,
-  input,
   signal
 } from '@angular/core';
 import {
@@ -15,10 +14,7 @@ import {
   CpsInputComponent,
   CpsSelectComponent
 } from 'cps-ui-kit';
-import {
-  UwtInspectorFilterOperator,
-  UwtInspectorSectionId
-} from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorFilterOperator } from '../uwt-inspector.models/uwt-inspector.models';
 import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
 import {
   uwtDescribeFilter,
@@ -29,8 +25,8 @@ import {
 const SEARCH_DEBOUNCE_MS = 150;
 
 /**
- * One section's free-text search, field-filter builder and active filters.
- * Each section filters on its own; nothing here affects the others.
+ * The timeline's free-text search, field-filter builder and active
+ * filters. They apply to every kind of event.
  */
 @Component({
   selector: 'uwt-inspector-filter-bar',
@@ -49,14 +45,7 @@ const SEARCH_DEBOUNCE_MS = 150;
 export class UwtInspectorFilterBarComponent {
   protected readonly store = inject(UwtInspectorStore);
 
-  /** The section these filters belong to. */
-  readonly section = input.required<UwtInspectorSectionId>();
-  /** The section's name as people read it, e.g. `BI telemetry`. */
-  readonly sectionName = input.required<string>();
-
-  protected readonly filters = computed(
-    () => this.store.filters()[this.section()]
-  );
+  protected readonly filters = this.store.filters;
 
   protected readonly operators: {
     label: string;
@@ -76,7 +65,7 @@ export class UwtInspectorFilterBarComponent {
   protected readonly value = signal('');
 
   protected readonly pathOptions = computed(() =>
-    this.store.knownPaths()[this.section()].map((p) => ({ label: p, value: p }))
+    this.store.knownPaths().map((p) => ({ label: p, value: p }))
   );
 
   protected readonly needsValue = computed(() =>
@@ -108,7 +97,7 @@ export class UwtInspectorFilterBarComponent {
   protected onSearch(text: string): void {
     clearTimeout(this.searchTimer);
     this.searchTimer = setTimeout(
-      () => this.store.setText(this.section(), text ?? ''),
+      () => this.store.setText(text ?? ''),
       SEARCH_DEBOUNCE_MS
     );
   }
@@ -126,7 +115,7 @@ export class UwtInspectorFilterBarComponent {
     if (!this.canAdd()) {
       return;
     }
-    this.store.addFilter(this.section(), {
+    this.store.addFilter({
       path: this.path().trim(),
       operator: this.operator(),
       value: this.needsValue() ? this.value().trim() : ''
@@ -136,6 +125,6 @@ export class UwtInspectorFilterBarComponent {
 
   protected clearAll(): void {
     clearTimeout(this.searchTimer);
-    this.store.clearFilters(this.section());
+    this.store.clearFilters();
   }
 }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
index fa7b667..bd56f4a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.scss
@@ -31,7 +31,9 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 0.75rem;
   line-height: 1.5;
-  white-space: pre;
+  // Wraps inside the row, so a long value never widens the table.
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
   tab-size: 2;
 
   &:focus-visible {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts
deleted file mode 100644
index 7e68588..0000000
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-columns.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
-import {
-  UwtInspectorEntry,
-  UwtInspectorSectionId
-} from '../uwt-inspector.models/uwt-inspector.models';
-
-/** One column of a section's table. */
-export interface UwtInspectorColumn {
-  key: string;
-  header: string;
-  /** Hidden on narrow screens. */
-  secondary?: boolean;
-  value: (event: UwtTelemetryObservedEvent) => string;
-}
-
-/** One table row: display text, plus the entry for the detail view. */
-export interface UwtInspectorRow {
-  sequence: number;
-  time: string;
-  cells: Record<string, string>;
-  forwardedFrom?: string;
-  entry: UwtInspectorEntry;
-}
-
-/** Reads a field as text, whatever the payload's declared type. */
-function text(payload: unknown, key: string): string {
-  if (payload === null || typeof payload !== 'object') {
-    return '';
-  }
-  const value = (payload as Record<string, unknown>)[key];
-  return value === undefined || value === null ? '' : String(value);
-}
-
-function metadataSummary(payload: unknown): string {
-  if (payload === null || typeof payload !== 'object') {
-    return '';
-  }
-  const metadata = (payload as Record<string, unknown>).metadata;
-  if (metadata === null || typeof metadata !== 'object') {
-    return '';
-  }
-  const pairs = Object.entries(metadata as Record<string, unknown>);
-  const shown = pairs
-    .slice(0, 3)
-    .map(([k, v]) => `${k}=${String(v)}`)
-    .join(', ');
-  return pairs.length > 3 ? `${shown}, …` : shown;
-}
-
-function ms(value: string): string {
-  return value === '' ? '' : `${value} ms`;
-}
-
-function eventTypeOf(event: UwtTelemetryObservedEvent): string {
-  return 'eventType' in event ? event.eventType : '';
-}
-
-export const UWT_INSPECTOR_COLUMNS: Record<
-  UwtInspectorSectionId,
-  readonly UwtInspectorColumn[]
-> = {
-  bi: [
-    {
-      key: 'name',
-      header: 'Event',
-      value: (e) =>
-        e.kind === 'unknown'
-          ? `${eventTypeOf(e)} (unrecognised type)`
-          : text(e.payload, 'eventName')
-    },
-    { key: 'type', header: 'Event type', secondary: true, value: eventTypeOf },
-    {
-      key: 'scenario',
-      header: 'Scenario id',
-      secondary: true,
-      value: (e) => text(e.payload, 'scenarioId')
-    },
-    {
-      key: 'feature',
-      header: 'Feature',
-      secondary: true,
-      value: (e) => text(e.payload, 'feature')
-    },
-    {
-      key: 'metadata',
-      header: 'Metadata',
-      value: (e) => metadataSummary(e.payload)
-    }
-  ],
-  scenario: [
-    {
-      key: 'name',
-      header: 'Scenario',
-      value: (e) => text(e.payload, 'scenarioName')
-    },
-    {
-      key: 'kind',
-      header: 'Event',
-      value: (e) => (e.kind === 'scenario-step' ? 'step' : 'record')
-    },
-    {
-      key: 'status',
-      header: 'Status',
-      value: (e) =>
-        e.kind === 'scenario-step'
-          ? [text(e.payload, 'name'), text(e.payload, 'status')]
-              .filter(Boolean)
-              .join(' · ')
-          : text(e.payload, 'status')
-    },
-    {
-      key: 'duration',
-      header: 'Duration',
-      value: (e) =>
-        ms(text(e.payload, e.kind === 'scenario-step' ? 'stepDelta' : 'delta'))
-    },
-    {
-      key: 'steps',
-      header: 'Steps',
-      secondary: true,
-      value: (e) => text(e.payload, 'stepCount')
-    },
-    {
-      key: 'id',
-      header: 'Scenario id',
-      secondary: true,
-      value: (e) => text(e.payload, 'scenarioId')
-    }
-  ],
-  logging: [
-    {
-      key: 'level',
-      header: 'Level',
-      value: (e) =>
-        e.kind === 'error' ? 'error → RUM' : text(e.payload, 'level')
-    },
-    {
-      key: 'logger',
-      header: 'Logger',
-      value: (e) => text(e.payload, 'logger')
-    },
-    {
-      key: 'context',
-      header: 'Context',
-      secondary: true,
-      value: (e) => text(e.payload, 'context')
-    },
-    {
-      key: 'message',
-      header: 'Message',
-      value: (e) =>
-        e.kind === 'error'
-          ? `${text(e.payload, 'name')}: ${text(e.payload, 'message')}`
-          : text(e.payload, 'message')
-    },
-    {
-      key: 'correlation',
-      header: 'Correlation id',
-      secondary: true,
-      value: (e) => text(e.payload, 'correlationId')
-    }
-  ]
-};
-
-/** `HH:MM:SS.mmm` in local time — the precision that orders a burst. */
-export function uwtInspectorTime(iso: string): string {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) {
-    return iso;
-  }
-  const pad = (n: number, width = 2) => String(n).padStart(width, '0');
-  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
-    date.getSeconds()
-  )}.${pad(date.getMilliseconds(), 3)}`;
-}
-
-export function uwtInspectorRow(
-  entry: UwtInspectorEntry,
-  columns: readonly UwtInspectorColumn[]
-): UwtInspectorRow {
-  const { event } = entry;
-  const cells: Record<string, string> = {};
-  for (const column of columns) {
-    try {
-      cells[column.key] = column.value(event);
-    } catch {
-      cells[column.key] = '';
-    }
-  }
-  return {
-    sequence: event.sequence,
-    time: uwtInspectorTime(event.capturedAt),
-    cells,
-    forwardedFrom: event.origin.forwarded
-      ? (event.origin.application ?? 'another app')
-      : undefined,
-    entry
-  };
-}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
deleted file mode 100644
index 3c08554..0000000
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<cps-expansion-panel
-  [headerTitle]="title()"
-  [prefixIcon]="text().icon"
-  [isExpanded]="true"
-  borderColor="line-mid">
-  <div class="uwt-inspector-section">
-    <div class="uwt-inspector-section__tools">
-      <uwt-inspector-filter-bar
-        class="uwt-inspector-section__filters"
-        [section]="section()"
-        [sectionName]="text().title">
-      </uwt-inspector-filter-bar>
-      <div class="uwt-inspector-section__actions">
-        <cps-button
-          type="outlined"
-          size="small"
-          icon="copy"
-          [label]="
-            copyState() === 'copied'
-              ? 'Copied'
-              : copyState() === 'failed'
-                ? 'Copy failed'
-                : 'Copy JSON'
-          "
-          [ariaLabel]="
-            (copyState() === 'copied'
-              ? 'Copied'
-              : copyState() === 'failed'
-                ? 'Copy failed'
-                : 'Copy JSON') +
-            ', ' +
-            text().title
-          "
-          (clicked)="copy()">
-        </cps-button>
-        <cps-button
-          size="small"
-          icon="download"
-          label="Download JSON"
-          [ariaLabel]="
-            'Download JSON, ' +
-            text().title +
-            '. Contains session and user ids.'
-          "
-          (clicked)="download()">
-        </cps-button>
-      </div>
-    </div>
-    @if (unseenNew() > 0) {
-      <div class="uwt-inspector-section__notice">
-        <span>{{ unseenNew() }} new on the first page.</span>
-        <cps-button
-          type="borderless"
-          size="xsmall"
-          label="Go to newest"
-          (clicked)="goToNewest()">
-        </cps-button>
-      </div>
-    }
-    <cps-table
-      [data]="rows()"
-      dataKey="sequence"
-      [hasToolbar]="false"
-      size="small"
-      [striped]="true"
-      [paginator]="true"
-      [rows]="25"
-      [rowsPerPageOptions]="[25, 50, 100]"
-      [first]="first()"
-      (pageChanged)="onPage($event)"
-      [emptyMessage]="emptyMessage()"
-      tableStyleClass="uwt-inspector-section__table">
-      <ng-template #header>
-        <th scope="col" class="uwt-inspector-section__time">Time</th>
-        @for (column of columns(); track column.key) {
-          <th
-            scope="col"
-            [class.uwt-inspector-section__secondary]="column.secondary">
-            {{ column.header }}
-          </th>
-        }
-      </ng-template>
-
-      <ng-template let-row #body>
-        <td class="uwt-inspector-section__time">
-          {{ row.time }}
-          @if (isFresh(row.sequence)) {
-            <cps-chip label="New"></cps-chip>
-          }
-        </td>
-        @for (column of columns(); track column.key) {
-          <td
-            [class.uwt-inspector-section__secondary]="column.secondary"
-            [class.uwt-inspector-section__level--warn]="
-              column.key === 'level' && row.cells['level'] === 'warn'
-            "
-            [class.uwt-inspector-section__level--error]="
-              column.key === 'level' && row.cells['level'].startsWith('error')
-            "
-            [attr.title]="row.cells[column.key] || null">
-            @if (column.key === columns()[0].key && row.forwardedFrom) {
-              <span class="uwt-inspector-section__forwarded"
-                >↪ {{ row.forwardedFrom }}</span
-              >
-            }
-            {{ row.cells[column.key] }}
-          </td>
-        }
-      </ng-template>
-
-      <ng-template let-row #rowexpansion>
-        <div class="uwt-inspector-section__detail">
-          <dl class="uwt-inspector-section__meta">
-            <div>
-              <dt>Handed to</dt>
-              <dd>
-                {{
-                  row.entry.event.destination === 'sink'
-                    ? 'telemetry sink'
-                    : 'log API provider'
-                }}
-              </dd>
-            </div>
-            <div>
-              <dt>From</dt>
-              <dd>
-                {{
-                  row.forwardedFrom
-                    ? 'forwarded by ' + row.forwardedFrom
-                    : 'this app'
-                }}
-              </dd>
-            </div>
-            @if ('eventType' in row.entry.event) {
-              <div>
-                <dt>Event type</dt>
-                <dd>{{ row.entry.event.eventType }}</dd>
-              </div>
-            }
-            @if (
-              row.entry.event.kind === 'error' &&
-              row.entry.event.relatedSequence
-            ) {
-              <div>
-                <dt>Mirrored from</dt>
-                <dd>log event #{{ row.entry.event.relatedSequence }}</dd>
-              </div>
-            }
-            <div>
-              <dt>Event</dt>
-              <dd>#{{ row.sequence }}, {{ row.entry.sizeChars }} characters</dd>
-            </div>
-          </dl>
-          @if (row.entry.renderError) {
-            <p class="uwt-inspector-section__error">
-              Couldn't prepare this event for display:
-              {{ row.entry.renderError }}
-            </p>
-          }
-          <uwt-inspector-json
-            [value]="row.entry.event.payload"
-            [label]="'Payload of event #' + row.sequence"
-            copyLabel="Copy event"
-            [maxChars]="maxPayloadChars()">
-          </uwt-inspector-json>
-        </div>
-      </ng-template>
-    </cps-table>
-  </div>
-</cps-expansion-panel>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
deleted file mode 100644
index 895fb2a..0000000
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-:host {
-  display: block;
-  container-type: inline-size;
-}
-
-.uwt-inspector-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-}
-
-.uwt-inspector-section__tools {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 0.5rem 1rem;
-}
-
-.uwt-inspector-section__filters {
-  flex: 1 1 24rem;
-}
-
-.uwt-inspector-section__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.uwt-inspector-section__notice {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.8125rem;
-  color: var(--cps-text-secondary);
-}
-
-// The table fits the section instead of running past its edge: the columns
-// after Time share the width, and a long value ends in an ellipsis, shown
-// in full in the cell's title and the row's detail.
-:host ::ng-deep .uwt-inspector-section__table {
-  width: 100%;
-}
-
-td {
-  // Lets the table make a cell narrower than its text.
-  max-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.uwt-inspector-section__time {
-  // Only as wide as the time itself.
-  width: 1%;
-  max-width: none;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.uwt-inspector-section__forwarded {
-  margin-inline-end: 0.375rem;
-  color: var(--cps-text-secondary);
-  font-size: 0.75rem;
-}
-
-// Level is always written out; colour only supports it. The warn shade is
-// dark enough to read as text (5.6:1 on white); the base warn is 2.1:1.
-.uwt-inspector-section__level--warn {
-  color: var(--cps-color-warn-darken3);
-  font-weight: 600;
-}
-
-.uwt-inspector-section__level--error {
-  color: var(--cps-state-error);
-  font-weight: 600;
-}
-
-.uwt-inspector-section__detail {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem 0.25rem;
-}
-
-.uwt-inspector-section__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 1.25rem;
-  margin: 0;
-  font-size: 0.8125rem;
-
-  div {
-    display: flex;
-    gap: 0.375rem;
-  }
-
-  dt {
-    color: var(--cps-text-secondary);
-  }
-
-  dd {
-    margin: 0;
-    color: var(--cps-text-primary);
-  }
-}
-
-.uwt-inspector-section__error {
-  margin: 0;
-  color: var(--cps-state-error);
-  font-size: 0.8125rem;
-}
-
-@container (max-width: 48rem) {
-  .uwt-inspector-section__secondary {
-    display: none;
-  }
-}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts
deleted file mode 100644
index bb7ba93..0000000
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.spec.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { UwtTelemetryMonitor } from '@absaoss-cps/ngx-ui-watchtower';
-import { UwtInspectorExporter } from '../uwt-inspector-export/uwt-inspector-exporter';
-import {
-  UWT_INSPECTOR_FLUSH_MS,
-  UwtInspectorStore
-} from '../uwt-inspector-store/uwt-inspector-store';
-import { UwtInspectorSectionComponent } from './uwt-inspector-section.component';
-
-/** Rows per page, as the section's table is configured. */
-const PAGE = 25;
-
-describe('UwtInspectorSectionComponent', () => {
-  let fixture: ComponentFixture<UwtInspectorSectionComponent>;
-  let store: UwtInspectorStore;
-  let monitor: UwtTelemetryMonitor;
-
-  const el = () => fixture.nativeElement as HTMLElement;
-  const shownRows = () =>
-    el().querySelectorAll('td.uwt-inspector-section__time').length;
-  const pageReport = () =>
-    el().querySelector('.p-paginator-current')?.textContent?.trim();
-  const ui = () =>
-    fixture.componentInstance as unknown as {
-      first(): number;
-      onPage(state: { first?: number }): void;
-    };
-
-  /** Publishes BI events, every tenth one named `needle`. */
-  function publish(count: number): void {
-    for (let i = 0; i < count; i++) {
-      monitor.publish({
-        kind: 'bi',
-        eventType: 'com.uwt.bi',
-        payload: {
-          eventName: i % 10 === 0 ? 'needle' : `hay-${i}`,
-          eventTime: '2026-01-01T00:00:00.000Z',
-          application: 'app'
-        },
-        destination: 'sink',
-        origin: { forwarded: false }
-      });
-    }
-    jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
-    fixture.detectChanges();
-  }
-
-  function goToPage(page: number): void {
-    ui().onPage({ first: (page - 1) * PAGE });
-    fixture.detectChanges();
-  }
-
-  beforeEach(async () => {
-    jest.useFakeTimers();
-    await TestBed.configureTestingModule({
-      imports: [UwtInspectorSectionComponent, NoopAnimationsModule],
-      providers: [UwtInspectorStore, UwtInspectorExporter]
-    }).compileComponents();
-    monitor = TestBed.inject(UwtTelemetryMonitor);
-    store = TestBed.inject(UwtInspectorStore);
-    fixture = TestBed.createComponent(UwtInspectorSectionComponent);
-    fixture.componentRef.setInput('section', 'bi');
-    fixture.detectChanges();
-  });
-
-  afterEach(() => {
-    fixture.destroy();
-    jest.useRealTimers();
-  });
-
-  describe('paging', () => {
-    it('should show the page the reader chose', () => {
-      publish(100);
-      goToPage(4);
-
-      expect(ui().first()).toBe(75);
-      expect(shownRows()).toBe(PAGE);
-    });
-
-    it('should stay on the page while new events arrive', () => {
-      publish(100);
-      goToPage(2);
-
-      publish(1);
-
-      expect(ui().first()).toBe(PAGE);
-    });
-
-    it('should go back to the first page when a filter leaves fewer rows than the page starts at', () => {
-      publish(100);
-      goToPage(4);
-
-      store.setText('bi', 'needle');
-      fixture.detectChanges();
-
-      expect(ui().first()).toBe(0);
-      expect(shownRows()).toBe(10);
-      expect(pageReport()).toBe('1 - 10 of 10');
-    });
-
-    it('should keep the page when a filter still reaches it', () => {
-      publish(100);
-      goToPage(2);
-
-      store.setText('bi', 'hay');
-      fixture.detectChanges();
-
-      expect(ui().first()).toBe(PAGE);
-      expect(shownRows()).toBe(PAGE);
-    });
-
-    it('should go back to the first page when the section is cleared', () => {
-      publish(100);
-      goToPage(3);
-
-      store.clear();
-      fixture.detectChanges();
-      expect(ui().first()).toBe(0);
-
-      publish(1);
-      expect(shownRows()).toBe(1);
-      expect(pageReport()).toBe('1 - 1 of 1');
-    });
-  });
-});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts
deleted file mode 100644
index a043cb5..0000000
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-section/uwt-inspector-section.component.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  linkedSignal,
-  signal
-} from '@angular/core';
-import {
-  CpsChipComponent,
-  CpsButtonComponent,
-  CpsExpansionPanelComponent,
-  CpsTableComponent
-} from 'cps-ui-kit';
-import { UwtInspectorSectionId } from '../uwt-inspector.models/uwt-inspector.models';
-import {
-  UWT_DEFAULT_INSPECTOR_CONFIG,
-  UwtInspectorStore
-} from '../uwt-inspector-store/uwt-inspector-store';
-import { UwtInspectorJsonComponent } from '../uwt-inspector-json/uwt-inspector-json.component';
-import { UwtInspectorFilterBarComponent } from '../uwt-inspector-filter-bar/uwt-inspector-filter-bar.component';
-import { UwtInspectorExporter } from '../uwt-inspector-export/uwt-inspector-exporter';
-import {
-  UWT_INSPECTOR_COLUMNS,
-  uwtInspectorRow,
-  uwtInspectorTime
-} from './uwt-inspector-columns';
-
-const SECTION_TEXT: Record<
-  UwtInspectorSectionId,
-  { title: string; icon: string; empty: string }
-> = {
-  bi: {
-    title: 'BI telemetry',
-    icon: 'graph',
-    empty: 'No BI events since this window opened.'
-  },
-  scenario: {
-    title: 'Scenario telemetry',
-    icon: 'measurement',
-    empty: 'No scenario events since this window opened.'
-  },
-  logging: {
-    title: 'Logging',
-    icon: 'book',
-    empty: 'No log records since this window opened.'
-  }
-};
-
-/**
- * One section of the popup: an expander holding the section's own filters,
- * its download and copy actions, and a paginated table of its events.
- */
-@Component({
-  selector: 'uwt-inspector-section',
-  imports: [
-    CpsExpansionPanelComponent,
-    CpsTableComponent,
-    CpsChipComponent,
-    CpsButtonComponent,
-    UwtInspectorJsonComponent,
-    UwtInspectorFilterBarComponent
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './uwt-inspector-section.component.html',
-  styleUrl: './uwt-inspector-section.component.scss'
-})
-export class UwtInspectorSectionComponent {
-  protected readonly store = inject(UwtInspectorStore);
-  private readonly exporter = inject(UwtInspectorExporter);
-
-  readonly section = input.required<UwtInspectorSectionId>();
-  /** JSON length, in characters, above which a payload is shown truncated. */
-  readonly maxPayloadChars = input(
-    UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView
-  );
-
-  protected readonly copyState = signal<'idle' | 'copied' | 'failed'>('idle');
-
-  protected readonly text = computed(() => SECTION_TEXT[this.section()]);
-  protected readonly columns = computed(
-    () => UWT_INSPECTOR_COLUMNS[this.section()]
-  );
-
-  protected readonly rows = computed(() => {
-    const columns = this.columns();
-    return this.store
-      .filtered()
-      [this.section()].map((entry) => uwtInspectorRow(entry, columns));
-  });
-
-  /**
-   * The paginator's offset. Kept while it still lands on a row; otherwise —
-   * a filter or a clear shrinking the rows past it — back to the first page,
-   * where the newest events are. The table won't do this itself: PrimeNG
-   * steps back one page at most, so page four filtered down to one page
-   * would show an empty table.
-   */
-  protected readonly first = linkedSignal<readonly unknown[], number>({
-    source: this.rows,
-    computation: (rows, previous) =>
-      previous && previous.value < rows.length ? previous.value : 0
-  });
-
-  private readonly captured = computed(
-    () => this.store.entries()[this.section()]
-  );
-
-  /** The expander title — the kit's header takes plain text only. */
-  protected readonly title = computed(() => {
-    const { title } = this.text();
-    const captured = this.captured();
-    if (captured.length === 0) {
-      return `${title} · no events yet`;
-    }
-    const count = this.store.isFiltering(this.section())
-      ? `${this.rows().length} of ${captured.length}`
-      : `${captured.length}`;
-    const last = uwtInspectorTime(captured[0].event.capturedAt).slice(0, 8);
-    const dropped = this.store.dropped()[this.section()];
-    return [
-      title,
-      count,
-      `last ${last}`,
-      dropped ? `oldest ${dropped} dropped` : ''
-    ]
-      .filter(Boolean)
-      .join(' · ');
-  });
-
-  protected readonly emptyMessage = computed(() =>
-    this.captured().length > 0
-      ? 'No events match the filters.'
-      : this.text().empty
-  );
-
-  /** Fresh arrivals that a reader past page one cannot see. */
-  protected readonly unseenNew = computed(() =>
-    this.first() > 0
-      ? this.rows().filter((r) => this.store.fresh().has(r.sequence)).length
-      : 0
-  );
-
-  protected onPage(state: { first?: number }): void {
-    this.first.set(state?.first ?? 0);
-  }
-
-  protected goToNewest(): void {
-    this.first.set(0);
-  }
-
-  protected download(): void {
-    this.exporter.download(this.section());
-  }
-
-  protected async copy(): Promise<void> {
-    this.copyState.set(
-      (await this.exporter.copy(this.section())) ? 'copied' : 'failed'
-    );
-    setTimeout(() => this.copyState.set('idle'), 2000);
-  }
-
-  protected isFresh(sequence: number): boolean {
-    return this.store.fresh().has(sequence);
-  }
-}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
index 22358a7..21a4b96 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-session/uwt-inspector-session.ts
@@ -2,7 +2,8 @@ import {
   createEnvironmentInjector,
   EnvironmentInjector,
   inject,
-  Injectable
+  Injectable,
+  Signal
 } from '@angular/core';
 import { UwtInspectorDock } from '../uwt-inspector.models/uwt-inspector.models';
 import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
@@ -23,6 +24,8 @@ export interface UwtInspectorHost {
 export interface UwtInspectorControls {
   setDock(dock: UwtInspectorDock): void;
   close(): void;
+  /** Whether the app's window is wide enough for a pane beside it. */
+  readonly panesFit: Signal<boolean>;
 }
 
 /**
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
index b9740d2..f28d043 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
@@ -100,7 +100,7 @@ describe('UwtInspectorStore', () => {
     expect(names(store)).toEqual(['b', 'a']); // newest first
   });
 
-  it('should route each kind to its section', () => {
+  it('should keep each kind apart', () => {
     const store = createStore();
     monitor.publish(bi('a'));
     monitor.publish(log('careful'));
@@ -111,16 +111,18 @@ describe('UwtInspectorStore', () => {
     expect(store.entries().scenario).toHaveLength(0);
   });
 
-  it('should keep at most the configured number per section, counting drops', () => {
+  it('should keep at most the configured number per kind, counting drops', () => {
     const store = createStore(2);
     ['a', 'b', 'c', 'd'].forEach((n) => monitor.publish(bi(n)));
-    monitor.publish(log('kept'));
+    ['x', 'y', 'z'].forEach((m) => monitor.publish(log(m)));
     flush();
 
     expect(names(store)).toEqual(['d', 'c']);
     expect(store.dropped().bi).toBe(2);
-    // A noisy section never evicts another.
-    expect(store.entries().logging).toHaveLength(1);
+    // A noisy kind never evicts another: each keeps its own two.
+    expect(store.entries().logging).toHaveLength(2);
+    expect(store.count('logging')).toEqual({ captured: 2, droppedOldest: 1 });
+    expect(store.count('all')).toEqual({ captured: 4, droppedOldest: 3 });
   });
 
   it('should clear everything and keep capturing', () => {
@@ -147,8 +149,8 @@ describe('UwtInspectorStore', () => {
     flush();
     expect(names(store)).toEqual(['a']);
     expect(store.newWhilePaused()).toBe(2);
-    // The section's download still contains them.
-    expect(store.sectionEvents('bi')).toHaveLength(3);
+    // The export still contains them.
+    expect(store.events('bi')).toHaveLength(3);
 
     store.setPaused(false);
     expect(names(store)).toEqual(['c', 'b', 'a']);
@@ -174,65 +176,87 @@ describe('UwtInspectorStore', () => {
     const store = createStore();
     monitor.publish(bi('a'));
 
-    expect(store.sectionEvents('bi')).toHaveLength(1);
-    expect(store.sectionCount('bi')).toEqual({ captured: 1, droppedOldest: 0 });
+    expect(store.events('bi')).toHaveLength(1);
+    expect(store.events('all')).toHaveLength(1);
+    expect(store.count('bi')).toEqual({ captured: 1, droppedOldest: 0 });
 
     flush();
     expect(names(store)).toEqual(['a']);
   });
 
-  it("should export only a section's own events, oldest first", () => {
+  it('should export one kind, or every kind, oldest first', () => {
     const store = createStore();
     monitor.publish(bi('first'));
     monitor.publish(log('a log line'));
     monitor.publish(bi('second'));
     flush();
 
-    const events = store.sectionEvents('bi');
+    const events = store.events('bi');
     expect(events.map((e) => e.kind)).toEqual(['bi', 'bi']);
     expect(events[0].sequence).toBeLessThan(events[1].sequence);
-    expect(store.sectionEvents('logging')).toHaveLength(1);
-    expect(store.sectionEvents('scenario')).toHaveLength(0);
+    expect(store.events('all').map((e) => e.kind)).toEqual(['bi', 'log', 'bi']);
+    expect(store.events('logging')).toHaveLength(1);
+    expect(store.events('scenario')).toHaveLength(0);
   });
 
-  it('should filter each section on its own, ignoring case', () => {
+  it('should show every kind merged newest first, or one kind', () => {
+    const store = createStore();
+    monitor.publish(bi('a'));
+    monitor.publish(log('b'));
+    monitor.publish(bi('c'));
+    flush();
+
+    const sequences = store.filtered().map((e) => e.event.sequence);
+    expect(store.filtered().map((e) => e.event.kind)).toEqual([
+      'bi',
+      'log',
+      'bi'
+    ]);
+    expect(sequences).toEqual([...sequences].sort((x, y) => y - x));
+
+    store.setKind('logging');
+    expect(store.filtered().map((e) => e.event.kind)).toEqual(['log']);
+  });
+
+  it('should filter every kind at once, ignoring case, and count matches per kind', () => {
     const store = createStore();
     monitor.publish(bi('theme_changed'));
     monitor.publish(bi('sidebar_toggled'));
     monitor.publish(log('Careful now'));
     flush();
 
-    store.setText('bi', 'THEME');
-    expect(store.filtered().bi).toHaveLength(1);
-    // Other sections are untouched by BI's filter.
-    expect(store.filtered().logging).toHaveLength(1);
-    expect(store.isFiltering('bi')).toBe(true);
-    expect(store.isFiltering('logging')).toBe(false);
-
-    store.addFilter('logging', {
-      path: 'level',
-      operator: 'equals',
-      value: 'error'
-    });
-    expect(store.filtered().logging).toHaveLength(0);
-    expect(store.filtered().bi).toHaveLength(1);
+    store.setText('THEME');
+    expect(store.filtered()).toHaveLength(1);
+    expect(store.matchCounts()).toEqual({ bi: 1, scenario: 0, logging: 0 });
+
+    store.setText('');
+    store.addFilter({ path: 'level', operator: 'equals', value: 'warn' });
+    expect(store.filtered().map((e) => e.event.kind)).toEqual(['log']);
+    expect(store.matchCounts()).toEqual({ bi: 0, scenario: 0, logging: 1 });
 
-    store.removeFilter('logging', store.filters().logging.fields[0].id);
-    expect(store.filtered().logging).toHaveLength(1);
+    store.removeFilter(store.filters().fields[0].id);
+    expect(store.filtered()).toHaveLength(3);
 
-    store.clearFilters('bi');
-    expect(store.filtered().bi).toHaveLength(2);
+    store.setText('careful');
+    store.setKind('bi');
+    expect(store.filtered()).toHaveLength(0);
+    store.clearFilters();
+    expect(store.filters()).toEqual({ text: '', fields: [] });
+    expect(store.filtered()).toHaveLength(2);
   });
 
-  it('should suggest filter fields from each section separately', () => {
+  it('should suggest filter fields from the kind shown', () => {
     const store = createStore();
     monitor.publish(bi('a'));
     monitor.publish(log('b'));
     flush();
 
-    expect(store.knownPaths().logging).toContain('level');
-    expect(store.knownPaths().bi).not.toContain('level');
-    expect(store.knownPaths().bi).toContain('eventName');
+    expect(store.knownPaths()).toContain('level');
+    expect(store.knownPaths()).toContain('eventName');
+
+    store.setKind('bi');
+    expect(store.knownPaths()).not.toContain('level');
+    expect(store.knownPaths()).toContain('eventName');
   });
 
   it('should mark the latest arrivals as new, briefly', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
index f4b802c..1941d85 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
@@ -14,6 +14,7 @@ import {
   UwtInspectorEntry,
   UwtInspectorFieldFilter,
   UwtInspectorFilterState,
+  UwtInspectorKindFilter,
   UwtInspectorSectionId,
   UwtEventInspectorConfig
 } from '../uwt-inspector.models/uwt-inspector.models';
@@ -60,8 +61,9 @@ function perSection<T>(make: () => T): PerSection<T> {
  *
  * Events arrive whenever the application sends them; they are batched and
  * reach the screen at most every {@link UWT_INSPECTOR_FLUSH_MS}, so a
- * burst causes one re-render rather than hundreds. Each section keeps at
- * most `maxEventsPerSection`, newest first, and counts what it dropped.
+ * burst causes one re-render rather than hundreds. Each kind keeps at most
+ * `maxEventsPerSection`, newest first, and counts what it dropped; the
+ * timeline shows them merged, newest first.
  */
 @Injectable()
 export class UwtInspectorStore {
@@ -97,38 +99,49 @@ export class UwtInspectorStore {
   readonly newWhilePaused = signal(0);
 
   /**
-   * Events received per section since opening or the last clear — keeps
-   * rising after the retention cap, unlike the section lengths.
+   * Events received per kind since opening or the last clear — keeps
+   * rising after the retention cap, unlike the kinds' lengths.
    */
   readonly received = signal<PerSection<number>>(perSection(() => 0));
 
   /** Sequence numbers from the latest flush, for a "new" marker. */
   readonly fresh = signal<ReadonlySet<number>>(new Set());
 
-  /** Each section's own search text and field filters. */
-  readonly filters = signal<PerSection<UwtInspectorFilterState>>(
-    perSection(emptyFilters)
-  );
+  /** Which kind the timeline shows, and exports. */
+  readonly kind = signal<UwtInspectorKindFilter>('all');
+
+  /** The timeline's search text and field filters, for every kind. */
+  readonly filters = signal<UwtInspectorFilterState>(emptyFilters());
 
-  /** Entries matching each section's own filters. */
-  readonly filtered = computed<PerSection<readonly UwtInspectorEntry[]>>(() => {
+  /** Each kind's entries that match the filters. */
+  private readonly matching = computed<
+    PerSection<readonly UwtInspectorEntry[]>
+  >(() => {
     const entries = this.entries();
     const filters = this.filters();
     return perSectionFrom((id) =>
-      isFiltering(filters[id])
-        ? entries[id].filter((e) => uwtMatchesFilters(e.fields, filters[id]))
+      isFiltering(filters)
+        ? entries[id].filter((e) => uwtMatchesFilters(e.fields, filters))
         : entries[id]
     );
   });
 
-  /** Field paths seen so far in each section, for filter suggestions. */
-  readonly knownPaths = computed<PerSection<string[]>>(() => {
-    const entries = this.entries();
-    return perSectionFrom((id) =>
-      uwtKnownPaths(entries[id].map((e) => e.fields))
-    );
+  /** How many events of each kind match the filters. */
+  readonly matchCounts = computed<PerSection<number>>(() => {
+    const matching = this.matching();
+    return perSectionFrom((id) => matching[id].length);
   });
 
+  /** The timeline: entries of the kind shown that match, newest first. */
+  readonly filtered = computed<readonly UwtInspectorEntry[]>(() =>
+    this.ofKind(this.matching(), this.kind())
+  );
+
+  /** Field paths seen so far in the kind shown, for filter suggestions. */
+  readonly knownPaths = computed<string[]>(() =>
+    uwtKnownPaths(this.ofKind(this.entries(), this.kind()).map((e) => e.fields))
+  );
+
   readonly total = computed(() => {
     const entries = this.entries();
     return UWT_INSPECTOR_SECTIONS.reduce((n, id) => n + entries[id].length, 0);
@@ -169,65 +182,77 @@ export class UwtInspectorStore {
     }
   }
 
-  setText(section: UwtInspectorSectionId, text: string): void {
-    this.updateFilters(section, (f) => ({ ...f, text }));
+  setKind(kind: UwtInspectorKindFilter): void {
+    this.kind.set(kind);
   }
 
-  addFilter(
-    section: UwtInspectorSectionId,
-    filter: Omit<UwtInspectorFieldFilter, 'id'>
-  ): void {
-    this.updateFilters(section, (f) => ({
+  setText(text: string): void {
+    this.filters.update((f) => ({ ...f, text }));
+  }
+
+  addFilter(filter: Omit<UwtInspectorFieldFilter, 'id'>): void {
+    this.filters.update((f) => ({
       ...f,
       fields: [...f.fields, { ...filter, id: newId() }]
     }));
   }
 
-  removeFilter(section: UwtInspectorSectionId, id: string): void {
-    this.updateFilters(section, (f) => ({
+  removeFilter(id: string): void {
+    this.filters.update((f) => ({
       ...f,
       fields: f.fields.filter((x) => x.id !== id)
     }));
   }
 
-  clearFilters(section: UwtInspectorSectionId): void {
-    this.updateFilters(section, emptyFilters);
-  }
-
-  /** Whether a section has any filter or search text active. */
-  isFiltering(section: UwtInspectorSectionId): boolean {
-    return isFiltering(this.filters()[section]);
+  clearFilters(): void {
+    this.filters.set(emptyFilters());
   }
 
   /**
-   * Every event captured in one section: what is shown, plus anything held
-   * back while paused or still waiting for the next flush. Oldest first.
+   * Every event captured of a kind: what is shown, plus anything held back
+   * while paused or still waiting for the next flush. Oldest first.
    */
-  sectionEvents(section: UwtInspectorSectionId): UwtTelemetryObservedEvent[] {
+  events(kind: UwtInspectorKindFilter): UwtTelemetryObservedEvent[] {
     return [
-      ...this.buffers[section].map((e) => e.event),
-      ...this.pending.filter((e) => e.section === section).map((e) => e.event)
+      ...this.captured(kind).map((e) => e.event),
+      ...this.pendingOf(kind).map((e) => e.event)
     ].sort((a, b) => a.sequence - b.sequence);
   }
 
-  /** One section's totals for its export, counted like {@link sectionEvents}. */
-  sectionCount(section: UwtInspectorSectionId): {
+  /** A kind's totals for its export, counted like {@link events}. */
+  count(kind: UwtInspectorKindFilter): {
     captured: number;
     droppedOldest: number;
   } {
+    const ids = kind === 'all' ? UWT_INSPECTOR_SECTIONS : [kind];
     return {
-      captured:
-        this.buffers[section].length +
-        this.pending.filter((e) => e.section === section).length,
-      droppedOldest: this.droppedCount[section]
+      captured: this.captured(kind).length + this.pendingOf(kind).length,
+      droppedOldest: ids.reduce((n, id) => n + this.droppedCount[id], 0)
     };
   }
 
-  private updateFilters(
-    section: UwtInspectorSectionId,
-    change: (f: UwtInspectorFilterState) => UwtInspectorFilterState
-  ): void {
-    this.filters.update((all) => ({ ...all, [section]: change(all[section]) }));
+  /** One kind's entries, or every kind's merged newest first. */
+  private ofKind(
+    entries: PerSection<readonly UwtInspectorEntry[]>,
+    kind: UwtInspectorKindFilter
+  ): readonly UwtInspectorEntry[] {
+    return kind === 'all'
+      ? UWT_INSPECTOR_SECTIONS.flatMap((id) => entries[id]).sort(
+          (a, b) => b.event.sequence - a.event.sequence
+        )
+      : entries[kind];
+  }
+
+  private captured(kind: UwtInspectorKindFilter): UwtInspectorEntry[] {
+    return kind === 'all'
+      ? UWT_INSPECTOR_SECTIONS.flatMap((id) => this.buffers[id])
+      : this.buffers[kind];
+  }
+
+  private pendingOf(kind: UwtInspectorKindFilter): UwtInspectorEntry[] {
+    return kind === 'all'
+      ? this.pending
+      : this.pending.filter((e) => e.section === kind);
   }
 
   /**
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
new file mode 100644
index 0000000..9655c35
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
@@ -0,0 +1,159 @@
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import { uwtInspectorSectionOf } from '../uwt-inspector-filter/uwt-inspector-filter';
+import { uwtInspectorRow } from './uwt-inspector-rows';
+
+const base = {
+  sequence: 7,
+  capturedAt: '2026-01-01T00:00:00.000Z',
+  destination: 'sink' as const,
+  origin: { forwarded: false as const }
+};
+
+/** The row shown for `event`, without its entry. */
+function rowOf(event: UwtTelemetryObservedEvent) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { entry, time, ...row } = uwtInspectorRow({
+    event,
+    section: uwtInspectorSectionOf(event.kind),
+    fields: [],
+    sizeChars: 0
+  });
+  return row;
+}
+
+describe('uwtInspectorRow', () => {
+  it('should show a BI event by name, with its first metadata', () => {
+    expect(
+      rowOf({
+        ...base,
+        kind: 'bi',
+        eventType: 'com.uwt.bi',
+        payload: {
+          eventName: 'theme_changed',
+          eventTime: '',
+          application: 'app',
+          scenarioId: 's-1',
+          metadata: { a: 1, b: 2, c: 3, d: 4 }
+        }
+      })
+    ).toEqual({
+      sequence: 7,
+      kind: 'BI',
+      name: 'theme_changed',
+      details: 'a=1, b=2, c=3, …',
+      tone: undefined,
+      eventType: 'com.uwt.bi',
+      id: 's-1',
+      forwardedFrom: undefined
+    });
+  });
+
+  it('should show a scenario with its status, duration and steps', () => {
+    expect(
+      rowOf({
+        ...base,
+        kind: 'scenario',
+        eventType: 'com.uwt.scenario',
+        payload: {
+          scenarioId: 's-1',
+          scenarioName: 'checkout',
+          status: 'failure',
+          startTime: '',
+          delta: 42,
+          elapsed: 0,
+          stepCount: 1,
+          steps: [],
+          application: 'app'
+        }
+      })
+    ).toMatchObject({
+      kind: 'Scenario',
+      name: 'checkout',
+      details: 'failure · 42 ms · 1 step',
+      tone: 'error',
+      id: 's-1'
+    });
+  });
+
+  it('should show a step under its scenario', () => {
+    expect(
+      rowOf({
+        ...base,
+        kind: 'scenario-step',
+        eventType: 'com.uwt.step',
+        payload: {
+          scenarioId: 's-1',
+          scenarioName: 'checkout',
+          name: 'pay',
+          status: 'abandoned',
+          stepDelta: 5,
+          application: 'app'
+        } as never
+      })
+    ).toMatchObject({
+      kind: 'Step',
+      name: 'checkout · pay',
+      details: 'abandoned · 5 ms',
+      tone: 'warn'
+    });
+  });
+
+  it('should show a log by logger, with its level and message', () => {
+    expect(
+      rowOf({
+        ...base,
+        kind: 'log',
+        destination: 'log-provider',
+        payload: {
+          timestamp: '',
+          level: 'warn',
+          message: 'Careful now',
+          logger: 'checkout',
+          correlationId: 'c-9',
+          application: 'app',
+          environment: 'test',
+          version: '1'
+        }
+      })
+    ).toMatchObject({
+      kind: 'Log',
+      name: 'checkout',
+      details: 'warn · Careful now',
+      tone: 'warn',
+      eventType: '',
+      id: 'c-9'
+    });
+  });
+
+  it('should show an error sent to RUM', () => {
+    expect(
+      rowOf({
+        ...base,
+        kind: 'error',
+        payload: { name: 'TypeError', message: 'x is undefined' }
+      })
+    ).toMatchObject({
+      kind: 'Error',
+      name: 'TypeError',
+      details: '→ RUM · x is undefined',
+      tone: 'error'
+    });
+  });
+
+  it('should show a forwarded event of an unknown type, and who sent it', () => {
+    expect(
+      rowOf({
+        ...base,
+        origin: { forwarded: true, application: 'fragment' },
+        kind: 'unknown',
+        eventType: 'com.other.thing',
+        payload: {}
+      })
+    ).toMatchObject({
+      kind: 'BI',
+      name: 'com.other.thing',
+      details: 'unrecognised event type',
+      forwardedFrom: 'fragment'
+    });
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
new file mode 100644
index 0000000..7d94655
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
@@ -0,0 +1,177 @@
+import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtInspectorEntry } from '../uwt-inspector.models/uwt-inspector.models';
+
+/** How a row's details are coloured. The words always say it too. */
+export type UwtInspectorTone = 'success' | 'warn' | 'error';
+
+/** One timeline row: display text, plus the entry for the detail view. */
+export interface UwtInspectorRow {
+  sequence: number;
+  time: string;
+  /** `BI`, `Scenario`, `Step`, `Log` or `Error`. */
+  kind: string;
+  /** The event, scenario, step, logger or error name. */
+  name: string;
+  details: string;
+  tone?: UwtInspectorTone;
+  /** Secondary: hidden on narrow screens. */
+  eventType: string;
+  /** Secondary: the scenario id, or a log's correlation id. */
+  id: string;
+  forwardedFrom?: string;
+  entry: UwtInspectorEntry;
+}
+
+type RowText = Pick<
+  UwtInspectorRow,
+  'kind' | 'name' | 'details' | 'tone' | 'id'
+>;
+
+/** Reads a field as text, whatever the payload's declared type. */
+function text(payload: unknown, key: string): string {
+  if (payload === null || typeof payload !== 'object') {
+    return '';
+  }
+  const value = (payload as Record<string, unknown>)[key];
+  return value === undefined || value === null ? '' : String(value);
+}
+
+/** The first three metadata pairs, `key=value`. */
+function metadataSummary(payload: unknown): string {
+  if (payload === null || typeof payload !== 'object') {
+    return '';
+  }
+  const metadata = (payload as Record<string, unknown>).metadata;
+  if (metadata === null || typeof metadata !== 'object') {
+    return '';
+  }
+  const pairs = Object.entries(metadata as Record<string, unknown>);
+  const shown = pairs
+    .slice(0, 3)
+    .map(([k, v]) => `${k}=${String(v)}`)
+    .join(', ');
+  return pairs.length > 3 ? `${shown}, …` : shown;
+}
+
+function ms(value: string): string {
+  return value === '' ? '' : `${value} ms`;
+}
+
+function join(...parts: string[]): string {
+  return parts.filter(Boolean).join(' · ');
+}
+
+function statusTone(status: string): UwtInspectorTone | undefined {
+  switch (status) {
+    case 'success':
+      return 'success';
+    case 'failure':
+    case 'timeout':
+      return 'error';
+    case 'abandoned':
+    case 'incomplete':
+      return 'warn';
+    default:
+      return undefined;
+  }
+}
+
+function levelTone(level: string): UwtInspectorTone | undefined {
+  return level === 'warn' ? 'warn' : level === 'error' ? 'error' : undefined;
+}
+
+function describe(event: UwtTelemetryObservedEvent): RowText {
+  const p = event.payload;
+  switch (event.kind) {
+    case 'bi':
+      return {
+        kind: 'BI',
+        name: text(p, 'eventName'),
+        details: metadataSummary(p),
+        id: text(p, 'scenarioId')
+      };
+    case 'scenario': {
+      const status = text(p, 'status');
+      const steps = text(p, 'stepCount');
+      return {
+        kind: 'Scenario',
+        name: text(p, 'scenarioName'),
+        details: join(
+          status,
+          ms(text(p, 'delta')),
+          steps && `${steps} step${steps === '1' ? '' : 's'}`
+        ),
+        tone: statusTone(status),
+        id: text(p, 'scenarioId')
+      };
+    }
+    case 'scenario-step': {
+      const status = text(p, 'status');
+      return {
+        kind: 'Step',
+        name: join(text(p, 'scenarioName'), text(p, 'name')),
+        details: join(status, ms(text(p, 'stepDelta'))),
+        tone: statusTone(status),
+        id: text(p, 'scenarioId')
+      };
+    }
+    case 'log': {
+      const level = text(p, 'level');
+      return {
+        kind: 'Log',
+        name: text(p, 'logger'),
+        details: join(level, text(p, 'message')),
+        tone: levelTone(level),
+        id: text(p, 'correlationId')
+      };
+    }
+    case 'error':
+      return {
+        kind: 'Error',
+        name: text(p, 'name'),
+        details: join('→ RUM', text(p, 'message')),
+        tone: 'error',
+        id: ''
+      };
+    default:
+      // Forwarded from another app, of a type this one doesn't know.
+      return {
+        kind: 'BI',
+        name: 'eventType' in event ? event.eventType : '',
+        details: 'unrecognised event type',
+        id: ''
+      };
+  }
+}
+
+/** `HH:MM:SS.mmm` in local time — the precision that orders a burst. */
+export function uwtInspectorTime(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  const pad = (n: number, width = 2) => String(n).padStart(width, '0');
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
+    date.getSeconds()
+  )}.${pad(date.getMilliseconds(), 3)}`;
+}
+
+export function uwtInspectorRow(entry: UwtInspectorEntry): UwtInspectorRow {
+  const { event } = entry;
+  let described: RowText;
+  try {
+    described = describe(event);
+  } catch {
+    described = { kind: '', name: '', details: '', id: '' };
+  }
+  return {
+    sequence: event.sequence,
+    time: uwtInspectorTime(event.capturedAt),
+    ...described,
+    eventType: 'eventType' in event ? event.eventType : '',
+    forwardedFrom: event.origin.forwarded
+      ? (event.origin.application ?? 'another app')
+      : undefined,
+    entry
+  };
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html
new file mode 100644
index 0000000..0468013
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html
@@ -0,0 +1,171 @@
+<div class="uwt-inspector-timeline">
+  <div class="uwt-inspector-timeline__tools">
+    <cps-button-toggle
+      class="uwt-inspector-timeline__kinds"
+      ariaLabel="Kind of event"
+      [options]="kindOptions()"
+      [equalWidths]="false"
+      [value]="store.kind()"
+      (valueChanged)="setKind($event)">
+    </cps-button-toggle>
+    <cps-button
+      type="outlined"
+      size="small"
+      icon="download"
+      [label]="
+        copyState() === 'copied'
+          ? 'Copied'
+          : copyState() === 'failed'
+            ? 'Copy failed'
+            : 'Export'
+      "
+      ariaHaspopup="menu"
+      [ariaExpanded]="exportOpen()"
+      (clicked)="toggleExport(exportMenu, $event)">
+    </cps-button>
+    <cps-menu
+      #exportMenu
+      [header]="exportHeader()"
+      [items]="exportItems"
+      [withArrow]="false"
+      (menuShown)="exportOpen.set(true)"
+      (menuHidden)="exportOpen.set(false)">
+    </cps-menu>
+  </div>
+
+  <uwt-inspector-filter-bar></uwt-inspector-filter-bar>
+
+  @if (unseenNew() > 0) {
+    <div class="uwt-inspector-timeline__notice">
+      <span>{{ unseenNew() }} new at the top of the list.</span>
+      <cps-button
+        type="borderless"
+        size="xsmall"
+        label="Go to newest"
+        (clicked)="goToNewest()">
+      </cps-button>
+    </div>
+  }
+
+  <cps-table
+    [data]="rows()"
+    dataKey="sequence"
+    [hasToolbar]="false"
+    size="small"
+    [striped]="true"
+    [paginator]="true"
+    [alwaysShowPaginator]="false"
+    [rows]="25"
+    [rowsPerPageOptions]="[25, 50, 100]"
+    [first]="first()"
+    (pageChanged)="onPage($event)"
+    [emptyMessage]="emptyMessage()"
+    tableStyleClass="uwt-inspector-timeline__table">
+    <ng-template #header>
+      <th scope="col" class="uwt-inspector-timeline__time">Time</th>
+      <th scope="col" class="uwt-inspector-timeline__kind">Kind</th>
+      <th scope="col" class="uwt-inspector-timeline__name">Name</th>
+      <th scope="col">Details</th>
+      <th scope="col" class="uwt-inspector-timeline__secondary">Event type</th>
+      <th scope="col" class="uwt-inspector-timeline__secondary">Id</th>
+    </ng-template>
+
+    <ng-template let-row #body>
+      <td
+        class="uwt-inspector-timeline__time"
+        [class.uwt-inspector-timeline__fresh]="isFresh(row.sequence)"
+        [attr.title]="row.time">
+        @if (isFresh(row.sequence)) {
+          <span class="cps-sr-only">New: </span>
+        }
+        {{ row.time.slice(0, 8)
+        }}<span class="uwt-inspector-timeline__ms">{{
+          row.time.slice(8)
+        }}</span>
+      </td>
+      <td>{{ row.kind }}</td>
+      <td [attr.title]="row.name || null">
+        @if (row.forwardedFrom) {
+          <span class="uwt-inspector-timeline__forwarded"
+            >↪ {{ row.forwardedFrom }}</span
+          >
+        }
+        {{ row.name }}
+      </td>
+      <td
+        [class.uwt-inspector-timeline__tone--success]="row.tone === 'success'"
+        [class.uwt-inspector-timeline__tone--warn]="row.tone === 'warn'"
+        [class.uwt-inspector-timeline__tone--error]="row.tone === 'error'"
+        [attr.title]="row.details || null">
+        {{ row.details }}
+      </td>
+      <td
+        class="uwt-inspector-timeline__secondary"
+        [attr.title]="row.eventType || null">
+        {{ row.eventType }}
+      </td>
+      <td
+        class="uwt-inspector-timeline__secondary"
+        [attr.title]="row.id || null">
+        {{ row.id }}
+      </td>
+    </ng-template>
+
+    <ng-template let-row #rowexpansion>
+      <div class="uwt-inspector-timeline__detail">
+        <dl class="uwt-inspector-timeline__meta">
+          <div>
+            <dt>Handed to</dt>
+            <dd>
+              {{
+                row.entry.event.destination === 'sink'
+                  ? 'telemetry sink'
+                  : 'log API provider'
+              }}
+            </dd>
+          </div>
+          <div>
+            <dt>From</dt>
+            <dd>
+              {{
+                row.forwardedFrom
+                  ? 'forwarded by ' + row.forwardedFrom
+                  : 'this app'
+              }}
+            </dd>
+          </div>
+          @if ('eventType' in row.entry.event) {
+            <div>
+              <dt>Event type</dt>
+              <dd>{{ row.entry.event.eventType }}</dd>
+            </div>
+          }
+          @if (
+            row.entry.event.kind === 'error' && row.entry.event.relatedSequence
+          ) {
+            <div>
+              <dt>Mirrored from</dt>
+              <dd>log event #{{ row.entry.event.relatedSequence }}</dd>
+            </div>
+          }
+          <div>
+            <dt>Event</dt>
+            <dd>#{{ row.sequence }}, {{ row.entry.sizeChars }} characters</dd>
+          </div>
+        </dl>
+        @if (row.entry.renderError) {
+          <p class="uwt-inspector-timeline__error">
+            Couldn't prepare this event for display:
+            {{ row.entry.renderError }}
+          </p>
+        }
+        <uwt-inspector-json
+          [value]="row.entry.event.payload"
+          [label]="'Payload of event #' + row.sequence"
+          copyLabel="Copy event"
+          [maxChars]="maxPayloadChars()">
+        </uwt-inspector-json>
+      </div>
+    </ng-template>
+  </cps-table>
+</div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
new file mode 100644
index 0000000..ef1567d
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
@@ -0,0 +1,160 @@
+:host {
+  display: block;
+  container-type: inline-size;
+}
+
+.uwt-inspector-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+// Export sits by the kind toggle, as it exports the kind shown. On the
+// left, its menu has room to open: in a separate window the overlay is
+// placed against the app's window, so it can't flip back from the edge.
+.uwt-inspector-timeline__tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+}
+
+.uwt-inspector-timeline__notice {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--cps-text-secondary);
+}
+
+// The table fits the timeline: the columns take the widths set below, a
+// long value ends in an ellipsis (in full in its title and the row's
+// detail), and an open row's payload wraps rather than widening the table.
+// Not a fixed layout: the open row spans 100 columns, which would squeeze
+// the real ones.
+:host ::ng-deep .uwt-inspector-timeline__table {
+  width: 100%;
+}
+
+td {
+  // Lets the table make a cell narrower than its text.
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uwt-inspector-timeline__time {
+  width: 7rem;
+  max-width: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.uwt-inspector-timeline__kind {
+  width: 5.5rem;
+}
+
+.uwt-inspector-timeline__name {
+  width: 25%;
+}
+
+.uwt-inspector-timeline__secondary {
+  width: 8rem;
+}
+
+.uwt-inspector-timeline__forwarded {
+  margin-inline-end: 0.375rem;
+  color: var(--cps-text-secondary);
+  font-size: 0.75rem;
+}
+
+// A new row is tinted, fading over the time it counts as new. The table
+// draws the row, so the tint goes on its cells.
+:host ::ng-deep tr:has(> .uwt-inspector-timeline__fresh) > td {
+  animation: uwt-inspector-fresh 3s ease-in forwards;
+}
+
+@keyframes uwt-inspector-fresh {
+  from {
+    background-color: var(--cps-color-calm-highlighten);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host ::ng-deep tr:has(> .uwt-inspector-timeline__fresh) > td {
+    animation: none;
+    background-color: var(--cps-color-calm-highlighten);
+  }
+}
+
+// The status or level is always written out; colour only supports it.
+// Shades dark enough to read as text: success 5.1:1, warn 5.6:1 on white.
+.uwt-inspector-timeline__tone--success {
+  color: var(--cps-color-success-darken2);
+}
+
+.uwt-inspector-timeline__tone--warn {
+  color: var(--cps-color-warn-darken3);
+  font-weight: 600;
+}
+
+.uwt-inspector-timeline__tone--error {
+  color: var(--cps-state-error);
+  font-weight: 600;
+}
+
+.uwt-inspector-timeline__detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem;
+}
+
+.uwt-inspector-timeline__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+  margin: 0;
+  font-size: 0.8125rem;
+
+  div {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  dt {
+    color: var(--cps-text-secondary);
+  }
+
+  dd {
+    margin: 0;
+    color: var(--cps-text-primary);
+  }
+}
+
+.uwt-inspector-timeline__error {
+  margin: 0;
+  color: var(--cps-state-error);
+  font-size: 0.8125rem;
+}
+
+// Only with room to spare, so the details keep theirs.
+@container (max-width: 64rem) {
+  .uwt-inspector-timeline__secondary {
+    display: none;
+  }
+}
+
+// A phone: the milliseconds go, leaving the name and details more room.
+@container (max-width: 30rem) {
+  .uwt-inspector-timeline__time {
+    width: 4.5rem;
+  }
+
+  .uwt-inspector-timeline__ms {
+    display: none;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
new file mode 100644
index 0000000..25182c8
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
@@ -0,0 +1,176 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UwtTelemetryMonitor } from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtInspectorExporter } from '../uwt-inspector-export/uwt-inspector-exporter';
+import {
+  UWT_INSPECTOR_FLUSH_MS,
+  UwtInspectorStore
+} from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorTimelineComponent } from './uwt-inspector-timeline.component';
+
+/** Rows per page, as the timeline's table is configured. */
+const PAGE = 25;
+
+describe('UwtInspectorTimelineComponent', () => {
+  let fixture: ComponentFixture<UwtInspectorTimelineComponent>;
+  let store: UwtInspectorStore;
+  let monitor: UwtTelemetryMonitor;
+
+  const el = () => fixture.nativeElement as HTMLElement;
+  const shownRows = () =>
+    el().querySelectorAll('td.uwt-inspector-timeline__time').length;
+  /** Whether the paginator shows; the table hides it with one page. */
+  const paginatorShown = () => {
+    const paginator = el().querySelector<HTMLElement>('.p-paginator');
+    return !!paginator && paginator.style.display !== 'none';
+  };
+  const ui = () =>
+    fixture.componentInstance as unknown as {
+      first(): number;
+      onPage(state: { first?: number }): void;
+    };
+
+  /** Publishes events, every tenth one named `needle`: BI, or logs. */
+  function publish(count: number, kind: 'bi' | 'log' = 'bi'): void {
+    for (let i = 0; i < count; i++) {
+      const name = i % 10 === 0 ? 'needle' : `hay-${i}`;
+      monitor.publish(
+        kind === 'bi'
+          ? {
+              kind: 'bi',
+              eventType: 'com.uwt.bi',
+              payload: {
+                eventName: name,
+                eventTime: '2026-01-01T00:00:00.000Z',
+                application: 'app'
+              },
+              destination: 'sink',
+              origin: { forwarded: false }
+            }
+          : {
+              kind: 'log',
+              payload: {
+                timestamp: '2026-01-01T00:00:00.000Z',
+                level: 'log',
+                message: name,
+                application: 'app',
+                environment: 'test',
+                version: '1'
+              },
+              destination: 'log-provider',
+              origin: { forwarded: false }
+            }
+      );
+    }
+    jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
+    fixture.detectChanges();
+  }
+
+  function goToPage(page: number): void {
+    ui().onPage({ first: (page - 1) * PAGE });
+    fixture.detectChanges();
+  }
+
+  beforeEach(async () => {
+    jest.useFakeTimers();
+    await TestBed.configureTestingModule({
+      imports: [UwtInspectorTimelineComponent, NoopAnimationsModule],
+      providers: [UwtInspectorStore, UwtInspectorExporter]
+    }).compileComponents();
+    monitor = TestBed.inject(UwtTelemetryMonitor);
+    store = TestBed.inject(UwtInspectorStore);
+    fixture = TestBed.createComponent(UwtInspectorTimelineComponent);
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    jest.useRealTimers();
+  });
+
+  describe('paging', () => {
+    it('should show the page the reader chose', () => {
+      publish(100);
+      goToPage(4);
+
+      expect(ui().first()).toBe(75);
+      expect(shownRows()).toBe(PAGE);
+    });
+
+    it('should stay on the page while new events arrive', () => {
+      publish(100);
+      goToPage(2);
+
+      publish(1);
+
+      expect(ui().first()).toBe(PAGE);
+    });
+
+    it('should go back to the first page when the filters change', () => {
+      publish(100);
+      goToPage(2);
+
+      store.setText('hay');
+      fixture.detectChanges();
+
+      expect(ui().first()).toBe(0);
+      expect(shownRows()).toBe(PAGE);
+    });
+
+    it('should go back to the first page when another kind is shown', () => {
+      publish(60);
+      publish(60, 'log');
+      goToPage(2);
+
+      store.setKind('logging');
+      fixture.detectChanges();
+
+      expect(ui().first()).toBe(0);
+    });
+
+    it('should go back to the first page when cleared', () => {
+      publish(100);
+      goToPage(3);
+
+      store.clear();
+      fixture.detectChanges();
+      expect(ui().first()).toBe(0);
+
+      publish(1);
+      expect(shownRows()).toBe(1);
+    });
+
+    it('should hide the paginator while everything fits on one page', () => {
+      publish(PAGE);
+      expect(paginatorShown()).toBe(false);
+
+      publish(1);
+      expect(paginatorShown()).toBe(true);
+
+      store.setText('needle');
+      fixture.detectChanges();
+      expect(shownRows()).toBe(4);
+      expect(paginatorShown()).toBe(false);
+    });
+  });
+
+  it('should offer to go back to the newest, from a later page', () => {
+    publish(30);
+    jest.advanceTimersByTime(3000); // no longer new
+    goToPage(2);
+    expect(el().textContent).not.toContain('new at the top');
+
+    publish(2);
+    expect(el().textContent).toContain('2 new at the top of the list.');
+
+    // Of a burst reaching this page, only those above it count.
+    publish(30);
+    expect(el().textContent).toContain('25 new at the top of the list.');
+
+    Array.from(el().querySelectorAll('button'))
+      .find((b) => b.textContent?.trim() === 'Go to newest')
+      ?.click();
+    fixture.detectChanges();
+    expect(ui().first()).toBe(0);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
new file mode 100644
index 0000000..a1b89f9
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
@@ -0,0 +1,171 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  linkedSignal,
+  signal
+} from '@angular/core';
+import {
+  CpsButtonComponent,
+  CpsButtonToggleComponent,
+  CpsButtonToggleOption,
+  CpsMenuComponent,
+  CpsMenuItem,
+  CpsTableComponent
+} from 'cps-ui-kit';
+import {
+  UwtInspectorKindFilter,
+  UwtInspectorSectionId
+} from '../uwt-inspector.models/uwt-inspector.models';
+import {
+  UWT_DEFAULT_INSPECTOR_CONFIG,
+  UWT_INSPECTOR_SECTIONS,
+  UwtInspectorStore
+} from '../uwt-inspector-store/uwt-inspector-store';
+import { UwtInspectorJsonComponent } from '../uwt-inspector-json/uwt-inspector-json.component';
+import { UwtInspectorFilterBarComponent } from '../uwt-inspector-filter-bar/uwt-inspector-filter-bar.component';
+import {
+  uwtInspectorEventCount,
+  uwtInspectorEventsNoun,
+  UwtInspectorExporter
+} from '../uwt-inspector-export/uwt-inspector-exporter';
+import { uwtInspectorRow } from './uwt-inspector-rows';
+
+/** The kind toggle's labels. */
+const KIND_LABEL: Record<UwtInspectorSectionId, string> = {
+  bi: 'BI',
+  scenario: 'Scenarios',
+  logging: 'Logs'
+};
+
+/**
+ * Every captured event in one table, newest first: a kind toggle with
+ * counts, one search and set of filters for every kind, an Export menu for
+ * the kind shown, and a paginated table whose rows open on the payload.
+ */
+@Component({
+  selector: 'uwt-inspector-timeline',
+  imports: [
+    CpsButtonComponent,
+    CpsButtonToggleComponent,
+    CpsMenuComponent,
+    CpsTableComponent,
+    UwtInspectorJsonComponent,
+    UwtInspectorFilterBarComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './uwt-inspector-timeline.component.html',
+  styleUrl: './uwt-inspector-timeline.component.scss'
+})
+export class UwtInspectorTimelineComponent {
+  protected readonly store = inject(UwtInspectorStore);
+  private readonly exporter = inject(UwtInspectorExporter);
+
+  /** JSON length, in characters, above which a payload is shown truncated. */
+  readonly maxPayloadChars = input(
+    UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView
+  );
+
+  /** Each kind with how many of its events match the filters. */
+  protected readonly kindOptions = computed<CpsButtonToggleOption[]>(() => {
+    const counts = this.store.matchCounts();
+    const all = UWT_INSPECTOR_SECTIONS.reduce((n, id) => n + counts[id], 0);
+    return [
+      { value: 'all', label: `All ${all}` },
+      ...UWT_INSPECTOR_SECTIONS.map((id) => ({
+        value: id,
+        label: `${KIND_LABEL[id]} ${counts[id]}`
+      }))
+    ];
+  });
+
+  protected readonly rows = computed(() =>
+    this.store.filtered().map(uwtInspectorRow)
+  );
+
+  /**
+   * The paginator's offset. Back to the first page, where the newest events
+   * are, when the kind or filters change, or when the rows shrink past it,
+   * as after a clear; otherwise kept while events arrive. The table won't
+   * do this itself: PrimeNG steps back one page at most, so page four
+   * filtered down to one page would show an empty table.
+   */
+  protected readonly first = linkedSignal({
+    source: () => ({
+      rows: this.rows().length,
+      kind: this.store.kind(),
+      filters: this.store.filters()
+    }),
+    computation: (source, previous): number =>
+      previous &&
+      previous.source.kind === source.kind &&
+      previous.source.filters === source.filters &&
+      previous.value < source.rows
+        ? previous.value
+        : 0
+  });
+
+  protected readonly emptyMessage = computed(() => {
+    const kind = this.store.kind();
+    const noun = uwtInspectorEventsNoun(kind);
+    const captured =
+      kind === 'all' ? this.store.total() : this.store.entries()[kind].length;
+    return captured > 0 ? `No ${noun} match the filters.` : `No ${noun} yet.`;
+  });
+
+  /** Fresh arrivals above the page being read, newest first. */
+  protected readonly unseenNew = computed(
+    () =>
+      this.rows()
+        .slice(0, this.first())
+        .filter((r) => this.store.fresh().has(r.sequence)).length
+  );
+
+  protected readonly copyState = signal<'idle' | 'copied' | 'failed'>('idle');
+  protected readonly exportOpen = signal(false);
+  /** What the Export menu says it holds; set as it opens. */
+  protected readonly exportHeader = signal('');
+
+  // No descriptions: cps-menu draws them below text contrast.
+  protected readonly exportItems: CpsMenuItem[] = [
+    { title: 'Copy JSON', icon: 'copy', action: () => this.copy() },
+    { title: 'Download JSON', icon: 'download', action: () => this.download() }
+  ];
+
+  protected setKind(kind: UwtInspectorKindFilter): void {
+    this.store.setKind(kind);
+  }
+
+  protected onPage(state: { first?: number }): void {
+    this.first.set(state?.first ?? 0);
+  }
+
+  protected goToNewest(): void {
+    this.first.set(0);
+  }
+
+  protected toggleExport(menu: CpsMenuComponent, event: Event): void {
+    const kind = this.store.kind();
+    this.exportHeader.set(
+      `${uwtInspectorEventCount(this.store.count(kind).captured, kind)}, with session and user ids`
+    );
+    menu.toggle(event);
+  }
+
+  protected isFresh(sequence: number): boolean {
+    return this.store.fresh().has(sequence);
+  }
+
+  private download(): void {
+    this.exporter.download(this.store.kind());
+  }
+
+  private async copy(): Promise<void> {
+    this.copyState.set(
+      (await this.exporter.copy(this.store.kind())) ? 'copied' : 'failed'
+    );
+    setTimeout(() => this.copyState.set('idle'), 2000);
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index 3e415cd..5268672 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -2,12 +2,22 @@ import { InjectionToken } from '@angular/core';
 import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
 
 /**
- * The three sections of the Event Inspector.
+ * The kinds of event the Event Inspector tells apart: BI events (with any
+ * forwarded event of a type it doesn't recognise), scenarios and their
+ * steps, and logs (with errors mirrored to RUM).
  *
  * @group Types
  */
 export type UwtInspectorSectionId = 'bi' | 'scenario' | 'logging';
 
+/**
+ * What the Event Inspector's timeline shows, and exports: every kind, or
+ * one.
+ *
+ * @group Types
+ */
+export type UwtInspectorKindFilter = 'all' | UwtInspectorSectionId;
+
 /**
  * Where the Event Inspector opens: a dialog over the app, its own browser
  * window, or a pane beside or below the app.
@@ -80,7 +90,10 @@ export interface UwtEventInspectorConfig {
    */
   shortcuts: readonly UwtInspectorShortcut[];
 
-  /** Events kept per section; the oldest are dropped beyond this. */
+  /**
+   * Events kept per kind (BI, scenarios, logs); the oldest of that kind are
+   * dropped beyond this, so a burst of one kind never pushes out another.
+   */
   maxEventsPerSection: number;
 
   /**
@@ -145,18 +158,22 @@ export interface UwtInspectorFilterState {
 }
 
 /**
- * A downloaded JSON file: one section's captured events.
+ * An exported JSON file: the captured events of the kind shown, or of
+ * every kind (`section: 'all'`).
  *
- * `events` holds every event captured in that section, oldest first,
- * regardless of the filters on screen. `activeFilters` records that
- * section's filters, for context; they were not applied to `events`.
+ * `events` holds every event captured of that kind, oldest first,
+ * regardless of the search and filters on screen. `activeFilters` records
+ * them, for context; they were not applied to `events`.
+ *
+ * Version 2 exports the timeline; version 1 exported one of three sections
+ * and never had `'all'`.
  *
  * @group Interfaces
  */
 export interface UwtInspectorExport {
   format: 'ngx-ui-watchtower-event-inspector';
-  formatVersion: 1;
-  section: UwtInspectorSectionId;
+  formatVersion: 2;
+  section: UwtInspectorKindFilter;
   exportedAt: string;
   capture: { startedAt: string; endedAt: string; paused: boolean };
   app: {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index fa5a358..a064acd 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -33,9 +33,13 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
           Capturing since {{ since() }} ·
         }
         {{ store.total() }} event{{ store.total() === 1 ? '' : 's' }}
+        @if (dropped() > 0) {
+          · {{ dropped() }} oldest dropped
+        }
       </p>
       <uwt-inspector-dock-switcher
         [dock]="dock()"
+        [panes]="panesFit()"
         (dockChange)="setDock($event)">
       </uwt-inspector-dock-switcher>
     </div>
@@ -92,14 +96,8 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
     </p>
   }
 
-  <div class="uwt-inspector__sections">
-    @for (section of sections; track section) {
-      <uwt-inspector-section
-        [section]="section"
-        [maxPayloadChars]="maxPayloadChars">
-      </uwt-inspector-section>
-    }
-  </div>
+  <uwt-inspector-timeline [maxPayloadChars]="maxPayloadChars">
+  </uwt-inspector-timeline>
 
   <div class="uwt-inspector__footer">
     <p>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index 7c7a3dd..e0c6db2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -36,6 +36,12 @@
   font-weight: 700;
 }
 
+// cps-dialog spreads its header out, which centres the title between the
+// drag handle and the buttons; the panes and the window keep it left.
+::ng-deep .uwt-inspector-dialog .cps-dialog-header-left {
+  margin-inline: 0.5rem auto;
+}
+
 .uwt-inspector__body {
   display: flex;
   flex-direction: column;
@@ -122,12 +128,6 @@
   color: var(--cps-text-secondary);
 }
 
-.uwt-inspector__sections {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
 .uwt-inspector__footer {
   display: flex;
   flex-direction: column;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 64abacb..44ea8ba 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -1,3 +1,4 @@
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -90,13 +91,47 @@ describe('UwtInspectorComponent', () => {
     }
     return found;
   };
+  /** A button found by its visible text. */
+  const labelled = (label: string) => {
+    const found = Array.from(el().querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === label
+    );
+    if (!found) {
+      throw new Error(`No button labelled "${label}"`);
+    }
+    return found;
+  };
   const text = () => el().textContent?.replace(/\s+/g, ' ') ?? '';
-  const titles = () =>
+  const kindOptions = () =>
     Array.from(
-      el().querySelectorAll('[data-testid="cps-expansion-panel-title"]')
-    ).map((t) => t.textContent?.trim());
+      el().querySelectorAll<HTMLInputElement>('cps-button-toggle input')
+    );
+  const kinds = () => kindOptions().map((i) => i.getAttribute('aria-label'));
   const bodyRows = () =>
-    el().querySelectorAll('td.uwt-inspector-section__time').length;
+    el().querySelectorAll('td.uwt-inspector-timeline__time').length;
+  /** Each shown row's Kind cell, newest first. */
+  const rowKinds = () =>
+    Array.from(
+      el().querySelectorAll('td.uwt-inspector-timeline__time + td')
+    ).map((td) => td.textContent?.trim());
+
+  /** Shows one kind, as choosing it in the kind toggle does. */
+  function showKind(label: string): void {
+    kindOptions()
+      .find((i) => i.getAttribute('aria-label')?.startsWith(`${label} `))
+      ?.click();
+    fixture.detectChanges();
+  }
+
+  /** Opens the Export menu and chooses one of its items. */
+  function exportAs(item: 'Copy JSON' | 'Download JSON'): void {
+    labelled('Export').click();
+    fixture.detectChanges();
+    Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+      .find((i) => i.textContent?.includes(item))
+      ?.click();
+    fixture.detectChanges();
+  }
 
   function settle(): void {
     jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
@@ -143,38 +178,63 @@ describe('UwtInspectorComponent', () => {
     localStorage.removeItem(UWT_INSPECTOR_PREFERENCES_KEY);
   });
 
-  it('should open empty, with three sections and an explanation', () => {
-    expect(titles()).toEqual([
-      'BI telemetry · no events yet',
-      'Scenario telemetry · no events yet',
-      'Logging · no events yet'
-    ]);
+  it('should open empty, with every kind at nought and an explanation', () => {
+    expect(kinds()).toEqual(['All 0', 'BI 0', 'Scenarios 0', 'Logs 0']);
     expect(text()).toContain('Capturing from now.');
-    expect(text()).toContain('No BI events since this window opened.');
+    expect(text()).toContain('No events yet.');
   });
 
-  it('should show events live, in the right section, with the right columns', () => {
+  it('should show every kind live in one timeline, newest first', () => {
     monitor.publish(bi('theme_changed'));
     monitor.publish(scenario);
     monitor.publish(warn);
     settle();
 
-    expect(bodyRows()).toBe(3);
-    expect(titles()[0]).toMatch(/^BI telemetry · 1 · last \d\d:\d\d:\d\d$/);
+    expect(rowKinds()).toEqual(['Log', 'Scenario', 'BI']);
+    expect(kinds()).toEqual(['All 3', 'BI 1', 'Scenarios 1', 'Logs 1']);
     expect(text()).toContain('theme_changed');
     expect(text()).toContain('theme=dark');
     expect(text()).toContain('load-dashboard');
-    expect(text()).toContain('42 ms');
-    expect(text()).toContain('Careful now');
+    expect(text()).toContain('success · 42 ms · 1 step');
+    expect(text()).toContain('warn · Careful now');
     expect(text()).toContain('3 events');
   });
 
-  it('should mark the newest rows as new', () => {
-    monitor.publish(bi('a'));
+  it('should colour a status or level, with the word still written', () => {
+    monitor.publish(scenario);
+    monitor.publish(warn);
     settle();
+
     expect(
-      el().querySelector('td.uwt-inspector-section__time cps-chip')
-    ).not.toBeNull();
+      el().querySelector('.uwt-inspector-timeline__tone--success')?.textContent
+    ).toContain('success');
+    expect(
+      el().querySelector('.uwt-inspector-timeline__tone--warn')?.textContent
+    ).toContain('warn');
+  });
+
+  it('should mark the newest rows as new, for eyes and for screen readers', () => {
+    monitor.publish(bi('a'));
+    settle();
+    const fresh = el().querySelector('td.uwt-inspector-timeline__fresh');
+    expect(fresh?.querySelector('.cps-sr-only')?.textContent).toBe('New: ');
+
+    jest.advanceTimersByTime(3000);
+    fixture.detectChanges();
+    expect(el().querySelector('td.uwt-inspector-timeline__fresh')).toBeNull();
+  });
+
+  it('should count, list and say what is shown when only one kind is', () => {
+    monitor.publish(bi('theme_changed'));
+    monitor.publish(warn);
+    settle();
+
+    showKind('Logs');
+    expect(rowKinds()).toEqual(['Log']);
+
+    showKind('Scenarios');
+    expect(bodyRows()).toBe(0);
+    expect(text()).toContain('No scenario events yet.');
   });
 
   it('should show the full payload when a row is expanded', () => {
@@ -195,35 +255,36 @@ describe('UwtInspectorComponent', () => {
     expect(text()).toContain('telemetry sink');
   });
 
-  it('should filter one section without touching the others', () => {
+  it('should search every kind with one field, counting matches per kind', () => {
     monitor.publish(bi('theme_changed', 'dark'));
     monitor.publish(bi('sidebar_toggled', 'light'));
     monitor.publish(warn);
     settle();
 
-    const search = el().querySelector(
-      'input[aria-label="Search BI telemetry events"]'
-    ) as HTMLInputElement;
-    search.value = 'dark';
-    search.dispatchEvent(new Event('input'));
+    const searches = el().querySelectorAll<HTMLInputElement>(
+      '.uwt-inspector-search input'
+    );
+    expect(searches).toHaveLength(1);
+    expect(searches[0].getAttribute('aria-label')).toBe('Search events');
+    searches[0].value = 'dark';
+    searches[0].dispatchEvent(new Event('input'));
     jest.advanceTimersByTime(200);
     fixture.detectChanges();
 
-    expect(titles()[0]).toMatch(/^BI telemetry · 1 of 2/);
-    // Logging has its own filters, still empty.
-    expect(titles()[2]).toMatch(/^Logging · 1 · /);
-    expect(text()).toContain('Careful now');
+    expect(bodyRows()).toBe(1);
+    expect(kinds()).toEqual(['All 1', 'BI 1', 'Scenarios 0', 'Logs 0']);
+
+    showKind('Logs');
+    expect(text()).toContain('No log events match the filters.');
   });
 
-  it('should give each section its own search field', () => {
-    const labels = Array.from(
-      el().querySelectorAll('.uwt-inspector-search input')
-    ).map((i) => i.getAttribute('aria-label'));
-    expect(labels).toEqual([
-      'Search BI telemetry events',
-      'Search Scenario telemetry events',
-      'Search Logging events'
-    ]);
+  it('should count the oldest events dropped to stay within the limit', () => {
+    fixture.debugElement.injector
+      .get(UwtInspectorStore)
+      .dropped.set({ bi: 2, scenario: 0, logging: 1 });
+    fixture.detectChanges();
+
+    expect(text()).toContain('0 events · 3 oldest dropped');
   });
 
   it('should clear history and keep capturing', () => {
@@ -274,7 +335,7 @@ describe('UwtInspectorComponent', () => {
     expect(text()).not.toContain('Paused at');
   });
 
-  it("should download a section's own events, whatever its filters", () => {
+  it('should export every event of the kind shown, whatever the filters', () => {
     const download = jest
       .spyOn(exportUtil, 'uwtDownloadJson')
       .mockImplementation(() => undefined);
@@ -282,53 +343,82 @@ describe('UwtInspectorComponent', () => {
     monitor.publish(bi('b'));
     monitor.publish(warn);
     settle();
-    // A BI filter hiding one event must not remove it from BI's download.
+    // A search hiding every event must not remove any from the export.
     fixture.debugElement.injector
       .get(UwtInspectorStore)
-      .setText('bi', 'nothing matches this');
+      .setText('nothing matches this');
     fixture.detectChanges();
 
-    button('Download JSON, BI telemetry').click();
+    exportAs('Download JSON');
 
     expect(download).toHaveBeenCalledTimes(1);
     const [, filename, json] = download.mock.calls[0];
     expect(filename).toMatch(
-      /^ngx-ui-watchtower-events-app-bi-\d{8}-\d{6}\.json$/
+      /^ngx-ui-watchtower-events-app-all-\d{8}-\d{6}\.json$/
     );
     const doc = JSON.parse(json);
     expect(doc).toMatchObject({
       format: 'ngx-ui-watchtower-event-inspector',
-      section: 'bi',
+      formatVersion: 2,
+      section: 'all',
       app: { application: 'app' },
-      count: { captured: 2, droppedOldest: 0 },
+      count: { captured: 3, droppedOldest: 0 },
       activeFilters: { text: 'nothing matches this' }
     });
     expect(doc.events.map((e: { kind: string }) => e.kind)).toEqual([
       'bi',
-      'bi'
+      'bi',
+      'log'
     ]);
 
-    button('Download JSON, Logging').click();
+    showKind('Logs');
+    exportAs('Download JSON');
     const logging = JSON.parse(download.mock.calls[1][2]);
+    expect(download.mock.calls[1][1]).toContain('-logging-');
     expect(logging.section).toBe('logging');
     expect(logging.events.map((e: { kind: string }) => e.kind)).toEqual([
       'log'
     ]);
   });
 
-  it("should copy a section's own events as JSON", async () => {
+  it('should say in the Export menu what it holds', async () => {
+    monitor.publish(bi('a'));
+    monitor.publish(warn);
+    settle();
+    showKind('BI');
+
+    labelled('Export').click();
+    fixture.detectChanges();
+    // The menu reports itself shown once its animation starts.
+    await jest.advanceTimersByTimeAsync(0);
+    fixture.detectChanges();
+
+    expect(
+      document.querySelector('[role="menu"]')?.getAttribute('aria-label')
+    ).toBe('1 BI event, with session and user ids');
+    expect(labelled('Export').getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should copy the kind shown as JSON, and say so on the button', async () => {
     const writeText = jest.fn((_text: string) => Promise.resolve());
     Object.assign(navigator, { clipboard: { writeText } });
     monitor.publish(bi('a'));
     monitor.publish(warn);
     settle();
 
-    button('Copy JSON, Logging').click();
-    await Promise.resolve();
+    showKind('Logs');
+    exportAs('Copy JSON');
+    await jest.advanceTimersByTimeAsync(0);
+    fixture.detectChanges();
 
     const doc = JSON.parse(writeText.mock.calls[0][0]);
     expect(doc.section).toBe('logging');
     expect(doc.events).toHaveLength(1);
+    expect(labelled('Copied')).toBeTruthy();
+    expect(announce).toHaveBeenCalledWith(
+      '1 log event copied as JSON.',
+      'polite'
+    );
   });
 
   it('should announce new arrivals politely, at most every ten seconds', () => {
@@ -360,8 +450,9 @@ describe('UwtInspectorComponent', () => {
     jest
       .spyOn(exportUtil, 'uwtDownloadJson')
       .mockImplementation(() => undefined);
-    button('Download JSON, BI telemetry').click();
-    button('Download JSON, Logging').click();
+    exportAs('Download JSON');
+    showKind('Logs');
+    exportAs('Download JSON');
     settle();
 
     expect(seen).toHaveLength(0);
@@ -450,7 +541,11 @@ describe('UwtInspectorComponent', () => {
   });
 
   it('should ask to move to another dock, or to close', () => {
-    const controls = { setDock: jest.fn(), close: jest.fn() };
+    const controls = {
+      setDock: jest.fn(),
+      close: jest.fn(),
+      panesFit: signal(true)
+    };
     TestBed.inject(UwtInspectorSession).controls = controls;
     const dock = (name: string) =>
       el().querySelector<HTMLButtonElement>(`button[data-dock="${name}"]`)!;
@@ -466,6 +561,23 @@ describe('UwtInspectorComponent', () => {
     expect(controls.close).toHaveBeenCalledTimes(1);
   });
 
+  it('should offer no pane when the app has no room for one', () => {
+    TestBed.inject(UwtInspectorSession).controls = {
+      setDock: jest.fn(),
+      close: jest.fn(),
+      panesFit: signal(false)
+    };
+    const narrow = TestBed.createComponent(UwtInspectorComponent);
+    narrow.detectChanges();
+
+    expect(
+      Array.from(
+        (narrow.nativeElement as HTMLElement).querySelectorAll('[data-dock]')
+      ).map((b) => b.getAttribute('data-dock'))
+    ).toEqual(['dialog', 'window']);
+    narrow.destroy();
+  });
+
   it('should keep its history in the session, for the next dock', () => {
     monitor.publish(bi('theme_changed'));
     settle();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index ecf52d9..3ba4ab8 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -29,12 +29,12 @@ import {
   UWT_INSPECTOR_SECTIONS,
   UwtInspectorStore
 } from '../uwt-inspector-store/uwt-inspector-store';
-import { UwtInspectorSectionComponent } from '../uwt-inspector-section/uwt-inspector-section.component';
+import { UwtInspectorTimelineComponent } from '../uwt-inspector-timeline/uwt-inspector-timeline.component';
 import {
   UWT_INSPECTOR_SECTION_NOUN,
   UwtInspectorExporter
 } from '../uwt-inspector-export/uwt-inspector-exporter';
-import { uwtInspectorTime } from '../uwt-inspector-section/uwt-inspector-columns';
+import { uwtInspectorTime } from '../uwt-inspector-timeline/uwt-inspector-rows';
 import {
   UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   uwtIsApplePlatform,
@@ -54,8 +54,8 @@ const ANNOUNCE_EVERY_MS = 10_000;
 /**
  * The Event Inspector's content, shown by {@link UwtEventInspectorService}
  * in a non-modal cps-dialog, a pane or its own window. Capturing is
- * controlled here — pause and clear apply to everything — while each
- * section filters, downloads and copies its own events.
+ * controlled here — pause and clear apply to everything — while the
+ * timeline below shows, filters and exports the events.
  *
  * The captured history belongs to the {@link UwtInspectorSession}, so it
  * survives moving between docks and is discarded on close. Uses no
@@ -70,7 +70,7 @@ const ANNOUNCE_EVERY_MS = 10_000;
     CpsSwitchComponent,
     UwtInspectorDockSwitcherComponent,
     UwtInspectorLogoComponent,
-    UwtInspectorSectionComponent
+    UwtInspectorTimelineComponent
   ],
   providers: [
     {
@@ -111,13 +111,22 @@ export class UwtInspectorComponent {
   /** A pane or window brings no header of its own, so this draws one. */
   protected readonly framed = computed(() => this.dock() !== 'dialog');
 
-  protected readonly sections = UWT_INSPECTOR_SECTIONS;
+  /** Whether the app's window has room for a pane. */
+  protected readonly panesFit =
+    this.session.controls?.panesFit ?? signal(true).asReadonly();
+
   protected readonly maxPayloadChars = this.config.maxPayloadCharsInView;
 
   protected readonly since = computed(() =>
     uwtInspectorTime(this.store.startedAt()).slice(0, 8)
   );
 
+  /** The oldest events dropped to stay within each kind's limit. */
+  protected readonly dropped = computed(() => {
+    const dropped = this.store.dropped();
+    return UWT_INSPECTOR_SECTIONS.reduce((n, id) => n + dropped[id], 0);
+  });
+
   protected readonly pausedAt = computed(() => {
     const at = this.store.pausedAt();
     return at && uwtInspectorTime(at).slice(0, 8);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts b/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
index d1b4690..027cf39 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/public-api.ts
@@ -12,6 +12,7 @@ export {
   UwtInspectorFieldFilter,
   UwtInspectorFilterOperator,
   UwtInspectorFilterState,
+  UwtInspectorKindFilter,
   UwtInspectorSectionId,
   UwtInspectorShortcut,
   UwtEventInspectorConfig

From 425c46048fee474671ef0f91299c8c9b5847ab44 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 6 Nov 2026 16:17:54 +0100
Subject: [PATCH 20/51] inspector workflows

---
 README.md                                     |   9 +-
 playwright/a11y.spec.ts                       |  24 ++-
 playwright/inspector-tools.spec.ts            | 129 +++++++++++++++-
 projects/ngx-ui-watchtower/DESIGN.md          |  34 ++++-
 projects/ngx-ui-watchtower/README.md          |   8 +
 .../uwt-event-inspector.service.spec.ts       |  57 +++++++
 .../uwt-event-inspector.service.ts            |  24 +--
 ...uwt-inspector-dock-switcher.component.scss |  11 ++
 .../uwt-inspector-filter-bar.component.html   |  29 +++-
 .../uwt-inspector-filter-bar.component.scss   |  38 +++++
 ...uwt-inspector-filter-bar.component.spec.ts |  55 ++++++-
 .../uwt-inspector-filter-bar.component.ts     |  39 ++++-
 .../uwt-inspector-filter.spec.ts              |   9 ++
 .../uwt-inspector-filter.ts                   |  41 ++++++
 .../uwt-inspector-ring.spec.ts                | 101 +++++++++++++
 .../uwt-inspector-ring/uwt-inspector-ring.ts  |  86 +++++++++++
 .../uwt-inspector-store.spec.ts               |  21 +++
 .../uwt-inspector-store.ts                    |  37 ++++-
 .../uwt-inspector-rows.spec.ts                |  21 ++-
 .../uwt-inspector-rows.ts                     |  34 ++++-
 .../uwt-inspector-timeline.component.html     |  46 +++++-
 .../uwt-inspector-timeline.component.scss     |  36 +++++
 .../uwt-inspector-timeline.component.spec.ts  | 139 +++++++++++++++++-
 .../uwt-inspector-timeline.component.ts       | 104 ++++++++++++-
 .../uwt-inspector.models.ts                   |  11 ++
 .../uwt-inspector.component.html              |   3 +-
 .../uwt-inspector.component.scss              |   9 ++
 .../uwt-inspector.component.spec.ts           |   2 +-
 .../watchtower-lab/src/lab/lab-options.ts     |   5 +-
 29 files changed, 1099 insertions(+), 63 deletions(-)
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.spec.ts
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.ts

diff --git a/README.md b/README.md
index 5917c66..9653203 100644
--- a/README.md
+++ b/README.md
@@ -131,10 +131,11 @@ flushing, server rendering and hydration, both fragment pages, two tabs on
 their own channels or one shared, a custom destination, every broker mode
 and RUM's start-up and refresh, RUM's telemetries, the library's settings
 through `?config=`, the debug flags, and the Event Inspector's docks,
-shortcut, pause, kinds, search, filters, export, paging and resizing. It also
-runs axe-core's WCAG 2.2 A and AA rules on every lab page and on the Event
-Inspector with its Export menu open, and measures the contrast of its
-coloured statuses and levels. Internal edge
+shortcut, pause, kinds, search, filters, export, paging, resizing, links
+between an error and its log event, and events kept from before opening. It
+also runs axe-core's WCAG 2.2 A and AA rules on every lab page and on the
+Event Inspector with its Export menu and filter help open, measures the
+contrast of its coloured text, and checks its states under forced colours. Internal edge
 cases — timers longer than 24 days, giving up after five minutes, no Web
 Locks or storage, message validation, start-up errors — are left to the unit
 tests.
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index cdd0087..d5af772 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -65,7 +65,7 @@ for (const path of PAGES) {
   });
 }
 
-test('the Event Inspector with events, a row open, a filter being built and the Export menu open: no violations, and readable colours', async ({
+test('the Event Inspector with events, rows open, a filter being built with its help, and the Export menu open: no violations, and readable colours', async ({
   page
 }) => {
   await page.addInitScript(() =>
@@ -80,12 +80,16 @@ test('the Event Inspector with events, a row open, a filter being built and the
   await press(page, 'An unknown event type');
   await press(page, 'A 300,000-character payload');
   const timeline = page.locator('uwt-inspector-timeline');
-  await timeline
-    .locator('tbody tr', { hasText: 'lab_huge_payload' })
-    .getByRole('button', { name: 'Expand row' })
-    .click();
+  for (const row of ['lab_huge_payload', '→ RUM']) {
+    await timeline
+      .locator('tbody tr', { hasText: row })
+      .getByRole('button', { name: 'Expand row' })
+      .click();
+  }
   await page.getByRole('button', { name: 'Add filter' }).click();
+  await page.getByText('How filters work').click();
   await expect(timeline).toContainText('Large payload: showing the first');
+  await expect(timeline).toContainText('Mirrored from');
   // Past the new-row tint, so contrast is measured on the usual rows.
   await page.waitForTimeout(3500);
 
@@ -96,9 +100,13 @@ test('the Event Inspector with events, a row open, a filter being built and the
       await contrastOf(page, `.uwt-inspector-timeline__tone--${tone}`)
     ).toBeGreaterThanOrEqual(4.5);
   }
-  expect(
-    await contrastOf(page, '.uwt-inspector-json__notice')
-  ).toBeGreaterThanOrEqual(4.5);
+  for (const text of [
+    '.uwt-inspector-json__notice',
+    '.uwt-inspector-timeline__link',
+    '.uwt-inspector-filter-bar__help summary'
+  ]) {
+    expect(await contrastOf(page, text)).toBeGreaterThanOrEqual(4.5);
+  }
 
   await timeline.getByRole('button', { name: 'Export' }).click();
   // Once it has faded in: mid-fade, its text is too faint to measure.
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
index e677d03..244cb1e 100644
--- a/playwright/inspector-tools.spec.ts
+++ b/playwright/inspector-tools.spec.ts
@@ -1,5 +1,5 @@
 import { readFile } from 'node:fs/promises';
-import { expect, openLab, Page, press, showKind, test } from './lab';
+import { expect, Locator, openLab, Page, press, showKind, test } from './lab';
 
 /** Opens the lab's Event Inspector page, and the inspector in `dock`. */
 async function openInspector(page: Page, dock = 'right'): Promise<void> {
@@ -50,7 +50,7 @@ test('pause holds new events back until Resume, and Clear empties it', async ({
   await expect(events).toContainText('com.example.custom');
 
   await page.getByRole('button', { name: 'Clear captured events' }).click();
-  await expect(inspector).toContainText('Capturing from now.');
+  await expect(inspector).toContainText('Use the app to generate events');
   await expect(events).not.toContainText('com.example.custom');
 });
 
@@ -74,7 +74,7 @@ test('one search and set of filters narrow every kind, until cleared; the kind t
   await page.getByRole('button', { name: 'Add filter' }).click();
   const builder = page.getByRole('group', { name: 'New filter' });
   await builder.getByRole('combobox', { name: 'Field' }).click();
-  await page.getByRole('option', { name: 'eventType', exact: true }).click();
+  await page.getByRole('option', { name: /^Event type/ }).click();
   await builder.getByRole('textbox', { name: 'Value' }).fill('com.example');
   await builder.getByRole('button', { name: 'Add', exact: true }).click();
   await expect(events).not.toContainText('lab_button_clicked');
@@ -222,12 +222,131 @@ test('a blocked window falls back to the dialog, and says so once', async ({
   ).toHaveLength(1);
 });
 
-test('a mirrored error links back to its log event', async ({ page }) => {
+test('a mirrored error links to its log event, which links back', async ({
+  page
+}) => {
   await openInspector(page);
   await press(page, 'One of each kind');
   await rows(page)
     .filter({ hasText: '→ RUM' })
     .getByRole('button', { name: 'Expand row' })
     .click();
-  await expect(timeline(page)).toContainText(/Mirrored from\s*log event #\d+/);
+  const link = timeline(page).getByRole('button', {
+    name: /^log event #\d+$/
+  });
+  const log = (await link.textContent())!.match(/\d+/)![0];
+
+  await link.click();
+  await expect(
+    page.getByRole('region', { name: `Payload of event #${log}` })
+  ).toBeFocused();
+  await expect(timeline(page)).toContainText(/Mirrored to RUM as\s*event #\d+/);
+});
+
+test('an open row filters by its own values; the builder names fields, finds them by path, explains itself and closes on Add', async ({
+  page
+}) => {
+  await openInspector(page);
+  await press(page, 'One of each kind');
+  const events = timeline(page);
+  await rows(page)
+    .filter({ hasText: 'lab_button_clicked' })
+    .getByRole('button', { name: 'Expand row' })
+    .click();
+  await page
+    .getByRole('group', { name: 'Filter by' })
+    .getByRole('button', { name: 'Event name: lab_button_clicked' })
+    .click();
+  await expect(
+    page.getByRole('button', {
+      name: 'Remove filter eventName equals "lab_button_clicked"'
+    })
+  ).toBeVisible();
+  await expect(events).not.toContainText('lab-happy-path');
+  await page.getByRole('button', { name: 'Clear filters' }).click();
+
+  await page.getByRole('button', { name: 'Add filter' }).click();
+  const builder = page.getByRole('group', { name: 'New filter' });
+  await builder.getByRole('combobox', { name: 'Field' }).click();
+  await page.keyboard.type('scenarioName');
+  // Found by its path, shown by its name.
+  await page.getByRole('option', { name: /^Scenario/ }).click();
+  await builder.getByRole('textbox', { name: 'Value' }).fill('happy');
+
+  await page.getByText('How filters work').click();
+  await expect(page.getByText('shows that event only')).toBeVisible();
+
+  await builder.getByRole('button', { name: 'Add', exact: true }).click();
+  await expect(builder).toBeHidden();
+  await expect(page.getByRole('button', { name: 'Add filter' })).toBeFocused();
+  await expect(events).toContainText('lab-happy-path');
+  await expect(events).not.toContainText('lab_button_clicked');
+});
+
+test('captureBeforeOpen shows what was sent before opening, and keeps on while closed, until Clear', async ({
+  page
+}) => {
+  await page.addInitScript(() =>
+    localStorage.setItem(
+      'ngx-ui-watchtower.eventInspector',
+      JSON.stringify({ dock: 'right' })
+    )
+  );
+  await openLab(page, 'inspector', { inspector: { captureBeforeOpen: 50 } });
+  await press(page, 'One of each kind');
+
+  await page.locator('.lab-header-button').click();
+  await expect(timeline(page)).toContainText('lab_button_clicked');
+
+  await press(page, 'Close');
+  await press(page, 'An unknown event type');
+  await page.locator('.lab-header-button').click();
+  await expect(timeline(page)).toContainText('com.example.custom');
+  await expect(timeline(page)).toContainText('lab_button_clicked');
+
+  await page.getByRole('button', { name: 'Clear captured events' }).click();
+  await press(page, 'Close');
+  await page.locator('.lab-header-button').click();
+  await expect(page.locator('uwt-inspector')).toContainText('0 events');
+});
+
+test('in forced colours, the dock, the kind shown, Pause and solid buttons keep their state and edges', async ({
+  page,
+  browserName
+}) => {
+  test.skip(
+    browserName !== 'chromium',
+    'Playwright emulates forced colours in Chromium only'
+  );
+  await page.emulateMedia({ forcedColors: 'active' });
+  await openInspector(page);
+  const css = (locator: Locator, property: string, pseudo?: string) =>
+    locator.evaluate(
+      (e, [p, ps]) => getComputedStyle(e, ps).getPropertyValue(p as string),
+      [property, pseudo] as const
+    );
+
+  // The system's selection colour, as this page resolves it.
+  const highlight = await page.evaluate(() => {
+    const probe = document.body.appendChild(document.createElement('div'));
+    probe.style.cssText = 'forced-color-adjust: none; background: Highlight';
+    const colour = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    return colour;
+  });
+
+  const dock = (side: string) => page.locator(`[data-dock="${side}"]`);
+  expect(await css(dock('right'), 'background-color')).toBe(highlight);
+  expect(await css(dock('left'), 'background-color')).not.toBe(highlight);
+  const kinds = page.locator('uwt-inspector cps-button-toggle label');
+  expect(await css(kinds.nth(0), 'background-color')).toBe(highlight);
+  expect(await css(kinds.nth(1), 'background-color')).not.toBe(highlight);
+  const knob = page.locator('uwt-inspector .cps-switch-slider');
+  expect(parseFloat(await css(knob, 'border-top-width', '::before'))).toBe(7);
+
+  await page.getByRole('button', { name: 'Add filter' }).click();
+  const add = page
+    .getByRole('group', { name: 'New filter' })
+    .getByRole('button', { name: 'Add', exact: true });
+  expect(parseFloat(await css(add, 'border-top-width'))).toBeGreaterThan(0);
 });
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index e7d5f78..2cc170b 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -1663,7 +1663,8 @@ convention, for an application that wants the pre-fallback behavior back.
   that if initialization never completes. The telemetry monitor costs one
   check per event while nobody watches; the popup keeps at most 500 events
   of each kind, updates the screen at most every 250 ms, and releases
-  everything when it closes.
+  everything when it closes. Only `captureBeforeOpen` watches from startup,
+  keeping at most as many events as the popup would.
 
 The console report is itself wrapped in a try/catch — an application that has
 patched or otherwise broken `console.error` cannot turn a suppressed
@@ -2175,8 +2176,8 @@ provideUwtEventInspector({
 
 #### What it shows
 
-One timeline of everything sent from the moment the popup opens, newest
-first: BI events, scenarios and their steps, and log records with the errors
+One timeline of everything sent from the moment the popup opens — or from
+the app's start, with `captureBeforeOpen` — newest first: BI events, scenarios and their steps, and log records with the errors
 they mirror to RUM. Each row shows the time, the kind, a name and the
 details — a BI event's first metadata, a scenario's status, duration and
 steps, a log's level and message — with a status or level coloured as well
@@ -2186,6 +2187,13 @@ that it is new. The table always fits the popup: a long value ends in an
 ellipsis, and hovering shows it in full. Expand a row for the full payload
 as JSON; its **Copy event** puts that one payload on the clipboard.
 
+An open row offers to **Filter by** its key values: a BI event's name and
+feature, a scenario's or step's name and status, a log's logger and level.
+An error mirrored to RUM links to the log event it came from, and the log
+event back to it. Following a link turns to that event's page, opens it and
+moves focus to its payload, clearing the search and filters first if they
+hide it.
+
 It shows 25 rows a page, with a pager once there is more than one. On a
 later page, a notice counts the new events at the top, with **Go to
 newest**.
@@ -2202,8 +2210,10 @@ The tools above the table:
   interleaved again.
 - **Search** matches any field's value or name, in every kind. **Add
   filter** compares one field — `metadata.theme`, `status`, or
-  `steps[].name` for any item of a list. Field suggestions come from the
-  events of the kind shown.
+  `steps[].name` for any item of a list — chosen by name, such as "Event
+  name", with its path below, which finds it too. The fields offered come
+  from the events of the kind shown. It closes once the filter is added,
+  and **How filters work**, beside it, explains them with examples.
 
 Two controls at the top apply to everything, because they are about
 capturing rather than viewing:
@@ -2224,9 +2234,20 @@ Each kind keeps its latest 500 events (`maxEventsPerSection`), so a burst
 of one never pushes out another; the status line counts the oldest dropped.
 History is discarded when the popup closes.
 
+To see what happened before it opened, set `captureBeforeOpen`: from the
+app's start, it keeps up to that many events of each kind, which the popup
+shows on opening, with "capturing since" the start. They keep coming while
+the popup is closed; **Clear** empties them too. The cost is a copy of every
+event handed over, from startup, popup open or not — why it is off by
+default.
+
+Under forced colours, such as Windows' contrast themes, the current dock,
+the kind shown, the Pause switch and solid buttons keep the marks that show
+their state, in the system's colours.
+
 What it does **not** show:
 
-- Anything before the popup opened.
+- Anything before the popup opened, unless `captureBeforeOpen` kept it.
 - RUM's own automatic events — page views, web vitals, HTTP and JS errors —
   which never pass through this library.
 - Whether the server accepted an event. It shows what was handed to the sink
@@ -2245,6 +2266,7 @@ each marked with `↪` and the fragment's name.
 | `shortcuts`             | `UWT_DEFAULT_INSPECTOR_SHORTCUTS` | Replaces the defaults; `[]` disables the keyboard                                                                                          |
 | `maxEventsPerSection`   | `500`                             | Events kept of each kind — BI, scenarios, logs; the oldest are dropped, and the status line counts them                                    |
 | `maxPayloadCharsInView` | `262144` (256 × 1024)             | A payload whose JSON is longer is shown truncated to its first `maxPayloadCharsInView` characters, at most 65,536; downloads stay complete |
+| `captureBeforeOpen`     | `0`                               | Events of each kind kept from the app's start, for the popup to show on opening; at most `maxEventsPerSection`, and copied from startup    |
 
 Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
 limit protects rendering, which costs by the length of the text. A cut never
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index ce00357..8eb1c34 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -377,6 +377,14 @@ and JSON export. It opens as a dialog, with a Transparency slider; its Dock
 buttons move it to its own window or a pane on the left, right or bottom (on a
 screen at least 640px wide).
 
+To also see what happened before you opened it, keep the latest events from
+the app's start — at the cost of copying every event handed over, popup open
+or not:
+
+```ts
+provideUwtEventInspector({ captureBeforeOpen: 100 }); // per kind
+```
+
 A pane pushes the page aside, but elements fixed to the window stay put. To
 keep them beside the pane, use the size it publishes on `<html>`
 (`--uwt-inspector-inset-left`, `-right` or `-bottom`):
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 608e982..45edf0e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -15,6 +15,7 @@ import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component'
 import { UWT_INSPECTOR_PREFERENCES_KEY } from '../uwt-inspector-preferences/uwt-inspector-preferences';
 import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
 import * as windowHost from '../uwt-inspector-window/uwt-inspector-window';
+import { UwtInspectorRing } from '../uwt-inspector-ring/uwt-inspector-ring';
 import { UwtEventInspectorService } from './uwt-event-inspector.service';
 
 /** Stands in for CpsDialogService, recording what was opened. */
@@ -376,6 +377,62 @@ describe('UwtEventInspectorService', () => {
     expect(host.focus).toHaveBeenCalledTimes(2);
   });
 
+  describe('captureBeforeOpen', () => {
+    const bi = (name: string) => ({
+      kind: 'bi' as const,
+      eventType: 'com.uwt.bi',
+      payload: { eventName: name, eventTime: '', application: 'shop' },
+      destination: 'sink' as const,
+      origin: { forwarded: false as const }
+    });
+    const monitor = () => TestBed.inject(UwtTelemetryMonitor);
+
+    it('should keep events from before opening, even with no shortcut', () => {
+      const service = create({ captureBeforeOpen: 5, shortcuts: [] });
+      service.install();
+      monitor().publish(bi('before'));
+
+      service.open();
+      expect(
+        TestBed.inject(UwtInspectorSession).store.entries().bi
+      ).toHaveLength(1);
+    });
+
+    it('should keep them coming after closing, for the next opening', () => {
+      const service = create({ captureBeforeOpen: 5 });
+      service.install();
+      service.open();
+      service.close();
+      expect(monitor().observed).toBe(true);
+
+      monitor().publish(bi('while closed'));
+      service.open();
+      expect(
+        TestBed.inject(UwtInspectorSession).store.entries().bi
+      ).toHaveLength(1);
+    });
+
+    it('should keep no more of each kind than the inspector shows', () => {
+      create({ captureBeforeOpen: 50, maxEventsPerSection: 2 }).install();
+      ['a', 'b', 'c'].forEach((n) => monitor().publish(bi(n)));
+
+      expect(TestBed.inject(UwtInspectorRing).snapshot().events).toHaveLength(
+        2
+      );
+    });
+
+    it('should keep nothing by default, when disabled, or on the server', () => {
+      create().install();
+      expect(monitor().observed).toBe(false);
+
+      create({ captureBeforeOpen: 5, enabled: false }).install();
+      expect(monitor().observed).toBe(false);
+
+      create({ captureBeforeOpen: 5 }, 'server').install();
+      expect(monitor().observed).toBe(false);
+    });
+  });
+
   describe('on a screen too narrow for a pane', () => {
     let change: ((event: { matches: boolean }) => void) | undefined;
     /** Whether the app's window is narrower than 640px right now. */
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 46be0fe..525492a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -31,6 +31,7 @@ import {
   UwtInspectorSession
 } from '../uwt-inspector-session/uwt-inspector-session';
 import { UwtInspectorPreferenceStorage } from '../uwt-inspector-preferences/uwt-inspector-preferences';
+import { UwtInspectorRing } from '../uwt-inspector-ring/uwt-inspector-ring';
 import {
   uwtSafe,
   uwtSafeVoid
@@ -68,6 +69,7 @@ export class UwtEventInspectorService {
   private readonly destroyRef = inject(DestroyRef);
   private readonly session = inject(UwtInspectorSession);
   private readonly preferences = inject(UwtInspectorPreferenceStorage);
+  private readonly ring = inject(UwtInspectorRing);
   private readonly identity = inject(UWT_TELEMETRY_IDENTITY, {
     optional: true
   });
@@ -109,20 +111,24 @@ export class UwtEventInspectorService {
   }
 
   /**
-   * Starts listening for the shortcut. Called by
-   * {@link provideUwtEventInspector}; does nothing on the server,
-   * when disabled, with no shortcuts, or when already listening.
+   * Starts listening for the shortcut, and keeping events from before
+   * opening when `captureBeforeOpen` asks for it. Called by
+   * {@link provideUwtEventInspector}; does nothing on the server, when
+   * disabled, or a second time.
    */
   install(): void {
-    if (
-      this.installed ||
-      !this.isBrowser ||
-      !this.enabled ||
-      this.config.shortcuts.length === 0
-    ) {
+    if (this.installed || !this.isBrowser || !this.enabled) {
       return;
     }
     this.installed = true;
+    uwtSafeVoid('captureBeforeOpen', () =>
+      this.ring.start(
+        Math.min(this.config.captureBeforeOpen, this.config.maxEventsPerSection)
+      )
+    );
+    if (this.config.shortcuts.length === 0) {
+      return;
+    }
 
     // Capture phase, so it works even where a component stops propagation.
     // Outside Angular's zone, so ordinary typing triggers no change detection.
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
index 0aa61fb..7999646 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
@@ -68,3 +68,14 @@
     stroke: none;
   }
 }
+
+// Forced colours drop the fill that marks the current dock: it takes the
+// system's selection colours instead.
+@media (forced-colors: active) {
+  .uwt-inspector-dock__option[aria-pressed='true'] {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index ca577cc..d0f76c8 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -11,6 +11,7 @@
       (valueChanged)="onSearch($event)">
     </cps-input>
     <cps-button
+      #addFilter
       type="outlined"
       size="small"
       icon="filter-funnel"
@@ -18,10 +19,6 @@
       [ariaExpanded]="builderOpen()"
       (clicked)="builderOpen.set(!builderOpen())">
     </cps-button>
-    <cps-info-circle
-      tooltipMaxWidth="20rem"
-      tooltipText="Search matches any field's value or name, ignoring case. A filter compares one field, such as metadata.theme. Use steps[].name to match any item of a list, or steps[2].name for one. All filters must match. Export always contains every event captured of the kind shown, whatever the filters.">
-    </cps-info-circle>
   </div>
 
   @if (builderOpen()) {
@@ -35,6 +32,7 @@
         label="Field"
         placeholder="Choose a field"
         [options]="pathOptions()"
+        [withOptionsAliases]="true"
         [returnObject]="false"
         [hideDetails]="true"
         [value]="path()"
@@ -66,6 +64,29 @@
         (clicked)="add()">
       </cps-button>
     </div>
+    <!-- Beside the fields, not among them: Enter here opens it, never adds. -->
+    <details class="uwt-inspector-filter-bar__help">
+      <summary>How filters work</summary>
+      <p>
+        Search matches any field's value or name, ignoring case. A filter
+        compares one field, and every filter must match. For example:
+      </p>
+      <ul>
+        <li>
+          <strong>Event name</strong> equals <code>theme_changed</code> shows
+          that event only.
+        </li>
+        <li>
+          <strong>Step name</strong> contains <code>pay</code> shows scenarios
+          with any step like it; its path, <code>steps[].name</code>, covers
+          every step, and <code>steps[2].name</code> only the third.
+        </li>
+      </ul>
+      <p>
+        Filters narrow what is shown. Export still holds every event captured of
+        the kind shown.
+      </p>
+    </details>
   }
 
   @if (chips().length > 0 || anyActive()) {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
index e085183..d96dd54 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
@@ -50,3 +50,41 @@
   padding: 0;
   list-style: none;
 }
+
+.uwt-inspector-filter-bar__help {
+  font-size: 0.8125rem;
+  color: var(--cps-text-primary);
+
+  summary {
+    width: fit-content;
+    color: var(--cps-color-calm);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--cps-ring-color);
+      outline-offset: 2px;
+    }
+  }
+
+  p,
+  ul {
+    max-width: 75ch;
+    margin: 0.375rem 0 0;
+  }
+
+  ul {
+    padding-inline-start: 1.25rem;
+  }
+
+  code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+}
+
+// In forced colours a solid button loses its fill, and with it its edge.
+// Specific enough to beat cps-button's own `border: 0`.
+@media (forced-colors: active) {
+  :host ::ng-deep cps-button button.cps-button.cps-button--solid {
+    border: 0.0625rem solid ButtonText;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
index b6b7719..6db0e94 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
@@ -8,13 +8,20 @@ describe('UwtInspectorFilterBarComponent', () => {
   let store: UwtInspectorStore;
   const bar = () =>
     fixture.componentInstance as unknown as {
-      builderOpen: { set(v: boolean): void };
+      builderOpen: { (): boolean; set(v: boolean): void };
       onPath(v: unknown): void;
       onOperator(v: unknown): void;
       value: { set(v: string): void };
       add(): void;
       canAdd(): boolean;
+      pathOptions(): {
+        label: string;
+        value: string;
+        info: string;
+        alias: string;
+      }[];
     };
+  const el = () => fixture.nativeElement as HTMLElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -26,6 +33,52 @@ describe('UwtInspectorFilterBarComponent', () => {
     fixture.detectChanges();
   });
 
+  it('should offer fields by name, with the path below, found by either', () => {
+    expect(bar().pathOptions()).toContainEqual({
+      label: 'Forwarded from',
+      value: 'origin.application',
+      info: 'origin.application',
+      alias: 'origin.application'
+    });
+    expect(bar().pathOptions()).toContainEqual({
+      label: 'Time handed over',
+      value: 'capturedAt',
+      info: 'capturedAt',
+      alias: 'capturedAt'
+    });
+  });
+
+  it('should close after adding, ready for the next, with focus back on Add filter', () => {
+    bar().builderOpen.set(true);
+    fixture.detectChanges();
+    bar().onPath('kind');
+    bar().onOperator('exists');
+    bar().add();
+    fixture.detectChanges();
+    TestBed.tick();
+
+    expect(bar().builderOpen()).toBe(false);
+    expect(el().querySelector('[aria-label="New filter"]')).toBeNull();
+    expect(document.activeElement?.textContent?.trim()).toBe('Add filter');
+
+    bar().builderOpen.set(true);
+    fixture.detectChanges();
+    expect(bar().canAdd()).toBe(false); // nothing carried over
+  });
+
+  it('should explain how filters work beside the builder', () => {
+    expect(el().querySelector('details')).toBeNull();
+    bar().builderOpen.set(true);
+    fixture.detectChanges();
+
+    const help = el().querySelector('details');
+    expect(help?.querySelector('summary')?.textContent).toBe(
+      'How filters work'
+    );
+    // Not inside the fields' group, where Enter adds the filter.
+    expect(help?.closest('[aria-label="New filter"]')).toBeNull();
+  });
+
   it('should need a field, and a value unless checking presence', () => {
     bar().builderOpen.set(true);
     fixture.detectChanges();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
index 1c9a051..05dc6da 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
@@ -1,16 +1,19 @@
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   computed,
   DestroyRef,
+  ElementRef,
   inject,
-  signal
+  Injector,
+  signal,
+  viewChild
 } from '@angular/core';
 import {
   CpsAutocompleteComponent,
   CpsButtonComponent,
   CpsChipComponent,
-  CpsInfoCircleComponent,
   CpsInputComponent,
   CpsSelectComponent
 } from 'cps-ui-kit';
@@ -18,6 +21,7 @@ import { UwtInspectorFilterOperator } from '../uwt-inspector.models/uwt-inspecto
 import { UwtInspectorStore } from '../uwt-inspector-store/uwt-inspector-store';
 import {
   uwtDescribeFilter,
+  uwtFieldName,
   uwtOperatorNeedsValue
 } from '../uwt-inspector-filter/uwt-inspector-filter';
 
@@ -35,8 +39,7 @@ const SEARCH_DEBOUNCE_MS = 150;
     CpsAutocompleteComponent,
     CpsSelectComponent,
     CpsButtonComponent,
-    CpsChipComponent,
-    CpsInfoCircleComponent
+    CpsChipComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './uwt-inspector-filter-bar.component.html',
@@ -64,8 +67,17 @@ export class UwtInspectorFilterBarComponent {
 
   protected readonly value = signal('');
 
+  /** Each field by name, its path below it; either finds it. */
   protected readonly pathOptions = computed(() =>
-    this.store.knownPaths().map((p) => ({ label: p, value: p }))
+    this.store.knownPaths().map((path) => {
+      const name = uwtFieldName(path);
+      return {
+        label: name,
+        value: path,
+        info: name === path ? '' : path,
+        alias: path
+      };
+    })
   );
 
   protected readonly needsValue = computed(() =>
@@ -88,6 +100,11 @@ export class UwtInspectorFilterBarComponent {
     return !!f.text.trim() || f.fields.length > 0;
   });
 
+  private readonly injector = inject(Injector);
+  private readonly addFilterButton = viewChild('addFilter', {
+    read: ElementRef
+  });
+
   private searchTimer?: ReturnType<typeof setTimeout>;
 
   constructor() {
@@ -120,7 +137,19 @@ export class UwtInspectorFilterBarComponent {
       operator: this.operator(),
       value: this.needsValue() ? this.value().trim() : ''
     });
+    // Done: the builder closes, ready for the next one, and focus goes
+    // back to the button that opened it.
+    this.builderOpen.set(false);
+    this.path.set('');
+    this.operator.set('contains');
     this.value.set('');
+    afterNextRender(
+      () =>
+        (this.addFilterButton()?.nativeElement as HTMLElement | undefined)
+          ?.querySelector('button')
+          ?.focus(),
+      { injector: this.injector }
+    );
   }
 
   protected clearAll(): void {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
index 59a66b0..f2db150 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
@@ -5,6 +5,7 @@ import {
 } from '../uwt-inspector.models/uwt-inspector.models';
 import {
   uwtDescribeFilter,
+  uwtFieldName,
   uwtInspectorSectionOf,
   uwtFlattenEvent,
   uwtKnownPaths,
@@ -230,4 +231,12 @@ describe('helpers', () => {
     expect(paths).toContain('steps[].name');
     expect(new Set(paths).size).toBe(paths.length);
   });
+
+  it("should name the library's own fields, and metadata, for people", () => {
+    expect(uwtFieldName('eventName')).toBe('Event name');
+    expect(uwtFieldName('steps[].name')).toBe('Step name');
+    expect(uwtFieldName('metadata.theme')).toBe('Metadata: theme');
+    // An app's own field keeps its path.
+    expect(uwtFieldName('details.cart.items')).toBe('details.cart.items');
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
index dacebd6..ceb2b37 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
@@ -154,6 +154,47 @@ function matchesField(
   }
 }
 
+/** The library's own fields as people read them; others keep their path. */
+const FIELD_NAMES: Record<string, string> = {
+  kind: 'Kind',
+  eventType: 'Event type',
+  destination: 'Handed to',
+  'origin.application': 'Forwarded from',
+  capturedAt: 'Time handed over',
+  eventName: 'Event name',
+  feature: 'Feature',
+  scenarioId: 'Scenario id',
+  scenarioName: 'Scenario',
+  name: 'Name',
+  status: 'Status',
+  delta: 'Duration (ms)',
+  stepDelta: 'Step duration (ms)',
+  stepCount: 'Step count',
+  'steps[].name': 'Step name',
+  'steps[].status': 'Step status',
+  level: 'Level',
+  logger: 'Logger',
+  message: 'Message',
+  context: 'Context',
+  correlationId: 'Correlation id',
+  'error.name': 'Error name',
+  'error.message': 'Error message',
+  application: 'Application',
+  environment: 'Environment',
+  version: 'Version',
+  sessionId: 'Session id',
+  userId: 'User id'
+};
+
+/**
+ * A field path as people read it: `eventName` is "Event name", and
+ * `metadata.theme` is "Metadata: theme". Other paths are left as they are.
+ */
+export function uwtFieldName(path: string): string {
+  const metadata = /^metadata\.(.+)$/.exec(path);
+  return FIELD_NAMES[path] ?? (metadata ? `Metadata: ${metadata[1]}` : path);
+}
+
 const OPERATOR_TEXT: Record<UwtInspectorFilterOperator, string> = {
   contains: 'contains',
   equals: 'equals',
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.spec.ts
new file mode 100644
index 0000000..3e28a3a
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.spec.ts
@@ -0,0 +1,101 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  UwtTelemetryMonitor,
+  UwtTelemetryPublishInput
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtInspectorRing } from './uwt-inspector-ring';
+
+const bi = (name: string): UwtTelemetryPublishInput => ({
+  kind: 'bi',
+  eventType: 'com.uwt.bi',
+  payload: { eventName: name, eventTime: '', application: 'app' },
+  destination: 'sink',
+  origin: { forwarded: false }
+});
+
+const log = (message: string): UwtTelemetryPublishInput => ({
+  kind: 'log',
+  payload: {
+    timestamp: '',
+    level: 'log',
+    message,
+    application: 'app',
+    environment: 'test',
+    version: '1'
+  },
+  destination: 'log-provider',
+  origin: { forwarded: false }
+});
+
+describe('UwtInspectorRing', () => {
+  let monitor: UwtTelemetryMonitor;
+  let ring: UwtInspectorRing;
+
+  const names = () =>
+    ring
+      .snapshot()
+      .events.map((e) =>
+        e.kind === 'bi'
+          ? (e.payload as { eventName: string }).eventName
+          : (e.payload as { message: string }).message
+      );
+
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    monitor = TestBed.inject(UwtTelemetryMonitor);
+    ring = TestBed.inject(UwtInspectorRing);
+  });
+
+  it('should observe nothing until started, nor when asked for none', () => {
+    expect(monitor.observed).toBe(false);
+    ring.start(0);
+    expect(monitor.observed).toBe(false);
+
+    ring.start(5);
+    expect(monitor.observed).toBe(true);
+  });
+
+  it('should keep the latest of each kind, oldest first, counting drops', () => {
+    ring.start(2);
+    ['a', 'b', 'c'].forEach((n) => monitor.publish(bi(n)));
+    monitor.publish(log('kept'));
+
+    expect(names()).toEqual(['b', 'c', 'kept']);
+    expect(ring.snapshot().dropped).toEqual({ bi: 1, scenario: 0, logging: 0 });
+  });
+
+  it('should start once, keeping its first limit', () => {
+    ring.start(1);
+    ring.start(5);
+    ['a', 'b'].forEach((n) => monitor.publish(bi(n)));
+
+    expect(names()).toEqual(['b']);
+  });
+
+  it('should say when it began, and begin again when cleared', () => {
+    expect(ring.snapshot().startedAt).toBeUndefined();
+    jest.useFakeTimers({ now: new Date('2026-01-01T09:00:00.000Z') });
+    ring.start(5);
+    expect(ring.snapshot().startedAt).toBe('2026-01-01T09:00:00.000Z');
+
+    monitor.publish(bi('a'));
+    jest.setSystemTime(new Date('2026-01-01T09:30:00.000Z'));
+    ring.clear();
+    jest.useRealTimers();
+
+    expect(ring.snapshot()).toEqual({
+      events: [],
+      dropped: { bi: 0, scenario: 0, logging: 0 },
+      startedAt: '2026-01-01T09:30:00.000Z'
+    });
+    // Still running.
+    monitor.publish(bi('b'));
+    expect(names()).toEqual(['b']);
+  });
+
+  it('should stop observing when the app is destroyed', () => {
+    ring.start(5);
+    TestBed.resetTestingModule();
+    expect(monitor.observed).toBe(false);
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.ts
new file mode 100644
index 0000000..0f4faea
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-ring/uwt-inspector-ring.ts
@@ -0,0 +1,86 @@
+import { DestroyRef, inject, Injectable } from '@angular/core';
+import { Subscription } from 'rxjs';
+import {
+  UwtTelemetryMonitor,
+  UwtTelemetryObservedEvent
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { UwtInspectorSectionId } from '../uwt-inspector.models/uwt-inspector.models';
+import { uwtInspectorSectionOf } from '../uwt-inspector-filter/uwt-inspector-filter';
+
+/** What the ring held when the popup asked. */
+export interface UwtInspectorRingSnapshot {
+  /** Every kind's events, oldest first. */
+  events: UwtTelemetryObservedEvent[];
+  /** Events of each kind dropped to stay within the limit. */
+  dropped: Record<UwtInspectorSectionId, number>;
+  /** When it began keeping them: the app's start, or the last clear. */
+  startedAt?: string;
+}
+
+/**
+ * The latest events of each kind from the app's start, for
+ * `captureBeforeOpen`: the popup adopts them when it opens, so it shows what
+ * happened before. Started by `UwtEventInspectorService` at startup, and
+ * runs for the app's lifetime; closing the popup leaves it running.
+ */
+@Injectable({ providedIn: 'root' })
+export class UwtInspectorRing {
+  private readonly monitor = inject(UwtTelemetryMonitor);
+
+  private events = empty<UwtTelemetryObservedEvent[]>(() => []);
+  private dropped = empty(() => 0);
+  private limit = 0;
+  private startedAt?: string;
+  private subscription?: Subscription;
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => this.subscription?.unsubscribe());
+  }
+
+  /** Starts keeping up to `limit` events of each kind; once only. */
+  start(limit: number): void {
+    if (this.subscription || !(limit >= 1)) {
+      return;
+    }
+    this.limit = Math.floor(limit);
+    this.startedAt = new Date().toISOString();
+    this.subscription = this.monitor.events$.subscribe((event) =>
+      this.keep(event)
+    );
+  }
+
+  snapshot(): UwtInspectorRingSnapshot {
+    return {
+      events: [
+        ...this.events.bi,
+        ...this.events.scenario,
+        ...this.events.logging
+      ].sort((a, b) => a.sequence - b.sequence),
+      dropped: { ...this.dropped },
+      startedAt: this.startedAt
+    };
+  }
+
+  /** Empties it, as the popup's Clear does; it keeps running. */
+  clear(): void {
+    this.events = empty(() => []);
+    this.dropped = empty(() => 0);
+    if (this.subscription) {
+      this.startedAt = new Date().toISOString();
+    }
+  }
+
+  private keep(event: UwtTelemetryObservedEvent): void {
+    const id = uwtInspectorSectionOf(event.kind);
+    const kept = this.events[id];
+    kept.push(event);
+    if (kept.length > this.limit) {
+      kept.shift();
+      this.dropped[id]++;
+    }
+  }
+}
+
+function empty<T>(make: () => T): Record<UwtInspectorSectionId, T> {
+  return { bi: make(), scenario: make(), logging: make() };
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
index f28d043..3c2e247 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.spec.ts
@@ -5,6 +5,7 @@ import {
   UwtTelemetryPublishInput
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { UWT_EVENT_INSPECTOR_CONFIG } from '../uwt-inspector.models/uwt-inspector.models';
+import { UwtInspectorRing } from '../uwt-inspector-ring/uwt-inspector-ring';
 import {
   UWT_INSPECTOR_FLUSH_MS,
   UwtInspectorStore
@@ -90,6 +91,26 @@ describe('UwtInspectorStore', () => {
     expect(store.total()).toBe(0);
   });
 
+  it('should start with what the ring kept from before: at once, not as new, nor as received', () => {
+    jest.setSystemTime(new Date('2026-01-01T09:00:00.000Z'));
+    const ring = TestBed.inject(UwtInspectorRing);
+    ring.start(2);
+    ['a', 'b', 'c'].forEach((n) => monitor.publish(bi(n)));
+    jest.setSystemTime(new Date('2026-01-01T09:05:00.000Z'));
+
+    const store = createStore();
+
+    expect(names(store)).toEqual(['c', 'b']);
+    expect(store.fresh().size).toBe(0);
+    expect(store.received().bi).toBe(0);
+    expect(store.startedAt()).toBe('2026-01-01T09:00:00.000Z');
+    expect(store.count('bi')).toEqual({ captured: 2, droppedOldest: 1 });
+
+    // Clearing empties the ring too, so reopening won't bring them back.
+    store.clear();
+    expect(ring.snapshot().events).toHaveLength(0);
+  });
+
   it('should batch arrivals into one update per flush', () => {
     const store = createStore();
     monitor.publish(bi('a'));
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
index 1941d85..7c4c915 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-store/uwt-inspector-store.ts
@@ -25,6 +25,7 @@ import {
   uwtMatchesFilters
 } from '../uwt-inspector-filter/uwt-inspector-filter';
 import { uwtSafeStringify } from '../uwt-inspector-export/uwt-inspector-export';
+import { UwtInspectorRing } from '../uwt-inspector-ring/uwt-inspector-ring';
 
 /** Library defaults, applied under whatever the application configures. */
 export const UWT_DEFAULT_INSPECTOR_CONFIG: Omit<
@@ -33,7 +34,8 @@ export const UWT_DEFAULT_INSPECTOR_CONFIG: Omit<
 > = {
   enabled: true,
   maxEventsPerSection: 500,
-  maxPayloadCharsInView: 256 * 1024
+  maxPayloadCharsInView: 256 * 1024,
+  captureBeforeOpen: 0
 };
 
 /** How often arriving events reach the screen, in milliseconds. */
@@ -56,8 +58,9 @@ function perSection<T>(make: () => T): PerSection<T> {
 /**
  * The inspector's captured history. Held by the `UwtInspectorSession`, so
  * it lasts from opening to closing, whichever docks the inspector moves
- * between: created empty on open, subscribed to {@link UwtTelemetryMonitor}
- * for its lifetime, and discarded on close.
+ * between: created on open — empty, or with what {@link UwtInspectorRing}
+ * kept from before — subscribed to {@link UwtTelemetryMonitor} for its
+ * lifetime, and discarded on close.
  *
  * Events arrive whenever the application sends them; they are batched and
  * reach the screen at most every {@link UWT_INSPECTOR_FLUSH_MS}, so a
@@ -68,6 +71,7 @@ function perSection<T>(make: () => T): PerSection<T> {
 @Injectable()
 export class UwtInspectorStore {
   private readonly monitor = inject(UwtTelemetryMonitor);
+  private readonly ring = inject(UwtInspectorRing);
   private readonly config: UwtEventInspectorConfig = {
     ...UWT_DEFAULT_INSPECTOR_CONFIG,
     shortcuts: [],
@@ -81,7 +85,10 @@ export class UwtInspectorStore {
   private flushTimer?: ReturnType<typeof setTimeout>;
   private freshTimer?: ReturnType<typeof setTimeout>;
 
-  /** When capturing began: the popup opening, or the last clear. */
+  /**
+   * When capturing began: the popup opening, the app's start with
+   * `captureBeforeOpen`, or the last clear.
+   */
   readonly startedAt = signal(new Date().toISOString());
 
   /** What the popup shows: the buffers as of the last unpaused flush. */
@@ -148,6 +155,8 @@ export class UwtInspectorStore {
   });
 
   constructor() {
+    this.adopt();
+    // Straight after adopting: nothing can arrive in between.
     const subscription = this.monitor.events$.subscribe((event) =>
       this.receive(event)
     );
@@ -158,8 +167,9 @@ export class UwtInspectorStore {
     });
   }
 
-  /** Empties every section. Capturing continues. */
+  /** Empties every kind, and what was kept from before. Capturing continues. */
   clear(): void {
+    this.ring.clear();
     for (const id of UWT_INSPECTOR_SECTIONS) {
       this.buffers[id] = [];
       this.droppedCount[id] = 0;
@@ -292,6 +302,23 @@ export class UwtInspectorStore {
     }
   }
 
+  /**
+   * Takes on what the ring kept from before opening: shown at once, not
+   * marked new, and not counted as received since opening.
+   */
+  private adopt(): void {
+    const kept = this.ring.snapshot();
+    if (kept.startedAt) {
+      this.startedAt.set(kept.startedAt);
+    }
+    this.pending = kept.events.map((event) => this.prepare(event));
+    this.drain();
+    for (const id of UWT_INSPECTOR_SECTIONS) {
+      this.droppedCount[id] += kept.dropped[id];
+    }
+    this.publish();
+  }
+
   private flush(): void {
     this.flushTimer = undefined;
     const arrived = this.drain();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
index 9655c35..f5eae3e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
@@ -44,7 +44,11 @@ describe('uwtInspectorRow', () => {
       tone: undefined,
       eventType: 'com.uwt.bi',
       id: 's-1',
-      forwardedFrom: undefined
+      forwardedFrom: undefined,
+      // No feature to offer: this event has none.
+      filterBy: [
+        { path: 'eventName', name: 'Event name', value: 'theme_changed' }
+      ]
     });
   });
 
@@ -71,7 +75,11 @@ describe('uwtInspectorRow', () => {
       name: 'checkout',
       details: 'failure · 42 ms · 1 step',
       tone: 'error',
-      id: 's-1'
+      id: 's-1',
+      filterBy: [
+        { path: 'scenarioName', name: 'Scenario', value: 'checkout' },
+        { path: 'status', name: 'Status', value: 'failure' }
+      ]
     });
   });
 
@@ -121,7 +129,11 @@ describe('uwtInspectorRow', () => {
       details: 'warn · Careful now',
       tone: 'warn',
       eventType: '',
-      id: 'c-9'
+      id: 'c-9',
+      filterBy: [
+        { path: 'logger', name: 'Logger', value: 'checkout' },
+        { path: 'level', name: 'Level', value: 'warn' }
+      ]
     });
   });
 
@@ -136,7 +148,8 @@ describe('uwtInspectorRow', () => {
       kind: 'Error',
       name: 'TypeError',
       details: '→ RUM · x is undefined',
-      tone: 'error'
+      tone: 'error',
+      filterBy: []
     });
   });
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
index 7d94655..d85fecc 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
@@ -1,9 +1,29 @@
-import { UwtTelemetryObservedEvent } from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UwtTelemetryEventKind,
+  UwtTelemetryObservedEvent
+} from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtInspectorEntry } from '../uwt-inspector.models/uwt-inspector.models';
+import { uwtFieldName } from '../uwt-inspector-filter/uwt-inspector-filter';
 
 /** How a row's details are coloured. The words always say it too. */
 export type UwtInspectorTone = 'success' | 'warn' | 'error';
 
+/** A field an open row offers to filter by, e.g. `Event name: x`. */
+export interface UwtInspectorFilterBy {
+  path: string;
+  /** The field as people read it. */
+  name: string;
+  value: string;
+}
+
+/** The fields worth filtering by, for each kind of event. */
+const FILTER_BY: Partial<Record<UwtTelemetryEventKind, readonly string[]>> = {
+  bi: ['eventName', 'feature'],
+  scenario: ['scenarioName', 'status'],
+  'scenario-step': ['scenarioName', 'status'],
+  log: ['logger', 'level']
+};
+
 /** One timeline row: display text, plus the entry for the detail view. */
 export interface UwtInspectorRow {
   sequence: number;
@@ -19,6 +39,8 @@ export interface UwtInspectorRow {
   /** Secondary: the scenario id, or a log's correlation id. */
   id: string;
   forwardedFrom?: string;
+  /** The row's own values of the fields worth filtering by. */
+  filterBy: UwtInspectorFilterBy[];
   entry: UwtInspectorEntry;
 }
 
@@ -159,10 +181,19 @@ export function uwtInspectorTime(iso: string): string {
 export function uwtInspectorRow(entry: UwtInspectorEntry): UwtInspectorRow {
   const { event } = entry;
   let described: RowText;
+  let filterBy: UwtInspectorFilterBy[];
   try {
     described = describe(event);
+    filterBy = (FILTER_BY[event.kind] ?? [])
+      .map((path) => ({
+        path,
+        name: uwtFieldName(path),
+        value: text(event.payload, path)
+      }))
+      .filter((f) => f.value);
   } catch {
     described = { kind: '', name: '', details: '', id: '' };
+    filterBy = [];
   }
   return {
     sequence: event.sequence,
@@ -172,6 +203,7 @@ export function uwtInspectorRow(entry: UwtInspectorEntry): UwtInspectorRow {
     forwardedFrom: event.origin.forwarded
       ? (event.origin.application ?? 'another app')
       : undefined,
+    filterBy,
     entry
   };
 }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html
index 0468013..b201b8d 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.html
@@ -141,11 +141,36 @@
             </div>
           }
           @if (
-            row.entry.event.kind === 'error' && row.entry.event.relatedSequence
+            row.entry.event.kind === 'error' && row.entry.event.relatedSequence;
+            as related
           ) {
             <div>
               <dt>Mirrored from</dt>
-              <dd>log event #{{ row.entry.event.relatedSequence }}</dd>
+              <dd>
+                @if (logSequences().has(related)) {
+                  <button
+                    type="button"
+                    class="uwt-inspector-timeline__link"
+                    (click)="reveal(related)">
+                    log event #{{ related }}
+                  </button>
+                } @else {
+                  log event #{{ related }}
+                }
+              </dd>
+            </div>
+          }
+          @if (mirroredTo().get(row.sequence); as error) {
+            <div>
+              <dt>Mirrored to RUM as</dt>
+              <dd>
+                <button
+                  type="button"
+                  class="uwt-inspector-timeline__link"
+                  (click)="reveal(error)">
+                  event #{{ error }}
+                </button>
+              </dd>
             </div>
           }
           <div>
@@ -153,6 +178,23 @@
             <dd>#{{ row.sequence }}, {{ row.entry.sizeChars }} characters</dd>
           </div>
         </dl>
+        @if (row.filterBy.length > 0) {
+          <div
+            class="uwt-inspector-timeline__filter-by"
+            role="group"
+            aria-label="Filter by">
+            <span aria-hidden="true">Filter by</span>
+            @for (field of row.filterBy; track field.path) {
+              <cps-button
+                type="borderless"
+                size="xsmall"
+                icon="filter-funnel"
+                [label]="field.name + ': ' + field.value"
+                (clicked)="filterBy(field)">
+              </cps-button>
+            }
+          </div>
+        }
         @if (row.entry.renderError) {
           <p class="uwt-inspector-timeline__error">
             Couldn't prepare this event for display:
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
index ef1567d..6f4a683 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
@@ -135,6 +135,30 @@ td {
   }
 }
 
+.uwt-inspector-timeline__link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--cps-color-calm);
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--cps-ring-color);
+    outline-offset: 2px;
+  }
+}
+
+.uwt-inspector-timeline__filter-by {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--cps-text-secondary);
+}
+
 .uwt-inspector-timeline__error {
   margin: 0;
   color: var(--cps-state-error);
@@ -158,3 +182,15 @@ td {
     display: none;
   }
 }
+
+// Forced colours drop the fill that marks the kind shown: it takes the
+// system's selection colours instead. Important, as cps-button-toggle's
+// own rule is the more specific.
+@media (forced-colors: active) {
+  :host ::ng-deep .cps-btn-toggle-content-option.is-selected {
+    forced-color-adjust: none;
+    border-color: Highlight !important;
+    background: Highlight !important;
+    color: HighlightText !important;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
index 25182c8..3bb14ab 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UwtTelemetryMonitor } from '@absaoss-cps/ngx-ui-watchtower';
+import { CPS_LIVE_ANNOUNCER_SERVICE } from 'cps-ui-kit';
 import { UwtInspectorExporter } from '../uwt-inspector-export/uwt-inspector-exporter';
 import {
   UWT_INSPECTOR_FLUSH_MS,
@@ -15,6 +16,7 @@ describe('UwtInspectorTimelineComponent', () => {
   let fixture: ComponentFixture<UwtInspectorTimelineComponent>;
   let store: UwtInspectorStore;
   let monitor: UwtTelemetryMonitor;
+  let announce: jest.Mock;
 
   const el = () => fixture.nativeElement as HTMLElement;
   const shownRows = () =>
@@ -73,9 +75,17 @@ describe('UwtInspectorTimelineComponent', () => {
 
   beforeEach(async () => {
     jest.useFakeTimers();
+    announce = jest.fn();
     await TestBed.configureTestingModule({
       imports: [UwtInspectorTimelineComponent, NoopAnimationsModule],
-      providers: [UwtInspectorStore, UwtInspectorExporter]
+      providers: [
+        UwtInspectorStore,
+        UwtInspectorExporter,
+        {
+          provide: CPS_LIVE_ANNOUNCER_SERVICE,
+          useValue: { announce, clear: jest.fn() }
+        }
+      ]
     }).compileComponents();
     monitor = TestBed.inject(UwtTelemetryMonitor);
     store = TestBed.inject(UwtInspectorStore);
@@ -173,4 +183,131 @@ describe('UwtInspectorTimelineComponent', () => {
     fixture.detectChanges();
     expect(ui().first()).toBe(0);
   });
+
+  describe('an open row', () => {
+    const origin = { forwarded: false as const };
+    const detail = (sequence: number) =>
+      el().querySelector(
+        `[data-testid="cps-table-row-expanded-content-${sequence}"]`
+      );
+    /** A button in an open row, found by its text. */
+    const buttonIn = (sequence: number, text: string) =>
+      Array.from(detail(sequence)?.querySelectorAll('button') ?? []).find(
+        (b) => b.textContent?.trim() === text
+      );
+
+    function open(sequence: number): void {
+      el()
+        .querySelector<HTMLElement>(
+          `[data-testid="cps-table-row-expand-btn-${sequence}"]`
+        )
+        ?.click();
+      fixture.detectChanges();
+    }
+
+    function settle(): void {
+      jest.advanceTimersByTime(UWT_INSPECTOR_FLUSH_MS);
+      fixture.detectChanges();
+    }
+
+    /** A log error, 30 more log lines, then the error mirroring it to RUM. */
+    function mirror(): { log: number; error: number } {
+      const log = monitor.publish({
+        kind: 'log',
+        payload: {
+          timestamp: '',
+          level: 'error',
+          message: 'Payment failed',
+          application: 'app',
+          environment: 'test',
+          version: '1'
+        },
+        destination: 'log-provider',
+        origin
+      })!;
+      publish(30, 'log');
+      const error = monitor.publish({
+        kind: 'error',
+        payload: { name: 'Error', message: 'Payment failed' },
+        relatedSequence: log,
+        destination: 'sink',
+        origin
+      })!;
+      settle();
+      return { log, error };
+    }
+
+    it('should filter by one of its values, once', () => {
+      publish(1);
+      const [{ event }] = store.filtered();
+      open(event.sequence);
+
+      buttonIn(event.sequence, 'Event name: needle')?.click();
+      fixture.detectChanges();
+      buttonIn(event.sequence, 'Event name: needle')?.click();
+
+      expect(store.filters().fields).toEqual([
+        expect.objectContaining({
+          path: 'eventName',
+          operator: 'equals',
+          value: 'needle'
+        })
+      ]);
+    });
+
+    it('should take an error to its log event, open on its page, and back', () => {
+      const { log, error } = mirror();
+      open(error);
+
+      buttonIn(error, `log event #${log}`)?.click();
+      fixture.detectChanges();
+      TestBed.tick();
+
+      expect(ui().first()).toBe(PAGE);
+      expect(detail(log)).not.toBeNull();
+      expect(document.activeElement?.getAttribute('aria-label')).toBe(
+        `Payload of event #${log}`
+      );
+
+      buttonIn(log, `event #${error}`)?.click();
+      fixture.detectChanges();
+      TestBed.tick();
+      expect(ui().first()).toBe(0);
+      expect(document.activeElement?.getAttribute('aria-label')).toBe(
+        `Payload of event #${error}`
+      );
+    });
+
+    it('should clear the filters hiding the log event, and say so', () => {
+      const { log, error } = mirror();
+      store.addFilter({ path: 'kind', operator: 'equals', value: 'error' });
+      fixture.detectChanges();
+      open(error);
+
+      buttonIn(error, `log event #${log}`)?.click();
+      fixture.detectChanges();
+
+      expect(store.filters().fields).toHaveLength(0);
+      expect(detail(log)).not.toBeNull();
+      expect(announce).toHaveBeenCalledWith(
+        `Filters cleared to show event #${log}.`,
+        'polite'
+      );
+    });
+
+    it('should name a log event it no longer has, without a link', () => {
+      const error = monitor.publish({
+        kind: 'error',
+        payload: { name: 'Error', message: 'Payment failed' },
+        relatedSequence: 999,
+        destination: 'sink',
+        origin
+      })!;
+      settle();
+      open(error);
+
+      expect(detail(error)?.textContent).toContain('log event #999');
+      expect(buttonIn(error, 'log event #999')).toBeUndefined();
+    });
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
index a1b89f9..c12d83b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
@@ -1,13 +1,18 @@
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   computed,
+  ElementRef,
   inject,
+  Injector,
   input,
   linkedSignal,
-  signal
+  signal,
+  viewChild
 } from '@angular/core';
 import {
+  CPS_LIVE_ANNOUNCER_SERVICE,
   CpsButtonComponent,
   CpsButtonToggleComponent,
   CpsButtonToggleOption,
@@ -31,7 +36,7 @@ import {
   uwtInspectorEventsNoun,
   UwtInspectorExporter
 } from '../uwt-inspector-export/uwt-inspector-exporter';
-import { uwtInspectorRow } from './uwt-inspector-rows';
+import { UwtInspectorFilterBy, uwtInspectorRow } from './uwt-inspector-rows';
 
 /** The kind toggle's labels. */
 const KIND_LABEL: Record<UwtInspectorSectionId, string> = {
@@ -43,7 +48,8 @@ const KIND_LABEL: Record<UwtInspectorSectionId, string> = {
 /**
  * Every captured event in one table, newest first: a kind toggle with
  * counts, one search and set of filters for every kind, an Export menu for
- * the kind shown, and a paginated table whose rows open on the payload.
+ * the kind shown, and a paginated table whose rows open on the payload,
+ * with ways to filter by its values and to reach the event it mirrors.
  */
 @Component({
   selector: 'uwt-inspector-timeline',
@@ -62,6 +68,13 @@ const KIND_LABEL: Record<UwtInspectorSectionId, string> = {
 export class UwtInspectorTimelineComponent {
   protected readonly store = inject(UwtInspectorStore);
   private readonly exporter = inject(UwtInspectorExporter);
+  private readonly host: ElementRef<HTMLElement> = inject(ElementRef);
+  private readonly injector = inject(Injector);
+  private readonly announcer = inject(CPS_LIVE_ANNOUNCER_SERVICE, {
+    optional: true
+  });
+
+  private readonly table = viewChild.required(CpsTableComponent);
 
   /** JSON length, in characters, above which a payload is shown truncated. */
   readonly maxPayloadChars = input(
@@ -107,6 +120,25 @@ export class UwtInspectorTimelineComponent {
         : 0
   });
 
+  /** Rows per page, as the reader last chose. */
+  private readonly pageSize = signal(25);
+
+  /** The log events captured, to link an error back to its own. */
+  protected readonly logSequences = computed(
+    () => new Set(this.store.entries().logging.map((e) => e.event.sequence))
+  );
+
+  /** Each log event's sequence, to the error that mirrored it to RUM. */
+  protected readonly mirroredTo = computed(() => {
+    const mirrors = new Map<number, number>();
+    for (const { event } of this.store.entries().logging) {
+      if (event.kind === 'error' && event.relatedSequence) {
+        mirrors.set(event.relatedSequence, event.sequence);
+      }
+    }
+    return mirrors;
+  });
+
   protected readonly emptyMessage = computed(() => {
     const kind = this.store.kind();
     const noun = uwtInspectorEventsNoun(kind);
@@ -138,8 +170,64 @@ export class UwtInspectorTimelineComponent {
     this.store.setKind(kind);
   }
 
-  protected onPage(state: { first?: number }): void {
+  protected onPage(state: { first?: number; rows?: number }): void {
     this.first.set(state?.first ?? 0);
+    this.pageSize.set(state?.rows ?? this.pageSize());
+  }
+
+  /** Adds a filter on a value from an open row, unless it's there already. */
+  protected filterBy(field: UwtInspectorFilterBy): void {
+    const exists = this.store
+      .filters()
+      .fields.some(
+        (f) =>
+          f.path === field.path &&
+          f.operator === 'equals' &&
+          f.value === field.value
+      );
+    if (!exists) {
+      this.store.addFilter({
+        path: field.path,
+        operator: 'equals',
+        value: field.value
+      });
+    }
+  }
+
+  /**
+   * Shows an event's row, open: clears the search and filters if they hide
+   * it, turns to its page, opens it, and moves focus to its payload.
+   */
+  protected reveal(sequence: number): void {
+    if (!this.rows().some((r) => r.sequence === sequence)) {
+      this.store.clearFilters();
+      this.announce(`Filters cleared to show event #${sequence}.`);
+    }
+    const rows = this.rows();
+    const index = rows.findIndex((r) => r.sequence === sequence);
+    if (index < 0) {
+      return;
+    }
+    const size = this.pageSize();
+    this.first(); // settles the page reset that clearing the filters makes
+    this.first.set(Math.floor(index / size) * size);
+    const table = this.table().primengTable;
+    if (!table.isRowExpanded(rows[index])) {
+      table.toggleRow(rows[index]);
+    }
+    afterNextRender(
+      () => {
+        const content = this.host.nativeElement.querySelector(
+          `[data-testid="cps-table-row-expanded-content-${sequence}"]`
+        );
+        // Optional: some environments, such as jsdom, have no scrolling.
+        content?.previousElementSibling?.scrollIntoView?.({ block: 'start' });
+        content
+          ?.querySelector<HTMLElement>('pre')
+          ?.focus({ preventScroll: true });
+      },
+      { injector: this.injector }
+    );
   }
 
   protected goToNewest(): void {
@@ -158,6 +246,14 @@ export class UwtInspectorTimelineComponent {
     return this.store.fresh().has(sequence);
   }
 
+  private announce(message: string): void {
+    try {
+      this.announcer?.announce(message, 'polite');
+    } catch {
+      // Announcements are a courtesy; never let one break the inspector.
+    }
+  }
+
   private download(): void {
     this.exporter.download(this.store.kind());
   }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index 5268672..c84f297 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -105,6 +105,17 @@ export interface UwtEventInspectorConfig {
    * limit protects rendering, which costs by the length of the text.
    */
   maxPayloadCharsInView: number;
+
+  /**
+   * Events of each kind kept from the app's start, so the popup shows what
+   * happened before it opened; at most `maxEventsPerSection`. `0`, the
+   * default, keeps none: the popup shows only what follows its opening.
+   *
+   * Above `0`, every event handed over is copied for it from startup, with
+   * the popup closed too — a cost the default avoids. Closing the popup
+   * keeps them coming; Clear empties them.
+   */
+  captureBeforeOpen: number;
 }
 
 /** @group Tokens */
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index a064acd..829a99f 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -91,8 +91,7 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
 
   @if (store.total() === 0 && !store.paused()) {
     <p class="uwt-inspector__hint">
-      Capturing from now. Use the app to generate events; they appear here as
-      they are sent.
+      Use the app to generate events; they appear here as they are sent.
     </p>
   }
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index e0c6db2..4a24ec1 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -146,3 +146,12 @@
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   }
 }
+
+// Forced colours empty the Pause switch's knob, which says by its side
+// whether updates are paused; a border draws it back.
+@media (forced-colors: active) {
+  :host ::ng-deep .cps-switch-slider::before {
+    box-sizing: border-box;
+    border: 0.4375rem solid;
+  }
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 44ea8ba..8cf06a3 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -180,7 +180,7 @@ describe('UwtInspectorComponent', () => {
 
   it('should open empty, with every kind at nought and an explanation', () => {
     expect(kinds()).toEqual(['All 0', 'BI 0', 'Scenarios 0', 'Logs 0']);
-    expect(text()).toContain('Capturing from now.');
+    expect(text()).toContain('Use the app to generate events');
     expect(text()).toContain('No events yet.');
   });
 
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
index be2e77a..3d94766 100644
--- a/projects/watchtower-lab/src/lab/lab-options.ts
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -36,7 +36,10 @@ export interface LabConfig {
   };
   inspector?: Pick<
     Partial<UwtEventInspectorConfig>,
-    'maxEventsPerSection' | 'maxPayloadCharsInView' | 'shortcuts'
+    | 'maxEventsPerSection'
+    | 'maxPayloadCharsInView'
+    | 'shortcuts'
+    | 'captureBeforeOpen'
   >;
   /** The lab's own: its log provider batches, and sends on `flush()`. */
   lab?: { logBatching?: boolean };

From 9ac462f42b168066c96ecc70658ea94a56fc9d57 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 6 Nov 2026 18:52:17 +0100
Subject: [PATCH 21/51] results beside the actions, folding header and nav,
 broker setup in Settings

---
 README.md                                     |  50 ++-
 playwright/frame.spec.ts                      | 108 +++++
 playwright/inspector.spec.ts                  |  21 +
 playwright/lab.ts                             |  12 +-
 playwright/settings.spec.ts                   |  48 +++
 playwright/telemetries.spec.ts                |  33 +-
 playwright/wire.spec.ts                       | 115 +++---
 projects/ngx-ui-watchtower/DESIGN.md          |   9 +-
 .../uwt-event-inspector.service.spec.ts       |  16 +
 .../uwt-event-inspector.service.ts            |  11 +
 projects/watchtower-lab/server/lab-backend.ts |  12 +-
 .../src/lab/lab-config-check.ts               |  42 ++
 .../src/lab/lab-results.component.ts          | 137 +++++++
 .../src/lab/lab-rum-credentials.provider.ts   |  22 +-
 .../src/lab/lab-wire.service.ts               |  36 +-
 .../watchtower-lab/src/shell/pages/bi.page.ts |  43 +-
 .../src/shell/pages/identity.page.ts          |  69 +++-
 .../src/shell/pages/inspector.page.ts         |  46 ++-
 .../src/shell/pages/lifecycle.page.ts         | 119 +++---
 .../src/shell/pages/logging.page.ts           | 119 +++---
 .../src/shell/pages/privacy.page.ts           | 112 +++---
 .../src/shell/pages/scenarios.page.ts         | 240 ++++++-----
 .../src/shell/pages/settings.page.ts          | 266 +++++++++++--
 .../src/shell/pages/wire.page.ts              | 267 +++++--------
 .../src/shell/shell.component.ts              | 235 +++++++----
 .../watchtower-lab/src/shell/shell.config.ts  |  23 +-
 projects/watchtower-lab/src/styles.scss       | 374 +++++++++++++++++-
 27 files changed, 1869 insertions(+), 716 deletions(-)
 create mode 100644 playwright/frame.spec.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-config-check.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-results.component.ts

diff --git a/README.md b/README.md
index 9653203..fc7a46b 100644
--- a/README.md
+++ b/README.md
@@ -72,15 +72,23 @@ rendered on the server, then hydrated. Its server (`server/server.ts`, which
 the library talks to: the real `aws-rum-web` runs against a mock RUM broker
 and dataplane, fully offline, and logs go to a mock log backend.
 
-One page per concern: **Scenarios**, **BI events**, **Logging**,
-**Identity**, **Privacy**, **Lifecycle**, **Fragment (iframe)** and **Web
-Fragment** (the same second app in a plain iframe, and as a
-[Web Fragment](https://web-fragments.dev) through the server's gateway, each
-forwarding through the shell over the tab's own channel), **Event Inspector**
-(every dock, event generators, and the `--uwt-inspector-inset-*` opt-in on
-the lab's fixed header and status bar), **On the wire**: what the mock
-backend actually received, and **Settings**: the library's settings in
-effect, a `?config=` overlay to edit, and the debug flags.
+One page per concern, in three groups. **Library**: **Scenarios**, **BI
+events**, **Logging**, **Identity**, **Privacy** and **Lifecycle**, each with
+a **Results** column beside its buttons — the page's own readout, and what
+it sent, ticked once the mock backend has it. **Composition**: **Fragment
+(iframe)** and **Web Fragment** (the same second app in a plain iframe, and
+as a [Web Fragment](https://web-fragments.dev) through the server's gateway,
+each forwarding through the shell over the tab's own channel). **Tools**:
+**Event Inspector** (every dock, showing the one it is in, event generators,
+and the `--uwt-inspector-inset-*` opt-in on the lab's fixed header and status
+bar), **On the wire**: what the mock backend actually received, and
+**Settings**: the library's settings and the mock broker's answer, applied
+together with one reload, the debug flags, and the settings in effect.
+
+The header's chips show how this load runs; where the broker is set
+differently for the next one, its chip says so: `broker: ok → null after
+reload`. On a narrow screen, or beside a docked pane, the chips fold behind
+**Run settings**, and the page list behind **Pages**.
 
 Options, read once at startup like an app's configuration:
 
@@ -100,10 +108,11 @@ Options, read once at startup like an app's configuration:
 and the one value transform is `mask-order-ids`. One more, `lab`, is the
 lab's own: `{ "logBatching": true }` makes its log provider batch, and send
 when the library flushes it. For example
-`?config={"scenarios":{"emitLifecycleEvents":true}}`.
+`?config={"scenarios":{"emitLifecycleEvents":true}}`. **Settings** edits it,
+with switches for the common options, and refuses a section, setting or
+type the library doesn't have.
 
-The mock RUM broker's answer is set on the **On the wire** page, then applied
-by reloading:
+The mock RUM broker's answer is set on the **Settings** page too:
 
 | Mode                        | The broker                                                   |
 | --------------------------- | ------------------------------------------------------------ |
@@ -116,7 +125,7 @@ by reloading:
 | `null-on-refresh`           | Turns RUM off at the first refresh                           |
 | `no-credentials-on-refresh` | Refreshes without credentials: the sink keeps the old ones   |
 
-The same page sets RUM's own `telemetries` (the library's default, or any of
+It also sets RUM's own `telemetries` (the library's default, or any of
 `errors`, `performance`, `interaction`, `http` and `replay`, down to none),
 and a JSON object laid over the broker's app monitor config, such as
 `{ "sessionSampleRate": 0 }`.
@@ -132,13 +141,14 @@ their own channels or one shared, a custom destination, every broker mode
 and RUM's start-up and refresh, RUM's telemetries, the library's settings
 through `?config=`, the debug flags, and the Event Inspector's docks,
 shortcut, pause, kinds, search, filters, export, paging, resizing, links
-between an error and its log event, and events kept from before opening. It
-also runs axe-core's WCAG 2.2 A and AA rules on every lab page and on the
-Event Inspector with its Export menu and filter help open, measures the
-contrast of its coloured text, and checks its states under forced colours. Internal edge
-cases — timers longer than 24 days, giving up after five minutes, no Web
-Locks or storage, message validation, start-up errors — are left to the unit
-tests.
+between an error and its log event, and events kept from before opening —
+and the lab's own frame: results beside the buttons, the header and nav
+folding when narrow, and no page wider than a phone. It also runs axe-core's
+WCAG 2.2 A and AA rules on every lab page and on the Event Inspector with its
+Export menu and filter help open, measures the contrast of its coloured
+text, and checks its states under forced colours. Internal edge cases —
+timers longer than 24 days, giving up after five minutes, no Web Locks or
+storage, message validation, start-up errors — are left to the unit tests.
 
 It runs the built server on http://localhost:4390, beside `npm run lab`. The
 first time, download the browsers with
diff --git a/playwright/frame.spec.ts b/playwright/frame.spec.ts
new file mode 100644
index 0000000..d90a2a4
--- /dev/null
+++ b/playwright/frame.spec.ts
@@ -0,0 +1,108 @@
+import { expect, openLab, press, sessionStarted, test } from './lab';
+
+const PAGES = [
+  'scenarios',
+  'bi',
+  'logging',
+  'identity',
+  'privacy',
+  'lifecycle',
+  'fragment',
+  'web-fragment',
+  'inspector',
+  'wire',
+  'settings'
+];
+
+test('a page lists what it sent beside its buttons, ticked once it arrives, and says so', async ({
+  page
+}) => {
+  await openLab(page, 'bi');
+  await sessionStarted(page);
+  const results = page.locator('lab-results');
+  await expect(results).toContainText('Nothing yet.');
+
+  await press(page, 'Track a click');
+  const sent = results.locator('li', { hasText: 'lab_button_clicked' });
+  await expect(sent).toContainText('BI');
+  await expect(sent).toContainText('✓ received', { timeout: 10_000 });
+  await expect(results.getByRole('status')).toHaveText(
+    'BI lab_button_clicked: received.'
+  );
+
+  // Beside the buttons, not below them.
+  const button = (await page
+    .getByRole('button', { name: 'Track a click' })
+    .boundingBox())!;
+  const column = (await results.boundingBox())!;
+  expect(column.x).toBeGreaterThan(button.x + button.width);
+  expect(column.y).toBeLessThan(button.y + button.height);
+});
+
+test('a narrower header folds its chips behind Run settings', async ({
+  page
+}) => {
+  await page.setViewportSize({ width: 1024, height: 768 });
+  await openLab(page, 'bi');
+  const header = page.locator('.lab-header');
+  const panel = header.locator('.lab-run-settings__panel');
+  await expect(header.locator('.lab-chips')).toBeHidden();
+  await expect(panel).toBeHidden();
+
+  await header.getByText('Run settings').click();
+  await expect(panel).toBeVisible();
+  await expect(panel).toContainText('broker: ok');
+});
+
+test('under 900px the nav folds behind a button naming the page', async ({
+  page
+}) => {
+  await page.setViewportSize({ width: 800, height: 700 });
+  await openLab(page, 'bi');
+  const fold = page.getByRole('button', { name: /^Pages/ });
+  const links = page.locator('.lab-nav').getByRole('link');
+  await expect(fold).toContainText('BI events');
+  await expect(links.first()).toBeHidden();
+
+  await fold.click();
+  await expect(fold).toHaveAttribute('aria-expanded', 'true');
+  await page.keyboard.press('Escape');
+  await expect(links.first()).toBeHidden();
+  await expect(fold).toBeFocused();
+
+  await fold.click();
+  await page.locator('.lab-nav').getByRole('link', { name: 'Logging' }).click();
+  await expect(page.locator('lab-root main h1')).toHaveText('Logging');
+  await expect(links.first()).toBeHidden();
+  await expect(fold).toContainText('Logging');
+});
+
+test('the status bar stays on one line, as label and value pairs', async ({
+  page
+}) => {
+  await page.setViewportSize({ width: 800, height: 700 });
+  await openLab(page, 'bi');
+  const status = page.locator('.lab-status');
+  for (const label of [
+    'RUM events:',
+    'from the library:',
+    'batches:',
+    'logs:',
+    'session:',
+    'user:'
+  ]) {
+    await expect(status).toContainText(label);
+  }
+  expect((await status.boundingBox())!.height).toBe(36);
+});
+
+test('at phone width, no page is wider than the screen', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  for (const path of PAGES) {
+    await openLab(page, path);
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+      path
+    ).toBeLessThanOrEqual(390);
+  }
+});
diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 32ad694..d12e433 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -63,6 +63,27 @@ test('a phone-sized screen offers only the dialog and the window, and opens a re
   await expect(page.locator('uwt-inspector-pane')).toBeVisible();
 });
 
+test('the Where it opens buttons show where it is, with Close apart', async ({
+  page
+}) => {
+  const lab = page.locator('lab-inspector-page');
+  const pressed = lab.locator('[aria-pressed="true"]');
+  const close = lab.getByRole('button', { name: 'Close', exact: true });
+  await expect(pressed).toHaveCount(0);
+  await expect(close).toBeDisabled();
+
+  await press(page, 'Right pane');
+  await expect(pressed).toHaveText('Right pane');
+  await expect(close).toBeEnabled();
+
+  // Moved from the inspector's own Dock buttons, the page follows.
+  await page.locator('uwt-inspector [data-dock="bottom"]').click();
+  await expect(pressed).toHaveText('Bottom pane');
+
+  await close.click();
+  await expect(pressed).toHaveCount(0);
+});
+
 test('the Dialog button moves it from a pane to the dialog', async ({
   page
 }) => {
diff --git a/playwright/lab.ts b/playwright/lab.ts
index e9762d2..983c98e 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -189,8 +189,18 @@ export async function sessionStarted(page: Page): Promise<string> {
   return (await status.textContent())!.match(/session: ([0-9a-f-]{36})/)![1];
 }
 
-/** Moves to another lab page within the app, keeping its state. */
+/**
+ * Moves to another lab page within the app, keeping its state — through the
+ * folded nav's button too, as on a narrow screen or beside a pane.
+ */
 export async function navigate(page: Page, label: string): Promise<void> {
+  const fold = page.locator('.lab-nav__toggle');
+  if (
+    (await fold.isVisible()) &&
+    (await fold.getAttribute('aria-expanded')) !== 'true'
+  ) {
+    await fold.click();
+  }
   await page.locator('.lab-nav').getByRole('link', { name: label }).click();
   await expect(page.locator('lab-root main h1').first()).toHaveText(label);
 }
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index e9e9941..6100e36 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -49,6 +49,54 @@ test('the Settings page applies an overlay, shows it in effect, and goes back',
   );
 });
 
+test('Settings checks the overlay against the library: no unknown setting, no wrong type', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const settings = page.locator('lab-settings-page');
+
+  await overlay.fill('{ "bi": { "dedupWindow": 0 } }');
+  await press(page, 'Apply and reload');
+  await expect(settings).toContainText(`"bi.dedupWindow" isn't a setting`);
+
+  await overlay.fill('{ "bi": { "dedupWindowMs": "0" } }');
+  await press(page, 'Apply and reload');
+  await expect(settings).toContainText(
+    '"bi.dedupWindowMs" should be a number.'
+  );
+
+  await overlay.fill('{ "scenario": {} }');
+  await press(page, 'Apply and reload');
+  await expect(settings).toContainText(`"scenario" isn't a section`);
+  // Never applied.
+  await expect(page.locator('.lab-header')).not.toContainText('config:');
+});
+
+test('Settings controls write the common options into the overlay', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  await expect(overlay).toHaveValue('{}');
+
+  await page
+    .locator('cps-switch', { hasText: 'Lifecycle step events' })
+    .locator('label.cps-switch')
+    .click();
+  await expect(overlay).toHaveValue(/"emitLifecycleEvents": true/);
+  await page
+    .locator('cps-input', { hasText: 'BI dedup window' })
+    .locator('input')
+    .fill('250');
+  await expect(overlay).toHaveValue(/"dedupWindowMs": 250/);
+
+  await press(page, 'Apply and reload');
+  const effective = page.locator('.lab-readout');
+  await expect(effective).toContainText('"emitLifecycleEvents": true');
+  await expect(effective).toContainText('"dedupWindowMs": 250');
+});
+
 test('eventNamespace renames the event types, and the inspector still sorts them', async ({
   page,
   backend
diff --git a/playwright/telemetries.spec.ts b/playwright/telemetries.spec.ts
index b7747b3..2d4c5f4 100644
--- a/playwright/telemetries.spec.ts
+++ b/playwright/telemetries.spec.ts
@@ -100,25 +100,34 @@ for (const { name, telemetries, chip, expected } of cases) {
   });
 }
 
-test('"On the wire" switches between the default and a list to edit', async ({
+test('Settings switches between the default and a list to edit, set on Apply', async ({
   page,
   backend
 }) => {
-  await openLab(page, 'wire');
+  await openLab(page, 'settings');
   const telemetriesList = page.locator('cps-select[label="Telemetries"]');
+  const useDefault = page
+    .locator('cps-switch', { hasText: "The library's default" })
+    .locator('label.cps-switch');
   await expect(telemetriesList).toHaveCount(0);
 
-  await page
-    .locator('cps-switch', { hasText: "The library's default" })
-    .click();
+  await useDefault.click();
   await expect(telemetriesList).toBeVisible();
-  await expect
-    .poll(async () => (await backend.state()).telemetries)
-    .toEqual(['errors', 'performance', 'http']);
+  await press(page, 'Apply and reload');
+  await expect(page.locator('.lab-header')).toContainText(
+    'rum telemetries: errors, performance, http'
+  );
+  expect((await backend.state()).telemetries).toEqual([
+    'errors',
+    'performance',
+    'http'
+  ]);
 
-  await page
-    .locator('cps-switch', { hasText: "The library's default" })
-    .click();
+  await useDefault.click();
   await expect(telemetriesList).toHaveCount(0);
-  await expect.poll(async () => (await backend.state()).telemetries).toBeNull();
+  await press(page, 'Apply and reload');
+  await expect(page.locator('.lab-header')).toContainText(
+    'rum telemetries: default'
+  );
+  expect((await backend.state()).telemetries).toBeNull();
 });
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
index 81a851f..833255f 100644
--- a/playwright/wire.spec.ts
+++ b/playwright/wire.spec.ts
@@ -14,46 +14,68 @@ async function choose(page: Page, label: string, option: string) {
   await page.getByRole('option', { name: new RegExp(`^${option}`) }).click();
 }
 
-test.beforeEach(async ({ page }) => {
-  await openLab(page, 'wire');
-});
-
-test('the broker select sets how the next /rum/init is answered', async ({
+test('Settings sets the broker, all at once with Apply and reload; the header tells this load from the next', async ({
   page,
   backend
 }) => {
-  await choose(page, 'Answer the next /rum/init with', 'null —');
-  await expect
-    .poll(async () => (await backend.state()).brokerMode)
-    .toBe('null');
+  await openLab(page, 'settings');
+  await choose(page, 'Answer /rum/init with', 'null —');
+  await page
+    .locator('cps-switch', { hasText: "The library's default" })
+    .locator('label.cps-switch')
+    .click();
+  await choose(page, 'Telemetries', 'replay');
+  const overlay = page.getByRole('textbox', {
+    name: 'Laid over the app monitor config (JSON)'
+  });
+  await overlay.fill('{ "sessionSampleRate": 0 }');
+  // Past the lab's next poll of the backend, the draft is still there.
+  await page.waitForTimeout(2000);
+  await expect(overlay).toHaveValue('{ "sessionSampleRate": 0 }');
+  // Nothing is set until applied.
+  expect((await backend.state()).brokerMode).toBe('ok');
+
+  await press(page, 'Apply and reload');
   await expect(page.locator('.lab-header')).toContainText('broker: null');
+  expect(await backend.state()).toMatchObject({
+    brokerMode: 'null',
+    telemetries: ['errors', 'performance', 'http', 'replay'],
+    brokerConfig: { sessionSampleRate: 0 }
+  });
+  // After the reload, the fields show what is set.
+  await expect(
+    page.getByRole('textbox', {
+      name: 'Laid over the app monitor config (JSON)'
+    })
+  ).toHaveValue('{"sessionSampleRate":0}');
+
+  // Set elsewhere, for the next load: the header says so.
+  await backend.setBrokerMode('ok');
+  await expect(page.locator('.lab-header')).toContainText(
+    'broker: null → ok after reload'
+  );
 });
 
-test('the telemetries list sets what the broker names', async ({
+test('a broker overlay that is not JSON stops Apply, and sets nothing', async ({
   page,
   backend
 }) => {
+  await openLab(page, 'settings');
   await page
-    .locator('cps-switch', { hasText: "The library's default" })
-    .click();
-  await choose(page, 'Telemetries', 'replay');
-  await expect
-    .poll(async () => (await backend.state()).telemetries)
-    .toEqual(['errors', 'performance', 'http', 'replay']);
-});
-
-test('Reload to apply loads the page again', async ({ page }) => {
-  await page.evaluate(() => ((window as { labMark?: number }).labMark = 1));
-  await press(page, 'Reload to apply');
-  await expect
-    .poll(() => page.evaluate(() => (window as { labMark?: number }).labMark))
-    .toBeUndefined();
+    .getByRole('textbox', { name: 'Laid over the app monitor config (JSON)' })
+    .fill('[1, 2]');
+  await press(page, 'Apply and reload');
+  await expect(page.locator('lab-settings-page')).toContainText(
+    'Not a JSON object.'
+  );
+  expect((await backend.state()).brokerConfig).toEqual({});
 });
 
-test("the tables show what arrived, RUM's own events on request, until Reset empties them", async ({
+test("the tables show what arrived, RUM's own events on request, until a confirmed Reset empties them", async ({
   page,
   backend
 }) => {
+  await openLab(page, 'wire');
   await sessionStarted(page);
   await navigate(page, 'BI events');
   await press(page, 'Track a click');
@@ -67,42 +89,31 @@ test("the tables show what arrived, RUM's own events on request, until Reset emp
   await expect(rumTable).not.toContainText('com.amazon.rum.page_view_event');
   await expect(logTable).toContainText('A lab warning');
 
-  const libraryOnly = page.locator('cps-switch', {
+  // The filter sits with the table it filters.
+  const libraryOnly = rumTable.locator('cps-switch', {
     hasText: 'Library events only'
   });
   await libraryOnly.click();
   await expect(rumTable).toContainText('com.amazon.rum.page_view_event');
   await libraryOnly.click();
 
+  // Asked first; declined, nothing goes.
+  let asked = '';
+  page.once('dialog', (dialog) => {
+    asked = dialog.message();
+    return dialog.dismiss();
+  });
+  await press(page, 'Reset the mock backend');
+  await expect.poll(() => asked).toContain('Empty the mock backend?');
+  expect((await backend.logs()).length).toBeGreaterThan(0);
+
   // RUM's own events can still arrive after it; the library's can't.
+  page.once('dialog', (dialog) => dialog.accept());
   await press(page, 'Reset the mock backend');
+  await expect(page.getByRole('status')).toContainText(
+    'Reset: the mock backend is empty.'
+  );
   await expect(rumTable.locator('h2')).toHaveText('RUM events (0)');
   await expect(logTable.locator('h2')).toHaveText('Log records (0)');
   expect(await backend.logs()).toEqual([]);
 });
-
-test('the overlay field sets what is laid over the broker config, and refuses what is not JSON', async ({
-  page,
-  backend
-}) => {
-  const field = page.getByRole('textbox', {
-    name: 'Laid over the app monitor config (JSON)'
-  });
-  await field.fill('{ "sessionSampleRate": 0 }');
-  await press(page, 'Set the overlay');
-  await expect
-    .poll(async () => (await backend.state()).brokerConfig)
-    .toEqual({ sessionSampleRate: 0 });
-  // After a reload, the field shows the overlay in force.
-  await press(page, 'Reload to apply');
-  await expect(field).toHaveValue('{"sessionSampleRate":0}');
-
-  await field.fill('[1, 2]');
-  await press(page, 'Set the overlay');
-  await expect(page.locator('lab-wire-page')).toContainText(
-    'Not a JSON object.'
-  );
-  expect((await backend.state()).brokerConfig).toEqual({
-    sessionSampleRate: 0
-  });
-});
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 2cc170b..47a9cc4 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2284,9 +2284,12 @@ European Windows layouts report as Ctrl+Alt, never matches. Spread
 
 `UwtEventInspectorService` opens it from code: `open()`, `close()`,
 `toggle()`, `setDock(dock)` — a `UwtInspectorDock`: `'dialog'`, `'window'`,
-`'left'`, `'right'` or `'bottom'` — and an `isOpen` signal. `setDock` opens
-it there if it is closed, and remembers the choice like the Dock buttons;
-asked for the dock it is already in, it just focuses it.
+`'left'`, `'right'` or `'bottom'` — an `isOpen` signal, and a `dock` signal
+for where it is shown, `undefined` while closed. `setDock` opens it there if
+it is closed, and remembers the choice like the Dock buttons; asked for the
+dock it is already in, it just focuses it. `dock` can differ from the dock
+asked for: a blocked window, or a pane on a narrow screen, shows as a
+dialog.
 
 An export is a `UwtInspectorExport`:
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 45edf0e..ef4c6f9 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -358,6 +358,22 @@ describe('UwtEventInspectorService', () => {
     expect(service.isOpen()).toBe(false);
   });
 
+  it('should say where it is shown, which a blocked window makes a dialog', () => {
+    const service = create();
+    expect(service.dock()).toBeUndefined();
+
+    service.setDock('left');
+    expect(service.dock()).toBe('left');
+
+    jest.spyOn(windowHost, 'uwtOpenInspectorWindow').mockReturnValue(undefined);
+    jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+    service.setDock('window');
+    expect(service.dock()).toBe('dialog');
+
+    service.close();
+    expect(service.dock()).toBeUndefined();
+  });
+
   it('should leave the inspector as it is when asked for the dock it is in', () => {
     const service = create();
     service.setDock('right');
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 525492a..cc2e7b3 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -97,6 +97,15 @@ export class UwtEventInspectorService {
   /** Whether the inspector is currently open, in any dock. */
   readonly isOpen = signal(false);
 
+  private readonly shownIn = signal<UwtInspectorDock | undefined>(undefined);
+
+  /**
+   * Where the inspector is shown while open — which can differ from the dock
+   * asked for, as a blocked window or a narrow screen makes it a dialog —
+   * and `undefined` while closed.
+   */
+  readonly dock = this.shownIn.asReadonly();
+
   /** Whether the app's window is wide enough for a pane beside it. */
   private readonly panesFit = signal(true);
 
@@ -181,6 +190,7 @@ export class UwtEventInspectorService {
     uwtSafeVoid('close', () => host?.destroy());
     this.session.end();
     this.isOpen.set(false);
+    this.shownIn.set(undefined);
   }
 
   /**
@@ -246,6 +256,7 @@ export class UwtEventInspectorService {
             ? this.openDialog()
             : this.openPane(dock);
       this.isOpen.set(true);
+      this.shownIn.set(this.host.dock);
     });
     // A dialog focuses itself once rendered; a pane or window is ready now.
     uwtSafeVoid('focus', () => this.host?.focus());
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index 006d285..5a36ac4 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -211,13 +211,17 @@ function queryLogs(query: Request['query']): LogRecord[] {
 export const labBackend = Router();
 
 labBackend.get('/rum/init', (req, res) => {
+  // Lab-only: what the broker was set to, for the header to show what this
+  // page load got. A real broker sends nothing like it.
+  const lab = { mode: state.brokerMode, telemetries: state.telemetries };
   const answer = broker(req);
   if (answer) {
-    res.json(answer);
+    res.json({ ...answer, lab });
   } else {
-    res
-      .status(500)
-      .json({ error: `broker unavailable (lab mode: ${state.brokerMode})` });
+    res.status(500).json({
+      error: `broker unavailable (lab mode: ${state.brokerMode})`,
+      lab
+    });
   }
 });
 
diff --git a/projects/watchtower-lab/src/lab/lab-config-check.ts b/projects/watchtower-lab/src/lab/lab-config-check.ts
new file mode 100644
index 0000000..56f2e34
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-config-check.ts
@@ -0,0 +1,42 @@
+/** A value's type as the check names it: `array`, `object`, `number`… */
+function typeOf(value: unknown): string {
+  return Array.isArray(value)
+    ? 'array'
+    : value === null
+      ? 'null'
+      : typeof value;
+}
+
+/**
+ * What's wrong with a `?config=` overlay, or `''`: a section the lab doesn't
+ * take, a setting the section doesn't have, or a value of another type than
+ * the setting's. `known` holds each section's settings, with values of the
+ * types they take — the settings in effect will do.
+ */
+export function labCheckConfig(
+  overlay: Record<string, unknown>,
+  known: Record<string, Record<string, unknown>>
+): string {
+  for (const [section, settings] of Object.entries(overlay)) {
+    const valid = known[section];
+    if (!valid) {
+      return `"${section}" isn't a section; use ${Object.keys(known).join(', ')}.`;
+    }
+    if (typeOf(settings) !== 'object') {
+      return `"${section}" should be an object.`;
+    }
+    for (const [key, value] of Object.entries(
+      settings as Record<string, unknown>
+    )) {
+      if (!(key in valid)) {
+        return `"${section}.${key}" isn't a setting; ${section} has ${Object.keys(valid).join(', ')}.`;
+      }
+      // Patterns, written as text, sit in arrays: checked as arrays.
+      const expected = typeOf(valid[key]);
+      if (typeOf(value) !== expected) {
+        return `"${section}.${key}" should be ${expected === 'array' || expected === 'object' ? 'an' : 'a'} ${expected}.`;
+      }
+    }
+  }
+  return '';
+}
diff --git a/projects/watchtower-lab/src/lab/lab-results.component.ts b/projects/watchtower-lab/src/lab/lab-results.component.ts
new file mode 100644
index 0000000..75db579
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-results.component.ts
@@ -0,0 +1,137 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  UwtTelemetryMonitor,
+  UwtTelemetryObservedEvent
+} from '@absaoss-cps/ngx-ui-watchtower';
+import { LabWire } from './lab-wire.service';
+
+/** How many of the page's latest events are listed. */
+const LISTED = 8;
+
+const KIND: Record<UwtTelemetryObservedEvent['kind'], string> = {
+  bi: 'BI',
+  scenario: 'Scenario',
+  'scenario-step': 'Step',
+  log: 'Log',
+  error: 'Error',
+  unknown: 'Event'
+};
+
+function field(payload: unknown, key: string): string {
+  const value = (payload as Record<string, unknown> | null)?.[key];
+  return value === undefined || value === null ? '' : String(value);
+}
+
+/** What an event is called, as the list shows it. */
+function nameOf(event: UwtTelemetryObservedEvent): string {
+  const p = event.payload;
+  switch (event.kind) {
+    case 'bi':
+      return field(p, 'eventName');
+    case 'scenario':
+      return `${field(p, 'scenarioName')} · ${field(p, 'status')}`;
+    case 'scenario-step':
+      return `${field(p, 'scenarioName')} · ${field(p, 'name')}`;
+    case 'log':
+      return `${field(p, 'level')} · ${field(p, 'message')}`;
+    case 'error':
+      return `${field(p, 'name')}: ${field(p, 'message')}`;
+    default:
+      return 'eventType' in event ? event.eventType : '';
+  }
+}
+
+/**
+ * A page's results, beside its actions: the page's own readouts, projected,
+ * then what the page has sent since it opened, each ticked once the lab's
+ * mock backend has it. The latest change is said in a polite live region.
+ *
+ * Arrival is matched by content: a BI or scenario event's payload is RUM's
+ * details, a log record arrives as it was handed over, and an error, which
+ * RUM records its own way, by its message.
+ */
+@Component({
+  selector: 'lab-results',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'lab-results' },
+  template: `
+    <h2>Results</h2>
+    <ng-content />
+    <h3>Sent from this page</h3>
+    @if (items().length === 0) {
+      <p>Nothing yet.</p>
+    } @else {
+      <ol class="lab-results__sent">
+        @for (item of items(); track item.sequence) {
+          <li>
+            <span class="lab-results__kind">{{ item.kind }}</span>
+            <span class="lab-results__name" [title]="item.name">{{
+              item.name
+            }}</span>
+            <span
+              class="lab-results__state"
+              [class.lab-results__state--received]="item.received"
+              >{{ item.received ? '✓ received' : 'sent' }}</span
+            >
+          </li>
+        }
+      </ol>
+    }
+    <p class="cps-sr-only" role="status">{{ said() }}</p>
+  `
+})
+export class LabResultsComponent {
+  private readonly wire = inject(LabWire);
+  private readonly sent = signal<readonly UwtTelemetryObservedEvent[]>([]);
+
+  /** Whether the mock backend has an event. */
+  private readonly arrived = computed(() => {
+    const rum = this.wire.rum();
+    const details = new Set(rum.map((e) => JSON.stringify(e.details)));
+    const errors = new Set(
+      rum
+        .filter((e) => e.type.endsWith('js_error_event'))
+        .map((e) => field(e.details, 'message'))
+    );
+    const logs = new Set(this.wire.logs().map((r) => JSON.stringify(r)));
+    return (event: UwtTelemetryObservedEvent): boolean =>
+      event.destination === 'log-provider'
+        ? logs.has(JSON.stringify(event.payload))
+        : event.kind === 'error'
+          ? errors.has(field(event.payload, 'message'))
+          : details.has(JSON.stringify(event.payload));
+  });
+
+  protected readonly items = computed(() => {
+    const arrived = this.arrived();
+    return this.sent().map((event) => ({
+      sequence: event.sequence,
+      kind: KIND[event.kind],
+      name: nameOf(event),
+      received: arrived(event)
+    }));
+  });
+
+  /** The latest event and where it is, for screen readers. */
+  protected readonly said = computed(() => {
+    const [latest] = this.items();
+    return latest
+      ? `${latest.kind} ${latest.name}: ${latest.received ? 'received' : 'sent'}.`
+      : '';
+  });
+
+  constructor() {
+    inject(UwtTelemetryMonitor)
+      .events$.pipe(takeUntilDestroyed())
+      .subscribe((event) =>
+        this.sent.update((sent) => [event, ...sent].slice(0, LISTED))
+      );
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
index a0a2b6f..efd11d7 100644
--- a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import {
   UwtRumBootstrap,
   UwtRumCredentialsProvider
@@ -28,6 +28,13 @@ const telemetryOptions = (origin: string): Record<string, object> => ({
   replay: { recordOptions: { blockSelector: '.lab-status, lab-wire-page' } }
 });
 
+/** How the mock broker was set when this page load started RUM. */
+export interface LabBrokerStartup {
+  mode: string;
+  /** `null` for the library's default. */
+  telemetries: readonly string[] | null;
+}
+
 /**
  * Asks the lab's mock broker for the app monitor config and credentials, as
  * the library's own example does: a broker that says RUM is off returns
@@ -38,12 +45,21 @@ export class LabRumCredentialsProvider implements UwtRumCredentialsProvider {
   /** This page's calls, so the broker can tell startup from a refresh. */
   private calls = 0;
 
+  /** What this page load got, from the broker's lab-only echo. */
+  readonly startup = signal<LabBrokerStartup | undefined>(undefined);
+
   async load(): Promise<UwtRumBootstrap | null> {
-    const response = await fetch(`/rum/init?call=${++this.calls}`);
+    const call = ++this.calls;
+    const response = await fetch(`/rum/init?call=${call}`);
+    const body = await response.json().catch(() => ({}));
+    if (call === 1 && body.lab) {
+      this.startup.set(body.lab);
+    }
     if (!response.ok) {
       throw new Error(`RUM bootstrap failed: ${response.status}`);
     }
-    const { enabled, config, credentials } = await response.json();
+    // Only these: the lab's own echo goes no further.
+    const { enabled, config, credentials } = body;
     if (!enabled) {
       return null;
     }
diff --git a/projects/watchtower-lab/src/lab/lab-wire.service.ts b/projects/watchtower-lab/src/lab/lab-wire.service.ts
index 0aadd58..a5fc983 100644
--- a/projects/watchtower-lab/src/lab/lab-wire.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-wire.service.ts
@@ -41,6 +41,17 @@ export const LAB_TELEMETRIES = [
 
 export type LabTelemetry = (typeof LAB_TELEMETRIES)[number];
 
+/** RUM's telemetries as people read them: `default`, `none`, or a list. */
+export function labTelemetriesLabel(
+  telemetries: readonly string[] | null
+): string {
+  return telemetries === null ? 'default' : telemetries.join(', ') || 'none';
+}
+
+function sameJson(a: unknown, b: unknown): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
 /** How often "On the wire" and the status bar ask the mock backend, in ms. */
 const POLL_MS = 1500;
 
@@ -60,20 +71,32 @@ const labFetch =
  */
 @Injectable({ providedIn: 'root' })
 export class LabWire {
+  /** Whether the mock backend has answered yet. */
+  readonly polled = signal(false);
   readonly batches = signal(0);
   readonly rum = signal<readonly LabRumEvent[]>([]);
   readonly logs = signal<readonly UwtLogRecord[]>([]);
   readonly brokerMode = signal<LabBrokerMode>('ok');
+
+  // The next two change only when their content does: each poll brings new
+  // objects, and a draft built from them would be reset under the user's
+  // typing.
+
   /** Laid over the broker's app monitor config. */
-  readonly brokerConfig = signal<Record<string, unknown>>({});
-  /** RUM telemetries the broker names; `null` for the library's default. */
-  readonly telemetries = signal<readonly LabTelemetry[] | null>(null);
+  readonly brokerConfig = signal<Record<string, unknown>>(
+    {},
+    { equal: sameJson }
+  );
 
-  readonly telemetriesLabel = computed(() => {
-    const telemetries = this.telemetries();
-    return telemetries === null ? 'default' : telemetries.join(', ') || 'none';
+  /** RUM telemetries the broker names; `null` for the library's default. */
+  readonly telemetries = signal<readonly LabTelemetry[] | null>(null, {
+    equal: sameJson
   });
 
+  readonly telemetriesLabel = computed(() =>
+    labTelemetriesLabel(this.telemetries())
+  );
+
   /** The library's own events, as opposed to RUM's page views and timings. */
   readonly libraryEvents = computed(
     () => this.rum().filter((e) => e.type.startsWith('com.uwt.')).length
@@ -103,6 +126,7 @@ export class LabWire {
       this.brokerMode.set(state.brokerMode);
       this.brokerConfig.set(state.brokerConfig);
       this.telemetries.set(state.telemetries);
+      this.polled.set(true);
     } catch {
       // The mock backend isn't running: `npm run lab` starts it.
     }
diff --git a/projects/watchtower-lab/src/shell/pages/bi.page.ts b/projects/watchtower-lab/src/shell/pages/bi.page.ts
index 06de5f6..64f2bf2 100644
--- a/projects/watchtower-lab/src/shell/pages/bi.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/bi.page.ts
@@ -9,32 +9,43 @@ import {
   UwtScenarioTelemetryService
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent } from 'cps-ui-kit';
+import { LabResultsComponent } from '../../lab/lab-results.component';
 
 @Component({
   selector: 'lab-bi-page',
-  imports: [CpsButtonComponent],
+  imports: [CpsButtonComponent, LabResultsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
+    <section class="lab-page lab-page--results">
       <h1>BI events</h1>
       <p>
-        Identical events within 400 ms are collapsed into one. Check the Event
-        Inspector or On the wire for what arrived.
+        Identical events within 400 ms are collapsed into one. Results shows
+        what was sent, and when it arrived.
       </p>
-      <div class="lab-card">
-        <div class="lab-actions">
-          <cps-button label="Track a click" (clicked)="click()" />
-          <cps-button
-            label="Fire twice at once"
-            type="outlined"
-            (clicked)="doubleFire()" />
-          <cps-button
-            label="Feature, tied to a scenario"
-            type="outlined"
-            (clicked)="feature()" />
+      <div class="lab-page__cards">
+        <div class="lab-card">
+          <h2>Tracking</h2>
+          <div class="lab-actions">
+            <cps-button label="Track a click" (clicked)="click()" />
+            <cps-button
+              label="Fire twice at once"
+              type="outlined"
+              (clicked)="doubleFire()" />
+            <cps-button
+              label="Feature, tied to a scenario"
+              type="outlined"
+              (clicked)="feature()" />
+          </div>
         </div>
       </div>
-      <pre class="lab-readout">{{ readout() || 'Nothing tracked yet.' }}</pre>
+      <lab-results>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Last result"
+          >{{ readout() || 'Nothing tracked yet.' }}</pre>
+      </lab-results>
     </section>
   `
 })
diff --git a/projects/watchtower-lab/src/shell/pages/identity.page.ts b/projects/watchtower-lab/src/shell/pages/identity.page.ts
index 7d26d1e..c3ce539 100644
--- a/projects/watchtower-lab/src/shell/pages/identity.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/identity.page.ts
@@ -1,6 +1,12 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal
+} from '@angular/core';
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent } from 'cps-ui-kit';
+import { LabResultsComponent } from '../../lab/lab-results.component';
 
 /** RUM user ids must be UUIDs. */
 const ANNA = '3f2504e0-4f89-41d3-9a0c-0305e82c3301';
@@ -8,40 +14,61 @@ const BEN = '9b2d1c6e-7a53-4d0e-8f3b-2c1a5e6d7f80';
 
 @Component({
   selector: 'lab-identity-page',
-  imports: [CpsButtonComponent],
+  imports: [CpsButtonComponent, LabResultsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
+    <section class="lab-page lab-page--results">
       <h1>Identity</h1>
       <p>
         The status bar shows the session and user. Signing out while signed in
         starts a new session; signing out while signed out changes nothing. On
         the wire, each event's metadata carries <code>signedIn</code>.
       </p>
-      <div class="lab-card">
-        <div class="lab-actions">
-          <cps-button
-            label="Sign in as Anna"
-            (clicked)="sink.setUserId(anna)" />
-          <cps-button
-            label="Sign in as Ben"
-            type="outlined"
-            (clicked)="sink.setUserId(ben)" />
-          <cps-button
-            label="Sign out (undefined)"
-            type="outlined"
-            (clicked)="sink.setUserId(undefined)" />
-          <cps-button
-            label="Sign out ('')"
-            type="outlined"
-            (clicked)="sink.setUserId('')" />
+      <div class="lab-page__cards">
+        <div class="lab-card">
+          <h2>Signing in and out</h2>
+          <div class="lab-actions">
+            <cps-button label="Sign in as Anna" (clicked)="setUser(anna)" />
+            <cps-button
+              label="Sign in as Ben"
+              type="outlined"
+              (clicked)="setUser(ben)" />
+            <cps-button
+              label="Sign out (undefined)"
+              type="outlined"
+              (clicked)="setUser(undefined)" />
+            <cps-button
+              label="Sign out ('')"
+              type="outlined"
+              (clicked)="setUser('')" />
+          </div>
         </div>
       </div>
+      <lab-results>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Last result"
+          >{{ readout() || 'No change yet.' }}</pre>
+      </lab-results>
     </section>
   `
 })
 export class IdentityPage {
-  protected readonly sink = inject(UwtTelemetrySink);
   protected readonly anna = ANNA;
   protected readonly ben = BEN;
+  protected readonly readout = signal('');
+
+  private readonly sink = inject(UwtTelemetrySink);
+
+  protected setUser(userId: string | undefined): void {
+    this.sink.setUserId(userId);
+    this.readout.set(
+      `setUserId(${userId === undefined ? 'undefined' : `'${userId}'`}): ` +
+        (userId
+          ? `events from now on carry ${userId === ANNA ? 'Anna' : 'Ben'}'s id.`
+          : 'signed out — the status bar shows any new session.')
+    );
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/inspector.page.ts b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
index 3a20f3f..d769c7b 100644
--- a/projects/watchtower-lab/src/shell/pages/inspector.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
@@ -11,26 +11,32 @@ import {
   UwtEventInspectorService,
   UwtInspectorDock
 } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
-import { CpsButtonComponent, CpsSwitchComponent } from 'cps-ui-kit';
+import {
+  CpsButtonComponent,
+  CpsButtonToggleComponent,
+  CpsSwitchComponent
+} from 'cps-ui-kit';
 import { LabLayout } from '../../lab/lab-layout.service';
 import { LAB_OPTIONS } from '../shell.config';
 
-const DOCKS: { dock: UwtInspectorDock; label: string }[] = [
-  { dock: 'dialog', label: 'Dialog' },
-  { dock: 'window', label: 'Separate window' },
-  { dock: 'left', label: 'Left pane' },
-  { dock: 'right', label: 'Right pane' },
-  { dock: 'bottom', label: 'Bottom pane' }
+const DOCKS: { value: UwtInspectorDock; label: string }[] = [
+  { value: 'dialog', label: 'Dialog' },
+  { value: 'window', label: 'Separate window' },
+  { value: 'left', label: 'Left pane' },
+  { value: 'right', label: 'Right pane' },
+  { value: 'bottom', label: 'Bottom pane' }
 ];
 
 @Component({
   selector: 'lab-inspector-page',
-  imports: [CpsButtonComponent, CpsSwitchComponent],
+  imports: [CpsButtonComponent, CpsButtonToggleComponent, CpsSwitchComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
       <h1>Event Inspector</h1>
       <p>
+        Shows, live, what this app hands to its telemetry destinations, with
+        events to try it on below.
         {{
           options.inspector === 'off'
             ? 'Disabled with ?inspector=off.'
@@ -42,16 +48,21 @@ const DOCKS: { dock: UwtInspectorDock; label: string }[] = [
 
       <div class="lab-card">
         <h2>Where it opens</h2>
+        <!-- Pressed: where it is now. Buttons rather than radios, so
+          arrowing along them doesn't move it at every step. -->
         <div class="lab-actions">
-          @for (option of docks; track option.dock) {
-            <cps-button
-              [label]="option.label"
-              type="outlined"
-              (clicked)="inspector.setDock(option.dock)" />
-          }
+          <cps-button-toggle
+            ariaLabel="Where it opens"
+            [options]="docks"
+            [radioNavigation]="false"
+            [equalWidths]="false"
+            [value]="inspector.dock()"
+            (valueChanged)="inspector.setDock($event)" />
           <cps-button
+            class="lab-apart"
             label="Close"
-            type="borderless"
+            type="outlined"
+            [disabled]="!inspector.isOpen()"
             (clicked)="inspector.close()" />
         </div>
         <cps-switch
@@ -78,10 +89,7 @@ const DOCKS: { dock: UwtInspectorDock; label: string }[] = [
           Inspector sees them — shapes the library's own services never produce.
         </p>
         <div class="lab-actions">
-          <cps-button
-            label="A 300,000-character payload"
-            type="outlined"
-            (clicked)="huge()" />
+          <cps-button label="A 300,000-character payload" (clicked)="huge()" />
           <cps-button label="Odd shapes" type="outlined" (clicked)="odd()" />
           <cps-button
             label="An unknown event type"
diff --git a/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts b/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
index 6ca7e6a..902bc8d 100644
--- a/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/lifecycle.page.ts
@@ -1,73 +1,104 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal
+} from '@angular/core';
 import {
   UwtScenarioTelemetryService,
   UwtTelemetrySink
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtRumTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower/rum';
 import { CpsButtonComponent } from 'cps-ui-kit';
+import { LabResultsComponent } from '../../lab/lab-results.component';
 
 @Component({
   selector: 'lab-lifecycle-page',
-  imports: [CpsButtonComponent],
+  imports: [CpsButtonComponent, LabResultsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
+    <section class="lab-page lab-page--results">
       <h1>Lifecycle</h1>
-      <div class="lab-card">
-        <h2>Flushing</h2>
-        <p>
-          Sends what the sink is holding now, rather than at its next batch.
-        </p>
-        <div class="lab-actions">
-          <cps-button label="Flush now" (clicked)="sink.flush()" />
+      <p>
+        What the sink does around the page's own life: sending what it holds on
+        request or when the tab hides, a scenario left running as the page goes,
+        and page views the router doesn't see.
+      </p>
+      <div class="lab-page__cards">
+        <div class="lab-card">
+          <h2>Flushing</h2>
+          <p>
+            Sends what the sink is holding now, rather than at its next batch.
+          </p>
+          <div class="lab-actions">
+            <cps-button label="Flush now" (clicked)="flush()" />
+          </div>
         </div>
-      </div>
-      <div class="lab-card">
-        <h2>Leaving with a scenario running</h2>
-        <p>
-          Starts lab-abandoned, then reloads. As the page goes, the scenario is
-          settled as abandoned and sent by beacon: look for it On the wire.
-        </p>
-        <div class="lab-actions">
-          <cps-button
-            label="Start a scenario and reload"
-            type="outlined"
-            (clicked)="leave()" />
+        <div class="lab-card">
+          <h2>Leaving with a scenario running</h2>
+          <p>
+            Starts lab-abandoned, then reloads. As the page goes, the scenario
+            is settled as abandoned and sent by beacon: look for it On the wire.
+          </p>
+          <div class="lab-actions">
+            <cps-button
+              label="Start a scenario and reload"
+              (clicked)="leave()" />
+          </div>
         </div>
-      </div>
-      <div class="lab-card">
-        <h2>A page view of its own</h2>
-        <p>
-          The RUM sink's recordPageView, for a view the router doesn't see:
-          /lab/virtual-page. Only with the RUM destination.
-        </p>
-        <div class="lab-actions">
-          <cps-button
-            label="Record a page view"
-            type="outlined"
-            [disabled]="!rum"
-            (clicked)="rum?.recordPageView('/lab/virtual-page')" />
+        <div class="lab-card">
+          <h2>A page view of its own</h2>
+          <p>
+            The RUM sink's recordPageView, for a view the router doesn't see:
+            /lab/virtual-page. Only with the RUM destination.
+          </p>
+          <div class="lab-actions">
+            <cps-button
+              label="Record a page view"
+              [disabled]="!rum"
+              (clicked)="pageView()" />
+          </div>
+        </div>
+        <div class="lab-card">
+          <h2>Hiding the tab</h2>
+          <p>
+            Switch to another tab, then come back: the sink flushes when the
+            page is hidden, so whatever was waiting shows up On the wire
+            straight away.
+          </p>
         </div>
       </div>
-      <div class="lab-card">
-        <h2>Hiding the tab</h2>
-        <p>
-          Switch to another tab, then come back: the sink flushes when the page
-          is hidden, so whatever was waiting shows up On the wire straight away.
-        </p>
-      </div>
+      <lab-results>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Last result"
+          >{{ readout() || 'Nothing done yet.' }}</pre>
+      </lab-results>
     </section>
   `
 })
 export class LifecyclePage {
-  protected readonly sink = inject(UwtTelemetrySink);
+  private readonly sink = inject(UwtTelemetrySink);
+  private readonly scenarios = inject(UwtScenarioTelemetryService);
+
+  protected readonly readout = signal('');
   protected readonly rum =
     this.sink instanceof UwtRumTelemetrySink ? this.sink : undefined;
 
-  private readonly scenarios = inject(UwtScenarioTelemetryService);
+  protected flush(): void {
+    this.sink.flush();
+    this.readout.set('Flushed: what the sink held is on its way.');
+  }
 
   protected leave(): void {
     this.scenarios.start({ name: 'lab-abandoned' }).step('fetch');
     location.reload();
   }
+
+  protected pageView(): void {
+    this.rum?.recordPageView('/lab/virtual-page');
+    this.readout.set('Recorded a page view of /lab/virtual-page.');
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/logging.page.ts b/projects/watchtower-lab/src/shell/pages/logging.page.ts
index 2c724e0..34cabb2 100644
--- a/projects/watchtower-lab/src/shell/pages/logging.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/logging.page.ts
@@ -9,80 +9,85 @@ import {
   UwtScenarioTelemetryService
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent, CpsTextareaComponent } from 'cps-ui-kit';
+import { LabResultsComponent } from '../../lab/lab-results.component';
 import { parseJsonObject } from '../../lab/lab-json';
 
 @Component({
   selector: 'lab-logging-page',
-  imports: [CpsButtonComponent, CpsTextareaComponent],
+  imports: [CpsButtonComponent, CpsTextareaComponent, LabResultsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
+    <section class="lab-page lab-page--results">
       <h1>Logging</h1>
       <p>
         Records go to the lab's mock log backend. Errors are also mirrored to
         RUM (mirrorErrorsToRum). The <code>noisy</code> logger only writes
         warnings and up.
       </p>
-      <div class="lab-card">
-        <h2>The <code>lab</code> logger</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="log"
-            type="outlined"
-            (clicked)="lab.log('A lab log line')" />
-          <cps-button
-            label="warn"
-            type="outlined"
-            (clicked)="lab.warn('A lab warning')" />
-          <cps-button label="error, with an Error" (clicked)="error()" />
+      <div class="lab-page__cards">
+        <div class="lab-card">
+          <h2>The <code>lab</code> logger</h2>
+          <div class="lab-actions">
+            <cps-button label="log" (clicked)="lab.log('A lab log line')" />
+            <cps-button
+              label="warn"
+              type="outlined"
+              (clicked)="lab.warn('A lab warning')" />
+            <cps-button
+              label="error, with an Error"
+              type="outlined"
+              (clicked)="error()" />
+          </div>
         </div>
-      </div>
-      <div class="lab-card">
-        <h2>The <code>noisy</code> logger (warn and up)</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="log (dropped)"
-            type="outlined"
-            (clicked)="noisy.log('Not written')" />
-          <cps-button
-            label="warn (written)"
-            type="outlined"
-            (clicked)="noisy.warn('A noisy warning')" />
+        <div class="lab-card">
+          <h2>The <code>noisy</code> logger (warn and up)</h2>
+          <div class="lab-actions">
+            <cps-button
+              label="log (dropped)"
+              type="outlined"
+              (clicked)="noisy.log('Not written')" />
+            <cps-button
+              label="warn (written)"
+              (clicked)="noisy.warn('A noisy warning')" />
+          </div>
         </div>
-      </div>
-      <div class="lab-card">
-        <h2>Tied to a journey</h2>
-        <p>
-          A warning whose correlationId is a scenario's id: the filter below is
-          set to find it.
-        </p>
-        <div class="lab-actions">
-          <cps-button
-            label="Log inside a scenario"
-            type="outlined"
-            (clicked)="correlated()" />
+        <div class="lab-card">
+          <h2>Tied to a journey</h2>
+          <p>
+            A warning whose correlationId is a scenario's id: the filter below
+            is set to find it.
+          </p>
+          <div class="lab-actions">
+            <cps-button
+              label="Log inside a scenario"
+              (clicked)="correlated()" />
+          </div>
         </div>
-      </div>
-      <div class="lab-card">
-        <h2>Reading back</h2>
-        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-        <cps-textarea
-          ngSkipHydration
-          label="Query filter (JSON)"
-          placeholder='{ "logger": "lab", "minLevel": "warn", "limit": 20 }'
-          width="30rem"
-          [rows]="3"
-          [value]="filter()"
-          [error]="filterError()"
-          (valueChanged)="filter.set($event)" />
-        <div class="lab-actions">
-          <cps-button
-            label="Run query"
-            type="outlined"
-            (clicked)="runQuery()" />
+        <div class="lab-card">
+          <h2>Reading back</h2>
+          <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+          <cps-textarea
+            ngSkipHydration
+            label="Query filter (JSON)"
+            placeholder='{ "logger": "lab", "minLevel": "warn", "limit": 20 }'
+            width="30rem"
+            [rows]="3"
+            [value]="filter()"
+            [error]="filterError()"
+            (valueChanged)="filter.set($event)" />
+          <div class="lab-actions">
+            <cps-button label="Run query" (clicked)="runQuery()" />
+          </div>
         </div>
       </div>
-      <pre class="lab-readout">{{ readout() || 'No query yet.' }}</pre>
+      <lab-results>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Last result"
+          >{{ readout() || 'No query yet.' }}</pre>
+      </lab-results>
     </section>
   `
 })
diff --git a/projects/watchtower-lab/src/shell/pages/privacy.page.ts b/projects/watchtower-lab/src/shell/pages/privacy.page.ts
index 08ea6f9..9e305d2 100644
--- a/projects/watchtower-lab/src/shell/pages/privacy.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/privacy.page.ts
@@ -16,6 +16,7 @@ import {
   uwtScrubString
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent, CpsTextareaComponent } from 'cps-ui-kit';
+import { LabResultsComponent } from '../../lab/lab-results.component';
 
 /** Values that must never leave the browser as they are. */
 const PERSONAL = {
@@ -28,70 +29,79 @@ const PERSONAL = {
 
 @Component({
   selector: 'lab-privacy-page',
-  imports: [CpsButtonComponent, CpsTextareaComponent],
+  imports: [CpsButtonComponent, CpsTextareaComponent, LabResultsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
+    <section class="lab-page lab-page--results">
       <h1>Privacy</h1>
       <p>
         Each button sends the values below; with key patterns and
         scanValuePatterns on, none of them should appear as they are — not in
         the Event Inspector, not on the wire.
       </p>
-      <pre class="lab-readout">{{ personal }}</pre>
-      <div class="lab-card">
-        <div class="lab-actions">
-          <cps-button label="As BI metadata" (clicked)="bi()" />
-          <cps-button
-            label="In a log message"
-            type="outlined"
-            (clicked)="log()" />
-          <cps-button
-            label="In a failing scenario"
-            type="outlined"
-            (clicked)="scenario()" />
+      <div class="lab-page__cards">
+        <div class="lab-card">
+          <h2>Personal values</h2>
+          <pre class="lab-readout">{{ personal }}</pre>
+          <div class="lab-actions">
+            <cps-button label="As BI metadata" (clicked)="bi()" />
+            <cps-button
+              label="In a log message"
+              type="outlined"
+              (clicked)="log()" />
+            <cps-button
+              label="In a failing scenario"
+              type="outlined"
+              (clicked)="scenario()" />
+          </div>
         </div>
-      </div>
-      <p>{{ sent() }}</p>
 
-      <div class="lab-card">
-        <h2>Errors of any shape</h2>
-        <p>
-          Logged as errors: a string is scrubbed, an object is reduced to its
-          type, and an HTTP error keeps its status but not its URL's query.
-        </p>
-        <div class="lab-actions">
-          <cps-button
-            label="An error as a string"
-            type="outlined"
-            (clicked)="errorAs('string')" />
-          <cps-button
-            label="An error as a plain object"
-            type="outlined"
-            (clicked)="errorAs('object')" />
-          <cps-button
-            label="An HttpErrorResponse"
-            type="outlined"
-            (clicked)="errorAs('http')" />
+        <div class="lab-card">
+          <h2>Errors of any shape</h2>
+          <p>
+            Logged as errors: a string is scrubbed, an object is reduced to its
+            type, and an HTTP error keeps its status but not its URL's query.
+          </p>
+          <div class="lab-actions">
+            <cps-button
+              label="An error as a string"
+              (clicked)="errorAs('string')" />
+            <cps-button
+              label="An error as a plain object"
+              type="outlined"
+              (clicked)="errorAs('object')" />
+            <cps-button
+              label="An HttpErrorResponse"
+              type="outlined"
+              (clicked)="errorAs('http')" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>Scrub anything</h2>
-        <p>
-          What the library makes of any text, with this app's redaction
-          settings: as a string, as metadata, and as an error's message.
-        </p>
-        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-        <cps-textarea
-          ngSkipHydration
-          label="Text to scrub"
-          width="30rem"
-          [rows]="3"
-          [value]="text()"
-          (valueChanged)="text.set($event)" />
-        <pre class="lab-readout lab-scrubbed">{{ scrubbed() }}</pre>
+        <div class="lab-card">
+          <h2>Scrub anything</h2>
+          <p>
+            What the library makes of any text, with this app's redaction
+            settings: as a string, as metadata, and as an error's message.
+          </p>
+          <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+          <cps-textarea
+            ngSkipHydration
+            label="Text to scrub"
+            width="30rem"
+            [rows]="3"
+            [value]="text()"
+            (valueChanged)="text.set($event)" />
+          <pre class="lab-readout lab-scrubbed">{{ scrubbed() }}</pre>
+        </div>
       </div>
+      <lab-results>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Last result"
+          >{{ sent() || 'Nothing sent yet.' }}</pre>
+      </lab-results>
     </section>
   `
 })
diff --git a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
index a839fd5..ef4dfb3 100644
--- a/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/scenarios.page.ts
@@ -13,151 +13,149 @@ import {
   UwtScenarioTelemetryService
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent } from 'cps-ui-kit';
+import { LabResultsComponent } from '../../lab/lab-results.component';
 
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 @Component({
   selector: 'lab-scenarios-page',
-  imports: [CpsButtonComponent],
+  imports: [CpsButtonComponent, LabResultsComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
+    <section class="lab-page lab-page--results">
       <h1>Scenarios</h1>
       <p>
-        Each settled scenario's record appears below, as the sink receives it.
+        Each settled scenario's record appears in Results, as the sink receives
+        it.
       </p>
-
-      <div class="lab-card">
-        <h2>Settling</h2>
-        <div class="lab-actions">
-          <cps-button label="Complete, with 3 steps" (clicked)="happyPath()" />
-          <cps-button
-            label="Fail with an error"
-            type="outlined"
-            (clicked)="failure()" />
-          <cps-button label="Cancel" type="outlined" (clicked)="cancel()" />
-          <cps-button
-            label="Incomplete"
-            type="outlined"
-            (clicked)="incomplete()" />
-          <cps-button
-            label="Time out after 1.5 s"
-            type="outlined"
-            (clicked)="timeout()" />
+      <div class="lab-page__cards">
+        <div class="lab-card">
+          <h2>Settling</h2>
+          <div class="lab-actions">
+            <cps-button
+              label="Complete, with 3 steps"
+              (clicked)="happyPath()" />
+            <cps-button
+              label="Fail with an error"
+              type="outlined"
+              (clicked)="failure()" />
+            <cps-button label="Cancel" type="outlined" (clicked)="cancel()" />
+            <cps-button
+              label="Incomplete"
+              type="outlined"
+              (clicked)="incomplete()" />
+            <cps-button
+              label="Time out after 1.5 s"
+              type="outlined"
+              (clicked)="timeout()" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>Timing</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="Backdated by 1.5 s"
-            type="outlined"
-            (clicked)="backdated()" />
-          <cps-button
-            label="5 aggregated batches"
-            type="outlined"
-            (clicked)="aggregates()" />
+        <div class="lab-card">
+          <h2>Timing</h2>
+          <div class="lab-actions">
+            <cps-button label="Backdated by 1.5 s" (clicked)="backdated()" />
+            <cps-button
+              label="5 aggregated batches"
+              type="outlined"
+              (clicked)="aggregates()" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>HTTP, with traceScenario</h2>
-        <p>
-          Search cancels the search in flight (switchMap): click it several
-          times quickly, and only the last one completes; the others settle as
-          abandoned, with abandonedBy: caller.
-        </p>
-        <div class="lab-actions">
-          <cps-button
-            label="Request (600 ms)"
-            type="outlined"
-            (clicked)="request()" />
-          <cps-button
-            label="Request that fails (500)"
-            type="outlined"
-            (clicked)="failingRequest()" />
-          <cps-button
-            label="Search"
-            type="outlined"
-            (clicked)="searches.next(800)" />
+        <div class="lab-card">
+          <h2>HTTP, with traceScenario</h2>
+          <p>
+            Search cancels the search in flight (switchMap): click it several
+            times quickly, and only the last one completes; the others settle as
+            abandoned, with abandonedBy: caller.
+          </p>
+          <div class="lab-actions">
+            <cps-button label="Request (600 ms)" (clicked)="request()" />
+            <cps-button
+              label="Request that fails (500)"
+              type="outlined"
+              (clicked)="failingRequest()" />
+            <cps-button
+              label="Search"
+              type="outlined"
+              (clicked)="searches.next(800)" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>A running scenario</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="Start"
-            type="outlined"
-            (clicked)="startRunning()" />
-          <cps-button
-            label="Show toRecord()"
-            type="outlined"
-            (clicked)="showRunning()" />
-          <cps-button
-            label="Complete it"
-            type="outlined"
-            (clicked)="completeRunning()" />
+        <div class="lab-card">
+          <h2>A running scenario</h2>
+          <div class="lab-actions">
+            <cps-button label="Start" (clicked)="startRunning()" />
+            <cps-button
+              label="Show toRecord()"
+              type="outlined"
+              (clicked)="showRunning()" />
+            <cps-button
+              label="Complete it"
+              type="outlined"
+              (clicked)="completeRunning()" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>The rest of the scenario API</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="Steps with detail"
-            type="outlined"
-            (clicked)="detailed()" />
-          <cps-button
-            label="A parent and a child"
-            type="outlined"
-            (clicked)="family()" />
-          <cps-button
-            label="settle('incomplete')"
-            type="outlined"
-            (clicked)="settleDirectly()" />
-          <cps-button label="51 at once" type="outlined" (clicked)="crowd()" />
+        <div class="lab-card">
+          <h2>The rest of the scenario API</h2>
+          <div class="lab-actions">
+            <cps-button label="Steps with detail" (clicked)="detailed()" />
+            <cps-button
+              label="A parent and a child"
+              type="outlined"
+              (clicked)="family()" />
+            <cps-button
+              label="settle('incomplete')"
+              type="outlined"
+              (clicked)="settleDirectly()" />
+            <cps-button
+              label="51 at once"
+              type="outlined"
+              (clicked)="crowd()" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>Active scenarios</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="Start a long one"
-            type="outlined"
-            (clicked)="startLong()" />
-          <cps-button
-            label="Look them up"
-            type="outlined"
-            (clicked)="lookUp()" />
-          <cps-button
-            label="Cancel every active one"
-            type="outlined"
-            (clicked)="cancelActive()" />
+        <div class="lab-card">
+          <h2>Active scenarios</h2>
+          <div class="lab-actions">
+            <cps-button label="Start a long one" (clicked)="startLong()" />
+            <cps-button
+              label="Look them up"
+              type="outlined"
+              (clicked)="lookUp()" />
+            <cps-button
+              label="Cancel every active one"
+              type="outlined"
+              (clicked)="cancelActive()" />
+          </div>
         </div>
-      </div>
 
-      <div class="lab-card">
-        <h2>traceScenario's options</h2>
-        <div class="lab-actions">
-          <cps-button
-            label="outcome, from the response"
-            type="outlined"
-            (clicked)="outcomeFromResponse()" />
-          <cps-button
-            label="cancelOutcome, unsubscribed early"
-            type="outlined"
-            (clicked)="unsubscribedEarly()" />
-          <cps-button
-            label="valueThenTeardown: 'cancel'"
-            type="outlined"
-            (clicked)="valueThenCancel()" />
+        <div class="lab-card">
+          <h2>traceScenario's options</h2>
+          <div class="lab-actions">
+            <cps-button
+              label="outcome, from the response"
+              (clicked)="outcomeFromResponse()" />
+            <cps-button
+              label="cancelOutcome, unsubscribed early"
+              type="outlined"
+              (clicked)="unsubscribedEarly()" />
+            <cps-button
+              label="valueThenTeardown: 'cancel'"
+              type="outlined"
+              (clicked)="valueThenCancel()" />
+          </div>
         </div>
       </div>
-
-      <pre class="lab-readout">{{ readout() || 'Nothing settled yet.' }}</pre>
+      <lab-results>
+        <pre
+          class="lab-readout"
+          tabindex="0"
+          role="region"
+          aria-label="Last result"
+          >{{ readout() || 'Nothing settled yet.' }}</pre>
+      </lab-results>
     </section>
   `
 })
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index d12f4a9..90d7ef3 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -1,8 +1,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   DOCUMENT,
   inject,
+  linkedSignal,
   signal
 } from '@angular/core';
 import {
@@ -16,53 +18,159 @@ import {
 import { UWT_EVENT_INSPECTOR_CONFIG } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import {
   CpsButtonComponent,
+  CpsInputComponent,
+  CpsSelectComponent,
   CpsSwitchComponent,
   CpsTextareaComponent
 } from 'cps-ui-kit';
+import { labCheckConfig } from '../../lab/lab-config-check';
 import { parseJsonObject } from '../../lab/lab-json';
 import { labSearch } from '../../lab/lab-options';
+import {
+  LAB_TELEMETRIES,
+  LabBrokerMode,
+  LabTelemetry,
+  LabWire
+} from '../../lab/lab-wire.service';
 import { LAB_OPTIONS } from '../shell.config';
 
 const DEBUG_FLAGS = ['debugScenario', 'debugBI', 'debugLogger'] as const;
 type DebugFlag = (typeof DEBUG_FLAGS)[number];
 
+const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
+  { label: 'ok — RUM records normally', value: 'ok' },
+  { label: 'null — RUM off for the page', value: 'null' },
+  { label: 'fail — broker error, the app carries on', value: 'fail' },
+  {
+    label: 'short-expiry — credentials refresh within seconds',
+    value: 'short-expiry'
+  },
+  { label: 'flaky — fails twice, then answers', value: 'flaky' },
+  {
+    label: 'invalid — a pattern as a string: RUM not started',
+    value: 'invalid'
+  },
+  {
+    label: 'null-on-refresh — RUM off at the first refresh',
+    value: 'null-on-refresh'
+  },
+  {
+    label: 'no-credentials-on-refresh — a refresh without credentials',
+    value: 'no-credentials-on-refresh'
+  }
+];
+
+/** The library's default telemetries, where an edited list starts. */
+const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
+
 @Component({
   selector: 'lab-settings-page',
-  imports: [CpsButtonComponent, CpsSwitchComponent, CpsTextareaComponent],
+  imports: [
+    CpsButtonComponent,
+    CpsInputComponent,
+    CpsSelectComponent,
+    CpsSwitchComponent,
+    CpsTextareaComponent
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
       <h1>Settings</h1>
       <p>
-        The library's settings for this run: the lab's own, with a
-        <code>?config=</code> overlay laid over them, read once at startup.
-        Patterns are RegExp sources; the one value transform is
-        <code>mask-order-ids</code>.
+        What the next load runs with: the library's settings, as a
+        <code>?config=</code> overlay on the lab's own, and the mock RUM
+        broker's answer. Both apply together, with a reload.
       </p>
 
       <div class="lab-card">
-        <h2>Overlay</h2>
+        <h2>Library settings</h2>
+        <div class="lab-switches">
+          <cps-switch
+            label="Lifecycle step events (scenarios.emitLifecycleEvents)"
+            [value]="!!setting('scenarios', 'emitLifecycleEvents')"
+            [disabled]="!overlay()"
+            (valueChanged)="set('scenarios', 'emitLifecycleEvents', $event)" />
+          <cps-switch
+            label="User timings (scenarios.userTimings)"
+            [value]="!!setting('scenarios', 'userTimings')"
+            [disabled]="!overlay()"
+            (valueChanged)="set('scenarios', 'userTimings', $event)" />
+        </div>
+        <cps-input
+          type="number"
+          label="BI dedup window, ms (bi.dedupWindowMs)"
+          width="18rem"
+          [value]="'' + setting('bi', 'dedupWindowMs')"
+          [disabled]="!overlay()"
+          (valueChanged)="setNumber('bi', 'dedupWindowMs', $event)" />
+        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
         <cps-textarea
+          ngSkipHydration
           label="?config= (JSON)"
-          placeholder='{ "scenarios": { "emitLifecycleEvents": true } }'
+          hint="Patterns are RegExp sources; the one value transform is mask-order-ids."
           [rows]="8"
           [value]="draft()"
           [error]="error()"
-          (valueChanged)="draft.set($event)" />
-        <div class="lab-actions">
-          <cps-button label="Apply and reload" (clicked)="apply()" />
-          <cps-button
-            label="Back to the lab's settings"
-            type="outlined"
-            (clicked)="apply('')" />
+          (valueChanged)="edit($event)" />
+      </div>
+
+      <div class="lab-card">
+        <h2>Mock RUM broker</h2>
+        <cps-select
+          label="Answer /rum/init with"
+          [options]="modes"
+          [returnObject]="false"
+          [value]="mode()"
+          width="26rem"
+          (valueChanged)="mode.set($event)" />
+        <p>
+          RUM's own telemetry: the library's default is errors, performance and
+          same-origin HTTP. With none, RUM records only page views, the session
+          start and the library's events.
+        </p>
+        <div class="lab-switches">
+          <cps-switch
+            label="The library's default"
+            [value]="telemetries() === null"
+            (valueChanged)="useDefault($event)" />
         </div>
+        @if (telemetries(); as chosen) {
+          <cps-select
+            label="Telemetries"
+            placeholder="None"
+            [options]="telemetryOptions"
+            [returnObject]="false"
+            [multiple]="true"
+            [selectAll]="true"
+            [chips]="true"
+            [value]="chosen"
+            width="26rem"
+            (valueChanged)="telemetries.set($event)" />
+        }
+        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+        <cps-textarea
+          ngSkipHydration
+          label="Laid over the app monitor config (JSON)"
+          width="26rem"
+          [rows]="3"
+          [value]="brokerConfig()"
+          [error]="brokerConfigError()"
+          (valueChanged)="brokerConfig.set($event)" />
+      </div>
+
+      <div class="lab-actions">
+        <cps-button label="Apply and reload" (clicked)="apply()" />
+        <cps-button
+          label="Back to the lab's settings"
+          type="outlined"
+          (clicked)="reset()" />
       </div>
 
       <div class="lab-card">
         <h2>Debug flags</h2>
         <p>
           Console lines for what is sent. The library reads them on every event,
-          so they apply without a reload.
+          so they apply at once, without a reload.
         </p>
         <div class="lab-switches">
           @for (flag of flags; track flag) {
@@ -88,17 +196,57 @@ type DebugFlag = (typeof DEBUG_FLAGS)[number];
 })
 export class SettingsPage {
   protected readonly flags = DEBUG_FLAGS;
-  protected readonly error = signal('');
+  protected readonly modes = BROKER_MODES;
+  protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
+    label: t,
+    value: t
+  }));
 
   private readonly window = inject(DOCUMENT).defaultView!;
   private readonly options = inject(LAB_OPTIONS);
+  private readonly wire = inject(LabWire);
+
+  /** What each section takes, with values of the types they take. */
+  private readonly known: Record<string, Record<string, unknown>> = (() => {
+    const inspector = inject(UWT_EVENT_INSPECTOR_CONFIG);
+    return {
+      identity: {
+        eventNamespace: inject(UWT_TELEMETRY_IDENTITY).eventNamespace ?? ''
+      },
+      scenarios: { ...inject(UWT_SCENARIO_TELEMETRY_CONFIG) },
+      logging: { levels: {}, ...inject(UWT_LOG_CONFIG) },
+      bi: { ...inject(UWT_BI_TELEMETRY_CONFIG) },
+      redaction: { ...inject(UWT_REDACT_CONFIG) },
+      inspector: {
+        maxEventsPerSection: inspector.maxEventsPerSection,
+        maxPayloadCharsInView: inspector.maxPayloadCharsInView,
+        shortcuts: inspector.shortcuts,
+        captureBeforeOpen: inspector.captureBeforeOpen
+      },
+      lab: { logBatching: false }
+    };
+  })();
 
+  /** The overlay being edited: the one in effect, to start with. */
   protected readonly draft = signal(
-    Object.keys(this.options.config).length
-      ? JSON.stringify(this.options.config, null, 2)
-      : ''
+    JSON.stringify(this.options.config, null, 2)
   );
 
+  protected readonly error = signal('');
+  /** The draft as an object, or `undefined` while it isn't one. */
+  protected readonly overlay = computed(() =>
+    parseJsonObject(this.draft().trim() || '{}')
+  );
+
+  /** The broker's answer to be, starting from the one it gives now. */
+  protected readonly mode = linkedSignal(() => this.wire.brokerMode());
+  protected readonly telemetries = linkedSignal(() => this.wire.telemetries());
+  protected readonly brokerConfig = linkedSignal(() =>
+    JSON.stringify(this.wire.brokerConfig())
+  );
+
+  protected readonly brokerConfigError = signal('');
+
   protected readonly debug = signal(this.readDebug());
 
   /** What the library was given, read back from its tokens. */
@@ -115,19 +263,75 @@ export class SettingsPage {
     2
   );
 
+  /** A setting as the draft has it, or as it is in effect. */
+  protected setting(section: string, key: string): unknown {
+    const fromDraft = (
+      this.overlay()?.[section] as Record<string, unknown> | undefined
+    )?.[key];
+    return fromDraft ?? this.known[section][key];
+  }
+
+  /** Writes a control's setting into the draft, which shows it. */
+  protected set(section: string, key: string, value: unknown): void {
+    const overlay = this.overlay();
+    if (!overlay) {
+      return;
+    }
+    const settings = overlay[section] as Record<string, unknown> | undefined;
+    this.edit(
+      JSON.stringify(
+        { ...overlay, [section]: { ...settings, [key]: value } },
+        null,
+        2
+      )
+    );
+  }
+
+  protected setNumber(section: string, key: string, value: unknown): void {
+    const number = Number(value);
+    if (value !== '' && Number.isFinite(number)) {
+      this.set(section, key, number);
+    }
+  }
+
+  protected edit(draft: string): void {
+    this.draft.set(draft);
+    this.error.set('');
+  }
+
+  /** Back to the library's default, or a list to edit that starts there. */
+  protected useDefault(useDefault: boolean): void {
+    this.telemetries.set(useDefault ? null : DEFAULT_TELEMETRIES);
+  }
+
   /**
-   * Reloads with `json` as the overlay — none for the lab's own settings —
-   * keeping the other startup options, which in-app links drop.
+   * Sets the broker, then reloads with the overlay — keeping the other
+   * startup options, which in-app links drop. Nothing changes while either
+   * is wrong.
    */
-  protected apply(json = this.draft().trim()): void {
-    const config = json ? parseJsonObject(json) : {};
-    if (!config) {
-      this.error.set('Not a JSON object.');
+  protected async apply(): Promise<void> {
+    const overlay = this.overlay();
+    const problem = overlay
+      ? labCheckConfig(overlay, this.known)
+      : 'Not a JSON object.';
+    const brokerConfig = parseJsonObject(this.brokerConfig().trim() || '{}');
+    this.error.set(problem);
+    this.brokerConfigError.set(brokerConfig ? '' : 'Not a JSON object.');
+    if (problem || !overlay || !brokerConfig) {
       return;
     }
-    this.window.location.assign(
-      `${this.window.location.pathname}${labSearch({ ...this.options, config })}`
-    );
+    await this.wire.setBrokerMode(this.mode());
+    await this.wire.setTelemetries(this.telemetries());
+    await this.wire.setBrokerConfig(brokerConfig);
+    this.reload(overlay);
+  }
+
+  /** The lab's own settings, and the broker's default answer. */
+  protected async reset(): Promise<void> {
+    await this.wire.setBrokerMode('ok');
+    await this.wire.setTelemetries(null);
+    await this.wire.setBrokerConfig({});
+    this.reload({});
   }
 
   protected setDebug(flag: DebugFlag, on: boolean): void {
@@ -143,6 +347,12 @@ export class SettingsPage {
     this.debug.set(this.readDebug());
   }
 
+  private reload(config: Record<string, unknown>): void {
+    this.window.location.assign(
+      `${this.window.location.pathname}${labSearch({ ...this.options, config })}`
+    );
+  }
+
   /** As the library reads them: a list of logger names is not "on". */
   private readDebug(): Record<DebugFlag, boolean> {
     return {
diff --git a/projects/watchtower-lab/src/shell/pages/wire.page.ts b/projects/watchtower-lab/src/shell/pages/wire.page.ts
index 2a910f8..99e2974 100644
--- a/projects/watchtower-lab/src/shell/pages/wire.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/wire.page.ts
@@ -2,213 +2,126 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  DOCUMENT,
   inject,
-  linkedSignal,
   signal
 } from '@angular/core';
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
-import {
-  CpsButtonComponent,
-  CpsSelectComponent,
-  CpsSwitchComponent,
-  CpsTextareaComponent
-} from 'cps-ui-kit';
-import {
-  LAB_TELEMETRIES,
-  LabBrokerMode,
-  LabRumEvent,
-  LabTelemetry,
-  LabWire
-} from '../../lab/lab-wire.service';
-import { parseJsonObject } from '../../lab/lab-json';
-
-const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
-  { label: 'ok — RUM records normally', value: 'ok' },
-  { label: 'null — RUM off for the page', value: 'null' },
-  { label: 'fail — broker error, the app carries on', value: 'fail' },
-  {
-    label: 'short-expiry — credentials refresh within seconds',
-    value: 'short-expiry'
-  },
-  { label: 'flaky — fails twice, then answers', value: 'flaky' },
-  {
-    label: 'invalid — a pattern as a string: RUM not started',
-    value: 'invalid'
-  },
-  {
-    label: 'null-on-refresh — RUM off at the first refresh',
-    value: 'null-on-refresh'
-  },
-  {
-    label: 'no-credentials-on-refresh — a refresh without credentials',
-    value: 'no-credentials-on-refresh'
-  }
-];
+import { CpsButtonComponent, CpsSwitchComponent } from 'cps-ui-kit';
+import { LabRumEvent, LabWire } from '../../lab/lab-wire.service';
 
 @Component({
   selector: 'lab-wire-page',
-  imports: [
-    CpsButtonComponent,
-    CpsSelectComponent,
-    CpsSwitchComponent,
-    CpsTextareaComponent
-  ],
+  imports: [CpsButtonComponent, CpsSwitchComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
       <h1>On the wire</h1>
       <p>
         What the lab's mock backend actually received — the other side of what
-        the app, and the Event Inspector, say was sent. Newest first.
+        the app, and the Event Inspector, say was sent. Newest first. The mock
+        RUM broker is set up in Settings.
       </p>
 
       <div class="lab-card">
-        <h2>Mock RUM broker</h2>
-        <div class="lab-actions">
-          <cps-select
-            label="Answer the next /rum/init with"
-            [options]="modes"
-            [returnObject]="false"
-            [value]="wire.brokerMode()"
-            width="26rem"
-            (valueChanged)="wire.setBrokerMode($event)" />
-        </div>
-        <p>
-          RUM's own telemetry: the library's default is errors, performance and
-          same-origin HTTP. With none, RUM records only page views, the session
-          start and the library's events.
-        </p>
-        <div class="lab-actions">
-          <cps-switch
-            label="The library's default"
-            [value]="wire.telemetries() === null"
-            (valueChanged)="useDefault($event)" />
-          @if (wire.telemetries(); as chosen) {
-            <cps-select
-              label="Telemetries"
-              placeholder="None"
-              [options]="telemetryOptions"
-              [returnObject]="false"
-              [multiple]="true"
-              [selectAll]="true"
-              [chips]="true"
-              [value]="chosen"
-              width="26rem"
-              (valueChanged)="wire.setTelemetries($event)" />
-          }
-        </div>
-        <cps-textarea
-          label="Laid over the app monitor config (JSON)"
-          placeholder='{ "sessionSampleRate": 0 }'
-          width="26rem"
-          [rows]="3"
-          [value]="brokerConfigDraft()"
-          [error]="brokerConfigError()"
-          (valueChanged)="brokerConfigDraft.set($event)" />
+        <h2>The mock backend</h2>
         <div class="lab-actions">
+          <cps-button label="Flush now" (clicked)="flush()" />
           <cps-button
-            label="Set the overlay"
-            type="outlined"
-            (clicked)="setBrokerConfig()" />
-          <cps-button
-            label="Reload to apply"
+            label="Reset the mock backend"
             type="outlined"
-            (clicked)="reload()" />
+            (clicked)="reset()" />
+          <span class="lab-note" role="status">{{ status() }}</span>
         </div>
       </div>
 
       <div class="lab-card">
-        <div class="lab-actions">
-          <cps-button label="Flush now" (clicked)="sink.flush()" />
-          <cps-button
-            label="Reset the mock backend"
-            type="outlined"
-            (clicked)="wire.reset()" />
+        <div class="lab-card__header">
+          <h2>RUM events ({{ rum().length }})</h2>
           <cps-switch
             label="Library events only"
             [value]="libraryOnly()"
             (valueChanged)="libraryOnly.set($event)" />
         </div>
-      </div>
-
-      <div class="lab-card">
-        <h2>RUM events ({{ rum().length }})</h2>
-        <table class="lab-table">
-          <thead>
-            <tr>
-              <th>Received</th>
-              <th>Type</th>
-              <th>Session · user</th>
-              <th>signedIn</th>
-              <th>Details</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (event of rum(); track event.id) {
+        <div
+          class="lab-scroll"
+          tabindex="0"
+          role="region"
+          aria-label="RUM events received">
+          <table class="lab-table">
+            <thead>
               <tr>
-                <td>{{ event.receivedAt.slice(11, 19) }}</td>
-                <td>
-                  <code>{{ event.type }}</code>
-                </td>
-                <td>
-                  {{ short(event.user.sessionId) }} ·
-                  {{ short(event.user.userId) }}
-                </td>
-                <td>{{ event.metadata['signedIn'] ?? '' }}</td>
-                <td>
-                  <details>
-                    <summary>{{ summary(event) }}</summary>
-                    <pre class="lab-readout">{{ json(event) }}</pre>
-                  </details>
-                </td>
+                <th>Received</th>
+                <th>Type</th>
+                <th>Session · user</th>
+                <th>signedIn</th>
+                <th>Details</th>
               </tr>
-            }
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              @for (event of rum(); track event.id) {
+                <tr>
+                  <td>{{ event.receivedAt.slice(11, 19) }}</td>
+                  <td>
+                    <code>{{ event.type }}</code>
+                  </td>
+                  <td>
+                    {{ short(event.user.sessionId) }} ·
+                    {{ short(event.user.userId) }}
+                  </td>
+                  <td>{{ event.metadata['signedIn'] ?? '' }}</td>
+                  <td>
+                    <details>
+                      <summary>{{ summary(event) }}</summary>
+                      <pre class="lab-readout">{{ json(event) }}</pre>
+                    </details>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div class="lab-card">
         <h2>Log records ({{ logs().length }})</h2>
-        <table class="lab-table">
-          <thead>
-            <tr>
-              <th>Time</th>
-              <th>Level</th>
-              <th>Application · logger</th>
-              <th>Message</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (record of logs(); track $index) {
+        <div
+          class="lab-scroll"
+          tabindex="0"
+          role="region"
+          aria-label="Log records received">
+          <table class="lab-table">
+            <thead>
               <tr>
-                <td>{{ record.timestamp.slice(11, 19) }}</td>
-                <td>{{ record.level }}</td>
-                <td>{{ record.application }} · {{ record.logger }}</td>
-                <td>{{ record.message }}</td>
+                <th>Time</th>
+                <th>Level</th>
+                <th>Application · logger</th>
+                <th>Message</th>
               </tr>
-            }
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              @for (record of logs(); track $index) {
+                <tr>
+                  <td>{{ record.timestamp.slice(11, 19) }}</td>
+                  <td>{{ record.level }}</td>
+                  <td>{{ record.application }} · {{ record.logger }}</td>
+                  <td>{{ record.message }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
       </div>
     </section>
   `
 })
 export class WirePage {
   protected readonly wire = inject(LabWire);
-  protected readonly sink = inject(UwtTelemetrySink);
-  protected readonly modes = BROKER_MODES;
   protected readonly libraryOnly = signal(true);
-  /** The overlay in force, until edited; replaced if the server's changes. */
-  protected readonly brokerConfigDraft = linkedSignal(() =>
-    JSON.stringify(this.wire.brokerConfig())
-  );
-
-  protected readonly brokerConfigError = signal('');
+  protected readonly status = signal('');
 
-  protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
-    label: t,
-    value: t
-  }));
+  private readonly sink = inject(UwtTelemetrySink);
+  private readonly window = inject(DOCUMENT).defaultView!;
 
   protected readonly rum = computed(() =>
     this.wire
@@ -220,22 +133,22 @@ export class WirePage {
 
   protected readonly logs = computed(() => this.wire.logs().slice().reverse());
 
-  protected async setBrokerConfig(): Promise<void> {
-    const config = parseJsonObject(this.brokerConfigDraft().trim() || '{}');
-    this.brokerConfigError.set(config ? '' : 'Not a JSON object.');
-    if (config) {
-      await this.wire.setBrokerConfig(config);
-    }
-  }
-
-  protected reload(): void {
-    location.reload();
+  protected flush(): void {
+    this.sink.flush();
+    this.status.set('Flushed: what the sink held is on its way.');
   }
 
-  /** Back to the default, or a list to edit that starts as the default. */
-  protected useDefault(useDefault: boolean): void {
-    const defaults: LabTelemetry[] = ['errors', 'performance', 'http'];
-    this.wire.setTelemetries(useDefault ? null : defaults);
+  /** Empties the mock backend, once confirmed: there's no undoing it. */
+  protected async reset(): Promise<void> {
+    if (
+      !this.window.confirm(
+        'Empty the mock backend? Everything it received is lost.'
+      )
+    ) {
+      return;
+    }
+    await this.wire.reset();
+    this.status.set('Reset: the mock backend is empty.');
   }
 
   protected short(id?: string): string {
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 6d961fd..f61626b 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -1,24 +1,53 @@
+import { NgTemplateOutlet } from '@angular/common';
 import {
   afterNextRender,
   ChangeDetectionStrategy,
   Component,
+  computed,
   DestroyRef,
   DOCUMENT,
+  ElementRef,
   inject,
-  signal
+  signal,
+  viewChild
 } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  NavigationEnd,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+  RouterOutlet
+} from '@angular/router';
+import { filter } from 'rxjs';
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtEventInspectorService } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import { LabLayout } from '../lab/lab-layout.service';
-import { LabWire } from '../lab/lab-wire.service';
-import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
+import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
+import { labTelemetriesLabel, LabWire } from '../lab/lab-wire.service';
+import { LAB_OPTIONS, SHELL_GROUPS, SHELL_PAGES } from './shell.config';
+
+/**
+ * The broker's setting as this page load got it, and the next load's when
+ * that differs: `ok → null after reload`.
+ */
+function inEffect(now?: string, next?: string): string {
+  if (now === undefined) {
+    return next ?? '…';
+  }
+  return next === undefined || next === now
+    ? now
+    : `${now} → ${next} after reload`;
+}
 
 /** The lab's frame: a fixed header, the pages, and a fixed status bar. */
 @Component({
   selector: 'lab-root',
-  imports: [RouterLink, RouterLinkActive, RouterOutlet],
+  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, RouterOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  // On the document: Safari doesn't focus a button it clicks, so Escape
+  // after opening the nav with the mouse wouldn't come from inside it.
+  host: { '(document:keydown.escape)': 'closeNav()' },
   template: `
     <a class="lab-skip-link" href="#lab-main" (click)="skipToContent($event)"
       >Skip to content</a
@@ -31,20 +60,16 @@ import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
         width="32"
         height="32" />
       <strong class="lab-title">Watchtower Lab</strong>
-      <span class="lab-chip">destination: {{ options.destination }}</span>
-      <span class="lab-chip"
-        >telemetry: {{ options.telemetry ? 'on' : 'off' }}</span
-      >
-      <span class="lab-chip">broker: {{ wire.brokerMode() }}</span>
-      <span class="lab-chip"
-        >rum telemetries: {{ wire.telemetriesLabel() }}</span
-      >
-      @if (options.channel === 'shared') {
-        <span class="lab-chip">channel: shared</span>
-      }
-      @if (customConfig) {
-        <span class="lab-chip">config: custom</span>
-      }
+      <!-- Inline when there's room; otherwise behind Run settings. -->
+      <div class="lab-chips">
+        <ng-container [ngTemplateOutlet]="chips" />
+      </div>
+      <details class="lab-run-settings">
+        <summary>Run settings</summary>
+        <div class="lab-run-settings__panel">
+          <ng-container [ngTemplateOutlet]="chips" />
+        </div>
+      </details>
       <span class="lab-spacer"></span>
       <span class="lab-user">{{
         identity().userId ? 'Signed in' : 'Signed out'
@@ -57,64 +82,86 @@ import { LAB_OPTIONS, SHELL_PAGES } from './shell.config';
       </button>
     </header>
 
+    <ng-template #chips>
+      <span class="lab-chip">destination: {{ options.destination }}</span>
+      <span class="lab-chip"
+        >telemetry: {{ options.telemetry ? 'on' : 'off' }}</span
+      >
+      <span class="lab-chip">broker: {{ broker() }}</span>
+      <span class="lab-chip">rum telemetries: {{ telemetries() }}</span>
+      @if (options.channel === 'shared') {
+        <span class="lab-chip">channel: shared</span>
+      }
+      @if (customConfig) {
+        <span class="lab-chip">config: custom</span>
+      }
+    </ng-template>
+
     <div class="lab-layout">
-      <nav class="lab-nav" aria-label="Lab pages">
-        @for (page of pages; track page.path) {
-          <a [routerLink]="page.path" routerLinkActive="active">{{
-            page.label
-          }}</a>
-        }
-      </nav>
-      <main class="lab-main" id="lab-main" tabindex="-1">
-        <router-outlet />
-      </main>
+      <div class="lab-layout__grid">
+        <nav class="lab-nav" aria-label="Lab pages">
+          <button
+            #navToggle
+            type="button"
+            class="lab-nav__toggle"
+            aria-controls="lab-nav-pages"
+            [attr.aria-expanded]="navOpen()"
+            (click)="navOpen.set(!navOpen())">
+            <span aria-hidden="true">☰</span> Pages
+            <span class="lab-nav__current"
+              ><span aria-hidden="true">·</span> {{ current() }}</span
+            >
+          </button>
+          <div
+            id="lab-nav-pages"
+            class="lab-nav__pages"
+            [class.lab-nav__pages--open]="navOpen()">
+            @for (group of groups; track group.name) {
+              <p class="lab-nav__group" [id]="'lab-nav-' + group.name">
+                {{ group.name }}
+              </p>
+              <ul [attr.aria-labelledby]="'lab-nav-' + group.name">
+                @for (page of group.pages; track page.path) {
+                  <li>
+                    <a
+                      [routerLink]="page.path"
+                      routerLinkActive="active"
+                      ariaCurrentWhenActive="page"
+                      >{{ page.label }}</a
+                    >
+                  </li>
+                }
+              </ul>
+            }
+          </div>
+        </nav>
+        <main class="lab-main" id="lab-main" tabindex="-1">
+          <router-outlet />
+        </main>
+      </div>
     </div>
 
     <footer class="lab-status">
       <span
-        >Mock dataplane: {{ wire.rum().length }} RUM events ({{
-          wire.libraryEvents()
-        }}
-        from the library) in {{ wire.batches() }} batches</span
+        title="Everything the mock dataplane received. RUM's own events — page views, timings, its session start — arrive while the page is idle, too."
+        >RUM events: {{ wire.rum().length }}</span
       >
+      <span title="The library's own events among them"
+        >from the library: {{ wire.libraryEvents() }}</span
+      >
+      <span>batches: {{ wire.batches() }}</span>
       <span>logs: {{ wire.logs().length }}</span>
-      <span>session: {{ identity().sessionId ?? '—' }}</span>
-      <span>user: {{ identity().userId ?? '—' }}</span>
+      <span
+        class="lab-status__id"
+        [title]="'session: ' + (identity().sessionId ?? '—')"
+        >session: {{ identity().sessionId ?? '—' }}</span
+      >
+      <span
+        class="lab-status__id"
+        [title]="'user: ' + (identity().userId ?? '—')"
+        >user: {{ identity().userId ?? '—' }}</span
+      >
     </footer>
-  `,
-  styles: `
-    .lab-logo {
-      flex-shrink: 0;
-      margin-right: -0.25rem;
-      border-radius: 50%;
-      box-shadow: 0 0 0 0.125rem #ffffffb3;
-    }
-    .lab-title {
-      font-size: 1.2rem;
-    }
-    .lab-chip {
-      padding: 0.15rem 0.6rem;
-      border-radius: 1rem;
-      background-color: #ffffff26;
-      font-size: 0.85rem;
-      white-space: nowrap;
-    }
-    .lab-spacer {
-      flex: 1;
-    }
-    .lab-user {
-      white-space: nowrap;
-    }
-    .lab-header-button {
-      padding: 0.35rem 0.9rem;
-      border: 0.0625rem solid #fff;
-      border-radius: 0.25rem;
-      background: transparent;
-      color: #fff;
-      font: inherit;
-      white-space: nowrap;
-      cursor: pointer;
-    }
   `
 })
 export class ShellComponent {
@@ -122,16 +169,56 @@ export class ShellComponent {
   protected readonly customConfig = Object.keys(this.options.config).length > 0;
   protected readonly wire = inject(LabWire);
   protected readonly inspector = inject(UwtEventInspectorService);
-  protected readonly pages = SHELL_PAGES;
   protected readonly identity = signal<{ sessionId?: string; userId?: string }>(
     {}
   );
 
+  protected readonly groups = SHELL_GROUPS.map((name) => ({
+    name,
+    pages: SHELL_PAGES.filter((page) => page.group === name)
+  }));
+
+  /** Whether the folded nav is open, on a narrow screen. */
+  protected readonly navOpen = signal(false);
+  private readonly path = signal('');
+  protected readonly current = computed(
+    () => SHELL_PAGES.find((page) => page.path === this.path())?.label ?? ''
+  );
+
+  private readonly credentials = inject(LabRumCredentialsProvider);
+  protected readonly broker = computed(() =>
+    inEffect(
+      this.credentials.startup()?.mode,
+      this.wire.polled() ? this.wire.brokerMode() : undefined
+    )
+  );
+
+  protected readonly telemetries = computed(() => {
+    const startup = this.credentials.startup();
+    return inEffect(
+      startup && labTelemetriesLabel(startup.telemetries),
+      this.wire.polled() ? this.wire.telemetriesLabel() : undefined
+    );
+  });
+
   private readonly sink = inject(UwtTelemetrySink);
   private readonly document = inject(DOCUMENT);
+  private readonly navToggle =
+    viewChild.required<ElementRef<HTMLButtonElement>>('navToggle');
 
   constructor() {
     inject(LabLayout);
+    const router = inject(Router);
+    router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed()
+      )
+      .subscribe(() => {
+        this.path.set(router.url.split(/[?#]/)[0].replace(/^\//, ''));
+        this.navOpen.set(false);
+      });
+
     const destroyRef = inject(DestroyRef);
     // In the browser only, like the wire's polling.
     afterNextRender(() => {
@@ -154,4 +241,12 @@ export class ShellComponent {
     event.preventDefault();
     this.document.getElementById('lab-main')?.focus();
   }
+
+  /** Escape folds the open nav, back to its button. */
+  protected closeNav(): void {
+    if (this.navOpen()) {
+      this.navOpen.set(false);
+      this.navToggle().nativeElement.focus();
+    }
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index 38b40c6..4603e68 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -9,7 +9,7 @@ import {
   withEventReplay
 } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideRouter, Routes } from '@angular/router';
+import { provideRouter, Route, Routes } from '@angular/router';
 import {
   UWT_LOG_API_PROVIDER,
   provideUwtTelemetry,
@@ -35,60 +35,79 @@ import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
 
 export { LAB_OPTIONS };
 
-export const SHELL_PAGES = [
+/** The side nav's groups, in order. */
+export const SHELL_GROUPS = ['Library', 'Composition', 'Tools'] as const;
+
+export const SHELL_PAGES: {
+  path: string;
+  group: (typeof SHELL_GROUPS)[number];
+  label: string;
+  load: NonNullable<Route['loadComponent']>;
+}[] = [
   {
     path: 'scenarios',
+    group: 'Library',
     label: 'Scenarios',
     load: () => import('./pages/scenarios.page').then((m) => m.ScenariosPage)
   },
   {
     path: 'bi',
+    group: 'Library',
     label: 'BI events',
     load: () => import('./pages/bi.page').then((m) => m.BIPage)
   },
   {
     path: 'logging',
+    group: 'Library',
     label: 'Logging',
     load: () => import('./pages/logging.page').then((m) => m.LoggingPage)
   },
   {
     path: 'identity',
+    group: 'Library',
     label: 'Identity',
     load: () => import('./pages/identity.page').then((m) => m.IdentityPage)
   },
   {
     path: 'privacy',
+    group: 'Library',
     label: 'Privacy',
     load: () => import('./pages/privacy.page').then((m) => m.PrivacyPage)
   },
   {
     path: 'lifecycle',
+    group: 'Library',
     label: 'Lifecycle',
     load: () => import('./pages/lifecycle.page').then((m) => m.LifecyclePage)
   },
   {
     path: 'fragment',
+    group: 'Composition',
     label: 'Fragment (iframe)',
     load: () => import('./pages/fragment.page').then((m) => m.FragmentPage)
   },
   {
     path: 'web-fragment',
+    group: 'Composition',
     label: 'Web Fragment',
     load: () =>
       import('./pages/web-fragment.page').then((m) => m.WebFragmentPage)
   },
   {
     path: 'inspector',
+    group: 'Tools',
     label: 'Event Inspector',
     load: () => import('./pages/inspector.page').then((m) => m.InspectorPage)
   },
   {
     path: 'wire',
+    group: 'Tools',
     label: 'On the wire',
     load: () => import('./pages/wire.page').then((m) => m.WirePage)
   },
   {
     path: 'settings',
+    group: 'Tools',
     label: 'Settings',
     load: () => import('./pages/settings.page').then((m) => m.SettingsPage)
   }
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 0c19b23..567725f 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -28,6 +28,8 @@
 // what an Event Inspector pane covers, and — with `lab-insets` on <html>,
 // switched on the Event Inspector page — how an app keeps them beside it.
 .lab-header {
+  // Measured by its own width, which a docked pane narrows.
+  container: lab-header / inline-size;
   position: fixed;
   top: 0;
   right: 0;
@@ -42,6 +44,113 @@
   color: #fff;
 }
 
+.lab-logo {
+  flex-shrink: 0;
+  margin-right: -0.25rem;
+  border-radius: 50%;
+  box-shadow: 0 0 0 0.125rem #ffffffb3;
+}
+
+.lab-title {
+  font-size: 1.2rem;
+  white-space: nowrap;
+}
+
+.lab-chips {
+  display: flex;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.lab-chip {
+  padding: 0.15rem 0.6rem;
+  border-radius: 1rem;
+  background-color: #ffffff26;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.lab-run-settings {
+  display: none;
+  position: relative;
+
+  > summary {
+    padding: 0.15rem 0.6rem;
+    border-radius: 1rem;
+    background-color: #ffffff26;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:focus-visible {
+      @include cps.focus-ring;
+    }
+  }
+}
+
+.lab-run-settings__panel {
+  position: absolute;
+  top: calc(100% + 0.75rem);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.375rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: #8a0b3c;
+  box-shadow: 0 0.25rem 0.75rem #0000004d;
+}
+
+.lab-spacer {
+  flex: 1;
+}
+
+.lab-user {
+  white-space: nowrap;
+}
+
+.lab-header-button {
+  padding: 0.35rem 0.9rem;
+  border: 0.0625rem solid #fff;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #fff;
+  font: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:focus-visible {
+    @include cps.focus-ring;
+  }
+}
+
+// Not enough room for the chips: they fold behind Run settings.
+@container lab-header (max-width: 72rem) {
+  .lab-chips {
+    display: none;
+  }
+
+  .lab-run-settings {
+    display: block;
+  }
+}
+
+// A phone: the name and sign-in state are left to screen readers, and the
+// status bar, so the buttons stay in reach.
+@container lab-header (max-width: 30rem) {
+  .lab-title,
+  .lab-user {
+    position: absolute;
+    width: 0.0625rem;
+    height: 0.0625rem;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+}
+
+// One line, whatever the width: each part ends in an ellipsis when short of
+// room, the ids first, with the full text in its tooltip.
 .lab-status {
   position: fixed;
   right: 0;
@@ -50,13 +159,26 @@
   z-index: 10;
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: 1.25rem;
   height: 2.25rem;
   padding: 0 1.25rem;
+  overflow: hidden;
   background-color: #1f2937;
   color: #e5e7eb;
   font-size: 0.875rem;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+
+  > span {
+    flex-shrink: 0;
+  }
+
+  > .lab-status__id {
+    flex-shrink: 1;
+    min-width: 4rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 html.lab-insets {
@@ -72,22 +194,35 @@ html.lab-insets {
   }
 }
 
+// Measured by its width, which a docked pane narrows, so the nav folds
+// beside a pane as on a small screen.
 .lab-layout {
-  display: grid;
-  grid-template-columns: 12rem minmax(0, 1fr);
+  container: lab-layout / inline-size;
   min-height: 100vh;
   padding: 3.5rem 0 2.25rem;
 }
 
+.lab-layout__grid {
+  display: grid;
+  grid-template-columns: 12rem minmax(0, 1fr);
+}
+
 .lab-nav {
   position: sticky;
   top: 3.5rem;
   align-self: start;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 0;
+  padding: 0.5rem 0 1rem;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
   a {
+    display: block;
     padding: 0.5rem 1.25rem;
     color: var(--cps-color-text-dark);
     text-decoration: none;
@@ -107,15 +242,79 @@ html.lab-insets {
   }
 }
 
-// The header's own button; its other styles are the shell component's.
-.lab-header-button:focus-visible {
-  @include cps.focus-ring;
+.lab-nav__group {
+  margin: 0.75rem 1.25rem 0.25rem;
+  color: var(--cps-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.lab-nav__toggle {
+  display: none;
+}
+
+// Under 900px: one column, the nav folded behind a bar naming the page.
+@container lab-layout (max-width: 56.25rem) {
+  .lab-layout__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .lab-nav {
+    z-index: 5;
+    padding: 0;
+    border-bottom: 0.0625rem solid var(--cps-color-line-mid);
+    background-color: #f4f6f9;
+  }
+
+  .lab-nav__toggle {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.625rem 1.25rem;
+    border: 0;
+    background: none;
+    color: var(--cps-color-text-dark);
+    font: inherit;
+    font-weight: 700;
+    text-align: left;
+    cursor: pointer;
+
+    &:focus-visible {
+      @include cps.focus-ring(-0.125rem, -0.25rem, 0);
+    }
+  }
+
+  .lab-nav__current {
+    color: var(--cps-text-secondary);
+    font-weight: 400;
+  }
+
+  .lab-nav__pages {
+    display: none;
+    max-height: calc(100vh - 9rem);
+    overflow: auto;
+    padding-bottom: 0.5rem;
+  }
+
+  .lab-nav__pages--open {
+    display: block;
+  }
 }
 
 .lab-main {
+  // Measured, so a page can put its results beside its actions.
+  container: lab-main / inline-size;
   padding: 1.5rem 2rem;
 }
 
+@container lab-layout (max-width: 30rem) {
+  .lab-main {
+    padding: 1rem;
+  }
+}
+
 .lab-table {
   width: 100%;
   border-collapse: collapse;
@@ -137,3 +336,160 @@ html.lab-insets {
     font-size: 0.8rem;
   }
 }
+
+// A page with results: its cards, and beside them, kept in view, what they
+// did. Stacked below 60rem, results after the cards.
+.lab-page__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.lab-page--results {
+  max-width: 90rem;
+}
+
+@container lab-main (min-width: 60rem) {
+  .lab-page--results {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
+    align-items: start;
+    gap: 1rem 1.5rem;
+
+    > h1,
+    > p {
+      grid-column: 1 / -1;
+    }
+
+    > lab-results {
+      position: sticky;
+      top: 4.5rem;
+    }
+  }
+}
+
+.lab-results {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  border: 0.0625rem solid var(--cps-color-line-mid);
+  border-radius: 0.5rem;
+  background-color: #fff;
+
+  h2 {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  h3 {
+    margin: 0.5rem 0 0;
+    font-size: 0.95rem;
+  }
+
+  > p {
+    margin: 0;
+    color: var(--cps-text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .lab-readout {
+    max-height: 16rem;
+  }
+}
+
+.lab-results__sent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  font-size: 0.85rem;
+  list-style: none;
+
+  li {
+    display: grid;
+    grid-template-columns: 4rem minmax(0, 1fr) auto;
+    gap: 0.5rem;
+  }
+}
+
+.lab-results__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lab-results__state {
+  color: var(--cps-text-secondary);
+}
+
+.lab-results__state--received {
+  color: var(--cps-color-success-darken2);
+}
+
+.lab-card__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+}
+
+// A table wider than a small screen scrolls on its own, not the page.
+.lab-scroll {
+  overflow-x: auto;
+
+  &:focus-visible {
+    outline: 0.125rem solid var(--cps-color-calm);
+    outline-offset: 0.125rem;
+  }
+}
+
+.lab-note {
+  color: var(--cps-text-secondary);
+  font-size: 0.9rem;
+}
+
+// An action kept apart from the group before it.
+.lab-apart {
+  margin-inline-start: 1rem;
+}
+
+// Fields sized for a wide screen never run past a small one's edge.
+.lab-page
+  :is(
+    .cps-textarea-container,
+    .cps-select,
+    .cps-input-container,
+    textarea,
+    input
+  ) {
+  max-width: 100%;
+}
+
+// On a phone, the kit's toggle wraps its options, and a switch its label;
+// specific enough to beat the kit's own one-row and max-content rules.
+.lab-page cps-button-toggle .cps-btn-toggle .cps-btn-toggle-content {
+  flex-wrap: wrap;
+
+  // Every option keeps its edge once wrapped; overlapping, they look as one.
+  // The class twice outranks the kit's rule that takes the edge away.
+  .cps-btn-toggle-option-wrapper {
+    margin-right: -0.0625rem;
+
+    .cps-btn-toggle-content-option.cps-btn-toggle-content-option {
+      border-right: 0.0625rem solid var(--cps-color-text-lightest);
+    }
+  }
+}
+
+.lab-page cps-switch {
+  min-width: 0;
+  max-width: 100%;
+
+  // The switch keeps its size while its label wraps.
+  .cps-switch {
+    flex-shrink: 0;
+  }
+}

From 40b2194e4dbe7a26da715e1026b18e7c7f2fd4ed Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 6 Nov 2026 19:31:35 +0100
Subject: [PATCH 22/51] fix tests

---
 .../uwt-event-inspector.service.spec.ts       | 47 +++++++++++--------
 .../uwt-event-inspector.service.ts            |  3 +-
 .../uwt-inspector-window.spec.ts              | 13 +++++
 .../uwt-inspector-window.ts                   |  3 +-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index ef4c6f9..3e38cb2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -263,6 +263,17 @@ describe('UwtEventInspectorService', () => {
     expect(pane()?.classList).toContain('uwt-inspector-pane--right');
   });
 
+  it('should take an open pane away quietly when the app is destroyed', () => {
+    remember({ dock: 'right' });
+    create().open();
+    const warn = jest.spyOn(console, 'warn');
+
+    TestBed.resetTestingModule();
+
+    expect(pane()).toBeNull();
+    expect(warn).not.toHaveBeenCalled();
+  });
+
   it('should move between docks, keeping the session, and remember the dock', () => {
     const service = create();
     service.open();
@@ -454,31 +465,27 @@ describe('UwtEventInspectorService', () => {
     /** Whether the app's window is narrower than 640px right now. */
     let narrow = false;
 
-    /** The app's window, as `matchMedia` reports it: `narrow` when asked. */
+    /**
+     * The app's window, as `matchMedia` reports it: `narrow` when asked. A
+     * spy, as `ng test` makes `matchMedia` writable but not configurable.
+     */
     function screenIsNarrow(matches: boolean): void {
       narrow = matches;
-      Object.defineProperty(window, 'matchMedia', {
-        configurable: true,
-        value: jest.fn((query: string) => ({
-          get matches() {
-            return narrow;
-          },
-          media: query,
-          addEventListener: (_: string, listener: typeof change) =>
-            (change = listener),
-          removeEventListener: jest.fn()
-        }))
-      });
+      jest.spyOn(window, 'matchMedia').mockImplementation(
+        (query: string) =>
+          ({
+            get matches() {
+              return narrow;
+            },
+            media: query,
+            addEventListener: (_: string, listener: typeof change) =>
+              (change = listener),
+            removeEventListener: jest.fn()
+          }) as unknown as MediaQueryList
+      );
     }
 
-    const original = Object.getOwnPropertyDescriptor(window, 'matchMedia');
-
     afterEach(() => {
-      if (original) {
-        Object.defineProperty(window, 'matchMedia', original);
-      } else {
-        delete (window as { matchMedia?: unknown }).matchMedia;
-      }
       change = undefined;
     });
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index cc2e7b3..aa3f980 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -318,8 +318,9 @@ export class UwtEventInspectorService {
       dock: side,
       focus: () => ref.instance.content().focusSearch(),
       containsFocus: () => ref.instance.content().containsFocus(),
+      // Destroying the view detaches it from the app, unless the app, being
+      // destroyed, already has: detaching it here would warn (NG0406).
       destroy: () => {
-        this.appRef.detachView(ref.hostView);
         ref.destroy();
         element.remove();
       }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
index b9dfdbb..3429c92 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -145,6 +145,19 @@ describe('uwtOpenInspectorWindow', () => {
     expect(options.onGeometry).toHaveBeenCalledTimes(1);
   });
 
+  it('should close the window quietly when the app is destroyed first', () => {
+    const { popup } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    const host = uwtOpenInspectorWindow(options);
+    const warn = jest.spyOn(console, 'warn');
+
+    TestBed.resetTestingModule();
+    host?.destroy();
+
+    expect(popup.close).toHaveBeenCalled();
+    expect(warn).not.toHaveBeenCalled();
+  });
+
   it('should close the window, and stop listening, when destroyed', () => {
     const { popup, key } = fakePopup();
     jest.spyOn(window, 'open').mockReturnValue(popup);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 552c929..10d9151 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -120,7 +120,8 @@ export function uwtOpenInspectorWindow(
       doc.removeEventListener('keydown', options.onKeydown, true);
       uwtSafeVoid('window.geometry', saveGeometry);
       stopMirroring();
-      options.appRef.detachView(ref.hostView);
+      // Destroying the view detaches it from the app, unless the app, being
+      // destroyed, already has: detaching it here would warn (NG0406).
       ref.destroy();
       environment.destroy();
       popup.close();

From f7868847a2fac3f319a5a0476109807e96ca27f8 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 6 Nov 2026 20:20:32 +0100
Subject: [PATCH 23/51] fix pw tests

---
 .github/workflows/checks.yml                  |  2 +-
 playwright/inspector-tools.spec.ts            |  7 +++++--
 playwright/wire.spec.ts                       |  8 ++++++--
 projects/watchtower-lab/server/lab-backend.ts | 10 +++++++---
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 5620df6..dc6d863 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -111,7 +111,7 @@ jobs:
         run: npm run typecheck
 
   e2e:
-    name: End-to-end (Chromium, WebKit)
+    name: Playwright (Chromium, WebKit)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
index 244cb1e..6e56c51 100644
--- a/playwright/inspector-tools.spec.ts
+++ b/playwright/inspector-tools.spec.ts
@@ -269,8 +269,11 @@ test('an open row filters by its own values; the builder names fields, finds the
   const builder = page.getByRole('group', { name: 'New filter' });
   await builder.getByRole('combobox', { name: 'Field' }).click();
   await page.keyboard.type('scenarioName');
-  // Found by its path, shown by its name.
-  await page.getByRole('option', { name: /^Scenario/ }).click();
+  // Found by its path, shown by its name — named in full, as the list may
+  // not have caught up with the typing yet.
+  await page
+    .getByRole('option', { name: 'Scenario scenarioName', exact: true })
+    .click();
   await builder.getByRole('textbox', { name: 'Value' }).fill('happy');
 
   await page.getByText('How filters work').click();
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
index 833255f..1bad52b 100644
--- a/playwright/wire.spec.ts
+++ b/playwright/wire.spec.ts
@@ -8,9 +8,13 @@ import {
   test
 } from './lab';
 
-/** Picks the option starting with `option` in the select labelled `label`. */
+/**
+ * Picks the option starting with `option` in the select labelled `label`,
+ * opened from the keyboard: a click in a list's box can land on a chip's
+ * Remove, wherever the fonts put the chips.
+ */
 async function choose(page: Page, label: string, option: string) {
-  await page.getByRole('combobox', { name: label }).click();
+  await page.getByRole('combobox', { name: label }).press('ArrowDown');
   await page.getByRole('option', { name: new RegExp(`^${option}`) }).click();
 }
 
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index 5a36ac4..9051540 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -148,9 +148,13 @@ function broker(req: Request) {
       sessionEventLimit: 0,
       dispatchInterval: 2000,
       allowCookies: true,
-      // The lab is plain http: WebKit drops a Secure cookie even on
-      // localhost, and with it the session and its start.
-      cookieAttributes: { secure: false },
+      // The lab is plain http on localhost, where WebKit keeps none of the
+      // RUM client's cookies as it writes them by default, and with them go
+      // the session and its start: no Secure cookie over http, and on Linux
+      // no Domain=localhost, as it has no dot; an empty Domain is host-only.
+      // Lax, as WebKit on Linux may hide a Strict cookie from a page opened
+      // from about:blank, as Playwright opens them.
+      cookieAttributes: { secure: false, domain: '', sameSite: 'Lax' },
       // Names only: the lab's credentials provider adds their options.
       ...(state.telemetries ? { telemetries: state.telemetries } : {}),
       ...(mode === 'invalid' ? { pagesToExclude: ['^/private'] } : {}),

From ce40677657f28b36d986c51cb6fab677e4bf55fc Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Mon, 9 Nov 2026 09:08:53 +0100
Subject: [PATCH 24/51] delete temp docs

---
 temp_docs/CHANGES_DESC.md              |  720 ---------
 temp_docs/CHANGES_DESC_LIBRARY_ONLY.md |  583 --------
 temp_docs/CLAUDE_HANDOFF.md            |  302 ----
 temp_docs/INTEGRATION-DATA-GATEWAY.md  | 1844 ------------------------
 temp_docs/SESSION-LIFECYCLE.md         |  243 ----
 temp_docs/WATCHTOWER_LAB_PLAN.md       |  171 ---
 6 files changed, 3863 deletions(-)
 delete mode 100644 temp_docs/CHANGES_DESC.md
 delete mode 100644 temp_docs/CHANGES_DESC_LIBRARY_ONLY.md
 delete mode 100644 temp_docs/CLAUDE_HANDOFF.md
 delete mode 100644 temp_docs/INTEGRATION-DATA-GATEWAY.md
 delete mode 100644 temp_docs/SESSION-LIFECYCLE.md
 delete mode 100644 temp_docs/WATCHTOWER_LAB_PLAN.md

diff --git a/temp_docs/CHANGES_DESC.md b/temp_docs/CHANGES_DESC.md
deleted file mode 100644
index b7a4cda..0000000
--- a/temp_docs/CHANGES_DESC.md
+++ /dev/null
@@ -1,720 +0,0 @@
-# Add `@absaoss-cps/ngx-ui-watchtower`: a reusable Angular telemetry library, wired into `composition`
-
-## Summary
-
-Adds `@absaoss-cps/ngx-ui-watchtower`, a new Angular library providing application logging,
-scenario (user-journey) health telemetry, business/UX event tracking, and
-PII redaction, with pluggable transport sinks — AWS CloudWatch RUM,
-cross-realm broadcast (for micro-frontend compositions), and a no-op sink
-for local development. Nothing in the library is specific to any one
-application: event names, configuration, and AWS credentials are all
-supplied by the host app.
-
-Each app sends to exactly one destination, registered with
-`provideUwtTelemetryDestination`; swapping it — for a future OpenTelemetry
-exporter, say — is one provider line, with no change to application code.
-An optional in-app diagnostics popup shows, live, everything the app hands
-to its destinations. The package is published publicly on npm as
-`@absaoss-cps/ngx-ui-watchtower`.
-
-The library has a single real runtime dependency, `tslib`. `aws-rum-web`
-is an optional peer dependency, needed only when the RUM sink is used, so
-an application using only the broadcast or no-op sink never pulls in the
-AWS SDK. This is enforced structurally, not just by convention: the RUM
-sink and its providers live in a separate secondary entry point,
-`@absaoss-cps/ngx-ui-watchtower/rum` (see "Two entry points" under Sinks below), so an
-application that never imports from it never needs `aws-rum-web`
-resolvable at build time either. The diagnostics popup is split out the same
-way, into `@absaoss-cps/ngx-ui-watchtower/diagnostics`: it is built from
-cps-ui-kit, an optional peer dependency nothing else in the library touches.
-
-This PR also wires the library end-to-end into `composition`, the
-component-library documentation/demo app, so every major capability
-(scenarios, logs, BI events, redaction) is exercised by real, running
-code rather than only by unit tests.
-
-`projects/ngx-ui-watchtower/README.md` is a short quick guide.
-`projects/ngx-ui-watchtower/DESIGN.md` is the full development design:
-architecture, the reasoning behind each decision, a line-by-line verification
-of every AWS RUM SDK capability claim (checked against the installed
-`aws-rum-web@3.2.1` source, not just its docs), and how a future
-OpenTelemetry destination would be connected.
-
----
-
-## Scenario telemetry
-
-`UwtScenario` / `UwtScenarioTelemetryService` model one user journey — load
-customer data, submit a form, run a search — as an object with steps,
-aggregates, and a terminal outcome.
-
-- **Five terminal statuses**: `success`, `failure`, `abandoned`,
-  `incomplete`, `timeout`. There is no "in progress" status — a running
-  scenario simply has none yet (`scenario.status` is `undefined` until
-  settlement); `scenario.isSettled` answers whether it's done. Settling is
-  absorbing: a second `complete()`/`fail()`/etc. after the first is a
-  documented no-op, not a throw.
-- **Automatic step management**: opening a step closes the previous one as
-  completed; steps carry redacted metadata, an optional message, and a
-  normalized error on failure. `steps[]` always has at least two entries
-  (synthetic `scenario-start`/`scenario-end` boundary markers), even for a
-  scenario that never calls `.step()`.
-- **Aggregates** (`aggregateStart`/`aggregateEnd`) sum a repeatedly-invoked
-  operation (a formatter run per row, a validator per field) into one total
-  instead of one step per call, so a hot loop doesn't blow through the
-  step budget or the record's own size.
-- **Per-scenario timeout** (default 30s, configurable per call or globally,
-  `0` disables): a scenario that never settles auto-settles as `timeout`
-  rather than silently disappearing from the data.
-- **Page-unload safety**: every in-flight scenario is settled as
-  `abandoned` (`page-hidden`) on `pagehide`, with the sink flushed via
-  `sendBeacon`. Concurrent scenarios (a dashboard loading three panels at
-  once) are independent — there is no ambient "current scenario."
-- **User Timings integration**: optional `performance.mark`/`measure`
-  entries on the DevTools Performance track, gated by config or a
-  LocalStorage debug flag. Marks are cleared at settle; a scenario with its
-  timeout explicitly disabled and no navigation to clean it up is still
-  guarded by an independent mark-cleanup fallback, so marks can't
-  accumulate in the Performance buffer for the life of the page.
-- **Timers stay out of Angular's zone.** A scenario's timeout and the
-  mark-cleanup fallback are scheduled outside the zone, so a running
-  scenario never holds the application unstable (`whenStable`, hydration)
-  for the length of its timeout. A configured duration longer than
-  `setTimeout`'s 32-bit limit is honoured by rescheduling, for both.
-- **`elapsed` (the scenario and step timeline-position field) is built from
-  the _host_ page's clock, not the local realm's.** It exists specifically
-  so events from one session can be lined up against each other — but a
-  fragment's own `performance.now()` runs from a later `timeOrigin` than
-  the shell's, so a per-realm value would silently put shell- and
-  fragment-originated records on two different, non-comparable timelines
-  despite sharing one session id. `uwtElapsedNow()` prefers
-  `top.performance.now()`, mirroring the same fix already applied to User
-  Timing marks above, falling back to the local realm's clock if `top`
-  throws (cross-origin, sandboxed).
-- **`maxKeys` is enforced on the combined metadata, not each bag in
-  isolation.** `setData()`, an outcome's metadata at settle, and a step's
-  initial plus closing metadata are all merged through a shared helper
-  that re-applies the cap to the merged result — a key already present is
-  always updatable, but a genuinely new key is dropped once the combined
-  count reaches `maxKeys`. Capping each bag independently before merging
-  (the previous behavior) let the total grow past the configured bound.
-- **`toRecord()`** is public and safe to call mid-flight — its `status`
-  field is honestly typed as absent until the scenario has actually
-  settled, and its returned `steps` and `metadata` are deep-cloned, not
-  just a fresh array shell around shared objects, so mutating a mid-flight
-  snapshot (including a nested step's own `metadata`) can never change
-  what's later emitted at settlement.
-- **`complete()`/`fail()`/`incomplete()`/`cancel()` share one signature** —
-  `(outcome?: UwtScenarioOutcome)` — so custom metadata, status codes, a
-  `reason`/`message`, and (for `fail()`) the thrown `error` are all
-  available identically regardless of which one is called.
-- **`traceScenario()`** RxJS pipeable operator bridges Observable streams
-  directly to scenario completion/failure with optional outcome derivation,
-  with the outcome mapper itself guarded so a throwing mapper still settles
-  the scenario (as a success with no outcome) instead of crashing the
-  subscription. A teardown that isn't a `complete`/`error` — a superseding
-  `switchMap`, `takeUntilDestroyed()`, a manual unsubscribe — cancels the
-  scenario instead of leaving it to self-settle as a `timeout`; guarded by
-  `isSettled` so it never fires again after a real settle. That
-  cancellation carries no `reason` unless `cancelOutcome` is supplied — a
-  caller's own `scenario.cancel({ reason })` from a `switchMap` projector
-  is always too late, since `switchMap` unsubscribes (and thereby settles)
-  the prior inner Observable before the new projector ever runs.
-- **`UwtScenarioTelemetryService.settled$`** is a public `Observable` of
-  every scenario as it settles, plus `.find(scenarioId)` and
-  `.getActive()` for introspecting in-flight scenarios — a debug overlay,
-  a retry prompt, or a test harness can all build on this directly. Each
-  emission is an independent deep copy, not the same object handed to the
-  sink, so a subscriber mutating it can never change what was already (or
-  is about to be) shipped; the copy is skipped entirely when nothing is
-  subscribed, so the common unobserved case pays nothing for it.
-
-## Logging
-
-`UwtLoggerService` provides structured, leveled application logs, decoupled
-from any specific backend.
-
-- **No hard dependency on a sink**: logging's actual destination is the
-  application's `UwtLogApiProvider`, not `UwtTelemetrySink` — a sink is
-  only an optional enrichment source (session/user id correlation,
-  RUM error mirroring). An application that wants only structured logging,
-  with no scenarios, BI events, or RUM at all, is not required to configure
-  any sink to use it, unlike `UwtScenarioTelemetryService`/
-  `UwtBITelemetryService`, which still fail at bootstrap without one.
-- **Per-logger minimum levels**, overridable per named logger, so one noisy
-  area can run verbose while the rest of the app stays quiet.
-- **Delivery is entirely the application's `UwtLogApiProvider` policy**: the
-  library does no batching of its own — `send()` is called once per record,
-  as it is written. A provider that wants to batch, retry, or authenticate
-  does so on its own terms, with full knowledge of what its endpoint
-  accepts.
-- **Flush reliability at the end of a session**: a provider's optional
-  `flush()` is called on `pagehide`, on `visibilitychange` going hidden
-  (the case mobile browsers routinely produce by killing a backgrounded tab
-  without ever firing `pagehide`), and on teardown — so a provider that
-  chooses to queue its own records doesn't lose the last, still-pending
-  ones when the tab closes.
-- **Named loggers only.** `UwtLoggerService` is a factory: `getLogger(name)`
-  returns the one logger for that name — asking twice returns the same
-  instance — and the service has no unnamed `log`/`warn`/`error`. Every
-  record therefore carries the logger name that per-logger levels, the
-  `debugLogger` filter, `query({ logger })` and the console prefix key off.
-- **Correlation**: pass `correlationId: scenario.id` on a log call, and
-  frontend logs, frontend telemetry and backend logs can be reassembled into
-  one journey; `query({ correlationId })` reads the lines back across every
-  logger.
-  `correlationId` is scrubbed the same way every other string field on a
-  log record is — normally a plain scenario uuid, unaffected either way,
-  but nothing enforces that at runtime, so a caller accidentally binding
-  something sensitive there no longer bypasses redaction on its way to the
-  application's own log backend.
-- **`debugLogger` LocalStorage flag** mirrors records to the console
-  (optionally scoped to specific logger names), independent of production
-  configuration, so a deployed build can be inspected from DevTools without
-  a redeploy. Console lines from all three concerns are prefixed
-  `[<application>][<concern>]` rather than with this library's own name —
-  the same application-first rule already used for User Timing entry names,
-  so that in a composed page the realm a line came from is visible at a
-  glance instead of every realm sharing one indistinguishable prefix.
-- **`UwtNoopLogApiProvider`** is the explicit "no log backend": records are
-  discarded and `query()` finds none.
-- **`UWT_LOG_LEVEL_ORDER`** is exported, so a consumer's own log-query
-  filtering can compare levels without re-declaring the ordering.
-
-## Business/UX events
-
-`UwtBITelemetryService.track()` records discrete, durationless events —
-feature adoption, interaction analysis, funnel steps — supplied entirely by
-the application (the library defines no business vocabulary of its own).
-
-- **Double-fire absorption**: an identical event — same name, scenario
-  correlation, event-type override, feature, and metadata content — within
-  a 400ms window is collapsed, covering the common case of a handler bound
-  to both `click` and `keydown`. The dedup key includes metadata content
-  specifically so two different-but-same-named events in quick succession
-  (two different theme options picked back to back) are never mistaken for
-  a double-fire of one, and includes `eventType`/`feature` so two events
-  that only differ in those fields are never dropped as duplicates of each
-  other — the dedup key is built with `JSON.stringify`, not delimiter
-  joining, so e.g. `eventType: 'x|y', feature: 'z'` can no longer collide
-  with `eventType: 'x', feature: 'y|z'` the way naive `${a}|${b}` joining
-  would. The key cap's oldest-entry eviction now actually evicts the oldest
-  entry: a key re-emitted after its own dedup window elapses is deleted and
-  reinserted, not merely updated in place, so it moves to the front of the
-  `Map`'s iteration order the way its refreshed timestamp implies — without
-  this, a just-refreshed key could still look "oldest" by insertion order
-  and get evicted at capacity, letting an immediate duplicate straight
-  through right after. A duplicate hit refreshes the same position without
-  extending the window — otherwise a frequently-duplicated ("hot") key,
-  the only kind that never reaches that refresh, would stay pinned at
-  whichever position it held from its very first insertion and become the
-  prime eviction candidate precisely because it's actively in use.
-- **Monotonic timing**: the dedup window is measured against
-  `performance.now()`, not the wall clock, so it can't be wedged by a
-  backward time jump (an NTP correction, a device waking from sleep).
-- **The dedup key is built from redacted metadata**, not the raw values
-  passed to `track()` — `metadata` and `feature` are both scrubbed once,
-  up front, and the redacted result is reused for the key and the emitted
-  event alike. Building the key from raw values first would leave
-  sensitive content sitting as a `Map` key in this root service's memory
-  for the page lifetime, even though the emitted event was correctly
-  redacted all along.
-
-## PII redaction
-
-`uwt-telemetry-redact.util.ts` provides the shallow, synchronous redaction
-pass every metadata object, log message, and normalized error goes through
-before reaching a sink.
-
-- **Key-name denylist**, extensible per-application via
-  `extraKeyPatterns`, catches conventionally-named sensitive fields
-  (`password`, `token`, `secret`, `ssn`, …) regardless of value shape.
-- **Opt-in value-content scanning** (`scanValuePatterns`) additionally
-  redacts email addresses, credit-card numbers (Luhn-validated to avoid
-  false positives on unrelated digit runs), SSNs, IPv4 addresses, and phone
-  numbers found _inside_ a string value, not just under a suspicious key
-  name — closing the gap where PII lands under an innocuous key. Off by
-  default; each entity type is opted into individually. The `'phone'`
-  pattern covers NANP (US/Canada) numbers plus international-format numbers
-  from South Africa, Botswana, Ghana,
-  Kenya, Mauritius, Mozambique, Namibia, Seychelles, Tanzania, Uganda,
-  Zambia.
-- **URL scrubbing** strips query strings and fragments wherever a URL
-  appears in a string, including one embedded inside a longer message, not
-  only when the whole string is a bare path.
-- **Error normalization** (`uwtNormalizeError`) redacts stack traces and
-  messages, and specifically recognizes `HttpErrorResponse`-shaped objects
-  (structurally, without importing `@angular/common/http`) so an HTTP
-  failure's name/message survive normalization instead of being flattened
-  to a generic, unhelpful `Error`.
-- **`extraValueTransforms`** — application-supplied `(value: string) =>
-string` functions run on every string value after all pattern-based
-  scrubbing, an escape hatch for redaction logic no regex can express. A
-  throwing transform is skipped (logged in dev mode only), not fatal, and
-  never blocks the rest of the pipeline.
-- **Per-concern redaction toggle**: `withLogging`, `withScenarios`, and
-  `withBIEvents` each accept a `redact: boolean` (default `true`). Turning
-  it off for one concern disables only the _configurable_ PII scrubbing
-  (`extraKeyPatterns`, value-pattern scanning, URL-query stripping) for
-  that concern — the built-in credential denylist, size caps, error
-  normalization, and `extraValueTransforms` are a safety floor and stay on
-  regardless, via `uwtRedactConfigFor()`.
-- **Per-resolved-config isolation**: `extraKeyPatterns`/`extraValuePatterns`/`extraValueTransforms`
-  arrays are always copied fresh per `provideUwtTelemetry()` call, so
-  mutating one application's array can never leak into another's.
-
-## Sinks
-
-`UwtTelemetrySink` is the six-method abstraction every sink implements;
-applications inject the same services regardless of which is active.
-
-- **Exactly one destination, swappable.** Every destination — RUM,
-  broadcast, no-op, or one an application writes — is registered with
-  `provideUwtTelemetryDestination(SinkClass, { init? })`, which binds the
-  sink and runs its optional startup hook once, fail-open. Registering two
-  different destinations fails at bootstrap instead of silently keeping the
-  last. `uwtClassifyTelemetryEvent(eventType, payload)` tells a sink whether
-  it received a scenario record, a step event, a BI event or something
-  else, for any event namespace.
-- **Sign-out**: `setUserId(undefined)` or `setUserId('')` — an empty string
-  identifies nobody.
-
-- **RUM sink** (`UwtRumTelemetrySink`) wraps `aws-rum-web`, lazy-loaded so
-  the SDK is never in an application's bundle unless the RUM sink is
-  actually selected.
-  - **Two entry points.** `UwtRumTelemetrySink`, `provideUwtTelemetryRumSink`,
-    and everything `UwtRumCredentialsProvider`-shaped are exported from a
-    separate secondary entry point, `@absaoss-cps/ngx-ui-watchtower/rum`, not the main
-    `@absaoss-cps/ngx-ui-watchtower` barrel. Lazy-loading `aws-rum-web` at runtime prevents
-    it from being _bundled_ unless reached, but does not prevent it from
-    being _resolved_ — a static `import` is parsed as part of building the
-    module graph before any dead-code elimination runs, and a bundler must
-    resolve a dynamic `import()`'s specifier at build time to construct its
-    lazy chunk regardless of whether that branch ever executes. So keeping
-    `UwtRumTelemetrySink` out of the main entry point's module graph
-    entirely — not just tree-shaking it — is what lets an application
-    using only `provideUwtTelemetrySink('broadcast' | 'noop')` skip
-    installing `aws-rum-web` altogether. The cost: ng-packagr hardcodes
-    each entry point's TypeScript `rootDir` to that entry's own directory,
-    so `@absaoss-cps/ngx-ui-watchtower/rum` cannot reach the main entry's internal
-    `uwtSafe`/`uwtIsBrowser`/`uwtUuid`-style helpers by relative import;
-    rather than exporting them publicly just to satisfy that constraint, it
-    carries a small verbatim private copy of its own. See DESIGN.md §3,
-    "Entry points", for the full reasoning.
-  - Exposes the library's near-complete `aws-rum-web` configuration
-    surface (sampling, session behavior, dispatch/buffering, cookies,
-    page tracking, tracing) through `UwtRumAppMonitorConfig`, hand-typed so
-    no SDK types leak into the public API; every field with a real SDK
-    default is left unset unless the application overrides it, so the
-    library's defaults never drift from the SDK's own.
-  - Credentials come from an application-supplied
-    `UwtRumCredentialsProvider`; a failed or unreachable broker degrades to
-    a disabled-but-non-throwing sink rather than breaking the app.
-  - Credential refresh retries on failure instead of the refresh chain
-    dying permanently after one transient error, and is safe against the
-    destroy/async race where the sink is torn down while a refresh (or the
-    initial client construction) is still in flight. A refresh due to fire
-    immediately — already-expired or newly-issued credentials expiring
-    within the refresh skew window — falls back to the same bounded retry
-    delay instead of scheduling an immediate refresh, so a broker stuck
-    returning bad credentials can't tight-loop the sink.
-  - A credential refresh returning `null` disables RUM for the session, as
-    documented on `UwtRumCredentialsProvider.load()`: the client is torn
-    down — the SDK's own `disable()` is called on the live instance, not
-    just the reference dropped, so its listeners, plugins, and dispatch
-    timer actually stop — rather than continuing to collect with now-stale
-    credentials, and events recorded after that point are dropped rather
-    than silently queued forever in the pre-init buffer. The same teardown
-    runs on `ngOnDestroy()`, so an Angular-destroyed sink can't leave an
-    orphaned client still collecting (and, if the app is bootstrapped
-    again in the same page, duplicating telemetry).
-    The very first load honors the identical contract, not only a later
-    refresh — declining before the client is ever constructed, or the SDK
-    throwing anywhere in the init sequence (construction, or applying
-    identity/credentials to an already-constructed client), now also
-    disables the session and discards the pre-init buffer, instead of
-    leaving every subsequent `record()` call buffering into the capped
-    pre-init queue forever, a stale `flush()` warning about init being
-    unfinished when it had actually just been declined, or — for a throw
-    after construction — an orphaned, still-running client nothing ever
-    tore down.
-  - A bounded pre-init buffer means telemetry recorded before the RUM
-    client finishes initializing is not silently lost, and a dev-mode
-    warning fires specifically when the page unloads before that
-    resolution — not when the buffer is instead cleared because RUM was
-    declined or failed to initialize, which is a deliberate silent
-    discard, not an unload-mid-init loss. `record()`,
-    `recordPageView(pageId)`, and `recordError(error)` all buffer and
-    replay identically — an error mirrored from `UwtLoggerService` (or
-    reported directly) before the SDK loads is preserved, not dropped.
-    The three record/buffer/dispatch call sites share one internal
-    helper, so the guard can't drift between them.
-  - `UwtRumAppMonitorConfig.clientBuilder` is typed on `aws-rum-web`'s own
-    `ClientBuilder` parameter shape in full (`endpoint: URL, region:
-string, credentials?: ClientBuilderCredentials, compressionStrategy?:
-{ enabled: boolean }`) rather than `(...args: unknown[]) => unknown` —
-    the latter looks more
-    permissive but is actually the opposite: TypeScript checks function
-    parameters contravariantly, so a real, concretely-typed `ClientBuilder`
-    is not assignable to a parameter typed `unknown`, and the escape hatch
-    could never be used without a cast.
-- **Broadcast sink/host** (`UwtBroadcastTelemetrySink` /
-  `UwtTelemetryBroadcastHost`) let a micro-frontend fragment forward its
-  telemetry to the shell that owns the real RUM client, so a composed page
-  gets one AWS session and one event budget instead of one per fragment.
-  Session id **and** user id are synced two-way across every realm on the
-  channel — a user id set in one fragment is visible to a sibling
-  fragment's own logs, not just to the shell.
-  - The shell can safely run in more than one tab without double-recording
-    one event: `UwtTelemetryBroadcastHost` holds a Web Locks-based leader
-    election per channel, so only the elected tab records forwarded
-    telemetry. "Passive" describes the losing tab's _host_ only, not its
-    fragments — they keep forwarding on the same origin-wide channel
-    regardless, so their events are recorded (once, not lost) through the
-    _winning_ tab's AWS RUM client, attributed to that tab's session and
-    page rather than their own. If the same composed page could
-    realistically be open in more than one tab, give each tab's own
-    instance a unique channel name to avoid this — see README.md
-    "Multiple tabs of the same composed page" and DESIGN.md §13 "Known
-    limits". Fails open (elects
-    immediately) when the Locks API is unavailable, or if a lock request
-    itself is rejected — or throws synchronously instead of rejecting,
-    guarded the same way now that this runs unguarded inside an
-    `APP_INITIALIZER`, where an uncaught throw would otherwise crash
-    application bootstrap rather than just fail to elect a leader. A tab
-    destroyed while its own election is still
-    queued (never granted) no longer deadlocks the channel — it is
-    recognized as released the moment it is granted, and the lock passes
-    straight to the next queued tab instead of being held forever by one
-    that already closed.
-  - A genuine duplicate host provider (e.g. `provideUwtTelemetryBroadcastHost()`
-    supplied in both a root and a lazy-loaded module) is detected and warned
-    about via a small same-realm registry, not the `identity` broadcast —
-    the broadcast is origin-wide and can't tell a real duplicate apart from
-    a different, legitimate tab, which must never warn.
-  - Every message kind on the wire protocol is now field-validated, not
-    just its `kind` discriminant — `identity`'s `sessionId`/`userId` and a
-    forwarded error's `stack` are all type-checked before being trusted.
-    An `event`/`error` message's optional `metadata` is validated too, not
-    just passed through: any same-origin code can post to a
-    `BroadcastChannel` by name, and without this a payload with a nested
-    object/array value would reach a receiving sink's own sanitizer (e.g.
-    `UwtRumTelemetrySink.sanitize()`, which trusts the shape rather than
-    re-checking it) unvalidated.
-  - A forwarded error carries the originating fragment's identity through
-    the wire protocol; since the underlying AWS RUM client's `recordError`
-    has no metadata parameter to carry it, the RUM sink folds a
-    cross-realm origin into the error's `name` (e.g. `[fragment-app]
-TypeError`) rather than losing it and attributing every fragment error
-    to the shell.
-  - **Fragment logs go to the shell too.** `provideUwtTelemetrySink('broadcast')`
-    also binds `UWT_LOG_API_PROVIDER` to `UwtBroadcastLogApiProvider`, so a
-    fragment needs no log backend: records, `flush()` and `query()` — a
-    request answered by the shell's provider, or `[]` after a 10-second
-    timeout when no shell answers — all go through the shell. The host
-    requires a log provider of its own and fails at bootstrap without one;
-    in a realm that itself forwards, it warns and stays inactive rather than
-    looping; and it links a fragment's mirrored error to that fragment's log
-    record for the diagnostics popup.
-- **No-op sink** for local development and testing — telemetry calls
-  succeed and do nothing, so a fragment developed standalone never breaks
-  for lack of a shell to compose into. Every override keeps the abstract
-  `UwtTelemetrySink` method's full parameter list rather than narrowing to
-  zero arguments — TypeScript's bivariant method-override checking would
-  have allowed the narrower form to still satisfy `extends
-UwtTelemetrySink`, but it would make the _concrete_ `UwtNoopTelemetrySink`
-  type itself reject a normal call like `.record(type, payload)`.
-  `getUserId()` retains what `setUserId()` was last given, rather than
-  always reporting `undefined` — the one piece of state this sink can't
-  just discard along with everything else, since `UwtLoggerService` reads
-  it for user correlation on every log record, and logs still reach a real
-  `UWT_LOG_API_PROVIDER` even in noop mode.
-
-## Diagnostics popup
-
-`@absaoss-cps/ngx-ui-watchtower/diagnostics` adds an in-app window that
-lists, live, every BI event, scenario event and log record the app hands to
-its destinations — without DevTools, in every environment.
-
-- Opened with Shift+E+I on every platform. The keys are
-  configurable, or can be switched off in favour of `open()` from the app's
-  own UI; `enabled` limits who can open it at all.
-- Three sections — BI, scenario, logging — each with its own search, field
-  filters and JSON download or copy; pause and clear apply to all three. At
-  most 500 events per section, discarded when the popup closes.
-- Built from cps-ui-kit components, non-modal so the app stays usable
-  beside it, light theme only for now.
-- Fed by `UwtTelemetryMonitor` (main entry): every hand-off site publishes
-  the object it just sent, after the hand-off, deep-copied, and only while
-  something is subscribed — otherwise it costs one check per event. It never
-  sends anything itself.
-
-## Configuration & providers
-
-- `provideUwtTelemetry(identity, ...features)` takes the application's
-  identity (`application`/`environment`/`version`, event namespace) as a
-  mandatory first argument, composed with optional, independently
-  omittable `withLogging(...)`, `withScenarios(...)`, `withBIEvents(...)`,
-  `withRedaction(...)` features — mirroring Angular's own
-  `provideHttpClient(withInterceptors(...))` convention. Each concern gets
-  its own DI token (`UWT_LOG_CONFIG`, `UWT_SCENARIO_TELEMETRY_CONFIG`,
-  `UWT_BI_TELEMETRY_CONFIG`, `UWT_REDACT_CONFIG`, plus `UWT_TELEMETRY_IDENTITY` for
-  identity), so a consumer can override one concern through plain DI
-  substitution without touching the others. BI event tracking (dedup
-  window and key cap) is configurable via `withBIEvents(...)` rather than
-  fixed at hardcoded constants.
-- `provideUwtTelemetrySink('broadcast' | 'noop')`,
-  `provideUwtTelemetryRumSink()` (from `@absaoss-cps/ngx-ui-watchtower/rum`), and
-  `provideUwtTelemetryBroadcastHost()` select the transport explicitly —
-  there is no default destination, so an app can never look wired up while
-  silently shipping nothing, and there is never more than one.
-- Scenario, step, logger, and BI event names are typed as a closed
-  vocabulary via TypeScript module augmentation
-  (`declare module '@absaoss-cps/ngx-ui-watchtower'`), so a typo in a name is a compile error
-  instead of a second, silently incomplete metric series.
-
----
-
-## `composition` integration
-
-Wires the library into real, running pages rather than only into unit
-tests. `AppTelemetryService` (new) owns route-navigation scenario tracking
-and application-level BI/log calls, and logs `'Application started'`
-(with the browser's `navigator.language`, when running in one — `start()`
-is called unconditionally from `AppComponent`, before its own
-`isPlatformBrowser` check, so this is `isPlatformBrowser`-gated internally
-too, to stay safe if `composition` ever gains an SSR target) once
-tracking begins to bound the session in the log stream; the page-level
-integrations below build on it:
-
-- **Route navigation** — every router navigation is a scenario
-  (`resolve-route` → `activate`), giving concurrent/superseded navigations
-  real coverage. A sidebar nav-link click is recorded via
-  `markNavigationIntent()` and backdates the scenario's start to the click
-  itself rather than the router's own (slightly later) `NavigationStart`,
-  so event-handling/guard/change-detection time is counted as part of the
-  wait the user actually experienced. A route landed on without its tab
-  segment (e.g. bare `/checkbox`) is redirected to `examples` by a
-  `CanMatch` guard (`defaultTabRedirectGuard`); since any guard-returned
-  redirect restarts navigation under a new id, `AppTelemetryService`
-  recognizes that specific restart (`NavigationCancel`'s
-  `code === NavigationCancellationCode.Redirect`) and continues the same
-  scenario into the follow-up navigation instead of opening a second one —
-  one user-visible navigation still produces exactly one scenario record.
-  `NavigationSkipped` (a terminal event, notably for same-URL navigation)
-  is handled too: it clears any pending click-intent and settles any
-  scenario already opened for that navigation id, so a skipped navigation
-  can't leave a stale intent around to wrongly backdate the _next_,
-  unrelated navigation within the 2s freshness window.
-- **File upload** — processing scenarios are tracked per upload widget
-  (keyed by filename), so two `<cps-file-upload>` widgets sharing the same
-  processing callback can be interacted with independently without one's
-  cancel affecting the other's in-flight scenario; a scenario still
-  processing when the page navigates away is cancelled, not leaked. Every
-  widget on the page — including the one demonstrating a failing callback
-  — wires `(fileProcessingCancelled)` to cancel its own scenario; without
-  it, clicking that widget's cancel button unsubscribes the processing
-  pipeline before the scenario ever learns the user cancelled, leaving it
-  to self-settle as a `timeout` 30s later instead of an immediate,
-  accurate cancellation. A successful upload settles its scenario directly
-  in the processing pipeline's own `next`/`error` handlers rather than via
-  `traceScenario`'s stream-completion hook: `CpsFileUploadComponent` wraps
-  the callback's observable in `take(1)`, which unsubscribes right after
-  the first value — before the source's own `complete` notification would
-  reach a downstream `tap()` — so a successful upload would otherwise never
-  call `scenario.complete()` and would sit active until its own timeout.
-- **Autocomplete** — search scenarios per widget (single/multi), with
-  supersede-on-new-query cancellation; a search or validation error is
-  caught, settles the scenario as failed, and leaves the search pipeline
-  able to serve future queries rather than dying after the first failure.
-  Selecting an option to validate follows the same supersede pattern: a
-  newer selection cancels a still-running validation via `switchMap`
-  rather than the two running independently and clobbering each other's
-  state, and the validating indicator is reliably cleared on both the
-  success and error paths. The `reason: 'superseded'` on that cancellation
-  is threaded through `traceScenario`'s `cancelOutcome`, not a direct
-  `scenario.cancel(...)` call — the latter would be a no-op here, since
-  `switchMap` already settles the prior scenario before a manual cancel in
-  the new projector could run.
-- **Table lazy-load** — server-side page fetches are tracked as scenarios,
-  cancelling a superseded in-flight load. A destroy landing between the
-  load's queued microtask and the timer it schedules is guarded against
-  explicitly, so a page navigated away from doesn't have its (already
-  unmounted) state mutated once that timer fires.
-- **Sidebar search** — reports a debounced BI event once typing pauses,
-  not per keystroke, so the RUM session's event budget isn't spent on
-  intermediate keystrokes.
-- **Theme options / code-example copy / sidebar collapse** — BI events for
-  feature adoption tracking (`theme_option_changed`, `code_copied`,
-  `sidebar_toggled`).
-- **Bare `console.warn` calls replaced with the structured logger** in
-  three places — a route missing a `<title>` (`routing` logger, offending
-  URL as context), a code example missing both `htmlCode` and `tsCode`,
-  and a failed clipboard-copy — each now reports through `UwtLoggerService`
-  instead of an unstructured console line.
-- Every component above cancels its own in-flight scenario(s) on
-  `ngOnDestroy`, so navigating away mid-journey doesn't leave the scenario
-  registry (or the RUM event budget) accumulating abandoned entries.
-- `resolveDeploymentEnvironment()` — this workspace has no
-  `environment.ts`/`fileReplacements` build variant, so
-  `provideUwtTelemetry`'s `environment` is derived from
-  `window.location.hostname` at bootstrap instead of a hardcoded literal:
-  recognized local-dev hostnames (`localhost`, `127.0.0.1`, `[::1]`,
-  `0.0.0.0`) resolve to `'development'`, everything else to `'production'`.
-  The classification rule (`classifyHostname`) is a pure function, unit
-  tested directly; the thin `window`-reading wrapper around it is not
-  meaningfully testable under jsdom and isn't.
-- `AppLogApiProvider` — an in-memory ring-buffered log backend standing in
-  for a real endpoint, with a browser-side JSON export. The download's
-  temporary anchor is created before, and removed in a `finally` alongside
-  the object URL — not both inside the same `try` after `.click()` — so a
-  `click()` that throws can't leave the anchor stuck in the DOM forever.
-- `AppRumCredentialsProvider` — the credentials-broker integration point,
-  requesting `/rum/init` with `cache: 'no-store'` since the response
-  carries live, temporary AWS credentials that must never be served stale
-  from the browser's HTTP cache.
-- `telemetry.schema.ts` — this application's declared scenario/step/logger
-  vocabulary.
-- **Diagnostics popup** — `provideUwtTelemetryDiagnostics()` in
-  `app.module.ts`, so the popup opens on every page with the shortcut.
-
-## Documentation
-
-- **`README.md`** — a short quick guide: setup, scenarios, BI events,
-  logging, the signed-in user, privacy, micro-frontends, debugging and the
-  diagnostics popup, testing.
-- **`DESIGN.md`** — the full development design in 14 sections: goals,
-  architecture and public API, data model, lifecycle, AWS mapping (verified
-  against the installed `aws-rum-web` source rather than its public
-  documentation), metrics, correlation, privacy, configuration, error
-  handling, usage, micro-frontends, and how to connect an OpenTelemetry
-  destination later.
-- **`telemetry-trace.capture.spec.ts`** (`projects/composition/src/app/`)
-  — drives `composition`'s real services with
-  `debugScenario`/`debugLogger`/`debugBI` enabled and captures the exact
-  payloads handed to the sink and the log API provider, including
-  synthetic cases (`incomplete`, `exceededStepsLimit`, `mirrorErrorsToRum`,
-  redaction) as a concrete, reviewable example of the emitted payload
-  shapes described in `DESIGN.md`. Regenerate with `npm run trace:telemetry`;
-  the JSON it produces isn't committed (see `.gitignore`).
-
-## Workspace wiring
-
-- `angular.json` gains the `@absaoss-cps/ngx-ui-watchtower` library project (ng-packagr
-  build, dev/production `tsconfig` split); `tsconfig.json` adds it to the
-  workspace's project references.
-- `projects/ngx-ui-watchtower/rum/ng-package.json` and
-  `projects/ngx-ui-watchtower/diagnostics/ng-package.json` declare the
-  `/rum` and `/diagnostics` secondary entry points (ng-packagr discovers it
-  automatically by scanning the primary package's directory for nested
-  `ng-package.json` files — no separate `package.json` or `angular.json`
-  project entry is needed for a secondary entry point).
-- `jest.config.js` maps all three specifiers — `@absaoss-cps/ngx-ui-watchtower`,
-  `…/rum` and `…/diagnostics` —
-  import specifiers to source, the same way `cps-ui-kit` already is, so
-  tests and the IDE resolve them without a prior build; `tsconfig.json`'s
-  `"paths"` gets the matching
-  entries.
-- The package build resolves cps-ui-kit from its built output
-  (`dist/cps-ui-kit`, a `paths` entry in the library's `tsconfig.lib.json`),
-  so the kit stays an external dependency rather than being compiled in —
-  which is why `build:telemetry` builds cps-ui-kit first.
-- `projects/ngx-ui-watchtower/rum/tsconfig.lib.json` /
-  `tsconfig.spec.json` (new) and their addition to the root `tsconfig.json`'s
-  `"references"` — ng-packagr generates its own tsconfig per entry point
-  internally and doesn't need these, but without them nothing covered the
-  `rum/` directory as a TypeScript project, so `tsc --build` and the IDE's
-  language service couldn't resolve its `@absaoss-cps/ngx-ui-watchtower` import at all.
-- CI (`.github/workflows/cps-shared-ui-checkers.yml`) gains a
-  `build:telemetry` step and a `test:ngx-ui-watchtower` step alongside the
-  existing `cps-ui-kit` ones, plus a `build:documentation` step building
-  `composition` itself — the one thing in this repo that actually imports
-  `@absaoss-cps/ngx-ui-watchtower`/`@absaoss-cps/ngx-ui-watchtower/rum` and exercises the real, bundled
-  integration; without it, a secondary-entry-point resolution failure or
-  other integration break could merge with every other check green.
-- Root `package.json` gains `build:telemetry`/`test:ngx-ui-watchtower` scripts
-  and `aws-rum-web` as a dependency (for `composition`'s real use of the RUM
-  sink); `projects/ngx-ui-watchtower/package.json` /
-  `projects/ngx-ui-watchtower/ng-package.json` declare the new library's own
-  metadata, peer dependencies (`cps-ui-kit`, `@angular/forms` and
-  `@angular/animations` optional, for the popup), `publishConfig: { access:
-"public" }` for the scoped npm package, and ng-packagr output
-  configuration.
-- `projects/composition/tsconfig.app.json` gains `skipLibCheck: true` —
-  needed because `aws-rum-web` pulls in `rrweb` typings that don't compile
-  under this workspace's TypeScript settings — and an explicit `rootDir:
-"../../"`, matching its sibling `tsconfig.spec.json`'s existing setting;
-  without it, `composition`'s own path-mapped imports of `cps-ui-kit`/
-  `@absaoss-cps/ngx-ui-watchtower` source (outside its own directory) violated TypeScript's
-  rootDir check. `projects/composition/tsconfig.json` — the plain
-  `tsconfig.json` VS Code's language service actually resolves first when a
-  file is opened, separate from `tsconfig.app.json` — gets both the same
-  `rootDir` fix and `skipLibCheck: true`, for the identical reasons.
-
-## Testing
-
-- **822 tests** in `@absaoss-cps/ngx-ui-watchtower`, **266 tests** in
-  `composition`, all passing.
-- **Playwright**: 8 end-to-end tests for the diagnostics popup
-  (`playwright/composition/telemetry-diagnostics.spec.ts`) and 3
-  accessibility tests for it in `accessibility-composition.spec.ts`.
-- Lint clean across the workspace.
-- Both production builds (`@absaoss-cps/ngx-ui-watchtower` library build,
-  `composition` documentation-site build) succeed with no compiler or CommonJS warnings.
-- The test suite includes mutation-checked coverage of every
-  concurrency/lifecycle-sensitive path (destroy-time cancellation,
-  credential-refresh retry with 32-bit overflow protection, the scenario
-  timeout rescheduling itself (rather than settling early) when a clamped
-  32-bit-overflow-protection hop fires before the real configured deadline,
-  the mark-cleanup fallback timer sharing that same overflow protection
-  (rescheduling the same way rather than clearing marks early), `elapsed`'s host-page-relative clock, cross-realm identity sync, redaction ordering,
-  dedup keying, RxJS operator stream settlement, the leader-election
-  destroy-while-queued race, `settled$`'s copy-on-emit, the dedup key-cap
-  eviction-ordering fix, a successful upload settling under `take(1)`,
-  `traceScenario`'s cancel-on-unsubscribe path, the dedup key's
-  `JSON.stringify` collision fix, `UwtNoopTelemetrySink`'s `getUserId()`
-  retention, the download anchor surviving a throwing `click()`, the
-  initial-load disable-flag parity, the dedup cache's hot-key eviction
-  fix, the leader election's synchronous-throw fail-open, per-call
-  `extraValueTransforms` isolation, `correlationId` scrubbing, the
-  pre-init buffer discard (not just a stopped future-buffering) on a
-  declined or failed init, the aggregate-freeze-at-settlement fix, the
-  BI dedup key being built from redacted rather than raw metadata,
-  `maxKeys` being re-applied to combined scenario/step metadata rather
-  than to each independently-capped bag before merging, the same-realm
-  duplicate-host registry, `traceScenario`'s `cancelOutcome` winning
-  the race against a `switchMap`'s own prior-subscription teardown, the
-  broadcast wire protocol's `metadata` field being validated as flat
-  primitives rather than passed through unchecked, the duplicate-host
-  diagnostic warning itself being fail-open (a patched, throwing
-  `console.warn` can't crash host construction), and
-  `AppTelemetryService`'s `NavigationSkipped` handling clearing a stale
-  click-intent that would otherwise backdate an unrelated navigation) —
-  each such test
-  was verified to actually fail when its corresponding guard is removed,
-  not only to pass against the current implementation.
-  `UwtRumAppMonitorConfig.clientBuilder`'s completed parameter signature is
-  verified two ways: a runtime test whose inline `clientBuilder`
-  implementation leaves `credentials`/`compressionStrategy` unannotated,
-  relying on the field's own type for contextual inference; and, like
-  `UwtNoopTelemetrySink`'s preserved method signatures, at the type level
-  (`tsc --build`) — since ts-jest itself runs with `diagnostics: false`,
-  neither jest nor this workspace's own `npm run typecheck` would catch a
-  regression here on its own, see "Known gaps" below.
-
-### Known gaps
-
-- **`npm run typecheck` (`tsc --noEmit`) is currently a no-op.** The root
-  `tsconfig.json` is solution-style — `"files": []` plus per-project
-  `"references"` — and plain `tsc --noEmit` only checks a config's own
-  `"files"`/`"include"`, not its references; following references needs
-  `tsc --build`. Confirmed directly: with a real type error introduced
-  (temporarily, while verifying the `clientBuilder` fix above), `npm run
-typecheck` still exited `0` with no output. `tsc --build` does catch it,
-  but currently also reports roughly 100 pre-existing errors across the
-  workspace unrelated to this PR (`aws-rum-web`'s bundled `rrweb` typings;
-  ambient Node globals `@types/node` would otherwise supply, since this
-  workspace's `tsconfig`s deliberately omit it — see `@absaoss-cps/ngx-ui-watchtower`'s own
-  `types: ["jest"]` convention). Pre-existing, not introduced by this PR;
-  switching the script to `tsc --build` would immediately need triaging
-  those separately. Left as-is here; flagging for a follow-up.
diff --git a/temp_docs/CHANGES_DESC_LIBRARY_ONLY.md b/temp_docs/CHANGES_DESC_LIBRARY_ONLY.md
deleted file mode 100644
index d09b3b6..0000000
--- a/temp_docs/CHANGES_DESC_LIBRARY_ONLY.md
+++ /dev/null
@@ -1,583 +0,0 @@
-# Add `@absaoss-cps/ngx-ui-watchtower`: a reusable Angular telemetry library
-
-## Summary
-
-Adds `@absaoss-cps/ngx-ui-watchtower`, a new Angular library providing application logging,
-scenario (user-journey) health telemetry, business/UX event tracking, and
-PII redaction, with pluggable transport sinks — AWS CloudWatch RUM,
-cross-realm broadcast (for micro-frontend compositions), and a no-op sink
-for local development. Nothing in the library is specific to any one
-application: event names, configuration, and AWS credentials are all
-supplied by the host app.
-
-Each app sends to exactly one destination, registered with
-`provideUwtTelemetryDestination`; swapping it — for a future OpenTelemetry
-exporter, say — is one provider line, with no change to application code.
-An optional in-app diagnostics popup shows, live, everything the app hands
-to its destinations. The package is published publicly on npm as
-`@absaoss-cps/ngx-ui-watchtower`.
-
-The library has a single real runtime dependency, `tslib`. `aws-rum-web`
-is an optional peer dependency, needed only when the RUM sink is used, so
-an application using only the broadcast or no-op sink never pulls in the
-AWS SDK. This is enforced structurally, not just by convention: the RUM
-sink and its providers live in a separate secondary entry point,
-`@absaoss-cps/ngx-ui-watchtower/rum` (see "Two entry points" under Sinks below), so an
-application that never imports from it never needs `aws-rum-web`
-resolvable at build time either. The diagnostics popup is split out the same
-way, into `@absaoss-cps/ngx-ui-watchtower/diagnostics`: it is built from
-cps-ui-kit, an optional peer dependency nothing else in the library touches.
-
-This branch adds the library on its own — no consuming application is
-wired to it here, so every capability below is covered by the library's
-own unit tests rather than by a host app exercising it.
-
-`projects/ngx-ui-watchtower/README.md` is a short quick guide.
-`projects/ngx-ui-watchtower/DESIGN.md` is the full development design:
-architecture, the reasoning behind each decision, a line-by-line verification
-of every AWS RUM SDK capability claim (checked against the installed
-`aws-rum-web@3.2.1` source, not just its docs), and how a future
-OpenTelemetry destination would be connected.
-
----
-
-## Scenario telemetry
-
-`UwtScenario` / `UwtScenarioTelemetryService` model one user journey — load
-customer data, submit a form, run a search — as an object with steps,
-aggregates, and a terminal outcome.
-
-- **Five terminal statuses**: `success`, `failure`, `abandoned`,
-  `incomplete`, `timeout`. There is no "in progress" status — a running
-  scenario simply has none yet (`scenario.status` is `undefined` until
-  settlement); `scenario.isSettled` answers whether it's done. Settling is
-  absorbing: a second `complete()`/`fail()`/etc. after the first is a
-  documented no-op, not a throw.
-- **Automatic step management**: opening a step closes the previous one as
-  completed; steps carry redacted metadata, an optional message, and a
-  normalized error on failure. `steps[]` always has at least two entries
-  (synthetic `scenario-start`/`scenario-end` boundary markers), even for a
-  scenario that never calls `.step()`.
-- **Aggregates** (`aggregateStart`/`aggregateEnd`) sum a repeatedly-invoked
-  operation (a formatter run per row, a validator per field) into one total
-  instead of one step per call, so a hot loop doesn't blow through the
-  step budget or the record's own size.
-- **Per-scenario timeout** (default 30s, configurable per call or globally,
-  `0` disables): a scenario that never settles auto-settles as `timeout`
-  rather than silently disappearing from the data.
-- **Page-unload safety**: every in-flight scenario is settled as
-  `abandoned` (`page-hidden`) on `pagehide`, with the sink flushed via
-  `sendBeacon`. Concurrent scenarios (a dashboard loading three panels at
-  once) are independent — there is no ambient "current scenario."
-- **User Timings integration**: optional `performance.mark`/`measure`
-  entries on the DevTools Performance track, gated by config or a
-  LocalStorage debug flag. Marks are cleared at settle; a scenario with its
-  timeout explicitly disabled and no navigation to clean it up is still
-  guarded by an independent mark-cleanup fallback, so marks can't
-  accumulate in the Performance buffer for the life of the page.
-- **Timers stay out of Angular's zone.** A scenario's timeout and the
-  mark-cleanup fallback are scheduled outside the zone, so a running
-  scenario never holds the application unstable (`whenStable`, hydration)
-  for the length of its timeout. A configured duration longer than
-  `setTimeout`'s 32-bit limit is honoured by rescheduling, for both.
-- **`elapsed` (the scenario and step timeline-position field) is built from
-  the _host_ page's clock, not the local realm's.** It exists specifically
-  so events from one session can be lined up against each other — but a
-  fragment's own `performance.now()` runs from a later `timeOrigin` than
-  the shell's, so a per-realm value would silently put shell- and
-  fragment-originated records on two different, non-comparable timelines
-  despite sharing one session id. `uwtElapsedNow()` prefers
-  `top.performance.now()`, mirroring the same fix already applied to User
-  Timing marks above, falling back to the local realm's clock if `top`
-  throws (cross-origin, sandboxed).
-- **`maxKeys` is enforced on the combined metadata, not each bag in
-  isolation.** `setData()`, an outcome's metadata at settle, and a step's
-  initial plus closing metadata are all merged through a shared helper
-  that re-applies the cap to the merged result — a key already present is
-  always updatable, but a genuinely new key is dropped once the combined
-  count reaches `maxKeys`. Capping each bag independently before merging
-  (the previous behavior) let the total grow past the configured bound.
-- **`toRecord()`** is public and safe to call mid-flight — its `status`
-  field is honestly typed as absent until the scenario has actually
-  settled, and its returned `steps` and `metadata` are deep-cloned, not
-  just a fresh array shell around shared objects, so mutating a mid-flight
-  snapshot (including a nested step's own `metadata`) can never change
-  what's later emitted at settlement.
-- **`complete()`/`fail()`/`incomplete()`/`cancel()` share one signature** —
-  `(outcome?: UwtScenarioOutcome)` — so custom metadata, status codes, a
-  `reason`/`message`, and (for `fail()`) the thrown `error` are all
-  available identically regardless of which one is called.
-- **`traceScenario()`** RxJS pipeable operator bridges Observable streams
-  directly to scenario completion/failure with optional outcome derivation,
-  with the outcome mapper itself guarded so a throwing mapper still settles
-  the scenario (as a success with no outcome) instead of crashing the
-  subscription. A teardown that isn't a `complete`/`error` — a superseding
-  `switchMap`, `takeUntilDestroyed()`, a manual unsubscribe — cancels the
-  scenario instead of leaving it to self-settle as a `timeout`; guarded by
-  `isSettled` so it never fires again after a real settle. That
-  cancellation carries no `reason` unless `cancelOutcome` is supplied — a
-  caller's own `scenario.cancel({ reason })` from a `switchMap` projector
-  is always too late, since `switchMap` unsubscribes (and thereby settles)
-  the prior inner Observable before the new projector ever runs.
-- **`UwtScenarioTelemetryService.settled$`** is a public `Observable` of
-  every scenario as it settles, plus `.find(scenarioId)` and
-  `.getActive()` for introspecting in-flight scenarios — a debug overlay,
-  a retry prompt, or a test harness can all build on this directly. Each
-  emission is an independent deep copy, not the same object handed to the
-  sink, so a subscriber mutating it can never change what was already (or
-  is about to be) shipped; the copy is skipped entirely when nothing is
-  subscribed, so the common unobserved case pays nothing for it.
-
-## Logging
-
-`UwtLoggerService` provides structured, leveled application logs, decoupled
-from any specific backend.
-
-- **No hard dependency on a sink**: logging's actual destination is the
-  application's `UwtLogApiProvider`, not `UwtTelemetrySink` — a sink is
-  only an optional enrichment source (session/user id correlation,
-  RUM error mirroring). An application that wants only structured logging,
-  with no scenarios, BI events, or RUM at all, is not required to configure
-  any sink to use it, unlike `UwtScenarioTelemetryService`/
-  `UwtBITelemetryService`, which still fail at bootstrap without one.
-- **Per-logger minimum levels**, overridable per named logger, so one noisy
-  area can run verbose while the rest of the app stays quiet.
-- **Delivery is entirely the application's `UwtLogApiProvider` policy**: the
-  library does no batching of its own — `send()` is called once per record,
-  as it is written. A provider that wants to batch, retry, or authenticate
-  does so on its own terms, with full knowledge of what its endpoint
-  accepts.
-- **Flush reliability at the end of a session**: a provider's optional
-  `flush()` is called on `pagehide`, on `visibilitychange` going hidden
-  (the case mobile browsers routinely produce by killing a backgrounded tab
-  without ever firing `pagehide`), and on teardown — so a provider that
-  chooses to queue its own records doesn't lose the last, still-pending
-  ones when the tab closes.
-- **Named loggers only.** `UwtLoggerService` is a factory: `getLogger(name)`
-  returns the one logger for that name — asking twice returns the same
-  instance — and the service has no unnamed `log`/`warn`/`error`. Every
-  record therefore carries the logger name that per-logger levels, the
-  `debugLogger` filter, `query({ logger })` and the console prefix key off.
-- **Correlation**: pass `correlationId: scenario.id` on a log call, and
-  frontend logs, frontend telemetry and backend logs can be reassembled into
-  one journey; `query({ correlationId })` reads the lines back across every
-  logger.
-  `correlationId` is scrubbed the same way every other string field on a
-  log record is — normally a plain scenario uuid, unaffected either way,
-  but nothing enforces that at runtime, so a caller accidentally binding
-  something sensitive there no longer bypasses redaction on its way to the
-  application's own log backend.
-- **`debugLogger` LocalStorage flag** mirrors records to the console
-  (optionally scoped to specific logger names), independent of production
-  configuration, so a deployed build can be inspected from DevTools without
-  a redeploy. Console lines from all three concerns are prefixed
-  `[<application>][<concern>]` rather than with this library's own name —
-  the same application-first rule already used for User Timing entry names,
-  so that in a composed page the realm a line came from is visible at a
-  glance instead of every realm sharing one indistinguishable prefix.
-- **`UwtNoopLogApiProvider`** is the explicit "no log backend": records are
-  discarded and `query()` finds none.
-- **`UWT_LOG_LEVEL_ORDER`** is exported, so a consumer's own log-query
-  filtering can compare levels without re-declaring the ordering.
-
-## Business/UX events
-
-`UwtBITelemetryService.track()` records discrete, durationless events —
-feature adoption, interaction analysis, funnel steps — supplied entirely by
-the application (the library defines no business vocabulary of its own).
-
-- **Double-fire absorption**: an identical event — same name, scenario
-  correlation, event-type override, feature, and metadata content — within
-  a 400ms window is collapsed, covering the common case of a handler bound
-  to both `click` and `keydown`. The dedup key includes metadata content
-  specifically so two different-but-same-named events in quick succession
-  (two different theme options picked back to back) are never mistaken for
-  a double-fire of one, and includes `eventType`/`feature` so two events
-  that only differ in those fields are never dropped as duplicates of each
-  other — the dedup key is built with `JSON.stringify`, not delimiter
-  joining, so e.g. `eventType: 'x|y', feature: 'z'` can no longer collide
-  with `eventType: 'x', feature: 'y|z'` the way naive `${a}|${b}` joining
-  would. The key cap's oldest-entry eviction now actually evicts the oldest
-  entry: a key re-emitted after its own dedup window elapses is deleted and
-  reinserted, not merely updated in place, so it moves to the front of the
-  `Map`'s iteration order the way its refreshed timestamp implies — without
-  this, a just-refreshed key could still look "oldest" by insertion order
-  and get evicted at capacity, letting an immediate duplicate straight
-  through right after. A duplicate hit refreshes the same position without
-  extending the window — otherwise a frequently-duplicated ("hot") key,
-  the only kind that never reaches that refresh, would stay pinned at
-  whichever position it held from its very first insertion and become the
-  prime eviction candidate precisely because it's actively in use.
-- **Monotonic timing**: the dedup window is measured against
-  `performance.now()`, not the wall clock, so it can't be wedged by a
-  backward time jump (an NTP correction, a device waking from sleep).
-- **The dedup key is built from redacted metadata**, not the raw values
-  passed to `track()` — `metadata` and `feature` are both scrubbed once,
-  up front, and the redacted result is reused for the key and the emitted
-  event alike. Building the key from raw values first would leave
-  sensitive content sitting as a `Map` key in this root service's memory
-  for the page lifetime, even though the emitted event was correctly
-  redacted all along.
-
-## PII redaction
-
-`uwt-telemetry-redact.util.ts` provides the shallow, synchronous redaction
-pass every metadata object, log message, and normalized error goes through
-before reaching a sink.
-
-- **Key-name denylist**, extensible per-application via
-  `extraKeyPatterns`, catches conventionally-named sensitive fields
-  (`password`, `token`, `secret`, `ssn`, …) regardless of value shape.
-- **Opt-in value-content scanning** (`scanValuePatterns`) additionally
-  redacts email addresses, credit-card numbers (Luhn-validated to avoid
-  false positives on unrelated digit runs), SSNs, IPv4 addresses, and phone
-  numbers found _inside_ a string value, not just under a suspicious key
-  name — closing the gap where PII lands under an innocuous key. Off by
-  default; each entity type is opted into individually. The `'phone'`
-  pattern covers NANP (US/Canada) numbers plus international-format numbers
-  from South Africa, Botswana, Ghana,
-  Kenya, Mauritius, Mozambique, Namibia, Seychelles, Tanzania, Uganda,
-  Zambia.
-- **URL scrubbing** strips query strings and fragments wherever a URL
-  appears in a string, including one embedded inside a longer message, not
-  only when the whole string is a bare path.
-- **Error normalization** (`uwtNormalizeError`) redacts stack traces and
-  messages, and specifically recognizes `HttpErrorResponse`-shaped objects
-  (structurally, without importing `@angular/common/http`) so an HTTP
-  failure's name/message survive normalization instead of being flattened
-  to a generic, unhelpful `Error`.
-- **`extraValueTransforms`** — application-supplied `(value: string) =>
-string` functions run on every string value after all pattern-based
-  scrubbing, an escape hatch for redaction logic no regex can express. A
-  throwing transform is skipped (logged in dev mode only), not fatal, and
-  never blocks the rest of the pipeline.
-- **Per-concern redaction toggle**: `withLogging`, `withScenarios`, and
-  `withBIEvents` each accept a `redact: boolean` (default `true`). Turning
-  it off for one concern disables only the _configurable_ PII scrubbing
-  (`extraKeyPatterns`, value-pattern scanning, URL-query stripping) for
-  that concern — the built-in credential denylist, size caps, error
-  normalization, and `extraValueTransforms` are a safety floor and stay on
-  regardless, via `uwtRedactConfigFor()`.
-- **Per-resolved-config isolation**: `extraKeyPatterns`/`extraValuePatterns`/`extraValueTransforms`
-  arrays are always copied fresh per `provideUwtTelemetry()` call, so
-  mutating one application's array can never leak into another's.
-
-## Sinks
-
-`UwtTelemetrySink` is the six-method abstraction every sink implements;
-applications inject the same services regardless of which is active.
-
-- **Exactly one destination, swappable.** Every destination — RUM,
-  broadcast, no-op, or one an application writes — is registered with
-  `provideUwtTelemetryDestination(SinkClass, { init? })`, which binds the
-  sink and runs its optional startup hook once, fail-open. Registering two
-  different destinations fails at bootstrap instead of silently keeping the
-  last. `uwtClassifyTelemetryEvent(eventType, payload)` tells a sink whether
-  it received a scenario record, a step event, a BI event or something
-  else, for any event namespace.
-- **Sign-out**: `setUserId(undefined)` or `setUserId('')` — an empty string
-  identifies nobody.
-
-- **RUM sink** (`UwtRumTelemetrySink`) wraps `aws-rum-web`, lazy-loaded so
-  the SDK is never in an application's bundle unless the RUM sink is
-  actually selected.
-  - **Two entry points.** `UwtRumTelemetrySink`, `provideUwtTelemetryRumSink`,
-    and everything `UwtRumCredentialsProvider`-shaped are exported from a
-    separate secondary entry point, `@absaoss-cps/ngx-ui-watchtower/rum`, not the main
-    `@absaoss-cps/ngx-ui-watchtower` barrel. Lazy-loading `aws-rum-web` at runtime prevents
-    it from being _bundled_ unless reached, but does not prevent it from
-    being _resolved_ — a static `import` is parsed as part of building the
-    module graph before any dead-code elimination runs, and a bundler must
-    resolve a dynamic `import()`'s specifier at build time to construct its
-    lazy chunk regardless of whether that branch ever executes. So keeping
-    `UwtRumTelemetrySink` out of the main entry point's module graph
-    entirely — not just tree-shaking it — is what lets an application
-    using only `provideUwtTelemetrySink('broadcast' | 'noop')` skip
-    installing `aws-rum-web` altogether. The cost: ng-packagr hardcodes
-    each entry point's TypeScript `rootDir` to that entry's own directory,
-    so `@absaoss-cps/ngx-ui-watchtower/rum` cannot reach the main entry's internal
-    `uwtSafe`/`uwtIsBrowser`/`uwtUuid`-style helpers by relative import;
-    rather than exporting them publicly just to satisfy that constraint, it
-    carries a small verbatim private copy of its own. See DESIGN.md §3,
-    "Entry points", for the full reasoning.
-  - Exposes the library's near-complete `aws-rum-web` configuration
-    surface (sampling, session behavior, dispatch/buffering, cookies,
-    page tracking, tracing) through `UwtRumAppMonitorConfig`, hand-typed so
-    no SDK types leak into the public API; every field with a real SDK
-    default is left unset unless the application overrides it, so the
-    library's defaults never drift from the SDK's own.
-  - Credentials come from an application-supplied
-    `UwtRumCredentialsProvider`; a failed or unreachable broker degrades to
-    a disabled-but-non-throwing sink rather than breaking the app.
-  - Credential refresh retries on failure instead of the refresh chain
-    dying permanently after one transient error, and is safe against the
-    destroy/async race where the sink is torn down while a refresh (or the
-    initial client construction) is still in flight. A refresh due to fire
-    immediately — already-expired or newly-issued credentials expiring
-    within the refresh skew window — falls back to the same bounded retry
-    delay instead of scheduling an immediate refresh, so a broker stuck
-    returning bad credentials can't tight-loop the sink.
-  - A credential refresh returning `null` disables RUM for the session, as
-    documented on `UwtRumCredentialsProvider.load()`: the client is torn
-    down — the SDK's own `disable()` is called on the live instance, not
-    just the reference dropped, so its listeners, plugins, and dispatch
-    timer actually stop — rather than continuing to collect with now-stale
-    credentials, and events recorded after that point are dropped rather
-    than silently queued forever in the pre-init buffer. The same teardown
-    runs on `ngOnDestroy()`, so an Angular-destroyed sink can't leave an
-    orphaned client still collecting (and, if the app is bootstrapped
-    again in the same page, duplicating telemetry).
-    The very first load honors the identical contract, not only a later
-    refresh — declining before the client is ever constructed, or the SDK
-    throwing anywhere in the init sequence (construction, or applying
-    identity/credentials to an already-constructed client), now also
-    disables the session and discards the pre-init buffer, instead of
-    leaving every subsequent `record()` call buffering into the capped
-    pre-init queue forever, a stale `flush()` warning about init being
-    unfinished when it had actually just been declined, or — for a throw
-    after construction — an orphaned, still-running client nothing ever
-    tore down.
-  - A bounded pre-init buffer means telemetry recorded before the RUM
-    client finishes initializing is not silently lost, and a dev-mode
-    warning fires specifically when the page unloads before that
-    resolution — not when the buffer is instead cleared because RUM was
-    declined or failed to initialize, which is a deliberate silent
-    discard, not an unload-mid-init loss. `record()`,
-    `recordPageView(pageId)`, and `recordError(error)` all buffer and
-    replay identically — an error mirrored from `UwtLoggerService` (or
-    reported directly) before the SDK loads is preserved, not dropped.
-    The three record/buffer/dispatch call sites share one internal
-    helper, so the guard can't drift between them.
-  - `UwtRumAppMonitorConfig.clientBuilder` is typed on `aws-rum-web`'s own
-    `ClientBuilder` parameter shape in full (`endpoint: URL, region:
-string, credentials?: ClientBuilderCredentials, compressionStrategy?:
-{ enabled: boolean }`) rather than `(...args: unknown[]) => unknown` —
-    the latter looks more
-    permissive but is actually the opposite: TypeScript checks function
-    parameters contravariantly, so a real, concretely-typed `ClientBuilder`
-    is not assignable to a parameter typed `unknown`, and the escape hatch
-    could never be used without a cast.
-- **Broadcast sink/host** (`UwtBroadcastTelemetrySink` /
-  `UwtTelemetryBroadcastHost`) let a micro-frontend fragment forward its
-  telemetry to the shell that owns the real RUM client, so a composed page
-  gets one AWS session and one event budget instead of one per fragment.
-  Session id **and** user id are synced two-way across every realm on the
-  channel — a user id set in one fragment is visible to a sibling
-  fragment's own logs, not just to the shell.
-  - The shell can safely run in more than one tab without double-recording
-    one event: `UwtTelemetryBroadcastHost` holds a Web Locks-based leader
-    election per channel, so only the elected tab records forwarded
-    telemetry. "Passive" describes the losing tab's _host_ only, not its
-    fragments — they keep forwarding on the same origin-wide channel
-    regardless, so their events are recorded (once, not lost) through the
-    _winning_ tab's AWS RUM client, attributed to that tab's session and
-    page rather than their own. If the same composed page could
-    realistically be open in more than one tab, give each tab's own
-    instance a unique channel name to avoid this — see README.md
-    "Multiple tabs of the same composed page" and DESIGN.md §13 "Known
-    limits". Fails open (elects
-    immediately) when the Locks API is unavailable, or if a lock request
-    itself is rejected — or throws synchronously instead of rejecting,
-    guarded the same way now that this runs unguarded inside an
-    `APP_INITIALIZER`, where an uncaught throw would otherwise crash
-    application bootstrap rather than just fail to elect a leader. A tab
-    destroyed while its own election is still
-    queued (never granted) no longer deadlocks the channel — it is
-    recognized as released the moment it is granted, and the lock passes
-    straight to the next queued tab instead of being held forever by one
-    that already closed.
-  - A genuine duplicate host provider (e.g. `provideUwtTelemetryBroadcastHost()`
-    supplied in both a root and a lazy-loaded module) is detected and warned
-    about via a small same-realm registry, not the `identity` broadcast —
-    the broadcast is origin-wide and can't tell a real duplicate apart from
-    a different, legitimate tab, which must never warn.
-  - Every message kind on the wire protocol is now field-validated, not
-    just its `kind` discriminant — `identity`'s `sessionId`/`userId` and a
-    forwarded error's `stack` are all type-checked before being trusted.
-    An `event`/`error` message's optional `metadata` is validated too, not
-    just passed through: any same-origin code can post to a
-    `BroadcastChannel` by name, and without this a payload with a nested
-    object/array value would reach a receiving sink's own sanitizer (e.g.
-    `UwtRumTelemetrySink.sanitize()`, which trusts the shape rather than
-    re-checking it) unvalidated.
-  - A forwarded error carries the originating fragment's identity through
-    the wire protocol; since the underlying AWS RUM client's `recordError`
-    has no metadata parameter to carry it, the RUM sink folds a
-    cross-realm origin into the error's `name` (e.g. `[fragment-app]
-TypeError`) rather than losing it and attributing every fragment error
-    to the shell.
-  - **Fragment logs go to the shell too.** `provideUwtTelemetrySink('broadcast')`
-    also binds `UWT_LOG_API_PROVIDER` to `UwtBroadcastLogApiProvider`, so a
-    fragment needs no log backend: records, `flush()` and `query()` — a
-    request answered by the shell's provider, or `[]` after a 10-second
-    timeout when no shell answers — all go through the shell. The host
-    requires a log provider of its own and fails at bootstrap without one;
-    in a realm that itself forwards, it warns and stays inactive rather than
-    looping; and it links a fragment's mirrored error to that fragment's log
-    record for the diagnostics popup.
-- **No-op sink** for local development and testing — telemetry calls
-  succeed and do nothing, so a fragment developed standalone never breaks
-  for lack of a shell to compose into. Every override keeps the abstract
-  `UwtTelemetrySink` method's full parameter list rather than narrowing to
-  zero arguments — TypeScript's bivariant method-override checking would
-  have allowed the narrower form to still satisfy `extends
-UwtTelemetrySink`, but it would make the _concrete_ `UwtNoopTelemetrySink`
-  type itself reject a normal call like `.record(type, payload)`.
-  `getUserId()` retains what `setUserId()` was last given, rather than
-  always reporting `undefined` — the one piece of state this sink can't
-  just discard along with everything else, since `UwtLoggerService` reads
-  it for user correlation on every log record, and logs still reach a real
-  `UWT_LOG_API_PROVIDER` even in noop mode.
-
-## Diagnostics popup
-
-`@absaoss-cps/ngx-ui-watchtower/diagnostics` adds an in-app window that
-lists, live, every BI event, scenario event and log record the app hands to
-its destinations — without DevTools, in every environment.
-
-- Opened with Shift+E+I on every platform. The keys are
-  configurable, or can be switched off in favour of `open()` from the app's
-  own UI; `enabled` limits who can open it at all.
-- Three sections — BI, scenario, logging — each with its own search, field
-  filters and JSON download or copy; pause and clear apply to all three. At
-  most 500 events per section, discarded when the popup closes.
-- Built from cps-ui-kit components, non-modal so the app stays usable
-  beside it, light theme only for now.
-- Fed by `UwtTelemetryMonitor` (main entry): every hand-off site publishes
-  the object it just sent, after the hand-off, deep-copied, and only while
-  something is subscribed — otherwise it costs one check per event. It never
-  sends anything itself.
-
-## Configuration & providers
-
-- `provideUwtTelemetry(identity, ...features)` takes the application's
-  identity (`application`/`environment`/`version`, event namespace) as a
-  mandatory first argument, composed with optional, independently
-  omittable `withLogging(...)`, `withScenarios(...)`, `withBIEvents(...)`,
-  `withRedaction(...)` features — mirroring Angular's own
-  `provideHttpClient(withInterceptors(...))` convention. Each concern gets
-  its own DI token (`UWT_LOG_CONFIG`, `UWT_SCENARIO_TELEMETRY_CONFIG`,
-  `UWT_BI_TELEMETRY_CONFIG`, `UWT_REDACT_CONFIG`, plus `UWT_TELEMETRY_IDENTITY` for
-  identity), so a consumer can override one concern through plain DI
-  substitution without touching the others. BI event tracking (dedup
-  window and key cap) is configurable via `withBIEvents(...)` rather than
-  fixed at hardcoded constants.
-- `provideUwtTelemetrySink('broadcast' | 'noop')`,
-  `provideUwtTelemetryRumSink()` (from `@absaoss-cps/ngx-ui-watchtower/rum`), and
-  `provideUwtTelemetryBroadcastHost()` select the transport explicitly —
-  there is no default destination, so an app can never look wired up while
-  silently shipping nothing, and there is never more than one.
-- Scenario, step, logger, and BI event names are typed as a closed
-  vocabulary via TypeScript module augmentation
-  (`declare module '@absaoss-cps/ngx-ui-watchtower'`), so a typo in a name is a compile error
-  instead of a second, silently incomplete metric series.
-
-## Documentation
-
-- **`README.md`** — a short quick guide: setup, scenarios, BI events,
-  logging, the signed-in user, privacy, micro-frontends, debugging and the
-  diagnostics popup, testing.
-- **`DESIGN.md`** — the full development design in 14 sections: goals,
-  architecture and public API, data model, lifecycle, AWS mapping (verified
-  against the installed `aws-rum-web` source rather than its public
-  documentation), metrics, correlation, privacy, configuration, error
-  handling, usage, micro-frontends, and how to connect an OpenTelemetry
-  destination later.
-
-## Workspace wiring
-
-- `angular.json` gains the `@absaoss-cps/ngx-ui-watchtower` library project (ng-packagr
-  build, dev/production `tsconfig` split); `tsconfig.json` adds it to the
-  workspace's project references.
-- `projects/ngx-ui-watchtower/rum/ng-package.json` and
-  `projects/ngx-ui-watchtower/diagnostics/ng-package.json` declare the
-  `/rum` and `/diagnostics` secondary entry points (ng-packagr discovers it
-  automatically by scanning the primary package's directory for nested
-  `ng-package.json` files — no separate `package.json` or `angular.json`
-  project entry is needed for a secondary entry point).
-- `jest.config.js` maps all three specifiers — `@absaoss-cps/ngx-ui-watchtower`,
-  `…/rum` and `…/diagnostics` —
-  import specifiers to source, so tests and the IDE resolve them without a
-  prior build; `tsconfig.json`'s `"paths"` gets the matching
-  entries.
-- The package build resolves cps-ui-kit from its built output
-  (`dist/cps-ui-kit`, a `paths` entry in the library's `tsconfig.lib.json`),
-  so the kit stays an external dependency rather than being compiled in —
-  which is why `build:telemetry` builds cps-ui-kit first.
-- `projects/ngx-ui-watchtower/rum/tsconfig.lib.json` /
-  `tsconfig.spec.json` (new) and their addition to the root `tsconfig.json`'s
-  `"references"` — ng-packagr generates its own tsconfig per entry point
-  internally and doesn't need these, but without them nothing covered the
-  `rum/` directory as a TypeScript project, so `tsc --build` and the IDE's
-  language service couldn't resolve its `@absaoss-cps/ngx-ui-watchtower` import at all.
-- CI (`.github/workflows/cps-shared-ui-checkers.yml`) gains a
-  `build:telemetry` step and a `test:ngx-ui-watchtower` step.
-- Root `package.json` gains `build:telemetry`/`test:ngx-ui-watchtower` scripts
-  and `aws-rum-web`, so the `rum` entry point can be built and unit-tested
-  here; it remains an _optional_ peer dependency for consumers.
-  `projects/ngx-ui-watchtower/package.json` /
-  `projects/ngx-ui-watchtower/ng-package.json` declare the new library's own
-  metadata, peer dependencies (`cps-ui-kit`, `@angular/forms` and
-  `@angular/animations` optional, for the popup), `publishConfig: { access:
-"public" }` for the scoped npm package, and ng-packagr output
-  configuration.
-
-## Testing
-
-- **822 tests** in `@absaoss-cps/ngx-ui-watchtower`, all passing.
-- Lint clean across the workspace.
-- The production `@absaoss-cps/ngx-ui-watchtower` library build succeeds with no compiler
-  warnings.
-- The test suite includes mutation-checked coverage of every
-  concurrency/lifecycle-sensitive path (destroy-time cancellation,
-  credential-refresh retry with 32-bit overflow protection, the scenario
-  timeout rescheduling itself (rather than settling early) when a clamped
-  32-bit-overflow-protection hop fires before the real configured deadline,
-  the mark-cleanup fallback timer sharing that same overflow protection
-  (rescheduling the same way rather than clearing marks early), `elapsed`'s host-page-relative clock, cross-realm identity sync, redaction ordering,
-  dedup keying, RxJS operator stream settlement, the leader-election
-  destroy-while-queued race, `settled$`'s copy-on-emit, the dedup key-cap
-  eviction-ordering fix, `traceScenario`'s cancel-on-unsubscribe path, the
-  dedup key's `JSON.stringify` collision fix, `UwtNoopTelemetrySink`'s
-  `getUserId()` retention, the initial-load disable-flag parity, the dedup
-  cache's hot-key eviction fix, the leader election's synchronous-throw
-  fail-open, per-call `extraValueTransforms` isolation, `correlationId`
-  scrubbing, the pre-init buffer discard (not just a stopped
-  future-buffering) on a declined or failed init, the
-  aggregate-freeze-at-settlement fix, the BI dedup key being built from
-  redacted rather than raw metadata, `maxKeys` being re-applied to combined
-  scenario/step metadata rather than to each independently-capped bag
-  before merging, the same-realm duplicate-host registry, `traceScenario`'s
-  `cancelOutcome` winning the race against a `switchMap`'s own
-  prior-subscription teardown, the broadcast wire protocol's `metadata`
-  field being validated as flat primitives rather than passed through
-  unchecked, and the duplicate-host diagnostic warning itself being
-  fail-open (a patched, throwing `console.warn` can't crash host
-  construction)) — each such test
-  was verified to actually fail when its corresponding guard is removed,
-  not only to pass against the current implementation.
-  `UwtRumAppMonitorConfig.clientBuilder`'s completed parameter signature is
-  verified two ways: a runtime test whose inline `clientBuilder`
-  implementation leaves `credentials`/`compressionStrategy` unannotated,
-  relying on the field's own type for contextual inference; and, like
-  `UwtNoopTelemetrySink`'s preserved method signatures, at the type level
-  (`tsc --build`) — since ts-jest itself runs with `diagnostics: false`,
-  neither jest nor this workspace's own `npm run typecheck` would catch a
-  regression here on its own, see "Known gaps" below.
-
-### Known gaps
-
-- **`npm run typecheck` (`tsc --noEmit`) is currently a no-op.** The root
-  `tsconfig.json` is solution-style — `"files": []` plus per-project
-  `"references"` — and plain `tsc --noEmit` only checks a config's own
-  `"files"`/`"include"`, not its references; following references needs
-  `tsc --build`. Confirmed directly: with a real type error introduced
-  (temporarily, while verifying the `clientBuilder` fix above), `npm run
-typecheck` still exited `0` with no output. `tsc --build` does catch it,
-  but currently also reports roughly 100 pre-existing errors across the
-  workspace unrelated to this PR (`aws-rum-web`'s bundled `rrweb` typings;
-  ambient Node globals `@types/node` would otherwise supply, since this
-  workspace's `tsconfig`s deliberately omit it — see `@absaoss-cps/ngx-ui-watchtower`'s own
-  `types: ["jest"]` convention). Pre-existing, not introduced by this PR;
-  switching the script to `tsc --build` would immediately need triaging
-  those separately. Left as-is here; flagging for a follow-up.
diff --git a/temp_docs/CLAUDE_HANDOFF.md b/temp_docs/CLAUDE_HANDOFF.md
deleted file mode 100644
index 7c316db..0000000
--- a/temp_docs/CLAUDE_HANDOFF.md
+++ /dev/null
@@ -1,302 +0,0 @@
-# Handoff: ngx-ui-watchtower
-
-Context for an agent continuing work on the `@absaoss-cps/ngx-ui-watchtower` library. Written
-2026-10-06, updated later the same day, at the end of a long session with the user (fateeand). Read the
-whole file before acting.
-
-The library was developed inside the `cps-shared-ui` repository and is moving
-to a new repository, at the same path: **`projects/ngx-ui-watchtower`**. Paths
-below are relative to the repository root. Where something depended on the
-old repository, the section "Moving from cps-shared-ui" says what to do.
-Copy `WATCHTOWER_LAB_PLAN.md` along with this file — it is the next piece of
-work (see "Next piece of work").
-
-## The library
-
-Angular 22, TypeScript ~6.0, built with ng-packagr, tested with Jest (jsdom,
-jest-preset-angular). Three entry points:
-
-| Entry point                                  | Source                                       | Optional peer                                            |
-| -------------------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
-| `@absaoss-cps/ngx-ui-watchtower`             | `projects/ngx-ui-watchtower/src`             | —                                                        |
-| `@absaoss-cps/ngx-ui-watchtower/rum`         | `projects/ngx-ui-watchtower/rum/src`         | `aws-rum-web`                                            |
-| `@absaoss-cps/ngx-ui-watchtower/diagnostics` | `projects/ngx-ui-watchtower/diagnostics/src` | `cps-ui-kit` (+ `@angular/forms`, `@angular/animations`) |
-
-- **Main entry:** `UwtScenarioTelemetryService` / `UwtScenario` (user
-  journeys), `UwtBITelemetryService` (business events), `UwtLoggerService`
-  (a factory: `getLogger(name)` + `query()`), sinks (`UwtTelemetrySink`,
-  broadcast, noop), `UwtTelemetryMonitor`, redaction, and providers
-  (`provideUwtTelemetry` + `withLogging` / `withScenarios` / `withBIEvents` /
-  `withRedaction`; `provideUwtTelemetryDestination` for the destination).
-- **rum:** the AWS CloudWatch RUM sink and `UwtRumCredentialsProvider`.
-- **diagnostics:** an in-app popup listing everything sent, opened with
-  Shift+E+I.
-- **Docs:** `README.md` is a short quick guide for people (~340 lines).
-  `DESIGN.md` is the full development design (~2700 lines), in 14 numbered
-  sections: Goals, Non-goals, Architecture (incl. "Public API" and
-  "Destinations"), Data model, Lifecycle, AWS mapping, Metrics, Correlation,
-  Privacy, Configuration, Error handling and performance, Usage, Multiple
-  realms, OpenTelemetry. The README does not link to it and
-  code comments don't cite its sections — the user removed those on
-  purpose; **don't add them back** unless asked.
-
-## What was built in this session
-
-1. **Diagnostics popup** (`diagnostics/`): a non-modal cps-dialog with three
-   sections (BI / Scenario / Logging). Each section has its own search,
-   field filters, Copy JSON and Download JSON; Pause and Clear are global.
-   The store keeps per-section ring buffers (500 events), batches screen
-   updates every 250 ms, newest first. It is fed by `UwtTelemetryMonitor`
-   (main entry): every hand-off site publishes to it _after_ the real
-   hand-off, deep-cloned, and only while someone is subscribed. Light theme
-   only (user: "no dark mode for now!").
-2. **Fragment logs forwarded to the shell.** `provideUwtTelemetrySink('broadcast')`
-   also binds `UWT_LOG_API_PROVIDER` to `UwtBroadcastLogApiProvider`
-   (`src/lib/providers/uwt-broadcast-log-api.provider/`). Channel messages
-   `log`, `log-flush`, `log-query`, `log-query-result` are defined and
-   validated in `src/lib/sinks/uwt-broadcast/uwt-broadcast.messages.ts`. The
-   host (`uwt-broadcast-host.service.ts`):
-   - requires `UWT_LOG_API_PROVIDER` — fails at bootstrap without one (the
-     user chose this);
-   - stays inactive with a warning in a realm that itself forwards, which
-     would otherwise loop forever;
-   - links a fragment's `mirrorErrorsToRum` error to its log record through
-     `relatedSequence` (same realm, next message, same name and message);
-   - always answers queries (`[]` on failure); only the elected leader does.
-
-   The query timeout is 10 s (`UWT_BROADCAST_LOG_QUERY_TIMEOUT_MS`); it runs
-   outside NgZone and resolves inside it.
-
-3. **`UwtNoopLogApiProvider`** — the explicit way to say "no logs", needed
-   for a shell that hosts fragments but keeps no logs.
-4. **`setUserId('')` means sign-out**, same as `undefined` (stated in the
-   abstract sink's contract). Sinks store the value as given — the user
-   rejected normalizing `''` to `undefined`. RUM checks stay truthiness-based.
-5. **Popup paging:** `first` is a `linkedSignal` of the rows, reset to page 1
-   when a filter or clear leaves fewer rows than the current offset.
-6. **Characters, not bytes:** `maxPayloadCharsInView` (was
-   `maxPayloadBytesInView`) and `sizeChars` (was `sizeBytes`). Truncation
-   never splits a surrogate pair.
-7. **`markCleanupFallbackMs` above 2³¹−1 ms** is honoured by rescheduling,
-   like `scheduleTimeout()`.
-8. **Model dedupe:** `UwtTelemetryAttribution { application; sessionId?;
-userId? }` in the common models; `UwtScenarioRecord` and `UwtLogRecord`
-   extend it and `UwtBIEvent` picks `application`; `UwtLogRecord extends
-Omit<UwtLogDetail, 'error'>`; `UwtScenarioStepEvent` picks its identity
-   fields from `UwtScenarioRecord`.
-9. **Doc examples** each declare the fields they use, inside a class.
-10. **BI rename:** names with `Bi` in the middle became `BI` —
-    `UwtBITelemetryService`, `UwtBITelemetryConfig`, `UwtBIEvent`,
-    `UwtBIEventName(s)`, `UwtBIEventDetail`, `UwtBIEventCorrelation`,
-    `withBIEvents`. Unchanged on purpose: lowercase-leading names
-    (`biTelemetry`, `biConfig`), file names (`uwt-bi-*`), and the `'bi'`
-    values (`com.uwt.bi`, `kind: 'bi'`, the popup's `'bi'` section).
-11. **One swappable destination.** A realm has exactly one telemetry
-    destination. `provideUwtTelemetryDestination(SinkClass, { init? })`
-    registers it (binds `UwtTelemetrySink`, runs `init` once, fail-open);
-    `provideUwtTelemetryRumSink()` and `provideUwtTelemetrySink('broadcast' |
-'noop')` are built on it. Two different destinations fail bootstrap with
-    a clear error; the same one twice is fine. `uwtClassifyTelemetryEvent`
-    tells a sink whether `record()` got a scenario record, a step event, a BI
-    event or something else. The acceptance test is in
-    `uwt-telemetry-common.providers.spec.ts` ("brand-new destination").
-12. **OpenTelemetry: documented, not built.** DESIGN.md §14 says how to
-    connect an OTel destination later (a `UwtTelemetrySink` that builds spans
-    and OTel log records, the app's SDK and collector, the one-line swap) and
-    its limits. The mapping was checked against the real OTel SDK; it works
-    without library changes, except live trace context, which needs core
-    changes.
-13. **Rebrand.** The package is `@absaoss-cps/ngx-ui-watchtower`, in `projects/ngx-ui-watchtower`. Every own `Cps`/`cps`/
-    `CPS_` name became `Uwt`/`uwt`/`UWT_`, files `cps-*` became `uwt-*`, and
-    runtime values changed too: default event namespace `com.uwt`, channel
-    `ngx-ui-watchtower`, console prefix `[ngx-ui-watchtower]`. Anything still
-    named `cps` belongs to cps-ui-kit (its components, tokens, `.cps-sr-only`)
-    or to the `@absaoss-cps` scope / `cps-shared-ui` repository — leave it.
-14. **Public package.** `@absaoss-cps` is an npm org, so the package is
-    scoped; its `package.json` has `"publishConfig": { "access": "public" }`
-    so a plain `npm publish` creates it public. Publishing needs rights in
-    the org (or an org-issued CI token). The release workflow still
-    publishes only cps-ui-kit.
-
-## Moving from cps-shared-ui
-
-The library folder moves as is. These things lived **outside** it and have to
-be recreated or decided in the new repository.
-
-**Workspace wiring (needed for anything to build or test):**
-
-- `angular.json` — a library project:
-  ```json
-  "ngx-ui-watchtower": {
-    "projectType": "library",
-    "root": "projects/ngx-ui-watchtower",
-    "sourceRoot": "projects/ngx-ui-watchtower/src",
-    "prefix": "uwt",
-    "architect": {
-      "build": {
-        "builder": "@angular/build:ng-packagr",
-        "options": { "project": "projects/ngx-ui-watchtower/ng-package.json" },
-        "configurations": {
-          "production": { "tsConfig": "projects/ngx-ui-watchtower/tsconfig.lib.prod.json" },
-          "development": { "tsConfig": "projects/ngx-ui-watchtower/tsconfig.lib.json" }
-        },
-        "defaultConfiguration": "production"
-      },
-      "test": { "builder": "@angular-builders/jest:run", "options": { "zoneless": false } }
-    }
-  }
-  ```
-- Root `tsconfig.json` — `paths` for the three entry points, and
-  `references` to the six library tsconfigs (`tsconfig.lib.json` and
-  `tsconfig.spec.json` in the library root, `rum/` and `diagnostics/`):
-  ```json
-  "@absaoss-cps/ngx-ui-watchtower": ["./projects/ngx-ui-watchtower/src/public-api.ts"],
-  "@absaoss-cps/ngx-ui-watchtower/rum": ["./projects/ngx-ui-watchtower/rum/src/public-api.ts"],
-  "@absaoss-cps/ngx-ui-watchtower/diagnostics": ["./projects/ngx-ui-watchtower/diagnostics/src/public-api.ts"]
-  ```
-  The library tsconfigs `extend` the root one (`../../tsconfig.json`, and
-  `../../../tsconfig.json` from `rum/` and `diagnostics/`), so the new
-  repository needs a compatible root tsconfig. `rum/` and `diagnostics/`
-  set `"rootDir": "../../.."`, which assumes the same depth.
-- Jest config — `moduleNameMapper` for the same three entry points
-  (`^@absaoss-cps/ngx-ui-watchtower$`, `…/rum$`, `…/diagnostics$`),
-  plus the jsdom + jest-preset-angular setup the old repo had.
-- `package.json` scripts — the old repo had
-  `"build:telemetry": "npm run build && ng build --configuration=production --project=ngx-ui-watchtower"`
-  and `"test:ngx-ui-watchtower": "ng test --project=ngx-ui-watchtower"`.
-- ESLint and Prettier configs — the old repo's rules apply to this code (see
-  "Pitfalls").
-
-**cps-ui-kit now comes from npm.** In cps-shared-ui the kit was a sibling
-library, so:
-
-- `projects/ngx-ui-watchtower/tsconfig.lib.json` has
-  `"paths": { "cps-ui-kit": ["../../dist/cps-ui-kit"] }` with a comment
-  about building the kit first — **remove that mapping** (and the comment);
-  the package resolves from `node_modules`.
-- `build:telemetry` no longer needs to build the kit first.
-- Jest mapped `^cps-ui-kit$` to the kit's source; drop that and resolve it
-  from `node_modules`.
-- Install `cps-ui-kit`, `aws-rum-web`, `@angular/forms` and
-  `@angular/animations` as dev dependencies so the specs and the build work.
-  The library's own peer ranges (`cps-ui-kit ^22.0.0`, Angular `^22.1.3`,
-  `aws-rum-web ^3.2.1`) stay in `projects/ngx-ui-watchtower/package.json`.
-- Check that the published cps-ui-kit version has the components and
-  services the popup uses: `CpsDialogService`, `cps-expansion-panel`,
-  `cps-table`, `cps-input`, `cps-autocomplete`, `cps-select`, `cps-chip`,
-  `cps-button`, `cps-switch`, `cps-info-circle`, `CPS_LIVE_ANNOUNCER_SERVICE`,
-  `CpsNotificationService`.
-
-**Library metadata to update:** `projects/ngx-ui-watchtower/package.json` still
-has `repository.url` and `homepage` pointing at
-`https://github.com/AbsaOSS/cps-shared-ui`.
-
-**Left behind in cps-shared-ui** (decide with the user whether to bring them;
-`WATCHTOWER_LAB_PLAN.md` says which of them the lab reuses):
-
-- The demo app integration in `projects/composition`: `app.module.ts`
-  (providers, including `provideUwtTelemetryDiagnostics()`),
-  `services/app-telemetry.service.ts`, `services/app-log-api.provider.ts`,
-  `services/rum-credentials.provider.ts`, `services/telemetry.schema.ts`,
-  and telemetry usage in several pages, each with specs. This is the only
-  place the library ran in a real app.
-- End-to-end tests: `playwright/composition/telemetry-diagnostics.spec.ts`
-  (8 tests) and three popup accessibility tests in
-  `playwright/composition/accessibility-composition.spec.ts`. They need a
-  running app; without one the popup has unit and component tests only.
-- `projects/ngx-ui-watchtower/telemetry-trace.txt` and
-  `telemetry-trace-live.txt` were generated from the composition app (the
-  old `trace:telemetry` script ran `projects/composition/src/app/telemetry-trace.capture.spec.ts`).
-  Without that app they can't be regenerated — ask before deleting.
-- `.vscode/settings.json` maps `**/src/**/*.spec.ts` to `typescriptreact`
-  (see "Pitfalls"); bring it only if the user wants it.
-
-## Next piece of work
-
-Build the **Watchtower Lab**, as planned in `WATCHTOWER_LAB_PLAN.md`: a shell
-app (SSR) and a Web Fragment app in the new repository, served with a mock
-RUM endpoint and log backend, plus a consumer smoke app built from the packed
-package, all exercised by Playwright. The user approved this plan and wants
-it built in the new repository. It replaces what `composition` gave the
-library in cps-shared-ui.
-
-## Open items (offer them; don't do them unasked)
-
-- Showing the popup inside a fragment is untested: whether the shortcut
-  reaches a fragment under Web Fragments, and how the dialog renders in a
-  shadow root. Recommended setup: the popup only in the shell.
-- A fragment's earliest log records lack `sessionId`/`userId` until the
-  shell answers. Filling them in at the shell was declined, because the
-  console would then differ from what was sent.
-
-## How the user works — follow these
-
-- **Console output must exactly match what is sent** to the sink or log
-  provider: nothing is printed that isn't sent, one line per sent event.
-- **No magic numbers** — use named constants. **No `any`.** Don't change
-  unrelated code or attributes.
-- **Loggers are named and unique**; the service has no unnamed
-  `log`/`warn`/`error`. Don't reintroduce `child()`.
-- Prefer explicit opt-outs (`'noop'`, `UwtNoopLogApiProvider`) over silent
-  defaults; a missing destination should fail at bootstrap.
-- **Exactly one destination, never two.** OTel (or anything else) would
-  _replace_ RUM, never run beside it. Don't propose fan-out or multiple
-  sinks. **No OTel support is wanted now** — only the ability to swap a sink
-  in later.
-- **Log lines are not part of the destination.** They always go to the app's
-  own backend (`UWT_LOG_API_PROVIDER`), with RUM or anything else. Don't mix
-  logs into destination work — but don't drop the log provider from example
-  `providers` arrays either: show it, marked unchanged.
-- **Docs: straight to the point.** Instructions and decisions, not research
-  narrative or "how I verified it". Short sections; cut background the
-  reader doesn't need.
-- Acronyms in PascalCase names are fully capitalised (`BI`, not `Bi`).
-- The user often asks "why?". Answer it directly; if a change isn't needed,
-  say so and recommend not doing it. Answer questions before editing, and
-  ask before changing a public contract when there is a real trade-off.
-- Reply in the language of the question (Russian or English).
-- Reviews: report findings by severity, reproduce each one (a temporary
-  test you then delete), and fix only after approval.
-- Never commit unless asked. Never use `git stash`, `git rm` or other index
-  manipulation — the user has rejected that.
-
-## Verifying a change
-
-Run all of these before saying something is done (adapt the commands to the
-new repo's scripts):
-
-- Unit tests: `npx jest projects/ngx-ui-watchtower` (822 tests at handoff).
-- Lint and format: `npx eslint projects/ngx-ui-watchtower --max-warnings=0` and
-  `npx prettier --check projects/ngx-ui-watchtower`.
-- Types: Jest uses `isolatedModules` and does **not** type-check. Run
-  `npx tsc -p <config> --noEmit` for each of the six library tsconfigs.
-- The package build: `ng build --configuration=production --project=ngx-ui-watchtower`.
-- After fixing a bug, mutation-check the test: undo the fix temporarily,
-  confirm a test fails, then restore the file (back it up first and compare
-  with `cmp`).
-
-## Pitfalls hit in this session
-
-- **Spec files as TSX.** The old repo's VS Code settings parse
-  `*.spec.ts` as TSX, where a generic arrow like `<T>(fn: () => T) => fn()`
-  reads as a JSX tag: the file turns red in the editor while tsc and Jest
-  pass. Use `function f<T>()` declarations in specs. Check with:
-  `node -e "const ts=require('typescript'),fs=require('fs');const f=process.argv[1];console.log(ts.createSourceFile(f,fs.readFileSync(f,'utf8'),99,true,ts.ScriptKind.TSX).parseDiagnostics.length)" <file>`
-- ESLint rules that came up: `no-use-before-define` (declare a type before
-  a type that references it), `no-void`, `dot-notation`,
-  `lines-between-class-members`, and `no-undef` for DOM type names such as
-  `NodeListOf`.
-- TestBed runs app initializers on the first inject and throws there
-  synchronously; it does not reject `ApplicationInitStatus.donePromise`.
-- A hand-made `NgZone` stub breaks TestBed; spy on the real zone instead
-  (`jest.spyOn(TestBed.inject(NgZone), 'run')`).
-- When editing files with scripts, assert each match occurs exactly once,
-  and diff the result afterwards — one scripted edit once cut off the end
-  of a spec file.
-- **Run doc snippets before trusting them.** A `providers` example that
-  looked fine was missing `UWT_LOG_API_PROVIDER` and failed with `NG0201`
-  as soon as the logger was used. A throwaway spec (then deleted) catches
-  this.
-- The full session transcript, if more detail is needed, is on the user's
-  machine:
-  `~/.claude/projects/-Users-madfamily-Documents-cps-shared-ui/f05e4b7e-005c-4b98-a509-f57eb8dd8276.jsonl`
diff --git a/temp_docs/INTEGRATION-DATA-GATEWAY.md b/temp_docs/INTEGRATION-DATA-GATEWAY.md
deleted file mode 100644
index c3cde5c..0000000
--- a/temp_docs/INTEGRATION-DATA-GATEWAY.md
+++ /dev/null
@@ -1,1844 +0,0 @@
-# Integrating `@absaoss-cps/ngx-ui-watchtower` into `data-gateway`
-
-**Audience:** the AI coding agent (GitHub Copilot) doing the integration.
-
-**This document is self-contained.** Every code sample you need is inlined
-here — you are not expected to have access to any other repository. Passages
-quoted from the library's own `DESIGN.md` and `README.md` are quoted in full
-where they matter; if those two files were copied into `data-gateway`
-alongside the library source, they are worth reading, but nothing here depends
-on it.
-
-Everything below was verified against the library source, not recalled from
-memory. Where a rule has a "why", the why is included — you will need it to
-make judgement calls this document does not anticipate.
-
----
-
-## 0. Mission
-
-`data-gateway` is an **Angular application with SSR** that acts as a **shell**
-composing embedded **fragments** (Unify, Aqueduct, LUM). It currently has its
-own `RumService` and a server-side credential broker at
-`src/rum/broker.server.ts`.
-
-Your job:
-
-1. Land `@absaoss-cps/ngx-ui-watchtower` in the repo so it builds, type-checks and tests.
-2. Wire the shell: telemetry providers, the RUM sink, the broadcast host.
-3. Reuse the existing broker for credentials.
-4. **Retire `RumService` without changing a single event on the wire.**
-5. Declare the app's scenario and step vocabulary.
-6. Propose and implement scenarios and BI events for the app's real use cases.
-
-**Scope note:** `data-gateway` has no log backend, so this integration covers
-**scenario telemetry and BI events only**. Logging is deliberately out of
-scope — see §3.2.
-
-### Four non-negotiables
-
-| #   | Constraint                         | What it means in practice                                                                                                                                       |
-| --- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 1   | **npm-swap-ready**                 | The library is temporarily vendored as a source tree. Removing it later must be a config-only change. See §2 "The npm-swap contract".                           |
-| 2   | **Wire parity with `RumService`**  | Every event `RumService` sends today must still arrive at CloudWatch RUM with the same event type and equivalent payload. Migrate first, delete second. See §5. |
-| 3   | **SSR-safe**                       | `data-gateway` server-renders. The library is already SSR-safe — do not add redundant guards, and do not break the existing ones. See §1.3.                     |
-| 4   | **Shell hosts, fragments forward** | Exactly one realm owns the AWS client. The shell. Fragments broadcast to it. See §1.                                                                            |
-
----
-
-## 1. Architecture
-
-### 1.1 Why the shell must host
-
-A composed page runs the shell and each fragment in **its own JavaScript
-realm**. [Web Fragments](https://web-fragments.dev) — the model this library
-was explicitly designed against (`DESIGN.md` §13) — "utilizes a hidden iframe
-to create a clean JavaScript context"; the iframe is never rendered, its DOM
-is reprojected into a Shadow Root in the host document, and its
-`window.location` is kept in sync with the host's.
-
-A separate realm means a separate Angular injector, which means **every realm
-would build its own copy of every telemetry service — including its own AWS
-RUM client.** Left alone:
-
-| Left alone                    | Consequence                                                                                                    |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| N RUM clients                 | Each mints its own session. One human becomes N sessions and N users; unique-user counts are wrong             |
-| N × `sessionEventLimit`       | Separate event budgets, separate dispatches, N calls to the credentials broker, N copies of the SDK downloaded |
-| Shared origin, shared cookies | N clients contend for one RUM session cookie                                                                   |
-
-The arrangement: **one realm hosts; the rest forward.**
-
-```mermaid
-flowchart LR
-    subgraph shell [Shell realm — data-gateway]
-      S[provideUwtTelemetryRumSink] --> R[AwsRum]
-      H[provideUwtTelemetryBroadcastHost]
-      H --> S
-    end
-    subgraph f1 [Fragment realm — Unify]
-      A[UwtBroadcastTelemetrySink]
-    end
-    subgraph f2 [Fragment realm — Aqueduct / LUM]
-      B[UwtBroadcastTelemetrySink]
-    end
-    A -- BroadcastChannel --> H
-    B -- BroadcastChannel --> H
-    R --> AWS[AWS CloudWatch RUM]
-```
-
-One session, one budget, one bundle. Application code inside a fragment does
-not change — it injects the same services and calls the same methods; only
-the sink binding differs.
-
-### 1.2 The fragments do not broadcast yet — that is fine
-
-The fragment teams have not implemented their side. **This is a supported,
-documented state, not a defect.** From `README.md`: _"A fragment with no shell
-still works"_ — and symmetrically, a host with no fragments simply receives
-nothing. `UwtTelemetryBroadcastHost` opens its channel, wins the leader
-election, announces identity, and sits idle.
-
-**Therefore: provide the broadcast host now.** Do not defer it, do not
-feature-flag it, do not write a "we'll add this later" TODO. When the
-fragments start broadcasting, the shell must already be listening — the host
-is constructed eagerly via `provideAppInitializer` precisely so that it is
-listening before any fragment sends.
-
-Hand §8 to the fragment teams as their contract.
-
-### 1.3 SSR is already handled — do not re-solve it
-
-The library guards itself. Confirmed in source:
-
-- `UwtRumTelemetrySink` holds `private readonly isBrowser = uwtIsBrowser();`
-  and returns early from both `init()` and every `record()` path when false.
-- `uwtConnectBroadcastChannel` checks `uwtIsBrowser()` **and** feature-detects
-  `globalThis.BroadcastChannel`, returning `undefined` on the server; every
-  post/close is wrapped in `uwtSafeVoid`.
-- `uwtIsBrowser()` is `isPlatformBrowser(inject(PLATFORM_ID))`.
-
-`README.md` states it as a guarantee: _"SSR-safe — every browser-touching path
-is a no-op on the server."_
-
-**What this means for you:** register the providers unconditionally in the
-shared app config. Do **not** split providers between browser and server
-configs, and do **not** wrap `provideUwtTelemetryRumSink()` in a platform
-check.
-
-**What you still own:** any code _you_ write that touches `window`,
-`navigator`, `localStorage` or `document` — including the value you pass as
-`environment`. Guard those:
-
-```ts
-private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-
-scenario.setData(this.isBrowser ? { language: navigator.language } : {});
-```
-
-```ts
-// resolving `environment` runs during provider setup, on the server too
-export function resolveDeploymentEnvironment(): 'development' | 'production' {
-  const hostname =
-    typeof window !== 'undefined' ? window.location.hostname : undefined;
-  return hostname === 'localhost' ? 'development' : 'production';
-}
-```
-
-> ⚠️ `uwtIsBrowser()` calls `inject(PLATFORM_ID)`, so it must run in an
-> injection context — as a field initializer or in a constructor. The same
-> applies to `uwtConnectBroadcastChannel`. This only matters if you write a
-> custom sink.
-
----
-
-## 2. Phase 0 — land the package
-
-The library is vendored as a **library source tree** with two entry points.
-`@absaoss-cps/ngx-ui-watchtower/rum` is a real ng-packagr **secondary entry
-point**, not a folder convention.
-
-### 2.1 Why `/rum` is a separate entry point
-
-From `DESIGN.md` §3 — this is load-bearing, not cosmetic:
-
-> A bundler resolves every static import in a module graph, and a dynamic
-> `import()`'s specifier, whether or not that code path ever runs. Keeping the
-> RUM sink and its `await import('aws-rum-web')` out of the main entry is what
-> lets an app using only `'broadcast'`/`'noop'` build without `aws-rum-web`
-> installed.
-
-Consequences you must respect:
-
-- RUM symbols (`provideUwtTelemetryRumSink`, `UWT_RUM_CREDENTIALS_PROVIDER`,
-  `UwtRumBootstrap`, `UwtRumCredentials`, `UwtRumCredentialsProvider`,
-  `UwtRumAppMonitorConfig`, `UwtRumTelemetrySink`) come from
-  **`@absaoss-cps/ngx-ui-watchtower/rum`**. That is the entire `/rum` surface — seven exported
-  names. Everything else comes from `@absaoss-cps/ngx-ui-watchtower`.
-- **Never re-export the RUM sink from a shared barrel file.** That drags
-  `aws-rum-web` into every consumer's module graph and undoes the split.
-- `@absaoss-cps/ngx-ui-watchtower/rum` carries its own private copies of the internal utils
-  (`uwtSafe`, `uwtIsBrowser`, …) because ng-packagr fixes each entry point's
-  `rootDir` to its own `src`. Do not "de-duplicate" them.
-
-### 2.2 TypeScript paths
-
-Each entry point needs an entry. Point them at the vendored source:
-
-```jsonc
-// tsconfig.json
-{
-  "compilerOptions": {
-    "resolveJsonModule": true, // only if you import version from a package.json
-    "paths": {
-      "@absaoss-cps/ngx-ui-watchtower": [
-        "./ngx-ui-watchtower/src/public-api.ts"
-      ],
-      "@absaoss-cps/ngx-ui-watchtower/rum": [
-        "./ngx-ui-watchtower/rum/src/public-api.ts"
-      ]
-    }
-  }
-}
-```
-
-Adjust the prefix to wherever the folder actually landed.
-
-### 2.3 Jest module mapping — anchor the regexes
-
-```js
-// jest.config.js
-moduleNameMapper: {
-  '^@absaoss-cps/ngx-ui-watchtower$': '<rootDir>/ngx-ui-watchtower/src/public-api.ts',
-  '^@absaoss-cps/ngx-ui-watchtower/rum$': '<rootDir>/ngx-ui-watchtower/rum/src/public-api.ts'
-}
-```
-
-> ⚠️ **Anchor both patterns.** An unanchored `'@absaoss-cps/ngx-ui-watchtower'` also matches
-> `@absaoss-cps/ngx-ui-watchtower/rum` and swallows the sub-path, so `/rum` imports resolve to
-> the main barrel and every RUM symbol comes back `undefined` at test time.
-
-### 2.4 Angular build config
-
-```jsonc
-// angular.json — the application's build options
-"allowedCommonJsDependencies": ["shimmer"]
-```
-
-`shimmer` is a transitive CommonJS dependency of `aws-rum-web`. Without this,
-the build emits a CommonJS warning per build.
-
-### 2.5 TypeScript project wiring
-
-The secondary entry point needs its own `tsconfig.lib.json` and
-`tsconfig.spec.json`, plus `references` entries in the root tsconfig —
-"without them nothing covered the `rum/` directory as a TypeScript project".
-
-Two traps we actually hit in this workspace, both likely to recur:
-
-- **`skipLibCheck: true`** is required in the app's `tsconfig.app.json`
-  _and_ in the plain `tsconfig.json` (the one the VS Code language service
-  resolves first). `aws-rum-web` bundles `rrweb` typings that do not compile
-  under strict settings.
-- **`rootDir`** must be set explicitly to span the workspace when the app
-  imports library _source_ through `paths` rather than a built package.
-
-> ⚠️ `tsc --noEmit` is a **no-op** against a solution-style root config
-> (`"files": []` + `"references"`). It only checks the config's own
-> `files`/`include`, not its references. Use **`tsc --build`** if you want a
-> real type check. Also note `ts-jest` commonly runs with `diagnostics:
-false`, so tests will not catch type regressions either.
-
-### 2.6 Peer dependencies
-
-```jsonc
-"peerDependencies": {
-  "@angular/common": "^22.1.3",
-  "@angular/core": "^22.1.3",
-  "aws-rum-web": "^3.2.1",
-  "rxjs": "^7.8.2"
-},
-"peerDependenciesMeta": { "aws-rum-web": { "optional": true } }
-```
-
-`data-gateway` uses the RUM sink, so `aws-rum-web` must be a real dependency
-of the app. The library's only true runtime dependency is `tslib`.
-
-### 2.7 The npm-swap contract
-
-This is the constraint that makes the future migration free. **Treat it as a
-hard rule and enforce it in review:**
-
-✅ **Allowed** — bare specifiers only:
-
-```ts
-import {
-  provideUwtTelemetry,
-  UwtScenarioTelemetryService
-} from '@absaoss-cps/ngx-ui-watchtower';
-import { provideUwtTelemetryRumSink } from '@absaoss-cps/ngx-ui-watchtower/rum';
-```
-
-❌ **Forbidden** — every one of these pins you to the vendored copy:
-
-```ts
-import { UwtScenarioTelemetryService } from '../../ngx-ui-watchtower/src/public-api'; // relative
-import { UwtScenario } from '@absaoss-cps/ngx-ui-watchtower/src/lib/scenario/uwt-scenario/uwt-scenario'; // deep
-import { UwtRumTelemetrySink } from './shared/telemetry-barrel'; // re-export
-```
-
-When the package is published, migration is:
-
-1. Delete the vendored `ngx-ui-watchtower/` folder.
-2. `npm install @absaoss-cps/ngx-ui-watchtower aws-rum-web`.
-3. Delete the two `paths` entries and the two jest `moduleNameMapper` entries.
-4. Delete the `references` entries for the vendored tsconfigs.
-
-**Zero import statements change.** If a single import needs editing during this
-migration, the contract was broken somewhere — find it.
-
----
-
-## 3. Phase 1 — wire the shell
-
-### 3.1 The wiring
-
-This is the proven shape, taken from a working integration. Adapt it to
-`data-gateway`'s bootstrap style — `makeEnvironmentProviders` works in both a
-standalone `ApplicationConfig` and an NgModule `providers` array:
-
-```ts
-import {
-  UWT_LOG_API_PROVIDER,
-  UwtNoopLogApiProvider,
-  provideUwtTelemetry,
-  provideUwtTelemetryBroadcastHost
-} from '@absaoss-cps/ngx-ui-watchtower';
-import {
-  UWT_RUM_CREDENTIALS_PROVIDER,
-  provideUwtTelemetryRumSink
-} from '@absaoss-cps/ngx-ui-watchtower/rum';
-import './services/telemetry.schema'; // side-effect import — see §6
-
-// One channel per browser tab — see §3.5. Browser-only: this module is
-// evaluated during server rendering too, and nothing there needs an id.
-const channelId =
-  typeof window === 'undefined'
-    ? undefined
-    : `ngx-ui-watchtower-${crypto.randomUUID()}`;
-
-if (channelId) {
-  window.__uwtTelemetryChannel = channelId;
-}
-
-providers: [
-  provideUwtTelemetry({
-    application: 'data-gateway',
-    environment: resolveDeploymentEnvironment(),
-    version: packageJson.version
-  }),
-  provideUwtTelemetryRumSink(),
-  provideUwtTelemetryBroadcastHost(channelId), // shell only
-  // No log backend: say so explicitly. The broadcast host requires a log
-  // provider (§3.2) and fails at bootstrap without one.
-  { provide: UWT_LOG_API_PROVIDER, useClass: UwtNoopLogApiProvider },
-  {
-    provide: UWT_RUM_CREDENTIALS_PROVIDER,
-    useExisting: DataGatewayRumCredentialsProvider
-  }
-];
-```
-
-### 3.2 Scenarios and BI only — no logging
-
-`data-gateway` has **no log backend**, so it integrates **scenario telemetry
-and BI events only**. Do not wire logging.
-
-Concretely:
-
-- **Do** bind `UWT_LOG_API_PROVIDER` to `UwtNoopLogApiProvider` (§3.1).
-- **Do not** inject `UwtLoggerService` anywhere.
-- **Do not** pass `withLogging(...)`.
-
-Why the no-op provider is required even with no logging: the shell hosts the
-broadcast channel, and fragments in `'broadcast'` mode forward their log lines
-to it, for the shell's log provider to ship. `UwtTelemetryBroadcastHost`
-therefore injects `UWT_LOG_API_PROVIDER` and fails at bootstrap (`NG0201`)
-without one — a shell that silently dropped its fragments' logs would look
-wired up while losing them. `UwtNoopLogApiProvider` is the explicit "no log
-backend": records are discarded and `query()` finds none. Apart from the host,
-only `UwtLoggerService` injects the token; `UwtScenarioTelemetryService` and
-`UwtBITelemetryService` don't.
-
-**What you give up:** the `correlationId` join between a log line and a
-scenario. Everything a log call would have carried has to go somewhere else:
-
-| Instead of                            | Do this                                                                         |
-| ------------------------------------- | ------------------------------------------------------------------------------- |
-| `logger.error('X failed', { error })` | `scenario.fail({ error })` — the normalized error ships on the scenario record  |
-| `logger.warn` about a degraded path   | `scenario.incomplete({ reason })`, or a BI event if there is no scenario        |
-| Free-text diagnostic context          | `scenario.setData({ … })` or step metadata — flat primitives, capped at 50 keys |
-| A code-level trace                    | `console` behind the `debugScenario` flag; it is not shipped anywhere           |
-
-If a log backend appears later, adding logging is additive: implement
-`UwtLogApiProvider`, bind it to `UWT_LOG_API_PROVIDER` in place of the no-op
-one, start injecting `UwtLoggerService`. Nothing already written has to
-change, and fragments' log lines start arriving too.
-
-### 3.3 `provideUwtTelemetry` provides no destination — by design
-
-> ⚠️ **This is the single most common first-run failure.**
-> `provideUwtTelemetry` registers _configuration only_. A sink must be bound
-> separately; injecting a telemetry service without one fails at bootstrap
-> with **`NG0201`**.
-
-From `DESIGN.md` §10, on why there is no default:
-
-> Defaulting to a no-op sink and an in-memory log store would let an
-> application forget to wire a destination and still run perfectly while
-> shipping nothing — invisible until somebody asks why the dashboard is empty.
-> A missing provider is a configuration error caught on the first run.
-
-For `data-gateway` the sink is `provideUwtTelemetryRumSink()`. Scenario and BI
-services both require it.
-
-### 3.4 What `provideUwtTelemetry` actually registers
-
-```ts
-provideUwtTelemetry(identity, ...features);
-```
-
-Registers `UWT_TELEMETRY_IDENTITY`, then the defaults for `UWT_LOG_CONFIG`,
-`UWT_SCENARIO_TELEMETRY_CONFIG`, `UWT_BI_TELEMETRY_CONFIG`, `UWT_REDACT_CONFIG`, then any features
-you pass (later-wins DI). Identity:
-
-```ts
-interface UwtTelemetryIdentity {
-  application: string; // 'data-gateway' — becomes a session attribute
-  environment: string; // 'dev' | 'qa' | 'prod'
-  version: string;
-  eventNamespace?: string; // default 'com.uwt' → com.uwt.scenario / .scenario.step / .bi
-}
-```
-
-Optional features, all omittable, each replacing exactly one config token.
-`data-gateway` should need none of them at first:
-
-| Feature                                                                                                          | Defaults                                                      | Use in data-gateway             |
-| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------- |
-| `withScenarios({ defaultTimeoutMs, emitLifecycleEvents, maxSteps, userTimings, markCleanupFallbackMs, redact })` | `30_000`, `false`, `50`, `false`, `300_000`, `true`           | Only with a specific reason     |
-| `withBIEvents({ dedupWindowMs, dedupMaxKeys, redact })`                                                          | `400`, `100`, `true`                                          | Only with a specific reason     |
-| `withRedaction({ … })`                                                                                           | see §10.4                                                     | If URLs can carry personal data |
-| `withLogging({ … })`                                                                                             | `minLevel: 'log'`, `mirrorErrorsToRum: false`, `redact: true` | **No** — see §3.2               |
-
-**Start with defaults.** Only add a feature when you have a specific reason,
-and record the reason in a comment.
-
-### 3.5 One broadcast channel per browser tab — required
-
-**Give every tab its own channel name.** Do not rely on the shared default.
-
-`BroadcastChannel` and the Web Locks leader election that arbitrates between
-hosts are both **origin-wide, not per-tab**. With the default channel, if a
-user has `data-gateway` open in two tabs:
-
-- Only one tab's host wins the election and records — so a single event is
-  never recorded twice. That part is fine.
-- But the **losing tab's fragments keep forwarding on the same origin-wide
-  channel**, so their events are recorded through the _winning_ tab's AWS RUM
-  client — attributed to a different tab's session and page than the one they
-  actually came from.
-
-`UwtBroadcastMessage` carries no tab or window identifier at all, so the
-protocol cannot route a message back to its originating tab even in principle.
-A per-tab channel name is the only fix.
-
-#### Getting the id to the fragments
-
-Web Fragments has **no built-in way for the shell to hand a runtime value to a
-fragment**, so this needs a convention. Use a global on the top-level window.
-It is reachable because the framework requires every fragment to share the
-shell's origin — the same requirement that makes `BroadcastChannel` work at
-all.
-
-```ts
-// shell — at module scope, so it is set before any fragment can read it
-declare global {
-  interface Window {
-    __uwtTelemetryChannel?: string;
-  }
-}
-
-// Browser-only. This module is evaluated during server rendering too,
-// where there is no `window` — and, on Node below 19, no global `crypto`
-// either. Nothing is lost: the broadcast host no-ops on the server, and the
-// browser mints its own id when it boots.
-const channelId =
-  typeof window === 'undefined'
-    ? undefined
-    : `ngx-ui-watchtower-${crypto.randomUUID()}`;
-
-if (channelId) {
-  window.__uwtTelemetryChannel = channelId;
-}
-
-// …then pass the same value to the host. `undefined` on the server is fine:
-// the provider simply omits the channel override.
-provideUwtTelemetryBroadcastHost(channelId);
-```
-
-Fragments read it back off `window.top` (§8 has their side, ready to hand
-over).
-
-> ⚠️ **Do not try to pass it on the fragment's URL.** The obvious approach —
-> a `?channel=` query parameter — does not work here, and it is worth knowing
-> why so nobody "fixes" this back later:
->
-> - The shell never sets a fragment's URL. A fragment is embedded as
->   `<web-fragment fragment-id="unify">`, and a server-side `FragmentGateway`
->   maps that id to an endpoint and proxies it through the shell's origin.
-> - By default a fragment is **bound**: it "shares (binds) `window.location`
->   and navigation history with the existing application", initialised to the
->   top-level app's location. So a fragment reading
->   `window.location.search` sees the **host's** query string, not one of its
->   own.
->
-> Only an **unbound** fragment (one given an explicit `src` attribute) has its
-> own location — but going unbound decouples that fragment from the shell's
-> routing, which is far too large a change to make in order to pass a
-> telemetry id.
-
-> ⚠️ Generate the id **once per page load**, at shell bootstrap, before any
-> fragment is composed. Generating it per fragment, or regenerating it on
-> navigation, puts fragments on channels no host is listening to — and because
-> the broadcast sink fails open, that failure is **completely silent**.
-
-#### Duplicated tabs are covered — and why it had to be a global
-
-Duplicating a tab loads a fresh document, so the module-scope code above runs
-again and `window.__uwtTelemetryChannel` gets a **new** id. The duplicate is
-therefore on its own channel, hosted by its own tab, exactly like any other
-independently opened tab.
-
-That is the reason this is a `window` global rather than `sessionStorage`.
-Chrome **copies `sessionStorage` into a duplicated tab**, so a
-sessionStorage-based id would arrive pre-populated in the duplicate, both tabs
-would share a channel, and the cross-attribution this whole section exists to
-prevent would come straight back — in the one case people hit by accident.
-
-> **This buys correct attribution, not a separate RUM session.** A per-tab
-> channel guarantees a tab's fragments are recorded through _that tab's_ RUM
-> client, carrying that tab's page context. It does **not** give each tab its
-> own `sessionId`: the RUM session lives in a cookie (`allowCookies` defaults
-> to `true`, 30-minute length), and cookies are shared across every tab on the
-> origin. Two tabs of `data-gateway` are one RUM session by design — RUM
-> models a session as a _user's_ session, not a tab's, and it deliberately
-> survives reloads and navigations.
->
-> Forcing a distinct session per tab would mean `allowCookies: false`, which
-> also makes **every reload** a new session and inflates session counts. Do
-> not reach for it to solve a tab problem; use `pageId` (or a `tabId` you mint
-> yourself and put in scenario metadata) if you need to tell tabs apart in
-> queries.
-
----
-
-## 4. Phase 2 — credentials from the existing broker
-
-`data-gateway` already has `src/rum/broker.server.ts`. Do not replace it —
-adapt to it. The library deliberately knows nothing about AWS account details:
-
-```ts
-export interface UwtRumCredentialsProvider {
-  /**
-   * Called once at startup and again shortly before each credential expiry.
-   * Returning `null` disables RUM for the session — the telemetry layer stays
-   * fully functional, it simply stops shipping.
-   */
-  load(): Promise<UwtRumBootstrap | null>;
-}
-
-export interface UwtRumBootstrap {
-  config: UwtRumAppMonitorConfig; // applicationId, region, applicationVersion required
-  credentials?: UwtRumCredentials; // accessKeyId, secretAccessKey, sessionToken, expiration
-}
-```
-
-### 4.1 Reference implementation
-
-```ts
-@Injectable({ providedIn: 'root' })
-export class DataGatewayRumCredentialsProvider implements UwtRumCredentialsProvider {
-  async load(): Promise<UwtRumBootstrap | null> {
-    let response: Response;
-    try {
-      response = await fetch('/rum/init', {
-        headers: { Accept: 'application/json' },
-        cache: 'no-store' // this response carries live, temporary AWS credentials
-      });
-    } catch {
-      // Network-level failure rejects before any response exists — treat it
-      // the same as an unreachable broker, per load()'s documented contract.
-      return null;
-    }
-
-    if (!response.ok) return null;
-
-    const init = await response.json();
-
-    // Credentials are required: without them the client would start and then
-    // fail every dispatch silently.
-    if (!init?.enabled || !init.config || !init.credentials) return null;
-
-    return { config: init.config, credentials: init.credentials };
-  }
-}
-```
-
-Import the types with `import type`, as above, so this file carries no
-runtime dependency on `@absaoss-cps/ngx-ui-watchtower/rum` at all.
-
-### 4.2 The three-state contract
-
-| Return                             | Meaning                                                                                                                                                                                                                                                                                                                          |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `null`                             | Disable RUM for this session. Works **mid-session** too — a later refresh returning `null` tears the running client down (calling the SDK's own `disable()`, so listeners/plugins/dispatch timer actually stop) and stops scheduling.                                                                                            |
-| `{ config, credentials }`          | Normal path.                                                                                                                                                                                                                                                                                                                     |
-| `{ config }` with no `credentials` | Valid **only** for an app monitor configured for unauthenticated access, and only if the session was never authenticated. On a _later_ refresh for an already-authenticated session, the sink keeps the existing credentials and retries, with a dev-mode warning — the AWS client has no way to clear credentials once applied. |
-
-### 4.3 Refresh behaviour you get for free
-
-- Refresh is scheduled **5 minutes before** `expiration`.
-- The delay is clamped to `MAX_TIMEOUT_MS` (2 147 483 647 ms — the 32-bit
-  signed limit `setTimeout` silently overflows past).
-- An already-expired or unparsable `expiration` does **not** fire immediately;
-  it falls back to a bounded 30 s retry, so a broker stuck returning bad
-  credentials cannot tight-loop the sink.
-- The app initializer `provideUwtTelemetryRumSink()` registers deliberately
-  **does not await** the sink's `init()`, so a slow or hung broker never
-  delays first paint. You do not need to write an initializer.
-
-### 4.4 What is deliberately absent from the config
-
-`UwtRumAppMonitorConfig` mirrors the SDK's `Config` **except**:
-
-- `identityPoolId`, `guestRoleArn` — the SDK's Cognito guest-identity flow.
-  Credentials come from your broker instead. **Do not try to add them back.**
-- `endpointUrl` — always recomputed from `endpoint`.
-- `sessionId`, `userId` — owned at runtime by the sink.
-
----
-
-## 5. Phase 3 — retire `RumService` without changing the wire
-
-**This is the highest-risk part of the migration.** `@absaoss-cps/ngx-ui-watchtower` emits its
-own event types (`com.uwt.scenario`, `com.uwt.scenario.step`, `com.uwt.bi`)
-with its own payload envelopes. A naive "delete `RumService`, call
-`biTelemetry.track()` instead" **will silently change what CloudWatch
-receives** and break every existing dashboard, extended metric and Logs
-Insights query.
-
-From `DESIGN.md` §6:
-
-> It is configurable because **event types are a contract with whatever
-> already queries them** — extended metrics, Logs Insights queries,
-> dashboards.
-
-### 5.1 Procedure — do these in order
-
-**Step 1 — Inventory.** Before changing anything, find every call site and
-record what goes on the wire today:
-
-```bash
-rg -n "recordEvent|recordError|recordPageView|dispatch|pinUserId|addSessionAttributes" src/
-```
-
-Build a table. Do not skip the payload column — the event type alone is not
-parity:
-
-| Call site             | AWS API       | Event type       | Payload keys        | Notes                 |
-| --------------------- | ------------- | ---------------- | ------------------- | --------------------- |
-| `RumService.trackX()` | `recordEvent` | `dg.user.action` | `{action, page, …}` | used by dashboard "…" |
-| …                     |               |                  |                     |                       |
-
-**Step 2 — Decide the parity tool per row.** Three options, in order of
-preference:
-
-| Tool                                                      | Use when                                                             | What you get                                                                                                                                                                                                                                 |
-| --------------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`eventNamespace`**                                      | The existing types differ from `com.uwt.*` only by prefix            | Set `eventNamespace: 'dg'` once and all three library types become `dg.scenario`, `dg.scenario.step`, `dg.bi`. Cheapest option.                                                                                                              |
-| **`track(name, metadata, { eventType })`**                | An existing dashboard or metric filter needs a _specific_ event type | The event type is exactly yours; the **payload becomes the `UwtBIEvent` envelope** (`eventName`, `eventTime`, `metadata`, `application`, `scenarioId?`, `feature?`). Documented as _"a migration escape hatch, not a pattern to reach for."_ |
-| **`inject(UwtTelemetrySink).record(eventType, payload)`** | You need byte-exact payload parity                                   | Raw passthrough. You own the payload shape entirely. Use sparingly and comment why.                                                                                                                                                          |
-
-**Step 3 — Migrate, keeping both paths alive.** Do not delete `RumService`
-yet. Migrate call sites one at a time.
-
-**Step 4 — Diff the wire.** Verify before deleting. Turn on the debug flags
-and compare old vs new output:
-
-```js
-localStorage.setItem('debugScenario', 'true');
-localStorage.setItem('debugBI', 'true');
-```
-
-Every debug line's **second console argument is the literal object handed to
-the sink** — so console capture is full-fidelity, not a summary. Compare
-against the inventory table from Step 1.
-
-**Step 5 — Delete `RumService`** only once every row in the table is ticked.
-
-### 5.2 Page views — check this specifically
-
-The RUM client **already records a page view on every navigation** via
-`history.pushState`, which covers the Angular router automatically. The
-library deliberately adds no page-view recorder of its own:
-
-> There is deliberately no `provideUwtRouterPageViews()` … a second recorder
-> on top of it would produce **two** page views per navigation, double the
-> `interaction` counter, and leave the first page with a `timeOnParentPage` of
-> roughly zero.
-
-So:
-
-- If `RumService` records page views **manually**, you must either drop that
-  code (letting the SDK's automatic page views stand) or keep it via
-  `UwtRumTelemetrySink.recordPageView(pageId)` **and** set
-  `disableAutoPageView: true` — never both recorders at once.
-- If `data-gateway`'s routes carry identifiers, the automatic page id (with
-  the default `pageIdFormat: 'PATH'`) is the **resolved** path — one page id
-  per record id. That is a cardinality problem _and_ a PII problem. Derive the
-  template yourself, call `recordPageView(template)`, and set
-  `disableAutoPageView: true`.
-
-> ⚠️ **Route-template trap:** a route declared with `matcher` has no `path` at
-> all, so walking `routeConfig.path` reports every such route as `/`. Derive
-> the template from the segments the match actually consumed, putting
-> parameters back as `:name`.
-
-### 5.3 Reserved metadata prefix
-
-Keys under `aws:` are reserved by the RUM client — it drops them with a
-console warning. The sink filters them out before recording. If `RumService`
-sets any, they were already being dropped; do not port them.
-
-### 5.4 User identity
-
-`sink.setUserId(id)` / `setUserId(undefined)` — `setUserId('')` signs out
-too. Pass an **opaque** id — never an email, username or account number.
-
-> ⚠️ Signing out starts a **fresh session** with a new anonymous id
-> (`pinUserId` has no inverse), which emits a `session_start` event and
-> re-rolls sampling. If `RumService` does something different on sign-out,
-> note the behaviour change explicitly.
-
----
-
-## 6. Phase 4 — declare the vocabulary
-
-Scenario, step and BI event names are **metric dimensions**. From
-`DESIGN.md` §4:
-
-> A typo here would not just produce a wrong number. It would silently start a
-> **second, incomplete** metric series, and the alarm built on the first one
-> would keep reading healthy. Interpolating an id — ``step(`load-${id}`)`` —
-> does the same at a larger scale. The type turns both into compile errors.
-
-Create `src/app/services/telemetry.schema.ts`:
-
-```ts
-/**
- * This application's telemetry vocabulary.
- *
- * Scenario, step and business event names are metric dimensions, declared
- * once here rather than as free text at each call site. Anything not listed
- * below is a compile error.
- */
-declare module '@absaoss-cps/ngx-ui-watchtower' {
-  interface UwtScenarioNames {
-    /** A router navigation, from click to activated route. */
-    'route-navigation': true;
-    /** Mounting and activating an embedded fragment. */
-    'fragment-load': true;
-    // …
-  }
-
-  interface UwtScenarioSteps {
-    'resolve-route': true;
-    activate: true;
-    // …
-  }
-
-  interface UwtBIEventNames {
-    /** The user exported the current result set. */
-    export_clicked: true;
-    // …
-  }
-}
-
-export {};
-```
-
-> There is a fourth augmentable registry, `UwtLoggerNames`. **Do not declare
-> it** — `data-gateway` has no logging (§3.2). Add it only if a log backend
-> appears later.
-
-### 6.1 The side-effect import convention
-
-A module augmentation applies **program-wide**, not per-file: once
-`telemetry.schema.ts` is part of the compilation — which your `tsconfig`'s
-`include` guarantees — every file is checked against the registries, whether or
-not it imports the schema. So this import is a convention, not a compiler
-requirement:
-
-```ts
-import '../../services/telemetry.schema';
-```
-
-Keep it anyway in the files that own the wiring — wherever you call
-`provideUwtTelemetry`, and in your router-telemetry service — so the dependency
-stays visible and the schema file cannot become unreferenced during a refactor.
-Components that merely pass a declared name to a service of your own do not
-need it; in the reference app,
-`app.component.ts`, `theme-toggle.component.ts` and
-`navigation-sidebar.component.ts` all pass declared BI names with no such
-import and type-check clean.
-
-### 6.2 What is and is not a closed vocabulary
-
-| Closed (augmentable, compile-checked)                        | Open (plain `string`) |
-| ------------------------------------------------------------ | --------------------- |
-| `UwtScenarioNames` → `name`                                  | `feature`             |
-| `UwtScenarioSteps` → `step()` **and** `aggregateStart/End()` | `operation`           |
-| `UwtBIEventNames` → `track()`                                | BI `eventType`        |
-| (`UwtLoggerNames` → `getLogger()` — not used here)           |                       |
-
-Mechanism: `UwtRegistered<T>` resolves to `string` while the registry is
-empty, then to `keyof T`. So adoption is incremental — names are unconstrained
-until the first augmentation, then fully checked. Steps and aggregates share
-one registry because they name the same kind of thing.
-
-If you wrap `track()` in a service of your own, type its parameter
-`UwtBIEventName`, not `string` — once `UwtBIEventNames` is augmented, a plain
-`string` is no longer assignable and the wrapper stops compiling.
-
-`'scenario-start'` and `'scenario-end'` are written by the library and need no
-declaration. They bookend every settled scenario's `steps[]` and do not count
-toward `stepCount` or `maxSteps`.
-
----
-
-## 7. Phase 5 — propose scenarios and BI events
-
-### 7.1 The two concerns, and when to use which
-
-| Concern      | Answers                                                    | Emits                                |
-| ------------ | ---------------------------------------------------------- | ------------------------------------ |
-| **Scenario** | "Did this user journey succeed, and how long did it take?" | One RUM event at settlement          |
-| **BI event** | "Did this meaningful thing happen?"                        | One RUM event, deduped within 400 ms |
-
-A BI event that happens inside a journey should carry its `scenarioId`, so the
-two join up:
-
-```ts
-biTelemetry.track('export_clicked', { format }, { scenarioId: scenario.id });
-```
-
-(The third concern, logging, is out of scope here — §3.2.)
-
-### 7.2 How to find candidates
-
-Read `data-gateway`'s source and look for:
-
-- **Every await the user actually waits on** → a scenario. Fragment mount,
-  route load, a data fetch that gates the screen, an upload, an export.
-- **Every irreversible or meaningful click** → a BI event. Submit, export,
-  switch fragment, change a filter that costs a round trip.
-- **Every `catch` block** → `scenario.fail({ error })`. With no log backend,
-  the scenario record is the _only_ place that error is reported, so make sure
-  every catch that ends a journey settles it — a swallowed error that leaves
-  the scenario running becomes a misleading `timeout` half a minute later.
-
-### 7.3 Choose the right settle status — this is the whole point
-
-Four unsuccessful outcomes exist because _"each demands a different response,
-and collapsing them together would make the failure rate useless for
-alerting"_:
-
-| Status       | Method               | Meaning                                                                                              | Response                               |
-| ------------ | -------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| `success`    | `complete()`         | Journey reached its goal                                                                             | —                                      |
-| `failure`    | `fail({ error })`    | A defect — the journey broke                                                                         | Investigate; alert if the rate spikes  |
-| `abandoned`  | `cancel({ reason })` | Stopped being relevant: navigated away, superseded, page unloaded                                    | Engagement signal, **not** a defect    |
-| `incomplete` | `incomplete()`       | An expected path that did not reach the goal — no results, a guard declined, a flag routed elsewhere | Product signal, not an engineering one |
-| `timeout`    | _automatic_          | Never settled within its deadline                                                                    | Engagement signal, distinct from both  |
-
-Getting this wrong is the most common way to make a telemetry dashboard
-useless. A user navigating away mid-load is **not** a defect.
-
-> Prefer the named methods over `settle(status, …)`. _"Naming the outcome at
-> the call site is what lets someone find every place a journey can fail just
-> by searching for `.fail(`."_ `settle()` exists for adapters mapping an
-> external status.
-
-Terminal states are absorbing: a `catch` that calls `fail()` followed by a
-`finally` that calls `complete()` records the **failure**. That is deliberate.
-
-### 7.4 Starter catalogue for a shell
-
-Propose these to the user, then implement what they confirm. Adapt names to
-`data-gateway`'s real vocabulary.
-
-**Scenarios**
-
-| Name                 | Steps                              | Settles                                                                                                                           |
-| -------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| `fragment-load`      | `request`, `mount`, `activate`     | `complete()` on first meaningful render; `cancel({reason:'superseded'})` if the user switches away; `fail({error})` on load error |
-| `route-navigation`   | `resolve-route`, `activate`        | §7.5 has a complete implementation to adapt                                                                                       |
-| `shell-boot`         | `bootstrap`, `auth`, `shell-ready` | `complete()` when the shell is interactive                                                                                        |
-| `auth-token-refresh` | `request`                          | `complete()` / `fail()` / `incomplete()` when the user is simply logged out                                                       |
-| `export-download`    | `request`, `transfer`              | `complete()` on save; `cancel({reason:'user-cancelled'})`                                                                         |
-
-**BI events** — `snake_case`, low cardinality, never an id interpolated in:
-`fragment_opened`, `export_clicked`, `filter_applied`, `search_submitted`
-(debounced — see §10.1), `sign_out_clicked`. Every one you settle on goes into
-`UwtBIEventNames` in the schema file from §6 — an undeclared name is a compile
-error once that registry has its first entry.
-
-Because there is no log stream to fall back on, put diagnostic detail on the
-scenario itself: `feature`/`operation` for classification, `statusCode` for
-error-category grouping, `reason` for a low-cardinality cause, and
-`setData()`/step metadata for the rest.
-
-### 7.5 Route navigation — a working implementation to adapt
-
-Router navigation looks trivial and is not. Below is a complete, working
-handler, already adapted for `data-gateway` (no logging). It came out of a
-mutation-tested implementation, and three of the things in it are not obvious
-— each was found the hard way. **Read the four notes after the code before
-changing anything in it.**
-
-```ts
-import { DestroyRef, inject, Injectable } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import {
-  Event as RouterEvent,
-  NavigationCancel,
-  NavigationCancellationCode,
-  NavigationEnd,
-  NavigationError,
-  NavigationSkipped,
-  NavigationSkippedCode,
-  NavigationStart,
-  Router
-} from '@angular/router';
-import {
-  UwtScenario,
-  UwtScenarioTelemetryService
-} from '@absaoss-cps/ngx-ui-watchtower';
-import './telemetry.schema';
-
-const NAVIGATION_SCENARIO = 'route-navigation';
-
-/** Beyond this, a recorded click is assumed not to have caused the navigation. */
-const INTENT_MAX_AGE_MS = 2_000;
-
-/**
- * Stable, low-cardinality causes, derived from the router's `code`.
- * Angular's own typings say `reason` is "for debug purposes only — use `code`
- * instead for a stable cancellation reason that can be used in production":
- * `reason` is `ngDevMode`-gated, so it is empty in a production build, and for
- * a rejected guard it is empty even in development.
- */
-const CANCEL_REASON: Partial<Record<NavigationCancellationCode, string>> = {
-  [NavigationCancellationCode.Redirect]: 'redirect',
-  [NavigationCancellationCode.SupersededByNewNavigation]: 'superseded',
-  [NavigationCancellationCode.NoDataFromResolver]: 'no-data-from-resolver',
-  [NavigationCancellationCode.GuardRejected]: 'guard-rejected',
-  [NavigationCancellationCode.Aborted]: 'aborted'
-};
-
-const SKIP_REASON: Partial<Record<NavigationSkippedCode, string>> = {
-  [NavigationSkippedCode.IgnoredSameUrlNavigation]: 'same-url',
-  [NavigationSkippedCode.IgnoredByUrlHandlingStrategy]: 'url-handling-strategy'
-};
-
-/** `code` is optional, and a future Angular may add one you do not map. */
-function causeOf<TCode extends number>(
-  causes: Partial<Record<TCode, string>>,
-  code: TCode | undefined,
-  fallback: string
-): string {
-  return (code === undefined ? undefined : causes[code]) ?? fallback;
-}
-
-@Injectable({ providedIn: 'root' })
-export class AppTelemetryService {
-  private readonly router = inject(Router);
-  private readonly scenarioTelemetry = inject(UwtScenarioTelemetryService);
-  private readonly destroyRef = inject(DestroyRef);
-
-  /** Note 1: keyed by navigation id, never a single "current" field. */
-  private readonly navigations = new Map<number, UwtScenario>();
-
-  /** Note 2: a redirect's scenario, waiting to be continued. */
-  private pendingRedirectScenario?: UwtScenario;
-
-  /** Note 4: when the user last did something expected to start a navigation. */
-  private navigationIntentAt?: number;
-
-  private started = false;
-
-  /** Safe to call more than once. */
-  start(): void {
-    if (this.started) return;
-    this.started = true;
-
-    this.router.events
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((event) => this.onRouterEvent(event));
-  }
-
-  /** Call this from your nav-link click handler. See note 4. */
-  markNavigationIntent(): void {
-    this.navigationIntentAt = Date.now();
-  }
-
-  private onRouterEvent(event: RouterEvent): void {
-    if (event instanceof NavigationStart) {
-      const scenario =
-        this.consumePendingRedirectScenario() ??
-        this.scenarioTelemetry.start({
-          name: NAVIGATION_SCENARIO,
-          operation: 'lazy-route-load',
-          route: this.routeTemplate(event.url),
-          startedAt: this.navigationStartedAt(),
-          // Neither completed nor superseded within this window means a
-          // stuck chunk load, not a slow one.
-          timeoutMs: 30_000
-        });
-      scenario.step('resolve-route');
-      this.navigations.set(event.id, scenario);
-      return;
-    }
-
-    if (event instanceof NavigationEnd) {
-      this.settle(event.id, (scenario) => {
-        scenario.step('activate');
-        scenario.complete({ metadata: { finalUrl: event.urlAfterRedirects } });
-      });
-      return;
-    }
-
-    if (event instanceof NavigationCancel) {
-      const scenario = this.navigations.get(event.id);
-      if (scenario && event.code === NavigationCancellationCode.Redirect) {
-        // Note 2: continue this scenario on the next NavigationStart.
-        this.navigations.delete(event.id);
-        this.pendingRedirectScenario = scenario;
-        return;
-      }
-
-      // `message` keeps the router's debug text — useful locally, empty in a
-      // production build, which is why it cannot be the grouping dimension.
-      this.settle(event.id, (scenario) =>
-        scenario.cancel({
-          reason: causeOf(CANCEL_REASON, event.code, 'navigation-cancelled'),
-          message: event.reason || undefined
-        })
-      );
-      return;
-    }
-
-    if (event instanceof NavigationSkipped) {
-      // Note 3: both lines matter.
-      this.navigationIntentAt = undefined;
-      const reason = causeOf(SKIP_REASON, event.code, 'navigation-skipped');
-      this.consumePendingRedirectScenario()?.cancel({
-        reason,
-        message: event.reason || undefined
-      });
-      this.settle(event.id, (scenario) =>
-        scenario.cancel({ reason, message: event.reason || undefined })
-      );
-      return;
-    }
-
-    if (event instanceof NavigationError) {
-      this.settle(event.id, (scenario) =>
-        scenario.fail({ error: event.error, metadata: { url: event.url } })
-      );
-    }
-  }
-
-  /**
-   * Note 5: reduces a resolved URL to a route template. This version is only
-   * correct for STATIC routes — see the note below if data-gateway's routes
-   * carry identifiers.
-   */
-  private routeTemplate(url: string): string {
-    return url
-      .split(/[?#]/)[0]
-      .split('/')
-      .map((segment) => segment.split(';')[0])
-      .join('/');
-  }
-
-  /** Consumes the click timestamp, if one is fresh enough. */
-  private navigationStartedAt(): number | undefined {
-    const at = this.navigationIntentAt;
-    this.navigationIntentAt = undefined;
-
-    if (at === undefined || Date.now() - at > INTENT_MAX_AGE_MS) {
-      return undefined;
-    }
-    return at;
-  }
-
-  private consumePendingRedirectScenario(): UwtScenario | undefined {
-    const scenario = this.pendingRedirectScenario;
-    this.pendingRedirectScenario = undefined;
-    return scenario;
-  }
-
-  private settle(
-    navigationId: number,
-    apply: (scenario: UwtScenario) => void
-  ): void {
-    const scenario = this.navigations.get(navigationId);
-    if (!scenario) return;
-    this.navigations.delete(navigationId);
-    apply(scenario);
-  }
-}
-```
-
-Call `start()` once, from your root component's constructor.
-
-**Note 1 — key by `NavigationStart.id`, not a single "current" field.**
-Angular identifies concurrent navigations by id. A single field attributes the
-wrong duration whenever one navigation supersedes another.
-
-**Note 2 — a `CanMatch` redirect must _continue_ the same scenario.** A
-redirect fires `NavigationCancel` with
-`code === NavigationCancellationCode.Redirect` and then restarts under a _new_
-id. Stash the scenario and reuse it on the next `NavigationStart`, or you
-record two scenarios for one journey.
-
-**Note 3 — `NavigationSkipped` must be handled, or the stashed scenario
-leaks.** When a guard redirect lands back on the _current_ URL, the real event
-sequence is:
-
-```
-NavigationStart(id=N) → NavigationCancel(id=N, code=Redirect)
-                      → NavigationSkipped(id=N+1, IgnoredSameUrlNavigation)
-```
-
-The `NavigationSkipped` fires **instead of** the `NavigationStart` that note
-2's mechanism is waiting for. Without the `consumePendingRedirectScenario()`
-call in that branch, the stashed scenario is never resumed and sits open until
-some later, unrelated navigation wrongly reuses it — silently misattributing
-that navigation's timing to this one. Clearing `navigationIntentAt` there
-matters for the same reason: otherwise a skipped navigation leaves a stale
-click-intent that backdates the _next_, unrelated navigation.
-
-**Note 4 — click-intent backdating.** The router raises `NavigationStart`
-after event handling, guards and change detection have all run. Recording
-`Date.now()` at the click and passing it as `startedAt` keeps that gap — which
-the user experienced as part of the wait — inside the measurement. A mark
-older than `INTENT_MAX_AGE_MS` is discarded, so a stale one can't backdate an
-unrelated journey.
-
-**Note 5 — `routeTemplate` as written only handles static routes.** It strips
-the query string, fragment and matrix parameters, which is enough when no
-route has an `:id`-style segment. **Check `data-gateway`'s route config.** If
-any route is parameterized, this function will emit one `route` value per
-resolved id — exactly the cardinality explosion §10.3 warns about. In that
-case derive the template from the matched route config instead, putting each
-parameter back as `:name`, and beware that a route declared with `matcher` has
-no `path` at all — walking `routeConfig.path` reports every such route as `/`.
-
----
-
-## 8. Phase 6 — the fragment contract (hand this to Unify / Aqueduct / LUM)
-
-> **Copy this section verbatim to the fragment teams.**
-
-Each fragment runs in its own realm. It must **forward** telemetry to the
-shell rather than create its own AWS client.
-
-```ts
-import {
-  UWT_BROADCAST_CHANNEL,
-  provideUwtTelemetry,
-  provideUwtTelemetrySink
-} from '@absaoss-cps/ngx-ui-watchtower';
-
-declare global {
-  interface Window {
-    __uwtTelemetryChannel?: string;
-  }
-}
-
-/**
- * The channel the shell is hosting on, published by it on the top-level
- * window. Same-origin is guaranteed — Web Fragments requires every fragment
- * to share the shell's origin — but `top` access is still guarded, and
- * `undefined` is a valid answer: it means "no shell", and the sink falls
- * back to the default channel and degrades to a no-op.
- */
-function shellChannelName(): string | undefined {
-  // No `window` at all during server rendering.
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-  try {
-    return window.top?.__uwtTelemetryChannel;
-  } catch {
-    return undefined;
-  }
-}
-
-// fragment — no AWS client, no SDK bundle, no broker call
-providers: [
-  provideUwtTelemetry({
-    application: 'unify', // MUST differ from the shell and other fragments
-    environment: 'prod',
-    version
-  }),
-  provideUwtTelemetrySink('broadcast'),
-  // Resolved lazily — see the warning below.
-  { provide: UWT_BROADCAST_CHANNEL, useFactory: shellChannelName }
-];
-```
-
-> ⚠️ **Use the `useFactory` provider, not
-> `provideUwtTelemetrySink('broadcast', { channelName: shellChannelName() })`.**
-> That option binds the value with `useValue`, so it is read **eagerly**, when
-> your providers array is constructed — which can happen before the shell has
-> published the id. The `useFactory` form is resolved **lazily**, when the sink
-> is first constructed, which is the latest possible moment and cannot lose
-> that race. Both forms fall back to the default channel on `undefined`, so the
-> difference is invisible until it silently isn't.
-
-Application code inside the fragment is otherwise identical — same services,
-same methods.
-
-> **Why not a query parameter?** Because by default a fragment is _bound_: it
-> shares `window.location` with the host application, so
-> `window.location.search` gives you the **shell's** query string, not one of
-> your own. The shell also never sets your URL — the gateway routes to you by
-> `fragment-id`. The `window.top` global is the handshake instead.
-
-> **"But doesn't reframing trap `window`?"** It virtualizes the DOM and
-> navigation, not the whole global. Verified against `reframed`'s source
-> (`packages/web-fragments/src/elements/reframed/`): what it patches is
-> `document` query/creation APIs, `history`, `location`, `navigator`, window
-> size properties and event retargeting — enough to scope DOM work into the
-> fragment's shadow root. `top`, `parent`, `BroadcastChannel`,
-> `localStorage` and `sessionStorage` are not intercepted anywhere in that
-> package. `navigator` is in fact patched _to forward to the main window_
-> (`get: () => mainWindow.navigator`), which shows the intent is to make a
-> fragment behave as though it were in the host page, not to sandbox it away
-> from it.
->
-> The strongest corroboration is that `BroadcastChannel` is untouched — if it
-> weren't, this library's entire forwarding design would not work, and
-> neither would Web Fragments' own documented `new BroadcastChannel('/cart')`
-> examples.
->
-> This is an implementation detail rather than a documented API guarantee, so
-> the read is guarded. If it ever stopped working, `shellChannelName()`
-> returns `undefined`, the sink falls back to the default channel, and the
-> fragment behaves exactly as it does with no shell present — which is
-> **silent**. That is why §11.2 asks you to verify the id explicitly rather
-> than infer success from the absence of errors.
-
-### What must match the shell
-
-| Setting          | Rule                                                                                                                                                                                                       |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `eventNamespace` | **Must match.** Otherwise event types diverge and CloudWatch queries fragment along with the UI                                                                                                            |
-| Channel name     | **Must match, and it is per browser tab.** The shell generates one id per page load and publishes it as `window.__uwtTelemetryChannel`; read it off `window.top`. See §3.5 for why the default is not safe |
-| `application`    | **Must differ.** The forwarding sink stamps its realm's `application`, `environment` and `appVersion` onto every event, so you can tell which fragment emitted what                                        |
-
-### What a fragment must never provide
-
-| Do not                               | Why                                                                                                                                                   |
-| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `provideUwtTelemetryRumSink()`       | Builds a second AWS client — one visitor becomes two sessions. A realm has exactly one destination, so listed beside `'broadcast'` it fails bootstrap |
-| `UWT_RUM_CREDENTIALS_PROVIDER`       | Nothing in a fragment needs AWS credentials                                                                                                           |
-| `provideUwtTelemetryBroadcastHost()` | Only the shell hosts. Beside `'broadcast'` it would receive its own realm's messages and forward them again forever, so it warns and stays inactive   |
-| `UWT_LOG_API_PROVIDER`               | `'broadcast'` already binds it to the forwarding provider; one bound after that wins, and the fragment's logs bypass the shell                        |
-
-### What to expect inside a fragment
-
-- **`getSessionId()` is `undefined` for the first task.** The host answers an
-  identity handshake asynchronously. Do not assert on it at bootstrap. Work
-  done before the answer arrives is still correlated by `scenarioId`.
-- **Paint observation does not work.** A `PerformanceObserver` inside a
-  fragment watches its own hidden iframe, never the host frame where the
-  pixels appear — so it never fires. Settle with `complete()` instead.
-- **Log lines go to the shell too.** `'broadcast'` mode forwards them, and the
-  shell's log provider ships them — for `data-gateway`, the no-op one, so they
-  are discarded. `logger.query()` is answered by the shell's provider.
-- **A fragment with no shell still works.** The sink degrades to a no-op.
-  Scenarios run and settle, nothing throws. This is also what a _wrong_
-  channel name looks like, so it is worth verifying deliberately (§11.2).
-- **Correlation crosses realms as a string, not an object.** A `UwtScenario`
-  is a class instance and cannot cross a realm. Broadcast `scenario.id` and
-  open a child scenario with `parentScenarioId`.
-- **Durations are correct across realms.** `startedAt` is epoch ms, converted
-  through the _local_ `timeOrigin`. The one limit: a moment from before the
-  fragment's realm existed is clamped away and falls back to now.
-
----
-
-## 9. RxJS traps
-
-`data-gateway` is Angular, so these will come up. Each cost real debugging
-time on this library's own integration.
-
-### 9.1 `take(1)` / `first()` upstream of `traceScenario` breaks settling
-
-`traceScenario` settles on the source's `complete`. An operator that
-unsubscribes after the first value — `take(1)`, `first()` — unsubscribes
-**before** the source's own `complete` notification reaches the downstream
-`tap()`. The scenario therefore never completes; it sits active until its
-timeout and records **`timeout`** instead of `success`.
-
-This is exactly the `CpsFileUploadComponent` bug: it wraps the callback
-observable in `take(1)`, so a successful upload never called
-`scenario.complete()`.
-
-**Fix:** settle in the pipeline's own `next`/`error` handlers instead of
-relying on completion.
-
-```ts
-return from(processFile(file)).pipe(
-  map((result) => {
-    scenario.complete({ metadata: { fileSize: file.size } }); // settle explicitly
-    return result;
-  }),
-  catchError((error) => {
-    scenario.fail({ error }); // the only place this error gets reported
-    return of(false);
-  })
-);
-```
-
-### 9.2 `switchMap` supersession needs `cancelOutcome`, not `cancel()`
-
-`switchMap` unsubscribes the prior inner Observable **before** the projector
-for the new value runs. So calling `scenario.cancel({ reason: 'superseded' })`
-inside the new projector is a **no-op** — the scenario has already been
-settled by the unsubscribe teardown.
-
-```ts
-// ✅ the reason arrives with the cancellation
-source$.pipe(
-  switchMap((value) => {
-    const scenario = this.scenarioTelemetry.start({
-      name: 'search',
-      feature: 'x'
-    });
-    scenario.step('query');
-    return this.search(value).pipe(
-      traceScenario(scenario, { cancelOutcome: { reason: 'superseded' } })
-    );
-  })
-);
-```
-
-Without `cancelOutcome`, the cancellation still happens (that is the point —
-otherwise it would record `timeout`), it just carries no reason.
-
-If you manage the scenario by hand rather than with `traceScenario`, cancel
-the _previous_ one at the top of the projector, which does work:
-
-```ts
-switchMap((value) => {
-  previousScenario?.cancel({ reason: 'superseded' });   // ✅ explicit, before starting the new one
-  const scenario = this.scenarioTelemetry.start({ … });
-  …
-})
-```
-
-### 9.3 Cancel in `ngOnDestroy` — always
-
-Every component that starts a scenario must settle it on destroy, or the
-scenario sits in the active registry (and in memory) until its timeout — and
-with `timeoutMs: 0`, for the life of the page. The three shapes in use:
-
-```ts
-// one scenario + a timer
-ngOnDestroy(): void {
-  this._destroyed = true;
-  clearTimeout(this._timeout);
-  this._scenario?.cancel({ reason: 'component-destroyed' });
-}
-
-// several scenarios
-ngOnDestroy(): void {
-  this.searchScenario?.cancel({ reason: 'component-destroyed' });
-  this.validateScenario?.cancel({ reason: 'component-destroyed' });
-}
-
-// a map keyed by entity
-ngOnDestroy(): void {
-  for (const s of this.scenarios.values()) s.cancel({ reason: 'component-destroyed' });
-  this.scenarios.clear();
-}
-```
-
-Use consistent reason strings: `'component-destroyed'`, `'superseded'`,
-`'user-cancelled'`. They are low-cardinality grouping keys.
-
-A dev-mode warning fires once more than 50 scenarios are active — treat it as
-a leak report, not noise.
-
----
-
-## 10. Invariants and gotchas
-
-### 10.1 The session event budget is 200
-
-`sessionEventLimit` defaults to **200 events per session, across all
-telemetry** — including page views, web vitals and JS errors, which get
-dropped once it is exhausted.
-
-This is why **a scenario emits exactly one RUM event, at settlement**, with
-its steps packed into the payload.
-
-- **Leave `emitLifecycleEvents: false`.** It emits one event per step plus the
-  final packed event. Roughly thirty six-step scenarios would exhaust the
-  whole budget. It is a local-debugging tool.
-- **Debounce high-frequency BI events.** A search box should report once
-  typing pauses, not per keystroke — otherwise the session's event budget is
-  spent on intermediate states. `debounceTime(400)` before `track()` is the
-  usual shape.
-- Raising `sessionEventLimit` is possible but deliberate — it moves the
-  ceiling, it does not change the shape of the emission.
-
-### 10.2 Metadata must be flat primitives
-
-```ts
-type UwtTelemetryMetadata = Record<string, string | number | boolean | null>;
-```
-
-Silently dropped: objects, arrays, functions, symbols, `undefined`, and
-**non-finite numbers (`NaN`, `Infinity`)**. There is no recursive serializer to
-mis-tune — this is the type system, not a heuristic, keeping response bodies
-and user objects out of telemetry.
-
-> ⚠️ `maxKeys` (default **50**) applies to the **combined** bag across
-> `start({metadata})`, `setData()`, step metadata and settle-time outcome
-> metadata — not to each bag in isolation. Merges re-apply the cap. Exceeding
-> it truncates silently in production (dev mode warns once).
-
-### 10.3 Names are metric dimensions
-
-Never interpolate an id into a scenario name, step name or BI event name.
-`route` must be a **template** (`/customers/:id`), never a resolved URL —
-otherwise one dimension splits into one series per customer.
-
-### 10.4 Redaction — what you cannot turn off
-
-Always on, regardless of any `redact: false`:
-
-- the built-in credential denylist (`pass(word|wd)?`, `secret`, `token`,
-  `auth`, `credential`, `cookie`, `api[-_]?key`, `bearer`, `jwt`, `signature`,
-  `session[-_]?key`, `ssn` — substring, case-insensitive)
-- size caps (strings 1024, stacks 2048, 50 keys)
-- error normalization to `{name, message, stack?}`
-- `extraValueTransforms`
-
-`redact: false` only skips `extraKeyPatterns`, value-pattern scanning and
-URL-query stripping. _"If `redact: false` could disable that too, one careless
-call would quietly open a real security hole — so it cannot."_
-
-> ⚠️ **URL path segments are NOT scrubbed.** Only query strings and fragments
-> are. `/customers/john.smith@example.com` passes straight through. If
-> `data-gateway`'s URLs can carry personal data in a path segment, enable
-> `scanValuePatterns: ['email']` (and friends) or fix the URL design. An
-> opaque numeric id has no recognizable shape and will not be caught either
-> way.
-
-> ⚠️ `extraKeyPatterns` / `extraValuePatterns` with a `/g` or `/y` flag are
-> **stateful** (`.test()` advances `lastIndex`). The library resets it
-> defensively, but prefer non-global patterns.
-
-Value scanning is opt-in and off by default: `'email'`, `'creditCard'`
-(Luhn-validated), `'ssn'`, `'ipv4'`, `'phone'`. `'phone'` is explicitly the
-noisiest.
-
-### 10.5 BI deduplication
-
-Identical events within `dedupWindowMs` (400 ms) collapse. "Identical" means
-same `eventName` **+ scenarioId + eventType + feature + metadata content**.
-The window is measured against `performance.now()`, so it cannot be wedged by
-a clock jump. You do not need to throttle click handlers yourself.
-
-### 10.6 Timers and clocks
-
-- `MAX_TIMEOUT_MS` = 2 147 483 647. Past it, `setTimeout` overflows the 32-bit
-  signed int and fires ~immediately. The scenario timeout clamps **and
-  reschedules** so a clamped intermediate hop does not settle the scenario
-  early.
-- Durations use `performance.now()`, immune to wall-clock adjustments — a
-  sleeping device would otherwise produce negative or wildly inflated
-  durations.
-- `startedAt` is **epoch ms** (`Date.now()`), clamped to the page's lifetime;
-  an out-of-range value is ignored rather than producing a negative duration.
-- `delta` is the duration. `elapsed` is a **timeline position** (ms since the
-  host page loaded), not a second duration. `endTime` is by construction
-  `startTime + delta`.
-
-### 10.7 Cross-realm and multi-tab
-
-- **`BroadcastChannel` is same-origin only.** If a fragment is ever served
-  from a different origin, forwarding silently does nothing — no error. Verify
-  the fragments are same-origin before relying on this.
-- **Forwarding at unload is best-effort.** `BroadcastChannel` delivers on a
-  later task; a fragment torn down before that task runs may never have its
-  message received.
-- **Multi-tab cross-attribution — solved by the per-tab channel in §3.5.**
-  `BroadcastChannel` and the Web Locks leader election are both origin-wide,
-  so on a shared channel a losing tab's fragments still get recorded under the
-  winning tab's session. This is why §3.5 requires a
-  `crypto.randomUUID()`-derived channel name per page load rather than the
-  default. Note the failure mode is _mis-attribution_, not duplication —
-  leader election already prevents one event being recorded twice.
-- **A wrong channel name fails silently.** The broadcast sink fails open, so a
-  fragment on a channel no host is listening to behaves exactly like a
-  fragment with no shell: everything runs, nothing ships. Verify the wiring
-  deliberately (§11.2) rather than assuming silence means success.
-
-### 10.8 Correlation with the backend is by convention
-
-AWS performs no automatic cross-system correlation. Send `scenario.id` to the
-backend yourself as a request header (e.g. `X-Correlation-Id`). **The library
-deliberately ships no HTTP interceptor** — header naming and which hosts may
-receive the header are application decisions. Write one in `data-gateway` if
-you want it, and restrict it to your own API origins.
-
-### 10.9 Debug flags
-
-```js
-localStorage.setItem('debugScenario', 'true'); // ALSO force-enables User Timings
-localStorage.setItem('debugBI', '1');
-```
-
-Lines are prefixed `[<application>][<concern>]`, which is how you tell the
-shell's output from each fragment's once they start broadcasting:
-
-```
-[data-gateway][scenario] route-navigation success in 68ms -> com.uwt.scenario
-[unify][bi] export_clicked -> com.uwt.bi
-```
-
-Only `'true'` and `'1'` enable them; read on every emit, so a DevTools toggle
-takes effect without a reload. (A third flag, `debugLogger`, exists for the
-logging concern `data-gateway` does not use.) No production config switch is
-involved
-— that is the point.
-
-### 10.10 Other things that will bite
-
-- **Telemetry never throws into your app.** Every public entry point is
-  wrapped; in dev mode the suppressed error goes to `console.error`, in
-  production it stays silent. Do not add your own try/catch around telemetry
-  calls.
-- **`toRecord()` on a running scenario** returns `status: undefined` and may
-  have as few as one step. It deep-clones, so mutating the snapshot cannot
-  change what is emitted.
-- **Opening a step closes the previous one.** Settling closes whatever step is
-  open, with the scenario's own final status.
-- **`aggregateStart`/`aggregateEnd`** are for work that runs many times inside
-  one scenario (per-row formatting, per-item processing) — the total is the
-  useful number, and a hundred steps would just be noise. A second
-  `aggregateStart` for the same name before its `aggregateEnd` is ignored, and
-  an `aggregateEnd` with no matching start is ignored, so an early return
-  cannot corrupt the total.
-- **On `pagehide`** every in-flight scenario settles as `abandoned` /
-  `metadata.abandonedBy: 'page-hidden'` and the sink beacons. On
-  `visibilitychange` → hidden the sink flushes but scenarios are **left
-  running**, since the user may come back.
-- **CloudWatch RUM and CloudWatch Logs are separate streams.** They are joined
-  analytically via `sessionId` and `scenarioId`, not by AWS.
-- **Custom RUM events do not automatically become CloudWatch metrics.** They
-  land in the app monitor's log group. Someone must define a RUM _extended
-  metric_ server-side. The frontend's job is to emit low-cardinality
-  dimensions (`scenarioName`, `status`, `feature`, `operation`) and values
-  (`delta`, `stepCount`).
-- **Percentiles are never computed in the browser.**
-
----
-
-## 11. Verification
-
-### 11.1 Unit tests
-
-The library ships **no test doubles, on purpose** — _"An application testing
-its own code needs a five-line provider array and, if it wants to assert on
-emitted events, a six-method sink double — both are shorter to write than to
-depend on."_
-
-Minimal harness — two providers, since there is no log provider to bind:
-
-```ts
-TestBed.configureTestingModule({
-  providers: [
-    provideUwtTelemetry({
-      application: 'data-gateway-test',
-      environment: 'test',
-      version: '0.0.0'
-    }),
-    { provide: UwtTelemetrySink, useClass: UwtNoopTelemetrySink }
-  ]
-});
-```
-
-To assert on emitted events, substitute a recording sink — all six methods:
-
-```ts
-{
-  provide: UwtTelemetrySink,
-  useValue: {
-    record: (eventType, payload) => events.push({ eventType, payload }),
-    recordError: () => undefined,
-    getSessionId: () => 'session-1',
-    setUserId: () => undefined,
-    getUserId: () => undefined,
-    flush: () => undefined
-  }
-}
-```
-
-Disable timeouts in tests with `withScenarios({ defaultTimeoutMs: 0 })`.
-
-> ⚠️ **jsdom implements no `BroadcastChannel`**, so the broadcast sink
-> degrades to a no-op in tests. That is documented, expected behaviour — not a
-> failure. Do not try to "fix" it with a polyfill unless you are specifically
-> testing the broadcast protocol.
-
-**Write tests that fail without the fix.** This library's own suite was
-mutation-checked: every guard was verified to actually break a test when
-removed. A test that passes with and without your change is proving nothing.
-
-### 11.2 Live verification
-
-Enable `debugScenario` and `debugBI` and drive the real app. Each debug line's
-second console argument is the exact object handed to the sink, so you can
-diff it against what you expect. Check specifically:
-
-- Exactly one `route-navigation` scenario per navigation, settling with the
-  right status.
-- No scenario left running after navigating away mid-journey.
-- No duplicate BI events from a double-click (dedup should collapse them).
-- Nothing at all on the server render.
-- **The channel id actually reaches the fragments.** In a fragment's realm,
-  read `window.top.__uwtTelemetryChannel` and confirm it matches the id the
-  shell generated. Because a wrong or missing channel
-  fails silently, this cannot be verified by absence of errors — check the
-  value. Once a fragment does broadcast, `UwtTelemetryBroadcastHost.received`
-  is the counter that proves the host is receiving.
-- **Open the app in two tabs** and confirm each has a different channel id.
-
-### 11.3 What actually reaches the wire
-
-This is a real captured scenario record — the exact object handed to
-`sink.record('com.uwt.scenario', …)`, for a lazy load that was superseded by a
-second one before it finished. Only the `application` value is substituted
-(it was captured from another app); everything else is verbatim. Use it to
-calibrate what your own scenarios will look like:
-
-```json
-{
-  "scenarioId": "250514ab-eb44-4783-81a3-3b2d88dba515",
-  "scenarioName": "table-page-load",
-  "feature": "table",
-  "status": "abandoned",
-  "startTime": "2026-09-05T11:11:04.211Z",
-  "endTime": "2026-09-05T11:11:04.273Z",
-  "delta": 62,
-  "elapsed": 3037,
-  "stepCount": 1,
-  "steps": [
-    {
-      "name": "scenario-start",
-      "startOffset": 0,
-      "endOffset": 0,
-      "stepDelta": 0,
-      "elapsed": 2975,
-      "status": "success"
-    },
-    {
-      "name": "fetch",
-      "startOffset": 1,
-      "metadata": { "abandonedBy": "caller" },
-      "endOffset": 62,
-      "stepDelta": 61,
-      "elapsed": 3037,
-      "status": "abandoned",
-      "reason": "superseded"
-    },
-    {
-      "name": "scenario-end",
-      "startOffset": 62,
-      "endOffset": 62,
-      "stepDelta": 0,
-      "elapsed": 3037,
-      "status": "abandoned",
-      "reason": "superseded",
-      "metadata": { "abandonedBy": "caller" }
-    }
-  ],
-  "previousStep": "fetch",
-  "metadata": { "abandonedBy": "caller" },
-  "application": "data-gateway",
-  "reason": "superseded"
-}
-```
-
-Things to read off it:
-
-- **One event per scenario**, with every step packed into `steps[]`.
-- **`scenario-start` / `scenario-end` bookend every settled record.** They are
-  written by the library, carry the final status, and do not count toward
-  `stepCount` (which reads `1` here, for the single real `fetch` step).
-- **`abandonedBy: 'caller'`** is stamped by `cancel()` and cannot be
-  overridden by caller metadata. `'page-hidden'` there instead means the tab
-  went away rather than your code cancelling.
-- **`reason` propagates** to the open step, the end marker and the root.
-- **`delta` (62) is the duration; `elapsed` (3037) is a timeline position** —
-  ms since the host page loaded. They are not two measurements of the same
-  thing.
-- `sessionId` and `userId` would also appear once the RUM client has
-  initialised and a user is signed in.
-- `application` is whatever `provideUwtTelemetry` was given. Events forwarded
-  from a fragment carry that fragment's name here instead, which is how you
-  tell which realm emitted what.
-
-### 11.4 Build a capture harness
-
-Strongly recommended, and cheap: a spec that drives your real components
-through `TestBed` with a capturing sink, then writes every captured payload to
-a checked-in file. That file turns "the telemetry looks right" into a
-reviewable artifact — a diff shows anyone exactly how a change alters what
-reaches CloudWatch, including for statuses that are hard to trigger by hand.
-
-The shape: a `CapturingSink extends UwtTelemetrySink` that pushes
-`(eventType, payload)` into an array, one `it()` per case driving a real
-component, and a final `it()` that writes the array to disk as JSON.
-
----
-
-## 12. Quick reference
-
-### Imports by entry point
-
-```ts
-// what data-gateway uses from '@absaoss-cps/ngx-ui-watchtower'
-import {
-  provideUwtTelemetry,
-  provideUwtTelemetryBroadcastHost,
-  UwtTelemetryBroadcastHost, // its `received` counter — §11.2
-  provideUwtTelemetrySink, // fragments only ('broadcast' | 'noop')
-  withScenarios,
-  withBIEvents,
-  withRedaction,
-  UwtScenarioTelemetryService,
-  UwtScenario,
-  UwtBITelemetryService,
-  traceScenario,
-  UwtTelemetrySink,
-  UwtNoopTelemetrySink,
-  UwtTelemetryMetadata,
-  UwtScenarioNames,
-  UwtScenarioSteps,
-  UwtBIEventName,
-  UwtBIEventNames,
-  UWT_BROADCAST_CHANNEL,
-  UWT_DEFAULT_BROADCAST_CHANNEL,
-  UWT_LOG_API_PROVIDER, // shell: bound to UwtNoopLogApiProvider (§3.2)
-  UwtNoopLogApiProvider
-} from '@absaoss-cps/ngx-ui-watchtower';
-
-// the whole of '@absaoss-cps/ngx-ui-watchtower/rum' — seven names
-import {
-  provideUwtTelemetryRumSink,
-  UwtRumTelemetrySink,
-  UWT_RUM_CREDENTIALS_PROVIDER,
-  type UwtRumCredentialsProvider,
-  type UwtRumBootstrap,
-  type UwtRumCredentials,
-  type UwtRumAppMonitorConfig
-} from '@absaoss-cps/ngx-ui-watchtower/rum';
-```
-
-Also exported from `@absaoss-cps/ngx-ui-watchtower`, but **not used by `data-gateway`** — the
-whole logging concern (§3.2): `withLogging`, `UWT_LOG_CONFIG`, `UwtLogConfig`,
-`UwtLoggerService`, `UwtLogger`,
-`UwtLogApiProvider`, `UwtBroadcastLogApiProvider`, `UwtLogQuery`,
-`UwtLogRecord`, `UwtLogDetail`,
-`UwtLogLevel`, `UWT_LOG_LEVEL_ORDER`, `UwtLoggerName`, `UwtLoggerNames`.
-
-### Scenario API
-
-```ts
-const s = scenarioTelemetry.start({
-  name,                 // declared in UwtScenarioNames
-  feature?, operation?, // plain strings — free-form classification
-  route?,               // a TEMPLATE, never a resolved URL
-  startedAt?,           // epoch ms, for click-intent backdating
-  timeoutMs?,           // default 30_000; 0 disables
-  metadata?, parentScenarioId?
-});
-
-s.step(name, metadata?);          // opening a step closes the previous one
-s.endStep(detail?); s.failStep(error, detail?);
-s.aggregateStart(name); s.aggregateEnd(name);
-s.setData(metadata);              // merges, re-capped at maxKeys
-
-s.complete(outcome?);             // success
-s.fail({ error, statusCode? });   // failure
-s.cancel({ reason });             // abandoned
-s.incomplete(outcome?);           // incomplete
-
-s.id;                             // the correlation id
-```
-
-### BI
-
-```ts
-biTelemetry.track(
-  'export_clicked', // declared in UwtBIEventNames
-  { format: 'csv' },
-  { scenarioId: s.id, feature: 'reports' }
-);
-```
-
----
-
-## 13. Checklist
-
-- [ ] Both `paths` entries; both jest mappings **anchored**
-- [ ] `allowedCommonJsDependencies: ["shimmer"]`; `skipLibCheck` where needed
-- [ ] Secondary entry point has its own tsconfigs + root `references`
-- [ ] No relative, deep, or re-exported imports of the library (npm-swap contract)
-- [ ] `provideUwtTelemetry` + RUM sink + **broadcast host** + credentials binding
-- [ ] `UWT_LOG_API_PROVIDER` bound to **`UwtNoopLogApiProvider`** — the broadcast host fails at bootstrap without a log provider
-- [ ] **No logging used** — no `UwtLoggerService`, no `withLogging`
-- [ ] **Per-tab channel id** generated once per page load and passed to every fragment
-- [ ] Credentials provider adapted to `broker.server.ts`, `cache: 'no-store'`, returns `null` on any failure
-- [ ] `RumService` inventory table complete, every row migrated and diffed **before** deletion
-- [ ] Page views: exactly one recorder, not two
-- [ ] `telemetry.schema.ts` created (scenarios, steps and BI event names) and side-effect-imported in the files that own the telemetry wiring (§6.1)
-- [ ] Every `catch` that ends a journey calls `scenario.fail({ error })` — there is no log stream to catch it otherwise
-- [ ] Every component that starts a scenario cancels it in `ngOnDestroy`
-- [ ] No `take(1)`/`first()` upstream of `traceScenario`
-- [ ] `switchMap` supersession uses `cancelOutcome`
-- [ ] Scenarios settle with the _right_ status (`abandoned` ≠ `failure`)
-- [ ] Tests fail without the code they test
-- [ ] Verified live with the debug flags, and verified silent under SSR
-- [ ] §8 handed to the fragment teams
diff --git a/temp_docs/SESSION-LIFECYCLE.md b/temp_docs/SESSION-LIFECYCLE.md
deleted file mode 100644
index 34cc44e..0000000
--- a/temp_docs/SESSION-LIFECYCLE.md
+++ /dev/null
@@ -1,243 +0,0 @@
-# Session lifecycle and `sessionId`
-
-How sessions work for ngx-ui-watchtower: who owns them, when `sessionId` exists, when it changes,
-and what the library should fix.
-
-**Sources.** The installed `aws-rum-web` **3.2.1** source (`@aws-rum/web-core` and
-`@aws-rum/web-slim` 3.2.1, under `node_modules/`), the library source on branch
-`15-add-sessionid-and-userid-to-bi-events`, and the AWS documentation. Each claim is marked:
-
-- **[code]** — verified by reading the source; not run in a browser.
-- **[doc]** — stated in AWS documentation.
-- **[unverified]** — browser behavior not tested.
-
-SDK paths below are relative to `node_modules/@aws-rum/web-core/dist/es/` unless stated otherwise.
-Library paths are relative to `projects/ngx-ui-watchtower/`.
-
-## Summary
-
-The AWS RUM client owns the session completely. The library never creates, stores or rotates a
-session id. It shapes the session in three ways only: it turns cookies on (so a session survives
-reloads), it decides when the RUM client exists (so when `sessionId` becomes available), and it
-rotates the session on sign-out.
-
-The library should not add its own session management. It should fix five risks in how it uses
-the SDK's session (see [Risks and recommended fixes](#risks-and-recommended-fixes)).
-
-## 1. Session lifecycle
-
-All of it lives in the SDK's `SessionManager`.
-
-**Creation.** A session is created lazily, on the first `getSession()` call:
-
-- At construction the session is a nil placeholder (`00000000-…`), or the session restored from a
-  valid `cwr_s` cookie. **[code]** `sessions/SessionManager.js:40-57`
-- `getSession()` creates a session (UUID v4) when the current one is nil or expired.
-  **[code]** `sessions/SessionManager.js:105-114, 304-327`
-- `getSession()` is called by every `recordEvent`, by every dispatch that has events, and by
-  `getSessionId()`. So reading the id has side effects: it can create or rotate the session and
-  emit `session_start`. **[code]** `event-cache/EventCache.js:90, 138, 346`
-
-**Lifetime.** `sessionLengthSeconds` (default 1800 s) is an **inactivity timeout**:
-
-- The expiry moves to now + 30 min on every *recorded* event (`incrementSessionEventCount` →
-  `renewSession`). **[code]** `sessions/SessionManager.js:240-243, 348-352`
-- Rotation is lazy: nothing happens at the moment of expiry; the next `getSession()` call creates the
-  new session. **[code]**
-- User activity alone doesn't renew it — only recorded events. The library's default telemetries
-  (`errors`, `performance`, `http`) don't include DOM interactions.
-  **[code]** `rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts:382-386`
-- AWS describes the setting only as "The duration of a session (in seconds)". The sliding
-  behavior comes from the code. **[doc]**
-  ([configuration.md](https://github.com/aws-observability/aws-rum-web/blob/main/docs/configuration.md))
-
-**Replacement.** A new id replaces the old one on expiry, on `startSession()` (the library calls it
-on sign-out) and on `pinSessionId()` (the library never calls it). Each new session re-rolls
-sampling; the nil placeholder and the first real session share one decision.
-**[code]** `sessions/SessionManager.js:308-313`
-
-## 2. When `sessionId` becomes available
-
-`UwtRumTelemetrySink.getSessionId()` returns `this.awsRum?.getSessionId()`, so it is `undefined`
-until the client exists, then synchronous. **[code]** `rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts:249-255`
-
-The order:
-
-1. An app initializer starts `sink.init()` without waiting for it.
-   `src/lib/providers/uwt-telemetry-common.providers/uwt-telemetry-common.providers.ts:309-321`,
-   `rum/src/lib/uwt-rum.providers/uwt-rum.providers.ts:39-41`
-2. `performInit` awaits `credentialsProvider.load()` (the broker request), then
-   `import('aws-rum-web')` (a chunk download), then constructs `AwsRum`.
-   `uwt-rum-telemetry.sink.ts:153-176`
-3. From then on, `getSessionId()` returns the restored cookie session or creates one on the spot.
-
-So it is **asynchronous**: available after bootstrap, one broker round-trip and one chunk load.
-It is never available:
-
-- on the server, or with telemetry off (`canStart`, `uwt-rum-telemetry.sink.ts:110-112`);
-- for the rest of the page if the broker returns `null` or `load()` throws
-  (`uwt-rum-telemetry.sink.ts:156-160, 177-180`) — as of version 0.3.0; see risk 3 below for the
-  retry since added;
-- after a credential refresh returns `null` — it disappears mid-page
-  (`uwt-rum-telemetry.sink.ts:499-503`). **[code]**
-
-In a fragment, `UwtBroadcastTelemetrySink.getSessionId()` returns the host's last announced id,
-and `undefined` until the host answers.
-**[code]** `src/lib/sinks/uwt-broadcast/uwt-broadcast-telemetry.sink.ts:65, 99-101, 124-132`
-
-## 3. When `sessionId` changes
-
-| Trigger | Changes? | Why |
-|---|---|---|
-| Route navigation | No | It only records a page view, which renews the expiry. **[code]** |
-| Reload within 30 min of the last recorded event | No | Restored from `cwr_s`, because the library sets `allowCookies: true` (the SDK default is `false`). **[code]** `uwt-rum-telemetry.sink.ts:377`, `sessions/SessionManager.js:279-294` |
-| Reload after that, or with cookies unavailable | Yes | Cookie expired or never written. AWS: cookies make the IDs "persist across page loads". **[doc]** ([RUM cookies](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-privacy.html#CloudWatch-RUM-cookies)) |
-| Tab hidden or visible | No | It only flushes. **[code]** `dispatch/Dispatch.js:55-71, 195-197` |
-| 30 min with no recorded event | Yes, on the next `getSession()` | Lazy expiry. **[code]** |
-| Event cap (200) reached | Not immediately | Dropped events stop renewing, so the session rotates 30 min after the last *recorded* event, even while the user is active. **[code]** `event-cache/EventCache.js:92-98` |
-| Sign-out: `setUserId(undefined)` or `''` | Yes | `startSession({ userId: uuid })` creates a new session and emits `session_start`. **[code]** `uwt-rum-telemetry.sink.ts:268-279` |
-| Sign-in: `setUserId(id)` | No | `pinUserId` changes only the user. **[code]** |
-| App re-bootstrap in the same page | No, if the cookie is valid | The new `AwsRum` restores `cwr_s`. **[code]** |
-
-## 4. AWS RUM vs. the library
-
-- **AWS RUM controls** creation, expiry, rotation and persistence of the id, sampling and the
-  event cap. **[code]**
-- **The library controls:**
-  - `allowCookies: true` by default — the only reason a session survives reloads;
-  - pass-through of `sessionLengthSeconds`, `sessionEventLimit`, `sessionSampleRate`,
-    `suppressSessionStartEvent`, `userIdRetentionDays` and `cookieAttributes` (each omitted when
-    unset, so the SDK default applies — `buildRumConfig`, `uwt-rum-telemetry.sink.ts:376-424`);
-  - when the client exists (section 2), and the sign-out rotation.
-- **The library never** seeds `sessionId` or `userId` at construction (`buildRumConfig` forwards
-  neither), calls `pinSessionId`, caches the id, or mints its own.
-
-## 5. End-to-end flow
-
-1. **Read.** Each emitter reads `sink.getSessionId()` when it builds a payload:
-   - BI events: `src/lib/services/uwt-bi-telemetry.service/uwt-bi-telemetry.service.ts:121-125`;
-   - scenarios: `src/lib/scenario/uwt-scenario/uwt-scenario.ts:473, 586-592, 682` — read again for
-     the start, each step and the end;
-   - log records: `src/lib/services/uwt-logger.service/uwt-logger.service.ts:321-324`.
-2. **Record.** `sink.record()` hands the payload to `awsRum.recordEvent`, or buffers it before init
-   (newest 100 kept) and replays it after init. `uwt-rum-telemetry.sink.ts:204-237, 562-581`
-3. **Dispatch.** The SDK puts the ids on the batch, not on each event: `createRequest()` reads
-   `UserDetails: { userId, sessionId }` when the batch is sent. **[code]** `dispatch/Dispatch.js:223-231`;
-   `@aws-rum/web-slim/dist/es/orchestration/Orchestration.js:137`: "sessionId rides on UserDetails
-   per batch, not per event".
-4. **Fragments.** The fragment sink forwards to the host. The host announces its identity only on:
-   - winning the leader election;
-   - a fragment's `identity-request`;
-   - sign-in or sign-out;
-   - fragment activity, when the id changed since the last announcement.
-
-   It never announces its own session change unprompted.
-   **[code]** `src/lib/sinks/uwt-broadcast/uwt-broadcast-host.service.ts:100-106, 137-176, 266-285`
-
-The payload's `sessionId` can therefore differ from the batch's:
-
-- **buffered before init** — the payload has `undefined`, the batch has the real id (documented in
-  DESIGN.md §5);
-- **after sign-out** — see risk 1;
-- **a fragment's first event after the host's session changes** — it carries the old id.
-
-## 6. Configuration and defaults
-
-SDK defaults: `@aws-rum/web-slim/dist/es/orchestration/Orchestration.js:30-64`. The library keeps
-all of them except `allowCookies`.
-
-| Option | SDK default | Effect on the session |
-|---|---|---|
-| `allowCookies` | `false` (library: `true`) | Persists `cwr_s` (session) and `cwr_u` (user) across page loads |
-| `sessionLengthSeconds` | 1800 | Inactivity window, renewed by each recorded event |
-| `sessionEventLimit` | 200 (`0` = no limit) | Cap per session; the count is stored in the cookie and survives reloads |
-| `sessionSampleRate` | 1 | Re-rolled per new session; an unsampled session still has an id |
-| `userIdRetentionDays` | 30 (`0` = nil user id) | Lifetime of `cwr_u` |
-| `cookieAttributes` | `domain: hostname, path: '/', sameSite: 'Strict', secure: true, unique: false` | `unique: false` means one cookie name for every app monitor on the hostname |
-| `suppressSessionStartEvent` | `false` | Whether a new session emits `session_start` |
-
-## 7. Edge cases
-
-- **Multiple tabs.** Each tab reads the cookie once, at construction, then keeps its own session in
-  memory. **[code]**
-  - Tabs opened while the cookie is valid share one id. They drift apart once one of them rotates
-    (inactivity or sign-out).
-  - Each tab overwrites the cookie with its own session; the next page load adopts whichever wrote
-    last.
-  - Two tabs that start with no cookie get two different sessions.
-  - Fragments on the default broadcast channel: a losing tab's fragment events land in the winning
-    tab's session. DESIGN.md documents this and prescribes a per-page-load channel.
-- **Several apps on one hostname.** With `unique: false`, app monitors on the same host and path
-  share `cwr_s` and `cwr_u`: the same id, sampling decision and restored event count. **[code]**
-  `cookieAttributes.unique: true` separates only `cwr_s`: in 3.2.1 the user cookie is always the
-  unsuffixed `cwr_u` (`sessions/SessionManager.js:274-277`), although the AWS docs say all four
-  storage names get the suffix.
-- **Reload into a capped or unsampled session.** The restored session never gets an expiry:
-  `getSessionFromCookie` doesn't set `sessionExpiry`, and `new Date() >= undefined` is `false`;
-  only recorded events set it. **[code]** `sessions/SessionManager.js:96, 112, 279-294`
-  - A tab reloaded into a session that already hit 200 events, or wasn't sampled, keeps it for the
-    rest of that page's life and drops every event.
-  - An SDK bug in 3.2.1; it only matters with a sample rate below 1 or heavy sessions.
-- **HTTP (not HTTPS) outside localhost.** The `Secure` cookie is rejected, so every load gets a new
-  session and a new user id. **[unverified]**
-- **Failed or slow init.**
-  - Everything recorded before init carries `undefined`.
-  - The buffer keeps the newest 100 items.
-  - A failed init is never retried, so the whole page runs without a session. **[code]**
-- **Shared device.**
-  - `pinUserId(appUserId)` writes the app's user id into `cwr_u` for 30 days.
-    **[code]** `sessions/SessionManager.js:339-346`
-  - If someone closes the tab without signing out, the next page load restores that id as the
-    anonymous user, so the next visitor's events carry the previous user's id until sign-in.
-    **[code]** `sessions/SessionManager.js:251-262`
-  - A `setUserId(undefined)` before init does nothing to RUM. **[code]**
-
-## Risks and recommended fixes
-
-**Status:** risk 3 is fixed and the docs are corrected, in the working tree of branch
-`15-add-sessionid-and-userid-to-bi-events` (not committed). Risks 1, 2 and 4 were implemented, then
-removed as not worth their cost; risk 5 is documented. The SDK bug report is still open.
-
-| Risk | Decision |
-|---|---|
-| 1 | Not changed. Saving a few seconds of attribution isn't worth a new failure mode: the SDK's `dispatch()` returns no promise, so a failed send on sign-out would surface as an unhandled rejection. |
-| 2 | Not changed. It only affects apps that call `setUserId(undefined)` when nobody signed in; the docs now say to call it on a real sign-out only. A guard needed a new `localStorage` key and its edge cases. |
-| 3 | Fixed: a failed broker request is retried every 30 s, up to ten attempts, with the buffer kept; a sign-out made meanwhile is applied when the client starts. A failed SDK download or client start is not retried, because browsers remember a failed module import. The whole start runs outside Angular's zone, so the SDK's dispatch interval and the sink's timers no longer keep a zone-based app unstable (an older bug, found in review). |
-| 4 | Not changed. Only a fragment's first event after a shell session change carries the old id in its payload; the RUM batch is right, and the host re-announces after that event. A fix needed new public API and broke sinks written with `implements`. |
-| 5 | Documented (DESIGN.md sign-out, `userIdRetentionDays` JSDoc); `userIdRetentionDays: 0` is the option. |
-| Docs | `sessionLengthSeconds`, `allowCookies`, `cookieAttributes` (`unique` renames only `cwr_s`) and the `load()` contract (throw to retry, `null` to disable) are corrected in JSDoc, DESIGN.md and README. |
-
-1. **Sign-out misattributes recent events.** Events still queued (up to 5 s, at most 100) go out
-   under the new anonymous user and session, because ids are attached at dispatch.
-   **Fix:** call `this.awsRum.dispatch()` just before `startSession()` in `setUserId`.
-   `dispatchFetch` builds the request synchronously (`dispatch/Dispatch.js:16-22`), so that batch
-   keeps the old ids.
-2. **Session rotates on every page load.** `setUserId(undefined)` rotates even when nobody was
-   signed in. Auth libraries that emit "not signed in" at startup start a new session on every load,
-   breaking reload continuity and inflating session counts.
-   **Fix:** rotate only on a transition from a signed-in user to none.
-3. **A transient broker failure disables RUM for the page.** No session and no `sessionId` until
-   the next load.
-   **Fix:** retry init with backoff, like credential refresh already does.
-4. **Fragments carry a stale or missing `sessionId`.** The host doesn't announce when it initializes
-   or rotates on its own.
-   **Fix:** re-announce once the host's sink finishes init — for example a small "identity changed"
-   hook on the sink. Or accept it: the RUM batch is still correct.
-5. **Shared-device user carry-over** (section 7).
-   **Fix:** document it at minimum. Rotating at init when no app user is pinned and the restored
-   RUM user id is the last app user would fix it, but it interacts with risk 2 — a product decision.
-
-**Docs:**
-
-- DESIGN.md:401 and the `sessionLengthSeconds` JSDoc
-  (`rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts:68`) should say "inactivity timeout,
-  renewed by each recorded event", not "session length".
-- Recommend `cookieAttributes.unique: true` when several app monitors share a hostname (it
-  separates only the session cookie).
-- Report the restored-session expiry bug to `aws-rum-web`.
-
-## Should the library manage sessions itself?
-
-No. Keep delegating to RUM and never mint an id. Seeding `sessionId` or calling `pinSessionId`
-switches the SDK to manual mode, where it never rotates the id on its own
-(`sessions/SessionManager.js:89-103`). Fixes 1–4 are small and stay within the current design.
diff --git a/temp_docs/WATCHTOWER_LAB_PLAN.md b/temp_docs/WATCHTOWER_LAB_PLAN.md
deleted file mode 100644
index 3ce7f44..0000000
--- a/temp_docs/WATCHTOWER_LAB_PLAN.md
+++ /dev/null
@@ -1,171 +0,0 @@
-# Plan: the Watchtower Lab
-
-For the agent working on `@absaoss-cps/ngx-ui-watchtower` in its own
-repository. Read `CLAUDE_HANDOFF.md` first for the library itself; this file
-is the plan for testing it end to end without any consuming app.
-
-## Why
-
-In cps-shared-ui, the library's only real-browser exercise was the
-`composition` demo app, which stays behind — and even there RUM never ran:
-its credentials provider calls `/rum/init`, and nothing serves that path.
-
-The library's 822 unit tests run under jsdom, which has none of these: a real
-`BroadcastChannel`, Web Locks, `pagehide`/`sendBeacon`, User Timings, separate
-JavaScript realms, or a RUM SDK talking to a network. The lab makes the new
-repository test the library the way a real application uses it.
-
-## Decisions already made by the user
-
-- **No real AWS.** RUM runs against a local mock endpoint, fully offline. No
-  AWS account or credentials are involved, in CI or locally.
-- **Real Web Fragments** for the micro-frontend part — the `web-fragments`
-  package with its gateway and `<web-fragment>` element — not plain iframes.
-
-## Layout
-
-```
-projects/
-  ngx-ui-watchtower/          the library
-  watchtower-lab-shell/       Angular app with SSR — RUM sink, broadcast host
-  watchtower-lab-fragment/    zoneless Angular app — a Web Fragment in 'broadcast' mode
-  watchtower-consumer-smoke/  minimal app installed from the packed .tgz, never from source
-lab server = the shell's SSR Express server, extended with:
-  Web Fragments gateway       getNodeMiddleware(gateway) from 'web-fragments/gateway/node';
-                              registerFragment({ fragmentId: 'lab-fragment', endpoint, routePatterns })
-  mock RUM broker             GET /rum/init
-  mock RUM dataplane          POST /appmonitors/:id — keeps every PutRumEvents batch
-  mock log backend            POST /api/logs, GET /api/logs?… (answers query())
-  test hooks                  GET /__lab/rum, GET /__lab/logs, POST /__lab/reset,
-                              POST /__lab/broker-mode (ok | null | fail | short-expiry)
-e2e/                          Playwright against the lab server
-```
-
-## Key mechanisms
-
-**The real RUM SDK, against a local endpoint.** `UwtRumAppMonitorConfig`
-exposes `endpoint` and `signing`. The mock broker returns
-`endpoint: 'http://localhost:<port>'`, `signing: false` and fake credentials.
-`aws-rum-web` then runs unmodified, and every batch it would send to AWS lands
-in the mock dataplane, where tests can assert on exactly what AWS would
-receive. The credentials are never used to sign anything, but they must be
-present: the sink schedules a credential refresh only when credentials arrive,
-so without them `short-expiry` could never trigger one. Each broker mode
-exercises a behaviour:
-
-| Broker mode    | Expected library behaviour                        |
-| -------------- | ------------------------------------------------- |
-| `ok`           | RUM records normally                              |
-| `null`         | RUM disabled for the session; no requests at all  |
-| `fail`         | Fail-open: the app is unaffected, nothing is sent |
-| `short-expiry` | Credentials refresh, without a tight retry loop   |
-
-- `short-expiry` returns an `expiration` just over 5 minutes away — the sink
-  refreshes 5 minutes before expiry, so the refresh fires within seconds.
-  Also cover an already-expired `expiration`: the sink must fall back to its
-  30-second retry rather than refresh immediately.
-- `fail` answers with an HTTP error, and the lab's credentials provider must
-  **throw** on a non-OK response rather than return `null`. Returning `null`
-  would make `fail` indistinguishable from `null`; throwing exercises the
-  sink's own failure path, which disables RUM while the app carries on.
-
-**Web Fragments.** The shell calls `initializeWebFragments()` from
-`web-fragments` and renders `<web-fragment fragment-id="lab-fragment">`. The
-gateway, mounted in the SSR server, routes that fragment to the fragment app.
-
-- The shell provides `provideUwtTelemetryRumSink()`,
-  `provideUwtTelemetryBroadcastHost(channelId)` and a log provider bound to
-  `UWT_LOG_API_PROVIDER` (the mock backend). The broadcast host fails at
-  bootstrap without a log provider.
-- The fragment provides `provideUwtTelemetrySink('broadcast')` and nothing
-  else for destinations; it reads the per-tab channel id from
-  `window.top.__uwtTelemetryChannel`, bound through `UWT_BROADCAST_CHANNEL`
-  with `useFactory`. The library's DESIGN.md §13 has the full pattern.
-
-**Coverage of modes.** The shell uses SSR (the library's server no-ops) and
-a zone. The fragment is zoneless — the library schedules its long-lived
-timers through `runOutsideAngular` only when a zone exists, so both paths get
-exercised.
-
-**The consumer smoke app** installs the library from `npm pack` output
-rather than source paths. That checks what source paths hide: the package's
-exports map, its typings, optional peer dependencies, and the guarantee that
-an app which never imports `/rum` has no `aws-rum-web` in its bundle.
-
-## Lab shell pages, for manual exploration
-
-One page per concern — a few buttons plus a live readout:
-
-- **Scenarios** — start; steps; every settle method; timeout; backdating;
-  aggregates; `traceScenario` with `switchMap` supersession; `toRecord()`.
-- **BI** — `track`; the 400 ms deduplication; an event-type override.
-- **Logging** — named loggers; per-logger levels; `mirrorErrorsToRum`;
-  `query()` against the mock backend.
-- **Identity** — sign in; sign out with `undefined` and with `''`.
-- **Privacy** — values that must be redacted, with `scanValuePatterns` on.
-- **Lifecycle** — hide the tab; navigate away.
-- **Fragments** — the embedded fragment, with its own controls.
-- **"On the wire"** — what the mock dataplane and log backend actually
-  received, next to what the app did.
-
-The destination is chosen at bootstrap with
-`?destination=rum|noop` — one at a time, as in production.
-
-## Automated suite — Playwright, chromium and webkit, in CI
-
-1. **Wire format.** A settled scenario arrives as exactly one
-   `com.uwt.scenario` event, with its steps packed inside and the identity
-   attributes present. BI events arrive as `com.uwt.bi`.
-   `emitLifecycleEvents: true` adds `com.uwt.scenario.step` events. Values
-   the app passes for redaction never arrive.
-2. **Lifecycle.** `pagehide` delivers pending events by beacon; a tab going
-   hidden flushes; scenarios still running arrive as `abandoned` with
-   `metadata.abandonedBy: 'page-hidden'`.
-3. **Credentials.** The four broker modes above.
-4. **Web Fragments.**
-   - Fragment events are recorded once, through the shell's RUM client, and
-     attributed to the fragment's own `application`.
-   - Fragment log lines reach the mock log backend.
-   - A fragment's `query()` is answered from the shell's backend.
-   - Signing in or out in one realm applies to all of them.
-   - Two tabs, each with its own channel, don't cross-attribute events.
-5. **Consumer smoke.** `npm pack` → install the tarball into
-   `watchtower-consumer-smoke` → `ng build` for browser and SSR. It builds,
-   the types resolve, the bundle contains no `aws-rum-web` without `/rum`,
-   and the server render succeeds.
-6. **Trace capture.** Regenerate the library's `telemetry-trace.txt` from the
-   lab, replacing cps-shared-ui's
-   `projects/composition/src/app/telemetry-trace.capture.spec.ts`.
-
-## Starting points to copy from cps-shared-ui
-
-From `projects/composition/src/app/`:
-
-- `services/app-telemetry.service.ts` — route-navigation scenarios;
-- `services/app-log-api.provider.ts`;
-- `services/rum-credentials.provider.ts`;
-- `services/telemetry.schema.ts`;
-- `telemetry-trace.capture.spec.ts`.
-
-## Order of work
-
-1. The shell app and its SSR server with the mock broker, dataplane and log
-   backend; suite items 1–3.
-2. The fragment app and the Web Fragments gateway; item 4.
-3. The consumer smoke app and the pack-and-install step; item 5.
-4. Trace capture; item 6.
-
-CI then runs: unit tests → library build → lab build → Playwright → consumer
-smoke.
-
-## Done when
-
-- `npm run lab` starts the server; the fragment renders inside the shell; "On
-  the wire" fills as the buttons are used.
-- The Playwright suite passes headless on chromium and webkit, with no
-  network access beyond localhost.
-- Breaking `/rum`'s `ng-package.json` on purpose makes the consumer smoke
-  step fail — proof that it guards the published package.
-
-Follow the working rules in `CLAUDE_HANDOFF.md` throughout (no commits unless
-asked, verify before reporting, mutation-check tests).

From 4f23e585844b4046dc9a35c8062f2cc2e48e9feb Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Mon, 9 Nov 2026 13:11:54 +0100
Subject: [PATCH 25/51] fix: keep rows on update, Escape and focus inside, safe
 config defaults

---
 playwright/inspector.spec.ts                  | 36 +++++++++++---
 projects/ngx-ui-watchtower/DESIGN.md          | 30 ++++++++----
 projects/ngx-ui-watchtower/README.md          |  8 ++-
 .../uwt-event-inspector.service.spec.ts       | 11 +++--
 .../uwt-event-inspector.service.ts            | 12 +++--
 .../uwt-inspector-timeline.component.spec.ts  | 13 +++++
 .../uwt-inspector-timeline.component.ts       | 23 ++++++++-
 .../uwt-inspector-window.ts                   |  2 +-
 .../uwt-inspector.providers.spec.ts           | 49 +++++++++++++++++++
 .../uwt-inspector.providers.ts                | 37 ++++++++++++--
 .../uwt-inspector.component.spec.ts           | 34 +++++++++++++
 .../uwt-inspector/uwt-inspector.component.ts  | 36 +++++++++++---
 .../uwt-rum-telemetry.sink.spec.ts            | 14 ++++++
 .../uwt-rum-telemetry.sink.ts                 | 25 +++++++---
 14 files changed, 280 insertions(+), 50 deletions(-)
 create mode 100644 projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.spec.ts

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index d12e433..1573419 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -42,6 +42,22 @@ test('opens from the header as a dialog, with the mark and the transparency slid
   expect(title.x - header.x).toBeLessThan(header.width / 4);
 });
 
+test("Escape closes the dialog from inside it, and leaves it open for the app's own", async ({
+  page
+}) => {
+  await page.locator('.lab-header-button').click();
+  const inspector = page.locator('.cps-dialog uwt-inspector');
+  await expect(inspector).toBeVisible();
+
+  await page.locator('.lab-nav a').first().focus();
+  await page.keyboard.press('Escape');
+  await expect(inspector).toBeVisible();
+
+  await inspector.locator('.uwt-inspector-search input').focus();
+  await page.keyboard.press('Escape');
+  await expect(page.locator('uwt-inspector')).toHaveCount(0);
+});
+
 test('a phone-sized screen offers only the dialog and the window, and opens a remembered pane as a dialog', async ({
   page
 }) => {
@@ -106,21 +122,25 @@ test('Shift+E+I opens it, brings focus back, and closes it from inside — never
   await shortcut(page);
   await expect(inspector).toBeVisible();
 
-  // Focus lands in its search field, where Shift+E+I is typing.
+  // Focus lands on the inspector itself, not a field, so it closes next.
+  const dialog = page.locator('.cps-dialog uwt-inspector');
+  await expect(dialog).toBeFocused();
+  await shortcut(page);
+  await expect(inspector).toHaveCount(0);
+
+  // In its search field, Shift+E+I is typing.
+  await shortcut(page);
   const search = page.locator('.uwt-inspector-search input').first();
-  await expect(search).toBeFocused();
+  await search.focus();
   await shortcut(page);
   await expect(search).toHaveValue('EI');
   await expect(inspector).toBeVisible();
 
-  // From the app, it brings focus back.
+  // From the app, it brings focus back, and then closes.
   await page.mouse.click(300, 100);
-  await expect(search).not.toBeFocused();
+  await expect(dialog).not.toBeFocused();
   await shortcut(page);
-  await expect(search).toBeFocused();
-
-  // From a button inside, it closes.
-  await page.locator('.cps-dialog cps-button button').first().focus();
+  await expect(dialog).toBeFocused();
   await shortcut(page);
   await expect(inspector).toHaveCount(0);
 });
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 47a9cc4..77ed8e1 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -234,7 +234,10 @@ across realms).
   dev dependency of the workspace, so the build and the unit tests resolve it
   from `node_modules` and it is never compiled into the package. The
   workspace uses cps-ui-kit 21, the lowest version the Event Inspector
-  supports, as it uses the lowest supported Angular.
+  supports, as it uses the lowest supported Angular. npm checks an optional
+  peer's range whenever it is installed, so an app on a cps-ui-kit older
+  than 21.32 can't install the package until it upgrades the kit — even
+  without the Inspector. That is a breaking change for such apps.
 - **`cps-slider` is staged here for cps-ui-kit.** The kit has no slider, so
   the Transparency control is a `cps-slider` written to the kit's
   conventions — inputs, `valueChanged`, forms support, colour variables —
@@ -913,7 +916,9 @@ device attributes.
 
 An app that sets its own `telemetries` without `'errors'` still gets RUM's
 error plugin, with its own capture off: `recordError` and
-`mirrorErrorsToRum` go through it, and RUM rejects them without it.
+`mirrorErrorsToRum` go through it, and RUM rejects them without it. One
+the app loads itself through `eventPluginsToLoad` is used instead — RUM
+can't hold two.
 
 ### From events to metrics
 
@@ -2097,20 +2102,21 @@ in browse mode keep letter keys for their own navigation; there, open it
 from a button that calls `open()`.
 
 It opens where it was last — a dialog the first time — and never blocks the
-app, so you can watch events arrive. With it open, the shortcut brings focus
-back to it from the app — to its search field — and closes it when focus is
-already inside, outside a text field.
+app, so you can watch events arrive. Focus goes to the inspector itself,
+not its search field, which is a Tab away, so the shortcut closes it next.
+With it open, the shortcut brings focus back to it from the app, and closes
+it when focus is already inside, outside a text field.
 
 #### Where it opens
 
 The **Dock** buttons at its top right move it, like Chrome DevTools' dock
 side, and the choice is remembered in this browser:
 
-| Dock                | What you get                                                                                                                                                                                                                   |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Dialog (default)    | A non-modal dialog on the right, half the screen wide (at least 40rem, or nearly all of a small screen). Draggable, resizable and maximizable, with a Transparency slider. Escape closes it.                                   |
-| Separate window     | Its own browser window, which it fills: 1200×800 the first time, then wherever it was last. Closing the window closes the inspector, and so does reloading the app.                                                            |
-| Left, right, bottom | A pane beside or below the app, which moves aside to make room. Drag its inner edge, or focus it and use the arrow keys, to resize it between 30rem (12rem at the bottom) and 80% of the screen; each side remembers its size. |
+| Dock                | What you get                                                                                                                                                                                                                                       |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Dialog (default)    | A non-modal dialog on the right, half the screen wide, between 40rem (or nearly all of a small screen) and 64rem. Draggable, resizable and maximizable, with a Transparency slider. Escape inside it closes it; elsewhere, Escape stays the app's. |
+| Separate window     | Its own browser window, which it fills: 1200×800 the first time, then wherever it was last. Closing the window closes the inspector, and so does reloading the app.                                                                                |
+| Left, right, bottom | A pane beside or below the app, which moves aside to make room. Drag its inner edge, or focus it and use the arrow keys, to resize it between 30rem (12rem at the bottom) and 80% of the screen; each side remembers its size.                     |
 
 Moving it keeps everything captured, the filters and the pause; pages and
 expanded rows start afresh.
@@ -2268,6 +2274,10 @@ each marked with `↪` and the fragment's name.
 | `maxPayloadCharsInView` | `262144` (256 × 1024)             | A payload whose JSON is longer is shown truncated to its first `maxPayloadCharsInView` characters, at most 65,536; downloads stay complete |
 | `captureBeforeOpen`     | `0`                               | Events of each kind kept from the app's start, for the popup to show on opening; at most `maxEventsPerSection`, and copied from startup    |
 
+An option left `undefined` keeps its default, as does a count that isn't a
+usable number — negative, `NaN`, or `0` for `maxEventsPerSection`; a fraction
+is rounded down. A config read from the environment can't stop the app.
+
 Characters here are UTF-16 code units (JavaScript's `length`), not bytes: the
 limit protects rendering, which costs by the length of the text. A cut never
 splits a surrogate pair.
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 8eb1c34..6bdd347 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -28,6 +28,11 @@ npm install aws-rum-web   # only for the AWS RUM sink
 
 Requires Angular 21 or 22 and RxJS 7.8.
 
+**Upgrading with an older cps-ui-kit:** the Event Inspector needs cps-ui-kit
+21.32 or later (or 22). npm checks that range whenever cps-ui-kit is
+installed, so an app on an older version can't install this release until it
+upgrades cps-ui-kit, even if it never uses the Inspector.
+
 ## Setup
 
 ```ts
@@ -422,7 +427,8 @@ TestBed.configureTestingModule({
 - RUM's own telemetry defaults to errors, performance and same-origin HTTP;
   set `telemetries` in the RUM config to change it. Without `'errors'`, the
   sink still loads RUM's error plugin, capturing nothing by itself, because
-  `mirrorErrorsToRum` needs it.
+  `mirrorErrorsToRum` needs it — unless the app loads one itself through
+  `eventPluginsToLoad`.
 
 ## License
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 3e38cb2..321ff3b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -27,7 +27,7 @@ class FakeDialogs {
   containsFocus = false;
   readonly instance = {
     containsFocus: () => this.containsFocus,
-    focusSearch: jest.fn()
+    focusInspector: jest.fn()
   };
 
   readonly close = jest.fn(() => this.destroyed.next());
@@ -126,7 +126,7 @@ describe('UwtEventInspectorService', () => {
     expect(dialogs.opened[0].config).toMatchObject({
       modal: false,
       ariaLabel: 'Event Inspector',
-      closeOnEscape: true,
+      closeOnEscape: false,
       styleClass: 'uwt-inspector-dialog'
     });
     expect(event.defaultPrevented).toBe(true);
@@ -173,11 +173,11 @@ describe('UwtEventInspectorService', () => {
   it('should bring focus back to an open popup, and close it from inside', () => {
     create().install();
     press();
-    dialogs.instance.focusSearch.mockClear();
+    dialogs.instance.focusInspector.mockClear();
 
     dialogs.containsFocus = false;
     press();
-    expect(dialogs.instance.focusSearch).toHaveBeenCalledTimes(1);
+    expect(dialogs.instance.focusInspector).toHaveBeenCalledTimes(1);
     expect(dialogs.close).not.toHaveBeenCalled();
 
     dialogs.containsFocus = true;
@@ -365,7 +365,8 @@ describe('UwtEventInspectorService', () => {
     press();
     expect(pane()?.contains(document.activeElement)).toBe(true);
 
-    press();
+    // Pressed where focus is, not on the page: in a field it would type.
+    press(undefined, document.activeElement!);
     expect(service.isOpen()).toBe(false);
   });
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index aa3f980..22c4113 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -279,7 +279,9 @@ export class UwtEventInspectorService {
         draggable: true,
         resizable: true,
         maximizable: true,
-        closeOnEscape: true,
+        // The dialog's own Escape works anywhere on the page; the inspector
+        // closes on Escape from inside it instead.
+        closeOnEscape: false,
         // Docked right at half the screen, so the application stays
         // visible and clickable beside it, but never narrower than 40rem
         // (nearly all of a small screen), so the tables have room;
@@ -288,14 +290,16 @@ export class UwtEventInspectorService {
         width: 'clamp(min(40rem, 96vw), 50vw, 64rem)',
         height: '88vh',
         minWidth: 'min(22rem, 96vw)',
-        autoFocus: '.uwt-inspector-search input',
+        // The inspector itself, not its search field, where the shortcut
+        // types; see focusInspector().
+        autoFocus: 'uwt-inspector',
         // Hooks the title's alignment; see the inspector's styles.
         styleClass: 'uwt-inspector-dialog'
       }
     );
     const host: UwtInspectorHost = {
       dock: 'dialog',
-      focus: () => ref.componentInstance?.focusSearch(),
+      focus: () => ref.componentInstance?.focusInspector(),
       containsFocus: () => !!ref.componentInstance?.containsFocus(),
       destroy: () => ref.close()
     };
@@ -316,7 +320,7 @@ export class UwtEventInspectorService {
     ref.changeDetectorRef.detectChanges();
     return {
       dock: side,
-      focus: () => ref.instance.content().focusSearch(),
+      focus: () => ref.instance.content().focusInspector(),
       containsFocus: () => ref.instance.content().containsFocus(),
       // Destroying the view detaches it from the app, unless the app, being
       // destroyed, already has: detaching it here would warn (NG0406).
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
index 3bb14ab..7da784f 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
@@ -237,6 +237,19 @@ describe('UwtInspectorTimelineComponent', () => {
       return { log, error };
     }
 
+    it('should keep an open row, and the focus in it, as events arrive', () => {
+      publish(1);
+      const [{ event }] = store.filtered();
+      open(event.sequence);
+      const button = buttonIn(event.sequence, 'Event name: needle')!;
+      button.focus();
+
+      publish(1);
+
+      expect(button.isConnected).toBe(true);
+      expect(document.activeElement).toBe(button);
+    });
+
     it('should filter by one of its values, once', () => {
       publish(1);
       const [{ event }] = store.filtered();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
index c12d83b..475e7b4 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
@@ -21,6 +21,7 @@ import {
   CpsTableComponent
 } from 'cps-ui-kit';
 import {
+  UwtInspectorEntry,
   UwtInspectorKindFilter,
   UwtInspectorSectionId
 } from '../uwt-inspector.models/uwt-inspector.models';
@@ -36,7 +37,11 @@ import {
   uwtInspectorEventsNoun,
   UwtInspectorExporter
 } from '../uwt-inspector-export/uwt-inspector-exporter';
-import { UwtInspectorFilterBy, uwtInspectorRow } from './uwt-inspector-rows';
+import {
+  UwtInspectorFilterBy,
+  UwtInspectorRow,
+  uwtInspectorRow
+} from './uwt-inspector-rows';
 
 /** The kind toggle's labels. */
 const KIND_LABEL: Record<UwtInspectorSectionId, string> = {
@@ -94,8 +99,22 @@ export class UwtInspectorTimelineComponent {
     ];
   });
 
+  /**
+   * Each entry's row, made once: the table keeps a row's elements only while
+   * it gets the same object, so a new one would redraw it as events arrive,
+   * taking the focus and an open payload with it.
+   */
+  private readonly rowOf = new WeakMap<UwtInspectorEntry, UwtInspectorRow>();
+
   protected readonly rows = computed(() =>
-    this.store.filtered().map(uwtInspectorRow)
+    this.store.filtered().map((entry) => {
+      let row = this.rowOf.get(entry);
+      if (!row) {
+        row = uwtInspectorRow(entry);
+        this.rowOf.set(entry, row);
+      }
+      return row;
+    })
   );
 
   /**
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 10d9151..8941aa7 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -111,7 +111,7 @@ export function uwtOpenInspectorWindow(
     dock: 'window',
     focus: () => {
       popup.focus();
-      ref.instance.focusSearch();
+      ref.instance.focusInspector();
     },
     containsFocus: () => doc.hasFocus(),
     destroy: () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.spec.ts
new file mode 100644
index 0000000..dc98197
--- /dev/null
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.spec.ts
@@ -0,0 +1,49 @@
+import { UWT_DEFAULT_INSPECTOR_SHORTCUTS } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
+import { UWT_DEFAULT_INSPECTOR_CONFIG } from '../uwt-inspector-store/uwt-inspector-store';
+import { uwtInspectorConfig } from './uwt-inspector.providers';
+
+describe('uwtInspectorConfig', () => {
+  it('should lay the overrides over the defaults', () => {
+    const shortcuts = [{ code: 'F9' }];
+
+    expect(
+      uwtInspectorConfig({ shortcuts, maxEventsPerSection: 50, enabled: false })
+    ).toEqual({
+      ...UWT_DEFAULT_INSPECTOR_CONFIG,
+      shortcuts,
+      maxEventsPerSection: 50,
+      enabled: false
+    });
+  });
+
+  it('should keep the default for an option left undefined', () => {
+    expect(
+      uwtInspectorConfig({
+        enabled: undefined,
+        shortcuts: undefined,
+        maxEventsPerSection: undefined,
+        captureBeforeOpen: undefined
+      })
+    ).toEqual({
+      ...UWT_DEFAULT_INSPECTOR_CONFIG,
+      shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS
+    });
+  });
+
+  it('should take counts as whole numbers, keeping the default for one it cannot use', () => {
+    expect(
+      uwtInspectorConfig({
+        maxEventsPerSection: 2.5,
+        captureBeforeOpen: -1,
+        maxPayloadCharsInView: Number.NaN
+      })
+    ).toMatchObject({
+      maxEventsPerSection: 2,
+      captureBeforeOpen: UWT_DEFAULT_INSPECTOR_CONFIG.captureBeforeOpen,
+      maxPayloadCharsInView: UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView
+    });
+    expect(uwtInspectorConfig({ maxEventsPerSection: 0 })).toMatchObject({
+      maxEventsPerSection: UWT_DEFAULT_INSPECTOR_CONFIG.maxEventsPerSection
+    });
+  });
+});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
index 7ab6100..323594e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.providers/uwt-inspector.providers.ts
@@ -12,6 +12,37 @@ import { UWT_DEFAULT_INSPECTOR_CONFIG } from '../uwt-inspector-store/uwt-inspect
 import { UWT_DEFAULT_INSPECTOR_SHORTCUTS } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
 import { UwtEventInspectorService } from '../uwt-event-inspector.service/uwt-event-inspector.service';
 
+/** A whole number of at least `min`, or `undefined` to keep the default. */
+function count(value: unknown, min: number): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) && value >= min
+    ? Math.floor(value)
+    : undefined;
+}
+
+/**
+ * The config in effect: the app's overrides laid over the defaults, except
+ * one left `undefined`, or a count that isn't a usable number, which keeps
+ * its default rather than break the app.
+ */
+export function uwtInspectorConfig(
+  config: Partial<UwtEventInspectorConfig>
+): UwtEventInspectorConfig {
+  const overrides: Partial<UwtEventInspectorConfig> = {
+    ...config,
+    shortcuts: Array.isArray(config.shortcuts) ? config.shortcuts : undefined,
+    maxEventsPerSection: count(config.maxEventsPerSection, 1),
+    maxPayloadCharsInView: count(config.maxPayloadCharsInView, 0),
+    captureBeforeOpen: count(config.captureBeforeOpen, 0)
+  };
+  return {
+    ...UWT_DEFAULT_INSPECTOR_CONFIG,
+    shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
+    ...(Object.fromEntries(
+      Object.entries(overrides).filter(([, value]) => value !== undefined)
+    ) as Partial<UwtEventInspectorConfig>)
+  };
+}
+
 /**
  * Adds the Event Inspector: an in-app window showing, live,
  * every BI, scenario and log event this app hands to its destinations.
@@ -47,11 +78,7 @@ export function provideUwtEventInspector(
   return makeEnvironmentProviders([
     {
       provide: UWT_EVENT_INSPECTOR_CONFIG,
-      useValue: {
-        ...UWT_DEFAULT_INSPECTOR_CONFIG,
-        shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS,
-        ...config
-      }
+      useValue: uwtInspectorConfig(config)
     },
     provideAppInitializer(() => {
       inject(UwtEventInspectorService).install();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 8cf06a3..004dc0e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -561,6 +561,40 @@ describe('UwtInspectorComponent', () => {
     expect(controls.close).toHaveBeenCalledTimes(1);
   });
 
+  it('should take focus itself, not to a field, where the shortcut types', () => {
+    fixture.componentInstance.focusInspector();
+
+    expect(document.activeElement).toBe(el());
+    expect(el().tabIndex).toBe(-1);
+  });
+
+  it('should close the dialog on Escape from inside it, not while a list in it is open', () => {
+    const controls = {
+      setDock: jest.fn(),
+      close: jest.fn(),
+      panesFit: signal(true)
+    };
+    TestBed.inject(UwtInspectorSession).controls = controls;
+    const search = el().querySelector('.uwt-inspector-search input')!;
+    const escape = () =>
+      search.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+      );
+
+    search.setAttribute('aria-expanded', 'true');
+    escape();
+    expect(controls.close).not.toHaveBeenCalled();
+
+    search.removeAttribute('aria-expanded');
+    escape();
+    expect(controls.close).toHaveBeenCalledTimes(1);
+
+    fixture.componentRef.setInput('dock', 'right');
+    fixture.detectChanges();
+    escape();
+    expect(controls.close).toHaveBeenCalledTimes(1);
+  });
+
   it('should offer no pane when the app has no room for one', () => {
     TestBed.inject(UwtInspectorSession).controls = {
       setDock: jest.fn(),
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 3ba4ab8..2db0922 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -80,7 +80,12 @@ const ANNOUNCE_EVERY_MS = 10_000;
     UwtInspectorExporter
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { '[class.uwt-inspector--framed]': 'framed()' },
+  host: {
+    // Focusable, but not in the tab order: see focusInspector().
+    tabindex: '-1',
+    '[class.uwt-inspector--framed]': 'framed()',
+    '(keydown.escape)': 'onEscape($event)'
+  },
   templateUrl: './uwt-inspector.component.html',
   styleUrl: './uwt-inspector.component.scss'
 })
@@ -167,12 +172,13 @@ export class UwtInspectorComponent {
     return this.frame().contains(this.document.activeElement);
   }
 
-  /** Moves focus to the search field. */
-  focusSearch(): void {
-    const input = this.host.nativeElement.querySelector<HTMLInputElement>(
-      '.uwt-inspector-search input'
-    );
-    (input ?? this.frame()).focus();
+  /**
+   * Moves focus to the inspector itself, not to a field, where the shortcut
+   * types: so the shortcut closes it next. Not to cps-dialog's own frame
+   * either, whose focus ring covers the dialog and takes its clicks.
+   */
+  focusInspector(): void {
+    this.host.nativeElement.focus();
   }
 
   protected setDock(dock: UwtInspectorDock): void {
@@ -183,6 +189,22 @@ export class UwtInspectorComponent {
     this.session.controls?.close();
   }
 
+  /**
+   * Escape closes the dialog, but only from inside it — it isn't modal, and
+   * the app's own controls use Escape too — and not while one of its lists
+   * or menus is open, which Escape closes first.
+   */
+  protected onEscape(event: Event): void {
+    const target = event.target as Element | null;
+    if (
+      this.dock() === 'dialog' &&
+      !event.defaultPrevented &&
+      !target?.closest?.('[aria-expanded="true"]')
+    ) {
+      this.close();
+    }
+  }
+
   protected setPaused(paused: boolean): void {
     this.store.setPaused(paused);
     this.announce(
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
index 200eeb9..6ee4820 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
@@ -497,6 +497,20 @@ describe('UwtRumTelemetrySink', () => {
       });
     });
 
+    it('should not add a second error plugin when the app loads its own, which RUM would reject', async () => {
+      const errors = { getPluginId: () => 'com.amazonaws.rum.js-error' };
+      configure({
+        loadImpl: async () =>
+          bootstrap({ telemetries: ['http'], eventPluginsToLoad: [errors] })
+      });
+      await sink.init();
+
+      expect(AwsRumCtor.mock.calls[0][3]).toMatchObject({
+        telemetries: ['http'],
+        eventPluginsToLoad: [errors]
+      });
+    });
+
     it('should omit every SDK-default-mirroring field entirely when unset, not send it as undefined', async () => {
       await sink.init();
 
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
index b364bfe..299e7c8 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
@@ -232,18 +232,28 @@ function withoutUnsetOptions(
   });
 }
 
+/** The id of RUM's error plugin, `JsErrorPlugin`, however it is loaded. */
+const ERROR_PLUGIN_ID = 'com.amazonaws.rum.js-error';
+
 /**
- * The app's telemetries, plus RUM's error plugin when they leave it out.
- * `recordError` goes through that plugin — RUM rejects it otherwise — so it
- * is added with its own capture of unhandled errors switched off. RUM reads
- * names in any case, and a second one would make it throw.
+ * The app's telemetries, plus RUM's error plugin when neither they nor the
+ * app's own `eventPluginsToLoad` have it. `recordError` goes through that
+ * plugin — RUM rejects it otherwise — so it is added with its own capture of
+ * unhandled errors switched off. RUM reads names in any case, and a second
+ * one would make it throw.
  */
 function withErrorPlugin(
-  telemetries: NonNullable<UwtRumAppMonitorConfig['telemetries']>
+  telemetries: NonNullable<UwtRumAppMonitorConfig['telemetries']>,
+  plugins: UwtRumAppMonitorConfig['eventPluginsToLoad']
 ): UwtRumAppMonitorConfig['telemetries'] {
   const named = (t: (typeof telemetries)[number]) =>
     String(Array.isArray(t) ? t[0] : t).toLowerCase();
-  return telemetries.some((t) => named(t) === 'errors')
+  const loaded = (plugins ?? []).some(
+    (p) =>
+      (p as { getPluginId?: () => unknown } | null)?.getPluginId?.() ===
+      ERROR_PLUGIN_ID
+  );
+  return loaded || telemetries.some((t) => named(t) === 'errors')
     ? telemetries
     : [...telemetries, ['errors', { ignore: () => true }]];
 }
@@ -704,7 +714,8 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
               'errors',
               'performance',
               ['http', { addXRayTraceIdHeader: [sameOrigin] }]
-            ])
+            ]),
+        config.eventPluginsToLoad
       ),
 
       ...(config.client != null ? { client: config.client } : {}),

From ce9234223241ad1b77a947e334ba2e5f31948f43 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Mon, 9 Nov 2026 13:41:46 +0100
Subject: [PATCH 26/51] fix: inspector copy and focus, quiet pause notice; lab
 keeps startup options, ticks only what arrived

---
 README.md                                     |  4 ++-
 playwright/fragment.spec.ts                   | 14 +++++---
 playwright/frame.spec.ts                      | 32 ++++++++++++++++++-
 playwright/settings.spec.ts                   |  8 ++++-
 playwright/wire.spec.ts                       | 13 ++++++++
 .../uwt-inspector-filter-bar.component.html   |  2 +-
 ...uwt-inspector-filter-bar.component.spec.ts | 19 +++++++++--
 .../uwt-inspector-filter-bar.component.ts     | 21 +++++++++---
 .../uwt-inspector-json.component.spec.ts      | 31 ++++++++++++++++++
 .../uwt-inspector-json.component.ts           | 10 +++++-
 .../uwt-inspector-timeline.component.spec.ts  | 13 ++++++--
 .../uwt-inspector-timeline.component.ts       | 10 ++++++
 .../uwt-inspector.component.html              |  7 ++--
 .../uwt-inspector.component.spec.ts           | 16 ++++++++--
 .../uwt-inspector/uwt-inspector.component.ts  | 17 ++++++++++
 projects/watchtower-lab/server/lab-backend.ts | 15 +++++++++
 projects/watchtower-lab/server/server.ts      |  9 ++++++
 .../src/lab/lab-results.component.ts          | 15 +++++----
 .../src/shell/shell.component.ts              |  1 +
 19 files changed, 227 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index fc7a46b..48775fe 100644
--- a/README.md
+++ b/README.md
@@ -90,7 +90,9 @@ differently for the next one, its chip says so: `broker: ok → null after
 reload`. On a narrow screen, or beside a docked pane, the chips fold behind
 **Run settings**, and the page list behind **Pages**.
 
-Options, read once at startup like an app's configuration:
+Options, read once at startup like an app's configuration, and kept in the
+address from the start page and through the page links, so a reload keeps
+them too:
 
 | Query                   | Effect                                                                                        |
 | ----------------------- | --------------------------------------------------------------------------------------------- |
diff --git a/playwright/fragment.spec.ts b/playwright/fragment.spec.ts
index feef276..5fd82db 100644
--- a/playwright/fragment.spec.ts
+++ b/playwright/fragment.spec.ts
@@ -96,9 +96,16 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
 }
 
 test('the fragment on its own, with no shell, carries on and sends nothing', async ({
-  page,
-  backend
+  page
 }) => {
+  // Its own requests, not the backend's: a page that closed before this
+  // test may still be sending.
+  const sent: string[] = [];
+  page.on('request', (r) => {
+    if (r.method() === 'POST') {
+      sent.push(r.url());
+    }
+  });
   await page.goto('/fragment-frame/');
   await expect(page.locator('h1')).toHaveText('lab-fragment');
   await press(page, 'Track a BI event');
@@ -106,6 +113,5 @@ test('the fragment on its own, with no shell, carries on and sends nothing', asy
 
   await page.waitForTimeout(2000);
   await expect(page.locator('p').first()).toContainText('Session — · user —');
-  expect(await backend.rum()).toEqual([]);
-  expect(await backend.logs()).toEqual([]);
+  expect(sent).toEqual([]);
 });
diff --git a/playwright/frame.spec.ts b/playwright/frame.spec.ts
index d90a2a4..9e55c6d 100644
--- a/playwright/frame.spec.ts
+++ b/playwright/frame.spec.ts
@@ -39,6 +39,25 @@ test('a page lists what it sent beside its buttons, ticked once it arrives, and
   expect(column.y).toBeLessThan(button.y + button.height);
 });
 
+test('an error is ticked once it arrives, not for an earlier one with the same message', async ({
+  page
+}) => {
+  await openLab(page, 'logging');
+  await sessionStarted(page);
+  const error = page.locator('lab-results li', {
+    hasText: 'Connection reset'
+  });
+  await press(page, 'error, with an Error');
+  await expect(error).toContainText('✓ received', { timeout: 10_000 });
+
+  // Now nothing leaves the page, so the same error is sent, never received.
+  await openLab(page, 'logging?destination=noop');
+  await press(page, 'error, with an Error');
+  await expect(error).toContainText('sent');
+  await page.waitForTimeout(3000);
+  await expect(error).not.toContainText('✓ received');
+});
+
 test('a narrower header folds its chips behind Run settings', async ({
   page
 }) => {
@@ -93,7 +112,18 @@ test('the status bar stays on one line, as label and value pairs', async ({
   ]) {
     await expect(status).toContainText(label);
   }
-  expect((await status.boundingBox())!.height).toBe(36);
+  await sessionStarted(page);
+  // Every pair on the one line, and inside the bar: the ids give way first.
+  const bar = (await status.boundingBox())!;
+  const pairs = await status
+    .locator('span')
+    .evaluateAll((spans) =>
+      spans.map((s) => s.getBoundingClientRect()).map((r) => [r.top, r.right])
+    );
+  for (const [top, right] of pairs) {
+    expect(top).toBeCloseTo(pairs[0][0], 0);
+    expect(right).toBeLessThanOrEqual(bar.x + bar.width + 0.5);
+  }
 });
 
 test('at phone width, no page is wider than the screen', async ({ page }) => {
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 6100e36..77c3d3c 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -316,11 +316,17 @@ test('a pattern that is not a RegExp is left out with a warning, and the lab sti
   );
 });
 
-test('applying an overlay keeps the other startup options, which in-app links drop', async ({
+test('the start page keeps the startup options', async ({ page }) => {
+  await page.goto('/?destination=noop');
+  await expect(page).toHaveURL(/\/scenarios\?destination=noop$/);
+});
+
+test('in-app links keep the startup options, and so does applying an overlay', async ({
   page
 }) => {
   await openLab(page, 'bi?destination=noop');
   await navigate(page, 'Settings');
+  expect(new URL(page.url()).searchParams.get('destination')).toBe('noop');
   await page
     .getByRole('textbox', { name: '?config= (JSON)' })
     .fill('{ "bi": { "dedupWindowMs": 0 } }');
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
index 1bad52b..a3d6d5d 100644
--- a/playwright/wire.spec.ts
+++ b/playwright/wire.spec.ts
@@ -60,6 +60,19 @@ test('Settings sets the broker, all at once with Apply and reload; the header te
   );
 });
 
+test("another site's page can't change the mock backend", async ({
+  request,
+  backend
+}) => {
+  const res = await request.post('/__lab/broker-mode', {
+    data: { mode: 'null' },
+    headers: { Origin: 'https://elsewhere.example' }
+  });
+
+  expect(res.status()).toBe(403);
+  expect((await backend.state()).brokerMode).toBe('ok');
+});
+
 test('a broker overlay that is not JSON stops Apply, and sets nothing', async ({
   page,
   backend
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index d0f76c8..0b8f821 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -99,7 +99,7 @@
               [label]="chip.text"
               [closable]="true"
               [closeButtonAriaLabel]="'Remove filter ' + chip.text"
-              (closed)="store.removeFilter(chip.id)">
+              (closed)="remove(chip.id)">
             </cps-chip>
           </li>
         }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
index 6db0e94..db9e4a0 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
@@ -22,6 +22,10 @@ describe('UwtInspectorFilterBarComponent', () => {
       }[];
     };
   const el = () => fixture.nativeElement as HTMLElement;
+  const addFilter = () =>
+    Array.from(el().querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === 'Add filter'
+    );
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -59,7 +63,7 @@ describe('UwtInspectorFilterBarComponent', () => {
 
     expect(bar().builderOpen()).toBe(false);
     expect(el().querySelector('[aria-label="New filter"]')).toBeNull();
-    expect(document.activeElement?.textContent?.trim()).toBe('Add filter');
+    expect(document.activeElement).toBe(addFilter());
 
     bar().builderOpen.set(true);
     fixture.detectChanges();
@@ -109,6 +113,7 @@ describe('UwtInspectorFilterBarComponent', () => {
     bar().value.set('dark');
     bar().add();
     fixture.detectChanges();
+    TestBed.tick();
 
     expect(store.filters().fields).toEqual([
       expect.objectContaining({
@@ -124,9 +129,13 @@ describe('UwtInspectorFilterBarComponent', () => {
       'Remove filter metadata.theme equals "dark"'
     );
 
+    close.focus();
     close.click();
     fixture.detectChanges();
+    TestBed.tick();
     expect(store.filters().fields).toHaveLength(0);
+    // The chip gone, focus is on Add filter, not the page.
+    expect(document.activeElement).toBe(addFilter());
   });
 
   it('should clear the text and every filter together', () => {
@@ -136,9 +145,13 @@ describe('UwtInspectorFilterBarComponent', () => {
 
     const clearBtn = Array.from(
       (fixture.nativeElement as HTMLElement).querySelectorAll('button')
-    ).find((b) => b.textContent?.trim() === 'Clear filters');
-    clearBtn?.click();
+    ).find((b) => b.textContent?.trim() === 'Clear filters')!;
+    clearBtn.focus();
+    clearBtn.click();
+    fixture.detectChanges();
+    TestBed.tick();
 
     expect(store.filters()).toEqual({ text: '', fields: [] });
+    expect(document.activeElement).toBe(addFilter());
   });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
index 05dc6da..c81f859 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
@@ -143,6 +143,22 @@ export class UwtInspectorFilterBarComponent {
     this.path.set('');
     this.operator.set('contains');
     this.value.set('');
+    this.focusAddFilter();
+  }
+
+  protected remove(id: string): void {
+    this.store.removeFilter(id);
+    this.focusAddFilter();
+  }
+
+  protected clearAll(): void {
+    clearTimeout(this.searchTimer);
+    this.store.clearFilters();
+    this.focusAddFilter();
+  }
+
+  /** Focus to Add filter, as the control just used goes away. */
+  private focusAddFilter(): void {
     afterNextRender(
       () =>
         (this.addFilterButton()?.nativeElement as HTMLElement | undefined)
@@ -151,9 +167,4 @@ export class UwtInspectorFilterBarComponent {
       { injector: this.injector }
     );
   }
-
-  protected clearAll(): void {
-    clearTimeout(this.searchTimer);
-    this.store.clearFilters();
-  }
 }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
index e6efb86..f07bda1 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.spec.ts
@@ -1,3 +1,4 @@
+import { DOCUMENT } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UwtInspectorJsonComponent } from './uwt-inspector-json.component';
@@ -119,4 +120,34 @@ describe('UwtInspectorJsonComponent', () => {
     expect(writeText).toHaveBeenCalledWith('{\n  "a": 1\n}');
     expect(fixture.nativeElement.textContent).toContain('Payload copied');
   });
+
+  it("should copy through its own window's clipboard, as a separate window has its own", async () => {
+    const frame = document.body.appendChild(document.createElement('iframe'));
+    const own = jest.fn(() => Promise.resolve());
+    const app = jest.fn(() => Promise.resolve());
+    Object.assign(frame.contentWindow!.navigator, {
+      clipboard: { writeText: own }
+    });
+    Object.assign(navigator, { clipboard: { writeText: app } });
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [UwtInspectorJsonComponent, NoopAnimationsModule]
+    });
+    TestBed.overrideComponent(UwtInspectorJsonComponent, {
+      add: {
+        providers: [{ provide: DOCUMENT, useValue: frame.contentDocument }]
+      }
+    });
+    const inWindow = TestBed.createComponent(UwtInspectorJsonComponent);
+    inWindow.componentRef.setInput('value', { a: 1 });
+    inWindow.detectChanges();
+
+    await (
+      inWindow.componentInstance as unknown as { copy(): Promise<void> }
+    ).copy();
+
+    expect(own).toHaveBeenCalledWith('{\n  "a": 1\n}');
+    expect(app).not.toHaveBeenCalled();
+    frame.remove();
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
index c9b4698..bda08fa 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-json/uwt-inspector-json.component.ts
@@ -2,6 +2,8 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  DOCUMENT,
+  inject,
   input,
   signal
 } from '@angular/core';
@@ -85,9 +87,15 @@ export class UwtInspectorJsonComponent {
     this.truncated() ? cutAt(this.full(), this.viewChars()) : this.full()
   );
 
+  /**
+   * The inspector's own window: in a separate window, the app's clipboard
+   * refuses, as the app's page doesn't have focus.
+   */
+  private readonly view = inject(DOCUMENT).defaultView;
+
   protected async copy(): Promise<void> {
     try {
-      await navigator.clipboard.writeText(this.full());
+      await (this.view ?? window).navigator.clipboard.writeText(this.full());
       this.copied.set('copied');
     } catch {
       this.copied.set('failed');
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
index 7da784f..3ff6c59 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
@@ -177,11 +177,18 @@ describe('UwtInspectorTimelineComponent', () => {
     publish(30);
     expect(el().textContent).toContain('25 new at the top of the list.');
 
-    Array.from(el().querySelectorAll('button'))
-      .find((b) => b.textContent?.trim() === 'Go to newest')
-      ?.click();
+    const newest = Array.from(el().querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === 'Go to newest'
+    )!;
+    newest.focus();
+    newest.click();
     fixture.detectChanges();
+    TestBed.tick();
     expect(ui().first()).toBe(0);
+    // Its notice gone, focus is on the newest event, not the page.
+    expect(document.activeElement?.getAttribute('data-testid')).toMatch(
+      /^cps-table-row-expand-btn-/
+    );
   });
 
   describe('an open row', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
index 475e7b4..3017e49 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
@@ -249,8 +249,18 @@ export class UwtInspectorTimelineComponent {
     );
   }
 
+  /** To the first page, whose notice then goes: focus to the newest event. */
   protected goToNewest(): void {
     this.first.set(0);
+    afterNextRender(
+      () =>
+        this.host.nativeElement
+          .querySelector<HTMLElement>(
+            '[data-testid^="cps-table-row-expand-btn-"]'
+          )
+          ?.focus(),
+      { injector: this.injector }
+    );
   }
 
   protected toggleExport(menu: CpsMenuComponent, event: Event): void {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index 829a99f..0fc2ba0 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -57,6 +57,7 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
         </cps-slider>
       }
       <cps-switch
+        #pauseSwitch
         label="Pause live updates"
         [value]="store.paused()"
         (valueChanged)="setPaused($event)">
@@ -73,7 +74,9 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
   </div>
 
   @if (store.paused() && store.newWhilePaused() > 0) {
-    <div class="uwt-inspector__paused" role="status">
+    <!-- No live region: its count changes with each event, and resuming
+         announces what arrived. -->
+    <div class="uwt-inspector__paused">
       <span
         >{{ store.newWhilePaused() }} new event{{
           store.newWhilePaused() === 1 ? '' : 's'
@@ -84,7 +87,7 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
         type="borderless"
         size="xsmall"
         label="Resume"
-        (clicked)="setPaused(false)">
+        (clicked)="resume()">
       </cps-button>
     </div>
   }
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 004dc0e..2c39e6d 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -315,10 +315,22 @@ describe('UwtInspectorComponent', () => {
     settle();
     expect(bodyRows()).toBe(1);
     expect(text()).toContain('1 new event held back while paused.');
-
-    ui().setPaused(false);
+    // Not a live region: its count changes with every event, and resuming
+    // announces what arrived meanwhile.
+    expect(
+      el().querySelector('.uwt-inspector__paused')?.getAttribute('role')
+    ).toBeNull();
+
+    const resume = Array.from(el().querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === 'Resume'
+    )!;
+    resume.focus();
+    resume.click();
     fixture.detectChanges();
+    TestBed.tick();
     expect(bodyRows()).toBe(2);
+    // The notice gone, focus is on the Pause switch, not the page.
+    expect(document.activeElement).toBe(el().querySelector('cps-switch input'));
   });
 
   it('should say when it was paused, as well as when capturing began', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 2db0922..3d5bc38 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -7,6 +7,7 @@ import {
   DestroyRef,
   ElementRef,
   inject,
+  Injector,
   input,
   signal,
   viewChild
@@ -152,6 +153,10 @@ export class UwtInspectorComponent {
 
   private readonly dialogLogo = viewChild('dialogLogo', { read: ElementRef });
 
+  private readonly pauseSwitch = viewChild('pauseSwitch', { read: ElementRef });
+
+  private readonly injector = inject(Injector);
+
   private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
 
   constructor() {
@@ -205,6 +210,18 @@ export class UwtInspectorComponent {
     }
   }
 
+  /** Resumes from the notice, which then goes: focus to the Pause switch. */
+  protected resume(): void {
+    this.setPaused(false);
+    afterNextRender(
+      () =>
+        (this.pauseSwitch()?.nativeElement as HTMLElement | undefined)
+          ?.querySelector('input')
+          ?.focus(),
+      { injector: this.injector }
+    );
+  }
+
   protected setPaused(paused: boolean): void {
     this.store.setPaused(paused);
     this.announce(
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index 9051540..4d8a5b7 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -214,6 +214,21 @@ function queryLogs(query: Request['query']): LogRecord[] {
 
 export const labBackend = Router();
 
+// Only the lab's own pages, and the suite, which sends no Origin, change its
+// state: another site's page could otherwise point RUM at its own endpoint.
+labBackend.use('/__lab', (req, res, next) => {
+  const origin = req.get('origin');
+  if (
+    req.method === 'POST' &&
+    origin &&
+    new URL(origin).host !== req.get('host')
+  ) {
+    res.status(403).end();
+    return;
+  }
+  next();
+});
+
 labBackend.get('/rum/init', (req, res) => {
   // Lab-only: what the broker was set to, for the header to show what this
   // page load got. A real broker sends nothing like it.
diff --git a/projects/watchtower-lab/server/server.ts b/projects/watchtower-lab/server/server.ts
index 0abdd01..279e648 100644
--- a/projects/watchtower-lab/server/server.ts
+++ b/projects/watchtower-lab/server/server.ts
@@ -20,6 +20,15 @@ const angularApp = new AngularNodeAppEngine();
 
 app.use(labBackend);
 app.use(labFragments);
+// The app's own catch-all redirect drops the query, and with it the startup
+// options (`?destination=`, `?config=`, …): the start page keeps them.
+app.get('/', (req, res) => {
+  const query = req.originalUrl.indexOf('?');
+  res.redirect(
+    302,
+    `/scenarios${query < 0 ? '' : req.originalUrl.slice(query)}`
+  );
+});
 app.use(
   express.static(browserDistFolder, {
     index: false,
diff --git a/projects/watchtower-lab/src/lab/lab-results.component.ts b/projects/watchtower-lab/src/lab/lab-results.component.ts
index 75db579..5782326 100644
--- a/projects/watchtower-lab/src/lab/lab-results.component.ts
+++ b/projects/watchtower-lab/src/lab/lab-results.component.ts
@@ -95,17 +95,20 @@ export class LabResultsComponent {
   private readonly arrived = computed(() => {
     const rum = this.wire.rum();
     const details = new Set(rum.map((e) => JSON.stringify(e.details)));
-    const errors = new Set(
-      rum
-        .filter((e) => e.type.endsWith('js_error_event'))
-        .map((e) => field(e.details, 'message'))
-    );
+    const errors = rum.filter((e) => e.type.endsWith('js_error_event'));
     const logs = new Set(this.wire.logs().map((r) => JSON.stringify(r)));
     return (event: UwtTelemetryObservedEvent): boolean =>
       event.destination === 'log-provider'
         ? logs.has(JSON.stringify(event.payload))
         : event.kind === 'error'
-          ? errors.has(field(event.payload, 'message'))
+          ? // Only its message is known, and an earlier error can share it:
+            // one that arrived after this one was sent.
+            errors.some(
+              (e) =>
+                field(e.details, 'message') ===
+                  field(event.payload, 'message') &&
+                Date.parse(e.receivedAt) >= Date.parse(event.capturedAt)
+            )
           : details.has(JSON.stringify(event.payload));
   });
 
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index f61626b..741300e 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -125,6 +125,7 @@ function inEffect(now?: string, next?: string): string {
                   <li>
                     <a
                       [routerLink]="page.path"
+                      queryParamsHandling="preserve"
                       routerLinkActive="active"
                       ariaCurrentWhenActive="page"
                       >{{ page.label }}</a

From ef368d582e671bdd9f016e1acce172028258b59e Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Mon, 9 Nov 2026 14:29:42 +0100
Subject: [PATCH 27/51] fix: low review findings: inspector open and focus edge
 cases, lab limits and checks, steadier tests

---
 README.md                                     | 35 ++++----
 package.json                                  |  2 +-
 playwright.config.ts                          |  4 +-
 playwright/a11y.spec.ts                       |  4 +-
 playwright/frame.spec.ts                      | 52 +++++++++++-
 playwright/inspector-tools.spec.ts            | 12 ++-
 playwright/lab.ts                             | 19 ++++-
 playwright/logging.spec.ts                    | 10 +--
 playwright/settings.spec.ts                   | 19 +++++
 playwright/wire.spec.ts                       | 26 +++++-
 projects/ngx-ui-watchtower/DESIGN.md          | 15 +++-
 .../lib/cps-slider/cps-slider.component.scss  | 10 +++
 .../uwt-event-inspector.service.spec.ts       | 56 ++++++++++++-
 .../uwt-event-inspector.service.ts            | 82 ++++++++++++++-----
 .../uwt-inspector-filter-bar.component.html   |  2 +-
 ...uwt-inspector-filter-bar.component.spec.ts | 20 +++++
 .../uwt-inspector-filter-bar.component.ts     |  8 ++
 .../uwt-inspector-filter.spec.ts              | 19 ++++-
 .../uwt-inspector-filter.ts                   | 30 ++++---
 .../uwt-inspector-pane.component.scss         | 14 ++++
 .../uwt-inspector-rows.spec.ts                | 16 ++++
 .../uwt-inspector-rows.ts                     | 23 +++++-
 .../uwt-inspector-timeline.component.spec.ts  | 13 +++
 .../uwt-inspector-timeline.component.ts       | 17 +++-
 .../uwt-inspector-window.spec.ts              | 11 +++
 .../uwt-inspector-window.ts                   | 40 +++++++--
 .../uwt-inspector.component.spec.ts           | 14 ++++
 .../uwt-inspector/uwt-inspector.component.ts  |  3 +-
 .../uwt-telemetry-monitor.models.ts           |  5 +-
 projects/watchtower-lab/server/lab-backend.ts | 69 ++++++++++++++--
 .../src/lab/lab-config-check.ts               |  5 +-
 .../src/lab/lab-results.component.ts          | 24 ++++--
 .../src/lab/lab-wire.service.ts               | 15 +++-
 .../src/shell/pages/settings.page.ts          | 40 ++++++++-
 .../src/shell/shell.component.ts              | 12 ++-
 projects/watchtower-lab/src/styles.scss       | 15 ++++
 36 files changed, 652 insertions(+), 109 deletions(-)

diff --git a/README.md b/README.md
index 48775fe..e05b6d7 100644
--- a/README.md
+++ b/README.md
@@ -47,21 +47,21 @@ The package is built to `dist/ngx-ui-watchtower`.
 
 ## Scripts
 
-| Script                  | What it does                                          |
-| ----------------------- | ----------------------------------------------------- |
-| `npm run build`         | Builds the package (production, partial compilation)  |
-| `npm run watch`         | Rebuilds on change (development)                      |
-| `npm run test`          | Runs the unit tests (Jest)                            |
-| `npm run test:coverage` | Runs the unit tests with coverage, as CI does         |
-| `npm run typecheck`     | Type-checks every library, spec and suite tsconfig    |
-| `npm run lint`          | ESLint, no warnings allowed                           |
-| `npm run format`        | Formats with Prettier                                 |
-| `npm run format:check`  | Checks formatting without writing                     |
-| `npm run lab`           | Starts the Watchtower Lab on http://localhost:4280    |
-| `npm run lab:build`     | Builds the lab's fragment and shell                   |
-| `npm run e2e`           | Builds the lab and runs the Playwright suite          |
-| `npm run e2e:ui`        | Opens the suite in Playwright's UI, on the last build |
-| `npm run smoke`         | Packs the library and builds an app from the tarball  |
+| Script                  | What it does                                           |
+| ----------------------- | ------------------------------------------------------ |
+| `npm run build`         | Builds the package (production, partial compilation)   |
+| `npm run watch`         | Rebuilds on change (development)                       |
+| `npm run test`          | Runs the unit tests (Jest)                             |
+| `npm run test:coverage` | Runs the unit tests with coverage, as CI does          |
+| `npm run typecheck`     | Type-checks every library, spec and suite tsconfig     |
+| `npm run lint`          | ESLint, no warnings allowed                            |
+| `npm run format`        | Formats with Prettier                                  |
+| `npm run format:check`  | Checks formatting without writing                      |
+| `npm run lab`           | Starts the Watchtower Lab on http://localhost:4280     |
+| `npm run lab:build`     | Builds the lab's fragment and shell                    |
+| `npm run e2e`           | Builds the lab and runs the Playwright suite           |
+| `npm run e2e:ui`        | Builds the lab, and opens the suite in Playwright's UI |
+| `npm run smoke`         | Packs the library and builds an app from the tarball   |
 
 ## Watchtower Lab
 
@@ -152,8 +152,9 @@ text, and checks its states under forced colours. Internal edge cases —
 timers longer than 24 days, giving up after five minutes, no Web Locks or
 storage, message validation, start-up errors — are left to the unit tests.
 
-It runs the built server on http://localhost:4390, beside `npm run lab`. The
-first time, download the browsers with
+It runs the built server on http://localhost:4390, beside `npm run lab`,
+starting its own each time: one already on that port stops it, rather than
+serving an older build. The first time, download the browsers with
 `npx playwright install chromium webkit`.
 
 ## Consumer smoke test
diff --git a/package.json b/package.json
index 005d36f..0940985 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lab": "node projects/watchtower-lab/server/dev.mjs",
     "lab:build": "ng build watchtower-lab-fragment && ng build watchtower-lab",
     "e2e": "npm run lab:build && playwright test",
-    "e2e:ui": "playwright test --ui",
+    "e2e:ui": "npm run lab:build && playwright test --ui",
     "smoke": "node projects/watchtower-consumer-smoke/smoke.mjs",
     "test": "ng test --project=ngx-ui-watchtower",
     "test:coverage": "ng test --project=ngx-ui-watchtower --coverage --coverage-reporters text-summary --coverage-reporters lcov --json --output-file=./coverage/report.json",
diff --git a/playwright.config.ts b/playwright.config.ts
index 471d448..14ba994 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -36,6 +36,8 @@ export default defineConfig({
     command: 'node dist/watchtower-lab/server/server.mjs',
     env: { PORT: '4390' },
     url: 'http://localhost:4390/__lab/state',
-    reuseExistingServer: !process.env.CI
+    // Never one already running: it would serve whatever build it started
+    // with, not the one just made.
+    reuseExistingServer: false
   }
 });
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index d5af772..e1eb723 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -91,7 +91,9 @@ test('the Event Inspector with events, rows open, a filter being built with its
   await expect(timeline).toContainText('Large payload: showing the first');
   await expect(timeline).toContainText('Mirrored from');
   // Past the new-row tint, so contrast is measured on the usual rows.
-  await page.waitForTimeout(3500);
+  await expect(page.locator('.uwt-inspector-timeline__fresh')).toHaveCount(0, {
+    timeout: 10_000
+  });
 
   expect(await violations(page, 'uwt-inspector-pane')).toEqual([]);
   // axe can't always settle contrast on striped rows; measured directly.
diff --git a/playwright/frame.spec.ts b/playwright/frame.spec.ts
index 9e55c6d..96f9d8e 100644
--- a/playwright/frame.spec.ts
+++ b/playwright/frame.spec.ts
@@ -1,4 +1,4 @@
-import { expect, openLab, press, sessionStarted, test } from './lab';
+import { expect, Locator, openLab, press, sessionStarted, test } from './lab';
 
 const PAGES = [
   'scenarios',
@@ -96,6 +96,56 @@ test('under 900px the nav folds behind a button naming the page', async ({
   await expect(fold).toContainText('Logging');
 });
 
+test('Escape folds the nav without taking focus from a field elsewhere', async ({
+  page
+}) => {
+  await page.setViewportSize({ width: 800, height: 700 });
+  await openLab(page, 'logging');
+  await page.getByRole('button', { name: /^Pages/ }).click();
+  const field = page.locator('lab-logging-page textarea').first();
+  await field.focus();
+
+  await page.keyboard.press('Escape');
+  await expect(page.locator('.lab-nav').getByRole('link').first()).toBeHidden();
+  await expect(field).toBeFocused();
+});
+
+test('on the narrowest phone, the header and Run settings stay on the screen', async ({
+  page,
+  backend
+}) => {
+  await backend.setTelemetries([
+    'errors',
+    'performance',
+    'interaction',
+    'http'
+  ]);
+  await page.setViewportSize({ width: 320, height: 700 });
+  await openLab(page, 'bi');
+  const right = async (locator: Locator) => {
+    const box = (await locator.boundingBox())!;
+    return box.x + box.width;
+  };
+
+  expect(await right(page.locator('.lab-header-button'))).toBeLessThanOrEqual(
+    320
+  );
+  await page.locator('.lab-run-settings > summary').click();
+  expect(
+    await right(page.locator('.lab-run-settings__panel'))
+  ).toBeLessThanOrEqual(320);
+});
+
+test('with the custom destination, what the page sent is ticked once its sink has it', async ({
+  page
+}) => {
+  await openLab(page, 'bi?destination=custom');
+  await press(page, 'Track a click');
+  await expect(
+    page.locator('lab-results li', { hasText: 'lab_button_clicked' })
+  ).toContainText('✓ received', { timeout: 10_000 });
+});
+
 test('the status bar stays on one line, as label and value pairs', async ({
   page
 }) => {
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
index 6e56c51..85e8fd9 100644
--- a/playwright/inspector-tools.spec.ts
+++ b/playwright/inspector-tools.spec.ts
@@ -160,7 +160,8 @@ test('pages 25 rows at a time, and offers the newest when more arrive', async ({
   // Once the burst is no longer new, so only the next event counts.
   await expect(events).not.toContainText('new at the top', { timeout: 5000 });
   await press(page, 'An unknown event type');
-  await expect(events).toContainText('1 new at the top of the list.');
+  // Exactly one: "11 new" would contain it too.
+  await expect(events).toContainText(/(^|\D)1 new at the top of the list\./);
   await events.getByRole('button', { name: 'Go to newest' }).click();
   await expect(rows(page).first()).toContainText('com.example.custom');
 });
@@ -346,6 +347,15 @@ test('in forced colours, the dock, the kind shown, Pause and solid buttons keep
   expect(await css(kinds.nth(1), 'background-color')).not.toBe(highlight);
   const knob = page.locator('uwt-inspector .cps-switch-slider');
   expect(parseFloat(await css(knob, 'border-top-width', '::before'))).toBe(7);
+  // The pane's edge shows focus, which its colours alone did.
+  const edge = page.getByRole('separator', {
+    name: 'Resize the Event Inspector'
+  });
+  await edge.focus();
+  // From the keyboard, as focus shows: one step each way, so no resize.
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('ArrowRight');
+  expect(await css(edge, 'outline-style')).toBe('solid');
 
   await page.getByRole('button', { name: 'Add filter' }).click();
   const add = page
diff --git a/playwright/lab.ts b/playwright/lab.ts
index 983c98e..df91754 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -85,22 +85,33 @@ export class LabBackend {
   }
 
   async reset(): Promise<void> {
-    await this.request.post('/__lab/reset');
+    await this.control('/__lab/reset');
   }
 
   /** How the broker answers the next `/rum/init`. */
   async setBrokerMode(mode: BrokerMode): Promise<void> {
-    await this.request.post('/__lab/broker-mode', { data: { mode } });
+    await this.control('/__lab/broker-mode', { mode });
   }
 
   /** Laid over the broker's app monitor config. */
   async setBrokerConfig(config: Record<string, unknown>): Promise<void> {
-    await this.request.post('/__lab/broker-config', { data: { config } });
+    await this.control('/__lab/broker-config', { config });
   }
 
   /** RUM's own telemetries the broker names; `null` for the library's default. */
   async setTelemetries(telemetries: Telemetry[] | null): Promise<void> {
-    await this.request.post('/__lab/telemetries', { data: { telemetries } });
+    await this.control('/__lab/telemetries', { telemetries });
+  }
+
+  /**
+   * Posts to a control route, and fails if it refuses: a refused reset or
+   * setting would leave the last test's, failing tests that come later.
+   */
+  private async control(path: string, data?: object): Promise<void> {
+    const response = await this.request.post(path, data ? { data } : {});
+    if (!response.ok()) {
+      throw new Error(`${path} answered ${response.status()}`);
+    }
   }
 }
 
diff --git a/playwright/logging.spec.ts b/playwright/logging.spec.ts
index 63f6aab..a28d8e1 100644
--- a/playwright/logging.spec.ts
+++ b/playwright/logging.spec.ts
@@ -12,14 +12,14 @@ test('records reach the log backend, and the noisy logger writes only warnings a
   await press(page, 'log');
   await press(page, 'log (dropped)');
   await press(page, 'warn (written)');
-  // Written last, so once it arrives the others have had their chance.
   await press(page, 'error, with an Error');
 
+  // Each record travels on its own request, so in any order.
   await expect
-    .poll(async () => (await backend.logs()).map((r) => r.level))
-    .toContain('error');
-  const written = (await backend.logs()).map((r) => `${r.logger}:${r.level}`);
-  expect(written.sort()).toEqual(['lab:error', 'lab:log', 'noisy:warn']);
+    .poll(async () =>
+      (await backend.logs()).map((r) => `${r.logger}:${r.level}`).sort()
+    )
+    .toEqual(['lab:error', 'lab:log', 'noisy:warn']);
 });
 
 test('an error record carries its context, metadata and error', async ({
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 77c3d3c..7622fd4 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -69,10 +69,29 @@ test('Settings checks the overlay against the library: no unknown setting, no wr
   await overlay.fill('{ "scenario": {} }');
   await press(page, 'Apply and reload');
   await expect(settings).toContainText(`"scenario" isn't a section`);
+
+  // Own settings only: what every object inherits is none.
+  await overlay.fill('{ "toString": {} }');
+  await press(page, 'Apply and reload');
+  await expect(settings).toContainText(`"toString" isn't a section`);
   // Never applied.
   await expect(page.locator('.lab-header')).not.toContainText('config:');
 });
 
+test('Settings checks types against the library, not a wrong value in effect', async ({
+  page
+}) => {
+  await openLab(page, 'settings', { bi: { dedupWindowMs: '500' } });
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+
+  await overlay.fill('{ "bi": { "dedupWindowMs": 600 } }');
+  await press(page, 'Apply and reload');
+  // Applied: the page reloads with it.
+  await expect
+    .poll(() => new URL(page.url()).searchParams.get('config'))
+    .toBe('{"bi":{"dedupWindowMs":600}}');
+});
+
 test('Settings controls write the common options into the overlay', async ({
   page
 }) => {
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
index a3d6d5d..cc13fbc 100644
--- a/playwright/wire.spec.ts
+++ b/playwright/wire.spec.ts
@@ -36,8 +36,13 @@ test('Settings sets the broker, all at once with Apply and reload; the header te
   // Past the lab's next poll of the backend, the draft is still there.
   await page.waitForTimeout(2000);
   await expect(overlay).toHaveValue('{ "sessionSampleRate": 0 }');
-  // Nothing is set until applied.
-  expect((await backend.state()).brokerMode).toBe('ok');
+  // Nothing is set until applied: not the mode, the list, or the overlay.
+  const { brokerMode, telemetries, brokerConfig } = await backend.state();
+  expect({ brokerMode, telemetries, brokerConfig }).toEqual({
+    brokerMode: 'ok',
+    telemetries: null,
+    brokerConfig: {}
+  });
 
   await press(page, 'Apply and reload');
   await expect(page.locator('.lab-header')).toContainText('broker: null');
@@ -60,6 +65,23 @@ test('Settings sets the broker, all at once with Apply and reload; the header te
   );
 });
 
+test('the mock backend keeps only what has the shape it stores', async ({
+  page,
+  request,
+  backend
+}) => {
+  await request.post('/appmonitors/x', {
+    data: { RumEvents: [{ id: 'no-type' }] }
+  });
+  await request.post('/api/logs', { data: ['not a record'] });
+  expect(await backend.rum()).toEqual([]);
+  expect(await backend.logs()).toEqual([]);
+
+  // Every page still reads it.
+  await openLab(page, 'wire');
+  await expect(page.locator('.lab-status')).toContainText('batches: 0');
+});
+
 test("another site's page can't change the mock backend", async ({
   request,
   backend
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 77ed8e1..0f91a9e 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2245,7 +2245,9 @@ app's start, it keeps up to that many events of each kind, which the popup
 shows on opening, with "capturing since" the start. They keep coming while
 the popup is closed; **Clear** empties them too. The cost is a copy of every
 event handed over, from startup, popup open or not — why it is off by
-default.
+default. They last as long as the page: after a sign-out without a reload,
+they still hold the previous user's events, so where people share a
+signed-in browser, reload on sign-out or leave it off.
 
 Under forced colours, such as Windows' contrast themes, the current dock,
 the kind shown, the Pause switch and solid buttons keep the marks that show
@@ -2342,7 +2344,9 @@ inject(UwtTelemetryMonitor)
   .subscribe((e) => console.table(e.payload));
 ```
 
-Each event is a deep copy of what was sent, so observers can't change it.
+Each event is a deep copy of what was sent, so observers can't change what
+the app sent. Every observer gets the same copy, so treat it as read-only:
+the Event Inspector shows, and exports, what another observer changes.
 While nothing subscribes, it costs one check per event.
 
 ### Testing
@@ -2633,8 +2637,11 @@ monitor anyway, so the shell's Event Inspector shows the mirror against
 its record as the fragment's own does: an `error` arriving straight after an
 error-level record from the same realm, with the name and message the logger
 mirrors for it, gets that record's sequence as `relatedSequence`. Both are
-posted in the same task, so nothing can arrive between them. A mirror that
-doesn't match exactly is shown unlinked, never linked wrongly.
+posted in the same task, so nothing of that fragment's can arrive between
+them. A mirror that doesn't match exactly is shown unlinked. On the shared
+channel with two tabs open, though, the leading tab's host hears both tabs'
+fragments, whose messages can interleave: a mirror can then link to the
+other tab's record with the same name and message.
 
 ### A fragment that also deploys standalone
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss
index 3e0e250..81c9016 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/cps-slider/cps-slider.component.scss
@@ -88,6 +88,16 @@
           0 0 0 0.1875rem var(--cps-color-calm-highlighten);
       }
     }
+
+    // Forced colours drop the track's gradient and the focus shadow.
+    @media (forced-colors: active) {
+      border: 0.0625rem solid CanvasText;
+
+      &:focus-visible {
+        outline: 0.125rem solid Highlight;
+        outline-offset: 0.125rem;
+      }
+    }
   }
 
   .cps-slider-disabled {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 321ff3b..10c864c 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -1,4 +1,4 @@
-import { PLATFORM_ID } from '@angular/core';
+import { ApplicationRef, PLATFORM_ID } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { Subject } from 'rxjs';
@@ -31,13 +31,18 @@ class FakeDialogs {
   };
 
   readonly close = jest.fn(() => this.destroyed.next());
+  readonly destroy = jest.fn(() => this.destroyed.next());
+  /** Whether the dialog has rendered; one that hasn't can't animate shut. */
+  shown = true;
 
   open(component: unknown, config: Record<string, unknown>) {
     this.opened.push({ component, config });
     return {
       componentInstance: this.instance,
       onDestroy: this.destroyed.asObservable(),
-      close: this.close
+      close: this.close,
+      destroy: this.destroy,
+      isOpen: () => this.shown
     };
   }
 }
@@ -221,12 +226,14 @@ describe('UwtEventInspectorService', () => {
     ['disabled', { enabled: false }],
     ['disabled by a function', { enabled: () => false }]
   ])('should do nothing when %s', (_label, config) => {
+    const listen = jest.spyOn(document, 'addEventListener');
     const service = create(config);
     service.install();
 
     press();
     service.open();
     expect(dialogs.opened).toHaveLength(0);
+    expect(listen).not.toHaveBeenCalledWith('keydown', expect.anything(), true);
   });
 
   it('should treat a throwing enabled() as disabled', () => {
@@ -242,9 +249,11 @@ describe('UwtEventInspectorService', () => {
   });
 
   it('should not listen during a server-side render', () => {
+    const listen = jest.spyOn(document, 'addEventListener');
     create({}, 'server').install();
     press();
     expect(dialogs.opened).toHaveLength(0);
+    expect(listen).not.toHaveBeenCalledWith('keydown', expect.anything(), true);
   });
 
   it('should stop listening when the application is destroyed', () => {
@@ -263,6 +272,48 @@ describe('UwtEventInspectorService', () => {
     expect(pane()?.classList).toContain('uwt-inspector-pane--right');
   });
 
+  it('should open a dialog instead of a pane that fails, leaving none behind', () => {
+    remember({ dock: 'right' });
+    const service = create();
+    jest
+      .spyOn(TestBed.inject(ApplicationRef), 'attachView')
+      .mockImplementationOnce(() => {
+        throw new Error('no room');
+      });
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    service.open();
+
+    expect(pane()).toBeNull();
+    expect(dialogs.opened).toHaveLength(1);
+    expect(service.dock()).toBe('dialog');
+  });
+
+  it('should take away a dialog closed before it is shown, which its close would leave', () => {
+    const service = create();
+    dialogs.shown = false;
+
+    service.open();
+    service.close();
+
+    expect(dialogs.destroy).toHaveBeenCalledTimes(1);
+    expect(dialogs.close).not.toHaveBeenCalled();
+  });
+
+  it('should give focus back to where it was as a pane closes', () => {
+    remember({ dock: 'right' });
+    const button = document.body.appendChild(document.createElement('button'));
+    button.focus();
+    const service = create();
+
+    service.open();
+    expect(pane()?.contains(document.activeElement)).toBe(true);
+    service.close();
+
+    expect(document.activeElement).toBe(button);
+    button.remove();
+  });
+
   it('should take an open pane away quietly when the app is destroyed', () => {
     remember({ dock: 'right' });
     create().open();
@@ -303,6 +354,7 @@ describe('UwtEventInspectorService', () => {
     expect(open).toHaveBeenCalledWith(
       expect.objectContaining({
         title: 'Event Inspector · shop',
+        name: 'ngx-ui-watchtower-event-inspector:shop',
         geometry: { width: 900, height: 700, left: 10, top: 20 }
       })
     );
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 22c4113..27aab2e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -1,6 +1,7 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   ApplicationRef,
+  ComponentRef,
   createComponent,
   DestroyRef,
   EnvironmentInjector,
@@ -25,7 +26,10 @@ import {
 } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
 import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component';
 import { UwtInspectorPaneComponent } from '../uwt-inspector-pane/uwt-inspector-pane.component';
-import { uwtOpenInspectorWindow } from '../uwt-inspector-window/uwt-inspector-window';
+import {
+  uwtInspectorWindowName,
+  uwtOpenInspectorWindow
+} from '../uwt-inspector-window/uwt-inspector-window';
 import {
   UwtInspectorHost,
   UwtInspectorSession
@@ -94,8 +98,16 @@ export class UwtEventInspectorService {
   private warnedBlocked = false;
   private lastKey?: string;
 
+  private readonly opened = signal(false);
+
+  /**
+   * What had focus in the app as the inspector opened, for a pane to give
+   * it back as it closes; the dialog does so itself.
+   */
+  private focusedBefore?: HTMLElement;
+
   /** Whether the inspector is currently open, in any dock. */
-  readonly isOpen = signal(false);
+  readonly isOpen = this.opened.asReadonly();
 
   private readonly shownIn = signal<UwtInspectorDock | undefined>(undefined);
 
@@ -158,6 +170,11 @@ export class UwtEventInspectorService {
       this.host.focus();
       return;
     }
+    const focused = this.document.activeElement;
+    this.focusedBefore =
+      focused instanceof HTMLElement && focused !== this.document.body
+        ? focused
+        : undefined;
     this.show(this.preferences.read().dock);
   }
 
@@ -186,10 +203,19 @@ export class UwtEventInspectorService {
   /** Closes the inspector, discarding what it captured. */
   close(): void {
     const host = this.host;
+    const giveBack =
+      host && host.dock !== 'dialog' && host.dock !== 'window'
+        ? uwtSafe('focus', () => host.containsFocus(), false)
+        : false;
+    const before = this.focusedBefore;
     this.host = undefined;
+    this.focusedBefore = undefined;
     uwtSafeVoid('close', () => host?.destroy());
+    if (giveBack && before?.isConnected) {
+      uwtSafeVoid('focus', () => before.focus());
+    }
     this.session.end();
-    this.isOpen.set(false);
+    this.opened.set(false);
     this.shownIn.set(undefined);
   }
 
@@ -249,13 +275,17 @@ export class UwtEventInspectorService {
   /** Shows it in `dock`; a pane on a narrow screen shows as a dialog. */
   private show(dock: UwtInspectorDock): void {
     uwtSafeVoid('open', () => {
+      // A window or pane that fails to open leaves nothing behind, and the
+      // dialog stands in, as for a blocked window.
       this.host =
         dock === 'window'
-          ? (this.openWindow() ?? this.openDialog())
+          ? (uwtSafe('window', () => this.openWindow(), undefined) ??
+            this.openDialog())
           : dock === 'dialog' || this.isNarrow()
             ? this.openDialog()
-            : this.openPane(dock);
-      this.isOpen.set(true);
+            : (uwtSafe('pane', () => this.openPane(dock), undefined) ??
+              this.openDialog());
+      this.opened.set(true);
       this.shownIn.set(this.host.dock);
     });
     // A dialog focuses itself once rendered; a pane or window is ready now.
@@ -301,7 +331,9 @@ export class UwtEventInspectorService {
       dock: 'dialog',
       focus: () => ref.componentInstance?.focusInspector(),
       containsFocus: () => !!ref.componentInstance?.containsFocus(),
-      destroy: () => ref.close()
+      // Its close waits for the hide animation, which a dialog closed before
+      // it was ever shown never has: that one goes at once.
+      destroy: () => (ref.isOpen() ? ref.close() : ref.destroy())
     };
     ref.onDestroy.subscribe(() => this.closedByUser(host));
     return host;
@@ -311,23 +343,32 @@ export class UwtEventInspectorService {
     const element = this.document.body.appendChild(
       this.document.createElement('uwt-inspector-pane')
     );
-    const ref = createComponent(UwtInspectorPaneComponent, {
-      environmentInjector: this.environment,
-      hostElement: element
-    });
-    ref.setInput('side', side);
-    this.appRef.attachView(ref.hostView);
-    ref.changeDetectorRef.detectChanges();
+    let created: ComponentRef<UwtInspectorPaneComponent> | undefined;
+    // Destroying the view detaches it from the app, unless the app, being
+    // destroyed, already has: detaching it here would warn (NG0406).
+    const destroy = () => {
+      created?.destroy();
+      element.remove();
+    };
+    try {
+      created = createComponent(UwtInspectorPaneComponent, {
+        environmentInjector: this.environment,
+        hostElement: element
+      });
+      created.setInput('side', side);
+      this.appRef.attachView(created.hostView);
+      created.changeDetectorRef.detectChanges();
+    } catch (error) {
+      // Half open: nothing left behind, for the caller to open a dialog.
+      destroy();
+      throw error;
+    }
+    const ref = created;
     return {
       dock: side,
       focus: () => ref.instance.content().focusInspector(),
       containsFocus: () => ref.instance.content().containsFocus(),
-      // Destroying the view detaches it from the app, unless the app, being
-      // destroyed, already has: detaching it here would warn (NG0406).
-      destroy: () => {
-        ref.destroy();
-        element.remove();
-      }
+      destroy
     };
   }
 
@@ -340,6 +381,7 @@ export class UwtEventInspectorService {
       title: application
         ? `Event Inspector · ${application}`
         : 'Event Inspector',
+      name: uwtInspectorWindowName(application),
       geometry: this.preferences.read().window,
       onClosed: () => host && this.closedByUser(host),
       onKeydown: this.onKeydown,
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
index 0b8f821..708c667 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.html
@@ -26,7 +26,7 @@
       class="uwt-inspector-filter-bar__builder"
       role="group"
       aria-label="New filter"
-      (keydown.enter)="add()">
+      (keydown.enter)="onEnter($event)">
       <cps-autocomplete
         class="uwt-inspector-filter-bar__path"
         label="Field"
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
index db9e4a0..ca32e2a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.spec.ts
@@ -70,6 +70,26 @@ describe('UwtInspectorFilterBarComponent', () => {
     expect(bar().canAdd()).toBe(false); // nothing carried over
   });
 
+  it('should add on Enter, but not on the Enter a list takes to open or pick', () => {
+    bar().builderOpen.set(true);
+    fixture.detectChanges();
+    bar().onPath('kind');
+    bar().onOperator('equals');
+    bar().value.set('bi');
+    fixture.detectChanges();
+    const group = el().querySelector('[aria-label="New filter"]')!;
+    const enter = (target: Element) =>
+      target.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+      );
+
+    enter(group.querySelector('cps-select [role="combobox"]')!);
+    expect(store.filters().fields).toHaveLength(0);
+
+    enter(group.querySelector('cps-input input')!);
+    expect(store.filters().fields).toHaveLength(1);
+  });
+
   it('should explain how filters work beside the builder', () => {
     expect(el().querySelector('details')).toBeNull();
     bar().builderOpen.set(true);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
index c81f859..b9d4763 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.ts
@@ -146,6 +146,14 @@ export class UwtInspectorFilterBarComponent {
     this.focusAddFilter();
   }
 
+  /** Enter adds the filter — except in a list, where it opens or picks. */
+  protected onEnter(event: Event): void {
+    const target = event.target as Element | null;
+    if (!event.defaultPrevented && !target?.closest?.('[role="combobox"]')) {
+      this.add();
+    }
+  }
+
   protected remove(id: string): void {
     this.store.removeFilter(id);
     this.focusAddFilter();
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
index f2db150..594ba66 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.spec.ts
@@ -118,7 +118,24 @@ describe('uwtFlattenEvent', () => {
       eventType: 'com.uwt.bi',
       payload
     });
-    expect(result.length).toBeLessThanOrEqual(2000 + 10);
+    expect(result.length).toBeLessThanOrEqual(2000);
+    // The envelope stays whole, so the event can still be found by kind.
+    expect(result.find((f) => f.path === 'kind')?.value).toBe('bi');
+    expect(result.find((f) => f.path === 'eventType')?.value).toBe(
+      'com.uwt.bi'
+    );
+  });
+
+  it('should show an object used twice at both places, as it is no cycle', () => {
+    const shared = { theme: 'dark' };
+    const result = uwtFlattenEvent({
+      ...base,
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload: { a: shared, b: shared }
+    });
+    expect(result.find((f) => f.path === 'a.theme')?.value).toBe('dark');
+    expect(result.find((f) => f.path === 'b.theme')?.value).toBe('dark');
   });
 });
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
index ceb2b37..0197397 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter/uwt-inspector-filter.ts
@@ -15,7 +15,7 @@ const MAX_DEPTH = 12;
 /** Leaves per event considered for filtering. */
 const MAX_FIELDS = 2000;
 /** Characters of each value considered for matching. */
-const MAX_VALUE_CHARS = 2000;
+export const MAX_VALUE_CHARS = 2000;
 
 /**
  * Which section an event is shown in. An event forwarded from another
@@ -43,17 +43,27 @@ export function uwtInspectorSectionOf(
  *
  * Payload fields come first, at their own paths (`metadata.theme`,
  * `steps[2].name`); the envelope follows (`kind`, `eventType`,
- * `destination`, `origin.application`, `sequence`, `capturedAt`). Cycles,
- * excessive depth and oversized strings are cut short rather than failing.
+ * `destination`, `origin.application`, `sequence`, `capturedAt`), always
+ * whole: a huge payload gets the room left. Cycles, excessive depth and
+ * oversized strings are cut short rather than failing.
  */
 export function uwtFlattenEvent(
   event: UwtTelemetryObservedEvent
 ): UwtInspectorField[] {
+  const { payload, ...envelope } = event;
+  const own = flatten(envelope, MAX_FIELDS);
+  return [...flatten(payload, MAX_FIELDS - own.length), ...own];
+}
+
+/** `value`'s leaves, at most `max` of them. */
+function flatten(value: unknown, max: number): UwtInspectorField[] {
   const fields: UwtInspectorField[] = [];
-  const seen = new WeakSet<object>();
+  // The objects above the one visited: one seen twice elsewhere is shared,
+  // not circular.
+  const ancestors = new Set<object>();
 
   const visit = (value: unknown, path: string, depth: number): void => {
-    if (fields.length >= MAX_FIELDS) {
+    if (fields.length >= max) {
       return;
     }
     if (value === null || typeof value !== 'object') {
@@ -62,7 +72,7 @@ export function uwtFlattenEvent(
       }
       return;
     }
-    if (seen.has(value)) {
+    if (ancestors.has(value)) {
       push(fields, path, '[Circular]');
       return;
     }
@@ -70,7 +80,6 @@ export function uwtFlattenEvent(
       push(fields, path, '[Too deep]');
       return;
     }
-    seen.add(value);
 
     const entries: [string, unknown][] = Array.isArray(value)
       ? value.map((v, i) => [`[${i}]`, v])
@@ -81,15 +90,14 @@ export function uwtFlattenEvent(
       push(fields, path, '');
       return;
     }
+    ancestors.add(value);
     for (const [suffix, child] of entries) {
       visit(child, path + suffix, depth + 1);
     }
+    ancestors.delete(value);
   };
 
-  visit(event.payload, '', 0);
-
-  const { payload: _payload, ...envelope } = event;
-  visit(envelope, '', 0);
+  visit(value, '', 0);
   return fields;
 }
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss
index 32259b2..df6ada8 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-pane/uwt-inspector-pane.component.scss
@@ -50,6 +50,20 @@ uwt-inspector {
     background-color: var(--cps-color-calm);
   }
 
+  // Forced colours drop backgrounds: the grip keeps a system colour, and
+  // focus shows as an outline.
+  @media (forced-colors: active) {
+    &::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    &:focus-visible {
+      outline: 0.125rem solid Highlight;
+      outline-offset: -0.125rem;
+    }
+  }
+
   :host(.uwt-inspector-pane--left) &,
   :host(.uwt-inspector-pane--right) & {
     top: 0;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
index f5eae3e..1535022 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.spec.ts
@@ -137,6 +137,22 @@ describe('uwtInspectorRow', () => {
     });
   });
 
+  it('should offer to filter only by a value its filter finds again', () => {
+    // Matching trims the filter's value, and compares 2,000 characters.
+    const { filterBy } = rowOf({
+      ...base,
+      kind: 'bi',
+      eventType: 'com.uwt.bi',
+      payload: {
+        eventName: 'x'.repeat(2001),
+        feature: ' checkout',
+        eventTime: '',
+        application: 'app'
+      }
+    });
+    expect(filterBy).toEqual([]);
+  });
+
   it('should show an error sent to RUM', () => {
     expect(
       rowOf({
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
index d85fecc..69d74d5 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-rows.ts
@@ -3,7 +3,10 @@ import {
   UwtTelemetryObservedEvent
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtInspectorEntry } from '../uwt-inspector.models/uwt-inspector.models';
-import { uwtFieldName } from '../uwt-inspector-filter/uwt-inspector-filter';
+import {
+  MAX_VALUE_CHARS,
+  uwtFieldName
+} from '../uwt-inspector-filter/uwt-inspector-filter';
 
 /** How a row's details are coloured. The words always say it too. */
 export type UwtInspectorTone = 'success' | 'warn' | 'error';
@@ -50,6 +53,22 @@ type RowText = Pick<
 >;
 
 /** Reads a field as text, whatever the payload's declared type. */
+/**
+ * A value an `equals` filter finds again: plain, not padded — matching trims
+ * the filter's value — and within what matching compares.
+ */
+function filterable(payload: unknown, key: string): string {
+  const value =
+    payload !== null && typeof payload === 'object'
+      ? (payload as Record<string, unknown>)[key]
+      : undefined;
+  if (!['string', 'number', 'boolean'].includes(typeof value)) {
+    return '';
+  }
+  const shown = String(value);
+  return shown === shown.trim() && shown.length <= MAX_VALUE_CHARS ? shown : '';
+}
+
 function text(payload: unknown, key: string): string {
   if (payload === null || typeof payload !== 'object') {
     return '';
@@ -188,7 +207,7 @@ export function uwtInspectorRow(entry: UwtInspectorEntry): UwtInspectorRow {
       .map((path) => ({
         path,
         name: uwtFieldName(path),
-        value: text(event.payload, path)
+        value: filterable(event.payload, path)
       }))
       .filter((f) => f.value);
   } catch {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
index 3ff6c59..aec732a 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.spec.ts
@@ -191,6 +191,19 @@ describe('UwtInspectorTimelineComponent', () => {
     );
   });
 
+  it('should count every event that arrived above the page since leaving the first', () => {
+    publish(100);
+    goToPage(2);
+
+    publish(1);
+    publish(1);
+    publish(1);
+    jest.advanceTimersByTime(5000);
+    fixture.detectChanges();
+
+    expect(el().textContent).toContain('3 new at the top of the list.');
+  });
+
   describe('an open row', () => {
     const origin = { forwarded: false as const };
     const detail = (sequence: number) =>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
index 3017e49..46e775e 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.ts
@@ -166,12 +166,25 @@ export class UwtInspectorTimelineComponent {
     return captured > 0 ? `No ${noun} match the filters.` : `No ${noun} yet.`;
   });
 
-  /** Fresh arrivals above the page being read, newest first. */
+  /** The newest event shown when the reader was last on the first page. */
+  private readonly seenUpTo = linkedSignal<
+    { first: number; newest: number },
+    number
+  >({
+    source: () => ({
+      first: this.first(),
+      newest: this.rows()[0]?.sequence ?? 0
+    }),
+    computation: (now, before) =>
+      now.first === 0 ? now.newest : (before?.value ?? now.newest)
+  });
+
+  /** Events above the page being read that arrived since it was left. */
   protected readonly unseenNew = computed(
     () =>
       this.rows()
         .slice(0, this.first())
-        .filter((r) => this.store.fresh().has(r.sequence)).length
+        .filter((r) => r.sequence > this.seenUpTo()).length
   );
 
   protected readonly copyState = signal<'idle' | 'copied' | 'failed'>('idle');
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
index 3429c92..0b8ddbc 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -145,6 +145,17 @@ describe('uwtOpenInspectorWindow', () => {
     expect(options.onGeometry).toHaveBeenCalledTimes(1);
   });
 
+  it('should close the window again when it fails to show the inspector', () => {
+    const { popup } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    jest.spyOn(options.appRef, 'attachView').mockImplementationOnce(() => {
+      throw new Error('no kit');
+    });
+
+    expect(() => uwtOpenInspectorWindow(options)).toThrow('no kit');
+    expect(popup.close).toHaveBeenCalled();
+  });
+
   it('should close the window quietly when the app is destroyed first', () => {
     const { popup } = fakePopup();
     jest.spyOn(window, 'open').mockReturnValue(popup);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 8941aa7..940c834 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -1,6 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import {
   ApplicationRef,
+  ComponentRef,
   createComponent,
   createEnvironmentInjector,
   EnvironmentInjector
@@ -18,6 +19,16 @@ import { uwtSafeVoid } from '../uwt-inspector-internal.util/uwt-inspector-intern
 /** The window's name, so a second open reuses it rather than adding one. */
 export const UWT_INSPECTOR_WINDOW_NAME = 'ngx-ui-watchtower-event-inspector';
 
+/**
+ * The window's name for an app: its own, so apps sharing a page — a shell
+ * and its fragments — don't take over each other's window.
+ */
+export function uwtInspectorWindowName(application?: string): string {
+  return application
+    ? `${UWT_INSPECTOR_WINDOW_NAME}:${application}`
+    : UWT_INSPECTOR_WINDOW_NAME;
+}
+
 const STYLES = 'style, link[rel~="stylesheet"], base';
 
 export interface UwtInspectorWindowOptions {
@@ -26,6 +37,8 @@ export interface UwtInspectorWindowOptions {
   environment: EnvironmentInjector;
   appRef: ApplicationRef;
   title: string;
+  /** The window's name; {@link UWT_INSPECTOR_WINDOW_NAME} by default. */
+  name?: string;
   /** Where the window was last, if anywhere. */
   geometry?: UwtInspectorWindowGeometry;
   /** The user closed the window. */
@@ -53,7 +66,7 @@ export function uwtOpenInspectorWindow(
   const view = options.document.defaultView;
   const popup = view?.open(
     '',
-    UWT_INSPECTOR_WINDOW_NAME,
+    options.name ?? UWT_INSPECTOR_WINDOW_NAME,
     features(view, options.geometry)
   );
   if (!view || !popup) {
@@ -78,13 +91,24 @@ export function uwtOpenInspectorWindow(
     ],
     options.environment
   );
-  const ref = createComponent(UwtInspectorComponent, {
-    environmentInjector: environment,
-    hostElement: element
-  });
-  ref.setInput('dock', 'window');
-  options.appRef.attachView(ref.hostView);
-  ref.changeDetectorRef.detectChanges();
+  let created: ComponentRef<UwtInspectorComponent> | undefined;
+  try {
+    created = createComponent(UwtInspectorComponent, {
+      environmentInjector: environment,
+      hostElement: element
+    });
+    created.setInput('dock', 'window');
+    options.appRef.attachView(created.hostView);
+    created.changeDetectorRef.detectChanges();
+  } catch (error) {
+    // Half open: close it again, for the caller to open a dialog instead.
+    created?.destroy();
+    environment.destroy();
+    stopMirroring();
+    popup.close();
+    throw error;
+  }
+  const ref = created;
 
   let saved = false;
   const saveGeometry = () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 2c39e6d..485a237 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -451,6 +451,20 @@ describe('UwtInspectorComponent', () => {
     expect(announce).not.toHaveBeenCalled(); // nothing new
   });
 
+  it('should announce no history after moving to another dock', () => {
+    monitor.publish(bi('a'));
+    monitor.publish(bi('b'));
+    settle();
+    // Another dock: a new view of the same session.
+    fixture.destroy();
+    const moved = TestBed.createComponent(UwtInspectorComponent);
+    moved.detectChanges();
+
+    jest.advanceTimersByTime(10_000);
+    expect(announce).not.toHaveBeenCalled();
+    moved.destroy();
+  });
+
   it('should produce no telemetry of its own while being used', () => {
     const seen: unknown[] = [];
     // Subscribe as a second observer, alongside the popup's own store.
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 3d5bc38..a880113 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -157,7 +157,8 @@ export class UwtInspectorComponent {
 
   private readonly injector = inject(Injector);
 
-  private lastAnnounced = { bi: 0, scenario: 0, logging: 0 };
+  /** From what the session already holds: a dock move announces no history. */
+  private lastAnnounced = { ...this.store.received() };
 
   constructor() {
     const timer = setInterval(() => this.announceNew(), ANNOUNCE_EVERY_MS);
diff --git a/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts b/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts
index c04100f..952c5f5 100644
--- a/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts
+++ b/projects/ngx-ui-watchtower/src/lib/models/uwt-telemetry-monitor.models/uwt-telemetry-monitor.models.ts
@@ -73,8 +73,9 @@ interface UwtTelemetryObservedBase {
  * {@link UwtTelemetryMonitor}.
  *
  * Local payloads keep their library types. A forwarded payload arrived from
- * another realm and was only shape-checked there, so it is typed as plain
- * JSON — narrow on `origin.forwarded` before relying on its fields.
+ * another realm and was only shape-checked there, so check
+ * `origin.forwarded` before relying on its fields. The type doesn't narrow
+ * with it: a payload is typed as either, and needs a cast.
  *
  * @group Types
  */
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index 4d8a5b7..c8eef9e 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -69,6 +69,24 @@ const state: {
   custom: []
 };
 
+/**
+ * The most a request may bring, before and after gunzipping, and the most
+ * of each kind the lab keeps — it holds what it receives in memory.
+ */
+const MAX_BODY_BYTES = 5 * 1024 * 1024;
+const MAX_KEPT = 5000;
+
+/** Adds `items` to `list`, dropping the oldest past {@link MAX_KEPT}. */
+function keep<T>(list: T[], items: T[]): void {
+  list.push(...items);
+  list.splice(0, Math.max(0, list.length - MAX_KEPT));
+}
+
+/** A JSON object, not an array or a value. */
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
 /**
  * The body as text, gunzipped if RUM compressed it. A page that closes while
  * sending leaves it empty or cut short; either way it is `''`, which nothing
@@ -77,15 +95,30 @@ const state: {
 function readBody(req: Request): Promise<string> {
   return new Promise((resolve) => {
     const chunks: Buffer[] = [];
-    req.on('data', (chunk: Buffer) => chunks.push(chunk));
+    let size = 0;
+    req.on('data', (chunk: Buffer) => {
+      size += chunk.length;
+      if (size <= MAX_BODY_BYTES) {
+        chunks.push(chunk);
+      }
+    });
     req.on('end', () => {
+      if (size > MAX_BODY_BYTES) {
+        resolve('');
+        return;
+      }
       const raw = Buffer.concat(chunks);
       const gzip =
         req.headers['content-encoding'] === 'gzip' ||
         (raw[0] === 0x1f && raw[1] === 0x8b);
       // Thrown here, outside the promise, an error would stop the server.
       try {
-        resolve((gzip ? gunzipSync(raw) : raw).toString('utf8'));
+        resolve(
+          (gzip
+            ? gunzipSync(raw, { maxOutputLength: MAX_BODY_BYTES })
+            : raw
+          ).toString('utf8')
+        );
       } catch {
         resolve('');
       }
@@ -180,9 +213,18 @@ function keepBatch(body: string): void {
   if (!batch) {
     return;
   }
+  // Only RUM's shape: one stray event would break every page's reading.
+  const events = (Array.isArray(batch.RumEvents) ? batch.RumEvents : []).filter(
+    (event: unknown) => isRecord(event) && typeof event.type === 'string'
+  );
+  if (events.length === 0) {
+    return;
+  }
   state.batches++;
-  for (const event of batch.RumEvents ?? []) {
-    state.rum.push({
+  keep(
+    state.rum,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    events.map((event: any) => ({
       id: event.id,
       receivedAt: new Date().toISOString(),
       batch: state.batches,
@@ -190,8 +232,8 @@ function keepBatch(body: string): void {
       type: event.type,
       metadata: parseJson(event.metadata) ?? {},
       details: parseJson(event.details) ?? {}
-    });
-  }
+    }))
+  );
 }
 
 function queryLogs(query: Request['query']): LogRecord[] {
@@ -257,7 +299,12 @@ labBackend
   .post(
     promised(async (req, res) => {
       const body = parseJson(await readBody(req));
-      state.logs.push(...(Array.isArray(body) ? body : [body]).filter(Boolean));
+      keep(
+        state.logs,
+        (Array.isArray(body) ? body : [body]).filter(
+          (record): record is LogRecord => isRecord(record)
+        )
+      );
       res.status(204).end();
     })
   )
@@ -350,8 +397,12 @@ labBackend
   .post(
     promised(async (req, res) => {
       const body = parseJson(await readBody(req));
-      state.custom.push(
-        ...(Array.isArray(body) ? body : [body]).filter(Boolean)
+      const receivedAt = new Date().toISOString();
+      keep(
+        state.custom,
+        (Array.isArray(body) ? body : [body])
+          .filter(isRecord)
+          .map((entry) => ({ ...entry, receivedAt }))
       );
       res.status(204).end();
     })
diff --git a/projects/watchtower-lab/src/lab/lab-config-check.ts b/projects/watchtower-lab/src/lab/lab-config-check.ts
index 56f2e34..69b3ce9 100644
--- a/projects/watchtower-lab/src/lab/lab-config-check.ts
+++ b/projects/watchtower-lab/src/lab/lab-config-check.ts
@@ -18,7 +18,8 @@ export function labCheckConfig(
   known: Record<string, Record<string, unknown>>
 ): string {
   for (const [section, settings] of Object.entries(overlay)) {
-    const valid = known[section];
+    // Own properties only: `toString` or `__proto__` is no section.
+    const valid = Object.hasOwn(known, section) ? known[section] : undefined;
     if (!valid) {
       return `"${section}" isn't a section; use ${Object.keys(known).join(', ')}.`;
     }
@@ -28,7 +29,7 @@ export function labCheckConfig(
     for (const [key, value] of Object.entries(
       settings as Record<string, unknown>
     )) {
-      if (!(key in valid)) {
+      if (!Object.hasOwn(valid, key)) {
         return `"${section}.${key}" isn't a setting; ${section} has ${Object.keys(valid).join(', ')}.`;
       }
       // Patterns, written as text, sit in arrays: checked as arrays.
diff --git a/projects/watchtower-lab/src/lab/lab-results.component.ts b/projects/watchtower-lab/src/lab/lab-results.component.ts
index 5782326..4c050f9 100644
--- a/projects/watchtower-lab/src/lab/lab-results.component.ts
+++ b/projects/watchtower-lab/src/lab/lab-results.component.ts
@@ -94,8 +94,23 @@ export class LabResultsComponent {
   /** Whether the mock backend has an event. */
   private readonly arrived = computed(() => {
     const rum = this.wire.rum();
-    const details = new Set(rum.map((e) => JSON.stringify(e.details)));
-    const errors = rum.filter((e) => e.type.endsWith('js_error_event'));
+    const custom = this.wire.custom();
+    // A payload as RUM's details, or as the lab's own sink was given it.
+    const details = new Set([
+      ...rum.map((e) => JSON.stringify(e.details)),
+      ...custom.map((e) => JSON.stringify(e.payload))
+    ]);
+    const errors = [
+      ...rum
+        .filter((e) => e.type.endsWith('js_error_event'))
+        .map((e) => ({
+          message: field(e.details, 'message'),
+          at: e.receivedAt
+        })),
+      ...custom
+        .filter((e) => e.kind === 'error')
+        .map((e) => ({ message: field(e.error, 'message'), at: e.receivedAt }))
+    ];
     const logs = new Set(this.wire.logs().map((r) => JSON.stringify(r)));
     return (event: UwtTelemetryObservedEvent): boolean =>
       event.destination === 'log-provider'
@@ -105,9 +120,8 @@ export class LabResultsComponent {
             // one that arrived after this one was sent.
             errors.some(
               (e) =>
-                field(e.details, 'message') ===
-                  field(event.payload, 'message') &&
-                Date.parse(e.receivedAt) >= Date.parse(event.capturedAt)
+                e.message === field(event.payload, 'message') &&
+                Date.parse(e.at) >= Date.parse(event.capturedAt)
             )
           : details.has(JSON.stringify(event.payload));
   });
diff --git a/projects/watchtower-lab/src/lab/lab-wire.service.ts b/projects/watchtower-lab/src/lab/lab-wire.service.ts
index a5fc983..12a3c37 100644
--- a/projects/watchtower-lab/src/lab/lab-wire.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-wire.service.ts
@@ -9,6 +9,15 @@ import {
 import { UwtLogRecord } from '@absaoss-cps/ngx-ui-watchtower';
 
 /** One RUM event as the mock dataplane received it, with its batch's user. */
+/** An entry the lab's own sink sent, and when it arrived. */
+export interface LabCustomEntry {
+  kind: string;
+  eventType?: string;
+  payload?: unknown;
+  error?: unknown;
+  receivedAt: string;
+}
+
 export interface LabRumEvent {
   /** RUM's own id for the event. */
   id: string;
@@ -76,6 +85,8 @@ export class LabWire {
   readonly batches = signal(0);
   readonly rum = signal<readonly LabRumEvent[]>([]);
   readonly logs = signal<readonly UwtLogRecord[]>([]);
+  /** What the lab's own sink received, with `?destination=custom`. */
+  readonly custom = signal<readonly LabCustomEntry[]>([]);
   readonly brokerMode = signal<LabBrokerMode>('ok');
 
   // The next two change only when their content does: each poll brings new
@@ -115,14 +126,16 @@ export class LabWire {
 
   async refresh(): Promise<void> {
     try {
-      const [rum, logs, state] = await Promise.all([
+      const [rum, logs, custom, state] = await Promise.all([
         labFetch('/__lab/rum').then((r) => r.json()),
         labFetch('/__lab/logs').then((r) => r.json()),
+        labFetch('/__lab/custom').then((r) => r.json()),
         labFetch('/__lab/state').then((r) => r.json())
       ]);
       this.batches.set(rum.batches);
       this.rum.set(rum.events);
       this.logs.set(logs);
+      this.custom.set(custom);
       this.brokerMode.set(state.brokerMode);
       this.brokerConfig.set(state.brokerConfig);
       this.telemetries.set(state.telemetries);
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 90d7ef3..52270f8 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -12,10 +12,14 @@ import {
   UWT_LOG_CONFIG,
   UWT_REDACT_CONFIG,
   UWT_SCENARIO_TELEMETRY_CONFIG,
+  UWT_DEFAULT_TELEMETRY_CONFIG,
   UWT_TELEMETRY_IDENTITY,
   uwtIsDebugEnabled
 } from '@absaoss-cps/ngx-ui-watchtower';
-import { UWT_EVENT_INSPECTOR_CONFIG } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import {
+  UWT_DEFAULT_INSPECTOR_CONFIG,
+  UWT_EVENT_INSPECTOR_CONFIG
+} from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import {
   CpsButtonComponent,
   CpsInputComponent,
@@ -206,8 +210,8 @@ export class SettingsPage {
   private readonly options = inject(LAB_OPTIONS);
   private readonly wire = inject(LabWire);
 
-  /** What each section takes, with values of the types they take. */
-  private readonly known: Record<string, Record<string, unknown>> = (() => {
+  /** The settings in effect, which the controls show until changed. */
+  private readonly inEffect: Record<string, Record<string, unknown>> = (() => {
     const inspector = inject(UWT_EVENT_INSPECTOR_CONFIG);
     return {
       identity: {
@@ -227,6 +231,34 @@ export class SettingsPage {
     };
   })();
 
+  /**
+   * What each section takes, of the types they take: the library's defaults
+   * over what is in effect, which an overlay in the address may have given
+   * a value of the wrong type.
+   */
+  private readonly known: Record<string, Record<string, unknown>> = (() => {
+    const library = UWT_DEFAULT_TELEMETRY_CONFIG;
+    const inspector = UWT_DEFAULT_INSPECTOR_CONFIG;
+    const defaults: Record<string, object> = {
+      identity: { eventNamespace: library.eventNamespace },
+      scenarios: library.scenario,
+      logging: library.logs,
+      bi: library.bi,
+      redaction: library.redact,
+      inspector: {
+        maxEventsPerSection: inspector.maxEventsPerSection,
+        maxPayloadCharsInView: inspector.maxPayloadCharsInView,
+        captureBeforeOpen: inspector.captureBeforeOpen
+      }
+    };
+    return Object.fromEntries(
+      Object.entries(this.inEffect).map(([section, values]) => [
+        section,
+        { ...values, ...defaults[section] }
+      ])
+    );
+  })();
+
   /** The overlay being edited: the one in effect, to start with. */
   protected readonly draft = signal(
     JSON.stringify(this.options.config, null, 2)
@@ -268,7 +300,7 @@ export class SettingsPage {
     const fromDraft = (
       this.overlay()?.[section] as Record<string, unknown> | undefined
     )?.[key];
-    return fromDraft ?? this.known[section][key];
+    return fromDraft ?? this.inEffect[section][key];
   }
 
   /** Writes a control's setting into the draft, which shows it. */
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 741300e..575385c 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -246,8 +246,18 @@ export class ShellComponent {
   /** Escape folds the open nav, back to its button. */
   protected closeNav(): void {
     if (this.navOpen()) {
+      // Focus goes back to the toggle, unless it is in a field elsewhere:
+      // Escape there is that field's.
+      const toggle = this.navToggle().nativeElement as HTMLElement;
+      const focused = toggle.ownerDocument.activeElement;
+      const elsewhere =
+        !!focused &&
+        focused !== toggle.ownerDocument.body &&
+        !focused.closest('.lab-nav');
       this.navOpen.set(false);
-      this.navToggle().nativeElement.focus();
+      if (!elsewhere) {
+        toggle.focus();
+      }
     }
   }
 }
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 567725f..dc8f2f8 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -100,6 +100,12 @@
   border-radius: 0.5rem;
   background-color: #8a0b3c;
   box-shadow: 0 0.25rem 0.75rem #0000004d;
+  // Within a phone's width: long chips wrap rather than run off it.
+  max-width: min(24rem, calc(100vw - 6rem));
+
+  .lab-chip {
+    white-space: normal;
+  }
 }
 
 .lab-spacer {
@@ -149,6 +155,15 @@
   }
 }
 
+// The narrowest phones: a tighter header, so its button stays whole. On the
+// viewport, as the header can't query its own width.
+@media (max-width: 22rem) {
+  .lab-header {
+    gap: 0.5rem;
+    padding: 0 0.75rem;
+  }
+}
+
 // One line, whatever the width: each part ends in an ellipsis when short of
 // room, the ids first, with the full text in its tooltip.
 .lab-status {

From 4382f22386c2922ab3f1c6205d944d835cf99960 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Mon, 9 Nov 2026 15:33:50 +0100
Subject: [PATCH 28/51] test: isolated consumer smoke test, SSR sends made
 visible, no fixed sleeps where a condition exists

---
 README.md                                     |  17 +-
 playwright/lab.ts                             |   2 +
 playwright/rum-startup.spec.ts                |   3 +-
 playwright/ssr.spec.ts                        |  10 +-
 .../watchtower-consumer-smoke/package.json    |   2 +-
 projects/watchtower-consumer-smoke/smoke.mjs  | 146 ++++++++++++++----
 projects/watchtower-lab/server/lab-backend.ts |   9 +-
 .../watchtower-lab/src/lab/lab-custom.sink.ts |   4 +
 .../src/lab/lab-log-api.provider.ts           |   4 +
 .../src/lab/lab-rum-credentials.provider.ts   |   4 +
 .../src/lab/lab-server-sends.ts               |  33 ++++
 11 files changed, 186 insertions(+), 48 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-server-sends.ts

diff --git a/README.md b/README.md
index e05b6d7..1f4eb39 100644
--- a/README.md
+++ b/README.md
@@ -160,12 +160,17 @@ serving an older build. The first time, download the browsers with
 ## Consumer smoke test
 
 Everything above uses the library from source. `npm run smoke` uses it as
-published: it packs the built package, installs the tarball into
-`projects/watchtower-consumer-smoke` — an app with no paths into the source —
-and builds that app for the browser and, prerendering, for the server. It
-checks the tarball's files, that all three entry points resolve with their
-typings, that the page renders on the server, and that an app which never
-imports `/rum` has no `aws-rum-web` in its bundle.
+published: it packs the built package, then sets up
+`projects/watchtower-consumer-smoke` on its own, in a temporary folder
+outside the workspace, with its own `package.json` (the workspace's
+versions) and `angular.json`, and installs it with `npm install`, peer
+checks and all. Nothing comes from the workspace, so a peer the package
+leaves out or mis-ranges fails as it would for an app. It builds that app
+for the browser and, prerendering, for the server, and checks the tarball's
+files, that all three entry points resolve with their typings, that the page
+renders on the server, and that an app which never imports `/rum` has no
+`aws-rum-web` in its bundle. It needs the npm registry, and keeps the folder
+when a check fails.
 
 ## Before you push
 
diff --git a/playwright/lab.ts b/playwright/lab.ts
index df91754..3917a7e 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -68,6 +68,8 @@ export class LabBackend {
     brokerCalls: number;
     brokerConfig: Record<string, unknown>;
     telemetries: Telemetry[] | null;
+    /** Asked of the lab's destinations while the server rendered. */
+    serverSends: string[];
   }> {
     return (await this.request.get('/__lab/state')).json();
   }
diff --git a/playwright/rum-startup.spec.ts b/playwright/rum-startup.spec.ts
index 46a0926..0bae402 100644
--- a/playwright/rum-startup.spec.ts
+++ b/playwright/rum-startup.spec.ts
@@ -97,7 +97,8 @@ test('a refresh answered with null turns RUM off for the page', async ({
   await expect
     .poll(async () => (await backend.state()).brokerCalls, { timeout: 15_000 })
     .toBe(2);
-  await page.waitForTimeout(500);
+  // RUM is off once the page has the null: no session any more.
+  await expect(page.locator('.lab-status')).toContainText('session: —');
   await press(page, 'Fire twice at once');
   await page.waitForTimeout(4500);
   expect(named(await backend.rum(), 'lab_double_fired')).toEqual([]);
diff --git a/playwright/ssr.spec.ts b/playwright/ssr.spec.ts
index 5b8d77e..782d511 100644
--- a/playwright/ssr.spec.ts
+++ b/playwright/ssr.spec.ts
@@ -4,18 +4,16 @@ test('the server renders the page, and sends no telemetry itself', async ({
   request,
   backend
 }) => {
-  // The previous test's page may still be sending its last beacon.
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  await backend.reset();
-
   const html = await (await request.get('/bi')).text();
 
   expect(html).toMatch(/<h1[^>]*>BI events<\/h1>/);
   expect(html).toContain('class="lab-nav"');
   // Annotations for hydration: the browser reuses this DOM.
   expect(html).toMatch(/ngh="/);
-  expect(await backend.rum()).toEqual([]);
-  expect(await backend.logs()).toEqual([]);
+  // What the render asked of the lab's destinations, kept on the server
+  // rather than sent: nothing. A page still sending from the last test
+  // sends from the browser, and doesn't count.
+  expect((await backend.state()).serverSends).toEqual([]);
 });
 
 test('the browser hydrates the rendered page, and telemetry starts there', async ({
diff --git a/projects/watchtower-consumer-smoke/package.json b/projects/watchtower-consumer-smoke/package.json
index ce2c0aa..1dfd57c 100644
--- a/projects/watchtower-consumer-smoke/package.json
+++ b/projects/watchtower-consumer-smoke/package.json
@@ -1,5 +1,5 @@
 {
   "name": "watchtower-consumer-smoke",
   "private": true,
-  "description": "A minimal app consuming @absaoss-cps/ngx-ui-watchtower as published: `npm run smoke` packs the library and installs the tarball here."
+  "description": "A minimal app consuming @absaoss-cps/ngx-ui-watchtower as published: `npm run smoke` packs the library and sets this app up on its own, outside the workspace, with the tarball installed."
 }
diff --git a/projects/watchtower-consumer-smoke/smoke.mjs b/projects/watchtower-consumer-smoke/smoke.mjs
index 632b977..a707a43 100644
--- a/projects/watchtower-consumer-smoke/smoke.mjs
+++ b/projects/watchtower-consumer-smoke/smoke.mjs
@@ -1,14 +1,18 @@
 // `npm run smoke`: the library as a consumer gets it. Packs the built
-// package, installs the tarball into this app — which has no paths into the
-// source — builds the app for the browser and the server, and checks the
-// result. Prints a line per check; exits non-zero if any fails.
+// package, then sets this app up on its own, in a folder outside the
+// workspace: its own package.json and angular.json, and an `npm install`
+// with npm's peer checks, so nothing comes from the workspace. Builds it for
+// the browser and the server, and checks the result. Prints a line per
+// check; exits non-zero if any fails, keeping the folder to look into.
 import { execFileSync, spawnSync } from 'node:child_process';
 import {
+  cpSync,
   existsSync,
   mkdtempSync,
   readdirSync,
   readFileSync,
-  rmSync
+  rmSync,
+  writeFileSync
 } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
@@ -17,10 +21,33 @@ import { fileURLToPath } from 'node:url';
 const ROOT = fileURLToPath(new URL('../../', import.meta.url));
 const APP = join(ROOT, 'projects/watchtower-consumer-smoke');
 const PACKAGE = join(ROOT, 'dist/ngx-ui-watchtower');
-const INSTALLED = join(APP, 'node_modules/@absaoss-cps/ngx-ui-watchtower');
 const shell = process.platform === 'win32';
 
+/** What the app depends on, at the versions the workspace has. */
+const DEPENDENCIES = [
+  '@angular/animations',
+  '@angular/common',
+  '@angular/compiler',
+  '@angular/core',
+  '@angular/forms',
+  '@angular/platform-browser',
+  '@angular/platform-server',
+  '@angular/router',
+  '@angular/ssr',
+  'aws-rum-web',
+  'cps-ui-kit',
+  'rxjs',
+  'tslib'
+];
+const DEV_DEPENDENCIES = [
+  '@angular/build',
+  '@angular/cli',
+  '@angular/compiler-cli',
+  'typescript'
+];
+
 let failures = 0;
+let consumer;
 function check(label, ok, detail) {
   console.log(`${ok ? 'PASS' : 'FAIL'}  ${label}`);
   if (!ok) {
@@ -35,19 +62,36 @@ function check(label, ok, detail) {
 function run(command, args, cwd = ROOT) {
   console.log(`\n$ ${command} ${args.join(' ')}`);
   return (
-    spawnSync(command, args, { cwd, stdio: 'inherit', shell }).status === 0
+    spawnSync(command, args, {
+      cwd,
+      stdio: 'inherit',
+      shell,
+      env: { ...process.env, NG_CLI_ANALYTICS: 'false' }
+    }).status === 0
   );
 }
 
 /** Whether any script in a build's browser output contains `text`. */
 function bundleContains(outputPath, text) {
-  const browser = join(ROOT, outputPath, 'browser');
+  const browser = join(outputPath, 'browser');
   return readdirSync(browser)
     .filter((file) => file.endsWith('.js'))
     .some((file) => readFileSync(join(browser, file), 'utf8').includes(text));
 }
 
+/** A package's version as the workspace has it installed. */
+function version(name) {
+  return JSON.parse(
+    readFileSync(join(ROOT, 'node_modules', name, 'package.json'), 'utf8')
+  ).version;
+}
+
 function finish() {
+  if (consumer && failures) {
+    console.log(`\nThe app is left in ${consumer}`);
+  } else if (consumer) {
+    rmSync(consumer, { recursive: true, force: true });
+  }
   console.log(failures ? `\n${failures} FAILED` : '\nALL PASSED');
   process.exit(failures ? 1 : 0);
 }
@@ -89,65 +133,101 @@ check(
   files.filter(isSource)
 );
 
-// 2. Installed as a consumer installs it. Its peers — Angular, rxjs,
-// cps-ui-kit, aws-rum-web — come from the workspace, as one copy.
-rmSync(join(APP, 'node_modules'), { recursive: true, force: true });
+// 2. The app on its own, outside the workspace: its sources, and a manifest
+// and build target of its own — the workspace's target, with its paths made
+// the app's.
+consumer = mkdtempSync(join(tmpdir(), 'uwt-consumer-'));
+cpSync(join(APP, 'src'), join(consumer, 'src'), { recursive: true });
+cpSync(join(APP, 'tsconfig.app.json'), join(consumer, 'tsconfig.app.json'));
+const pinned = (names) =>
+  Object.fromEntries(names.map((name) => [name, version(name)]));
+writeFileSync(
+  join(consumer, 'package.json'),
+  JSON.stringify(
+    {
+      name: 'watchtower-consumer',
+      private: true,
+      dependencies: {
+        ...pinned(DEPENDENCIES),
+        '@absaoss-cps/ngx-ui-watchtower': `file:${join(packDir, packed.filename)}`
+      },
+      devDependencies: pinned(DEV_DEPENDENCIES)
+    },
+    null,
+    2
+  )
+);
+const target = JSON.parse(readFileSync(join(ROOT, 'angular.json'), 'utf8'))
+  .projects['watchtower-consumer-smoke'];
+const own = JSON.parse(
+  JSON.stringify(target)
+    .replaceAll('projects/watchtower-consumer-smoke/', '')
+    .replaceAll('dist/watchtower-consumer-smoke', 'dist/app')
+);
+writeFileSync(
+  join(consumer, 'angular.json'),
+  JSON.stringify(
+    {
+      version: 1,
+      cli: { analytics: false },
+      projects: { app: { ...own, root: '', sourceRoot: 'src' } }
+    },
+    null,
+    2
+  )
+);
+
+// 3. Installed as a consumer installs it, peer checks and all: a peer the
+// package leaves out or mis-ranges fails here, as it would for the app.
 const installed = run(
   'npm',
-  [
-    'install',
-    join(packDir, packed.filename),
-    '--no-save',
-    '--no-package-lock',
-    '--legacy-peer-deps',
-    '--ignore-scripts',
-    '--no-audit',
-    '--no-fund'
-  ],
-  APP
+  ['install', '--no-package-lock', '--no-audit', '--no-fund'],
+  consumer
 );
-rmSync(packDir, { recursive: true, force: true });
+const library = join(consumer, 'node_modules/@absaoss-cps/ngx-ui-watchtower');
 check(
-  `the tarball installs (${packed.id})`,
+  `the tarball installs, with its peers checked (${packed.id})`,
   installed &&
-    JSON.parse(readFileSync(join(INSTALLED, 'package.json'), 'utf8'))
-      .version === packed.version
+    existsSync(join(library, 'package.json')) &&
+    JSON.parse(readFileSync(join(library, 'package.json'), 'utf8')).version ===
+      packed.version
 );
+rmSync(packDir, { recursive: true, force: true });
 check(
   'no second copy of Angular is installed beside it',
-  !existsSync(join(APP, 'node_modules/@angular'))
+  !existsSync(join(library, 'node_modules/@angular'))
 );
 if (failures) {
   finish();
 }
 
-// 3. Built against the published typings and bundles, for the browser and,
+// 4. Built against the published typings and bundles, for the browser and,
 // prerendering, the server.
 check(
   'the app builds and prerenders without /rum',
-  run('npx', ['ng', 'build', 'watchtower-consumer-smoke'])
+  run('npx', ['ng', 'build', 'app'], consumer)
 );
 check(
   'the app builds and prerenders with /rum',
-  run('npx', ['ng', 'build', 'watchtower-consumer-smoke', '-c', 'rum'])
+  run('npx', ['ng', 'build', 'app', '-c', 'rum'], consumer)
 );
 if (failures) {
   finish();
 }
 
-// 4. The builds' output. The RUM SDK sends to `/appmonitors/`, a path in no
+// 5. The builds' output. The RUM SDK sends to `/appmonitors/`, a path in no
 // part of this library, which minifying keeps.
 const SDK = '/appmonitors/';
 check(
   'without /rum, no aws-rum-web in the bundle',
-  !bundleContains('dist/watchtower-consumer-smoke', SDK)
+  !bundleContains(join(consumer, 'dist/app'), SDK)
 );
 check(
   'with /rum, aws-rum-web is in the bundle — the check above can see it',
-  bundleContains('dist/watchtower-consumer-smoke-rum', SDK)
+  bundleContains(join(consumer, 'dist/app-rum'), SDK)
 );
 const prerendered = readFileSync(
-  join(ROOT, 'dist/watchtower-consumer-smoke/browser/index.html'),
+  join(consumer, 'dist/app/browser/index.html'),
   'utf8'
 );
 check(
diff --git a/projects/watchtower-lab/server/lab-backend.ts b/projects/watchtower-lab/server/lab-backend.ts
index c8eef9e..81b7226 100644
--- a/projects/watchtower-lab/server/lab-backend.ts
+++ b/projects/watchtower-lab/server/lab-backend.ts
@@ -15,6 +15,10 @@
 import { Request, Router } from 'express';
 import { promised } from './promised';
 import { gunzipSync } from 'node:zlib';
+import {
+  labClearServerSends,
+  labServerSends
+} from '../src/lab/lab-server-sends';
 
 const BROKER_MODES = [
   'ok',
@@ -336,12 +340,15 @@ labBackend.get('/__lab/state', (_req, res) => {
     brokerCalls: state.brokerCalls,
     brokerConfig: state.brokerConfig,
     modes: BROKER_MODES,
-    telemetries: state.telemetries
+    telemetries: state.telemetries,
+    // Asked of the lab's destinations while the server rendered: none.
+    serverSends: labServerSends()
   });
 });
 
 labBackend.post('/__lab/reset', (_req, res) => {
   Object.assign(state, { batches: 0, rum: [], logs: [], custom: [] });
+  labClearServerSends();
   res.status(204).end();
 });
 
diff --git a/projects/watchtower-lab/src/lab/lab-custom.sink.ts b/projects/watchtower-lab/src/lab/lab-custom.sink.ts
index 79abec8..1449cea 100644
--- a/projects/watchtower-lab/src/lab/lab-custom.sink.ts
+++ b/projects/watchtower-lab/src/lab/lab-custom.sink.ts
@@ -7,6 +7,7 @@ import {
   uwtMarkSessionStart,
   uwtUuid
 } from '@absaoss-cps/ngx-ui-watchtower';
+import { labSentOnServer } from './lab-server-sends';
 
 /**
  * A destination of the lab's own, as an app would write one for its own
@@ -62,6 +63,9 @@ export class LabCustomSink extends UwtTelemetrySink {
     }
     const json = JSON.stringify(this.queue);
     this.queue = [];
+    if (labSentOnServer('POST /__lab/custom')) {
+      return;
+    }
     const sent =
       beacon &&
       this.document.defaultView?.navigator.sendBeacon('/__lab/custom', json);
diff --git a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
index b59f0b1..eeb18b2 100644
--- a/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-log-api.provider.ts
@@ -5,6 +5,7 @@ import {
   UwtLogRecord
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { LAB_OPTIONS } from './lab-options';
+import { labSentOnServer } from './lab-server-sends';
 
 /**
  * Sends log records to the lab's mock backend, as the README's example does:
@@ -54,6 +55,9 @@ export class LabLogApiProvider implements UwtLogApiProvider {
   }
 
   private post(records: UwtLogRecord[], closing = false): void {
+    if (labSentOnServer('POST /api/logs')) {
+      return;
+    }
     fetch('/api/logs', {
       method: 'POST',
       body: JSON.stringify(records),
diff --git a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
index efd11d7..162c360 100644
--- a/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
+++ b/projects/watchtower-lab/src/lab/lab-rum-credentials.provider.ts
@@ -3,6 +3,7 @@ import {
   UwtRumBootstrap,
   UwtRumCredentialsProvider
 } from '@absaoss-cps/ngx-ui-watchtower/rum';
+import { labSentOnServer } from './lab-server-sends';
 
 /**
  * Options for the RUM telemetries the broker names, which its JSON can't
@@ -50,6 +51,9 @@ export class LabRumCredentialsProvider implements UwtRumCredentialsProvider {
 
   async load(): Promise<UwtRumBootstrap | null> {
     const call = ++this.calls;
+    if (labSentOnServer('GET /rum/init')) {
+      return null;
+    }
     const response = await fetch(`/rum/init?call=${call}`);
     const body = await response.json().catch(() => ({}));
     if (call === 1 && body.lab) {
diff --git a/projects/watchtower-lab/src/lab/lab-server-sends.ts b/projects/watchtower-lab/src/lab/lab-server-sends.ts
new file mode 100644
index 0000000..3fd41a4
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-server-sends.ts
@@ -0,0 +1,33 @@
+/**
+ * What the lab's destinations were asked to send while the server rendered:
+ * nothing, unless the library's browser guards slip. On the server a send
+ * can't reach anything — its URL is relative — so it would fail unseen;
+ * here it is kept instead, on `globalThis`, where the mock backend, in the
+ * same process, reads it for `/__lab/state`.
+ */
+const KEY = '__labServerSends';
+
+type Kept = { [KEY]?: string[] };
+
+/**
+ * Keeps `what` — say `POST /api/logs` — when on the server, where it is
+ * then not sent.
+ *
+ * @returns whether it was kept, so the caller doesn't send it
+ */
+export function labSentOnServer(what: string): boolean {
+  if (typeof window !== 'undefined') {
+    return false;
+  }
+  ((globalThis as Kept)[KEY] ??= []).push(what);
+  return true;
+}
+
+/** What was kept since the last {@link labClearServerSends}. */
+export function labServerSends(): readonly string[] {
+  return (globalThis as Kept)[KEY] ?? [];
+}
+
+export function labClearServerSends(): void {
+  (globalThis as Kept)[KEY] = [];
+}

From 87c32943cb145fbbafbad6fc6ca0609a63d3f5e3 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Tue, 10 Nov 2026 22:57:20 +0100
Subject: [PATCH 29/51] fix: warn once when RUM rejects errors, never edit the
 app's RUM config

---
 playwright/telemetries.spec.ts                | 33 ++++----
 projects/ngx-ui-watchtower/DESIGN.md          | 10 +--
 projects/ngx-ui-watchtower/README.md          |  7 +-
 .../uwt-rum-credentials.ts                    |  5 +-
 .../uwt-rum-telemetry.sink.spec.ts            | 68 +++++++++-------
 .../uwt-rum-telemetry.sink.ts                 | 79 ++++++++++---------
 6 files changed, 108 insertions(+), 94 deletions(-)

diff --git a/playwright/telemetries.spec.ts b/playwright/telemetries.spec.ts
index 2d4c5f4..6b9ab7a 100644
--- a/playwright/telemetries.spec.ts
+++ b/playwright/telemetries.spec.ts
@@ -44,11 +44,12 @@ const cases: {
     name: 'none',
     telemetries: [],
     chip: 'none',
-    // Only RUM's session start and page views, and the mirrored error.
+    // Only RUM's session start and page views: without 'errors', RUM rejects
+    // the mirrored error, so no error event is sent either.
     expected: (t) =>
-      expect(
-        t.filter((type) => !/session_start|page_view|js_error/.test(type))
-      ).toEqual([])
+      expect(t.filter((type) => !/session_start|page_view/.test(type))).toEqual(
+        []
+      )
   },
   {
     name: 'all five',
@@ -60,7 +61,7 @@ const cases: {
 ];
 
 for (const { name, telemetries, chip, expected } of cases) {
-  test(`RUM telemetries, ${name}: as set, quiet while idle, errors still mirrored`, async ({
+  test(`RUM telemetries, ${name}: as set, quiet while idle, errors mirrored only with 'errors'`, async ({
     page,
     backend
   }) => {
@@ -82,15 +83,19 @@ for (const { name, telemetries, chip, expected } of cases) {
     expect((await mine()).length).toBe(loaded);
 
     await press(page, 'error, with an Error');
-    await expect
-      .poll(async () =>
-        (await mine()).some(
-          (e) =>
-            e.type === 'com.amazon.rum.js_error_event' &&
-            JSON.stringify(e.details).includes('Connection reset')
-        )
-      )
-      .toBe(true);
+    const mirrored = async () =>
+      (await mine()).some(
+        (e) =>
+          e.type === 'com.amazon.rum.js_error_event' &&
+          JSON.stringify(e.details).includes('Connection reset')
+      );
+    if (telemetries === null || telemetries.includes('errors')) {
+      await expect.poll(mirrored).toBe(true);
+    } else {
+      // RUM rejects the error without its 'errors' telemetry; give it time.
+      await page.waitForTimeout(2000);
+      expect(await mirrored()).toBe(false);
+    }
 
     const events = await mine();
     expect(events.filter((e) => JSON.stringify(e).includes('/__lab/'))).toEqual(
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 0f91a9e..503b666 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -914,11 +914,11 @@ The custom layers duplicate nothing built in: the library records no page
 views, does not re-capture unhandled errors, and collects no browser or
 device attributes.
 
-An app that sets its own `telemetries` without `'errors'` still gets RUM's
-error plugin, with its own capture off: `recordError` and
-`mirrorErrorsToRum` go through it, and RUM rejects them without it. One
-the app loads itself through `eventPluginsToLoad` is used instead — RUM
-can't hold two.
+The sink never edits the app's RUM config. `recordError` and
+`mirrorErrorsToRum` go through RUM's error plugin, which RUM rejects when
+`'errors'` isn't in `telemetries` (or its plugin in `eventPluginsToLoad`). The
+sink then prints one console warning, in every environment, and mirrors no
+errors; the app adds `'errors'` or sets `mirrorErrorsToRum: false`.
 
 ### From events to metrics
 
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index 6bdd347..aa24426 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -425,10 +425,9 @@ TestBed.configureTestingModule({
 - A scenario sends one event when it ends, not one per step — AWS RUM allows
   200 events per session by default.
 - RUM's own telemetry defaults to errors, performance and same-origin HTTP;
-  set `telemetries` in the RUM config to change it. Without `'errors'`, the
-  sink still loads RUM's error plugin, capturing nothing by itself, because
-  `mirrorErrorsToRum` needs it — unless the app loads one itself through
-  `eventPluginsToLoad`.
+  set `telemetries` in the RUM config to change it. `mirrorErrorsToRum` and
+  `recordError` need `'errors'` in that list; without it, errors aren't
+  mirrored to RUM and the console warns once.
 
 ## License
 
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts
index 3c8edce..69033e9 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-credentials/uwt-rum-credentials.ts
@@ -111,8 +111,9 @@ export interface UwtRumAppMonitorConfig {
    * Built-in telemetry categories to enable. Defaults to errors, performance
    * and same-origin HTTP. The SDK's own default also includes `'replay'`
    * (session replay via `rrweb`); this library does not enable it by
-   * default. Left out, `'errors'` is still loaded with its own capture off,
-   * because `recordError` and `mirrorErrorsToRum` go through it.
+   * default. `recordError` and `mirrorErrorsToRum` need `'errors'` in this
+   * list (or its plugin in `eventPluginsToLoad`); without it, errors aren't
+   * mirrored to RUM and the console warns once.
    *
    * Options the SDK matches with `RegExp.test` or calls as a function —
    * `urlsToInclude`, `urlsToExclude`, `addXRayTraceIdHeader` (also a
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
index 6ee4820..65137eb 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.spec.ts
@@ -474,40 +474,12 @@ describe('UwtRumTelemetrySink', () => {
       });
     });
 
-    it("should add RUM's error plugin, capturing nothing itself, for recordError", async () => {
+    it("should leave the app's telemetries as they are, without adding RUM's error plugin", async () => {
       configure({ loadImpl: async () => bootstrap({ telemetries: ['http'] }) });
       await sink.init();
 
-      const { telemetries } = AwsRumCtor.mock.calls[0][3] as {
-        telemetries: [string, [string, { ignore: () => boolean }]];
-      };
-      expect(telemetries[0]).toBe('http');
-      expect(telemetries[1][0]).toBe('errors');
-      expect(telemetries[1][1].ignore()).toBe(true);
-    });
-
-    it('should not add a second error plugin when the app names it in another case, which RUM accepts', async () => {
-      configure({
-        loadImpl: async () => bootstrap({ telemetries: [['Errors', {}]] })
-      });
-      await sink.init();
-
       expect(AwsRumCtor.mock.calls[0][3]).toMatchObject({
-        telemetries: [['Errors', {}]]
-      });
-    });
-
-    it('should not add a second error plugin when the app loads its own, which RUM would reject', async () => {
-      const errors = { getPluginId: () => 'com.amazonaws.rum.js-error' };
-      configure({
-        loadImpl: async () =>
-          bootstrap({ telemetries: ['http'], eventPluginsToLoad: [errors] })
-      });
-      await sink.init();
-
-      expect(AwsRumCtor.mock.calls[0][3]).toMatchObject({
-        telemetries: ['http'],
-        eventPluginsToLoad: [errors]
+        telemetries: ['http']
       });
     });
 
@@ -1037,6 +1009,42 @@ describe('UwtRumTelemetrySink', () => {
       });
     });
 
+    it("should warn once, in every environment, when RUM rejects an error because 'errors' isn't loaded", async () => {
+      const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      awsRumInstance.recordError.mockImplementation(() => {
+        throw new Error('Invalid plugin ID: com.amazonaws.rum.js-error');
+      });
+      await sink.init();
+
+      sink.recordError({ name: 'TypeError', message: 'boom' });
+      sink.recordError({ name: 'TypeError', message: 'again' });
+
+      const warned = warn.mock.calls.filter((c) =>
+        String(c[0]).includes("'errors' telemetry isn't loaded")
+      );
+      expect(warned).toHaveLength(1);
+      expect(String(warned[0][0])).toContain('mirrorErrorsToRum: false');
+      warn.mockRestore();
+      awsRumInstance.recordError.mockReset();
+    });
+
+    it('should not take that warning for any other failure of recordError', async () => {
+      const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      awsRumInstance.recordError.mockImplementation(() => {
+        throw new Error('something else');
+      });
+      await sink.init();
+
+      expect(() =>
+        sink.recordError({ name: 'TypeError', message: 'boom' })
+      ).not.toThrow();
+      expect(
+        warn.mock.calls.some((c) => String(c[0]).includes("'errors' telemetry"))
+      ).toBe(false);
+      warn.mockRestore();
+      awsRumInstance.recordError.mockReset();
+    });
+
     it('should buffer an error recorded before init and replay it once ready', async () => {
       sink.recordError({ name: 'TypeError', message: 'boom' });
 
diff --git a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
index 299e7c8..98ff82c 100644
--- a/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
+++ b/projects/ngx-ui-watchtower/rum/src/lib/uwt-rum-telemetry.sink/uwt-rum-telemetry.sink.ts
@@ -20,7 +20,6 @@ import {
 } from '../uwt-rum-internal.util/uwt-rum-internal.util';
 import {
   UWT_RUM_CREDENTIALS_PROVIDER,
-  UwtRumAppMonitorConfig,
   UwtRumBootstrap,
   UwtRumCredentials
 } from '../uwt-rum-credentials/uwt-rum-credentials';
@@ -232,32 +231,6 @@ function withoutUnsetOptions(
   });
 }
 
-/** The id of RUM's error plugin, `JsErrorPlugin`, however it is loaded. */
-const ERROR_PLUGIN_ID = 'com.amazonaws.rum.js-error';
-
-/**
- * The app's telemetries, plus RUM's error plugin when neither they nor the
- * app's own `eventPluginsToLoad` have it. `recordError` goes through that
- * plugin — RUM rejects it otherwise — so it is added with its own capture of
- * unhandled errors switched off. RUM reads names in any case, and a second
- * one would make it throw.
- */
-function withErrorPlugin(
-  telemetries: NonNullable<UwtRumAppMonitorConfig['telemetries']>,
-  plugins: UwtRumAppMonitorConfig['eventPluginsToLoad']
-): UwtRumAppMonitorConfig['telemetries'] {
-  const named = (t: (typeof telemetries)[number]) =>
-    String(Array.isArray(t) ? t[0] : t).toLowerCase();
-  const loaded = (plugins ?? []).some(
-    (p) =>
-      (p as { getPluginId?: () => unknown } | null)?.getPluginId?.() ===
-      ERROR_PLUGIN_ID
-  );
-  return loaded || telemetries.some((t) => named(t) === 'errors')
-    ? telemetries
-    : [...telemetries, ['errors', { ignore: () => true }]];
-}
-
 /**
  * Telemetry sink backed by the AWS CloudWatch RUM web client.
  *
@@ -318,6 +291,7 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
    * or a refresh returned null; distinct from `!awsRum` alone.
    */
   private disabled = false;
+  private errorPluginWarned = false;
   /** Broker requests that failed at startup so far. */
   private initFailures = 0;
   /** When the first of them failed. */
@@ -531,7 +505,7 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
     this.recordOrBuffer(
       'rum.recordError',
       { kind: 'error', error, metadata },
-      (awsRum) => awsRum.recordError(this.withOrigin(error, metadata))
+      (awsRum) => this.recordErrorTo(awsRum, error, metadata)
     );
   }
 
@@ -707,16 +681,13 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
       endpoint:
         config.endpoint ??
         `https://dataplane.rum.${config.region}.amazonaws.com`,
-      telemetries: withErrorPlugin(
-        Array.isArray(config.telemetries)
-          ? withoutUnsetOptions(config.telemetries)
-          : (config.telemetries ?? [
-              'errors',
-              'performance',
-              ['http', { addXRayTraceIdHeader: [sameOrigin] }]
-            ]),
-        config.eventPluginsToLoad
-      ),
+      telemetries: Array.isArray(config.telemetries)
+        ? withoutUnsetOptions(config.telemetries)
+        : (config.telemetries ?? [
+            'errors',
+            'performance',
+            ['http', { addXRayTraceIdHeader: [sameOrigin] }]
+          ]),
 
       ...(config.client != null ? { client: config.client } : {}),
 
@@ -956,6 +927,34 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
     });
   }
 
+  /**
+   * Hands an error to RUM's `recordError`, which RUM rejects when its
+   * `errors` telemetry isn't loaded. The sink never edits the app's RUM
+   * config, so that is reported once, in every environment, and the error is
+   * not mirrored. Any other failure propagates to the caller's fail-open guard.
+   */
+  private recordErrorTo(
+    awsRum: AwsRum,
+    error: UwtTelemetryError,
+    metadata?: UwtTelemetryMetadata
+  ): void {
+    try {
+      awsRum.recordError(this.withOrigin(error, metadata));
+    } catch (failure) {
+      if (!/invalid plugin id/i.test(String((failure as Error)?.message))) {
+        throw failure;
+      }
+      if (!this.errorPluginWarned) {
+        this.errorPluginWarned = true;
+        uwtSafeVoid('rum.reportMissingErrorPlugin', () => {
+          console.warn(
+            "[ngx-ui-watchtower] RUM's 'errors' telemetry isn't loaded, so errors aren't mirrored to RUM. Add it to the RUM telemetries, or set mirrorErrorsToRum: false."
+          );
+        });
+      }
+    }
+  }
+
   private bufferItem(item: BufferedItem): void {
     this.buffer.push(item);
     if (this.buffer.length > PRE_INIT_BUFFER_LIMIT) {
@@ -978,7 +977,9 @@ export class UwtRumTelemetrySink extends UwtTelemetrySink implements OnDestroy {
         } else if (item.kind === 'pageView') {
           this.awsRum?.recordPageView(item.pageId);
         } else {
-          this.awsRum?.recordError(this.withOrigin(item.error, item.metadata));
+          if (this.awsRum) {
+            this.recordErrorTo(this.awsRum, item.error, item.metadata);
+          }
         }
       });
     }

From 4c643b5d752bf32aa762d33554e4ed9b8d67f282 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 11 Nov 2026 20:50:53 +0100
Subject: [PATCH 30/51] fix: close the inspector's open lists on page scroll
 and keep the wheel from the app

---
 CLAUDE.md                                     |  83 +++++++++++
 playwright/inspector-tools.spec.ts            |  70 +++++++++
 projects/ngx-ui-watchtower/DESIGN.md          |  14 ++
 .../uwt-inspector.component.scss              |   8 ++
 .../uwt-inspector.component.spec.ts           | 135 ++++++++++++++++++
 .../uwt-inspector/uwt-inspector.component.ts  |  86 +++++++++++
 6 files changed, 396 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..544cc7d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,83 @@
+# Claude Code Guidelines
+
+## Core Principles
+
+-   **Do only what was asked.** Make no unrequested changes. Keep the
+    scope of every change limited to the task.
+-   **Prefer simplicity over complexity.** Choose the simplest solution
+    that correctly addresses the problem. If a fix would introduce
+    noticeable complexity, stop and explain the trade-off before
+    proceeding.
+-   **Find the root cause first.** Investigate and understand the
+    underlying cause before changing code. Avoid speculative fixes and
+    symptom-only workarounds.
+-   **Never hide failing tests.** Do not delete, skip, weaken, disable,
+    or otherwise suppress a failing test just to make the test suite
+    pass.
+-   **Establish behavior before refactoring.** Add or verify
+    characterization tests before refactoring so existing behavior is
+    protected. For bug fixes, first create a test that reproduces the
+    bug and fails for the expected reason.
+-   **Write useful comments.** Comments should explain intent,
+    rationale, constraints, or context that cannot be made clear by the
+    code itself. Do not write comments that merely restate what the code
+    does.
+-   **Be transparent about verification.** Clearly report what was
+    tested or otherwise verified, what passed or failed, and what was
+    not verified. Never imply that checks were run when they were not.
+-   **Keep refactoring separate from behavior changes.** Do not combine
+    structural cleanup with changes to application behavior. Keep
+    changes focused and make behavior changes explicit.
+
+## Working Workflow
+
+1.  **Understand the request.** Identify the requested outcome and the
+    scope. Do not expand the task without asking.
+2.  **Inspect before editing.** Read the relevant code and tests, trace
+    the behavior, and identify the root cause.
+3.  **Plan the smallest viable change.** Prefer a focused fix over broad
+    redesigns, new abstractions, or unrelated cleanup.
+4.  **Protect existing behavior.** Before refactoring, establish the
+    relevant behavior with characterization tests. Before fixing a bug,
+    add a regression test that demonstrates it.
+5.  **Make the change.** Avoid unrelated formatting, renaming,
+    dependency changes, or file moves.
+6.  **Run relevant checks.** Execute the most relevant tests and checks
+    available. Do not alter tests merely to obtain a green result.
+7.  **Report accurately.** Summarize the change and list verification
+    results, including anything not run and any remaining uncertainty.
+
+## When a Fix Adds Complexity
+
+If the simplest correct fix appears to require a noticeable increase in
+complexity:
+
+-   Stop before implementing the more complex approach.
+-   Explain why the complexity is necessary.
+-   Describe the main trade-offs and, where practical, a simpler
+    alternative.
+-   Ask for direction before proceeding.
+
+## Testing Rules
+
+-   A bug fix should have a regression test that fails before the fix
+    and passes after it, whenever practical.
+-   A refactor should be protected by characterization tests that
+    capture the existing behavior.
+-   Preserve the intent and meaningful assertions of existing tests.
+-   If a test fails, investigate the failure; do not suppress it or
+    weaken its assertions to make the suite pass.
+-   Distinguish failures caused by the change from pre-existing or
+    environment-related failures.
+
+## Final Response
+
+At the end of the task, state:
+
+-   **Changed:** What was changed and why.
+-   **Verified:** Which tests, commands, or checks were actually run and
+    their results.
+-   **Not verified:** Relevant checks that were not run, could not be
+    run, or remain inconclusive.
+
+Do not claim success beyond what the evidence supports.
diff --git a/playwright/inspector-tools.spec.ts b/playwright/inspector-tools.spec.ts
index 85e8fd9..bafcc8c 100644
--- a/playwright/inspector-tools.spec.ts
+++ b/playwright/inspector-tools.spec.ts
@@ -363,3 +363,73 @@ test('in forced colours, the dock, the kind shown, Pause and solid buttons keep
     .getByRole('button', { name: 'Add', exact: true });
   expect(parseFloat(await css(add, 'border-top-width'))).toBeGreaterThan(0);
 });
+
+for (const dock of ['right', 'bottom', 'dialog']) {
+  test(`an open list closes when the page scrolls, instead of drifting away from its field, docked ${dock}`, async ({
+    page
+  }) => {
+    await page.addInitScript(
+      (d) =>
+        localStorage.setItem(
+          'ngx-ui-watchtower.eventInspector',
+          JSON.stringify({ dock: d })
+        ),
+      dock
+    );
+    // A page long enough to scroll, under the fixed inspector.
+    await openLab(page, 'scenarios');
+    await page.locator('.lab-header-button').click();
+    await expect(page.locator('uwt-inspector')).toBeVisible();
+    await page.getByRole('button', { name: 'Add filter' }).click();
+    const builder = page.getByRole('group', { name: 'New filter' });
+    const list = page.locator('.cps-menu-container');
+
+    for (const opener of [
+      builder.getByRole('combobox', { name: 'Field' }),
+      builder.getByRole('combobox', { name: 'Condition' }),
+      timeline(page).getByRole('button', { name: 'Export' })
+    ]) {
+      await opener.click();
+      await expect(list).toBeVisible();
+      await page.mouse.move(300, 400);
+      // The kit starts listening once the list has finished opening.
+      await expect(async () => {
+        await page.mouse.wheel(0, 100);
+        await expect(list).toBeHidden({ timeout: 300 });
+      }).toPass();
+      await page.evaluate(() => window.scrollTo(0, 0));
+    }
+  });
+}
+
+for (const dock of ['right', 'left', 'bottom', 'dialog']) {
+  test(`wheeling over the inspector, docked ${dock}, does not scroll the app under it`, async ({
+    page
+  }) => {
+    await page.addInitScript(
+      (d) =>
+        localStorage.setItem(
+          'ngx-ui-watchtower.eventInspector',
+          JSON.stringify({ dock: d })
+        ),
+      dock
+    );
+    // A page long enough to scroll.
+    await openLab(page, 'scenarios');
+    await page.locator('.lab-header-button').click();
+    await expect(page.locator('uwt-inspector')).toBeVisible();
+
+    const parts = ['.uwt-inspector__body', '.uwt-inspector__header'];
+    for (const part of parts) {
+      const found = page.locator(part).first();
+      if (!(await found.count())) {
+        continue; // The dialog's header is cps-dialog's.
+      }
+      const box = (await found.boundingBox())!;
+      await page.mouse.move(box.x + box.width / 2, box.y + 10);
+      await page.mouse.wheel(0, 200);
+      await page.waitForTimeout(250);
+      expect(await page.evaluate(() => scrollY)).toBe(0);
+    }
+  });
+}
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 503b666..938b74a 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2125,6 +2125,20 @@ A screen narrower than 640px has no room for a pane: the Dock buttons offer
 only the dialog and the window, and a pane remembered from a wider screen
 opens as a dialog there.
 
+A list opened from the inspector — the filter's field and condition, Export —
+closes when the page scrolls. The inspector is fixed, so the page scrolls under
+it, while cps-ui-kit puts an open list in the page, where it would scroll away
+from its field. The kit closes a list when a scrolling parent of its field
+scrolls, and every dock has one — the body, or the dialog's content — so the
+inspector passes the page's scroll on to it, and the kit does the rest. Only
+elements of the inspector hear it, never the app's.
+
+Wheeling over the inspector doesn't scroll the app under it. The body and the
+dialog's content use `overscroll-behavior: contain`; and because a part with
+nothing to scroll, like the header, still passes the wheel on in some browsers
+(WebKit), the inspector also keeps a wheel from the page unless a part under
+the pointer can scroll that way. Pinch zoom is left alone.
+
 A pane makes room by padding the page's `body` on its side, so content in
 the normal flow moves aside. A page can't shrink the browser's viewport —
 only the browser can, as DevTools does — so whatever is laid out against the
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index 4a24ec1..f352c30 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -46,6 +46,14 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  overscroll-behavior: contain;
+}
+
+// Wheeling over the inspector must not scroll the app under it: what the
+// body can't scroll any further passes to the page. Parts with nothing to
+// scroll are held by the component's wheel listener.
+::ng-deep .uwt-inspector-dialog .cps-dialog-content {
+  overscroll-behavior: contain;
 }
 
 :host(.uwt-inspector--framed) .uwt-inspector__body {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 485a237..aefc8ea 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -651,4 +651,139 @@ describe('UwtInspectorComponent', () => {
     TestBed.inject(UwtInspectorSession).end();
     expect(monitor.observed).toBe(false);
   });
+
+  describe('page scroll', () => {
+    /** What the kit's menus listen to: the body's own `scroll`. */
+    const heard = () => {
+      const listener = jest.fn();
+      el()
+        .querySelector('.uwt-inspector__body')!
+        .addEventListener('scroll', listener);
+      return listener;
+    };
+
+    it("should tell the page's scroll to its body, which the kit's open lists listen to", () => {
+      const listener = heard();
+
+      document.dispatchEvent(new Event('scroll'));
+
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("should tell it a scrolling element's too, not only the window's", () => {
+      const listener = heard();
+      const scroller = document.body.appendChild(document.createElement('div'));
+
+      scroller.dispatchEvent(new Event('scroll'));
+
+      expect(listener).toHaveBeenCalledTimes(1);
+      scroller.remove();
+    });
+
+    it('should leave scrolling inside the inspector to the kit, and not answer itself', () => {
+      const listener = heard();
+
+      el()
+        .querySelector('.uwt-inspector__body')!
+        .dispatchEvent(new Event('scroll'));
+
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("should leave an open list's own scrolling alone", () => {
+      const listener = heard();
+      const list = document.body.appendChild(document.createElement('div'));
+      list.className = 'cps-menu-container';
+
+      list.dispatchEvent(new Event('scroll'));
+
+      expect(listener).not.toHaveBeenCalled();
+      list.remove();
+    });
+
+    it('should stop once destroyed', () => {
+      const listener = heard();
+      fixture.destroy();
+
+      document.dispatchEvent(new Event('scroll'));
+
+      expect(listener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('wheel', () => {
+    const wheel = (
+      target: Element,
+      init: ConstructorParameters<typeof WheelEvent>[1] = { deltaY: 100 }
+    ) => {
+      const event = new WheelEvent('wheel', {
+        bubbles: true,
+        cancelable: true,
+        ...init
+      });
+      target.dispatchEvent(event);
+      return event;
+    };
+    /** A part with `room` to scroll: `top` scrolled of `extent` in a `size` window. */
+    const scrolling = (el: Element, top: number, extent = 400, size = 200) => {
+      (el as HTMLElement).style.overflowY = 'auto';
+      Object.defineProperties(el, {
+        scrollTop: { value: top, configurable: true },
+        clientHeight: { value: size, configurable: true },
+        scrollHeight: { value: extent, configurable: true }
+      });
+    };
+    const body = () => el().querySelector('.uwt-inspector__body')!;
+
+    it('should keep the wheel from the page where nothing in the inspector scrolls', () => {
+      fixture.componentRef.setInput('dock', 'right');
+      fixture.detectChanges();
+
+      expect(wheel(body()).defaultPrevented).toBe(true);
+      expect(
+        wheel(el().querySelector('.uwt-inspector__header')!).defaultPrevented
+      ).toBe(true);
+    });
+
+    it('should let a part scroll while it has room, either way', () => {
+      scrolling(body(), 100);
+
+      expect(wheel(body(), { deltaY: 100 }).defaultPrevented).toBe(false);
+      expect(wheel(body(), { deltaY: -100 }).defaultPrevented).toBe(false);
+    });
+
+    it('should keep it from the page once the part is at its end', () => {
+      scrolling(body(), 200);
+      expect(wheel(body(), { deltaY: 100 }).defaultPrevented).toBe(true);
+
+      scrolling(body(), 0);
+      expect(wheel(body(), { deltaY: -100 }).defaultPrevented).toBe(true);
+    });
+
+    it('should let a scrolling parent have it when what is inside is at its end', () => {
+      scrolling(body(), 100);
+      const inner = body().appendChild(document.createElement('div'));
+      scrolling(inner, 200);
+
+      expect(wheel(inner, { deltaY: 100 }).defaultPrevented).toBe(false);
+    });
+
+    it('should leave a pinch zoom, and a wheel already handled, alone', () => {
+      expect(
+        wheel(body(), { deltaY: 100, ctrlKey: true }).defaultPrevented
+      ).toBe(false);
+      body().addEventListener('wheel', (e) => e.preventDefault(), {
+        once: true
+      });
+      const event = wheel(body());
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('should stop once destroyed', () => {
+      const target = body();
+      fixture.destroy();
+
+      expect(wheel(target).defaultPrevented).toBe(false);
+    });
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index a880113..5e440c2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -9,6 +9,7 @@ import {
   inject,
   Injector,
   input,
+  NgZone,
   signal,
   viewChild
 } from '@angular/core';
@@ -171,6 +172,91 @@ export class UwtInspectorComponent {
         this.applyTransparency(maximized ? 0 : this.transparency());
       });
     afterNextRender(() => this.placeDialogLogo());
+    this.keepScrollingInside();
+  }
+
+  /**
+   * The inspector is fixed, so the page scrolls under it, and two things
+   * follow.
+   *
+   * cps-ui-kit puts an open list in the page, and closes it when a scrolling
+   * parent of its field scrolls, which the page is not for a fixed pane: the
+   * list would drift away from its field. Each dock has such a parent, the
+   * body or the dialog's content, so the page's scroll is passed on to it.
+   * Only the inspector's elements hear it. Scrolling inside the inspector or
+   * an open list is the kit's own.
+   *
+   * And a part that can't scroll, or has scrolled as far as it goes, passes
+   * the wheel on to the page. `overscroll-behavior` stops that in some
+   * browsers; the rest, and the header, are held here, unless a part under
+   * the pointer can scroll that way. A pinch zoom is left alone.
+   */
+  private keepScrollingInside(): void {
+    const host = this.host.nativeElement;
+    let passing = false;
+
+    this.listen(this.document, 'scroll', (event: Event) => {
+      const target = event.target;
+      if (
+        passing ||
+        (target instanceof Node && host.contains(target)) ||
+        (target instanceof Element && target.closest('.cps-menu-container'))
+      ) {
+        return;
+      }
+      passing = true;
+      [
+        host.querySelector('.uwt-inspector__body'),
+        host.closest('.cps-dialog-content')
+      ].forEach((el) => el?.dispatchEvent(new Event('scroll')));
+      passing = false;
+    });
+
+    this.listen(host, 'wheel', (event: WheelEvent) => {
+      if (event.ctrlKey || event.defaultPrevented) {
+        return;
+      }
+      // In the dialog, the frame's scrolling content holds the inspector.
+      const limit = host.closest('.cps-dialog') ?? host;
+      const down = event.deltaY > 0;
+      const canScroll = (el: Element): boolean =>
+        /auto|scroll/.test(getComputedStyle(el).overflowY) &&
+        // A pixel's slack, for fractional positions.
+        (down
+          ? el.scrollTop + el.clientHeight < el.scrollHeight - 1
+          : el.scrollTop > 0);
+      for (
+        let el = event.target instanceof Element ? event.target : null;
+        el && limit.contains(el);
+        el = el.parentElement
+      ) {
+        if (canScroll(el)) {
+          return;
+        }
+      }
+      event.preventDefault();
+    });
+  }
+
+  /** Listens once rendered, outside the zone, until destroyed. */
+  private listen<E extends Event>(
+    target: EventTarget,
+    type: string,
+    handler: (event: E) => void
+  ): void {
+    const zone = inject(NgZone);
+    const destroyRef = inject(DestroyRef);
+    // Scroll doesn't bubble: capture sees every element's. Wheel can be stopped.
+    const options = { capture: type === 'scroll', passive: type !== 'wheel' };
+    afterNextRender(() => {
+      const listener = handler as (event: Event) => void;
+      zone.runOutsideAngular(() =>
+        target.addEventListener(type, listener, options)
+      );
+      destroyRef.onDestroy(() =>
+        target.removeEventListener(type, listener, options)
+      );
+    });
   }
 
   /** Whether keyboard focus is anywhere in the inspector, header included. */

From 787819ecfbdfb912b73459ccb9ee46ba965da712 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 11 Nov 2026 21:02:38 +0100
Subject: [PATCH 31/51] link the lab header sign-in state to the Identity page

---
 README.md                                     |  1 +
 playwright/identity.spec.ts                   | 16 ++++++++++++++
 .../src/shell/shell.component.ts              | 12 ++++++++---
 projects/watchtower-lab/src/styles.scss       | 21 +++++++++++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1f4eb39..9dc8ce0 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,7 @@ The header's chips show how this load runs; where the broker is set
 differently for the next one, its chip says so: `broker: ok → null after
 reload`. On a narrow screen, or beside a docked pane, the chips fold behind
 **Run settings**, and the page list behind **Pages**.
+The header's **Signed in** or **Signed out** is a link to **Identity**.
 
 Options, read once at startup like an app's configuration, and kept in the
 address from the start page and through the page links, so a reload keeps
diff --git a/playwright/identity.spec.ts b/playwright/identity.spec.ts
index 96fdfee..99bd09c 100644
--- a/playwright/identity.spec.ts
+++ b/playwright/identity.spec.ts
@@ -71,3 +71,19 @@ for (const signOut of ['Sign out (undefined)', "Sign out ('')"]) {
     expect(tracked(events)[0].metadata.signedIn).toBe(false);
   });
 }
+
+test('the header says whether someone is signed in, and links to this page, keeping the options', async ({
+  page
+}) => {
+  await openLab(page, 'bi?destination=noop');
+  const user = page.locator('.lab-header').getByRole('link', {
+    name: /^Signed (in|out)$/
+  });
+  await expect(user).toBeVisible();
+
+  await user.click();
+
+  await expect(page).toHaveURL(/\/identity\?destination=noop/);
+  await expect(page.locator('lab-root main h1').first()).toBeVisible();
+  await expect(user).toHaveAttribute('aria-current', 'page');
+});
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 575385c..4bc94e6 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -71,9 +71,15 @@ function inEffect(now?: string, next?: string): string {
         </div>
       </details>
       <span class="lab-spacer"></span>
-      <span class="lab-user">{{
-        identity().userId ? 'Signed in' : 'Signed out'
-      }}</span>
+      <a
+        class="lab-user"
+        routerLink="identity"
+        queryParamsHandling="preserve"
+        ariaCurrentWhenActive="page"
+        routerLinkActive="active"
+        title="Identity page"
+        >{{ identity().userId ? 'Signed in' : 'Signed out' }}</a
+      >
       <button
         type="button"
         class="lab-header-button"
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index dc8f2f8..9aa8be5 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -113,7 +113,19 @@
 }
 
 .lab-user {
+  color: inherit;
   white-space: nowrap;
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible,
+  &.active {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    @include cps.focus-ring;
+  }
 }
 
 .lab-header-button {
@@ -153,6 +165,15 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
   }
+
+  // A link must show where focus is: it comes into view when focused.
+  .lab-user:focus-visible {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+  }
 }
 
 // The narrowest phones: a tighter header, so its button stays whole. On the

From ee844a5e1ee638b15bd40bdc6fd1315d3c83fa36 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 11 Nov 2026 21:06:02 +0100
Subject: [PATCH 32/51] add favicon for event inspector

---
 playwright/inspector.spec.ts                     | 14 ++++++++++++++
 .../uwt-inspector-window.spec.ts                 |  5 +++++
 .../uwt-inspector-window/uwt-inspector-window.ts | 16 ++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 1573419..cb6aa54 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -212,6 +212,20 @@ test('a separate window, with its own header and no slider', async ({
     window.locator('.uwt-inspector__brand uwt-inspector-logo')
   ).toHaveCount(1);
   await expect(window).toHaveTitle('Event Inspector · watchtower-lab');
+  // Its own icon, which the browser can draw.
+  const icon = window.locator('link[rel="icon"]');
+  await expect(icon).toHaveCount(1);
+  expect(
+    await icon.evaluate(
+      (link: HTMLLinkElement) =>
+        new Promise<number>((resolve) => {
+          const image = new Image();
+          image.onload = () => resolve(image.naturalWidth);
+          image.onerror = () => resolve(0);
+          image.src = link.href;
+        })
+    )
+  ).toBeGreaterThan(0);
   await expect(window.locator('cps-slider')).toHaveCount(0);
 });
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
index 0b8ddbc..7b0cb1b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -85,6 +85,11 @@ describe('uwtOpenInspectorWindow', () => {
       expect.stringMatching(/^popup,width=\d+,height=\d+$/)
     );
     expect(doc.title).toBe('Event Inspector · shop');
+    const icon = doc.querySelector<HTMLLinkElement>('link[rel="icon"]');
+    expect(icon?.type).toBe('image/svg+xml');
+    expect(decodeURIComponent(icon?.href ?? '')).toMatch(
+      /^data:image\/svg\+xml,<svg xmlns="http:\/\/www.w3.org\/2000\/svg".*<\/svg>$/
+    );
     expect(doc.head.textContent).toContain('.app {}');
     expect(doc.head.textContent).not.toContain('.stale');
     expect(doc.querySelector('.uwt-inspector__title')?.textContent).toBe(
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 940c834..02d1bb7 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -100,6 +100,7 @@ export function uwtOpenInspectorWindow(
     created.setInput('dock', 'window');
     options.appRef.attachView(created.hostView);
     created.changeDetectorRef.detectChanges();
+    setIcon(doc);
   } catch (error) {
     // Half open: close it again, for the caller to open a dialog instead.
     created?.destroy();
@@ -153,6 +154,21 @@ export function uwtOpenInspectorWindow(
   };
 }
 
+/**
+ * Gives the window the inspector's own mark as its icon, taken from the logo
+ * it drew: an app's icon, if any, would say nothing about this window, and a
+ * library can't count on serving a file.
+ */
+function setIcon(doc: Document): void {
+  const logo = doc.querySelector('uwt-inspector-logo svg');
+  if (logo) {
+    const link = doc.head.appendChild(doc.createElement('link'));
+    link.rel = 'icon';
+    link.type = 'image/svg+xml';
+    link.href = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(logo))}`;
+  }
+}
+
 /** 1200×800 at most the screen the first time, then where it was last. */
 function features(view: Window, geometry?: UwtInspectorWindowGeometry): string {
   const width = Math.min(geometry?.width ?? 1200, view.screen.availWidth);

From 39d6e7749687eca083fc0f2778c827824a1d33e9 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 11 Nov 2026 21:07:02 +0100
Subject: [PATCH 33/51] update design

---
 projects/ngx-ui-watchtower/DESIGN.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 938b74a..023fe74 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -249,7 +249,9 @@ across realms).
   document as its `DOCUMENT` and its own cps-ui-kit notification and
   announcer services, so tooltips, menus and messages appear in the window.
   The app's stylesheets are copied in and kept in step, since Angular adds
-  a component's styles when it first renders. One session holds the
+  a component's styles when it first renders. Its icon is the inspector's
+  own mark, an SVG taken from the logo it drew, as a library can't count on
+  serving a file. One session holds the
   captured history from opening to closing, so moving between docks — each
   a fresh view — loses nothing.
 - **Test doubles live in the specs that use them**, declared inline, never in

From 002fd59a02923ddc3b264181bca2d13d07bef16e Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 11 Nov 2026 21:53:34 +0100
Subject: [PATCH 34/51] update spacing

---
 projects/ngx-ui-watchtower/DESIGN.md          |  8 +++++++
 ...uwt-inspector-dock-switcher.component.scss |  2 +-
 .../uwt-inspector-filter-bar.component.scss   | 22 +++++++++++++++---
 .../uwt-inspector-timeline.component.scss     | 14 ++++++-----
 .../uwt-inspector.component.scss              | 23 +++++++++++++------
 5 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 023fe74..9a960a1 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2135,6 +2135,14 @@ scrolls, and every dock has one — the body, or the dialog's content — so the
 inspector passes the page's scroll on to it, and the kit does the rest. Only
 elements of the inspector hear it, never the app's.
 
+Spacing follows one scale, set as custom properties on the inspector host:
+`--uwt-inspector-space-s` (8px) inside a cluster of controls,
+`--uwt-inspector-space-m` (12px) between controls and between their rows,
+`--uwt-inspector-space-l` (24px) between groups, and `--uwt-inspector-pad`
+(20px) from the edge of a pane. What belongs together sits closer than what
+doesn't. They are internal, not part of the API. Buttons beside an input are
+as tall as it, so a row reads as one line.
+
 Wheeling over the inspector doesn't scroll the app under it. The body and the
 dialog's content use `overscroll-behavior: contain`; and because a part with
 nothing to scroll, like the header, still passes the wheel on in some browsers
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
index 7999646..572de52 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
@@ -2,7 +2,7 @@
 :host {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--uwt-inspector-space-m);
   font-size: 1rem;
   font-family: 'Source Sans Pro', sans-serif;
   color: var(--cps-color-text-dark);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
index d96dd54..2f99ed1 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-filter-bar/uwt-inspector-filter-bar.component.scss
@@ -5,7 +5,7 @@
 .uwt-inspector-filter-bar {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--uwt-inspector-space-m);
 }
 
 .uwt-inspector-filter-bar__row,
@@ -14,17 +14,33 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-  gap: 0.5rem;
+  gap: var(--uwt-inspector-space-m);
 }
 
 .uwt-inspector-filter-bar__active {
   align-items: center;
 }
 
+// The buttons beside the fields are as tall as the fields, so a row reads as
+// one line: the kit's small button is 2rem, its inputs 2.375rem.
+:host
+  ::ng-deep
+  :is(.uwt-inspector-filter-bar__row, .uwt-inspector-filter-bar__builder)
+  cps-button
+  .cps-button {
+  min-height: 2.375rem;
+}
+
 .uwt-inspector-filter-bar__search {
   flex: 1 1 18rem;
 }
 
+// The search box has no label above it, so its button centres on it; the
+// builder's labelled fields keep theirs level at the bottom.
+.uwt-inspector-filter-bar__row {
+  align-items: center;
+}
+
 .uwt-inspector-filter-bar__path {
   flex: 2 1 14rem;
 }
@@ -45,7 +61,7 @@
 .uwt-inspector-filter-bar__chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.375rem;
+  gap: var(--uwt-inspector-space-s);
   margin: 0;
   padding: 0;
   list-style: none;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
index 6f4a683..17117bd 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-timeline/uwt-inspector-timeline.component.scss
@@ -6,7 +6,7 @@
 .uwt-inspector-timeline {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--uwt-inspector-space-m);
 }
 
 // Export sits by the kind toggle, as it exports the kind shown. On the
@@ -16,7 +16,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem 1rem;
+  gap: var(--uwt-inspector-space-m) 1rem;
 }
 
 .uwt-inspector-timeline__notice {
@@ -32,8 +32,10 @@
 // detail), and an open row's payload wraps rather than widening the table.
 // Not a fixed layout: the open row spans 100 columns, which would squeeze
 // the real ones.
+// A little apart from the controls above it: the table is what they act on.
 :host ::ng-deep .uwt-inspector-timeline__table {
   width: 100%;
+  margin-top: calc(var(--uwt-inspector-space-s) / 2);
 }
 
 td {
@@ -109,20 +111,20 @@ td {
 .uwt-inspector-timeline__detail {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem 0.25rem;
+  gap: var(--uwt-inspector-space-m);
+  padding: var(--uwt-inspector-space-m) 0.25rem;
 }
 
 .uwt-inspector-timeline__meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem 1.25rem;
+  gap: var(--uwt-inspector-space-s) 1rem;
   margin: 0;
   font-size: 0.8125rem;
 
   div {
     display: flex;
-    gap: 0.375rem;
+    gap: var(--uwt-inspector-space-s);
   }
 
   dt {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index f352c30..34e51c5 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -1,4 +1,13 @@
 :host {
+  // One spacing scale for the whole inspector, so that what belongs together
+  // sits closer than what doesn't: `s` inside a cluster of controls, `m`
+  // between controls and between their rows, `l` between groups, `pad` from
+  // the edge of a pane.
+  --uwt-inspector-space-s: 0.5rem;
+  --uwt-inspector-space-m: 0.75rem;
+  --uwt-inspector-space-l: 1.5rem;
+  --uwt-inspector-pad: 1.25rem;
+
   display: block;
   color: var(--cps-text-primary);
 }
@@ -45,7 +54,7 @@
 .uwt-inspector__body {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--uwt-inspector-space-l);
   overscroll-behavior: contain;
 }
 
@@ -60,13 +69,13 @@
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: 1rem;
+  padding: var(--uwt-inspector-pad);
 }
 
 .uwt-inspector__toolbar {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--uwt-inspector-space-m);
 }
 
 .uwt-inspector__status-row {
@@ -74,7 +83,7 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem 1rem;
+  gap: var(--uwt-inspector-space-m) 1rem;
 }
 
 .uwt-inspector__status {
@@ -116,7 +125,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem 1rem;
+  gap: var(--uwt-inspector-space-m) 1rem;
 }
 
 .uwt-inspector__paused {
@@ -139,8 +148,8 @@
 .uwt-inspector__footer {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  padding-top: 0.5rem;
+  gap: var(--uwt-inspector-space-s);
+  padding-top: var(--uwt-inspector-space-m);
   border-top: 1px solid var(--cps-border-color);
   font-size: 0.75rem;
   color: var(--cps-text-secondary);

From 448e4ccacae78bc1a1ad5ca523f663eefb8b2a18 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Wed, 11 Nov 2026 22:32:13 +0100
Subject: [PATCH 35/51] a dock menu in place of the dock buttons when the
 inspector is narrow

---
 playwright/inspector.spec.ts                  |  38 +++-
 projects/ngx-ui-watchtower/DESIGN.md          |   6 +
 ...uwt-inspector-dock-switcher.component.html | 164 ++++++++++++------
 ...uwt-inspector-dock-switcher.component.scss | 103 ++++++++++-
 ...-inspector-dock-switcher.component.spec.ts |  98 +++++++++++
 .../uwt-inspector-dock-switcher.component.ts  |  40 ++++-
 .../uwt-inspector.component.html              |   1 +
 .../uwt-inspector.component.spec.ts           |  81 +++++++++
 .../uwt-inspector/uwt-inspector.component.ts  |  51 ++++++
 9 files changed, 519 insertions(+), 63 deletions(-)

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index cb6aa54..d15da6f 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -69,7 +69,9 @@ test('a phone-sized screen offers only the dialog and the window, and opens a re
   await shortcut(page);
   await expect(page.locator('.cps-dialog uwt-inspector')).toBeVisible();
   await expect(page.locator('uwt-inspector-pane')).toHaveCount(0);
-  await expect(page.locator('[data-dock]')).toHaveCount(2);
+  // Too narrow for the buttons: a menu, with the same two to offer.
+  await page.locator('.uwt-inspector-dock__trigger').click();
+  await expect(page.locator('[role="menuitemradio"]')).toHaveCount(2);
   await page.getByRole('button', { name: 'Close dialog' }).click();
   await expect(page.locator('uwt-inspector')).toHaveCount(0);
 
@@ -296,3 +298,37 @@ test('shows every kind in one timeline, and any shape — an unrecognised type,
   await expand('lab_huge_payload');
   await expect(timeline).toContainText('Large payload: showing the first');
 });
+
+test('a pane at its default width shows the dock buttons; dragged narrow, a menu of them', async ({
+  page
+}) => {
+  await press(page, 'Right pane');
+  const pane = page.locator('uwt-inspector-pane');
+  await expect(pane.locator('[data-dock]')).toHaveCount(5);
+  await expect(pane.locator('.uwt-inspector-dock__trigger')).toHaveCount(0);
+
+  // Down to its minimum, 30rem, by the keyboard: the handle's arrow away
+  // from the app narrows it, and stops there.
+  await pane.getByRole('separator').focus();
+  for (let i = 0; i < 4; i++) {
+    await page.keyboard.press('ArrowRight');
+  }
+  expect(Math.round((await pane.boundingBox())!.width)).toBe(480);
+  const trigger = pane.locator('.uwt-inspector-dock__trigger');
+  await expect(trigger).toBeVisible();
+  await expect(pane.locator('[data-dock]')).toHaveCount(0);
+  await expect(trigger).toHaveAccessibleName('Dock position: Dock right');
+
+  await trigger.click();
+  const items = page.getByRole('menuitemradio');
+  await expect(items).toHaveCount(5);
+  await expect(
+    page.getByRole('menuitemradio', { name: 'Dock right' })
+  ).toHaveAttribute('aria-checked', 'true');
+
+  await page.getByRole('menuitemradio', { name: 'Dock bottom' }).click();
+  await expect(page.locator('uwt-inspector-pane')).toHaveAttribute(
+    'class',
+    /uwt-inspector-pane--bottom/
+  );
+});
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 9a960a1..143901e 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2127,6 +2127,12 @@ A screen narrower than 640px has no room for a pane: the Dock buttons offer
 only the dialog and the window, and a pane remembered from a wider screen
 opens as a dialog there.
 
+Where the inspector is narrower than 34rem — a pane dragged towards its 30rem
+minimum, or a dialog on a phone — the five Dock buttons would take a row of
+their own, so one button shows the current dock and opens a menu of them all,
+each named. A pane opens at 36rem and keeps the buttons. The separate window
+always keeps them: a menu there would open against the app's window.
+
 A list opened from the inspector — the filter's field and condition, Export —
 closes when the page scrolls. The inspector is fixed, so the page scrolls under
 it, while cps-ui-kit puts an open list in the page, where it would scroll away
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
index fc01057..d2a4510 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.html
@@ -1,51 +1,117 @@
 <span class="uwt-inspector-dock__label" aria-hidden="true">Dock</span>
-<div
-  class="uwt-inspector-dock__group"
-  role="group"
-  aria-label="Dock the Event Inspector">
-  @for (option of options(); track option.dock) {
-    <button
-      type="button"
-      class="uwt-inspector-dock__option"
-      [attr.aria-pressed]="option.dock === dock()"
-      [attr.aria-label]="option.label"
-      [attr.data-dock]="option.dock"
-      [cpsTooltip]="option.label"
-      tooltipPosition="bottom"
-      (click)="choose(option.dock)">
-      @switch (option.dock) {
-        @case ('dialog') {
-          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
-            <rect x="5" y="6" width="7" height="5" rx="0.5" class="filled" />
-          </svg>
-        }
-        @case ('window') {
-          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-            <path d="M9.5 2.5h4v4M13.5 2.5 8 8" />
-            <path
-              d="M12 9.5V12a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 2 12V5a1.5 1.5 0 0 1 1.5-1.5H6" />
-          </svg>
-        }
-        @case ('left') {
-          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
-            <rect x="2" y="3" width="4.5" height="10" class="filled" />
-          </svg>
-        }
-        @case ('bottom') {
-          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
-            <rect x="2" y="8.5" width="12" height="4.5" class="filled" />
-          </svg>
-        }
-        @case ('right') {
-          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-            <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
-            <rect x="9.5" y="3" width="4.5" height="10" class="filled" />
-          </svg>
-        }
-      }
-    </button>
+
+<!-- The icon of a dock, drawn once for both forms below. -->
+<ng-template #icon let-dock>
+  @switch (dock) {
+    @case ('dialog') {
+      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+        <rect x="5" y="6" width="7" height="5" rx="0.5" class="filled" />
+      </svg>
+    }
+    @case ('window') {
+      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <path d="M9.5 2.5h4v4M13.5 2.5 8 8" />
+        <path
+          d="M12 9.5V12a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 2 12V5a1.5 1.5 0 0 1 1.5-1.5H6" />
+      </svg>
+    }
+    @case ('left') {
+      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+        <rect x="2" y="3" width="4.5" height="10" class="filled" />
+      </svg>
+    }
+    @case ('bottom') {
+      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+        <rect x="2" y="8.5" width="12" height="4.5" class="filled" />
+      </svg>
+    }
+    @case ('right') {
+      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+        <rect x="9.5" y="3" width="4.5" height="10" class="filled" />
+      </svg>
+    }
   }
-</div>
+</ng-template>
+
+@if (compact()) {
+  <!-- Too narrow for five buttons: the current dock, and the rest on request. -->
+  <button
+    type="button"
+    class="uwt-inspector-dock__trigger"
+    aria-haspopup="menu"
+    [attr.aria-expanded]="open()"
+    [attr.aria-label]="'Dock position: ' + currentLabel()"
+    (click)="menu.toggle($event)">
+    <ng-container
+      [ngTemplateOutlet]="icon"
+      [ngTemplateOutletContext]="{ $implicit: dock() }" />
+    <svg
+      class="uwt-inspector-dock__chevron"
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      focusable="false">
+      <path d="m4 6 4 4 4-4" />
+    </svg>
+  </button>
+  <cps-menu
+    #menu
+    [withArrow]="false"
+    (menuShown)="open.set(true)"
+    (menuHidden)="open.set(false)">
+    <div
+      class="uwt-inspector-dock__menu"
+      role="menu"
+      aria-label="Dock the Event Inspector"
+      (keydown)="onMenuKey($event)">
+      @for (option of options(); track option.dock) {
+        <button
+          type="button"
+          class="uwt-inspector-dock__item"
+          role="menuitemradio"
+          [attr.aria-checked]="option.dock === dock()"
+          [attr.data-dock]="option.dock"
+          [tabindex]="option.dock === dock() ? 0 : -1"
+          (click)="menu.hide(); choose(option.dock)">
+          <ng-container
+            [ngTemplateOutlet]="icon"
+            [ngTemplateOutletContext]="{ $implicit: option.dock }" />
+          <span class="uwt-inspector-dock__item-label">{{ option.label }}</span>
+          @if (option.dock === dock()) {
+            <svg
+              class="uwt-inspector-dock__check"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+              focusable="false">
+              <path d="m3.5 8.5 3 3 6-7" />
+            </svg>
+          }
+        </button>
+      }
+    </div>
+  </cps-menu>
+} @else {
+  <div
+    class="uwt-inspector-dock__group"
+    role="group"
+    aria-label="Dock the Event Inspector">
+    @for (option of options(); track option.dock) {
+      <button
+        type="button"
+        class="uwt-inspector-dock__option"
+        [attr.aria-pressed]="option.dock === dock()"
+        [attr.aria-label]="option.label"
+        [attr.data-dock]="option.dock"
+        [cpsTooltip]="option.label"
+        tooltipPosition="bottom"
+        (click)="choose(option.dock)">
+        <ng-container
+          [ngTemplateOutlet]="icon"
+          [ngTemplateOutletContext]="{ $implicit: option.dock }" />
+      </button>
+    }
+  </div>
+}
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
index 572de52..fff53cc 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.scss
@@ -54,24 +54,109 @@
     outline-offset: 0.125rem;
     box-shadow: 0 0 0 0.25rem var(--cps-color-calm-highlighten);
   }
+}
+
+svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.2;
+}
+
+.filled {
+  fill: currentColor;
+  stroke: none;
+}
+
+// Narrow: the current dock and a chevron, opening a list of every dock, each
+// named — the buttons' icons alone need their tooltips.
+.uwt-inspector-dock__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  border: 0.0625rem solid var(--cps-color-calm);
+  border-radius: 0.25rem;
+  background-color: #fff;
+  color: var(--cps-color-calm);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--cps-color-calm-lighten5);
+  }
+
+  &[aria-expanded='true'] {
+    background-color: var(--cps-color-calm);
+    color: #fff;
+  }
+
+  &:focus-visible {
+    outline: 0.0625rem solid var(--cps-color-calm);
+    outline-offset: 0.125rem;
+    box-shadow: 0 0 0 0.25rem var(--cps-color-calm-highlighten);
+  }
+}
+
+.uwt-inspector-dock__chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+// In the overlay cps-menu draws, so it names its own font and colour.
+.uwt-inspector-dock__menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 11rem;
+  padding: 0.25rem;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 0.875rem;
+  color: var(--cps-color-text-dark);
+}
+
+.uwt-inspector-dock__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 2.25rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: 0.25rem;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--cps-color-calm-lighten5);
+  }
 
-  svg {
-    width: 1rem;
-    height: 1rem;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.2;
+  &[aria-checked='true'] {
+    font-weight: 600;
+    color: var(--cps-color-calm);
   }
 
-  .filled {
-    fill: currentColor;
-    stroke: none;
+  &:focus-visible {
+    outline: 0.0625rem solid var(--cps-color-calm);
+    outline-offset: -0.0625rem;
+    background-color: var(--cps-color-calm-lighten5);
   }
 }
 
+.uwt-inspector-dock__item-label {
+  flex: 1;
+}
+
+.uwt-inspector-dock__check {
+  stroke-width: 1.6;
+}
+
 // Forced colours drop the fill that marks the current dock: it takes the
 // system's selection colours instead.
 @media (forced-colors: active) {
+  .uwt-inspector-dock__trigger[aria-expanded='true'],
   .uwt-inspector-dock__option[aria-pressed='true'] {
     forced-color-adjust: none;
     border-color: Highlight;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
index 4cbd44a..f4fe3a5 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UwtInspectorDock } from '../uwt-inspector.models/uwt-inspector.models';
 import { UwtInspectorDockSwitcherComponent } from './uwt-inspector-dock-switcher.component';
 
@@ -11,6 +12,7 @@ describe('UwtInspectorDockSwitcherComponent', () => {
     );
 
   beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [NoopAnimationsModule] });
     fixture = TestBed.createComponent(UwtInspectorDockSwitcherComponent);
     chosen = [];
     fixture.componentInstance.dockChange.subscribe((d) => chosen.push(d));
@@ -47,4 +49,100 @@ describe('UwtInspectorDockSwitcherComponent', () => {
 
     expect(chosen).toEqual(['window']);
   });
+
+  describe('compact', () => {
+    const trigger = () =>
+      (fixture.nativeElement as HTMLElement).querySelector<HTMLButtonElement>(
+        '.uwt-inspector-dock__trigger'
+      )!;
+    const items = () =>
+      Array.from(
+        document.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
+      );
+    /** Opens the menu; its animation callbacks run once the app is stable. */
+    const open = async () => {
+      trigger().click();
+      fixture.detectChanges();
+      await fixture.whenStable();
+      fixture.detectChanges();
+    };
+
+    beforeEach(() => {
+      fixture.componentRef.setInput('compact', true);
+      fixture.detectChanges();
+    });
+
+    afterEach(() => fixture.destroy());
+
+    it('should show the current dock as one button that opens a menu, not the five', () => {
+      expect(buttons()).toEqual([trigger()]);
+      expect(trigger().getAttribute('aria-haspopup')).toBe('menu');
+      expect(trigger().getAttribute('aria-expanded')).toBe('false');
+      expect(trigger().getAttribute('aria-label')).toBe(
+        'Dock position: Dock right'
+      );
+    });
+
+    it('should list every dock by name in the menu, the current one checked', async () => {
+      await open();
+
+      expect(trigger().getAttribute('aria-expanded')).toBe('true');
+      expect(items().map((i) => i.textContent?.trim())).toEqual([
+        'Dialog',
+        'Separate window',
+        'Dock left',
+        'Dock bottom',
+        'Dock right'
+      ]);
+      expect(items().map((i) => i.getAttribute('aria-checked'))).toEqual([
+        'false',
+        'false',
+        'false',
+        'false',
+        'true'
+      ]);
+    });
+
+    it('should offer only the dialog and the window without room for a pane', async () => {
+      fixture.componentRef.setInput('panes', false);
+      fixture.detectChanges();
+      await open();
+
+      expect(items().map((i) => i.getAttribute('data-dock'))).toEqual([
+        'dialog',
+        'window'
+      ]);
+    });
+
+    it('should ask for the dock chosen, and close; the current one asks for nothing', async () => {
+      await open();
+      items()[2].click();
+      fixture.detectChanges();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(chosen).toEqual(['left']);
+      expect(trigger().getAttribute('aria-expanded')).toBe('false');
+
+      await open();
+      items()[4].click();
+      expect(chosen).toEqual(['left']);
+    });
+
+    it('should move between the items with the arrow keys, Home and End', async () => {
+      await open();
+      const press = (key: string) => {
+        document.activeElement?.dispatchEvent(
+          new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+        );
+        return document.activeElement;
+      };
+      items()[4].focus();
+
+      expect(press('ArrowDown')).toBe(items()[0]);
+      expect(press('ArrowUp')).toBe(items()[4]);
+      expect(press('Home')).toBe(items()[0]);
+      expect(press('End')).toBe(items()[4]);
+    });
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
index 4466476..fcb8f1c 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component.ts
@@ -1,11 +1,13 @@
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   computed,
   input,
-  output
+  output,
+  signal
 } from '@angular/core';
-import { CpsTooltipDirective } from 'cps-ui-kit';
+import { CpsMenuComponent, CpsTooltipDirective } from 'cps-ui-kit';
 import {
   UWT_INSPECTOR_DOCKS,
   UwtInspectorDock
@@ -23,11 +25,12 @@ const DOCK_LABEL: Record<UwtInspectorDock, string> = {
  * Moves the inspector between docks, like Chrome DevTools' dock side: one
  * icon per dock, the current one pressed. cps-ui-kit has no dock icons, so
  * they are drawn here. Without room for a pane, only the dialog and the
- * window are offered.
+ * window are offered. Where the inspector is too narrow for the buttons, one
+ * button shows the current dock and opens a menu of them all.
  */
 @Component({
   selector: 'uwt-inspector-dock-switcher',
-  imports: [CpsTooltipDirective],
+  imports: [CpsMenuComponent, CpsTooltipDirective, NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './uwt-inspector-dock-switcher.component.html',
   styleUrl: './uwt-inspector-dock-switcher.component.scss'
@@ -36,6 +39,8 @@ export class UwtInspectorDockSwitcherComponent {
   readonly dock = input.required<UwtInspectorDock>();
   /** Whether the panes are offered; not on a narrow screen. */
   readonly panes = input(true);
+  /** Too narrow for the buttons: a menu instead. */
+  readonly compact = input(false);
   readonly dockChange = output<UwtInspectorDock>();
 
   protected readonly options = computed(() =>
@@ -44,6 +49,33 @@ export class UwtInspectorDockSwitcherComponent {
     ).map((dock) => ({ dock, label: DOCK_LABEL[dock] }))
   );
 
+  protected readonly open = signal(false);
+
+  protected readonly currentLabel = computed(() => DOCK_LABEL[this.dock()]);
+
+  /** Arrow keys, Home and End move between the menu's items. */
+  protected onMenuKey(event: KeyboardEvent): void {
+    const items = Array.from(
+      (event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>(
+        '[role="menuitemradio"]'
+      )
+    );
+    const at = items.indexOf(
+      (event.currentTarget as HTMLElement).ownerDocument
+        .activeElement as HTMLElement
+    );
+    const next: Record<string, number> = {
+      ArrowDown: (at + 1) % items.length,
+      ArrowUp: (at - 1 + items.length) % items.length,
+      Home: 0,
+      End: items.length - 1
+    };
+    if (event.key in next && items.length) {
+      event.preventDefault();
+      items[next[event.key]].focus();
+    }
+  }
+
   protected choose(dock: UwtInspectorDock): void {
     if (dock !== this.dock()) {
       this.dockChange.emit(dock);
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index 0fc2ba0..f4f1f24 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -40,6 +40,7 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
       <uwt-inspector-dock-switcher
         [dock]="dock()"
         [panes]="panesFit()"
+        [compact]="compact()"
         (dockChange)="setDock($event)">
       </uwt-inspector-dock-switcher>
     </div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index aefc8ea..00be174 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -786,4 +786,85 @@ describe('UwtInspectorComponent', () => {
       expect(wheel(target).defaultPrevented).toBe(false);
     });
   });
+
+  describe('dock menu', () => {
+    const original = window.ResizeObserver;
+    let resize: (width: number) => void;
+    const trigger = () => el().querySelector('.uwt-inspector-dock__trigger');
+    const group = () => el().querySelector('.uwt-inspector-dock__group');
+
+    /** Opens the inspector in `dock`, with a ResizeObserver to drive. */
+    const open = async (dock: 'right' | 'window') => {
+      fixture.destroy();
+      // cps-ui-kit observes things too: only what watches the inspector drives.
+      type Callback = ConstructorParameters<typeof ResizeObserver>[0];
+      window.ResizeObserver = class {
+        private readonly callback: Callback;
+
+        constructor(callback: Callback) {
+          this.callback = callback;
+        }
+
+        observe(target: Element): void {
+          if (target === fixture.nativeElement) {
+            resize = (width) =>
+              this.callback(
+                [{ contentRect: { width } } as ResizeObserverEntry],
+                this as unknown as ResizeObserver
+              );
+          }
+        }
+
+        disconnect(): void {}
+      } as unknown as typeof ResizeObserver;
+      fixture = TestBed.createComponent(UwtInspectorComponent);
+      fixture.componentRef.setInput('dock', dock);
+      fixture.detectChanges();
+      // Observing starts after the first render, a tick on. (whenStable
+      // would wait for the inspector's interval.)
+      await new Promise<void>((resolve) =>
+        jest.requireActual('timers').setImmediate(resolve)
+      );
+    };
+
+    beforeEach(() => {
+      // The change is made on the next frame: here, at once.
+      jest
+        .spyOn(window, 'requestAnimationFrame')
+        .mockImplementation((frame) => {
+          frame(0);
+          return 0;
+        });
+    });
+
+    afterEach(() => {
+      window.ResizeObserver = original;
+      jest.restoreAllMocks();
+    });
+
+    it('should swap the dock buttons for a menu in a pane narrower than 34rem, and back', async () => {
+      await open('right');
+      expect(group()).not.toBeNull();
+
+      resize(479);
+      fixture.detectChanges();
+      expect(trigger()).not.toBeNull();
+      expect(group()).toBeNull();
+
+      resize(576);
+      fixture.detectChanges();
+      expect(trigger()).toBeNull();
+      expect(group()).not.toBeNull();
+    });
+
+    it('should keep the buttons in the separate window, however narrow', async () => {
+      await open('window');
+
+      resize(300);
+      fixture.detectChanges();
+
+      expect(trigger()).toBeNull();
+      expect(group()).not.toBeNull();
+    });
+  });
 });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 5e440c2..145a38c 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -53,6 +53,13 @@ import {
 /** Screen readers hear about new events at most this often, in ms. */
 const ANNOUNCE_EVERY_MS = 10_000;
 
+/**
+ * Narrower than this, in rem, the dock buttons give way to a menu: beside the
+ * status line they no longer fit one row. A pane opens at 36rem, so it is
+ * only a pane dragged towards its 30rem minimum, or a dialog on a phone.
+ */
+const DOCK_MENU_BELOW_REM = 34;
+
 /**
  * The Event Inspector's content, shown by {@link UwtEventInspectorService}
  * in a non-modal cps-dialog, a pane or its own window. Capturing is
@@ -152,6 +159,9 @@ export class UwtInspectorComponent {
   /** A maximized dialog covers the app, so it isn't see-through. */
   protected readonly maximized = signal(false);
 
+  /** Too narrow for the dock buttons, which a menu replaces. */
+  protected readonly compact = signal(false);
+
   private readonly dialogLogo = viewChild('dialogLogo', { read: ElementRef });
 
   private readonly pauseSwitch = viewChild('pauseSwitch', { read: ElementRef });
@@ -173,6 +183,47 @@ export class UwtInspectorComponent {
       });
     afterNextRender(() => this.placeDialogLogo());
     this.keepScrollingInside();
+    this.watchWidth();
+  }
+
+  /**
+   * Whether the inspector is too narrow for the dock buttons: in a narrow
+   * pane they would take a row of their own. Not in the separate window,
+   * whose menu would open against the app's window.
+   */
+  private watchWidth(): void {
+    const zone = inject(NgZone);
+    const destroyRef = inject(DestroyRef);
+    afterNextRender(() => {
+      const host = this.host.nativeElement;
+      const view = host.ownerDocument.defaultView;
+      if (!view?.ResizeObserver) {
+        return;
+      }
+      const rem =
+        parseFloat(
+          view.getComputedStyle(host.ownerDocument.documentElement).fontSize
+        ) || 16;
+      let width = -1;
+      const observer = new view.ResizeObserver(([entry]) => {
+        // Only width matters, and what changes the layout waits for the next
+        // frame: doing it here, as the row's height changes, would make the
+        // browser report a ResizeObserver loop.
+        if (entry.contentRect.width === width) {
+          return;
+        }
+        width = entry.contentRect.width;
+        view.requestAnimationFrame(() => {
+          const compact =
+            width < DOCK_MENU_BELOW_REM * rem && this.dock() !== 'window';
+          if (compact !== this.compact()) {
+            zone.run(() => this.compact.set(compact));
+          }
+        });
+      });
+      zone.runOutsideAngular(() => observer.observe(host));
+      destroyRef.onDestroy(() => observer.disconnect());
+    });
   }
 
   /**

From 124a70a5d1edaea23ff84e2df9a6c149a3e318c2 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 12 Nov 2026 16:45:07 +0100
Subject: [PATCH 36/51] convert header sign-in state to a status with a tooltip

---
 README.md                                     |  3 +-
 playwright/fragment.spec.ts                   |  4 +++
 playwright/identity.spec.ts                   | 21 ++++++------
 projects/watchtower-lab/src/lab/lab-users.ts  | 14 ++++++++
 .../src/shell/pages/identity.page.ts          |  5 +--
 .../src/shell/shell.component.ts              | 32 ++++++++++++++-----
 projects/watchtower-lab/src/styles.scss       | 22 +------------
 7 files changed, 55 insertions(+), 46 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-users.ts

diff --git a/README.md b/README.md
index 9dc8ce0..00c7b06 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,8 @@ The header's chips show how this load runs; where the broker is set
 differently for the next one, its chip says so: `broker: ok → null after
 reload`. On a narrow screen, or beside a docked pane, the chips fold behind
 **Run settings**, and the page list behind **Pages**.
-The header's **Signed in** or **Signed out** is a link to **Identity**.
+The header's **Signed in** or **Signed out** only shows the state:
+**Identity** and the fragments both sign in and out.
 
 Options, read once at startup like an app's configuration, and kept in the
 address from the start page and through the page links, so a reload keeps
diff --git a/playwright/fragment.spec.ts b/playwright/fragment.spec.ts
index 5fd82db..c4b5fa3 100644
--- a/playwright/fragment.spec.ts
+++ b/playwright/fragment.spec.ts
@@ -90,6 +90,10 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
     // Signing in or out in the fragment applies to the shell.
     await press(fragment, 'Sign in as Carla');
     await expect(page.locator('.lab-status')).toContainText(CARLA);
+    await page.locator('.lab-header .lab-user').hover();
+    await expect(page.locator('.cps-tooltip-content')).toHaveText(
+      `Signed in as Carla (${CARLA})`
+    );
     await press(fragment, 'Sign out');
     await expect(page.locator('.lab-status')).not.toContainText(CARLA);
   });
diff --git a/playwright/identity.spec.ts b/playwright/identity.spec.ts
index 99bd09c..9aa7cdc 100644
--- a/playwright/identity.spec.ts
+++ b/playwright/identity.spec.ts
@@ -72,18 +72,15 @@ for (const signOut of ['Sign out (undefined)', "Sign out ('')"]) {
   });
 }
 
-test('the header says whether someone is signed in, and links to this page, keeping the options', async ({
+test('the header shows who is signed in, from any page, and is no link', async ({
   page
 }) => {
-  await openLab(page, 'bi?destination=noop');
-  const user = page.locator('.lab-header').getByRole('link', {
-    name: /^Signed (in|out)$/
-  });
-  await expect(user).toBeVisible();
-
-  await user.click();
-
-  await expect(page).toHaveURL(/\/identity\?destination=noop/);
-  await expect(page.locator('lab-root main h1').first()).toBeVisible();
-  await expect(user).toHaveAttribute('aria-current', 'page');
+  await navigate(page, 'BI events');
+  const user = page.locator('.lab-header .lab-user');
+  await expect(user).toHaveText('Signed in');
+  await user.hover();
+  await expect(page.locator('.cps-tooltip-content')).toHaveText(
+    `Signed in as Anna (${ANNA})`
+  );
+  await expect(page.locator('.lab-header').getByRole('link')).toHaveCount(0);
 });
diff --git a/projects/watchtower-lab/src/lab/lab-users.ts b/projects/watchtower-lab/src/lab/lab-users.ts
new file mode 100644
index 0000000..17606e4
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-users.ts
@@ -0,0 +1,14 @@
+/** RUM user ids must be UUIDs. */
+export const ANNA = '3f2504e0-4f89-41d3-9a0c-0305e82c3301';
+export const BEN = '9b2d1c6e-7a53-4d0e-8f3b-2c1a5e6d7f80';
+export const CARLA = '5c8e2f14-1b7d-4a96-9e3c-8d2b7f4a6c10';
+
+/**
+ * The people the lab signs in, by id. Carla signs in from the fragment, a
+ * separate app that keeps its own copy of her id.
+ */
+export const LAB_USER_NAMES: Record<string, string> = {
+  [ANNA]: 'Anna',
+  [BEN]: 'Ben',
+  [CARLA]: 'Carla'
+};
diff --git a/projects/watchtower-lab/src/shell/pages/identity.page.ts b/projects/watchtower-lab/src/shell/pages/identity.page.ts
index c3ce539..f6b74ef 100644
--- a/projects/watchtower-lab/src/shell/pages/identity.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/identity.page.ts
@@ -7,10 +7,7 @@ import {
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
 import { CpsButtonComponent } from 'cps-ui-kit';
 import { LabResultsComponent } from '../../lab/lab-results.component';
-
-/** RUM user ids must be UUIDs. */
-const ANNA = '3f2504e0-4f89-41d3-9a0c-0305e82c3301';
-const BEN = '9b2d1c6e-7a53-4d0e-8f3b-2c1a5e6d7f80';
+import { ANNA, BEN } from '../../lab/lab-users';
 
 @Component({
   selector: 'lab-identity-page',
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 4bc94e6..56a2ea2 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -19,11 +19,13 @@ import {
   RouterLinkActive,
   RouterOutlet
 } from '@angular/router';
+import { CpsTooltipDirective } from 'cps-ui-kit';
 import { filter } from 'rxjs';
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtEventInspectorService } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import { LabLayout } from '../lab/lab-layout.service';
 import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
+import { LAB_USER_NAMES } from '../lab/lab-users';
 import { labTelemetriesLabel, LabWire } from '../lab/lab-wire.service';
 import { LAB_OPTIONS, SHELL_GROUPS, SHELL_PAGES } from './shell.config';
 
@@ -43,7 +45,13 @@ function inEffect(now?: string, next?: string): string {
 /** The lab's frame: a fixed header, the pages, and a fixed status bar. */
 @Component({
   selector: 'lab-root',
-  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, RouterOutlet],
+  imports: [
+    CpsTooltipDirective,
+    NgTemplateOutlet,
+    RouterLink,
+    RouterLinkActive,
+    RouterOutlet
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   // On the document: Safari doesn't focus a button it clicks, so Escape
   // after opening the nav with the mouse wouldn't come from inside it.
@@ -71,14 +79,12 @@ function inEffect(now?: string, next?: string): string {
         </div>
       </details>
       <span class="lab-spacer"></span>
-      <a
+      <span
         class="lab-user"
-        routerLink="identity"
-        queryParamsHandling="preserve"
-        ariaCurrentWhenActive="page"
-        routerLinkActive="active"
-        title="Identity page"
-        >{{ identity().userId ? 'Signed in' : 'Signed out' }}</a
+        [cpsTooltip]="userTitle()"
+        tooltipOpenDelay="0"
+        tooltipPosition="bottom"
+        >{{ identity().userId ? 'Signed in' : 'Signed out' }}</span
       >
       <button
         type="button"
@@ -185,6 +191,16 @@ export class ShellComponent {
     pages: SHELL_PAGES.filter((page) => page.group === name)
   }));
 
+  /** Who is signed in: their name, when the lab knows it, and their id. */
+  protected readonly userTitle = computed(() => {
+    const id = this.identity().userId;
+    if (!id) {
+      return 'Nobody is signed in';
+    }
+    const name = LAB_USER_NAMES[id];
+    return `Signed in as ${name ? `${name} (${id})` : id}`;
+  });
+
   /** Whether the folded nav is open, on a narrow screen. */
   protected readonly navOpen = signal(false);
   private readonly path = signal('');
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 9aa8be5..8b302d0 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -113,19 +113,8 @@
 }
 
 .lab-user {
-  color: inherit;
   white-space: nowrap;
-  text-decoration: none;
-
-  &:hover,
-  &:focus-visible,
-  &.active {
-    text-decoration: underline;
-  }
-
-  &:focus-visible {
-    @include cps.focus-ring;
-  }
+  cursor: default;
 }
 
 .lab-header-button {
@@ -165,15 +154,6 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
   }
-
-  // A link must show where focus is: it comes into view when focused.
-  .lab-user:focus-visible {
-    position: static;
-    width: auto;
-    height: auto;
-    overflow: visible;
-    clip: auto;
-  }
 }
 
 // The narrowest phones: a tighter header, so its button stays whole. On the

From 69dbcfc0c943d473b73f777a22aeff9133326002 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 12 Nov 2026 17:11:44 +0100
Subject: [PATCH 37/51] replace browser default outline with focus ring

---
 playwright/inspector.spec.ts                  | 21 +++++++++++++++++++
 .../uwt-inspector.component.scss              | 19 +++++++++++++++++
 projects/watchtower-lab/src/styles.scss       | 17 +++++++++++----
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index d15da6f..4e83678 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -113,6 +113,27 @@ test('the Dialog button moves it from a pane to the dialog', async ({
   await expect(page.locator('uwt-inspector-pane')).toHaveCount(0);
 });
 
+test('the inspector focused by the shortcut shows the focus ring, not the browser default outline', async ({
+  page
+}) => {
+  await shortcut(page);
+  const inspector = page.locator('.cps-dialog uwt-inspector');
+  await expect(inspector).toBeFocused();
+
+  const look = await inspector.evaluate((el) => {
+    const style = getComputedStyle(el);
+    const ring = getComputedStyle(el, '::before');
+    return {
+      outline: style.outlineStyle,
+      ring: ring.content !== 'none' && parseFloat(ring.borderTopWidth) > 0
+    };
+  });
+  expect(look).toEqual({ outline: 'none', ring: true });
+
+  // The ring spans the inspector, and must leave its controls clickable.
+  await inspector.getByRole('button', { name: 'Clear' }).click();
+});
+
 test('Shift+E+I opens it, brings focus back, and closes it from inside — never while typing', async ({
   page
 }) => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index 34e51c5..f97b42b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -1,3 +1,5 @@
+@use 'cps-ui-kit/styles/mixins' as cps;
+
 :host {
   // One spacing scale for the whole inspector, so that what belongs together
   // sits closer than what doesn't: `s` inside a cluster of controls, `m`
@@ -12,6 +14,23 @@
   color: var(--cps-text-primary);
 }
 
+// What the shortcut focuses (see focusInspector()), with cps-ui-kit's ring in
+// place of the browser's outline. A dialog has padding for it to sit in; a
+// pane or window has none, and would cut it off, so there it goes inside.
+:host(:focus-visible) {
+  @include cps.focus-ring;
+
+  // The ring spans the whole inspector: it mustn't take its clicks.
+  &::before,
+  &::after {
+    pointer-events: none;
+  }
+}
+
+:host(.uwt-inspector--framed:focus-visible) {
+  @include cps.focus-ring(-0.125rem, -0.25rem, 0);
+}
+
 // In a pane or window: a header like cps-dialog's, and a body that scrolls.
 :host(.uwt-inspector--framed) {
   display: flex;
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 8b302d0..886949e 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -18,6 +18,12 @@
   &:focus {
     transform: none;
   }
+
+  &:focus-visible {
+    @include cps.focus-ring;
+    // The mixin makes it relative; it must stay fixed to the window.
+    position: fixed;
+  }
 }
 
 .lab-main:focus {
@@ -453,13 +459,16 @@ html.lab-insets {
 }
 
 // A table wider than a small screen scrolls on its own, not the page.
+// A scrolling box takes the focus with an outline, not the mixin's ring: that
+// is drawn inside the box, so it would scroll with the content.
 .lab-scroll {
   overflow-x: auto;
+}
 
-  &:focus-visible {
-    outline: 0.125rem solid var(--cps-color-calm);
-    outline-offset: 0.125rem;
-  }
+.lab-scroll:focus-visible,
+.lab-readout:focus-visible {
+  outline: 0.125rem solid var(--cps-color-calm);
+  outline-offset: 0.125rem;
 }
 
 .lab-note {

From ec43c08ce0c24ca01edd0254871446702006561d Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 12 Nov 2026 18:55:51 +0100
Subject: [PATCH 38/51] fix z-index

---
 package-lock.json                             |  6 +-
 package.json                                  |  2 +-
 playwright/inspector.spec.ts                  | 84 ++++++++++++++++++-
 playwright/settings.spec.ts                   |  3 +-
 projects/ngx-ui-watchtower/DESIGN.md          | 15 ++--
 projects/ngx-ui-watchtower/README.md          |  4 +-
 .../uwt-inspector-shortcut.spec.ts            | 56 +------------
 .../uwt-inspector-shortcut.ts                 | 42 +---------
 .../uwt-inspector.models.ts                   |  3 -
 .../uwt-inspector.component.html              | 33 ++++----
 .../uwt-inspector.component.scss              | 19 -----
 .../uwt-inspector/uwt-inspector.component.ts  | 61 ++++++++------
 projects/ngx-ui-watchtower/package.json       |  2 +-
 .../src/shell/pages/inspector.page.ts         |  6 +-
 14 files changed, 153 insertions(+), 183 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4fb9329..45b325a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "@typescript-eslint/eslint-plugin": "^8.67.0",
         "@typescript-eslint/parser": "^8.67.0",
         "aws-rum-web": "^3.2.1",
-        "cps-ui-kit": "^21.32.0",
+        "cps-ui-kit": "^21.33.0",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-config-standard": "^17.1.0",
@@ -10739,8 +10739,8 @@
       }
     },
     "node_modules/cps-ui-kit": {
-      "version": "21.32.0",
-      "integrity": "sha512-NE/D+KbrJG2gdD+Yj1kxpPSbOWczWfrux417oxMXALEt3naFz9TBMncVZZbs+h27L3HLf5Zmw08tAFJ30x+huQ==",
+      "version": "21.33.0",
+      "integrity": "sha512-KOmlCVhdnVBA947WUGu/LKnw25mHzsmGrjYJgu9l1ZxYLCIF52Wp1GTqeJXFQaDT+OVXYqPpW/n+Nh3+9tF1uA==",
       "dev": true,
       "license": "Apache License 2.0",
       "dependencies": {
diff --git a/package.json b/package.json
index 0940985..fe83534 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "@typescript-eslint/eslint-plugin": "^8.67.0",
     "@typescript-eslint/parser": "^8.67.0",
     "aws-rum-web": "^3.2.1",
-    "cps-ui-kit": "^21.32.0",
+    "cps-ui-kit": "^21.33.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-config-standard": "^17.1.0",
diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 4e83678..733b10a 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -252,6 +252,86 @@ test('a separate window, with its own header and no slider', async ({
   await expect(window.locator('cps-slider')).toHaveCount(0);
 });
 
+for (const dock of ['dialog', 'right pane', 'separate window']) {
+  test(`${dock}: what it shows is said by an info icon in its header`, async ({
+    page
+  }) => {
+    let where: Page = page;
+    if (dock === 'dialog') {
+      await shortcut(page);
+    } else if (dock === 'right pane') {
+      await press(page, 'Right pane');
+    } else {
+      const popup = page.waitForEvent('popup');
+      await press(page, 'Separate window');
+      where = await popup;
+    }
+
+    const icon = where
+      .locator('.cps-dialog-header, .uwt-inspector__header')
+      .getByTestId('cps-info-circle');
+    await expect(icon).toBeVisible();
+    await expect(where.locator('body')).not.toContainText(
+      'telemetry destinations, after redaction'
+    );
+
+    await icon.hover();
+    const tip = where.locator('.cps-tooltip-content');
+    await expect(tip).toContainText('telemetry destinations, after redaction');
+    await expect(tip).toContainText("RUM's own page views");
+  });
+}
+
+test('a dialog opened after menus were used still shows its tooltips above itself', async ({
+  page
+}) => {
+  await shortcut(page);
+  // Before cps-ui-kit 21.33, each menu opened left its z-index counter
+  // higher, and the next dialog was stacked above its tooltips, which sit at
+  // a fixed 2000.
+  const exportButton = page
+    .locator('.cps-dialog')
+    .getByRole('button', { name: /Export/ });
+  for (let i = 0; i < 3; i++) {
+    await exportButton.click();
+    await expect(exportButton).toHaveAttribute('aria-expanded', 'true');
+    // The kit listens for a click away only once the menu has opened.
+    await expect(async () => {
+      await page.locator('.cps-dialog-header-title').click();
+      await expect(exportButton).toHaveAttribute('aria-expanded', 'false', {
+        timeout: 500
+      });
+    }).toPass();
+  }
+  await page.getByRole('button', { name: 'Dock right' }).click();
+  await expect(page.locator('uwt-inspector-pane')).toBeVisible();
+  await expect(page.locator('.cps-dialog')).toHaveCount(0);
+  await page
+    .locator('uwt-inspector-pane')
+    .getByRole('button', { name: 'Dialog', exact: true })
+    .click();
+  await expect(page.locator('.cps-dialog uwt-inspector')).toBeVisible();
+
+  await page
+    .locator('.cps-dialog-header')
+    .getByTestId('cps-info-circle')
+    .hover();
+  await expect(page.locator('.cps-tooltip-content')).toBeVisible();
+  // Seen, not just there: what is at its centre is the tooltip itself.
+  await expect
+    .poll(() =>
+      page.evaluate(() => {
+        const rect = document
+          .querySelector('.cps-tooltip')!
+          .getBoundingClientRect();
+        return !!document
+          .elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2)
+          ?.closest('.cps-tooltip');
+      })
+    )
+    .toBe(true);
+});
+
 test('reopens where it was last, after a reload', async ({ page }) => {
   await press(page, 'Right pane');
   await expect(page.locator('uwt-inspector-pane')).toBeVisible();
@@ -334,7 +414,9 @@ test('a pane at its default width shows the dock buttons; dragged narrow, a menu
   for (let i = 0; i < 4; i++) {
     await page.keyboard.press('ArrowRight');
   }
-  expect(Math.round((await pane.boundingBox())!.width)).toBe(480);
+  await expect
+    .poll(async () => Math.round((await pane.boundingBox())!.width))
+    .toBe(480);
   const trigger = pane.locator('.uwt-inspector-dock__trigger');
   await expect(trigger).toBeVisible();
   await expect(pane.locator('[data-dock]')).toHaveCount(0);
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 7622fd4..8dfc20f 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -291,7 +291,7 @@ test('inspector settings: a custom shortcut, a smaller section, a smaller view',
     inspector: {
       maxEventsPerSection: 10,
       maxPayloadCharsInView: 1000,
-      shortcuts: [{ code: 'F9', label: 'F9' }]
+      shortcuts: [{ code: 'F9' }]
     }
   });
   const inspector = page.locator('uwt-inspector');
@@ -304,7 +304,6 @@ test('inspector settings: a custom shortcut, a smaller section, a smaller view',
 
   await page.keyboard.press('F9');
   await expect(inspector).toBeVisible();
-  await expect(inspector).toContainText('Shortcut: F9');
 
   await press(page, 'A burst of 600 BI events');
   await expect(inspector).toContainText('10 events · 590 oldest dropped');
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 143901e..0cbd417 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -236,7 +236,7 @@ across realms).
   workspace uses cps-ui-kit 21, the lowest version the Event Inspector
   supports, as it uses the lowest supported Angular. npm checks an optional
   peer's range whenever it is installed, so an app on a cps-ui-kit older
-  than 21.32 can't install the package until it upgrades the kit — even
+  than 21.33 can't install the package until it upgrades the kit — even
   without the Inspector. That is a breaking change for such apps.
 - **`cps-slider` is staged here for cps-ui-kit.** The kit has no slider, so
   the Transparency control is a `cps-slider` written to the kit's
@@ -1352,6 +1352,12 @@ environment because it exposes nothing new: the data is the current user's
 own, already in their browser and visible in the network panel. It stores
 nothing, sends nothing and grants no remote access.
 
+What it shows, and what it doesn't, is said by an info icon by the title in
+every dock, not text on the page: a tooltip, which `cps-info-circle` places
+only where it fits, so it is given a width of its own. A dialog's header is
+cps-dialog's, whose own `headerInfoTooltip` can't take one, so the inspector
+moves its icon into the header's info slot, as it does its mark.
+
 Avoid sharing your screen while it is open, and treat downloads as you would
 any file with ids in it; filenames carry only the application name, the
 kind exported and a timestamp
@@ -2083,7 +2089,7 @@ providers: [
 ];
 ```
 
-It is built from cps-ui-kit — 21.32 or later on Angular 21, or 22 — so the
+It is built from cps-ui-kit — 21.33 or later on Angular 21, or 22 — so the
 app needs cps-ui-kit set up as for any cps-ui-kit dialog (styles, icons,
 animations). It supports the light theme
 only, for now: cps-dialog, which frames it, is light-only, and the kit's
@@ -2197,8 +2203,7 @@ provideUwtEventInspector({
       code: 'KeyD',
       ctrl: true,
       alt: true,
-      shift: true,
-      label: 'Ctrl+Alt+Shift+D'
+      shift: true
     }
   ],
 
@@ -2315,7 +2320,7 @@ limit protects rendering, which costs by the length of the text. A cut never
 splits a surrogate pair.
 
 A shortcut is a `UwtInspectorShortcut` — `{ code, after?, ctrl?, alt?,
-shift?, meta?, label? }`, where `code` is a `KeyboardEvent.code` such as
+shift?, meta? }`, where `code` is a `KeyboardEvent.code` such as
 `'Digit8'` or `'KeyD'`, and an omitted modifier must be up. `after` is a key
 pressed just before `code` with the modifiers still held: the default is
 `{ code: 'KeyI', after: 'KeyE', shift: true }`. Without `ctrl` or `meta`, a
diff --git a/projects/ngx-ui-watchtower/README.md b/projects/ngx-ui-watchtower/README.md
index aa24426..fab609f 100644
--- a/projects/ngx-ui-watchtower/README.md
+++ b/projects/ngx-ui-watchtower/README.md
@@ -29,7 +29,7 @@ npm install aws-rum-web   # only for the AWS RUM sink
 Requires Angular 21 or 22 and RxJS 7.8.
 
 **Upgrading with an older cps-ui-kit:** the Event Inspector needs cps-ui-kit
-21.32 or later (or 22). npm checks that range whenever cps-ui-kit is
+21.33 or later (or 22). npm checks that range whenever cps-ui-kit is
 installed, so an app on an older version can't install this release until it
 upgrades cps-ui-kit, even if it never uses the Inspector.
 
@@ -367,7 +367,7 @@ localStorage.setItem('debugBI', 'true');
 localStorage.setItem('debugLogger', 'true'); // or 'checkout,cart' for some loggers
 ```
 
-**In the app** — add the Event Inspector (needs `cps-ui-kit` 21.32+ or 22):
+**In the app** — add the Event Inspector (needs `cps-ui-kit` 21.33+ or 22):
 
 ```ts
 import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
index 136361f..4a4ae6b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.spec.ts
@@ -1,8 +1,6 @@
 import {
   UWT_DEFAULT_INSPECTOR_SHORTCUTS,
-  uwtIsApplePlatform,
-  uwtMatchesShortcut,
-  uwtShortcutLabel
+  uwtMatchesShortcut
 } from './uwt-inspector-shortcut';
 
 type Mods = Partial<
@@ -100,55 +98,3 @@ describe('uwtMatchesShortcut', () => {
     ).toBe(false);
   });
 });
-
-describe('uwtShortcutLabel', () => {
-  it('should show Shift+E+I on every platform', () => {
-    expect(uwtShortcutLabel(UWT_DEFAULT_INSPECTOR_SHORTCUTS, true)).toBe(
-      'Shift+E+I'
-    );
-    expect(uwtShortcutLabel(UWT_DEFAULT_INSPECTOR_SHORTCUTS, false)).toBe(
-      'Shift+E+I'
-    );
-  });
-
-  it('should prefer the shortcut written for the platform', () => {
-    const both = [
-      { code: 'Digit8', shift: true, alt: true, meta: true, label: '⇧⌥⌘8' },
-      { ...CUSTOM, label: 'Ctrl+Alt+Shift+8' }
-    ];
-    expect(uwtShortcutLabel(both, true)).toBe('⇧⌥⌘8');
-    expect(uwtShortcutLabel(both, false)).toBe('Ctrl+Alt+Shift+8');
-  });
-
-  it('should describe a shortcut that has no label', () => {
-    expect(
-      uwtShortcutLabel([{ code: 'KeyD', ctrl: true, shift: true }], false)
-    ).toBe('Ctrl+Shift+D');
-    expect(
-      uwtShortcutLabel([{ code: 'KeyI', after: 'KeyE', shift: true }], false)
-    ).toBe('Shift+E+I');
-  });
-
-  it('should be undefined with no shortcuts', () => {
-    expect(uwtShortcutLabel([], false)).toBeUndefined();
-  });
-});
-
-describe('uwtIsApplePlatform', () => {
-  it.each([
-    ['MacIntel', true],
-    ['iPad', true],
-    ['Win32', false],
-    ['Linux x86_64', false]
-  ])('should read %s as %s', (platform, expected) => {
-    expect(uwtIsApplePlatform({ platform } as Navigator)).toBe(expected);
-  });
-
-  it('should prefer userAgentData when present', () => {
-    const nav = {
-      platform: 'Win32',
-      userAgentData: { platform: 'macOS' }
-    } as unknown as Navigator;
-    expect(uwtIsApplePlatform(nav)).toBe(true);
-  });
-});
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
index 4de2183..9e9ca35 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-shortcut/uwt-inspector-shortcut.ts
@@ -10,7 +10,7 @@ import { UwtInspectorShortcut } from '../uwt-inspector.models/uwt-inspector.mode
  * @group Utils
  */
 export const UWT_DEFAULT_INSPECTOR_SHORTCUTS: readonly UwtInspectorShortcut[] =
-  [{ code: 'KeyI', after: 'KeyE', shift: true, label: 'Shift+E+I' }];
+  [{ code: 'KeyI', after: 'KeyE', shift: true }];
 
 /**
  * Whether `event` is exactly `shortcut`, given the key pressed just before
@@ -50,46 +50,6 @@ export function uwtMatchesShortcut(
   );
 }
 
-/** Whether the platform is Apple's, for choosing which label to show. */
-export function uwtIsApplePlatform(nav: Navigator | undefined): boolean {
-  if (!nav) {
-    return false;
-  }
-  const platform =
-    (nav as Navigator & { userAgentData?: { platform?: string } }).userAgentData
-      ?.platform ??
-    nav.platform ??
-    '';
-  return /mac|iphone|ipad/i.test(platform);
-}
-
-/**
- * The shortcut to show people: the one written for this platform when
- * there is one, otherwise the first configured.
- */
-export function uwtShortcutLabel(
-  shortcuts: readonly UwtInspectorShortcut[],
-  apple: boolean
-): string | undefined {
-  const preferred = shortcuts.find((s) => !!s.meta === apple);
-  const chosen = preferred ?? shortcuts[0];
-  return chosen ? (chosen.label ?? describeShortcut(chosen)) : undefined;
-}
-
-function describeShortcut(s: UwtInspectorShortcut): string {
-  const key = (code: string | undefined) => code?.replace(/^Digit|^Key/, '');
-  return [
-    s.ctrl && 'Ctrl',
-    s.alt && 'Alt',
-    s.shift && 'Shift',
-    s.meta && 'Meta',
-    key(s.after),
-    key(s.code)
-  ]
-    .filter(Boolean)
-    .join('+');
-}
-
 /**
  * Whether `event` types a character — or starts one, as a dead key or an
  * IME does — into an input, a text area or an editor. Inside a shadow root,
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
index c84f297..1ca8c7b 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector.models/uwt-inspector.models.ts
@@ -67,9 +67,6 @@ export interface UwtInspectorShortcut {
   alt?: boolean;
   shift?: boolean;
   meta?: boolean;
-
-  /** How the shortcut is written for people, e.g. `'Shift+E+I'`. */
-  label?: string;
 }
 
 /**
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
index f4f1f24..21a5c43 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.html
@@ -3,6 +3,12 @@
     <div class="uwt-inspector__brand">
       <uwt-inspector-logo></uwt-inspector-logo>
       <h2 class="uwt-inspector__title">Event Inspector</h2>
+      <cps-info-circle
+        size="small"
+        tooltipPosition="bottom"
+        tooltipMaxWidth="24rem"
+        [tooltipText]="info">
+      </cps-info-circle>
     </div>
     <cps-button
       icon="close-x-2"
@@ -15,8 +21,15 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
     </cps-button>
   </div>
 } @else {
-  <!-- Moved into cps-dialog's header icon slot once rendered. -->
+  <!-- Moved into cps-dialog's header, by its title, once rendered. -->
   <uwt-inspector-logo #dialogLogo></uwt-inspector-logo>
+  <cps-info-circle
+    #dialogInfo
+    size="small"
+    tooltipPosition="bottom"
+    tooltipMaxWidth="24rem"
+    [tooltipText]="info">
+  </cps-info-circle>
 }
 
 <div class="uwt-inspector__body">
@@ -101,22 +114,4 @@ <h2 class="uwt-inspector__title">Event Inspector</h2>
 
   <uwt-inspector-timeline [maxPayloadChars]="maxPayloadChars">
   </uwt-inspector-timeline>
-
-  <div class="uwt-inspector__footer">
-    <p>
-      Shows what this app hands to its telemetry destinations, after redaction.
-      A destination can still drop an event, for example when RUM samples a
-      session out. RUM's own page views, errors and performance events aren't
-      shown.
-    </p>
-    <p>
-      Contains your session and user ids: avoid sharing your screen while it's
-      open, and share downloads only with your team. History is discarded when
-      you close it.
-      @if (shortcut) {
-        Shortcut: <kbd>{{ shortcut }}</kbd
-        >.
-      }
-    </p>
-  </div>
 </div>
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index f97b42b..69862b5 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -164,25 +164,6 @@
   color: var(--cps-text-secondary);
 }
 
-.uwt-inspector__footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--uwt-inspector-space-s);
-  padding-top: var(--uwt-inspector-space-m);
-  border-top: 1px solid var(--cps-border-color);
-  font-size: 0.75rem;
-  color: var(--cps-text-secondary);
-
-  p {
-    margin: 0;
-    max-width: 75ch;
-  }
-
-  kbd {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-}
-
 // Forced colours empty the Pause switch's knob, which says by its side
 // whether updates are paused; a border draws it back.
 @media (forced-colors: active) {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 145a38c..10ef21f 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -19,6 +19,7 @@ import {
   CpsButtonComponent,
   CpsDialogConfig,
   CpsDialogRef,
+  CpsInfoCircleComponent,
   CpsSwitchComponent
 } from 'cps-ui-kit';
 import { CpsSliderComponent } from '../cps-slider/cps-slider.component';
@@ -37,11 +38,7 @@ import {
   UwtInspectorExporter
 } from '../uwt-inspector-export/uwt-inspector-exporter';
 import { uwtInspectorTime } from '../uwt-inspector-timeline/uwt-inspector-rows';
-import {
-  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
-  uwtIsApplePlatform,
-  uwtShortcutLabel
-} from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
+import { UWT_DEFAULT_INSPECTOR_SHORTCUTS } from '../uwt-inspector-shortcut/uwt-inspector-shortcut';
 import { UwtInspectorDockSwitcherComponent } from '../uwt-inspector-dock-switcher/uwt-inspector-dock-switcher.component';
 import { UwtInspectorLogoComponent } from '../uwt-inspector-logo/uwt-inspector-logo.component';
 import { UwtInspectorSession } from '../uwt-inspector-session/uwt-inspector-session';
@@ -60,6 +57,13 @@ const ANNOUNCE_EVERY_MS = 10_000;
  */
 const DOCK_MENU_BELOW_REM = 34;
 
+/**
+ * What the info icon in the header says, in every dock: what the inspector
+ * shows, and what it doesn't.
+ */
+const INFO =
+  "Shows what this app hands to its telemetry destinations, after redaction. A destination can still drop an event, for example when RUM samples a session out. RUM's own page views, errors and performance events aren't shown.";
+
 /**
  * The Event Inspector's content, shown by {@link UwtEventInspectorService}
  * in a non-modal cps-dialog, a pane or its own window. Capturing is
@@ -75,6 +79,7 @@ const DOCK_MENU_BELOW_REM = 34;
   selector: 'uwt-inspector',
   imports: [
     CpsButtonComponent,
+    CpsInfoCircleComponent,
     CpsSliderComponent,
     CpsSwitchComponent,
     UwtInspectorDockSwitcherComponent,
@@ -146,10 +151,7 @@ export class UwtInspectorComponent {
     return at && uwtInspectorTime(at).slice(0, 8);
   });
 
-  protected readonly shortcut = uwtShortcutLabel(
-    this.config.shortcuts,
-    uwtIsApplePlatform(this.document.defaultView?.navigator)
-  );
+  protected readonly info = INFO;
 
   protected readonly maxTransparency = UWT_INSPECTOR_MAX_TRANSPARENCY;
   protected readonly transparency = signal(
@@ -164,6 +166,8 @@ export class UwtInspectorComponent {
 
   private readonly dialogLogo = viewChild('dialogLogo', { read: ElementRef });
 
+  private readonly dialogInfo = viewChild('dialogInfo', { read: ElementRef });
+
   private readonly pauseSwitch = viewChild('pauseSwitch', { read: ElementRef });
 
   private readonly injector = inject(Injector);
@@ -181,7 +185,7 @@ export class UwtInspectorComponent {
         this.maximized.set(maximized);
         this.applyTransparency(maximized ? 0 : this.transparency());
       });
-    afterNextRender(() => this.placeDialogLogo());
+    afterNextRender(() => this.placeInDialogHeader());
     this.keepScrollingInside();
     this.watchWidth();
   }
@@ -396,23 +400,28 @@ export class UwtInspectorComponent {
   }
 
   /**
-   * cps-dialog draws the dialog's header, and its icon slot takes only an
-   * icon name, so the mark moves into that slot, before the title. Without
-   * the slot the mark goes.
+   * cps-dialog draws the dialog's header, and its slots take only an icon
+   * name and a tooltip's text, so the mark moves into its icon slot, before
+   * the title, and the info icon into its own, after it: the kit's own info
+   * icon can't be given a width, and this text is long. Without a slot, the
+   * mark and icon go.
    */
-  private placeDialogLogo(): void {
-    const logo: HTMLElement | undefined = this.dialogLogo()?.nativeElement;
-    if (!logo) {
-      return;
-    }
-    const slot = this.host.nativeElement
-      .closest('.cps-dialog')
-      ?.querySelector('.cps-dialog-header-icon');
-    if (slot) {
-      slot.append(logo);
-    } else {
-      logo.remove();
-    }
+  private placeInDialogHeader(): void {
+    const dialog = this.host.nativeElement.closest('.cps-dialog');
+    const place = (
+      moved: ElementRef<HTMLElement> | undefined,
+      slot: string
+    ): void => {
+      const el = moved?.nativeElement;
+      const target = dialog?.querySelector(slot);
+      if (target && el) {
+        target.append(el);
+      } else {
+        el?.remove();
+      }
+    };
+    place(this.dialogLogo(), '.cps-dialog-header-icon');
+    place(this.dialogInfo(), '.cps-dialog-header-info-circle');
   }
 
   /** One polite summary of what arrived since the last one, if anything. */
diff --git a/projects/ngx-ui-watchtower/package.json b/projects/ngx-ui-watchtower/package.json
index bd38477..b882aff 100644
--- a/projects/ngx-ui-watchtower/package.json
+++ b/projects/ngx-ui-watchtower/package.json
@@ -8,7 +8,7 @@
     "@angular/animations": ">=21.0.0 <23.0.0",
     "@angular/forms": ">=21.0.0 <23.0.0",
     "aws-rum-web": "^3.2.1",
-    "cps-ui-kit": ">=21.32.0 <23.0.0",
+    "cps-ui-kit": ">=21.33.0 <23.0.0",
     "rxjs": "^7.8.2"
   },
   "peerDependenciesMeta": {
diff --git a/projects/watchtower-lab/src/shell/pages/inspector.page.ts b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
index d769c7b..00363e5 100644
--- a/projects/watchtower-lab/src/shell/pages/inspector.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
@@ -7,7 +7,6 @@ import {
   UwtTelemetryPublishInput
 } from '@absaoss-cps/ngx-ui-watchtower';
 import {
-  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   UwtEventInspectorService,
   UwtInspectorDock
 } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
@@ -42,7 +41,7 @@ const DOCKS: { value: UwtInspectorDock; label: string }[] = [
             ? 'Disabled with ?inspector=off.'
             : options.inspector === 'noshortcut'
               ? 'No keyboard shortcut (?inspector=noshortcut): open it from here.'
-              : 'Shortcut: ' + shortcuts + '.'
+              : 'Shortcut: Shift+E+I.'
         }}
       </p>
 
@@ -105,9 +104,6 @@ export class InspectorPage {
   protected readonly layout = inject(LabLayout);
   protected readonly options = inject(LAB_OPTIONS);
   protected readonly docks = DOCKS;
-  protected readonly shortcuts = UWT_DEFAULT_INSPECTOR_SHORTCUTS.map(
-    (s) => s.label
-  ).join(' or ');
 
   private readonly bi = inject(UwtBITelemetryService);
   private readonly scenarios = inject(UwtScenarioTelemetryService);

From 423b829441769aa6ff3fa913c7a83cadc8016f8a Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Thu, 12 Nov 2026 20:21:06 +0100
Subject: [PATCH 39/51] close the dialog on esc from inside

---
 playwright/inspector.spec.ts                  | 74 +++++++++++++++++++
 projects/ngx-ui-watchtower/DESIGN.md          |  2 +-
 .../uwt-event-inspector.service.ts            |  4 +-
 .../uwt-inspector.component.scss              | 10 +++
 .../uwt-inspector.component.spec.ts           | 29 ++++++++
 .../uwt-inspector/uwt-inspector.component.ts  | 49 ++++++++----
 6 files changed, 153 insertions(+), 15 deletions(-)

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 733b10a..03f3479 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -332,6 +332,80 @@ test('a dialog opened after menus were used still shows its tooltips above itsel
     .toBe(true);
 });
 
+test("a key press after a click on the dialog's header leaves what is inside it clickable", async ({
+  page
+}) => {
+  await page.locator('.lab-header-button').click();
+  const dialog = page.locator('.cps-dialog');
+  await expect(dialog.locator('uwt-inspector')).toBeVisible();
+
+  // On the header's bare part, to the right of the title.
+  await dialog
+    .locator('.cps-dialog-header')
+    .click({ position: { x: 350, y: 20 } });
+  // A key press makes the dialog's focus a keyboard focus, and cps-dialog
+  // draws a ring around it that would cover, and take the clicks of, all it
+  // holds.
+  await page.keyboard.press('ArrowDown');
+  await expect(dialog).toBeFocused();
+
+  await dialog
+    .getByRole('button', { name: 'Dock right' })
+    .click({ timeout: 3000 });
+  await expect(page.locator('uwt-inspector-pane')).toBeVisible();
+});
+
+test('Esc closes the dialog from its header, not only from its content', async ({
+  page
+}) => {
+  await page.locator('.lab-header-button').click();
+  const dialog = page.locator('.cps-dialog');
+  await expect(dialog.locator('uwt-inspector')).toBeVisible();
+
+  await dialog
+    .locator('.cps-dialog-header')
+    .click({ position: { x: 350, y: 20 } });
+  await expect(dialog).toBeFocused();
+  await page.keyboard.press('Escape');
+
+  await expect(page.locator('uwt-inspector')).toHaveCount(0);
+});
+
+test('an Esc that closes the inspector is marked handled, so notifications stay; one it leaves alone is not', async ({
+  page
+}) => {
+  // What cps-ui-kit's notifications read: they close on an Esc that reaches
+  // the window unhandled.
+  await page.evaluate(() => {
+    (window as unknown as { escapes: boolean[] }).escapes = [];
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        (window as unknown as { escapes: boolean[] }).escapes.push(
+          e.defaultPrevented
+        );
+      }
+    });
+  });
+  await page.locator('.lab-header-button').click();
+  const dialog = page.locator('.cps-dialog');
+  await expect(dialog.locator('uwt-inspector')).toBeVisible();
+
+  // In the app, outside the inspector: left alone, still open.
+  await page.locator('.lab-nav a').first().focus();
+  await page.keyboard.press('Escape');
+  await expect(dialog.locator('uwt-inspector')).toBeVisible();
+
+  await dialog.locator('.uwt-inspector-search input').focus();
+  await page.keyboard.press('Escape');
+  await expect(page.locator('uwt-inspector')).toHaveCount(0);
+
+  expect(
+    await page.evaluate(
+      () => (window as unknown as { escapes: boolean[] }).escapes
+    )
+  ).toEqual([false, true]);
+});
+
 test('reopens where it was last, after a reload', async ({ page }) => {
   await press(page, 'Right pane');
   await expect(page.locator('uwt-inspector-pane')).toBeVisible();
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index 0cbd417..d9c3407 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -2122,7 +2122,7 @@ side, and the choice is remembered in this browser:
 
 | Dock                | What you get                                                                                                                                                                                                                                       |
 | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Dialog (default)    | A non-modal dialog on the right, half the screen wide, between 40rem (or nearly all of a small screen) and 64rem. Draggable, resizable and maximizable, with a Transparency slider. Escape inside it closes it; elsewhere, Escape stays the app's. |
+| Dialog (default)    | A non-modal dialog on the right, half the screen wide, between 40rem (or nearly all of a small screen) and 64rem. Draggable, resizable and maximizable, with a Transparency slider. Escape inside it, its header included, closes it and marks the key handled, so cps-ui-kit's notifications stay open; elsewhere, Escape stays the app's. |
 | Separate window     | Its own browser window, which it fills: 1200×800 the first time, then wherever it was last. Closing the window closes the inspector, and so does reloading the app.                                                                                |
 | Left, right, bottom | A pane beside or below the app, which moves aside to make room. Drag its inner edge, or focus it and use the arrow keys, to resize it between 30rem (12rem at the bottom) and 80% of the screen; each side remembers its size.                     |
 
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 27aab2e..41ae991 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -310,7 +310,9 @@ export class UwtEventInspectorService {
         resizable: true,
         maximizable: true,
         // The dialog's own Escape works anywhere on the page; the inspector
-        // closes on Escape from inside it instead.
+        // closes on Escape from inside it instead. Replace this with the
+        // kit's own focus-scoped Escape once it has one:
+        // https://github.com/AbsaOSS/cps-shared-ui/issues/951
         closeOnEscape: false,
         // Docked right at half the screen, so the application stays
         // visible and clickable beside it, but never narrower than 40rem
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
index 69862b5..13d32eb 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.scss
@@ -70,6 +70,16 @@
   margin-inline: 0.5rem auto;
 }
 
+// cps-dialog's focus ring spans the whole dialog, and as the kit draws it, it
+// takes the clicks of everything inside: after a click on the header and a
+// key press such as Esc, nothing in the dialog would respond.
+// Temporary: remove once the cps-ui-kit fixes it,
+// https://github.com/AbsaOSS/cps-shared-ui/issues/948
+::ng-deep .uwt-inspector-dialog:focus-visible::before,
+::ng-deep .uwt-inspector-dialog:focus-visible::after {
+  pointer-events: none;
+}
+
 .uwt-inspector__body {
   display: flex;
   flex-direction: column;
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
index 00be174..bf13dcb 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.spec.ts
@@ -621,6 +621,35 @@ describe('UwtInspectorComponent', () => {
     expect(controls.close).toHaveBeenCalledTimes(1);
   });
 
+  it('should mark an Escape it closes the dialog on as handled, and leave any other alone', () => {
+    TestBed.inject(UwtInspectorSession).controls = {
+      setDock: jest.fn(),
+      close: jest.fn(),
+      panesFit: signal(true)
+    };
+    const search = el().querySelector('.uwt-inspector-search input')!;
+    const escape = () => {
+      const event = new KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        cancelable: true
+      });
+      search.dispatchEvent(event);
+      return event;
+    };
+
+    // The kit's notifications close on an Escape nobody handled.
+    expect(escape().defaultPrevented).toBe(true);
+
+    search.setAttribute('aria-expanded', 'true');
+    expect(escape().defaultPrevented).toBe(false);
+
+    search.removeAttribute('aria-expanded');
+    fixture.componentRef.setInput('dock', 'right');
+    fixture.detectChanges();
+    expect(escape().defaultPrevented).toBe(false);
+  });
+
   it('should offer no pane when the app has no room for one', () => {
     TestBed.inject(UwtInspectorSession).controls = {
       setDock: jest.fn(),
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
index 10ef21f..2fdb518 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector/uwt-inspector.component.ts
@@ -97,8 +97,7 @@ const INFO =
   host: {
     // Focusable, but not in the tab order: see focusInspector().
     tabindex: '-1',
-    '[class.uwt-inspector--framed]': 'framed()',
-    '(keydown.escape)': 'onEscape($event)'
+    '[class.uwt-inspector--framed]': 'framed()'
   },
   templateUrl: './uwt-inspector.component.html',
   styleUrl: './uwt-inspector.component.scss'
@@ -172,6 +171,8 @@ export class UwtInspectorComponent {
 
   private readonly injector = inject(Injector);
 
+  private readonly zone = inject(NgZone);
+
   /** From what the session already holds: a dock move announces no history. */
   private lastAnnounced = { ...this.store.received() };
 
@@ -188,6 +189,11 @@ export class UwtInspectorComponent {
     afterNextRender(() => this.placeInDialogHeader());
     this.keepScrollingInside();
     this.watchWidth();
+    this.listen<KeyboardEvent>(
+      () => this.frame(),
+      'keydown',
+      (event) => this.onEscape(event)
+    );
   }
 
   /**
@@ -293,23 +299,31 @@ export class UwtInspectorComponent {
     });
   }
 
-  /** Listens once rendered, outside the zone, until destroyed. */
+  /**
+   * Listens once rendered, outside the zone, until destroyed. A target given
+   * as a function is looked up then: the dialog isn't around the host before.
+   */
   private listen<E extends Event>(
-    target: EventTarget,
+    target: EventTarget | (() => EventTarget),
     type: string,
     handler: (event: E) => void
   ): void {
     const zone = inject(NgZone);
     const destroyRef = inject(DestroyRef);
-    // Scroll doesn't bubble: capture sees every element's. Wheel can be stopped.
-    const options = { capture: type === 'scroll', passive: type !== 'wheel' };
+    // Scroll doesn't bubble: capture sees every element's. Wheel and keydown
+    // can be stopped, which a passive listener's preventDefault() would not.
+    const options = {
+      capture: type === 'scroll',
+      passive: type !== 'wheel' && type !== 'keydown'
+    };
     afterNextRender(() => {
       const listener = handler as (event: Event) => void;
+      const element = typeof target === 'function' ? target() : target;
       zone.runOutsideAngular(() =>
-        target.addEventListener(type, listener, options)
+        element.addEventListener(type, listener, options)
       );
       destroyRef.onDestroy(() =>
-        target.removeEventListener(type, listener, options)
+        element.removeEventListener(type, listener, options)
       );
     });
   }
@@ -337,18 +351,27 @@ export class UwtInspectorComponent {
   }
 
   /**
-   * Escape closes the dialog, but only from inside it — it isn't modal, and
-   * the app's own controls use Escape too — and not while one of its lists
-   * or menus is open, which Escape closes first.
+   * Escape closes the dialog, but only from inside it — the header and frame
+   * included — as it isn't modal, and the app's own controls use Escape too;
+   * and not while one of its lists or menus is open, which Escape closes
+   * first. An Escape it closes on is marked handled, as cps-ui-kit's own
+   * dialog does, so the kit's notifications don't also close on it.
+   *
+   * Temporary: cps-dialog's `closeOnEscape` can't be limited to the focus
+   * inside it yet, so this stands in for it:
+   * https://github.com/AbsaOSS/cps-shared-ui/issues/951
    */
-  protected onEscape(event: Event): void {
+  protected onEscape(event: KeyboardEvent): void {
     const target = event.target as Element | null;
     if (
+      event.key === 'Escape' &&
       this.dock() === 'dialog' &&
       !event.defaultPrevented &&
       !target?.closest?.('[aria-expanded="true"]')
     ) {
-      this.close();
+      event.preventDefault();
+      // The listener runs outside the zone; closing the dialog needs it.
+      this.zone.run(() => this.close());
     }
   }
 

From 5dd266c18ca2ce67fce3a0097b69b1ac06b383f3 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 11:17:52 +0100
Subject: [PATCH 40/51] make the embedded application look the same in an
 iframe and as a Web Fragment

---
 README.md                                     |  6 +-
 playwright/a11y.spec.ts                       |  2 +-
 playwright/channel.spec.ts                    |  4 +-
 playwright/fragment.spec.ts                   | 60 +++++++++++++--
 playwright/frame.spec.ts                      |  2 +-
 playwright/tabs.spec.ts                       |  4 +-
 .../src/fragment.component.ts                 |  2 +-
 .../src/fragment.config.ts                    |  6 +-
 .../watchtower-lab-fragment/src/index.html    |  2 +-
 .../watchtower-lab-fragment/src/styles.scss   |  6 ++
 .../src/shell/pages/fragment.page.ts          | 23 ++----
 .../src/shell/pages/web-fragment.page.ts      | 20 ++---
 .../watchtower-lab/src/shell/shell.config.ts  | 10 +--
 projects/watchtower-lab/src/styles.scss       | 75 +++++++++++++++++--
 14 files changed, 162 insertions(+), 60 deletions(-)

diff --git a/README.md b/README.md
index 00c7b06..140f388 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ projects/ngx-ui-watchtower/
   package.json      the published package's manifest
 projects/watchtower-lab/             the Watchtower Lab: a testing app, never published
   server/                            its server: mock backend, fragment gateway, SSR
-projects/watchtower-lab-fragment/    the lab's fragment: a second app it composes
+projects/watchtower-lab-fragment/    the lab's embedded application: a second app it embeds
 projects/watchtower-consumer-smoke/  a minimal app that installs the packed library
 playwright/                          the lab's end-to-end suite (Playwright)
 ```
@@ -75,8 +75,8 @@ and dataplane, fully offline, and logs go to a mock log backend.
 One page per concern, in three groups. **Library**: **Scenarios**, **BI
 events**, **Logging**, **Identity**, **Privacy** and **Lifecycle**, each with
 a **Results** column beside its buttons — the page's own readout, and what
-it sent, ticked once the mock backend has it. **Composition**: **Fragment
-(iframe)** and **Web Fragment** (the same second app in a plain iframe, and
+it sent, ticked once the mock backend has it. **Embedded apps**: **Iframe**
+and **Web Fragment** (the same second app in a plain iframe, and
 as a [Web Fragment](https://web-fragments.dev) through the server's gateway,
 each forwarding through the shell over the tab's own channel). **Tools**:
 **Event Inspector** (every dock, showing the one it is in, event generators,
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index e1eb723..f118794 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -11,7 +11,7 @@ const PAGES = [
   'identity',
   'privacy',
   'lifecycle',
-  'fragment',
+  'iframe',
   'web-fragment',
   'inspector',
   'wire',
diff --git a/playwright/channel.spec.ts b/playwright/channel.spec.ts
index 3411c28..b191a95 100644
--- a/playwright/channel.spec.ts
+++ b/playwright/channel.spec.ts
@@ -16,7 +16,9 @@ test("on a shared channel, one tab's host leads for every tab, and another takes
   tabs.forEach((tab) => watchErrors(tab, errors));
   for (const tab of tabs) {
     await openLab(tab, 'web-fragment?channel=shared');
-    await expect(tab.locator('web-fragment h1')).toHaveText('lab-fragment');
+    await expect(tab.locator('web-fragment h1')).toHaveText(
+      'Embedded application'
+    );
     await tab.locator('.lab-header-button').click();
     await expect(tab.locator('uwt-inspector')).toBeVisible();
   }
diff --git a/playwright/fragment.spec.ts b/playwright/fragment.spec.ts
index c4b5fa3..331a76c 100644
--- a/playwright/fragment.spec.ts
+++ b/playwright/fragment.spec.ts
@@ -20,7 +20,7 @@ const COMPOSITIONS: {
 }[] = [
   {
     name: 'in a plain iframe',
-    path: 'fragment',
+    path: 'iframe',
     fragment: (page) => page.frameLocator('iframe.lab-fragment')
   },
   {
@@ -46,7 +46,7 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
     await openLab(page, path);
     await sessionStarted(page);
     const fragment = locate(page);
-    await expect(fragment.locator('h1')).toHaveText('lab-fragment');
+    await expect(fragment.locator('h1')).toHaveText('Embedded application');
     // Open first: the Event Inspector shows what arrives from then on.
     await page.locator('.lab-header-button').click();
 
@@ -61,7 +61,7 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
     );
     const clicked = named(events, 'fragment_button_clicked');
     expect(clicked).toHaveLength(1);
-    expect(clicked[0].details.application).toBe('lab-fragment');
+    expect(clicked[0].details.application).toBe('Embedded application');
     expect(named(events, 'fragment-journey')[0].details.status).toBe('success');
     await expect(fragment.locator('p').first()).toContainText(
       clicked[0].user.sessionId!.slice(0, 8)
@@ -69,13 +69,15 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
 
     await expect
       .poll(async () => (await backend.logs()).map((r) => r.application))
-      .toContain('lab-fragment');
+      .toContain('Embedded application');
     await press(fragment, 'Query its logs');
     await expect(fragment.locator('.lab-readout')).toContainText(
       /[1-9]\d* record\(s\), answered by the shell/
     );
 
-    await expect(page.locator('uwt-inspector')).toContainText('↪ lab-fragment');
+    await expect(page.locator('uwt-inspector')).toContainText(
+      '↪ Embedded application'
+    );
 
     // Its errors are mirrored to RUM by the shell, named for the fragment.
     await press(fragment, 'Log an error');
@@ -83,7 +85,7 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
       e.some(
         (event) =>
           event.type === 'com.amazon.rum.js_error_event' &&
-          JSON.stringify(event.details).includes('[lab-fragment] Error')
+          JSON.stringify(event.details).includes('[Embedded application] Error')
       )
     );
 
@@ -99,6 +101,50 @@ for (const { name, path, fragment: locate } of COMPOSITIONS) {
   });
 }
 
+/** What a person sees of the embedded application's box: its size, edge and background. */
+async function embeddedLook(page: Page, path: string) {
+  await openLab(page, path);
+  const viaIframe = path === 'iframe';
+  const host = page.locator(viaIframe ? 'iframe.lab-fragment' : 'web-fragment');
+  await expect(host).toBeVisible();
+  await expect(
+    (viaIframe ? page.frameLocator('iframe.lab-fragment') : host).locator('h1')
+  ).toHaveText('Embedded application');
+
+  const box = (await host.boundingBox())!;
+  const edge = await host.evaluate((el) => {
+    const style = getComputedStyle(el);
+    return {
+      border: `${style.borderTopWidth} ${style.borderTopStyle} ${style.borderTopColor}`,
+      radius: style.borderRadius,
+      background: style.backgroundColor
+    };
+  });
+  // In an iframe the app paints its own page over the frame's background.
+  const own = viaIframe
+    ? await page
+        .frameLocator('iframe.lab-fragment')
+        .locator('body')
+        .evaluate((body) => getComputedStyle(body).backgroundColor)
+    : 'rgba(0, 0, 0, 0)';
+  return {
+    width: Math.round(box.width),
+    height: Math.round(box.height),
+    border: edge.border,
+    radius: edge.radius,
+    background: own === 'rgba(0, 0, 0, 0)' ? edge.background : own
+  };
+}
+
+test('the embedded application looks the same in a plain iframe and as a Web Fragment', async ({
+  page
+}) => {
+  const iframe = await embeddedLook(page, 'iframe');
+  const webFragment = await embeddedLook(page, 'web-fragment');
+
+  expect(webFragment).toEqual(iframe);
+});
+
 test('the fragment on its own, with no shell, carries on and sends nothing', async ({
   page
 }) => {
@@ -111,7 +157,7 @@ test('the fragment on its own, with no shell, carries on and sends nothing', asy
     }
   });
   await page.goto('/fragment-frame/');
-  await expect(page.locator('h1')).toHaveText('lab-fragment');
+  await expect(page.locator('h1')).toHaveText('Embedded application');
   await press(page, 'Track a BI event');
   await press(page, 'Log a warning');
 
diff --git a/playwright/frame.spec.ts b/playwright/frame.spec.ts
index 96f9d8e..b0dc362 100644
--- a/playwright/frame.spec.ts
+++ b/playwright/frame.spec.ts
@@ -7,7 +7,7 @@ const PAGES = [
   'identity',
   'privacy',
   'lifecycle',
-  'fragment',
+  'iframe',
   'web-fragment',
   'inspector',
   'wire',
diff --git a/playwright/tabs.spec.ts b/playwright/tabs.spec.ts
index e45b739..a46e99d 100644
--- a/playwright/tabs.spec.ts
+++ b/playwright/tabs.spec.ts
@@ -16,7 +16,9 @@ test("two tabs: each fragment reaches its own tab's shell, over that tab's chann
   tabs.forEach((tab) => watchErrors(tab, errors));
   for (const tab of tabs) {
     await openLab(tab, 'web-fragment');
-    await expect(tab.locator('web-fragment h1')).toHaveText('lab-fragment');
+    await expect(tab.locator('web-fragment h1')).toHaveText(
+      'Embedded application'
+    );
     await tab.locator('.lab-header-button').click();
     await expect(tab.locator('uwt-inspector')).toBeVisible();
   }
diff --git a/projects/watchtower-lab-fragment/src/fragment.component.ts b/projects/watchtower-lab-fragment/src/fragment.component.ts
index b0f7cf5..7ecce44 100644
--- a/projects/watchtower-lab-fragment/src/fragment.component.ts
+++ b/projects/watchtower-lab-fragment/src/fragment.component.ts
@@ -21,7 +21,7 @@ const CARLA = '5c8e2f14-1b7d-4a96-9e3c-8d2b7f4a6c10';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page lab-fragment">
-      <h1>lab-fragment</h1>
+      <h1>Embedded application</h1>
       <p>
         Session {{ identity().sessionId ?? '—' }} · user
         {{ identity().userId ?? '—' }}, as the shell announced them.
diff --git a/projects/watchtower-lab-fragment/src/fragment.config.ts b/projects/watchtower-lab-fragment/src/fragment.config.ts
index 3014ad0..dbfd398 100644
--- a/projects/watchtower-lab-fragment/src/fragment.config.ts
+++ b/projects/watchtower-lab-fragment/src/fragment.config.ts
@@ -39,7 +39,11 @@ export const fragmentConfig: ApplicationConfig = {
     provideZonelessChangeDetection(),
     provideAnimations(),
     provideUwtTelemetry(
-      { application: 'lab-fragment', environment: 'lab', version: '1.0.0' },
+      {
+        application: 'Embedded application',
+        environment: 'lab',
+        version: '1.0.0'
+      },
       withLogging({ minLevel: 'log', mirrorErrorsToRum: true })
     ),
     provideUwtTelemetrySink('broadcast'),
diff --git a/projects/watchtower-lab-fragment/src/index.html b/projects/watchtower-lab-fragment/src/index.html
index 3b06f42..5a7de71 100644
--- a/projects/watchtower-lab-fragment/src/index.html
+++ b/projects/watchtower-lab-fragment/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>lab-fragment · Watchtower Lab</title>
+    <title>Embedded application · Watchtower Lab</title>
     <!-- The gateway's prefix for this fragment's files. -->
     <base href="/_fragment/lab-fragment/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/projects/watchtower-lab-fragment/src/styles.scss b/projects/watchtower-lab-fragment/src/styles.scss
index 3eb7a6b..844892e 100644
--- a/projects/watchtower-lab-fragment/src/styles.scss
+++ b/projects/watchtower-lab-fragment/src/styles.scss
@@ -1,2 +1,8 @@
 // The same base as the shell's.
 @use '../../watchtower-lab/src/lab-base';
+
+// Embedded, it sits in a white box: an iframe shows its own page, which
+// would otherwise be the lab's grey.
+body {
+  background-color: #fff;
+}
diff --git a/projects/watchtower-lab/src/shell/pages/fragment.page.ts b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
index e3647dd..e619520 100644
--- a/projects/watchtower-lab/src/shell/pages/fragment.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/fragment.page.ts
@@ -5,31 +5,22 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section class="lab-page">
-      <h1>Fragment (iframe)</h1>
+      <h1>Iframe</h1>
       <p>
-        A second app, in a plain iframe and its own JavaScript realm, with the
-        'broadcast' sink: it hands everything to this shell, which records it
-        once. Its events show in the Event Inspector marked ↪ lab-fragment;
-        signing in or out there applies here too.
+        The embedded application in a plain iframe: its own page and its own
+        JavaScript realm, with the 'broadcast' sink. It hands everything to this
+        shell, which records it once. Its events show in the Event Inspector
+        marked ↪ Embedded application; signing in or out there applies here too.
       </p>
       <!-- In the browser only, once the shell runs: the frame reads this
         tab's channel from it as it starts. -->
       @defer {
         <iframe
-          class="lab-fragment"
+          class="lab-embed lab-fragment"
           src="/fragment-frame/"
-          title="Lab fragment"></iframe>
+          title="Embedded application"></iframe>
       }
     </section>
-  `,
-  styles: `
-    .lab-fragment {
-      width: 100%;
-      height: 24rem;
-      border: 0.0625rem dashed var(--cps-color-line-mid);
-      border-radius: 0.5rem;
-      background-color: #fff;
-    }
   `
 })
 export class FragmentPage {}
diff --git a/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts b/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
index d27b5c5..dec4b09 100644
--- a/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
@@ -12,22 +12,14 @@ import {
     <section class="lab-page">
       <h1>Web Fragment</h1>
       <p>
-        The same fragment as a Web Fragment: its page drawn in this one, in a
-        shadow root, while its JavaScript runs in a hidden iframe of its own.
-        The gateway in the lab's server routes its files. It forwards to this
-        shell over this tab's channel, so its events show in the Event Inspector
-        marked ↪ lab-fragment.
+        The same embedded application, this time as a Web Fragment: its page is
+        drawn inside this one, in a shadow root, while its JavaScript runs in a
+        hidden iframe of its own. The gateway in the lab's server routes its
+        files. It forwards to this shell over this tab's channel, so its events
+        show in the Event Inspector marked ↪ Embedded application.
       </p>
-      <web-fragment fragment-id="lab-fragment"></web-fragment>
+      <web-fragment class="lab-embed" fragment-id="lab-fragment"></web-fragment>
     </section>
-  `,
-  styles: `
-    web-fragment {
-      display: block;
-      border: 0.0625rem dashed var(--cps-color-line-mid);
-      border-radius: 0.5rem;
-      background-color: #fff;
-    }
   `
 })
 export class WebFragmentPage {}
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index 4603e68..af60764 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -36,7 +36,7 @@ import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
 export { LAB_OPTIONS };
 
 /** The side nav's groups, in order. */
-export const SHELL_GROUPS = ['Library', 'Composition', 'Tools'] as const;
+export const SHELL_GROUPS = ['Library', 'Embedded apps', 'Tools'] as const;
 
 export const SHELL_PAGES: {
   path: string;
@@ -81,14 +81,14 @@ export const SHELL_PAGES: {
     load: () => import('./pages/lifecycle.page').then((m) => m.LifecyclePage)
   },
   {
-    path: 'fragment',
-    group: 'Composition',
-    label: 'Fragment (iframe)',
+    path: 'iframe',
+    group: 'Embedded apps',
+    label: 'Iframe',
     load: () => import('./pages/fragment.page').then((m) => m.FragmentPage)
   },
   {
     path: 'web-fragment',
-    group: 'Composition',
+    group: 'Embedded apps',
     label: 'Web Fragment',
     load: () =>
       import('./pages/web-fragment.page').then((m) => m.WebFragmentPage)
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 886949e..c4f346c 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -26,6 +26,18 @@
   }
 }
 
+// The embedded application's box, the same whether it is embedded in an
+// iframe or as a Web Fragment: a fixed size, scrolling inside, on white.
+.lab-embed {
+  display: block;
+  width: 100%;
+  height: 24rem;
+  overflow: auto;
+  border: 0.0625rem dashed var(--cps-color-line-mid);
+  border-radius: 0.5rem;
+  background-color: #fff;
+}
+
 .lab-main:focus {
   outline: none;
 }
@@ -245,15 +257,36 @@ html.lab-insets {
 
   a {
     display: block;
-    padding: 0.5rem 1.25rem;
+    // The bar is reserved on every row, as the selected one gets it: its
+    // text then stays where it is, in line with the group headers.
+    padding: 0.625rem 1.25rem 0.625rem 1rem;
+    border-left: 0.25rem solid transparent;
     color: var(--cps-color-text-dark);
     text-decoration: none;
+    transition:
+      background-color 0.12s,
+      color 0.12s;
+
+    // The tint is faint against the page, so the text changes colour too.
+    &:hover {
+      background-color: rgb(135 10 60 / 7%);
+      color: var(--cps-color-calm);
+    }
+
+    &:active {
+      background-color: rgb(135 10 60 / 15%);
+      color: var(--cps-color-calm);
+    }
 
     &.active {
-      border-left: 0.25rem solid #8a0b3c;
-      background-color: #f3e6eb;
-      color: #8a0b3c;
+      border-left-color: var(--cps-color-calm);
+      background-color: var(--cps-color-highlight-selected);
+      color: var(--cps-color-calm);
       font-weight: 700;
+
+      &:hover {
+        background-color: var(--cps-color-highlight-selected-dark);
+      }
     }
 
     // Inside the link, as cps-ui-kit does for full-width items: outside, the
@@ -264,13 +297,39 @@ html.lab-insets {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .lab-nav a {
+    transition: none;
+  }
+}
+
+// Forced colours drop the tints: the selected row keeps its bar, in the
+// system's selection colour, and the bold text.
+@media (forced-colors: active) {
+  .lab-nav a {
+    border-left-color: Canvas;
+
+    &.active {
+      border-left-color: Highlight;
+    }
+  }
+}
+
 .lab-nav__group {
-  margin: 0.75rem 1.25rem 0.25rem;
-  color: var(--cps-text-secondary);
-  font-size: 0.75rem;
+  margin: 0.25rem 1.25rem 0.375rem;
+  padding-top: 1rem;
+  border-top: 0.0625rem solid var(--cps-color-line-mid);
+  color: var(--cps-color-text-darkest);
+  font-size: 0.9375rem;
   font-weight: 700;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
+
+  // A divider only between groups.
+  &:first-child {
+    padding-top: 0.25rem;
+    border-top: 0;
+  }
 }
 
 .lab-nav__toggle {

From cdc84c46fb2f9ea09151b87c9920ee7f2d9ddca9 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 11:21:23 +0100
Subject: [PATCH 41/51] update page desc

---
 .../src/shell/pages/web-fragment.page.ts             | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts b/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
index dec4b09..42a3679 100644
--- a/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/web-fragment.page.ts
@@ -12,11 +12,13 @@ import {
     <section class="lab-page">
       <h1>Web Fragment</h1>
       <p>
-        The same embedded application, this time as a Web Fragment: its page is
-        drawn inside this one, in a shadow root, while its JavaScript runs in a
-        hidden iframe of its own. The gateway in the lab's server routes its
-        files. It forwards to this shell over this tab's channel, so its events
-        show in the Event Inspector marked ↪ Embedded application.
+        The embedded application as a Web Fragment. Unlike in an iframe, its
+        page is part of this page's DOM: it is drawn inside this one, in a
+        shadow root, as ordinary content of the page, not as a framed document
+        of its own. Its JavaScript still runs in a hidden iframe, for a clean
+        context. The gateway in the lab's server routes its files. It forwards
+        to this shell over this tab's channel, so its events show in the Event
+        Inspector marked ↪ Embedded application.
       </p>
       <web-fragment class="lab-embed" fragment-id="lab-fragment"></web-fragment>
     </section>

From e4a3ffb7d86ed450c1da447d4cb04a76bd155796 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 11:59:34 +0100
Subject: [PATCH 42/51] separate window reload behavior

---
 playwright/inspector.spec.ts                  |  28 ++++
 projects/ngx-ui-watchtower/DESIGN.md          |  11 +-
 .../uwt-inspector-window.spec.ts              | 108 +++++++++++-
 .../uwt-inspector-window.ts                   | 154 +++++++++++++-----
 4 files changed, 249 insertions(+), 52 deletions(-)

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 03f3479..80c7bda 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -406,6 +406,34 @@ test('an Esc that closes the inspector is marked handled, so notifications stay;
   ).toEqual([false, true]);
 });
 
+test('a separate window survives a reload, and shows what it had captured', async ({
+  page
+}) => {
+  const popup = page.waitForEvent('popup');
+  await press(page, 'Separate window');
+  const window = await popup;
+  await press(page, 'One of each kind');
+
+  const status = window.locator('.uwt-inspector__status');
+  await expect(status).toContainText(/[1-9]\d* events?/);
+  const captured = (await status.innerText()).match(/(\d+) events?/)![1];
+  // The reload gives it a new, empty document; this mark does not survive it.
+  await window.evaluate(() => (document.body.dataset.before = 'reload'));
+  let closed = false;
+  window.on('close', () => (closed = true));
+
+  await window.evaluate(() => location.reload()).catch(() => undefined);
+
+  await expect(window.locator('.uwt-inspector__header')).toBeVisible();
+  await expect(window.locator('body')).not.toHaveAttribute('data-before', /./);
+  await expect(status).toContainText(`${captured} event`);
+  expect(closed).toBe(false);
+
+  // Still the inspector's own window: closing it closes the inspector.
+  await window.close();
+  await expect(page.locator('uwt-inspector')).toHaveCount(0);
+});
+
 test('reopens where it was last, after a reload', async ({ page }) => {
   await press(page, 'Right pane');
   await expect(page.locator('uwt-inspector-pane')).toBeVisible();
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index d9c3407..b8a8beb 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -251,9 +251,12 @@ across realms).
   The app's stylesheets are copied in and kept in step, since Angular adds
   a component's styles when it first renders. Its icon is the inspector's
   own mark, an SVG taken from the logo it drew, as a library can't count on
-  serving a file. One session holds the
-  captured history from opening to closing, so moving between docks — each
-  a fresh view — loses nothing.
+  serving a file. The window stays at `about:blank`, as the app draws it.
+  Reloading it gives it a new, empty document, which the app draws into again
+  (its page hiding counts as a close only if the window is gone a moment
+  later). One session holds the captured history from opening to closing, so
+  moving between docks — each a fresh view — or reloading the window loses
+  nothing.
 - **Test doubles live in the specs that use them**, declared inline, never in
   a shared file and never exported. The one browser gap needing a stub is
   `BroadcastChannel`, which jsdom doesn't implement.
@@ -2123,7 +2126,7 @@ side, and the choice is remembered in this browser:
 | Dock                | What you get                                                                                                                                                                                                                                       |
 | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Dialog (default)    | A non-modal dialog on the right, half the screen wide, between 40rem (or nearly all of a small screen) and 64rem. Draggable, resizable and maximizable, with a Transparency slider. Escape inside it, its header included, closes it and marks the key handled, so cps-ui-kit's notifications stay open; elsewhere, Escape stays the app's. |
-| Separate window     | Its own browser window, which it fills: 1200×800 the first time, then wherever it was last. Closing the window closes the inspector, and so does reloading the app.                                                                                |
+| Separate window     | Its own browser window, which it fills: 1200×800 the first time, then wherever it was last. Closing the window closes the inspector, and so does reloading the app; reloading the window draws it again, with what it had captured.                                                                                |
 | Left, right, bottom | A pane beside or below the app, which moves aside to make room. Drag its inner edge, or focus it and use the arrow keys, to resize it between 30rem (12rem at the bottom) and 80% of the screen; each side remembers its size.                     |
 
 Moving it keeps everything captured, the filters and the pause; pages and
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
index 7b0cb1b..71f1f37 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -26,15 +26,55 @@ function fakePopup() {
   }
   jest.spyOn(popup, 'focus').mockImplementation(() => undefined);
   jest.spyOn(popup, 'close').mockImplementation(() => undefined);
-  jest.spyOn(popup, 'removeEventListener');
+  // A spy that still removes, through the real window: the popup the code
+  // sees is a proxy, which a window's own methods would not accept as `this`.
+  const remove = popup.removeEventListener.bind(popup);
+  jest
+    .spyOn(popup, 'removeEventListener')
+    .mockImplementation((type, listener, options) =>
+      remove(type, listener, options)
+    );
+  // What a browser does to a window: a reload gives it a new document, and
+  // closing it makes it `closed`. Everything else is the iframe's window.
+  let current: Document = doc;
+  let closed = false;
+  const shown = new Proxy(popup, {
+    get(target, name) {
+      if (name === 'document') {
+        return current;
+      }
+      if (name === 'closed') {
+        return closed;
+      }
+      const value = Reflect.get(target, name, target);
+      // The spies are the test's to see; any other method is the window's.
+      return typeof value === 'function' && !jest.isMockFunction(value)
+        ? value.bind(target)
+        : value;
+    }
+  });
   return {
-    popup,
+    popup: shown,
     doc,
     fire: (type: string) => popup.dispatchEvent(new popup.Event(type)),
     key: () =>
-      doc.body.dispatchEvent(
+      current.body.dispatchEvent(
         new popup.KeyboardEvent('keydown', { bubbles: true })
-      )
+      ),
+    /** The page hides, and a new, empty document takes its place. */
+    reload: () => {
+      popup.dispatchEvent(new popup.Event('pagehide'));
+      // A document with a window of its own, as a browser's is.
+      current = document.body.appendChild(
+        document.createElement('iframe')
+      ).contentDocument!;
+      return current;
+    },
+    /** The page hides, and the window goes. */
+    close: () => {
+      popup.dispatchEvent(new popup.Event('pagehide'));
+      closed = true;
+    }
   };
 }
 
@@ -130,24 +170,80 @@ describe('uwtOpenInspectorWindow', () => {
   });
 
   it('should pass on key presses, and report its closing with its geometry', () => {
-    const { popup, fire, key } = fakePopup();
+    jest.useFakeTimers();
+    const { popup, close, key } = fakePopup();
     jest.spyOn(window, 'open').mockReturnValue(popup);
     const host = uwtOpenInspectorWindow(options);
 
     key();
     expect(options.onKeydown).toHaveBeenCalledTimes(1);
 
-    fire('pagehide');
+    close();
     expect(options.onGeometry).toHaveBeenCalledWith({
       width: 900,
       height: 700,
       left: 5,
       top: 6
     });
+    // A reload hides the page too, so the window is looked at once it settles.
+    jest.advanceTimersByTime(100);
     expect(options.onClosed).toHaveBeenCalledTimes(1);
 
     host?.destroy();
     expect(options.onGeometry).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
+  it('should stay open, showing the inspector again, when the window is reloaded', () => {
+    jest.useFakeTimers();
+    const { popup, reload, key } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    const host = uwtOpenInspectorWindow(options);
+
+    const doc = reload();
+    jest.advanceTimersByTime(100);
+
+    expect(options.onClosed).not.toHaveBeenCalled();
+    expect(doc.title).toBe('Event Inspector · shop');
+    expect(doc.head.textContent).toContain('.app {}');
+    expect(doc.querySelector('.uwt-inspector__title')?.textContent).toBe(
+      'Event Inspector'
+    );
+    expect(doc.querySelector('link[rel="icon"]')).not.toBeNull();
+    key();
+    expect(options.onKeydown).toHaveBeenCalledTimes(1);
+    host?.destroy();
+    jest.useRealTimers();
+  });
+
+  it('should keep the geometry of the window it shows again, for when it closes', () => {
+    jest.useFakeTimers();
+    const { popup, reload } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    const host = uwtOpenInspectorWindow(options);
+
+    reload();
+    jest.advanceTimersByTime(100);
+    expect(options.onGeometry).toHaveBeenCalledTimes(1);
+
+    host?.destroy();
+    expect(options.onGeometry).toHaveBeenCalledTimes(2);
+    jest.useRealTimers();
+  });
+
+  it('should report its closing when the window never comes back', () => {
+    jest.useFakeTimers();
+    const { popup, fire } = fakePopup();
+    jest.spyOn(window, 'open').mockReturnValue(popup);
+    const host = uwtOpenInspectorWindow(options);
+
+    fire('pagehide');
+    // The inspector has timers of its own: the wait is advanced, not run out.
+    jest.advanceTimersByTime(5000);
+
+    expect(options.onClosed).toHaveBeenCalledTimes(1);
+    host?.destroy();
+    jest.useRealTimers();
   });
 
   it('should close the window again when it fails to show the inspector', () => {
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 02d1bb7..9b322b2 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -14,7 +14,10 @@ import {
 import { UwtInspectorComponent } from '../uwt-inspector/uwt-inspector.component';
 import { UwtInspectorHost } from '../uwt-inspector-session/uwt-inspector-session';
 import { UwtInspectorWindowGeometry } from '../uwt-inspector-preferences/uwt-inspector-preferences';
-import { uwtSafeVoid } from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
+import {
+  uwtSafe,
+  uwtSafeVoid
+} from '../uwt-inspector-internal.util/uwt-inspector-internal.util';
 
 /** The window's name, so a second open reuses it rather than adding one. */
 export const UWT_INSPECTOR_WINDOW_NAME = 'ngx-ui-watchtower-event-inspector';
@@ -31,6 +34,15 @@ export function uwtInspectorWindowName(application?: string): string {
 
 const STYLES = 'style, link[rel~="stylesheet"], base';
 
+/**
+ * A window's page hides when the window closes, and when it reloads. Which it
+ * was is seen a moment later: a window that is still there, with a new
+ * document, was reloaded. The wait is bounded; a window that has neither
+ * closed nor come back in that time is treated as closed.
+ */
+const SETTLE_EVERY_MS = 50;
+const SETTLE_TRIES = 20;
+
 export interface UwtInspectorWindowOptions {
   /** The app's document. */
   document: Document;
@@ -73,43 +85,72 @@ export function uwtOpenInspectorWindow(
     return undefined;
   }
 
-  const doc = popup.document;
-  // A window left over from before the app reloaded holds stale content.
-  doc.head.replaceChildren();
-  doc.body.replaceChildren();
-  doc.title = options.title;
-  doc.body.style.margin = '0';
-  const stopMirroring = mirrorStyles(options.document, doc);
-
-  const element = doc.body.appendChild(doc.createElement('div'));
-  element.style.height = '100vh';
-  const environment = createEnvironmentInjector(
-    [
-      { provide: DOCUMENT, useValue: doc },
-      CpsNotificationService,
-      { provide: CPS_LIVE_ANNOUNCER_SERVICE, useClass: CpsLiveAnnouncerService }
-    ],
-    options.environment
-  );
-  let created: ComponentRef<UwtInspectorComponent> | undefined;
+  /** The inspector, drawn into one document of the window: a reload gives it another. */
+  interface Mounted {
+    doc: Document;
+    ref: ComponentRef<UwtInspectorComponent>;
+    environment: EnvironmentInjector;
+    stopMirroring: () => void;
+  }
+
+  const mount = (doc: Document): Mounted => {
+    // A window left over from before the app reloaded holds stale content.
+    doc.head.replaceChildren();
+    doc.body.replaceChildren();
+    doc.title = options.title;
+    doc.body.style.margin = '0';
+    const stopMirroring = mirrorStyles(options.document, doc);
+
+    const element = doc.body.appendChild(doc.createElement('div'));
+    element.style.height = '100vh';
+    const environment = createEnvironmentInjector(
+      [
+        { provide: DOCUMENT, useValue: doc },
+        CpsNotificationService,
+        {
+          provide: CPS_LIVE_ANNOUNCER_SERVICE,
+          useClass: CpsLiveAnnouncerService
+        }
+      ],
+      options.environment
+    );
+    let created: ComponentRef<UwtInspectorComponent> | undefined;
+    try {
+      created = createComponent(UwtInspectorComponent, {
+        environmentInjector: environment,
+        hostElement: element
+      });
+      created.setInput('dock', 'window');
+      options.appRef.attachView(created.hostView);
+      created.changeDetectorRef.detectChanges();
+      setIcon(doc);
+    } catch (error) {
+      created?.destroy();
+      environment.destroy();
+      stopMirroring();
+      throw error;
+    }
+    doc.addEventListener('keydown', options.onKeydown, true);
+    return { doc, ref: created, environment, stopMirroring };
+  };
+
+  const unmount = (mounted: Mounted) => {
+    mounted.doc.removeEventListener('keydown', options.onKeydown, true);
+    mounted.stopMirroring();
+    // Destroying the view detaches it from the app, unless the app, being
+    // destroyed, already has: detaching it here would warn (NG0406).
+    mounted.ref.destroy();
+    mounted.environment.destroy();
+  };
+
+  let current: Mounted | undefined;
   try {
-    created = createComponent(UwtInspectorComponent, {
-      environmentInjector: environment,
-      hostElement: element
-    });
-    created.setInput('dock', 'window');
-    options.appRef.attachView(created.hostView);
-    created.changeDetectorRef.detectChanges();
-    setIcon(doc);
+    current = mount(popup.document);
   } catch (error) {
     // Half open: close it again, for the caller to open a dialog instead.
-    created?.destroy();
-    environment.destroy();
-    stopMirroring();
     popup.close();
     throw error;
   }
-  const ref = created;
 
   let saved = false;
   const saveGeometry = () => {
@@ -123,32 +164,61 @@ export function uwtOpenInspectorWindow(
       });
     }
   };
+
+  let settling: ReturnType<typeof setTimeout> | undefined;
+  /** Closed, or reloaded: a reload gets the inspector drawn again in its new document. */
+  const settle = (triesLeft: number) => {
+    settling = undefined;
+    if (popup.closed) {
+      options.onClosed();
+      return;
+    }
+    const next = uwtSafe('window.document', () => popup.document, undefined);
+    if (next?.body && next !== current?.doc) {
+      if (current) {
+        unmount(current);
+        current = undefined;
+      }
+      try {
+        current = mount(next);
+        // Its size is saved again when it next closes.
+        saved = false;
+        popup.addEventListener('pagehide', onPageHide);
+      } catch {
+        options.onClosed();
+      }
+    } else if (triesLeft > 0) {
+      settling = setTimeout(() => settle(triesLeft - 1), SETTLE_EVERY_MS);
+    } else {
+      options.onClosed();
+    }
+  };
   const onPageHide = () => {
+    // The size is gone once the window is, so it is taken now.
     saveGeometry();
-    options.onClosed();
+    settling ??= setTimeout(() => settle(SETTLE_TRIES), SETTLE_EVERY_MS);
   };
   const closeWithApp = () => popup.close();
   popup.addEventListener('pagehide', onPageHide);
   view.addEventListener('pagehide', closeWithApp);
-  doc.addEventListener('keydown', options.onKeydown, true);
 
   return {
     dock: 'window',
     focus: () => {
       popup.focus();
-      ref.instance.focusInspector();
+      current?.ref.instance.focusInspector();
     },
-    containsFocus: () => doc.hasFocus(),
+    containsFocus: () => current?.doc.hasFocus() ?? false,
     destroy: () => {
+      clearTimeout(settling);
+      settling = undefined;
       popup.removeEventListener('pagehide', onPageHide);
       view.removeEventListener('pagehide', closeWithApp);
-      doc.removeEventListener('keydown', options.onKeydown, true);
       uwtSafeVoid('window.geometry', saveGeometry);
-      stopMirroring();
-      // Destroying the view detaches it from the app, unless the app, being
-      // destroyed, already has: detaching it here would warn (NG0406).
-      ref.destroy();
-      environment.destroy();
+      if (current) {
+        unmount(current);
+        current = undefined;
+      }
       popup.close();
     }
   };

From 7970148c624f48d205cfb02b4072d78007adf844 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 12:28:07 +0100
Subject: [PATCH 43/51] feat(lab): control every library and Event Inspector
 setting, and the startup options, from the Settings page

---
 README.md                                     |   7 +-
 playwright/settings.spec.ts                   | 101 ++++++++++
 .../src/lab/lab-settings-fields.ts            | 185 ++++++++++++++++++
 .../src/shell/pages/settings.page.ts          | 166 +++++++++++++---
 projects/watchtower-lab/src/styles.scss       |  19 ++
 5 files changed, 448 insertions(+), 30 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-settings-fields.ts

diff --git a/README.md b/README.md
index 140f388..91e208c 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,8 @@ each forwarding through the shell over the tab's own channel). **Tools**:
 **Event Inspector** (every dock, showing the one it is in, event generators,
 and the `--uwt-inspector-inset-*` opt-in on the lab's fixed header and status
 bar), **On the wire**: what the mock backend actually received, and
-**Settings**: the library's settings and the mock broker's answer, applied
+**Settings**: how the lab starts, a control for each of the library's
+settings and the Event Inspector's, the mock broker's answer, all applied
 together with one reload, the debug flags, and the settings in effect.
 
 The header's chips show how this load runs; where the broker is set
@@ -113,8 +114,8 @@ and the one value transform is `mask-order-ids`. One more, `lab`, is the
 lab's own: `{ "logBatching": true }` makes its log provider batch, and send
 when the library flushes it. For example
 `?config={"scenarios":{"emitLifecycleEvents":true}}`. **Settings** edits it,
-with switches for the common options, and refuses a section, setting or
-type the library doesn't have.
+with a control for each setting and a JSON field for the rest, and refuses a
+section, setting or type the library doesn't have.
 
 The mock RUM broker's answer is set on the **Settings** page too:
 
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 8dfc20f..fc2f5ab 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -19,6 +19,21 @@ const asPane = (page: Page) =>
     )
   );
 
+/** Picks the option starting with `option` in the select labelled `label`, from the keyboard. */
+async function choose(page: Page, label: string, option: string) {
+  await page.getByRole('combobox', { name: label }).press('ArrowDown');
+  await page.getByRole('option', { name: new RegExp(`^${option}`) }).click();
+}
+
+const toggle = (page: Page, label: string) =>
+  page
+    .locator('cps-switch', { hasText: label })
+    .locator('label.cps-switch')
+    .click();
+
+const fill = (page: Page, label: string, value: string) =>
+  page.locator('cps-input', { hasText: label }).locator('input').fill(value);
+
 /** Waits for the log backend to hold one record, and returns it. */
 async function onlyLog(backend: {
   logs(): Promise<LogRecord[]>;
@@ -283,6 +298,92 @@ test('redact: false for logging stops its value scan only; BI still scans, and k
   );
 });
 
+test('Settings sets the startup options, and applying them reloads with them', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  await choose(page, 'Destination', 'noop');
+  await choose(page, 'Broadcast channel', 'shared');
+  await choose(page, 'Event Inspector', 'noshortcut');
+  await toggle(page, 'Telemetry');
+
+  // Nothing changes until applied.
+  expect(new URL(page.url()).searchParams.get('destination')).toBeNull();
+
+  await press(page, 'Apply and reload');
+  await expect(page).toHaveURL(/destination=noop/);
+
+  const params = new URL(page.url()).searchParams;
+  expect(params.get('destination')).toBe('noop');
+  expect(params.get('channel')).toBe('shared');
+  expect(params.get('inspector')).toBe('noshortcut');
+  expect(params.get('telemetry')).toBe('off');
+  const header = page.locator('.lab-header');
+  await expect(header).toContainText('destination: noop');
+  await expect(header).toContainText('telemetry: off');
+  await expect(header).toContainText('channel: shared');
+});
+
+test("every area's settings are controls on the page, and apply as set", async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+
+  await fill(page, 'Event namespace', 'acme');
+  await fill(page, 'Default timeout', '12345');
+  await fill(page, 'Step limit', '7');
+  await fill(page, 'Mark cleanup fallback', '999');
+  await toggle(page, 'Redact scenario payloads');
+  await choose(page, 'Minimum level', 'warn');
+  await toggle(page, 'Mirror errors to RUM');
+  await toggle(page, 'Redact log values');
+  await fill(page, 'BI dedup keys kept', '77');
+  await toggle(page, 'Redact BI payloads');
+  await fill(page, 'Longest string', '321');
+  await fill(page, 'Most keys', '9');
+  await fill(page, 'Longest stack', '456');
+  await toggle(page, 'Include stacks');
+  await toggle(page, 'Strip URL queries');
+  await fill(page, 'Events kept per kind', '25');
+  await fill(page, 'Payload characters shown', '1234');
+  await fill(page, 'Keep events from before opening', '5');
+  await toggle(page, 'Batch logs');
+
+  // Each control writes into the overlay, which shows it.
+  await expect(overlay).toHaveValue(/"eventNamespace": "acme"/);
+  await expect(overlay).toHaveValue(/"minLevel": "warn"/);
+  await expect(overlay).toHaveValue(/"captureBeforeOpen": 5/);
+  await expect(overlay).toHaveValue(/"logBatching": true/);
+
+  await press(page, 'Apply and reload');
+
+  const effective = page.locator('.lab-readout');
+  for (const line of [
+    '"eventNamespace": "acme"',
+    '"defaultTimeoutMs": 12345',
+    '"maxSteps": 7',
+    '"markCleanupFallbackMs": 999',
+    '"minLevel": "warn"',
+    '"mirrorErrorsToRum": false',
+    '"dedupMaxKeys": 77',
+    '"maxStringLength": 321',
+    '"maxKeys": 9',
+    '"maxStackLength": 456',
+    '"includeStack": false',
+    '"stripUrlQuery": false',
+    '"maxEventsPerSection": 25',
+    '"maxPayloadCharsInView": 1234',
+    '"captureBeforeOpen": 5'
+  ]) {
+    await expect(effective).toContainText(line);
+  }
+  // The three `redact` switches each turned their own concern's scrubbing off.
+  await expect(overlay).toHaveValue(/"scenarios": \{[^}]*"redact": false/);
+  await expect(overlay).toHaveValue(/"logging": \{[^}]*"redact": false/);
+  await expect(overlay).toHaveValue(/"bi": \{[^}]*"redact": false/);
+});
+
 test('inspector settings: a custom shortcut, a smaller section, a smaller view', async ({
   page
 }) => {
diff --git a/projects/watchtower-lab/src/lab/lab-settings-fields.ts b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
new file mode 100644
index 0000000..ea122fa
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
@@ -0,0 +1,185 @@
+/** A setting the Settings page offers as a control, in a `?config=` section. */
+export type LabField = {
+  section: string;
+  key: string;
+  label: string;
+} & (
+  | { kind: 'switch' | 'number' | 'text' }
+  | { kind: 'select'; options: { label: string; value: string }[] }
+);
+
+export interface LabFieldGroup {
+  title: string;
+  fields: LabField[];
+}
+
+const LOG_LEVELS = [
+  { label: 'log — everything', value: 'log' },
+  { label: 'warn — warnings and errors', value: 'warn' },
+  { label: 'error — errors only', value: 'error' }
+];
+
+/**
+ * The library's settings the lab takes in its `?config=` overlay, one control
+ * each, by area. A label ends with the setting's name, as the overlay has
+ * it, so the control and the JSON can be read together.
+ */
+export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
+  {
+    title: 'Identity',
+    fields: [
+      {
+        kind: 'text',
+        section: 'identity',
+        key: 'eventNamespace',
+        label: 'Event namespace (identity.eventNamespace)'
+      }
+    ]
+  },
+  {
+    title: 'Scenarios',
+    fields: [
+      {
+        kind: 'number',
+        section: 'scenarios',
+        key: 'defaultTimeoutMs',
+        label: 'Default timeout, ms (scenarios.defaultTimeoutMs)'
+      },
+      {
+        kind: 'switch',
+        section: 'scenarios',
+        key: 'emitLifecycleEvents',
+        label: 'Lifecycle step events (scenarios.emitLifecycleEvents)'
+      },
+      {
+        kind: 'number',
+        section: 'scenarios',
+        key: 'maxSteps',
+        label: 'Step limit (scenarios.maxSteps)'
+      },
+      {
+        kind: 'switch',
+        section: 'scenarios',
+        key: 'userTimings',
+        label: 'User timings (scenarios.userTimings)'
+      },
+      {
+        kind: 'number',
+        section: 'scenarios',
+        key: 'markCleanupFallbackMs',
+        label: 'Mark cleanup fallback, ms (scenarios.markCleanupFallbackMs)'
+      },
+      {
+        kind: 'switch',
+        section: 'scenarios',
+        key: 'redact',
+        label: 'Redact scenario payloads (scenarios.redact)'
+      }
+    ]
+  },
+  {
+    title: 'Logging',
+    fields: [
+      {
+        kind: 'select',
+        section: 'logging',
+        key: 'minLevel',
+        label: 'Minimum level (logging.minLevel)',
+        options: LOG_LEVELS
+      },
+      {
+        kind: 'switch',
+        section: 'logging',
+        key: 'mirrorErrorsToRum',
+        label: 'Mirror errors to RUM (logging.mirrorErrorsToRum)'
+      },
+      {
+        kind: 'switch',
+        section: 'logging',
+        key: 'redact',
+        label: 'Redact log values (logging.redact)'
+      }
+    ]
+  },
+  {
+    title: 'BI events',
+    fields: [
+      {
+        kind: 'number',
+        section: 'bi',
+        key: 'dedupWindowMs',
+        label: 'BI dedup window, ms (bi.dedupWindowMs)'
+      },
+      {
+        kind: 'number',
+        section: 'bi',
+        key: 'dedupMaxKeys',
+        label: 'BI dedup keys kept (bi.dedupMaxKeys)'
+      },
+      {
+        kind: 'switch',
+        section: 'bi',
+        key: 'redact',
+        label: 'Redact BI payloads (bi.redact)'
+      }
+    ]
+  },
+  {
+    title: 'Redaction',
+    fields: [
+      {
+        kind: 'number',
+        section: 'redaction',
+        key: 'maxStringLength',
+        label: 'Longest string (redaction.maxStringLength)'
+      },
+      {
+        kind: 'number',
+        section: 'redaction',
+        key: 'maxKeys',
+        label: 'Most keys (redaction.maxKeys)'
+      },
+      {
+        kind: 'number',
+        section: 'redaction',
+        key: 'maxStackLength',
+        label: 'Longest stack (redaction.maxStackLength)'
+      },
+      {
+        kind: 'switch',
+        section: 'redaction',
+        key: 'includeStack',
+        label: 'Include stacks (redaction.includeStack)'
+      },
+      {
+        kind: 'switch',
+        section: 'redaction',
+        key: 'stripUrlQuery',
+        label: 'Strip URL queries (redaction.stripUrlQuery)'
+      }
+    ]
+  },
+  {
+    title: 'Event Inspector',
+    fields: [
+      {
+        kind: 'number',
+        section: 'inspector',
+        key: 'maxEventsPerSection',
+        label: 'Events kept per kind (inspector.maxEventsPerSection)'
+      },
+      {
+        kind: 'number',
+        section: 'inspector',
+        key: 'maxPayloadCharsInView',
+        label: 'Payload characters shown (inspector.maxPayloadCharsInView)'
+      },
+      {
+        kind: 'number',
+        section: 'inspector',
+        key: 'captureBeforeOpen',
+        label: 'Keep events from before opening (inspector.captureBeforeOpen)'
+      }
+    ]
+  }
+];
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 52270f8..d0d13a3 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -29,7 +29,8 @@ import {
 } from 'cps-ui-kit';
 import { labCheckConfig } from '../../lab/lab-config-check';
 import { parseJsonObject } from '../../lab/lab-json';
-import { labSearch } from '../../lab/lab-options';
+import { labSearch, LabOptions } from '../../lab/lab-options';
+import { LAB_FIELD_GROUPS, LabField } from '../../lab/lab-settings-fields';
 import {
   LAB_TELEMETRIES,
   LabBrokerMode,
@@ -39,6 +40,22 @@ import {
 import { LAB_OPTIONS } from '../shell.config';
 
 const DEBUG_FLAGS = ['debugScenario', 'debugBI', 'debugLogger'] as const;
+
+/** How the lab starts; each is a query-string option, read once at startup. */
+const DESTINATIONS: { label: string; value: LabOptions['destination'] }[] = [
+  { label: 'rum — the RUM sink, to the mock backend', value: 'rum' },
+  { label: 'noop — nothing is sent', value: 'noop' },
+  { label: "custom — the lab's own sink", value: 'custom' }
+];
+const CHANNELS: { label: string; value: LabOptions['channel'] }[] = [
+  { label: "tab — the shell's own channel", value: 'tab' },
+  { label: 'shared — one channel for every tab', value: 'shared' }
+];
+const INSPECTOR_MODES: { label: string; value: LabOptions['inspector'] }[] = [
+  { label: 'on — with its keyboard shortcut', value: 'on' },
+  { label: 'noshortcut — open it from the page', value: 'noshortcut' },
+  { label: 'off — disabled', value: 'off' }
+];
 type DebugFlag = (typeof DEBUG_FLAGS)[number];
 
 const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
@@ -81,32 +98,104 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
     <section class="lab-page">
       <h1>Settings</h1>
       <p>
-        What the next load runs with: the library's settings, as a
-        <code>?config=</code> overlay on the lab's own, and the mock RUM
-        broker's answer. Both apply together, with a reload.
+        What the next load runs with: how the lab starts, the library's settings
+        — a <code>?config=</code> overlay on the lab's own — and the mock RUM
+        broker's answer. They apply together, with a reload.
       </p>
 
       <div class="lab-card">
-        <h2>Library settings</h2>
-        <div class="lab-switches">
-          <cps-switch
-            label="Lifecycle step events (scenarios.emitLifecycleEvents)"
-            [value]="!!setting('scenarios', 'emitLifecycleEvents')"
-            [disabled]="!overlay()"
-            (valueChanged)="set('scenarios', 'emitLifecycleEvents', $event)" />
-          <cps-switch
-            label="User timings (scenarios.userTimings)"
-            [value]="!!setting('scenarios', 'userTimings')"
-            [disabled]="!overlay()"
-            (valueChanged)="set('scenarios', 'userTimings', $event)" />
+        <h2>Run</h2>
+        <p>How the lab starts: query-string options, read once at startup.</p>
+        <div class="lab-fields">
+          <cps-select
+            label="Destination (?destination=)"
+            [options]="destinations"
+            [returnObject]="false"
+            [value]="destination()"
+            width="26rem"
+            (valueChanged)="destination.set($event)" />
+          <cps-select
+            label="Broadcast channel (?channel=)"
+            [options]="channels"
+            [returnObject]="false"
+            [value]="channel()"
+            width="26rem"
+            (valueChanged)="channel.set($event)" />
+          <cps-select
+            label="Event Inspector (?inspector=)"
+            [options]="inspectorModes"
+            [returnObject]="false"
+            [value]="inspector()"
+            width="26rem"
+            (valueChanged)="inspector.set($event)" />
+          <div class="lab-switches">
+            <cps-switch
+              label="Telemetry (?telemetry=)"
+              [value]="telemetry()"
+              (valueChanged)="telemetry.set($event)" />
+            <cps-switch
+              label="Batch logs, sent on flush() (lab.logBatching)"
+              [value]="!!setting('lab', 'logBatching')"
+              [disabled]="!overlay()"
+              (valueChanged)="set('lab', 'logBatching', $event)" />
+          </div>
         </div>
-        <cps-input
-          type="number"
-          label="BI dedup window, ms (bi.dedupWindowMs)"
-          width="18rem"
-          [value]="'' + setting('bi', 'dedupWindowMs')"
-          [disabled]="!overlay()"
-          (valueChanged)="setNumber('bi', 'dedupWindowMs', $event)" />
+      </div>
+
+      @for (group of groups; track group.title) {
+        <div class="lab-card">
+          <h2>{{ group.title }}</h2>
+          <div class="lab-fields">
+            @for (field of group.fields; track field.key) {
+              @switch (field.kind) {
+                @case ('switch') {
+                  <cps-switch
+                    [label]="field.label"
+                    [value]="!!setting(field.section, field.key)"
+                    [disabled]="!overlay()"
+                    (valueChanged)="set(field.section, field.key, $event)" />
+                }
+                @case ('number') {
+                  <cps-input
+                    type="number"
+                    [label]="field.label"
+                    width="26rem"
+                    [value]="'' + setting(field.section, field.key)"
+                    [disabled]="!overlay()"
+                    (valueChanged)="
+                      setNumber(field.section, field.key, $event)
+                    " />
+                }
+                @case ('text') {
+                  <cps-input
+                    [label]="field.label"
+                    width="26rem"
+                    [value]="'' + (setting(field.section, field.key) ?? '')"
+                    [disabled]="!overlay()"
+                    (valueChanged)="set(field.section, field.key, $event)" />
+                }
+                @case ('select') {
+                  <cps-select
+                    [label]="field.label"
+                    [options]="selectOptions(field)"
+                    [returnObject]="false"
+                    [value]="'' + setting(field.section, field.key)"
+                    width="26rem"
+                    [disabled]="!overlay()"
+                    (valueChanged)="set(field.section, field.key, $event)" />
+                }
+              }
+            }
+          </div>
+        </div>
+      }
+
+      <div class="lab-card">
+        <h2>The ?config= overlay</h2>
+        <p>
+          What the controls above write, and what more the lab takes: edit it
+          here for anything they don't cover, such as patterns and loggers.
+        </p>
         <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
         <cps-textarea
           ngSkipHydration
@@ -162,7 +251,7 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
           (valueChanged)="brokerConfig.set($event)" />
       </div>
 
-      <div class="lab-actions">
+      <div class="lab-actions lab-apply-bar">
         <cps-button label="Apply and reload" (clicked)="apply()" />
         <cps-button
           label="Back to the lab's settings"
@@ -200,6 +289,10 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
 })
 export class SettingsPage {
   protected readonly flags = DEBUG_FLAGS;
+  protected readonly groups = LAB_FIELD_GROUPS;
+  protected readonly destinations = DESTINATIONS;
+  protected readonly channels = CHANNELS;
+  protected readonly inspectorModes = INSPECTOR_MODES;
   protected readonly modes = BROKER_MODES;
   protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
     label: t,
@@ -210,6 +303,12 @@ export class SettingsPage {
   private readonly options = inject(LAB_OPTIONS);
   private readonly wire = inject(LabWire);
 
+  /** How the lab starts, to be: the load's own to begin with. */
+  protected readonly destination = signal(this.options.destination);
+  protected readonly channel = signal(this.options.channel);
+  protected readonly inspector = signal(this.options.inspector);
+  protected readonly telemetry = signal(this.options.telemetry);
+
   /** The settings in effect, which the controls show until changed. */
   private readonly inEffect: Record<string, Record<string, unknown>> = (() => {
     const inspector = inject(UWT_EVENT_INSPECTOR_CONFIG);
@@ -295,6 +394,10 @@ export class SettingsPage {
     2
   );
 
+  protected selectOptions(field: LabField): { label: string; value: string }[] {
+    return field.kind === 'select' ? field.options : [];
+  }
+
   /** A setting as the draft has it, or as it is in effect. */
   protected setting(section: string, key: string): unknown {
     const fromDraft = (
@@ -355,7 +458,12 @@ export class SettingsPage {
     await this.wire.setBrokerMode(this.mode());
     await this.wire.setTelemetries(this.telemetries());
     await this.wire.setBrokerConfig(brokerConfig);
-    this.reload(overlay);
+    this.reload(overlay, {
+      destination: this.destination(),
+      channel: this.channel(),
+      inspector: this.inspector(),
+      telemetry: this.telemetry()
+    });
   }
 
   /** The lab's own settings, and the broker's default answer. */
@@ -379,9 +487,13 @@ export class SettingsPage {
     this.debug.set(this.readDebug());
   }
 
-  private reload(config: Record<string, unknown>): void {
+  /** Starts the lab again, with `config` and how it is to start: as now, by default. */
+  private reload(
+    config: Record<string, unknown>,
+    start: Omit<LabOptions, 'config'> = this.options
+  ): void {
     this.window.location.assign(
-      `${this.window.location.pathname}${labSearch({ ...this.options, config })}`
+      `${this.window.location.pathname}${labSearch({ ...start, config })}`
     );
   }
 
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index c4f346c..7149b59 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -38,6 +38,25 @@
   background-color: #fff;
 }
 
+// A card's controls side by side where there is room, one under another where there isn't.
+.lab-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
+  gap: 0.75rem 1.5rem;
+  align-items: start;
+}
+
+.lab-apply-bar {
+  // Settings: in reach however far the page scrolls, above the status bar
+  // and any pane docked at the bottom.
+  position: sticky;
+  bottom: calc(2.25rem + var(--uwt-inspector-inset-bottom, 0px));
+  z-index: 5;
+  padding: 0.75rem 0;
+  border-top: 0.0625rem solid var(--cps-color-line-mid);
+  background-color: #f4f6f9;
+}
+
 .lab-main:focus {
   outline: none;
 }

From 2b4c10f4e0839489e0fc6a9920735a8a03d8715c Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 12:58:31 +0100
Subject: [PATCH 44/51] editors for logger levels, inspector shortcuts and the
 redaction lists on the Settings page

---
 README.md                                     |   6 +-
 playwright/settings.spec.ts                   |  93 +++++++++++
 .../src/lab/lab-logger-levels.component.ts    | 104 ++++++++++++
 .../src/lab/lab-settings-fields.ts            |  66 +++++++-
 .../src/lab/lab-shortcuts.component.ts        | 154 ++++++++++++++++++
 .../src/shell/pages/settings.page.ts          |  99 ++++++++++-
 projects/watchtower-lab/src/styles.scss       |  47 ++++++
 7 files changed, 560 insertions(+), 9 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-logger-levels.component.ts
 create mode 100644 projects/watchtower-lab/src/lab/lab-shortcuts.component.ts

diff --git a/README.md b/README.md
index 91e208c..0b27d5a 100644
--- a/README.md
+++ b/README.md
@@ -114,8 +114,10 @@ and the one value transform is `mask-order-ids`. One more, `lab`, is the
 lab's own: `{ "logBatching": true }` makes its log provider batch, and send
 when the library flushes it. For example
 `?config={"scenarios":{"emitLifecycleEvents":true}}`. **Settings** edits it,
-with a control for each setting and a JSON field for the rest, and refuses a
-section, setting or type the library doesn't have.
+with a control for each setting — switches, numbers, lists to pick from, lists
+of patterns, and editors for logger levels and the inspector's shortcuts — and
+the JSON itself, and refuses a section, setting or type the library doesn't
+have.
 
 The mock RUM broker's answer is set on the **Settings** page too:
 
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index fc2f5ab..bdb8fe3 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -384,6 +384,99 @@ test("every area's settings are controls on the page, and apply as set", async (
   await expect(overlay).toHaveValue(/"bi": \{[^}]*"redact": false/);
 });
 
+test('redaction lists are picked from, and written as lines of RegExp sources', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+
+  // The five value patterns start picked; ipv4 is left out, a transform added.
+  const patterns = page.getByRole('combobox', {
+    name: 'Value patterns scanned'
+  });
+  await patterns.press('ArrowDown');
+  await page.getByRole('option', { name: /^ipv4/ }).click();
+  await page.keyboard.press('Escape');
+  await expect(overlay).toHaveValue(/"scanValuePatterns": \[[^\]]*"email"/);
+  await expect(overlay).not.toHaveValue(/"ipv4"/);
+  await choose(page, 'Value transforms', 'mask-order-ids');
+  await expect(overlay).toHaveValue(
+    /"extraValueTransforms": \[\s*"mask-order-ids"/
+  );
+
+  await page
+    .getByRole('textbox', { name: /^Extra key patterns/ })
+    .fill('^acct_\nsecret');
+  await page
+    .getByRole('textbox', { name: /^Extra value patterns/ })
+    .fill('ORD-\\d+');
+  await expect(overlay).toHaveValue(
+    /"extraKeyPatterns": \[\s*"\^acct_",\s*"secret"/
+  );
+  await expect(overlay).toHaveValue(/"extraValuePatterns": \[\s*"ORD-\\\\d\+"/);
+
+  await press(page, 'Apply and reload');
+
+  const effective = page.locator('.lab-readout');
+  await expect(effective).toContainText('"email"');
+  await expect(effective).not.toContainText('"ipv4"');
+  await expect(effective).toContainText('ƒ mask-order-ids');
+  await expect(effective).toContainText('/^acct_/i');
+  // The readout is JSON: the backslash of `\d` shows doubled.
+  await expect(effective).toContainText('/ORD-\\\\d+/');
+});
+
+test('loggers each have a level, added and removed one at a time', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  // The lab starts with one: noisy, at warn.
+  await expect(page.getByText('noisy', { exact: true })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Remove logger noisy' }).click();
+  await fill(page, 'Logger name', 'orders');
+  await choose(page, 'Level for a new logger', 'error');
+  await press(page, 'Add logger');
+
+  await expect(overlay).toHaveValue(/"levels": \{\s*"orders": "error"\s*\}/);
+  await expect(
+    page.getByRole('button', { name: 'Remove logger orders' })
+  ).toBeVisible();
+
+  await press(page, 'Apply and reload');
+  const effective = page.locator('.lab-readout');
+  await expect(effective).toContainText('"orders": "error"');
+  await expect(effective).not.toContainText('"noisy"');
+});
+
+test("the Event Inspector's shortcuts are listed, removed and added", async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  await expect(
+    page.getByRole('button', { name: 'Remove shortcut Shift+E+I' })
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: 'Remove shortcut Shift+E+I' }).click();
+  await fill(page, 'Key (KeyboardEvent.code)', 'F9');
+  await press(page, 'Add shortcut');
+  await expect(overlay).toHaveValue(
+    /"shortcuts": \[\s*\{\s*"code": "F9"\s*\}\s*\]/
+  );
+
+  await press(page, 'Apply and reload');
+  const inspector = page.locator('uwt-inspector');
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('KeyE');
+  await page.keyboard.press('KeyI');
+  await page.keyboard.up('Shift');
+  await expect(inspector).toHaveCount(0);
+  await page.keyboard.press('F9');
+  await expect(inspector).toBeVisible();
+});
+
 test('inspector settings: a custom shortcut, a smaller section, a smaller view', async ({
   page
 }) => {
diff --git a/projects/watchtower-lab/src/lab/lab-logger-levels.component.ts b/projects/watchtower-lab/src/lab/lab-logger-levels.component.ts
new file mode 100644
index 0000000..fc9a08d
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-logger-levels.component.ts
@@ -0,0 +1,104 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal
+} from '@angular/core';
+import {
+  CpsButtonComponent,
+  CpsInputComponent,
+  CpsSelectComponent
+} from 'cps-ui-kit';
+import { LAB_LOG_LEVELS } from './lab-settings-fields';
+
+/**
+ * The level each named logger logs at, as `logging.levels` has it: the ones
+ * set, each with its level and a way to remove it, and a way to add one.
+ */
+@Component({
+  selector: 'lab-logger-levels',
+  imports: [CpsButtonComponent, CpsInputComponent, CpsSelectComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="lab-rows" role="group" aria-label="Logger levels">
+      @for (entry of entries(); track entry.name) {
+        <div class="lab-row lab-row--labelled">
+          <span class="lab-row__name">{{ entry.name }}</span>
+          <cps-select
+            [label]="'Level of ' + entry.name"
+            [options]="options"
+            [returnObject]="false"
+            [value]="entry.level"
+            [disabled]="disabled()"
+            width="16rem"
+            (valueChanged)="setLevel(entry.name, $event)" />
+          <cps-button
+            type="outlined"
+            size="small"
+            icon="delete"
+            label="Remove"
+            [ariaLabel]="'Remove logger ' + entry.name"
+            [disabled]="disabled()"
+            (clicked)="remove(entry.name)" />
+        </div>
+      } @empty {
+        <p class="lab-row__none">No logger has a level of its own.</p>
+      }
+      <div class="lab-row lab-row--labelled">
+        <cps-input
+          label="Logger name"
+          width="14rem"
+          [value]="name()"
+          [disabled]="disabled()"
+          (valueChanged)="name.set($event)" />
+        <cps-select
+          label="Level for a new logger"
+          [options]="options"
+          [returnObject]="false"
+          [value]="level()"
+          [disabled]="disabled()"
+          width="16rem"
+          (valueChanged)="level.set($event)" />
+        <cps-button
+          label="Add logger"
+          type="outlined"
+          size="small"
+          [disabled]="disabled() || !name().trim()"
+          (clicked)="add()" />
+      </div>
+    </div>
+  `
+})
+export class LabLoggerLevelsComponent {
+  /** The levels as they are, by logger name. */
+  readonly levels = input.required<Record<string, string>>();
+  readonly disabled = input(false);
+  /** The levels as the reader has changed them. */
+  readonly changed = output<Record<string, string>>();
+
+  protected readonly options = LAB_LOG_LEVELS;
+  protected readonly name = signal('');
+  protected readonly level = signal('warn');
+  protected readonly entries = computed(() =>
+    Object.entries(this.levels()).map(([name, level]) => ({ name, level }))
+  );
+
+  protected setLevel(name: string, level: string): void {
+    this.changed.emit({ ...this.levels(), [name]: level });
+  }
+
+  protected remove(name: string): void {
+    const { [name]: _removed, ...rest } = this.levels();
+    this.changed.emit(rest);
+  }
+
+  protected add(): void {
+    const name = this.name().trim();
+    if (name) {
+      this.changed.emit({ ...this.levels(), [name]: this.level() });
+      this.name.set('');
+    }
+  }
+}
diff --git a/projects/watchtower-lab/src/lab/lab-settings-fields.ts b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
index ea122fa..1807864 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-fields.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
@@ -1,11 +1,19 @@
-/** A setting the Settings page offers as a control, in a `?config=` section. */
+import { LAB_VALUE_TRANSFORMS } from './lab-options';
+
+type Option = { label: string; value: string };
+
+/**
+ * A setting the Settings page offers as a control, in a `?config=` section.
+ * `multi` picks several of its options; `lines` is a list of strings, one
+ * to a line; `levels` and `shortcuts` have editors of their own.
+ */
 export type LabField = {
   section: string;
   key: string;
   label: string;
 } & (
-  | { kind: 'switch' | 'number' | 'text' }
-  | { kind: 'select'; options: { label: string; value: string }[] }
+  | { kind: 'switch' | 'number' | 'text' | 'lines' | 'levels' | 'shortcuts' }
+  | { kind: 'select' | 'multi'; options: Option[] }
 );
 
 export interface LabFieldGroup {
@@ -13,7 +21,7 @@ export interface LabFieldGroup {
   fields: LabField[];
 }
 
-const LOG_LEVELS = [
+export const LAB_LOG_LEVELS = [
   { label: 'log — everything', value: 'log' },
   { label: 'warn — warnings and errors', value: 'warn' },
   { label: 'error — errors only', value: 'error' }
@@ -85,7 +93,7 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
         section: 'logging',
         key: 'minLevel',
         label: 'Minimum level (logging.minLevel)',
-        options: LOG_LEVELS
+        options: LAB_LOG_LEVELS
       },
       {
         kind: 'switch',
@@ -93,6 +101,12 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
         key: 'mirrorErrorsToRum',
         label: 'Mirror errors to RUM (logging.mirrorErrorsToRum)'
       },
+      {
+        kind: 'levels',
+        section: 'logging',
+        key: 'levels',
+        label: 'Logger levels (logging.levels)'
+      },
       {
         kind: 'switch',
         section: 'logging',
@@ -156,6 +170,42 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
         section: 'redaction',
         key: 'stripUrlQuery',
         label: 'Strip URL queries (redaction.stripUrlQuery)'
+      },
+      {
+        kind: 'multi',
+        section: 'redaction',
+        key: 'scanValuePatterns',
+        label: 'Value patterns scanned (redaction.scanValuePatterns)',
+        options: ['email', 'creditCard', 'ssn', 'ipv4', 'phone'].map(
+          (name) => ({
+            label: name,
+            value: name
+          })
+        )
+      },
+      {
+        kind: 'multi',
+        section: 'redaction',
+        key: 'extraValueTransforms',
+        label: 'Value transforms (redaction.extraValueTransforms)',
+        options: Object.keys(LAB_VALUE_TRANSFORMS).map((name) => ({
+          label: name,
+          value: name
+        }))
+      },
+      {
+        kind: 'lines',
+        section: 'redaction',
+        key: 'extraKeyPatterns',
+        label:
+          'Extra key patterns, one RegExp per line (redaction.extraKeyPatterns)'
+      },
+      {
+        kind: 'lines',
+        section: 'redaction',
+        key: 'extraValuePatterns',
+        label:
+          'Extra value patterns, one RegExp per line (redaction.extraValuePatterns)'
       }
     ]
   },
@@ -179,6 +229,12 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
         section: 'inspector',
         key: 'captureBeforeOpen',
         label: 'Keep events from before opening (inspector.captureBeforeOpen)'
+      },
+      {
+        kind: 'shortcuts',
+        section: 'inspector',
+        key: 'shortcuts',
+        label: 'Shortcuts (inspector.shortcuts)'
       }
     ]
   }
diff --git a/projects/watchtower-lab/src/lab/lab-shortcuts.component.ts b/projects/watchtower-lab/src/lab/lab-shortcuts.component.ts
new file mode 100644
index 0000000..b07589e
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-shortcuts.component.ts
@@ -0,0 +1,154 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal
+} from '@angular/core';
+import {
+  CpsButtonComponent,
+  CpsInputComponent,
+  CpsSwitchComponent
+} from 'cps-ui-kit';
+
+/** A shortcut as `inspector.shortcuts` has it. */
+export interface LabShortcut {
+  code: string;
+  after?: string;
+  ctrl?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  meta?: boolean;
+}
+
+const MODIFIERS = ['ctrl', 'alt', 'shift', 'meta'] as const;
+
+/** A shortcut as people read it: `Shift+E+I`, `F9`, `Ctrl+Alt+D`. */
+export function labDescribeShortcut(shortcut: LabShortcut): string {
+  const key = (code: string | undefined) => code?.replace(/^Digit|^Key/, '');
+  return [
+    shortcut.ctrl && 'Ctrl',
+    shortcut.alt && 'Alt',
+    shortcut.shift && 'Shift',
+    shortcut.meta && 'Meta',
+    key(shortcut.after),
+    key(shortcut.code)
+  ]
+    .filter(Boolean)
+    .join('+');
+}
+
+/**
+ * The keys that open the Event Inspector: the ones set, each with a way to
+ * remove it, and a way to add one. None at all is no shortcut.
+ */
+@Component({
+  selector: 'lab-shortcuts',
+  imports: [CpsButtonComponent, CpsInputComponent, CpsSwitchComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="lab-rows" role="group" aria-label="Shortcuts">
+      @for (shortcut of shortcuts(); track $index) {
+        <div class="lab-row">
+          <span class="lab-row__name">{{ describe(shortcut) }}</span>
+          <cps-button
+            type="outlined"
+            size="small"
+            icon="delete"
+            label="Remove"
+            [ariaLabel]="'Remove shortcut ' + describe(shortcut)"
+            [disabled]="disabled()"
+            (clicked)="remove($index)" />
+        </div>
+      } @empty {
+        <p class="lab-row__none">
+          No shortcut: the inspector opens from the page.
+        </p>
+      }
+      <div class="lab-row">
+        <cps-input
+          label="Key (KeyboardEvent.code)"
+          hint="For example F9, KeyD or Digit8."
+          width="16rem"
+          [value]="code()"
+          [disabled]="disabled()"
+          (valueChanged)="code.set($event)" />
+        <cps-input
+          label="Pressed just before (optional)"
+          hint="Held with the modifiers: KeyE for Shift+E+I."
+          width="16rem"
+          [value]="after()"
+          [disabled]="disabled()"
+          (valueChanged)="after.set($event)" />
+      </div>
+      <div class="lab-row">
+        @for (modifier of modifiers; track modifier) {
+          <cps-switch
+            [label]="modifier.label"
+            [value]="held()[modifier.key]"
+            [disabled]="disabled()"
+            (valueChanged)="hold(modifier.key, $event)" />
+        }
+        <cps-button
+          label="Add shortcut"
+          type="outlined"
+          size="small"
+          [disabled]="disabled() || !code().trim()"
+          (clicked)="add()" />
+      </div>
+    </div>
+  `
+})
+export class LabShortcutsComponent {
+  readonly shortcuts = input.required<LabShortcut[]>();
+  readonly disabled = input(false);
+  /** The shortcuts as the reader has changed them. */
+  readonly changed = output<LabShortcut[]>();
+
+  protected readonly describe = labDescribeShortcut;
+  protected readonly modifiers = MODIFIERS.map((key) => ({
+    key,
+    label: key === 'meta' ? 'Meta (⌘)' : key[0].toUpperCase() + key.slice(1)
+  }));
+
+  protected readonly code = signal('');
+  protected readonly after = signal('');
+  protected readonly held = signal<Record<(typeof MODIFIERS)[number], boolean>>(
+    {
+      ctrl: false,
+      alt: false,
+      shift: false,
+      meta: false
+    }
+  );
+
+  protected hold(key: (typeof MODIFIERS)[number], on: boolean): void {
+    this.held.update((held) => ({ ...held, [key]: on }));
+  }
+
+  protected remove(index: number): void {
+    this.changed.emit(this.shortcuts().filter((_, i) => i !== index));
+  }
+
+  protected add(): void {
+    const code = this.code().trim();
+    if (!code) {
+      return;
+    }
+    const after = this.after().trim();
+    const held = this.held();
+    this.changed.emit([
+      ...this.shortcuts(),
+      {
+        code,
+        ...(after && { after }),
+        ...Object.fromEntries(
+          MODIFIERS.filter((key) => held[key]).map((key) => [key, true])
+        )
+      }
+    ]);
+    this.code.set('');
+    this.after.set('');
+    this.held.set({ ctrl: false, alt: false, shift: false, meta: false });
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index d0d13a3..3fcad5f 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -30,7 +30,12 @@ import {
 import { labCheckConfig } from '../../lab/lab-config-check';
 import { parseJsonObject } from '../../lab/lab-json';
 import { labSearch, LabOptions } from '../../lab/lab-options';
+import { LabLoggerLevelsComponent } from '../../lab/lab-logger-levels.component';
 import { LAB_FIELD_GROUPS, LabField } from '../../lab/lab-settings-fields';
+import {
+  LabShortcut,
+  LabShortcutsComponent
+} from '../../lab/lab-shortcuts.component';
 import {
   LAB_TELEMETRIES,
   LabBrokerMode,
@@ -91,7 +96,9 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
     CpsInputComponent,
     CpsSelectComponent,
     CpsSwitchComponent,
-    CpsTextareaComponent
+    CpsTextareaComponent,
+    LabLoggerLevelsComponent,
+    LabShortcutsComponent
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -184,6 +191,56 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
                     [disabled]="!overlay()"
                     (valueChanged)="set(field.section, field.key, $event)" />
                 }
+                @case ('multi') {
+                  <cps-select
+                    [label]="field.label"
+                    [options]="selectOptions(field)"
+                    [returnObject]="false"
+                    [multiple]="true"
+                    [chips]="true"
+                    [value]="list(setting(field.section, field.key))"
+                    width="26rem"
+                    [disabled]="!overlay()"
+                    (valueChanged)="set(field.section, field.key, $event)" />
+                }
+                @case ('lines') {
+                  <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+                  <cps-textarea
+                    ngSkipHydration
+                    [label]="field.label"
+                    [rows]="3"
+                    width="26rem"
+                    [value]="
+                      list(setting(field.section, field.key)).join(
+                        '
+'
+                      )
+                    "
+                    [disabled]="!overlay()"
+                    (valueChanged)="
+                      setLines(field.section, field.key, $event)
+                    " />
+                }
+                @case ('levels') {
+                  <div class="lab-field-wide">
+                    <p class="lab-field-wide__label">{{ field.label }}</p>
+                    <lab-logger-levels
+                      [levels]="levelsOf(setting(field.section, field.key))"
+                      [disabled]="!overlay()"
+                      (changed)="set(field.section, field.key, $event)" />
+                  </div>
+                }
+                @case ('shortcuts') {
+                  <div class="lab-field-wide">
+                    <p class="lab-field-wide__label">{{ field.label }}</p>
+                    <lab-shortcuts
+                      [shortcuts]="
+                        shortcutsOf(setting(field.section, field.key))
+                      "
+                      [disabled]="!overlay()"
+                      (changed)="set(field.section, field.key, $event)" />
+                  </div>
+                }
               }
             }
           </div>
@@ -395,7 +452,45 @@ export class SettingsPage {
   );
 
   protected selectOptions(field: LabField): { label: string; value: string }[] {
-    return field.kind === 'select' ? field.options : [];
+    return field.kind === 'select' || field.kind === 'multi'
+      ? field.options
+      : [];
+  }
+
+  /**
+   * A list setting as text, for a control: what the draft has, or what is in
+   * effect, where a pattern is a `RegExp` and a transform a function.
+   */
+  protected list(value: unknown): string[] {
+    return (Array.isArray(value) ? value : []).map((item) =>
+      item instanceof RegExp
+        ? item.source
+        : typeof item === 'function'
+          ? item.name
+          : String(item)
+    );
+  }
+
+  protected levelsOf(value: unknown): Record<string, string> {
+    return value && typeof value === 'object' && !Array.isArray(value)
+      ? (value as Record<string, string>)
+      : {};
+  }
+
+  protected shortcutsOf(value: unknown): LabShortcut[] {
+    return Array.isArray(value) ? (value as LabShortcut[]) : [];
+  }
+
+  /** A text of lines into the list it stands for: blank lines are none. */
+  protected setLines(section: string, key: string, text: string): void {
+    this.set(
+      section,
+      key,
+      text
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+    );
   }
 
   /** A setting as the draft has it, or as it is in effect. */
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 7149b59..ecc4c6e 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -46,6 +46,53 @@
   align-items: start;
 }
 
+// A control that is a list, or has several parts, takes the card's whole width.
+.lab-field-wide {
+  grid-column: 1 / -1;
+}
+
+.lab-field-wide__label {
+  margin: 0 0 0.375rem;
+  font-size: 0.875rem;
+}
+
+.lab-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lab-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.5rem;
+  align-items: center;
+}
+
+// With a label above each control: the name and the button sit by the boxes.
+.lab-row--labelled {
+  align-items: flex-start;
+
+  .lab-row__name {
+    margin-top: 1.9rem;
+  }
+
+  > cps-button {
+    margin-top: 1.5rem;
+  }
+}
+
+.lab-row__name {
+  min-width: 12rem;
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+}
+
+.lab-row__none {
+  margin: 0;
+  color: var(--cps-text-secondary);
+}
+
 .lab-apply-bar {
   // Settings: in reach however far the page scrolls, above the status bar
   // and any pane docked at the bottom.

From 831d29bb9b9c93421ad77bd04bbcadce01c48a44 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 13:17:03 +0100
Subject: [PATCH 45/51] control the app identity

---
 README.md                                     |  7 +-
 playwright/settings.spec.ts                   | 84 +++++++++++++++++
 .../watchtower-lab/src/lab/lab-options.ts     |  5 +-
 .../src/lab/lab-settings-fields.ts            | 89 +++++++++++++++++++
 .../src/shell/pages/settings.page.ts          | 87 +++++++++++++++++-
 5 files changed, 267 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 0b27d5a..4899652 100644
--- a/README.md
+++ b/README.md
@@ -134,8 +134,11 @@ The mock RUM broker's answer is set on the **Settings** page too:
 
 It also sets RUM's own `telemetries` (the library's default, or any of
 `errors`, `performance`, `interaction`, `http` and `replay`, down to none),
-and a JSON object laid over the broker's app monitor config, such as
-`{ "sessionSampleRate": 0 }`.
+and the broker's app monitor config: controls for the settings most worth
+trying (`sessionSampleRate`, `sessionEventLimit`, `dispatchInterval`,
+`allowCookies`, `enableXRay`, `disableAutoPageView`, `recordResourceUrl` and
+the pages to include or exclude), and a JSON object laid over it for the rest,
+such as `{ "sessionSampleRate": 0 }`.
 
 ### Automated tests
 
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index bdb8fe3..f6b8c59 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -477,6 +477,90 @@ test("the Event Inspector's shortcuts are listed, removed and added", async ({
   await expect(inspector).toBeVisible();
 });
 
+test("the application's identity is set from the page", async ({ page }) => {
+  await openLab(page, 'settings');
+
+  await fill(page, 'Application name', 'acme-shop');
+  await fill(page, 'Environment', 'qa');
+  await fill(page, 'Version', '2.3.4');
+  await press(page, 'Apply and reload');
+
+  const effective = page.locator('.lab-readout');
+  await expect(effective).toContainText('"application": "acme-shop"');
+  await expect(effective).toContainText('"environment": "qa"');
+  await expect(effective).toContainText('"version": "2.3.4"');
+});
+
+test("the mock broker's app monitor settings are controls, and apply with the rest", async ({
+  page,
+  backend
+}) => {
+  await openLab(page, 'settings');
+  const config = page.getByRole('textbox', {
+    name: 'Laid over the app monitor config (JSON)'
+  });
+
+  await fill(page, 'Session sample rate', '0.5');
+  await fill(page, 'Session event limit', '25');
+  await fill(page, 'Dispatch interval', '500');
+  await toggle(page, 'Allow cookies');
+  await toggle(page, 'X-Ray tracing');
+  await toggle(page, 'Automatic page view');
+  await toggle(page, 'Record resource URLs');
+  await page
+    .getByRole('textbox', { name: /^Pages to exclude/ })
+    .fill('^/admin');
+  await page
+    .getByRole('textbox', { name: /^Pages to include/ })
+    .fill('^/shop\n^/cart');
+
+  // Each control writes into the overlay, which shows it.
+  await expect(config).toHaveValue(/"sessionSampleRate":0.5/);
+  await expect(config).toHaveValue(
+    /"pagesToInclude":\["\^\/shop","\^\/cart"\]/
+  );
+  // Nothing is set until applied.
+  expect((await backend.state()).brokerConfig).toEqual({});
+
+  await press(page, 'Apply and reload');
+  await expect
+    .poll(async () => (await backend.state()).brokerConfig)
+    .toEqual({
+      sessionSampleRate: 0.5,
+      sessionEventLimit: 25,
+      dispatchInterval: 500,
+      allowCookies: false,
+      enableXRay: true,
+      disableAutoPageView: true,
+      recordResourceUrl: false,
+      pagesToExclude: ['^/admin'],
+      pagesToInclude: ['^/shop', '^/cart']
+    });
+});
+
+test('the broker controls start at what the broker answers with', async ({
+  page
+}) => {
+  await openLab(page, 'settings');
+  const { config } = await (await page.request.get('/rum/init')).json();
+
+  const shown = async (label: string) =>
+    page.locator('cps-input', { hasText: label }).locator('input').inputValue();
+  expect(await shown('Session sample rate')).toBe(
+    String(config.sessionSampleRate)
+  );
+  expect(await shown('Session event limit')).toBe(
+    String(config.sessionEventLimit)
+  );
+  expect(await shown('Dispatch interval')).toBe(
+    String(config.dispatchInterval)
+  );
+  // On, as the broker's answer has it.
+  await expect(
+    page.locator('cps-switch', { hasText: 'Allow cookies' }).locator('input')
+  ).toBeChecked({ checked: config.allowCookies });
+});
+
 test('inspector settings: a custom shortcut, a smaller section, a smaller view', async ({
   page
 }) => {
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
index 3d94766..30ffdf9 100644
--- a/projects/watchtower-lab/src/lab/lab-options.ts
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -3,7 +3,8 @@ import {
   UwtBITelemetryConfig,
   UwtLogConfig,
   UwtRedactConfig,
-  UwtScenarioTelemetryConfig
+  UwtScenarioTelemetryConfig,
+  UwtTelemetryIdentity
 } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtEventInspectorConfig } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import { parseJsonObject } from './lab-json';
@@ -20,7 +21,7 @@ export const LAB_VALUE_TRANSFORMS = {
  * {@link LAB_VALUE_TRANSFORMS}.
  */
 export interface LabConfig {
-  identity?: { eventNamespace?: string };
+  identity?: Partial<UwtTelemetryIdentity>;
   scenarios?: Partial<UwtScenarioTelemetryConfig>;
   logging?: Partial<UwtLogConfig>;
   bi?: Partial<UwtBITelemetryConfig>;
diff --git a/projects/watchtower-lab/src/lab/lab-settings-fields.ts b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
index 1807864..a440b5d 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-fields.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
@@ -36,6 +36,24 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
   {
     title: 'Identity',
     fields: [
+      {
+        kind: 'text',
+        section: 'identity',
+        key: 'application',
+        label: 'Application name (identity.application)'
+      },
+      {
+        kind: 'text',
+        section: 'identity',
+        key: 'environment',
+        label: 'Environment (identity.environment)'
+      },
+      {
+        kind: 'text',
+        section: 'identity',
+        key: 'version',
+        label: 'Version (identity.version)'
+      },
       {
         kind: 'text',
         section: 'identity',
@@ -239,3 +257,74 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
     ]
   }
 ];
+
+/** A setting of the mock broker's app monitor config, which it lays over its own answer. */
+export interface LabBrokerField {
+  kind: 'number' | 'switch' | 'lines';
+  key: string;
+  label: string;
+  /** What the app monitor does with none given, shown until one is. */
+  default: number | boolean | string[];
+}
+
+/**
+ * The app monitor settings most worth trying, with the values the broker
+ * answers with, or the app monitor takes, when none is given. Any others
+ * are the JSON's.
+ */
+export const LAB_BROKER_FIELDS: LabBrokerField[] = [
+  {
+    kind: 'number',
+    key: 'sessionSampleRate',
+    label: 'Session sample rate, 0 to 1 (sessionSampleRate)',
+    default: 1
+  },
+  {
+    kind: 'number',
+    key: 'sessionEventLimit',
+    label: 'Session event limit, 0 for none (sessionEventLimit)',
+    default: 0
+  },
+  {
+    kind: 'number',
+    key: 'dispatchInterval',
+    label: 'Dispatch interval, ms (dispatchInterval)',
+    default: 2000
+  },
+  {
+    kind: 'switch',
+    key: 'allowCookies',
+    label: 'Allow cookies (allowCookies)',
+    default: true
+  },
+  {
+    kind: 'switch',
+    key: 'enableXRay',
+    label: 'X-Ray tracing (enableXRay)',
+    default: false
+  },
+  {
+    kind: 'switch',
+    key: 'disableAutoPageView',
+    label: 'Automatic page view off (disableAutoPageView)',
+    default: false
+  },
+  {
+    kind: 'switch',
+    key: 'recordResourceUrl',
+    label: 'Record resource URLs (recordResourceUrl)',
+    default: true
+  },
+  {
+    kind: 'lines',
+    key: 'pagesToExclude',
+    label: 'Pages to exclude, one RegExp per line (pagesToExclude)',
+    default: []
+  },
+  {
+    kind: 'lines',
+    key: 'pagesToInclude',
+    label: 'Pages to include, one RegExp per line (pagesToInclude)',
+    default: []
+  }
+];
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 3fcad5f..69e6a38 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -31,7 +31,12 @@ import { labCheckConfig } from '../../lab/lab-config-check';
 import { parseJsonObject } from '../../lab/lab-json';
 import { labSearch, LabOptions } from '../../lab/lab-options';
 import { LabLoggerLevelsComponent } from '../../lab/lab-logger-levels.component';
-import { LAB_FIELD_GROUPS, LabField } from '../../lab/lab-settings-fields';
+import {
+  LAB_BROKER_FIELDS,
+  LAB_FIELD_GROUPS,
+  LabBrokerField,
+  LabField
+} from '../../lab/lab-settings-fields';
 import {
   LabShortcut,
   LabShortcutsComponent
@@ -297,6 +302,48 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
             width="26rem"
             (valueChanged)="telemetries.set($event)" />
         }
+        <p>
+          The app monitor settings most worth trying; the JSON below has the
+          rest, and is what is sent.
+        </p>
+        <div class="lab-fields">
+          @for (field of brokerFields; track field.key) {
+            @switch (field.kind) {
+              @case ('switch') {
+                <cps-switch
+                  [label]="field.label"
+                  [value]="!!brokerSetting(field)"
+                  [disabled]="!brokerObject()"
+                  (valueChanged)="setBroker(field.key, $event)" />
+              }
+              @case ('number') {
+                <cps-input
+                  type="number"
+                  [label]="field.label"
+                  width="26rem"
+                  [value]="'' + brokerSetting(field)"
+                  [disabled]="!brokerObject()"
+                  (valueChanged)="setBrokerNumber(field.key, $event)" />
+              }
+              @case ('lines') {
+                <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+                <cps-textarea
+                  ngSkipHydration
+                  [label]="field.label"
+                  [rows]="2"
+                  width="26rem"
+                  [value]="
+                    list(brokerSetting(field)).join(
+                      '
+'
+                    )
+                  "
+                  [disabled]="!brokerObject()"
+                  (valueChanged)="setBrokerLines(field.key, $event)" />
+              }
+            }
+          }
+        </div>
         <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
         <cps-textarea
           ngSkipHydration
@@ -347,6 +394,7 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
 export class SettingsPage {
   protected readonly flags = DEBUG_FLAGS;
   protected readonly groups = LAB_FIELD_GROUPS;
+  protected readonly brokerFields = LAB_BROKER_FIELDS;
   protected readonly destinations = DESTINATIONS;
   protected readonly channels = CHANNELS;
   protected readonly inspectorModes = INSPECTOR_MODES;
@@ -371,6 +419,7 @@ export class SettingsPage {
     const inspector = inject(UWT_EVENT_INSPECTOR_CONFIG);
     return {
       identity: {
+        ...inject(UWT_TELEMETRY_IDENTITY),
         eventNamespace: inject(UWT_TELEMETRY_IDENTITY).eventNamespace ?? ''
       },
       scenarios: { ...inject(UWT_SCENARIO_TELEMETRY_CONFIG) },
@@ -435,6 +484,11 @@ export class SettingsPage {
 
   protected readonly brokerConfigError = signal('');
 
+  /** The broker's config as the draft has it, or `undefined` while it isn't an object. */
+  protected readonly brokerObject = computed(() =>
+    parseJsonObject(this.brokerConfig().trim() || '{}')
+  );
+
   protected readonly debug = signal(this.readDebug());
 
   /** What the library was given, read back from its tokens. */
@@ -481,6 +535,37 @@ export class SettingsPage {
     return Array.isArray(value) ? (value as LabShortcut[]) : [];
   }
 
+  /** A broker setting as the draft has it, or what the app monitor does without one. */
+  protected brokerSetting(field: LabBrokerField): unknown {
+    return this.brokerObject()?.[field.key] ?? field.default;
+  }
+
+  /** Writes a control's setting into the broker's config, which shows it. */
+  protected setBroker(key: string, value: unknown): void {
+    const config = this.brokerObject();
+    if (config) {
+      this.brokerConfig.set(JSON.stringify({ ...config, [key]: value }));
+      this.brokerConfigError.set('');
+    }
+  }
+
+  protected setBrokerNumber(key: string, value: unknown): void {
+    const number = Number(value);
+    if (value !== '' && Number.isFinite(number)) {
+      this.setBroker(key, number);
+    }
+  }
+
+  protected setBrokerLines(key: string, text: string): void {
+    this.setBroker(
+      key,
+      text
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+    );
+  }
+
   /** A text of lines into the list it stands for: blank lines are none. */
   protected setLines(section: string, key: string, text: string): void {
     this.set(

From f471f82300945eabf063aaac83aea58a993682cc Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 13:40:51 +0100
Subject: [PATCH 46/51] take the URL-parameter wording out of the Settings page

---
 playwright/settings.spec.ts                   | 20 +++++++--------
 .../src/shell/pages/inspector.page.ts         |  4 +--
 .../src/shell/pages/settings.page.ts          | 25 +++++++++----------
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index f6b8c59..711497d 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -49,7 +49,7 @@ test('the Settings page applies an overlay, shows it in effect, and goes back',
   await expect(page.locator('.lab-header')).not.toContainText('config:');
 
   await page
-    .getByRole('textbox', { name: '?config= (JSON)' })
+    .getByRole('textbox', { name: 'Settings (JSON)' })
     .fill('{ "bi": { "dedupWindowMs": 0 } }');
   await press(page, 'Apply and reload');
   await expect(page.locator('.lab-header')).toContainText('config: custom');
@@ -68,7 +68,7 @@ test('Settings checks the overlay against the library: no unknown setting, no wr
   page
 }) => {
   await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
   const settings = page.locator('lab-settings-page');
 
   await overlay.fill('{ "bi": { "dedupWindow": 0 } }');
@@ -97,7 +97,7 @@ test('Settings checks types against the library, not a wrong value in effect', a
   page
 }) => {
   await openLab(page, 'settings', { bi: { dedupWindowMs: '500' } });
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
 
   await overlay.fill('{ "bi": { "dedupWindowMs": 600 } }');
   await press(page, 'Apply and reload');
@@ -111,7 +111,7 @@ test('Settings controls write the common options into the overlay', async ({
   page
 }) => {
   await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
   await expect(overlay).toHaveValue('{}');
 
   await page
@@ -304,7 +304,7 @@ test('Settings sets the startup options, and applying them reloads with them', a
   await openLab(page, 'settings');
   await choose(page, 'Destination', 'noop');
   await choose(page, 'Broadcast channel', 'shared');
-  await choose(page, 'Event Inspector', 'noshortcut');
+  await choose(page, 'Event Inspector', 'no shortcut');
   await toggle(page, 'Telemetry');
 
   // Nothing changes until applied.
@@ -328,7 +328,7 @@ test("every area's settings are controls on the page, and apply as set", async (
   page
 }) => {
   await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
 
   await fill(page, 'Event namespace', 'acme');
   await fill(page, 'Default timeout', '12345');
@@ -388,7 +388,7 @@ test('redaction lists are picked from, and written as lines of RegExp sources',
   page
 }) => {
   await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
 
   // The five value patterns start picked; ipv4 is left out, a transform added.
   const patterns = page.getByRole('combobox', {
@@ -430,7 +430,7 @@ test('loggers each have a level, added and removed one at a time', async ({
   page
 }) => {
   await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
   // The lab starts with one: noisy, at warn.
   await expect(page.getByText('noisy', { exact: true })).toBeVisible();
 
@@ -454,7 +454,7 @@ test("the Event Inspector's shortcuts are listed, removed and added", async ({
   page
 }) => {
   await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: '?config= (JSON)' });
+  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
   await expect(
     page.getByRole('button', { name: 'Remove shortcut Shift+E+I' })
   ).toBeVisible();
@@ -624,7 +624,7 @@ test('in-app links keep the startup options, and so does applying an overlay', a
   await navigate(page, 'Settings');
   expect(new URL(page.url()).searchParams.get('destination')).toBe('noop');
   await page
-    .getByRole('textbox', { name: '?config= (JSON)' })
+    .getByRole('textbox', { name: 'Settings (JSON)' })
     .fill('{ "bi": { "dedupWindowMs": 0 } }');
   await press(page, 'Apply and reload');
 
diff --git a/projects/watchtower-lab/src/shell/pages/inspector.page.ts b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
index 00363e5..f0a8285 100644
--- a/projects/watchtower-lab/src/shell/pages/inspector.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/inspector.page.ts
@@ -38,9 +38,9 @@ const DOCKS: { value: UwtInspectorDock; label: string }[] = [
         events to try it on below.
         {{
           options.inspector === 'off'
-            ? 'Disabled with ?inspector=off.'
+            ? 'Turned off in Settings (Event Inspector: off).'
             : options.inspector === 'noshortcut'
-              ? 'No keyboard shortcut (?inspector=noshortcut): open it from here.'
+              ? 'No keyboard shortcut (Event Inspector: no shortcut, in Settings): open it from here.'
               : 'Shortcut: Shift+E+I.'
         }}
       </p>
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 69e6a38..ce9fee0 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -51,7 +51,7 @@ import { LAB_OPTIONS } from '../shell.config';
 
 const DEBUG_FLAGS = ['debugScenario', 'debugBI', 'debugLogger'] as const;
 
-/** How the lab starts; each is a query-string option, read once at startup. */
+/** How the lab starts; each is read once, at startup, from the address. */
 const DESTINATIONS: { label: string; value: LabOptions['destination'] }[] = [
   { label: 'rum — the RUM sink, to the mock backend', value: 'rum' },
   { label: 'noop — nothing is sent', value: 'noop' },
@@ -63,7 +63,7 @@ const CHANNELS: { label: string; value: LabOptions['channel'] }[] = [
 ];
 const INSPECTOR_MODES: { label: string; value: LabOptions['inspector'] }[] = [
   { label: 'on — with its keyboard shortcut', value: 'on' },
-  { label: 'noshortcut — open it from the page', value: 'noshortcut' },
+  { label: 'no shortcut — open it from the page', value: 'noshortcut' },
   { label: 'off — disabled', value: 'off' }
 ];
 type DebugFlag = (typeof DEBUG_FLAGS)[number];
@@ -111,30 +111,29 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
       <h1>Settings</h1>
       <p>
         What the next load runs with: how the lab starts, the library's settings
-        — a <code>?config=</code> overlay on the lab's own — and the mock RUM
-        broker's answer. They apply together, with a reload.
+        and the mock RUM broker's answer. They apply together, with a reload.
       </p>
 
       <div class="lab-card">
         <h2>Run</h2>
-        <p>How the lab starts: query-string options, read once at startup.</p>
+        <p>How the lab starts. Read once, so applying reloads the lab.</p>
         <div class="lab-fields">
           <cps-select
-            label="Destination (?destination=)"
+            label="Destination"
             [options]="destinations"
             [returnObject]="false"
             [value]="destination()"
             width="26rem"
             (valueChanged)="destination.set($event)" />
           <cps-select
-            label="Broadcast channel (?channel=)"
+            label="Broadcast channel"
             [options]="channels"
             [returnObject]="false"
             [value]="channel()"
             width="26rem"
             (valueChanged)="channel.set($event)" />
           <cps-select
-            label="Event Inspector (?inspector=)"
+            label="Event Inspector"
             [options]="inspectorModes"
             [returnObject]="false"
             [value]="inspector()"
@@ -142,7 +141,7 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
             (valueChanged)="inspector.set($event)" />
           <div class="lab-switches">
             <cps-switch
-              label="Telemetry (?telemetry=)"
+              label="Telemetry"
               [value]="telemetry()"
               (valueChanged)="telemetry.set($event)" />
             <cps-switch
@@ -253,15 +252,15 @@ const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
       }
 
       <div class="lab-card">
-        <h2>The ?config= overlay</h2>
+        <h2>Settings as JSON</h2>
         <p>
-          What the controls above write, and what more the lab takes: edit it
-          here for anything they don't cover, such as patterns and loggers.
+          Every setting above, as JSON. Edit it to paste a whole configuration,
+          or to set what has no control.
         </p>
         <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
         <cps-textarea
           ngSkipHydration
-          label="?config= (JSON)"
+          label="Settings (JSON)"
           hint="Patterns are RegExp sources; the one value transform is mask-order-ids."
           [rows]="8"
           [value]="draft()"

From 0546dac53b3ae4922cce106fd08fa443e4396441 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 15:32:09 +0100
Subject: [PATCH 47/51] settings redesign

---
 README.md                                     |  28 +-
 playwright/a11y.spec.ts                       |  30 +-
 playwright/debug.spec.ts                      |   5 +-
 playwright/frame.spec.ts                      |  16 +-
 playwright/lab.ts                             |  30 +
 playwright/settings.spec.ts                   | 333 ++++++--
 playwright/telemetries.spec.ts                |   2 +-
 playwright/wire.spec.ts                       |   6 +-
 .../src/lab/lab-settings-draft.service.ts     | 557 ++++++++++++
 .../src/lab/lab-settings-fields.ts            | 445 +++++++---
 .../src/shell/pages/settings-overview.page.ts |  63 ++
 .../src/shell/pages/settings-section.page.ts  | 288 +++++++
 .../src/shell/pages/settings.page.ts          | 801 ++++--------------
 .../src/shell/pages/settings.routes.ts        |  26 +
 .../src/shell/shell.component.ts              |  31 +-
 .../src/shell/shell.config.server.ts          |   1 +
 .../watchtower-lab/src/shell/shell.config.ts  |  17 +-
 projects/watchtower-lab/src/styles.scss       | 226 ++++-
 18 files changed, 2006 insertions(+), 899 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/settings-section.page.ts
 create mode 100644 projects/watchtower-lab/src/shell/pages/settings.routes.ts

diff --git a/README.md b/README.md
index 4899652..b8faaa3 100644
--- a/README.md
+++ b/README.md
@@ -81,10 +81,17 @@ as a [Web Fragment](https://web-fragments.dev) through the server's gateway,
 each forwarding through the shell over the tab's own channel). **Tools**:
 **Event Inspector** (every dock, showing the one it is in, event generators,
 and the `--uwt-inspector-inset-*` opt-in on the lab's fixed header and status
-bar), **On the wire**: what the mock backend actually received, and
-**Settings**: how the lab starts, a control for each of the library's
-settings and the Event Inspector's, the mock broker's answer, all applied
-together with one reload, the debug flags, and the settings in effect.
+bar) and **On the wire**: what the mock backend actually received.
+
+**Settings**, at the foot of the nav, sets up the run every page shares: a
+page per section, listed beside it by area, each saying how it applies.
+**Library**: App identity, Delivery, Scenarios, BI events, Logging, Privacy &
+redaction and Event Inspector. **Mock backend**: RUM broker and App monitor.
+**Diagnostics**: Debug flags, which apply at once. **Advanced**: Configuration
+as JSON, and the Effective configuration. A change waits, from whichever
+section, in a bar listing them all, until they are applied together with one
+reload, or discarded; the **Overview** reviews them. On a narrow screen the
+sections fold into a picker.
 
 The header's chips show how this load runs; where the broker is set
 differently for the next one, its chip says so: `broker: ok → null after
@@ -119,7 +126,8 @@ of patterns, and editors for logger levels and the inspector's shortcuts — and
 the JSON itself, and refuses a section, setting or type the library doesn't
 have.
 
-The mock RUM broker's answer is set on the **Settings** page too:
+The mock RUM broker's answer is set in **Settings** too, under **RUM
+broker**:
 
 | Mode                        | The broker                                                   |
 | --------------------------- | ------------------------------------------------------------ |
@@ -134,11 +142,11 @@ The mock RUM broker's answer is set on the **Settings** page too:
 
 It also sets RUM's own `telemetries` (the library's default, or any of
 `errors`, `performance`, `interaction`, `http` and `replay`, down to none),
-and the broker's app monitor config: controls for the settings most worth
-trying (`sessionSampleRate`, `sessionEventLimit`, `dispatchInterval`,
-`allowCookies`, `enableXRay`, `disableAutoPageView`, `recordResourceUrl` and
-the pages to include or exclude), and a JSON object laid over it for the rest,
-such as `{ "sessionSampleRate": 0 }`.
+and, under **App monitor**, the broker's app monitor config: controls for the
+settings most worth trying (`sessionSampleRate`, `sessionEventLimit`,
+`dispatchInterval`, `allowCookies`, `enableXRay`, `disableAutoPageView`,
+`recordResourceUrl` and the pages to include or exclude), and a JSON object
+laid over it for the rest, such as `{ "sessionSampleRate": 0 }`.
 
 ### Automated tests
 
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index f118794..cb8f099 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -15,7 +15,21 @@ const PAGES = [
   'web-fragment',
   'inspector',
   'wire',
-  'settings'
+  'settings',
+  ...[
+    'app-identity',
+    'delivery',
+    'scenarios',
+    'bi-events',
+    'logging',
+    'privacy',
+    'event-inspector',
+    'rum-broker',
+    'app-monitor',
+    'debug-flags',
+    'json',
+    'effective'
+  ].map((section) => `settings/${section}`)
 ];
 
 /** Each violation as its rule and where it was found. */
@@ -65,6 +79,20 @@ for (const path of PAGES) {
   });
 }
 
+test('Settings with changes not applied, marked in its list and its bar: no violations', async ({
+  page
+}) => {
+  await openLab(page, 'settings/scenarios');
+  await page
+    .locator('cps-switch', { hasText: 'Lifecycle step events' })
+    .locator('label.cps-switch')
+    .click();
+  await expect(
+    page.getByRole('region', { name: 'Changes not applied' })
+  ).toBeVisible();
+  expect(await violations(page)).toEqual([]);
+});
+
 test('the Event Inspector with events, rows open, a filter being built with its help, and the Export menu open: no violations, and readable colours', async ({
   page
 }) => {
diff --git a/playwright/debug.spec.ts b/playwright/debug.spec.ts
index 99c72a4..04adb47 100644
--- a/playwright/debug.spec.ts
+++ b/playwright/debug.spec.ts
@@ -1,9 +1,9 @@
-import { expect, navigate, openLab, press, test } from './lab';
+import { expect, navigate, openLab, press, settingsSection, test } from './lab';
 
 test('debug flags print what is sent, without a reload', async ({ page }) => {
   const lines: string[] = [];
   page.on('console', (m) => lines.push(m.text()));
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/debug-flags');
   for (const flag of ['debugScenario', 'debugBI', 'debugLogger']) {
     await page
       .locator('cps-switch', { hasText: flag })
@@ -53,6 +53,7 @@ test('debugLogger with a list prints only those loggers', async ({ page }) => {
 
   // A list isn't "on" for every logger: the Settings switch says so.
   await navigate(page, 'Settings');
+  await settingsSection(page, 'Debug flags');
   await expect(
     page.getByRole('switch', { name: 'debugLogger' })
   ).not.toBeChecked();
diff --git a/playwright/frame.spec.ts b/playwright/frame.spec.ts
index b0dc362..b8d65e3 100644
--- a/playwright/frame.spec.ts
+++ b/playwright/frame.spec.ts
@@ -11,7 +11,21 @@ const PAGES = [
   'web-fragment',
   'inspector',
   'wire',
-  'settings'
+  'settings',
+  ...[
+    'app-identity',
+    'delivery',
+    'scenarios',
+    'bi-events',
+    'logging',
+    'privacy',
+    'event-inspector',
+    'rum-broker',
+    'app-monitor',
+    'debug-flags',
+    'json',
+    'effective'
+  ].map((section) => `settings/${section}`)
 ];
 
 test('a page lists what it sent beside its buttons, ticked once it arrives, and says so', async ({
diff --git a/playwright/lab.ts b/playwright/lab.ts
index 3917a7e..8ef5a3a 100644
--- a/playwright/lab.ts
+++ b/playwright/lab.ts
@@ -218,6 +218,36 @@ export async function navigate(page: Page, label: string): Promise<void> {
   await expect(page.locator('lab-root main h1').first()).toHaveText(label);
 }
 
+/**
+ * Moves to a section of Settings within the app, through its list, keeping
+ * the changes not applied yet.
+ */
+export async function settingsSection(
+  page: Page,
+  label: string
+): Promise<void> {
+  const link = page
+    .getByRole('navigation', { name: 'Settings sections' })
+    .getByRole('link', { name: label });
+  await link.click();
+  await expect(link).toHaveAttribute('aria-current', 'page');
+  // For a frame both sections are there, the new one not yet filled in.
+  await expect(page.locator('lab-root main h1').first()).toHaveText(
+    label === 'Overview' ? 'Settings' : label
+  );
+}
+
+/**
+ * Presses Settings' Apply and reload, and waits for the lab to load again:
+ * at the same address, when only the mock broker changed.
+ */
+export async function applyAndReload(page: Page): Promise<void> {
+  const loaded = page.waitForEvent('load');
+  await press(page, 'Apply and reload');
+  await loaded;
+  await expect(page.locator('html[data-lab-ready]')).toHaveCount(1);
+}
+
 /** Presses the lab's button with exactly this label. */
 export async function press(
   where: Page | FrameLocator | Locator,
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 711497d..76ccbc3 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -1,4 +1,5 @@
 import {
+  applyAndReload,
   expect,
   LogRecord,
   named,
@@ -7,6 +8,7 @@ import {
   Page,
   press,
   sessionStarted,
+  settingsSection,
   test
 } from './lab';
 
@@ -34,6 +36,28 @@ const toggle = (page: Page, label: string) =>
 const fill = (page: Page, label: string, value: string) =>
   page.locator('cps-input', { hasText: label }).locator('input').fill(value);
 
+/** What the select labelled `label` shows as chosen. */
+const shown = (page: Page, label: string) =>
+  page
+    .locator('cps-select', { hasText: label })
+    .locator('[data-testid="cps-select-selected-value"]');
+
+/** The bar listing the changes not applied yet. */
+const pending = (page: Page) =>
+  page.getByRole('region', { name: 'Changes not applied' });
+
+/** The library's settings as JSON, in their own section. */
+async function json(page: Page) {
+  await settingsSection(page, 'Configuration as JSON');
+  return page.getByRole('textbox', { name: 'Settings (JSON)' });
+}
+
+/** The settings in effect, in their own section. */
+async function effective(page: Page) {
+  await settingsSection(page, 'Effective configuration');
+  return page.locator('.lab-readout');
+}
+
 /** Waits for the log backend to hold one record, and returns it. */
 async function onlyLog(backend: {
   logs(): Promise<LogRecord[]>;
@@ -42,32 +66,180 @@ async function onlyLog(backend: {
   return (await backend.logs())[0];
 }
 
-test('the Settings page applies an overlay, shows it in effect, and goes back', async ({
+test('Settings sits at the foot of the nav, apart from the pages, and opens on its overview', async ({
+  page
+}) => {
+  await openLab(page, 'bi?destination=noop');
+  const nav = page.locator('.lab-nav');
+  await expect(
+    nav.getByRole('list', { name: 'Tools' }).getByRole('link')
+  ).toHaveText(['Event Inspector', 'On the wire']);
+  const last = (await nav
+    .getByRole('link', { name: 'On the wire' })
+    .boundingBox())!;
+  const settings = (await nav
+    .getByRole('link', { name: 'Settings' })
+    .boundingBox())!;
+  // Well below the last page, just above the status bar.
+  expect(settings.y).toBeGreaterThan(last.y + 3 * last.height);
+  expect(settings.y + settings.height).toBeGreaterThan(
+    page.viewportSize()!.height - 36 - 48
+  );
+
+  await navigate(page, 'Settings');
+  await expect(page).toHaveURL(/\/settings\?destination=noop$/);
+  await expect(page).toHaveTitle('Settings · Watchtower Lab');
+});
+
+test('each section of Settings is a page of its own, listed by area, saying how it applies', async ({
+  page
+}) => {
+  await openLab(page, 'settings?destination=noop');
+  const sections = page.getByRole('navigation', { name: 'Settings sections' });
+  const areas = {
+    Library: [
+      'App identity',
+      'Delivery',
+      'Scenarios',
+      'BI events',
+      'Logging',
+      'Privacy & redaction',
+      'Event Inspector'
+    ],
+    'Mock backend': ['RUM broker', 'App monitor'],
+    Diagnostics: ['Debug flags'],
+    Advanced: ['Configuration as JSON', 'Effective configuration']
+  };
+  for (const [area, labels] of Object.entries(areas)) {
+    await expect(
+      sections.getByRole('list', { name: area }).getByRole('link')
+    ).toHaveText(labels);
+  }
+
+  const main = page.locator('lab-root main');
+  await settingsSection(page, 'Logging');
+  await expect(page).toHaveURL(/\/settings\/logging\?destination=noop$/);
+  await expect(page).toHaveTitle('Logging · Settings · Watchtower Lab');
+  await expect(main).toContainText('Applies on reload');
+  await settingsSection(page, 'RUM broker');
+  await expect(main).toContainText('Applies on reload, in every tab');
+  await settingsSection(page, 'Debug flags');
+  await expect(main).toContainText('Applies at once, in this browser');
+});
+
+test('changes wait in one bar across the sections, marked in their list, until discarded', async ({
   page
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/logging');
+  const bar = pending(page);
+  await expect(bar).toHaveCount(0);
+
+  await choose(page, 'Minimum level', 'warn');
+  await expect(bar).toContainText('1 change not applied');
+  await expect(bar).toContainText('Logging › Minimum level');
+  await settingsSection(page, 'Scenarios');
+  await toggle(page, 'Lifecycle step events');
+  await expect(bar).toContainText('2 changes not applied');
+  const sections = page.getByRole('navigation', { name: 'Settings sections' });
+  await expect(
+    sections.getByRole('link', { name: /changes not applied/ })
+  ).toHaveCount(2);
+  await expect(
+    sections.getByRole('link', { name: 'Logging (changes not applied)' })
+  ).toBeVisible();
+
+  // Kept while the sections change.
+  await settingsSection(page, 'Logging');
+  await expect(shown(page, 'Minimum level')).toHaveText(
+    'warn — warnings and errors'
+  );
+
+  await bar.getByRole('link', { name: 'Review' }).click();
+  const review = page.locator('lab-settings-overview');
+  await expect(review.locator('h1')).toHaveText('Settings');
+  await expect(review).toContainText('Logging › Minimum level');
+  await expect(review).toContainText('log → warn');
+  await expect(review).toContainText('Scenarios › Lifecycle step events');
+  await expect(review).toContainText('off → on');
+
+  await press(page, 'Discard');
+  await expect(bar).toHaveCount(0);
+  await expect(review).toContainText('Nothing');
+  await settingsSection(page, 'Logging');
+  await expect(shown(page, 'Minimum level')).toHaveText('log — everything');
+});
+
+test('a setting set back as it was is no change', async ({ page }) => {
+  await openLab(page, 'settings/scenarios');
+  await toggle(page, 'Lifecycle step events');
+  await expect(pending(page)).toBeVisible();
+  await toggle(page, 'Lifecycle step events');
+  await expect(pending(page)).toHaveCount(0);
+});
+
+test("JSON that isn't an object: its controls say why they're off, and Apply's bar shows the way to fix it", async ({
+  page
+}) => {
+  await openLab(page, 'settings/json');
+  await page.getByRole('textbox', { name: 'Settings (JSON)' }).fill('[1, 2]');
+  await settingsSection(page, 'Logging');
+  await expect(page.locator('lab-settings-section')).toContainText(
+    "These controls are off while the JSON in Configuration as JSON isn't an object."
+  );
+
+  await press(page, 'Apply and reload');
+  const problem = pending(page).getByRole('alert');
+  await expect(problem).toContainText(
+    'Configuration as JSON: Not a JSON object.'
+  );
+  await problem.getByRole('link', { name: 'Configuration as JSON' }).click();
+  await expect(page.locator('lab-root main h1').first()).toHaveText(
+    'Configuration as JSON'
+  );
   await expect(page.locator('.lab-header')).not.toContainText('config:');
+});
+
+test('on a narrow screen, the sections of Settings fold into a picker', async ({
+  page
+}) => {
+  await page.setViewportSize({ width: 800, height: 700 });
+  await openLab(page, 'settings/logging');
+  await expect(
+    page.getByRole('navigation', { name: 'Settings sections' })
+  ).toBeHidden();
+  await expect(shown(page, 'Section')).toHaveText('Library › Logging');
+
+  await choose(page, 'Section', 'Library › Scenarios');
+  await expect(page).toHaveURL(/\/settings\/scenarios$/);
+  await expect(page.locator('lab-root main h1').first()).toHaveText(
+    'Scenarios'
+  );
+});
+
+test('Settings applies an overlay, shows it in effect, and goes back', async ({
+  page
+}) => {
+  await openLab(page, 'settings/json');
+  const header = page.locator('.lab-header');
+  await expect(header).not.toContainText('config:');
 
   await page
     .getByRole('textbox', { name: 'Settings (JSON)' })
     .fill('{ "bi": { "dedupWindowMs": 0 } }');
-  await press(page, 'Apply and reload');
-  await expect(page.locator('.lab-header')).toContainText('config: custom');
-  await expect(page.locator('.lab-readout')).toContainText(
-    '"dedupWindowMs": 0'
-  );
+  await applyAndReload(page);
+  await expect(header).toContainText('config: custom');
+  await expect(await effective(page)).toContainText('"dedupWindowMs": 0');
 
+  await settingsSection(page, 'Overview');
   await press(page, "Back to the lab's settings");
-  await expect(page.locator('.lab-header')).not.toContainText('config:');
-  await expect(page.locator('.lab-readout')).toContainText(
-    '"dedupWindowMs": 400'
-  );
+  await expect(header).not.toContainText('config:');
+  await expect(await effective(page)).toContainText('"dedupWindowMs": 400');
 });
 
 test('Settings checks the overlay against the library: no unknown setting, no wrong type', async ({
   page
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/json');
   const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
   const settings = page.locator('lab-settings-page');
 
@@ -96,7 +268,7 @@ test('Settings checks the overlay against the library: no unknown setting, no wr
 test('Settings checks types against the library, not a wrong value in effect', async ({
   page
 }) => {
-  await openLab(page, 'settings', { bi: { dedupWindowMs: '500' } });
+  await openLab(page, 'settings/json', { bi: { dedupWindowMs: '500' } });
   const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
 
   await overlay.fill('{ "bi": { "dedupWindowMs": 600 } }');
@@ -110,25 +282,23 @@ test('Settings checks types against the library, not a wrong value in effect', a
 test('Settings controls write the common options into the overlay', async ({
   page
 }) => {
-  await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
-  await expect(overlay).toHaveValue('{}');
-
-  await page
-    .locator('cps-switch', { hasText: 'Lifecycle step events' })
-    .locator('label.cps-switch')
-    .click();
+  await openLab(page, 'settings/json');
+  await expect(
+    page.getByRole('textbox', { name: 'Settings (JSON)' })
+  ).toHaveValue('{}');
+
+  await settingsSection(page, 'Scenarios');
+  await toggle(page, 'Lifecycle step events');
+  await settingsSection(page, 'BI events');
+  await fill(page, 'BI dedup window', '250');
+  const overlay = await json(page);
   await expect(overlay).toHaveValue(/"emitLifecycleEvents": true/);
-  await page
-    .locator('cps-input', { hasText: 'BI dedup window' })
-    .locator('input')
-    .fill('250');
   await expect(overlay).toHaveValue(/"dedupWindowMs": 250/);
 
-  await press(page, 'Apply and reload');
-  const effective = page.locator('.lab-readout');
-  await expect(effective).toContainText('"emitLifecycleEvents": true');
-  await expect(effective).toContainText('"dedupWindowMs": 250');
+  await applyAndReload(page);
+  const readout = await effective(page);
+  await expect(readout).toContainText('"emitLifecycleEvents": true');
+  await expect(readout).toContainText('"dedupWindowMs": 250');
 });
 
 test('eventNamespace renames the event types, and the inspector still sorts them', async ({
@@ -301,11 +471,12 @@ test('redact: false for logging stops its value scan only; BI still scans, and k
 test('Settings sets the startup options, and applying them reloads with them', async ({
   page
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/delivery');
   await choose(page, 'Destination', 'noop');
   await choose(page, 'Broadcast channel', 'shared');
-  await choose(page, 'Event Inspector', 'no shortcut');
   await toggle(page, 'Telemetry');
+  await settingsSection(page, 'Event Inspector');
+  await choose(page, 'Availability', 'no shortcut');
 
   // Nothing changes until applied.
   expect(new URL(page.url()).searchParams.get('destination')).toBeNull();
@@ -324,41 +495,46 @@ test('Settings sets the startup options, and applying them reloads with them', a
   await expect(header).toContainText('channel: shared');
 });
 
-test("every area's settings are controls on the page, and apply as set", async ({
+test("every area's settings are controls in its section, and apply together as set", async ({
   page
 }) => {
-  await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
-
+  await openLab(page, 'settings/app-identity');
   await fill(page, 'Event namespace', 'acme');
+  await settingsSection(page, 'Scenarios');
   await fill(page, 'Default timeout', '12345');
   await fill(page, 'Step limit', '7');
   await fill(page, 'Mark cleanup fallback', '999');
   await toggle(page, 'Redact scenario payloads');
+  await settingsSection(page, 'Logging');
   await choose(page, 'Minimum level', 'warn');
   await toggle(page, 'Mirror errors to RUM');
   await toggle(page, 'Redact log values');
+  await settingsSection(page, 'BI events');
   await fill(page, 'BI dedup keys kept', '77');
   await toggle(page, 'Redact BI payloads');
+  await settingsSection(page, 'Privacy & redaction');
   await fill(page, 'Longest string', '321');
   await fill(page, 'Most keys', '9');
   await fill(page, 'Longest stack', '456');
   await toggle(page, 'Include stacks');
   await toggle(page, 'Strip URL queries');
+  await settingsSection(page, 'Event Inspector');
   await fill(page, 'Events kept per kind', '25');
   await fill(page, 'Payload characters shown', '1234');
   await fill(page, 'Keep events from before opening', '5');
+  await settingsSection(page, 'Delivery');
   await toggle(page, 'Batch logs');
 
   // Each control writes into the overlay, which shows it.
+  const overlay = await json(page);
   await expect(overlay).toHaveValue(/"eventNamespace": "acme"/);
   await expect(overlay).toHaveValue(/"minLevel": "warn"/);
   await expect(overlay).toHaveValue(/"captureBeforeOpen": 5/);
   await expect(overlay).toHaveValue(/"logBatching": true/);
 
-  await press(page, 'Apply and reload');
+  await applyAndReload(page);
 
-  const effective = page.locator('.lab-readout');
+  const readout = await effective(page);
   for (const line of [
     '"eventNamespace": "acme"',
     '"defaultTimeoutMs": 12345',
@@ -376,19 +552,19 @@ test("every area's settings are controls on the page, and apply as set", async (
     '"maxPayloadCharsInView": 1234',
     '"captureBeforeOpen": 5'
   ]) {
-    await expect(effective).toContainText(line);
+    await expect(readout).toContainText(line);
   }
   // The three `redact` switches each turned their own concern's scrubbing off.
-  await expect(overlay).toHaveValue(/"scenarios": \{[^}]*"redact": false/);
-  await expect(overlay).toHaveValue(/"logging": \{[^}]*"redact": false/);
-  await expect(overlay).toHaveValue(/"bi": \{[^}]*"redact": false/);
+  const applied = await json(page);
+  await expect(applied).toHaveValue(/"scenarios": \{[^}]*"redact": false/);
+  await expect(applied).toHaveValue(/"logging": \{[^}]*"redact": false/);
+  await expect(applied).toHaveValue(/"bi": \{[^}]*"redact": false/);
 });
 
 test('redaction lists are picked from, and written as lines of RegExp sources', async ({
   page
 }) => {
-  await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
+  await openLab(page, 'settings/privacy');
 
   // The five value patterns start picked; ipv4 is left out, a transform added.
   const patterns = page.getByRole('combobox', {
@@ -397,40 +573,40 @@ test('redaction lists are picked from, and written as lines of RegExp sources',
   await patterns.press('ArrowDown');
   await page.getByRole('option', { name: /^ipv4/ }).click();
   await page.keyboard.press('Escape');
-  await expect(overlay).toHaveValue(/"scanValuePatterns": \[[^\]]*"email"/);
-  await expect(overlay).not.toHaveValue(/"ipv4"/);
   await choose(page, 'Value transforms', 'mask-order-ids');
-  await expect(overlay).toHaveValue(
-    /"extraValueTransforms": \[\s*"mask-order-ids"/
-  );
-
   await page
     .getByRole('textbox', { name: /^Extra key patterns/ })
     .fill('^acct_\nsecret');
   await page
     .getByRole('textbox', { name: /^Extra value patterns/ })
     .fill('ORD-\\d+');
+
+  const overlay = await json(page);
+  await expect(overlay).toHaveValue(/"scanValuePatterns": \[[^\]]*"email"/);
+  await expect(overlay).not.toHaveValue(/"ipv4"/);
+  await expect(overlay).toHaveValue(
+    /"extraValueTransforms": \[\s*"mask-order-ids"/
+  );
   await expect(overlay).toHaveValue(
     /"extraKeyPatterns": \[\s*"\^acct_",\s*"secret"/
   );
   await expect(overlay).toHaveValue(/"extraValuePatterns": \[\s*"ORD-\\\\d\+"/);
 
-  await press(page, 'Apply and reload');
+  await applyAndReload(page);
 
-  const effective = page.locator('.lab-readout');
-  await expect(effective).toContainText('"email"');
-  await expect(effective).not.toContainText('"ipv4"');
-  await expect(effective).toContainText('ƒ mask-order-ids');
-  await expect(effective).toContainText('/^acct_/i');
+  const readout = await effective(page);
+  await expect(readout).toContainText('"email"');
+  await expect(readout).not.toContainText('"ipv4"');
+  await expect(readout).toContainText('ƒ mask-order-ids');
+  await expect(readout).toContainText('/^acct_/i');
   // The readout is JSON: the backslash of `\d` shows doubled.
-  await expect(effective).toContainText('/ORD-\\\\d+/');
+  await expect(readout).toContainText('/ORD-\\\\d+/');
 });
 
 test('loggers each have a level, added and removed one at a time', async ({
   page
 }) => {
-  await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
+  await openLab(page, 'settings/logging');
   // The lab starts with one: noisy, at warn.
   await expect(page.getByText('noisy', { exact: true })).toBeVisible();
 
@@ -438,23 +614,23 @@ test('loggers each have a level, added and removed one at a time', async ({
   await fill(page, 'Logger name', 'orders');
   await choose(page, 'Level for a new logger', 'error');
   await press(page, 'Add logger');
-
-  await expect(overlay).toHaveValue(/"levels": \{\s*"orders": "error"\s*\}/);
   await expect(
     page.getByRole('button', { name: 'Remove logger orders' })
   ).toBeVisible();
+  await expect(await json(page)).toHaveValue(
+    /"levels": \{\s*"orders": "error"\s*\}/
+  );
 
-  await press(page, 'Apply and reload');
-  const effective = page.locator('.lab-readout');
-  await expect(effective).toContainText('"orders": "error"');
-  await expect(effective).not.toContainText('"noisy"');
+  await applyAndReload(page);
+  const readout = await effective(page);
+  await expect(readout).toContainText('"orders": "error"');
+  await expect(readout).not.toContainText('"noisy"');
 });
 
 test("the Event Inspector's shortcuts are listed, removed and added", async ({
   page
 }) => {
-  await openLab(page, 'settings');
-  const overlay = page.getByRole('textbox', { name: 'Settings (JSON)' });
+  await openLab(page, 'settings/event-inspector');
   await expect(
     page.getByRole('button', { name: 'Remove shortcut Shift+E+I' })
   ).toBeVisible();
@@ -462,11 +638,11 @@ test("the Event Inspector's shortcuts are listed, removed and added", async ({
   await page.getByRole('button', { name: 'Remove shortcut Shift+E+I' }).click();
   await fill(page, 'Key (KeyboardEvent.code)', 'F9');
   await press(page, 'Add shortcut');
-  await expect(overlay).toHaveValue(
+  await expect(await json(page)).toHaveValue(
     /"shortcuts": \[\s*\{\s*"code": "F9"\s*\}\s*\]/
   );
 
-  await press(page, 'Apply and reload');
+  await applyAndReload(page);
   const inspector = page.locator('uwt-inspector');
   await page.keyboard.down('Shift');
   await page.keyboard.press('KeyE');
@@ -478,24 +654,24 @@ test("the Event Inspector's shortcuts are listed, removed and added", async ({
 });
 
 test("the application's identity is set from the page", async ({ page }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/app-identity');
 
   await fill(page, 'Application name', 'acme-shop');
   await fill(page, 'Environment', 'qa');
   await fill(page, 'Version', '2.3.4');
-  await press(page, 'Apply and reload');
+  await applyAndReload(page);
 
-  const effective = page.locator('.lab-readout');
-  await expect(effective).toContainText('"application": "acme-shop"');
-  await expect(effective).toContainText('"environment": "qa"');
-  await expect(effective).toContainText('"version": "2.3.4"');
+  const readout = await effective(page);
+  await expect(readout).toContainText('"application": "acme-shop"');
+  await expect(readout).toContainText('"environment": "qa"');
+  await expect(readout).toContainText('"version": "2.3.4"');
 });
 
 test("the mock broker's app monitor settings are controls, and apply with the rest", async ({
   page,
   backend
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/app-monitor');
   const config = page.getByRole('textbox', {
     name: 'Laid over the app monitor config (JSON)'
   });
@@ -541,7 +717,7 @@ test("the mock broker's app monitor settings are controls, and apply with the re
 test('the broker controls start at what the broker answers with', async ({
   page
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/app-monitor');
   const { config } = await (await page.request.get('/rum/init')).json();
 
   const shown = async (label: string) =>
@@ -623,9 +799,8 @@ test('in-app links keep the startup options, and so does applying an overlay', a
   await openLab(page, 'bi?destination=noop');
   await navigate(page, 'Settings');
   expect(new URL(page.url()).searchParams.get('destination')).toBe('noop');
-  await page
-    .getByRole('textbox', { name: 'Settings (JSON)' })
-    .fill('{ "bi": { "dedupWindowMs": 0 } }');
+  await (await json(page)).fill('{ "bi": { "dedupWindowMs": 0 } }');
+  expect(new URL(page.url()).searchParams.get('destination')).toBe('noop');
   await press(page, 'Apply and reload');
 
   await expect(page.locator('.lab-header')).toContainText('config: custom');
diff --git a/playwright/telemetries.spec.ts b/playwright/telemetries.spec.ts
index 6b9ab7a..635aa2b 100644
--- a/playwright/telemetries.spec.ts
+++ b/playwright/telemetries.spec.ts
@@ -109,7 +109,7 @@ test('Settings switches between the default and a list to edit, set on Apply', a
   page,
   backend
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/rum-broker');
   const telemetriesList = page.locator('cps-select[label="Telemetries"]');
   const useDefault = page
     .locator('cps-switch', { hasText: "The library's default" })
diff --git a/playwright/wire.spec.ts b/playwright/wire.spec.ts
index cc13fbc..4c0ef25 100644
--- a/playwright/wire.spec.ts
+++ b/playwright/wire.spec.ts
@@ -5,6 +5,7 @@ import {
   Page,
   press,
   sessionStarted,
+  settingsSection,
   test
 } from './lab';
 
@@ -22,13 +23,14 @@ test('Settings sets the broker, all at once with Apply and reload; the header te
   page,
   backend
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/rum-broker');
   await choose(page, 'Answer /rum/init with', 'null —');
   await page
     .locator('cps-switch', { hasText: "The library's default" })
     .locator('label.cps-switch')
     .click();
   await choose(page, 'Telemetries', 'replay');
+  await settingsSection(page, 'App monitor');
   const overlay = page.getByRole('textbox', {
     name: 'Laid over the app monitor config (JSON)'
   });
@@ -99,7 +101,7 @@ test('a broker overlay that is not JSON stops Apply, and sets nothing', async ({
   page,
   backend
 }) => {
-  await openLab(page, 'settings');
+  await openLab(page, 'settings/app-monitor');
   await page
     .getByRole('textbox', { name: 'Laid over the app monitor config (JSON)' })
     .fill('[1, 2]');
diff --git a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
new file mode 100644
index 0000000..223ee95
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
@@ -0,0 +1,557 @@
+import {
+  computed,
+  DOCUMENT,
+  inject,
+  Injectable,
+  linkedSignal,
+  signal
+} from '@angular/core';
+import {
+  UWT_BI_TELEMETRY_CONFIG,
+  UWT_DEFAULT_TELEMETRY_CONFIG,
+  UWT_LOG_CONFIG,
+  UWT_REDACT_CONFIG,
+  UWT_SCENARIO_TELEMETRY_CONFIG,
+  UWT_TELEMETRY_IDENTITY,
+  uwtIsDebugEnabled
+} from '@absaoss-cps/ngx-ui-watchtower';
+import {
+  UWT_DEFAULT_INSPECTOR_CONFIG,
+  UWT_EVENT_INSPECTOR_CONFIG
+} from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
+import { labCheckConfig } from './lab-config-check';
+import { parseJsonObject } from './lab-json';
+import { LAB_OPTIONS, labSearch, LabOptions } from './lab-options';
+import {
+  LAB_SETTINGS_SECTIONS,
+  LabField,
+  labSettingsSection,
+  LabSettingsSection
+} from './lab-settings-fields';
+import { labDescribeShortcut, LabShortcut } from './lab-shortcuts.component';
+import { labTelemetriesLabel, LabTelemetry, LabWire } from './lab-wire.service';
+
+export const LAB_DEBUG_FLAGS = [
+  'debugScenario',
+  'debugBI',
+  'debugLogger'
+] as const;
+export type LabDebugFlag = (typeof LAB_DEBUG_FLAGS)[number];
+
+/** How the lab starts: its options, but the overlay. */
+type LabStart = Omit<LabOptions, 'config'>;
+
+/** A change made in Settings and not applied yet. */
+export interface LabSettingsChange {
+  /** The section it is made in. */
+  section: LabSettingsSection;
+  /** The setting, as people read it. */
+  label: string;
+  /** As applied, and as it will be; both empty when the JSON isn't an object. */
+  from: string;
+  to: string;
+}
+
+/** Why Apply didn't go ahead, and the section to fix it in. */
+export interface LabSettingsProblem {
+  section: LabSettingsSection;
+  message: string;
+}
+
+/** The library's default telemetries, where an edited list starts. */
+const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
+
+const JSON_SECTION = labSettingsSection('json');
+const BROKER_SECTION = labSettingsSection('rum-broker');
+const MONITOR_SECTION = labSettingsSection('app-monitor');
+
+/** Each field, by where it is kept, with the section it is in. */
+const FIELDS = new Map(
+  LAB_SETTINGS_SECTIONS.flatMap((section) =>
+    section.fields.map(
+      (field) => [`${field.section}.${field.key}`, { field, section }] as const
+    )
+  )
+);
+
+/**
+ * What Settings will apply, edited in any of its sections: how the lab
+ * starts, the library's settings as a `?config=` overlay, and the mock
+ * broker's answer. They apply together, with a reload. Provided by the
+ * Settings area, so it lasts while the sections change, and goes with it.
+ */
+@Injectable()
+export class LabSettingsDraft {
+  private readonly window = inject(DOCUMENT).defaultView!;
+  private readonly options = inject(LAB_OPTIONS);
+  private readonly wire = inject(LabWire);
+
+  /** How the lab starts, to be: the load's own to begin with. */
+  readonly start = signal<LabStart>(startOf(this.options));
+
+  /** The settings in effect, which the controls show until changed. */
+  private readonly inEffect: Record<string, Record<string, unknown>> = (() => {
+    const inspector = inject(UWT_EVENT_INSPECTOR_CONFIG);
+    return {
+      identity: {
+        ...inject(UWT_TELEMETRY_IDENTITY),
+        eventNamespace: inject(UWT_TELEMETRY_IDENTITY).eventNamespace ?? ''
+      },
+      scenarios: { ...inject(UWT_SCENARIO_TELEMETRY_CONFIG) },
+      logging: { levels: {}, ...inject(UWT_LOG_CONFIG) },
+      bi: { ...inject(UWT_BI_TELEMETRY_CONFIG) },
+      redaction: { ...inject(UWT_REDACT_CONFIG) },
+      inspector: {
+        maxEventsPerSection: inspector.maxEventsPerSection,
+        maxPayloadCharsInView: inspector.maxPayloadCharsInView,
+        shortcuts: inspector.shortcuts,
+        captureBeforeOpen: inspector.captureBeforeOpen
+      },
+      lab: { logBatching: false }
+    };
+  })();
+
+  /**
+   * What each section takes, of the types they take: the library's defaults
+   * over what is in effect, which an overlay in the address may have given
+   * a value of the wrong type.
+   */
+  private readonly known: Record<string, Record<string, unknown>> = (() => {
+    const library = UWT_DEFAULT_TELEMETRY_CONFIG;
+    const inspector = UWT_DEFAULT_INSPECTOR_CONFIG;
+    const defaults: Record<string, object> = {
+      identity: { eventNamespace: library.eventNamespace },
+      scenarios: library.scenario,
+      logging: library.logs,
+      bi: library.bi,
+      redaction: library.redact,
+      inspector: {
+        maxEventsPerSection: inspector.maxEventsPerSection,
+        maxPayloadCharsInView: inspector.maxPayloadCharsInView,
+        captureBeforeOpen: inspector.captureBeforeOpen
+      }
+    };
+    return Object.fromEntries(
+      Object.entries(this.inEffect).map(([section, values]) => [
+        section,
+        { ...values, ...defaults[section] }
+      ])
+    );
+  })();
+
+  /** The overlay being edited: the one in effect, to start with. */
+  readonly overlayText = signal(this.appliedText());
+  readonly overlayError = signal('');
+  /** The overlay as an object, or `undefined` while it isn't one. */
+  readonly overlay = computed(() =>
+    parseJsonObject(this.overlayText().trim() || '{}')
+  );
+
+  /** The broker's answer to be, starting from the one it gives now. */
+  readonly mode = linkedSignal(() => this.wire.brokerMode());
+  readonly telemetries = linkedSignal(() => this.wire.telemetries());
+  readonly brokerText = linkedSignal(() =>
+    JSON.stringify(this.wire.brokerConfig())
+  );
+
+  readonly brokerError = signal('');
+  /** The broker's config as an object, or `undefined` while it isn't one. */
+  readonly brokerObject = computed(() =>
+    parseJsonObject(this.brokerText().trim() || '{}')
+  );
+
+  /** What the last Apply found wrong, until the JSON at fault is edited. */
+  readonly problems = computed<LabSettingsProblem[]>(() => [
+    ...(this.overlayError()
+      ? [{ section: JSON_SECTION, message: this.overlayError() }]
+      : []),
+    ...(this.brokerError()
+      ? [{ section: MONITOR_SECTION, message: this.brokerError() }]
+      : [])
+  ]);
+
+  /** What applying would change, in the order of the sections. */
+  readonly changes = computed<LabSettingsChange[]>(() =>
+    [
+      ...this.startChanges(),
+      ...this.overlayChanges(),
+      ...this.brokerChanges()
+    ].sort(
+      (a, b) =>
+        LAB_SETTINGS_SECTIONS.indexOf(a.section) -
+        LAB_SETTINGS_SECTIONS.indexOf(b.section)
+    )
+  );
+
+  readonly debug = signal(this.readDebug());
+
+  /** What the library was given, read back from its tokens. */
+  readonly effective = JSON.stringify(
+    {
+      identity: inject(UWT_TELEMETRY_IDENTITY),
+      scenarios: inject(UWT_SCENARIO_TELEMETRY_CONFIG),
+      logging: inject(UWT_LOG_CONFIG),
+      bi: inject(UWT_BI_TELEMETRY_CONFIG),
+      redaction: inject(UWT_REDACT_CONFIG),
+      inspector: inject(UWT_EVENT_INSPECTOR_CONFIG)
+    },
+    readable,
+    2
+  );
+
+  /** A field's value: as the draft has it, or as it is without one. */
+  value(field: LabField): unknown {
+    switch (field.section) {
+      case 'start':
+        return this.start()[field.key as keyof LabStart];
+      case 'broker':
+        return this.brokerObject()?.[field.key] ?? field.default;
+      default:
+        return (
+          (this.overlay()?.[field.section] as Record<string, unknown>)?.[
+            field.key
+          ] ?? this.inEffect[field.section][field.key]
+        );
+    }
+  }
+
+  /** Whether a field's control is off: while the JSON it writes into isn't an object. */
+  disabled(field: LabField): boolean {
+    switch (field.section) {
+      case 'start':
+        return false;
+      case 'broker':
+        return !this.brokerObject();
+      default:
+        return !this.overlay();
+    }
+  }
+
+  /** Writes a control's value into the draft, which shows it. */
+  set(field: LabField, value: unknown): void {
+    if (field.section === 'start') {
+      this.start.update((start) => ({ ...start, [field.key]: value }));
+      return;
+    }
+    if (field.section === 'broker') {
+      const config = this.brokerObject();
+      if (config) {
+        this.editBroker(JSON.stringify({ ...config, [field.key]: value }));
+      }
+      return;
+    }
+    const overlay = this.overlay();
+    if (overlay) {
+      const settings = overlay[field.section] as Record<string, unknown>;
+      this.editOverlay(
+        JSON.stringify(
+          { ...overlay, [field.section]: { ...settings, [field.key]: value } },
+          null,
+          2
+        )
+      );
+    }
+  }
+
+  setNumber(field: LabField, value: unknown): void {
+    const number = Number(value);
+    if (value !== '' && Number.isFinite(number)) {
+      this.set(field, number);
+    }
+  }
+
+  /** A text of lines into the list it stands for: blank lines are none. */
+  setLines(field: LabField, text: string): void {
+    this.set(
+      field,
+      text
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+    );
+  }
+
+  editOverlay(text: string): void {
+    this.overlayText.set(text);
+    this.overlayError.set('');
+  }
+
+  editBroker(text: string): void {
+    this.brokerText.set(text);
+    this.brokerError.set('');
+  }
+
+  /** Back to the library's default, or a list to edit that starts there. */
+  useDefaultTelemetries(useDefault: boolean): void {
+    this.telemetries.set(useDefault ? null : DEFAULT_TELEMETRIES);
+  }
+
+  /**
+   * Sets the broker, then reloads with the overlay and how the lab is to
+   * start. Nothing changes while either JSON is wrong.
+   */
+  async apply(): Promise<void> {
+    const overlay = this.overlay();
+    const brokerConfig = this.brokerObject();
+    this.overlayError.set(
+      overlay ? labCheckConfig(overlay, this.known) : 'Not a JSON object.'
+    );
+    this.brokerError.set(brokerConfig ? '' : 'Not a JSON object.');
+    if (this.overlayError() || !overlay || !brokerConfig) {
+      return;
+    }
+    await this.wire.setBrokerMode(this.mode());
+    await this.wire.setTelemetries(this.telemetries());
+    await this.wire.setBrokerConfig(brokerConfig);
+    this.reload(overlay, this.start());
+  }
+
+  /** Every change dropped: back to what is applied. */
+  discard(): void {
+    this.start.set(startOf(this.options));
+    this.editOverlay(this.appliedText());
+    this.mode.set(this.wire.brokerMode());
+    this.telemetries.set(this.wire.telemetries());
+    this.editBroker(JSON.stringify(this.wire.brokerConfig()));
+  }
+
+  /** The lab's own settings, and the broker's default answer. */
+  async reset(): Promise<void> {
+    await this.wire.setBrokerMode('ok');
+    await this.wire.setTelemetries(null);
+    await this.wire.setBrokerConfig({});
+    this.reload({});
+  }
+
+  setDebug(flag: LabDebugFlag, on: boolean): void {
+    try {
+      if (on) {
+        this.window.localStorage.setItem(flag, 'true');
+      } else {
+        this.window.localStorage.removeItem(flag);
+      }
+    } catch {
+      // Storage blocked: the flags stay as they were.
+    }
+    this.debug.set(this.readDebug());
+  }
+
+  private startChanges(): LabSettingsChange[] {
+    const start = this.start();
+    return (Object.keys(start) as (keyof LabStart)[])
+      .filter((key) => start[key] !== this.options[key])
+      .map((key) => {
+        const { field, section } = FIELDS.get(`start.${key}`)!;
+        return {
+          section,
+          label: field.label,
+          from: show(this.options[key], field),
+          to: show(start[key], field)
+        };
+      });
+  }
+
+  /**
+   * The overlay's settings set otherwise than applied. One set to what it
+   * already is, unset before, is no change; a section the lab doesn't take,
+   * or one that isn't an object, is the JSON's to show.
+   */
+  private overlayChanges(): LabSettingsChange[] {
+    const draft = this.overlay();
+    if (!draft) {
+      return [notAnObject(JSON_SECTION)];
+    }
+    const applied = this.options.config as Record<string, unknown>;
+    const changes: LabSettingsChange[] = [];
+    for (const name of keysOf(applied, draft)) {
+      const inEffect = Object.hasOwn(this.inEffect, name)
+        ? this.inEffect[name]
+        : undefined;
+      const before = applied[name] ?? {};
+      const after = draft[name] ?? {};
+      if (!inEffect || !isObject(before) || !isObject(after)) {
+        if (!same(applied[name], draft[name])) {
+          changes.push({
+            section: JSON_SECTION,
+            label: name,
+            from: show(applied[name]),
+            to: show(draft[name])
+          });
+        }
+        continue;
+      }
+      for (const key of keysOf(before, after)) {
+        const was = before[key] ?? inEffect[key];
+        if (
+          same(before[key], after[key]) ||
+          (before[key] === undefined && same(after[key], was))
+        ) {
+          continue;
+        }
+        const found = FIELDS.get(`${name}.${key}`);
+        changes.push({
+          section: found?.section ?? JSON_SECTION,
+          label: found?.field.label ?? `${name}.${key}`,
+          from: show(was, found?.field),
+          to: show(after[key], found?.field)
+        });
+      }
+    }
+    return changes;
+  }
+
+  /** The broker's answer, set otherwise than the server has it. */
+  private brokerChanges(): LabSettingsChange[] {
+    const changes: LabSettingsChange[] = [];
+    if (this.mode() !== this.wire.brokerMode()) {
+      changes.push({
+        section: BROKER_SECTION,
+        label: 'Answer /rum/init with',
+        from: this.wire.brokerMode(),
+        to: this.mode()
+      });
+    }
+    if (!same(this.telemetries(), this.wire.telemetries())) {
+      changes.push({
+        section: BROKER_SECTION,
+        label: 'Telemetries',
+        from: labTelemetriesLabel(this.wire.telemetries()),
+        to: labTelemetriesLabel(this.telemetries())
+      });
+    }
+    const draft = this.brokerObject();
+    if (!draft) {
+      return [...changes, notAnObject(MONITOR_SECTION)];
+    }
+    const applied = this.wire.brokerConfig();
+    for (const key of keysOf(applied, draft)) {
+      const field = FIELDS.get(`broker.${key}`)?.field;
+      const was = applied[key] ?? field?.default;
+      if (
+        same(applied[key], draft[key]) ||
+        (applied[key] === undefined &&
+          field !== undefined &&
+          same(draft[key], was))
+      ) {
+        continue;
+      }
+      changes.push({
+        section: MONITOR_SECTION,
+        label: field?.label ?? key,
+        from: show(was, field),
+        to: show(draft[key], field)
+      });
+    }
+    return changes;
+  }
+
+  private appliedText(): string {
+    return JSON.stringify(this.options.config, null, 2);
+  }
+
+  /** Starts the lab again, with `config` and how it is to start: as now, by default. */
+  private reload(
+    config: Record<string, unknown>,
+    start: LabStart = startOf(this.options)
+  ): void {
+    this.window.location.assign(
+      `${this.window.location.pathname}${labSearch({ ...start, config })}`
+    );
+  }
+
+  /** As the library reads them: a list of logger names is not "on". */
+  private readDebug(): Record<LabDebugFlag, boolean> {
+    return {
+      debugScenario: uwtIsDebugEnabled('debugScenario'),
+      debugBI: uwtIsDebugEnabled('debugBI'),
+      debugLogger: uwtIsDebugEnabled('debugLogger')
+    };
+  }
+}
+
+function startOf({ destination, telemetry, channel, inspector }: LabOptions) {
+  return { destination, telemetry, channel, inspector };
+}
+
+function notAnObject(section: LabSettingsSection): LabSettingsChange {
+  return { section, label: 'Not a JSON object yet', from: '', to: '' };
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+/** The keys of either object, once each. */
+function keysOf(a: object, b: object): string[] {
+  return [...new Set([...Object.keys(a), ...Object.keys(b)])];
+}
+
+/**
+ * Whether two settings are the same, as the JSON would have them: a pattern
+ * as its source, a transform as its name, an object's keys in any order.
+ */
+function same(a: unknown, b: unknown): boolean {
+  return comparable(a) === comparable(b);
+}
+
+function comparable(value: unknown): string {
+  return (
+    JSON.stringify(value, (_key, v: unknown) =>
+      v instanceof RegExp
+        ? v.source
+        : typeof v === 'function'
+          ? v.name
+          : isObject(v)
+            ? Object.fromEntries(
+                Object.keys(v)
+                  .sort()
+                  .map((key) => [key, v[key]])
+              )
+            : v
+    ) ?? 'undefined'
+  );
+}
+
+/** A setting's value as the review shows it. */
+function show(value: unknown, field?: LabField): string {
+  if (value === undefined) {
+    return 'not set';
+  }
+  if (field?.kind === 'shortcuts' && Array.isArray(value)) {
+    return (
+      value
+        .map((shortcut: LabShortcut) => labDescribeShortcut(shortcut))
+        .join(', ') || 'none'
+    );
+  }
+  if (typeof value === 'boolean') {
+    return value ? 'on' : 'off';
+  }
+  if (value instanceof RegExp) {
+    return value.source;
+  }
+  if (typeof value === 'function') {
+    return value.name;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => show(item)).join(', ') || 'none';
+  }
+  if (isObject(value)) {
+    return (
+      Object.entries(value)
+        .map(([key, item]) => `${key}: ${show(item)}`)
+        .join(', ') || 'none'
+    );
+  }
+  return value === '' ? 'empty' : String(value);
+}
+
+/** RegExps and functions, readable in JSON. */
+function readable(_key: string, value: unknown): unknown {
+  if (value instanceof RegExp) {
+    return String(value);
+  }
+  return typeof value === 'function'
+    ? `ƒ ${value.name || '(anonymous)'}`
+    : value;
+}
diff --git a/projects/watchtower-lab/src/lab/lab-settings-fields.ts b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
index a440b5d..4487ffb 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-fields.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
@@ -1,23 +1,67 @@
-import { LAB_VALUE_TRANSFORMS } from './lab-options';
+import { LAB_VALUE_TRANSFORMS, LabOptions } from './lab-options';
+import { LabBrokerMode } from './lab-wire.service';
 
 type Option = { label: string; value: string };
 
 /**
- * A setting the Settings page offers as a control, in a `?config=` section.
- * `multi` picks several of its options; `lines` is a list of strings, one
- * to a line; `levels` and `shortcuts` have editors of their own.
+ * A setting Settings offers as a control. `section` is where it is kept:
+ * `start` for how the lab starts, `broker` for the mock broker's app monitor
+ * config, and otherwise its section of the `?config=` overlay. `multi` picks
+ * several of its options; `lines` is a list of strings, one to a line;
+ * `levels` and `shortcuts` have editors of their own.
  */
 export type LabField = {
   section: string;
   key: string;
+  /** What it is, as people read it; its control adds the setting's name. */
   label: string;
+  /** What the app monitor does with none given: broker settings only. */
+  default?: unknown;
 } & (
   | { kind: 'switch' | 'number' | 'text' | 'lines' | 'levels' | 'shortcuts' }
   | { kind: 'select' | 'multi'; options: Option[] }
 );
 
-export interface LabFieldGroup {
-  title: string;
+/**
+ * A field's control label: what it is, then the setting's name as the JSON
+ * has it, so the control and the JSON can be read together.
+ */
+export function labFieldLabel(field: LabField): string {
+  switch (field.section) {
+    case 'start':
+      return field.label;
+    case 'broker':
+      return `${field.label} (${field.key})`;
+    default:
+      return `${field.label} (${field.section}.${field.key})`;
+  }
+}
+
+/** The groups of sections in the Settings list, in order. */
+export const LAB_SETTINGS_AREAS = [
+  'Library',
+  'Mock backend',
+  'Diagnostics',
+  'Advanced'
+] as const;
+
+/** How a section's settings take effect, as its tag says. */
+export const LAB_SETTINGS_APPLIES = {
+  reload: 'Applies on reload',
+  server: 'Applies on reload, in every tab',
+  now: 'Applies at once, in this browser'
+} as const;
+
+/** A section of Settings: a page of its own, with what it sets. */
+export interface LabSettingsSection {
+  /** Its address, under `/settings`. */
+  path: string;
+  label: string;
+  area: (typeof LAB_SETTINGS_AREAS)[number];
+  /** How its settings take effect; none for a readout. */
+  applies?: keyof typeof LAB_SETTINGS_APPLIES;
+  /** What it sets, under its title. */
+  lead: string;
   fields: LabField[];
 }
 
@@ -27,173 +71,264 @@ export const LAB_LOG_LEVELS = [
   { label: 'error — errors only', value: 'error' }
 ];
 
+/** How the lab starts; each is read once, at startup, from the address. */
+const DESTINATIONS: { label: string; value: LabOptions['destination'] }[] = [
+  { label: 'rum — the RUM sink, to the mock backend', value: 'rum' },
+  { label: 'noop — nothing is sent', value: 'noop' },
+  { label: "custom — the lab's own sink", value: 'custom' }
+];
+const CHANNELS: { label: string; value: LabOptions['channel'] }[] = [
+  { label: "tab — the shell's own channel", value: 'tab' },
+  { label: 'shared — one channel for every tab', value: 'shared' }
+];
+const INSPECTOR_MODES: { label: string; value: LabOptions['inspector'] }[] = [
+  { label: 'on — with its keyboard shortcut', value: 'on' },
+  { label: 'no shortcut — open it from the page', value: 'noshortcut' },
+  { label: 'off — disabled', value: 'off' }
+];
+
+export const LAB_BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
+  { label: 'ok — RUM records normally', value: 'ok' },
+  { label: 'null — RUM off for the page', value: 'null' },
+  { label: 'fail — broker error, the app carries on', value: 'fail' },
+  {
+    label: 'short-expiry — credentials refresh within seconds',
+    value: 'short-expiry'
+  },
+  { label: 'flaky — fails twice, then answers', value: 'flaky' },
+  {
+    label: 'invalid — a pattern as a string: RUM not started',
+    value: 'invalid'
+  },
+  {
+    label: 'null-on-refresh — RUM off at the first refresh',
+    value: 'null-on-refresh'
+  },
+  {
+    label: 'no-credentials-on-refresh — a refresh without credentials',
+    value: 'no-credentials-on-refresh'
+  }
+];
+
 /**
- * The library's settings the lab takes in its `?config=` overlay, one control
- * each, by area. A label ends with the setting's name, as the overlay has
- * it, so the control and the JSON can be read together.
+ * The sections of Settings, by what their settings change, each with the
+ * controls it offers. The library's settings are the ones the lab takes in
+ * its `?config=` overlay; the app monitor's are the ones most worth trying,
+ * with the values the broker answers with, or the app monitor takes, when
+ * none is given. Any others are the JSON's.
  */
-export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
+export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
   {
-    title: 'Identity',
+    path: 'app-identity',
+    label: 'App identity',
+    area: 'Library',
+    applies: 'reload',
+    lead: "What the telemetry says it comes from: the application, its environment and version, and the namespace of the library's event types.",
     fields: [
       {
         kind: 'text',
         section: 'identity',
         key: 'application',
-        label: 'Application name (identity.application)'
+        label: 'Application name'
       },
       {
         kind: 'text',
         section: 'identity',
         key: 'environment',
-        label: 'Environment (identity.environment)'
+        label: 'Environment'
       },
+      { kind: 'text', section: 'identity', key: 'version', label: 'Version' },
       {
         kind: 'text',
         section: 'identity',
-        key: 'version',
-        label: 'Version (identity.version)'
+        key: 'eventNamespace',
+        label: 'Event namespace'
+      }
+    ]
+  },
+  {
+    path: 'delivery',
+    label: 'Delivery',
+    area: 'Library',
+    applies: 'reload',
+    lead: 'Whether the library sends telemetry, where it goes and over which broadcast channel, and whether the lab batches its logs.',
+    fields: [
+      {
+        kind: 'select',
+        section: 'start',
+        key: 'destination',
+        label: 'Destination',
+        options: DESTINATIONS
       },
       {
-        kind: 'text',
-        section: 'identity',
-        key: 'eventNamespace',
-        label: 'Event namespace (identity.eventNamespace)'
+        kind: 'select',
+        section: 'start',
+        key: 'channel',
+        label: 'Broadcast channel',
+        options: CHANNELS
+      },
+      {
+        kind: 'switch',
+        section: 'start',
+        key: 'telemetry',
+        label: 'Telemetry'
+      },
+      {
+        kind: 'switch',
+        section: 'lab',
+        key: 'logBatching',
+        label: 'Batch logs, sent on flush()'
       }
     ]
   },
   {
-    title: 'Scenarios',
+    path: 'scenarios',
+    label: 'Scenarios',
+    area: 'Library',
+    applies: 'reload',
+    lead: 'How scenarios time out, count their steps, and report them.',
     fields: [
       {
         kind: 'number',
         section: 'scenarios',
         key: 'defaultTimeoutMs',
-        label: 'Default timeout, ms (scenarios.defaultTimeoutMs)'
+        label: 'Default timeout, ms'
       },
       {
         kind: 'switch',
         section: 'scenarios',
         key: 'emitLifecycleEvents',
-        label: 'Lifecycle step events (scenarios.emitLifecycleEvents)'
+        label: 'Lifecycle step events'
       },
       {
         kind: 'number',
         section: 'scenarios',
         key: 'maxSteps',
-        label: 'Step limit (scenarios.maxSteps)'
+        label: 'Step limit'
       },
       {
         kind: 'switch',
         section: 'scenarios',
         key: 'userTimings',
-        label: 'User timings (scenarios.userTimings)'
+        label: 'User timings'
       },
       {
         kind: 'number',
         section: 'scenarios',
         key: 'markCleanupFallbackMs',
-        label: 'Mark cleanup fallback, ms (scenarios.markCleanupFallbackMs)'
+        label: 'Mark cleanup fallback, ms'
       },
       {
         kind: 'switch',
         section: 'scenarios',
         key: 'redact',
-        label: 'Redact scenario payloads (scenarios.redact)'
+        label: 'Redact scenario payloads'
+      }
+    ]
+  },
+  {
+    path: 'bi-events',
+    label: 'BI events',
+    area: 'Library',
+    applies: 'reload',
+    lead: 'How the library drops repeated BI events, and whether it redacts their payloads.',
+    fields: [
+      {
+        kind: 'number',
+        section: 'bi',
+        key: 'dedupWindowMs',
+        label: 'BI dedup window, ms'
+      },
+      {
+        kind: 'number',
+        section: 'bi',
+        key: 'dedupMaxKeys',
+        label: 'BI dedup keys kept'
+      },
+      {
+        kind: 'switch',
+        section: 'bi',
+        key: 'redact',
+        label: 'Redact BI payloads'
       }
     ]
   },
   {
-    title: 'Logging',
+    path: 'logging',
+    label: 'Logging',
+    area: 'Library',
+    applies: 'reload',
+    lead: "How the library's loggers filter, mirror and redact records.",
     fields: [
       {
         kind: 'select',
         section: 'logging',
         key: 'minLevel',
-        label: 'Minimum level (logging.minLevel)',
+        label: 'Minimum level',
         options: LAB_LOG_LEVELS
       },
       {
         kind: 'switch',
         section: 'logging',
         key: 'mirrorErrorsToRum',
-        label: 'Mirror errors to RUM (logging.mirrorErrorsToRum)'
+        label: 'Mirror errors to RUM'
       },
       {
         kind: 'levels',
         section: 'logging',
         key: 'levels',
-        label: 'Logger levels (logging.levels)'
+        label: 'Logger levels'
       },
       {
         kind: 'switch',
         section: 'logging',
         key: 'redact',
-        label: 'Redact log values (logging.redact)'
-      }
-    ]
-  },
-  {
-    title: 'BI events',
-    fields: [
-      {
-        kind: 'number',
-        section: 'bi',
-        key: 'dedupWindowMs',
-        label: 'BI dedup window, ms (bi.dedupWindowMs)'
-      },
-      {
-        kind: 'number',
-        section: 'bi',
-        key: 'dedupMaxKeys',
-        label: 'BI dedup keys kept (bi.dedupMaxKeys)'
-      },
-      {
-        kind: 'switch',
-        section: 'bi',
-        key: 'redact',
-        label: 'Redact BI payloads (bi.redact)'
+        label: 'Redact log values'
       }
     ]
   },
   {
-    title: 'Redaction',
+    path: 'privacy',
+    label: 'Privacy & redaction',
+    area: 'Library',
+    applies: 'reload',
+    lead: 'What the library redacts from everything it sends: long strings and stacks, URL queries, and the keys and values that match a pattern.',
     fields: [
       {
         kind: 'number',
         section: 'redaction',
         key: 'maxStringLength',
-        label: 'Longest string (redaction.maxStringLength)'
+        label: 'Longest string'
       },
       {
         kind: 'number',
         section: 'redaction',
         key: 'maxKeys',
-        label: 'Most keys (redaction.maxKeys)'
+        label: 'Most keys'
       },
       {
         kind: 'number',
         section: 'redaction',
         key: 'maxStackLength',
-        label: 'Longest stack (redaction.maxStackLength)'
+        label: 'Longest stack'
       },
       {
         kind: 'switch',
         section: 'redaction',
         key: 'includeStack',
-        label: 'Include stacks (redaction.includeStack)'
+        label: 'Include stacks'
       },
       {
         kind: 'switch',
         section: 'redaction',
         key: 'stripUrlQuery',
-        label: 'Strip URL queries (redaction.stripUrlQuery)'
+        label: 'Strip URL queries'
       },
       {
         kind: 'multi',
         section: 'redaction',
         key: 'scanValuePatterns',
-        label: 'Value patterns scanned (redaction.scanValuePatterns)',
+        label: 'Value patterns scanned',
         options: ['email', 'creditCard', 'ssn', 'ipv4', 'phone'].map(
           (name) => ({
             label: name,
@@ -205,7 +340,7 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
         kind: 'multi',
         section: 'redaction',
         key: 'extraValueTransforms',
-        label: 'Value transforms (redaction.extraValueTransforms)',
+        label: 'Value transforms',
         options: Object.keys(LAB_VALUE_TRANSFORMS).map((name) => ({
           label: name,
           value: name
@@ -215,116 +350,162 @@ export const LAB_FIELD_GROUPS: LabFieldGroup[] = [
         kind: 'lines',
         section: 'redaction',
         key: 'extraKeyPatterns',
-        label:
-          'Extra key patterns, one RegExp per line (redaction.extraKeyPatterns)'
+        label: 'Extra key patterns, one RegExp per line'
       },
       {
         kind: 'lines',
         section: 'redaction',
         key: 'extraValuePatterns',
-        label:
-          'Extra value patterns, one RegExp per line (redaction.extraValuePatterns)'
+        label: 'Extra value patterns, one RegExp per line'
       }
     ]
   },
   {
-    title: 'Event Inspector',
+    path: 'event-inspector',
+    label: 'Event Inspector',
+    area: 'Library',
+    applies: 'reload',
+    lead: 'Whether the inspector is there and how it opens, and how much it keeps and shows.',
     fields: [
+      {
+        kind: 'select',
+        section: 'start',
+        key: 'inspector',
+        label: 'Availability',
+        options: INSPECTOR_MODES
+      },
       {
         kind: 'number',
         section: 'inspector',
         key: 'maxEventsPerSection',
-        label: 'Events kept per kind (inspector.maxEventsPerSection)'
+        label: 'Events kept per kind'
       },
       {
         kind: 'number',
         section: 'inspector',
         key: 'maxPayloadCharsInView',
-        label: 'Payload characters shown (inspector.maxPayloadCharsInView)'
+        label: 'Payload characters shown'
       },
       {
         kind: 'number',
         section: 'inspector',
         key: 'captureBeforeOpen',
-        label: 'Keep events from before opening (inspector.captureBeforeOpen)'
+        label: 'Keep events from before opening'
       },
       {
         kind: 'shortcuts',
         section: 'inspector',
         key: 'shortcuts',
-        label: 'Shortcuts (inspector.shortcuts)'
+        label: 'Shortcuts'
       }
     ]
-  }
-];
-
-/** A setting of the mock broker's app monitor config, which it lays over its own answer. */
-export interface LabBrokerField {
-  kind: 'number' | 'switch' | 'lines';
-  key: string;
-  label: string;
-  /** What the app monitor does with none given, shown until one is. */
-  default: number | boolean | string[];
-}
-
-/**
- * The app monitor settings most worth trying, with the values the broker
- * answers with, or the app monitor takes, when none is given. Any others
- * are the JSON's.
- */
-export const LAB_BROKER_FIELDS: LabBrokerField[] = [
-  {
-    kind: 'number',
-    key: 'sessionSampleRate',
-    label: 'Session sample rate, 0 to 1 (sessionSampleRate)',
-    default: 1
-  },
-  {
-    kind: 'number',
-    key: 'sessionEventLimit',
-    label: 'Session event limit, 0 for none (sessionEventLimit)',
-    default: 0
-  },
-  {
-    kind: 'number',
-    key: 'dispatchInterval',
-    label: 'Dispatch interval, ms (dispatchInterval)',
-    default: 2000
-  },
-  {
-    kind: 'switch',
-    key: 'allowCookies',
-    label: 'Allow cookies (allowCookies)',
-    default: true
   },
   {
-    kind: 'switch',
-    key: 'enableXRay',
-    label: 'X-Ray tracing (enableXRay)',
-    default: false
+    path: 'rum-broker',
+    label: 'RUM broker',
+    area: 'Mock backend',
+    applies: 'server',
+    lead: "How the mock RUM broker answers /rum/init, and the RUM telemetries it names. The lab's server keeps them, for every tab.",
+    fields: []
   },
   {
-    kind: 'switch',
-    key: 'disableAutoPageView',
-    label: 'Automatic page view off (disableAutoPageView)',
-    default: false
+    path: 'app-monitor',
+    label: 'App monitor',
+    area: 'Mock backend',
+    applies: 'server',
+    lead: "The app monitor config the mock broker lays over its answer: the settings most worth trying, and the JSON, which has the rest and is what is sent. The lab's server keeps it, for every tab.",
+    fields: [
+      {
+        kind: 'number',
+        section: 'broker',
+        key: 'sessionSampleRate',
+        label: 'Session sample rate, 0 to 1',
+        default: 1
+      },
+      {
+        kind: 'number',
+        section: 'broker',
+        key: 'sessionEventLimit',
+        label: 'Session event limit, 0 for none',
+        default: 0
+      },
+      {
+        kind: 'number',
+        section: 'broker',
+        key: 'dispatchInterval',
+        label: 'Dispatch interval, ms',
+        default: 2000
+      },
+      {
+        kind: 'switch',
+        section: 'broker',
+        key: 'allowCookies',
+        label: 'Allow cookies',
+        default: true
+      },
+      {
+        kind: 'switch',
+        section: 'broker',
+        key: 'enableXRay',
+        label: 'X-Ray tracing',
+        default: false
+      },
+      {
+        kind: 'switch',
+        section: 'broker',
+        key: 'disableAutoPageView',
+        label: 'Automatic page view off',
+        default: false
+      },
+      {
+        kind: 'switch',
+        section: 'broker',
+        key: 'recordResourceUrl',
+        label: 'Record resource URLs',
+        default: true
+      },
+      {
+        kind: 'lines',
+        section: 'broker',
+        key: 'pagesToExclude',
+        label: 'Pages to exclude, one RegExp per line',
+        default: []
+      },
+      {
+        kind: 'lines',
+        section: 'broker',
+        key: 'pagesToInclude',
+        label: 'Pages to include, one RegExp per line',
+        default: []
+      }
+    ]
   },
   {
-    kind: 'switch',
-    key: 'recordResourceUrl',
-    label: 'Record resource URLs (recordResourceUrl)',
-    default: true
+    path: 'debug-flags',
+    label: 'Debug flags',
+    area: 'Diagnostics',
+    applies: 'now',
+    lead: 'Console lines for what is sent. The library reads them on every event, so they apply at once, without a reload, and are never waiting to be applied.',
+    fields: []
   },
   {
-    kind: 'lines',
-    key: 'pagesToExclude',
-    label: 'Pages to exclude, one RegExp per line (pagesToExclude)',
-    default: []
+    path: 'json',
+    label: 'Configuration as JSON',
+    area: 'Advanced',
+    applies: 'reload',
+    lead: "The library's settings from every section, as JSON. Edit it to paste a whole configuration, or to set what has no control.",
+    fields: []
   },
   {
-    kind: 'lines',
-    key: 'pagesToInclude',
-    label: 'Pages to include, one RegExp per line (pagesToInclude)',
-    default: []
+    path: 'effective',
+    label: 'Effective configuration',
+    area: 'Advanced',
+    lead: 'What the library was given on this load, read back from its tokens.',
+    fields: []
   }
 ];
+
+/** The section with this path. */
+export function labSettingsSection(path: string): LabSettingsSection {
+  return LAB_SETTINGS_SECTIONS.find((section) => section.path === path)!;
+}
diff --git a/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts b/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
new file mode 100644
index 0000000..34bbbda
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { CpsButtonComponent } from 'cps-ui-kit';
+import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
+
+/** Settings' first page: what is waiting to be applied, and a way back to the lab's own. */
+@Component({
+  selector: 'lab-settings-overview',
+  imports: [CpsButtonComponent, RouterLink],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <h1>Settings</h1>
+      <p>
+        What the next load runs with, by section: how the lab starts, the
+        library's settings and the mock backend's answers. Changes wait until
+        they are applied, all together, with a reload; the debug flags apply at
+        once.
+      </p>
+
+      <div class="lab-card">
+        <h2>Not applied yet</h2>
+        @if (draft.changes().length) {
+          <ul class="lab-changes">
+            @for (change of draft.changes(); track $index) {
+              <li>
+                <a
+                  [routerLink]="['/settings', change.section.path]"
+                  queryParamsHandling="preserve"
+                  >{{ change.section.label }} › {{ change.label }}</a
+                >
+                @if (change.from || change.to) {
+                  <span class="lab-changes__values"
+                    >{{ change.from }} → {{ change.to }}</span
+                  >
+                }
+              </li>
+            }
+          </ul>
+        } @else {
+          <p>Nothing: every section is as applied.</p>
+        }
+      </div>
+
+      <div class="lab-card">
+        <h2>The lab's settings</h2>
+        <p>
+          Back to the library's settings and the mock broker's answer as the lab
+          sets them. How the lab starts, and the debug flags, stay as they are.
+        </p>
+        <div class="lab-actions">
+          <cps-button
+            label="Back to the lab's settings"
+            type="outlined"
+            (clicked)="draft.reset()" />
+        </div>
+      </div>
+    </section>
+  `
+})
+export class SettingsOverviewPage {
+  protected readonly draft = inject(LabSettingsDraft);
+}
diff --git a/projects/watchtower-lab/src/shell/pages/settings-section.page.ts b/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
new file mode 100644
index 0000000..b35338a
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
@@ -0,0 +1,288 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import {
+  CpsInputComponent,
+  CpsSelectComponent,
+  CpsSwitchComponent,
+  CpsTextareaComponent
+} from 'cps-ui-kit';
+import { LabLoggerLevelsComponent } from '../../lab/lab-logger-levels.component';
+import {
+  LAB_DEBUG_FLAGS,
+  LabSettingsDraft
+} from '../../lab/lab-settings-draft.service';
+import {
+  LAB_BROKER_MODES,
+  LAB_SETTINGS_APPLIES,
+  LabField,
+  labFieldLabel,
+  LabSettingsSection
+} from '../../lab/lab-settings-fields';
+import {
+  LabShortcut,
+  LabShortcutsComponent
+} from '../../lab/lab-shortcuts.component';
+import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
+
+/** One section of Settings: its controls, which write into the shared draft. */
+@Component({
+  selector: 'lab-settings-section',
+  imports: [
+    CpsInputComponent,
+    CpsSelectComponent,
+    CpsSwitchComponent,
+    CpsTextareaComponent,
+    LabLoggerLevelsComponent,
+    LabShortcutsComponent,
+    RouterLink
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="lab-page">
+      <div class="lab-settings__title">
+        <h1>{{ section.label }}</h1>
+        @if (applies) {
+          <span class="lab-settings__applies">{{ applies }}</span>
+        }
+      </div>
+      <p>{{ section.lead }}</p>
+
+      @if (writesOverlay && !draft.overlay()) {
+        <p class="lab-settings__notice">
+          These controls are off while the JSON in
+          <a routerLink="/settings/json" queryParamsHandling="preserve"
+            >Configuration as JSON</a
+          >
+          isn't an object.
+        </p>
+      }
+
+      @if (section.path === 'rum-broker') {
+        <div class="lab-card">
+          <cps-select
+            label="Answer /rum/init with"
+            [options]="modes"
+            [returnObject]="false"
+            [value]="draft.mode()"
+            width="26rem"
+            (valueChanged)="draft.mode.set($event)" />
+          <p>
+            RUM's own telemetry: the library's default is errors, performance
+            and same-origin HTTP. With none, RUM records only page views, the
+            session start and the library's events.
+          </p>
+          <div class="lab-switches">
+            <cps-switch
+              label="The library's default"
+              [value]="draft.telemetries() === null"
+              (valueChanged)="draft.useDefaultTelemetries($event)" />
+          </div>
+          @if (draft.telemetries(); as chosen) {
+            <cps-select
+              label="Telemetries"
+              placeholder="None"
+              [options]="telemetryOptions"
+              [returnObject]="false"
+              [multiple]="true"
+              [selectAll]="true"
+              [chips]="true"
+              [value]="chosen"
+              width="26rem"
+              (valueChanged)="draft.telemetries.set($event)" />
+          }
+        </div>
+      }
+
+      @if (section.fields.length) {
+        <div class="lab-card">
+          <div class="lab-fields">
+            @for (field of section.fields; track field.section + field.key) {
+              @switch (field.kind) {
+                @case ('switch') {
+                  <cps-switch
+                    [label]="label(field)"
+                    [value]="!!draft.value(field)"
+                    [disabled]="draft.disabled(field)"
+                    (valueChanged)="draft.set(field, $event)" />
+                }
+                @case ('number') {
+                  <cps-input
+                    type="number"
+                    [label]="label(field)"
+                    width="26rem"
+                    [value]="'' + draft.value(field)"
+                    [disabled]="draft.disabled(field)"
+                    (valueChanged)="draft.setNumber(field, $event)" />
+                }
+                @case ('text') {
+                  <cps-input
+                    [label]="label(field)"
+                    width="26rem"
+                    [value]="'' + (draft.value(field) ?? '')"
+                    [disabled]="draft.disabled(field)"
+                    (valueChanged)="draft.set(field, $event)" />
+                }
+                @case ('select') {
+                  <cps-select
+                    [label]="label(field)"
+                    [options]="selectOptions(field)"
+                    [returnObject]="false"
+                    [value]="'' + draft.value(field)"
+                    width="26rem"
+                    [disabled]="draft.disabled(field)"
+                    (valueChanged)="draft.set(field, $event)" />
+                }
+                @case ('multi') {
+                  <cps-select
+                    [label]="label(field)"
+                    [options]="selectOptions(field)"
+                    [returnObject]="false"
+                    [multiple]="true"
+                    [chips]="true"
+                    [value]="list(draft.value(field))"
+                    width="26rem"
+                    [disabled]="draft.disabled(field)"
+                    (valueChanged)="draft.set(field, $event)" />
+                }
+                @case ('lines') {
+                  <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+                  <cps-textarea
+                    ngSkipHydration
+                    [label]="label(field)"
+                    [rows]="3"
+                    width="26rem"
+                    [value]="
+                      list(draft.value(field)).join(
+                        '
+'
+                      )
+                    "
+                    [disabled]="draft.disabled(field)"
+                    (valueChanged)="draft.setLines(field, $event)" />
+                }
+                @case ('levels') {
+                  <div class="lab-field-wide">
+                    <p class="lab-field-wide__label">{{ label(field) }}</p>
+                    <lab-logger-levels
+                      [levels]="levelsOf(draft.value(field))"
+                      [disabled]="draft.disabled(field)"
+                      (changed)="draft.set(field, $event)" />
+                  </div>
+                }
+                @case ('shortcuts') {
+                  <div class="lab-field-wide">
+                    <p class="lab-field-wide__label">{{ label(field) }}</p>
+                    <lab-shortcuts
+                      [shortcuts]="shortcutsOf(draft.value(field))"
+                      [disabled]="draft.disabled(field)"
+                      (changed)="draft.set(field, $event)" />
+                  </div>
+                }
+              }
+            }
+          </div>
+          @if (section.path === 'app-monitor') {
+            <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+            <cps-textarea
+              ngSkipHydration
+              label="Laid over the app monitor config (JSON)"
+              width="26rem"
+              [rows]="3"
+              [value]="draft.brokerText()"
+              [error]="draft.brokerError()"
+              (valueChanged)="draft.editBroker($event)" />
+          }
+        </div>
+      }
+
+      @switch (section.path) {
+        @case ('debug-flags') {
+          <div class="lab-card">
+            <div class="lab-switches">
+              @for (flag of flags; track flag) {
+                <cps-switch
+                  [label]="flag"
+                  [value]="draft.debug()[flag]"
+                  (valueChanged)="draft.setDebug(flag, $event)" />
+              }
+            </div>
+          </div>
+        }
+        @case ('json') {
+          <div class="lab-card">
+            <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+            <cps-textarea
+              ngSkipHydration
+              label="Settings (JSON)"
+              hint="Patterns are RegExp sources; the one value transform is mask-order-ids."
+              [rows]="12"
+              [value]="draft.overlayText()"
+              [error]="draft.overlayError()"
+              (valueChanged)="draft.editOverlay($event)" />
+          </div>
+        }
+        @case ('effective') {
+          <div class="lab-card">
+            <pre
+              class="lab-readout"
+              tabindex="0"
+              role="region"
+              aria-label="Settings in effect"
+              >{{ draft.effective }}</pre>
+          </div>
+        }
+      }
+    </section>
+  `
+})
+export class SettingsSectionPage {
+  protected readonly draft = inject(LabSettingsDraft);
+  protected readonly section: LabSettingsSection =
+    inject(ActivatedRoute).snapshot.data.section;
+
+  protected readonly applies =
+    this.section.applies && LAB_SETTINGS_APPLIES[this.section.applies];
+
+  /** Whether its controls write into the overlay, and so wait for its JSON. */
+  protected readonly writesOverlay = this.section.fields.some(
+    (field) => field.section !== 'start' && field.section !== 'broker'
+  );
+
+  protected readonly label = labFieldLabel;
+  protected readonly flags = LAB_DEBUG_FLAGS;
+  protected readonly modes = LAB_BROKER_MODES;
+  protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
+    label: t,
+    value: t
+  }));
+
+  protected selectOptions(field: LabField): { label: string; value: string }[] {
+    return field.kind === 'select' || field.kind === 'multi'
+      ? field.options
+      : [];
+  }
+
+  /**
+   * A list setting as text, for a control: what the draft has, or what is in
+   * effect, where a pattern is a `RegExp` and a transform a function.
+   */
+  protected list(value: unknown): string[] {
+    return (Array.isArray(value) ? value : []).map((item) =>
+      item instanceof RegExp
+        ? item.source
+        : typeof item === 'function'
+          ? item.name
+          : String(item)
+    );
+  }
+
+  protected levelsOf(value: unknown): Record<string, string> {
+    return value && typeof value === 'object' && !Array.isArray(value)
+      ? (value as Record<string, string>)
+      : {};
+  }
+
+  protected shortcutsOf(value: unknown): LabShortcut[] {
+    return Array.isArray(value) ? (value as LabShortcut[]) : [];
+  }
+}
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index ce9fee0..3a9ee64 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -2,696 +2,193 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  DOCUMENT,
   inject,
-  linkedSignal,
   signal
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
-  UWT_BI_TELEMETRY_CONFIG,
-  UWT_LOG_CONFIG,
-  UWT_REDACT_CONFIG,
-  UWT_SCENARIO_TELEMETRY_CONFIG,
-  UWT_DEFAULT_TELEMETRY_CONFIG,
-  UWT_TELEMETRY_IDENTITY,
-  uwtIsDebugEnabled
-} from '@absaoss-cps/ngx-ui-watchtower';
+  NavigationEnd,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+  RouterOutlet
+} from '@angular/router';
+import { CpsButtonComponent, CpsSelectComponent } from 'cps-ui-kit';
+import { filter } from 'rxjs';
+import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
 import {
-  UWT_DEFAULT_INSPECTOR_CONFIG,
-  UWT_EVENT_INSPECTOR_CONFIG
-} from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
-import {
-  CpsButtonComponent,
-  CpsInputComponent,
-  CpsSelectComponent,
-  CpsSwitchComponent,
-  CpsTextareaComponent
-} from 'cps-ui-kit';
-import { labCheckConfig } from '../../lab/lab-config-check';
-import { parseJsonObject } from '../../lab/lab-json';
-import { labSearch, LabOptions } from '../../lab/lab-options';
-import { LabLoggerLevelsComponent } from '../../lab/lab-logger-levels.component';
-import {
-  LAB_BROKER_FIELDS,
-  LAB_FIELD_GROUPS,
-  LabBrokerField,
-  LabField
+  LAB_SETTINGS_AREAS,
+  LAB_SETTINGS_SECTIONS
 } from '../../lab/lab-settings-fields';
-import {
-  LabShortcut,
-  LabShortcutsComponent
-} from '../../lab/lab-shortcuts.component';
-import {
-  LAB_TELEMETRIES,
-  LabBrokerMode,
-  LabTelemetry,
-  LabWire
-} from '../../lab/lab-wire.service';
-import { LAB_OPTIONS } from '../shell.config';
-
-const DEBUG_FLAGS = ['debugScenario', 'debugBI', 'debugLogger'] as const;
-
-/** How the lab starts; each is read once, at startup, from the address. */
-const DESTINATIONS: { label: string; value: LabOptions['destination'] }[] = [
-  { label: 'rum — the RUM sink, to the mock backend', value: 'rum' },
-  { label: 'noop — nothing is sent', value: 'noop' },
-  { label: "custom — the lab's own sink", value: 'custom' }
-];
-const CHANNELS: { label: string; value: LabOptions['channel'] }[] = [
-  { label: "tab — the shell's own channel", value: 'tab' },
-  { label: 'shared — one channel for every tab', value: 'shared' }
-];
-const INSPECTOR_MODES: { label: string; value: LabOptions['inspector'] }[] = [
-  { label: 'on — with its keyboard shortcut', value: 'on' },
-  { label: 'no shortcut — open it from the page', value: 'noshortcut' },
-  { label: 'off — disabled', value: 'off' }
-];
-type DebugFlag = (typeof DEBUG_FLAGS)[number];
 
-const BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
-  { label: 'ok — RUM records normally', value: 'ok' },
-  { label: 'null — RUM off for the page', value: 'null' },
-  { label: 'fail — broker error, the app carries on', value: 'fail' },
-  {
-    label: 'short-expiry — credentials refresh within seconds',
-    value: 'short-expiry'
-  },
-  { label: 'flaky — fails twice, then answers', value: 'flaky' },
-  {
-    label: 'invalid — a pattern as a string: RUM not started',
-    value: 'invalid'
-  },
-  {
-    label: 'null-on-refresh — RUM off at the first refresh',
-    value: 'null-on-refresh'
-  },
-  {
-    label: 'no-credentials-on-refresh — a refresh without credentials',
-    value: 'no-credentials-on-refresh'
-  }
-];
+/** The picker's value for the overview, which has no path of its own. */
+const OVERVIEW = 'overview';
 
-/** The library's default telemetries, where an edited list starts. */
-const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
+/** The section an address is in: `logging` for `/settings/logging?…`. */
+function sectionOf(url: string): string {
+  return url.split(/[?#]/)[0].split('/')[2] || OVERVIEW;
+}
 
+/**
+ * Settings: a list of its sections beside the one shown — a picker, when
+ * there's no room for the list — and, while there are any, the changes not
+ * applied yet, from every section, in a bar that applies them together.
+ */
 @Component({
   selector: 'lab-settings-page',
   imports: [
     CpsButtonComponent,
-    CpsInputComponent,
     CpsSelectComponent,
-    CpsSwitchComponent,
-    CpsTextareaComponent,
-    LabLoggerLevelsComponent,
-    LabShortcutsComponent
+    RouterLink,
+    RouterLinkActive,
+    RouterOutlet
   ],
+  providers: [LabSettingsDraft],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <section class="lab-page">
-      <h1>Settings</h1>
-      <p>
-        What the next load runs with: how the lab starts, the library's settings
-        and the mock RUM broker's answer. They apply together, with a reload.
-      </p>
-
-      <div class="lab-card">
-        <h2>Run</h2>
-        <p>How the lab starts. Read once, so applying reloads the lab.</p>
-        <div class="lab-fields">
-          <cps-select
-            label="Destination"
-            [options]="destinations"
-            [returnObject]="false"
-            [value]="destination()"
-            width="26rem"
-            (valueChanged)="destination.set($event)" />
-          <cps-select
-            label="Broadcast channel"
-            [options]="channels"
-            [returnObject]="false"
-            [value]="channel()"
-            width="26rem"
-            (valueChanged)="channel.set($event)" />
-          <cps-select
-            label="Event Inspector"
-            [options]="inspectorModes"
-            [returnObject]="false"
-            [value]="inspector()"
-            width="26rem"
-            (valueChanged)="inspector.set($event)" />
-          <div class="lab-switches">
-            <cps-switch
-              label="Telemetry"
-              [value]="telemetry()"
-              (valueChanged)="telemetry.set($event)" />
-            <cps-switch
-              label="Batch logs, sent on flush() (lab.logBatching)"
-              [value]="!!setting('lab', 'logBatching')"
-              [disabled]="!overlay()"
-              (valueChanged)="set('lab', 'logBatching', $event)" />
-          </div>
-        </div>
-      </div>
-
-      @for (group of groups; track group.title) {
-        <div class="lab-card">
-          <h2>{{ group.title }}</h2>
-          <div class="lab-fields">
-            @for (field of group.fields; track field.key) {
-              @switch (field.kind) {
-                @case ('switch') {
-                  <cps-switch
-                    [label]="field.label"
-                    [value]="!!setting(field.section, field.key)"
-                    [disabled]="!overlay()"
-                    (valueChanged)="set(field.section, field.key, $event)" />
-                }
-                @case ('number') {
-                  <cps-input
-                    type="number"
-                    [label]="field.label"
-                    width="26rem"
-                    [value]="'' + setting(field.section, field.key)"
-                    [disabled]="!overlay()"
-                    (valueChanged)="
-                      setNumber(field.section, field.key, $event)
-                    " />
-                }
-                @case ('text') {
-                  <cps-input
-                    [label]="field.label"
-                    width="26rem"
-                    [value]="'' + (setting(field.section, field.key) ?? '')"
-                    [disabled]="!overlay()"
-                    (valueChanged)="set(field.section, field.key, $event)" />
-                }
-                @case ('select') {
-                  <cps-select
-                    [label]="field.label"
-                    [options]="selectOptions(field)"
-                    [returnObject]="false"
-                    [value]="'' + setting(field.section, field.key)"
-                    width="26rem"
-                    [disabled]="!overlay()"
-                    (valueChanged)="set(field.section, field.key, $event)" />
-                }
-                @case ('multi') {
-                  <cps-select
-                    [label]="field.label"
-                    [options]="selectOptions(field)"
-                    [returnObject]="false"
-                    [multiple]="true"
-                    [chips]="true"
-                    [value]="list(setting(field.section, field.key))"
-                    width="26rem"
-                    [disabled]="!overlay()"
-                    (valueChanged)="set(field.section, field.key, $event)" />
-                }
-                @case ('lines') {
-                  <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-                  <cps-textarea
-                    ngSkipHydration
-                    [label]="field.label"
-                    [rows]="3"
-                    width="26rem"
-                    [value]="
-                      list(setting(field.section, field.key)).join(
-                        '
-'
-                      )
-                    "
-                    [disabled]="!overlay()"
-                    (valueChanged)="
-                      setLines(field.section, field.key, $event)
-                    " />
-                }
-                @case ('levels') {
-                  <div class="lab-field-wide">
-                    <p class="lab-field-wide__label">{{ field.label }}</p>
-                    <lab-logger-levels
-                      [levels]="levelsOf(setting(field.section, field.key))"
-                      [disabled]="!overlay()"
-                      (changed)="set(field.section, field.key, $event)" />
-                  </div>
-                }
-                @case ('shortcuts') {
-                  <div class="lab-field-wide">
-                    <p class="lab-field-wide__label">{{ field.label }}</p>
-                    <lab-shortcuts
-                      [shortcuts]="
-                        shortcutsOf(setting(field.section, field.key))
-                      "
-                      [disabled]="!overlay()"
-                      (changed)="set(field.section, field.key, $event)" />
-                  </div>
-                }
-              }
+    <div class="lab-settings">
+      <nav class="lab-settings__nav" aria-label="Settings sections">
+        <ul>
+          <li>
+            <a
+              routerLink="/settings"
+              queryParamsHandling="preserve"
+              routerLinkActive="active"
+              [routerLinkActiveOptions]="{ exact: true }"
+              ariaCurrentWhenActive="page"
+              >Overview</a
+            >
+          </li>
+        </ul>
+        @for (area of areas; track area.name) {
+          <p class="lab-settings__area" [id]="area.id">{{ area.name }}</p>
+          <ul [attr.aria-labelledby]="area.id">
+            @for (section of area.sections; track section.path) {
+              <li>
+                <a
+                  [routerLink]="['/settings', section.path]"
+                  queryParamsHandling="preserve"
+                  routerLinkActive="active"
+                  ariaCurrentWhenActive="page"
+                  >{{ section.label }}
+                  @if (changed().has(section.path)) {
+                    <span class="cps-sr-only">(changes not applied)</span
+                    ><span class="lab-settings__dot" aria-hidden="true"></span>
+                  }
+                </a>
+              </li>
             }
-          </div>
-        </div>
-      }
-
-      <div class="lab-card">
-        <h2>Settings as JSON</h2>
-        <p>
-          Every setting above, as JSON. Edit it to paste a whole configuration,
-          or to set what has no control.
-        </p>
-        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-        <cps-textarea
-          ngSkipHydration
-          label="Settings (JSON)"
-          hint="Patterns are RegExp sources; the one value transform is mask-order-ids."
-          [rows]="8"
-          [value]="draft()"
-          [error]="error()"
-          (valueChanged)="edit($event)" />
-      </div>
+          </ul>
+        }
+      </nav>
 
-      <div class="lab-card">
-        <h2>Mock RUM broker</h2>
+      <div class="lab-settings__picker">
         <cps-select
-          label="Answer /rum/init with"
-          [options]="modes"
+          label="Section"
+          [options]="picks"
           [returnObject]="false"
-          [value]="mode()"
+          [value]="current()"
+          [hideDetails]="true"
           width="26rem"
-          (valueChanged)="mode.set($event)" />
-        <p>
-          RUM's own telemetry: the library's default is errors, performance and
-          same-origin HTTP. With none, RUM records only page views, the session
-          start and the library's events.
-        </p>
-        <div class="lab-switches">
-          <cps-switch
-            label="The library's default"
-            [value]="telemetries() === null"
-            (valueChanged)="useDefault($event)" />
-        </div>
-        @if (telemetries(); as chosen) {
-          <cps-select
-            label="Telemetries"
-            placeholder="None"
-            [options]="telemetryOptions"
-            [returnObject]="false"
-            [multiple]="true"
-            [selectAll]="true"
-            [chips]="true"
-            [value]="chosen"
-            width="26rem"
-            (valueChanged)="telemetries.set($event)" />
-        }
-        <p>
-          The app monitor settings most worth trying; the JSON below has the
-          rest, and is what is sent.
-        </p>
-        <div class="lab-fields">
-          @for (field of brokerFields; track field.key) {
-            @switch (field.kind) {
-              @case ('switch') {
-                <cps-switch
-                  [label]="field.label"
-                  [value]="!!brokerSetting(field)"
-                  [disabled]="!brokerObject()"
-                  (valueChanged)="setBroker(field.key, $event)" />
-              }
-              @case ('number') {
-                <cps-input
-                  type="number"
-                  [label]="field.label"
-                  width="26rem"
-                  [value]="'' + brokerSetting(field)"
-                  [disabled]="!brokerObject()"
-                  (valueChanged)="setBrokerNumber(field.key, $event)" />
-              }
-              @case ('lines') {
-                <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-                <cps-textarea
-                  ngSkipHydration
-                  [label]="field.label"
-                  [rows]="2"
-                  width="26rem"
-                  [value]="
-                    list(brokerSetting(field)).join(
-                      '
-'
-                    )
-                  "
-                  [disabled]="!brokerObject()"
-                  (valueChanged)="setBrokerLines(field.key, $event)" />
-              }
-            }
-          }
-        </div>
-        <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-        <cps-textarea
-          ngSkipHydration
-          label="Laid over the app monitor config (JSON)"
-          width="26rem"
-          [rows]="3"
-          [value]="brokerConfig()"
-          [error]="brokerConfigError()"
-          (valueChanged)="brokerConfig.set($event)" />
-      </div>
-
-      <div class="lab-actions lab-apply-bar">
-        <cps-button label="Apply and reload" (clicked)="apply()" />
-        <cps-button
-          label="Back to the lab's settings"
-          type="outlined"
-          (clicked)="reset()" />
+          (valueChanged)="go($event)" />
       </div>
 
-      <div class="lab-card">
-        <h2>Debug flags</h2>
-        <p>
-          Console lines for what is sent. The library reads them on every event,
-          so they apply at once, without a reload.
-        </p>
-        <div class="lab-switches">
-          @for (flag of flags; track flag) {
-            <cps-switch
-              [label]="flag"
-              [value]="debug()[flag]"
-              (valueChanged)="setDebug(flag, $event)" />
+      <div class="lab-settings__content">
+        <router-outlet />
+
+        @if (draft.changes(); as changes) {
+          @if (changes.length) {
+            <div
+              class="lab-pending"
+              role="region"
+              aria-label="Changes not applied">
+              <p class="lab-pending__summary">
+                <span class="lab-settings__dot" aria-hidden="true"></span>
+                <strong
+                  >{{ changes.length }}
+                  {{ changes.length === 1 ? 'change' : 'changes' }} not
+                  applied</strong
+                >
+                <span class="lab-pending__list">{{ listed() }}</span>
+              </p>
+              <div class="lab-actions">
+                @if (current() !== overview) {
+                  <a
+                    class="lab-pending__review"
+                    routerLink="/settings"
+                    queryParamsHandling="preserve"
+                    >Review</a
+                  >
+                }
+                <cps-button
+                  label="Discard"
+                  type="outlined"
+                  (clicked)="draft.discard()" />
+                <cps-button
+                  label="Apply and reload"
+                  (clicked)="draft.apply()" />
+              </div>
+              @for (problem of draft.problems(); track problem.section.path) {
+                <p class="lab-pending__problem" role="alert">
+                  <a
+                    [routerLink]="['/settings', problem.section.path]"
+                    queryParamsHandling="preserve"
+                    >{{ problem.section.label }}</a
+                  >: {{ problem.message }}
+                </p>
+              }
+            </div>
           }
-        </div>
-      </div>
-
-      <div class="lab-card">
-        <h2>In effect</h2>
-        <pre
-          class="lab-readout"
-          tabindex="0"
-          role="region"
-          aria-label="Settings in effect"
-          >{{ effective }}</pre>
+        }
       </div>
-    </section>
+    </div>
   `
 })
 export class SettingsPage {
-  protected readonly flags = DEBUG_FLAGS;
-  protected readonly groups = LAB_FIELD_GROUPS;
-  protected readonly brokerFields = LAB_BROKER_FIELDS;
-  protected readonly destinations = DESTINATIONS;
-  protected readonly channels = CHANNELS;
-  protected readonly inspectorModes = INSPECTOR_MODES;
-  protected readonly modes = BROKER_MODES;
-  protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
-    label: t,
-    value: t
+  protected readonly draft = inject(LabSettingsDraft);
+  private readonly router = inject(Router);
+
+  protected readonly overview = OVERVIEW;
+  protected readonly areas = LAB_SETTINGS_AREAS.map((name) => ({
+    name,
+    id: `lab-settings-${name.toLowerCase().replace(/\W+/g, '-')}`,
+    sections: LAB_SETTINGS_SECTIONS.filter((section) => section.area === name)
   }));
 
-  private readonly window = inject(DOCUMENT).defaultView!;
-  private readonly options = inject(LAB_OPTIONS);
-  private readonly wire = inject(LabWire);
-
-  /** How the lab starts, to be: the load's own to begin with. */
-  protected readonly destination = signal(this.options.destination);
-  protected readonly channel = signal(this.options.channel);
-  protected readonly inspector = signal(this.options.inspector);
-  protected readonly telemetry = signal(this.options.telemetry);
-
-  /** The settings in effect, which the controls show until changed. */
-  private readonly inEffect: Record<string, Record<string, unknown>> = (() => {
-    const inspector = inject(UWT_EVENT_INSPECTOR_CONFIG);
-    return {
-      identity: {
-        ...inject(UWT_TELEMETRY_IDENTITY),
-        eventNamespace: inject(UWT_TELEMETRY_IDENTITY).eventNamespace ?? ''
-      },
-      scenarios: { ...inject(UWT_SCENARIO_TELEMETRY_CONFIG) },
-      logging: { levels: {}, ...inject(UWT_LOG_CONFIG) },
-      bi: { ...inject(UWT_BI_TELEMETRY_CONFIG) },
-      redaction: { ...inject(UWT_REDACT_CONFIG) },
-      inspector: {
-        maxEventsPerSection: inspector.maxEventsPerSection,
-        maxPayloadCharsInView: inspector.maxPayloadCharsInView,
-        shortcuts: inspector.shortcuts,
-        captureBeforeOpen: inspector.captureBeforeOpen
-      },
-      lab: { logBatching: false }
-    };
-  })();
-
-  /**
-   * What each section takes, of the types they take: the library's defaults
-   * over what is in effect, which an overlay in the address may have given
-   * a value of the wrong type.
-   */
-  private readonly known: Record<string, Record<string, unknown>> = (() => {
-    const library = UWT_DEFAULT_TELEMETRY_CONFIG;
-    const inspector = UWT_DEFAULT_INSPECTOR_CONFIG;
-    const defaults: Record<string, object> = {
-      identity: { eventNamespace: library.eventNamespace },
-      scenarios: library.scenario,
-      logging: library.logs,
-      bi: library.bi,
-      redaction: library.redact,
-      inspector: {
-        maxEventsPerSection: inspector.maxEventsPerSection,
-        maxPayloadCharsInView: inspector.maxPayloadCharsInView,
-        captureBeforeOpen: inspector.captureBeforeOpen
-      }
-    };
-    return Object.fromEntries(
-      Object.entries(this.inEffect).map(([section, values]) => [
-        section,
-        { ...values, ...defaults[section] }
-      ])
-    );
-  })();
-
-  /** The overlay being edited: the one in effect, to start with. */
-  protected readonly draft = signal(
-    JSON.stringify(this.options.config, null, 2)
-  );
-
-  protected readonly error = signal('');
-  /** The draft as an object, or `undefined` while it isn't one. */
-  protected readonly overlay = computed(() =>
-    parseJsonObject(this.draft().trim() || '{}')
+  protected readonly picks = [
+    { label: 'Overview', value: OVERVIEW },
+    ...LAB_SETTINGS_SECTIONS.map((section) => ({
+      label: `${section.area} › ${section.label}`,
+      value: section.path
+    }))
+  ];
+
+  protected readonly current = signal(sectionOf(this.router.url));
+  /** The sections with changes not applied. */
+  protected readonly changed = computed(
+    () => new Set(this.draft.changes().map((change) => change.section.path))
   );
 
-  /** The broker's answer to be, starting from the one it gives now. */
-  protected readonly mode = linkedSignal(() => this.wire.brokerMode());
-  protected readonly telemetries = linkedSignal(() => this.wire.telemetries());
-  protected readonly brokerConfig = linkedSignal(() =>
-    JSON.stringify(this.wire.brokerConfig())
+  protected readonly listed = computed(() =>
+    this.draft
+      .changes()
+      .map((change) => `${change.section.label} › ${change.label}`)
+      .join(', ')
   );
 
-  protected readonly brokerConfigError = signal('');
-
-  /** The broker's config as the draft has it, or `undefined` while it isn't an object. */
-  protected readonly brokerObject = computed(() =>
-    parseJsonObject(this.brokerConfig().trim() || '{}')
-  );
-
-  protected readonly debug = signal(this.readDebug());
-
-  /** What the library was given, read back from its tokens. */
-  protected readonly effective = JSON.stringify(
-    {
-      identity: inject(UWT_TELEMETRY_IDENTITY),
-      scenarios: inject(UWT_SCENARIO_TELEMETRY_CONFIG),
-      logging: inject(UWT_LOG_CONFIG),
-      bi: inject(UWT_BI_TELEMETRY_CONFIG),
-      redaction: inject(UWT_REDACT_CONFIG),
-      inspector: inject(UWT_EVENT_INSPECTOR_CONFIG)
-    },
-    readable,
-    2
-  );
-
-  protected selectOptions(field: LabField): { label: string; value: string }[] {
-    return field.kind === 'select' || field.kind === 'multi'
-      ? field.options
-      : [];
-  }
-
-  /**
-   * A list setting as text, for a control: what the draft has, or what is in
-   * effect, where a pattern is a `RegExp` and a transform a function.
-   */
-  protected list(value: unknown): string[] {
-    return (Array.isArray(value) ? value : []).map((item) =>
-      item instanceof RegExp
-        ? item.source
-        : typeof item === 'function'
-          ? item.name
-          : String(item)
-    );
-  }
-
-  protected levelsOf(value: unknown): Record<string, string> {
-    return value && typeof value === 'object' && !Array.isArray(value)
-      ? (value as Record<string, string>)
-      : {};
-  }
-
-  protected shortcutsOf(value: unknown): LabShortcut[] {
-    return Array.isArray(value) ? (value as LabShortcut[]) : [];
-  }
-
-  /** A broker setting as the draft has it, or what the app monitor does without one. */
-  protected brokerSetting(field: LabBrokerField): unknown {
-    return this.brokerObject()?.[field.key] ?? field.default;
-  }
-
-  /** Writes a control's setting into the broker's config, which shows it. */
-  protected setBroker(key: string, value: unknown): void {
-    const config = this.brokerObject();
-    if (config) {
-      this.brokerConfig.set(JSON.stringify({ ...config, [key]: value }));
-      this.brokerConfigError.set('');
-    }
-  }
-
-  protected setBrokerNumber(key: string, value: unknown): void {
-    const number = Number(value);
-    if (value !== '' && Number.isFinite(number)) {
-      this.setBroker(key, number);
-    }
-  }
-
-  protected setBrokerLines(key: string, text: string): void {
-    this.setBroker(
-      key,
-      text
-        .split('\n')
-        .map((line) => line.trim())
-        .filter(Boolean)
-    );
-  }
-
-  /** A text of lines into the list it stands for: blank lines are none. */
-  protected setLines(section: string, key: string, text: string): void {
-    this.set(
-      section,
-      key,
-      text
-        .split('\n')
-        .map((line) => line.trim())
-        .filter(Boolean)
-    );
-  }
-
-  /** A setting as the draft has it, or as it is in effect. */
-  protected setting(section: string, key: string): unknown {
-    const fromDraft = (
-      this.overlay()?.[section] as Record<string, unknown> | undefined
-    )?.[key];
-    return fromDraft ?? this.inEffect[section][key];
-  }
-
-  /** Writes a control's setting into the draft, which shows it. */
-  protected set(section: string, key: string, value: unknown): void {
-    const overlay = this.overlay();
-    if (!overlay) {
-      return;
-    }
-    const settings = overlay[section] as Record<string, unknown> | undefined;
-    this.edit(
-      JSON.stringify(
-        { ...overlay, [section]: { ...settings, [key]: value } },
-        null,
-        2
+  constructor() {
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed()
       )
-    );
-  }
-
-  protected setNumber(section: string, key: string, value: unknown): void {
-    const number = Number(value);
-    if (value !== '' && Number.isFinite(number)) {
-      this.set(section, key, number);
-    }
-  }
-
-  protected edit(draft: string): void {
-    this.draft.set(draft);
-    this.error.set('');
-  }
-
-  /** Back to the library's default, or a list to edit that starts there. */
-  protected useDefault(useDefault: boolean): void {
-    this.telemetries.set(useDefault ? null : DEFAULT_TELEMETRIES);
+      .subscribe(() => this.current.set(sectionOf(this.router.url)));
   }
 
-  /**
-   * Sets the broker, then reloads with the overlay — keeping the other
-   * startup options, which in-app links drop. Nothing changes while either
-   * is wrong.
-   */
-  protected async apply(): Promise<void> {
-    const overlay = this.overlay();
-    const problem = overlay
-      ? labCheckConfig(overlay, this.known)
-      : 'Not a JSON object.';
-    const brokerConfig = parseJsonObject(this.brokerConfig().trim() || '{}');
-    this.error.set(problem);
-    this.brokerConfigError.set(brokerConfig ? '' : 'Not a JSON object.');
-    if (problem || !overlay || !brokerConfig) {
-      return;
-    }
-    await this.wire.setBrokerMode(this.mode());
-    await this.wire.setTelemetries(this.telemetries());
-    await this.wire.setBrokerConfig(brokerConfig);
-    this.reload(overlay, {
-      destination: this.destination(),
-      channel: this.channel(),
-      inspector: this.inspector(),
-      telemetry: this.telemetry()
-    });
-  }
-
-  /** The lab's own settings, and the broker's default answer. */
-  protected async reset(): Promise<void> {
-    await this.wire.setBrokerMode('ok');
-    await this.wire.setTelemetries(null);
-    await this.wire.setBrokerConfig({});
-    this.reload({});
-  }
-
-  protected setDebug(flag: DebugFlag, on: boolean): void {
-    try {
-      if (on) {
-        this.window.localStorage.setItem(flag, 'true');
-      } else {
-        this.window.localStorage.removeItem(flag);
-      }
-    } catch {
-      // Storage blocked: the flags stay as they were.
-    }
-    this.debug.set(this.readDebug());
-  }
-
-  /** Starts the lab again, with `config` and how it is to start: as now, by default. */
-  private reload(
-    config: Record<string, unknown>,
-    start: Omit<LabOptions, 'config'> = this.options
-  ): void {
-    this.window.location.assign(
-      `${this.window.location.pathname}${labSearch({ ...start, config })}`
+  protected async go(section: string): Promise<void> {
+    await this.router.navigate(
+      ['/settings', ...(section === OVERVIEW ? [] : [section])],
+      { queryParamsHandling: 'preserve' }
     );
   }
-
-  /** As the library reads them: a list of logger names is not "on". */
-  private readDebug(): Record<DebugFlag, boolean> {
-    return {
-      debugScenario: uwtIsDebugEnabled('debugScenario'),
-      debugBI: uwtIsDebugEnabled('debugBI'),
-      debugLogger: uwtIsDebugEnabled('debugLogger')
-    };
-  }
-}
-
-/** RegExps and functions, readable in JSON. */
-function readable(_key: string, value: unknown): unknown {
-  if (value instanceof RegExp) {
-    return String(value);
-  }
-  return typeof value === 'function'
-    ? `ƒ ${value.name || '(anonymous)'}`
-    : value;
 }
diff --git a/projects/watchtower-lab/src/shell/pages/settings.routes.ts b/projects/watchtower-lab/src/shell/pages/settings.routes.ts
new file mode 100644
index 0000000..af282f2
--- /dev/null
+++ b/projects/watchtower-lab/src/shell/pages/settings.routes.ts
@@ -0,0 +1,26 @@
+import { Routes } from '@angular/router';
+import { LAB_SETTINGS_SECTIONS } from '../../lab/lab-settings-fields';
+import { SettingsOverviewPage } from './settings-overview.page';
+import { SettingsSectionPage } from './settings-section.page';
+import { SettingsPage } from './settings.page';
+
+/** Settings: its overview, and a page for each section, around what they share. */
+export const SETTINGS_ROUTES: Routes = [
+  {
+    path: '',
+    component: SettingsPage,
+    children: [
+      {
+        path: '',
+        title: 'Settings · Watchtower Lab',
+        component: SettingsOverviewPage
+      },
+      ...LAB_SETTINGS_SECTIONS.map((section) => ({
+        path: section.path,
+        title: `${section.label} · Settings · Watchtower Lab`,
+        component: SettingsSectionPage,
+        data: { section }
+      }))
+    ]
+  }
+];
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 56a2ea2..23d546a 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -19,7 +19,7 @@ import {
   RouterLinkActive,
   RouterOutlet
 } from '@angular/router';
-import { CpsTooltipDirective } from 'cps-ui-kit';
+import { CpsIconComponent, CpsTooltipDirective } from 'cps-ui-kit';
 import { filter } from 'rxjs';
 import { UwtTelemetrySink } from '@absaoss-cps/ngx-ui-watchtower';
 import { UwtEventInspectorService } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
@@ -27,7 +27,12 @@ import { LabLayout } from '../lab/lab-layout.service';
 import { LabRumCredentialsProvider } from '../lab/lab-rum-credentials.provider';
 import { LAB_USER_NAMES } from '../lab/lab-users';
 import { labTelemetriesLabel, LabWire } from '../lab/lab-wire.service';
-import { LAB_OPTIONS, SHELL_GROUPS, SHELL_PAGES } from './shell.config';
+import {
+  LAB_OPTIONS,
+  SHELL_GROUPS,
+  SHELL_PAGES,
+  SHELL_SETTINGS
+} from './shell.config';
 
 /**
  * The broker's setting as this page load got it, and the next load's when
@@ -46,6 +51,7 @@ function inEffect(now?: string, next?: string): string {
 @Component({
   selector: 'lab-root',
   imports: [
+    CpsIconComponent,
     CpsTooltipDirective,
     NgTemplateOutlet,
     RouterLink,
@@ -146,6 +152,19 @@ function inEffect(now?: string, next?: string): string {
                 }
               </ul>
             }
+            <ul class="lab-nav__pinned">
+              <li>
+                <a
+                  [routerLink]="settings.path"
+                  queryParamsHandling="preserve"
+                  routerLinkActive="active"
+                  ariaCurrentWhenActive="page"
+                  ><cps-icon icon="settings" size="small" />{{
+                    settings.label
+                  }}</a
+                >
+              </li>
+            </ul>
           </div>
         </nav>
         <main class="lab-main" id="lab-main" tabindex="-1">
@@ -201,11 +220,17 @@ export class ShellComponent {
     return `Signed in as ${name ? `${name} (${id})` : id}`;
   });
 
+  protected readonly settings = SHELL_SETTINGS;
+
   /** Whether the folded nav is open, on a narrow screen. */
   protected readonly navOpen = signal(false);
   private readonly path = signal('');
+  /** The page shown: Settings for any of its sections. */
   protected readonly current = computed(
-    () => SHELL_PAGES.find((page) => page.path === this.path())?.label ?? ''
+    () =>
+      [...SHELL_PAGES, SHELL_SETTINGS].find(
+        (page) => page.path === this.path().split('/')[0]
+      )?.label ?? ''
   );
 
   private readonly credentials = inject(LabRumCredentialsProvider);
diff --git a/projects/watchtower-lab/src/shell/shell.config.server.ts b/projects/watchtower-lab/src/shell/shell.config.server.ts
index f6bb9a6..1aac8b1 100644
--- a/projects/watchtower-lab/src/shell/shell.config.server.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.server.ts
@@ -15,6 +15,7 @@ const serverRoutes: ServerRoute[] = [
   { path: 'wire', renderMode: RenderMode.Client },
   // Its effective settings are the browser's, from the query string.
   { path: 'settings', renderMode: RenderMode.Client },
+  { path: 'settings/**', renderMode: RenderMode.Client },
   { path: '**', renderMode: RenderMode.Server }
 ];
 
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index af60764..252f712 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -104,21 +104,26 @@ export const SHELL_PAGES: {
     group: 'Tools',
     label: 'On the wire',
     load: () => import('./pages/wire.page').then((m) => m.WirePage)
-  },
-  {
-    path: 'settings',
-    group: 'Tools',
-    label: 'Settings',
-    load: () => import('./pages/settings.page').then((m) => m.SettingsPage)
   }
 ];
 
+/**
+ * Settings, at the foot of the nav, apart from the pages: it sets up the run
+ * they all share, rather than being one of them. A page for each section.
+ */
+export const SHELL_SETTINGS = { path: 'settings', label: 'Settings' };
+
 const routes: Routes = [
   ...SHELL_PAGES.map(({ path, label, load }) => ({
     path,
     title: `${label} · Watchtower Lab`,
     loadComponent: load
   })),
+  {
+    path: SHELL_SETTINGS.path,
+    loadChildren: () =>
+      import('./pages/settings.routes').then((m) => m.SETTINGS_ROUTES)
+  },
   { path: '**', redirectTo: 'scenarios' }
 ];
 
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index ecc4c6e..f39d999 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -93,15 +93,190 @@
   color: var(--cps-text-secondary);
 }
 
-.lab-apply-bar {
-  // Settings: in reach however far the page scrolls, above the status bar
-  // and any pane docked at the bottom.
+// Settings: its sections listed beside the one shown, or picked above it
+// where the list has no room.
+.lab-settings {
+  display: grid;
+  grid-template-columns: 14rem minmax(0, 1fr);
+  gap: 2rem;
+  align-items: start;
+}
+
+// In view as the section scrolls, below the header, scrolled on its own if
+// the window is short.
+.lab-settings__nav {
   position: sticky;
-  bottom: calc(2.25rem + var(--uwt-inspector-inset-bottom, 0px));
+  top: 5rem;
+  max-height: calc(100vh - 8.75rem - var(--uwt-inspector-inset-bottom, 0px));
+  overflow-y: auto;
+
+  // The dot at the row's end; past the shared rows' rule, which comes later.
+  ul a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+}
+
+.lab-settings__area {
+  margin: 1rem 0 0.25rem 1.25rem;
+  color: var(--cps-color-text-darkest);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+// A section with changes not applied, and the bar that lists them.
+.lab-settings__dot {
+  flex: none;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--cps-color-warn-darken2);
+}
+
+@media (forced-colors: active) {
+  .lab-settings__dot {
+    border: 0.25rem solid CanvasText;
+  }
+}
+
+.lab-settings__picker {
+  display: none;
+}
+
+// At least as tall as the window, so the bar sits at its foot under a short
+// section too.
+.lab-settings__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  min-height: calc(100vh - 8.75rem - var(--uwt-inspector-inset-bottom, 0px));
+}
+
+@container lab-main (max-width: 50rem) {
+  .lab-settings {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
+  }
+
+  .lab-settings__nav {
+    display: none;
+  }
+
+  .lab-settings__picker {
+    display: block;
+  }
+}
+
+.lab-settings__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.lab-settings__applies {
+  padding: 0.125rem 0.625rem;
+  border-radius: 1rem;
+  background-color: #eef1f6;
+  color: #3b4a63;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.lab-settings__notice {
+  padding: 0.625rem 0.875rem;
+  border-left: 0.25rem solid var(--cps-color-warn-darken2);
+  border-radius: 0.25rem;
+  background-color: var(--cps-color-warn-bg);
+}
+
+:is(.lab-settings__notice, .lab-changes, .lab-pending) a {
+  color: var(--cps-color-calm);
+  font-weight: 600;
+
+  &:focus-visible {
+    @include cps.focus-ring;
+  }
+}
+
+.lab-changes {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem 1rem;
+  }
+}
+
+.lab-changes__values {
+  color: var(--cps-text-secondary);
+  font:
+    0.85rem ui-monospace,
+    Menlo,
+    Consolas,
+    monospace;
+  overflow-wrap: anywhere;
+}
+
+// In reach however far the section scrolls, above the status bar and any
+// pane docked at the bottom.
+.lab-pending {
+  position: sticky;
+  bottom: calc(3.75rem + var(--uwt-inspector-inset-bottom, 0px));
   z-index: 5;
-  padding: 0.75rem 0;
-  border-top: 0.0625rem solid var(--cps-color-line-mid);
-  background-color: #f4f6f9;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  max-width: 64rem;
+  margin-top: auto;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+  border: 0.0625rem solid var(--cps-color-line-mid);
+  border-radius: 0.5rem;
+  background-color: #fff;
+  box-shadow: 0 0.375rem 1.25rem rgb(0 0 0 / 15%);
+}
+
+.lab-pending__summary {
+  display: flex;
+  flex: 1 1 18rem;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  margin: 0;
+
+  strong {
+    white-space: nowrap;
+  }
+}
+
+.lab-pending__list {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--cps-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lab-pending__review {
+  padding: 0 0.5rem;
+}
+
+.lab-pending__problem {
+  flex-basis: 100%;
+  margin: 0;
+  color: var(--cps-color-error);
 }
 
 .lab-main:focus {
@@ -307,12 +482,41 @@ html.lab-insets {
   grid-template-columns: 12rem minmax(0, 1fr);
 }
 
+// As tall as the window between the header and the status bar, above a pane
+// docked below, so Settings sits at its foot; scrolled on its own when the
+// pages need more room.
 .lab-nav {
   position: sticky;
   top: 3.5rem;
   align-self: start;
-  padding: 0.5rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 5.75rem - var(--uwt-inspector-inset-bottom, 0px));
+  overflow-y: auto;
+  padding-top: 0.5rem;
+
+  // Settings, apart from the pages.
+  .lab-nav__pinned {
+    margin-top: auto;
+    padding: 0.5rem 0;
+    border-top: 0.0625rem solid var(--cps-color-line-mid);
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  }
+}
+
+.lab-nav__pages {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
 
+// The rows of the side nav, and of Settings' list of its sections.
+:is(.lab-nav, .lab-settings__nav) {
   ul {
     display: flex;
     flex-direction: column;
@@ -364,7 +568,7 @@ html.lab-insets {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lab-nav a {
+  :is(.lab-nav, .lab-settings__nav) a {
     transition: none;
   }
 }
@@ -372,7 +576,7 @@ html.lab-insets {
 // Forced colours drop the tints: the selected row keeps its bar, in the
 // system's selection colour, and the bold text.
 @media (forced-colors: active) {
-  .lab-nav a {
+  :is(.lab-nav, .lab-settings__nav) a {
     border-left-color: Canvas;
 
     &.active {
@@ -410,6 +614,8 @@ html.lab-insets {
 
   .lab-nav {
     z-index: 5;
+    height: auto;
+    overflow: visible;
     padding: 0;
     border-bottom: 0.0625rem solid var(--cps-color-line-mid);
     background-color: #f4f6f9;

From 8c615c21c127d753b79c365ede4d6443a10587ff Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 16:10:42 +0100
Subject: [PATCH 48/51] show modified and not-applied settings with Reset and
 Undo, and link the header chips to their settings

---
 README.md                                     |  18 +-
 playwright/a11y.spec.ts                       |   4 +-
 playwright/identity.spec.ts                   |   5 +-
 playwright/settings.spec.ts                   | 132 ++++-
 .../watchtower-lab/src/lab/lab-options.ts     |  26 +
 .../src/lab/lab-setting-state.component.ts    |  45 ++
 .../src/lab/lab-settings-draft.service.ts     | 539 ++++++++++++++----
 .../src/shell/pages/settings-overview.page.ts |  49 +-
 .../src/shell/pages/settings-section.page.ts  | 230 ++++----
 .../src/shell/pages/settings.page.ts          |  37 +-
 .../src/shell/shell.component.ts              |  50 +-
 .../watchtower-lab/src/shell/shell.config.ts  |  25 +-
 projects/watchtower-lab/src/styles.scss       |  73 ++-
 13 files changed, 992 insertions(+), 241 deletions(-)
 create mode 100644 projects/watchtower-lab/src/lab/lab-setting-state.component.ts

diff --git a/README.md b/README.md
index b8faaa3..89ae824 100644
--- a/README.md
+++ b/README.md
@@ -90,13 +90,17 @@ redaction and Event Inspector. **Mock backend**: RUM broker and App monitor.
 **Diagnostics**: Debug flags, which apply at once. **Advanced**: Configuration
 as JSON, and the Effective configuration. A change waits, from whichever
 section, in a bar listing them all, until they are applied together with one
-reload, or discarded; the **Overview** reviews them. On a narrow screen the
-sections fold into a picker.
-
-The header's chips show how this load runs; where the broker is set
-differently for the next one, its chip says so: `broker: ok → null after
-reload`. On a narrow screen, or beside a docked pane, the chips fold behind
-**Run settings**, and the page list behind **Pages**.
+reload, or discarded. A setting says where it stands: **Not applied**, with
+Undo, or **Modified** from the lab's default, with the default and a Reset
+that waits to be applied too (a debug flag resets at once); the list counts
+each section's modified settings. The **Overview** lists both, to undo or
+reset each. On a narrow screen the sections fold into a picker.
+
+The header's chips show how this load runs, each a link to its setting;
+where the broker is set differently for the next one, its chip says so:
+`broker: ok → null after reload`. On a narrow screen, or beside a docked
+pane, the chips fold behind **Run settings**, and the page list behind
+**Pages**.
 The header's **Signed in** or **Signed out** only shows the state:
 **Identity** and the fragments both sign in and out.
 
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index cb8f099..8d0fd3a 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -79,10 +79,10 @@ for (const path of PAGES) {
   });
 }
 
-test('Settings with changes not applied, marked in its list and its bar: no violations', async ({
+test('Settings with settings modified and changes not applied, marked in its list, its fields and its bar: no violations', async ({
   page
 }) => {
-  await openLab(page, 'settings/scenarios');
+  await openLab(page, 'settings/scenarios', { scenarios: { maxSteps: 7 } });
   await page
     .locator('cps-switch', { hasText: 'Lifecycle step events' })
     .locator('label.cps-switch')
diff --git a/playwright/identity.spec.ts b/playwright/identity.spec.ts
index 9aa7cdc..6875a0a 100644
--- a/playwright/identity.spec.ts
+++ b/playwright/identity.spec.ts
@@ -82,5 +82,8 @@ test('the header shows who is signed in, from any page, and is no link', async (
   await expect(page.locator('.cps-tooltip-content')).toHaveText(
     `Signed in as Anna (${ANNA})`
   );
-  await expect(page.locator('.lab-header').getByRole('link')).toHaveCount(0);
+  // A status, not a link; the run's chips beside it are links into Settings.
+  await expect(
+    page.locator('.lab-header').getByRole('link', { name: /Signed (in|out)/ })
+  ).toHaveCount(0);
 });
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index 76ccbc3..aef38d4 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -110,10 +110,11 @@ test('each section of Settings is a page of its own, listed by area, saying how
     Diagnostics: ['Debug flags'],
     Advanced: ['Configuration as JSON', 'Effective configuration']
   };
+  // Each named first: Delivery goes on with its marks, as noop is modified.
   for (const [area, labels] of Object.entries(areas)) {
     await expect(
       sections.getByRole('list', { name: area }).getByRole('link')
-    ).toHaveText(labels);
+    ).toHaveText(labels.map((label) => new RegExp(`^${label}`)));
   }
 
   const main = page.locator('lab-root main');
@@ -216,6 +217,135 @@ test('on a narrow screen, the sections of Settings fold into a picker', async ({
   );
 });
 
+test("a setting other than the lab's default is marked, with its default and a Reset that waits to be applied", async ({
+  page
+}) => {
+  await openLab(page, 'settings/bi-events', { bi: { dedupWindowMs: 0 } });
+  const field = page.locator('.lab-field', { hasText: 'BI dedup window' });
+  await expect(field).toContainText('Modified');
+  await expect(field).toContainText('Lab default: 400');
+  await expect(
+    page
+      .getByRole('navigation', { name: 'Settings sections' })
+      .getByRole('link', { name: 'BI events (1 modified)' })
+  ).toBeVisible();
+
+  await field
+    .getByRole('button', {
+      name: 'Reset BI dedup window, ms to the lab default'
+    })
+    .click();
+  await expect(field).toContainText('Not applied');
+  // The control shows what the next load will have: the lab's default.
+  await expect(field.locator('input')).toHaveValue('400');
+  await expect(pending(page)).toContainText('BI events › BI dedup window, ms');
+  await field.getByRole('button', { name: 'Undo BI dedup window, ms' }).click();
+  await expect(pending(page)).toHaveCount(0);
+  await expect(field).toContainText('Modified');
+  await expect(field.locator('input')).toHaveValue('0');
+
+  await field.getByRole('button', { name: /^Reset/ }).click();
+  await applyAndReload(page);
+  await expect(page.locator('.lab-header')).not.toContainText('config:');
+  await expect(
+    page.locator('.lab-field', { hasText: 'BI dedup window' })
+  ).not.toContainText('Modified');
+});
+
+test("the overview lists what differs from the lab's defaults: a debug flag resets at once, the rest wait to be applied", async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerMode('null');
+  await page.addInitScript(() => localStorage.setItem('debugBI', 'true'));
+  await openLab(page, 'settings?destination=noop', {
+    logging: { minLevel: 'warn' }
+  });
+  const review = page.locator('lab-settings-overview');
+  const modified = review.locator('.lab-card', {
+    hasText: "Different from the lab's defaults"
+  });
+  for (const text of [
+    'Delivery › Destination',
+    'rum → noop',
+    'Logging › Minimum level',
+    'log → warn',
+    'RUM broker › Answer /rum/init with',
+    'ok → null',
+    'Debug flags › debugBI',
+    'off → on'
+  ]) {
+    await expect(modified).toContainText(text);
+  }
+
+  await modified
+    .getByRole('button', { name: 'Reset debugBI to the lab default' })
+    .click();
+  await expect(modified).not.toContainText('debugBI');
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem('debugBI')))
+    .toBeNull();
+  await expect(pending(page)).toHaveCount(0);
+
+  await modified
+    .getByRole('button', { name: 'Reset Destination to the lab default' })
+    .click();
+  const waiting = review.locator('.lab-card', { hasText: 'Not applied yet' });
+  await expect(waiting).toContainText('Delivery › Destination');
+  await expect(waiting).toContainText('noop → rum');
+  await waiting.getByRole('button', { name: 'Undo Destination' }).click();
+  await expect(pending(page)).toHaveCount(0);
+});
+
+test("the mock broker's answer, other than its default, is marked in its sections", async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerMode('null');
+  await backend.setTelemetries(['errors']);
+  await backend.setBrokerConfig({ sessionSampleRate: 0.5 });
+  await openLab(page, 'settings/rum-broker');
+  await expect(
+    page.locator('.lab-field', { hasText: 'Answer /rum/init with' })
+  ).toContainText('Lab default: ok');
+  await expect(
+    page.locator('.lab-field', { hasText: 'Telemetries' })
+  ).toContainText("Lab default: the library's default");
+  const sections = page.getByRole('navigation', { name: 'Settings sections' });
+  await expect(
+    sections.getByRole('link', { name: 'RUM broker (2 modified)' })
+  ).toBeVisible();
+  await expect(
+    sections.getByRole('link', { name: 'App monitor (1 modified)' })
+  ).toBeVisible();
+
+  await settingsSection(page, 'App monitor');
+  await expect(
+    page.locator('.lab-field', { hasText: 'Session sample rate' })
+  ).toContainText('Lab default: 1');
+});
+
+test("the header's chips lead to their settings", async ({ page }) => {
+  await openLab(page, 'bi', { bi: { dedupWindowMs: 0 } });
+  const header = page.locator('.lab-header');
+  const title = page.locator('lab-root main h1').first();
+  await header.getByRole('link', { name: 'destination: rum' }).click();
+  await expect(page).toHaveURL(/\/settings\/delivery\?config=/);
+  await expect(title).toHaveText('Delivery');
+  await header.getByRole('link', { name: 'broker: ok' }).click();
+  await expect(title).toHaveText('RUM broker');
+  await header.getByRole('link', { name: 'config: custom' }).click();
+  await expect(title).toHaveText('Settings');
+
+  // Folded behind Run settings, they lead there too, and fold away.
+  await page.setViewportSize({ width: 1024, height: 768 });
+  await header.getByText('Run settings').click();
+  const panel = header.locator('.lab-run-settings__panel');
+  await panel.getByRole('link', { name: 'telemetry: on' }).click();
+  await expect(title).toHaveText('Delivery');
+  await expect(panel).toBeHidden();
+});
+
 test('Settings applies an overlay, shows it in effect, and goes back', async ({
   page
 }) => {
diff --git a/projects/watchtower-lab/src/lab/lab-options.ts b/projects/watchtower-lab/src/lab/lab-options.ts
index 30ffdf9..f02c759 100644
--- a/projects/watchtower-lab/src/lab/lab-options.ts
+++ b/projects/watchtower-lab/src/lab/lab-options.ts
@@ -46,6 +46,32 @@ export interface LabConfig {
   lab?: { logBatching?: boolean };
 }
 
+/**
+ * The lab's own settings, laid over the library's defaults: a {@link LabConfig}
+ * is laid over these. Settings shows them as the lab's defaults.
+ */
+export const LAB_DEFAULTS = {
+  identity: {
+    application: 'watchtower-lab',
+    environment: 'lab',
+    version: '1.0.0'
+  },
+  logging: {
+    minLevel: 'log',
+    levels: { noisy: 'warn' },
+    mirrorErrorsToRum: true
+  },
+  scenarios: { defaultTimeoutMs: 30_000 },
+  redaction: {
+    scanValuePatterns: ['email', 'creditCard', 'ssn', 'ipv4', 'phone']
+  }
+} satisfies {
+  identity: UwtTelemetryIdentity;
+  logging: Partial<UwtLogConfig>;
+  scenarios: Partial<UwtScenarioTelemetryConfig>;
+  redaction: Partial<UwtRedactConfig>;
+};
+
 /**
  * How the lab was started, read once from the query string — the way an app
  * picks its configuration at startup:
diff --git a/projects/watchtower-lab/src/lab/lab-setting-state.component.ts b/projects/watchtower-lab/src/lab/lab-setting-state.component.ts
new file mode 100644
index 0000000..caff2c5
--- /dev/null
+++ b/projects/watchtower-lab/src/lab/lab-setting-state.component.ts
@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CpsButtonComponent } from 'cps-ui-kit';
+import { LabSettingsEntry } from './lab-settings-draft.service';
+
+/**
+ * Under a setting's control, where it stands: changed and not applied yet,
+ * with Undo; or otherwise than the lab's default, with the default and a
+ * Reset. Nothing while it is as applied, and as by default.
+ */
+@Component({
+  selector: 'lab-setting-state',
+  imports: [CpsButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'lab-setting-state' },
+  template: `
+    @if (change(); as change) {
+      <span class="lab-setting-state__tag lab-setting-state__tag--pending"
+        >Not applied</span
+      >
+      <cps-button
+        type="borderless"
+        size="xsmall"
+        label="Undo"
+        [ariaLabel]="'Undo ' + change.label"
+        (clicked)="change.revert()" />
+    } @else if (modified(); as modified) {
+      <span class="lab-setting-state__tag">Modified</span>
+      <span class="lab-setting-state__default"
+        >Lab default: {{ modified.from }}</span
+      >
+      <cps-button
+        type="borderless"
+        size="xsmall"
+        label="Reset"
+        [ariaLabel]="'Reset ' + modified.label + ' to the lab default'"
+        (clicked)="modified.revert()" />
+    }
+  `
+})
+export class LabSettingStateComponent {
+  /** The setting's change not applied yet, if it has one. */
+  readonly change = input<LabSettingsEntry>();
+  /** How it differs from the lab's default, if it does. */
+  readonly modified = input<LabSettingsEntry>();
+}
diff --git a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
index 223ee95..6c65390 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
@@ -17,11 +17,18 @@ import {
 } from '@absaoss-cps/ngx-ui-watchtower';
 import {
   UWT_DEFAULT_INSPECTOR_CONFIG,
+  UWT_DEFAULT_INSPECTOR_SHORTCUTS,
   UWT_EVENT_INSPECTOR_CONFIG
 } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
 import { labCheckConfig } from './lab-config-check';
 import { parseJsonObject } from './lab-json';
-import { LAB_OPTIONS, labSearch, LabOptions } from './lab-options';
+import {
+  LAB_DEFAULTS,
+  LAB_OPTIONS,
+  labOptions,
+  labSearch,
+  LabOptions
+} from './lab-options';
 import {
   LAB_SETTINGS_SECTIONS,
   LabField,
@@ -29,7 +36,12 @@ import {
   LabSettingsSection
 } from './lab-settings-fields';
 import { labDescribeShortcut, LabShortcut } from './lab-shortcuts.component';
-import { labTelemetriesLabel, LabTelemetry, LabWire } from './lab-wire.service';
+import {
+  LabBrokerMode,
+  labTelemetriesLabel,
+  LabTelemetry,
+  LabWire
+} from './lab-wire.service';
 
 export const LAB_DEBUG_FLAGS = [
   'debugScenario',
@@ -41,15 +53,28 @@ export type LabDebugFlag = (typeof LAB_DEBUG_FLAGS)[number];
 /** How the lab starts: its options, but the overlay. */
 type LabStart = Omit<LabOptions, 'config'>;
 
-/** A change made in Settings and not applied yet. */
-export interface LabSettingsChange {
-  /** The section it is made in. */
+/**
+ * A setting in one of Settings' lists: changed and not applied yet, or one
+ * this load runs with otherwise than the lab's default.
+ */
+export interface LabSettingsEntry {
+  /** Where it is kept: {@link labSettingId} for a field's. */
+  id: string;
+  /** The section it is in. */
   section: LabSettingsSection;
   /** The setting, as people read it. */
   label: string;
-  /** As applied, and as it will be; both empty when the JSON isn't an object. */
+  /**
+   * Not applied: as applied, and as it will be. Modified: the lab's default,
+   * and as it is. Both empty when the JSON isn't an object.
+   */
   from: string;
   to: string;
+  /**
+   * Takes it back: a change to what is applied; a modified setting to the
+   * lab's default, which then waits to be applied — a debug flag at once.
+   */
+  revert: () => void;
 }
 
 /** Why Apply didn't go ahead, and the section to fix it in. */
@@ -58,22 +83,56 @@ export interface LabSettingsProblem {
   message: string;
 }
 
+/** Where a field is kept: `logging.minLevel`, `start.destination`, `broker.allowCookies`. */
+export function labSettingId(field: LabField): string {
+  return `${field.section}.${field.key}`;
+}
+
 /** The library's default telemetries, where an edited list starts. */
 const DEFAULT_TELEMETRIES: LabTelemetry[] = ['errors', 'performance', 'http'];
 
 const JSON_SECTION = labSettingsSection('json');
 const BROKER_SECTION = labSettingsSection('rum-broker');
 const MONITOR_SECTION = labSettingsSection('app-monitor');
+const DEBUG_SECTION = labSettingsSection('debug-flags');
 
 /** Each field, by where it is kept, with the section it is in. */
 const FIELDS = new Map(
   LAB_SETTINGS_SECTIONS.flatMap((section) =>
     section.fields.map(
-      (field) => [`${field.section}.${field.key}`, { field, section }] as const
+      (field) => [labSettingId(field), { field, section }] as const
     )
   )
 );
 
+/** How the lab starts with no options in the address. */
+const START_DEFAULTS = startOf(labOptions(''));
+
+/** Each overlay section's settings with no `?config=`: the lab's own, over the library's defaults. */
+const OVERLAY_DEFAULTS: Record<string, Record<string, unknown>> = {
+  identity: {
+    eventNamespace: UWT_DEFAULT_TELEMETRY_CONFIG.eventNamespace,
+    ...LAB_DEFAULTS.identity
+  },
+  scenarios: {
+    ...UWT_DEFAULT_TELEMETRY_CONFIG.scenario,
+    ...LAB_DEFAULTS.scenarios
+  },
+  logging: { ...UWT_DEFAULT_TELEMETRY_CONFIG.logs, ...LAB_DEFAULTS.logging },
+  bi: { ...UWT_DEFAULT_TELEMETRY_CONFIG.bi },
+  redaction: {
+    ...UWT_DEFAULT_TELEMETRY_CONFIG.redact,
+    ...LAB_DEFAULTS.redaction
+  },
+  inspector: {
+    maxEventsPerSection: UWT_DEFAULT_INSPECTOR_CONFIG.maxEventsPerSection,
+    maxPayloadCharsInView: UWT_DEFAULT_INSPECTOR_CONFIG.maxPayloadCharsInView,
+    captureBeforeOpen: UWT_DEFAULT_INSPECTOR_CONFIG.captureBeforeOpen,
+    shortcuts: UWT_DEFAULT_INSPECTOR_SHORTCUTS
+  },
+  lab: { logBatching: false }
+};
+
 /**
  * What Settings will apply, edited in any of its sections: how the lab
  * starts, the library's settings as a `?config=` overlay, and the mock
@@ -85,6 +144,8 @@ export class LabSettingsDraft {
   private readonly window = inject(DOCUMENT).defaultView!;
   private readonly options = inject(LAB_OPTIONS);
   private readonly wire = inject(LabWire);
+  /** The overlay this load was started with. */
+  private readonly applied = this.options.config as Record<string, unknown>;
 
   /** How the lab starts, to be: the load's own to begin with. */
   readonly start = signal<LabStart>(startOf(this.options));
@@ -170,20 +231,36 @@ export class LabSettingsDraft {
       : [])
   ]);
 
+  readonly debug = signal(this.readDebug());
+
   /** What applying would change, in the order of the sections. */
-  readonly changes = computed<LabSettingsChange[]>(() =>
-    [
+  readonly changes = computed(() =>
+    bySection([
       ...this.startChanges(),
       ...this.overlayChanges(),
       ...this.brokerChanges()
-    ].sort(
-      (a, b) =>
-        LAB_SETTINGS_SECTIONS.indexOf(a.section) -
-        LAB_SETTINGS_SECTIONS.indexOf(b.section)
-    )
+    ])
   );
 
-  readonly debug = signal(this.readDebug());
+  /** What this load runs with otherwise than the lab's defaults. */
+  readonly modified = computed(() =>
+    bySection([
+      ...this.startModified(),
+      ...this.overlayModified(),
+      ...this.brokerModified(),
+      ...this.debugModified()
+    ])
+  );
+
+  /** The changes not applied, by their setting's id. */
+  readonly changeById = computed(
+    () => new Map(this.changes().map((entry) => [entry.id, entry]))
+  );
+
+  /** The modified settings, by their id. */
+  readonly modifiedById = computed(
+    () => new Map(this.modified().map((entry) => [entry.id, entry]))
+  );
 
   /** What the library was given, read back from its tokens. */
   readonly effective = JSON.stringify(
@@ -199,19 +276,27 @@ export class LabSettingsDraft {
     2
   );
 
-  /** A field's value: as the draft has it, or as it is without one. */
+  /**
+   * A field's value as the next load will have it: as the draft has it, as
+   * it is in effect where neither sets it, or the lab's default where the
+   * draft takes it out.
+   */
   value(field: LabField): unknown {
     switch (field.section) {
       case 'start':
         return this.start()[field.key as keyof LabStart];
       case 'broker':
         return this.brokerObject()?.[field.key] ?? field.default;
-      default:
-        return (
-          (this.overlay()?.[field.section] as Record<string, unknown>)?.[
-            field.key
-          ] ?? this.inEffect[field.section][field.key]
-        );
+      default: {
+        const { section, key } = field;
+        const drafted = settingIn(this.overlay(), section, key);
+        if (drafted !== undefined) {
+          return drafted;
+        }
+        return settingIn(this.applied, section, key) === undefined
+          ? this.inEffect[section][key]
+          : own(OVERLAY_DEFAULTS, section)?.[key];
+      }
     }
   }
 
@@ -229,27 +314,15 @@ export class LabSettingsDraft {
 
   /** Writes a control's value into the draft, which shows it. */
   set(field: LabField, value: unknown): void {
-    if (field.section === 'start') {
-      this.start.update((start) => ({ ...start, [field.key]: value }));
-      return;
-    }
-    if (field.section === 'broker') {
-      const config = this.brokerObject();
-      if (config) {
-        this.editBroker(JSON.stringify({ ...config, [field.key]: value }));
-      }
-      return;
-    }
-    const overlay = this.overlay();
-    if (overlay) {
-      const settings = overlay[field.section] as Record<string, unknown>;
-      this.editOverlay(
-        JSON.stringify(
-          { ...overlay, [field.section]: { ...settings, [field.key]: value } },
-          null,
-          2
-        )
-      );
+    switch (field.section) {
+      case 'start':
+        this.setStart(field.key as keyof LabStart, value);
+        return;
+      case 'broker':
+        this.putBroker(field.key, value);
+        return;
+      default:
+        this.putOverlay(field.section, field.key, value);
     }
   }
 
@@ -336,19 +409,25 @@ export class LabSettingsDraft {
     this.debug.set(this.readDebug());
   }
 
-  private startChanges(): LabSettingsChange[] {
+  private startChanges(): LabSettingsEntry[] {
     const start = this.start();
-    return (Object.keys(start) as (keyof LabStart)[])
+    return startKeys()
       .filter((key) => start[key] !== this.options[key])
-      .map((key) => {
-        const { field, section } = FIELDS.get(`start.${key}`)!;
-        return {
-          section,
-          label: field.label,
-          from: show(this.options[key], field),
-          to: show(start[key], field)
-        };
-      });
+      .map((key) =>
+        this.startEntry(key, this.options[key], start[key], () =>
+          this.setStart(key, this.options[key])
+        )
+      );
+  }
+
+  private startModified(): LabSettingsEntry[] {
+    return startKeys()
+      .filter((key) => this.options[key] !== START_DEFAULTS[key])
+      .map((key) =>
+        this.startEntry(key, START_DEFAULTS[key], this.options[key], () =>
+          this.setStart(key, START_DEFAULTS[key])
+        )
+      );
   }
 
   /**
@@ -356,26 +435,30 @@ export class LabSettingsDraft {
    * already is, unset before, is no change; a section the lab doesn't take,
    * or one that isn't an object, is the JSON's to show.
    */
-  private overlayChanges(): LabSettingsChange[] {
+  private overlayChanges(): LabSettingsEntry[] {
     const draft = this.overlay();
     if (!draft) {
-      return [notAnObject(JSON_SECTION)];
+      return [
+        notAnObject('json', JSON_SECTION, () =>
+          this.editOverlay(this.appliedText())
+        )
+      ];
     }
-    const applied = this.options.config as Record<string, unknown>;
-    const changes: LabSettingsChange[] = [];
+    const applied = this.applied;
+    const entries: LabSettingsEntry[] = [];
     for (const name of keysOf(applied, draft)) {
-      const inEffect = Object.hasOwn(this.inEffect, name)
-        ? this.inEffect[name]
-        : undefined;
+      const inEffect = own(this.inEffect, name);
       const before = applied[name] ?? {};
       const after = draft[name] ?? {};
       if (!inEffect || !isObject(before) || !isObject(after)) {
         if (!same(applied[name], draft[name])) {
-          changes.push({
+          entries.push({
+            id: name,
             section: JSON_SECTION,
             label: name,
             from: show(applied[name]),
-            to: show(draft[name])
+            to: show(draft[name]),
+            revert: () => this.putOverlaySection(name, applied[name])
           });
         }
         continue;
@@ -388,40 +471,72 @@ export class LabSettingsDraft {
         ) {
           continue;
         }
-        const found = FIELDS.get(`${name}.${key}`);
-        changes.push({
-          section: found?.section ?? JSON_SECTION,
-          label: found?.field.label ?? `${name}.${key}`,
-          from: show(was, found?.field),
-          to: show(after[key], found?.field)
+        entries.push(
+          this.overlayEntry(
+            name,
+            key,
+            was,
+            after[key] ?? own(OVERLAY_DEFAULTS, name)?.[key],
+            () => this.putOverlay(name, key, before[key])
+          )
+        );
+      }
+    }
+    return entries;
+  }
+
+  /** The overlay's settings this load runs with otherwise than the lab's defaults. */
+  private overlayModified(): LabSettingsEntry[] {
+    const entries: LabSettingsEntry[] = [];
+    for (const [name, settings] of Object.entries(this.applied)) {
+      const defaults = own(OVERLAY_DEFAULTS, name);
+      if (!defaults || !isObject(settings)) {
+        entries.push({
+          id: name,
+          section: JSON_SECTION,
+          label: name,
+          from: show(undefined),
+          to: show(settings),
+          revert: () => this.putOverlaySection(name, undefined)
         });
+        continue;
+      }
+      for (const [key, value] of Object.entries(settings)) {
+        if (!same(value, defaults[key])) {
+          entries.push(
+            this.overlayEntry(name, key, defaults[key], value, () =>
+              this.putOverlay(name, key, undefined)
+            )
+          );
+        }
       }
     }
-    return changes;
+    return entries;
   }
 
   /** The broker's answer, set otherwise than the server has it. */
-  private brokerChanges(): LabSettingsChange[] {
-    const changes: LabSettingsChange[] = [];
-    if (this.mode() !== this.wire.brokerMode()) {
-      changes.push({
-        section: BROKER_SECTION,
-        label: 'Answer /rum/init with',
-        from: this.wire.brokerMode(),
-        to: this.mode()
-      });
+  private brokerChanges(): LabSettingsEntry[] {
+    const entries: LabSettingsEntry[] = [];
+    const mode = this.wire.brokerMode();
+    if (this.mode() !== mode) {
+      entries.push(modeEntry(mode, this.mode(), () => this.mode.set(mode)));
     }
-    if (!same(this.telemetries(), this.wire.telemetries())) {
-      changes.push({
-        section: BROKER_SECTION,
-        label: 'Telemetries',
-        from: labTelemetriesLabel(this.wire.telemetries()),
-        to: labTelemetriesLabel(this.telemetries())
-      });
+    const telemetries = this.wire.telemetries();
+    if (!same(this.telemetries(), telemetries)) {
+      entries.push(
+        telemetriesEntry(telemetries, this.telemetries(), () =>
+          this.telemetries.set(telemetries)
+        )
+      );
     }
     const draft = this.brokerObject();
     if (!draft) {
-      return [...changes, notAnObject(MONITOR_SECTION)];
+      return [
+        ...entries,
+        notAnObject('broker-json', MONITOR_SECTION, () =>
+          this.editBroker(JSON.stringify(this.wire.brokerConfig()))
+        )
+      ];
     }
     const applied = this.wire.brokerConfig();
     for (const key of keysOf(applied, draft)) {
@@ -435,14 +550,139 @@ export class LabSettingsDraft {
       ) {
         continue;
       }
-      changes.push({
-        section: MONITOR_SECTION,
-        label: field?.label ?? key,
-        from: show(was, field),
-        to: show(draft[key], field)
-      });
+      entries.push(
+        brokerEntry(key, was, draft[key] ?? field?.default, () =>
+          this.putBroker(key, applied[key])
+        )
+      );
+    }
+    return entries;
+  }
+
+  /** The broker's answer, as the server has it, otherwise than by default. */
+  private brokerModified(): LabSettingsEntry[] {
+    const entries: LabSettingsEntry[] = [];
+    const mode = this.wire.brokerMode();
+    if (mode !== 'ok') {
+      entries.push(modeEntry('ok', mode, () => this.mode.set('ok')));
+    }
+    const telemetries = this.wire.telemetries();
+    if (telemetries !== null) {
+      entries.push(
+        telemetriesEntry(null, telemetries, () => this.telemetries.set(null))
+      );
+    }
+    for (const [key, value] of Object.entries(this.wire.brokerConfig())) {
+      const field = FIELDS.get(`broker.${key}`)?.field;
+      if (!field || !same(value, field.default)) {
+        entries.push(
+          brokerEntry(key, field?.default, value, () =>
+            this.putBroker(key, undefined)
+          )
+        );
+      }
+    }
+    return entries;
+  }
+
+  /** The debug flags that are on: off by default, and back off at once. */
+  private debugModified(): LabSettingsEntry[] {
+    const debug = this.debug();
+    return LAB_DEBUG_FLAGS.filter((flag) => debug[flag]).map((flag) => ({
+      id: `debug.${flag}`,
+      section: DEBUG_SECTION,
+      label: flag,
+      from: 'off',
+      to: 'on',
+      revert: () => this.setDebug(flag, false)
+    }));
+  }
+
+  private startEntry(
+    key: keyof LabStart,
+    from: unknown,
+    to: unknown,
+    revert: () => void
+  ): LabSettingsEntry {
+    const { field, section } = FIELDS.get(`start.${key}`)!;
+    return {
+      id: labSettingId(field),
+      section,
+      label: field.label,
+      from: show(from, field),
+      to: show(to, field),
+      revert
+    };
+  }
+
+  private overlayEntry(
+    name: string,
+    key: string,
+    from: unknown,
+    to: unknown,
+    revert: () => void
+  ): LabSettingsEntry {
+    const found = FIELDS.get(`${name}.${key}`);
+    return {
+      id: `${name}.${key}`,
+      section: found?.section ?? JSON_SECTION,
+      label: found?.field.label ?? `${name}.${key}`,
+      from: show(from, found?.field),
+      to: show(to, found?.field),
+      revert
+    };
+  }
+
+  private setStart(key: keyof LabStart, value: unknown): void {
+    this.start.update((start) => ({ ...start, [key]: value }));
+  }
+
+  /**
+   * Sets one of the overlay's settings in the draft; `undefined` takes it
+   * out, and its section with it once empty.
+   */
+  private putOverlay(name: string, key: string, value: unknown): void {
+    const overlay = this.overlay();
+    if (!overlay) {
+      return;
+    }
+    const current = overlay[name];
+    const settings = isObject(current) ? current : {};
+    const next =
+      value === undefined
+        ? without(settings, key)
+        : { ...settings, [key]: value };
+    this.putOverlaySection(name, Object.keys(next).length ? next : undefined);
+  }
+
+  /** Sets a whole section of the overlay in the draft; `undefined` takes it out. */
+  private putOverlaySection(name: string, value: unknown): void {
+    const overlay = this.overlay();
+    if (overlay) {
+      this.editOverlay(
+        JSON.stringify(
+          value === undefined
+            ? without(overlay, name)
+            : { ...overlay, [name]: value },
+          null,
+          2
+        )
+      );
+    }
+  }
+
+  /** Sets one of the broker's settings in the draft; `undefined` takes it out. */
+  private putBroker(key: string, value: unknown): void {
+    const config = this.brokerObject();
+    if (config) {
+      this.editBroker(
+        JSON.stringify(
+          value === undefined
+            ? without(config, key)
+            : { ...config, [key]: value }
+        )
+      );
     }
-    return changes;
   }
 
   private appliedText(): string {
@@ -469,18 +709,121 @@ export class LabSettingsDraft {
   }
 }
 
-function startOf({ destination, telemetry, channel, inspector }: LabOptions) {
+function startOf({
+  destination,
+  telemetry,
+  channel,
+  inspector
+}: LabOptions): LabStart {
   return { destination, telemetry, channel, inspector };
 }
 
-function notAnObject(section: LabSettingsSection): LabSettingsChange {
-  return { section, label: 'Not a JSON object yet', from: '', to: '' };
+function startKeys(): (keyof LabStart)[] {
+  return Object.keys(START_DEFAULTS) as (keyof LabStart)[];
+}
+
+function modeEntry(
+  from: LabBrokerMode,
+  to: LabBrokerMode,
+  revert: () => void
+): LabSettingsEntry {
+  return {
+    id: 'rum.mode',
+    section: BROKER_SECTION,
+    label: 'Answer /rum/init with',
+    from,
+    to,
+    revert
+  };
+}
+
+function telemetriesEntry(
+  from: readonly LabTelemetry[] | null,
+  to: readonly LabTelemetry[] | null,
+  revert: () => void
+): LabSettingsEntry {
+  const text = (telemetries: readonly LabTelemetry[] | null) =>
+    telemetries === null
+      ? "the library's default"
+      : labTelemetriesLabel(telemetries);
+  return {
+    id: 'rum.telemetries',
+    section: BROKER_SECTION,
+    label: 'Telemetries',
+    from: text(from),
+    to: text(to),
+    revert
+  };
+}
+
+function brokerEntry(
+  key: string,
+  from: unknown,
+  to: unknown,
+  revert: () => void
+): LabSettingsEntry {
+  const field = FIELDS.get(`broker.${key}`)?.field;
+  return {
+    id: `broker.${key}`,
+    section: MONITOR_SECTION,
+    label: field?.label ?? key,
+    from: show(from, field),
+    to: show(to, field),
+    revert
+  };
+}
+
+function notAnObject(
+  id: string,
+  section: LabSettingsSection,
+  revert: () => void
+): LabSettingsEntry {
+  return {
+    id,
+    section,
+    label: 'Not a JSON object yet',
+    from: '',
+    to: '',
+    revert
+  };
+}
+
+/** In the order of the sections, and of the settings within each. */
+function bySection(entries: LabSettingsEntry[]): LabSettingsEntry[] {
+  return entries.sort(
+    (a, b) =>
+      LAB_SETTINGS_SECTIONS.indexOf(a.section) -
+      LAB_SETTINGS_SECTIONS.indexOf(b.section)
+  );
 }
 
 function isObject(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object' && !Array.isArray(value);
 }
 
+/** One setting of an overlay: `undefined` where it isn't set, or the overlay isn't an object. */
+function settingIn(
+  overlay: Record<string, unknown> | undefined,
+  section: string,
+  key: string
+): unknown {
+  const settings = overlay?.[section];
+  return isObject(settings) ? settings[key] : undefined;
+}
+
+/** An object's own property: what every object inherits, `toString`, is none. */
+function own<T>(object: Record<string, T>, key: string): T | undefined {
+  return Object.hasOwn(object, key) ? object[key] : undefined;
+}
+
+function without(
+  object: Record<string, unknown>,
+  key: string
+): Record<string, unknown> {
+  const { [key]: _gone, ...rest } = object;
+  return rest;
+}
+
 /** The keys of either object, once each. */
 function keysOf(a: object, b: object): string[] {
   return [...new Set([...Object.keys(a), ...Object.keys(b)])];
@@ -512,7 +855,7 @@ function comparable(value: unknown): string {
   );
 }
 
-/** A setting's value as the review shows it. */
+/** A setting's value as the lists show it. */
 function show(value: unknown, field?: LabField): string {
   if (value === undefined) {
     return 'not set';
diff --git a/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts b/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
index 34bbbda..e8895b7 100644
--- a/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
@@ -3,7 +3,11 @@ import { RouterLink } from '@angular/router';
 import { CpsButtonComponent } from 'cps-ui-kit';
 import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
 
-/** Settings' first page: what is waiting to be applied, and a way back to the lab's own. */
+/**
+ * Settings' first page: what is waiting to be applied, what this load runs
+ * with otherwise than the lab's defaults — each to undo or reset — and a way
+ * back to the lab's own settings.
+ */
 @Component({
   selector: 'lab-settings-overview',
   imports: [CpsButtonComponent, RouterLink],
@@ -22,7 +26,7 @@ import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
         <h2>Not applied yet</h2>
         @if (draft.changes().length) {
           <ul class="lab-changes">
-            @for (change of draft.changes(); track $index) {
+            @for (change of draft.changes(); track change.id) {
               <li>
                 <a
                   [routerLink]="['/settings', change.section.path]"
@@ -34,6 +38,12 @@ import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
                     >{{ change.from }} → {{ change.to }}</span
                   >
                 }
+                <cps-button
+                  type="borderless"
+                  size="xsmall"
+                  label="Undo"
+                  [ariaLabel]="'Undo ' + change.label"
+                  (clicked)="change.revert()" />
               </li>
             }
           </ul>
@@ -42,11 +52,44 @@ import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
         }
       </div>
 
+      <div class="lab-card">
+        <h2>Different from the lab's defaults</h2>
+        @if (draft.modified().length) {
+          <p>
+            Reset puts one back, to apply with the rest; a debug flag goes back
+            at once.
+          </p>
+          <ul class="lab-changes">
+            @for (setting of draft.modified(); track setting.id) {
+              <li>
+                <a
+                  [routerLink]="['/settings', setting.section.path]"
+                  queryParamsHandling="preserve"
+                  >{{ setting.section.label }} › {{ setting.label }}</a
+                >
+                <span class="lab-changes__values"
+                  >{{ setting.from }} → {{ setting.to }}</span
+                >
+                <cps-button
+                  type="borderless"
+                  size="xsmall"
+                  label="Reset"
+                  [ariaLabel]="'Reset ' + setting.label + ' to the lab default'"
+                  (clicked)="setting.revert()" />
+              </li>
+            }
+          </ul>
+        } @else {
+          <p>Nothing: this load runs as the lab does by default.</p>
+        }
+      </div>
+
       <div class="lab-card">
         <h2>The lab's settings</h2>
         <p>
           Back to the library's settings and the mock broker's answer as the lab
-          sets them. How the lab starts, and the debug flags, stay as they are.
+          sets them, at once. How the lab starts, and the debug flags, stay as
+          they are.
         </p>
         <div class="lab-actions">
           <cps-button
diff --git a/projects/watchtower-lab/src/shell/pages/settings-section.page.ts b/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
index b35338a..1f7e200 100644
--- a/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
@@ -7,9 +7,11 @@ import {
   CpsTextareaComponent
 } from 'cps-ui-kit';
 import { LabLoggerLevelsComponent } from '../../lab/lab-logger-levels.component';
+import { LabSettingStateComponent } from '../../lab/lab-setting-state.component';
 import {
   LAB_DEBUG_FLAGS,
-  LabSettingsDraft
+  LabSettingsDraft,
+  labSettingId
 } from '../../lab/lab-settings-draft.service';
 import {
   LAB_BROKER_MODES,
@@ -24,7 +26,10 @@ import {
 } from '../../lab/lab-shortcuts.component';
 import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
 
-/** One section of Settings: its controls, which write into the shared draft. */
+/**
+ * One section of Settings: its controls, which write into the shared draft,
+ * each with where it stands — not applied yet, or other than the lab's default.
+ */
 @Component({
   selector: 'lab-settings-section',
   imports: [
@@ -33,6 +38,7 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
     CpsSwitchComponent,
     CpsTextareaComponent,
     LabLoggerLevelsComponent,
+    LabSettingStateComponent,
     LabShortcutsComponent,
     RouterLink
   ],
@@ -59,126 +65,141 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
 
       @if (section.path === 'rum-broker') {
         <div class="lab-card">
-          <cps-select
-            label="Answer /rum/init with"
-            [options]="modes"
-            [returnObject]="false"
-            [value]="draft.mode()"
-            width="26rem"
-            (valueChanged)="draft.mode.set($event)" />
+          <div class="lab-field">
+            <cps-select
+              label="Answer /rum/init with"
+              [options]="modes"
+              [returnObject]="false"
+              [value]="draft.mode()"
+              width="26rem"
+              (valueChanged)="draft.mode.set($event)" />
+            <lab-setting-state
+              [change]="draft.changeById().get('rum.mode')"
+              [modified]="draft.modifiedById().get('rum.mode')" />
+          </div>
           <p>
             RUM's own telemetry: the library's default is errors, performance
             and same-origin HTTP. With none, RUM records only page views, the
             session start and the library's events.
           </p>
-          <div class="lab-switches">
-            <cps-switch
-              label="The library's default"
-              [value]="draft.telemetries() === null"
-              (valueChanged)="draft.useDefaultTelemetries($event)" />
+          <div class="lab-field">
+            <div class="lab-switches">
+              <cps-switch
+                label="The library's default"
+                [value]="draft.telemetries() === null"
+                (valueChanged)="draft.useDefaultTelemetries($event)" />
+            </div>
+            @if (draft.telemetries(); as chosen) {
+              <cps-select
+                label="Telemetries"
+                placeholder="None"
+                [options]="telemetryOptions"
+                [returnObject]="false"
+                [multiple]="true"
+                [selectAll]="true"
+                [chips]="true"
+                [value]="chosen"
+                width="26rem"
+                (valueChanged)="draft.telemetries.set($event)" />
+            }
+            <lab-setting-state
+              [change]="draft.changeById().get('rum.telemetries')"
+              [modified]="draft.modifiedById().get('rum.telemetries')" />
           </div>
-          @if (draft.telemetries(); as chosen) {
-            <cps-select
-              label="Telemetries"
-              placeholder="None"
-              [options]="telemetryOptions"
-              [returnObject]="false"
-              [multiple]="true"
-              [selectAll]="true"
-              [chips]="true"
-              [value]="chosen"
-              width="26rem"
-              (valueChanged)="draft.telemetries.set($event)" />
-          }
         </div>
       }
 
       @if (section.fields.length) {
         <div class="lab-card">
           <div class="lab-fields">
-            @for (field of section.fields; track field.section + field.key) {
-              @switch (field.kind) {
-                @case ('switch') {
-                  <cps-switch
-                    [label]="label(field)"
-                    [value]="!!draft.value(field)"
-                    [disabled]="draft.disabled(field)"
-                    (valueChanged)="draft.set(field, $event)" />
-                }
-                @case ('number') {
-                  <cps-input
-                    type="number"
-                    [label]="label(field)"
-                    width="26rem"
-                    [value]="'' + draft.value(field)"
-                    [disabled]="draft.disabled(field)"
-                    (valueChanged)="draft.setNumber(field, $event)" />
-                }
-                @case ('text') {
-                  <cps-input
-                    [label]="label(field)"
-                    width="26rem"
-                    [value]="'' + (draft.value(field) ?? '')"
-                    [disabled]="draft.disabled(field)"
-                    (valueChanged)="draft.set(field, $event)" />
-                }
-                @case ('select') {
-                  <cps-select
-                    [label]="label(field)"
-                    [options]="selectOptions(field)"
-                    [returnObject]="false"
-                    [value]="'' + draft.value(field)"
-                    width="26rem"
-                    [disabled]="draft.disabled(field)"
-                    (valueChanged)="draft.set(field, $event)" />
-                }
-                @case ('multi') {
-                  <cps-select
-                    [label]="label(field)"
-                    [options]="selectOptions(field)"
-                    [returnObject]="false"
-                    [multiple]="true"
-                    [chips]="true"
-                    [value]="list(draft.value(field))"
-                    width="26rem"
-                    [disabled]="draft.disabled(field)"
-                    (valueChanged)="draft.set(field, $event)" />
-                }
-                @case ('lines') {
-                  <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
-                  <cps-textarea
-                    ngSkipHydration
-                    [label]="label(field)"
-                    [rows]="3"
-                    width="26rem"
-                    [value]="
-                      list(draft.value(field)).join(
-                        '
+            @for (field of section.fields; track id(field)) {
+              <div
+                class="lab-field"
+                [class.lab-field-wide]="
+                  field.kind === 'levels' || field.kind === 'shortcuts'
+                ">
+                @switch (field.kind) {
+                  @case ('switch') {
+                    <cps-switch
+                      [label]="label(field)"
+                      [value]="!!draft.value(field)"
+                      [disabled]="draft.disabled(field)"
+                      (valueChanged)="draft.set(field, $event)" />
+                  }
+                  @case ('number') {
+                    <cps-input
+                      type="number"
+                      [label]="label(field)"
+                      width="26rem"
+                      [value]="'' + draft.value(field)"
+                      [disabled]="draft.disabled(field)"
+                      (valueChanged)="draft.setNumber(field, $event)" />
+                  }
+                  @case ('text') {
+                    <cps-input
+                      [label]="label(field)"
+                      width="26rem"
+                      [value]="'' + (draft.value(field) ?? '')"
+                      [disabled]="draft.disabled(field)"
+                      (valueChanged)="draft.set(field, $event)" />
+                  }
+                  @case ('select') {
+                    <cps-select
+                      [label]="label(field)"
+                      [options]="selectOptions(field)"
+                      [returnObject]="false"
+                      [value]="'' + draft.value(field)"
+                      width="26rem"
+                      [disabled]="draft.disabled(field)"
+                      (valueChanged)="draft.set(field, $event)" />
+                  }
+                  @case ('multi') {
+                    <cps-select
+                      [label]="label(field)"
+                      [options]="selectOptions(field)"
+                      [returnObject]="false"
+                      [multiple]="true"
+                      [chips]="true"
+                      [value]="list(draft.value(field))"
+                      width="26rem"
+                      [disabled]="draft.disabled(field)"
+                      (valueChanged)="draft.set(field, $event)" />
+                  }
+                  @case ('lines') {
+                    <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
+                    <cps-textarea
+                      ngSkipHydration
+                      [label]="label(field)"
+                      [rows]="3"
+                      width="26rem"
+                      [value]="
+                        list(draft.value(field)).join(
+                          '
 '
-                      )
-                    "
-                    [disabled]="draft.disabled(field)"
-                    (valueChanged)="draft.setLines(field, $event)" />
-                }
-                @case ('levels') {
-                  <div class="lab-field-wide">
+                        )
+                      "
+                      [disabled]="draft.disabled(field)"
+                      (valueChanged)="draft.setLines(field, $event)" />
+                  }
+                  @case ('levels') {
                     <p class="lab-field-wide__label">{{ label(field) }}</p>
                     <lab-logger-levels
                       [levels]="levelsOf(draft.value(field))"
                       [disabled]="draft.disabled(field)"
                       (changed)="draft.set(field, $event)" />
-                  </div>
-                }
-                @case ('shortcuts') {
-                  <div class="lab-field-wide">
+                  }
+                  @case ('shortcuts') {
                     <p class="lab-field-wide__label">{{ label(field) }}</p>
                     <lab-shortcuts
                       [shortcuts]="shortcutsOf(draft.value(field))"
                       [disabled]="draft.disabled(field)"
                       (changed)="draft.set(field, $event)" />
-                  </div>
+                  }
                 }
-              }
+                <lab-setting-state
+                  [change]="draft.changeById().get(id(field))"
+                  [modified]="draft.modifiedById().get(id(field))" />
+              </div>
             }
           </div>
           @if (section.path === 'app-monitor') {
@@ -200,10 +221,14 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
           <div class="lab-card">
             <div class="lab-switches">
               @for (flag of flags; track flag) {
-                <cps-switch
-                  [label]="flag"
-                  [value]="draft.debug()[flag]"
-                  (valueChanged)="draft.setDebug(flag, $event)" />
+                <div class="lab-field">
+                  <cps-switch
+                    [label]="flag"
+                    [value]="draft.debug()[flag]"
+                    (valueChanged)="draft.setDebug(flag, $event)" />
+                  <lab-setting-state
+                    [modified]="draft.modifiedById().get('debug.' + flag)" />
+                </div>
               }
             </div>
           </div>
@@ -248,6 +273,7 @@ export class SettingsSectionPage {
     (field) => field.section !== 'start' && field.section !== 'broker'
   );
 
+  protected readonly id = labSettingId;
   protected readonly label = labFieldLabel;
   protected readonly flags = LAB_DEBUG_FLAGS;
   protected readonly modes = LAB_BROKER_MODES;
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 3a9ee64..5b0007f 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -71,9 +71,16 @@ function sectionOf(url: string): string {
                   routerLinkActive="active"
                   ariaCurrentWhenActive="page"
                   >{{ section.label }}
-                  @if (changed().has(section.path)) {
-                    <span class="cps-sr-only">(changes not applied)</span
-                    ><span class="lab-settings__dot" aria-hidden="true"></span>
+                  @if (notes().get(section.path); as note) {
+                    <span class="cps-sr-only">({{ note }})</span>
+                    <span class="lab-settings__marks" aria-hidden="true">
+                      @if (counts().get(section.path); as count) {
+                        <span class="lab-settings__count">{{ count }}</span>
+                      }
+                      @if (changed().has(section.path)) {
+                        <span class="lab-settings__dot"></span>
+                      }
+                    </span>
                   }
                 </a>
               </li>
@@ -169,6 +176,30 @@ export class SettingsPage {
     () => new Set(this.draft.changes().map((change) => change.section.path))
   );
 
+  /** How many settings each section has other than the lab's defaults. */
+  protected readonly counts = computed(() => {
+    const counts = new Map<string, number>();
+    for (const { section } of this.draft.modified()) {
+      counts.set(section.path, (counts.get(section.path) ?? 0) + 1);
+    }
+    return counts;
+  });
+
+  /** Each section's marks, as read out: `2 modified, changes not applied`. */
+  protected readonly notes = computed(
+    () =>
+      new Map(
+        LAB_SETTINGS_SECTIONS.map((section) => {
+          const count = this.counts().get(section.path);
+          const notes = [
+            count && `${count} modified`,
+            this.changed().has(section.path) && 'changes not applied'
+          ].filter(Boolean);
+          return [section.path, notes.join(', ')];
+        })
+      )
+  );
+
   protected readonly listed = computed(() =>
     this.draft
       .changes()
diff --git a/projects/watchtower-lab/src/shell/shell.component.ts b/projects/watchtower-lab/src/shell/shell.component.ts
index 23d546a..418b6c3 100644
--- a/projects/watchtower-lab/src/shell/shell.component.ts
+++ b/projects/watchtower-lab/src/shell/shell.component.ts
@@ -78,7 +78,7 @@ function inEffect(now?: string, next?: string): string {
       <div class="lab-chips">
         <ng-container [ngTemplateOutlet]="chips" />
       </div>
-      <details class="lab-run-settings">
+      <details #runSettings class="lab-run-settings">
         <summary>Run settings</summary>
         <div class="lab-run-settings__panel">
           <ng-container [ngTemplateOutlet]="chips" />
@@ -100,18 +100,47 @@ function inEffect(now?: string, next?: string): string {
       </button>
     </header>
 
+    <!-- Each chip leads to its setting; a custom config, to what differs. -->
     <ng-template #chips>
-      <span class="lab-chip">destination: {{ options.destination }}</span>
-      <span class="lab-chip"
-        >telemetry: {{ options.telemetry ? 'on' : 'off' }}</span
+      <a
+        class="lab-chip"
+        routerLink="/settings/delivery"
+        queryParamsHandling="preserve"
+        >destination: {{ options.destination }}</a
+      >
+      <a
+        class="lab-chip"
+        routerLink="/settings/delivery"
+        queryParamsHandling="preserve"
+        >telemetry: {{ options.telemetry ? 'on' : 'off' }}</a
+      >
+      <a
+        class="lab-chip"
+        routerLink="/settings/rum-broker"
+        queryParamsHandling="preserve"
+        >broker: {{ broker() }}</a
+      >
+      <a
+        class="lab-chip"
+        routerLink="/settings/rum-broker"
+        queryParamsHandling="preserve"
+        >rum telemetries: {{ telemetries() }}</a
       >
-      <span class="lab-chip">broker: {{ broker() }}</span>
-      <span class="lab-chip">rum telemetries: {{ telemetries() }}</span>
       @if (options.channel === 'shared') {
-        <span class="lab-chip">channel: shared</span>
+        <a
+          class="lab-chip"
+          routerLink="/settings/delivery"
+          queryParamsHandling="preserve"
+          >channel: shared</a
+        >
       }
       @if (customConfig) {
-        <span class="lab-chip">config: custom</span>
+        <a
+          class="lab-chip"
+          routerLink="/settings"
+          queryParamsHandling="preserve"
+          >config: custom</a
+        >
       }
     </ng-template>
 
@@ -254,6 +283,9 @@ export class ShellComponent {
   private readonly navToggle =
     viewChild.required<ElementRef<HTMLButtonElement>>('navToggle');
 
+  private readonly runSettings =
+    viewChild<ElementRef<HTMLDetailsElement>>('runSettings');
+
   constructor() {
     inject(LabLayout);
     const router = inject(Router);
@@ -265,6 +297,8 @@ export class ShellComponent {
       .subscribe(() => {
         this.path.set(router.url.split(/[?#]/)[0].replace(/^\//, ''));
         this.navOpen.set(false);
+        // Its chips lead into Settings: it folds away once one is followed.
+        this.runSettings()?.nativeElement.removeAttribute('open');
       });
 
     const destroyRef = inject(DestroyRef);
diff --git a/projects/watchtower-lab/src/shell/shell.config.ts b/projects/watchtower-lab/src/shell/shell.config.ts
index 252f712..4d79d7e 100644
--- a/projects/watchtower-lab/src/shell/shell.config.ts
+++ b/projects/watchtower-lab/src/shell/shell.config.ts
@@ -27,7 +27,12 @@ import {
   provideUwtTelemetryRumSink
 } from '@absaoss-cps/ngx-ui-watchtower/rum';
 import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';
-import { LAB_OPTIONS, labRedaction, LabOptions } from '../lab/lab-options';
+import {
+  LAB_DEFAULTS,
+  LAB_OPTIONS,
+  labRedaction,
+  LabOptions
+} from '../lab/lab-options';
 import { labChannel } from '../lab/lab-channel';
 import { LabCustomSink } from '../lab/lab-custom.sink';
 import { LabLogApiProvider } from '../lab/lab-log-api.provider';
@@ -145,24 +150,14 @@ export const shellConfig = (options: LabOptions): ApplicationConfig => {
       provideRouter(routes),
       { provide: LAB_OPTIONS, useValue: options },
       provideUwtTelemetry(
-        {
-          application: 'watchtower-lab',
-          environment: 'lab',
-          version: '1.0.0',
-          ...identity
-        },
+        { ...LAB_DEFAULTS.identity, ...identity },
         // The factory form, read once at startup in an injection context.
         withTelemetryEnabled(() => inject(LAB_OPTIONS).telemetry),
-        withLogging({
-          minLevel: 'log',
-          levels: { noisy: 'warn' },
-          mirrorErrorsToRum: true,
-          ...logging
-        }),
-        withScenarios({ defaultTimeoutMs: 30_000, ...scenarios }),
+        withLogging({ ...LAB_DEFAULTS.logging, ...logging }),
+        withScenarios({ ...LAB_DEFAULTS.scenarios, ...scenarios }),
         withBIEvents(bi),
         withRedaction({
-          scanValuePatterns: ['email', 'creditCard', 'ssn', 'ipv4', 'phone'],
+          ...LAB_DEFAULTS.redaction,
           ...labRedaction(options.config.redaction)
         })
       ),
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index f39d999..301d4c1 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -46,11 +46,52 @@
   align-items: start;
 }
 
+// A control, and under it where it stands: not applied, or modified.
+.lab-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
 // A control that is a list, or has several parts, takes the card's whole width.
 .lab-field-wide {
   grid-column: 1 / -1;
 }
 
+.lab-setting-state {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.lab-setting-state__tag {
+  padding: 0 0.5rem;
+  border-radius: 0.625rem;
+  background-color: var(--cps-color-highlight-selected);
+  color: var(--cps-color-calm);
+  font-weight: 700;
+}
+
+.lab-setting-state__tag--pending {
+  background-color: #fdf0dc;
+  color: #7a4300;
+}
+
+.lab-setting-state__default {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--cps-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .lab-field-wide__label {
   margin: 0 0 0.375rem;
   font-size: 0.875rem;
@@ -128,7 +169,25 @@
   text-transform: uppercase;
 }
 
-// A section with changes not applied, and the bar that lists them.
+// A section's marks: how many of its settings are modified, and a dot when
+// it has changes not applied — as the bar that lists them has too.
+.lab-settings__marks {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.lab-settings__count {
+  min-width: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 0.625rem;
+  background-color: var(--cps-color-line-light);
+  color: var(--cps-color-text-dark);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-align: center;
+}
+
 .lab-settings__dot {
   flex: none;
   width: 0.5rem;
@@ -321,12 +380,24 @@
   min-width: 0;
 }
 
+// Each leads to its setting.
 .lab-chip {
   padding: 0.15rem 0.6rem;
   border-radius: 1rem;
   background-color: #ffffff26;
+  color: inherit;
   font-size: 0.85rem;
+  text-decoration: none;
   white-space: nowrap;
+
+  &:hover {
+    background-color: #ffffff40;
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    @include cps.focus-ring;
+  }
 }
 
 .lab-run-settings {

From 410e26d8c4e8b8141c795f94f39e7115ce35dd66 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 16:56:31 +0100
Subject: [PATCH 49/51] help text for every setting

---
 README.md                                     |  13 +-
 playwright/a11y.spec.ts                       |  11 +
 playwright/settings.spec.ts                   |  99 ++++++++
 .../src/lab/lab-settings-draft.service.ts     |  34 ++-
 .../src/lab/lab-settings-fields.ts            | 222 ++++++++++++++----
 .../src/shell/pages/settings-section.page.ts  | 147 ++++++------
 .../src/shell/pages/settings.page.ts          | 107 ++++++++-
 projects/watchtower-lab/src/styles.scss       |  49 +++-
 8 files changed, 543 insertions(+), 139 deletions(-)

diff --git a/README.md b/README.md
index 89ae824..c80c859 100644
--- a/README.md
+++ b/README.md
@@ -90,11 +90,14 @@ redaction and Event Inspector. **Mock backend**: RUM broker and App monitor.
 **Diagnostics**: Debug flags, which apply at once. **Advanced**: Configuration
 as JSON, and the Effective configuration. A change waits, from whichever
 section, in a bar listing them all, until they are applied together with one
-reload, or discarded. A setting says where it stands: **Not applied**, with
-Undo, or **Modified** from the lab's default, with the default and a Reset
-that waits to be applied too (a debug flag resets at once); the list counts
-each section's modified settings. The **Overview** lists both, to undo or
-reset each. On a narrow screen the sections fold into a picker.
+reload, or discarded. A setting says what it does, from the library's
+documentation (and aws-rum-web's, for the app monitor), and where it stands:
+**Not applied**, with Undo, or **Modified** from the lab's default, with the
+default and a Reset that waits to be applied too (a debug flag resets at
+once); the list counts each section's modified settings. The **Overview**
+lists both, to undo or reset each. **Find a setting**, or `/`, finds one by
+its name, its name in the JSON or what it does, and shows it in its
+section. On a narrow screen the sections fold into a picker.
 
 The header's chips show how this load runs, each a link to its setting;
 where the broker is set differently for the next one, its chip says so:
diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
index 8d0fd3a..1e53b56 100644
--- a/playwright/a11y.spec.ts
+++ b/playwright/a11y.spec.ts
@@ -79,6 +79,17 @@ for (const path of PAGES) {
   });
 }
 
+test("Settings' search, with its results open: no violations", async ({
+  page
+}) => {
+  await openLab(page, 'settings/logging');
+  await page.getByRole('combobox', { name: 'Find a setting' }).fill('redact');
+  await expect(page.getByRole('option').first()).toBeVisible();
+  // Once it has faded in: mid-fade, its text is too faint to measure.
+  await expect(page.locator('.cps-menu-container')).toHaveCSS('opacity', '1');
+  expect(await violations(page)).toEqual([]);
+});
+
 test('Settings with settings modified and changes not applied, marked in its list, its fields and its bar: no violations', async ({
   page
 }) => {
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index aef38d4..efbb3c0 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -209,6 +209,10 @@ test('on a narrow screen, the sections of Settings fold into a picker', async ({
     page.getByRole('navigation', { name: 'Settings sections' })
   ).toBeHidden();
   await expect(shown(page, 'Section')).toHaveText('Library › Logging');
+  // The search stays, above the picker.
+  await expect(
+    page.getByRole('combobox', { name: 'Find a setting' })
+  ).toBeVisible();
 
   await choose(page, 'Section', 'Library › Scenarios');
   await expect(page).toHaveURL(/\/settings\/scenarios$/);
@@ -346,6 +350,101 @@ test("the header's chips lead to their settings", async ({ page }) => {
   await expect(panel).toBeHidden();
 });
 
+test('each setting says what it does, as the documentation of what it sets has it', async ({
+  page
+}) => {
+  await openLab(page, 'settings/logging');
+  // Read out with its control, where the kit's control takes a description.
+  await expect(
+    page.getByRole('combobox', { name: 'Minimum level' })
+  ).toHaveAccessibleDescription(/Records below this severity are discarded/);
+  await expect(
+    page.locator('.lab-field', { hasText: 'Mirror errors to RUM' })
+  ).toContainText('logger.error calls go to RUM as errors too');
+
+  await settingsSection(page, 'App monitor');
+  await expect(
+    page.getByRole('spinbutton', { name: /Session sample rate/ })
+  ).toHaveAccessibleDescription(/share of sessions RUM records/);
+});
+
+test('a setting is found by its name, its name in the JSON or what it does, and shown in its section', async ({
+  page
+}) => {
+  await openLab(page, 'settings/scenarios');
+  const search = page.getByRole('combobox', { name: 'Find a setting' });
+  const results = page.getByRole('option');
+  const found = page.locator('.lab-field--found');
+  // Once shown, the setting's control has the focus, and the page has
+  // scrolled to it: searching on before then, the focus or the scroll would
+  // arrive with the list open, and close it, as the kit closes its lists.
+  const shownFocused = async () => {
+    await expect(
+      found.locator('input, [role="combobox"]').first()
+    ).toBeFocused();
+    // A scroll's event comes with the next frame.
+    await page.evaluate(
+      () =>
+        new Promise((resolve) =>
+          requestAnimationFrame(() => requestAnimationFrame(resolve))
+        )
+    );
+  };
+
+  // "redact" finds every place that redacts, and the section that does most.
+  await search.fill('redact');
+  for (const name of [
+    'Redact scenario payloads',
+    'Redact log values',
+    'Redact BI payloads',
+    'Privacy & redaction'
+  ]) {
+    await expect(results.filter({ hasText: name }).first()).toBeVisible();
+  }
+  await results.filter({ hasText: 'Redact log values' }).click();
+  await expect(page).toHaveURL(/\/settings\/logging#logging\.redact$/);
+  await expect(found).toContainText('Redact log values');
+  await expect(found.getByRole('switch')).toBeFocused();
+  await shownFocused();
+  // Emptied, for the next search.
+  await expect(search).toHaveValue('');
+
+  await search.fill('dedupWindowMs');
+  await results.filter({ hasText: 'BI dedup window' }).click();
+  await expect(page).toHaveURL(/\/settings\/bi-events#bi\.dedupWindowMs$/);
+  await shownFocused();
+
+  await search.fill('Luhn');
+  await results.filter({ hasText: 'Value patterns scanned' }).click();
+  await expect(page).toHaveURL(
+    /\/settings\/privacy#redaction\.scanValuePatterns$/
+  );
+  await shownFocused();
+
+  // The mock broker's answer and the debug flags are settings like the rest.
+  await search.fill('debugBI');
+  await results.filter({ hasText: 'debugBI' }).click();
+  await expect(page).toHaveURL(/\/settings\/debug-flags#debug\.debugBI$/);
+  await expect(found).toContainText('debugBI');
+  await shownFocused();
+});
+
+test('"/" goes to the search, but in a field it is typed', async ({ page }) => {
+  await openLab(page, 'settings/app-identity');
+  await page.locator('lab-settings-section h1').click();
+  await page.keyboard.press('/');
+  await expect(
+    page.getByRole('combobox', { name: 'Find a setting' })
+  ).toBeFocused();
+
+  const version = page
+    .locator('cps-input', { hasText: 'Version' })
+    .locator('input');
+  await version.fill('2');
+  await version.press('/');
+  await expect(version).toHaveValue('2/');
+});
+
 test('Settings applies an overlay, shows it in effect, and goes back', async ({
   page
 }) => {
diff --git a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
index 6c65390..52ac23e 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
@@ -30,7 +30,9 @@ import {
   LabOptions
 } from './lab-options';
 import {
+  LAB_DEBUG_FLAGS,
   LAB_SETTINGS_SECTIONS,
+  LabDebugFlag,
   LabField,
   labSettingsSection,
   LabSettingsSection
@@ -43,13 +45,6 @@ import {
   LabWire
 } from './lab-wire.service';
 
-export const LAB_DEBUG_FLAGS = [
-  'debugScenario',
-  'debugBI',
-  'debugLogger'
-] as const;
-export type LabDebugFlag = (typeof LAB_DEBUG_FLAGS)[number];
-
 /** How the lab starts: its options, but the overlay. */
 type LabStart = Omit<LabOptions, 'config'>;
 
@@ -285,8 +280,12 @@ export class LabSettingsDraft {
     switch (field.section) {
       case 'start':
         return this.start()[field.key as keyof LabStart];
+      case 'rum':
+        return field.key === 'mode' ? this.mode() : this.telemetries();
       case 'broker':
         return this.brokerObject()?.[field.key] ?? field.default;
+      case 'debug':
+        return this.debug()[field.key as LabDebugFlag];
       default: {
         const { section, key } = field;
         const drafted = settingIn(this.overlay(), section, key);
@@ -303,24 +302,39 @@ export class LabSettingsDraft {
   /** Whether a field's control is off: while the JSON it writes into isn't an object. */
   disabled(field: LabField): boolean {
     switch (field.section) {
-      case 'start':
-        return false;
       case 'broker':
         return !this.brokerObject();
+      case 'start':
+      case 'rum':
+      case 'debug':
+        return false;
       default:
         return !this.overlay();
     }
   }
 
-  /** Writes a control's value into the draft, which shows it. */
+  /**
+   * Writes a control's value into the draft, which shows it — but a debug
+   * flag's, which applies at once.
+   */
   set(field: LabField, value: unknown): void {
     switch (field.section) {
       case 'start':
         this.setStart(field.key as keyof LabStart, value);
         return;
+      case 'rum':
+        if (field.key === 'mode') {
+          this.mode.set(value as LabBrokerMode);
+        } else {
+          this.telemetries.set(value as LabTelemetry[] | null);
+        }
+        return;
       case 'broker':
         this.putBroker(field.key, value);
         return;
+      case 'debug':
+        this.setDebug(field.key as LabDebugFlag, !!value);
+        return;
       default:
         this.putOverlay(field.section, field.key, value);
     }
diff --git a/projects/watchtower-lab/src/lab/lab-settings-fields.ts b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
index 4487ffb..cf77b20 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-fields.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-fields.ts
@@ -5,38 +5,70 @@ type Option = { label: string; value: string };
 
 /**
  * A setting Settings offers as a control. `section` is where it is kept:
- * `start` for how the lab starts, `broker` for the mock broker's app monitor
- * config, and otherwise its section of the `?config=` overlay. `multi` picks
- * several of its options; `lines` is a list of strings, one to a line;
- * `levels` and `shortcuts` have editors of their own.
+ * `start` for how the lab starts, `rum` for the mock broker's answer,
+ * `broker` for its app monitor config, `debug` for the debug flags, and
+ * otherwise its section of the `?config=` overlay. `multi` picks several of
+ * its options; `lines` is a list of strings, one to a line; `levels`,
+ * `shortcuts` and `telemetries` have editors of their own.
  */
 export type LabField = {
   section: string;
   key: string;
   /** What it is, as people read it; its control adds the setting's name. */
   label: string;
+  /** What it does, from the documentation of what it sets. */
+  help: string;
   /** What the app monitor does with none given: broker settings only. */
   default?: unknown;
 } & (
-  | { kind: 'switch' | 'number' | 'text' | 'lines' | 'levels' | 'shortcuts' }
+  | {
+      kind:
+        | 'switch'
+        | 'number'
+        | 'text'
+        | 'lines'
+        | 'levels'
+        | 'shortcuts'
+        | 'telemetries';
+    }
   | { kind: 'select' | 'multi'; options: Option[] }
 );
 
+/** Kept elsewhere than in the `?config=` overlay. */
+const OUTSIDE_OVERLAY = new Set(['start', 'rum', 'broker', 'debug']);
+
+/** Whether a field writes into the `?config=` overlay, and so waits for its JSON. */
+export function labInOverlay(field: LabField): boolean {
+  return !OUTSIDE_OVERLAY.has(field.section);
+}
+
 /**
- * A field's control label: what it is, then the setting's name as the JSON
- * has it, so the control and the JSON can be read together.
+ * The setting's name as the JSON has it: `logging.minLevel` in the overlay,
+ * `sessionSampleRate` in the app monitor config. Empty for the others,
+ * which have no JSON.
  */
-export function labFieldLabel(field: LabField): string {
+export function labSettingName(field: LabField): string {
   switch (field.section) {
     case 'start':
-      return field.label;
+    case 'rum':
+    case 'debug':
+      return '';
     case 'broker':
-      return `${field.label} (${field.key})`;
+      return field.key;
     default:
-      return `${field.label} (${field.section}.${field.key})`;
+      return `${field.section}.${field.key}`;
   }
 }
 
+/**
+ * A field's control label: what it is, then the setting's name as the JSON
+ * has it, so the control and the JSON can be read together.
+ */
+export function labFieldLabel(field: LabField): string {
+  const name = labSettingName(field);
+  return name ? `${field.label} (${name})` : field.label;
+}
+
 /** The groups of sections in the Settings list, in order. */
 export const LAB_SETTINGS_AREAS = [
   'Library',
@@ -65,6 +97,13 @@ export interface LabSettingsSection {
   fields: LabField[];
 }
 
+export const LAB_DEBUG_FLAGS = [
+  'debugScenario',
+  'debugBI',
+  'debugLogger'
+] as const;
+export type LabDebugFlag = (typeof LAB_DEBUG_FLAGS)[number];
+
 export const LAB_LOG_LEVELS = [
   { label: 'log — everything', value: 'log' },
   { label: 'warn — warnings and errors', value: 'warn' },
@@ -110,12 +149,16 @@ export const LAB_BROKER_MODES: { label: string; value: LabBrokerMode }[] = [
   }
 ];
 
+/** What redaction being off for a concern leaves, as the library documents it. */
+const REDACT_HELP =
+  'Turned off, only the configurable scrubbing stops: key and value patterns, and URL queries. The built-in key denylist, size caps and value transforms still apply.';
+
 /**
  * The sections of Settings, by what their settings change, each with the
- * controls it offers. The library's settings are the ones the lab takes in
- * its `?config=` overlay; the app monitor's are the ones most worth trying,
- * with the values the broker answers with, or the app monitor takes, when
- * none is given. Any others are the JSON's.
+ * controls it offers and what they do. The library's settings are the ones
+ * the lab takes in its `?config=` overlay; the app monitor's are the ones
+ * most worth trying, with the values the broker answers with, or the app
+ * monitor takes, when none is given. Any others are the JSON's.
  */
 export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
   {
@@ -129,20 +172,29 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         kind: 'text',
         section: 'identity',
         key: 'application',
-        label: 'Application name'
+        label: 'Application name',
+        help: 'The application, as each session records it.'
       },
       {
         kind: 'text',
         section: 'identity',
         key: 'environment',
-        label: 'Environment'
+        label: 'Environment',
+        help: 'Where it is deployed: dev, qa, prod.'
+      },
+      {
+        kind: 'text',
+        section: 'identity',
+        key: 'version',
+        label: 'Version',
+        help: "The application's version, such as 22.0.0."
       },
-      { kind: 'text', section: 'identity', key: 'version', label: 'Version' },
       {
         kind: 'text',
         section: 'identity',
         key: 'eventNamespace',
-        label: 'Event namespace'
+        label: 'Event namespace',
+        help: 'The prefix of the event types the library sends: {namespace}.scenario, {namespace}.scenario.step and {namespace}.bi. com.uwt when empty.'
       }
     ]
   },
@@ -158,6 +210,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'start',
         key: 'destination',
         label: 'Destination',
+        help: "Where the library's telemetry goes: to the mock backend through the RUM sink, nowhere, or to the lab's own sink, given with provideUwtTelemetryDestination.",
         options: DESTINATIONS
       },
       {
@@ -165,19 +218,22 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'start',
         key: 'channel',
         label: 'Broadcast channel',
+        help: "The channel the shell hosts its fragments' telemetry on: its own, or the default one, shared by every tab, whose hosts elect one leader.",
         options: CHANNELS
       },
       {
         kind: 'switch',
         section: 'start',
         key: 'telemetry',
-        label: 'Telemetry'
+        label: 'Telemetry',
+        help: 'Off, every service and destination is inert, through withTelemetryEnabled: nothing is recorded or sent.'
       },
       {
         kind: 'switch',
         section: 'lab',
         key: 'logBatching',
-        label: 'Batch logs, sent on flush()'
+        label: 'Batch logs, sent on flush()',
+        help: "The lab's log provider keeps the records, and sends them when the library flushes it."
       }
     ]
   },
@@ -192,37 +248,43 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         kind: 'number',
         section: 'scenarios',
         key: 'defaultTimeoutMs',
-        label: 'Default timeout, ms'
+        label: 'Default timeout, ms',
+        help: 'After this long, a scenario still unsettled settles as timeout. 0 turns the default off; a scenario can still set its own.'
       },
       {
         kind: 'switch',
         section: 'scenarios',
         key: 'emitLifecycleEvents',
-        label: 'Lifecycle step events'
+        label: 'Lifecycle step events',
+        help: "An event for each step, rather than one packed event when the scenario settles. They count against RUM's session event limit: for debugging, not production."
       },
       {
         kind: 'number',
         section: 'scenarios',
         key: 'maxSteps',
-        label: 'Step limit'
+        label: 'Step limit',
+        help: 'Steps kept per scenario. Later ones are counted in stepCount but not stored, bounding a runaway loop.'
       },
       {
         kind: 'switch',
         section: 'scenarios',
         key: 'userTimings',
-        label: 'User timings'
+        label: 'User timings',
+        help: "Scenarios and their steps as performance marks and measures, on DevTools' Performance track. The debugScenario flag turns them on too."
       },
       {
         kind: 'number',
         section: 'scenarios',
         key: 'markCleanupFallbackMs',
-        label: 'Mark cleanup fallback, ms'
+        label: 'Mark cleanup fallback, ms',
+        help: "How long the marks of a scenario that never settles stay, with user timings on and no timeout. 0 keeps them for the page's life."
       },
       {
         kind: 'switch',
         section: 'scenarios',
         key: 'redact',
-        label: 'Redact scenario payloads'
+        label: 'Redact scenario payloads',
+        help: `Whether scenario records are redacted. ${REDACT_HELP}`
       }
     ]
   },
@@ -237,19 +299,22 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         kind: 'number',
         section: 'bi',
         key: 'dedupWindowMs',
-        label: 'BI dedup window, ms'
+        label: 'BI dedup window, ms',
+        help: 'An identical event within this long of another is a double fire, and is dropped. 0 keeps every one.'
       },
       {
         kind: 'number',
         section: 'bi',
         key: 'dedupMaxKeys',
-        label: 'BI dedup keys kept'
+        label: 'BI dedup keys kept',
+        help: 'Distinct events remembered before expired ones are swept, so a long session stays bounded.'
       },
       {
         kind: 'switch',
         section: 'bi',
         key: 'redact',
-        label: 'Redact BI payloads'
+        label: 'Redact BI payloads',
+        help: `Whether BI events are redacted. ${REDACT_HELP}`
       }
     ]
   },
@@ -265,25 +330,29 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'logging',
         key: 'minLevel',
         label: 'Minimum level',
+        help: 'Records below this severity are discarded.',
         options: LAB_LOG_LEVELS
       },
       {
         kind: 'switch',
         section: 'logging',
         key: 'mirrorErrorsToRum',
-        label: 'Mirror errors to RUM'
+        label: 'Mirror errors to RUM',
+        help: "logger.error calls go to RUM as errors too, counting against the session's event budget with scenarios and BI events."
       },
       {
         kind: 'levels',
         section: 'logging',
         key: 'levels',
-        label: 'Logger levels'
+        label: 'Logger levels',
+        help: 'A level of its own for a named logger, over the minimum level; the others keep the minimum.'
       },
       {
         kind: 'switch',
         section: 'logging',
         key: 'redact',
-        label: 'Redact log values'
+        label: 'Redact log values',
+        help: `Whether log records are redacted. ${REDACT_HELP}`
       }
     ]
   },
@@ -298,37 +367,43 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         kind: 'number',
         section: 'redaction',
         key: 'maxStringLength',
-        label: 'Longest string'
+        label: 'Longest string',
+        help: 'A string value longer than this is truncated.'
       },
       {
         kind: 'number',
         section: 'redaction',
         key: 'maxKeys',
-        label: 'Most keys'
+        label: 'Most keys',
+        help: 'Attributes kept on one payload; the rest are dropped.'
       },
       {
         kind: 'number',
         section: 'redaction',
         key: 'maxStackLength',
-        label: 'Longest stack'
+        label: 'Longest stack',
+        help: 'A stack trace longer than this is truncated.'
       },
       {
         kind: 'switch',
         section: 'redaction',
         key: 'includeStack',
-        label: 'Include stacks'
+        label: 'Include stacks',
+        help: 'Whether stack traces are captured at all.'
       },
       {
         kind: 'switch',
         section: 'redaction',
         key: 'stripUrlQuery',
-        label: 'Strip URL queries'
+        label: 'Strip URL queries',
+        help: 'Query strings and fragments are stripped from URLs in string values.'
       },
       {
         kind: 'multi',
         section: 'redaction',
         key: 'scanValuePatterns',
         label: 'Value patterns scanned',
+        help: 'Shapes of personal data looked for in values, besides the key denylist. Heuristics: phone is the noisiest; creditCard also needs a Luhn match.',
         options: ['email', 'creditCard', 'ssn', 'ipv4', 'phone'].map(
           (name) => ({
             label: name,
@@ -341,6 +416,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'redaction',
         key: 'extraValueTransforms',
         label: 'Value transforms',
+        help: 'Functions run on every string value after the patterns, for what no pattern can express. A failing one is skipped.',
         options: Object.keys(LAB_VALUE_TRANSFORMS).map((name) => ({
           label: name,
           value: name
@@ -350,13 +426,15 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         kind: 'lines',
         section: 'redaction',
         key: 'extraKeyPatterns',
-        label: 'Extra key patterns, one RegExp per line'
+        label: 'Extra key patterns, one RegExp per line',
+        help: 'Keys redacted besides the built-in denylist, matched against attribute names, ignoring case.'
       },
       {
         kind: 'lines',
         section: 'redaction',
         key: 'extraValuePatterns',
-        label: 'Extra value patterns, one RegExp per line'
+        label: 'Extra value patterns, one RegExp per line',
+        help: 'Values redacted besides the scanned shapes: the content counterpart to the key patterns.'
       }
     ]
   },
@@ -372,31 +450,36 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'start',
         key: 'inspector',
         label: 'Availability',
+        help: "Whether the inspector can be opened: with its keyboard shortcut as well as from the page, from the page's button only, or not at all.",
         options: INSPECTOR_MODES
       },
       {
         kind: 'number',
         section: 'inspector',
         key: 'maxEventsPerSection',
-        label: 'Events kept per kind'
+        label: 'Events kept per kind',
+        help: 'Events kept of each kind: BI, scenarios, logs. The oldest of a kind go first, so a burst of one never pushes out another.'
       },
       {
         kind: 'number',
         section: 'inspector',
         key: 'maxPayloadCharsInView',
-        label: 'Payload characters shown'
+        label: 'Payload characters shown',
+        help: 'A payload longer than this, in characters, shows truncated, at most 65,536; the download has it in full.'
       },
       {
         kind: 'number',
         section: 'inspector',
         key: 'captureBeforeOpen',
-        label: 'Keep events from before opening'
+        label: 'Keep events from before opening',
+        help: "Events of each kind kept from the app's start, to show what happened before it opened. 0 keeps none, and spares copying every event."
       },
       {
         kind: 'shortcuts',
         section: 'inspector',
         key: 'shortcuts',
-        label: 'Shortcuts'
+        label: 'Shortcuts',
+        help: "The keys that open the inspector. With none, the page's button is the only way in."
       }
     ]
   },
@@ -406,7 +489,23 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
     area: 'Mock backend',
     applies: 'server',
     lead: "How the mock RUM broker answers /rum/init, and the RUM telemetries it names. The lab's server keeps them, for every tab.",
-    fields: []
+    fields: [
+      {
+        kind: 'select',
+        section: 'rum',
+        key: 'mode',
+        label: 'Answer /rum/init with',
+        help: 'How the broker answers the start of RUM: normally, turning RUM off, failing, or in one of the ways the RUM sink has to survive.',
+        options: LAB_BROKER_MODES
+      },
+      {
+        kind: 'telemetries',
+        section: 'rum',
+        key: 'telemetries',
+        label: 'Telemetries',
+        help: "RUM's own telemetry: the library's default is errors, performance and same-origin HTTP. With none, RUM records only page views, the session start and the library's events."
+      }
+    ]
   },
   {
     path: 'app-monitor',
@@ -420,6 +519,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'sessionSampleRate',
         label: 'Session sample rate, 0 to 1',
+        help: 'The share of sessions RUM records: 0 none, 1 every one.',
         default: 1
       },
       {
@@ -427,6 +527,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'sessionEventLimit',
         label: 'Session event limit, 0 for none',
+        help: 'The most events RUM records in one session.',
         default: 0
       },
       {
@@ -434,6 +535,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'dispatchInterval',
         label: 'Dispatch interval, ms',
+        help: 'How often RUM sends the events it has gathered.',
         default: 2000
       },
       {
@@ -441,6 +543,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'allowCookies',
         label: 'Allow cookies',
+        help: 'RUM keeps its session and user ids in cookies, cwr_s and cwr_u, so it can count sessions and returning users.',
         default: true
       },
       {
@@ -448,6 +551,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'enableXRay',
         label: 'X-Ray tracing',
+        help: 'An X-Ray trace for the page load and each HTTP request RUM records, with the trace header added to the requests.',
         default: false
       },
       {
@@ -455,6 +559,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'disableAutoPageView',
         label: 'Automatic page view off',
+        help: 'RUM records no page views of its own: the app records them.',
         default: false
       },
       {
@@ -462,6 +567,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'recordResourceUrl',
         label: 'Record resource URLs',
+        help: 'Whether RUM records the URLs of the resources the page downloads, which may hold personal data.',
         default: true
       },
       {
@@ -469,6 +575,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'pagesToExclude',
         label: 'Pages to exclude, one RegExp per line',
+        help: 'Pages RUM records nothing on; they win over the pages to include.',
         default: []
       },
       {
@@ -476,6 +583,7 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
         section: 'broker',
         key: 'pagesToInclude',
         label: 'Pages to include, one RegExp per line',
+        help: 'The pages RUM records; every page when there are none.',
         default: []
       }
     ]
@@ -486,7 +594,29 @@ export const LAB_SETTINGS_SECTIONS: LabSettingsSection[] = [
     area: 'Diagnostics',
     applies: 'now',
     lead: 'Console lines for what is sent. The library reads them on every event, so they apply at once, without a reload, and are never waiting to be applied.',
-    fields: []
+    fields: [
+      {
+        kind: 'switch',
+        section: 'debug',
+        key: 'debugScenario',
+        label: 'debugScenario',
+        help: 'A line for each scenario event sent. Turns user timings on too.'
+      },
+      {
+        kind: 'switch',
+        section: 'debug',
+        key: 'debugBI',
+        label: 'debugBI',
+        help: 'A line for each BI event sent.'
+      },
+      {
+        kind: 'switch',
+        section: 'debug',
+        key: 'debugLogger',
+        label: 'debugLogger',
+        help: 'A line for each log record sent. Set from DevTools to logger names, such as checkout,cart, it prints only theirs; the switch then shows off.'
+      }
+    ]
   },
   {
     path: 'json',
diff --git a/projects/watchtower-lab/src/shell/pages/settings-section.page.ts b/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
index 1f7e200..72d7a69 100644
--- a/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings-section.page.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  Injector,
+  signal
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import {
   CpsInputComponent,
@@ -9,15 +18,14 @@ import {
 import { LabLoggerLevelsComponent } from '../../lab/lab-logger-levels.component';
 import { LabSettingStateComponent } from '../../lab/lab-setting-state.component';
 import {
-  LAB_DEBUG_FLAGS,
   LabSettingsDraft,
   labSettingId
 } from '../../lab/lab-settings-draft.service';
 import {
-  LAB_BROKER_MODES,
   LAB_SETTINGS_APPLIES,
   LabField,
   labFieldLabel,
+  labInOverlay,
   LabSettingsSection
 } from '../../lab/lab-settings-fields';
 import {
@@ -28,7 +36,9 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
 
 /**
  * One section of Settings: its controls, which write into the shared draft,
- * each with where it stands — not applied yet, or other than the lab's default.
+ * each with what it does and where it stands — not applied yet, or other
+ * than the lab's default. The setting a search led to, named in the
+ * address's fragment, is shown and focused.
  */
 @Component({
   selector: 'lab-settings-section',
@@ -63,61 +73,17 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
         </p>
       }
 
-      @if (section.path === 'rum-broker') {
-        <div class="lab-card">
-          <div class="lab-field">
-            <cps-select
-              label="Answer /rum/init with"
-              [options]="modes"
-              [returnObject]="false"
-              [value]="draft.mode()"
-              width="26rem"
-              (valueChanged)="draft.mode.set($event)" />
-            <lab-setting-state
-              [change]="draft.changeById().get('rum.mode')"
-              [modified]="draft.modifiedById().get('rum.mode')" />
-          </div>
-          <p>
-            RUM's own telemetry: the library's default is errors, performance
-            and same-origin HTTP. With none, RUM records only page views, the
-            session start and the library's events.
-          </p>
-          <div class="lab-field">
-            <div class="lab-switches">
-              <cps-switch
-                label="The library's default"
-                [value]="draft.telemetries() === null"
-                (valueChanged)="draft.useDefaultTelemetries($event)" />
-            </div>
-            @if (draft.telemetries(); as chosen) {
-              <cps-select
-                label="Telemetries"
-                placeholder="None"
-                [options]="telemetryOptions"
-                [returnObject]="false"
-                [multiple]="true"
-                [selectAll]="true"
-                [chips]="true"
-                [value]="chosen"
-                width="26rem"
-                (valueChanged)="draft.telemetries.set($event)" />
-            }
-            <lab-setting-state
-              [change]="draft.changeById().get('rum.telemetries')"
-              [modified]="draft.modifiedById().get('rum.telemetries')" />
-          </div>
-        </div>
-      }
-
       @if (section.fields.length) {
         <div class="lab-card">
           <div class="lab-fields">
             @for (field of section.fields; track id(field)) {
               <div
                 class="lab-field"
+                [id]="'setting-' + id(field)"
                 [class.lab-field-wide]="
                   field.kind === 'levels' || field.kind === 'shortcuts'
-                ">
+                "
+                [class.lab-field--found]="found() === id(field)">
                 @switch (field.kind) {
                   @case ('switch') {
                     <cps-switch
@@ -125,11 +91,13 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                       [value]="!!draft.value(field)"
                       [disabled]="draft.disabled(field)"
                       (valueChanged)="draft.set(field, $event)" />
+                    <p class="lab-field__help">{{ field.help }}</p>
                   }
                   @case ('number') {
                     <cps-input
                       type="number"
                       [label]="label(field)"
+                      [hint]="field.help"
                       width="26rem"
                       [value]="'' + draft.value(field)"
                       [disabled]="draft.disabled(field)"
@@ -138,6 +106,7 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                   @case ('text') {
                     <cps-input
                       [label]="label(field)"
+                      [hint]="field.help"
                       width="26rem"
                       [value]="'' + (draft.value(field) ?? '')"
                       [disabled]="draft.disabled(field)"
@@ -146,6 +115,7 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                   @case ('select') {
                     <cps-select
                       [label]="label(field)"
+                      [hint]="field.help"
                       [options]="selectOptions(field)"
                       [returnObject]="false"
                       [value]="'' + draft.value(field)"
@@ -156,6 +126,7 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                   @case ('multi') {
                     <cps-select
                       [label]="label(field)"
+                      [hint]="field.help"
                       [options]="selectOptions(field)"
                       [returnObject]="false"
                       [multiple]="true"
@@ -170,6 +141,7 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                     <cps-textarea
                       ngSkipHydration
                       [label]="label(field)"
+                      [hint]="field.help"
                       [rows]="3"
                       width="26rem"
                       [value]="
@@ -183,6 +155,7 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                   }
                   @case ('levels') {
                     <p class="lab-field-wide__label">{{ label(field) }}</p>
+                    <p class="lab-field__help">{{ field.help }}</p>
                     <lab-logger-levels
                       [levels]="levelsOf(draft.value(field))"
                       [disabled]="draft.disabled(field)"
@@ -190,11 +163,32 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
                   }
                   @case ('shortcuts') {
                     <p class="lab-field-wide__label">{{ label(field) }}</p>
+                    <p class="lab-field__help">{{ field.help }}</p>
                     <lab-shortcuts
                       [shortcuts]="shortcutsOf(draft.value(field))"
                       [disabled]="draft.disabled(field)"
                       (changed)="draft.set(field, $event)" />
                   }
+                  @case ('telemetries') {
+                    <cps-switch
+                      label="The library's default"
+                      [value]="draft.telemetries() === null"
+                      (valueChanged)="draft.useDefaultTelemetries($event)" />
+                    <p class="lab-field__help">{{ field.help }}</p>
+                    @if (draft.telemetries(); as chosen) {
+                      <cps-select
+                        label="Telemetries"
+                        placeholder="None"
+                        [options]="telemetryOptions"
+                        [returnObject]="false"
+                        [multiple]="true"
+                        [selectAll]="true"
+                        [chips]="true"
+                        [value]="chosen"
+                        width="26rem"
+                        (valueChanged)="draft.set(field, $event)" />
+                    }
+                  }
                 }
                 <lab-setting-state
                   [change]="draft.changeById().get(id(field))"
@@ -217,22 +211,6 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
       }
 
       @switch (section.path) {
-        @case ('debug-flags') {
-          <div class="lab-card">
-            <div class="lab-switches">
-              @for (flag of flags; track flag) {
-                <div class="lab-field">
-                  <cps-switch
-                    [label]="flag"
-                    [value]="draft.debug()[flag]"
-                    (valueChanged)="draft.setDebug(flag, $event)" />
-                  <lab-setting-state
-                    [modified]="draft.modifiedById().get('debug.' + flag)" />
-                </div>
-              }
-            </div>
-          </div>
-        }
         @case ('json') {
           <div class="lab-card">
             <!-- cps-textarea can't be hydrated: it's rendered afresh. -->
@@ -262,26 +240,38 @@ import { LAB_TELEMETRIES } from '../../lab/lab-wire.service';
 })
 export class SettingsSectionPage {
   protected readonly draft = inject(LabSettingsDraft);
+  private readonly route = inject(ActivatedRoute);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly injector = inject(Injector);
+
   protected readonly section: LabSettingsSection =
-    inject(ActivatedRoute).snapshot.data.section;
+    this.route.snapshot.data.section;
 
   protected readonly applies =
     this.section.applies && LAB_SETTINGS_APPLIES[this.section.applies];
 
   /** Whether its controls write into the overlay, and so wait for its JSON. */
-  protected readonly writesOverlay = this.section.fields.some(
-    (field) => field.section !== 'start' && field.section !== 'broker'
-  );
+  protected readonly writesOverlay = this.section.fields.some(labInOverlay);
+
+  /** The setting a search led to, by its id. */
+  protected readonly found = signal<string | null>(null);
 
   protected readonly id = labSettingId;
   protected readonly label = labFieldLabel;
-  protected readonly flags = LAB_DEBUG_FLAGS;
-  protected readonly modes = LAB_BROKER_MODES;
   protected readonly telemetryOptions = LAB_TELEMETRIES.map((t) => ({
     label: t,
     value: t
   }));
 
+  constructor() {
+    this.route.fragment.pipe(takeUntilDestroyed()).subscribe((id) => {
+      this.found.set(id);
+      if (id) {
+        afterNextRender(() => this.reveal(id), { injector: this.injector });
+      }
+    });
+  }
+
   protected selectOptions(field: LabField): { label: string; value: string }[] {
     return field.kind === 'select' || field.kind === 'multi'
       ? field.options
@@ -311,4 +301,15 @@ export class SettingsSectionPage {
   protected shortcutsOf(value: unknown): LabShortcut[] {
     return Array.isArray(value) ? (value as LabShortcut[]) : [];
   }
+
+  /** Brings a setting into view, and its control into focus. */
+  private reveal(id: string): void {
+    const field = this.host.nativeElement.ownerDocument.getElementById(
+      `setting-${id}`
+    );
+    field?.scrollIntoView({ block: 'center' });
+    field
+      ?.querySelector<HTMLElement>('input, textarea, [role="combobox"], button')
+      ?.focus({ preventScroll: true });
+  }
 }
diff --git a/projects/watchtower-lab/src/shell/pages/settings.page.ts b/projects/watchtower-lab/src/shell/pages/settings.page.ts
index 5b0007f..1772cfb 100644
--- a/projects/watchtower-lab/src/shell/pages/settings.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings.page.ts
@@ -2,8 +2,10 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  ElementRef,
   inject,
-  signal
+  signal,
+  viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
@@ -13,17 +15,59 @@ import {
   RouterLinkActive,
   RouterOutlet
 } from '@angular/router';
-import { CpsButtonComponent, CpsSelectComponent } from 'cps-ui-kit';
+import {
+  CpsAutocompleteComponent,
+  CpsButtonComponent,
+  CpsSelectComponent
+} from 'cps-ui-kit';
 import { filter } from 'rxjs';
-import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
+import {
+  LabSettingsDraft,
+  labSettingId
+} from '../../lab/lab-settings-draft.service';
 import {
   LAB_SETTINGS_AREAS,
-  LAB_SETTINGS_SECTIONS
+  LAB_SETTINGS_SECTIONS,
+  labSettingName
 } from '../../lab/lab-settings-fields';
 
 /** The picker's value for the overview, which has no path of its own. */
 const OVERVIEW = 'overview';
 
+/** A section, or a setting in one, as the search finds it. */
+interface LabSearchResult {
+  label: string;
+  /** Where it is, under its label. */
+  info: string;
+  /** What else it is found by: its name in the JSON, section and help. */
+  alias: string;
+  path: string;
+  /** The setting's id, to show it; none for a section. */
+  id?: string;
+}
+
+/** Each section, then its settings, as the search lists them. */
+const SEARCHABLE: LabSearchResult[] = LAB_SETTINGS_SECTIONS.flatMap(
+  (section) => [
+    {
+      label: section.label,
+      info: `Section · ${section.area}`,
+      alias: `${section.area} ${section.lead}`,
+      path: section.path
+    },
+    ...section.fields.map((field) => {
+      const name = labSettingName(field);
+      return {
+        label: field.label,
+        info: name ? `${section.label} · ${name}` : section.label,
+        alias: `${name} ${section.label} ${field.help}`,
+        path: section.path,
+        id: labSettingId(field)
+      };
+    })
+  ]
+);
+
 /** The section an address is in: `logging` for `/settings/logging?…`. */
 function sectionOf(url: string): string {
   return url.split(/[?#]/)[0].split('/')[2] || OVERVIEW;
@@ -37,6 +81,7 @@ function sectionOf(url: string): string {
 @Component({
   selector: 'lab-settings-page',
   imports: [
+    CpsAutocompleteComponent,
     CpsButtonComponent,
     CpsSelectComponent,
     RouterLink,
@@ -45,6 +90,7 @@ function sectionOf(url: string): string {
   ],
   providers: [LabSettingsDraft],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { '(document:keydown)': 'focusSearch($event)' },
   template: `
     <div class="lab-settings">
       <nav class="lab-settings__nav" aria-label="Settings sections">
@@ -101,6 +147,25 @@ function sectionOf(url: string): string {
       </div>
 
       <div class="lab-settings__content">
+        <!-- Over the section, wide enough for its results: the kit sizes
+             them to the box. -->
+        <cps-autocomplete
+          class="lab-settings__search"
+          ariaLabel="Find a setting"
+          placeholder="Find a setting  /"
+          prefixIcon="search"
+          [options]="searchable"
+          [returnObject]="true"
+          optionLabel="label"
+          optionInfo="info"
+          [withOptionsAliases]="true"
+          optionAlias="alias"
+          [showChevron]="false"
+          [hideDetails]="true"
+          emptyMessage="No setting matches"
+          width="100%"
+          (valueChanged)="find($event)" />
+
         <router-outlet />
 
         @if (draft.changes(); as changes) {
@@ -154,8 +219,11 @@ function sectionOf(url: string): string {
 export class SettingsPage {
   protected readonly draft = inject(LabSettingsDraft);
   private readonly router = inject(Router);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly search = viewChild.required(CpsAutocompleteComponent);
 
   protected readonly overview = OVERVIEW;
+  protected readonly searchable = SEARCHABLE;
   protected readonly areas = LAB_SETTINGS_AREAS.map((name) => ({
     name,
     id: `lab-settings-${name.toLowerCase().replace(/\W+/g, '-')}`,
@@ -222,4 +290,35 @@ export class SettingsPage {
       { queryParamsHandling: 'preserve' }
     );
   }
+
+  /** Goes to what the search found: its section, and the setting, shown there. */
+  protected async find(result: LabSearchResult | undefined): Promise<void> {
+    if (!result) {
+      return;
+    }
+    // Empty again for the next search, which may find the same one.
+    this.search().writeValue(undefined);
+    await this.router.navigate(['/settings', result.path], {
+      fragment: result.id,
+      queryParamsHandling: 'preserve'
+    });
+  }
+
+  /** `/`, outside a field: to the search, as on many sites. */
+  protected focusSearch(event: KeyboardEvent): void {
+    const target = event.target instanceof Element ? event.target : null;
+    if (
+      event.key !== '/' ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.altKey ||
+      target?.closest('input, textarea, select, [contenteditable]')
+    ) {
+      return;
+    }
+    event.preventDefault();
+    this.host.nativeElement
+      .querySelector<HTMLInputElement>('.lab-settings__search input')
+      ?.focus();
+  }
 }
diff --git a/projects/watchtower-lab/src/styles.scss b/projects/watchtower-lab/src/styles.scss
index 301d4c1..d111834 100644
--- a/projects/watchtower-lab/src/styles.scss
+++ b/projects/watchtower-lab/src/styles.scss
@@ -46,12 +46,48 @@
   align-items: start;
 }
 
-// A control, and under it where it stands: not applied, or modified.
+// A control, what it does, and where it stands: not applied, or modified.
 .lab-field {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   min-width: 0;
+  border-radius: 0.25rem;
+}
+
+// What a switch or an editor does: as the kit shows a field's hint. Past a
+// card's paragraphs, which are larger.
+.lab-field .lab-field__help {
+  max-width: 40rem;
+  margin: 0;
+  color: var(--cps-text-secondary);
+  font-size: 0.75rem;
+}
+
+// The setting a search led to, picked out for a moment.
+.lab-field--found {
+  animation: lab-found 2.5s ease-out;
+}
+
+@keyframes lab-found {
+  from {
+    background-color: rgb(135 10 60 / 10%);
+    box-shadow: 0 0 0 0.5rem rgb(135 10 60 / 10%);
+  }
+
+  to {
+    background-color: transparent;
+    box-shadow: 0 0 0 0.5rem transparent;
+  }
+}
+
+// Without the motion, it stays outlined.
+@media (prefers-reduced-motion: reduce) {
+  .lab-field--found {
+    animation: none;
+    outline: 0.125rem solid var(--cps-color-calm);
+    outline-offset: 0.375rem;
+  }
 }
 
 // A control that is a list, or has several parts, takes the card's whole width.
@@ -143,6 +179,12 @@
   align-items: start;
 }
 
+// Its results are as wide as it is, each name with where it is beside it.
+.lab-settings__search {
+  display: block;
+  max-width: 40rem;
+}
+
 // In view as the section scrolls, below the header, scrolled on its own if
 // the window is short.
 .lab-settings__nav {
@@ -213,6 +255,11 @@
   flex-direction: column;
   gap: 1.5rem;
   min-height: calc(100vh - 8.75rem - var(--uwt-inspector-inset-bottom, 0px));
+
+  // Only where the section goes, after it: no gap of its own.
+  > router-outlet {
+    display: none;
+  }
 }
 
 @container lab-main (max-width: 50rem) {

From 8c028a4193e8718311229a5949919b1840ac6667 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 17:37:06 +0100
Subject: [PATCH 50/51] reset every setting to the lab's defaults from the
 overview

---
 README.md                                     |  7 ++--
 playwright/settings.spec.ts                   | 38 ++++++++++++++++++-
 .../src/lab/lab-settings-draft.service.ts     | 21 +++++-----
 .../src/shell/pages/settings-overview.page.ts | 31 ++++++---------
 4 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index c80c859..3e6e8e0 100644
--- a/README.md
+++ b/README.md
@@ -95,9 +95,10 @@ documentation (and aws-rum-web's, for the app monitor), and where it stands:
 **Not applied**, with Undo, or **Modified** from the lab's default, with the
 default and a Reset that waits to be applied too (a debug flag resets at
 once); the list counts each section's modified settings. The **Overview**
-lists both, to undo or reset each. **Find a setting**, or `/`, finds one by
-its name, its name in the JSON or what it does, and shows it in its
-section. On a narrow screen the sections fold into a picker.
+lists both, to undo or reset each, or to reset all of them at once.
+**Find a setting**, or `/`, finds one by its name, its name in the JSON or
+what it does, and shows it in its section. On a narrow screen the sections
+fold into a picker.
 
 The header's chips show how this load runs, each a link to its setting;
 where the broker is set differently for the next one, its chip says so:
diff --git a/playwright/settings.spec.ts b/playwright/settings.spec.ts
index efbb3c0..63fdef9 100644
--- a/playwright/settings.spec.ts
+++ b/playwright/settings.spec.ts
@@ -460,11 +460,47 @@ test('Settings applies an overlay, shows it in effect, and goes back', async ({
   await expect(await effective(page)).toContainText('"dedupWindowMs": 0');
 
   await settingsSection(page, 'Overview');
-  await press(page, "Back to the lab's settings");
+  await press(page, "Reset all to the lab's defaults");
+  await applyAndReload(page);
   await expect(header).not.toContainText('config:');
   await expect(await effective(page)).toContainText('"dedupWindowMs": 400');
 });
 
+test("Reset all puts every setting back to the lab's default, to apply with the rest, a debug flag at once", async ({
+  page,
+  backend
+}) => {
+  await backend.setBrokerMode('null');
+  await openLab(page, 'settings/debug-flags?destination=noop', {
+    logging: { minLevel: 'warn' }
+  });
+  await toggle(page, 'debugBI');
+  await settingsSection(page, 'Overview');
+
+  await press(page, "Reset all to the lab's defaults");
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem('debugBI')))
+    .toBeNull();
+  for (const change of [
+    'Delivery › Destination',
+    'Logging › Minimum level',
+    'RUM broker › Answer /rum/init with'
+  ]) {
+    await expect(pending(page)).toContainText(change);
+  }
+
+  await applyAndReload(page);
+  expect(new URL(page.url()).search).toBe('');
+  expect((await backend.state()).brokerMode).toBe('ok');
+  await expect(
+    page
+      .locator('lab-settings-overview .lab-card', {
+        hasText: "Different from the lab's defaults"
+      })
+      .getByText('Nothing')
+  ).toBeVisible();
+});
+
 test('Settings checks the overlay against the library: no unknown setting, no wrong type', async ({
   page
 }) => {
diff --git a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
index 52ac23e..c49079f 100644
--- a/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
+++ b/projects/watchtower-lab/src/lab/lab-settings-draft.service.ts
@@ -402,12 +402,14 @@ export class LabSettingsDraft {
     this.editBroker(JSON.stringify(this.wire.brokerConfig()));
   }
 
-  /** The lab's own settings, and the broker's default answer. */
-  async reset(): Promise<void> {
-    await this.wire.setBrokerMode('ok');
-    await this.wire.setTelemetries(null);
-    await this.wire.setBrokerConfig({});
-    this.reload({});
+  /**
+   * Every setting back to the lab's default, as each one's Reset puts it:
+   * to apply with the rest, a debug flag at once.
+   */
+  resetAll(): void {
+    for (const setting of this.modified()) {
+      setting.revert();
+    }
   }
 
   setDebug(flag: LabDebugFlag, on: boolean): void {
@@ -703,11 +705,8 @@ export class LabSettingsDraft {
     return JSON.stringify(this.options.config, null, 2);
   }
 
-  /** Starts the lab again, with `config` and how it is to start: as now, by default. */
-  private reload(
-    config: Record<string, unknown>,
-    start: LabStart = startOf(this.options)
-  ): void {
+  /** Starts the lab again, with `config`, and as `start` says. */
+  private reload(config: Record<string, unknown>, start: LabStart): void {
     this.window.location.assign(
       `${this.window.location.pathname}${labSearch({ ...start, config })}`
     );
diff --git a/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts b/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
index e8895b7..26b98a7 100644
--- a/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
+++ b/projects/watchtower-lab/src/shell/pages/settings-overview.page.ts
@@ -4,9 +4,9 @@ import { CpsButtonComponent } from 'cps-ui-kit';
 import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
 
 /**
- * Settings' first page: what is waiting to be applied, what this load runs
- * with otherwise than the lab's defaults — each to undo or reset — and a way
- * back to the lab's own settings.
+ * Settings' first page: what is waiting to be applied, and what this load
+ * runs with otherwise than the lab's defaults — each to undo or reset, or
+ * every one reset at once.
  */
 @Component({
   selector: 'lab-settings-overview',
@@ -56,8 +56,8 @@ import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
         <h2>Different from the lab's defaults</h2>
         @if (draft.modified().length) {
           <p>
-            Reset puts one back, to apply with the rest; a debug flag goes back
-            at once.
+            Reset puts one back, Reset all every one, to apply with the rest; a
+            debug flag goes back at once.
           </p>
           <ul class="lab-changes">
             @for (setting of draft.modified(); track setting.id) {
@@ -79,25 +79,16 @@ import { LabSettingsDraft } from '../../lab/lab-settings-draft.service';
               </li>
             }
           </ul>
+          <div class="lab-actions">
+            <cps-button
+              label="Reset all to the lab's defaults"
+              type="outlined"
+              (clicked)="draft.resetAll()" />
+          </div>
         } @else {
           <p>Nothing: this load runs as the lab does by default.</p>
         }
       </div>
-
-      <div class="lab-card">
-        <h2>The lab's settings</h2>
-        <p>
-          Back to the library's settings and the mock broker's answer as the lab
-          sets them, at once. How the lab starts, and the debug flags, stay as
-          they are.
-        </p>
-        <div class="lab-actions">
-          <cps-button
-            label="Back to the lab's settings"
-            type="outlined"
-            (clicked)="draft.reset()" />
-        </div>
-      </div>
     </section>
   `
 })

From 3cf21e3db69c93d58084bb594761aef1b8629cc8 Mon Sep 17 00:00:00 2001
From: fateeand <fateeand@gmail.com>
Date: Fri, 13 Nov 2026 17:57:41 +0100
Subject: [PATCH 51/51] reloading the separate window reopens the inspector

---
 playwright/inspector.spec.ts                      |  9 ++++++---
 projects/ngx-ui-watchtower/DESIGN.md              |  6 ++++--
 .../uwt-event-inspector.service.spec.ts           | 15 +++++++++++++++
 .../uwt-event-inspector.service.ts                |  2 ++
 .../uwt-inspector-window.spec.ts                  |  9 +++++++++
 .../uwt-inspector-window/uwt-inspector-window.ts  |  9 ++++++++-
 6 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/playwright/inspector.spec.ts b/playwright/inspector.spec.ts
index 80c7bda..4a15793 100644
--- a/playwright/inspector.spec.ts
+++ b/playwright/inspector.spec.ts
@@ -406,7 +406,7 @@ test('an Esc that closes the inspector is marked handled, so notifications stay;
   ).toEqual([false, true]);
 });
 
-test('a separate window survives a reload, and shows what it had captured', async ({
+test('reloading a separate window reopens the inspector in it: the window stays, the history starts again', async ({
   page
 }) => {
   const popup = page.waitForEvent('popup');
@@ -416,7 +416,6 @@ test('a separate window survives a reload, and shows what it had captured', asyn
 
   const status = window.locator('.uwt-inspector__status');
   await expect(status).toContainText(/[1-9]\d* events?/);
-  const captured = (await status.innerText()).match(/(\d+) events?/)![1];
   // The reload gives it a new, empty document; this mark does not survive it.
   await window.evaluate(() => (document.body.dataset.before = 'reload'));
   let closed = false;
@@ -426,8 +425,12 @@ test('a separate window survives a reload, and shows what it had captured', asyn
 
   await expect(window.locator('.uwt-inspector__header')).toBeVisible();
   await expect(window.locator('body')).not.toHaveAttribute('data-before', /./);
-  await expect(status).toContainText(`${captured} event`);
+  // As closing it and opening it again: what it had captured is gone…
+  await expect(status).toContainText(/\b0 events/);
   expect(closed).toBe(false);
+  // …and it captures from here.
+  await press(page, 'One of each kind');
+  await expect(status).toContainText(/[1-9]\d* events?/);
 
   // Still the inspector's own window: closing it closes the inspector.
   await window.close();
diff --git a/projects/ngx-ui-watchtower/DESIGN.md b/projects/ngx-ui-watchtower/DESIGN.md
index b8a8beb..7110b69 100644
--- a/projects/ngx-ui-watchtower/DESIGN.md
+++ b/projects/ngx-ui-watchtower/DESIGN.md
@@ -255,8 +255,10 @@ across realms).
   Reloading it gives it a new, empty document, which the app draws into again
   (its page hiding counts as a close only if the window is gone a moment
   later). One session holds the captured history from opening to closing, so
-  moving between docks — each a fresh view — or reloading the window loses
-  nothing.
+  moving between docks — each a fresh view — loses nothing. A reload starts
+  over, as it does on any page: it is closing the inspector and opening it
+  again, in the same window. The captured history, filters and pause are
+  gone; the window's size and place, and the preferences, stay.
 - **Test doubles live in the specs that use them**, declared inline, never in
   a shared file and never exported. The one browser gap needing a stub is
   `BroadcastChannel`, which jsdom doesn't implement.
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
index 10c864c..980eb26 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.spec.ts
@@ -381,6 +381,21 @@ describe('UwtEventInspectorService', () => {
     });
   });
 
+  it('should start afresh when the window is reloaded, as closing and opening it again', () => {
+    const { host, open } = fakeWindow();
+    const service = create();
+    service.setDock('window');
+    const session = TestBed.inject(UwtInspectorSession);
+    const history = session.store;
+
+    open.mock.calls[0][0].onReloaded();
+
+    // A new history, in the same window, still open.
+    expect(session.store).not.toBe(history);
+    expect(service.isOpen()).toBe(true);
+    expect(host.destroy).not.toHaveBeenCalled();
+  });
+
   it('should open a dialog, warning once, when the browser blocks the window', () => {
     jest.spyOn(windowHost, 'uwtOpenInspectorWindow').mockReturnValue(undefined);
     const warn = jest
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
index 41ae991..0619c44 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-event-inspector.service/uwt-event-inspector.service.ts
@@ -386,6 +386,8 @@ export class UwtEventInspectorService {
       name: uwtInspectorWindowName(application),
       geometry: this.preferences.read().window,
       onClosed: () => host && this.closedByUser(host),
+      // A reload starts over, as on any page: a new session, in the same window.
+      onReloaded: () => this.session.end(),
       onKeydown: this.onKeydown,
       onGeometry: (window) => this.preferences.update({ window })
     });
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
index 71f1f37..41769b8 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.spec.ts
@@ -100,6 +100,7 @@ describe('uwtOpenInspectorWindow', () => {
       appRef: TestBed.inject(ApplicationRef),
       title: 'Event Inspector · shop',
       onClosed: jest.fn(),
+      onReloaded: jest.fn(),
       onKeydown: jest.fn(),
       onGeometry: jest.fn()
     };
@@ -188,6 +189,7 @@ describe('uwtOpenInspectorWindow', () => {
     // A reload hides the page too, so the window is looked at once it settles.
     jest.advanceTimersByTime(100);
     expect(options.onClosed).toHaveBeenCalledTimes(1);
+    expect(options.onReloaded).not.toHaveBeenCalled();
 
     host?.destroy();
     expect(options.onGeometry).toHaveBeenCalledTimes(1);
@@ -201,9 +203,16 @@ describe('uwtOpenInspectorWindow', () => {
     const host = uwtOpenInspectorWindow(options);
 
     const doc = reload();
+    // Reported before the inspector is drawn again, for a fresh one.
+    let drawnWhenReported: boolean | undefined;
+    jest.mocked(options.onReloaded).mockImplementation(() => {
+      drawnWhenReported = !!doc.querySelector('.uwt-inspector__title');
+    });
     jest.advanceTimersByTime(100);
 
     expect(options.onClosed).not.toHaveBeenCalled();
+    expect(options.onReloaded).toHaveBeenCalledTimes(1);
+    expect(drawnWhenReported).toBe(false);
     expect(doc.title).toBe('Event Inspector · shop');
     expect(doc.head.textContent).toContain('.app {}');
     expect(doc.querySelector('.uwt-inspector__title')?.textContent).toBe(
diff --git a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
index 9b322b2..3e580cc 100644
--- a/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
+++ b/projects/ngx-ui-watchtower/event-inspector/src/lib/uwt-inspector-window/uwt-inspector-window.ts
@@ -55,6 +55,11 @@ export interface UwtInspectorWindowOptions {
   geometry?: UwtInspectorWindowGeometry;
   /** The user closed the window. */
   onClosed: () => void;
+  /**
+   * The user reloaded the window: as closing it and opening it again, so
+   * the inspector drawn in its new document starts afresh.
+   */
+  onReloaded: () => void;
   /** Every key pressed in the window, for the shortcut. */
   onKeydown: (event: KeyboardEvent) => void;
   /** The window's size and position, as it closes. */
@@ -166,7 +171,7 @@ export function uwtOpenInspectorWindow(
   };
 
   let settling: ReturnType<typeof setTimeout> | undefined;
-  /** Closed, or reloaded: a reload gets the inspector drawn again in its new document. */
+  /** Closed, or reloaded: a reload gets the inspector drawn afresh in its new document. */
   const settle = (triesLeft: number) => {
     settling = undefined;
     if (popup.closed) {
@@ -180,6 +185,8 @@ export function uwtOpenInspectorWindow(
         current = undefined;
       }
       try {
+        // Between the old view and the new: neither holds the history then.
+        options.onReloaded();
         current = mount(next);
         // Its size is saved again when it next closes.
         saved = false;